@page "/demo"

<body>
    <div class="document-container d-flex">

        <aside>
            <div class="sidebar @sidebarClosed">


                <div class="profile-details">
                    <div class="avatar">
                        <img src="http://sys-app/core/app/sys/avatar/1733c1cf-a588-4a45-9773-dcd320bee57f/1" title="Janko Jordan">
                    </div>
                    <div class="name-job">
                        <div class="profile-name">Janko Jordan</div>
                        <div class="profile-job">Web Designer</div>
                    </div>
                    <i class='bx bx-log-out'></i>
                </div>

                <ul class="nav-links">
                    <li class="@NavClosed">
                        <div @onclick="ToggleNav" class="iocn-link">
                            <a href="#">
                                <i class='bx bx-collection' @onclick="ToggleNav"></i>
                                <span class="link_name">Proizvodni nalogi</span>
                            </a>
                            <i class='bx bxs-chevron-down arrow'></i>
                        </div>
                        <ul class="sub-menu">
                            <li><a class="link_name" href="#">Proizvodni nalogi</a></li>
                            <li><a href="#">Osnutek</a></li>
                            <li><a href="#">V obdelavi</a></li>
                            <li><a href="#">Aktiven</a></li>
                            <li><a href="#">Zaprt</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">
                            <i class='bx bx-grid-alt'></i>
                            <span class="link_name">Izvedba</span>
                        </a>
                        <ul class="sub-menu blank">
                            <li><a class="link_name" href="#">Izvedba</a></li>
                        </ul>
                    </li>
                </ul>


            </div>
        </aside>



        <section class="main @sidebarClosed">


            <div class="color-picker-container">

                <form class="color-picker" action="">
                    <fieldset>
                        <legend class="visually-hidden">Pick a color scheme</legend>

                        <label for="light" class="visually-hidden">Light</label>
                        <input type="radio" id="light" name="theme" checked>

                        <label for="pink" class="visually-hidden">Pink theme</label>
                        <input type="radio" id="pink" name="theme">

                        <label for="dark" class="visually-hidden">Dark theme</label>
                        <input type="radio" id="dark" name="theme">
                    </fieldset>
                </form>

            </div>

            <div class="">
                <i class='bx bx-menu' @onclick="ToggleSidebar"></i>
                <span class="text">Open Sidebar</span>

                <section id="borders" class="mt-3 b-1 b-r-4 p-5">
                    <h2>Borders</h2>
                    <p>Use border utilities to quickly style the border, border color and border-radius of an element.
                        Great for images, buttons, or any other element. Responsive classes are available that use the
                        same viewport width breakpoints as the grid system.
                    </p>
                    <div>
                        <h4 class="text-core mt-5">Position</h4>
                        <div class="d-flex flex-wrap gap-3 square">
                            <div class="b-1">b-1</div>
                            <span class="bt-1">bt-1</span>
                            <span class="br-1">br-1</span>
                            <span class="bb-1">bb-1</span>
                            <span class="bl-1">bl-1</span>
                            <span class="bx-1">bx-1</span>
                            <span class="by-1">by-1</span>
                        </div>
                    </div>
                    <hr class="mt-4 mb-4">
                    <div>
                        <h4 class="text-core mt-5">Color</h4>
                        <div class="d-flex flex-wrap gap-3 square">
                            <span class="b-1 b-c-core">b-1 <br> b-c-core</span>
                            <span class="b-1 b-c-primary">b-1 <br> b-c-primary</span>
                            <span class="b-1 b-c-secondary">b-1 <br> b-c-secondary</span>
                            <span class="b-1 b-c-success">b-1 <br> b-c-success</span>
                            <span class="b-1 b-c-info">b-1 <br> b-c-info</span>
                            <span class="b-1 b-c-warning">b-1 <br> b-c-warning</span>
                            <span class="b-1 b-c-danger">b-1 <br> b-c-danger</span>
                            <span class="b-1 b-c-white">b-1 <br> b-c-white</span>
                            <span class="b-1 b-c-light">b-1 <br> b-c-light</span>
                            <span class="b-1 b-c-dark">b-1 <br> b-c-dark</span>
                            <span class="b-1 b-c-black">b-1 <br> b-c-black</span>
                        </div>
                    </div>
                    <hr class="mt-4 mb-4">
                    <div>
                        <h4 class="text-core mt-5">Border-radius</h4>
                        <div class="d-flex flex-wrap gap-3 square">
                            <span class="b-1 b-r-0">b-1 b-r-0</span>
                            <span class="b-1 b-r-1">b-1 b-r-1</span>
                            <span class="b-1 b-r-2">b-1 b-r-2</span>
                            <span class="b-1 b-r-3">b-1 b-r-3</span>
                            <span class="b-1 b-r-4">b-1 b-r-4</span>
                            <span class="b-1 b-r-5">b-1 b-r-5</span>
                            <span class="b-1 b-r-circle">b-1 b-r-circle</span>
                            <span style="width:100px;" class="b-1 b-r-pill">b-1 b-r-pill</span>
                        </div>
                    </div>
                </section>


                <section id="text" class="mt-3 b-1 b-r-4 p-5">
                    <h2>Colors</h2>
                    <p>Convey meaning through color with a handful of color utility classes. Includes support for
                        styling links with hover states, too.
                    </p>
                    <h4 class="text-core mt-5">Color</h4>
                    <div class="grid test grid-col-6 gap-3">
                        <span class="p-3 text-core">text-core </span>
                        <span class="p-3 text-primary">text-primary </span>
                        <span class="p-3 text-secondary">text-secondary </span>
                        <span class="p-3 text-success">text-success</span>
                        <span class="p-3 text-info">text-info</span>
                        <span class="p-3 text-warning">text-warning</span>
                        <span class="p-3 text-danger">text-danger</span>
                        <span class="p-3 text-white">text-white</span>
                        <span class="p-3 text-light">text-light</span>
                        <span class="p-3 text-dark">text-dark</span>
                        <span class="p-3 text-black">text-black</span>
                    </div>

                    <div class="mt-4 b-1 b-r-3 px-4 element-fg-core">
                        <pre>
 <code id="htmlViewer" style="display:block;overflow-x:auto;">
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">span</span> <span style="color:rgb(0, 128, 128); font-weight:400;">class</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;text-core&quot;</span>&gt;</span>text-core<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">span</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">span</span> <span style="color:rgb(0, 128, 128); font-weight:400;">class</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;text-primary&quot;</span>&gt;</span>text-primary<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">span</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">span</span> <span style="color:rgb(0, 128, 128); font-weight:400;">class</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;text-secondary&quot;</span>&gt;</span>text-secondary<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">span</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">span</span> <span style="color:rgb(0, 128, 128); font-weight:400;">class</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;text-success&quot;</span>&gt;</span>text-success<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">span</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">span</span> <span style="color:rgb(0, 128, 128); font-weight:400;">class</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;text-info&quot;</span>&gt;</span>text-info<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">span</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">span</span> <span style="color:rgb(0, 128, 128); font-weight:400;">class</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;text-warning&quot;</span>&gt;</span>text-warning<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">span</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">span</span> <span style="color:rgb(0, 128, 128); font-weight:400;">class</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;text-danger&quot;</span>&gt;</span>text-danger<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">span</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">span</span> <span style="color:rgb(0, 128, 128); font-weight:400;">class</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;text-white&quot;</span>&gt;</span>text-white<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">span</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">span</span> <span style="color:rgb(0, 128, 128); font-weight:400;">class</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;text-light&quot;</span>&gt;</span>text-light<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">span</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">span</span> <span style="color:rgb(0, 128, 128); font-weight:400;">class</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;text-dark&quot;</span>&gt;</span>text-dark<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">span</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">span</span> <span style="color:rgb(0, 128, 128); font-weight:400;">class</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;text-black&quot;</span>&gt;</span>text-black<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">span</span>&gt;</span>
</code></pre>
                    </div>
                    <hr class="mt-4 mb-4">
                    <h4 class="text-core mt-5">Background color</h4>
                    <div class="grid test grid-col-6 gap-3">
                        <div class="p-3 bg-core">bg-core</div>
                        <div class="p-3 bg-primary">bg-primary</div>
                        <div class="p-3 bg-secondary">bg-secondary</div>
                        <div class="p-3 bg-success">bg-success</div>
                        <div class="p-3 bg-info">bg-info</div>
                        <div class="p-3 bg-warning">bg-warning</div>
                        <div class="p-3 bg-danger">bg-danger</div>
                        <div class="p-3 bg-white">bg-white</div>
                        <div class="p-3 bg-light">bg-light</div>
                        <div class="p-3 bg-dark">bg-dark</div>
                        <div class="p-3 bg-black">bg-black</div>
                    </div>
                    <hr class="mt-4 mb-4">

                    <h4 class="text-core mt-5">Link color</h4>
                    <div class="grid test grid-col-6 gap-3">
                        <a href="#" class="p-3 text-core">text-core </a>
                        <a href="#" class="p-3 text-primary">text-primary </a>
                        <a href="#" class="p-3 text-secondary">text-secondary </a>
                        <a href="#" class="p-3 text-success">text-success</a>
                        <a href="#" class="p-3 text-info">text-info</a>
                        <a href="#" class="p-3 text-warning">text-warning</a>
                        <a href="#" class="p-3 text-danger">text-danger</a>
                        <a href="#" class="p-3 text-white">text-white</a>
                        <a href="#" class="p-3 text-light">text-light</a>
                        <a href="#" class="p-3 text-dark">text-dark</a>
                        <a href="#" class="p-3 text-black">text-black</a>
                    </div>
                </section>


                <section id="text" class="mt-3 b-1 b-r-4 p-5">
                    <h2>Text</h2>
                    <p>Documentation and examples for common text utilities to control size, alignment, wrapping,
                        weight, and
                        more.
                    </p>

                    <!-- text sizes -->
                    <h4 class="text-core mt-5">Text sizes</h4>
                    <div class="grid test grid-col-1 gap-3">
                        <div>
                            <h5>This is h5 </h5>
                            <p class="text-small"><span class="text-semibold">text-small</span><br>This is small font
                                size<br>
                                Lorem
                                ipsum dolor sit, amet
                                consectetur
                                adipisicing
                                elit. Eum quis neque ullam, eos eaque nam voluptate veniam dolor ex ratione?
                            </p>
                        </div>
                        <div>
                            <h4>This is h4 </h4>
                            <p><span class="text-semibold">No class required</span><br>This is base font size <br>Lorem
                                ipsum
                                dolor sit amet consectetur,
                                adipisicing elit.
                                Explicabo modi dicta eveniet quia, repudiandae perspiciatis omnis vitae nihil vero
                                ratione.
                            </p>
                        </div>
                        <div>
                            <h3>This is h3 </h3>
                            <p class="text-medium"><span class="text-semibold">text-medium</span><br>This is medium font
                                <br>
                                Lorem
                                ipsum
                                dolor sit, amet consectetur
                                adipisicing
                                elit. Alias praesentium quo est pariatur sed nobis maiores rem aperiam ut voluptas?
                            </p>
                        </div>
                        <div>
                            <h2>This is h2 </h2>
                            <p class="text-large"><span class="text-semibold">text-large</span><br>This is large font
                                <br>
                                Lorem
                                ipsum
                                dolor sit, amet consectetur
                                adipisicing
                                elit. Obcaecati nihil totam, modi minus excepturi laboriosam maiores. Provident quos est
                                maiores.
                            </p>
                        </div>
                        <div>
                            <h1>This is h1 </h1>
                            <p class="text-extralarge"><span class="text-semibold">text-extralarge</span><br>This is
                                extra
                                large
                                font <br>
                                Lorem
                                ipsum dolor sit amet,
                                consectetur adipisicing elit. Beatae, modi!
                            </p>
                        </div>
                        <div>
                            <p class="text-sm-medium"><span class="text-semibold">text-sm-medium</span>
                                <br>Medium size text on viewports sized SM (small) or wider.
                            </p>
                        </div>
                        <div>
                            <p class="text-md-medium"><span class="text-semibold">text-md-medium</span>
                                <br>Medium size text on viewports sized MD (medium) or wider.
                            </p>
                        </div>
                        <div>
                            <p class="text-lg-medium"><span class="text-semibold">text-lg-medium</span>
                                <br>Medium size text on viewports sized LG (large) or wider.
                            </p>
                        </div>
                        <div>
                            <p class="text-xl-medium"><span class="text-semibold">text-xl-medium</span>
                                <br>Medium size text on viewports sized XL (extra-large) or wider.
                            </p>
                        </div>
                    </div>

                    <div>
                        <h4 class="text-core mt-5">Text alignment</h4>
                        <p>Easily realign text to components with text alignment classes.
                        </p>
                        <div class="b-1 b-r-3 p-5 border-core">
                            <div class="text-left">
                                <p class="text-semibold">text-left</p>
                                <p>Left aligned text on all viewport sizes</p>
                            </div>
                            <hr>
                            <div class="text-center">
                                <p class="text-semibold">text-center</p>
                                <p>Center aligned text on all viewport sizes.</p>
                            </div>
                            <hr>
                            <div class="text-right">
                                <p class="text-semibold">text-right</p>
                                <p>Right aligned text on all viewport sizes.</p>
                            </div>
                            <hr>
                            <div class="text-justify">
                                <p class="text-semibold">text-justify</p>
                                <p>Justified text on all viewport sizes. Lorem ipsum dolor sit, amet consectetur
                                    adipisicing elit. Temporibus consequatur nisi amet modi in voluptatum facere
                                    reprehenderit, aut assumenda. Velit.</p>
                            </div>
                            <hr>
                            <div class="text-sm-right">
                                <p class="text-semibold">text-sm-right</p>
                                <p>Right aligned text on viewports sized SM (small) or wider.</p>
                            </div>
                            <hr>
                            <div class="text-md-right">
                                <p class="text-semibold">text-md-right</p>
                                <p>Right aligned text on viewports sized MD (medium) or wider.</p>
                            </div>
                            <hr>
                            <div class="text-lg-right">
                                <p class="text-semibold">text-lg-right</p>
                                <p>Right aligned text on viewports sized LG (large) or wider.</p>
                            </div>
                            <hr>
                            <div class="text-xl-right">
                                <p class="text-semibold">text-xl-right</p>
                                <p>Right aligned text on viewports sized XL (extra-large) or wider.</p>
                            </div>
                        </div>
                    </div>


                    <div>
                        <h4 class="text-core mt-5">Font weight</h4>
                        <p>Quickly change the weight (boldness).
                        </p>
                        <div class="b-1 b-r-3 p-5 border-core">
                            <p class="text-semibold">text-thin</p>
                            <div class="text-thin">
                                <p>This is thin text</p>
                            </div>
                            <hr>
                            <p class="text-semibold">text-regular</p>
                            <div class="text-regular">
                                <p>This is normal weight text - no class required</p>
                            </div>
                            <hr>
                            <p class="text-semibold">text-semibold</p>
                            <div class="text-semibold">
                                <p>This is semibold text</p>
                            </div>
                            <hr>
                            <p class="text-semibold">text-bold</p>
                            <div class="text-bold">
                                <p>This is bold text</p>
                            </div>
                            <hr>
                            <p class="text-semibold">text-extrabold</p>
                            <div class="text-extrabold">
                                <p>This is extra bold text</p>
                            </div>
                            <hr>
                            <p class="text-semibold">text-sm-bold</p>
                            <div class="text-sm-bold">
                                <p>Bold text on viewports sized SM (small) or wider.</p>
                            </div>
                        </div>
                    </div>


                    <div>
                        <h4 class="text-core mt-5">Text transform</h4>
                        <p>Transform text in components with text capitalization classes or italicize text.
                        </p>
                        <div class="b-1 b-r-3 p-5 border-core">
                            <p class="text-semibold">text-italic</p>
                            <div class="text-italic">
                                <p>This is italic text</p>
                            </div>
                            <hr>
                            <p class="text-semibold">text-lowercase</p>
                            <div class="text-lowercase">
                                <p>This is lowercased text</p>
                            </div>
                            <hr>
                            <p class="text-semibold">text-uppercase</p>
                            <div class="text-uppercase">
                                <p>This is uppercased text</p>
                            </div>
                            <hr>
                            <p class="text-semibold">text-capitalize</p>
                            <div class="text-capitalize">
                                <p>This is capitalized text</p>
                            </div>
                            <hr>
                            <p class="text-semibold">text-nowrap</p>
                            <div style="width:150px; background:yellow;" class="text-nowrap">
                                This text should overflow the parent.
                            </div>
                            <hr>
                            <p class="text-semibold">text-truncate</p>
                            <div style="width:150px; background:yellow;" class="text-truncate">
                                <span>
                                    This is text is truncated
                                </span>
                            </div>
                        </div>
                    </div>
                </section>


                <section id="buttons" class="mt-3 b-1 b-r-4 p-5">
                    <h2>Buttons</h2>
                    <p>Use custom button styles for actions in forms, dialogs, and more with support for multiple sizes,
                        states, and more.
                    </p>
                    <div>
                        <h4 class="text-core mt-5">Examples</h4>
                        <div class="d-flex flex-wrap gap-3 ">
                            <button type="button" href="#" class="btn btn-core">click me</button>
                            <button type="button" href="#" class="btn btn-primary">click me</button>
                            <button type="button" href="#" class="btn btn-secondary">click me</button>
                            <button type="button" href="#" class="btn btn-success">click me</button>
                            <button type="button" href="#" class="btn btn-info">click me</button>
                            <button type="button" href="#" class="btn btn-warning">click me</button>
                            <button type="button" href="#" class="btn btn-danger">click me</button>
                            <button type="button" href="#" class="btn btn-white">click me</button>
                            <button type="button" href="#" class="btn btn-light">click me</button>
                            <button type="button" href="#" class="btn btn-dark">click me</button>
                        </div>
                    </div>
                    <hr class="mt-4 mb-4">
                    <div>
                        <h4 class="text-core mt-5">Outline buttons</h4>
                        <div class="d-flex flex-wrap gap-3 ">
                            <button type="button" href="#" class="btn btn-outline-core">click me</button>
                            <button type="button" href="#" class="btn btn-outline-primary">click me</button>
                            <button type="button" href="#" class="btn btn-outline-secondary">click me</button>
                            <button type="button" href="#" class="btn btn-outline-success">click me</button>
                            <button type="button" href="#" class="btn btn-outline-info">click me</button>
                            <button type="button" href="#" class="btn btn-outline-warning">click me</button>
                            <button type="button" href="#" class="btn btn-outline-danger">click me</button>
                            <button type="button" href="#" class="btn btn-outline-white">click me</button>
                            <button type="button" href="#" class="btn btn-outline-light">click me</button>
                            <button type="button" href="#" class="btn btn-outline-dark">click me</button>
                        </div>
                    </div>
                    <hr class="mt-4 mb-4">
                    <div>
                        <h4 class="text-core mt-5">Sizes</h4>
                        <div class="">
                            <button type="button" href="#" class="btn btn-sm btn-core">small button</button>
                            <button type="button" href="#" class="btn btn-sm btn-light">small button</button>
                        </div>
                        <div class="mt-4 ">
                            <button type="button" href="#" class="btn btn-lg btn-core">large button</button>
                            <button type="button" href="#" class="btn btn-lg btn-light">large button</button>
                        </div>
                        <div class="mt-4 ">
                            <button type="button" href="#" class="btn btn-block btn-core">full width button</button>
                            <button type="button" href="#" class="mt-4 btn btn-block btn-light">full width
                                button</button>
                        </div>
                    </div>
                    <hr class="mt-4 mb-4">
                    <div>
                        <h4 class="text-core mt-5">Button states</h4>
                        <div class="">
                            <button type="button" href="#" class="btn btn-core active" aria-pressed="true">active
                                button</button>
                            <button type="button" href="#" class="btn btn-core">normal button</button>
                            <button type="button" href="#" class="btn btn-core disabled" aria-disabled="true">disabled
                                button</button>
                        </div>
                        <div class="mt-4">
                            <button type="button" href="#" class="btn btn-outline-core active" aria-pressed="true">active button</button>
                            <button type="button" href="#" class="btn btn-outline-core">normal button</button>
                            <button type="button" href="#" class="btn btn-outline-core disabled" aria-disabled="true">disabled
                                button</button>
                        </div>
                    </div>
                </section>

                <section id="buttons" class="mt-3 b-1 b-r-4 p-5">
                    <h2>Radio
                    </h2>
                    <p>Radio buttons allow the user to select a single choice from a group of options.


                    </p>
                    <div>
                        <div class="container">

                            <div class="checkbox-group">
                                <input id="checkbox-1" name="checkbox" type="checkbox" checked>
                                <label for="checkbox-1" class="checkbox-label">Checked</label>
                            </div>

                            <div class="checkbox-group">
                                <input id="checkbox-2" name="checkbox" type="checkbox">
                                <label for="checkbox-2" class="checkbox-label">Unchecked</label>
                            </div>

                            <div class="checkbox-group">
                                <input id="checkbox-1" name="checkbox" type="checkbox" disabled>
                                <label for="checkbox-1" class="checkbox-label">Checked disabled</label>
                            </div>


                            <div class="radio-group">
                                <input id="radio-1" name="radio" type="radio" checked>
                                <label for="radio-1" class="radio-label">Checked</label>
                            </div>

                            <div class="radio-group">
                                <input id="radio-2" name="radio" type="radio">
                                <label for="radio-2" class="radio-label">Unchecked</label>
                            </div>

                            <div class="radio-group">
                                <input id="radio-3" name="radio" type="radio" disabled>
                                <label for="radio-3" class="radio-label">Disabled</label>
                            </div>
                        </div>

                    </div>
                </section>

                <section id="inputs" class="mt-3 b-1 b-r-4 p-5">
                    <h2>Input
                    </h2>
                    <p>Inputs buttons allow the user to select a single choice from a group of options.
                    </p>


                    <form>
                        <div class="d-flex flex-wrap gap-3">


                            <div class="form-group error">
                                <input type="text" required="required" /><span class="highlight"></span><span class="bar"></span>
                                <label class="label-animated">Name</label>
                                <div class="input-helper-text">Some helping Text</div>
                                <div class="input-error-text">At least 6 characters required</div>
                                <span class="input-glyph-wraper">
                                    <span class="input-glyph">
                                        <span class="input-glyph button">
                                            <i class='bx bx-x-circle'></i>
                                        </span>
                                        <span class="input-glyph error">
                                            <i class='bx bx-error-circle'></i>
                                        </span>
                                    </span>
                                </span>
                            </div>


                            <div class="form-group">
                                <input type="text" required="required" /><span class="highlight"></span><span class="bar"></span>
                                <label class="label-animated">Email</label>
                                <div class="input-helper-text">Some helping Text</div>
                                <div class="input-error-text">At least 6 characters required</div>
                                <span class="input-glyph-wraper">
                                    <span class="input-glyph">
                                        <span class="input-glyph button">
                                            <i class='bx bx-x-circle'></i>
                                        </span>
                                        <span class="input-glyph error">
                                            <i class='bx bx-error-circle'></i>
                                        </span>
                                    </span>
                                </span>
                            </div>


                            <div class="form-group">
                                <input type="password" required="required" /><span class="highlight"></span><span class="bar"></span>
                                <label class="label-animated">Password</label>
                                <div class="input-helper-text">Some helping Text</div>
                                <div class="input-error-text">At least 6 characters required</div>
                                <span class="input-glyph-wraper">
                                    <span class="input-glyph">
                                        <span class="input-glyph button">
                                            <i class='bx bx-x-circle'></i>
                                        </span>
                                        <span class="input-glyph error">
                                            <i class='bx bx-error-circle'></i>
                                        </span>
                                    </span>
                                </span>
                            </div>

                            <div class="form-group">
                                <input type="number" required="required" /><span class="highlight"></span><span class="bar"></span>
                                <label class="label-animated">Number</label>
                                <div class="input-helper-text">Some helping Text</div>
                                <div class="input-error-text">At least 6 characters required</div>
                                <span class="input-glyph-wraper">
                                    <span class="input-glyph">
                                        <span class="input-glyph button">
                                            <i class='bx bx-x-circle'></i>
                                        </span>
                                        <span class="input-glyph error">
                                            <i class='bx bx-error-circle'></i>
                                        </span>
                                    </span>
                                </span>
                            </div>



                            <div class="form-group">
                                <select type="textarea" required="required">
                                    <option value="" disabled selected hidden></option>
                                    <option value="1">Twitter </option>
                                    <option value="2">Facebook</option>
                                </select>
                                <span class="highlight"></span><span class="bar"></span>
                                <label class="label-animated">Select</label>
                                <span class="input-glyph-wraper">
                                    <span class="input-glyph"><i class='bx bx-caret-down'></i></span>
                                </span>
                            </div>


                            <div class="form-group error">
                                <select type="textarea" required="required">
                                </select>
                                <span class="highlight"></span><span class="bar"></span>
                                <label class="label-animated">Select</label>
                                <span class="input-glyph-wraper">
                                    <span class="input-glyph button">
                                        <i class='bx bx-x-circle'></i>
                                    </span>
                                    <span class="input-glyph">
                                        <i class='bx bx-caret-down'></i>
                                    </span>
                                    <span class="input-glyph error">
                                        <i class='bx bx-error-circle'></i>
                                    </span>
                                </span>
                                <div class="drop-down">
                                    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                        <div class="dropdown-header">Header</div>

                                        <a class="dropdown-item" href="#">Action</a>
                                        <a class="dropdown-item" href="#">Another action</a>
                                        <div class="dropdown-divider"></div>
                                        <a class="dropdown-item" href="#">Something else here</a>
                                    </div>
                                </div>

                            </div>

                            <div class="form-group">
                                <textarea type="textarea" rows="5" required="required"></textarea><span class="highlight"></span><span class="bar"></span>
                                <label class="label-animated">Message</label>
                                <div class="input-helper-text">Some helping Text</div>
                                <div class="input-error-text">At least 6 characters required</div>
                                <span class="input-glyph-wraper">
                                    <span class="input-glyph">
                                        <span class="input-glyph button">
                                            <i class='bx bx-x-circle'></i>
                                        </span>
                                        <span class="input-glyph error">
                                            <i class='bx bx-error-circle'></i>
                                        </span>
                                    </span>
                                </span>
                            </div>


                        </div>
                        <div class="btn-box">
                            <button type="button" href="#" class="btn btn-core " aria-pressed="true">active
                                button</button>
                            <button type="button" href="#" class="btn btn-outline-core " aria-pressed="true">active
                                button</button>
                        </div>
                    </form>

                </section>


                <hr class="mt-4 mb-4">

                <h2 class="mb-2">Grid</h2>
                <div class="grid test grid-col-4 gap-3">
                    <div class="col-span-23">1</div>
                    <div>2</div>
                    <div>3</div>
                    <div>4</div>
                    <div>5</div>
                    <div>6</div>
                    <div>7</div>
                    <div>8</div>
                    <div>9</div>
                    <div>10</div>
                    <div>11</div>
                    <div>12</div>
                </div>

            </div>
        </section>
    </div>
</body>

@code {
    private string sidebarClosed { get; set; } = "close";

    private void ToggleSidebar()
    {
        sidebarClosed = string.IsNullOrWhiteSpace(sidebarClosed) ? "close" : "";
    }


    private string NavClosed { get; set; } = "showMenu";

    private void ToggleNav()
    {
        NavClosed = string.IsNullOrWhiteSpace(NavClosed) ? "showMenu" : "";
    }

}
