Selaa lähdekoodia

修改首页及对接部分接口

yangg 8 kuukautta sitten
vanhempi
sitoutus
760df934b7
79 muutettua tiedostoa jossa 18578 lisäystä ja 35 poistoa
  1. 0 0
      dist/index.html
  2. 0 0
      dist/static/css/app.bf39f5ce.css
  3. 0 1
      dist/static/css/chunk-151edd59.31fb25ea.css
  4. 1 0
      dist/static/css/chunk-31e74231.8940e437.css
  5. 0 0
      dist/static/css/chunk-37dd5324.a6c37972.css
  6. 1 0
      dist/static/css/chunk-59e429fa.60dafc2f.css
  7. 0 0
      dist/static/css/chunk-632c3578.7b2c4a29.css
  8. 0 0
      dist/static/css/chunk-66528fd1.74adc40c.css
  9. 0 0
      dist/static/css/chunk-696e880a.775a21e3.css
  10. 0 0
      dist/static/css/chunk-a7d4185a.c2769c64.css
  11. 0 0
      dist/static/css/chunk-b9d5d1c4.5e1eb2f5.css
  12. 0 0
      dist/static/js/app.51e8e333.js
  13. 0 0
      dist/static/js/app.72e508e7.js
  14. 0 0
      dist/static/js/chunk-052bf2e6.d648d662.js
  15. 0 0
      dist/static/js/chunk-09f78c22.e375255e.js
  16. 0 0
      dist/static/js/chunk-0a1f2758.66738697.js
  17. 0 0
      dist/static/js/chunk-0aaa67d8.51c218ca.js
  18. 0 0
      dist/static/js/chunk-0c6ee714.13219a14.js
  19. 0 0
      dist/static/js/chunk-0ec56e2a.21536c30.js
  20. 0 0
      dist/static/js/chunk-10bfc27e.889b7ca2.js
  21. 0 0
      dist/static/js/chunk-11ff1a32.7aac27ab.js
  22. 0 0
      dist/static/js/chunk-138f7583.ee4f864c.js
  23. 0 0
      dist/static/js/chunk-151edd59.55f45e0c.js
  24. 0 0
      dist/static/js/chunk-16694b50.e2c86381.js
  25. 0 0
      dist/static/js/chunk-254ac533.941f6a78.js
  26. 0 0
      dist/static/js/chunk-276e7119.f1f79dff.js
  27. 0 0
      dist/static/js/chunk-2d0d3705.05bfe8f1.js
  28. 0 0
      dist/static/js/chunk-31e74231.4160fdd7.js
  29. 0 0
      dist/static/js/chunk-35464144.71c42830.js
  30. 0 0
      dist/static/js/chunk-37dd5324.646b6f25.js
  31. 0 0
      dist/static/js/chunk-386d37cb.7c07098c.js
  32. 0 0
      dist/static/js/chunk-44eee83d.d95ed6ec.js
  33. 0 0
      dist/static/js/chunk-4a4ae82e.3e38df86.js
  34. 0 0
      dist/static/js/chunk-4ac7f82e.22be1c79.js
  35. 0 0
      dist/static/js/chunk-52f685c2.a7d5332e.js
  36. 0 0
      dist/static/js/chunk-59e429fa.c143b3a5.js
  37. 0 0
      dist/static/js/chunk-5a3bdf57.315dbfee.js
  38. 0 0
      dist/static/js/chunk-5a750430.88caa78c.js
  39. 0 0
      dist/static/js/chunk-6111b966.594749ca.js
  40. 0 0
      dist/static/js/chunk-632c3578.8aa9ba55.js
  41. 0 0
      dist/static/js/chunk-65d6e2a1.e1167b10.js
  42. 0 0
      dist/static/js/chunk-66528fd1.125d690a.js
  43. 0 0
      dist/static/js/chunk-683feb49.f15a4691.js
  44. 1 1
      dist/static/js/chunk-696e880a.08ecd45a.js
  45. 0 0
      dist/static/js/chunk-6a80e4ca.e806e11e.js
  46. 0 0
      dist/static/js/chunk-6ddf6871.10b5aa48.js
  47. 0 0
      dist/static/js/chunk-708604c0.4e105d56.js
  48. 0 0
      dist/static/js/chunk-708c45dc.e98e89b6.js
  49. 0 0
      dist/static/js/chunk-712c0160.bf7ef4df.js
  50. 0 0
      dist/static/js/chunk-77bc8fb9.777fcd92.js
  51. 0 0
      dist/static/js/chunk-7a88741c.f949857f.js
  52. 0 0
      dist/static/js/chunk-7efdc04a.85678707.js
  53. 0 0
      dist/static/js/chunk-9235c1ae.68c75969.js
  54. 0 0
      dist/static/js/chunk-a7d4185a.0402b2d9.js
  55. 0 0
      dist/static/js/chunk-b9108494.e34014d5.js
  56. 0 0
      dist/static/js/chunk-b9d5d1c4.8122833a.js
  57. 0 0
      dist/static/js/chunk-cbf68ff6.53b06e0d.js
  58. 0 0
      dist/static/js/chunk-d09dbc1a.15e9f254.js
  59. 0 0
      dist/static/js/chunk-d4c547ca.1741e83f.js
  60. 0 0
      dist/static/js/chunk-ec55d346.a8c1bc36.js
  61. 0 0
      dist/static/js/chunk-libs.9adf6390.js
  62. 0 0
      dist/static/js/vendors~canvg.8d0627e7.js
  63. 0 0
      dist/static/js/vendors~pdfmake.52d6ad0f.js
  64. 2 0
      dist/static/js/vendors~xlsx.4a3e7c6b.js
  65. 1 0
      package.json
  66. 42 1
      src/api/knowledge.js
  67. 10 0
      src/api/sourceData.js
  68. 11 0
      src/components/BootstrapWrapper/index.vue
  69. 3 3
      src/layout/components/Navbar.vue
  70. 6 0
      src/router/index.js
  71. 1390 0
      src/views/dashboard/admin/chart.vue
  72. 1 1
      src/views/dashboard/admin/components/LineChart.vue
  73. 4 0
      src/views/dashboard/admin/css/bootstrap.min.css
  74. 16723 0
      src/views/dashboard/admin/css/style.css
  75. 1 1
      src/views/dashboard/index.vue
  76. 119 11
      src/views/document/com/components/sourceEs/index.vue
  77. 20 12
      src/views/knowledgeMenu/category/knowledgeSet.vue
  78. 4 4
      src/views/middPage/index.vue
  79. 238 0
      src/views/templateLoca/index.vue

Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 0 - 0
dist/index.html


Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 0 - 0
dist/static/css/app.bf39f5ce.css


+ 0 - 1
dist/static/css/chunk-151edd59.31fb25ea.css

@@ -1 +0,0 @@
-.midd-page[data-v-2eae1310]{padding:20px}.el-icon-edit[data-v-2eae1310]{font-size:14px;color:#409eff}[data-v-2eae1310] .model-gen-1{background-color:#e6f3ff!important}[data-v-2eae1310] .model-gen-1.el-table__cell{background-color:#e6f3ff!important;color:#333!important}[data-v-2eae1310] .model-gen-2{background-color:#f0e6ff!important}[data-v-2eae1310] .model-gen-2.el-table__cell{background-color:#f0e6ff!important;color:#333!important}.header[data-v-2eae1310]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin:15px 0}.h_left p[data-v-2eae1310]{margin-top:0}.search-container[data-v-2eae1310]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.search-box[data-v-2eae1310]{width:350px}.custom-search-input[data-v-2eae1310] :deep(.el-input__inner){height:40px;line-height:40px;border-right:none;border-radius:4px 0 0 4px}.custom-search-input[data-v-2eae1310] :deep(.el-input-group__append){padding:0;border:none;background-color:transparent}.custom-search-input[data-v-2eae1310] :deep(.el-input-group__append .el-button){height:40px;padding:0 20px;border-radius:0 4px 4px 0;margin:0}.custom-search-input[data-v-2eae1310] :deep(.el-input__inner:hover){border-color:#dcdfe6}.custom-search-input[data-v-2eae1310] :deep(.el-input__inner:focus){border-color:#409eff}

+ 1 - 0
dist/static/css/chunk-31e74231.8940e437.css

@@ -0,0 +1 @@
+.midd-page[data-v-1045dd64]{padding:20px}.el-icon-edit[data-v-1045dd64]{font-size:14px;color:#409eff}[data-v-1045dd64] .model-gen-1{background-color:#e6f3ff!important}[data-v-1045dd64] .model-gen-1.el-table__cell{background-color:#e6f3ff!important;color:#333!important}[data-v-1045dd64] .model-gen-2{background-color:#f0e6ff!important}[data-v-1045dd64] .model-gen-2.el-table__cell{background-color:#f0e6ff!important;color:#333!important}.header[data-v-1045dd64]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin:15px 0}.h_left p[data-v-1045dd64]{margin-top:0}.search-container[data-v-1045dd64]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.search-box[data-v-1045dd64]{width:350px}.custom-search-input[data-v-1045dd64] :deep(.el-input__inner){height:40px;line-height:40px;border-right:none;border-radius:4px 0 0 4px}.custom-search-input[data-v-1045dd64] :deep(.el-input-group__append){padding:0;border:none;background-color:transparent}.custom-search-input[data-v-1045dd64] :deep(.el-input-group__append .el-button){height:40px;padding:0 20px;border-radius:0 4px 4px 0;margin:0}.custom-search-input[data-v-1045dd64] :deep(.el-input__inner:hover){border-color:#dcdfe6}.custom-search-input[data-v-1045dd64] :deep(.el-input__inner:focus){border-color:#409eff}

Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 0 - 0
dist/static/css/chunk-37dd5324.a6c37972.css


+ 1 - 0
dist/static/css/chunk-59e429fa.60dafc2f.css

@@ -0,0 +1 @@
+.template-location-container[data-v-48b6671c]{padding:20px}.operation-bar[data-v-48b6671c]{margin-bottom:20px}

Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 0 - 0
dist/static/css/chunk-632c3578.7b2c4a29.css


Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 0 - 0
dist/static/css/chunk-66528fd1.74adc40c.css


+ 0 - 0
dist/static/css/chunk-4c2b6424.775a21e3.css → dist/static/css/chunk-696e880a.775a21e3.css


Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 0 - 0
dist/static/css/chunk-a7d4185a.c2769c64.css


+ 0 - 0
dist/static/css/chunk-6ff59d76.5e1eb2f5.css → dist/static/css/chunk-b9d5d1c4.5e1eb2f5.css


Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 0 - 0
dist/static/js/app.51e8e333.js


Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 0 - 0
dist/static/js/app.72e508e7.js


Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 0 - 0
dist/static/js/chunk-052bf2e6.d648d662.js


+ 0 - 0
dist/static/js/chunk-09f78c22.b631aafb.js → dist/static/js/chunk-09f78c22.e375255e.js


+ 0 - 0
dist/static/js/chunk-0a1f2758.8bf204a0.js → dist/static/js/chunk-0a1f2758.66738697.js


Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 0 - 0
dist/static/js/chunk-0aaa67d8.51c218ca.js


Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 0 - 0
dist/static/js/chunk-0c6ee714.13219a14.js


+ 0 - 0
dist/static/js/chunk-0ec56e2a.882f74a6.js → dist/static/js/chunk-0ec56e2a.21536c30.js


+ 0 - 0
dist/static/js/chunk-10bfc27e.3daf87c2.js → dist/static/js/chunk-10bfc27e.889b7ca2.js


+ 0 - 0
dist/static/js/chunk-11ff1a32.349e1f4a.js → dist/static/js/chunk-11ff1a32.7aac27ab.js


+ 0 - 0
dist/static/js/chunk-138f7583.d6989454.js → dist/static/js/chunk-138f7583.ee4f864c.js


Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 0 - 0
dist/static/js/chunk-151edd59.55f45e0c.js


Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 0 - 0
dist/static/js/chunk-16694b50.e2c86381.js


+ 0 - 0
dist/static/js/chunk-254ac533.8b4d0534.js → dist/static/js/chunk-254ac533.941f6a78.js


Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 0 - 0
dist/static/js/chunk-276e7119.f1f79dff.js


+ 0 - 0
dist/static/js/chunk-2d0d3705.eefef99a.js → dist/static/js/chunk-2d0d3705.05bfe8f1.js


Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 0 - 0
dist/static/js/chunk-31e74231.4160fdd7.js


+ 0 - 0
dist/static/js/chunk-35464144.31565a8d.js → dist/static/js/chunk-35464144.71c42830.js


Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 0 - 0
dist/static/js/chunk-37dd5324.646b6f25.js


Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 0 - 0
dist/static/js/chunk-386d37cb.7c07098c.js


+ 0 - 0
dist/static/js/chunk-44eee83d.716e73e5.js → dist/static/js/chunk-44eee83d.d95ed6ec.js


Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 0 - 0
dist/static/js/chunk-4a4ae82e.3e38df86.js


+ 0 - 0
dist/static/js/chunk-4ac7f82e.d8e8dbbf.js → dist/static/js/chunk-4ac7f82e.22be1c79.js


+ 0 - 0
dist/static/js/chunk-52f685c2.d8e526ce.js → dist/static/js/chunk-52f685c2.a7d5332e.js


Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 0 - 0
dist/static/js/chunk-59e429fa.c143b3a5.js


+ 0 - 0
dist/static/js/chunk-5a3bdf57.d59f9cf1.js → dist/static/js/chunk-5a3bdf57.315dbfee.js


Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 0 - 0
dist/static/js/chunk-5a750430.88caa78c.js


+ 0 - 0
dist/static/js/chunk-6111b966.b3c9e2d0.js → dist/static/js/chunk-6111b966.594749ca.js


Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 0 - 0
dist/static/js/chunk-632c3578.8aa9ba55.js


Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 0 - 0
dist/static/js/chunk-65d6e2a1.e1167b10.js


Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 0 - 0
dist/static/js/chunk-66528fd1.125d690a.js


+ 0 - 0
dist/static/js/chunk-683feb49.f653f473.js → dist/static/js/chunk-683feb49.f15a4691.js


Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 1 - 1
dist/static/js/chunk-696e880a.08ecd45a.js


+ 0 - 0
dist/static/js/chunk-6a80e4ca.cd3066c1.js → dist/static/js/chunk-6a80e4ca.e806e11e.js


+ 0 - 0
dist/static/js/chunk-6ddf6871.8c0ac814.js → dist/static/js/chunk-6ddf6871.10b5aa48.js


Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 0 - 0
dist/static/js/chunk-708604c0.4e105d56.js


+ 0 - 0
dist/static/js/chunk-708c45dc.80486961.js → dist/static/js/chunk-708c45dc.e98e89b6.js


+ 0 - 0
dist/static/js/chunk-712c0160.77baeeba.js → dist/static/js/chunk-712c0160.bf7ef4df.js


+ 0 - 0
dist/static/js/chunk-77bc8fb9.5ce2c3e6.js → dist/static/js/chunk-77bc8fb9.777fcd92.js


+ 0 - 0
dist/static/js/chunk-7a88741c.2ff345bd.js → dist/static/js/chunk-7a88741c.f949857f.js


Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 0 - 0
dist/static/js/chunk-7efdc04a.85678707.js


+ 0 - 0
dist/static/js/chunk-9235c1ae.86d79577.js → dist/static/js/chunk-9235c1ae.68c75969.js


Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 0 - 0
dist/static/js/chunk-a7d4185a.0402b2d9.js


Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 0 - 0
dist/static/js/chunk-b9108494.e34014d5.js


Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 0 - 0
dist/static/js/chunk-b9d5d1c4.8122833a.js


Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 0 - 0
dist/static/js/chunk-cbf68ff6.53b06e0d.js


+ 0 - 0
dist/static/js/chunk-d09dbc1a.2fe169db.js → dist/static/js/chunk-d09dbc1a.15e9f254.js


+ 0 - 0
dist/static/js/chunk-d4c547ca.d6c299dc.js → dist/static/js/chunk-d4c547ca.1741e83f.js


Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 0 - 0
dist/static/js/chunk-ec55d346.a8c1bc36.js


+ 0 - 0
dist/static/js/chunk-libs.04661dff.js → dist/static/js/chunk-libs.9adf6390.js


Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 0 - 0
dist/static/js/vendors~canvg.8d0627e7.js


Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 0 - 0
dist/static/js/vendors~pdfmake.52d6ad0f.js


Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 2 - 0
dist/static/js/vendors~xlsx.4a3e7c6b.js


+ 1 - 0
package.json

@@ -15,6 +15,7 @@
     "test:ci": "npm run lint && npm run test:unit"
     "test:ci": "npm run lint && npm run test:unit"
   },
   },
   "dependencies": {
   "dependencies": {
+    "@amcharts/amcharts4": "^4.10.39",
     "@amcharts/amcharts5": "^5.10.7",
     "@amcharts/amcharts5": "^5.10.7",
     "@handsontable-pro/vue": "^3.1.1",
     "@handsontable-pro/vue": "^3.1.1",
     "@handsontable/vue": "^14.1.0",
     "@handsontable/vue": "^14.1.0",

+ 42 - 1
src/api/knowledge.js

@@ -472,4 +472,45 @@ export function analysisPro(data) {
     method: 'post',
     method: 'post',
     data
     data
   })
   })
-} 
+} 
+
+
+/* 文献点位列表 */
+
+export function rawSearch(data) {
+  return request({
+    url: '/project-raw-data/search',
+    method: 'post',
+    data
+  })
+}
+
+/* 导出  /project-raw-data/export-template*/
+
+export function export_template(data) {
+  return request({
+    url: '/project-raw-data/export-template',
+    method: 'get',
+    data
+  })
+}
+
+/* 导入 /project-raw-data/import  */
+
+export function rawImport(data) {
+  return request({
+    url: '/project-raw-data/import',
+    method: 'post',
+    data
+  })
+}
+
+/* 获取列表 */
+
+export function rawList(data) {
+  return request({
+    url: '/project-raw-data/list',
+    method: 'post',
+    data
+  })
+}

+ 10 - 0
src/api/sourceData.js

@@ -118,4 +118,14 @@ export function uploadImage(data) {
     method: 'post',
     method: 'post',
     data
     data
   })
   })
+}
+
+/* 批量替换   */
+
+export function batch_content(data) {
+  return request({
+    url: '/project-raw-data/batch-content',
+    method: 'post',
+    data
+  })
 }
 }

+ 11 - 0
src/components/BootstrapWrapper/index.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="bootstrap-wrapper">
+    <slot></slot>
+  </div>
+</template>
+  
+  <style>
+.bootstrap-wrapper {
+  @import "@/views/dashboard/admin/css/bootstrap.min.css";
+}
+</style>

+ 3 - 3
src/layout/components/Navbar.vue

@@ -1,5 +1,5 @@
 <template>
 <template>
-  <div class="navbar">
+  <div class="navbars">
     <hamburger
     <hamburger
       id="hamburger-container"
       id="hamburger-container"
       :is-active="sidebar.opened"
       :is-active="sidebar.opened"
@@ -16,7 +16,7 @@
         </div>
         </div>
         <search id="header-search" class="right-menu-item" />
         <search id="header-search" class="right-menu-item" />
         <error-log class="errLog-container right-menu-item hover-effect" />
         <error-log class="errLog-container right-menu-item hover-effect" />
-        <screenfull id="screenfull" class="right-menu-item hover-effect" />
+        <!-- <screenfull id="screenfull" class="right-menu-item hover-effect" /> -->
         <el-tooltip content="字号" effect="dark" placement="bottom">
         <el-tooltip content="字号" effect="dark" placement="bottom">
           <size-select id="size-select" class="right-menu-item hover-effect" />
           <size-select id="size-select" class="right-menu-item hover-effect" />
         </el-tooltip>
         </el-tooltip>
@@ -100,7 +100,7 @@ export default {
 </script>
 </script>
 
 
 <style lang="scss" scoped>
 <style lang="scss" scoped>
-.navbar {
+.navbars {
   height: 50px;
   height: 50px;
   overflow: hidden;
   overflow: hidden;
   position: relative;
   position: relative;

+ 6 - 0
src/router/index.js

@@ -373,6 +373,12 @@ export const asyncRoutes = [
         name: 'dataCenterCategorySearch',
         name: 'dataCenterCategorySearch',
         meta: { title: '原始数据分类', noCache: true,roles: ['admin'] }
         meta: { title: '原始数据分类', noCache: true,roles: ['admin'] }
       },
       },
+      {
+        path: 'templateLoca/index',
+        component: () => import('@/views/templateLoca/index.vue'),
+        name: 'literature_localist',
+        meta: { title: '文献点位信息', noCache: true,roles: ['admin'] }
+      },
     ]
     ]
   },
   },
     {
     {

+ 1390 - 0
src/views/dashboard/admin/chart.vue

@@ -0,0 +1,1390 @@
+<template>
+  <div class="bootstrap-scope">
+    <div class="widget-chart">
+      <!-- 主容器 -->
+      <div class="pcoded-main-container">
+        <div class="pcoded-wrapper">
+          <div class="pcoded-content">
+            <div class="pcoded-inner-content">
+              <div class="main-body">
+                <div class="page-wrapper">
+                  <!-- 主要内容区域 -->
+                  <div class="row">
+                    <!-- 云计算存储卡片 -->
+                    <!--  <div class="col-xl-4 col-md-12">
+                      <div class="card">
+                        <div class="card-body pb-0">
+                          <div class="row">
+                            <div class="col-auto">
+                              <h6>云计算</h6>
+                            </div>
+                          </div>
+                          <div class="row mt-2">
+                            <div class="col-auto">
+                              <span class="d-block">
+                               存储
+                              </span>
+                              <h6 class="ms-3 mt-1">10.5 GB</h6>
+                            </div>
+                            <div class="col">
+                              <span class="d-block">
+                               带宽
+                              </span>
+                              <h6 class="ms-3 mt-1">50 GB</h6>
+                            </div>
+                          </div>
+                        </div>
+                        <div ref="storageChart" style="height: 100px"></div>
+                      </div>
+                    </div> -->
+
+                    <div class="col-xl-8">
+                      <div class="card">
+                        <div class="card-header">
+                          <div class="row">
+                            <div class="col">
+                              <h5>C/GPU使用率</h5>
+                            </div>
+                            <!--  <div class="col-auto text-end">
+                              <span>This Month</span>
+                            </div> -->
+                          </div>
+                        </div>
+                        <div class="card-body">
+                          <div class="row mb-2">
+                            <div class="col-auto">
+                              <h4 class="m-0">
+                                {{ cpuValue + "%"
+                                }}<i
+                                  class="feather icon-arrow-up text-c-green"
+                                ></i>
+                              </h4>
+                              <span>CPU使用率</span>
+                            </div>
+                            <div class="col-auto">
+                              <h4 class="m-0">
+                                {{ GpuValue + "%"
+                                }}<i
+                                  class="feather icon-arrow-down text-c-red"
+                                ></i>
+                              </h4>
+                              <span>GPU使用率</span>
+                            </div>
+                            <!--  <div class="col">
+                              <h4 class="m-0">
+                                40.05%<i
+                                  class="feather icon-arrow-up text-c-green"
+                                ></i>
+                              </h4>
+                              <span>Bounce Rate</span>
+                            </div> -->
+                          </div>
+                          <div
+                            ref="siteVisitorChart"
+                            style="height: 285px; width: 100%"
+                          ></div>
+                        </div>
+                      </div>
+                    </div>
+                    <!--  -->
+                    <div class="col-xl-4">
+                      <div class="row">
+                        <!-- 支持分析卡片 -->
+                        <div class="col-xl-12 col-md-6">
+                          <div class="card">
+                            <div class="card-body">
+                              <div class="row">
+                                <div class="col-6">
+                                  <h6>Memory</h6>
+                                </div>
+                                <!-- <div class="col">
+                              <div class="dropdown float-end">
+                                <a
+                                  class="dropdown-toggle text-c-blue"
+                                  href="#"
+                                  data-bs-toggle="dropdown"
+                                >
+                                  最近5个月
+                                </a>
+                                <div class="dropdown-menu dropdown-menu-end">
+                                  <a class="dropdown-item" href="#">1周</a>
+                                  <a class="dropdown-item" href="#">2年</a>
+                                  <a class="dropdown-item" href="#">3个月</a>
+                                </div>
+                              </div>
+                            </div> -->
+                              </div>
+                              <div class="row">
+                                <div class="col-6">
+                                  <h2 class="mt-2 mb-0">
+                                    {{ currentPercentage.total + "GB" }}
+                                  </h2>
+                                  <span>总内存</span>
+                                  <h6 class="mb-0 mt-3">
+                                    空闲内存:
+                                    <span class="text-primary">{{
+                                      currentPercentage.free + "GB"
+                                    }}</span>
+                                  </h6>
+                                  <h6>
+                                    已使用:
+                                    <span class="text-danger">{{
+                                      currentPercentage.used + "GB"
+                                    }}</span>
+                                  </h6>
+                                </div>
+                                <div class="col">
+                                  <!-- 支持工单完成率图表 -->
+                                  <div
+                                    ref="hdComplitedTicket"
+                                    style="height: 130px; width: 100%"
+                                  ></div>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+
+                        <!-- 知识库统计卡片 -->
+                        <div class="col-xl-12 col-md-6">
+                          <div class="card">
+                            <div class="card-body">
+                              <div
+                                class="row"
+                                style="display: flex; align-items: center"
+                              >
+                                <div class="col-auto">
+                                  <h6>知识库统计</h6>
+                                </div>
+                                <div
+                                  class="col"
+                                  style="
+                                    display: flex;
+                                    justify-content: flex-end;
+                                  "
+                                >
+                                  <el-select
+                                    v-model="kenValue"
+                                    @change="kenChange"
+                                    placeholder="请选择"
+                                  >
+                                    <el-option
+                                      v-for="item in kenList"
+                                      :key="item.id"
+                                      :label="item.name"
+                                      :value="item.id"
+                                    >
+                                    </el-option>
+                                  </el-select>
+                                  <!--  <div class="dropdown float-end">
+                                    <a
+                                      class="dropdown-toggle text-c-blue"
+                                      href="#"
+                                      data-bs-toggle="dropdown"
+                                    >
+                                      最近30天
+                                    </a>
+                                    <div
+                                      class="dropdown-menu dropdown-menu-end"
+                                    >
+                                      <a class="dropdown-item" href="#">1周</a>
+                                      <a class="dropdown-item" href="#">2年</a>
+                                      <a class="dropdown-item" href="#"
+                                        >3个月</a
+                                      >
+                                    </div>
+                                  </div> -->
+                                </div>
+                              </div>
+                              <div class="row">
+                                <div class="col-6 p-r-0">
+                                  <template
+                                    v-for="(count, type) in fileTypeCounts"
+                                  >
+                                    <h6
+                                      :key="type"
+                                      class="my-3"
+                                      v-if="
+                                        ['pdf', 'docx', 'xlsx'].includes(
+                                          type.toLowerCase()
+                                        )
+                                      "
+                                    >
+                                      <i
+                                        class="feather"
+                                        :class="getFileTypeIcon(type)"
+                                        style="
+                                          font-size: 20px;
+                                          margin-right: 8px;
+                                        "
+                                        :style="{
+                                          color: getFileTypeColor(type),
+                                        }"
+                                      ></i>
+                                      {{ type.toUpperCase() }}
+                                      <span class="ms-2"> </span>
+                                      <span
+                                        :class="getChangeClass(type)"
+                                        class="ms-2 f-14"
+                                      >
+                                        <i
+                                          class="feather"
+                                          :class="getChangeIcon(type)"
+                                        ></i>
+                                        {{ count }}
+                                        <!-- {{ getChangePercentage(type) }} -->
+                                      </span>
+                                    </h6>
+                                  </template>
+                                </div>
+                                <div class="col-6">
+                                  <!-- 设备占比饼图 -->
+                                  <div
+                                    ref="chartPercent"
+                                    style="height: 131px"
+                                  ></div>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                        <!--  <div class="col-xl-12 col-md-6">
+                          <div class="card">
+                            <div class="card-body">
+                              <h6>Traffic tracker</h6>
+                              <div class="row mt-2">
+                                <div class="col-6">
+                                  <span class="d-block text-uppercase"
+                                    >Inbound</span
+                                  >
+                                  <h3 class="mt-1">180 GB</h3>
+                                  <div
+                                    ref="transactions1"
+                                    style="
+                                      height: 50px;
+                                      width: 100%;
+                                      margin: 0 auto;
+                                    "
+                                  ></div>
+                                </div>
+                                <div class="col-6">
+                                  <span class="d-block text-uppercase"
+                                    >Outbound</span
+                                  >
+                                  <h3 class="mt-1">597.1 GB</h3>
+                                  <div
+                                    ref="transactions2"
+                                    style="
+                                      height: 50px;
+                                      width: 100%;
+                                      margin: 0 auto;
+                                    "
+                                  ></div>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                        <div class="col-xl-12 col-md-6">
+                          <div class="card">
+                            <div class="card-body">
+                              <div class="row d-flex align-items-center">
+                                <div class="col-6 p-r-0">
+                                  <span class="d-block mb-1"
+                                    ><i
+                                      class="fas fa-circle f-10 m-r-5"
+                                      style="color: #a367dc"
+                                    ></i
+                                    >Desktop [66.6%]</span
+                                  >
+                                  <span class="d-block mb-1"
+                                    ><i
+                                      class="fas fa-circle f-10 m-r-5"
+                                      style="color: #67b7dc"
+                                    ></i
+                                    >Mobile [29.7%]</span
+                                  >
+                                  <span class="d-block"
+                                    ><i
+                                      class="fas fa-circle f-10 m-r-5"
+                                      style="color: #6771dc"
+                                    ></i
+                                    >Tablet [38.6%]</span
+                                  >
+                                </div>
+                                <div class="col-6">
+                                  <div
+                                    ref="deviceChart"
+                                    id="device-chart"
+                                    style="height: 140px"
+                                  ></div>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div> -->
+                      </div>
+                    </div>
+
+                    <!-- 其他统计卡片组 -->
+                    <div class="col-sm-12">
+                      <div class="row g-0">
+                        <!-- 交易量卡片 -->
+                        <div class="col-md-4 col-xl-2 col-sm-6">
+                          <div class="card">
+                            <div class="card-body">
+                              <span>知识库数量</span>
+                              <h3>{{ kenList.length }}</h3>
+                              <div
+                                ref="real4Chart"
+                                style="height: 20px; width: 100%"
+                              ></div>
+                            </div>
+                          </div>
+                        </div>
+
+                        <!-- 当前库存卡片 -->
+                        <div class="col-md-4 col-xl-2 col-sm-6">
+                          <div class="card">
+                            <div class="card-body">
+                              <span>文件已解析数量</span>
+                              <h3>50</h3>
+                              <div
+                                ref="real6Chart"
+                                style="height: 20px; width: 100%"
+                              ></div>
+                            </div>
+                          </div>
+                        </div>
+
+                        <!-- 跳出率卡片 -->
+                        <div class="col-md-4 col-xl-2 col-sm-6">
+                          <div class="card">
+                            <div class="card-body">
+                              <span>文件未解析数量</span>
+                              <h3>15</h3>
+                              <div
+                                ref="real1Chart"
+                                style="height: 20px; width: 100%"
+                              ></div>
+                            </div>
+                          </div>
+                        </div>
+
+                        <!-- 订单总额卡片 -->
+                        <div class="col-md-4 col-xl-2 col-sm-6">
+                          <div class="card">
+                            <div class="card-body">
+                              <span>文档数量</span>
+                              <h3>{{ docTotal }}</h3>
+                              <div
+                                ref="real5Chart"
+                                style="height: 20px; width: 100%"
+                              ></div>
+                            </div>
+                          </div>
+                        </div>
+
+                        <!-- 收入卡片 -->
+                        <div class="col-md-4 col-xl-2 col-sm-6">
+                          <div class="card">
+                            <div class="card-body">
+                              <span>模版数量</span>
+                              <h3>{{ temTotal }}</h3>
+                              <div
+                                ref="real2Chart"
+                                style="height: 20px; width: 100%"
+                              ></div>
+                            </div>
+                          </div>
+                        </div>
+
+                        <!-- 新购买卡片 -->
+                        <div class="col-md-4 col-xl-2 col-sm-6">
+                          <div class="card">
+                            <div class="card-body">
+                              <span>模块数量</span>
+                              <h3>{{ pageTotal }}</h3>
+                              <div
+                                ref="real3Chart"
+                                style="height: 20px; width: 100%"
+                              ></div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as am4core from "@amcharts/amcharts4/core";
+import * as am4charts from "@amcharts/amcharts4/charts";
+import am4themes_animated from "@amcharts/amcharts4/themes/animated";
+import BootstrapWrapper from "@/components/BootstrapWrapper/index.vue";
+import { searchlistDoc, searchList } from "@/api/document";
+import {pageTemplate } from "@/api/template";
+import {
+  listBuckets,
+  structure_count,
+  GET_Rbq,
+  gpu_info,
+} from "@/api/knowledge";
+export default {
+  name: "WidgetChart",
+  components: {
+    BootstrapWrapper,
+  },
+  data() {
+    return {
+      charts: {}, // 存储图表实例
+      chartData: {},
+      currentPercentage: {},
+      cpuValue: 0,
+      GpuValue: 0,
+      kenValue: null, //知识库
+      kenList: [],
+      previousCounts: {}, // 用于存储上一次的数量,计算变化率
+      fileTypeCounts: {}, // 用于存储上一次的数量,计算变化率
+      docTotal: 0,
+      temTotal: 0,
+      pageTotal: 0,
+    };
+  },
+  watch: {
+    $route: {
+      immediate: true,
+      handler(newRoute) {
+        this.isOnDashboard = newRoute.path === "/dashboard";
+        this.handleRouteChange();
+      },
+    },
+  },
+
+  mounted() {
+    // 使用动画主题
+    am4core.useTheme(am4themes_animated);
+    this.init();
+    // 初始化各个图表
+    this.initHdComplitedTicket();
+    this.initChartPercent();
+    this.initStorageChart();
+    this.initRealTimeCharts();
+    this.initSiteVisitorChart(); // 添加这行
+    this.initTransactionCharts();
+    this.initDeviceChart(); // 添加这行
+  },
+
+  beforeDestroy() {
+    // 销毁所有图表实例
+    Object.values(this.charts).forEach((chart) => {
+      if (chart) {
+        chart.dispose();
+      }
+    });
+  },
+
+  methods: {
+    closeWebSocket() {
+      if (this.ws) {
+        this.ws.close();
+        this.ws = null;
+      }
+    },
+    handleRouteChange() {
+      if (this.isOnDashboard) {
+        this.initWebSocket(); // 初始化 WebSocket
+      } else {
+        this.closeWebSocket();
+      }
+    },
+    /* websocket 请求 */
+    initWebSocket() {
+      // 获取基础 API 地址并替换 http/https 为 ws/wss
+      const wsUrl = process.env.VUE_APP_BASE_API.replace(/^http/, "ws");
+      // 创建 WebSocket 连接
+      this.ws = new WebSocket(`${wsUrl}/ws/monitoring`);
+
+      // 连接成功回调
+      this.ws.onopen = () => {
+        console.log("WebSocket连接成功");
+      };
+
+      // 接收消息回调
+      this.ws.onmessage = (event) => {
+        try {
+          const data = JSON.parse(event.data);
+          // 检查数据结构是否完整
+          if (
+            data &&
+            data.data &&
+            data.data.system &&
+            data.data.system.cpu &&
+            data.data.system.cpu.memory
+          ) {
+            // 更新图表数据
+            this.chartData = data;
+            this.cpuValue = data.data.system.cpu.total_usage;
+            this.GpuValue = data.data.system.gpu.devices[0]?.power || 0;
+            this.currentPercentage = data.data.system.cpu.memory;
+          } else {
+            console.warn("Received incomplete data structure:", data);
+          }
+        } catch (error) {
+          console.error("Error processing WebSocket message:", error);
+        }
+      };
+
+      // 连接关闭回调
+      this.ws.onclose = () => {
+        console.log("WebSocket连接关闭");
+      };
+
+      // 连接错误回调
+      this.ws.onerror = (error) => {
+        console.error("WebSocket连接错误:", error);
+      };
+    },
+
+    // 初始化支持工单完成率图表
+    initHdComplitedTicket() {
+      const chart = am4core.create(
+        this.$refs.hdComplitedTicket,
+        am4charts.GaugeChart
+      );
+      chart.logo.disabled = true;
+      chart.innerRadius = am4core.percent(82);
+
+      // 主轴配置
+      const axis = chart.xAxes.push(new am4charts.ValueAxis());
+      axis.min = 0;
+      axis.max = 100;
+      axis.strictMinMax = true;
+      axis.renderer.radius = am4core.percent(80);
+      axis.renderer.inside = true;
+      axis.renderer.line.strokeOpacity = 0;
+      axis.renderer.ticks.template.strokeOpacity = 1;
+      axis.renderer.ticks.template.length = 10;
+      axis.renderer.grid.template.disabled = true;
+      axis.renderer.labels.template.radius = 40;
+      axis.renderer.labels.template.adapter.add("text", () => "");
+
+      // 第二轴配置
+      const axis2 = chart.xAxes.push(new am4charts.ValueAxis());
+      axis2.min = 0;
+      axis2.max = 100;
+      axis2.renderer.innerRadius = 75;
+
+      axis2.strictMinMax = true;
+      axis2.renderer.labels.template.disabled = true;
+      axis2.renderer.ticks.template.disabled = true;
+      axis2.renderer.grid.template.disabled = true;
+
+      // 配置填充范围
+      const range0 = axis2.axisRanges.create();
+      range0.value = 0;
+      range0.endValue = 50;
+      range0.axisFill.fillOpacity = 1;
+      range0.axisFill.fill = am4core.color("#19BCBF");
+
+      const range1 = axis2.axisRanges.create();
+      range1.value = 50;
+      range1.endValue = 100;
+      range1.axisFill.fillOpacity = 1;
+      range1.axisFill.fill = am4core.color("#eff3f6");
+
+      // 添加标签
+      const label = chart.radarContainer.createChild(am4core.Label);
+      label.isMeasured = false;
+      label.fontSize = 18;
+      label.x = am4core.percent(50);
+      label.y = am4core.percent(100);
+      label.horizontalCenter = "middle";
+      label.verticalCenter = "bottom";
+      label.text = "50%";
+
+      const label2 = chart.radarContainer.createChild(am4core.Label);
+      label2.isMeasured = false;
+      label2.fontSize = 12;
+      label2.x = am4core.percent(50);
+      label2.y = am4core.percent(100);
+      label2.horizontalCenter = "middle";
+      label2.verticalCenter = "top";
+      label2.text = "Complited Ticket";
+
+      // 配置指针
+      const hand = chart.hands.push(new am4charts.ClockHand());
+      hand.axis = axis2;
+      hand.innerRadius = am4core.percent(20);
+      hand.startWidth = 0;
+      hand.pin.disabled = true;
+      hand.value = 50;
+      hand.disabled = true;
+
+      // 更新事件处理
+      hand.events.on("propertychanged", (ev) => {
+        range0.endValue = ev.target.value;
+        range1.value = ev.target.value;
+        axis2.invalidate();
+      });
+
+      // 定时更新数据
+      const interval = setInterval(() => {
+        const value = this.currentPercentage.percent; // Math.round(Math.random() * 100);
+        label.text = value + "%";
+        new am4core.Animation(
+          hand,
+          {
+            property: "value",
+            to: value,
+          },
+          1000,
+          am4core.ease.cubicOut
+        ).start();
+      }, 2000);
+
+      chart.padding(0, 0, 0, 0);
+
+      // 保存图表实例和定时器
+      this.charts.hdComplitedTicket = {
+        chart: chart,
+        interval: interval,
+      };
+    },
+
+    // 初始化设备占比饼图
+    initChartPercent() {
+      const chart = am4core.create(this.$refs.chartPercent, am4charts.PieChart);
+      chart.logo.disabled = true;
+      chart.innerRadius = 30;
+
+      // 配置系列
+      const pieSeries = chart.series.push(new am4charts.PieSeries());
+      pieSeries.dataFields.value = "size";
+      pieSeries.dataFields.category = "sector";
+      pieSeries.labels.template.disabled = true;
+      pieSeries.ticks.template.disabled = true;
+      pieSeries.colors.step = 3;
+
+      this.charts.chartPercent = chart;
+    },
+
+    // 初始化存储使用趋势图
+    initStorageChart() {
+      const chart = am4core.create(this.$refs.storageChart, am4charts.XYChart);
+
+      // 添加数据
+      chart.data = [
+        {
+          date: "2012-03-01",
+          price: 180,
+          price1: 50,
+        },
+        {
+          date: "2012-03-02",
+          price: 252,
+          price1: 40,
+        },
+        {
+          date: "2012-03-03",
+          price: 185,
+          price1: 55,
+        },
+        {
+          date: "2012-03-04",
+          price: 110,
+          price1: 38,
+        },
+        {
+          date: "2012-03-05",
+          price: 158,
+          price1: 87,
+        },
+        {
+          date: "2012-03-06",
+          price: 200,
+          price1: 67,
+        },
+        {
+          date: "2012-03-07",
+          price: 187,
+          price1: 100,
+        },
+      ];
+
+      // 配置X轴
+      const dateAxis = chart.xAxes.push(new am4charts.DateAxis());
+      dateAxis.renderer.grid.template.location = 0;
+      dateAxis.renderer.grid.template.disabled = true;
+      dateAxis.startLocation = 0.6;
+      dateAxis.endLocation = 0.4;
+      dateAxis.renderer.inside = true;
+      dateAxis.renderer.labels.template.fill = am4core.color("#463699");
+
+      // 配置Y轴
+      const valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
+      valueAxis.logarithmic = true;
+      valueAxis.renderer.minGridDistance = 0;
+      valueAxis.renderer.inside = true;
+      valueAxis.renderer.labels.template.disabled = true;
+
+      // 配置第一个数据系列
+      const series = chart.series.push(new am4charts.LineSeries());
+      series.dataFields.valueY = "price";
+      series.dataFields.dateX = "date";
+      series.tensionX = 0.77;
+      series.strokeWidth = 2;
+      series.fillOpacity = 0.1;
+      series.tooltipText = "{valueY.value}";
+      series.fill = am4core.color("#19BCBF");
+      series.stroke = am4core.color("#19BCBF");
+
+      // 配置第二个数据系列
+      const series1 = chart.series.push(new am4charts.LineSeries());
+      series1.dataFields.valueY = "price1";
+      series1.dataFields.dateX = "date";
+      series1.tensionX = 0.77;
+      series1.strokeWidth = 2;
+      series1.fillOpacity = 0.1;
+      series1.tooltipText = "{valueY.value}";
+      series1.fill = am4core.color("#463699");
+      series1.stroke = am4core.color("#463699");
+
+      // 添加第一个系列的圆点
+      const bullet = series.bullets.push(new am4charts.CircleBullet());
+      bullet.circle.fill = am4core.color("#fff");
+      bullet.circle.strokeWidth = 3;
+
+      // 添加第二个系列的圆点
+      const bullet1 = series1.bullets.push(new am4charts.CircleBullet());
+      bullet1.circle.fill = am4core.color("#fff");
+      bullet1.circle.strokeWidth = 3;
+
+      // 添加光标
+      chart.cursor = new am4charts.XYCursor();
+      chart.cursor.fullWidthLineX = true;
+      chart.cursor.xAxis = dateAxis;
+      chart.cursor.lineX.strokeWidth = 0;
+      chart.cursor.lineX.fill = am4core.color("#fff");
+      chart.cursor.lineX.fillOpacity = 0;
+
+      chart.padding(0, 0, 0, 0);
+
+      this.charts.storageChart = chart;
+    },
+    // 修改initSiteVisitorChart方法
+    initSiteVisitorChart() {
+      const chart = am4core.create(
+        this.$refs.siteVisitorChart,
+        am4charts.XYChart
+      );
+      chart.logo.disabled = true;
+      chart.hiddenState.properties.opacity = 0;
+      chart.padding(0, 0, 0, 0);
+      chart.zoomOutButton.disabled = true;
+
+      // 初始化数据
+      const data = [];
+      let visits = 10;
+      for (let i = 0; i <= 30; i++) {
+        visits -= Math.round(
+          (Math.random() < 0.5 ? 1 : -1) * Math.random() * 10
+        );
+        data.push({
+          date: new Date().setSeconds(i - 30),
+          cpuValue: this.cpuValue || 0, //Math.abs(visits),
+          gpuValue: this.GpuValue || 0,
+        });
+      }
+      chart.data = data;
+
+      // 配置X轴
+      const dateAxis = chart.xAxes.push(new am4charts.DateAxis());
+      dateAxis.renderer.grid.template.location = 0;
+      dateAxis.renderer.minGridDistance = 30;
+      dateAxis.dateFormats.setKey("second", "ss");
+      dateAxis.periodChangeDateFormats.setKey("second", "[bold]h:mm a");
+      dateAxis.periodChangeDateFormats.setKey("minute", "[bold]h:mm a");
+      dateAxis.periodChangeDateFormats.setKey("hour", "[bold]h:mm a");
+      dateAxis.renderer.inside = true;
+      dateAxis.renderer.axisFills.template.disabled = true;
+      dateAxis.renderer.ticks.template.disabled = true;
+      dateAxis.interpolationDuration = 500;
+      dateAxis.rangeChangeDuration = 500;
+
+      // 配置Y轴
+      const valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
+      valueAxis.tooltip.disabled = true;
+      valueAxis.interpolationDuration = 500;
+      valueAxis.rangeChangeDuration = 500;
+      valueAxis.renderer.inside = true;
+      valueAxis.renderer.minLabelPosition = 0.05;
+      valueAxis.renderer.maxLabelPosition = 0.95;
+      valueAxis.renderer.axisFills.template.disabled = true;
+      valueAxis.renderer.ticks.template.disabled = true;
+
+      // CPU 数据系列(红色)
+      const cpuSeries = chart.series.push(new am4charts.LineSeries());
+      cpuSeries.dataFields.dateX = "date";
+      cpuSeries.dataFields.valueY = "cpuValue";
+      cpuSeries.interpolationDuration = 500;
+      cpuSeries.defaultState.transitionDuration = 0;
+      cpuSeries.tensionX = 0.8;
+      cpuSeries.stroke = am4core.color("#FF425C"); // 红色
+      cpuSeries.strokeWidth = 2;
+
+      // CPU 系列渐变
+      cpuSeries.fillOpacity = 1;
+      const cpuGradient = new am4core.LinearGradient();
+      cpuGradient.addColor(am4core.color("#FF425C"), 0.2);
+      cpuGradient.addColor(am4core.color("#FF425C"), 0);
+      cpuSeries.fill = cpuGradient;
+
+      // GPU 数据系列(蓝色)
+      const gpuSeries = chart.series.push(new am4charts.LineSeries());
+      gpuSeries.dataFields.dateX = "date";
+      gpuSeries.dataFields.valueY = "gpuValue";
+      gpuSeries.interpolationDuration = 500;
+      gpuSeries.defaultState.transitionDuration = 0;
+      gpuSeries.tensionX = 0.8;
+      gpuSeries.stroke = am4core.color("#19BCBF"); // 蓝色
+      gpuSeries.strokeWidth = 2;
+
+      // GPU 系列渐变
+      gpuSeries.fillOpacity = 1;
+      const gpuGradient = new am4core.LinearGradient();
+      gpuGradient.addColor(am4core.color("#19BCBF"), 0.2);
+      gpuGradient.addColor(am4core.color("#19BCBF"), 0);
+      gpuSeries.fill = gpuGradient;
+
+      // CPU 圆点
+      const cpuBullet = cpuSeries.createChild(am4charts.CircleBullet);
+      cpuBullet.circle.radius = 5;
+      cpuBullet.fillOpacity = 1;
+      cpuBullet.fill = am4core.color("#FF425C");
+      cpuBullet.isMeasured = false;
+
+      // GPU 圆点
+      const gpuBullet = gpuSeries.createChild(am4charts.CircleBullet);
+      gpuBullet.circle.radius = 5;
+      gpuBullet.fillOpacity = 1;
+      gpuBullet.fill = am4core.color("#19BCBF");
+      gpuBullet.isMeasured = false;
+
+      // 更新两个系列的圆点位置
+      cpuSeries.events.on("validated", () => {
+        cpuBullet.moveTo(cpuSeries.dataItems.last.point);
+        cpuBullet.validatePosition();
+      });
+
+      gpuSeries.events.on("validated", () => {
+        gpuBullet.moveTo(gpuSeries.dataItems.last.point);
+        gpuBullet.validatePosition();
+      });
+
+      // 设置初始缩放
+      chart.events.on("datavalidated", () => {
+        dateAxis.zoom({ start: 1 / 15, end: 1.2 }, false, true);
+      });
+
+      // 存储图表实例
+      this.charts.siteVisitorChart = chart;
+
+      // 启动数据更新
+      setTimeout(() => {
+        this.startVisitorDataInterval(cpuSeries, gpuSeries);
+      }, 100);
+    },
+
+    startVisitorDataInterval(series) {
+      let visits = 10;
+      const interval = setInterval(() => {
+        visits =
+          visits +
+          Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 5);
+        const lastDataItem = series.dataItems.getIndex(
+          series.dataItems.length - 1
+        );
+        series.chart.addData(
+          {
+            date: new Date(lastDataItem.dateX.getTime() + 1000),
+            cpuValue: this.cpuValue || 0, //value: Math.abs(visits),
+            gpuValue: this.GpuValue || 0,
+          },
+          1
+        );
+      }, 1000);
+
+      this.charts.siteVisitorInterval = interval;
+    },
+
+    handleVisitorChartVisibility() {
+      if (document.hidden) {
+        if (this.charts.siteVisitorInterval) {
+          clearInterval(this.charts.siteVisitorInterval);
+        }
+      } else {
+        const series = this.charts.siteVisitorChart.series.getIndex(0);
+        this.startVisitorDataInterval(series);
+      }
+    },
+    // 初始化实时数据小图表
+    initRealTimeCharts() {
+      // 交易量图表
+      const real4Chart = am4core.create(
+        this.$refs.real4Chart,
+        am4charts.XYChart
+      );
+      // ... 配置real4Chart
+      this.charts.real4Chart = real4Chart;
+
+      // 库存图表
+      const real6Chart = am4core.create(
+        this.$refs.real6Chart,
+        am4charts.XYChart
+      );
+      // ... 配置real6Chart
+      this.charts.real6Chart = real6Chart;
+
+      // 跳出率图表
+      const real1Chart = am4core.create(
+        this.$refs.real1Chart,
+        am4charts.XYChart
+      );
+      // ... 配置real1Chart
+      this.charts.real1Chart = real1Chart;
+
+      // 订单总额图表
+      const real5Chart = am4core.create(
+        this.$refs.real5Chart,
+        am4charts.XYChart
+      );
+      // ... 配置real5Chart
+      this.charts.real5Chart = real5Chart;
+
+      // 收入图表
+      const real2Chart = am4core.create(
+        this.$refs.real2Chart,
+        am4charts.XYChart
+      );
+      // ... 配置real2Chart
+      this.charts.real2Chart = real2Chart;
+
+      // 新购买图表
+      const real3Chart = am4core.create(
+        this.$refs.real3Chart,
+        am4charts.XYChart
+      );
+      // ... 配置real3Chart
+      this.charts.real3Chart = real3Chart;
+    },
+
+    initTransactionCharts() {
+      // Transactions 1 Chart
+      const transactions1 = am4core.create(
+        this.$refs.transactions1,
+        am4charts.XYChart
+      );
+      transactions1.data = this.generateTransactionData("#19BCBF");
+      this.configureTransactionChart(transactions1);
+      this.charts.transactions1 = transactions1;
+
+      // Transactions 2 Chart
+      const transactions2 = am4core.create(
+        this.$refs.transactions2,
+        am4charts.XYChart
+      );
+      transactions2.data = this.generateTransactionData("#FF425C");
+      this.configureTransactionChart(transactions2);
+      this.charts.transactions2 = transactions2;
+    },
+
+    generateTransactionData(color) {
+      const data = [];
+      for (let i = 0; i <= 12; i++) {
+        data.push({
+          category: i,
+          value: Math.random() * 30 + 10,
+          color: color,
+        });
+      }
+      return data;
+    },
+
+    configureTransactionChart(chart) {
+      // Create axes
+      const categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
+      categoryAxis.dataFields.category = "category";
+      categoryAxis.renderer.grid.template.disabled = true;
+      categoryAxis.renderer.labels.template.disabled = true;
+      categoryAxis.renderer.minGridDistance = 10;
+
+      const valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
+      valueAxis.renderer.grid.template.disabled = true;
+      valueAxis.renderer.labels.template.disabled = true;
+      valueAxis.min = 0;
+      valueAxis.max = 50;
+
+      // Create series
+      const series = chart.series.push(new am4charts.ColumnSeries());
+      series.dataFields.valueY = "value";
+      series.dataFields.categoryX = "category";
+      series.columns.template.propertyFields.fill = "color";
+      series.columns.template.propertyFields.stroke = "color";
+      series.columns.template.width = am4core.percent(40);
+
+      // Add tooltip
+      series.tooltipText = "{valueY}";
+      chart.cursor = new am4charts.XYCursor();
+      chart.cursor.behavior = "none";
+
+      // Remove padding
+      chart.paddingBottom = 0;
+      chart.paddingTop = 0;
+      chart.paddingLeft = 0;
+      chart.paddingRight = 0;
+    },
+
+    initDeviceChart() {
+      const chart = am4core.create(this.$refs.deviceChart, am4charts.PieChart);
+
+      // 添加数据
+      chart.data = [
+        { sector: "Mobile", size: 14.6 },
+        { sector: "Tablet", size: 9.3 },
+        { sector: "Desktop", size: 22.5 },
+      ];
+
+      // 设置内圆半径
+      chart.innerRadius = 30;
+
+      // 添加并配置饼图系列
+      const pieSeries = chart.series.push(new am4charts.PieSeries());
+      pieSeries.dataFields.value = "size";
+      pieSeries.dataFields.category = "sector";
+      pieSeries.labels.template.disabled = true;
+      pieSeries.ticks.template.disabled = true;
+      pieSeries.colors.step = 2;
+
+      // 保存图表实例
+      this.charts.deviceChart = chart;
+    },
+    /* 初始化 */
+    init() {
+      structure_count().then((res) => {
+        if (res.status !== 200) return;
+        this.kenList = res.data;
+        if (this.kenList.length > 0) {
+          this.kenValue = this.kenList[0].id;
+          this.kenVal = this.kenList[0];
+          // 处理文件类型统计数据
+          this.updateChartPercentData(this.kenList[0]);
+        }
+      });
+      GET_Rbq().then((res) => {
+        console.log(res);
+      });
+      /* 获取文档数量 */
+      searchlistDoc({ page: 1, pageSize: 9999 }).then((res) => {
+        this.docTotal = res.data.dataList.length;
+      });
+      searchList({ page: 1, pageSize: 9999 }).then((res) => {
+        if (!res) return;
+        this.temTotal = res.data.dataList.length;
+      });
+      pageTemplate({ page: 1, pageSize: 9999 }).then((res) => {
+        if (!res) return;
+        this.pageTotal = res.data.dataList.length;
+      });
+    },
+
+    /* 选择知识库 */
+    kenChange(val) {
+      this.kenVal = this.kenList.find((el) => el.id === val);
+      // 更新图表数据
+      this.updateChartPercentData(this.kenVal);
+    },
+
+    // 更新文件类型统计数据
+    updateChartPercentData(kenData) {
+      if (!kenData) return;
+
+      // 获取所有的 file_type_stats
+      const allFileStats = this.getAllFileTypeStats(kenData);
+
+      // 合并所有的文件统计数据
+      const mergedFileStats = this.mergeFileStats(allFileStats);
+
+      // 保存上一次的数据用于计算变化率
+      this.previousCounts = { ...this.fileTypeCounts };
+      // 更新当前数据
+      this.fileTypeCounts = mergedFileStats;
+
+      // 计算总文件数和百分比
+      const totalFiles = Object.values(mergedFileStats).reduce(
+        (a, b) => a + b,
+        0
+      );
+
+      // 转换数据格式
+      const chartData = Object.entries(mergedFileStats).map(
+        ([type, count]) => ({
+          sector: type.toUpperCase(),
+          size: count /* Number(((count / totalFiles) * 100).toFixed(1)) */,
+          count: count,
+        })
+      );
+
+      // 更新图表数据
+      if (this.charts.chartPercent) {
+        this.charts.chartPercent.data = chartData;
+      }
+    },
+
+    // 获取文件类型对应的图标
+    getFileTypeIcon(type) {
+      const icons = {
+        pdf: "icon-file-text",
+        docx: "icon-file",
+        xlsx: "icon-file",
+      };
+      return icons[type.toLowerCase()] || "icon-file";
+    },
+
+    // 获取文件类型对应的颜色
+    getFileTypeColor(type) {
+      const colors = {
+        pdf: "#dc67ce",
+        docx: "#8067dc",
+        xlsx: "#67b7dc",
+      };
+      return colors[type.toLowerCase()] || "#666666";
+    },
+
+    // 计算变化率
+    getChangePercentage(type) {
+      const currentCount = this.fileTypeCounts[type] || 0;
+      const previousCount = this.previousCounts[type] || currentCount;
+
+      if (previousCount === 0) return "0%";
+
+      const change = ((currentCount - previousCount) / previousCount) * 100;
+      return `${Math.abs(change).toFixed(1)}%`;
+    },
+
+    // 获取变化率的图标
+    getChangeIcon(type) {
+      const currentCount = this.fileTypeCounts[type] || 0;
+      const previousCount = this.previousCounts[type] || currentCount;
+
+      return currentCount >= previousCount
+        ? "icon-arrow-up"
+        : "icon-arrow-down";
+    },
+
+    // 获取变化率的样式类
+    getChangeClass(type) {
+      const currentCount = this.fileTypeCounts[type] || 0;
+      const previousCount = this.previousCounts[type] || currentCount;
+
+      return currentCount >= previousCount ? "text-c-green" : "text-c-red";
+    },
+
+    // 递归获取所有的 file_type_stats
+    getAllFileTypeStats(data) {
+      let results = [];
+
+      // 处理当前层级的 file_type_stats
+      if (data.file_type_stats) {
+        results.push(data.file_type_stats);
+      }
+
+      // 处理 directories 中的 file_type_stats
+      if (data.directories && Array.isArray(data.directories)) {
+        data.directories.forEach((dir) => {
+          results = results.concat(this.getAllFileTypeStats(dir));
+        });
+      }
+
+      return results;
+    },
+
+    // 合并多个 file_type_stats 对象
+    mergeFileStats(fileStatsList) {
+      return fileStatsList.reduce((merged, current) => {
+        Object.entries(current).forEach(([type, count]) => {
+          merged[type] = (merged[type] || 0) + count;
+        });
+        return merged;
+      }, {});
+    },
+  },
+  // 修改beforeDestroy钩子
+  beforeDestroy() {
+    // 清理所有图表实例
+    Object.values(this.charts).forEach((chart) => {
+      if (chart) {
+        if (typeof chart.dispose === "function") {
+          chart.dispose();
+        } else if (typeof chart === "number") {
+          clearInterval(chart);
+        }
+      }
+    });
+    this.closeWebSocket(); // 组件销毁前关闭 WebSocket
+    // 移除事件监听器
+    document.removeEventListener(
+      "visibilitychange",
+      this.handleVisitorChartVisibility
+    );
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.widget-chart {
+  height: calc(100vh - 85px);
+  padding: 15px;
+  font-family: "Roboto", sans-serif;
+  font-size: 14px;
+  color: #686c71;
+  font-weight: 400;
+  background: #f8f9fa;
+  a {
+    text-decoration: none;
+  }
+
+  // 卡片基础样式
+  .card {
+    border-radius: 2px;
+    box-shadow: 0 0px 0 1px #e2e5e8;
+    border: none;
+    margin-bottom: 24px;
+    background: #fff;
+
+    .card-body {
+      padding: 1.5rem;
+      h6 {
+        color: #111;
+        font-size: 16px;
+        .text-primary {
+          color: #19bcbf !important;
+        }
+        .text-danger {
+          color: #ff425c !important;
+        }
+      }
+    }
+  }
+
+  // 文字样式
+  h2 {
+    font-size: 28px;
+    font-weight: 600;
+    color: #333;
+    margin: 0;
+  }
+
+  h6 {
+    font-size: 14px;
+    color: #6c757d;
+    margin-bottom: 0.5rem;
+  }
+
+  // 图标样式
+  .feather {
+    width: 20px;
+    height: 20px;
+    vertical-align: text-bottom;
+  }
+
+  // 颜色方案
+  .text-c-blue {
+    color: #19bcbf;
+  }
+  .text-c-green {
+    color: #2ed8b6;
+  }
+  .text-c-red {
+    color: #ff5370;
+  }
+  .text-c-purple {
+    color: #8067dc;
+  }
+
+  // 下拉菜单样式
+  .dropdown-toggle {
+    &:after {
+      margin-left: 0.5em;
+    }
+  }
+
+  .dropdown-menu {
+    border-radius: 4px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+
+    .dropdown-item {
+      padding: 0.5rem 1rem;
+
+      &:hover {
+        background-color: #f8f9fa;
+      }
+    }
+  }
+
+  // 图表容器样式
+  [ref="hdComplitedTicket"],
+  [ref="chartPercent"],
+  [ref="storageChart"] {
+    margin: 1rem 0;
+  }
+
+  // 小型图表样式
+  [ref^="real"] {
+    height: 20px;
+    width: 100%;
+    margin-top: 0.5rem;
+  }
+
+  // 统计数字样式
+  .mt-2 {
+    h3 {
+      font-size: 24px;
+      font-weight: 600;
+      color: #333;
+      margin: 0.5rem 0;
+    }
+  }
+
+  // 图标指标样式
+  .fas.fa-circle {
+    font-size: 10px;
+    margin-right: 8px;
+
+    &.text-c-blue {
+      color: #19bcbf;
+    }
+    &.text-c-purple {
+      color: #8067dc;
+    }
+  }
+}
+
+// 响应式布局调整
+@media (max-width: 768px) {
+  .widget-chart {
+    .card {
+      margin-bottom: 16px;
+    }
+  }
+}
+</style>
+<style src="./css/bootstrap.min.css"  scoped></style>

+ 1 - 1
src/views/dashboard/admin/components/LineChart.vue

@@ -214,7 +214,7 @@ export default {
         });
         });
         this.data2.push({
         this.data2.push({
           date: currentTime,
           date: currentTime,
-          value: /* newValue.data.system.gpu.devices|| */ 0, // 假设传入的data中有gpu字段
+          value:newValue.data.system.gpu.devices[0]?.power || 0/* newValue.data.system.gpu.devices|| */ , // 假设传入的data中有gpu字段
         });
         });
 
 
         // 限制数据点数量
         // 限制数据点数量

Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 4 - 0
src/views/dashboard/admin/css/bootstrap.min.css


+ 16723 - 0
src/views/dashboard/admin/css/style.css

@@ -0,0 +1,16723 @@
+@charset "UTF-8";
+/**======================================================================
+=========================================================================
+Template Name: Dasho Admin Template
+Author: Phoenixcoded
+File: style.css
+更多下载:Http://www.bootstrapmb.com
+=========================================================================
+=========================================================================
+  == Table of Contents==
+	- Generic classes
+		-	Margin, Padding, Font class, text align, position, floating, overflow, background class, text color, display class, boarder class
+	- Theme Elements
+		-	Accordion, Button, tabs, typography, buttons, box shadow, Lable & Badges, Alert, Pagination, Breadcumb, Cards, Collapse,
+        -   Carousel, Grid, Progress, Model, tooltip, popover, Datepicker, Gridstack, lightbox, notification, Nestable, pnotify, rating,
+        -   Rangeslider, Slider, Syntax Highlighter, Tour, Treeview, Toolbar, Session Timeout, Session idle Timeout, offline, Animation
+    - Forms
+        -   Forms Elements, Advance Form Control, Validation, Masking, Wizard, Picker, Select
+	- Pages
+		-   Chat, authentication, Maintenance, Maps, Landingpage messages, task, Todo, Notes, Charts, Icons, Gallery, Editors,
+        -   Invoice, Full Calender, File Upload,
+=================================================================================
+=================================================================================== */
+/*
+    description Of variables for build for theme layouts
+        1) menu-caption-color
+            List of color for sidebar menu caption
+
+        2) brand-background
+            List of color for logo background
+
+        3) header-dark-background
+            List of color for Dark Header
+
+        4) header-light-background
+            List of color for light Header
+
+        5) menu-dark-background
+            List of color for Dark sidebar menu
+
+        6) menu-light-background
+            List of color for light sidebar menu
+
+        7) menu-active-color
+            List of color for Active item highliter
+
+        8) menu-icon-color
+            List of color for sidebar menu items icon colors
+*/
+/**  =====================
+     Google Font
+==========================  **/
+@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,600,700");
+ @import url("./bootstrap.min.css");
+/*@import url("../fonts/feather/css/feather.css");
+@import url("../plugins/jquery-scrollbar/css/perfect-scrollbar.css");
+@import url("../fonts/datta/datta-icon.css"); */ /**  =====================
+      Custom css start
+==========================  **/
+
+@media (max-width: 575.98px) {
+  .pcoded-header .dropdown {
+    position: static;
+  }
+  .pcoded-header .dropdown .dropdown-toggle {
+    position: relative;
+  }
+}
+@media (max-width: 991.98px) {
+  .navbar-expand-lg > .container {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+  }
+}
+.invoice-total {
+  --bs-body-bg: #f3f3f3;
+}
+
+.text-muted {
+  --bs-secondary-color: #6c757d;
+}
+
+.form-control {
+  --bs-border-color: #ced4da;
+}
+
+.font-color {
+  --bs-body-color: #111;
+}
+
+.custom-select-sm {
+  -webkit-appearance: auto;
+  -moz-appearance: auto;
+  appearance: auto;
+}
+
+.border-bottom-primary td {
+  border-bottom: 1px solid #19BCBF !important;
+}
+
+.border-bottom-warning td {
+  border-bottom: 1px solid #FF9764 !important;
+}
+
+.progress-bar.progress-primary {
+  background: linear-gradient(-45deg, #19BCBF, #149698);
+}
+
+.card-body {
+  --bs-card-color: #686c71;
+  padding: 20px 25px;
+}
+
+.text-white .card-body {
+  color: white;
+}
+
+*:focus {
+  outline: none;
+}
+
+a {
+  color: #19BCBF;
+  text-decoration: none;
+}
+
+a:hover {
+  color: #17aaad;
+  outline: none;
+}
+
+.nav-link:focus, .nav-link:hover {
+  --bs-nav-link-hover-color: #19BCBF;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5 {
+  color: #111;
+  font-weight: 500;
+}
+
+h1 {
+  font-size: 2.5rem;
+}
+
+h2 {
+  font-size: 36px;
+}
+
+h3 {
+  font-size: 24px;
+}
+
+h4 {
+  font-size: 20px;
+}
+
+h5 {
+  font-size: 18px;
+}
+
+h6 {
+  color: #111;
+  font-size: 16px;
+}
+
+p {
+  font-size: 14px;
+}
+
+b,
+strong {
+  font-weight: 400;
+}
+
+.img-radius {
+  border-radius: 50%;
+}
+
+.page-header {
+  background: transparent;
+  padding: 0;
+}
+
+.page-header h5 {
+  margin-bottom: 5px;
+  font-weight: 400;
+}
+
+.page-header .page-header-title + .breadcrumb {
+  background: transparent;
+  padding: 0;
+  margin-bottom: 0;
+}
+
+.page-header .page-header-title + .breadcrumb > .breadcrumb-item {
+  line-height: 1;
+}
+
+.page-header .page-header-title + .breadcrumb > .breadcrumb-item a {
+  color: #19BCBF;
+  font-weight: 400;
+  font-size: 13px;
+}
+
+.page-header .page-header-title + .breadcrumb > .breadcrumb-item:last-child a {
+  color: #686c71;
+  font-weight: 400;
+}
+
+.pcoded-main-container .page-header {
+  margin-bottom: 30px;
+}
+
+/* ==========  card css start  =========== */
+.anim-rotate {
+  -webkit-animation: anim-rotate 1s linear infinite;
+  animation: anim-rotate 1s linear infinite;
+}
+
+@-webkit-keyframes anim-rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes anim-rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+.anim-close-card {
+  -webkit-animation: anim-close-card 1.4s linear;
+  animation: anim-close-card 1.4s linear;
+}
+
+@-webkit-keyframes anim-close-card {
+  100% {
+    opacity: 0.3;
+    transform: scale3d(0.3, 0.3, 0.3);
+  }
+}
+@keyframes anim-close-card {
+  100% {
+    opacity: 0.3;
+    transform: scale3d(0.3, 0.3, 0.3);
+  }
+}
+p.text-muted {
+  font-size: 13px;
+}
+
+.card {
+  border-radius: 2px;
+  box-shadow: 0 0 0 1px #e2e5e8;
+  border: none;
+  margin-bottom: 30px;
+  transition: all 0.5s ease-in-out;
+  --bs-body-color: #686c71;
+}
+
+.card .card-header {
+  background-color: transparent;
+  border-bottom: 1px solid #e2e5e8;
+  padding: 20px 25px;
+  position: relative;
+}
+
+.card .card-header h5 {
+  margin-bottom: 0;
+  color: #111;
+  font-size: 16px;
+  font-weight: 500;
+  display: inline-block;
+  margin-right: 10px;
+  line-height: 1.1;
+  position: relative;
+}
+
+.card .card-header.borderless {
+  border-bottom: none;
+}
+
+.card .card-header.borderless h5:after {
+  display: none;
+}
+
+.card .card-header .card-header-right {
+  right: 10px;
+  top: 10px;
+  display: inline-block;
+  float: right;
+  padding: 0;
+  position: absolute;
+}
+
+@media only screen and (max-width: 575px) {
+  .card .card-header .card-header-right {
+    display: none;
+  }
+}
+.card .card-header .card-header-right .dropdown-menu {
+  margin-top: 0;
+}
+
+.card .card-header .card-header-right .dropdown-menu li a {
+  font-size: 14px;
+  text-transform: capitalize;
+}
+
+.card .card-header .card-header-right .btn.dropdown-toggle {
+  border: none;
+  background: transparent;
+  box-shadow: none;
+  color: #888;
+}
+
+.card .card-header .card-header-right .btn.dropdown-toggle i {
+  margin-right: 0;
+}
+
+.card .card-header .card-header-right .btn.dropdown-toggle:after {
+  display: none;
+}
+
+.card .card-header .card-header-right .btn.dropdown-toggle:focus {
+  box-shadow: none;
+  outline: none;
+}
+
+.card .card-header .card-header-right .btn.dropdown-toggle {
+  border: none;
+  background: transparent;
+  box-shadow: none;
+  padding: 0;
+  width: 20px;
+  height: 20px;
+  right: 8px;
+  top: 8px;
+}
+
+.card .card-header .card-header-right .btn.dropdown-toggle.mobile-menu span {
+  background-color: #888;
+  height: 2px;
+  border-radius: 5px;
+}
+
+.card .card-header .card-header-right .btn.dropdown-toggle.mobile-menu span:after, .card .card-header .card-header-right .btn.dropdown-toggle.mobile-menu span:before {
+  border-radius: 5px;
+  height: 2px;
+  background-color: #888;
+}
+
+.card .card-header .card-header-right .nav-pills {
+  padding: 0;
+  box-shadow: none;
+  background: transparent;
+}
+
+.card .card-footer {
+  border-top: 1px solid #e2e5e8;
+  background: transparent;
+  padding: 20px 25px;
+}
+
+.card .card-block,
+.card .card-body {
+  padding: 20px 25px;
+}
+
+.card .card-block-big {
+  padding: 30px 25px;
+}
+
+.card.card-load {
+  position: relative;
+  overflow: hidden;
+}
+
+.card.card-load .card-loader {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  background-color: rgba(255, 255, 255, 0.7);
+  z-index: 999;
+}
+
+.card.card-load .card-loader i {
+  margin: 0 auto;
+  color: #19BCBF;
+  font-size: 24px;
+  align-items: center;
+  display: flex;
+}
+
+.card.full-card {
+  z-index: 99999;
+  border-radius: 0;
+}
+
+/* ==========  scrollbar End  =========== */
+.scroll-y {
+  z-index: 1027;
+}
+
+/* ==========  scrollbar End  ===========
+ ==========  card css End  ===========
+ ================================    Dropdown Start  ===================== */
+.dropdown-menu {
+  padding: 10px 0;
+  font-size: 14px;
+}
+
+.dropdown-menu > li {
+  padding-left: 15px;
+  padding-right: 15px;
+}
+
+.dropdown-menu > li > a {
+  padding: 5px;
+  color: #686c71;
+}
+
+.dropdown-menu > li > a i {
+  font-size: 15px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 10px;
+}
+
+.dropdown-menu > li.active, .dropdown-menu > li:active, .dropdown-menu > li:focus, .dropdown-menu > li:hover {
+  background: #19BCBF;
+  color: #fff;
+}
+
+.dropdown-menu > li.active > a, .dropdown-menu > li:active > a, .dropdown-menu > li:focus > a, .dropdown-menu > li:hover > a {
+  background: transparent;
+  color: #fff;
+}
+
+.dropdown-menu > a.active, .dropdown-menu > a:active, .dropdown-menu > a:focus, .dropdown-menu > a:hover {
+  background: #19BCBF;
+  color: #fff;
+}
+
+/* ================================    Dropdown End  ===================== */
+@media (min-width: 1600px) {
+  .container {
+    max-width: 1540px;
+  }
+}
+@media (max-width: 992px) {
+  .container {
+    max-width: 100%;
+  }
+}
+/* ========================================================
+ ===============     document      ======================
+ ========================================================
+
+ Grid examples
+*/
+.bd-example-row {
+  background: #eff3f6;
+  padding: 15px;
+  margin-bottom: 15px;
+}
+
+.bd-example-row .row > [class^=col-],
+.bd-example-row .row > .col {
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+  background-color: rgba(86, 61, 124, 0.15);
+  border: 1px solid rgba(86, 61, 124, 0.2);
+}
+
+.bd-example-row .row + .row {
+  margin-top: 1rem;
+}
+
+.bd-example-row .flex-items-bottom,
+.bd-example-row .flex-items-middle,
+.bd-example-row .flex-items-top {
+  min-height: 6rem;
+  background-color: rgba(255, 0, 0, 0.1);
+}
+
+.bd-example-row-flex-cols .row {
+  min-height: 10rem;
+  background-color: rgba(255, 0, 0, 0.1);
+}
+
+/* Docs examples */
+.bd-example {
+  position: relative;
+  padding: 1rem;
+  margin: 1rem;
+  border: solid #ddd;
+  border-width: 0.2rem 0 0;
+}
+
+@media only screen and (max-height: 575px) {
+  .bd-example {
+    padding: 1.5rem;
+    margin-right: 0;
+    margin-left: 0;
+    border-width: 0.2rem;
+  }
+}
+/* Example modals */
+.modal {
+  z-index: 1072;
+}
+
+.modal .popover,
+.modal .tooltip {
+  z-index: 1073;
+}
+
+.modal-backdrop {
+  z-index: 1071;
+}
+
+.bd-example-modal {
+  background-color: #fafafa;
+}
+
+.bd-example-modal .modal {
+  position: relative;
+  top: auto;
+  right: auto;
+  bottom: auto;
+  left: auto;
+  z-index: 1;
+  display: block;
+}
+
+.bd-example-modal .modal-dialog {
+  left: auto;
+  margin-right: auto;
+  margin-left: auto;
+}
+
+/* Example tabbable tabs */
+.bd-example-tabs .nav-tabs {
+  margin-bottom: 1rem;
+}
+
+/* Code snippets */
+.highlight {
+  padding: 1rem;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  background-color: #f3f2fb;
+  -ms-overflow-style: -ms-autohiding-scrollbar;
+}
+
+@media only screen and (max-height: 575px) {
+  .highlight {
+    padding: 1.5rem;
+  }
+}
+.bd-content .highlight {
+  margin-right: 15px;
+  margin-left: 15px;
+}
+
+@media only screen and (max-height: 575px) {
+  .bd-content .highlight {
+    margin-right: 0;
+    margin-left: 0;
+  }
+}
+.highlight pre {
+  padding: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+  background-color: transparent;
+  border: 0;
+}
+
+.highlight pre code {
+  font-size: inherit;
+  color: #333;
+}
+
+/* =======================================================================
+ ===============     Ui kit copy model style      ====================== */
+/* Code examples */
+.datta-example {
+  position: relative;
+}
+
+.datta-example .datta-example-btns {
+  position: absolute;
+  right: 30px;
+  top: -10px;
+  opacity: 0;
+  transform: rotateX(-90deg);
+  transition: all 0.3s ease-in-out;
+}
+
+.datta-example .datta-example-btns .datta-example-btn {
+  display: inline-block;
+  line-height: 1;
+  font-weight: 600;
+  background: #19BCBF;
+  color: #fff;
+  padding: 0.1875rem 0.3125rem;
+  border-radius: 2px;
+  white-space: nowrap;
+  font-size: 11px;
+  margin: 0 4px;
+}
+
+.datta-example .datta-example-btns .datta-example-btn.copy::before {
+  content: "COPY";
+}
+
+.datta-example .datta-example-btns .datta-example-btn.copied {
+  background: #13bd8a !important;
+  color: #fff !important;
+}
+
+.datta-example .datta-example-btns .datta-example-btn.copied::before {
+  content: "COPIED!";
+}
+
+.datta-example:hover .datta-example-btns {
+  top: -21px;
+  transform: rotateX(0deg);
+  opacity: 1;
+}
+
+/* Modal */
+.datta-example-modal {
+  position: fixed;
+  z-index: 1099;
+  top: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background: #282c34;
+  transform-origin: 50% 0;
+  transform: scale(0);
+  transition: all 0.3s ease-in-out;
+}
+
+.datta-example-modal-opened {
+  overflow: hidden !important;
+}
+
+.datta-example-modal-opened .datta-example-modal {
+  transform: scale(1);
+}
+
+.datta-example-modal-content {
+  max-width: 100vw;
+  margin: auto;
+  padding: 50px;
+  height: 100vh;
+  overflow: auto;
+}
+
+.datta-example-modal-content > pre {
+  overflow: hidden;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+}
+
+.datta-example-modal-content > pre > code {
+  padding: 0;
+  background: none;
+  font-size: 16px;
+}
+
+.md-datta-example-modal-copy {
+  display: block;
+  position: fixed;
+  top: 90px;
+  right: 30px;
+  margin-right: 8px;
+  font-size: 1.5rem;
+  border-radius: 50%;
+  padding: 10px 15px;
+  background: #19BCBF;
+  color: #fff;
+  box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.2);
+  z-index: 1;
+  white-space: nowrap;
+}
+
+.md-datta-example-modal-copy:hover {
+  box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.2);
+  color: #fff;
+}
+
+.md-datta-example-modal-copy.copied::before {
+  content: "Copied to Clipboard Successfully ! . . .";
+  position: absolute;
+  display: block;
+  right: 100%;
+  margin-right: 10px;
+  font-size: 14px;
+  background: #13bd8a;
+  line-height: 24px;
+  height: 24px;
+  border-radius: 3px;
+  padding: 0 6px;
+  top: 50%;
+  margin-top: -12px;
+}
+
+.datta-example-modal-close {
+  display: block;
+  position: fixed;
+  top: 10px;
+  right: 52px;
+  color: #fff;
+  opacity: 0.2;
+  font-size: 3rem;
+  font-weight: 100;
+  transition: all 0.3s ease-in-out;
+  z-index: 1;
+}
+
+.datta-example-modal-close:hover {
+  color: #fff;
+  opacity: 0.9;
+}
+
+/* Code */
+.cui-bottom-spacer {
+  height: 12rem;
+}
+
+/* editor style for model */
+.hljs {
+  padding: 0.5em;
+  color: #abb2bf;
+  background: #282c34;
+}
+
+.hljs-comment,
+.hljs-quote {
+  color: #5c6370;
+  font-style: italic;
+}
+
+.hljs-doctag,
+.hljs-formula,
+.hljs-keyword {
+  color: #c678dd;
+}
+
+.hljs-deletion,
+.hljs-name,
+.hljs-section,
+.hljs-selector-tag,
+.hljs-subst {
+  color: #e06c75;
+}
+
+.hljs-literal {
+  color: #56b6c2;
+}
+
+.hljs-addition,
+.hljs-attribute,
+.hljs-meta-string,
+.hljs-regexp,
+.hljs-string {
+  color: #98c379;
+}
+
+.hljs-built_in,
+.hljs-class .hljs-title {
+  color: #e6c07b;
+}
+
+.hljs-attr,
+.hljs-number,
+.hljs-selector-attr,
+.hljs-selector-class,
+.hljs-selector-pseudo,
+.hljs-template-variable,
+.hljs-type,
+.hljs-variable {
+  color: #d19a66;
+}
+
+.hljs-bullet,
+.hljs-link,
+.hljs-meta,
+.hljs-selector-id,
+.hljs-symbol,
+.hljs-title {
+  color: #61aeee;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
+
+.hljs-link {
+  text-decoration: underline;
+}
+
+/* ================================    md animated mode start   ===================== */
+.md-show.md-effect-12 ~ .md-overlay {
+  background: #19BCBF;
+}
+
+/* ================================    md animated mode End   ===================== */
+/* ================================    range slider Start  ===================== */
+.tooltip.in {
+  opacity: 0.9;
+}
+
+.tooltip .tooltip-arrow {
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-color: transparent;
+  border-style: solid;
+}
+
+.tooltip.top {
+  padding: 5px 0;
+  margin-top: -3px;
+}
+
+.tooltip.top .tooltip-arrow {
+  bottom: 0;
+  left: 50%;
+  margin-left: -5px;
+  border-width: 5px 5px 0;
+  border-top-color: #000;
+}
+
+/* ================================    range slider End  ===================== */
+/* ================================    owl-carousel slider Start  ===================== */
+.owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev {
+  padding: 3px 9px;
+}
+
+/* ================================    owl-carousel slider End  ===================== */
+/* ================================    Bootstrap tags input Start  ===================== */
+.bootstrap-tagsinput {
+  padding: 10px 15px;
+  box-shadow: none;
+  border-radius: 2px;
+  background: #f0f3f6;
+}
+
+.bootstrap-tagsinput .tag {
+  padding: 5px 12px;
+  border-radius: 2px;
+  line-height: 37px;
+  margin-top: 5px;
+  margin-right: 5px;
+}
+
+.bootstrap-tagsinput .tag [data-role=remove] {
+  margin-right: -5px;
+}
+
+.bootstrap-tagsinput .tag [data-role=remove]:after {
+  content: "\e8f6";
+  padding: 0 2px;
+  font-family: "feather" !important;
+}
+
+/* ================================    Bootstrap tags input End  ===================== */
+/* ================================    Multi-Select Start  ===================== */
+.ms-container {
+  width: 100%;
+}
+
+/* ================================    Multi-Select End  ===================== */
+/* ================================    Blockquote Start  ===================== */
+.blockquote {
+  border-left: 0.25rem solid #e2e5e8;
+  padding: 0.5rem 1rem;
+}
+
+.blockquote.text-end {
+  border-left: none;
+  border-right: 0.25rem solid #e2e5e8;
+}
+
+/* ================================    Blockquote End  ===================== */
+/* ================================    animation start  ===================== */
+.card .animated {
+  -webkit-animation-duration: 1s;
+  animation-duration: 1s;
+  border: 5px solid #fff;
+  margin-bottom: 30px;
+  box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.2);
+}
+
+/* ================================    animation End  ===================== */
+/* ================================    browser  warning  Start  ===================== */
+.ie-warning {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 999999;
+  background: #000000;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  color: #fff;
+  font-family: "Courier New", Courier, monospace;
+  padding: 50px 0;
+}
+
+.ie-warning p {
+  font-size: 17px;
+}
+
+.ie-warning h1 {
+  color: #fff;
+}
+
+.ie-warning .iew-container {
+  min-width: 1024px;
+  width: 100%;
+  height: 200px;
+  background: #fff;
+  margin: 50px 0;
+}
+
+.ie-warning .iew-download {
+  list-style: none;
+  padding: 30px 0;
+  margin: 0 auto;
+  width: 720px;
+}
+
+.ie-warning .iew-download > li {
+  float: left;
+  vertical-align: top;
+}
+
+.ie-warning .iew-download > li > a {
+  display: block;
+  color: #000;
+  width: 140px;
+  font-size: 15px;
+  padding: 15px 0;
+}
+
+.ie-warning .iew-download > li > a > div {
+  margin-top: 10px;
+}
+
+.ie-warning .iew-download > li > a:hover {
+  background-color: #eee;
+}
+
+/* ================================    browser  warning  End  ===================== */
+/* material icon for material datetime picker */
+/* fallback */
+@font-face {
+  font-family: "Material Icons";
+  font-style: normal;
+  font-weight: 400;
+  src: url("https://fonts.gstatic.com/s/materialicons/v41/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2") format("woff2");
+}
+.material-icons {
+  font-family: "Material Icons";
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -webkit-font-feature-settings: "liga";
+  -webkit-font-smoothing: antialiased;
+}
+
+/* material icon for material datetime picker */
+/* new Dasho 7-dec-2018 */
+div.code-toolbar > .toolbar button,
+div.code-toolbar > .toolbar span,
+div.code-toolbar > .toolbar a {
+  padding: 3px 0.9em !important;
+  background: #04a9f5 !important;
+  color: #fff !important;
+  box-shadow: none !important;
+}
+
+pre[class*=language-]:after,
+pre[class*=language-]:before {
+  display: none;
+}
+
+/* table css */
+.table-borderless tbody tr td,
+.table-borderless tbody tr th {
+  border: 0;
+}
+
+@media only screen and (max-width: 400px) {
+  .lay-customizer .theme-color > a[data-value=reset],
+  .theme-color > a[data-value=reset] {
+    margin-top: 20px;
+  }
+}
+.alert-dismissible .btn-close {
+  padding: 0px;
+  font-size: 25px;
+  font-weight: 500;
+  top: 7px;
+}
+
+.carousel-indicators li::marker {
+  font-size: 0px;
+}
+
+.statstic-data-card .carousel-item-next:not(.carousel-item-start),
+.statstic-data-card .active.carousel-item-end {
+  transform: translateY(100%) !important;
+}
+
+.statstic-data-card .carousel-item-prev:not(.carousel-item-end),
+.statstic-data-card .active.carousel-item-start {
+  transform: translateY(-100%) !important;
+}
+
+small {
+  font-weight: 400;
+}
+
+hr {
+  opacity: 0.1;
+}
+
+.checkbox-inline {
+  display: flex;
+  gap: 13px;
+  flex-wrap: wrap;
+}
+
+.radio-inline {
+  display: flex;
+  gap: 15px;
+}
+
+.select2-container--default .select2-results__option--highlighted[aria-selected] {
+  background-color: #19BCBF;
+}
+
+label {
+  display: inline-block;
+  margin-bottom: 0.5rem;
+}
+
+.carousel-indicators li {
+  height: 3px;
+}
+
+.table-responsive {
+  overflow-x: auto;
+  display: block;
+  width: 100%;
+}
+
+.invoice-box {
+  margin-right: 1rem;
+  margin-left: 1rem;
+}
+
+.bg-dark {
+  background-color: #343a40 !important;
+}
+
+.mb-n4 {
+  margin-bottom: -30px;
+}
+
+.nav-link.active.h-red {
+  background-color: darkred !important;
+}
+
+/**  =====================
+      Generic-class css start
+========================== **/
+/*====== Padding , Margin css starts ======*/
+.p-0 {
+  padding: 0px;
+}
+
+.p-t-0 {
+  padding-top: 0px;
+}
+
+.p-b-0 {
+  padding-bottom: 0px;
+}
+
+.p-l-0 {
+  padding-left: 0px;
+}
+
+.p-r-0 {
+  padding-right: 0px;
+}
+
+.m-0 {
+  margin: 0px;
+}
+
+.m-t-0 {
+  margin-top: 0px;
+}
+
+.m-b-0 {
+  margin-bottom: 0px;
+}
+
+.m-l-0 {
+  margin-left: 0px;
+}
+
+.m-r-0 {
+  margin-right: 0px;
+}
+
+.p-5 {
+  padding: 5px;
+}
+
+.p-t-5 {
+  padding-top: 5px;
+}
+
+.p-b-5 {
+  padding-bottom: 5px;
+}
+
+.p-l-5 {
+  padding-left: 5px;
+}
+
+.p-r-5 {
+  padding-right: 5px;
+}
+
+.m-5 {
+  margin: 5px;
+}
+
+.m-t-5 {
+  margin-top: 5px;
+}
+
+.m-b-5 {
+  margin-bottom: 5px;
+}
+
+.m-l-5 {
+  margin-left: 5px;
+}
+
+.m-r-5 {
+  margin-right: 5px;
+}
+
+.p-10 {
+  padding: 10px;
+}
+
+.p-t-10 {
+  padding-top: 10px;
+}
+
+.p-b-10 {
+  padding-bottom: 10px;
+}
+
+.p-l-10 {
+  padding-left: 10px;
+}
+
+.p-r-10 {
+  padding-right: 10px;
+}
+
+.m-10 {
+  margin: 10px;
+}
+
+.m-t-10 {
+  margin-top: 10px;
+}
+
+.m-b-10 {
+  margin-bottom: 10px;
+}
+
+.m-l-10 {
+  margin-left: 10px;
+}
+
+.m-r-10 {
+  margin-right: 10px;
+}
+
+.p-15 {
+  padding: 15px;
+}
+
+.p-t-15 {
+  padding-top: 15px;
+}
+
+.p-b-15 {
+  padding-bottom: 15px;
+}
+
+.p-l-15 {
+  padding-left: 15px;
+}
+
+.p-r-15 {
+  padding-right: 15px;
+}
+
+.m-15 {
+  margin: 15px;
+}
+
+.m-t-15 {
+  margin-top: 15px;
+}
+
+.m-b-15 {
+  margin-bottom: 15px;
+}
+
+.m-l-15 {
+  margin-left: 15px;
+}
+
+.m-r-15 {
+  margin-right: 15px;
+}
+
+.p-20 {
+  padding: 20px;
+}
+
+.p-t-20 {
+  padding-top: 20px;
+}
+
+.p-b-20 {
+  padding-bottom: 20px;
+}
+
+.p-l-20 {
+  padding-left: 20px;
+}
+
+.p-r-20 {
+  padding-right: 20px;
+}
+
+.m-20 {
+  margin: 20px;
+}
+
+.m-t-20 {
+  margin-top: 20px;
+}
+
+.m-b-20 {
+  margin-bottom: 20px;
+}
+
+.m-l-20 {
+  margin-left: 20px;
+}
+
+.m-r-20 {
+  margin-right: 20px;
+}
+
+.p-25 {
+  padding: 25px;
+}
+
+.p-t-25 {
+  padding-top: 25px;
+}
+
+.p-b-25 {
+  padding-bottom: 25px;
+}
+
+.p-l-25 {
+  padding-left: 25px;
+}
+
+.p-r-25 {
+  padding-right: 25px;
+}
+
+.m-25 {
+  margin: 25px;
+}
+
+.m-t-25 {
+  margin-top: 25px;
+}
+
+.m-b-25 {
+  margin-bottom: 25px;
+}
+
+.m-l-25 {
+  margin-left: 25px;
+}
+
+.m-r-25 {
+  margin-right: 25px;
+}
+
+.p-30 {
+  padding: 30px;
+}
+
+.p-t-30 {
+  padding-top: 30px;
+}
+
+.p-b-30 {
+  padding-bottom: 30px;
+}
+
+.p-l-30 {
+  padding-left: 30px;
+}
+
+.p-r-30 {
+  padding-right: 30px;
+}
+
+.m-30 {
+  margin: 30px;
+}
+
+.m-t-30 {
+  margin-top: 30px;
+}
+
+.m-b-30 {
+  margin-bottom: 30px;
+}
+
+.m-l-30 {
+  margin-left: 30px;
+}
+
+.m-r-30 {
+  margin-right: 30px;
+}
+
+.p-35 {
+  padding: 35px;
+}
+
+.p-t-35 {
+  padding-top: 35px;
+}
+
+.p-b-35 {
+  padding-bottom: 35px;
+}
+
+.p-l-35 {
+  padding-left: 35px;
+}
+
+.p-r-35 {
+  padding-right: 35px;
+}
+
+.m-35 {
+  margin: 35px;
+}
+
+.m-t-35 {
+  margin-top: 35px;
+}
+
+.m-b-35 {
+  margin-bottom: 35px;
+}
+
+.m-l-35 {
+  margin-left: 35px;
+}
+
+.m-r-35 {
+  margin-right: 35px;
+}
+
+.p-40 {
+  padding: 40px;
+}
+
+.p-t-40 {
+  padding-top: 40px;
+}
+
+.p-b-40 {
+  padding-bottom: 40px;
+}
+
+.p-l-40 {
+  padding-left: 40px;
+}
+
+.p-r-40 {
+  padding-right: 40px;
+}
+
+.m-40 {
+  margin: 40px;
+}
+
+.m-t-40 {
+  margin-top: 40px;
+}
+
+.m-b-40 {
+  margin-bottom: 40px;
+}
+
+.m-l-40 {
+  margin-left: 40px;
+}
+
+.m-r-40 {
+  margin-right: 40px;
+}
+
+.p-45 {
+  padding: 45px;
+}
+
+.p-t-45 {
+  padding-top: 45px;
+}
+
+.p-b-45 {
+  padding-bottom: 45px;
+}
+
+.p-l-45 {
+  padding-left: 45px;
+}
+
+.p-r-45 {
+  padding-right: 45px;
+}
+
+.m-45 {
+  margin: 45px;
+}
+
+.m-t-45 {
+  margin-top: 45px;
+}
+
+.m-b-45 {
+  margin-bottom: 45px;
+}
+
+.m-l-45 {
+  margin-left: 45px;
+}
+
+.m-r-45 {
+  margin-right: 45px;
+}
+
+.p-50 {
+  padding: 50px;
+}
+
+.p-t-50 {
+  padding-top: 50px;
+}
+
+.p-b-50 {
+  padding-bottom: 50px;
+}
+
+.p-l-50 {
+  padding-left: 50px;
+}
+
+.p-r-50 {
+  padding-right: 50px;
+}
+
+.m-50 {
+  margin: 50px;
+}
+
+.m-t-50 {
+  margin-top: 50px;
+}
+
+.m-b-50 {
+  margin-bottom: 50px;
+}
+
+.m-l-50 {
+  margin-left: 50px;
+}
+
+.m-r-50 {
+  margin-right: 50px;
+}
+
+/*====== Padding , Margin css ends ======*/
+/*====== text-color, background & border css starts ======*/
+.bg-c-blue {
+  background: linear-gradient(-45deg, #19BCBF, #149698) !important;
+}
+
+.text-c-blue {
+  color: #19BCBF;
+}
+
+.b-c-blue {
+  border: 1px solid #19BCBF;
+}
+
+.bg-c-red {
+  background: linear-gradient(-45deg, #FF425C, #e53b52) !important;
+}
+
+.text-c-red {
+  color: #FF425C;
+}
+
+.b-c-red {
+  border: 1px solid #FF425C;
+}
+
+.bg-c-green {
+  background: linear-gradient(-45deg, #13bd8a, #0f976e) !important;
+}
+
+.text-c-green {
+  color: #13bd8a;
+}
+
+.b-c-green {
+  border: 1px solid #13bd8a;
+}
+
+.bg-c-yellow {
+  background: linear-gradient(-45deg, #FF9764, #ff864b) !important;
+}
+
+.text-c-yellow {
+  color: #FF9764;
+}
+
+.b-c-yellow {
+  border: 1px solid #FF9764;
+}
+
+.bg-c-purple {
+  background: linear-gradient(-45deg, #463699, #7661e6) !important;
+}
+
+.text-c-purple {
+  color: #463699;
+}
+
+.b-c-purple {
+  border: 1px solid #463699;
+}
+
+.bg-c-info {
+  background: linear-gradient(-45deg, #2DCEE3, #24a4b5) !important;
+}
+
+.text-c-info {
+  color: #2DCEE3;
+}
+
+.b-c-info {
+  border: 1px solid #2DCEE3;
+}
+
+/*====== text-color, background & border css ends ======*/
+/*====== [ overrides bootstrap color ]text-color, background & border css starts ======*/
+.bg-primary {
+  background: linear-gradient(-45deg, #19BCBF, #149698) !important;
+}
+
+.text-primary {
+  color: #19BCBF !important;
+}
+
+.b-primary {
+  border: 1px solid #19BCBF !important;
+}
+
+.bg-light-primary {
+  background: rgba(25, 188, 191, 0.15);
+}
+
+.bg-danger {
+  background: linear-gradient(-45deg, #FF425C, #e53b52) !important;
+}
+
+.text-danger {
+  color: #FF425C !important;
+}
+
+.b-danger {
+  border: 1px solid #FF425C !important;
+}
+
+.bg-light-danger {
+  background: rgba(255, 66, 92, 0.15);
+}
+
+.bg-success {
+  background: linear-gradient(-45deg, #13bd8a, #0f976e) !important;
+}
+
+.text-success {
+  color: #13bd8a !important;
+}
+
+.b-success {
+  border: 1px solid #13bd8a !important;
+}
+
+.bg-light-success {
+  background: rgba(19, 189, 138, 0.15);
+}
+
+.bg-warning {
+  background: linear-gradient(-45deg, #FF9764, #ff864b) !important;
+}
+
+.text-warning {
+  color: #FF9764 !important;
+}
+
+.b-warning {
+  border: 1px solid #FF9764 !important;
+}
+
+.bg-light-warning {
+  background: rgba(255, 151, 100, 0.15);
+}
+
+.bg-purple {
+  background: linear-gradient(-45deg, #463699, #7661e6) !important;
+}
+
+.text-purple {
+  color: #463699 !important;
+}
+
+.b-purple {
+  border: 1px solid #463699 !important;
+}
+
+.bg-light-purple {
+  background: rgba(70, 54, 153, 0.15);
+}
+
+.bg-info {
+  background: linear-gradient(-45deg, #2DCEE3, #24a4b5) !important;
+}
+
+.text-info {
+  color: #2DCEE3 !important;
+}
+
+.b-info {
+  border: 1px solid #2DCEE3 !important;
+}
+
+.bg-light-info {
+  background: rgba(45, 206, 227, 0.15);
+}
+
+/*====== [ overrides bootstrap color ]text-color, background & border css ends ======*/
+/*====== border color css starts ======*/
+.b-primary {
+  border: 1px solid #19BCBF;
+}
+
+.border-bottom-primary td {
+  border-bottom: 1px solid #19BCBF;
+}
+
+.border-bottom-primary th {
+  border-bottom: 1px solid #19BCBF !important;
+}
+
+.b-danger {
+  border: 1px solid #FF425C;
+}
+
+.border-bottom-danger td {
+  border-bottom: 1px solid #FF425C;
+}
+
+.border-bottom-danger th {
+  border-bottom: 1px solid #FF425C !important;
+}
+
+.b-success {
+  border: 1px solid #13bd8a;
+}
+
+.border-bottom-success td {
+  border-bottom: 1px solid #13bd8a;
+}
+
+.border-bottom-success th {
+  border-bottom: 1px solid #13bd8a !important;
+}
+
+.b-warning {
+  border: 1px solid #FF9764;
+}
+
+.border-bottom-warning td {
+  border-bottom: 1px solid #FF9764;
+}
+
+.border-bottom-warning th {
+  border-bottom: 1px solid #FF9764 !important;
+}
+
+.b-purple {
+  border: 1px solid #463699;
+}
+
+.border-bottom-purple td {
+  border-bottom: 1px solid #463699;
+}
+
+.border-bottom-purple th {
+  border-bottom: 1px solid #463699 !important;
+}
+
+.b-info {
+  border: 1px solid #2DCEE3;
+}
+
+.border-bottom-info td {
+  border-bottom: 1px solid #2DCEE3;
+}
+
+.border-bottom-info th {
+  border-bottom: 1px solid #2DCEE3 !important;
+}
+
+/*====== border color css ends ======*/
+/*====== Card top border css starts ======*/
+.card-border-c-blue {
+  border-top: 4px solid #19BCBF;
+}
+
+.card-border-c-red {
+  border-top: 4px solid #FF425C;
+}
+
+.card-border-c-green {
+  border-top: 4px solid #13bd8a;
+}
+
+.card-border-c-yellow {
+  border-top: 4px solid #FF9764;
+}
+
+.card-border-c-purple {
+  border-top: 4px solid #463699;
+}
+
+.card-border-c-info {
+  border-top: 4px solid #2DCEE3;
+}
+
+/*====== Card top border ends ======*/
+/*====== Font-size css starts ======*/
+.f-10 {
+  font-size: 10px;
+}
+
+.f-12 {
+  font-size: 12px;
+}
+
+.f-14 {
+  font-size: 14px;
+}
+
+.f-16 {
+  font-size: 16px;
+}
+
+.f-18 {
+  font-size: 18px;
+}
+
+.f-20 {
+  font-size: 20px;
+}
+
+.f-22 {
+  font-size: 22px;
+}
+
+.f-24 {
+  font-size: 24px;
+}
+
+.f-26 {
+  font-size: 26px;
+}
+
+.f-28 {
+  font-size: 28px;
+}
+
+.f-30 {
+  font-size: 30px;
+}
+
+.f-32 {
+  font-size: 32px;
+}
+
+.f-34 {
+  font-size: 34px;
+}
+
+.f-36 {
+  font-size: 36px;
+}
+
+.f-38 {
+  font-size: 38px;
+}
+
+.f-40 {
+  font-size: 40px;
+}
+
+.f-42 {
+  font-size: 42px;
+}
+
+.f-44 {
+  font-size: 44px;
+}
+
+.f-46 {
+  font-size: 46px;
+}
+
+.f-48 {
+  font-size: 48px;
+}
+
+.f-50 {
+  font-size: 50px;
+}
+
+.f-52 {
+  font-size: 52px;
+}
+
+.f-54 {
+  font-size: 54px;
+}
+
+.f-56 {
+  font-size: 56px;
+}
+
+.f-58 {
+  font-size: 58px;
+}
+
+.f-60 {
+  font-size: 60px;
+}
+
+.f-62 {
+  font-size: 62px;
+}
+
+.f-64 {
+  font-size: 64px;
+}
+
+.f-66 {
+  font-size: 66px;
+}
+
+.f-68 {
+  font-size: 68px;
+}
+
+.f-70 {
+  font-size: 70px;
+}
+
+.f-72 {
+  font-size: 72px;
+}
+
+.f-74 {
+  font-size: 74px;
+}
+
+.f-76 {
+  font-size: 76px;
+}
+
+.f-78 {
+  font-size: 78px;
+}
+
+.f-80 {
+  font-size: 80px;
+}
+
+/*====== Font-size css ends ======*/
+/*====== Font-weight css starts ======*/
+.f-w-100 {
+  font-weight: 100;
+}
+
+.f-w-200 {
+  font-weight: 200;
+}
+
+.f-w-300 {
+  font-weight: 300;
+}
+
+.f-w-400 {
+  font-weight: 400;
+}
+
+.f-w-500 {
+  font-weight: 500;
+}
+
+.f-w-600 {
+  font-weight: 600;
+}
+
+.f-w-700 {
+  font-weight: 700;
+}
+
+.f-w-800 {
+  font-weight: 800;
+}
+
+.f-w-900 {
+  font-weight: 900;
+}
+
+/*====== Font-weight css ends ======*/
+/*====== text-color, background color css starts ======*/
+.bg-facebook {
+  background: #3C5A99;
+}
+
+.text-facebook {
+  color: #3C5A99;
+}
+
+.bg-twitter {
+  background: #42C0FB;
+}
+
+.text-twitter {
+  color: #42C0FB;
+}
+
+.bg-dribbble {
+  background: #EC4A89;
+}
+
+.text-dribbble {
+  color: #EC4A89;
+}
+
+.bg-pinterest {
+  background: #BF2131;
+}
+
+.text-pinterest {
+  color: #BF2131;
+}
+
+.bg-youtube {
+  background: #E0291D;
+}
+
+.text-youtube {
+  color: #E0291D;
+}
+
+.bg-googleplus {
+  background: #C73E2E;
+}
+
+.text-googleplus {
+  color: #C73E2E;
+}
+
+.bg-instagram {
+  background: #AA7C62;
+}
+
+.text-instagram {
+  color: #AA7C62;
+}
+
+.bg-viber {
+  background: #7B519D;
+}
+
+.text-viber {
+  color: #7B519D;
+}
+
+.bg-behance {
+  background: #0057ff;
+}
+
+.text-behance {
+  color: #0057ff;
+}
+
+.bg-dropbox {
+  background: #3380FF;
+}
+
+.text-dropbox {
+  color: #3380FF;
+}
+
+.bg-linkedin {
+  background: #0077B5;
+}
+
+.text-linkedin {
+  color: #0077B5;
+}
+
+/*====== text-color css ends ======*/
+/*====== width, Height css starts ======*/
+.wid-20 {
+  width: 20px;
+}
+
+.hei-20 {
+  height: 20px;
+}
+
+.wid-25 {
+  width: 25px;
+}
+
+.hei-25 {
+  height: 25px;
+}
+
+.wid-30 {
+  width: 30px;
+}
+
+.hei-30 {
+  height: 30px;
+}
+
+.wid-35 {
+  width: 35px;
+}
+
+.hei-35 {
+  height: 35px;
+}
+
+.wid-40 {
+  width: 40px;
+}
+
+.hei-40 {
+  height: 40px;
+}
+
+.wid-45 {
+  width: 45px;
+}
+
+.hei-45 {
+  height: 45px;
+}
+
+.wid-50 {
+  width: 50px;
+}
+
+.hei-50 {
+  height: 50px;
+}
+
+.wid-55 {
+  width: 55px;
+}
+
+.hei-55 {
+  height: 55px;
+}
+
+.wid-60 {
+  width: 60px;
+}
+
+.hei-60 {
+  height: 60px;
+}
+
+.wid-65 {
+  width: 65px;
+}
+
+.hei-65 {
+  height: 65px;
+}
+
+.wid-70 {
+  width: 70px;
+}
+
+.hei-70 {
+  height: 70px;
+}
+
+.wid-75 {
+  width: 75px;
+}
+
+.hei-75 {
+  height: 75px;
+}
+
+.wid-80 {
+  width: 80px;
+}
+
+.hei-80 {
+  height: 80px;
+}
+
+.wid-85 {
+  width: 85px;
+}
+
+.hei-85 {
+  height: 85px;
+}
+
+.wid-90 {
+  width: 90px;
+}
+
+.hei-90 {
+  height: 90px;
+}
+
+.wid-95 {
+  width: 95px;
+}
+
+.hei-95 {
+  height: 95px;
+}
+
+.wid-100 {
+  width: 100px;
+}
+
+.hei-100 {
+  height: 100px;
+}
+
+.wid-105 {
+  width: 105px;
+}
+
+.hei-105 {
+  height: 105px;
+}
+
+.wid-110 {
+  width: 110px;
+}
+
+.hei-110 {
+  height: 110px;
+}
+
+.wid-115 {
+  width: 115px;
+}
+
+.hei-115 {
+  height: 115px;
+}
+
+.wid-120 {
+  width: 120px;
+}
+
+.hei-120 {
+  height: 120px;
+}
+
+.wid-125 {
+  width: 125px;
+}
+
+.hei-125 {
+  height: 125px;
+}
+
+.wid-130 {
+  width: 130px;
+}
+
+.hei-130 {
+  height: 130px;
+}
+
+.wid-135 {
+  width: 135px;
+}
+
+.hei-135 {
+  height: 135px;
+}
+
+.wid-140 {
+  width: 140px;
+}
+
+.hei-140 {
+  height: 140px;
+}
+
+.wid-145 {
+  width: 145px;
+}
+
+.hei-145 {
+  height: 145px;
+}
+
+.wid-150 {
+  width: 150px;
+}
+
+.hei-150 {
+  height: 150px;
+}
+
+/*====== width, Height css ends ======*/
+/*====== border-width css starts ======*/
+.b-wid-1 {
+  border-width: 1px;
+}
+
+.b-wid-2 {
+  border-width: 2px;
+}
+
+.b-wid-3 {
+  border-width: 3px;
+}
+
+.b-wid-4 {
+  border-width: 4px;
+}
+
+.b-wid-5 {
+  border-width: 5px;
+}
+
+.b-wid-6 {
+  border-width: 6px;
+}
+
+.b-wid-7 {
+  border-width: 7px;
+}
+
+.b-wid-8 {
+  border-width: 8px;
+}
+
+/*====== border-width css ends ======*/
+/* new logo start */
+.b-brand {
+  display: flex;
+  align-items: center;
+}
+
+.b-brand .b-bg {
+  background: transparent;
+  border-radius: 3px;
+  width: 30px;
+  height: 30px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  color: #fff;
+}
+
+.b-brand .b-title {
+  margin-left: 10px;
+  font-weight: 400;
+  color: #fff;
+  font-size: 16px;
+}
+
+.navbar-collapsed .b-brand .b-title {
+  transform: rotateY(-90deg);
+  transform-origin: 0 0;
+  opacity: 0;
+  transition: all 0.3s ease-in-out;
+}
+
+.navbar-collapsed .mobile-menu {
+  transform: rotateY(-90deg);
+  transform-origin: 0 0;
+  opacity: 0;
+  transition: all 0.3s ease-in-out;
+}
+
+.navbar-collapsed:hover .b-brand .b-title {
+  transform: rotateY(0deg);
+  opacity: 1;
+}
+
+.navbar-collapsed:hover .mobile-menu {
+  transition-delay: 0.3s;
+  transform: rotateY(0deg);
+  opacity: 1;
+}
+
+/* new logo End  */
+/* Pre-loader css start */
+.loader-bg {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 3px;
+  z-index: 1035;
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
+}
+
+.loader-bg .loader-track {
+  position: relative;
+  height: 3px;
+  display: block;
+  width: 100%;
+  overflow: hidden;
+}
+
+.loader-bg .loader-track .loader-fill:after, .loader-bg .loader-track .loader-fill:before {
+  content: "";
+  background: #19BCBF;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  will-change: left, right;
+}
+
+.loader-bg .loader-track .loader-fill:before {
+  -webkit-animation: mbar 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+  animation: mbar 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+}
+
+.loader-bg .loader-track .loader-fill:after {
+  -webkit-animation: m_s 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
+  animation: m_s 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
+  -webkit-animation-delay: 1.15s;
+  animation-delay: 1.15s;
+}
+
+@-webkit-keyframes mbar {
+  0% {
+    left: -35%;
+    right: 100%;
+  }
+  60% {
+    left: 100%;
+    right: -90%;
+  }
+  100% {
+    left: 100%;
+    right: -35%;
+  }
+}
+@keyframes mbar {
+  0% {
+    left: -35%;
+    right: 100%;
+  }
+  60% {
+    left: 100%;
+    right: -90%;
+  }
+  100% {
+    left: 100%;
+    right: -35%;
+  }
+}
+@-webkit-keyframes m_s {
+  0% {
+    left: -200%;
+    right: 100%;
+  }
+  60% {
+    left: 107%;
+    right: -8%;
+  }
+  100% {
+    left: 107%;
+    right: -8%;
+  }
+}
+@keyframes m_s {
+  0% {
+    left: -200%;
+    right: 100%;
+  }
+  60% {
+    left: 107%;
+    right: -8%;
+  }
+  100% {
+    left: 107%;
+    right: -8%;
+  }
+}
+/* Pre-loader css end */
+/* header css start */
+.pcoded-header {
+  z-index: 1028;
+  position: relative;
+  display: flex;
+  min-height: 64px;
+  padding: 0;
+  top: 0;
+  background: #fff;
+  color: rgba(57, 70, 92, 0.8);
+  width: calc(100% - 264px);
+  margin-left: 264px;
+  transition: all 0.3s ease-in-out;
+  box-shadow: 0 1px 0 0 #e2e5e8;
+}
+
+.pcoded-header .m-header {
+  display: none;
+}
+
+.pcoded-header .m-header .logo-dark,
+.pcoded-header .m-header .logo-thumb {
+  display: none;
+}
+
+.pcoded-header .input-group {
+  background: transparent;
+}
+
+.pcoded-header .input-group .input-group-text {
+  margin-right: 0;
+}
+
+.pcoded-header .input-group .input-group-text,
+.pcoded-header a,
+.pcoded-header dropdown-toggle {
+  color: rgba(57, 70, 92, 0.8);
+}
+
+.pcoded-header .input-group .input-group-text:hover,
+.pcoded-header a:hover,
+.pcoded-header dropdown-toggle:hover {
+  color: #39465C;
+}
+
+.pcoded-header a > i {
+  font-size: 16px;
+}
+
+.pcoded-header #mobile-header {
+  display: none;
+}
+
+.pcoded-header .navbar-nav {
+  padding-left: 0;
+  list-style: none;
+  margin-bottom: 0;
+  display: inline-block;
+}
+
+.pcoded-header .navbar-nav > li {
+  line-height: 64px;
+  display: inline-block;
+  padding: 0 12px;
+}
+
+.pcoded-header .navbar-nav > li .nav-link {
+  padding: 0;
+}
+
+.pcoded-header .navbar-nav > li:first-child {
+  padding-left: 25px;
+}
+
+.pcoded-header .navbar-nav > li:last-child {
+  padding-right: 40px;
+}
+
+.pcoded-header .me-auto .dropdown-menu {
+  margin-left: -20px;
+}
+
+.pcoded-header .ms-auto {
+  float: right;
+}
+
+.pcoded-header .ms-auto .dropdown-menu {
+  margin-right: -20px;
+}
+
+.pcoded-header .main-search .input-group {
+  padding: 0;
+}
+
+.pcoded-header .main-search .input-group .form-control,
+.pcoded-header .main-search .input-group .input-group-text {
+  background: transparent;
+  border: none;
+  border-radius: 0;
+  padding: 0;
+}
+
+.pcoded-header .main-search .input-group .search-close {
+  display: none;
+}
+
+.pcoded-header .main-search .input-group .search-btn {
+  border-radius: 2px;
+  padding: 0;
+  background: transparent;
+  border-color: transparent;
+  box-shadow: none;
+}
+
+.pcoded-header .main-search .input-group .form-control {
+  transition: all 0.3s ease-in-out;
+  font-size: 14px;
+}
+
+.pcoded-header .main-search .input-group .form-control:active, .pcoded-header .main-search .input-group .form-control:focus, .pcoded-header .main-search .input-group .form-control:hover,
+.pcoded-header .main-search .input-group .search-btn:active,
+.pcoded-header .main-search .input-group .search-btn:focus,
+.pcoded-header .main-search .input-group .search-btn:hover {
+  outline: none;
+  box-shadow: none;
+}
+
+.pcoded-header .main-search.open .input-group {
+  background: #fff;
+  border: 1px solid #e2e5e8;
+  padding: 5px 5px 5px 20px;
+}
+
+.pcoded-header .main-search.open .input-group .search-close {
+  display: flex;
+}
+
+.pcoded-header .main-search.open .input-group .search-btn {
+  padding: 5px;
+  margin-left: 5px;
+  background: #19BCBF;
+  border-color: #19BCBF;
+}
+
+.pcoded-header .main-search.open .input-group .search-btn .input-group-text {
+  color: #fff;
+}
+
+.pcoded-header .main-search.open .input-group .form-control {
+  transition: all 0.3s ease-in-out;
+}
+
+.pcoded-header .main-search.open .input-group .form-control:active, .pcoded-header .main-search.open .input-group .form-control:focus, .pcoded-header .main-search.open .input-group .form-control:hover,
+.pcoded-header .main-search.open .input-group .search-btn:active,
+.pcoded-header .main-search.open .input-group .search-btn:focus,
+.pcoded-header .main-search.open .input-group .search-btn:hover {
+  outline: none;
+  box-shadow: none;
+}
+
+.pcoded-header .dropdown .dropdown-toggle {
+  line-height: 64px;
+  display: inline-block;
+  padding-right: 15px;
+}
+
+.pcoded-header .dropdown .dropdown-toggle:after {
+  content: "\e842";
+  font-family: "feather";
+  font-size: 15px;
+  border: none;
+  position: absolute;
+  top: 0;
+  left: 12px;
+}
+
+.pcoded-header .dropdown .dropdown-menu {
+  position: absolute;
+  min-width: 240px;
+}
+
+.pcoded-header .dropdown .dropdown-menu li {
+  line-height: 1.2;
+}
+
+.pcoded-header .dropdown .dropdown-menu li a {
+  padding: 10px;
+  font-size: 14px;
+}
+
+.pcoded-header .dropdown .dropdown-menu li.active a, .pcoded-header .dropdown .dropdown-menu li:active a, .pcoded-header .dropdown .dropdown-menu li:focus a, .pcoded-header .dropdown .dropdown-menu li:hover a {
+  color: #686c71;
+}
+
+.pcoded-header .dropdown .notification {
+  width: 350px;
+  padding: 0;
+  line-height: 1.4;
+  overflow: hidden;
+}
+
+.pcoded-header .dropdown .notification a {
+  color: #686c71;
+}
+
+.pcoded-header .dropdown .notification a:hover {
+  color: #111;
+}
+
+.pcoded-header .dropdown .notification .noti-head {
+  background: linear-gradient(-45deg, #19BCBF, #149698);
+  padding: 15px 20px;
+}
+
+.pcoded-header .dropdown .notification .noti-head h6 {
+  color: #fff;
+}
+
+.pcoded-header .dropdown .notification .noti-head a {
+  color: #fff;
+  text-decoration: underline;
+  font-size: 13px;
+}
+
+.pcoded-header .dropdown .notification .noti-body {
+  padding: 0;
+  position: relative;
+  height: 300px;
+}
+
+.pcoded-header .dropdown .notification .noti-body img {
+  width: 40px;
+  margin-right: 20px;
+}
+
+.pcoded-header .dropdown .notification .noti-body li {
+  padding: 15px 20px;
+  transition: all 0.3s ease-in-out;
+}
+
+.pcoded-header .dropdown .notification .noti-body li.n-title {
+  padding-bottom: 0;
+}
+
+.pcoded-header .dropdown .notification .noti-body li.n-title p {
+  margin-bottom: 5px;
+}
+
+.pcoded-header .dropdown .notification .noti-body li.notification:hover {
+  background: rgba(25, 188, 191, 0.1);
+}
+
+.pcoded-header .dropdown .notification .noti-body li p {
+  margin-bottom: 5px;
+  font-size: 13px;
+}
+
+.pcoded-header .dropdown .notification .noti-body li p strong {
+  color: #222;
+}
+
+.pcoded-header .dropdown .notification .noti-body li .n-time {
+  font-size: 80%;
+  float: right;
+}
+
+.pcoded-header .dropdown .notification .noti-footer {
+  border-top: 1px solid #f1f1f1;
+  padding: 15px 20px;
+  text-align: center;
+  background: #eff3f6;
+}
+
+.pcoded-header .dropdown .notification .noti-footer a {
+  text-decoration: underline;
+  font-size: 13px;
+}
+
+.pcoded-header .dropdown .notification ul {
+  padding-left: 0;
+  margin-bottom: 0;
+  list-style: none;
+}
+
+.pcoded-header .dropdown .notification ul li {
+  padding: 20px 15px;
+}
+
+.pcoded-header .dropdown .profile-notification {
+  padding: 0;
+  line-height: 1.4;
+  overflow: hidden;
+}
+
+.pcoded-header .dropdown .profile-notification .pro-head {
+  padding: 15px;
+  position: relative;
+  border-bottom: 1px solid #e2e5e8;
+  display: flex;
+  align-items: center;
+}
+
+.pcoded-header .dropdown .profile-notification .pro-head span {
+  display: block;
+  font-size: 12px;
+}
+
+.pcoded-header .dropdown .profile-notification .pro-head .h6 {
+  font-size: 13px;
+  margin-bottom: 0;
+}
+
+.pcoded-header .dropdown .profile-notification .pro-head img {
+  width: 40px;
+  margin-right: 10px;
+}
+
+.pcoded-header .dropdown .profile-notification .pro-head .dud-logout {
+  color: #fff;
+  padding-right: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  height: 100%;
+  width: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.pcoded-header .dropdown .profile-notification .pro-body {
+  padding: 8px 0;
+  margin-bottom: 0;
+  list-style: none;
+}
+
+.pcoded-header .dropdown .profile-notification .pro-body li a {
+  color: #686c71;
+  font-size: 14px;
+  padding: 15px 20px;
+}
+
+.pcoded-header .dropdown .profile-notification .pro-body li a i {
+  font-size: 16px;
+  margin-right: 10px;
+}
+
+.pcoded-header .dropdown .profile-notification .pro-body li.active, .pcoded-header .dropdown .profile-notification .pro-body li:active, .pcoded-header .dropdown .profile-notification .pro-body li:focus, .pcoded-header .dropdown .profile-notification .pro-body li:hover {
+  background: rgba(25, 188, 191, 0.1);
+}
+
+.pcoded-header .dropdown .profile-notification .pro-body li.active > a, .pcoded-header .dropdown .profile-notification .pro-body li:active > a, .pcoded-header .dropdown .profile-notification .pro-body li:focus > a, .pcoded-header .dropdown .profile-notification .pro-body li:hover > a {
+  background: transparent;
+}
+
+/* header css end */
+/* menu[ vartical ] css start */
+.mobile-menu {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 37px;
+  height: 64px;
+  position: absolute;
+  right: 0;
+  top: 0;
+  padding: 0 10px;
+}
+
+.mobile-menu span {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 2px;
+  background-color: rgba(255, 255, 255, 0.8);
+  transition: all 0.3s ease-in-out;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  border-radius: 2px;
+}
+
+.mobile-menu span:after, .mobile-menu span:before {
+  content: "";
+  position: absolute;
+  left: 0;
+  height: 2px;
+  background-color: rgba(255, 255, 255, 0.8);
+  transition: all 0.3s;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  border-radius: 2px;
+}
+
+.mobile-menu span:after {
+  top: 5px;
+  width: 70%;
+}
+
+.mobile-menu span:before {
+  top: -5px;
+  width: 40%;
+}
+
+.mobile-menu:hover span {
+  background-color: #fff;
+}
+
+.mobile-menu:hover span:after, .mobile-menu:hover span:before {
+  background-color: #fff;
+}
+
+.mobile-menu.on span {
+  background-color: transparent;
+}
+
+.mobile-menu.on span:after, .mobile-menu.on span:before {
+  height: 2px;
+  width: 100%;
+}
+
+.mobile-menu.on span:before {
+  transform: rotate(45deg) translate(4px, 4px);
+}
+
+.mobile-menu.on span:after {
+  transform: rotate(-45deg) translate(3px, -3px);
+}
+
+.navbar-brand {
+  background: #19BCBF;
+}
+
+.pcoded-header:before,
+.pcoded-main-container:before {
+  content: "";
+  transition: all 0.3s ease-in-out;
+}
+
+.pcoded-navbar {
+  display: block;
+  z-index: 1029;
+  position: absolute;
+  transition: all 0.3s ease-in-out;
+  width: 264px;
+  height: 100%;
+  top: 0;
+  background: #39465C;
+  color: #b5bdca;
+}
+
+.pcoded-navbar ul {
+  padding-left: 0;
+  list-style: none;
+  margin-bottom: 0;
+}
+
+.pcoded-navbar .scroll-div.navbar-content {
+  height: calc(100% - 64px);
+}
+
+.pcoded-navbar .header-logo {
+  position: relative;
+  align-items: center;
+  display: inline-flex;
+  float: left;
+  background: #39465C;
+  height: 64px;
+  text-align: center;
+  width: 264px;
+  margin-right: 0;
+  padding: 10px 25px;
+  transition: all 0.3s ease-in-out;
+  box-shadow: 0 1px 0 0 rgba(181, 189, 202, 0.2), 7px 0 15px 0 rgba(69, 90, 100, 0.09);
+}
+
+.pcoded-navbar .header-logo .logo-dark {
+  display: none;
+}
+
+.pcoded-navbar .header-logo .logo-thumb {
+  transform: rotateY(-90deg);
+  opacity: 0;
+  position: absolute;
+  transition: unset;
+}
+
+.pcoded-navbar .header-logo + .scroll-div {
+  float: left;
+  display: inline-block;
+}
+
+.pcoded-navbar .navbar-content {
+  box-shadow: 7px 0 15px 0 rgba(69, 90, 100, 0.09);
+}
+
+.pcoded-navbar .mobile-menu {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 37px;
+  height: 64px;
+  position: absolute;
+  right: 10px;
+  top: 0;
+  padding: 0 10px;
+  transition: all 0.3s ease-in-out;
+}
+
+.pcoded-navbar .pcoded-badge {
+  font-size: 75%;
+  position: relative;
+  right: 0;
+  top: -1px;
+  padding: 2px 7px;
+  border-radius: 2px;
+  display: inline-block;
+  margin-left: 10px;
+}
+
+.pcoded-navbar .pcoded-inner-navbar {
+  flex-direction: column;
+}
+
+.pcoded-navbar .pcoded-inner-navbar li {
+  position: relative;
+}
+
+.pcoded-navbar .pcoded-inner-navbar li > a {
+  text-align: left;
+  padding: 10px 10px 10px 20px;
+  margin: 5px 0 0;
+  display: block;
+  border-radius: 0;
+  position: relative;
+}
+
+.pcoded-navbar .pcoded-inner-navbar li > a .pcoded-mtext {
+  position: relative;
+}
+
+.pcoded-navbar .pcoded-inner-navbar li > a > .pcoded-micon {
+  font-size: 16px;
+  padding: 4px 7px;
+  margin-right: 5px;
+  border-radius: 4px;
+  width: 30px;
+  display: inline-flex;
+  align-items: center;
+  height: 30px;
+  text-align: center;
+}
+
+.pcoded-navbar .pcoded-inner-navbar li > a > .pcoded-micon + .pcoded-mtext {
+  position: relative;
+  top: 0;
+}
+
+.pcoded-navbar .pcoded-inner-navbar li.pcoded-hasmenu > a:after {
+  content: "\e844";
+  font-family: "feather";
+  font-size: 13px;
+  border: none;
+  position: absolute;
+  top: 13px;
+  right: 20px;
+  transition: 0.3s ease-in-out;
+}
+
+.pcoded-navbar .pcoded-inner-navbar li.pcoded-hasmenu.pcoded-trigger > a:after {
+  transform: rotate(90deg);
+}
+
+.pcoded-navbar .pcoded-inner-navbar li.pcoded-hasmenu .pcoded-submenu {
+  display: none;
+}
+
+.pcoded-navbar .pcoded-inner-navbar li.pcoded-hasmenu .pcoded-submenu a:after {
+  top: 7px;
+}
+
+.pcoded-navbar .pcoded-inner-navbar li.pcoded-hasmenu.pcoded-trigger.active > .pcoded-submenu {
+  display: block;
+}
+
+.pcoded-navbar .pcoded-inner-navbar li.pcoded-hasmenu.pcoded-trigger.active > a {
+  position: relative;
+}
+
+.pcoded-navbar .pcoded-inner-navbar li.pcoded-hasmenu .pcoded-submenu li > a {
+  text-align: left;
+  padding: 7px 7px 7px 60px;
+  margin: 0;
+  display: block;
+}
+
+.pcoded-navbar .pcoded-inner-navbar li.pcoded-hasmenu .pcoded-submenu li > a:before {
+  content: "";
+  position: absolute;
+  top: 16px;
+  left: 35px;
+  transition: 0.35s cubic-bezier(0.54, 1.6, 0.5, 1);
+  border-radius: 50%;
+  width: 5px;
+  height: 5px;
+}
+
+.pcoded-navbar .pcoded-inner-navbar li.pcoded-hasmenu .pcoded-submenu li .pcoded-submenu > li > a {
+  padding: 7px 7px 7px 80px;
+}
+
+.pcoded-navbar .pcoded-inner-navbar li.pcoded-hasmenu .pcoded-submenu li .pcoded-submenu > li > a:before {
+  left: 55px;
+}
+
+.pcoded-navbar .pcoded-inner-navbar li.pcoded-menu-caption {
+  font-size: 11px;
+  font-weight: 400;
+  padding: 25px 15px 15px 28px;
+  text-transform: capitalize;
+  position: relative;
+}
+
+.pcoded-navbar .pcoded-inner-navbar li.pcoded-menu-caption > label {
+  margin-bottom: 0;
+}
+
+.pcoded-navbar .pcoded-inner-navbar li.disabled > a {
+  cursor: default;
+  opacity: 0.5;
+}
+
+.pcoded-navbar .pcoded-submenu {
+  background: #354156;
+  padding: 15px 0;
+}
+
+.pcoded-navbar a {
+  color: #b5bdca;
+}
+
+.pcoded-navbar .navbar-content,
+.pcoded-navbar .navbar-wrapper {
+  width: 100%;
+  height: 100%;
+}
+
+.pcoded-navbar.navbar-collapsed {
+  width: 70px;
+  height: 100%;
+  transition: all 0.3s ease-in-out;
+}
+
+.pcoded-navbar.navbar-collapsed .header-logo {
+  width: 70px;
+  padding: 10px 20px;
+}
+
+.pcoded-navbar.navbar-collapsed .header-logo img {
+  transform: rotateY(-90deg);
+  transform-origin: 0 0;
+  opacity: 0;
+  transition: unset;
+}
+
+.pcoded-navbar.navbar-collapsed .header-logo .logo-thumb {
+  transform: rotateY(0deg);
+  transform-origin: 0 0;
+  opacity: 1;
+  left: 20px;
+}
+
+.pcoded-navbar.navbar-collapsed .header-logo .mobile-menu {
+  transform: rotateY(-90deg);
+  transform-origin: 0 0;
+  opacity: 0;
+}
+
+.pcoded-navbar.navbar-collapsed .navbar-content.ps {
+  overflow: visible;
+}
+
+.pcoded-navbar.navbar-collapsed .pcoded-menu-caption {
+  position: relative;
+  width: 100%;
+  height: auto;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.pcoded-navbar.navbar-collapsed .pcoded-menu-caption > label {
+  transform: rotateY(-90deg);
+  transform-origin: 0 0;
+  opacity: 0;
+  transition: all 0.3s ease-in-out;
+}
+
+.pcoded-navbar.navbar-collapsed .pcoded-menu-caption:after {
+  content: "";
+  position: absolute;
+  top: 32px;
+  left: 15px;
+  width: calc(100% - 30px);
+  height: 1px;
+  background: rgba(181, 189, 202, 0.5);
+}
+
+.pcoded-navbar.navbar-collapsed .pcoded-inner-navbar > li > a {
+  padding: 10px 20px;
+}
+
+.pcoded-navbar.navbar-collapsed .pcoded-inner-navbar > li > a > .pcoded-micon + .pcoded-mtext {
+  position: absolute;
+  top: 16px;
+}
+
+.pcoded-navbar.navbar-collapsed .pcoded-inner-navbar > li > a > .pcoded-mtext {
+  transform: rotateY(-90deg);
+  transform-origin: 0 0;
+  opacity: 0;
+  transition: all 0.3s ease-in-out;
+}
+
+.pcoded-navbar.navbar-collapsed .pcoded-inner-navbar > li.pcoded-hasmenu > a:after {
+  right: 12px;
+}
+
+.pcoded-navbar.navbar-collapsed .pcoded-inner-navbar > li.pcoded-hasmenu .pcoded-submenu {
+  display: none;
+}
+
+.pcoded-navbar.navbar-collapsed .pcoded-inner-navbar > li.pcoded-hasmenu .pcoded-submenu li.active > a:before, .pcoded-navbar.navbar-collapsed .pcoded-inner-navbar > li.pcoded-hasmenu .pcoded-submenu li.active:hover > a:before {
+  content: "";
+  border-radius: 50%;
+  width: 5px;
+  height: 5px;
+  top: 16px;
+  background: #19BCBF;
+}
+
+.pcoded-navbar.navbar-collapsed .pcoded-inner-navbar > li.pcoded-trigger .pcoded-submenu:after {
+  content: "";
+  position: absolute;
+  top: 50px;
+  left: 37px;
+  width: 1px;
+  height: calc(100% - 50px);
+  background: rgba(181, 189, 202, 0.2);
+}
+
+.pcoded-navbar.navbar-collapsed .pcoded-inner-navbar > li.pcoded-trigger .pcoded-submenu li a {
+  color: transparent;
+  white-space: nowrap;
+}
+
+.pcoded-navbar.navbar-collapsed .pcoded-inner-navbar > li.pcoded-trigger .pcoded-submenu .pcoded-submenu li a:before {
+  opacity: 0;
+}
+
+.pcoded-navbar.navbar-collapsed ~ .pcoded-header {
+  width: calc(100% - 70px);
+}
+
+.pcoded-navbar.navbar-collapsed ~ .pcoded-header,
+.pcoded-navbar.navbar-collapsed ~ .pcoded-main-container {
+  margin-left: 70px;
+}
+
+.pcoded-navbar.navbar-collapsed .pcoded-badge {
+  transform: rotateX(-90deg);
+  transform-origin: 50% 50%;
+  opacity: 0;
+  display: none;
+  transition: all 0.15s ease-in-out;
+}
+
+.pcoded-navbar.navbar-collapsed:hover {
+  width: 264px !important;
+}
+
+.pcoded-navbar.navbar-collapsed:hover .header-logo {
+  width: 264px;
+}
+
+.pcoded-navbar.navbar-collapsed:hover .header-logo img {
+  transform: rotateY(0deg);
+  opacity: 1;
+}
+
+.pcoded-navbar.navbar-collapsed:hover .header-logo .logo-thumb {
+  transform: rotateY(-90deg);
+  opacity: 0;
+}
+
+.pcoded-navbar.navbar-collapsed:hover .header-logo .mobile-menu {
+  display: flex;
+  right: 10px;
+}
+
+.pcoded-navbar.navbar-collapsed:hover .pcoded-menu-caption > label {
+  transform: rotateY(0deg);
+  opacity: 1;
+}
+
+.pcoded-navbar.navbar-collapsed:hover .pcoded-menu-caption:after {
+  background: transparent;
+}
+
+.pcoded-navbar.navbar-collapsed:hover .mobile-menu {
+  transform: rotateY(0deg);
+  opacity: 1;
+}
+
+.pcoded-navbar.navbar-collapsed:hover .pcoded-inner-navbar > li > a > .pcoded-mtext {
+  transform: rotateY(0deg);
+  opacity: 1;
+}
+
+.pcoded-navbar.navbar-collapsed:hover .pcoded-inner-navbar > li > a > .pcoded-mtext:after {
+  opacity: 1;
+  visibility: visible;
+}
+
+.pcoded-navbar.navbar-collapsed:hover .pcoded-inner-navbar > li.pcoded-hasmenu > a:after {
+  transform: rotateX(0deg);
+}
+
+.pcoded-navbar.navbar-collapsed:hover .pcoded-inner-navbar > li.pcoded-hasmenu.pcoded-trigger > a:after {
+  transform: rotateX(0deg) rotate(90deg);
+}
+
+.pcoded-navbar.navbar-collapsed:hover .pcoded-inner-navbar > li.pcoded-trigger .pcoded-submenu:after {
+  display: none;
+}
+
+.pcoded-navbar.navbar-collapsed:hover .pcoded-inner-navbar > li.pcoded-trigger .pcoded-submenu li a {
+  color: inherit;
+}
+
+.pcoded-navbar.navbar-collapsed:hover .pcoded-inner-navbar > li.pcoded-trigger .pcoded-submenu .pcoded-submenu li a:before {
+  opacity: 1;
+}
+
+.pcoded-navbar .pcoded-menu-caption {
+  color: #8090a5;
+}
+
+.pcoded-navbar .pcoded-inner-navbar li.active > a, .pcoded-navbar .pcoded-inner-navbar li:focus > a, .pcoded-navbar .pcoded-inner-navbar li:hover > a {
+  color: #19BCBF;
+}
+
+.pcoded-navbar .pcoded-inner-navbar li .pcoded-submenu > li.active > a:before, .pcoded-navbar .pcoded-inner-navbar li .pcoded-submenu > li:focus > a:before, .pcoded-navbar .pcoded-inner-navbar li .pcoded-submenu > li:hover > a:before {
+  background-color: #19BCBF;
+}
+
+.pcoded-navbar .pcoded-inner-navbar > li.active:after, .pcoded-navbar .pcoded-inner-navbar > li.pcoded-trigger:after {
+  content: "";
+  background-color: #19BCBF;
+  z-index: 1027;
+  position: absolute;
+  left: 0;
+  top: 5px;
+  width: 3px;
+  height: calc(100% - 5px);
+}
+
+.pcoded-navbar .pcoded-inner-navbar > li.active > a, .pcoded-navbar .pcoded-inner-navbar > li.pcoded-trigger > a {
+  background: #313c4f;
+  color: #fff;
+}
+
+.pcoded-navbar .pcoded-inner-navbar > .pcoded-menu-caption.active:after, .pcoded-navbar .pcoded-inner-navbar > .pcoded-menu-caption.pcoded-trigger:after {
+  display: none;
+}
+
+.pcoded-navbar.mob-open ~ .pcoded-header:before,
+.pcoded-navbar.mob-open ~ .pcoded-main-container:before, .pcoded-navbar.navbar-collapsed:hover ~ .pcoded-header:before,
+.pcoded-navbar.navbar-collapsed:hover ~ .pcoded-main-container:before {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.2);
+  z-index: 1;
+}
+
+/* ===  scroll bar start  ===== */
+.navbar-content {
+  position: relative;
+}
+
+.ps .ps__rail-x.ps--clicking,
+.ps .ps__rail-x:focus,
+.ps .ps__rail-x:hover,
+.ps .ps__rail-y.ps--clicking,
+.ps .ps__rail-y:focus,
+.ps .ps__rail-y:hover {
+  background: transparent;
+}
+
+.ps__thumb-y {
+  background: #aec2d1;
+}
+
+.ps__rail-y.ps--clicking .ps__thumb-y,
+.ps__rail-y:focus > .ps__thumb-y,
+.ps__rail-y:hover > .ps__thumb-y {
+  background: #beceda;
+}
+
+/* ===  scroll bar End  ===== */
+/* menu [ vartical ] css end */
+/* main content start */
+.pcoded-content {
+  position: relative;
+  display: block;
+  padding: 25px;
+}
+
+.pcoded-main-container {
+  position: relative;
+  margin: 0 auto;
+  padding-top: 0;
+  display: block;
+  clear: both;
+  float: unset;
+  right: 0;
+  top: 0;
+  min-height: 100vh;
+  transition: all 0.3s ease-in-out;
+}
+
+/* main content end*/
+/* ==========================    Rsponsive Menu  start   ====================== */
+@media only screen and (max-width: 991px) {
+  .pcoded-header {
+    background: linear-gradient(-45deg, #19BCBF, #149698);
+    color: #fff;
+  }
+  .pcoded-header .input-group-text,
+  .pcoded-header a,
+  .pcoded-header dropdown-toggle {
+    color: #39465C;
+  }
+  .pcoded-header .input-group-text:hover,
+  .pcoded-header a:hover,
+  .pcoded-header dropdown-toggle:hover {
+    color: #19BCBF;
+  }
+  .pcoded-header #mobile-header {
+    display: none;
+    right: 20px;
+  }
+  .pcoded-header .container > .collapse:not(.show),
+  .pcoded-header > .collapse:not(.show) {
+    display: flex;
+    background: #fff;
+    box-shadow: 0 1px 20px 0 rgba(69, 90, 100, 0.08);
+    position: relative;
+    padding: 22px;
+  }
+  .pcoded-header .container > .collapse:not(.show) .mob-toggler:after,
+  .pcoded-header > .collapse:not(.show) .mob-toggler:after {
+    content: "\e89a";
+    font-family: "feather";
+    font-size: 20px;
+    color: #39465C;
+    position: absolute;
+    right: 10px;
+    top: 0;
+    width: 40px;
+    height: 64px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .pcoded-header .container > .collapse:not(.show) .me-auto,
+  .pcoded-header > .collapse:not(.show) .me-auto {
+    height: 64px;
+    display: flex;
+    justify-content: center;
+  }
+  .pcoded-header .container > .collapse:not(.show) .ms-auto,
+  .pcoded-header > .collapse:not(.show) .ms-auto {
+    margin-left: auto;
+    margin-right: 0 !important;
+    display: none;
+  }
+  .pcoded-header .dropdown-menu,
+  .pcoded-header .dropdown-menu a,
+  .pcoded-header .search-close .input-group-text {
+    color: #39465C;
+  }
+  .pcoded-header .m-header {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    width: 100%;
+    height: 64px;
+  }
+  .pcoded-header .m-header .b-brand {
+    margin-left: 20px;
+  }
+  .pcoded-header .m-header .b-brand img {
+    filter: brightness(0) invert(1);
+  }
+  .pcoded-header .m-header .mobile-menu {
+    right: 20px;
+  }
+  .pcoded-header .full-screen {
+    display: none;
+  }
+  .pcoded-header .navbar-nav > li:last-child {
+    padding-right: 60px;
+  }
+  .pcoded-navbar {
+    margin-left: -264px;
+    position: absolute;
+    height: 100%;
+    box-shadow: none;
+  }
+  .pcoded-navbar.menupos-fixed .scroll-div.navbar-content,
+  .pcoded-navbar .scroll-div.navbar-content {
+    height: 100% !important;
+    min-height: 100% !important;
+  }
+  .pcoded-navbar ~ .pcoded-header,
+  .pcoded-navbar ~ .pcoded-main-container {
+    margin-left: 0;
+  }
+  .pcoded-navbar ~ .pcoded-header {
+    width: 100%;
+  }
+  .pcoded-navbar .container {
+    padding-left: 0;
+    padding-right: 0;
+  }
+  .pcoded-navbar .navbar-brand {
+    display: none;
+  }
+  .pcoded-navbar.mob-open {
+    margin-left: 0;
+  }
+  .pcoded-navbar.mob-open .pcoded-main-container ~ .pcoded-header,
+  .pcoded-navbar.mob-open ~ .pcoded-main-container {
+    margin-left: 0;
+  }
+  .pcoded-main-container {
+    padding-top: 0;
+  }
+}
+@media only screen and (max-width: 575px) {
+  .pcoded-header .main-search.open .input-group .search-close {
+    display: none;
+  }
+  .pcoded-header .navbar-nav > li {
+    padding: 0 8px;
+  }
+  .pcoded-header .navbar-nav.ms-auto > li:first-child {
+    padding-left: 0;
+  }
+  .pcoded-header .navbar-nav > li:last-child {
+    padding-right: 50px;
+  }
+  .pcoded-header .navbar-nav.me-auto li.nav-item:not(.dropdown) {
+    display: block;
+    padding-right: 0;
+  }
+  .pcoded-header .navbar-nav.me-auto li.nav-item:not(.dropdown) .search-close {
+    display: none;
+  }
+  .pcoded-header .dropdown.show {
+    position: static;
+  }
+  .pcoded-header .dropdown.show a:after {
+    display: none;
+  }
+  .pcoded-header .dropdown.show:before {
+    display: none;
+  }
+  .pcoded-header .dropdown .notification {
+    width: 100%;
+  }
+  .pcoded-header .dropdown .dropdown-menu {
+    width: 95%;
+    margin-left: auto;
+    margin-right: auto;
+    left: 0;
+    right: 0;
+  }
+  .header-chat.open,
+  .header-user-list.open {
+    width: 280px;
+  }
+  .pcoded-content {
+    padding: 30px 15px;
+  }
+  .card {
+    margin-bottom: 15px;
+  }
+}
+@media only screen and (max-width: 1200px) and (min-width: 768px) {
+  .pcoded-navbar .header-logo {
+    transition: none;
+  }
+  .pcoded-navbar.navbar-collapsed {
+    transition: none;
+  }
+  .pcoded-navbar.navbar-collapsed .header-logo img {
+    transition: none;
+  }
+  .pcoded-navbar.navbar-collapsed .pcoded-menu-caption > label {
+    transition: none;
+  }
+  .pcoded-navbar.navbar-collapsed .pcoded-inner-navbar > li > a > .pcoded-mtext {
+    transition: none;
+  }
+  .pcoded-navbar.navbar-collapsed .pcoded-inner-navbar > li.pcoded-hasmenu > a:after {
+    transition: none;
+    transition-delay: 0;
+  }
+  .pcoded-navbar.navbar-collapsed .pcoded-badge {
+    transition: none;
+  }
+  .pcoded-navbar.navbar-collapsed:hover .pcoded-badge {
+    transition-delay: 0;
+  }
+}
+/* responsive horizontal menu */
+@media only screen and (max-width: 991px) {
+  .pcoded-navbar.theme-horizontal {
+    margin-left: 0;
+  }
+  .pcoded-navbar.theme-horizontal ~ .pcoded-header .m-header .b-brand img {
+    filter: brightness(0) invert(1);
+  }
+  .pcoded-navbar.theme-horizontal ~ .pcoded-header .container > .collapse:not(.show),
+  .pcoded-navbar.theme-horizontal ~ .pcoded-header > .collapse:not(.show) {
+    display: inline-flex;
+    background: #fff;
+    box-shadow: 0 1px 20px 0 rgba(69, 90, 100, 0.08);
+  }
+  .pcoded-navbar.theme-horizontal ~ .pcoded-header .b-title {
+    color: #fff;
+  }
+  .pcoded-navbar.theme-horizontal .pcoded-inner-navbar .pcoded-hasmenu.pcoded-trigger > .pcoded-submenu .pcoded-trigger > .pcoded-submenu,
+  .pcoded-navbar.theme-horizontal .pcoded-inner-navbar .pcoded-hasmenu.pcoded-trigger > .pcoded-submenu .pcoded-trigger.edge > .pcoded-submenu {
+    position: relative;
+    left: 0;
+    min-width: 100%;
+    margin: 0;
+    box-shadow: none;
+  }
+  .pcoded-navbar.theme-horizontal .pcoded-inner-navbar .pcoded-hasmenu.pcoded-trigger > .pcoded-submenu .pcoded-trigger > .pcoded-submenu:before,
+  .pcoded-navbar.theme-horizontal .pcoded-inner-navbar .pcoded-hasmenu.pcoded-trigger > .pcoded-submenu .pcoded-trigger.edge > .pcoded-submenu:before {
+    display: none;
+  }
+}
+/* ==========================    Rsponsive Menu  end   ====================== */
+/* ******************************************************************************* */
+/* * Horizontal */
+.theme-horizontal .sidenav-horizontal-wrapper {
+  flex: 1 1 auto;
+  width: 0;
+}
+
+.sidenav:not(.sidenav-no-animation) .theme-horizontal .sidenav-horizontal-wrapper .sidenav-inner {
+  transition: margin 0.2s;
+}
+
+.theme-horizontal .sidenav-horizontal-next,
+.theme-horizontal .sidenav-horizontal-prev {
+  position: relative;
+  display: block;
+  flex: 0 0 auto;
+  width: 2.25rem;
+  background-color: #39465C;
+  z-index: 9;
+}
+
+.theme-horizontal .sidenav-horizontal-next::after,
+.theme-horizontal .sidenav-horizontal-prev::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  display: block;
+  width: 0.8rem;
+  height: 0.8rem;
+  border: 2px solid;
+  border-top: 0;
+}
+
+.theme-horizontal .sidenav-horizontal-next.disabled,
+.theme-horizontal .sidenav-horizontal-prev.disabled {
+  cursor: default !important;
+  opacity: 0;
+}
+
+.theme-horizontal .sidenav-horizontal-prev::after {
+  border-right: 0;
+  transform: translate(-50%, -50%) rotate(45deg);
+}
+
+.theme-horizontal .sidenav-horizontal-next::after {
+  border-left: 0;
+  transform: translate(-50%, -50%) rotate(-45deg);
+}
+
+.theme-horizontal .sidenav-horizontal:after, .theme-horizontal .sidenav-horizontal:before {
+  content: "";
+  background: #39465C;
+  width: 100%;
+  position: absolute;
+  top: 0;
+  height: 100%;
+  z-index: 5;
+}
+
+@media only screen and (max-width: 991px) {
+  .theme-horizontal .sidenav-horizontal:after, .theme-horizontal .sidenav-horizontal:before {
+    display: none;
+  }
+}
+.theme-horizontal .sidenav-horizontal:before {
+  left: 100%;
+}
+
+.theme-horizontal .sidenav-horizontal:after {
+  right: 100%;
+}
+
+.theme-horizontal.menu-light .sidenav-horizontal:after, .theme-horizontal.menu-light .sidenav-horizontal:before {
+  background: #fff;
+}
+
+@-webkit-keyframes sidenavDropdownShow {
+  0% {
+    opacity: 0;
+    transform: translateY(-0.5rem);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes sidenavDropdownShow {
+  0% {
+    opacity: 0;
+    transform: translateY(-0.5rem);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.menu-styler {
+  z-index: 1029;
+  position: relative;
+  color: #686c71;
+}
+
+.menu-styler h5,
+.menu-styler h6 {
+  color: #111;
+  font-weight: 400;
+}
+
+.menu-styler hr {
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.menu-styler .style-toggler > a {
+  position: fixed;
+  right: 0;
+  top: 200px;
+  transition: 0.3s ease-in-out;
+}
+
+.menu-styler .style-toggler > a:before {
+  content: "";
+  width: 45px;
+  height: 45px;
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 1001;
+  background: #FF425C;
+  transition: 0.3s ease-in-out;
+  border-radius: 3px 0 0 3px;
+  box-shadow: 0 0 8px rgba(255, 66, 92, 0.9), 6px 0 8px rgba(0, 0, 0, 0.1);
+}
+
+.menu-styler .style-toggler > a:after {
+  content: "\e849";
+  top: 12px;
+  font-size: 21px;
+  position: absolute;
+  right: 11px;
+  font-family: "feather";
+  z-index: 1029;
+  line-height: 1;
+  color: #fff;
+  transition: 0.3s ease-in-out;
+}
+
+@media all and (-ms-high-contrast: none) {
+  .menu-styler .style-toggler > a:after {
+    line-height: 0.5;
+  }
+}
+.menu-styler .prebuild-toggler > .prebuild-group {
+  position: fixed;
+  transition: 0.3s ease-in-out;
+  transform: rotate(90deg);
+  right: -109px;
+  top: 370px;
+}
+
+.menu-styler .prebuild-toggler > .prebuild-group > a {
+  color: #19BCBF;
+  background: #fff;
+  border: 1px solid #19BCBF;
+  box-shadow: 0 0 2px rgba(25, 188, 191, 0.9), 6px 0 8px rgba(0, 0, 0, 0.1);
+  padding: 13px 20px;
+}
+
+.menu-styler .prebuild-toggler > .prebuild-group > a:first-child {
+  border-radius: 0 0 0 3px;
+}
+
+.menu-styler .prebuild-toggler > .prebuild-group > a:last-child {
+  border-radius: 0 0 3px 0;
+}
+
+.menu-styler .prebuild-toggler > .prebuild-group > a.active {
+  color: #fff;
+  background: #19BCBF;
+}
+
+.menu-styler.open .style-toggler > a, .menu-styler.prebuild-open .style-toggler > a {
+  right: 400px;
+  -webkit-animation: sh-shake 0s ease infinite;
+  animation: sh-shake 0s ease infinite;
+}
+
+.menu-styler.open .style-toggler > a:after, .menu-styler.prebuild-open .style-toggler > a:after {
+  content: "\e847";
+  -webkit-animation: anim-rotate 0s linear infinite;
+  animation: anim-rotate 0s linear infinite;
+}
+
+.menu-styler.open .prebuild-toggler > .prebuild-group, .menu-styler.prebuild-open .prebuild-toggler > .prebuild-group {
+  right: 291px;
+}
+
+.menu-styler.open .style-block {
+  right: 0;
+  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
+}
+
+.menu-styler.prebuild-open .style-block-prebuild {
+  right: 0;
+  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
+}
+
+.menu-styler .style-block,
+.menu-styler .style-block-prebuild {
+  position: fixed;
+  top: 0;
+  right: -400px;
+  width: 400px;
+  height: 100vh;
+  background: #fff;
+  z-index: 1030;
+  transition: 0.3s ease-in-out;
+  padding: 25px 20px 20px;
+}
+
+.menu-styler .mst-scroll {
+  height: calc(100vh - 175px);
+  background-color: rgba(25, 188, 191, 0.03);
+  padding: 0 15px;
+}
+
+.menu-styler label {
+  margin-bottom: 3px;
+}
+
+.menu-styler .switch input[type=checkbox] + .cr {
+  top: 8px;
+}
+
+.menu-styler .radio input[type=radio] + .cr {
+  margin-right: 10px;
+}
+
+.menu-styler .radio input[type=radio] + .cr:after, .menu-styler .radio input[type=radio] + .cr:before {
+  margin-right: 3px;
+}
+
+.menu-styler h6 {
+  position: relative;
+  margin: 10px 0 15px;
+}
+
+.menu-styler h6:after {
+  content: "";
+  background-color: #19BCBF;
+  position: absolute;
+  left: 0;
+  bottom: -8px;
+  width: 40px;
+  height: 2px;
+}
+
+.menu-styler .nav-pills {
+  padding: 0;
+  box-shadow: none;
+}
+
+.menu-styler .nav-pills li {
+  width: 33.3333333333%;
+}
+
+.menu-styler .tab-content {
+  padding: 15px;
+  box-shadow: none;
+  background-color: rgba(25, 188, 191, 0.03);
+  border-top: 2px solid #19BCBF;
+}
+
+.menu-styler .layout-block {
+  position: relative;
+  margin-bottom: 10px;
+  overflow: hidden;
+  border-radius: 3px;
+  box-shadow: 0 0 0 1px #e2e5e8;
+}
+
+.menu-styler .layout-block .card-img-overlay {
+  background: rgba(57, 70, 92, 0.7);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: all 0.3s ease-in-out;
+  opacity: 0;
+}
+
+.menu-styler .layout-block .card-img-overlay h5 {
+  color: #fff;
+}
+
+.menu-styler .layout-block:hover .card-img-overlay {
+  opacity: 1;
+}
+
+@media only screen and (max-width: 992px) {
+  .menu-styler {
+    display: none;
+  }
+}
+@-webkit-keyframes sh-shake {
+  0%, 100%, 25% {
+    transform: scale(1);
+  }
+  15%, 3%, 9% {
+    transform: scale(1.1);
+  }
+  12%, 20%, 6% {
+    transform: scale(0.9);
+  }
+}
+@keyframes sh-shake {
+  0%, 100%, 25% {
+    transform: scale(1);
+  }
+  15%, 3%, 9% {
+    transform: scale(1.1);
+  }
+  12%, 20%, 6% {
+    transform: scale(0.9);
+  }
+}
+.lay-customizer .theme-color,
+.theme-color {
+  display: block;
+  position: relative;
+  padding: 5px 5px 0;
+  margin-bottom: 10px;
+}
+
+.lay-customizer .theme-color > a,
+.theme-color > a {
+  position: relative;
+  width: 45px;
+  height: 30px;
+  border-radius: 0;
+  display: inline-block;
+  margin-right: 8px;
+  background: #eff3f6;
+  overflow: hidden;
+  box-shadow: 0 0 0 1px #e2e5e8;
+}
+
+.lay-customizer .theme-color > a span,
+.theme-color > a span {
+  width: 100%;
+  position: absolute;
+}
+
+.lay-customizer .theme-color > a span:after, .lay-customizer .theme-color > a span:before,
+.theme-color > a span:after,
+.theme-color > a span:before {
+  content: "";
+  height: 100%;
+  position: absolute;
+}
+
+.lay-customizer .theme-color > a span:before,
+.theme-color > a span:before {
+  width: 30%;
+  left: 0;
+  background: #39465C;
+}
+
+.lay-customizer .theme-color > a span:after,
+.theme-color > a span:after {
+  width: 70%;
+  right: 0;
+  background: #eff3f6;
+}
+
+.lay-customizer .theme-color > a > span:nth-child(1),
+.theme-color > a > span:nth-child(1) {
+  height: 30%;
+  top: 0;
+}
+
+.lay-customizer .theme-color > a > span:nth-child(1):after,
+.theme-color > a > span:nth-child(1):after {
+  background: #fff;
+}
+
+.lay-customizer .theme-color > a > span:nth-child(2),
+.theme-color > a > span:nth-child(2) {
+  height: 75%;
+  bottom: 0;
+}
+
+.lay-customizer .theme-color > a.active,
+.theme-color > a.active {
+  box-shadow: 0 0 0 3px #19BCBF;
+}
+
+.lay-customizer .theme-color > a.active:before,
+.theme-color > a.active:before {
+  content: "\e8dc";
+  top: -1px;
+  font-size: 20px;
+  position: absolute;
+  left: 12px;
+  font-family: "feather";
+  z-index: 1001;
+  color: #19BCBF;
+  transition: 0.3s ease-in-out;
+  text-shadow: 0 1px 3px rgba(25, 188, 191, 0.9), 0 3px 8px rgba(0, 0, 0, 0.1);
+}
+
+.lay-customizer .theme-color > a.active:after,
+.theme-color > a.active:after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(255, 255, 255, 0.4);
+}
+
+.lay-customizer .theme-color > a[data-value=menu-light] span:before,
+.theme-color > a[data-value=menu-light] span:before {
+  background: #fff;
+}
+
+.lay-customizer .theme-color > a[data-value=dark] span:after,
+.theme-color > a[data-value=dark] span:after {
+  background: #1c222d;
+}
+
+.lay-customizer .theme-color > a[data-value=reset],
+.theme-color > a[data-value=reset] {
+  background: #FF425C;
+  color: #fff;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  top: -10px;
+  width: 135px;
+  box-shadow: none;
+}
+
+.lay-customizer .theme-color.small > a,
+.theme-color.small > a {
+  width: 25px;
+  height: 25px;
+  border-radius: 50%;
+}
+
+.lay-customizer .theme-color.small > a:before,
+.theme-color.small > a:before {
+  font-size: 15px;
+  left: 5px;
+  top: 1px;
+}
+
+.lay-customizer .theme-color.small > a > span,
+.theme-color.small > a > span {
+  display: none;
+}
+
+.lay-customizer .theme-color.header-color > a[data-value=header-blue] > span:nth-child(1):after,
+.theme-color.header-color > a[data-value=header-blue] > span:nth-child(1):after {
+  background: #19BCBF;
+}
+
+.lay-customizer .theme-color.header-color.small > a[data-value=header-blue],
+.theme-color.header-color.small > a[data-value=header-blue] {
+  background: #19BCBF;
+}
+
+.lay-customizer .theme-color.header-color > a[data-value=header-red] > span:nth-child(1):after,
+.theme-color.header-color > a[data-value=header-red] > span:nth-child(1):after {
+  background: #b31d1d;
+}
+
+.lay-customizer .theme-color.header-color.small > a[data-value=header-red],
+.theme-color.header-color.small > a[data-value=header-red] {
+  background: #b31d1d;
+}
+
+.lay-customizer .theme-color.header-color > a[data-value=header-purple] > span:nth-child(1):after,
+.theme-color.header-color > a[data-value=header-purple] > span:nth-child(1):after {
+  background: #463699;
+}
+
+.lay-customizer .theme-color.header-color.small > a[data-value=header-purple],
+.theme-color.header-color.small > a[data-value=header-purple] {
+  background: #463699;
+}
+
+.lay-customizer .theme-color.header-color > a[data-value=header-info] > span:nth-child(1):after,
+.theme-color.header-color > a[data-value=header-info] > span:nth-child(1):after {
+  background: #2DCEE3;
+}
+
+.lay-customizer .theme-color.header-color.small > a[data-value=header-info],
+.theme-color.header-color.small > a[data-value=header-info] {
+  background: #2DCEE3;
+}
+
+.lay-customizer .theme-color.header-color > a[data-value=header-dark] > span:nth-child(1):after,
+.theme-color.header-color > a[data-value=header-dark] > span:nth-child(1):after {
+  background: #39465C;
+}
+
+.lay-customizer .theme-color.header-color.small > a[data-value=header-dark],
+.theme-color.header-color.small > a[data-value=header-dark] {
+  background: #39465C;
+}
+
+.lay-customizer .theme-color.navbar-color > a[data-value=navbar-blue] > span:nth-child(2):before,
+.theme-color.navbar-color > a[data-value=navbar-blue] > span:nth-child(2):before {
+  background: #19BCBF;
+}
+
+.lay-customizer .theme-color.navbar-color.small > a[data-value=navbar-blue],
+.theme-color.navbar-color.small > a[data-value=navbar-blue] {
+  background: #19BCBF;
+}
+
+.lay-customizer .theme-color.navbar-color > a[data-value=navbar-red] > span:nth-child(2):before,
+.theme-color.navbar-color > a[data-value=navbar-red] > span:nth-child(2):before {
+  background: #FF9764;
+}
+
+.lay-customizer .theme-color.navbar-color.small > a[data-value=navbar-red],
+.theme-color.navbar-color.small > a[data-value=navbar-red] {
+  background: #FF9764;
+}
+
+.lay-customizer .theme-color.navbar-color > a[data-value=navbar-purple] > span:nth-child(2):before,
+.theme-color.navbar-color > a[data-value=navbar-purple] > span:nth-child(2):before {
+  background: #463699;
+}
+
+.lay-customizer .theme-color.navbar-color.small > a[data-value=navbar-purple],
+.theme-color.navbar-color.small > a[data-value=navbar-purple] {
+  background: #463699;
+}
+
+.lay-customizer .theme-color.navbar-color > a[data-value=navbar-info] > span:nth-child(2):before,
+.theme-color.navbar-color > a[data-value=navbar-info] > span:nth-child(2):before {
+  background: #2DCEE3;
+}
+
+.lay-customizer .theme-color.navbar-color.small > a[data-value=navbar-info],
+.theme-color.navbar-color.small > a[data-value=navbar-info] {
+  background: #2DCEE3;
+}
+
+.lay-customizer .theme-color.navbar-color > a[data-value=navbar-dark] > span:nth-child(2):before,
+.theme-color.navbar-color > a[data-value=navbar-dark] > span:nth-child(2):before {
+  background: #39465C;
+}
+
+.lay-customizer .theme-color.navbar-color.small > a[data-value=navbar-dark],
+.theme-color.navbar-color.small > a[data-value=navbar-dark] {
+  background: #39465C;
+}
+
+.lay-customizer .theme-color.navbar-gradient-color > a[data-value=navbar-gradient-blue] > span:nth-child(2):before,
+.theme-color.navbar-gradient-color > a[data-value=navbar-gradient-blue] > span:nth-child(2):before {
+  background: linear-gradient(-45deg, #19BCBF, #149698);
+}
+
+.lay-customizer .theme-color.navbar-gradient-color > a[data-value=navbar-gradient-red] > span:nth-child(2):before,
+.theme-color.navbar-gradient-color > a[data-value=navbar-gradient-red] > span:nth-child(2):before {
+  background: linear-gradient(-45deg, #FF425C, #e53b52);
+}
+
+.lay-customizer .theme-color.navbar-gradient-color > a[data-value=navbar-gradient-purple] > span:nth-child(2):before,
+.theme-color.navbar-gradient-color > a[data-value=navbar-gradient-purple] > span:nth-child(2):before {
+  background: linear-gradient(-45deg, #463699, #7661e6);
+}
+
+.lay-customizer .theme-color.navbar-gradient-color > a[data-value=navbar-gradient-info] > span:nth-child(2):before,
+.theme-color.navbar-gradient-color > a[data-value=navbar-gradient-info] > span:nth-child(2):before {
+  background: linear-gradient(-45deg, #2DCEE3, #24a4b5);
+}
+
+.lay-customizer .theme-color.navbar-gradient-color > a[data-value=navbar-gradient-dark] > span:nth-child(2):before,
+.theme-color.navbar-gradient-color > a[data-value=navbar-gradient-dark] > span:nth-child(2):before {
+  background: linear-gradient(-45deg, rgb(36, 46, 62), rgb(58, 76, 103));
+}
+
+.lay-customizer .theme-color.brand-color > a[data-value=brand-blue] > span:nth-child(1):before,
+.theme-color.brand-color > a[data-value=brand-blue] > span:nth-child(1):before {
+  background: #19BCBF;
+}
+
+.lay-customizer .theme-color.brand-color.small > a[data-value=brand-blue],
+.theme-color.brand-color.small > a[data-value=brand-blue] {
+  background: #19BCBF;
+}
+
+.lay-customizer .theme-color.brand-color > a[data-value=brand-red] > span:nth-child(1):before,
+.theme-color.brand-color > a[data-value=brand-red] > span:nth-child(1):before {
+  background: #b31d1d;
+}
+
+.lay-customizer .theme-color.brand-color.small > a[data-value=brand-red],
+.theme-color.brand-color.small > a[data-value=brand-red] {
+  background: #b31d1d;
+}
+
+.lay-customizer .theme-color.brand-color > a[data-value=brand-purple] > span:nth-child(1):before,
+.theme-color.brand-color > a[data-value=brand-purple] > span:nth-child(1):before {
+  background: #463699;
+}
+
+.lay-customizer .theme-color.brand-color.small > a[data-value=brand-purple],
+.theme-color.brand-color.small > a[data-value=brand-purple] {
+  background: #463699;
+}
+
+.lay-customizer .theme-color.brand-color > a[data-value=brand-info] > span:nth-child(1):before,
+.theme-color.brand-color > a[data-value=brand-info] > span:nth-child(1):before {
+  background: #2DCEE3;
+}
+
+.lay-customizer .theme-color.brand-color.small > a[data-value=brand-info],
+.theme-color.brand-color.small > a[data-value=brand-info] {
+  background: #2DCEE3;
+}
+
+.lay-customizer .theme-color.brand-color > a[data-value=brand-dark] > span:nth-child(1):before,
+.theme-color.brand-color > a[data-value=brand-dark] > span:nth-child(1):before {
+  background: #39465C;
+}
+
+.lay-customizer .theme-color.brand-color.small > a[data-value=brand-dark],
+.theme-color.brand-color.small > a[data-value=brand-dark] {
+  background: #39465C;
+}
+
+.lay-customizer .theme-color.active-color > a[data-value=active-default],
+.theme-color.active-color > a[data-value=active-default] {
+  background: #19BCBF;
+}
+
+.lay-customizer .theme-color.active-color > a[data-value=active-blue],
+.theme-color.active-color > a[data-value=active-blue] {
+  background: #19BCBF;
+}
+
+.lay-customizer .theme-color.active-color > a[data-value=active-red],
+.theme-color.active-color > a[data-value=active-red] {
+  background: #FF9764;
+}
+
+.lay-customizer .theme-color.active-color > a[data-value=active-purple],
+.theme-color.active-color > a[data-value=active-purple] {
+  background: #463699;
+}
+
+.lay-customizer .theme-color.active-color > a[data-value=active-info],
+.theme-color.active-color > a[data-value=active-info] {
+  background: #2DCEE3;
+}
+
+.lay-customizer .theme-color.active-color > a[data-value=active-dark],
+.theme-color.active-color > a[data-value=active-dark] {
+  background: #39465C;
+}
+
+.lay-customizer .theme-color.title-color > a[data-value=title-default],
+.theme-color.title-color > a[data-value=title-default] {
+  background: #fff;
+}
+
+.lay-customizer .theme-color.title-color > a[data-value=title-blue],
+.theme-color.title-color > a[data-value=title-blue] {
+  background: #19BCBF;
+}
+
+.lay-customizer .theme-color.title-color > a[data-value=title-red],
+.theme-color.title-color > a[data-value=title-red] {
+  background: #FF9764;
+}
+
+.lay-customizer .theme-color.title-color > a[data-value=title-purple],
+.theme-color.title-color > a[data-value=title-purple] {
+  background: #463699;
+}
+
+.lay-customizer .theme-color.title-color > a[data-value=title-info],
+.theme-color.title-color > a[data-value=title-info] {
+  background: #2DCEE3;
+}
+
+.lay-customizer .theme-color.title-color > a[data-value=title-dark],
+.theme-color.title-color > a[data-value=title-dark] {
+  background: #39465C;
+}
+
+.lay-customizer .theme-color.navbar-images > a,
+.theme-color.navbar-images > a {
+  height: 90px;
+  background-size: cover;
+  background-position: center center;
+}
+
+.lay-customizer .theme-color.navbar-images > a span,
+.theme-color.navbar-images > a span {
+  display: none;
+}
+
+.lay-customizer .theme-color.navbar-images > a.active:before,
+.theme-color.navbar-images > a.active:before {
+  top: 35px;
+  content: "\e87c";
+}
+
+.lay-customizer .theme-color.navbar-images > a[data-value=navbar-image-1],
+.theme-color.navbar-images > a[data-value=navbar-image-1] {
+ /*  background-image: url("../images/nav-bg/navbar-img-1.jpg"); */
+}
+
+.lay-customizer .theme-color.navbar-images > a[data-value=navbar-image-2],
+.theme-color.navbar-images > a[data-value=navbar-image-2] {
+ /*  background-image: url("../images/nav-bg/navbar-img-2.jpg"); */
+}
+
+.lay-customizer .theme-color.navbar-images > a[data-value=navbar-image-3],
+.theme-color.navbar-images > a[data-value=navbar-image-3] {
+ /*  background-image: url("../images/nav-bg/navbar-img-3.jpg"); */
+}
+
+.lay-customizer .theme-color.navbar-images > a[data-value=navbar-image-4],
+.theme-color.navbar-images > a[data-value=navbar-image-4] {
+  /* background-image: url("../images/nav-bg/navbar-img-4.jpg"); */
+}
+
+.lay-customizer .theme-color.navbar-images > a[data-value=navbar-image-5],
+.theme-color.navbar-images > a[data-value=navbar-image-5] {
+  /* background-image: url("../images/nav-bg/navbar-img-5.jpg"); */
+}
+
+.lay-customizer .theme-color.navbar-pattern > a,
+.theme-color.navbar-pattern > a {
+  background-size: auto;
+}
+
+.lay-customizer .theme-color.navbar-pattern > a span,
+.theme-color.navbar-pattern > a span {
+  display: none;
+}
+
+.lay-customizer .theme-color.navbar-pattern > a[data-value=navbar-pattern-1],
+.theme-color.navbar-pattern > a[data-value=navbar-pattern-1] {
+ /*  background-image: url("../images/bg-images/1.jpg"); */
+}
+
+.lay-customizer .theme-color.navbar-pattern > a[data-value=navbar-pattern-2],
+.theme-color.navbar-pattern > a[data-value=navbar-pattern-2] {
+/*   background-image: url("../images/bg-images/2.jpg"); */
+}
+
+.lay-customizer .theme-color.navbar-pattern > a[data-value=navbar-pattern-3],
+.theme-color.navbar-pattern > a[data-value=navbar-pattern-3] {
+ /*  background-image: url("../images/bg-images/3.jpg"); */
+}
+
+.lay-customizer .theme-color.navbar-pattern > a[data-value=navbar-pattern-4],
+.theme-color.navbar-pattern > a[data-value=navbar-pattern-4] {
+/*   background-image: url("../images/bg-images/4.jpg"); */
+}
+
+.lay-customizer .theme-color.navbar-pattern > a[data-value=navbar-pattern-5],
+.theme-color.navbar-pattern > a[data-value=navbar-pattern-5] {
+  /* background-image: url("../images/bg-images/5.jpg"); */
+}
+
+.lay-customizer .theme-color.navbar-pattern > a[data-value=navbar-pattern-6],
+.theme-color.navbar-pattern > a[data-value=navbar-pattern-6] {
+/*   background-image: url("../images/bg-images/6.jpg"); */
+}
+
+.lay-customizer .theme-color.bg-images > a,
+.theme-color.bg-images > a {
+  width: 95px;
+  height: 80px;
+  border-radius: 2px;
+  background-size: cover;
+  background-position: center center;
+}
+
+.lay-customizer .theme-color.bg-images > a span,
+.theme-color.bg-images > a span {
+  display: none;
+}
+
+.lay-customizer .theme-color.bg-images > a.active:before,
+.theme-color.bg-images > a.active:before {
+  top: 35px;
+  content: "\e87c";
+}
+
+/* ===================================================================================
+ ==========================    Diffrent Layout Styles Start     ====================
+ ===================================================================================
+ ====== [ light menu style start ] ======== */
+.pcoded-navbar.menu-light {
+  background-color: #fff;
+  color: #39465C;
+}
+
+.pcoded-navbar.menu-light .header-logo {
+  background-color: #39465C;
+}
+
+.pcoded-navbar.menu-light .header-logo .logo-dark {
+  display: none;
+}
+
+.pcoded-navbar.menu-light .header-logo .logo-main {
+  display: block;
+}
+
+.pcoded-navbar.menu-light .sidenav-horizontal-next,
+.pcoded-navbar.menu-light .sidenav-horizontal-prev {
+  background: #fff;
+}
+
+.pcoded-navbar.menu-light .mobile-menu span {
+  background-color: rgba(255, 255, 255, 0.8);
+}
+
+.pcoded-navbar.menu-light .mobile-menu span:after, .pcoded-navbar.menu-light .mobile-menu span:before {
+  background-color: rgba(255, 255, 255, 0.8);
+}
+
+.pcoded-navbar.menu-light .mobile-menu.on span {
+  background-color: transparent;
+}
+
+.pcoded-navbar.menu-light .pcoded-submenu {
+  background: #fbfbfb;
+}
+
+.pcoded-navbar.menu-light a {
+  color: #39465C;
+}
+
+.pcoded-navbar.menu-light.navbar-collapsed .pcoded-menu-caption:after {
+  background: rgba(0, 0, 0, 0.1);
+}
+
+.pcoded-navbar.menu-light.navbar-collapsed:hover .pcoded-menu-caption:after {
+  background: transparent;
+}
+
+.pcoded-navbar.menu-light .pcoded-menu-caption {
+  color: #39465C;
+}
+
+.pcoded-navbar.menu-light .pcoded-inner-navbar > li.active > a, .pcoded-navbar.menu-light .pcoded-inner-navbar > li.pcoded-trigger > a {
+  background: #f1f1f1;
+  color: #111;
+}
+
+.pcoded-navbar.menu-light.theme-horizontal .pcoded-inner-navbar > li.active a, .pcoded-navbar.menu-light.theme-horizontal .pcoded-inner-navbar > li.pcoded-trigger a, .pcoded-navbar.menu-light.theme-horizontal .pcoded-inner-navbar > li:hover a {
+  color: #39465C;
+  background: transparent;
+}
+
+.pcoded-navbar.menu-light.theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu.active:before, .pcoded-navbar.menu-light.theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu.pcoded-trigger:before {
+  color: #fff;
+}
+
+/* ====== [ light menu style end ] ======== */
+/* ====== [ Menu icon start ] ======== */
+.pcoded-navbar.icon-colored .pcoded-inner-navbar > li:nth-child(1) > a > .pcoded-micon {
+  color: #19BCBF;
+}
+
+.pcoded-navbar.icon-colored .pcoded-inner-navbar > li:nth-child(2) > a > .pcoded-micon {
+  color: #FF9764;
+}
+
+.pcoded-navbar.icon-colored .pcoded-inner-navbar > li:nth-child(3) > a > .pcoded-micon {
+  color: #01a9ac;
+}
+
+.pcoded-navbar.icon-colored .pcoded-inner-navbar > li:nth-child(4) > a > .pcoded-micon {
+  color: #463699;
+}
+
+.pcoded-navbar.icon-colored .pcoded-inner-navbar > li:nth-child(5) > a > .pcoded-micon {
+  color: #2DCEE3;
+}
+
+.pcoded-navbar.icon-colored .pcoded-inner-navbar > li:nth-child(6) > a > .pcoded-micon {
+  color: #FF9764;
+}
+
+.pcoded-navbar.icon-colored .pcoded-inner-navbar > li:nth-child(7) > a > .pcoded-micon {
+  color: #19BCBF;
+}
+
+.pcoded-navbar.icon-colored .pcoded-inner-navbar > li:nth-child(8) > a > .pcoded-micon {
+  color: #FF9764;
+}
+
+.pcoded-navbar.icon-colored .pcoded-inner-navbar > li:nth-child(9) > a > .pcoded-micon {
+  color: #01a9ac;
+}
+
+.pcoded-navbar.icon-colored .pcoded-inner-navbar > li:nth-child(10) > a > .pcoded-micon {
+  color: #463699;
+}
+
+.pcoded-navbar.icon-colored .pcoded-inner-navbar > li:nth-child(11) > a > .pcoded-micon {
+  color: #2DCEE3;
+}
+
+.pcoded-navbar.icon-colored .pcoded-inner-navbar > li:nth-child(12) > a > .pcoded-micon {
+  color: #FF9764;
+}
+
+.pcoded-navbar.icon-colored .pcoded-inner-navbar > li:nth-child(13) > a > .pcoded-micon {
+  color: #19BCBF;
+}
+
+.pcoded-navbar.icon-colored .pcoded-inner-navbar > li:nth-child(14) > a > .pcoded-micon {
+  color: #FF9764;
+}
+
+.pcoded-navbar.icon-colored .pcoded-inner-navbar > li:nth-child(15) > a > .pcoded-micon {
+  color: #01a9ac;
+}
+
+.pcoded-navbar.icon-colored .pcoded-inner-navbar > li:nth-child(16) > a > .pcoded-micon {
+  color: #463699;
+}
+
+.pcoded-navbar.icon-colored .pcoded-inner-navbar > li:nth-child(17) > a > .pcoded-micon {
+  color: #2DCEE3;
+}
+
+.pcoded-navbar.icon-colored .pcoded-inner-navbar > li:nth-child(18) > a > .pcoded-micon {
+  color: #FF9764;
+}
+
+.pcoded-navbar.icon-colored .pcoded-inner-navbar > li:nth-child(19) > a > .pcoded-micon {
+  color: #19BCBF;
+}
+
+.pcoded-navbar.icon-colored .pcoded-inner-navbar > li:nth-child(20) > a > .pcoded-micon {
+  color: #FF9764;
+}
+
+.pcoded-navbar.icon-colored .pcoded-inner-navbar > li:nth-child(21) > a > .pcoded-micon {
+  color: #01a9ac;
+}
+
+.pcoded-navbar.icon-colored .pcoded-inner-navbar > li:nth-child(22) > a > .pcoded-micon {
+  color: #463699;
+}
+
+.pcoded-navbar.icon-colored .pcoded-inner-navbar > li:nth-child(23) > a > .pcoded-micon {
+  color: #2DCEE3;
+}
+
+.pcoded-navbar.icon-colored .pcoded-inner-navbar > li:nth-child(24) > a > .pcoded-micon {
+  color: #FF9764;
+}
+
+.pcoded-navbar.icon-colored .pcoded-inner-navbar > li:nth-child(25) > a > .pcoded-micon {
+  color: #19BCBF;
+}
+
+.pcoded-navbar.icon-colored .pcoded-inner-navbar > li:nth-child(26) > a > .pcoded-micon {
+  color: #FF9764;
+}
+
+.pcoded-navbar.icon-colored .pcoded-inner-navbar > li:nth-child(27) > a > .pcoded-micon {
+  color: #01a9ac;
+}
+
+.pcoded-navbar.icon-colored .pcoded-inner-navbar > li:nth-child(28) > a > .pcoded-micon {
+  color: #463699;
+}
+
+.pcoded-navbar.icon-colored .pcoded-inner-navbar > li:nth-child(29) > a > .pcoded-micon {
+  color: #2DCEE3;
+}
+
+.pcoded-navbar.icon-colored .pcoded-inner-navbar > li:nth-child(30) > a > .pcoded-micon {
+  color: #FF9764;
+}
+
+.pcoded-navbar.icon-colored .pcoded-inner-navbar > li:nth-child(31) > a > .pcoded-micon {
+  color: #19BCBF;
+}
+
+.pcoded-navbar.icon-colored .pcoded-inner-navbar > li:nth-child(32) > a > .pcoded-micon {
+  color: #FF9764;
+}
+
+.pcoded-navbar.icon-colored .pcoded-inner-navbar > li:nth-child(33) > a > .pcoded-micon {
+  color: #01a9ac;
+}
+
+.pcoded-navbar.icon-colored .pcoded-inner-navbar > li:nth-child(34) > a > .pcoded-micon {
+  color: #463699;
+}
+
+.pcoded-navbar.icon-colored .pcoded-inner-navbar > li:nth-child(35) > a > .pcoded-micon {
+  color: #2DCEE3;
+}
+
+.pcoded-navbar.icon-colored .pcoded-inner-navbar > li:nth-child(36) > a > .pcoded-micon {
+  color: #FF9764;
+}
+
+.pcoded-navbar.icon-colored .pcoded-inner-navbar > li:nth-child(37) > a > .pcoded-micon {
+  color: #19BCBF;
+}
+
+.pcoded-navbar.icon-colored .pcoded-inner-navbar > li:nth-child(38) > a > .pcoded-micon {
+  color: #FF9764;
+}
+
+.pcoded-navbar.icon-colored .pcoded-inner-navbar > li:nth-child(39) > a > .pcoded-micon {
+  color: #01a9ac;
+}
+
+.pcoded-navbar.icon-colored .pcoded-inner-navbar > li:nth-child(40) > a > .pcoded-micon {
+  color: #463699;
+}
+
+.pcoded-navbar.icon-colored .pcoded-inner-navbar > li:nth-child(41) > a > .pcoded-micon {
+  color: #2DCEE3;
+}
+
+.pcoded-navbar.icon-colored .pcoded-inner-navbar > li:nth-child(42) > a > .pcoded-micon {
+  color: #FF9764;
+}
+
+.pcoded-navbar.icon-colored .pcoded-inner-navbar > li:nth-child(43) > a > .pcoded-micon {
+  color: #19BCBF;
+}
+
+.pcoded-navbar.icon-colored .pcoded-inner-navbar > li:nth-child(44) > a > .pcoded-micon {
+  color: #FF9764;
+}
+
+.pcoded-navbar.icon-colored .pcoded-inner-navbar > li:nth-child(45) > a > .pcoded-micon {
+  color: #01a9ac;
+}
+
+.pcoded-navbar.icon-colored .pcoded-inner-navbar > li:nth-child(46) > a > .pcoded-micon {
+  color: #463699;
+}
+
+.pcoded-navbar.icon-colored .pcoded-inner-navbar > li:nth-child(47) > a > .pcoded-micon {
+  color: #2DCEE3;
+}
+
+.pcoded-navbar.icon-colored .pcoded-inner-navbar > li:nth-child(48) > a > .pcoded-micon {
+  color: #FF9764;
+}
+
+.pcoded-navbar.icon-colored .pcoded-inner-navbar > li.active > a > .pcoded-micon,
+.pcoded-navbar.icon-colored .pcoded-inner-navbar > li.pcoded-trigger > a > .pcoded-micon {
+  color: #fff;
+}
+
+.pcoded-navbar.icon-colored.menu-light .pcoded-inner-navbar > li.active > a > .pcoded-micon,
+.pcoded-navbar.icon-colored.menu-light .pcoded-inner-navbar > li.pcoded-trigger > a > .pcoded-micon {
+  color: #39465C;
+}
+
+body.layout-1 .pcoded-navbar.icon-colored .sidemenu > li:nth-child(1) > a {
+  color: #19BCBF;
+}
+
+body.layout-1 .pcoded-navbar.icon-colored .sidemenu > li:nth-child(2) > a {
+  color: #FF9764;
+}
+
+body.layout-1 .pcoded-navbar.icon-colored .sidemenu > li:nth-child(3) > a {
+  color: #01a9ac;
+}
+
+body.layout-1 .pcoded-navbar.icon-colored .sidemenu > li:nth-child(4) > a {
+  color: #463699;
+}
+
+body.layout-1 .pcoded-navbar.icon-colored .sidemenu > li:nth-child(5) > a {
+  color: #2DCEE3;
+}
+
+body.layout-1 .pcoded-navbar.icon-colored .sidemenu > li:nth-child(6) > a {
+  color: #FF9764;
+}
+
+body.layout-1 .pcoded-navbar.icon-colored .sidemenu > li:nth-child(7) > a {
+  color: #19BCBF;
+}
+
+body.layout-1 .pcoded-navbar.icon-colored .sidemenu > li:nth-child(8) > a {
+  color: #FF9764;
+}
+
+body.layout-1 .pcoded-navbar.icon-colored .sidemenu > li:nth-child(9) > a {
+  color: #01a9ac;
+}
+
+body.layout-1 .pcoded-navbar.icon-colored .sidemenu > li:nth-child(10) > a {
+  color: #463699;
+}
+
+body.layout-1 .pcoded-navbar.icon-colored .sidemenu > li:nth-child(11) > a {
+  color: #2DCEE3;
+}
+
+body.layout-1 .pcoded-navbar.icon-colored .sidemenu > li:nth-child(12) > a {
+  color: #FF9764;
+}
+
+body.layout-1 .pcoded-navbar.icon-colored .sidemenu > li:nth-child(13) > a {
+  color: #19BCBF;
+}
+
+body.layout-1 .pcoded-navbar.icon-colored .sidemenu > li:nth-child(14) > a {
+  color: #FF9764;
+}
+
+body.layout-1 .pcoded-navbar.icon-colored .sidemenu > li:nth-child(15) > a {
+  color: #01a9ac;
+}
+
+body.layout-1 .pcoded-navbar.icon-colored .sidemenu > li:nth-child(16) > a {
+  color: #463699;
+}
+
+body.layout-1 .pcoded-navbar.icon-colored .sidemenu > li:nth-child(17) > a {
+  color: #2DCEE3;
+}
+
+body.layout-1 .pcoded-navbar.icon-colored .sidemenu > li:nth-child(18) > a {
+  color: #FF9764;
+}
+
+body.layout-1 .pcoded-navbar.icon-colored .sidemenu > li:nth-child(19) > a {
+  color: #19BCBF;
+}
+
+body.layout-1 .pcoded-navbar.icon-colored .sidemenu > li:nth-child(20) > a {
+  color: #FF9764;
+}
+
+body.layout-1 .pcoded-navbar.icon-colored .sidemenu > li:nth-child(21) > a {
+  color: #01a9ac;
+}
+
+body.layout-1 .pcoded-navbar.icon-colored .sidemenu > li:nth-child(22) > a {
+  color: #463699;
+}
+
+body.layout-1 .pcoded-navbar.icon-colored .sidemenu > li:nth-child(23) > a {
+  color: #2DCEE3;
+}
+
+body.layout-1 .pcoded-navbar.icon-colored .sidemenu > li:nth-child(24) > a {
+  color: #FF9764;
+}
+
+body.layout-1 .pcoded-navbar.icon-colored .sidemenu > li:nth-child(25) > a {
+  color: #19BCBF;
+}
+
+body.layout-1 .pcoded-navbar.icon-colored .sidemenu > li:nth-child(26) > a {
+  color: #FF9764;
+}
+
+body.layout-1 .pcoded-navbar.icon-colored .sidemenu > li:nth-child(27) > a {
+  color: #01a9ac;
+}
+
+body.layout-1 .pcoded-navbar.icon-colored .sidemenu > li:nth-child(28) > a {
+  color: #463699;
+}
+
+body.layout-1 .pcoded-navbar.icon-colored .sidemenu > li:nth-child(29) > a {
+  color: #2DCEE3;
+}
+
+body.layout-1 .pcoded-navbar.icon-colored .sidemenu > li:nth-child(30) > a {
+  color: #FF9764;
+}
+
+body.layout-1 .pcoded-navbar.icon-colored .sidemenu > li:nth-child(31) > a {
+  color: #19BCBF;
+}
+
+body.layout-1 .pcoded-navbar.icon-colored .sidemenu > li:nth-child(32) > a {
+  color: #FF9764;
+}
+
+body.layout-1 .pcoded-navbar.icon-colored .sidemenu > li:nth-child(33) > a {
+  color: #01a9ac;
+}
+
+body.layout-1 .pcoded-navbar.icon-colored .sidemenu > li:nth-child(34) > a {
+  color: #463699;
+}
+
+body.layout-1 .pcoded-navbar.icon-colored .sidemenu > li:nth-child(35) > a {
+  color: #2DCEE3;
+}
+
+body.layout-1 .pcoded-navbar.icon-colored .sidemenu > li:nth-child(36) > a {
+  color: #FF9764;
+}
+
+body.layout-1 .pcoded-navbar.icon-colored .sidemenu > li:nth-child(37) > a {
+  color: #19BCBF;
+}
+
+body.layout-1 .pcoded-navbar.icon-colored .sidemenu > li:nth-child(38) > a {
+  color: #FF9764;
+}
+
+body.layout-1 .pcoded-navbar.icon-colored .sidemenu > li:nth-child(39) > a {
+  color: #01a9ac;
+}
+
+body.layout-1 .pcoded-navbar.icon-colored .sidemenu > li:nth-child(40) > a {
+  color: #463699;
+}
+
+body.layout-1 .pcoded-navbar.icon-colored .sidemenu > li:nth-child(41) > a {
+  color: #2DCEE3;
+}
+
+body.layout-1 .pcoded-navbar.icon-colored .sidemenu > li:nth-child(42) > a {
+  color: #FF9764;
+}
+
+body.layout-1 .pcoded-navbar.icon-colored .sidemenu > li:nth-child(43) > a {
+  color: #19BCBF;
+}
+
+body.layout-1 .pcoded-navbar.icon-colored .sidemenu > li:nth-child(44) > a {
+  color: #FF9764;
+}
+
+body.layout-1 .pcoded-navbar.icon-colored .sidemenu > li:nth-child(45) > a {
+  color: #01a9ac;
+}
+
+body.layout-1 .pcoded-navbar.icon-colored .sidemenu > li:nth-child(46) > a {
+  color: #463699;
+}
+
+body.layout-1 .pcoded-navbar.icon-colored .sidemenu > li:nth-child(47) > a {
+  color: #2DCEE3;
+}
+
+body.layout-1 .pcoded-navbar.icon-colored .sidemenu > li:nth-child(48) > a {
+  color: #FF9764;
+}
+
+/* ====== [ Menu icon end ] ======== */
+/* ====== [ Header color start ] ======== */
+.theme-horizontal ~ .pcoded-header {
+  box-shadow: 0 1px 20px 0 rgba(63, 77, 103, 0.15);
+}
+
+@media only screen and (max-width: 991px) {
+  .theme-horizontal ~ .pcoded-header {
+    background: #39465C;
+  }
+  .theme-horizontal ~ .pcoded-header .horizontal-dasktop {
+    display: none;
+  }
+  .theme-horizontal ~ .pcoded-header .horizontal-mobile {
+    display: inline-block;
+  }
+}
+@media only screen and (max-width: 992px) {
+  .theme-horizontal-dis ~ .pcoded-header .horizontal-dasktop {
+    display: none;
+  }
+  .theme-horizontal-dis ~ .pcoded-header .horizontal-mobile {
+    display: inline-block;
+  }
+}
+@media only screen and (max-width: 991px) {
+  .theme-horizontal-dis ~ .pcoded-header .dropdown .dropdown-menu.dropdown-menu-right {
+    right: 0;
+    left: auto;
+  }
+}
+@media only screen and (max-width: 575px) {
+  .theme-horizontal-dis ~ .pcoded-header .dropdown .dropdown-menu.dropdown-menu-right {
+    right: 0;
+    left: 0;
+  }
+}
+.pcoded-header[class*=header-] {
+  box-shadow: 0 3px 10px 0 rgba(65, 72, 78, 0.02);
+}
+
+@media only screen and (min-width: 992px) {
+  .pcoded-header[class*=header-] .collapse:not(.show) {
+    background: inherit;
+  }
+  .pcoded-header[class*=header-] .page-header .breadcrumb-item + .breadcrumb-item::before,
+  .pcoded-header[class*=header-] .page-header .page-header-title + .breadcrumb > .breadcrumb-item a,
+  .pcoded-header[class*=header-] .page-header h5 {
+    color: #fff;
+  }
+}
+.pcoded-header.header-blue {
+  background: linear-gradient(-45deg, #19BCBF, #149698);
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.pcoded-header.header-blue .profile-notification li > a {
+  color: #686c71;
+}
+
+.pcoded-header.header-blue .profile-notification li.active, .pcoded-header.header-blue .profile-notification li:active, .pcoded-header.header-blue .profile-notification li:focus, .pcoded-header.header-blue .profile-notification li:hover {
+  background: rgba(25, 188, 191, 0.1);
+}
+
+.pcoded-header.header-blue .profile-notification li.active > a, .pcoded-header.header-blue .profile-notification li:active > a, .pcoded-header.header-blue .profile-notification li:focus > a, .pcoded-header.header-blue .profile-notification li:hover > a {
+  background: transparent;
+}
+
+.pcoded-header.header-blue .dropdown-menu {
+  color: #686c71;
+}
+
+.pcoded-header.header-blue .dropdown-menu a {
+  color: #686c71;
+}
+
+.pcoded-header.header-blue .dropdown-menu > li > a {
+  color: #686c71;
+}
+
+.pcoded-header.header-blue .dropdown-menu > li.active, .pcoded-header.header-blue .dropdown-menu > li:active, .pcoded-header.header-blue .dropdown-menu > li:focus, .pcoded-header.header-blue .dropdown-menu > li:hover {
+  background: rgba(25, 188, 191, 0.1);
+  color: #686c71;
+}
+
+.pcoded-header.header-blue .dropdown-menu > li.active > a, .pcoded-header.header-blue .dropdown-menu > li:active > a, .pcoded-header.header-blue .dropdown-menu > li:focus > a, .pcoded-header.header-blue .dropdown-menu > li:hover > a {
+  background: transparent;
+}
+
+.pcoded-header.header-blue .input-group .input-group-text,
+.pcoded-header.header-blue a,
+.pcoded-header.header-blue dropdown-toggle {
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.pcoded-header.header-blue .input-group .input-group-text:hover,
+.pcoded-header.header-blue a:hover,
+.pcoded-header.header-blue dropdown-toggle:hover {
+  color: #fff;
+}
+
+@media only screen and (max-width: 991px) {
+  .pcoded-header.header-blue .input-group .input-group-text,
+  .pcoded-header.header-blue a,
+  .pcoded-header.header-blue dropdown-toggle {
+    color: #39465C;
+  }
+  .pcoded-header.header-blue .input-group .input-group-text:hover,
+  .pcoded-header.header-blue a:hover,
+  .pcoded-header.header-blue dropdown-toggle:hover {
+    color: #252e3d;
+  }
+}
+.pcoded-header.header-blue .main-search .search-close > .input-group-text {
+  color: #19BCBF;
+}
+
+.pcoded-header.header-blue .main-search.open .input-group {
+  background: #eff3f6;
+}
+
+.pcoded-header.header-blue .main-search.open .input-group .search-btn {
+  background: #19BCBF;
+  border-color: #19BCBF;
+}
+
+.pcoded-header.header-blue .main-search.open .input-group .search-btn .input-group-text {
+  color: #fff;
+}
+
+.pcoded-header.header-blue .dropdown .notification .noti-head a {
+  color: #fff;
+}
+
+.pcoded-header.header-blue .dropdown .notification .noti-body li.notification:hover {
+  background: rgba(25, 188, 191, 0.1);
+}
+
+.pcoded-header.header-blue .dropdown .profile-notification .pro-head {
+  color: #fff;
+  background: #19BCBF;
+}
+
+.pcoded-header.header-blue .dropdown .profile-notification .pro-head .dud-logout {
+  color: #fff;
+}
+
+.pcoded-header.header-blue .b-bg {
+  background: #fff;
+  color: #19BCBF;
+}
+
+.pcoded-header.header-red {
+  background: linear-gradient(-45deg, #b31d1d, #ff0000);
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.pcoded-header.header-red .profile-notification li > a {
+  color: #686c71;
+}
+
+.pcoded-header.header-red .profile-notification li.active, .pcoded-header.header-red .profile-notification li:active, .pcoded-header.header-red .profile-notification li:focus, .pcoded-header.header-red .profile-notification li:hover {
+  background: rgba(179, 29, 29, 0.1);
+}
+
+.pcoded-header.header-red .profile-notification li.active > a, .pcoded-header.header-red .profile-notification li:active > a, .pcoded-header.header-red .profile-notification li:focus > a, .pcoded-header.header-red .profile-notification li:hover > a {
+  background: transparent;
+}
+
+.pcoded-header.header-red .dropdown-menu {
+  color: #686c71;
+}
+
+.pcoded-header.header-red .dropdown-menu a {
+  color: #686c71;
+}
+
+.pcoded-header.header-red .dropdown-menu > li > a {
+  color: #686c71;
+}
+
+.pcoded-header.header-red .dropdown-menu > li.active, .pcoded-header.header-red .dropdown-menu > li:active, .pcoded-header.header-red .dropdown-menu > li:focus, .pcoded-header.header-red .dropdown-menu > li:hover {
+  background: rgba(179, 29, 29, 0.1);
+  color: #686c71;
+}
+
+.pcoded-header.header-red .dropdown-menu > li.active > a, .pcoded-header.header-red .dropdown-menu > li:active > a, .pcoded-header.header-red .dropdown-menu > li:focus > a, .pcoded-header.header-red .dropdown-menu > li:hover > a {
+  background: transparent;
+}
+
+.pcoded-header.header-red .input-group .input-group-text,
+.pcoded-header.header-red a,
+.pcoded-header.header-red dropdown-toggle {
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.pcoded-header.header-red .input-group .input-group-text:hover,
+.pcoded-header.header-red a:hover,
+.pcoded-header.header-red dropdown-toggle:hover {
+  color: #fff;
+}
+
+@media only screen and (max-width: 991px) {
+  .pcoded-header.header-red .input-group .input-group-text,
+  .pcoded-header.header-red a,
+  .pcoded-header.header-red dropdown-toggle {
+    color: #39465C;
+  }
+  .pcoded-header.header-red .input-group .input-group-text:hover,
+  .pcoded-header.header-red a:hover,
+  .pcoded-header.header-red dropdown-toggle:hover {
+    color: #252e3d;
+  }
+}
+.pcoded-header.header-red .main-search .search-close > .input-group-text {
+  color: #b31d1d;
+}
+
+.pcoded-header.header-red .main-search.open .input-group {
+  background: #eff3f6;
+}
+
+.pcoded-header.header-red .main-search.open .input-group .search-btn {
+  background: #b31d1d;
+  border-color: #b31d1d;
+}
+
+.pcoded-header.header-red .main-search.open .input-group .search-btn .input-group-text {
+  color: #fff;
+}
+
+.pcoded-header.header-red .dropdown .notification .noti-head a {
+  color: #fff;
+}
+
+.pcoded-header.header-red .dropdown .notification .noti-body li.notification:hover {
+  background: rgba(179, 29, 29, 0.1);
+}
+
+.pcoded-header.header-red .dropdown .profile-notification .pro-head {
+  color: #fff;
+  background: #b31d1d;
+}
+
+.pcoded-header.header-red .dropdown .profile-notification .pro-head .dud-logout {
+  color: #fff;
+}
+
+.pcoded-header.header-red .b-bg {
+  background: #fff;
+  color: #b31d1d;
+}
+
+.pcoded-header.header-purple {
+  background: linear-gradient(-45deg, #463699, #7661e6);
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.pcoded-header.header-purple .profile-notification li > a {
+  color: #686c71;
+}
+
+.pcoded-header.header-purple .profile-notification li.active, .pcoded-header.header-purple .profile-notification li:active, .pcoded-header.header-purple .profile-notification li:focus, .pcoded-header.header-purple .profile-notification li:hover {
+  background: rgba(70, 54, 153, 0.1);
+}
+
+.pcoded-header.header-purple .profile-notification li.active > a, .pcoded-header.header-purple .profile-notification li:active > a, .pcoded-header.header-purple .profile-notification li:focus > a, .pcoded-header.header-purple .profile-notification li:hover > a {
+  background: transparent;
+}
+
+.pcoded-header.header-purple .dropdown-menu {
+  color: #686c71;
+}
+
+.pcoded-header.header-purple .dropdown-menu a {
+  color: #686c71;
+}
+
+.pcoded-header.header-purple .dropdown-menu > li > a {
+  color: #686c71;
+}
+
+.pcoded-header.header-purple .dropdown-menu > li.active, .pcoded-header.header-purple .dropdown-menu > li:active, .pcoded-header.header-purple .dropdown-menu > li:focus, .pcoded-header.header-purple .dropdown-menu > li:hover {
+  background: rgba(70, 54, 153, 0.1);
+  color: #686c71;
+}
+
+.pcoded-header.header-purple .dropdown-menu > li.active > a, .pcoded-header.header-purple .dropdown-menu > li:active > a, .pcoded-header.header-purple .dropdown-menu > li:focus > a, .pcoded-header.header-purple .dropdown-menu > li:hover > a {
+  background: transparent;
+}
+
+.pcoded-header.header-purple .input-group .input-group-text,
+.pcoded-header.header-purple a,
+.pcoded-header.header-purple dropdown-toggle {
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.pcoded-header.header-purple .input-group .input-group-text:hover,
+.pcoded-header.header-purple a:hover,
+.pcoded-header.header-purple dropdown-toggle:hover {
+  color: #fff;
+}
+
+@media only screen and (max-width: 991px) {
+  .pcoded-header.header-purple .input-group .input-group-text,
+  .pcoded-header.header-purple a,
+  .pcoded-header.header-purple dropdown-toggle {
+    color: #39465C;
+  }
+  .pcoded-header.header-purple .input-group .input-group-text:hover,
+  .pcoded-header.header-purple a:hover,
+  .pcoded-header.header-purple dropdown-toggle:hover {
+    color: #252e3d;
+  }
+}
+.pcoded-header.header-purple .main-search .search-close > .input-group-text {
+  color: #463699;
+}
+
+.pcoded-header.header-purple .main-search.open .input-group {
+  background: #eff3f6;
+}
+
+.pcoded-header.header-purple .main-search.open .input-group .search-btn {
+  background: #463699;
+  border-color: #463699;
+}
+
+.pcoded-header.header-purple .main-search.open .input-group .search-btn .input-group-text {
+  color: #fff;
+}
+
+.pcoded-header.header-purple .dropdown .notification .noti-head a {
+  color: #fff;
+}
+
+.pcoded-header.header-purple .dropdown .notification .noti-body li.notification:hover {
+  background: rgba(70, 54, 153, 0.1);
+}
+
+.pcoded-header.header-purple .dropdown .profile-notification .pro-head {
+  color: #fff;
+  background: #463699;
+}
+
+.pcoded-header.header-purple .dropdown .profile-notification .pro-head .dud-logout {
+  color: #fff;
+}
+
+.pcoded-header.header-purple .b-bg {
+  background: #fff;
+  color: #463699;
+}
+
+.pcoded-header.header-info {
+  background: linear-gradient(-45deg, #2DCEE3, #2DCEE3);
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.pcoded-header.header-info .profile-notification li > a {
+  color: #686c71;
+}
+
+.pcoded-header.header-info .profile-notification li.active, .pcoded-header.header-info .profile-notification li:active, .pcoded-header.header-info .profile-notification li:focus, .pcoded-header.header-info .profile-notification li:hover {
+  background: rgba(45, 206, 227, 0.1);
+}
+
+.pcoded-header.header-info .profile-notification li.active > a, .pcoded-header.header-info .profile-notification li:active > a, .pcoded-header.header-info .profile-notification li:focus > a, .pcoded-header.header-info .profile-notification li:hover > a {
+  background: transparent;
+}
+
+.pcoded-header.header-info .dropdown-menu {
+  color: #686c71;
+}
+
+.pcoded-header.header-info .dropdown-menu a {
+  color: #686c71;
+}
+
+.pcoded-header.header-info .dropdown-menu > li > a {
+  color: #686c71;
+}
+
+.pcoded-header.header-info .dropdown-menu > li.active, .pcoded-header.header-info .dropdown-menu > li:active, .pcoded-header.header-info .dropdown-menu > li:focus, .pcoded-header.header-info .dropdown-menu > li:hover {
+  background: rgba(45, 206, 227, 0.1);
+  color: #686c71;
+}
+
+.pcoded-header.header-info .dropdown-menu > li.active > a, .pcoded-header.header-info .dropdown-menu > li:active > a, .pcoded-header.header-info .dropdown-menu > li:focus > a, .pcoded-header.header-info .dropdown-menu > li:hover > a {
+  background: transparent;
+}
+
+.pcoded-header.header-info .input-group .input-group-text,
+.pcoded-header.header-info a,
+.pcoded-header.header-info dropdown-toggle {
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.pcoded-header.header-info .input-group .input-group-text:hover,
+.pcoded-header.header-info a:hover,
+.pcoded-header.header-info dropdown-toggle:hover {
+  color: #fff;
+}
+
+@media only screen and (max-width: 991px) {
+  .pcoded-header.header-info .input-group .input-group-text,
+  .pcoded-header.header-info a,
+  .pcoded-header.header-info dropdown-toggle {
+    color: #39465C;
+  }
+  .pcoded-header.header-info .input-group .input-group-text:hover,
+  .pcoded-header.header-info a:hover,
+  .pcoded-header.header-info dropdown-toggle:hover {
+    color: #252e3d;
+  }
+}
+.pcoded-header.header-info .main-search .search-close > .input-group-text {
+  color: #2DCEE3;
+}
+
+.pcoded-header.header-info .main-search.open .input-group {
+  background: #eff3f6;
+}
+
+.pcoded-header.header-info .main-search.open .input-group .search-btn {
+  background: #2DCEE3;
+  border-color: #2DCEE3;
+}
+
+.pcoded-header.header-info .main-search.open .input-group .search-btn .input-group-text {
+  color: #fff;
+}
+
+.pcoded-header.header-info .dropdown .notification .noti-head a {
+  color: #fff;
+}
+
+.pcoded-header.header-info .dropdown .notification .noti-body li.notification:hover {
+  background: rgba(45, 206, 227, 0.1);
+}
+
+.pcoded-header.header-info .dropdown .profile-notification .pro-head {
+  color: #fff;
+  background: #2DCEE3;
+}
+
+.pcoded-header.header-info .dropdown .profile-notification .pro-head .dud-logout {
+  color: #fff;
+}
+
+.pcoded-header.header-info .b-bg {
+  background: #fff;
+  color: #2DCEE3;
+}
+
+.pcoded-header.header-dark {
+  background: linear-gradient(-45deg, #39465C, #37383a);
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.pcoded-header.header-dark .profile-notification li > a {
+  color: #686c71;
+}
+
+.pcoded-header.header-dark .profile-notification li.active, .pcoded-header.header-dark .profile-notification li:active, .pcoded-header.header-dark .profile-notification li:focus, .pcoded-header.header-dark .profile-notification li:hover {
+  background: rgba(57, 70, 92, 0.1);
+}
+
+.pcoded-header.header-dark .profile-notification li.active > a, .pcoded-header.header-dark .profile-notification li:active > a, .pcoded-header.header-dark .profile-notification li:focus > a, .pcoded-header.header-dark .profile-notification li:hover > a {
+  background: transparent;
+}
+
+.pcoded-header.header-dark .dropdown-menu {
+  color: #686c71;
+}
+
+.pcoded-header.header-dark .dropdown-menu a {
+  color: #686c71;
+}
+
+.pcoded-header.header-dark .dropdown-menu > li > a {
+  color: #686c71;
+}
+
+.pcoded-header.header-dark .dropdown-menu > li.active, .pcoded-header.header-dark .dropdown-menu > li:active, .pcoded-header.header-dark .dropdown-menu > li:focus, .pcoded-header.header-dark .dropdown-menu > li:hover {
+  background: rgba(57, 70, 92, 0.1);
+  color: #686c71;
+}
+
+.pcoded-header.header-dark .dropdown-menu > li.active > a, .pcoded-header.header-dark .dropdown-menu > li:active > a, .pcoded-header.header-dark .dropdown-menu > li:focus > a, .pcoded-header.header-dark .dropdown-menu > li:hover > a {
+  background: transparent;
+}
+
+.pcoded-header.header-dark .input-group .input-group-text,
+.pcoded-header.header-dark a,
+.pcoded-header.header-dark dropdown-toggle {
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.pcoded-header.header-dark .input-group .input-group-text:hover,
+.pcoded-header.header-dark a:hover,
+.pcoded-header.header-dark dropdown-toggle:hover {
+  color: #fff;
+}
+
+@media only screen and (max-width: 991px) {
+  .pcoded-header.header-dark .input-group .input-group-text,
+  .pcoded-header.header-dark a,
+  .pcoded-header.header-dark dropdown-toggle {
+    color: #39465C;
+  }
+  .pcoded-header.header-dark .input-group .input-group-text:hover,
+  .pcoded-header.header-dark a:hover,
+  .pcoded-header.header-dark dropdown-toggle:hover {
+    color: #252e3d;
+  }
+}
+.pcoded-header.header-dark .main-search .search-close > .input-group-text {
+  color: #39465C;
+}
+
+.pcoded-header.header-dark .main-search.open .input-group {
+  background: #eff3f6;
+}
+
+.pcoded-header.header-dark .main-search.open .input-group .search-btn {
+  background: #39465C;
+  border-color: #39465C;
+}
+
+.pcoded-header.header-dark .main-search.open .input-group .search-btn .input-group-text {
+  color: #fff;
+}
+
+.pcoded-header.header-dark .dropdown .notification .noti-head a {
+  color: #fff;
+}
+
+.pcoded-header.header-dark .dropdown .notification .noti-body li.notification:hover {
+  background: rgba(57, 70, 92, 0.1);
+}
+
+.pcoded-header.header-dark .dropdown .profile-notification .pro-head {
+  color: #fff;
+  background: #39465C;
+}
+
+.pcoded-header.header-dark .dropdown .profile-notification .pro-head .dud-logout {
+  color: #fff;
+}
+
+.pcoded-header.header-dark .b-bg {
+  background: #fff;
+  color: #39465C;
+}
+
+/* ====== [ Header color end ] ======== */
+/* ====== [ Brand color start ] ======== */
+.pcoded-navbar[class*=brand-]:not(.brand-default) .mobile-menu span,
+.pcoded-navbar[class*=brand-]:not(.brand-default) .mobile-menu span:after,
+.pcoded-navbar[class*=brand-]:not(.brand-default) .mobile-menu span:before {
+  background: #fff;
+}
+
+.pcoded-navbar[class*=brand-]:not(.brand-default) .mobile-menu.on span {
+  background: transparent;
+}
+
+.pcoded-navbar[class*=brand-]:not(.brand-default) .b-bg {
+  background: transparent;
+  color: #fff;
+}
+
+.pcoded-navbar.brand-blue .header-logo, .pcoded-navbar[class*=navbar-].brand-blue .header-logo {
+  background: linear-gradient(-45deg, #19BCBF, #149698);
+}
+
+.pcoded-navbar.brand-blue .header-logo .b-bg, .pcoded-navbar[class*=navbar-].brand-blue .header-logo .b-bg {
+  background: transparent;
+  color: #fff;
+}
+
+.pcoded-navbar.brand-red .header-logo, .pcoded-navbar[class*=navbar-].brand-red .header-logo {
+  background: linear-gradient(-45deg, #b31d1d, #ff0000);
+}
+
+.pcoded-navbar.brand-red .header-logo .b-bg, .pcoded-navbar[class*=navbar-].brand-red .header-logo .b-bg {
+  background: transparent;
+  color: #fff;
+}
+
+.pcoded-navbar.brand-purple .header-logo, .pcoded-navbar[class*=navbar-].brand-purple .header-logo {
+  background: linear-gradient(-45deg, #463699, #7661e6);
+}
+
+.pcoded-navbar.brand-purple .header-logo .b-bg, .pcoded-navbar[class*=navbar-].brand-purple .header-logo .b-bg {
+  background: transparent;
+  color: #fff;
+}
+
+.pcoded-navbar.brand-info .header-logo, .pcoded-navbar[class*=navbar-].brand-info .header-logo {
+  background: linear-gradient(-45deg, #2DCEE3, #2DCEE3);
+}
+
+.pcoded-navbar.brand-info .header-logo .b-bg, .pcoded-navbar[class*=navbar-].brand-info .header-logo .b-bg {
+  background: transparent;
+  color: #fff;
+}
+
+.pcoded-navbar.brand-dark .header-logo, .pcoded-navbar[class*=navbar-].brand-dark .header-logo {
+  background: linear-gradient(-45deg, #39465C, #37383a);
+}
+
+.pcoded-navbar.brand-dark .header-logo .b-bg, .pcoded-navbar[class*=navbar-].brand-dark .header-logo .b-bg {
+  background: transparent;
+  color: #fff;
+}
+
+.pcoded-navbar.brand-default .header-logo, .pcoded-navbar[class*=navbar-].brand-default .header-logo {
+  background: #39465C;
+}
+
+/* ====== [ Brand color end ] ======== */
+/* ====== [ Menu color start ] ======== */
+.pcoded-navbar.navbar-blue {
+  background: #19BCBF;
+}
+
+.pcoded-navbar.navbar-blue .mobile-menu span {
+  background-color: #fff;
+}
+
+.pcoded-navbar.navbar-blue .mobile-menu span:after, .pcoded-navbar.navbar-blue .mobile-menu span:before {
+  background-color: #fff;
+}
+
+.pcoded-navbar.navbar-blue .mobile-menu.on span {
+  background-color: transparent;
+}
+
+.pcoded-navbar.navbar-blue .header-logo .b-bg {
+  background: transparent;
+}
+
+.pcoded-navbar.navbar-blue .header-logo .b-bg i {
+  color: #fff;
+}
+
+.pcoded-navbar.navbar-blue .pcoded-submenu {
+  background: transparent;
+}
+
+.pcoded-navbar.navbar-blue .pcoded-menu-caption {
+  color: #fff;
+}
+
+.pcoded-navbar.navbar-blue .pcoded-inner-navbar li a {
+  color: #fff;
+}
+
+.pcoded-navbar.navbar-blue .pcoded-inner-navbar li.active > a, .pcoded-navbar.navbar-blue .pcoded-inner-navbar li:focus > a, .pcoded-navbar.navbar-blue .pcoded-inner-navbar li:hover > a {
+  color: #fff;
+}
+
+.pcoded-navbar.navbar-blue .pcoded-inner-navbar li .pcoded-submenu > li.active > a:before, .pcoded-navbar.navbar-blue .pcoded-inner-navbar li .pcoded-submenu > li:focus > a:before, .pcoded-navbar.navbar-blue .pcoded-inner-navbar li .pcoded-submenu > li:hover > a:before {
+  background: #fff;
+}
+
+.pcoded-navbar.navbar-blue .pcoded-inner-navbar > li.active:after, .pcoded-navbar.navbar-blue .pcoded-inner-navbar > li.pcoded-trigger:after {
+  background: rgba(255, 255, 255, 0.25);
+}
+
+.pcoded-navbar.navbar-blue .pcoded-inner-navbar > li.active > a, .pcoded-navbar.navbar-blue .pcoded-inner-navbar > li.pcoded-trigger > a {
+  background: rgba(255, 255, 255, 0.08);
+  color: #fff;
+  box-shadow: none;
+}
+
+.pcoded-navbar.navbar-blue.theme-horizontal .sidenav-horizontal-next,
+.pcoded-navbar.navbar-blue.theme-horizontal .sidenav-horizontal-prev {
+  background: #19BCBF;
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.pcoded-navbar.navbar-blue.theme-horizontal .sidenav-horizontal-next:hover,
+.pcoded-navbar.navbar-blue.theme-horizontal .sidenav-horizontal-prev:hover {
+  color: #fff;
+}
+
+.pcoded-navbar.navbar-blue.theme-horizontal .sidenav-horizontal:after, .pcoded-navbar.navbar-blue.theme-horizontal .sidenav-horizontal:before {
+  background: #19BCBF;
+}
+
+.pcoded-navbar.navbar-blue.theme-horizontal .pcoded-inner-navbar > li > a {
+  background: transparent;
+}
+
+.pcoded-navbar.navbar-blue.theme-horizontal .pcoded-inner-navbar > li:after {
+  background: rgba(255, 255, 255, 0.7);
+}
+
+.pcoded-navbar.navbar-blue.theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu.active:before, .pcoded-navbar.navbar-blue.theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu.pcoded-trigger:before {
+  color: #19BCBF;
+}
+
+.pcoded-navbar.navbar-red {
+  background: #FF9764;
+}
+
+.pcoded-navbar.navbar-red .mobile-menu span {
+  background-color: #fff;
+}
+
+.pcoded-navbar.navbar-red .mobile-menu span:after, .pcoded-navbar.navbar-red .mobile-menu span:before {
+  background-color: #fff;
+}
+
+.pcoded-navbar.navbar-red .mobile-menu.on span {
+  background-color: transparent;
+}
+
+.pcoded-navbar.navbar-red .header-logo .b-bg {
+  background: transparent;
+}
+
+.pcoded-navbar.navbar-red .header-logo .b-bg i {
+  color: #fff;
+}
+
+.pcoded-navbar.navbar-red .pcoded-submenu {
+  background: transparent;
+}
+
+.pcoded-navbar.navbar-red .pcoded-menu-caption {
+  color: #fff;
+}
+
+.pcoded-navbar.navbar-red .pcoded-inner-navbar li a {
+  color: #fff;
+}
+
+.pcoded-navbar.navbar-red .pcoded-inner-navbar li.active > a, .pcoded-navbar.navbar-red .pcoded-inner-navbar li:focus > a, .pcoded-navbar.navbar-red .pcoded-inner-navbar li:hover > a {
+  color: #fff;
+}
+
+.pcoded-navbar.navbar-red .pcoded-inner-navbar li .pcoded-submenu > li.active > a:before, .pcoded-navbar.navbar-red .pcoded-inner-navbar li .pcoded-submenu > li:focus > a:before, .pcoded-navbar.navbar-red .pcoded-inner-navbar li .pcoded-submenu > li:hover > a:before {
+  background: #fff;
+}
+
+.pcoded-navbar.navbar-red .pcoded-inner-navbar > li.active:after, .pcoded-navbar.navbar-red .pcoded-inner-navbar > li.pcoded-trigger:after {
+  background: rgba(255, 255, 255, 0.25);
+}
+
+.pcoded-navbar.navbar-red .pcoded-inner-navbar > li.active > a, .pcoded-navbar.navbar-red .pcoded-inner-navbar > li.pcoded-trigger > a {
+  background: rgba(255, 255, 255, 0.08);
+  color: #fff;
+  box-shadow: none;
+}
+
+.pcoded-navbar.navbar-red.theme-horizontal .sidenav-horizontal-next,
+.pcoded-navbar.navbar-red.theme-horizontal .sidenav-horizontal-prev {
+  background: #FF9764;
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.pcoded-navbar.navbar-red.theme-horizontal .sidenav-horizontal-next:hover,
+.pcoded-navbar.navbar-red.theme-horizontal .sidenav-horizontal-prev:hover {
+  color: #fff;
+}
+
+.pcoded-navbar.navbar-red.theme-horizontal .sidenav-horizontal:after, .pcoded-navbar.navbar-red.theme-horizontal .sidenav-horizontal:before {
+  background: #FF9764;
+}
+
+.pcoded-navbar.navbar-red.theme-horizontal .pcoded-inner-navbar > li > a {
+  background: transparent;
+}
+
+.pcoded-navbar.navbar-red.theme-horizontal .pcoded-inner-navbar > li:after {
+  background: rgba(255, 255, 255, 0.7);
+}
+
+.pcoded-navbar.navbar-red.theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu.active:before, .pcoded-navbar.navbar-red.theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu.pcoded-trigger:before {
+  color: #FF9764;
+}
+
+.pcoded-navbar.navbar-purple {
+  background: #463699;
+}
+
+.pcoded-navbar.navbar-purple .mobile-menu span {
+  background-color: #fff;
+}
+
+.pcoded-navbar.navbar-purple .mobile-menu span:after, .pcoded-navbar.navbar-purple .mobile-menu span:before {
+  background-color: #fff;
+}
+
+.pcoded-navbar.navbar-purple .mobile-menu.on span {
+  background-color: transparent;
+}
+
+.pcoded-navbar.navbar-purple .header-logo .b-bg {
+  background: transparent;
+}
+
+.pcoded-navbar.navbar-purple .header-logo .b-bg i {
+  color: #fff;
+}
+
+.pcoded-navbar.navbar-purple .pcoded-submenu {
+  background: transparent;
+}
+
+.pcoded-navbar.navbar-purple .pcoded-menu-caption {
+  color: #fff;
+}
+
+.pcoded-navbar.navbar-purple .pcoded-inner-navbar li a {
+  color: #fff;
+}
+
+.pcoded-navbar.navbar-purple .pcoded-inner-navbar li.active > a, .pcoded-navbar.navbar-purple .pcoded-inner-navbar li:focus > a, .pcoded-navbar.navbar-purple .pcoded-inner-navbar li:hover > a {
+  color: #fff;
+}
+
+.pcoded-navbar.navbar-purple .pcoded-inner-navbar li .pcoded-submenu > li.active > a:before, .pcoded-navbar.navbar-purple .pcoded-inner-navbar li .pcoded-submenu > li:focus > a:before, .pcoded-navbar.navbar-purple .pcoded-inner-navbar li .pcoded-submenu > li:hover > a:before {
+  background: #fff;
+}
+
+.pcoded-navbar.navbar-purple .pcoded-inner-navbar > li.active:after, .pcoded-navbar.navbar-purple .pcoded-inner-navbar > li.pcoded-trigger:after {
+  background: rgba(255, 255, 255, 0.25);
+}
+
+.pcoded-navbar.navbar-purple .pcoded-inner-navbar > li.active > a, .pcoded-navbar.navbar-purple .pcoded-inner-navbar > li.pcoded-trigger > a {
+  background: rgba(255, 255, 255, 0.08);
+  color: #fff;
+  box-shadow: none;
+}
+
+.pcoded-navbar.navbar-purple.theme-horizontal .sidenav-horizontal-next,
+.pcoded-navbar.navbar-purple.theme-horizontal .sidenav-horizontal-prev {
+  background: #463699;
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.pcoded-navbar.navbar-purple.theme-horizontal .sidenav-horizontal-next:hover,
+.pcoded-navbar.navbar-purple.theme-horizontal .sidenav-horizontal-prev:hover {
+  color: #fff;
+}
+
+.pcoded-navbar.navbar-purple.theme-horizontal .sidenav-horizontal:after, .pcoded-navbar.navbar-purple.theme-horizontal .sidenav-horizontal:before {
+  background: #463699;
+}
+
+.pcoded-navbar.navbar-purple.theme-horizontal .pcoded-inner-navbar > li > a {
+  background: transparent;
+}
+
+.pcoded-navbar.navbar-purple.theme-horizontal .pcoded-inner-navbar > li:after {
+  background: rgba(255, 255, 255, 0.7);
+}
+
+.pcoded-navbar.navbar-purple.theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu.active:before, .pcoded-navbar.navbar-purple.theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu.pcoded-trigger:before {
+  color: #463699;
+}
+
+.pcoded-navbar.navbar-info {
+  background: #2DCEE3;
+}
+
+.pcoded-navbar.navbar-info .mobile-menu span {
+  background-color: #fff;
+}
+
+.pcoded-navbar.navbar-info .mobile-menu span:after, .pcoded-navbar.navbar-info .mobile-menu span:before {
+  background-color: #fff;
+}
+
+.pcoded-navbar.navbar-info .mobile-menu.on span {
+  background-color: transparent;
+}
+
+.pcoded-navbar.navbar-info .header-logo .b-bg {
+  background: transparent;
+}
+
+.pcoded-navbar.navbar-info .header-logo .b-bg i {
+  color: #fff;
+}
+
+.pcoded-navbar.navbar-info .pcoded-submenu {
+  background: transparent;
+}
+
+.pcoded-navbar.navbar-info .pcoded-menu-caption {
+  color: #fff;
+}
+
+.pcoded-navbar.navbar-info .pcoded-inner-navbar li a {
+  color: #fff;
+}
+
+.pcoded-navbar.navbar-info .pcoded-inner-navbar li.active > a, .pcoded-navbar.navbar-info .pcoded-inner-navbar li:focus > a, .pcoded-navbar.navbar-info .pcoded-inner-navbar li:hover > a {
+  color: #fff;
+}
+
+.pcoded-navbar.navbar-info .pcoded-inner-navbar li .pcoded-submenu > li.active > a:before, .pcoded-navbar.navbar-info .pcoded-inner-navbar li .pcoded-submenu > li:focus > a:before, .pcoded-navbar.navbar-info .pcoded-inner-navbar li .pcoded-submenu > li:hover > a:before {
+  background: #fff;
+}
+
+.pcoded-navbar.navbar-info .pcoded-inner-navbar > li.active:after, .pcoded-navbar.navbar-info .pcoded-inner-navbar > li.pcoded-trigger:after {
+  background: rgba(255, 255, 255, 0.25);
+}
+
+.pcoded-navbar.navbar-info .pcoded-inner-navbar > li.active > a, .pcoded-navbar.navbar-info .pcoded-inner-navbar > li.pcoded-trigger > a {
+  background: rgba(255, 255, 255, 0.08);
+  color: #fff;
+  box-shadow: none;
+}
+
+.pcoded-navbar.navbar-info.theme-horizontal .sidenav-horizontal-next,
+.pcoded-navbar.navbar-info.theme-horizontal .sidenav-horizontal-prev {
+  background: #2DCEE3;
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.pcoded-navbar.navbar-info.theme-horizontal .sidenav-horizontal-next:hover,
+.pcoded-navbar.navbar-info.theme-horizontal .sidenav-horizontal-prev:hover {
+  color: #fff;
+}
+
+.pcoded-navbar.navbar-info.theme-horizontal .sidenav-horizontal:after, .pcoded-navbar.navbar-info.theme-horizontal .sidenav-horizontal:before {
+  background: #2DCEE3;
+}
+
+.pcoded-navbar.navbar-info.theme-horizontal .pcoded-inner-navbar > li > a {
+  background: transparent;
+}
+
+.pcoded-navbar.navbar-info.theme-horizontal .pcoded-inner-navbar > li:after {
+  background: rgba(255, 255, 255, 0.7);
+}
+
+.pcoded-navbar.navbar-info.theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu.active:before, .pcoded-navbar.navbar-info.theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu.pcoded-trigger:before {
+  color: #2DCEE3;
+}
+
+.pcoded-navbar.navbar-dark {
+  background: #39465C;
+}
+
+.pcoded-navbar.navbar-dark .mobile-menu span {
+  background-color: #fff;
+}
+
+.pcoded-navbar.navbar-dark .mobile-menu span:after, .pcoded-navbar.navbar-dark .mobile-menu span:before {
+  background-color: #fff;
+}
+
+.pcoded-navbar.navbar-dark .mobile-menu.on span {
+  background-color: transparent;
+}
+
+.pcoded-navbar.navbar-dark .header-logo .b-bg {
+  background: transparent;
+}
+
+.pcoded-navbar.navbar-dark .header-logo .b-bg i {
+  color: #fff;
+}
+
+.pcoded-navbar.navbar-dark .pcoded-submenu {
+  background: transparent;
+}
+
+.pcoded-navbar.navbar-dark .pcoded-menu-caption {
+  color: #fff;
+}
+
+.pcoded-navbar.navbar-dark .pcoded-inner-navbar li a {
+  color: #fff;
+}
+
+.pcoded-navbar.navbar-dark .pcoded-inner-navbar li.active > a, .pcoded-navbar.navbar-dark .pcoded-inner-navbar li:focus > a, .pcoded-navbar.navbar-dark .pcoded-inner-navbar li:hover > a {
+  color: #fff;
+}
+
+.pcoded-navbar.navbar-dark .pcoded-inner-navbar li .pcoded-submenu > li.active > a:before, .pcoded-navbar.navbar-dark .pcoded-inner-navbar li .pcoded-submenu > li:focus > a:before, .pcoded-navbar.navbar-dark .pcoded-inner-navbar li .pcoded-submenu > li:hover > a:before {
+  background: #fff;
+}
+
+.pcoded-navbar.navbar-dark .pcoded-inner-navbar > li.active:after, .pcoded-navbar.navbar-dark .pcoded-inner-navbar > li.pcoded-trigger:after {
+  background: rgba(255, 255, 255, 0.25);
+}
+
+.pcoded-navbar.navbar-dark .pcoded-inner-navbar > li.active > a, .pcoded-navbar.navbar-dark .pcoded-inner-navbar > li.pcoded-trigger > a {
+  background: rgba(255, 255, 255, 0.08);
+  color: #fff;
+  box-shadow: none;
+}
+
+.pcoded-navbar.navbar-dark.theme-horizontal .sidenav-horizontal-next,
+.pcoded-navbar.navbar-dark.theme-horizontal .sidenav-horizontal-prev {
+  background: #39465C;
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.pcoded-navbar.navbar-dark.theme-horizontal .sidenav-horizontal-next:hover,
+.pcoded-navbar.navbar-dark.theme-horizontal .sidenav-horizontal-prev:hover {
+  color: #fff;
+}
+
+.pcoded-navbar.navbar-dark.theme-horizontal .sidenav-horizontal:after, .pcoded-navbar.navbar-dark.theme-horizontal .sidenav-horizontal:before {
+  background: #39465C;
+}
+
+.pcoded-navbar.navbar-dark.theme-horizontal .pcoded-inner-navbar > li > a {
+  background: transparent;
+}
+
+.pcoded-navbar.navbar-dark.theme-horizontal .pcoded-inner-navbar > li:after {
+  background: rgba(255, 255, 255, 0.7);
+}
+
+.pcoded-navbar.navbar-dark.theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu.active:before, .pcoded-navbar.navbar-dark.theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu.pcoded-trigger:before {
+  color: #39465C;
+}
+
+body.layout-1 .pcoded-navbar.navbar-blue .sidemenu {
+  box-shadow: inset -1px 0 0 0 rgba(255, 255, 255, 0.3);
+}
+
+body.layout-1 .pcoded-navbar.navbar-blue .sidemenu li.active:after {
+  background: #fff;
+}
+
+body.layout-1 .pcoded-navbar.navbar-blue .sidemenu li a {
+  color: #fff;
+}
+
+body.layout-1 .pcoded-navbar.navbar-blue .sidemenu li a:after {
+  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+body.layout-1 .pcoded-navbar.navbar-red .sidemenu {
+  box-shadow: inset -1px 0 0 0 rgba(255, 255, 255, 0.3);
+}
+
+body.layout-1 .pcoded-navbar.navbar-red .sidemenu li.active:after {
+  background: #fff;
+}
+
+body.layout-1 .pcoded-navbar.navbar-red .sidemenu li a {
+  color: #fff;
+}
+
+body.layout-1 .pcoded-navbar.navbar-red .sidemenu li a:after {
+  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+body.layout-1 .pcoded-navbar.navbar-purple .sidemenu {
+  box-shadow: inset -1px 0 0 0 rgba(255, 255, 255, 0.3);
+}
+
+body.layout-1 .pcoded-navbar.navbar-purple .sidemenu li.active:after {
+  background: #fff;
+}
+
+body.layout-1 .pcoded-navbar.navbar-purple .sidemenu li a {
+  color: #fff;
+}
+
+body.layout-1 .pcoded-navbar.navbar-purple .sidemenu li a:after {
+  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+body.layout-1 .pcoded-navbar.navbar-info .sidemenu {
+  box-shadow: inset -1px 0 0 0 rgba(255, 255, 255, 0.3);
+}
+
+body.layout-1 .pcoded-navbar.navbar-info .sidemenu li.active:after {
+  background: #fff;
+}
+
+body.layout-1 .pcoded-navbar.navbar-info .sidemenu li a {
+  color: #fff;
+}
+
+body.layout-1 .pcoded-navbar.navbar-info .sidemenu li a:after {
+  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+body.layout-1 .pcoded-navbar.navbar-dark .sidemenu {
+  box-shadow: inset -1px 0 0 0 rgba(255, 255, 255, 0.3);
+}
+
+body.layout-1 .pcoded-navbar.navbar-dark .sidemenu li.active:after {
+  background: #fff;
+}
+
+body.layout-1 .pcoded-navbar.navbar-dark .sidemenu li a {
+  color: #fff;
+}
+
+body.layout-1 .pcoded-navbar.navbar-dark .sidemenu li a:after {
+  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+body.layout-9 .pcoded-navbar.theme-horizontal.navbar-blue .sidemenu li a {
+  background: rgba(25, 188, 191, 0.15);
+}
+
+body.layout-9 .pcoded-navbar.theme-horizontal.navbar-blue .sidemenu li.active a {
+  background: #19BCBF;
+  color: #fff;
+}
+
+body.layout-9 .pcoded-navbar.theme-horizontal.navbar-blue .side-content {
+  background: #19BCBF;
+}
+
+body.layout-9 .pcoded-navbar.theme-horizontal.navbar-red .sidemenu li a {
+  background: rgba(255, 151, 100, 0.15);
+}
+
+body.layout-9 .pcoded-navbar.theme-horizontal.navbar-red .sidemenu li.active a {
+  background: #FF9764;
+  color: #fff;
+}
+
+body.layout-9 .pcoded-navbar.theme-horizontal.navbar-red .side-content {
+  background: #FF9764;
+}
+
+body.layout-9 .pcoded-navbar.theme-horizontal.navbar-purple .sidemenu li a {
+  background: rgba(70, 54, 153, 0.15);
+}
+
+body.layout-9 .pcoded-navbar.theme-horizontal.navbar-purple .sidemenu li.active a {
+  background: #463699;
+  color: #fff;
+}
+
+body.layout-9 .pcoded-navbar.theme-horizontal.navbar-purple .side-content {
+  background: #463699;
+}
+
+body.layout-9 .pcoded-navbar.theme-horizontal.navbar-info .sidemenu li a {
+  background: rgba(45, 206, 227, 0.15);
+}
+
+body.layout-9 .pcoded-navbar.theme-horizontal.navbar-info .sidemenu li.active a {
+  background: #2DCEE3;
+  color: #fff;
+}
+
+body.layout-9 .pcoded-navbar.theme-horizontal.navbar-info .side-content {
+  background: #2DCEE3;
+}
+
+body.layout-9 .pcoded-navbar.theme-horizontal.navbar-dark .sidemenu li a {
+  background: rgba(57, 70, 92, 0.15);
+}
+
+body.layout-9 .pcoded-navbar.theme-horizontal.navbar-dark .sidemenu li.active a {
+  background: #39465C;
+  color: #fff;
+}
+
+body.layout-9 .pcoded-navbar.theme-horizontal.navbar-dark .side-content {
+  background: #39465C;
+}
+
+body.layout-8 .pcoded-navbar.theme-horizontal.navbar-blue .navbar-nav .dropdown > a,
+body.layout-8 .pcoded-navbar.theme-horizontal.navbar-blue .navbar-nav li > a {
+  color: #fff;
+}
+
+body.layout-8 .pcoded-navbar.theme-horizontal.navbar-blue.brand-dark .header-logo, body.layout-8 .pcoded-navbar.theme-horizontal.navbar-blue[class*=navbar-].brand-dark .header-logo {
+  background: transparent;
+}
+
+body.layout-8 .pcoded-navbar.theme-horizontal.navbar-blue.brand-dark .header-logo .b-bg, body.layout-8 .pcoded-navbar.theme-horizontal.navbar-blue[class*=navbar-].brand-dark .header-logo .b-bg {
+  background: #fff;
+  color: #19BCBF;
+}
+
+body.layout-8 .pcoded-navbar.theme-horizontal.navbar-red .navbar-nav .dropdown > a,
+body.layout-8 .pcoded-navbar.theme-horizontal.navbar-red .navbar-nav li > a {
+  color: #fff;
+}
+
+body.layout-8 .pcoded-navbar.theme-horizontal.navbar-red.brand-dark .header-logo, body.layout-8 .pcoded-navbar.theme-horizontal.navbar-red[class*=navbar-].brand-dark .header-logo {
+  background: transparent;
+}
+
+body.layout-8 .pcoded-navbar.theme-horizontal.navbar-red.brand-dark .header-logo .b-bg, body.layout-8 .pcoded-navbar.theme-horizontal.navbar-red[class*=navbar-].brand-dark .header-logo .b-bg {
+  background: #fff;
+  color: #FF9764;
+}
+
+body.layout-8 .pcoded-navbar.theme-horizontal.navbar-purple .navbar-nav .dropdown > a,
+body.layout-8 .pcoded-navbar.theme-horizontal.navbar-purple .navbar-nav li > a {
+  color: #fff;
+}
+
+body.layout-8 .pcoded-navbar.theme-horizontal.navbar-purple.brand-dark .header-logo, body.layout-8 .pcoded-navbar.theme-horizontal.navbar-purple[class*=navbar-].brand-dark .header-logo {
+  background: transparent;
+}
+
+body.layout-8 .pcoded-navbar.theme-horizontal.navbar-purple.brand-dark .header-logo .b-bg, body.layout-8 .pcoded-navbar.theme-horizontal.navbar-purple[class*=navbar-].brand-dark .header-logo .b-bg {
+  background: #fff;
+  color: #463699;
+}
+
+body.layout-8 .pcoded-navbar.theme-horizontal.navbar-info .navbar-nav .dropdown > a,
+body.layout-8 .pcoded-navbar.theme-horizontal.navbar-info .navbar-nav li > a {
+  color: #fff;
+}
+
+body.layout-8 .pcoded-navbar.theme-horizontal.navbar-info.brand-dark .header-logo, body.layout-8 .pcoded-navbar.theme-horizontal.navbar-info[class*=navbar-].brand-dark .header-logo {
+  background: transparent;
+}
+
+body.layout-8 .pcoded-navbar.theme-horizontal.navbar-info.brand-dark .header-logo .b-bg, body.layout-8 .pcoded-navbar.theme-horizontal.navbar-info[class*=navbar-].brand-dark .header-logo .b-bg {
+  background: #fff;
+  color: #2DCEE3;
+}
+
+body.layout-8 .pcoded-navbar.theme-horizontal.navbar-dark .navbar-nav .dropdown > a,
+body.layout-8 .pcoded-navbar.theme-horizontal.navbar-dark .navbar-nav li > a {
+  color: #fff;
+}
+
+body.layout-8 .pcoded-navbar.theme-horizontal.navbar-dark.brand-dark .header-logo, body.layout-8 .pcoded-navbar.theme-horizontal.navbar-dark[class*=navbar-].brand-dark .header-logo {
+  background: transparent;
+}
+
+body.layout-8 .pcoded-navbar.theme-horizontal.navbar-dark.brand-dark .header-logo .b-bg, body.layout-8 .pcoded-navbar.theme-horizontal.navbar-dark[class*=navbar-].brand-dark .header-logo .b-bg {
+  background: #fff;
+  color: #39465C;
+}
+
+/* ====== [ Menu color end ] ======== */
+/* ====== [ Menu gradient color start ] ======== */
+.pcoded-navbar.navbar-gradient-blue {
+  background: linear-gradient(-45deg, #19BCBF, #149698);
+}
+
+.pcoded-navbar.navbar-gradient-blue .mobile-menu span {
+  background-color: #fff;
+}
+
+.pcoded-navbar.navbar-gradient-blue .mobile-menu span:after, .pcoded-navbar.navbar-gradient-blue .mobile-menu span:before {
+  background-color: #fff;
+}
+
+.pcoded-navbar.navbar-gradient-blue .mobile-menu.on span {
+  background-color: transparent;
+}
+
+.pcoded-navbar.navbar-gradient-blue .header-logo .b-bg {
+  background: linear-gradient(-45deg, #19BCBF, #149698);
+}
+
+.pcoded-navbar.navbar-gradient-blue .header-logo .b-bg i {
+  color: #fff;
+  -webkit-text-fill-color: unset;
+}
+
+.pcoded-navbar.navbar-gradient-blue .pcoded-submenu {
+  background: transparent;
+}
+
+.pcoded-navbar.navbar-gradient-blue .pcoded-menu-caption {
+  color: #fff;
+}
+
+.pcoded-navbar.navbar-gradient-blue .pcoded-inner-navbar li a {
+  color: #fff;
+}
+
+.pcoded-navbar.navbar-gradient-blue .pcoded-inner-navbar li.active > a, .pcoded-navbar.navbar-gradient-blue .pcoded-inner-navbar li:focus > a, .pcoded-navbar.navbar-gradient-blue .pcoded-inner-navbar li:hover > a {
+  color: #fff;
+}
+
+.pcoded-navbar.navbar-gradient-blue .pcoded-inner-navbar li .pcoded-submenu > li.active > a:before, .pcoded-navbar.navbar-gradient-blue .pcoded-inner-navbar li .pcoded-submenu > li:focus > a:before, .pcoded-navbar.navbar-gradient-blue .pcoded-inner-navbar li .pcoded-submenu > li:hover > a:before {
+  background: #fff;
+}
+
+.pcoded-navbar.navbar-gradient-blue .pcoded-inner-navbar > li.active:after, .pcoded-navbar.navbar-gradient-blue .pcoded-inner-navbar > li.pcoded-trigger:after {
+  background: rgba(255, 255, 255, 0.25);
+}
+
+.pcoded-navbar.navbar-gradient-blue .pcoded-inner-navbar > li.active > a, .pcoded-navbar.navbar-gradient-blue .pcoded-inner-navbar > li.pcoded-trigger > a {
+  background: rgba(255, 255, 255, 0.08);
+  color: #fff;
+  box-shadow: none;
+}
+
+.pcoded-navbar.navbar-gradient-blue.theme-horizontal .sidenav-horizontal-next,
+.pcoded-navbar.navbar-gradient-blue.theme-horizontal .sidenav-horizontal-prev {
+  background: linear-gradient(-45deg, #19BCBF, #149698);
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.pcoded-navbar.navbar-gradient-blue.theme-horizontal .sidenav-horizontal-next:hover,
+.pcoded-navbar.navbar-gradient-blue.theme-horizontal .sidenav-horizontal-prev:hover {
+  color: #fff;
+}
+
+.pcoded-navbar.navbar-gradient-blue.theme-horizontal .sidenav-horizontal:after, .pcoded-navbar.navbar-gradient-blue.theme-horizontal .sidenav-horizontal:before {
+  background: linear-gradient(-45deg, #19BCBF, #149698);
+}
+
+.pcoded-navbar.navbar-gradient-blue.theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu.active:before, .pcoded-navbar.navbar-gradient-blue.theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu.pcoded-trigger:before {
+  color: linear-gradient(-45deg, #19BCBF, #149698);
+}
+
+.pcoded-navbar.navbar-gradient-red {
+  background: linear-gradient(-45deg, #FF425C, #e53b52);
+}
+
+.pcoded-navbar.navbar-gradient-red .mobile-menu span {
+  background-color: #fff;
+}
+
+.pcoded-navbar.navbar-gradient-red .mobile-menu span:after, .pcoded-navbar.navbar-gradient-red .mobile-menu span:before {
+  background-color: #fff;
+}
+
+.pcoded-navbar.navbar-gradient-red .mobile-menu.on span {
+  background-color: transparent;
+}
+
+.pcoded-navbar.navbar-gradient-red .header-logo .b-bg {
+  background: linear-gradient(-45deg, #FF425C, #e53b52);
+}
+
+.pcoded-navbar.navbar-gradient-red .header-logo .b-bg i {
+  color: #fff;
+  -webkit-text-fill-color: unset;
+}
+
+.pcoded-navbar.navbar-gradient-red .pcoded-submenu {
+  background: transparent;
+}
+
+.pcoded-navbar.navbar-gradient-red .pcoded-menu-caption {
+  color: #fff;
+}
+
+.pcoded-navbar.navbar-gradient-red .pcoded-inner-navbar li a {
+  color: #fff;
+}
+
+.pcoded-navbar.navbar-gradient-red .pcoded-inner-navbar li.active > a, .pcoded-navbar.navbar-gradient-red .pcoded-inner-navbar li:focus > a, .pcoded-navbar.navbar-gradient-red .pcoded-inner-navbar li:hover > a {
+  color: #fff;
+}
+
+.pcoded-navbar.navbar-gradient-red .pcoded-inner-navbar li .pcoded-submenu > li.active > a:before, .pcoded-navbar.navbar-gradient-red .pcoded-inner-navbar li .pcoded-submenu > li:focus > a:before, .pcoded-navbar.navbar-gradient-red .pcoded-inner-navbar li .pcoded-submenu > li:hover > a:before {
+  background: #fff;
+}
+
+.pcoded-navbar.navbar-gradient-red .pcoded-inner-navbar > li.active:after, .pcoded-navbar.navbar-gradient-red .pcoded-inner-navbar > li.pcoded-trigger:after {
+  background: rgba(255, 255, 255, 0.25);
+}
+
+.pcoded-navbar.navbar-gradient-red .pcoded-inner-navbar > li.active > a, .pcoded-navbar.navbar-gradient-red .pcoded-inner-navbar > li.pcoded-trigger > a {
+  background: rgba(255, 255, 255, 0.08);
+  color: #fff;
+  box-shadow: none;
+}
+
+.pcoded-navbar.navbar-gradient-red.theme-horizontal .sidenav-horizontal-next,
+.pcoded-navbar.navbar-gradient-red.theme-horizontal .sidenav-horizontal-prev {
+  background: linear-gradient(-45deg, #FF425C, #e53b52);
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.pcoded-navbar.navbar-gradient-red.theme-horizontal .sidenav-horizontal-next:hover,
+.pcoded-navbar.navbar-gradient-red.theme-horizontal .sidenav-horizontal-prev:hover {
+  color: #fff;
+}
+
+.pcoded-navbar.navbar-gradient-red.theme-horizontal .sidenav-horizontal:after, .pcoded-navbar.navbar-gradient-red.theme-horizontal .sidenav-horizontal:before {
+  background: linear-gradient(-45deg, #FF425C, #e53b52);
+}
+
+.pcoded-navbar.navbar-gradient-red.theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu.active:before, .pcoded-navbar.navbar-gradient-red.theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu.pcoded-trigger:before {
+  color: linear-gradient(-45deg, #FF425C, #e53b52);
+}
+
+.pcoded-navbar.navbar-gradient-purple {
+  background: linear-gradient(-45deg, #463699, #7661e6);
+}
+
+.pcoded-navbar.navbar-gradient-purple .mobile-menu span {
+  background-color: #fff;
+}
+
+.pcoded-navbar.navbar-gradient-purple .mobile-menu span:after, .pcoded-navbar.navbar-gradient-purple .mobile-menu span:before {
+  background-color: #fff;
+}
+
+.pcoded-navbar.navbar-gradient-purple .mobile-menu.on span {
+  background-color: transparent;
+}
+
+.pcoded-navbar.navbar-gradient-purple .header-logo .b-bg {
+  background: linear-gradient(-45deg, #463699, #7661e6);
+}
+
+.pcoded-navbar.navbar-gradient-purple .header-logo .b-bg i {
+  color: #fff;
+  -webkit-text-fill-color: unset;
+}
+
+.pcoded-navbar.navbar-gradient-purple .pcoded-submenu {
+  background: transparent;
+}
+
+.pcoded-navbar.navbar-gradient-purple .pcoded-menu-caption {
+  color: #fff;
+}
+
+.pcoded-navbar.navbar-gradient-purple .pcoded-inner-navbar li a {
+  color: #fff;
+}
+
+.pcoded-navbar.navbar-gradient-purple .pcoded-inner-navbar li.active > a, .pcoded-navbar.navbar-gradient-purple .pcoded-inner-navbar li:focus > a, .pcoded-navbar.navbar-gradient-purple .pcoded-inner-navbar li:hover > a {
+  color: #fff;
+}
+
+.pcoded-navbar.navbar-gradient-purple .pcoded-inner-navbar li .pcoded-submenu > li.active > a:before, .pcoded-navbar.navbar-gradient-purple .pcoded-inner-navbar li .pcoded-submenu > li:focus > a:before, .pcoded-navbar.navbar-gradient-purple .pcoded-inner-navbar li .pcoded-submenu > li:hover > a:before {
+  background: #fff;
+}
+
+.pcoded-navbar.navbar-gradient-purple .pcoded-inner-navbar > li.active:after, .pcoded-navbar.navbar-gradient-purple .pcoded-inner-navbar > li.pcoded-trigger:after {
+  background: rgba(255, 255, 255, 0.25);
+}
+
+.pcoded-navbar.navbar-gradient-purple .pcoded-inner-navbar > li.active > a, .pcoded-navbar.navbar-gradient-purple .pcoded-inner-navbar > li.pcoded-trigger > a {
+  background: rgba(255, 255, 255, 0.08);
+  color: #fff;
+  box-shadow: none;
+}
+
+.pcoded-navbar.navbar-gradient-purple.theme-horizontal .sidenav-horizontal-next,
+.pcoded-navbar.navbar-gradient-purple.theme-horizontal .sidenav-horizontal-prev {
+  background: linear-gradient(-45deg, #463699, #7661e6);
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.pcoded-navbar.navbar-gradient-purple.theme-horizontal .sidenav-horizontal-next:hover,
+.pcoded-navbar.navbar-gradient-purple.theme-horizontal .sidenav-horizontal-prev:hover {
+  color: #fff;
+}
+
+.pcoded-navbar.navbar-gradient-purple.theme-horizontal .sidenav-horizontal:after, .pcoded-navbar.navbar-gradient-purple.theme-horizontal .sidenav-horizontal:before {
+  background: linear-gradient(-45deg, #463699, #7661e6);
+}
+
+.pcoded-navbar.navbar-gradient-purple.theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu.active:before, .pcoded-navbar.navbar-gradient-purple.theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu.pcoded-trigger:before {
+  color: linear-gradient(-45deg, #463699, #7661e6);
+}
+
+.pcoded-navbar.navbar-gradient-info {
+  background: linear-gradient(-45deg, #2DCEE3, #24a4b5);
+}
+
+.pcoded-navbar.navbar-gradient-info .mobile-menu span {
+  background-color: #fff;
+}
+
+.pcoded-navbar.navbar-gradient-info .mobile-menu span:after, .pcoded-navbar.navbar-gradient-info .mobile-menu span:before {
+  background-color: #fff;
+}
+
+.pcoded-navbar.navbar-gradient-info .mobile-menu.on span {
+  background-color: transparent;
+}
+
+.pcoded-navbar.navbar-gradient-info .header-logo .b-bg {
+  background: linear-gradient(-45deg, #2DCEE3, #24a4b5);
+}
+
+.pcoded-navbar.navbar-gradient-info .header-logo .b-bg i {
+  color: #fff;
+  -webkit-text-fill-color: unset;
+}
+
+.pcoded-navbar.navbar-gradient-info .pcoded-submenu {
+  background: transparent;
+}
+
+.pcoded-navbar.navbar-gradient-info .pcoded-menu-caption {
+  color: #fff;
+}
+
+.pcoded-navbar.navbar-gradient-info .pcoded-inner-navbar li a {
+  color: #fff;
+}
+
+.pcoded-navbar.navbar-gradient-info .pcoded-inner-navbar li.active > a, .pcoded-navbar.navbar-gradient-info .pcoded-inner-navbar li:focus > a, .pcoded-navbar.navbar-gradient-info .pcoded-inner-navbar li:hover > a {
+  color: #fff;
+}
+
+.pcoded-navbar.navbar-gradient-info .pcoded-inner-navbar li .pcoded-submenu > li.active > a:before, .pcoded-navbar.navbar-gradient-info .pcoded-inner-navbar li .pcoded-submenu > li:focus > a:before, .pcoded-navbar.navbar-gradient-info .pcoded-inner-navbar li .pcoded-submenu > li:hover > a:before {
+  background: #fff;
+}
+
+.pcoded-navbar.navbar-gradient-info .pcoded-inner-navbar > li.active:after, .pcoded-navbar.navbar-gradient-info .pcoded-inner-navbar > li.pcoded-trigger:after {
+  background: rgba(255, 255, 255, 0.25);
+}
+
+.pcoded-navbar.navbar-gradient-info .pcoded-inner-navbar > li.active > a, .pcoded-navbar.navbar-gradient-info .pcoded-inner-navbar > li.pcoded-trigger > a {
+  background: rgba(255, 255, 255, 0.08);
+  color: #fff;
+  box-shadow: none;
+}
+
+.pcoded-navbar.navbar-gradient-info.theme-horizontal .sidenav-horizontal-next,
+.pcoded-navbar.navbar-gradient-info.theme-horizontal .sidenav-horizontal-prev {
+  background: linear-gradient(-45deg, #2DCEE3, #24a4b5);
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.pcoded-navbar.navbar-gradient-info.theme-horizontal .sidenav-horizontal-next:hover,
+.pcoded-navbar.navbar-gradient-info.theme-horizontal .sidenav-horizontal-prev:hover {
+  color: #fff;
+}
+
+.pcoded-navbar.navbar-gradient-info.theme-horizontal .sidenav-horizontal:after, .pcoded-navbar.navbar-gradient-info.theme-horizontal .sidenav-horizontal:before {
+  background: linear-gradient(-45deg, #2DCEE3, #24a4b5);
+}
+
+.pcoded-navbar.navbar-gradient-info.theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu.active:before, .pcoded-navbar.navbar-gradient-info.theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu.pcoded-trigger:before {
+  color: linear-gradient(-45deg, #2DCEE3, #24a4b5);
+}
+
+.pcoded-navbar.navbar-gradient-dark {
+  background: linear-gradient(-45deg, rgb(36, 46, 62), rgb(58, 76, 103));
+}
+
+.pcoded-navbar.navbar-gradient-dark .mobile-menu span {
+  background-color: #fff;
+}
+
+.pcoded-navbar.navbar-gradient-dark .mobile-menu span:after, .pcoded-navbar.navbar-gradient-dark .mobile-menu span:before {
+  background-color: #fff;
+}
+
+.pcoded-navbar.navbar-gradient-dark .mobile-menu.on span {
+  background-color: transparent;
+}
+
+.pcoded-navbar.navbar-gradient-dark .header-logo .b-bg {
+  background: linear-gradient(-45deg, rgb(36, 46, 62), rgb(58, 76, 103));
+}
+
+.pcoded-navbar.navbar-gradient-dark .header-logo .b-bg i {
+  color: #fff;
+  -webkit-text-fill-color: unset;
+}
+
+.pcoded-navbar.navbar-gradient-dark .pcoded-submenu {
+  background: transparent;
+}
+
+.pcoded-navbar.navbar-gradient-dark .pcoded-menu-caption {
+  color: #fff;
+}
+
+.pcoded-navbar.navbar-gradient-dark .pcoded-inner-navbar li a {
+  color: #fff;
+}
+
+.pcoded-navbar.navbar-gradient-dark .pcoded-inner-navbar li.active > a, .pcoded-navbar.navbar-gradient-dark .pcoded-inner-navbar li:focus > a, .pcoded-navbar.navbar-gradient-dark .pcoded-inner-navbar li:hover > a {
+  color: #fff;
+}
+
+.pcoded-navbar.navbar-gradient-dark .pcoded-inner-navbar li .pcoded-submenu > li.active > a:before, .pcoded-navbar.navbar-gradient-dark .pcoded-inner-navbar li .pcoded-submenu > li:focus > a:before, .pcoded-navbar.navbar-gradient-dark .pcoded-inner-navbar li .pcoded-submenu > li:hover > a:before {
+  background: #fff;
+}
+
+.pcoded-navbar.navbar-gradient-dark .pcoded-inner-navbar > li.active:after, .pcoded-navbar.navbar-gradient-dark .pcoded-inner-navbar > li.pcoded-trigger:after {
+  background: rgba(255, 255, 255, 0.25);
+}
+
+.pcoded-navbar.navbar-gradient-dark .pcoded-inner-navbar > li.active > a, .pcoded-navbar.navbar-gradient-dark .pcoded-inner-navbar > li.pcoded-trigger > a {
+  background: rgba(255, 255, 255, 0.08);
+  color: #fff;
+  box-shadow: none;
+}
+
+.pcoded-navbar.navbar-gradient-dark.theme-horizontal .sidenav-horizontal-next,
+.pcoded-navbar.navbar-gradient-dark.theme-horizontal .sidenav-horizontal-prev {
+  background: linear-gradient(-45deg, rgb(36, 46, 62), rgb(58, 76, 103));
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.pcoded-navbar.navbar-gradient-dark.theme-horizontal .sidenav-horizontal-next:hover,
+.pcoded-navbar.navbar-gradient-dark.theme-horizontal .sidenav-horizontal-prev:hover {
+  color: #fff;
+}
+
+.pcoded-navbar.navbar-gradient-dark.theme-horizontal .sidenav-horizontal:after, .pcoded-navbar.navbar-gradient-dark.theme-horizontal .sidenav-horizontal:before {
+  background: linear-gradient(-45deg, rgb(36, 46, 62), rgb(58, 76, 103));
+}
+
+.pcoded-navbar.navbar-gradient-dark.theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu.active:before, .pcoded-navbar.navbar-gradient-dark.theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu.pcoded-trigger:before {
+  color: linear-gradient(-45deg, rgb(36, 46, 62), rgb(58, 76, 103));
+}
+
+body.layout-1 .pcoded-navbar.navbar-gradient-blue .sidemenu {
+  box-shadow: inset -1px 0 0 0 rgba(255, 255, 255, 0.3);
+}
+
+body.layout-1 .pcoded-navbar.navbar-gradient-blue .sidemenu li.active:after {
+  background: #fff;
+}
+
+body.layout-1 .pcoded-navbar.navbar-gradient-blue .sidemenu li a {
+  color: #fff;
+}
+
+body.layout-1 .pcoded-navbar.navbar-gradient-blue .sidemenu li a:after {
+  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+body.layout-1 .pcoded-navbar.navbar-gradient-red .sidemenu {
+  box-shadow: inset -1px 0 0 0 rgba(255, 255, 255, 0.3);
+}
+
+body.layout-1 .pcoded-navbar.navbar-gradient-red .sidemenu li.active:after {
+  background: #fff;
+}
+
+body.layout-1 .pcoded-navbar.navbar-gradient-red .sidemenu li a {
+  color: #fff;
+}
+
+body.layout-1 .pcoded-navbar.navbar-gradient-red .sidemenu li a:after {
+  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+body.layout-1 .pcoded-navbar.navbar-gradient-purple .sidemenu {
+  box-shadow: inset -1px 0 0 0 rgba(255, 255, 255, 0.3);
+}
+
+body.layout-1 .pcoded-navbar.navbar-gradient-purple .sidemenu li.active:after {
+  background: #fff;
+}
+
+body.layout-1 .pcoded-navbar.navbar-gradient-purple .sidemenu li a {
+  color: #fff;
+}
+
+body.layout-1 .pcoded-navbar.navbar-gradient-purple .sidemenu li a:after {
+  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+body.layout-1 .pcoded-navbar.navbar-gradient-info .sidemenu {
+  box-shadow: inset -1px 0 0 0 rgba(255, 255, 255, 0.3);
+}
+
+body.layout-1 .pcoded-navbar.navbar-gradient-info .sidemenu li.active:after {
+  background: #fff;
+}
+
+body.layout-1 .pcoded-navbar.navbar-gradient-info .sidemenu li a {
+  color: #fff;
+}
+
+body.layout-1 .pcoded-navbar.navbar-gradient-info .sidemenu li a:after {
+  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+body.layout-1 .pcoded-navbar.navbar-gradient-dark .sidemenu {
+  box-shadow: inset -1px 0 0 0 rgba(255, 255, 255, 0.3);
+}
+
+body.layout-1 .pcoded-navbar.navbar-gradient-dark .sidemenu li.active:after {
+  background: #fff;
+}
+
+body.layout-1 .pcoded-navbar.navbar-gradient-dark .sidemenu li a {
+  color: #fff;
+}
+
+body.layout-1 .pcoded-navbar.navbar-gradient-dark .sidemenu li a:after {
+  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+/* ====== [ Menu gradient color end ] ======== */
+/* ====== [ Active Color start ] ======== */
+.pcoded-navbar[class*=menu-item-icon-style] .pcoded-inner-navbar li.pcoded-hasmenu .pcoded-submenu li.active > a:before {
+  color: #19BCBF;
+}
+
+.pcoded-navbar.active-blue[class*=menu-item-icon-style] .pcoded-inner-navbar li.pcoded-hasmenu .pcoded-submenu li.active > a:before {
+  color: #19BCBF;
+}
+
+.pcoded-navbar.active-blue .pcoded-inner-navbar li.active > a, .pcoded-navbar.active-blue .pcoded-inner-navbar li:focus > a, .pcoded-navbar.active-blue .pcoded-inner-navbar li:hover > a {
+  color: #19BCBF;
+}
+
+.pcoded-navbar.active-blue .pcoded-inner-navbar li .pcoded-submenu > li.active > a:before, .pcoded-navbar.active-blue .pcoded-inner-navbar li .pcoded-submenu > li:focus > a:before, .pcoded-navbar.active-blue .pcoded-inner-navbar li .pcoded-submenu > li:hover > a:before {
+  background: #19BCBF;
+}
+
+.pcoded-navbar.active-blue .pcoded-inner-navbar > li.active:after, .pcoded-navbar.active-blue .pcoded-inner-navbar > li.pcoded-trigger:after {
+  background-color: #19BCBF;
+}
+
+.pcoded-navbar.active-blue .pcoded-inner-navbar > li.active > a, .pcoded-navbar.active-blue .pcoded-inner-navbar > li.pcoded-trigger > a {
+  background: rgba(0, 0, 0, 0.08);
+  color: #fff;
+}
+
+.pcoded-navbar.active-blue.menu-light .pcoded-inner-navbar > li.active > a, .pcoded-navbar.active-blue.menu-light .pcoded-inner-navbar > li.pcoded-trigger > a {
+  background: #f1f1f1;
+  color: #111;
+}
+
+.pcoded-navbar.active-blue.theme-horizontal .pcoded-inner-navbar > li.active > a, .pcoded-navbar.active-blue.theme-horizontal .pcoded-inner-navbar > li.pcoded-trigger > a, .pcoded-navbar.active-blue.theme-horizontal .pcoded-inner-navbar > li:hover > a, .pcoded-navbar.active-blue.theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu.active > a, .pcoded-navbar.active-blue.theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu.pcoded-trigger > a, .pcoded-navbar.active-blue.theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu:hover > a {
+  background: transparent;
+}
+
+.pcoded-navbar.active-blue.theme-horizontal .pcoded-inner-navbar > li .pcoded-submenu > li.active > a, .pcoded-navbar.active-blue.theme-horizontal .pcoded-inner-navbar > li .pcoded-submenu > li.pcoded-trigger > a, .pcoded-navbar.active-blue.theme-horizontal .pcoded-inner-navbar > li .pcoded-submenu > li:hover > a, .pcoded-navbar.active-blue.theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu .pcoded-submenu > li.active > a, .pcoded-navbar.active-blue.theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu .pcoded-submenu > li.pcoded-trigger > a, .pcoded-navbar.active-blue.theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu .pcoded-submenu > li:hover > a {
+  color: #19BCBF;
+}
+
+.pcoded-navbar[class*=menu-item-icon-style] .pcoded-inner-navbar li.pcoded-hasmenu .pcoded-submenu li.active > a:before {
+  color: #19BCBF;
+}
+
+.pcoded-navbar.active-red[class*=menu-item-icon-style] .pcoded-inner-navbar li.pcoded-hasmenu .pcoded-submenu li.active > a:before {
+  color: #FF9764;
+}
+
+.pcoded-navbar.active-red .pcoded-inner-navbar li.active > a, .pcoded-navbar.active-red .pcoded-inner-navbar li:focus > a, .pcoded-navbar.active-red .pcoded-inner-navbar li:hover > a {
+  color: #FF9764;
+}
+
+.pcoded-navbar.active-red .pcoded-inner-navbar li .pcoded-submenu > li.active > a:before, .pcoded-navbar.active-red .pcoded-inner-navbar li .pcoded-submenu > li:focus > a:before, .pcoded-navbar.active-red .pcoded-inner-navbar li .pcoded-submenu > li:hover > a:before {
+  background: #FF9764;
+}
+
+.pcoded-navbar.active-red .pcoded-inner-navbar > li.active:after, .pcoded-navbar.active-red .pcoded-inner-navbar > li.pcoded-trigger:after {
+  background-color: #FF9764;
+}
+
+.pcoded-navbar.active-red .pcoded-inner-navbar > li.active > a, .pcoded-navbar.active-red .pcoded-inner-navbar > li.pcoded-trigger > a {
+  background: rgba(0, 0, 0, 0.08);
+  color: #fff;
+}
+
+.pcoded-navbar.active-red.menu-light .pcoded-inner-navbar > li.active > a, .pcoded-navbar.active-red.menu-light .pcoded-inner-navbar > li.pcoded-trigger > a {
+  background: #f1f1f1;
+  color: #111;
+}
+
+.pcoded-navbar.active-red.theme-horizontal .pcoded-inner-navbar > li.active > a, .pcoded-navbar.active-red.theme-horizontal .pcoded-inner-navbar > li.pcoded-trigger > a, .pcoded-navbar.active-red.theme-horizontal .pcoded-inner-navbar > li:hover > a, .pcoded-navbar.active-red.theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu.active > a, .pcoded-navbar.active-red.theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu.pcoded-trigger > a, .pcoded-navbar.active-red.theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu:hover > a {
+  background: transparent;
+}
+
+.pcoded-navbar.active-red.theme-horizontal .pcoded-inner-navbar > li .pcoded-submenu > li.active > a, .pcoded-navbar.active-red.theme-horizontal .pcoded-inner-navbar > li .pcoded-submenu > li.pcoded-trigger > a, .pcoded-navbar.active-red.theme-horizontal .pcoded-inner-navbar > li .pcoded-submenu > li:hover > a, .pcoded-navbar.active-red.theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu .pcoded-submenu > li.active > a, .pcoded-navbar.active-red.theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu .pcoded-submenu > li.pcoded-trigger > a, .pcoded-navbar.active-red.theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu .pcoded-submenu > li:hover > a {
+  color: #FF9764;
+}
+
+.pcoded-navbar[class*=menu-item-icon-style] .pcoded-inner-navbar li.pcoded-hasmenu .pcoded-submenu li.active > a:before {
+  color: #19BCBF;
+}
+
+.pcoded-navbar.active-purple[class*=menu-item-icon-style] .pcoded-inner-navbar li.pcoded-hasmenu .pcoded-submenu li.active > a:before {
+  color: #463699;
+}
+
+.pcoded-navbar.active-purple .pcoded-inner-navbar li.active > a, .pcoded-navbar.active-purple .pcoded-inner-navbar li:focus > a, .pcoded-navbar.active-purple .pcoded-inner-navbar li:hover > a {
+  color: #463699;
+}
+
+.pcoded-navbar.active-purple .pcoded-inner-navbar li .pcoded-submenu > li.active > a:before, .pcoded-navbar.active-purple .pcoded-inner-navbar li .pcoded-submenu > li:focus > a:before, .pcoded-navbar.active-purple .pcoded-inner-navbar li .pcoded-submenu > li:hover > a:before {
+  background: #463699;
+}
+
+.pcoded-navbar.active-purple .pcoded-inner-navbar > li.active:after, .pcoded-navbar.active-purple .pcoded-inner-navbar > li.pcoded-trigger:after {
+  background-color: #463699;
+}
+
+.pcoded-navbar.active-purple .pcoded-inner-navbar > li.active > a, .pcoded-navbar.active-purple .pcoded-inner-navbar > li.pcoded-trigger > a {
+  background: rgba(0, 0, 0, 0.08);
+  color: #fff;
+}
+
+.pcoded-navbar.active-purple.menu-light .pcoded-inner-navbar > li.active > a, .pcoded-navbar.active-purple.menu-light .pcoded-inner-navbar > li.pcoded-trigger > a {
+  background: #f1f1f1;
+  color: #111;
+}
+
+.pcoded-navbar.active-purple.theme-horizontal .pcoded-inner-navbar > li.active > a, .pcoded-navbar.active-purple.theme-horizontal .pcoded-inner-navbar > li.pcoded-trigger > a, .pcoded-navbar.active-purple.theme-horizontal .pcoded-inner-navbar > li:hover > a, .pcoded-navbar.active-purple.theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu.active > a, .pcoded-navbar.active-purple.theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu.pcoded-trigger > a, .pcoded-navbar.active-purple.theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu:hover > a {
+  background: transparent;
+}
+
+.pcoded-navbar.active-purple.theme-horizontal .pcoded-inner-navbar > li .pcoded-submenu > li.active > a, .pcoded-navbar.active-purple.theme-horizontal .pcoded-inner-navbar > li .pcoded-submenu > li.pcoded-trigger > a, .pcoded-navbar.active-purple.theme-horizontal .pcoded-inner-navbar > li .pcoded-submenu > li:hover > a, .pcoded-navbar.active-purple.theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu .pcoded-submenu > li.active > a, .pcoded-navbar.active-purple.theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu .pcoded-submenu > li.pcoded-trigger > a, .pcoded-navbar.active-purple.theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu .pcoded-submenu > li:hover > a {
+  color: #463699;
+}
+
+.pcoded-navbar[class*=menu-item-icon-style] .pcoded-inner-navbar li.pcoded-hasmenu .pcoded-submenu li.active > a:before {
+  color: #19BCBF;
+}
+
+.pcoded-navbar.active-info[class*=menu-item-icon-style] .pcoded-inner-navbar li.pcoded-hasmenu .pcoded-submenu li.active > a:before {
+  color: #2DCEE3;
+}
+
+.pcoded-navbar.active-info .pcoded-inner-navbar li.active > a, .pcoded-navbar.active-info .pcoded-inner-navbar li:focus > a, .pcoded-navbar.active-info .pcoded-inner-navbar li:hover > a {
+  color: #2DCEE3;
+}
+
+.pcoded-navbar.active-info .pcoded-inner-navbar li .pcoded-submenu > li.active > a:before, .pcoded-navbar.active-info .pcoded-inner-navbar li .pcoded-submenu > li:focus > a:before, .pcoded-navbar.active-info .pcoded-inner-navbar li .pcoded-submenu > li:hover > a:before {
+  background: #2DCEE3;
+}
+
+.pcoded-navbar.active-info .pcoded-inner-navbar > li.active:after, .pcoded-navbar.active-info .pcoded-inner-navbar > li.pcoded-trigger:after {
+  background-color: #2DCEE3;
+}
+
+.pcoded-navbar.active-info .pcoded-inner-navbar > li.active > a, .pcoded-navbar.active-info .pcoded-inner-navbar > li.pcoded-trigger > a {
+  background: rgba(0, 0, 0, 0.08);
+  color: #fff;
+}
+
+.pcoded-navbar.active-info.menu-light .pcoded-inner-navbar > li.active > a, .pcoded-navbar.active-info.menu-light .pcoded-inner-navbar > li.pcoded-trigger > a {
+  background: #f1f1f1;
+  color: #111;
+}
+
+.pcoded-navbar.active-info.theme-horizontal .pcoded-inner-navbar > li.active > a, .pcoded-navbar.active-info.theme-horizontal .pcoded-inner-navbar > li.pcoded-trigger > a, .pcoded-navbar.active-info.theme-horizontal .pcoded-inner-navbar > li:hover > a, .pcoded-navbar.active-info.theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu.active > a, .pcoded-navbar.active-info.theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu.pcoded-trigger > a, .pcoded-navbar.active-info.theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu:hover > a {
+  background: transparent;
+}
+
+.pcoded-navbar.active-info.theme-horizontal .pcoded-inner-navbar > li .pcoded-submenu > li.active > a, .pcoded-navbar.active-info.theme-horizontal .pcoded-inner-navbar > li .pcoded-submenu > li.pcoded-trigger > a, .pcoded-navbar.active-info.theme-horizontal .pcoded-inner-navbar > li .pcoded-submenu > li:hover > a, .pcoded-navbar.active-info.theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu .pcoded-submenu > li.active > a, .pcoded-navbar.active-info.theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu .pcoded-submenu > li.pcoded-trigger > a, .pcoded-navbar.active-info.theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu .pcoded-submenu > li:hover > a {
+  color: #2DCEE3;
+}
+
+.pcoded-navbar[class*=menu-item-icon-style] .pcoded-inner-navbar li.pcoded-hasmenu .pcoded-submenu li.active > a:before {
+  color: #19BCBF;
+}
+
+.pcoded-navbar.active-dark[class*=menu-item-icon-style] .pcoded-inner-navbar li.pcoded-hasmenu .pcoded-submenu li.active > a:before {
+  color: #39465C;
+}
+
+.pcoded-navbar.active-dark .pcoded-inner-navbar li.active > a, .pcoded-navbar.active-dark .pcoded-inner-navbar li:focus > a, .pcoded-navbar.active-dark .pcoded-inner-navbar li:hover > a {
+  color: #39465C;
+}
+
+.pcoded-navbar.active-dark .pcoded-inner-navbar li .pcoded-submenu > li.active > a:before, .pcoded-navbar.active-dark .pcoded-inner-navbar li .pcoded-submenu > li:focus > a:before, .pcoded-navbar.active-dark .pcoded-inner-navbar li .pcoded-submenu > li:hover > a:before {
+  background: #39465C;
+}
+
+.pcoded-navbar.active-dark .pcoded-inner-navbar > li.active:after, .pcoded-navbar.active-dark .pcoded-inner-navbar > li.pcoded-trigger:after {
+  background-color: #39465C;
+}
+
+.pcoded-navbar.active-dark .pcoded-inner-navbar > li.active > a, .pcoded-navbar.active-dark .pcoded-inner-navbar > li.pcoded-trigger > a {
+  background: rgba(0, 0, 0, 0.08);
+  color: #fff;
+}
+
+.pcoded-navbar.active-dark.menu-light .pcoded-inner-navbar > li.active > a, .pcoded-navbar.active-dark.menu-light .pcoded-inner-navbar > li.pcoded-trigger > a {
+  background: #f1f1f1;
+  color: #111;
+}
+
+.pcoded-navbar.active-dark.theme-horizontal .pcoded-inner-navbar > li.active > a, .pcoded-navbar.active-dark.theme-horizontal .pcoded-inner-navbar > li.pcoded-trigger > a, .pcoded-navbar.active-dark.theme-horizontal .pcoded-inner-navbar > li:hover > a, .pcoded-navbar.active-dark.theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu.active > a, .pcoded-navbar.active-dark.theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu.pcoded-trigger > a, .pcoded-navbar.active-dark.theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu:hover > a {
+  background: transparent;
+}
+
+.pcoded-navbar.active-dark.theme-horizontal .pcoded-inner-navbar > li .pcoded-submenu > li.active > a, .pcoded-navbar.active-dark.theme-horizontal .pcoded-inner-navbar > li .pcoded-submenu > li.pcoded-trigger > a, .pcoded-navbar.active-dark.theme-horizontal .pcoded-inner-navbar > li .pcoded-submenu > li:hover > a, .pcoded-navbar.active-dark.theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu .pcoded-submenu > li.active > a, .pcoded-navbar.active-dark.theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu .pcoded-submenu > li.pcoded-trigger > a, .pcoded-navbar.active-dark.theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu .pcoded-submenu > li:hover > a {
+  color: #39465C;
+}
+
+body.layout-1 .pcoded-navbar.active-blue .sidemenu li.active {
+  color: #19BCBF;
+}
+
+body.layout-1 .pcoded-navbar.active-blue .sidemenu li.active:after {
+  background-color: #19BCBF;
+}
+
+body.layout-1 .pcoded-navbar.active-red .sidemenu li.active {
+  color: #FF9764;
+}
+
+body.layout-1 .pcoded-navbar.active-red .sidemenu li.active:after {
+  background-color: #FF9764;
+}
+
+body.layout-1 .pcoded-navbar.active-purple .sidemenu li.active {
+  color: #463699;
+}
+
+body.layout-1 .pcoded-navbar.active-purple .sidemenu li.active:after {
+  background-color: #463699;
+}
+
+body.layout-1 .pcoded-navbar.active-info .sidemenu li.active {
+  color: #2DCEE3;
+}
+
+body.layout-1 .pcoded-navbar.active-info .sidemenu li.active:after {
+  background-color: #2DCEE3;
+}
+
+body.layout-1 .pcoded-navbar.active-dark .sidemenu li.active {
+  color: #39465C;
+}
+
+body.layout-1 .pcoded-navbar.active-dark .sidemenu li.active:after {
+  background-color: #39465C;
+}
+
+/* ====== [ Active Color end ] ======== */
+/* ====== [ menu fixed start ] ======== */
+.pcoded-navbar.menupos-fixed {
+  position: fixed;
+  height: 100vh;
+  min-height: 100vh;
+}
+
+.pcoded-navbar.menupos-fixed .scroll-div.navbar-content {
+  height: calc(100% - 64px);
+  min-height: calc(100% - 64px);
+}
+
+/* ====== [ menu fixed end ] ======== */
+/* ====== [ Header Fixed start ] ======== */
+.pcoded-header.headerpos-fixed {
+  position: fixed;
+  top: 0;
+}
+
+.pcoded-header.headerpos-fixed ~ .pcoded-main-container {
+  padding-top: 64px;
+}
+
+@media only screen and (max-width: 991px) {
+  .pcoded-header.headerpos-fixed ~ .pcoded-main-container {
+    padding-top: 128px;
+  }
+}
+/* ====== [Header Fixed  end ] ======== */
+/* ====== [ Dropdown icon start ] ======== */
+.pcoded-navbar.drp-icon-style2 .pcoded-inner-navbar li.pcoded-hasmenu > a:after {
+  content: "\e847";
+}
+
+.pcoded-navbar.drp-icon-style3 .pcoded-inner-navbar li.pcoded-hasmenu > a:after {
+  content: "\e8b1";
+}
+
+.pcoded-navbar.drp-icon-style3 .pcoded-inner-navbar li.pcoded-hasmenu.pcoded-trigger > a:after {
+  transform: rotate(45deg);
+}
+
+/* ====== [ Dropdown icon end ] =================== */
+/* ====== [ Menu Item icon start ] ================ */
+.pcoded-navbar[class*=menu-item-icon-style] .pcoded-navbar.navbar-collapsed .pcoded-inner-navbar > li.pcoded-trigger .pcoded-submenu:after {
+  background: rgba(169, 183, 208, 0.05);
+}
+
+.pcoded-navbar[class*=menu-item-icon-style] .pcoded-inner-navbar li.pcoded-hasmenu .pcoded-submenu li > a:before {
+  font-family: "feather";
+  font-style: normal;
+  padding-right: 4px;
+  font-size: 13px;
+  position: absolute;
+  left: 35px;
+  top: 8px;
+  opacity: 1;
+  visibility: visible;
+  background: transparent;
+}
+
+.pcoded-navbar[class*=menu-item-icon-style].theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu > .pcoded-submenu > li > a:before {
+  left: 5px;
+}
+
+.pcoded-navbar[class*=menu-item-icon-style].theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu > .pcoded-submenu > li > .pcoded-submenu > li > a:before {
+  top: 12px;
+}
+
+.pcoded-navbar.menu-item-icon-style2 .pcoded-inner-navbar li.pcoded-hasmenu .pcoded-submenu li > a:before {
+  content: "\e897";
+}
+
+.pcoded-navbar.menu-item-icon-style3 .pcoded-inner-navbar li.pcoded-hasmenu .pcoded-submenu li > a:before {
+  content: "\e83f";
+}
+
+.pcoded-navbar.menu-item-icon-style4 .pcoded-inner-navbar li.pcoded-hasmenu .pcoded-submenu li > a:before {
+  content: "\e856";
+}
+
+.pcoded-navbar.menu-item-icon-style5 .pcoded-inner-navbar li.pcoded-hasmenu .pcoded-submenu li > a:before {
+  content: "\e847";
+}
+
+.pcoded-navbar.menu-item-icon-style6 .pcoded-inner-navbar li.pcoded-hasmenu .pcoded-submenu li > a:before {
+  content: "\e844";
+}
+
+/* ====== [ Menu Item icon end ] ================== */
+/* ====== [ Menu background images start ] ======== */
+.pcoded-navbar[class*=navbar-image] {
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center bottom;
+}
+
+.pcoded-navbar[class*=navbar-image] .header-logo,
+.pcoded-navbar[class*=navbar-image] .pcoded-submenu {
+  background: transparent;
+}
+
+.pcoded-navbar[class*=navbar-image] .pcoded-inner-navbar > li.active > a, .pcoded-navbar[class*=navbar-image] .pcoded-inner-navbar > li.pcoded-trigger > a {
+  background: rgba(45, 56, 73, 0.4);
+}
+
+.pcoded-navbar[class*=navbar-image]:before {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  background: rgba(0, 0, 0, 0.7);
+}
+
+.pcoded-navbar.navbar-image-1 {
+ /*  background-image: url("../images/nav-bg/navbar-img-1.jpg"); */
+}
+
+.pcoded-navbar.navbar-image-2 {
+ /*  background-image: url("../images/nav-bg/navbar-img-2.jpg"); */
+}
+
+.pcoded-navbar.navbar-image-3 {
+  /* background-image: url("../images/nav-bg/navbar-img-3.jpg");*/
+} 
+
+.pcoded-navbar.navbar-image-4 {
+  /* background-image: url("../images/nav-bg/navbar-img-4.jpg"); */
+}
+
+.pcoded-navbar.navbar-image-5 {
+/*   background-image: url("../images/nav-bg/navbar-img-5.jpg"); */
+}
+
+/* ====== [ Menu background images end ] ========== */
+/* ====== [ Menu background pattern start ] ======== */
+.pcoded-navbar[class*=navbar-pattern] {
+  background-size: auto;
+  background-repeat: repeat;
+}
+
+.pcoded-navbar[class*=navbar-pattern] .header-logo,
+.pcoded-navbar[class*=navbar-pattern] .pcoded-submenu {
+  background: transparent;
+}
+
+.pcoded-navbar[class*=navbar-pattern] .pcoded-inner-navbar > li.active > a, .pcoded-navbar[class*=navbar-pattern] .pcoded-inner-navbar > li.pcoded-trigger > a {
+  background: rgba(45, 56, 73, 0.4);
+}
+
+.pcoded-navbar[class*=navbar-pattern]:before {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  background: rgba(0, 0, 0, 0.1);
+}
+
+.pcoded-navbar.navbar-pattern-1 {
+ /*  background-image: url("../images/bg-images/1.jpg"); */
+}
+
+/* .pcoded-navbar.navbar-pattern-2 {
+  background-image: url("../images/bg-images/2.jpg");
+}
+
+.pcoded-navbar.navbar-pattern-3 {
+  background-image: url("../images/bg-images/3.jpg");
+}
+
+.pcoded-navbar.navbar-pattern-4 {
+  background-image: url("../images/bg-images/4.jpg");
+}
+
+.pcoded-navbar.navbar-pattern-5 {
+  background-image: url("../images/bg-images/5.jpg");
+}
+
+.pcoded-navbar.navbar-pattern-6 {
+  background-image: url("../images/bg-images/6.jpg");
+} */
+
+/* ====== [ Menu background pattern end ] ========== */
+/* ====== [ Menu title color start ] ============== */
+.pcoded-navbar.title-default .pcoded-inner-navbar .pcoded-menu-caption {
+  color: #8090a5;
+}
+
+.pcoded-navbar.title-blue .pcoded-inner-navbar .pcoded-menu-caption {
+  color: #19BCBF;
+}
+
+.pcoded-navbar.title-red .pcoded-inner-navbar .pcoded-menu-caption {
+  color: #FF9764;
+}
+
+.pcoded-navbar.title-purple .pcoded-inner-navbar .pcoded-menu-caption {
+  color: #463699;
+}
+
+.pcoded-navbar.title-info .pcoded-inner-navbar .pcoded-menu-caption {
+  color: #2DCEE3;
+}
+
+.pcoded-navbar.title-dark .pcoded-inner-navbar .pcoded-menu-caption {
+  color: #39465C;
+}
+
+/* ====== [ Menu title color end ] ================ */
+/* ====== [ Hide Caption start ] ============== */
+.pcoded-navbar.caption-hide .pcoded-menu-caption {
+  display: none;
+}
+
+/* ====== [ Hide Caption end ] ================ */
+/* ====== [ Hide Header start ] ============== */
+.pcoded-navbar.header-hide ~ .pcoded-header {
+  display: none;
+}
+
+.pcoded-navbar.header-hide ~ .pcoded-main-container {
+  padding-top: 0;
+}
+
+/* ====== [ Hide Header end ] ================ */
+/* ==========================    Diffrent Layout Styles end     ====================== */
+/* temp SCSS for document */
+.doc-img > a {
+  position: relative;
+  width: 130px;
+  height: 80px;
+  display: inline-block;
+  background: #eff3f6;
+  overflow: hidden;
+  box-shadow: 0 0 0 1px #e2e5e8;
+}
+
+.doc-img > a span {
+  width: 100%;
+  position: absolute;
+}
+
+.doc-img > a span:after, .doc-img > a span:before {
+  content: "";
+  height: 100%;
+  position: absolute;
+}
+
+.doc-img > a span:before {
+  width: 30%;
+  left: 0;
+  background: #39465C;
+}
+
+.doc-img > a span:after {
+  width: 70%;
+  right: 0;
+  background: #eff3f6;
+}
+
+.doc-img > a > span:nth-child(1) {
+  height: 20%;
+  top: 0;
+}
+
+.doc-img > a > span:nth-child(1):after {
+  background: #fff;
+}
+
+.doc-img > a > span:nth-child(2) {
+  height: 80%;
+  bottom: 0;
+}
+
+.doc-img > a.active {
+  border-color: #19BCBF;
+}
+
+.doc-img > a.active:before {
+  content: "\e83f";
+  top: -4px;
+  font-size: 20px;
+  position: absolute;
+  left: 10px;
+  font-family: "feather";
+  z-index: 1001;
+  color: #19BCBF;
+  transition: 0.3s ease-in-out;
+  text-shadow: 0 3px 8px rgba(25, 188, 191, 0.9), 0 3px 8px rgba(0, 0, 0, 0.1);
+}
+
+.doc-img > a.active:after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(255, 255, 255, 0.65);
+}
+
+.doc-img > a[data-value=menu-light] span:before {
+  background: #fff;
+}
+
+.doc-img > a[data-value=dark] span:after {
+  background: #1c222d;
+}
+
+.doc-img.navbar-color > a[data-value=navbar-blue] > span:before {
+  background: #19BCBF;
+}
+
+.doc-img.navbar-color > a[data-value=navbar-red] > span:before {
+  background: #FF9764;
+}
+
+.doc-img.navbar-color > a[data-value=navbar-purple] > span:before {
+  background: #463699;
+}
+
+.doc-img.navbar-color > a[data-value=navbar-info] > span:before {
+  background: #2DCEE3;
+}
+
+.doc-img.navbar-color > a[data-value=navbar-dark] > span:before {
+  background: #39465C;
+}
+
+.doc-img.header-color > a[data-value=header-blue] > span:nth-child(1):after {
+  background: #19BCBF;
+}
+
+.doc-img.header-color > a[data-value=header-red] > span:nth-child(1):after {
+  background: #b31d1d;
+}
+
+.doc-img.header-color > a[data-value=header-purple] > span:nth-child(1):after {
+  background: #463699;
+}
+
+.doc-img.header-color > a[data-value=header-info] > span:nth-child(1):after {
+  background: #2DCEE3;
+}
+
+.doc-img.header-color > a[data-value=header-dark] > span:nth-child(1):after {
+  background: #39465C;
+}
+
+.doc-img.brand-color > a[data-value=brand-blue] > span:nth-child(1):before {
+  background: #19BCBF;
+}
+
+.doc-img.brand-color > a[data-value=brand-red] > span:nth-child(1):before {
+  background: #b31d1d;
+}
+
+.doc-img.brand-color > a[data-value=brand-purple] > span:nth-child(1):before {
+  background: #463699;
+}
+
+.doc-img.brand-color > a[data-value=brand-info] > span:nth-child(1):before {
+  background: #2DCEE3;
+}
+
+.doc-img.brand-color > a[data-value=brand-dark] > span:nth-child(1):before {
+  background: #39465C;
+}
+
+.doc-img.active-color > a[data-value=active-default] {
+  background: #19BCBF;
+}
+
+.doc-img.active-color > a[data-value=active-blue] {
+  background: #19BCBF;
+}
+
+.doc-img.active-color > a[data-value=active-red] {
+  background: #FF9764;
+}
+
+.doc-img.active-color > a[data-value=active-purple] {
+  background: #463699;
+}
+
+.doc-img.active-color > a[data-value=active-info] {
+  background: #2DCEE3;
+}
+
+.doc-img.active-color > a[data-value=active-dark] {
+  background: #39465C;
+}
+
+.doc-img.title-color > a[data-value=title-default] {
+  background: #fff;
+}
+
+.doc-img.title-color > a[data-value=title-blue] {
+  background: #19BCBF;
+}
+
+.doc-img.title-color > a[data-value=title-red] {
+  background: #FF9764;
+}
+
+.doc-img.title-color > a[data-value=title-purple] {
+  background: #463699;
+}
+
+.doc-img.title-color > a[data-value=title-info] {
+  background: #2DCEE3;
+}
+
+.doc-img.title-color > a[data-value=title-dark] {
+  background: #39465C;
+}
+
+.doc-img.navbar-images > a {
+  height: 130px;
+  background-size: 37px;
+  background-position: left top;
+}
+
+.doc-img.navbar-images > a span:before {
+  background: transparent;
+}
+
+/* .doc-img.navbar-images > a[data-value=navbar-image-1] {
+  background-image: url("../images/nav-bg/navbar-img-1.jpg");
+}
+
+.doc-img.navbar-images > a[data-value=navbar-image-2] {
+  background-image: url("../images/nav-bg/navbar-img-2.jpg");
+}
+
+.doc-img.navbar-images > a[data-value=navbar-image-3] {
+  background-image: url("../images/nav-bg/navbar-img-3.jpg");
+}
+
+.doc-img.navbar-images > a[data-value=navbar-image-4] {
+  background-image: url("../images/nav-bg/navbar-img-4.jpg");
+}
+
+.doc-img.navbar-images > a[data-value=navbar-image-5] {
+  background-image: url("../images/nav-bg/navbar-img-5.jpg");
+}
+
+.doc-img.navbar-images > a[data-value=navbar-image-6] {
+  background-image: url("../images/nav-bg/navbar-img-6.jpg");
+} */
+
+.doc-img.navbar-gradient-color > a[data-value=navbar-gradient-blue] > span:nth-child(2):before {
+  background: linear-gradient(-45deg, #19BCBF, #149698);
+}
+
+.doc-img.navbar-gradient-color > a[data-value=navbar-gradient-red] > span:nth-child(2):before {
+  background: linear-gradient(-45deg, #FF425C, #e53b52);
+}
+
+.doc-img.navbar-gradient-color > a[data-value=navbar-gradient-purple] > span:nth-child(2):before {
+  background: linear-gradient(-45deg, #463699, #7661e6);
+}
+
+.doc-img.navbar-gradient-color > a[data-value=navbar-gradient-info] > span:nth-child(2):before {
+  background: linear-gradient(-45deg, #2DCEE3, #24a4b5);
+}
+
+.doc-img.navbar-gradient-color > a[data-value=navbar-gradient-dark] > span:nth-child(2):before {
+  background: linear-gradient(-45deg, rgb(36, 46, 62), rgb(58, 76, 103));
+}
+
+.doc-img.navbar-pattern > a {
+  background-size: auto;
+}
+
+.doc-img.navbar-pattern > a span {
+  display: none;
+}
+
+/* .doc-img.navbar-pattern > a[data-value=navbar-pattern-1] {
+  background-image: url("../images/bg-images/1.jpg");
+}
+
+.doc-img.navbar-pattern > a[data-value=navbar-pattern-2] {
+  background-image: url("../images/bg-images/2.jpg");
+}
+
+.doc-img.navbar-pattern > a[data-value=navbar-pattern-3] {
+  background-image: url("../images/bg-images/3.jpg");
+}
+
+.doc-img.navbar-pattern > a[data-value=navbar-pattern-4] {
+  background-image: url("../images/bg-images/4.jpg");
+}
+
+.doc-img.navbar-pattern > a[data-value=navbar-pattern-5] {
+  background-image: url("../images/bg-images/5.jpg");
+}
+
+.doc-img.navbar-pattern > a[data-value=navbar-pattern-6] {
+  background-image: url("../images/bg-images/6.jpg");
+} */
+
+.nav-link.active.h-blue {
+  background: #19BCBF !important;
+}
+
+.nav-link.active.h-red {
+  background: #FF9764 !important;
+}
+
+.nav-link.active.h-purple {
+  background: #463699 !important;
+}
+
+.nav-link.active.h-info {
+  background: #2DCEE3 !important;
+}
+
+.nav-link.active.h-dark {
+  background: #39465C !important;
+}
+
+@media all and (-ms-high-contrast: none) {
+  .pcoded-header .navbar-nav > li {
+    display: inline-flex;
+  }
+  .pcoded-header .navbar-nav > li.dropdown {
+    display: inline-block;
+  }
+  .pcoded-navbar.navbar-collapsed .pcoded-inner-navbar > li.pcoded-trigger .pcoded-submenu::after {
+    left: 40px;
+  }
+}
+/* ===================================================================================================
+ ==========================    Diffrent types of NAvbar Layout Styles end     ======================
+ =================================================================================================== */
+.pcoded-navbar .card {
+  background: rgba(255, 255, 255, 0.1);
+  margin: 20px;
+  box-shadow: 0 0 0 1px rgba(226, 229, 232, 0.15);
+  color: rgba(255, 255, 255, 0.6);
+}
+
+.pcoded-navbar .card h6 {
+  color: rgba(255, 255, 255, 0.6);
+}
+
+.pcoded-navbar .card .close {
+  position: absolute;
+  color: #b5bdca;
+  position: absolute;
+  top: 10px;
+  right: 12px;
+  opacity: 0.8;
+  text-shadow: none;
+}
+
+.pcoded-navbar.menu-light .card {
+  background: rgba(0, 0, 0, 0.1);
+  box-shadow: 0 0 0 1px #eff3f6;
+  color: rgba(0, 0, 0, 0.6);
+}
+
+.pcoded-navbar.menu-light .card h6 {
+  color: #39465C;
+}
+
+.pcoded-navbar.menu-light .card .close {
+  color: #39465C;
+}
+
+.footer-fab {
+  position: fixed;
+  bottom: 70px;
+  right: 70px;
+  z-index: 1028;
+}
+
+.footer-fab .b-bg {
+  background: #FF425C;
+  box-shadow: 0 0 8px rgba(255, 66, 92, 0.9), 6px 0 8px rgba(0, 0, 0, 0.1);
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  font-size: 22px;
+  cursor: pointer;
+}
+
+.footer-fab .fab-hover {
+  position: absolute;
+  bottom: 100%;
+  right: 0;
+  transform: rotateY(-90deg);
+  transform-origin: 100% 100%;
+  transition: all 0.2 linear;
+}
+
+.footer-fab .fab-hover ul li {
+  margin: 10px 0;
+}
+
+.footer-fab .fab-hover ul li a {
+  position: relative;
+}
+
+.footer-fab .fab-hover ul li a:after {
+  content: attr(data-text);
+  position: absolute;
+  padding: 4px 8px;
+  background: #39465C;
+  color: #fff;
+  border-radius: 4px;
+  top: 5px;
+  right: calc(100% + 8px);
+  width: -webkit-max-content;
+  width: -moz-max-content;
+  width: max-content;
+  opacity: 0;
+  transition: all 0.2s ease-in-out;
+}
+
+.footer-fab .fab-hover ul li a:hover:after {
+  opacity: 1;
+}
+
+.footer-fab .fab-hover ul li a.btn-success.btn-envato {
+  background-color: #79b530;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.footer-fab:hover .fab-hover {
+  transform: rotateY(0deg);
+}
+
+@media only screen and (max-width: 575px) {
+  .footer-fab {
+    bottom: 30px;
+    right: 30px;
+  }
+}
+.progress .progress-bar {
+  --bs-border-radius: 0px;
+}
+
+.mrr-card {
+  position: relative;
+}
+
+.mrr-card .bottom-chart {
+  bottom: 0;
+}
+
+.card-body-big {
+  padding: 2em;
+}
+
+.borderless-card {
+  border-top: none;
+}
+
+.widget-main-card {
+  border-radius: 2px;
+  box-shadow: 0 0 2px 0 rgba(43, 43, 43, 0.2);
+}
+
+.counter-card-1 h3, .counter-card-3 h3, .counter-card-2 h3 {
+  margin-bottom: 16px;
+  font-weight: 600;
+  color: #666;
+}
+
+.counter-card-1 [class*=card-] > i, .counter-card-3 [class*=card-] > i, .counter-card-2 [class*=card-] > i {
+  position: absolute;
+  color: #19BCBF;
+  right: 30px;
+  top: 30px;
+  font-size: 28px;
+}
+
+.counter-card-1 span.f-right, .counter-card-3 span.f-right, .counter-card-2 span.f-right {
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.counter-card-2 {
+  border-top-color: #13bd8a;
+}
+
+.counter-card-2 [class*=card-] > i {
+  color: #13bd8a;
+}
+
+.counter-card-3 {
+  border-top-color: #d6d6d6;
+}
+
+.counter-card-3 [class*=card-] > i {
+  color: #d6d6d6;
+}
+
+.table-card .row-table {
+  display: flex;
+  align-items: center;
+  table-layout: fixed;
+  height: 100%;
+  width: 100%;
+  margin: 0;
+}
+
+.table-card .row-table:first-child {
+  border-bottom: 1px solid #ddd;
+}
+
+.table-card .row-table .br {
+  border-right: 1px solid #ccc;
+}
+
+.table-card .row-table i {
+  font-size: 28px;
+}
+
+.table-card .row-table span {
+  text-transform: uppercase;
+  font-size: 12px;
+}
+
+.table-card .row-table h5 {
+  display: block;
+  margin-bottom: 0.3em;
+  margin-right: 0;
+}
+
+.table-card .row-table > [class*=col-] {
+  display: table-cell;
+  float: none;
+  table-layout: fixed;
+  vertical-align: middle;
+}
+
+.table-card .row-table > [class*=col-] .row {
+  display: flex;
+  align-items: center;
+}
+
+.widget-primary-card.table-card, .table-card.widget-purple-card {
+  border-top: none;
+  color: #fff;
+}
+
+.widget-primary-card.table-card h4, .table-card.widget-purple-card h4,
+.widget-primary-card.table-card h6,
+.table-card.widget-purple-card h6 {
+  color: #fff;
+}
+
+.widget-primary-card.table-card .row-table:first-child, .table-card.widget-purple-card .row-table:first-child {
+  border-bottom: none;
+}
+
+.widget-primary-card.table-card .row-table > [class*=col-], .table-card.widget-purple-card .row-table > [class*=col-] {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.widget-primary-card.table-card .row-table > [class*=col-]:first-child, .table-card.widget-purple-card .row-table > [class*=col-]:first-child {
+  text-align: center;
+}
+
+.widget-primary-card.table-card .row-table > [class*=col-] .row, .table-card.widget-purple-card .row-table > [class*=col-] .row {
+  display: flex;
+  align-items: center;
+}
+
+.widget-purple-card.table-card .row-table:first-child {
+  border-bottom: none;
+}
+
+.social-widget-card {
+  border-top: none;
+  color: #fff;
+}
+
+.social-widget-card:hover i {
+  opacity: 1;
+  transform: scale(1.1);
+}
+
+.social-widget-card i {
+  position: absolute;
+  right: 10px;
+  top: 50px;
+  font-size: 48px;
+  opacity: 0.4;
+  transition: all ease-in 0.3s;
+}
+
+.widget-profile-card-1 {
+  position: relative;
+  margin-bottom: 50px;
+}
+
+.widget-profile-card-1 .middle-user {
+  position: absolute;
+  left: 0;
+  right: 0;
+  width: 100%;
+  margin: 0 auto;
+  text-align: center;
+  bottom: -60px;
+}
+
+.widget-profile-card-1 .middle-user img {
+  width: 115px;
+  border-radius: 50%;
+}
+
+.widget-profile-card-1 ~ .card-footer [class*=col-] {
+  border-right: 1px solid #fff;
+}
+
+.widget-profile-card-1 ~ .card-footer [class*=col-]:last-child {
+  border: none;
+}
+
+@media only screen and (max-width: 767px) {
+  .widget-profile-card-1 ~ .card-footer [class*=col-]:nth-child(2) {
+    border: 0;
+  }
+  .widget-profile-card-1 ~ .card-footer [class*=col-]:last-child {
+    margin-top: 10px;
+  }
+}
+.widget-profile-card-2 img.user-img {
+  width: 115px;
+}
+
+.widget-profile-card-2 a {
+  color: #fff;
+  transition: all ease-in 0.3s;
+}
+
+.widget-profile-card-2 a:hover {
+  opacity: 0.7;
+}
+
+.widget-profile-card-3 {
+  padding: 30px 0 20px;
+  text-align: center;
+}
+
+.widget-profile-card-3 img {
+  width: 120px;
+  border-radius: 50%;
+}
+
+.profile-card {
+  position: relative;
+  min-height: 410px;
+  overflow: hidden;
+}
+
+.profile-card img {
+  width: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.profile-card .card-body {
+  text-align: center;
+  color: #fff;
+  position: absolute;
+  bottom: 0;
+  text-align: center;
+  width: 100%;
+  background: linear-gradient(transparent, rgba(0, 0, 0, 0.72));
+}
+
+.profile-card .card-body h3 {
+  font-weight: 600;
+}
+
+.profile-card ~ .card-footer [class*=col-] {
+  padding: 10px;
+  border-right: 1px solid rgba(255, 255, 255, 0.57);
+}
+
+.profile-card ~ .card-footer [class*=col-] h4 {
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.profile-card ~ .card-footer [class*=col-]:last-child {
+  border: none;
+}
+
+.profile-card ~ .card-footer [class*=col-] span {
+  text-transform: uppercase;
+}
+
+@media only screen and (max-width: 767px) {
+  .profile-card ~ .card-footer [class*=col-]:nth-child(2) {
+    border: none;
+  }
+}
+.weather-bg-card {
+  position: relative;
+}
+
+.weather-bg-card img {
+  width: 100%;
+}
+
+.weather-bg-card .card-body {
+  position: absolute;
+  bottom: 20px;
+  width: 100%;
+  text-align: center;
+}
+
+.weather-bg-card h5 {
+  color: #fff;
+}
+
+.weather-bg-card .card-body-big {
+  position: absolute;
+  top: 0;
+}
+
+.weather-bg-card .card-body-big span {
+  color: #fff;
+}
+
+.weather-bg-card .weather-temp {
+  font-size: 70px;
+  color: #fff;
+}
+
+.weather-bg-card ~ .card-footer {
+  border-top: none;
+}
+
+@media only screen and (max-width: 575px) {
+  .weather-bg-card ~ .card-footer [class*=col-] {
+    margin-bottom: 10px;
+  }
+}
+.blur-user-card {
+  color: #fff;
+  text-align: center;
+  padding-top: 45px;
+/*   background-image: url("../images/widget/blur-bg.png");
+  background-size: cover; */
+}
+
+.blur-user-card h3 {
+  margin-top: 10px;
+  font-size: 30px;
+  font-weight: 600;
+}
+
+.blur-user-card p {
+  font-size: 18px;
+  font-weight: 300;
+}
+
+.blur-user-card .blur-footer [class*=col-] {
+  padding: 1em;
+  border-right: 1px solid #fff;
+  margin-top: 30px;
+  margin-bottom: 30px;
+}
+
+.blur-user-card .blur-footer [class*=col-]:last-child {
+  border-right: none;
+}
+
+@media only screen and (max-width: 767px) {
+  .blur-user-card .blur-footer [class*=col-]:nth-child(2) {
+    border: 0;
+  }
+  .blur-user-card .blur-footer [class*=col-]:last-child {
+    margin-top: 0;
+    padding-top: 0;
+  }
+}
+.widget-chat-box .card-header i {
+  font-size: 17px;
+  color: #39465C;
+  position: relative;
+}
+
+.widget-chat-box .send-chat, .widget-chat-box .receive-chat {
+  position: relative;
+  background: #eff3f6;
+  padding: 7px;
+  border-radius: 0 10px 10px 10px;
+  font-size: 13px;
+  margin-bottom: 30px;
+}
+
+.widget-chat-box .send-chat:before, .widget-chat-box .receive-chat:before {
+  content: "";
+  position: absolute;
+  height: 12px;
+  width: 12px;
+  border: 6px solid transparent;
+  border-top: 6px solid #eff3f6;
+  border-right: 6px solid #eff3f6;
+  left: -12px;
+  top: 0;
+}
+
+.widget-chat-box .send-chat .time, .widget-chat-box .receive-chat .time {
+  position: absolute;
+  bottom: -20px;
+  left: 0;
+}
+
+.widget-chat-box .receive-chat {
+  background-color: #19BCBF;
+  color: #fff;
+  border-radius: 10px;
+}
+
+.widget-chat-box .receive-chat:before {
+  display: none;
+}
+
+.widget-chat-box .receive-chat .time {
+  color: #666;
+}
+
+.widget-chat-box .rc-10 {
+  margin-bottom: 10px;
+}
+
+.table-card .card-body {
+  padding-left: 0;
+  padding-right: 0;
+  padding-top: 0;
+}
+
+.table-card .card-body .table > thead > tr > th {
+  border-top: 0;
+}
+
+.table-card .card-body .table tr td:first-child,
+.table-card .card-body .table tr th:first-child {
+  padding-left: 25px;
+}
+
+.table-card .card-body .table tr td:last-child,
+.table-card .card-body .table tr th:last-child {
+  padding-right: 25px;
+}
+
+.table-card .card-body .table.without-header tr:first-child td {
+  border-top: none;
+}
+
+.product-progress-card .progress {
+  height: 6px;
+}
+
+.product-progress-card .pp-cont {
+  padding-left: 15px;
+  padding-right: 15px;
+  position: relative;
+}
+
+.product-progress-card .pp-cont:after {
+  content: "";
+  background: #d2d2d2;
+  width: 1px;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: -15px;
+}
+
+.product-progress-card .pp-main > div:first-child .pp-cont:after {
+  display: none;
+}
+
+@media only screen and (max-width: 1199px) {
+  .product-progress-card .pp-main > div:nth-child(3) .pp-cont:after {
+    display: none;
+  }
+}
+@media only screen and (max-width: 992px) {
+  .product-progress-card .pp-cont {
+    margin-top: 15px;
+    margin-bottom: 15px;
+  }
+  .product-progress-card .pp-cont:after {
+    display: none;
+  }
+}
+.new-cust-card img {
+  width: 40px;
+}
+
+.new-cust-card h6 {
+  margin-bottom: 0;
+}
+
+.new-cust-card .align-middle {
+  position: relative;
+}
+
+.new-cust-card .align-middle .status {
+  position: absolute;
+  right: 0;
+  top: 19px;
+  font-size: 13px;
+}
+
+.new-cust-card .align-middle .status.active {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: #13bd8a;
+}
+
+.table-card .row-table {
+  display: flex;
+  align-items: center;
+  table-layout: fixed;
+  height: 100%;
+  width: 100%;
+  margin: 0;
+}
+
+.table-card .row-table:first-child {
+  border-bottom: 1px solid #ddd;
+}
+
+.table-card .row-table .br {
+  border-right: 1px solid #ccc;
+}
+
+.table-card .row-table i {
+  font-size: 28px;
+}
+
+.table-card .row-table span {
+  text-transform: uppercase;
+  font-size: 12px;
+}
+
+.table-card .row-table h5 {
+  display: block;
+  margin-bottom: 0.3em;
+  margin-right: 0;
+}
+
+.table-card .row-table > [class*=col-] {
+  display: table-cell;
+  float: none;
+  table-layout: fixed;
+  vertical-align: middle;
+}
+
+.table-card .row-table > [class*=col-] .row {
+  display: flex;
+  align-items: center;
+}
+
+.latest-update-card .card-body {
+  padding-top: 0;
+}
+
+.latest-update-card .card-body .latest-update-box {
+  position: relative;
+}
+
+.latest-update-card .card-body .latest-update-box:after {
+  content: "";
+  position: absolute;
+  background: #ebebeb;
+  height: 100%;
+  width: 3px;
+  top: 0;
+  left: 11px;
+  z-index: 1;
+}
+
+.latest-update-card .card-body .latest-update-box .update-meta {
+  z-index: 2;
+}
+
+.latest-update-card .card-body .latest-update-box .update-meta .update-icon {
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  text-align: center;
+  padding: 7px 8px;
+  font-size: 16px;
+  color: #fff;
+}
+
+.latest-update-card .card-body .latest-update-box .update-meta .update-icon.bg-c-red {
+  box-shadow: 0 0 0 4px rgba(255, 66, 92, 0.5);
+}
+
+.latest-update-card .card-body .latest-update-box .update-meta .update-icon.bg-c-blue {
+  box-shadow: 0 0 0 4px rgba(25, 188, 191, 0.5);
+}
+
+.latest-update-card .card-body .latest-update-box .update-meta .update-icon.bg-c-green {
+  box-shadow: 0 0 0 4px rgba(19, 189, 138, 0.5);
+}
+
+.latest-update-card .card-body .latest-update-box .update-meta .update-icon.bg-c-yellow {
+  box-shadow: 0 0 0 4px rgba(255, 151, 100, 0.5);
+}
+
+.latest-update-card .card-body .latest-update-box .update-meta .update-icon.ring {
+  border-width: 3px;
+  width: 15px;
+  height: 15px;
+  padding: 0;
+  display: block;
+  background: #fff;
+}
+
+.latest-update-card .card-body .latest-update-box .update-meta i.update-icon {
+  margin-left: 4px;
+  margin-right: 4px;
+}
+
+.latest-update-card .card-body .latest-update-box .update-meta img.update-icon {
+  padding: 0;
+  width: 40px;
+  height: 40px;
+}
+
+.latest-update-card.update-card .card-body .latest-update-box:after {
+  left: 19px;
+}
+
+.testimonial-card .progress {
+  height: 5px;
+}
+
+.testimonial-card .review-block .cust-img {
+  width: 40px;
+  height: 40px;
+}
+
+.testimonial-card .review-block > div {
+  padding-top: 15px;
+  padding-bottom: 9px;
+  margin-left: 0;
+  margin-right: 0;
+  padding-left: 5px;
+  padding-right: 5px;
+}
+
+.testimonial-card .review-block > div:hover {
+  background-color: rgba(25, 188, 191, 0.1);
+}
+
+.feed-card h6 {
+  margin-top: 7px;
+}
+
+.feed-card .feed-icon {
+  color: #fff;
+  border-radius: 50%;
+  width: 30px;
+  height: 30px;
+  text-align: center;
+  padding: 8px 9px;
+}
+
+.chat-card .msg {
+  margin-bottom: 5px;
+  display: inline-block;
+  padding: 10px;
+  position: relative;
+}
+
+.chat-card .msg img {
+  width: 60px;
+  border-radius: 5px;
+  margin-bottom: 5px;
+  margin-top: 5px;
+  margin-right: 10px;
+}
+
+.chat-card .received-chat .msg {
+  background: rgba(25, 188, 191, 0.1);
+  border-radius: 0 5px 5px 5px;
+}
+
+.chat-card .received-chat .msg:after {
+  content: "";
+  position: absolute;
+  left: -7px;
+  top: -7px;
+  transform: rotate(45deg);
+  border: 7px solid transparent;
+  border-bottom-color: rgba(25, 188, 191, 0.1);
+}
+
+.chat-card .send-chat, .chat-card .widget-chat-box .receive-chat, .widget-chat-box .chat-card .receive-chat {
+  text-align: right;
+}
+
+.chat-card .send-chat .msg, .chat-card .widget-chat-box .receive-chat .msg, .widget-chat-box .chat-card .receive-chat .msg {
+  background: rgba(19, 189, 138, 0.1);
+  border-radius: 5px 0 5px 5px;
+}
+
+.chat-card .send-chat .msg:after, .chat-card .widget-chat-box .receive-chat .msg:after, .widget-chat-box .chat-card .receive-chat .msg:after {
+  content: "";
+  position: absolute;
+  right: -7px;
+  top: -7px;
+  transform: rotate(45deg);
+  border: 7px solid transparent;
+  border-right-color: rgba(19, 189, 138, 0.1);
+}
+
+.proj-t-card {
+  position: relative;
+  overflow: hidden;
+}
+
+.proj-t-card .pt-badge {
+  color: #fff;
+  margin-bottom: 0;
+  display: inline-block;
+  padding: 60px 50px 20px 20px;
+  border-radius: 50%;
+  position: absolute;
+  top: -45px;
+  right: -35px;
+  transition: all 0.3s ease-in-out;
+}
+
+.comp-card i {
+  color: #fff;
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  text-align: center;
+  padding: 17px 0;
+  font-size: 18px;
+}
+
+.prod-p-card i {
+  background-color: #fff;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  text-align: center;
+  padding: 11px 0;
+  font-size: 18px;
+}
+
+.ticket-card .lbl-card {
+  border-radius: 50px;
+  padding: 5px 15px;
+  color: #fff;
+  display: inline-block;
+}
+
+.analytic-card .analytic-icon {
+  width: 50px;
+  height: 50px;
+  text-align: center;
+  padding: 17px 0;
+  border-radius: 50%;
+  background-color: #fff;
+}
+
+.social-res-card .progress {
+  height: 6px;
+}
+
+.product-progress-card .progress {
+  height: 6px;
+}
+
+.product-progress-card .pp-cont {
+  padding-left: 15px;
+  padding-right: 15px;
+  position: relative;
+}
+
+.product-progress-card .pp-cont:after {
+  content: "";
+  background: #d2d2d2;
+  width: 1px;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: -15px;
+}
+
+.user-card .cover-img-block {
+  position: relative;
+}
+
+.user-card .cover-img-block .change-cover {
+  position: absolute;
+  top: 30px;
+  left: 30px;
+  z-index: 5;
+  opacity: 0;
+  transition: all 0.3s ease-in-out;
+}
+
+.user-card .cover-img-block .change-cover .dropdown-toggle {
+  color: #fff;
+  background: rgba(0, 0, 0, 0.6);
+  width: 45px;
+  height: 45px;
+  border-radius: 50%;
+  font-size: 20px;
+}
+
+.user-card .cover-img-block .overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  z-index: 1;
+  background: rgba(0, 0, 0, 0.4);
+  transition: all 0.3s ease-in-out;
+}
+
+.user-card .cover-img-block:hover .change-cover,
+.user-card .cover-img-block:hover .overlay {
+  opacity: 1;
+}
+
+.user-card .user-about-block {
+  margin-top: -30px;
+  z-index: 1;
+  position: relative;
+}
+
+.user-card .user-about-block img {
+  box-shadow: 0 0 0 5px #fff;
+}
+
+.user-card .user-about-block .certificated-badge {
+  position: absolute;
+  bottom: -5px;
+  right: -5px;
+  border-radius: 50%;
+  width: 30px;
+  height: 30px;
+  background: #fff;
+  padding: 5px 3px;
+}
+
+.user-card .user-about-block .certificated-badge .bg-icon {
+  font-size: 22px;
+}
+
+.user-card .user-about-block .certificated-badge .front-icon {
+  font-size: 11px;
+  position: absolute;
+  top: 11px;
+  left: 9px;
+}
+
+.user-card .hover-data {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(36, 46, 62, 0.92);
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transform: scale(0);
+  transition: all 0.3s ease-in-out;
+  z-index: 9;
+}
+
+.user-card:hover .hover-data {
+  transform: scale(1);
+}
+
+.user-card .change-profile .dropdown-toggle::after {
+  display: none;
+}
+
+.user-card .change-profile .profile-dp {
+  position: relative;
+  overflow: hidden;
+  padding: 5px;
+  width: 110px;
+  height: 110px;
+  border-radius: 50%;
+}
+
+.user-card .change-profile .profile-dp .overlay {
+  position: absolute;
+  top: 5px;
+  left: 5px;
+  width: calc(100% - 10px);
+  height: calc(100% - 10px);
+  border-radius: 50%;
+  opacity: 0;
+  z-index: 1;
+  overflow: hidden;
+  background: rgba(0, 0, 0, 0.4);
+  transition: all 0.3s ease-in-out;
+}
+
+.user-card .change-profile .profile-dp .overlay span {
+  background: rgba(0, 0, 0, 0.5);
+  color: #fff;
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  text-align: center;
+  border-top: 1px solid rgba(255, 255, 255, 0.4);
+  padding: 0 0 5px;
+}
+
+.user-card .change-profile .profile-dp:hover .overlay {
+  opacity: 1;
+}
+
+@media only screen and (max-width: 992px) {
+  .user-card .user-about-block {
+    margin-top: -10px;
+  }
+  .user-card .wid-80 {
+    width: 60px;
+  }
+  .user-card .change-profile .profile-dp {
+    width: 90px;
+    height: 90px;
+  }
+  .user-card.user-card-2.shape-right .cover-img-block {
+    -webkit-clip-path: none;
+    clip-path: none;
+  }
+  .user-card .cover-img-block .change-cover .dropdown-toggle {
+    padding: 5px 7px;
+  }
+}
+.user-card-2 .cover-img-block {
+  -webkit-clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 80%);
+  clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 80%);
+}
+
+.user-card-2.shape-right .cover-img-block {
+  -webkit-clip-path: polygon(0 0, 100% 0%, 100% 80%, 0% 100%);
+  clip-path: polygon(0 0, 100% 0%, 100% 80%, 0% 100%);
+}
+
+.user-card-2.shape-center .cover-img-block {
+  -webkit-clip-path: polygon(0 0, 100% 0%, 100% 80%, 50% 100%, 0% 80%);
+  clip-path: polygon(0 0, 100% 0%, 100% 80%, 50% 100%, 0% 80%);
+}
+
+.user-card-3 .certificated-badge {
+  position: absolute;
+  bottom: 5px;
+  right: 5px;
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  background: #fff;
+  padding: 5px 3px;
+}
+
+.user-card-3 .certificated-badge .bg-icon {
+  font-size: 30px;
+}
+
+.user-card-3 .certificated-badge .front-icon {
+  font-size: 14px;
+  position: absolute;
+  top: 14px;
+  left: 13px;
+}
+
+.user-card-3 .social-top-link {
+  position: absolute;
+  top: 20px;
+  left: 20px;
+}
+
+.user-card-3.social-hover .social-top-link {
+  top: 20px;
+  left: 20px;
+  overflow: hidden;
+}
+
+.user-card-3.social-hover .social-top-link .btn,
+.user-card-3.social-hover .social-top-link li {
+  margin-left: -100px;
+  transition: all 0.2s ease-in-out;
+}
+
+.user-card-3.social-hover .social-top-link .btn:nth-child(1),
+.user-card-3.social-hover .social-top-link li:nth-child(1) {
+  transition-delay: 0.05s;
+}
+
+.user-card-3.social-hover .social-top-link .btn:nth-child(2),
+.user-card-3.social-hover .social-top-link li:nth-child(2) {
+  transition-delay: 0.1s;
+}
+
+.user-card-3.social-hover .social-top-link .btn:nth-child(3),
+.user-card-3.social-hover .social-top-link li:nth-child(3) {
+  transition-delay: 0.15s;
+}
+
+.user-card-3.social-hover .social-top-link .btn:nth-child(4),
+.user-card-3.social-hover .social-top-link li:nth-child(4) {
+  transition-delay: 0.2s;
+}
+
+.user-card-3.social-hover .social-top-link .btn:nth-child(5),
+.user-card-3.social-hover .social-top-link li:nth-child(5) {
+  transition-delay: 0.25s;
+}
+
+.user-card-3.social-hover .social-top-link .btn:nth-child(6),
+.user-card-3.social-hover .social-top-link li:nth-child(6) {
+  transition-delay: 0.3s;
+}
+
+.user-card-3.social-hover .social-top-link .btn:nth-child(7),
+.user-card-3.social-hover .social-top-link li:nth-child(7) {
+  transition-delay: 0.35s;
+}
+
+.user-card-3.social-hover .social-top-link .btn:nth-child(8),
+.user-card-3.social-hover .social-top-link li:nth-child(8) {
+  transition-delay: 0.4s;
+}
+
+.user-card-3.social-hover .social-top-link .btn:nth-child(9),
+.user-card-3.social-hover .social-top-link li:nth-child(9) {
+  transition-delay: 0.45s;
+}
+
+.user-card-3.social-hover .social-top-link .btn:nth-child(10),
+.user-card-3.social-hover .social-top-link li:nth-child(10) {
+  transition-delay: 0.5s;
+}
+
+.user-card-3.social-hover:hover .social-top-link .btn,
+.user-card-3.social-hover:hover .social-top-link li {
+  margin-left: 0;
+}
+
+.rating-bar .br-theme-bars-1to10 .br-readonly a.br-active,
+.rating-bar .br-theme-bars-1to10 .br-readonly a.br-selected {
+  background-color: #13bd8a;
+}
+
+.rating-bar .br-theme-bars-1to10 .br-widget {
+  height: 30px;
+}
+
+.rating-bar .br-theme-bars-1to10 .br-widget a {
+  background-color: rgba(57, 181, 74, 0.2);
+  width: 8px;
+}
+
+.offline-box iframe {
+  width: 100%;
+  border: 1px solid #ddd;
+}
+
+.statstic-data-card .active.carousel-item-right,
+.statstic-data-card .carousel-item-next:not(.carousel-item-left) {
+  transform: translateY(100%);
+}
+
+.statstic-data-card .active.carousel-item-left,
+.statstic-data-card .carousel-item-prev:not(.carousel-item-right) {
+  transform: translateY(-100%);
+}
+
+.statstic-data-card .card-body {
+  border-top: 2px solid transparent;
+}
+
+.statstic-data-card .card-body.level-down {
+  border-color: #FF425C;
+}
+
+.statstic-data-card .card-body.level-up {
+  border-color: #13bd8a;
+}
+
+.ck-content strong {
+  font-weight: 600;
+}
+
+.stastic-slider-full-card .carousel-item {
+  transition: transform 12s linear;
+}
+
+.dt-button-collection {
+  padding: 0;
+  margin: 0;
+}
+
+.docs-options .dropdown-menu > li:active,
+.docs-options .dropdown-menu > li:hover {
+  color: #111 !important;
+}
+
+.bootstrap-tagsinput input {
+  color: #fff;
+}
+
+.popover {
+  z-index: 1020;
+}
+
+/* new 25-2 */
+.widget-profile [class*=col] {
+  border-right: 1px solid #e2e5e8;
+}
+
+.widget-profile [class*=col]:last-child {
+  border: 0;
+}
+
+.support-bar [class*=col] {
+  border-right: 1px solid #fff;
+}
+
+.support-bar [class*=col]:last-child {
+  border: 0;
+}
+
+.support-bar1 [class*=col] {
+  border-right: 1px solid #e2e5e8;
+}
+
+.support-bar1 [class*=col]:last-child {
+  border: 0;
+}
+
+/* new 3-15 */
+.earning-date .bd-example {
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+
+.earning-date .bd-example .tab-content {
+  background: transparent;
+  padding: 0;
+  box-shadow: none;
+}
+
+.earning-date .bd-example .nav-pills {
+  background: transparent;
+  padding: 0;
+  box-shadow: none;
+}
+
+.earning-date .bd-example .nav-pills .nav-link {
+  min-width: auto;
+  padding: 6px 20px;
+  color: #fff;
+}
+
+.earning-date .bd-example .nav-pills .nav-link.active {
+  background: #fff;
+  box-shadow: none;
+  color: #000 !important;
+}
+
+.earning-date .bd-example .nav-pills .nav-link.active:after {
+  content: "";
+  position: absolute;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  border-bottom: 5px solid #fff;
+  top: -5px;
+  left: 0;
+  right: 0;
+  margin: 0 auto;
+  width: 11px;
+}
+
+.statustic-card .card-body {
+  position: relative;
+}
+
+.statustic-card .card-body .progress {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  left: 0;
+  height: 5px;
+  overflow: visible;
+}
+
+.statustic-card .card-body .progress .progress-bar {
+  position: relative;
+  overflow: visible;
+}
+
+.statustic-card .card-body .progress .progress-bar:before {
+  content: "";
+  height: 5px;
+  width: 5px;
+  border-radius: 50%;
+  position: absolute;
+  right: 0;
+  background: inherit;
+}
+
+.statustic-card .card-body .progress .progress-bar.bg-c-blue:before {
+  -webkit-animation: blue-blink-bar 0.5s linear infinite;
+  animation: blue-blink-bar 0.5s linear infinite;
+}
+
+.statustic-card .card-body .progress .progress-bar.bg-c-green:before {
+  -webkit-animation: green-blink-bar 0.5s linear infinite;
+  animation: green-blink-bar 0.5s linear infinite;
+}
+
+.statustic-card .card-body .progress .progress-bar.bg-c-purple:before {
+  -webkit-animation: purple-blink-bar 0.5s linear infinite;
+  animation: purple-blink-bar 0.5s linear infinite;
+}
+
+@-webkit-keyframes blue-blink-bar {
+  0% {
+    box-shadow: 0 0 0 0 rgba(25, 188, 191, 0.1);
+  }
+  50% {
+    box-shadow: 0 0 0 6px rgba(25, 188, 191, 0.3);
+  }
+}
+@keyframes blue-blink-bar {
+  0% {
+    box-shadow: 0 0 0 0 rgba(25, 188, 191, 0.1);
+  }
+  50% {
+    box-shadow: 0 0 0 6px rgba(25, 188, 191, 0.3);
+  }
+}
+@-webkit-keyframes green-blink-bar {
+  0% {
+    box-shadow: 0 0 0 0 rgba(19, 189, 138, 0.1);
+  }
+  50% {
+    box-shadow: 0 0 0 6px rgba(19, 189, 138, 0.3);
+  }
+}
+@keyframes green-blink-bar {
+  0% {
+    box-shadow: 0 0 0 0 rgba(19, 189, 138, 0.1);
+  }
+  50% {
+    box-shadow: 0 0 0 6px rgba(19, 189, 138, 0.3);
+  }
+}
+@-webkit-keyframes purple-blink-bar {
+  0% {
+    box-shadow: 0 0 0 0 rgba(70, 54, 153, 0.1);
+  }
+  50% {
+    box-shadow: 0 0 0 6px rgba(70, 54, 153, 0.3);
+  }
+}
+@keyframes purple-blink-bar {
+  0% {
+    box-shadow: 0 0 0 0 rgba(70, 54, 153, 0.1);
+  }
+  50% {
+    box-shadow: 0 0 0 6px rgba(70, 54, 153, 0.3);
+  }
+}
+.card-social .progress {
+  height: 6px;
+}
+
+.card-social .card-active > div + div {
+  border-left: 1px solid #e2e5e8;
+}
+
+.feed-blog {
+  border-left: 1px solid #d6d6d6;
+  margin-left: 30px;
+  padding: 0;
+}
+
+.feed-blog li {
+  position: relative;
+  padding-left: 30px;
+  margin-bottom: 50px;
+}
+
+.feed-blog li .feed-user-img {
+  position: absolute;
+  left: -20px;
+  top: -10px;
+}
+
+.feed-blog li .feed-user-img:after {
+  content: "";
+  position: absolute;
+  top: 3px;
+  right: 3px;
+  border: 3px solid transparent;
+  border-radius: 50%;
+}
+
+.feed-blog li.active-feed .feed-user-img:after {
+  border-color: #2DCEE3;
+}
+
+.feed-blog li.diactive-feed .feed-user-img:after {
+  border-color: #FF425C;
+}
+
+.feed-blog li h6 {
+  line-height: 1.5;
+  cursor: pointer;
+}
+
+.feed-blog .label {
+  border-radius: 4px;
+  padding: 4px 7px;
+  font-size: 75%;
+}
+
+.order-card {
+  color: #fff;
+}
+
+.order-card h2,
+.order-card h6,
+.order-card p {
+  color: #fff;
+}
+
+.progress-bar.progress-c-red {
+  background: linear-gradient(-45deg, #FF425C, #e53b52);
+}
+
+.progress-bar.progress-c-blue {
+  background: linear-gradient(-45deg, #19BCBF, #149698);
+}
+
+.progress-bar.progress-c-green {
+  background: linear-gradient(-45deg, #13bd8a, #0f976e);
+}
+
+.progress-bar.progress-c-yellow {
+  background: linear-gradient(-45deg, #FF9764, #ff864b);
+}
+
+/**  =====================
+      Form component css start
+==========================  **/
+.form-range::-webkit-slider-runnable-track {
+  --bs-tertiary-bg: #eff3f6;
+}
+
+.form-check-input {
+  --bs-border-color: #adb5bd;
+}
+
+.h-list-footer .input-group .btn {
+  border-radius: 50% !important;
+}
+
+.custom-select,
+.form-control {
+  padding: 10px 16px;
+  font-size: 14px;
+  height: auto;
+  box-shadow: 0 1px 2px 0 rgba(57, 70, 92, 0.05);
+  border-radius: 0.375rem;
+  border-width: 2px;
+  -webkit-appearance: auto;
+  -moz-appearance: auto;
+  appearance: auto;
+}
+
+.custom-select:active, .custom-select:focus,
+.form-control:active,
+.form-control:focus {
+  box-shadow: 0 1px 2px 0 rgba(57, 70, 92, 0.05);
+  border-color: #19BCBF;
+}
+
+.custom-select::-moz-placeholder,
+.form-control::-moz-placeholder {
+  color: #aaaeb3;
+  opacity: 1;
+}
+
+.custom-select:-ms-input-placeholder,
+.form-control:-ms-input-placeholder {
+  color: #aaaeb3;
+}
+
+.custom-select::-webkit-input-placeholder,
+.form-control::-webkit-input-placeholder {
+  color: #aaaeb3;
+}
+
+.custom-select.form-control-lg,
+.form-control.form-control-lg {
+  padding: 16px 22px;
+  font-size: 16px;
+}
+
+.custom-select.form-control-sm,
+.form-control.form-control-sm {
+  padding: 8px 14px;
+  font-size: 12px;
+}
+
+.input-group-text {
+  border-width: 2px;
+}
+
+.input-group-prepend {
+  margin-right: -2px;
+}
+
+.input-group-append {
+  margin-left: -3px;
+}
+
+.input-group-sm > .input-group-prepend > .input-group-text {
+  padding: 0.05rem 0.5rem;
+}
+
+/* input group start */
+.input-group {
+  background: #eff3f6;
+}
+
+.input-group .form-control {
+  padding: 12px 16px;
+}
+
+.input-group .input-group-text {
+  padding-left: 15px;
+  padding-right: 15px;
+  background: transparent;
+}
+
+.input-group .input-group-text i {
+  font-size: 16px;
+}
+
+.input-group .custom-file-label {
+  margin-bottom: 0;
+}
+
+.input-group .btn {
+  margin-bottom: 0;
+  margin-right: 0;
+}
+
+.form-control.minicolors-input {
+  padding-left: 44px;
+}
+
+.minicolors.minicolors-theme-bootstrap .minicolors-swatch {
+  width: 29px;
+  height: 29px;
+}
+
+.cust-file-button .custom-file-label {
+  height: calc(2.25rem + 8px);
+  line-height: 2.5;
+}
+
+.cust-file-button .custom-file-label::after {
+  padding: 0.775rem 0.75rem;
+  height: 2.65rem;
+}
+
+.custom-select {
+  height: calc(2.25rem + 9px);
+}
+
+/* input group End */
+/**====== Form component css end ======**/
+.form-check .form-check-input.input-primary:checked {
+  border-color: #19BCBF;
+  background-color: #19BCBF;
+}
+
+.form-check .form-check-input.input-light-primary:checked {
+  border-color: #e8f8f9;
+  background-color: #e8f8f9;
+}
+
+.form-check .form-check-input.input-light-primary:checked[type=checkbox] {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%2319BCBF' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
+}
+
+.form-check .form-check-input.input-light-primary:checked[type=radio] {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%2319BCBF'/%3e%3c/svg%3e");
+}
+
+.form-check .form-check-input.input-primary:focus[type=checkbox], .form-check .form-check-input.input-primary:focus[type=radio], .form-check .form-check-input.input-light-primary:focus[type=checkbox], .form-check .form-check-input.input-light-primary:focus[type=radio] {
+  box-shadow: 0 0 0 0.2rem rgba(25, 188, 191, 0.25);
+  border-color: #19BCBF;
+}
+
+.form-check.form-switch .form-check-input.input-light-primary:checked {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2319BCBF'/%3e%3c/svg%3e");
+}
+
+.form-check .form-check-input.input-secondary:checked {
+  border-color: #7E858E;
+  background-color: #7E858E;
+}
+
+.form-check .form-check-input.input-light-secondary:checked {
+  border-color: #f2f3f4;
+  background-color: #f2f3f4;
+}
+
+.form-check .form-check-input.input-light-secondary:checked[type=checkbox] {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%237E858E' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
+}
+
+.form-check .form-check-input.input-light-secondary:checked[type=radio] {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%237E858E'/%3e%3c/svg%3e");
+}
+
+.form-check .form-check-input.input-secondary:focus[type=checkbox], .form-check .form-check-input.input-secondary:focus[type=radio], .form-check .form-check-input.input-light-secondary:focus[type=checkbox], .form-check .form-check-input.input-light-secondary:focus[type=radio] {
+  box-shadow: 0 0 0 0.2rem rgba(126, 133, 142, 0.25);
+  border-color: #7E858E;
+}
+
+.form-check.form-switch .form-check-input.input-light-secondary:checked {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%237E858E'/%3e%3c/svg%3e");
+}
+
+.form-check .form-check-input.input-success:checked {
+  border-color: #13bd8a;
+  background-color: #13bd8a;
+}
+
+.form-check .form-check-input.input-light-success:checked {
+  border-color: #e7f8f3;
+  background-color: #e7f8f3;
+}
+
+.form-check .form-check-input.input-light-success:checked[type=checkbox] {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%2313bd8a' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
+}
+
+.form-check .form-check-input.input-light-success:checked[type=radio] {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%2313bd8a'/%3e%3c/svg%3e");
+}
+
+.form-check .form-check-input.input-success:focus[type=checkbox], .form-check .form-check-input.input-success:focus[type=radio], .form-check .form-check-input.input-light-success:focus[type=checkbox], .form-check .form-check-input.input-light-success:focus[type=radio] {
+  box-shadow: 0 0 0 0.2rem rgba(19, 189, 138, 0.25);
+  border-color: #13bd8a;
+}
+
+.form-check.form-switch .form-check-input.input-light-success:checked {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2313bd8a'/%3e%3c/svg%3e");
+}
+
+.form-check .form-check-input.input-info:checked {
+  border-color: #2DCEE3;
+  background-color: #2DCEE3;
+}
+
+.form-check .form-check-input.input-light-info:checked {
+  border-color: #eafafc;
+  background-color: #eafafc;
+}
+
+.form-check .form-check-input.input-light-info:checked[type=checkbox] {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%232DCEE3' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
+}
+
+.form-check .form-check-input.input-light-info:checked[type=radio] {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%232DCEE3'/%3e%3c/svg%3e");
+}
+
+.form-check .form-check-input.input-info:focus[type=checkbox], .form-check .form-check-input.input-info:focus[type=radio], .form-check .form-check-input.input-light-info:focus[type=checkbox], .form-check .form-check-input.input-light-info:focus[type=radio] {
+  box-shadow: 0 0 0 0.2rem rgba(45, 206, 227, 0.25);
+  border-color: #2DCEE3;
+}
+
+.form-check.form-switch .form-check-input.input-light-info:checked {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%232DCEE3'/%3e%3c/svg%3e");
+}
+
+.form-check .form-check-input.input-warning:checked {
+  border-color: #FF9764;
+  background-color: #FF9764;
+}
+
+.form-check .form-check-input.input-light-warning:checked {
+  border-color: #fff5f0;
+  background-color: #fff5f0;
+}
+
+.form-check .form-check-input.input-light-warning:checked[type=checkbox] {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23FF9764' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
+}
+
+.form-check .form-check-input.input-light-warning:checked[type=radio] {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23FF9764'/%3e%3c/svg%3e");
+}
+
+.form-check .form-check-input.input-warning:focus[type=checkbox], .form-check .form-check-input.input-warning:focus[type=radio], .form-check .form-check-input.input-light-warning:focus[type=checkbox], .form-check .form-check-input.input-light-warning:focus[type=radio] {
+  box-shadow: 0 0 0 0.2rem rgba(255, 151, 100, 0.25);
+  border-color: #FF9764;
+}
+
+.form-check.form-switch .form-check-input.input-light-warning:checked {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23FF9764'/%3e%3c/svg%3e");
+}
+
+.form-check .form-check-input.input-danger:checked {
+  border-color: #FF425C;
+  background-color: #FF425C;
+}
+
+.form-check .form-check-input.input-light-danger:checked {
+  border-color: #ffecef;
+  background-color: #ffecef;
+}
+
+.form-check .form-check-input.input-light-danger:checked[type=checkbox] {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23FF425C' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
+}
+
+.form-check .form-check-input.input-light-danger:checked[type=radio] {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23FF425C'/%3e%3c/svg%3e");
+}
+
+.form-check .form-check-input.input-danger:focus[type=checkbox], .form-check .form-check-input.input-danger:focus[type=radio], .form-check .form-check-input.input-light-danger:focus[type=checkbox], .form-check .form-check-input.input-light-danger:focus[type=radio] {
+  box-shadow: 0 0 0 0.2rem rgba(255, 66, 92, 0.25);
+  border-color: #FF425C;
+}
+
+.form-check.form-switch .form-check-input.input-light-danger:checked {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23FF425C'/%3e%3c/svg%3e");
+}
+
+.form-check .form-check-input.input-light:checked {
+  border-color: #E4E5E6;
+  background-color: #E4E5E6;
+}
+
+.form-check .form-check-input.input-light-light:checked {
+  border-color: #fcfcfd;
+  background-color: #fcfcfd;
+}
+
+.form-check .form-check-input.input-light-light:checked[type=checkbox] {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23E4E5E6' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
+}
+
+.form-check .form-check-input.input-light-light:checked[type=radio] {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23E4E5E6'/%3e%3c/svg%3e");
+}
+
+.form-check .form-check-input.input-light:focus[type=checkbox], .form-check .form-check-input.input-light:focus[type=radio], .form-check .form-check-input.input-light-light:focus[type=checkbox], .form-check .form-check-input.input-light-light:focus[type=radio] {
+  box-shadow: 0 0 0 0.2rem rgba(228, 229, 230, 0.25);
+  border-color: #E4E5E6;
+}
+
+.form-check.form-switch .form-check-input.input-light-light:checked {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23E4E5E6'/%3e%3c/svg%3e");
+}
+
+.form-check .form-check-input.input-dark:checked {
+  border-color: #39465C;
+  background-color: #39465C;
+}
+
+.form-check .form-check-input.input-light-dark:checked {
+  border-color: #ebedef;
+  background-color: #ebedef;
+}
+
+.form-check .form-check-input.input-light-dark:checked[type=checkbox] {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%2339465C' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
+}
+
+.form-check .form-check-input.input-light-dark:checked[type=radio] {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%2339465C'/%3e%3c/svg%3e");
+}
+
+.form-check .form-check-input.input-dark:focus[type=checkbox], .form-check .form-check-input.input-dark:focus[type=radio], .form-check .form-check-input.input-light-dark:focus[type=checkbox], .form-check .form-check-input.input-light-dark:focus[type=radio] {
+  box-shadow: 0 0 0 0.2rem rgba(57, 70, 92, 0.25);
+  border-color: #39465C;
+}
+
+.form-check.form-switch .form-check-input.input-light-dark:checked {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2339465C'/%3e%3c/svg%3e");
+}
+
+select.form-control:not([size]):not([multiple]) {
+  height: calc(2.55rem + 2px);
+}
+
+.custom-control-input:checked ~ .custom-control-label::before {
+  border-color: #19BCBF;
+  background-color: #19BCBF;
+}
+
+.custom-control-input:focus ~ .custom-control-label::before {
+  box-shadow: 0 0 0 0.2rem rgba(25, 188, 191, 0.25);
+}
+
+.input-group-lg > .input-group-append > select.btn:not([size]):not([multiple]),
+.input-group-lg > .input-group-append > select.input-group-text:not([size]):not([multiple]),
+.input-group-lg > .input-group-prepend > select.btn:not([size]):not([multiple]),
+.input-group-lg > .input-group-prepend > select.input-group-text:not([size]):not([multiple]),
+.input-group-lg > select.form-control:not([size]):not([multiple]),
+select.form-control-lg:not([size]):not([multiple]) {
+  height: calc(3.375rem + 2px);
+}
+
+.minicolors-theme-bootstrap .minicolors-swatch {
+  border: none;
+  width: 32px;
+  height: 32px;
+  top: 8px;
+  left: 8px;
+}
+
+.tt-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 1000;
+  display: none;
+  float: left;
+  min-width: 160px;
+  padding: 5px 0;
+  margin: 2px 0 0;
+  list-style: none;
+  font-size: 14px;
+  background-color: #ffffff;
+  border: 1px solid #cccccc;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  border-radius: 4px;
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+  background-clip: padding-box;
+  cursor: pointer;
+}
+
+.bootstrap-tagsinput {
+  width: 100%;
+  border: 2px solid #ced4da;
+  background: transparent;
+  border-radius: 0.375rem;
+  padding: 4px 15px;
+}
+
+.bootstrap-tagsinput input {
+  color: #686c71;
+}
+
+.custom-file-label {
+  height: calc(1.5em + 0.75rem + 5px);
+}
+
+.custom-file-label:after {
+  height: calc(1.5em + 0.75rem + 2.5px);
+}
+
+.datepicker {
+  width: 265px;
+  padding: 10px;
+}
+
+.datepicker.dropdown-menu {
+  padding: 10px;
+}
+
+.datepicker.datepicker-orient-top {
+  margin-top: 8px;
+}
+
+.datepicker table {
+  width: 100%;
+}
+
+.datepicker td,
+.datepicker th {
+  font-weight: regular;
+  width: 35px;
+  height: 35px;
+}
+
+.datepicker thead th {
+  color: #111;
+}
+
+.datepicker thead th.datepicker-switch, .datepicker thead th.next, .datepicker thead th.prev {
+  font-weight: 500;
+  color: #686c71;
+}
+
+.datepicker thead th.datepicker-switch i, .datepicker thead th.next i, .datepicker thead th.prev i {
+  font-size: 1.2rem;
+  color: #686c71;
+}
+
+.datepicker thead th.datepicker-switch i:before, .datepicker thead th.next i:before, .datepicker thead th.prev i:before {
+  line-height: 0;
+  vertical-align: middle;
+}
+
+.datepicker thead th.datepicker-switch:hover, .datepicker thead th.next:hover, .datepicker thead th.prev:hover {
+  background: #eff3f6 !important;
+}
+
+.datepicker thead th.dow {
+  color: #686c71;
+  font-weight: 500;
+}
+
+.datepicker tbody tr > td.day {
+  color: #686c71;
+}
+
+.datepicker tbody tr > td.day:hover {
+  background: #eff3f6;
+  color: #686c71;
+}
+
+.datepicker tbody tr > td.day.old {
+  color: #686c71;
+}
+
+.datepicker tbody tr > td.day.new {
+  color: #686c71;
+}
+
+.datepicker tbody tr > td.day.active, .datepicker tbody tr > td.day.active:hover, .datepicker tbody tr > td.day.selected, .datepicker tbody tr > td.day.selected:hover {
+  background: #19BCBF;
+  color: #fff;
+}
+
+.datepicker tbody tr > td.day.today {
+  position: relative;
+  background: #19BCBF !important;
+  color: #fff !important;
+}
+
+.datepicker tbody tr > td.day.today:before {
+  content: "";
+  display: inline-block;
+  border: solid transparent;
+  border-width: 0 0 7px 7px;
+  border-bottom-color: #ffffff;
+  border-top-color: #686c71;
+  position: absolute;
+  bottom: 4px;
+  right: 4px;
+}
+
+.datepicker tbody tr > td.day.range {
+  background: #111;
+}
+
+.datepicker tbody tr > td span.hour,
+.datepicker tbody tr > td span.minute,
+.datepicker tbody tr > td span.month,
+.datepicker tbody tr > td span.year {
+  color: #686c71;
+}
+
+.datepicker tbody tr > td span.hour:hover,
+.datepicker tbody tr > td span.minute:hover,
+.datepicker tbody tr > td span.month:hover,
+.datepicker tbody tr > td span.year:hover {
+  background: #eff3f6;
+}
+
+.datepicker tbody tr > td span.hour.active, .datepicker tbody tr > td span.hour.active.focused:hover, .datepicker tbody tr > td span.hour.active:hover, .datepicker tbody tr > td span.hour.focused, .datepicker tbody tr > td span.hour.focused:hover,
+.datepicker tbody tr > td span.minute.active,
+.datepicker tbody tr > td span.minute.active.focused:hover,
+.datepicker tbody tr > td span.minute.active:hover,
+.datepicker tbody tr > td span.minute.focused,
+.datepicker tbody tr > td span.minute.focused:hover,
+.datepicker tbody tr > td span.month.active,
+.datepicker tbody tr > td span.month.active.focused:hover,
+.datepicker tbody tr > td span.month.active:hover,
+.datepicker tbody tr > td span.month.focused,
+.datepicker tbody tr > td span.month.focused:hover,
+.datepicker tbody tr > td span.year.active,
+.datepicker tbody tr > td span.year.active.focused:hover,
+.datepicker tbody tr > td span.year.active:hover,
+.datepicker tbody tr > td span.year.focused,
+.datepicker tbody tr > td span.year.focused:hover {
+  background: #19BCBF;
+  color: #fff;
+}
+
+.datepicker tfoot tr > th.clear, .datepicker tfoot tr > th.today {
+  font-weight: 500;
+}
+
+.datepicker tfoot tr > th.clear:hover, .datepicker tfoot tr > th.today:hover {
+  background: #eff3f6;
+}
+
+.datepicker.datepicker-inline {
+  border: 1px solid #e2e5e8;
+}
+
+.bootstrap-timepicker-widget {
+  left: auto;
+  width: 175px;
+}
+
+.bootstrap-timepicker-widget .bootstrap-timepicker-hour,
+.bootstrap-timepicker-widget .bootstrap-timepicker-meridian,
+.bootstrap-timepicker-widget .bootstrap-timepicker-minute,
+.bootstrap-timepicker-widget .bootstrap-timepicker-second {
+  border: none;
+  box-shadow: none;
+}
+
+.bootstrap-timepicker-widget table td > a {
+  border: 0;
+}
+
+.bootstrap-timepicker-widget table td > a i {
+  font-size: 1.1rem;
+}
+
+.bootstrap-timepicker-widget .bootstrap-timepicker-hour,
+.bootstrap-timepicker-widget .bootstrap-timepicker-meridian,
+.bootstrap-timepicker-widget .bootstrap-timepicker-minute,
+.bootstrap-timepicker-widget .bootstrap-timepicker-second {
+  color: #111;
+}
+
+.bootstrap-timepicker-widget table td > a:hover {
+  background: #eff3f6;
+}
+
+.tagify__tag {
+  --tag-bg: #eff3f6;
+  --tag-hover: rgba(25, 188, 191, 0.3);
+  --tag-remove-bg: rgba(255, 66, 92, 0.3);
+  --tag-remove-btn-bg--hover: #FF425C;
+}
+
+.tagify__tag.tagify__tag--primary {
+  --tag-bg: rgba(25, 188, 191, 0.2);
+}
+
+.tagify__tag.tagify__tag--primary div .tagify__tag-text {
+  color: #19BCBF;
+}
+
+.tagify__tag.tagify__tag--secondary {
+  --tag-bg: rgba(126, 133, 142, 0.2);
+}
+
+.tagify__tag.tagify__tag--secondary div .tagify__tag-text {
+  color: #7E858E;
+}
+
+.tagify__tag.tagify__tag--success {
+  --tag-bg: rgba(19, 189, 138, 0.2);
+}
+
+.tagify__tag.tagify__tag--success div .tagify__tag-text {
+  color: #13bd8a;
+}
+
+.tagify__tag.tagify__tag--info {
+  --tag-bg: rgba(45, 206, 227, 0.2);
+}
+
+.tagify__tag.tagify__tag--info div .tagify__tag-text {
+  color: #2DCEE3;
+}
+
+.tagify__tag.tagify__tag--warning {
+  --tag-bg: rgba(255, 151, 100, 0.2);
+}
+
+.tagify__tag.tagify__tag--warning div .tagify__tag-text {
+  color: #FF9764;
+}
+
+.tagify__tag.tagify__tag--danger {
+  --tag-bg: rgba(255, 66, 92, 0.2);
+}
+
+.tagify__tag.tagify__tag--danger div .tagify__tag-text {
+  color: #FF425C;
+}
+
+.tagify__tag.tagify__tag--light {
+  --tag-bg: rgba(228, 229, 230, 0.2);
+}
+
+.tagify__tag.tagify__tag--light div .tagify__tag-text {
+  color: #E4E5E6;
+}
+
+.tagify__tag.tagify__tag--dark {
+  --tag-bg: rgba(57, 70, 92, 0.2);
+}
+
+.tagify__tag.tagify__tag--dark div .tagify__tag-text {
+  color: #39465C;
+}
+
+.bootstrap-switch {
+  border-color: #e2e5e8;
+}
+
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default,
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default {
+  background: #eff3f6;
+}
+
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary,
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary {
+  color: #fff;
+  background: #19BCBF;
+}
+
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-secondary,
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-secondary {
+  color: #fff;
+  background: #7E858E;
+}
+
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success,
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success {
+  color: #fff;
+  background: #13bd8a;
+}
+
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-info,
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-info {
+  color: #fff;
+  background: #2DCEE3;
+}
+
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-warning,
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-warning {
+  color: #fff;
+  background: #FF9764;
+}
+
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger,
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger {
+  color: #fff;
+  background: #FF425C;
+}
+
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-light,
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-light {
+  color: #fff;
+  background: #E4E5E6;
+}
+
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-dark,
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-dark {
+  color: #fff;
+  background: #39465C;
+}
+
+.bootstrap-select > .dropdown-toggle.bs-placeholder.btn[class*=btn-]:not(.btn-light) {
+  color: #fff;
+}
+
+.typeahead .twitter-typeahead {
+  display: block !important;
+}
+
+.scrollable-dropdown-menu .tt-menu {
+  max-height: 150px;
+  overflow-y: auto;
+}
+
+.tt-menu {
+  padding: 10px 0;
+  font-size: 14px;
+  background: #fff;
+  min-width: 10rem;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  border-radius: 4px;
+}
+
+.tt-menu .tt-suggestion {
+  padding: 4px 20px;
+  border-radius: 2px;
+}
+
+.tt-menu .tt-suggestion.active, .tt-menu .tt-suggestion:active, .tt-menu .tt-suggestion:focus, .tt-menu .tt-suggestion:hover {
+  background: rgba(25, 188, 191, 0.03);
+  color: #19BCBF;
+}
+
+.sticky-action .card-header {
+  background: #fff;
+  z-index: 1;
+}
+
+.sticky-action.sticky .card-header {
+  top: 64px;
+  position: fixed;
+  box-shadow: 0 1px 15px 1px rgba(57, 82, 107, 0.15);
+  left: 289px;
+  right: 25px;
+}
+
+@media (max-width: 1024px) {
+  .sticky-action.sticky .card-header {
+    top: 74px;
+  }
+}
+.dropzone {
+  min-height: auto;
+}
+
+.dropzone {
+  padding: 20px;
+  text-align: center;
+  cursor: pointer;
+  border: 2px dashed #e2e5e8;
+  border-radius: 2px;
+}
+
+.dropzone .dropzone-msg-title {
+  color: #686c71;
+  margin: 0 0 5px;
+  padding: 0;
+  font-weight: 500;
+  font-size: 1.2rem;
+}
+
+.dropzone .dropzone-msg-desc {
+  color: #686c71;
+  font-weight: 400;
+  font-size: 1rem;
+}
+
+.dropzone .dz-preview .dz-image {
+  border-radius: 2px;
+}
+
+.dropzone.dropzone-primary {
+  border-color: #19BCBF;
+}
+
+.dropzone.dropzone-secondary {
+  border-color: #7E858E;
+}
+
+.dropzone.dropzone-success {
+  border-color: #13bd8a;
+}
+
+.dropzone.dropzone-info {
+  border-color: #2DCEE3;
+}
+
+.dropzone.dropzone-warning {
+  border-color: #FF9764;
+}
+
+.dropzone.dropzone-danger {
+  border-color: #FF425C;
+}
+
+.dropzone.dropzone-light {
+  border-color: #E4E5E6;
+}
+
+.dropzone.dropzone-dark {
+  border-color: #39465C;
+}
+
+.dz-started .dropzone-msg {
+  display: none;
+}
+
+.dropzone-multi {
+  border: 0;
+  padding: 0;
+}
+
+.dropzone-multi .dz-message {
+  display: none;
+}
+
+.dropzone-multi .dropzone-panel .dropzone-remove-all,
+.dropzone-multi .dropzone-panel .dropzone-upload {
+  display: none;
+}
+
+.dropzone-multi .dropzone-item {
+  background: #eff3f6;
+  border-radius: 2px;
+  margin: 8px 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 14px;
+}
+
+.dropzone-multi .dropzone-item .dropzone-progress {
+  width: 20%;
+}
+
+.dropzone-multi .dropzone-item .dropzone-progress .progress {
+  height: 0.5rem;
+  transition: all 0.2s ease-in-out;
+}
+
+.dropzone-multi .dropzone-item .dropzone-file .dropzone-filename {
+  font-size: 0.9rem;
+  font-weight: 500;
+  color: #686c71;
+  text-overflow: ellipsis;
+  margin-right: 0.5rem;
+}
+
+.dropzone-multi .dropzone-item .dropzone-file .dropzone-filename b {
+  font-size: 0.9rem;
+  font-weight: 500;
+  color: #686c71;
+}
+
+.dropzone-multi .dropzone-item .dropzone-file .dropzone-error {
+  margin-top: 0.25rem;
+  font-size: 0.9rem;
+  font-weight: 400;
+  color: #FF425C;
+  text-overflow: ellipsis;
+}
+
+.dropzone-multi .dropzone-item .dropzone-toolbar {
+  margin-left: 1rem;
+  display: flex;
+  flex-wrap: nowrap;
+}
+
+.dropzone-multi .dropzone-item .dropzone-toolbar .dropzone-cancel,
+.dropzone-multi .dropzone-item .dropzone-toolbar .dropzone-delete,
+.dropzone-multi .dropzone-item .dropzone-toolbar .dropzone-start {
+  height: 25px;
+  width: 25px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.dropzone-multi .dropzone-item .dropzone-toolbar .dropzone-cancel i,
+.dropzone-multi .dropzone-item .dropzone-toolbar .dropzone-delete i,
+.dropzone-multi .dropzone-item .dropzone-toolbar .dropzone-start i {
+  font-size: 0.8rem;
+  color: #111;
+}
+
+.dropzone-multi .dropzone-item .dropzone-toolbar .dropzone-cancel:hover i,
+.dropzone-multi .dropzone-item .dropzone-toolbar .dropzone-delete:hover i,
+.dropzone-multi .dropzone-item .dropzone-toolbar .dropzone-start:hover i {
+  color: #19BCBF;
+}
+
+.dropzone-multi .dropzone-item .dropzone-toolbar .dropzone-start {
+  transition: all 0.2s ease-in-out;
+}
+
+.uppy-Dashboard--modal {
+  z-index: 1030;
+}
+
+.uppy-DragDrop--is-dragdrop-supported {
+  border-color: #eff3f6;
+}
+
+.pc-uppy-thumbnail-container .pc-uppy-thumbnail img {
+  width: 100px;
+}
+
+.slider-selection {
+  box-shadow: none;
+}
+
+.pc-toggle-noUiSlider {
+  height: 50px;
+}
+
+.pc-toggle-noUiSlider.off .noUi-handle {
+  border-color: #FF425C;
+  background: #FF425C;
+  box-shadow: none;
+}
+
+.note-editor.card .card-header {
+  padding: 0 5px 5px;
+  border-bottom-color: #a9a9a9;
+}
+
+#cke5-inline-demo .ck-content {
+  margin-bottom: 1rem;
+  padding: 2.5rem;
+  background-color: #fff;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+}
+
+#cke5-inline-demo .ck-content h3 {
+  margin-top: 0;
+}
+
+#cke5-inline-demo header.ck-content {
+  text-align: center;
+}
+
+#cke5-inline-demo header.ck-content h2:first-of-type {
+  margin-top: 0;
+}
+
+#cke5-inline-demo header.ck-content h2 + h3 {
+  margin-top: 0;
+  color: #686c71;
+  font-weight: 600;
+}
+
+#cke5-inline-demo .demo-row {
+  width: 100%;
+  display: flex;
+}
+
+#cke5-inline-demo .demo-row .demo-row__half {
+  width: 50%;
+}
+
+#cke5-inline-demo .demo-row .demo-row__half:first-of-type {
+  padding-right: 0.5rem;
+}
+
+#cke5-inline-demo .demo-row .demo-row__half:last-of-type {
+  padding-left: 0.5rem;
+}
+
+#cke5-inline-demo .demo-row p {
+  margin-bottom: 0;
+}
+
+#cke5-inline-demo .demo-row h3 {
+  margin: 0;
+  font-weight: 600;
+}
+
+.switch-demo .custom-switch-v1 {
+  margin-bottom: 4px;
+}
+
+.custom-switch-v1.form-switch {
+  padding-left: 2.9em;
+}
+
+.custom-switch-v1.form-switch .custom-control-input {
+  height: 20px;
+  width: 35px;
+  margin-left: -2.9em;
+  transition: 0.35s cubic-bezier(0.54, 1.6, 0.5, 1);
+  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
+}
+
+.custom-switch-v1.form-switch .custom-control-input[class*=input-light-] {
+  border: none;
+}
+
+.custom-switch-v1.form-switch .custom-control-input:focus {
+  box-shadow: none;
+  border-color: rgba(0, 0, 0, 0.25);
+}
+
+.custom-switch-v1.form-switch .custom-control-input:checked {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='4.1' fill='%23ffffff'/%3e%3c/svg%3e");
+}
+
+.custom-switch-v1.form-switch .custom-control-input.input-light-primary:checked {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='4.1' fill='%2319BCBF'/%3e%3c/svg%3e");
+}
+
+.custom-switch-v1.form-switch .custom-control-input.input-light-secondary:checked {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='4.1' fill='%237E858E'/%3e%3c/svg%3e");
+}
+
+.custom-switch-v1.form-switch .custom-control-input.input-light-success:checked {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='4.1' fill='%2313bd8a'/%3e%3c/svg%3e");
+}
+
+.custom-switch-v1.form-switch .custom-control-input.input-light-info:checked {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='4.1' fill='%232DCEE3'/%3e%3c/svg%3e");
+}
+
+.custom-switch-v1.form-switch .custom-control-input.input-light-warning:checked {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='4.1' fill='%23FF9764'/%3e%3c/svg%3e");
+}
+
+.custom-switch-v1.form-switch .custom-control-input.input-light-danger:checked {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='4.1' fill='%23FF425C'/%3e%3c/svg%3e");
+}
+
+.custom-switch-v1.form-switch .custom-control-input.input-light-light:checked {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='4.1' fill='%23E4E5E6'/%3e%3c/svg%3e");
+}
+
+.custom-switch-v1.form-switch .custom-control-input.input-light-dark:checked {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='4.1' fill='%2339465C'/%3e%3c/svg%3e");
+}
+
+.custom-switch-v1 .custom-control-label::before {
+  transition: 0.2s cubic-bezier(0.24, 0, 0.5, 1);
+  height: 20px;
+  width: 35px;
+  border-radius: 0.8rem;
+  top: 0;
+  left: -2.55rem;
+}
+
+.custom-switch-v1 .custom-control-label::after {
+  top: calc(0.15625rem - 2px);
+  left: calc(-2.25rem - 4px);
+  height: 19px;
+  width: 19px;
+  border-radius: 0.7rem;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 0 0 rgba(0, 0, 0, 0.04), 0 4px 9px rgba(0, 0, 0, 0.13), 0 3px 3px rgba(0, 0, 0, 0.05);
+  transition: 0.35s cubic-bezier(0.54, 1.6, 0.5, 1);
+}
+
+.custom-switch-v1 .custom-control-input:checked ~ .custom-control-label::after {
+  transform: translateX(0.95rem);
+}
+
+.row[data-multiselectsplitter-wrapper-selector] select {
+  margin-bottom: 8px;
+}
+
+.choices {
+  position: relative;
+  margin-bottom: 5px;
+  font-size: 16px;
+}
+
+.choices:focus {
+  outline: none;
+}
+
+.choices:last-child {
+  margin-bottom: 0;
+}
+
+.choices.is-disabled .choices__inner,
+.choices.is-disabled .choices__input {
+  background-color: #eff3f6;
+  cursor: not-allowed;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.choices.is-disabled .choices__item {
+  cursor: not-allowed;
+}
+
+.choices [hidden] {
+  display: none !important;
+}
+
+.choices[data-type*=select-one] {
+  cursor: pointer;
+}
+
+.choices[data-type*=select-one] .choices__inner {
+  padding-bottom: 7.5px;
+}
+
+.choices[data-type*=select-one] .choices__input {
+  display: block;
+  width: 100%;
+  padding: 10px;
+  border-bottom: 1px solid #ced4da;
+  background-color: #fff;
+  margin: 0;
+}
+
+.choices[data-type*=select-one] .choices__button {
+  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==");
+  padding: 0;
+  background-size: 8px;
+  position: absolute;
+  top: 50%;
+  right: 0;
+  margin-top: -10px;
+  margin-right: 25px;
+  height: 20px;
+  width: 20px;
+  border-radius: 10em;
+  opacity: 0.5;
+}
+
+.choices[data-type*=select-one] .choices__button:focus, .choices[data-type*=select-one] .choices__button:hover {
+  opacity: 1;
+}
+
+.choices[data-type*=select-one] .choices__button:focus {
+  box-shadow: 0 0 0 2px #19BCBF;
+}
+
+.choices[data-type*=select-one] .choices__item[data-value=""] .choices__button {
+  display: none;
+}
+
+.choices[data-type*=select-one]:after {
+  content: "";
+  height: 0;
+  width: 0;
+  border-style: solid;
+  border-color: #495057 transparent transparent transparent;
+  border-width: 5px;
+  position: absolute;
+  right: 11.5px;
+  top: 50%;
+  margin-top: -2.5px;
+  pointer-events: none;
+}
+
+.choices[data-type*=select-one].is-open:after {
+  border-color: transparent transparent #495057 transparent;
+  margin-top: -7.5px;
+}
+
+.choices[data-type*=select-one][dir=rtl]:after {
+  left: 11.5px;
+  right: auto;
+}
+
+.choices[data-type*=select-one][dir=rtl] .choices__button {
+  right: auto;
+  left: 0;
+  margin-left: 25px;
+  margin-right: 0;
+}
+
+.choices[data-type*=select-multiple] .choices__inner,
+.choices[data-type*=text] .choices__inner {
+  cursor: text;
+}
+
+.choices[data-type*=select-multiple] .choices__button,
+.choices[data-type*=text] .choices__button {
+  position: relative;
+  display: inline-block;
+  margin: 0 -4px 0 8px;
+  padding-left: 16px;
+  border-left: 1px solid rgba(255, 255, 255, 0.35);
+  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==");
+  background-size: 8px;
+  width: 8px;
+  line-height: 1;
+  opacity: 0.75;
+  border-radius: 0;
+}
+
+.choices[data-type*=select-multiple] .choices__button:focus, .choices[data-type*=select-multiple] .choices__button:hover,
+.choices[data-type*=text] .choices__button:focus,
+.choices[data-type*=text] .choices__button:hover {
+  opacity: 1;
+}
+
+.choices__inner {
+  display: inline-block;
+  vertical-align: top;
+  width: 100%;
+  background-color: #fff;
+  padding: 7.5px 7.5px 3.75px;
+  border: 2px solid #ced4da;
+  border-radius: 0.375rem;
+  font-size: 14px;
+  min-height: 44px;
+  overflow: hidden;
+}
+
+.is-focused .choices__inner, .is-open .choices__inner {
+  border-color: #19BCBF;
+}
+
+.is-open .choices__inner {
+  border-radius: 0.375rem 0.375rem 0 0;
+}
+
+.is-flipped.is-open .choices__inner {
+  border-radius: 0 0 0.375rem 0.375rem;
+}
+
+.choices__list {
+  margin: 0;
+  padding-left: 0;
+  list-style: none;
+}
+
+.choices__list--single {
+  display: inline-block;
+  padding: 4px 16px 4px 4px;
+  width: 100%;
+}
+
+[dir=rtl] .choices__list--single {
+  padding-right: 4px;
+  padding-left: 16px;
+}
+
+.choices__list--single .choices__item {
+  width: 100%;
+}
+
+.choices__list--multiple {
+  display: inline;
+}
+
+.choices__list--multiple .choices__item {
+  display: inline-block;
+  vertical-align: middle;
+  border-radius: 3px;
+  padding: 4px 10px;
+  font-size: 12px;
+  font-weight: 500;
+  margin-right: 3.75px;
+  margin-bottom: 3.75px;
+  background-color: #19BCBF;
+  border: 1px solid #16a6a8;
+  color: #ffffff;
+  word-break: break-all;
+  box-sizing: border-box;
+}
+
+.choices__list--multiple .choices__item[data-deletable] {
+  padding-right: 5px;
+}
+
+[dir=rtl] .choices__list--multiple .choices__item {
+  margin-right: 0;
+  margin-left: 3.75px;
+}
+
+.choices__list--multiple .choices__item.is-highlighted {
+  background-color: #16a6a8;
+  border: 1px solid #139092;
+}
+
+.is-disabled .choices__list--multiple .choices__item {
+  background-color: #9db6c8;
+  border: 1px solid #7d9db6;
+}
+
+.choices__list--dropdown {
+  visibility: hidden;
+  z-index: 1;
+  position: absolute;
+  width: 100%;
+  background-color: #fff;
+  border: 1px solid #ced4da;
+  top: 100%;
+  margin-top: -1px;
+  border-bottom-left-radius: 0.375rem;
+  border-bottom-right-radius: 0.375rem;
+  overflow: hidden;
+  word-break: break-all;
+  will-change: visibility;
+}
+
+.choices__list--dropdown.is-active {
+  visibility: visible;
+}
+
+.is-open .choices__list--dropdown {
+  border-color: #a2aeb9;
+}
+
+.is-flipped .choices__list--dropdown {
+  top: auto;
+  bottom: 100%;
+  margin-top: 0;
+  margin-bottom: -1px;
+  border-radius: 0.25rem 0.25rem 0 0;
+}
+
+.choices__list--dropdown .choices__list {
+  position: relative;
+  max-height: 300px;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+  will-change: scroll-position;
+}
+
+.choices__list--dropdown .choices__item {
+  position: relative;
+  padding: 10px;
+  font-size: 14px;
+}
+
+[dir=rtl] .choices__list--dropdown .choices__item {
+  text-align: right;
+}
+
+@media (min-width: 640px) {
+  .choices__list--dropdown .choices__item--selectable {
+    padding-right: 100px;
+  }
+  .choices__list--dropdown .choices__item--selectable:after {
+    content: attr(data-select-text);
+    font-size: 12px;
+    opacity: 0;
+    position: absolute;
+    right: 10px;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+  [dir=rtl] .choices__list--dropdown .choices__item--selectable {
+    text-align: right;
+    padding-left: 100px;
+    padding-right: 10px;
+  }
+  [dir=rtl] .choices__list--dropdown .choices__item--selectable:after {
+    right: auto;
+    left: 10px;
+  }
+}
+.choices__list--dropdown .choices__item--selectable.is-highlighted {
+  background-color: rgba(25, 188, 191, 0.1);
+}
+
+.choices__list--dropdown .choices__item--selectable.is-highlighted:after {
+  opacity: 0.5;
+}
+
+.choices__item {
+  cursor: default;
+}
+
+.choices__item--selectable {
+  cursor: pointer;
+}
+
+.choices__item--disabled {
+  cursor: not-allowed;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  opacity: 0.5;
+}
+
+.choices__heading {
+  font-weight: 600;
+  font-size: 12px;
+  padding: 10px;
+  border-bottom: 1px solid #ebeef0;
+  color: gray;
+}
+
+.choices__button {
+  text-indent: -9999px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  border: 0;
+  background-color: transparent;
+  background-repeat: no-repeat;
+  background-position: center;
+  cursor: pointer;
+}
+
+.choices__button:focus {
+  outline: none;
+}
+
+.choices__input {
+  display: inline-block;
+  vertical-align: baseline;
+  background-color: #fff;
+  font-size: 14px;
+  margin-bottom: 0;
+  border: 0;
+  color: #495057;
+  border-radius: 0;
+  max-width: 100%;
+  padding: 4px 0 4px 2px;
+}
+
+.choices__input:focus {
+  outline: 0;
+}
+
+[dir=rtl] .choices__input {
+  padding-right: 2px;
+  padding-left: 0;
+}
+
+.choices__placeholder {
+  opacity: 0.5;
+}
+
+.btn.bootstrap-touchspin-down > i,
+.btn.bootstrap-touchspin-up > i {
+  margin-right: 0;
+}
+
+.bt-wizard .nav {
+  background: #eff3f6;
+  padding: 0;
+}
+
+.bt-wizard .nav .nav-link.active {
+  box-shadow: 0 0 5px 2px rgba(25, 188, 191, 0.3);
+}
+
+.pc-wizard .card-body .tab-content,
+.pc-wizard-details .card-body .tab-content,
+.pc-wizard-subtitle .card-body .tab-content,
+.pc-wizard-subtitle-vertical .card-body .tab-content {
+  box-shadow: none;
+}
+
+.pc-wizard .nav.nav-tabs {
+  border-bottom: 1px solid #e2e5e8;
+}
+
+.pc-wizard .nav.nav-tabs .nav-item {
+  margin-bottom: 0;
+}
+
+.pc-wizard .nav.nav-tabs .nav-link {
+  border-radius: 0;
+  border: none;
+  font-size: 16px;
+  color: #686c71;
+  background: no-repeat center bottom, center 100%;
+  background-size: 0 100%, 100% 100%;
+  transition: background 0.3s ease-out;
+  background-image: linear-gradient(to top, #19BCBF 2px, rgba(255, 255, 255, 0) 2px);
+  opacity: 0.7;
+}
+
+.pc-wizard .nav.nav-tabs .nav-link i {
+  margin-right: 10px;
+}
+
+.pc-wizard .nav.nav-tabs .nav-link.active,
+.pc-wizard .nav.nav-tabs .show > .nav-link {
+  background-size: 100% 100%, 100% 100%;
+  opacity: 1;
+  color: #19BCBF;
+  box-shadow: none;
+}
+
+.pc-wizard-details .nav {
+  background: #f6f8fa;
+}
+
+.pc-wizard-details .nav.nav-tabs {
+  border-bottom: 1px solid #e2e5e8;
+}
+
+.pc-wizard-details .nav.nav-tabs .nav-item {
+  margin-bottom: -1px;
+}
+
+.pc-wizard-details .nav.nav-tabs .nav-link {
+  padding: 0.8rem 2rem;
+  font-size: 16px;
+  color: #686c71;
+  background: transparent;
+  opacity: 0.7;
+}
+
+.pc-wizard-details .nav.nav-tabs .nav-link i {
+  margin-bottom: 5px;
+  font-size: 20px;
+  opacity: 0.3;
+  display: block;
+  text-align: center;
+}
+
+.pc-wizard-details .nav.nav-tabs .nav-link.active,
+.pc-wizard-details .nav.nav-tabs .show > .nav-link {
+  background: #fff;
+  opacity: 1;
+  font-weight: 500;
+  color: #19BCBF;
+}
+
+.pc-wizard-details .nav.nav-tabs .nav-link.active i,
+.pc-wizard-details .nav.nav-tabs .show > .nav-link i {
+  opacity: 0.8;
+}
+
+.pc-wizard-subtitle .nav.nav-tabs {
+  border-bottom: 1px solid #e2e5e8;
+}
+
+.pc-wizard-subtitle .nav.nav-tabs .nav-item {
+  margin-bottom: -1px;
+}
+
+.pc-wizard-subtitle .nav.nav-tabs .nav-link {
+  padding: 1rem 1.5rem;
+  color: #686c71;
+  border: none;
+  opacity: 0.7;
+  display: flex;
+  align-items: center;
+  background: no-repeat center bottom, center 100%;
+  background-size: 0 100%, 100% 100%;
+  transition: background 0.3s ease-out;
+  background-image: linear-gradient(to top, #19BCBF 2.5px, rgba(255, 255, 255, 0) 2.5px);
+}
+
+.pc-wizard-subtitle .nav.nav-tabs .nav-link .num-icon {
+  width: 30px;
+  height: 30px;
+  border-radius: 2px;
+  margin-right: 10px;
+  background: #e8eef2;
+  color: #686c71;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.pc-wizard-subtitle .nav.nav-tabs .nav-link h6 {
+  margin-bottom: 0;
+}
+
+.pc-wizard-subtitle .nav.nav-tabs .nav-link i {
+  margin-right: 14px;
+  font-size: 30px;
+  opacity: 0.3;
+  display: block;
+  text-align: center;
+}
+
+.pc-wizard-subtitle .nav.nav-tabs .nav-link.active,
+.pc-wizard-subtitle .nav.nav-tabs .show > .nav-link {
+  background-size: 100% 100%, 100% 100%;
+  opacity: 1;
+  box-shadow: none;
+}
+
+.pc-wizard-subtitle .nav.nav-tabs .nav-link.active i,
+.pc-wizard-subtitle .nav.nav-tabs .show > .nav-link i {
+  opacity: 1;
+  color: #19BCBF;
+}
+
+.pc-wizard-subtitle .nav.nav-tabs .nav-link.active .num-icon,
+.pc-wizard-subtitle .nav.nav-tabs .show > .nav-link .num-icon {
+  background: #19BCBF;
+  color: #fff;
+}
+
+.nav.tab-wizard.card-header {
+  background: transparent;
+}
+
+.pc-wizard-subtitle-vertical .nav {
+  background: #f2f5f8;
+}
+
+.pc-wizard-subtitle-vertical .nav.nav-tabs {
+  border-bottom: 1px solid #e2e5e8;
+}
+
+.pc-wizard-subtitle-vertical .nav.nav-tabs .nav-item {
+  margin-bottom: -1px;
+}
+
+.pc-wizard-subtitle-vertical .nav.nav-tabs .nav-link {
+  padding: 1rem 1.5rem;
+  border-radius: 0;
+  color: #686c71;
+  border: none;
+  opacity: 0.7;
+  display: flex;
+  align-items: center;
+  background: no-repeat center left, center 100%;
+  background-size: 100% 0, 100% 100%;
+  transition: background 0.3s ease-out;
+  background-image: linear-gradient(to left, #19BCBF 2.5px, rgba(255, 255, 255, 0) 2.5px);
+}
+
+.pc-wizard-subtitle-vertical .nav.nav-tabs .nav-link .num-icon {
+  width: 30px;
+  height: 30px;
+  border-radius: 2px;
+  margin-right: 10px;
+  background: #e8eef2;
+  color: #686c71;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.pc-wizard-subtitle-vertical .nav.nav-tabs .nav-link h6 {
+  margin-bottom: 0;
+}
+
+.pc-wizard-subtitle-vertical .nav.nav-tabs .nav-link i {
+  margin-right: 14px;
+  font-size: 30px;
+  opacity: 0.3;
+  display: block;
+  text-align: center;
+}
+
+.pc-wizard-subtitle-vertical .nav.nav-tabs .nav-link.active,
+.pc-wizard-subtitle-vertical .nav.nav-tabs .show > .nav-link {
+  background-size: 100% 100%, 100% 100%;
+  opacity: 1;
+  box-shadow: none;
+}
+
+.pc-wizard-subtitle-vertical .nav.nav-tabs .nav-link.active i,
+.pc-wizard-subtitle-vertical .nav.nav-tabs .show > .nav-link i {
+  opacity: 1;
+  color: #19BCBF;
+}
+
+.pc-wizard-subtitle-vertical .nav.nav-tabs .nav-link.active .num-icon,
+.pc-wizard-subtitle-vertical .nav.nav-tabs .show > .nav-link .num-icon {
+  background: #19BCBF;
+  color: #fff;
+}
+
+.tab-wizard.nav .nav-item .nav-link {
+  background: rgba(255, 255, 255, 0.4);
+}
+
+.tab-wizard.nav .nav-item + .nav-item .nav-link {
+  margin-left: 10px;
+}
+
+.tab-wizard.nav .nav-link.active,
+.tab-wizard.nav .show > .nav-link {
+  background: #fff;
+}
+
+.sw-theme-default {
+  box-shadow: none;
+}
+
+.sw-theme-default .sw-container {
+  min-height: auto;
+}
+
+.sw-theme-default .step-content {
+  margin-top: 30px;
+  padding: 10px;
+  border: 0 solid #e2e5e8;
+  background-color: #FFF;
+  text-align: left;
+}
+
+.sw-theme-default .sw-toolbar {
+  background: #f9f9f9;
+  border-radius: 0 !important;
+  padding: 10px;
+  margin-bottom: 0 !important;
+}
+
+.sw-theme-default .sw-toolbar-top {
+  border-bottom-color: #e2e5e8 !important;
+}
+
+.sw-theme-default .sw-toolbar-bottom {
+  background: transparent;
+  border-top-color: #e2e5e8 !important;
+}
+
+.sw-theme-default > ul.step-anchor > li {
+  position: relative;
+  margin-right: 2px;
+}
+
+.sw-theme-default > ul.step-anchor > li > a {
+  color: #686c71;
+}
+
+.sw-theme-default > ul.step-anchor > li > a:hover {
+  color: #686c71;
+}
+
+.sw-theme-default > ul.step-anchor > li.clickable > a:hover, .sw-theme-default > ul.step-anchor > li.clickable > a:hover h6 {
+  color: #19BCBF !important;
+}
+
+.sw-theme-default > ul.step-anchor > li > a::after {
+  background: #19BCBF;
+  height: 2px;
+}
+
+.sw-theme-default > ul.step-anchor > li.active > a, .sw-theme-default > ul.step-anchor > li.active > a h6 {
+  color: #19BCBF !important;
+}
+
+.sw-theme-default > ul.step-anchor > li.done > a {
+  color: #111 !important;
+}
+
+.sw-theme-default > ul.step-anchor > li.done > a::after {
+  background: #13bd8a;
+}
+
+.sw-theme-default > ul.step-anchor > li.danger > a, .sw-theme-default > ul.step-anchor > li.danger > a h6 {
+  color: #FF425C !important;
+}
+
+.sw-theme-default > ul.step-anchor > li.danger > a::after, .sw-theme-default > ul.step-anchor > li.danger > a h6::after {
+  background: #FF425C;
+  border-left-color: color-level(#FF425C, -9);
+}
+
+.sw-theme-default > ul.step-anchor > li.disabled > a {
+  opacity: 0.5;
+}
+
+.sw-theme-arrows {
+  border-radius: 2px;
+  border: 1px solid #e2e5e8;
+}
+
+.sw-theme-arrows > .sw-container {
+  min-height: auto;
+}
+
+.sw-theme-arrows .step-content {
+  margin-top: 30px;
+  border: 0 solid #e2e5e8;
+}
+
+.sw-theme-arrows > ul.step-anchor {
+  border-bottom: 1px solid #e2e5e8;
+  background: #eff3f6;
+  border-top-right-radius: 2px;
+}
+
+.sw-theme-arrows > ul.step-anchor > li > a {
+  color: #686c71;
+  background: #eff3f6;
+}
+
+.sw-theme-arrows > ul.step-anchor > li > a:hover {
+  color: #686c71;
+  background: #eff3f6;
+}
+
+.sw-theme-arrows > ul.step-anchor > li > a:after {
+  border-left: 30px solid #eff3f6;
+}
+
+.sw-theme-arrows > ul.step-anchor > li > a:before {
+  border-left: 30px solid #eff3f6;
+}
+
+.sw-theme-arrows > ul.step-anchor > li:first-child > a {
+  padding-left: 15px;
+}
+
+.sw-theme-arrows > ul.step-anchor > li > a:hover {
+  color: #686c71;
+  background: #e2e5e8;
+  border-color: #e2e5e8;
+}
+
+.sw-theme-arrows > ul.step-anchor > li > a:hover:after {
+  border-left-color: #e2e5e8;
+}
+
+.sw-theme-arrows > ul.step-anchor > li.clickable > a:hover {
+  color: #19BCBF !important;
+  background: #2DCEE3 !important;
+}
+
+.sw-theme-arrows > ul.step-anchor > li.active > a {
+  border-color: #19BCBF !important;
+  color: #fff !important;
+  background: #19BCBF !important;
+}
+
+.sw-theme-arrows > ul.step-anchor > li.active > a h6 {
+  color: #fff !important;
+}
+
+.sw-theme-arrows > ul.step-anchor > li.active > a:after {
+  border-left: 30px solid #19BCBF !important;
+}
+
+.sw-theme-arrows > ul.step-anchor > li.done > a {
+  border-color: color-level(#19BCBF -9) !important;
+  color: #19BCBF !important;
+  background: color-level(#19BCBF -9) !important;
+}
+
+.sw-theme-arrows > ul.step-anchor > li.done > a h6 {
+  color: #19BCBF !important;
+}
+
+.sw-theme-arrows > ul.step-anchor > li.done > a:after {
+  border-left: 30px solid color-level(#19BCBF -9);
+}
+
+.sw-theme-arrows > ul.step-anchor > li.danger > a {
+  border-color: #FF425C !important;
+  color: #fff !important;
+  background: #FF425C !important;
+}
+
+.sw-theme-arrows > ul.step-anchor > li.danger > a:after {
+  border-left: 30px solid #FF425C !important;
+}
+
+.sw-theme-arrows > ul.step-anchor > li.disabled > a {
+  opacity: 0.5;
+}
+
+.sw-theme-arrows::before {
+  border: 10px solid #e2e5e8;
+  border-top: 10px solid #13bd8a;
+}
+
+.sw-theme-circles .step-content {
+  margin-top: 30px;
+}
+
+.sw-theme-circles .sw-toolbar-bottom {
+  border-top-color: #e2e5e8 !important;
+  border-bottom-color: #e2e5e8 !important;
+}
+
+.sw-theme-circles > ul.step-anchor {
+  background: #fff;
+}
+
+.sw-theme-circles > ul.step-anchor:before {
+  background-color: #eff3f6;
+  border-radius: 2px;
+}
+
+.sw-theme-circles > ul.step-anchor > li {
+  margin-left: 40px;
+}
+
+.sw-theme-circles > ul.step-anchor > li > a {
+  border: 2px solid #eff3f6;
+  background: #eff3f6;
+  color: #686c71;
+  background: #eff3f6;
+}
+
+.sw-theme-circles > ul.step-anchor > li > a:hover {
+  color: #686c71;
+  background: #eff3f6;
+}
+
+.sw-theme-circles > ul.step-anchor > li > a > p {
+  position: relative;
+  font-size: 80%;
+  bottom: -30px;
+  color: #686c71;
+}
+
+.sw-theme-circles > ul.step-anchor > li.clickable > a:hover {
+  color: #19BCBF !important;
+}
+
+.sw-theme-circles > ul.step-anchor > li.active > a {
+  border-color: #19BCBF;
+  background: #19BCBF;
+  color: #fff;
+}
+
+.sw-theme-circles > ul.step-anchor > li.active > a h6 {
+  color: #fff;
+}
+
+.sw-theme-circles > ul.step-anchor > li.active > a > p {
+  color: #19BCBF;
+}
+
+.sw-theme-circles > ul.step-anchor > li.done > a {
+  border-color: #13bd8a;
+  background: #13bd8a;
+  color: #fff;
+}
+
+.sw-theme-circles > ul.step-anchor > li.done > a h6 {
+  color: #fff;
+}
+
+.sw-theme-circles > ul.step-anchor > li.done > a > p {
+  color: #13bd8a;
+}
+
+.sw-theme-circles > ul.step-anchor > li.danger > a {
+  border-color: #FF425C;
+  background: #fff;
+  color: #FF425C;
+}
+
+.sw-theme-circles > ul.step-anchor > li.danger > a h6 {
+  color: #FF425C;
+}
+
+.sw-theme-circles > ul.step-anchor > li.danger > a > small {
+  color: #FF425C;
+}
+
+.sw-theme-circles > ul.step-anchor > li.disabled > a {
+  opacity: 0.5;
+}
+
+.sw-theme-dots .step-content {
+  margin-top: 30px;
+}
+
+.sw-theme-dots .sw-toolbar-top {
+  border-bottom-color: #e2e5e8 !important;
+}
+
+.sw-theme-dots .sw-toolbar-bottom {
+  border-top-color: #e2e5e8 !important;
+  border-bottom-color: #e2e5e8 !important;
+}
+
+.sw-theme-dots > ul.step-anchor {
+  border: 0 solid #e2e5e8 !important;
+}
+
+.sw-theme-dots > ul.step-anchor:before {
+  background-color: #eff3f6;
+}
+
+.sw-theme-dots > ul.step-anchor > li > a {
+  color: #686c71;
+}
+
+.sw-theme-dots > ul.step-anchor > li > a:before {
+  color: #19BCBF;
+  background: #eff3f6;
+}
+
+.sw-theme-dots > ul.step-anchor > li > a:after {
+  background: #eff3f6;
+}
+
+.sw-theme-dots > ul.step-anchor > li > a:hover {
+  color: #686c71;
+}
+
+.sw-theme-dots > ul.step-anchor > li > a:focus {
+  color: #686c71;
+}
+
+.sw-theme-dots > ul.step-anchor > li.clickable > a:hover {
+  color: #686c71;
+}
+
+.sw-theme-dots > ul.step-anchor > li.active > a, .sw-theme-dots > ul.step-anchor > li.active > a h6 {
+  color: #19BCBF;
+}
+
+.sw-theme-dots > ul.step-anchor > li.active > a:after, .sw-theme-dots > ul.step-anchor > li.active > a h6:after {
+  background: #19BCBF;
+}
+
+.sw-theme-dots > ul.step-anchor > li.done > a, .sw-theme-dots > ul.step-anchor > li.done > a h6 {
+  color: #13bd8a;
+}
+
+.sw-theme-dots > ul.step-anchor > li.done > a:after, .sw-theme-dots > ul.step-anchor > li.done > a h6:after {
+  background: #13bd8a;
+}
+
+.sw-theme-dots > ul.step-anchor > li.danger > a, .sw-theme-dots > ul.step-anchor > li.danger > a h6 {
+  color: #FF425C;
+}
+
+.sw-theme-dots > ul.step-anchor > li.danger > a:after, .sw-theme-dots > ul.step-anchor > li.danger > a h6:after {
+  background: #FF425C;
+}
+
+.sw-theme-dots > ul.step-anchor > li.disabled > a {
+  opacity: 0.5;
+}
+
+/* Responsive CSS */
+@media screen and (max-width: 768px) {
+  .sw-theme-dots > ul.step-anchor:before {
+    background-color: #eff3f6;
+  }
+}
+.smartwizard-example .nav-link {
+  padding-left: calc(2.5rem + 15px);
+}
+
+.smartwizard-example.sw-main,
+.smartwizard-example .sw-container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.smartwizard-example .sw-container {
+  flex-shrink: 1;
+}
+
+.smartwizard-example .step-anchor {
+  flex-direction: row;
+}
+
+.smartwizard-example .step-anchor:not(.card) {
+  border: 0;
+}
+
+.smartwizard-example .step-anchor li {
+  display: flex;
+  flex-grow: 1;
+}
+
+.smartwizard-example .step-anchor li > a {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 0 2rem 0 3.75rem;
+  min-height: 2.5rem;
+  outline: 0 !important;
+  border: 0 !important;
+  background: transparent !important;
+  text-decoration: none;
+  font-weight: 500;
+  opacity: 0.4;
+  cursor: default;
+}
+
+.smartwizard-example .step-anchor li > a:after {
+  display: none;
+}
+
+.smartwizard-example .step-anchor li > a .small,
+.smartwizard-example .step-anchor li > a small {
+  font-weight: normal;
+}
+
+.smartwizard-example .step-anchor li.active > a,
+.smartwizard-example .step-anchor li.clickable > a,
+.smartwizard-example .step-anchor li.done > a {
+  opacity: 1;
+}
+
+.smartwizard-example .step-anchor li.active > a,
+.smartwizard-example .step-anchor li.clickable > a {
+  cursor: pointer;
+}
+
+.smartwizard-example .step-anchor li.done > a {
+  cursor: pointer;
+}
+
+.smartwizard-example .step-anchor li.disabled > a,
+.smartwizard-example .step-anchor li.disabled > a:hover {
+  cursor: not-allowed !important;
+}
+
+.smartwizard-example .sw-done-icon,
+.smartwizard-example .sw-icon,
+.smartwizard-example .sw-number {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  margin-top: -1.25rem;
+  width: 2.5rem;
+  height: 2.5rem;
+  border: 2px solid;
+  border-radius: 50%;
+  text-align: center;
+  line-height: calc(2.5rem - 4px);
+}
+
+.smartwizard-example .sw-done-icon,
+.smartwizard-example .sw-icon {
+  font-size: 1rem;
+}
+
+.smartwizard-example .sw-done-icon {
+  display: none;
+}
+
+.smartwizard-example .step-anchor li.done .sw-done-icon {
+  display: block;
+}
+
+.smartwizard-example .step-anchor li.done .sw-done-icon ~ .sw-icon,
+.smartwizard-example .step-anchor li.done .sw-done-icon ~ .sw-number {
+  display: none;
+}
+
+.smartwizard-example .wizard-number {
+  font-weight: 500;
+}
+
+.smartwizard-example .step-anchor li.done .sw-done-icon,
+.smartwizard-example .step-anchor li.done .sw-icon,
+.smartwizard-example .step-anchor li.done .sw-number {
+  opacity: 0.4;
+}
+
+.smartwizard-example .step-anchor > li.active > a .sw-done-icon,
+.smartwizard-example .step-anchor > li.active > a .sw-icon,
+.smartwizard-example .step-anchor > li.active > a .sw-number {
+  border-color: #19BCBF;
+}
+
+.smartwizard-example .step-content {
+  position: relative;
+  display: none;
+  margin: 0;
+  width: 100%;
+}
+
+.smartwizard-example .sw-toolbar {
+  justify-content: flex-end;
+  padding: 0;
+}
+
+.sw-theme-default .step-anchor li > a {
+  color: #686c71;
+}
+
+.sw-theme-default .step-anchor li.danger > a {
+  color: #FF425C !important;
+}
+
+.sw-theme-default .sw-done-icon,
+.sw-theme-default .sw-icon,
+.sw-theme-default .sw-number {
+  border-color: #e2e5e8;
+}
+
+.sw-theme-default .step-anchor li.danger .sw-done-icon,
+.sw-theme-default .step-anchor li.danger .sw-icon,
+.sw-theme-default .step-anchor li.danger .sw-number {
+  border-color: #FF425C !important;
+  color: #FF425C !important;
+}
+
+@media (min-width: 992px) {
+  .smartwizard-vertical-left.sw-main,
+  .smartwizard-vertical-right.sw-main {
+    flex-direction: row;
+  }
+  .smartwizard-vertical-left .step-anchor,
+  .smartwizard-vertical-right .step-anchor {
+    align-self: flex-start;
+    flex-direction: column;
+  }
+  .smartwizard-vertical-left .step-anchor li,
+  .smartwizard-vertical-right .step-anchor li {
+    flex-grow: 0;
+  }
+  .sw-theme-default.smartwizard-vertical-right {
+    flex-direction: row-reverse;
+  }
+  .sw-theme-default.smartwizard-vertical-right .step-anchor li > a {
+    padding: 0 0 0 5.75rem;
+  }
+  .sw-theme-default.smartwizard-vertical-right .sw-done-icon, .sw-theme-default.smartwizard-vertical-right .sw-icon, .sw-theme-default.smartwizard-vertical-right .sw-number {
+    left: 2rem;
+  }
+}
+.tabcontrol,
+.wizard {
+  display: block;
+  width: 100%;
+  overflow: hidden;
+}
+
+.tabcontrol a,
+.wizard a {
+  outline: 0;
+}
+
+.tabcontrol ul,
+.wizard ul {
+  list-style: none !important;
+  padding: 0;
+  margin: 0;
+}
+
+.tabcontrol ul > li,
+.wizard ul > li {
+  display: block;
+  padding: 0;
+}
+
+/* Accessibility */
+.tabcontrol > .content > .title,
+.tabcontrol > .steps .current-info,
+.wizard > .content > .title,
+.wizard > .steps .current-info {
+  position: absolute;
+  left: -999em;
+}
+
+/*
+    Wizard
+*/
+.wizard > .steps {
+  position: relative;
+  display: block;
+  width: 100%;
+}
+
+.wizard.vertical > .steps {
+  display: inline;
+  float: left;
+  width: 30%;
+}
+
+.wizard.vertical > .steps > ul > li {
+  float: none;
+  width: 100%;
+}
+
+.wizard.vertical > .content {
+  display: inline;
+  float: left;
+  margin: 0 2.5% 0.5em;
+  width: 65%;
+}
+
+.wizard.vertical > .actions {
+  display: inline;
+  float: right;
+  margin: 0 2.5%;
+  width: 95%;
+}
+
+.wizard.vertical > .actions > ul > li {
+  margin: 0 0 0 1em;
+}
+
+.wizard > .steps .number {
+  font-size: 1.429em;
+}
+
+.wizard > .steps > ul > li {
+  width: 25%;
+  float: left;
+}
+
+.wizard > .actions > ul > li {
+  float: left;
+}
+
+.wizard > .steps a {
+  display: block;
+  width: auto;
+  margin: 0 0.5em 0.5em;
+  padding: 1em;
+  text-decoration: none;
+  border-radius: 5px;
+}
+
+.wizard > .steps a:active, .wizard > .steps a:hover {
+  display: block;
+  width: auto;
+  margin: 0 0.5em 0.5em;
+  padding: 1em;
+  text-decoration: none;
+  border-radius: 5px;
+}
+
+.wizard > .steps .disabled a {
+  background: #eff3f6;
+  color: #686c71;
+  cursor: default;
+  opacity: 0.6;
+}
+
+.wizard > .steps .disabled a:active, .wizard > .steps .disabled a:hover {
+  background: #eff3f6;
+  color: #686c71;
+  cursor: default;
+}
+
+.wizard > .steps .current a {
+  background: #19BCBF;
+  color: #fff;
+  cursor: default;
+}
+
+.wizard > .steps .current a:active, .wizard > .steps .current a:hover {
+  background: #19BCBF;
+  color: #fff;
+  cursor: default;
+}
+
+.wizard > .steps .done a {
+  background: rgba(25, 188, 191, 0.2);
+  color: #19BCBF;
+}
+
+.wizard > .steps .done a:active, .wizard > .steps .done a:hover {
+  background: rgba(25, 188, 191, 0.2);
+  color: #19BCBF;
+}
+
+.wizard > .steps .error a {
+  background: #FF425C;
+  color: #fff;
+}
+
+.wizard > .steps .error a:active, .wizard > .steps .error a:hover {
+  background: #FF425C;
+  color: #fff;
+}
+
+.wizard > .content {
+  background: #f6f8fa;
+  display: block;
+  margin: 0.5em;
+  min-height: 8em;
+  overflow: hidden;
+  position: relative;
+  width: auto;
+  border-radius: 5px;
+}
+
+.wizard > .content > .body {
+  padding: 25px;
+}
+
+.wizard > .content > .body ul {
+  list-style: disc !important;
+}
+
+.wizard > .content > .body ul > li {
+  display: list-item;
+}
+
+.wizard > .content > .body > iframe {
+  border: 0 none;
+  width: 100%;
+  height: 100%;
+}
+
+.wizard > .content > .body input.error {
+  background: rgb(251, 227, 228);
+  border-color: #FF425C;
+  color: #FF425C;
+}
+
+.wizard > .content > .body label {
+  display: inline-block;
+  margin-bottom: 0.5em;
+}
+
+.wizard > .content > .body label.error {
+  color: #FF425C;
+  display: inline-block;
+  margin-left: 1.5em;
+}
+
+.wizard > .actions {
+  position: relative;
+  display: block;
+  text-align: right;
+  width: 100%;
+}
+
+.wizard > .actions > ul {
+  display: inline-block;
+  text-align: right;
+}
+
+.wizard > .actions > ul > li {
+  margin: 0 0.5em;
+}
+
+.wizard > .actions a {
+  background: #19BCBF;
+  color: #fff;
+  display: block;
+  padding: 0.5em 1em;
+  text-decoration: none;
+  border-radius: 5px;
+}
+
+.wizard > .actions a:active, .wizard > .actions a:hover {
+  background: #19BCBF;
+  color: #fff;
+  display: block;
+  padding: 0.5em 1em;
+  text-decoration: none;
+  border-radius: 5px;
+}
+
+.wizard > .actions .disabled a {
+  background: #eff3f6;
+  color: #aaa;
+}
+
+.wizard > .actions .disabled a:active, .wizard > .actions .disabled a:hover {
+  background: #eff3f6;
+  color: #aaa;
+}
+
+@media (max-width: 768px) {
+  .wizard .steps > ul > li {
+    width: 100%;
+  }
+  .wizard.vertical > .content,
+  .wizard.vertical > .steps {
+    width: 100%;
+  }
+}
+.pc-wizard.wizard .number {
+  display: none;
+}
+
+.pc-wizard.wizard > .steps a {
+  display: flex;
+  align-items: center;
+  margin: 0.5em;
+  position: relative;
+}
+
+.pc-wizard.wizard > .steps a:after {
+  content: "\f061";
+  font-family: "Font Awesome 5 Free";
+  font-weight: 900;
+  font-size: 20px;
+  position: absolute;
+  right: 0;
+  top: 20px;
+  opacity: 0.5;
+}
+
+.pc-wizard.wizard > .steps a span b {
+  display: block;
+}
+
+.pc-wizard.wizard > .steps a .num-icon {
+  width: 35px;
+  height: 35px;
+  border-radius: 2px;
+  margin-right: 10px;
+  background: #eff3f6;
+  color: #686c71;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.pc-wizard.wizard > .steps a.disabled:hover {
+  background: transparent;
+}
+
+.pc-wizard.wizard > .steps a:hover {
+  display: flex;
+}
+
+.pc-wizard.wizard > .steps > ul > li:last-child a:after {
+  visibility: hidden;
+}
+
+.pc-wizard.wizard > .steps .disabled a {
+  background: transparent;
+}
+
+.pc-wizard.wizard > .steps .current a {
+  background: transparent;
+  color: inherit;
+}
+
+.pc-wizard.wizard > .steps .current a .num-icon {
+  background: #19BCBF;
+  color: #fff;
+}
+
+.pc-wizard.wizard > .steps .done a {
+  background: transparent;
+}
+
+.pc-wizard.wizard > .steps .done a .num-icon {
+  background: rgba(25, 188, 191, 0.2);
+  color: #19BCBF;
+}
+
+.pc-wizard.wizard > .steps .done a span {
+  color: #686c71;
+}
+
+.pc-wizard.wizard > .content {
+  margin: 0;
+  border-radius: 0;
+  border-top: 1px solid #e2e5e8;
+  border-bottom: 1px solid #e2e5e8;
+}
+
+.pc-wizard.wizard > .actions {
+  padding: 15px 25px 10px;
+}
+
+.pc-wizard.wizard.vertical > .content,
+.pc-wizard.wizard.vertical > .actions {
+  margin: 0;
+  background: #f6f8fa;
+  width: 70%;
+  border-left: 1px solid #e2e5e8;
+}
+
+.pc-wizard.wizard.vertical > .content {
+  padding: 25px 25px 0;
+  border-radius: 0 2px 0 0;
+}
+
+.pc-wizard.wizard.vertical .actions {
+  padding: 25px;
+  border-radius: 0 0 2px 0;
+}
+
+.pc-wizard.wizard.vertical > .steps {
+  padding: 35px 10px;
+}
+
+.pc-wizard.wizard.vertical > .steps a:after {
+  content: "\f101";
+  right: 10px;
+}
+
+.pc-wizard.wizard.vertical > .steps > ul > li:last-child a:after {
+  visibility: visible;
+}
+
+@media (max-width: 768px) {
+  .pc-wizard.wizard > .steps a:after {
+    right: 15px;
+  }
+  .pc-wizard.wizard > .steps > ul > li:last-child a:after {
+    visibility: visible;
+  }
+  .pc-wizard.wizard.vertical > .steps {
+    padding: 0;
+  }
+  .pc-wizard.wizard.vertical > .content {
+    padding: 0;
+  }
+  .pc-wizard.wizard.vertical > .content,
+  .pc-wizard.wizard.vertical > .actions {
+    width: 100%;
+  }
+}
+.pc-tab-control.wizard .number {
+  display: none;
+}
+
+.pc-tab-control.wizard > .steps a {
+  display: flex;
+  align-items: center;
+  margin: 0.5em 0.5em 0;
+  padding: 1em 1.6em;
+  border-radius: 2px 2px 0 0;
+  position: relative;
+  background: rgba(255, 255, 255, 0.4);
+}
+
+.pc-tab-control.wizard > .steps a span {
+  color: #686c71;
+}
+
+.pc-tab-control.wizard > .steps a span b {
+  display: block;
+}
+
+.pc-tab-control.wizard > .steps a .num-icon {
+  width: 35px;
+  height: 35px;
+  border-radius: 2px;
+  margin-right: 10px;
+  background: #eff3f6;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.pc-tab-control.wizard > .steps a .num-icon .material-icons-two-tone {
+  background-color: #686c71;
+}
+
+.pc-tab-control.wizard > .steps a.disabled:hover {
+  background: transparent;
+}
+
+.pc-tab-control.wizard > .steps a:hover {
+  display: flex;
+}
+
+.pc-tab-control.wizard > .steps .done a:active,
+.pc-tab-control.wizard > .steps .done a:hover {
+  background: rgba(255, 255, 255, 0.4);
+}
+
+.pc-tab-control.wizard > .steps > ul > li:last-child a {
+  margin-right: 0;
+}
+
+.pc-tab-control.wizard > .steps > ul > li:first-child a {
+  margin-left: 0;
+}
+
+.pc-tab-control.wizard > .steps > ul > li:last-child a:after {
+  visibility: hidden;
+}
+
+.pc-tab-control.wizard > .steps .disabled a {
+  background: transparent;
+}
+
+.pc-tab-control.wizard > .steps .current a {
+  background: #fff;
+  color: inherit;
+}
+
+.pc-tab-control.wizard > .steps .current a .num-icon {
+  background: #19BCBF;
+  color: #fff;
+}
+
+.pc-tab-control.wizard > .steps .current a .num-icon .material-icons-two-tone {
+  background-color: #fff;
+}
+
+.pc-tab-control.wizard > .content {
+  margin: 0;
+  border-radius: 0 0 2px 2px;
+  background: #fff;
+  box-shadow: 0 0 0 1px #e2e5e8;
+  margin-bottom: 30px;
+}
+
+.pc-tab-control.wizard > .actions {
+  padding: 15px 25px 10px;
+}
+
+@media (max-width: 768px) {
+  .pc-tab-control.wizard > .steps a {
+    margin: 0;
+    border-radius: 2px;
+  }
+}
+.card .card-header h5 + span {
+  display: block;
+}
+
+.btn[data-handler=cmdSave] i {
+  margin-right: 0;
+}
+
+.bootstrap-select > .dropdown-toggle.btn-light, .bootstrap-select > .dropdown-toggle.btn-secondary {
+  border-width: 2px;
+  border-color: #ced4da !important;
+  box-shadow: 0 1px 2px 0 rgba(57, 70, 92, 0.05);
+  background: #fff !important;
+  color: #495057;
+  border-radius: 0.375rem;
+}
+
+.bootstrap-select > .dropdown-toggle.btn-light:focus, .bootstrap-select > .dropdown-toggle.btn-secondary:focus {
+  outline: none !important;
+}
+
+.daterangepicker {
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  box-shadow: 0 0 25px rgba(25, 188, 191, 0.15);
+  background-color: #fff;
+}
+
+.daterangepicker .calendar-table {
+  border: 1px solid #fff;
+  background-color: #fff;
+}
+
+.daterangepicker td.in-range {
+  background-color: #6ce9ec;
+}
+
+.daterangepicker td.off, .daterangepicker td.off.end-date, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date {
+  background-color: #fff;
+  color: #686c71;
+  opacity: 0.5;
+}
+
+.daterangepicker td.active, .daterangepicker td.active:hover {
+  background-color: #19BCBF;
+  color: #fff;
+}
+
+.daterangepicker td.available:hover,
+.daterangepicker th.available:hover {
+  background-color: #19BCBF;
+  color: #fff;
+}
+
+.daterangepicker td.available:hover > span,
+.daterangepicker th.available:hover > span {
+  border-color: #fff;
+}
+
+.daterangepicker:after {
+  border-bottom: 6px solid #fff;
+}
+
+.daterangepicker:before {
+  border-bottom: 7px solid rgba(0, 0, 0, 0.15);
+}
+
+.daterangepicker .ranges ul {
+  padding-top: 15px;
+  padding-bottom: 15px;
+}
+
+@media (min-width: 564px) {
+  .daterangepicker .ranges ul {
+    width: 160px;
+  }
+}
+.daterangepicker .ranges ul li {
+  margin: 5px 10px;
+  transition: all 0.2s ease-in-out;
+}
+
+.daterangepicker .ranges ul li.active {
+  background-color: #19BCBF;
+}
+
+.daterangepicker .ranges ul li:hover {
+  box-shadow: 0 15px 8px -9px rgba(0, 0, 0, 0.25);
+  background-color: #19BCBF;
+  color: #fff;
+}
+
+.select2-container--default .select2-selection--single,
+.select2-container--default .select2-selection {
+  border: 2px solid #ced4da;
+}
+
+.select2-container .select2-selection--single {
+  height: 48px;
+  margin-bottom: 10px;
+}
+
+.select2-container--default .select2-selection--single .select2-selection__rendered {
+  line-height: 46px;
+}
+
+.select2-container--default .select2-selection--single .select2-selection__arrow {
+  height: 46px;
+}
+
+.select2-container .select2-selection--multiple {
+  min-height: 46px;
+}
+
+.select2-container--default .select2-selection--multiple .select2-selection__rendered {
+  padding: 0 9px;
+}
+
+.select2-container--default .select2-selection--multiple .select2-selection__choice {
+  margin-right: 7px;
+  margin-top: 9px;
+  padding: 1px 7px;
+}
+
+.select2-container .select2-search--inline .select2-search__field {
+  margin-top: 9px;
+}
+
+.select2-container--default.select2-container--focus .select2-selection--multiple {
+  border: solid #e2e5e8 2px;
+}
+
+.select2-container--default .select2-selection--multiple {
+  background-color: #fff;
+  border: 2px solid #e2e5e8;
+  border-radius: 3px;
+}
+
+.select2-container--default .select2-selection--multiple .select2-selection__choice {
+  background-color: #19BCBF;
+  border: 1px solid #19BCBF;
+  color: #fff;
+  border-radius: 3px;
+}
+
+.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
+  color: #fff;
+  margin-right: 8px;
+}
+
+.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
+  color: #fff;
+}
+
+.custom-control-inline {
+  margin-right: 0;
+}
+
+.repeater .btn-danger,
+.repeater2 .btn-danger {
+  padding: 10px 12px;
+  font-size: 18px;
+}
+
+.form-group {
+  color: #666;
+  margin-bottom: 1rem;
+}
+
+.form-control-color {
+  width: 3rem;
+  height: calc(1.5em + 1.6rem + 2px);
+  padding: 0.8rem;
+}
+
+.custom-color .card-body, .custom-color .card {
+  color: #686c71;
+}
+
+.form-select {
+  background-image: unset;
+}
+
+/**  =====================
+      Radio & Checked css start
+==========================  **/
+.checkbox {
+  padding: 10px 0;
+  min-height: auto;
+  position: relative;
+  margin-right: 5px;
+}
+
+.checkbox input[type=checkbox] {
+  margin: 0;
+  display: none;
+  width: 22px;
+}
+
+.checkbox input[type=checkbox] + .cr {
+  padding-left: 0;
+}
+
+.checkbox input[type=checkbox] + .cr:before {
+  content: "\e83f";
+  width: 22px;
+  height: 22px;
+  display: inline-block;
+  margin-right: 10px;
+  border: 2px solid #e9eaec;
+  border-radius: 3px;
+  font-size: 15px;
+  font-family: "feather";
+  font-weight: 400;
+  line-height: 19px;
+  vertical-align: bottom;
+  text-align: center;
+  background: #ffffff;
+  color: transparent;
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+}
+
+.checkbox input[type=checkbox]:checked + .cr:before {
+  background: #1dd5d2;
+  border-color: #1dd5d2;
+  color: #ffffff;
+}
+
+.checkbox input[type=checkbox].disabled + .cr, .checkbox input[type=checkbox]:disabled + .cr {
+  opacity: 0.5;
+}
+
+.checkbox input[type=checkbox].disabled + .cr:before, .checkbox input[type=checkbox]:disabled + .cr:before {
+  cursor: not-allowed;
+}
+
+.checkbox.checkbox-fill input[type=checkbox] + .cr:after {
+  content: "";
+  width: 22.5px;
+  height: 22.5px;
+  display: inline-block;
+  margin-right: 10px;
+  border: 2px solid #e9eaec;
+  border-radius: 2px;
+  vertical-align: bottom;
+  text-align: center;
+  background: transparent;
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+  position: absolute;
+  top: 8.5px;
+  left: 3px;
+}
+
+.checkbox.checkbox-fill input[type=checkbox] + .cr:before {
+  opacity: 0;
+  content: "\e840";
+  font-size: 27px;
+  background: transparent;
+}
+
+.checkbox.checkbox-fill input[type=checkbox]:checked + .cr:after {
+  opacity: 0;
+}
+
+.checkbox.checkbox-fill input[type=checkbox]:checked + .cr:before {
+  opacity: 1;
+  background: transparent;
+  color: #1dd5d2;
+  border-color: transparent;
+}
+
+.checkbox.checkbox-primary input[type=checkbox]:checked + .cr:before {
+  background: #19BCBF;
+  border-color: #19BCBF;
+  color: #ffffff;
+}
+
+.checkbox.checkbox-fill.checkbox-primary input[type=checkbox]:checked + .cr:before {
+  background: transparent;
+  color: #19BCBF;
+  border-color: transparent;
+}
+
+.checkbox.checkbox-danger input[type=checkbox]:checked + .cr:before {
+  background: #FF425C;
+  border-color: #FF425C;
+  color: #ffffff;
+}
+
+.checkbox.checkbox-fill.checkbox-danger input[type=checkbox]:checked + .cr:before {
+  background: transparent;
+  color: #FF425C;
+  border-color: transparent;
+}
+
+.checkbox.checkbox-success input[type=checkbox]:checked + .cr:before {
+  background: #13bd8a;
+  border-color: #13bd8a;
+  color: #ffffff;
+}
+
+.checkbox.checkbox-fill.checkbox-success input[type=checkbox]:checked + .cr:before {
+  background: transparent;
+  color: #13bd8a;
+  border-color: transparent;
+}
+
+.checkbox.checkbox-warning input[type=checkbox]:checked + .cr:before {
+  background: #FF9764;
+  border-color: #FF9764;
+  color: #ffffff;
+}
+
+.checkbox.checkbox-fill.checkbox-warning input[type=checkbox]:checked + .cr:before {
+  background: transparent;
+  color: #FF9764;
+  border-color: transparent;
+}
+
+.checkbox.checkbox-purple input[type=checkbox]:checked + .cr:before {
+  background: #463699;
+  border-color: #463699;
+  color: #ffffff;
+}
+
+.checkbox.checkbox-fill.checkbox-purple input[type=checkbox]:checked + .cr:before {
+  background: transparent;
+  color: #463699;
+  border-color: transparent;
+}
+
+.checkbox.checkbox-info input[type=checkbox]:checked + .cr:before {
+  background: #2DCEE3;
+  border-color: #2DCEE3;
+  color: #ffffff;
+}
+
+.checkbox.checkbox-fill.checkbox-info input[type=checkbox]:checked + .cr:before {
+  background: transparent;
+  color: #2DCEE3;
+  border-color: transparent;
+}
+
+.checkbox .cr {
+  cursor: pointer;
+}
+
+.radio {
+  padding: 10px 0;
+  min-height: auto;
+  position: relative;
+  margin-right: 5px;
+}
+
+.radio input[type=radio] {
+  margin: 0;
+  display: none;
+  width: 20px;
+}
+
+.radio input[type=radio] + .cr {
+  position: relative;
+  padding-left: 0;
+}
+
+.radio input[type=radio] + .cr:after, .radio input[type=radio] + .cr:before {
+  content: "";
+  display: inline-block;
+  margin-right: 10px;
+  border-radius: 50%;
+  vertical-align: bottom;
+  background: #fff;
+  color: transparent;
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+}
+
+.radio input[type=radio] + .cr:before {
+  width: 20px;
+  height: 20px;
+  border: 2px solid #e9eaec;
+}
+
+.radio input[type=radio] + .cr:after {
+  width: 12px;
+  height: 12px;
+  position: absolute;
+  top: 5px;
+  left: 4px;
+}
+
+.radio input[type=radio]:checked + .cr:before {
+  border-color: #19BCBF;
+}
+
+.radio input[type=radio]:checked + .cr:after {
+  background: #19BCBF;
+}
+
+.radio input[type=radio]:disabled + .cr {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.radio input[type=radio]:disabled + .cr:after, .radio input[type=radio]:disabled + .cr:before {
+  cursor: not-allowed;
+}
+
+.radio.radio-fill input[type=radio] + .cr:after {
+  width: 20px;
+  height: 20px;
+  top: 0;
+  left: 0;
+}
+
+.radio.radio-primary input[type=radio]:checked + .cr:before {
+  border-color: #19BCBF;
+}
+
+.radio.radio-primary input[type=radio]:checked + .cr:after {
+  background: #19BCBF;
+}
+
+.radio.radio-danger input[type=radio]:checked + .cr:before {
+  border-color: #FF425C;
+}
+
+.radio.radio-danger input[type=radio]:checked + .cr:after {
+  background: #FF425C;
+}
+
+.radio.radio-success input[type=radio]:checked + .cr:before {
+  border-color: #13bd8a;
+}
+
+.radio.radio-success input[type=radio]:checked + .cr:after {
+  background: #13bd8a;
+}
+
+.radio.radio-warning input[type=radio]:checked + .cr:before {
+  border-color: #FF9764;
+}
+
+.radio.radio-warning input[type=radio]:checked + .cr:after {
+  background: #FF9764;
+}
+
+.radio.radio-purple input[type=radio]:checked + .cr:before {
+  border-color: #463699;
+}
+
+.radio.radio-purple input[type=radio]:checked + .cr:after {
+  background: #463699;
+}
+
+.radio.radio-info input[type=radio]:checked + .cr:before {
+  border-color: #2DCEE3;
+}
+
+.radio.radio-info input[type=radio]:checked + .cr:after {
+  background: #2DCEE3;
+}
+
+.radio .cr {
+  cursor: pointer;
+}
+
+@-moz-document url-prefix() {}
+.custom-controls-stacked .radio input[type=radio] + .cr:after {
+  top: 15px;
+}
+
+/**====== Radio & Checked css end ======**/
+/**  =====================
+      Label & Badges css start
+==========================  **/
+.label {
+  padding: 4px 10px;
+  min-height: auto;
+  position: relative;
+  margin-right: 5px;
+  margin-bottom: 5px;
+}
+
+.label.label-primary {
+  background: #19BCBF;
+  color: #ffffff;
+}
+
+.label.label-danger {
+  background: #FF425C;
+  color: #ffffff;
+}
+
+.label.label-success {
+  background: #13bd8a;
+  color: #ffffff;
+}
+
+.label.label-warning {
+  background: #FF9764;
+  color: #ffffff;
+}
+
+.label.label-purple {
+  background: #463699;
+  color: #ffffff;
+}
+
+.label.label-info {
+  background: #2DCEE3;
+  color: #ffffff;
+}
+
+.label-primary {
+  background: #19BCBF;
+  color: #fff;
+}
+
+.label-danger {
+  background: #FF425C;
+  color: #fff;
+}
+
+.label-success {
+  background: #13bd8a;
+  color: #fff;
+}
+
+.label-warning {
+  background: #FF9764;
+  color: #fff;
+}
+
+.label-purple {
+  background: #463699;
+  color: #fff;
+}
+
+.label-info {
+  background: #2DCEE3;
+  color: #fff;
+}
+
+.badge span {
+  display: block;
+  margin-bottom: -1px;
+}
+
+/**====== Label & Badges css end ======**/
+/**  =====================
+      Data Tables css start
+==========================  **/
+.table {
+  --bs-table-hover-bg: rgba(239, 243, 246, 0.5);
+  --bs-table-color-state: #111;
+}
+
+.email-card .tab-content .table tr.unread td {
+  --bs-table-bg: rgba(239, 243, 246, 0.7);
+}
+
+.table td,
+.table th {
+  border-top: 1px solid #e2e5e8;
+  white-space: nowrap;
+  padding: 1.05rem 0.75rem;
+  border-bottom: none;
+}
+
+.table thead th {
+  border-bottom: 1px solid #e2e5e8;
+  font-size: 13px;
+  color: #111;
+  background: #eff3f6;
+  text-transform: uppercase;
+}
+
+.table tbody + tbody {
+  border-top: 2px solid #e2e5e8;
+}
+
+.table.table-dark thead th {
+  background-color: #11171a;
+}
+
+.table.dataTable[class*=table-] thead th {
+  background: #eff3f6;
+}
+
+.table-info {
+  --bs-table-bg: #bee5eb;
+}
+
+.table-primary {
+  --bs-table-bg: #b8daff;
+}
+
+.table-dark:not(caption) > * > * {
+  --bs-table-color-state: #fff !important;
+}
+
+/* Border versions */
+.table-bordered {
+  border: 1px solid #e2e5e8;
+}
+
+.table-bordered td,
+.table-bordered th {
+  border: 1px solid #e2e5e8;
+}
+
+/* Zebra-striping */
+.table-striped tbody tr:nth-of-type(2n+1) {
+  background-color: rgba(25, 188, 191, 0.03);
+}
+
+.table-striped > tbody > tr:nth-of-type(odd) > * {
+  --bs-table-bg-type: rgba(25, 188, 191, 0.03);
+}
+
+/* Hover effect */
+.table-hover tbody tr:hover {
+  background-color: rgba(25, 188, 191, 0.03);
+}
+
+/* Table backgrounds */
+.table .thead-dark th {
+  color: #fff;
+  background-color: #39465C;
+  border-color: #252e3d;
+}
+
+.table-dark {
+  color: #fff;
+  background-color: #39465C;
+}
+
+.table-dark td,
+.table-dark th,
+.table-dark thead th {
+  border-color: #252e3d;
+}
+
+.table-dark.table-striped tbody tr:nth-of-type(odd) {
+  background-color: #354156;
+}
+
+.table-dark.table-hover tbody tr:hover {
+  background-color: #2f3a4c;
+}
+
+.table-dark thead th {
+  color: #fff;
+}
+
+/* fixed header position */
+table.dataTable.fixedHeader-floating {
+  top: 60 !important;
+}
+
+@media screen and (max-width: 992px) {
+  table.dataTable.fixedHeader-floating {
+    display: none !important;
+  }
+}
+@media screen and (max-width: 992px) {
+  .fixedHeader-locked {
+    display: none !important;
+  }
+}
+/**  =====================
+      Foo-table css start
+==========================  **/
+.footable .pagination > .active > a,
+.footable .pagination > .active > span {
+  background-color: #19BCBF;
+  border-color: #19BCBF;
+}
+
+.footable .pagination > .active > a:focus, .footable .pagination > .active > a:hover,
+.footable .pagination > .active > span:focus,
+.footable .pagination > .active > span:hover {
+  background-color: #19BCBF;
+  border-color: #19BCBF;
+}
+
+.footable .pagination > li > a,
+.footable .pagination > li > span {
+  color: #222;
+}
+
+.footable-details.table,
+.footable.table {
+  margin-bottom: 0;
+}
+
+table.footable > tfoot > tr.footable-paging > td > span.label {
+  margin-bottom: 0;
+}
+
+table.footable-paging-center > tfoot > tr.footable-paging > td {
+  padding-bottom: 0;
+}
+
+.table-columned > tbody > tr > td {
+  border: 0;
+  border-left: 1px solid #e2e5e8;
+}
+
+.table-columned > tbody > tr > th {
+  border: 0;
+}
+
+/**====== Foo-table css end ======**/
+/**======= basic table css start =======**/
+.table.table-xl td,
+.table.table-xl th {
+  padding: 1.25rem 2rem;
+}
+
+.table.table-lg td,
+.table.table-lg th {
+  padding: 0.9rem 2rem;
+}
+
+.table.table-de td,
+.table.table-de th {
+  padding: 0.75rem 2rem;
+}
+
+.table.table-sm td,
+.table.table-sm th {
+  padding: 0.6rem 2rem;
+}
+
+.table.table-xs td,
+.table.table-xs th {
+  padding: 0.4rem 2rem;
+}
+
+/**======= basic table css end ======**/
+#row-delete .selected, #row-select .selected {
+  background-color: #19BCBF;
+  color: #fff;
+}
+
+table.dataTable td.focus {
+  outline: 1px solid #19BCBF;
+  outline-offset: -3px;
+  color: #fff;
+  background: linear-gradient(-45deg, #19BCBF, #149698) !important;
+}
+
+table.dataTable tbody > tr.selected, table.dataTable tbody > tr > .selected {
+  background: rgba(25, 188, 191, 0.12);
+}
+
+table.dataTable tbody > tr.selected td.select-checkbox:after, table.dataTable tbody > tr.selected th.select-checkbox:after, table.dataTable tbody > tr > .selected td.select-checkbox:after, table.dataTable tbody > tr > .selected th.select-checkbox:after {
+  text-shadow: 1px 1px #e4f2fe, -1px -1px #e4f2fe, 1px -1px #e4f2fe, -1px 1px #e4f2fe;
+}
+
+table.dataTable tbody > tr.selected td,
+table.dataTable tbody > tr > .selected td {
+  background: transparent;
+}
+
+.table-dark {
+  --bs-table-bg: #39465C;
+}
+
+/**====== Data Tables css end ======**/
+/**  =====================
+      Authentication css start
+==========================  **/
+.auth-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  min-width: 100%;
+  min-height: 100vh;
+}
+
+@media (min-width: 1200px) {
+  .auth-wrapper .container {
+    max-width: 1140px;
+  }
+}
+.auth-wrapper .saprator {
+  position: relative;
+  margin: 8px 0;
+}
+
+.auth-wrapper .saprator span {
+  background: #fff;
+  position: relative;
+  padding: 0 10px;
+  z-index: 5;
+  font-size: 20px;
+}
+
+.auth-wrapper .saprator:after {
+  content: "";
+  position: absolute;
+  top: 15px;
+  left: 0;
+  width: 100%;
+  height: 1px;
+  background: #e2e5e8;
+  z-index: 1;
+}
+
+.auth-wrapper a,
+.auth-wrapper p > a {
+  color: #111;
+  font-weight: 600;
+}
+
+.auth-wrapper .btn-auth-gen .btn-icon {
+  width: 140px;
+  height: 140px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 45px;
+}
+
+.auth-wrapper .btn-auth-gen .btn-icon small {
+  font-size: 15px;
+}
+
+.auth-wrapper .input-group {
+  background: transparent;
+}
+
+.auth-wrapper .card {
+  margin-bottom: 0;
+  padding: 8px;
+}
+
+.auth-wrapper .card .card-body {
+  padding: 20px 25px 20px 40px;
+}
+
+.auth-wrapper > div {
+  z-index: 5;
+}
+
+.auth-wrapper .auth-content {
+  position: relative;
+  padding: 15px;
+  z-index: 5;
+}
+
+@media only screen and (max-width: 767px) {
+  .auth-wrapper .card .card-body {
+    padding: 30px 15px;
+  }
+}
+.auth-wrapper.offline {
+  background-image: none;
+}
+
+.auth-wrapper.offline:before {
+  display: none;
+}
+
+.auth-wrapper.error {
+  background: #FF425C;
+}
+
+.auth-wrapper.error .container {
+  position: relative;
+  max-width: 800px;
+  margin: 0 auto 5%;
+  padding: 5%;
+  text-align: center;
+  color: #fff;
+}
+
+.auth-wrapper .card-body .carousel-indicators {
+  margin: 30px 0;
+  bottom: 0;
+}
+
+.auth-wrapper .card-body .carousel-indicators li {
+  width: 50px;
+  background-color: #eff3f6;
+}
+
+.auth-wrapper .card-body .carousel-indicators li.active {
+  background-color: #19BCBF;
+}
+
+.auth-wrapper .img-logo-overlay {
+  position: absolute;
+  top: 40px;
+  left: 50px;
+}
+
+/* image varient start */
+.aut-bg-img {
+/*   background-image: url("../images/auth-bg-big.jpg");
+  background-size: cover;
+  background-attachment: fixed;
+  background-position: center; */
+}
+
+.aut-bg-img-side p {
+  line-height: 2;
+}
+
+.aut-bg-img .custom-select,
+.aut-bg-img .form-control,
+.aut-bg-img-side .custom-select,
+.aut-bg-img-side .form-control {
+  background: transparent;
+}
+
+.aut-bg-img .auth-content,
+.aut-bg-img-side .auth-content {
+  padding-top: 90px;
+  padding-bottom: 90px;
+}
+
+.blur-bg-images {
+ /*  background-image: url("../images/auth/blur-bg.jpg");
+  background-size: cover;
+  background-attachment: fixed;
+  background-position: center; */
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.blur-bg-images:after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.3);
+}
+
+.auth-prod-slider .blur-bg-images:after {
+  background: #39465C;
+}
+
+.auth-prod-slider .auth-prod-slidebg {
+  height: 600px;
+  width: 100%;
+}
+
+.auth-prod-slider .auth-prod-slidebg.bg-1 {
+  background-image: linear-gradient(to right, rgba(70, 54, 153, 0.9) 0%, rgba(25, 188, 191, 0.9) 100%);
+}
+
+.auth-prod-slider .auth-prod-slidebg.bg-2 {
+  background-image: linear-gradient(to right, rgba(25, 188, 191, 0.9) 0%, rgba(45, 206, 227, 0.9) 100%);
+}
+
+.auth-prod-slider .auth-prod-slidebg.bg-3 {
+  background-image: linear-gradient(to right, rgba(45, 206, 227, 0.9) 0%, rgba(25, 188, 191, 0.9) 100%);
+}
+
+.auth-prod-slider .auth-prod-slidebg.bg-4 {
+  background-image: linear-gradient(to right, rgba(25, 188, 191, 0.9) 0%, rgba(70, 54, 153, 0.9) 100%);
+}
+
+.auth-prod-slider .carousel-indicators li {
+  width: 8px;
+  height: 8px;
+  border-radius: 8px;
+  transition: all 0.35s ease-in-out;
+  border-top: none;
+  border-bottom: none;
+}
+
+.auth-prod-slider .carousel-indicators li.active {
+  width: 20px;
+  background: #19BCBF;
+}
+
+.auth-prod-slider .carousel-caption {
+  bottom: auto;
+  top: 50px;
+}
+
+.auth-prod-slider .carousel-caption img {
+  border-radius: 5px;
+  border: 4px solid #fff;
+}
+
+.auth-prod-slider .carousel-caption h5 {
+  color: #fff;
+}
+
+/* image varient End */
+/**====== Authentication css end ======**/
+/* Button variants
+ Easily pump out default styles, as well as :hover, :focus, :active,
+ and disabled options for all buttons */
+/**  =====================
+      Button css start
+==========================  **/
+.btn-show {
+  --bs-btn-active-bg: #19BCBF;
+  --bs-btn-active-border-color: #19BCBF;
+}
+
+.btn-close {
+  --bs-btn-close-focus-shadow: none;
+}
+
+.btn-primary {
+  --bs-btn-hover-bg: #19BCBF;
+  --bs-btn-color: #fff;
+  --bs-btn-bg: #19BCBF;
+  --bs-btn-border-color: #19BCBF;
+  --bs-btn-hover-color: #fff;
+  --bs-btn-hover-bg: #16a6a8;
+  --bs-btn-hover-border-color: #16a6a8;
+  --bs-btn-focus-shadow-rgb: 49,132,253;
+  --bs-btn-active-color: #fff;
+  --bs-btn-active-bg: #16a6a8;
+  --bs-btn-active-border-color: #0a53be;
+  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+  --bs-btn-disabled-color: #fff;
+  --bs-btn-disabled-bg: #16a6a8;
+  --bs-btn-disabled-border-color: #16a6a8;
+}
+
+.btn-outline-primary {
+  --bs-btn-active-color: #fff;
+  --bs-btn-active-bg: #16a6a8;
+  --bs-btn-active-border-color: #16a6a8;
+}
+
+.btf-check:checked + .btf, .btf.active, .btf.show, .btf:first-child:active, :not(.btf-check) + .btf:active {
+  --bs-btn-active-bg: #19BCBF;
+  --bs-btn-active-border-color: #19BCBF;
+}
+
+.btn {
+  border-radius: 0.25rem;
+  margin-bottom: 5px;
+  margin-right: 10px;
+  transition: all 0.3s ease-in-out;
+  --bs-btn-padding-y: 10px;
+  --bs-btn-padding-x: 20px;
+  --bs-btn-font-size: 14px;
+}
+
+.btn > i {
+  margin-right: 12px;
+}
+
+.btn-square {
+  border-radius: 0;
+}
+
+.btn.disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+.btn-rounded {
+  border-radius: 30px;
+}
+
+.btn .spinner-border {
+  margin-right: 5px;
+}
+
+.dropdown-toggle::after {
+  top: 3px;
+  left: 8px;
+  position: relative;
+}
+
+.dropdown-toggle-split {
+  padding: 8px 10px;
+}
+
+.dropdown-toggle-split:after {
+  left: 0;
+}
+
+.btn-icon,
+.drp-icon {
+  width: 40px;
+  height: 40px;
+  padding: 10px 12px;
+}
+
+.btn-icon > i,
+.drp-icon > i {
+  margin-right: 0;
+}
+
+.drp-icon.dropdown-toggle:after {
+  display: none;
+}
+
+.drp-icon + .dropdown-menu {
+  margin-left: -10px;
+}
+
+.btn-lg {
+  padding: 12px 25px;
+  border-radius: 0.35rem;
+}
+
+.btn-sm {
+  padding: 3px 12px;
+  border-radius: 0.15rem;
+}
+
+.btn-group .btn,
+.btn-group-vertical .btn {
+  margin-bottom: 0;
+  margin-right: 0;
+}
+
+.shadow-1 {
+  box-shadow: 0 7px 12px 0 rgba(62, 57, 107, 0.16);
+}
+
+.shadow-2 {
+  box-shadow: 0 10px 18px 0 rgba(62, 57, 107, 0.2);
+}
+
+.shadow-3 {
+  box-shadow: 0 14px 24px 0 rgba(62, 57, 107, 0.26);
+}
+
+.shadow-4 {
+  box-shadow: 0 16px 28px 0 rgba(62, 57, 107, 0.3);
+}
+
+.shadow-5 {
+  box-shadow: 0 20px 24px 0 rgba(62, 57, 107, 0.36);
+}
+
+/* Alternate buttons */
+.btn-primary {
+  color: #fff;
+  background-color: #19BCBF;
+  border-color: #17afb1;
+}
+
+.btn-primary:hover {
+  color: #fff;
+  background-color: #159b9d;
+  border-color: #139092;
+}
+
+.btn-primary.disabled, .btn-primary:disabled {
+  color: #fff;
+  background-color: #19BCBF;
+  border-color: #19BCBF;
+}
+
+.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show > .btn-primary.dropdown-toggle, .btn-primary.show {
+  color: #fff;
+  background-color: #139092;
+  border-color: #128587;
+}
+
+.btn-primary:focus-visible {
+  color: white;
+  background-color: #139092;
+  border-color: #128587;
+}
+
+.btn-secondary {
+  color: #fff;
+  background-color: #7E858E;
+  border-color: #767d87;
+}
+
+.btn-secondary:hover {
+  color: #fff;
+  background-color: #6b727a;
+  border-color: #656c74;
+}
+
+.btn-secondary.disabled, .btn-secondary:disabled {
+  color: #fff;
+  background-color: #7E858E;
+  border-color: #7E858E;
+}
+
+.btn-secondary:not(:disabled):not(.disabled).active, .btn-secondary:not(:disabled):not(.disabled):active, .show > .btn-secondary.dropdown-toggle, .btn-secondary.show {
+  color: #fff;
+  background-color: #656c74;
+  border-color: #5f656d;
+}
+
+.btn-secondary:focus-visible {
+  color: white;
+  background-color: #656c74;
+  border-color: #5f656d;
+}
+
+.btn-success {
+  color: #fff;
+  background-color: #13bd8a;
+  border-color: #12af80;
+}
+
+.btn-success:hover {
+  color: #fff;
+  background-color: #109a71;
+  border-color: #0e8f68;
+}
+
+.btn-success.disabled, .btn-success:disabled {
+  color: #fff;
+  background-color: #13bd8a;
+  border-color: #13bd8a;
+}
+
+.btn-success:not(:disabled):not(.disabled).active, .btn-success:not(:disabled):not(.disabled):active, .show > .btn-success.dropdown-toggle, .btn-success.show {
+  color: #fff;
+  background-color: #0e8f68;
+  border-color: #0d8360;
+}
+
+.btn-success:focus-visible {
+  color: white;
+  background-color: #0e8f68;
+  border-color: #0d8360;
+}
+
+.btn-info {
+  color: #fff;
+  background-color: #2DCEE3;
+  border-color: #20cbe1;
+}
+
+.btn-info:hover {
+  color: #fff;
+  background-color: #1cbace;
+  border-color: #1ab0c3;
+}
+
+.btn-info.disabled, .btn-info:disabled {
+  color: #fff;
+  background-color: #2DCEE3;
+  border-color: #2DCEE3;
+}
+
+.btn-info:not(:disabled):not(.disabled).active, .btn-info:not(:disabled):not(.disabled):active, .show > .btn-info.dropdown-toggle, .btn-info.show {
+  color: #fff;
+  background-color: #1ab0c3;
+  border-color: #19a5b8;
+}
+
+.btn-info:focus-visible {
+  color: white;
+  background-color: #1ab0c3;
+  border-color: #19a5b8;
+}
+
+.btn-warning {
+  color: #fff;
+  background-color: #FF9764;
+  border-color: #ff8d55;
+}
+
+.btn-warning:hover {
+  color: #fff;
+  background-color: #ff7d3e;
+  border-color: #ff7531;
+}
+
+.btn-warning.disabled, .btn-warning:disabled {
+  color: #fff;
+  background-color: #FF9764;
+  border-color: #FF9764;
+}
+
+.btn-warning:not(:disabled):not(.disabled).active, .btn-warning:not(:disabled):not(.disabled):active, .show > .btn-warning.dropdown-toggle, .btn-warning.show {
+  color: #fff;
+  background-color: #ff7531;
+  border-color: #ff6c24;
+}
+
+.btn-warning:focus-visible {
+  color: white;
+  background-color: #ff7531;
+  border-color: #ff6c24;
+}
+
+.btn-danger {
+  color: #fff;
+  background-color: #FF425C;
+  border-color: #ff334f;
+}
+
+.btn-danger:hover {
+  color: #fff;
+  background-color: #ff1c3b;
+  border-color: #ff0f30;
+}
+
+.btn-danger.disabled, .btn-danger:disabled {
+  color: #fff;
+  background-color: #FF425C;
+  border-color: #FF425C;
+}
+
+.btn-danger:not(:disabled):not(.disabled).active, .btn-danger:not(:disabled):not(.disabled):active, .show > .btn-danger.dropdown-toggle, .btn-danger.show {
+  color: #fff;
+  background-color: #ff0f30;
+  border-color: #ff0225;
+}
+
+.btn-danger:focus-visible {
+  color: white;
+  background-color: #ff0f30;
+  border-color: #ff0225;
+}
+
+.btn-light {
+  color: #39465C;
+  background-color: #E4E5E6;
+  border-color: #dcdddf;
+}
+
+.btn-light:hover {
+  color: #39465C;
+  background-color: #d0d2d4;
+  border-color: #cacccd;
+}
+
+.btn-light.disabled, .btn-light:disabled {
+  color: #39465C;
+  background-color: #E4E5E6;
+  border-color: #E4E5E6;
+}
+
+.btn-light:not(:disabled):not(.disabled).active, .btn-light:not(:disabled):not(.disabled):active, .show > .btn-light.dropdown-toggle, .btn-light.show {
+  color: #39465C;
+  background-color: #cacccd;
+  border-color: #c3c5c7;
+}
+
+.btn-light:focus-visible {
+  color: white;
+  background-color: #cacccd;
+  border-color: #c3c5c7;
+}
+
+.btn-dark {
+  color: #fff;
+  background-color: #39465C;
+  border-color: #333f53;
+}
+
+.btn-dark:hover {
+  color: #fff;
+  background-color: #2a3444;
+  border-color: #252e3d;
+}
+
+.btn-dark.disabled, .btn-dark:disabled {
+  color: #fff;
+  background-color: #39465C;
+  border-color: #39465C;
+}
+
+.btn-dark:not(:disabled):not(.disabled).active, .btn-dark:not(:disabled):not(.disabled):active, .show > .btn-dark.dropdown-toggle, .btn-dark.show {
+  color: #fff;
+  background-color: #252e3d;
+  border-color: #212835;
+}
+
+.btn-dark:focus-visible {
+  color: white;
+  background-color: #252e3d;
+  border-color: #212835;
+}
+
+.btn-info, .btn-warning {
+  color: #fff !important;
+}
+
+/* outline buttons */
+.btn-outline-primary {
+  color: #19BCBF;
+  background-color: transparent;
+  background-image: none;
+  border-color: #19BCBF;
+}
+
+.btn-outline-primary:hover {
+  color: #fff;
+  background-color: #19BCBF;
+  border-color: #19BCBF;
+}
+
+.btn-outline-primary.disabled, .btn-outline-primary:disabled {
+  color: #19BCBF;
+  background-color: transparent;
+}
+
+.btn-outline-primary:not(:disabled):not(.disabled).active, .btn-outline-primary:not(:disabled):not(.disabled):active, .show > .btn-outline-primary.dropdown-toggle, .btn-outline-primary.show {
+  color: #fff;
+  background-color: #19BCBF;
+  border-color: #19BCBF;
+}
+
+.btn-outline-secondary {
+  color: #7E858E;
+  background-color: transparent;
+  background-image: none;
+  border-color: #7E858E;
+}
+
+.btn-outline-secondary:hover {
+  color: #fff;
+  background-color: #7E858E;
+  border-color: #7E858E;
+}
+
+.btn-outline-secondary.disabled, .btn-outline-secondary:disabled {
+  color: #7E858E;
+  background-color: transparent;
+}
+
+.btn-outline-secondary:not(:disabled):not(.disabled).active, .btn-outline-secondary:not(:disabled):not(.disabled):active, .show > .btn-outline-secondary.dropdown-toggle, .btn-outline-secondary.show {
+  color: #fff;
+  background-color: #7E858E;
+  border-color: #7E858E;
+}
+
+.btn-outline-success {
+  color: #13bd8a;
+  background-color: transparent;
+  background-image: none;
+  border-color: #13bd8a;
+}
+
+.btn-outline-success:hover {
+  color: #fff;
+  background-color: #13bd8a;
+  border-color: #13bd8a;
+}
+
+.btn-outline-success.disabled, .btn-outline-success:disabled {
+  color: #13bd8a;
+  background-color: transparent;
+}
+
+.btn-outline-success:not(:disabled):not(.disabled).active, .btn-outline-success:not(:disabled):not(.disabled):active, .show > .btn-outline-success.dropdown-toggle, .btn-outline-success.show {
+  color: #fff;
+  background-color: #13bd8a;
+  border-color: #13bd8a;
+}
+
+.btn-outline-info {
+  color: #2DCEE3;
+  background-color: transparent;
+  background-image: none;
+  border-color: #2DCEE3;
+}
+
+.btn-outline-info:hover {
+  color: #fff;
+  background-color: #2DCEE3;
+  border-color: #2DCEE3;
+}
+
+.btn-outline-info.disabled, .btn-outline-info:disabled {
+  color: #2DCEE3;
+  background-color: transparent;
+}
+
+.btn-outline-info:not(:disabled):not(.disabled).active, .btn-outline-info:not(:disabled):not(.disabled):active, .show > .btn-outline-info.dropdown-toggle, .btn-outline-info.show {
+  color: #fff;
+  background-color: #2DCEE3;
+  border-color: #2DCEE3;
+}
+
+.btn-outline-warning {
+  color: #FF9764;
+  background-color: transparent;
+  background-image: none;
+  border-color: #FF9764;
+}
+
+.btn-outline-warning:hover {
+  color: #fff;
+  background-color: #FF9764;
+  border-color: #FF9764;
+}
+
+.btn-outline-warning.disabled, .btn-outline-warning:disabled {
+  color: #FF9764;
+  background-color: transparent;
+}
+
+.btn-outline-warning:not(:disabled):not(.disabled).active, .btn-outline-warning:not(:disabled):not(.disabled):active, .show > .btn-outline-warning.dropdown-toggle, .btn-outline-warning.show {
+  color: #fff;
+  background-color: #FF9764;
+  border-color: #FF9764;
+}
+
+.btn-outline-danger {
+  color: #FF425C;
+  background-color: transparent;
+  background-image: none;
+  border-color: #FF425C;
+}
+
+.btn-outline-danger:hover {
+  color: #fff;
+  background-color: #FF425C;
+  border-color: #FF425C;
+}
+
+.btn-outline-danger.disabled, .btn-outline-danger:disabled {
+  color: #FF425C;
+  background-color: transparent;
+}
+
+.btn-outline-danger:not(:disabled):not(.disabled).active, .btn-outline-danger:not(:disabled):not(.disabled):active, .show > .btn-outline-danger.dropdown-toggle, .btn-outline-danger.show {
+  color: #fff;
+  background-color: #FF425C;
+  border-color: #FF425C;
+}
+
+.btn-outline-light {
+  color: #E4E5E6;
+  background-color: transparent;
+  background-image: none;
+  border-color: #E4E5E6;
+}
+
+.btn-outline-light:hover {
+  color: #39465C;
+  background-color: #E4E5E6;
+  border-color: #E4E5E6;
+}
+
+.btn-outline-light.disabled, .btn-outline-light:disabled {
+  color: #E4E5E6;
+  background-color: transparent;
+}
+
+.btn-outline-light:not(:disabled):not(.disabled).active, .btn-outline-light:not(:disabled):not(.disabled):active, .show > .btn-outline-light.dropdown-toggle, .btn-outline-light.show {
+  color: #39465C;
+  background-color: #E4E5E6;
+  border-color: #E4E5E6;
+}
+
+.btn-outline-dark {
+  color: #39465C;
+  background-color: transparent;
+  background-image: none;
+  border-color: #39465C;
+}
+
+.btn-outline-dark:hover {
+  color: #fff;
+  background-color: #39465C;
+  border-color: #39465C;
+}
+
+.btn-outline-dark.disabled, .btn-outline-dark:disabled {
+  color: #39465C;
+  background-color: transparent;
+}
+
+.btn-outline-dark:not(:disabled):not(.disabled).active, .btn-outline-dark:not(:disabled):not(.disabled):active, .show > .btn-outline-dark.dropdown-toggle, .btn-outline-dark.show {
+  color: #fff;
+  background-color: #39465C;
+  border-color: #39465C;
+}
+
+/* glow buttons */
+.btn-glow-primary {
+  box-shadow: 0 0px 7px 0px rgba(25, 188, 191, 0.56), 0 0 10px 2px rgba(25, 188, 191, 0.2);
+}
+
+.btn-glow-secondary {
+  box-shadow: 0 0px 7px 0px rgba(126, 133, 142, 0.56), 0 0 10px 2px rgba(126, 133, 142, 0.2);
+}
+
+.btn-glow-success {
+  box-shadow: 0 0px 7px 0px rgba(19, 189, 138, 0.56), 0 0 10px 2px rgba(19, 189, 138, 0.2);
+}
+
+.btn-glow-info {
+  box-shadow: 0 0px 7px 0px rgba(45, 206, 227, 0.56), 0 0 10px 2px rgba(45, 206, 227, 0.2);
+}
+
+.btn-glow-warning {
+  box-shadow: 0 0px 7px 0px rgba(255, 151, 100, 0.56), 0 0 10px 2px rgba(255, 151, 100, 0.2);
+}
+
+.btn-glow-danger {
+  box-shadow: 0 0px 7px 0px rgba(255, 66, 92, 0.56), 0 0 10px 2px rgba(255, 66, 92, 0.2);
+}
+
+.btn-glow-light {
+  box-shadow: 0 0px 7px 0px rgba(228, 229, 230, 0.56), 0 0 10px 2px rgba(228, 229, 230, 0.2);
+}
+
+.btn-glow-dark {
+  box-shadow: 0 0px 7px 0px rgba(57, 70, 92, 0.56), 0 0 10px 2px rgba(57, 70, 92, 0.2);
+}
+
+/* Gradient */
+.btn-gradient-primary {
+  color: #fff;
+  background: linear-gradient(-45deg, #19BCBF, #149698);
+  border-color: #17afb1;
+}
+
+.btn-gradient-primary:hover {
+  color: #fff;
+  background-color: #159b9d;
+  border-color: #139092;
+}
+
+.btn-gradient-primary.disabled, .btn-gradient-primary:disabled {
+  color: #fff;
+  background-color: #19BCBF;
+  border-color: #19BCBF;
+}
+
+.btn-gradient-primary:not(:disabled):not(.disabled).active, .btn-gradient-primary:not(:disabled):not(.disabled):active, .show > .btn-gradient-primary.dropdown-toggle {
+  color: #fff;
+  background-color: #139092;
+  border-color: #128587;
+}
+
+.btn-gradient-secondary {
+  color: #fff;
+  background: linear-gradient(-45deg, #7E858E, #4b4f55);
+  border-color: #767d87;
+}
+
+.btn-gradient-secondary:hover {
+  color: #fff;
+  background-color: #6b727a;
+  border-color: #656c74;
+}
+
+.btn-gradient-secondary.disabled, .btn-gradient-secondary:disabled {
+  color: #fff;
+  background-color: #7E858E;
+  border-color: #7E858E;
+}
+
+.btn-gradient-secondary:not(:disabled):not(.disabled).active, .btn-gradient-secondary:not(:disabled):not(.disabled):active, .show > .btn-gradient-secondary.dropdown-toggle {
+  color: #fff;
+  background-color: #656c74;
+  border-color: #5f656d;
+}
+
+.btn-gradient-success {
+  color: #fff;
+  background: linear-gradient(-45deg, #13bd8a, #0f976e);
+  border-color: #12af80;
+}
+
+.btn-gradient-success:hover {
+  color: #fff;
+  background-color: #109a71;
+  border-color: #0e8f68;
+}
+
+.btn-gradient-success.disabled, .btn-gradient-success:disabled {
+  color: #fff;
+  background-color: #13bd8a;
+  border-color: #13bd8a;
+}
+
+.btn-gradient-success:not(:disabled):not(.disabled).active, .btn-gradient-success:not(:disabled):not(.disabled):active, .show > .btn-gradient-success.dropdown-toggle {
+  color: #fff;
+  background-color: #0e8f68;
+  border-color: #0d8360;
+}
+
+.btn-gradient-info {
+  color: #fff;
+  background: linear-gradient(-45deg, #2DCEE3, #24a4b5);
+  border-color: #20cbe1;
+}
+
+.btn-gradient-info:hover {
+  color: #fff;
+  background-color: #1cbace;
+  border-color: #1ab0c3;
+}
+
+.btn-gradient-info.disabled, .btn-gradient-info:disabled {
+  color: #fff;
+  background-color: #2DCEE3;
+  border-color: #2DCEE3;
+}
+
+.btn-gradient-info:not(:disabled):not(.disabled).active, .btn-gradient-info:not(:disabled):not(.disabled):active, .show > .btn-gradient-info.dropdown-toggle {
+  color: #fff;
+  background-color: #1ab0c3;
+  border-color: #19a5b8;
+}
+
+.btn-gradient-warning {
+  color: #fff;
+  background: linear-gradient(-45deg, #FF9764, #ff864b);
+  border-color: #ff8d55;
+}
+
+.btn-gradient-warning:hover {
+  color: #fff;
+  background-color: #ff7d3e;
+  border-color: #ff7531;
+}
+
+.btn-gradient-warning.disabled, .btn-gradient-warning:disabled {
+  color: #fff;
+  background-color: #FF9764;
+  border-color: #FF9764;
+}
+
+.btn-gradient-warning:not(:disabled):not(.disabled).active, .btn-gradient-warning:not(:disabled):not(.disabled):active, .show > .btn-gradient-warning.dropdown-toggle {
+  color: #fff;
+  background-color: #ff7531;
+  border-color: #ff6c24;
+}
+
+.btn-gradient-danger {
+  color: #fff;
+  background: linear-gradient(-45deg, #FF425C, #e53b52);
+  border-color: #ff334f;
+}
+
+.btn-gradient-danger:hover {
+  color: #fff;
+  background-color: #ff1c3b;
+  border-color: #ff0f30;
+}
+
+.btn-gradient-danger.disabled, .btn-gradient-danger:disabled {
+  color: #fff;
+  background-color: #FF425C;
+  border-color: #FF425C;
+}
+
+.btn-gradient-danger:not(:disabled):not(.disabled).active, .btn-gradient-danger:not(:disabled):not(.disabled):active, .show > .btn-gradient-danger.dropdown-toggle {
+  color: #fff;
+  background-color: #ff0f30;
+  border-color: #ff0225;
+}
+
+.btn-gradient-light {
+  color: #39465C;
+  background: linear-gradient(-45deg, #E4E5E6, #e6e7e8);
+  border-color: #dcdddf;
+}
+
+.btn-gradient-light:hover {
+  color: #39465C;
+  background-color: #d0d2d4;
+  border-color: #cacccd;
+}
+
+.btn-gradient-light.disabled, .btn-gradient-light:disabled {
+  color: #39465C;
+  background-color: #E4E5E6;
+  border-color: #E4E5E6;
+}
+
+.btn-gradient-light:not(:disabled):not(.disabled).active, .btn-gradient-light:not(:disabled):not(.disabled):active, .show > .btn-gradient-light.dropdown-toggle {
+  color: #39465C;
+  background-color: #cacccd;
+  border-color: #c3c5c7;
+}
+
+.btn-gradient-dark {
+  color: #fff;
+  background: linear-gradient(-45deg, #39465C, #37383a);
+  border-color: #333f53;
+}
+
+.btn-gradient-dark:hover {
+  color: #fff;
+  background-color: #2a3444;
+  border-color: #252e3d;
+}
+
+.btn-gradient-dark.disabled, .btn-gradient-dark:disabled {
+  color: #fff;
+  background-color: #39465C;
+  border-color: #39465C;
+}
+
+.btn-gradient-dark:not(:disabled):not(.disabled).active, .btn-gradient-dark:not(:disabled):not(.disabled):active, .show > .btn-gradient-dark.dropdown-toggle {
+  color: #fff;
+  background-color: #252e3d;
+  border-color: #212835;
+}
+
+/**====== Button css end ======**/
+/*====== Social button css starts ======*/
+.btn-facebook {
+  background: #3C5A99;
+  border-color: #3C5A99;
+  color: #fff;
+}
+
+.btn-facebook:hover, .btn-facebook:not(:disabled):not(.disabled).active, .btn-facebook:not(:disabled):not(.disabled):active, .show > .btn-facebook.dropdown-toggle {
+  color: #fff;
+  background: #4365ab;
+}
+
+.btn-twitter {
+  background: #42C0FB;
+  border-color: #42C0FB;
+  color: #fff;
+}
+
+.btn-twitter:hover, .btn-twitter:not(:disabled):not(.disabled).active, .btn-twitter:not(:disabled):not(.disabled):active, .show > .btn-twitter.dropdown-toggle {
+  color: #fff;
+  background: #5bc8fc;
+}
+
+.btn-dribbble {
+  background: #EC4A89;
+  border-color: #EC4A89;
+  color: #fff;
+}
+
+.btn-dribbble:hover, .btn-dribbble:not(:disabled):not(.disabled).active, .btn-dribbble:not(:disabled):not(.disabled):active, .show > .btn-dribbble.dropdown-toggle {
+  color: #fff;
+  background: #ee6198;
+}
+
+.btn-pinterest {
+  background: #BF2131;
+  border-color: #BF2131;
+  color: #fff;
+}
+
+.btn-pinterest:hover, .btn-pinterest:not(:disabled):not(.disabled).active, .btn-pinterest:not(:disabled):not(.disabled):active, .show > .btn-pinterest.dropdown-toggle {
+  color: #fff;
+  background: #d52537;
+}
+
+.btn-youtube {
+  background: #E0291D;
+  border-color: #E0291D;
+  color: #fff;
+}
+
+.btn-youtube:hover, .btn-youtube:not(:disabled):not(.disabled).active, .btn-youtube:not(:disabled):not(.disabled):active, .show > .btn-youtube.dropdown-toggle {
+  color: #fff;
+  background: #e43d32;
+}
+
+.btn-googleplus {
+  background: #C73E2E;
+  border-color: #C73E2E;
+  color: #fff;
+}
+
+.btn-googleplus:hover, .btn-googleplus:not(:disabled):not(.disabled).active, .btn-googleplus:not(:disabled):not(.disabled):active, .show > .btn-googleplus.dropdown-toggle {
+  color: #fff;
+  background: #d24c3c;
+}
+
+.btn-instagram {
+  background: #AA7C62;
+  border-color: #AA7C62;
+  color: #fff;
+}
+
+.btn-instagram:hover, .btn-instagram:not(:disabled):not(.disabled).active, .btn-instagram:not(:disabled):not(.disabled):active, .show > .btn-instagram.dropdown-toggle {
+  color: #fff;
+  background: #b38a73;
+}
+
+.btn-viber {
+  background: #7B519D;
+  border-color: #7B519D;
+  color: #fff;
+}
+
+.btn-viber:hover, .btn-viber:not(:disabled):not(.disabled).active, .btn-viber:not(:disabled):not(.disabled):active, .show > .btn-viber.dropdown-toggle {
+  color: #fff;
+  background: #885cab;
+}
+
+.btn-behance {
+  background: #0057ff;
+  border-color: #0057ff;
+  color: #fff;
+}
+
+.btn-behance:hover, .btn-behance:not(:disabled):not(.disabled).active, .btn-behance:not(:disabled):not(.disabled):active, .show > .btn-behance.dropdown-toggle {
+  color: #fff;
+  background: #1a68ff;
+}
+
+.btn-dropbox {
+  background: #3380FF;
+  border-color: #3380FF;
+  color: #fff;
+}
+
+.btn-dropbox:hover, .btn-dropbox:not(:disabled):not(.disabled).active, .btn-dropbox:not(:disabled):not(.disabled):active, .show > .btn-dropbox.dropdown-toggle {
+  color: #fff;
+  background: #4d90ff;
+}
+
+.btn-linkedin {
+  background: #0077B5;
+  border-color: #0077B5;
+  color: #fff;
+}
+
+.btn-linkedin:hover, .btn-linkedin:not(:disabled):not(.disabled).active, .btn-linkedin:not(:disabled):not(.disabled):active, .show > .btn-linkedin.dropdown-toggle {
+  color: #fff;
+  background: #0088cf;
+}
+
+/*====== Social button css end ======*/
+/*====== light badge css start ======*/
+.badge-light-primary {
+  background: rgba(25, 188, 191, 0.15);
+  color: #19BCBF;
+}
+
+.badge-light-primary:focus, .badge-light-primary:hover {
+  color: #19BCBF;
+}
+
+.badge-light-secondary {
+  background: rgba(126, 133, 142, 0.15);
+  color: #7E858E;
+}
+
+.badge-light-secondary:focus, .badge-light-secondary:hover {
+  color: #7E858E;
+}
+
+.badge-light-success {
+  background: rgba(19, 189, 138, 0.15);
+  color: #13bd8a;
+}
+
+.badge-light-success:focus, .badge-light-success:hover {
+  color: #13bd8a;
+}
+
+.badge-light-info {
+  background: rgba(45, 206, 227, 0.15);
+  color: #2DCEE3;
+}
+
+.badge-light-info:focus, .badge-light-info:hover {
+  color: #2DCEE3;
+}
+
+.badge-light-warning {
+  background: rgba(255, 151, 100, 0.15);
+  color: #FF9764;
+}
+
+.badge-light-warning:focus, .badge-light-warning:hover {
+  color: #FF9764;
+}
+
+.badge-light-danger {
+  background: rgba(255, 66, 92, 0.15);
+  color: #FF425C;
+}
+
+.badge-light-danger:focus, .badge-light-danger:hover {
+  color: #FF425C;
+}
+
+.badge-light-light {
+  background: rgba(228, 229, 230, 0.15);
+  color: #E4E5E6;
+}
+
+.badge-light-light:focus, .badge-light-light:hover {
+  color: #E4E5E6;
+}
+
+.badge-light-dark {
+  background: rgba(57, 70, 92, 0.15);
+  color: #39465C;
+}
+
+.badge-light-dark:focus, .badge-light-dark:hover {
+  color: #39465C;
+}
+
+/*====== light badge css end ======*/
+.bs-tooltip-top .tooltip-arrow::before,
+.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before {
+  margin-top: -5px;
+}
+
+.bs-tooltip-end .tooltip-arrow::before,
+.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before {
+  margin-right: -3px;
+}
+
+.bs-tooltip-bottom .tooltip-arrow::before,
+.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before {
+  margin-bottom: -5px;
+}
+
+.bs-tooltip-start .tooltip-arrow::before,
+.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before {
+  margin-left: -3px;
+}
+
+.radio-button {
+  opacity: 0;
+  position: absolute;
+}
+
+.swal-footer {
+  text-align: center;
+}
+
+/**  =====================
+      Alert css start
+==========================  **/
+/* Base styles */
+.alert {
+  position: relative;
+  --bs-alert-padding-x: 20px;
+  --bs-alert-padding-y: 15px;
+  border-radius: 2px;
+}
+
+.alert-inverse {
+  background-color: #111;
+  color: white;
+}
+
+/* Provide class for links that match alerts */
+.alert-link {
+  font-weight: 600;
+  transition: all 0.3s ease-in-out;
+}
+
+.alert-link:hover {
+  text-decoration: underline;
+}
+
+/* Alternate styles
+ Generate contextual modifier classes for colorizing the alert. */
+.alert-primary {
+  color: #28838f;
+  background: #d1f2f2;
+  border-color: #bfeced;
+}
+
+.alert-primary hr {
+  border-top-color: #abe6e7;
+}
+
+.alert-primary .alert-link {
+  color: #1d5e67;
+}
+
+.alert-primary .btn-close {
+  color: #28838f;
+  background: #d1f2f2;
+  border-color: #bfeced;
+}
+
+.alert-primary .btn-close hr {
+  border-top-color: #abe6e7;
+}
+
+.alert-primary .btn-close .alert-link {
+  color: #1d5e67;
+}
+
+.alert-secondary {
+  color: #5d6776;
+  background: #e5e7e8;
+  border-color: #dbdddf;
+}
+
+.alert-secondary hr {
+  border-top-color: #ced0d3;
+}
+
+.alert-secondary .alert-link {
+  color: #474e59;
+}
+
+.alert-secondary .btn-close {
+  color: #5d6776;
+  background: #e5e7e8;
+  border-color: #dbdddf;
+}
+
+.alert-secondary .btn-close hr {
+  border-top-color: #ced0d3;
+}
+
+.alert-secondary .btn-close .alert-link {
+  color: #474e59;
+}
+
+.alert-success {
+  color: #258474;
+  background: #d0f2e8;
+  border-color: #bdedde;
+}
+
+.alert-success hr {
+  border-top-color: #a9e8d4;
+}
+
+.alert-success .alert-link {
+  color: #1a5c51;
+}
+
+.alert-success .btn-close {
+  color: #258474;
+  background: #d0f2e8;
+  border-color: #bdedde;
+}
+
+.alert-success .btn-close hr {
+  border-top-color: #a9e8d4;
+}
+
+.alert-success .btn-close .alert-link {
+  color: #1a5c51;
+}
+
+.alert-info {
+  color: #338da2;
+  background: #d5f5f9;
+  border-color: #c4f1f7;
+}
+
+.alert-info hr {
+  border-top-color: #aeecf4;
+}
+
+.alert-info .alert-link {
+  color: #276b7b;
+}
+
+.alert-info .btn-close {
+  color: #338da2;
+  background: #d5f5f9;
+  border-color: #c4f1f7;
+}
+
+.alert-info .btn-close hr {
+  border-top-color: #aeecf4;
+}
+
+.alert-info .btn-close .alert-link {
+  color: #276b7b;
+}
+
+.alert-warning {
+  color: #a07060;
+  background: #ffeae0;
+  border-color: #ffe2d4;
+}
+
+.alert-warning hr {
+  border-top-color: #ffd1bb;
+}
+
+.alert-warning .alert-link {
+  color: #805a4d;
+}
+
+.alert-warning .btn-close {
+  color: #a07060;
+  background: #ffeae0;
+  border-color: #ffe2d4;
+}
+
+.alert-warning .btn-close hr {
+  border-top-color: #ffd1bb;
+}
+
+.alert-warning .btn-close .alert-link {
+  color: #805a4d;
+}
+
+.alert-danger {
+  color: #a0445c;
+  background: #ffd9de;
+  border-color: #ffcad1;
+}
+
+.alert-danger hr {
+  border-top-color: #ffb1bb;
+}
+
+.alert-danger .alert-link {
+  color: #7c3547;
+}
+
+.alert-danger .btn-close {
+  color: #a0445c;
+  background: #ffd9de;
+  border-color: #ffcad1;
+}
+
+.alert-danger .btn-close hr {
+  border-top-color: #ffb1bb;
+}
+
+.alert-danger .btn-close .alert-link {
+  color: #7c3547;
+}
+
+.alert-light {
+  color: #9299a4;
+  background: #fafafa;
+  border-color: #f7f8f8;
+}
+
+.alert-light hr {
+  border-top-color: #e9ecec;
+}
+
+.alert-light .alert-link {
+  color: #767f8d;
+}
+
+.alert-light .btn-close {
+  color: #9299a4;
+  background: #fafafa;
+  border-color: #f7f8f8;
+}
+
+.alert-light .btn-close hr {
+  border-top-color: #e9ecec;
+}
+
+.alert-light .btn-close .alert-link {
+  color: #767f8d;
+}
+
+.alert-dark {
+  color: #39465c;
+  background: #d7dade;
+  border-color: #c8cbd1;
+}
+
+.alert-dark hr {
+  border-top-color: #babec5;
+}
+
+.alert-dark .alert-link {
+  color: #252e3d;
+}
+
+.alert-dark .btn-close {
+  color: #39465c;
+  background: #d7dade;
+  border-color: #c8cbd1;
+}
+
+.alert-dark .btn-close hr {
+  border-top-color: #babec5;
+}
+
+.alert-dark .btn-close .alert-link {
+  color: #252e3d;
+}
+
+.alert-success hr {
+  opacity: 1;
+}
+
+/**====== Alert css end ======**/
+/**  =====================
+      Breadcrumbs & Pagination css start
+==========================  **/
+/* Breadcrumbs */
+.breadcrumb {
+  background-color: #eff3f6;
+  padding: 0.75rem 1rem;
+}
+
+.breadcrumb-item + .breadcrumb-item {
+  color: #19BCBF;
+}
+
+.breadcrumb-item + .breadcrumb-item::before {
+  /* content: $breadcrumb-divider; */
+}
+
+.breadcrumb-item.active {
+  color: #111;
+}
+
+/* pagination */
+.page-link {
+  color: #19BCBF;
+}
+
+.page-link:hover {
+  color: #17aaad;
+}
+
+.page-item.active .page-link {
+  color: #fff;
+  background-color: #19BCBF;
+  border-color: #19BCBF;
+}
+
+.page-item.disabled {
+  --bs-pagination-disabled-bg: transparent;
+  color: #6c757d;
+}
+
+/**====== Breadcrumbs & Pagination css end ======**/
+/**  =====================
+      Progress css start
+==========================  **/
+.progress {
+  overflow: visible;
+  --bs-progress-border-radius: 0;
+}
+
+.progress .progress-bar {
+  border-radius: var(--bs-border-radius);
+}
+
+.progress-stacked {
+  overflow: hidden;
+}
+
+.progress-stacked .progress:not(:first-child) .progress-bar {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.progress-stacked .progress:not(:last-child) .progress-bar {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.bg-primary-progress {
+  background-color: #19BCBF;
+}
+
+.bg-secondary-progress {
+  background-color: #7E858E;
+}
+
+.bg-success-progress {
+  background-color: #13bd8a;
+}
+
+.bg-info-progress {
+  background-color: #2DCEE3;
+}
+
+.bg-warning-progress {
+  background-color: #FF9764;
+}
+
+.bg-danger-progress {
+  background-color: #FF425C;
+}
+
+.bg-light-progress {
+  background-color: #E4E5E6;
+}
+
+.bg-dark-progress {
+  background-color: #39465C;
+}
+
+/**====== Progress css end ======**/
+/**  =====================
+      tooltip css start
+==========================  **/
+/**====== tooltip css end ======**/
+.nav {
+  display: flex;
+  flex-wrap: wrap;
+  padding-left: 0;
+  margin-bottom: 0;
+  list-style: none;
+}
+
+.nav-link {
+  display: block;
+  padding: 10px 24px;
+}
+
+.nav-link:hover {
+  text-decoration: none;
+}
+
+.nav-link.disabled {
+  opacity: 0.7;
+}
+
+/* ======================== Tabs =============================== */
+.nav-tabs {
+  border-bottom: none;
+}
+
+.nav-tabs .nav-link {
+  border: none;
+  color: #686c71;
+}
+
+.nav-tabs .nav-link:hover {
+  color: #19BCBF;
+}
+
+.nav-tabs .nav-link.disabled {
+  opacity: 0.7;
+}
+
+.nav-tabs .nav-item.show .nav-link,
+.nav-tabs .nav-link.active {
+  border: none;
+  color: #111;
+  box-shadow: 0px -1px 0 1px #e2e5e8;
+}
+
+/* =======================   Pills ================== */
+.nav-pills {
+  padding: 15px;
+  background-color: #fff;
+}
+
+.nav-pills .nav-link {
+  border-radius: 2px;
+}
+
+.nav-pills .nav-link.active,
+.nav-pills .show > .nav-link {
+  color: #fff;
+  background: linear-gradient(-45deg, #19BCBF, #149698);
+}
+
+/* ==================== Justified variants ===================*/
+.nav-fill .nav-item {
+  flex: 1 1 auto;
+  text-align: center;
+}
+
+.nav-justified .nav-item {
+  flex-basis: 0;
+  flex-grow: 1;
+  text-align: center;
+}
+
+/* Tabbable tabs */
+/* Hide tabbable panes to start, show them when .active */
+.tab-content {
+  padding: 35px 30px;
+  background: #fff;
+  box-shadow: 0 0 0 1px #e2e5e8;
+}
+
+.tab-content > .tab-pane {
+  display: none;
+}
+
+.tab-content > .active {
+  display: block;
+}
+
+.modal-content {
+  border-radius: 2px;
+}
+
+.modal-content .modal-header {
+  border-bottom: 1px solid #e2e5e8;
+}
+
+.modal-content .modal-footer {
+  border-top: 1px solid #e2e5e8;
+}
+
+.modal-content .modal-footer .btn {
+  margin-bottom: 0;
+}
+
+@media screen and (max-width: 480px) {
+  .modal-footer {
+    justify-content: center;
+  }
+}
+.font-color {
+  --bs-heading-color: black;
+}
+
+/**  =====================
+    28. Notification css start
+========================== **/
+.alert-dismissable .close,
+.alert-dismissible .close {
+  color: inherit;
+  text-shadow: none;
+}
+
+.notifier-container {
+  z-index: 1999;
+  width: 400px;
+  max-width: 98%;
+  top: 15px;
+}
+
+.notifier {
+  padding: 25px 25px;
+  border-radius: 6px;
+}
+
+.notifier .notifier-title {
+  font-size: 18px;
+  font-weight: 600;
+  margin-bottom: 2px;
+}
+
+.notifier .notifier-body {
+  font-size: 14px;
+}
+
+.notifier .notifier-img .img {
+  width: 40px;
+  height: 40px;
+}
+
+.notifier .notifier-close:focus, .notifier .notifier-close:hover {
+  color: #FF425C;
+  background: transparent;
+}
+
+.notifier.primary {
+  border-left-color: #19BCBF;
+}
+
+.notifier.secondary {
+  border-left-color: #7E858E;
+}
+
+.notifier.success {
+  border-left-color: #13bd8a;
+}
+
+.notifier.info {
+  border-left-color: #2DCEE3;
+}
+
+.notifier.warning {
+  border-left-color: #FF9764;
+}
+
+.notifier.danger {
+  border-left-color: #FF425C;
+}
+
+.notifier.light {
+  border-left-color: #E4E5E6;
+}
+
+.notifier.dark {
+  border-left-color: #39465C;
+}
+
+@media (max-width: 575px) {
+  .toast {
+    --bs-toast-max-width: 230px;
+  }
+}
+/**  =====================
+    28. Notification css end
+========================== **/
+/**  =====================
+    30. Rangeslider css start
+========================== **/
+.slider.slider-horizontal .slider-handle.triangle,
+.slider.slider-horizontal .slider-tick.triangle {
+  border-bottom-color: #19BCBF;
+}
+
+.slider.slider-vertical .slider-handle.triangle,
+.slider.slider-vertical .slider-tick.triangle {
+  border-left-color: #19BCBF;
+  border-right-color: #19BCBF;
+}
+
+.slider.slider-disabled .slider-handle {
+  background-image: linear-gradient(to bottom, #dfdfdf 0, #bebebe 100%);
+  background-repeat: repeat-x;
+}
+
+.slider.slider-disabled .slider-track {
+  background-image: linear-gradient(to bottom, #eff3f6 0, #eff3f6 100%);
+  background-repeat: repeat-x;
+}
+
+.slider-track {
+  background-image: linear-gradient(to bottom, #eff3f6 0, #eff3f6 100%);
+  background-repeat: repeat-x;
+}
+
+.slider-selection {
+  background-image: linear-gradient(to bottom, #6ce9ec 0, #6ce9ec 100%);
+  background-repeat: repeat-x;
+}
+
+.slider-selection.tick-slider-selection {
+  background-image: linear-gradient(to bottom, #55e6e9 0, #55e6e9 100%);
+  background-repeat: repeat-x;
+}
+
+.slider-handle {
+  background-color: #19BCBF;
+  background-image: linear-gradient(to bottom, #19BCBF 0, #19BCBF 100%);
+  background-repeat: repeat-x;
+}
+
+.slider-tick {
+  background-image: linear-gradient(to bottom, #f9f9f9 0, #f5f5f5 100%);
+  background-repeat: repeat-x;
+}
+
+.slider-tick.in-selection {
+  background-image: linear-gradient(to bottom, #55e6e9 0, #55e6e9 100%);
+  background-repeat: repeat-x;
+}
+
+.slider .tooltip {
+  position: absolute;
+}
+
+#ex7-enabled {
+  position: relative;
+  top: 4px;
+  height: 18px;
+  width: 18px;
+}
+
+#RGB {
+  height: 10px;
+  background: rgb(128, 128, 128);
+}
+
+#RC .slider-selection {
+  background: #ff8282;
+}
+
+#RC .slider-handle {
+  background: red;
+}
+
+#GC .slider-selection {
+  background: #478f3b;
+}
+
+#GC .slider-handle {
+  background: green;
+}
+
+#BC .slider-selection {
+  background: #8283ff;
+}
+
+#BC .slider-handle {
+  border-bottom-color: blue;
+}
+
+#B,
+#G,
+#R {
+  width: 300px;
+}
+
+.slider-handle.custom {
+  background: transparent none;
+}
+
+.slider-handle.custom::before {
+  line-height: 15px;
+  font-size: 28px;
+  content: "★";
+  color: #726204;
+}
+
+#slider12a .slider-track-high,
+#slider12c .slider-track-high {
+  background: #13bd8a;
+}
+
+#slider12b .slider-track-low {
+  background: #FF425C;
+}
+
+#slider12c .slider-track-low {
+  background: #FF425C;
+}
+
+#slider12c .slider-selection {
+  background: #FF9764;
+}
+
+#slider22 .slider-rangeHighlight {
+  background: #f70616;
+}
+
+#slider22 .slider-rangeHighlight.category1 {
+  background: #ff9900;
+}
+
+#slider22 .slider-rangeHighlight.category2 {
+  background: #99cc00;
+}
+
+.vtree a.vtree-leaf-label {
+  color: #eff3f6;
+}
+
+.vtree a.vtree-leaf-label:hover, .vtree a.vtree-leaf-label:focus, .vtree a.vtree-leaf-label:active {
+  color: #19BCBF;
+}
+
+/**  =====================
+    30. Rangeslider css end
+========================== **/
+/**  =====================
+      Chatting css start
+==========================  **/
+.header-chat,
+.header-user-list {
+  height: 100%;
+  width: 300px;
+  position: fixed;
+  top: 0;
+  right: -300px;
+  border-radius: 0;
+  z-index: 1030;
+  background-color: #fff;
+  transition: all 0.3s ease-in-out;
+}
+
+.header-chat .main-friend-cont,
+.header-user-list .main-friend-cont {
+  height: calc(100vh - 60px);
+  position: relative;
+}
+
+.header-chat .h-list-header + .h-list-body > .main-friend-cont,
+.header-user-list .h-list-header + .h-list-body > .main-friend-cont {
+  height: calc(100vh - 130px);
+  position: relative;
+}
+
+.header-chat .h-list-header,
+.header-user-list .h-list-header {
+  padding: 15px;
+  border-bottom: 1px solid #f1f1f1;
+}
+
+.header-chat.open,
+.header-user-list.open {
+  box-shadow: 0 1px 10px 0 rgba(69, 90, 100, 0.2);
+  right: 0;
+}
+
+.header-user-list .nav-tabs {
+  border-bottom: 1px solid #f1f1f1;
+}
+
+.header-user-list .nav-tabs .nav-item {
+  width: 33.3333333333%;
+  text-align: center;
+}
+
+.header-user-list .nav-tabs .nav-item a {
+  padding: 20px 0;
+  position: relative;
+  background-color: transparent;
+  background-image: linear-gradient(#19BCBF, #19BCBF);
+  background-size: 0 2px;
+  background-position: bottom;
+  background-repeat: no-repeat;
+  transition: all 0.3s ease-in-out;
+}
+
+.header-user-list .nav-tabs .nav-item a.active {
+  box-shadow: none;
+  background-size: 100% 2px;
+  color: #19BCBF;
+}
+
+.header-user-list .tab-content {
+  padding: 0;
+  box-shadow: none;
+}
+
+.header-user-list.open .h-close-text {
+  position: absolute;
+  top: 35px;
+  left: -30px;
+}
+
+.header-user-list.open .h-close-text i {
+  position: absolute;
+  top: 55px;
+  left: 7px;
+  font-size: 20px;
+  z-index: 1003;
+  color: #fff;
+}
+
+.header-user-list.open .h-close-text:after {
+  content: "";
+  z-index: 1001;
+  position: absolute;
+  top: 45px;
+  left: -2px;
+  background: #19BCBF;
+  width: 32px;
+  height: 40px;
+  box-shadow: -5px 2px 15px -4px rgba(69, 90, 100, 0.5);
+  border-radius: 20px 0 0 20px;
+}
+
+.header-user-list.open.msg-open:after {
+  color: rgba(25, 188, 191, 0.1);
+}
+
+.h-list-header .form-control:active, .h-list-header .form-control:focus, .h-list-header .form-control:hover {
+  box-shadow: none;
+  outline: none;
+}
+
+.h-list-body {
+  position: relative;
+}
+
+.h-list-body .userlist-box {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  padding: 15px 20px;
+  position: relative;
+}
+
+.h-list-body .userlist-box:after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 20px;
+  width: calc(100% - 40px);
+  height: 1px;
+  background: #f3f4f9;
+}
+
+.h-list-body .userlist-box.active {
+  background: #c6f7f8;
+}
+
+.h-list-body .userlist-box .media-left {
+  padding-right: 10px;
+}
+
+.h-list-body .userlist-box .media-object {
+  width: 50px;
+  display: inline-block;
+}
+
+.h-list-body .userlist-box .chat-header {
+  font-size: 14px;
+  font-weight: 600;
+  margin-bottom: 0;
+}
+
+.h-list-body .userlist-box .chat-header small {
+  margin-top: 5px;
+  font-size: 90%;
+}
+
+.h-list-body .userlist-box .live-status {
+  height: 25px;
+  width: 25px;
+  position: absolute;
+  top: 35px;
+  right: 20px;
+  border-radius: 100%;
+  color: #fff;
+  padding: 2px 0;
+  text-align: center;
+  background: #19BCBF;
+}
+
+.header-chat .h-list-header {
+  text-align: center;
+  position: relative;
+  background: linear-gradient(-45deg, #19BCBF, #149698);
+}
+
+.header-chat .h-list-header .h-back-user-list,
+.header-chat .h-list-header h6 {
+  color: #fff;
+}
+
+.header-chat .h-list-header h6 {
+  margin: 5px 0;
+  color: #fff;
+}
+
+.header-chat .h-list-header .h-back-user-list {
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  width: 40px;
+  justify-content: center;
+  font-size: 20px;
+}
+
+.header-chat .main-chat-cont {
+  height: calc(100vh - 166px);
+}
+
+.header-chat .h-list-body {
+  height: 100%;
+  background: #eff3f6;
+}
+
+.header-chat .h-list-footer {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  right: 0;
+  padding: 20px 15px;
+  z-index: 10;
+  background: #eff3f6;
+}
+
+.header-chat .h-list-footer .input-group {
+  background: #fff;
+  border: none;
+  display: inline-flex;
+  box-shadow: 0 5px 15px 0 rgba(62, 57, 107, 0.15);
+  padding: 7px;
+  border-radius: 20px;
+  width: calc(100% - 40px);
+}
+
+.header-chat .h-list-footer .input-group .form-control,
+.header-chat .h-list-footer .input-group .input-group-text {
+  background: transparent;
+  border: none;
+  border-radius: 0;
+  padding: 0;
+}
+
+.header-chat .h-list-footer .input-group .btn-send:active, .header-chat .h-list-footer .input-group .btn-send:focus, .header-chat .h-list-footer .input-group .btn-send:hover,
+.header-chat .h-list-footer .input-group .form-control:active,
+.header-chat .h-list-footer .input-group .form-control:focus,
+.header-chat .h-list-footer .input-group .form-control:hover {
+  outline: none;
+  box-shadow: none;
+}
+
+.header-chat .h-list-footer .input-group .btn-attach {
+  border-radius: 50%;
+  padding: 1px 4px;
+  margin-right: 5px;
+}
+
+.header-chat .h-list-footer .input-group .btn-attach > i {
+  margin-right: 0;
+}
+
+.header-chat .h-list-footer .input-group .btn-send {
+  border-radius: 50%;
+  padding: 6px 10px;
+  margin-left: 5px;
+  position: absolute;
+  right: -45px;
+  top: 2px;
+  z-index: 99;
+}
+
+.header-chat .h-list-footer .input-group .btn-send i {
+  margin-right: 0;
+}
+
+.header-chat .h-list-footer .input-group .btn-send .input-group-text {
+  color: #fff;
+}
+
+.header-chat .h-list-footer .input-group .form-control {
+  transition: all 0.3s ease-in-out;
+  width: 0;
+}
+
+.h-list-body .chat-messages {
+  padding-bottom: 20px;
+  padding-left: 15px;
+  padding-right: 15px;
+}
+
+.h-list-body .chat-messages .photo-table {
+  padding-right: 15px;
+}
+
+.h-list-body .chat-messages .photo-table img {
+  display: inline-block;
+  width: 45px;
+  margin-bottom: 5px;
+}
+
+.h-list-body .chat-messages .chat-menu-content > div,
+.h-list-body .chat-messages .chat-menu-reply > div {
+  position: relative;
+  overflow: visible;
+  display: inline-block;
+}
+
+.h-list-body .chat-messages .chat-menu-content > div .chat-cont,
+.h-list-body .chat-messages .chat-menu-reply > div .chat-cont {
+  padding: 8px 20px;
+  display: inline-block;
+}
+
+.h-list-body .chat-messages .chat-menu-content .chat-time,
+.h-list-body .chat-messages .chat-menu-reply .chat-time {
+  margin: 5px 24px 0 0;
+}
+
+.h-list-body .chat-messages .chat-menu-reply {
+  text-align: right;
+}
+
+.h-list-body .chat-messages .chat-menu-reply > div {
+  margin-top: 10px;
+}
+
+.h-list-body .chat-messages .chat-menu-reply > div p {
+  background: #fff;
+  border-radius: 3px;
+  margin-bottom: 4px;
+  margin-right: 25px;
+  box-shadow: 0 5px 15px 0 rgba(62, 57, 107, 0.15);
+}
+
+.h-list-body .chat-messages .chat-menu-reply > div:before {
+  content: "";
+  z-index: 1001;
+  transform: rotate(-45deg);
+  border: 6px solid transparent;
+  border-right-color: #fff;
+  border-bottom-color: #fff;
+  position: absolute;
+  bottom: 16px;
+  right: 19px;
+  box-shadow: 1px 5px 10px -3px rgba(62, 57, 107, 0.15);
+}
+
+.h-list-body .chat-messages .chat-menu-content > div {
+  margin-top: 10px;
+}
+
+.h-list-body .chat-messages .chat-menu-content > div p {
+  background: #19BCBF;
+  color: #fff;
+  border-radius: 3px;
+  margin-bottom: 4px;
+  box-shadow: 0 5px 15px 0 rgba(62, 57, 107, 0.15);
+}
+
+.h-list-body .chat-messages .chat-menu-content > div:before {
+  content: "";
+  z-index: 1001;
+  transform: rotate(-45deg);
+  border: 6px solid transparent;
+  border-left-color: #19BCBF;
+  border-top-color: #19BCBF;
+  position: absolute;
+  top: 12px;
+  left: -6px;
+  box-shadow: -4px 0 8px -5px rgba(62, 57, 107, 0.3);
+}
+
+/* massage page start */
+.msg-card .msg-user-list {
+  height: calc(100vh - 300px);
+}
+
+.msg-card .msg-user-chat {
+  background: #eff3f6;
+  height: calc(100vh - 330px);
+  padding: 25px 5px;
+}
+
+.msg-card .msg-block > .row > div:before {
+  content: "";
+  width: 1px;
+  height: 100%;
+  background: #f1f1f1;
+  position: absolute;
+  top: 0;
+}
+
+.msg-card .msg-block > .row > div:first-child:before {
+  right: 0;
+}
+
+.msg-card .msg-block > .row > div:last-child:before {
+  left: -1px;
+}
+
+.main-friend-chat {
+  padding-bottom: 15px;
+}
+
+@media screen and (max-width: 991px) {
+  .msg-card .msg-block > .row > div:before {
+    background: none;
+  }
+}
+.btn-grouping > .btn-icon {
+  height: 48px;
+}
+
+/* massage page end */
+/**====== Chat css end ======**/
+/**  =====================
+      Prism css start
+==========================  **/
+pre[class*=language-] code {
+  font-size: 14px;
+}
+
+pre[class*=language-] [class*=language-],
+pre[class*=language-] .language-markup {
+  background-color: transparent;
+  display: block;
+  padding: 10px 15px;
+}
+
+pre.line-numbers {
+  position: relative;
+  padding-left: 3.8em;
+  counter-reset: linenumber;
+}
+
+pre.line-numbers > code {
+  position: relative;
+}
+
+.line-numbers .line-numbers-rows {
+  position: absolute;
+  pointer-events: none;
+  top: 0;
+  font-size: 100%;
+  left: -3.8em;
+  width: 3em;
+  /* works for line-numbers below 1000 lines */
+  letter-spacing: -1px;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.line-numbers-rows > span {
+  pointer-events: none;
+  display: block;
+  counter-increment: linenumber;
+}
+
+.line-numbers-rows > span:before {
+  content: counter(linenumber);
+  display: block;
+  padding-right: 0.8em;
+  text-align: right;
+}
+
+div.code-toolbar {
+  position: relative;
+}
+
+div.code-toolbar > .toolbar {
+  position: absolute;
+  top: 0.3em;
+  right: 0.2em;
+  transition: opacity 0.3s ease-in-out;
+  opacity: 0;
+}
+
+div.code-toolbar:hover > .toolbar {
+  opacity: 1;
+}
+
+div.code-toolbar > .toolbar .toolbar-item {
+  display: inline-block;
+}
+
+div.code-toolbar > .toolbar a {
+  cursor: pointer;
+}
+
+div.code-toolbar > .toolbar button {
+  border: 0;
+  font: inherit;
+  line-height: normal;
+  overflow: visible;
+}
+
+div.code-toolbar > .toolbar a,
+div.code-toolbar > .toolbar button,
+div.code-toolbar > .toolbar span {
+  color: #bbb;
+  font-size: 0.8em;
+  padding: 0 0.5em;
+  background: #f5f2f0;
+  background: rgba(224, 224, 224, 0.2);
+  box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2);
+  border-radius: 0.5em;
+}
+
+div.code-toolbar > .toolbar a:focus,
+div.code-toolbar > .toolbar a:hover,
+div.code-toolbar > .toolbar button:focus,
+div.code-toolbar > .toolbar button:hover,
+div.code-toolbar > .toolbar span:focus,
+div.code-toolbar > .toolbar span:hover {
+  color: inherit;
+  text-decoration: none;
+}
+
+/**====== Prism css end ======**/
+/**  =====================
+      Toolbar css start
+==========================  **/
+.tool-bottom .tool-item:first-child,
+.tool-top .tool-item:first-child {
+  border-top-left-radius: 6px;
+  border-bottom-left-radius: 6px;
+}
+
+.tool-bottom .tool-item:last-child,
+.tool-top .tool-item:last-child {
+  border-top-right-radius: 6px;
+  border-bottom-right-radius: 6px;
+}
+
+.tool-left .tool-item:first-child,
+.tool-left .tool-item:first-child {
+  border-top-left-radius: 6px;
+  border-top-right-radius: 6px;
+}
+
+.tool-left .tool-item:last-child,
+.tool-left .tool-item:last-child {
+  border-bottom-left-radius: 6px;
+  border-bottom-right-radius: 6px;
+}
+
+.toolbar-primary .tool-item {
+  background: #19BCBF;
+}
+
+.toolbar-primary .tool-item.selected, .toolbar-primary .tool-item:hover {
+  background: #139092;
+}
+
+.toolbar-primary.tool-top .arrow {
+  border-color: #19BCBF transparent transparent;
+}
+
+.toolbar-primary.tool-bottom .arrow {
+  border-color: transparent transparent #19BCBF;
+}
+
+.toolbar-primary.tool-left .arrow {
+  border-color: transparent transparent transparent #19BCBF;
+}
+
+.toolbar-primary.tool-right .arrow {
+  border-color: transparent #19BCBF transparent transparent;
+}
+
+.btn-toolbar-primary.pressed {
+  background-color: #19BCBF;
+}
+
+.toolbar-warning .tool-item {
+  background: #FF9764;
+}
+
+.toolbar-warning .tool-item.selected, .toolbar-warning .tool-item:hover {
+  background: #ff7531;
+}
+
+.toolbar-warning.tool-top .arrow {
+  border-color: #FF9764 transparent transparent;
+}
+
+.toolbar-warning.tool-bottom .arrow {
+  border-color: transparent transparent #FF9764;
+}
+
+.toolbar-warning.tool-left .arrow {
+  border-color: transparent transparent transparent #FF9764;
+}
+
+.toolbar-warning.tool-right .arrow {
+  border-color: transparent #FF9764 transparent transparent;
+}
+
+.btn-toolbar-warning.pressed {
+  background-color: #FF9764;
+}
+
+.toolbar-light .tool-item {
+  background: #d6d6d6;
+}
+
+.toolbar-light .tool-item.selected, .toolbar-light .tool-item:hover {
+  background: #bdbdbd;
+}
+
+.toolbar-light.tool-top .arrow {
+  border-color: #d6d6d6 transparent transparent;
+}
+
+.toolbar-light.tool-bottom .arrow {
+  border-color: transparent transparent #d6d6d6;
+}
+
+.toolbar-light.tool-left .arrow {
+  border-color: transparent transparent transparent #d6d6d6;
+}
+
+.toolbar-light.tool-right .arrow {
+  border-color: transparent #d6d6d6 transparent transparent;
+}
+
+.btn-toolbar-light.pressed {
+  background-color: #d6d6d6;
+}
+
+.toolbar-danger .tool-item {
+  background: #FF425C;
+}
+
+.toolbar-danger .tool-item.selected, .toolbar-danger .tool-item:hover {
+  background: #ff0f30;
+}
+
+.toolbar-danger.tool-top .arrow {
+  border-color: #FF425C transparent transparent;
+}
+
+.toolbar-danger.tool-bottom .arrow {
+  border-color: transparent transparent #FF425C;
+}
+
+.toolbar-danger.tool-left .arrow {
+  border-color: transparent transparent transparent #FF425C;
+}
+
+.toolbar-danger.tool-right .arrow {
+  border-color: transparent #FF425C transparent transparent;
+}
+
+.btn-toolbar-danger.pressed {
+  background-color: #FF425C;
+}
+
+.toolbar-success .tool-item {
+  background: #13bd8a;
+}
+
+.toolbar-success .tool-item.selected, .toolbar-success .tool-item:hover {
+  background: #0e8f68;
+}
+
+.toolbar-success.tool-top .arrow {
+  border-color: #13bd8a transparent transparent;
+}
+
+.toolbar-success.tool-bottom .arrow {
+  border-color: transparent transparent #13bd8a;
+}
+
+.toolbar-success.tool-left .arrow {
+  border-color: transparent transparent transparent #13bd8a;
+}
+
+.toolbar-success.tool-right .arrow {
+  border-color: transparent #13bd8a transparent transparent;
+}
+
+.btn-toolbar-success.pressed {
+  background-color: #13bd8a;
+}
+
+.toolbar-dark .tool-item {
+  background: #39465C;
+}
+
+.toolbar-dark .tool-item.selected, .toolbar-dark .tool-item:hover {
+  background: #252e3d;
+}
+
+.toolbar-dark.tool-top .arrow {
+  border-color: #39465C transparent transparent;
+}
+
+.toolbar-dark.tool-bottom .arrow {
+  border-color: transparent transparent #39465C;
+}
+
+.toolbar-dark.tool-left .arrow {
+  border-color: transparent transparent transparent #39465C;
+}
+
+.toolbar-dark.tool-right .arrow {
+  border-color: transparent #39465C transparent transparent;
+}
+
+.btn-toolbar-dark.pressed {
+  background-color: #39465C;
+}
+
+.toolbar-info .tool-item {
+  background: #2DCEE3;
+}
+
+.toolbar-info .tool-item.selected, .toolbar-info .tool-item:hover {
+  background: #1ab0c3;
+}
+
+.toolbar-info.tool-top .arrow {
+  border-color: #2DCEE3 transparent transparent;
+}
+
+.toolbar-info.tool-bottom .arrow {
+  border-color: transparent transparent #2DCEE3;
+}
+
+.toolbar-info.tool-left .arrow {
+  border-color: transparent transparent transparent #2DCEE3;
+}
+
+.toolbar-info.tool-right .arrow {
+  border-color: transparent #2DCEE3 transparent transparent;
+}
+
+.btn-toolbar-info.pressed {
+  background-color: #2DCEE3;
+}
+
+/**====== Toolbar css end ======**/
+/**  =====================
+      Switches css start
+==========================  **/
+.switch input[type=checkbox] {
+  opacity: 0;
+  position: absolute;
+}
+
+.switch input[type=checkbox] + .cr {
+  position: relative;
+  display: inline-block;
+  transition: 0.4s ease;
+  height: 20px;
+  width: 35px;
+  border: 1px solid #e9eaec;
+  border-radius: 60px;
+  cursor: pointer;
+  z-index: 0;
+  top: 6px;
+}
+
+.switch input[type=checkbox] + .cr:after, .switch input[type=checkbox] + .cr:before {
+  content: "";
+  position: absolute;
+  display: block;
+  top: 0;
+  left: 0;
+}
+
+.switch input[type=checkbox] + .cr:before {
+  transition: 0.2s cubic-bezier(0.24, 0, 0.5, 1);
+  height: 20px;
+  width: 35px;
+  border-radius: 30px;
+}
+
+.switch input[type=checkbox] + .cr:after {
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 0 0 rgba(0, 0, 0, 0.04), 0 4px 9px rgba(0, 0, 0, 0.13), 0 3px 3px rgba(0, 0, 0, 0.05);
+  transition: 0.35s cubic-bezier(0.54, 1.6, 0.5, 1);
+  background: #f7f7f7;
+  height: 19px;
+  width: 19px;
+  border-radius: 60px;
+}
+
+.switch input[type=checkbox]:checked + .cr:before {
+  background: #19BCBF;
+  transition: width 0.2s cubic-bezier(0, 0, 0, 0.1);
+}
+
+.switch input[type=checkbox]:checked + .cr:after {
+  left: 16px;
+}
+
+.switch input[type=checkbox]:disabled + label {
+  opacity: 0.5;
+  filter: grayscale(0.4);
+  cursor: not-allowed;
+}
+
+.switch .switch-alignment {
+  top: 12px !important;
+}
+
+.switch.switch-primary input[type=checkbox]:checked + .cr:before {
+  background: #19BCBF;
+}
+
+.switch.switch-danger input[type=checkbox]:checked + .cr:before {
+  background: #FF425C;
+}
+
+.switch.switch-success input[type=checkbox]:checked + .cr:before {
+  background: #13bd8a;
+}
+
+.switch.switch-warning input[type=checkbox]:checked + .cr:before {
+  background: #FF9764;
+}
+
+.switch.switch-purple input[type=checkbox]:checked + .cr:before {
+  background: #463699;
+}
+
+.switch.switch-info input[type=checkbox]:checked + .cr:before {
+  background: #2DCEE3;
+}
+
+/**====== Switches css end ======**/
+/**  =====================
+      wizard css start
+==========================  **/
+/*  material wizard start */
+.wizard-container {
+  z-index: 3;
+}
+
+.wizard-container .wizard-navigation {
+  position: relative;
+}
+
+.wizard-card .moving-tab {
+  position: absolute;
+  text-align: center;
+  padding: 16px 12px;
+  font-size: 14px;
+  text-transform: uppercase;
+  -webkit-font-smoothing: subpixel-antialiased;
+  top: -6px;
+  left: 0;
+  border-radius: 4px;
+  color: #FFFFFF;
+  cursor: pointer;
+  font-weight: 500;
+}
+
+.wizard-card[data-color=wizard-primary] .moving-tab {
+  background-color: #19BCBF;
+  box-shadow: 0 16px 26px -10px rgba(25, 188, 191, 0.56), 0 4px 25px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(25, 188, 191, 0.2);
+}
+
+.wizard-card[data-color=wizard-danger] .moving-tab {
+  background-color: #FF425C;
+  box-shadow: 0 16px 26px -10px rgba(255, 66, 92, 0.56), 0 4px 25px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(255, 66, 92, 0.2);
+}
+
+.wizard-card[data-color=wizard-success] .moving-tab {
+  background-color: #13bd8a;
+  box-shadow: 0 16px 26px -10px rgba(19, 189, 138, 0.56), 0 4px 25px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(19, 189, 138, 0.2);
+}
+
+.wizard-card[data-color=wizard-warning] .moving-tab {
+  background-color: #FF9764;
+  box-shadow: 0 16px 26px -10px rgba(255, 151, 100, 0.56), 0 4px 25px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(255, 151, 100, 0.2);
+}
+
+.wizard-card[data-color=wizard-purple] .moving-tab {
+  background-color: #463699;
+  box-shadow: 0 16px 26px -10px rgba(70, 54, 153, 0.56), 0 4px 25px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(70, 54, 153, 0.2);
+}
+
+.wizard-card[data-color=wizard-info] .moving-tab {
+  background-color: #2DCEE3;
+  box-shadow: 0 16px 26px -10px rgba(45, 206, 227, 0.56), 0 4px 25px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(45, 206, 227, 0.2);
+}
+
+.wizard-card .wizard-footer .checkbox {
+  margin-top: 16px;
+}
+
+.wizard-card .disabled {
+  display: none;
+}
+
+.nav-pills > li + li {
+  margin-left: 0;
+}
+
+.nav-pills > li > a {
+  border: 0;
+  border-radius: 0;
+  line-height: 18px;
+  text-transform: uppercase;
+  font-size: 12px;
+  font-weight: 500;
+  min-width: 100px;
+  text-align: center;
+  color: #555555;
+  position: relative;
+  display: block;
+  padding: 11px 15px;
+}
+
+.nav-pills > li.active > a {
+  background-color: inherit;
+}
+
+.nav-pills > li.active > a:focus, .nav-pills > li.active > a:hover {
+  background-color: inherit;
+}
+
+.nav-pills > li > a:focus, .nav-pills > li > a:hover {
+  background-color: inherit;
+}
+
+.nav-pills > li i {
+  display: block;
+  font-size: 30px;
+  padding: 15px 0;
+}
+
+/* material wizard end */
+/* Smart wizard 4 start */
+.sw-theme-default {
+  box-shadow: none;
+}
+
+.sw-theme-default > ul.step-anchor > li a,
+.sw-theme-default > ul.step-anchor > li a > h6,
+.sw-theme-default > ul.step-anchor > li a:hover {
+  color: #e2e5e8;
+}
+
+.sw-theme-default > ul.step-anchor > li.done a > h6 {
+  color: initial;
+}
+
+.sw-theme-default > ul.step-anchor > li.active a,
+.sw-theme-default > ul.step-anchor > li.active a h6 {
+  color: #19BCBF;
+}
+
+.sw-theme-default > ul.step-anchor > li > a.nav-link:after {
+  background: #19BCBF;
+}
+
+.sw-theme-default > ul.step-anchor > li.done > a.nav-link:after {
+  background: #e2e5e8;
+}
+
+.sw-theme-default .step-anchor,
+.sw-theme-default .sw-container {
+  background: #fff;
+  box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.12);
+  box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.12);
+  box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.3);
+}
+
+.sw-theme-default .step-anchor {
+  margin-bottom: 30px;
+}
+
+.sw-theme-default .step-anchor li > a {
+  padding: 15px 25px;
+}
+
+.sw-theme-default .sw-container .step-content {
+  padding: 35px 30px;
+}
+
+.sw-theme-default .sw-toolbar {
+  padding: 10px;
+  background: transparent;
+}
+
+.sw-theme-default .step-content + .sw-toolbar {
+  padding-top: 0;
+}
+
+.sw-theme-arrows .sw-container, .sw-theme-circles .sw-container, .sw-theme-dots .sw-container {
+  background: #fff;
+  box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.3);
+}
+
+.sw-theme-arrows .sw-container .step-content, .sw-theme-circles .sw-container .step-content, .sw-theme-dots .sw-container .step-content {
+  padding: 35px 30px;
+}
+
+.sw-theme-arrows .sw-toolbar-bottom, .sw-theme-circles .sw-toolbar-bottom, .sw-theme-dots .sw-toolbar-bottom {
+  padding: 10px;
+}
+
+.sw-theme-arrows .step-anchor, .sw-theme-circles .step-anchor, .sw-theme-dots .step-anchor {
+  margin-bottom: 30px;
+}
+
+.sw-theme-dots > ul.step-anchor > li > a:after {
+  left: 42%;
+  bottom: 0;
+}
+
+@media screen and (max-width: 768px) {
+  .sw-theme-dots > ul.step-anchor > li > a:after {
+    top: -42px;
+    left: -40px;
+  }
+  .sw-theme-arrows > ul.step-anchor > li > a {
+    padding-right: 15px;
+  }
+}
+.sw-vertical-left,
+.sw-vertical-right {
+  display: flex;
+  flex-direction: row;
+}
+
+@media (min-width: 768px) {
+  .sw-vertical-left.sw-main,
+  .sw-vertical-right.sw-main {
+    flex-direction: row;
+  }
+  .sw-vertical-left .step-anchor,
+  .sw-vertical-right .step-anchor {
+    align-self: flex-start;
+    flex-direction: column;
+    min-width: 200px;
+  }
+  .sw-vertical-left .step-anchor li,
+  .sw-vertical-right .step-anchor li {
+    flex-grow: 0;
+  }
+}
+@media (max-width: 767px) {
+  .sw-vertical-left.sw-main,
+  .sw-vertical-right.sw-main {
+    flex-direction: column;
+  }
+}
+@media (min-width: 768px) {
+  .sw-vertical-left {
+    flex-direction: row-reverse;
+  }
+  .sw-vertical-left .sw-done-icon,
+  .sw-vertical-left .sw-icon,
+  .sw-vertical-left .sw-number {
+    left: 2rem;
+  }
+  .sw-vertical-left .step-anchor {
+    margin-right: 30px;
+  }
+}
+@media (min-width: 768px) {
+  .sw-vertical-right {
+    flex-direction: row-reverse;
+  }
+  .sw-vertical-right .sw-done-icon,
+  .sw-vertical-right .sw-icon,
+  .sw-vertical-right .sw-number {
+    right: 2rem;
+  }
+  .sw-vertical-right .step-anchor {
+    margin-left: 30px;
+  }
+}
+@media (max-width: 767px) {
+  .sw-vertical-right .step-anchor {
+    margin: 30px 0 0;
+  }
+}
+/*  Smart wizard 4 end */
+/**====== wizard css end ======**/
+/**  =====================
+      Chart css start
+==========================  **/
+.nvtooltip {
+  position: fixed !important;
+}
+
+.peity-chart + .peity {
+  width: 100%;
+  height: 250px;
+}
+
+/* Radial Chart Start */
+.radial-bar {
+  position: relative;
+  display: inline-block;
+  border-radius: 50%;
+  background-color: transparent;
+  margin-bottom: 20px;
+  box-sizing: content-box;
+  width: 80px;
+  height: 80px;
+  font-size: 18px;
+  background-clip: content-box;
+}
+
+.radial-bar:after {
+  display: inline-block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  border-radius: 50%;
+  text-align: center;
+  font-weight: 500;
+  color: #455a64;
+  width: 56px;
+  height: 56px;
+  margin-left: 12px;
+  margin-top: 12px;
+  line-height: 56px;
+  content: attr(data-label);
+  background-color: #fff;
+  z-index: 55;
+}
+
+.radial-bar > img {
+  display: inline-block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  border-radius: 50%;
+  text-align: center;
+  font-weight: 500;
+  color: #455a64;
+  width: 56px;
+  height: 56px;
+  margin-left: 12px;
+  margin-top: 12px;
+  line-height: 56px;
+}
+
+.radial-bar > img {
+  z-index: 102;
+}
+
+.radial-bar.radial-bar-0 {
+  background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(90deg, #13bd8a 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-5 {
+  background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(108deg, #13bd8a 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-10 {
+  background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(126deg, #13bd8a 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-15 {
+  background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(144deg, #13bd8a 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-20 {
+  background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(162deg, #13bd8a 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-25 {
+  background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(180deg, #13bd8a 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-30 {
+  background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(198deg, #13bd8a 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-35 {
+  background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(216deg, #13bd8a 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-40 {
+  background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(234deg, #13bd8a 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-45 {
+  background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(252deg, #13bd8a 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-50 {
+  background-image: linear-gradient(270deg, #13bd8a 50%, transparent 50%, transparent), linear-gradient(270deg, #13bd8a 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-55 {
+  background-image: linear-gradient(288deg, #13bd8a 50%, transparent 50%, transparent), linear-gradient(270deg, #13bd8a 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-60 {
+  background-image: linear-gradient(306deg, #13bd8a 50%, transparent 50%, transparent), linear-gradient(270deg, #13bd8a 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-65 {
+  background-image: linear-gradient(324deg, #13bd8a 50%, transparent 50%, transparent), linear-gradient(270deg, #13bd8a 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-70 {
+  background-image: linear-gradient(342deg, #13bd8a 50%, transparent 50%, transparent), linear-gradient(270deg, #13bd8a 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-75 {
+  background-image: linear-gradient(360deg, #13bd8a 50%, transparent 50%, transparent), linear-gradient(270deg, #13bd8a 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-80 {
+  background-image: linear-gradient(378deg, #13bd8a 50%, transparent 50%, transparent), linear-gradient(270deg, #13bd8a 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-85 {
+  background-image: linear-gradient(396deg, #13bd8a 50%, transparent 50%, transparent), linear-gradient(270deg, #13bd8a 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-90 {
+  background-image: linear-gradient(414deg, #13bd8a 50%, transparent 50%, transparent), linear-gradient(270deg, #13bd8a 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-95 {
+  background-image: linear-gradient(432deg, #13bd8a 50%, transparent 50%, transparent), linear-gradient(270deg, #13bd8a 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-100 {
+  background-image: linear-gradient(450deg, #13bd8a 50%, transparent 50%, transparent), linear-gradient(270deg, #13bd8a 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-primary.radial-bar-0 {
+  background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(90deg, #19BCBF 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-primary.radial-bar-5 {
+  background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(108deg, #19BCBF 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-primary.radial-bar-10 {
+  background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(126deg, #19BCBF 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-primary.radial-bar-15 {
+  background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(144deg, #19BCBF 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-primary.radial-bar-20 {
+  background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(162deg, #19BCBF 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-primary.radial-bar-25 {
+  background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(180deg, #19BCBF 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-primary.radial-bar-30 {
+  background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(198deg, #19BCBF 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-primary.radial-bar-35 {
+  background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(216deg, #19BCBF 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-primary.radial-bar-40 {
+  background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(234deg, #19BCBF 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-primary.radial-bar-45 {
+  background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(252deg, #19BCBF 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-primary.radial-bar-50 {
+  background-image: linear-gradient(270deg, #19BCBF 50%, transparent 50%, transparent), linear-gradient(270deg, #19BCBF 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-primary.radial-bar-55 {
+  background-image: linear-gradient(288deg, #19BCBF 50%, transparent 50%, transparent), linear-gradient(270deg, #19BCBF 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-primary.radial-bar-60 {
+  background-image: linear-gradient(306deg, #19BCBF 50%, transparent 50%, transparent), linear-gradient(270deg, #19BCBF 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-primary.radial-bar-65 {
+  background-image: linear-gradient(324deg, #19BCBF 50%, transparent 50%, transparent), linear-gradient(270deg, #19BCBF 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-primary.radial-bar-70 {
+  background-image: linear-gradient(342deg, #19BCBF 50%, transparent 50%, transparent), linear-gradient(270deg, #19BCBF 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-primary.radial-bar-75 {
+  background-image: linear-gradient(360deg, #19BCBF 50%, transparent 50%, transparent), linear-gradient(270deg, #19BCBF 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-primary.radial-bar-80 {
+  background-image: linear-gradient(378deg, #19BCBF 50%, transparent 50%, transparent), linear-gradient(270deg, #19BCBF 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-primary.radial-bar-85 {
+  background-image: linear-gradient(396deg, #19BCBF 50%, transparent 50%, transparent), linear-gradient(270deg, #19BCBF 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-primary.radial-bar-90 {
+  background-image: linear-gradient(414deg, #19BCBF 50%, transparent 50%, transparent), linear-gradient(270deg, #19BCBF 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-primary.radial-bar-95 {
+  background-image: linear-gradient(432deg, #19BCBF 50%, transparent 50%, transparent), linear-gradient(270deg, #19BCBF 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-primary.radial-bar-100 {
+  background-image: linear-gradient(450deg, #19BCBF 50%, transparent 50%, transparent), linear-gradient(270deg, #19BCBF 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-danger.radial-bar-0 {
+  background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(90deg, #FF425C 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-danger.radial-bar-5 {
+  background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(108deg, #FF425C 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-danger.radial-bar-10 {
+  background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(126deg, #FF425C 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-danger.radial-bar-15 {
+  background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(144deg, #FF425C 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-danger.radial-bar-20 {
+  background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(162deg, #FF425C 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-danger.radial-bar-25 {
+  background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(180deg, #FF425C 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-danger.radial-bar-30 {
+  background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(198deg, #FF425C 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-danger.radial-bar-35 {
+  background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(216deg, #FF425C 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-danger.radial-bar-40 {
+  background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(234deg, #FF425C 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-danger.radial-bar-45 {
+  background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(252deg, #FF425C 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-danger.radial-bar-50 {
+  background-image: linear-gradient(270deg, #FF425C 50%, transparent 50%, transparent), linear-gradient(270deg, #FF425C 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-danger.radial-bar-55 {
+  background-image: linear-gradient(288deg, #FF425C 50%, transparent 50%, transparent), linear-gradient(270deg, #FF425C 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-danger.radial-bar-60 {
+  background-image: linear-gradient(306deg, #FF425C 50%, transparent 50%, transparent), linear-gradient(270deg, #FF425C 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-danger.radial-bar-65 {
+  background-image: linear-gradient(324deg, #FF425C 50%, transparent 50%, transparent), linear-gradient(270deg, #FF425C 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-danger.radial-bar-70 {
+  background-image: linear-gradient(342deg, #FF425C 50%, transparent 50%, transparent), linear-gradient(270deg, #FF425C 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-danger.radial-bar-75 {
+  background-image: linear-gradient(360deg, #FF425C 50%, transparent 50%, transparent), linear-gradient(270deg, #FF425C 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-danger.radial-bar-80 {
+  background-image: linear-gradient(378deg, #FF425C 50%, transparent 50%, transparent), linear-gradient(270deg, #FF425C 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-danger.radial-bar-85 {
+  background-image: linear-gradient(396deg, #FF425C 50%, transparent 50%, transparent), linear-gradient(270deg, #FF425C 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-danger.radial-bar-90 {
+  background-image: linear-gradient(414deg, #FF425C 50%, transparent 50%, transparent), linear-gradient(270deg, #FF425C 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-danger.radial-bar-95 {
+  background-image: linear-gradient(432deg, #FF425C 50%, transparent 50%, transparent), linear-gradient(270deg, #FF425C 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-danger.radial-bar-100 {
+  background-image: linear-gradient(450deg, #FF425C 50%, transparent 50%, transparent), linear-gradient(270deg, #FF425C 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-success.radial-bar-0 {
+  background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(90deg, #13bd8a 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-success.radial-bar-5 {
+  background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(108deg, #13bd8a 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-success.radial-bar-10 {
+  background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(126deg, #13bd8a 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-success.radial-bar-15 {
+  background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(144deg, #13bd8a 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-success.radial-bar-20 {
+  background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(162deg, #13bd8a 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-success.radial-bar-25 {
+  background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(180deg, #13bd8a 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-success.radial-bar-30 {
+  background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(198deg, #13bd8a 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-success.radial-bar-35 {
+  background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(216deg, #13bd8a 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-success.radial-bar-40 {
+  background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(234deg, #13bd8a 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-success.radial-bar-45 {
+  background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(252deg, #13bd8a 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-success.radial-bar-50 {
+  background-image: linear-gradient(270deg, #13bd8a 50%, transparent 50%, transparent), linear-gradient(270deg, #13bd8a 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-success.radial-bar-55 {
+  background-image: linear-gradient(288deg, #13bd8a 50%, transparent 50%, transparent), linear-gradient(270deg, #13bd8a 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-success.radial-bar-60 {
+  background-image: linear-gradient(306deg, #13bd8a 50%, transparent 50%, transparent), linear-gradient(270deg, #13bd8a 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-success.radial-bar-65 {
+  background-image: linear-gradient(324deg, #13bd8a 50%, transparent 50%, transparent), linear-gradient(270deg, #13bd8a 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-success.radial-bar-70 {
+  background-image: linear-gradient(342deg, #13bd8a 50%, transparent 50%, transparent), linear-gradient(270deg, #13bd8a 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-success.radial-bar-75 {
+  background-image: linear-gradient(360deg, #13bd8a 50%, transparent 50%, transparent), linear-gradient(270deg, #13bd8a 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-success.radial-bar-80 {
+  background-image: linear-gradient(378deg, #13bd8a 50%, transparent 50%, transparent), linear-gradient(270deg, #13bd8a 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-success.radial-bar-85 {
+  background-image: linear-gradient(396deg, #13bd8a 50%, transparent 50%, transparent), linear-gradient(270deg, #13bd8a 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-success.radial-bar-90 {
+  background-image: linear-gradient(414deg, #13bd8a 50%, transparent 50%, transparent), linear-gradient(270deg, #13bd8a 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-success.radial-bar-95 {
+  background-image: linear-gradient(432deg, #13bd8a 50%, transparent 50%, transparent), linear-gradient(270deg, #13bd8a 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-success.radial-bar-100 {
+  background-image: linear-gradient(450deg, #13bd8a 50%, transparent 50%, transparent), linear-gradient(270deg, #13bd8a 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-warning.radial-bar-0 {
+  background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(90deg, #FF9764 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-warning.radial-bar-5 {
+  background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(108deg, #FF9764 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-warning.radial-bar-10 {
+  background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(126deg, #FF9764 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-warning.radial-bar-15 {
+  background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(144deg, #FF9764 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-warning.radial-bar-20 {
+  background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(162deg, #FF9764 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-warning.radial-bar-25 {
+  background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(180deg, #FF9764 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-warning.radial-bar-30 {
+  background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(198deg, #FF9764 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-warning.radial-bar-35 {
+  background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(216deg, #FF9764 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-warning.radial-bar-40 {
+  background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(234deg, #FF9764 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-warning.radial-bar-45 {
+  background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(252deg, #FF9764 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-warning.radial-bar-50 {
+  background-image: linear-gradient(270deg, #FF9764 50%, transparent 50%, transparent), linear-gradient(270deg, #FF9764 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-warning.radial-bar-55 {
+  background-image: linear-gradient(288deg, #FF9764 50%, transparent 50%, transparent), linear-gradient(270deg, #FF9764 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-warning.radial-bar-60 {
+  background-image: linear-gradient(306deg, #FF9764 50%, transparent 50%, transparent), linear-gradient(270deg, #FF9764 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-warning.radial-bar-65 {
+  background-image: linear-gradient(324deg, #FF9764 50%, transparent 50%, transparent), linear-gradient(270deg, #FF9764 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-warning.radial-bar-70 {
+  background-image: linear-gradient(342deg, #FF9764 50%, transparent 50%, transparent), linear-gradient(270deg, #FF9764 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-warning.radial-bar-75 {
+  background-image: linear-gradient(360deg, #FF9764 50%, transparent 50%, transparent), linear-gradient(270deg, #FF9764 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-warning.radial-bar-80 {
+  background-image: linear-gradient(378deg, #FF9764 50%, transparent 50%, transparent), linear-gradient(270deg, #FF9764 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-warning.radial-bar-85 {
+  background-image: linear-gradient(396deg, #FF9764 50%, transparent 50%, transparent), linear-gradient(270deg, #FF9764 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-warning.radial-bar-90 {
+  background-image: linear-gradient(414deg, #FF9764 50%, transparent 50%, transparent), linear-gradient(270deg, #FF9764 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-warning.radial-bar-95 {
+  background-image: linear-gradient(432deg, #FF9764 50%, transparent 50%, transparent), linear-gradient(270deg, #FF9764 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-warning.radial-bar-100 {
+  background-image: linear-gradient(450deg, #FF9764 50%, transparent 50%, transparent), linear-gradient(270deg, #FF9764 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-purple.radial-bar-0 {
+  background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(90deg, #463699 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-purple.radial-bar-5 {
+  background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(108deg, #463699 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-purple.radial-bar-10 {
+  background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(126deg, #463699 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-purple.radial-bar-15 {
+  background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(144deg, #463699 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-purple.radial-bar-20 {
+  background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(162deg, #463699 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-purple.radial-bar-25 {
+  background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(180deg, #463699 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-purple.radial-bar-30 {
+  background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(198deg, #463699 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-purple.radial-bar-35 {
+  background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(216deg, #463699 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-purple.radial-bar-40 {
+  background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(234deg, #463699 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-purple.radial-bar-45 {
+  background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(252deg, #463699 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-purple.radial-bar-50 {
+  background-image: linear-gradient(270deg, #463699 50%, transparent 50%, transparent), linear-gradient(270deg, #463699 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-purple.radial-bar-55 {
+  background-image: linear-gradient(288deg, #463699 50%, transparent 50%, transparent), linear-gradient(270deg, #463699 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-purple.radial-bar-60 {
+  background-image: linear-gradient(306deg, #463699 50%, transparent 50%, transparent), linear-gradient(270deg, #463699 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-purple.radial-bar-65 {
+  background-image: linear-gradient(324deg, #463699 50%, transparent 50%, transparent), linear-gradient(270deg, #463699 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-purple.radial-bar-70 {
+  background-image: linear-gradient(342deg, #463699 50%, transparent 50%, transparent), linear-gradient(270deg, #463699 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-purple.radial-bar-75 {
+  background-image: linear-gradient(360deg, #463699 50%, transparent 50%, transparent), linear-gradient(270deg, #463699 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-purple.radial-bar-80 {
+  background-image: linear-gradient(378deg, #463699 50%, transparent 50%, transparent), linear-gradient(270deg, #463699 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-purple.radial-bar-85 {
+  background-image: linear-gradient(396deg, #463699 50%, transparent 50%, transparent), linear-gradient(270deg, #463699 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-purple.radial-bar-90 {
+  background-image: linear-gradient(414deg, #463699 50%, transparent 50%, transparent), linear-gradient(270deg, #463699 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-purple.radial-bar-95 {
+  background-image: linear-gradient(432deg, #463699 50%, transparent 50%, transparent), linear-gradient(270deg, #463699 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-purple.radial-bar-100 {
+  background-image: linear-gradient(450deg, #463699 50%, transparent 50%, transparent), linear-gradient(270deg, #463699 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-info.radial-bar-0 {
+  background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(90deg, #2DCEE3 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-info.radial-bar-5 {
+  background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(108deg, #2DCEE3 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-info.radial-bar-10 {
+  background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(126deg, #2DCEE3 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-info.radial-bar-15 {
+  background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(144deg, #2DCEE3 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-info.radial-bar-20 {
+  background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(162deg, #2DCEE3 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-info.radial-bar-25 {
+  background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(180deg, #2DCEE3 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-info.radial-bar-30 {
+  background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(198deg, #2DCEE3 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-info.radial-bar-35 {
+  background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(216deg, #2DCEE3 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-info.radial-bar-40 {
+  background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(234deg, #2DCEE3 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-info.radial-bar-45 {
+  background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(252deg, #2DCEE3 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-info.radial-bar-50 {
+  background-image: linear-gradient(270deg, #2DCEE3 50%, transparent 50%, transparent), linear-gradient(270deg, #2DCEE3 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-info.radial-bar-55 {
+  background-image: linear-gradient(288deg, #2DCEE3 50%, transparent 50%, transparent), linear-gradient(270deg, #2DCEE3 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-info.radial-bar-60 {
+  background-image: linear-gradient(306deg, #2DCEE3 50%, transparent 50%, transparent), linear-gradient(270deg, #2DCEE3 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-info.radial-bar-65 {
+  background-image: linear-gradient(324deg, #2DCEE3 50%, transparent 50%, transparent), linear-gradient(270deg, #2DCEE3 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-info.radial-bar-70 {
+  background-image: linear-gradient(342deg, #2DCEE3 50%, transparent 50%, transparent), linear-gradient(270deg, #2DCEE3 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-info.radial-bar-75 {
+  background-image: linear-gradient(360deg, #2DCEE3 50%, transparent 50%, transparent), linear-gradient(270deg, #2DCEE3 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-info.radial-bar-80 {
+  background-image: linear-gradient(378deg, #2DCEE3 50%, transparent 50%, transparent), linear-gradient(270deg, #2DCEE3 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-info.radial-bar-85 {
+  background-image: linear-gradient(396deg, #2DCEE3 50%, transparent 50%, transparent), linear-gradient(270deg, #2DCEE3 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-info.radial-bar-90 {
+  background-image: linear-gradient(414deg, #2DCEE3 50%, transparent 50%, transparent), linear-gradient(270deg, #2DCEE3 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-info.radial-bar-95 {
+  background-image: linear-gradient(432deg, #2DCEE3 50%, transparent 50%, transparent), linear-gradient(270deg, #2DCEE3 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar.radial-bar-info.radial-bar-100 {
+  background-image: linear-gradient(450deg, #2DCEE3 50%, transparent 50%, transparent), linear-gradient(270deg, #2DCEE3 50%, #d6d6d6 50%, #d6d6d6);
+}
+
+.radial-bar-lg {
+  width: 100px;
+  height: 100px;
+  font-size: 20px;
+}
+
+.radial-bar-lg > img, .radial-bar-lg:after {
+  width: 70px;
+  height: 70px;
+  margin-left: 15px;
+  margin-top: 15px;
+  line-height: 70px;
+}
+
+.radial-bar-sm {
+  width: 60px;
+  height: 60px;
+  font-size: 12px;
+}
+
+.radial-bar-sm > img, .radial-bar-sm:after {
+  width: 40px;
+  height: 40px;
+  margin-left: 10px;
+  margin-top: 10px;
+  line-height: 42px;
+}
+
+.radial-bar-xs {
+  width: 35px;
+  height: 35px;
+  font-size: 10px;
+}
+
+.radial-bar-xs > img, .radial-bar-xs:after {
+  width: 25px;
+  height: 25px;
+  margin-left: 5.5px;
+  margin-top: 4.5px;
+  line-height: 25px;
+}
+
+/* Radial Chart End */
+/**====== Chart css end ======**/
+/**  =====================
+      Icon layouts css start
+==========================  **/
+.i-main .i-block {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 70px;
+  height: 70px;
+  margin: 5px;
+  border: 1px solid #f1f1f1;
+  position: relative;
+  cursor: pointer;
+}
+
+.i-main .i-block i {
+  font-size: 30px;
+  color: #686c71;
+}
+
+.i-main .i-block label {
+  margin-bottom: 0;
+  display: none;
+}
+
+.i-main .i-block span.ic-badge {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+}
+
+.i-main .i-block .flag-icon-background {
+  width: 40px;
+  height: 40px;
+}
+
+/**====== Icon layouts css end ======**/
+/**  =====================
+      Calendar css start
+==========================  **/
+.external-events .fc-event {
+  color: #fff;
+  cursor: move;
+  padding: 5px 18px;
+  margin-top: 5px;
+  background: #19BCBF;
+  border-color: #19BCBF;
+}
+
+.calendar a:not([href]):not([tabindex]), .calendar a:not([href]):not([tabindex]):focus, .calendar a:not([href]):not([tabindex]):hover {
+  color: #fff;
+}
+
+.calendar .fc-event,
+.calendar .fc-event:hover {
+  color: #fff;
+  cursor: move;
+  padding: 5px 18px;
+  margin-top: 2px;
+  background: #19BCBF;
+  border-color: #19BCBF;
+}
+
+/**====== Calendar css end ======**/
+/**  =====================
+      File Upload css start
+==========================  **/
+.dropzone {
+  min-height: 150px;
+  border: 1px solid rgba(42, 42, 42, 0.05);
+  background: rgba(204, 204, 204, 0.15);
+  padding: 20px;
+  border-radius: 5px;
+  box-shadow: inset 0 0 5px 0 rgba(43, 43, 43, 0.1);
+}
+
+.dropzone.dz-clickable {
+  cursor: pointer;
+}
+
+.dropzone.dz-clickable * {
+  cursor: default;
+}
+
+.dropzone.dz-clickable .dz-message {
+  cursor: pointer;
+}
+
+.dropzone.dz-clickable .dz-message * {
+  cursor: pointer;
+}
+
+.dropzone.dz-started .dz-message {
+  display: none;
+}
+
+.dropzone.dz-drag-hover {
+  border-style: solid;
+}
+
+.dropzone.dz-drag-hover .dz-message {
+  opacity: 0.5;
+}
+
+.dropzone .dz-message {
+  text-align: center;
+  margin: 4em 0;
+  color: #888;
+  font-size: 18px;
+}
+
+.dropzone .dz-preview {
+  position: relative;
+  display: inline-block;
+  vertical-align: top;
+  margin: 0.5rem;
+  min-height: 100px;
+  box-shadow: 0 13px 6px -8px rgba(0, 0, 0, 0.3), 0 0 4px 0 rgba(0, 0, 0, 0.3);
+  border-radius: 5px;
+}
+
+.dropzone .dz-preview:hover {
+  z-index: 1000;
+}
+
+.dropzone .dz-preview:hover .dz-details {
+  opacity: 1;
+}
+
+.dropzone .dz-preview.dz-file-preview .dz-image {
+  border-radius: 5px;
+  background: #999;
+  background: linear-gradient(to bottom, #eee, #ddd);
+}
+
+.dropzone .dz-preview.dz-file-preview .dz-details {
+  opacity: 1;
+}
+
+.dropzone .dz-preview.dz-image-preview {
+  background: white;
+}
+
+.dropzone .dz-preview.dz-image-preview .dz-details {
+  transition: opacity 0.2s linear;
+}
+
+.dropzone .dz-preview .dz-remove {
+  font-size: 14px;
+  text-align: center;
+  display: block;
+  cursor: pointer;
+  border: none;
+}
+
+.dropzone .dz-preview .dz-remove:hover {
+  text-decoration: underline;
+}
+
+.dropzone .dz-preview:hover .dz-details {
+  opacity: 1;
+}
+
+.dropzone .dz-preview .dz-details {
+  z-index: 20;
+  position: absolute;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  font-size: 13px;
+  min-width: 100%;
+  max-width: 100%;
+  padding: 2em 1em;
+  text-align: center;
+  color: rgba(0, 0, 0, 0.9);
+  line-height: 150%;
+}
+
+.dropzone .dz-preview .dz-details .dz-size {
+  margin-bottom: 1em;
+  font-size: 16px;
+}
+
+.dropzone .dz-preview .dz-details .dz-filename {
+  white-space: nowrap;
+}
+
+.dropzone .dz-preview .dz-details .dz-filename:hover span {
+  border: 1px solid rgba(200, 200, 200, 0.8);
+  background-color: rgba(255, 255, 255, 0.8);
+}
+
+.dropzone .dz-preview .dz-details .dz-filename:not(:hover) {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.dropzone .dz-preview .dz-details .dz-filename:not(:hover) span {
+  border: 1px solid transparent;
+}
+
+.dropzone .dz-preview .dz-details .dz-filename span {
+  background-color: rgba(255, 255, 255, 0.4);
+  padding: 0 0.4em;
+  border-radius: 3px;
+}
+
+.dropzone .dz-preview .dz-details .dz-size span {
+  background-color: rgba(255, 255, 255, 0.4);
+  padding: 0 0.4em;
+  border-radius: 3px;
+}
+
+.dropzone .dz-preview:hover .dz-image img {
+  transform: scale(1.05, 1.05);
+  filter: blur(8px);
+}
+
+.dropzone .dz-preview .dz-image {
+  border-radius: 5px;
+  overflow: hidden;
+  width: 120px;
+  height: 120px;
+  position: relative;
+  display: block;
+  z-index: 10;
+}
+
+.dropzone .dz-preview .dz-image img {
+  display: block;
+  display: block;
+  padding: 4px;
+  width: 100%;
+}
+
+.dropzone .dz-preview.dz-success .dz-success-mark {
+  -webkit-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
+  animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
+}
+
+.dropzone .dz-preview.dz-error .dz-error-mark {
+  opacity: 1;
+  -webkit-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
+  animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
+}
+
+.dropzone .dz-preview .dz-error-mark,
+.dropzone .dz-preview .dz-success-mark {
+  pointer-events: none;
+  opacity: 0;
+  z-index: 500;
+  position: absolute;
+  display: block;
+  top: 50%;
+  left: 50%;
+  margin-left: -27px;
+  margin-top: -27px;
+}
+
+.dropzone .dz-preview .dz-error-mark svg,
+.dropzone .dz-preview .dz-success-mark svg {
+  display: block;
+  width: 54px;
+  height: 54px;
+}
+
+.dropzone .dz-preview.dz-processing .dz-progress {
+  opacity: 1;
+  transition: all 0.2s linear;
+}
+
+.dropzone .dz-preview.dz-complete .dz-progress {
+  opacity: 0;
+  transition: opacity 0.4s ease-in;
+}
+
+.dropzone .dz-preview:not(.dz-processing) .dz-progress {
+  -webkit-animation: pulse 6s ease infinite;
+  animation: pulse 6s ease infinite;
+}
+
+.dropzone .dz-preview .dz-progress {
+  opacity: 1;
+  z-index: 1000;
+  pointer-events: none;
+  position: absolute;
+  height: 16px;
+  left: 50%;
+  top: 50%;
+  margin-top: -8px;
+  width: 80px;
+  margin-left: -40px;
+  background: rgba(255, 255, 255, 0.9);
+  -webkit-transform: scale(1);
+  border-radius: 5px;
+  overflow: hidden;
+}
+
+.dropzone .dz-preview .dz-progress .dz-upload {
+  background: #333;
+  background: linear-gradient(to bottom, #666, #444);
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: 0;
+  transition: width 300ms ease-in-out;
+}
+
+.dropzone .dz-preview.dz-error .dz-error-message {
+  display: block;
+}
+
+.dropzone .dz-preview.dz-error:hover .dz-error-message {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.dropzone .dz-preview .dz-error-message {
+  pointer-events: none;
+  z-index: 1000;
+  position: absolute;
+  display: block;
+  display: none;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  border-radius: 5px;
+  font-size: 13px;
+  top: 130px;
+  left: -10px;
+  width: 140px;
+  background: #FF425C;
+  background: linear-gradient(to bottom, #FF425C, #FF425C);
+  padding: 0.5em 1.2em;
+  color: white;
+}
+
+.dropzone .dz-preview .dz-error-message:after {
+  content: "";
+  position: absolute;
+  top: -6px;
+  left: 64px;
+  width: 0;
+  height: 0;
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  border-bottom: 6px solid #FF425C;
+}
+
+@-webkit-keyframes passing-through {
+  0% {
+    opacity: 0;
+    transform: translateY(40px);
+  }
+  30%, 70% {
+    opacity: 1;
+    transform: translateY(0px);
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(-40px);
+  }
+}
+@keyframes passing-through {
+  0% {
+    opacity: 0;
+    transform: translateY(40px);
+  }
+  30%, 70% {
+    opacity: 1;
+    transform: translateY(0px);
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(-40px);
+  }
+}
+@-webkit-keyframes slide-in {
+  0% {
+    opacity: 0;
+    transform: translateY(40px);
+  }
+  30% {
+    opacity: 1;
+    transform: translateY(0px);
+  }
+}
+@keyframes slide-in {
+  0% {
+    opacity: 0;
+    transform: translateY(40px);
+  }
+  30% {
+    opacity: 1;
+    transform: translateY(0px);
+  }
+}
+@-webkit-keyframes pulse {
+  0% {
+    transform: scale(1);
+  }
+  10% {
+    transform: scale(1.1);
+  }
+  20% {
+    transform: scale(1);
+  }
+}
+@keyframes pulse {
+  0% {
+    transform: scale(1);
+  }
+  10% {
+    transform: scale(1.1);
+  }
+  20% {
+    transform: scale(1);
+  }
+}
+/**====== File Upload css end ======**/
+/**  =====================
+      Help Desk Application css start
+==========================  **/
+.hd-body .excerpt {
+  padding: 15px;
+  background: #eff3f6;
+  border: 1px solid #e2e5e8;
+}
+
+.hd-body .ticket-customer,
+.hd-body .ticket-type-icon {
+  display: block;
+  text-transform: capitalize;
+}
+
+.hd-body:hover .hover-blk {
+  transform: scale(1);
+}
+
+.sm-view .card-body .excerpt,
+.sm-view .card-body ul.list-inline {
+  display: none;
+}
+
+.md-view .excerpt {
+  display: none;
+}
+
+.md-view .col-auto ul li:nth-child(1),
+.md-view .col-auto ul li:nth-child(3),
+.sm-view .col-auto ul li:nth-child(1),
+.sm-view .col-auto ul li:nth-child(3) {
+  display: none;
+}
+
+.hover-blk {
+  background: #fff;
+  width: 270px;
+  left: calc(100% + 10px);
+  transform: scale(0);
+  z-index: 5;
+  transition: all 0.1s ease-out;
+}
+
+.hover-blk .img-txt p {
+  display: inline-block;
+}
+
+.topic-name h1 {
+  float: left;
+  font-weight: normal;
+}
+
+.topic-name .btn-star {
+  float: right;
+}
+
+.dicon-blk {
+  top: 0;
+  right: 0;
+}
+
+.dicon-blk li {
+  display: inline-block;
+}
+
+.hd-detail .col-right .edit-del {
+  opacity: 0;
+}
+
+.hd-detail .col-right .edit-del i {
+  opacity: 0.2;
+}
+
+.hd-detail .col-right .edit-del i:hover {
+  opacity: 1;
+}
+
+.hd-detail:hover .edit-del {
+  opacity: 1;
+}
+
+.hdd-user i {
+  bottom: 0;
+}
+
+.ticket-block .hd-body {
+  border-left: 3px solid #ccc;
+}
+
+.ticket-block .col.border-right {
+  border-color: #ccc !important;
+}
+
+.ticket-block .ticket-type-icon {
+  font-weight: 500;
+  color: #111;
+}
+
+.ticket-block .excerpt h6 {
+  color: #686c71;
+  font-weight: 500;
+}
+
+.ticket-block .excerpt h6 a {
+  color: #686c71;
+}
+
+.ticket-block .excerpt h6 a:hover {
+  text-decoration: underline !important;
+  color: #111;
+}
+
+.ticket-block.open-tic .hd-body {
+  border-color: #ea394a;
+}
+
+.ticket-block.close-tic .hd-body {
+  border-color: #5AC17F;
+}
+
+.right-col .card-footer label {
+  font-weight: 500;
+}
+
+.q-view {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  z-index: 1030;
+  top: 0;
+  right: 0;
+  visibility: hidden;
+}
+
+.q-view .overlay {
+  background-color: rgba(0, 0, 0, 0.5);
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+
+.q-view .content {
+  width: 585px;
+  height: 100vh;
+  z-index: 5;
+  position: absolute;
+  top: 0;
+  background-color: #fff;
+  padding-top: 20px;
+  box-shadow: 0 0 100px rgba(0, 0, 0, 0.3);
+  right: -765px;
+  transition: right 0.195s ease-in, visibility 0s linear 0.195s;
+  min-height: 100vh;
+  overflow: auto;
+}
+
+.q-view.active {
+  visibility: visible;
+}
+
+.q-view.active .content {
+  right: 0;
+  transition: right 0.225s ease-out;
+}
+
+.select2-selection {
+  border-color: #e2e5e8;
+}
+
+.hdd-right-side {
+  width: 495px;
+}
+
+.hdd-right-side .hdd-right-inner {
+  position: fixed;
+  width: 465px;
+}
+
+.badge-sizing a {
+  padding: 6px 9px;
+  font-size: 14px;
+}
+
+.file-btn {
+  position: relative;
+  overflow: hidden;
+}
+
+.file-btn input {
+  position: absolute;
+  font-size: 50px;
+  opacity: 0;
+  right: 0;
+  top: 0;
+}
+
+@media (max-width: 992px) {
+  .hd-detail .col-right .edit-del {
+    opacity: 1;
+  }
+}
+@media only screen and (max-width: 767px) {
+  .hdd-right-side {
+    width: 100%;
+  }
+  .hdd-right-side .hdd-right-inner {
+    position: static;
+    width: 100%;
+  }
+}
+@media (max-width: 575px) {
+  .q-view .content {
+    width: 450px;
+  }
+}
+@media (max-width: 380px) {
+  .q-view .content {
+    width: 300px;
+  }
+}
+/**====== Help Desk Application css start ======**/

+ 1 - 1
src/views/dashboard/index.vue

@@ -6,7 +6,7 @@
 
 
 <script>
 <script>
 import { mapGetters } from 'vuex'
 import { mapGetters } from 'vuex'
-import adminDashboard from './admin'
+import adminDashboard from './admin/chart.vue'
 import editorDashboard from './editor'
 import editorDashboard from './editor'
 
 
 export default {
 export default {

+ 119 - 11
src/views/document/com/components/sourceEs/index.vue

@@ -23,7 +23,11 @@
 </template>
 </template>
     
     
     <script>
     <script>
-import { searchSourceData, deleteSourceData } from "@/api/sourceData";
+import {
+  searchSourceData,
+  deleteSourceData,
+  batch_content,
+} from "@/api/sourceData";
 /* import { search } from "core-js/fn/symbol"; */
 /* import { search } from "core-js/fn/symbol"; */
 import LuckyExcel from "luckyexcel"; //引入LuckyExcel
 import LuckyExcel from "luckyexcel"; //引入LuckyExcel
 import axios from "axios";
 import axios from "axios";
@@ -78,17 +82,70 @@ export default {
       this.matchResults = [...new Set(allMatches)];
       this.matchResults = [...new Set(allMatches)];
       console.log("匹配到的结果:", this.matchResults);
       console.log("匹配到的结果:", this.matchResults);
     },
     },
+    // 格式化请求参数
+    formatRequestParams(locations) {
+      // 确保 locations 是数组
+      const locationArray = Array.isArray(locations) ? locations : [locations];
+      return {
+        template_location: locationArray,
+        middle_layer_location: locationArray.map(() => ""),
+        tech_report_location: locationArray.map(() => ""),
+        other_location: locationArray.map(() => ""),
+      };
+    },
 
 
     // 单个替换
     // 单个替换
     replaceItem(item) {
     replaceItem(item) {
-      this.$confirm(`确认将 ${item} 替换为 ${item}1?`, "提示", {
+      this.$confirm(`确认替换 ${item}?`, "提示", {
         confirmButtonText: "确定",
         confirmButtonText: "确定",
         cancelButtonText: "取消",
         cancelButtonText: "取消",
         type: "warning",
         type: "warning",
       })
       })
-        .then(() => {
-          // 这里添加替换逻辑
-          this.$message.success("替换成功");
+        .then(async () => {
+          try {
+            // 修改这里,确保传入数组形式的参数
+            const params = this.formatRequestParams('[TA-CF-54]');
+            const response = await axios.post(
+              `${process.env.VUE_APP_BASE_API}/project-raw-data/batch-content`,
+              params,
+              {
+                headers: {
+                  "Content-Type": "application/json",
+                },
+              }
+            );
+
+            if (response.status === 200 && response.data) {
+              console.log(response.data);
+              // 修改获取替换值的逻辑
+              const replacementValue = response.data.data[0].tech_report_location;
+
+              if (replacementValue) {
+                this.TemList.forEach((el, index) => {
+                  this.$set(
+                    this.TemList[index],
+                    "content",
+                    el.content.replace(
+                      new RegExp(this.escapeRegExp(item), "g"),
+                      replacementValue
+                    )
+                  );
+                });
+
+                this.matchResults = this.matchResults.filter(
+                  (match) => match !== item
+                );
+                this.$message.success("替换成功");
+              } else {
+                this.$message.warning("未获取到替换内容");
+              }
+            } else {
+              this.$message.error("获取替换内容失败");
+            }
+          } catch (error) {
+            console.error("替换失败:", error);
+            this.$message.error(error.response?.data?.message || "替换失败");
+          }
         })
         })
         .catch(() => {
         .catch(() => {
           // 取消操作
           // 取消操作
@@ -97,6 +154,8 @@ export default {
 
 
     // 批量替换
     // 批量替换
     replaceAll() {
     replaceAll() {
+      this.loadingAll = true;
+
       this.$confirm(
       this.$confirm(
         `确认批量替换 ${this.matchResults.length} 项内容?`,
         `确认批量替换 ${this.matchResults.length} 项内容?`,
         "提示",
         "提示",
@@ -106,14 +165,63 @@ export default {
           type: "warning",
           type: "warning",
         }
         }
       )
       )
-        .then(() => {
-          // 这里添加批量替换逻辑
-          this.$message.success("批量替换成功");
+        .then(async () => {
+          try {
+            const params = this.formatRequestParams(this.matchResults);
+            const response = await axios.post(
+              `${process.env.VUE_APP_BASE_API}/project-raw-data/batch-content`,
+              params,
+              {
+                headers: {
+                  "Content-Type": "application/json",
+                },
+              }
+            );
+
+            if (response.status === 200 && response.data) {
+              const replacementValues = response.data.template_location || [];
+
+              if (replacementValues.length > 0) {
+                this.TemList.forEach((el, index) => {
+                  let updatedContent = el.content;
+                  this.matchResults.forEach((item, idx) => {
+                    const replacementValue = replacementValues[idx];
+                    if (replacementValue) {
+                      updatedContent = updatedContent.replace(
+                        new RegExp(this.escapeRegExp(item), "g"),
+                        replacementValue
+                      );
+                    }
+                  });
+                  this.$set(this.TemList[index], "content", updatedContent);
+                });
+
+                this.matchResults = [];
+                this.$message.success("批量替换成功");
+              } else {
+                this.$message.warning("未获取到替换内容");
+              }
+            } else {
+              this.$message.error("获取替换内容失败");
+            }
+          } catch (error) {
+            console.error("批量替换失败:", error);
+            this.$message.error(
+              error.response?.data?.message || "批量替换失败"
+            );
+          }
         })
         })
         .catch(() => {
         .catch(() => {
           // 取消操作
           // 取消操作
+        })
+        .finally(() => {
+          this.loadingAll = false;
         });
         });
     },
     },
+    // 辅助方法:转义正则表达式特殊字符
+    escapeRegExp(string) {
+      return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+    },
     /* 检索当前模版的所有内容 */
     /* 检索当前模版的所有内容 */
     /*  searchEx() {
     /*  searchEx() {
       console.log("TemList", this.TemList);
       console.log("TemList", this.TemList);
@@ -148,20 +256,20 @@ export default {
 <style lang="scss" scoped>
 <style lang="scss" scoped>
 .match-results {
 .match-results {
   margin-top: 20px;
   margin-top: 20px;
-  
+
   .match-item {
   .match-item {
     padding: 10px;
     padding: 10px;
     border-bottom: 1px solid #eee;
     border-bottom: 1px solid #eee;
     display: flex;
     display: flex;
     justify-content: space-between;
     justify-content: space-between;
     align-items: center;
     align-items: center;
-    
+
     .match-content {
     .match-content {
       flex: 1;
       flex: 1;
       display: flex;
       display: flex;
       gap: 20px;
       gap: 20px;
     }
     }
-    
+
     .actions {
     .actions {
       margin-left: 10px;
       margin-left: 10px;
     }
     }

+ 20 - 12
src/views/knowledgeMenu/category/knowledgeSet.vue

@@ -108,7 +108,7 @@
             label="上传时间"
             label="上传时间"
             align="center"
             align="center"
             sortable="custom"
             sortable="custom"
-             width="140"
+            width="140"
           />
           />
           <el-table-column prop="run" label="解析状态" align="center">
           <el-table-column prop="run" label="解析状态" align="center">
             <template #default="scope">
             <template #default="scope">
@@ -120,7 +120,12 @@
               <div v-if="scope.row.run == 6">文件异常</div>
               <div v-if="scope.row.run == 6">文件异常</div>
             </template>
             </template>
           </el-table-column>
           </el-table-column>
-          <el-table-column label="操作" align="center" fixed="right" width="180">
+          <el-table-column
+            label="操作"
+            align="center"
+            fixed="right"
+            width="180"
+          >
             <template #default="scope">
             <template #default="scope">
               <div class="operations-container">
               <div class="operations-container">
                 <el-tooltip
                 <el-tooltip
@@ -166,7 +171,7 @@
                       size="small"
                       size="small"
                       circle
                       circle
                       class="operation-button"
                       class="operation-button"
-                      style="font-size: 15px;margin-left: 10px;"
+                      style="font-size: 15px; margin-left: 10px"
                       icon="el-icon-more"
                       icon="el-icon-more"
                     ></el-button>
                     ></el-button>
                   </template>
                   </template>
@@ -196,7 +201,7 @@
                         icon="el-icon-loading"
                         icon="el-icon-loading"
                         circle
                         circle
                         :disabled="true"
                         :disabled="true"
-                        style="font-size: 15px;"
+                        style="font-size: 15px"
                       >
                       >
                       </el-button>
                       </el-button>
                     </el-tooltip>
                     </el-tooltip>
@@ -410,7 +415,7 @@ import {
   selectType0,
   selectType0,
   delDocumentList,
   delDocumentList,
   getdocpro,
   getdocpro,
-  analysisPro
+  analysisPro,
 } from "@/api/knowledge";
 } from "@/api/knowledge";
 export default {
 export default {
   components: {
   components: {
@@ -784,7 +789,9 @@ export default {
       })
       })
         .then(() => {
         .then(() => {
           this.loading = true;
           this.loading = true;
-          analysisPro({document_ids:JSON.stringify(selectedIds)})/* { ids: JSON.stringify(selectedIds) } */
+          analysisPro({
+            document_ids: JSON.stringify(selectedIds),
+          }) /* { ids: JSON.stringify(selectedIds) } */
             .then((res) => {
             .then((res) => {
               if (res.status === 200) {
               if (res.status === 200) {
                 this.$message.success("批量解析任务已提交");
                 this.$message.success("批量解析任务已提交");
@@ -876,13 +883,14 @@ export default {
 
 
       // Set the status to "解析中" (1) immediately
       // Set the status to "解析中" (1) immediately
       this.$set(row, "run", 1);
       this.$set(row, "run", 1);
-
-      analysisPro({
-        document_id: row.id,
-        start_page: row.start_page || 0,
-        end_page: row.end_page || 1000,
+      const analysisConfig = {
+        document_ids: JSON.stringify([row.id]),
+        start_page: row.start_page ?? 0, // 使用空值合并运算符
+        end_page: row.end_page ?? 1000, // 使用空值合并运算符
         max_tokens: row.token_num,
         max_tokens: row.token_num,
-      })
+      };
+
+      analysisPro(analysisConfig)
         .then((res) => {
         .then((res) => {
           if (res.status === 200) {
           if (res.status === 200) {
             // Start checking the status immediately after successful API call
             // Start checking the status immediately after successful API call

+ 4 - 4
src/views/middPage/index.vue

@@ -100,11 +100,11 @@
           ></el-input>
           ></el-input>
           <span v-else>
           <span v-else>
             {{ scope.row.generation_1 }}
             {{ scope.row.generation_1 }}
-            <i
+           <!--  <i
               class="el-icon-refresh"
               class="el-icon-refresh"
               @click="openModel1Dialog(scope.row)"
               @click="openModel1Dialog(scope.row)"
               style="cursor: pointer; margin-left: 5px"
               style="cursor: pointer; margin-left: 5px"
-            ></i>
+            ></i> -->
           </span>
           </span>
         </template>
         </template>
       </el-table-column>
       </el-table-column>
@@ -120,11 +120,11 @@
           ></el-input>
           ></el-input>
           <span v-else>
           <span v-else>
             {{ scope.row.generation_2 }}
             {{ scope.row.generation_2 }}
-            <i
+           <!--  <i
               class="el-icon-refresh"
               class="el-icon-refresh"
               @click="openModel2Dialog(scope.row)"
               @click="openModel2Dialog(scope.row)"
               style="cursor: pointer; margin-left: 5px"
               style="cursor: pointer; margin-left: 5px"
-            ></i>
+            ></i> -->
           </span>
           </span>
         </template>
         </template>
       </el-table-column>
       </el-table-column>

+ 238 - 0
src/views/templateLoca/index.vue

@@ -0,0 +1,238 @@
+<template>
+  <div class="template-location-container">
+    <!-- 顶部操作栏 -->
+    <div class="operation-bar">
+      <el-button type="primary" @click="handleImport">导入模版位置表</el-button>
+      <el-button type="primary" @click="handleExport">导出模版位置表</el-button>
+    </div>
+
+    <!-- 数据列表 -->
+    <el-table :data="tableData" style="width: 100%">
+      <el-table-column prop="id" label="ID" width="80" />
+      <!--       <el-table-column prop="project_id" label="项目ID" width="100" /> -->
+      <el-table-column prop="group_name" label="项目组" />
+      <el-table-column prop="project_name" label="项目名称" />
+      <el-table-column prop="action_type" label="动作类型" width="100" />
+      <el-table-column prop="template_location" label="模板位置" />
+      <el-table-column prop="middle_layer_location" label="中间层位置" />
+      <el-table-column prop="tech_report_location" label="技术报告位置" />
+      <el-table-column prop="other_location" label="其他位置" />
+      <el-table-column prop="create_time" label="创建时间" width="160" />
+      <!-- <el-table-column prop="update_time" label="更新时间" width="160" />
+      <el-table-column prop="status" label="状态" width="100">
+        <template slot-scope="scope">
+          <el-tag :type="getStatusType(scope.row.status)">
+            {{ getStatusText(scope.row.status) }}
+          </el-tag>
+        </template>
+      </el-table-column> -->
+    </el-table>
+
+    <!-- 新增/编辑弹窗 -->
+    <!--  <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="500px">
+      <el-form :model="form" ref="form" :rules="rules" label-width="100px">
+        <el-form-item label="项目ID" prop="project_id">
+          <el-input v-model="form.project_id" />
+        </el-form-item>
+        <el-form-item label="组名" prop="group_name">
+          <el-input v-model="form.group_name" />
+        </el-form-item>
+        <el-form-item label="项目名称" prop="project_name">
+          <el-input v-model="form.project_name" />
+        </el-form-item>
+        <el-form-item label="内容" prop="content">
+          <el-input type="textarea" v-model="form.content" />
+        </el-form-item>
+        <el-form-item label="模板位置" prop="template_location">
+          <el-input v-model="form.template_location" />
+        </el-form-item>
+        <el-form-item label="状态" prop="status">
+          <el-input v-model="form.status" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer">
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="handleSubmit">确定</el-button>
+      </div>
+    </el-dialog> -->
+  </div>
+</template>
+  
+  <script>
+import {
+  rawSearch,
+  export_template,
+  rawImport,
+  rawList,
+} from "@/api/knowledge";
+import axios from "axios";
+export default {
+  name: "TemplateLocation",
+  data() {
+    return {
+      tableData: [],
+      dialogVisible: false,
+      dialogTitle: "",
+      form: {
+        project_id: "",
+        group_name: "",
+        project_name: "",
+        content: "",
+        template_location: "",
+        status: "",
+      },
+      pageForm: {
+        page: 1,
+        page_size: 30,
+      },
+      rules: {
+        project_id: [
+          { required: true, message: "请输入项目ID", trigger: "blur" },
+        ],
+        group_name: [
+          { required: true, message: "请输入组名", trigger: "blur" },
+        ],
+        project_name: [
+          { required: true, message: "请输入项目名称", trigger: "blur" },
+        ],
+      },
+    };
+  },
+  created() {
+    this.fetchData();
+  },
+  methods: {
+    // 获取列表数据
+    async fetchData() {
+      try {
+        const response = await rawList(this.pageForm);
+        if (response.status === 200) {
+          console.log(response);
+          this.tableData = response.data.list;
+        }
+      } catch (error) {
+        console.error("获取数据失败:", error);
+        this.$message.error("获取数据失败");
+      }
+    },
+
+    // 打开新增弹窗
+    handleAdd() {
+      this.dialogTitle = "新增";
+      this.form = {
+        project_id: "",
+        group_name: "",
+        project_name: "",
+        content: "",
+        template_location: "",
+        status: "",
+      };
+      this.dialogVisible = true;
+    },
+
+    async handleImport() {
+      try {
+        const input = document.createElement("input");
+        input.type = "file";
+        input.accept = ".xlsx,.xls";
+
+        input.onchange = async (e) => {
+          const file = e.target.files[0];
+          if (!file) {
+            this.$message.warning("请选择文件");
+            return;
+          }
+
+          // 验证文件类型
+          const validTypes = [
+            "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+            "application/vnd.ms-excel",
+          ];
+          if (!validTypes.includes(file.type)) {
+            this.$message.error("请上传Excel文件(.xlsx或.xls)");
+            return;
+          }
+
+          // 验证文件大小(例如:10MB限制)
+          const maxSize = 10 * 1024 * 1024;
+          if (file.size > maxSize) {
+            this.$message.error("文件大小不能超过10MB");
+            return;
+          }
+
+          const formData = new FormData();
+          formData.append("file", file);
+
+          // 添加loading
+          const loading = this.$loading({
+            lock: true,
+            text: "正在导入...",
+            spinner: "el-icon-loading",
+            background: "rgba(0, 0, 0, 0.7)",
+          });
+
+          try {
+            // 使用 axios 直接发送请求
+            const response = await axios.post(`${process.env.VUE_APP_BASE_API}/project-raw-data/import`, formData, {
+              headers: {
+                "Content-Type": "multipart/form-data",
+              },
+            });
+
+            loading.close();
+
+            if (response.status === 200) {
+              this.$message.success("导入成功");
+              this.fetchData();
+            } else {
+              this.$message.error(response.data.message || "导入失败");
+            }
+          } catch (error) {
+            loading.close();
+            this.$message.error(error.response?.data?.message || "导入失败");
+          }
+        };
+
+        input.click();
+      } catch (error) {
+        console.error("导入失败:", error);
+        this.$message.error(error.response?.data?.message || "导入失败");
+      }
+    },
+
+    // 添加导出处理方法
+    async handleExport() {
+      try {
+        const response = await export_template();
+
+        // 创建一个blob链接并触发下载
+        const blob = new Blob([response.data], {
+          type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+        });
+        const url = window.URL.createObjectURL(blob);
+        const link = document.createElement("a");
+        link.href = url;
+        link.download = "模板位置表.xlsx";
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+        window.URL.revokeObjectURL(url);
+
+        this.$message.success("导出成功");
+      } catch (error) {
+        console.error("导出失败:", error);
+        this.$message.error("导出失败");
+      }
+    },
+  },
+};
+</script>
+  
+  <style scoped>
+.template-location-container {
+  padding: 20px;
+}
+.operation-bar {
+  margin-bottom: 20px;
+}
+</style>

Kaikkia tiedostoja ei voida näyttää, sillä liian monta tiedostoa muuttui tässä diffissä