<div class="offcanvas offcanvas-end overflow-hidden" tabindex="-1" id="theme-settings-offcanvas">
    <div class="d-flex justify-content-between text-bg-primary gap-2 p-3" style="background-image: url(assets/images/settings-bg.png)">
        <div>
            <h5 class="mb-1 fw-bold text-white text-uppercase">Admin Customizer</h5>
            <p class="text-white text-opacity-75 fst-italic fw-medium mb-0">Easily configure layout, styles, and preferences for your admin interface.</p>
        </div>

        <div class="flex-grow-0">
            <button type="button" class="d-block btn btn-sm bg-white bg-opacity-25 text-white rounded-circle btn-icon" data-bs-dismiss="offcanvas">
                <i class="ti ti-x fs-lg"></i>
            </button>
        </div>
    </div>

    <div class="offcanvas-body theme-customizer-bar p-0 h-100" data-simplebar="">
        <div id="skin" class="p-3 border-bottom border-dashed">
            <h5 class="mb-3 fw-bold">Select Theme</h5>
            <div class="row g-3">
                <div class="col-6" id="skin-default">
                    <div class="form-check card-radio">
                        <input class="form-check-input" type="radio" name="data-skin" id="demo-skin-default" value="default" />
                        <label class="form-check-label p-0 w-100" for="demo-skin-default">
                            <img src="assets/images/layouts/skin-default.png" alt="layout-img" class="img-fluid" />
                        </label>
                    </div>
                    <h5 class="text-center text-muted mt-2 mb-0">Default</h5>
                </div>

                <div class="col-6" id="skin-luxe">
                    <div class="form-check card-radio">
                        <input class="form-check-input" type="radio" name="data-skin" id="demo-skin-luxe" value="luxe" />
                        <label class="form-check-label p-0 w-100" for="demo-skin-luxe">
                            <img src="assets/images/layouts/skin-luxe.png" alt="layout-img" class="img-fluid" />
                        </label>
                    </div>
                    <h5 class="text-center text-muted mt-2 mb-0">Luxe</h5>
                </div>

                <div class="col-6" id="skin-neon">
                    <div class="form-check card-radio">
                        <input class="form-check-input" type="radio" name="data-skin" id="demo-skin-neon" value="neon" />
                        <label class="form-check-label p-0 w-100" for="demo-skin-neon">
                            <img src="assets/images/layouts/skin-neon.png" alt="layout-img" class="img-fluid" />
                        </label>
                    </div>
                    <h5 class="text-center text-muted mt-2 mb-0">Neon</h5>
                </div>

                <div class="col-6" id="skin-retro">
                    <div class="form-check card-radio">
                        <input class="form-check-input" type="radio" name="data-skin" id="demo-skin-retro" value="retro" />
                        <label class="form-check-label p-0 w-100" for="demo-skin-retro">
                            <img src="assets/images/layouts/skin-retro.png" alt="layout-img" class="img-fluid" />
                        </label>
                    </div>
                    <h5 class="text-center text-muted mt-2 mb-0">Retro</h5>
                </div>

                <div class="col-6" id="skin-pixel">
                    <div class="form-check card-radio">
                        <input class="form-check-input" type="radio" name="data-skin" id="demo-skin-pixel" value="pixel" />
                        <label class="form-check-label p-0 w-100" for="demo-skin-pixel">
                            <img src="assets/images/layouts/skin-pixel.png" alt="layout-img" class="img-fluid" />
                        </label>
                    </div>
                    <h5 class="text-center text-muted mt-2 mb-0">Pixel</h5>
                </div>

                <div class="col-6" id="skin-galaxy">
                    <div class="form-check card-radio">
                        <input class="form-check-input" type="radio" name="data-skin" id="demo-skin-galaxy" value="galaxy" />
                        <label class="form-check-label p-0 w-100" for="demo-skin-galaxy">
                            <img src="assets/images/layouts/skin-galaxy.png" alt="layout-img" class="img-fluid" />
                        </label>
                    </div>
                    <h5 class="text-center text-muted mt-2 mb-0">Galaxy</h5>
                </div>

                <div class="col-6" id="skin-material">
                    <div class="form-check card-radio">
                        <input class="form-check-input" type="radio" name="data-skin" id="demo-skin-material" value="material" />
                        <label class="form-check-label p-0 w-100" for="demo-skin-material">
                            <img src="assets/images/layouts/skin-material.png" alt="layout-img" class="img-fluid" />
                        </label>
                    </div>
                    <h5 class="text-center text-muted mt-2 mb-0">Material</h5>
                </div>

                <div class="col-6" id="skin-minimal">
                    <div class="form-check card-radio">
                        <input class="form-check-input" type="radio" name="data-skin" id="demo-skin-minimal" value="minimal" />
                        <label class="form-check-label p-0 w-100" for="demo-skin-minimal">
                            <img src="assets/images/layouts/skin-minimal.png" alt="layout-img" class="img-fluid" />
                        </label>
                    </div>
                    <h5 class="text-center text-muted mt-2 mb-0">Minimal</h5>
                </div>

                <div class="col-6" id="skin-modern">
                    <div class="form-check card-radio">
                        <input class="form-check-input" type="radio" name="data-skin" id="demo-skin-modern" value="modern" />
                        <label class="form-check-label p-0 w-100" for="demo-skin-modern">
                            <img src="assets/images/layouts/skin-modern.png" alt="layout-img" class="img-fluid" />
                        </label>
                    </div>
                    <h5 class="text-center text-muted mt-2 mb-0">Modern</h5>
                </div>

                <div class="col-6" id="skin-saas">
                    <div class="form-check card-radio">
                        <input class="form-check-input" type="radio" name="data-skin" id="demo-skin-saas" value="saas" />
                        <label class="form-check-label p-0 w-100" for="demo-skin-saas">
                            <img src="assets/images/layouts/skin-saas.png" alt="layout-img" class="img-fluid" />
                        </label>
                    </div>
                    <h5 class="text-center text-muted mt-2 mb-0">Saas</h5>
                </div>

                <div class="col-6" id="skin-flat">
                    <div class="form-check card-radio">
                        <input class="form-check-input" type="radio" name="data-skin" id="demo-skin-flat" value="flat" />
                        <label class="form-check-label p-0 w-100" for="demo-skin-flat">
                            <img src="assets/images/layouts/skin-flat.png" alt="layout-img" class="img-fluid" />
                        </label>
                    </div>
                    <h5 class="text-center text-muted mt-2 mb-0">Flat</h5>
                </div>
            </div>
        </div>

        <div id="theme" class="p-3 border-bottom border-dashed">
            <h5 class="mb-3 fw-bold">Color Scheme</h5>
            <div class="row">
                <div class="col-4" id="theme-light">
                    <div class="form-check card-radio">
                        <input class="form-check-input" type="radio" name="data-bs-theme" id="layout-color-light" value="light" />
                        <label class="form-check-label p-0 w-100" for="layout-color-light">
                            <img src="assets/images/layouts/theme-light.png" alt="layout-img" class="img-fluid" />
                        </label>
                    </div>
                    <h5 class="text-center text-muted mt-2 mb-0">Light</h5>
                </div>

                <div class="col-4" id="theme-dark">
                    <div class="form-check card-radio">
                        <input class="form-check-input" type="radio" name="data-bs-theme" id="layout-color-dark" value="dark" />
                        <label class="form-check-label p-0 w-100" for="layout-color-dark">
                            <img src="assets/images/layouts/theme-dark.png" alt="layout-img" class="img-fluid" />
                        </label>
                    </div>
                    <h5 class="text-center text-muted mt-2 mb-0">Dark</h5>
                </div>

                <div class="col-4" id="theme-system">
                    <div class="form-check card-radio">
                        <input class="form-check-input" type="radio" name="data-bs-theme" id="layout-color-system" value="system" />
                        <label class="form-check-label p-0 w-100" for="layout-color-system">
                            <img src="assets/images/layouts/theme-system.png" alt="layout-img" class="img-fluid" />
                        </label>
                    </div>
                    <h5 class="text-center text-muted mt-2 mb-0">System</h5>
                </div>
            </div>
        </div>

        <div id="topbar-color" class="p-3 border-bottom border-dashed">
            <h5 class="mb-3 fw-bold">Topbar Color</h5>

            <div class="row g-3">
                <div class="col-4" id="topbar-color-light">
                    <div class="form-check card-radio">
                        <input class="form-check-input" type="radio" name="data-topbar-color" id="layout-topbar-color-light" value="light" />
                        <label class="form-check-label p-0 w-100" for="layout-topbar-color-light">
                            <img src="assets/images/layouts/topbar-color-light.png" alt="layout-img" class="img-fluid" />
                        </label>
                    </div>
                    <h5 class="text-center text-muted mt-2 mb-0">Light</h5>
                </div>

                <div class="col-4" id="topbar-color-dark">
                    <div class="form-check card-radio">
                        <input class="form-check-input" type="radio" name="data-topbar-color" id="layout-topbar-color-dark" value="dark" />
                        <label class="form-check-label p-0 w-100" for="layout-topbar-color-dark">
                            <img src="assets/images/layouts/topbar-color-dark.png" alt="layout-img" class="img-fluid" />
                        </label>
                    </div>
                    <h5 class="fs-sm text-center text-muted mt-2 mb-0">Dark</h5>
                </div>

                <div class="col-4" id="topbar-color-gray">
                    <div class="form-check card-radio">
                        <input class="form-check-input" type="radio" name="data-topbar-color" id="layout-topbar-color-gray" value="gray" />
                        <label class="form-check-label p-0 w-100" for="layout-topbar-color-gray">
                            <img src="assets/images/layouts/topbar-color-gray.png" alt="layout-img" class="img-fluid" />
                        </label>
                    </div>
                    <h5 class="fs-sm text-center text-muted mt-2 mb-0">Gray</h5>
                </div>

                <div class="col-4" id="topbar-color-gradient">
                    <div class="form-check card-radio">
                        <input class="form-check-input" type="radio" name="data-topbar-color" id="layout-topbar-color-gradient" value="gradient" />
                        <label class="form-check-label p-0 w-100" for="layout-topbar-color-gradient">
                            <img src="assets/images/layouts/topbar-color-gradient.png" alt="layout-img" class="img-fluid" />
                        </label>
                    </div>
                    <h5 class="fs-sm text-center text-muted mt-2 mb-0">Gradient</h5>
                </div>
            </div>
        </div>

        <div id="sidenav-color" class="p-3 border-bottom border-dashed">
            <h5 class="mb-3 fw-bold">Sidenav Color</h5>

            <div class="row g-3">
                <div class="col-4" id="sidenav-color-light">
                    <div class="form-check sidebar-setting card-radio">
                        <input class="form-check-input" type="radio" name="data-menu-color" id="layout-sidenav-color-light" value="light" />
                        <label class="form-check-label p-0 w-100" for="layout-sidenav-color-light">
                            <img src="assets/images/layouts/sidenav-color-light.png" alt="layout-img" class="img-fluid" />
                        </label>
                    </div>
                    <h5 class="fs-sm text-center text-muted mt-2 mb-0">Light</h5>
                </div>

                <div class="col-4" id="sidenav-color-dark">
                    <div class="form-check sidebar-setting card-radio">
                        <input class="form-check-input" type="radio" name="data-menu-color" id="layout-sidenav-color-dark" value="dark" />
                        <label class="form-check-label p-0 w-100" for="layout-sidenav-color-dark">
                            <img src="assets/images/layouts/sidenav-color-dark.png" alt="layout-img" class="img-fluid" />
                        </label>
                    </div>
                    <h5 class="fs-sm text-center text-muted mt-2 mb-0">Dark</h5>
                </div>

                <div class="col-4" id="sidenav-color-gray">
                    <div class="form-check sidebar-setting card-radio">
                        <input class="form-check-input" type="radio" name="data-menu-color" id="layout-sidenav-color-gray" value="gray" />
                        <label class="form-check-label p-0 w-100" for="layout-sidenav-color-gray">
                            <img src="assets/images/layouts/sidenav-color-gray.png" alt="layout-img" class="img-fluid" />
                        </label>
                    </div>
                    <h5 class="fs-sm text-center text-muted mt-2 mb-0">Gray</h5>
                </div>

                <div class="col-4" id="sidenav-color-gradient">
                    <div class="form-check sidebar-setting card-radio">
                        <input class="form-check-input" type="radio" name="data-menu-color" id="layout-sidenav-color-gradient" value="gradient" />
                        <label class="form-check-label p-0 w-100" for="layout-sidenav-color-gradient">
                            <img src="assets/images/layouts/sidenav-color-gradient.png" alt="layout-img" class="img-fluid" />
                        </label>
                    </div>
                    <h5 class="fs-sm text-center text-muted mt-2 mb-0">Gradient</h5>
                </div>
                <div class="col-4" id="sidenav-color-image">
                    <div class="form-check sidebar-setting card-radio">
                        <input class="form-check-input" type="radio" name="data-menu-color" id="layout-sidenav-color-image" value="image" />
                        <label class="form-check-label p-0 w-100" for="layout-sidenav-color-image">
                            <img src="assets/images/layouts/sidenav-color-image.png" alt="layout-img" class="img-fluid" />
                        </label>
                    </div>
                    <h5 class="fs-sm text-center text-muted mt-2 mb-0">Image</h5>
                </div>
            </div>
        </div>

        <div id="sidenav-size" class="p-3 border-bottom border-dashed">
            <h5 class="mb-3 fw-bold">Sidebar Size</h5>

            <div class="row g-3">
                <div class="col-4" id="sidenav-size-default">
                    <div class="form-check sidebar-setting card-radio">
                        <input class="form-check-input" type="radio" name="data-sidenav-size" id="layout-sidenav-size-default" value="default" />
                        <label class="form-check-label p-0 w-100" for="layout-sidenav-size-default">
                            <img src="assets/images/layouts/sidenav-size-default.png" alt="layout-img" class="img-fluid" />
                        </label>
                    </div>
                    <h5 class="mb-0 text-center text-muted mt-2">Default</h5>
                </div>

                <div class="col-4" id="sidenav-size-compact">
                    <div class="form-check sidebar-setting card-radio">
                        <input class="form-check-input" type="radio" name="data-sidenav-size" id="layout-sidenav-size-compact" value="compact" />
                        <label class="form-check-label p-0 w-100" for="layout-sidenav-size-compact">
                            <img src="assets/images/layouts/sidenav-size-compact.png" alt="layout-img" class="img-fluid" />
                        </label>
                    </div>
                    <h5 class="mb-0 text-center text-muted mt-2">Compact</h5>
                </div>

                <div class="col-4" id="sidenav-size-condensed">
                    <div class="form-check sidebar-setting card-radio">
                        <input class="form-check-input" type="radio" name="data-sidenav-size" id="layout-sidenav-size-condensed" value="condensed" />
                        <label class="form-check-label p-0 w-100" for="layout-sidenav-size-condensed">
                            <img src="assets/images/layouts/sidenav-size-condensed.png" alt="layout-img" class="img-fluid" />
                        </label>
                    </div>
                    <h5 class="mb-0 text-center text-muted mt-2">Condensed</h5>
                </div>

                <div class="col-4" id="sidenav-size-on-hover">
                    <div class="form-check sidebar-setting card-radio">
                        <input class="form-check-input" type="radio" name="data-sidenav-size" id="layout-sidenav-size-small-hover" value="on-hover" />
                        <label class="form-check-label p-0 w-100" for="layout-sidenav-size-small-hover">
                            <img src="assets/images/layouts/sidenav-size-on-hover.png" alt="layout-img" class="img-fluid" />
                        </label>
                    </div>
                    <h5 class="mb-0 text-center text-muted mt-2">On Hover</h5>
                </div>

                <div class="col-4" id="sidenav-size-on-hover-active">
                    <div class="form-check sidebar-setting card-radio">
                        <input class="form-check-input" type="radio" name="data-sidenav-size" id="layout-sidenav-size-small-hover-active" value="on-hover-active" />
                        <label class="form-check-label p-0 w-100" for="layout-sidenav-size-small-hover-active">
                            <img src="assets/images/layouts/sidenav-size-on-hover-active.png" alt="layout-img" class="img-fluid" />
                        </label>
                    </div>
                    <h5 class="mb-0 fs-base text-center text-muted mt-2">On Hover - Show</h5>
                </div>

                <div class="col-4" id="sidenav-size-offcanvas">
                    <div class="form-check sidebar-setting card-radio">
                        <input class="form-check-input" type="radio" name="data-sidenav-size" id="layout-sidenav-size-offcanvas" value="offcanvas" />
                        <label class="form-check-label p-0 w-100" for="layout-sidenav-size-offcanvas">
                            <img src="assets/images/layouts/sidenav-size-offcanvas.png" alt="layout-img" class="img-fluid" />
                        </label>
                    </div>
                    <h5 class="mb-0 text-center text-muted mt-2">Offcanvas</h5>
                </div>
            </div>
        </div>

        <div id="width" class="p-3 border-bottom border-dashed">
            <h5 class="mb-3 fw-bold">Layout Width</h5>

            <div class="row g-3">
                <div class="col-4" id="width-fluid">
                    <div class="form-check sidebar-setting card-radio">
                        <input class="form-check-input" type="radio" name="data-layout-width" id="layout-width-fluid" value="fluid" />
                        <label class="form-check-label p-0 w-100" for="layout-width-fluid">
                            <img src="assets/images/layouts/width-fluid.png" alt="layout-img" class="img-fluid" />
                        </label>
                    </div>
                    <h5 class="mb-0 text-center text-muted mt-2">Fluid</h5>
                </div>

                <div class="col-4" id="width-boxed">
                    <div class="form-check sidebar-setting card-radio">
                        <input class="form-check-input" type="radio" name="data-layout-width" id="layout-width-boxed" value="boxed" />
                        <label class="form-check-label p-0 w-100" for="layout-width-boxed">
                            <img src="assets/images/layouts/width-boxed.png" alt="layout-img" class="img-fluid" />
                        </label>
                    </div>
                    <h5 class="mb-0 text-center text-muted mt-2">Boxed</h5>
                </div>
            </div>
        </div>

        <div id="dir" class="p-3 border-bottom border-dashed">
            <h5 class="mb-3 fw-bold">Layout Direction</h5>

            <div class="row g-3">
                <div class="col-4" id="dir-ltr">
                    <div class="form-check sidebar-setting card-radio">
                        <input class="form-check-input" type="radio" name="dir" id="layout-dir-ltr" value="ltr" />
                        <label class="form-check-label p-0 w-100" for="layout-dir-ltr">
                            <img src="assets/images/layouts/dir-ltr.png" alt="layout-img" class="img-fluid" />
                        </label>
                    </div>
                    <h5 class="mb-0 text-center text-muted mt-2">LTR</h5>
                </div>

                <div class="col-4" id="dir-rtl">
                    <div class="form-check sidebar-setting card-radio">
                        <input class="form-check-input" type="radio" name="dir" id="layout-dir-rtl" value="rtl" />
                        <label class="form-check-label p-0 w-100" for="layout-dir-rtl">
                            <img src="assets/images/layouts/dir-rtl.png" alt="layout-img" class="img-fluid" />
                        </label>
                    </div>
                    <h5 class="mb-0 text-center text-muted mt-2">RTL</h5>
                </div>
            </div>
        </div>

        <div id="position" class="p-3 border-bottom border-dashed">
            <div class="d-flex justify-content-between align-items-center">
                <h5 class="fw-bold mb-0">Layout Position</h5>

                <div class="d-flex gap-1">
                    <div id="position-fixed">
                        <input type="radio" class="btn-check" name="data-layout-position" id="layout-position-fixed" value="fixed" />
                        <label class="btn btn-sm btn-soft-warning w-sm" for="layout-position-fixed">Fixed</label>
                    </div>
                    <div id="position-scrollable">
                        <input type="radio" class="btn-check" name="data-layout-position" id="layout-position-scrollable" value="scrollable" />
                        <label class="btn btn-sm btn-soft-warning w-sm ms-0" for="layout-position-scrollable">Scrollable</label>
                    </div>
                </div>
            </div>
        </div>

        <div id="sidenav-user" class="p-3">
            <div class="d-flex justify-content-between align-items-center">
                <h5 class="mb-0">
                    <label class="fw-bold m-0" for="sidebaruser-check">Sidebar User Info</label>
                </h5>
                <div class="form-check form-switch fs-lg">
                    <input type="checkbox" class="form-check-input" name="sidebar-user" id="sidebaruser-check" />
                </div>
            </div>
        </div>
    </div>

    <div class="offcanvas-footer border-top p-3 text-center">
        <div class="row justify-content-end">
            <div class="col-6">
                <a href="https://wrapmarket.com/item/inspinia-multipurpose-admin-dashboard-template-WB0R5L90S?via=webapp" class="btn btn-success fw-semibold py-2 w-100" target="_blank"><i class="ti ti-basket me-2 fs-md"></i> Buy Now</a>
            </div>
            <div class="col-6">
                <button type="button" class="btn btn-danger fw-semibold py-2 w-100" id="reset-layout"><i class="ti ti-refresh me-2 fs-md"></i> Reset</button>
            </div>
        </div>
    </div>
</div>
<!-- end offcanvas-->
