diff --git a/Frontend/_graphManagement.html b/Frontend/_graphManagement.html
new file mode 100644
index 0000000..4ab4c59
--- /dev/null
+++ b/Frontend/_graphManagement.html
@@ -0,0 +1,201 @@
+<main id="js-page-content" role="main" class="page-content">
+
+    <div class="row">
+        <div class="col-sm-12 col-xl-12">
+
+            <h1 class="p-2 mb-0">圖資管理</h1>
+
+            <div class="row bg-dark p-2">
+                <div class="col-auto">
+                    <div class="btn-group">
+                        <button type="button" class="btn btn-secondary waves-effect waves-themed">建築</button>
+                        <button type="button" class="btn btn-secondary waves-effect waves-themed">電力管線</button>
+                        <button type="button" class="btn btn-secondary waves-effect waves-themed">水力管線</button>
+                        <button type="button" class="btn btn-secondary waves-effect waves-themed">控制系統</button>
+                    </div>
+                </div>
+
+                <div class="col-auto">
+                    <div class="form-group">
+                        <input type="text" id="simpleinput" class="form-control" placeholder="關鍵字">
+                    </div>
+                </div>
+
+                <div class="col-auto">
+                    <a href="#" class="btn btn-info">查詢</a>
+                </div>
+                <hr>
+            </div>
+
+            <div class="row bg-dark p-2 mb-5 align-items-center">
+                <div class="col-auto">
+                    <a href="#" class="btn btn-info">全選</a>
+                </div>
+
+                <div class="col-auto">
+                    <div class="frame-wrap">
+                        <div class="custom-control custom-checkbox custom-control-inline">
+                            <input type="checkbox" class="custom-control-input" id="defaultInline1">
+                            <label class="custom-control-label" for="defaultInline1">施工詳圖</label>
+                        </div>
+                        <div class="custom-control custom-checkbox custom-control-inline">
+                            <input type="checkbox" class="custom-control-input" id="defaultInline2">
+                            <label class="custom-control-label" for="defaultInline2">設備規範</label>
+                        </div>
+                        <div class="custom-control custom-checkbox custom-control-inline">
+                            <input type="checkbox" class="custom-control-input" id="defaultInline3">
+                            <label class="custom-control-label" for="defaultInline3">工程介面圖說</label>
+                        </div>
+                        <div class="custom-control custom-checkbox custom-control-inline">
+                            <input type="checkbox" class="custom-control-input" id="defaultInline4">
+                            <label class="custom-control-label" for="defaultInline4">門禁規範</label>
+                        </div>
+                        <div class="custom-control custom-checkbox custom-control-inline">
+                            <input type="checkbox" class="custom-control-input" id="defaultInline5">
+                            <label class="custom-control-label" for="defaultInline5">監控平面圖</label>
+                        </div>
+                        <div class="custom-control custom-checkbox custom-control-inline">
+                            <input type="checkbox" class="custom-control-input" id="defaultInline6">
+                            <label class="custom-control-label" for="defaultInline6">其它</label>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="row">
+                <div class="mb-3">
+                    <a href="#" class="btn btn-success">+ 上傳</a>
+                </div>
+
+                <table class="table table-bordered table-striped text-center m-0">
+                    <thead class="thead-themed">
+                        <tr>
+                            <th>圖號</th>
+                            <th>圖名</th>
+                            <th>原設計</th>
+                            <th>竣工圖</th>
+                            <th>功能</th>
+                        </tr>
+                    </thead>
+
+                    <tbody>
+                        <tr>
+                            <td>TEST03</td>
+                            <td>TEST03</td>
+                            <td>A-01.dwg</td>
+                            <td></td>
+                            <td>
+                                <a href="#" class="btn btn-info">編輯</a>
+                                <a href="#" class="btn btn-danger">刪除</a>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>TEST06</td>
+                            <td>TEST06</td>
+                            <td>A-01.dwg</td>
+                            <td>AS-01.dwg</td>
+                            <td>
+                                <a href="#" class="btn btn-info">編輯</a>
+                                <a href="#" class="btn btn-danger">刪除</a>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+
+        </div>
+    </div>
+
+</main>
+
+<!-- TEST Button trigger modal -->
+<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#staticBackdrop">
+    Launch static backdrop modal
+</button>
+
+<div class="mb-3"> <a href="#" class="btn btn-success" data-toggle="modal" data-target="#accManModal">+ 新增</a>
+</div>
+
+<div class="modal fade" id="accManModal" tabindex="-1" role="dialog" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h4 class="modal-title">
+                    人員基本資料新增 / 修改
+                </h4>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true"><i class="fal fa-times"></i></span>
+                </button>
+            </div>
+            <form id="accManForm">
+                <div class="modal-body">
+                    <div class="row">
+                        <div class="col-md-6">
+                            <div class="form-group">
+                                <label class="form-label" for="inpEmail">Email</label>
+                                <input type="email" id="inpEmail" name="inpEmail" class="form-control"
+                                    placeholder="Email">
+                            </div>
+                        </div>
+                        <div class="col-md-6">
+                            <div class="form-group">
+                                <label class="form-label" for="inpName">姓名</label>
+                                <input type="text" id="inpName" name="inpName" class="form-control">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-dismiss="modal">關閉</button>
+                    <button type="submit" class="btn btn-primary" id="accManSendBtn" e-prevent>儲存</button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
+
+<!-- TEST Modal -->
+<div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1"
+    aria-labelledby="staticBackdropLabel" aria-hidden="true">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body">
+                ...
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                <button type="button" class="btn btn-primary">Understood</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="modal fade modal-backdrop-transparent" id="modal-shortcut" tabindex="-1" role="dialog"
+    aria-labelledby="modal-shortcut" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-top modal-transparent" role="document">
+        <div class="modal-content">
+            <div class="modal-body">
+                <ul class="app-list w-auto h-auto p-0 text-left">
+                    <li>
+                        <a href="intel_introduction.html" class="app-list-item text-white border-0 m-0">
+                            <div class="icon-stack">
+                                <i class="base base-7 icon-stack-3x opacity-100 color-primary-500 "></i>
+                                <i class="base base-7 icon-stack-2x opacity-100 color-primary-300 "></i>
+                                <i class="fal fa-home icon-stack-1x opacity-100 color-white"></i>
+                            </div>
+                            <span class="app-list-name">
+                                Home
+                            </span>
+                        </a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/Frontend/_historyData.html b/Frontend/_historyData.html
new file mode 100644
index 0000000..aedb623
--- /dev/null
+++ b/Frontend/_historyData.html
@@ -0,0 +1,162 @@
+<main id="js-page-content" role="main" class="page-content">
+    <div class="row">
+        <div class="col-sm-12 col-xl-2">
+            <div class="bg-success-900 rounded bg-info-gradient">
+                <div class="d-flex position-relative py-3 px-4">
+                    <i class="fal fa-search color-success-700 position-absolute pos-left fs-lg px-3 py-2 mt-1 ml-4"></i>
+                    <input type="text" id="js_nested_list_filter" class="form-control shadow-inset-1 pl-6 border-success" placeholder="Filter nested items (e.g buttons, chart)">
+                </div>
+                <!-- nav-menu-reset will reset the font colors -->
+                <ul id="js_nested_list" class="nav-menu nav-menu-reset nav-menu-compact bg-success-900 bg-info-gradient mb-sm-4 mb-md-0 rounded" data-nav-accordion="true">
+
+                </ul>
+                <div class="filter-message js-filter-message m-0 text-left pl-4 py-3 fw-500"></div>
+            </div>
+
+        </div>
+        <div class="col-sm-12 col-xl-10">
+            <h1 class="p-2 mb-0">歷史資料瀏覽</h1>
+            <div class="row bg-dark p-2 mb-5">
+                <div class="col-auto">
+                    <div class="btn-group">
+                        <button type="button" class="btn btn-secondary waves-effect waves-themed">日期</button>
+                        <button type="button" class="btn btn-secondary waves-effect waves-themed">日區間</button>
+                        <button type="button" class="btn btn-secondary waves-effect waves-themed">月</button>
+                    </div>
+                </div>
+                <div class="col-auto">
+                    <div class="btn-group">
+                        <button type="button" class="btn btn-secondary waves-effect waves-themed">今天</button>
+                        <button type="button" class="btn btn-secondary waves-effect waves-themed">昨天</button>
+                    </div>
+                </div>
+                <div class="col-auto">
+                    <div class="form-group">
+                        <input class="form-control" id="example-date" type="date" name="date" value="2023-07-23">
+                    </div>
+                </div>
+                <div class="col-auto">
+                    <a href="#" class="btn btn-info">查詢</a>　<a href="#" class="btn btn-info waves-effect waves-themed">
+                        <span class="fal fa-file-excel mr-1"></span>
+                        匯出
+                    </a>
+                </div>
+            </div>
+
+            <div class="row mb-2">
+                <div class="btn-group">
+                    <button type="button" class="btn btn-secondary waves-effect waves-themed">溫度</button>
+                    <button type="button" class="btn btn-secondary waves-effect waves-themed">輸入電壓</button>
+                    <button type="button" class="btn btn-secondary waves-effect waves-themed">輸入電流</button>
+                </div>
+            </div>
+
+            <div class="row">
+                <div class="frame-wrap">
+                    <table class="table table-bordered table-striped text-center m-0">
+                        <thead class="thead-themed">
+                            <tr>
+                                <th>設備名稱</th>
+                                <th>數值</th>
+                                <th>紀錄時間</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td>儲冰設備A01</td>
+                                <td>27.0</td>
+                                <td>2021-08-01 23:55:00</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+
+        </div>
+
+    </div>
+</main>
+
+<script>
+    let sst = '';
+    let mst = '';
+    $(function () {
+        initList();
+
+		// default list filter
+		initApp.listFilter($('#js_default_list'), $('#js_default_list_filter'));
+		// custom response message
+		initApp.listFilter($('#js-list-msg'), $('#js-list-msg-filter'));
+		//accordion filter
+		initApp.listFilter($('#js_list_accordion'), $('#js_list_accordion_filter'));
+		// nested list filter
+		initApp.listFilter($('#js_nested_list'), $('#js_nested_list_filter'));
+		//init navigation
+        initApp.buildNavigation($('#js_nested_list'));
+
+        initData();
+    });
+
+    function initList() {
+        let sendData = {
+			building_tag: pageAct.buiTag
+        }
+		objSendData.Data = sendData;
+        let url = baseApiUrl + "/api/History/GetMainSub";
+		function success(res) {
+            let strHtml = ``;
+
+            $.each(res.data.history_Main_Systems, function (index, val) {
+                console.log(index)
+				strHtml += `<li>
+	                            <a href="#" data-filter-tags="user interface buttons compass action dropdown navigation sidebars" data-maintag="${val.main_system_tag}">
+		                            <span class="nav-link-text">${val.full_name}</span>
+	                            </a>
+                                <ul style="${index == 0 ? `display:block;` : ``}">`;
+                    
+                $.each(val.history_Sub_systems, function (index2, val2) {
+                    strHtml += `<li>
+			                        <a href="#" onClick="getData(${val2.sub_system_tag}, ${val.main_system_tag})" data-filter-tags="user interface buttons" data-subtag="${val2.sub_system_tag}">
+				                        <span class="nav-link-text">
+					                        ${val2.full_name} ${val2.sub_system_tag}
+				                        </span>
+			                        </a>
+		                        </li>`;
+
+                    if (index == 0 && index2 == 0) {
+                        sst = val2.sub_system_tag;
+                        mst = val.main_system_tag;
+					}
+                });
+                strHtml += `</ul> </li>`;
+            });
+
+            $('#js_nested_list').html(strHtml);
+            getData(sst, mst);
+		}
+        ytAjax = new YourTeam.Ajax(url, objSendData, success, null, "POST").send();
+    }
+
+    function initData() {
+		getHistoryDataByBaja("TPE_B1_EE_E4_R2F_NA_WHT_N1_A1",
+			1667232000000,
+			1667232000000,
+			"空調設備",
+			"Mitsubishi_Sup",
+			callbackForHistory);
+	}
+
+    function getData(sst2, mst1)
+    {
+		//getHistoryDataByBaja("TPE_B1_EE_E4_R2F_NA_WHT_N1_A1",
+		//	1667232000000,
+		//	1667232000000,
+		//	"空調設備",
+		//	"Mitsubishi_Sup",
+		//	callbackForHistory);
+	}
+
+    function callBackFromHistory(res) {
+        console.log(res)
+	}
+</script>
\ No newline at end of file
diff --git a/Frontend/index.html b/Frontend/index.html
index 8757584..9bbff08 100644
--- a/Frontend/index.html
+++ b/Frontend/index.html
@@ -8,6 +8,7 @@ Purchase: https://wrapbootstrap.com/theme/smartadmin-responsive-webapp-WB0573SK0
 License: You must have a valid license purchased only from wrapbootstrap.com (link above) in order to legally use this theme for your project.
 -->
 <html lang="zh-hant-TW" class="root-text-lg">
+
 <head>
     <meta charset="utf-8">
     <title>
@@ -62,7 +63,9 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
 
     >>> more settings are described inside documentation page >>>
 -->
