{{#> base }}
    {{> AppSidebar/sidebar elements-buttons-icons=this }}
    <div class="app-main__outer">
        <div class="app-main__inner">
            {{> AppMain/page-title }}
            <ul class="body-tabs body-tabs-layout tabs-animated body-tabs-animated nav">
                <li class="nav-item">
                    <a role="tab" class="nav-link active" id="tab-0" data-toggle="tab" href="#tab-content-0">
                        <span>Horizontal Icons</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a role="tab" class="nav-link" id="tab-1" data-toggle="tab" href="#tab-content-1">
                        <span>Vertical Icons</span>
                    </a>
                </li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane tabs-animation fade show active" id="tab-content-0" role="tabpanel">
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="main-card mb-3 card">
                                <div class="card-body">
                                    <h5 class="card-title">Solid P7 Icons</h5>
                                    <button class="mb-2 mr-2 btn-icon btn btn-primary"><i class="pe-7s-tools btn-icon-wrapper"> </i>Primary</button>
                                    <button class="mb-2 mr-2 btn-icon btn btn-secondary"><i class="pe-7s-gym btn-icon-wrapper"> </i>Secondary</button>
                                    <button class="mb-2 mr-2 btn-icon btn btn-success"><i class="pe-7s-umbrella btn-icon-wrapper"> </i>Success</button>
                                    <button class="mb-2 mr-2 btn-icon btn btn-info"><i class="pe-7s-science btn-icon-wrapper"> </i>Info</button>
                                    <button class="mb-2 mr-2 btn-icon btn btn-warning"><i class="pe-7s-trash btn-icon-wrapper"> </i>Warning</button>
                                    <button class="mb-2 mr-2 btn-icon btn btn-danger"><i class="pe-7s-video btn-icon-wrapper"> </i>Danger</button>
                                    <button class="mb-2 mr-2 btn-icon btn btn-focus"><i class="pe-7s-upload btn-icon-wrapper"> </i>Focus</button>
                                    <button class="mb-2 mr-2 btn-icon btn btn-alternate"><i class="pe-7s-piggy btn-icon-wrapper"> </i>Alt</button>
                                    <button class="mb-2 mr-2 btn-icon btn btn-light"><i class="pe-7s-photo btn-icon-wrapper"> </i>Light</button>
                                    <button class="mb-2 mr-2 btn-icon btn btn-dark"><i class="pe-7s-helm btn-icon-wrapper"> </i>Dark</button>
                                    <button class="mb-2 mr-2 btn-icon btn btn-link"><i class="pe-7s-settings btn-icon-wrapper"> </i>link</button>
                                </div>
                            </div>
                            <div class="main-card mb-3 card">
                                <div class="card-body">
                                    <h5 class="card-title">Outline Pill P7 Icons</h5>
                                    <button class="mb-2 mr-2 btn-icon btn-pill btn btn-outline-primary"><i class="pe-7s-tools btn-icon-wrapper"> </i>Primary</button>
                                    <button class="mb-2 mr-2 btn-icon btn-pill btn btn-outline-secondary"><i class="pe-7s-gym btn-icon-wrapper"> </i>Secondary</button>
                                    <button class="mb-2 mr-2 btn-icon btn-pill btn btn-outline-success"><i class="pe-7s-umbrella btn-icon-wrapper"> </i>Success</button>
                                    <button class="mb-2 mr-2 btn-icon btn-pill btn btn-outline-info"><i class="pe-7s-science btn-icon-wrapper"> </i>Info</button>
                                    <button class="mb-2 mr-2 btn-icon btn-pill btn btn-outline-warning"><i class="pe-7s-trash btn-icon-wrapper"> </i>Warning</button>
                                    <button class="mb-2 mr-2 btn-icon btn-pill btn btn-outline-danger"><i class="pe-7s-video btn-icon-wrapper"> </i>Danger</button>
                                    <button class="mb-2 mr-2 btn-icon btn-pill btn btn-outline-focus"><i class="pe-7s-upload btn-icon-wrapper"> </i>Focus</button>
                                    <button class="mb-2 mr-2 btn-icon btn-pill btn btn-outline-alternate"><i class="pe-7s-piggy btn-icon-wrapper"> </i>Alt</button>
                                    <button class="mb-2 mr-2 btn-icon btn-pill btn btn-outline-light"><i class="pe-7s-photo btn-icon-wrapper"> </i>Light</button>
                                    <button class="mb-2 mr-2 btn-icon btn-pill btn btn-outline-dark"><i class="pe-7s-helm btn-icon-wrapper"> </i>Dark</button>
                                    <button class="mb-2 mr-2 btn-icon btn-pill btn btn-outline-link"><i class="pe-7s-settings btn-icon-wrapper"> </i>link</button>
                                </div>
                            </div>
                            <div class="main-card mb-3 card">
                                <div class="card-body">
                                    <h5 class="card-title">Shadow Dashed P7 Icons</h5>
                                    <button class="mb-2 mr-2 btn-icon btn-shadow btn-dashed btn btn-outline-primary"><i class="pe-7s-tools btn-icon-wrapper"> </i>Primary</button>
                                    <button class="mb-2 mr-2 btn-icon btn-shadow btn-dashed btn btn-outline-secondary"><i class="pe-7s-gym btn-icon-wrapper"> </i>Secondary</button>
                                    <button class="mb-2 mr-2 btn-icon btn-shadow btn-dashed btn btn-outline-success"><i class="pe-7s-umbrella btn-icon-wrapper"> </i>Success</button>
                                    <button class="mb-2 mr-2 btn-icon btn-shadow btn-dashed btn btn-outline-info"><i class="pe-7s-science btn-icon-wrapper"> </i>Info</button>
                                    <button class="mb-2 mr-2 btn-icon btn-shadow btn-dashed btn btn-outline-warning"><i class="pe-7s-trash btn-icon-wrapper"> </i>Warning</button>
                                    <button class="mb-2 mr-2 btn-icon btn-shadow btn-dashed btn btn-outline-danger"><i class="pe-7s-video btn-icon-wrapper"> </i>Danger</button>
                                    <button class="mb-2 mr-2 btn-icon btn-shadow btn-dashed btn btn-outline-focus"><i class="pe-7s-upload btn-icon-wrapper"> </i>Focus</button>
                                    <button class="mb-2 mr-2 btn-icon btn-shadow btn-dashed btn btn-outline-alternate"><i class="pe-7s-piggy btn-icon-wrapper"> </i>Alt</button>
                                    <button class="mb-2 mr-2 btn-icon btn-shadow btn-dashed btn btn-outline-light"><i class="pe-7s-photo btn-icon-wrapper"> </i>Light</button>
                                    <button class="mb-2 mr-2 btn-icon btn-shadow btn-dashed btn btn-outline-dark"><i class="pe-7s-helm btn-icon-wrapper"> </i>Dark</button>
                                    <button class="mb-2 mr-2 btn-icon btn-shadow btn-dashed btn btn-outline-link"><i class="pe-7s-settings btn-icon-wrapper"> </i>link</button>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="main-card mb-3 card">
                                <div class="card-body">
                                    <h5 class="card-title">Linecons Icons Square Buttons</h5>
                                    <button class="mb-2 mr-2 btn-icon btn-square btn btn-primary"><i class="lnr-license btn-icon-wrapper"> </i>Primary</button>
                                    <button class="mb-2 mr-2 btn-icon btn-square btn btn-secondary"><i class="lnr-map btn-icon-wrapper"> </i>Secondary</button>
                                    <button class="mb-2 mr-2 btn-icon btn-square btn btn-success"><i class="lnr-music-note btn-icon-wrapper"> </i>Success</button>
                                    <button class="mb-2 mr-2 btn-icon btn-square btn btn-info"><i class="lnr-heart btn-icon-wrapper"> </i>Info</button>
                                    <button class="mb-2 mr-2 btn-icon btn-square btn btn-warning"><i class="lnr-magic-wand btn-icon-wrapper"> </i>Warning</button>
                                    <button class="mb-2 mr-2 btn-icon btn-square btn btn-danger"><i class="lnr-lighter btn-icon-wrapper"> </i>Danger</button>
                                    <button class="mb-2 mr-2 btn-icon btn-square btn btn-focus"><i class="lnr-dice btn-icon-wrapper"> </i>Focus</button>
                                    <button class="mb-2 mr-2 btn-icon btn-square btn btn-alternate"><i class="lnr-apartment btn-icon-wrapper"> </i>Alt</button>
                                    <button class="mb-2 mr-2 btn-icon btn-square btn btn-light"><i class="lnr-database btn-icon-wrapper"> </i>Light</button>
                                    <button class="mb-2 mr-2 btn-icon btn-square btn btn-dark"><i class="lnr-location btn-icon-wrapper"> </i>Dark</button>
                                    <button class="mb-2 mr-2 btn-icon btn-square btn btn-link"><i class="lnr-inbox btn-icon-wrapper"> </i>link</button>
                                </div>
                            </div>
                            <div class="main-card mb-3 card">
                                <div class="card-body">
                                    <h5 class="card-title">Outline 2x Shadow Linecons Icons</h5>
                                    <button class="mb-2 mr-2 btn-icon btn-shadow btn-outline-2x btn btn-outline-primary"><i class="lnr-store btn-icon-wrapper"> </i>Primary</button>
                                    <button class="mb-2 mr-2 btn-icon btn-shadow btn-outline-2x btn btn-outline-secondary"><i class="lnr-book btn-icon-wrapper"> </i>Secondary</button>
                                    <button class="mb-2 mr-2 btn-icon btn-shadow btn-outline-2x btn btn-outline-success"><i class="lnr-user btn-icon-wrapper"> </i>Success</button>
                                    <button class="mb-2 mr-2 btn-icon btn-shadow btn-outline-2x btn btn-outline-info"><i class="lnr-paperclip btn-icon-wrapper"> </i>Info</button>
                                    <button class="mb-2 mr-2 btn-icon btn-shadow btn-outline-2x btn btn-outline-warning"><i class="lnr-screen btn-icon-wrapper"> </i>Warning</button>
                                    <button class="mb-2 mr-2 btn-icon btn-shadow btn-outline-2x btn btn-outline-danger"><i class="lnr-smartphone btn-icon-wrapper"> </i>Danger</button>
                                    <button class="mb-2 mr-2 btn-icon btn-shadow btn-outline-2x btn btn-outline-focus"><i class="lnr-phone btn-icon-wrapper"> </i>Focus</button>
                                    <button class="mb-2 mr-2 btn-icon btn-shadow btn-outline-2x btn btn-outline-alternate"><i class="lnr-keyboard btn-icon-wrapper"> </i>Alt</button>
                                    <button class="mb-2 mr-2 btn-icon btn-shadow btn-outline-2x btn btn-outline-light"><i class="lnr-dinner btn-icon-wrapper"> </i>Light</button>
                                    <button class="mb-2 mr-2 btn-icon btn-shadow btn-outline-2x btn btn-outline-dark"><i class="lnr-earth btn-icon-wrapper"> </i>Dark</button>
                                    <button class="mb-2 mr-2 btn-icon btn-shadow btn-outline-2x btn btn-outline-link"><i class="lnr-car btn-icon-wrapper"> </i>link</button>
                                </div>
                            </div>
                            <div class="main-card mb-3 card">
                                <div class="card-body">
                                    <h5 class="card-title">Solid Pills Linecons Icons</h5>
                                    <button class="mb-2 mr-2 btn-icon btn-pill btn btn-primary"><i class="lnr-hand btn-icon-wrapper"> </i>Primary</button>
                                    <button class="mb-2 mr-2 btn-icon btn-pill btn btn-secondary"><i class="lnr-funnel btn-icon-wrapper"> </i>Secondary</button>
                                    <button class="mb-2 mr-2 btn-icon btn-pill btn btn-success"><i class="lnr-crop btn-icon-wrapper"> </i>Success</button>
                                    <button class="mb-2 mr-2 btn-icon btn-pill btn btn-info"><i class="lnr-drop btn-icon-wrapper"> </i>Info</button>
                                    <button class="mb-2 mr-2 btn-icon btn-pill btn btn-warning"><i class="lnr-enter btn-icon-wrapper"> </i>Warning</button>
                                    <button class="mb-2 mr-2 btn-icon btn-pill btn btn-danger"><i class="lnr-eye btn-icon-wrapper"> </i>Danger</button>
                                    <button class="mb-2 mr-2 btn-icon btn-pill btn btn-focus"><i class="lnr-graduation-hat btn-icon-wrapper"> </i>Focus</button>
                                    <button class="mb-2 mr-2 btn-icon btn-pill btn btn-alternate"><i class="lnr-file-empty btn-icon-wrapper"> </i>Alt</button>
                                    <button class="mb-2 mr-2 btn-icon btn-pill btn btn-light"><i class="lnr-camera btn-icon-wrapper"> </i>Light</button>
                                    <button class="mb-2 mr-2 btn-icon btn-pill btn btn-dark"><i class="lnr-picture btn-icon-wrapper"> </i>Dark</button>
                                    <button class="mb-2 mr-2 btn-icon btn-pill btn btn-link"><i class="lnr-book btn-icon-wrapper"> </i>link</button>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="main-card mb-3 card">
                                <div class="card-body">
                                    <h5 class="card-title">Block Level</h5>
                                    <button class="mb-2 mr-2 btn-icon btn btn-primary btn-lg btn-block"><i class="lnr-picture btn-icon-wrapper"> </i>Block Large</button>
                                    <button class="mb-2 mr-2 btn-icon btn btn-primary btn-block"><i class="lnr-crop btn-icon-wrapper"> </i>Block Normal</button>
                                    <button class="mb-2 mr-2 btn-icon btn btn-primary btn-sm btn-block"><i class="lnr-paperclip btn-icon-wrapper"> </i>Block Small</button>
                                </div>
                            </div>
                            <div class="main-card mb-3 card">
                                <div class="card-body">
                                    <h5 class="card-title">Sizing</h5>
                                    <div class="text-center">
                                        <button class="btn-wide mb-2 mr-2 btn-icon btn btn-primary btn-lg"><i class="pe-7s-science btn-icon-wrapper"> </i>Large</button>
                                        <button class="btn-wide mb-2 mr-2 btn-icon btn btn-primary"><i class="pe-7s-volume btn-icon-wrapper"> </i>Normal</button>
                                        <button class="btn-wide mb-2 mr-2 btn-icon btn btn-primary btn-sm"><i class="pe-7s-tools btn-icon-wrapper"> </i>Small</button>
                                    </div>
                                </div>
                            </div>
                            <div class="main-card mb-3 card">
                                <div class="card-body">
                                    <h5 class="card-title">Right Icon</h5>
                                    <div class="text-center">
                                        <button class="btn-wide mb-2 mr-2 btn-icon btn-icon-right btn-pill btn btn-warning btn-lg">Large<i class="pe-7s-science btn-icon-wrapper"> </i></button>
                                        <button class="btn-wide mb-2 mr-2 btn-icon btn-icon-right btn-shadow btn-pill btn btn-outline-success">Normal<i class="pe-7s-volume btn-icon-wrapper"> </i></button>
                                        <button class="btn-wide mb-2 mr-2 btn-icon btn-icon-right btn-dashed btn-pill btn btn-outline-danger btn-sm">Small<i class="pe-7s-tools btn-icon-wrapper"> </i></button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="main-card mb-3 card">
                                <div class="card-body">
                                    <h5 class="card-title">Icons Only</h5>
                                    <button class="mb-2 mr-2 btn-icon btn-icon-only btn btn-primary"><i class="pe-7s-tools btn-icon-wrapper"> </i></button>
                                    <button class="mb-2 mr-2 btn-icon btn-icon-only btn btn-secondary"><i class="pe-7s-gym btn-icon-wrapper"> </i></button>
                                    <button class="mb-2 mr-2 btn-icon btn-icon-only btn btn-success"><i class="pe-7s-umbrella btn-icon-wrapper"> </i></button>
                                    <button class="mb-2 mr-2 btn-icon btn-icon-only btn btn-info"><i class="pe-7s-science btn-icon-wrapper"> </i></button>
                                    <button class="mb-2 mr-2 btn-icon btn-icon-only btn btn-warning"><i class="pe-7s-trash btn-icon-wrapper"> </i></button>
                                    <button class="mb-2 mr-2 btn-icon btn-icon-only btn btn-danger"><i class="pe-7s-video btn-icon-wrapper"> </i></button>
                                    <button class="mb-2 mr-2 btn-icon btn-icon-only btn btn-focus"><i class="pe-7s-upload btn-icon-wrapper"> </i></button>
                                    <button class="mb-2 mr-2 btn-icon btn-icon-only btn btn-alternate"><i class="pe-7s-piggy btn-icon-wrapper"> </i></button>
                                    <button class="mb-2 mr-2 btn-icon btn-icon-only btn btn-light"><i class="pe-7s-photo btn-icon-wrapper"> </i></button>
                                    <button class="mb-2 mr-2 btn-icon btn-icon-only btn btn-dark"><i class="pe-7s-helm btn-icon-wrapper"> </i></button>
                                    <button class="mb-2 mr-2 btn-icon btn-icon-only btn btn-link"><i class="pe-7s-settings btn-icon-wrapper"> </i></button>
                                    <div class="divider"></div>
                                    <button class="mb-2 mr-2 btn-icon btn-icon-only btn-pill btn btn-outline-primary"><i class="pe-7s-tools btn-icon-wrapper"> </i></button>
                                    <button class="mb-2 mr-2 btn-icon btn-icon-only btn-pill btn btn-outline-secondary"><i class="pe-7s-gym btn-icon-wrapper"> </i></button>
                                    <button class="mb-2 mr-2 btn-icon btn-icon-only btn-pill btn btn-outline-success"><i class="pe-7s-umbrella btn-icon-wrapper"> </i></button>
                                    <button class="mb-2 mr-2 btn-icon btn-icon-only btn-pill btn btn-outline-info"><i class="pe-7s-science btn-icon-wrapper"> </i></button>
                                    <button class="mb-2 mr-2 btn-icon btn-icon-only btn-pill btn btn-outline-warning"><i class="pe-7s-trash btn-icon-wrapper"> </i></button>
                                    <button class="mb-2 mr-2 btn-icon btn-icon-only btn-pill btn btn-outline-danger"><i class="pe-7s-video btn-icon-wrapper"> </i></button>
                                    <button class="mb-2 mr-2 btn-icon btn-icon-only btn-pill btn btn-outline-focus"><i class="pe-7s-upload btn-icon-wrapper"> </i></button>
                                    <button class="mb-2 mr-2 btn-icon btn-icon-only btn-pill btn btn-outline-alternate"><i class="pe-7s-piggy btn-icon-wrapper"> </i></button>
                                    <button class="mb-2 mr-2 btn-icon btn-icon-only btn-pill btn btn-outline-light"><i class="pe-7s-photo btn-icon-wrapper"> </i></button>
                                    <button class="mb-2 mr-2 btn-icon btn-icon-only btn-pill btn btn-outline-dark"><i class="pe-7s-helm btn-icon-wrapper"> </i></button>
                                    <button class="mb-2 mr-2 btn-icon btn-icon-only btn-pill btn btn-outline-link"><i class="pe-7s-settings btn-icon-wrapper"> </i></button>
                                    <div class="divider"></div>
                                    <button class="mb-2 mr-2 btn-icon btn-icon-only btn-shadow btn-dashed btn btn-outline-primary"><i class="pe-7s-tools btn-icon-wrapper"> </i></button>
                                    <button class="mb-2 mr-2 btn-icon btn-icon-only btn-shadow btn-dashed btn btn-outline-secondary"><i class="pe-7s-gym btn-icon-wrapper"> </i></button>
                                    <button class="mb-2 mr-2 btn-icon btn-icon-only btn-shadow btn-dashed btn btn-outline-success"><i class="pe-7s-umbrella btn-icon-wrapper"> </i></button>
                                    <button class="mb-2 mr-2 btn-icon btn-icon-only btn-shadow btn-dashed btn btn-outline-info"><i class="pe-7s-science btn-icon-wrapper"> </i></button>
                                    <button class="mb-2 mr-2 btn-icon btn-icon-only btn-shadow btn-dashed btn btn-outline-warning"><i class="pe-7s-trash btn-icon-wrapper"> </i></button>
                                    <button class="mb-2 mr-2 btn-icon btn-icon-only btn-shadow btn-dashed btn btn-outline-danger"><i class="pe-7s-video btn-icon-wrapper"> </i></button>
                                    <button class="mb-2 mr-2 btn-icon btn-icon-only btn-shadow btn-dashed btn btn-outline-focus"><i class="pe-7s-upload btn-icon-wrapper"> </i></button>
                                    <button class="mb-2 mr-2 btn-icon btn-icon-only btn-shadow btn-dashed btn btn-outline-alternate"><i class="pe-7s-piggy btn-icon-wrapper"> </i></button>
                                    <button class="mb-2 mr-2 btn-icon btn-icon-only btn-shadow btn-dashed btn btn-outline-light"><i class="pe-7s-photo btn-icon-wrapper"> </i></button>
                                    <button class="mb-2 mr-2 btn-icon btn-icon-only btn-shadow btn-dashed btn btn-outline-dark"><i class="pe-7s-helm btn-icon-wrapper"> </i></button>
                                    <button class="mb-2 mr-2 btn-icon btn-icon-only btn-shadow btn-dashed btn btn-outline-link"><i class="pe-7s-settings btn-icon-wrapper"> </i></button>
                                    <div class="divider"></div>
                                    <button class="mb-2 mr-2 btn-icon btn-icon-only btn-square btn btn-primary"><i class="lnr-license btn-icon-wrapper"> </i></button>
                                    <button class="mb-2 mr-2 btn-icon btn-icon-only btn-square btn btn-secondary"><i class="lnr-map btn-icon-wrapper"> </i></button>
                                    <button class="mb-2 mr-2 btn-icon btn-icon-only btn-square btn btn-success"><i class="lnr-music-note btn-icon-wrapper"> </i></button>
                                    <button class="mb-2 mr-2 btn-icon btn-icon-only btn-square btn btn-info"><i class="lnr-heart btn-icon-wrapper"> </i></button>
                                    <button class="mb-2 mr-2 btn-icon btn-icon-only btn-square btn btn-warning"><i class="lnr-magic-wand btn-icon-wrapper"> </i></button>
                                    <button class="mb-2 mr-2 btn-icon btn-icon-only btn-square btn btn-danger"><i class="lnr-lighter btn-icon-wrapper"> </i></button>
                                    <button class="mb-2 mr-2 btn-icon btn-icon-only btn-square btn btn-focus"><i class="lnr-dice btn-icon-wrapper"> </i></button>
                                    <button class="mb-2 mr-2 btn-icon btn-icon-only btn-square btn btn-alternate"><i class="lnr-apartment btn-icon-wrapper"> </i></button>
                                    <button class="mb-2 mr-2 btn-icon btn-icon-only btn-square btn btn-light"><i class="lnr-database btn-icon-wrapper"> </i></button>
                                    <button class="mb-2 mr-2 btn-icon btn-icon-only btn-square btn btn-dark"><i class="lnr-location btn-icon-wrapper"> </i></button>
                                    <button class="mb-2 mr-2 btn-icon btn-icon-only btn-square btn btn-link"><i class="lnr-inbox btn-icon-wrapper"> </i></button>
                                    <div class="divider"></div>
                                    <button class="mb-2 mr-2 btn-icon btn-icon-only btn-shadow btn-outline-2x btn btn-outline-primary"><i class="lnr-store btn-icon-wrapper"> </i></button>
                                    <button class="mb-2 mr-2 btn-icon btn-icon-only btn-shadow btn-outline-2x btn btn-outline-secondary"><i class="lnr-book btn-icon-wrapper"> </i></button>
                                    <button class="mb-2 mr-2 btn-icon btn-icon-only btn-shadow btn-outline-2x btn btn-outline-success"><i class="lnr-user btn-icon-wrapper"> </i></button>
                                    <button class="mb-2 mr-2 btn-icon btn-icon-only btn-shadow btn-outline-2x btn btn-outline-info"><i class="lnr-paperclip btn-icon-wrapper"> </i></button>
                                    <button class="mb-2 mr-2 btn-icon btn-icon-only btn-shadow btn-outline-2x btn btn-outline-warning"><i class="lnr-screen btn-icon-wrapper"> </i></button>
                                    <button class="mb-2 mr-2 btn-icon btn-icon-only btn-shadow btn-outline-2x btn btn-outline-danger"><i class="lnr-smartphone btn-icon-wrapper"> </i></button>
                                    <button class="mb-2 mr-2 btn-icon btn-icon-only btn-shadow btn-outline-2x btn btn-outline-focus"><i class="lnr-phone btn-icon-wrapper"> </i></button>
                                    <button class="mb-2 mr-2 btn-icon btn-icon-only btn-shadow btn-outline-2x btn btn-outline-alternate"><i class="lnr-keyboard btn-icon-wrapper"> </i></button>
                                    <button class="mb-2 mr-2 btn-icon btn-icon-only btn-shadow btn-outline-2x btn btn-outline-light"><i class="lnr-dinner btn-icon-wrapper"> </i></button>
                                    <button class="mb-2 mr-2 btn-icon btn-icon-only btn-shadow btn-outline-2x btn btn-outline-dark"><i class="lnr-earth btn-icon-wrapper"> </i></button>
                                    <button class="mb-2 mr-2 btn-icon btn-icon-only btn-shadow btn-outline-2x btn btn-outline-link"><i class="lnr-car btn-icon-wrapper"> </i></button>
                                    <div class="divider"></div>
                                    <button class="mb-2 mr-2 btn-icon btn-icon-only btn-pill btn btn-primary"><i class="lnr-hand btn-icon-wrapper"> </i></button>
                                    <button class="mb-2 mr-2 btn-icon btn-icon-only btn-pill btn btn-secondary"><i class="lnr-funnel btn-icon-wrapper"> </i></button>
                                    <button class="mb-2 mr-2 btn-icon btn-icon-only btn-pill btn btn-success"><i class="lnr-crop btn-icon-wrapper"> </i></button>
                                    <button class="mb-2 mr-2 btn-icon btn-icon-only btn-pill btn btn-info"><i class="lnr-drop btn-icon-wrapper"> </i></button>
                                    <button class="mb-2 mr-2 btn-icon btn-icon-only btn-pill btn btn-warning"><i class="lnr-enter btn-icon-wrapper"> </i></button>
                                    <button class="mb-2 mr-2 btn-icon btn-icon-only btn-pill btn btn-danger"><i class="lnr-eye btn-icon-wrapper"> </i></button>
                                    <button class="mb-2 mr-2 btn-icon btn-icon-only btn-pill btn btn-focus"><i class="lnr-graduation-hat btn-icon-wrapper"> </i></button>
                                    <button class="mb-2 mr-2 btn-icon btn-icon-only btn-pill btn btn-alternate"><i class="lnr-file-empty btn-icon-wrapper"> </i></button>
                                    <button class="mb-2 mr-2 btn-icon btn-icon-only btn-pill btn btn-light"><i class="lnr-camera btn-icon-wrapper"> </i></button>
                                    <button class="mb-2 mr-2 btn-icon btn-icon-only btn-pill btn btn-dark"><i class="lnr-picture btn-icon-wrapper"> </i></button>
                                    <button class="mb-2 mr-2 btn-icon btn-icon-only btn-pill btn btn-link"><i class="lnr-book btn-icon-wrapper"> </i></button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane tabs-animation fade" id="tab-content-1" role="tabpanel">
                    <div class="row">
                        <div class="col-lg-12 col-xl-6">
                            <div class="main-card mb-3 card">
                                <div class="card-body">
                                    <h5 class="card-title">Solid P7 Icons</h5>
                                    <button class="mb-2 mr-2 btn-icon-vertical btn btn-primary"><i class="pe-7s-tools btn-icon-wrapper"> </i>Primary</button>
                                    <button class="mb-2 mr-2 btn-icon-vertical btn btn-secondary"><i class="pe-7s-gym btn-icon-wrapper"> </i>Secondary</button>
                                    <button class="mb-2 mr-2 btn-icon-vertical btn btn-success"><i class="pe-7s-umbrella btn-icon-wrapper"> </i>Success</button>
                                    <button class="mb-2 mr-2 btn-icon-vertical btn btn-info"><i class="pe-7s-science btn-icon-wrapper"> </i>Info</button>
                                    <button class="mb-2 mr-2 btn-icon-vertical btn btn-warning"><i class="pe-7s-trash btn-icon-wrapper"> </i>Warning</button>
                                    <button class="mb-2 mr-2 btn-icon-vertical btn btn-danger"><i class="pe-7s-video btn-icon-wrapper"> </i>Danger</button>
                                    <button class="mb-2 mr-2 btn-icon-vertical btn btn-focus"><i class="pe-7s-upload btn-icon-wrapper"> </i>Focus</button>
                                    <button class="mb-2 mr-2 btn-icon-vertical btn btn-alternate"><i class="pe-7s-piggy btn-icon-wrapper"> </i>Alt</button>
                                    <button class="mb-2 mr-2 btn-icon-vertical btn btn-light"><i class="pe-7s-photo btn-icon-wrapper"> </i>Light</button>
                                    <button class="mb-2 mr-2 btn-icon-vertical btn btn-dark"><i class="pe-7s-helm btn-icon-wrapper"> </i>Dark</button>
                                    <button class="mb-2 mr-2 btn-icon-vertical btn btn-link"><i class="pe-7s-settings btn-icon-wrapper"> </i>link</button>
                                </div>
                            </div>
                            <div class="main-card mb-3 card">
                                <div class="card-body">
                                    <h5 class="card-title">Color Transition P7 Icons</h5>
                                    <button class="mb-2 mr-2 btn-icon-vertical btn-transition btn btn-outline-primary"><i class="pe-7s-tools btn-icon-wrapper"> </i>Primary</button>
                                    <button class="mb-2 mr-2 btn-icon-vertical btn-transition btn btn-outline-secondary"><i class="pe-7s-gym btn-icon-wrapper"> </i>Secondary</button>
                                    <button class="mb-2 mr-2 btn-icon-vertical btn-transition btn btn-outline-success"><i class="pe-7s-umbrella btn-icon-wrapper"> </i>Success</button>
                                    <button class="mb-2 mr-2 btn-icon-vertical btn-transition btn btn-outline-info"><i class="pe-7s-science btn-icon-wrapper"> </i>Info</button>
                                    <button class="mb-2 mr-2 btn-icon-vertical btn-transition btn btn-outline-warning"><i class="pe-7s-trash btn-icon-wrapper"> </i>Warning</button>
                                    <button class="mb-2 mr-2 btn-icon-vertical btn-transition btn btn-outline-danger"><i class="pe-7s-video btn-icon-wrapper"> </i>Danger</button>
                                    <button class="mb-2 mr-2 btn-icon-vertical btn-transition btn btn-outline-focus"><i class="pe-7s-upload btn-icon-wrapper"> </i>Focus</button>
                                    <button class="mb-2 mr-2 btn-icon-vertical btn-transition btn btn-outline-alternate"><i class="pe-7s-piggy btn-icon-wrapper"> </i>Alt</button>
                                    <button class="mb-2 mr-2 btn-icon-vertical btn-transition btn btn-outline-light"><i class="pe-7s-photo btn-icon-wrapper"> </i>Light</button>
                                    <button class="mb-2 mr-2 btn-icon-vertical btn-transition btn btn-outline-dark"><i class="pe-7s-helm btn-icon-wrapper"> </i>Dark</button>
                                    <button class="mb-2 mr-2 btn-icon-vertical btn-transition btn btn-outline-link"><i class="pe-7s-settings btn-icon-wrapper"> </i>link</button>
                                </div>
                            </div>
                            <div class="main-card mb-3 card">
                                <div class="card-body">
                                    <h5 class="card-title">Outline P7 Icons</h5>
                                    <button class="mb-2 mr-2 btn-icon-vertical btn btn-outline-primary"><i class="pe-7s-tools btn-icon-wrapper"> </i>Primary</button>
                                    <button class="mb-2 mr-2 btn-icon-vertical btn btn-outline-secondary"><i class="pe-7s-gym btn-icon-wrapper"> </i>Secondary</button>
                                    <button class="mb-2 mr-2 btn-icon-vertical btn btn-outline-success"><i class="pe-7s-umbrella btn-icon-wrapper"> </i>Success</button>
                                    <button class="mb-2 mr-2 btn-icon-vertical btn btn-outline-info"><i class="pe-7s-science btn-icon-wrapper"> </i>Info</button>
                                    <button class="mb-2 mr-2 btn-icon-vertical btn btn-outline-warning"><i class="pe-7s-trash btn-icon-wrapper"> </i>Warning</button>
                                    <button class="mb-2 mr-2 btn-icon-vertical btn btn-outline-danger"><i class="pe-7s-video btn-icon-wrapper"> </i>Danger</button>
                                    <button class="mb-2 mr-2 btn-icon-vertical btn btn-outline-focus"><i class="pe-7s-upload btn-icon-wrapper"> </i>Focus</button>
                                    <button class="mb-2 mr-2 btn-icon-vertical btn btn-outline-alternate"><i class="pe-7s-piggy btn-icon-wrapper"> </i>Alt</button>
                                    <button class="mb-2 mr-2 btn-icon-vertical btn btn-outline-light"><i class="pe-7s-photo btn-icon-wrapper"> </i>Light</button>
                                    <button class="mb-2 mr-2 btn-icon-vertical btn btn-outline-dark"><i class="pe-7s-helm btn-icon-wrapper"> </i>Dark</button>
                                    <button class="mb-2 mr-2 btn-icon-vertical btn btn-outline-link"><i class="pe-7s-settings btn-icon-wrapper"> </i>link</button>
                                </div>
                            </div>
                            <div class="main-card mb-3 card">
                                <div class="card-body">
                                    <h5 class="card-title">Shadow Dashed P7 Icons</h5>
                                    <button class="mb-2 mr-2 btn-icon-vertical btn-shadow btn-dashed btn btn-outline-primary"><i class="pe-7s-tools btn-icon-wrapper"> </i>Primary</button>
                                    <button class="mb-2 mr-2 btn-icon-vertical btn-shadow btn-dashed btn btn-outline-secondary"><i class="pe-7s-gym btn-icon-wrapper"> </i>Secondary</button>
                                    <button class="mb-2 mr-2 btn-icon-vertical btn-shadow btn-dashed btn btn-outline-success"><i class="pe-7s-umbrella btn-icon-wrapper"> </i>Success</button>
                                    <button class="mb-2 mr-2 btn-icon-vertical btn-shadow btn-dashed btn btn-outline-info"><i class="pe-7s-science btn-icon-wrapper"> </i>Info</button>
                                    <button class="mb-2 mr-2 btn-icon-vertical btn-shadow btn-dashed btn btn-outline-warning"><i class="pe-7s-trash btn-icon-wrapper"> </i>Warning</button>
                                    <button class="mb-2 mr-2 btn-icon-vertical btn-shadow btn-dashed btn btn-outline-danger"><i class="pe-7s-video btn-icon-wrapper"> </i>Danger</button>
                                    <button class="mb-2 mr-2 btn-icon-vertical btn-shadow btn-dashed btn btn-outline-focus"><i class="pe-7s-upload btn-icon-wrapper"> </i>Focus</button>
                                    <button class="mb-2 mr-2 btn-icon-vertical btn-shadow btn-dashed btn btn-outline-alternate"><i class="pe-7s-piggy btn-icon-wrapper"> </i>Alt</button>
                                    <button class="mb-2 mr-2 btn-icon-vertical btn-shadow btn-dashed btn btn-outline-light"><i class="pe-7s-photo btn-icon-wrapper"> </i>Light</button>
                                    <button class="mb-2 mr-2 btn-icon-vertical btn-shadow btn-dashed btn btn-outline-dark"><i class="pe-7s-helm btn-icon-wrapper"> </i>Dark</button>
                                    <button class="mb-2 mr-2 btn-icon-vertical btn-shadow btn-dashed btn btn-outline-link"><i class="pe-7s-settings btn-icon-wrapper"> </i>link</button>
                                </div>
                            </div>
                            <div class="main-card mb-3 card">
                                <div class="card-body">
                                    <h5 class="card-title">Block Level</h5>
                                    <button class="mb-2 mr-2 btn-icon-vertical btn btn-primary btn-lg btn-block"><i class="lnr-picture btn-icon-wrapper"> </i>Block Large</button>
                                    <button class="mb-2 mr-2 btn-icon-vertical btn btn-primary btn-block"><i class="lnr-crop btn-icon-wrapper"> </i>Block Normal</button>
                                    <button class="mb-2 mr-2 btn-icon-vertical btn btn-primary btn-sm btn-block"><i class="lnr-paperclip btn-icon-wrapper"> </i>Block Small</button>
                                </div>
                            </div>
                            <div class="main-card mb-3 card">
                                <div class="card-body">
                                    <h5 class="card-title">Sizing</h5>
                                    <div class="text-center">
                                        <button class="btn-wide mb-2 mr-2 btn-icon-vertical btn btn-primary btn-lg"><i class="pe-7s-science btn-icon-wrapper"> </i>Large</button>
                                        <button class="btn-wide mb-2 mr-2 btn-icon-vertical btn btn-primary"><i class="pe-7s-volume btn-icon-wrapper"> </i>Normal</button>
                                        <button class="btn-wide mb-2 mr-2 btn-icon-vertical btn btn-primary btn-sm"><i class="pe-7s-tools btn-icon-wrapper"> </i>Small</button>
                                    </div>
                                </div>
                            </div>
                            <div class="main-card mb-3 card">
                                <div class="card-body">
                                    <h5 class="card-title">Bottom Icon</h5>
                                    <div class="text-center">
                                        <button class="btn-wide mb-2 mr-2 btn-icon-vertical btn-icon-bottom btn btn-warning btn-lg">Large<i class="pe-7s-science btn-icon-wrapper"> </i></button>
                                        <button class="btn-wide mb-2 mr-2 btn-icon-vertical btn-icon-bottom btn-shadow btn btn-outline-success">Normal<i class="pe-7s-volume btn-icon-wrapper"> </i></button>
                                        <button class="btn-wide mb-2 mr-2 btn-icon-vertical btn-icon-bottom btn-dashed btn btn-outline-danger btn-sm">Small<i class="pe-7s-tools btn-icon-wrapper"> </i></button>
                                    </div>
                                </div>
                            </div>
                            <div class="main-card mb-3 card">
                                <div class="card-body">
                                    <h5 class="card-title">Grid Menu Bigger</h5>
                                    <div class="grid-menu grid-menu-3col">
                                        <div class="no-gutters row">
                                            <div class="col-sm-6 col-xl-4">
                                                <button class="btn-icon-vertical btn-square btn-transition btn btn-outline-link">
                                                    <i class="lnr-license btn-icon-wrapper btn-icon-lg mb-3"> </i>Primary
                                                </button>
                                            </div>
                                            <div class="col-sm-6 col-xl-4">
                                                <button class="btn-icon-vertical btn-square btn-transition btn btn-outline-link">
                                                    <i class="lnr-map btn-icon-wrapper btn-icon-lg mb-3"> </i>Secondary
                                                </button>
                                            </div>
                                            <div class="col-sm-6 col-xl-4">
                                                <button class="btn-icon-vertical btn-square btn-transition btn btn-outline-link">
                                                    <i class="lnr-music-note btn-icon-wrapper btn-icon-lg mb-3"> </i>Success
                                                </button>
                                            </div>
                                            <div class="col-sm-6 col-xl-4">
                                                <button class="btn-icon-vertical btn-square btn-transition btn btn-outline-link">
                                                    <i class="lnr-heart btn-icon-wrapper btn-icon-lg mb-3"> </i>Info
                                                </button>
                                            </div>
                                            <div class="col-sm-6 col-xl-4">
                                                <button class="btn-icon-vertical btn-square btn-transition btn btn-outline-link">
                                                    <i class="lnr-magic-wand btn-icon-wrapper btn-icon-lg mb-3"> </i>Warning
                                                </button>
                                            </div>
                                            <div class="col-sm-6 col-xl-4">
                                                <button class="btn-icon-vertical btn-square btn-transition btn btn-outline-link">
                                                    <i class="lnr-lighter btn-icon-wrapper btn-icon-lg mb-3"> </i>Danger
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="divider"></div>
                                    <div class="text-center">
                                        <div class="dropdown">
                                            <button type="button" aria-haspopup="true" aria-expanded="false" data-toggle="dropdown" class="mb-2 mr-2 dropdown-toggle btn btn-primary">Grid Menu Inside Dropdown</button>
                                            <div tabindex="-1" role="menu" aria-hidden="true" class="dropdown-menu-xl dropdown-menu rm-pointers">
                                                <div class="dropdown-menu-header">
                                                    <div class="dropdown-menu-header-inner bg-primary">
                                                        <div class="menu-header-image" style="background-image: url('assets/images/dropdown-header/abstract3.jpg');"></div>
                                                        <div class="menu-header-content">
                                                            <h5 class="menu-header-title">Settings</h5>
                                                            <h6 class="menu-header-subtitle">Manage all of your options</h6>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="grid-menu grid-menu-xl grid-menu-3col">
                                                    <div class="no-gutters row">
                                                        <div class="col-sm-6 col-xl-4">
                                                            <button class="btn-icon-vertical btn-square btn-transition btn btn-outline-link"><i class="lnr-license btn-icon-wrapper btn-icon-lg mb-3"> </i>Primary</button>
                                                        </div>
                                                        <div class="col-sm-6 col-xl-4">
                                                            <button class="btn-icon-vertical btn-square btn-transition btn btn-outline-link"><i class="lnr-map btn-icon-wrapper btn-icon-lg mb-3"> </i>Secondary</button>
                                                        </div>
                                                        <div class="col-sm-6 col-xl-4">
                                                            <button class="btn-icon-vertical btn-square btn-transition btn btn-outline-link"><i class="lnr-music-note btn-icon-wrapper btn-icon-lg mb-3"> </i>Success</button>
                                                        </div>
                                                        <div class="col-sm-6 col-xl-4">
                                                            <button class="btn-icon-vertical btn-square btn-transition btn btn-outline-link"><i class="lnr-heart btn-icon-wrapper btn-icon-lg mb-3"> </i>Info</button>
                                                        </div>
                                                        <div class="col-sm-6 col-xl-4">
                                                            <button class="btn-icon-vertical btn-square btn-transition btn btn-outline-link"><i class="lnr-magic-wand btn-icon-wrapper btn-icon-lg mb-3"> </i>Warning</button>
                                                        </div>
                                                        <div class="col-sm-6 col-xl-4">
                                                            <button class="btn-icon-vertical btn-square btn-transition btn btn-outline-link"><i class="lnr-lighter btn-icon-wrapper btn-icon-lg mb-3"> </i>Danger</button>
                                                        </div>
                                                    </div>
                                                </div>
                                                <ul class="nav flex-column">
                                                    <li class="nav-item-divider nav-item"></li>
                                                    <li class="nav-item-btn text-right nav-item">
                                                        <button class="btn-pill btn btn-success btn-sm">Save</button>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-12 col-xl-6">
                            <div class="main-card mb-3 card">
                                <div class="card-body">
                                    <h5 class="card-title">Linecons Icons Square Buttons</h5>
                                    <button class="mb-2 mr-2 btn-icon-vertical btn-square btn btn-primary"><i class="lnr-license btn-icon-wrapper"> </i>Primary</button>
                                    <button class="mb-2 mr-2 btn-icon-vertical btn-square btn btn-secondary"><i class="lnr-map btn-icon-wrapper"> </i>Secondary</button>
                                    <button class="mb-2 mr-2 btn-icon-vertical btn-square btn btn-success"><i class="lnr-music-note btn-icon-wrapper"> </i>Success</button>
                                    <button class="mb-2 mr-2 btn-icon-vertical btn-square btn btn-info"><i class="lnr-heart btn-icon-wrapper"> </i>Info</button>
                                    <button class="mb-2 mr-2 btn-icon-vertical btn-square btn btn-warning"><i class="lnr-magic-wand btn-icon-wrapper"> </i>Warning</button>
                                    <button class="mb-2 mr-2 btn-icon-vertical btn-square btn btn-danger"><i class="lnr-lighter btn-icon-wrapper"> </i>Danger</button>
                                    <button class="mb-2 mr-2 btn-icon-vertical btn-square btn btn-focus"><i class="lnr-dice btn-icon-wrapper"> </i>Focus</button>
                                    <button class="mb-2 mr-2 btn-icon-vertical btn-square btn btn-alternate"><i class="lnr-apartment btn-icon-wrapper"> </i>Alt</button>
                                    <button class="mb-2 mr-2 btn-icon-vertical btn-square btn btn-light"><i class="lnr-database btn-icon-wrapper"> </i>Light</button>
                                    <button class="mb-2 mr-2 btn-icon-vertical btn-square btn btn-dark"><i class="lnr-location btn-icon-wrapper"> </i>Dark</button>
                                    <button class="mb-2 mr-2 btn-icon-vertical btn-square btn btn-link"><i class="lnr-inbox btn-icon-wrapper"> </i>link</button>
                                </div>
                            </div>
                            <div class="main-card mb-3 card">
                                <div class="card-body">
                                    <h5 class="card-title">Linecons Transition Buttons without Borders</h5>
                                    <button class="mb-2 mr-2 btn-icon-vertical btn-transition border-0 btn btn-outline-primary"><i class="lnr-license btn-icon-wrapper"> </i>Primary</button>
                                    <button class="mb-2 mr-2 btn-icon-vertical btn-transition border-0 btn btn-outline-secondary"><i class="lnr-map btn-icon-wrapper"> </i>Secondary</button>
                                    <button class="mb-2 mr-2 btn-icon-vertical btn-transition border-0 btn btn-outline-success"><i class="lnr-music-note btn-icon-wrapper"> </i>Success</button>
                                    <button class="mb-2 mr-2 btn-icon-vertical btn-transition border-0 btn btn-outline-info"><i class="lnr-heart btn-icon-wrapper"> </i>Info</button>
                                    <button class="mb-2 mr-2 btn-icon-vertical btn-transition border-0 btn btn-outline-warning"><i class="lnr-magic-wand btn-icon-wrapper"> </i>Warning</button>
                                    <button class="mb-2 mr-2 btn-icon-vertical btn-transition border-0 btn btn-outline-danger"><i class="lnr-lighter btn-icon-wrapper"> </i>Danger</button>
                                    <button class="mb-2 mr-2 btn-icon-vertical btn-transition border-0 btn btn-outline-focus"><i class="lnr-dice btn-icon-wrapper"> </i>Focus</button>
                                    <button class="mb-2 mr-2 btn-icon-vertical btn-transition border-0 btn btn-outline-alternate"><i class="lnr-apartment btn-icon-wrapper"> </i>Alt</button>
                                    <button class="mb-2 mr-2 btn-icon-vertical btn-transition border-0 btn btn-outline-light"><i class="lnr-database btn-icon-wrapper"> </i>Light</button>
                                    <button class="mb-2 mr-2 btn-icon-vertical btn-transition border-0 btn btn-outline-dark"><i class="lnr-location btn-icon-wrapper"> </i>Dark</button>
                                    <button class="mb-2 mr-2 btn-icon-vertical btn-transition border-0 btn btn-outline-link"><i class="lnr-inbox btn-icon-wrapper"> </i>link</button>
                                </div>
                            </div>
                            <div class="main-card mb-3 card">
                                <div class="card-body">
                                    <h5 class="card-title">Outline 2x Shadow Linecons Icons</h5>
                                    <button class="mb-2 mr-2 btn-icon-vertical btn-shadow btn-outline-2x btn btn-outline-primary"><i class="lnr-store btn-icon-wrapper"> </i>Primary</button>
                                    <button class="mb-2 mr-2 btn-icon-vertical btn-shadow btn-outline-2x btn btn-outline-secondary"><i class="lnr-book btn-icon-wrapper"> </i>Secondary</button>
                                    <button class="mb-2 mr-2 btn-icon-vertical btn-shadow btn-outline-2x btn btn-outline-success"><i class="lnr-user btn-icon-wrapper"> </i>Success</button>
                                    <button class="mb-2 mr-2 btn-icon-vertical btn-shadow btn-outline-2x btn btn-outline-info"><i class="lnr-paperclip btn-icon-wrapper"> </i>Info</button>
                                    <button class="mb-2 mr-2 btn-icon-vertical btn-shadow btn-outline-2x btn btn-outline-warning"><i class="lnr-screen btn-icon-wrapper"> </i>Warning</button>
                                    <button class="mb-2 mr-2 btn-icon-vertical btn-shadow btn-outline-2x btn btn-outline-danger"><i class="lnr-smartphone btn-icon-wrapper"> </i>Danger</button>
                                    <button class="mb-2 mr-2 btn-icon-vertical btn-shadow btn-outline-2x btn btn-outline-focus"><i class="lnr-phone btn-icon-wrapper"> </i>Focus</button>
                                    <button class="mb-2 mr-2 btn-icon-vertical btn-shadow btn-outline-2x btn btn-outline-alternate"><i class="lnr-keyboard btn-icon-wrapper"> </i>Alt</button>
                                    <button class="mb-2 mr-2 btn-icon-vertical btn-shadow btn-outline-2x btn btn-outline-light"><i class="lnr-dinner btn-icon-wrapper"> </i>Light</button>
                                    <button class="mb-2 mr-2 btn-icon-vertical btn-shadow btn-outline-2x btn btn-outline-dark"><i class="lnr-earth btn-icon-wrapper"> </i>Dark</button>
                                    <button class="mb-2 mr-2 btn-icon-vertical btn-shadow btn-outline-2x btn btn-outline-link"><i class="lnr-car btn-icon-wrapper"> </i>link</button>
                                </div>
                            </div>
                            <div class="main-card mb-3 card">
                                <div class="card-body">
                                    <h5 class="card-title">Solid Pills Linecons Icons</h5>
                                    <button class="mb-2 mr-2 btn-icon-vertical btn btn-primary"><i class="lnr-hand btn-icon-wrapper"> </i>Primary</button>
                                    <button class="mb-2 mr-2 btn-icon-vertical btn btn-secondary"><i class="lnr-funnel btn-icon-wrapper"> </i>Secondary</button>
                                    <button class="mb-2 mr-2 btn-icon-vertical btn btn-success"><i class="lnr-crop btn-icon-wrapper"> </i>Success</button>
                                    <button class="mb-2 mr-2 btn-icon-vertical btn btn-info"><i class="lnr-drop btn-icon-wrapper"> </i>Info</button>
                                    <button class="mb-2 mr-2 btn-icon-vertical btn btn-warning"><i class="lnr-enter btn-icon-wrapper"> </i>Warning</button>
                                    <button class="mb-2 mr-2 btn-icon-vertical btn btn-danger"><i class="lnr-eye btn-icon-wrapper"> </i>Danger</button>
                                    <button class="mb-2 mr-2 btn-icon-vertical btn btn-focus"><i class="lnr-graduation-hat btn-icon-wrapper"> </i>Focus</button>
                                    <button class="mb-2 mr-2 btn-icon-vertical btn btn-alternate"><i class="lnr-file-empty btn-icon-wrapper"> </i>Alt</button>
                                    <button class="mb-2 mr-2 btn-icon-vertical btn btn-light"><i class="lnr-camera btn-icon-wrapper"> </i>Light</button>
                                    <button class="mb-2 mr-2 btn-icon-vertical btn btn-dark"><i class="lnr-picture btn-icon-wrapper"> </i>Dark</button>
                                    <button class="mb-2 mr-2 btn-icon-vertical btn btn-link"><i class="lnr-book btn-icon-wrapper"> </i>link</button>
                                </div>
                            </div>
                            <div class="main-card mb-3 card">
                                <div class="card-body">
                                    <h5 class="card-title">Grid Menu Hover Color</h5>
                                    <div class="grid-menu grid-menu-3col">
                                        <div class="no-gutters row">
                                            <div class="col-sm-6 col-xl-4">
                                                <button class="btn-icon-vertical btn-square btn-transition btn btn-outline-primary">
                                                    <i class="lnr-license btn-icon-wrapper"> </i>Primary
                                                </button>
                                            </div>
                                            <div class="col-sm-6 col-xl-4">
                                                <button class="btn-icon-vertical btn-square btn-transition btn btn-outline-secondary">
                                                    <i class="lnr-map btn-icon-wrapper"> </i>Secondary
                                                </button>
                                            </div>
                                            <div class="col-sm-6 col-xl-4">
                                                <button class="btn-icon-vertical btn-square btn-transition btn btn-outline-success">
                                                    <i class="lnr-music-note btn-icon-wrapper"> </i>Success
                                                </button>
                                            </div>
                                            <div class="col-sm-6 col-xl-4">
                                                <button class="btn-icon-vertical btn-square btn-transition btn btn-outline-info">
                                                    <i class="lnr-heart btn-icon-wrapper"> </i>Info
                                                </button>
                                            </div>
                                            <div class="col-sm-6 col-xl-4">
                                                <button class="btn-icon-vertical btn-square btn-transition btn btn-outline-warning">
                                                    <i class="lnr-magic-wand btn-icon-wrapper"> </i>Warning
                                                </button>
                                            </div>
                                            <div class="col-sm-6 col-xl-4">
                                                <button class="btn-icon-vertical btn-square btn-transition btn btn-outline-danger">
                                                    <i class="lnr-lighter btn-icon-wrapper"> </i>Danger
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="divider"></div>
                                    <div class="text-center">
                                        <div class="dropdown">
                                            <button type="button" aria-haspopup="true" aria-expanded="false" data-toggle="dropdown" class="mb-2 mr-2 dropdown-toggle btn btn-primary">Grid Menu Inside Dropdown</button>
                                            <div tabindex="-1" role="menu" aria-hidden="true" class="dropdown-menu-lg dropdown-menu rm-pointers">
                                                <div class="dropdown-menu-header">
                                                    <div class="dropdown-menu-header-inner bg-primary">
                                                        <div class="menu-header-image" style="background-image: url('assets/images/dropdown-header/abstract1.jpg');"></div>
                                                        <div class="menu-header-content">
                                                            <h5 class="menu-header-title">Settings</h5>
                                                            <h6 class="menu-header-subtitle">Manage all of your options</h6>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="grid-menu grid-menu-3col">
                                                    <div class="no-gutters row">
                                                        <div class="col-sm-6 col-xl-4">
                                                            <button class="btn-icon-vertical btn-transition btn btn-outline-primary">
                                                                <i class="lnr-license btn-icon-wrapper"> </i>Primary
                                                            </button>
                                                        </div>
                                                        <div class="col-sm-6 col-xl-4">
                                                            <button class="btn-icon-vertical btn-transition btn btn-outline-secondary">
                                                                <i class="lnr-map btn-icon-wrapper"> </i>Secondary
                                                            </button>
                                                        </div>
                                                        <div class="col-sm-6 col-xl-4">
                                                            <button class="btn-icon-vertical btn-transition btn btn-outline-success">
                                                                <i class="lnr-music-note btn-icon-wrapper"> </i>Success
                                                            </button>
                                                        </div>
                                                        <div class="col-sm-6 col-xl-4">
                                                            <button class="btn-icon-vertical btn-transition btn btn-outline-info">
                                                                <i class="lnr-heart btn-icon-wrapper"> </i>Info
                                                            </button>
                                                        </div>
                                                        <div class="col-sm-6 col-xl-4">
                                                            <button class="btn-icon-vertical btn-transition btn btn-outline-warning">
                                                                <i class="lnr-magic-wand btn-icon-wrapper"> </i>Warning
                                                            </button>
                                                        </div>
                                                        <div class="col-sm-6 col-xl-4">
                                                            <button class="btn-icon-vertical btn-transition btn btn-outline-danger">
                                                                <i class="lnr-lighter btn-icon-wrapper"> </i>Danger
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>
                                                <ul class="nav flex-column">
                                                    <li class="nav-item-divider nav-item"></li>
                                                    <li class="nav-item-btn text-right nav-item">
                                                        <button class="btn-pill btn btn-success btn-sm">Save</button>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="main-card mb-3 card">
                                <div class="card-body"><h5 class="card-title">Grid Menu Two Columns</h5>
                                    <div class="grid-menu grid-menu-2col">
                                        <div class="no-gutters row">
                                            <div class="col-sm-6">
                                                <button class="btn-icon-vertical btn-square btn-transition btn btn-outline-primary">
                                                    <i class="lnr-license btn-icon-wrapper"> </i>Primary
                                                </button>
                                            </div>
                                            <div class="col-sm-6">
                                                <button class="btn-icon-vertical btn-square btn-transition btn btn-outline-secondary">
                                                    <i class="lnr-map btn-icon-wrapper"> </i>Secondary
                                                </button>
                                            </div>
                                            <div class="col-sm-6">
                                                <button class="btn-icon-vertical btn-square btn-transition btn btn-outline-success">
                                                    <i class="lnr-music-note btn-icon-wrapper"> </i>Success
                                                </button>
                                            </div>
                                            <div class="col-sm-6">
                                                <button class="btn-icon-vertical btn-square btn-transition btn btn-outline-info">
                                                    <i class="lnr-heart btn-icon-wrapper"> </i>Info
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="divider"></div>
                                    <div class="text-center">
                                        <div class="dropdown">
                                            <button type="button" aria-haspopup="true" aria-expanded="false" data-toggle="dropdown" class="mb-2 mr-2 dropdown-toggle btn btn-primary">Grid Menu Inside Dropdown</button>
                                            <div tabindex="-1" role="menu" aria-hidden="true" class="dropdown-menu-lg dropdown-menu rm-pointers">
                                                <div class="dropdown-menu-header">
                                                    <div class="dropdown-menu-header-inner bg-primary">
                                                        <div class="menu-header-image" style="background-image: url('assets/images/dropdown-header/abstract2.jpg');"></div>
                                                        <div class="menu-header-content">
                                                            <h5 class="menu-header-title">Settings</h5>
                                                            <h6 class="menu-header-subtitle">Manage all of your options</h6>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="grid-menu grid-menu-2col">
                                                    <div class="no-gutters row">
                                                        <div class="col-sm-6">
                                                            <button class="btn-icon-vertical btn-transition btn btn-outline-primary">
                                                                <i class="lnr-license btn-icon-wrapper"> </i>Primary
                                                            </button>
                                                        </div>
                                                        <div class="col-sm-6">
                                                            <button class="btn-icon-vertical btn-transition btn btn-outline-secondary">
                                                                <i class="lnr-map btn-icon-wrapper"> </i>Secondary
                                                            </button>
                                                        </div>
                                                        <div class="col-sm-6">
                                                            <button class="btn-icon-vertical btn-transition btn btn-outline-success">
                                                                <i class="lnr-music-note btn-icon-wrapper"> </i>Success
                                                            </button>
                                                        </div>
                                                        <div class="col-sm-6">
                                                            <button class="btn-icon-vertical btn-transition btn btn-outline-info">
                                                                <i class="lnr-heart btn-icon-wrapper"> </i>Info
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>
                                                <ul class="nav flex-column">
                                                    <li class="nav-item-divider nav-item"></li>
                                                    <li class="nav-item-btn text-right nav-item">
                                                        <button class="btn-pill btn btn-success btn-sm">Save</button>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="main-card mb-3 card">
                                <div class="card-body"><h5 class="card-title">Grid Menu Bigger Two Columns</h5>
                                    <div class="grid-menu grid-menu-2col">
                                        <div class="no-gutters row">
                                            <div class="col-sm-6">
                                                <button class="btn-icon-vertical btn-square btn-transition btn btn-outline-link">
                                                    <i class="lnr-license btn-icon-wrapper btn-icon-lg mb-3"> </i>Primary
                                                </button>
                                            </div>
                                            <div class="col-sm-6">
                                                <button class="btn-icon-vertical btn-square btn-transition btn btn-outline-link">
                                                    <i class="lnr-map btn-icon-wrapper btn-icon-lg mb-3"> </i>Secondary
                                                </button>
                                            </div>
                                            <div class="col-sm-6">
                                                <button class="btn-icon-vertical btn-square btn-transition btn btn-outline-link">
                                                    <i class="lnr-music-note btn-icon-wrapper btn-icon-lg mb-3"> </i>Success
                                                </button>
                                            </div>
                                            <div class="col-sm-6">
                                                <button class="btn-icon-vertical btn-square btn-transition btn btn-outline-link">
                                                    <i class="lnr-heart btn-icon-wrapper btn-icon-lg mb-3"> </i>Info
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="divider"></div>
                                    <div class="text-center">
                                        <div class="dropdown">
                                            <button type="button" aria-haspopup="true" aria-expanded="false" data-toggle="dropdown" class="mb-2 mr-2 dropdown-toggle btn btn-primary">Grid Menu Inside Dropdown</button>
                                            <div tabindex="-1" role="menu" aria-hidden="true" class="dropdown-menu-xl dropdown-menu rm-pointers">
                                                <div class="dropdown-menu-header">
                                                    <div class="dropdown-menu-header-inner bg-primary">
                                                        <div class="menu-header-image" style="background-image: url('assets/images/dropdown-header/abstract3.jpg');"></div>
                                                        <div class="menu-header-content">
                                                            <h5 class="menu-header-title">Settings</h5>
                                                            <h6 class="menu-header-subtitle">Manage all of your options</h6>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="grid-menu grid-menu-xl grid-menu-2col">
                                                    <div class="no-gutters row">
                                                        <div class="col-sm-6">
                                                            <button class="btn-icon-vertical btn-square btn-transition btn btn-outline-link">
                                                                <i class="lnr-license btn-icon-wrapper btn-icon-lg mb-3"> </i>Primary
                                                            </button>
                                                        </div>
                                                        <div class="col-sm-6">
                                                            <button class="btn-icon-vertical btn-square btn-transition btn btn-outline-link">
                                                                <i class="lnr-map btn-icon-wrapper btn-icon-lg mb-3"> </i>Secondary
                                                            </button>
                                                        </div>
                                                        <div class="col-sm-6">
                                                            <button class="btn-icon-vertical btn-square btn-transition btn btn-outline-link">
                                                                <i class="lnr-music-note btn-icon-wrapper btn-icon-lg mb-3"> </i>Success
                                                            </button>
                                                        </div>
                                                        <div class="col-sm-6">
                                                            <button class="btn-icon-vertical btn-square btn-transition btn btn-outline-link">
                                                                <i class="lnr-heart btn-icon-wrapper btn-icon-lg mb-3"> </i>Info
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>
                                                <ul class="nav flex-column">
                                                    <li class="nav-item-divider nav-item"></li>
                                                    <li class="nav-item-btn text-right nav-item">
                                                        <button class="btn-pill btn btn-success btn-sm">Save</button>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {{> AppFooter/footer }}
    </div>
{{/ base }}