<?php include('partials/app-html.php'); ?>

<head>
    <?php $pageTitle = "Buttons"; include('partials/app-meta-title.php'); ?>

    <?php include('partials/app-head-css.php'); ?>
</head>

<body>

    <div class="app-wrap">

        <?php include('partials/app-header.php'); ?>

        <?php include('partials/app-sidebar.php'); ?>

        <main class="app-body">
            <div class="app-content">

                <div class="content-wrapper">

                    <?php $pageTitle = "Buttons"; $pageSubTitle1 = "Design"; $pageSubTitle2 = "UI Components"; $pageSubText = "Use custom button styles for actions in forms, dialogs, and more. Includes support for a handful of contextual variations, sizes, states, and more."; include('partials/app-pagetitle.php'); ?>

                    <div class="main-content">

                        <div class="row">
                            <div class="col-md-12 col-xl-6">
                                <!--Button colors-->
                                <div id="panel-1" class="panel panel-icon">
                                    <div class="panel-hdr">
                                        <h2>
                                            Button <span class="fw-300"><i>Colors</i></span>
                                        </h2>
                                        <div class="panel-toolbar">
                                            <button type="button" class="btn btn-panel" data-action="panel-collapse" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Toggle">
                                                <svg class="sa-icon">
                                                    <use class="panel-collapsed-icon" href="/public/img/sprite.svg#minus-circle"></use>
                                                    <use class="panel-expand-icon" href="/public/img/sprite.svg#plus-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-fullscreen" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Fullscreen">
                                                <svg class="sa-icon">
                                                    <use href="/public/icons/sprite.svg#stop-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-close" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Close">
                                                <svg class="sa-icon">
                                                    <use href="/public/icons/sprite.svg#x-circle"></use>
                                                </svg>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="panel-container show">
                                        <div class="panel-content">
                                            <div class="panel-tag">
                                                SmartAdmin includes nine predefined button styles, each serving its own semantic purpose.
                                            </div>
                                            <h5 class="frame-heading">
                                                Default
                                            </h5>
                                            <div class="frame-wrap">
                                                <div class="demo">
                                                    <button type="button" class="btn btn-primary">Primary</button>
                                                    <button type="button" class="btn btn-secondary">Secondary</button>
                                                    <button type="button" class="btn btn-success">Success</button>
                                                    <button type="button" class="btn btn-info">Info</button>
                                                    <button type="button" class="btn btn-warning">Warning</button>
                                                    <button type="button" class="btn btn-danger">Danger</button>
                                                    <button type="button" class="btn btn-dark">Dark</button>
                                                    <button type="button" class="btn btn-light">Light</button>
                                                </div>
                                            </div>
                                            <h5 class="frame-heading">
                                                Rounded
                                            </h5>
                                            <div class="frame-wrap">
                                                <div class="demo">
                                                    <button type="button" class="btn btn-primary btn-pills">Primary</button>
                                                    <button type="button" class="btn btn-secondary btn-pills">Secondary</button>
                                                    <button type="button" class="btn btn-success btn-pills">Success</button>
                                                    <button type="button" class="btn btn-info btn-pills">Info</button>
                                                    <button type="button" class="btn btn-warning btn-pills">Warning</button>
                                                    <button type="button" class="btn btn-danger btn-pills">Danger</button>
                                                    <button type="button" class="btn btn-dark btn-pills">Dark</button>
                                                    <button type="button" class="btn btn-light btn-pills">Light</button>
                                                </div>
                                            </div>
                                            <h5 class="frame-heading">
                                                Unique style
                                            </h5>
                                            <div class="frame-wrap">
                                                <div class="demo">
                                                    <button type="button" class="btn btn-default">Default</button>
                                                    <button type="button" class="btn btn-default btn-pills">Default</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!--Block-->
                                <div id="panel-2" class="panel panel-icon">
                                    <div class="panel-hdr">
                                        <h2>
                                            Block <span class="fw-300"><i>Buttons</i></span>
                                        </h2>
                                        <div class="panel-toolbar">
                                            <button type="button" class="btn btn-panel" data-action="panel-collapse" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Toggle">
                                                <svg class="sa-icon">
                                                    <use class="panel-collapsed-icon" href="/public/img/sprite.svg#minus-circle"></use>
                                                    <use class="panel-expand-icon" href="/public/img/sprite.svg#plus-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-fullscreen" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Fullscreen">
                                                <svg class="sa-icon">
                                                    <use href="/public/icons/sprite.svg#stop-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-close" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Close">
                                                <svg class="sa-icon">
                                                    <use href="/public/icons/sprite.svg#x-circle"></use>
                                                </svg>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="panel-container show">
                                        <div class="panel-content">
                                            <div class="panel-tag">
                                                Create block level buttons—those that span the full width of a parent—by adding <code>.btn-block</code>
                                            </div>
                                            <div class="frame-wrap text-center mb-0">
                                                <div class="row">
                                                    <div class="col-xl-6">
                                                        <div class="demo-v-spacing">
                                                            <button type="button" class="btn btn-primary btn-lg btn-block">Block
                                                                <span>large</span>
                                                            </button>
                                                            <button type="button" class="btn btn-primary btn-block">Block
                                                                <span>default</span>
                                                            </button>
                                                            <button type="button" class="btn btn-primary btn-sm btn-block">Block
                                                                <span>small</span>
                                                            </button>
                                                            <button type="button" class="btn btn-primary btn-xs btn-block">Block
                                                                <span>extra small</span>
                                                            </button>
                                                        </div>
                                                    </div>
                                                    <div class="col-xl-6">
                                                        <div class="demo-v-spacing mt-3 mt-xl-0">
                                                            <button type="button" class="btn btn-success btn-pills btn-lg btn-block">Block
                                                                <span>large</span>
                                                            </button>
                                                            <button type="button" class="btn btn-success btn-pills btn-block">Block
                                                                <span>default</span>
                                                            </button>
                                                            <button type="button" class="btn btn-success btn-pills btn-sm btn-block">Block
                                                                <span>small</span>
                                                            </button>
                                                            <button type="button" class="btn btn-success btn-pills btn-xs btn-block">Block
                                                                <span>extra small</span>
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!--Sizes-->
                                <div id="panel-3" class="panel panel-icon">
                                    <div class="panel-hdr">
                                        <h2>
                                            Option <span class="fw-300"><i>Sizes</i></span>
                                        </h2>
                                        <div class="panel-toolbar">
                                            <button type="button" class="btn btn-panel" data-action="panel-collapse" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Toggle">
                                                <svg class="sa-icon">
                                                    <use class="panel-collapsed-icon" href="/public/img/sprite.svg#minus-circle"></use>
                                                    <use class="panel-expand-icon" href="/public/img/sprite.svg#plus-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-fullscreen" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Fullscreen">
                                                <svg class="sa-icon">
                                                    <use href="/public/icons/sprite.svg#stop-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-close" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Close">
                                                <svg class="sa-icon">
                                                    <use href="/public/icons/sprite.svg#x-circle"></use>
                                                </svg>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="panel-container show">
                                        <div class="panel-content">
                                            <div class="panel-tag">
                                                Alter button sizes by using the classes <code>.btn-lg</code>, <code>.btn-sm</code>, <code>.btn-xs</code>
                                            </div>
                                            <h5 class="frame-heading">
                                                Largest size
                                            </h5>
                                            <div class="frame-wrap">
                                                <div class="demo">
                                                    <button type="button" class="btn btn-lg btn-primary">Primary</button>
                                                    <button type="button" class="btn btn-lg btn-secondary">Secondary</button>
                                                    <button type="button" class="btn btn-lg btn-default">Default</button>
                                                    <button type="button" class="btn btn-lg btn-success">Success</button>
                                                    <button type="button" class="btn btn-lg btn-warning">Warning</button>
                                                    <button type="button" class="btn btn-lg btn-info">Info</button>
                                                    <button type="button" class="btn btn-lg btn-danger">Danger</button>
                                                    <button type="button" class="btn btn-lg btn-dark">Dark</button>
                                                </div>
                                            </div>
                                            <h5 class="frame-heading">
                                                Default size
                                            </h5>
                                            <div class="frame-wrap">
                                                <div class="demo">
                                                    <button type="button" class="btn btn-primary">Primary</button>
                                                    <button type="button" class="btn btn-secondary">Secondary</button>
                                                    <button type="button" class="btn btn-default">Default</button>
                                                    <button type="button" class="btn btn-success">Success</button>
                                                    <button type="button" class="btn btn-warning">Warning</button>
                                                    <button type="button" class="btn btn-info">Info</button>
                                                    <button type="button" class="btn btn-danger">Danger</button>
                                                    <button type="button" class="btn btn-dark">Dark</button>
                                                </div>
                                            </div>
                                            <h5 class="frame-heading">
                                                Small size
                                            </h5>
                                            <div class="frame-wrap">
                                                <div class="demo">
                                                    <button type="button" class="btn btn-sm btn-primary">Primary</button>
                                                    <button type="button" class="btn btn-sm btn-secondary">Secondary</button>
                                                    <button type="button" class="btn btn-sm btn-default">Default</button>
                                                    <button type="button" class="btn btn-sm btn-success">Success</button>
                                                    <button type="button" class="btn btn-sm btn-warning">Warning</button>
                                                    <button type="button" class="btn btn-sm btn-info">Info</button>
                                                    <button type="button" class="btn btn-sm btn-danger">Danger</button>
                                                    <button type="button" class="btn btn-sm btn-dark">Dark</button>
                                                </div>
                                            </div>
                                            <h5 class="frame-heading">
                                                Smallest size
                                            </h5>
                                            <div class="frame-wrap">
                                                <div class="demo">
                                                    <button type="button" class="btn btn-xs btn-primary">Primary</button>
                                                    <button type="button" class="btn btn-xs btn-secondary">Secondary</button>
                                                    <button type="button" class="btn btn-xs btn-default">Default</button>
                                                    <button type="button" class="btn btn-xs btn-success">Success</button>
                                                    <button type="button" class="btn btn-xs btn-warning">Warning</button>
                                                    <button type="button" class="btn btn-xs btn-info">Info</button>
                                                    <button type="button" class="btn btn-xs btn-danger">Danger</button>
                                                    <button type="button" class="btn btn-xs btn-dark">Dark</button>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                                <!--With icons-->
                                <div id="panel-4" class="panel panel-icon">
                                    <div class="panel-hdr">
                                        <h2>
                                            Button <span class="fw-300"><i>with Icons</i></span>
                                        </h2>
                                        <div class="panel-toolbar">
                                            <button type="button" class="btn btn-panel" data-action="panel-collapse" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Toggle">
                                                <svg class="sa-icon">
                                                    <use class="panel-collapsed-icon" href="/public/img/sprite.svg#minus-circle"></use>
                                                    <use class="panel-expand-icon" href="/public/img/sprite.svg#plus-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-fullscreen" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Fullscreen">
                                                <svg class="sa-icon">
                                                    <use href="/public/icons/sprite.svg#stop-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-close" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Close">
                                                <svg class="sa-icon">
                                                    <use href="/public/icons/sprite.svg#x-circle"></use>
                                                </svg>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="panel-container show">
                                        <div class="panel-content">
                                            <div class="panel-tag">
                                                We use the icon tags to insert icons into buttons
                                            </div>
                                            <div class="demo">
                                                <button type="button" class="btn btn-lg btn-primary">
                                                    <span class="fal fa-print me-1"></span>
                                                    Print
                                                </button>
                                                <button type="button" class="btn btn-lg btn-secondary">
                                                    <span class="fal fa-volume-mute me-1"></span>
                                                    Mute
                                                </button>
                                                <button type="button" class="btn btn-lg btn-default">
                                                    <span class="fal fa-check me-1"></span>
                                                    Submit
                                                </button>
                                                <button type="button" class="btn btn-lg btn-success">
                                                    <span class="fal fa-download me-1"></span>
                                                    Download
                                                </button>
                                                <button type="button" class="btn btn-lg btn-warning">
                                                    <span class="fal fa-exclamation-triangle me-1"></span>
                                                    Scan Device
                                                </button>
                                                <button type="button" class="btn btn-lg btn-info">
                                                    <span class="fal fa-bug me-1"></span>
                                                    Report Bug
                                                </button>
                                                <button type="button" class="btn btn-lg btn-danger">
                                                    <span class="fal fa-times me-1"></span>
                                                    Delete
                                                </button>
                                                <button type="button" class="btn btn-lg btn-dark">
                                                    <span class="fal fa-eject me-1"></span>
                                                    Eject
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!--Icon buttons-->
                                <div id="panel-5" class="panel panel-icon">
                                    <div class="panel-hdr">
                                        <h2>
                                            Icons <span class="fw-300"><i>example</i></span>
                                        </h2>
                                        <div class="panel-toolbar">
                                            <button type="button" class="btn btn-panel" data-action="panel-collapse" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Toggle">
                                                <svg class="sa-icon">
                                                    <use class="panel-collapsed-icon" href="/public/img/sprite.svg#minus-circle"></use>
                                                    <use class="panel-expand-icon" href="/public/img/sprite.svg#plus-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-fullscreen" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Fullscreen">
                                                <svg class="sa-icon">
                                                    <use href="/public/icons/sprite.svg#stop-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-close" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Close">
                                                <svg class="sa-icon">
                                                    <use href="/public/icons/sprite.svg#x-circle"></use>
                                                </svg>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="panel-container show">
                                        <div class="panel-content">
                                            <div class="panel-tag">
                                                Convert button to an icon button by adding the class <code>.btn-icon</code>
                                            </div>
                                            <h5 class="frame-heading">
                                                Various sizes
                                            </h5>
                                            <div class="frame-wrap">
                                                <div class="demo">
                                                    <a href="javascript:void(0);" class="btn btn-primary btn-lg btn-icon">
                                                        <i class="fal fa-print"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-secondary btn-lg btn-icon">
                                                        <i class="fal fa-volume-mute fs-md"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-default btn-lg btn-icon">
                                                        <i class="fal fa-check"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-success btn-lg btn-icon">
                                                        <i class="fal fa-download"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-warning btn-lg btn-icon">
                                                        <i class="fal fa-exclamation-triangle"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-info btn-lg btn-icon">
                                                        <i class="fal fa-bug"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-danger btn-lg btn-icon">
                                                        <i class="fal fa-times"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-dark btn-lg btn-icon">
                                                        <i class="fal fa-eject"></i>
                                                    </a>
                                                </div>
                                                <div class="demo">
                                                    <a href="javascript:void(0);" class="btn btn-primary btn-icon">
                                                        <i class="fal fa-print"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-secondary btn-icon">
                                                        <i class="fal fa-volume-mute fs-md"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-default btn-icon">
                                                        <i class="fal fa-check"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-success btn-icon">
                                                        <i class="fal fa-download"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-warning btn-icon">
                                                        <i class="fal fa-exclamation-triangle"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-info btn-icon">
                                                        <i class="fal fa-bug"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-danger btn-icon">
                                                        <i class="fal fa-times"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-dark btn-icon">
                                                        <i class="fal fa-eject"></i>
                                                    </a>
                                                </div>
                                                <div class="demo">
                                                    <a href="javascript:void(0);" class="btn btn-primary btn-sm btn-icon">
                                                        <i class="fal fa-print"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-secondary btn-sm btn-icon">
                                                        <i class="fal fa-volume-mute"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-default btn-sm btn-icon">
                                                        <i class="fal fa-check"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-success btn-sm btn-icon">
                                                        <i class="fal fa-download"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-warning btn-sm btn-icon">
                                                        <i class="fal fa-exclamation-triangle"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-info btn-sm btn-icon">
                                                        <i class="fal fa-bug"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-danger btn-sm btn-icon">
                                                        <i class="fal fa-times"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-dark btn-sm btn-icon">
                                                        <i class="fal fa-eject"></i>
                                                    </a>
                                                </div>
                                                <div class="demo">
                                                    <a href="javascript:void(0);" class="btn btn-primary btn-xs btn-icon">
                                                        <i class="fal fa-print"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-secondary btn-xs btn-icon">
                                                        <i class="fal fa-volume-mute"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-default btn-xs btn-icon">
                                                        <i class="fal fa-check"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-success btn-xs btn-icon">
                                                        <i class="fal fa-download"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-warning btn-xs btn-icon">
                                                        <i class="fal fa-exclamation-triangle"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-info btn-xs btn-icon">
                                                        <i class="fal fa-bug"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-danger btn-xs btn-icon">
                                                        <i class="fal fa-times"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-dark btn-xs btn-icon">
                                                        <i class="fal fa-eject"></i>
                                                    </a>
                                                </div>
                                            </div>
                                            <h5 class="frame-heading">
                                                Rounded
                                            </h5>
                                            <div class="frame-wrap">
                                                <div class="demo">
                                                    <a href="javascript:void(0);" class="btn btn-primary btn-lg btn-icon rounded-circle">
                                                        <i class="fal fa-print"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-secondary btn-lg btn-icon rounded-circle">
                                                        <i class="fal fa-volume-mute fs-md"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-default btn-lg btn-icon rounded-circle">
                                                        <i class="fal fa-check"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-success btn-lg btn-icon rounded-circle">
                                                        <i class="fal fa-download"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-warning btn-lg btn-icon rounded-circle">
                                                        <i class="fal fa-exclamation-triangle"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-info btn-lg btn-icon rounded-circle">
                                                        <i class="fal fa-bug"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-danger btn-lg btn-icon rounded-circle">
                                                        <i class="fal fa-times"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-dark btn-lg btn-icon rounded-circle">
                                                        <i class="fal fa-eject"></i>
                                                    </a>
                                                </div>
                                                <div class="demo">
                                                    <a href="javascript:void(0);" class="btn btn-primary btn-icon rounded-circle">
                                                        <i class="fal fa-print"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-secondary btn-icon rounded-circle">
                                                        <i class="fal fa-volume-mute fs-md"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-default btn-icon rounded-circle">
                                                        <i class="fal fa-check"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-success btn-icon rounded-circle">
                                                        <i class="fal fa-download"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-warning btn-icon rounded-circle">
                                                        <i class="fal fa-exclamation-triangle"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-info btn-icon rounded-circle">
                                                        <i class="fal fa-bug"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-danger btn-icon rounded-circle">
                                                        <i class="fal fa-times"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-dark btn-icon rounded-circle">
                                                        <i class="fal fa-eject"></i>
                                                    </a>
                                                </div>
                                                <div class="demo">
                                                    <a href="javascript:void(0);" class="btn btn-primary btn-sm btn-icon rounded-circle">
                                                        <i class="fal fa-print"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-secondary btn-sm btn-icon rounded-circle">
                                                        <i class="fal fa-volume-mute"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-default btn-sm btn-icon rounded-circle">
                                                        <i class="fal fa-check"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-success btn-sm btn-icon rounded-circle">
                                                        <i class="fal fa-download"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-warning btn-sm btn-icon rounded-circle">
                                                        <i class="fal fa-exclamation-triangle"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-info btn-sm btn-icon rounded-circle">
                                                        <i class="fal fa-bug"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-danger btn-sm btn-icon rounded-circle">
                                                        <i class="fal fa-times"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-dark btn-sm btn-icon rounded-circle">
                                                        <i class="fal fa-eject"></i>
                                                    </a>
                                                </div>
                                                <div class="demo">
                                                    <a href="javascript:void(0);" class="btn btn-primary btn-xs btn-icon rounded-circle">
                                                        <i class="fal fa-print"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-secondary btn-xs btn-icon rounded-circle">
                                                        <i class="fal fa-volume-mute"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-default btn-xs btn-icon rounded-circle">
                                                        <i class="fal fa-check"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-success btn-xs btn-icon rounded-circle">
                                                        <i class="fal fa-download"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-warning btn-xs btn-icon rounded-circle">
                                                        <i class="fal fa-exclamation-triangle"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-info btn-xs btn-icon rounded-circle">
                                                        <i class="fal fa-bug"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-danger btn-xs btn-icon rounded-circle">
                                                        <i class="fal fa-times"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-dark btn-xs btn-icon rounded-circle">
                                                        <i class="fal fa-eject"></i>
                                                    </a>
                                                </div>
                                            </div>
                                            <h5 class="frame-heading">
                                                Hover dot effect
                                            </h5>
                                            <div class="frame-wrap">
                                                <p class="demo">
                                                    <a href="javascript:void(0);" class="btn btn-primary btn-lg btn-icon rounded-circle hover-effect-dot">
                                                        <i class="fal fa-print"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-secondary btn-lg btn-icon rounded-circle hover-effect-dot">
                                                        <i class="fal fa-volume-mute fs-md"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-success btn-lg btn-icon hover-effect-dot">
                                                        <i class="fal fa-download"></i>
                                                    </a>
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-12 col-xl-6">
                                <!--Button colors (outline)-->
                                <div id="panel-6" class="panel panel-icon">
                                    <div class="panel-hdr">
                                        <h2>
                                            Button <span class="fw-300"><i>Outlines</i></span>
                                        </h2>
                                        <div class="panel-toolbar">
                                            <button type="button" class="btn btn-panel" data-action="panel-collapse" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Toggle">
                                                <svg class="sa-icon">
                                                    <use class="panel-collapsed-icon" href="/public/img/sprite.svg#minus-circle"></use>
                                                    <use class="panel-expand-icon" href="/public/img/sprite.svg#plus-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-fullscreen" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Fullscreen">
                                                <svg class="sa-icon">
                                                    <use href="/public/icons/sprite.svg#stop-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-close" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Close">
                                                <svg class="sa-icon">
                                                    <use href="/public/icons/sprite.svg#x-circle"></use>
                                                </svg>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="panel-container show">
                                        <div class="panel-content">
                                            <div class="panel-tag">
                                                Replace the default modifier classes with<code>.btn-outline-*</code>
                                            </div>
                                            <h5 class="frame-heading">
                                                Outline
                                            </h5>
                                            <div class="frame-wrap">
                                                <div class="demo">
                                                    <button type="button" class="btn btn-outline-primary">Primary</button>
                                                    <button type="button" class="btn btn-outline-secondary">Secondary</button>
                                                    <button type="button" class="btn btn-outline-success">Success</button>
                                                    <button type="button" class="btn btn-outline-info">Info</button>
                                                    <button type="button" class="btn btn-outline-warning">Warning</button>
                                                    <button type="button" class="btn btn-outline-danger">Danger</button>
                                                    <button type="button" class="btn btn-outline-dark">Dark</button>
                                                    <button type="button" class="btn btn-outline-light">Light</button>
                                                </div>
                                            </div>
                                            <h5 class="frame-heading">
                                                Rounded outline
                                            </h5>
                                            <div class="frame-wrap">
                                                <div class="demo">
                                                    <button type="button" class="btn btn-outline-primary btn-pills">Primary</button>
                                                    <button type="button" class="btn btn-outline-secondary btn-pills">Secondary</button>
                                                    <button type="button" class="btn btn-outline-success btn-pills">Success</button>
                                                    <button type="button" class="btn btn-outline-info btn-pills">Info</button>
                                                    <button type="button" class="btn btn-outline-warning btn-pills">Warning</button>
                                                    <button type="button" class="btn btn-outline-danger btn-pills">Danger</button>
                                                    <button type="button" class="btn btn-outline-dark btn-pills">Dark</button>
                                                    <button type="button" class="btn btn-outline-light btn-pills">Light</button>
                                                </div>
                                            </div>
                                            <h5 class="frame-heading">
                                                Unique style
                                            </h5>
                                            <div class="frame-wrap mb-0">
                                                <div class="demo">
                                                    <button type="button" class="btn btn-outline-default">Default</button>
                                                    <button type="button" class="btn btn-outline-default btn-pills">Default</button>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                                <!--Block (outline)-->
                                <div id="panel-7" class="panel panel-icon">
                                    <div class="panel-hdr">
                                        <h2>
                                            Block <span class="fw-300"><i>Outlines</i></span>
                                        </h2>
                                        <div class="panel-toolbar">
                                            <button type="button" class="btn btn-panel" data-action="panel-collapse" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Toggle">
                                                <svg class="sa-icon">
                                                    <use class="panel-collapsed-icon" href="/public/img/sprite.svg#minus-circle"></use>
                                                    <use class="panel-expand-icon" href="/public/img/sprite.svg#plus-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-fullscreen" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Fullscreen">
                                                <svg class="sa-icon">
                                                    <use href="/public/icons/sprite.svg#stop-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-close" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Close">
                                                <svg class="sa-icon">
                                                    <use href="/public/icons/sprite.svg#x-circle"></use>
                                                </svg>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="panel-container show">
                                        <div class="panel-content">
                                            <div class="panel-tag">
                                                Block buttons inherits outline button properties <code>.btn-outline-*</code>
                                            </div>
                                            <div class="frame-wrap text-center mb-0">
                                                <div class="row">
                                                    <div class="col-xl-6">
                                                        <div class="demo-v-spacing">
                                                            <button type="button" class="btn btn-outline-primary btn-lg btn-block">Block
                                                                <span>large</span>
                                                            </button>
                                                            <button type="button" class="btn btn-outline-primary btn-block">Block
                                                                <span>default</span>
                                                            </button>
                                                            <button type="button" class="btn btn-outline-primary btn-sm btn-block">Block
                                                                <span>small</span>
                                                            </button>
                                                            <button type="button" class="btn btn-outline-primary btn-xs btn-block">Block
                                                                <span>extra small</span>
                                                            </button>
                                                        </div>
                                                    </div>
                                                    <div class="col-xl-6">
                                                        <div class="demo-v-spacing mt-3 mt-xl-0">
                                                            <button type="button" class="btn btn-outline-success btn-pills btn-lg btn-block">Block
                                                                <span>large</span>
                                                            </button>
                                                            <button type="button" class="btn btn-outline-success btn-pills btn-block">Block
                                                                <span>default</span>
                                                            </button>
                                                            <button type="button" class="btn btn-outline-success btn-pills btn-sm btn-block">Block
                                                                <span>small</span>
                                                            </button>
                                                            <button type="button" class="btn btn-outline-success btn-pills btn-xs btn-block">Block
                                                                <span>extra small</span>
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!--Sizes (outline)-->
                                <div id="panel-8" class="panel panel-icon">
                                    <div class="panel-hdr">
                                        <h2>
                                            Option <span class="fw-300"><i>Sizes</i></span>
                                        </h2>
                                        <div class="panel-toolbar">
                                            <button type="button" class="btn btn-panel" data-action="panel-collapse" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Toggle">
                                                <svg class="sa-icon">
                                                    <use class="panel-collapsed-icon" href="/public/img/sprite.svg#minus-circle"></use>
                                                    <use class="panel-expand-icon" href="/public/img/sprite.svg#plus-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-fullscreen" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Fullscreen">
                                                <svg class="sa-icon">
                                                    <use href="/public/icons/sprite.svg#stop-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-close" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Close">
                                                <svg class="sa-icon">
                                                    <use href="/public/icons/sprite.svg#x-circle"></use>
                                                </svg>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="panel-container show">
                                        <div class="panel-content">
                                            <div class="panel-tag">
                                                Alter button sizes by using the classes <code>.btn-lg</code>, <code>.btn-sm</code>, <code>.btn-xs</code>
                                            </div>
                                            <h5 class="frame-heading">
                                                Largest size
                                            </h5>
                                            <div class="frame-wrap">
                                                <p class="demo">
                                                    <button type="button" class="btn btn-lg btn-outline-primary">Primary</button>
                                                    <button type="button" class="btn btn-lg btn-outline-secondary">Secondary</button>
                                                    <button type="button" class="btn btn-lg btn-outline-default">Default</button>
                                                    <button type="button" class="btn btn-lg btn-outline-success">Success</button>
                                                    <button type="button" class="btn btn-lg btn-outline-warning">Warning</button>
                                                    <button type="button" class="btn btn-lg btn-outline-info">Info</button>
                                                    <button type="button" class="btn btn-lg btn-outline-danger">Danger</button>
                                                    <button type="button" class="btn btn-lg btn-outline-dark">Dark</button>
                                                </p>
                                            </div>
                                            <h5 class="frame-heading">
                                                Default size
                                            </h5>
                                            <div class="frame-wrap">
                                                <p class="demo">
                                                    <button type="button" class="btn btn-outline-primary">Primary</button>
                                                    <button type="button" class="btn btn-outline-secondary">Secondary</button>
                                                    <button type="button" class="btn btn-outline-default">Default</button>
                                                    <button type="button" class="btn btn-outline-success">Success</button>
                                                    <button type="button" class="btn btn-outline-warning">Warning</button>
                                                    <button type="button" class="btn btn-outline-info">Info</button>
                                                    <button type="button" class="btn btn-outline-danger">Danger</button>
                                                    <button type="button" class="btn btn-outline-dark">Dark</button>
                                                </p>
                                            </div>
                                            <h5 class="frame-heading">
                                                Small size
                                            </h5>
                                            <div class="frame-wrap">
                                                <p class="demo">
                                                    <button type="button" class="btn btn-sm btn-outline-primary">Primary</button>
                                                    <button type="button" class="btn btn-sm btn-outline-secondary">Secondary</button>
                                                    <button type="button" class="btn btn-sm btn-outline-default">Default</button>
                                                    <button type="button" class="btn btn-sm btn-outline-success">Success</button>
                                                    <button type="button" class="btn btn-sm btn-outline-warning">Warning</button>
                                                    <button type="button" class="btn btn-sm btn-outline-info">Info</button>
                                                    <button type="button" class="btn btn-sm btn-outline-danger">Danger</button>
                                                    <button type="button" class="btn btn-sm btn-outline-dark">Dark</button>
                                                </p>
                                            </div>
                                            <h5 class="frame-heading">
                                                Smallest size
                                            </h5>
                                            <div class="frame-wrap">
                                                <p class="demo">
                                                    <button type="button" class="btn btn-xs btn-outline-primary">Primary</button>
                                                    <button type="button" class="btn btn-xs btn-outline-secondary">Secondary</button>
                                                    <button type="button" class="btn btn-xs btn-outline-default">Default</button>
                                                    <button type="button" class="btn btn-xs btn-outline-success">Success</button>
                                                    <button type="button" class="btn btn-xs btn-outline-warning">Warning</button>
                                                    <button type="button" class="btn btn-xs btn-outline-info">Info</button>
                                                    <button type="button" class="btn btn-xs btn-outline-danger">Danger</button>
                                                    <button type="button" class="btn btn-xs btn-outline-dark">Dark</button>
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!--With icons (outline)-->
                                <div id="panel-9" class="panel panel-icon">
                                    <div class="panel-hdr">
                                        <h2>
                                            Button <span class="fw-300"><i>with Icons</i></span>
                                        </h2>
                                        <div class="panel-toolbar">
                                            <button type="button" class="btn btn-panel" data-action="panel-collapse" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Toggle">
                                                <svg class="sa-icon">
                                                    <use class="panel-collapsed-icon" href="/public/img/sprite.svg#minus-circle"></use>
                                                    <use class="panel-expand-icon" href="/public/img/sprite.svg#plus-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-fullscreen" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Fullscreen">
                                                <svg class="sa-icon">
                                                    <use href="/public/icons/sprite.svg#stop-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-close" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Close">
                                                <svg class="sa-icon">
                                                    <use href="/public/icons/sprite.svg#x-circle"></use>
                                                </svg>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="panel-container show">
                                        <div class="panel-content">
                                            <div class="panel-tag">
                                                We use the icon tags to insert icons into buttons
                                            </div>
                                            <div class="demo">
                                                <button type="button" class="btn btn-lg btn-outline-primary">
                                                    <span class="fal fa-print me-1"></span>
                                                    Print
                                                </button>
                                                <button type="button" class="btn btn-lg btn-outline-secondary">
                                                    <span class="fal fa-volume-mute me-1"></span>
                                                    Mute
                                                </button>
                                                <button type="button" class="btn btn-lg btn-outline-default">
                                                    <span class="fal fa-check me-1"></span>
                                                    Submit
                                                </button>
                                                <button type="button" class="btn btn-lg btn-outline-success">
                                                    <span class="fal fa-download me-1"></span>
                                                    Download
                                                </button>
                                                <button type="button" class="btn btn-lg btn-outline-warning">
                                                    <span class="fal fa-exclamation-triangle me-1"></span>
                                                    Scan Device
                                                </button>
                                                <button type="button" class="btn btn-lg btn-outline-info">
                                                    <span class="fal fa-bug me-1"></span>
                                                    Report Bug
                                                </button>
                                                <button type="button" class="btn btn-lg btn-outline-danger">
                                                    <span class="fal fa-times me-1"></span>
                                                    Delete
                                                </button>
                                                <button type="button" class="btn btn-lg btn-outline-dark">
                                                    <span class="fal fa-eject me-1"></span>
                                                    Eject
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!--Icon buttons (outline)-->
                                <div id="panel-10" class="panel panel-icon">
                                    <div class="panel-hdr">
                                        <h2>
                                            Icon <span class="fw-300"><i>Outlined</i></span>
                                        </h2>
                                        <div class="panel-toolbar">
                                            <button type="button" class="btn btn-panel" data-action="panel-collapse" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Toggle">
                                                <svg class="sa-icon">
                                                    <use class="panel-collapsed-icon" href="/public/img/sprite.svg#minus-circle"></use>
                                                    <use class="panel-expand-icon" href="/public/img/sprite.svg#plus-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-fullscreen" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Fullscreen">
                                                <svg class="sa-icon">
                                                    <use href="/public/icons/sprite.svg#stop-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-close" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Close">
                                                <svg class="sa-icon">
                                                    <use href="/public/icons/sprite.svg#x-circle"></use>
                                                </svg>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="panel-container show">
                                        <div class="panel-content">
                                            <div class="panel-tag">
                                                Convert button to an icon button by adding the class <code>.btn-icon</code>
                                            </div>
                                            <h5 class="frame-heading">
                                                Various sizes
                                            </h5>
                                            <div class="frame-wrap">
                                                <p class="demo">
                                                    <a href="javascript:void(0);" class="btn btn-outline-primary btn-lg btn-icon">
                                                        <i class="fal fa-print"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-outline-secondary btn-lg btn-icon">
                                                        <i class="fal fa-volume-mute fs-md"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-outline-default btn-lg btn-icon">
                                                        <i class="fal fa-check"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-outline-success btn-lg btn-icon">
                                                        <i class="fal fa-download"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-outline-warning btn-lg btn-icon">
                                                        <i class="fal fa-exclamation-triangle"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-outline-info btn-lg btn-icon">
                                                        <i class="fal fa-bug"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-outline-danger btn-lg btn-icon">
                                                        <i class="fal fa-times"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-outline-dark btn-lg btn-icon">
                                                        <i class="fal fa-eject"></i>
                                                    </a>
                                                </p>
                                                <p class="demo">
                                                    <a href="javascript:void(0);" class="btn btn-outline-primary btn-icon">
                                                        <i class="fal fa-print"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-outline-secondary btn-icon">
                                                        <i class="fal fa-volume-mute fs-md"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-outline-default btn-icon">
                                                        <i class="fal fa-check"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-outline-success btn-icon">
                                                        <i class="fal fa-download"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-outline-warning btn-icon">
                                                        <i class="fal fa-exclamation-triangle"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-outline-info btn-icon">
                                                        <i class="fal fa-bug"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-outline-danger btn-icon">
                                                        <i class="fal fa-times"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-outline-dark btn-icon">
                                                        <i class="fal fa-eject"></i>
                                                    </a>
                                                </p>
                                                <p class="demo">
                                                    <a href="javascript:void(0);" class="btn btn-outline-primary btn-sm btn-icon">
                                                        <i class="fal fa-print"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-outline-secondary btn-sm btn-icon">
                                                        <i class="fal fa-volume-mute"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-outline-default btn-sm btn-icon">
                                                        <i class="fal fa-check"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-outline-success btn-sm btn-icon">
                                                        <i class="fal fa-download"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-outline-warning btn-sm btn-icon">
                                                        <i class="fal fa-exclamation-triangle"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-outline-info btn-sm btn-icon">
                                                        <i class="fal fa-bug"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-outline-danger btn-sm btn-icon">
                                                        <i class="fal fa-times"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-outline-dark btn-sm btn-icon">
                                                        <i class="fal fa-eject"></i>
                                                    </a>
                                                </p>
                                                <p class="demo">
                                                    <a href="javascript:void(0);" class="btn btn-outline-primary btn-xs btn-icon">
                                                        <i class="fal fa-print"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-outline-secondary btn-xs btn-icon">
                                                        <i class="fal fa-volume-mute"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-outline-default btn-xs btn-icon">
                                                        <i class="fal fa-check"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-outline-success btn-xs btn-icon">
                                                        <i class="fal fa-download"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-outline-warning btn-xs btn-icon">
                                                        <i class="fal fa-exclamation-triangle"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-outline-info btn-xs btn-icon">
                                                        <i class="fal fa-bug"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-outline-danger btn-xs btn-icon">
                                                        <i class="fal fa-times"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-outline-dark btn-xs btn-icon">
                                                        <i class="fal fa-eject"></i>
                                                    </a>
                                                </p>
                                            </div>
                                            <h5 class="frame-heading">
                                                Rounded outline
                                            </h5>
                                            <div class="frame-wrap">
                                                <p class="demo">
                                                    <a href="javascript:void(0);" class="btn btn-outline-primary btn-lg btn-icon rounded-circle">
                                                        <i class="fal fa-print"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-outline-secondary btn-lg btn-icon rounded-circle">
                                                        <i class="fal fa-volume-mute fs-md"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-outline-default btn-lg btn-icon rounded-circle">
                                                        <i class="fal fa-check"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-outline-success btn-lg btn-icon rounded-circle">
                                                        <i class="fal fa-download"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-outline-warning btn-lg btn-icon rounded-circle">
                                                        <i class="fal fa-exclamation-triangle"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-outline-info btn-lg btn-icon rounded-circle">
                                                        <i class="fal fa-bug"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-outline-danger btn-lg btn-icon rounded-circle">
                                                        <i class="fal fa-times"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-outline-dark btn-lg btn-icon rounded-circle">
                                                        <i class="fal fa-eject"></i>
                                                    </a>
                                                </p>
                                                <p class="demo">
                                                    <a href="javascript:void(0);" class="btn btn-outline-primary btn-icon rounded-circle">
                                                        <i class="fal fa-print"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-outline-secondary btn-icon rounded-circle">
                                                        <i class="fal fa-volume-mute fs-md"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-outline-default btn-icon rounded-circle">
                                                        <i class="fal fa-check"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-outline-success btn-icon rounded-circle">
                                                        <i class="fal fa-download"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-outline-warning btn-icon rounded-circle">
                                                        <i class="fal fa-exclamation-triangle"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-outline-info btn-icon rounded-circle">
                                                        <i class="fal fa-bug"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-outline-danger btn-icon rounded-circle">
                                                        <i class="fal fa-times"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-outline-dark btn-icon rounded-circle">
                                                        <i class="fal fa-eject"></i>
                                                    </a>
                                                </p>
                                                <p class="demo">
                                                    <a href="javascript:void(0);" class="btn btn-outline-primary btn-sm btn-icon rounded-circle">
                                                        <i class="fal fa-print"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-outline-secondary btn-sm btn-icon rounded-circle">
                                                        <i class="fal fa-volume-mute"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-outline-default btn-sm btn-icon rounded-circle">
                                                        <i class="fal fa-check"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-outline-success btn-sm btn-icon rounded-circle">
                                                        <i class="fal fa-download"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-outline-warning btn-sm btn-icon rounded-circle">
                                                        <i class="fal fa-exclamation-triangle"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-outline-info btn-sm btn-icon rounded-circle">
                                                        <i class="fal fa-bug"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-outline-danger btn-sm btn-icon rounded-circle">
                                                        <i class="fal fa-times"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-outline-dark btn-sm btn-icon rounded-circle">
                                                        <i class="fal fa-eject"></i>
                                                    </a>
                                                </p>
                                                <p class="demo">
                                                    <a href="javascript:void(0);" class="btn btn-outline-primary btn-xs btn-icon rounded-circle">
                                                        <i class="fal fa-print"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-outline-secondary btn-xs btn-icon rounded-circle">
                                                        <i class="fal fa-volume-mute"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-outline-default btn-xs btn-icon rounded-circle">
                                                        <i class="fal fa-check"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-outline-success btn-xs btn-icon rounded-circle">
                                                        <i class="fal fa-download"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-outline-warning btn-xs btn-icon rounded-circle">
                                                        <i class="fal fa-exclamation-triangle"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-outline-info btn-xs btn-icon rounded-circle">
                                                        <i class="fal fa-bug"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-outline-danger btn-xs btn-icon rounded-circle">
                                                        <i class="fal fa-times"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-outline-dark btn-xs btn-icon rounded-circle">
                                                        <i class="fal fa-eject"></i>
                                                    </a>
                                                </p>
                                            </div>
                                            <h5 class="frame-heading">
                                                Hover dot effect
                                            </h5>
                                            <div class="frame-wrap">
                                                <p class="demo">
                                                    <a href="javascript:void(0);" class="btn btn-outline-primary btn-lg btn-icon rounded-circle hover-effect-dot">
                                                        <i class="fal fa-print"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-outline-secondary btn-lg btn-icon rounded-circle hover-effect-dot">
                                                        <i class="fal fa-volume-mute fs-md"></i>
                                                    </a>
                                                    <a href="javascript:void(0);" class="btn btn-outline-success btn-lg btn-icon hover-effect-dot">
                                                        <i class="fal fa-download"></i>
                                                    </a>
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>

                </div>

            </div>

            <?php include('partials/app-footer.php'); ?>

        </main>

        <?php include('partials/app-drawer.php'); ?>

        <?php include('partials/app-settings.php'); ?>

    </div>

    <?php include('partials/app-scripts.php'); ?>

</body>

</html>