-<body class="mod-bg-1 mod-nav-link mod-skin-dark mod-hide-info-card nav-function-top nav-function-fixed mod-lean-subheader desktop chrome webkit pace-done blur">
+
+<body
+    class="mod-bg-1 mod-nav-link mod-skin-dark mod-hide-info-card nav-function-top nav-function-fixed mod-lean-subheader desktop chrome webkit pace-done blur">
     <!-- DOC: script to save and load page settings -->
     <script>
         /**
@@ -126,7 +129,8 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
             <!-- BEGIN Left Aside -->
             <aside class="page-sidebar hidden-lg-up">
                 <div class="page-logo">
-                    <a href="#" class="page-logo-link press-scale-down d-flex align-items-center position-relative" data-toggle="modal" data-target="#modal-shortcut">
+                    <a href="#" class="page-logo-link press-scale-down d-flex align-items-center position-relative"
+                        data-toggle="modal" data-target="#modal-shortcut">
                         <img src="img/logo.png" alt="SmartAdmin WebApp" aria-roledescription="logo">
                         <span class="page-logo-text mr-1">System</span>
                         <span class="position-absolute text-white opacity-50 small pos-top pos-right mr-2 mt-n2"></span>
@@ -137,14 +141,17 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                 <nav id="js-primary-nav" class="primary-nav" role="navigation">
                     <div class="nav-filter">
                         <div class="position-relative">
-                            <input type="text" id="nav_filter_input" placeholder="Filter menu" class="form-control" tabindex="0">
-                            <a href="#" onclick="return false;" class="btn-primary btn-search-close js-waves-off" data-action="toggle" data-class="list-filter-active" data-target=".page-sidebar">
+                            <input type="text" id="nav_filter_input" placeholder="Filter menu" class="form-control"
+                                tabindex="0">
+                            <a href="#" onclick="return false;" class="btn-primary btn-search-close js-waves-off"
+                                data-action="toggle" data-class="list-filter-active" data-target=".page-sidebar">
                                 <i class="fal fa-chevron-up"></i>
                             </a>
                         </div>
                     </div>
                     <div class="info-card">
-                        <img src="img/demo/avatars/avatar-admin.png" class="profile-image rounded-circle" alt="Dr. Codex Lantern">
+                        <img src="img/demo/avatars/avatar-admin.png" class="profile-image rounded-circle"
+                            alt="Dr. Codex Lantern">
                         <div class="info-card-text">
                             <a href="#" class="d-flex align-items-center text-white">
                                 <span class="text-truncate text-truncate-sm d-inline-block">
@@ -154,7 +161,8 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                             <span class="d-inline-block text-truncate text-truncate-sm">Toronto, Canada</span>
                         </div>
                         <img src="img/card-backgrounds/cover-2-lg.png" class="cover" alt="cover">
-                        <a href="#" onclick="return false;" class="pull-trigger-btn" data-action="toggle" data-class="list-filter-active" data-target=".page-sidebar" data-focus="nav_filter_input">
+                        <a href="#" onclick="return false;" class="pull-trigger-btn" data-action="toggle"
+                            data-class="list-filter-active" data-target=".page-sidebar" data-focus="nav_filter_input">
                             <i class="fal fa-angle-down"></i>
                         </a>
                     </div>
@@ -166,23 +174,33 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                             </a>
                             <ul>
                                 <li>
-                                    <a href="intel_analytics_dashboard.html" title="Analytics Dashboard" data-filter-tags="application intel analytics dashboard">
-                                        <span class="nav-link-text" data-i18n="nav.application_intel_analytics_dashboard">Analytics Dashboard</span>
+                                    <a href="intel_analytics_dashboard.html" title="Analytics Dashboard"
+                                        data-filter-tags="application intel analytics dashboard">
+                                        <span class="nav-link-text"
+                                            data-i18n="nav.application_intel_analytics_dashboard">Analytics
+                                            Dashboard</span>
                                     </a>
                                 </li>
                                 <li class="active">
-                                    <a href="intel_marketing_dashboard.html" title="Marketing Dashboard" data-filter-tags="application intel marketing dashboard">
-                                        <span class="nav-link-text" data-i18n="nav.application_intel_marketing_dashboard">Marketing Dashboard</span>
+                                    <a href="intel_marketing_dashboard.html" title="Marketing Dashboard"
+                                        data-filter-tags="application intel marketing dashboard">
+                                        <span class="nav-link-text"
+                                            data-i18n="nav.application_intel_marketing_dashboard">Marketing
+                                            Dashboard</span>
                                     </a>
                                 </li>
                                 <li>
-                                    <a href="intel_introduction.html" title="Introduction" data-filter-tags="application intel introduction">
-                                        <span class="nav-link-text" data-i18n="nav.application_intel_introduction">Introduction</span>
+                                    <a href="intel_introduction.html" title="Introduction"
+                                        data-filter-tags="application intel introduction">
+                                        <span class="nav-link-text"
+                                            data-i18n="nav.application_intel_introduction">Introduction</span>
                                     </a>
                                 </li>
                                 <li>
-                                    <a href="intel_privacy.html" title="Privacy" data-filter-tags="application intel privacy">
-                                        <span class="nav-link-text" data-i18n="nav.application_intel_privacy">Privacy</span>
+                                    <a href="intel_privacy.html" title="Privacy"
+                                        data-filter-tags="application intel privacy">
+                                        <span class="nav-link-text"
+                                            data-i18n="nav.application_intel_privacy">Privacy</span>
                                     </a>
                                 </li>
                             </ul>
@@ -194,28 +212,38 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                             </a>
                             <ul>
                                 <li>
-                                    <a href="settings_how_it_works.html" title="How it works" data-filter-tags="theme settings how it works">
-                                        <span class="nav-link-text" data-i18n="nav.theme_settings_how_it_works">How it works</span>
+                                    <a href="settings_how_it_works.html" title="How it works"
+                                        data-filter-tags="theme settings how it works">
+                                        <span class="nav-link-text" data-i18n="nav.theme_settings_how_it_works">How it
+                                            works</span>
                                     </a>
                                 </li>
                                 <li>
-                                    <a href="settings_layout_options.html" title="Layout Options" data-filter-tags="theme settings layout options">
-                                        <span class="nav-link-text" data-i18n="nav.theme_settings_layout_options">Layout Options</span>
+                                    <a href="settings_layout_options.html" title="Layout Options"
+                                        data-filter-tags="theme settings layout options">
+                                        <span class="nav-link-text" data-i18n="nav.theme_settings_layout_options">Layout
+                                            Options</span>
                                     </a>
                                 </li>
                                 <li>
-                                    <a href="settings_theme_modes.html" title="Theme Modes (beta)" data-filter-tags="theme settings theme modes (beta)">
-                                        <span class="nav-link-text" data-i18n="nav.theme_settings_theme_modes_(beta)">Theme Modes (beta)</span>
+                                    <a href="settings_theme_modes.html" title="Theme Modes (beta)"
+                                        data-filter-tags="theme settings theme modes (beta)">
+                                        <span class="nav-link-text"
+                                            data-i18n="nav.theme_settings_theme_modes_(beta)">Theme Modes (beta)</span>
                                     </a>
                                 </li>
                                 <li>
-                                    <a href="settings_skin_options.html" title="Skin Options" data-filter-tags="theme settings skin options">
-                                        <span class="nav-link-text" data-i18n="nav.theme_settings_skin_options">Skin Options</span>
+                                    <a href="settings_skin_options.html" title="Skin Options"
+                                        data-filter-tags="theme settings skin options">
+                                        <span class="nav-link-text" data-i18n="nav.theme_settings_skin_options">Skin
+                                            Options</span>
                                     </a>
                                 </li>
                                 <li>
-                                    <a href="settings_saving_db.html" title="Saving to Database" data-filter-tags="theme settings saving to database">
-                                        <span class="nav-link-text" data-i18n="nav.theme_settings_saving_to_database">Saving to Database</span>
+                                    <a href="settings_saving_db.html" title="Saving to Database"
+                                        data-filter-tags="theme settings saving to database">
+                                        <span class="nav-link-text"
+                                            data-i18n="nav.theme_settings_saving_to_database">Saving to Database</span>
                                     </a>
                                 </li>
                             </ul>
@@ -227,38 +255,52 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                             </a>
                             <ul>
                                 <li>
-                                    <a href="docs_general.html" title="General Docs" data-filter-tags="documentation general docs">
-                                        <span class="nav-link-text" data-i18n="nav.documentation_general_docs">General Docs</span>
+                                    <a href="docs_general.html" title="General Docs"
+                                        data-filter-tags="documentation general docs">
+                                        <span class="nav-link-text" data-i18n="nav.documentation_general_docs">General
+                                            Docs</span>
                                     </a>
                                 </li>
                                 <li>
-                                    <a href="docs_project_structure.html" title="Project Structure" data-filter-tags="documentation project structure">
-                                        <span class="nav-link-text" data-i18n="nav.documentation_project_structure">Project Structure</span>
+                                    <a href="docs_project_structure.html" title="Project Structure"
+                                        data-filter-tags="documentation project structure">
+                                        <span class="nav-link-text"
+                                            data-i18n="nav.documentation_project_structure">Project Structure</span>
                                     </a>
                                 </li>
                                 <li>
-                                    <a href="docs_flavors_editions.html" title="Flavors & Editions" data-filter-tags="documentation flavors & editions">
-                                        <span class="nav-link-text" data-i18n="nav.documentation_flavors_&_editions">Flavors & Editions</span>
+                                    <a href="docs_flavors_editions.html" title="Flavors & Editions"
+                                        data-filter-tags="documentation flavors & editions">
+                                        <span class="nav-link-text"
+                                            data-i18n="nav.documentation_flavors_&_editions">Flavors & Editions</span>
                                     </a>
                                 </li>
                                 <li>
-                                    <a href="docs_community_support.html" title="Community Support" data-filter-tags="documentation community support">
-                                        <span class="nav-link-text" data-i18n="nav.documentation_community_support">Community Support</span>
+                                    <a href="docs_community_support.html" title="Community Support"
+                                        data-filter-tags="documentation community support">
+                                        <span class="nav-link-text"
+                                            data-i18n="nav.documentation_community_support">Community Support</span>
                                     </a>
                                 </li>
                                 <li>
-                                    <a href="docs_premium_support.html" title="Premium Support" data-filter-tags="documentation premium support">
-                                        <span class="nav-link-text" data-i18n="nav.documentation_premium_support">Premium Support</span>
+                                    <a href="docs_premium_support.html" title="Premium Support"
+                                        data-filter-tags="documentation premium support">
+                                        <span class="nav-link-text"
+                                            data-i18n="nav.documentation_premium_support">Premium Support</span>
                                     </a>
                                 </li>
                                 <li>
-                                    <a href="docs_licensing.html" title="Licensing" data-filter-tags="documentation licensing">
-                                        <span class="nav-link-text" data-i18n="nav.documentation_licensing">Licensing</span>
+                                    <a href="docs_licensing.html" title="Licensing"
+                                        data-filter-tags="documentation licensing">
+                                        <span class="nav-link-text"
+                                            data-i18n="nav.documentation_licensing">Licensing</span>
                                     </a>
                                 </li>
                                 <li>
-                                    <a href="docs_buildnotes.html" title="Build Notes" data-filter-tags="documentation build notes">
-                                        <span class="nav-link-text" data-i18n="nav.documentation_build_notes">Build Notes</span>
+                                    <a href="docs_buildnotes.html" title="Build Notes"
+                                        data-filter-tags="documentation build notes">
+                                        <span class="nav-link-text" data-i18n="nav.documentation_build_notes">Build
+                                            Notes</span>
                                         <span class="">v4.5.1</span>
                                     </a>
                                 </li>
@@ -277,8 +319,10 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                                     </a>
                                 </li>
                                 <li>
-                                    <a href="ui_accordion.html" title="Accordions" data-filter-tags="ui components accordions">
-                                        <span class="nav-link-text" data-i18n="nav.ui_components_accordions">Accordions</span>
+                                    <a href="ui_accordion.html" title="Accordions"
+                                        data-filter-tags="ui components accordions">
+                                        <span class="nav-link-text"
+                                            data-i18n="nav.ui_components_accordions">Accordions</span>
                                     </a>
                                 </li>
                                 <li>
@@ -287,8 +331,10 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                                     </a>
                                 </li>
                                 <li>
-                                    <a href="ui_breadcrumbs.html" title="Breadcrumbs" data-filter-tags="ui components breadcrumbs">
-                                        <span class="nav-link-text" data-i18n="nav.ui_components_breadcrumbs">Breadcrumbs</span>
+                                    <a href="ui_breadcrumbs.html" title="Breadcrumbs"
+                                        data-filter-tags="ui components breadcrumbs">
+                                        <span class="nav-link-text"
+                                            data-i18n="nav.ui_components_breadcrumbs">Breadcrumbs</span>
                                     </a>
                                 </li>
                                 <li>
@@ -297,8 +343,10 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                                     </a>
                                 </li>
                                 <li>
-                                    <a href="ui_button_group.html" title="Button Group" data-filter-tags="ui components button group">
-                                        <span class="nav-link-text" data-i18n="nav.ui_components_button_group">Button Group</span>
+                                    <a href="ui_button_group.html" title="Button Group"
+                                        data-filter-tags="ui components button group">
+                                        <span class="nav-link-text" data-i18n="nav.ui_components_button_group">Button
+                                            Group</span>
                                     </a>
                                 </li>
                                 <li>
@@ -307,23 +355,31 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                                     </a>
                                 </li>
                                 <li>
-                                    <a href="ui_carousel.html" title="Carousel" data-filter-tags="ui components carousel">
-                                        <span class="nav-link-text" data-i18n="nav.ui_components_carousel">Carousel</span>
+                                    <a href="ui_carousel.html" title="Carousel"
+                                        data-filter-tags="ui components carousel">
+                                        <span class="nav-link-text"
+                                            data-i18n="nav.ui_components_carousel">Carousel</span>
                                     </a>
                                 </li>
                                 <li>
-                                    <a href="ui_collapse.html" title="Collapse" data-filter-tags="ui components collapse">
-                                        <span class="nav-link-text" data-i18n="nav.ui_components_collapse">Collapse</span>
+                                    <a href="ui_collapse.html" title="Collapse"
+                                        data-filter-tags="ui components collapse">
+                                        <span class="nav-link-text"
+                                            data-i18n="nav.ui_components_collapse">Collapse</span>
                                     </a>
                                 </li>
                                 <li>
-                                    <a href="ui_dropdowns.html" title="Dropdowns" data-filter-tags="ui components dropdowns">
-                                        <span class="nav-link-text" data-i18n="nav.ui_components_dropdowns">Dropdowns</span>
+                                    <a href="ui_dropdowns.html" title="Dropdowns"
+                                        data-filter-tags="ui components dropdowns">
+                                        <span class="nav-link-text"
+                                            data-i18n="nav.ui_components_dropdowns">Dropdowns</span>
                                     </a>
                                 </li>
                                 <li>
-                                    <a href="ui_list_filter.html" title="List Filter" data-filter-tags="ui components list filter">
-                                        <span class="nav-link-text" data-i18n="nav.ui_components_list_filter">List Filter</span>
+                                    <a href="ui_list_filter.html" title="List Filter"
+                                        data-filter-tags="ui components list filter">
+                                        <span class="nav-link-text" data-i18n="nav.ui_components_list_filter">List
+                                            Filter</span>
                                     </a>
                                 </li>
                                 <li>
@@ -342,38 +398,52 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                                     </a>
                                 </li>
                                 <li>
-                                    <a href="ui_pagination.html" title="Pagination" data-filter-tags="ui components pagination">
-                                        <span class="nav-link-text" data-i18n="nav.ui_components_pagination">Pagination</span>
+                                    <a href="ui_pagination.html" title="Pagination"
+                                        data-filter-tags="ui components pagination">
+                                        <span class="nav-link-text"
+                                            data-i18n="nav.ui_components_pagination">Pagination</span>
                                     </a>
                                 </li>
                                 <li>
-                                    <a href="ui_popovers.html" title="Popovers" data-filter-tags="ui components popovers">
-                                        <span class="nav-link-text" data-i18n="nav.ui_components_popovers">Popovers</span>
+                                    <a href="ui_popovers.html" title="Popovers"
+                                        data-filter-tags="ui components popovers">
+                                        <span class="nav-link-text"
+                                            data-i18n="nav.ui_components_popovers">Popovers</span>
                                     </a>
                                 </li>
                                 <li>
-                                    <a href="ui_progress_bars.html" title="Progress Bars" data-filter-tags="ui components progress bars">
-                                        <span class="nav-link-text" data-i18n="nav.ui_components_progress_bars">Progress Bars</span>
+                                    <a href="ui_progress_bars.html" title="Progress Bars"
+                                        data-filter-tags="ui components progress bars">
+                                        <span class="nav-link-text" data-i18n="nav.ui_components_progress_bars">Progress
+                                            Bars</span>
                                     </a>
                                 </li>
                                 <li>
-                                    <a href="ui_scrollspy.html" title="ScrollSpy" data-filter-tags="ui components scrollspy">
-                                        <span class="nav-link-text" data-i18n="nav.ui_components_scrollspy">ScrollSpy</span>
+                                    <a href="ui_scrollspy.html" title="ScrollSpy"
+                                        data-filter-tags="ui components scrollspy">
+                                        <span class="nav-link-text"
+                                            data-i18n="nav.ui_components_scrollspy">ScrollSpy</span>
                                     </a>
                                 </li>
                                 <li>
-                                    <a href="ui_side_panel.html" title="Side Panel" data-filter-tags="ui components side panel">
-                                        <span class="nav-link-text" data-i18n="nav.ui_components_side_panel">Side Panel</span>
+                                    <a href="ui_side_panel.html" title="Side Panel"
+                                        data-filter-tags="ui components side panel">
+                                        <span class="nav-link-text" data-i18n="nav.ui_components_side_panel">Side
+                                            Panel</span>
                                     </a>
                                 </li>
                                 <li>
-                                    <a href="ui_spinners.html" title="Spinners" data-filter-tags="ui components spinners">
-                                        <span class="nav-link-text" data-i18n="nav.ui_components_spinners">Spinners</span>
+                                    <a href="ui_spinners.html" title="Spinners"
+                                        data-filter-tags="ui components spinners">
+                                        <span class="nav-link-text"
+                                            data-i18n="nav.ui_components_spinners">Spinners</span>
                                     </a>
                                 </li>
                                 <li>
-                                    <a href="ui_tabs_pills.html" title="Tabs & Pills" data-filter-tags="ui components tabs & pills">
-                                        <span class="nav-link-text" data-i18n="nav.ui_components_tabs_&_pills">Tabs & Pills</span>
+                                    <a href="ui_tabs_pills.html" title="Tabs & Pills"
+                                        data-filter-tags="ui components tabs & pills">
+                                        <span class="nav-link-text" data-i18n="nav.ui_components_tabs_&_pills">Tabs &
+                                            Pills</span>
                                     </a>
                                 </li>
                                 <li>
@@ -382,8 +452,10 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                                     </a>
                                 </li>
                                 <li>
-                                    <a href="ui_tooltips.html" title="Tooltips" data-filter-tags="ui components tooltips">
-                                        <span class="nav-link-text" data-i18n="nav.ui_components_tooltips">Tooltips</span>
+                                    <a href="ui_tooltips.html" title="Tooltips"
+                                        data-filter-tags="ui components tooltips">
+                                        <span class="nav-link-text"
+                                            data-i18n="nav.ui_components_tooltips">Tooltips</span>
                                     </a>
                                 </li>
                             </ul>
@@ -395,23 +467,29 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                             </a>
                             <ul>
                                 <li>
-                                    <a href="utilities_borders.html" title="Borders" data-filter-tags="utilities borders">
+                                    <a href="utilities_borders.html" title="Borders"
+                                        data-filter-tags="utilities borders">
                                         <span class="nav-link-text" data-i18n="nav.utilities_borders">Borders</span>
                                     </a>
                                 </li>
                                 <li>
-                                    <a href="utilities_clearfix.html" title="Clearfix" data-filter-tags="utilities clearfix">
+                                    <a href="utilities_clearfix.html" title="Clearfix"
+                                        data-filter-tags="utilities clearfix">
                                         <span class="nav-link-text" data-i18n="nav.utilities_clearfix">Clearfix</span>
                                     </a>
                                 </li>
                                 <li>
-                                    <a href="utilities_color_pallet.html" title="Color Pallet" data-filter-tags="utilities color pallet">
-                                        <span class="nav-link-text" data-i18n="nav.utilities_color_pallet">Color Pallet</span>
+                                    <a href="utilities_color_pallet.html" title="Color Pallet"
+                                        data-filter-tags="utilities color pallet">
+                                        <span class="nav-link-text" data-i18n="nav.utilities_color_pallet">Color
+                                            Pallet</span>
                                     </a>
                                 </li>
                                 <li>
-                                    <a href="utilities_display_property.html" title="Display Property" data-filter-tags="utilities display property">
-                                        <span class="nav-link-text" data-i18n="nav.utilities_display_property">Display Property</span>
+                                    <a href="utilities_display_property.html" title="Display Property"
+                                        data-filter-tags="utilities display property">
+                                        <span class="nav-link-text" data-i18n="nav.utilities_display_property">Display
+                                            Property</span>
                                     </a>
                                 </li>
                                 <li>
@@ -420,23 +498,28 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                                     </a>
                                 </li>
                                 <li>
-                                    <a href="utilities_flexbox.html" title="Flexbox" data-filter-tags="utilities flexbox">
+                                    <a href="utilities_flexbox.html" title="Flexbox"
+                                        data-filter-tags="utilities flexbox">
                                         <span class="nav-link-text" data-i18n="nav.utilities_flexbox">Flexbox</span>
                                     </a>
                                 </li>
                                 <li>
-                                    <a href="utilities_helpers.html" title="Helpers" data-filter-tags="utilities helpers">
+                                    <a href="utilities_helpers.html" title="Helpers"
+                                        data-filter-tags="utilities helpers">
                                         <span class="nav-link-text" data-i18n="nav.utilities_helpers">Helpers</span>
                                     </a>
                                 </li>
                                 <li>
-                                    <a href="utilities_position.html" title="Position" data-filter-tags="utilities position">
+                                    <a href="utilities_position.html" title="Position"
+                                        data-filter-tags="utilities position">
                                         <span class="nav-link-text" data-i18n="nav.utilities_position">Position</span>
                                     </a>
                                 </li>
                                 <li>
-                                    <a href="utilities_responsive_grid.html" title="Responsive Grid" data-filter-tags="utilities responsive grid">
-                                        <span class="nav-link-text" data-i18n="nav.utilities_responsive_grid">Responsive Grid</span>
+                                    <a href="utilities_responsive_grid.html" title="Responsive Grid"
+                                        data-filter-tags="utilities responsive grid">
+                                        <span class="nav-link-text" data-i18n="nav.utilities_responsive_grid">Responsive
+                                            Grid</span>
                                     </a>
                                 </li>
                                 <li>
@@ -445,35 +528,48 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                                     </a>
                                 </li>
                                 <li>
-                                    <a href="utilities_spacing.html" title="Spacing" data-filter-tags="utilities spacing">
+                                    <a href="utilities_spacing.html" title="Spacing"
+                                        data-filter-tags="utilities spacing">
                                         <span class="nav-link-text" data-i18n="nav.utilities_spacing">Spacing</span>
                                     </a>
                                 </li>
                                 <li>
-                                    <a href="utilities_typography.html" title="Typography" data-filter-tags="utilities typography fonts headings bold lead colors sizes link text states list styles truncate alignment">
-                                        <span class="nav-link-text" data-i18n="nav.utilities_typography">Typography</span>
+                                    <a href="utilities_typography.html" title="Typography"
+                                        data-filter-tags="utilities typography fonts headings bold lead colors sizes link text states list styles truncate alignment">
+                                        <span class="nav-link-text"
+                                            data-i18n="nav.utilities_typography">Typography</span>
                                     </a>
                                 </li>
                                 <li>
-                                    <a href="javascript:void(0);" title="Menu child" data-filter-tags="utilities menu child">
-                                        <span class="nav-link-text" data-i18n="nav.utilities_menu_child">Menu child</span>
+                                    <a href="javascript:void(0);" title="Menu child"
+                                        data-filter-tags="utilities menu child">
+                                        <span class="nav-link-text" data-i18n="nav.utilities_menu_child">Menu
+                                            child</span>
                                     </a>
                                     <ul>
                                         <li>
-                                            <a href="javascript:void(0);" title="Sublevel Item" data-filter-tags="utilities menu child sublevel item">
-                                                <span class="nav-link-text" data-i18n="nav.utilities_menu_child_sublevel_item">Sublevel Item</span>
+                                            <a href="javascript:void(0);" title="Sublevel Item"
+                                                data-filter-tags="utilities menu child sublevel item">
+                                                <span class="nav-link-text"
+                                                    data-i18n="nav.utilities_menu_child_sublevel_item">Sublevel
+                                                    Item</span>
                                             </a>
                                         </li>
                                         <li>
-                                            <a href="javascript:void(0);" title="Another Item" data-filter-tags="utilities menu child another item">
-                                                <span class="nav-link-text" data-i18n="nav.utilities_menu_child_another_item">Another Item</span>
+                                            <a href="javascript:void(0);" title="Another Item"
+                                                data-filter-tags="utilities menu child another item">
+                                                <span class="nav-link-text"
+                                                    data-i18n="nav.utilities_menu_child_another_item">Another
+                                                    Item</span>
                                             </a>
                                         </li>
                                     </ul>
                                 </li>
                                 <li class="disabled">
-                                    <a href="javascript:void(0);" title="Disabled item" data-filter-tags="utilities disabled item">
-                                        <span class="nav-link-text" data-i18n="nav.utilities_disabled_item">Disabled item</span>
+                                    <a href="javascript:void(0);" title="Disabled item"
+                                        data-filter-tags="utilities disabled item">
+                                        <span class="nav-link-text" data-i18n="nav.utilities_disabled_item">Disabled
+                                            item</span>
                                     </a>
                                 </li>
                             </ul>
@@ -482,71 +578,97 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                             <a href="#" title="Font Icons" data-filter-tags="font icons">
                                 <i class="fal fa-map-marker-alt"></i>
                                 <span class="nav-link-text" data-i18n="nav.font_icons">Font Icons</span>
-                                <span class="dl-ref bg-primary-500 hidden-nav-function-minify hidden-nav-function-top">7,500+</span>
+                                <span
+                                    class="dl-ref bg-primary-500 hidden-nav-function-minify hidden-nav-function-top">7,500+</span>
                             </a>
                             <ul>
                                 <li>
-                                    <a href="javascript:void(0);" title="FontAwesome" data-filter-tags="font icons fontawesome">
-                                        <span class="nav-link-text" data-i18n="nav.font_icons_fontawesome">FontAwesome Pro</span>
+                                    <a href="javascript:void(0);" title="FontAwesome"
+                                        data-filter-tags="font icons fontawesome">
+                                        <span class="nav-link-text" data-i18n="nav.font_icons_fontawesome">FontAwesome
+                                            Pro</span>
                                     </a>
                                     <ul>
                                         <li>
-                                            <a href="icons_fontawesome_light.html" title="Light" data-filter-tags="font icons fontawesome light">
-                                                <span class="nav-link-text" data-i18n="nav.font_icons_fontawesome_light">Light</span>
+                                            <a href="icons_fontawesome_light.html" title="Light"
+                                                data-filter-tags="font icons fontawesome light">
+                                                <span class="nav-link-text"
+                                                    data-i18n="nav.font_icons_fontawesome_light">Light</span>
                                             </a>
                                         </li>
                                         <li>
-                                            <a href="icons_fontawesome_regular.html" title="Regular" data-filter-tags="font icons fontawesome regular">
-                                                <span class="nav-link-text" data-i18n="nav.font_icons_fontawesome_regular">Regular</span>
+                                            <a href="icons_fontawesome_regular.html" title="Regular"
+                                                data-filter-tags="font icons fontawesome regular">
+                                                <span class="nav-link-text"
+                                                    data-i18n="nav.font_icons_fontawesome_regular">Regular</span>
                                             </a>
                                         </li>
                                         <li>
-                                            <a href="icons_fontawesome_solid.html" title="Solid" data-filter-tags="font icons fontawesome solid">
-                                                <span class="nav-link-text" data-i18n="nav.font_icons_fontawesome_solid">Solid</span>
+                                            <a href="icons_fontawesome_solid.html" title="Solid"
+                                                data-filter-tags="font icons fontawesome solid">
+                                                <span class="nav-link-text"
+                                                    data-i18n="nav.font_icons_fontawesome_solid">Solid</span>
                                             </a>
                                         </li>
                                         <li>
-                                            <a href="icons_fontawesome_duotone.html" title="Duotone" data-filter-tags="font icons fontawesome duotone">
-                                                <span class="nav-link-text" data-i18n="nav.font_icons_fontawesome_duotone">Duotone</span>
+                                            <a href="icons_fontawesome_duotone.html" title="Duotone"
+                                                data-filter-tags="font icons fontawesome duotone">
+                                                <span class="nav-link-text"
+                                                    data-i18n="nav.font_icons_fontawesome_duotone">Duotone</span>
                                             </a>
                                         </li>
                                         <li>
-                                            <a href="icons_fontawesome_brand.html" title="Brand" data-filter-tags="font icons fontawesome brand">
-                                                <span class="nav-link-text" data-i18n="nav.font_icons_fontawesome_brand">Brand</span>
+                                            <a href="icons_fontawesome_brand.html" title="Brand"
+                                                data-filter-tags="font icons fontawesome brand">
+                                                <span class="nav-link-text"
+                                                    data-i18n="nav.font_icons_fontawesome_brand">Brand</span>
                                             </a>
                                         </li>
                                     </ul>
                                 </li>
                                 <li>
-                                    <a href="javascript:void(0);" title="NextGen Icons" data-filter-tags="font icons nextgen icons">
-                                        <span class="nav-link-text" data-i18n="nav.font_icons_nextgen_icons">NextGen Icons</span>
+                                    <a href="javascript:void(0);" title="NextGen Icons"
+                                        data-filter-tags="font icons nextgen icons">
+                                        <span class="nav-link-text" data-i18n="nav.font_icons_nextgen_icons">NextGen
+                                            Icons</span>
                                     </a>
                                     <ul>
                                         <li>
-                                            <a href="icons_nextgen_general.html" title="General" data-filter-tags="font icons nextgen icons general">
-                                                <span class="nav-link-text" data-i18n="nav.font_icons_nextgen_icons_general">General</span>
+                                            <a href="icons_nextgen_general.html" title="General"
+                                                data-filter-tags="font icons nextgen icons general">
+                                                <span class="nav-link-text"
+                                                    data-i18n="nav.font_icons_nextgen_icons_general">General</span>
                                             </a>
                                         </li>
                                         <li>
-                                            <a href="icons_nextgen_base.html" title="Base" data-filter-tags="font icons nextgen icons base">
-                                                <span class="nav-link-text" data-i18n="nav.font_icons_nextgen_icons_base">Base</span>
+                                            <a href="icons_nextgen_base.html" title="Base"
+                                                data-filter-tags="font icons nextgen icons base">
+                                                <span class="nav-link-text"
+                                                    data-i18n="nav.font_icons_nextgen_icons_base">Base</span>
                                             </a>
                                         </li>
                                     </ul>
                                 </li>
                                 <li>
-                                    <a href="javascript:void(0);" title="Stack Icons" data-filter-tags="font icons stack icons">
-                                        <span class="nav-link-text" data-i18n="nav.font_icons_stack_icons">Stack Icons</span>
+                                    <a href="javascript:void(0);" title="Stack Icons"
+                                        data-filter-tags="font icons stack icons">
+                                        <span class="nav-link-text" data-i18n="nav.font_icons_stack_icons">Stack
+                                            Icons</span>
                                     </a>
                                     <ul>
                                         <li>
-                                            <a href="icons_stack_showcase.html" title="Showcase" data-filter-tags="font icons stack icons showcase">
-                                                <span class="nav-link-text" data-i18n="nav.font_icons_stack_icons_showcase">Showcase</span>
+                                            <a href="icons_stack_showcase.html" title="Showcase"
+                                                data-filter-tags="font icons stack icons showcase">
+                                                <span class="nav-link-text"
+                                                    data-i18n="nav.font_icons_stack_icons_showcase">Showcase</span>
                                             </a>
                                         </li>
                                         <li>
-                                            <a href="icons_stack_generate.html?layers=3" title="Generate Stack" data-filter-tags="font icons stack icons generate stack">
-                                                <span class="nav-link-text" data-i18n="nav.font_icons_stack_icons_generate_stack">Generate Stack</span>
+                                            <a href="icons_stack_generate.html?layers=3" title="Generate Stack"
+                                                data-filter-tags="font icons stack icons generate stack">
+                                                <span class="nav-link-text"
+                                                    data-i18n="nav.font_icons_stack_icons_generate_stack">Generate
+                                                    Stack</span>
                                             </a>
                                         </li>
                                     </ul>
@@ -560,13 +682,17 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                             </a>
                             <ul>
                                 <li>
-                                    <a href="tables_basic.html" title="Basic Tables" data-filter-tags="tables basic tables">
-                                        <span class="nav-link-text" data-i18n="nav.tables_basic_tables">Basic Tables</span>
+                                    <a href="tables_basic.html" title="Basic Tables"
+                                        data-filter-tags="tables basic tables">
+                                        <span class="nav-link-text" data-i18n="nav.tables_basic_tables">Basic
+                                            Tables</span>
                                     </a>
                                 </li>
                                 <li>
-                                    <a href="tables_generate_style.html" title="Generate Table Style" data-filter-tags="tables generate table style">
-                                        <span class="nav-link-text" data-i18n="nav.tables_generate_table_style">Generate Table Style</span>
+                                    <a href="tables_generate_style.html" title="Generate Table Style"
+                                        data-filter-tags="tables generate table style">
+                                        <span class="nav-link-text" data-i18n="nav.tables_generate_table_style">Generate
+                                            Table Style</span>
                                     </a>
                                 </li>
                             </ul>
@@ -578,23 +704,31 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                             </a>
                             <ul>
                                 <li>
-                                    <a href="form_basic_inputs.html" title="Basic Inputs" data-filter-tags="form stuff basic inputs">
-                                        <span class="nav-link-text" data-i18n="nav.form_stuff_basic_inputs">Basic Inputs</span>
+                                    <a href="form_basic_inputs.html" title="Basic Inputs"
+                                        data-filter-tags="form stuff basic inputs">
+                                        <span class="nav-link-text" data-i18n="nav.form_stuff_basic_inputs">Basic
+                                            Inputs</span>
                                     </a>
                                 </li>
                                 <li>
-                                    <a href="form_checkbox_radio.html" title="Checkbox & Radio" data-filter-tags="form stuff checkbox & radio">
-                                        <span class="nav-link-text" data-i18n="nav.form_stuff_checkbox_&_radio">Checkbox & Radio</span>
+                                    <a href="form_checkbox_radio.html" title="Checkbox & Radio"
+                                        data-filter-tags="form stuff checkbox & radio">
+                                        <span class="nav-link-text" data-i18n="nav.form_stuff_checkbox_&_radio">Checkbox
+                                            & Radio</span>
                                     </a>
                                 </li>
                                 <li>
-                                    <a href="form_input_groups.html" title="Input Groups" data-filter-tags="form stuff input groups">
-                                        <span class="nav-link-text" data-i18n="nav.form_stuff_input_groups">Input Groups</span>
+                                    <a href="form_input_groups.html" title="Input Groups"
+                                        data-filter-tags="form stuff input groups">
+                                        <span class="nav-link-text" data-i18n="nav.form_stuff_input_groups">Input
+                                            Groups</span>
                                     </a>
                                 </li>
                                 <li>
-                                    <a href="form_validation.html" title="Validation" data-filter-tags="form stuff validation">
-                                        <span class="nav-link-text" data-i18n="nav.form_stuff_validation">Validation</span>
+                                    <a href="form_validation.html" title="Validation"
+                                        data-filter-tags="form stuff validation">
+                                        <span class="nav-link-text"
+                                            data-i18n="nav.form_stuff_validation">Validation</span>
                                     </a>
                                 </li>
                             </ul>
@@ -607,8 +741,10 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                             </a>
                             <ul>
                                 <li>
-                                    <a href="plugins_faq.html" title="Plugins FAQ" data-filter-tags="plugins plugins faq">
-                                        <span class="nav-link-text" data-i18n="nav.plugins_plugins_faq">Plugins FAQ</span>
+                                    <a href="plugins_faq.html" title="Plugins FAQ"
+                                        data-filter-tags="plugins plugins faq">
+                                        <span class="nav-link-text" data-i18n="nav.plugins_plugins_faq">Plugins
+                                            FAQ</span>
                                     </a>
                                 </li>
                                 <li>
@@ -624,31 +760,37 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                                     </a>
                                 </li>
                                 <li>
-                                    <a href="plugins_smartpanels.html" title="SmartPanels" data-filter-tags="plugins smartpanels">
-                                        <span class="nav-link-text" data-i18n="nav.plugins_smartpanels">SmartPanels</span>
+                                    <a href="plugins_smartpanels.html" title="SmartPanels"
+                                        data-filter-tags="plugins smartpanels">
+                                        <span class="nav-link-text"
+                                            data-i18n="nav.plugins_smartpanels">SmartPanels</span>
                                         <span class="dl-ref label bg-primary-600 ml-2">9 KB</span>
                                     </a>
                                 </li>
                                 <li>
-                                    <a href="plugins_bootbox.html" title="BootBox" data-filter-tags="plugins bootbox alert sound">
+                                    <a href="plugins_bootbox.html" title="BootBox"
+                                        data-filter-tags="plugins bootbox alert sound">
                                         <span class="nav-link-text" data-i18n="nav.plugins_bootbox">BootBox</span>
                                         <span class="dl-ref label bg-primary-600 ml-2">15 KB</span>
                                     </a>
                                 </li>
                                 <li>
-                                    <a href="plugins_slimscroll.html" title="Slimscroll" data-filter-tags="plugins slimscroll">
+                                    <a href="plugins_slimscroll.html" title="Slimscroll"
+                                        data-filter-tags="plugins slimscroll">
                                         <span class="nav-link-text" data-i18n="nav.plugins_slimscroll">Slimscroll</span>
                                         <span class="dl-ref label bg-primary-700 ml-2">5 KB</span>
                                     </a>
                                 </li>
                                 <li>
-                                    <a href="plugins_throttle.html" title="Throttle" data-filter-tags="plugins throttle">
+                                    <a href="plugins_throttle.html" title="Throttle"
+                                        data-filter-tags="plugins throttle">
                                         <span class="nav-link-text" data-i18n="nav.plugins_throttle">Throttle</span>
                                         <span class="dl-ref label bg-primary-700 ml-2">1 KB</span>
                                     </a>
                                 </li>
                                 <li>
-                                    <a href="plugins_navigation.html" title="Navigation" data-filter-tags="plugins navigation">
+                                    <a href="plugins_navigation.html" title="Navigation"
+                                        data-filter-tags="plugins navigation">
                                         <span class="nav-link-text" data-i18n="nav.plugins_navigation">Navigation</span>
                                         <span class="dl-ref label bg-primary-700 ml-2">2 KB</span>
                                     </a>
@@ -671,87 +813,113 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                             <a href="#" title="Datatables" data-filter-tags="datatables datagrid">
                                 <i class="fal fa-table"></i>
                                 <span class="nav-link-text" data-i18n="nav.datatables">Datatables</span>
-                                <span class="dl-ref bg-primary-500 hidden-nav-function-minify hidden-nav-function-top">235 KB</span>
+                                <span
+                                    class="dl-ref bg-primary-500 hidden-nav-function-minify hidden-nav-function-top">235
+                                    KB</span>
                             </a>
                             <ul>
                                 <li>
-                                    <a href="datatables_basic.html" title="Basic" data-filter-tags="datatables datagrid basic">
+                                    <a href="datatables_basic.html" title="Basic"
+                                        data-filter-tags="datatables datagrid basic">
                                         <span class="nav-link-text" data-i18n="nav.datatables_basic">Basic</span>
                                     </a>
                                 </li>
                                 <li>
-                                    <a href="datatables_autofill.html" title="Autofill" data-filter-tags="datatables datagrid autofill">
+                                    <a href="datatables_autofill.html" title="Autofill"
+                                        data-filter-tags="datatables datagrid autofill">
                                         <span class="nav-link-text" data-i18n="nav.datatables_autofill">Autofill</span>
                                     </a>
                                 </li>
                                 <li>
-                                    <a href="datatables_buttons.html" title="Buttons" data-filter-tags="datatables datagrid buttons">
+                                    <a href="datatables_buttons.html" title="Buttons"
+                                        data-filter-tags="datatables datagrid buttons">
                                         <span class="nav-link-text" data-i18n="nav.datatables_buttons">Buttons</span>
                                     </a>
                                 </li>
                                 <li>
-                                    <a href="datatables_export.html" title="Export" data-filter-tags="datatables datagrid export tables pdf excel print csv">
+                                    <a href="datatables_export.html" title="Export"
+                                        data-filter-tags="datatables datagrid export tables pdf excel print csv">
                                         <span class="nav-link-text" data-i18n="nav.datatables_export">Export</span>
                                     </a>
                                 </li>
                                 <li>
-                                    <a href="datatables_colreorder.html" title="ColReorder" data-filter-tags="datatables datagrid colreorder">
-                                        <span class="nav-link-text" data-i18n="nav.datatables_colreorder">ColReorder</span>
+                                    <a href="datatables_colreorder.html" title="ColReorder"
+                                        data-filter-tags="datatables datagrid colreorder">
+                                        <span class="nav-link-text"
+                                            data-i18n="nav.datatables_colreorder">ColReorder</span>
                                     </a>
                                 </li>
                                 <li>
-                                    <a href="datatables_columnfilter.html" title="ColumnFilter" data-filter-tags="datatables datagrid columnfilter">
-                                        <span class="nav-link-text" data-i18n="nav.datatables_columnfilter">ColumnFilter</span>
+                                    <a href="datatables_columnfilter.html" title="ColumnFilter"
+                                        data-filter-tags="datatables datagrid columnfilter">
+                                        <span class="nav-link-text"
+                                            data-i18n="nav.datatables_columnfilter">ColumnFilter</span>
                                     </a>
                                 </li>
                                 <li>
-                                    <a href="datatables_fixedcolumns.html" title="FixedColumns" data-filter-tags="datatables datagrid fixedcolumns">
-                                        <span class="nav-link-text" data-i18n="nav.datatables_fixedcolumns">FixedColumns</span>
+                                    <a href="datatables_fixedcolumns.html" title="FixedColumns"
+                                        data-filter-tags="datatables datagrid fixedcolumns">
+                                        <span class="nav-link-text"
+                                            data-i18n="nav.datatables_fixedcolumns">FixedColumns</span>
                                     </a>
                                 </li>
                                 <li>
-                                    <a href="datatables_fixedheader.html" title="FixedHeader" data-filter-tags="datatables datagrid fixedheader">
-                                        <span class="nav-link-text" data-i18n="nav.datatables_fixedheader">FixedHeader</span>
+                                    <a href="datatables_fixedheader.html" title="FixedHeader"
+                                        data-filter-tags="datatables datagrid fixedheader">
+                                        <span class="nav-link-text"
+                                            data-i18n="nav.datatables_fixedheader">FixedHeader</span>
                                     </a>
                                 </li>
                                 <li>
-                                    <a href="datatables_keytable.html" title="KeyTable" data-filter-tags="datatables datagrid keytable">
+                                    <a href="datatables_keytable.html" title="KeyTable"
+                                        data-filter-tags="datatables datagrid keytable">
                                         <span class="nav-link-text" data-i18n="nav.datatables_keytable">KeyTable</span>
                                     </a>
                                 </li>
                                 <li>
-                                    <a href="datatables_responsive.html" title="Responsive" data-filter-tags="datatables datagrid responsive">
-                                        <span class="nav-link-text" data-i18n="nav.datatables_responsive">Responsive</span>
+                                    <a href="datatables_responsive.html" title="Responsive"
+                                        data-filter-tags="datatables datagrid responsive">
+                                        <span class="nav-link-text"
+                                            data-i18n="nav.datatables_responsive">Responsive</span>
                                     </a>
                                 </li>
                                 <li>
-                                    <a href="datatables_responsive_alt.html" title="Responsive Alt" data-filter-tags="datatables datagrid responsive alt">
-                                        <span class="nav-link-text" data-i18n="nav.datatables_responsive_alt">Responsive Alt</span>
+                                    <a href="datatables_responsive_alt.html" title="Responsive Alt"
+                                        data-filter-tags="datatables datagrid responsive alt">
+                                        <span class="nav-link-text" data-i18n="nav.datatables_responsive_alt">Responsive
+                                            Alt</span>
                                     </a>
                                 </li>
                                 <li>
-                                    <a href="datatables_rowgroup.html" title="RowGroup" data-filter-tags="datatables datagrid rowgroup">
+                                    <a href="datatables_rowgroup.html" title="RowGroup"
+                                        data-filter-tags="datatables datagrid rowgroup">
                                         <span class="nav-link-text" data-i18n="nav.datatables_rowgroup">RowGroup</span>
                                     </a>
                                 </li>
                                 <li>
-                                    <a href="datatables_rowreorder.html" title="RowReorder" data-filter-tags="datatables datagrid rowreorder">
-                                        <span class="nav-link-text" data-i18n="nav.datatables_rowreorder">RowReorder</span>
+                                    <a href="datatables_rowreorder.html" title="RowReorder"
+                                        data-filter-tags="datatables datagrid rowreorder">
+                                        <span class="nav-link-text"
+                                            data-i18n="nav.datatables_rowreorder">RowReorder</span>
                                     </a>
                                 </li>
                                 <li>
-                                    <a href="datatables_scroller.html" title="Scroller" data-filter-tags="datatables datagrid scroller">
+                                    <a href="datatables_scroller.html" title="Scroller"
+                                        data-filter-tags="datatables datagrid scroller">
                                         <span class="nav-link-text" data-i18n="nav.datatables_scroller">Scroller</span>
                                     </a>
                                 </li>
                                 <li>
-                                    <a href="datatables_select.html" title="Select" data-filter-tags="datatables datagrid select">
+                                    <a href="datatables_select.html" title="Select"
+                                        data-filter-tags="datatables datagrid select">
                                         <span class="nav-link-text" data-i18n="nav.datatables_select">Select</span>
                                     </a>
                                 </li>
                                 <li>
-                                    <a href="datatables_alteditor.html" title="AltEditor" data-filter-tags="datatables datagrid alteditor">
-                                        <span class="nav-link-text" data-i18n="nav.datatables_alteditor">AltEditor</span>
+                                    <a href="datatables_alteditor.html" title="AltEditor"
+                                        data-filter-tags="datatables datagrid alteditor">
+                                        <span class="nav-link-text"
+                                            data-i18n="nav.datatables_alteditor">AltEditor</span>
                                     </a>
                                 </li>
                             </ul>
@@ -763,49 +931,61 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                             </a>
                             <ul>
                                 <li>
-                                    <a href="statistics_flot.html" title="Flot" data-filter-tags="statistics chart graphs flot bar pie">
+                                    <a href="statistics_flot.html" title="Flot"
+                                        data-filter-tags="statistics chart graphs flot bar pie">
                                         <span class="nav-link-text" data-i18n="nav.statistics_flot">Flot</span>
                                         <span class="dl-ref label bg-primary-500 ml-2">36 KB</span>
                                     </a>
                                 </li>
                                 <li>
-                                    <a href="statistics_chartjs.html" title="Chart.js" data-filter-tags="statistics chart graphs chart.js bar pie">
+                                    <a href="statistics_chartjs.html" title="Chart.js"
+                                        data-filter-tags="statistics chart graphs chart.js bar pie">
                                         <span class="nav-link-text" data-i18n="nav.statistics_chart.js">Chart.js</span>
                                         <span class="dl-ref label bg-primary-500 ml-2">205 KB</span>
                                     </a>
                                 </li>
                                 <li>
-                                    <a href="statistics_chartist.html" title="Chartist.js" data-filter-tags="statistics chart graphs chartist.js">
-                                        <span class="nav-link-text" data-i18n="nav.statistics_chartist.js">Chartist.js</span>
+                                    <a href="statistics_chartist.html" title="Chartist.js"
+                                        data-filter-tags="statistics chart graphs chartist.js">
+                                        <span class="nav-link-text"
+                                            data-i18n="nav.statistics_chartist.js">Chartist.js</span>
                                         <span class="dl-ref label bg-primary-600 ml-2">39 KB</span>
                                     </a>
                                 </li>
                                 <li>
-                                    <a href="statistics_c3.html" title="C3 Charts" data-filter-tags="statistics chart graphs c3 charts">
-                                        <span class="nav-link-text" data-i18n="nav.statistics_c3_charts">C3 Charts</span>
+                                    <a href="statistics_c3.html" title="C3 Charts"
+                                        data-filter-tags="statistics chart graphs c3 charts">
+                                        <span class="nav-link-text" data-i18n="nav.statistics_c3_charts">C3
+                                            Charts</span>
                                         <span class="dl-ref label bg-primary-600 ml-2">197 KB</span>
                                     </a>
                                 </li>
                                 <li>
-                                    <a href="statistics_peity.html" title="Peity" data-filter-tags="statistics chart graphs peity small">
+                                    <a href="statistics_peity.html" title="Peity"
+                                        data-filter-tags="statistics chart graphs peity small">
                                         <span class="nav-link-text" data-i18n="nav.statistics_peity">Peity</span>
                                         <span class="dl-ref label bg-primary-700 ml-2">4 KB</span>
                                     </a>
                                 </li>
                                 <li>
-                                    <a href="statistics_sparkline.html" title="Sparkline" data-filter-tags="statistics chart graphs sparkline small tiny">
-                                        <span class="nav-link-text" data-i18n="nav.statistics_sparkline">Sparkline</span>
+                                    <a href="statistics_sparkline.html" title="Sparkline"
+                                        data-filter-tags="statistics chart graphs sparkline small tiny">
+                                        <span class="nav-link-text"
+                                            data-i18n="nav.statistics_sparkline">Sparkline</span>
                                         <span class="dl-ref label bg-primary-700 ml-2">42 KB</span>
                                     </a>
                                 </li>
                                 <li>
-                                    <a href="statistics_easypiechart.html" title="Easy Pie Chart" data-filter-tags="statistics chart graphs easy pie chart">
-                                        <span class="nav-link-text" data-i18n="nav.statistics_easy_pie_chart">Easy Pie Chart</span>
+                                    <a href="statistics_easypiechart.html" title="Easy Pie Chart"
+                                        data-filter-tags="statistics chart graphs easy pie chart">
+                                        <span class="nav-link-text" data-i18n="nav.statistics_easy_pie_chart">Easy Pie
+                                            Chart</span>
                                         <span class="dl-ref label bg-primary-700 ml-2">4 KB</span>
                                     </a>
                                 </li>
                                 <li>
-                                    <a href="statistics_dygraph.html" title="Dygraph" data-filter-tags="statistics chart graphs dygraph complex">
+                                    <a href="statistics_dygraph.html" title="Dygraph"
+                                        data-filter-tags="statistics chart graphs dygraph complex">
                                         <span class="nav-link-text" data-i18n="nav.statistics_dygraph">Dygraph</span>
                                         <span class="dl-ref label bg-primary-700 ml-2">120 KB</span>
                                     </a>
@@ -819,13 +999,16 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                             </a>
                             <ul>
                                 <li>
-                                    <a href="notifications_sweetalert2.html" title="SweetAlert2" data-filter-tags="notifications sweetalert2">
-                                        <span class="nav-link-text" data-i18n="nav.notifications_sweetalert2">SweetAlert2</span>
+                                    <a href="notifications_sweetalert2.html" title="SweetAlert2"
+                                        data-filter-tags="notifications sweetalert2">
+                                        <span class="nav-link-text"
+                                            data-i18n="nav.notifications_sweetalert2">SweetAlert2</span>
                                         <span class="dl-ref label bg-primary-500 ml-2">40 KB</span>
                                     </a>
                                 </li>
                                 <li>
-                                    <a href="notifications_toastr.html" title="Toastr" data-filter-tags="notifications toastr">
+                                    <a href="notifications_toastr.html" title="Toastr"
+                                        data-filter-tags="notifications toastr">
                                         <span class="nav-link-text" data-i18n="nav.notifications_toastr">Toastr</span>
                                         <span class="dl-ref label bg-primary-600 ml-2">5 KB</span>
                                     </a>
@@ -839,48 +1022,65 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                             </a>
                             <ul>
                                 <li>
-                                    <a href="form_plugins_colorpicker.html" title="Color Picker" data-filter-tags="form plugins color picker">
-                                        <span class="nav-link-text" data-i18n="nav.form_plugins_color_picker">Color Picker</span>
+                                    <a href="form_plugins_colorpicker.html" title="Color Picker"
+                                        data-filter-tags="form plugins color picker">
+                                        <span class="nav-link-text" data-i18n="nav.form_plugins_color_picker">Color
+                                            Picker</span>
                                     </a>
                                 </li>
                                 <li>
-                                    <a href="form_plugins_datepicker.html" title="Date Picker" data-filter-tags="form plugins date picker">
-                                        <span class="nav-link-text" data-i18n="nav.form_plugins_date_picker">Date Picker</span>
+                                    <a href="form_plugins_datepicker.html" title="Date Picker"
+                                        data-filter-tags="form plugins date picker">
+                                        <span class="nav-link-text" data-i18n="nav.form_plugins_date_picker">Date
+                                            Picker</span>
                                     </a>
                                 </li>
                                 <li>
-                                    <a href="form_plugins_daterange_picker.html" title="Date Range Picker" data-filter-tags="form plugins date range picker">
-                                        <span class="nav-link-text" data-i18n="nav.form_plugins_date_range_picker">Date Range Picker</span>
+                                    <a href="form_plugins_daterange_picker.html" title="Date Range Picker"
+                                        data-filter-tags="form plugins date range picker">
+                                        <span class="nav-link-text" data-i18n="nav.form_plugins_date_range_picker">Date
+                                            Range Picker</span>
                                     </a>
                                 </li>
                                 <li>
-                                    <a href="form_plugins_dropzone.html" title="Dropzone" data-filter-tags="form plugins dropzone">
-                                        <span class="nav-link-text" data-i18n="nav.form_plugins_dropzone">Dropzone</span>
+                                    <a href="form_plugins_dropzone.html" title="Dropzone"
+                                        data-filter-tags="form plugins dropzone">
+                                        <span class="nav-link-text"
+                                            data-i18n="nav.form_plugins_dropzone">Dropzone</span>
                                     </a>
                                 </li>
                                 <li>
-                                    <a href="form_plugins_ionrangeslider.html" title="Ion.RangeSlider" data-filter-tags="form plugins ion.rangeslider">
-                                        <span class="nav-link-text" data-i18n="nav.form_plugins_ion.rangeslider">Ion.RangeSlider</span>
+                                    <a href="form_plugins_ionrangeslider.html" title="Ion.RangeSlider"
+                                        data-filter-tags="form plugins ion.rangeslider">
+                                        <span class="nav-link-text"
+                                            data-i18n="nav.form_plugins_ion.rangeslider">Ion.RangeSlider</span>
                                     </a>
                                 </li>
                                 <li>
-                                    <a href="form_plugins_inputmask.html" title="Inputmask" data-filter-tags="form plugins inputmask">
-                                        <span class="nav-link-text" data-i18n="nav.form_plugins_inputmask">Inputmask</span>
+                                    <a href="form_plugins_inputmask.html" title="Inputmask"
+                                        data-filter-tags="form plugins inputmask">
+                                        <span class="nav-link-text"
+                                            data-i18n="nav.form_plugins_inputmask">Inputmask</span>
                                     </a>
                                 </li>
                                 <li>
-                                    <a href="form_plugins_imagecropper.html" title="Image Cropper" data-filter-tags="form plugins image cropper">
-                                        <span class="nav-link-text" data-i18n="nav.form_plugins_image_cropper">Image Cropper</span>
+                                    <a href="form_plugins_imagecropper.html" title="Image Cropper"
+                                        data-filter-tags="form plugins image cropper">
+                                        <span class="nav-link-text" data-i18n="nav.form_plugins_image_cropper">Image
+                                            Cropper</span>
                                     </a>
                                 </li>
                                 <li>
-                                    <a href="form_plugins_select2.html" title="Select2" data-filter-tags="form plugins select2">
+                                    <a href="form_plugins_select2.html" title="Select2"
+                                        data-filter-tags="form plugins select2">
                                         <span class="nav-link-text" data-i18n="nav.form_plugins_select2">Select2</span>
                                     </a>
                                 </li>
                                 <li>
-                                    <a href="form_plugins_summernote.html" title="Summernote" data-filter-tags="form plugins summernote texteditor editor">
-                                        <span class="nav-link-text" data-i18n="nav.form_plugins_summernote">Summernote</span>
+                                    <a href="form_plugins_summernote.html" title="Summernote"
+                                        data-filter-tags="form plugins summernote texteditor editor">
+                                        <span class="nav-link-text"
+                                            data-i18n="nav.form_plugins_summernote">Summernote</span>
                                     </a>
                                 </li>
                             </ul>
@@ -892,13 +1092,17 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                             </a>
                             <ul>
                                 <li>
-                                    <a href="miscellaneous_fullcalendar.html" title="FullCalendar" data-filter-tags="miscellaneous fullcalendar">
-                                        <span class="nav-link-text" data-i18n="nav.miscellaneous_fullcalendar">FullCalendar</span>
+                                    <a href="miscellaneous_fullcalendar.html" title="FullCalendar"
+                                        data-filter-tags="miscellaneous fullcalendar">
+                                        <span class="nav-link-text"
+                                            data-i18n="nav.miscellaneous_fullcalendar">FullCalendar</span>
                                     </a>
                                 </li>
                                 <li>
-                                    <a href="miscellaneous_lightgallery.html" title="Light Gallery" data-filter-tags="miscellaneous light gallery">
-                                        <span class="nav-link-text" data-i18n="nav.miscellaneous_light_gallery">Light Gallery</span>
+                                    <a href="miscellaneous_lightgallery.html" title="Light Gallery"
+                                        data-filter-tags="miscellaneous light gallery">
+                                        <span class="nav-link-text" data-i18n="nav.miscellaneous_light_gallery">Light
+                                            Gallery</span>
                                         <span class="dl-ref label bg-primary-500 ml-2">61 KB</span>
                                     </a>
                                 </li>
@@ -927,18 +1131,23 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                                     </a>
                                     <ul>
                                         <li>
-                                            <a href="page_forum_list.html" title="List" data-filter-tags="pages forum list">
+                                            <a href="page_forum_list.html" title="List"
+                                                data-filter-tags="pages forum list">
                                                 <span class="nav-link-text" data-i18n="nav.pages_forum_list">List</span>
                                             </a>
                                         </li>
                                         <li>
-                                            <a href="page_forum_threads.html" title="Threads" data-filter-tags="pages forum threads">
-                                                <span class="nav-link-text" data-i18n="nav.pages_forum_threads">Threads</span>
+                                            <a href="page_forum_threads.html" title="Threads"
+                                                data-filter-tags="pages forum threads">
+                                                <span class="nav-link-text"
+                                                    data-i18n="nav.pages_forum_threads">Threads</span>
                                             </a>
                                         </li>
                                         <li>
-                                            <a href="page_forum_discussion.html" title="Discussion" data-filter-tags="pages forum discussion">
-                                                <span class="nav-link-text" data-i18n="nav.pages_forum_discussion">Discussion</span>
+                                            <a href="page_forum_discussion.html" title="Discussion"
+                                                data-filter-tags="pages forum discussion">
+                                                <span class="nav-link-text"
+                                                    data-i18n="nav.pages_forum_discussion">Discussion</span>
                                             </a>
                                         </li>
                                     </ul>
@@ -949,82 +1158,113 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                                     </a>
                                     <ul>
                                         <li>
-                                            <a href="page_inbox_general.html" title="General" data-filter-tags="pages inbox general">
-                                                <span class="nav-link-text" data-i18n="nav.pages_inbox_general">General</span>
+                                            <a href="page_inbox_general.html" title="General"
+                                                data-filter-tags="pages inbox general">
+                                                <span class="nav-link-text"
+                                                    data-i18n="nav.pages_inbox_general">General</span>
                                             </a>
                                         </li>
                                         <li>
-                                            <a href="page_inbox_read.html" title="Read" data-filter-tags="pages inbox read">
+                                            <a href="page_inbox_read.html" title="Read"
+                                                data-filter-tags="pages inbox read">
                                                 <span class="nav-link-text" data-i18n="nav.pages_inbox_read">Read</span>
                                             </a>
                                         </li>
                                         <li>
-                                            <a href="page_inbox_write.html" title="Write" data-filter-tags="pages inbox write">
-                                                <span class="nav-link-text" data-i18n="nav.pages_inbox_write">Write</span>
+                                            <a href="page_inbox_write.html" title="Write"
+                                                data-filter-tags="pages inbox write">
+                                                <span class="nav-link-text"
+                                                    data-i18n="nav.pages_inbox_write">Write</span>
                                             </a>
                                         </li>
                                     </ul>
                                 </li>
                                 <li>
-                                    <a href="page_invoice.html" title="Invoice (printable)" data-filter-tags="pages invoice (printable)">
-                                        <span class="nav-link-text" data-i18n="nav.pages_invoice_(printable)">Invoice (printable)</span>
+                                    <a href="page_invoice.html" title="Invoice (printable)"
+                                        data-filter-tags="pages invoice (printable)">
+                                        <span class="nav-link-text" data-i18n="nav.pages_invoice_(printable)">Invoice
+                                            (printable)</span>
                                     </a>
                                 </li>
                                 <li>
-                                    <a href="javascript:void(0);" title="Authentication" data-filter-tags="pages authentication">
-                                        <span class="nav-link-text" data-i18n="nav.pages_authentication">Authentication</span>
+                                    <a href="javascript:void(0);" title="Authentication"
+                                        data-filter-tags="pages authentication">
+                                        <span class="nav-link-text"
+                                            data-i18n="nav.pages_authentication">Authentication</span>
                                     </a>
                                     <ul>
                                         <li>
-                                            <a href="page_forget.html" title="Forget Password" data-filter-tags="pages authentication forget password">
-                                                <span class="nav-link-text" data-i18n="nav.pages_authentication_forget_password">Forget Password</span>
+                                            <a href="page_forget.html" title="Forget Password"
+                                                data-filter-tags="pages authentication forget password">
+                                                <span class="nav-link-text"
+                                                    data-i18n="nav.pages_authentication_forget_password">Forget
+                                                    Password</span>
                                             </a>
                                         </li>
                                         <li>
-                                            <a href="page_locked.html" title="Locked Screen" data-filter-tags="pages authentication locked screen">
-                                                <span class="nav-link-text" data-i18n="nav.pages_authentication_locked_screen">Locked Screen</span>
+                                            <a href="page_locked.html" title="Locked Screen"
+                                                data-filter-tags="pages authentication locked screen">
+                                                <span class="nav-link-text"
+                                                    data-i18n="nav.pages_authentication_locked_screen">Locked
+                                                    Screen</span>
                                             </a>
                                         </li>
                                         <li>
-                                            <a href="page_login.html" title="Login" data-filter-tags="pages authentication login">
-                                                <span class="nav-link-text" data-i18n="nav.pages_authentication_login">Login</span>
+                                            <a href="page_login.html" title="Login"
+                                                data-filter-tags="pages authentication login">
+                                                <span class="nav-link-text"
+                                                    data-i18n="nav.pages_authentication_login">Login</span>
                                             </a>
                                         </li>
                                         <li>
-                                            <a href="page_login_alt.html" title="Login Alt" data-filter-tags="pages authentication login alt">
-                                                <span class="nav-link-text" data-i18n="nav.pages_authentication_login_alt">Login Alt</span>
+                                            <a href="page_login_alt.html" title="Login Alt"
+                                                data-filter-tags="pages authentication login alt">
+                                                <span class="nav-link-text"
+                                                    data-i18n="nav.pages_authentication_login_alt">Login Alt</span>
                                             </a>
                                         </li>
                                         <li>
-                                            <a href="page_register.html" title="Register" data-filter-tags="pages authentication register">
-                                                <span class="nav-link-text" data-i18n="nav.pages_authentication_register">Register</span>
+                                            <a href="page_register.html" title="Register"
+                                                data-filter-tags="pages authentication register">
+                                                <span class="nav-link-text"
+                                                    data-i18n="nav.pages_authentication_register">Register</span>
                                             </a>
                                         </li>
                                         <li>
-                                            <a href="page_confirmation.html" title="Confirmation" data-filter-tags="pages authentication confirmation">
-                                                <span class="nav-link-text" data-i18n="nav.pages_authentication_confirmation">Confirmation</span>
+                                            <a href="page_confirmation.html" title="Confirmation"
+                                                data-filter-tags="pages authentication confirmation">
+                                                <span class="nav-link-text"
+                                                    data-i18n="nav.pages_authentication_confirmation">Confirmation</span>
                                             </a>
                                         </li>
                                     </ul>
                                 </li>
                                 <li>
-                                    <a href="javascript:void(0);" title="Error Pages" data-filter-tags="pages error pages">
+                                    <a href="javascript:void(0);" title="Error Pages"
+                                        data-filter-tags="pages error pages">
                                         <span class="nav-link-text" data-i18n="nav.pages_error_pages">Error Pages</span>
                                     </a>
                                     <ul>
                                         <li>
-                                            <a href="page_error.html" title="General Error" data-filter-tags="pages error pages general error">
-                                                <span class="nav-link-text" data-i18n="nav.pages_error_pages_general_error">General Error</span>
+                                            <a href="page_error.html" title="General Error"
+                                                data-filter-tags="pages error pages general error">
+                                                <span class="nav-link-text"
+                                                    data-i18n="nav.pages_error_pages_general_error">General Error</span>
                                             </a>
                                         </li>
                                         <li>
-                                            <a href="page_error_404.html" title="Server Error" data-filter-tags="pages error pages server error">
-                                                <span class="nav-link-text" data-i18n="nav.pages_error_pages_server_error">Server Error</span>
+                                            <a href="page_error_404.html" title="Server Error"
+                                                data-filter-tags="pages error pages server error">
+                                                <span class="nav-link-text"
+                                                    data-i18n="nav.pages_error_pages_server_error">Server Error</span>
                                             </a>
                                         </li>
                                         <li>
-                                            <a href="page_error_announced.html" title="Announced Error" data-filter-tags="pages error pages announced error">
-                                                <span class="nav-link-text" data-i18n="nav.pages_error_pages_announced_error">Announced Error</span>
+                                            <a href="page_error_announced.html" title="Announced Error"
+                                                data-filter-tags="pages error pages announced error">
+                                                <span class="nav-link-text"
+                                                    data-i18n="nav.pages_error_pages_announced_error">Announced
+                                                    Error</span>
                                             </a>
                                         </li>
                                     </ul>
@@ -1040,8 +1280,10 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                                     </a>
                                 </li>
                                 <li>
-                                    <a href="page_search.html" title="Search Results" data-filter-tags="pages search results">
-                                        <span class="nav-link-text" data-i18n="nav.pages_search_results">Search Results</span>
+                                    <a href="page_search.html" title="Search Results"
+                                        data-filter-tags="pages search results">
+                                        <span class="nav-link-text" data-i18n="nav.pages_search_results">Search
+                                            Results</span>
                                     </a>
                                 </li>
                             </ul>
@@ -1052,7 +1294,8 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                 <!-- END PRIMARY NAVIGATION -->
                 <!-- NAV FOOTER -->
                 <div class="nav-footer shadow-top">
-                    <a href="#" onclick="return false;" data-action="toggle" data-class="nav-function-minify" class="hidden-md-down">
+                    <a href="#" onclick="return false;" data-action="toggle" data-class="nav-function-minify"
+                        class="hidden-md-down">
                         <i class="ni ni-chevron-right"></i>
                         <i class="ni ni-chevron-right"></i>
                     </a>
@@ -1063,12 +1306,14 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                             </a>
                         </li>
                         <li>
-                            <a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="Support Chat">
+                            <a href="javascript:void(0);" data-toggle="tooltip" data-placement="top"
+                                title="Support Chat">
                                 <i class="fal fa-life-ring"></i>
                             </a>
                         </li>
                         <li>
-                            <a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="Make a call">
+                            <a href="javascript:void(0);" data-toggle="tooltip" data-placement="top"
+                                title="Make a call">
                                 <i class="fal fa-phone"></i>
                             </a>
                         </li>
@@ -1081,7 +1326,8 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                 <header class="page-header" role="banner">
                     <!-- we need this logo when user switches to nav-function-top -->
                     <div class="page-logo">
-                        <a href="#" class="page-logo-link press-scale-down d-flex align-items-center position-relative" data-toggle="modal" data-target="#modal-shortcut">
+                        <a href="#" class="page-logo-link press-scale-down d-flex align-items-center position-relative"
+                            data-toggle="modal" data-target="#modal-shortcut">
                             <img src="img/logo.png" alt="SmartAdmin WebApp" aria-roledescription="logo">
 
                             <!--<span class="page-logo-text mr-1">SmartAdmin WebApp</span>
@@ -1092,17 +1338,20 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                     </div>
                     <!-- DOC: nav menu layout change shortcut -->
                     <div class="hidden-md-down dropdown-icon-menu position-relative">
-                        <a href="#" class="header-btn btn js-waves-off" data-action="toggle" data-class="nav-function-hidden" title="Hide Navigation">
+                        <a href="#" class="header-btn btn js-waves-off" data-action="toggle"
+                            data-class="nav-function-hidden" title="Hide Navigation">
                             <i class="ni ni-menu"></i>
                         </a>
                         <ul>
                             <li>
-                                <a href="#" class="btn js-waves-off" data-action="toggle" data-class="nav-function-minify" title="Minify Navigation">
+                                <a href="#" class="btn js-waves-off" data-action="toggle"
+                                    data-class="nav-function-minify" title="Minify Navigation">
                                     <i class="ni ni-minify-nav"></i>
                                 </a>
                             </li>
                             <li>
-                                <a href="#" class="btn js-waves-off" data-action="toggle" data-class="nav-function-fixed" title="Lock Navigation">
+                                <a href="#" class="btn js-waves-off" data-action="toggle"
+                                    data-class="nav-function-fixed" title="Lock Navigation">
                                     <i class="ni ni-lock-nav"></i>
                                 </a>
                             </li>
@@ -1110,13 +1359,15 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                     </div>
                     <!-- DOC: mobile button appears during mobile width -->
                     <div class="hidden-lg-up">
-                        <a href="#" class="header-btn btn press-scale-down" data-action="toggle" data-class="mobile-nav-on">
+                        <a href="#" class="header-btn btn press-scale-down" data-action="toggle"
+                            data-class="mobile-nav-on">
                             <i class="ni ni-menu"></i>
                         </a>
                     </div>
 
                     <div class="dropdown">
-                        <a class="dropdown-toggle" href="javascript:;" role="button" id="buiActDrop" data-target="buiList" data-toggle="dropdown" aria-haspopup="true">
+                        <a class="dropdown-toggle" href="javascript:;" role="button" id="buiActDrop"
+                            data-target="buiList" data-toggle="dropdown" aria-haspopup="true">
 
                         </a>
                         <div id="buiList" class="dropdown-menu dropdown-select-menu js-auto-close">
@@ -1136,7 +1387,8 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                             </div>-->
                         </div>
                         <div class="btn-group mx-4">
-                            <a href="javascript:;" class="dropdown-toggle no-arrow text-center" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                            <a href="javascript:;" class="dropdown-toggle no-arrow text-center" data-toggle="dropdown"
+                                aria-haspopup="true" aria-expanded="false">
                                 <i class="fal fa-tv fa-2x"></i><br>系統監控
                             </a>
                             <div class="dropdown-menu dropdown-select-menu js-auto-close" id="sysMonBtnList">
@@ -1148,27 +1400,32 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                             </div>
                         </div>
                         <div class="btn-group mx-4">
-                            <a href="javascript:;" class="dropdown-toggle no-arrow text-center" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                            <a href="javascript:;" name="topFunBtn" class="dropdown-toggle no-arrow text-center"
+                                data-page="historyData">
                                 <i class="fal fa-chart-area fa-2x"></i><br>歷史資料
                             </a>
                         </div>
                         <div class="btn-group mx-4">
-                            <a href="javascript:;" class="dropdown-toggle no-arrow text-center blink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                            <a href="javascript:;" class="dropdown-toggle no-arrow text-center blink"
+                                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                 <i class="fal fa-bell fa-2x"></i><br>即時告警
                             </a>
                         </div>
                         <div class="btn-group mx-4">
-                            <a href="javascript:;" class="dropdown-toggle no-arrow text-center" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                            <a href="javascript:;" class="dropdown-toggle no-arrow text-center" data-toggle="dropdown"
+                                aria-haspopup="true" aria-expanded="false">
                                 <i class="fal fa-server fa-2x"></i><br>運維管理
                             </a>
                         </div>
                         <div class="btn-group mx-4">
-                            <a href="javascript:;" class="no-arrow text-center">
+                            <a href="javascript:;" name="topGraphBtn" class="no-arrow text-center"
+                                data-page="graphManagement">
                                 <i class="fal fa-image fa-2x"></i><br>圖資管理
                             </a>
                         </div>
                         <div class="btn-group mx-4">
-                            <a href="javascript:;" name="topFunBtn" class="no-arrow text-center" data-page="accountManagement">
+                            <a href="javascript:;" name="topFunBtn" class="no-arrow text-center"
+                                data-page="accountManagement">
                                 <i class="fal fa-user fa-2x"></i><br>帳號管理
                             </a>
                         </div>
@@ -1183,8 +1440,10 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
 
                         <!-- app user menu -->
                         <div>
-                            <a href="#" data-toggle="dropdown" title="drlantern@gotbootstrap.com" class="header-icon d-flex align-items-center justify-content-center ml-2">
-                                <img src="img/demo/avatars/avatar-admin.png" class="profile-image rounded-circle" alt="Dr. Codex Lantern">
+                            <a href="#" data-toggle="dropdown" title="drlantern@gotbootstrap.com"
+                                class="header-icon d-flex align-items-center justify-content-center ml-2">
+                                <img src="img/demo/avatars/avatar-admin.png" class="profile-image rounded-circle"
+                                    alt="Dr. Codex Lantern">
                                 <!-- you can also add username next to the avatar with the codes below:
                                 <span class="ml-1 mr-1 text-truncate text-truncate-header hidden-xs-down">Me</span>
                                 <i class="ni ni-chevron-down hidden-xs-down"></i> -->
@@ -1193,11 +1452,13 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                                 <div class="dropdown-header bg-trans-gradient d-flex flex-row py-4 rounded-top">
                                     <div class="d-flex flex-row align-items-center mt-1 mb-1 color-white">
                                         <span class="mr-2">
-                                            <img src="img/demo/avatars/avatar-admin.png" class="rounded-circle profile-image" alt="Dr. Codex Lantern">
+                                            <img src="img/demo/avatars/avatar-admin.png"
+                                                class="rounded-circle profile-image" alt="Dr. Codex Lantern">
                                         </span>
                                         <div class="info-card-text">
                                             <div class="fs-lg text-truncate text-truncate-lg">Dr. Codex Lantern</div>
-                                            <span class="text-truncate text-truncate-md opacity-80">drlantern@gotbootstrap.com</span>
+                                            <span
+                                                class="text-truncate text-truncate-md opacity-80">drlantern@gotbootstrap.com</span>
                                         </div>
                                     </div>
                                 </div>
@@ -1222,12 +1483,18 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                                         Language
                                     </div>
                                     <div class="dropdown-menu">
-                                        <a href="#?lang=fr" class="dropdown-item" data-action="lang" data-lang="fr">Français</a>
-                                        <a href="#?lang=en" class="dropdown-item active" data-action="lang" data-lang="en">English (US)</a>
-                                        <a href="#?lang=es" class="dropdown-item" data-action="lang" data-lang="es">Español</a>
-                                        <a href="#?lang=ru" class="dropdown-item" data-action="lang" data-lang="ru">Русский язык</a>
-                                        <a href="#?lang=jp" class="dropdown-item" data-action="lang" data-lang="jp">日本語</a>
-                                        <a href="#?lang=ch" class="dropdown-item" data-action="lang" data-lang="ch">中文</a>
+                                        <a href="#?lang=fr" class="dropdown-item" data-action="lang"
+                                            data-lang="fr">Français</a>
+                                        <a href="#?lang=en" class="dropdown-item active" data-action="lang"
+                                            data-lang="en">English (US)</a>
+                                        <a href="#?lang=es" class="dropdown-item" data-action="lang"
+                                            data-lang="es">Español</a>
+                                        <a href="#?lang=ru" class="dropdown-item" data-action="lang"
+                                            data-lang="ru">Русский язык</a>
+                                        <a href="#?lang=jp" class="dropdown-item" data-action="lang"
+                                            data-lang="jp">日本語</a>
+                                        <a href="#?lang=ch" class="dropdown-item" data-action="lang"
+                                            data-lang="ch">中文</a>
                                     </div>
                                 </div>
                                 <div class="dropdown-divider m-0"></div>
@@ -1248,7 +1515,8 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                 </div>
 
                 <!-- this overlay is activated only when mobile menu is triggered -->
-                <div class="page-content-overlay" data-action="toggle" data-class="mobile-nav-on"></div> <!-- END Page Content -->
+                <div class="page-content-overlay" data-action="toggle" data-class="mobile-nav-on"></div>
+                <!-- END Page Content -->
                 <!-- BEGIN Page Footer -->
                 <!--<footer class="page-footer" role="contentinfo">
                     <div class="d-flex align-items-center flex-1 text-muted">
@@ -1265,7 +1533,8 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                 </footer>-->
                 <!-- END Page Footer -->
                 <!-- BEGIN Shortcuts -->
-                <div class="modal fade modal-backdrop-transparent" id="modal-shortcut" tabindex="-1" role="dialog" aria-labelledby="modal-shortcut" aria-hidden="true">
+                <div class="modal fade modal-backdrop-transparent" id="modal-shortcut" tabindex="-1" role="dialog"
+                    aria-labelledby="modal-shortcut" aria-hidden="true">
                     <div class="modal-dialog modal-dialog-top modal-transparent" role="document">
                         <div class="modal-content">
                             <div class="modal-body">
@@ -1382,16 +1651,19 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
     </div>
     <!-- END Page Wrapper -->
     <!-- BEGIN Messenger -->
-    <div class="modal fade js-modal-messenger modal-backdrop-transparent" tabindex="-1" role="dialog" aria-hidden="true">
+    <div class="modal fade js-modal-messenger modal-backdrop-transparent" tabindex="-1" role="dialog"
+        aria-hidden="true">
         <div class="modal-dialog modal-dialog-right">
             <div class="modal-content h-100">
                 <div class="dropdown-header bg-trans-gradient d-flex align-items-center w-100">
                     <div class="d-flex flex-row align-items-center mt-1 mb-1 color-white">
                         <span class="mr-2">
-                            <span class="rounded-circle profile-image d-block" style="background-image:url('img/demo/avatars/avatar-d.png'); background-size: cover;"></span>
+                            <span class="rounded-circle profile-image d-block"
+                                style="background-image:url('img/demo/avatars/avatar-d.png'); background-size: cover;"></span>
                         </span>
                         <div class="info-card-text">
-                            <a href="javascript:void(0);" class="fs-lg text-truncate text-truncate-lg text-white" data-toggle="dropdown" aria-expanded="false">
+                            <a href="javascript:void(0);" class="fs-lg text-truncate text-truncate-lg text-white"
+                                data-toggle="dropdown" aria-expanded="false">
                                 Tracey Chang
                                 <i class="fal fa-angle-down d-inline-block ml-1 text-white fs-md"></i>
                             </a>
@@ -1403,26 +1675,33 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                             <span class="text-truncate text-truncate-md opacity-80">IT Director</span>
                         </div>
                     </div>
-                    <button type="button" class="close text-white position-absolute pos-top pos-right p-2 m-1 mr-2" data-dismiss="modal" aria-label="Close">
+                    <button type="button" class="close text-white position-absolute pos-top pos-right p-2 m-1 mr-2"
+                        data-dismiss="modal" aria-label="Close">
                         <span aria-hidden="true"><i class="fal fa-times"></i></span>
                     </button>
                 </div>
                 <div class="modal-body p-0 h-100 d-flex">
                     <!-- BEGIN msgr-list -->
-                    <div class="msgr-list d-flex flex-column bg-faded border-faded border-top-0 border-right-0 border-bottom-0 position-absolute pos-top pos-bottom">
+                    <div
+                        class="msgr-list d-flex flex-column bg-faded border-faded border-top-0 border-right-0 border-bottom-0 position-absolute pos-top pos-bottom">
                         <div>
-                            <div class="height-4 width-3 h3 m-0 d-flex justify-content-center flex-column color-primary-500 pl-3 mt-2">
+                            <div
+                                class="height-4 width-3 h3 m-0 d-flex justify-content-center flex-column color-primary-500 pl-3 mt-2">
                                 <i class="fal fa-search"></i>
                             </div>
-                            <input type="text" class="form-control bg-white" id="msgr_listfilter_input" placeholder="Filter contacts" aria-label="FriendSearch" data-listfilter="#js-msgr-listfilter">
+                            <input type="text" class="form-control bg-white" id="msgr_listfilter_input"
+                                placeholder="Filter contacts" aria-label="FriendSearch"
+                                data-listfilter="#js-msgr-listfilter">
                         </div>
                         <div class="flex-1 h-100 custom-scroll">
                             <div class="w-100">
                                 <ul id="js-msgr-listfilter" class="list-unstyled m-0">
                                     <li>
-                                        <a href="#" class="d-table w-100 px-2 py-2 text-dark hover-white" data-filter-tags="tracey chang online">
+                                        <a href="#" class="d-table w-100 px-2 py-2 text-dark hover-white"
+                                            data-filter-tags="tracey chang online">
                                             <div class="d-table-cell align-middle status status-success status-sm ">
-                                                <span class="profile-image-md rounded-circle d-block" style="background-image:url('img/demo/avatars/avatar-d.png'); background-size: cover;"></span>
+                                                <span class="profile-image-md rounded-circle d-block"
+                                                    style="background-image:url('img/demo/avatars/avatar-d.png'); background-size: cover;"></span>
                                             </div>
                                             <div class="d-table-cell w-100 align-middle pl-2 pr-2">
                                                 <div class="text-truncate text-truncate-md">
@@ -1435,9 +1714,11 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                                         </a>
                                     </li>
                                     <li>
-                                        <a href="#" class="d-table w-100 px-2 py-2 text-dark hover-white" data-filter-tags="oliver kopyuv online">
+                                        <a href="#" class="d-table w-100 px-2 py-2 text-dark hover-white"
+                                            data-filter-tags="oliver kopyuv online">
                                             <div class="d-table-cell align-middle status status-success status-sm ">
-                                                <span class="profile-image-md rounded-circle d-block" style="background-image:url('img/demo/avatars/avatar-b.png'); background-size: cover;"></span>
+                                                <span class="profile-image-md rounded-circle d-block"
+                                                    style="background-image:url('img/demo/avatars/avatar-b.png'); background-size: cover;"></span>
                                             </div>
                                             <div class="d-table-cell w-100 align-middle pl-2 pr-2">
                                                 <div class="text-truncate text-truncate-md">
@@ -1450,9 +1731,11 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                                         </a>
                                     </li>
                                     <li>
-                                        <a href="#" class="d-table w-100 px-2 py-2 text-dark hover-white" data-filter-tags="dr john cook phd away">
+                                        <a href="#" class="d-table w-100 px-2 py-2 text-dark hover-white"
+                                            data-filter-tags="dr john cook phd away">
                                             <div class="d-table-cell align-middle status status-warning status-sm ">
-                                                <span class="profile-image-md rounded-circle d-block" style="background-image:url('img/demo/avatars/avatar-e.png'); background-size: cover;"></span>
+                                                <span class="profile-image-md rounded-circle d-block"
+                                                    style="background-image:url('img/demo/avatars/avatar-e.png'); background-size: cover;"></span>
                                             </div>
                                             <div class="d-table-cell w-100 align-middle pl-2 pr-2">
                                                 <div class="text-truncate text-truncate-md">
@@ -1465,9 +1748,11 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                                         </a>
                                     </li>
                                     <li>
-                                        <a href="#" class="d-table w-100 px-2 py-2 text-dark hover-white" data-filter-tags="ali amdaney online">
+                                        <a href="#" class="d-table w-100 px-2 py-2 text-dark hover-white"
+                                            data-filter-tags="ali amdaney online">
                                             <div class="d-table-cell align-middle status status-success status-sm ">
-                                                <span class="profile-image-md rounded-circle d-block" style="background-image:url('img/demo/avatars/avatar-g.png'); background-size: cover;"></span>
+                                                <span class="profile-image-md rounded-circle d-block"
+                                                    style="background-image:url('img/demo/avatars/avatar-g.png'); background-size: cover;"></span>
                                             </div>
                                             <div class="d-table-cell w-100 align-middle pl-2 pr-2">
                                                 <div class="text-truncate text-truncate-md">
@@ -1480,9 +1765,11 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                                         </a>
                                     </li>
                                     <li>
-                                        <a href="#" class="d-table w-100 px-2 py-2 text-dark hover-white" data-filter-tags="sarah mcbrook online">
+                                        <a href="#" class="d-table w-100 px-2 py-2 text-dark hover-white"
+                                            data-filter-tags="sarah mcbrook online">
                                             <div class="d-table-cell align-middle status status-success status-sm">
-                                                <span class="profile-image-md rounded-circle d-block" style="background-image:url('img/demo/avatars/avatar-h.png'); background-size: cover;"></span>
+                                                <span class="profile-image-md rounded-circle d-block"
+                                                    style="background-image:url('img/demo/avatars/avatar-h.png'); background-size: cover;"></span>
                                             </div>
                                             <div class="d-table-cell w-100 align-middle pl-2 pr-2">
                                                 <div class="text-truncate text-truncate-md">
@@ -1495,9 +1782,11 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                                         </a>
                                     </li>
                                     <li>
-                                        <a href="#" class="d-table w-100 px-2 py-2 text-dark hover-white" data-filter-tags="ali amdaney offline">
+                                        <a href="#" class="d-table w-100 px-2 py-2 text-dark hover-white"
+                                            data-filter-tags="ali amdaney offline">
                                             <div class="d-table-cell align-middle status status-sm">
-                                                <span class="profile-image-md rounded-circle d-block" style="background-image:url('img/demo/avatars/avatar-a.png'); background-size: cover;"></span>
+                                                <span class="profile-image-md rounded-circle d-block"
+                                                    style="background-image:url('img/demo/avatars/avatar-a.png'); background-size: cover;"></span>
                                             </div>
                                             <div class="d-table-cell w-100 align-middle pl-2 pr-2">
                                                 <div class="text-truncate text-truncate-md">
@@ -1510,9 +1799,11 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                                         </a>
                                     </li>
                                     <li>
-                                        <a href="#" class="d-table w-100 px-2 py-2 text-dark hover-white" data-filter-tags="ali amdaney busy">
+                                        <a href="#" class="d-table w-100 px-2 py-2 text-dark hover-white"
+                                            data-filter-tags="ali amdaney busy">
                                             <div class="d-table-cell align-middle status status-danger status-sm">
-                                                <span class="profile-image-md rounded-circle d-block" style="background-image:url('img/demo/avatars/avatar-j.png'); background-size: cover;"></span>
+                                                <span class="profile-image-md rounded-circle d-block"
+                                                    style="background-image:url('img/demo/avatars/avatar-j.png'); background-size: cover;"></span>
                                             </div>
                                             <div class="d-table-cell w-100 align-middle pl-2 pr-2">
                                                 <div class="text-truncate text-truncate-md">
@@ -1525,9 +1816,11 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                                         </a>
                                     </li>
                                     <li>
-                                        <a href="#" class="d-table w-100 px-2 py-2 text-dark hover-white" data-filter-tags="ali amdaney offline">
+                                        <a href="#" class="d-table w-100 px-2 py-2 text-dark hover-white"
+                                            data-filter-tags="ali amdaney offline">
                                             <div class="d-table-cell align-middle status status-sm">
-                                                <span class="profile-image-md rounded-circle d-block" style="background-image:url('img/demo/avatars/avatar-c.png'); background-size: cover;"></span>
+                                                <span class="profile-image-md rounded-circle d-block"
+                                                    style="background-image:url('img/demo/avatars/avatar-c.png'); background-size: cover;"></span>
                                             </div>
                                             <div class="d-table-cell w-100 align-middle pl-2 pr-2">
                                                 <div class="text-truncate text-truncate-md">
@@ -1540,9 +1833,11 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                                         </a>
                                     </li>
                                     <li>
-                                        <a href="#" class="d-table w-100 px-2 py-2 text-dark hover-white" data-filter-tags="ali amdaney inactive">
+                                        <a href="#" class="d-table w-100 px-2 py-2 text-dark hover-white"
+                                            data-filter-tags="ali amdaney inactive">
                                             <div class="d-table-cell align-middle">
-                                                <span class="profile-image-md rounded-circle d-block" style="background-image:url('img/demo/avatars/avatar-m.png'); background-size: cover;"></span>
+                                                <span class="profile-image-md rounded-circle d-block"
+                                                    style="background-image:url('img/demo/avatars/avatar-m.png'); background-size: cover;"></span>
                                             </div>
                                             <div class="d-table-cell w-100 align-middle pl-2 pr-2">
                                                 <div class="text-truncate text-truncate-md">
@@ -1620,7 +1915,8 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                                 <div class="chat-segment chat-segment-sent chat-end">
                                     <div class="chat-message">
                                         <p>
-                                            Sending you some dough today, you can allocate the resources to this project.
+                                            Sending you some dough today, you can allocate the resources to this
+                                            project.
                                         </p>
                                     </div>
                                     <div class="text-right fw-300 text-muted mt-1 fs-xs">
@@ -1667,19 +1963,25 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                         <!-- END custom-scroll  -->
                         <!-- BEGIN msgr__chatinput -->
                         <div class="d-flex flex-column">
-                            <div class="border-faded border-right-0 border-bottom-0 border-left-0 flex-1 mr-3 ml-3 position-relative shadow-top">
+                            <div
+                                class="border-faded border-right-0 border-bottom-0 border-left-0 flex-1 mr-3 ml-3 position-relative shadow-top">
                                 <div class="pt-3 pb-1 pr-0 pl-0 rounded-0" tabindex="-1">
-                                    <div id="msgr_input" contenteditable="true" data-placeholder="Type your message here..." class="height-10 form-content-editable"></div>
+                                    <div id="msgr_input" contenteditable="true"
+                                        data-placeholder="Type your message here..."
+                                        class="height-10 form-content-editable"></div>
                                 </div>
                             </div>
                             <div class="height-8 px-3 d-flex flex-row align-items-center flex-wrap flex-shrink-0">
-                                <a href="javascript:void(0);" class="btn btn-icon fs-xl width-1 mr-1" data-toggle="tooltip" data-original-title="More options" data-placement="top">
+                                <a href="javascript:void(0);" class="btn btn-icon fs-xl width-1 mr-1"
+                                    data-toggle="tooltip" data-original-title="More options" data-placement="top">
                                     <i class="fal fa-ellipsis-v-alt color-fusion-300"></i>
                                 </a>
-                                <a href="javascript:void(0);" class="btn btn-icon fs-xl mr-1" data-toggle="tooltip" data-original-title="Attach files" data-placement="top">
+                                <a href="javascript:void(0);" class="btn btn-icon fs-xl mr-1" data-toggle="tooltip"
+                                    data-original-title="Attach files" data-placement="top">
                                     <i class="fal fa-paperclip color-fusion-300"></i>
                                 </a>
-                                <a href="javascript:void(0);" class="btn btn-icon fs-xl mr-1" data-toggle="tooltip" data-original-title="Insert photo" data-placement="top">
+                                <a href="javascript:void(0);" class="btn btn-icon fs-xl mr-1" data-toggle="tooltip"
+                                    data-original-title="Insert photo" data-placement="top">
                                     <i class="fal fa-camera color-fusion-300"></i>
                                 </a>
                                 <div class="ml-auto">
@@ -1704,7 +2006,8 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                         Layout Settings
                         <small class="mb-0 opacity-80">User Interface Settings</small>
                     </h4>
-                    <button type="button" class="close text-white position-absolute pos-top pos-right p-2 m-1 mr-2" data-dismiss="modal" aria-label="Close">
+                    <button type="button" class="close text-white position-absolute pos-top pos-right p-2 m-1 mr-2"
+                        data-dismiss="modal" aria-label="Close">
                         <span aria-hidden="true"><i class="fal fa-times"></i></span>
                     </button>
                 </div>
@@ -1718,37 +2021,44 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                             </div>
                         </div>
                         <div class="list" id="fh">
-                            <a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle" data-class="header-function-fixed"></a>
+                            <a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle"
+                                data-class="header-function-fixed"></a>
                             <span class="onoffswitch-title">Fixed Header</span>
                             <span class="onoffswitch-title-desc">header is in a fixed at all times</span>
                         </div>
                         <div class="list" id="nff">
-                            <a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle" data-class="nav-function-fixed"></a>
+                            <a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle"
+                                data-class="nav-function-fixed"></a>
                             <span class="onoffswitch-title">Fixed Navigation</span>
                             <span class="onoffswitch-title-desc">left panel is fixed</span>
                         </div>
                         <div class="list" id="nfm">
-                            <a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle" data-class="nav-function-minify"></a>
+                            <a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle"
+                                data-class="nav-function-minify"></a>
                             <span class="onoffswitch-title">Minify Navigation</span>
                             <span class="onoffswitch-title-desc">Skew nav to maximize space</span>
                         </div>
                         <div class="list" id="nfh">
-                            <a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle" data-class="nav-function-hidden"></a>
+                            <a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle"
+                                data-class="nav-function-hidden"></a>
                             <span class="onoffswitch-title">Hide Navigation</span>
                             <span class="onoffswitch-title-desc">roll mouse on edge to reveal</span>
                         </div>
                         <div class="list" id="nft">
-                            <a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle" data-class="nav-function-top"></a>
+                            <a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle"
+                                data-class="nav-function-top"></a>
                             <span class="onoffswitch-title">Top Navigation</span>
                             <span class="onoffswitch-title-desc">Relocate left pane to top</span>
                         </div>
                         <div class="list" id="fff">
-                            <a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle" data-class="footer-function-fixed"></a>
+                            <a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle"
+                                data-class="footer-function-fixed"></a>
                             <span class="onoffswitch-title">Fixed Footer</span>
                             <span class="onoffswitch-title-desc">page footer is fixed</span>
                         </div>
                         <div class="list" id="mmb">
-                            <a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle" data-class="mod-main-boxed"></a>
+                            <a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle"
+                                data-class="mod-main-boxed"></a>
                             <span class="onoffswitch-title">Boxed Layout</span>
                             <span class="onoffswitch-title-desc">Encapsulates to a container</span>
                         </div>
@@ -1771,7 +2081,8 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                                 </li>
                             </ul>
                             <div class="list" id="mbgf">
-                                <a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle" data-class="mod-fixed-bg"></a>
+                                <a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle"
+                                    data-class="mod-fixed-bg"></a>
                                 <span class="onoffswitch-title">Fixed Background</span>
                             </div>
                         </div>
@@ -1783,17 +2094,20 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                             </div>
                         </div>
                         <div class="list" id="nmp">
-                            <a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle" data-class="nav-mobile-push"></a>
+                            <a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle"
+                                data-class="nav-mobile-push"></a>
                             <span class="onoffswitch-title">Push Content</span>
                             <span class="onoffswitch-title-desc">Content pushed on menu reveal</span>
                         </div>
                         <div class="list" id="nmno">
-                            <a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle" data-class="nav-mobile-no-overlay"></a>
+                            <a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle"
+                                data-class="nav-mobile-no-overlay"></a>
                             <span class="onoffswitch-title">No Overlay</span>
                             <span class="onoffswitch-title-desc">Removes mesh on menu reveal</span>
                         </div>
                         <div class="list" id="sldo">
-                            <a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle" data-class="nav-mobile-slide-out"></a>
+                            <a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle"
+                                data-class="nav-mobile-slide-out"></a>
                             <span class="onoffswitch-title">Off-Canvas <sup>(beta)</sup></span>
                             <span class="onoffswitch-title-desc">Content overlaps menu</span>
                         </div>
@@ -1805,27 +2119,32 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                             </div>
                         </div>
                         <div class="list" id="mbf">
-                            <a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle" data-class="mod-bigger-font"></a>
+                            <a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle"
+                                data-class="mod-bigger-font"></a>
                             <span class="onoffswitch-title">Bigger Content Font</span>
                             <span class="onoffswitch-title-desc">content fonts are bigger for readability</span>
                         </div>
                         <div class="list" id="mhc">
-                            <a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle" data-class="mod-high-contrast"></a>
+                            <a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle"
+                                data-class="mod-high-contrast"></a>
                             <span class="onoffswitch-title">High Contrast Text (WCAG 2 AA)</span>
                             <span class="onoffswitch-title-desc">4.5:1 text contrast ratio</span>
                         </div>
                         <div class="list" id="mcb">
-                            <a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle" data-class="mod-color-blind"></a>
+                            <a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle"
+                                data-class="mod-color-blind"></a>
                             <span class="onoffswitch-title">Daltonism <sup>(beta)</sup> </span>
                             <span class="onoffswitch-title-desc">color vision deficiency</span>
                         </div>
                         <div class="list" id="mpc">
-                            <a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle" data-class="mod-pace-custom"></a>
+                            <a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle"
+                                data-class="mod-pace-custom"></a>
                             <span class="onoffswitch-title">Preloader Inside</span>
                             <span class="onoffswitch-title-desc">preloader will be inside content</span>
                         </div>
                         <div class="list" id="mpi">
-                            <a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle" data-class="mod-panel-icon"></a>
+                            <a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle"
+                                data-class="mod-panel-icon"></a>
                             <span class="onoffswitch-title">SmartPanel Icons (not Panels)</span>
                             <span class="onoffswitch-title-desc">smartpanel buttons will appear as icons</span>
                         </div>
@@ -1837,37 +2156,44 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                             </div>
                         </div>
                         <div class="list" id="mcbg">
-                            <a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle" data-class="mod-clean-page-bg"></a>
+                            <a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle"
+                                data-class="mod-clean-page-bg"></a>
                             <span class="onoffswitch-title">Clean Page Background</span>
                             <span class="onoffswitch-title-desc">adds more whitespace</span>
                         </div>
                         <div class="list" id="mhni">
-                            <a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle" data-class="mod-hide-nav-icons"></a>
+                            <a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle"
+                                data-class="mod-hide-nav-icons"></a>
                             <span class="onoffswitch-title">Hide Navigation Icons</span>
                             <span class="onoffswitch-title-desc">invisible navigation icons</span>
                         </div>
                         <div class="list" id="dan">
-                            <a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle" data-class="mod-disable-animation"></a>
+                            <a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle"
+                                data-class="mod-disable-animation"></a>
                             <span class="onoffswitch-title">Disable CSS Animation</span>
                             <span class="onoffswitch-title-desc">Disables CSS based animations</span>
                         </div>
                         <div class="list" id="mhic">
-                            <a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle" data-class="mod-hide-info-card"></a>
+                            <a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle"
+                                data-class="mod-hide-info-card"></a>
                             <span class="onoffswitch-title">Hide Info Card</span>
                             <span class="onoffswitch-title-desc">Hides info card from left panel</span>
                         </div>
                         <div class="list" id="mlph">
-                            <a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle" data-class="mod-lean-subheader"></a>
+                            <a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle"
+                                data-class="mod-lean-subheader"></a>
                             <span class="onoffswitch-title">Lean Subheader</span>
                             <span class="onoffswitch-title-desc">distinguished page header</span>
                         </div>
                         <div class="list" id="mnl">
-                            <a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle" data-class="mod-nav-link"></a>
+                            <a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle"
+                                data-class="mod-nav-link"></a>
                             <span class="onoffswitch-title">Hierarchical Navigation</span>
                             <span class="onoffswitch-title-desc">Clear breakdown of nav links</span>
                         </div>
                         <div class="list" id="mdn">
-                            <a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle" data-class="mod-nav-dark"></a>
+                            <a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle"
+                                data-class="mod-nav-dark"></a>
                             <span class="onoffswitch-title">Dark Navigation</span>
                             <span class="onoffswitch-title-desc">Navigation background is darkend</span>
                         </div>
@@ -1881,16 +2207,20 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                         </div>
                         <div class="list mt-1">
                             <div class="btn-group btn-group-sm btn-group-toggle my-2" data-toggle="buttons">
-                                <label class="btn btn-default btn-sm" data-action="toggle-swap" data-class="root-text-sm" data-target="html">
+                                <label class="btn btn-default btn-sm" data-action="toggle-swap"
+                                    data-class="root-text-sm" data-target="html">
                                     <input type="radio" name="changeFrontSize"> SM
                                 </label>
-                                <label class="btn btn-default btn-sm" data-action="toggle-swap" data-class="root-text" data-target="html">
+                                <label class="btn btn-default btn-sm" data-action="toggle-swap" data-class="root-text"
+                                    data-target="html">
                                     <input type="radio" name="changeFrontSize" checked=""> MD
                                 </label>
-                                <label class="btn btn-default btn-sm" data-action="toggle-swap" data-class="root-text-lg" data-target="html">
+                                <label class="btn btn-default btn-sm" data-action="toggle-swap"
+                                    data-class="root-text-lg" data-target="html">
                                     <input type="radio" name="changeFrontSize"> LG
                                 </label>
-                                <label class="btn btn-default btn-sm" data-action="toggle-swap" data-class="root-text-xl" data-target="html">
+                                <label class="btn btn-default btn-sm" data-action="toggle-swap"
+                                    data-class="root-text-xl" data-target="html">
                                     <input type="radio" name="changeFrontSize"> XL
                                 </label>
                             </div>
@@ -1904,59 +2234,98 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                             <div class="d-table-cell align-middle">
                                 <h5 class="p-0 pr-2 d-flex">
                                     Theme colors
-                                    <a href="#" class="ml-auto fw-400 fs-xs" data-toggle="popover" data-trigger="focus" data-placement="top" title="" data-html="true" data-content="The settings below uses <code>localStorage</code> to load the external <strong>CSS</strong> file as an overlap to the base css. Due to network latency and <strong>CPU utilization</strong>, you may experience a brief flickering effect on page load which may show the intial applied theme for a split second. Setting the prefered style/theme in the header will prevent this from happening." data-original-title="<span class='text-primary'><i class='fal fa-exclamation-triangle mr-1'></i> Heads up!</span>" data-template="<div class=&quot;popover bg-white border-white&quot; role=&quot;tooltip&quot;><div class=&quot;arrow&quot;></div><h3 class=&quot;popover-header bg-transparent&quot;></h3><div class=&quot;popover-body fs-xs&quot;></div></div>"><i class="fal fa-info-circle mr-1"></i> more info</a>
+                                    <a href="#" class="ml-auto fw-400 fs-xs" data-toggle="popover" data-trigger="focus"
+                                        data-placement="top" title="" data-html="true"
+                                        data-content="The settings below uses <code>localStorage</code> to load the external <strong>CSS</strong> file as an overlap to the base css. Due to network latency and <strong>CPU utilization</strong>, you may experience a brief flickering effect on page load which may show the intial applied theme for a split second. Setting the prefered style/theme in the header will prevent this from happening."
+                                        data-original-title="<span class='text-primary'><i class='fal fa-exclamation-triangle mr-1'></i> Heads up!</span>"
+                                        data-template="<div class=&quot;popover bg-white border-white&quot; role=&quot;tooltip&quot;><div class=&quot;arrow&quot;></div><h3 class=&quot;popover-header bg-transparent&quot;></h3><div class=&quot;popover-body fs-xs&quot;></div></div>"><i
+                                            class="fal fa-info-circle mr-1"></i> more info</a>
                                 </h5>
                             </div>
                         </div>
                         <div class="expanded theme-colors pl-5 pr-3">
                             <ul class="m-0">
                                 <li>
-                                    <a href="#" id="myapp-0" data-action="theme-update" data-themesave data-theme="" data-toggle="tooltip" data-placement="top" title="Wisteria (base css)" data-original-title="Wisteria (base css)"></a>
+                                    <a href="#" id="myapp-0" data-action="theme-update" data-themesave data-theme=""
+                                        data-toggle="tooltip" data-placement="top" title="Wisteria (base css)"
+                                        data-original-title="Wisteria (base css)"></a>
                                 </li>
                                 <li>
-                                    <a href="#" id="myapp-1" data-action="theme-update" data-themesave data-theme="css/themes/cust-theme-1.css" data-toggle="tooltip" data-placement="top" title="Tapestry" data-original-title="Tapestry"></a>
+                                    <a href="#" id="myapp-1" data-action="theme-update" data-themesave
+                                        data-theme="css/themes/cust-theme-1.css" data-toggle="tooltip"
+                                        data-placement="top" title="Tapestry" data-original-title="Tapestry"></a>
                                 </li>
                                 <li>
-                                    <a href="#" id="myapp-2" data-action="theme-update" data-themesave data-theme="css/themes/cust-theme-2.css" data-toggle="tooltip" data-placement="top" title="Atlantis" data-original-title="Atlantis"></a>
+                                    <a href="#" id="myapp-2" data-action="theme-update" data-themesave
+                                        data-theme="css/themes/cust-theme-2.css" data-toggle="tooltip"
+                                        data-placement="top" title="Atlantis" data-original-title="Atlantis"></a>
                                 </li>
                                 <li>
-                                    <a href="#" id="myapp-3" data-action="theme-update" data-themesave data-theme="css/themes/cust-theme-3.css" data-toggle="tooltip" data-placement="top" title="Indigo" data-original-title="Indigo"></a>
+                                    <a href="#" id="myapp-3" data-action="theme-update" data-themesave
+                                        data-theme="css/themes/cust-theme-3.css" data-toggle="tooltip"
+                                        data-placement="top" title="Indigo" data-original-title="Indigo"></a>
                                 </li>
                                 <li>
-                                    <a href="#" id="myapp-4" data-action="theme-update" data-themesave data-theme="css/themes/cust-theme-4.css" data-toggle="tooltip" data-placement="top" title="Dodger Blue" data-original-title="Dodger Blue"></a>
+                                    <a href="#" id="myapp-4" data-action="theme-update" data-themesave
+                                        data-theme="css/themes/cust-theme-4.css" data-toggle="tooltip"
+                                        data-placement="top" title="Dodger Blue" data-original-title="Dodger Blue"></a>
                                 </li>
                                 <li>
-                                    <a href="#" id="myapp-5" data-action="theme-update" data-themesave data-theme="css/themes/cust-theme-5.css" data-toggle="tooltip" data-placement="top" title="Tradewind" data-original-title="Tradewind"></a>
+                                    <a href="#" id="myapp-5" data-action="theme-update" data-themesave
+                                        data-theme="css/themes/cust-theme-5.css" data-toggle="tooltip"
+                                        data-placement="top" title="Tradewind" data-original-title="Tradewind"></a>
                                 </li>
                                 <li>
-                                    <a href="#" id="myapp-6" data-action="theme-update" data-themesave data-theme="css/themes/cust-theme-6.css" data-toggle="tooltip" data-placement="top" title="Cranberry" data-original-title="Cranberry"></a>
+                                    <a href="#" id="myapp-6" data-action="theme-update" data-themesave
+                                        data-theme="css/themes/cust-theme-6.css" data-toggle="tooltip"
+                                        data-placement="top" title="Cranberry" data-original-title="Cranberry"></a>
                                 </li>
                                 <li>
-                                    <a href="#" id="myapp-7" data-action="theme-update" data-themesave data-theme="css/themes/cust-theme-7.css" data-toggle="tooltip" data-placement="top" title="Oslo Gray" data-original-title="Oslo Gray"></a>
+                                    <a href="#" id="myapp-7" data-action="theme-update" data-themesave
+                                        data-theme="css/themes/cust-theme-7.css" data-toggle="tooltip"
+                                        data-placement="top" title="Oslo Gray" data-original-title="Oslo Gray"></a>
                                 </li>
                                 <li>
-                                    <a href="#" id="myapp-8" data-action="theme-update" data-themesave data-theme="css/themes/cust-theme-8.css" data-toggle="tooltip" data-placement="top" title="Chetwode Blue" data-original-title="Chetwode Blue"></a>
+                                    <a href="#" id="myapp-8" data-action="theme-update" data-themesave
+                                        data-theme="css/themes/cust-theme-8.css" data-toggle="tooltip"
+                                        data-placement="top" title="Chetwode Blue"
+                                        data-original-title="Chetwode Blue"></a>
                                 </li>
                                 <li>
-                                    <a href="#" id="myapp-9" data-action="theme-update" data-themesave data-theme="css/themes/cust-theme-9.css" data-toggle="tooltip" data-placement="top" title="Apricot" data-original-title="Apricot"></a>
+                                    <a href="#" id="myapp-9" data-action="theme-update" data-themesave
+                                        data-theme="css/themes/cust-theme-9.css" data-toggle="tooltip"
+                                        data-placement="top" title="Apricot" data-original-title="Apricot"></a>
                                 </li>
                                 <li>
-                                    <a href="#" id="myapp-10" data-action="theme-update" data-themesave data-theme="css/themes/cust-theme-10.css" data-toggle="tooltip" data-placement="top" title="Blue Smoke" data-original-title="Blue Smoke"></a>
+                                    <a href="#" id="myapp-10" data-action="theme-update" data-themesave
+                                        data-theme="css/themes/cust-theme-10.css" data-toggle="tooltip"
+                                        data-placement="top" title="Blue Smoke" data-original-title="Blue Smoke"></a>
                                 </li>
                                 <li>
-                                    <a href="#" id="myapp-11" data-action="theme-update" data-themesave data-theme="css/themes/cust-theme-11.css" data-toggle="tooltip" data-placement="top" title="Green Smoke" data-original-title="Green Smoke"></a>
+                                    <a href="#" id="myapp-11" data-action="theme-update" data-themesave
+                                        data-theme="css/themes/cust-theme-11.css" data-toggle="tooltip"
+                                        data-placement="top" title="Green Smoke" data-original-title="Green Smoke"></a>
                                 </li>
                                 <li>
-                                    <a href="#" id="myapp-12" data-action="theme-update" data-themesave data-theme="css/themes/cust-theme-12.css" data-toggle="tooltip" data-placement="top" title="Wild Blue Yonder" data-original-title="Wild Blue Yonder"></a>
+                                    <a href="#" id="myapp-12" data-action="theme-update" data-themesave
+                                        data-theme="css/themes/cust-theme-12.css" data-toggle="tooltip"
+                                        data-placement="top" title="Wild Blue Yonder"
+                                        data-original-title="Wild Blue Yonder"></a>
                                 </li>
                                 <li>
-                                    <a href="#" id="myapp-13" data-action="theme-update" data-themesave data-theme="css/themes/cust-theme-13.css" data-toggle="tooltip" data-placement="top" title="Emerald" data-original-title="Emerald"></a>
+                                    <a href="#" id="myapp-13" data-action="theme-update" data-themesave
+                                        data-theme="css/themes/cust-theme-13.css" data-toggle="tooltip"
+                                        data-placement="top" title="Emerald" data-original-title="Emerald"></a>
                                 </li>
                                 <li>
-                                    <a href="#" id="myapp-14" data-action="theme-update" data-themesave data-theme="css/themes/cust-theme-14.css" data-toggle="tooltip" data-placement="top" title="Supernova" data-original-title="Supernova"></a>
+                                    <a href="#" id="myapp-14" data-action="theme-update" data-themesave
+                                        data-theme="css/themes/cust-theme-14.css" data-toggle="tooltip"
+                                        data-placement="top" title="Supernova" data-original-title="Supernova"></a>
                                 </li>
                                 <li>
-                                    <a href="#" id="myapp-15" data-action="theme-update" data-themesave data-theme="css/themes/cust-theme-15.css" data-toggle="tooltip" data-placement="top" title="Hoki" data-original-title="Hoki"></a>
+                                    <a href="#" id="myapp-15" data-action="theme-update" data-themesave
+                                        data-theme="css/themes/cust-theme-15.css" data-toggle="tooltip"
+                                        data-placement="top" title="Hoki" data-original-title="Hoki"></a>
                                 </li>
                             </ul>
                         </div>
@@ -1965,47 +2334,71 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                             <div class="d-table-cell align-middle">
                                 <h5 class="p-0 pr-2 d-flex">
                                     Theme Modes (beta)
-                                    <a href="#" class="ml-auto fw-400 fs-xs" data-toggle="popover" data-trigger="focus" data-placement="top" title="" data-html="true" data-content="This is a brand new technique we are introducing which uses CSS variables to infiltrate color options. While this has been working nicely on modern browsers without much issues, some users <strong>may still face issues on Internet Explorer </strong>. Until these issues are resolved or Internet Explorer improves, this feature will remain in Beta" data-original-title="<span class='text-primary'><i class='fal fa-question-circle mr-1'></i> Why beta?</span>" data-template="<div class=&quot;popover bg-white border-white&quot; role=&quot;tooltip&quot;><div class=&quot;arrow&quot;></div><h3 class=&quot;popover-header bg-transparent&quot;></h3><div class=&quot;popover-body fs-xs&quot;></div></div>"><i class="fal fa-question-circle mr-1"></i> why beta?</a>
+                                    <a href="#" class="ml-auto fw-400 fs-xs" data-toggle="popover" data-trigger="focus"
+                                        data-placement="top" title="" data-html="true"
+                                        data-content="This is a brand new technique we are introducing which uses CSS variables to infiltrate color options. While this has been working nicely on modern browsers without much issues, some users <strong>may still face issues on Internet Explorer </strong>. Until these issues are resolved or Internet Explorer improves, this feature will remain in Beta"
+                                        data-original-title="<span class='text-primary'><i class='fal fa-question-circle mr-1'></i> Why beta?</span>"
+                                        data-template="<div class=&quot;popover bg-white border-white&quot; role=&quot;tooltip&quot;><div class=&quot;arrow&quot;></div><h3 class=&quot;popover-header bg-transparent&quot;></h3><div class=&quot;popover-body fs-xs&quot;></div></div>"><i
+                                            class="fal fa-question-circle mr-1"></i> why beta?</a>
                                 </h5>
                             </div>
                         </div>
                         <div class="pl-5 pr-3 py-3">
                             <div class="ie-only alert alert-warning d-none">
                                 <h6>Internet Explorer Issue</h6>
-                                This particular component may not work as expected in Internet Explorer. Please use with caution.
+                                This particular component may not work as expected in Internet Explorer. Please use with
+                                caution.
                             </div>
                             <div class="row no-gutters">
                                 <div class="col-4 pr-2 text-center">
-                                    <div id="skin-default" data-action="toggle-replace" data-replaceclass="mod-skin-light mod-skin-dark" data-class="" data-toggle="tooltip" data-placement="top" title="" class="d-flex bg-white border border-primary rounded overflow-hidden text-success js-waves-on" data-original-title="Default Mode" style="height: 80px">
-                                        <div class="bg-primary-600 bg-primary-gradient px-2 pt-0 border-right border-primary"></div>
+                                    <div id="skin-default" data-action="toggle-replace"
+                                        data-replaceclass="mod-skin-light mod-skin-dark" data-class=""
+                                        data-toggle="tooltip" data-placement="top" title=""
+                                        class="d-flex bg-white border border-primary rounded overflow-hidden text-success js-waves-on"
+                                        data-original-title="Default Mode" style="height: 80px">
+                                        <div
+                                            class="bg-primary-600 bg-primary-gradient px-2 pt-0 border-right border-primary">
+                                        </div>
                                         <div class="d-flex flex-column flex-1">
                                             <div class="bg-white border-bottom border-primary py-1"></div>
                                             <div class="bg-faded flex-1 pt-3 pb-3 px-2">
-                                                <div class="py-3" style="background:url('img/demo/s-1.png') top left no-repeat;background-size: 100%;"></div>
+                                                <div class="py-3"
+                                                    style="background:url('img/demo/s-1.png') top left no-repeat;background-size: 100%;">
+                                                </div>
                                             </div>
                                         </div>
                                     </div>
                                     Default
                                 </div>
                                 <div class="col-4 px-1 text-center">
-                                    <div id="skin-light" data-action="toggle-replace" data-replaceclass="mod-skin-dark" data-class="mod-skin-light" data-toggle="tooltip" data-placement="top" title="" class="d-flex bg-white border border-secondary rounded overflow-hidden text-success js-waves-on" data-original-title="Light Mode" style="height: 80px">
+                                    <div id="skin-light" data-action="toggle-replace" data-replaceclass="mod-skin-dark"
+                                        data-class="mod-skin-light" data-toggle="tooltip" data-placement="top" title=""
+                                        class="d-flex bg-white border border-secondary rounded overflow-hidden text-success js-waves-on"
+                                        data-original-title="Light Mode" style="height: 80px">
                                         <div class="bg-white px-2 pt-0 border-right border-"></div>
                                         <div class="d-flex flex-column flex-1">
                                             <div class="bg-white border-bottom border- py-1"></div>
                                             <div class="bg-white flex-1 pt-3 pb-3 px-2">
-                                                <div class="py-3" style="background:url('img/demo/s-1.png') top left no-repeat;background-size: 100%;"></div>
+                                                <div class="py-3"
+                                                    style="background:url('img/demo/s-1.png') top left no-repeat;background-size: 100%;">
+                                                </div>
                                             </div>
                                         </div>
                                     </div>
                                     Light
                                 </div>
                                 <div class="col-4 pl-2 text-center">
-                                    <div id="skin-dark" data-action="toggle-replace" data-replaceclass="mod-skin-light" data-class="mod-skin-dark" data-toggle="tooltip" data-placement="top" title="" class="d-flex bg-white border border-dark rounded overflow-hidden text-success js-waves-on" data-original-title="Dark Mode" style="height: 80px">
+                                    <div id="skin-dark" data-action="toggle-replace" data-replaceclass="mod-skin-light"
+                                        data-class="mod-skin-dark" data-toggle="tooltip" data-placement="top" title=""
+                                        class="d-flex bg-white border border-dark rounded overflow-hidden text-success js-waves-on"
+                                        data-original-title="Dark Mode" style="height: 80px">
                                         <div class="bg-fusion-500 px-2 pt-0 border-right"></div>
                                         <div class="d-flex flex-column flex-1">
                                             <div class="bg-fusion-600 border-bottom py-1"></div>
                                             <div class="bg-fusion-300 flex-1 pt-3 pb-3 px-2">
-                                                <div class="py-3 opacity-30" style="background:url('img/demo/s-1.png') top left no-repeat;background-size: 100%;"></div>
+                                                <div class="py-3 opacity-30"
+                                                    style="background:url('img/demo/s-1.png') top left no-repeat;background-size: 100%;">
+                                                </div>
                                             </div>
                                         </div>
                                     </div>
@@ -2017,10 +2410,12 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                         <div class="pl-5 pr-3 py-3 bg-faded">
                             <div class="row no-gutters">
                                 <div class="col-6 pr-1">
-                                    <a href="#" class="btn btn-outline-danger fw-500 btn-block" data-action="app-reset">Reset Settings</a>
+                                    <a href="#" class="btn btn-outline-danger fw-500 btn-block"
+                                        data-action="app-reset">Reset Settings</a>
                                 </div>
                                 <div class="col-6 pl-1">
-                                    <a href="#" class="btn btn-danger fw-500 btn-block" data-action="factory-reset">Factory Reset</a>
+                                    <a href="#" class="btn btn-danger fw-500 btn-block"
+                                        data-action="factory-reset">Factory Reset</a>
                                 </div>
                             </div>
                         </div>
@@ -2115,6 +2510,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                     require(["site"], loadedJsPack)
             });
         }
+        
 
         /**
          * 全數套件讀取完成 Callback
@@ -2236,10 +2632,25 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                 }
 
             })
+
+            // 圖資管理
+            onEvent("click", "[name=topGraphBtn]", function () {
+                let page = $(this).data("page");
+                $("#app").load(`_${page}.html`, loadCallback);
+            })
+
+            onEvent("click", "[name=topFunBtn]", function () {
+                let page = $(this).data("page");
+
+                if (page != "systemMonitor") {
+                    $("#sysMonBtnList .dropdown-item").removeClass("active");
+                    pageAct.sysMainTag = null;
+            }
         }
 
     </script>
 
 </body>
 <!-- END Body -->
-</html>
+
+</html>
\ No newline at end of file
diff --git a/Frontend/js/n4js/bajatest.js b/Frontend/js/n4js/bajatest.js
index e06b3b0..1b74869 100644
--- a/Frontend/js/n4js/bajatest.js
+++ b/Frontend/js/n4js/bajatest.js
@@ -189,80 +189,3 @@ function BajaSubscribeDevicesByBql() {
     });
 }
 
-function getElevatorInfoByBaja(path, callback) {
-    var _result = "";
-    var _ss = '{';
-    var _index = 0;
-    //
-    require(['baja!'], function (baja) {
-        baja.Ord.make("local:|foxs:|station:|slot:/TPE/B1/ELEV/EL/R2F/NA/ELEV1/N1|bql:select name, displayName, out, out.value, slotPath, parent.name as 'device_number' from control:ControlPoint where name = 'CP' or name = 'RD' or name = 'DS' or name = 'ST' or name = 'LOAD' or name = 'MID' or name = 'HAND' or name = 'IND' or name = 'MD' or name = 'DNO'").get()
-            .then(function (table) {
-                return table.cursor({
-                    each: function (record) {
-                        var item = null;
-                        var value = null;
-                        if (record.get('name') == "CP") { 
-                            item = "floor";
-                            value = record.get('out').get('value');
-                        }
-                        else if (record.get('name') == "RD") { //UP or DOWN
-                            item = "direction";
-                            value = record.get('out').get('value');
-                        }
-                        else if (record.get('name') == "DS") {
-                            item = "door_state";
-                            value = record.get('out').get('value') == true ? "OPEN" : "CLOSE";;
-                        }
-                        else if (record.get('name') == "ST") {
-                            item = "running_status";
-                            value = record.get('out').get('value');
-                        }
-                        else if (record.get('name') == "LOAD") {
-                            item = "loading";
-                            value = record.get('out').get('value');
-                        }
-                        else if (record.get('name') == "MID") {
-                            item = "maintenance";
-                            value = record.get('out').get('value');
-                        }
-                        else if (record.get('name') == "HAND") {
-                            item = "manual";
-                            value = record.get('out').get('value');
-                        }
-                        else if (record.get('name') == "IND") {
-                            item = "independent";
-                            value = record.get('out').get('value');
-                        }
-                        else if (record.get('name') == "MD") {
-                            item = "vip";
-                            value = record.get('out').get('value');
-                        }
-                        else if (record.get('name') == "DNO") {
-                            item = "automatic";
-                            value = record.get('out').get('value');
-                        }
-                        
-                        if (item != null && item != "")
-                        {
-                            if (_index == 0)
-                                _ss += '{"item":"' + item + '", "value":"' + value + '"}';
-                            else
-                                _ss += ',{"item":"' + item + '", "value":"' + value + '"}';
-                            _index++;
-                        }
-
-                        
-                    },
-                    after: function () {
-                        _result += '{' + '"count": ' + _index + ', "data":[';
-                        _result += _ss;
-                        _result += ']}';
-                        if (typeof callback === 'function') {
-                            callback(_result);
-                        }
-                    }
-                });
-            });
-    });
-}
-
diff --git a/Frontend/js/n4js/elevatorbaja.js b/Frontend/js/n4js/elevatorbaja.js
new file mode 100644
index 0000000..c357cff
--- /dev/null
+++ b/Frontend/js/n4js/elevatorbaja.js
@@ -0,0 +1,77 @@
+
+
+function getElevatorInfoByBaja(path, callback) {
+    var _result = "";
+    var _ss = '{';
+    var _index = 0;
+    //
+    require(['baja!'], function (baja) {
+        baja.Ord.make("local:|foxs:|station:|slot:/" + path + "|bql:select name, displayName, out, out.value, slotPath, parent.name as 'device_number' from control:ControlPoint where name = 'CP' or name = 'RD' or name = 'DS' or name = 'ST' or name = 'LOAD' or name = 'MID' or name = 'HAND' or name = 'IND' or name = 'MD' or name = 'DNO'").get()
+            .then(function (table) {
+                return table.cursor({
+                    each: function (record) {
+                        var item = null;
+                        var value = null;
+                        if (record.get('name') == "CP") {
+                            item = "floor";
+                            value = record.get('out').get('value');
+                        }
+                        else if (record.get('name') == "RD") { //UP or DOWN
+                            item = "direction";
+                            value = record.get('out').get('value');
+                        }
+                        else if (record.get('name') == "DS") {
+                            item = "door_state";
+                            value = record.get('out').get('value') == true ? "OPEN" : "CLOSE";
+                        }
+                        else if (record.get('name') == "ST") {
+                            item = "running_status";
+                            value = record.get('out').get('value');
+                        }
+                        else if (record.get('name') == "LOAD") {
+                            item = "loading";
+                            value = record.get('out').get('value');
+                        }
+                        else if (record.get('name') == "MID") {
+                            item = "maintenance";
+                            value = record.get('out').get('value');
+                        }
+                        else if (record.get('name') == "HAND") {
+                            item = "manual";
+                            value = record.get('out').get('value');
+                        }
+                        else if (record.get('name') == "IND") {
+                            item = "independent";
+                            value = record.get('out').get('value');
+                        }
+                        else if (record.get('name') == "MD") {
+                            item = "vip";
+                            value = record.get('out').get('value');
+                        }
+                        else if (record.get('name') == "DNO") {
+                            item = "automatic";
+                            value = record.get('out').get('value');
+                        }
+
+                        if (item != null && item != "") {
+                            if (_index == 0)
+                                _ss += '{"item":"' + item + '", "value":"' + value + '"}';
+                            else
+                                _ss += ',{"item":"' + item + '", "value":"' + value + '"}';
+                            _index++;
+                        }
+
+
+                    },
+                    after: function () {
+                        _result += '{' + '"count": ' + _index + ', "data":[';
+                        _result += _ss;
+                        _result += ']}';
+                        if (typeof callback === 'function') {
+                            callback(_result);
+                        }
+                    }
+                });
+            });
+    });
+}
diff --git a/FrontendWebApi/ApiControllers/DeviceManageController.cs b/FrontendWebApi/ApiControllers/DeviceManageController.cs
index ad78366..135e395 100644
--- a/FrontendWebApi/ApiControllers/DeviceManageController.cs
+++ b/FrontendWebApi/ApiControllers/DeviceManageController.cs
@@ -61,16 +61,16 @@ namespace FrontendWebApi.ApiControllers
             {
                 var dbsub = await frontendRepository.GetAllAsync<HistoryDBMainSub>(
                     @$"select distinct v1.system_key main_name, v1.system_value main_system_tag, v2.system_key sub_name, v2.system_value sub_system_tag, v1.system_priority, v2.system_priority,
-                                dk.device_normal_color, dk.device_close_color, dk.device_error_color,
-                                di.full_name as device_item_name, di.points as device_item_points, di.unit as device_item_unit, di.is_show_riserDiagram as device_item_is_show_riserDiagram,
-                                di.is_controll as device_item_is_controll, di.is_bool as device_item_is_bool, di.is_link as device_item_is_link
+                                dk.device_normal_color, dk.device_close_color, dk.device_error_color
+                                -- di.full_name as device_item_name, di.points as device_item_points, di.unit as device_item_unit, di.is_show_riserDiagram as device_item_is_show_riserDiagram,
+                                -- di.is_controll as device_item_is_controll, di.is_bool as device_item_is_bool, di.is_link as device_item_is_link
                         from role_auth a
                         join auth_page b on a.AuthCode = b.AuthCode
                         join userinfo c on c.role_guid = a.role_guid
                         join variable v2 on b.ShowView = v2.id and v2.system_type = @sub_system_type
                         join variable v1 on v1.id = v2.system_parent_id and v1.system_type = @main_system_type
                         left join device_kind dk on v1.system_value = dk.device_system_tag and v2.system_value = dk.device_name_tag and dk.device_building_tag = @building_tag
-                        left join device_item di on v2.system_value = di.device_name_tag and v1.system_value = di.device_system_tag and di.deleted = 0
+                        -- left join device_item di on v2.system_value = di.device_name_tag and v1.system_value = di.device_system_tag and di.deleted = 0
                         where c.account = @account
                         order by v1.system_priority, v2.system_priority", new { @account = myUser.account, @sub_system_type = sub_system_type, @main_system_type = main_system_type, @building_tag = fd.building_tag });
                 var mains = dbsub.GroupBy(a => a.main_system_tag).ToList();
diff --git a/FrontendWebApi/ApiControllers/HistoryController.cs b/FrontendWebApi/ApiControllers/HistoryController.cs
index 649b40c..9daf30a 100644
--- a/FrontendWebApi/ApiControllers/HistoryController.cs
+++ b/FrontendWebApi/ApiControllers/HistoryController.cs
@@ -91,11 +91,6 @@ namespace FrontendWebApi.ApiControllers
             sheet.SetColumnWidth(0, 4 * 160 * 12);
             sheet.SetColumnWidth(1, 4 * 160 * 12);
             sheet.SetColumnWidth(2, 4 * 160 * 12);
-            sheet.SetColumnWidth(3, 4 * 160 * 12);
-            sheet.SetColumnWidth(4, 4 * 160 * 12);
-            sheet.SetColumnWidth(5, 4 * 160 * 12);
-            sheet.SetColumnWidth(6, 4 * 160 * 12);
-            sheet.SetColumnWidth(7, 4 * 160 * 12);
             ICell cell = row.CreateCell(0);
             cell.SetCellValue("設備名稱");
             cell.CellStyle = styleLine12;
@@ -152,7 +147,7 @@ namespace FrontendWebApi.ApiControllers
         /// <returns></returns>
         [HttpPost]
         [Route("api/History/GetMainSub")]
-        public async Task<ActionResult<ApiResult<History_MainSubBuildFloor>>> GetMainSub()
+        public async Task<ActionResult<ApiResult<History_MainSubBuildFloor>>> GetMainSub([FromBody] HistoryFind hf)
         {
             ApiResult<History_MainSubBuildFloor> apiResult = new ApiResult<History_MainSubBuildFloor>(jwt_str);
             if (!jwtlife)
@@ -160,6 +155,13 @@ namespace FrontendWebApi.ApiControllers
                 apiResult.Code = "5000";
                 return BadRequest(apiResult);
             }
+            else if (string.IsNullOrEmpty(hf.building_tag))
+            {
+                apiResult.Code = "0002";
+                apiResult.Msg = "必須選擇東別";
+                return apiResult;
+            }
+
             try
             {
                 var dbsub = await frontendRepository.GetAllAsync<HistoryDBMainSub>(
@@ -176,9 +178,9 @@ namespace FrontendWebApi.ApiControllers
                         join auth_page b on a.AuthCode = b.AuthCode
                         join userinfo c on c.role_guid = a.role_guid
                         join building d on d.building_tag = b.building_tag
-                        where c.account = '{myUser.account}'
+                        where c.account = @account and d.building_tag = @building_tag
                         order by d.priority 
-                        ", new { @account = myUser.account });
+                        ", new { @account = myUser.account, @building_tag = hf.building_tag });
                 var mains = dbsub.GroupBy(a => a.main_system_tag).ToList();
                 apiResult.Data = new History_MainSubBuildFloor();
                 apiResult.Data.history_Main_Systems = new List<History_Main_system>();
@@ -189,12 +191,12 @@ namespace FrontendWebApi.ApiControllers
                     history_Main_System.full_name = main.Select(a => a.main_name).FirstOrDefault();
                     history_Main_System.History_Sub_systems = new List<History_Sub_system>();
 
-                    var subs = main.GroupBy(a => a.main_system_tag).ToList();
+                    var subs = dbsub.Where(x => x.main_system_tag == main.Select(m => m.main_system_tag).FirstOrDefault()).ToList();
                     foreach (var sub in subs)
                     {
                         History_Sub_system history_Sub_System = new History_Sub_system();
-                        history_Sub_System.full_name = sub.Select(a => a.sub_name).FirstOrDefault();
-                        history_Sub_System.sub_system_tag = sub.Select(a => a.sub_system_tag).FirstOrDefault();
+                        history_Sub_System.full_name = sub.sub_name;
+                        history_Sub_System.sub_system_tag = sub.sub_system_tag;
                         history_Main_System.History_Sub_systems.Add(history_Sub_System);
                     }
                     apiResult.Data.history_Main_Systems.Add(history_Main_System);
diff --git a/FrontendWebApi/Models/HistoryClass.cs b/FrontendWebApi/Models/HistoryClass.cs
index 519ea79..802dea2 100644
--- a/FrontendWebApi/Models/HistoryClass.cs
+++ b/FrontendWebApi/Models/HistoryClass.cs
@@ -72,6 +72,10 @@ namespace FrontendWebApi.Models
         public byte device_item_is_link { get; set; }
     }
 
+    public class HistoryFind
+    {
+        public string building_tag { get; set; }
+    }
     public class BuildingFloorRawData
     {
         public string building_guid { get; set; }