<!-- Start Switcher -->
<div class="offcanvas offcanvas-end switcher-offacanvas" tabindex="-1" id="switcher-canvas" aria-labelledby="offcanvasRightLabel">
    <div class="offcanvas-header border-bottom d-block p-0">
        <div class="d-flex align-items-center justify-content-between p-3">
            <h5 class="offcanvas-title text-default" id="offcanvasRightLabel">Switcher</h5>
            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <nav class="border-top border-block-start-dashed">
            <div class="nav nav-tabs nav-justified" id="switcher-main-tab" role="tablist">
                <button class="nav-link active" id="switcher-home-tab" data-bs-toggle="tab" data-bs-target="#switcher-home"
                    type="button" role="tab" aria-controls="switcher-home" aria-selected="true">Theme Styles</button>
                <button class="nav-link" id="switcher-profile-tab" data-bs-toggle="tab" data-bs-target="#switcher-profile"
                    type="button" role="tab" aria-controls="switcher-profile" aria-selected="false">Theme Colors</button>
            </div>
        </nav>
    </div>
    <div class="offcanvas-body">
        <div class="tab-content" id="nav-tabContent">
            <div class="tab-pane fade show active border-0" id="switcher-home" role="tabpanel" aria-labelledby="switcher-home-tab"
                tabindex="0">
                <div class="">
                    <p class="switcher-style-head">Directions:</p>
                    <div class="row switcher-style gx-0">
                        <div class="col-4">
                            <div class="form-check switch-select">
                                <label class="form-check-label" for="switcher-ltr">
                                    LTR
                                </label>
                                <input class="form-check-input" type="radio" name="direction" id="switcher-ltr" checked>
                            </div>
                        </div>
                        <div class="col-4">
                            <div class="form-check switch-select">
                                <label class="form-check-label" for="switcher-rtl">
                                    RTL
                                </label>
                                <input class="form-check-input" type="radio" name="direction" id="switcher-rtl">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="">
                    <p class="switcher-style-head">Navigation Styles:</p>
                    <div class="row switcher-style gx-0">
                        <div class="col-4">
                            <div class="form-check switch-select">
                                <label class="form-check-label" for="switcher-vertical">
                                    Vertical
                                </label>
                                <input class="form-check-input" type="radio" name="navigation-style" id="switcher-vertical"
                                    checked>
                            </div>
                        </div>
                        <div class="col-4">
                            <div class="form-check switch-select">
                                <label class="form-check-label" for="switcher-horizontal">
                                    Horizontal
                                </label>
                                <input class="form-check-input" type="radio" name="navigation-style"
                                    id="switcher-horizontal">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="navigation-menu-styles">
                    <p class="switcher-style-head">Vertical & Horizontal Menu Styles:</p>
                    <div class="row switcher-style gx-0 pb-2 gy-2">
                        <div class="col-4">
                            <div class="form-check switch-select">
                                <label class="form-check-label" for="switcher-menu-click">
                                    Menu Click
                                </label>
                                <input class="form-check-input" type="radio" name="navigation-menu-styles"
                                    id="switcher-menu-click">
                            </div>
                        </div>
                        <div class="col-4">
                            <div class="form-check switch-select">
                                <label class="form-check-label" for="switcher-menu-hover">
                                    Menu Hover
                                </label>
                                <input class="form-check-input" type="radio" name="navigation-menu-styles"
                                    id="switcher-menu-hover">
                            </div>
                        </div>
                        <div class="col-4">
                            <div class="form-check switch-select">
                                <label class="form-check-label" for="switcher-icon-click">
                                    Icon Click
                                </label>
                                <input class="form-check-input" type="radio" name="navigation-menu-styles"
                                    id="switcher-icon-click">
                            </div>
                        </div>
                        <div class="col-4">
                            <div class="form-check switch-select">
                                <label class="form-check-label" for="switcher-icon-hover">
                                    Icon Hover
                                </label>
                                <input class="form-check-input" type="radio" name="navigation-menu-styles"
                                    id="switcher-icon-hover">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="sidemenu-layout-styles">
                    <p class="switcher-style-head">Sidemenu Layout Styles:</p>
                    <div class="row switcher-style gx-0 pb-2 gy-2">
                        <div class="col-sm-6">
                            <div class="form-check switch-select">
                                <label class="form-check-label" for="switcher-default-menu">
                                    Default Menu
                                </label>
                                <input class="form-check-input" type="radio" name="sidemenu-layout-styles"
                                    id="switcher-default-menu">
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="form-check switch-select">
                                <label class="form-check-label" for="switcher-closed-menu">
                                    Closed Menu
                                </label>
                                <input class="form-check-input" type="radio" name="sidemenu-layout-styles"
                                    id="switcher-closed-menu">
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="form-check switch-select">
                                <label class="form-check-label" for="switcher-icontext-menu">
                                    Icon Text
                                </label>
                                <input class="form-check-input" type="radio" name="sidemenu-layout-styles"
                                    id="switcher-icontext-menu">
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="form-check switch-select">
                                <label class="form-check-label" for="switcher-icon-overlay">
                                    Icon Overlay
                                </label>
                                <input class="form-check-input" type="radio" name="sidemenu-layout-styles"
                                    id="switcher-icon-overlay">
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="form-check switch-select">
                                <label class="form-check-label" for="switcher-detached">
                                    Detached
                                </label>
                                <input class="form-check-input" type="radio" name="sidemenu-layout-styles"
                                    id="switcher-detached" checked>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="form-check switch-select">
                                <label class="form-check-label" for="switcher-double-menu">
                                    Double Menu
                                </label>
                                <input class="form-check-input" type="radio" name="sidemenu-layout-styles"
                                    id="switcher-double-menu">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="">
                    <p class="switcher-style-head">Layout Width Styles:</p>
                    <div class="row switcher-style gx-0">
                        <div class="col-4">
                            <div class="form-check switch-select">
                                <label class="form-check-label" for="switcher-full-width">
                                    Full Width
                                </label>
                                <input class="form-check-input" type="radio" name="layout-width" id="switcher-full-width"
                                    checked>
                            </div>
                        </div>
                        <div class="col-4">
                            <div class="form-check switch-select">
                                <label class="form-check-label" for="switcher-boxed">
                                    Boxed
                                </label>
                                <input class="form-check-input" type="radio" name="layout-width" id="switcher-boxed">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="">
                    <p class="switcher-style-head">Menu Positions:</p>
                    <div class="row switcher-style gx-0">
                        <div class="col-4">
                            <div class="form-check switch-select">
                                <label class="form-check-label" for="switcher-menu-fixed">
                                    Fixed
                                </label>
                                <input class="form-check-input" type="radio" name="menu-positions" id="switcher-menu-fixed"
                                    checked>
                            </div>
                        </div>
                        <div class="col-4">
                            <div class="form-check switch-select">
                                <label class="form-check-label" for="switcher-menu-scroll">
                                    Scrollable
                                </label>
                                <input class="form-check-input" type="radio" name="menu-positions" id="switcher-menu-scroll">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="">
                    <p class="switcher-style-head">Header Positions:</p>
                    <div class="row switcher-style gx-0">
                        <div class="col-4">
                            <div class="form-check switch-select">
                                <label class="form-check-label" for="switcher-header-fixed">
                                    Fixed
                                </label>
                                <input class="form-check-input" type="radio" name="header-positions"
                                    id="switcher-header-fixed" checked>
                            </div>
                        </div>
                        <div class="col-4">
                            <div class="form-check switch-select">
                                <label class="form-check-label" for="switcher-header-scroll">
                                    Scrollable
                                </label>
                                <input class="form-check-input" type="radio" name="header-positions"
                                    id="switcher-header-scroll">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="">
                    <p class="switcher-style-head">Loader:</p>
                    <div class="row switcher-style gx-0">
                        <div class="col-4">
                            <div class="form-check switch-select">
                                <label class="form-check-label" for="switcher-loader-enable">
                                    Enable
                                </label>
                                <input class="form-check-input" type="radio" name="page-loader"
                                    id="switcher-loader-enable">
                            </div>
                        </div>
                        <div class="col-4">
                            <div class="form-check switch-select">
                                <label class="form-check-label" for="switcher-loader-disable">
                                    Disable
                                </label>
                                <input class="form-check-input" type="radio" name="page-loader"
                                    id="switcher-loader-disable" checked>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tab-pane fade border-0" id="switcher-profile" role="tabpanel" aria-labelledby="switcher-profile-tab" tabindex="0">
                <div>
                    <div class="theme-colors">
                        <p class="switcher-style-head">Theme Primary:</p>
                        <div class="d-flex flex-wrap align-items-center switcher-style">
                            <div class="form-check switch-select me-3">
                                <input class="form-check-input color-input color-primary-1" type="radio"
                                    name="theme-primary" id="switcher-primary">
                            </div>
                            <div class="form-check switch-select me-3">
                                <input class="form-check-input color-input color-primary-2" type="radio"
                                    name="theme-primary" id="switcher-primary1">
                            </div>
                            <div class="form-check switch-select me-3">
                                <input class="form-check-input color-input color-primary-3" type="radio" name="theme-primary"
                                    id="switcher-primary2">
                            </div>
                            <div class="form-check switch-select me-3">
                                <input class="form-check-input color-input color-primary-4" type="radio" name="theme-primary"
                                    id="switcher-primary3">
                            </div>
                            <div class="form-check switch-select me-3">
                                <input class="form-check-input color-input color-primary-5" type="radio" name="theme-primary"
                                    id="switcher-primary4">
                            </div>
                            <div class="form-check switch-select ps-0 mt-1 color-primary-light">
                                <div class="theme-container-primary"></div>
                                <div class="pickr-container-primary"  onchange="updateChartColor(this.value)"></div>
                            </div>
                        </div>
                    </div>
                    <div class="pattern-image mb-3">
                        <p class="switcher-style-head">Background Patterns:</p>
                        <div class="d-flex flex-wrap align-items-center switcher-style">
                            <div class="form-check switch-select m-2">
                                <input class="form-check-input patternimage-input bg-pattern1" type="radio"
                                    name="background-pattern" id="switcher-pattern-img">
                            </div>
                            <div class="form-check switch-select m-2">
                                <input class="form-check-input patternimage-input bg-pattern2" type="radio"
                                    name="background-pattern" id="switcher-pattern-img1">
                            </div>
                            <div class="form-check switch-select m-2">
                                <input class="form-check-input patternimage-input bg-pattern3" type="radio" name="background-pattern"
                                    id="switcher-pattern-img2">
                            </div>
                            <div class="form-check switch-select m-2">
                                <input class="form-check-input patternimage-input bg-pattern4" type="radio"
                                    name="background-pattern" id="switcher-pattern-img3" checked>
                            </div>
                            <div class="form-check switch-select m-2">
                                <input class="form-check-input patternimage-input bg-pattern5" type="radio"
                                    name="background-pattern" id="switcher-pattern-img4">
                            </div>
                            <div class="form-check switch-select m-2">
                                <input class="form-check-input patternimage-input bg-pattern6" type="radio"
                                    name="background-pattern" id="switcher-pattern-img5">
                            </div>
                            <div class="form-check switch-select m-2">
                                <input class="form-check-input patternimage-input bg-pattern7" type="radio"
                                    name="background-pattern" id="switcher-pattern-img6">
                            </div>
                            <div class="form-check switch-select m-2">
                                <input class="form-check-input patternimage-input bg-pattern8" type="radio"
                                    name="background-pattern" id="switcher-pattern-img7">
                            </div>
                            <div class="form-check switch-select m-2">
                                <input class="form-check-input patternimage-input bg-pattern9" type="radio"
                                    name="background-pattern" id="switcher-pattern-img8">
                            </div>
                            <div class="form-check switch-select m-2">
                                <input class="form-check-input patternimage-input bg-pattern10" type="radio"
                                    name="background-pattern" id="switcher-pattern-img9">
                            </div>
                        </div>
                    </div>
                    <div class="card-style mb-3">
                        <p class="switcher-style-head">Card Styling:</p>
                        <div class="d-flex flex-wrap align-items-center switcher-style">
                            <div class="form-check switch-select m-2">
                                <input class="form-check-input card-input card-style1" type="radio"
                                    name="card-style" id="switcher-card-style" checked>
                            </div>
                            <div class="form-check switch-select m-2">
                                <input class="form-check-input card-input card-style2" type="radio"
                                    name="card-style" id="switcher-card-style1">
                            </div>
                            <div class="form-check switch-select m-2">
                                <input class="form-check-input card-input card-style3" type="radio" name="card-style"
                                    id="switcher-card-style2">
                            </div>
                            <div class="form-check switch-select m-2">
                                <input class="form-check-input card-input card-style4" type="radio"
                                    name="card-style" id="switcher-card-style3">
                            </div>
                            <div class="form-check switch-select m-2">
                                <input class="form-check-input card-input card-style5" type="radio"
                                    name="card-style" id="switcher-card-style4">
                            </div>
                            <div class="form-check switch-select m-2">
                                <input class="form-check-input card-input card-style6" type="radio"
                                    name="card-style" id="switcher-card-style5">
                            </div>
                            <div class="form-check switch-select m-2">
                                <input class="form-check-input card-input card-style7" type="radio"
                                    name="card-style" id="switcher-card-style6">
                            </div>
                            <div class="form-check switch-select m-2">
                                <input class="form-check-input card-input card-style8" type="radio"
                                    name="card-style" id="switcher-card-style7">
                            </div>
                            <div class="form-check switch-select m-2">
                                <input class="form-check-input card-input card-style9" type="radio"
                                    name="card-style" id="switcher-card-style8">
                            </div>
                            <div class="form-check switch-select m-2">
                                <input class="form-check-input card-input card-style10" type="radio"
                                    name="card-style" id="switcher-card-style9">
                            </div>
                        </div>
                    </div>
                    <div class="card-background mb-3">
                        <p class="switcher-style-head">Card Background:</p>
                        <div class="d-flex flex-wrap align-items-center switcher-style">
                            <div class="form-check switch-select m-2">
                                <input class="form-check-input card-input card-background1" type="radio"
                                    name="card-background" id="switcher-card-background" checked>
                            </div>
                            <div class="form-check switch-select m-2">
                                <input class="form-check-input card-input card-background2" type="radio"
                                    name="card-background" id="switcher-card-background1">
                            </div>
                            <div class="form-check switch-select m-2">
                                <input class="form-check-input card-input card-background3" type="radio" name="card-background"
                                    id="switcher-card-background2">
                            </div>
                            <div class="form-check switch-select m-2">
                                <input class="form-check-input card-input card-background4" type="radio"
                                    name="card-background" id="switcher-card-background3">
                            </div>
                            <div class="form-check switch-select m-2">
                                <input class="form-check-input card-input card-background5" type="radio"
                                    name="card-background" id="switcher-card-background4">
                            </div>
                            <div class="form-check switch-select m-2">
                                <input class="form-check-input card-input card-background6" type="radio"
                                    name="card-background" id="switcher-card-background5">
                            </div>
                            <div class="form-check switch-select m-2">
                                <input class="form-check-input card-input card-background7" type="radio"
                                    name="card-background" id="switcher-card-background6">
                            </div>
                            <div class="form-check switch-select m-2">
                                <input class="form-check-input card-input card-background8" type="radio"
                                    name="card-background" id="switcher-card-background7">
                            </div>
                            <div class="form-check switch-select m-2">
                                <input class="form-check-input card-input card-background9" type="radio"
                                    name="card-background" id="switcher-card-background8">
                            </div>
                        </div>
                    </div>
                    <div class="menu-image mb-3">
                        <p class="switcher-style-head">Menu With Background Image:</p>
                        <div class="d-flex flex-wrap align-items-center switcher-style">
                            <div class="form-check switch-select m-2">
                                <input class="form-check-input bgimage-input bg-img1" type="radio"
                                    name="theme-background" id="switcher-bg-img">
                            </div>
                            <div class="form-check switch-select m-2">
                                <input class="form-check-input bgimage-input bg-img2" type="radio"
                                    name="theme-background" id="switcher-bg-img1">
                            </div>
                            <div class="form-check switch-select m-2">
                                <input class="form-check-input bgimage-input bg-img3" type="radio" name="theme-background"
                                    id="switcher-bg-img2">
                            </div>
                            <div class="form-check switch-select m-2">
                                <input class="form-check-input bgimage-input bg-img4" type="radio"
                                    name="theme-background" id="switcher-bg-img3">
                            </div>
                            <div class="form-check switch-select m-2">
                                <input class="form-check-input bgimage-input bg-img5" type="radio"
                                    name="theme-background" id="switcher-bg-img4">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="d-flex justify-content-between canvas-footer flex-sm-nowrap flex-wrap gap-2"> 
                <a href="javascript:void(0);" id="reset-all" class="btn btn-danger flex-fill">Reset</a> 
            </div>
        </div>
    </div>
</div>
<!-- End Switcher -->

