From aaf9c24b50c045f12a7084b045ebae7a0a5792fb Mon Sep 17 00:00:00 2001
From: Yogesh Ojha <yogesh.ojha11@gmail.com>
Date: Mon, 4 May 2020 18:44:30 +0530
Subject: [PATCH] pulled template from cork

---
 .DS_Store                                     |   Bin 0 -> 8196 bytes
 reNgine/settings.py                           |    12 -
 static/.DS_Store                              |   Bin 0 -> 6148 bytes
 static/css/.DS_Store                          |   Bin 0 -> 6148 bytes
 static/css/apps/contacts.css                  |   415 +
 static/css/apps/invoice.css                   |   370 +
 static/css/apps/mailbox.css                   |   918 +
 static/css/apps/mailing-chat.css              |   664 +
 static/css/apps/notes.css                     |   442 +
 static/css/apps/scrumboard.css                |   497 +
 static/css/apps/todolist.css                  |   495 +
 static/css/authentication/form-1.css          |   206 +
 static/css/authentication/form-2.css          |   231 +
 static/css/components/cards/card.css          |   440 +
 static/css/components/custom-carousel.css     |   152 +
 static/css/components/custom-countdown.css    |    70 +
 static/css/components/custom-counter.css      |    76 +
 static/css/components/custom-list-group.css   |   215 +
 static/css/components/custom-media_object.css |   158 +
 static/css/components/custom-modal.css        |   238 +
 static/css/components/custom-sweetalert.css   |    15 +
 .../tabs-accordian/custom-accordions.css      |   108 +
 .../components/tabs-accordian/custom-tabs.css |   485 +
 .../components/timeline/custom-timeline.css   |   514 +
 static/css/dashboard/dash_1.css               |  1030 +
 static/css/dashboard/dash_2.css               |   780 +
 static/css/elements/alert.css                 |   229 +
 static/css/elements/avatar.css                |    94 +
 static/css/elements/breadcrumb.css            |   242 +
 static/css/elements/color_library.css         |    45 +
 static/css/elements/custom-pagination.css     |   265 +
 static/css/elements/custom-tree_view.css      |   125 +
 static/css/elements/custom-typography.css     |    28 +
 static/css/elements/infobox.css               |   131 +
 static/css/elements/miscellaneous.css         |    16 +
 static/css/elements/popover.css               |   130 +
 static/css/elements/search.css                |   213 +
 static/css/elements/tooltip.css               |    81 +
 static/css/forms/bootstrap-form.css           |   110 +
 static/css/forms/custom-clipboard.css         |    23 +
 static/css/forms/switches.css                 |   226 +
 static/css/forms/theme-checkbox-radio.css     |   275 +
 static/css/loader.css                         |    30 +
 static/css/main.css                           |  2056 ++
 static/css/pages/coming-soon/style.css        |   219 +
 static/css/pages/contact_us.css               |   131 +
 static/css/pages/error/style-400.css          |    59 +
 static/css/pages/error/style-500.css          |    59 +
 static/css/pages/error/style-503.css          |    59 +
 static/css/pages/error/style-maintanence.css  |    58 +
 static/css/pages/faq/faq.css                  |   261 +
 static/css/pages/faq/faq2.css                 |    95 +
 static/css/pages/helpdesk.css                 |   307 +
 static/css/pages/privacy/privacy.css          |   136 +
 static/css/plugins.css                        |    12 +
 static/css/scrollspyNav.css                   |    72 +
 static/css/structure.css                      |  1151 +
 static/css/tables/table-basic.css             |    71 +
 static/css/users/account-setting.css          |   308 +
 static/css/users/user-profile.css             |   389 +
 static/css/widgets/modules-widgets.css        |  1707 ++
 static/img/.DS_Store                          |   Bin 0 -> 8196 bytes
 static/img/120x120.jpg                        |   Bin 0 -> 1214 bytes
 static/img/1280x857.jpg                       |   Bin 0 -> 23188 bytes
 static/img/175x115.jpg                        |   Bin 0 -> 1746 bytes
 static/img/200x200.jpg                        |   Bin 0 -> 1851 bytes
 static/img/300x300.jpg                        |   Bin 0 -> 3021 bytes
 static/img/350x250.jpg                        |   Bin 0 -> 3316 bytes
 static/img/400x168.jpg                        |   Bin 0 -> 3107 bytes
 static/img/400x300.jpg                        |   Bin 0 -> 4025 bytes
 static/img/509x343.jpg                        |   Bin 0 -> 5439 bytes
 static/img/600x300.jpg                        |   Bin 0 -> 5919 bytes
 static/img/640x426.jpg                        |   Bin 0 -> 7721 bytes
 static/img/90x90.jpg                          |   Bin 0 -> 1095 bytes
 static/img/ab-1.jpeg                          |   Bin 0 -> 8177 bytes
 static/img/arrow-down.png                     |   Bin 0 -> 771 bytes
 static/img/bg.png                             |   Bin 0 -> 9855 bytes
 static/img/ca.png                             |   Bin 0 -> 816 bytes
 static/img/contact-us-map-pin.svg             |     1 +
 static/img/de.png                             |   Bin 0 -> 469 bytes
 static/img/faq.svg                            |     1 +
 static/img/favicon.ico                        |   Bin 0 -> 4286 bytes
 static/img/fr.png                             |   Bin 0 -> 638 bytes
 static/img/jp.png                             |   Bin 0 -> 609 bytes
 static/img/mindset.svg                        |     1 +
 static/js/.DS_Store                           |   Bin 0 -> 6148 bytes
 static/js/app.js                              |   238 +
 static/js/apps/contact.js                     |   319 +
 static/js/apps/custom-mailbox.js              |  1340 ++
 static/js/apps/invoice.js                     |    63 +
 static/js/apps/mailbox-chat.js                |   156 +
 static/js/apps/notes.js                       |   180 +
 static/js/apps/scrumboard.js                  |   461 +
 static/js/apps/todoList.js                    |   443 +
 static/js/authentication/form-1.js            |    12 +
 static/js/authentication/form-2.js            |    18 +
 static/js/clipboard/clipboard.min.js          |     7 +
 static/js/components/custom-carousel.js       |    10 +
 static/js/components/custom-countdown.js      |    55 +
 static/js/components/custom-counter.js        |   102 +
 .../notification/custom-snackbar.js           |   149 +
 .../bootstrap-session-timeout.js              |    87 +
 .../custom-bootstrap_session_timeout.js       |    28 +
 static/js/components/ui-accordions.js         |    17 +
 static/js/custom.js                           |   134 +
 static/js/dashboard/dash_1.js                 |   532 +
 static/js/dashboard/dash_2.js                 |   503 +
 static/js/elements/custom-search.js           |    20 +
 static/js/elements/popovers.js                |    45 +
 static/js/elements/tooltip.js                 |    38 +
 .../bs_validation_script.js                   |    80 +
 static/js/forms/custom-clipboard.js           |     1 +
 static/js/ie11fix/fn.fix-padStart.js          |    18 +
 static/js/libs/jquery-3.1.1.min.js            |     4 +
 static/js/libs/jquery-ui.js                   | 18704 ++++++++++++++++
 static/js/loader.js                           |     4 +
 static/js/pages/coming-soon/coming-soon.js    |    31 +
 static/js/pages/faq/faq.js                    |     7 +
 static/js/pages/faq/faq2.js                   |     5 +
 static/js/pages/helpdesk.js                   |     7 +
 static/js/scrollspyNav.js                     |    22 +
 static/js/users/account-settings.js           |    46 +
 static/js/widgets/modules-widgets.js          |  1086 +
 templates/.DS_Store                           |   Bin 0 -> 6148 bytes
 templates/base/base_layout.html               |  1366 ++
 125 files changed, 44273 insertions(+), 12 deletions(-)
 create mode 100644 .DS_Store
 create mode 100644 static/.DS_Store
 create mode 100644 static/css/.DS_Store
 create mode 100644 static/css/apps/contacts.css
 create mode 100644 static/css/apps/invoice.css
 create mode 100644 static/css/apps/mailbox.css
 create mode 100644 static/css/apps/mailing-chat.css
 create mode 100644 static/css/apps/notes.css
 create mode 100644 static/css/apps/scrumboard.css
 create mode 100644 static/css/apps/todolist.css
 create mode 100644 static/css/authentication/form-1.css
 create mode 100644 static/css/authentication/form-2.css
 create mode 100644 static/css/components/cards/card.css
 create mode 100644 static/css/components/custom-carousel.css
 create mode 100644 static/css/components/custom-countdown.css
 create mode 100644 static/css/components/custom-counter.css
 create mode 100644 static/css/components/custom-list-group.css
 create mode 100644 static/css/components/custom-media_object.css
 create mode 100644 static/css/components/custom-modal.css
 create mode 100644 static/css/components/custom-sweetalert.css
 create mode 100644 static/css/components/tabs-accordian/custom-accordions.css
 create mode 100644 static/css/components/tabs-accordian/custom-tabs.css
 create mode 100644 static/css/components/timeline/custom-timeline.css
 create mode 100644 static/css/dashboard/dash_1.css
 create mode 100644 static/css/dashboard/dash_2.css
 create mode 100644 static/css/elements/alert.css
 create mode 100644 static/css/elements/avatar.css
 create mode 100644 static/css/elements/breadcrumb.css
 create mode 100644 static/css/elements/color_library.css
 create mode 100644 static/css/elements/custom-pagination.css
 create mode 100644 static/css/elements/custom-tree_view.css
 create mode 100644 static/css/elements/custom-typography.css
 create mode 100644 static/css/elements/infobox.css
 create mode 100644 static/css/elements/miscellaneous.css
 create mode 100644 static/css/elements/popover.css
 create mode 100644 static/css/elements/search.css
 create mode 100644 static/css/elements/tooltip.css
 create mode 100644 static/css/forms/bootstrap-form.css
 create mode 100644 static/css/forms/custom-clipboard.css
 create mode 100644 static/css/forms/switches.css
 create mode 100644 static/css/forms/theme-checkbox-radio.css
 create mode 100644 static/css/loader.css
 create mode 100644 static/css/main.css
 create mode 100644 static/css/pages/coming-soon/style.css
 create mode 100644 static/css/pages/contact_us.css
 create mode 100644 static/css/pages/error/style-400.css
 create mode 100644 static/css/pages/error/style-500.css
 create mode 100644 static/css/pages/error/style-503.css
 create mode 100644 static/css/pages/error/style-maintanence.css
 create mode 100644 static/css/pages/faq/faq.css
 create mode 100644 static/css/pages/faq/faq2.css
 create mode 100644 static/css/pages/helpdesk.css
 create mode 100644 static/css/pages/privacy/privacy.css
 create mode 100644 static/css/plugins.css
 create mode 100644 static/css/scrollspyNav.css
 create mode 100644 static/css/structure.css
 create mode 100644 static/css/tables/table-basic.css
 create mode 100644 static/css/users/account-setting.css
 create mode 100644 static/css/users/user-profile.css
 create mode 100644 static/css/widgets/modules-widgets.css
 create mode 100644 static/img/.DS_Store
 create mode 100644 static/img/120x120.jpg
 create mode 100644 static/img/1280x857.jpg
 create mode 100644 static/img/175x115.jpg
 create mode 100644 static/img/200x200.jpg
 create mode 100644 static/img/300x300.jpg
 create mode 100644 static/img/350x250.jpg
 create mode 100644 static/img/400x168.jpg
 create mode 100644 static/img/400x300.jpg
 create mode 100644 static/img/509x343.jpg
 create mode 100644 static/img/600x300.jpg
 create mode 100644 static/img/640x426.jpg
 create mode 100644 static/img/90x90.jpg
 create mode 100644 static/img/ab-1.jpeg
 create mode 100644 static/img/arrow-down.png
 create mode 100644 static/img/bg.png
 create mode 100644 static/img/ca.png
 create mode 100644 static/img/contact-us-map-pin.svg
 create mode 100644 static/img/de.png
 create mode 100644 static/img/faq.svg
 create mode 100644 static/img/favicon.ico
 create mode 100644 static/img/fr.png
 create mode 100644 static/img/jp.png
 create mode 100644 static/img/mindset.svg
 create mode 100644 static/js/.DS_Store
 create mode 100644 static/js/app.js
 create mode 100644 static/js/apps/contact.js
 create mode 100644 static/js/apps/custom-mailbox.js
 create mode 100644 static/js/apps/invoice.js
 create mode 100644 static/js/apps/mailbox-chat.js
 create mode 100644 static/js/apps/notes.js
 create mode 100644 static/js/apps/scrumboard.js
 create mode 100644 static/js/apps/todoList.js
 create mode 100644 static/js/authentication/form-1.js
 create mode 100644 static/js/authentication/form-2.js
 create mode 100644 static/js/clipboard/clipboard.min.js
 create mode 100644 static/js/components/custom-carousel.js
 create mode 100644 static/js/components/custom-countdown.js
 create mode 100644 static/js/components/custom-counter.js
 create mode 100644 static/js/components/notification/custom-snackbar.js
 create mode 100644 static/js/components/session-timeout/bootstrap-session-timeout.js
 create mode 100644 static/js/components/session-timeout/custom-bootstrap_session_timeout.js
 create mode 100644 static/js/components/ui-accordions.js
 create mode 100644 static/js/custom.js
 create mode 100644 static/js/dashboard/dash_1.js
 create mode 100644 static/js/dashboard/dash_2.js
 create mode 100644 static/js/elements/custom-search.js
 create mode 100644 static/js/elements/popovers.js
 create mode 100644 static/js/elements/tooltip.js
 create mode 100644 static/js/forms/bootstrap_validation/bs_validation_script.js
 create mode 100644 static/js/forms/custom-clipboard.js
 create mode 100644 static/js/ie11fix/fn.fix-padStart.js
 create mode 100644 static/js/libs/jquery-3.1.1.min.js
 create mode 100644 static/js/libs/jquery-ui.js
 create mode 100644 static/js/loader.js
 create mode 100644 static/js/pages/coming-soon/coming-soon.js
 create mode 100644 static/js/pages/faq/faq.js
 create mode 100644 static/js/pages/faq/faq2.js
 create mode 100644 static/js/pages/helpdesk.js
 create mode 100644 static/js/scrollspyNav.js
 create mode 100644 static/js/users/account-settings.js
 create mode 100644 static/js/widgets/modules-widgets.js
 create mode 100644 templates/.DS_Store
 create mode 100644 templates/base/base_layout.html

diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000000000000000000000000000000000000..72ebb7e66e2d4520b52d178fd1e8803eb0b524d6
GIT binary patch
literal 8196
zcmeHM!EVz)5S>jz>jVK2LTY>S1&Kqcnzo`KRLO+&&;tk&1P4H^U7OazwbR%kgb<Vq
zKLKBW_!BN1`4Bz;-t4Zb*h!JNAPPIu>|5{7+x5OU-pq!GM6>5Nh!%;+f-~07qnKgb
z&pu@(-Et8qz$ZGUh(gLJp!KO}(_j=Z3K#{90!9I&z~7(%_G~umlzm_In$jp>6!<R{
z;P-<KXLK}<70Oo!3Yh``D`=L6I`RO?u{Amx#|kACW2)>yXsXaDhER0$+Z+ybG>#Q2
zItfK5p=TC4LlJUz@N5}Q!ck~SqkvIhS^>`8YvhwhE0j*=?>kYl??s7+e*Q|`hF|+3
z4K<?6;3Tw9FOlna={jl&9Z?5mik1}`;3_JN@u@IIjan09yuispL_wY-77Cmy#&s!%
zAINz+G$=6MPca_SHr>Ho_kb(l`vu1L0%IO43g|v&2r*OPj!JGJx-O%SsfTFh9l>Lq
zfuxu#qt}$>XDfXz@aGVjVLci6`}x@N)~{l{e%jHW&=;>0g=x0B`c0I|m2-3RmQ}NA
z7i!Pjhe^Mkxmho5y4|OI^}x*zJzam4B+*IT^&W>of46?+ZW3p17zbTR4*dWj&z^*_
zpY)qaFZNS8PFr<YR@JKR)|ZCEn;VT~du@GVv}_L>Yn$uK_U4USqfymbxZ2p-**hA%
z8NMC8`+ya}gno_FC3SsLenc&&$g6fYj*|F*N$@IkVvRd^R#>xu(t>865jFXw&S3nr
z%FS47LBDxCr>tE9_57lCm8G0^thWtkbTp0?auc`9T^MNge-^};QQ!<IP*(T4$oc>F
z>F57vXhr5$jRHo2-&H_VTJ2U7EV--CVDm0-!}s8995+@dDJXJ31aN)whau`VLYd=e
U94kZ%%p3$r8BAdm_@fH^1pC@0lmGw#

literal 0
HcmV?d00001

diff --git a/reNgine/settings.py b/reNgine/settings.py
index f1ff9a30..0c54b020 100644
--- a/reNgine/settings.py
+++ b/reNgine/settings.py
@@ -1,15 +1,3 @@
-"""
-Django settings for reNgine project.
-
-Generated by 'django-admin startproject' using Django 2.2.12.
-
-For more information on this file, see
-https://docs.djangoproject.com/en/2.2/topics/settings/
-
-For the full list of settings and their values, see
-https://docs.djangoproject.com/en/2.2/ref/settings/
-"""
-
 import os
 
 # Build paths inside the project like this: os.path.join(BASE_DIR, ...)
diff --git a/static/.DS_Store b/static/.DS_Store
new file mode 100644
index 0000000000000000000000000000000000000000..7ef5880480cd91f8efb26c0f46e7f9186ebbf98b
GIT binary patch
literal 6148
zcmeH~!EVz)5Qb-y6gEMK94fWk_EL#M4ozE85JIv-IrLV^s2l*bb{(}wj<<@PMi5f@
z!b`vt@G86jk5gu52h=3xN~>r`n*G<iGq(4Wch?I5sy9ly0Br!!=%kGn7B?96lP_3J
zS}0HPJ@Wm`p2V4r7h-*bC*TR(Jpwd$S0I7}29Uz_`AbW}3-l*fZ2anVIDrC+YqOl9
ze%u@tkBf6z3x3AuSz45vo4-`8-dMSJU+b1`J#2jl&+IrXqjFUAqTxHbI*7`%Sn6-A
z&HmP-_%Q8{kJ_uRY+gob-XC&un)ET`{o6E8?6_w~c~bCwLf4^nQ#X&=k0+C7JKc`i
z+TNLV%%r=uyWKInPoGbxO})0!eYt-;`1E=5WqSFI#|aA8Gqy*ff8;w>gu+EQ%rl#x
zVhcsrk>3DLXW6JV?3pFVQA^B*$2Z5O1|R3Y8ufLK496@j7arXl6$EgrCf~SzaI0_O
zAMOcw0(X%Btq%sBG!U(v^3s6?9|2Gs*vy7?`X!(oBN~WSPO%3~xl~k_s^o~FTspQJ
zi3>z4r!F0o96pphS;+}S@ze4ChQmPxPJQVKcmlHo>h7{l`~T~IpZ{l*{FNu*2`m)>
z)z}O7dN?H6TNegLd#yn~Mkk}V$|<K{A=@!mXe(YvXTv^271Thqa*8cz{zrf@_`(zT
HuLOPrc$@xO

literal 0
HcmV?d00001

diff --git a/static/css/.DS_Store b/static/css/.DS_Store
new file mode 100644
index 0000000000000000000000000000000000000000..db1370f64b000ce9982418ed5cf30bb4f50b4360
GIT binary patch
literal 6148
zcmeH~!EVz)5Qb;dgoac=PF0V-a7E$`tg0M(;lc~x#Izu}ab+j1xcS5j@D98Jj|boE
zu8?=*UJ*hw(eA%q&p)&CTlQu}#9bchw<2p1S<)2eE4m5O``V6d7H3|8PGej*?RL|&
z8?H5=nJHij{M!oXyE~Uk?)mlU`|GZ`_v2SI#xL<Z$X-6nC)t5tWXp_VE4z&QGvluC
zZRL(E_(pz~Z}vLlJeQjIJ^41UD(R$7v&_C{j3tp9+TC=96TVVOMGLtha)*Dm7OmZ#
zk7{2LSJzMzxsx|k(;soDIpHjcTcOTw+J8p9iT?t1D!C;?wi>N7@jSz`;aS}J=>2qj
ztu|q;S@V|Fw{RQA_wrTVlks7i?=|=~(%=Q0J^TYv_VgVqeOiez^BMjXPf?#uUYn{g
z_FWLU$FDo`R29aar}9YswO4GPd;99g-aLA<L;-ypu;p1m>rDYuz!dnSfPNnenqnDo
z2<Sf@bp8kc&YAYc*#Gqh3!MPVh(kbTFc+v`pt^X(aPj2e0-gJ1^dABSx;USiI5D$}
zClnVC9<K22;>v*5n*ydls=!IOT<iY-?&<S?O0p|cz!dne6mava4_B9z6!+Gn;&iVq
sXdh{6>Nf=R6uP(_`+;u77c_6&D|7&s5r=@xVD?AA%V3=;@K+W14ZKG8rT_o{

literal 0
HcmV?d00001

diff --git a/static/css/apps/contacts.css b/static/css/apps/contacts.css
new file mode 100644
index 00000000..986a41ab
--- /dev/null
+++ b/static/css/apps/contacts.css
@@ -0,0 +1,415 @@
+/*
+	===============================
+			@Import	Function
+	===============================
+*/
+/*
+	===============================
+			@Import	Mixins
+	===============================
+*/
+#content:before {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  background: rgba(136, 142, 168, 0.211765);
+  width: 100%;
+  height: 183px;
+  z-index: -1; }
+
+/*----------Theme checkbox---------*/
+.new-control {
+  padding-left: 0;
+  margin-right: 0; }
+
+.new-control-input {
+  position: unset; }
+
+.new-control.new-checkbox span.new-control-indicator:after {
+  top: 51%; }
+
+/*
+  Filtered List Search
+*/
+.filtered-list-search form > div {
+  position: relative;
+  width: 80%; }
+  .filtered-list-search form > div svg {
+    position: absolute;
+    right: 11px;
+    color: #acb0c3;
+    height: 36px;
+    width: 19px;
+    top: 4px; }
+
+.filtered-list-search form input {
+  padding: 6px 27px 6px 15px;
+  color: #d3d3d3;
+  border: none;
+  box-shadow: 0px 2px 4px rgba(126, 142, 177, 0.12);
+  width: 100% !important;
+  background-color: #fff; }
+  .filtered-list-search form input:focus {
+    border-color: #d3d3d3; }
+  .filtered-list-search form input::-webkit-input-placeholder {
+    /* Chrome/Opera/Safari */
+    color: #888ea8; }
+  .filtered-list-search form input::-moz-placeholder {
+    /* Firefox 19+ */
+    color: #888ea8; }
+  .filtered-list-search form input:-ms-input-placeholder {
+    /* IE 10+ */
+    color: #888ea8; }
+  .filtered-list-search form input:-moz-placeholder {
+    /* Firefox 18- */
+    color: #888ea8; }
+
+.searchable-container .switch {
+  text-align: right; }
+  .searchable-container .switch .view-grid, .searchable-container .switch .view-list {
+    padding: 10px;
+    background: #fff;
+    border-radius: 5px;
+    cursor: pointer;
+    color: #515365;
+    box-shadow: 0px 2px 4px rgba(126, 142, 177, 0.12);
+    width: 43px;
+    height: 41px;
+    fill: rgba(0, 23, 55, 0.08); }
+
+.searchable-container #btn-add-contact {
+  padding: 9px;
+  background: #ffffff;
+  border-radius: 5px;
+  cursor: pointer;
+  margin-right: 35px;
+  box-shadow: 0px 2px 4px rgba(126, 142, 177, 0.12);
+  width: 43px;
+  height: 41px;
+  color: #1b55e2;
+  fill: rgba(27, 85, 226, 0.239216); }
+  .searchable-container #btn-add-contact:hover {
+    color: #515365;
+    fill: rgba(0, 23, 55, 0.08); }
+
+.modal-backdrop {
+  background-color: #ebedf2; }
+
+.searchable-container .modal-content {
+  border: none;
+  box-shadow: 0px 0px 15px 1px rgba(113, 106, 202, 0.2); }
+  .searchable-container .modal-content svg.close {
+    position: absolute;
+    right: -7px;
+    top: -8px;
+    font-size: 12px;
+    font-weight: 600;
+    padding: 7px;
+    background: #fff;
+    border-radius: 5px;
+    opacity: 1;
+    color: #2196f3;
+    box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.2);
+    cursor: pointer;
+    transition: .600s; }
+
+.searchable-container .add-contact-box .add-contact-content .contact-name .validation-text, .searchable-container .add-contact-box .add-contact-content .contact-email .validation-text, .searchable-container .add-contact-box .add-contact-content .contact-occupation .validation-text, .searchable-container .add-contact-box .add-contact-content .contact-phone .validation-text, .searchable-container .add-contact-box .add-contact-content .contact-location .validation-text {
+  display: none;
+  color: #e7515a;
+  font-weight: 600;
+  text-align: left;
+  margin-top: 6px;
+  font-size: 12px;
+  letter-spacing: 1px; }
+
+.searchable-container .add-contact-box .add-contact-content .contact-name svg, .searchable-container .add-contact-box .add-contact-content .contact-email svg, .searchable-container .add-contact-box .add-contact-content .contact-occupation svg, .searchable-container .add-contact-box .add-contact-content .contact-phone svg, .searchable-container .add-contact-box .add-contact-content .contact-location svg {
+  align-self: center;
+  font-size: 19px;
+  margin-right: 14px;
+  color: #2196f3;
+  font-weight: 600; }
+
+.searchable-container .add-contact-box .add-contact-content .contact-name #c-name::-webkit-input-placeholder, .searchable-container .add-contact-box .add-contact-content .contact-email #c-email::-webkit-input-placeholder, .searchable-container .add-contact-box .add-contact-content .contact-occupation #c-occupation::-webkit-input-placeholder, .searchable-container .add-contact-box .add-contact-content .contact-phone #c-phone::-webkit-input-placeholder, .searchable-container .add-contact-box .add-contact-content .contact-location #c-location::-webkit-input-placeholder, .searchable-container .add-contact-box .add-contact-content .contact-name #c-name::-ms-input-placeholder, .searchable-container .add-contact-box .add-contact-content .contact-email #c-email::-ms-input-placeholder, .searchable-container .add-contact-box .add-contact-content .contact-occupation #c-occupation::-ms-input-placeholder, .searchable-container .add-contact-box .add-contact-content .contact-phone #c-phone::-ms-input-placeholder, .searchable-container .add-contact-box .add-contact-content .contact-location #c-location::-ms-input-placeholder, .searchable-container .add-contact-box .add-contact-content .contact-name #c-name::-moz-input-placeholder, .searchable-container .add-contact-box .add-contact-content .contact-email #c-email::-moz-input-placeholder, .searchable-container .add-contact-box .add-contact-content .contact-occupation #c-occupation::-moz-input-placeholder, .searchable-container .add-contact-box .add-contact-content .contact-phone #c-phone::-moz-input-placeholder, .searchable-container .add-contact-box .add-contact-content .contact-location #c-location::-moz-input-placeholder {
+  color: #acb0c3;
+  font-weight: 600; }
+
+.searchable-container .add-contact-box .add-contact-content .contact-name, .searchable-container .add-contact-box .add-contact-content .contact-email, .searchable-container .add-contact-box .add-contact-content .contact-occupation, .searchable-container .add-contact-box .add-contact-content .contact-phone {
+  padding-top: 20px; }
+
+.searchable-container .add-contact-box .add-contact-content .contact-location {
+  padding-top: 20px; }
+  .searchable-container .add-contact-box .add-contact-content .contact-location #c-location {
+    resize: none; }
+
+.searchable-container .modal-footer {
+  border: none;
+  padding: 0 15px 14px 15px; }
+  .searchable-container .modal-footer .btn[data-dismiss="modal"] {
+    background-color: #fff;
+    color: #1b55e2;
+    font-weight: 700;
+    border: 1px solid #e8e8e8;
+    padding: 10px 25px; }
+    .searchable-container .modal-footer .btn[data-dismiss="modal"] svg {
+      font-size: 11px;
+      font-weight: 600;
+      margin-right: 8px; }
+  .searchable-container .modal-footer .btn#btn-add {
+    background-color: #1b55e2;
+    color: #fff;
+    font-weight: 600;
+    border: 1px solid #1b55e2;
+    padding: 10px 25px; }
+  .searchable-container .modal-footer .btn#btn-edit {
+    background-color: #009688;
+    color: #fff;
+    font-weight: 600;
+    border: 1px solid #e0e6ed;
+    padding: 10px 25px; }
+
+.searchable-container .switch .view-grid:hover, .searchable-container .switch .view-list:hover, .searchable-container .switch .active-view {
+  color: #1b55e2;
+  fill: rgba(27, 85, 226, 0.239216); }
+
+.searchable-container .searchable-items.list .items.items-header-section h4 {
+  display: inline-block;
+  font-size: 16px;
+  font-weight: 600;
+  margin-bottom: 0;
+  margin-left: 39px; }
+
+.searchable-container .searchable-items.list .items.items-header-section .n-chk {
+  display: inline-block; }
+
+.searchable-container .searchable-items.list .items .item-content {
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -ms-flex-align: center;
+  align-items: center;
+  padding: .75rem .625rem;
+  position: relative;
+  display: inline-flex;
+  min-width: 0;
+  word-wrap: break-word;
+  justify-content: space-between;
+  background: #fff;
+  margin-bottom: 8px;
+  border-radius: 6px;
+  padding: 13px 18px;
+  width: 100%;
+  min-width: 767px;
+  transition: all 0.35s ease;
+  box-shadow: 0px 2px 4px rgba(126, 142, 177, 0.12); }
+
+.searchable-container .searchable-items.list .items:not(.items-header-section) .item-content:hover {
+  -webkit-transform: translateY(0) scale(1.03);
+  transform: translateY(0) scale(1.01); }
+
+.searchable-container .searchable-items.list .items .user-profile {
+  display: flex; }
+  .searchable-container .searchable-items.list .items .user-profile img {
+    width: 43px;
+    height: 43px;
+    border-radius: 5px;
+    margin-right: 11px;
+    margin-left: 18px; }
+
+.searchable-container .searchable-items.list .items .user-meta-info .user-name {
+  margin-bottom: 0;
+  color: #3b3f5c;
+  font-weight: 600;
+  font-size: 15px; }
+
+.searchable-container .searchable-items.list .items .user-meta-info .user-work {
+  margin-bottom: 0;
+  color: #888ea8;
+  font-weight: 500;
+  font-size: 13px; }
+
+.searchable-container .searchable-items.list .items .user-email p {
+  margin-bottom: 0;
+  color: #888ea8;
+  font-weight: 600; }
+
+.searchable-container .searchable-items.list .items .user-email .info-title {
+  display: none; }
+
+.searchable-container .searchable-items.list .items .user-location p {
+  font-size: 13px;
+  font-weight: 600;
+  margin-bottom: 0; }
+
+.searchable-container .searchable-items.list .items .user-location .info-title {
+  display: none; }
+
+.searchable-container .searchable-items.list .items .user-phone p {
+  margin-bottom: 0;
+  color: #888ea8;
+  font-weight: 600;
+  font-size: 13px; }
+
+.searchable-container .searchable-items.list .items .user-phone .info-title {
+  display: none; }
+
+.searchable-container .searchable-items.list .items .action-btn {
+  font-weight: 600;
+  color: #acb0c3; }
+  .searchable-container .searchable-items.list .items .action-btn .delete-multiple {
+    margin-right: 5px;
+    cursor: pointer;
+    color: #515365;
+    width: 20px;
+    fill: rgba(27, 85, 226, 0.239216); }
+    .searchable-container .searchable-items.list .items .action-btn .delete-multiple:hover {
+      color: #1b55e2; }
+  .searchable-container .searchable-items.list .items .action-btn .edit, .searchable-container .searchable-items.list .items .action-btn .delete {
+    margin-right: 5px;
+    cursor: pointer;
+    color: #515365;
+    width: 20px;
+    fill: rgba(27, 85, 226, 0.239216); }
+  .searchable-container .searchable-items.list .items .action-btn .edit:hover, .searchable-container .searchable-items.list .items .action-btn .delete:hover {
+    color: #1b55e2; }
+
+.searchable-items.grid {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -15px;
+  margin-left: -15px; }
+
+.searchable-container .searchable-items.grid .items {
+  margin-bottom: 30px;
+  border-radius: 6px;
+  width: 100%;
+  color: #0e1726;
+  transition: all 0.35s ease;
+  width: 33%;
+  -ms-flex: 0 0 25%;
+  flex: 0 0 25%;
+  max-width: 25%;
+  position: relative;
+  width: 100%;
+  padding-right: 15px;
+  padding-left: 15px; }
+  .searchable-container .searchable-items.grid .items .item-content {
+    background-color: #fff;
+    padding: 13px 18px;
+    -webkit-box-shadow: 0px 2px 4px rgba(126, 142, 177, 0.12);
+    box-shadow: 0px 2px 4px rgba(126, 142, 177, 0.12);
+    border-radius: 6px; }
+  .searchable-container .searchable-items.grid .items.items-header-section {
+    display: none; }
+  .searchable-container .searchable-items.grid .items .user-profile {
+    text-align: center;
+    margin-top: 20px; }
+    .searchable-container .searchable-items.grid .items .user-profile .n-chk {
+      display: none; }
+    .searchable-container .searchable-items.grid .items .user-profile img {
+      border-radius: 12px; }
+  .searchable-container .searchable-items.grid .items .user-meta-info {
+    margin-top: 10px; }
+    .searchable-container .searchable-items.grid .items .user-meta-info .user-name {
+      font-size: 21px;
+      font-weight: 600;
+      margin-bottom: 0;
+      color: #2196f3; }
+    .searchable-container .searchable-items.grid .items .user-meta-info .user-work {
+      font-weight: 700;
+      font-size: 13px; }
+  .searchable-container .searchable-items.grid .items .user-email {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 24px; }
+    .searchable-container .searchable-items.grid .items .user-email .info-title {
+      font-size: 14px;
+      font-weight: 600;
+      color: #3b3f5c;
+      margin-bottom: 11px; }
+    .searchable-container .searchable-items.grid .items .user-email p {
+      color: #888ea8;
+      font-size: 13px;
+      margin-bottom: 11px; }
+  .searchable-container .searchable-items.grid .items .user-location {
+    display: flex;
+    justify-content: space-between; }
+    .searchable-container .searchable-items.grid .items .user-location .info-title {
+      font-size: 14px;
+      font-weight: 600;
+      color: #3b3f5c;
+      margin-bottom: 11px;
+      margin-right: 10px; }
+    .searchable-container .searchable-items.grid .items .user-location p {
+      color: #888ea8;
+      font-size: 13px;
+      margin-bottom: 11px; }
+  .searchable-container .searchable-items.grid .items .user-phone {
+    display: flex;
+    justify-content: space-between; }
+    .searchable-container .searchable-items.grid .items .user-phone .info-title {
+      font-size: 14px;
+      font-weight: 600;
+      color: #3b3f5c;
+      margin-bottom: 11px; }
+    .searchable-container .searchable-items.grid .items .user-phone p {
+      color: #888ea8;
+      font-size: 13px;
+      margin-bottom: 11px;
+      margin-right: 10px; }
+  .searchable-container .searchable-items.grid .items .action-btn {
+    font-weight: 600;
+    color: #acb0c3;
+    text-align: center;
+    margin: 20px 0; }
+    .searchable-container .searchable-items.grid .items .action-btn .edit, .searchable-container .searchable-items.grid .items .action-btn .delete {
+      margin-right: 5px;
+      cursor: pointer;
+      color: #515365;
+      width: 20px;
+      fill: rgba(27, 85, 226, 0.239216); }
+    .searchable-container .searchable-items.grid .items .action-btn .edit:hover, .searchable-container .searchable-items.grid .items .action-btn .delete:hover {
+      color: #1b55e2; }
+
+@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+  /* IE10+ CSS styles go here */
+  .new-control.new-checkbox .new-control-indicator {
+    top: -13px;
+    left: -8px; } }
+
+@media (max-width: 1199px) {
+  .searchable-container .searchable-items.list {
+    display: block;
+    width: 100%;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch; }
+  .searchable-container .searchable-items.grid .items {
+    -ms-flex: 0 0 33.333333%;
+    flex: 0 0 33.333333%;
+    max-width: 33.333333%; } }
+
+@media (max-width: 767px) {
+  .searchable-container .searchable-items.list {
+    display: block;
+    width: 100%;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch; }
+    .searchable-container .searchable-items.list .items {
+      min-width: 767px; }
+  .searchable-container .searchable-items.grid .items {
+    -ms-flex: 0 0 50%;
+    flex: 0 0 50%;
+    max-width: 50%; } }
+
+@media (max-width: 575px) {
+  .searchable-container .searchable-items.grid .items {
+    -ms-flex: 0 0 100%;
+    flex: 0 0 100%;
+    max-width: 100%; }
+  .filtered-list-search form > div {
+    width: 100%; } }
diff --git a/static/css/apps/invoice.css b/static/css/apps/invoice.css
new file mode 100644
index 00000000..83d2b4e4
--- /dev/null
+++ b/static/css/apps/invoice.css
@@ -0,0 +1,370 @@
+/*
+	===============================
+			@Import	Function
+	===============================
+*/
+/*
+	===============================
+			@Import	Mixins
+	===============================
+*/
+@keyframes fadeInUp {
+  from {
+    transform: translate3d(0, 40px, 0); }
+  to {
+    transform: translate3d(0, 0, 0);
+    opacity: 1; } }
+
+@-webkit-keyframes fadeInUp {
+  from {
+    transform: translate3d(0, 40px, 0); }
+  to {
+    transform: translate3d(0, 0, 0);
+    opacity: 1; } }
+
+.animated {
+  animation-duration: 1s;
+  animation-fill-mode: both;
+  -webkit-animation-duration: 1s;
+  -webkit-animation-fill-mode: both; }
+
+.animatedFadeInUp {
+  opacity: 0; }
+
+.fadeInUp {
+  opacity: 0;
+  animation-name: fadeInUp;
+  -webkit-animation-name: fadeInUp; }
+
+.actions-btn-tooltip.tooltip {
+  opacity: 1;
+  top: -11px !important; }
+
+.actions-btn-tooltip .arrow:before {
+  border-top-color: #3b3f5c; }
+
+.actions-btn-tooltip .tooltip-inner {
+  background: #3b3f5c;
+  color: #fff;
+  font-weight: 700;
+  border-radius: 30px;
+  box-shadow: 0px 5px 15px 1px rgba(113, 106, 202, 0.2);
+  padding: 4px 16px; }
+
+.doc-container {
+  position: relative;
+  display: flex;
+  background: #fff;
+  border-radius: 6px;
+  -webkit-box-shadow: 0 4px 6px 0 rgba(85, 85, 85, 0.08), 0 1px 20px 0 rgba(0, 0, 0, 0.07), 0px 1px 11px 0px rgba(0, 0, 0, 0.07);
+  -moz-box-shadow: 0 4px 6px 0 rgba(85, 85, 85, 0.08), 0 1px 20px 0 rgba(0, 0, 0, 0.07), 0px 1px 11px 0px rgba(0, 0, 0, 0.07);
+  box-shadow: 0 4px 6px 0 rgba(85, 85, 85, 0.08), 0 1px 20px 0 rgba(0, 0, 0, 0.07), 0px 1px 11px 0px rgba(0, 0, 0, 0.07); }
+
+.tab-title {
+  min-width: 250px; }
+  .tab-title .search {
+    border-bottom: 1px solid #e0e6ed;
+    border-right: 1px solid #e0e6ed; }
+    .tab-title .search input {
+      border: none;
+      padding: 18px 18px 18px 18px;
+      background: transparent;
+      height: auto; }
+      .tab-title .search input::-webkit-input-placeholder {
+        /* Chrome/Opera/Safari */
+        color: #888ea8; }
+      .tab-title .search input::-moz-placeholder {
+        /* Firefox 19+ */
+        color: #888ea8; }
+      .tab-title .search input:-ms-input-placeholder {
+        /* IE 10+ */
+        color: #888ea8; }
+      .tab-title .search input:-moz-placeholder {
+        /* Firefox 18- */
+        color: #888ea8; }
+  .tab-title .inv-list-container {
+    position: relative;
+    margin: auto;
+    overflow: auto;
+    border-right: 1px solid #e0e6ed;
+    height: calc(100vh - 238px); }
+  .tab-title .nav-item {
+    border-bottom: 1px solid #e0e6ed; }
+  .tab-title .list-actions {
+    padding: 20px 10px;
+    border-radius: 5px;
+    transition: all 0.35s ease;
+    cursor: pointer; }
+    .tab-title .list-actions.active {
+      background-color: #fff;
+      -webkit-transform: translateY(0) scale(1.03);
+      transform: translateY(0) scale(1.03);
+      box-shadow: 0px 0px 15px 1px #ebedf2; }
+    .tab-title .list-actions:hover {
+      -webkit-transform: translateY(0) scale(1.03);
+      transform: translateY(0) scale(1.03);
+      box-shadow: 0px 0px 15px 1px #ebedf2; }
+    .tab-title .list-actions .f-m-body {
+      display: flex; }
+      .tab-title .list-actions .f-m-body .f-head {
+        margin-right: 13px;
+        align-self: center; }
+        .tab-title .list-actions .f-m-body .f-head svg {
+          background: rgba(0, 23, 55, 0.08);
+          border-radius: 50%;
+          padding: 6px;
+          color: #0e1726;
+          width: 30px;
+          height: 30px; }
+      .tab-title .list-actions .f-m-body .f-body .invoice-number {
+        margin-bottom: 0;
+        font-size: 12px;
+        color: #888ea8;
+        font-weight: 600; }
+      .tab-title .list-actions .f-m-body .f-body .invoice-customer-name {
+        font-size: 14px;
+        font-weight: 700;
+        color: #0e1726;
+        margin-bottom: 0; }
+        .tab-title .list-actions .f-m-body .f-body .invoice-customer-name span {
+          color: #3b3f5c; }
+      .tab-title .list-actions .f-m-body .f-body .invoice-generated-date {
+        margin-bottom: 0;
+        font-size: 13px;
+        font-weight: 600;
+        color: #3b3f5c; }
+
+.invoice-container {
+  width: 100%; }
+
+.invoice-inbox {
+  position: relative;
+  overflow-x: hidden;
+  overflow-y: auto;
+  max-width: 100%;
+  width: 100%;
+  height: calc(100vh - 179px); }
+  .invoice-inbox .inv-not-selected {
+    display: flex;
+    height: 100%;
+    justify-content: center;
+    background-image: url(../../img/bg.png);
+    border-bottom-right-radius: 6px;
+    border-top-right-radius: 6px; }
+    .invoice-inbox .inv-not-selected p {
+      align-self: center;
+      font-size: 18px;
+      color: #3b3f5c;
+      margin-bottom: 0;
+      font-weight: 600;
+      background: #bfc9d4;
+      padding: 7px 11px;
+      border-radius: 6px;
+      -webkit-box-shadow: 0px 2px 4px rgba(126, 142, 177, 0.12);
+      box-shadow: 0px 2px 4px rgba(126, 142, 177, 0.12); }
+  .invoice-inbox .invoice-header-section {
+    display: flex;
+    justify-content: space-between;
+    padding: 17px 20px;
+    border-bottom: 1px solid #ebedf2;
+    display: none; }
+  .invoice-inbox .inv-number {
+    font-size: 18px;
+    font-weight: 700;
+    margin-bottom: 0;
+    color: #888ea8; }
+  .invoice-inbox .invoice-action svg {
+    cursor: pointer;
+    font-weight: 600;
+    color: #888ea8;
+    margin-right: 6px;
+    vertical-align: middle;
+    fill: rgba(0, 23, 55, 0.08); }
+    .invoice-inbox .invoice-action svg:not(:last-child) {
+      margin-right: 15px; }
+    .invoice-inbox .invoice-action svg:hover {
+      color: #1b55e2;
+      fill: rgba(27, 85, 226, 0.239216); }
+  .invoice-inbox #ct {
+    display: none; }
+
+/*
+===================
+
+     Invoice
+
+===================
+*/
+/*Invoice*/
+.content-section {
+  padding: 36px 35px; }
+
+.invoice .content-section {
+  height: calc(100vh - 193px); }
+  .invoice .content-section .inv--head-section {
+    margin-bottom: 50px; }
+    .invoice .content-section .inv--head-section h3.in-heading {
+      font-size: 32px;
+      font-weight: 700;
+      color: #0e1726;
+      margin: 0; }
+    .invoice .content-section .inv--head-section div.company-info {
+      display: flex;
+      justify-content: flex-end; }
+      .invoice .content-section .inv--head-section div.company-info svg {
+        width: 42px;
+        height: 42px;
+        margin-right: 10px;
+        color: #1b55e2;
+        fill: rgba(27, 85, 226, 0.239216); }
+    .invoice .content-section .inv--head-section .inv-brand-name {
+      font-size: 23px;
+      font-weight: 600;
+      margin-bottom: 0;
+      align-self: center; }
+  .invoice .content-section .inv--detail-section .inv-to {
+    font-weight: 700;
+    font-size: 15px;
+    margin-bottom: 15px; }
+  .invoice .content-section .inv--detail-section .inv-customer-name {
+    font-weight: 700;
+    margin-bottom: 2px;
+    font-size: 13px;
+    color: #1b55e2; }
+  .invoice .content-section .inv--detail-section .inv-detail-title {
+    font-weight: 700;
+    margin-bottom: 0;
+    font-size: 15px;
+    margin-bottom: 15px; }
+  .invoice .content-section .inv--detail-section .inv-details {
+    font-weight: 700;
+    margin-bottom: 15px; }
+  .invoice .content-section .inv--detail-section .inv-street-addr, .invoice .content-section .inv--detail-section .inv-email-address {
+    font-weight: 600;
+    margin-bottom: 2px;
+    font-size: 13px; }
+  .invoice .content-section .inv--detail-section .inv-list-number {
+    margin-bottom: 2px; }
+    .invoice .content-section .inv--detail-section .inv-list-number .inv-title {
+      font-weight: 700;
+      font-size: 13px; }
+    .invoice .content-section .inv--detail-section .inv-list-number .inv-number {
+      font-weight: 700;
+      font-size: 13px;
+      color: #1b55e2; }
+  .invoice .content-section .inv--detail-section .inv-created-date, .invoice .content-section .inv--detail-section .inv-due-date {
+    margin-bottom: 2px; }
+    .invoice .content-section .inv--detail-section .inv-created-date .inv-title, .invoice .content-section .inv--detail-section .inv-due-date .inv-title {
+      font-weight: 700;
+      font-size: 13px; }
+    .invoice .content-section .inv--detail-section .inv-created-date .inv-date, .invoice .content-section .inv--detail-section .inv-due-date .inv-date {
+      font-size: 13px;
+      font-weight: 600; }
+  .invoice .content-section .inv--product-table-section {
+    margin-top: 50px;
+    margin-bottom: 50px; }
+    .invoice .content-section .inv--product-table-section table {
+      border: 1px solid #e0e6ed; }
+    .invoice .content-section .inv--product-table-section thead tr {
+      border: none;
+      background: #ebedf2; }
+    .invoice .content-section .inv--product-table-section th {
+      border: none;
+      color: #1b55e2; }
+    .invoice .content-section .inv--product-table-section td {
+      border-top: 1px solid #e0e6ed;
+      color: #515365;
+      font-weight: 600; }
+  .invoice .content-section .inv--payment-info {
+    font-size: 13px;
+    font-weight: 600;
+    margin-bottom: 52px; }
+    .invoice .content-section .inv--payment-info .inv-title {
+      color: #1b55e2;
+      font-weight: 600;
+      margin-bottom: 15px; }
+    .invoice .content-section .inv--payment-info .inv-subtitle {
+      font-weight: 700;
+      font-size: 14px; }
+  .invoice .content-section .inv--total-amounts {
+    font-size: 13px;
+    font-weight: 600;
+    margin-bottom: 52px; }
+    .invoice .content-section .inv--total-amounts .grand-total-title h4, .invoice .content-section .inv--total-amounts .grand-total-amount h4 {
+      position: relative;
+      font-weight: 700;
+      font-size: 16px;
+      margin-bottom: 0;
+      padding: 0;
+      color: #0e1726;
+      display: inline-block;
+      letter-spacing: 1px; }
+
+/*    Inv head section   */
+/*    Inv detail section    */
+/*inv-list-number*/
+/*inv-created-date*/
+/*inv-due-date*/
+/*    Inv product table section    */
+/*inv--payment-info*/
+/*inv--total-amounts*/
+/*inv--thankYou*/
+.inv--thankYou {
+  display: none;
+  text-align: center; }
+  .inv--thankYou p {
+    margin-bottom: 0;
+    font-weight: 600;
+    font-size: 12px;
+    color: #888ea8; }
+
+@media print {
+  body * {
+    visibility: hidden; }
+  #ct {
+    visibility: visible; }
+    #ct * {
+      visibility: visible; }
+  .doc-container {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0; } }
+
+@page {
+  size: auto;
+  margin: 0mm; }
+
+@media (max-width: 1199px) {
+  .doc-container {
+    overflow: auto; }
+  .tab-title {
+    position: absolute;
+    z-index: 60;
+    left: -300px; }
+    .tab-title.open-inv-sidebar {
+      left: 0;
+      background: #fff; }
+  .app-hamburger-container {
+    text-align: right; }
+  .hamburger {
+    position: relative;
+    top: -13px;
+    padding: 6px 9px 6px 9px;
+    font-size: 20px;
+    color: #fff;
+    align-self: center;
+    display: inline-block;
+    background-color: #515365;
+    border-radius: 50%; } }
+
+@media (max-width: 575px) {
+  .invoice .content-section .inv--head-section div.company-info {
+    justify-content: flex-start; }
+  .invoice .content-section .inv--detail-section .inv-detail-title {
+    margin-top: 20px;
+    margin-bottom: 10px; } }
+
+@media (max-width: 991px) {
+  .layout-top-spacing {
+    margin-top: 37px; } }
diff --git a/static/css/apps/mailbox.css b/static/css/apps/mailbox.css
new file mode 100644
index 00000000..977c9e7b
--- /dev/null
+++ b/static/css/apps/mailbox.css
@@ -0,0 +1,918 @@
+/*
+	===============================
+			@Import	Function
+	===============================
+*/
+/*
+	===============================
+			@Import	Mixins
+	===============================
+*/
+[class*="g-dot-"] {
+  position: relative; }
+  [class*="g-dot-"]:before {
+    position: absolute;
+    padding: 4px;
+    content: '';
+    background: transparent;
+    border-radius: 50%;
+    top: 15px;
+    left: 0;
+    border: 2px solid #515365; }
+
+.g-dot-primary:before {
+  border: none;
+  background: #2196f3; }
+
+.g-dot-warning:before {
+  border: none;
+  background: #e2a03f; }
+
+.g-dot-success:before {
+  border: none;
+  background: #8dbf42; }
+
+.g-dot-danger:before {
+  border: none;
+  background: #e7515a; }
+
+.mail-content-container.mailInbox [data-original-title="Restore"], .mail-content-container.sentmail [data-original-title="Restore"], .mail-content-container.important [data-original-title="Restore"], .mail-content-container.spam [data-original-title="Restore"] {
+  display: none; }
+
+.mail-content-container.trashed [data-original-title="Reply"], .mail-content-container.trashed [data-original-title="Forward"], .mail-content-container.trashed [data-original-title="Print"] {
+  display: none; }
+
+/*----------Theme checkbox---------*/
+.new-control {
+  position: relative;
+  display: -ms-inline-flexbox;
+  display: inline-flex; }
+
+.new-control-input {
+  position: absolute;
+  z-index: -1;
+  opacity: 0; }
+
+.new-control.new-checkbox {
+  cursor: pointer; }
+  .new-control.new-checkbox .new-control-indicator {
+    position: relative;
+    top: .25rem;
+    left: 0;
+    display: block;
+    width: 1rem;
+    height: 1rem;
+    pointer-events: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    background-color: #bfc9d4;
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: 50% 50%;
+    border-radius: 2px;
+    margin-right: 13px; }
+  .new-control.new-checkbox > input:checked ~ span.new-control-indicator {
+    background: #888ea8; }
+    .new-control.new-checkbox > input:checked ~ span.new-control-indicator:after {
+      display: block; }
+  .new-control.new-checkbox span.new-control-indicator:after {
+    border: solid #fff;
+    top: 50%;
+    left: 50%;
+    margin-left: -2px;
+    margin-top: -6px;
+    width: 5px;
+    height: 10px;
+    border-width: 0 2px 2px 0 !important;
+    transform: rotate(45deg);
+    content: '';
+    position: absolute;
+    display: none; }
+  .new-control.new-checkbox.checkbox-primary > input:checked ~ span.new-control-indicator {
+    background: #3b3f5c; }
+
+.mail-box-container {
+  position: relative;
+  display: flex;
+  border-radius: 6px;
+  background-color: #fff;
+  -webkit-box-shadow: 0 4px 6px 0 rgba(85, 85, 85, 0.08), 0 1px 20px 0 rgba(0, 0, 0, 0.07), 0px 1px 11px 0px rgba(0, 0, 0, 0.07);
+  -moz-box-shadow: 0 4px 6px 0 rgba(85, 85, 85, 0.08), 0 1px 20px 0 rgba(0, 0, 0, 0.07), 0px 1px 11px 0px rgba(0, 0, 0, 0.07);
+  box-shadow: 0 4px 6px 0 rgba(85, 85, 85, 0.08), 0 1px 20px 0 rgba(0, 0, 0, 0.07), 0px 1px 11px 0px rgba(0, 0, 0, 0.07);
+  height: calc(100vh - 179px); }
+  .mail-box-container .avatar-sm {
+    width: 2.5rem;
+    height: 2.5rem;
+    font-size: .83333rem; }
+  .mail-box-container .avatar {
+    position: relative;
+    display: inline-block;
+    width: 34px;
+    height: 34px;
+    font-size: 12px; }
+    .mail-box-container .avatar .avatar-title {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+      background-color: #060818;
+      color: #ebedf2; }
+
+.mail-overlay {
+  display: none;
+  position: absolute;
+  width: 100vw;
+  height: 100%;
+  background: #3b3f5c !important;
+  z-index: 4 !important;
+  opacity: 0;
+  transition: all 0.5s ease-in-out; }
+  .mail-overlay.mail-overlay-show {
+    display: block;
+    opacity: .7; }
+
+.tab-title {
+  padding: 33px 15px;
+  max-width: 115px;
+  border-right: 1px solid #e0e6ed; }
+  .tab-title .mail-btn-container {
+    padding: 0 30px; }
+  .tab-title #btn-compose-mail {
+    transform: none;
+    background: #5c1ac3;
+    border: none !important;
+    padding: 7px 9px;
+    font-size: 14px;
+    font-weight: 700;
+    letter-spacing: 1px;
+    color: #fff !important;
+    width: 40px;
+    margin: 0 auto;
+    box-shadow: 0px 5px 10px 0px rgba(92, 26, 195, 0.380392); }
+    .tab-title #btn-compose-mail:hover {
+      box-shadow: none; }
+    .tab-title #btn-compose-mail svg {
+      width: 22px;
+      height: 22px; }
+  .tab-title.mail-menu-show {
+    left: 0;
+    width: 100%;
+    height: 100%; }
+  .tab-title .nav-pills .nav-link.active, .tab-title .nav-pills .show > .nav-link {
+    background-color: transparent;
+    color: #1b55e2;
+    font-weight: 600;
+    fill: rgba(27, 85, 226, 0.239216); }
+  .tab-title .mail-categories-container {
+    margin-top: 35px;
+    padding: 0 0; }
+  .tab-title .mail-sidebar-scroll {
+    position: relative;
+    margin: auto;
+    width: 100%;
+    overflow: auto;
+    height: calc(100vh - 283px); }
+    .tab-title .mail-sidebar-scroll .ps__rail-y {
+      right: -15px !important; }
+  .tab-title .nav-pills:nth-child(1) .nav-item:first-child a.nav-link {
+    border-top: 1px solid #e0e6ed;
+    padding-top: 24px; }
+  .tab-title .nav-pills a.nav-link {
+    position: relative;
+    font-weight: 600;
+    color: #515365;
+    padding: 14px 0px 14px 0px;
+    cursor: pointer;
+    font-size: 14px;
+    display: block;
+    text-align: center;
+    border-radius: 0;
+    border-bottom: 1px solid #e0e6ed; }
+  .tab-title .nav-pills .nav-link.active svg, .tab-title .nav-pills .show > .nav-link svg {
+    color: #1b55e2; }
+  .tab-title .nav-pills a.nav-link svg {
+    width: 19px;
+    height: 19px;
+    margin-bottom: 7px;
+    fill: rgba(0, 23, 55, 0.08);
+    color: #888ea8; }
+  .tab-title .nav-pills a.nav-link span.nav-names {
+    display: block;
+    letter-spacing: 1px;
+    padding: 0; }
+  .tab-title .nav-pills a.nav-link .mail-badge {
+    background: #1b55e2;
+    border-radius: 50%;
+    position: absolute;
+    right: 8px;
+    padding: 3px 0;
+    height: 19px;
+    width: 19px;
+    color: #fff;
+    font-weight: 500;
+    font-size: 10px;
+    top: 7px; }
+
+.group-section {
+  font-weight: 700;
+  font-size: 15px;
+  display: inline-block;
+  color: #060818;
+  letter-spacing: 1px;
+  margin-top: 22px;
+  margin-bottom: 13px;
+  display: flex;
+  justify-content: center; }
+  .group-section svg {
+    color: #060818;
+    margin-right: 6px;
+    align-self: center;
+    width: 17px;
+    height: 17px;
+    fill: #acb0c3; }
+
+.tab-title .nav-pills.group-list .nav-item a {
+  position: relative;
+  padding: 6px 45px 6px 41px;
+  letter-spacing: 1px;
+  border-radius: 5px;
+  font-size: 12px;
+  font-weight: 700;
+  color: #888ea8;
+  border-bottom: none !important; }
+  .tab-title .nav-pills.group-list .nav-item a.g-dot-primary.active:before {
+    background: #2196f3; }
+  .tab-title .nav-pills.group-list .nav-item a.g-dot-warning.active:before {
+    background: #e2a03f; }
+  .tab-title .nav-pills.group-list .nav-item a.g-dot-success.active:before {
+    background: #8dbf42; }
+  .tab-title .nav-pills.group-list .nav-item a.g-dot-danger.active:before {
+    background: #e7515a; }
+  .tab-title .nav-pills.group-list .nav-item a[class*="g-dot-"]:before {
+    position: absolute;
+    padding: 3px;
+    content: '';
+    border-radius: 50%;
+    top: 11px;
+    left: 18px;
+    border: 2px solid #e0e6ed; }
+
+.tab-title .nav-pills .nav-item .dropdown-menu {
+  box-shadow: 0px 0px 15px 1px rgba(113, 106, 202, 0.2);
+  padding: 0;
+  border: none; }
+
+.tab-title li.mail-labels a.dropdown-item {
+  font-size: 13px;
+  font-weight: 700;
+  padding: 8px 18px; }
+  .tab-title li.mail-labels a.dropdown-item:hover {
+    background-color: #fff;
+    color: #1b55e2; }
+
+.tab-title li.mail-labels .label:after {
+  position: absolute;
+  content: "";
+  height: 6px;
+  width: 6px;
+  border-radius: 50%;
+  right: 15px;
+  top: 43%; }
+
+/*Mail Labels*/
+.actions-btn-tooltip.tooltip {
+  opacity: 1;
+  top: -11px !important; }
+
+.actions-btn-tooltip .arrow:before {
+  border-top-color: #3b3f5c; }
+
+.actions-btn-tooltip .tooltip-inner {
+  background: #3b3f5c;
+  color: #fff;
+  font-weight: 700;
+  border-radius: 30px;
+  box-shadow: 0px 5px 15px 1px rgba(113, 106, 202, 0.2);
+  padding: 4px 16px; }
+
+/*
+=====================
+    Mailbox Inbox
+=====================
+*/
+.mailbox-inbox {
+  position: relative;
+  overflow-x: hidden;
+  overflow-y: hidden;
+  max-width: 100%;
+  width: 100%;
+  background: #f9f9f9; }
+  .mailbox-inbox .mail-menu {
+    margin: 12px 13px 12px 13px;
+    width: 22px;
+    border-radius: 0;
+    color: #515365;
+    align-self: center; }
+  .mailbox-inbox .search {
+    display: flex;
+    border-bottom: 1px solid #e0e6ed;
+    background: #ebedf2; }
+    .mailbox-inbox .search input {
+      border: none;
+      padding: 12px 13px 12px 13px;
+      background-color: #fff;
+      border-radius: 0;
+      border-top-right-radius: 6px; }
+      .mailbox-inbox .search input:focus {
+        box-shadow: 0 0 5px 2px #f1f2f3; }
+  .mailbox-inbox .action-center {
+    display: flex;
+    justify-content: space-between;
+    background: transparent;
+    padding: 14px 25px;
+    border-bottom: 1px solid #e0e6ed; }
+    .mailbox-inbox .action-center .new-control {
+      font-weight: 600;
+      color: #3b3f5c; }
+    .mailbox-inbox .action-center .nav-link {
+      padding: 0;
+      display: inline-block; }
+    .mailbox-inbox .action-center .more-actions .dropdown-menu {
+      top: 11px !important;
+      left: 9px !important; }
+    .mailbox-inbox .action-center .dropdown-menu.d-icon-menu {
+      padding: 0;
+      border: 1px solid #e0e6ed;
+      min-width: 6rem;
+      -webkit-box-shadow: 0px 0px 0px 1px rgba(136, 142, 168, 0.313725);
+      box-shadow: 0px 0px 4px 0px rgba(136, 142, 168, 0.313725);
+      border-radius: 6px;
+      top: 11px !important;
+      left: 9px !important; }
+      .mailbox-inbox .action-center .dropdown-menu.d-icon-menu a {
+        font-size: 14px;
+        font-weight: 600;
+        padding: 10px 23px 10px 43px;
+        color: #3b3f5c;
+        letter-spacing: 1px; }
+        .mailbox-inbox .action-center .dropdown-menu.d-icon-menu a[class*="g-dot-"]:before {
+          left: 19px; }
+        .mailbox-inbox .action-center .dropdown-menu.d-icon-menu a.dropdown-item.active, .mailbox-inbox .action-center .dropdown-menu.d-icon-menu a.dropdown-item:active {
+          background-color: transparent; }
+        .mailbox-inbox .action-center .dropdown-menu.d-icon-menu a svg {
+          vertical-align: middle;
+          font-size: 15px;
+          margin-right: 7px;
+          color: #888ea8; }
+    .mailbox-inbox .action-center .nav-link:after {
+      display: none; }
+    .mailbox-inbox .action-center svg {
+      cursor: pointer;
+      color: #888ea8;
+      margin-right: 6px;
+      vertical-align: middle;
+      width: 20px;
+      height: 20px;
+      fill: #e0e6ed; }
+    .mailbox-inbox .action-center .nav-link.label-group svg {
+      margin-right: 12px; }
+    .mailbox-inbox .action-center svg:not(:last-child) {
+      margin-right: 12px; }
+    .mailbox-inbox .action-center svg.revive-mail, .mailbox-inbox .action-center svg.permanent-delete {
+      display: none; }
+    .mailbox-inbox .action-center.tab-trash-active .nav-link svg {
+      display: none; }
+    .mailbox-inbox .action-center.tab-trash-active svg.action-important, .mailbox-inbox .action-center.tab-trash-active svg.action-spam, .mailbox-inbox .action-center.tab-trash-active svg.action-delete {
+      display: none; }
+    .mailbox-inbox .action-center.tab-trash-active svg.revive-mail, .mailbox-inbox .action-center.tab-trash-active svg.permanent-delete {
+      display: inline-block; }
+  .mailbox-inbox .more-actions svg.feather-more-vertical {
+    margin-right: 0; }
+  .mailbox-inbox .message-box {
+    padding: 0 0 0 0; }
+    .mailbox-inbox .message-box .message-box-scroll {
+      position: relative;
+      margin: auto;
+      width: 100%;
+      overflow: auto;
+      height: calc(100vh - 284px); }
+  .mailbox-inbox .mail-item[id*="unread-"] div.mail-item-heading .mail-item-inner .f-body .mail-title {
+    font-weight: 700;
+    color: #1b2e4b; }
+  .mailbox-inbox .mail-item[id*="unread-"] div.mail-item-heading .mail-item-inner .f-body .user-email {
+    font-weight: 700;
+    color: #0e1726; }
+  .mailbox-inbox .mail-item[id*="unread-"] div.mail-item-heading .mail-item-inner .mail-content-excerpt {
+    font-weight: 600;
+    color: #1b2e4b; }
+  .mailbox-inbox .mail-item[id*="unread-"] div.mail-item-heading .mail-item-inner .f-body .meta-time {
+    font-weight: 700; }
+  .mailbox-inbox .mail-item div.mail-item-heading {
+    padding: 11px 10px 11px 0;
+    cursor: pointer;
+    position: relative;
+    background: #fff;
+    -webkit-transition: all 0.35s ease;
+    transition: all 0.35s ease;
+    margin: 9px;
+    border: 1px solid #e0e6ed;
+    border-radius: 6px; }
+    .mailbox-inbox .mail-item div.mail-item-heading:hover {
+      background: #ebedf2;
+      border: 1px solid #1b55e2 !important; }
+    .mailbox-inbox .mail-item div.mail-item-heading .mail-item-inner {
+      padding-left: 15px; }
+      .mailbox-inbox .mail-item div.mail-item-heading .mail-item-inner .n-chk {
+        align-self: center; }
+      .mailbox-inbox .mail-item div.mail-item-heading .mail-item-inner .f-head {
+        align-self: center; }
+        .mailbox-inbox .mail-item div.mail-item-heading .mail-item-inner .f-head img {
+          width: 35px;
+          height: 35px;
+          border-radius: 50%; }
+      .mailbox-inbox .mail-item div.mail-item-heading .mail-item-inner .f-body {
+        align-self: center;
+        display: flex;
+        width: 100%; }
+        .mailbox-inbox .mail-item div.mail-item-heading .mail-item-inner .f-body > div.meta-title-tag {
+          display: flex;
+          width: 100%;
+          justify-content: space-between; }
+        .mailbox-inbox .mail-item div.mail-item-heading .mail-item-inner .f-body > div.meta-mail-time {
+          display: flex;
+          justify-content: space-between; }
+        .mailbox-inbox .mail-item div.mail-item-heading .mail-item-inner .f-body .user-email {
+          padding: 0 15px 0 20px;
+          min-width: 215px;
+          max-width: 215px;
+          font-size: 15px;
+          color: #607d8b;
+          margin-bottom: 0;
+          letter-spacing: 0px;
+          overflow: hidden !important;
+          text-overflow: ellipsis !important;
+          white-space: nowrap !important;
+          align-self: center; }
+        .mailbox-inbox .mail-item div.mail-item-heading .mail-item-inner .f-body .meta-time {
+          margin-bottom: 0;
+          float: right;
+          font-weight: 500;
+          font-size: 12px;
+          min-width: 75px;
+          max-width: 80px;
+          text-align: right; }
+        .mailbox-inbox .mail-item div.mail-item-heading .mail-item-inner .f-body .mail-title {
+          font-size: 15px;
+          color: #515365;
+          margin-bottom: 2px;
+          letter-spacing: 0px; }
+        .mailbox-inbox .mail-item div.mail-item-heading .mail-item-inner .f-body .tags {
+          position: relative; }
+          .mailbox-inbox .mail-item div.mail-item-heading .mail-item-inner .f-body .tags span {
+            display: none;
+            margin-left: 11px; }
+    .mailbox-inbox .mail-item div.mail-item-heading.personal .mail-item-inner .f-body .tags span.g-dot-primary, .mailbox-inbox .mail-item div.mail-item-heading.work .mail-item-inner .f-body .tags span.g-dot-warning, .mailbox-inbox .mail-item div.mail-item-heading.social .mail-item-inner .f-body .tags span.g-dot-success, .mailbox-inbox .mail-item div.mail-item-heading.private .mail-item-inner .f-body .tags span.g-dot-danger {
+      display: inline-block; }
+    .mailbox-inbox .mail-item div.mail-item-heading .mail-item-inner .f-body .tags span[class*="g-dot-"]:before {
+      top: -11px;
+      left: -13px; }
+    .mailbox-inbox .mail-item div.mail-item-heading .mail-item-inner .mail-content-excerpt {
+      font-size: 14px;
+      margin-bottom: 0;
+      color: #607d8b;
+      margin-left: 0;
+      margin-right: 0;
+      overflow: hidden !important;
+      text-overflow: ellipsis !important;
+      white-space: nowrap !important;
+      width: calc(100vw - 830px);
+      align-self: center; }
+      .mailbox-inbox .mail-item div.mail-item-heading .mail-item-inner .mail-content-excerpt svg.attachment-indicator {
+        width: 18px;
+        height: 18px;
+        margin-right: 5px;
+        vertical-align: top; }
+  .mailbox-inbox .mail-item.sentmail div.mail-item-heading .mail-item-inner .mail-content-excerpt, .mailbox-inbox .mail-item.draft div.mail-item-heading .mail-item-inner .mail-content-excerpt {
+    margin-left: 31px; }
+  .mailbox-inbox .mail-item div.mail-item-heading .attachments {
+    width: calc(100vw - 830px);
+    margin: 0 auto;
+    overflow: hidden !important;
+    text-overflow: ellipsis !important;
+    white-space: nowrap !important;
+    width: calc(100vw - 830px); }
+    .mailbox-inbox .mail-item div.mail-item-heading .attachments span {
+      display: inline-block;
+      border: 1px solid #bfc9d4;
+      padding: 1px 11px;
+      border-radius: 30px;
+      color: #3b3f5c;
+      background: transparent;
+      font-size: 12px;
+      margin-right: 3px;
+      font-weight: 700;
+      margin-bottom: 2px;
+      letter-spacing: 0px;
+      max-width: 96px;
+      overflow: hidden !important;
+      text-overflow: ellipsis !important;
+      white-space: nowrap !important; }
+
+/*
+=====================
+    Content Box
+=====================
+*/
+.content-box {
+  background-color: #f9f9f9;
+  position: absolute;
+  top: 0;
+  height: 100%;
+  width: 0px;
+  left: auto;
+  right: -46px;
+  overflow: hidden;
+  border-top-right-radius: 6px;
+  border-bottom-right-radius: 6px; }
+  .content-box .msg-close {
+    padding: 13px;
+    background: #fff;
+    -webkit-box-shadow: 0px 2px 4px rgba(126, 142, 177, 0.12);
+    box-shadow: 0px 2px 4px rgba(126, 142, 177, 0.12); }
+  .content-box svg.close-message {
+    font-size: 15px;
+    color: #3b3f5c;
+    padding: 3px;
+    align-self: center;
+    cursor: pointer;
+    margin-right: 12px; }
+  .content-box .mail-title {
+    font-size: 24px;
+    font-weight: 600;
+    color: #1b55e2;
+    margin-bottom: 0;
+    align-self: center; }
+
+.mailbox-inbox .collapse {
+  position: relative;
+  height: calc(100vh - 234px); }
+
+.mailbox-inbox .mail-content-container {
+  position: relative;
+  height: auto;
+  overflow: auto;
+  padding: 25px;
+  border-radius: 6px; }
+  .mailbox-inbox .mail-content-container .user-info img {
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    margin-right: 8px;
+    border: 3px solid #ebedf2; }
+  .mailbox-inbox .mail-content-container .user-info .avatar {
+    margin-right: 8px; }
+  .mailbox-inbox .mail-content-container .user-info .meta-title-tag .mail-usr-name {
+    margin-bottom: 0;
+    font-size: 18px;
+    font-weight: 700;
+    color: #2196f3; }
+  .mailbox-inbox .mail-content-container .user-info .user-email {
+    margin-bottom: 0;
+    font-weight: 600;
+    display: inline-block; }
+    .mailbox-inbox .mail-content-container .user-info .user-email span {
+      font-size: 16px;
+      font-weight: 700; }
+  .mailbox-inbox .mail-content-container .user-info .user-cc-mail {
+    margin-bottom: 0;
+    font-weight: 600;
+    margin-left: 8px;
+    display: inline-block; }
+    .mailbox-inbox .mail-content-container .user-info .user-cc-mail span {
+      font-size: 16px;
+      font-weight: 700; }
+  .mailbox-inbox .mail-content-container .user-info .meta-mail-time .meta-time {
+    display: inline-block;
+    font-weight: 700; }
+  .mailbox-inbox .mail-content-container .mail-content-meta-date {
+    font-size: 13px;
+    font-weight: 600;
+    color: #3b3f5c;
+    display: inline-block;
+    font-weight: 700; }
+  .mailbox-inbox .mail-content-container .action-btns a {
+    margin-right: 20px; }
+  .mailbox-inbox .mail-content-container .action-btns svg {
+    color: #acb0c3;
+    font-weight: 600; }
+    .mailbox-inbox .mail-content-container .action-btns svg.restore {
+      position: relative; }
+      .mailbox-inbox .mail-content-container .action-btns svg.restore:after {
+        content: '';
+        height: 28px;
+        width: 2px;
+        background: #acb0c3;
+        position: absolute;
+        border-radius: 50px;
+        left: 9px;
+        transform: rotate(30deg);
+        top: -3px; }
+  .mailbox-inbox .mail-content-container .mail-content-title {
+    font-weight: 600;
+    font-size: 20px;
+    color: #515365;
+    margin-bottom: 25px; }
+  .mailbox-inbox .mail-content-container p {
+    font-size: 14px;
+    color: #3b3f5c; }
+    .mailbox-inbox .mail-content-container p.mail-content {
+      padding-top: 45px;
+      border-top: 1px solid #e0e6ed;
+      margin-top: 20px; }
+  .mailbox-inbox .mail-content-container .attachments {
+    margin-top: 55px;
+    margin-bottom: 0; }
+    .mailbox-inbox .mail-content-container .attachments .attachments-section-title {
+      font-weight: 600;
+      color: #515365;
+      font-size: 16px;
+      border-bottom: 1px solid #e0e6ed;
+      padding-bottom: 9px;
+      margin-bottom: 20px; }
+  .mailbox-inbox .mail-content-container .attachment {
+    display: inline-block;
+    padding: 9px;
+    border-radius: 5px;
+    margin-bottom: 10px;
+    cursor: pointer;
+    min-width: 150px;
+    max-width: 235px; }
+    .mailbox-inbox .mail-content-container .attachment svg {
+      font-size: 18px;
+      margin-right: 13px;
+      color: #5c1ac3;
+      align-self: center; }
+    .mailbox-inbox .mail-content-container .attachment .file-name {
+      color: #3b3f5c;
+      font-size: 12px;
+      font-weight: 700;
+      margin-bottom: 0;
+      word-break: break-word; }
+    .mailbox-inbox .mail-content-container .attachment .file-size {
+      color: #3b3f5c;
+      font-size: 11px;
+      text-align: left;
+      font-weight: 700;
+      margin-bottom: 0; }
+
+#editor-container {
+  height: 200px; }
+
+.ql-toolbar.ql-snow {
+  border: 1px solid #e0e6ed;
+  margin-top: 30px; }
+
+.ql-container.ql-snow {
+  border: 1px solid #e0e6ed; }
+
+.modal-backdrop {
+  background-color: #515365; }
+
+.modal-content {
+  border: none;
+  box-shadow: 0px 0px 15px 1px rgba(113, 106, 202, 0.2); }
+  .modal-content svg.close {
+    position: absolute;
+    right: -7px;
+    top: -8px;
+    font-size: 12px;
+    font-weight: 600;
+    padding: 2px;
+    background: #fff;
+    border-radius: 5px;
+    opacity: 1;
+    color: #2196f3;
+    box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.2);
+    cursor: pointer;
+    transition: .600s; }
+    .modal-content svg.close:hover {
+      box-shadow: none;
+      transition: .600s;
+      opacity: 1 !important; }
+
+.compose-box {
+  background-color: #fff;
+  border-radius: 6px; }
+  .compose-box .compose-content form .validation-text {
+    display: none;
+    color: #e7515a;
+    font-weight: 600;
+    text-align: left;
+    margin-top: 6px;
+    font-size: 12px;
+    letter-spacing: 1px; }
+  .compose-box .compose-content form .mail-form p {
+    font-weight: 700;
+    color: #3b3f5c;
+    font-size: 16px;
+    margin-bottom: 0;
+    align-self: center; }
+  .compose-box .compose-content form .mail-form select {
+    padding: 5px;
+    font-weight: 700;
+    color: #1b55e2;
+    margin-left: 10px;
+    border-radius: 6px;
+    border: 1px solid #d3d3d3; }
+  .compose-box .compose-content form .mail-to svg, .compose-box .compose-content form .mail-cc svg, .compose-box .compose-content form .mail-subject svg {
+    align-self: center;
+    font-size: 19px;
+    margin-right: 14px;
+    color: #1b55e2;
+    font-weight: 600; }
+  .compose-box .compose-content form #editor-container h1, .compose-box .compose-content form #editor-container p {
+    color: #3b3f5c; }
+
+#composeMailModal .modal-content .modal-footer {
+  border-top: none;
+  padding-top: 0; }
+
+#composeMailModal .modal-footer .btn[data-dismiss="modal"] {
+  background-color: #fff;
+  color: #1b55e2;
+  font-weight: 700;
+  border: 1px solid #e8e8e8;
+  padding: 10px 25px; }
+  #composeMailModal .modal-footer .btn[data-dismiss="modal"] svg {
+    font-size: 11px;
+    font-weight: 600;
+    margin-right: 8px; }
+
+#composeMailModal .modal-footer #btn-reply, #composeMailModal .modal-footer #btn-fwd, #composeMailModal .modal-footer #btn-send {
+  background-color: #1b55e2;
+  color: #fff;
+  font-weight: 600;
+  border: 1px solid #1b55e2;
+  padding: 10px 25px; }
+
+#composeMailModal .modal-footer #btn-reply.disabled, #composeMailModal .modal-footer #btn-fwd.disabled, #composeMailModal .modal-footer #btn-send.disabled {
+  opacity: .53; }
+
+#composeMailModal .modal-footer #btn-save, #composeMailModal .modal-footer #btn-reply-save, #composeMailModal .modal-footer #btn-fwd-save {
+  background-color: #009688;
+  color: #fff;
+  font-weight: 600;
+  border: 1px solid #e0e6ed;
+  padding: 10px 25px; }
+
+@keyframes fadeInUp {
+  from {
+    transform: translate3d(0, 40px, 0); }
+  to {
+    transform: translate3d(0, 0, 0);
+    opacity: 1; } }
+
+@-webkit-keyframes fadeInUp {
+  from {
+    transform: translate3d(0, 40px, 0); }
+  to {
+    transform: translate3d(0, 0, 0);
+    opacity: 1; } }
+
+.animated {
+  animation-duration: 1s;
+  animation-fill-mode: both;
+  -webkit-animation-duration: 1s;
+  -webkit-animation-fill-mode: both; }
+
+.animatedFadeInUp {
+  opacity: 0; }
+
+.fadeInUp {
+  opacity: 0;
+  animation-name: fadeInUp;
+  -webkit-animation-name: fadeInUp; }
+
+@media (min-width: 992px) {
+  .main-container:not(.sidebar-closed) .mailbox-inbox .mail-item div.mail-item-heading .mail-item-inner .mail-content-excerpt {
+    width: calc(100vw - 857px); }
+  .main-container:not(.sidebar-closed) .mailbox-inbox .mail-item div.mail-item-heading .mail-item-inner .f-body .user-email {
+    min-width: 170px;
+    max-width: 170px; }
+  .main-container:not(.sidebar-closed) .mailbox-inbox .mail-item div.mail-item-heading .attachments {
+    width: calc(100vw - 940px); } }
+
+@media (max-width: 991px) {
+  .mail-box-container {
+    overflow-x: hidden;
+    overflow-y: auto; }
+  .mailbox-inbox .search input {
+    border-left: 1px solid #e0e6ed; }
+  .tab-title {
+    position: absolute;
+    z-index: 4;
+    left: -147px;
+    width: 0;
+    background: #fff; }
+    .tab-title.mail-menu-show {
+      left: 0;
+      width: 100%;
+      min-width: 111px; }
+  .mailbox-inbox {
+    -ms-flex: 0 0 100%;
+    flex: 0 0 100%;
+    max-width: 100%; }
+    .mailbox-inbox .mail-menu {
+      margin: 12px 13px 8px 13px; }
+    .mailbox-inbox .search {
+      background-color: #fff;
+      padding: 0; }
+    .mailbox-inbox .action-center {
+      padding: 14px 14px; }
+    .mailbox-inbox .mail-item div.mail-item-heading:hover {
+      background: transparent;
+      border: none !important; }
+    .mailbox-inbox .mail-item div.mail-item-heading .mail-item-inner {
+      padding-left: 14px; }
+      .mailbox-inbox .mail-item div.mail-item-heading .mail-item-inner .mail-content-excerpt {
+        width: calc(100vw - 527px); }
+      .mailbox-inbox .mail-item div.mail-item-heading .mail-item-inner .f-body .user-email {
+        min-width: 170px;
+        max-width: 170px; }
+    .mailbox-inbox .mail-item div.mail-item-heading .attachments {
+      width: calc(100vw - 527px);
+      padding: 0 15px; } }
+
+@media (max-width: 767px) {
+  .new-control.new-checkbox .new-control-indicator {
+    margin-right: 10px; }
+  .mailbox-inbox {
+    display: block; }
+    .mailbox-inbox .mail-item div.mail-item-heading {
+      margin: 0;
+      padding: 20px 10px 20px 0;
+      border: none; }
+      .mailbox-inbox .mail-item div.mail-item-heading .mail-item-inner .f-head img {
+        width: 35px;
+        height: 35px; }
+      .mailbox-inbox .mail-item div.mail-item-heading .mail-item-inner .f-body {
+        display: block; }
+    .mailbox-inbox .message-box {
+      width: 100%;
+      margin-bottom: 40px; }
+    .mailbox-inbox .mail-item div.mail-item-heading .mail-item-inner .f-body > div.meta-title-tag {
+      padding-left: 10px; }
+    .mailbox-inbox .mail-item div.mail-item-heading .mail-item-inner .f-body .user-email {
+      padding: 0 0 0 10px; }
+    .mailbox-inbox .mail-item div.mail-item-heading .mail-item-inner .f-body .meta-time {
+      min-width: auto; }
+    .mailbox-inbox .mail-item div.mail-item-heading .mail-item-inner .mail-content-excerpt {
+      width: calc(100vw - 192px);
+      padding-right: 7px; }
+    .mailbox-inbox .mail-item div.mail-item-heading .mail-item-inner .f-body .tags {
+      position: absolute;
+      right: 5px;
+      top: 23px;
+      width: 60px; }
+    .mailbox-inbox .mail-item.sentmail div.mail-item-heading .mail-item-inner .mail-content-excerpt, .mailbox-inbox .mail-item.draft div.mail-item-heading .mail-item-inner .mail-content-excerpt {
+      margin-left: 0;
+      width: calc(100vw - 178px); }
+    .mailbox-inbox .mail-item div.mail-item-heading .attachments {
+      width: calc(100vw - 192px);
+      padding: 0 11px; }
+    .mailbox-inbox .mail-item.sentmail div.mail-item-heading .attachments {
+      margin: 0 0 0 40px; } }
+
+@media (max-width: 575px) {
+  .mailbox-inbox .message-box {
+    margin-bottom: 0; }
+  .mailbox-inbox .mail-content-container .user-info {
+    display: block !important; }
+    .mailbox-inbox .mail-content-container .user-info img {
+      margin-bottom: 10px; }
+  .mailbox-inbox .mail-item div.mail-item-heading .mail-item-inner .f-body > div {
+    display: block; }
+    .mailbox-inbox .mail-item div.mail-item-heading .mail-item-inner .f-body > div.meta-mail-time {
+      display: block; }
+  .mailbox-inbox .mail-item div.mail-item-heading .mail-item-inner .f-body .meta-time {
+    margin-bottom: 0;
+    float: none; }
+  .mailbox-inbox .mail-item div.mail-item-heading .mail-item-inner .mail-content-excerpt {
+    margin-left: 0;
+    margin-right: 0;
+    width: calc(100vw - 215px); }
+  .mailbox-inbox .mail-content-container .action-btns a {
+    margin-right: 0; }
+  .compose-box .compose-content form .mail-form select {
+    margin-left: 3px;
+    margin-top: 10px; } }
+
+@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+  /* IE10+ CSS styles go here */
+  .tab-title {
+    width: 100%; }
+  .mailbox-inbox .mail-content-container .attachment .media .media-body {
+    flex: none; } }
diff --git a/static/css/apps/mailing-chat.css b/static/css/apps/mailing-chat.css
new file mode 100644
index 00000000..ddd98f93
--- /dev/null
+++ b/static/css/apps/mailing-chat.css
@@ -0,0 +1,664 @@
+/*
+	===============================
+			@Import	Function
+	===============================
+*/
+/*
+	===============================
+			@Import	Mixins
+	===============================
+*/
+.wrapper {
+  position: relative;
+  left: 50%;
+  width: 1000px;
+  height: 600px;
+  -moz-transform: translate(-50%, 0);
+  -ms-transform: translate(-50%, 0);
+  -webkit-transform: translate(-50%, 0);
+  transform: translate(-50%, 0); }
+
+.chat-system {
+  display: flex;
+  -webkit-box-shadow: 0 4px 6px 0 rgba(85, 85, 85, 0.08), 0 1px 20px 0 rgba(0, 0, 0, 0.07), 0px 1px 11px 0px rgba(0, 0, 0, 0.07);
+  -moz-box-shadow: 0 4px 6px 0 rgba(85, 85, 85, 0.08), 0 1px 20px 0 rgba(0, 0, 0, 0.07), 0px 1px 11px 0px rgba(0, 0, 0, 0.07);
+  box-shadow: 0 4px 6px 0 rgba(85, 85, 85, 0.08), 0 1px 20px 0 rgba(0, 0, 0, 0.07), 0px 1px 11px 0px rgba(0, 0, 0, 0.07);
+  height: calc(100vh - 179px); }
+  .chat-system .hamburger {
+    display: none; }
+  .chat-system .user-list-box {
+    width: 30%;
+    max-width: 400px;
+    border-right: 1px solid #ebedf2;
+    border-bottom-left-radius: 6px;
+    background: #fff;
+    border-top-left-radius: 6px; }
+    .chat-system .user-list-box .search {
+      position: relative;
+      padding: 13px 0 13px 0;
+      display: flex; }
+      .chat-system .user-list-box .search svg {
+        content: "\f169";
+        position: absolute;
+        left: 11px;
+        color: #acb0c3;
+        top: 25px;
+        left: 30px; }
+    .chat-system .user-list-box input {
+      border-radius: 4px;
+      padding-left: 38px;
+      font-size: 16px;
+      width: 100%;
+      color: #3b3f5c;
+      border: 0;
+      outline: none;
+      padding: 12px 16px 12px 43px;
+      background: #f1f2f3;
+      margin: 0 20px 0 20px;
+      border: 1px dashed #888ea8; }
+    .chat-system .user-list-box .people {
+      padding: 0;
+      overflow: auto;
+      position: relative;
+      margin: auto;
+      width: 100%;
+      overflow: auto;
+      height: calc(100vh - 252px); }
+      .chat-system .user-list-box .people .person {
+        position: relative;
+        width: 100%;
+        padding: 20px 20px;
+        cursor: pointer;
+        border-bottom: 1px solid #e0e6ed; }
+        .chat-system .user-list-box .people .person.border-none {
+          border-bottom: none; }
+
+.person {
+  display: inline-block; }
+
+.chat-system .user-list-box .people .person .user-info {
+  display: flex; }
+  .chat-system .user-list-box .people .person .user-info .f-head img {
+    width: 45px;
+    height: 45px;
+    margin-right: 12px;
+    -moz-border-radius: 50%;
+    -webkit-border-radius: 50%;
+    border-radius: 50%;
+    border: 2px solid #d3d3d3;
+    box-shadow: 0px 0px 14px 3px rgba(126, 142, 177, 0.24); }
+  .chat-system .user-list-box .people .person .user-info .f-body {
+    width: 100%; }
+    .chat-system .user-list-box .people .person .user-info .f-body .meta-info .user-name {
+      font-size: 14px;
+      color: #3b3f5c;
+      font-weight: 700; }
+    .chat-system .user-list-box .people .person .user-info .f-body .meta-info .user-meta-time {
+      font-size: 12px;
+      position: absolute;
+      top: 16px;
+      right: 11px;
+      color: #888ea8;
+      font-weight: 700;
+      float: right; }
+    .chat-system .user-list-box .people .person .user-info .f-body .preview {
+      font-size: 13px;
+      display: inline-block;
+      overflow: hidden !important;
+      width: 70%;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      color: #888ea8;
+      font-weight: 600; }
+
+.chat-system .user-list-box .people .person:hover .user-info .f-head img {
+  box-shadow: 0px 0px 15px 1px rgba(113, 106, 202, 0.2); }
+
+.chat-system .user-list-box .people .person:hover .user-info .f-body .meta-info .user-name, .chat-system .user-list-box .people .person:hover .user-info .f-body .meta-info .user-meta-time {
+  color: #1b55e2; }
+
+.chat-system .user-list-box .people .person.active:after, .chat-system .user-list-box .people .person:hover:after {
+  display: none; }
+
+.chat-system .chat-box {
+  position: relative;
+  width: 100%;
+  height: 616px;
+  background-image: url(../../img/bg.png);
+  border-bottom-right-radius: 6px;
+  border-top-right-radius: 6px;
+  height: calc(100vh - 179px); }
+  .chat-system .chat-box .chat-not-selected {
+    display: flex;
+    height: 100%;
+    justify-content: center; }
+    .chat-system .chat-box .chat-not-selected p {
+      align-self: center;
+      font-size: 18px;
+      color: #3b3f5c;
+      margin-bottom: 0;
+      font-weight: 600;
+      background: #bfc9d4;
+      padding: 7px 20px;
+      border-radius: 6px;
+      -webkit-box-shadow: 0px 2px 4px rgba(126, 142, 177, 0.12);
+      box-shadow: 0px 2px 4px rgba(126, 142, 177, 0.12); }
+      .chat-system .chat-box .chat-not-selected p svg {
+        vertical-align: middle;
+        color: #888ea8; }
+  .chat-system .chat-box .overlay-phone-call {
+    display: none;
+    position: absolute;
+    width: 100%;
+    height: calc(100vh - 179px);
+    z-index: 4 !important;
+    opacity: 0;
+    transition: all 0.5s ease-in-out;
+    background-color: #1b55e2;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 1000'%3E%3Cg %3E%3Ccircle fill='%232b50ed' cx='50' cy='0' r='50'/%3E%3Cg fill='%233154ea' %3E%3Ccircle cx='0' cy='50' r='50'/%3E%3Ccircle cx='100' cy='50' r='50'/%3E%3C/g%3E%3Ccircle fill='%233658e8' cx='50' cy='100' r='50'/%3E%3Cg fill='%233c5be5' %3E%3Ccircle cx='0' cy='150' r='50'/%3E%3Ccircle cx='100' cy='150' r='50'/%3E%3C/g%3E%3Ccircle fill='%23415fe2' cx='50' cy='200' r='50'/%3E%3Cg fill='%234662df' %3E%3Ccircle cx='0' cy='250' r='50'/%3E%3Ccircle cx='100' cy='250' r='50'/%3E%3C/g%3E%3Ccircle fill='%234b66dc' cx='50' cy='300' r='50'/%3E%3Cg fill='%235069d9' %3E%3Ccircle cx='0' cy='350' r='50'/%3E%3Ccircle cx='100' cy='350' r='50'/%3E%3C/g%3E%3Ccircle fill='%23546cd5' cx='50' cy='400' r='50'/%3E%3Cg fill='%23596fd2' %3E%3Ccircle cx='0' cy='450' r='50'/%3E%3Ccircle cx='100' cy='450' r='50'/%3E%3C/g%3E%3Ccircle fill='%235e72cf' cx='50' cy='500' r='50'/%3E%3Cg fill='%236275cb' %3E%3Ccircle cx='0' cy='550' r='50'/%3E%3Ccircle cx='100' cy='550' r='50'/%3E%3C/g%3E%3Ccircle fill='%236678c8' cx='50' cy='600' r='50'/%3E%3Cg fill='%236b7bc4' %3E%3Ccircle cx='0' cy='650' r='50'/%3E%3Ccircle cx='100' cy='650' r='50'/%3E%3C/g%3E%3Ccircle fill='%236f7ec0' cx='50' cy='700' r='50'/%3E%3Cg fill='%237381bc' %3E%3Ccircle cx='0' cy='750' r='50'/%3E%3Ccircle cx='100' cy='750' r='50'/%3E%3C/g%3E%3Ccircle fill='%237783b8' cx='50' cy='800' r='50'/%3E%3Cg fill='%237c86b4' %3E%3Ccircle cx='0' cy='850' r='50'/%3E%3Ccircle cx='100' cy='850' r='50'/%3E%3C/g%3E%3Ccircle fill='%238089b0' cx='50' cy='900' r='50'/%3E%3Cg fill='%23848bac' %3E%3Ccircle cx='0' cy='950' r='50'/%3E%3Ccircle cx='100' cy='950' r='50'/%3E%3C/g%3E%3Ccircle fill='%23888ea8' cx='50' cy='1000' r='50'/%3E%3C/g%3E%3C/svg%3E");
+    background-attachment: fixed;
+    background-size: contain; }
+    .chat-system .chat-box .overlay-phone-call.phone-call-show {
+      display: block;
+      opacity: 1; }
+    .chat-system .chat-box .overlay-phone-call > div {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      justify-content: space-between; }
+      .chat-system .chat-box .overlay-phone-call > div .calling-user-info {
+        padding: 20px 16px; }
+        .chat-system .chat-box .overlay-phone-call > div .calling-user-info svg {
+          font-size: 28px;
+          margin-right: 12px;
+          color: #fff;
+          vertical-align: middle;
+          cursor: pointer; }
+        .chat-system .chat-box .overlay-phone-call > div .calling-user-info .user-name {
+          font-size: 20px;
+          color: #fff;
+          vertical-align: middle;
+          margin-right: 8px; }
+        .chat-system .chat-box .overlay-phone-call > div .calling-user-info .call-status {
+          vertical-align: sub;
+          color: #fff;
+          font-size: 10px;
+          font-weight: 600; }
+      .chat-system .chat-box .overlay-phone-call > div .calling-user-img {
+        text-align: center; }
+        .chat-system .chat-box .overlay-phone-call > div .calling-user-img img {
+          border-radius: 50%;
+          border: 4px solid #ebedf2; }
+        .chat-system .chat-box .overlay-phone-call > div .calling-user-img .timer {
+          visibility: hidden;
+          font-size: 16px;
+          font-weight: 600;
+          margin-top: 7px;
+          color: #fff; }
+          .chat-system .chat-box .overlay-phone-call > div .calling-user-img .timer .minutes, .chat-system .chat-box .overlay-phone-call > div .calling-user-img .timer .seconds {
+            color: #ffffff; }
+      .chat-system .chat-box .overlay-phone-call > div .calling-options {
+        text-align: center; }
+        .chat-system .chat-box .overlay-phone-call > div .calling-options svg {
+          font-size: 25px;
+          border-radius: 50%;
+          padding: 11px;
+          background: #2196f3;
+          margin-bottom: 23px;
+          color: #fff;
+          cursor: pointer;
+          width: 48px;
+          height: 46px;
+          -webkit-transition: all 0.35s ease;
+          transition: all 0.35s ease; }
+          .chat-system .chat-box .overlay-phone-call > div .calling-options svg:hover {
+            -webkit-transform: translateY(-5px) scale(1.02);
+            transform: translateY(-5px) scale(1.02); }
+          .chat-system .chat-box .overlay-phone-call > div .calling-options svg:not(:last-child) {
+            margin-right: 7px; }
+          .chat-system .chat-box .overlay-phone-call > div .calling-options svg.switch-to-microphone {
+            position: relative; }
+            .chat-system .chat-box .overlay-phone-call > div .calling-options svg.switch-to-microphone.micro-off:after {
+              content: '';
+              height: 35px;
+              width: 2px;
+              background: #fff;
+              position: absolute;
+              left: 20px;
+              top: 6px; }
+          .chat-system .chat-box .overlay-phone-call > div .calling-options svg.cancel-call {
+            background-color: #e7515a; }
+  .chat-system .chat-box .overlay-video-call {
+    display: none;
+    position: absolute;
+    width: 100%;
+    height: calc(100vh - 179px);
+    z-index: 4 !important;
+    opacity: 0;
+    transition: all 0.5s ease-in-out;
+    background-color: #1b55e2;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 1000'%3E%3Cg %3E%3Ccircle fill='%232b50ed' cx='50' cy='0' r='50'/%3E%3Cg fill='%233154ea' %3E%3Ccircle cx='0' cy='50' r='50'/%3E%3Ccircle cx='100' cy='50' r='50'/%3E%3C/g%3E%3Ccircle fill='%233658e8' cx='50' cy='100' r='50'/%3E%3Cg fill='%233c5be5' %3E%3Ccircle cx='0' cy='150' r='50'/%3E%3Ccircle cx='100' cy='150' r='50'/%3E%3C/g%3E%3Ccircle fill='%23415fe2' cx='50' cy='200' r='50'/%3E%3Cg fill='%234662df' %3E%3Ccircle cx='0' cy='250' r='50'/%3E%3Ccircle cx='100' cy='250' r='50'/%3E%3C/g%3E%3Ccircle fill='%234b66dc' cx='50' cy='300' r='50'/%3E%3Cg fill='%235069d9' %3E%3Ccircle cx='0' cy='350' r='50'/%3E%3Ccircle cx='100' cy='350' r='50'/%3E%3C/g%3E%3Ccircle fill='%23546cd5' cx='50' cy='400' r='50'/%3E%3Cg fill='%23596fd2' %3E%3Ccircle cx='0' cy='450' r='50'/%3E%3Ccircle cx='100' cy='450' r='50'/%3E%3C/g%3E%3Ccircle fill='%235e72cf' cx='50' cy='500' r='50'/%3E%3Cg fill='%236275cb' %3E%3Ccircle cx='0' cy='550' r='50'/%3E%3Ccircle cx='100' cy='550' r='50'/%3E%3C/g%3E%3Ccircle fill='%236678c8' cx='50' cy='600' r='50'/%3E%3Cg fill='%236b7bc4' %3E%3Ccircle cx='0' cy='650' r='50'/%3E%3Ccircle cx='100' cy='650' r='50'/%3E%3C/g%3E%3Ccircle fill='%236f7ec0' cx='50' cy='700' r='50'/%3E%3Cg fill='%237381bc' %3E%3Ccircle cx='0' cy='750' r='50'/%3E%3Ccircle cx='100' cy='750' r='50'/%3E%3C/g%3E%3Ccircle fill='%237783b8' cx='50' cy='800' r='50'/%3E%3Cg fill='%237c86b4' %3E%3Ccircle cx='0' cy='850' r='50'/%3E%3Ccircle cx='100' cy='850' r='50'/%3E%3C/g%3E%3Ccircle fill='%238089b0' cx='50' cy='900' r='50'/%3E%3Cg fill='%23848bac' %3E%3Ccircle cx='0' cy='950' r='50'/%3E%3Ccircle cx='100' cy='950' r='50'/%3E%3C/g%3E%3Ccircle fill='%23888ea8' cx='50' cy='1000' r='50'/%3E%3C/g%3E%3C/svg%3E");
+    background-attachment: fixed;
+    background-size: contain; }
+    .chat-system .chat-box .overlay-video-call.video-call-show {
+      display: block;
+      opacity: 1; }
+    .chat-system .chat-box .overlay-video-call.onConnect {
+      background-image: url(../../../assets/img/640x426.jpg);
+      background-repeat: no-repeat;
+      background-position: 50% 50%;
+      background-size: cover;
+      background-attachment: unset; }
+    .chat-system .chat-box .overlay-video-call .video-caller {
+      position: absolute;
+      height: 112px;
+      width: 173px;
+      bottom: 8px;
+      right: 8px; }
+    .chat-system .chat-box .overlay-video-call > div {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      justify-content: space-between; }
+      .chat-system .chat-box .overlay-video-call > div .calling-user-info {
+        padding: 20px 16px; }
+        .chat-system .chat-box .overlay-video-call > div .calling-user-info svg {
+          font-size: 28px;
+          margin-right: 12px;
+          color: #fff;
+          cursor: pointer; }
+        .chat-system .chat-box .overlay-video-call > div .calling-user-info .user-name {
+          font-size: 20px;
+          color: #fff;
+          margin-right: 8px; }
+        .chat-system .chat-box .overlay-video-call > div .calling-user-info .call-status {
+          color: #fff;
+          font-size: 10px;
+          font-weight: 600;
+          margin-top: 10px; }
+        .chat-system .chat-box .overlay-video-call > div .calling-user-info .timer {
+          visibility: hidden;
+          font-size: 16px;
+          font-weight: 600;
+          color: #fff; }
+          .chat-system .chat-box .overlay-video-call > div .calling-user-info .timer .minutes, .chat-system .chat-box .overlay-video-call > div .calling-user-info .timer .seconds {
+            margin-bottom: 0;
+            color: #ffffff; }
+      .chat-system .chat-box .overlay-video-call > div .calling-user-img {
+        text-align: center; }
+        .chat-system .chat-box .overlay-video-call > div .calling-user-img img {
+          border-radius: 50%;
+          border: 4px solid #ebedf2; }
+      .chat-system .chat-box .overlay-video-call > div .calling-options {
+        text-align: center; }
+        .chat-system .chat-box .overlay-video-call > div .calling-options svg {
+          border-radius: 50%;
+          padding: 10px;
+          background: #2196f3;
+          margin-bottom: 23px;
+          color: #fff;
+          cursor: pointer;
+          -webkit-transition: all 0.35s ease;
+          transition: all 0.35s ease;
+          width: 47px;
+          height: 48px; }
+          .chat-system .chat-box .overlay-video-call > div .calling-options svg:hover {
+            -webkit-transform: translateY(-5px) scale(1.02);
+            transform: translateY(-5px) scale(1.02); }
+          .chat-system .chat-box .overlay-video-call > div .calling-options svg:not(:last-child) {
+            margin-right: 7px; }
+          .chat-system .chat-box .overlay-video-call > div .calling-options svg.switch-to-microphone {
+            position: relative; }
+            .chat-system .chat-box .overlay-video-call > div .calling-options svg.switch-to-microphone.micro-off:after {
+              content: '';
+              height: 35px;
+              width: 2px;
+              background: #fff;
+              position: absolute;
+              transform: rotate(46deg);
+              left: 20px;
+              top: 6px; }
+          .chat-system .chat-box .overlay-video-call > div .calling-options svg.cancel-call {
+            background-color: #e7515a; }
+  .chat-system .chat-box .chat-box-inner {
+    height: auto; }
+    .chat-system .chat-box .chat-box-inner .chat-meta-user {
+      display: none; }
+      .chat-system .chat-box .chat-box-inner .chat-meta-user.chat-active {
+        display: flex;
+        width: 100%;
+        justify-content: space-between;
+        background-color: #fafafa;
+        border-top-right-radius: 6px; }
+      .chat-system .chat-box .chat-box-inner .chat-meta-user .current-chat-user-name {
+        padding: 14px 15px 15px 15px; }
+        .chat-system .chat-box .chat-box-inner .chat-meta-user .current-chat-user-name span {
+          font-size: 15px;
+          color: #888ea8; }
+          .chat-system .chat-box .chat-box-inner .chat-meta-user .current-chat-user-name span img {
+            width: 45px;
+            height: 45px;
+            border-radius: 7px;
+            border-radius: 10px;
+            margin-top: 0px;
+            -webkit-transition: all 0.35s ease;
+            transition: all 0.35s ease;
+            margin-right: 10px; }
+          .chat-system .chat-box .chat-box-inner .chat-meta-user .current-chat-user-name span .name {
+            color: #0e1726;
+            font-weight: 600; }
+      .chat-system .chat-box .chat-box-inner .chat-meta-user.chat-active .chat-action-btn svg {
+        cursor: pointer;
+        color: #888ea8;
+        margin-right: 6px;
+        vertical-align: middle;
+        width: 20px;
+        height: 20px;
+        fill: rgba(0, 23, 55, 0.08); }
+        .chat-system .chat-box .chat-box-inner .chat-meta-user.chat-active .chat-action-btn svg:hover {
+          color: #1b55e2;
+          fill: rgba(27, 85, 226, 0.239216); }
+        .chat-system .chat-box .chat-box-inner .chat-meta-user.chat-active .chat-action-btn svg:not(:last-child) {
+          margin-right: 9px; }
+      .chat-system .chat-box .chat-box-inner .chat-meta-user.chat-active .chat-action-btn .dropdown-menu {
+        box-shadow: rgba(113, 106, 202, 0.2) 0px 0px 15px 1px;
+        top: 15px !important;
+        padding: 10px;
+        border-width: initial;
+        border-style: none;
+        border-color: initial;
+        border-image: initial; }
+        .chat-system .chat-box .chat-box-inner .chat-meta-user.chat-active .chat-action-btn .dropdown-menu a {
+          font-size: 12px;
+          font-weight: 700;
+          color: #888ea8;
+          padding: 11px 8px; }
+          .chat-system .chat-box .chat-box-inner .chat-meta-user.chat-active .chat-action-btn .dropdown-menu a svg {
+            color: #888ea8;
+            margin-right: 6px;
+            vertical-align: middle;
+            width: 20px;
+            height: 20px;
+            fill: rgba(0, 23, 55, 0.08); }
+          .chat-system .chat-box .chat-box-inner .chat-meta-user.chat-active .chat-action-btn .dropdown-menu a.dropdown-item.active, .chat-system .chat-box .chat-box-inner .chat-meta-user.chat-active .chat-action-btn .dropdown-menu a.dropdown-item:active {
+            background-color: transparent; }
+          .chat-system .chat-box .chat-box-inner .chat-meta-user.chat-active .chat-action-btn .dropdown-menu a:hover svg {
+            color: #1b55e2;
+            fill: rgba(27, 85, 226, 0.239216); }
+    .chat-system .chat-box .chat-box-inner .chat-conversation-box {
+      position: relative;
+      margin: auto;
+      width: 100%;
+      height: calc(100% - 79px);
+      overflow: auto; }
+      .chat-system .chat-box .chat-box-inner .chat-conversation-box .chat {
+        position: relative;
+        display: none;
+        overflow: hidden;
+        padding: 30px 40px 0;
+        -webkit-justify-content: flex-end;
+        justify-content: flex-end;
+        -webkit-flex-direction: column;
+        flex-direction: column; }
+        .chat-system .chat-box .chat-box-inner .chat-conversation-box .chat.active-chat {
+          display: block;
+          display: -webkit-flex;
+          display: flex; }
+          .chat-system .chat-box .chat-box-inner .chat-conversation-box .chat.active-chat .bubble {
+            -moz-transition-timing-function: cubic-bezier(0.4, -0.04, 1, 1);
+            -o-transition-timing-function: cubic-bezier(0.4, -0.04, 1, 1);
+            -webkit-transition-timing-function: cubic-bezier(0.4, -0.04, 1, 1);
+            transition-timing-function: cubic-bezier(0.4, -0.04, 1, 1); }
+            .chat-system .chat-box .chat-box-inner .chat-conversation-box .chat.active-chat .bubble:nth-of-type(1) {
+              -moz-animation-duration: 0.15s;
+              -webkit-animation-duration: 0.15s;
+              animation-duration: 0.15s; }
+            .chat-system .chat-box .chat-box-inner .chat-conversation-box .chat.active-chat .bubble:nth-of-type(2) {
+              -moz-animation-duration: 0.3s;
+              -webkit-animation-duration: 0.3s;
+              animation-duration: 0.3s; }
+            .chat-system .chat-box .chat-box-inner .chat-conversation-box .chat.active-chat .bubble:nth-of-type(3) {
+              -moz-animation-duration: 0.45s;
+              -webkit-animation-duration: 0.45s;
+              animation-duration: 0.45s; }
+            .chat-system .chat-box .chat-box-inner .chat-conversation-box .chat.active-chat .bubble:nth-of-type(4) {
+              -moz-animation-duration: 0.6s;
+              -webkit-animation-duration: 0.6s;
+              animation-duration: 0.6s; }
+            .chat-system .chat-box .chat-box-inner .chat-conversation-box .chat.active-chat .bubble:nth-of-type(5) {
+              -moz-animation-duration: 0.75s;
+              -webkit-animation-duration: 0.75s;
+              animation-duration: 0.75s; }
+            .chat-system .chat-box .chat-box-inner .chat-conversation-box .chat.active-chat .bubble:nth-of-type(6) {
+              -moz-animation-duration: 0.9s;
+              -webkit-animation-duration: 0.9s;
+              animation-duration: 0.9s; }
+            .chat-system .chat-box .chat-box-inner .chat-conversation-box .chat.active-chat .bubble:nth-of-type(7) {
+              -moz-animation-duration: 1.05s;
+              -webkit-animation-duration: 1.05s;
+              animation-duration: 1.05s; }
+            .chat-system .chat-box .chat-box-inner .chat-conversation-box .chat.active-chat .bubble:nth-of-type(8) {
+              -moz-animation-duration: 1.2s;
+              -webkit-animation-duration: 1.2s;
+              animation-duration: 1.2s; }
+            .chat-system .chat-box .chat-box-inner .chat-conversation-box .chat.active-chat .bubble:nth-of-type(9) {
+              -moz-animation-duration: 1.35s;
+              -webkit-animation-duration: 1.35s;
+              animation-duration: 1.35s; }
+            .chat-system .chat-box .chat-box-inner .chat-conversation-box .chat.active-chat .bubble:nth-of-type(10) {
+              -moz-animation-duration: 1.5s;
+              -webkit-animation-duration: 1.5s;
+              animation-duration: 1.5s; }
+  .chat-system .chat-box .chat-footer {
+    display: none; }
+    .chat-system .chat-box .chat-footer.chat-active {
+      display: block;
+      padding: 6px 10px;
+      background: #fafafa;
+      border-bottom-right-radius: 6px; }
+  .chat-system .chat-box .chat-form {
+    position: relative; }
+  .chat-system .chat-box .chat-input svg {
+    position: absolute;
+    color: #888ea8;
+    left: 11px;
+    top: 12px;
+    fill: rgba(0, 23, 55, 0.08); }
+  .chat-system .chat-box .chat-input input {
+    font-size: 16px;
+    width: 100%;
+    color: #3b3f5c;
+    border: 0;
+    outline: none;
+    padding: 12px 16px 12px 43px;
+    border: 1px dashed #888ea8;
+    background: #fafafa; }
+    .chat-system .chat-box .chat-input input::-webkit-input-placeholder {
+      /* Chrome/Opera/Safari */
+      color: #888ea8; }
+    .chat-system .chat-box .chat-input input::-moz-placeholder {
+      /* Firefox 19+ */
+      color: #888ea8; }
+    .chat-system .chat-box .chat-input input:-ms-input-placeholder {
+      /* IE 10+ */
+      color: #888ea8; }
+    .chat-system .chat-box .chat-input input:-moz-placeholder {
+      /* Firefox 18- */
+      color: #888ea8; }
+  .chat-system .chat-box .bubble {
+    font-size: 16px;
+    position: relative;
+    display: inline-block;
+    clear: both;
+    margin-bottom: 8px;
+    padding: 9px 18px;
+    vertical-align: top;
+    -moz-border-radius: 5px;
+    -webkit-border-radius: 5px;
+    border-radius: 5px;
+    word-break: break-word;
+    max-width: 370px; }
+    .chat-system .chat-box .bubble:before {
+      position: absolute;
+      top: 18px;
+      display: block;
+      width: 8px;
+      height: 6px;
+      content: '\00a0';
+      -moz-transform: rotate(29deg) skew(-35deg);
+      -ms-transform: rotate(29deg) skew(-35deg);
+      -webkit-transform: rotate(29deg) skew(-35deg);
+      transform: rotate(29deg) skew(-35deg); }
+    .chat-system .chat-box .bubble.you {
+      float: left;
+      color: #1b55e2;
+      background-color: #f6f6f6;
+      -webkit-align-self: flex-start;
+      align-self: flex-start;
+      -moz-animation-name: slideFromLeft;
+      -webkit-animation-name: slideFromLeft;
+      animation-name: slideFromLeft;
+      -webkit-box-shadow: 0px 2px 4px rgba(126, 142, 177, 0.12);
+      box-shadow: 0px 2px 4px rgba(126, 142, 177, 0.12); }
+      .chat-system .chat-box .bubble.you:before {
+        left: -3px;
+        background-color: #fff; }
+    .chat-system .chat-box .bubble.me {
+      float: right;
+      color: #fff;
+      background-color: #1b55e2;
+      -webkit-align-self: flex-end;
+      align-self: flex-end;
+      -moz-animation-name: slideFromRight;
+      -webkit-animation-name: slideFromRight;
+      animation-name: slideFromRight;
+      -webkit-box-shadow: 0px 2px 4px rgba(126, 142, 177, 0.12);
+      box-shadow: 0px 2px 4px rgba(126, 142, 177, 0.12); }
+      .chat-system .chat-box .bubble.me:before {
+        right: -3px;
+        background-color: #1b55e2; }
+  .chat-system .chat-box .conversation-start {
+    position: relative;
+    width: 100%;
+    margin-bottom: 27px;
+    text-align: center; }
+    .chat-system .chat-box .conversation-start span {
+      font-size: 12px;
+      color: #3b3f5c;
+      margin-bottom: 0;
+      font-weight: 700;
+      background: #fff;
+      padding: 7px 20px;
+      border-radius: 6px;
+      -webkit-box-shadow: 0px 2px 4px rgba(126, 142, 177, 0.12);
+      box-shadow: 0px 2px 4px rgba(126, 142, 177, 0.12); }
+
+@keyframes slideFromLeft {
+  0% {
+    margin-left: -200px;
+    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
+    opacity: 0; }
+  100% {
+    margin-left: 0;
+    filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
+    opacity: 1; } }
+
+@-webkit-keyframes slideFromLeft {
+  0% {
+    margin-left: -200px;
+    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
+    opacity: 0; }
+  100% {
+    margin-left: 0;
+    filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
+    opacity: 1; } }
+
+@keyframes slideFromRight {
+  0% {
+    margin-right: -200px;
+    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
+    opacity: 0; }
+  100% {
+    margin-right: 0;
+    filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
+    opacity: 1; } }
+
+@-webkit-keyframes slideFromRight {
+  0% {
+    margin-right: -200px;
+    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
+    opacity: 0; }
+  100% {
+    margin-right: 0;
+    filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
+    opacity: 1; } }
+
+.credits {
+  color: white;
+  font-size: 11px;
+  position: absolute;
+  bottom: 10px;
+  right: 15px; }
+  .credits a {
+    color: white;
+    text-decoration: none; }
+
+@media (max-width: 1199px) {
+  .chat-system .user-list-box {
+    width: 40%; }
+  .chat-system .chat-box {
+    width: 60%; }
+    .chat-system .chat-box .overlay-video-call .video-caller {
+      height: 68px;
+      width: 68px; } }
+
+@media (max-width: 991px) {
+  .chat-system .chat-box {
+    border-radius: 6px; }
+    .chat-system .chat-box .overlay-video-call .video-caller {
+      height: 67px;
+      width: 83px; } }
+
+@media (max-width: 767px) {
+  .chat-system .hamburger {
+    padding: 7px 10px 7px 10px;
+    font-size: 20px;
+    border-radius: 0;
+    color: #fff;
+    align-self: center;
+    position: fixed;
+    top: 218px;
+    right: 9px;
+    display: block;
+    z-index: 78;
+    background-color: #515365;
+    border-radius: 50%; }
+  .chat-system .user-list-box {
+    position: absolute;
+    z-index: 40;
+    left: -341px;
+    width: 255px; }
+    .chat-system .user-list-box.user-list-box-show {
+      position: absolute;
+      z-index: 34;
+      left: 15px;
+      border-radius: 0; }
+  .chat-system .chat-box {
+    width: 100%; }
+    .chat-system .chat-box .overlay-video-call .video-caller {
+      height: 75px;
+      width: 110px; } }
+
+@media (max-width: 575px) {
+  .chat-system .chat-box .overlay-video-call .video-caller {
+    bottom: 83px; }
+  .chat-system .chat-box .conversation-start span:before, .chat-system .chat-box .conversation-start span:after {
+    background-color: transparent; } }
+
+@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+  .chat-system .chat-box .overlay-phone-call {
+    background-image: none; }
+  .chat-system .chat-box .overlay-video-call {
+    background-image: none; }
+    .chat-system .chat-box .overlay-video-call.onConnect {
+      background-attachment: local; } }
diff --git a/static/css/apps/notes.css b/static/css/apps/notes.css
new file mode 100644
index 00000000..0cc12ad3
--- /dev/null
+++ b/static/css/apps/notes.css
@@ -0,0 +1,442 @@
+/*
+	===============================
+			@Import	Function
+	===============================
+*/
+/*
+	===============================
+			@Import	Mixins
+	===============================
+*/
+#content:before {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  background: rgba(136, 142, 168, 0.211765);
+  width: 100%;
+  height: 183px;
+  z-index: -1; }
+
+.main-container, #content {
+  min-height: auto; }
+
+/*
+    App Note Container
+*/
+.app-note-container {
+  position: relative;
+  display: flex; }
+  .app-note-container .tab-title {
+    max-width: 210px;
+    width: 100%; }
+
+.note-sidebar-scroll {
+  position: relative;
+  margin: auto;
+  width: 100%;
+  overflow: auto;
+  height: calc(100vh - 202px); }
+
+/*
+    Group section
+*/
+.group-section {
+  font-weight: 600;
+  font-size: 15px;
+  color: #3b3f5c;
+  letter-spacing: 1px;
+  margin-top: 25px;
+  margin-bottom: 13px;
+  padding: 9px 20px; }
+  .group-section svg {
+    color: #888ea8;
+    margin-right: 6px;
+    vertical-align: text-top;
+    width: 20px;
+    height: 20px;
+    fill: rgba(0, 23, 55, 0.08); }
+
+.app-note-overlay {
+  display: none;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background: #3b3f5c !important;
+  z-index: 4 !important;
+  opacity: 0;
+  transition: all 0.5s ease-in-out; }
+  .app-note-overlay.app-note-overlay-show {
+    display: block;
+    opacity: .7; }
+
+/*
+    Tab Title
+*/
+.tab-title.mail-menu-show {
+  left: 0;
+  width: 100%;
+  min-width: 190px;
+  height: 100%; }
+
+.tab-title hr {
+  border-top: 1px solid #0e1726;
+  max-width: 54px;
+  margin-top: 25px;
+  margin-bottom: 25px; }
+
+.tab-title .nav-pills .nav-link.active, .tab-title .nav-pills .show > .nav-link {
+  background-color: #bfc9d4;
+  color: #3b3f5c;
+  font-weight: 700; }
+
+.tab-title .nav-pills a.nav-link {
+  position: relative;
+  font-weight: 700;
+  color: #515365;
+  padding: 9px 20px;
+  cursor: pointer;
+  font-size: 14px;
+  border-radius: 6px; }
+  .tab-title .nav-pills a.nav-link svg {
+    margin-right: 7px;
+    width: 18px;
+    height: 18px;
+    vertical-align: sub; }
+  .tab-title .nav-pills a.nav-link .mail-badge {
+    background: #c2d5ff;
+    border-radius: 50%;
+    position: absolute;
+    right: 8px;
+    padding: 4px 7px;
+    height: 24px;
+    width: 23px;
+    color: #1b55e2;
+    font-weight: 600; }
+
+.tab-title .nav-pills.group-list .nav-item a {
+  position: relative;
+  font-size: 14px;
+  font-weight: 700;
+  padding: 9px 15px 9px 50px;
+  color: #3b3f5c;
+  letter-spacing: 1px; }
+  .tab-title .nav-pills.group-list .nav-item a[class*="g-dot-"]:before {
+    position: absolute;
+    padding: 4px;
+    content: '';
+    border-radius: 50%;
+    top: 14px;
+    left: 20px;
+    border: 2px solid #515365; }
+  .tab-title .nav-pills.group-list .nav-item a.g-dot-danger:before {
+    background: #ffe1e2;
+    border: 1px solid #e7515a; }
+  .tab-title .nav-pills.group-list .nav-item a.g-dot-primary:before {
+    background: #bae7ff;
+    border: 1px solid #2196f3; }
+  .tab-title .nav-pills.group-list .nav-item a.g-dot-warning:before {
+    background: #ffeccb;
+    border: 1px solid #e2a03f; }
+  .tab-title .nav-pills.group-list .nav-item a.g-dot-success:before {
+    background: #dccff7;
+    border: 1px solid #5c1ac3; }
+
+.tab-title .nav-pills .nav-item .dropdown-menu {
+  box-shadow: 0px 0px 15px 1px rgba(113, 106, 202, 0.2);
+  padding: 0;
+  border: none; }
+
+.tab-title li.mail-labels a.dropdown-item {
+  font-size: 13px;
+  font-weight: 700;
+  padding: 8px 18px; }
+  .tab-title li.mail-labels a.dropdown-item:hover {
+    background-color: #fff;
+    color: #1b55e2; }
+
+.tab-title li.mail-labels .label:after {
+  position: absolute;
+  content: "";
+  height: 6px;
+  width: 6px;
+  border-radius: 50%;
+  right: 15px;
+  top: 43%; }
+
+/*Mail Labels*/
+/*
+    Note container
+*/
+.note-container {
+  padding: 0 15px;
+  width: 100%; }
+  .note-container .switch {
+    text-align: right;
+    margin-bottom: 43px; }
+    .note-container .switch .active-view {
+      color: #1b55e2;
+      fill: rgba(27, 85, 226, 0.239216); }
+    .note-container .switch .view-list, .note-container .switch .view-grid {
+      padding: 10px;
+      background: #fff;
+      border-radius: 5px;
+      cursor: pointer;
+      color: #515365;
+      box-shadow: 0px 2px 4px rgba(126, 142, 177, 0.12);
+      width: 43px;
+      height: 41px;
+      fill: rgba(0, 23, 55, 0.08); }
+  .note-container.note-grid .note-item {
+    position: relative;
+    padding: 16px 16px;
+    margin-right: 0;
+    margin-left: 5px;
+    margin-bottom: 18px;
+    width: 100%;
+    max-width: 300px;
+    border-radius: 6px;
+    display: inline-flex;
+    background: #e0e6ed; }
+    .note-container.note-grid .note-item.note-personal {
+      background: #bae7ff; }
+    .note-container.note-grid .note-item.note-work {
+      background: #ffeccb; }
+    .note-container.note-grid .note-item.note-important {
+      background: #ffe1e2; }
+    .note-container.note-grid .note-item.note-social {
+      background: #dccff7; }
+    .note-container.note-grid .note-item .note-inner-content {
+      border-radius: 4px;
+      width: 100%;
+      min-height: 163px; }
+      .note-container.note-grid .note-item .note-inner-content .note-title {
+        font-size: 19px;
+        font-weight: 600;
+        color: #3b3f5c;
+        margin-bottom: 11px;
+        letter-spacing: 0px; }
+      .note-container.note-grid .note-item .note-inner-content .meta-time {
+        font-weight: 600;
+        margin-bottom: 10px;
+        font-size: 14px;
+        color: #515365;
+        display: inline-block;
+        border-radius: 4px; }
+      .note-container.note-grid .note-item .note-inner-content .note-description {
+        font-size: 15px;
+        font-weight: 600;
+        margin-bottom: 18px;
+        letter-spacing: 0px;
+        word-wrap: break-word; }
+      .note-container.note-grid .note-item .note-inner-content .note-action {
+        display: inline-block; }
+        .note-container.note-grid .note-item .note-inner-content .note-action .fav-note, .note-container.note-grid .note-item .note-inner-content .note-action .delete-note {
+          padding: 4px;
+          border-radius: 5px;
+          cursor: pointer;
+          color: #515365;
+          width: 28px;
+          height: 28px;
+          fill: rgba(0, 23, 55, 0.08); }
+    .note-container.note-grid .note-item.note-fav .note-inner-content .note-action .fav-note {
+      fill: #e2a03f; }
+    .note-container.note-grid .note-item .note-inner-content .note-action .fav-note:hover {
+      fill: #e2a03f; }
+    .note-container.note-grid .note-item .note-inner-content .note-action .delete-note:hover {
+      color: #e7515a; }
+    .note-container.note-grid .note-item .note-inner-content .note-footer {
+      display: inline-block;
+      float: right; }
+      .note-container.note-grid .note-item .note-inner-content .note-footer .tags {
+        display: inline-block;
+        position: relative;
+        padding: 4px 6px;
+        border-radius: 4px; }
+        .note-container.note-grid .note-item .note-inner-content .note-footer .tags [class*="g-dot-"] {
+          content: '';
+          background: transparent;
+          border-radius: 50%;
+          border: 2px solid #acb0c3;
+          display: inline-block;
+          height: 11px;
+          width: 11px;
+          vertical-align: middle;
+          display: none; }
+        .note-container.note-grid .note-item .note-inner-content .note-footer .tags .g-dot-personal {
+          background: #bae7ff;
+          border: 2px solid #2196f3; }
+        .note-container.note-grid .note-item .note-inner-content .note-footer .tags .g-dot-work {
+          background: #ffeccb;
+          border: 2px solid #e2a03f; }
+        .note-container.note-grid .note-item .note-inner-content .note-footer .tags .g-dot-social {
+          background: #dccff7;
+          border: 2px solid #5c1ac3; }
+        .note-container.note-grid .note-item .note-inner-content .note-footer .tags .g-dot-important {
+          background: #ffe1e2;
+          border: 2px solid #e7515a; }
+    .note-container.note-grid .note-item.note-personal .note-inner-content .note-footer .tags .g-dot-personal, .note-container.note-grid .note-item.note-work .note-inner-content .note-footer .tags .g-dot-work, .note-container.note-grid .note-item.note-social .note-inner-content .note-footer .tags .g-dot-social, .note-container.note-grid .note-item.note-important .note-inner-content .note-footer .tags .g-dot-important {
+      display: inline-block; }
+    .note-container.note-grid .note-item .note-inner-content .note-footer .tags-selector {
+      display: inline-block; }
+      .note-container.note-grid .note-item .note-inner-content .note-footer .tags-selector .dropdown-menu {
+        min-width: 8rem; }
+        .note-container.note-grid .note-item .note-inner-content .note-footer .tags-selector .dropdown-menu a {
+          font-size: 14px;
+          padding: 3px 35px;
+          font-weight: 600;
+          letter-spacing: 0px;
+          color: #3b3f5c; }
+        .note-container.note-grid .note-item .note-inner-content .note-footer .tags-selector .dropdown-menu .dropdown-item.active, .note-container.note-grid .note-item .note-inner-content .note-footer .tags-selector .dropdown-menu .dropdown-item:active {
+          background: transparent; }
+        .note-container.note-grid .note-item .note-inner-content .note-footer .tags-selector .dropdown-menu [class*="g-dot-"]:before {
+          content: '';
+          position: absolute;
+          padding: 4px;
+          border-radius: 50%;
+          top: 9px;
+          left: 10px;
+          border: 2px solid #515365; }
+        .note-container.note-grid .note-item .note-inner-content .note-footer .tags-selector .dropdown-menu a.g-dot-important:before {
+          background: #ffe1e2;
+          border: 1px solid #e7515a; }
+        .note-container.note-grid .note-item .note-inner-content .note-footer .tags-selector .dropdown-menu a.g-dot-personal:before {
+          background: #bae7ff;
+          border: 1px solid #2196f3; }
+        .note-container.note-grid .note-item .note-inner-content .note-footer .tags-selector .dropdown-menu a.g-dot-work:before {
+          background: #ffeccb;
+          border: 1px solid #e2a03f; }
+        .note-container.note-grid .note-item .note-inner-content .note-footer .tags-selector .dropdown-menu a.g-dot-social:before {
+          background: #dccff7;
+          border: 1px solid #5c1ac3; }
+    .note-container.note-grid .note-item .note-inner-content .note-footer .nav-link {
+      padding: 0; }
+      .note-container.note-grid .note-item .note-inner-content .note-footer .nav-link span {
+        display: block; }
+      .note-container.note-grid .note-item .note-inner-content .note-footer .nav-link .feather-more-vertical {
+        border-radius: 5px;
+        cursor: pointer;
+        color: #515365;
+        width: 20px;
+        height: 20px; }
+        .note-container.note-grid .note-item .note-inner-content .note-footer .nav-link .feather-more-vertical:hover {
+          color: #0e1726; }
+    .note-container.note-grid .note-item.note-personal .note-inner-content .note-footer .nav-link .feather-more-vertical, .note-container.note-grid .note-item.note-work .note-inner-content .note-footer .nav-link .feather-more-vertical, .note-container.note-grid .note-item.note-social .note-inner-content .note-footer .nav-link .feather-more-vertical, .note-container.note-grid .note-item.note-important .note-inner-content .note-footer .nav-link .feather-more-vertical {
+      display: none; }
+
+/* 
+    Note Container
+*/
+/*
+=====================
+    Modal Content
+=====================
+*/
+.modal-content {
+  border: none;
+  box-shadow: 0px 0px 15px 1px rgba(113, 106, 202, 0.2); }
+  .modal-content .modal-footer {
+    border-top: none; }
+    .modal-content .modal-footer [data-dismiss="modal"] {
+      background-color: #fff;
+      color: #1b55e2;
+      font-weight: 700;
+      border: 1px solid #e8e8e8;
+      padding: 10px 25px; }
+    .modal-content .modal-footer .btn[data-dismiss="modal"] svg {
+      margin-right: 5px;
+      width: 18px;
+      vertical-align: bottom; }
+    .modal-content .modal-footer #btn-n-add {
+      background-color: #1b55e2;
+      color: #fff;
+      font-weight: 600;
+      border: 1px solid #1b55e2;
+      padding: 10px 25px; }
+    .modal-content .modal-footer #btn-n-save {
+      font-weight: 600;
+      padding: 10px 25px; }
+
+.modal-backdrop {
+  background-color: #ebedf2; }
+
+.modal-content svg.close {
+  position: absolute;
+  right: -7px;
+  top: -8px;
+  font-size: 12px;
+  font-weight: 600;
+  padding: 3px;
+  background: #fff;
+  border-radius: 5px;
+  opacity: 1;
+  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.2);
+  cursor: pointer;
+  transition: .600s;
+  color: #3b3f5c; }
+
+.notes-box .notes-content form .note-title {
+  padding-top: 20px; }
+
+.notes-box .notes-content form .note-description {
+  padding-top: 40px; }
+
+/*
+    ===============
+        Note Box
+    ===============
+*/
+.hamburger {
+  display: none; }
+
+/*
+    Media Query
+*/
+@media (max-width: 2132px) {
+  .note-container.note-grid .note-item {
+    max-width: 32%; } }
+
+@media (max-width: 1199px) {
+  .note-container.note-grid .note-item {
+    max-width: 48%; } }
+
+@media (max-width: 991px) {
+  .app-notes {
+    margin-top: 37px; }
+  .app-note-container .tab-title {
+    position: absolute;
+    z-index: 4;
+    left: -170px;
+    width: 0; }
+  .tab-title.note-menu-show {
+    left: 0;
+    width: 100%;
+    min-width: 190px;
+    min-height: 485px;
+    border-radius: 0;
+    border-bottom-right-radius: 6px;
+    padding: 11px;
+    background: #fff; }
+  .note-sidebar-scroll {
+    height: 100%; }
+  .app-hamburger-container {
+    text-align: right; }
+  .hamburger {
+    position: relative;
+    top: -13px;
+    padding: 6px 9px 6px 9px;
+    font-size: 20px;
+    color: #fff;
+    align-self: center;
+    display: inline-block;
+    background-color: #515365;
+    border-radius: 50%; } }
+
+@media (max-width: 767px) {
+  .note-container.note-grid .note-item {
+    max-width: 47%; } }
+
+@media (max-width: 575px) {
+  .note-container.note-grid .note-item {
+    max-width: 100%;
+    margin-left: 0; } }
diff --git a/static/css/apps/scrumboard.css b/static/css/apps/scrumboard.css
new file mode 100644
index 00000000..9808b99a
--- /dev/null
+++ b/static/css/apps/scrumboard.css
@@ -0,0 +1,497 @@
+/*
+	===============================
+			@Import	Function
+	===============================
+*/
+/*
+	===============================
+			@Import	Mixins
+	===============================
+*/
+#content:before {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  background: rgba(136, 142, 168, 0.211765);
+  width: 100%;
+  height: 183px;
+  z-index: -1; }
+
+.action-btn p {
+  display: inline-block;
+  margin-right: 16px;
+  margin-bottom: 0;
+  font-size: 14px;
+  letter-spacing: 0px;
+  color: #3b3f5c;
+  vertical-align: bottom;
+  font-weight: 700; }
+
+.action-btn svg {
+  width: 20px;
+  height: 20px;
+  vertical-align: bottom;
+  margin-right: 3px; }
+
+.modal-backdrop {
+  background-color: #888ea8; }
+  .modal-backdrop.show {
+    opacity: .7; }
+
+#addListModal .modal-dialog {
+  max-width: 345px; }
+
+#addListModal .modal-content {
+  border: none;
+  box-shadow: 0px 0px 15px 1px rgba(113, 106, 202, 0.2); }
+
+#addListModal .compose-box h5 {
+  font-weight: 700;
+  font-size: 18px;
+  color: #3b3f5c;
+  text-align: center;
+  margin-bottom: 38px; }
+
+#addListModal .compose-box .list-title {
+  display: flex; }
+  #addListModal .compose-box .list-title svg {
+    align-self: center;
+    font-size: 19px;
+    margin-right: 14px;
+    color: #1b55e2;
+    font-weight: 600; }
+  #addListModal .compose-box .list-title input {
+    border: none;
+    padding: 10px 16px;
+    -webkit-box-shadow: 2px 5px 17px 0 rgba(31, 45, 61, 0.1);
+    box-shadow: 2px 5px 17px 0 rgba(31, 45, 61, 0.1); }
+    #addListModal .compose-box .list-title input::-webkit-input-placeholder, #addListModal .compose-box .list-title input::-ms-input-placeholder, #addListModal .compose-box .list-title input::-moz-placeholder {
+      color: #acb0c3;
+      font-weight: 600; }
+
+#addListModal .modal-footer {
+  justify-content: center;
+  border: none;
+  padding: 23px 20px; }
+  #addListModal .modal-footer .btn[data-dismiss="modal"] {
+    background-color: #fff;
+    color: #1b55e2;
+    font-weight: 700;
+    border: 1px solid #e0e6ed;
+    padding: 10px 25px; }
+  #addListModal .modal-footer .edit-list {
+    background-color: #009688;
+    color: #fff;
+    font-weight: 600;
+    border: 1px solid #e0e6ed;
+    padding: 10px 25px; }
+  #addListModal .modal-footer .btn.add-list {
+    background-color: #1b55e2;
+    color: #fff;
+    font-weight: 600;
+    border: 1px solid #e0e6ed;
+    padding: 10px 25px; }
+
+/*Add Task Modal*/
+#addTaskModal .compose-box h5 {
+  font-weight: 700;
+  font-size: 18px;
+  color: #515365;
+  text-align: center;
+  margin-bottom: 38px; }
+
+#addTaskModal .task-title {
+  display: flex; }
+
+#addTaskModal .modal-content {
+  border: none;
+  box-shadow: 0px 0px 15px 1px rgba(113, 106, 202, 0.2); }
+  #addTaskModal .modal-content .card {
+    border: 1px solid #e0e6ed;
+    margin-bottom: 26px;
+    border-radius: 6px;
+    cursor: pointer;
+    background-color: #fff; }
+  #addTaskModal .modal-content .card-header {
+    padding: 0;
+    padding: 0;
+    border: none;
+    background: none; }
+    #addTaskModal .modal-content .card-header > div {
+      padding: 13px 21px;
+      font-weight: 600;
+      font-size: 16px;
+      color: #1b55e2; }
+  #addTaskModal .modal-content svg {
+    align-self: center;
+    font-size: 19px;
+    margin-right: 14px;
+    color: #1b55e2;
+    font-weight: 600; }
+  #addTaskModal .modal-content input {
+    padding: 10px 16px; }
+    #addTaskModal .modal-content input[type="range"] {
+      box-shadow: none;
+      padding: 0; }
+      #addTaskModal .modal-content input[type="range"]::-webkit-slider-thumb {
+        -webkit-appearance: none;
+        appearance: none;
+        background: #1b55e2;
+        cursor: pointer;
+        -webkit-transition: all 0.35s ease;
+        transition: all 0.35s ease; }
+      #addTaskModal .modal-content input[type="range"]:active::-webkit-slider-thumb {
+        -webkit-transform: scale(1.2);
+        transform: scale(1.2);
+        box-shadow: none; }
+      #addTaskModal .modal-content input[type="range"]:focus::-webkit-slider-thumb {
+        box-shadow: none; }
+  #addTaskModal .modal-content .range-count {
+    display: inline-block;
+    margin-left: 6px;
+    font-size: 16px;
+    font-weight: 700;
+    color: #3b3f5c; }
+  #addTaskModal .modal-content .img-preview {
+    text-align: center; }
+    #addTaskModal .modal-content .img-preview img {
+      width: 280px;
+      height: 280px;
+      margin: 0 auto; }
+  #addTaskModal .modal-content .custom-file .custom-file-label {
+    margin-bottom: 0; }
+  #addTaskModal .modal-content .input-group .input-group-append {
+    height: 40px; }
+  #addTaskModal .modal-content .custom-file .custom-file-label:after {
+    height: auto;
+    display: none; }
+  #addTaskModal .modal-content .input-group-append .input-group-text {
+    border: none;
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px; }
+
+#addTaskModal .task-badge {
+  display: flex; }
+
+#addTaskModal .modal-content textarea {
+  padding: 10px 16px; }
+
+#addTaskModal .modal-footer {
+  justify-content: center;
+  border: none;
+  padding-top: 0; }
+  #addTaskModal .modal-footer .btn[data-dismiss="modal"] {
+    background-color: #fff;
+    color: #1b55e2;
+    font-weight: 700;
+    border: 1px solid #e8e8e8;
+    padding: 10px 25px; }
+  #addTaskModal .modal-footer [data-btnfn="addTask"] {
+    background-color: #1b55e2;
+    color: #fff;
+    font-weight: 600;
+    border: 1px solid #1b55e2;
+    padding: 10px 25px; }
+  #addTaskModal .modal-footer [data-btnfn="editTask"] {
+    background-color: #009688;
+    color: #fff;
+    font-weight: 600;
+    border: 1px solid #e0e6ed;
+    padding: 10px 25px; }
+
+/* Delete Modal*/
+#deleteConformation .modal-content {
+  border: 0;
+  -webkit-box-shadow: 2px 5px 17px 0 rgba(31, 45, 61, 0.1);
+  box-shadow: 2px 5px 17px 0 rgba(31, 45, 61, 0.1);
+  padding: 30px; }
+  #deleteConformation .modal-content .modal-header {
+    border: none;
+    padding: 0; }
+    #deleteConformation .modal-content .modal-header .icon {
+      padding: 7px 9px;
+      background: rgba(231, 81, 90, 0.37);
+      text-align: center;
+      margin-right: 8px;
+      border-radius: 50%; }
+    #deleteConformation .modal-content .modal-header svg {
+      width: 20px;
+      color: #e7515a;
+      fill: rgba(231, 81, 90, 0.37); }
+    #deleteConformation .modal-content .modal-header .modal-title {
+      color: #3b3f5c;
+      font-size: 18px;
+      font-weight: 700;
+      align-self: center; }
+  #deleteConformation .modal-content .modal-body {
+    padding: 28px 0; }
+    #deleteConformation .modal-content .modal-body p {
+      color: #888ea8;
+      font-size: 15px;
+      font-weight: 600;
+      margin-bottom: 0; }
+  #deleteConformation .modal-content .modal-footer {
+    padding: 0;
+    border: none; }
+    #deleteConformation .modal-content .modal-footer [data-dismiss="modal"] {
+      background-color: #fff;
+      color: #e7515a;
+      font-weight: 700;
+      border: 1px solid #e8e8e8;
+      padding: 10px 25px; }
+    #deleteConformation .modal-content .modal-footer [data-remove="task"] {
+      color: #fff;
+      font-weight: 600;
+      padding: 10px 25px; }
+
+.task-list-section {
+  display: flex;
+  overflow-x: auto;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  padding-bottom: 15px; }
+
+.task-list-container {
+  min-width: 309px;
+  padding: 0 15px;
+  width: 467px; }
+  .task-list-container:first-child {
+    padding-left: 0; }
+  .task-list-container:last-child {
+    padding-right: 0; }
+
+/*  
+    Connect Sorting Div
+*/
+.connect-sorting {
+  padding: 15px;
+  background: #e0e6ed;
+  border-radius: 10px;
+  -webkit-box-shadow: 0 4px 6px 0 rgba(85, 85, 85, 0.08), 0 1px 20px 0 rgba(0, 0, 0, 0.07), 0px 1px 11px 0px rgba(0, 0, 0, 0.07);
+  -moz-box-shadow: 0 4px 6px 0 rgba(85, 85, 85, 0.08), 0 1px 20px 0 rgba(0, 0, 0, 0.07), 0px 1px 11px 0px rgba(0, 0, 0, 0.07);
+  box-shadow: 0 4px 6px 0 rgba(85, 85, 85, 0.08), 0 1px 20px 0 rgba(0, 0, 0, 0.07), 0px 1px 11px 0px rgba(0, 0, 0, 0.07); }
+  .connect-sorting .task-container-header {
+    display: flex;
+    justify-content: space-between;
+    padding: 18px 5px; }
+    .connect-sorting .task-container-header .dropdown .dropdown-menu {
+      padding: 11px; }
+      .connect-sorting .task-container-header .dropdown .dropdown-menu .dropdown-item {
+        padding: 5px;
+        font-size: 14px;
+        font-weight: 700; }
+        .connect-sorting .task-container-header .dropdown .dropdown-menu .dropdown-item:hover {
+          color: #1b55e2; }
+        .connect-sorting .task-container-header .dropdown .dropdown-menu .dropdown-item.active, .connect-sorting .task-container-header .dropdown .dropdown-menu .dropdown-item:active {
+          background-color: transparent; }
+    .connect-sorting .task-container-header h6 {
+      font-size: 16px;
+      font-weight: 700; }
+  .connect-sorting .add-s-task {
+    cursor: pointer;
+    transition: all 0.3s ease-out;
+    -webkit-transition: all 0.3s ease-out; }
+    .connect-sorting .add-s-task:hover {
+      -webkit-transform: translateY(-3px);
+      transform: translateY(-3px); }
+    .connect-sorting .add-s-task .addTask {
+      display: block;
+      color: #ffffff;
+      font-size: 14px;
+      font-weight: 600;
+      text-align: center;
+      padding: 13px 11px;
+      border-radius: 4px;
+      background: #1b55e2; }
+      .connect-sorting .add-s-task .addTask:hover {
+        color: #fff; }
+      .connect-sorting .add-s-task .addTask svg {
+        width: 18px;
+        vertical-align: bottom; }
+
+.scrumboard .task-header {
+  margin-bottom: 25px;
+  display: flex;
+  justify-content: space-between;
+  padding: 20px 20px 0 20px; }
+  .scrumboard .task-header h4 {
+    font-size: 16px;
+    font-weight: 700;
+    margin-bottom: 0; }
+  .scrumboard .task-header svg.feather-edit-2 {
+    width: 18px;
+    height: 18px;
+    color: #888ea8;
+    vertical-align: middle;
+    fill: rgba(0, 23, 55, 0.08);
+    cursor: pointer;
+    padding: 0;
+    margin-right: 5px; }
+    .scrumboard .task-header svg.feather-edit-2:hover {
+      color: #1b55e2;
+      fill: rgba(27, 85, 226, 0.239216); }
+  .scrumboard .task-header svg.feather-trash-2 {
+    color: #e7515a;
+    margin-right: 6px;
+    vertical-align: middle;
+    width: 18px;
+    height: 18px;
+    fill: rgba(231, 81, 90, 0.14);
+    cursor: pointer; }
+    .scrumboard .task-header svg.feather-trash-2:hover {
+      fill: rgba(231, 81, 90, 0.37); }
+
+.scrumboard .card {
+  border: none;
+  border-radius: 4px;
+  margin-bottom: 30px;
+  -webkit-box-shadow: 2px 5px 17px 0 rgba(31, 45, 61, 0.1);
+  box-shadow: 2px 5px 17px 0 rgba(31, 45, 61, 0.1); }
+  .scrumboard .card .card-body {
+    padding: 0; }
+    .scrumboard .card .card-body .task-body .task-bottom {
+      display: flex;
+      justify-content: space-between;
+      padding: 12px 15px; }
+      .scrumboard .card .card-body .task-body .task-bottom div.tb-section-1 span {
+        font-size: 13px;
+        font-weight: 600;
+        width: 17px;
+        height: 17px; }
+        .scrumboard .card .card-body .task-body .task-bottom div.tb-section-1 span:hover {
+          color: #1b55e2;
+          cursor: pointer; }
+          .scrumboard .card .card-body .task-body .task-bottom div.tb-section-1 span:hover svg {
+            color: #1b55e2;
+            fill: rgba(27, 85, 226, 0.239216); }
+      .scrumboard .card .card-body .task-body .task-bottom div.tb-section-1 svg {
+        width: 18px;
+        vertical-align: bottom; }
+        .scrumboard .card .card-body .task-body .task-bottom div.tb-section-1 svg:not(:last-child) {
+          margin-right: 5px; }
+      .scrumboard .card .card-body .task-body .task-bottom div.tb-section-2 svg {
+        width: 18px;
+        cursor: pointer;
+        color: #888ea8;
+        margin-right: 6px;
+        vertical-align: middle;
+        width: 18px;
+        height: 18px;
+        fill: rgba(0, 23, 55, 0.08); }
+        .scrumboard .card .card-body .task-body .task-bottom div.tb-section-2 svg.feather-edit-2 {
+          width: 18px;
+          height: 18px;
+          color: #888ea8;
+          vertical-align: middle;
+          fill: rgba(0, 23, 55, 0.08);
+          cursor: pointer;
+          padding: 0; }
+          .scrumboard .card .card-body .task-body .task-bottom div.tb-section-2 svg.feather-edit-2:hover {
+            color: #1b55e2;
+            fill: rgba(27, 85, 226, 0.239216); }
+        .scrumboard .card .card-body .task-body .task-bottom div.tb-section-2 svg.feather-trash-2 {
+          color: #e7515a;
+          margin-right: 6px;
+          vertical-align: middle;
+          width: 18px;
+          height: 18px;
+          fill: rgba(231, 81, 90, 0.14); }
+          .scrumboard .card .card-body .task-body .task-bottom div.tb-section-2 svg.feather-trash-2:hover {
+            fill: rgba(231, 81, 90, 0.37); }
+        .scrumboard .card .card-body .task-body .task-bottom div.tb-section-2 svg:not(:last-child) {
+          margin-right: 5px; }
+  .scrumboard .card.img-task .card-body .task-content {
+    padding: 10px 10px 0 10px; }
+    .scrumboard .card.img-task .card-body .task-content img {
+      border-radius: 6px;
+      height: 105px;
+      width: 100%; }
+  .scrumboard .card.simple-title-task .card-body .task-header {
+    margin-bottom: 0;
+    padding: 20px; }
+    .scrumboard .card.simple-title-task .card-body .task-header div:nth-child(1) {
+      width: 70%; }
+    .scrumboard .card.simple-title-task .card-body .task-header div:nth-child(2) {
+      width: 30%;
+      text-align: right; }
+  .scrumboard .card.simple-title-task .card-body .task-body .task-bottom {
+    padding: 3px 15px 11px 15px; }
+  .scrumboard .card.task-text-progress .card-body .task-content p {
+    padding: 5px 20px 5px 20px; }
+  .scrumboard .card.task-text-progress .card-body .task-content > div {
+    display: flex;
+    padding: 5px 20px 5px 20px; }
+  .scrumboard .card.task-text-progress .card-body .task-content .progress {
+    height: 9px;
+    width: 100%;
+    margin-right: 17px;
+    margin-bottom: 0;
+    align-self: center; }
+  .scrumboard .card.task-text-progress .card-body .task-content > div p.progress-count {
+    padding: 0;
+    margin-bottom: 0; }
+  .scrumboard .card.ui-sortable-helper {
+    background-color: #1b55e2; }
+    .scrumboard .card.ui-sortable-helper .task-header span {
+      color: #fff; }
+      .scrumboard .card.ui-sortable-helper .task-header span svg {
+        color: #fff; }
+    .scrumboard .card.ui-sortable-helper .task-header svg.feather-edit-2, .scrumboard .card.ui-sortable-helper .task-header svg.feather-trash-2 {
+      color: #fff; }
+    .scrumboard .card.ui-sortable-helper .task-header h4 {
+      color: #fff; }
+    .scrumboard .card.ui-sortable-helper.task-text-progress .card-body .task-content p {
+      color: #fff; }
+    .scrumboard .card.ui-sortable-helper.task-text-progress .card-body .task-content .progress .progress-bar {
+      background-color: #2196f3 !important; }
+    .scrumboard .card.ui-sortable-helper .task-header svg.feather-user {
+      color: #fff; }
+    .scrumboard .card.ui-sortable-helper .card-body .task-body .task-bottom div.tb-section-1 {
+      color: #fff; }
+      .scrumboard .card.ui-sortable-helper .card-body .task-body .task-bottom div.tb-section-1 svg {
+        color: #fff; }
+    .scrumboard .card.ui-sortable-helper .card-body .task-body .task-bottom div.tb-section-2 svg {
+      color: #fff; }
+    .scrumboard .card.ui-sortable-helper .card-body .task-content .progress {
+      box-shadow: none; }
+
+/*
+    img task
+*/
+/*
+    task-text-progress
+*/
+/*
+    Style On events
+*/
+/* On Drag Task */
+.ui-state-highlight {
+  position: relative;
+  border-color: #1b55e2;
+  height: 141px;
+  margin-bottom: 36px;
+  border-radius: 15px;
+  border: 1px dashed #1b55e2;
+  background-image: linear-gradient(45deg, rgba(27, 85, 226, 0.09) 25%, transparent 25%, transparent 50%, rgba(27, 85, 226, 0.09) 50%, rgba(27, 85, 226, 0.09) 75%, transparent 75%, transparent);
+  background-size: 1rem 1rem;
+  -webkit-animation: progress-bar-stripes 1s linear infinite;
+  animation: progress-bar-stripes 1s linear infinite; }
+  .ui-state-highlight:before {
+    content: 'Drop';
+    position: absolute;
+    left: 41%;
+    font-size: 19px;
+    color: #1b55e2;
+    top: 50%;
+    margin-top: -16px;
+    font-weight: 600; }
+
+.connect-sorting-content {
+  min-height: 80px; }
+
+@keyframes progress-bar-stripes {
+  0% {
+    background-position: 1rem 0; }
+  100% {
+    background-position: 0 0; } }
diff --git a/static/css/apps/todolist.css b/static/css/apps/todolist.css
new file mode 100644
index 00000000..48a1f5b1
--- /dev/null
+++ b/static/css/apps/todolist.css
@@ -0,0 +1,495 @@
+/*
+	===============================
+			@Import	Function
+	===============================
+*/
+/*
+	===============================
+			@Import	Mixins
+	===============================
+*/
+/*----------Theme checkbox---------*/
+.new-control {
+  position: relative;
+  display: -ms-inline-flexbox;
+  display: inline-flex; }
+
+.new-control-input {
+  position: absolute;
+  z-index: -1;
+  opacity: 0; }
+
+.new-control.new-checkbox {
+  cursor: pointer; }
+  .new-control.new-checkbox .new-control-indicator {
+    position: relative;
+    top: .25rem;
+    left: 0;
+    display: block;
+    width: 30px;
+    height: 30px;
+    pointer-events: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    background-color: #e0e6ed;
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: 50% 50%;
+    border-radius: 50%;
+    margin-right: 13px; }
+  .new-control.new-checkbox > input:checked ~ span.new-control-indicator {
+    background: #888ea8; }
+    .new-control.new-checkbox > input:checked ~ span.new-control-indicator:after {
+      display: block; }
+  .new-control.new-checkbox span.new-control-indicator:after {
+    border: solid #888ea8;
+    top: 50%;
+    left: 50%;
+    margin-left: -2px;
+    margin-top: -6px;
+    width: 5px;
+    height: 10px;
+    border-width: 0 2px 2px 0 !important;
+    transform: rotate(45deg);
+    content: '';
+    position: absolute;
+    display: none; }
+  .new-control.new-checkbox.checkbox-primary > input:checked ~ span.new-control-indicator {
+    background: transparent;
+    border: 2px solid #888ea8; }
+
+.mail-box-container {
+  position: relative;
+  display: flex;
+  border-radius: 6px;
+  background: #fff;
+  -webkit-box-shadow: 0 4px 6px 0 rgba(85, 85, 85, 0.08), 0 1px 20px 0 rgba(0, 0, 0, 0.07), 0px 1px 11px 0px rgba(0, 0, 0, 0.07);
+  -moz-box-shadow: 0 4px 6px 0 rgba(85, 85, 85, 0.08), 0 1px 20px 0 rgba(0, 0, 0, 0.07), 0px 1px 11px 0px rgba(0, 0, 0, 0.07);
+  box-shadow: 0 4px 6px 0 rgba(85, 85, 85, 0.08), 0 1px 20px 0 rgba(0, 0, 0, 0.07), 0px 1px 11px 0px rgba(0, 0, 0, 0.07); }
+
+.mail-overlay {
+  display: none;
+  position: absolute;
+  width: 100vw;
+  height: 100%;
+  background: #3b3f5c !important;
+  z-index: 4 !important;
+  opacity: 0;
+  transition: all 0.5s ease-in-out; }
+  .mail-overlay.mail-overlay-show {
+    display: block;
+    opacity: .7; }
+
+.tab-title {
+  position: relative;
+  padding: 20px 15px;
+  max-width: 240px;
+  border-right: 1px solid #e0e6ed; }
+  .tab-title svg.feather-clipboard {
+    color: #1b55e2;
+    fill: rgba(27, 85, 226, 0.239216);
+    margin-bottom: 13px; }
+  .tab-title h5 {
+    position: relative;
+    font-size: 18px;
+    font-weight: 700;
+    letter-spacing: 3px;
+    color: #515365; }
+  .tab-title #addTask {
+    position: absolute;
+    font-size: 14px;
+    padding: 9px 20px;
+    border: none;
+    color: #fff;
+    bottom: 32px;
+    left: 17%;
+    background-color: #1b55e2; }
+    .tab-title #addTask svg {
+      margin-right: 5px; }
+  .tab-title.mail-menu-show {
+    left: 0;
+    width: 100%;
+    min-width: 190px;
+    height: 100%; }
+  .tab-title hr {
+    border-top: 1px solid #ebedf2;
+    max-width: 54px; }
+  .tab-title .todoList-sidebar-scroll {
+    position: relative;
+    width: 100%;
+    height: calc(100vh - 346px); }
+  .tab-title .nav-pills .nav-link.active {
+    background-color: transparent;
+    color: #1b55e2;
+    color: #1b55e2;
+    background: #ebedf2;
+    border-top-right-radius: 30px;
+    border-bottom-right-radius: 30px;
+    padding: 10px 12px 10px 14px; }
+    .tab-title .nav-pills .nav-link.active svg {
+      color: #1b55e2;
+      fill: rgba(27, 85, 226, 0.239216); }
+  .tab-title .nav-pills a.nav-link {
+    position: relative;
+    font-weight: 700;
+    color: #888ea8;
+    border-radius: 0;
+    padding: 20px 0px 20px 15px;
+    -webkit-transition: all 0.35s ease;
+    transition: all 0.35s ease; }
+  .tab-title .nav-pills .nav-link .badge {
+    border-radius: 50%;
+    position: absolute;
+    right: 24px;
+    padding: 2px 5px;
+    height: 24px;
+    width: 23px;
+    font-weight: 700;
+    border: 2px solid #e0e6ed;
+    transform: none; }
+  .tab-title .nav-pills .nav-link.active .badge {
+    border: none;
+    padding: 0 !important;
+    font-size: 15px;
+    top: 11px;
+    color: #1b55e2 !important; }
+  .tab-title .nav-pills a.nav-link:hover {
+    color: #1b55e2; }
+    .tab-title .nav-pills a.nav-link:hover svg {
+      color: #1b55e2;
+      fill: rgba(27, 85, 226, 0.239216); }
+  .tab-title .nav-pills a.nav-link svg {
+    color: #888ea8;
+    margin-right: 6px;
+    vertical-align: middle;
+    width: 21px;
+    height: 21px;
+    fill: rgba(0, 23, 55, 0.08); }
+  .tab-title .nav-pills .nav-link#all-list .badge {
+    color: #3b3f5c; }
+  .tab-title .nav-pills .nav-link#todo-task-done .badge {
+    color: #2196f3; }
+  .tab-title .nav-pills .nav-link#todo-task-important .badge {
+    color: #e95f2b; }
+
+/*
+=====================
+    Todo Inbox
+=====================
+*/
+.todo-inbox {
+  position: relative;
+  overflow-x: hidden;
+  overflow-y: auto;
+  max-width: 100%;
+  width: 100%; }
+  .todo-inbox .search {
+    display: flex; }
+    .todo-inbox .search input {
+      border: none;
+      padding: 12px 13px 12px 13px;
+      border-bottom: 1px solid #e0e6ed;
+      background: transparent;
+      border-radius: 0; }
+  .todo-inbox .mail-menu {
+    background: #fff;
+    margin: 7px 13px 7px 13px;
+    width: 25px;
+    border-radius: 0;
+    color: #515365;
+    align-self: center;
+    border-bottom: 1px solid #e0e6ed; }
+  .todo-inbox .todo-item-inner {
+    display: flex; }
+  .todo-inbox .message-box {
+    background: #fff;
+    padding: 0 0 5px 0; }
+
+.todo-box-scroll {
+  position: relative;
+  margin: auto;
+  width: 100%;
+  overflow: auto;
+  height: calc(100vh - 224px); }
+
+.todo-inbox .todo-item {
+  cursor: pointer;
+  position: relative; }
+  .todo-inbox .todo-item:not(:last-child) {
+    border-bottom: 1px solid #e0e6ed; }
+  .todo-inbox .todo-item.todo-task-trash {
+    display: none; }
+    .todo-inbox .todo-item.todo-task-trash.trash-show {
+      display: block; }
+  .todo-inbox .todo-item .todo-item-inner .n-chk {
+    padding: 20px 10px 20px 10px; }
+  .todo-inbox .todo-item .todo-item-inner .todo-content {
+    width: 100%;
+    padding: 20px 10px 20px 10px; }
+  .todo-inbox .todo-item .todo-item-inner .todo-heading {
+    font-size: 18px;
+    font-weight: 700;
+    color: #515365;
+    margin-bottom: 2px;
+    -webkit-transition: all 0.35s ease;
+    transition: all 0.35s ease; }
+  .todo-inbox .todo-item .todo-item-inner:hover .todo-heading {
+    -webkit-transform: translateY(0) scale(1.01);
+    transform: translateY(0) scale(1.01); }
+  .todo-inbox .todo-item .todo-item-inner p.todo-text {
+    font-size: 14px;
+    margin-bottom: 0;
+    color: #acb0c3;
+    font-weight: 600;
+    -webkit-transition: all 0.35s ease;
+    transition: all 0.35s ease;
+    overflow: hidden !important;
+    text-overflow: ellipsis !important;
+    white-space: nowrap !important;
+    max-width: calc(100vw - 730px); }
+  .todo-inbox .todo-item .todo-item-inner:hover .todo-text {
+    -webkit-transform: translateY(0) scale(1.01);
+    transform: translateY(0) scale(1.01); }
+  .todo-inbox .todo-item .todo-item-inner p.meta-date {
+    margin-bottom: 0;
+    font-size: 12px;
+    font-weight: 600;
+    color: #888ea8;
+    -webkit-transition: all 0.35s ease;
+    transition: all 0.35s ease; }
+  .todo-inbox .todo-item .todo-item-inner:hover p.meta-date {
+    -webkit-transform: translateY(0) scale(1.01);
+    transform: translateY(0) scale(1.01); }
+  .todo-inbox .todo-item .todo-item-inner .priority-dropdown {
+    float: right;
+    padding: 20px 10px 20px 10px; }
+    .todo-inbox .todo-item .todo-item-inner .priority-dropdown .dropdown-toggle {
+      font-size: 20px; }
+      .todo-inbox .todo-item .todo-item-inner .priority-dropdown .dropdown-toggle.danger svg {
+        color: #e7515a;
+        fill: rgba(231, 81, 90, 0.19); }
+      .todo-inbox .todo-item .todo-item-inner .priority-dropdown .dropdown-toggle.warning svg {
+        color: #e2a03f;
+        fill: rgba(233, 176, 43, 0.19); }
+      .todo-inbox .todo-item .todo-item-inner .priority-dropdown .dropdown-toggle.primary svg {
+        color: #2196f3;
+        fill: rgba(33, 150, 243, 0.19); }
+    .todo-inbox .todo-item .todo-item-inner .priority-dropdown .dropdown-menu {
+      left: -45px !important; }
+      .todo-inbox .todo-item .todo-item-inner .priority-dropdown .dropdown-menu a.dropdown-item.active, .todo-inbox .todo-item .todo-item-inner .priority-dropdown .dropdown-menu a.dropdown-item:active {
+        background: transparent; }
+      .todo-inbox .todo-item .todo-item-inner .priority-dropdown .dropdown-menu a svg {
+        font-size: 19px;
+        font-weight: 700;
+        margin-right: 7px;
+        vertical-align: middle; }
+      .todo-inbox .todo-item .todo-item-inner .priority-dropdown .dropdown-menu a.danger svg {
+        color: #e7515a; }
+      .todo-inbox .todo-item .todo-item-inner .priority-dropdown .dropdown-menu a.warning svg {
+        color: #e2a03f; }
+      .todo-inbox .todo-item .todo-item-inner .priority-dropdown .dropdown-menu a.primary svg {
+        color: #2196f3; }
+  .todo-inbox .todo-item .todo-item-inner .action-dropdown .dropdown-menu .permanent-delete, .todo-inbox .todo-item .todo-item-inner .action-dropdown .dropdown-menu .revive {
+    display: none; }
+  .todo-inbox .todo-item.todo-task-trash .n-chk {
+    display: none; }
+  .todo-inbox .todo-item.todo-task-trash .todo-item-inner .todo-content {
+    width: 100%;
+    padding: 20px 14px 20px 14px; }
+  .todo-inbox .todo-item.todo-task-trash .todo-item-inner .priority-dropdown .dropdown-menu {
+    display: none; }
+  .todo-inbox .todo-item.todo-task-trash .todo-item-inner .action-dropdown .dropdown-menu .edit, .todo-inbox .todo-item.todo-task-trash .todo-item-inner .action-dropdown .dropdown-menu .important, .todo-inbox .todo-item.todo-task-trash .todo-item-inner .action-dropdown .dropdown-menu .delete {
+    display: none; }
+  .todo-inbox .todo-item.todo-task-trash .todo-item-inner .action-dropdown .dropdown-menu .permanent-delete, .todo-inbox .todo-item.todo-task-trash .todo-item-inner .action-dropdown .dropdown-menu .revive {
+    display: block; }
+  .todo-inbox .todo-item .todo-item-inner .action-dropdown {
+    float: right;
+    padding: 20px 10px 20px 10px; }
+    .todo-inbox .todo-item .todo-item-inner .action-dropdown .dropdown-menu {
+      left: -7px !important; }
+      .todo-inbox .todo-item .todo-item-inner .action-dropdown .dropdown-menu .dropdown-item.active, .todo-inbox .todo-item .todo-item-inner .action-dropdown .dropdown-menu .dropdown-item:active {
+        background-color: transparent; }
+    .todo-inbox .todo-item .todo-item-inner .action-dropdown .dropdown-toggle svg {
+      width: 21px;
+      height: 21px;
+      margin-top: 5px;
+      color: #888ea8; }
+    .todo-inbox .todo-item .todo-item-inner .action-dropdown .show .dropdown-toggle svg {
+      color: #1b2e4b; }
+  .todo-inbox .todo-item.todo-task-done .todo-item-inner .todo-heading {
+    text-decoration: line-through; }
+  .todo-inbox .todo-item.todo-task-done .todo-item-inner p.meta-date, .todo-inbox .todo-item.todo-task-done .todo-item-inner p.todo-text {
+    text-decoration: line-through; }
+
+.modal-content {
+  border: none;
+  box-shadow: 0px 0px 15px 1px rgba(113, 106, 202, 0.2); }
+  .modal-content svg.close {
+    position: absolute;
+    right: -7px;
+    top: -8px;
+    font-size: 12px;
+    font-weight: 600;
+    padding: 2px;
+    background: #fff;
+    border-radius: 5px;
+    opacity: 1;
+    color: #1b55e2;
+    box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.2);
+    cursor: pointer;
+    transition: .600s; }
+    .modal-content svg.close:hover {
+      box-shadow: none;
+      transition: .600s;
+      opacity: 1 !important; }
+
+#todoShowListItem .task-text {
+  position: relative;
+  max-height: 260px;
+  padding: 0 16px; }
+
+.compose-box {
+  background-color: #fff;
+  border-radius: 6px; }
+
+#todoShowListItem .modal-content .modal-body {
+  padding-left: 0;
+  padding-right: 0; }
+
+#todoShowListItem .compose-content h5 {
+  margin-bottom: 19px;
+  padding-bottom: 19px;
+  border-bottom: 1px solid #e0e6ed; }
+
+.compose-box .compose-content h5 {
+  font-weight: 700;
+  font-size: 18px;
+  color: #3b3f5c;
+  text-align: center;
+  margin-bottom: 35px; }
+
+.compose-box .compose-content .task-text p {
+  word-break: break-word; }
+
+.compose-box .compose-content .task-text img {
+  max-width: 100%; }
+
+#todoShowListItem .modal-footer .btn[data-dismiss="modal"] {
+  background-color: #fff;
+  color: #1b55e2;
+  font-weight: 700;
+  border: 1px solid #e8e8e8;
+  padding: 10px 25px; }
+  #todoShowListItem .modal-footer .btn[data-dismiss="modal"] svg {
+    margin-right: 8px;
+    width: 19px;
+    height: 19px; }
+
+.compose-box .compose-content form svg {
+  align-self: center;
+  font-size: 19px;
+  margin-right: 14px;
+  color: #1b55e2;
+  font-weight: 600; }
+
+.compose-box .compose-content form #taskdescription {
+  height: 170px; }
+
+.compose-box .compose-content form .validation-text {
+  display: none;
+  color: #e7515a;
+  font-weight: 600;
+  text-align: left;
+  margin-top: 6px;
+  font-size: 12px;
+  letter-spacing: 1px; }
+
+#addTaskModal .modal-footer {
+  border-top: none;
+  padding-top: 0; }
+  #addTaskModal .modal-footer .btn[data-dismiss="modal"] {
+    background-color: #fff;
+    color: #1b55e2;
+    font-weight: 700;
+    border: 1px solid #e8e8e8;
+    padding: 10px 25px; }
+  #addTaskModal .modal-footer .btn.add-tsk {
+    background-color: #1b55e2;
+    color: #fff;
+    font-weight: 600;
+    border: 1px solid #1b55e2;
+    padding: 10px 25px; }
+  #addTaskModal .modal-footer .btn.edit-tsk {
+    background-color: #8dbf42;
+    color: #fff;
+    font-weight: 600;
+    padding: 10px 25px; }
+
+.modal-backdrop {
+  background-color: #515365; }
+
+.compose-box .compose-content form #editor-container h1, .compose-box .compose-content form #editor-container p {
+  color: #3b3f5c; }
+
+@media (max-width: 767px) {
+  .todo-inbox {
+    display: block; }
+    .todo-inbox .message-box {
+      width: 100%;
+      margin-bottom: 40px; } }
+
+@media (max-width: 991px) {
+  .mail-box-container {
+    overflow-x: hidden;
+    overflow-y: auto; }
+  .todo-inbox .search {
+    border-bottom: 1px solid #e0e6ed; }
+  .todo-inbox .mail-menu {
+    border-bottom: none; }
+  .todo-inbox .search input {
+    border-right: 1px solid #e0e6ed;
+    border-bottom: none; }
+  .todo-inbox .todo-item .todo-item-inner p.todo-text {
+    max-width: calc(100vw - 228px); }
+  .tab-title {
+    position: absolute;
+    z-index: 4;
+    left: -100px;
+    width: 0;
+    background: #fff; }
+  .todo-inbox {
+    -ms-flex: 0 0 100%;
+    flex: 0 0 100%;
+    max-width: 100%; }
+  .modal-backdrop {
+    opacity: 0.8 !important; } }
+
+@media (max-width: 575px) {
+  .todo-inbox .mail-item div.mail-item-heading .mail-item-inner .f-body > div {
+    display: block; }
+  .todo-inbox .mail-item div.mail-item-heading .mail-item-inner .f-body .meta-time {
+    margin-bottom: 0;
+    float: none; } }
+
+/*
+=====================
+    IE Support
+=====================
+*/
+@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+  /* IE10+ CSS styles go here */
+  .tab-title {
+    width: 100%; } }
+
+/*
+=====================
+    Mozilla Support 
+=====================
+*/
+@-moz-document url-prefix() {
+  .todo-inbox .todo-item .todo-item-inner .todo-content {
+    overflow: hidden !important;
+    text-overflow: ellipsis !important;
+    white-space: nowrap !important; } }
diff --git a/static/css/authentication/form-1.css b/static/css/authentication/form-1.css
new file mode 100644
index 00000000..1b4ea511
--- /dev/null
+++ b/static/css/authentication/form-1.css
@@ -0,0 +1,206 @@
+/*
+	===============================
+			@Import	Function
+	===============================
+*/
+/*
+	===============================
+			@Import	Mixins
+	===============================
+*/
+html {
+  height: 100%; }
+
+body {
+  height: 100%;
+  overflow: auto;
+  margin: 0;
+  padding: 0;
+  background: #fff; }
+
+.form-container {
+  display: flex; }
+
+.form-form {
+  width: 50%;
+  display: flex;
+  flex-direction: column;
+  min-height: 100%; }
+  .form-form .form-form-wrap {
+    max-width: 480px;
+    margin: 0 auto;
+    min-width: 311px;
+    min-height: 100%;
+    height: 100vh;
+    align-items: center;
+    justify-content: center; }
+  .form-form .form-container {
+    align-items: center;
+    display: flex;
+    flex-grow: 1;
+    padding: .71428571rem 2.85714286rem;
+    width: 100%;
+    min-height: 100%; }
+    .form-form .form-container .form-content {
+      display: block;
+      width: 100%; }
+  .form-form .form-form-wrap .user-meta {
+    margin-bottom: 35px; }
+    .form-form .form-form-wrap .user-meta img {
+      width: 52px;
+      height: 52px;
+      border-radius: 50%;
+      margin-right: 15px;
+      border: 4px solid #e0e6ed; }
+    .form-form .form-form-wrap .user-meta div {
+      align-self: center; }
+    .form-form .form-form-wrap .user-meta p {
+      font-size: 31px;
+      color: #3b3f5c;
+      margin-bottom: 0; }
+  .form-form .form-form-wrap h1 .brand-name {
+    color: #1b55e2;
+    font-weight: 600; }
+  .form-form .form-form-wrap p.signup-link {
+    font-size: 14px;
+    color: #3b3f5c;
+    font-weight: 700;
+    margin-bottom: 50px; }
+    .form-form .form-form-wrap p.signup-link a {
+      color: #1b55e2;
+      border-bottom: 1px solid; }
+  .form-form .form-form-wrap form .field-wrapper.input {
+    position: relative;
+    padding: 11px 0 25px 0;
+    border-bottom: none; }
+    .form-form .form-form-wrap form .field-wrapper.input:focus {
+      border: 1px solid #000; }
+  .form-form .form-form-wrap form .field-wrapper.toggle-pass p {
+    font-weight: 600;
+    color: #3b3f5c;
+    margin-bottom: 0; }
+  .form-form .form-form-wrap form .field-wrapper .logged-in-user-name {
+    font-size: 37px;
+    color: #3b3f5c; }
+  .form-form .form-form-wrap form .field-wrapper svg {
+    position: absolute;
+    top: 16px;
+    color: #1b55e2;
+    fill: rgba(27, 85, 226, 0.239216); }
+  .form-form .form-form-wrap form .field-wrapper.terms_condition {
+    margin-bottom: 20px; }
+    .form-form .form-form-wrap form .field-wrapper.terms_condition label {
+      font-size: 14px;
+      color: #888ea8;
+      padding-left: 31px;
+      font-weight: 100; }
+    .form-form .form-form-wrap form .field-wrapper.terms_condition a {
+      color: #1b55e2; }
+  .form-form .form-form-wrap form .field-wrapper input {
+    display: inline-block;
+    vertical-align: middle;
+    border-radius: 0;
+    min-width: 50px;
+    max-width: 635px;
+    width: 100%;
+    min-height: 36px;
+    background-color: #ffffff;
+    border: none;
+    -ms-transition: all 0.2s ease-in-out 0s;
+    transition: all 0.2s ease-in-out 0s;
+    color: #3b3f5c;
+    font-weight: 700;
+    font-size: 16px;
+    border-bottom: 1px solid #e0e6ed;
+    padding: 0px 0 10px 35px; }
+    .form-form .form-form-wrap form .field-wrapper input::-webkit-input-placeholder, .form-form .form-form-wrap form .field-wrapper input::-ms-input-placeholder, .form-form .form-form-wrap form .field-wrapper input::-moz-placeholder {
+      color: #d3d3d3;
+      font-size: 14px; }
+    .form-form .form-form-wrap form .field-wrapper input:focus {
+      border-bottom: 1px solid #1b55e2;
+      box-shadow: none; }
+  .form-form .form-form-wrap form .field-wrapper.toggle-pass {
+    align-self: center;
+    text-align: left; }
+    .form-form .form-form-wrap form .field-wrapper.toggle-pass .switch {
+      margin-bottom: 0;
+      vertical-align: sub;
+      margin-left: 7px; }
+  .form-form .form-form-wrap form .field-wrapper button.btn {
+    align-self: center; }
+  .form-form .form-form-wrap form .field-wrapper a.forgot-pass-link {
+    width: 100%;
+    font-weight: 700;
+    color: #1b55e2;
+    text-align: center;
+    display: block;
+    letter-spacing: 2px;
+    font-size: 15px;
+    margin-top: 15px; }
+  .form-form .form-form-wrap form .field-wrapper .n-chk .new-control-indicator {
+    top: 1px;
+    border: 1px solid #bfc9d4;
+    background-color: #f1f2f3; }
+    .form-form .form-form-wrap form .field-wrapper .n-chk .new-control-indicator:after {
+      top: 52%; }
+  .form-form .form-form-wrap form .field-wrapper.keep-logged-in {
+    margin-top: 60px; }
+    .form-form .form-form-wrap form .field-wrapper.keep-logged-in label {
+      font-size: 14px;
+      color: #888ea8;
+      padding-left: 31px;
+      font-weight: 100; }
+  .form-form .terms-conditions {
+    max-width: 480px;
+    margin: 0 auto;
+    color: #3b3f5c;
+    font-weight: 600;
+    margin-top: 90px; }
+    .form-form .terms-conditions a {
+      color: #1b55e2;
+      font-weight: 700; }
+
+.form-image {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  position: fixed;
+  right: 0;
+  min-height: auto;
+  height: 100vh;
+  width: 50%; }
+  .form-image .l-image {
+    background-image: url(https://cdn.pixabay.com/photo/2015/12/10/16/39/shield-1086703_960_720.png);
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: #060818;
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: 75%;
+    background-position-x: center;
+    background-position-y: center; }
+
+@media (max-width: 991px) {
+  .form-form {
+    width: 100%; }
+    .form-form .form-form-wrap {
+      min-width: auto; }
+  .form-image {
+    display: none; } }
+
+@media (max-width: 575px) {
+  .form-form .form-form-wrap form .field-wrapper.toggle-pass {
+    margin-bottom: 28px; } }
+
+@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+  .form-form .form-form-wrap {
+    width: 100%; }
+  .form-form .form-container {
+    height: 100%; } }
diff --git a/static/css/authentication/form-2.css b/static/css/authentication/form-2.css
new file mode 100644
index 00000000..9306658f
--- /dev/null
+++ b/static/css/authentication/form-2.css
@@ -0,0 +1,231 @@
+/*
+	===============================
+			@Import	Function
+	===============================
+*/
+/*
+	===============================
+			@Import	Mixins
+	===============================
+*/
+html {
+  height: 100%; }
+
+body {
+  height: 100%;
+  overflow: auto;
+  margin: 0;
+  padding: 0;
+  background-color: #fff; }
+
+.form-form {
+  width: 50%;
+  display: flex;
+  flex-direction: column;
+  min-height: 100%;
+  margin: 0 auto; }
+  .form-form .form-form-wrap {
+    max-width: 480px;
+    margin: 0 auto;
+    min-width: 311px;
+    min-height: 100%;
+    align-self: center;
+    width: 100%;
+    height: 100vh;
+    justify-content: center; }
+  .form-form .form-container {
+    align-items: center;
+    display: flex;
+    flex-grow: 1;
+    width: 100%;
+    min-height: 100%; }
+    .form-form .form-container .form-content {
+      display: block;
+      width: 100%;
+      padding: 25px;
+      background: #fff;
+      text-align: center;
+      border-radius: 15px;
+      border: 1px solid #e0e6ed;
+      -webkit-box-shadow: 0 4px 6px 0 rgba(85, 85, 85, 0.0901961), 0 1px 20px 0 rgba(0, 0, 0, 0.08), 0px 1px 11px 0px rgba(0, 0, 0, 0.06);
+      -moz-box-shadow: 0 4px 6px 0 rgba(85, 85, 85, 0.0901961), 0 1px 20px 0 rgba(0, 0, 0, 0.08), 0px 1px 11px 0px rgba(0, 0, 0, 0.06);
+      box-shadow: 0 4px 6px 0 rgba(85, 85, 85, 0.0901961), 0 1px 20px 0 rgba(0, 0, 0, 0.08), 0px 1px 11px 0px rgba(0, 0, 0, 0.06); }
+      .form-form .form-container .form-content h1 {
+        font-size: 32px;
+        color: #3b3f5c; }
+      .form-form .form-container .form-content > p {
+        font-size: 13px;
+        color: #888ea8;
+        font-weight: 600;
+        margin-bottom: 35px; }
+  .form-form .form-form-wrap .user-meta {
+    margin-bottom: 35px; }
+    .form-form .form-form-wrap .user-meta img {
+      width: 52px;
+      height: 52px;
+      border-radius: 50%;
+      margin-right: 15px;
+      border: 4px solid #e0e6ed; }
+    .form-form .form-form-wrap .user-meta div {
+      align-self: center; }
+    .form-form .form-form-wrap .user-meta p {
+      font-size: 31px;
+      color: #3b3f5c;
+      margin-bottom: 0; }
+  .form-form .form-form-wrap h1 .brand-name {
+    color: #3b3f5c;
+    font-weight: 600; }
+  .form-form .form-form-wrap p.signup-link {
+    font-size: 14px;
+    color: #3b3f5c;
+    font-weight: 700;
+    margin-bottom: 15px;
+    text-align: center;
+    margin-top: 50px; }
+    .form-form .form-form-wrap p.signup-link.register {
+      font-size: 13px;
+      color: #888ea8;
+      font-weight: 600;
+      margin-bottom: 25px;
+      margin-top: 0; }
+    .form-form .form-form-wrap p.signup-link.recovery {
+      margin-top: 0; }
+    .form-form .form-form-wrap p.signup-link a {
+      color: #1b55e2;
+      border-bottom: 1px solid; }
+  .form-form .form-form-wrap form .field-wrapper {
+    width: 100%; }
+    .form-form .form-form-wrap form .field-wrapper.input {
+      padding: 11px 0px 16px 0;
+      border-bottom: none;
+      position: relative; }
+      .form-form .form-form-wrap form .field-wrapper.input:focus {
+        border: 1px solid #000; }
+    .form-form .form-form-wrap form .field-wrapper.toggle-pass p {
+      font-weight: 600;
+      color: #3b3f5c;
+      margin-bottom: 0; }
+    .form-form .form-form-wrap form .field-wrapper .logged-in-user-name {
+      font-size: 37px;
+      color: #3b3f5c; }
+    .form-form .form-form-wrap form .field-wrapper label {
+      font-size: 10px;
+      font-weight: 700;
+      color: #3b3f5c;
+      margin-bottom: 8px; }
+    .form-form .form-form-wrap form .field-wrapper.terms_condition {
+      margin-bottom: 20px; }
+      .form-form .form-form-wrap form .field-wrapper.terms_condition label {
+        font-size: 14px;
+        color: #888ea8;
+        padding-left: 31px;
+        font-weight: 100; }
+      .form-form .form-form-wrap form .field-wrapper.terms_condition a {
+        color: #1b55e2; }
+    .form-form .form-form-wrap form .field-wrapper svg.feather-user {
+      top: 53px; }
+    .form-form .form-form-wrap form .field-wrapper svg.feather-lock {
+      top: 50px; }
+    .form-form .form-form-wrap form .field-wrapper svg.feather-at-sign {
+      top: 47px; }
+      .form-form .form-form-wrap form .field-wrapper svg.feather-at-sign.register {
+        top: 53px; }
+    .form-form .form-form-wrap form .field-wrapper svg:not(.feather-eye) {
+      position: absolute;
+      left: 12px;
+      color: #888ea8;
+      fill: rgba(0, 23, 55, 0.08);
+      width: 20px;
+      height: 20px; }
+    .form-form .form-form-wrap form .field-wrapper svg.feather-eye {
+      position: absolute;
+      top: 49px;
+      right: 13px;
+      color: #888ea8;
+      fill: rgba(0, 23, 55, 0.08);
+      width: 17px;
+      cursor: pointer; }
+    .form-form .form-form-wrap form .field-wrapper input {
+      display: inline-block;
+      vertical-align: middle;
+      border-radius: 6px;
+      min-width: 50px;
+      max-width: 635px;
+      width: 100%;
+      -ms-transition: all 0.2s ease-in-out 0s;
+      transition: all 0.2s ease-in-out 0s;
+      color: #3b3f5c;
+      font-weight: 600;
+      font-size: 16px;
+      padding: 13px 35px 13px 46px; }
+      .form-form .form-form-wrap form .field-wrapper input::-webkit-input-placeholder, .form-form .form-form-wrap form .field-wrapper input::-ms-input-placeholder, .form-form .form-form-wrap form .field-wrapper input::-moz-placeholder {
+        color: #d3d3d3;
+        font-size: 14px; }
+    .form-form .form-form-wrap form .field-wrapper button.btn {
+      align-self: center;
+      width: 100%;
+      padding: 11px 14px;
+      font-size: 16px;
+      letter-spacing: 2px; }
+    .form-form .form-form-wrap form .field-wrapper a.forgot-pass-link {
+      font-weight: 600;
+      color: #888ea8;
+      display: block;
+      letter-spacing: 1px;
+      font-size: 12px;
+      margin-bottom: 8px; }
+    .form-form .form-form-wrap form .field-wrapper .n-chk .new-control-indicator {
+      top: 2px;
+      border: 1px solid #bfc9d4;
+      background-color: #f1f2f3; }
+      .form-form .form-form-wrap form .field-wrapper .n-chk .new-control-indicator:after {
+        top: 54%; }
+
+.new-control.new-checkbox.checkbox-primary > input:checked ~ span.new-control-indicator {
+  border: none; }
+
+.form-form .form-form-wrap form .division {
+  text-align: center;
+  font-size: 13px;
+  margin: 35px 0 38px 0; }
+
+.form-form .form-form-wrap form .social {
+  text-align: center; }
+  .form-form .form-form-wrap form .social a {
+    background: transparent;
+    box-shadow: none;
+    border: 1px solid #e0e6ed;
+    padding: 12px 10px;
+    width: 181px; }
+    .form-form .form-form-wrap form .social a.social-fb {
+      margin-right: 15px; }
+      .form-form .form-form-wrap form .social a.social-fb svg, .form-form .form-form-wrap form .social a.social-fb .brand-name {
+        color: #1b55e2; }
+
+@media (max-width: 991px) {
+  .form-form {
+    width: 100%; }
+    .form-form .form-form-wrap {
+      min-width: auto;
+      margin: 0 auto; }
+    .form-form .form-container .form-content {
+      border-radius: 15px; } }
+
+@media (max-width: 575px) {
+  .form-form .form-form-wrap form .field-wrapper.toggle-pass {
+    margin-bottom: 28px; }
+  .form-form .form-form-wrap form .social a.social-fb, .form-form .form-form-wrap form .social a.social-github {
+    margin-right: auto;
+    margin-left: auto;
+    margin-bottom: 10px;
+    display: block; } }
+
+@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+  .form-form .form-form-wrap {
+    width: 100%; }
+  .form-form .form-container {
+    height: 100%; } }
+
+@supports (-ms-ime-align: auto) {
+  .form-form .form-form-wrap {
+    height: 100%; } }
diff --git a/static/css/components/cards/card.css b/static/css/components/cards/card.css
new file mode 100644
index 00000000..f14a4d30
--- /dev/null
+++ b/static/css/components/cards/card.css
@@ -0,0 +1,440 @@
+/*
+	===============================
+			@Import	Function
+	===============================
+*/
+/*
+	===============================
+			@Import	Mixins
+	===============================
+*/
+/*
+	Component Card 1
+*/
+.component-card_1 {
+  border: 1px solid #e0e6ed;
+  border-radius: 6px;
+  width: 19rem;
+  margin: 0 auto;
+  box-shadow: 4px 6px 10px -3px #bfc9d4; }
+  .component-card_1 .card-body {
+    padding: 28px 25px; }
+  .component-card_1 .icon-svg {
+    margin-bottom: 20px;
+    display: inline-block;
+    background: #3b3f5c;
+    padding: 12px;
+    border-radius: 50%;
+    color: #f1f2f3; }
+  .component-card_1 svg {
+    width: 20px;
+    height: 20px; }
+  .component-card_1 .card-title {
+    font-size: 20px;
+    font-weight: 600;
+    letter-spacing: 1px;
+    margin-bottom: 15px; }
+  .component-card_1 .card-text {
+    color: #888ea8; }
+
+/*
+	Component Card 2
+*/
+.component-card_2 {
+  border: 1px solid #e0e6ed;
+  border-radius: 6px;
+  width: 18rem;
+  margin: 0 auto;
+  box-shadow: 4px 6px 10px -3px #bfc9d4; }
+  .component-card_2 .card-body {
+    padding: 22px 20px; }
+  .component-card_2 .card-title {
+    font-size: 20px;
+    font-weight: 700;
+    letter-spacing: 1px;
+    margin-bottom: 15px; }
+  .component-card_2 .card-text {
+    color: #888ea8;
+    line-height: 22px; }
+  .component-card_2 a.btn-primary {
+    margin: 26px 0 0 0;
+    padding: 10px 16px;
+    background: #f8538d !important;
+    border-color: #f8538d; }
+
+/*
+	Component Card 3
+*/
+.component-card_3 {
+  border: none;
+  border-radius: 8px;
+  background: #3b3f5c;
+  width: 18rem;
+  margin: 0 auto;
+  box-shadow: 4px 6px 10px -3px #bfc9d4; }
+  .component-card_3 .card-body {
+    padding: 22px 20px;
+    text-align: center; }
+    .component-card_3 .card-body img {
+      width: 85px;
+      height: 85px;
+      margin-bottom: 25px;
+      border-radius: 50%; }
+    .component-card_3 .card-body h5.card-user_name {
+      font-size: 15px;
+      color: #fff;
+      letter-spacing: 1px;
+      font-weight: 600; }
+    .component-card_3 .card-body p.card-user_occupation {
+      font-size: 14px;
+      color: #acb0c3;
+      letter-spacing: 1px; }
+    .component-card_3 .card-body .card-star_rating {
+      margin-bottom: 24px; }
+      .component-card_3 .card-body .card-star_rating svg {
+        width: 20px;
+        color: #e2a03f; }
+        .component-card_3 .card-body .card-star_rating svg.fill {
+          fill: #e2a03f; }
+    .component-card_3 .card-body .card-text {
+      color: #acb0c3;
+      font-style: italic;
+      font-size: 14px;
+      letter-spacing: 1px; }
+
+/*
+	Component Card 4
+*/
+.component-card_4 {
+  width: 30rem;
+  margin: 0 auto;
+  border: none;
+  border: 1px solid #e0e6ed;
+  border-radius: 8px;
+  -webkit-box-shadow: 4px 6px 10px -3px #bfc9d4;
+  box-shadow: 4px 6px 10px -3px #bfc9d4; }
+  .component-card_4 .card-body {
+    padding: 0;
+    display: flex; }
+  .component-card_4 .user-profile {
+    align-self: center;
+    padding: 0 25px; }
+  .component-card_4 img {
+    border-radius: 50%; }
+  .component-card_4 .user-info {
+    padding: 24px 8px 24px 0px; }
+  .component-card_4 .card-user_name {
+    font-size: 16px;
+    font-weight: 700;
+    margin-bottom: 10px; }
+  .component-card_4 .card-user_occupation {
+    color: #888ea8;
+    font-size: 13px; }
+  .component-card_4 .card-star_rating span {
+    display: inline-block;
+    padding: 0px 8px;
+    font-size: 15px;
+    border-radius: 50px;
+    margin-bottom: 22px; }
+  .component-card_4 .card-star_rating svg {
+    width: 16px;
+    vertical-align: bottom; }
+  .component-card_4 .card-text {
+    color: #515365;
+    font-size: 14px;
+    letter-spacing: 1px;
+    font-weight: 600;
+    line-height: 23px; }
+
+/*
+	Component Card 5
+*/
+.component-card_5 {
+  width: 20rem;
+  margin: 0 auto;
+  border: none;
+  border-radius: 8px;
+  background: #5c1ac3;
+  -webkit-box-shadow: 4px 6px 10px -3px #bfc9d4;
+  box-shadow: 4px 6px 10px -3px #bfc9d4; }
+  .component-card_5 .card-body {
+    padding: 30px 30px; }
+    .component-card_5 .card-body .user-info {
+      display: flex;
+      padding: 22px 0 0 0; }
+    .component-card_5 .card-body .media-body {
+      align-self: center; }
+    .component-card_5 .card-body img {
+      width: 56px;
+      height: 56px;
+      margin-right: 18px;
+      border-radius: 50%; }
+    .component-card_5 .card-body h5.card-user_name {
+      font-size: 15px;
+      color: #fff;
+      letter-spacing: 1px;
+      font-weight: 600;
+      margin-bottom: 3px; }
+    .component-card_5 .card-body p.card-user_occupation {
+      font-size: 14px;
+      color: #acb0c3;
+      letter-spacing: 1px;
+      margin-bottom: 0; }
+    .component-card_5 .card-body .card-text {
+      color: #f1f2f3;
+      font-size: 14px;
+      letter-spacing: 1px; }
+
+/*
+	Component Card 6
+*/
+.component-card_6 {
+  border-radius: 8px;
+  background: #fff;
+  border: 1px solid #e0e6ed;
+  width: 19rem;
+  margin: 0 auto;
+  -webkit-box-shadow: 4px 6px 10px -3px #bfc9d4;
+  box-shadow: 4px 6px 10px -3px #bfc9d4; }
+  .component-card_6 .card-body {
+    padding: 30px 30px; }
+    .component-card_6 .card-body .user-info {
+      display: flex;
+      padding: 13px 0 0 0; }
+    .component-card_6 .card-body .media-body {
+      align-self: center; }
+    .component-card_6 .card-body img {
+      width: 56px;
+      height: 56px;
+      margin-right: 18px;
+      border-radius: 50%; }
+    .component-card_6 .card-body h5.card-user_name {
+      font-size: 16px;
+      color: #3b3f5c;
+      letter-spacing: 1px;
+      font-weight: 700;
+      margin-bottom: 3px; }
+    .component-card_6 .card-body p.card-user_occupation {
+      font-size: 14px;
+      color: #888ea8;
+      letter-spacing: 1px;
+      margin-bottom: 0; }
+    .component-card_6 .card-body .card-text {
+      color: #515365;
+      font-style: italic;
+      font-size: 14px;
+      letter-spacing: 1px;
+      font-weight: 600; }
+    .component-card_6 .card-body .card-star_rating svg {
+      width: 12px;
+      color: #e2a03f; }
+      .component-card_6 .card-body .card-star_rating svg.fill {
+        fill: #e2a03f; }
+
+/*
+	Component Card 7
+*/
+.component-card_7 {
+  background-color: #1b55e2;
+  color: #fff;
+  border: none;
+  width: 18rem;
+  margin: 0 auto;
+  -webkit-box-shadow: 4px 6px 10px -3px #bfc9d4;
+  box-shadow: 4px 6px 10px -3px #bfc9d4; }
+  .component-card_7 .card-body {
+    padding: 23px 10px;
+    text-align: center; }
+  .component-card_7 .card-text, .component-card_7 .rating-count {
+    color: #fff;
+    margin-bottom: 20px; }
+  .component-card_7 .rating-stars svg {
+    width: 18px;
+    color: #e2a03f; }
+    .component-card_7 .rating-stars svg.fill {
+      fill: #e2a03f; }
+
+/*
+	Component Card 8
+*/
+.component-card_8 {
+  background: #fff;
+  border: 1px solid #e0e6ed;
+  width: 24rem;
+  margin: 0 auto;
+  -webkit-box-shadow: 4px 6px 10px -3px #bfc9d4;
+  box-shadow: 4px 6px 10px -3px #bfc9d4; }
+  .component-card_8 .progress-order .progress-order-header h6 {
+    color: #0e1726;
+    font-weight: 600;
+    font-size: 16px; }
+  .component-card_8 .progress-order .progress-order-header span.badge {
+    font-size: 12px;
+    padding: 6px 10px;
+    color: #1b55e2;
+    background-color: #c2d5ff; }
+  .component-card_8 .progress-order .progress-order-body ul li img {
+    width: 40px;
+    height: 40px; }
+  .component-card_8 .progress-order .progress-order-body ul li.badge-notify {
+    position: relative; }
+    .component-card_8 .progress-order .progress-order-body ul li.badge-notify .notification {
+      position: absolute;
+      top: -15px;
+      right: -34px; }
+      .component-card_8 .progress-order .progress-order-body ul li.badge-notify .notification span.badge {
+        background-color: #fff;
+        color: #1b55e2;
+        box-shadow: 0 0 20px 0 #d0d0d0;
+        font-size: 12px;
+        padding: 4px 7px; }
+  .component-card_8 .progress-order .progress-order-body .p-o-percentage {
+    font-size: 14px;
+    color: #1b55e2; }
+  .component-card_8 .progress-order .progress-order-body .progress {
+    height: 6px;
+    border-radius: 30px; }
+    .component-card_8 .progress-order .progress-order-body .progress .p-o-progress {
+      border-radius: 30px; }
+
+.pending-order {
+  padding: 22px 20px; }
+
+/*
+	Component Card 9
+*/
+.component-card_9 {
+  border: 1px solid #e0e6ed;
+  border-radius: 6px;
+  width: 22rem;
+  margin: 0 auto;
+  -webkit-box-shadow: 4px 6px 10px -3px #bfc9d4;
+  box-shadow: 4px 6px 10px -3px #bfc9d4; }
+  .component-card_9 .card-body {
+    padding: 22px 20px; }
+  .component-card_9 .meta-date {
+    margin-bottom: 5px;
+    font-size: 12px;
+    font-weight: 600;
+    color: #1b55e2; }
+  .component-card_9 .card-title {
+    font-size: 15px;
+    font-weight: 700;
+    letter-spacing: 1px;
+    margin-bottom: 15px; }
+  .component-card_9 .card-text {
+    color: #888ea8;
+    line-height: 22px; }
+  .component-card_9 .meta-info {
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+    margin-top: 25px;
+    padding-top: 15px; }
+    .component-card_9 .meta-info:before {
+      content: '';
+      position: absolute;
+      height: 1px;
+      width: 215px;
+      background: #e0e6ed;
+      top: 0;
+      right: 0;
+      left: 0;
+      margin-right: auto;
+      margin-left: auto; }
+  .component-card_9 .meta-user {
+    display: flex; }
+  .component-card_9 .avatar {
+    position: relative;
+    display: inline-block;
+    width: 34px;
+    height: 34px;
+    font-size: 1rem;
+    margin-right: 10px; }
+    .component-card_9 .avatar .avatar-title {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+      background-color: #515365;
+      color: #e0e6ed;
+      font-size: 14px; }
+  .component-card_9 .user-name {
+    align-self: center;
+    color: #515365;
+    font-weight: 600; }
+  .component-card_9 .meta-action {
+    display: flex; }
+  .component-card_9 .meta-likes {
+    align-self: center;
+    margin-right: 13px;
+    color: #1b55e2; }
+    .component-card_9 .meta-likes svg {
+      width: 16px;
+      vertical-align: sub;
+      color: #1b55e2;
+      fill: rgba(27, 85, 226, 0.239216); }
+  .component-card_9 .meta-view {
+    align-self: center;
+    color: #1b55e2; }
+    .component-card_9 .meta-view svg {
+      width: 16px;
+      vertical-align: sub;
+      color: #1b55e2;
+      fill: rgba(27, 85, 226, 0.239216); }
+
+/*
+	Media Queries
+*/
+@media (max-width: 575px) {
+  /*
+  	Component Card 1
+  */
+  .component-card_1, .component-card_2, .component-card_3 {
+    width: auto; }
+  /*
+  	Component Card 2
+  */
+  /*
+  	Component Card 3
+  */
+  /*
+  	Component Card 4
+  */
+  .component-card_4 {
+    width: auto;
+    text-align: center; }
+    .component-card_4 .card-body {
+      padding: 0;
+      display: block; }
+    .component-card_4 .user-info {
+      padding: 0 25px 25px 25px; }
+    .component-card_4 .user-profile {
+      align-self: center;
+      padding: 25px 25px; }
+  /*
+  	Component Card 5
+  */
+  .component-card_5, .component-card_6, .component-card_7, .component-card_8 {
+    width: auto; }
+  /*
+  	Component Card 6
+  */
+  /*
+  	Component Card 7
+  */
+  /*
+  	Component Card 8
+  */
+  /*
+  	Component Card 9
+  */
+  .component-card_9 {
+    width: auto; }
+    .component-card_9 .meta-info {
+      display: block; }
+    .component-card_9 .meta-action {
+      margin-top: 16px; }
+    .component-card_9 .meta-info:before {
+      width: 50%; } }
diff --git a/static/css/components/custom-carousel.css b/static/css/components/custom-carousel.css
new file mode 100644
index 00000000..c75b29e2
--- /dev/null
+++ b/static/css/components/custom-carousel.css
@@ -0,0 +1,152 @@
+/*
+	===============================
+			@Import	Function
+	===============================
+*/
+/*
+	===============================
+			@Import	Mixins
+	===============================
+*/
+.carousel-caption h3, .carousel-caption h5 {
+  color: #fff; }
+
+/*      style-custom-1       */
+.style-custom-1 .carousel-inner {
+  border-radius: 10px; }
+
+.style-custom-1 .carousel-item {
+  -webkit-transform-style: preserve-3d;
+  -moz-transform-style: preserve-3d;
+  transform-style: preserve-3d; }
+
+.style-custom-1 .carousel-caption {
+  position: absolute;
+  right: auto;
+  left: 44px;
+  color: #fff;
+  text-align: left;
+  width: 50%;
+  top: 50%;
+  transform: translateY(-50%);
+  bottom: initial; }
+  .style-custom-1 .carousel-caption .badge {
+    padding: 6px 16px;
+    font-weight: 700;
+    letter-spacing: 2px;
+    background-color: #4dcf8f;
+    color: #fff;
+    font-size: 13px;
+    margin-bottom: 35px; }
+  .style-custom-1 .carousel-caption h3 {
+    font-weight: 600;
+    color: #fff;
+    font-size: 28px;
+    letter-spacing: 2px;
+    margin-bottom: 36px; }
+  .style-custom-1 .carousel-caption .media img {
+    width: 49px;
+    height: 49px;
+    border-radius: 50%;
+    margin-right: 15px; }
+  .style-custom-1 .carousel-caption .media .media-body .user-name {
+    color: #fff;
+    font-size: 15px;
+    margin-bottom: 0; }
+  .style-custom-1 .carousel-caption .media .media-body .meta-time {
+    color: #fff;
+    font-size: 12px;
+    margin-bottom: 0; }
+    .style-custom-1 .carousel-caption .media .media-body .meta-time svg {
+      vertical-align: bottom;
+      width: 17px; }
+
+.style-custom-1 .carousel-indicators {
+  top: 45%;
+  bottom: auto;
+  display: block;
+  left: auto;
+  margin: auto;
+  right: 33px; }
+
+.style-custom-1 .carousel-control-next, .style-custom-1 .carousel-control-prev {
+  top: auto;
+  bottom: 32px;
+  background-color: transparent; }
+
+.style-custom-1 .carousel-indicators li {
+  width: 9px;
+  height: 10px;
+  border-radius: 10px;
+  border: none;
+  margin-top: 0;
+  margin-bottom: 9px; }
+  .style-custom-1 .carousel-indicators li.active {
+    height: 32px;
+    border-radius: 10px; }
+
+.style-custom-1 .carousel-control-prev {
+  right: 100px;
+  left: auto; }
+  .style-custom-1 .carousel-control-prev .carousel-control-prev-icon {
+    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-arrow-left'%3e%3cline x1='19' y1='12' x2='5' y2='12'%3e%3c/line%3e%3cpolyline points='12 19 5 12 12 5'%3e%3c/polyline%3e%3c/svg%3e");
+    width: 26px;
+    height: 26px; }
+
+.style-custom-1 .carousel-control-next {
+  right: 40px;
+  left: auto; }
+  .style-custom-1 .carousel-control-next .carousel-control-next-icon {
+    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-arrow-right'%3e%3cline x1='5' y1='12' x2='19' y2='12'%3e%3c/line%3e%3cpolyline points='12 5 19 12 12 19'%3e%3c/polyline%3e%3c/svg%3e");
+    width: 26px;
+    height: 26px; }
+
+/*
+	Default Style of the carousel arrows
+*/
+.carousel-control-next, .carousel-control-prev {
+  top: 0;
+  bottom: 0;
+  width: 50px;
+  height: 50px;
+  border-radius: 50px;
+  background-color: rgba(255, 255, 255, 0.2);
+  display: -ms-flexbox;
+  -ms-flex-align: center;
+  -ms-flex-pack: center;
+  margin: auto 10px auto 10px; }
+
+/*
+	@media Query
+*/
+@media (max-width: 768px) {
+  .style-custom-1 {
+    min-height: 392px; }
+    .style-custom-1 .carousel-caption {
+      top: 8%;
+      transform: translateY(0); }
+    .style-custom-1 .carousel-indicators {
+      top: 16%; }
+    .style-custom-1 .carousel-inner {
+      min-height: 392px; }
+    .style-custom-1 .carousel-item {
+      min-height: 392px; }
+      .style-custom-1 .carousel-item img.slide-image {
+        min-height: 392px; } }
+
+@media (max-width: 575px) {
+  .style-custom-1 .carousel-caption {
+    width: 78%;
+    left: 30px; }
+  .style-custom-1 .carousel-indicators {
+    display: flex;
+    top: auto;
+    bottom: 22px;
+    right: 0;
+    left: 0; }
+    .style-custom-1 .carousel-indicators li.active {
+      width: 26px;
+      border-radius: 18px;
+      height: 10px; }
+  .style-custom-1 .carousel-control-next, .style-custom-1 .carousel-control-prev {
+    display: none; } }
diff --git a/static/css/components/custom-countdown.css b/static/css/components/custom-countdown.css
new file mode 100644
index 00000000..fb1c64f4
--- /dev/null
+++ b/static/css/components/custom-countdown.css
@@ -0,0 +1,70 @@
+/*
+	===============================
+			@Import	Function
+	===============================
+*/
+/*
+	===============================
+			@Import	Mixins
+	===============================
+*/
+/*
+    Countdown Simple
+*/
+#cd-simple {
+  display: flex;
+  justify-content: space-around;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap; }
+  #cd-simple .countdown {
+    margin-bottom: 23px; }
+  #cd-simple .clock-count-container {
+    width: 100px;
+    height: 100px;
+    -webkit-box-shadow: 1px 2px 12px 0 rgba(31, 45, 61, 0.1);
+    box-shadow: 1px 2px 12px 0 rgba(31, 45, 61, 0.1);
+    border-radius: 6px;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    border: 1px solid #e0e6ed; }
+  #cd-simple .clock-val {
+    font-size: 35px;
+    color: #1b55e2;
+    margin-bottom: 0; }
+  #cd-simple .clock-text {
+    color: #3b3f5c;
+    font-size: 15px;
+    margin-bottom: 0;
+    margin-top: 16px; }
+
+/*
+    Countdown Circle
+*/
+#cd-circle {
+  display: flex;
+  justify-content: space-around;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap; }
+  #cd-circle .countdown {
+    margin-bottom: 23px; }
+  #cd-circle .clock-count-container {
+    width: 85px;
+    height: 85px;
+    -webkit-box-shadow: 1px 2px 12px 0 rgba(31, 45, 61, 0.1);
+    box-shadow: 1px 2px 12px 0 rgba(31, 45, 61, 0.1);
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    border: 1px solid #e0e6ed;
+    margin: 0 0 12px 0; }
+  #cd-circle .clock-val {
+    font-size: 25px;
+    color: #1b55e2;
+    margin-bottom: 0; }
+  #cd-circle .clock-text {
+    color: #3b3f5c;
+    font-size: 15px;
+    margin-bottom: 0;
+    margin-top: 16px; }
diff --git a/static/css/components/custom-counter.css b/static/css/components/custom-counter.css
new file mode 100644
index 00000000..ef8102d9
--- /dev/null
+++ b/static/css/components/custom-counter.css
@@ -0,0 +1,76 @@
+/*
+	===============================
+			@Import	Function
+	===============================
+*/
+/*
+	===============================
+			@Import	Mixins
+	===============================
+*/
+/*
+    Simple Counter
+*/
+.simple--counter-container {
+  display: flex;
+  justify-content: space-around;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap; }
+  .simple--counter-container .counter-container {
+    margin-bottom: 23px; }
+    .simple--counter-container .counter-container .counter-content {
+      width: 100px;
+      height: 100px;
+      -webkit-box-shadow: 1px 2px 12px 0 rgba(31, 45, 61, 0.1);
+      box-shadow: 1px 2px 12px 0 rgba(31, 45, 61, 0.1);
+      border-radius: 6px;
+      display: flex;
+      justify-content: center;
+      flex-direction: column;
+      border: 1px solid #e0e6ed; }
+  .simple--counter-container .s-counter {
+    font-size: 35px;
+    color: #1b55e2;
+    margin-bottom: 0; }
+  .simple--counter-container .s-counter-text {
+    color: #3b3f5c;
+    font-size: 15px;
+    margin-bottom: 0;
+    margin-top: 16px; }
+
+/*
+    With Icon
+*/
+.icon--counter-container {
+  display: flex;
+  justify-content: space-around;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap; }
+  .icon--counter-container .counter-container {
+    margin-bottom: 23px; }
+  .icon--counter-container .counter-ico {
+    color: #1b55e2;
+    font-size: 28px;
+    width: 30px;
+    height: 30px;
+    margin-bottom: 6px; }
+  .icon--counter-container .counter-content {
+    width: 85px;
+    height: 85px;
+    -webkit-box-shadow: 1px 2px 12px 0 rgba(31, 45, 61, 0.1);
+    box-shadow: 1px 2px 12px 0 rgba(31, 45, 61, 0.1);
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    border: 1px solid #e0e6ed;
+    margin: 0 0 12px 0; }
+  .icon--counter-container .ico-counter {
+    font-size: 25px;
+    color: #3b3f5c;
+    margin-bottom: 0; }
+  .icon--counter-container .ico-counter-text {
+    color: #888ea8;
+    font-size: 13px;
+    font-weight: 100;
+    letter-spacing: 1px; }
diff --git a/static/css/components/custom-list-group.css b/static/css/components/custom-list-group.css
new file mode 100644
index 00000000..42f0a6d9
--- /dev/null
+++ b/static/css/components/custom-list-group.css
@@ -0,0 +1,215 @@
+/*
+	===============================
+			@Import	Function
+	===============================
+*/
+/*
+	===============================
+			@Import	Mixins
+	===============================
+*/
+/*
+==================
+    Switches
+==================
+*/
+/* The switch - the box around the slider */
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 35px;
+  height: 18px; }
+  .switch input {
+    display: none; }
+  .switch .slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #ebedf2;
+    -webkit-transition: .4s;
+    transition: .4s; }
+    .switch .slider:before {
+      position: absolute;
+      content: "";
+      background-color: white;
+      -webkit-transition: .4s;
+      -ms-transition: .4s;
+      transition: .4s;
+      height: 14px;
+      width: 14px;
+      left: 2px;
+      bottom: 2px;
+      box-shadow: 0 1px 15px 1px rgba(52, 40, 104, 0.34); }
+  .switch input:checked + .slider:before {
+    -webkit-transform: translateX(17px);
+    -ms-transform: translateX(17px);
+    transform: translateX(17px); }
+  .switch .slider.round {
+    border-radius: 34px; }
+    .switch .slider.round:before {
+      border-radius: 50%; }
+  .switch.s-secondary input:checked + .slider {
+    background-color: #5c1ac3; }
+  .switch.s-secondary input:focus + .slider {
+    box-shadow: 0 0 1px #5c1ac3; }
+
+/* Hide default HTML checkbox */
+/* The slider */
+/* Rounded Slider Switches */
+/*----------Theme checkbox---------*/
+.new-control {
+  position: relative;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  padding-left: 1.5rem;
+  margin-right: 1rem; }
+
+.new-control-input {
+  position: absolute;
+  z-index: -1;
+  opacity: 0; }
+
+.new-control.new-checkbox {
+  cursor: pointer;
+  color: #3b3f5c;
+  margin-bottom: 0; }
+  .new-control.new-checkbox .new-control-indicator {
+    position: absolute;
+    top: .25rem;
+    left: 0;
+    display: block;
+    width: 1rem;
+    height: 1rem;
+    pointer-events: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    background-color: #e0e6ed;
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: 50% 50%;
+    border-radius: 2px; }
+  .new-control.new-checkbox > input:checked ~ span.new-control-indicator {
+    background: #888ea8; }
+    .new-control.new-checkbox > input:checked ~ span.new-control-indicator:after {
+      display: block; }
+  .new-control.new-checkbox span.new-control-indicator:after {
+    border: solid #fff;
+    top: 50%;
+    left: 50%;
+    margin-left: -2px;
+    margin-top: -6px;
+    width: 5px;
+    height: 10px;
+    border-width: 0 2px 2px 0 !important;
+    transform: rotate(45deg);
+    content: '';
+    position: absolute;
+    display: none; }
+  .new-control.new-checkbox[class*="checkbox-outline-"] > input:checked ~ span.new-control-indicator {
+    background-color: transparent; }
+  .new-control.new-checkbox.new-checkbox-line-through.checkbox-outline-primary > input:checked ~ span.new-chk-content {
+    color: #1b55e2; }
+  .new-control.new-checkbox.checkbox-outline-primary > input:checked ~ span.new-control-indicator {
+    border: 1px solid #1b55e2; }
+    .new-control.new-checkbox.checkbox-outline-primary > input:checked ~ span.new-control-indicator:after {
+      border-color: #1b55e2; }
+  .new-control.new-checkbox.checkbox-primary > input:checked ~ span.new-control-indicator {
+    background: #1b55e2; }
+
+.list-group-item {
+  border: 1px solid #e0e6ed;
+  padding: 10px 12px; }
+  .list-group-item.active {
+    color: #fff;
+    background-color: #888ea8;
+    border-color: transparent;
+    box-shadow: 0 1px 15px 1px rgba(52, 40, 104, 0.15); }
+
+.new-control-indicator {
+  background-color: #f1f2f3; }
+
+a.list-group-item.list-group-item-action.active i {
+  color: #010156; }
+
+code {
+  color: #e7515a; }
+
+.list-group-item-action:hover {
+  color: #3b3f5c;
+  background-color: #f1f2f3;
+  box-shadow: 0px 0px 12px 1px rgba(113, 106, 202, 0.08); }
+
+/*------list group-----*/
+/*
+    Icons Meta
+*/
+.list-group.list-group-icons-meta .list-group-item.active {
+  background-color: #888ea8; }
+  .list-group.list-group-icons-meta .list-group-item.active .media svg {
+    font-size: 27px;
+    color: #fff; }
+  .list-group.list-group-icons-meta .list-group-item.active .media .media-body h6, .list-group.list-group-icons-meta .list-group-item.active .media .media-body p {
+    color: #fff;
+    font-weight: 500; }
+
+.list-group.list-group-icons-meta .list-group-item .media svg {
+  width: 20px;
+  color: #1b55e2;
+  height: 20px; }
+
+.list-group.list-group-icons-meta .list-group-item .media .media-body h6 {
+  color: #3b3f5c;
+  font-weight: 700;
+  margin-bottom: 0;
+  font-size: 15px;
+  letter-spacing: 1px; }
+
+.list-group.list-group-icons-meta .list-group-item .media .media-body p {
+  color: #3b3f5c;
+  margin-bottom: 0;
+  font-size: 12px;
+  font-weight: 600; }
+
+.list-group.list-group-media .list-group-item.active {
+  background-color: #888ea8; }
+  .list-group.list-group-media .list-group-item.active .media .media-body h6, .list-group.list-group-media .list-group-item.active .media .media-body p {
+    color: #fff;
+    font-weight: 500; }
+
+.list-group.list-group-media .list-group-item .media img {
+  color: #1b55e2;
+  width: 42px;
+  height: 42px; }
+
+.list-group.list-group-media .list-group-item .media .media-body {
+  align-self: center; }
+  .list-group.list-group-media .list-group-item .media .media-body h6 {
+    color: #3b3f5c;
+    font-weight: 700;
+    margin-bottom: 0;
+    font-size: 16px;
+    letter-spacing: 1px; }
+  .list-group.list-group-media .list-group-item .media .media-body p {
+    color: #3b3f5c;
+    margin-bottom: 0;
+    font-size: 12px;
+    font-weight: 600; }
+
+.list-group.task-list-group .list-group-item-action.active {
+  background-color: #888ea8;
+  color: #fff; }
+  .list-group.task-list-group .list-group-item-action.active .new-control.new-checkbox {
+    color: #fff;
+    font-size: 14px; }
+
+/*
+    Image Meta
+*/
+/*
+    task-list-group
+*/
diff --git a/static/css/components/custom-media_object.css b/static/css/components/custom-media_object.css
new file mode 100644
index 00000000..8175c7bb
--- /dev/null
+++ b/static/css/components/custom-media_object.css
@@ -0,0 +1,158 @@
+/*
+	===============================
+			@Import	Function
+	===============================
+*/
+/*
+	===============================
+			@Import	Mixins
+	===============================
+*/
+.widget-content-area {
+  padding: 10px 20px; }
+
+.toggle-code-snippet {
+  margin-bottom: -6px; }
+
+/*      Media Object      */
+.media {
+  margin-top: 20px;
+  margin-bottom: 20px; }
+  .media img {
+    width: 50px;
+    height: 50px;
+    margin-right: 15px; }
+  .media .media-body {
+    align-self: center; }
+    .media .media-body .media-heading {
+      color: #3b3f5c;
+      font-weight: 700;
+      margin-bottom: 10px;
+      font-size: 17px;
+      letter-spacing: 1px; }
+    .media .media-body .media-text {
+      color: #515365;
+      margin-bottom: 0;
+      font-size: 14px;
+      letter-spacing: 0; }
+
+/*      Right Aligned   */
+.media-right-aligned .media img {
+  margin-right: 0;
+  margin-left: 15px; }
+
+/* 	Media Notation 	*/
+.notation-text .media:first-child {
+  border-top: none; }
+
+.notation-text .media .media-body .media-notation {
+  margin-top: 8px;
+  margin-bottom: 9px; }
+  .notation-text .media .media-body .media-notation a {
+    color: #515365;
+    font-size: 13px;
+    font-weight: 700;
+    margin-right: 8px; }
+
+/* 	Media Notation With Icon	*/
+.notation-text-icon .media:first-child {
+  border-top: none; }
+
+.notation-text-icon .media .media-body .media-notation {
+  margin-top: 8px;
+  margin-bottom: 9px; }
+  .notation-text-icon .media .media-body .media-notation a {
+    color: #515365;
+    font-size: 13px;
+    font-weight: 700;
+    margin-right: 8px; }
+    .notation-text-icon .media .media-body .media-notation a svg {
+      color: #888ea8;
+      margin-right: 6px;
+      vertical-align: sub;
+      width: 18px;
+      height: 18px;
+      fill: rgba(0, 23, 55, 0.08); }
+
+/* 	With Labels	*/
+.m-o-label .media:first-child {
+  border-top: none; }
+
+.m-o-label .media .badge {
+  float: right; }
+
+/* 	Dropdown	*/
+.m-o-dropdown-list .media:first-child {
+  border-top: none; }
+
+.m-o-dropdown-list .media .media-heading {
+  display: flex;
+  justify-content: space-between; }
+  .m-o-dropdown-list .media .media-heading div.dropdown-list {
+    cursor: pointer;
+    color: #888ea8;
+    font-size: 18px;
+    float: right; }
+    .m-o-dropdown-list .media .media-heading div.dropdown-list a.dropdown-item span {
+      align-self: center; }
+    .m-o-dropdown-list .media .media-heading div.dropdown-list a.dropdown-item svg {
+      margin-left: 20px;
+      color: #888ea8;
+      align-self: center;
+      width: 20px;
+      height: 20px;
+      fill: rgba(0, 23, 55, 0.08); }
+    .m-o-dropdown-list .media .media-heading div.dropdown-list a.dropdown-item:hover svg {
+      color: #1b55e2;
+      fill: rgba(27, 85, 226, 0.239216); }
+
+.m-o-dropdown-list .dropdown-menu {
+  border-radius: 6px;
+  min-width: 9rem;
+  border: 1px solid #ebedf2;
+  box-shadow: 0px 0px 15px 1px rgba(113, 106, 202, 0.2);
+  padding: 9px 0; }
+
+.m-o-dropdown-list .dropdown-item {
+  font-size: 14px;
+  color: #888ea8;
+  padding: 5px 12px;
+  display: flex;
+  justify-content: space-between; }
+  .m-o-dropdown-list .dropdown-item:hover {
+    color: #e95f2b;
+    text-decoration: none;
+    background-color: #f1f2f3; }
+
+/* 	Label Icon	*/
+.m-o-label-icon .media:first-child {
+  border-top: none; }
+
+.m-o-label-icon .media svg.label-icon {
+  align-self: center;
+  width: 30px;
+  height: 30px;
+  margin-right: 16px; }
+  .m-o-label-icon .media svg.label-icon.label-success {
+    color: #8dbf42; }
+  .m-o-label-icon .media svg.label-icon.label-danger {
+    color: #ee3d49; }
+  .m-o-label-icon .media svg.label-icon.label-warning {
+    color: #ffbb44; }
+
+/* 	Checkbox	*/
+.m-o-chkbox .media:first-child {
+  border-top: none; }
+
+.m-o-chkbox .media .custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
+  background-color: #515365; }
+
+/* 	Checkbox	*/
+.m-o-radio .media:first-child {
+  border-top: none; }
+
+.m-o-radio .media .custom-radio .custom-control-input:checked ~ .custom-control-label::before {
+  background-color: #515365; }
+
+.custom-control-label::before {
+  background-color: #d3d3d3; }
diff --git a/static/css/components/custom-modal.css b/static/css/components/custom-modal.css
new file mode 100644
index 00000000..1bdfaaaf
--- /dev/null
+++ b/static/css/components/custom-modal.css
@@ -0,0 +1,238 @@
+/*
+	===============================
+			@Import	Function
+	===============================
+*/
+/*
+	===============================
+			@Import	Mixins
+	===============================
+*/
+.modal-backdrop {
+  background-color: #515365; }
+
+.modal-content {
+  border: none;
+  border-radius: 6px; }
+  .modal-content hr {
+    border-top: 1px solid #e0e6ed; }
+  .modal-content .modal-header {
+    padding: 12px 26px;
+    border: 1px solid #e0e6ed; }
+    .modal-content .modal-header h5 {
+      font-weight: 700;
+      font-size: 20px;
+      letter-spacing: 1px; }
+    .modal-content .modal-header svg {
+      width: 17px;
+      color: #acb0c3; }
+  .modal-content .modal-body {
+    padding: 26px 26px; }
+    .modal-content .modal-body a:not(.btn) {
+      color: #1b55e2;
+      font-weight: 600; }
+    .modal-content .modal-body p {
+      color: #888ea8;
+      letter-spacing: 1px;
+      font-size: 14px;
+      line-height: 22px; }
+      .modal-content .modal-body p:last-child {
+        margin-bottom: 0; }
+      .modal-content .modal-body p:not(:last-child) {
+        margin-bottom: 10px; }
+  .modal-content .modal-footer {
+    border-top: 1px solid #e0e6ed; }
+    .modal-content .modal-footer button.btn {
+      font-weight: 600;
+      padding: 10px 25px;
+      letter-spacing: 1px; }
+      .modal-content .modal-footer button.btn[data-dismiss="modal"] {
+        background-color: #fff;
+        color: #1b55e2;
+        font-weight: 700;
+        border: 1px solid #e8e8e8; }
+    .modal-content .modal-footer .btn.btn-primary {
+      background-color: #1b55e2;
+      color: #fff;
+      border: 1px solid #1b55e2; }
+
+/*
+    Modal Success
+*/
+.modal-success .modal-content {
+  background-color: #e6ffbf; }
+
+/*
+    Modal Video
+*/
+.modal-video .modal-content {
+  background-color: transparent; }
+
+.modal-video .video-container {
+  position: relative;
+  padding-bottom: 56.25%;
+  padding-top: 30px;
+  height: 0;
+  overflow: hidden; }
+
+.modal-video .modal#videoMedia1 .modal-header, .modal-video .modal#videoMedia2 .modal-header {
+  border: none;
+  padding: 0; }
+
+.modal-video .video-container iframe, .modal-video .video-container object, .modal-video .video-container embed {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%; }
+
+.modal-video .modal#videoMedia1 .modal-header .close, .modal-video .modal#videoMedia2 .modal-header .close {
+  color: #fff !important;
+  opacity: 1; }
+
+.modal-video .modal-content .modal-header svg {
+  color: #fff; }
+
+/*
+    Modal Notification
+*/
+.modal-notification .modal-body .icon-content {
+  margin: 0 0 20px 0px;
+  display: inline-block;
+  padding: 13px;
+  border-radius: 50%;
+  background: #f1f2f3;
+  color: #000; }
+  .modal-notification .modal-body .icon-content svg {
+    width: 36px;
+    height: 36px;
+    color: #888ea8;
+    fill: rgba(0, 23, 55, 0.08); }
+
+/*
+    Profile
+*/
+.profile-modal .modal-content {
+  background-color: #5c1ac3; }
+  .profile-modal .modal-content .close {
+    font-size: 19px;
+    font-weight: 600;
+    line-height: 1;
+    color: #fff;
+    text-shadow: none;
+    opacity: 1;
+    text-align: right;
+    margin-right: 13px;
+    margin-top: 8px; }
+  .profile-modal .modal-content .modal-header, .profile-modal .modal-content .modal-footer {
+    border: none; }
+  .profile-modal .modal-content .modal-body p {
+    color: #fff; }
+  .profile-modal .modal-content .modal-footer button.btn {
+    box-shadow: none; }
+
+/*
+    Slider
+*/
+.modal#sliderModal .modal-content {
+  border: 1px solid transparent;
+  background-color: transparent; }
+  .modal#sliderModal .modal-content .modal-body .carousel-indicators {
+    top: 37%;
+    bottom: auto;
+    display: block;
+    left: auto;
+    margin: auto;
+    right: 14px; }
+  .modal#sliderModal .modal-content .modal-body a.carousel-control-prev span.carousel-control-prev-icon {
+    position: absolute;
+    bottom: 14px;
+    left: 7px;
+    background-image: none;
+    color: #1b55e2; }
+  .modal#sliderModal .modal-content .modal-body a.carousel-control-next span.carousel-control-next-icon {
+    position: absolute;
+    bottom: 14px;
+    right: 7px;
+    background-image: none;
+    color: #1b55e2; }
+  .modal#sliderModal .modal-content .modal-body a.carousel-control-prev span.carousel-control-prev-text {
+    position: absolute;
+    bottom: 17px;
+    left: 30px;
+    color: #1b55e2; }
+  .modal#sliderModal .modal-content .modal-body a.carousel-control-next span.carousel-control-next-text {
+    position: absolute;
+    bottom: 17px;
+    right: 30px;
+    color: #1b55e2; }
+  .modal#sliderModal .modal-content .modal-body button.close {
+    position: absolute;
+    z-index: 2;
+    right: 16px;
+    top: 13px;
+    opacity: 1;
+    text-shadow: none; }
+    .modal#sliderModal .modal-content .modal-body button.close:hover {
+      color: #1b55e2; }
+
+.carousel-indicators li {
+  background-color: #a1a3ac; }
+
+.carousel-indicators .active {
+  background-color: #1b55e2; }
+
+.modal-content .modal-body a:not(.btn) {
+  opacity: 1; }
+
+/*
+    Login
+*/
+.login-modal .modal-header, .register-modal .modal-header {
+  text-align: center;
+  border: none;
+  padding-bottom: 0; }
+
+.login-modal .modal-body .form-group, .register-modal .modal-body .form-group {
+  position: relative; }
+  .login-modal .modal-body .form-group svg, .register-modal .modal-body .form-group svg {
+    position: absolute;
+    width: 20px;
+    top: 11px;
+    left: 9px;
+    color: #1b55e2;
+    fill: rgba(27, 85, 226, 0.239216); }
+  .login-modal .modal-body .form-group input, .register-modal .modal-body .form-group input {
+    padding-left: 35px;
+    border: none;
+    border-bottom: 1px solid #e0e6ed;
+    border-radius: 0; }
+    .login-modal .modal-body .form-group input.form-control:focus, .register-modal .modal-body .form-group input.form-control:focus {
+      box-shadow: none; }
+
+.login-modal .modal-body .division, .register-modal .modal-body .division {
+  text-align: center;
+  font-size: 13px;
+  margin: 16px 0; }
+
+.login-modal .modal-body .social, .register-modal .modal-body .social {
+  text-align: center; }
+  .login-modal .modal-body .social a, .register-modal .modal-body .social a {
+    background: transparent;
+    box-shadow: none;
+    border: 2px solid #e0e6ed; }
+    .login-modal .modal-body .social a.social-fb svg, .register-modal .modal-body .social a.social-fb svg {
+      color: #1b55e2; }
+    .login-modal .modal-body .social a.social-github svg, .register-modal .modal-body .social a.social-github svg {
+      color: #e7515a; }
+    .login-modal .modal-body .social a.social-fb .brand-name, .register-modal .modal-body .social a.social-fb .brand-name {
+      color: #1b55e2; }
+    .login-modal .modal-body .social a.social-github .brand-name, .register-modal .modal-body .social a.social-github .brand-name {
+      color: #e7515a; }
+
+/*
+    Register
+*/
+@media (min-width: 576px) {
+  .login-modal .modal-dialog, .register-modal .modal-dialog {
+    max-width: 330px; } }
diff --git a/static/css/components/custom-sweetalert.css b/static/css/components/custom-sweetalert.css
new file mode 100644
index 00000000..a81558d7
--- /dev/null
+++ b/static/css/components/custom-sweetalert.css
@@ -0,0 +1,15 @@
+/*
+	===============================
+			@Import	Function
+	===============================
+*/
+/*
+	===============================
+			@Import	Mixins
+	===============================
+*/
+.widget-content .row.padding35 .col-md-4 {
+  margin-bottom: 20px; }
+
+.btn {
+  margin-right: 5px; }
diff --git a/static/css/components/tabs-accordian/custom-accordions.css b/static/css/components/tabs-accordian/custom-accordions.css
new file mode 100644
index 00000000..51d66302
--- /dev/null
+++ b/static/css/components/tabs-accordian/custom-accordions.css
@@ -0,0 +1,108 @@
+/*
+	===============================
+			@Import	Function
+	===============================
+*/
+/*
+	===============================
+			@Import	Mixins
+	===============================
+*/
+h1, h2, h3, h4, h5, h6 {
+  color: #3b3f5c; }
+
+/*
+    Basic
+*/
+.card {
+  border: 2px solid #e0e6ed;
+  border-radius: 6px;
+  margin-bottom: 4px; }
+
+.card-header {
+  background-color: transparent;
+  color: #f8538d;
+  border-color: transparent;
+  border-radius: 4px;
+  padding: 0;
+  position: relative; }
+  .card-header section > div {
+    padding: 13px 19px;
+    cursor: pointer;
+    display: block;
+    font-size: 14px;
+    letter-spacing: 1px; }
+    .card-header section > div.collapsed {
+      color: #888ea8; }
+    .card-header section > div:not(.collapsed) {
+      color: #1b55e2;
+      border-bottom: 2px solid #e0e6ed;
+      font-weight: 600; }
+    .card-header section > div .icons {
+      position: absolute;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      padding: 9px; }
+      .card-header section > div .icons svg {
+        width: 18px; }
+
+.card .card-body p {
+  color: #888ea8;
+  letter-spacing: 1px;
+  font-size: 13px; }
+  .card .card-body p:not(:last-child) {
+    margin-bottom: 10px; }
+
+.card .card-body ul {
+  margin-bottom: 0; }
+  .card .card-body ul li {
+    font-size: 12px;
+    letter-spacing: 1px; }
+    .card .card-body ul li:not(:last-child) {
+      margin-bottom: 5px; }
+    .card .card-body ul li a {
+      color: #3b3f5c;
+      font-size: 13px;
+      font-weight: 600; }
+      .card .card-body ul li a:hover {
+        color: #1b55e2; }
+
+/*
+    No Outer Spacing
+*/
+.no-outer-spacing {
+  border: 2px solid #e0e6ed;
+  border-radius: 6px; }
+  .no-outer-spacing .card {
+    margin-bottom: 0;
+    border: none;
+    border-radius: 0; }
+    .no-outer-spacing .card:first-child {
+      border-top-left-radius: 6px;
+      border-top-right-radius: 6px; }
+    .no-outer-spacing .card:last-child {
+      border-bottom-left-radius: 6px;
+      border-bottom-right-radius: 6px; }
+    .no-outer-spacing .card:not(:last-child) {
+      border-bottom: 2px solid #e0e6ed; }
+  .no-outer-spacing .card-header section > div:not(.collapsed) {
+    border-bottom: none; }
+
+/*
+    Accordin with Icons
+*/
+.accordion-icons .accordion-icon {
+  display: inline-block;
+  margin-right: 10px; }
+  .accordion-icons .accordion-icon svg {
+    color: #888ea8;
+    margin-right: 6px;
+    vertical-align: middle;
+    width: 20px;
+    height: 20px;
+    fill: rgba(0, 23, 55, 0.08); }
+
+.accordion-icons div:not(.collapsed) .accordion-icon svg {
+  color: #1b55e2;
+  fill: rgba(27, 85, 226, 0.239216); }
diff --git a/static/css/components/tabs-accordian/custom-tabs.css b/static/css/components/tabs-accordian/custom-tabs.css
new file mode 100644
index 00000000..f7d180a5
--- /dev/null
+++ b/static/css/components/tabs-accordian/custom-tabs.css
@@ -0,0 +1,485 @@
+/*
+	===============================
+			@Import	Function
+	===============================
+*/
+/*
+	===============================
+			@Import	Mixins
+	===============================
+*/
+.nav-tabs {
+  border-bottom: 1px solid #ebedf2; }
+  .nav-tabs svg {
+    width: 20px;
+    vertical-align: bottom; }
+  .nav-tabs .nav-link.active {
+    color: #e95f2b;
+    background-color: #fff;
+    border-color: #e0e6ed #e0e6ed #fff; }
+    .nav-tabs .nav-link.active:after {
+      color: #e95f2b; }
+  .nav-tabs .nav-link:hover {
+    border-color: #ebedf2 #ebedf2 #f1f2f3; }
+
+.dropdown-menu {
+  box-shadow: 0px 0px 15px 1px rgba(113, 106, 202, 0.1); }
+
+.nav-tabs .dropdown-item:hover {
+  background-color: #f1f2f3;
+  color: #515365; }
+
+.nav-tabs li a.disabled {
+  color: #acb0c3 !important; }
+
+.nav-pills .nav-item:not(:last-child) {
+  margin-right: 5px; }
+
+.nav-pills .nav-link {
+  color: #3b3f5c; }
+  .nav-pills .nav-link.active:after {
+    color: #fff; }
+
+.nav-pills .show > .nav-link {
+  background-color: #e95f2b; }
+
+.nav-pills li a.disabled {
+  color: #acb0c3 !important; }
+
+h4 {
+  font-size: 1.125rem; }
+
+/*
+    Simple Tab
+*/
+.simple-tab .nav-tabs li a {
+  color: #3b3f5c; }
+
+.simple-tab .nav-tabs .nav-item.show .nav-link, .simple-tab .nav-tabs .nav-link.active {
+  color: #1b55e2;
+  font-weight: 600;
+  background-color: #fff; }
+
+.nav-tabs {
+  border-bottom: 1px solid #e0e6ed; }
+
+.simple-tab .tab-content > .tab-pane {
+  padding: 20px 0 0 0; }
+
+/*
+    Simple Pills
+*/
+.simple-pills .nav-pills li a {
+  color: #3b3f5c; }
+
+.simple-pills .nav-pills .nav-link.active, .simple-pills .nav-pills .show > .nav-link {
+  background-color: #1b55e2;
+  border-color: transparent; }
+
+.simple-pills .tab-content > .tab-pane {
+  padding: 20px 0 0 0; }
+
+/*
+    Icon Tab
+*/
+.icon-tab .nav-tabs li a {
+  color: #3b3f5c; }
+
+.icon-tab .nav-tabs svg {
+  width: 20px;
+  vertical-align: bottom; }
+
+.icon-tab .nav-tabs .nav-item.show .nav-link, .icon-tab .nav-tabs .nav-link.active {
+  color: #e95f2b;
+  background-color: #fff;
+  border-color: #e0e6ed #e0e6ed #fff; }
+
+.icon-tab .tab-content > .tab-pane {
+  padding: 20px 0 0 0; }
+
+/*
+    Icon Pill
+*/
+.icon-pill .nav-pills li a {
+  color: #3b3f5c; }
+
+.icon-pill .nav-pills svg {
+  width: 20px;
+  vertical-align: bottom; }
+
+.icon-pill .nav-pills .nav-link.active, .icon-pill .nav-pills .show > .nav-link {
+  background-color: #e2a03f;
+  border-color: transparent; }
+
+.icon-pill .tab-content > .tab-pane {
+  padding: 20px 0 0 0; }
+
+/*
+    Underline
+*/
+.underline-content .nav-tabs {
+  border-bottom: 1px solid #e0e6ed; }
+  .underline-content .nav-tabs li a {
+    padding-top: 15px;
+    padding-bottom: 15px; }
+
+.underline-content .tab-content > .tab-pane {
+  padding: 20px 0 0 0; }
+
+.underline-content .nav-tabs .nav-link.active, .underline-content .nav-tabs .show > .nav-link {
+  border-color: transparent;
+  border-bottom: 1px solid #5c1ac3;
+  color: #5c1ac3;
+  background-color: transparent; }
+
+.underline-content .nav-tabs .nav-link.active:hover, .underline-content .nav-tabs .show > .nav-link:hover, .underline-content .nav-tabs .nav-link.active:focus, .underline-content .nav-tabs .show > .nav-link:focus {
+  border-bottom: 1px solid #5c1ac3; }
+
+.underline-content .nav-tabs .nav-link:focus, .underline-content .nav-tabs .nav-link:hover {
+  border-color: transparent; }
+
+/*
+    Animated Underline
+*/
+.animated-underline-content .nav-tabs {
+  border-bottom: 1px solid #e0e6ed; }
+  .animated-underline-content .nav-tabs li a {
+    padding-top: 15px;
+    padding-bottom: 15px;
+    position: relative; }
+
+.animated-underline-content .tab-content > .tab-pane {
+  padding: 20px 0 0 0; }
+
+.animated-underline-content .nav-tabs .nav-link.active, .animated-underline-content .nav-tabs .show > .nav-link {
+  border-color: transparent;
+  color: #5c1ac3; }
+
+.animated-underline-content .nav-tabs .nav-link:focus, .animated-underline-content .nav-tabs .nav-link:hover {
+  border-color: transparent; }
+
+.animated-underline-content .nav-tabs .nav-link.active:before {
+  -webkit-transform: scale(1);
+  transform: scale(1); }
+
+.animated-underline-content .nav-tabs .nav-link:before {
+  content: "";
+  height: 1px;
+  position: absolute;
+  width: 100%;
+  left: 0;
+  bottom: 0;
+  background-color: #5c1ac3;
+  -webkit-transform: scale(0);
+  transform: scale(0);
+  transition: all .3s; }
+
+/*
+    Justify Tab
+*/
+.justify-tab .nav-tabs li a {
+  color: #3b3f5c; }
+
+.justify-tab .nav-tabs .nav-item.show .nav-link, .justify-tab .nav-tabs .nav-link.active {
+  color: #1b55e2;
+  background-color: #fff;
+  border-color: #e0e6ed #e0e6ed #fff; }
+
+.justify-tab .tab-content > .tab-pane {
+  padding: 20px 0 0 0; }
+
+/*
+    Justify Pill
+*/
+.justify-pill .nav-pills li a {
+  color: #3b3f5c; }
+
+.justify-pill .nav-pills .nav-link.active, .justify-pill .nav-pills .show > .nav-link {
+  background-color: #2196f3;
+  border-color: transparent; }
+
+.justify-pill .tab-content > .tab-pane {
+  padding: 20px 0 0 0; }
+
+/*
+    Justify Centered Tab
+*/
+.tab-justify-centered .nav-tabs li a {
+  color: #3b3f5c; }
+
+.tab-justify-centered .nav-tabs .nav-item.show .nav-link, .tab-justify-centered .nav-tabs .nav-link.active {
+  color: #e95f2b;
+  background-color: #fff;
+  border-color: #e0e6ed #e0e6ed #fff; }
+
+.tab-justify-centered .tab-content > .tab-pane {
+  padding: 20px 0 0 0; }
+
+/*
+    Justify Centered Pill
+*/
+.pill-justify-centered .nav-pills li a {
+  color: #3b3f5c; }
+
+.pill-justify-centered .nav-pills .nav-link.active, .pill-justify-centered .nav-pills .show > .nav-link {
+  background-color: #e2a03f; }
+
+.pill-justify-centered .tab-content > .tab-pane {
+  padding: 20px 0 0 0; }
+
+/*
+    Justify Right Tab
+*/
+.tab-justify-right .nav-tabs li a {
+  color: #3b3f5c; }
+
+.tab-justify-right .nav-tabs .nav-item.show .nav-link, .tab-justify-right .nav-tabs .nav-link.active {
+  color: #1b55e2;
+  background-color: #fff;
+  border-color: #e0e6ed #e0e6ed #fff; }
+
+.tab-justify-right .tab-content > .tab-pane {
+  padding: 20px 0 0 0; }
+
+/*
+    Justify Right Pill
+*/
+.pill-justify-right .nav-pills .nav-link.active, .pill-justify-right .nav-pills .show > .nav-link {
+  background-color: #2196f3; }
+
+.pill-justify-right .tab-content > .tab-pane {
+  padding: 20px 0 0 0; }
+
+/*
+    With Icons   
+*/
+.rounded-pills-icon .nav-pills li a {
+  -webkit-border-radius: 0.625rem !important;
+  -moz-border-radius: 0.625rem !important;
+  -ms-border-radius: 0.625rem !important;
+  -o-border-radius: 0.625rem !important;
+  border-radius: 0.625rem !important;
+  background-color: #f1f2f3;
+  width: 100px;
+  padding: 8px; }
+  .rounded-pills-icon .nav-pills li a svg {
+    display: block;
+    text-align: center;
+    margin-bottom: 10px;
+    margin-top: 5px;
+    margin-left: auto;
+    margin-right: auto; }
+
+.rounded-pills-icon .nav-pills .nav-link.active, .rounded-pills-icon .nav-pills .show > .nav-link {
+  box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.3);
+  background-color: #009688; }
+
+.rounded-pills-icon .tab-content > .tab-pane {
+  padding: 20px 0 0 0; }
+
+/*
+    Vertical With Icon
+*/
+.rounded-vertical-pills-icon .nav-pills a {
+  -webkit-border-radius: 0.625rem !important;
+  -moz-border-radius: 0.625rem !important;
+  -ms-border-radius: 0.625rem !important;
+  -o-border-radius: 0.625rem !important;
+  border-radius: 0.625rem !important;
+  background-color: #ffffff;
+  border: solid 1px #e4e2e2;
+  padding: 11px 23px;
+  text-align: center;
+  width: 100px;
+  padding: 8px; }
+  .rounded-vertical-pills-icon .nav-pills a svg {
+    display: block;
+    text-align: center;
+    margin-bottom: 10px;
+    margin-top: 5px;
+    margin-left: auto;
+    margin-right: auto; }
+
+.rounded-vertical-pills-icon .nav-pills .nav-link.active, .rounded-vertical-pills-icon .nav-pills .show > .nav-link {
+  box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.3);
+  background-color: #009688;
+  border-color: transparent; }
+
+/*
+    Rouned Circle With Icons   
+*/
+.rounded-circle-pills-icon .nav-pills li a {
+  background-color: #f1f2f3;
+  padding: 20px 20px; }
+  .rounded-circle-pills-icon .nav-pills li a svg {
+    display: block;
+    text-align: center; }
+
+.rounded-circle-pills-icon .nav-pills .nav-link.active, .rounded-circle-pills-icon .nav-pills .show > .nav-link {
+  box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.3);
+  background-color: #2196f3; }
+
+.rounded-circle-pills-icon .tab-content > .tab-pane {
+  padding: 20px 0 0 0; }
+
+/*
+    Vertical Rounded Circle With Icon
+*/
+.rounded-circle-vertical-pills-icon .nav-pills a {
+  background-color: #ffffff;
+  border: solid 1px #e4e2e2;
+  border-radius: 50%;
+  height: 58px;
+  width: 60px;
+  padding: 16px 18px;
+  max-width: 80px;
+  min-width: auto; }
+  .rounded-circle-vertical-pills-icon .nav-pills a svg {
+    display: block;
+    text-align: center;
+    line-height: 19px; }
+
+.rounded-circle-vertical-pills-icon .nav-pills .nav-link.active, .rounded-circle-vertical-pills-icon .nav-pills .show > .nav-link {
+  box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.3);
+  background-color: #2196f3;
+  border-color: transparent; }
+
+/*
+    Vertical Pill
+*/
+.vertical-pill .nav-pills .nav-link.active, .vertical-pill .nav-pills .show > .nav-link {
+  background-color: #009688; }
+
+/*
+    Vertical Pill Right
+*/
+.vertical-pill-right .nav-pills .nav-link.active, .vertical-pill-right .nav-pills .show > .nav-link {
+  background-color: #009688; }
+
+/*
+    Creative vertical pill
+*/
+.vertical-line-pill .nav-pills {
+  border-bottom: 1px solid transparent;
+  width: 92px;
+  border-right: 1px solid #e0e6ed; }
+  .vertical-line-pill .nav-pills a {
+    padding-top: 15px;
+    padding-bottom: 15px;
+    position: relative; }
+  .vertical-line-pill .nav-pills .nav-link {
+    padding: .5rem 0; }
+    .vertical-line-pill .nav-pills .nav-link.active {
+      position: relative;
+      background-color: transparent;
+      border-color: transparent;
+      color: #5c1ac3;
+      font-weight: 600; }
+  .vertical-line-pill .nav-pills .show > .nav-link {
+    position: relative;
+    background-color: transparent;
+    border-color: transparent;
+    color: #5c1ac3;
+    font-weight: 600; }
+  .vertical-line-pill .nav-pills .nav-link:focus, .vertical-line-pill .nav-pills .nav-link:hover {
+    border-color: transparent; }
+  .vertical-line-pill .nav-pills .nav-link.active:before {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+    bottom: 0; }
+  .vertical-line-pill .nav-pills .nav-link:before {
+    content: "";
+    height: 100%;
+    position: absolute;
+    width: 1px;
+    right: -1px;
+    background-color: #5c1ac3;
+    -webkit-transform: scale(0);
+    transform: scale(0);
+    transition: all .3s; }
+
+.vertical-line-pill #v-line-pills-tabContent h4 {
+  color: #e2a03f; }
+
+.vertical-line-pill #v-line-pills-tabContent p {
+  color: #888ea8; }
+
+.media img {
+  border-radius: 50%;
+  border: solid 5px #ebedf2;
+  width: 80px;
+  height: 80px; }
+
+/*
+    Border Tab
+*/
+.border-tab .tab-content {
+  border: 1px solid #e0e6ed;
+  border-top: none;
+  padding: 10px; }
+  .border-tab .tab-content > .tab-pane {
+    padding: 20px 30px 0 30px; }
+  .border-tab .tab-content .media img.meta-usr-img {
+    margin-left: -30px; }
+
+/*
+    Vertical Border Tab
+*/
+.vertical-border-pill .nav-pills {
+  width: 92px; }
+  .vertical-border-pill .nav-pills a {
+    padding-top: 15px;
+    padding-bottom: 15px;
+    position: relative; }
+  .vertical-border-pill .nav-pills .nav-link {
+    padding: .5rem 0;
+    border: 1px solid #e0e6ed;
+    border-radius: 0;
+    border-bottom: none; }
+    .vertical-border-pill .nav-pills .nav-link:last-child {
+      border-bottom: 1px solid #e0e6ed; }
+    .vertical-border-pill .nav-pills .nav-link.active {
+      position: relative;
+      color: #fff;
+      background-color: #8dbf42; }
+  .vertical-border-pill .nav-pills .show > .nav-link {
+    position: relative;
+    color: #fff;
+    background-color: #8dbf42; }
+
+/*
+    Border Top Tab
+*/
+.border-top-tab .nav-tabs {
+  border-bottom: 1px solid transparent; }
+  .border-top-tab .nav-tabs li a {
+    border-radius: 0px;
+    padding: 12px 30px;
+    background: #f6f7f8;
+    color: #0e1726;
+    border-right: 1px solid transparent; }
+
+.border-top-tab .tab-content > .tab-pane {
+  padding: 20px 0 0 0; }
+
+.border-top-tab .nav-tabs .nav-item.show .nav-link {
+  color: #495057;
+  border-radius: 0px;
+  padding: 12px 30px;
+  background: #f6f7f8;
+  color: #5c1ac3;
+  border: 1px solid transparent;
+  border-top: 2px solid #5c1ac3; }
+
+.border-top-tab .nav-tabs .nav-link.active {
+  color: #495057;
+  border-radius: 0px;
+  padding: 12px 30px;
+  background: #f6f7f8;
+  color: #5c1ac3;
+  border: 1px solid transparent;
+  border-top: 2px solid #5c1ac3; }
+
+.border-top-tab .nav-tabs .nav-link:focus, .border-top-tab .nav-tabs .nav-link:hover {
+  border: 1px solid transparent;
+  border-top: 2px solid #5c1ac3; }
diff --git a/static/css/components/timeline/custom-timeline.css b/static/css/components/timeline/custom-timeline.css
new file mode 100644
index 00000000..0478bf05
--- /dev/null
+++ b/static/css/components/timeline/custom-timeline.css
@@ -0,0 +1,514 @@
+/*
+	===============================
+			@Import	Function
+	===============================
+*/
+/*
+	===============================
+			@Import	Mixins
+	===============================
+*/
+/*
+=======================
+    Timeline Simple
+=======================
+*/
+.timeline-simple {
+  margin-bottom: 45px;
+  max-width: 1140px;
+  margin-right: auto;
+  margin-left: auto; }
+  .timeline-simple h3 {
+    font-size: 23px;
+    font-weight: 600; }
+  .timeline-simple p.timeline-title {
+    position: relative;
+    font-size: 19px;
+    font-weight: 600;
+    color: #1b55e2;
+    margin-bottom: 28px; }
+    .timeline-simple p.timeline-title:before {
+      position: absolute;
+      content: "";
+      height: 2px;
+      width: 70px;
+      background: #1b55e2;
+      border-radius: 50px;
+      bottom: -2px;
+      left: 15px; }
+  .timeline-simple .timeline-list p.meta-update-day {
+    margin-bottom: 24px;
+    font-size: 16px;
+    font-weight: 600;
+    color: #888ea8; }
+  .timeline-simple .timeline-list .timeline-post-content {
+    display: flex; }
+    .timeline-simple .timeline-list .timeline-post-content > div > div {
+      margin-top: 28px; }
+    .timeline-simple .timeline-list .timeline-post-content:not(:last-child) > div > div {
+      margin-bottom: 70px; }
+    .timeline-simple .timeline-list .timeline-post-content div.user-profile {
+      position: relative;
+      z-index: 2; }
+      .timeline-simple .timeline-list .timeline-post-content div.user-profile:after {
+        content: '';
+        position: absolute;
+        border-color: inherit;
+        border-width: 2px;
+        border-style: solid;
+        top: 15px;
+        left: 34%;
+        transform: translateX(-50%);
+        width: 0;
+        height: auto;
+        top: 48px;
+        bottom: -15px;
+        border-right-width: 0;
+        border-top-width: 0;
+        border-bottom-width: 0;
+        border-radius: 0;
+        z-index: -1;
+        border-color: #ebedf2; }
+      .timeline-simple .timeline-list .timeline-post-content div.user-profile img {
+        width: 53px;
+        height: 53px;
+        border-radius: 50%;
+        margin-right: 30px;
+        -webkit-box-shadow: 0px 4px 9px 0px rgba(31, 45, 61, 0.31);
+        box-shadow: 0px 4px 9px 0px rgba(31, 45, 61, 0.31); }
+    .timeline-simple .timeline-list .timeline-post-content h4 {
+      font-size: 20px;
+      font-weight: 700;
+      margin-bottom: 0;
+      color: #1b55e2; }
+    .timeline-simple .timeline-list .timeline-post-content svg {
+      color: #888ea8;
+      vertical-align: text-bottom;
+      width: 21px;
+      height: 21px; }
+    .timeline-simple .timeline-list .timeline-post-content:hover svg {
+      color: #1b55e2;
+      fill: rgba(27, 85, 226, 0.239216); }
+    .timeline-simple .timeline-list .timeline-post-content h6 {
+      display: inline-block;
+      font-size: 17px;
+      font-weight: 600;
+      margin-bottom: 11px; }
+    .timeline-simple .timeline-list .timeline-post-content:hover h6 {
+      color: #888ea8; }
+    .timeline-simple .timeline-list .timeline-post-content p.post-text {
+      padding-left: 31px;
+      color: #888ea8;
+      font-size: 14px;
+      font-weight: 600;
+      margin-bottom: 28px; }
+    .timeline-simple .timeline-list .timeline-post-content .post-contributers {
+      padding-left: 31px; }
+      .timeline-simple .timeline-list .timeline-post-content .post-contributers img {
+        width: 38px;
+        border-radius: 50%;
+        margin-right: 7px;
+        -webkit-box-shadow: 0px 6px 9px 2px rgba(31, 45, 61, 0.31);
+        box-shadow: 1px 3px 7px 2px rgba(31, 45, 61, 0.31);
+        -webkit-transition: all 0.35s ease;
+        transition: all 0.35s ease;
+        cursor: pointer;
+        margin-bottom: 5px; }
+        .timeline-simple .timeline-list .timeline-post-content .post-contributers img:hover {
+          -webkit-transform: translateY(-3px) scale(1.02);
+          transform: translateY(-3px) scale(1.02);
+          box-shadow: none; }
+    .timeline-simple .timeline-list .timeline-post-content .post-gallery-img {
+      padding-left: 31px; }
+      .timeline-simple .timeline-list .timeline-post-content .post-gallery-img img {
+        width: 20%;
+        border-radius: 6px;
+        -webkit-box-shadow: 0px 6px 9px 2px rgba(31, 45, 61, 0.31);
+        box-shadow: 1px 3px 7px 2px rgba(31, 45, 61, 0.31);
+        -webkit-transition: all 0.35s ease;
+        transition: all 0.35s ease;
+        cursor: pointer; }
+        .timeline-simple .timeline-list .timeline-post-content .post-gallery-img img:hover {
+          -webkit-transform: translateY(-3px) scale(1.02);
+          transform: translateY(-3px) scale(1.02);
+          box-shadow: none; }
+        .timeline-simple .timeline-list .timeline-post-content .post-gallery-img img:not(:last-child) {
+          margin-right: 23px; }
+
+.mt-container {
+  max-width: 570px; }
+
+.modern-timeline {
+  list-style: none;
+  position: relative;
+  padding: 50px 0 50px;
+  margin: 0; }
+  .modern-timeline:before {
+    position: absolute;
+    background: #ebedf2;
+    bottom: 0;
+    left: 50%;
+    top: 0;
+    content: "";
+    width: 3px;
+    margin-left: -1.5px; }
+  .modern-timeline > li {
+    margin-bottom: 50px;
+    position: relative; }
+    .modern-timeline > li:after, .modern-timeline > li:before {
+      display: table;
+      content: ""; }
+    .modern-timeline > li > .modern-timeline-badge {
+      position: absolute;
+      background: #fff;
+      border: 3px solid #ebedf2;
+      border-radius: 100%;
+      height: 20px;
+      width: 20px;
+      margin-left: -10px;
+      text-align: center;
+      z-index: 1;
+      left: 50%;
+      top: 32px; }
+    .modern-timeline > li > .modern-timeline-panel {
+      position: relative;
+      border: 1px solid #ebedf2;
+      background: #fff;
+      border-radius: .1875rem;
+      box-shadow: 0 0 60px 0 rgba(0, 0, 0, 0.07);
+      box-shadow: 0px 20px 20px rgba(126, 142, 177, 0.12);
+      transition: .3s ease-in-out;
+      float: left;
+      width: 46%;
+      border-radius: 6px; }
+      .modern-timeline > li > .modern-timeline-panel:before {
+        position: absolute;
+        background: #ebedf2;
+        right: -37px;
+        top: 40px;
+        transition: .3s ease-in-out;
+        content: " ";
+        width: 37px;
+        height: 3px;
+        display: block; }
+    .modern-timeline > li:nth-child(even) > .modern-timeline-panel:before {
+      right: auto;
+      left: -37px;
+      width: 37px; }
+    .modern-timeline > li:after {
+      clear: both; }
+    .modern-timeline > li > .modern-timeline-panel .modern-timeline-preview img {
+      width: 100%;
+      border-top-left-radius: 6px;
+      border-top-right-radius: 6px; }
+    .modern-timeline > li > .modern-timeline-panel *:last-child {
+      margin-bottom: 0; }
+    .modern-timeline > li:nth-child(even) > .modern-timeline-panel {
+      border: 1px solid #ebedf2;
+      float: right; }
+    .modern-timeline > li > .modern-timeline-panel *:last-child {
+      margin-bottom: 0; }
+    .modern-timeline > li > .modern-timeline-panel .modern-timeline-body {
+      padding: 30px 20px;
+      border-bottom-left-radius: 6px;
+      border-bottom-right-radius: 6px; }
+      .modern-timeline > li > .modern-timeline-panel .modern-timeline-body h4 {
+        color: #e95f2b;
+        margin-bottom: 20px;
+        font-size: 1.125rem; }
+      .modern-timeline > li > .modern-timeline-panel .modern-timeline-body p {
+        color: #3b3f5c;
+        margin-bottom: 0; }
+        .modern-timeline > li > .modern-timeline-panel .modern-timeline-body p a {
+          display: block; }
+    .modern-timeline > li > .modern-timeline-panel *:last-child {
+      margin-bottom: 0; }
+
+.modern-timeline-top:before, .modern-timeline-bottom:before {
+  background: #ebedf2;
+  position: absolute;
+  height: 3px;
+  width: 50px;
+  display: block;
+  content: "";
+  bottom: 0;
+  left: 50%;
+  margin-left: -25px; }
+
+.modern-timeline-top:before {
+  top: 0; }
+
+@media (max-width: 767px) {
+  ul.modern-timeline > li > .modern-timeline-panel {
+    border: 1px solid #ebedf2;
+    float: right;
+    width: 100%; }
+  ul.modern-timeline > li > .modern-timeline-badge {
+    display: none; }
+  .modern-timeline > li > .modern-timeline-panel:before {
+    display: none; } }
+
+/*
+=====================
+    Modern
+=====================
+*/
+.timeline-alter .item-timeline {
+  display: flex; }
+  .timeline-alter .item-timeline .t-time {
+    padding: 10px;
+    align-self: center; }
+    .timeline-alter .item-timeline .t-time p {
+      margin: 0;
+      min-width: 58px;
+      max-width: 100px;
+      font-size: 16px;
+      font-weight: 600;
+      color: #3b3f5c;
+      align-self: center; }
+  .timeline-alter .item-timeline .t-img {
+    position: relative;
+    border-color: #ebedf2;
+    padding: 10px; }
+    .timeline-alter .item-timeline .t-img:before {
+      content: '';
+      position: absolute;
+      border-color: inherit;
+      border-width: 2px;
+      border-style: solid;
+      border-radius: 50%;
+      width: 10px;
+      height: 10px;
+      top: 15px;
+      left: 50%;
+      transform: translateX(-50%); }
+    .timeline-alter .item-timeline .t-img:after {
+      content: '';
+      position: absolute;
+      border-color: inherit;
+      border-width: 2px;
+      border-style: solid;
+      border-radius: 50%;
+      width: 10px;
+      height: 10px;
+      top: 15px;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 0;
+      height: auto;
+      top: 25px;
+      bottom: -15px;
+      border-right-width: 0;
+      border-top-width: 0;
+      border-bottom-width: 0;
+      border-radius: 0; }
+    .timeline-alter .item-timeline .t-img img {
+      width: 45px;
+      height: 45px;
+      border-radius: 50%;
+      z-index: 7;
+      position: relative; }
+  .timeline-alter .item-timeline .t-usr-txt {
+    display: block;
+    padding: 10px;
+    position: relative;
+    border-color: #ebedf2; }
+    .timeline-alter .item-timeline .t-usr-txt:before {
+      content: '';
+      position: absolute;
+      border-color: inherit;
+      border-width: 2px;
+      border-style: solid;
+      border-radius: 50%;
+      width: 10px;
+      height: 10px;
+      top: 15px;
+      left: 50%;
+      transform: translateX(-50%); }
+    .timeline-alter .item-timeline .t-usr-txt:after {
+      content: '';
+      position: absolute;
+      border-color: inherit;
+      border-width: 2px;
+      border-style: solid;
+      border-radius: 50%;
+      width: 10px;
+      height: 10px;
+      top: 15px;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 0;
+      height: auto;
+      top: 25px;
+      bottom: -15px;
+      border-right-width: 0;
+      border-top-width: 0;
+      border-bottom-width: 0;
+      border-radius: 0; }
+    .timeline-alter .item-timeline .t-usr-txt p {
+      margin: 0;
+      background: #c2d5ff;
+      height: 45px;
+      width: 45px;
+      border-radius: 50%;
+      display: flex;
+      align-self: center;
+      justify-content: center;
+      margin-bottom: 0;
+      color: #1b55e2;
+      font-weight: 700;
+      font-size: 18px;
+      z-index: 7;
+      position: relative; }
+    .timeline-alter .item-timeline .t-usr-txt span {
+      align-self: center; }
+  .timeline-alter .item-timeline .t-meta-time {
+    padding: 10px;
+    align-self: center; }
+    .timeline-alter .item-timeline .t-meta-time p {
+      margin: 0;
+      min-width: 100px;
+      max-width: 100px;
+      font-size: 12px;
+      font-weight: 700;
+      color: #888ea8; }
+  .timeline-alter .item-timeline .t-text {
+    padding: 10px;
+    align-self: center; }
+    .timeline-alter .item-timeline .t-text p {
+      font-size: 13px;
+      margin: 0;
+      color: #3b3f5c;
+      font-weight: 600; }
+      .timeline-alter .item-timeline .t-text p a {
+        color: #1b55e2;
+        font-weight: 600; }
+
+/*
+=====================
+    Basic
+=====================
+*/
+.timeline-line .item-timeline {
+  display: flex; }
+  .timeline-line .item-timeline .t-dot {
+    position: relative; }
+    .timeline-line .item-timeline .t-dot:before {
+      content: '';
+      position: absolute;
+      border-color: inherit;
+      border-width: 2px;
+      border-style: solid;
+      border-radius: 50%;
+      width: 10px;
+      height: 10px;
+      top: 15px;
+      left: 50%;
+      transform: translateX(-50%);
+      border-color: #2196f3; }
+    .timeline-line .item-timeline .t-dot:after {
+      content: '';
+      position: absolute;
+      border-color: inherit;
+      border-width: 2px;
+      border-style: solid;
+      border-radius: 50%;
+      width: 10px;
+      height: 10px;
+      top: 15px;
+      left: 50%;
+      transform: translateX(-50%);
+      border-color: #2196f3;
+      width: 0;
+      height: auto;
+      top: 25px;
+      bottom: -15px;
+      border-right-width: 0;
+      border-top-width: 0;
+      border-bottom-width: 0;
+      border-radius: 0; }
+    .timeline-line .item-timeline .t-dot.t-dot-primary:before {
+      border-color: #1b55e2; }
+    .timeline-line .item-timeline .t-dot.t-dot-success:before {
+      border-color: #8dbf42; }
+    .timeline-line .item-timeline .t-dot.t-dot-warning:before {
+      border-color: #e2a03f; }
+    .timeline-line .item-timeline .t-dot.t-dot-info:before {
+      border-color: #2196f3; }
+    .timeline-line .item-timeline .t-dot.t-dot-danger:before {
+      border-color: #e7515a; }
+    .timeline-line .item-timeline .t-dot.t-dot-dark:before {
+      border-color: #3b3f5c; }
+    .timeline-line .item-timeline .t-dot.t-dot-primary:after {
+      border-color: #1b55e2; }
+    .timeline-line .item-timeline .t-dot.t-dot-success:after {
+      border-color: #8dbf42; }
+    .timeline-line .item-timeline .t-dot.t-dot-warning:after {
+      border-color: #e2a03f; }
+    .timeline-line .item-timeline .t-dot.t-dot-info:after {
+      border-color: #2196f3; }
+    .timeline-line .item-timeline .t-dot.t-dot-danger:after {
+      border-color: #e7515a; }
+    .timeline-line .item-timeline .t-dot.t-dot-dark:after {
+      border-color: #3b3f5c; }
+  .timeline-line .item-timeline:last-child .t-dot:after {
+    display: none; }
+  .timeline-line .item-timeline .t-meta-time {
+    margin: 0;
+    min-width: 100px;
+    max-width: 100px;
+    font-size: 12px;
+    font-weight: 700;
+    color: #888ea8;
+    align-self: center; }
+  .timeline-line .item-timeline .t-text {
+    padding: 10px;
+    align-self: center;
+    margin-left: 10px; }
+    .timeline-line .item-timeline .t-text p {
+      font-size: 13px;
+      margin: 0;
+      color: #3b3f5c;
+      font-weight: 600; }
+      .timeline-line .item-timeline .t-text p a {
+        color: #1b55e2;
+        font-weight: 600; }
+  .timeline-line .item-timeline .t-time {
+    margin: 0;
+    min-width: 58px;
+    max-width: 100px;
+    font-size: 16px;
+    font-weight: 600;
+    color: #3b3f5c;
+    padding: 10px 0; }
+  .timeline-line .item-timeline .t-text .t-meta-time {
+    margin: 0;
+    min-width: 100px;
+    max-width: 100px;
+    font-size: 12px;
+    font-weight: 700;
+    color: #888ea8;
+    align-self: center; }
+
+@media (max-width: 767px) {
+  .timeline-simple .timeline-list .timeline-post-content .post-gallery-img img {
+    width: 150px;
+    margin-bottom: 23px; } }
+
+@media (max-width: 575px) {
+  .timeline-alter .item-timeline {
+    display: block;
+    text-align: center; }
+    .timeline-alter .item-timeline .t-meta-time p, .timeline-alter .item-timeline .t-usr-txt p {
+      margin: 0 auto; }
+  .timeline-simple .timeline-list .timeline-post-content {
+    display: block; }
+    .timeline-simple .timeline-list .timeline-post-content div.user-profile {
+      margin-bottom: 18px;
+      text-align: center; }
+      .timeline-simple .timeline-list .timeline-post-content div.user-profile:after {
+        display: none; }
+      .timeline-simple .timeline-list .timeline-post-content div.user-profile img {
+        margin-right: 0; }
+    .timeline-simple .timeline-list .timeline-post-content h4, .timeline-simple .timeline-list .timeline-post-content .meta-time-date {
+      text-align: center; } }
diff --git a/static/css/dashboard/dash_1.css b/static/css/dashboard/dash_1.css
new file mode 100644
index 00000000..8c98a458
--- /dev/null
+++ b/static/css/dashboard/dash_1.css
@@ -0,0 +1,1030 @@
+.layout-spacing {
+    padding-bottom: 25px;
+}
+.widget {
+    position: relative;
+    padding: 20px;
+    border-radius: 8px;
+    border: none;
+    background: #fff;
+    -webkit-box-shadow: 0 4px 6px 0 rgba(85, 85, 85, 0.08), 0 1px 20px 0 rgba(0, 0, 0, 0.07), 0px 1px 11px 0px rgba(0, 0, 0, 0.07);
+    -moz-box-shadow: 0 4px 6px 0 rgba(85, 85, 85, 0.08), 0 1px 20px 0 rgba(0, 0, 0, 0.07), 0px 1px 11px 0px rgba(0, 0, 0, 0.07);
+    box-shadow: 0 4px 6px 0 rgba(85, 85, 85, 0.08), 0 1px 20px 0 rgba(0, 0, 0, 0.07), 0px 1px 11px 0px rgba(0, 0, 0, 0.07);
+}
+.widget .widget-heading {
+    margin-bottom: 15px;
+}
+.widget h5 {
+    font-weight: 700;
+    font-size: 19px;
+    letter-spacing: 0px;
+    margin-bottom: 0;
+    color: #515365;
+}
+.widget .widget-content {}
+
+
+/*
+    ==================
+        Total Sales
+    ==================
+*/
+
+.widget-two {
+    position: relative;
+    background: #fff;
+    padding: 0;
+    border-radius: 8px;
+    height: 100%;
+        box-shadow: 0 4px 6px 0 rgba(85, 85, 85, 0.09019607843137255), 0 1px 20px 0 rgba(0, 0, 0, 0.08), 0px 1px 11px 0px rgba(0, 0, 0, 0.06);
+}
+.widget-two .widget-content {
+    font-size: 17px;
+}
+.widget-two .w-chart {
+    position: absolute;
+    bottom: 0;
+    bottom: 0;
+    right: 0;
+    left: 0;
+}
+.widget-two .w-numeric-value {
+    display: flex;
+    color: #fff;
+    font-weight: 500;
+    padding: 20px;
+    justify-content: space-between;
+}
+.widget-two .w-numeric-value .w-icon {
+    display: inline-block;
+    background: #ffeccb;
+    padding: 13px 12px;
+    border-radius: 50%;
+    display: inline-flex;
+    align-self: center;
+    height: 45px;
+    width: 45px;
+}
+.widget-two .w-numeric-value svg {
+    display: block;
+    color: #e2a03f;
+    width: 20px;
+    height: 20px;
+}
+.widget-two .w-numeric-value .w-value {
+    font-size: 19px;
+    display: block;
+    color: #0e1726;
+    font-weight: 700;
+    margin-bottom: -9px;
+}
+.widget-two .w-numeric-value .w-numeric-title {
+    font-size: 13px;
+    color: #888ea8;
+    font-weight: 600;
+}
+
+/*
+    ==================
+        Widget
+    ==================
+*/
+
+.widget-one {
+    position: relative;
+    background: #1b55e2;
+    padding: 0;
+    border-radius: 8px;
+    height: 100%;
+}
+.widget-one .widget-content {
+    font-size: 17px;
+}
+.widget-one .w-numeric-value {
+    position: absolute;
+    display: flex;
+    color: #fff;
+    font-weight: 500;
+    padding: 20px;
+}
+.widget-one .w-numeric-value .w-icon {
+    display: inline-block;
+    background: #fff;
+    padding: 13px 12px;
+    border-radius: 50%;
+    display: inline-flex;
+    align-self: center;
+    height: 45px;
+    width: 45px;
+    margin-right: 14px;
+}
+.widget-one .w-numeric-value svg {
+    display: block;
+    color: #1b55e2;
+    width: 20px;
+    height: 20px;
+}
+.widget-one .w-numeric-value .w-value {
+    font-size: 26px;
+    display: block;
+    color: #fff;
+    font-weight: 600;
+    margin-bottom: -9px;
+}
+.widget-one .w-numeric-value .w-numeric-title {
+    font-size: 13px;
+    color: #fff;
+    letter-spacing: 1px;
+    font-weight: 600;
+}
+
+/*
+    ====================
+        Order Summary
+    ====================
+*/
+
+.widget-three {
+    position: relative;
+    background: #fff;
+    padding: 20px;
+    border-radius: 8px;
+    height: 100%;
+        box-shadow: 0 4px 6px 0 rgba(85, 85, 85, 0.09019607843137255), 0 1px 20px 0 rgba(0, 0, 0, 0.08), 0px 1px 11px 0px rgba(0, 0, 0, 0.06);
+}
+.widget-three .widget-heading {
+    margin-bottom: 54px;
+}
+.widget-three .widget-heading h5 {
+    font-size: 19px;
+    display: block;
+    color: #0e1726;
+    font-weight: 600;
+    margin-bottom: 0;
+}
+.widget-three .widget-content {
+    font-size: 17px;
+}
+.widget-three .widget-content .summary-list {
+    display: flex;
+}
+.widget-three .widget-content .summary-list:not(:last-child) {
+    margin-bottom: 30px;
+}
+.widget-three .widget-content .w-icon {
+    display: inline-block;
+    padding: 8px 8px;
+    border-radius: 50%;
+    display: inline-flex;
+    align-self: center;
+    height: 34px;
+    width: 34px;
+    margin-right: 12px;
+}
+.widget-three .widget-content .w-icon svg {
+    display: block;
+    width: 17px;
+    height: 17px;
+}
+.widget-three .widget-content .summary-list:nth-child(1) .w-icon {
+    background: #dccff7;
+}
+.widget-three .widget-content .summary-list:nth-child(2) .w-icon {
+    background: #e6ffbf;
+}
+.widget-three .widget-content .summary-list:nth-child(3) .w-icon {
+    background: #ffeccb ;
+}
+.widget-three .widget-content .summary-list:nth-child(1) .w-icon svg {
+    color: #5c1ac3;
+}
+.widget-three .widget-content .summary-list:nth-child(2) .w-icon svg {
+    color: #009688;
+}
+.widget-three .widget-content .summary-list:nth-child(3) .w-icon svg {
+    color: #e2a03f;
+}
+.widget-three .widget-content .w-summary-details {
+    width: 100%;
+    align-self: center;
+}
+.widget-three .widget-content .w-summary-info {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 1px;
+}
+.widget-three .widget-content .w-summary-info h6 {
+    font-size: 13px;
+    font-weight: 600;
+    margin-bottom: 0;
+    color: #888ea8;
+}
+.widget-three .widget-content .w-summary-info p {
+    font-size: 12px;
+    font-weight: 600;
+    margin-bottom: 0;
+    color: #888ea8;
+}
+.widget-three .widget-content .w-summary-stats .progress {
+    margin-bottom: 0;
+    height: 6px;
+    border-radius: 20px;
+    box-shadow: 0 2px 2px rgba(224, 230, 237, 0.4588235294117647), 1px 6px 7px rgba(224, 230, 237, 0.4588235294117647);
+}
+
+/*
+    ==================
+        Revenue
+    ==================
+*/
+.widget-chart-one .widget-heading {
+    display: flex;
+    justify-content: space-between;
+}
+.widget-chart-one .apexcharts-legend-marker {
+    left: -5px!important;
+}
+.widget-chart-one .apexcharts-yaxis-title {
+    font-weight: 600;
+    fill: #bfc9d4;
+}
+.widget-chart-one .apexcharts-xaxis-title {
+    font-weight: 600;
+    fill: #bfc9d4;
+}
+.widget-chart-one .widget-heading .tabs {
+    padding: 0;
+    margin: 0;
+}
+.widget-chart-one .widget-heading .tabs li {
+    display: inline-block;
+    list-style: none;
+    padding: 0 0;
+}
+.widget-chart-one .widget-heading .tabs a {
+    font-size: 14px;
+    letter-spacing: 1px;
+    font-weight: 600;
+    padding: 5px 7px;
+    background: #1b55e2;
+    color: #fff;
+    border-radius: 4px;
+}
+
+/*
+    =======================
+        Sold By cateory
+    =======================
+*/
+
+.widget-chart-two {
+    padding: 0;
+}
+.widget.widget-chart-two .widget-heading {
+    padding: 20px 20px 0 20px;
+}
+.widget.widget-chart-two .widget-content {
+    padding: 0 0 20px 0;
+}
+.widget-chart-two .apexcharts-canvas {
+    margin: 0 auto;
+}
+.widget-chart-two .apexcharts-legend-marker {
+    left: -5px!important;
+}
+
+
+/*
+    ==================
+        Transaction
+    ==================
+*/
+
+.widget-table-one .widget-heading {
+    display: flex;
+}
+.widget-table-one .widget-content {}
+.widget-table-one .transactions-list {
+    padding: 12px 12px;
+    border: 1px dashed #bfc9d4;
+    border-radius: 6px;
+    -webkit-transition: all 0.1s ease;
+    transition: all 0.1s ease;
+}
+.widget-table-one .transactions-list:not(:last-child) {
+    margin-bottom: 15px;
+}
+.widget-table-one .transactions-list:hover {
+    -webkit-transform: translateY(-1px) scale(1.01);
+    transform: translateY(-1px) scale(1.01);
+}
+.widget-table-one .transactions-list .t-item {
+    display: flex;
+    justify-content: space-between;
+}
+.widget-table-one .transactions-list .t-item .t-company-name {
+    display: flex;
+}
+.widget-table-one .transactions-list .t-item .t-icon {
+    margin-right: 12px;
+}
+.widget-table-one .transactions-list .t-item .t-icon .avatar {
+    position: relative;
+    display: inline-block;
+    width: 38px;
+    height: 38px;
+    font-size: 14px;
+    font-weight: 600;
+    letter-spacing: 1px;
+}
+.widget-table-one .transactions-list .t-item .t-icon .avatar .avatar-title {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    background-color: #ffe1e2;
+    color: #e7515a;
+}
+.widget-table-one .transactions-list .t-item .t-icon .icon {
+    position: relative;
+    display: inline-block;
+    padding: 10px;
+    background-color: #ffeccb;
+    border-radius: 50%;
+}
+.widget-table-one .transactions-list .t-item .t-icon .icon svg {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 19px;
+    height: 19px;
+    color: #e2a03f;
+    stroke-width: 2;
+}
+.widget-table-one .transactions-list .t-item .t-name {
+    align-self: center;
+}
+.widget-table-one .transactions-list .t-item .t-name h4 {
+    font-size: 15px;
+    letter-spacing: 0px;
+    font-weight: 600;
+    margin-bottom: 0;
+}
+.widget-table-one .transactions-list .t-item .t-name .meta-date {
+    font-size: 12px;
+    margin-bottom: 0;
+    font-weight: 600;
+    color: #888ea8;
+}
+.widget-table-one .transactions-list .t-item .t-rate {
+    align-self: center;
+}
+.widget-table-one .transactions-list .t-item .t-rate p {
+    margin-bottom: 0;
+    font-size: 13px;
+    letter-spacing: 0px;
+}
+.widget-table-one .transactions-list .t-item .t-rate svg {
+    width: 14px;
+    height: 14px;
+    vertical-align: baseline;
+}
+.widget-table-one .transactions-list .t-item .t-rate.rate-inc p {
+    color: #009688;
+}
+.widget-table-one .transactions-list .t-item .t-rate.rate-inc svg {
+    color: #009688;
+}
+.widget-table-one .transactions-list .t-item .t-rate.rate-dec p {
+    color: #e7515a;
+}
+.widget-table-one .transactions-list .t-item .t-rate.rate-dec svg {
+    color: #e7515a;
+}
+
+
+/*
+    ========================
+        Recent Activities
+    ========================
+*/
+.widget-activity-four {
+    padding-right: 0;
+    padding-left: 0;
+}
+.widget-activity-four .mt-container {
+    position: relative;
+    height: 272px;
+    overflow: auto;
+    padding-right: 12px;
+}
+.widget-activity-four .widget-heading {
+    padding: 0 20px;
+}
+.widget-activity-four .widget-content {
+    padding: 0 8px 0 20px;
+}
+.widget-activity-four .timeline-line .item-timeline { display: flex; width: 100%; margin-bottom: 12px; }
+.widget-activity-four .timeline-line .item-timeline .t-dot { position: relative; }
+.widget-activity-four .timeline-line .item-timeline .t-dot:before {
+    content: '';
+    position: absolute;
+    border-color: inherit;
+    border-radius: 50%;
+    width: 8px;
+    height: 8px;
+    top: 5px;
+    left: 5px;
+    transform: translateX(-50%); 
+    border-color: #e0e6ed;
+    background: #bfc9d4;
+    z-index: 1;
+}
+.widget-activity-four .timeline-line .item-timeline .t-dot:after {
+    content: '';
+    position: absolute;
+    border-color: inherit;
+    border-width: 1px;
+    border-style: solid;
+    border-radius: 50%;
+    width: 10px;
+    height: 10px;
+    left: 5px;
+    transform: translateX(-50%);
+    border-color: #e0e6ed;
+    width: 0;
+    height: auto;
+    top: 12px;
+    bottom: -19px;
+    border-right-width: 0;
+    border-top-width: 0;
+    border-bottom-width: 0;
+    border-radius: 0;
+}
+.widget-activity-four .timeline-line .item-timeline.timeline-primary .t-dot:before {
+    background-color: #1b55e2;
+    border-color: rgb(164, 189, 247);
+}
+.widget-activity-four .timeline-line .item-timeline.timeline-success .t-dot:before {
+    background-color: #009688;
+    border-color: rgb(154, 210, 205);
+
+}
+.widget-activity-four .timeline-line .item-timeline.timeline-danger .t-dot:before {
+    background-color: #e7515a;
+    border-color: rgb(241, 172, 176);
+}
+.widget-activity-four .timeline-line .item-timeline.timeline-dark .t-dot:before {
+    background-color: #3b3f5c;
+    border-color: rgb(159, 163, 187);
+}
+.widget-activity-four .timeline-line .item-timeline.timeline-secondary .t-dot:before {
+    background: #1b55e2;
+    border-color: #c2d5ff;
+}
+.widget-activity-four .timeline-line .item-timeline.timeline-warning .t-dot:before {
+    background-color: #e2a03f;
+    border-color: rgb(222, 199, 165);
+}
+
+.widget-activity-four .timeline-line .item-timeline:last-child .t-dot:after { display: none; }
+.widget-activity-four .timeline-line .item-timeline .t-meta-time {
+    margin: 0;
+    min-width: 100px;
+    max-width: 100px;
+    font-size: 12px;
+    font-weight: 700;
+    color: #888ea8;
+    align-self: center;
+}
+.widget-activity-four .timeline-line .item-timeline .t-text {
+    align-self: center;
+    margin-left: 20px;
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+}
+.widget-activity-four .timeline-line .item-timeline .t-text p {
+    font-size: 12px;
+    margin: 0;
+    color: #888ea8;
+    font-weight: 400;
+}
+.widget-activity-four .timeline-line .item-timeline .t-text span.badge {
+    position: absolute;
+    right: 11px;
+    padding: 2px 4px;
+    font-size: 11px;
+    letter-spacing: 1px;
+    opacity: 0;
+    font-weight: 400;
+}
+.widget-activity-four .timeline-line .item-timeline .t-text span.badge {
+    transform: none;
+}
+.widget-activity-four .timeline-line .item-timeline:hover .t-text span.badge {
+    opacity: 1;
+}
+.widget-activity-four .timeline-line .item-timeline .t-text p.t-time {
+    text-align: right;
+    color: #888ea8;
+    font-size: 10px;
+}
+.widget-activity-four .timeline-line .item-timeline .t-time {
+    margin: 0;
+    min-width: 80px;
+    max-width: 80px;
+    font-size: 13px;
+    font-weight: 600; 
+    color: #acb0c3;
+    letter-spacing: 1px;
+}
+.widget-activity-four .tm-action-btn {
+    text-align: center;
+    padding-top: 20px;
+}
+.widget-activity-four .tm-action-btn button {
+    background: transparent;
+    box-shadow: none;
+    padding: 0;
+    color: #1b55e2;
+    font-weight: 600;
+    letter-spacing: 0.5px;
+    border: none;
+    font-size: 15px;
+}
+.widget-activity-four .tm-action-btn svg {
+    width: 15px;
+    height: 15px;
+    vertical-align: inherit;
+}
+
+/*
+    =====================
+        Account Info
+    =====================
+*/
+
+.widget-account-invoice-one .invoice-box {}
+.widget-account-invoice-one .invoice-box .acc-total-info {
+    padding: 0 0;
+    margin-bottom: 18px;
+    padding-bottom: 18px;
+    border-bottom: 1px dashed #bfc9d4;
+}
+.widget-account-invoice-one .invoice-box h5 {
+    text-align: center;
+    font-size: 20px;
+    letter-spacing: 1px;
+    margin-bottom: 10px;
+    color: #1b55e2;
+}
+.widget-account-invoice-one .invoice-box .acc-amount {
+    text-align: center;
+    font-size: 23px;
+    font-weight: 700;
+    margin-bottom: 0;
+    color: #009688;
+}
+.widget-account-invoice-one .invoice-box .inv-detail {
+    margin-bottom: 18px;
+    padding-bottom: 18px;
+    border-bottom: 1px dashed #bfc9d4;
+}
+.widget-account-invoice-one .invoice-box [class*="info-detail-"]:not(.info-sub) {
+    display: flex;
+    justify-content: space-between;
+}
+.widget-account-invoice-one .invoice-box [class*="info-detail-"]:not(.info-sub) p {
+    margin-bottom: 13px;
+    font-weight: 700;
+    font-size: 14px;
+}
+.widget-account-invoice-one .invoice-box [class*="info-detail-"].info-sub .info-detail {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 0;
+    font-weight: 700;
+    font-size: 14px;
+}
+.widget-account-invoice-one .invoice-box [class*="info-detail-"].info-sub .info-detail p {
+    margin-bottom: 0;
+}
+.widget-account-invoice-one .invoice-box [class*="info-detail-"].info-sub .info-detail-sub {
+    margin-left: 9px;
+}
+.widget-account-invoice-one .invoice-box [class*="info-detail-"].info-sub .info-detail-sub p {
+    color: #888ea8;
+    margin-bottom: 2px;
+    font-weight: 600;
+}
+.widget-account-invoice-one .invoice-box .inv-action {
+    text-align: center;
+    display: flex;
+    justify-content: space-around;
+}
+.widget-account-invoice-one .invoice-box .inv-action a {
+    transform: none;
+}
+
+/*
+    =====================
+        Recent Orders
+    =====================
+*/
+.widget-table-two {
+    position: relative;
+}
+.widget-table-two h5 {
+    font-weight: 700;
+    font-size: 19px;
+    letter-spacing: 1px;
+    margin-bottom: 20px;
+}
+.widget-table-two .widget-content {
+    background: transparent;
+}
+.widget-table-two .table {
+    border-collapse: separate;
+    border-spacing: 0 5px;
+    margin-bottom: 0;
+}
+.widget-table-two .table > thead > tr > th {
+    text-transform: initial;
+    font-weight: 600;
+    border-top: none;
+    background: #e0e6ed;
+    padding-top: 0;
+    padding-bottom: 0;
+    padding-right: 0;
+    padding-left: 0;
+    -webkit-transition: all 0.1s ease;
+    transition: all 0.1s ease;
+    padding: 10px 0 10px 5px;
+}
+.widget-table-two .table > thead > tr > th:first-child {
+    border-bottom-left-radius: 6px;
+}
+.widget-table-two .table > thead > tr > th:first-child {
+    border-top-left-radius: 6px;
+}
+.widget-table-two .table > thead > tr > th:last-child {
+    border-bottom-right-radius: 6px;
+}
+.widget-table-two .table > thead > tr > th:last-child {
+    border-top-right-radius: 6px;
+}
+.widget-table-two .table > thead > tr > th .th-content {
+    color: #1b55e2;
+    font-weight: 600;
+    font-size: 14px;
+    letter-spacing: 1px;
+}
+.widget-table-two .table > thead > tr > th:first-child .th-content {
+    margin-left: 10px;
+}
+.widget-table-two .table > thead > tr > th:last-child .th-content {
+    text-align: right;
+    margin-right: 10px;
+}
+.widget-table-two .table > thead > tr > th:nth-last-child(2) .th-content {
+    text-align: center;
+    padding: 0 15px 0 0;
+}
+.widget-table-two .table > tbody > tr > td {
+    border-top: none;
+    background: transparent;
+    padding-top: 0;
+    padding-bottom: 0;
+    padding-right: 0;
+    padding-left: 0;
+    -webkit-transition: all 0.1s ease;
+    transition: all 0.1s ease;
+}
+.widget-table-two .table > tbody > tr:hover > td {
+    transform: translateY(-1px) scale(1.01);
+}
+.widget-table-two .table > tbody > tr > td .td-content {
+    cursor: pointer;
+    font-weight: 600;
+    letter-spacing: 1px;
+    color: #888ea8;
+}
+.widget-table-two .table > tbody > tr:hover > td .td-content {
+    color: #515365;
+}
+.widget-table-two .table > tbody > tr > td:first-child {
+    border-top-left-radius: 6px;
+    padding: 10px 0 10px 15px;
+}
+.widget-table-two .table > tbody > tr > td:first-child {
+    border-bottom-left-radius: 6px;
+}
+.widget-table-two .table > tbody > tr > td:last-child {
+    border-top-right-radius: 6px;
+    padding: 15.5px 15px 15.5px 0;
+    text-align: right;
+}
+.widget-table-two .table > tbody > tr > td:last-child {
+    border-bottom-right-radius: 6px;
+}
+.widget-table-two .table .td-content.customer-name {
+    color: #515365;
+}
+.widget-table-two .table .td-content.product-brand {
+    letter-spacing: 1px;
+}
+.widget-table-two .table .td-content img {
+    width: 35px;
+    height: 35px;
+    border-radius: 50%;
+    margin-right: 13px;
+}
+.widget-table-two .table tr > td:nth-last-child(2) .td-content {
+    text-align: center;
+}
+.widget-table-two .table .td-content .badge {
+    transform: none;
+}
+.widget-table-two .table tr:hover .td-content .badge {
+    transform: translateY(-3px);
+}
+.widget-table-two .table tr .td-content .outline-badge-primary {
+    background-color: #c2d5ff;
+}
+.widget-table-two .table tr .td-content .outline-badge-success {
+    color: #009688;
+    background-color: #e6ffbf;
+    border-color: #009688;
+}
+.widget-table-two .table tr .td-content .outline-badge-danger {
+    background-color: #ffe1e2;
+}
+
+
+/*
+    ===========================
+        Top Selling Product
+    ===========================
+*/
+
+.widget-table-three {
+    position: relative;
+}
+.widget-table-three h5 {
+    font-weight: 700;
+    font-size: 19px;
+    letter-spacing: 1px;
+    margin-bottom: 20px;
+}
+.widget-table-three .widget-content {
+    background: transparent;
+}
+.widget-table-three .table {
+    border-collapse: separate;
+    border-spacing: 0 5px;
+    margin-bottom: 0;
+}
+.widget-table-three .table > thead > tr > th:first-child .th-content {
+    margin-left: 10px;
+}
+.widget-table-three .table > thead > tr > th:last-child .th-content {
+    text-align: right; 
+    margin-right: 10px;
+}
+.widget-table-three .table > thead > tr > th {
+    text-transform: initial;
+    font-weight: 600;
+    border-top: none;
+    background: #e0e6ed;
+    padding-top: 0;
+    padding-bottom: 0;
+    padding-right: 0;
+    padding-left: 0;
+    -webkit-transition: all 0.1s ease;
+    transition: all 0.1s ease;
+    padding: 10px 0 10px 15px;
+}
+.widget-table-three .table > thead > tr > th {
+}
+.widget-table-three .table > thead > tr > th:first-child {
+    border-bottom-left-radius: 6px;
+}
+.widget-table-three .table > thead > tr > th:first-child {
+    border-top-left-radius: 6px;
+}
+.widget-table-three .table > thead > tr > th:last-child {
+    border-bottom-right-radius: 6px;
+}
+.widget-table-three .table > thead > tr > th:last-child {
+    border-top-right-radius: 6px;
+}
+.widget-table-three .table > thead > tr > th .th-content {
+    color: #1b55e2;
+    font-weight: 600;
+    font-size: 14px;
+    letter-spacing: 1px;
+}
+.widget-table-three .table > thead > tr > th:nth-last-child(2) .th-content {}
+.widget-table-three .table > tbody > tr > td {
+    border-top: none;
+    padding-top: 0;
+    padding-bottom: 0;
+    padding-right: 0;
+    padding-left: 0;
+    -webkit-transition: all 0.1s ease;
+    transition: all 0.1s ease;
+}
+.widget-table-three .table > tbody > tr:hover > td {
+    transform: translateY(-1px) scale(1.01);
+}
+.widget-table-three .table > tbody > tr {
+    background: transparent;
+}
+.widget-table-three .table > tbody > tr > td .td-content {
+    cursor: pointer;
+    font-weight: 600;
+    letter-spacing: 1px;
+    color: #888ea8;
+}
+.widget-table-three .table > tbody > tr:hover > td .td-content {
+    color: #3b3f5c;
+}
+.widget-table-three .table > tbody > tr > td:first-child {
+    border-top-left-radius: 6px;
+    padding: 10px 0px 10px 15px;
+}
+.widget-table-three .table > tbody > tr > td:first-child {
+    border-bottom-left-radius: 6px;
+}
+.widget-table-three .table > tbody > tr > td:last-child {
+    border-top-right-radius: 6px;
+}
+.widget-table-three .table > tbody > tr > td:last-child {
+    border-bottom-right-radius: 6px;
+}
+.widget-table-three .table > tbody > tr > td:last-child .td-content {
+    text-align: right;
+    padding: 0 15px 0 0;
+}
+.widget-table-three .table tr > td:nth-last-child(2) .td-content {
+    padding: 10px 0 10px 15px;
+}
+.widget-table-three .table .td-content .discount-pricing {
+    padding: 10px 0 10px 15px;
+}
+.widget-table-three .table .td-content.product-name {
+    color: #515365;
+    letter-spacing: 1px;
+}
+.widget-table-three .table .td-content img {
+    width: 35px;
+    height: 35px;
+    border-radius: 50%;
+    margin-right: 10px;
+}
+.widget-table-three .table .td-content .pricing {
+    padding: 10px 0 10px 15px;
+}
+.widget-table-three .table .td-content .tag {
+    background: transparent;
+    transform: none;
+    font-weight: 600;
+    letter-spacing: 2px;
+    padding: 2px 5px;
+    border-radius: 6px;
+}
+.widget-table-three .table .td-content .tag-primary {
+    color: #1b55e2;
+    border: 1px dashed #1b55e2;
+    background: #c2d5ff;
+}
+.widget-table-three .table .td-content .tag-success {
+    color: #009688;
+    border: 1px dashed #009688;
+    background: #e6ffbf;
+}
+.widget-table-three .table .td-content .tag-danger {
+    color: #e7515a;
+    border: 1px dashed #e7515a;
+    background: #ffe1e2;
+}
+.widget-table-three .table .td-content a {
+    padding: 0;
+    font-size: 13px;
+    background: transparent;
+    transform: none;
+    letter-spacing: 1px;
+    border-bottom: 1px dashed #bfc9d4;
+}
+
+/*
+    ====================
+        Media Object
+    ====================
+*/
+
+@media(min-width: 1200px) {
+    .table-responsive {
+        overflow-x: hidden;
+    }
+}
+@media(max-width: 1430px) and (min-width: 1200px) {
+    /*
+        ===========================
+            Top Selling Product
+        ===========================
+    */
+    .widget-table-two .table .td-content img {
+        display: block;
+    }
+
+    /*
+        ===========================
+            Top Selling Product
+        ===========================
+    */
+    .widget-table-three .table .td-content img {
+        display: block;
+    }
+}
+
+@media(max-width: 767px) {
+    .widget-notification-two button {
+        display: none;
+    }
+}
+@media(max-width: 575px) {
+
+    /*
+        ==================
+            Total Sales
+        ==================
+    */
+
+    .widget-two .w-chart {
+        position: inherit;
+    }
+
+    /*
+        ========================
+            Recent Activities
+        ========================
+    */
+
+    .widget-activity-one .mt-container {
+        height: auto;
+    }
+
+    /*
+        ===========================
+            Top Selling Product
+        ===========================
+    */
+    .widget-table-two .table > thead > tr > th {
+        padding-right: 15px;
+    }
+    .widget-table-two .table > tbody > tr > td {
+        border-top: none;
+        padding-top: 0;
+        padding-bottom: 0;
+        padding-right: 12px;
+        padding-left: 12px;
+    }
+    .widget-table-two .table .td-content.customer-name {
+        color: #515365;
+        text-align: center;
+    }
+    .widget-table-two .table .td-content.product-brand {
+        text-align: center;
+    }
+    .widget-table-two .table .td-content img {
+        display: block;
+        margin: 0 auto 5px auto;
+    }
+
+    /*
+        ===========================
+            Top Selling Product
+        ===========================
+    */
+    .widget-table-three .table > thead > tr > th {
+        padding-right: 15px;
+    }
+    .widget-table-three .table > tbody > tr > td {
+        border-top: none;
+        padding-top: 0;
+        padding-bottom: 0;
+        padding-right: 12px;
+        padding-left: 12px;
+    }
+    .widget-table-three .table .td-content.product-name {
+        text-align: center;
+    }
+    .widget-table-three .table .td-content img {
+        display: block;
+        margin: 0 auto 5px auto;
+    }
+
+}
\ No newline at end of file
diff --git a/static/css/dashboard/dash_2.css b/static/css/dashboard/dash_2.css
new file mode 100644
index 00000000..8d5ddde6
--- /dev/null
+++ b/static/css/dashboard/dash_2.css
@@ -0,0 +1,780 @@
+.layout-spacing {
+    padding-bottom: 25px;
+}
+.widget {
+    position: relative;
+    padding: 0;
+    border-radius: 6px;
+    border: none;
+    -webkit-box-shadow: 0 4px 6px 0 rgba(85, 85, 85, 0.08), 0 1px 20px 0 rgba(0, 0, 0, 0.07), 0px 1px 11px 0px rgba(0, 0, 0, 0.07);
+    -moz-box-shadow: 0 4px 6px 0 rgba(85, 85, 85, 0.08), 0 1px 20px 0 rgba(0, 0, 0, 0.07), 0px 1px 11px 0px rgba(0, 0, 0, 0.07);
+    box-shadow: 0 4px 6px 0 rgba(85, 85, 85, 0.08), 0 1px 20px 0 rgba(0, 0, 0, 0.07), 0px 1px 11px 0px rgba(0, 0, 0, 0.07);
+}
+
+/*
+    ==================
+        Notification
+    ==================
+*/
+.widget-card-four {
+    padding: 25px 32px;
+    background: #fff;
+}
+.widget-card-four .w-content {
+    display: flex;
+    justify-content: space-between;
+}
+
+.widget-card-four .w-info h6 {
+    font-weight: 600;
+    margin-bottom: 0;
+    color: #0e1726;
+    font-size: 23px;
+    letter-spacing: 0;
+}
+.widget-card-four .w-info p {
+    font-weight: 600;
+    margin-bottom: 0;
+    color: #5c1ac3;
+    font-size: 16px;
+}
+.widget-card-four .w-icon {
+    color: #5c1ac3;
+    background-color: #dccff7;
+    height: 45px;
+    display: inline-flex;
+    width: 45px;
+    align-self: center;
+    justify-content: center;
+    border-radius: 50%;
+    padding: 10px;
+}
+.widget-card-four .progress {
+    height: 8px;
+    margin-bottom: 0;
+    margin-top: 62px;
+    margin-bottom: 0;
+    height: 22px;
+    padding: 4px;
+    border-radius: 20px;
+    box-shadow: 0 2px 2px rgba(224, 230, 237, 0.4588235294117647),
+}
+.widget-card-four .progress-bar {
+    position: relative;
+}
+.widget-card-four .progress-bar:before {
+    content: '';
+    height: 7px;
+    width: 7px;
+    background: #fff;
+    position: absolute;
+    right: 3px;
+    border-radius: 50%;
+    top: 3.4px;
+}
+
+/*
+    =====================
+        User Analytics
+    =====================
+*/
+
+.widget.widget-one {
+    padding: 22px 18px;
+    background: #fff;
+}
+.widget.widget-one .widget-heading h6 {
+    color: #0e1726;
+    margin-bottom: 41px;
+    font-size: 17px;
+    display: block;
+    font-weight: 600;
+}
+.widget.widget-one .w-chart {
+    display: flex;
+}
+.widget.widget-one .w-chart .w-chart-section {
+    width: 50%;
+    padding: 0 12px;
+}
+.widget.widget-one .w-chart .w-chart-section .w-detail {
+    position: absolute;
+    color: #fff;
+}
+.widget.widget-one .w-chart .w-chart-section .w-title {
+    font-size: 13px;
+    font-weight: 700;
+    margin-bottom: 0;
+}
+.widget.widget-one .w-chart .w-chart-section .w-stats {
+    color: #f8538d;
+    font-size: 20px;
+    letter-spacing: 1px;
+    margin-bottom: 0;
+    font-weight: 700;
+}
+
+/*
+    =====================
+        Unique Visitors
+    =====================
+*/
+
+.widget.widget-chart-three {
+    background: #fff;
+}
+.widget.widget-chart-three .widget-heading {
+    display: flex;
+    justify-content: space-between;
+    border-bottom: 1px dashed #e0e6ed;
+    padding: 20px 20px;
+    margin-bottom: 0;
+    padding-bottom: 20px;
+}
+.widget.widget-chart-three .widget-heading h5 {
+    font-size: 17px;
+    display: block;
+    color: #0e1726;
+    font-weight: 600;
+    margin-bottom: 0;
+}
+.widget.widget-chart-three .widget-heading .dropdown {
+    align-self: center;
+}
+.widget.widget-chart-three .widget-heading .dropdown a svg {
+    color: #888ea8;
+    width: 19px;
+    height: 19px;
+}
+.widget.widget-chart-three .widget-heading .dropdown .dropdown-menu {
+    padding: 8px 8px;
+    min-width: 10rem;
+    border-radius: 6px;
+    top: 5px !important;
+}
+.widget.widget-chart-three .apexcharts-legend-marker {
+    left: -5px!important;
+}
+
+/*
+    =========================
+        Organic Vs Direct
+    =========================
+*/
+
+/*
+    ========================
+        Recent Activities
+    ========================
+*/
+
+.widget.widget-activity-three {
+    position: relative;
+    background: #fff;
+    border-radius: 8px;
+    height: 100%;
+}
+.widget.widget-activity-three .widget-heading {
+    display: flex;
+    justify-content: space-between;
+    border-bottom: 1px dashed #e0e6ed;
+    padding: 20px 20px;
+    padding-bottom: 20px;
+}
+.widget.widget-activity-three .widget-heading h5 {
+    font-size: 17px;
+    display: block;
+    color: #0e1726;
+    font-weight: 600;
+    margin-bottom: 0;
+}
+.widget-activity-three .widget-content {
+    padding: 20px 10px 20px 20px
+}
+.widget-activity-three .mt-container {
+    position: relative;
+    height: 325px;
+    overflow: auto;
+    padding: 0 12px 0 12px;
+}
+.widget-activity-three .timeline-line .item-timeline { display: flex;
+    margin-bottom: 20px; }
+.widget-activity-three .timeline-line .item-timeline .t-dot { position: relative; }
+
+.widget-activity-three .timeline-line .item-timeline .t-dot div {
+    background: #1b55e2;
+    border-radius: 50%;
+    padding: 5px;
+    margin-right: 11px;
+    display: flex;
+    height: 37px;
+    justify-content: center;
+    width: 36px;
+}
+.widget-activity-three .timeline-line .item-timeline .t-dot div.t-primary {
+    background-color: #1b55e2;
+    box-shadow: 0 10px 20px -10px #1b55e2;
+}
+.widget-activity-three .timeline-line .item-timeline .t-dot div.t-success {
+    background-color: #009688;
+    box-shadow: 0 10px 20px -10px #009688;
+}
+.widget-activity-three .timeline-line .item-timeline .t-dot div.t-danger {
+    background-color: #e7515a;
+    box-shadow: 0 10px 20px -10px #e7515a;
+}
+.widget-activity-three .timeline-line .item-timeline .t-dot div.t-warning {
+    background-color: #e2a03f;
+    box-shadow: 0 10px 20px -10px #e2a03f;
+}
+.widget-activity-three .timeline-line .item-timeline .t-dot div.t-dark {
+    background-color: #3b3f5c;
+    box-shadow: 0 10px 20px -10px #3b3f5c;
+}
+.widget-activity-three .timeline-line .item-timeline .t-dot svg {
+    color: #fff;
+    height: 20px;
+    width: 20px;
+    stroke-width: 1.6px;
+    align-self: center;
+}
+
+.widget-activity-three .timeline-line .item-timeline .t-content {
+    width: 100%;
+}
+.widget-activity-three .timeline-line .item-timeline .t-content .t-uppercontent {
+    display: flex;
+    justify-content: space-between;
+}
+.widget-activity-three .timeline-line .item-timeline .t-content .t-uppercontent h5 {
+    font-size: 15px;
+    letter-spacing: 0;
+    font-weight: 700;
+    margin-bottom: 5px;
+}
+.widget-activity-three .timeline-line .item-timeline .t-content .t-uppercontent span {
+    margin-bottom: 0;
+    font-size: 11px;
+    font-weight: 500;
+    color: #888ea8;
+}
+.widget-activity-three .timeline-line .item-timeline .t-content p {
+    margin-bottom: 8px;
+    font-size: 13px;
+    font-weight: 500;
+    color: #888ea8;
+}
+.widget-activity-three .timeline-line .item-timeline .t-content div.tags {
+    
+}
+.widget-activity-three .timeline-line .item-timeline .t-content div.tags .badge {
+    padding: 2px 4px;
+    font-size: 11px;
+    letter-spacing: 1px;
+    transform: none;
+}
+.widget-activity-three .timeline-line .item-timeline .t-content div.tags .badge-primary {
+    background-color: #c2d5ff;
+    color: #1b55e2;
+    
+}
+
+.widget-activity-three .timeline-line .item-timeline .t-content div.tags .badge-success {
+    background-color: #e6ffbf;
+    color: #009688;
+}
+
+.widget-activity-three .timeline-line .item-timeline .t-content div.tags .badge-warning {
+    background-color: #ffeccb;
+    color: #e2a03f;
+    
+}
+.widget-activity-three .timeline-line .item-timeline .t-dot:after {
+    content: '';
+    position: absolute;
+    border-width: 1px;
+    border-style: solid;
+    left: 40%;
+    transform: translateX(-50%);
+    border-color: #bfc9d4;
+    width: 0;
+    height: auto;
+    top: 36px;
+    bottom: -20px;
+    border-right-width: 0;
+    border-top-width: 0;
+    border-bottom-width: 0;
+    border-radius: 0;
+}
+.widget-activity-three .timeline-line .item-timeline:last-child .t-dot:after { display: none; }
+
+/*
+    ==================
+        Statistics
+    ==================
+*/
+
+.widget-one_hybrid {
+    background: #fff;
+}
+.widget-one_hybrid .widget-heading {
+    padding: 20px 13px;
+}
+.widget-one_hybrid .widget-heading .w-icon {
+    display: inline-block;
+    padding: 7px 8px;
+    border-radius: 50%;
+    margin-bottom: 15px;
+}
+.widget-one_hybrid .widget-heading svg {
+    height: 18px;
+    width: 18px;
+}
+.widget-one_hybrid .widget-heading .w-value {
+    font-size: 21px;
+    font-weight: 700;
+    margin-bottom: 0;
+}
+.widget-one_hybrid .widget-heading h5 {
+    margin-bottom: 0;
+    font-size: 15px;
+    font-weight: 600;
+    color: #506690;
+}
+.widget-one_hybrid.widget-followers {
+    background: #c2d5ff;
+}
+.widget-one_hybrid.widget-followers .widget-heading .w-icon {
+    color: #1b55e2;
+    border: 1px solid #1b55e2;
+}
+.widget-one_hybrid.widget-referral {
+    background: #ffe1e2;
+}
+.widget-one_hybrid.widget-referral .widget-heading .w-icon {
+    color: #e7515a;
+    border: 1px solid #e7515a;
+}
+.widget-one_hybrid.widget-social {
+    background: #bae7ff;
+}
+.widget-one_hybrid.widget-social .widget-heading .w-icon {
+    color: #2196f3;
+    border: 1px solid #2196f3;
+}
+.widget-one_hybrid.widget-engagement {
+    background: #e6ffbf;
+}
+.widget-one_hybrid.widget-engagement .widget-heading .w-icon {
+    color: #8dbf42;
+    border: 1px solid #8dbf42;
+}
+
+/*
+    ==================
+        Balance
+    ==================
+*/
+
+.widget-account-invoice-two {
+    padding: 22px 19px;
+    background: #e2a03f;
+    background-image: linear-gradient(to right, #d09693 0%, #c71d6f 100%);
+    background: linear-gradient(to right, #0081ff 0%, #0045ff 100%);
+}
+.widget-account-invoice-two .account-box .info {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 84px;
+}
+.widget-account-invoice-two .account-box h5 {
+    color: #e0e6ed;
+    margin-bottom: 0;
+    font-size: 17px;
+    font-weight: 600;
+}
+.widget-account-invoice-two .account-box p {
+    color: #e0e6ed;
+    font-weight: 700;
+    margin-bottom: 0;
+    align-self: center;
+}
+.widget-account-invoice-two .account-box .acc-action {
+    margin-top: 23px;
+    display: flex;
+    justify-content: space-between;
+}
+.widget-account-invoice-two .account-box .acc-action a {
+    display: inline-block;
+    padding: 8px;
+    border-radius: 6px;
+    color: #e0e6ed;
+    font-weight: 600;
+    box-shadow: 0px 0px 2px 0px #bfc9d4;
+}
+.widget-account-invoice-two .account-box .acc-action a:first-child {
+    margin-right: 2px;
+}
+.widget-account-invoice-two .account-box .acc-action a svg {
+    width: 18px;
+    height: 18px;
+}
+
+/*
+    ==================
+        Statistics
+    ==================
+*/
+.widget-card-one {
+    background: #fff;
+    padding: 20px 0;
+    height: 100%;
+}
+.widget-card-one .widget-content .media {
+    padding-left: 15px;
+    padding-right: 15px;
+    margin-bottom: 19px;
+    padding-bottom: 21px;
+    border-bottom: 1px dashed #e0e6ed;
+}
+.widget-card-one .widget-content .media .w-img {
+    margin-right: 9px;
+    align-self: center;
+}
+.widget-card-one .widget-content .media img {
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    border: 3px solid #e0e6ed;
+}
+.widget-card-one .widget-content .media-body {
+    align-self: center;
+}
+.widget-card-one .widget-content .media-body h6 {
+    font-weight: 700;
+    font-size: 15px;
+    letter-spacing: 0;
+    margin-bottom: 0;
+}
+.widget-card-one .widget-content .media-body p {
+    font-size: 14px;
+    letter-spacing: 1px;
+    margin-bottom: 0;
+    font-weight: 600;
+    color: #888ea8;
+    padding: 0;
+}
+.widget-card-one .widget-content p {
+    font-weight: 600;
+    font-size: 13px;
+    margin-bottom: 61px;
+    padding: 0 20px;
+}
+.widget-card-one .widget-content .w-action {
+    padding: 0 20px;
+}
+.widget-card-one .widget-content .w-action svg {
+    color: #1b55e2;
+    fill: #c2d5ff;
+}
+.widget-card-one .widget-content .w-action span {
+    vertical-align: sub;
+    font-weight: 700;
+    color: #0e1726;
+    letter-spacing: 1px;
+}
+
+/*
+    ====================
+        Visitors by Browser
+    ====================
+*/
+
+.widget-four {
+    position: relative;
+    background: #fff;
+    padding: 20px;
+    border-radius: 8px;
+    height: 100%;
+        box-shadow: 0 4px 6px 0 rgba(85, 85, 85, 0.09019607843137255), 0 1px 20px 0 rgba(0, 0, 0, 0.08), 0px 1px 11px 0px rgba(0, 0, 0, 0.06);
+}
+.widget-four .widget-heading {
+    margin-bottom: 54px;
+}
+.widget-four .widget-heading h5 {
+    font-size: 17px;
+    display: block;
+    color: #0e1726;
+    font-weight: 600;
+    margin-bottom: 0;
+}
+.widget-four .widget-content {
+    font-size: 17px;
+}
+.widget-four .widget-content .browser-list {
+    display: flex;
+}
+.widget-four .widget-content .browser-list:not(:last-child) {
+    margin-bottom: 30px;
+}
+.widget-four .widget-content .w-icon {
+    display: inline-block;
+    padding: 8px 8px;
+    border-radius: 50%;
+    display: inline-flex;
+    align-self: center;
+    height: 34px;
+    width: 34px;
+    margin-right: 12px;
+}
+.widget-four .widget-content .w-icon svg {
+    display: block;
+    width: 17px;
+    height: 17px;
+}
+.widget-four .widget-content .browser-list:nth-child(1) .w-icon {
+    background: #c2d5ff;
+}
+.widget-four .widget-content .browser-list:nth-child(2) .w-icon {
+    background: #ffe1e2;
+}
+.widget-four .widget-content .browser-list:nth-child(3) .w-icon {
+    background: #ffeccb ;
+}
+.widget-four .widget-content .browser-list:nth-child(1) .w-icon svg {
+    color: #1b55e2;
+}
+.widget-four .widget-content .browser-list:nth-child(2) .w-icon svg {
+    color: #e7515a;
+}
+.widget-four .widget-content .browser-list:nth-child(3) .w-icon svg {
+    color: #e2a03f;
+}
+.widget-four .widget-content .w-browser-details {
+    width: 100%;
+    align-self: center;
+}
+.widget-four .widget-content .w-browser-info {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 1px;
+}
+.widget-four .widget-content .w-browser-info h6 {
+    font-size: 13px;
+    font-weight: 600;
+    margin-bottom: 0;
+    color: #888ea8;
+}
+.widget-four .widget-content .w-browser-info p {
+    font-size: 12px;
+    font-weight: 600;
+    margin-bottom: 0;
+    color: #888ea8;
+}
+.widget-four .widget-content .w-browser-stats .progress {
+    margin-bottom: 0;
+    height: 22px;
+    padding: 4px;
+    border-radius: 20px;
+    box-shadow: 0 2px 2px rgba(224, 230, 237, 0.4588235294117647), 1px 6px 7px rgba(224, 230, 237, 0.4588235294117647);
+}
+.widget-four .widget-content .w-browser-stats .progress .progress-bar {
+    position: relative;
+}
+.widget-four .widget-content .w-browser-stats .progress .progress-bar:before {
+    content: '';
+    height: 7px;
+    width: 7px;
+    background: #fff;
+    position: absolute;
+    right: 3px;
+    border-radius: 50%;
+    top: 3.4px;
+}
+/*
+    ==================
+        Dev Summit
+    ==================
+*/
+.widget-card-two {
+    background: #fff;
+    padding: 20px 0px;
+}
+.widget-card-two .media {
+    padding-left: 15px;
+    padding-right: 15px;
+    margin-bottom: 19px;
+    padding-bottom: 21px;
+    border-bottom: 1px dashed #e0e6ed;
+}
+.widget-card-two .media .w-img {
+    margin-right: 10px;
+}
+.widget-card-two .media .w-img img {
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    border: 3px solid #e0e6ed;
+}
+.widget-card-two .media .media-body {
+    align-self: center;
+}
+.widget-card-two .media .media-body h6 {
+    font-weight: 700;
+    font-size: 15px;
+    letter-spacing: 0;
+    margin-bottom: 0;
+}
+.widget-card-two .media .media-body p {
+    margin-bottom: 0;
+    font-weight: 600;
+    color: #888ea8;
+}
+.widget-card-two .card-bottom-section {
+    text-align: center;
+}
+.widget-card-two .card-bottom-section h5 {
+    font-size: 14px;
+    color: #009688;
+    font-weight: 700;
+    margin-bottom: 20px;
+}
+.widget-card-two .card-bottom-section .img-group img {
+    width: 46px;
+    height: 46px;
+    border-radius: 50%;
+    border: 2px solid #e0e6ed;
+}
+.widget-card-two .card-bottom-section .img-group img:not(:last-child) {
+    margin-right: 5px;    
+}
+.widget-card-two .card-bottom-section a {
+    display: block;
+    margin-top: 18px;
+    background: #1b55e2;
+    color: #fff;
+    padding: 10px 10px;
+    transform: none;
+    margin-right: 15px;
+    margin-left: 15px;
+    font-size: 15px;
+    font-weight: 600;
+    letter-spacing: 1px;
+}
+.widget-card-two .card-bottom-section a.btn:hover,
+.widget-card-two .card-bottom-section a.btn:focus  {
+    border-color: #1b55e2;
+}
+
+/*
+    =====================
+        Task Indicator
+    =====================
+*/
+.widget-five {
+    background: #fff;
+    padding: 28px 0 0 0;
+    height: 100%;
+}
+.widget-five .widget-content .header {
+    display: flex;
+    justify-content: space-between;
+    padding-left: 15px;
+    padding-right: 15px;
+    padding-bottom: 23px;
+    border-bottom: 1px dashed #e0e6ed;
+}
+.widget-five .widget-content .header-body {
+    align-self: center;
+}
+.widget-five .widget-content .header-body h6 {
+    font-weight: 700;
+    font-size: 15px;
+    letter-spacing: 0;
+    margin-bottom: 0;
+}
+.widget-five .widget-content .header-body p {
+    margin-bottom: 0;
+    font-weight: 600;
+    color: #888ea8;
+    padding: 0;
+}
+.widget-five .widget-content .task-action {
+    display: flex;
+}
+.widget-five .widget-content .task-action .dropdown.custom-dropdown {
+    align-self: center;
+}
+.widget-five .widget-content .task-action .dropdown.custom-dropdown a.dropdown-toggle svg {
+    color: #888ea8;
+}
+.widget-five .widget-content .task-action .dropdown.custom-dropdown .dropdown-menu {
+    padding: 8px 8px;
+    min-width: 10rem;
+    border-radius: 6px;
+    top: 5px !important;
+}
+.widget-five .w-content {
+    text-align: center;
+    height: 100%;
+    padding: 20px 26px;
+}
+.widget-five .w-content div .task-left {
+    margin-bottom: 0;
+    font-size: 30px;
+    color: #1b55e2;
+    background: #c2d5ff;
+    font-weight: 600;
+    border-radius: 50%;
+    display: inline-flex;
+    height: 76px;
+    width: 76px;
+    justify-content: center;
+    padding: 13px 0px;
+    border: 5px solid #fff;
+    margin-bottom: 20px;
+    -webkit-box-shadow: 0px 0px 8px 2px #e0e6ed;
+    box-shadow: 0px 0px 8px 2px #e0e6ed;
+}
+.widget-five .w-content div .task-completed {
+    font-size: 14px;
+    font-weight: 700;
+    margin-bottom: 4px;
+    color: #009688;
+}
+.widget-five .w-content div .task-hight-priority {
+    color: #acb0c3;
+    font-weight: 500;
+    margin-bottom: 0;
+}
+.widget-five .w-content div .task-hight-priority span {
+    color: #e7515a;
+    font-weight: 700;
+}
+
+/*
+    =====================
+        Media Query
+    =====================
+*/
+
+@media (max-width: 1199px) {
+    .widget-activity-two .widget-content {
+        padding-top: 0;
+    }
+    .widget-activity-two .mt-container {
+        position: relative;
+        height: 177px;
+    }
+}
+@media (max-width: 575px) {
+    .widget-card-four .w-content-img img {
+        height: 94px;
+    }
+    .widget-notification-one .noti-action a span {
+        display: none;
+    }
+    .widget-statistic .col-12:not(:last-child) .widget-one_hybrid {
+        margin-bottom: 40px
+    }
+}
\ No newline at end of file
diff --git a/static/css/elements/alert.css b/static/css/elements/alert.css
new file mode 100644
index 00000000..75b5ca3c
--- /dev/null
+++ b/static/css/elements/alert.css
@@ -0,0 +1,229 @@
+/*
+	===============================
+			@Import	Function
+	===============================
+*/
+/*
+	===============================
+			@Import	Mixins
+	===============================
+*/
+/*      Alert       */
+.alert {
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  border-radius: 5px;
+  margin-bottom: 15px;
+  padding: 0.9375rem; }
+  .alert .btn {
+    padding: 3px 12px;
+    margin-right: 20px; }
+    .alert .btn:hover {
+      box-shadow: none; }
+  .alert .alert-icon svg {
+    vertical-align: middle;
+    width: 33px;
+    height: 33px; }
+  .alert .close {
+    color: #fff;
+    opacity: 1;
+    width: 18px; }
+
+/*Default Alerts*/
+.alert-primary {
+  color: #fff;
+  background-color: #1b55e2;
+  border-color: #1b55e2; }
+
+.alert-warning {
+  color: #fff;
+  background-color: #e2a03f;
+  border-color: #e2a03f; }
+
+.alert-success {
+  color: #fff;
+  background-color: #8dbf42;
+  border-color: #8dbf42; }
+
+.alert-info {
+  color: #fff;
+  background-color: #2196f3;
+  border-color: #2196f3; }
+
+.alert-danger {
+  color: #fff;
+  background-color: #e7515a;
+  border-color: #e7515a; }
+
+.alert-dark {
+  color: #fff;
+  background-color: #3b3f5c;
+  border-color: #3b3f5c; }
+
+/*Outline Alerts*/
+.alert-outline-primary {
+  border-color: #1b55e2;
+  border-radius: 5px; }
+
+.alert-outline-warning {
+  border-color: #dea82a;
+  border-radius: 5px; }
+
+.alert-outline-success {
+  border-color: #8dbf42;
+  border-radius: 5px; }
+
+.alert-outline-info {
+  border-color: #009eda;
+  border-radius: 5px; }
+
+.alert-outline-danger {
+  border-color: #e7515a;
+  border-radius: 5px; }
+
+.alert-outline-dark {
+  border-color: #454656;
+  border-radius: 5px; }
+
+.alert.alert-light .close {
+  color: #0e1726; }
+
+.alert.solid-alert-3 .close, .alert.solid-alert-4 .close {
+  color: #000; }
+
+.hide-default {
+  display: none; }
+
+/*      Light Alert         */
+.alert-light-primary {
+  color: #1b55e2;
+  background-color: #c2d5ff;
+  border-color: #1b55e2; }
+  .alert-light-primary svg.close {
+    color: #1b55e2; }
+
+.alert-light-warning {
+  color: #e2a03f;
+  background-color: #ffeccb;
+  border-color: #e2a03f; }
+  .alert-light-warning svg.close {
+    color: #e2a03f; }
+
+.alert-light-success {
+  color: #8dbf42;
+  background-color: #e6ffbf;
+  border-color: #8dbf42; }
+  .alert-light-success svg.close {
+    color: #8dbf42; }
+
+.alert-light-info {
+  color: #2196f3;
+  background-color: #bae7ff;
+  border-color: #2196f3; }
+  .alert-light-info svg.close {
+    color: #2196f3; }
+
+.alert-light-danger {
+  color: #e7515a;
+  background-color: #ffe1e2;
+  border-color: #e7515a; }
+  .alert-light-danger svg.close {
+    color: #e7515a; }
+
+.alert-light-dark {
+  color: #3b3f5c;
+  background-color: #acb0c3;
+  border-color: #3b3f5c; }
+  .alert-light-dark svg.close {
+    color: #3b3f5c; }
+
+/*  Background Alerts      */
+.alert-background {
+  color: #fff;
+  background: #fff url(../../img/ab-1.jpeg) no-repeat center center;
+  background-size: cover; }
+
+/*  Gradient Alerts      */
+.alert-gradient {
+  color: #fff;
+  border: none;
+  background-size: cover;
+  background-image: linear-gradient(135deg, #bc1a4e 0%, #004fe6 100%); }
+
+/* Custom Alerts */
+/* Default */
+.custom-alert-1 {
+  background-color: #5c1ac3;
+  border-color: #5c1ac3;
+  border-radius: 5px;
+  color: #fff; }
+  .custom-alert-1 .alert-icon {
+    margin-right: 25px; }
+  .custom-alert-1 .media-body {
+    display: flex;
+    justify-content: space-between; }
+  .custom-alert-1 .alert-text {
+    margin-right: 10px; }
+    .custom-alert-1 .alert-text strong, .custom-alert-1 .alert-text span {
+      vertical-align: sub; }
+
+/*  Alert with Icon */
+.alert-icon-left {
+  border-left: 64px solid; }
+  .alert-icon-left svg:not(.close) {
+    color: #fff;
+    width: 4rem;
+    left: -4rem;
+    text-align: center;
+    position: absolute;
+    top: 50%;
+    margin-top: -10px;
+    font-size: 1.25rem;
+    font-weight: 400;
+    line-height: 1;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale; }
+
+.alert-icon-right {
+  border-right: 64px solid; }
+  .alert-icon-right svg:not(.close) {
+    color: #fff;
+    width: 4rem;
+    right: -4rem;
+    text-align: center;
+    position: absolute;
+    top: 50%;
+    margin-top: -10px;
+    font-size: 1.25rem;
+    font-weight: 400;
+    line-height: 1;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale; }
+  .alert-icon-right i {
+    float: left;
+    margin-right: 7px; }
+
+.alert[class*=alert-arrow-]:before {
+  content: '';
+  display: inline-block;
+  position: absolute;
+  top: 50%;
+  left: 0;
+  border-left: 8px solid;
+  border-top: 8px solid transparent;
+  border-bottom: 8px solid transparent;
+  border-left-color: inherit;
+  margin-top: -8px; }
+
+.alert.alert-arrow-right:before {
+  left: auto;
+  right: 0;
+  border-left: 0;
+  border-right: 8px solid;
+  border-right-color: inherit; }
+
+@media (max-width: 575px) {
+  .custom-alert-1 .media-body {
+    display: block; }
+  .alert .btn {
+    margin-top: 8px; } }
diff --git a/static/css/elements/avatar.css b/static/css/elements/avatar.css
new file mode 100644
index 00000000..81cf3c26
--- /dev/null
+++ b/static/css/elements/avatar.css
@@ -0,0 +1,94 @@
+/*
+	===============================
+			@Import	Function
+	===============================
+*/
+/*
+	===============================
+			@Import	Mixins
+	===============================
+*/
+.avatar {
+  position: relative;
+  display: inline-block;
+  width: 3rem;
+  height: 3rem;
+  font-size: 1rem; }
+
+.avatar--group {
+  display: inline-flex;
+  margin-right: 15px; }
+
+.avatar img {
+  width: 100%;
+  height: 100%;
+  -o-object-fit: cover;
+  object-fit: cover; }
+
+.avatar .avatar-title {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  background-color: #bfc9d4;
+  color: #fff; }
+
+.avatar--group .avatar-xl {
+  margin-left: -1.28125rem; }
+
+.avatar--group .avatar {
+  margin-left: -.75rem; }
+
+.avatar--group img, .avatar--group .avatar .avatar-title {
+  border: 2px solid #ffffff; }
+
+.avatar-xl {
+  width: 5.125rem;
+  height: 5.125rem;
+  font-size: 1.70833rem; }
+
+.avatar-lg {
+  width: 4rem;
+  height: 4rem;
+  font-size: 1.33333rem; }
+
+.avatar-sm {
+  width: 2.5rem;
+  height: 2.5rem;
+  font-size: .83333rem; }
+
+/*
+	Indicators
+*/
+.avatar-indicators:before {
+  content: "";
+  position: absolute;
+  bottom: 1%;
+  right: 5%;
+  width: 28%;
+  height: 28%;
+  border-radius: 50%;
+  border: 3px solid #fff; }
+
+.avatar-offline:before {
+  background-color: #bfc9d4; }
+
+.avatar-online:before {
+  background-color: #009688; }
+
+.avatar.translateY-axis img, .avatar.translateY-axis .avatar-title {
+  -webkit-transition: all 0.35s ease;
+  transition: all 0.35s ease; }
+
+.avatar.translateY-axis img:hover, .avatar.translateY-axis .avatar-title:hover {
+  -webkit-transform: translateY(-5px) scale(1.02);
+  transform: translateY(-5px) scale(1.02); }
+
+.avatar.translateX-axis img, .avatar.translateX-axis .avatar-title {
+  -webkit-transition: all 0.35s ease;
+  transition: all 0.35s ease; }
+
+.avatar.translateX-axis img:hover, .avatar.translateX-axis .avatar-title:hover {
+  -webkit-transform: translateX(5px) scale(1.02);
+  transform: translateX(5px) scale(1.02); }
diff --git a/static/css/elements/breadcrumb.css b/static/css/elements/breadcrumb.css
new file mode 100644
index 00000000..db6daeed
--- /dev/null
+++ b/static/css/elements/breadcrumb.css
@@ -0,0 +1,242 @@
+/*
+	===============================
+			@Import	Function
+	===============================
+*/
+/*
+	===============================
+			@Import	Mixins
+	===============================
+*/
+.breadcrumb {
+  background-color: transparent;
+  margin-bottom: 0; }
+
+/*
+    Breadcrumb 1
+*/
+.breadcrumb-one {
+  display: inline-block; }
+  .breadcrumb-one .breadcrumb {
+    padding: 0;
+    vertical-align: text-bottom; }
+  .breadcrumb-one .breadcrumb-item {
+    align-self: center; }
+    .breadcrumb-one .breadcrumb-item a {
+      color: #888ea8;
+      vertical-align: text-bottom; }
+      .breadcrumb-one .breadcrumb-item a svg {
+        width: 18px;
+        height: 18px;
+        vertical-align: sub;
+        fill: #e0e6ed; }
+    .breadcrumb-one .breadcrumb-item.active a {
+      color: #515365; }
+    .breadcrumb-one .breadcrumb-item span {
+      vertical-align: text-bottom; }
+    .breadcrumb-one .breadcrumb-item.active {
+      color: #3b3f5c;
+      font-weight: 600; }
+    .breadcrumb-one .breadcrumb-item + .breadcrumb-item {
+      padding: 0px; }
+      .breadcrumb-one .breadcrumb-item + .breadcrumb-item::before {
+        color: #888ea8;
+        padding: 0 6px 0 6px; }
+
+/*
+    Breadcrumb 2
+*/
+.breadcrumb-two .breadcrumb {
+  list-style: none;
+  overflow: hidden;
+  padding: 0; }
+  .breadcrumb-two .breadcrumb li {
+    float: left; }
+
+.breadcrumb-two .breadcrumb-item + .breadcrumb-item::before {
+  color: #fff; }
+
+.breadcrumb-two .breadcrumb li a {
+  color: #1b55e2;
+  text-decoration: none;
+  padding: 6px 0 6px 40px;
+  background: #ebedf2;
+  position: relative;
+  display: block;
+  float: left; }
+  .breadcrumb-two .breadcrumb li a:after {
+    content: " ";
+    display: block;
+    width: 0;
+    height: 0;
+    border-top: 50px solid transparent;
+    /* Go big on the size, and let overflow hide */
+    border-bottom: 50px solid transparent;
+    border-left: 30px solid #ebedf2;
+    position: absolute;
+    top: 50%;
+    margin-top: -50px;
+    left: 100%;
+    z-index: 2; }
+  .breadcrumb-two .breadcrumb li a:before {
+    content: " ";
+    display: block;
+    width: 0;
+    height: 0;
+    border-top: 50px solid transparent;
+    /* Go big on the size, and let overflow hide */
+    border-bottom: 50px solid transparent;
+    border-left: 30px solid #ebedf2;
+    position: absolute;
+    top: 50%;
+    margin-top: -50px;
+    margin-left: 1px;
+    left: 100%;
+    z-index: 1; }
+
+.breadcrumb-two .breadcrumb li:last-child a:before {
+  margin-left: -6px; }
+
+.breadcrumb-two .breadcrumb li:first-child a {
+  padding-left: 10px;
+  border-top-left-radius: 6px;
+  border-bottom-left-radius: 6px; }
+
+.breadcrumb-two .breadcrumb li.active a {
+  background: #1b55e2;
+  color: #fff; }
+  .breadcrumb-two .breadcrumb li.active a:after {
+    border-left-color: #1b55e2; }
+
+.breadcrumb-two .breadcrumb li:last-child a {
+  pointer-events: none;
+  cursor: default;
+  padding-left: 20px;
+  padding-right: 20px;
+  border-top-right-radius: 6px;
+  border-bottom-right-radius: 6px; }
+  .breadcrumb-two .breadcrumb li:last-child a:after {
+    border: none; }
+
+/*
+    Breadcrumb 3
+*/
+.breadcrumb-three {
+  padding: 0;
+  background-color: transparent; }
+  .breadcrumb-three .breadcrumb {
+    padding: 0; }
+  .breadcrumb-three .breadcrumb-item {
+    color: #888ea8;
+    padding: 9px 9px;
+    background: #f1f2f3;
+    border-bottom-right-radius: 13px;
+    border-top-right-radius: 13px; }
+    .breadcrumb-three .breadcrumb-item.active {
+      color: #1b55e2;
+      font-weight: 600; }
+    .breadcrumb-three .breadcrumb-item + .breadcrumb-item::before {
+      color: #515365;
+      font-weight: 700;
+      font-size: 13px;
+      content: '';
+      padding: 0px 6px;
+      vertical-align: sub; }
+
+/*
+    Breadcrumb 4
+*/
+.breadcrumb-four .breadcrumb {
+  display: inline-flex;
+  padding: 0;
+  background-color: transparent;
+  margin-bottom: 0; }
+  .breadcrumb-four .breadcrumb li {
+    position: relative;
+    font-size: 14px;
+    background: #fff;
+    margin-right: 20px;
+    margin-bottom: 6px;
+    padding: 7px 10px;
+    border-radius: 10px;
+    border: 1px solid #e0e6ed;
+    -webkit-box-shadow: 2px 5px 17px 0 rgba(31, 45, 61, 0.1);
+    box-shadow: 0px 1px 8px 0px rgba(31, 45, 61, 0.1); }
+    .breadcrumb-four .breadcrumb li:last-child {
+      margin-right: 0; }
+    .breadcrumb-four .breadcrumb li:not(:first-child):before {
+      content: '';
+      position: absolute;
+      border-radius: 50%;
+      height: 4px;
+      width: 4px;
+      background: #1b55e2;
+      left: -13px;
+      top: 50%; }
+    .breadcrumb-four .breadcrumb li a {
+      color: #555;
+      vertical-align: sub; }
+      .breadcrumb-four .breadcrumb li a:hover {
+        text-decoration: none;
+        color: #4d7496; }
+    .breadcrumb-four .breadcrumb li:not(:first-child) svg {
+      margin-right: 5px; }
+    .breadcrumb-four .breadcrumb li svg {
+      color: #6f6f6f;
+      vertical-align: text-bottom;
+      width: 20px; }
+    .breadcrumb-four .breadcrumb li.active a {
+      color: #1b55e2 !important;
+      font-weight: 600; }
+    .breadcrumb-four .breadcrumb li.active svg {
+      color: #1b55e2; }
+    .breadcrumb-four .breadcrumb li span {
+      vertical-align: text-bottom; }
+
+/*
+    Breadcrumb 5
+*/
+.breadcrumb-five .breadcrumb {
+  padding: 0;
+  background-color: transparent;
+  margin-bottom: 0; }
+  .breadcrumb-five .breadcrumb li {
+    position: relative;
+    font-size: 14px;
+    margin-right: 20px;
+    padding: 0 7px; }
+    .breadcrumb-five .breadcrumb li:last-child {
+      margin-right: 0; }
+    .breadcrumb-five .breadcrumb li:not(:first-child):before {
+      content: '';
+      position: absolute;
+      border-radius: 50%;
+      height: 4px;
+      width: 4px;
+      background: #1b55e2;
+      left: -13px;
+      top: 50%; }
+    .breadcrumb-five .breadcrumb li a {
+      color: #555;
+      vertical-align: sub; }
+      .breadcrumb-five .breadcrumb li a:hover {
+        text-decoration: none;
+        color: #4d7496; }
+    .breadcrumb-five .breadcrumb li svg {
+      color: #6f6f6f;
+      vertical-align: bottom;
+      width: 20px; }
+    .breadcrumb-five .breadcrumb li.active a {
+      color: #1b55e2 !important;
+      font-weight: 600; }
+
+@media (max-width: 575px) {
+  .breadcrumb-two .breadcrumb li {
+    padding: 0; }
+    .breadcrumb-two .breadcrumb li a {
+      padding: 6px 10px 6px 10px;
+      margin-bottom: 5px; }
+      .breadcrumb-two .breadcrumb li a:after {
+        display: none; }
+  .breadcrumb-two .breadcrumb-item + .breadcrumb-item::before, .breadcrumb-two .breadcrumb li a:before {
+    display: none; } }
diff --git a/static/css/elements/color_library.css b/static/css/elements/color_library.css
new file mode 100644
index 00000000..b3ef6ad5
--- /dev/null
+++ b/static/css/elements/color_library.css
@@ -0,0 +1,45 @@
+.widget {
+    border: none; 
+    box-shadow: none; 
+}
+/*---------Palette Box--------*/
+.color-box {
+    display: flex;
+    align-items: center;
+    padding: 10px;
+    border: 1px solid #e0e6ed;
+    border-radius: 6px;
+    -webkit-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.05);
+    -moz-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.05);
+    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.05);
+    background: white;
+}
+.color-box .cl-example {
+    width: 80px;
+    height: 80px;
+    margin-right: 20px;
+    border-radius: 6px;
+    -webkit-transition: all 0.35s ease;
+    transition: all 0.35s ease;
+    margin-top: -10px;
+    margin-left: -10px;
+    margin-bottom: -10px;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+}
+.color-box:hover .cl-example {
+    -webkit-transform: scale(1.09);
+    transform: scale(1.09);
+}
+.color-box .cl-info { flex: 1; }
+.color-box .cl-title {
+    font-size: 16px;
+    font-weight: 600;
+    margin-bottom: 0;
+    color: #3b3f5c;
+}
+.color-box .cl-info span {
+    font-size: 14px;
+    color: #888ea8;
+    font-weight: 600;
+}
\ No newline at end of file
diff --git a/static/css/elements/custom-pagination.css b/static/css/elements/custom-pagination.css
new file mode 100644
index 00000000..253be435
--- /dev/null
+++ b/static/css/elements/custom-pagination.css
@@ -0,0 +1,265 @@
+/*
+	===============================
+			@Import	Function
+	===============================
+*/
+/*
+	===============================
+			@Import	Mixins
+	===============================
+*/
+/*
+    ============================
+        Pagination container
+    =============================
+*/
+.paginating-container {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 0; }
+  .paginating-container .prev svg, .paginating-container .next svg {
+    width: 18px;
+    height: 18px;
+    vertical-align: text-bottom; }
+  .paginating-container .pagination {
+    margin-bottom: 0; }
+  .paginating-container li {
+    padding: 10px 0;
+    font-weight: 600;
+    color: #3b3f5c;
+    border-radius: 4px; }
+    .paginating-container li a {
+      padding: 10px 15px;
+      font-weight: 600;
+      color: #3b3f5c; }
+    .paginating-container li:not(:last-child) {
+      margin-right: 4px; }
+
+/*
+    Default Style
+*/
+.pagination-default li {
+  border: 2px solid #e0e6ed; }
+  .pagination-default li:hover {
+    border: 2px solid #1b55e2 !important; }
+    .pagination-default li:hover a {
+      color: #1b55e2; }
+  .pagination-default li.active {
+    border: 2px solid #1b55e2 !important;
+    color: #1b55e2; }
+  .pagination-default li a.active:hover, .pagination-default li.active a {
+    color: #1b55e2; }
+
+.pagination-default .prev {
+  border: 2px solid #e0e6ed; }
+  .pagination-default .prev:hover {
+    border: 2px solid #1b55e2; }
+    .pagination-default .prev:hover a, .pagination-default .prev:hover svg {
+      color: #1b55e2; }
+
+.pagination-default .next {
+  border: 2px solid #e0e6ed; }
+  .pagination-default .next:hover {
+    border: 2px solid #1b55e2; }
+    .pagination-default .next:hover a, .pagination-default .next:hover svg {
+      color: #1b55e2; }
+
+/* 
+    Solid Style
+*/
+.pagination-solid li {
+  background-color: #e0e6ed; }
+  .pagination-solid li:hover a {
+    color: #1b55e2; }
+  .pagination-solid li.active {
+    background-color: #1b55e2 !important;
+    color: #fff; }
+  .pagination-solid li a.active:hover, .pagination-solid li.active a {
+    color: #fff; }
+
+.pagination-solid .prev {
+  background-color: #e0e6ed; }
+  .pagination-solid .prev:hover {
+    background-color: #1b55e2; }
+    .pagination-solid .prev:hover a, .pagination-solid .prev:hover svg {
+      color: #fff; }
+
+.pagination-solid .next {
+  background-color: #e0e6ed; }
+  .pagination-solid .next:hover {
+    background-color: #1b55e2; }
+    .pagination-solid .next:hover a, .pagination-solid .next:hover svg {
+      color: #fff; }
+
+/*    
+    ===================
+        No Spacing
+    ===================
+*/
+.pagination-no_spacing {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 0; }
+  .pagination-no_spacing .prev {
+    background-color: #e0e6ed;
+    border-radius: 50%;
+    padding: 10px 11px;
+    margin-right: 5px; }
+    .pagination-no_spacing .prev:hover {
+      background-color: #1b55e2; }
+      .pagination-no_spacing .prev:hover svg {
+        color: #fff; }
+  .pagination-no_spacing .next {
+    background-color: #e0e6ed;
+    border-radius: 50%;
+    padding: 10px 11px;
+    margin-left: 5px; }
+    .pagination-no_spacing .next:hover {
+      background-color: #1b55e2; }
+      .pagination-no_spacing .next:hover svg {
+        color: #fff; }
+  .pagination-no_spacing .prev svg, .pagination-no_spacing .next svg {
+    width: 18px;
+    height: 18px;
+    vertical-align: text-bottom; }
+  .pagination-no_spacing .pagination {
+    margin-bottom: 0; }
+  .pagination-no_spacing li {
+    background-color: #e0e6ed;
+    padding: 10px 0;
+    font-weight: 600;
+    color: #3b3f5c; }
+    .pagination-no_spacing li:first-child {
+      border-top-left-radius: 50px;
+      border-bottom-left-radius: 50px; }
+    .pagination-no_spacing li:last-child {
+      border-top-right-radius: 50px;
+      border-bottom-right-radius: 50px; }
+    .pagination-no_spacing li a {
+      padding: 10px 15px;
+      font-weight: 600;
+      color: #3b3f5c; }
+      .pagination-no_spacing li a.active {
+        background-color: #1b55e2 !important;
+        border-radius: 6px;
+        color: #fff; }
+        .pagination-no_spacing li a.active:hover {
+          color: #fff; }
+      .pagination-no_spacing li a:hover {
+        color: #1b55e2; }
+
+/*
+    =======================
+        Custom Pagination
+    =======================
+*/
+/*
+    Custom Solid
+*/
+.pagination-custom_solid {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 0; }
+  .pagination-custom_solid .prev {
+    background-color: #e0e6ed;
+    border-radius: 50%;
+    padding: 10px 11px;
+    margin-right: 25px; }
+    .pagination-custom_solid .prev:hover {
+      background-color: #1b55e2; }
+      .pagination-custom_solid .prev:hover svg {
+        color: #fff; }
+  .pagination-custom_solid .next {
+    background-color: #e0e6ed;
+    border-radius: 50%;
+    padding: 10px 11px;
+    margin-left: 25px; }
+    .pagination-custom_solid .next:hover {
+      background-color: #1b55e2; }
+      .pagination-custom_solid .next:hover svg {
+        color: #fff; }
+  .pagination-custom_solid .prev svg, .pagination-custom_solid .next svg {
+    width: 18px;
+    height: 18px;
+    vertical-align: text-bottom; }
+  .pagination-custom_solid .pagination {
+    margin-bottom: 0; }
+  .pagination-custom_solid li {
+    background-color: #e0e6ed;
+    padding: 10px 0;
+    font-weight: 600;
+    color: #3b3f5c; }
+    .pagination-custom_solid li:first-child {
+      border-top-left-radius: 50px;
+      border-bottom-left-radius: 50px; }
+    .pagination-custom_solid li:last-child {
+      border-top-right-radius: 50px;
+      border-bottom-right-radius: 50px; }
+    .pagination-custom_solid li a {
+      padding: 10px 15px;
+      font-weight: 600;
+      color: #3b3f5c; }
+      .pagination-custom_solid li a.active {
+        background-color: #1b55e2 !important;
+        border-radius: 6px;
+        color: #fff; }
+        .pagination-custom_solid li a.active:hover {
+          color: #fff; }
+      .pagination-custom_solid li a:hover {
+        color: #1b55e2; }
+
+/*
+    Custom Outline
+*/
+.pagination-custom_outline {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 0; }
+  .pagination-custom_outline .prev {
+    border: 2px solid #e0e6ed;
+    border-radius: 50%;
+    padding: 8px 11px;
+    margin-right: 25px; }
+    .pagination-custom_outline .prev:hover {
+      border: 2px solid #1b55e2; }
+      .pagination-custom_outline .prev:hover svg {
+        color: #1b55e2; }
+  .pagination-custom_outline .next {
+    border: 2px solid #e0e6ed;
+    border-radius: 50%;
+    padding: 8px 11px;
+    margin-left: 25px; }
+    .pagination-custom_outline .next:hover {
+      border: 2px solid #1b55e2; }
+      .pagination-custom_outline .next:hover svg {
+        color: #1b55e2; }
+  .pagination-custom_outline .prev svg, .pagination-custom_outline .next svg {
+    width: 16px;
+    height: 16px;
+    vertical-align: text-bottom; }
+  .pagination-custom_outline .pagination {
+    margin-bottom: 0; }
+  .pagination-custom_outline li {
+    padding: 10px 0;
+    font-weight: 600;
+    color: #3b3f5c;
+    border: 1px solid #e0e6ed; }
+    .pagination-custom_outline li.active {
+      background-color: #e0e6ed; }
+    .pagination-custom_outline li:first-child {
+      border-top-left-radius: 50px;
+      border-bottom-left-radius: 50px; }
+    .pagination-custom_outline li:last-child {
+      border-top-right-radius: 50px;
+      border-bottom-right-radius: 50px; }
+    .pagination-custom_outline li a {
+      padding: 10px 15px;
+      font-weight: 600;
+      color: #3b3f5c; }
+      .pagination-custom_outline li a:hover {
+        color: #1b55e2; }
+    .pagination-custom_outline li.active a {
+      background-color: #ffffff;
+      border: 2px solid #1b55e2 !important;
+      border-radius: 6px;
+      color: #1b55e2; }
diff --git a/static/css/elements/custom-tree_view.css b/static/css/elements/custom-tree_view.css
new file mode 100644
index 00000000..b5503898
--- /dev/null
+++ b/static/css/elements/custom-tree_view.css
@@ -0,0 +1,125 @@
+/*
+	===============================
+			@Import	Function
+	===============================
+*/
+/*
+	===============================
+			@Import	Mixins
+	===============================
+*/
+/*  Tree View   */
+#myUL {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  color: #3b3f5c;
+  font-weight: 600; }
+  #myUL ul {
+    list-style-type: none; }
+
+.caret {
+  cursor: pointer;
+  -webkit-user-select: none;
+  /* Safari 3.1+ */
+  -moz-user-select: none;
+  /* Firefox 2+ */
+  -ms-user-select: none;
+  /* IE 10+ */
+  user-select: none;
+  font-size: 13px;
+  color: #0e1726;
+  text-transform: capitalize; }
+  .caret.caret-down::before {
+    content: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="%232b50ed" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-folder-plus"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path><line x1="12" y1="11" x2="12" y2="17"></line><line x1="9" y1="14" x2="15" y2="14"></line></svg>'); }
+  .caret::before {
+    content: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="%232b50ed" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-folder-minus"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path><line x1="9" y1="14" x2="15" y2="14"></line></svg>');
+    color: #888ea8;
+    display: inline-block;
+    margin-right: 6px;
+    vertical-align: sub; }
+
+.nested {
+  display: none;
+  padding-left: 28px; }
+  .nested li {
+    margin-top: 8px;
+    margin-bottom: 8px;
+    color: #5c1ac3;
+    font-size: 13px; }
+
+.active {
+  display: block; }
+
+.file-tree {
+  margin-bottom: 0;
+  padding-left: 20px;
+  list-style: none;
+  overflow: hidden; }
+  .file-tree * {
+    list-style-type: none; }
+  .file-tree ul {
+    list-style: none;
+    display: none;
+    padding-left: 30px; }
+  .file-tree li {
+    position: relative;
+    padding: 5px 0;
+    border-radius: 0.25rem;
+    cursor: auto;
+    white-space: nowrap;
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: #0e1726; }
+  .file-tree .file-tree-folder {
+    -webkit-transition: all 0.2s;
+    -moz-transition: all 0.2s;
+    transition: all 0.2s;
+    -webkit-transition-delay: 0s;
+    -moz-transition-delay: 0s;
+    transition-delay: 0s;
+    cursor: pointer; }
+    .file-tree .file-tree-folder::before {
+      content: "\e9b9";
+      font-size: 1.25rem; }
+    .file-tree .file-tree-folder::after {
+      -webkit-transition: all 0.2s;
+      -moz-transition: all 0.2s;
+      transition: all 0.2s;
+      -webkit-transition-delay: 0s;
+      -moz-transition-delay: 0s;
+      transition-delay: 0s;
+      position: absolute;
+      top: .4rem;
+      left: -2em;
+      content: "\f182";
+      display: block;
+      text-align: center;
+      font-family: 'flaticon' !important;
+      content: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="%232b50ed" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>');
+      font-size: 10px;
+      color: #2196f3; }
+    .file-tree .file-tree-folder.open::after {
+      -webkit-transform: rotate(180deg);
+      -moz-transform: rotate(180deg);
+      transform: rotate(180deg); }
+  .file-tree li.file-tree-folder::before {
+    display: inline-block;
+    text-align: center;
+    width: 30px;
+    margin-right: .25rem;
+    vertical-align: middle;
+    font-size: 1rem;
+    color: #2196f3;
+    content: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="%232b50ed" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-folder"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>'); }
+  .file-tree li::before {
+    content: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="%232b50ed" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>');
+    font-size: 1rem;
+    color: #2196f3;
+    margin-right: 9px;
+    position: relative;
+    top: 2px; }
+
+@media (max-width: 767px) {
+  .custo-radio {
+    margin-top: 5px; } }
diff --git a/static/css/elements/custom-typography.css b/static/css/elements/custom-typography.css
new file mode 100644
index 00000000..f677afae
--- /dev/null
+++ b/static/css/elements/custom-typography.css
@@ -0,0 +1,28 @@
+.element-background {
+    padding: 15px;
+    border: 1px solid #bfc9d4;
+    border-radius: 6px;
+}
+.font-family-showcase {
+    width: 18rem;
+    border: 1px solid #e0e6ed;
+    border-radius: 6px;
+    background: #fff;
+    margin: 0 auto;
+}
+.font-family-showcase .font-family-text { padding: 20px; border-bottom: 1px solid #e0e6ed; }
+.font-family-showcase .font-family-text p { font-size: 40px; margin-bottom: 0; }
+.font-family-showcase .font-family-info { padding: 20px; background-color: #ebedf2; }
+.font-family-showcase .font-family-info h5 { font-size: 17px; margin-bottom: 0; }
+.font-family-showcase .font-family-info a {
+    font-weight: 600;
+    font-size: 13px;
+    color: #1b55e2;
+}
+.font-family-showcase .font-family-info .font-family-link {
+    margin-top: 30px;
+    text-align: center;
+}
+@media (max-width: 575px) {
+    .font-family-showcase { width: auto; }
+}
\ No newline at end of file
diff --git a/static/css/elements/infobox.css b/static/css/elements/infobox.css
new file mode 100644
index 00000000..96119dcf
--- /dev/null
+++ b/static/css/elements/infobox.css
@@ -0,0 +1,131 @@
+/*
+	===============================
+			@Import	Function
+	===============================
+*/
+/*
+	===============================
+			@Import	Mixins
+	===============================
+*/
+/*
+    Infobox 1
+*/
+.infobox-1 {
+  border: 1px solid #e0e6ed;
+  width: 50%;
+  padding: 25px;
+  border-radius: 6px;
+  -webkit-box-shadow: 0px 2px 10px 1px rgba(31, 45, 61, 0.1);
+  box-shadow: 0px 2px 10px 1px rgba(31, 45, 61, 0.1);
+  margin-right: auto;
+  margin-left: auto; }
+  .infobox-1 .info-icon svg {
+    width: 50px;
+    height: 50px;
+    stroke-width: 1px;
+    margin-bottom: 20px;
+    color: #1b55e2; }
+  .infobox-1 .info-heading {
+    font-weight: 600;
+    font-size: 19px;
+    margin-bottom: 14px;
+    letter-spacing: 2px; }
+  .infobox-1 .info-text {
+    font-size: 15px;
+    color: #888ea8;
+    margin-bottom: 15px; }
+  .infobox-1 .info-link {
+    color: #1b55e2;
+    font-weight: 600; }
+    .infobox-1 .info-link svg {
+      width: 15px;
+      height: 15px; }
+
+/*
+    Infobox 2
+*/
+.infobox-2 {
+  border: 1px solid #e0e6ed;
+  width: 50%;
+  padding: 25px;
+  border-radius: 6px;
+  background: #3b3f5c;
+  -webkit-box-shadow: 0px 2px 10px 1px rgba(31, 45, 61, 0.1);
+  box-shadow: 0px 2px 10px 1px rgba(31, 45, 61, 0.1);
+  margin-right: auto;
+  margin-left: auto; }
+  .infobox-2 .info-icon {
+    border-radius: 50%;
+    background: #888ea8;
+    display: inline-block;
+    padding: 15px;
+    margin-bottom: 20px; }
+    .infobox-2 .info-icon svg {
+      width: 50px;
+      height: 50px;
+      stroke-width: 1px;
+      color: #d3d3d3; }
+  .infobox-2 .info-heading {
+    font-weight: 600;
+    font-size: 19px;
+    margin-bottom: 14px;
+    letter-spacing: 2px;
+    color: #fff; }
+  .infobox-2 .info-text {
+    font-size: 15px;
+    color: #e0e6ed;
+    margin-bottom: 15px; }
+  .infobox-2 .info-link {
+    color: #2196f3;
+    font-weight: 600; }
+    .infobox-2 .info-link svg {
+      width: 15px;
+      height: 15px; }
+
+/*
+    Infobox 3
+*/
+.infobox-3 {
+  position: relative;
+  border: 1px solid #e0e6ed;
+  width: 50%;
+  margin-top: 30px;
+  padding: 50px 25px 25px 25px;
+  border-radius: 6px;
+  -webkit-box-shadow: 0px 2px 10px 1px rgba(31, 45, 61, 0.1);
+  box-shadow: 0px 2px 10px 1px rgba(31, 45, 61, 0.1);
+  margin-right: auto;
+  margin-left: auto; }
+  .infobox-3 .info-icon {
+    position: absolute;
+    margin-bottom: 20px;
+    background: #1b55e2;
+    display: inline-block;
+    top: -31px;
+    padding: 6px;
+    border-radius: 6px; }
+    .infobox-3 .info-icon svg {
+      width: 50px;
+      height: 50px;
+      stroke-width: 1px;
+      color: #fff; }
+  .infobox-3 .info-heading {
+    font-weight: 600;
+    font-size: 19px;
+    margin-bottom: 14px;
+    letter-spacing: 2px; }
+  .infobox-3 .info-text {
+    font-size: 15px;
+    color: #888ea8;
+    margin-bottom: 15px; }
+  .infobox-3 .info-link {
+    color: #1b55e2;
+    font-weight: 600; }
+    .infobox-3 .info-link svg {
+      width: 15px;
+      height: 15px; }
+
+@media (max-width: 575px) {
+  .infobox-1, .infobox-2, .infobox-3 {
+    width: auto; } }
diff --git a/static/css/elements/miscellaneous.css b/static/css/elements/miscellaneous.css
new file mode 100644
index 00000000..72be7ade
--- /dev/null
+++ b/static/css/elements/miscellaneous.css
@@ -0,0 +1,16 @@
+/*
+	===============================
+			@Import	Function
+	===============================
+*/
+/*
+	===============================
+			@Import	Mixins
+	===============================
+*/
+.jumbotron p {
+  text-align: left; }
+
+.display-4 {
+  word-wrap: break-word;
+  font-size: 45px; }
diff --git a/static/css/elements/popover.css b/static/css/elements/popover.css
new file mode 100644
index 00000000..f548be49
--- /dev/null
+++ b/static/css/elements/popover.css
@@ -0,0 +1,130 @@
+/*
+	===============================
+			@Import	Function
+	===============================
+*/
+/*
+	===============================
+			@Import	Mixins
+	===============================
+*/
+.popovers-section h6 {
+  color: #3b3f5c;
+  font-size: 0.875rem;
+  margin-top: 25px;
+  margin-bottom: 20px; }
+
+.popover {
+  border: 1px solid #ebedf2;
+  border-radius: 4px; }
+
+/*
+	Popovers
+*/
+.popover-primary {
+  border-color: #c2d5ff; }
+
+.popover-success {
+  border-color: #e6ffbf; }
+
+.popover-info {
+  border-color: #bae7ff; }
+
+.popover-danger {
+  border-color: #ffe1e2; }
+
+.popover-warning {
+  border-color: #ffeccb; }
+
+.popover-secondary {
+  border-color: #dccff7; }
+
+.popover-dark {
+  border-color: #acb0c3; }
+
+/* 		popover Arrow 	*/
+.popover-primary .arrow:after, .popover-primary .arrow:before {
+  border-top-color: #c2d5ff; }
+
+.popover-success .arrow:after, .popover-success .arrow:before {
+  border-top-color: #e6ffbf; }
+
+.popover-info .arrow:after, .popover-info .arrow:before {
+  border-top-color: #bae7ff; }
+
+.popover-danger .arrow:after, .popover-danger .arrow:before {
+  border-top-color: #ffe1e2; }
+
+.popover-warning .arrow:after, .popover-warning .arrow:before {
+  border-top-color: #ffeccb; }
+
+.popover-secondary .arrow:after, .popover-secondary .arrow:before {
+  border-top-color: #dccff7; }
+
+.popover-dark .arrow:after, .popover-dark .arrow:before {
+  border-top-color: #acb0c3; }
+
+/* 		popover Header 		*/
+.popover-primary .popover-header {
+  background-color: #c2d5ff;
+  border: none;
+  color: #1b55e2; }
+
+.popover-success .popover-header {
+  background-color: #e6ffbf;
+  border: none;
+  color: #8dbf42; }
+
+.popover-info .popover-header {
+  background-color: #bae7ff;
+  border: none;
+  color: #2196f3; }
+
+.popover-danger .popover-header {
+  background-color: #ffe1e2;
+  border: none;
+  color: #e7515a; }
+
+.popover-warning .popover-header {
+  background-color: #ffeccb;
+  border: none;
+  color: #e2a03f; }
+
+.popover-secondary .popover-header {
+  background-color: #dccff7;
+  border: none;
+  color: #5c1ac3; }
+
+.popover-dark .popover-header {
+  background-color: #acb0c3;
+  border: none;
+  color: #3b3f5c; }
+
+/*  	Popover Body 	*/
+.popover-primary .popover-body {
+  background-color: #c2d5ff;
+  color: #1b55e2; }
+
+.popover-success .popover-body {
+  background-color: #e6ffbf;
+  color: #8dbf42; }
+
+.popover-info .popover-body {
+  background-color: #bae7ff;
+  color: #2196f3; }
+
+.popover-danger .popover-body {
+  background-color: #ffe1e2;
+  color: #e7515a; }
+
+.popover-warning .popover-body {
+  background-color: #ffeccb;
+  color: #e2a03f; }
+
+.popover-secondary .popover-body {
+  background-color: #dccff7;
+  color: #5c1ac3; }
+
+.popover-dark .popover-body {
+  background-color: #acb0c3;
+  color: #3b3f5c; }
diff --git a/static/css/elements/search.css b/static/css/elements/search.css
new file mode 100644
index 00000000..2a43e405
--- /dev/null
+++ b/static/css/elements/search.css
@@ -0,0 +1,213 @@
+/*
+	===============================
+			@Import	Function
+	===============================
+*/
+/*
+	===============================
+			@Import	Mixins
+	===============================
+*/
+/*
+  Live Search
+*/
+.filtered-list-search {
+  margin-top: 0;
+  margin-bottom: 50px; }
+  .filtered-list-search form > div {
+    position: relative; }
+  .filtered-list-search form input {
+    border: none;
+    padding: 10px 16px;
+    background: #fff;
+    -webkit-box-shadow: 0 0 4px 2px rgba(31, 45, 61, 0.1);
+    box-shadow: 0 0 4px 2px rgba(31, 45, 61, 0.1); }
+    .filtered-list-search form input:focus {
+      box-shadow: 0 0 4px 2px rgba(31, 45, 61, 0.1); }
+  .filtered-list-search form button {
+    border-radius: 50%;
+    padding: 7px 7px;
+    position: absolute;
+    right: 4px;
+    top: 4px; }
+  .filtered-list-search form input::-webkit-input-placeholder {
+    /* Chrome/Opera/Safari */
+    color: #888ea8; }
+  .filtered-list-search form input::-moz-placeholder {
+    /* Firefox 19+ */
+    color: #888ea8; }
+  .filtered-list-search form input:-ms-input-placeholder {
+    /* IE 10+ */
+    color: #888ea8; }
+  .filtered-list-search form input:-moz-placeholder {
+    /* Firefox 18- */
+    color: #888ea8; }
+
+.searchable-container {
+  max-width: 1140px;
+  margin: 0 auto; }
+
+.searchable-items {
+  padding: 13px;
+  border: 1px solid #e0e6ed;
+  border-radius: 10px; }
+
+.searchable-container .searchable-items {
+  display: block;
+  width: 100%;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch; }
+
+.searchable-container .items {
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -ms-flex-align: center;
+  align-items: center;
+  padding: .75rem .625rem;
+  position: relative;
+  display: -ms-flexbox;
+  display: flex;
+  min-width: 0;
+  word-wrap: break-word;
+  justify-content: space-between;
+  background: #fff;
+  margin-bottom: 15px;
+  border-radius: 14px;
+  padding: 13px 18px;
+  width: 100%;
+  color: #0e1726;
+  min-width: 625px;
+  transition: all 0.35s ease;
+  cursor: pointer;
+  -webkit-box-shadow: 0px 2px 9px 2px rgba(31, 45, 61, 0.1);
+  box-shadow: 0px 2px 9px 2px rgba(31, 45, 61, 0.1); }
+  .searchable-container .items:hover {
+    -webkit-transform: translateY(0) scale(1.03);
+    transform: translateY(0) scale(1.03);
+    transform: translateY(0) scale(1.01); }
+  .searchable-container .items .user-profile {
+    display: flex; }
+    .searchable-container .items .user-profile img {
+      width: 43px;
+      height: 43px;
+      border-radius: 5px; }
+  .searchable-container .items .user-name p, .searchable-container .items .user-work p, .searchable-container .items .user-email p {
+    margin-bottom: 0;
+    color: #888ea8;
+    font-weight: 600; }
+  .searchable-container .items .user-status span.badge {
+    background: transparent;
+    transform: none; }
+    .searchable-container .items .user-status span.badge.badge-warning {
+      color: #e2a03f;
+      border: 2px dashed #e2a03f; }
+    .searchable-container .items .user-status span.badge.badge-danger {
+      color: #e7515a;
+      border: 2px dashed #e7515a; }
+    .searchable-container .items .user-status span.badge.badge-primary {
+      color: #1b55e2;
+      border: 2px dashed #1b55e2; }
+  .searchable-container .items .action-btn p {
+    margin-bottom: 0;
+    color: #3b3f5c;
+    cursor: pointer;
+    font-weight: 600; }
+  .searchable-container .items:hover .serial-number p, .searchable-container .items:hover .user-name p, .searchable-container .items:hover .user-work p, .searchable-container .items:hover .user-email p, .searchable-container .items:hover .action-btn p {
+    color: #1b55e2; }
+
+/*
+    Line Search
+*/
+.full-search.search-form-overlay {
+  height: 50px;
+  position: relative;
+  border: 1px solid #e0e6ed;
+  border-radius: 5px;
+  padding: 6px; }
+
+.search-form-overlay.input-focused .form-inline.search {
+  position: absolute;
+  bottom: 0;
+  top: 0;
+  background: #fff;
+  height: 100%;
+  width: 100%;
+  left: 0;
+  right: 0;
+  z-index: 32;
+  border-radius: 0;
+  margin-top: 0px !important;
+  display: flex;
+  padding: 0; }
+
+.search-form-overlay .form-inline {
+  justify-content: flex-end; }
+  .search-form-overlay .form-inline svg {
+    font-weight: 600;
+    margin: 4px 10px;
+    cursor: pointer;
+    color: #888ea8; }
+
+.search-form-overlay.input-focused .form-inline svg {
+  margin: 0;
+  position: absolute;
+  top: 10px;
+  left: 11px; }
+
+.search-form-overlay.input-focused .form-inline.search .search-bar {
+  width: 100%; }
+
+.search-form-overlay form.form-inline input.search-form-control {
+  width: 100%;
+  font-size: 13px;
+  background-color: #e3e3e3;
+  padding-top: 8px;
+  padding-bottom: 8px;
+  border: none;
+  color: #515365;
+  letter-spacing: 1px; }
+
+.search-form-overlay .form-inline.search .search-form-control {
+  border: none;
+  width: 100%;
+  display: none;
+  box-shadow: none; }
+
+.search-form-overlay.input-focused .form-inline.search .search-form-control {
+  background: transparent;
+  border-bottom: none;
+  display: block;
+  padding-left: 45px; }
+
+.demo-search-overlay {
+  display: none;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background: #fff !important;
+  z-index: 0;
+  opacity: 0;
+  transition: all 0.5s ease-in-out;
+  left: 0;
+  right: 0; }
+  .demo-search-overlay.show {
+    display: block;
+    opacity: .1; }
+
+/*
+    Search Box
+*/
+.search-input-group-style.input-group {
+  -webkit-box-shadow: 0px 0px 0px 1px rgba(136, 142, 168, 0.313725);
+  box-shadow: 0px 0px 0px 1px rgba(136, 142, 168, 0.313725); }
+  .search-input-group-style.input-group .input-group-prepend .input-group-text {
+    border: 1px solid #ffffff;
+    background-color: #ffffff; }
+    .search-input-group-style.input-group .input-group-prepend .input-group-text svg {
+      color: #1b55e2; }
+
+.search-input-group-style input {
+  border: none;
+  border-radius: 4px;
+  padding: 6px 16px;
+  color: #0e1726; }
diff --git a/static/css/elements/tooltip.css b/static/css/elements/tooltip.css
new file mode 100644
index 00000000..53c5e69f
--- /dev/null
+++ b/static/css/elements/tooltip.css
@@ -0,0 +1,81 @@
+/*
+	===============================
+			@Import	Function
+	===============================
+*/
+/*
+	===============================
+			@Import	Mixins
+	===============================
+*/
+.tooltip-inner {
+  border-radius: 6px; }
+
+.tooltip .tooltip-item {
+  color: #fff;
+  padding: 0 9px; }
+
+.tooltip-section h6 {
+  color: #3b3f5c;
+  font-size: 0.875rem;
+  margin-top: 25px;
+  margin-bottom: 20px; }
+
+/*
+	==================
+		Colors
+	=================
+*/
+/*
+	Tooltips
+*/
+/*		Tooltip Inner 	*/
+.tooltip-primary .tooltip-inner {
+  color: #1b55e2;
+  background-color: #c2d5ff; }
+
+.tooltip-success .tooltip-inner {
+  color: #8dbf42;
+  background-color: #e6ffbf; }
+
+.tooltip-info .tooltip-inner {
+  color: #2196f3;
+  background-color: #bae7ff; }
+
+.tooltip-danger .tooltip-inner {
+  color: #e7515a;
+  background-color: #ffe1e2; }
+
+.tooltip-warning .tooltip-inner {
+  color: #e2a03f;
+  background-color: #ffeccb; }
+
+.tooltip-secondary .tooltip-inner {
+  color: #5c1ac3;
+  background-color: #dccff7; }
+
+.tooltip-dark .tooltip-inner {
+  color: #3b3f5c;
+  background-color: #acb0c3; }
+
+/*		Tooltip arrow 		*/
+.tooltip-primary .arrow:before {
+  border-top-color: #c2d5ff; }
+
+.tooltip-success .arrow:before {
+  border-top-color: #e6ffbf; }
+
+.tooltip-info .arrow:before {
+  border-top-color: #bae7ff; }
+
+.tooltip-danger .arrow:before {
+  border-top-color: #ffe1e2; }
+
+.tooltip-warning .arrow:before {
+  border-top-color: #ffeccb; }
+
+.tooltip-secondary .arrow:before {
+  border-top-color: #dccff7; }
+
+.tooltip-dark .arrow:before {
+  border-top-color: #acb0c3; }
diff --git a/static/css/forms/bootstrap-form.css b/static/css/forms/bootstrap-form.css
new file mode 100644
index 00000000..04ec5be2
--- /dev/null
+++ b/static/css/forms/bootstrap-form.css
@@ -0,0 +1,110 @@
+/*
+	===============================
+			@Import	Function
+	===============================
+*/
+/*
+	===============================
+			@Import	Mixins
+	===============================
+*/
+.row .col-lg-12 .widget .widget-header h4 {
+  color: #000000;
+  font-size: 20px; }
+
+body {
+  color: #515365;
+  font-weight: 600; }
+
+.form-control {
+  border: 1px solid #ebedf2;
+  border-radius: 4px;
+  color: #F49499; }
+  .form-control:disabled, .form-control[readonly] {
+    background-color: #f1f2f3; }
+  .form-control:focus {
+    border-color: #5c1ac3; }
+
+.help-block, .help-inline {
+  color: #888ea8; }
+
+.input-group-addon {
+  background-color: #ebedf2;
+  color: #3b3f5c; }
+
+.dropdown-toggle:after {
+  color: #3b3f5c; }
+
+.has-warning .control-label, .has-warning .help-block {
+  color: #ffbb44; }
+
+.has-warning .form-control {
+  border-color: #ffbb44; }
+
+.has-error .control-label, .has-error .help-block {
+  color: #ee3d49; }
+
+.has-error .form-control {
+  border-color: #ee3d49; }
+
+.has-success .control-label, .has-success .help-block {
+  color: #009688; }
+
+.has-success .form-control {
+  border-color: #009688; }
+
+.ui-spinner-button {
+  border: 1px solid #ebedf2;
+  color: #d3d3d3; }
+
+.form-horizontal .radio, .form-horizontal .radio-inline {
+  color: #888ea8;
+  font-weight: normal; }
+
+div.tagsinput {
+  border: 1px solid #ebedf2; }
+  div.tagsinput span.tag {
+    background: #edf1f7;
+    border: 1px solid #ebedf2; }
+
+.select2-container .select2-choice {
+  border: 1px solid #ebedf2;
+  color: #888ea8;
+  font-size: 13px;
+  font-weight: normal; }
+
+.select2-default {
+  color: #888ea8 !important;
+  font-size: 13px !important;
+  font-weight: normal; }
+
+.select2-container .select2-choice .select2-arrow {
+  border: 1px solid #f1f2f3;
+  background: #fff; }
+
+.select2-container-multi .select2-choices {
+  border: 1px solid #ebedf2; }
+  .select2-container-multi .select2-choices .select2-search-choice {
+    border: 1px solid #f1f2f3;
+    color: #888ea8;
+    font-weight: normal;
+    font-size: 13px; }
+
+.checkbox, .radio {
+  position: relative;
+  display: block;
+  cursor: pointer; }
+
+.checkbox-inline, .radio-inline {
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+  cursor: pointer; }
+
+.form-horizontal .checkbox, .form-horizontal .checkbox-inline, .form-horizontal .radio, .form-horizontal .radio-inline {
+  padding-top: 7px;
+  margin-top: 0;
+  margin-bottom: 0; }
+
+.form-horizontal .checkbox, .form-horizontal .radio {
+  min-height: 27px; }
diff --git a/static/css/forms/custom-clipboard.css b/static/css/forms/custom-clipboard.css
new file mode 100644
index 00000000..2b3c0a91
--- /dev/null
+++ b/static/css/forms/custom-clipboard.css
@@ -0,0 +1,23 @@
+/*
+	===============================
+			@Import	Function
+	===============================
+*/
+/*
+	===============================
+			@Import	Mixins
+	===============================
+*/
+textarea {
+  resize: none; }
+
+.clipboard {
+  background-color: #f1f2f3;
+  padding: 20px;
+  border-radius: 6px; }
+  .clipboard.copy-txt {
+    background-color: #f1f2f3; }
+    .clipboard.copy-txt .otp-pass span {
+      font-size: 24px;
+      font-weight: 600;
+      color: #3b3f5c; }
diff --git a/static/css/forms/switches.css b/static/css/forms/switches.css
new file mode 100644
index 00000000..b31ddb6d
--- /dev/null
+++ b/static/css/forms/switches.css
@@ -0,0 +1,226 @@
+/*
+	===============================
+			@Import	Function
+	===============================
+*/
+/*
+	===============================
+			@Import	Mixins
+	===============================
+*/
+/*
+==================
+    Switches
+==================
+*/
+/* The switch - the box around the slider */
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 35px;
+  height: 18px; }
+  .switch input {
+    display: none; }
+  .switch .slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #ebedf2;
+    -webkit-transition: .4s;
+    transition: .4s; }
+    .switch .slider:before {
+      position: absolute;
+      content: "";
+      background-color: white;
+      -webkit-transition: .4s;
+      -ms-transition: .4s;
+      transition: .4s;
+      height: 14px;
+      width: 14px;
+      left: 2px;
+      bottom: 2px;
+      box-shadow: 0 1px 15px 1px rgba(52, 40, 104, 0.34); }
+  .switch input:checked + .slider:before {
+    -webkit-transform: translateX(17px);
+    -ms-transform: translateX(17px);
+    transform: translateX(17px); }
+  .switch .slider.round {
+    border-radius: 34px; }
+    .switch .slider.round:before {
+      border-radius: 50%; }
+  .switch.s-default .slider:before {
+    background-color: #d3d3d3; }
+  .switch.s-primary .slider:before {
+    background-color: #1b55e2; }
+  .switch.s-success .slider:before {
+    background-color: #8dbf42; }
+  .switch.s-warning .slider:before {
+    background-color: #e2a03f; }
+  .switch.s-danger .slider:before {
+    background-color: #e7515a; }
+  .switch.s-secondary .slider:before {
+    background-color: #5c1ac3; }
+  .switch.s-info .slider:before {
+    background-color: #2196f3; }
+  .switch.s-dark .slider:before {
+    background-color: #3b3f5c; }
+  .switch input:checked + .slider:before {
+    background-color: #fff; }
+  .switch.s-default input:checked + .slider {
+    background-color: #d3d3d3; }
+  .switch.s-default input:focus + .slider {
+    box-shadow: 0 0 1px #ebedf2; }
+  .switch.s-primary input:checked + .slider {
+    background-color: #1b55e2; }
+  .switch.s-primary input:focus + .slider {
+    box-shadow: 0 0 1px #1b55e2; }
+  .switch.s-success input:checked + .slider {
+    background-color: #8dbf42; }
+  .switch.s-success input:focus + .slider {
+    box-shadow: 0 0 1px #8dbf42; }
+  .switch.s-warning input:checked + .slider {
+    background-color: #e2a03f; }
+  .switch.s-warning input:focus + .slider {
+    box-shadow: 0 0 1px #e2a03f; }
+  .switch.s-danger input:checked + .slider {
+    background-color: #e7515a; }
+  .switch.s-danger input:focus + .slider {
+    box-shadow: 0 0 1px #e7515a; }
+  .switch.s-secondary input:checked + .slider {
+    background-color: #5c1ac3; }
+  .switch.s-secondary input:focus + .slider {
+    box-shadow: 0 0 1px #5c1ac3; }
+  .switch.s-info input:checked + .slider {
+    background-color: #2196f3; }
+  .switch.s-info input:focus + .slider {
+    box-shadow: 0 0 1px #2196f3; }
+  .switch.s-dark input:checked + .slider {
+    background-color: #3b3f5c; }
+  .switch.s-dark input:focus + .slider {
+    box-shadow: 0 0 1px #3b3f5c; }
+  .switch.s-outline .slider {
+    border: 2px solid #ebedf2;
+    background-color: transparent;
+    width: 36px;
+    height: 19px; }
+    .switch.s-outline .slider:before {
+      height: 13px;
+      width: 13px; }
+  .switch.s-outline[class*="s-outline-"] .slider:before {
+    bottom: 1px;
+    left: 1px;
+    border: 2px solid #bfc9d4;
+    background-color: #bfc9d4;
+    color: #ebedf2;
+    box-shadow: 0 1px 15px 1px rgba(52, 40, 104, 0.25); }
+  .switch.s-icons.s-outline-default {
+    color: #d3d3d3; }
+  .switch.s-icons.s-outline-primary {
+    color: #1b55e2; }
+  .switch.s-icons.s-outline-success {
+    color: #8dbf42; }
+  .switch.s-icons.s-outline-warning {
+    color: #e2a03f; }
+  .switch.s-icons.s-outline-danger {
+    color: #e7515a; }
+  .switch.s-icons.s-outline-secondary {
+    color: #5c1ac3; }
+  .switch.s-icons.s-outline-info {
+    color: #2196f3; }
+  .switch.s-icons.s-outline-dark {
+    color: #3b3f5c; }
+  .switch.s-outline-default input:checked + .slider {
+    border: 2px solid #ebedf2; }
+    .switch.s-outline-default input:checked + .slider:before {
+      border: 2px solid #d3d3d3;
+      background-color: #d3d3d3;
+      box-shadow: 0 1px 15px 1px rgba(52, 40, 104, 0.25); }
+  .switch.s-outline-default input:focus + .slider {
+    box-shadow: 0 0 1px #ebedf2; }
+  .switch.s-outline-primary input:checked + .slider {
+    border: 2px solid #1b55e2; }
+    .switch.s-outline-primary input:checked + .slider:before {
+      border: 2px solid #1b55e2;
+      background-color: #1b55e2;
+      box-shadow: 0 1px 15px 1px rgba(52, 40, 104, 0.34); }
+  .switch.s-outline-primary input:focus + .slider {
+    box-shadow: 0 0 1px #1b55e2; }
+  .switch.s-outline-success input:checked + .slider {
+    border: 2px solid #8dbf42; }
+    .switch.s-outline-success input:checked + .slider:before {
+      border: 2px solid #8dbf42;
+      background-color: #8dbf42;
+      box-shadow: 0 1px 15px 1px rgba(52, 40, 104, 0.34); }
+  .switch.s-outline-success input:focus + .slider {
+    box-shadow: 0 0 1px #8dbf42; }
+  .switch.s-outline-warning input:checked + .slider {
+    border: 2px solid #e2a03f; }
+    .switch.s-outline-warning input:checked + .slider:before {
+      border: 2px solid #e2a03f;
+      background-color: #e2a03f;
+      box-shadow: 0 1px 15px 1px rgba(52, 40, 104, 0.34); }
+  .switch.s-outline-warning input:focus + .slider {
+    box-shadow: 0 0 1px #e2a03f; }
+  .switch.s-outline-danger input:checked + .slider {
+    border: 2px solid #e7515a; }
+    .switch.s-outline-danger input:checked + .slider:before {
+      border: 2px solid #e7515a;
+      background-color: #e7515a;
+      box-shadow: 0 1px 15px 1px rgba(52, 40, 104, 0.34); }
+  .switch.s-outline-danger input:focus + .slider {
+    box-shadow: 0 0 1px #e7515a; }
+  .switch.s-outline-secondary input:checked + .slider {
+    border: 2px solid #5c1ac3; }
+    .switch.s-outline-secondary input:checked + .slider:before {
+      border: 2px solid #5c1ac3;
+      background-color: #5c1ac3;
+      box-shadow: 0 1px 15px 1px rgba(52, 40, 104, 0.34); }
+  .switch.s-outline-secondary input:focus + .slider {
+    box-shadow: 0 0 1px #5c1ac3; }
+  .switch.s-outline-info input:checked + .slider {
+    border: 2px solid #2196f3; }
+    .switch.s-outline-info input:checked + .slider:before {
+      border: 2px solid #2196f3;
+      background-color: #2196f3;
+      box-shadow: 0 1px 15px 1px rgba(52, 40, 104, 0.34); }
+  .switch.s-outline-info input:focus + .slider {
+    box-shadow: 0 0 1px #2196f3; }
+  .switch.s-outline-dark input:checked + .slider {
+    border: 2px solid #3b3f5c; }
+    .switch.s-outline-dark input:checked + .slider:before {
+      border: 2px solid #3b3f5c;
+      background-color: #3b3f5c;
+      box-shadow: 0 1px 15px 1px rgba(52, 40, 104, 0.34); }
+  .switch.s-outline-dark input:focus + .slider {
+    box-shadow: 0 0 1px #3b3f5c; }
+  .switch.s-icons {
+    width: 57px;
+    height: 30px; }
+    .switch.s-icons .slider {
+      width: 48px;
+      height: 25px; }
+      .switch.s-icons .slider:before {
+        vertical-align: sub;
+        color: #3b3f5c;
+        height: 19px;
+        width: 19px;
+        line-height: 1.3;
+        content: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="%23e9ecef" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>'); }
+    .switch.s-icons input:checked + .slider:before {
+      content: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="%23fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check"><polyline points="20 6 9 17 4 12"></polyline></svg>');
+      vertical-align: sub;
+      color: #fff;
+      line-height: 1.4;
+      -webkit-transform: translateX(23px);
+      -ms-transform: translateX(23px);
+      transform: translateX(23px); }
+
+/* Hide default HTML checkbox */
+/* The slider */
+/* Rounded Slider Switches */
+/* Solid Switches*/
+/* Outline Switches */
+/*  Icons Switches */
diff --git a/static/css/forms/theme-checkbox-radio.css b/static/css/forms/theme-checkbox-radio.css
new file mode 100644
index 00000000..7521d27c
--- /dev/null
+++ b/static/css/forms/theme-checkbox-radio.css
@@ -0,0 +1,275 @@
+/*
+	===============================
+			@Import	Function
+	===============================
+*/
+/*
+	===============================
+			@Import	Mixins
+	===============================
+*/
+/*----------Theme checkbox---------*/
+.new-control {
+  position: relative;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  padding-left: 1.5rem;
+  margin-right: 1rem;
+  font-weight: 100;
+  font-size: 14px; }
+
+.new-control-input {
+  position: absolute;
+  z-index: -1;
+  opacity: 0; }
+
+.new-control.new-checkbox {
+  cursor: pointer; }
+  .new-control.new-checkbox .new-control-indicator {
+    position: absolute;
+    top: 2px;
+    left: 0;
+    display: block;
+    width: 17px;
+    height: 17px;
+    pointer-events: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    background-color: #e0e6ed;
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: 50% 50%;
+    border-radius: 4px; }
+  .new-control.new-checkbox > input:checked ~ span.new-control-indicator {
+    background: #888ea8; }
+    .new-control.new-checkbox > input:checked ~ span.new-control-indicator:after {
+      display: block; }
+  .new-control.new-checkbox span.new-control-indicator:after {
+    border: solid #fff;
+    top: 50%;
+    left: 50%;
+    margin-left: -2px;
+    margin-top: -5px;
+    width: 4px;
+    height: 8px;
+    border-width: 0 2px 2px 0 !important;
+    transform: rotate(45deg);
+    content: '';
+    position: absolute;
+    display: none;
+    margin-left: -2px;
+    margin-top: -5px;
+    width: 4px;
+    height: 8px;
+    height: 8px; }
+
+/*rounded checkbox*/
+.new-checkbox-rounded span.new-control-indicator {
+  border-radius: 50% !important; }
+
+/*  line through colors   */
+.new-control.new-checkbox.new-checkbox-text > input:checked ~ span.new-chk-content, .new-control.new-checkbox.new-checkbox-text.checkbox-outline-default > input:checked ~ span.new-chk-content {
+  color: #888ea8; }
+
+.new-control.new-checkbox.new-checkbox-text.checkbox-primary > input:checked ~ span.new-chk-content, .new-control.new-checkbox.new-checkbox-text.checkbox-outline-primary > input:checked ~ span.new-chk-content {
+  color: #1b55e2; }
+
+.new-control.new-checkbox.new-checkbox-text.checkbox-success > input:checked ~ span.new-chk-content, .new-control.new-checkbox.new-checkbox-text.checkbox-outline-success > input:checked ~ span.new-chk-content {
+  color: #8dbf42; }
+
+.new-control.new-checkbox.new-checkbox-text.checkbox-info > input:checked ~ span.new-chk-content, .new-control.new-checkbox.new-checkbox-text.checkbox-outline-info > input:checked ~ span.new-chk-content {
+  color: #2196f3; }
+
+.new-control.new-checkbox.new-checkbox-text.checkbox-warning > input:checked ~ span.new-chk-content, .new-control.new-checkbox.new-checkbox-text.checkbox-outline-warning > input:checked ~ span.new-chk-content {
+  color: #e2a03f; }
+
+.new-control.new-checkbox.new-checkbox-text.checkbox-danger > input:checked ~ span.new-chk-content, .new-control.new-checkbox.new-checkbox-text.checkbox-outline-danger > input:checked ~ span.new-chk-content {
+  color: #e7515a; }
+
+.new-control.new-checkbox.new-checkbox-text.checkbox-secondary > input:checked ~ span.new-chk-content, .new-control.new-checkbox.new-checkbox-text.checkbox-outline-secondary > input:checked ~ span.new-chk-content {
+  color: #5c1ac3; }
+
+.new-control.new-checkbox.new-checkbox-text.checkbox-dark > input:checked ~ span.new-chk-content, .new-control.new-checkbox.new-checkbox-text.checkbox-outline-dark > input:checked ~ span.new-chk-content {
+  color: #3b3f5c; }
+
+.new-control.new-checkbox.checkbox-primary > input:checked ~ span.new-control-indicator {
+  background: #1b55e2; }
+
+.new-control.new-checkbox.checkbox-success > input:checked ~ span.new-control-indicator {
+  background: #8dbf42; }
+
+.new-control.new-checkbox.checkbox-info > input:checked ~ span.new-control-indicator {
+  background: #2196f3; }
+
+.new-control.new-checkbox.checkbox-warning > input:checked ~ span.new-control-indicator {
+  background: #e2a03f; }
+
+.new-control.new-checkbox.checkbox-danger > input:checked ~ span.new-control-indicator {
+  background: #e7515a; }
+
+.new-control.new-checkbox.checkbox-secondary > input:checked ~ span.new-control-indicator {
+  background: #5c1ac3; }
+
+.new-control.new-checkbox.checkbox-dark > input:checked ~ span.new-control-indicator {
+  background: #3b3f5c; }
+
+.new-control.new-checkbox[class*="checkbox-outline-"] > input:checked ~ span.new-control-indicator {
+  background-color: transparent; }
+
+.new-control.new-checkbox.checkbox-outline-default > input:checked ~ span.new-control-indicator {
+  border: 2px solid #888ea8; }
+
+.new-control.new-checkbox.checkbox-outline-primary > input:checked ~ span.new-control-indicator {
+  border: 2px solid #1b55e2; }
+
+.new-control.new-checkbox.checkbox-outline-success > input:checked ~ span.new-control-indicator {
+  border: 2px solid #8dbf42; }
+
+.new-control.new-checkbox.checkbox-outline-info > input:checked ~ span.new-control-indicator {
+  border: 2px solid #2196f3; }
+
+.new-control.new-checkbox.checkbox-outline-warning > input:checked ~ span.new-control-indicator {
+  border: 2px solid #e2a03f; }
+
+.new-control.new-checkbox.checkbox-outline-danger > input:checked ~ span.new-control-indicator {
+  border: 2px solid #e7515a; }
+
+.new-control.new-checkbox.checkbox-outline-secondary > input:checked ~ span.new-control-indicator {
+  border: 2px solid #5c1ac3; }
+
+.new-control.new-checkbox.checkbox-outline-dark > input:checked ~ span.new-control-indicator {
+  border: 2px solid #3b3f5c; }
+
+.new-control.new-checkbox.checkbox-outline-default > input:checked ~ span.new-control-indicator:after {
+  border-color: #888ea8; }
+
+.new-control.new-checkbox.checkbox-outline-primary > input:checked ~ span.new-control-indicator:after {
+  border-color: #1b55e2; }
+
+.new-control.new-checkbox.checkbox-outline-success > input:checked ~ span.new-control-indicator:after {
+  border-color: #8dbf42; }
+
+.new-control.new-checkbox.checkbox-outline-info > input:checked ~ span.new-control-indicator:after {
+  border-color: #2196f3; }
+
+.new-control.new-checkbox.checkbox-outline-warning > input:checked ~ span.new-control-indicator:after {
+  border-color: #e2a03f; }
+
+.new-control.new-checkbox.checkbox-outline-danger > input:checked ~ span.new-control-indicator:after {
+  border-color: #e7515a; }
+
+.new-control.new-checkbox.checkbox-outline-secondary > input:checked ~ span.new-control-indicator:after {
+  border-color: #5c1ac3; }
+
+.new-control.new-checkbox.checkbox-outline-dark > input:checked ~ span.new-control-indicator:after {
+  border-color: #3b3f5c; }
+
+.new-control.new-radio {
+  cursor: pointer; }
+  .new-control.new-radio .new-control-indicator {
+    position: absolute;
+    top: 2px;
+    left: 0;
+    display: block;
+    width: 16px;
+    height: 16px;
+    pointer-events: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    background-color: #e0e6ed;
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: 50% 50%;
+    border-radius: 50%; }
+  .new-control.new-radio > input:checked ~ span.new-control-indicator {
+    background: #888ea8; }
+  .new-control.new-radio span.new-control-indicator:after {
+    top: 50%;
+    left: 50%;
+    margin-left: -3px;
+    margin-top: -3px;
+    content: '';
+    position: absolute;
+    display: none;
+    border-radius: 50%;
+    height: 6px;
+    width: 6px;
+    background-color: #fff; }
+  .new-control.new-radio.square-radio .new-control-indicator, .new-control.new-radio.square-radio span.new-control-indicator:after {
+    border-radius: 0; }
+  .new-control.new-radio.radio-primary > input:checked ~ span.new-control-indicator {
+    background: #1b55e2; }
+  .new-control.new-radio.radio-success > input:checked ~ span.new-control-indicator {
+    background: #8dbf42; }
+  .new-control.new-radio.radio-info > input:checked ~ span.new-control-indicator {
+    background: #2196f3; }
+  .new-control.new-radio.radio-warning > input:checked ~ span.new-control-indicator {
+    background: #e2a03f; }
+  .new-control.new-radio.radio-danger > input:checked ~ span.new-control-indicator {
+    background: #e7515a; }
+  .new-control.new-radio.radio-secondary > input:checked ~ span.new-control-indicator {
+    background: #5c1ac3; }
+  .new-control.new-radio.radio-dark > input:checked ~ span.new-control-indicator {
+    background: #3b3f5c; }
+  .new-control.new-radio[class*="radio-classic-"] > input:checked ~ span.new-control-indicator {
+    background-color: transparent; }
+  .new-control.new-radio.radio-classic-default > input:checked ~ span.new-control-indicator {
+    border: 3px solid #888ea8; }
+  .new-control.new-radio.radio-classic-primary > input:checked ~ span.new-control-indicator {
+    border: 3px solid #1b55e2; }
+  .new-control.new-radio.radio-classic-success > input:checked ~ span.new-control-indicator {
+    border: 3px solid #8dbf42; }
+  .new-control.new-radio.radio-classic-info > input:checked ~ span.new-control-indicator {
+    border: 3px solid #2196f3; }
+  .new-control.new-radio.radio-classic-warning > input:checked ~ span.new-control-indicator {
+    border: 3px solid #e2a03f; }
+  .new-control.new-radio.radio-classic-danger > input:checked ~ span.new-control-indicator {
+    border: 3px solid #e7515a; }
+  .new-control.new-radio.radio-classic-secondary > input:checked ~ span.new-control-indicator {
+    border: 3px solid #5c1ac3; }
+  .new-control.new-radio.radio-classic-dark > input:checked ~ span.new-control-indicator {
+    border: 3px solid #3b3f5c; }
+  .new-control.new-radio.radio-classic-default > input:checked ~ span.new-control-indicator:after {
+    background-color: #888ea8; }
+  .new-control.new-radio.radio-classic-primary > input:checked ~ span.new-control-indicator:after {
+    background-color: #1b55e2; }
+  .new-control.new-radio.radio-classic-success > input:checked ~ span.new-control-indicator:after {
+    background-color: #8dbf42; }
+  .new-control.new-radio.radio-classic-info > input:checked ~ span.new-control-indicator:after {
+    background-color: #2196f3; }
+  .new-control.new-radio.radio-classic-warning > input:checked ~ span.new-control-indicator:after {
+    background-color: #e2a03f; }
+  .new-control.new-radio.radio-classic-danger > input:checked ~ span.new-control-indicator:after {
+    background-color: #e7515a; }
+  .new-control.new-radio.radio-classic-secondary > input:checked ~ span.new-control-indicator:after {
+    background-color: #5c1ac3; }
+  .new-control.new-radio.radio-classic-dark > input:checked ~ span.new-control-indicator:after {
+    background-color: #3b3f5c; }
+  .new-control.new-radio.new-radio-text > input:checked ~ span.new-radio-content, .new-control.new-radio.new-radio-text.radio-classic-default > input:checked ~ span.new-radio-content {
+    color: #888ea8; }
+  .new-control.new-radio.new-radio-text.radio-primary > input:checked ~ span.new-radio-content, .new-control.new-radio.new-radio-text.radio-classic-primary > input:checked ~ span.new-radio-content {
+    color: #1b55e2; }
+  .new-control.new-radio.new-radio-text.radio-success > input:checked ~ span.new-radio-content, .new-control.new-radio.new-radio-text.radio-classic-success > input:checked ~ span.new-radio-content {
+    color: #8dbf42; }
+  .new-control.new-radio.new-radio-text.radio-info > input:checked ~ span.new-radio-content, .new-control.new-radio.new-radio-text.radio-classic-info > input:checked ~ span.new-radio-content {
+    color: #2196f3; }
+  .new-control.new-radio.new-radio-text.radio-warning > input:checked ~ span.new-radio-content, .new-control.new-radio.new-radio-text.radio-classic-warning > input:checked ~ span.new-radio-content {
+    color: #e2a03f; }
+  .new-control.new-radio.new-radio-text.radio-danger > input:checked ~ span.new-radio-content, .new-control.new-radio.new-radio-text.radio-classic-danger > input:checked ~ span.new-radio-content {
+    color: #e7515a; }
+  .new-control.new-radio.new-radio-text.radio-secondary > input:checked ~ span.new-radio-content, .new-control.new-radio.new-radio-text.radio-classic-secondary > input:checked ~ span.new-radio-content {
+    color: #5c1ac3; }
+  .new-control.new-radio.new-radio-text.radio-dark > input:checked ~ span.new-radio-content, .new-control.new-radio.new-radio-text.radio-classic-dark > input:checked ~ span.new-radio-content {
+    color: #3b3f5c; }
+
+/*  Color   */
+/*   Outline checkbox   */
+/*----------Theme Radio---------*/
+/*square radio*/
+/*  Color   */
+/*   Outline Radio   */
+/*  line through colors   */
diff --git a/static/css/loader.css b/static/css/loader.css
new file mode 100644
index 00000000..5c9fa26e
--- /dev/null
+++ b/static/css/loader.css
@@ -0,0 +1,30 @@
+/*
+	===============================
+			@Import	Function
+	===============================
+*/
+/*
+	===============================
+			@Import	Mixins
+	===============================
+*/
+div#load_screen {
+  background: #ecefff;
+  opacity: 1;
+  position: fixed;
+  z-index: 999999;
+  top: 0px;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  width: 100%; }
+  div#load_screen .loader {
+    display: flex;
+    justify-content: center;
+    height: 100vh; }
+  div#load_screen .loader-content {
+    right: 0;
+    align-self: center; }
+
+.spinner-grow {
+  color: #304aca; }
diff --git a/static/css/main.css b/static/css/main.css
new file mode 100644
index 00000000..6df8c62e
--- /dev/null
+++ b/static/css/main.css
@@ -0,0 +1,2056 @@
+html {
+  min-height: 100%; }
+
+body {
+  color: #888ea8;
+  height: 100%;
+  font-size: 0.875rem;
+  background: #f1f2f3;
+  overflow-x: hidden;
+  overflow-y: auto;
+  letter-spacing: 0.0312rem;
+  font-family: 'Nunito', sans-serif; }
+
+h1, h2, h3, h4, h5, h6 {
+  color: #3b3f5c; }
+
+:focus {
+  outline: none; }
+
+::-moz-selection {
+  /* Code for Firefox */
+  color: #1b55e2;
+  background: transparent; }
+
+::selection {
+  color: #1b55e2;
+  background: transparent; }
+
+p {
+  margin-top: 0;
+  margin-bottom: 0.625rem;
+  color: #515365; }
+
+hr {
+  margin-top: 20px;
+  margin-bottom: 20px;
+  border-top: 1px solid #f1f2f3; }
+
+strong {
+  font-weight: 600; }
+
+code {
+  color: #e7515a; }
+
+select.form-custom::-ms-expand {
+  display: none; }
+
+.custom-file-input:focus ~ .custom-file-label {
+  border: 1px solid #ced4da;
+  box-shadow: none; }
+  .custom-file-input:focus ~ .custom-file-label::after {
+    border: none;
+    border-left: 1px solid #ced4da; }
+
+.lead a.btn.btn-primary.btn-lg {
+  margin-top: 15px;
+  border-radius: 4px; }
+
+.jumbotron {
+  background-color: #f1f2f3; }
+
+.mark, mark {
+  background-color: #ffeccb; }
+
+.code-section-container {
+  margin-top: 20px;
+  text-align: left; }
+
+.toggle-code-snippet {
+  border: none;
+  background-color: transparent !important;
+  padding: 0px !important;
+  box-shadow: none !important;
+  color: #888ea8 !important;
+  margin-bottom: -24px;
+  border-bottom: 1px dashed #bfc9d4;
+  border-radius: 0; }
+  .toggle-code-snippet svg {
+    color: #1b55e2; }
+
+.code-section {
+  padding: 0;
+  height: 0; }
+
+.code-section-container.show-code .code-section {
+  margin-top: 20px;
+  height: auto; }
+
+.code-section pre {
+  margin-bottom: 0;
+  height: 0;
+  padding: 0;
+  border-radius: 6px; }
+
+.code-section-container.show-code .code-section pre {
+  height: auto;
+  padding: 22px; }
+
+.code-section code {
+  color: #fff; }
+
+/*blockquote*/
+blockquote.blockquote {
+  color: #0e1726;
+  padding: 20px 20px 20px 14px;
+  font-size: 0.875rem;
+  background-color: #ffffff;
+  border-bottom-right-radius: 8px;
+  border-top-right-radius: 8px;
+  border: 1px solid #e0e6ed;
+  border-left: 2px solid #1b55e2;
+  -webkit-box-shadow: 0 4px 6px 0 rgba(85, 85, 85, 0.08), 0 1px 20px 0 rgba(0, 0, 0, 0.07), 0px 1px 11px 0px rgba(0, 0, 0, 0.07);
+  -moz-box-shadow: 0 4px 6px 0 rgba(85, 85, 85, 0.08), 0 1px 20px 0 rgba(0, 0, 0, 0.07), 0px 1px 11px 0px rgba(0, 0, 0, 0.07);
+  box-shadow: 0 4px 6px 0 rgba(85, 85, 85, 0.08), 0 1px 20px 0 rgba(0, 0, 0, 0.07), 0px 1px 11px 0px rgba(0, 0, 0, 0.07); }
+  blockquote.blockquote > p {
+    margin-bottom: 0; }
+
+blockquote .small:before, blockquote footer:before, blockquote small:before {
+  content: '\2014 \00A0'; }
+
+blockquote .small, blockquote footer, blockquote small {
+  display: block;
+  font-size: 80%;
+  line-height: 1.42857143;
+  color: #777; }
+
+blockquote.media-object.m-o-border-right {
+  border-right: 4px solid #1b55e2;
+  border-left: none; }
+
+blockquote.media-object .media .usr-img img {
+  width: 55px; }
+
+/* Icon List */
+.list-icon {
+  list-style: none;
+  padding: 0;
+  margin-bottom: 0; }
+  .list-icon li:not(:last-child) {
+    margin-bottom: 15px; }
+  .list-icon svg {
+    width: 18px;
+    height: 18px;
+    color: #1b55e2;
+    margin-right: 2px;
+    vertical-align: sub; }
+  .list-icon .list-text {
+    font-size: 14px;
+    font-weight: 600;
+    color: #515365;
+    letter-spacing: 1px; }
+
+a {
+  color: #515365;
+  outline: none; }
+  a:hover {
+    color: #555555;
+    text-decoration: none; }
+  a:focus {
+    outline: none;
+    text-decoration: none; }
+
+button:focus {
+  outline: none; }
+
+textarea {
+  outline: none; }
+  textarea:focus {
+    outline: none; }
+
+.btn-link:hover {
+  text-decoration: none; }
+
+span.blue {
+  color: #1b55e2; }
+
+span.green {
+  color: #8dbf42; }
+
+span.red {
+  color: #e7515a; }
+
+/*      Form Group Label       */
+.form-group label, label {
+  font-size: 15px;
+  color: #acb0c3;
+  letter-spacing: 1px; }
+
+/*  Disable forms     */
+.custom-control-input:disabled ~ .custom-control-label {
+  color: #d3d3d3; }
+
+/*      Form Control       */
+.form-control {
+  height: auto;
+  border: 1px solid #bfc9d4;
+  color: #3b3f5c;
+  font-size: 15px;
+  padding: 8px 10px;
+  letter-spacing: 1px;
+  height: calc(1.4em + 1.4rem + 2px);
+  padding: .75rem 1.25rem;
+  border-radius: 6px; }
+  .form-control:focus {
+    box-shadow: 0 0 5px 2px rgba(194, 213, 255, 0.619608);
+    border-color: #1b55e2;
+    color: #3b3f5c; }
+  .form-control::-webkit-input-placeholder, .form-control::-ms-input-placeholder, .form-control::-moz-placeholder {
+    color: #acb0c3;
+    font-size: 15px; }
+  .form-control:focus::-webkit-input-placeholder, .form-control:focus::-ms-input-placeholder, .form-control:focus::-moz-placeholder {
+    color: #d3d3d3;
+    font-size: 15px; }
+  .form-control.form-control-lg {
+    font-size: 19px;
+    padding: 11px 20px; }
+  .form-control.form-control-sm {
+    padding: 7px 16px;
+    font-size: 13px; }
+
+/*      Custom Select       */
+.custom-select {
+  height: auto;
+  border: 1px solid #f1f2f3;
+  color: #3b3f5c;
+  font-size: 15px;
+  padding: 8px 10px;
+  letter-spacing: 1px;
+  background-color: #f1f2f3; }
+  .custom-select.custom-select-lg {
+    font-size: 18px;
+    padding: 16px 20px; }
+  .custom-select.custom-select-sm {
+    font-size: 13px;
+    padding: 7px 16px; }
+  .custom-select:focus {
+    box-shadow: none;
+    border-color: #1b55e2;
+    color: #3b3f5c; }
+
+/*      Form Control File       */
+.form-control-file {
+  width: 100%;
+  color: #5c1ac3; }
+  .form-control-file::-webkit-file-upload-button {
+    letter-spacing: 1px;
+    padding: 9px 20px;
+    text-shadow: none;
+    font-size: 12px;
+    color: #fff;
+    font-weight: normal;
+    white-space: normal;
+    word-wrap: break-word;
+    transition: .2s ease-out;
+    touch-action: manipulation;
+    cursor: pointer;
+    background-color: #5c1ac3;
+    box-shadow: 0px 0px 15px 1px rgba(113, 106, 202, 0.2);
+    will-change: opacity, transform;
+    transition: all 0.3s ease-out;
+    -webkit-transition: all 0.3s ease-out;
+    border-radius: 4px;
+    border: transparent;
+    outline: none; }
+  .form-control-file::-ms-file-upload-button {
+    letter-spacing: 1px;
+    padding: 9px 20px;
+    text-shadow: none;
+    font-size: 14px;
+    color: #fff;
+    font-weight: normal;
+    white-space: normal;
+    word-wrap: break-word;
+    transition: .2s ease-out;
+    touch-action: manipulation;
+    cursor: pointer;
+    background-color: #5c1ac3;
+    box-shadow: 0px 0px 15px 1px rgba(113, 106, 202, 0.2);
+    will-change: opacity, transform;
+    transition: all 0.3s ease-out;
+    -webkit-transition: all 0.3s ease-out;
+    border-radius: 4px;
+    border: transparent;
+    outline: none; }
+  .form-control-file.form-control-file-rounded::-webkit-file-upload-button {
+    -webkit-border-radius: 1.875rem !important;
+    -moz-border-radius: 1.875rem !important;
+    -ms-border-radius: 1.875rem !important;
+    -o-border-radius: 1.875rem !important;
+    border-radius: 1.875rem !important; }
+
+select.form-control.form-custom {
+  display: inline-block;
+  width: 100%;
+  height: calc(2.25rem + 2px);
+  vertical-align: middle;
+  background: #fff url(../img/arrow-down.png) no-repeat right 0.75rem center;
+  background-size: 13px 14px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none; }
+
+/*      Form Control Custom File       */
+.custom-file {
+  height: auto; }
+  .custom-file input {
+    height: auto; }
+
+.custom-file-label {
+  height: auto;
+  border: 1px solid #f1f2f3;
+  color: #3b3f5c;
+  font-size: 15px;
+  padding: 8px 10px;
+  letter-spacing: 1px;
+  background-color: #f1f2f3; }
+  .custom-file-label::after {
+    height: auto;
+    padding: 8px 12px;
+    color: #515365; }
+
+/*      Input Group      */
+.input-group button:hover, .input-group .btn:hover, .input-group button:focus, .input-group .btn:focus {
+  transform: none; }
+
+.input-group .input-group-prepend .input-group-text {
+  border: 1px solid #bfc9d4;
+  background-color: #f1f2f3; }
+  .input-group .input-group-prepend .input-group-text svg {
+    color: #888ea8; }
+
+.input-group:hover .input-group-prepend .input-group-text svg {
+  color: #1b55e2;
+  fill: rgba(27, 85, 226, 0.239216); }
+
+.input-group .input-group-append .input-group-text {
+  border: 1px solid #bfc9d4;
+  background-color: #f1f2f3; }
+  .input-group .input-group-append .input-group-text svg {
+    color: #888ea8; }
+
+.input-group:hover .input-group-append .input-group-text svg {
+  color: #1b55e2;
+  fill: rgba(27, 85, 226, 0.239216); }
+
+/*      Input Group append       */
+/*      Input Group Append       */
+/*      Validation Customization      */
+.invalid-feedback {
+  color: #e7515a;
+  font-size: 13px;
+  font-weight: 700;
+  letter-spacing: 1px; }
+
+.valid-feedback {
+  color: #8dbf42;
+  font-size: 13px;
+  font-weight: 700;
+  letter-spacing: 1px; }
+
+.valid-tooltip {
+  background-color: #8dbf42; }
+
+.invalid-tooltip {
+  background-color: #e7515a; }
+
+.custom-select.is-valid, .form-control.is-valid {
+  border-color: #8dbf42;
+  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%238dbf42' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-check'%3e%3cpolyline points='20 6 9 17 4 12'%3e%3c/polyline%3e%3c/svg%3e"); }
+
+.was-validated .custom-select:valid, .was-validated .form-control:valid {
+  border-color: #8dbf42;
+  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%238dbf42' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-check'%3e%3cpolyline points='20 6 9 17 4 12'%3e%3c/polyline%3e%3c/svg%3e"); }
+
+.custom-control-input.is-valid ~ .custom-control-label, .was-validated .custom-control-input:valid ~ .custom-control-label {
+  color: #8dbf42; }
+
+.form-control.is-invalid, .was-validated .form-control:invalid {
+  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23e7515a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-x'%3e%3cline x1='18' y1='6' x2='6' y2='18'%3e%3c/line%3e%3cline x1='6' y1='6' x2='18' y2='18'%3e%3c/line%3e%3c/svg%3e"); }
+
+.custom-control-input.is-invalid ~ .custom-control-label, .was-validated .custom-control-input:invalid ~ .custom-control-label {
+  color: #e7515a; }
+
+.dropdown-toggle:after, .dropup .dropdown-toggle::after, .dropright .dropdown-toggle::after, .dropleft .dropdown-toggle::before {
+  display: none; }
+
+.dropdown-toggle svg.feather[class*="feather-chevron-"] {
+  width: 15px;
+  height: 15px;
+  vertical-align: middle; }
+
+.btn {
+  padding: 0.4375rem 1.25rem;
+  text-shadow: none;
+  font-size: 14px;
+  color: #3b3f5c;
+  font-weight: normal;
+  white-space: normal;
+  word-wrap: break-word;
+  transition: .2s ease-out;
+  touch-action: manipulation;
+  cursor: pointer;
+  background-color: #f1f2f3;
+  box-shadow: 0px 5px 20px 0 rgba(0, 0, 0, 0.1);
+  will-change: opacity, transform;
+  transition: all 0.3s ease-out;
+  -webkit-transition: all 0.3s ease-out; }
+  .btn svg {
+    width: 20px;
+    height: 20px;
+    vertical-align: bottom; }
+  .btn.rounded-circle {
+    height: 40px;
+    width: 40px;
+    padding: 8px 8px; }
+  .btn:hover, .btn:focus {
+    color: #3b3f5c;
+    background-color: #f1f2f3;
+    border-color: #d3d3d3;
+    -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
+    -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
+    box-shadow: 0 2px 5px 0 #e0e6ed,0 2px 10px 0 #e0e6ed;
+    -webkit-transform: translateY(-3px);
+    transform: translateY(-3px); }
+
+.btn-group .btn:hover, .btn-group .btn:focus {
+  -webkit-transform: none;
+  transform: none; }
+
+.btn.disabled, .btn.btn[disabled] {
+  background-color: #f1f2f3;
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+  border: 1px solid rgba(0, 0, 0, 0.13); }
+
+.btn.disabled:hover, .btn.btn[disabled]:hover {
+  cursor: not-allowed; }
+
+.btn .caret {
+  border-top-color: #0e1726;
+  margin-top: 0;
+  margin-left: 3px;
+  vertical-align: middle; }
+
+.btn + .caret, .btn + .dropdown-toggle .caret {
+  margin-left: 0; }
+
+.btn-group > .btn, .btn-group .btn {
+  padding: 8px 14px; }
+
+.btn-group-lg > .btn, .btn-group-lg .btn {
+  font-size: 1.125rem; }
+
+.btn-group-lg > .btn {
+  padding: .625rem 1.5rem;
+  font-size: 16px; }
+
+.btn-lg {
+  padding: .625rem 1.5rem;
+  font-size: 16px; }
+
+.btn-group > .btn.btn-lg, .btn-group .btn.btn-lg {
+  padding: .625rem 1.5rem;
+  font-size: 16px; }
+
+.btn-group-lg > .btn, .btn-group-lg .btn {
+  font-size: 1.125rem; }
+
+.btn-group-sm > .btn, .btn-sm {
+  font-size: 0.6875rem; }
+
+.btn-group > .btn.btn-sm, .btn-group .btn.btn-sm {
+  font-size: 0.6875rem; }
+
+.btn-group .dropdown-menu {
+  border: 1px solid #e0e6ed;
+  box-shadow: rgba(113, 106, 202, 0.2) 0px 0px 15px 1px;
+  padding: 10px;
+  border-width: initial;
+  border-style: none;
+  border-color: initial;
+  border-image: initial; }
+  .btn-group .dropdown-menu a.dropdown-item {
+    border-radius: 5px;
+    font-size: 12px;
+    font-weight: 700;
+    color: #888ea8;
+    padding: 11px 8px; }
+    .btn-group .dropdown-menu a.dropdown-item:hover {
+      background-color: #f1f2f3; }
+    .btn-group .dropdown-menu a.dropdown-item svg {
+      cursor: pointer;
+      color: #888ea8;
+      margin-right: 6px;
+      vertical-align: middle;
+      width: 20px;
+      height: 20px;
+      fill: rgba(0, 23, 55, 0.08); }
+    .btn-group .dropdown-menu a.dropdown-item:hover svg {
+      color: #1b55e2; }
+
+.dropdown:not(.custom-dropdown-icon) .dropdown-menu {
+  border: none;
+  border: 1px solid #e0e6ed;
+  z-index: 899;
+  box-shadow: rgba(113, 106, 202, 0.2) 0px 0px 15px 1px;
+  padding: 10px;
+  border-width: initial;
+  border-style: none;
+  border-color: initial;
+  border-image: initial; }
+  .dropdown:not(.custom-dropdown-icon) .dropdown-menu a.dropdown-item {
+    font-size: 12px;
+    font-weight: 700;
+    color: #888ea8;
+    padding: 11px 8px; }
+    .dropdown:not(.custom-dropdown-icon) .dropdown-menu a.dropdown-item.active, .dropdown:not(.custom-dropdown-icon) .dropdown-menu a.dropdown-item:active {
+      background-color: transparent;
+      color: #3b3f5c;
+      font-weight: 700; }
+    .dropdown:not(.custom-dropdown-icon) .dropdown-menu a.dropdown-item:hover {
+      color: #888ea8;
+      background-color: #f1f2f3; }
+
+.btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled):active:focus {
+  box-shadow: none; }
+
+.show > .btn-primary.dropdown-toggle:focus {
+  box-shadow: none; }
+
+.btn-secondary:not(:disabled):not(.disabled).active:focus, .btn-secondary:not(:disabled):not(.disabled):active:focus {
+  box-shadow: none; }
+
+.show > .btn-secondary.dropdown-toggle:focus {
+  box-shadow: none; }
+
+.btn-success:not(:disabled):not(.disabled).active:focus, .btn-success:not(:disabled):not(.disabled):active:focus {
+  box-shadow: none; }
+
+.show > .btn-success.dropdown-toggle:focus {
+  box-shadow: none; }
+
+.btn-info:not(:disabled):not(.disabled).active:focus, .btn-info:not(:disabled):not(.disabled):active:focus {
+  box-shadow: none; }
+
+.show > .btn-info.dropdown-toggle:focus {
+  box-shadow: none; }
+
+.btn-danger:not(:disabled):not(.disabled).active:focus, .btn-danger:not(:disabled):not(.disabled):active:focus {
+  box-shadow: none; }
+
+.show > .btn-danger.dropdown-toggle:focus {
+  box-shadow: none; }
+
+.btn-warning:not(:disabled):not(.disabled).active:focus, .btn-warning:not(:disabled):not(.disabled):active:focus {
+  box-shadow: none; }
+
+.show > .btn-warning.dropdown-toggle:focus {
+  box-shadow: none; }
+
+.btn-secondary:not(:disabled):not(.disabled).active:focus, .btn-secondary:not(:disabled):not(.disabled):active:focus {
+  box-shadow: none; }
+
+.show > .btn-secondary.dropdown-toggle:focus {
+  box-shadow: none; }
+
+.btn-dark:not(:disabled):not(.disabled).active:focus, .btn-dark:not(:disabled):not(.disabled):active:focus {
+  box-shadow: none; }
+
+.show > .btn-dark.dropdown-toggle:focus {
+  box-shadow: none; }
+
+.btn-outline-primary:not(:disabled):not(.disabled).active:focus, .btn-outline-primary:not(:disabled):not(.disabled):active:focus {
+  box-shadow: none; }
+
+.show > .btn-outline-primary.dropdown-toggle:focus {
+  box-shadow: none; }
+
+.btn-outline-success:not(:disabled):not(.disabled).active:focus, .btn-outline-success:not(:disabled):not(.disabled):active:focus {
+  box-shadow: none; }
+
+.show > .btn-outline-success.dropdown-toggle:focus {
+  box-shadow: none; }
+
+.btn-outline-info:not(:disabled):not(.disabled).active:focus, .btn-outline-info:not(:disabled):not(.disabled):active:focus {
+  box-shadow: none; }
+
+.show > .btn-outline-info.dropdown-toggle:focus {
+  box-shadow: none; }
+
+.btn-outline-danger:not(:disabled):not(.disabled).active:focus, .btn-outline-danger:not(:disabled):not(.disabled):active:focus {
+  box-shadow: none; }
+
+.show > .btn-outline-danger.dropdown-toggle:focus {
+  box-shadow: none; }
+
+.btn-outline-warning:not(:disabled):not(.disabled).active:focus, .btn-outline-warning:not(:disabled):not(.disabled):active:focus {
+  box-shadow: none; }
+
+.show > .btn-outline-warning.dropdown-toggle:focus {
+  box-shadow: none; }
+
+.btn-outline-secondary:not(:disabled):not(.disabled).active:focus, .btn-outline-secondary:not(:disabled):not(.disabled):active:focus {
+  box-shadow: none; }
+
+.show > .btn-outline-secondary.dropdown-toggle:focus {
+  box-shadow: none; }
+
+.btn-outline-dark:not(:disabled):not(.disabled).active:focus, .btn-outline-dark:not(:disabled):not(.disabled):active:focus {
+  box-shadow: none; }
+
+.show > .btn-outline-dark.dropdown-toggle:focus {
+  box-shadow: none; }
+
+.btn.focus, .btn:focus {
+  box-shadow: none; }
+
+.btn-success:focus, .btn-info:focus, .btn-danger:focus, .btn-warning:focus, .btn-secondary:focus, .btn-dark:focus, .btn-outline-success:focus, .btn-outline-info:focus, .btn-outline-danger:focus, .btn-outline-warning:focus, .btn-outline-secondary:focus, .btn-outline-dark:focus .btn-light-default:focus, .btn-light-primary:focus, .btn-light-success:focus, .btn-light-info:focus, .btn-light-danger:focus, .btn-light-warning:focus, .btn-light-secondary:focus, .btn-light-dark:focus {
+  box-shadow: none; }
+
+/*      Default Buttons       */
+.btn-primary {
+  color: #fff !important;
+  background-color: #1b55e2 !important;
+  border-color: #1b55e2; }
+  .btn-primary:hover, .btn-primary:focus {
+    color: #fff !important;
+    background-color: #1b55e2;
+    box-shadow: none;
+    border-color: #1b55e2; }
+  .btn-primary:active, .btn-primary.active {
+    background-color: #1b55e2;
+    border-top: 1px solid #1b55e2; }
+  .btn-primary.disabled, .btn-primary.btn[disabled], .btn-primary:disabled {
+    background-color: #1b55e2;
+    border-color: #1b55e2;
+    -webkit-box-shadow: none;
+    -moz-box-shadow: none;
+    box-shadow: none; }
+  .btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.active:hover {
+    color: #fff !important;
+    background-color: #2aebcb;
+    border-color: #2aebcb; }
+  .btn-primary.focus:active {
+    color: #fff !important;
+    background-color: #2aebcb;
+    border-color: #2aebcb; }
+  .btn-primary:active:focus, .btn-primary:active:hover {
+    color: #fff !important;
+    background-color: #2aebcb;
+    border-color: #2aebcb; }
+
+.open > .dropdown-toggle.btn-primary.focus, .open > .dropdown-toggle.btn-primary:focus, .open > .dropdown-toggle.btn-primary:hover {
+  color: #fff !important;
+  background-color: #2aebcb;
+  border-color: #2aebcb; }
+
+.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active {
+  color: #fff !important;
+  background-color: #1b55e2;
+  border-color: #1b55e2; }
+
+.show > .btn-primary.dropdown-toggle {
+  color: #fff !important;
+  background-color: #1b55e2;
+  border-color: #1b55e2; }
+
+.btn-primary .caret {
+  border-top-color: #fff; }
+
+.btn-group.open .btn-primary.dropdown-toggle {
+  background-color: #c2d5ff; }
+
+.btn-secondary {
+  color: #fff !important;
+  background-color: #5c1ac3;
+  border-color: #5c1ac3; }
+  .btn-secondary:hover, .btn-secondary:focus {
+    color: #fff !important;
+    background-color: #5c1ac3;
+    box-shadow: none;
+    border-color: #5c1ac3; }
+  .btn-secondary:active, .btn-secondary.active {
+    background-color: #5c1ac3;
+    border-top: 1px solid #5c1ac3; }
+  .btn-secondary:not(:disabled):not(.disabled).active, .btn-secondary:not(:disabled):not(.disabled):active {
+    color: #fff !important;
+    background-color: #5c1ac3;
+    border-color: #5c1ac3; }
+
+.show > .btn-secondary.dropdown-toggle {
+  color: #fff !important;
+  background-color: #5c1ac3;
+  border-color: #5c1ac3; }
+
+.btn-secondary.disabled, .btn-secondary.btn[disabled], .btn-secondary:disabled {
+  background-color: #5c1ac3;
+  border-color: #5c1ac3;
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none; }
+
+.btn-secondary .caret {
+  border-top-color: #fff; }
+
+.btn-info {
+  color: #fff !important;
+  background-color: #2196f3;
+  border-color: #2196f3; }
+  .btn-info:hover, .btn-info:focus {
+    color: #fff !important;
+    background-color: #2196f3;
+    box-shadow: none;
+    border-color: #2196f3; }
+  .btn-info:active, .btn-info.active {
+    background-color: #2196f3;
+    border-top: 1px solid #2196f3; }
+  .btn-info:not(:disabled):not(.disabled).active, .btn-info:not(:disabled):not(.disabled):active {
+    color: #fff !important;
+    background-color: #2196f3;
+    border-color: #2196f3; }
+
+.show > .btn-info.dropdown-toggle {
+  color: #fff !important;
+  background-color: #2196f3;
+  border-color: #2196f3; }
+
+.btn-info.disabled, .btn-info.btn[disabled], .btn-info:disabled {
+  background-color: #2196f3;
+  border-color: #2196f3;
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none; }
+
+.btn-info.active.focus, .btn-info.active:focus, .btn-info.active:hover {
+  color: #fff !important;
+  background-color: #2196f3;
+  border-color: #2196f3; }
+
+.btn-info.focus:active {
+  color: #fff !important;
+  background-color: #2196f3;
+  border-color: #2196f3; }
+
+.btn-info:active:focus, .btn-info:active:hover {
+  color: #fff !important;
+  background-color: #2196f3;
+  border-color: #2196f3; }
+
+.open > .dropdown-toggle.btn-info.focus, .open > .dropdown-toggle.btn-info:focus, .open > .dropdown-toggle.btn-info:hover {
+  color: #fff !important;
+  background-color: #2196f3;
+  border-color: #2196f3; }
+
+.btn-info .caret {
+  border-top-color: #fff; }
+
+.btn-group.open .btn-info.dropdown-toggle {
+  background-color: #bae7ff; }
+
+.btn-warning {
+  color: #fff !important;
+  background-color: #e2a03f;
+  border-color: #e2a03f; }
+  .btn-warning:hover, .btn-warning:focus {
+    color: #fff !important;
+    background-color: #e2a03f;
+    box-shadow: none;
+    border-color: #e2a03f; }
+  .btn-warning:active, .btn-warning.active {
+    background-color: #e2a03f;
+    border-top: 1px solid #e2a03f; }
+  .btn-warning:not(:disabled):not(.disabled).active, .btn-warning:not(:disabled):not(.disabled):active {
+    color: #0e1726;
+    background-color: #e2a03f;
+    border-color: #e2a03f; }
+
+.show > .btn-warning.dropdown-toggle {
+  color: #0e1726;
+  background-color: #e2a03f;
+  border-color: #e2a03f; }
+
+.btn-warning.disabled, .btn-warning.btn[disabled], .btn-warning:disabled {
+  background-color: #e2a03f;
+  border-color: #e2a03f;
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none; }
+
+.btn-warning.active.focus, .btn-warning.active:focus, .btn-warning.active:hover {
+  color: #fff !important;
+  background-color: #e2a03f;
+  border-color: #e2a03f; }
+
+.btn-warning.focus:active {
+  color: #fff !important;
+  background-color: #e2a03f;
+  border-color: #e2a03f; }
+
+.btn-warning:active:focus, .btn-warning:active:hover {
+  color: #fff !important;
+  background-color: #e2a03f;
+  border-color: #e2a03f; }
+
+.open > .dropdown-toggle.btn-warning.focus, .open > .dropdown-toggle.btn-warning:focus, .open > .dropdown-toggle.btn-warning:hover {
+  color: #fff !important;
+  background-color: #e2a03f;
+  border-color: #e2a03f; }
+
+.btn-warning .caret {
+  border-top-color: #fff; }
+
+.btn-group.open .btn-warning.dropdown-toggle {
+  background-color: #df8505; }
+
+.btn-danger {
+  color: #fff !important;
+  background-color: #e7515a;
+  border-color: #e7515a; }
+  .btn-danger:hover, .btn-danger:focus {
+    color: #fff !important;
+    background-color: #e7515a;
+    box-shadow: none;
+    border-color: #e7515a; }
+  .btn-danger:active, .btn-danger.active {
+    background-color: #e7515a;
+    border-top: 1px solid #e7515a; }
+  .btn-danger:not(:disabled):not(.disabled).active, .btn-danger:not(:disabled):not(.disabled):active {
+    color: #fff !important;
+    background-color: #e7515a;
+    border-color: #e7515a; }
+
+.show > .btn-danger.dropdown-toggle {
+  color: #fff !important;
+  background-color: #e7515a;
+  border-color: #e7515a; }
+
+.btn-danger.disabled, .btn-danger.btn[disabled], .btn-danger:disabled {
+  background-color: #e7515a;
+  border-color: #e7515a;
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none; }
+
+.btn-danger.active.focus, .btn-danger.active:focus, .btn-danger.active:hover {
+  color: #fff !important;
+  background-color: #c00;
+  border-color: #c00; }
+
+.btn-danger.focus:active {
+  color: #fff !important;
+  background-color: #c00;
+  border-color: #c00; }
+
+.btn-danger:active:focus, .btn-danger:active:hover {
+  color: #fff !important;
+  background-color: #c00;
+  border-color: #c00; }
+
+.open > .dropdown-toggle.btn-danger.focus, .open > .dropdown-toggle.btn-danger:focus, .open > .dropdown-toggle.btn-danger:hover {
+  color: #fff !important;
+  background-color: #c00;
+  border-color: #c00; }
+
+.btn-danger .caret {
+  border-top-color: #fff; }
+
+.btn-group.open .btn-danger.dropdown-toggle {
+  background-color: #a9302a; }
+
+.btn-dark {
+  color: #fff !important;
+  background-color: #3b3f5c;
+  border-color: #3b3f5c; }
+  .btn-dark:hover, .btn-dark:focus {
+    color: #fff !important;
+    background-color: #3b3f5c;
+    box-shadow: none;
+    border-color: #3b3f5c; }
+  .btn-dark:active, .btn-dark.active {
+    background-color: #3b3f5c;
+    border-top: 1px solid #3b3f5c; }
+  .btn-dark:not(:disabled):not(.disabled).active, .btn-dark:not(:disabled):not(.disabled):active {
+    color: #fff !important;
+    background-color: #3b3f5c;
+    border-color: #3b3f5c; }
+
+.show > .btn-dark.dropdown-toggle {
+  color: #fff !important;
+  background-color: #3b3f5c;
+  border-color: #3b3f5c; }
+
+.btn-dark.disabled, .btn-dark.btn[disabled], .btn-dark:disabled {
+  background-color: #3b3f5c;
+  border-color: #3b3f5c;
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none; }
+
+.btn-dark .caret {
+  border-top-color: #fff; }
+
+.btn-group.open .btn-dark.dropdown-toggle {
+  background-color: #484848; }
+
+.btn-success {
+  color: #fff !important;
+  background-color: #8dbf42;
+  border-color: #8dbf42; }
+  .btn-success:hover, .btn-success:focus {
+    color: #fff !important;
+    background-color: #8dbf42;
+    box-shadow: none;
+    border-color: #8dbf42; }
+  .btn-success:active, .btn-success.active {
+    background-color: #8dbf42;
+    border-top: 1px solid #8dbf42; }
+  .btn-success:not(:disabled):not(.disabled).active, .btn-success:not(:disabled):not(.disabled):active {
+    color: #fff !important;
+    background-color: #8dbf42;
+    border-color: #8dbf42; }
+
+.show > .btn-success.dropdown-toggle {
+  color: #fff !important;
+  background-color: #8dbf42;
+  border-color: #8dbf42; }
+
+.btn-success.disabled, .btn-success.btn[disabled], .btn-success:disabled {
+  background-color: #8dbf42;
+  border-color: #8dbf42;
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none; }
+
+.btn-success.active.focus, .btn-success.active:focus, .btn-success.active:hover {
+  color: #fff !important;
+  background-color: #17c678;
+  border-color: #17c678; }
+
+.btn-success.focus:active {
+  color: #fff !important;
+  background-color: #17c678;
+  border-color: #17c678; }
+
+.btn-success:active:focus, .btn-success:active:hover {
+  color: #fff !important;
+  background-color: #17c678;
+  border-color: #17c678; }
+
+.open > .dropdown-toggle.btn-success.focus, .open > .dropdown-toggle.btn-success:focus, .open > .dropdown-toggle.btn-success:hover {
+  color: #fff !important;
+  background-color: #17c678;
+  border-color: #17c678; }
+
+.btn-success .caret {
+  border-top-color: #fff; }
+
+/*-----/Button Light Colors------*/
+.btn.box-shadow-none {
+  border: none; }
+  .btn.box-shadow-none:hover, .btn.box-shadow-none:focus {
+    border: none;
+    -webkit-box-shadow: none;
+    -moz-box-shadow: none;
+    box-shadow: none;
+    background-color: transparent; }
+
+.box-shadow-none {
+  -webkit-box-shadow: none !important;
+  -moz-box-shadow: none !important;
+  box-shadow: none !important; }
+
+.btn.box-shadow-none:not(:disabled):not(.disabled).active, .btn.box-shadow-none:not(:disabled):not(.disabled):active {
+  border: none;
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+  background-color: transparent; }
+
+.show > .btn.box-shadow-none.dropdown-toggle {
+  border: none;
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+  background-color: transparent; }
+
+.btn-group.open .btn-success.dropdown-toggle {
+  background-color: #499249; }
+
+.btn-dismiss {
+  color: #0e1726;
+  background-color: #fff !important;
+  border-color: #fff;
+  padding: 3px 7px; }
+  .btn-dismiss:hover, .btn-dismiss:focus {
+    color: #0e1726;
+    background-color: #fff; }
+  .btn-dismiss:active, .btn-dismiss.active {
+    background-color: #fff;
+    border-top: 1px solid #fff; }
+
+.btn-group > .btn i {
+  margin-right: 3px; }
+
+.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  -webkit-box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.16), 0 0px 0px 0 rgba(0, 0, 0, 0.12);
+  -moz-box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.16), 0 0px 0px 0 rgba(0, 0, 0, 0.12);
+  box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.16), 0 0px 0px 0 rgba(0, 0, 0, 0.12); }
+
+.btn-group > .btn + .dropdown-toggle {
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none; }
+  .btn-group > .btn + .dropdown-toggle.btn-primary {
+    border-left: 1px solid #4468fd; }
+  .btn-group > .btn + .dropdown-toggle.btn-success {
+    border-left: 1px solid #a3c66f; }
+  .btn-group > .btn + .dropdown-toggle.btn-info {
+    border-left: 1px solid #49acfb; }
+  .btn-group > .btn + .dropdown-toggle.btn-warning {
+    border-left: 1px solid #f5b455; }
+  .btn-group > .btn + .dropdown-toggle.btn-danger {
+    border-left: 1px solid #f1848b; }
+  .btn-group > .btn + .dropdown-toggle.btn-dark {
+    border-left: 1px solid #70767a; }
+  .btn-group > .btn + .dropdown-toggle.btn-secondary {
+    border-left: 1px solid #8353dc; }
+
+.btn-group.dropleft .dropdown-toggle-split {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0; }
+
+.btn-group.dropleft .btn-primary:not(.dropdown-toggle-split) {
+  border-left: 1px solid #4468fd; }
+
+.btn-group.dropleft .btn-success:not(.dropdown-toggle-split) {
+  border-left: 1px solid #a3c66f; }
+
+.btn-group.dropleft .btn-info:not(.dropdown-toggle-split) {
+  border-left: 1px solid #49acfb; }
+
+.btn-group.dropleft .btn-warning:not(.dropdown-toggle-split) {
+  border-left: 1px solid #f5b455; }
+
+.btn-group.dropleft .btn-danger:not(.dropdown-toggle-split) {
+  border-left: 1px solid #f1848b; }
+
+.btn-group.dropleft .btn-dark:not(.dropdown-toggle-split) {
+  border-left: 1px solid #70767a; }
+
+.btn-group.dropleft .btn-secondary:not(.dropdown-toggle-split) {
+  border-left: 1px solid #8353dc; }
+
+/*
+    Btn group dropdown-toggle
+*/
+.btn .badge.badge-align-right {
+  position: absolute;
+  top: -1px;
+  right: 8px; }
+
+.dropup .btn .caret {
+  border-bottom-color: #0e1726; }
+
+.btn-outline-primary:not(:disabled):not(.disabled).active, .btn-outline-primary:not(:disabled):not(.disabled):active {
+  background-color: #1b55e2;
+  color: #fff !important; }
+
+.show > .btn-outline-primary.dropdown-toggle {
+  background-color: #1b55e2;
+  color: #fff !important; }
+
+.btn-outline-success:not(:disabled):not(.disabled).active, .btn-outline-success:not(:disabled):not(.disabled):active {
+  background-color: #8dbf42;
+  color: #fff !important; }
+
+.show > .btn-outline-success.dropdown-toggle {
+  background-color: #8dbf42;
+  color: #fff !important; }
+
+.btn-outline-info:not(:disabled):not(.disabled).active, .btn-outline-info:not(:disabled):not(.disabled):active {
+  background-color: #2196f3;
+  color: #fff !important; }
+
+.show > .btn-outline-info.dropdown-toggle {
+  background-color: #2196f3;
+  color: #fff !important; }
+
+.btn-outline-danger:not(:disabled):not(.disabled).active, .btn-outline-danger:not(:disabled):not(.disabled):active {
+  background-color: #e7515a;
+  color: #fff !important; }
+
+.show > .btn-outline-danger.dropdown-toggle {
+  background-color: #e7515a;
+  color: #fff !important; }
+
+.btn-outline-warning:not(:disabled):not(.disabled).active, .btn-outline-warning:not(:disabled):not(.disabled):active {
+  background-color: #e2a03f;
+  color: #fff !important; }
+
+.show > .btn-outline-warning.dropdown-toggle {
+  background-color: #e2a03f;
+  color: #fff !important; }
+
+.btn-outline-secondary:not(:disabled):not(.disabled).active, .btn-outline-secondary:not(:disabled):not(.disabled):active {
+  background-color: #5c1ac3;
+  color: #fff !important; }
+
+.show > .btn-outline-secondary.dropdown-toggle {
+  background-color: #5c1ac3;
+  color: #fff !important; }
+
+.btn-outline-dark:not(:disabled):not(.disabled).active, .btn-outline-dark:not(:disabled):not(.disabled):active {
+  background-color: #3b3f5c;
+  color: #fff !important; }
+
+.show > .btn-outline-dark.dropdown-toggle {
+  background-color: #3b3f5c;
+  color: #fff !important; }
+
+.show > .btn-outline-primary.dropdown-toggle:after, .show > .btn-outline-success.dropdown-toggle:after, .show > .btn-outline-info.dropdown-toggle:after, .show > .btn-outline-danger.dropdown-toggle:after, .show > .btn-outline-warning.dropdown-toggle:after, .show > .btn-outline-secondary.dropdown-toggle:after, .show > .btn-outline-dark.dropdown-toggle:after, .show > .btn-outline-primary.dropdown-toggle:before, .show > .btn-outline-success.dropdown-toggle:before, .show > .btn-outline-info.dropdown-toggle:before, .show > .btn-outline-danger.dropdown-toggle:before, .show > .btn-outline-warning.dropdown-toggle:before, .show > .btn-outline-secondary.dropdown-toggle:before, .show > .btn-outline-dark.dropdown-toggle:before {
+  color: #fff !important; }
+
+.btn-outline-primary {
+  border: 1px solid #1b55e2 !important;
+  color: #1b55e2 !important;
+  background-color: transparent;
+  box-shadow: none; }
+
+.btn-outline-info {
+  border: 1px solid #2196f3 !important;
+  color: #2196f3 !important;
+  background-color: transparent;
+  box-shadow: none; }
+
+.btn-outline-warning {
+  border: 1px solid #e2a03f !important;
+  color: #e2a03f !important;
+  background-color: transparent;
+  box-shadow: none; }
+
+.btn-outline-success {
+  border: 1px solid #8dbf42 !important;
+  color: #8dbf42 !important;
+  background-color: transparent;
+  box-shadow: none; }
+
+.btn-outline-danger {
+  border: 1px solid #e7515a !important;
+  color: #e7515a !important;
+  background-color: transparent;
+  box-shadow: none; }
+
+.btn-outline-secondary {
+  border: 1px solid #5c1ac3 !important;
+  color: #5c1ac3 !important;
+  background-color: transparent;
+  box-shadow: none; }
+
+.btn-outline-dark {
+  border: 1px solid #3b3f5c !important;
+  color: #3b3f5c !important;
+  background-color: transparent;
+  box-shadow: none; }
+
+.btn-outline-primary:hover, .btn-outline-info:hover, .btn-outline-warning:hover, .btn-outline-success:hover, .btn-outline-danger:hover, .btn-outline-secondary:hover, .btn-outline-dark:hover {
+  box-shadow: 0px 5px 20px 0 rgba(0, 0, 0, 0.1); }
+
+.btn-outline-primary:hover {
+  color: #fff !important;
+  background-color: #1b55e2; }
+
+.btn-outline-info:hover {
+  color: #fff !important;
+  background-color: #2196f3; }
+
+.btn-outline-warning:hover {
+  color: #fff !important;
+  background-color: #e2a03f; }
+
+.btn-outline-success:hover {
+  color: #fff !important;
+  background-color: #8dbf42; }
+
+.btn-outline-danger:hover {
+  color: #fff !important;
+  background-color: #e7515a; }
+
+.btn-outline-secondary:hover {
+  color: #fff !important;
+  background-color: #5c1ac3; }
+
+.btn-outline-dark:hover {
+  color: #fff !important;
+  background-color: #3b3f5c; }
+
+/*      Dropdown Toggle       */
+.btn-rounded {
+  -webkit-border-radius: 1.875rem !important;
+  -moz-border-radius: 1.875rem !important;
+  -ms-border-radius: 1.875rem !important;
+  -o-border-radius: 1.875rem !important;
+  border-radius: 1.875rem !important; }
+
+/*
+    ===========================
+        Data Marker ( dot )
+    ===========================
+*/
+.data-marker {
+  padding: 2px;
+  border-radius: 50%;
+  font-size: 18px;
+  display: inline-flex;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  align-items: center;
+  justify-content: center; }
+
+.data-marker-success {
+  background-color: #8dbf42; }
+
+.data-marker-warning {
+  background-color: #e2a03f; }
+
+.data-marker-danger, .data-marker-info, .data-marker-dark {
+  background-color: #e7515a; }
+
+.badge {
+  font-weight: 600;
+  line-height: 1.4;
+  padding: 3px 6px;
+  font-size: 12px;
+  font-weight: 600;
+  transition: all 0.3s ease-out;
+  -webkit-transition: all 0.3s ease-out; }
+  .badge:hover {
+    transition: all 0.3s ease-out;
+    -webkit-transition: all 0.3s ease-out;
+    -webkit-transform: translateY(-3px);
+    transform: translateY(-3px); }
+  .badge.badge-enabled {
+    background-color: #8dbf42;
+    color: #fff; }
+  .badge.badge-disable {
+    background-color: #e7515a;
+    color: #fff; }
+
+.badge-pills {
+  border-radius: 30px; }
+
+.badge-classic {
+  border-radius: 0; }
+
+.badge-collapsed-img img {
+  width: 40px;
+  height: 40px;
+  border-radius: 20px;
+  border: 2px solid #ffffff;
+  box-shadow: 0px 0px 15px 1px rgba(113, 106, 202, 0.3);
+  margin-left: -21px; }
+
+.badge-collapsed-img.badge-tooltip img {
+  width: 40px;
+  height: 40px;
+  border-radius: 20px;
+  border: 2px solid #ffffff;
+  box-shadow: 0px 0px 15px 1px rgba(113, 106, 202, 0.3);
+  margin-left: -21px;
+  -webkit-transition: all 0.35s ease;
+  transition: all 0.35s ease; }
+  .badge-collapsed-img.badge-tooltip img:hover {
+    -webkit-transform: translateY(-5px) scale(1.02);
+    transform: translateY(-5px) scale(1.02); }
+
+.badge-collapsed-img.translateY-axis img {
+  -webkit-transition: all 0.35s ease;
+  transition: all 0.35s ease; }
+  .badge-collapsed-img.translateY-axis img:hover {
+    -webkit-transform: translateY(-5px) scale(1.02);
+    transform: translateY(-5px) scale(1.02); }
+
+.badge-collapsed-img.rectangle-collapsed img {
+  width: 45px;
+  height: 32px; }
+
+.badge-collapsed-img.translateX-axis img {
+  -webkit-transition: all 0.35s ease;
+  transition: all 0.35s ease; }
+  .badge-collapsed-img.translateX-axis img:hover {
+    -webkit-transform: translateX(5px) scale(1.02);
+    transform: translateX(5px) scale(1.02); }
+
+.badge-primary {
+  color: #fff;
+  background-color: #1b55e2; }
+
+.badge-info {
+  color: #fff;
+  background-color: #2196f3; }
+
+.badge-success {
+  color: #fff;
+  background-color: #8dbf42; }
+
+.badge-danger {
+  color: #fff;
+  background-color: #e7515a; }
+
+.badge-warning {
+  color: #fff;
+  background-color: #e2a03f; }
+
+.badge-dark {
+  color: #fff;
+  background-color: #3b3f5c; }
+
+.badge-secondary {
+  background-color: #5c1ac3; }
+
+.outline-badge-primary {
+  color: #1b55e2;
+  background-color: transparent;
+  border: 1px solid #1b55e2; }
+
+.outline-badge-info {
+  color: #2196f3;
+  background-color: transparent;
+  border: 1px solid #2196f3; }
+
+.outline-badge-success {
+  color: #8dbf42;
+  background-color: transparent;
+  border: 1px solid #8dbf42; }
+
+.outline-badge-danger {
+  color: #e7515a;
+  background-color: transparent;
+  border: 1px solid #e7515a; }
+
+.outline-badge-warning {
+  color: #e2a03f;
+  background-color: transparent;
+  border: 1px solid #e2a03f; }
+
+.outline-badge-dark {
+  color: #3b3f5c;
+  background-color: transparent;
+  border: 1px solid #3b3f5c; }
+
+.outline-badge-secondary {
+  color: #5c1ac3;
+  background-color: transparent;
+  border: 1px solid #5c1ac3; }
+
+.outline-badge-primary:focus, .outline-badge-primary:hover {
+  background-color: #c2d5ff;
+  color: #1b55e2; }
+
+.outline-badge-secondary:focus, .outline-badge-secondary:hover {
+  color: #5c1ac3;
+  background-color: #dccff7; }
+
+.outline-badge-success:focus, .outline-badge-success:hover {
+  color: #8dbf42;
+  background-color: #e6ffbf; }
+
+.outline-badge-danger:focus, .outline-badge-danger:hover {
+  color: #e7515a;
+  background-color: #ffe1e2; }
+
+.outline-badge-warning:focus, .outline-badge-warning:hover {
+  color: #e2a03f;
+  background-color: #ffeccb; }
+
+.outline-badge-info:focus, .outline-badge-info:hover {
+  color: #2196f3;
+  background-color: #bae7ff; }
+
+.outline-badge-dark:focus, .outline-badge-dark:hover {
+  color: #3b3f5c;
+  background-color: #acb0c3; }
+
+/*      Link     */
+.badge[class*="link-badge-"] {
+  cursor: pointer; }
+
+.link-badge-primary {
+  color: #1b55e2;
+  background-color: transparent;
+  border: 1px solid transparent; }
+
+.link-badge-info {
+  color: #2196f3;
+  background-color: transparent;
+  border: 1px solid transparent; }
+
+.link-badge-success {
+  color: #8dbf42;
+  background-color: transparent;
+  border: 1px solid transparent; }
+
+.link-badge-danger {
+  color: #e7515a;
+  background-color: transparent;
+  border: 1px solid transparent; }
+
+.link-badge-warning {
+  color: #e2a03f;
+  background-color: transparent;
+  border: 1px solid transparent; }
+
+.link-badge-dark {
+  color: #3b3f5c;
+  background-color: transparent;
+  border: 1px solid transparent; }
+
+.link-badge-secondary {
+  color: #5c1ac3;
+  background-color: transparent;
+  border: 1px solid transparent; }
+
+.link-badge-primary:focus, .link-badge-primary:hover {
+  color: #1b55e2;
+  background-color: transparent; }
+
+.link-badge-secondary:focus, .link-badge-secondary:hover {
+  color: #6f51ea;
+  background-color: transparent; }
+
+.link-badge-success:focus, .link-badge-success:hover {
+  color: #2ea37d;
+  background-color: transparent; }
+
+.link-badge-danger:focus, .link-badge-danger:hover {
+  color: #e7515a;
+  background-color: transparent; }
+
+.link-badge-warning:focus, .link-badge-warning:hover {
+  color: #dea82a;
+  background-color: transparent; }
+
+.link-badge-info:focus, .link-badge-info:hover {
+  color: #009eda;
+  background-color: transparent; }
+
+.link-badge-dark:focus, .link-badge-dark:hover {
+  color: #454656;
+  background-color: transparent; }
+
+/* Custom Dropdown*/
+.custom-dropdown .dropdown-toggle::after, .custom-dropdown-icon .dropdown-toggle::after, .custom-dropdown .dropdown-toggle::before, .custom-dropdown-icon .dropdown-toggle::before {
+  display: none; }
+
+.custom-dropdown .dropdown-menu, .custom-dropdown-icon .dropdown-menu {
+  min-width: 11rem;
+  border-radius: 4px;
+  border: none;
+  border: 1px solid #e0e6ed;
+  z-index: 899;
+  box-shadow: rgba(113, 106, 202, 0.2) 0px 0px 15px 1px;
+  top: 15px !important;
+  padding: 10px;
+  border-width: initial;
+  border-style: none;
+  border-color: initial;
+  border-image: initial; }
+
+.custom-dropdown .dropdown-item.active, .custom-dropdown .dropdown-item:active, .custom-dropdown .dropdown-item:hover {
+  color: #888ea8;
+  background-color: #f1f2f3; }
+
+.custom-dropdown-icon .dropdown-item.active, .custom-dropdown-icon .dropdown-item:active, .custom-dropdown-icon .dropdown-item:hover {
+  color: #888ea8;
+  background-color: #f1f2f3; }
+
+.custom-dropdown .dropdown-item {
+  font-size: 13px;
+  color: #888ea8;
+  display: block;
+  font-weight: 700;
+  padding: 11px 8px;
+  font-size: 12px; }
+
+.custom-dropdown-icon .dropdown-item {
+  font-size: 13px;
+  color: #888ea8;
+  display: block;
+  font-weight: 700;
+  padding: 11px 8px;
+  font-size: 12px; }
+
+.custom-dropdown-icon .dropdown-menu .dropdown-item svg {
+  width: 20px;
+  height: 20px;
+  margin-right: 3px;
+  color: #888ea8; }
+
+.custom-dropdown .dropdown-item.active svg, .custom-dropdown .dropdown-item:active svg, .custom-dropdown .dropdown-item:hover svg {
+  color: #1b55e2; }
+
+.custom-dropdown-icon .dropdown-item.active svg, .custom-dropdown-icon .dropdown-item:active svg, .custom-dropdown-icon .dropdown-item:hover svg {
+  color: #1b55e2; }
+
+.status.rounded-tooltip .tooltip-inner {
+  border-radius: 20px;
+  padding: 8px 20px; }
+
+.tooltip-inner {
+  -webkit-border-radius: 0;
+  -moz-border-radius: 0;
+  border-radius: 0; }
+
+.popover {
+  z-index: 999;
+  -webkit-border-radius: 0;
+  -moz-border-radius: 0;
+  border-radius: 0;
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+  border-bottom-color: #b3b3b3; }
+
+input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly], textarea[readonly] {
+  cursor: not-allowed;
+  background-color: #f1f2f3 !important;
+  color: #acb0c3; }
+
+.help-block, .help-inline {
+  color: #555555; }
+
+.controls {
+  position: relative; }
+
+.search-form-control {
+  border-radius: .25rem; }
+
+/*  Table   */
+.table-bordered {
+  border: 1px solid #f1f2f3; }
+
+.table-striped tbody tr:nth-of-type(odd) {
+  background-color: #f1f2f3 !important; }
+
+.table > tbody > tr > td {
+  vertical-align: middle;
+  color: #515365;
+  font-size: 13px;
+  letter-spacing: 1px; }
+
+.table > thead > tr > th {
+  color: #1b55e2;
+  font-weight: 700;
+  font-size: 13px;
+  letter-spacing: 1px;
+  text-transform: uppercase; }
+
+.table > tbody > tr > td .usr-img-frame {
+  background-color: #ebedf2;
+  padding: 2px;
+  width: 35px;
+  height: 35px; }
+  .table > tbody > tr > td .usr-img-frame img {
+    width: 35px;
+    margin: 0; }
+
+.table > tbody > tr > td .admin-name {
+  font-weight: 700;
+  color: #515365; }
+
+.table > tbody > tr > td .progress {
+  width: 135px;
+  height: 6px;
+  margin: auto 0; }
+
+.table > tbody > tr > td svg.icon {
+  width: 21px; }
+
+.table > tbody > tr > td .t-dot {
+  background-color: #000;
+  height: 11px;
+  width: 11px;
+  border-radius: 50%;
+  cursor: pointer;
+  margin: 0 auto; }
+
+.table > tbody > tr > td svg.t-icon {
+  padding: 5px;
+  border-radius: 50%;
+  font-size: 11px;
+  vertical-align: sub;
+  cursor: pointer; }
+  .table > tbody > tr > td svg.t-icon.t-hover-icon:hover {
+    background-color: #e7515a;
+    color: #fff; }
+
+.table-bordered td, .table-bordered th {
+  border: 1px solid #ebedf2; }
+
+.table thead th {
+  vertical-align: bottom;
+  border-bottom: none; }
+
+.table-hover:not(.table-dark) tbody tr:hover {
+  background-color: #f1f2f3 !important; }
+
+.table-controls > li > a svg {
+  color: #25d5e4; }
+
+.table tr td .custom-dropdown.t-custom-dropdown a.dropdown-toggle, .table tr td .custom-dropdown-icon.t-custom-dropdown a.dropdown-toggle {
+  border-radius: 5px;
+  border: 1px solid #d3d3d3; }
+
+.table-controls > li > a svg {
+  color: #888ea8;
+  width: 21px; }
+
+/*  Table Dark      */
+.table.table-dark > thead > tr > th {
+  color: #d3d3d3; }
+
+.table.table-dark > tbody > tr > td {
+  color: #ffffff; }
+
+.table-dark {
+  background-color: #060818; }
+  .table-dark.table-hover tbody tr {
+    background-color: #060818; }
+  .table-dark td, .table-dark th, .table-dark thead th {
+    border-color: #191e3a !important; }
+  .table-dark.table-hover tbody tr:hover {
+    background-color: rgba(25, 30, 58, 0.631373); }
+
+.table.table-dark > tbody > tr > td i.t-icon {
+  padding: 5px;
+  border-radius: 50%;
+  font-size: 14px;
+  vertical-align: sub;
+  cursor: pointer;
+  color: #0e1726 !important; }
+
+table .badge-success, table .badge-primary, table .badge-warning, table .badge-danger, table .badge-info, table .badge-secondary, table .badge-dark {
+  box-shadow: 0px 5px 20px 0 rgba(0, 0, 0, 0.2);
+  will-change: opacity, transform;
+  transition: all 0.3s ease-out;
+  -webkit-transition: all 0.3s ease-out; }
+
+.table > tfoot > tr > th {
+  color: #3b3f5c; }
+
+.table-vertical-align tr, .table-vertical-align th, .table-vertical-align td {
+  vertical-align: middle !important; }
+
+.statbox .widget-content:before, .statbox .widget-content:after {
+  display: table;
+  content: "";
+  line-height: 0;
+  clear: both; }
+
+.nav-tabs > li > a {
+  -webkit-border-radius: 0 !important;
+  -moz-border-radius: 0 !important;
+  border-radius: 0 !important; }
+
+.btn-toolbar {
+  margin-left: 0px; }
+
+@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+  .input-group > .form-control {
+    flex: 1 1 auto;
+    width: 1%; } }
+
+.spin {
+  -webkit-animation: spin 2s infinite linear;
+  animation: spin 2s infinite linear; }
+
+@keyframes spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg); }
+  100% {
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg); } }
+
+@-webkit-keyframes spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg); }
+  100% {
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg); } }
+
+.toast-primary {
+  background: #1b55e2; }
+
+.toast-header {
+  background: #1b55e2;
+  color: #fff;
+  border-bottom: 1px solid rgba(33, 150, 243, 0.341176); }
+  .toast-header .meta-time {
+    color: #f1f2f3; }
+  .toast-header .close {
+    color: #f1f2f3;
+    opacity: 1;
+    text-shadow: none; }
+
+.toast-body {
+  padding: 16px 12px;
+  color: #fff; }
+
+/*  
+    ==========================
+        Background Colors  
+    ==========================
+*/
+/*  
+    Default  
+*/
+.bg-primary {
+  background-color: #1b55e2 !important;
+  border-color: #1b55e2;
+  color: #fff; }
+
+.bg-success {
+  background-color: #8dbf42 !important;
+  border-color: #8dbf42;
+  color: #fff; }
+
+.bg-info {
+  background-color: #2196f3 !important;
+  border-color: #2196f3;
+  color: #fff; }
+
+.bg-warning {
+  background-color: #e2a03f !important;
+  border-color: #e2a03f;
+  color: #fff; }
+
+.bg-danger {
+  background-color: #e7515a !important;
+  border-color: #e7515a;
+  color: #fff; }
+
+.bg-secondary {
+  background-color: #5c1ac3 !important;
+  border-color: #5c1ac3;
+  color: #fff; }
+
+.bg-dark {
+  background-color: #fff;
+  border-color: #3b3f5c;
+  color: #fff; }
+
+/*  
+    Light Background  
+*/
+.bg-light-primary {
+  background-color: #c2d5ff !important;
+  border-color: #c2d5ff;
+  color: #2196f3; }
+
+.bg-light-success {
+  background-color: #e6ffbf !important;
+  border-color: #e6ffbf;
+  color: #8dbf42; }
+
+.bg-light-info {
+  background-color: #bae7ff !important;
+  border-color: #bae7ff;
+  color: #2196f3; }
+
+.bg-light-warning {
+  background-color: #ffeccb !important;
+  border-color: #ffeccb;
+  color: #e2a03f; }
+
+.bg-light-danger {
+  background-color: #ffe1e2 !important;
+  border-color: #ffe1e2;
+  color: #e7515a; }
+
+.bg-light-secondary {
+  background-color: #dccff7 !important;
+  border-color: #dccff7;
+  color: #5c1ac3; }
+
+.bg-light-dark {
+  background-color: #acb0c3;
+  border-color: #acb0c3;
+  color: #fff; }
+
+/*  
+    Progress Bar
+*/
+.progress {
+  -webkit-border-radius: 0;
+  -moz-border-radius: 0;
+  border-radius: 0;
+  background-color: #ebedf2;
+  margin-bottom: 1.25rem;
+  height: 16px;
+  box-shadow: 1px 3px 20px 3px #f1f2f3; }
+  .progress.progress-bar-stack .progress-bar:last-child {
+    border-top-right-radius: 16px;
+    border-bottom-right-radius: 16px; }
+  .progress .progress-bar {
+    font-size: 10px;
+    font-weight: 700;
+    box-shadow: 0 2px 4px rgba(0, 69, 255, 0.15), 0 8px 16px rgba(0, 69, 255, 0.2);
+    font-size: 12px;
+    letter-spacing: 1px;
+    font-weight: 100; }
+  .progress:not(.progress-bar-stack) .progress-bar {
+    border-radius: 16px; }
+
+.progress-sm {
+  height: 4px; }
+
+.progress-md {
+  height: 10px; }
+
+.progress-lg {
+  height: 20px; }
+
+.progress-xl {
+  height: 25px; }
+
+.progress-striped .progress-bar {
+  background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
+  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+  background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+  background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); }
+
+.progress .progress-title {
+  display: flex;
+  justify-content: space-between;
+  padding: 15px; }
+  .progress .progress-title span {
+    align-self: center; }
+
+.progress .progress-bar.bg-gradient-primary {
+  background-color: #1b55e2;
+  background: linear-gradient(to right, #0081ff 0%, #0045ff 100%); }
+
+.progress .progress-bar.bg-gradient-info {
+  background-color: #1b55e2;
+  background-image: linear-gradient(to right, #04befe 0%, #4481eb 100%); }
+
+.progress .progress-bar.bg-gradient-success {
+  background-color: #1b55e2;
+  background-image: linear-gradient(to right, #3cba92 0%, #0ba360 100%); }
+
+.progress .progress-bar.bg-gradient-warning {
+  background-color: #1b55e2;
+  background-image: linear-gradient(to right, #f09819 0%, #ff5858 100%); }
+
+.progress .progress-bar.bg-gradient-secondary {
+  background-color: #1b55e2;
+  background-image: linear-gradient(to right, #7579ff 0%, #b224ef 100%); }
+
+.progress .progress-bar.bg-gradient-danger {
+  background-color: #1b55e2;
+  background-image: linear-gradient(to right, #d09693 0%, #c71d6f 100%); }
+
+.progress .progress-bar.bg-gradient-dark {
+  background-color: #1b55e2;
+  background-image: linear-gradient(to right, #2b5876 0%, #4e4376 100%); }
+
+.br-0 {
+  border-radius: 0 !important; }
+
+.br-4 {
+  border-radius: 4px !important; }
+
+.br-6 {
+  border-radius: 6px !important; }
+
+.br-30 {
+  border-radius: 30px !important; }
+
+.br-50 {
+  border-radius: 50px !important; }
+
+.br-left-30 {
+  border-top-left-radius: 30px !important;
+  border-bottom-left-radius: 30px !important; }
+
+.br-right-30 {
+  border-top-right-radius: 30px !important;
+  border-bottom-right-radius: 30px !important; }
+
+.bx-top-6 {
+  border-top-right-radius: 6px !important;
+  border-top-left-radius: 6px !important; }
+
+.bx-bottom-6 {
+  border-bottom-right-radius: 6px !important;
+  border-bottom-left-radius: 6px !important; }
+
+/*      Badge Custom      */
+.badge.counter {
+  position: absolute;
+  z-index: 2;
+  right: 0;
+  top: -10px;
+  font-weight: 600;
+  width: 19px;
+  height: 19px;
+  border-radius: 50%;
+  padding: 2px 0px;
+  font-size: 12px; }
+
+.badge-chip {
+  display: inline-block;
+  padding: 0 25px;
+  font-size: 16px;
+  line-height: 42px;
+  border-radius: 25px; }
+  .badge-chip img {
+    float: left;
+    margin: 0px 10px 0px -26px;
+    height: 44px;
+    width: 44px;
+    border-radius: 50%; }
+  .badge-chip .closebtn {
+    color: #f1f2f3;
+    font-weight: bold;
+    float: right;
+    font-size: 20px;
+    cursor: pointer; }
+    .badge-chip .closebtn:hover {
+      color: #fff; }
+
+/*-------text-colors------*/
+.text-primary {
+  color: #1b55e2 !important; }
+
+.text-success {
+  color: #8dbf42 !important; }
+
+.text-info {
+  color: #2196f3 !important; }
+
+.text-danger {
+  color: #e7515a !important; }
+
+.text-warning {
+  color: #e2a03f !important; }
+
+.text-secondary {
+  color: #5c1ac3 !important; }
+
+.text-dark {
+  color: #3b3f5c !important; }
+
+.text-muted {
+  color: #888ea8 !important; }
+
+.text-white {
+  color: #fff !important; }
+
+.text-black {
+  color: #000 !important; }
+
+/*-----border main------*/
+.border {
+  border: 1px solid !important; }
+
+.border-bottom {
+  border-bottom: 1px solid !important; }
+
+.border-top {
+  border-top: 1px solid !important; }
+
+.border-right {
+  border-right: 1px solid !important; }
+
+.border-left {
+  border-left: 1px solid !important; }
+
+.border-primary {
+  border-color: #1b55e2 !important; }
+
+.border-info {
+  border-color: #2196f3 !important; }
+
+.border-warning {
+  border-color: #e2a03f !important; }
+
+.border-success {
+  border-color: #8dbf42 !important; }
+
+.border-danger {
+  border-color: #e7515a !important; }
+
+.border-secondary {
+  border-color: #5c1ac3 !important; }
+
+.border-dark {
+  border-color: #3b3f5c !important; }
+
+/*-----border style------*/
+.border-dotted {
+  border-style: dotted !important; }
+
+.border-dashed {
+  border-style: dashed !important; }
+
+.border-solid {
+  border-style: solid !important; }
+
+.border-double {
+  border-style: double !important; }
+
+/*-----border width------*/
+.border-width-1px {
+  border-width: 1px !important; }
+
+.border-width-2px {
+  border-width: 2px !important; }
+
+.border-width-3px {
+  border-width: 3px !important; }
+
+.border-width-4px {
+  border-width: 4px !important; }
+
+.border-width-5px {
+  border-width: 5px !important; }
+
+.border-width-6px {
+  border-width: 6px !important; }
+
+/*-----transform-position------*/
+.position-absolute {
+  position: absolute; }
+
+.position-static {
+  position: static; }
+
+.position-fixed {
+  position: fixed; }
+
+.position-inherit {
+  position: inherit; }
+
+.position-initial {
+  position: initial; }
+
+.position-relative {
+  position: relative; }
diff --git a/static/css/pages/coming-soon/style.css b/static/css/pages/coming-soon/style.css
new file mode 100644
index 00000000..8a13888c
--- /dev/null
+++ b/static/css/pages/coming-soon/style.css
@@ -0,0 +1,219 @@
+/*
+	===============================
+			@Import	Function
+	===============================
+*/
+/*
+	===============================
+			@Import	Mixins
+	===============================
+*/
+html {
+  height: 100%; }
+
+body {
+  height: 100%;
+  overflow: auto;
+  margin: 0;
+  padding: 0;
+  background: #fff; }
+
+.coming-soon-container {
+  display: flex; }
+
+.coming-soon-cont {
+  width: 50%;
+  display: flex;
+  flex-direction: column;
+  min-height: 100%;
+  height: 100vh; }
+  .coming-soon-cont .coming-soon-wrap {
+    max-width: 480px;
+    margin: 0 auto;
+    min-width: 311px;
+    min-height: 100%; }
+  .coming-soon-cont .coming-soon-container {
+    align-items: center;
+    display: flex;
+    flex-grow: 1;
+    padding: 30px 30px;
+    width: 100%;
+    min-height: 100%; }
+    .coming-soon-cont .coming-soon-container .coming-soon-content {
+      display: block;
+      width: 100%; }
+  .coming-soon-cont .coming-soon-content > h4 {
+    font-size: 40px;
+    margin-top: 30px;
+    font-weight: 700;
+    color: #1b55e2;
+    margin-bottom: 0;
+    text-shadow: 0px 5px 4px rgba(31, 45, 61, 0.101961); }
+  .coming-soon-cont .coming-soon-content > p:not(.terms-conditions) {
+    font-size: 16px;
+    color: #888ea8;
+    font-weight: 700;
+    margin-bottom: 50px; }
+  .coming-soon-cont #timer {
+    display: flex; }
+    .coming-soon-cont #timer .days, .coming-soon-cont #timer .hours, .coming-soon-cont #timer .min {
+      padding: 28px 0;
+      background: #1b55e2;
+      color: #fff;
+      border-radius: 4px;
+      font-weight: 600;
+      font-size: 15px;
+      letter-spacing: 2px;
+      text-align: center;
+      height: 95px;
+      width: 95px;
+      margin-right: 15px; }
+    .coming-soon-cont #timer .sec {
+      padding: 28px 0;
+      background: #1b55e2;
+      color: #fff;
+      border-radius: 4px;
+      font-weight: 600;
+      font-size: 15px;
+      letter-spacing: 2px;
+      text-align: center;
+      height: 95px;
+      width: 95px;
+      margin-right: 15px;
+      margin-right: 0; }
+    .coming-soon-cont #timer .days .count, .coming-soon-cont #timer .days .text {
+      display: block; }
+    .coming-soon-cont #timer .hours .count, .coming-soon-cont #timer .hours .text {
+      display: block; }
+    .coming-soon-cont #timer .min .count, .coming-soon-cont #timer .min .text {
+      display: block; }
+    .coming-soon-cont #timer .sec .count, .coming-soon-cont #timer .sec .text {
+      display: block; }
+  .coming-soon-cont .coming-soon-content > h3 {
+    text-align: center;
+    font-size: 21px;
+    font-weight: 700;
+    margin-top: 75px;
+    margin-bottom: 40px; }
+  .coming-soon-cont .coming-soon-wrap form .field-wrapper {
+    position: relative;
+    display: flex;
+    width: 100%; }
+    .coming-soon-cont .coming-soon-wrap form .field-wrapper svg {
+      position: absolute;
+      top: 11px;
+      color: #1b55e2;
+      fill: rgba(27, 85, 226, 0.239216);
+      left: 8px; }
+    .coming-soon-cont .coming-soon-wrap form .field-wrapper input {
+      padding: 10px 97px 10px 45px; }
+      .coming-soon-cont .coming-soon-wrap form .field-wrapper input::-webkit-input-placeholder, .coming-soon-cont .coming-soon-wrap form .field-wrapper input::-ms-input-placeholder, .coming-soon-cont .coming-soon-wrap form .field-wrapper input::-moz-placeholder {
+        color: #d3d3d3;
+        font-size: 14px; }
+      .coming-soon-cont .coming-soon-wrap form .field-wrapper input:focus {
+        border-bottom: 1px solid #1b55e2; }
+    .coming-soon-cont .coming-soon-wrap form .field-wrapper button.btn {
+      align-self: center;
+      position: absolute;
+      right: 0;
+      padding: 10px 17px;
+      border-bottom-left-radius: 20px; }
+      .coming-soon-cont .coming-soon-wrap form .field-wrapper button.btn:hover {
+        transform: none; }
+  .coming-soon-cont .social {
+    text-align: center;
+    color: #1b55e2;
+    margin: 45px 0 0 0; }
+    .coming-soon-cont .social li {
+      margin: 0; }
+      .coming-soon-cont .social li:not(:last-child) {
+        margin-right: 10px;
+        padding-right: 10px;
+        border-right: 2px solid #d3d3d3; }
+    .coming-soon-cont .social svg {
+      color: #1b55e2;
+      width: 20px;
+      height: 20px; }
+  .coming-soon-cont .terms-conditions {
+    max-width: 480px;
+    margin: 0 auto;
+    color: #3b3f5c;
+    font-weight: 600;
+    margin-top: 70px; }
+    .coming-soon-cont .terms-conditions a {
+      color: #1b55e2;
+      font-weight: 700; }
+
+.coming-soon-image {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  position: fixed;
+  right: 0;
+  min-height: auto;
+  height: 100vh;
+  width: 50%; }
+  .coming-soon-image .img-overlay-content {
+    height: 100%;
+    background: rgba(0, 0, 0, 0.55); }
+    .coming-soon-image .img-overlay-content p {
+      color: #fff;
+      position: absolute; }
+  .coming-soon-image .l-image {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: #060818;
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position-x: center;
+    background-position-y: center; }
+    .coming-soon-image .l-image .img-content {
+      display: flex;
+      justify-content: center;
+      height: 100%; }
+    .coming-soon-image .l-image img {
+      width: 577px;
+      align-self: center; }
+
+@media (max-width: 991px) {
+  .coming-soon-cont {
+    width: 100%; }
+    .coming-soon-cont .coming-soon-wrap {
+      min-width: auto; }
+  .coming-soon-image {
+    display: none; } }
+
+@media (max-width: 575px) {
+  .coming-soon-cont #timer {
+    display: flex;
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-wrap: wrap;
+    flex-wrap: wrap;
+    margin-right: -15px;
+    margin-left: -15px;
+    justify-content: center; }
+    .coming-soon-cont #timer .hours:not(:last-child) {
+      margin-right: 0; }
+    .coming-soon-cont #timer .days, .coming-soon-cont #timer .hours, .coming-soon-cont #timer .min, .coming-soon-cont #timer .sec {
+      -ms-flex: 0 0 40%;
+      flex: 0 0 40%;
+      max-width: 40%;
+      margin-bottom: 15px;
+      margin-bottom: 15px;
+      padding: 14px 0;
+      height: 71px; } }
+
+@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+  .coming-soon-cont .coming-soon-wrap {
+    width: 100%; }
+  .coming-soon-cont .coming-soon-container {
+    height: 100%; } }
diff --git a/static/css/pages/contact_us.css b/static/css/pages/contact_us.css
new file mode 100644
index 00000000..93692c75
--- /dev/null
+++ b/static/css/pages/contact_us.css
@@ -0,0 +1,131 @@
+/*
+	===============================
+			@Import	Function
+	===============================
+*/
+/*
+	===============================
+			@Import	Mixins
+	===============================
+*/
+/*      Map     */
+#basic_map1 {
+  width: 100%;
+  height: 757px; }
+
+/*  Contact Section Header     */
+.cu-contact-section {
+  position: relative;
+  padding: 0;
+  background-color: #c2d5ff; }
+  .cu-contact-section .cu-section-header {
+    position: absolute;
+    background: #3b3f5c;
+    z-index: 1;
+    width: 100%;
+    padding: 15px 34px;
+    color: #fff;
+    background-color: rgba(43, 80, 237, 0.109804); }
+    .cu-contact-section .cu-section-header h4 {
+      color: #fff;
+      font-size: 34px;
+      font-weight: 600;
+      letter-spacing: 3px; }
+    .cu-contact-section .cu-section-header p {
+      color: #fff;
+      font-size: 16px;
+      letter-spacing: 1px; }
+  .cu-contact-section .contact-form {
+    position: absolute;
+    top: 0;
+    right: 58px;
+    bottom: 0;
+    margin-top: auto;
+    margin-bottom: auto;
+    height: fit-content;
+    height: -moz-max-content;
+    height: -webkit-fit-content;
+    z-index: 2; }
+    .cu-contact-section .contact-form form {
+      background: #fff;
+      padding: 25px 35px;
+      border-radius: 10px;
+      margin-top: 24px;
+      margin-bottom: 24px;
+      -webkit-box-shadow: 0 4px 6px 0 rgba(85, 85, 85, 0.0901961), 0 1px 20px 0 rgba(0, 0, 0, 0.08), 0px 1px 11px 0px rgba(0, 0, 0, 0.06);
+      -moz-box-shadow: 0 4px 6px 0 rgba(85, 85, 85, 0.0901961), 0 1px 20px 0 rgba(0, 0, 0, 0.08), 0px 1px 11px 0px rgba(0, 0, 0, 0.06);
+      box-shadow: 0 4px 6px 0 rgba(85, 85, 85, 0.0901961), 0 1px 20px 0 rgba(0, 0, 0, 0.08), 0px 1px 11px 0px rgba(0, 0, 0, 0.06); }
+      .cu-contact-section .contact-form form .input-fields {
+        position: relative; }
+        .cu-contact-section .contact-form form .input-fields svg {
+          position: absolute;
+          top: 11px;
+          color: #1b55e2;
+          width: 20px;
+          left: 25px; }
+          .cu-contact-section .contact-form form .input-fields svg.feather-mail {
+            left: 12px;
+            top: 7px; }
+      .cu-contact-section .contact-form form h4 {
+        font-size: 22px;
+        font-weight: 600;
+        margin-bottom: 25px;
+        color: #3b3f5c; }
+      .cu-contact-section .contact-form form input {
+        padding: 8px 5px 8px 40px;
+        background-color: transparent;
+        font-weight: 600; }
+        .cu-contact-section .contact-form form input::-webkit-input-placeholder, .cu-contact-section .contact-form form input::-ms-input-placeholder, .cu-contact-section .contact-form form input::-moz-placeholder {
+          color: #d3d3d3;
+          font-size: 14px; }
+        .cu-contact-section .contact-form form input:focus {
+          background-color: #ffffff;
+          border-color: #3b3f5c; }
+  .cu-contact-section .n-chk {
+    display: inline-block; }
+  .cu-contact-section .form-group textarea {
+    padding: 8px 5px 8px 43px;
+    background-color: transparent;
+    margin-top: 15px;
+    resize: none; }
+    .cu-contact-section .form-group textarea::-webkit-input-placeholder, .cu-contact-section .form-group textarea::-ms-input-placeholder, .cu-contact-section .form-group textarea::-moz-placeholder {
+      color: #d3d3d3;
+      font-size: 14px; }
+    .cu-contact-section .form-group textarea:focus {
+      background-color: #ffffff;
+      border-color: #3b3f5c; }
+    .cu-contact-section .form-group textarea:-ms-input-placeholder {
+      color: #7b8489; }
+  .cu-contact-section form button {
+    border: none;
+    padding: 15px 25px;
+    display: block;
+    width: 100%; }
+
+/* 	Contact Content 	*/
+@media (max-width: 991px) {
+  .cu-contact-section .cu-section-header {
+    display: none; }
+  .cu-contact-section .contact-form {
+    right: 0;
+    left: 0;
+    margin-right: auto;
+    margin-left: auto;
+    margin-top: 0;
+    margin-bottom: 0; }
+    .cu-contact-section .contact-form form {
+      max-width: 530px;
+      margin: 0 auto;
+      width: 100%;
+      border-radius: 0; } }
+
+@media (max-width: 991px) {
+  body {
+    background: #fff; }
+  #basic_map1 {
+    display: none; } }
+
+@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+  .cu-contact-section .contact-form form {
+    min-width: 530px;
+    width: 100%; } }
diff --git a/static/css/pages/error/style-400.css b/static/css/pages/error/style-400.css
new file mode 100644
index 00000000..4c38595d
--- /dev/null
+++ b/static/css/pages/error/style-400.css
@@ -0,0 +1,59 @@
+/*
+	===============================
+			@Import	Function
+	===============================
+*/
+/*
+	===============================
+			@Import	Mixins
+	===============================
+*/
+.theme-logo {
+  width: 62px;
+  height: 62px; }
+
+body.error404 {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 800 400'%3E%3Cdefs%3E%3CradialGradient id='a' cx='396' cy='281' r='514' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23e6e6e6'/%3E%3Cstop offset='1' stop-color='%23c2d5ff'/%3E%3C/radialGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='400' y1='148' x2='400' y2='333'%3E%3Cstop offset='0' stop-color='%231b55e2' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%231b55e2' stop-opacity='0.5'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect fill='url(%23a)' width='800' height='400'/%3E%3Cg fill-opacity='0.5'%3E%3Ccircle fill='url(%23b)' cx='267.5' cy='61' r='300'/%3E%3Ccircle fill='url(%23b)' cx='532.5' cy='61' r='300'/%3E%3Ccircle fill='url(%23b)' cx='400' cy='30' r='300'/%3E%3C/g%3E%3C/svg%3E");
+  background-attachment: fixed;
+  background-size: cover;
+  background-color: #ffffff; }
+  body.error404 > .error-content {
+    min-height: 80vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    padding: 30px; }
+
+.error404 .mini-text {
+  font-size: 33px;
+  font-weight: 700;
+  margin-bottom: 0;
+  color: #1b55e2; }
+
+.error404 .img-cartoon {
+  width: 170px;
+  height: 170px; }
+
+.error404 .error-number {
+  font-size: 170px;
+  color: #fff;
+  font-weight: 600;
+  margin-bottom: 5px;
+  margin-top: 15px;
+  text-shadow: 0px 5px 4px rgba(31, 45, 61, 0.101961); }
+
+.error404 .error-text {
+  font-size: 18px;
+  color: #3b3f5c;
+  font-weight: 600; }
+
+.error404 a.btn {
+  width: 134px;
+  padding: 6px;
+  font-size: 17px;
+  background-image: linear-gradient(135deg, #1b55e2 0%, #5c1ac3 100%);
+  border: none;
+  letter-spacing: 2px; }
+  .error404 a.btn:hover, .error404 a.btn:not(:disabled):not(.disabled):active {
+    background-image: linear-gradient(to right, #1b55e2 0%, #5c1ac3 100%); }
diff --git a/static/css/pages/error/style-500.css b/static/css/pages/error/style-500.css
new file mode 100644
index 00000000..b36d2cfe
--- /dev/null
+++ b/static/css/pages/error/style-500.css
@@ -0,0 +1,59 @@
+/*
+	===============================
+			@Import	Function
+	===============================
+*/
+/*
+	===============================
+			@Import	Mixins
+	===============================
+*/
+.theme-logo {
+  width: 62px;
+  height: 62px; }
+
+body.error500 {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 800 400'%3E%3Cdefs%3E%3CradialGradient id='a' cx='396' cy='281' r='514' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23e6e6e6'/%3E%3Cstop offset='1' stop-color='%23c2d5ff'/%3E%3C/radialGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='400' y1='148' x2='400' y2='333'%3E%3Cstop offset='0' stop-color='%231b55e2' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%231b55e2' stop-opacity='0.5'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect fill='url(%23a)' width='800' height='400'/%3E%3Cg fill-opacity='0.5'%3E%3Ccircle fill='url(%23b)' cx='267.5' cy='61' r='300'/%3E%3Ccircle fill='url(%23b)' cx='532.5' cy='61' r='300'/%3E%3Ccircle fill='url(%23b)' cx='400' cy='30' r='300'/%3E%3C/g%3E%3C/svg%3E");
+  background-attachment: fixed;
+  background-size: cover;
+  background-color: #ffffff; }
+  body.error500 > .error-content {
+    min-height: 80vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    padding: 30px; }
+
+.error500 .mini-text {
+  font-size: 33px;
+  font-weight: 700;
+  margin-bottom: 0;
+  color: #1b55e2; }
+
+.error500 .img-cartoon {
+  width: 170px;
+  height: 170px; }
+
+.error500 .error-number {
+  font-size: 170px;
+  color: #fff;
+  font-weight: 600;
+  margin-bottom: 5px;
+  margin-top: 15px;
+  text-shadow: 0px 5px 4px rgba(31, 45, 61, 0.101961); }
+
+.error500 .error-text {
+  font-size: 18px;
+  color: #3b3f5c;
+  font-weight: 600; }
+
+.error500 a.btn {
+  width: 134px;
+  padding: 6px;
+  font-size: 17px;
+  background-image: linear-gradient(135deg, #1b55e2 0%, #5c1ac3 100%);
+  border: none;
+  letter-spacing: 2px; }
+  .error500 a.btn:hover, .error500 a.btn:not(:disabled):not(.disabled):active {
+    background-image: linear-gradient(to right, #1b55e2 0%, #5c1ac3 100%); }
diff --git a/static/css/pages/error/style-503.css b/static/css/pages/error/style-503.css
new file mode 100644
index 00000000..390343b2
--- /dev/null
+++ b/static/css/pages/error/style-503.css
@@ -0,0 +1,59 @@
+/*
+	===============================
+			@Import	Function
+	===============================
+*/
+/*
+	===============================
+			@Import	Mixins
+	===============================
+*/
+.theme-logo {
+  width: 62px;
+  height: 62px; }
+
+body.error503 {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 800 400'%3E%3Cdefs%3E%3CradialGradient id='a' cx='396' cy='281' r='514' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23e6e6e6'/%3E%3Cstop offset='1' stop-color='%23c2d5ff'/%3E%3C/radialGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='400' y1='148' x2='400' y2='333'%3E%3Cstop offset='0' stop-color='%231b55e2' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%231b55e2' stop-opacity='0.5'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect fill='url(%23a)' width='800' height='400'/%3E%3Cg fill-opacity='0.5'%3E%3Ccircle fill='url(%23b)' cx='267.5' cy='61' r='300'/%3E%3Ccircle fill='url(%23b)' cx='532.5' cy='61' r='300'/%3E%3Ccircle fill='url(%23b)' cx='400' cy='30' r='300'/%3E%3C/g%3E%3C/svg%3E");
+  background-attachment: fixed;
+  background-size: cover;
+  background-color: #ffffff; }
+  body.error503 > .error-content {
+    min-height: 80vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    padding: 30px; }
+
+.error503 .mini-text {
+  font-size: 33px;
+  font-weight: 700;
+  margin-bottom: 0;
+  color: #1b55e2; }
+
+.error503 .img-cartoon {
+  width: 170px;
+  height: 170px; }
+
+.error503 .error-number {
+  font-size: 170px;
+  color: #fff;
+  font-weight: 600;
+  margin-bottom: 5px;
+  margin-top: 15px;
+  text-shadow: 0px 5px 4px rgba(31, 45, 61, 0.101961); }
+
+.error503 .error-text {
+  font-size: 18px;
+  color: #3b3f5c;
+  font-weight: 600; }
+
+.error503 a.btn {
+  width: 134px;
+  padding: 6px;
+  font-size: 17px;
+  background-image: linear-gradient(135deg, #1b55e2 0%, #5c1ac3 100%);
+  border: none;
+  letter-spacing: 2px; }
+  .error503 a.btn:hover, .error503 a.btn:not(:disabled):not(.disabled):active {
+    background-image: linear-gradient(to right, #1b55e2 0%, #5c1ac3 100%); }
diff --git a/static/css/pages/error/style-maintanence.css b/static/css/pages/error/style-maintanence.css
new file mode 100644
index 00000000..875dddc2
--- /dev/null
+++ b/static/css/pages/error/style-maintanence.css
@@ -0,0 +1,58 @@
+/*
+	===============================
+			@Import	Function
+	===============================
+*/
+/*
+	===============================
+			@Import	Mixins
+	===============================
+*/
+.maintanence-hero-img img {
+  width: 62px;
+  height: 62px; }
+
+body.maintanence {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 800 400'%3E%3Cdefs%3E%3CradialGradient id='a' cx='396' cy='281' r='514' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23e6e6e6'/%3E%3Cstop offset='1' stop-color='%23c2d5ff'/%3E%3C/radialGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='400' y1='148' x2='400' y2='333'%3E%3Cstop offset='0' stop-color='%231b55e2' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%231b55e2' stop-opacity='0.5'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect fill='url(%23a)' width='800' height='400'/%3E%3Cg fill-opacity='0.5'%3E%3Ccircle fill='url(%23b)' cx='267.5' cy='61' r='300'/%3E%3Ccircle fill='url(%23b)' cx='532.5' cy='61' r='300'/%3E%3Ccircle fill='url(%23b)' cx='400' cy='30' r='300'/%3E%3C/g%3E%3C/svg%3E");
+  background-attachment: fixed;
+  background-size: cover;
+  background-color: #ffffff; }
+  body.maintanence > .maintanence-content {
+    min-height: 90vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    padding: 30px; }
+
+.maintanence .error-title {
+  margin-top: 65px;
+  color: #ffffff;
+  font-weight: 600;
+  font-size: 54px;
+  font-weight: 600;
+  margin-bottom: 5px;
+  text-shadow: 0px 5px 4px rgba(31, 45, 61, 0.101961); }
+
+.maintanence .error-text {
+  margin-top: 40px;
+  font-size: 24px;
+  font-weight: 600;
+  margin-bottom: 0;
+  color: #1b55e2; }
+
+.maintanence a.btn {
+  width: 134px;
+  padding: 6px;
+  font-size: 17px;
+  background-image: linear-gradient(135deg, #1b55e2 0%, #5c1ac3 100%);
+  border: none;
+  letter-spacing: 2px; }
+
+.maintanence .text {
+  color: #3b3f5c;
+  font-size: 15px;
+  font-size: 16px;
+  color: #3b3f5c;
+  font-weight: 600;
+  margin-top: 21px; }
diff --git a/static/css/pages/faq/faq.css b/static/css/pages/faq/faq.css
new file mode 100644
index 00000000..0ed63125
--- /dev/null
+++ b/static/css/pages/faq/faq.css
@@ -0,0 +1,261 @@
+/*
+	===============================
+			@Import	Function
+	===============================
+*/
+/*
+	===============================
+			@Import	Mixins
+	===============================
+*/
+body {
+  background-color: #f1f2f3; }
+
+/*Navbar*/
+nav .navbar-brand {
+  font-size: 30px;
+  font-weight: 700;
+  color: #fff; }
+
+.navbar-expand .navbar-nav .nav-link {
+  color: #fff;
+  padding: 0 17px; }
+
+.fq-header-wrapper {
+  padding: 0 0;
+  background-color: #1b55e2;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 1000'%3E%3Cg %3E%3Ccircle fill='%232b50ed' cx='50' cy='0' r='50'/%3E%3Cg fill='%233154ea' %3E%3Ccircle cx='0' cy='50' r='50'/%3E%3Ccircle cx='100' cy='50' r='50'/%3E%3C/g%3E%3Ccircle fill='%233658e8' cx='50' cy='100' r='50'/%3E%3Cg fill='%233c5be5' %3E%3Ccircle cx='0' cy='150' r='50'/%3E%3Ccircle cx='100' cy='150' r='50'/%3E%3C/g%3E%3Ccircle fill='%23415fe2' cx='50' cy='200' r='50'/%3E%3Cg fill='%234662df' %3E%3Ccircle cx='0' cy='250' r='50'/%3E%3Ccircle cx='100' cy='250' r='50'/%3E%3C/g%3E%3Ccircle fill='%234b66dc' cx='50' cy='300' r='50'/%3E%3Cg fill='%235069d9' %3E%3Ccircle cx='0' cy='350' r='50'/%3E%3Ccircle cx='100' cy='350' r='50'/%3E%3C/g%3E%3Ccircle fill='%23546cd5' cx='50' cy='400' r='50'/%3E%3Cg fill='%23596fd2' %3E%3Ccircle cx='0' cy='450' r='50'/%3E%3Ccircle cx='100' cy='450' r='50'/%3E%3C/g%3E%3Ccircle fill='%235e72cf' cx='50' cy='500' r='50'/%3E%3Cg fill='%236275cb' %3E%3Ccircle cx='0' cy='550' r='50'/%3E%3Ccircle cx='100' cy='550' r='50'/%3E%3C/g%3E%3Ccircle fill='%236678c8' cx='50' cy='600' r='50'/%3E%3Cg fill='%236b7bc4' %3E%3Ccircle cx='0' cy='650' r='50'/%3E%3Ccircle cx='100' cy='650' r='50'/%3E%3C/g%3E%3Ccircle fill='%236f7ec0' cx='50' cy='700' r='50'/%3E%3Cg fill='%237381bc' %3E%3Ccircle cx='0' cy='750' r='50'/%3E%3Ccircle cx='100' cy='750' r='50'/%3E%3C/g%3E%3Ccircle fill='%237783b8' cx='50' cy='800' r='50'/%3E%3Cg fill='%237c86b4' %3E%3Ccircle cx='0' cy='850' r='50'/%3E%3Ccircle cx='100' cy='850' r='50'/%3E%3C/g%3E%3Ccircle fill='%238089b0' cx='50' cy='900' r='50'/%3E%3Cg fill='%23848bac' %3E%3Ccircle cx='0' cy='950' r='50'/%3E%3Ccircle cx='100' cy='950' r='50'/%3E%3C/g%3E%3Ccircle fill='%23888ea8' cx='50' cy='1000' r='50'/%3E%3C/g%3E%3C/svg%3E");
+  background-attachment: fixed;
+  background-size: contain; }
+  .fq-header-wrapper h1 {
+    font-size: 46px;
+    font-weight: 700;
+    color: #fff;
+    margin-bottom: 8px; }
+  .fq-header-wrapper p {
+    color: #d3d3d3;
+    font-size: 14px;
+    margin-bottom: 27px;
+    line-height: 25px; }
+  .fq-header-wrapper button {
+    border-radius: 30px;
+    padding: 10px 25px;
+    letter-spacing: 2px;
+    font-weight: 600;
+    font-size: 16px;
+    background: transparent;
+    color: #fff; }
+    .fq-header-wrapper button:hover {
+      background-color: transparent;
+      color: #fff;
+      box-shadow: none; }
+  .fq-header-wrapper .banner-img img {
+    width: 582px;
+    height: 582px; }
+
+@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+  .fq-header-wrapper {
+    background-image: none; } }
+
+/*
+    Common Question
+*/
+.faq .faq-layouting .fq-comman-question-wrapper {
+  padding: 52px 52px;
+  -webkit-box-shadow: 0 10px 30px 0 rgba(31, 45, 61, 0.1);
+  box-shadow: 0 10px 30px 0 rgba(31, 45, 61, 0.1);
+  border-radius: 15px;
+  background: #fff;
+  margin-top: -57px;
+  margin-bottom: 70px; }
+  .faq .faq-layouting .fq-comman-question-wrapper h3 {
+    font-size: 29px;
+    font-weight: 700;
+    margin-bottom: 40px; }
+  .faq .faq-layouting .fq-comman-question-wrapper ul {
+    padding: 0; }
+    .faq .faq-layouting .fq-comman-question-wrapper ul li {
+      font-size: 15px;
+      font-weight: 600;
+      margin-bottom: 16px;
+      color: #3b3f5c; }
+      .faq .faq-layouting .fq-comman-question-wrapper ul li:hover {
+        cursor: pointer;
+        color: #1b55e2; }
+      .faq .faq-layouting .fq-comman-question-wrapper ul li .icon-svg {
+        display: inline-block;
+        margin-right: 9px; }
+      .faq .faq-layouting .fq-comman-question-wrapper ul li svg {
+        color: #888ea8;
+        width: 19px;
+        height: 19px;
+        vertical-align: bottom; }
+      .faq .faq-layouting .fq-comman-question-wrapper ul li:hover svg {
+        color: #1b55e2; }
+
+.faq .faq-layouting .fq-tab-section {
+  margin-bottom: 70px; }
+  .faq .faq-layouting .fq-tab-section h2 {
+    font-size: 29px;
+    font-weight: 700;
+    margin-bottom: 40px; }
+  .faq .faq-layouting .fq-tab-section .accordion .card {
+    border: none;
+    margin-bottom: 26px;
+    -webkit-box-shadow: 2px 5px 17px 0 rgba(31, 45, 61, 0.1);
+    box-shadow: 2px 5px 17px 0 rgba(31, 45, 61, 0.1);
+    border-radius: 12px;
+    cursor: pointer; }
+    .faq .faq-layouting .fq-tab-section .accordion .card .card-header {
+      padding: 0;
+      border: none;
+      background: none; }
+      .faq .faq-layouting .fq-tab-section .accordion .card .card-header > div {
+        padding: 13px 21px;
+        font-weight: 600;
+        font-size: 16px;
+        color: #1b55e2; }
+      .faq .faq-layouting .fq-tab-section .accordion .card .card-header div .faq-q-title {
+        overflow: hidden;
+        white-space: nowrap;
+        font-size: 13px;
+        color: #3b3f5c;
+        font-weight: 700; }
+      .faq .faq-layouting .fq-tab-section .accordion .card .card-header div svg.feather-code {
+        width: 17px;
+        vertical-align: middle;
+        margin-right: 11px;
+        color: #888ea8; }
+    .faq .faq-layouting .fq-tab-section .accordion .card:hover .card-header div svg.feather-code {
+      color: #1b55e2; }
+    .faq .faq-layouting .fq-tab-section .accordion .card .card-header div[aria-expanded="true"] svg.feather-code {
+      color: #1b55e2; }
+    .faq .faq-layouting .fq-tab-section .accordion .card .card-header div .like-faq {
+      display: inline-block;
+      float: right; }
+    .faq .faq-layouting .fq-tab-section .accordion .card .card-header div svg.feather-thumbs-up {
+      cursor: pointer;
+      vertical-align: bottom;
+      margin-right: 10px;
+      width: 18px;
+      color: #888ea8;
+      fill: rgba(0, 23, 55, 0.08); }
+    .faq .faq-layouting .fq-tab-section .accordion .card:hover .card-header div svg.feather-thumbs-up {
+      color: #1b55e2;
+      fill: rgba(27, 85, 226, 0.239216); }
+    .faq .faq-layouting .fq-tab-section .accordion .card .card-header div[aria-expanded="true"] svg.feather-thumbs-up {
+      color: #1b55e2;
+      fill: rgba(27, 85, 226, 0.239216); }
+    .faq .faq-layouting .fq-tab-section .accordion .card .card-header div span.faq-like-count {
+      font-size: 13px;
+      font-weight: 700;
+      color: #888ea8;
+      fill: rgba(0, 23, 55, 0.08); }
+    .faq .faq-layouting .fq-tab-section .accordion .card:hover .card-header div span.faq-like-count, .faq .faq-layouting .fq-tab-section .accordion .card .card-header div[aria-expanded="true"] span.faq-like-count {
+      color: #1b55e2;
+      fill: rgba(27, 85, 226, 0.239216); }
+    .faq .faq-layouting .fq-tab-section .accordion .card .card-body p {
+      font-size: 14px;
+      font-weight: 600;
+      line-height: 23px; }
+
+.faq .faq-layouting .fq-article-section {
+  margin-bottom: 90px; }
+  .faq .faq-layouting .fq-article-section h2 {
+    font-size: 29px;
+    font-weight: 700;
+    margin-bottom: 40px; }
+  .faq .faq-layouting .fq-article-section .card {
+    border: none;
+    -webkit-box-shadow: 2px 5px 17px 0 rgba(31, 45, 61, 0.1);
+    box-shadow: 2px 5px 17px 0 rgba(31, 45, 61, 0.1);
+    border-radius: 12px; }
+    .faq .faq-layouting .fq-article-section .card img {
+      border-top-left-radius: 12px;
+      border-top-right-radius: 12px; }
+    .faq .faq-layouting .fq-article-section .card .card-body .fq-rating {
+      margin-bottom: 13px; }
+      .faq .faq-layouting .fq-article-section .card .card-body .fq-rating svg {
+        width: 17px;
+        color: #e2a03f; }
+        .faq .faq-layouting .fq-article-section .card .card-body .fq-rating svg.checked {
+          fill: rgba(226, 160, 63, 0.541176); }
+    .faq .faq-layouting .fq-article-section .card .card-body h5.card-title {
+      font-weight: 700;
+      font-size: 20px;
+      margin-bottom: 21px; }
+    .faq .faq-layouting .fq-article-section .card .card-body p.card-text {
+      letter-spacing: 1px;
+      color: #888ea8; }
+    .faq .faq-layouting .fq-article-section .card .card-body p.meta-text {
+      font-size: 13px;
+      font-weight: 600;
+      color: #1b55e2; }
+      .faq .faq-layouting .fq-article-section .card .card-body p.meta-text svg {
+        width: 18px;
+        vertical-align: bottom; }
+
+/*
+    Tab Section
+*/
+/*
+    Article Section
+*/
+/*
+    Mini Footer Wrapper
+*/
+#miniFooterWrapper {
+  color: #fff;
+  font-size: 14px;
+  border-top: solid 1px #ffffff;
+  padding: 14px;
+  -webkit-box-shadow: 0px -1px 20px 0 rgba(31, 45, 61, 0.1);
+  box-shadow: 0px -1px 20px 0 rgba(31, 45, 61, 0.1); }
+  #miniFooterWrapper .arrow {
+    background-color: #1b55e2;
+    border-radius: 50%;
+    position: absolute;
+    z-index: 2;
+    top: -33px;
+    width: 40px;
+    height: 40px;
+    box-shadow: 0px 0px 15px 1px rgba(113, 106, 202, 0.2);
+    left: 0;
+    right: 0;
+    margin: 0 auto;
+    display: flex;
+    justify-content: center;
+    cursor: pointer; }
+    #miniFooterWrapper .arrow p {
+      align-self: center;
+      margin-bottom: 0;
+      color: #fff;
+      font-weight: 600;
+      font-size: 15px;
+      letter-spacing: 1px; }
+  #miniFooterWrapper .copyright a {
+    color: #1b55e2;
+    font-weight: 700;
+    text-decoration: none; }
+
+/*
+    Media Query
+*/
+@media (max-width: 1199px) {
+  .fq-header-wrapper .banner-img img {
+    width: 340px;
+    height: 363px;
+    margin: 0 auto; } }
+
+@media (max-width: 767px) {
+  .fq-header-wrapper {
+    min-height: 640px; }
+  .faq .faq-layouting .fq-comman-question-wrapper {
+    margin-top: 32px; } }
+
+@media (max-width: 575px) {
+  .fq-header-wrapper .banner-img img {
+    width: 283px;
+    height: 363px; }
+  .faq .faq-layouting .fq-tab-section .accordion .card .card-header div svg.feather-code {
+    display: none; } }
diff --git a/static/css/pages/faq/faq2.css b/static/css/pages/faq/faq2.css
new file mode 100644
index 00000000..d85cffe0
--- /dev/null
+++ b/static/css/pages/faq/faq2.css
@@ -0,0 +1,95 @@
+/*
+	===============================
+			@Import	Function
+	===============================
+*/
+/*
+	===============================
+			@Import	Mixins
+	===============================
+*/
+/*
+    Tab Section
+*/
+.faq .faq-layouting .fq-tab-section {
+  padding: 35px 50px;
+  background: #fff;
+  border-radius: 6px;
+  -webkit-box-shadow: 0 4px 6px 0 rgba(85, 85, 85, 0.0901961), 0 1px 20px 0 rgba(0, 0, 0, 0.08), 0px 1px 11px 0px rgba(0, 0, 0, 0.06);
+  -moz-box-shadow: 0 4px 6px 0 rgba(85, 85, 85, 0.0901961), 0 1px 20px 0 rgba(0, 0, 0, 0.08), 0px 1px 11px 0px rgba(0, 0, 0, 0.06);
+  box-shadow: 0 4px 6px 0 rgba(85, 85, 85, 0.0901961), 0 1px 20px 0 rgba(0, 0, 0, 0.08), 0px 1px 11px 0px rgba(0, 0, 0, 0.06); }
+  .faq .faq-layouting .fq-tab-section h2 {
+    font-size: 25px;
+    font-weight: 700;
+    margin-bottom: 45px;
+    letter-spacing: 0px;
+    text-align: center; }
+    .faq .faq-layouting .fq-tab-section h2 span {
+      color: #1b55e2; }
+  .faq .faq-layouting .fq-tab-section .accordion .card {
+    border: 2px solid #e0e6ed;
+    border-radius: 6px;
+    margin-bottom: 4px; }
+    .faq .faq-layouting .fq-tab-section .accordion .card .card-header {
+      padding: 0;
+      border: none;
+      background: none; }
+      .faq .faq-layouting .fq-tab-section .accordion .card .card-header > div {
+        padding: 19px 30px;
+        font-weight: 600;
+        font-size: 16px;
+        color: #1b55e2;
+        cursor: pointer; }
+        .faq .faq-layouting .fq-tab-section .accordion .card .card-header > div[aria-expanded="true"] {
+          border-bottom: 2px solid #e0e6ed; }
+      .faq .faq-layouting .fq-tab-section .accordion .card .card-header div .faq-q-title {
+        overflow: hidden;
+        font-size: 14px;
+        color: #888ea8;
+        font-weight: 600;
+        letter-spacing: 1px; }
+      .faq .faq-layouting .fq-tab-section .accordion .card .card-header div[aria-expanded="true"] .faq-q-title {
+        color: #1b55e2; }
+      .faq .faq-layouting .fq-tab-section .accordion .card .card-header div .icons {
+        display: inline-block;
+        float: right; }
+        .faq .faq-layouting .fq-tab-section .accordion .card .card-header div .icons svg {
+          color: #888ea8; }
+      .faq .faq-layouting .fq-tab-section .accordion .card .card-header div[aria-expanded="true"] .icons svg {
+        color: #1b55e2; }
+      .faq .faq-layouting .fq-tab-section .accordion .card .card-header div svg.feather-thumbs-up {
+        cursor: pointer;
+        vertical-align: bottom;
+        margin-right: 10px;
+        width: 18px;
+        color: #888ea8;
+        fill: rgba(0, 23, 55, 0.08); }
+    .faq .faq-layouting .fq-tab-section .accordion .card:hover .card-header div svg.feather-thumbs-up {
+      color: #1b55e2;
+      fill: rgba(27, 85, 226, 0.239216); }
+    .faq .faq-layouting .fq-tab-section .accordion .card .card-header div[aria-expanded="true"] svg.feather-thumbs-up {
+      color: #1b55e2;
+      fill: rgba(27, 85, 226, 0.239216); }
+    .faq .faq-layouting .fq-tab-section .accordion .card .card-header div span.faq-like-count {
+      font-size: 13px;
+      font-weight: 700;
+      color: #888ea8;
+      fill: rgba(0, 23, 55, 0.08); }
+    .faq .faq-layouting .fq-tab-section .accordion .card:hover .card-header div span.faq-like-count, .faq .faq-layouting .fq-tab-section .accordion .card .card-header div[aria-expanded="true"] span.faq-like-count {
+      color: #1b55e2;
+      fill: rgba(27, 85, 226, 0.239216); }
+    .faq .faq-layouting .fq-tab-section .accordion .card .card-body {
+      padding: 19px 30px; }
+      .faq .faq-layouting .fq-tab-section .accordion .card .card-body p {
+        font-size: 13px;
+        line-height: 23px;
+        letter-spacing: 1px; }
+
+/*
+    Media Query
+*/
+@media (max-width: 575px) {
+  .faq .faq-layouting .fq-tab-section {
+    padding: 35px 25px; }
+    .faq .faq-layouting .fq-tab-section .accordion .card .card-header div svg.feather-code {
+      display: none; } }
diff --git a/static/css/pages/helpdesk.css b/static/css/pages/helpdesk.css
new file mode 100644
index 00000000..eb8c28e9
--- /dev/null
+++ b/static/css/pages/helpdesk.css
@@ -0,0 +1,307 @@
+/*
+	===============================
+			@Import	Function
+	===============================
+*/
+/*
+	===============================
+			@Import	Mixins
+	===============================
+*/
+body {
+  font-family: 'Nunito', sans-serif;
+  background-color: #f1f2f3; }
+
+.helpdesk:before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: -1;
+  pointer-events: none;
+  height: 280px;
+  background-color: #1b55e2;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 1000'%3E%3Cg %3E%3Ccircle fill='%232b50ed' cx='50' cy='0' r='50'/%3E%3Cg fill='%233154ea' %3E%3Ccircle cx='0' cy='50' r='50'/%3E%3Ccircle cx='100' cy='50' r='50'/%3E%3C/g%3E%3Ccircle fill='%233658e8' cx='50' cy='100' r='50'/%3E%3Cg fill='%233c5be5' %3E%3Ccircle cx='0' cy='150' r='50'/%3E%3Ccircle cx='100' cy='150' r='50'/%3E%3C/g%3E%3Ccircle fill='%23415fe2' cx='50' cy='200' r='50'/%3E%3Cg fill='%234662df' %3E%3Ccircle cx='0' cy='250' r='50'/%3E%3Ccircle cx='100' cy='250' r='50'/%3E%3C/g%3E%3Ccircle fill='%234b66dc' cx='50' cy='300' r='50'/%3E%3Cg fill='%235069d9' %3E%3Ccircle cx='0' cy='350' r='50'/%3E%3Ccircle cx='100' cy='350' r='50'/%3E%3C/g%3E%3Ccircle fill='%23546cd5' cx='50' cy='400' r='50'/%3E%3Cg fill='%23596fd2' %3E%3Ccircle cx='0' cy='450' r='50'/%3E%3Ccircle cx='100' cy='450' r='50'/%3E%3C/g%3E%3Ccircle fill='%235e72cf' cx='50' cy='500' r='50'/%3E%3Cg fill='%236275cb' %3E%3Ccircle cx='0' cy='550' r='50'/%3E%3Ccircle cx='100' cy='550' r='50'/%3E%3C/g%3E%3Ccircle fill='%236678c8' cx='50' cy='600' r='50'/%3E%3Cg fill='%236b7bc4' %3E%3Ccircle cx='0' cy='650' r='50'/%3E%3Ccircle cx='100' cy='650' r='50'/%3E%3C/g%3E%3Ccircle fill='%236f7ec0' cx='50' cy='700' r='50'/%3E%3Cg fill='%237381bc' %3E%3Ccircle cx='0' cy='750' r='50'/%3E%3Ccircle cx='100' cy='750' r='50'/%3E%3C/g%3E%3Ccircle fill='%237783b8' cx='50' cy='800' r='50'/%3E%3Cg fill='%237c86b4' %3E%3Ccircle cx='0' cy='850' r='50'/%3E%3Ccircle cx='100' cy='850' r='50'/%3E%3C/g%3E%3Ccircle fill='%238089b0' cx='50' cy='900' r='50'/%3E%3Cg fill='%23848bac' %3E%3Ccircle cx='0' cy='950' r='50'/%3E%3Ccircle cx='100' cy='950' r='50'/%3E%3C/g%3E%3Ccircle fill='%23888ea8' cx='50' cy='1000' r='50'/%3E%3C/g%3E%3C/svg%3E");
+  background-attachment: fixed;
+  background-size: contain; }
+
+.helpdesk .navbar .navbar-brand {
+  color: #fff;
+  font-weight: 800;
+  letter-spacing: 2px; }
+
+.helpdesk .navbar .nav-link {
+  color: #fff !important; }
+
+@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+  .helpdesk:before {
+    background-image: none; } }
+
+/*
+	Helpdesk Header Wrapper
+*/
+.hd-header-wrapper {
+  padding: 67px 0;
+  border-radius: 4px; }
+  .hd-header-wrapper h4 {
+    color: #fff;
+    font-size: 46px;
+    padding: 0 8px; }
+  .hd-header-wrapper p {
+    color: #fff;
+    font-size: 17px;
+    font-weight: 600;
+    letter-spacing: 1px;
+    margin-bottom: 35px; }
+  .hd-header-wrapper .input-group {
+    -webkit-box-shadow: 0px 0px 15px 1px rgba(113, 106, 202, 0.2);
+    box-shadow: 0px 0px 15px 1px rgba(113, 106, 202, 0.2); }
+  .hd-header-wrapper span.input-group-text {
+    background-color: #fff;
+    border-color: #fff;
+    padding: 11px 8px 11px 20px;
+    border-radius: 4px;
+    font-size: 22px;
+    font-weight: normal !important; }
+    .hd-header-wrapper span.input-group-text svg {
+      font-weight: 600;
+      color: #1b55e2; }
+  .hd-header-wrapper .form-control:focus {
+    box-shadow: none;
+    border-color: #1b55e2;
+    color: #3b3f5c;
+    background: #f1f2f3; }
+  .hd-header-wrapper input {
+    border: none;
+    border-radius: 4px;
+    padding: 20px 16px;
+    color: #0e1726;
+    height: 100%; }
+
+.input-group .input-group-prepend .input-group-text {
+  border: 1px solid #ffffff;
+  background-color: #ffffff; }
+
+/*
+	Tab Section
+*/
+/* 	Tab Content 	*/
+.hd-tab-section .accordion .card {
+  border: none;
+  margin-bottom: 26px;
+  -webkit-box-shadow: 2px 5px 17px 0 rgba(31, 45, 61, 0.1);
+  box-shadow: 2px 5px 17px 0 rgba(31, 45, 61, 0.1);
+  border-radius: 12px !important;
+  cursor: pointer; }
+  .hd-tab-section .accordion .card .card-header {
+    background-color: #fff;
+    color: #3b3f5c;
+    border-color: transparent;
+    padding: 0;
+    border-radius: 6px; }
+    .hd-tab-section .accordion .card .card-header div > div {
+      padding: 13px 21px;
+      cursor: pointer;
+      background: transparent;
+      border: none;
+      overflow: hidden;
+      white-space: nowrap;
+      font-size: 13px;
+      color: #3b3f5c;
+      font-weight: 700; }
+      .hd-tab-section .accordion .card .card-header div > div svg {
+        width: 17px;
+        vertical-align: middle;
+        margin-right: 11px;
+        color: #888ea8; }
+      .hd-tab-section .accordion .card .card-header div > div[aria-expanded="true"] svg {
+        color: #1b55e2; }
+  .hd-tab-section .accordion .card:hover .card-header div > div svg {
+    color: #1b55e2; }
+  .hd-tab-section .accordion .card:not(:last-child) .card-header div > div {
+    border-bottom: none; }
+  .hd-tab-section .accordion .card .card-body {
+    padding: 20px 30px; }
+    .hd-tab-section .accordion .card .card-body p {
+      line-height: 2.2;
+      font-size: 14px;
+      letter-spacing: 1px;
+      color: #0e1726; }
+
+/*  Contact Content     */
+.hd-contact-section {
+  margin-bottom: 50px; }
+  .hd-contact-section .hd-slide-header {
+    text-align: center;
+    font-size: 24px;
+    font-weight: 600;
+    margin-bottom: 50px;
+    color: #3b3f5c; }
+
+.carousel-item.community-help {
+  padding: 13px; }
+
+.carousel-item-content {
+  max-width: 607px;
+  max-width: 697px;
+  margin: 0 auto;
+  padding: 43px 0;
+  height: 331px; }
+
+/*  Community help     */
+.hd-contact-section .community-help .media {
+  padding: 13px 25px;
+  border: 1px solid #bfc9d4;
+  border-radius: 12px;
+  background: #fff; }
+  .hd-contact-section .community-help .media svg {
+    width: 54px;
+    height: 55px;
+    margin-right: 11px;
+    align-self: center;
+    color: #1b55e2;
+    stroke-width: 1.5px; }
+  .hd-contact-section .community-help .media h5 {
+    color: #1b55e2;
+    font-weight: 800;
+    font-size: 17px;
+    margin-bottom: 5px; }
+  .hd-contact-section .community-help .media p {
+    font-size: 14px;
+    font-weight: 600;
+    color: #3b3f5c; }
+
+.hd-contact-section .news-updates .media {
+  padding: 13px 25px;
+  border: 1px solid #bfc9d4;
+  border-radius: 12px;
+  background: #fff; }
+  .hd-contact-section .news-updates .media svg {
+    width: 54px;
+    height: 55px;
+    margin-right: 11px;
+    color: #1b55e2;
+    stroke-width: 1.5px; }
+  .hd-contact-section .news-updates .media h5 {
+    color: #1b55e2;
+    font-weight: 800;
+    margin-bottom: 0; }
+  .hd-contact-section .news-updates .media p {
+    font-size: 14px;
+    font-weight: 600; }
+
+/*  News updates     */
+/*  Carousel indicators    */
+.carousel-indicators {
+  bottom: -34px;
+  left: 0;
+  right: 0;
+  height: 22px; }
+  .carousel-indicators li {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    opacity: 1;
+    background-color: #888ea8; }
+    .carousel-indicators li.active {
+      background-color: #1b55e2; }
+
+.carousel-control-next, .carousel-control-prev {
+  opacity: 1;
+  background: #f1f2f3; }
+
+.carousel-control-prev-icon {
+  background-image: none;
+  -webkit-box-shadow: 2px 5px 17px 0 rgba(31, 45, 61, 0.1);
+  box-shadow: 0px 0px 19px 3px rgba(31, 45, 61, 0.1);
+  padding: 9px;
+  height: 33px;
+  width: 33px;
+  position: relative;
+  border-radius: 50px; }
+  .carousel-control-prev-icon svg {
+    color: #1b55e2;
+    position: absolute;
+    top: 4px;
+    left: -1px;
+    right: 0;
+    margin-left: auto;
+    margin-right: auto;
+    width: 23px; }
+  .carousel-control-prev-icon:before {
+    display: none; }
+
+.carousel-control-next-icon {
+  background-image: none;
+  -webkit-box-shadow: 2px 5px 17px 0 rgba(31, 45, 61, 0.1);
+  box-shadow: 0px 0px 19px 3px rgba(31, 45, 61, 0.1);
+  padding: 9px;
+  height: 33px;
+  width: 33px;
+  position: relative;
+  border-radius: 50px; }
+  .carousel-control-next-icon svg {
+    color: #1b55e2;
+    position: absolute;
+    top: 4px;
+    left: 0;
+    right: -2px;
+    margin-left: auto;
+    margin-right: auto;
+    width: 23px; }
+  .carousel-control-next-icon:before {
+    display: none; }
+
+/*
+    Mini Footer Wrapper
+*/
+#miniFooterWrapper {
+  color: #fff;
+  font-size: 14px;
+  border-top: solid 1px #ffffff;
+  padding: 14px;
+  -webkit-box-shadow: 0px -1px 20px 0 rgba(31, 45, 61, 0.1);
+  box-shadow: 0px -1px 20px 0 rgba(31, 45, 61, 0.1); }
+  #miniFooterWrapper .arrow {
+    background-color: #1b55e2;
+    border-radius: 50%;
+    position: absolute;
+    z-index: 2;
+    top: -33px;
+    width: 40px;
+    height: 40px;
+    box-shadow: 0px 0px 15px 1px rgba(113, 106, 202, 0.2);
+    left: 0;
+    right: 0;
+    margin: 0 auto;
+    display: flex;
+    justify-content: center;
+    cursor: pointer; }
+    #miniFooterWrapper .arrow p {
+      align-self: center;
+      margin-bottom: 0;
+      color: #fff;
+      font-weight: 600;
+      font-size: 15px;
+      letter-spacing: 1px; }
+  #miniFooterWrapper .copyright a {
+    color: #1b55e2;
+    font-weight: 700;
+    text-decoration: none; }
+
+@media (max-width: 1199px) {
+  .carousel-control-next, .carousel-control-prev {
+    background: transparent; } }
+
+@media (max-width: 991px) {
+  .carousel-control-next, .carousel-control-prev {
+    display: none; } }
+
+@media (max-width: 767px) {
+  .hd-contact-section .community-help .media {
+    margin-bottom: 3px; } }
+
+@media (max-width: 575px) {
+  .carousel-item-content {
+    height: auto; } }
diff --git a/static/css/pages/privacy/privacy.css b/static/css/pages/privacy/privacy.css
new file mode 100644
index 00000000..1b2847f4
--- /dev/null
+++ b/static/css/pages/privacy/privacy.css
@@ -0,0 +1,136 @@
+/*
+	===============================
+			@Import	Function
+	===============================
+*/
+/*
+	===============================
+			@Import	Mixins
+	===============================
+*/
+body {
+  background-color: #f1f2f3; }
+
+.h5, h5 {
+  font-size: 1.25rem; }
+
+.h4, h4 {
+  font-size: 1.5rem; }
+
+.h6, h6 {
+  font-size: 1rem; }
+
+.navbar-brand-privacy img {
+  width: 62px;
+  height: 62px; }
+
+/*
+    ======================
+        Header Wrapper
+    ======================
+*/
+#headerWrapper {
+  padding: 30px 50px; }
+  #headerWrapper:before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    z-index: -1;
+    pointer-events: none;
+    height: 280px;
+    background-color: #1b55e2;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 1000'%3E%3Cg %3E%3Ccircle fill='%232b50ed' cx='50' cy='0' r='50'/%3E%3Cg fill='%233154ea' %3E%3Ccircle cx='0' cy='50' r='50'/%3E%3Ccircle cx='100' cy='50' r='50'/%3E%3C/g%3E%3Ccircle fill='%233658e8' cx='50' cy='100' r='50'/%3E%3Cg fill='%233c5be5' %3E%3Ccircle cx='0' cy='150' r='50'/%3E%3Ccircle cx='100' cy='150' r='50'/%3E%3C/g%3E%3Ccircle fill='%23415fe2' cx='50' cy='200' r='50'/%3E%3Cg fill='%234662df' %3E%3Ccircle cx='0' cy='250' r='50'/%3E%3Ccircle cx='100' cy='250' r='50'/%3E%3C/g%3E%3Ccircle fill='%234b66dc' cx='50' cy='300' r='50'/%3E%3Cg fill='%235069d9' %3E%3Ccircle cx='0' cy='350' r='50'/%3E%3Ccircle cx='100' cy='350' r='50'/%3E%3C/g%3E%3Ccircle fill='%23546cd5' cx='50' cy='400' r='50'/%3E%3Cg fill='%23596fd2' %3E%3Ccircle cx='0' cy='450' r='50'/%3E%3Ccircle cx='100' cy='450' r='50'/%3E%3C/g%3E%3Ccircle fill='%235e72cf' cx='50' cy='500' r='50'/%3E%3Cg fill='%236275cb' %3E%3Ccircle cx='0' cy='550' r='50'/%3E%3Ccircle cx='100' cy='550' r='50'/%3E%3C/g%3E%3Ccircle fill='%236678c8' cx='50' cy='600' r='50'/%3E%3Cg fill='%236b7bc4' %3E%3Ccircle cx='0' cy='650' r='50'/%3E%3Ccircle cx='100' cy='650' r='50'/%3E%3C/g%3E%3Ccircle fill='%236f7ec0' cx='50' cy='700' r='50'/%3E%3Cg fill='%237381bc' %3E%3Ccircle cx='0' cy='750' r='50'/%3E%3Ccircle cx='100' cy='750' r='50'/%3E%3C/g%3E%3Ccircle fill='%237783b8' cx='50' cy='800' r='50'/%3E%3Cg fill='%237c86b4' %3E%3Ccircle cx='0' cy='850' r='50'/%3E%3Ccircle cx='100' cy='850' r='50'/%3E%3C/g%3E%3Ccircle fill='%238089b0' cx='50' cy='900' r='50'/%3E%3Cg fill='%23848bac' %3E%3Ccircle cx='0' cy='950' r='50'/%3E%3Ccircle cx='100' cy='950' r='50'/%3E%3C/g%3E%3Ccircle fill='%23888ea8' cx='50' cy='1000' r='50'/%3E%3C/g%3E%3C/svg%3E");
+    background-attachment: fixed;
+    background-size: contain; }
+  #headerWrapper .main-heading {
+    color: #fff;
+    margin: 0; }
+    #headerWrapper .main-heading i {
+      font-size: 50px;
+      vertical-align: sub; }
+
+@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+  #headerWrapper:before {
+    background-image: none; } }
+
+/*
+    ======================
+        Privacy Wrapper
+    ======================
+*/
+#privacyWrapper {
+  padding: 80px 0; }
+  #privacyWrapper .privacy-container {
+    max-width: 815px;
+    margin: 0 auto; }
+  #privacyWrapper .privacyContent {
+    padding: 30px 30px;
+    background: #fff;
+    margin-top: -60px;
+    border-radius: 5px;
+    -webkit-box-shadow: 2px 5px 17px 0 rgba(31, 45, 61, 0.1);
+    box-shadow: 2px 5px 17px 0 #1f2d3d1a; }
+    #privacyWrapper .privacyContent .privacy-head {
+      margin-bottom: 40px;
+      padding-bottom: 40px;
+      border-bottom: 1px solid #e0e6ed; }
+    #privacyWrapper .privacyContent .privacyHeader h1 {
+      font-weight: 600; }
+    #privacyWrapper .privacyContent .privacyHeader p {
+      margin-bottom: 0;
+      font-size: 16px; }
+    #privacyWrapper .privacyContent .get-privacy-terms svg {
+      margin-right: 12px; }
+  #privacyWrapper .privacy-content-container section:not(:last-child) {
+    margin-bottom: 45px; }
+  #privacyWrapper .privacy-content-container h5 {
+    margin-bottom: 24px; }
+  #privacyWrapper h5 {
+    margin: 0;
+    font-weight: 600;
+    font-size: 22px;
+    letter-spacing: 1px; }
+    #privacyWrapper h5.policy-info-ques {
+      color: #666666;
+      font-weight: 600; }
+
+/*
+    ==========================
+        Mini Footer Wrapper
+    ==========================
+*/
+#miniFooterWrapper {
+  color: #fff;
+  font-size: 14px;
+  border-top: solid 1px #ffffff;
+  padding: 14px;
+  -webkit-box-shadow: 0px -1px 20px 0 rgba(31, 45, 61, 0.1);
+  box-shadow: 0px -1px 20px 0 rgba(31, 45, 61, 0.1); }
+  #miniFooterWrapper .arrow {
+    background-color: #1b55e2;
+    border-radius: 50%;
+    position: absolute;
+    z-index: 2;
+    top: -33px;
+    width: 40px;
+    height: 40px;
+    box-shadow: 0px 0px 15px 1px rgba(113, 106, 202, 0.2);
+    left: 0;
+    right: 0;
+    margin: 0 auto;
+    display: flex;
+    justify-content: center;
+    cursor: pointer; }
+    #miniFooterWrapper .arrow p {
+      align-self: center;
+      margin-bottom: 0;
+      color: #fff;
+      font-weight: 600;
+      font-size: 15px;
+      letter-spacing: 1px; }
+  #miniFooterWrapper .copyright a {
+    color: #1b55e2;
+    font-weight: 700;
+    text-decoration: none; }
diff --git a/static/css/plugins.css b/static/css/plugins.css
new file mode 100644
index 00000000..78b88622
--- /dev/null
+++ b/static/css/plugins.css
@@ -0,0 +1,12 @@
+@import url('main.css');
+@import url('../../plugins/perfect-scrollbar/perfect-scrollbar.css');
+@import url('structure.css');
+/*
+    Importing highlight.js CSS code 
+
+    Just for demo purpose only
+	
+	@Note:-  monokai-sublime.css stylesheet is for highliting the code;
+
+*/
+@import '../../plugins/highlight/styles/monokai-sublime.css';
diff --git a/static/css/scrollspyNav.css b/static/css/scrollspyNav.css
new file mode 100644
index 00000000..1604b2b9
--- /dev/null
+++ b/static/css/scrollspyNav.css
@@ -0,0 +1,72 @@
+/*
+	===============================
+			@Import	Function
+	===============================
+*/
+/*
+	===============================
+			@Import	Mixins
+	===============================
+*/
+.sidenav {
+  position: fixed;
+  right: -30px;
+  top: 125px;
+  width: 236px;
+  height: auto;
+  border-left: 1px solid #e0e6ed; }
+  .sidenav .sidenav-header:after {
+    display: none; }
+  .sidenav .sidenav-header p {
+    font-weight: 600;
+    font-size: 18px;
+    color: #fff;
+    margin-bottom: 20px;
+    background: #1b55e2;
+    text-align: center;
+    border-radius: 5px;
+    padding: 4px;
+    letter-spacing: 1px;
+    background-image: linear-gradient(to right, #1b55e2 0%, #5c1ac3 100%); }
+  .sidenav .sidenav-content {
+    background-color: transparent;
+    display: block;
+    border: none; }
+    .sidenav .sidenav-content a {
+      display: block;
+      padding: 3px 0px;
+      color: #3b3f5c;
+      font-size: 12px;
+      padding: 3px 25px; }
+      .sidenav .sidenav-content a.active {
+        color: #5c1ac3;
+        font-weight: 700;
+        border-left: 1px solid #5c1ac3; }
+      .sidenav .sidenav-content a:hover {
+        color: #1b55e2;
+        font-weight: 700;
+        border-left: 1px solid #5c1ac3; }
+
+#content > .container {
+  display: flex;
+  max-width: 58.333333% !important;
+  margin-left: 2px;
+  padding: 0 16px !important; }
+  #content > .container > .container {
+    padding: 0;
+    margin: 0; }
+
+@media (max-width: 575px) {
+  .sidenav .sidenav-content a {
+    padding: 4px 7px;
+    margin-right: 0;
+    margin-bottom: 10px; } }
+
+@media (max-width: 1199px) {
+  .sidenav {
+    display: none; }
+  #content > .container {
+    max-width: 100% !important;
+    margin-left: auto; }
+    #content > .container > .container {
+      max-width: 100%; } }
diff --git a/static/css/structure.css b/static/css/structure.css
new file mode 100644
index 00000000..f2ebe57f
--- /dev/null
+++ b/static/css/structure.css
@@ -0,0 +1,1151 @@
+/*
+	===============================
+			@Import	Function
+	===============================
+*/
+/*
+	===============================
+			@Import	Mixins
+	===============================
+*/
+html {
+  min-height: 100%; }
+
+body {
+  color: #888ea8;
+  height: 100%;
+  font-size: 0.875rem;
+  background: #f1f2f3;
+  overflow-x: hidden;
+  overflow-y: auto;
+  letter-spacing: 0.0312rem;
+  font-family: 'Nunito', sans-serif; }
+
+h1, h2, h3, h4, h5, h6 {
+  color: #3b3f5c; }
+
+:focus {
+  outline: none; }
+
+::-moz-selection {
+  /* Code for Firefox */
+  color: #1b55e2;
+  background: transparent; }
+
+::selection {
+  color: #1b55e2;
+  background: transparent; }
+
+p {
+  margin-top: 0;
+  margin-bottom: 0.625rem;
+  color: #515365; }
+
+hr {
+  margin-top: 20px;
+  margin-bottom: 20px;
+  border-top: 1px solid #f1f2f3; }
+
+strong {
+  font-weight: 600; }
+
+code {
+  color: #e7515a; }
+
+/*Page title*/
+.page-header {
+  border: 0;
+  margin: 0; }
+  .page-header:before {
+    display: table;
+    content: "";
+    line-height: 0; }
+  .page-header:after {
+    display: table;
+    content: "";
+    line-height: 0;
+    clear: both; }
+
+.page-title h3 {
+  margin: 0;
+  margin-bottom: 0;
+  font-size: 15px;
+  color: #3b3f5c;
+  font-weight: 700; }
+
+.page-title span {
+  display: block;
+  font-size: 11px;
+  color: #888;
+  font-weight: normal; }
+
+.main-container {
+  min-height: 100vh;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  -webkit-box-pack: start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  padding: 0 0 0 16px; }
+
+#container.fixed-header {
+  margin-top: 56px; }
+
+#content {
+  position: relative;
+  width: 50%;
+  flex-grow: 8;
+  margin-top: 106px;
+  margin-bottom: 0;
+  margin-left: 212px;
+  transition: .600s; }
+
+.main-container-fluid > .main-content > .container {
+  float: left;
+  width: 100%; }
+
+#content > .wrapper {
+  -webkit-transition: margin ease-in-out .1s;
+  -moz-transition: margin ease-in-out .1s;
+  -o-transition: margin ease-in-out .1s;
+  transition: margin ease-in-out .1s;
+  position: relative; }
+
+.widget {
+  padding: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+  border-radius: 6px;
+  -webkit-box-shadow: 0 4px 6px 0 rgba(85, 85, 85, 0.08), 0 1px 20px 0 rgba(0, 0, 0, 0.07), 0px 1px 11px 0px rgba(0, 0, 0, 0.07);
+  -moz-box-shadow: 0 4px 6px 0 rgba(85, 85, 85, 0.08), 0 1px 20px 0 rgba(0, 0, 0, 0.07), 0px 1px 11px 0px rgba(0, 0, 0, 0.07);
+  box-shadow: 0 4px 6px 0 rgba(85, 85, 85, 0.08), 0 1px 20px 0 rgba(0, 0, 0, 0.07), 0px 1px 11px 0px rgba(0, 0, 0, 0.07); }
+
+.layout-top-spacing {
+  margin-top: 20px; }
+
+.layout-spacing {
+  padding-bottom: 40px; }
+
+.layout-px-spacing {
+  padding: 0 20px 0 18px !important;
+  min-height: calc(100vh - 170px) !important; }
+
+.sidebar-closed .layout-px-spacing {
+  padding: 0 16px !important; }
+
+.widget.box .widget-header {
+  background: #fff;
+  padding: 0px 8px 0px;
+  border-top-right-radius: 6px;
+  border-top-left-radius: 6px; }
+
+.row [class*="col-"] .widget .widget-header h4 {
+  color: #3b3f5c;
+  font-size: 17px;
+  font-weight: 600;
+  margin: 0;
+  padding: 16px 15px; }
+
+.seperator-header {
+  background: transparent;
+  box-shadow: none;
+  margin-bottom: 40px;
+  border-radius: 0; }
+  .seperator-header h4 {
+    color: #888ea8;
+    margin-bottom: 0;
+    display: inline-block;
+    border: 2px dashed #888ea8;
+    line-height: 1.4;
+    padding: 3px 6px;
+    font-size: 15px;
+    font-weight: 600;
+    border-radius: 4px;
+    letter-spacing: 1px; }
+
+.widget .widget-header {
+  border-bottom: 0px solid #f1f2f3; }
+  .widget .widget-header:before {
+    display: table;
+    content: "";
+    line-height: 0; }
+  .widget .widget-header:after {
+    display: table;
+    content: "";
+    line-height: 0;
+    clear: both; }
+
+.widget-content-area {
+  padding: 20px;
+  position: relative;
+  background-color: #fff;
+  border-bottom-left-radius: 6px;
+  border-bottom-right-radius: 6px; }
+
+.content-area {
+  max-width: 58.333333%;
+  margin-left: 80px; }
+
+/* 
+=====================
+    Navigation Bar
+=====================
+*/
+.header-container {
+  z-index: 1030;
+  border-bottom: 1px solid #0e1726; }
+  .header-container .navbar {
+    padding: 4px 0; }
+
+.navbar {
+  padding: 0;
+  background: #0e1726; }
+  .navbar .theme-brand {
+    padding: 0.9px 0 0.9px 27px !important;
+    border-radius: 6px 6px 0 0;
+    justify-content: space-between; }
+    .navbar .theme-brand li.theme-logo {
+      align-self: center; }
+      .navbar .theme-brand li.theme-logo img {
+        width: 34px;
+        height: 34px;
+        border-radius: 5px; }
+    .navbar .theme-brand li.theme-text {
+      margin-right: 47px; }
+      .navbar .theme-brand li.theme-text a {
+        font-size: 24px !important;
+        color: #e0e6ed !important;
+        line-height: 2.75rem;
+        padding: 0 0.8rem;
+        text-transform: initial;
+        position: unset;
+        font-weight: 700; }
+  .navbar.expand-header {
+    margin: 0; }
+
+.navbar-brand {
+  width: 5.5rem;
+  padding-top: 0.0rem;
+  padding-bottom: 0.0rem;
+  margin-right: 0.0rem; }
+
+.navbar-expand-sm .navbar-item {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  padding-left: 0;
+  margin-bottom: 0;
+  list-style: none; }
+  .navbar-expand-sm .navbar-item .nav-link {
+    line-height: 2.75rem;
+    padding: 6.24px 9.6px;
+    text-transform: initial;
+    position: unset; }
+
+.header-container .navbar .dropdown-menu {
+  border-radius: 6px;
+  border-color: #e0e6ed; }
+
+.header-container .navbar .dropdown-item {
+  line-height: 1.8;
+  font-size: 0.96rem;
+  padding: 15px 0 15px 0;
+  word-wrap: normal;
+  border-radius: 6px; }
+
+.header-container .navbar .navbar-item .nav-item .dropdown-item.active, .header-container .navbar .navbar-item .nav-item .dropdown-item:active {
+  background-color: transparent;
+  color: #16181b; }
+
+.header-container .navbar .navbar-item .nav-item.dropdown .nav-link:hover span {
+  color: #e0e6ed !important; }
+
+.header-container .navbar .navbar-item .nav-item.dropdown .dropdown-menu {
+  top: 109%;
+  border-radius: 0;
+  border: none;
+  border-radius: 6px;
+  -webkit-box-shadow: 0 4px 6px 0 rgba(85, 85, 85, 0.08), 0 1px 20px 0 rgba(0, 0, 0, 0.07), 0px 1px 11px 0px rgba(0, 0, 0, 0.07);
+  box-shadow: 0 4px 6px 0 rgba(85, 85, 85, 0.08), 0 1px 20px 0 rgba(0, 0, 0, 0.07), 0px 1px 11px 0px rgba(0, 0, 0, 0.07);
+  background: #fff;
+  margin-top: 0; }
+  .header-container .navbar .navbar-item .nav-item.dropdown .dropdown-menu:after {
+    position: absolute;
+    content: '';
+    top: -10px;
+    margin-left: -7px;
+    height: 0;
+    width: 0;
+    border-left: 9px solid transparent;
+    border-right: 9px solid transparent;
+    border-bottom: 15px solid #fff;
+    left: auto;
+    right: 7px;
+    border-bottom-color: #fafafa; }
+
+.header-container .navbar .language-dropdown {
+  margin-left: 20px; }
+  .header-container .navbar .language-dropdown a.nav-link {
+    position: relative;
+    font-size: 24px;
+    padding: 0; }
+  .header-container .navbar .language-dropdown a.dropdown-toggle:after {
+    display: none; }
+  .header-container .navbar .language-dropdown a.dropdown-toggle img {
+    width: 20px;
+    height: 20px;
+    margin: 11px 0px; }
+  .header-container .navbar .language-dropdown .dropdown-menu {
+    min-width: 7rem;
+    left: 50%;
+    transform: translate(-50%, 0);
+    box-shadow: none;
+    top: 105% !important;
+    z-index: 1070;
+    border: 1px solid #e0e6ed;
+    padding: 6px 6px;
+    border-radius: 4px; }
+    .header-container .navbar .language-dropdown .dropdown-menu:before {
+      top: -10px;
+      left: 41%;
+      right: auto !important; }
+    .header-container .navbar .language-dropdown .dropdown-menu:after {
+      top: -8.5px;
+      left: 49% !important;
+      right: auto !important; }
+    .header-container .navbar .language-dropdown .dropdown-menu .dropdown-item:hover {
+      background: rgba(27, 85, 226, 0.180392); }
+    .header-container .navbar .language-dropdown .dropdown-menu .dropdown-item.active, .header-container .navbar .language-dropdown .dropdown-menu .dropdown-item:active {
+      background: transparent;
+      color: #16181b; }
+    .header-container .navbar .language-dropdown .dropdown-menu a img {
+      width: 20px;
+      height: 20px;
+      margin-right: 16px; }
+    .header-container .navbar .language-dropdown .dropdown-menu a span {
+      color: #3b3f5c;
+      font-weight: 500; }
+
+/*   Language   */
+/*   Language Dropdown  */
+/*Message Dropdown*/
+.navbar .navbar-item .nav-item.dropdown.message-dropdown {
+  margin-left: 20px; }
+  .navbar .navbar-item .nav-item.dropdown.message-dropdown .nav-link {
+    padding: 0 0; }
+    .navbar .navbar-item .nav-item.dropdown.message-dropdown .nav-link:after {
+      display: none; }
+    .navbar .navbar-item .nav-item.dropdown.message-dropdown .nav-link svg {
+      color: #e0e6ed;
+      width: 22px;
+      height: 22px; }
+    .navbar .navbar-item .nav-item.dropdown.message-dropdown .nav-link span.badge {
+      position: absolute;
+      top: 13px;
+      right: 2px;
+      width: 18px;
+      height: 18px;
+      border-radius: 50%;
+      padding: 1px 5px 0px;
+      font-size: 10px;
+      color: #fff !important;
+      background: #1b55e2;
+      border: 1px solid #e0e6ed;
+      top: 10px;
+      right: -8px; }
+  .navbar .navbar-item .nav-item.dropdown.message-dropdown.double-digit .nav-link span.badge {
+    top: 11px;
+    right: 1px;
+    width: 22px;
+    height: 22px;
+    padding: 3px 3px 0px;
+    font-size: 9px; }
+  .navbar .navbar-item .nav-item.dropdown.message-dropdown .dropdown-menu {
+    min-width: 15rem;
+    right: -15px;
+    left: auto;
+    padding: 10px !important; }
+    .navbar .navbar-item .nav-item.dropdown.message-dropdown .dropdown-menu .dropdown-item {
+      padding: 13px 21px; }
+      .navbar .navbar-item .nav-item.dropdown.message-dropdown .dropdown-menu .dropdown-item.active, .navbar .navbar-item .nav-item.dropdown.message-dropdown .dropdown-menu .dropdown-item:active {
+        background-color: transparent; }
+      .navbar .navbar-item .nav-item.dropdown.message-dropdown .dropdown-menu .dropdown-item:focus, .navbar .navbar-item .nav-item.dropdown.message-dropdown .dropdown-menu .dropdown-item:hover {
+        background-color: rgba(27, 85, 226, 0.180392); }
+      .navbar .navbar-item .nav-item.dropdown.message-dropdown .dropdown-menu .dropdown-item:first-child {
+        padding-top: 16px; }
+    .navbar .navbar-item .nav-item.dropdown.message-dropdown .dropdown-menu:after {
+      right: 17px; }
+    .navbar .navbar-item .nav-item.dropdown.message-dropdown .dropdown-menu .dropdown-item:last-child {
+      padding-bottom: 16px; }
+    .navbar .navbar-item .nav-item.dropdown.message-dropdown .dropdown-menu .media {
+      margin: 0; }
+      .navbar .navbar-item .nav-item.dropdown.message-dropdown .dropdown-menu .media img {
+        width: 40px;
+        height: 40px;
+        margin-right: 11px; }
+      .navbar .navbar-item .nav-item.dropdown.message-dropdown .dropdown-menu .media .media-body {
+        align-self: center; }
+        .navbar .navbar-item .nav-item.dropdown.message-dropdown .dropdown-menu .media .media-body h5.usr-name {
+          font-size: 15px;
+          margin-bottom: 0px;
+          color: #1b55e2; }
+        .navbar .navbar-item .nav-item.dropdown.message-dropdown .dropdown-menu .media .media-body p.msg-title {
+          font-size: 9px;
+          font-weight: 700;
+          color: #3b3f5c;
+          margin-bottom: 0; }
+
+.navbar .navbar-item .nav-item.dropdown.notification-dropdown {
+  margin-left: 16px; }
+  .navbar .navbar-item .nav-item.dropdown.notification-dropdown .nav-link {
+    padding: 0 0; }
+    .navbar .navbar-item .nav-item.dropdown.notification-dropdown .nav-link:after {
+      display: none; }
+    .navbar .navbar-item .nav-item.dropdown.notification-dropdown .nav-link svg {
+      color: #e0e6ed;
+      width: 22px;
+      height: 22px; }
+    .navbar .navbar-item .nav-item.dropdown.notification-dropdown .nav-link span.badge {
+      position: absolute;
+      top: 9px;
+      right: 3px;
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      padding: 3px 0px 0px;
+      font-size: 10px;
+      color: #fff !important;
+      background: #c2d5ff;
+      display: block;
+      border: 1px solid #3b3f5c; }
+  .navbar .navbar-item .nav-item.dropdown.notification-dropdown .dropdown-menu {
+    min-width: 15rem;
+    right: -5px;
+    left: auto; }
+    .navbar .navbar-item .nav-item.dropdown.notification-dropdown .dropdown-menu .dropdown-item {
+      padding: 0.625rem 1rem; }
+      .navbar .navbar-item .nav-item.dropdown.notification-dropdown .dropdown-menu .dropdown-item:focus, .navbar .navbar-item .nav-item.dropdown.notification-dropdown .dropdown-menu .dropdown-item:hover {
+        background-color: rgba(27, 85, 226, 0.180392); }
+      .navbar .navbar-item .nav-item.dropdown.notification-dropdown .dropdown-menu .dropdown-item:not(:last-child) {
+        border-bottom: 1px solid #ebedf2; }
+    .navbar .navbar-item .nav-item.dropdown.notification-dropdown .dropdown-menu .media {
+      margin: 0; }
+    .navbar .navbar-item .nav-item.dropdown.notification-dropdown .dropdown-menu svg {
+      width: 20px;
+      height: 20px;
+      font-weight: 600;
+      color: #1b55e2;
+      fill: rgba(0, 23, 55, 0.08);
+      margin-right: 14px;
+      align-self: center; }
+    .navbar .navbar-item .nav-item.dropdown.notification-dropdown .dropdown-menu .media-body .notification-para {
+      white-space: normal;
+      line-height: 16px;
+      color: #3b3f5c; }
+      .navbar .navbar-item .nav-item.dropdown.notification-dropdown .dropdown-menu .media-body .notification-para .user-name {
+        font-weight: 600;
+        color: #1b55e2;
+        display: inline-block; }
+
+.navbar .navbar-item .nav-item.search-animated {
+  position: relative; }
+  .navbar .navbar-item .nav-item.search-animated svg {
+    font-weight: 600;
+    margin: 0 9.6px;
+    cursor: pointer;
+    color: #888ea8;
+    position: absolute;
+    width: 18px;
+    height: 18px;
+    top: 9px; }
+
+.navbar .navbar-item .nav-item form.form-inline input.search-form-control {
+  width: 100%;
+  font-size: 14px;
+  background-color: rgba(81, 83, 101, 0.28);
+  border: none;
+  -webkit-border-radius: 6px;
+  -moz-border-radius: 6px;
+  border-radius: 6px;
+  color: #888ea8;
+  letter-spacing: 1px;
+  padding: 0px 4px 0px 35px;
+  height: 36px;
+  font-weight: 600; }
+  .navbar .navbar-item .nav-item form.form-inline input.search-form-control:focus {
+    border: 1px solid #3b3f5c;
+    box-shadow: none; }
+
+.navbar .navbar-item .nav-item .form-inline.search .search-form-control {
+  border: 1px solid rgba(81, 83, 101, 0.28);
+  width: 100%;
+  width: 370px; }
+
+.navbar .navbar-item .nav-item form.form-inline input.search-form-control::-webkit-input-placeholder, .navbar .navbar-item .nav-item form.form-inline input.search-form-control::-ms-input-placeholder, .navbar .navbar-item .nav-item form.form-inline input.search-form-control::-moz-placeholder {
+  color: #888ea8;
+  letter-spacing: 1px;
+  font-size: 13px; }
+
+.navbar .navbar-item .nav-item form.form-inline input.search-form-control:focus::-webkit-input-placeholder, .navbar .navbar-item .nav-item form.form-inline input.search-form-control:focus::-ms-input-placeholder, .navbar .navbar-item .nav-item form.form-inline input.search-form-control:focus::-moz-placeholder {
+  color: #3b3f5c; }
+
+/*Notification Dropdown*/
+.search-overlay {
+  display: none;
+  position: fixed;
+  width: 100vw;
+  height: 100vh;
+  background: transparent !important;
+  z-index: 814 !important;
+  opacity: 0;
+  transition: all 0.5s ease-in-out; }
+  .search-overlay.show {
+    display: block;
+    opacity: .1; }
+
+/* User Profile Dropdown*/
+.navbar .navbar-item .nav-item.user-profile-dropdown .nav-link.user {
+  padding: 0 20px 0 16px;
+  position: relative; }
+
+.navbar .navbar-item .nav-item.dropdown.user-profile-dropdown .nav-link:after {
+  display: none; }
+
+.navbar .navbar-item .nav-item.user-profile-dropdown .nav-link img {
+  width: 28px;
+  border-radius: 4px;
+  height: 28px; }
+
+.navbar .navbar-item .nav-item.user-profile-dropdown .dropdown-menu {
+  z-index: 9999;
+  min-width: 13rem;
+  padding: 11px;
+  top: 68px;
+  left: -164px; }
+  .navbar .navbar-item .nav-item.user-profile-dropdown .dropdown-menu .dropdown-item {
+    padding: 0; }
+    .navbar .navbar-item .nav-item.user-profile-dropdown .dropdown-menu .dropdown-item a {
+      display: block;
+      color: #3b3f5c;
+      font-size: 13px;
+      font-weight: 600;
+      padding: 9px 30px; }
+    .navbar .navbar-item .nav-item.user-profile-dropdown .dropdown-menu .dropdown-item:focus, .navbar .navbar-item .nav-item.user-profile-dropdown .dropdown-menu .dropdown-item:hover {
+      background-color: rgba(27, 85, 226, 0.180392); }
+    .navbar .navbar-item .nav-item.user-profile-dropdown .dropdown-menu .dropdown-item.active, .navbar .navbar-item .nav-item.user-profile-dropdown .dropdown-menu .dropdown-item:active {
+      background-color: transparent; }
+    .navbar .navbar-item .nav-item.user-profile-dropdown .dropdown-menu .dropdown-item:not(:last-child) {
+      border-bottom: 1px solid #ebedf2; }
+    .navbar .navbar-item .nav-item.user-profile-dropdown .dropdown-menu .dropdown-item svg {
+      width: 21px;
+      margin-right: 16px;
+      height: 21px;
+      color: #1b55e2;
+      fill: rgba(0, 23, 55, 0.08); }
+
+/* 
+===============
+    Sidebar
+===============
+*/
+.sub-header-container {
+  position: fixed;
+  top: 53px;
+  width: 100%;
+  z-index: 1029;
+  display: flex; }
+  .sub-header-container .navbar {
+    -webkit-box-shadow: 0px 0px 15px 1px rgba(138, 132, 206, 0.03);
+    -moz-box-shadow: 0px 0px 15px 1px rgba(138, 132, 206, 0.03);
+    box-shadow: 0px 20px 20px rgba(126, 142, 177, 0.12);
+    background: #fafafa;
+    border-radius: 0;
+    padding: 9px 0;
+    justify-content: flex-start;
+    min-height: 53px;
+    width: 100%; }
+    .sub-header-container .navbar .toggle-sidebar {
+      position: relative;
+      padding: 0 25px 0 31px;
+      margin-left: 0; }
+    .sub-header-container .navbar .sidebarCollapse {
+      position: relative;
+      padding: 0 25px 0 31px;
+      margin-left: 0; }
+      .sub-header-container .navbar .sidebarCollapse svg {
+        width: 20px;
+        height: 20px;
+        color: #888ea8;
+        vertical-align: text-top; }
+
+.page-header {
+  display: flex;
+  padding: 0 0; }
+
+.sub-header-container .breadcrumb-one {
+  display: inline-block; }
+  .sub-header-container .breadcrumb-one .breadcrumb {
+    padding: 0;
+    vertical-align: sub;
+    background-color: transparent;
+    margin-bottom: 0; }
+  .sub-header-container .breadcrumb-one .breadcrumb-item {
+    align-self: center; }
+    .sub-header-container .breadcrumb-one .breadcrumb-item a {
+      color: #888ea8;
+      vertical-align: sub; }
+      .sub-header-container .breadcrumb-one .breadcrumb-item a svg {
+        width: 18px;
+        height: 18px;
+        vertical-align: sub;
+        fill: #888ea8; }
+    .sub-header-container .breadcrumb-one .breadcrumb-item.active a {
+      color: #515365; }
+    .sub-header-container .breadcrumb-one .breadcrumb-item span {
+      vertical-align: sub; }
+    .sub-header-container .breadcrumb-one .breadcrumb-item.active {
+      color: #3b3f5c;
+      font-weight: 600; }
+    .sub-header-container .breadcrumb-one .breadcrumb-item + .breadcrumb-item {
+      padding: 0px; }
+      .sub-header-container .breadcrumb-one .breadcrumb-item + .breadcrumb-item::before {
+        color: #888ea8;
+        padding: 0 6px 0 6px;
+        vertical-align: bottom; }
+
+.sub-header-container .more-dropdown .custom-dropdown-icon {
+  padding-right: 20px; }
+  .sub-header-container .more-dropdown .custom-dropdown-icon a.dropdown-toggle {
+    position: relative;
+    padding: 9px 35px 10px 15px;
+    border: 1px solid #d3d3d3;
+    border-radius: 8px;
+    transform: none;
+    font-size: 13px;
+    line-height: 17px;
+    background-color: #fff;
+    letter-spacing: normal;
+    min-width: 115px;
+    text-align: inherit;
+    color: #1b2e4b;
+    box-shadow: none;
+    max-height: 35px; }
+    .sub-header-container .more-dropdown .custom-dropdown-icon a.dropdown-toggle svg {
+      position: absolute;
+      right: 15px;
+      top: 11px;
+      color: #888ea8;
+      width: 13px;
+      height: 13px;
+      margin: 0;
+      -webkit-transition: -webkit-transform .2s ease-in-out;
+      transition: -webkit-transform .2s ease-in-out;
+      transition: transform .2s ease-in-out;
+      transition: transform .2s ease-in-out, -webkit-transform .2s ease-in-out; }
+  .sub-header-container .more-dropdown .custom-dropdown-icon.show a.dropdown-toggle svg {
+    -webkit-transform: rotate(180deg);
+    -ms-transform: rotate(180deg);
+    transform: rotate(180deg); }
+  .sub-header-container .more-dropdown .custom-dropdown-icon .dropdown-menu {
+    position: absolute;
+    right: 16px;
+    top: 40px !important;
+    padding: 8px 0;
+    border: none;
+    min-width: 155px;
+    border: 1px solid #d3d3d3; }
+    .sub-header-container .more-dropdown .custom-dropdown-icon .dropdown-menu a {
+      padding: 8px 15px;
+      font-size: 13px;
+      font-weight: 500;
+      color: #3b3f5c; }
+      .sub-header-container .more-dropdown .custom-dropdown-icon .dropdown-menu a:hover {
+        background-color: #bae7ff;
+        color: #2196f3; }
+
+@media (max-width: 575px) {
+  .page-header {
+    display: block; } }
+
+/* 
+===============
+    Sidebar
+===============
+*/
+.sidebar-wrapper {
+  width: 206px;
+  width: 212px;
+  position: fixed;
+  z-index: 1028;
+  border-radius: 6px 6px 0 0;
+  transition: .600s;
+  height: 100vh;
+  touch-action: none;
+  user-select: none;
+  -webkit-user-drag: none;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  top: 106px;
+  left: 16px; }
+
+.sidebar-theme {
+  background: transparent; }
+
+.sidebar-closed.main-container {
+  padding: 0; }
+
+.sidebar-closed > .sidebar-wrapper {
+  left: -270px; }
+
+.sidebar-closed > #content {
+  margin-left: 0; }
+
+#sidebar .navbar-brand .img-fluid {
+  display: inline;
+  width: 44px;
+  height: auto;
+  margin-left: 20px;
+  margin-top: 5px; }
+
+#sidebar .border-underline {
+  border-left: 1px solid #ccc;
+  height: 20px;
+  margin-top: 18px;
+  margin-left: 0px;
+  margin-right: 8px; }
+
+#sidebar * {
+  overflow: hidden;
+  white-space: nowrap; }
+
+.shadow-bottom {
+  display: block;
+  position: absolute;
+  z-index: 2;
+  height: 33px;
+  width: 100%;
+  pointer-events: none;
+  margin-top: -13px;
+  left: -4px;
+  -webkit-filter: blur(5px);
+  filter: blur(3px);
+  background: -webkit-linear-gradient(180deg, #f1f2f3 49%, #f1f2f3f2 85%, #2C303C00);
+  background: linear-gradient(#F2F4F4 41%, rgba(255, 255, 255, 0.11) 95%, rgba(255, 255, 255, 0)); }
+
+#sidebar ul.menu-categories {
+  position: relative;
+  margin: auto;
+  width: 100%;
+  height: calc(100vh - 127px) !important;
+  overflow: hidden; }
+  #sidebar ul.menu-categories.ps {
+    height: calc(100vh - 107px) !important;
+    margin-right: 0;
+    padding-right: 22px;
+    border-right: 1px solid #e0e6ed; }
+
+#sidebar .ps__thumb-y {
+  right: 4px; }
+
+#sidebar ul.menu-categories li > .dropdown-toggle[data-active="true"] svg.feather-chevron-right, #sidebar ul.menu-categories li > .dropdown-toggle[aria-expanded="true"] svg.feather-chevron-right {
+  transform: rotate(90deg); }
+
+#sidebar ul.menu-categories li.menu:first-child ul.submenu > li a {
+  justify-content: flex-start; }
+  #sidebar ul.menu-categories li.menu:first-child ul.submenu > li a i {
+    align-self: center;
+    margin-right: 12px;
+    font-size: 19px;
+    width: 21px; }
+
+#sidebar ul.menu-categories li.menu:first-child > .dropdown-toggle {
+  margin-top: 21px; }
+
+#sidebar ul.menu-categories li.menu > .dropdown-toggle {
+  display: flex;
+  justify-content: space-between;
+  cursor: pointer;
+  font-size: 13px;
+  color: #0e1726;
+  padding: 11px 14px;
+  transition: .600s;
+  margin-bottom: 4px;
+  font-weight: 600;
+  letter-spacing: 1px; }
+  #sidebar ul.menu-categories li.menu > .dropdown-toggle > div {
+    align-self: center; }
+
+#sidebar ul.menu-categories li.menu .dropdown-toggle:after {
+  display: none; }
+
+#sidebar ul.menu-categories li.menu > .dropdown-toggle svg {
+  color: #506690;
+  margin-right: 10px;
+  vertical-align: middle;
+  width: 20px;
+  height: 20px;
+  fill: rgba(0, 23, 55, 0.08); }
+
+#sidebar ul.menu-categories li.menu > .dropdown-toggle[data-active="true"] {
+  background: #fff;
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  border-radius: 6px;
+  color: #0e1726; }
+  #sidebar ul.menu-categories li.menu > .dropdown-toggle[data-active="true"] svg {
+    color: #000342;
+    fill: #acb0c3; }
+  #sidebar ul.menu-categories li.menu > .dropdown-toggle[data-active="true"]:hover svg, #sidebar ul.menu-categories li.menu > .dropdown-toggle[data-active="true"] span {
+    color: #000342; }
+
+#sidebar ul.menu-categories li.menu > .dropdown-toggle:hover, #sidebar ul.menu-categories li.menu > .dropdown-toggle.dropdown-toggle:not([data-active="true"]):not([aria-expanded="true"]):hover {
+  background: #bfc9d4;
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  border-radius: 6px; }
+
+#sidebar ul.menu-categories li.menu > .dropdown-toggle[aria-expanded="true"]:not([data-active="true"]) {
+  background: #bfc9d4;
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  border-radius: 6px;
+  color: #0e1726; }
+
+#sidebar ul.menu-categories li.menu > .dropdown-toggle:hover svg {
+  color: #000342; }
+
+#sidebar ul.menu-categories li.menu > .dropdown-toggle[aria-expanded="true"]:not([data-active="true"]) svg {
+  color: #000342;
+  color: #506690;
+  fill: rgba(27, 85, 226, 0.239216); }
+
+#sidebar ul.menu-categories li.menu > .dropdown-toggle svg.feather-chevron-right {
+  vertical-align: middle;
+  margin-right: 0;
+  width: 15px; }
+
+#sidebar ul.menu-categories li.menu > .dropdown-toggle[data-active="true"] svg.flaticon-right-arrow, #sidebar ul.menu-categories li.menu > .dropdown-toggle[data-active="true"] svg.flaticon-down-arrow {
+  background-color: transparent; }
+
+#sidebar ul.menu-categories li.menu > a span:not(.badge) {
+  vertical-align: middle; }
+
+#sidebar ul.menu-categories ul.submenu > li a {
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  padding: 10px 12px 10px 48px;
+  padding-left: 24px;
+  margin-left: 36px;
+  font-size: 13px;
+  color: #515365; }
+
+#sidebar ul.menu-categories li.menu ul.submenu > li a:before {
+  content: '';
+  background-color: #d3d3d3;
+  position: absolute;
+  height: 3px;
+  width: 3px;
+  top: 17.5px;
+  left: 13px;
+  border-radius: 50%; }
+
+#sidebar ul.menu-categories ul.submenu > li.active a {
+  color: #1b55e2;
+  border-top-left-radius: 10px;
+  border-bottom-left-radius: 10px;
+  font-weight: 600; }
+
+#sidebar ul.menu-categories li.menu ul.submenu > li.active a:before {
+  background-color: #1b55e2; }
+
+#sidebar ul.menu-categories ul.submenu > li.active {
+  position: relative; }
+
+#sidebar ul.menu-categories ul.submenu > li a:hover {
+  color: #1b55e2; }
+  #sidebar ul.menu-categories ul.submenu > li a:hover:before {
+    background-color: #1b55e2 !important; }
+
+#sidebar ul.menu-categories ul.submenu > li a i {
+  align-self: center;
+  font-size: 9px; }
+
+#sidebar ul.menu-categories ul.submenu li > [data-active="true"] i {
+  color: #1b55e2; }
+
+#sidebar ul.menu-categories ul.submenu li > [data-active="true"]:before {
+  background-color: #1b55e2 !important; }
+
+#sidebar ul.menu-categories ul.submenu li > a[data-active="true"] {
+  color: #1b55e2; }
+
+#sidebar ul.menu-categories ul.submenu > li ul.sub-submenu > li a {
+  position: relative;
+  padding: 10px 12px 10px 48px;
+  padding-left: 13px;
+  margin-left: 47px;
+  font-size: 12px;
+  color: #515365; }
+
+#sidebar ul.menu-categories ul.submenu > li ul.sub-submenu > li.active a {
+  color: #5c1ac3; }
+
+#sidebar ul.menu-categories ul.submenu > li ul.sub-submenu > li a:hover {
+  color: #1b55e2; }
+
+#sidebar ul.menu-categories ul.submenu > li ul.sub-submenu > li a:before {
+  display: none; }
+
+#sidebar ul.menu-categories ul.submenu > li ul.sub-submenu > li.active a:before {
+  background-color: #1b55e2; }
+
+.overlay {
+  display: none;
+  position: fixed;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(0, 0, 0, 0.4);
+  z-index: 1035 !important;
+  opacity: 0;
+  transition: all 0.5s ease-in-out;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  touch-action: pan-y;
+  user-select: none;
+  -webkit-user-drag: none;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
+
+.e-animated {
+  -webkit-animation-duration: 0.6s;
+  animation-duration: 0.6s;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both; }
+
+@-webkit-keyframes e-fadeInUp {
+  0% {
+    opacity: 0;
+    margin-top: 10px; }
+  100% {
+    opacity: 1;
+    margin-top: 0; } }
+
+@keyframes e-fadeInUp {
+  0% {
+    opacity: 0;
+    margin-top: 10px; }
+  100% {
+    opacity: 1;
+    margin-top: 0; } }
+
+.e-fadeInUp {
+  -webkit-animation-name: e-fadeInUp;
+  animation-name: e-fadeInUp; }
+
+#sidebar ul.menu-categories .ps__rail-y {
+  right: -4px !important; }
+
+/*  
+    ======================
+        Footer-wrapper
+    ======================
+*/
+.footer-wrapper {
+  padding: 10px 20px 10px 18px;
+  display: inline-block;
+  background: transparent;
+  font-weight: 600;
+  font-size: 12px;
+  width: 100%;
+  border-top-left-radius: 6px;
+  display: flex;
+  justify-content: space-between; }
+
+.main-container.sidebar-closed .footer-wrapper {
+  border-radius: 0; }
+
+.footer-wrapper .footer-section p {
+  margin-bottom: 0;
+  color: #515365;
+  font-size: 13px;
+  letter-spacing: 1px; }
+  .footer-wrapper .footer-section p a {
+    color: #515365; }
+
+.footer-wrapper .footer-section svg {
+  color: #e7515a;
+  fill: rgba(231, 81, 90, 0.419608);
+  width: 15px;
+  height: 15px;
+  vertical-align: text-top; }
+
+/*  
+    ======================
+        MEDIA QUERIES
+    ======================
+*/
+@media (min-width: 992px) {
+  .sidebar-closed #sidebar .theme-brand li.theme-text a {
+    display: none; } }
+
+@media (max-width: 991px) {
+  .navbar .theme-brand {
+    padding: 0.9px 0 0.9px 14px !important; }
+  .sub-header-container .navbar .toggle-sidebar, .sub-header-container .navbar .sidebarCollapse {
+    position: relative;
+    padding: 0 25px 0 16px; }
+  /*
+      =============
+          NavBar
+      =============
+  */
+  .main-container.sidebar-closed #content {
+    margin-left: 0; }
+  /*
+      =============
+          Sidebar
+      =============
+  */
+  .shadow-bottom {
+    width: 100%; }
+  #content {
+    margin-left: 0; }
+  #sidebar .theme-brand {
+    border-radius: 0;
+    background-color: #1b55e2;
+    padding: 7px 12px 7px 24px;
+    border-color: #1b55e2; }
+  .sidebar-closed #sidebar .theme-brand {
+    padding: 0.9px 12px 0.9px 24px; }
+  .main-container:not(.sbar-open) .sidebar-wrapper, body.alt-menu .sidebar-closed > .sidebar-wrapper {
+    width: 0;
+    left: -52px; }
+  .main-container {
+    padding: 0; }
+  #sidebar ul.menu-categories.ps {
+    height: calc(100vh - 70px) !important; }
+  .sidebar-wrapper {
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: 255px;
+    z-index: 9999;
+    backface-visibility: hidden;
+    -webkit-backface-visibility: hidden;
+    -webkit-transform: translate3d(0, 0, 0);
+    border-radius: 0; }
+  .sidebar-closed > .sidebar-wrapper {
+    left: 0; }
+  .sidebar-noneoverflow {
+    overflow: hidden; }
+  #sidebar {
+    height: 100vh !important;
+    padding: 10px 0 10px 10px;
+    backface-visibility: hidden;
+    -webkit-backface-visibility: hidden;
+    -webkit-transform: translate3d(0, 0, 0);
+    background: #f1f2f3; }
+  .footer-wrapper {
+    padding: 0 16px 17px 16px; }
+  .layout-px-spacing {
+    padding: 0 16px !important; }
+  /* display .overlay when it has the .active class */
+  .overlay.show {
+    display: block;
+    opacity: .7; } }
+
+@media (max-width: 767px) {
+  .navbar .theme-brand li.theme-text {
+    display: none;
+    margin-right: 0; }
+  .navbar .navbar-item .nav-item .form-inline.search {
+    opacity: 0;
+    transition: opacity 200ms, top 200ms;
+    top: -25px; }
+    .navbar .navbar-item .nav-item .form-inline.search .search-form-control {
+      opacity: 0;
+      transition: opacity 200ms, top 200ms; }
+    .navbar .navbar-item .nav-item .form-inline.search.input-focused {
+      position: absolute;
+      bottom: 0;
+      top: 0;
+      background: #060818;
+      height: 100%;
+      width: 100%;
+      left: 0;
+      right: 0;
+      z-index: 32;
+      margin-top: 0px !important;
+      display: flex;
+      opacity: 1;
+      transition: opacity 200ms, top 200ms; }
+      .navbar .navbar-item .nav-item .form-inline.search.input-focused .search-form-control {
+        opacity: 1;
+        transition: opacity 200ms, top 200ms; }
+  .navbar .navbar-item .nav-item.search-animated {
+    position: initial; }
+    .navbar .navbar-item .nav-item.search-animated svg {
+      font-weight: 600;
+      margin: 0 9.6px;
+      cursor: pointer;
+      color: #e0e6ed;
+      position: initial;
+      width: 24px;
+      height: 24px;
+      transition: top 200ms;
+      top: -25px; }
+    .navbar .navbar-item .nav-item.search-animated.show-search svg {
+      margin: 0;
+      position: absolute;
+      top: 16px;
+      left: 16px;
+      width: 22px;
+      height: 22px;
+      color: #e0e6ed;
+      z-index: 40;
+      transition: top 200ms; }
+  .navbar .navbar-item .nav-item .form-inline.search.input-focused .search-bar {
+    width: 100%; }
+  .navbar .navbar-item .nav-item .form-inline.search.input-focused .search-form-control {
+    background: transparent;
+    display: block;
+    padding-left: 50px;
+    padding-right: 12px;
+    border: none; }
+  .navbar .navbar-item .nav-item .form-inline.search .search-form-control {
+    border: none;
+    width: 100%;
+    display: none; }
+  .header-container .navbar .language-dropdown {
+    margin-left: 16px; } }
+
+@media (max-width: 575px) {
+  .navbar .navbar-item .nav-item.message-dropdown .dropdown-menu {
+    min-width: 16.2rem; }
+  .sub-header-container .breadcrumb-one .breadcrumb-item:not(.active), .sub-header-container .breadcrumb-one .breadcrumb-item + .breadcrumb-item::before {
+    display: none; }
+  .sub-header-container .breadcrumb-one .breadcrumb-item span {
+    vertical-align: sub;
+    font-size: 15px;
+    font-weight: 700; }
+  .sub-header-container .navbar .toggle-sidebar, .sub-header-container .navbar .sidebarCollapse {
+    padding: 0 13px 0 16px; }
+  .navbar .navbar-item .nav-item.dropdown .dropdown-menu:after {
+    right: 45px; }
+  .navbar .navbar-item .nav-item.dropdown.notification-dropdown .dropdown-menu {
+    right: -44px; }
+    .navbar .navbar-item .nav-item.dropdown.notification-dropdown .dropdown-menu:after {
+      right: 46px; }
+  .navbar .navbar-item .nav-item.dropdown.message-dropdown .dropdown-menu {
+    right: -82px; }
+    .navbar .navbar-item .nav-item.dropdown.message-dropdown .dropdown-menu:after {
+      right: 83px; }
+  .footer-wrapper .footer-section.f-section-2 {
+    display: none; } }
diff --git a/static/css/tables/table-basic.css b/static/css/tables/table-basic.css
new file mode 100644
index 00000000..90aeceea
--- /dev/null
+++ b/static/css/tables/table-basic.css
@@ -0,0 +1,71 @@
+/*
+	===============================
+			@Import	Function
+	===============================
+*/
+/*
+	===============================
+			@Import	Mixins
+	===============================
+*/
+.table-controls {
+  padding: 0;
+  margin: 0;
+  list-style: none; }
+  .table-controls > li {
+    display: inline-block;
+    margin: 0 2px;
+    line-height: 1; }
+    .table-controls > li > a {
+      display: inline-block; }
+      .table-controls > li > a i {
+        margin: 0;
+        color: #555;
+        font-size: 16px;
+        display: block; }
+        .table-controls > li > a i:hover {
+          text-decoration: none; }
+
+.table .progress {
+  margin-bottom: 0; }
+
+/*Table Colors*/
+.contextual-table.table > thead > tr > th, .contextual-table.table > tbody > tr > td {
+  border: none; }
+
+.table-default > td, .table-default > th {
+  background-color: #f1f2f3;
+  color: #3b3f5c; }
+
+.table-primary > td, .table-primary > th {
+  background-color: #c7d8fd;
+  color: #2196f3; }
+
+.table-secondary > td, .table-secondary > th {
+  background-color: #e0d4f9;
+  color: #5c1ac3; }
+
+.table-success > td, .table-success > th {
+  background-color: #cbfdf3;
+  color: #8dbf42; }
+
+.table-danger > td, .table-danger > th {
+  background-color: #ffe1e2;
+  color: #e7515a; }
+
+.table-warning > td, .table-warning > th {
+  background-color: #fdefd5;
+  color: #e2a03f; }
+
+.table-info > td, .table-info > th {
+  background-color: #bae7ff;
+  color: #2196f3; }
+
+.table-light > td, .table-light > th {
+  background-color: #ffffff;
+  color: #888ea8; }
+
+.table-dark > td, .table-dark > th {
+  background-color: #acb0c3;
+  color: #515365;
+  border-color: #fff !important; }
diff --git a/static/css/users/account-setting.css b/static/css/users/account-setting.css
new file mode 100644
index 00000000..a39d12a8
--- /dev/null
+++ b/static/css/users/account-setting.css
@@ -0,0 +1,308 @@
+/*
+	===============================
+			@Import	Function
+	===============================
+*/
+/*
+	===============================
+			@Import	Mixins
+	===============================
+*/
+.section {
+  -webkit-box-shadow: 0 4px 6px 0 rgba(85, 85, 85, 0.0901961), 0 1px 20px 0 rgba(0, 0, 0, 0.08), 0px 1px 11px 0px rgba(0, 0, 0, 0.06);
+  -moz-box-shadow: 0 4px 6px 0 rgba(85, 85, 85, 0.0901961), 0 1px 20px 0 rgba(0, 0, 0, 0.08), 0px 1px 11px 0px rgba(0, 0, 0, 0.06);
+  box-shadow: 0 4px 6px 0 rgba(85, 85, 85, 0.0901961), 0 1px 20px 0 rgba(0, 0, 0, 0.08), 0px 1px 11px 0px rgba(0, 0, 0, 0.06); }
+
+.layout-spacing {
+  padding-bottom: 25px; }
+
+.form-control {
+  padding: 8px 8px; }
+
+.blockui-growl-message {
+  display: none;
+  text-align: left;
+  padding: 15px;
+  background-color: #8dbf42;
+  color: #fff;
+  border-radius: 3px; }
+  .blockui-growl-message i {
+    font-size: 20px; }
+
+.general-info .info h6, .about .info h5, .work-platforms .info h5, .contact .info h5, .social .info h5, .skill .info h5, .edu-experience .info h5, .work-experience .info h5 {
+  color: #3b3f5c;
+  margin: 4px 8px 40px 8px;
+  font-weight: 700;
+  font-size: 16px;
+  text-transform: uppercase; }
+
+/*
+    General Infomation
+*/
+.general-info {
+  background-color: #fff;
+  border-radius: 6px; }
+  .general-info .info, .general-info .save-info {
+    padding: 20px; }
+  .general-info .info .form {
+    width: 92%; }
+  .general-info .info .upload {
+    border-right: 1px solid #ebedf2; }
+    .general-info .info .upload p {
+      font-size: 14px;
+      font-weight: 600;
+      color: #1b55e2; }
+      .general-info .info .upload p i {
+        font-size: 22px;
+        color: #1b55e2;
+        vertical-align: middle; }
+  .general-info .info label {
+    color: #888ea8;
+    font-size: 13px;
+    letter-spacing: 1px; }
+  .general-info .info .dropify-wrapper {
+    width: 120px;
+    height: 120px;
+    border: none;
+    border-radius: 6px; }
+    .general-info .info .dropify-wrapper .dropify-preview {
+      background-color: #fff;
+      padding: 0; }
+    .general-info .info .dropify-wrapper .dropify-clear {
+      font-size: 16px;
+      padding: 4px 8px;
+      color: #fff;
+      border: none; }
+      .general-info .info .dropify-wrapper .dropify-clear:hover {
+        background-color: transparent; }
+    .general-info .info .dropify-wrapper .dropify-preview .dropify-infos .dropify-infos-inner p.dropify-infos-message {
+      padding-top: 27px; }
+      .general-info .info .dropify-wrapper .dropify-preview .dropify-infos .dropify-infos-inner p.dropify-infos-message::before {
+        height: 20px;
+        position: absolute;
+        top: -1px;
+        left: 45%;
+        color: #fff;
+        -webkit-transform: translate(-50%, 0);
+        transform: translate(-50%, 0);
+        background: transparent;
+        width: 0;
+        height: 0;
+        font-size: 28px;
+        width: 24px;
+        content: " ";
+        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-upload-cloud'%3e%3cpolyline points='16 16 12 12 8 16'%3e%3c/polyline%3e%3cline x1='12' y1='12' x2='12' y2='21'%3e%3c/line%3e%3cpath d='M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3'%3e%3c/path%3e%3cpolyline points='16 16 12 12 8 16'%3e%3c/polyline%3e%3c/svg%3e");
+        height: 20px; }
+    .general-info .info .dropify-wrapper.touch-fallback {
+      border: 1px solid #ebedf2; }
+      .general-info .info .dropify-wrapper.touch-fallback .dropify-preview .dropify-infos .dropify-infos-inner {
+        padding: 0; }
+      .general-info .info .dropify-wrapper.touch-fallback .dropify-clear {
+        color: #515365; }
+      .general-info .info .dropify-wrapper.touch-fallback .dropify-preview .dropify-infos .dropify-infos-inner p.dropify-filename {
+        margin-top: 10px; }
+
+/*
+    Image upload
+*/
+/*
+    About
+*/
+.about {
+  background-color: #fff;
+  border-radius: 6px; }
+  .about .info, .about .save-info {
+    padding: 20px; }
+  .about .info label {
+    color: #888ea8;
+    font-size: 13px;
+    letter-spacing: 1px; }
+
+/*
+    Education and Experience
+*/
+.work-platforms {
+  background-color: #fff;
+  border-radius: 6px; }
+  .work-platforms .info {
+    padding: 20px; }
+  .work-platforms .platform-div:not(:last-child) {
+    margin-bottom: 55px;
+    padding-bottom: 55px;
+    border-bottom: 2px solid #e0e6ed; }
+  .work-platforms .platform-div:last-child {
+    margin-bottom: 40px; }
+
+/*
+    Contact
+*/
+.contact {
+  background-color: #fff;
+  border-radius: 6px; }
+  .contact .info, .contact .save-info {
+    padding: 20px; }
+  .contact .info label {
+    color: #888ea8;
+    font-size: 13px;
+    letter-spacing: 1px; }
+
+/*
+    Social
+*/
+.social {
+  background-color: #fff;
+  border-radius: 6px; }
+  .social .info, .social .save-info {
+    padding: 20px; }
+  .social .input-group-prepend .input-group-text {
+    border-radius: 6px;
+    color: #fff;
+    border: none; }
+
+.input-group .input-group-prepend .input-group-text svg {
+  color: #1b55e2; }
+
+.social .info input {
+  border-radius: 0.25rem !important; }
+
+/*
+    Skills
+*/
+.skill {
+  background-color: #fff;
+  border-radius: 6px; }
+  .skill .input-form {
+    margin-bottom: 24px;
+    display: flex;
+    width: 50%;
+    margin-right: auto;
+    margin-left: auto; }
+  .skill input[type="text"] {
+    margin-right: 10px; }
+  .skill .info {
+    padding: 20px; }
+  .skill .skill-name {
+    font-size: 13px;
+    font-weight: 700;
+    margin-bottom: 0;
+    margin-top: 0; }
+  .skill .save-info {
+    padding: 20px; }
+  .skill .info label {
+    text-transform: uppercase;
+    color: #c2d5ff; }
+  .skill .custom-progress.progress-up .range-count {
+    margin-top: 11px; }
+  .skill .custom-progress.progress-down .range-count {
+    margin-top: 15px; }
+  .skill .range-count {
+    font-weight: 700;
+    color: #3b3f5c; }
+    .skill .range-count .range-count-number {
+      display: inline-block;
+      background: #ffffff;
+      padding: 3px 8px;
+      border-radius: 5px;
+      color: #1b55e2;
+      border: 1px solid #e0e6ed; }
+  .skill .custom-progress.top-right .range-count, .skill .custom-progress.bottom-right .range-count {
+    text-align: right; }
+  .skill .progress-range-counter::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    background: #1b55e2;
+    cursor: pointer;
+    height: 16px;
+    width: 16px;
+    margin-top: -4px;
+    -webkit-transition: all 0.35s ease;
+    transition: all 0.35s ease; }
+  .skill .progress-range-counter:active::-webkit-slider-thumb {
+    -webkit-transform: scale(1.2);
+    transform: scale(1.2); }
+  .skill .progress-range-counter:focus::-webkit-slider-thumb {
+    background: #1b55e2;
+    cursor: pointer;
+    height: 16px;
+    width: 16px;
+    margin-top: -4px;
+    box-shadow: none; }
+  .skill .progress-range-counter::-moz-range-thumb {
+    background: #1b55e2;
+    cursor: pointer;
+    height: 16px;
+    width: 16px;
+    margin-top: -4px; }
+
+/*
+    Education and Experience
+*/
+.edu-experience {
+  background-color: #fff;
+  border-radius: 6px; }
+  .edu-experience .edu-section:not(:last-child) {
+    margin-bottom: 55px;
+    padding-bottom: 55px;
+    border-bottom: 2px solid #e0e6ed; }
+  .edu-experience .edu-section:last-child {
+    margin-bottom: 40px; }
+  .edu-experience .info, .edu-experience .save-info {
+    padding: 20px; }
+  .edu-experience .info label {
+    color: #888ea8;
+    font-size: 13px;
+    letter-spacing: 1px; }
+
+/*
+    Work Experience
+*/
+.work-experience {
+  background-color: #fff;
+  border-radius: 6px; }
+  .work-experience .work-section:not(:last-child) {
+    margin-bottom: 55px;
+    padding-bottom: 55px;
+    border-bottom: 2px solid #e0e6ed; }
+  .work-experience .work-section:last-child {
+    margin-bottom: 40px; }
+  .work-experience .info, .work-experience .save-info {
+    padding: 20px; }
+  .work-experience .info label {
+    color: #888ea8;
+    font-size: 13px;
+    letter-spacing: 1px; }
+
+/*
+    Footer
+*/
+.account-settings-footer {
+  position: fixed;
+  bottom: 0;
+  width: calc(100% - 266px);
+  background: #191e3a;
+  padding: 12px 20px;
+  -webkit-box-shadow: -2px -9px 20px rgba(126, 142, 177, 0.12);
+  -moz-box-shadow: -2px -9px 20px rgba(126, 142, 177, 0.12);
+  box-shadow: -2px -9px 20px rgba(126, 142, 177, 0.12);
+  border-top: 1px solid #f1f2f3;
+  border-radius: 6px 6px 0 0;
+  z-index: 5; }
+  .account-settings-footer .as-footer-container {
+    display: flex;
+    justify-content: space-between; }
+
+.sidebar-closed .account-settings-footer {
+  width: calc(100% - 32px); }
+
+@media (max-width: 991px) {
+  .account-settings-container .account-content {
+    width: 100%;
+    padding: 0; }
+  .account-settings-footer {
+    width: calc(100% - 29px); } }
+
+@media (max-width: 767px) {
+  .general-info .info .upload {
+    border-right: none; }
+  .skill .input-form {
+    width: 100%; } }
diff --git a/static/css/users/user-profile.css b/static/css/users/user-profile.css
new file mode 100644
index 00000000..f09d305a
--- /dev/null
+++ b/static/css/users/user-profile.css
@@ -0,0 +1,389 @@
+/*
+	===============================
+			@Import	Function
+	===============================
+*/
+/*
+	===============================
+			@Import	Mixins
+	===============================
+*/
+.widget-content-area {
+  -webkit-box-shadow: 0 4px 6px 0 rgba(85, 85, 85, 0.0901961), 0 1px 20px 0 rgba(0, 0, 0, 0.08), 0px 1px 11px 0px rgba(0, 0, 0, 0.06);
+  -moz-box-shadow: 0 4px 6px 0 rgba(85, 85, 85, 0.0901961), 0 1px 20px 0 rgba(0, 0, 0, 0.08), 0px 1px 11px 0px rgba(0, 0, 0, 0.06);
+  box-shadow: 0 4px 6px 0 rgba(85, 85, 85, 0.0901961), 0 1px 20px 0 rgba(0, 0, 0, 0.08), 0px 1px 11px 0px rgba(0, 0, 0, 0.06); }
+
+.layout-spacing {
+  padding-bottom: 25px; }
+
+/* 
+===================
+    User Profile
+===================
+*/
+.user-profile .widget-content-area {
+  border-radius: 6px; }
+  .user-profile .widget-content-area .edit-profile {
+    height: 35px;
+    width: 35px;
+    display: flex;
+    justify-content: center;
+    align-self: center;
+    background-color: #1b55e2;
+    background: linear-gradient(to right, #0081ff 0%, #0045ff 100%);
+    border-radius: 50%;
+    box-shadow: 0 10px 15px rgba(0, 69, 255, 0.2); }
+    .user-profile .widget-content-area .edit-profile svg {
+      font-size: 17px;
+      vertical-align: middle;
+      margin-right: 0;
+      color: #fff;
+      width: 19px;
+      align-self: center; }
+  .user-profile .widget-content-area h3 {
+    position: relative;
+    font-size: 21px;
+    font-weight: 600;
+    color: #3b3f5c;
+    margin: 6px 0px 0 0; }
+    .user-profile .widget-content-area h3:after {
+      position: absolute;
+      content: "";
+      height: 2px;
+      width: 55px;
+      background: #1b55e2;
+      border-radius: 50%;
+      bottom: 9px;
+      left: 15px; }
+  .user-profile .widget-content-area .user-info {
+    margin-top: 40px; }
+    .user-profile .widget-content-area .user-info img {
+      border-radius: 9px;
+      box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.2); }
+    .user-profile .widget-content-area .user-info p {
+      font-size: 20px;
+      font-weight: 600;
+      margin-top: 22px;
+      color: #1b55e2; }
+  .user-profile .widget-content-area .user-info-list ul.contacts-block {
+    border: none;
+    max-width: 217px;
+    margin: 36px auto; }
+    .user-profile .widget-content-area .user-info-list ul.contacts-block li {
+      margin-bottom: 13px;
+      font-weight: 600;
+      font-size: 13px; }
+      .user-profile .widget-content-area .user-info-list ul.contacts-block li a {
+        font-weight: 600;
+        font-size: 15px;
+        color: #1b55e2; }
+    .user-profile .widget-content-area .user-info-list ul.contacts-block svg {
+      width: 21px;
+      margin-right: 15px;
+      color: #888ea8;
+      vertical-align: middle;
+      fill: rgba(0, 23, 55, 0.08); }
+    .user-profile .widget-content-area .user-info-list ul.contacts-block li:hover svg {
+      color: #1b55e2;
+      fill: rgba(27, 85, 226, 0.239216); }
+    .user-profile .widget-content-area .user-info-list ul.contacts-block ul.list-inline {
+      margin: 27px auto; }
+      .user-profile .widget-content-area .user-info-list ul.contacts-block ul.list-inline div.social-icon {
+        border: 2px solid #e0e6ed;
+        border-radius: 50%;
+        height: 35px;
+        width: 35px;
+        display: flex;
+        justify-content: center;
+        align-self: center; }
+      .user-profile .widget-content-area .user-info-list ul.contacts-block ul.list-inline svg {
+        margin-right: 0;
+        color: #1b55e2;
+        width: 19px;
+        align-self: center; }
+
+/* 
+==============
+    Skills
+==============
+*/
+.skills .widget-content-area {
+  border-radius: 6px; }
+  .skills .widget-content-area h3 {
+    position: relative;
+    font-size: 21px;
+    font-weight: 600;
+    color: #3b3f5c;
+    margin: 6px 0px 40px 0; }
+    .skills .widget-content-area h3:after {
+      position: absolute;
+      content: "";
+      height: 2px;
+      width: 47px;
+      background: #1b55e2;
+      border-radius: 50%;
+      bottom: -2px;
+      left: 15px; }
+  .skills .widget-content-area p.skill-item {
+    margin-bottom: 5px;
+    font-size: 15px;
+    color: #515365;
+    font-weight: 600; }
+  .skills .widget-content-area .progress {
+    height: 20px;
+    box-shadow: 1px 3px 20px 3px #f1f2f3;
+    margin-bottom: 31px; }
+    .skills .widget-content-area .progress .progress-bar {
+      background-color: #1b55e2;
+      background: linear-gradient(to right, #0081ff 0%, #0045ff 100%);
+      border-radius: 1rem;
+      box-shadow: 0 2px 4px rgba(0, 69, 255, 0.15), 0 8px 16px rgba(0, 69, 255, 0.2);
+      font-size: 12px;
+      letter-spacing: 1px;
+      font-weight: 100; }
+    .skills .widget-content-area .progress .progress-title {
+      display: flex;
+      justify-content: space-between;
+      padding: 15px; }
+      .skills .widget-content-area .progress .progress-title span {
+        align-self: center; }
+
+/* 
+==============
+    Bio
+==============
+*/
+.bio .widget-content-area {
+  border-radius: 6px;
+  padding-bottom: 0; }
+  .bio .widget-content-area h3 {
+    position: relative;
+    font-size: 21px;
+    font-weight: 600;
+    color: #3b3f5c;
+    margin: 6px 0px 40px 0; }
+    .bio .widget-content-area h3:after {
+      position: absolute;
+      content: "";
+      height: 2px;
+      width: 30px;
+      background: #1b55e2;
+      border-radius: 50%;
+      bottom: -2px;
+      left: 15px; }
+  .bio .widget-content-area h5 {
+    font-size: 16px;
+    font-weight: 700;
+    color: #3b3f5c; }
+  .bio .widget-content-area p {
+    color: #888ea8;
+    font-size: 15px; }
+  .bio .widget-content-area .bio-skill-box {
+    padding-top: 30px;
+    padding-bottom: 30px; }
+  .bio .widget-content-area .b-skills {
+    padding: 22px 16px;
+    box-shadow: 2px 5px 17px 0 rgba(31, 45, 61, 0.17);
+    background: #fff;
+    border-radius: 10px;
+    padding: 30px 30px 24px; }
+    .bio .widget-content-area .b-skills svg {
+      width: 30px;
+      height: 30px;
+      margin-right: 21px;
+      color: #1b55e2; }
+    .bio .widget-content-area .b-skills h5 {
+      margin-bottom: 10px;
+      font-size: 16px; }
+    .bio .widget-content-area .b-skills p {
+      font-size: 13px; }
+
+/* 
+================
+    Education
+================
+*/
+.education .widget-content-area {
+  border-radius: 6px; }
+  .education .widget-content-area h3 {
+    position: relative;
+    font-size: 21px;
+    font-weight: 600;
+    color: #3b3f5c;
+    margin: 6px 0px 40px 0; }
+    .education .widget-content-area h3:after {
+      position: absolute;
+      content: "";
+      height: 2px;
+      width: 97px;
+      background: #1b55e2;
+      border-radius: 50%;
+      bottom: -2px;
+      left: 15px; }
+  .education .widget-content-area .timeline-alter .item-timeline {
+    display: flex; }
+    .education .widget-content-area .timeline-alter .item-timeline .t-dot {
+      position: relative;
+      border-color: #1b55e2;
+      padding: 10px; }
+      .education .widget-content-area .timeline-alter .item-timeline .t-dot:before {
+        content: '';
+        position: absolute;
+        border-color: inherit;
+        border-width: 2px;
+        border-style: solid;
+        border-radius: 50%;
+        width: 10px;
+        height: 10px;
+        top: 15px;
+        left: 50%;
+        transform: translateX(-50%); }
+    .education .widget-content-area .timeline-alter .item-timeline:not(:last-child) .t-dot:after {
+      content: '';
+      position: absolute;
+      border-color: inherit;
+      border-width: 2px;
+      border-style: solid;
+      border-radius: 50%;
+      width: 10px;
+      height: 10px;
+      top: 15px;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 0;
+      height: auto;
+      top: 25px;
+      bottom: -15px;
+      border-right-width: 0;
+      border-top-width: 0;
+      border-bottom-width: 0;
+      border-radius: 0;
+      border-color: #ebedf2; }
+    .education .widget-content-area .timeline-alter .item-timeline .t-dot img {
+      width: 45px;
+      height: 45px;
+      border-radius: 50%;
+      z-index: 7;
+      position: relative; }
+    .education .widget-content-area .timeline-alter .item-timeline .t-meta-date {
+      padding: 10px; }
+      .education .widget-content-area .timeline-alter .item-timeline .t-meta-date p {
+        margin: 0;
+        min-width: 100px;
+        max-width: 100px;
+        font-size: 12px;
+        font-weight: 700;
+        color: #888ea8; }
+    .education .widget-content-area .timeline-alter .item-timeline .t-text {
+      padding: 10px;
+      align-self: center; }
+      .education .widget-content-area .timeline-alter .item-timeline .t-text p {
+        font-size: 13px;
+        margin: 0;
+        color: #515365;
+        font-weight: 600; }
+        .education .widget-content-area .timeline-alter .item-timeline .t-text p a {
+          color: #2196f3;
+          font-weight: 600; }
+
+@media (max-width: 575px) {
+  .education .widget-content-area .timeline-alter .item-timeline {
+    display: block;
+    text-align: center; }
+    .education .widget-content-area .timeline-alter .item-timeline .t-meta-date p, .education .widget-content-area .timeline-alter .item-timeline .t-usr-txt p {
+      margin: 0 auto; } }
+
+/* 
+=======================
+    Work Experience
+=======================
+*/
+.work-experience .widget-content-area {
+  border-radius: 6px; }
+  .work-experience .widget-content-area h3 {
+    position: relative;
+    font-size: 21px;
+    font-weight: 600;
+    color: #3b3f5c;
+    margin: 6px 0px 40px 0; }
+    .work-experience .widget-content-area h3:after {
+      position: absolute;
+      content: "";
+      height: 2px;
+      width: 173px;
+      background: #1b55e2;
+      border-radius: 50%;
+      bottom: -2px;
+      left: 15px; }
+  .work-experience .widget-content-area .timeline-alter .item-timeline {
+    display: flex; }
+    .work-experience .widget-content-area .timeline-alter .item-timeline .t-dot {
+      position: relative;
+      border-color: #1b55e2;
+      padding: 10px; }
+      .work-experience .widget-content-area .timeline-alter .item-timeline .t-dot:before {
+        content: '';
+        position: absolute;
+        border-color: inherit;
+        border-width: 2px;
+        border-style: solid;
+        border-radius: 50%;
+        width: 10px;
+        height: 10px;
+        top: 15px;
+        left: 50%;
+        transform: translateX(-50%); }
+    .work-experience .widget-content-area .timeline-alter .item-timeline:not(:last-child) .t-dot:after {
+      content: '';
+      position: absolute;
+      border-color: inherit;
+      border-width: 2px;
+      border-style: solid;
+      border-radius: 50%;
+      width: 10px;
+      height: 10px;
+      top: 15px;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 0;
+      height: auto;
+      top: 25px;
+      bottom: -15px;
+      border-right-width: 0;
+      border-top-width: 0;
+      border-bottom-width: 0;
+      border-radius: 0;
+      border-color: #ebedf2; }
+    .work-experience .widget-content-area .timeline-alter .item-timeline .t-dot img {
+      width: 45px;
+      height: 45px;
+      border-radius: 50%;
+      z-index: 7;
+      position: relative; }
+    .work-experience .widget-content-area .timeline-alter .item-timeline .t-meta-date {
+      padding: 10px; }
+      .work-experience .widget-content-area .timeline-alter .item-timeline .t-meta-date p {
+        margin: 0;
+        min-width: 100px;
+        max-width: 100px;
+        font-size: 12px;
+        font-weight: 700;
+        color: #888ea8; }
+    .work-experience .widget-content-area .timeline-alter .item-timeline .t-text {
+      padding: 10px;
+      align-self: center; }
+      .work-experience .widget-content-area .timeline-alter .item-timeline .t-text p {
+        font-size: 13px;
+        margin: 0;
+        color: #515365;
+        font-weight: 600; }
+        .work-experience .widget-content-area .timeline-alter .item-timeline .t-text p a {
+          color: #2196f3;
+          font-weight: 600; }
+
+@media (max-width: 575px) {
+  .work-experience .widget-content-area .timeline-alter .item-timeline {
+    display: block;
+    text-align: center; }
+    .work-experience .widget-content-area .timeline-alter .item-timeline .t-meta-date p, .work-experience .widget-content-area .timeline-alter .item-timeline .t-usr-txt p {
+      margin: 0 auto; } }
diff --git a/static/css/widgets/modules-widgets.css b/static/css/widgets/modules-widgets.css
new file mode 100644
index 00000000..6372f32f
--- /dev/null
+++ b/static/css/widgets/modules-widgets.css
@@ -0,0 +1,1707 @@
+/*
+	===============================
+			@Import	Function
+	===============================
+*/
+/*
+	===============================
+			@Import	Mixins
+	===============================
+*/
+/*
+    ===============================
+    /|\                         /|\
+    /|\                         /|\
+    /|\    Analytics Section    /|\
+    /|\                         /|\
+    /|\                         /|\
+    ===============================
+*/
+.layout-spacing {
+  padding-bottom: 30px; }
+
+.widget {
+  position: relative;
+  padding: 0;
+  border-radius: 6px;
+  border: none;
+  -webkit-box-shadow: 0 4px 6px 0 rgba(85, 85, 85, 0.08), 0 1px 20px 0 rgba(0, 0, 0, 0.07), 0px 1px 11px 0px rgba(0, 0, 0, 0.07);
+  -moz-box-shadow: 0 4px 6px 0 rgba(85, 85, 85, 0.08), 0 1px 20px 0 rgba(0, 0, 0, 0.07), 0px 1px 11px 0px rgba(0, 0, 0, 0.07);
+  box-shadow: 0 4px 6px 0 rgba(85, 85, 85, 0.08), 0 1px 20px 0 rgba(0, 0, 0, 0.07), 0px 1px 11px 0px rgba(0, 0, 0, 0.07); }
+
+/*
+    ==================
+        Notification
+    ==================
+*/
+.widget-card-four {
+  padding: 25px 32px;
+  background: #fff; }
+  .widget-card-four .w-content {
+    display: flex;
+    justify-content: space-between; }
+  .widget-card-four .w-info h6 {
+    font-weight: 600;
+    margin-bottom: 0;
+    color: #0e1726;
+    font-size: 23px;
+    letter-spacing: 0; }
+  .widget-card-four .w-info p {
+    font-weight: 600;
+    margin-bottom: 0;
+    color: #5c1ac3;
+    font-size: 16px; }
+  .widget-card-four .w-icon {
+    color: #5c1ac3;
+    background-color: #dccff7;
+    height: 45px;
+    display: inline-flex;
+    width: 45px;
+    align-self: center;
+    justify-content: center;
+    border-radius: 50%;
+    padding: 10px; }
+  .widget-card-four .progress {
+    height: 8px;
+    margin-bottom: 0;
+    margin-top: 62px;
+    margin-bottom: 0;
+    height: 22px;
+    padding: 4px;
+    border-radius: 20px;
+    box-shadow: 0 2px 2px rgba(224, 230, 237, 0.458824); }
+  .widget-card-four .progress-bar {
+    position: relative; }
+    .widget-card-four .progress-bar:before {
+      content: '';
+      height: 7px;
+      width: 7px;
+      background: #fff;
+      position: absolute;
+      right: 3px;
+      border-radius: 50%;
+      top: 3.4px; }
+
+/*
+    =====================
+        Unique Visitors
+    =====================
+*/
+.widget.widget-chart-three {
+  background: #fff; }
+  .widget.widget-chart-three .widget-heading {
+    display: flex;
+    justify-content: space-between;
+    border-bottom: 1px dashed #e0e6ed;
+    padding: 20px 20px;
+    margin-bottom: 0;
+    padding-bottom: 20px; }
+    .widget.widget-chart-three .widget-heading h5 {
+      font-size: 17px;
+      display: block;
+      color: #0e1726;
+      font-weight: 600;
+      margin-bottom: 0; }
+    .widget.widget-chart-three .widget-heading .dropdown {
+      align-self: center; }
+      .widget.widget-chart-three .widget-heading .dropdown a svg {
+        color: #888ea8;
+        width: 19px;
+        height: 19px; }
+      .widget.widget-chart-three .widget-heading .dropdown .dropdown-menu {
+        padding: 8px 8px;
+        min-width: 10rem;
+        border-radius: 6px;
+        top: 5px !important; }
+  .widget.widget-chart-three .apexcharts-legend-marker {
+    left: -5px !important; }
+
+.widget.widget-activity-two {
+  position: relative;
+  background: #fff;
+  border-radius: 8px;
+  height: 100%; }
+  .widget.widget-activity-two .widget-heading {
+    display: flex;
+    justify-content: space-between;
+    border-bottom: 1px dashed #e0e6ed;
+    padding: 20px 20px;
+    padding-bottom: 20px; }
+    .widget.widget-activity-two .widget-heading h5 {
+      font-size: 17px;
+      display: block;
+      color: #0e1726;
+      font-weight: 600;
+      margin-bottom: 0; }
+
+/*
+    ========================
+        Recent Activities
+    ========================
+*/
+.widget-activity-two .widget-content {
+  padding: 20px 20px 20px 20px; }
+
+.widget-activity-two .mt-container {
+  position: relative;
+  height: 293px;
+  overflow: auto;
+  padding: 0 0 0 12px; }
+
+.widget-activity-two .timeline-line .item-timeline {
+  display: flex; }
+  .widget-activity-two .timeline-line .item-timeline .t-dot {
+    position: relative; }
+    .widget-activity-two .timeline-line .item-timeline .t-dot:before {
+      content: '';
+      position: absolute;
+      border-color: inherit;
+      border-width: 3px;
+      border-style: solid;
+      border-radius: 50%;
+      width: 16px;
+      height: 16px;
+      top: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      border-color: #e0e6ed;
+      background: #bfc9d4; }
+    .widget-activity-two .timeline-line .item-timeline .t-dot:after {
+      content: '';
+      position: absolute;
+      border-color: inherit;
+      border-width: 1px;
+      border-style: solid;
+      border-radius: 50%;
+      width: 10px;
+      height: 10px;
+      top: 15px;
+      left: 50%;
+      transform: translateX(-50%);
+      border-color: #bfc9d4;
+      width: 0;
+      height: auto;
+      top: 25px;
+      bottom: -15px;
+      border-right-width: 0;
+      border-top-width: 0;
+      border-bottom-width: 0;
+      border-radius: 0; }
+  .widget-activity-two .timeline-line .item-timeline.timeline-new .t-dot:before {
+    background: #1b55e2;
+    border-color: #c2d5ff; }
+  .widget-activity-two .timeline-line .item-timeline:last-child .t-dot:after {
+    display: none; }
+  .widget-activity-two .timeline-line .item-timeline .t-meta-time {
+    margin: 0;
+    min-width: 100px;
+    max-width: 100px;
+    font-size: 12px;
+    font-weight: 700;
+    color: #888ea8;
+    align-self: center; }
+  .widget-activity-two .timeline-line .item-timeline .t-text {
+    padding: 10px;
+    align-self: center;
+    margin-left: 10px; }
+    .widget-activity-two .timeline-line .item-timeline .t-text p {
+      font-size: 13px;
+      margin: 0;
+      color: #bfc9d4;
+      font-weight: 600; }
+      .widget-activity-two .timeline-line .item-timeline .t-text p span {
+        color: #515365;
+        font-weight: 600; }
+      .widget-activity-two .timeline-line .item-timeline .t-text p a {
+        color: #888ea8;
+        font-weight: 600; }
+
+.widget-activity-two .tm-action-btn {
+  text-align: center;
+  margin-top: 9px; }
+  .widget-activity-two .tm-action-btn button {
+    box-shadow: none;
+    font-weight: 700;
+    letter-spacing: 0px;
+    font-size: 15px;
+    padding: 0;
+    background: transparent;
+    color: #1b55e2;
+    border: none; }
+
+/*
+    ========================
+        Recent Activities
+    ========================
+*/
+.widget.widget-activity-three {
+  position: relative;
+  background: #fff;
+  border-radius: 8px;
+  height: 100%; }
+  .widget.widget-activity-three .widget-heading {
+    display: flex;
+    justify-content: space-between;
+    border-bottom: 1px dashed #e0e6ed;
+    padding: 20px 20px;
+    padding-bottom: 20px; }
+    .widget.widget-activity-three .widget-heading h5 {
+      font-size: 17px;
+      display: block;
+      color: #0e1726;
+      font-weight: 600;
+      margin-bottom: 0; }
+
+.widget-activity-three .widget-content {
+  padding: 20px 10px 20px 20px; }
+
+.widget-activity-three .mt-container {
+  position: relative;
+  height: 325px;
+  overflow: auto;
+  padding: 0 12px 0 12px; }
+
+.widget.widget-activity-three .timeline-line .item-timeline {
+  display: flex;
+  margin-bottom: 20px; }
+  .widget.widget-activity-three .timeline-line .item-timeline .t-dot {
+    position: relative; }
+    .widget.widget-activity-three .timeline-line .item-timeline .t-dot div {
+      background: #1b55e2;
+      border-radius: 50%;
+      padding: 5px;
+      margin-right: 11px;
+      display: flex;
+      height: 37px;
+      justify-content: center;
+      width: 36px; }
+      .widget.widget-activity-three .timeline-line .item-timeline .t-dot div.t-primary {
+        background-color: #1b55e2;
+        box-shadow: 0 10px 20px -10px #1b55e2; }
+      .widget.widget-activity-three .timeline-line .item-timeline .t-dot div.t-success {
+        background-color: #009688;
+        box-shadow: 0 10px 20px -10px #009688; }
+      .widget.widget-activity-three .timeline-line .item-timeline .t-dot div.t-danger {
+        background-color: #e7515a;
+        box-shadow: 0 10px 20px -10px #e7515a; }
+      .widget.widget-activity-three .timeline-line .item-timeline .t-dot div.t-warning {
+        background-color: #e2a03f;
+        box-shadow: 0 10px 20px -10px #e2a03f; }
+      .widget.widget-activity-three .timeline-line .item-timeline .t-dot div.t-dark {
+        background-color: #3b3f5c;
+        box-shadow: 0 10px 20px -10px #3b3f5c; }
+    .widget.widget-activity-three .timeline-line .item-timeline .t-dot svg {
+      color: #fff;
+      height: 20px;
+      width: 20px;
+      stroke-width: 1.6px;
+      align-self: center; }
+  .widget.widget-activity-three .timeline-line .item-timeline .t-content {
+    width: 100%; }
+    .widget.widget-activity-three .timeline-line .item-timeline .t-content .t-uppercontent {
+      display: flex;
+      justify-content: space-between; }
+      .widget.widget-activity-three .timeline-line .item-timeline .t-content .t-uppercontent h5 {
+        font-size: 15px;
+        letter-spacing: 0;
+        font-weight: 700;
+        margin-bottom: 5px; }
+      .widget.widget-activity-three .timeline-line .item-timeline .t-content .t-uppercontent span {
+        margin-bottom: 0;
+        font-size: 11px;
+        font-weight: 500;
+        color: #888ea8; }
+    .widget.widget-activity-three .timeline-line .item-timeline .t-content p {
+      margin-bottom: 8px;
+      font-size: 13px;
+      font-weight: 500;
+      color: #888ea8; }
+    .widget.widget-activity-three .timeline-line .item-timeline .t-content div.tags .badge {
+      padding: 2px 4px;
+      font-size: 11px;
+      letter-spacing: 1px;
+      transform: none; }
+    .widget.widget-activity-three .timeline-line .item-timeline .t-content div.tags .badge-primary {
+      background-color: #c2d5ff;
+      color: #1b55e2; }
+    .widget.widget-activity-three .timeline-line .item-timeline .t-content div.tags .badge-success {
+      background-color: #e6ffbf;
+      color: #009688; }
+    .widget.widget-activity-three .timeline-line .item-timeline .t-content div.tags .badge-warning {
+      background-color: #ffeccb;
+      color: #e2a03f; }
+  .widget.widget-activity-three .timeline-line .item-timeline .t-dot:after {
+    content: '';
+    position: absolute;
+    border-width: 1px;
+    border-style: solid;
+    left: 40%;
+    transform: translateX(-50%);
+    border-color: #bfc9d4;
+    width: 0;
+    height: auto;
+    top: 36px;
+    bottom: -20px;
+    border-right-width: 0;
+    border-top-width: 0;
+    border-bottom-width: 0;
+    border-radius: 0; }
+  .widget.widget-activity-three .timeline-line .item-timeline:last-child .t-dot:after {
+    display: none; }
+
+/*
+    ==================
+        Statistics
+    ==================
+*/
+.widget-one_hybrid {
+  background: #fff; }
+  .widget-one_hybrid .widget-heading {
+    padding: 20px 13px; }
+    .widget-one_hybrid .widget-heading .w-icon {
+      display: inline-block;
+      padding: 7px 8px;
+      border-radius: 50%;
+      margin-bottom: 15px; }
+    .widget-one_hybrid .widget-heading svg {
+      height: 18px;
+      width: 18px; }
+    .widget-one_hybrid .widget-heading .w-value {
+      font-size: 21px;
+      font-weight: 700;
+      margin-bottom: 0; }
+    .widget-one_hybrid .widget-heading h5 {
+      margin-bottom: 0;
+      font-size: 15px;
+      font-weight: 600;
+      color: #506690; }
+  .widget-one_hybrid.widget-followers {
+    background: #c2d5ff; }
+    .widget-one_hybrid.widget-followers .widget-heading .w-icon {
+      color: #1b55e2;
+      border: 1px solid #1b55e2; }
+  .widget-one_hybrid.widget-referral {
+    background: #ffe1e2; }
+    .widget-one_hybrid.widget-referral .widget-heading .w-icon {
+      color: #e7515a;
+      border: 1px solid #e7515a; }
+  .widget-one_hybrid.widget-social {
+    background: #bae7ff; }
+    .widget-one_hybrid.widget-social .widget-heading .w-icon {
+      color: #2196f3;
+      border: 1px solid #2196f3; }
+  .widget-one_hybrid.widget-engagement {
+    background: #e6ffbf; }
+    .widget-one_hybrid.widget-engagement .widget-heading .w-icon {
+      color: #8dbf42;
+      border: 1px solid #8dbf42; }
+
+/*
+    ==================
+        Balance
+    ==================
+*/
+.widget-account-invoice-two {
+  padding: 22px 19px;
+  background: #e2a03f;
+  background: linear-gradient(to right, #0081ff 0%, #0045ff 100%); }
+  .widget-account-invoice-two .account-box .info {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 84px; }
+  .widget-account-invoice-two .account-box h5 {
+    color: #e0e6ed;
+    margin-bottom: 0;
+    font-size: 17px;
+    font-weight: 600; }
+  .widget-account-invoice-two .account-box p {
+    color: #e0e6ed;
+    font-weight: 700;
+    margin-bottom: 0;
+    align-self: center; }
+  .widget-account-invoice-two .account-box .acc-action {
+    margin-top: 23px;
+    display: flex;
+    justify-content: space-between; }
+    .widget-account-invoice-two .account-box .acc-action a {
+      display: inline-block;
+      padding: 8px;
+      border-radius: 6px;
+      color: #e0e6ed;
+      font-weight: 600;
+      box-shadow: 0px 0px 2px 0px #bfc9d4; }
+      .widget-account-invoice-two .account-box .acc-action a:first-child {
+        margin-right: 2px; }
+      .widget-account-invoice-two .account-box .acc-action a svg {
+        width: 18px;
+        height: 18px; }
+
+/*
+    ==================
+        Statistics
+    ==================
+*/
+.widget-card-one {
+  background: #fff;
+  padding: 20px 0;
+  height: 100%; }
+  .widget-card-one .widget-content .media {
+    padding-left: 15px;
+    padding-right: 15px;
+    margin-bottom: 19px;
+    padding-bottom: 21px;
+    border-bottom: 1px dashed #e0e6ed; }
+    .widget-card-one .widget-content .media .w-img {
+      margin-right: 9px;
+      align-self: center; }
+    .widget-card-one .widget-content .media img {
+      width: 50px;
+      height: 50px;
+      border-radius: 50%;
+      border: 3px solid #e0e6ed; }
+  .widget-card-one .widget-content .media-body {
+    align-self: center; }
+    .widget-card-one .widget-content .media-body h6 {
+      font-weight: 700;
+      font-size: 15px;
+      letter-spacing: 0;
+      margin-bottom: 0; }
+    .widget-card-one .widget-content .media-body p {
+      font-size: 14px;
+      letter-spacing: 1px;
+      margin-bottom: 0;
+      font-weight: 600;
+      color: #888ea8;
+      padding: 0; }
+  .widget-card-one .widget-content p {
+    font-weight: 600;
+    font-size: 13px;
+    margin-bottom: 61px;
+    padding: 0 20px; }
+  .widget-card-one .widget-content .w-action {
+    padding: 0 20px; }
+    .widget-card-one .widget-content .w-action svg {
+      color: #1b55e2;
+      fill: #c2d5ff; }
+    .widget-card-one .widget-content .w-action span {
+      vertical-align: sub;
+      font-weight: 700;
+      color: #0e1726;
+      letter-spacing: 1px; }
+
+/*
+    ===========================
+        Visitors by Browser
+    ===========================
+*/
+.widget-four {
+  position: relative;
+  background: #fff;
+  padding: 20px;
+  border-radius: 8px;
+  height: 100%; }
+  .widget-four .widget-heading {
+    margin-bottom: 54px; }
+    .widget-four .widget-heading h5 {
+      font-size: 17px;
+      display: block;
+      color: #0e1726;
+      font-weight: 600;
+      margin-bottom: 0; }
+  .widget-four .widget-content {
+    font-size: 17px; }
+    .widget-four .widget-content .browser-list {
+      display: flex; }
+      .widget-four .widget-content .browser-list:not(:last-child) {
+        margin-bottom: 30px; }
+    .widget-four .widget-content .w-icon {
+      display: inline-block;
+      padding: 8px 8px;
+      border-radius: 50%;
+      display: inline-flex;
+      align-self: center;
+      height: 34px;
+      width: 34px;
+      margin-right: 12px; }
+      .widget-four .widget-content .w-icon svg {
+        display: block;
+        width: 17px;
+        height: 17px; }
+    .widget-four .widget-content .browser-list:nth-child(1) .w-icon {
+      background: #c2d5ff; }
+    .widget-four .widget-content .browser-list:nth-child(2) .w-icon {
+      background: #ffe1e2; }
+    .widget-four .widget-content .browser-list:nth-child(3) .w-icon {
+      background: #ffeccb; }
+    .widget-four .widget-content .browser-list:nth-child(1) .w-icon svg {
+      color: #1b55e2; }
+    .widget-four .widget-content .browser-list:nth-child(2) .w-icon svg {
+      color: #e7515a; }
+    .widget-four .widget-content .browser-list:nth-child(3) .w-icon svg {
+      color: #e2a03f; }
+    .widget-four .widget-content .w-browser-details {
+      width: 100%;
+      align-self: center; }
+    .widget-four .widget-content .w-browser-info {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 1px; }
+      .widget-four .widget-content .w-browser-info h6 {
+        font-size: 13px;
+        font-weight: 600;
+        margin-bottom: 0;
+        color: #888ea8; }
+      .widget-four .widget-content .w-browser-info p {
+        font-size: 12px;
+        font-weight: 600;
+        margin-bottom: 0;
+        color: #888ea8; }
+    .widget-four .widget-content .w-browser-stats .progress {
+      margin-bottom: 0;
+      height: 22px;
+      padding: 4px;
+      border-radius: 20px;
+      box-shadow: 0 2px 2px rgba(224, 230, 237, 0.458824), 1px 6px 7px rgba(224, 230, 237, 0.458824); }
+      .widget-four .widget-content .w-browser-stats .progress .progress-bar {
+        position: relative; }
+        .widget-four .widget-content .w-browser-stats .progress .progress-bar:before {
+          content: '';
+          height: 7px;
+          width: 7px;
+          background: #fff;
+          position: absolute;
+          right: 3px;
+          border-radius: 50%;
+          top: 3.4px; }
+
+/*
+    ==================
+        Dev Summit
+    ==================
+*/
+.widget-card-two {
+  background: #fff;
+  padding: 20px 0px; }
+  .widget-card-two .media {
+    padding-left: 15px;
+    padding-right: 15px;
+    margin-bottom: 19px;
+    padding-bottom: 21px;
+    border-bottom: 1px dashed #e0e6ed; }
+    .widget-card-two .media .w-img {
+      margin-right: 10px; }
+      .widget-card-two .media .w-img img {
+        width: 50px;
+        height: 50px;
+        border-radius: 50%;
+        border: 3px solid #e0e6ed; }
+    .widget-card-two .media .media-body {
+      align-self: center; }
+      .widget-card-two .media .media-body h6 {
+        font-weight: 700;
+        font-size: 15px;
+        letter-spacing: 0;
+        margin-bottom: 0; }
+      .widget-card-two .media .media-body p {
+        margin-bottom: 0;
+        font-weight: 600;
+        color: #888ea8; }
+  .widget-card-two .card-bottom-section {
+    text-align: center; }
+    .widget-card-two .card-bottom-section h5 {
+      font-size: 14px;
+      color: #009688;
+      font-weight: 700;
+      margin-bottom: 20px; }
+    .widget-card-two .card-bottom-section .img-group img {
+      width: 46px;
+      height: 46px;
+      border-radius: 50%;
+      border: 2px solid #e0e6ed; }
+      .widget-card-two .card-bottom-section .img-group img:not(:last-child) {
+        margin-right: 5px; }
+    .widget-card-two .card-bottom-section a {
+      display: block;
+      margin-top: 18px;
+      background: #1b55e2;
+      color: #fff;
+      padding: 10px 10px;
+      transform: none;
+      margin-right: 15px;
+      margin-left: 15px;
+      font-size: 15px;
+      font-weight: 600;
+      letter-spacing: 1px; }
+      .widget-card-two .card-bottom-section a.btn:hover, .widget-card-two .card-bottom-section a.btn:focus {
+        border-color: #1b55e2; }
+
+/*
+    =====================
+        Task Indicator
+    =====================
+*/
+.widget-five {
+  background: #fff;
+  padding: 28px 0 0 0;
+  height: 100%; }
+  .widget-five .widget-content .header {
+    display: flex;
+    justify-content: space-between;
+    padding-left: 15px;
+    padding-right: 15px;
+    padding-bottom: 23px;
+    border-bottom: 1px dashed #e0e6ed; }
+  .widget-five .widget-content .header-body {
+    align-self: center; }
+    .widget-five .widget-content .header-body h6 {
+      font-weight: 700;
+      font-size: 15px;
+      letter-spacing: 0;
+      margin-bottom: 0; }
+    .widget-five .widget-content .header-body p {
+      margin-bottom: 0;
+      font-weight: 600;
+      color: #888ea8;
+      padding: 0; }
+  .widget-five .widget-content .task-action {
+    display: flex; }
+    .widget-five .widget-content .task-action .dropdown.custom-dropdown {
+      align-self: center; }
+      .widget-five .widget-content .task-action .dropdown.custom-dropdown a.dropdown-toggle svg {
+        color: #888ea8; }
+      .widget-five .widget-content .task-action .dropdown.custom-dropdown .dropdown-menu {
+        padding: 8px 8px;
+        min-width: 10rem;
+        border-radius: 6px;
+        top: 5px !important; }
+  .widget-five .w-content {
+    text-align: center;
+    height: 100%;
+    padding: 20px 26px; }
+    .widget-five .w-content div .task-left {
+      margin-bottom: 0;
+      font-size: 30px;
+      color: #1b55e2;
+      background: #c2d5ff;
+      font-weight: 600;
+      border-radius: 50%;
+      display: inline-flex;
+      height: 76px;
+      width: 76px;
+      justify-content: center;
+      padding: 13px 0px;
+      border: 5px solid #fff;
+      margin-bottom: 20px;
+      -webkit-box-shadow: 0px 0px 8px 2px #e0e6ed;
+      box-shadow: 0px 0px 8px 2px #e0e6ed; }
+    .widget-five .w-content div .task-completed {
+      font-size: 14px;
+      font-weight: 700;
+      margin-bottom: 4px;
+      color: #009688; }
+    .widget-five .w-content div .task-hight-priority {
+      color: #acb0c3;
+      font-weight: 500;
+      margin-bottom: 0; }
+      .widget-five .w-content div .task-hight-priority span {
+        color: #e7515a;
+        font-weight: 700; }
+
+/*
+    ===========================
+    /|\                     /|\
+    /|\                     /|\
+    /|\    Sales Section    /|\
+    /|\                     /|\
+    /|\                     /|\
+    ===========================
+*/
+.layout-spacing {
+  padding-bottom: 30px; }
+
+.sales .widget {
+  position: relative;
+  padding: 20px;
+  border-radius: 8px;
+  border: none;
+  background: #fff; }
+  .sales .widget .widget-heading {
+    margin-bottom: 15px; }
+  .sales .widget h5 {
+    font-weight: 700;
+    font-size: 19px;
+    letter-spacing: 0px;
+    margin-bottom: 0;
+    color: #515365; }
+
+/*
+    ==================
+        Total Sales
+    ==================
+*/
+.widget-two {
+  position: relative;
+  background: #fff;
+  padding: 0;
+  border-radius: 8px;
+  height: 100%;
+  -webkit-box-shadow: 0 4px 6px 0 rgba(85, 85, 85, 0.08), 0 1px 20px 0 rgba(0, 0, 0, 0.07), 0px 1px 11px 0px rgba(0, 0, 0, 0.07);
+  -moz-box-shadow: 0 4px 6px 0 rgba(85, 85, 85, 0.08), 0 1px 20px 0 rgba(0, 0, 0, 0.07), 0px 1px 11px 0px rgba(0, 0, 0, 0.07);
+  box-shadow: 0 4px 6px 0 rgba(85, 85, 85, 0.08), 0 1px 20px 0 rgba(0, 0, 0, 0.07), 0px 1px 11px 0px rgba(0, 0, 0, 0.07); }
+  .widget-two .widget-content {
+    font-size: 17px; }
+  .widget-two .w-chart {
+    position: absolute;
+    bottom: 0;
+    bottom: 0;
+    right: 0;
+    left: 0; }
+  .widget-two .w-numeric-value {
+    display: flex;
+    color: #fff;
+    font-weight: 500;
+    padding: 20px;
+    justify-content: space-between; }
+    .widget-two .w-numeric-value .w-icon {
+      display: inline-block;
+      background: #ffeccb;
+      padding: 13px 12px;
+      border-radius: 50%;
+      display: inline-flex;
+      align-self: center;
+      height: 45px;
+      width: 45px; }
+    .widget-two .w-numeric-value svg {
+      display: block;
+      color: #e2a03f;
+      width: 20px;
+      height: 20px; }
+    .widget-two .w-numeric-value .w-value {
+      font-size: 19px;
+      display: block;
+      color: #0e1726;
+      font-weight: 700;
+      margin-bottom: -9px; }
+    .widget-two .w-numeric-value .w-numeric-title {
+      font-size: 13px;
+      color: #888ea8;
+      font-weight: 600; }
+
+.widget.widget-one {
+  padding: 22px 18px;
+  background: #fff; }
+  .widget.widget-one .widget-heading h6 {
+    color: #0e1726;
+    margin-bottom: 41px;
+    font-size: 17px;
+    display: block;
+    font-weight: 600; }
+  .widget.widget-one .w-chart {
+    display: flex; }
+    .widget.widget-one .w-chart .w-chart-section {
+      width: 50%;
+      padding: 0 12px; }
+      .widget.widget-one .w-chart .w-chart-section .w-detail {
+        position: absolute;
+        color: #fff; }
+      .widget.widget-one .w-chart .w-chart-section .w-title {
+        font-size: 13px;
+        font-weight: 700;
+        margin-bottom: 0; }
+      .widget.widget-one .w-chart .w-chart-section .w-stats {
+        color: #f8538d;
+        font-size: 20px;
+        letter-spacing: 1px;
+        margin-bottom: 0;
+        font-weight: 700; }
+
+/*
+    ==================
+        Widget
+    ==================
+*/
+.widget-one {
+  position: relative;
+  background: #1b55e2;
+  padding: 0;
+  border-radius: 8px;
+  height: 100%;
+  -webkit-box-shadow: 0 4px 6px 0 rgba(85, 85, 85, 0.08), 0 1px 20px 0 rgba(0, 0, 0, 0.07), 0px 1px 11px 0px rgba(0, 0, 0, 0.07);
+  -moz-box-shadow: 0 4px 6px 0 rgba(85, 85, 85, 0.08), 0 1px 20px 0 rgba(0, 0, 0, 0.07), 0px 1px 11px 0px rgba(0, 0, 0, 0.07);
+  box-shadow: 0 4px 6px 0 rgba(85, 85, 85, 0.08), 0 1px 20px 0 rgba(0, 0, 0, 0.07), 0px 1px 11px 0px rgba(0, 0, 0, 0.07); }
+  .widget-one .widget-content {
+    font-size: 17px; }
+  .widget-one .w-numeric-value {
+    position: absolute;
+    display: flex;
+    color: #fff;
+    font-weight: 500;
+    padding: 20px; }
+    .widget-one .w-numeric-value .w-icon {
+      display: inline-block;
+      background: #fff;
+      padding: 13px 12px;
+      border-radius: 50%;
+      display: inline-flex;
+      align-self: center;
+      height: 45px;
+      width: 45px;
+      margin-right: 14px; }
+    .widget-one .w-numeric-value svg {
+      display: block;
+      color: #1b55e2;
+      width: 20px;
+      height: 20px; }
+    .widget-one .w-numeric-value .w-value {
+      font-size: 26px;
+      display: block;
+      color: #fff;
+      font-weight: 600;
+      margin-bottom: -9px; }
+    .widget-one .w-numeric-value .w-numeric-title {
+      font-size: 13px;
+      color: #fff;
+      letter-spacing: 1px;
+      font-weight: 600; }
+
+/*
+    ====================
+        Order Summary
+    ====================
+*/
+.widget-three {
+  position: relative;
+  background: #fff;
+  padding: 20px;
+  border-radius: 8px;
+  height: 100%;
+  -webkit-box-shadow: 0 4px 6px 0 rgba(85, 85, 85, 0.08), 0 1px 20px 0 rgba(0, 0, 0, 0.07), 0px 1px 11px 0px rgba(0, 0, 0, 0.07);
+  -moz-box-shadow: 0 4px 6px 0 rgba(85, 85, 85, 0.08), 0 1px 20px 0 rgba(0, 0, 0, 0.07), 0px 1px 11px 0px rgba(0, 0, 0, 0.07);
+  box-shadow: 0 4px 6px 0 rgba(85, 85, 85, 0.08), 0 1px 20px 0 rgba(0, 0, 0, 0.07), 0px 1px 11px 0px rgba(0, 0, 0, 0.07); }
+  .widget-three .widget-heading {
+    margin-bottom: 54px; }
+    .widget-three .widget-heading h5 {
+      font-size: 19px;
+      display: block;
+      color: #0e1726;
+      font-weight: 600;
+      margin-bottom: 0; }
+  .widget-three .widget-content {
+    font-size: 17px; }
+    .widget-three .widget-content .summary-list {
+      display: flex; }
+      .widget-three .widget-content .summary-list:not(:last-child) {
+        margin-bottom: 30px; }
+    .widget-three .widget-content .w-icon {
+      display: inline-block;
+      padding: 8px 8px;
+      border-radius: 50%;
+      display: inline-flex;
+      align-self: center;
+      height: 34px;
+      width: 34px;
+      margin-right: 12px; }
+      .widget-three .widget-content .w-icon svg {
+        display: block;
+        width: 17px;
+        height: 17px; }
+    .widget-three .widget-content .summary-list:nth-child(1) .w-icon {
+      background: #dccff7; }
+    .widget-three .widget-content .summary-list:nth-child(2) .w-icon {
+      background: #e6ffbf; }
+    .widget-three .widget-content .summary-list:nth-child(3) .w-icon {
+      background: #ffeccb; }
+    .widget-three .widget-content .summary-list:nth-child(1) .w-icon svg {
+      color: #5c1ac3; }
+    .widget-three .widget-content .summary-list:nth-child(2) .w-icon svg {
+      color: #009688; }
+    .widget-three .widget-content .summary-list:nth-child(3) .w-icon svg {
+      color: #e2a03f; }
+    .widget-three .widget-content .w-summary-details {
+      width: 100%;
+      align-self: center; }
+    .widget-three .widget-content .w-summary-info {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 1px; }
+      .widget-three .widget-content .w-summary-info h6 {
+        font-size: 13px;
+        font-weight: 600;
+        margin-bottom: 0;
+        color: #888ea8; }
+      .widget-three .widget-content .w-summary-info p {
+        font-size: 12px;
+        font-weight: 600;
+        margin-bottom: 0;
+        color: #888ea8; }
+    .widget-three .widget-content .w-summary-stats .progress {
+      margin-bottom: 0;
+      height: 6px;
+      border-radius: 20px;
+      box-shadow: 0 2px 2px rgba(224, 230, 237, 0.458824), 1px 6px 7px rgba(224, 230, 237, 0.458824); }
+
+/*
+    ==================
+        Revenue
+    ==================
+*/
+.widget-chart-one .widget-heading {
+  display: flex;
+  justify-content: space-between; }
+
+.widget-chart-one .apexcharts-legend-marker {
+  left: -5px !important; }
+
+.widget-chart-one .apexcharts-yaxis-title, .widget-chart-one .apexcharts-xaxis-title {
+  font-weight: 600;
+  fill: #bfc9d4; }
+
+.widget-chart-one .widget-heading .tabs {
+  padding: 0;
+  margin: 0; }
+  .widget-chart-one .widget-heading .tabs li {
+    display: inline-block;
+    list-style: none;
+    padding: 0 0; }
+  .widget-chart-one .widget-heading .tabs a {
+    font-size: 14px;
+    letter-spacing: 1px;
+    font-weight: 600;
+    padding: 5px 7px;
+    background: #1b55e2;
+    color: #fff;
+    border-radius: 4px; }
+
+/*
+    =======================
+        Sold By cateory
+    =======================
+*/
+.widget-chart-two {
+  padding: 0 !important; }
+
+.widget.widget-chart-two .widget-heading {
+  padding: 20px 20px 0 20px; }
+
+.widget.widget-chart-two .widget-content {
+  padding: 0 0 20px 0; }
+
+.widget-chart-two .apexcharts-canvas {
+  margin: 0 auto; }
+
+.widget-chart-two .apexcharts-legend-marker {
+  left: -5px !important; }
+
+/*
+    ==================
+        Transaction
+    ==================
+*/
+.widget-table-one .widget-heading {
+  display: flex; }
+
+.widget-table-one .transactions-list {
+  padding: 12px 12px;
+  border: 1px dashed #bfc9d4;
+  border-radius: 6px;
+  -webkit-transition: all 0.1s ease;
+  transition: all 0.1s ease; }
+  .widget-table-one .transactions-list:not(:last-child) {
+    margin-bottom: 15px; }
+  .widget-table-one .transactions-list:hover {
+    -webkit-transform: translateY(-1px) scale(1.01);
+    transform: translateY(-1px) scale(1.01); }
+  .widget-table-one .transactions-list .t-item {
+    display: flex;
+    justify-content: space-between; }
+    .widget-table-one .transactions-list .t-item .t-company-name {
+      display: flex; }
+    .widget-table-one .transactions-list .t-item .t-icon {
+      margin-right: 12px; }
+      .widget-table-one .transactions-list .t-item .t-icon .avatar {
+        position: relative;
+        display: inline-block;
+        width: 38px;
+        height: 38px;
+        font-size: 14px;
+        font-weight: 600;
+        letter-spacing: 1px; }
+        .widget-table-one .transactions-list .t-item .t-icon .avatar .avatar-title {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 100%;
+          height: 100%;
+          background-color: #ffe1e2;
+          color: #e7515a; }
+      .widget-table-one .transactions-list .t-item .t-icon .icon {
+        position: relative;
+        display: inline-block;
+        padding: 10px;
+        background-color: #ffeccb;
+        border-radius: 50%; }
+        .widget-table-one .transactions-list .t-item .t-icon .icon svg {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 19px;
+          height: 19px;
+          color: #e2a03f;
+          stroke-width: 2; }
+    .widget-table-one .transactions-list .t-item .t-name {
+      align-self: center; }
+      .widget-table-one .transactions-list .t-item .t-name h4 {
+        font-size: 15px;
+        letter-spacing: 0px;
+        font-weight: 600;
+        margin-bottom: 0; }
+      .widget-table-one .transactions-list .t-item .t-name .meta-date {
+        font-size: 12px;
+        margin-bottom: 0;
+        font-weight: 600;
+        color: #888ea8; }
+    .widget-table-one .transactions-list .t-item .t-rate {
+      align-self: center; }
+      .widget-table-one .transactions-list .t-item .t-rate p {
+        margin-bottom: 0;
+        font-size: 13px;
+        letter-spacing: 0px; }
+      .widget-table-one .transactions-list .t-item .t-rate svg {
+        width: 14px;
+        height: 14px;
+        vertical-align: baseline; }
+      .widget-table-one .transactions-list .t-item .t-rate.rate-inc p, .widget-table-one .transactions-list .t-item .t-rate.rate-inc svg {
+        color: #009688; }
+      .widget-table-one .transactions-list .t-item .t-rate.rate-dec p, .widget-table-one .transactions-list .t-item .t-rate.rate-dec svg {
+        color: #e7515a; }
+
+/*
+    ========================
+        Recent Activities
+    ========================
+*/
+.widget-activity-one .widget-content select {
+  padding: 0;
+  width: auto;
+  font-size: 13px;
+  border: none;
+  height: auto;
+  box-shadow: none;
+  color: #acb0c3;
+  font-weight: 600;
+  letter-spacing: 2px;
+  margin: 0 0 0 auto;
+  margin-bottom: 20px; }
+
+.widget-activity-one .mt-container {
+  position: relative;
+  height: 232px;
+  overflow: auto; }
+
+.widget-activity-one .timeline-line .item-timeline {
+  display: flex; }
+  .widget-activity-one .timeline-line .item-timeline .t-dot {
+    position: relative; }
+    .widget-activity-one .timeline-line .item-timeline .t-dot:before {
+      content: '';
+      position: absolute;
+      border-color: inherit;
+      border-width: 3px;
+      border-style: solid;
+      border-radius: 50%;
+      width: 16px;
+      height: 16px;
+      top: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      border-color: #e0e6ed;
+      background: #bfc9d4; }
+    .widget-activity-one .timeline-line .item-timeline .t-dot:after {
+      content: '';
+      position: absolute;
+      border-color: inherit;
+      border-width: 1px;
+      border-style: solid;
+      border-radius: 50%;
+      width: 10px;
+      height: 10px;
+      top: 15px;
+      left: 50%;
+      transform: translateX(-50%);
+      border-color: #bfc9d4;
+      width: 0;
+      height: auto;
+      top: 25px;
+      bottom: -15px;
+      border-right-width: 0;
+      border-top-width: 0;
+      border-bottom-width: 0;
+      border-radius: 0; }
+  .widget-activity-one .timeline-line .item-timeline.timeline-new .t-dot:before {
+    background: #1b55e2;
+    border-color: #c2d5ff; }
+  .widget-activity-one .timeline-line .item-timeline:last-child .t-dot:after {
+    display: none; }
+  .widget-activity-one .timeline-line .item-timeline .t-meta-time {
+    margin: 0;
+    min-width: 100px;
+    max-width: 100px;
+    font-size: 12px;
+    font-weight: 700;
+    color: #888ea8;
+    align-self: center; }
+  .widget-activity-one .timeline-line .item-timeline .t-text {
+    padding: 10px;
+    align-self: center;
+    margin-left: 10px; }
+    .widget-activity-one .timeline-line .item-timeline .t-text p {
+      font-size: 13px;
+      margin: 0;
+      color: #bfc9d4;
+      font-weight: 600; }
+      .widget-activity-one .timeline-line .item-timeline .t-text p span {
+        color: #515365;
+        font-weight: 600; }
+      .widget-activity-one .timeline-line .item-timeline .t-text p a {
+        color: #888ea8;
+        font-weight: 600; }
+  .widget-activity-one .timeline-line .item-timeline .t-time {
+    margin: 0;
+    min-width: 80px;
+    max-width: 80px;
+    font-size: 13px;
+    font-weight: 600;
+    color: #acb0c3;
+    padding: 10px 0;
+    letter-spacing: 1px; }
+
+.widget-activity-one .tm-action-btn {
+  text-align: center;
+  padding-top: 20px; }
+  .widget-activity-one .tm-action-btn button {
+    background: transparent;
+    box-shadow: none;
+    padding: 0;
+    color: #1b55e2;
+    font-weight: 700;
+    letter-spacing: 1px;
+    border: none;
+    font-size: 15px; }
+  .widget-activity-one .tm-action-btn svg {
+    width: 15px;
+    height: 15px;
+    vertical-align: inherit; }
+
+/*
+    ========================
+        Recent Activities
+    ========================
+*/
+.widget-activity-four {
+  padding-right: 0;
+  padding-left: 0; }
+  .widget-activity-four .mt-container {
+    position: relative;
+    height: 272px;
+    overflow: auto;
+    padding-right: 12px; }
+  .widget-activity-four .widget-heading {
+    padding: 0 20px; }
+  .widget-activity-four .widget-content {
+    padding: 0 8px 0 20px; }
+  .widget-activity-four .timeline-line .item-timeline {
+    display: flex;
+    width: 100%;
+    margin-bottom: 12px; }
+    .widget-activity-four .timeline-line .item-timeline .t-dot {
+      position: relative; }
+      .widget-activity-four .timeline-line .item-timeline .t-dot:before {
+        content: '';
+        position: absolute;
+        border-color: inherit;
+        border-radius: 50%;
+        width: 8px;
+        height: 8px;
+        top: 5px;
+        left: 5px;
+        transform: translateX(-50%);
+        border-color: #e0e6ed;
+        background: #bfc9d4;
+        z-index: 1; }
+      .widget-activity-four .timeline-line .item-timeline .t-dot:after {
+        content: '';
+        position: absolute;
+        border-color: inherit;
+        border-width: 1px;
+        border-style: solid;
+        border-radius: 50%;
+        width: 10px;
+        height: 10px;
+        left: 5px;
+        transform: translateX(-50%);
+        border-color: #e0e6ed;
+        width: 0;
+        height: auto;
+        top: 12px;
+        bottom: -19px;
+        border-right-width: 0;
+        border-top-width: 0;
+        border-bottom-width: 0;
+        border-radius: 0; }
+    .widget-activity-four .timeline-line .item-timeline.timeline-primary .t-dot:before {
+      background-color: #1b55e2;
+      border-color: #a4bdf7; }
+    .widget-activity-four .timeline-line .item-timeline.timeline-success .t-dot:before {
+      background-color: #009688;
+      border-color: #9ad2cd; }
+    .widget-activity-four .timeline-line .item-timeline.timeline-danger .t-dot:before {
+      background-color: #e7515a;
+      border-color: #f1acb0; }
+    .widget-activity-four .timeline-line .item-timeline.timeline-dark .t-dot:before {
+      background-color: #3b3f5c;
+      border-color: #9fa3bb; }
+    .widget-activity-four .timeline-line .item-timeline.timeline-secondary .t-dot:before {
+      background: #1b55e2;
+      border-color: #c2d5ff; }
+    .widget-activity-four .timeline-line .item-timeline.timeline-warning .t-dot:before {
+      background-color: #e2a03f;
+      border-color: #dec7a5; }
+    .widget-activity-four .timeline-line .item-timeline:last-child .t-dot:after {
+      display: none; }
+    .widget-activity-four .timeline-line .item-timeline .t-meta-time {
+      margin: 0;
+      min-width: 100px;
+      max-width: 100px;
+      font-size: 12px;
+      font-weight: 700;
+      color: #888ea8;
+      align-self: center; }
+    .widget-activity-four .timeline-line .item-timeline .t-text {
+      align-self: center;
+      margin-left: 20px;
+      display: flex;
+      width: 100%;
+      justify-content: space-between; }
+      .widget-activity-four .timeline-line .item-timeline .t-text p {
+        font-size: 12px;
+        margin: 0;
+        color: #888ea8;
+        font-weight: 400; }
+      .widget-activity-four .timeline-line .item-timeline .t-text span.badge {
+        position: absolute;
+        right: 11px;
+        padding: 2px 4px;
+        font-size: 11px;
+        letter-spacing: 1px;
+        opacity: 0;
+        font-weight: 400;
+        transform: none; }
+    .widget-activity-four .timeline-line .item-timeline:hover .t-text span.badge {
+      opacity: 1; }
+    .widget-activity-four .timeline-line .item-timeline .t-text p.t-time {
+      text-align: right;
+      color: #888ea8;
+      font-size: 10px; }
+    .widget-activity-four .timeline-line .item-timeline .t-time {
+      margin: 0;
+      min-width: 80px;
+      max-width: 80px;
+      font-size: 13px;
+      font-weight: 600;
+      color: #acb0c3;
+      letter-spacing: 1px; }
+  .widget-activity-four .tm-action-btn {
+    text-align: center;
+    padding-top: 20px; }
+    .widget-activity-four .tm-action-btn button {
+      background: transparent;
+      box-shadow: none;
+      padding: 0;
+      color: #1b55e2;
+      font-weight: 600;
+      letter-spacing: 0.5px;
+      border: none;
+      font-size: 15px; }
+    .widget-activity-four .tm-action-btn svg {
+      width: 15px;
+      height: 15px;
+      vertical-align: inherit; }
+
+/*
+    =====================
+        Account Info
+    =====================
+*/
+.widget-account-invoice-one .invoice-box .acc-total-info {
+  padding: 0 0;
+  margin-bottom: 18px;
+  padding-bottom: 18px;
+  border-bottom: 1px dashed #bfc9d4; }
+
+.widget-account-invoice-one .invoice-box h5 {
+  text-align: center;
+  font-size: 20px;
+  letter-spacing: 1px;
+  margin-bottom: 10px;
+  color: #1b55e2; }
+
+.widget-account-invoice-one .invoice-box .acc-amount {
+  text-align: center;
+  font-size: 23px;
+  font-weight: 700;
+  margin-bottom: 0;
+  color: #009688; }
+
+.widget-account-invoice-one .invoice-box .inv-detail {
+  margin-bottom: 18px;
+  padding-bottom: 18px;
+  border-bottom: 1px dashed #bfc9d4; }
+
+.widget-account-invoice-one .invoice-box [class*="info-detail-"]:not(.info-sub) {
+  display: flex;
+  justify-content: space-between; }
+  .widget-account-invoice-one .invoice-box [class*="info-detail-"]:not(.info-sub) p {
+    margin-bottom: 13px;
+    font-weight: 700;
+    font-size: 14px; }
+
+.widget-account-invoice-one .invoice-box [class*="info-detail-"].info-sub .info-detail {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 0;
+  font-weight: 700;
+  font-size: 14px; }
+  .widget-account-invoice-one .invoice-box [class*="info-detail-"].info-sub .info-detail p {
+    margin-bottom: 0; }
+
+.widget-account-invoice-one .invoice-box [class*="info-detail-"].info-sub .info-detail-sub {
+  margin-left: 9px; }
+  .widget-account-invoice-one .invoice-box [class*="info-detail-"].info-sub .info-detail-sub p {
+    color: #888ea8;
+    margin-bottom: 2px;
+    font-weight: 600; }
+
+.widget-account-invoice-one .invoice-box .inv-action {
+  text-align: center;
+  display: flex;
+  justify-content: space-around; }
+  .widget-account-invoice-one .invoice-box .inv-action a {
+    transform: none; }
+
+/*
+    =====================
+        Recent Orders
+    =====================
+*/
+.widget-table-two {
+  position: relative; }
+  .widget-table-two h5 {
+    font-weight: 700;
+    font-size: 19px;
+    letter-spacing: 1px;
+    margin-bottom: 20px; }
+  .widget-table-two .widget-content {
+    background: transparent; }
+  .widget-table-two .table {
+    border-collapse: separate;
+    border-spacing: 0 5px;
+    margin-bottom: 0; }
+    .widget-table-two .table > thead > tr > th {
+      text-transform: initial;
+      font-weight: 600;
+      border-top: none;
+      background: #e0e6ed;
+      padding-top: 0;
+      padding-bottom: 0;
+      padding-right: 0;
+      padding-left: 0;
+      -webkit-transition: all 0.1s ease;
+      transition: all 0.1s ease;
+      padding: 10px 0 10px 5px; }
+      .widget-table-two .table > thead > tr > th:first-child {
+        border-bottom-left-radius: 6px;
+        border-top-left-radius: 6px; }
+      .widget-table-two .table > thead > tr > th:last-child {
+        border-bottom-right-radius: 6px;
+        border-top-right-radius: 6px; }
+      .widget-table-two .table > thead > tr > th .th-content {
+        color: #1b55e2;
+        font-weight: 600;
+        font-size: 14px;
+        letter-spacing: 1px; }
+      .widget-table-two .table > thead > tr > th:first-child .th-content {
+        margin-left: 10px; }
+      .widget-table-two .table > thead > tr > th:last-child .th-content {
+        text-align: right;
+        margin-right: 10px; }
+      .widget-table-two .table > thead > tr > th:nth-last-child(2) .th-content {
+        text-align: center;
+        padding: 0 15px 0 0; }
+    .widget-table-two .table > tbody > tr > td {
+      border-top: none;
+      background: transparent;
+      padding-top: 0;
+      padding-bottom: 0;
+      padding-right: 0;
+      padding-left: 0;
+      -webkit-transition: all 0.1s ease;
+      transition: all 0.1s ease; }
+    .widget-table-two .table > tbody > tr:hover > td {
+      transform: translateY(-1px) scale(1.01); }
+    .widget-table-two .table > tbody > tr:hover > td .td-content {
+      color: #515365; }
+    .widget-table-two .table > tbody > tr > td .td-content {
+      cursor: pointer;
+      font-weight: 600;
+      letter-spacing: 1px;
+      color: #888ea8; }
+    .widget-table-two .table > tbody > tr > td:first-child {
+      border-top-left-radius: 6px;
+      padding: 10px 0 10px 15px;
+      border-bottom-left-radius: 6px; }
+    .widget-table-two .table > tbody > tr > td:last-child {
+      border-top-right-radius: 6px;
+      padding: 15.5px 15px 15.5px 0;
+      text-align: right;
+      border-bottom-right-radius: 6px; }
+    .widget-table-two .table .td-content.customer-name {
+      color: #515365; }
+    .widget-table-two .table .td-content.product-brand {
+      letter-spacing: 1px; }
+    .widget-table-two .table .td-content img {
+      width: 35px;
+      height: 35px;
+      border-radius: 50%;
+      margin-right: 13px; }
+    .widget-table-two .table tr > td:nth-last-child(2) .td-content {
+      text-align: center; }
+    .widget-table-two .table .td-content .badge {
+      transform: none; }
+    .widget-table-two .table tr:hover .td-content .badge {
+      transform: translateY(-3px); }
+    .widget-table-two .table tr .td-content .outline-badge-primary {
+      background-color: #c2d5ff; }
+    .widget-table-two .table tr .td-content .outline-badge-success {
+      color: #009688;
+      background-color: #e6ffbf;
+      border-color: #009688; }
+    .widget-table-two .table tr .td-content .outline-badge-danger {
+      background-color: #ffe1e2; }
+
+/*
+    ===========================
+        Top Selling Product
+    ===========================
+*/
+.widget-table-three {
+  position: relative; }
+  .widget-table-three h5 {
+    font-weight: 700;
+    font-size: 19px;
+    letter-spacing: 1px;
+    margin-bottom: 20px; }
+  .widget-table-three .widget-content {
+    background: transparent; }
+  .widget-table-three .table {
+    border-collapse: separate;
+    border-spacing: 0 5px;
+    margin-bottom: 0; }
+    .widget-table-three .table > thead > tr > th {
+      text-transform: initial;
+      font-weight: 600;
+      border-top: none;
+      background: #e0e6ed;
+      padding-top: 0;
+      padding-bottom: 0;
+      padding-right: 0;
+      padding-left: 0;
+      -webkit-transition: all 0.1s ease;
+      transition: all 0.1s ease;
+      padding: 10px 0 10px 15px; }
+      .widget-table-three .table > thead > tr > th:first-child .th-content {
+        margin-left: 10px; }
+      .widget-table-three .table > thead > tr > th:last-child .th-content {
+        text-align: right;
+        margin-right: 10px; }
+      .widget-table-three .table > thead > tr > th:first-child {
+        border-bottom-left-radius: 6px;
+        border-top-left-radius: 6px; }
+      .widget-table-three .table > thead > tr > th:last-child {
+        border-bottom-right-radius: 6px;
+        border-top-right-radius: 6px; }
+      .widget-table-three .table > thead > tr > th .th-content {
+        color: #1b55e2;
+        font-weight: 600;
+        font-size: 14px;
+        letter-spacing: 1px; }
+    .widget-table-three .table > tbody > tr {
+      background: transparent; }
+      .widget-table-three .table > tbody > tr > td {
+        border-top: none;
+        padding-top: 0;
+        padding-bottom: 0;
+        padding-right: 0;
+        padding-left: 0;
+        -webkit-transition: all 0.1s ease;
+        transition: all 0.1s ease; }
+      .widget-table-three .table > tbody > tr:hover > td {
+        transform: translateY(-1px) scale(1.01); }
+      .widget-table-three .table > tbody > tr:hover > td .td-content {
+        color: #3b3f5c; }
+      .widget-table-three .table > tbody > tr > td .td-content {
+        cursor: pointer;
+        font-weight: 600;
+        letter-spacing: 1px;
+        color: #888ea8; }
+      .widget-table-three .table > tbody > tr > td:first-child {
+        border-top-left-radius: 6px;
+        padding: 10px 0px 10px 15px;
+        border-bottom-left-radius: 6px; }
+      .widget-table-three .table > tbody > tr > td:last-child {
+        border-top-right-radius: 6px;
+        border-bottom-right-radius: 6px; }
+        .widget-table-three .table > tbody > tr > td:last-child .td-content {
+          text-align: right;
+          padding: 0 15px 0 0; }
+    .widget-table-three .table tr > td:nth-last-child(2) .td-content {
+      padding: 10px 0 10px 15px; }
+    .widget-table-three .table .td-content .discount-pricing {
+      padding: 10px 0 10px 15px; }
+    .widget-table-three .table .td-content.product-name {
+      color: #515365;
+      letter-spacing: 1px; }
+    .widget-table-three .table .td-content img {
+      width: 35px;
+      height: 35px;
+      border-radius: 50%;
+      margin-right: 10px; }
+    .widget-table-three .table .td-content .pricing {
+      padding: 10px 0 10px 15px; }
+    .widget-table-three .table .td-content .tag {
+      background: transparent;
+      transform: none;
+      font-weight: 600;
+      letter-spacing: 2px;
+      padding: 2px 5px;
+      border-radius: 6px; }
+    .widget-table-three .table .td-content .tag-primary {
+      color: #1b55e2;
+      border: 1px dashed #1b55e2;
+      background: #c2d5ff; }
+    .widget-table-three .table .td-content .tag-success {
+      color: #009688;
+      border: 1px dashed #009688;
+      background: #e6ffbf; }
+    .widget-table-three .table .td-content .tag-danger {
+      color: #e7515a;
+      border: 1px dashed #e7515a;
+      background: #ffe1e2; }
+    .widget-table-three .table .td-content a {
+      padding: 0;
+      font-size: 13px;
+      background: transparent;
+      transform: none;
+      letter-spacing: 1px;
+      border-bottom: 1px dashed #bfc9d4; }
+
+/*
+    =====================
+        Media Query
+    =====================
+*/
+@media (max-width: 1199px) {
+  .widget.widget-activity-two .widget-heading {
+    margin-bottom: 21px; }
+  .widget-activity-two .mt-container {
+    position: relative;
+    height: 177px; } }
+
+@media (max-width: 575px) {
+  .widget-card-four .w-content-img img {
+    height: 94px; }
+  .widget-notification-one .noti-action a span {
+    display: none; }
+  .widget-statistic .col-12:not(:last-child) .widget-one_hybrid {
+    margin-bottom: 40px; } }
+
+/*
+    ====================
+        Media Object
+    ====================
+*/
+@media (min-width: 1200px) {
+  .table-responsive {
+    overflow-x: hidden; } }
+
+@media (max-width: 1430px) and (min-width: 1200px) {
+  /*
+      ===========================
+          Top Selling Product
+      ===========================
+  */
+  .widget-table-two .table .td-content img, .widget-table-three .table .td-content img {
+    display: block; }
+  /*
+      ===========================
+          Top Selling Product
+      ===========================
+  */ }
+
+@media (max-width: 767px) {
+  .widget-notification-two button {
+    display: none; } }
+
+@media (max-width: 575px) {
+  /*
+      ==================
+          Total Sales
+      ==================
+  */
+  .widget-two .w-chart {
+    position: inherit; }
+  /*
+      ========================
+          Recent Activities
+      ========================
+  */
+  .widget-activity-one .mt-container {
+    height: auto; }
+  /*
+      ===========================
+          Top Selling Product
+      ===========================
+  */
+  .widget-table-two .table > thead > tr > th {
+    padding-right: 15px; }
+  .widget-table-two .table > tbody > tr > td {
+    border-top: none;
+    padding-top: 0;
+    padding-bottom: 0;
+    padding-right: 12px;
+    padding-left: 12px; }
+  .widget-table-two .table .td-content.customer-name {
+    color: #515365;
+    text-align: center; }
+  .widget-table-two .table .td-content.product-brand {
+    text-align: center; }
+  .widget-table-two .table .td-content img {
+    display: block;
+    margin: 0 auto 5px auto; }
+  /*
+      ===========================
+          Top Selling Product
+      ===========================
+  */
+  .widget-table-three .table > thead > tr > th {
+    padding-right: 15px; }
+  .widget-table-three .table > tbody > tr > td {
+    border-top: none;
+    padding-top: 0;
+    padding-bottom: 0;
+    padding-right: 12px;
+    padding-left: 12px; }
+  .widget-table-three .table .td-content.product-name {
+    text-align: center; }
+  .widget-table-three .table .td-content img {
+    display: block;
+    margin: 0 auto 5px auto; } }
diff --git a/static/img/.DS_Store b/static/img/.DS_Store
new file mode 100644
index 0000000000000000000000000000000000000000..e944b8ec3e1a42f6a5107f98efdb788d08498005
GIT binary patch
literal 8196
zcmeHM%We}v5UeqlNwf%Yf{4=|xx~WG6LDEZ;lMdR0Dce=1=|D?eB29C#Gmjxd<+LJ
zP~AO5`xxgEDT<UHYo^vSUDG|~*<JM*KsY#`41f&)YpjA#GB$}K<5F9t6MLQ!1Np!J
zL%c*ECs?$sy~7o71zZ7Fz!h)>?t%h*XG>XI@!q#lZ(RXb;9e>q&xf2<u!vY1>Z5~=
zrU1k)yS4C|d4O{Ah(*NGP^p~LvWF0<A*L9?=p4_*oLEFG4ULXqbcE<R#0({<ck*&I
zM<@)vbp>33wgQs7XEASI*7En`x2N;*=yX1!h1^uXc~d?A8w<ZbQtN%@`%CO&2YWH^
zPx1a#c;ao3_Tp_ow9|qHD@+>RGCf%kUvk3m|BRu@`qg4>sr3?uNnf2J!P?Pv4H@4G
zU$`XeM{Ql((boXGR3zz3RZO$4iBQ$3vm~xpRAUR<tVv%%)Tpy|V}#fEQZ<?^S=o}F
zhFn?Fm#R_ymDd@aaHL($sP3nAyvGQe+!JO$Mf2B{JyG@Xn2a-i=J-b5L~%y;0<#uZ
zw5W1>^mUxJRR!v{V|q%?E9>r@RCd8rj2XuaU&$D=-NZS*u>HjE3*rJFIofC6MKea(
z8@0K5T+=k|S9V0r_8~sd!{_wOvJ-07nOa{k7K^rTSB*RVHGmhkHeLZevd+@+;AhKL
z&H$5|1$pLF=gp{&s4}4{Q)-q}Cw#B5{QXZkyto24P~d@aHzfamv-<r11|FR13b+Dy
zU4hU&JUTpJlrgt%#VfgX&iam3irAHgN@1hvII+ua8Nd3&kk@(aD<YPL9AWW;0F}WT
JSKw9^_y?+|YUls}

literal 0
HcmV?d00001

diff --git a/static/img/120x120.jpg b/static/img/120x120.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..fa5c32a6ea06fd1c4df512942de2bf1665a33abb
GIT binary patch
literal 1214
zcmex=<NpH&0WUXCHwH#VMur3+WcdG&!Ol6z)iK0B$VwqSMK`M;HC>_1P|rX?qqI0P
zFI~aY%U!`Mz|~!$%*;qrM<FFOEwMDGM4_-WF(<R6lI#C%24@BiHa2!PRt|P{c1}(X
zE*=qH9&T<PNg-i=5m_mDIaw(g83h$Rbp<6IWf>U_b4?usLlYAdd38%$3nLpnV-q8g
zA&i`yoIKn-61=<;Mv5|uMkIs(2N(o77%CVlm>HEAm;@P_1sVSzVUTBFU}OdQ7UW?l
zU}R!uVP#|I;N;>4D%dK(z{JSR%*4XX%F4n5R9y>{XJ8Rz6;d>GWD^cdWLGK_F>0K+
zkVDyN<3Z7&iyu^slZu)+xx~aJB&Af<)HO7<OiazpEiA2^U0mJVJv_aFLqfyCBO;@c
zfq|8tk(pIoQd(ACQCZd8(%RPE(b+X=@|3C5rq7r;YtiB*OP4KQv2xX>&0Dr^+rDGx
zu0w~996fgY#K}{aE?>EN?fQ+Iw;n!v{N(Ag=PzEq`uOSdm#^Qx|M>X}<S#}BW{9`o
zK11`DAkbe-EG*0{>>z(JGL-`{vmgtrq9L1*V<3BCp|FxsBZr97#DyCVaw;1KeGpA5
zy2vG_V)9V+BgkuDpAqM=CbE16_ZY%ow-|Vs8G(_<EXZKb@a2@oq6RKHVBvy0;>s#1
zT&|PMin?A!Ry9<LMxWwbxw<VWPVH3@yY{8UZ6?M?6k^s$@+<yR?n%Bs&zB)qNZHc0
zRA;Y)O;>5ULznW#(ueo0XYl!jO#XHGt=g>0l-@gaPjZTO{G5ILcH_?rtand;t~vbl
z^?5JXiL&O4SL?5^6!p?bj>vmlp0DG*b7r5XL{L#?&+bLD9OlIY?a5-4P{})}QvIyK
zMDUX9ot`!ORuySpjS>ynJ2!w~sbGiPp8hASkqel*G*B>`#KD=VC+~=?_*3{#lt*ly
zW9;TLr}m0=9RIZ1B!IPKv&WrHo4?=Ud}w@KWMh;&x3XeFXxY5F53kQZ{`0CzgNai&
z$m6N+Ih$jA9>*LdUjF1_UGeFjrRt>6!u~mZb~BikFKSR~V{I>!oIB&mW|_%B7hM@d
L0_lV6|K9`v0Q9I%

literal 0
HcmV?d00001

diff --git a/static/img/1280x857.jpg b/static/img/1280x857.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..5562e2dbbcfd969047c06944bb86058fa19e307b
GIT binary patch
literal 23188
zcmeI3c|4SF+yAdI7$i%XlBFSQ)~wlQRD*P5>^l`@3t5J;&9q2FLY5>Zl66M1E2-=v
zW19&{h3v@|Va#*sdw-w%ewNqo^?RPz^UwEr=JGnnALhE|I?nTbe2&j~T!a3B{u$sg
zHaKknKp+s{EcgS^cL2SU7HEAdGYc&d4|jR*%NIOELX;GaiAZCEy!<>wP8%DF7-P_e
zA|dL^N99D^FI+r_y%a1GfIWA~EBGo0eFQiOu(7hjSXtO$Fc>>K8wV%fUd}yxI1laH
z&&?++fH*8HAS5Irt{^3HL{3adNc#9uxnoMIs;USnO<fIT9R(Ft<=u-w*xA`R_i*y>
z-OH~mDkQ4>Uq0xs0bVw!JqrMZ908bkAy8fjy%|6N0E7jMb~oU^9}p%eGYcz>jh$l;
z_=YMTfC&PHGBHD0SeTi?cSnMM2bg(T_K7O#v+g%P2RjnLr+h8xF`L+l@;7jc-XG#B
z=L4^^a~wFxe@H+=QcC)$jH;UYaSctalc&%IhDN82Ev>9=Z0+nF+`!55@bvNy3dV+n
zUbz}}<7V`&nA@>&$tm|!)6z2@Waj2Q$$wf<SXBJHqOz*GrnavBZBuhgYg>CqXJ7xo
zAcgv2X!y(5@rlWAQ`0lEOUo;(Yd_aFer@i?1p(vy^Y|mMe-{@o7#9;WGn5&&8yAEr
z6dX`qW)@K;)_wZsuyX<Xk0@Vb<2#Y`xcm*fn2N;@`1!zIjsxPVUnG`xL;D@s|6gF&
z|67s$YheF~YZ%~!Lcqm?@&ZU;wNpA5&%qdsIbblrV1U5@g8>Eu3<eksFc@Gkz+iyE
z0D}Pr0}KWj3@{jAFu-7d!2p8+1_KNR7z{8NU@*X7;D0*<vKbV~73@J^LS)YllIZkf
zefuRHc#R_hzP)HZz<hU@cdLdh9g;X(EXy(Hn0dkmGFeb&;R$`5TT9KhH+4@PnQiWe
zDra5SUt`5<JIJQi418Z`Z_cM~m38}lm^F7v$eXy2JxP;hTHrHBvG7@FmwGz4TSLXO
z2Y^bOy`O65jU5t7Xv>;NefvNslcSQSonH}A!m02U)(e_8V$<Fq1s;8b#hxi!cg+N5
z3yW>E?%U@1f4q;i2&2g?0DR_XaM)8fOG9q9;&nbfilN|DJxRtsTO~KrAC%JuHQ=sN
znjPIhNTuyj{~~9{XCp^1?9468hBcYrT?<G^zFUmT2b^=`q=El*6uEjU+3ziwy0>ah
z^Whk`d{L{@X^yMU;sEc3BweBOPDyGYGg&(}SM#o|YaRyXhCVy&bGP)sgrDnT;e^ds
zt@dlZH;zv5qPYIJ{FK6)W95qnVh`C!C_zL2w|Ffr+4LRiD>{%(2R6RafoR0=`q;`C
z9T0N;K>$yhqytrpjZ=*~8jW8Je>SXduhW6HgWJ;3!rVICLipmZMLKX-al_W|(t^Yj
zg*LhNCpi%q=1Oy?flcD9lTnE}+zGE<R@R5ta`+$lAahz-BpuMD14}J*0GtJBlIxbs
z)=oGb7{9Xv?|a+wIU!>rm3hYs*!;^SPx0}vCkK*$nUcEWw+R@Q+3U+QzVewit+<<E
znVspb8b|n#MLN*|<IdW;v{{qoI=2rYd=NpUP`NhotQ1F=!*n1$XM=mK)Oh6IB@)Jz
z)y!DtZkgr{vj`!TM>m${HZiP{`C-&_7;N46a^B{kszK7*+%&h>&<2TME%}VNu?0@O
zt6Je4Kmk|u<#A=LwuOQIG1NWoWUSk?ExZ8@1W*t3JG|<+S2Q1v$X621yFA@uZ>kTc
zIy)MMLJh{JBe{uz$_Bm0z0aDCz9DdtTBltcN*e_8xKG;nWRnYyhLBU5@4Q||&@NF=
zqF924yJyne{9-0fu7v08RQY{8GcnSkxNem>9xK<Jl6+MX&%<N{xM%j?I9Z!|(&!zJ
zZldH<GST|Z$J+P(ReBBGeq`4D8&N2|Gtp9HlC1JKijVDxvYRfqn{zZe$S)nEYQe>Q
zayrrzde6}Fqt-rtq3g0G&t4o%E0Hn~I<`)-IHhFNTl2|6pJ>8*zQ&AKM{8<{4?+e7
z2y(`<VN1B$_OQ>7yiKaY>5Jf0cSw@F(~+L9A`nS>*4r}Lf|j8nNx?3qk%bUSX7G9z
zfg@+kFZIesWcAWzm6-}UQ0C})M?mICv^76qSqM$4f1cU>I`xV!f3O-~ppLTK?aQ5k
zd$B98(|IZ_I7^~Z+k5snzF#_St+7dl*?I)lguIjfoXsC5kX<**HTACkSjuv{#%A1f
z;eU{f;`N#neS`Tr*>SoicBOm6&U@VDxnlh>>M36NNm72&qYjXi%uGsWc=Zv9c4508
zENH%q_7-Zh%@F4Zp8S`xd~O_hD+JC9Keood)nX#kkrYC0uirU~j#w*PXxXH*1RtcC
zlARcFHVZYi9w@}^W-*s`N08Xb3DXEzoU{A<c>+t|8jia~an++7HM7B(QJxZ*YU>0e
zNOa(nIQ5+NuaM=&bxclQ?JyusDm!D6c?mk;v7%WL3~BClt^%)4b-h3b4y)6FwGLdW
z85)4Mfxx#7j4jrzkXqw_ub!mge|jApGT&4Fwy;C0DlnAldo{4{@WI?feH6UpIiA;_
zM~qoy$2vOC?pGfzSAVM#DXrT>2OR1J0O{PgztoV;q|kwhBe+p`U%!K@TN+ww0Gxzr
zQcuU7ovTu`W$ESfpnjjG0}*k+xU7HE*zyV;fb3MoI!67e3531%yK>mP#GLg8F_`#k
zd(N+p7B0E0)Wb^$EK!Gy_Z%}H$l{nE*BA1>(~DxN6SS86&U^Q{;tJ{QA2#e;)f4u@
zazyLn#)4H+T3vVWH=5y-vmjbBGYb_MJRPWpO|@XF+U+^VM(6+)y@REaS#+%y`X%*V
zN9EQz%&GAyd-WI2)gaT=I><1yJiKZ<tz!op^*s1!lcSFKc6*@St*Tw74bB$Z-vtgy
z;x&D(AVuAY=G)QQhIHWG6W1S#6W&z=W1jWNE?v!u1>P@m4P59zlm=RA69YSK?(}ZL
z;hogFRnl6K57HqrGl+Zfnd=-)8v0<)ag$T@Z1Q<cx5`MCv$nQR4JT*FiPodPR!|3~
zK^kOXE-{yS{|5UcXf}Y$>8mL@?v#kV^?mv^sJ6h=<9kiYMp`9M=X;`fk%`0T0Bg$3
z;y14!$G3neCk(UJtz3#+PVJ|74c`w_{rQ%3;AYIuBiynSNL%HiZ`$|4uexDHt7;uu
z&ovGBFKCGTByc_NT=4hZZV@!S{4VQjDOKsoC@phd7BSkfTvI;pQ$S$4caM;K87AIG
zv8f52M2T3gbWn$Io2!uhSFWABSG{%rFxR%nYLPECroPtBg37$6=b=B>S2sJo>VrHo
z_C8>%1F4S^z;^k-w6gNZ(lnOfwQe6zOLO_50mKYwhUBH8MNK)D+X-0fw&Cud;f4A0
zrR<xbq?bIec>=jb$V{OBf}FGmW|BS1`M2jXh_tZF)iVH6B`b$e3YOjA?BLp<#qDnA
z;^BykvTT@m;W}iZ+C{vKw||9c79FTa?1`I{eM-sk%WB%{g01bOzCV@i-k$U6tTeRj
zn$C+WDO-iG8H?ZUY1cvh^T3Qc$rE36jlI=43<}rUyRP$t+%B%09PKsNzIzy@lpKC_
zgYrN;K`ucot3oKnaZ{oo6;gX{rDHuZ4X^q*_H6VK{b=)RW`D6H|7TJ9>hu3f;(zru
zPeSd;FP>QoC5K~xF5WXr5Y(;`+SVYvUnaXWe~Efj{3*X!u(XNml;*^`|4!9K49mh1
z70J9q^Z0U7Zbh(<iof55fLQUVX<1`Dlk%}J+oOf{RgXHHq892-E;u{uU#VWWH0Cuj
zxtTp?76wfEP9+atNK?6mAO@=sw^VlOv@Yk=`sF+dO1|ApoIId3H7QSdfD-nZJ>Xe)
zoHu9P6qoAetyNxU$thCm+%Y>w^M03$=c?+TQNP&tA)P<j)M!;W`l4qm*<`DKYkvD-
zebnK#UJS%uVC(#_#9G8o4lRsY>dJ#i`xsucO5oI*CsHp|o|(o+rM6PN^EhBtfc&nf
zw;G^^Jk+2A9>}C_$Kv%S^@E7D?#5IgP_5sS_(%=5ZkI@@%bZ>nd&v6p9vu(`^Wp}{
ze&L=I;Y%&fZO(B}s8{aCOH(}?epN^-)jWTcR!sKOOwzMiUsdbw*)#HfN#oc3@i`mS
zkqWPnQnT+PlehvRfZeCnCa5hW6QAOgFxcem^pd!3cx_tS=2czjO-FZR__v6#5O_2N
zui#ak<MV=}Y29b#_=c@@U(rl;j(Zh{;iBL-Tv@&ofvKV@Tny`XSm}Y-1h@G|n}ppO
zOL|li`G8sFdT(NVQ!!W!i-tRgVkEc}R90AKHnu2e09#V%pf%xSm>85eW&Iud(9`O6
zPbTg9>h@e_E?zwQs=`GtcTKlV>jbTiG6j^_x^dvtrnS{bL+I4St0PqS;D?9)&&!4a
zCKG$~c2*%5<D?0k36bUg9AU3;qM&-0hO3`?89SkY_HCwV5*2y$E?m=vAam$Iad{!s
zV$mVfMi%zHpSqE_VH5OD{APMmMvi4>+ODx^KK**O4KIt1&})vM0tok>H3H}TG^6(x
z2A1;y4(jy-OFR`jYr44GmL9zd=UMV(rG;Z)%cWo0#Cfl4-9QP)?{5p>NtWb%`h;Zh
zc5S|3Z?c=8a3mUQ+&O*7NX9^4cpBpQ_so`sI@OOUj}-l~OxvUbIa7|dD)J34Q;wq#
zZDtR)YggWV-v;^}GBd@db#~^6F#9`%zO#3sHAf!639;9LSGT)-iBViGBjeWSK&lTJ
zg66~gRR?VUKT7?7wEw^N(dY}_0`+e)2u)|mHK51Zk2>hLc&@^v?|4_3^sG--!+>Oi
zf5w7-FU*)Io+z81bVq5{gtv9M)@Y#OFdhT-@i^0WN4e*6txIuCV_nGs0WH+28vd(V
z(esVt4wb*R>O<mod0s+atlTpv{ma}N9tOFKY?aJ749`!>C-dMaLOBFd6doaDrg~jt
z_nI~@1t2n<%L~X+^BfAvOa1)tfKk)>bIz1$Z4NSlGmR`FHkpZv{Nba%awePX|J8^N
zyli-tTOW4<!pwUw>;_86I#^5h*CU-+Q+NG0$Yxnti^>D(7Y=?u_Oa2-`1-J$e~=J?
z*5A|L0EDQ;em$H<2Yx8dI7a#iHbd7j$Mbkm{MN&FQEDx=9=xL*yrcRA7+CZGtAlL^
z{tyr|YwZ4--D36(4FqC)J&{Y`{&<ZHDu~lUa3+6iPL8c4UbPUUv7Iu%-5%Y^{XoM%
zzz#nA{FX(jGTR$iLqLDA__CaD9h9eF00TXAN2pwUwSy=x(9=`9k`<AZtvg&HOY9%N
ztIdDYP{vksO?R59dsope%nrv^yGn}1+6Ch3k*!r)w!%S5wROoBQA^`9!}udoQc^_c
zihik=kk)<3#p5`_lYU>lp%8fEU|H9gnei-&1N<_*27qC;nC5}3bc^bJfO8H*_GCzQ
ztOn400zsE35ohGC)ShpLWqtbmWw>S&$$0g`8vI3xJ+Y<42(~D82sRK3?;^vzgzm`s
z91$wvykT1Uh$HZ44?A-9y&;)W1)Q7xnST7>x$)QsOpv6F!86V>Umfwut-S>{=aH$w
zs~D(Qf@r*<K(slTBN9w3dxsW$npl9q*Hef5e@1)v@vw=+|6W1|;kF0f<noUArB&nv
z1>WU??kdM&ZzGHw9=F?UmwB8(5`p00-v+_Z7-*rAuG}3mbA8a5f4=pW{Q<SDE)-mT
zf)04S088G|>VmDRk<LiJC_>H+89PJsgc9P^Zt*2V&Bp(}i~q$bt{-|?-q*!)fD2Z%
zfZ|h&JoR?(OR4pn5nafexP+k9sgR_h50e=anGN|fW0z98QjWlN=s;zpG?TWxmLsM8
zmz%It;-oX2n5FJjEitj?HZU+-90x~numZwGo`3E%p*hqMnu5gY-*yVNWtI8%nF$<@
ze;rkoUzWJqK0?undRjsJAkk%N%2W%kT8Q(Xo~DgT=0BHGd%khEf;{sfP}{e}-Re@1
zk3m7u7Q8s-wI?h$r>}6XsQ&fwbtl9(nYHKhmC=#BhBM~gO26tO-i`Sge(6~yaGBQ6
z!N$%(anE3rErDu%p2>^PhO*6XZ)=fRQ+E>wLqYgG6xmsVu9d7Ml)bzC<&I9W9UV}d
z19N@Q>vV<5&9Lh@6{kYxEUu?7G~AX6cah%<T|4mzG++E1s|q1N`Sb$n&}PHf&_YBN
z@@2}kdF{+^#VrfHFY3L_MyK=0mX%xJX1|;c0F$roLu{%mwY!w6g5FFb3ybR;a)wAX
zgyz6Nr4Q?Hv~XUMv*{sIeF9fs+^xPZe#B(!@0y2W8ca~UPSqp!86gJ9{D8p^&U-0A
zg^PmReYKmwCo&J4WJ=xHM$o0qQCi$RIrml;WuKf{LD0OZ1SYUZLx}+?Qt7I(G>X_7
z>3!{7uE6*6T8H>|Dj|6Ub%jY+tDae8Ydy!*DogiA;&cYhaKmP$+-L~j0c3@dp@pTc
z8%D70EyNbsv?JQiD@L#Sy-|m2v<CgL3))?-$*Qxg1?swn%Y5~Q+tHvGxP}wMjI~QN
zK58?W;BJbm$dz0`A-+FG_JhrdGrRd@wRU<tLGJ|Dp;zV`pgvaE%I<M}sK_U>Dwwzm
z-dKXOWGr{O+qc8dm5})HZJ#V48JP7cza`4a+pKlu8fxDk)#>lu-aos(f1Tf;TN{gM
zoSfQ$(tP$+Z-bplMdS~}97=Fkv*0mh??cgmj@#9plbe*uz~Rd5i}{MVUkoQv@bd{z
zQ^j0g{=N5dbRVZoysa2>x4&{{#>WN~TRKpqKog?_uXcBRy}eFTKPShY;MTzwhD+kY
zyGF1YF6QhsfYNBINvjK;LD0ZGKQ(VFaIp`$H3hbuP{P9SYyPF9XM*@Hi4A|}`x0s5
zPiEC?<n=s%AIC0(L(l>1vsAYLrjH{p<$G_b%s9oD>+Ay?P|8^X!0aUj^kA-D;OBEY
zRo-=i+8uI}pR#VO-(OX0WG(knPUxAexjZ(GIyhbYZHLTBd#d;*8uOAeZYArJ7PRet
zmIEjuePma#fa@4&Zf5q>-0leyI=PX-{WkBSTua78O0rql5P5;iVWtg%MHUhEzQ2zJ
z(Hs9xP^Vg)!rlBW<333&Q)zANiikw-8j`~S>pK0;A9TR9^;taz=8JZ-o0G;E28TTR
zjC5Ng?#Fo^M0(vpEMi#VCe>tfs$5>&xQ~#bu{aN417!GpD=L5V^otFbPcwZ>hvne-
z+d5;eZX-9>25tNjJbf49Nyotd-V!b`#&fh&7IkW)pCcap@;~R0V*KpHa@{X0cdDpP
zPk?sk)Hk=Be8A9IJ<025IBFhwRZ8kZNU5`W|3awulc<F#kIgV!YZSbUh#oC5+;+Cw
zqDtyp=<|zRm#rd&J60|i>@WP~J~uxAj2>9*s9kp2P7eO*Jv|o-gNYHbVc4<Z1$gW)
z>ZCsra1`OupY}<}6ysdvoh?O&SVxoW?|q$t!D4>uCIGg*q*DjO`M*f;Z-?8SaWc8|
zVa}1qFqj>BO=Mz674iaY<9wpK72S-BZCiPIrg*4XWr|fVwi__PYE)MzTW*V8n+>-`
zP)M$``&?@INA~5U;);sN%`08yBJY%56ZVd>3Rf>18;)J#CV&Y|sWN1i^=CTuh|g`#
z0s|8c;Jx+DDDg)*Jp5EGuX9Gmmkay|mqCRW-Zs{C=1mdAwFSG+_w-@RyUTQb$j9fI
z1VtaQOy-=Lb2x+ZY&!Byv85b!K!)@<SYBRuWhI*@e86({=e?rg9k&qn9krg((T=Of
zABc``SOqiTMTiTmd&^I2BCaeT^zELVSl=&a9$z6aM~L?QY?Si7umw21t3ggr3ltv~
zb_KoGHvH0pRd~ajwTdwbh;PX#pEWfB?E7<9s@QCW{5rNZNzdyRSaqp^$aPD^1JbR(
z{3Aw<%zrfdeS5(NTwoOpSof{}8M2nt_$Y)A1KW=d8ThxaqM-jrfGx$fLEIzkDtLnV
zK=4F^N#}{KyjyEO)xyA3ET~EQWRm>Ya`96xsdxOe?WNnLui{m#p7fSZXtH(e%wb?k
z=wP=Km9WK5+~<?qGF<}L{5lp<!I+Q<GOPTpREc-&5-g%L#~Eh<nOtTJ(=|NI+u`>!
zE(jZEzEQgvv%r*^u>3+s2ai1a)TqysT)al6Z1KZ0m04+?*UP_WSs^~yJb3>r>S4?V
z2BzsKaPj{8x8c!mxvaTyWmVq#1;Zmez0JqDzxtUt{H~0g@_~y%cdT?271!ov1zvbd
zGu=(~`ss+Wi&{2&(9po*0t$?bU<tOq`ikR542=9!O^pxI(w@K<fA?7DWwc|z!cIrX
z9w7rdAR8V|wFLW7cZ;XZ@iGQ%x-*^xu0T3qlsp=L@A^_0SBZV<i1pP{c|UgL6Zwe&
zZ@>m)Qf|G<V~71s#(MF{w^^C;nL??dbl_^^TfFA<+2pUNB+-j{sl7A9fkTqtn*P?5
zGBYnT5n#ySn*cuu+T-8-FJ-&rE18<C*0<P57q?8)x;x%@zR=jI8Xy}Oa2xM7zKfj|
z-n*r+S<c45UAI`N$SD7<X<RfAR3&$y?_<Yvak=p9ra5Q6FtscXi9<bGCbkx;2_d<~
zh4ZY^OiyzP^6y{$l8?OFNGPcUR~*Cyjy<@%Ix|Acii*HFOw3j1;+0j|mi*<w9vyPG
z2S5yy{ynq1zJoCsbHHGL!2p8+1_KNR7z{8NU@*X7fWZKR0R{sM1{e%57+^5KV1U5@
cg8>Eu3<eksFc@Gkz+iyE!2bmXxamXx0>S#(ng9R*

literal 0
HcmV?d00001

diff --git a/static/img/175x115.jpg b/static/img/175x115.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..4a5c3643df90dfe44622ccc4e3a02c6cd90f6967
GIT binary patch
literal 1746
zcmex=<NpH&0WUXCHwH#VMur3+WcdG&!Ol6z)iK0B$VwqSMK`M;HC>_1P|rX?qqI0P
zFI~aY%U!`Mz|~!$%*;qrM<FFOEwMDGM4_-WF(<R6lI#C%24@BiHa2!PRt|P{c1}(X
zE*=qH9&T<PNg-i=5m_mDIaw(g83h$Rbp<6IWf>U_b4?usLlYAdd38%$3nLpnV-q8g
zA&i`yoIKn-61=<;Mv5|uMkIs(2N(o77>XIzGczhNFbOg;3o`yc!XVGUz{m>pEy%-A
zz{teR!pg?Z!O6u9RIpWmfr*isnTds&m6e4BsJa#?&%h$cDx_%W$R-?^$gWf<V$?Ws
zA&0Wl#)G0k7eA;NClxhua*2scNJ^=yscUFznV6cHTUc5-ySTc!dw6;UhlGZOM?^*?
z0|P5PBQvYGq_nKOqOz*FrM0cSqqA$$<SA39O`kDy)}qBrmM&YqV&$q$o40J;wtdIW
zU55@IIeP5)iIb-;UA}Vl+VvYZZ#{hU_{q~}&tJTJ_3_i^FJHfX|MBw|$X|>M%n)zE
zeTL>QL7=~wSXh`@*g^hcWGV+@W<eHKMME|r$3XVPLSZGNMh+3Di3>L#<Wx2e`XHKA
zbdgI;#pI#tN08URJ|oU!O=S5D?lFYFZZYsMGXf)zS&+e=;ep1YuD8Zq8jBhR1)g^8
zR`%^3YjZExT()qDX`H6cP#hTOAgkV4qp9Au<*eqrPVwz^nX?QItYX#P!c%^@_~gnp
z3qFJ%iazrEh;F$;XiA5RV{v2aW812bs_TC`_KE#xsQUb$!A;lv&<dS}SGImTR`Q~d
z&Hc~z$xog8emwaXYRj<Wp3Fu2heo?DFW$Mk*6iFp&pZ{LWe$Oy34DeJA1_~<mbLO>
zan|ZZva#>E8@m_EUE2Rau6RyRMSiHS)~jFdo*jKZ$veDr%H-`j?s~O+9DlOIK4r@b
zRRjlI3HRD^`F+VvrPEPrM<&X=Js2P0R{Wpg`r-u3;^pz&?>Ef0?%$R!pZ;m~nRCY9
z3+K(b?)p%k<z7YK+mxAdx~3{AvjPrSBp7dDo;=SzC)`ahJ)fChq;}?ihHXMOZgze?
zKYe%p+`gU1!tMLLp8k{j&v4@Fvid#$8Gh-m*qzyUKI*n_b-C!;UHP-pIl3np9eKc)
zU4LYs$mGLOX;Z$tbl=`@a#kWClxgZMHtUBwpIkSOHQV~1K}o-L|2?1?7rTAmv9?_L
zqn)_)<)v(+SN|Dub~m5b&VKraE3)DDVcXR+_Wahrt@c}R%B}Zy;d6U`SLYp<T({-N
zu2c7{xxM>&qt0x&?aq2Qc3ElyyEXrZK2Q0m!ym(@^YuQee$8D}Gh>bj%ahhr9`=WG
z>O>R_Uo7fM5D9c;K*yQ)Ko(!vve)>;&2P+xpUt1w&p7bqxWw_5OJmd1TkpGi818!$
zv*-4&hTTq&<@<^wO9B&2O>}d=M6aB4`)Fx?p<r8eW!;;O+TU_kSI_z%DZ6e}^m10-
zq*-P2QiaY+`J_~OyqunRp}4W@`HMvdN}Z3bGksX06a3pI>TmyVo0Fe@S{%E3<Lh&a
zHEX#ee7TPpWKFy+86=jpVWxqHmYaF<{Y#rxEKOmID&MvLwu!F3&nL6mhBGy1f8Kv)
zU~72H@Kv@^S3+q)#i6r{woVTG@OSIize}=Z%yqRj6zkr7k+HLVJ!k*E`9b^VeS7--
Zy!G_rceS>w_KHL>b!jXZOql=wO#rU|%4Yxo

literal 0
HcmV?d00001

diff --git a/static/img/200x200.jpg b/static/img/200x200.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..4d40faa8ef56fc445d43de95a9fb0252352a0c02
GIT binary patch
literal 1851
zcmex=<NpH&0WUXCHwH#VMur3+WcdG&!Ol6z)iK0B$VwqSMK`M;HC>_1P|rX?qqI0P
zFI~aY%U!`Mz|~!$%*;qrM<FFOEwMDGM4_-WF(<R6lI#C%24@BiHa2!PRt|P{c1}(X
zE*=qH9&T<PNg-i=5m_mDIaw(g83h$Rbp<6IWf>U_b4?usLlYAdd38%$3nLpnV-q8g
zA&i`yoIKn-61=<;Mv5|uMkIs(2N(o77)~&pU}jWeU=n0x7G(T?gh8HxfsqyHTabsL
zfRTxrg_Vt+gOiIJs9>uA0}~@NGZPClD=P~NP<1U(o`FS>RY=j$kxe)-kzJ`!#HexN
zLJno8jR!@8E`CrkPAY2R<PsB?kd#tYQ`gYcGBGtXx3IKwc5!uc_we)z4hanlkBE#)
z1_oAoMrKxVNoiSmMP*fUOKV$uM`zch$y26In?7UatVN5LEM2yI#mZHiHgDOwZTpU$
zyAB;ba`f2o6DLnyx_ss8wd*%--g@}x@sp>|p1*kc>f@)+U%r0({^RE_kiQrim?7SR
z`wY!rf<S*Uv9K_+u!H=?$W#u*%z`YeiiT`Lj)Clng~CckjT|CQ6Blkg$f;}`^g%SK
z=pvVxipfLOk07sseMX$en#l4Q++zrT-D2QjW&}navmk>#!<SPUiyF8_F(M4Kv^y`|
zVw>jkHtz7sRjXH8l!%LMa_TEs=jT@YSA*%VXxOXICnhHKsm)50<lr-~^;{lxckQVi
z8p#v+WTjUu;1&rh&YEB4vTfqqD-TZbzhceM)?Scm879eoC4lLoYe22*nZ9k`)*CH6
zY+xbz?dt;WFQKXXTGyPt=F!7feBExUNL07U#wFLzbDcb7XnFGcmj&EcLZeroS90yL
zn3XvrMZx00SGBp>WqP3pon<--UfgwMh*;F6!GHrZX?K_I2nknVEx1#DH0Vldbc4>q
zpHI^ykGn8@H8opako)G-nvmTrcdXM_{#mtl+rnkHj&CwLe6{OS-4@2A`_Hbvm-rg$
zD(_?*a7SM6-;4Dux5VuOkJ?q*9bRF2c(sITfMmnDYa-Dr_s)CtU}eNyn<Xcn^gU}(
z-`rcjS;>cYt-$$5ma7D3woS|}<~Dn=DU$KwbahLS7w>1?y8NbJ`tM4%qXBzsdF=we
zT@#2nR$s4i`*`A=3oO$%?R|SYM%!Y$<5qDCp6W?j0ST9N3(l22nOC*Zly!!gd2Y&)
z8TX%e_P^3vVty^R;JUfaSv|i4;fm}z0nBIebQTHeU9`QC+rGhezt_&y4>I5Uy*Rb~
zy2<HIwuMQlTTh$#Njl1UJpXkiIF{GLJ(tT~hi9jJ2^Yi0{Lfk6d#Y9~>R%|iuwd8i
z#y<sY_5p=H^ZYlw;w^Y}j5CBS!FX${)tRkl?_8hlbu2`sQfA_v3#`9J^9~~KP!JaO
H|8D{S`GdI)

literal 0
HcmV?d00001

diff --git a/static/img/300x300.jpg b/static/img/300x300.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..53056abb8617e5d3c1132c2e9052cea6355c1a4c
GIT binary patch
literal 3021
zcmeIySy0nQ7y$77^UqBX!kIuM0V0HQ2mw?)2$(_;9gc_y3Mz^Xhak}e6e&Rw)Qm?#
z1z{>^5Ces1l}iw-qK1M8#voOc$`!3xDnUe|m^8E<JMEM0gHP_x_q5;a&hOiASNlNQ
z2aJLOmIMF@g1|c61X>O7VR8KZ!b3RosoXf1#MF&kYMQ&N8<j5DnvlY!E(u~&gF^k;
z)U-JaM`vo>#;;-poA^|oAa+v%e>+b52(SPKg+il{7&ID<#bR)HQv<xdKAvQ3VrV+k
zl43p6l1!%3Tpg&k&UR!neXgUko4co{C&j^g(LBaNR}W9d^d=A%i^c2Xi3SElh7H+<
z@t=qG3Ls!0XUG|bY=IsDf(elJI-mdmA$8hm@LvPcgAqs+8iU2@>k{gXfF1<HdI%Va
zL?Cq8U+dNZf`Bx(arZ-+gvFw5d8Uk=`6n@Ui_cv(<H$#89_zR4!s5&=h$PEd_6~H%
zFFd{G%$?^wpY^4G06TC=(DLvV5i293R&CG~iyNPixRozROW(FVBWHJR-k!btL<NVB
z94#z5R$L-3KUHyBQd#xg`P#brhQ<p`&8^q2-;lNa*xqqZ(RIK3rw0#v`UeJwluw`i
z@_bk|_G<j~#G6U=+i4dB;6GU(WdCvzbS^yv0!E;xU65Y7E?@!zY2%JE_6tMD@=R<Q
zJ29q<^G}|;ina6LjGC?ABFCB2Jo{&<rfGl3J`T3)f5|?;{&w{MJPheB4<-O681JBq
zvvHr}a}7Ra4>+Ma$|5fuZR!2SruEHx$5H(Q9-$&E?Fqic@a*^rgJvg>@C!wm5rsqh
zW(~7r!<C9Nb(0!}ne6GBXy}j@#DLB6P!_-7p-X#z+HXD&UPP*T9uF%e1#4Xw_M<%1
zIPgS#p0DOMv?N*O^~yqDOA`TIT>Cnyin`NocRo#8N9fM>q}Q0s&urL#tC4gJ-^W#V
z=aubvmZ0HFj*XGudv_{*Eh=j;BPoI{iuTz>)~Pw9soW@qvb0B4lVX)lVs&SGRo2|*
z48*8btuCMyRn5#@UKHG{7<{*ErB(6vR21_)AG+-CpER$j;b5$+Uvc+MRXh-j=pPXQ
z>-OHtfDZeb1vcIrnR%ZWFe4D{-~eCZR<uo=mSDrq&&ygz924F_CbB#&?waGQ8L6z<
z<29E!JqzaK4fif~%QU)Vm;s7?goO4oHJ4)j*ia?)w#W?LGkHXGE9CI?EnLkicH3om
z$|*SDp-Gd*%s$&~WXSGX?JIeMW}6mR-dA+lmjQSZno`$PZ)+d@bxM%@q>$NK&z~@q
zT=CNYrYl{qw0tbFfia_^K~p}JP<zuQuky^;g4Ii9q<#9qU0Gj8$lSZ;yzCO@F0DD1
zSK8`VNZa)GE@I{KrRkMz37hT25(a}TEYn<CTi8u1b;w^5e=vMVrQt<26MSnO5zDNe
zc1B0+Z{)FfWY@s$J}=3k$OR)YE~SAhh#f6)<Ih9)9yq(_lzQjvSH?5gG@QJoqh~O^
z7-zmH5>L5vP8?yGb~5?+O%pt&O$(&HR+bsN6@5Smm}OoeVQR0{BsAxdFihjMHDuk}
zOa!G59vi3{X8KfbAP!rl4>Mb{5$Y+ny-@jW=8jaRtZpbqHJ>uTadP(wnXYL9#d^wc
zRO)RN7yN88yaaUKeb7+KeiMCYNGMH+NXe_<j|p3bw7}-QQ_#o#EEt4Qh9&(39#J|N
zP!L#RJ6hOLS|;^2kewA+EzF8(;WF2%q&;-lBfPOFb7fjzvF$LL7q09|smEw;oBhz8
zLe44Ef)$(PzDBIX{3w@m%Cr$5weDf`Mn6ZMD45MysGPx5TRstIGx(E|rk11^xsPN<
z{FCCscM+(--sJx0O@Vk}=a@8+4%<(VlIt-qT?V-Z*F`yA_SKtd@*6zh6UR;^KBENP
z6KA{KX-s{gtoYt|ywhR4x<s%~bh|ri&88yjw)*%mUn1e3ht^7NEV@0oHrn-Px15Tk
zFkezhMa#v3i;akOi_irkiEFu_l06YGov2M6B5T3h>MRiubwkO?WV_?#XRBUv<o>`k
P>~nms!Kdv3q4weLbG9d#

literal 0
HcmV?d00001

diff --git a/static/img/350x250.jpg b/static/img/350x250.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..5790acf2db23ca4cbc05bf475eb39984f616c04d
GIT binary patch
literal 3316
zcmeH}do<MR8pq$cGE8zAav3w@(g|UgVWNl<no*h2m^4ahMj^B(*XZJwGH%hGQ@JF$
zRGS*Nl2D<xT)NP(*;Ist48w%qna(+D@3qc9C;Pv>R?oY>e?8B7*Yo*4&wAGjbwa-b
zMVcek5x`(DuvdBjv;fxIyE<%Oy11?-9pIYy{p@{!6uR1U70DnZ$T#o+iAr-K(dZ6N
zq)>{Pp)rZ;z27UuKbXV|@$&Z#J|YKo0ec{eM$4d4vNAF<7>ukO7PkZ|FOStwR#}SE
z)+7?NHSu_ozUc~*uCX2-Z?MMDc-3lib93SfD;rBQYg4kh*|$qz7z_q0k5yl?MBPjW
zuVc38fF1!QSs;OVB4D}zt^`9U!Jx;02mlNvrTqr{-+;jpNEBK|79%GwEf6RII1GV+
zBM~SR5-F`dCd~t+5=vQT^#-&G!%Ie&hck;#%a+yKSW>I%+BU9F-gh_#Bd4}ZT|;yE
zKUNqR8kt*A)>vAtwcq66=(L$i+s<@j?Qq}8=19#t;N$BT6dV#77JeimHtuBnsnZGk
z^t0#AU$}Vbaz;+>^}HMTHwy|&@7@!Xl~+_&)zv?K^0c9`=~?^BSFhi6biNh#^}l=n
zVPNp%(D1~UNzv4_cxG1ejSB`4|H1l$?0>kFq+D<$5`mQY#s!0iNrg~CqI6cHl{YYC
zym%_QX3?^^jcM5>wHQ6J>$vK^!)<bE`sRJhC%&Qmo9z3*V*V1@A7FoS2>})XlMWA|
z1Z;umnL$pJ+z<Wm;Q#G_QJkc@SYf;IC(Ctco~v+JP0T&r`I%T(kB%~7Y`MUUr=;7*
zc~T2&gwwW@y%4}38qboy=jLM}?{V3>BCosi1to3XC@dsd{yvKFDg%V5X3m!%s0rjY
zh|4AxEVA(lMlz1rTaCI=+7386%t4hl=q4yTob>C9wQ(9x!0wy^;V`QsphUe00wM93
zBL7-ui6!8+!rPcNf=?#~YZfef`?e*z-pg=Eu__&Xq~$V0M^zbO<S_ccO8-sdNT|=(
z4WSV5-N6TKIl1xSpY@bC^_>%|E(bV<!*@&7gMO~oi(F980rTNS=1JM{>Tny`ENt~k
zm#DYJrB82<wfstscC#>0ad{APkXLR!O2~yk2m7KprVi(&xOZDCIf=C?XvublV?{{v
zj?ejb1i){2w0z6OUc}VR08u2XJmI=y4^wUSe*am|qdRjTa0CL`h5fy(E6AKZKcy&A
zde&ciXQ#=Mgb0csa%r_CDIOM1?r8&+G0jVRYHeMAHrl#|etwWrzGuW~qa&t)L$7J+
z_a<C|Kx>fQG6<B8TBojT(q1o~I2Odb=S$GK{Hc4see;~9#a;J=FX5L@-9910x1uw8
zx&%$-%Ev{@l=Heb(l<%x>nP-#ZRL(oMz!)jS(~L*q_#qU7C${ctlJ}0DBW8jT7T^n
z8?<LgC@%*pqDyg#3bKO}lGi4Lr-mlYj~n&(>x1rSwzIFSK<$aWBR~?S^m$H5FFpFr
zb#%1p9iIy~R%Y@(T<O#~77;69otq47zZ#gC-7>I}%&c1W(#bbqvac#-;P$Y6W1DbQ
z1j_D&5xC=(=h5PgFD+W;e>PrRbY_V43#~Ng7jG*Kzvh@F+XjBa9-d_sM#b`WrPkdj
zt*MCr#P%Fq5!G<hrgF?q`QX`7yE8fi_AhKuF6fH^+Ev%nR+bRSgvy2U&Tg}UNapC5
zg<BrMuv45&ZBOToE*BsWW-B#PuDjTI?5t;*-outbepeQpZ}9!fuB=RH|H*92=nG4Y
zg2L*l%Bs8RI^xsM<{iLRt>O~nMDZ>-`Qt(2uJUBPlwkU858nn22w2|OIo#i_bcm<&
zIW;<^#-7n^Ue)}}L0L6n8`Y+|8Tdaj4>$z7+`2C3pQ|<W`6WBq)wvcATsJCwj8v$A
zfNpN;p44XquE_vrh8JsxeONa#{bB8u`z2EiU-GVrkLxF=PH<-TC9gNUbEsML{3J1~
zTcj>w3Y&8q3xX8a^^c@fOwAb}SS6(SvD5Fp=B(z?h9}B98X@3%v^!$1vLN{2j%3dP
zdf4-qHazLNXUS*8wbgs;ZAQQ;CvBRFx9Ys<ncY+rtJ~*3-7@n!u`IxOyED_aDrxTV
z@q7tW^5p7>cZN=UT<F3W1lUm))JIK2?&MwFes?n?{fiL=Q-u6Eqx#-i2|j&L9OZwg
z;N7fdws&EofwiC<OKl41Y#FlCVzG}>s9%!X3AZC&CvX$M<Zc{sOp)x~JAQ^ZJ53Zz
zA0_s!-ntG6dvoIC@0*v64@p|lr=OzNvIzH2UVYm!HYri!dj#+}(VVMmOmj6nMUBX+
zvYfkB0rBJ+URO^PvH19ytKgjIoyc}RqN`9-khz=v0nJT%zm(DKW@%BYT|wQ)F-qbR
zYWC28DFh<>)o~{jx)<<oe&hJksWz`JPGSRJ^iB>5%X~l%-(WF<TaoyCrqc8v@F44D
znwo`>kBfluLvVoUC`1Q5Rev6FUZcP#3z3Io*eT6l)&4qnNi6Nar<v-21B^cf)9R|%
z3k>J%pEAPaN8zO3wNTtWI*cKBVER?4{<fMH<40RmV~c_KQM<UI{~i27KyUvA!j~^R

literal 0
HcmV?d00001

diff --git a/static/img/400x168.jpg b/static/img/400x168.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..7383302c331bacd34f0ea021b7996253ec0fec76
GIT binary patch
literal 3107
zcmeI!do<K}9|!R7Z+>%Sq$#;2GpI}xV$4VuLt(J)_hGfU<gO@G<dQ<HE>hX7&B&#}
zY$2Dn@~~Z8q9SseEyR;@iDX=d-!nbWbM`ss`D=Io+jI8wJ@3E1pYQja*XR4s7wJQW
zz<O&7D+>TY5I7)S09gaZ`<%>8UF@9<D1rW(ArS`yDKR=)+7xQ^(cnXY6f0{s#oED~
zO^MN?@6e$59}Mt`4vV5hM*D;XN1c#B1YjS)W3f0a29Lwx2n4(YQAUa=DM?h=uu)oO
ziy~Qhi=vVeWviAtMO8yhNr}39hlaKegTWxH?=jM+8*1q?=wB{@2m}IAk|-}FB~MpT
zQlbChLK*=H4|vc;7*Yi&5(JYV<S`%v0Aa-1FW~<cgo4o+EDleQkQ6u6tOqCvhEZr3
zgF&Ok-SOgmfF@x!sOXqtH#+*@R3l~Rr?Lw0YI`ex+2qtYvsKskNHRe}R!&|)aocuv
z>JA!%skd8ykHJ1Oa|^bmm9?{rtDCzA$J0+dtiYh)kfTx2F~^Rdh&_EKB{l7Add8*f
z%U7=Ee19$XMqyEL$xU8qS=F8Dn%cU%Ki_-!=<$=L=9bo{FT1*5_4M}j4-CH@8U5$G
zvG*UwKh1ug6V5LzE-im?K>+>_>o?i|xkzFc3XO)*xGydUbxa(XgvO}oU^kdL;(Q`E
zs?ty4W%gzjRQ^Ix({-BJ<a?x3LUt=-c-yBhw13NfA1wJ#$$o?V&ouyuFeH9Fm;_j0
z?kV*~lEmNnOUyt)qm*c?mPgCXZR=tZrgs%_HZR0U(uN{irmYgD;$yFpHdfmCtBDYh
z?HFuXIkB5sC{fU;EJy)|bTLlt5ula%qBSm_XV(^7?-+~GAL-8RdNr!^;iX@>PojaX
zDoOTw8d+EL7y&d;5X|%Td@ULG@QJ-bLgAp%lf!Oq_wk`FIb^z??qtXmUof}$?vQ;>
z_TsuA_$$ZmfYAIZ&%g-%ZL!(!X}1TMnntf~zHzvIUT{hj=X!1(i_ZD@?bYYd@@%Nx
zGRf#Nk3DnAxUd*}O)NLuK_g#DH8-xRw&L*pP3Vs2JM0V)ARPD7bnyO$AuV@#gsYjC
z)g8r^lAuYp72l}~_6StMyl}Ryx)*xau;;rr^svR`*kCc>eBi{m&w7VsTadLe+bnRt
z*pQuq%`54n{kuL|4S$`N;EK&i)wBx|Ow;IjvB^}JTjqIXrYb2MJQYz{&u{gzjvM#i
z(oo+flhR!0yc&dJ8dR6grvzsRhelYYp1H0o`_0<68+MPgBPZO6Givzu%JL}5yYQ0h
zamHNTgG<9oqNS%J=k0=^h2GG>u!Cxvo$OM+Yq;n86D<b^PHgrH5@9%>pszHWeZ5%4
zp^s(EP8kn5X2v>T_g~|+ZEflqn?`^n>GT})wud`+*ICMrg>>7&{6)7ZAmeEMhqKAu
z;el*Sar2-dWue?Po&O|aA&cQ?IqYt@eP~_csta`3x>|2W!5;zMyW0E5F)m$+qkE1a
z07gJZis^j4-^!iD!Thxv*JQ89_p^qj$MU8h`U}T0V>_@-^$1Xw6d%ORGGkhNn+Df@
zzCFvIK!BdNl=6X-jizClWV`%x`@6m|{t?=eL(Y+blq*<oIlDx-rHqV@{6%&v0!r*x
zg9ijDT^R^Ck+jzEGC!DPKxbd5C#@b`V?fwsR!0$Qt^)xoo@e|?97Xsvy7gCW*7pdQ
zaN|E$OJ*BwvRb9WYL8a6a4QWx*UC+L>a60V6%1E)BVd1V$Hw(GYkb@&YgwpQ6H&>L
zZ^0A|!GbqQRC}FQ(>|$&XB%7Rg{+r#ow5uU(-g;~oiICRviB!qc})=@3UNHqL;)97
z$rxN(=Z%0y1k9;;MW>e_pykN)8V&&k5<qavljCpec2w3TrQcn-=<U7Su|ku7sHrrJ
z6|f3ala!(qGQBd}-bD*8OgIPiIuVqghkdlaf4y&fXF$b>{HLAaAF}gT#zaA=dHzMC
ztj~i1(oaoVpZO1bJJ@`<O1}N<1GwVHhASRDxF2`|lV*J6a$cgfz|5mV6_jDY79I>+
z={(~x>ektauArlhCb)dfgXZ<4a-^BD?DM0(bwS`p2K7&cZ@YVKUryo-YZdSITE{1S
zD_z6#)@u(cx&uC>A}2d*7OUM9zf+>wA)I;r&09U1v}w2E`!d4h)JIEQGd?>Z?XwJ&
z78$WzKN`_g?5EsN%Iu__aVXOUjl7}S)PBoUrj4-K*{K6(IJs<5(k`dN(if6fL!#IC
zTEnxHb4_amBm0Uc;cZ0cl2%9Wcsy^oqNXnX)82x5dwtP+s8$vMewAh?QP?qKVfK21
zTE2Hf_f7rzEw~Y{$+B_RB-(LG=4spW@&zw)6t~AtIp~@wc)l(jsEZt>&-Berh6qzS
z?pJg4-{|{HyK!8*%Yn;`sRH%~C7pfwS_~WE05>3s?2&s|l%|D%p~U6&Ki%_vw87Hf
zBg^|<g#&?$>)Bq3zW8f%oLrdyGU;XQ2Rspf0B>Z<C0>|X6y*yw-;I<UFY4r8vMQ>-
zd}K+&{-lr@x1!aSfPg!<5^j=ntgFS}ByF4t6;}7Ejj{ab_uOx|vM;vFr?+snF<1Q!
z&ZS8z>=nC9V>J93YOF6y#Dgh@xlKiB0e#sD%BNZFz2-I<@<X;+syCJ)doC)2`gi^!
JGmu95{{@|P=J)^r

literal 0
HcmV?d00001

diff --git a/static/img/400x300.jpg b/static/img/400x300.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..a23dc0e5196e9d4e7fe4cf6e6e4357ff1b6be562
GIT binary patch
literal 4025
zcmeIyc{J4T9tZI6EX-mZ#x64$+mx~s$(9*Q60$T%mMmcy8cJzIqOKSu<yYC4tl75|
zvXdzLnpCzHWckrBSNGoYyXV}$Zoj`h&w2m#Jm)#*^?5$$!yIA02e?fL#smNa0s-gu
zHo)8kjvH7S>YXvS)WmwY$zSxp;DHTNJgk6~r3QMDJ+Q_mM6AhaLn1avO-b$$*6o73
zGu7u3mO^#*@w#*c$s7j^05~fvjFklrgTW98IFcRB!Oq6UF2uvjg+3sR5j!9(DvHG&
zmcdFKk`xt{RhK)Yps1pvf{{6@t)X=6u(FEMuSY-#1cIH7U66xAP)S@=T<NzLvk^eS
zL5Dze2uK0|qd*W8h}i;Q006|Yr~L)~&jNuVP!?7g9D!upyHLpufI$!l7z$xwfkO9g
zhwhyNP!tP~xS}2_uZ1&Af`V4M5uXm1)Guw~v+Q5SDZ2!OBar+8f<nSl(lWAgcokJO
zb&aE%1}6*&L?dGpt25R%wsvPpu6xDu@btPEc!?SmeECX9#LdWCQPH>WBqZKTx}W^u
zVM<13R(4Kq-qZZD@`}o;>YCcR=2tDPZS5VMU2oqF3=R#CjE>EGnEm+a^W6Nx;>zle
zwe^k7Kex7jxj+Eq->ko6|KmdKxxi2;1Pc4*0)d0~0zpAp#1&b2^ekY`6kZ9X8*sFK
ze0pgULQ>gsna?GlAIXnXnUPxgMf;cR|AU49E!khN|GLHib_i(i^B^cd2UzQp%?Ly8
zXTJvfJ@DH-0M>;jhT$Wh<Wwj7A&HTvjjpYK<V?M5Sm02_-z#<@IU=?>-*aV)RJbyy
z#h0u@K!aWw0SW#rE)GkrZU_B@lQ1niOaNJ3*yHjH&&eL;H#3!NQf?%V>WaWcP;f!o
zd0;ILM{*X*Bps)%a9K6iE@iN+xqq?+T=hjwJ0yaX>V-M~(_C<Mb9Olm8N6LL*5Pv7
zphNTHGQOeeIZ3w~m1o5;9$(Jt_qB0PShQ%Ub`D$`NU6^s&Dw~a(M?dS;nw2J2s;uE
zhl)lRdUy$lxj+7aSwHb~+xm~IOWwJ1?DY@WXQ4Drpwv)x(v=XbVJ(Cku-T+Ll2@IA
zre4Zndc&{-s<^UdmT9>;a!9DRDs^k~T0g<I&rR6gbLgl2!z___gogIA|3R{m#C=JT
zjC*a0vG;&(`@C;6JcQ6_ZN1z#$AbDQ%0y*%yfK6x^-Z;{t}vQG+>&Wwxp}akXKpdq
zhf}g(_2JLctNJ%WMQ}secNxL`37Os{Q<fL)eA92Ccrw1WaT1-1T+2AL9LydOr8U-I
zadWyN37V}UT95ECiFS$J-#=rdrA8Nb%*;wo+Q4V5HhazcXsK^Y&W^Twlk?Ez_8!VW
zA5`;tPI9e&y%a>_4Q#=731$)PwS7}v5y)@HaajznsXm8eQGI<NL-gt2j)lXi`+dhs
z`ibUN3zkFtmB*KA-Ul@Ey;7UX36pty{z~@Mt=eE2kLs6ec@@)JoQ_POkqNAcTjtcd
zN26RG;9~$ZWqXj#^v|?`+?opk3FJn=BQcc(RDXc1+Lt_aWfV9IT*Pm)+whkvO_IiX
z!y=_h>r4EWiw1l<iWZf1(UnQP55?E8yOp+An7~bsqr0NC*^vTLx9drI2wjI%@QevG
zE630{X)9m)Sc-%wIfPJSogzo-M9hm!K2w6vLVTP)amm)PDpNg8I!uvq{JLr68lLu8
z@2ZGbN{RzPC#c;Y({pAQgOPd_l7#6kzSt?^wJOA^wwgO#30Mt&KT%5b15JK*j@8ye
z_CKrS4=TW{P+b?jxeV=|Fod{z1Z1_%E;Y!4{(<&vO;EKAp)02J)C^0;g%Ej@p>clz
z?iI5sM*}}~#KqRziJq|>A$7q$B|E<fz<#75N%FPu%~MS&P6m%cKBp(nttdr|W41ZH
z>MncBpEEUU$#e@`>(EKkG*4{lGQUQf*GS{2YZ-oVw&)RcE;Z*Mxm5LginnL`Ihw<1
zP(EY3Azv)Y4`WkQ*D`qB?A+iRz3S9Vn@PZJX=(SiNXT&=0}_8O^%2LCaO&Ig^^Mjn
z)5WbFu0Mw&^Ts{E+l0)uG(=v;9YFRsgRj^QE$VsVR!a79)r#J&biV^+@5H+@fnz!=
z8%#jBtE@cS*XDx|uVT*EOqm!3zJBY2zB*qv-#Kj6KYu-ac*0diJ5ZN<G00P;fnLln
zS;IaT%LIC}-j?uOJ)z%dEI6j89c5tK0p%v>6`DSVRzwzkw6<c%kFTUbhl)?UK9EHW
zBzL<Gr|}hRIB#&3Q{s-e(~!B&S@MP9XYGzf<iNlc^AKLcT04@dv60PW(wh=}{8YhZ
zI!Tk2)tI#p^mXFhk+sM=dN(hWzTWYE@TxDg@J2Dt#)5HhdL@l5M1@s^#pNjd8$-+b
zfTerGOH++Fr2q8>CU9h>sLkqAl0Nq=Fss49-;KRr6{u1q7vIr{a}{fthv-<A|Af*f
z>>2qA$8XZ^`jRH(2g^(v1Ov3WD5ezf#Q1ab{wOE&kdoXH)oALE&CI~NHBF3ph`L#l
z4^=4b-dETs=ypUa*;s`ly-BrRmwxKBV0?MXrK*z>PHEa63Yq7<zm*+xB(GBi_{plC
zGLVer&PVJh$c=TW2%L7zo7ZLNz4jU-5k0t)G1pDSvIY{H4)n;QBk(j6z{ghMH9QID
zSku|LuwEE2Ycb60q1YZ98l}@4zlI2AB#Jv((Y-C(nzaNwtZK)<E22T>=WbS@dR{jA
zU%ypyc8W+P7Ypu9AmzS+Rf%p9$(RCmlwG1H*WSpo9v#uK(B&AoAbcyGqk<Ulw2gT3
s$;)iNFaWs3XJG!0r~9z|wJcYS_o4V50BvEopZyx__rTxi0UC4kpR(MbNdN!<

literal 0
HcmV?d00001

diff --git a/static/img/509x343.jpg b/static/img/509x343.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..136f12aba72edf1e89c65514d6dfd99398261e77
GIT binary patch
literal 5439
zcmeH|Sy0ni7RLV}8w8L=g6s*4f&#V#1e7HKM7Ci`AOQgz2s?;uB0`TOBB-E(sMrlM
zfUF6Ktsq+z1BfWAA?(<=5e0%QvM7Wl6K1A*s^)2C`lTN@x4x=db#I-j-#Oo@!yn<l
z2PEx}+Z_i$AQ0dyH~@bOFt;LDTevwBj-rDDbi<+ogVAU84jw{l#l?o64o2JA+o0`T
ztZmR|4Ke$5&;fx#esQPHprhmbPKBOHK=9uHR)8=J28Tg~;c&Q!h%iD-MqEr(R7_ra
zw}gzc0!l?$K}iX%aZnSjrlYQ;q-C^U=a8O(fdNYMh?z0Q^q{^0W;+Q;L_|bPR7_4>
zTn?kEq>A~UgWn8D34`20n_!R{AS49>OM&=p015y=Pyy{W@V^2i1cpFiaA6UIsNh4b
zBp?I=gM}bqC=>z_{5~&u2Ov^VX;nQ7*lxTZTrFA#b0O=Vu)5`=79^o>K|`M$lPrRe
z-6JQjuy>!P*8T$qhYgL4j~ul+W_{eo*3RD5jYx9$IN|9pC{}PtXjtr-xU=!+5)v<_
zq+YswB`y8tt=rjme*PsVx2U+Jw5*&)uc)qhTw7P)(8y?g-u9yX<*SZPcK^WO(D2CU
z*oTi3oKK%8r>41I7nhb-zI|U^<85<+0PsJtekc16E-3+*5Cj5-z_+<TLh%BDr65pM
zJ(#ow9_|;tTMctTSjIBz-lG-~b$!ADk{r{Akkv5wu=ndW+CRwtJFw*ci|lu>e{+oi
zVqlP<d0;633oLhP6;Tm8+Nr^g2X;L0XY>F)fo2upV*9`$SP{nu6zV+`-p&8;;R@x9
zL^lh{oSpGmn>6BJ+cST^<!oM%*!Xs9QHJ7c#RtqvHd2AG_KzMnt$XFI#Mb*X(qsZT
zz7<Dr9kW$SQ-`a%X=#o<tgXD1`zgY|L-g8(@#}!cEuS<msn%{YyBD4{1Mi=jzzEKB
z^^{VJ$Re*2tJhGDdVUm~T~jM6+yB|l&;Mb;?eDHQWnDu%X}Rv3hlt8{v{}tPhL3tS
zKfE4pBG2eQ{eCqpM>R^1+fLQ#__eL-%7<W;l8@!JL%MU`>R`qE3k+0yjv%*&e=p2N
zJ>M2QonA_xc8EX~fJ{Ko_fM)UgIIXCGk1$)1B~(*$|XFWLK6-ugU3NJp~cDS8rP6E
zgwU1OGqDEs;isRbfHO&0jteyH@al82vHWHFDYtKoo~Gw1zU0{cc&pWZ-#*=&dXr%F
z??=!?Wmg9Wx80Ub-S6qMIAw99gF}OntZ;Ws*W#_^%EtgHoXh>;MYVOq9$}yO*xB^E
zu20wZ(hpG1@qq)B>#=neT{N#t5R{&TIY$AQp%u}?>S1qNMxErJxg;?+Pq85Jp53x@
zcu@9B?<n|$i_Nd?UedTuGpnG=&_wb{)m-vfFtzyF;LLUD(Ft=~y#}QiTdX$=mf~t-
zO12%r<fpjK6!h&2dGL0eamX}L>Le79!CU`fAuq<5zLPr691q-tg(o(8F)<M&KS}bZ
zPU=yf3v44dJI}GU+<RS!lI<+>)#*u5miJF8+3C5ERLoLEeWCYOt>Z)^`@!u=I8D76
z0dOnxs`-HJutWawZ;=aI*-S`Rw2*z1T=2BV(LF~m7Vv_cxmw_&3eU%6M?)XtbBW#u
z1AB@M_n=mKnArfH6`&h5MM+)V2)m8KUdfnW<Gw44c3u7J*C_1xR_%}Lad&Da{gYc>
zHq38^fQu`>zgHBcCME=I-CjMd+JO6NdtZX7R<m+-YG}M_!k3MOE2jb^7Haoj@+%}b
z6y7r9<yb_yw2f)eeiOJcoL$VKOnh_ZeWv_URrw_FN!__jR~AnJ2ux)?d3*wUE$aDO
zdboR!?1<V~cdS0r7@bHIH~%vI9ivg0ioT?hLKw9iyHmvO#8BrbQ(9nuhm3&75~dmR
zn#Mtz;9B>HgYJXo11Ak5#WP}Gg!SQ|!Qq68&@U+)y*ThxtmELmru1X7_d2sp>dNM)
zJtDO`ViXo$jbIN=MbF|C8EVM>MM_!+s*6X;LJQe7Bat<2-=<jpT`#*b1`DcwOmMk+
z25VaI)2ILo<oq`u;yg!l>mnZ*E@8-hMO^6b&Rjzb_UoE=gn-3t`G7tpHSi=Kc-6*S
z8NyEEl#%#>FC|TB(uTybQIi^XTA{E`p<!KCtL<JJjq_n-OFB6U=-5~EB$U8De%ag?
zbr9y1l-)D#?Zb#@#H5;~&%&rWp-kpbE)jK5kQdAcW*($h8yM9s=159m-N)Ze&w4Hc
zcx#zIEZ1Wpic!|%GZ~>C(k0-F8RFzn#_idkIO7gCEbupA3REL)6VGer`Mow;&6%%J
zLyyBXy&K%>B*9CK9V%28NUox6|0`@OM}ox%JYTc1@f8e}hQLh<Z?L?$&A<OfRx+nH
z@Hf=M@T8z!<8K5g!#oz;hFA-GQ{GD%QD6FaUmNbyX+gjU&!6!8)LQzGipuG={f631
z1cEOQOF6y04`18hZmwL5e-z<gdwD$4{;EyNi*mYIz+OJ^e2th8cjUuhQtvv%i`sjn
zr4S)e^j6ys@11xFHFV#qRMDfPvC;3Bfoj@hUVIg|XJ}GtG{JX+t&{|=0$dk(L7@eG
zxD7tANo+bXrUTPf=ESOwub!pP&!v_Y+qEyXW+noyLkjx_6uXqD-~w0A#NBNX@@{0@
zJ1n!*g?-<8qC=<oc8k2($N*{4{AW5ci8@P(o)JtBjYi;#Xe_b=g14qj2bz;XaP+W&
z+==kgf>ddx_3efh?z%(c)^(WOYDAg(#}rJuGX`}@amlSX=kAHHOm7y{QOMFS7jupT
zNy2Vb^kmGU@asfYko<4Rgvp0IQvL;bNymNWOQ1ChZ<-H`7&4dGk=>M30QF{wxzro^
zigG>BIbJE3#sJm9Ni9lWGZ(6Sz9{;vO&fj2wpN!v&M<THOnxI;!O2f}xypilDk~S~
zv>OlMnoqA$1<UV|ZucR{z1foacQXz&mF0-%wcCzawneO6;RA^BkHQ_cfy$r*l-KV=
zz<wT>O9WwcbjC79`<}Z?=Q;HEirj#i!zmu7g=02l2S&FCOxdn**J*=w*@j2=jHRI{
z!M2=vaHp~1&1~*MR)UYd`V@AP$aVo)%lvV9c$WRFnKvxUJ>hi+KY;QaFQOjtqrGc4
zWgdBX>QKjK0zJau&DD;lUDvrOpK=)WY=*rS2x&<p$^pKJ;tG%R)##4Q!$*S~mMfQC
z;0NmW3|V!GYxrZ&WPZxc?RRc?R?w4Yd@ZlWh{SWZvj)&09N@bPxZmUB6n<l0N|3dj
zHdmXF4t(w>J*&6aP1A^8qW74Knp8P)9OD}OSJdTIk{JqGAOLX>*9-;_&4aSsxp}h1
z{_EyMlU*Wn;e|z1)!KS5uYfd4O3ZoZ#MeXjJp)gCwCrVSL*+F{wKAZB64Q4<i^1u~
zLRJZ#$E|HDLwjP=?#bT}L#`m{)<8^U!ugPAq&3N1Le<L~(|w+A!}L#|=fuZPnP(5+
zaZ)V^ujVYxaXdk=-;ft$BlW|((3dRp$;vHGCW0x^0%)hJhPdM&l0Z}E#T^CtdXRH>
z_iHy{$9{BUAMROMSnRSxV_S>C%MU8jfnN6VL{OPs^yi1|@P$nKzM^zMYezdZ*zv%Q
L2mZt!;E(<tVarVG

literal 0
HcmV?d00001

diff --git a/static/img/600x300.jpg b/static/img/600x300.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..b028f3345241c4e9cd20fc0fc5d42cea9c19b311
GIT binary patch
literal 5919
zcmeH~c|6qL{>MLKhOvuA*~gkajIkDDxf+y=WyY3oL}-WxQ&A#)MY3-RWss~hAzR{0
z$WoTE%p~GlM2u3FQP#Qo{=Sd<`#$bp_ufbMkNbFZK9AR5=RD5iJYVPaIq!2=W30Ep
zKI>yv#{dur1bFOy0BaX8Hn+Dhb+olNl=k&j$6q+>D}7Pxu%@&UG2~pJue6mlTG|?8
zftJ3gi%?dR_CD+5Nel>;CJ;RX&V`0?vnBv@fRlp*%E8VFg+jTwIJtRYe7rn7yrM$;
z1z?h5a4AVK2?=TW!-~?fYH|`1N_xs_np#LC60T@qq>ngySR0A>J_(46i;I_sSA>sG
z1R*0KgZQ@_s|^t31gWt(gF&(Yn;-}*2x4^tZ~y?Y@6mn-{<DGDzz}v0C?^*;&)$H#
zeE=H>3}%CX+1VkGz0nbS{QyLeT}VdDlw-f0CsdXILtIZS;FL3~ekN=`^hI9#OmH+8
z_kn{VqGAe%6qS@!kUF}0`UZyPf3rA-wzRT#aKz%AoLyYK_RRA2JBJSmC0@LAIV}9f
zuQ4}c<8H;LrDtSj-O0Y2Q&{w%_+d$DS$WOl+PeCN#wShf9i7j+x_f$G43CV`=&#0J
zkH4Fqc|SY%VSa(Jyt2B+T>tuQWAi%~2mt>d)<4MpiA!*giwyz+L!jTeKx~)x1Qvv_
z%V=>3nc6`;3HxOc*EwNksRh-~xa73$zX+cR9^yVAk9?=F{2lENvVRRM`adH32iX5}
zjRU-3(B9^O1pySW_Cl#Jiu<R2dhjy?KQr(nGN7E+lhQS8&|ccBGwANGx8Go2IxM1k
zbQcL4wmX%EKS-#5N04Cwm)~EjYkA0!Wm@a=AQDmx1sO_gJ20&OL}$&7KF_qvSSAwW
z6F=)iJ3JS#(RZWDJi&p?^e+_&OzCN%4Me&E45d=?lF%G`7OH778J`u!t&&wxs-EBl
zAjw~yHgnq2?Ve`V_!2&rfY(U;HSu#~;_WyIF6Wo<3*pHHlq7=#&h)<-;6yp1BrRYV
z&>s@E#k9JKT<=;CUwXtO@nkqDA1(<~74kj1ep2bSLvzga{n`TP4@eMg2&<-%wyt))
z-eT(|ZXPJC_+?5VL&}Rcz5P)cCH%bolFwjX&k>0JbAagRq!Co%ZqgBY(_)DdviS-f
zbm5MsTJ;Y7;}r~~*3Pkx&osbG1XLW<)H+IKA6HHP%eu=x{dLVG{;c?bV72PXxZp|z
zpW%Nct(wfm{JZKIUyOZrGY_SfNXG>FVEW#a8Uf78iS|IE700!;T<8j=NSW75UPY-}
z5x{^CHN;=;3zk+vm)I7E5SB)mm?vAw(GiX;fLT#&^)BU|LSk}Z74o&Z`fTuuSwi;{
z2`Yrv$9SwWK=L}35_=~38VewYRz7pAp6Bq-9)S&(AL}1f7<~0;mBcrpDpEO(fr+AS
zEf3(;ZEcgLIa2p=Wq9v1{#xf}XCkp1bHV-{NpY5t%7pLW=T);#uep1G+FYu?`EIKg
zHm5xI)lMqlH?9Q@ocvtMKnE??)7If1a^^pgW$NPO{S1T0-tYJem?aZe4R#^&5w`Fd
zcS*n-zZovV*J&v{k_8Z9lN@g|(<YNAH|{L_zKMHEO4B_y-*)2^J)=v~4)*m$4zMs^
zx#Mb(*pLfJlSB7%cY0&_<S^-<j8Cj+-_p15&l3ZFFO2_C=WceaY2|I^kk{MH0Pn9P
z{+mxCtdBhzy@%EhQb%umB~KbEd(}D|O<F<qUDDEDuN*^GWR4y<$M#X6arGOOqqsN&
zm#R`8{cR&(BHdy#L63l_iDCimZ-e<<ii&~YP4C2@vcmg_i<&IJm^tdC9(Z-<tcxLX
zB6h@pQjo2ZWd!sCA+DAEA*CX(<YmT+es5iLyNJ_r=_Dy3BKOba(GO%ljIh@Y3_E<S
zCGs8-2Ffp6Sbk$NEDJ&;L_??6D|fix7I&D~zL=3?pf+h#C$-l3rZ#ZYW3MlR-!M>z
zQ<Y1bNe?cv0P*vuJ$J(>Nh{{Uc>{*O>TlAeVx$)5Lbf?AH}9jmqV&}NYCg(ogxVG;
zYeLDZ0+*7*{r~jWL{yCLnX1B5_|sL5k=8YG&K&ZgCL^xoH^*1DChRb~A1;Xmq4Lv}
z!|=@0gx$~$u|<cxD%{mjyCDlK_wg7>t2WAS^hx#eba_dr;^-z7s-=@iYx<ma0Lzq^
zSs@!KI`|UKAMws_?0!V0_X5$JJw~P!+&a7(&nu_TZC=t44lD#FseLd`ZCI&P=k(c0
ze&D+iKhfxUIA4`NQ4p0~X~Q|a(=vnV!$8q{M-f!LY&)m2WQP=K>ef`&bytrXspafi
z(qI0P30@O^Qo*~B9sym2fy_H*<{FK!N0I|^@Yuor3r2S~>9c_FOZ1ArN4RbBc6d|H
zZ2BDi8MAS4*T_WDN>s#1HDgrWCi5M($6-}wokA&P)JHS=<F=N!Uqoh;INh-D*T$Do
zEvQ4NaprDa?t}4&^3PWiy5W7Vm#%OZ^tMrIx<*}HD<hxNlFLXuNIMI_VN_$cJ#Olk
zozCQz1e_85u~DZF(oXC?Kfl$sfA}<AoK)!j=3t3@q)L%-Yyjixy`hG{U?nznp?(uR
z1zN5M7JB5`Z_JWVg0I0^VryoI=1bk&D+8tuv8V0ab?8!E0l~cIlV3z>*2?6r8>i;a
zsTNT}%=BA>E)T8>4^cs<>PuGeHTmn;ci4$KFY)=h6&j-gR1C*bIpLwr8oUn|8Qa}|
zA%cwsxVHZ3o3MGuhq*?nmpgvo;CLkxzbh);4Lp1`a)vhgN-bZvUVz*cxy)er0fq5O
zKU&~)tRTL?)*>JNjY-VxU&M$6H4nA-AOsp0-EarX!T=9+Hgurn8Hoow;Qv6J+3nXA
zsqGF)lh?YF8ePh;3E}TA!(U}P+SRsxngw8i(2EOA?ea#`z%F)hL1PwAxH)6su;Fxa
z?~O%u(kShs=j0kLXRX3mKz{i5l6gMRp240e@JkVO)6q3%dfZKG@Uw^~w3Q5aRBxTE
zA@rQ9{^rvp{(e=>*RFSr;G84RalAu$t2%j<1*E&fU4aj^qPkOt@adDrg-v3!{Gasf
z7k0_5S}cG;DO9%i%d#9pRP`W%IgfJZHSnP)iJGEy&SS~bYW{A{&Ccqs!a-A(TFItU
z<@1`7!>0thbOq)ji-ADg$%ad_X6n@K;ozy4uE9N3oqyaQD2{iD;w)hOL7-7A3vk9j
zY<O?8op5@8#sp<OUweD7cKoB)R?j!%nd-8Vnj|-Y$4YHHD_eq7PbRFU+Sjz%bnj7q
zo16!iWyYH=6)8BT82KZ*ovu7Bjw!-Iq)f>eEOnnL4xUZ1JAQ66$r9Cc4PCldwlGi^
z3&b8vXKK}1BhEq>uV`)g1YvZ@UcG4~;en)L5Q=<$g0f?*@Q3gHgK~JWn~q*r*zM+3
zE3lmL6;xhsU@r8|N}YZOA+Kz^qJ(nVE|ILGOPo=kQ~rKF54pZ69_3MyYC#vQk+>?d
zyw>k|&!miaed!OvAH01opc~cf`K#1!U2>s`cQYdYsmPA)1`^b8_5RrehQSejRdLhw
z^D_mz@-qz8g2ht>lMfm0C|biDYR3^o8`fsG?<R>N$BL~AUF1AobV$?q&MbS>`C(hb
zq`Qou;Xv;QC>NU;w=3J#6yHJhIP#!TE+GKk#{#V1kl6Nqh#xKPul2XW0=)vo%Nq(P
zc>m)S2FBh*xuQq515M*f;1nL>#kOnf4ioZuxb?daZ|fkeZfNrohS0@+LniDFqX8Bl
zMIc-UGrhLUXJMe8qnC8;C2q+EVJrt{PTm}!Ter=0?`3?VUelounFxRUWIr%@<`-LB
zkOOY-GOJx@qdz5`rpD!XX;)^!8Tv^#!3oiMW#yQERbiCDaetoNUW9P;{Te;n-ImZV
zW?5e<Ej7!vm}N>N-bq*0r*U-g%U>07N1_HvizkMWAL=#K7V6DcN_+H$D=Yxv+vN*s
z{TB{3*gTINKtPR~=`<J!ef)Sfxj8p`{Ub`I$3QC2(ePn*U~2^bQL3iX7Ol(zAh3W1
z-3Q52oe?#)<#+S~G!-&7^KusFNxc2qC$<znpM92*02nH<0I`w6c%Y<o?Dm)@r;vt9
z_lA@H@|)L|!Sc6SOyy9C#5D|5fv>LrW4_AMblL=I+rRj6-SH#DTVX~nEjG@3kNN=`
za^`ZhWtD>6@84p-n<){tWm6>FS1q-jnv*r&KDTlr#-pS%afAgta(9P;B=!|Is|xX|
dBt+n?e|!jjbf|vL_j8YaX5fD-0|Knqe+TwBV`%^Y

literal 0
HcmV?d00001

diff --git a/static/img/640x426.jpg b/static/img/640x426.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..8c9ccaa829d3daf36ce08ea628d16889cb9f3335
GIT binary patch
literal 7721
zcmeH~c{tSVzsK*HAxm~sSu>2XD{Cl?rLl&wGZY@X31JY$NWUI&EFlzOtXU#FB+8>w
z*|P5=JhCs7tQj$LrgMJhd7j_->-?7U$GMLCdws6!dwsw6^||iX=kvbr&*!F%(tZP6
zMtX*N00MykXZizZRB%z(0<CRjW}$)bbd&SB?(T^QQIJ22kPHs;_VYv-8tEg9Flc>5
zh^nHLEW*v*!zK6{9uW}ia?Kkb#!4Fpx`6q}5vC)I%uGy7EG*2dY;bnAqet2Jd3ZVD
z!U7^Eg$0C!5aRL@2r*ftkdWj#DcQ3M%F4<j66%_2iWlUSlofwCfv~W!upMRNV`t}6
z6crLx{JRJ3HQ;83ltH6l5HSGdhQPQXw0A%R00<+U_6P7^2LuXZU_8Ra%))w<KB0~a
zKp`*~lmW)b$iP6K9YOyO7`PdEL>07;@S3|Yi3PwFZztz5BXz3Z9JA>ADz5ZXU^ENs
z@e_Rf0;f((NJ>d7tEiq+Q`gYFgx1qHFf_8XvbM3cv&Xv9gXQVv?GuC#4hg*x7Jlb1
zcYlt#7aNz7`XDVm<Kd&s{DQ)w;wL4gWi`Ll);+I((a`v|<=y)at!?cc{R4wT!y}_(
zr0LHyvvczci%ZMv8=G6(JKuIGdq21!0QR3)zmxqpE^ay(lz{=p!1RL)0u7}bjGKW`
zRN)AZwmFka0I!(hZDzPma$fZt7NnBJ*JD2g_OTupSDrq#{sZkl$o^+w(f<(H?_hs$
zkpLSELQfuy8=$~ehh%;f>!BUS;7|jH8aULzp$7gxYarnZBH{U~zS1oZXmzlO`Nsr*
zzj5mu9>RuOWn7~Zj`F+H9!{1Y2pV9yuV4FtyUQ|%_fXsC`M1v3*HN1^Ah0BRhLKzq
znW*Nnrggj|KMqK%%ZtW7Z&&u3xc-rm_ws$6jfS@+?UhEKLmIN@BA*5&nfZX#V|OIo
z5z&gwYsMIRLTf_vL7>x|WiRA%nCm?cLvGZhv-Hp9C0Uoa-|1(zs8bi8O8(aHDn#-b
zGV~`xDUqW_y&&Vj@g5C)sZ!pX6_1|p8p=MYy4tdj3pE-vA@LQVn#@POzl~D<u^!3a
zE%~8Xy6at-_#Ou4mMIx9-w~UW^^mQ<pzt0)zrC5x6R`&4m4YyQKY<f{GP;o+N!7ki
z1FxI6kXk3a@~gJ5n7{iG9Ife3!97GGdq$>Y^RPiIbrYgv0&iZP)u(~r+m#kFGUds?
zsy(_*MSdXg8md%um9mRp%SoVt5jbR|&yHkM(*L49yQcMv`r0baBZ^f=i(dkSstCVZ
z@`V|TQmi5)hdw$^nnj%XXvnZ%{Y+a+Sgo;M0(v8Mi$fYa$MGnfH*{=V#5}j7uxill
zmj}ocmu`MD|000jvVihIIkaa5uzy1SGyXsKE?rr0-S=tX_3N#3PNn7637=UMgt!+<
zWeJ=#U{7QttM*=*ls-#=`}r3IBLIK_JhVoc`E|5+goFPqYHvGu`@GsX&a`2Nfd-_3
zU%8(|RZx5ldj}!g-765@<fh*8Y#G&F(dI{dK?By()mu!t9mPawoOE$Ph%DI{wpq`t
zxd=OB|5E9)oa?L<rFx=CMs*(Ms~(&55%dg3;q=k9N~V5=bC~rUvh_BB!fHYT5E|%3
z1H7u!`iwsfIA&0+wiz?_Z;aEkaf)hnwK>D}JpQdvgcs~lHfiVJ-fY{h(-ZA0=vOSh
z(D!_=%_-kU)C*4^7@^Rek!gb%23xLEAKBq|L}TXG9GhMxxJNz>|FG--ME8ns;NGj7
zDpCr4Ra5j#^oZ$YO$^x%B{C|=SIjz>Ubx&!<X};Ov({s;;Uq+70M)w7SSa1rJt!uj
zhI2!it_uw5liX0v<>q(lCu5qdhUKX}xVh4U*~bw~;h=7((}_Zfp?*K685FLWOOn4e
zBJwgRx0HP46gZYpG3jgW6O-C`pebXzJnic{X-n=6&oz28P(h+niZjwI8+uAtC862x
zUpi2<cRfvZw`OVJE<Rj;KYE%5ZW9*uYU<W@sb+h#s7Do7{-pWi^6neHMH!8y$Q8$?
zcoAHa!MHeY`o*DsA8tdH`096xs{p39W>2!o4e$+d%RF0N6%`8WMuTf*cQIuEI73J&
z2E%q^!n!hST;78iCeaJN-r<W+9!|}nIvPi(J|+m^o!JBT%8v{#AO|_ySeN7=$FIW%
z^_n}P6t-8Q2Tr}XAo*#^X>)%$f~Qv;<?XWBd~{XjG*wq_pFFaFh!nClEtWC1vKKZt
z*O|@r0htZtz)$-4nzD7o!pZzPy>d5GhM9}MB`w(`52M-Q`OS1Vyr4PBqN%1ynwB!Q
zCI3rzfQ9W%Y6jPq*)on;dGo5sQg!a02kH@#H5W&yK2>Nh7<(q^bC0%VYyMRYKT+PX
ztjt`UdQREYs_yO+D-MH@HWU8<cgab9!Llk;+lY42)Ikl;Gisg2_atlvrrse-3ZC?k
zy(5D8Df?;5;{_)QZarD2ftAlu8Yx-~sZlZyUq0H_)DkCzp0`|D!D1&C(wOUYHw`ZO
zyVGY4;Ehr8$iSKT$P=TOBagX?Ua|0Srs-X*>sqFP4R{t6MgzpSWtog28km(jx6eca
z+Hgqk*nb_+nB`Uhw<+!Y_a=02Csk=+yPc4RE@xXxjbPe@Lz45@rs``wDRGM{k9!l(
zj87`<zsKW&t$Jm=)3aBuluY{f5mWyWlEQu$z%A)(xS@3SyR3&-_earhIWsQ`PWTL`
zC=}~%p*{}Pz@W@+7r3>Ab`owN9_1xh3vQ;44mmVTQnzZNLxoFzohYpz{ye;4@L*26
zZK2M~%cf&Pv&H$rw0_<;k^Sa*_uA(M87b<n%Rb@KiREEC#*R|--E^kDl*m?rU7VP>
zCq_x;03z>(>fL?h<ZMI}ChYbyJ9<~YsW%3^{hE7qzTOL#J<>cwL9N`Udeq^QD2y#M
z0Hq%%3GTS5_5IxKHi8ni@sCXuCEtfeYUCdeVJ%3Z7dULspvt8>OCdMq$?S|3EC0IU
zTdlaXt81SQG^G=Y;=euHh?kG_)I{xVf%K4`n;|DsSU!=-la0Lqa6}X9YU8>^<Q2AE
z2Qzb`)OuUUkn!UE-0r6h4MTnp^V3_kbKusBXAQP0pPAJkA2u%$Q4oB%m#W2=lz&ys
z4<a(=kQv?o1;@Xk6hGbjjh^@sdpiwsV_|i7f#9xx1@L_@*2U8nBi$mFYmbE&kxwe^
zv$yurKq|Htn4{tUa<e&ckC&4nhnTcU875<f5lW*9FggCI-B2Pk9(u7Au{KZ8#@2Ov
z)#Dgj(4ub*dviWCY5+ZilmziuyIr(DnJ#h76O<9{vI)7mEO|m0f>c1sZ0~bcoC?cr
z;p>^{#W0YDUiD8R_1O|HR4JC31=&xzHqt<@ck|j<<*#vI_F`)=4O|=`O#Nc6aly}e
zC@lula^$7a+~3p*TL<HGOsBsTgBw>&=8{|d^ZTxdFB<`OR^n1RsTX|dflQ&-uAC_K
z2+<uM^F3ADt;+lcnR}#;g9q1LZ#^3*sm!0mH{5oQpFO+ZR074$ZHID}8YceR-2<6|
z7uj+|Z#Oko6v}6gJcAqGwro${m@+Mn(!eQitP(BXFe`1pmm7LZ8o$uBkG#EnlQpwp
z!e_1f1(zrVx$<QYg0{f5e=3;}?G(tp{PO#$QP}{&{R*l|c|M7vIvK>7W17=x-`MnI
z>`Q0KyTCxrqyQ~p71x!j&U0h?CE4pQ&s#mlm)72Fu5}1AC4`BHn3HNtVE4ZZkL-V^
z*U88(k-v%8jCh<u*0p<W0gunVSC^|4*J@{Y`XtXv-1^`q6_rYD;GD<V8qmOfN7UCd
z2h6>&twFD?UF*Se5Xk&SX!vw_q@RZZGIEYXjfz}x2#^18l*Lg<K~R5i-A=$tq4NgY
z(>yLeN|NO$hOr5yzj@4~q0O?*%&Ee!Oj^<kQ>Fpb;61gv^rRQiz^`{jyke*~>D^TX
zD@ch;B6HC|j~5NB<(V;XF{?A>!6B^^5*fjYgy6OVT$KfDv<A21mwHIzw=US+eb04a
zoTbrAhb*)XA&igILJ<JX_E?IDYkcS?Dz5^&5L{lAGyRipT9P_)I7;@$E#Z2m=eB#p
zL!OJheAi$nYlNp_e0u3^h~&TCq7~1Eo1;MxHu2G^+5~YUEN_oU%XSHJ&|l0X_Pp=6
zH`L%^D-)a_IXzk|!iW{j&BQHWvXJ=r@L%vE3HawWv7UZN%haK)!NKLS0#<M`%Ayy7
zhGQU(^QFE4rwe4nd1@Xzm+@$@E-n(8ec=_4SzkvZG1}z!CTKV$t8D25nW36<vSjIC
z+RnTu$YZr+O)%7wdTeAs{AYE-uwD{%<Bpcl<J3=+8s#tBCLR#(`YmAtYIS7`zCG0-
z;H`J36VGf1<P#c+mW$A))f!zNGLKT*4NQ4X1TMF3;7QKXal1k*3E7W@0axg!O4N_0
z(E8?g^H8t8nFXP|Z{^AurZXNH=^4h7&$D1Z3v!AzMg>Ct+O5ACu9#0>7f^Exn7f^3
zaWk{Ozi(zB-`2*4zs=>&;82Go>>Sq6t@cu^aQm(MWoCRTcX!S|qwHi+4>DI4i5$AC
zp-!9Ra|hp*BNA7r5ydpn?9sR<`DeuktH#-MGdgQ?mmqdN7w1RGTqViPHN=0Nux?@x
zQbY&1qPiN-3G;>S39KyfTaVx*T^9AcU=JdUHZG9{o@-X2((DFmOXY<O71RC_bZ4kM
v!ndNYUY1*Go0-vA3-Iv?|8ep7=Q{60KZo%<)WD$z4mEJ7f&a@IppE@I=%x^W

literal 0
HcmV?d00001

diff --git a/static/img/90x90.jpg b/static/img/90x90.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..a423e04108bc431a3a132d49d9e14d1ea9a75519
GIT binary patch
literal 1095
zcmex=<NpH&0WUXCHwH#VMur3+WcdG&!Ol6z)iK0B$VwqSMK`M;HC>_1P|rX?qqI0P
zFI~aY%U!`Mz|~!$%*;qrM<FFOEwMDGM4_-WF(<R6lI#C%24@BiHa2!PRt|P{c1}(X
zE*=qH9&T<PNg-i=5m_mDIaw(g83h$Rbp<6IWf>U_b4?usLlYAdd38%$3nLpnV-q8g
zA&i`yoIKn-61=<;Mv5|uMkIs(2N(o77@`=Wm>HEAm;@P_1sVSzVUTBFU}OdQ7UW?l
zU}R!uVP#|I;N;>4D%dK(z{JSR%*4XX%F4n5R9y>{XJ8Rz6;d>GWD^cdWLGK_F>0K+
zkVDyN<3Z7&iyu^slZu)+xx~aJB&Af<)HO7<OiazpEiA2^U0mJVJv_aFLqfyCBO;@c
zfq|8tk(pIoQd(ACQCZd8(%RPE(b+X=@|3C5rq7r;YtiB*OP4KQv2xX>&0Dr^+rDGx
zu0w~996fgY#K}{aE?>EN?fQ+Iw;n!v{N(Ag=PzEq`uOSdm#^Qx|M>X}<S#}BW{9`o
zK11`DAkbe-EG*0{>>z(JGL-`{vmgtrq9L1*V<3BCp|FxsBZr97#DyCVaw;1KeGpA5
zy2vG_V)9V+BgkuDpAqM=CbE16_ZY%ow-|Vs8G(_<EXZKb@TE#)(KaJ4jYSQl;We`P
zA=3^$bN;q|^OCSf8Iv>YGi$a5Pw;2pn_+KO9n4(Sb@bBuyyf$*oHv-LpX+;S-36O9
zqCefN6OYHt>Dnx}?EM<Mx!;mx8Ov(#R95_qULI6r_@-XyK*q(GBfs8Un|$tV@xIW^
zD>p^tce{kA*0H^xo$#ulyztW2l9zd5pB|liR=>rh@VLh04EgE;<vznH7VpoBF?)4s
zEMasN2>|1ecUzw9o?U(3YGJ@6mo;V{3!bwGetp^V#k8o4VR8CW=VZf4=2QR0PF%e~
zN#$JGdRgPwlMgI3Ss@%?e(=d}$26TI{WCq76Cc0pVX{5G^Xx0lJ6!TN4Yph|xpdYf
zC#EAMXH}j=PT@R9ThC*DhCvZ8UncMAOr3e3;iM+(1}i>>2gN_H?$Tgb)TPM~=qf@g
IX8eB>06*!ESpWb4

literal 0
HcmV?d00001

diff --git a/static/img/ab-1.jpeg b/static/img/ab-1.jpeg
new file mode 100644
index 0000000000000000000000000000000000000000..86bac9ce1de1c3e3e6d859d7d2473560b34bfb39
GIT binary patch
literal 8177
zcmb7pWl$VW@Z~NNBm{R2?y^{Lg1aZk;_eQCMUz0##aZ0l2^JgzVUfk%f?Kd40fO@<
zzq_luulMH5RCUi(b-k%qucx0Dp4I`l%JNF`03Z+m06s6k(=tE?fbrr5`U_MHbTo8K
z3=GUy#MrN}uwIc95aJTkP}07pp`@m!XXa(2XXIw2re+uA;N}w$5)z_i6PFSbl;V9O
zB=GMNAO<GptCz3Hu(8Pm7^oQp{=f0m3&2AMSRs8x2I2vb@PNp8z^6U{1pt5y{0G4Q
z0T2lpfP(r0?Kw#LU*!LW{?&wpjPkSuz(RiB;UeQcAG$Z3jocw~f1`B;6#5X_M`8o^
z(q78dalqPMVVV@{MDN|KR{bfgDAM+p$e#eJM_+5+L<}n_E6Pgc&RCpxn-Zo^QZ*{E
zB%tCh)#NQqQtAChS6k9VIYuYzfTv`j!}b<;%<(9N2(g0I7fWa>1rs3Tn1LA&8}KA!
z-R5!}gtmvVL1(A*bKk#GADiL5087VvEhW=uD`~u=*Oz8wBr}gm9A{Uw-mcf)9vMOC
z*+9S|g9zRxRHr35<&m?PiVWN^or1O!6<7qH6H%Fp9kP}3XoHT|vW~X3mA8JAc=@h!
z-khc4c2pkQAs@drFikU@$!df`#MjA-e{|ezW~1m^Y2*HgS@kZcK3N-8slSP5N|)Zo
zyaDF&Ic!wlTSxXhVrnV&Bb@syN9$`tkKLMLsSJ1q;mpy|Tw1lh9~)CXK3#H+gPp&0
zB9)-GK}_i6<Zx5z*cz@e@ohsHgFp%&EAFsvqVBg!eq{q7Ccm8G9Hl`rkV{Q<82l2+
z8T`pv&#ulgABJce{<7rl1IpH@l!5Lpk@K%k6D?<@S*H{#J8YO!5e@N&RAo7rs1vq%
zPTI!oIe41%3oK{Cf8E^nnOA8o^VG-4a^TmW^(64L+f}Nt5jYqPr@K2?5DE|j3^Fpp
z_HFo&3cRdlWOaCL0;SXId6s31BX^4h3$jKS*`k=}vl-ewHfMg>oHy0Cd*Z`(XP4e_
z5r>uSB);#&`kf*y=<X;ivb*c+lfGlGt;p%HOPj9b$t|kuBo{)AvP2fmRb}wWq3{(j
zH!&k6R|_G?2jbAvp_?0)3RKD_=H=irFNq15Y697*_JavTM9}+LHH<l>4t@-jL2V<)
zYQ7ze4i%KN{!9q_BP!zOS<rDsOck#~o2fxU=`gds+{E~z@0PehFyA1IX~qk4I$DSC
zm(&dFg<uhrlQ<m|gSDXElTFQmgHxpdJ`^J=pjxUz7`-gQip3V4?Fl`~_fk>9tQGOn
z;}m>X^TnOmH-0`pCz@pBW_~osS@nB^&5%;Ip{&aLOSu?KhuO3PhN{zw(?)}0ttRtX
z?X(7R7R+kx-LcSyWRhwf@_f6U8CI#Ks!Kt7v0mfk40cvonGEt6Q7>zb8$*$7j&~~F
z7PIH`xp)PO8SxD^vxT}&OHGFF>USGo7;C5$;t$(>aEPBsdSBpKk?|3$wI=I&*^c3B
zeQUa16d%2Yia|MWf=-z;53f*-ZAWe>9$ca;#hO}Vl%eF^!=-z(YUF9bnW<ZC&}0Ko
zzhJqri>M+)%>)%T$ozK5(O!t=b&%pP$g_1x$54-9Ie@Flh8ciLR1Kh2K!Ngd`-GzR
zc#4?Av?L+fn8gKhW7K(tszLs7;_{z}XGSA<oR+c^(_k?UoaKt&3Jclkd8$*L`pDKt
z_A_-bWS!NN^_5=Ophl3Rn=c5`%Bqor*|4g$(o^cNDmh>w+3Xm;oL@p){m#W&XVc~q
zKQ`ISXekI5R_a!R>!`>Lh?VVU%krID2z0416|`u}rZe>U9gA8G4y?%b`G{w%C(Sgq
z=`!DrOqtO;s1Ai?Nb$24kAO3n)$Q{LN}sii3HP7KA^nGE@p{HTp~FML$0eWz5z?Vb
zy{6}7cvd#_=PV#90IC89uX6(rmz#x;r}M{kMD9q(L?HX~qPQDDrPw5@@-Q@>&nG0t
zrmiJScif0anVjQ4w$o`2)`&T8L_7Gh>W@};J!2%U-&sJ}Y0D$z8l7<?YxNe7DBD(Q
z=Fjp$&0(z{<fWaF2mh{#BhM2cz9NoZ<(0r8jAo)y0&)9@-7*d=dZ0mxp}{YGO--be
zxn^*Iqe1;rtiryZisi_(Hxj<TG1zlkoic`_aT2m0B!7G3pG|0W=o7PNi;c5UUmDxB
zHU2YBay|h2hC<g<eA4&878c*VGHndB-r|A#=zwOA@U#}J;s?FZAr$S-zefXS$?g7<
zb60l`FBtIY_op)c9dFKXTJW)dh4N<j$IM|)B*%l#70Xp>%#Qbs$W6R8+DFet+o?{;
zGbSZyt?Mh1^y3}5$d?E`*!=J@ZWi_;>T3Slrlz@ya%K9j!%cPX=`GUs+aR#r0JHOl
zp|cCgW}4aHh3;6DNo*VL^{V^e5}p&0f$|3=oqS2D=t|FDvc{u1jY}heT<I5Dx!ve~
z(QFgKw-IxN=|pW_L&l2Y86(cWQT6IA54T{m%|A=oGW}EIlx1ut)0olsW@YD(2;NvH
z!bG<}PXRQ_6Fpcns)OGIoTUHo9=)$^0Q%iHippfW?MYEmQ??FV56t);F1a1f940i`
zBI?I)Z-fqatT%jf5zDnEYO04d2{q%LTgN7Oir2kQ0OaYkRj_pm2vk~Im5Sx-ZJ%44
zG&!>FTPnpW^gi+`-TZ3Bmry=E!DnVXCY0;OI^FgPCLF6*8TYBsL?NaGY*bk!6?coR
zK$ok~oE!WEkdSV^5r6#Fqv(8CEbgogKEBedA(=k84z?Y3EmcrJ3mM#R{`=j;v;<=w
zIX^J1+r%2Wa<lq!-I330@5H0?+?4XP^b9VHX8)6XD@ZUqD`Ip{^Yb}wfO}^y^UxZ(
zpB4mirx{qDF7ORxuxe6e!+FgM<?YWG$sUgb`iU56_6z&2IoX=NyTMV($WSA-{<f$P
zGHYwFp|k4?g?}f)VRG;sM+(Qc08tb~L}$!vo!#dgdiI@VQ{C(Few0!Ug_bl{oL%M;
zjzT8#2qvEZSP!opYuyjS2afDq^>9i+Q(v#gCtH76F3}8+58yb}_$3yWi|pEZD^xN!
z@GH=UpfuwKZWMez9zYBevzj)PIh#+kWL^e@9lACvdY|*5>8~ZwWVZ7<hI`xz$}n?&
zsrXGVBLU$K=&D$TB%zMIuYtHomB302Px2u26$7mYI57{6<6_n0@bTmJVLknW29XY<
zuk)_wbva#nnL*l?#%aO=-d#n_I@Bj$9z`|y*!=g7{e0tOCfxmfsX8PvhW2gNEd%LU
zF}LQ?3a=g^A}ewNh4VIRGN^xZ**fEXxj~paUF00F+_+z_Vp%#yMaQ+X=hEn(W1WYz
zWhVypek%7_cAn5@pAu8ua%jtRgi+-{UxaEML;StStJJ$j#W^oYcY<^$n>(nu&zE8f
znmZb^Hvgt=l=^Ayj|ht6u$@68E2{#{XaxtAGb|O61WMC(@jp@NeZU_`_$u!_nQ<CR
z&93zaHsV;5P)xD-+4~O)@Kk&Jd$qXdIsK`dBmsTjNZYsHe!^?k#-`%!ANTnc8ald$
zzF*ir0YF3Qj|1Ekl61^JzPzpp8+u8{-!l2p_`}-ut>5Jrg6~|VIV<ibIgC57jh$9&
z(GPp$?PUV|uCmpKYZ)2^FNJ|Qam`GNo!(A~epBdiuHf6<jk8+@%d{=_((s>ilJmlc
zu_`$xXg_l|cE6r=NE)?xIEQR?$NcSPHVI}+-5Q$bboST0wiZUG%kr0vYdY*`r*XM~
z*e8D%0JxRkzSWDbM{g$IVJb(Rrn(eXUU>reR|h==5BZ{nv<%F74SCoK9QJ1*-dyB4
zw?;M$&ao1W9iU}<pxS6Y3_0ADgFoPyk$`yhn&;+fzHmr7I<EXN=2o2NQh4`VddPfO
zV)8f+Wm_#p`m7guV5{*CcPd4<<n%<&7PGLX1a^>w?2YISxe4>}y@cT3t>f5+RHnA7
z54YSxjxvU?w`0yp!z(k`!#dwyDa^Zd&#~kP#+oj2Zu>7A+NQ>f{SFi*<+n(UThIAE
zdC9`*>v;fvK;u7ID9Xt9C&kWW(ryd+cCfS^nHzYXBja}EC9dvj@6Dsd!8V$c&>`Cv
zn!Om2Bzx{ZxN$0u)^i$=OVUtGc}f|a8I*nMw>8!$qIdOjAU}q5e6Ztk!5>pyY9&ZC
zCnl)&HoSqiCfdGX>IpzQ<8$nLT>gnL%O?LJ(dRAY)m4ngG`6ilU>pOAQhNDoe_7g-
zI9imN7Up*z0+veg!?(A4_!(H9a;{+=F<PA@*~apcA%~CYJ;NV8mS@Ki7wix{Q`<*o
z@~e)Esz&7b-9@E+vV&ks;d$Ehy2JJBlkmO7N3@oll<opr!gm^5bM4;KGU`DhqLzyk
zx;9p#>dckwIFbSPe2A{Si|J!+fj=UkfdY;ByL-YPyv%u+47HmIF~j2rsSb92G7Z{j
z%ynKFySJk=w323H<fspwQ+J*#bR4f2QXg@BH16Lw@0xzPk?@nq{re-ko7me~u-4(C
zvgg=-J%6~Zv}^2koklx|paA>g3BbCg5cvpZWeNFp{L93TrhlUVbkqE|2(JtFtAgeL
z``W`xUEyknyGE+u3ch5k5&ZIjQMLWC@&<yV5&UVp<9M^%dCm6;@a!7|ai3iS5Cw>Y
zf{cdpYz+SS20Q>VJ}pQJSL-#MxjVt9d=%b<x}M2XdLHQwLIyr<i-P~{BVI@XvKB)K
zS^xNCRVG{P#e)n$aVmN+GJ}*}zWQ=raIk<Ff-@^!$#L3SzjBVb2tl=~Jw0!;9kt@y
zFIHz_Q7v%tD{&?)P0l5F`1eLBFlmy2^f-2-wmf2sDgz9Hw7_dB84F*AWhEMNH*Qhk
zzVoC0Nn6_@slVAa)a9@HA%B%Vo)*Q@hdsy%%0Z^(m>431&A^&_7eeC(|B9t#Cvz2M
zR&>wI{IJ<*oM-9#Tk9;rmQPlFx`t<wDm=lZ4tidZ3S@A3^DcH^Oc9?)hse`rlO9on
z6{??zHh63D+qL#Exq_6B0iQ#sfqbLFC<DQ?#0qg;X28ThqCVHON~kwfPu<AVTjzQ!
zVfxAFxf^5i3z#c$yIs)=bs`y#V%gE_b!>AiZg=kFw)d@z#Pj8@Re!+fk!ML44}>(#
zW_l#;e9t}>#R}!G)%Gm3gItX&s$<!f%xqqt?c3YDr`qI+ScyO@`i<MFM?3597fAoH
z%z`jGdaaao%t1acDR$X{_3CO!LfwNrBW&=Xe}gp`k+FquD&$K(m>^*r#WOuquc`m-
z(kKX)@PYWln(t_n^3rhWo%yY7A0s(ch3Cz7VJW>fvR2O0%H_a_3C%Y{qyRCMDhLW<
zRvpMW#NOIveG<iKv&|9@GNkEpNnFz+z8+)2fys0WlY+{#yG)&G2-q;^lr^D6_L)WD
z3SGcoSjm{2hv-@La8|73V(Cs@7t%T~>&4F)p(w>TVhjFj?tbtpXf_&yu)u$d)DzFJ
zCJ0q~oUHd#mi~^3LIQjKAxT5N+l<MM{tCa>t&=QB7OSXegRLP!Pgnvy`dlTRMtg=b
zWeDL$4lU9SH>vqmo$NWC!k_Npqil4(w92L*0Ftz`v47J#UHRZnDAd8}v~@n%D?UVL
zXi!-c!ZPd-lVvMUQ=U+x_qES`TfJUxF!91dJ7-LG$~#+quj}=D-v<xBkBVQg^iqD8
z^{dz~ej0$VOC^0ELtuhUa|09!S(87e*epQPeQ>Y72YfaRSGGB>=ihp1+0k?uH~!*7
zjz^(m>a1sUMOiG7U3RgbGEY`M#(h1;hd_4>X_VJhMd8<bn8Vfik<!C#!fr8rzjB3~
z2As0PUvF=pp2>U;{nQw6`*RlF%=OwGTCB3;rX1b0e|+H?CEF%u!LRFb=I?0-uomw!
zeH+-xc{0fmJ)U#8zD(Y{f}=)-t{favWI$G^9qd;LPj9?ts57e$6_Egvd~jRI`RcVJ
z32zS2i7U3W%9gvY3y?&Tl9r!;$tt8XrtvrTQSxux`Y&j(?evQ9+Zyg>DqbrGtj@U(
zG+3XLDl|S#FfO-5-EEpbpJ@;?;Zew;Ei`FosRQ=FQ$xesb!r96bSUm6@vmK~vu$JW
zWstwQ^6(?DEG;cFN~9=yKWl=Y#vq}~Q|G@YY|Z+`aB`Ip!Kv9lb`E8(lGjp6ws3Ag
z^*8%`7weL)`RE-3q}J>oxshsqrSXHF6a`Ek^aRi&m*|P|$OdkavSSQH#t1&JBPS|M
zzijewD^_(B@`ydew+I&#n!!Cy|HB%eAik9N&7J=J@z|Rmze;$rk=9B#oI=!o*SHIj
zv~uf*eqIgXh~tmSU85G9>{-=X`*<NW80|fI9OY(Kik39F4`PwPN2(K+IO%oy+NDF@
zc=l{sU#Xp&dop6vb2;7K{)8EABHPT3WC?hy5ra&#j>Up}?GA?3J<U|Tb`?weoj)<A
z-pi2g_v_>*7X*sk3OWRD*Vhr4)0`X{Ud1_v<}<`E8mIjLb9jr!cir#dVTCF+*iu*!
zeKYyFJ;)2C$)F!ySF$oLVU>d!Z|fhBt3sHX-tRG&91KOBSag<N{t%82qa8|MT0&6~
zsWQXf3hg6Iy+9ykDVf<TzUw<Ws;Spf42=T(__#8G?r*|!gr%#@X~F|0o;Xh%Y!dxW
zhLO~rp3p1dF%t7}LW}(1kV!s56@zGnKEorE**(zv(LFY^gga*ZeDv)L(JziQ*B$EO
z9BJgK#Pp*?Ytwg@4oqy9DgEP?q|<r{%(#&YVlBO_{6$jbCPtx433OzQQ{JLq{VN9(
z(SzytQ>KJUz?w}iv{Zjwq0nN}u;I)8FX&4Tyq{PGQcgDFHlu+z5m&jY9}FlqA78aP
z1+$!GaD6Isz*Ez;R|(?vOPEeV*WE{!yX)#ca9Q4Sg?JDS5M8tk5tL(^tqEfo8P9)z
z0!XUmJASti!b}iLcd``4&&sG5c$bH%8dg|H`a>rof63<~%@2AO0X4XLvN=Pg=7Wc0
zKF059Gkg=`F4r!qVryQM-~sXeZdJzfxOdi&js($rkGD^NFtMV<qBZYKX+@e&`a9b<
zgu{X7x$3%Dh7yK7?@vv@m0^p&Tf*OKJXlFd80ZI^ssON4p;~Rcd0H#hLv2GU{2SW(
z{V>;SOL3v4v&3mKTrEqEXpxq_NCl~nmPT{34u>SoWXkNwUme!ScpqKL;3$+Np%pR`
z7A%M*$&}#zizu-glL9<zjn>R{*AsXi#Le4M2LG-2nvlBI*L=k*(qm!M)4mK!w_$-M
zbJXdHXx5e%y!U}zbvSYoFU66R<!@A#pamG@4!Hq2Sptlt>dmrX$2FpOEwh_jv$$Ay
z{0C#^_x$tT;+&SuT|e3Ry8-Fq-3KSi)~=?iX8mt`+Q*lt<NHV^07D|?uilg`%}<>^
zc%C&XB|zh64(}Z$(Whef9-V7<B1;CXoa4Re(R9?Zus4<K1o$JNU}#aKj|TN3?WgN-
z?Y|TRK=4aozkVM3RHr%1>%C1eO*u<kxcdu%+;CQTg4Ev#HHAO$7ij*0_1ik3EgYw}
zh7@R3DMfVB6yH`ZzRd~JnWLq}q|+$^mv`&OvZj*I1;xc0JMU~3<duI$4A2(H(y=i+
z->pY6;gX+Yzl~@J%seD^V-l);*A!(=+ZV&WE^>eV@lA4V(tgs<pT)6fO|8I4Hr#@a
zb$rcTE~G_jq}$OIZYUiWuhiWWKujiNP4H?s?~m`a(#Dbd^ydT^mQ35<J_RA-Kb4gD
z(GutgHvu|9xc2iC;oy%E)&27JYEKd+czUJVb-qfz?=oHVCk?0nL$E10&=J78?_RpG
zSIHrIU$06O$p*Dv@!w)PKK9&gylDN_IW+qD2|&)*fk%HS&h(Yk0Y$g7^@P^bnX1>{
z8``IGI2{HxQ)aqIGAj1I8dXD9CrGJKnn@U8yOy}#KYF9AFw**g{byi<lWvyE8xxkU
z{;jHPXY?p&Jx#+X;|s&9gl)f*<Ij*@ttEBN%-A#A^Hc<t3Ft_ibx5R5y$nw0Qjs)$
zW3`1E%}sAW$R;Iik(f7nq~YiR0JuvHM?|UvBdjA+9T~@j*irI@d5GT;TFoJZZd;vn
zyj<9PA|V!nh8Lp~%`Z&d)ESeDEh79-YVpFBih?<m-=4Ri6q2F2(9w8bN>#%pUshH?
zS0`#q;}l(J#p4&S)LSoC3JdH)W$YOng&}|8fe<{8iG<@6OXlX`NYrE;R{erGUKZ)$
zF%SGKe37tUtcyco`_AHL$pv-W4Qql<jKXw^5Ya6*{p0O}Q&~#wvR+Ru7P>34Z)_-k
z1G856)A0m{{(gVWD;BF`=27}hb&3IQT(Cqste^6b0HyOnyT~83C%*;X<*9isSDq!u
z-qq2NjVYS9Ipewhb?;_!sauwTuI0#q7);MPfK5FU%)|nB55GkpJhct0b1ldA4&z3&
zBE(9|Cgk@`peDU%38I*Fp0RD*?8}(%hus+pw@~u}|3m|NdxkYr-&#7?yo0D{UiI?j
zY*Nav?POu>{<Pqq(~d<lphTa5AV8|CgEHt9VMd(1>7Qu?S`wyF)~~7muI=a#s)O$J
z8}Kk;Iwx7dP1g;rvWnof1q6uCi>XJR<MS_H5C6ve$~G*u`SS<mKUo6M2pOHw^8T@a
zhf{#5En^86obb-Hz!>P&ih-XNQx?o!<7BDlfk7SrO329BTDSS+Q&LV%g=*ZO?qN{Z
zK<OwR@6g~+J&8poa40~|V+`C6;!NRv$l#lb<RW{+a_cem!1t+UJMFdpElG+GY|^)O
zg!&8T&CrYOaC_=FAG`~Ox>kw`Zj)S=@OQ08xsRO^2Ke}Wk1aNclJhmv5zS%4)VvgC
z`e+cxS4vSMDIAq#P4!fkQG_C8Nop(sQU2(Ffb<T(Wec$|3p?GjvWMU4X$jRP<ERNe
z&UQ|M(@Q?*`cS3nPTY$vSiIDqhk9tSFld+XPEFmjh%0z<&r>oCHH4rNBJe>;upbo1
zhq*$dS>m5>JQ}Q=t-q6vvt6}v*5mp|6-LKbQtz~G-05PtCCu5A^JW}%%A3n}#+4Rg
zEM5dsjP>!HHAke8hs|j*(lo>iMB>IQBd2z&r0kL?+YZ0kWs^#*(~D@CV}s^S&#rh!
zY?*{E^uJps+``~6{)u{SEhtps?Auh8v6NUj#Ks-!I~*|y(-aZ8y7UGrPO@4hF$%h|
zmHlDA>PgY!Zilsk@aKso`E|o<+)LtU&wfjNn^+$`{V=#cu(pmwp$}uabN|*dh(HA9
z1Od|!%x1IqY&l;#t&)jN^pHQ9%vUA9;6rN|pU3?@LM&i=HqN$rK%obB?pZ|dsKl=u
z&)>I;s(ojDPzKUJ<}{UcS9%>WeYi&dOP0>LOD5&vJj*)SZvs6ga%Jxc;P?RY(;$<l
zCmuj$ffWWVXktN##tB>PSbtmV$CbW7wu-uAGITJvLl_lb{{8;eW#&TG2~HQYK&7j3
zx^6H1E}rPoH#&J|Y#|*{cd_Gih<`IWiq?zMSL^yc_eicrx9-}?lBxbYPIzh6>GTZ@
zt}ts=n-eIp&>EBw7peJZpWFC2UhL1`L@K}R$YC#{%D5M3W=h%gO9RpM1#Nh!UuTbU
z2D?y%_v6)fA?hC!7wZz{#P!0@=5U$f)VktYl3r-bVSYdA>K0Vk-Ysm4{k9M`F!$id
zVD+kw6z(LP$_;t$c4?kl+kZ2@|7Rcw#KV0}i^L-Z!hic;TZ;q)N&-wUw(&Fw7k8#5
z3ufmSF*&6zAo|%H(g6~$PWEy3xWVB)`7e`6uJ=l^Bb0E&^vAd3I}_ujMG#sI8xXMX
zBei}Q$Vy~rKa085d2wHk;F_PKu+KNCj?O}Vu5dkV@veMZb~*bHjw-~rUT<-+imO74
zsnadJo{KX@K-AY)exFTW2ilw3^30kOTrGugw)BsaG!_IUtA;XH>}<C8F~B`YXx0m5
zz@ZYjS+p4Op(GSgIhH;_BWsKEuFReTS#tb-X+Mdi{nISm*o4<vvuGe;m{{7}Do^N!
z`_XKCd^FdjxT>pJ9bvjJmkQ@E)t0OoiGd|%zZG~At2^|jfBUcMqoTBX>1DLNGJU}|
zqIo^4-eJ(UtB$1OYdcD054JU#yt<yQm@IL1=uj_iT7-C7&Sb+a7p-7JL2@x0YamV$
zZA4*9(w1*A!p%-)?nWIw^g^Pq#Y;*}0o)QmaKgF2=_nRpx60L*VkFxqZNY8C-9=!_
zAK6P_GotZjfr&{=glP@jq9q8zCM<x%FM^UDbS5z(U*Tp3vXhp0ClU13@m;9O8Jybo
zh<9)oKLKFwG8^KDpVzx_I&>e1YnAV}{zPqu!_O@?8=iT8{g3zm1|<J$HuCSA<C%A!
zw@A+)9hy@A5&xVZ3FzeZHOdr_4T3`iEd0_o+`avBbVw?OX0KD(bqj78)a3rCaI->c
z?bpj8irGD>%q&JGIjSAinLz^Z83|TQtzcn{+;ZyTGUd3lwI1612&FpO0=IUEGLv?4
z@lCCLa$6l?F#*e}x-P#IR%qsn8fk*!rCV<HFU=%4I;_6Z1j`6`63ID3STI&7KKZ8A
z9Z4b+mo9T-F|m<GW^$v&Ox-pf=m>&({pJx#S`StxH#<xA1Q6VjtgAAR1&M`nN%nn~
zmQ^@l=_pOSb_tfYFu^r_MQk#ua$ZAm%{(A`brFW(EJiTB*^n^k-3W|{jLtAF?&Cf+
a>zvOzHBz$}e)PPsfJ4D`mVXqU7XJrB`G3Oz

literal 0
HcmV?d00001

diff --git a/static/img/arrow-down.png b/static/img/arrow-down.png
new file mode 100644
index 0000000000000000000000000000000000000000..4eac5cdc2bc85b050a20e5f012fe57dc4a0e9f0d
GIT binary patch
literal 771
zcmeAS@N?(olHy`uVBq!ia0vp^DIm<j1|$m}O$`B3jKx9jP7LeL$-D$|SkfJR9T^xl
z_H+M9WCij$3p^r=85sBugD~Uq{1rg$Ofx)P978JN-rm{UB^)Tx{&7L;T#bmE8TqRB
zToTHkD|-uU6gbav@KCgYcw*+taHWXM=eivWTF*8qa9K^Z%@3H_`?+-Ay-K+sn{zf<
zTb|TU+#M?*hzicG(=j%me!4yU?e<mCdh=sXes<r!{q|ec>R_9-*I%EGOpJS$`gQfc
zs%h(2{r;vmRrKhyxVRAc^7GqG^0Q`Se_Qv#RO0KyIP><&sjgo)+kIjFt-R`1;*@8v
z<AEyPFLua0d_z7+(M$T+zn^VxmMw~xTZ%ZG#dwx-xA`!8iSx`XpJFGmX-eR)gcExf
z@*JG7w8MzS`I$^APn(YF6hjH4bdBJI6G09$nUeP}sxsF+HAQ06j6k)c6MS1QC0vo;
z9ln;|sK{`U#lZ=^u7#b7-JC}?+j4lkYIlgQ6`xySxS-<ThSm3<<j*$WUHc;M?Z3P!
z&)jdb#_Fha`SV1UWxc!A{yy%nQf<cW8LL|zIGX}zY<~P$-TaN<uJWQ?JA?m!dcLiD
z*DU`j1`=1lPfnVATltH>wwFeajd`o>p$}UYs`M&mItDf>F6~>y<?JQus@gV1sw;~}
zQ*=sXg2%?iXSkfZL{q0p1m$RKJ~koAk@0cA)8dAUK^jx4&L7;dKtN;Pbe^^)lB$+G
zp2}XEBqpg%d19!-tC3}}WJ=(bL=VkHD~?VGatiEMT-snH&7+w%<z}MCbB(Lhw~4D>
zN$XZT+G14Aqsb;>@J~~POF~?PiM8kd6Jge#zMl?^i_`T24@k`57BO%$Q}t?|IJMuq
zI#cSFh(?0X9SIQw8B-Qkp5tE~84m}?1|0ZsM^VIp>1rF3+k<m~XVkkt^7e38Syff-
p{rR3__0*lI`ATS@R99?2BlGG_r_VGTt^y`p22WQ%mvv4FO#s&eJURdX

literal 0
HcmV?d00001

diff --git a/static/img/bg.png b/static/img/bg.png
new file mode 100644
index 0000000000000000000000000000000000000000..ce5b63e7b47278c598a1387d7ce2926678bad52d
GIT binary patch
literal 9855
zcmbuFXH-+&x9&ljFTF@7R0)bwrG_G4sL~-Iy$jMyLN6*HAX24600UBj6e&SUsL~OL
zGy!SSLXk)j1O)DW|L5yDW1M^Mha_X{v9kACd+j;rGk?!cFx1ziq2!<>A|j&E)`A)X
zzvuscZjuAv@q3m^L`1wq+E7)~;DVnvk9~I9S+LiM#MDIpWZclJP=gvx5;JC|3cofq
z>O1?{5gmDNkxj^t@!^fRXhGy7KDvdGi*4-n>~1F|dGx`zKScxzdvUgtZm6p`ga{0Y
z#u1C-*x%4TPZ+a@6Y0XqOGxZd57<CNOvr9LQ4XG3gQDwy7}}dNrVOq7mbjHIcJTL5
z@W=0<SBOxCTEaD@Y9~*>=D){Y_Sx#X@+>XWuu+>ZRO?$3oH$0-Z<F^<U9f%U%)!%0
zAS2?%m0t%3bb$9Z@BjGS9B)?s=C})f;ujqP|8%b32)SgmZS_7p5kO6AzllaR2PMn8
zrnO(LcO;68mPBhUMSg~0gNshX9*LlwG|RsZ$Yu>`zX4mhlE|`^@!LkZu2Zd*<Y-cO
zqz7^B0duwU5*}Je3D{=2fAZt^Wsxk6lhoYn+0!UTZczL8Yg?m4JY3U<D!rNK;QVTw
zeXe9$`?k-+A9w#AOZu(Z3jxO&YCDljtWG~oB7lhiD_YvOdxdkpSJseH^;=s{BF9OT
z%)|wl%4sD8EzVZ<??rB|mAt)B%^TSD+4?H-WKX>j;$pnGfmMb7jpEvKulfO}$+U?}
zzX47oNNY;ud8)JVkdcn<UOfD$FQ)U;<SLoU<bx!x$gZP6XH3|)g-G0iS8?yq4KZx`
zr|fN9-@_EzPGJS?Y}Dzg-Z7X~9?hO%6Svf$2j$Vj$b!F{{Hc6@pt56PGMY8vrVDqk
zGJ8S8IYNPxm@`;))#z_mr=qZ7IAoDG?F@kr%Fv%v*YGke-m+c3-WWrMk7MXT*8kpP
zMTnH7E3ih-tL%icAP-%5#XW=7a?CJGzvjK2PBGLLF(z-g%9b?K-RhKG_YoK*(+nwo
zI-|sZq-+*f=J;(+nuvW;&I+tZqjn(&k6>AVpYQ<}VGnX{O2Vi7p#~>#S6?~)I8{6D
z7H2-#yg#%3-uF^X#11@*t8_W^m}k!I@NLYyt-yrs#^&HReZ`=5;LZfKZpWyj=5BH9
zYa%08u0{Gv?JU<G+E?2If~>2+xK{x_+CeyV3b%WmZn<=sgFn5XmfUtufH8j>Q=*UH
z2Kiq;25v%`f82pl3xnar;1C3R=S!ns-2)bFN&RELx{*K>Fq<QMYApRP5cvF3Ia(Kz
zw{OLqA?_t~?pDvdd+fh<hm+dmqpm(XUzJ8l#q8DD#^bYnFv{A@^wh7eEwpZXZ*6!c
z_!jDd`av?-3is+)-rb1;Qg$u<Ly2*s!WTNW?zP$4zDU15w!x^!OOYI5KdhWe9*LlD
zSZo}q!ehSl{Be`^dn&H$^P|Q~D@TGX51P)JcPufEy|SAZ$^66{(k{=Le_H;_q;hWM
z2(0#A0=HUF;ZGxP$3gN>Jzh<p`1iZk-kEf#tzUJ<(y-GN@<@`4Y+KH!6DEIh-}ARw
z{>q8sJpHUO(?2Sw6>v_iuHOPCs;smi8L(!u!b;%ykcjtUTC|*nwk2p`F%PB=FSz`G
zMdo2ezQn8LuixF~945&*7b&cnY)&Lzyupmg^Nz=O-=_y7YM<RE3zVA6g4nv{6@}mV
zVHCg5p$oq_O>Z*LGUuH0AmTTlvVIoY|M^*sf*yNmQB^#xE7Kmz{v)el=61{j+$AIO
z>GfQU*fc1&h+bD%dWqb$VDM;kx9jX33)j@0u)C!<9L=fL){>At&{Kos_P^nizhuVq
z1Hf3AzI^r(Ri^>cqv^-7W#Nu~kiVQq#qc=PhXUu7(o!o2NmlNa$cpWfaRm~T%THZp
zU57t`#eHgR6#-w&n6T6x3Et-`s?5CYz0hWg50Bl7$HnX%k+!6V6JDba8OQKSbvRy9
zo4BxQ-cXy&n*+)=VnpAm+&3i8XoBW23%*=gua0u?C&m0MGtX?xteFfodGrTyzmt;6
zlONSELkYj_8rtnXe?_Pn`*Tgk?Off8e0n!kswKLA0yZWXDl)x%U^TT_GCT0koh*Fd
zGVHyu$rmOE8Iyk=Xt7eHZCnVPV)dWYN<#-o)r|Xg2_HuNxJ~_Bie%1#fGX@6*N`}F
ze*$6jejR>GwD>W^(+uqRr6XQ+U_9({mJ=nd=iFjx^7$ZJwiB^Sib=;KK%kC<nrKwg
z$n*m#RrYN|KDIoXy-~2bMmW6<W}Ntg!C$+v-dZXc!YVTxWC@)<@MOkmzV#|0^P_`y
zp1R%<0Lgf0Dap~;EnnMsEouFp&h@d|?15mve+W2R;<Ys?FAy$5a-Wjd@tIC%xHDmO
zw(pqxT9D@?M7I4}y`6E?xqY`5=bV4Z$w_p(R5->m(7>GV&;7TPuzrrc%`$m{zoUNb
zb*R89ai+G>t9hu;y&QaCnr5qFI*DohB$M3}gTrp#)~*PKOCZnAZ29ubA|Ip6wsL8)
zk=WJ~I@s)DsZ%L6LjPy3hE@AM`li+rSLGDq+wsVHbBFvDoi-sFAENmP##aMo_julJ
zv7Sr&rv`x%SmiE#NlD22V|Zk^O1e{Awbk`1E<D`)6hzT>zcH(PelF%U9GvViEUX~d
zX5d<|gIzC3DWjE#ebbd;Aaa#~cw=-U?eyO(Po8hU#+^uRnkaRK+c3|VOzUcr(N4NX
zBl=a%<eyO^&n4i<?Bmp%{VK`tdo>;~cUIrXE-jIs4v(32R-3$-q-QPlS-cpuR5O}=
z*Q$Q!4cw&fN9pfgH=GL7N9Xy>scaS_84DmkrPc2%Y$Xvd*=>CA|7Z3qY&vw98Fy4F
zEV(I8r|yo~pMSS5qVqYeK^3w3-b?Z}iz)ZtYoiO>s`J+lAJ<*Rn?7#9Y6%0juTJoX
zh1f{tRbD^7pL$jM2j>@P@yByV_%4sAW0_kLzsN#ZJ6Rj~rZ&!V&^x~<rD#T-CQGXB
z45kNlQN`I5fJ~a?U)b~rFo0;at$u~*Fp$251!y6lRC(?tpT>7De9mRD-0uA&Mdrjz
zi%i_Hc&XZD@cN!Yw)ENre*z>=Rp%{sw!d36ptVOf`r_*e46zb}4^h85Fh+N_&~mo)
zD=}ed&PbFYO}vzh{hC#LFs_@DAv{9R+R1pI+=BgNQkc*YcY-MEV>r$9DxHRWJ9^(n
z#kP>BeLuvNeEt?BgO~!gWD#Zs2!a<o6{i^0b8@Cd{?sfh*~q1tzBeTmh~;Y0)H_p~
zdUe(RTM_hsp_l%fp)3EXQ7`+HtEj8c3a?rhyB)9Vyz<znvwby=fowRk4p)CVRjpAD
zvy{ybq)U=@-9j3(Pro>s)}vJE&kxwh>N<T6r2k^}UI^CNL;1-b@)mKE{_*ynKv=hn
zKjRVJP+R9=Y|$LK1By<zmo{t22lh=|c{8hS=2>P^i}(D<2R)S{jN9+FtI94C&(2zD
z6y2+5Cu-o(kP=q;z)MWUakRruBPN8it!8*p1?FV>o{4UA?lde{g^kCDbV?Co9r5b4
zsimx%9)v{$`e@CaO)3TvdN3mrqmLSC-Bg!eS(tdB<TJ^xhZ)va3>kkTDsx(c-9T8X
zTRH#j^emAgUV|2mDc7IWU?_i@cy-S@7Qe-tpePa}X1;aJzSMXqV?tPWTy0aaEeg1K
zGd#IQNruyeO%U>Pbx*Blf_u6~h{5;+4H(MC6FXkh2;^!rsmw4ig!IJ@$c=(WPHgu?
zX*N~@l>)XZzfGYMIO`QUKXo{F+OTp3md*?l3T=cW@T&q!4N!pf9}{Pn&58!taBE-Y
ztd10<E(1agme<`U8@_$I#xempra7o}EU2i*08obud@`2E8nqFry>F$_9~e+3oYnX+
zKqCT*_wn>ASu3Hjn_fNdkvsX;UZGi{3=!hGeL&4+V7x)A-!HEGR3>;1GSK9<ui7r}
zdL}5fck@frzML!=qGg5&8~WIb2pxiXtk|O&UE!+}#lEUF-QuwQeHY(Fh3_o?YC%BC
zF2`)X>|1)Q3HwuQyBx*TvA$&qp8d+!qZ!DS0$$LS>rpmXiq!cD|K6Fb0w}g`{OZQ6
zAEA2_B|~PP^BesA46S%(OR=953;SZLNj~vHZfj(c-r}LvdFw>XIJo*qOZT>&5r2y~
zD{Qykcj;>3W<}$x(*B0H1Brz?I0(IBHNE8ng$L7(lveBTZ}sUMIoA8{8IgU1h=P~M
zaJxEN>pwLYls!kD@K%z4rd@MdeJV{GI2Xa^;01Xx;!n07QnDK%HAmU1S~-K=pRZP!
zNs3R7yJu2zSo(42sGSuT(%mgSZG5Ds-~J_R@T)HC>1Hh(Mce2*OKEkEU0<Z_2e6T9
z{zM3CYfah;S;D_%bVrGw`A?y~?VzN5CZ!@X2Lnh(d+s#7xhOw2PEW0ntzsMQ3aGVr
zRau%<p(IAkHSyfl`mz{%cGI=RnUBRSta^Lic~F<=y}HVg4vL=SXq(Lp;DL}GmqJE3
z$7nX9M-^jvt4gY+`CF6cmv*lqvv?|}3DdDSK!DCKM)xUSbdHfal6(Y>1gRfG3SGI5
zn$A4I{V%;&$~LK#DJM5MXME>4Vv1kBGI|<nl#r5ybt~9~6nHR!gkO783g3JTVo)C<
z%@OycZ#}I%w?=eBeUw?g{n87asB(*fy$i4r?yG8NMSQJ{q=<U57*eeV-}Cj7Qxfb|
zk55Qg3cnAR?m<ud2EoW?!k6YzANL^~lr&$4j^doU5X+S^xQ`@FnRpB<gb6$M<hc~)
z$10|v{ujx_R@v1HL}=wt0X0R?_nsGQp4NJd@f-{`(k+v7aSbs^|7uHA+Y`L*@lz+G
zz&lze{sMVGxa9Jb;|nqU&(Blw4J+XxZ!f<3#k^(ImeyPDlf&5*miDwfHGliz=n9M@
zLseao(@7yB9l8YsIikiVZ+a#Zr@PK<3obn8_0?s-&R$Q3>i#KsQ?=jfaFZ!s)^($}
zerG8XRn=2*OK$7=bxQQ&^pnA;?00Xo7D;{2hh^HHB_vy)mpx7Pb1fLzYg8P#sjxP0
z0MG9ew1(PNfb^tOTAfl#c{uVCWnCp`17$bWkXzE+wv+$-%~!Fte%tGDstQ*uPm+M1
z<WyTzTH0vUBvrgci;#H8zezE7a1*}oAUcIOw$RS;^ZRt0VE-^sV}T>K8Z9izor@2V
zp3duviEF(X?>eHb3|BG*QOQ?Ji-9or+s#Su-K}#u$*$}+6QQ5ITPL&ItpvfnyUhLC
zq2ixUu+3PHF1SRG^A>5{8}6yH;+q|Q$3l-Y1Kkfk*+^Pvplec;#BJeJ<x^l1Y-JW2
zmW}o1!_>Qvh4h#)ffmE}tFiPxV{;nmuA%k;AB3klc}%_tWQj1NwHBl2_fdC<!Bd+`
z+(>-ID1U9`wr;KMrCa?McMyI(Q<iM!BWtyoaFRpYq>20ST%}hLlHyD(-4veE?q<U9
z=2qdL)vq!GCKuX-f=BeCR0f7yTGNv*t-;QyM_R?wY1XC0jDES_3zwop$Qfe~aM~G~
zTk#cp)Me#U6I(>a`6o&hKcF>hpBpW8C>@BIoZ~K|Q=|U|?O{akRZVC+yIMEJQY587
z>L%)MCMsJZB_Gn~1y1aU)a3i_Bv<LI6^tp@43`Y$sb<!}kxqmCuODra9p9bXogb@n
zI@H=Pk#m0Am##^fBbc+N2@VBXcm}JhwnTa_q+e{mR<HfxlY#tz&7$<(-ggDJlFME;
zK4DeoWK|16kmlk1$JN>We6xTSe%{v1ee2dV`H_Wt>zLd|Wt9Jm5#Vg>^IGtmQXgDW
z%>otI2*<@#)pQg9ugG;`Pv<^q_N<Zel5%f<@hB}xkv1?Fo!I>%NyCcTC``mQid8?j
z5#8K-reZOun`|bITTq9;5t$KGjuxPiQ55{C2yx527bhMTd1jnNL1Ml``QV;N?l705
zq3hwE)f7f_p+)5|>{-92N8E<|ia7Y&t(}(%-gN$r&&>=e*PJ%RzDmQqwvfl?Ecy4%
z^i-kxwPQh*)n8}&if?c|h7>z|MkmN1dc^eX?>(-o4xn;WV-xgwD7%Z*v3Ls0!AX6<
z=wbN0jGU@oS4Y*V{Hfd_gu`BVJu)l4H<2}mt~Y8WtnAoS(_?2lYgz%I!C56(G9;5Y
zx8OPS9X!!6)=G-=qHtzxMJxOjg9OY5qISpZ=02@AnaR+2Kq=fZAHzYFhZp6)j)Z&h
zOG2HL#q2PnAg^hMdoR7ScoB73)w#1l7ee%2B!sl`%sJ)fj~tNr<M(dY(i|EpBYe&@
zu?GjkM$NkV09Wx;7xU*~)5FX&E)KA57mCDTjGiXr8_!x<*PlIUEW{>m`D(!J#dX!|
zzPUPQ<=^e`NU32-5udYpUeIhaAX?tj)nw+#G__ueG|EoElE_IGFd+{<8E#aWtG8bT
zF44@874{gYHmvS67P{Z~|AJlrjd=T?xY&O`RH`3fF?&?|7cFd2_9&}=VN}yQ$%Np5
zlcju5V1@1Si9ppqe>tgt8)HTM;Mk$sOY$djh7_O-*-Eo@-vAZ`5HDO-j~5?P=v0*q
zmlPX(t|K>%?jBUrDOk$j164)zsYW1tsB!V(=yZhX#Ip}_DYO89vJ<kjZU*%yc-L=;
zoIie~)XrKj<nz!XTlbh$mWG~s5n|IR5Q<`z?&hL4sot-ozNpiHGuarb!riGb$UWf6
zcng1mKR92ItIKt4-@vqEh*8-QDbuHcE28mByLJkZ)?zyl0$oGj)RVzfg3(O=cc~nF
zXa2d#pR)z^lTMo8+ycuMWx^{w_KIgNLaPo<Fwl1E)o?*w^y<kSJbVdAii>tHhPXEV
z(Awq5`l@*E=onr2!+=EYE!<8<uIu6H%59ppl2cdm{bW2gvTbM#+8HsX$$Ne@k{ujz
zU0$8Hb|Ev0fw)QIfP1tqQr0d0CEaKq8VElB8L*^)OKUI`d?ODiJfv+sKGCN!4{!M5
zb<cyG7)&ZMA@ZW&;JnSBR^1A9PtTwEb?Ld>Hy3@y9FnQc6tkzu&}wjK?X{*esL{bs
z99PRH_G7rRW7o%LhwvZ%V{9eBPHh74$arAu4taY1<RoeT7pqk43{L=vn!jj;iCD;m
z#E(%gC7i^HdfP+Ex_Ns#30&0|8w+%;ft@a(KLPq_Y5rf7;YtSer6o0f%|81*rPCVa
zT8Wt&yPlv=-eoW=)Mrg;q%bzYn|$hE=kPN15A;hvKmlogefl0>JS{UM?u@buWdXO!
zPk26>CB#X?G8TAz#%2a?ByY8Pv`gS9dK=S0)rrCwZL5T(-A>!e5bz7?Zc%#B8vbh-
zFw&g+i2q3Z$zD=T=YOadZ=qd>q#m*D-`0<3{m?kb<Z-Fx(vURL)$IW;|67H67kCib
zOkx4+m#Z>`2XE@B=gn-Zf0#^sK1pj4NMC`d0YD#^i%i(mXm(x~z<MGyprq)<FG2X_
z#2P>pw3#g)X(ctVz>#{cJiykxdEd@|k{qUD_1vzw=3&=OoR?mg0KJk}dkn#e-^H*g
zZ4+jqVg=NsUUu`q+cUQhO%DLVMj3`{4>Z|gHw|dfjbs||<)|OCwh{!YL?S>H1St&j
zOJ<|K=wGd0UM(fm_^%9pHf13HIMeP|%(N7UlBKETqy1U$X*OpOX6e**{7C?#zXb`o
z81g)71;2rz26hQ=Mgd$6v}gH^fMyTrJ=pvJm;A1PgWaCuYyF$+&b1$l*JFHIS79?S
zVRONA$DYv3)z$e<g4d&F2Z3Y&Jxd*0Feu|#U8U$Xtvm<*=wQ{qOVGX1_3p+$u~OQW
zN*c<e0(K;wEflEEj%B-=HUre@d969eFQBig-Zf(YCFU@KgohL%&S)Xp{ek=jKpj<k
zR85!x!=m07I$v;(0lbo_e#)vm`(BC<P8z@?OVuK~LsP+)e2}RCEgvn(b5P!=qGmVl
z7x<LGhbw6b-Vo6ms?X!uL)xErecs!t(Ozu#<o%0Nht2_9`m*n8Qz7_nMJZY}f)q6=
z`H1MZ=E|q)zaaN)#{$z?HwD}-I!~Ec2))~S29R_W2P5Ym+((Z?YcAUd)R{@iOgd8<
z6ltnC_c(2IDl=+{VTCMl$EwGO(7Tu1jOg(3$1tfOHII7lb(+FRnG{-Czi=BVaBKA&
z!C)SQVvU#Jxj@(=V%kcvC}sXguTEEAr!(y*LLfy5)CL}(%E9xN-p|Y<GERY1?@*`H
z!DI2T`stPLug%KMMvXENKhbBT{coT4t+E4K7GOWSD4tYc8?DD(+gV#5n@6-1g1l(X
z#A7?o4XKh69VJ~RGKNtee}J?TwOE0o9$c;AcntJR?NZOX_!#rA$mBtm(i-%E;+Z?%
zis8D`UmI?L+|z^}XEJNBs^Fx<89^N{h1Y6^cgIN>t5kw#nPWU-=kV-do;$~j^a(HL
z+#M$!fRN16q^tdX9<@{ERX#2Eja^9&l?W!yA5)ejw6u$+(Z{;o(noLDR8>k5e&^z6
z3dug3H0hPSeXV{!O0&i@J&2|VV20PFg<e)Hgl)(=*?3UqMGsd=EDs+Nmg(_&iH5JK
zEdMUk;@5_WM<Ry30Hn{4B^ls^S@>E0GYf1$O0$70*Gj!uVfacfb80}%QKWC)i=4*$
z@*O2#8BGJ?Nkk4dzXyBf;<E}jaM=A@HKrbRL$Zde2$=_3p2EnD-`eBC$LGxl{@<B6
z-CWUKn1e!>aWz56YjVQ`{RI6HH6VOtlkTm1WO#v<iRu^Nd1vYP<4gEpVf!V}`l2bN
z#0Ts#I6RqP%Uu&7d$IY4Tfn4VX3_UIj1<dQ;G|92VI3+%_VZaME+t!7yR?kVs-AVw
ze2+YRt9Hq!*lh_QuRZ6o6QxA{K5u@HGELN?eZ0zX#~7CtR4(%j;NNr4Rm2xbh4TR!
zG1qTZYBRwU*UIcxyqG!tx|RgoN~Qv9K%Q*xC?mFFSoFL2%7xXTMLpwH_qEL}+#%1A
zB0P7q-Zg-Yv?(l~Cw&>^z}cXmbR;vg5L4Z9Jw&hufo}ZC@>d5=-lEhG2PAlA{cW30
zPMQeR>+~_7@&-DF{((`AW*hARIb7JK-88ezt0A(&X1rc3udcw8y$6*~0mo}yP&&g8
zNJ(MSCNv?mT3Z@-rStfc30=v}mv7AC^}{q;R2HTn8bLs}VsS(^%}xtTGi9w)gOf+&
zME_six&K~;{4YE|OI5)8VCr^UMw3%hpT?UB0k+Lj(Hg@l65puFJWthB%|OyC>UKII
z1AiqQ3*=eEw9#+*_}OKPAl3zsrF*!IvV+EjKCF~8;1AZL{(7l!wxZ35y_&i1pYSgg
zV4E~#Ui_!R_)e$A%6JD;K5P(0JA}7i6}~IW5DpfEgqGnzTzXq0;4r|mYdl=Yia%L&
zXL9q|msz{}_wP?`oz^6^;j>5#nvHt0st^zf2F8;tjsOQ;z5DkTfMCdbO%-E{ELbf$
zy~?qSmw+czVR=<EIRcCFoi0XU?@uYsrc-~py)bjF+Z2Lf5T9EIr{Q*P1N4e8ZjKmz
zms!lW4nKK!ixgi=yV3wqw349{w4c-AiIeX8Q=Q`wIDIXl*~ai~bCFttG5|Fkx%Ds>
z<@(v<$$IFds~DN8&S;0cxhizvIGZ_OLv)8E(%iGWWJGZ7Ng~3Lwx5qi%-^xUrXlXM
z0GEHb5LJG_w}@o~U1BSbacLQUK;*u;pR#YjSV}!U?-I-yLAUQ1>*0c|w=9*V<SA4C
zo^9-!ul&{2otx2+otFG+vcSE`TH5Ar^5F&ntw2+5UpH*Y`$!21BpB(XCYu3hEqO)r
z!KU@6Z>n(6v!t2N9ZPW<2@|bh+#v5l8}D4}8O;dD#b7uqTsJQ#!8U<*n<gEwszfdr
zqZLzV=W2H5ACE(8Wz2H6ByT*j8oA)UY~O3c@KUk<VIH30jg0HSt1qidsb%dUW<xxF
z;Ms02BB>PCCC~KgeU;{PkNph|8oeV)Wum6ThogE!pP^@FaxVav7*II5^vCSH-7b}S
zQJN1mb7%<hrzCR{*}zo8zJv%tY+v;=A_7Ieg#lHDl`eo8H5o(C%4y6QPy4_VX)FB2
zfB^_MD@_qD3(;ko8|2r?vRhSKNX<CUXsR_QOgG<=!P2i{bTo<Se6K^&FYCql*Fh*J
zqtTK_n^O~)G)V@nk(<KMxYrh%=YU;Y4P}R%btDwd<>Uvrr1-JpTwFn;a^_{6(qbcA
zFXIz?1N39_{^kQl?@EB7`nwvLERM*32+(oKgqdZ)W%l@K20S9}6wu(_jR12#h^L%9
zJ5)2XFWHtHE%J#s6hNh$&mD6M+|%fw6bvf&&#uJ@)>Q<!z)N9KCMLC;M^rs)A*&g^
z3ib`di5k3488vZe2O9!(!2Sguf=+1PoqXYY_PzBKYA&rcOhiNu`S)Fb8}t$S_n&Z%
z-Clsky?U8p#k{l0S}|oJj0?T=m}V#J4qxb(+&By%GEFxCI@;Ui9b|GF`2IV!(SVYf
zgV&$i!V<m6aCaTxr471pp5%}9VLzm}r`qg4b{;Z58s06vFpKp<EpYiT<6Q27s|c+h
zgG>m?^7k2aO#L63*nrEcoH^FJ0JLn*Dd2y#{d>F2ctGD3#Tn{NnRm`s+u5*Kkj_mi
zmdN?<)jtcryuZqwfS0Uvt~7f(n@>9Bsrc4Yk~fNHOZ-1FQ+lbO4+x9ZG*7K4=Rur&
zUygzxB+z09Hf6zk=rbIj{EMBYr70Kx>jQaWghnvhtVdf==<hnigC~1U3H!quL3+ow
z*E0+HohA8E4mV8i^@8=Ul>th1eIp?0t-HD+JN4wl2WAW*sLezZ)Y`k1R2*OXj%<B|
z2op$weF_-@cN4+g9XhaJ<Egz$SwwCQIXw~=Oyf?&A39|7|5zaHd4|36s4=A|?sm9j
zaq%%8DBB5z>m!*!iOi&;0*aS3FrR0hM(S`bwp0TWz|xkiJc<-D0JG>?U@}e|!&Oit
zfuH^+i}H&FlS2lcyp@ZW1eoI1mjj<$#a)(kYffc7YY-qLHd+M&lFtQw4HLNW=)=9F
zgyid8dfTfcUE5H`J3eaLKD?_7YH(1OayINiMG%^>Td_Z-7z{;?Y}XtrWFvz;DZkrw
z4A|$`hRjv|LX9Ur*qS&mo*R1kVoY|1<O^GM{)xvM{Bhs2kUOoxN09<dwywD0&K6db
zxq2q0%-sGsRF?9)m9jz+MIMJ0T!l(q2;R@xLkxb?AQw94Je$^zUd|A)41TW~Xl~(e
zGln>Q-^waTmMax;XL#=yze<>ge|@@!Tb^Q~G-~n%S~z558Gqk0_ZP;5KNs(vAgbVH
zBfpkcm|7xqT3puaWOriKLP^Ipi74!Y;D}S3hi`CED16jKPsal4$eZN_jW}+R(PoUf
zc)4=7_$%?(>RrY+$*f<%_eZ>Y6}o3*eFGQWAB@HCGm83S+x}kFB#83Z1tP^C&<4hC
z)WV7XNs=@Qanc$`m0VeyOvWUP5th+G<_tEXAV7D%)On(q@^e(q@+Ru!d#dwYxm`Rv
zan1+1ThK&nsY-)E=+<d1H9cLNsA)x*S0-E|SuWzCyrk2GVdCAR=a4BkNj(<7^I9%u
zrL(6!Tc7_OP1e$z{HDG&DkL>QG%OD`V4RPhf)ryyCp~bzB61Tb$iZysL=1HaG>Y<}
zk7Jw5PKL0)bz@k!gleZjP?zm82=}baEPthk-9n~Z3sEDSV7h?<`pHW>v$bdM3>OG4
z=y~zNmeKthD`zz_Culj$be;NLyN3$Mn9qP?9ii!$%RVDO^;KgJ^Un(M_hQ$JtcNu}
z?urI{7;=a7c#H1rPNGWnYSm$Z(|-oZWb%60aIgUpM6&&G)NHO>h<WD20GLjtZp80c
zx9L$oC(2{p=>1nuq^{8>?hs~}UQdRpnD9NA3@xGy>T|Ot&;~TY_H5Fl>7%^h3~`UT
z`m%_Qp{gkP)uyo*g)Zie+Etsot}YMO1=UO>N+tB?hOs;hW(eEW(G*Z6dy+l>*!JuW
zXX;}&X<{ZU8U6;4$vYVr)r~*txHnPxv{7@u?>r>B%K0|<h5@uA1W<Rti6GJA7)-Xh
zYNkJod{l)Y^5^fxGAx=#Rfj#V1SbO7cbJn9T2qk_^NVe##mPnnQJM=MWT&Yeau7T7
z#ZsbEt<!8?1`yQwTEh4tV?vX!B07qO$bNPB{~6SL^h&sxGgG+dHr0o+E0RodD~bZ~
zH3t9fyOtV&QPe_2dDl4quk9u+vxDKh?gnWe`4aq%t|wcPNB<eOFZ29&9xlV_>=LF0
z=6ZqAMt!k4hZM{>QgnT4u~qz|!xXp`ZKY%NTzxGJb(E^<U+m#rE<K_5DkHqt^rSR_
zro_l5h)Kek)6MBV`yB!K3F&$#&-GWar_{)Rt=8FRJE=!YUGE;NV0{)d3{w|PId1nV
zp+}qb#Bm@;u03G`NUQI8WMF?p^#AJht-m}sxcbf3D)8>Wi)BRG>iW<cHT#$U2k34c
A!vFvP

literal 0
HcmV?d00001

diff --git a/static/img/ca.png b/static/img/ca.png
new file mode 100644
index 0000000000000000000000000000000000000000..a693d813444623e5bdfceaf7075b8e64bfe4aa90
GIT binary patch
literal 816
zcmV-01JC@4P)<h;3K|Lk000e1NJLTq001EX001Ef1^@s6SLDKP0000PbVXQnQ*UN;
zcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU!(n&-?RCwBA{Qv(y12N#$+YbUjDgcTN
zfLI=jvWGx?0f;w%u$ZvG2V%@-B;<&P`K>n0I;u5nL2m90B!XY-cJ2Io<#vnw#OfpX
z)G^_cydRK#;K!uJhyUJrM6v@w0HhD3A7l>6jsW@oj;i~&UmN$@Gf)A5%mJAPGM6Yv
zJj`wk|2co%p}%(?axzd6fXoA#3o;+CBS0?wxp>p^|DV4yGSC2k%mtZ`9wI1?_`U7W
zE?PMN*&!f%usQ;ic&Hr(_@V|mu`<D;fm(@>l*9^)7O*4!UcR+}VE_QkUZ#h|9rC~T
zpHv<QM}X`F+0XR<<=a|H4Eo+Rhq8nUw4dqk-N)YK8t`+*3Wgs*M}TOuqXcL_%fE+D
zMM%~7=jb_x-#`qr926S=K7C<ewKig40b)`B$bP1O&tJ2U>If!TNpJ}K2U-jcQXmcD
zgTzS%Ap4m})$~Ehh2iIltqiQ5b|~T?K1duSPbwfO6n-t=3imZeO5c76jA827B8g9G
zM2Ez`N6#64F5g02f(5Drsi(RlnB*iGcsEUF;N3V4821u5(uxFF9;6PWo@ld~Bt`#_
z5+%S^7Q_FKU$EzSpg2gLq(lz1pM^<Y`VBCJN|2(FXK@#-*k$-uGl7AtrGSB1SB<Q4
z0%Si6v$E{gKPN6E6RU}lpBJMn06Bov@&T?FXg?F9xNtMMr5z~fL1}>0C_wQP(0(TQ
z-in8;j^=mCG5{JXAetNivKM4O6Ervz2BH>)*$Z|As9(V5?|hJ+4glE)>yN<83B?Ul
z9hg<*ztbfIfcAjw!&+FedfB-#@^b&Dr2|0bgY3asVuFH)J=QOhRt^D~3o;+QTZmDC
z$xp3c`H+R>DX3Xa&DJ+43P2%%tzU|@?f@xNxxJH%T8R~84#+%Q9b>!|7%1^@<i*-D
utH|vn&-ZdWLHdysAz4EM^cbH22rvK}8&boS&)N(C0000<MNUMnLSTZ3Q)#;Z

literal 0
HcmV?d00001

diff --git a/static/img/contact-us-map-pin.svg b/static/img/contact-us-map-pin.svg
new file mode 100644
index 00000000..3efa3795
--- /dev/null
+++ b/static/img/contact-us-map-pin.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#1b55e2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-map-pin"><path fill="#1b55e2" d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle fill="#fff" cx="12" cy="10" r="3"></circle></svg>
\ No newline at end of file
diff --git a/static/img/de.png b/static/img/de.png
new file mode 100644
index 0000000000000000000000000000000000000000..ccfd296f501a7ee147f8326d93803aa43cf5e645
GIT binary patch
literal 469
zcmV;`0V@89P)<h;3K|Lk000e1NJLTq001EX001Ef1^@s6SLDKP0000PbVXQnQ*UN;
zcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBUzcS%G+RCwC#mrZhlPz=W-;{kBfog-Z^
zF3S<RVb29>dz0c#u)P3#E`d8|*vPo+MmWK10-*&45GfcJ&CK7A(U<(p%X^8Sl!87&
z(@}3IA9X~j1|9ix`kvm~caPu(%4-RFNwm)R69k$&FnC?=)e!va!;t_Ag>6}B0<ciY
z$N+`Nuhj{`8JG&73}SRagcAe&Y)vD?h(&mHv6i<%3CJizctQ{!#h)Eut#9CT1|j=^
z<zkM{4!!_Eb2NGYS<4_SVF-&LR>BY~4er4HA?^+$7G{Vw?wpbqYCM=qnxFNK<>!M~
z?>N1DE#_-=NFcIz`2JOZVMp<c)8Psw!u>s>W<Y;hwl@aYa$K14P?K9^(@A-{0l*#s
zthURF+Il)MKw2Lkst|d4o+kuJGyl8|?bo&$ggj&HN8bYSoBOX=wI=Eo*;KvnBNd@L
ztbyeVAL%>~y$7=O9RQazQO%0Z1?BK|HBDqO_aZ-&86<sNe+w`Gc+)TOahP>^00000
LNkvXXu0mjfF+9e3

literal 0
HcmV?d00001

diff --git a/static/img/faq.svg b/static/img/faq.svg
new file mode 100644
index 00000000..2f2ddfa3
--- /dev/null
+++ b/static/img/faq.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="869a981d-5394-490d-9104-6940aaebaf2b" data-name="Layer 1" width="1003.92" height="836.78" viewBox="0 0 1003.92 836.78"><defs><linearGradient id="aaa84376-7da2-49a5-964f-b58018dda0eb" x1="795.24" y1="863.66" x2="795.24" y2="394.91" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="gray" stop-opacity="0.25"/><stop offset="0.54" stop-color="gray" stop-opacity="0.12"/><stop offset="1" stop-color="gray" stop-opacity="0.1"/></linearGradient></defs><title>questions</title><path d="M537.57,43.85c45.17-16.79,100.16-2.35,147.12,18.71C832.18,128.72,939.63,254.31,1025,382.26c30.91,46.33,60.27,94.7,71.89,146.42,23.66,105.27-38.05,214.25-143,252.44-35.69,13-74.9,18.33-114.17,21.3-69.83,5.29-142.13,3.19-211.4-16.4-49.4-14-96.13-36.52-140.95-61.4C362.2,655.1,247.89,564.82,165.58,454.54c-36.1-48.37-66.64-102.9-67.52-158.71s35.49-111.89,95.33-121.38c24.74-3.92,50.91.16,76.44,4.36,37.59,6.19,75.69,12.7,112.85,10C421.07,186,471,171,478,134.35,485.41,95,492.46,60.62,537.57,43.85Z" transform="translate(-98.04 -31.61)" fill="#eff3f7" opacity="0.1"/><path d="M342.06,800.42s48.26-2.91,42.57,30.91c0,0,1.13,6-4.29,8.69,0,0-.08-2.51-4.95-1.66a21.8,21.8,0,0,1-5.24.26,10.93,10.93,0,0,1-6.41-2.65h0s-13.57-5.6-18.84-27.78c0,0-3.91-4.83-3.75-6.08l8.14,3.48s-2.78,5.88-.59,10.76c0,0,.26-10.54,1.83-10.3.31.05,4.23,2,4.23,2s-4.79,10.23-1.18,17.67c0,0-1.37-12.61,2.67-16.93l5.74,3.35s-5.6,10.57-1.8,19.19c0,0-1-13.23,3-18.38l5.2,4s-5.26,10.42-2.05,17.58c0,0,.41-15.41,3.17-16.57,0,0,4.55,4,5.24,5.66,0,0-3.6,7.56-1.37,11.55,0,0,1.37-10.26,2.5-10.31,0,0,4.52,6.8,5,11.46,0,0-.2-6.93-3.91-12.11,0,0,4.38.75,6.94,3.59,0,0-.71-4.81-8.05-5.23,0,0-3.74-5.15-4.75-5.47,0,0,7.31-.61,11.74,1.36,0,0-3.9-4.54-13.08-2.48l-5.13-4.18s9.63-1.32,13.7.14c0,0-4.69-4-15.08-1.09l-5.58-3.34s8.2-1.77,13.09-1.13c0,0-5.16-2.78-14.73.23l-4-1.79s6-1.18,7.77-1.37,1.85-.67,1.85-.67a20.82,20.82,0,0,0-11.29,1.25S341.91,801,342.06,800.42Z" transform="translate(-98.04 -31.61)" fill="#eff3f7"/><ellipse cx="277.26" cy="811.36" rx="34.16" ry="5.77" fill="#eff3f7" opacity="0.1"/><path d="M277.41,777.67s27.21-1.64,24,17.43A4.63,4.63,0,0,1,299,800s-.05-1.41-2.79-.93a12.13,12.13,0,0,1-2.95.14,6.06,6.06,0,0,1-3.62-1.49h0S282,794.55,279,782.05c0,0-2.2-2.73-2.12-3.43l4.6,2s-1.57,3.32-.34,6.07c0,0,.15-5.95,1-5.81.18,0,2.39,1.15,2.39,1.15s-2.7,5.77-.66,10c0,0-.78-7.11,1.5-9.55l3.23,1.89s-3.15,6-1,10.82c0,0-.55-7.46,1.69-10.36l2.93,2.28s-3,5.87-1.15,9.91c0,0,.23-8.69,1.79-9.34,0,0,2.56,2.26,2.95,3.19,0,0-2,4.26-.77,6.51,0,0,.77-5.78,1.41-5.81,0,0,2.55,3.83,2.81,6.46a14,14,0,0,0-2.2-6.83,7.63,7.63,0,0,1,3.91,2s-.39-2.71-4.54-2.95c0,0-2.11-2.91-2.67-3.08,0,0,4.12-.35,6.62.76,0,0-2.2-2.56-7.38-1.4l-2.89-2.36s5.43-.74,7.73.08c0,0-2.65-2.26-8.51-.61l-3.14-1.89a28.57,28.57,0,0,1,7.37-.63s-2.9-1.57-8.3.13l-2.25-1s3.39-.67,4.38-.77,1.05-.38,1.05-.38a11.79,11.79,0,0,0-6.37.71S277.33,778,277.41,777.67Z" transform="translate(-98.04 -31.61)" fill="#eff3f7"/><ellipse cx="198.11" cy="770.04" rx="19.26" ry="3.26" fill="#eff3f7" opacity="0.1"/><path d="M946.82,796s32.85-2,29,21a5.64,5.64,0,0,1-2.92,5.92s-.06-1.71-3.37-1.13a14.81,14.81,0,0,1-3.57.17,7.35,7.35,0,0,1-4.36-1.8h0s-9.24-3.81-12.83-18.91c0,0-2.66-3.29-2.55-4.13l5.54,2.36s-1.89,4-.4,7.33c0,0,.18-7.18,1.24-7,.22,0,2.88,1.38,2.88,1.38s-3.26,7-.8,12c0,0-.93-8.58,1.82-11.52l3.9,2.27s-3.81,7.2-1.22,13.07c0,0-.67-9,2-12.51l3.54,2.76s-3.58,7.09-1.4,12c0,0,.29-10.48,2.17-11.28,0,0,3.09,2.73,3.56,3.85,0,0-2.45,5.15-.93,7.87,0,0,.93-7,1.7-7,0,0,3.08,4.63,3.4,7.8a16.81,16.81,0,0,0-2.65-8.24,9.29,9.29,0,0,1,4.72,2.44s-.48-3.27-5.49-3.56c0,0-2.54-3.51-3.22-3.72,0,0,5-.42,8,.92,0,0-2.66-3.08-8.91-1.68l-3.49-2.85s6.55-.9,9.33.09c0,0-3.2-2.73-10.27-.74l-3.8-2.27s5.58-1.2,8.91-.77c0,0-3.51-1.89-10,.16l-2.72-1.22s4.09-.81,5.29-.93,1.26-.46,1.26-.46a14.2,14.2,0,0,0-7.68.85S946.72,796.38,946.82,796Z" transform="translate(-98.04 -31.61)" fill="#eff3f7"/><ellipse cx="871.4" cy="793.36" rx="23.25" ry="3.93" fill="#eff3f7" opacity="0.1"/><path d="M724.17,434.3H655V366.14h69.22Zm-1-102.77H656c0-105.92,100.68-99.73,100.68-166.74,0-36.91-30.21-66.48-67.12-66.48s-67.11,31.88-67.11,67.53H555.33A134,134,0,0,1,689.56,31.61c74.14,0,134.23,59.15,134.23,133.18C823.79,248.58,723.12,258.12,723.12,331.53Z" transform="translate(-98.04 -31.61)" fill="#eff3f7"/><path d="M379.18,414H361.34V396.38h17.84Zm-.27-26.5h-17.3c0-27.3,25.95-25.71,25.95-43a17.22,17.22,0,0,0-17.3-17.15A17.67,17.67,0,0,0,353,344.75h-17.3a34.61,34.61,0,0,1,69.21-.27C404.86,366.08,378.91,368.54,378.91,387.46Z" transform="translate(-98.04 -31.61)" fill="#eff3f7" opacity="0.1"/><path d="M514.26,536.41H496.42V518.84h17.84ZM514,509.92h-17.3c0-27.31,25.95-25.71,25.95-43a17.21,17.21,0,0,0-17.3-17.14A17.67,17.67,0,0,0,488,467.2h-17.3a34.61,34.61,0,0,1,69.21-.27C539.94,488.53,514,491,514,509.92Z" transform="translate(-98.04 -31.61)" fill="#eff3f7" opacity="0.1"/><path d="M596.4,319.71H583.47V307H596.4Zm-.19-19.21H583.67c0-19.78,18.81-18.63,18.81-31.15a12.48,12.48,0,0,0-12.54-12.42,12.8,12.8,0,0,0-12.54,12.62H564.86a25.08,25.08,0,0,1,50.16-.2C615,285,596.21,286.79,596.21,300.5Z" transform="translate(-98.04 -31.61)" fill="#eff3f7" opacity="0.1"/><path d="M817.24,337.65h-7.31v-7.2h7.31Zm-.11-10.85H810c0-11.18,10.63-10.53,10.63-17.61a7,7,0,0,0-7.08-7,7.24,7.24,0,0,0-7.09,7.13h-7.09a14.18,14.18,0,0,1,28.35-.11C827.76,318,817.13,319.05,817.13,326.8Z" transform="translate(-98.04 -31.61)" fill="#eff3f7" opacity="0.1"/><path d="M929,665.12h-7.31v-7.2H929Zm-.11-10.85h-7.09c0-11.19,10.64-10.53,10.64-17.61a7.05,7.05,0,0,0-7.09-7,7.23,7.23,0,0,0-7.09,7.13h-7.09a14.18,14.18,0,0,1,28.35-.11C939.56,645.51,928.93,646.52,928.93,654.27Z" transform="translate(-98.04 -31.61)" fill="#eff3f7" opacity="0.1"/></svg>
\ No newline at end of file
diff --git a/static/img/favicon.ico b/static/img/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..7abef30f51106c7f8f1fb9e2eac620f0706b5a46
GIT binary patch
literal 4286
zcmdT`F>c#16#a$=jq+3kNKk9+=&@Tg^Z;J6>j=JqbpszkYquVtgL(rUK~66ajUIxq
z?*%0AO^6gN8wRT2h2$syd+(D}6p;mfibD8Xey&8mh{!hpAt?dIKOfBf&(GhN#})8q
zQQf;1=r({+xT^<Sx7KI>E*_w>RdxFwI?S~eHQEX&Zh1c7Bd@PJHKwnt_6PaAbB7t)
z+FOtO&87Rn9Duo+>zaP@URZ6uYuD(F<xYBlrhCuF@^!4o+6Lg=AbtTc&zze)2g{>%
z{C<lyW#~LH$NS#{I<LdH2<5mq)|6hJ=3sy4*2Y?_;~qAatK~Sh-p#2TUpHCXaj^wo
zrN>i!>vv4M^>csxHU-cCt;G&)Qk^~*$Iy=L{Z{8drvl6f-Vod9wW)pR*P;3~2l!d{
zn6``cdVOj?qTgu_Xdfo@>Emp_bbhEG(LXzTaJLEibx0=^kLdgLr|9oOI-z((-{>6F
z&U^08I@A_AC#4Vlr27x;70^XI98&bg*1*HqyU&<^2k2q!9A<0N4|Mnq33;e|&+xDT
zN{hmu2iHY^3$Q+R21(y9=K)-mt)+3XlomOy%?s^A9pgbRzdg0bk?a9^{J)2_hV&Wl
zfdjAwxMu|WjD>P9@!<9@=3&lU727*KhdOTUA-R6%10Hx5-0L~D>YUnf&S{}v&-BqE
z@1l1w<_}!FV-3&&x<1{fCjAyMu3ODPrzGa^89uMTk=PsaX939Gh^#+E@^_K!L@ZAE
zkiD;m-0X+1nK?c!&G9?2ILE`%3{ROE@_avJAJ3=dX^s3(9`cbF{Lf|(2sY*)33_;z

literal 0
HcmV?d00001

diff --git a/static/img/fr.png b/static/img/fr.png
new file mode 100644
index 0000000000000000000000000000000000000000..6d03da3886b8a004af9a698139ccbf31f2c6844b
GIT binary patch
literal 638
zcmV-^0)hRBP)<h;3K|Lk000e1NJLTq001EX001Ef1^@s6SLDKP0000PbVXQnQ*UN;
zcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU!AW1|)RCwBA{Qv(y12N#$+YbUjDgcTN
zfLI=jvWGx?0f;w%u$ZvG2V%@-B;<&^*%xgtKl-xZz_ky`FK1aZ5DVUmSTL|Un%`yC
zRZEbcSbc<SNBFm$Jh18P8+#a^R7b!7o4@lx#SK#(aH(a&<$KlaeczBBKneJ@aj*Ry
zRrhZX^IL6*azy5g^Wh5)JU?{j#dl5yDuTav9&-MizwXe(?8b1sjsS(g(!(#8fBx~8
zk%0!_|L3oaKNoLWjvgW?j@W+T?Jin50NEkGw;kGr)e)dXNbM-V7d7_-vJap*0u&9@
zN`#~&R#>!v9RVr_7zP0Ry?hI7FH_;%i}Ij?XdoQ%d;dx0hs7Q8Os_uvu4NcN@c-r8
zTBduizIzX(BmUlf?9KG>^$(GObi}`hPequXfB3~RppJO{nuUpB5P(rf3@%4V3b6ed
zSO<vyVUic+cr&1mke7bLq$I|<bs!zVtSq~gNsOPhc_1CZC@$R0)Ss;X&_PS!?m##I
z)EbxXt#}B|9lCNn2?G)p!0rG%i%v?_KjLRBa*&=50CfXk{SkOMv9ZeBK}CY|J6%FR
zMgBW-KLn+)@-z^3<K<xfPt%0R%l)6#%gzmFi3y69Xj}0}S~&#d0QOkFNc3(YMm0V?
z!*C@l^Tns2=07!C-=HV}g#fmG>EP{)A}7{d4;fo>%MnmHz>ybgi_ZZ>4Gqv^d;%cA
Y066~lt?Pfq6#xJL07*qoM6N<$f}9Z|OaK4?

literal 0
HcmV?d00001

diff --git a/static/img/jp.png b/static/img/jp.png
new file mode 100644
index 0000000000000000000000000000000000000000..0cfb71fb410053a3d97fd69fe6f3bb1e50971460
GIT binary patch
literal 609
zcmV-n0-pVeP)<h;3K|Lk000e1NJLTq001EX001Ef1^@s6SLDKP0000PbVXQnQ*UN;
zcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU!14%?dRCwCdSWQa;VGy2uEjol~1YONT
zUMk#Q5MCn)ubuK7{e?*BFGS}&bzOq!8vTM5>tYA>SQIMKAwq0M#?Wm)=3RCddteaV
znRlO^nVk=f@pudpynXbu_)%stQF1P7T@)L|BH38a_9bT<K_u|zoA^;hIR<^y$rj0U
z{FGDx0lIlRBmrQ%HlL&C34VHVX%V7BgF@-%l|Lkq0LA+OB?Hl8fKoytwkHYpfE^Qo
zSt91FN1Qof#Y_PBe9JX4IeChZ42rYKItd4dp$*9+PhnZ&FI64O(Nhb)Zth^zZ2kV0
z+AYA!(E+4(3OYy8eJjT6dygt%Phv414B_+i0>1AbJ$07%_h9w%42(=#N@PuO85R*3
z9-jCTAkcNvBYh#tViM$m(esNeT&PF-IwVX<4g`6?%_C$dfT=vX;T$Ll!$4@4QzG{^
zTcJou?G!8k{tpQ%L}4JcQ#_LSf+}Gc2<^IxTetrcVJW6cr~}d$mT+4++o~6+6sNYg
zWMM!((ig%Klb~LZzP$?c2wf*Vjox8RTluxlFdJbPtz#>%EW|u9c}02Nt0hdJHk~t_
zgRY&>h}S>@rdP2l^E4bM2F~$ejs&}>6eE%8-qG<b+q{^VyfH-@0^T=lt%aD!^7Dw2
vuo|j?v0<LK>oBPEYpA~vC;k7#j{pMzqDJEsy1r*!00000NkvXXu0mjfg98IG

literal 0
HcmV?d00001

diff --git a/static/img/mindset.svg b/static/img/mindset.svg
new file mode 100644
index 00000000..de94cb46
--- /dev/null
+++ b/static/img/mindset.svg
@@ -0,0 +1 @@
+<svg id="9a5c15f4-7944-40bc-b8da-d63b7d478a28" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="842" height="778.92" viewBox="0 0 842 778.92"><defs><linearGradient id="a91ba363-77be-43f7-9cf6-91c4a3880d9c" x1="378.37" y1="732.81" x2="378.37" y2="130.21" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="gray" stop-opacity="0.25"/><stop offset="0.54" stop-color="gray" stop-opacity="0.12"/><stop offset="1" stop-color="gray" stop-opacity="0.1"/></linearGradient><linearGradient id="d1e6aa0e-d79d-4f6f-afbb-c37e9ed80ff9" x1="274.44" y1="409.32" x2="274.44" y2="248.16" xlink:href="#a91ba363-77be-43f7-9cf6-91c4a3880d9c"/><linearGradient id="a279b039-1afd-4281-8292-ccd5c8c9b734" x1="274.44" y1="361.44" x2="274.44" y2="261.01" xlink:href="#a91ba363-77be-43f7-9cf6-91c4a3880d9c"/><clipPath id="42e7b1d1-2be2-47b0-aacb-a853df270819" transform="translate(-179 -60.54)"><rect id="cf34cfb5-9399-4bae-9cea-d47bbef6cb3a" data-name="&lt;Rectangle&gt;" x="381.54" y="322.72" width="143.79" height="96.93" fill="#fff"/></clipPath><linearGradient id="972637f2-71db-4198-9c75-a0854a7fe249" x1="274.44" y1="616.03" x2="274.44" y2="454.87" xlink:href="#a91ba363-77be-43f7-9cf6-91c4a3880d9c"/><linearGradient id="6c85befd-f960-412c-83e0-663d4b13bf85" x1="274.44" y1="568.15" x2="274.44" y2="467.72" xlink:href="#a91ba363-77be-43f7-9cf6-91c4a3880d9c"/><clipPath id="f66b8fac-771d-49bf-85c7-4ce29a79f723" transform="translate(-179 -60.54)"><rect id="7439734d-5f7c-428f-88ce-e68b86a45c07" data-name="&lt;Rectangle&gt;" x="381.54" y="529.42" width="143.79" height="96.93" fill="#fff"/></clipPath><linearGradient id="598f8edf-c762-4b18-b52d-250fc678075a" x1="688.76" y1="765.86" x2="688.76" y2="163.26" gradientTransform="translate(1142.22 -188.53) rotate(90)" xlink:href="#a91ba363-77be-43f7-9cf6-91c4a3880d9c"/><linearGradient id="013b841e-9a42-49b8-8a36-6db9ed002b72" x1="688.18" y1="568.49" x2="688.18" y2="409.67" gradientTransform="translate(1161.39 -164.01) rotate(90)" xlink:href="#a91ba363-77be-43f7-9cf6-91c4a3880d9c"/><linearGradient id="f8cab3c1-d868-48bc-b87d-cd2075ddc26a" x1="810.6" y1="767.54" x2="810.6" y2="362.71" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#b3b3b3" stop-opacity="0.25"/><stop offset="0.54" stop-color="#b3b3b3" stop-opacity="0.1"/><stop offset="1" stop-color="#b3b3b3" stop-opacity="0.05"/></linearGradient><linearGradient id="043d467e-585e-47c7-bb2c-06dd6f5be04b" x1="685.49" y1="507.08" x2="685.49" y2="487.6" gradientUnits="userSpaceOnUse"><stop offset="0" stop-opacity="0.12"/><stop offset="0.55" stop-opacity="0.09"/><stop offset="1" stop-opacity="0.02"/></linearGradient><linearGradient id="be08032f-102d-431e-9b5f-1e4ebfc8159b" x1="774.99" y1="484.73" x2="774.99" y2="425.15" xlink:href="#043d467e-585e-47c7-bb2c-06dd6f5be04b"/></defs><title>file searching</title><g opacity="0.5"><rect x="154.15" y="130.21" width="448.44" height="602.6" fill="url(#a91ba363-77be-43f7-9cf6-91c4a3880d9c)"/></g><rect x="159.99" y="138.39" width="434.43" height="581.58" fill="#f2f2f2"/><rect x="193.86" y="162.91" width="149.48" height="4.67" fill="#e0e0e0"/><rect x="193.86" y="183.93" width="149.48" height="4.67" fill="#1b55e2" opacity="0.7"/><rect x="365.53" y="162.91" width="149.48" height="4.67" fill="#e0e0e0"/><rect x="388.88" y="296.05" width="149.48" height="4.67" fill="#e0e0e0"/><rect x="392.39" y="308.89" width="149.48" height="4.67" fill="#e0e0e0"/><rect x="399.4" y="321.74" width="149.48" height="4.67" fill="#e0e0e0"/><rect x="388.88" y="502.75" width="149.48" height="4.67" fill="#e0e0e0"/><rect x="392.39" y="515.6" width="149.48" height="4.67" fill="#e0e0e0"/><rect x="399.4" y="528.44" width="149.48" height="4.67" fill="#e0e0e0"/><g opacity="0.5"><rect x="195.03" y="248.16" width="158.82" height="161.16" fill="url(#d1e6aa0e-d79d-4f6f-afbb-c37e9ed80ff9)"/></g><rect x="196.03" y="251.67" width="156.32" height="154.15" fill="#f5f5f5"/><g opacity="0.5"><rect x="201.54" y="261.01" width="145.8" height="100.43" fill="url(#a279b039-1afd-4281-8292-ccd5c8c9b734)"/></g><rect id="e1f34465-d008-41db-868b-e00503fb87b3" data-name="&lt;Rectangle&gt;" x="202.54" y="262.18" width="143.79" height="96.93" fill="#fff"/><g clip-path="url(#42e7b1d1-2be2-47b0-aacb-a853df270819)"><polygon points="190.35 355.61 226.56 299.55 241.74 324.07 274.44 290.21 302.47 324.07 326.99 273.86 390.05 374.29 185.68 367.28 190.35 355.61" fill="#1b55e2" opacity="0.4"/><circle cx="218.38" cy="276.19" r="10.51" fill="#1b55e2" opacity="0.4"/></g><g opacity="0.5"><rect x="195.03" y="454.87" width="158.82" height="161.16" fill="url(#972637f2-71db-4198-9c75-a0854a7fe249)"/></g><rect x="196.03" y="458.37" width="156.32" height="154.15" fill="#f5f5f5"/><g opacity="0.5"><rect x="201.54" y="467.72" width="145.8" height="100.43" fill="url(#6c85befd-f960-412c-83e0-663d4b13bf85)"/></g><rect id="c95ac4f6-be4d-44a3-92c2-5c8066e2b531" data-name="&lt;Rectangle&gt;" x="202.54" y="468.88" width="143.79" height="96.93" fill="#fff"/><g clip-path="url(#f66b8fac-771d-49bf-85c7-4ce29a79f723)"><polygon points="190.35 562.31 226.56 506.25 241.74 530.78 274.44 496.91 302.47 530.78 326.99 480.56 390.05 580.99 185.68 573.99 190.35 562.31" fill="#bdbdbd" opacity="0.4"/><circle cx="218.38" cy="482.9" r="10.51" fill="#bdbdbd" opacity="0.4"/></g><g opacity="0.5"><rect x="376.36" y="276.01" width="602.6" height="448.44" transform="translate(-124.09 1006.82) rotate(-78.76)" fill="url(#598f8edf-c762-4b18-b52d-250fc678075a)"/></g><rect x="386.18" y="280.49" width="581.58" height="434.43" transform="translate(-122.17 1004.12) rotate(-78.76)" fill="#fff"/><rect x="542.89" y="232.65" width="308.31" height="4.67" transform="translate(-119.81 -191.93) rotate(11.24)" fill="#e0e0e0"/><rect x="456.83" y="665.62" width="308.31" height="4.67" transform="translate(-37.05 -166.84) rotate(11.24)" fill="#e0e0e0"/><rect x="452.26" y="685.13" width="238.24" height="4.67" transform="translate(-34.01 -158.75) rotate(11.24)" fill="#e0e0e0"/><rect x="448.46" y="696.91" width="88.75" height="4.67" transform="translate(-33.22 -143.21) rotate(11.24)" fill="#1b55e2" opacity="0.7"/><rect x="539.13" y="243.97" width="154.15" height="4.67" transform="translate(-119.16 -175.95) rotate(11.24)" fill="#1b55e2" opacity="0.7"/><rect x="532.71" y="282.38" width="277.94" height="4.67" transform="translate(-110.6 -186.03) rotate(11.24)" fill="#e0e0e0"/><rect x="529.49" y="288.24" width="67.73" height="4.67" transform="translate(-111.54 -164.8) rotate(11.24)" fill="#3ad29f" opacity="0.7"/><rect x="521.95" y="338.03" width="308.31" height="4.67" transform="translate(-99.67 -185.82) rotate(11.24)" fill="#e0e0e0"/><g opacity="0.5"><rect x="592.89" y="385.78" width="158.82" height="276.77" transform="translate(-151.88 1020.84) rotate(-78.76)" fill="url(#013b841e-9a42-49b8-8a36-6db9ed002b72)"/></g><rect x="535.78" y="445.94" width="273.27" height="155.32" transform="translate(-64.02 -181.59) rotate(11.24)" fill="#fff"/><rect x="516.71" y="364.38" width="308.31" height="4.67" transform="translate(-94.63 -184.29) rotate(11.24)" fill="#e0e0e0"/><rect x="566.14" y="449.2" width="33.87" height="113.28" transform="translate(-69.19 -164.51) rotate(11.24)" fill="#1b55e2"/><rect x="622.06" y="498.05" width="33.87" height="75.91" transform="translate(-62.24 -174.83) rotate(11.24)" fill="#3ad29f"/><rect x="678.21" y="544.59" width="33.87" height="40.87" transform="translate(-55.5 -185.22) rotate(11.24)" fill="#f55f44"/><rect x="741.87" y="514.79" width="33.87" height="82.92" transform="translate(-55.99 -197.8) rotate(11.24)" fill="#fdd835"/><path d="M880.45,410.55a155.89,155.89,0,0,0-223.11-1.68c-59,59.48-60,156.33-2.29,217.07A155.89,155.89,0,0,0,854.95,648L967.64,765.21a7.59,7.59,0,0,0,10.73.21l28.08-27a7.59,7.59,0,0,0,.21-10.73L894,610.49A155.9,155.9,0,0,0,880.45,410.55ZM845.35,599a111.5,111.5,0,1,1,3.1-157.66A111.5,111.5,0,0,1,845.35,599Z" transform="translate(-179 -60.54)" fill="url(#f8cab3c1-d868-48bc-b87d-cd2075ddc26a)"/><path d="M685.49,487.6c-12.54,0-12.56,19.49,0,19.49S698.05,487.6,685.49,487.6Z" transform="translate(-179 -60.54)" fill="url(#043d467e-585e-47c7-bb2c-06dd6f5be04b)"/><path d="M772.9,425.17c-33.75-.76-64.46,16.17-80.79,41.73-5.33,8.34,9.8,15.71,15.1,7.41,13.52-21.16,39.21-34.6,67-33.9,29.12.73,55.62,17.39,69.65,40.51,5.32,8.77,19.27.8,14-7.92C840.8,445,807.76,426,772.9,425.17Z" transform="translate(-179 -60.54)" fill="url(#be08032f-102d-431e-9b5f-1e4ebfc8159b)"/><path d="M892.68,404.63a155.89,155.89,0,0,0-223.11-1.68c-59,59.48-60,156.33-2.29,217.07a155.89,155.89,0,0,0,199.9,22.05L979.86,759.29a7.59,7.59,0,0,0,10.73.21l28.08-27a7.59,7.59,0,0,0,.21-10.73L906.19,604.56A155.9,155.9,0,0,0,892.68,404.63ZM857.58,593a111.5,111.5,0,1,1,3.1-157.66A111.5,111.5,0,0,1,857.58,593Z" transform="translate(-179 -60.54)" fill="#1b55e2"/><path d="M697.72,481.67c-12.54,0-12.56,19.49,0,19.49S710.28,481.67,697.72,481.67Z" transform="translate(-179 -60.54)" fill="#1b55e2"/><path d="M785.13,419.25c-33.75-.76-64.46,16.17-80.79,41.73-5.33,8.34,9.8,15.71,15.1,7.41,13.52-21.16,39.21-34.6,67-33.9,29.12.73,55.62,17.39,69.65,40.51,5.32,8.77,19.27.8,14-7.92C853,439,820,420,785.13,419.25Z" transform="translate(-179 -60.54)" fill="#1b55e2"/><rect x="121.45" y="663.91" width="3.5" height="19.85" fill="#47e6b1"/><rect x="300.45" y="724.45" width="3.5" height="19.85" transform="translate(857.58 371.63) rotate(90)" fill="#47e6b1"/><path d="M750.87,68.49a4.29,4.29,0,0,1-2.39-5.19,2.06,2.06,0,0,0,.09-.48h0a2.15,2.15,0,0,0-3.87-1.43h0a2.06,2.06,0,0,0-.24.42,4.29,4.29,0,0,1-5.19,2.39,2.06,2.06,0,0,0-.48-.09h0A2.15,2.15,0,0,0,737.38,68h0a2.06,2.06,0,0,0,.42.24,4.29,4.29,0,0,1,2.39,5.19,2.06,2.06,0,0,0-.09.48h0A2.15,2.15,0,0,0,744,75.32h0a2.06,2.06,0,0,0,.24-.42,4.29,4.29,0,0,1,5.19-2.39,2.06,2.06,0,0,0,.48.09h0a2.15,2.15,0,0,0,1.43-3.87h0A2.06,2.06,0,0,0,750.87,68.49Z" transform="translate(-179 -60.54)" fill="#4d8af0"/><path d="M316.44,215.64a4.29,4.29,0,0,1-2.39-5.19,2.06,2.06,0,0,0,.09-.48h0a2.15,2.15,0,0,0-3.87-1.43h0a2.06,2.06,0,0,0-.24.42,4.29,4.29,0,0,1-5.19,2.39,2.06,2.06,0,0,0-.48-.09h0a2.15,2.15,0,0,0-1.43,3.87h0a2.06,2.06,0,0,0,.42.24,4.29,4.29,0,0,1,2.39,5.19,2.06,2.06,0,0,0-.09.48h0a2.15,2.15,0,0,0,3.87,1.43h0a2.06,2.06,0,0,0,.24-.42,4.29,4.29,0,0,1,5.19-2.39,2.06,2.06,0,0,0,.48.09h0a2.15,2.15,0,0,0,1.43-3.87h0A2.06,2.06,0,0,0,316.44,215.64Z" transform="translate(-179 -60.54)" fill="#fdd835"/><path d="M934.22,822.9a4.29,4.29,0,0,1-2.39-5.19,2.06,2.06,0,0,0,.09-.48h0a2.15,2.15,0,0,0-3.87-1.43h0a2.06,2.06,0,0,0-.24.42,4.29,4.29,0,0,1-5.19,2.39,2.06,2.06,0,0,0-.48-.09h0a2.15,2.15,0,0,0-1.43,3.87h0a2.06,2.06,0,0,0,.42.24,4.29,4.29,0,0,1,2.39,5.19,2.06,2.06,0,0,0-.09.48h0a2.15,2.15,0,0,0,3.87,1.43h0a2.06,2.06,0,0,0,.24-.42,4.29,4.29,0,0,1,5.19-2.39,2.06,2.06,0,0,0,.48.09h0a2.15,2.15,0,0,0,1.43-3.87h0A2.06,2.06,0,0,0,934.22,822.9Z" transform="translate(-179 -60.54)" fill="#fdd835"/><circle cx="321.15" cy="75.33" r="7.01" fill="#f55f44"/><circle cx="823.31" cy="162.91" r="7.01" fill="#f55f44"/><circle cx="783.61" cy="371.95" r="7.01" fill="#4d8af0"/><circle cx="7.01" cy="28.61" r="7.01" fill="#47e6b1" opacity="0.5"/></svg>
\ No newline at end of file
diff --git a/static/js/.DS_Store b/static/js/.DS_Store
new file mode 100644
index 0000000000000000000000000000000000000000..2b34b398b816628ccab5531ea8edc27f7c0c53c9
GIT binary patch
literal 6148
zcmeHKOHRWu5FJBGKS;n1mN@}Z*KDGyEMUQg3(zzzP^C@P51(B&9EK}!6t2Mm;LX@V
zvD<7Bf^lU(*LlyLc~Rn+h)i#tb%~CMsD;WHb<k`ne4Xn?*>NK*HZsSAmKS+3O!Fe$
zVC#T7pbq>t2l(0DqXEtFJ0<`5<!fiClTRrUdgQp(=bU-30q+33HLd85Ml=K7(-0$!
z1<fk&2x!f5plySjgE^-Z>;Ww(3luMbq60-iQz$UITQP{xd;}U^Wlc-O#LBwd-z&Md
zDMK_%<Wv)vxKLHJ5KE3at%-><uksr-Ml=iX!{|BVDzgcHM%2Y`jNVh=59eBCN8)E1
z&dPV!TzVPiSbu;#M~GsZC%Dg^q5;nbbPIkMF>>>mhj4C)SqsFHqd%u-x`Os$+d2mM
zdg_MUD~>8$2f2F8COyKDOk!GvY{~eok}-_>w*`APm)5>TZPfvFKppsYfZq=>Dr4fX
zv?#9*G;#z0Mi`cYK7S6dCU%%OEG^;+im_6ll^S=%FjkK7*zppFr9~?z;|?Fjt!&&0
z#mMTIKNdQf#G<z9fI8qiuxtMw@&12afByGH`cEBD2mX`;ChA}Jdq~OctsBYlUK^v{
qpmJeeX;CC-+;%J--il99rQll39bn?Hw1^QD{SXivv{46s)PXOW_2s$%

literal 0
HcmV?d00001

diff --git a/static/js/app.js b/static/js/app.js
new file mode 100644
index 00000000..22491c82
--- /dev/null
+++ b/static/js/app.js
@@ -0,0 +1,238 @@
+var App = function() {
+    var MediaSize = {
+        xl: 1200,
+        lg: 992,
+        md: 991,
+        sm: 576
+    };
+    var ToggleClasses = {
+        headerhamburger: '.toggle-sidebar',
+        inputFocused: 'input-focused',
+    };
+
+    var Selector = {
+        mainHeader: '.header.navbar',
+        headerhamburger: '.toggle-sidebar',
+        fixed: '.fixed-top',
+        mainContainer: '.main-container',
+        sidebar: '#sidebar',
+        sidebarContent: '#sidebar-content',
+        sidebarStickyContent: '.sticky-sidebar-content',
+        ariaExpandedTrue: '#sidebar [aria-expanded="true"]',
+        ariaExpandedFalse: '#sidebar [aria-expanded="false"]',
+        contentWrapper: '#content',
+        contentWrapperContent: '.container',
+        mainContentArea: '.main-content',
+        searchFull: '.toggle-search',
+        overlay: {
+            sidebar: '.overlay',
+            cs: '.cs-overlay',
+            search: '.search-overlay'
+        }
+    };
+    
+    var toggleFunction = {
+        sidebar: function($recentSubmenu) {
+            $('.sidebarCollapse').on('click', function (sidebar) {
+                sidebar.preventDefault();
+                $(Selector.mainContainer).toggleClass("sidebar-closed");
+                $(Selector.mainHeader).toggleClass('expand-header');
+                $(Selector.mainContainer).toggleClass("sbar-open");
+                $('.overlay').toggleClass('show');
+                $('html,body').toggleClass('sidebar-noneoverflow');
+            });
+        },
+        overlay: function() {
+            $('#dismiss, .overlay, cs-overlay').on('click', function () {
+                // hide sidebar
+                $(Selector.mainContainer).addClass('sidebar-closed');
+                $(Selector.mainContainer).removeClass('sbar-open');
+                // hide overlay
+                $('.overlay').removeClass('show');
+                $('html,body').removeClass('sidebar-noneoverflow');
+            });
+        },
+        search: function() {
+            $(Selector.searchFull).click(function(event) {
+               $(this).parents('.search-animated').find('.search-full').addClass(ToggleClasses.inputFocused);
+               $(this).parents('.search-animated').addClass('show-search');
+               $(Selector.overlay.search).addClass('show');
+               $(Selector.overlay.search).addClass('show');
+            });
+
+            $(Selector.overlay.search).click(function(event) {
+               $(this).removeClass('show');
+               $(Selector.searchFull).parents('.search-animated').find('.search-full').removeClass(ToggleClasses.inputFocused);
+               $(Selector.searchFull).parents('.search-animated').removeClass('show-search');
+            });
+        }
+    }
+
+    var inBuiltfunctionality = {
+        mainCatActivateScroll: function() {
+            const ps = new PerfectScrollbar('.menu-categories', {
+                wheelSpeed:.5,
+                swipeEasing:!0,
+                minScrollbarLength:40,
+                maxScrollbarLength:300,
+                suppressScrollX : true
+            });
+        },
+        preventScrollBody: function() {
+            $('#sidebar').bind('mousewheel DOMMouseScroll', function(e) {
+                var scrollTo = null;
+
+                if (e.type == 'mousewheel') {
+                    scrollTo = (e.originalEvent.wheelDelta * -1);
+                }
+                else if (e.type == 'DOMMouseScroll') {
+                    scrollTo = 40 * e.originalEvent.detail;
+                }
+
+                if (scrollTo) {
+                    e.preventDefault();
+                    $(this).scrollTop(scrollTo + $(this).scrollTop());
+                }
+            });
+        },
+        functionalDropdown: function() {
+            var getDropdownElement = document.querySelectorAll('.more-dropdown .dropdown-item');
+            for (var i = 0; i < getDropdownElement.length; i++) {
+                getDropdownElement[i].addEventListener('click', function() {
+                    document.querySelectorAll('.more-dropdown .dropdown-toggle > span')[0].innerText = this.getAttribute('data-value');
+                })
+            }
+        }
+    }
+
+    var _mobileResolution = {
+        onRefresh: function() {
+            var windowWidth = window.innerWidth;
+            if ( windowWidth <= MediaSize.md ) {
+                toggleFunction.sidebar();
+            }
+        },
+
+        // Note : -  _mobileResolution -> onResize | Uncomment it if need for onresize functions for MOBILE RESOLUTION i.e. below or equal to 991px |
+
+        /*
+        onResize: function() {
+            $(window).on('resize', function(event) {
+                event.preventDefault();
+                var windowWidth = window.innerWidth;
+                if ( windowWidth <= MediaSize.md ) {
+                }
+            });
+        }
+        */
+    }
+
+    var _desktopResolution = {
+        onRefresh: function() {
+            var windowWidth = window.innerWidth;
+            if ( windowWidth > MediaSize.md ) {
+                toggleFunction.sidebar(true);
+            }
+        },
+
+        // Note : -  _desktopResolution -> onResize | Uncomment it if need, for onresize functions for DESKTOP RESOLUTION i.e. above or equal to 991px |
+
+        /*
+        onResize: function() {
+            $(window).on('resize', function(event) {
+                event.preventDefault();
+                var windowWidth = window.innerWidth;
+                if ( windowWidth > MediaSize.md ) {
+                }
+            });
+        }
+        */
+    }
+
+    function sidebarFunctionality() {
+        function sidebarCloser() {
+
+            if (window.innerWidth <= 991 ) {
+
+                if (!$('body').hasClass('alt-menu')) {
+
+                    $("#container").addClass("sidebar-closed");
+                    $('.overlay').removeClass('show');
+                } else {
+                    $(".navbar").removeClass("expand-header");
+                    $('.overlay').removeClass('show');
+                    $('#container').removeClass('sbar-open');
+                    $('html, body').removeClass('sidebar-noneoverflow');
+                }
+
+            } else if (window.innerWidth > 991 ) {
+
+                if (!$('body').hasClass('alt-menu')) {
+
+                    $("#container").removeClass("sidebar-closed");
+                    $(".navbar").removeClass("expand-header");
+                    $('.overlay').removeClass('show');
+                    $('#container').removeClass('sbar-open');
+                    $('html, body').removeClass('sidebar-noneoverflow');
+                } else {
+                    $('html, body').addClass('sidebar-noneoverflow');
+                    $("#container").addClass("sidebar-closed");
+                    $(".navbar").addClass("expand-header");
+                    $('.overlay').addClass('show');
+                    $('#container').addClass('sbar-open');
+                }
+            }
+
+        }
+
+        function sidebarMobCheck() {
+            if (window.innerWidth <= 991 ) {
+
+                if ( $('.main-container').hasClass('sbar-open') ) {
+                    return;
+                } else {
+                    sidebarCloser()
+                }
+            } else if (window.innerWidth > 991 ) {
+                sidebarCloser();
+            }
+        }
+
+        sidebarCloser();
+
+        $(window).resize(function(event) {
+            sidebarMobCheck();
+        });
+
+    }
+
+    return {
+        init: function() {
+            toggleFunction.overlay();
+            toggleFunction.search();
+            /*
+                Desktop Resoltion fn
+            */
+            _desktopResolution.onRefresh();
+
+            // Note : -  _desktopResolution -> onResize | Uncomment it if need for onresize functions for MOBILE RESOLUTION i.e. above or equal to 991px |
+
+            // _desktopResolution.onResize();
+
+            /*
+                Mobile Resoltion fn
+            */
+            _mobileResolution.onRefresh();
+
+            // Note : -  _mobileResolution -> onResize | Uncomment it if need for onresize functions for DESKTOP RESOLUTION i.e. below or equal to 991px |
+            
+            // _mobileResolution.onResize();
+
+            sidebarFunctionality();
+            inBuiltfunctionality.mainCatActivateScroll();
+            inBuiltfunctionality.preventScrollBody();
+            inBuiltfunctionality.functionalDropdown();
+        }
+    }
+
+}();
diff --git a/static/js/apps/contact.js b/static/js/apps/contact.js
new file mode 100644
index 00000000..8e21eff6
--- /dev/null
+++ b/static/js/apps/contact.js
@@ -0,0 +1,319 @@
+$(document).ready(function() {
+
+  checkall('contact-check-all', 'contact-chkbox');
+
+  $('#input-search').on('keyup', function() {
+    var rex = new RegExp($(this).val(), 'i');
+      $('.searchable-items .items:not(.items-header-section)').hide();
+      $('.searchable-items .items:not(.items-header-section)').filter(function() {
+          return rex.test($(this).text());
+      }).show();
+  });
+
+  $('.view-grid').on('click', function(event) {
+    event.preventDefault();
+    /* Act on the event */
+
+    $(this).parents('.switch').find('.view-list').removeClass('active-view');
+    $(this).addClass('active-view');
+
+    $(this).parents('.searchable-container').removeClass('list');
+    $(this).parents('.searchable-container').addClass('grid');
+
+    $(this).parents('.searchable-container').find('.searchable-items').removeClass('list');
+    $(this).parents('.searchable-container').find('.searchable-items').addClass('grid');
+
+  });
+
+  $('.view-list').on('click', function(event) {
+    event.preventDefault();
+    /* Act on the event */
+    $(this).parents('.switch').find('.view-grid').removeClass('active-view');
+    $(this).addClass('active-view');
+
+    $(this).parents('.searchable-container').removeClass('grid');
+    $(this).parents('.searchable-container').addClass('list');
+
+    $(this).parents('.searchable-container').find('.searchable-items').removeClass('grid');
+    $(this).parents('.searchable-container').find('.searchable-items').addClass('list');
+  });
+
+  $('#btn-add-contact').on('click', function(event) {
+    $('#addContactModal #btn-add').show();
+    $('#addContactModal #btn-edit').hide();
+    $('#addContactModal').modal('show');
+  })
+
+function deleteContact() {
+  $(".delete").on('click', function(event) {
+    event.preventDefault();
+    /* Act on the event */
+    $(this).parents('.items').remove();
+  });
+}
+
+function addContact() {
+  $("#btn-add").click(function() {
+
+    var getParent = $(this).parents('.modal-content');
+
+    var $_name = getParent.find('#c-name');
+    var $_email = getParent.find('#c-email');
+    var $_occupation = getParent.find('#c-occupation');
+    var $_phone = getParent.find('#c-phone');
+    var $_location = getParent.find('#c-location');
+
+    var $_getValidationField = document.getElementsByClassName('validation-text');
+    var reg = /^.+@[^\.].*\.[a-z]{2,}$/;
+    var phoneReg = /^\d*\.?\d*$/;
+
+    var $_nameValue = $_name.val();
+    var $_emailValue = $_email.val();
+    var $_occupationValue = $_occupation.val();
+    var $_phoneValue = $_phone.val();
+    var $_locationValue = $_location.val();
+
+    if ($_nameValue == "") {
+      $_getValidationField[0].innerHTML = 'Name must be filled out';
+      $_getValidationField[0].style.display = 'block';
+    } else {
+      $_getValidationField[0].style.display = 'none';
+    }
+
+    if ($_emailValue == "") {
+      $_getValidationField[1].innerHTML = 'Email Id must be filled out';
+      $_getValidationField[1].style.display = 'block';
+    } else if((reg.test($_emailValue) == false)) {
+      $_getValidationField[1].innerHTML = 'Invalid Email';
+      $_getValidationField[1].style.display = 'block';
+    } else {
+      $_getValidationField[1].style.display = 'none';
+    }
+
+    if ($_phoneValue == "") {
+      $_getValidationField[2].innerHTML = 'Invalid (Enter 10 Digits)';
+      $_getValidationField[2].style.display = 'block';
+    } else if((phoneReg.test($_phoneValue) == false)) {
+      $_getValidationField[2].innerHTML = 'Please Enter A numeric value';
+      $_getValidationField[2].style.display = 'block';
+    } else {
+      $_getValidationField[2].style.display = 'none';
+    }
+
+    if ($_nameValue == "" || $_emailValue == "" || (reg.test($_emailValue) == false) || $_phoneValue == "" || (phoneReg.test($_phoneValue) == false)) {
+      return false;
+    }
+
+    $html = '<div class="items">' +
+              '<div class="item-content">' +
+                  '<div class="user-profile">' +
+
+                      '<div class="n-chk align-self-center text-center">' +
+                          '<label class="new-control new-checkbox checkbox-primary">' +
+                            '<input type="checkbox" class="new-control-input contact-chkbox">' +
+                            '<span class="new-control-indicator"></span>' +
+                          '</label>' +
+                      '</div>' +
+
+                      '<img src="assets/img/90x90.jpg">' +
+                      '<div class="user-meta-info">' +
+                          '<p class="user-name" data-name='+ $_nameValue +'>'+ $_nameValue +'</p>' +
+                          '<p class="user-work" data-occupation='+ $_occupationValue +'>'+ $_occupationValue +'</p>' +
+                      '</div>' +
+                  '</div>' +
+                  '<div class="user-email">' +
+                      '<p class="info-title">Email: </p>' +
+                      '<p class="usr-email-addr" data-email='+ $_emailValue +'>'+ $_emailValue +'</p>' +
+                  '</div>' +
+                  '<div class="user-location">' +
+                      '<p class="info-title">Location: </p>' +
+                      '<p class="usr-location" data-location='+ $_locationValue +'>'+ $_locationValue +'</p>' +
+                  '</div>' +
+                  '<div class="user-phone">' +
+                      '<p class="info-title">Phone: </p>' +
+                      '<p class="usr-ph-no" data-phone='+ $_phoneValue +'>'+ $_phoneValue +'</p>' +
+                  '</div>' +
+                  '<div class="action-btn">' +
+                      '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit-2 edit"><path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path></svg>'+
+                      '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-user-minus delete"><path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="8.5" cy="7" r="4"></circle><line x1="23" y1="11" x2="17" y2="11"></line></svg>'
+                  '</div>' +
+              '</div>' +
+          '</div>';
+
+      $(".searchable-items > .items-header-section").after($html);
+      $('#addContactModal').modal('hide');
+
+      var $_setNameValueEmpty = $_name.val('');
+      var $_setEmailValueEmpty = $_email.val('');
+      var $_setOccupationValueEmpty = $_occupation.val('');
+      var $_setPhoneValueEmpty = $_phone.val('');
+      var $_setLocationValueEmpty = $_location.val('');
+
+    deleteContact();
+    editContact();
+    checkall('contact-check-all', 'contact-chkbox');
+  });  
+}
+
+$('#addContactModal').on('hidden.bs.modal', function (e) {
+    var $_name = document.getElementById('c-name');
+    var $_email = document.getElementById('c-email');
+    var $_occupation = document.getElementById('c-occupation');
+    var $_phone = document.getElementById('c-phone');
+    var $_location = document.getElementById('c-location');
+    var $_getValidationField = document.getElementsByClassName('validation-text');
+
+    var $_setNameValueEmpty = $_name.value = '';
+    var $_setEmailValueEmpty = $_email.value = '';
+    var $_setOccupationValueEmpty = $_occupation.value = '';
+    var $_setPhoneValueEmpty = $_phone.value = '';
+    var $_setLocationValueEmpty = $_location.value = '';
+
+    for (var i = 0; i < $_getValidationField.length; i++) {
+      e.preventDefault();
+      $_getValidationField[i].style.display = 'none';
+    }
+})
+
+function editContact() {
+  $('.edit').on('click', function(event) {
+
+    $('#addContactModal #btn-add').hide();
+    $('#addContactModal #btn-edit').show();
+
+    // Get Parents
+    var getParentItem = $(this).parents('.items');
+    var getModal = $('#addContactModal');
+
+    // Get List Item Fields
+    var $_name = getParentItem.find('.user-name');
+    var $_email = getParentItem.find('.usr-email-addr');
+    var $_occupation = getParentItem.find('.user-work');
+    var $_phone = getParentItem.find('.usr-ph-no');
+    var $_location = getParentItem.find('.usr-location');
+
+    // Get Attributes
+    var $_nameAttrValue = $_name.attr('data-name');
+    var $_emailAttrValue = $_email.attr('data-email');
+    var $_occupationAttrValue = $_occupation.attr('data-occupation');
+    var $_phoneAttrValue = $_phone.attr('data-phone');
+    var $_locationAttrValue = $_location.attr('data-location');
+
+    // Get Modal Attributes
+    var $_getModalNameInput = getModal.find('#c-name');
+    var $_getModalEmailInput = getModal.find('#c-email');
+    var $_getModalOccupationInput = getModal.find('#c-occupation');
+    var $_getModalPhoneInput = getModal.find('#c-phone');
+    var $_getModalLocationInput = getModal.find('#c-location');
+
+    // Set Modal Field's Value
+    var $_setModalNameValue = $_getModalNameInput.val($_nameAttrValue);
+    var $_setModalEmailValue = $_getModalEmailInput.val($_emailAttrValue);
+    var $_setModalOccupationValue = $_getModalOccupationInput.val($_occupationAttrValue);
+    var $_setModalPhoneValue = $_getModalPhoneInput.val($_phoneAttrValue);
+    var $_setModalLocationValue = $_getModalLocationInput.val($_locationAttrValue);
+
+    $('#addContactModal').modal('show');
+
+    $("#btn-edit").off('click').click(function(){
+
+      var getParent = $(this).parents('.modal-content');
+
+      var $_getInputName = getParent.find('#c-name');
+      var $_getInputNmail = getParent.find('#c-email');
+      var $_getInputNccupation = getParent.find('#c-occupation');
+      var $_getInputNhone = getParent.find('#c-phone');
+      var $_getInputNocation = getParent.find('#c-location');
+
+
+      var $_nameValue = $_getInputName.val();
+      var $_emailValue = $_getInputNmail.val();
+      var $_occupationValue = $_getInputNccupation.val();
+      var $_phoneValue = $_getInputNhone.val();
+      var $_locationValue = $_getInputNocation.val();
+
+      var  setUpdatedNameValue = $_name.text($_nameValue);
+      var  setUpdatedEmailValue = $_email.text($_emailValue);
+      var  setUpdatedOccupationValue = $_occupation.text($_occupationValue);
+      var  setUpdatedPhoneValue = $_phone.text($_phoneValue);
+      var  setUpdatedLocationValue = $_location.text($_locationValue);
+
+      var  setUpdatedAttrNameValue = $_name.attr('data-name', $_nameValue);
+      var  setUpdatedAttrEmailValue = $_email.attr('data-email', $_emailValue);
+      var  setUpdatedAttrOccupationValue = $_occupation.attr('data-occupation', $_occupationValue);
+      var  setUpdatedAttrPhoneValue = $_phone.attr('data-phone', $_phoneValue);
+      var  setUpdatedAttrLocationValue = $_location.attr('data-location', $_locationValue);
+      $('#addContactModal').modal('hide');
+    });
+  })
+}
+
+$(".delete-multiple").on("click", function() {
+    var inboxCheckboxParents = $(".contact-chkbox:checked").parents('.items');   
+      inboxCheckboxParents.remove();
+});
+
+deleteContact();
+addContact();
+editContact();
+
+})
+
+
+// Validation Process
+
+var $_getValidationField = document.getElementsByClassName('validation-text');
+var reg = /^.+@[^\.].*\.[a-z]{2,}$/;
+var phoneReg = /^\d{10}$/;
+
+getNameInput = document.getElementById('c-name');
+
+getNameInput.addEventListener('input', function() {
+
+  getNameInputValue = this.value;
+
+  if (getNameInputValue == "") {
+    $_getValidationField[0].innerHTML = 'Name Required';
+    $_getValidationField[0].style.display = 'block';
+  } else {
+    $_getValidationField[0].style.display = 'none';
+  }
+
+})
+
+
+getEmailInput = document.getElementById('c-email');
+
+getEmailInput.addEventListener('input', function() {
+
+    getEmailInputValue = this.value;
+
+    if (getEmailInputValue == "") {
+      $_getValidationField[1].innerHTML = 'Email Required';
+      $_getValidationField[1].style.display = 'block';
+    } else if((reg.test(getEmailInputValue) == false)) {
+      $_getValidationField[1].innerHTML = 'Invalid Email';
+      $_getValidationField[1].style.display = 'block';
+    } else {
+      $_getValidationField[1].style.display = 'none';
+    }
+
+})
+
+getPhoneInput = document.getElementById('c-phone');
+
+getPhoneInput.addEventListener('input', function() {
+
+  getPhoneInputValue = this.value;
+
+  if (getPhoneInputValue == "") {
+    $_getValidationField[2].innerHTML = 'Phone Number Required';
+    $_getValidationField[2].style.display = 'block';
+  } else if((phoneReg.test(getPhoneInputValue) == false)) {
+    $_getValidationField[2].innerHTML = 'Invalid (Enter 10 Digits)';
+    $_getValidationField[2].style.display = 'block';
+  } else {
+    $_getValidationField[2].style.display = 'none';
+  }
+
+})
diff --git a/static/js/apps/custom-mailbox.js b/static/js/apps/custom-mailbox.js
new file mode 100644
index 00000000..cc398029
--- /dev/null
+++ b/static/js/apps/custom-mailbox.js
@@ -0,0 +1,1340 @@
+$(document).ready(function() {
+
+
+	var today = new Date();
+  	var dd = String(today.getDate()).padStart(2, '0');
+  	var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
+  	var yyyy = today.getFullYear();
+  	var today = mm + '/' + dd + '/' + yyyy;
+
+  	$('.current-recent-mail').text(today + ' -')
+
+
+	// Applying Scroll Bar
+
+	const ps = new PerfectScrollbar('.message-box-scroll');
+	const mailScroll = new PerfectScrollbar('.mail-sidebar-scroll', {
+		suppressScrollX : true
+	});
+
+	function mailInboxScroll() {
+		$('.mailbox-inbox .collapse').each(function(){ const mailContainerScroll = new PerfectScrollbar($(this)[0], {
+			suppressScrollX : true
+		}); });
+	}
+	mailInboxScroll();
+
+
+	/*
+		fn. dynamicBadgeNotification ==> Get the badge count for mail sidebar
+	*/
+	function dynamicBadgeNotification( setMailCategoryCount ) {
+		var mailCategoryCount = setMailCategoryCount;
+
+		// Get Parents Div(s)
+		var get_ParentsDiv = $('.mail-item');
+		var get_MailInboxParentsDiv = $('.mail-item.mailInbox');
+		var get_UnreadMailInboxParentsDiv = $('[id*="unread-"]');
+		var get_DraftParentsDiv = $('.mail-item.draft');
+
+		// Get Parents Div(s) Counts
+		var get_MailInboxElementsCount = get_MailInboxParentsDiv.length;
+		var get_UnreadMailInboxElementsCount = get_UnreadMailInboxParentsDiv.length;
+		var get_DraftElementsCount = get_DraftParentsDiv.length;
+
+		// Get Badge Div(s)
+		var getBadgeMailInboxDiv = $('#mailInbox .mail-badge');
+		var getBadgeDraftMailDiv = $('#draft .mail-badge');
+
+		if (mailCategoryCount === 'mailInbox') {
+			if (get_UnreadMailInboxElementsCount === 0) {
+				getBadgeMailInboxDiv.text('');
+				return;
+			}
+			getBadgeMailInboxDiv.text(get_UnreadMailInboxElementsCount);
+		} else if (mailCategoryCount === 'draftmail') {
+			if (get_DraftElementsCount === 0) {
+				getBadgeDraftMailDiv.text('');
+				return;
+			}
+			getBadgeDraftMailDiv.text(get_DraftElementsCount);
+		}
+	}
+
+	dynamicBadgeNotification('mailInbox');
+	dynamicBadgeNotification('draftmail');
+
+	// Open Modal on Compose Button Click
+	$('#btn-compose-mail').on('click', function(event) {
+		$('#btn-send').show();
+		$('#btn-reply').hide();
+		$('#btn-fwd').hide();
+		$('#composeMailModal').modal('show');
+
+		// Save And Reply Save
+		$('#btn-save').show();
+		$('#btn-reply-save').hide();
+		$('#btn-fwd-save').hide();
+	})
+
+	/*
+		Init. fn. checkAll ==> Checkbox check all
+	*/
+	document.getElementById('inboxAll').addEventListener('click', function() {
+		var getActiveList = document.querySelectorAll('.tab-title .list-actions.active');
+		var getActiveListID = '.'+getActiveList[0].id;
+
+		var getItemsCheckboxes = '';
+
+		if (getActiveList[0].id === 'personal' || getActiveList[0].id === 'work' || getActiveList[0].id === 'social' || getActiveList[0].id === 'private') {
+
+			getItemsGroupCheckboxes = document.querySelectorAll(getActiveListID);
+			for (var i = 0; i < getItemsGroupCheckboxes.length; i++) {
+				getItemsGroupCheckboxes[i].parentNode.parentNode.parentNode;
+
+				getItemsCheckboxes = document.querySelectorAll('.'+getItemsGroupCheckboxes[i].parentNode.parentNode.parentNode.className.split(' ')[0] + ' ' + getActiveListID + ' .inbox-chkbox');
+				
+				if (getItemsCheckboxes[i].checked) {
+					getItemsCheckboxes[i].checked = false;
+				} else {
+					if (this.checked) {
+						getItemsCheckboxes[i].checked = true;
+					}
+				}
+			}
+
+		} else {
+			getItemsCheckboxes = document.querySelectorAll('.mail-item'+getActiveListID + ' .inbox-chkbox');
+			for (var i = 0; i < getItemsCheckboxes.length; i++ ) {
+				if (getItemsCheckboxes[i].checked) {
+					getItemsCheckboxes[i].checked = false;
+				} else {
+					if (this.checked) {
+						getItemsCheckboxes[i].checked = true;
+					}
+				}
+			}
+		}
+	})
+
+	/*
+		fn. randomString ==> Generate Random Numbers
+	*/
+	function randomString(length, chars) {
+		var result = '';
+		for (var i = length; i > 0; --i) result += chars[Math.round(Math.random() * (chars.length - 1))];
+		return result;
+	}
+
+	/*
+		fn. formatAMPM ==> Get Time in 24hr Format
+	*/
+	function formatAMPM(date) {
+	  var hours = date.getHours();
+	  var minutes = date.getMinutes();
+	  var ampm = hours >= 12 ? 'PM' : 'AM';
+	  hours = hours % 12;
+	  hours = hours ? hours : 12; // the hour '0' should be '12'
+	  minutes = minutes < 10 ? '0'+minutes : minutes;
+	  var strTime = hours + ':' + minutes + ' ' + ampm;
+	  return strTime;
+	}
+
+	/*
+		fn. formatBytes ==> Calculate and convert bytes into ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
+	*/
+	function formatBytes(bytes, decimals) {
+	    if (bytes === 0) return '0 Bytes';
+	    const k = 1024;
+	    const dm = decimals < 0 ? 0 : decimals;
+	    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+	    const i = Math.floor(Math.log(bytes) / Math.log(k));
+	    return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
+	}
+
+	// Search on each key pressed
+
+	$('.input-search').on('keyup', function() {
+	  var rex = new RegExp($(this).val(), 'i');
+	    $('.message-box .mail-item').hide();
+	    $('.message-box .mail-item').filter(function() {
+	        return rex.test($(this).text());
+	    }).show();
+	});
+
+	// Tooltip
+
+	$('[data-toggle="tooltip"]').tooltip({
+	    'template': '<div class="tooltip actions-btn-tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>',
+	})
+
+	// Triggered when mail is Closed
+
+	$('.close-message').on('click', function(event) {
+		event.preventDefault();
+		$('.content-box .collapse').collapse('hide')
+		$(this).parents('.content-box').css({
+			width: '0',
+			left: 'auto',
+			right: '-46px'
+		});
+	});
+
+	// Open Mail Sidebar on resolution below or equal to 991px.
+
+	$('.mail-menu').on('click', function(e){
+		$(this).parents('.mail-box-container').children('.tab-title').addClass('mail-menu-show')
+		$(this).parents('.mail-box-container').children('.mail-overlay').addClass('mail-overlay-show')
+	})
+
+	// Close sidebar when clicked on ovelay ( and ovelay itself ).
+
+	$('.mail-overlay').on('click', function(e){
+		$(this).parents('.mail-box-container').children('.tab-title').removeClass('mail-menu-show')
+		$(this).removeClass('mail-overlay-show')
+	})
+
+	/*
+		fn. contentBoxPosition ==> Triggered when clicked on any each mail to show the mail content.
+	*/
+	function contentBoxPosition() {
+		$('.content-box .collapse').on('show.bs.collapse', function(event) {
+			var getCollpaseElementId = this.id;
+			var getSelectedMailTitleElement = $('.content-box').find('.mail-title');
+			var getSelectedMailContentTitle = $(this).find('.mail-content').attr('data-mailTitle');
+			$(this).parent('.content-box').css({
+				width: '100%',
+				left: '0',
+				right: '100%'
+			});
+			$(this).parents('#mailbox-inbox').find('.message-box [data-target="#'+getCollpaseElementId+'"]').parents('.mail-item').removeAttr('id');
+			getSelectedMailTitleElement.text(getSelectedMailContentTitle);
+			getSelectedMailTitleElement.attr('data-selectedMailTitle', getSelectedMailContentTitle);
+			dynamicBadgeNotification('mailInbox');
+		})
+	}
+	function stopPropagations() {
+		$('.mail-item-heading .mail-item-inner .new-control').on('click', function(e){
+		    e.stopPropagation();
+		})
+	}
+
+	/*
+		====================
+			Quill Editor
+		====================
+	*/
+
+	var quill = new Quill('#editor-container', {
+	  modules: {
+	    toolbar: [
+	      [{ header: [1, 2, false] }],
+	      ['bold', 'italic', 'underline'],
+	      ['image', 'code-block']
+	    ]
+	  },
+	  placeholder: 'Compose an epic...',
+	  theme: 'snow'  // or 'bubble'
+	});
+
+	// Validating input fields
+
+	var $_getValidationField = document.getElementsByClassName('validation-text');
+	var emailReg = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+
+	getEmailToInput = document.getElementById('m-to');
+
+	getEmailToInput.addEventListener('input', function() {
+
+	  	getEmailToInputValue = this.value;
+
+	    if (getEmailToInputValue == "") {
+	      $_getValidationField[0].innerHTML = 'Email Required';
+	      $_getValidationField[0].style.display = 'block';
+	    } else if((emailReg.test(getEmailToInputValue) == false)) {
+	      $_getValidationField[0].innerHTML = 'Invalid Email';
+	      $_getValidationField[0].style.display = 'block';
+	    } else {
+	      $_getValidationField[0].style.display = 'none';
+	    }
+	})
+
+	getCCEmailInput = document.getElementById('m-cc');
+	getCCEmailInput.addEventListener('input', function() {
+
+	    getCCEmailInputValue = this.value;
+
+	    if (!getCCEmailInputValue == "") {
+	       if((emailReg.test(getCCEmailInputValue) == false)) {
+		      $_getValidationField[1].innerHTML = 'Invalid Email';
+		      $_getValidationField[1].style.display = 'block';
+		    } else {
+		      	$_getValidationField[1].style.display = 'none';
+		    }
+	    } else {
+	      $_getValidationField[1].style.display = 'none';
+	    }
+
+	})
+
+	getSubjectInput = document.getElementById('m-subject');
+
+	getSubjectInput.addEventListener('input', function() {
+
+	  getSubjectInput = this.value;
+
+	  if (getSubjectInput == "") {
+	    $_getValidationField[2].innerHTML = 'Subject Required';
+	    $_getValidationField[2].style.display = 'block';
+	  } else {
+	    $_getValidationField[2].style.display = 'none';
+	  }
+
+	})
+
+	$('#composeMailModal').on('hidden.bs.modal', function (e) {
+	    
+	  	$(this)
+	    .find("input,textarea")
+	       .val('')
+	       .end();
+
+	    quill.deleteText(0, 2000);
+
+	    for (var i = 0; i < $_getValidationField.length; i++) {
+	      e.preventDefault();
+	      $_getValidationField[i].style.display = 'none';
+	    }
+	})
+
+	
+	/*
+		=========================
+			Tab Functionality
+		=========================
+	*/
+	var $listbtns = $('.list-actions').click(function() {
+		$(this).parents('.mail-box-container').find('.mailbox-inbox > .content-box').css({
+			width: '0',
+			left: 'auto',
+			right: '-46px'
+		});
+		$('.content-box .collapse').collapse('hide');
+		var getActionCenterDivElement = $(this).parents('.mail-box-container').find('.action-center');
+	  	if (this.id == 'mailInbox') {
+			var $el = $('.' + this.id).show();
+			getActionCenterDivElement.removeClass('tab-trash-active');
+			$('#ct > div').not($el).hide();
+	  	} else if (this.id == 'personal') {
+	  		$el = '.' + $(this).attr('id');
+	  		$elShow = $($el).show();
+	  		getActionCenterDivElement.removeClass('tab-trash-active');
+		    $('#ct > div .mail-item-heading'+$el).parents('.mail-item').show();
+		    $('#ct > div .mail-item-heading').not($el).parents('.mail-item').hide();
+	  	} else if (this.id == 'work') {
+		    $el = '.' + $(this).attr('id');
+	  		$elShow = $($el).show();
+	  		getActionCenterDivElement.removeClass('tab-trash-active');
+		    $('#ct > div .mail-item-heading'+$el).parents('.mail-item').show();
+		    $('#ct > div .mail-item-heading').not($el).parents('.mail-item').hide();
+	  	} else if (this.id == 'social') {
+		    $el = '.' + $(this).attr('id');
+	  		$elShow = $($el).show();
+	  		getActionCenterDivElement.removeClass('tab-trash-active');
+		    $('#ct > div .mail-item-heading'+$el).parents('.mail-item').show();
+		    $('#ct > div .mail-item-heading').not($el).parents('.mail-item').hide();
+	  	} else if (this.id == 'private') {
+		    $el = '.' + $(this).attr('id');
+	  		$elShow = $($el).show();
+	  		getActionCenterDivElement.removeClass('tab-trash-active');
+		    $('#ct > div .mail-item-heading'+$el).parents('.mail-item').show();
+		    $('#ct > div .mail-item-heading').not($el).parents('.mail-item').hide();
+	  		getActionCenterDivElement.removeClass('tab-trash-active');
+	  	} else if (this.id == 'trashed') {
+	  		var $el = $('.' + this.id).show();
+	  		getActionCenterDivElement.addClass('tab-trash-active');
+			$('#ct > div').not($el).hide();
+	  	} else {
+	    	var $el = $('.' + this.id).show();
+	    	getActionCenterDivElement.removeClass('tab-trash-active');
+	    	$('#ct > div').not($el).hide();
+	  	}
+	  	$listbtns.removeClass('active');
+	  	$(this).addClass('active');
+	})
+
+	setTimeout(function() {
+        $(".list-actions#mailInbox").trigger('click');
+    },10);
+
+	// Mark As Important
+	$(".action-important").on("click", function() {
+		var notificationText = '';
+		var getCheckedItemlength = $(".inbox-chkbox:checked").length;
+
+		if ($(".inbox-chkbox:checked").parents('.mail-item').hasClass('important')) {
+			var notificationText = getCheckedItemlength < 2 ? getCheckedItemlength + ' Mail removed from Important' : getCheckedItemlength + ' Mails removed from Important';
+		} else {
+			var notificationText = getCheckedItemlength < 2 ? getCheckedItemlength + ' Mail Added to Important' : getCheckedItemlength + ' Mails Added to Important';
+		}
+
+	  	$(".inbox-chkbox:checked").parents('.mail-item').toggleClass('important');
+ 		$(".inbox-chkbox:checked").prop('checked',false);
+ 		$("#inboxAll:checked").prop('checked',false);
+ 		$(".list-actions#important").trigger('click');
+		Snackbar.show({
+	        text: notificationText,
+	        width: 'auto',
+	        pos: 'top-center',
+	        actionTextColor: '#bfc9d4',
+	        backgroundColor: '#515365'
+	    });
+	});
+
+	// Mark as Span
+	$(".action-spam").on("click", function() {
+		var inboxCheckboxParents = $(".inbox-chkbox:checked").parents('.mail-item');
+		var mailItemClass = inboxCheckboxParents.attr('class').split(' ')[1];
+		var mailItemClassRemoveClass = inboxCheckboxParents.toggleClass('mailInbox');
+
+		var notificationText = '';
+		var getCheckedItemlength = $(".inbox-chkbox:checked").length;
+
+		if ($(".inbox-chkbox:checked").parents('.mail-item').hasClass('spam')) {
+			var notificationText = getCheckedItemlength < 2 ? getCheckedItemlength + ' Mail removed from Spam' : getCheckedItemlength + ' Mails removed from Spam';
+		} else {
+			var notificationText = getCheckedItemlength < 2 ? getCheckedItemlength + ' Mail Added to Spam' : getCheckedItemlength + ' Mails Added to Spam';
+		}
+	  	inboxCheckboxParents.toggleClass('spam');
+ 		$(".inbox-chkbox:checked").prop('checked',false);
+ 		$("#inboxAll:checked").prop('checked',false);
+ 		$(".list-actions#spam").trigger('click');
+
+ 		Snackbar.show({
+	        text: notificationText,
+	        width: 'auto',
+	        pos: 'top-center',
+	        actionTextColor: '#bfc9d4',
+	        backgroundColor: '#515365'
+	    });
+	});
+
+	// Mark as read
+	$(".action-mark_as_read").on("click", function() {
+		var inboxCheckboxParents = $(".inbox-chkbox:checked").parents('.mail-item');
+
+		var notificationText = '';
+		var getCheckedItemlength = $(".inbox-chkbox:checked").length;
+		var notificationText = getCheckedItemlength < 2 ? getCheckedItemlength + ' Mail marked as Read' : getCheckedItemlength + ' Mails marked as Read';
+
+		inboxCheckboxParents.removeAttr('id');
+		dynamicBadgeNotification('mailInbox');
+ 		$("#inboxAll:checked").prop('checked',false);
+ 		$(".inbox-chkbox:checked").prop('checked',false);
+
+ 		Snackbar.show({
+	        text: notificationText,
+	        width: 'auto',
+	        pos: 'top-center',
+	        actionTextColor: '#bfc9d4',
+	        backgroundColor: '#515365'
+	    });
+	})
+
+	// Mark as Unread
+	$(".action-mark_as_unRead").on("click", function() {
+		var inboxCheckboxParents = $(".inbox-chkbox:checked").parents('.mail-item');
+		var getMailTitle = inboxCheckboxParents.find('.mail-title').attr('data-mailtitle');
+		var randomAlphaNumeric = randomString(10, '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ');
+
+		var notificationText = '';
+		var getCheckedItemlength = $(".inbox-chkbox:checked").length;
+		var notificationText = getCheckedItemlength < 2 ? getCheckedItemlength + ' Mail marked as UnRead' : getCheckedItemlength + ' Mails marked as UnRead';
+
+		inboxCheckboxParents.attr('id', 'unread-'+getMailTitle.replace(/\s+/g, '-').toLowerCase()+randomAlphaNumeric);
+		dynamicBadgeNotification('mailInbox');
+ 		$("#inboxAll:checked").prop('checked',false);
+ 		$(".inbox-chkbox:checked").prop('checked',false);
+
+ 		Snackbar.show({
+	        text: notificationText,
+	        width: 'auto',
+	        pos: 'top-center',
+	        actionTextColor: '#bfc9d4',
+	        backgroundColor: '#515365'
+	    });
+
+	})
+
+	// Delete a mail
+	$(".action-delete").on("click", function() {
+		var inboxCheckboxParents = $(".inbox-chkbox:checked").parents('.mail-item');
+		var inboxMailItemClass = inboxCheckboxParents.attr('class');
+        var getFirstClass = inboxMailItemClass.split(' ')[1];
+        var getSecondClass = inboxMailItemClass.split(' ')[2];
+        var getThirdClass = inboxMailItemClass.split(' ')[3];
+        var getFourthClass = inboxMailItemClass.split(' ')[4];
+        var getFifthClass = inboxMailItemClass.split(' ')[5];
+
+        var notificationText = '';
+		var getCheckedItemlength = $(".inbox-chkbox:checked").length;
+
+		var notificationText = getCheckedItemlength < 2 ? getCheckedItemlength + ' Mail Deleted' : getCheckedItemlength + ' Mails Deleted';
+
+        if (getFirstClass === 'mailInbox' || getFirstClass === 'sentmail' || getFirstClass === 'draft' || getFirstClass === 'spam') {
+          inboxCheckboxParents.removeClass(getFirstClass);
+        }
+        if (getSecondClass === 'mailInbox' || getSecondClass === 'important') {
+          inboxCheckboxParents.removeClass(getSecondClass);
+        }
+	  	inboxCheckboxParents.addClass('trashed');
+ 		$(".inbox-chkbox:checked").prop('checked',false);
+ 		$("#inboxAll:checked").prop('checked',false);
+ 		$(".list-actions#trashed").trigger('click');
+
+ 		Snackbar.show({
+	        text: notificationText,
+	        width: 'auto',
+	        pos: 'top-center',
+	        actionTextColor: '#bfc9d4',
+	        backgroundColor: '#515365'
+	    });
+	});
+
+	// Revive Mail from Tash
+	$(".revive-mail").on("click", function() {
+		var inboxCheckboxParents = $(".inbox-chkbox:checked").parents('.mail-item');
+		var inboxMailItemClass = inboxCheckboxParents.attr('class');
+		var getFirstClass = inboxMailItemClass.split(' ')[1];
+
+		var notificationText = '';
+		var getCheckedItemlength = $(".inbox-chkbox:checked").length;
+		var notificationText = getCheckedItemlength < 2 ? getCheckedItemlength + ' Mail restored' : getCheckedItemlength + ' Mails restored';
+
+
+		inboxCheckboxParents.removeClass(getFirstClass);
+		inboxCheckboxParents.addClass('mailInbox');
+ 		$(".inbox-chkbox:checked").prop('checked',false);
+ 		$("#inboxAll:checked").prop('checked',false);
+ 		$(".list-actions#mailInbox").trigger('click');
+
+ 		Snackbar.show({
+	        text: notificationText,
+	        width: 'auto',
+	        pos: 'top-center',
+	        actionTextColor: '#bfc9d4',
+	        backgroundColor: '#515365'
+	    });
+	})
+
+	// Permanently Delete Mail
+	$(".permanent-delete").on("click", function() {
+		var inboxCheckboxParents = $(".inbox-chkbox:checked").parents('.mail-item');
+
+		var notificationText = '';
+		var getCheckedItemlength = $(".inbox-chkbox:checked").length;
+		var notificationText = getCheckedItemlength < 2 ? getCheckedItemlength + ' Mail Permanently Deleted' : getCheckedItemlength + ' Mails Permanently Deleted';
+
+		if (inboxCheckboxParents.hasClass('trashed')) {
+			inboxCheckboxParents.remove();
+		}
+ 		$("#inboxAll:checked").prop('checked',false);
+
+ 		Snackbar.show({
+	        text: notificationText,
+	        width: 'auto',
+	        pos: 'top-center',
+	        actionTextColor: '#bfc9d4',
+	        backgroundColor: '#515365'
+	    });
+	})
+
+	// Mark mail Priority/Groups as [ Personal, Work, Social, Private ]
+	$(".label-group-item").on("click", function() {
+		var getLabelColor = $(this).attr('class').split(' ')[1];
+		var splitLabelColor = getLabelColor.split('-')[1];
+
+
+		var notificationText = '';
+		var getCheckedItemlength = $(".inbox-chkbox:checked").length;
+
+		if ($(".inbox-chkbox:checked").parents('.mail-item-heading').hasClass(splitLabelColor)) {
+			var notificationText = getCheckedItemlength < 2 ? getCheckedItemlength + ' Mail removed from '+ splitLabelColor.toUpperCase() +' Group' : getCheckedItemlength + ' Mails removed from '+ splitLabelColor.toUpperCase() +' Group';
+		} else {
+			var notificationText = getCheckedItemlength < 2 ? getCheckedItemlength + ' Mail Grouped as ' + splitLabelColor.toUpperCase() : getCheckedItemlength + ' Mails Grouped as ' + splitLabelColor.toUpperCase();
+		}
+
+
+	  	$(".inbox-chkbox:checked").parents('.mail-item-heading').toggleClass(splitLabelColor);
+ 		$(".inbox-chkbox:checked").prop('checked',false);
+ 		$("#inboxAll:checked").prop('checked',false);
+
+ 		Snackbar.show({
+	        text: notificationText,
+	        width: 'auto',
+	        pos: 'top-center',
+	        actionTextColor: '#bfc9d4',
+	        backgroundColor: '#515365'
+	    });
+	});
+
+	/*
+		fn. $_sendMail ==> Trigger when clicked on Send Mail Button in Modal.
+	*/
+	function $_sendMail(getDraftTragetID) {
+		$("#btn-send").off('click').on('click', function(event) {
+			event.preventDefault();
+			/* Act on the event */
+			draftTragetID = getDraftTragetID;
+
+		  	var $_mailFrom = document.getElementById('m-form').value;
+		  	var $_mailTo = document.getElementById('m-to').value;
+
+		  	var $_mailCC = document.getElementById('m-cc').value;
+		  	var $_mailAttachment = document.getElementById('mail_File_attachment');
+		  	var $_mailSubject = document.getElementById('m-subject').value;
+		  	var $_mailDescriptionText = quill.getText();
+		  	var $_mailDescriptionInnerHTML = quill.root.innerHTML;
+
+		  	var delta = quill.getContents();
+		  	var $_textDelta = JSON.stringify(delta);
+
+		  	var $outerAttachmentHTML = '';
+		  	var $innerAttachmentHTML = '';
+		  	var getSVG = '';
+		  	if ($_mailAttachment.files.length >= 1) {
+				for (var i = 0; i < $_mailAttachment.files.length; ++i) {
+				  	$outerAttachmentHTML += '<span class="">'+ $_mailAttachment.files.item(i).name +'</span>';
+
+				  	// Dectecting the format/type of the uploaded file for appling the icon/svg accordingly 
+					if ($_mailAttachment.files.item(i).type.split('/')[0] === 'image') {
+						getSVG = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-image"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>';
+					} else if ($_mailAttachment.files.item(i).type.split('/')[0] === 'application') {
+						if ($_mailAttachment.files.item(i).type.split('/')[1] === 'zip') {
+							getSVG = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-package"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>';
+						} else if ($_mailAttachment.files.item(i).type.split('/')[1]  === 'vnd.openxmlformats-officedocument.spreadsheetml.sheet' || $_mailAttachment.files.item(i).type.split('/')[1]  === 'vnd.openxmlformats-officedocument.wordprocessingml.document' ) {
+							getSVG = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>';
+						} else  {
+							getSVG = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-folder"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>';
+						}
+					} else if ($_mailAttachment.files.item(i).type.split('/')[0] === 'video') {
+						getSVG = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-video"><polygon points="23 7 16 12 23 17 23 7"></polygon><rect x="1" y="5" width="15" height="14" rx="2" ry="2"></rect></svg>';
+					} else {
+						getSVG = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-folder"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>';
+					}
+
+				  	$innerAttachmentHTML += '<div class="attachment file"> <div class="media"> '+ getSVG +' <div class="media-body"> <p class="file-name">'+ $_mailAttachment.files.item(i).name +'</p> <p class="file-size">'+ formatBytes($_mailAttachment.files.item(i).size, 2) +'</p> </div> </div> </div>';
+				}
+		  	}
+
+            var outerConditionHTML = $_mailAttachment.files.length >= 1 ? '<div class="attachments">' + $outerAttachmentHTML + '</div>' : "";
+
+            var innerConditionHTML = $_mailAttachment.files.length >= 1 ? '<div class="attachments">' + $innerAttachmentHTML + '</div>' : "";
+
+            var attachmentIcon = $_mailAttachment.files.length >= 1 ? '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-paperclip attachment-indicator"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"></path></svg>' : "";
+
+			var randomAlphaNumeric = randomString(10, '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ');
+
+			$html = '<div class="mail-item sentmail">' +
+                        '<div class="animated animatedFadeInUp fadeInUp" id="sfdsf">' +
+                            '<div class="mb-0">' +
+                                '<div class="mail-item-heading collapsed"  data-toggle="collapse" role="navigation" data-target="#'+randomAlphaNumeric+'" aria-expanded="false">' +
+                                    '<div class="mail-item-inner">' +
+
+                                        '<div class="d-flex">' +
+                                            '<div class="n-chk text-center">' +
+                                                '<label class="new-control new-checkbox checkbox-primary">' +
+                                                  '<input type="checkbox" class="new-control-input inbox-chkbox">' +
+                                                  '<span class="new-control-indicator"></span>' +
+                                                '</label>' +
+                                            '</div>' +
+                                            '<div class="f-body" data-mailFrom="'+$_mailFrom+'" data-mailTo="'+$_mailTo+'" data-mailCC="'+$_mailCC+'" >' +
+                                                '<div class="meta-mail-time">' +
+                                                    '<p class="user-email" data-mailTo="'+$_mailTo+'">'+$_mailTo+'</p>' +
+                                                '</div>' +
+                                                '<div class="meta-title-tag">' +
+                                                    '<p class="mail-content-excerpt" data-mailDescription="'+$_mailDescriptionText+'">'+attachmentIcon+'<span class="mail-title" data-mailTitle="'+$_mailSubject+'">'+$_mailSubject+' - </span>'+$_mailDescriptionText+'</p>' +
+                                                    '<div class="tags">' +
+                                                        '<span class="g-dot-primary"></span>' +
+                                                        '<span class="g-dot-warning"></span>' +
+                                                        '<span class="g-dot-success"></span>' +
+                                                        '<span class="g-dot-danger"></span>' +
+                                                    '</div>' +
+                                                    '<p class="meta-time align-self-center">'+formatAMPM(new Date)+'</p>' +
+                                                '</div>' +
+                                            '</div>' +
+                                        '</div>' +
+                                    '</div>' +
+                                    outerConditionHTML+
+                                '</div>' +
+                            '</div>' +
+                        '</div>' +
+                    '</div>';
+
+			$html2 = '<div id="'+randomAlphaNumeric+'" class="collapse" aria-labelledby="'+randomAlphaNumeric+'" data-parent="#mailbox-inbox">'+
+		                '<div class="mail-content-container sentmail" data-mailFrom="'+$_mailFrom+'" data-mailTo="'+$_mailTo+'" data-mailCC="'+$_mailCC+'" >'+
+		                    '<div class="d-flex justify-content-between mb-3">'+
+		                    	'<div class="d-flex user-info">'+
+	                                '<div class="f-body">'+
+	                                    '<div class="meta-mail-time">'+
+	                                        '<div class="">'+
+                                                '<p class="user-email" data-mailto="'+$_mailTo+'"><span>To - </span>'+$_mailTo+'</p>, '+
+                                                '<p class="user-cc-mail" data-mailcc="'+$_mailCC+'"><span>CC - </span>'+$_mailCC+'</p>'+
+                                            '</div>'+
+	                                        '<p class="mail-content-meta-date">'+today+' -</p>'+
+	                                        '<p class="meta-time align-self-center">'+formatAMPM(new Date)+'</p>'+
+	                                    '</div>'+
+	                               '</div>'+
+	                            '</div>'+
+	                            '<div class="action-btns">'+
+	                                '<a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="" data-original-title="Reply">'+
+	                                    '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-corner-up-left reply"><polyline points="9 14 4 9 9 4"></polyline><path d="M20 20v-7a4 4 0 0 0-4-4H4"></path></svg>'+
+	                                '</a>'+
+	                                '<a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="" data-original-title="Forward">'+
+	                                    '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-corner-up-right forward"><polyline points="15 14 20 9 15 4"></polyline><path d="M4 20v-7a4 4 0 0 1 4-4h12"></path></svg>'+
+	                                '</a>'+
+	                            '</div>'+
+	                        '</div>'+
+
+		                    "<p class='mail-content' data-mailTitle='"+$_mailSubject+"' data-mailDescription='"+$_textDelta+"'>"+$_mailDescriptionInnerHTML+"</p>"+
+
+		                    '<p>Best Regards,</p>'+
+		                    '<p>Info</p>'+
+		                    innerConditionHTML +
+		                '</div>'+
+		            '</div>';
+
+		    $("#ct").prepend($html);
+		    $(".content-box > .msg-close").after($html2);
+		    $('#composeMailModal').modal('hide');
+		    $(".list-actions#sentmail").trigger('click');
+		    swal({
+		        title: 'Mail Sent Successfully',
+		        type: 'success',
+		        padding: '2em'
+		    })
+		    $_GET_mailItem_Reply();
+			$_GET_mailItem_Forward();
+			contentBoxPosition();
+			stopPropagations();
+			mailInboxScroll()
+	        if (draftTragetID != "") {
+	        	$('[data-target="'+draftTragetID+'"]').parents('.mail-item').remove();
+	        	dynamicBadgeNotification('draftmail');
+	        }
+		});
+	}
+
+	/*
+		Button Save ==> Trigger when clicked on Save Button in Modal.
+	*/
+	$("#btn-save").on('click', function(event) {
+		event.preventDefault();
+		/* Act on the event */
+
+	  	var $_mailFrom = document.getElementById('m-form').value;
+	  	var $_mailTo = document.getElementById('m-to').value;
+	  	var $_mailCC = document.getElementById('m-cc').value;
+	  	var $_mailAttachment = document.getElementById('mail_File_attachment');
+	  	var $_mailSubject = document.getElementById('m-subject').value;
+	  	var $_mailDescription = quill.getText();
+
+	  	var delta = quill.getContents();
+	  	var $_textDelta = JSON.stringify(delta);
+
+	  	$outerAttachmentHTML = '';
+	  	if ($_mailAttachment.files.length >= 1) {
+			for (var i = 0; i < $_mailAttachment.files.length; ++i) {
+			  $outerAttachmentHTML += '<span class="">'+ $_mailAttachment.files.item(i).name +'</span>'
+			}
+	  	}
+
+        var outerConditionHTML = $_mailAttachment.files.length >= 1 ? '<div class="attachments">' + $outerAttachmentHTML + '</div>' : "";
+
+		var randomAlphaNumeric = randomString(10, '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ');
+
+		$html = '<div class="mail-item draft">' +
+                        '<div class="animated animatedFadeInUp fadeInUp" id="sfdsf">' +
+                            '<div class="mb-0">' +
+                                '<div class="mail-item-heading collapsed"  data-toggle="collapse" role="navigation" data-target="#'+randomAlphaNumeric+'" aria-expanded="false">' +
+                                    '<div class="mail-item-inner">' +
+
+                                        '<div class="d-flex">' +
+                                            '<div class="n-chk text-center">' +
+                                                '<label class="new-control new-checkbox checkbox-primary">' +
+                                                  '<input type="checkbox" class="new-control-input inbox-chkbox">' +
+                                                  '<span class="new-control-indicator"></span>' +
+                                                '</label>' +
+                                            '</div>' +
+                                            '<div class="f-body" data-mailFrom="'+$_mailFrom+'" data-mailTo="'+$_mailTo+'" data-mailCC="'+$_mailCC+'" >' +
+                                                '<div class="meta-mail-time">' +
+                                                    '<p class="user-email" data-mailTo="'+$_mailTo+'">'+$_mailTo+'</p>' +
+                                                '</div>' +
+                                                '<div class="meta-title-tag">' +
+                                                    "<p class='mail-content-excerpt' data-mailDescription='"+$_textDelta+"'><span class='mail-title' data-mailTitle='"+$_mailSubject+"'>Draft: "+$_mailSubject+" - </span>"+$_mailDescription+"</p>" +
+                                                    '<div class="tags">' +
+                                                        '<span class="g-dot-primary"></span>' +
+                                                        '<span class="g-dot-warning"></span>' +
+                                                        '<span class="g-dot-success"></span>' +
+                                                        '<span class="g-dot-danger"></span>' +
+                                                    '</div>' +
+                                                    '<p class="meta-time align-self-center">'+formatAMPM(new Date)+'</p>' +
+                                                '</div>' +
+                                            '</div>' +
+                                        '</div>' +
+                                    '</div>' +
+                                    outerConditionHTML+
+                                '</div>' +
+                            '</div>' +
+                        '</div>' +
+                    '</div>';
+
+	    $("#ct").prepend($html);
+	    $('#composeMailModal').modal('hide');
+	    $(".list-actions#draft").trigger('click');
+	    swal({
+	        title: 'Successfully Saved to Draft',
+	        type: 'success',
+	        padding: '2em'
+	    })
+	    $_GET_mailItem_Draft();
+		contentBoxPosition();
+		stopPropagations();
+		dynamicBadgeNotification('draftmail');
+	});
+
+	/*
+		Button Send Reply ==> Trigger when clicked on SEND Button in REPLY Modal.
+	*/
+	$("#btn-reply").on('click', function(event) {
+		event.preventDefault();
+		/* Act on the event */
+
+	  	var $_mailFrom = document.getElementById('m-form').value;
+	  	var $_mailTo = document.getElementById('m-to').value;
+	  	var $_mailCC = document.getElementById('m-cc').value;
+	  	var $_mailAttachment = document.getElementById('mail_File_attachment');
+	  	var $_mailSubject = document.getElementById('m-subject').value;
+	  	var $_mailDescriptionText = quill.getText();
+	  	var $_mailDescriptionInnerHTML = quill.root.innerHTML;
+
+	  	var delta = quill.getContents();
+	  	var $_textDelta = JSON.stringify(delta);
+
+	  	var $outerAttachmentHTML = '';
+	  	var $innerAttachmentHTML = '';
+	  	var getSVG = '';
+	  	if ($_mailAttachment.files.length >= 1) {
+			for (var i = 0; i < $_mailAttachment.files.length; ++i) {
+			  	$outerAttachmentHTML += '<span class="">'+ $_mailAttachment.files.item(i).name +'</span>'
+
+			  	// Dectecting the format/type of the uploaded file for appling the icon/svg accordingly 
+				if ($_mailAttachment.files.item(i).type.split('/')[0] === 'image') {
+					getSVG = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-image"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>';
+				} else if ($_mailAttachment.files.item(i).type.split('/')[0] === 'application') {
+					if ($_mailAttachment.files.item(i).type.split('/')[1] === 'zip') {
+						getSVG = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-package"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>';
+					} else if ($_mailAttachment.files.item(i).type.split('/')[1]  === 'vnd.openxmlformats-officedocument.spreadsheetml.sheet' || $_mailAttachment.files.item(i).type.split('/')[1]  === 'vnd.openxmlformats-officedocument.wordprocessingml.document' ) {
+						getSVG = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>';
+					} else  {
+						getSVG = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-folder"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>';
+					}
+				} else if ($_mailAttachment.files.item(i).type.split('/')[0] === 'video') {
+					getSVG = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-video"><polygon points="23 7 16 12 23 17 23 7"></polygon><rect x="1" y="5" width="15" height="14" rx="2" ry="2"></rect></svg>';
+				} else {
+					getSVG = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-folder"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>';
+				}
+
+			  	$innerAttachmentHTML += '<div class="attachment file"> <div class="media"> '+ getSVG +' <div class="media-body"> <p class="file-name">'+ $_mailAttachment.files.item(i).name +'</p> <p class="file-size">'+ formatBytes($_mailAttachment.files.item(i).size, 2) +'</p> </div> </div> </div>';
+			}
+	  	}
+
+        var outerConditionHTML = $_mailAttachment.files.length >= 1 ? '<div class="attachments">' + $outerAttachmentHTML + '</div>' : "";
+
+        var innerConditionHTML = $_mailAttachment.files.length >= 1 ? '<div class="attachments">' + $innerAttachmentHTML + '</div>' : "";
+
+		var randomAlphaNumeric = randomString(10, '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ');
+
+		$html = '<div class="mail-item sentmail">' +
+            '<div class="animated animatedFadeInUp fadeInUp" id="sfdsf">' +
+                '<div class="mb-0">' +
+                    '<div class="mail-item-heading collapsed"  data-toggle="collapse" role="navigation" data-target="#'+randomAlphaNumeric+'" aria-expanded="false">' +
+                        '<div class="mail-item-inner">' +
+
+                            '<div class="d-flex">' +
+                                '<div class="n-chk text-center">' +
+                                    '<label class="new-control new-checkbox checkbox-primary">' +
+                                      '<input type="checkbox" class="new-control-input inbox-chkbox">' +
+                                      '<span class="new-control-indicator"></span>' +
+                                    '</label>' +
+                                '</div>' +
+                                '<div class="f-body" data-mailFrom="'+$_mailFrom+'" data-mailTo="'+$_mailTo+'" data-mailCC="'+$_mailCC+'" >' +
+                                    '<div class="meta-mail-time">' +
+                                        '<p class="user-email" data-mailTo="'+$_mailTo+'">'+$_mailTo+'</p>' +
+                                    '</div>' +
+                                    '<div class="meta-title-tag">' +
+                                        '<p class="mail-content-excerpt" data-mailDescription="'+$_mailDescriptionText+'"><span class="mail-title" data-mailTitle="'+$_mailSubject+'">'+$_mailSubject+' - </span>'+$_mailDescriptionText+'</p>' +
+                                        '<div class="tags">' +
+                                            '<span class="g-dot-primary"></span>' +
+                                            '<span class="g-dot-warning"></span>' +
+                                            '<span class="g-dot-success"></span>' +
+                                            '<span class="g-dot-danger"></span>' +
+                                        '</div>' +
+                                        '<p class="meta-time align-self-center">'+formatAMPM(new Date)+'</p>' +
+                                    '</div>' +
+                                '</div>' +
+                            '</div>' +
+                        '</div>' +
+                        outerConditionHTML+
+                    '</div>' +
+                '</div>' +
+            '</div>' +
+        '</div>';
+
+		$html2 = '<div id="'+randomAlphaNumeric+'" class="collapse" aria-labelledby="sdfsdaf" data-parent="#mailbox-inbox">'+
+	                '<div class="mail-content-container sentmail" data-mailFrom="'+$_mailFrom+'" data-mailTo="'+$_mailTo+'" data-mailCC="'+$_mailCC+'" >'+
+
+	                    '<div class="d-flex justify-content-between mb-5">'+
+		                    '<div class="d-flex user-info">'+
+                                '<div class="f-body">'+
+                                    '<div class="meta-mail-time">'+
+                                    '<div class="">'+
+                                            '<p class="user-email" data-mailto="'+$_mailTo+'"><span>To - </span>'+$_mailTo+'</p>, '+
+                                            '<p class="user-cc-mail" data-mailcc="'+$_mailCC+'"><span>CC - </span>'+$_mailCC+'</p>'+
+                                        '</div>'+
+                                        '<p class="mail-content-meta-date">'+today+' -</p>'+
+                                        '<p class="meta-time align-self-center">'+formatAMPM(new Date)+'</p>'+
+                                    '</div>'+
+                               '</div>'+
+                            '</div>'+
+                            '<div class="action-btns">'+
+                                '<a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="" data-original-title="Reply">'+
+                                    '<i class="flaticon-reply reply"></i>'+
+                                '</a>'+
+                                '<a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="" data-original-title="Forward">'+
+                                    '<i class="flaticon-forward-arrow forward"></i>'+
+                                '</a>'+
+                            '</div>'+
+                        '</div>'+
+
+	                    "<p class='mail-content' data-mailTitle='"+$_mailSubject+"' data-mailDescription='"+$_textDelta+"'>"+$_mailDescriptionInnerHTML+"</p>"+
+
+	                    '<p>Best Regards,</p>'+
+	                    '<p>Info</p>'+
+		                innerConditionHTML +
+	                '</div>'+
+	            '</div>';
+
+	    $("#ct").prepend($html);
+	    $(".content-box > .msg-close").after($html2);
+	    $('#composeMailModal').modal('hide');
+	    $(".list-actions#sentmail").trigger('click');
+	    swal({
+	        title: 'Mail Sent Successfully',
+	        type: 'success',
+	        padding: '2em'
+	    })
+	    $_GET_mailItem_Reply();
+		$_GET_mailItem_Forward();
+		contentBoxPosition();
+		stopPropagations();
+		mailInboxScroll();
+	});
+
+	/*
+		Btn Reply Save ==> Trigger when clicked on SAVE Button in REPLY Modal.
+	*/
+	$("#btn-reply-save").on('click', function(event) {
+		event.preventDefault();
+		/* Act on the event */
+
+	  	var $_mailFrom = document.getElementById('m-form').value;
+	  	var $_mailTo = document.getElementById('m-to').value;
+	  	var $_mailCC = document.getElementById('m-cc').value;
+	  	var $_mailAttachment = document.getElementById('mail_File_attachment');
+	  	var $_mailSubject = document.getElementById('m-subject').value;
+	  	var $_mailDescription = quill.getText();
+
+	  	var delta = quill.getContents();
+	  	var $_textDelta = JSON.stringify(delta);
+
+	  	$outerAttachmentHTML = '';
+	  	if ($_mailAttachment.files.length >= 1) {
+			for (var i = 0; i < $_mailAttachment.files.length; ++i) {
+			  $outerAttachmentHTML += '<span class="">'+ $_mailAttachment.files.item(i).name +'</span>'
+			}
+	  	}
+
+        var outerConditionHTML = $_mailAttachment.files.length >= 1 ? '<div class="attachments">' + $outerAttachmentHTML + '</div>' : "";
+
+		var randomAlphaNumeric = randomString(10, '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ');
+
+		$html = '<div class="mail-item draft">' +
+                        '<div class="animated animatedFadeInUp fadeInUp" id="sfdsf">' +
+                            '<div class="mb-0">' +
+                                '<div class="mail-item-heading collapsed"  data-toggle="collapse" role="navigation" data-target="#'+randomAlphaNumeric+'" aria-expanded="false">' +
+                                    '<div class="mail-item-inner">' +
+
+                                        '<div class="d-flex">' +
+                                            '<div class="n-chk text-center">' +
+                                                '<label class="new-control new-checkbox checkbox-primary">' +
+                                                  '<input type="checkbox" class="new-control-input inbox-chkbox">' +
+                                                  '<span class="new-control-indicator"></span>' +
+                                                '</label>' +
+                                            '</div>' +
+                                            '<div class="f-body" data-mailFrom="'+$_mailFrom+'" data-mailTo="'+$_mailTo+'" data-mailCC="'+$_mailCC+'" >' +
+                                                '<div class="meta-mail-time">' +
+                                                    '<p class="user-email" data-mailTo="'+$_mailTo+'">'+$_mailTo+'</p>' +
+                                                '</div>' +
+                                                '<div class="meta-title-tag">' +
+                                                    "<p class='mail-content-excerpt' data-mailDescription='"+$_textDelta+"'><span class='mail-title' data-mailTitle='"+$_mailSubject+"'>Draft: "+$_mailSubject+" - </span>"+$_mailDescription+"</p>" +
+                                                    '<div class="tags">' +
+                                                        '<span class="g-dot-primary"></span>' +
+                                                        '<span class="g-dot-warning"></span>' +
+                                                        '<span class="g-dot-success"></span>' +
+                                                        '<span class="g-dot-danger"></span>' +
+                                                    '</div>' +
+                                                    '<p class="meta-time align-self-center">'+formatAMPM(new Date)+'</p>' +
+                                                '</div>' +
+                                            '</div>' +
+                                        '</div>' +
+                                    '</div>' +
+                                    outerConditionHTML+
+                                '</div>' +
+                            '</div>' +
+                        '</div>' +
+                    '</div>';
+
+	    $("#ct").prepend($html);
+	    $('#composeMailModal').modal('hide');
+	    $(".list-actions#draft").trigger('click');
+	    swal({
+	        title: 'Successfully Saved to Draft',
+	        type: 'success',
+	        padding: '2em'
+	    })
+	    $_GET_mailItem_Draft();
+		contentBoxPosition();
+		stopPropagations();
+		dynamicBadgeNotification('draftmail');
+	});
+
+	/*
+		Button Send FWD ==> Trigger when clicked on SEND Button in FWD Modal.
+	*/
+	$("#btn-fwd").on('click', function(event) {
+		event.preventDefault();
+		/* Act on the event */
+	  	var $_mailFrom = document.getElementById('m-form').value;
+	  	var $_mailTo = document.getElementById('m-to').value;
+	  	var $_mailCC = document.getElementById('m-cc').value;
+	  	var $_mailAttachment = document.getElementById('mail_File_attachment');
+	  	var $_mailSubject = document.getElementById('m-subject').value;
+	  	var $_mailDescriptionText = quill.getText();
+	  	var $_mailDescriptionInnerHTML = quill.root.innerHTML;
+	  	var delta = quill.getContents();
+	  	var $_textDelta = JSON.stringify(delta);
+
+	  	var $outerAttachmentHTML = '';
+	  	var $innerAttachmentHTML = '';
+	  	var getSVG = '';
+	  	if ($_mailAttachment.files.length >= 1) {
+			for (var i = 0; i < $_mailAttachment.files.length; ++i) {
+			  	$outerAttachmentHTML += '<span class="">'+ $_mailAttachment.files.item(i).name +'</span>'
+
+			  	// Dectecting the format/type of the uploaded file for appling the icon/svg accordingly 
+				if ($_mailAttachment.files.item(i).type.split('/')[0] === 'image') {
+					getSVG = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-image"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>';
+				} else if ($_mailAttachment.files.item(i).type.split('/')[0] === 'application') {
+					if ($_mailAttachment.files.item(i).type.split('/')[1] === 'zip') {
+						getSVG = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-package"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>';
+					} else if ($_mailAttachment.files.item(i).type.split('/')[1]  === 'vnd.openxmlformats-officedocument.spreadsheetml.sheet' || $_mailAttachment.files.item(i).type.split('/')[1]  === 'vnd.openxmlformats-officedocument.wordprocessingml.document' ) {
+						getSVG = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>';
+					} else  {
+						getSVG = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-folder"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>';
+					}
+				} else if ($_mailAttachment.files.item(i).type.split('/')[0] === 'video') {
+					getSVG = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-video"><polygon points="23 7 16 12 23 17 23 7"></polygon><rect x="1" y="5" width="15" height="14" rx="2" ry="2"></rect></svg>';
+				} else {
+					getSVG = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-folder"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>';
+				}
+
+			  	$innerAttachmentHTML += '<div class="attachment file"> <div class="media"> '+ getSVG +' <div class="media-body"> <p class="file-name">'+ $_mailAttachment.files.item(i).name +'</p> <p class="file-size">'+ formatBytes($_mailAttachment.files.item(i).size, 2) +'</p> </div> </div> </div>';
+			}
+	  	}
+
+        var outerConditionHTML = $_mailAttachment.files.length >= 1 ? '<div class="attachments">' + $outerAttachmentHTML + '</div>' : "";
+
+        var innerConditionHTML = $_mailAttachment.files.length >= 1 ? '<div class="attachments">' + $innerAttachmentHTML + '</div>' : "";
+
+		var randomAlphaNumeric = randomString(10, '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ');
+
+		$html = '<div class="mail-item sentmail">' +
+                        '<div class="animated animatedFadeInUp fadeInUp" id="sfdsf">' +
+                            '<div class="mb-0">' +
+                                '<div class="mail-item-heading collapsed"  data-toggle="collapse" role="navigation" data-target="#'+randomAlphaNumeric+'" aria-expanded="false">' +
+                                    '<div class="mail-item-inner">' +
+
+                                        '<div class="d-flex">' +
+                                            '<div class="n-chk text-center">' +
+                                                '<label class="new-control new-checkbox checkbox-primary">' +
+                                                  '<input type="checkbox" class="new-control-input inbox-chkbox">' +
+                                                  '<span class="new-control-indicator"></span>' +
+                                                '</label>' +
+                                            '</div>' +
+                                            '<div class="f-body" data-mailFrom="'+$_mailFrom+'" data-mailTo="'+$_mailTo+'" data-mailCC="'+$_mailCC+'" >' +
+                                                '<div class="meta-mail-time">' +
+                                                    '<p class="user-email" data-mailTo="'+$_mailTo+'">'+$_mailTo+'</p>' +
+                                                '</div>' +
+                                                '<div class="meta-title-tag">' +
+                                                    '<p class="mail-content-excerpt" data-mailDescription="'+$_mailDescriptionText+'"><span class="mail-title" data-mailTitle="'+$_mailSubject+'">'+$_mailSubject+' - </span>'+$_mailDescriptionText+'</p>' +
+                                                    '<div class="tags">' +
+                                                        '<span class="g-dot-primary"></span>' +
+                                                        '<span class="g-dot-warning"></span>' +
+                                                        '<span class="g-dot-success"></span>' +
+                                                        '<span class="g-dot-danger"></span>' +
+                                                    '</div>' +
+                                                    '<p class="meta-time align-self-center">'+formatAMPM(new Date)+'</p>' +
+                                                '</div>' +
+                                            '</div>' +
+                                        '</div>' +
+                                    '</div>' +
+                                    outerConditionHTML+
+                                '</div>' +
+                            '</div>' +
+                        '</div>' +
+                    '</div>';
+
+		$html2 = '<div id="'+randomAlphaNumeric+'" class="collapse" aria-labelledby="sdfsdaf" data-parent="#mailbox-inbox">'+
+	                '<div class="mail-content-container sentmail" data-mailFrom="'+$_mailFrom+'" data-mailTo="'+$_mailTo+'" data-mailCC="'+$_mailCC+'" >'+
+
+	                    '<div class="d-flex justify-content-between mb-5">'+
+
+	                    	'<div class="d-flex user-info">'+
+                                '<div class="f-body">'+
+                                    '<div class="meta-mail-time">'+
+                                    	'<div class="">'+
+                                            '<p class="user-email" data-mailto="'+$_mailTo+'"><span>To - </span>'+$_mailTo+'</p>, '+
+                                            '<p class="user-cc-mail" data-mailcc="'+$_mailCC+'"><span>CC - </span>'+$_mailCC+'</p>'+
+                                        '</div>'+
+                                        '<p class="mail-content-meta-date">'+today+' -</p>'+
+                                        '<p class="meta-time align-self-center">'+formatAMPM(new Date)+'</p>'+
+                                    '</div>'+
+                               '</div>'+
+                            '</div>'+
+
+                            '<div class="action-btns">'+
+                                '<a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="" data-original-title="Reply">'+
+                                    '<i class="flaticon-reply reply"></i>'+
+                                '</a>'+
+                                '<a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="" data-original-title="Forward">'+
+                                    '<i class="flaticon-forward-arrow forward"></i>'+
+                                '</a>'+
+                            '</div>'+
+                        '</div>'+
+
+	                    "<p class='mail-content' data-mailTitle='"+$_mailSubject+"' data-mailDescription='"+$_textDelta+"'>"+$_mailDescriptionInnerHTML+"</p>"+
+
+	                    '<p>Best Regards,</p>'+
+	                    '<p>Info</p>'+
+	                    innerConditionHTML+
+	                '</div>'+
+	            '</div>';
+
+	    $("#ct").prepend($html);
+	    $(".content-box > .msg-close").after($html2);
+	    $('#composeMailModal').modal('hide');
+	    $(".list-actions#sentmail").trigger('click');
+	    swal({
+	        title: 'Mail Sent Successfully',
+	        type: 'success',
+	        padding: '2em'
+	    })
+	    $_GET_mailItem_Reply();
+		$_GET_mailItem_Forward();
+		contentBoxPosition();
+		stopPropagations();
+		mailInboxScroll();
+	});
+
+	/*
+		Btn Fwd Save ==> Trigger when clicked on SAVE Button in FWD Modal.
+	*/
+	$("#btn-fwd-save").on('click', function(event) {
+			event.preventDefault();
+			/* Act on the event */
+		  	var $_mailFrom = document.getElementById('m-form').value;
+		  	var $_mailTo = document.getElementById('m-to').value;
+		  	var $_mailCC = document.getElementById('m-cc').value;
+		  	var $_mailAttachment = document.getElementById('mail_File_attachment');
+		  	var $_mailSubject = document.getElementById('m-subject').value;
+		  	var $_mailDescription = quill.getText();
+		  	var delta = quill.getContents();
+		  	var $_textDelta = JSON.stringify(delta);
+
+		  	$outerAttachmentHTML = '';
+		  	if ($_mailAttachment.files.length >= 1) {
+				for (var i = 0; i < $_mailAttachment.files.length; ++i) {
+				  $outerAttachmentHTML += '<span class="">'+ $_mailAttachment.files.item(i).name +'</span>'
+				}
+		  	}
+
+	        var outerConditionHTML = $_mailAttachment.files.length >= 1 ? '<div class="attachments">' + $outerAttachmentHTML + '</div>' : "";
+
+			var randomAlphaNumeric = randomString(10, '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ');
+
+			$html = '<div class="mail-item draft">' +
+                        '<div class="animated animatedFadeInUp fadeInUp" id="sfdsf">' +
+                            '<div class="mb-0">' +
+                                '<div class="mail-item-heading collapsed"  data-toggle="collapse" role="navigation" data-target="#'+randomAlphaNumeric+'" aria-expanded="false">' +
+                                    '<div class="mail-item-inner">' +
+
+                                        '<div class="d-flex">' +
+                                            '<div class="n-chk text-center">' +
+                                                '<label class="new-control new-checkbox checkbox-primary">' +
+                                                  '<input type="checkbox" class="new-control-input inbox-chkbox">' +
+                                                  '<span class="new-control-indicator"></span>' +
+                                                '</label>' +
+                                            '</div>' +
+                                            '<div class="f-body" data-mailFrom="'+$_mailFrom+'" data-mailTo="'+$_mailTo+'" data-mailCC="'+$_mailCC+'" >' +
+                                                '<div class="meta-mail-time">' +
+                                                    '<p class="user-email" data-mailTo="'+$_mailTo+'">'+$_mailTo+'</p>' +
+                                                '</div>' +
+                                                '<div class="meta-title-tag">' +
+                                                    "<p class='mail-content-excerpt' data-mailDescription='"+$_textDelta+"'><span class='mail-title' data-mailTitle='"+$_mailSubject+"'>Draft: "+$_mailSubject+" - </span>"+$_mailDescription+"</p>" +
+                                                    '<div class="tags">' +
+                                                        '<span class="g-dot-primary"></span>' +
+                                                        '<span class="g-dot-warning"></span>' +
+                                                        '<span class="g-dot-success"></span>' +
+                                                        '<span class="g-dot-danger"></span>' +
+                                                    '</div>' +
+                                                    '<p class="meta-time align-self-center">'+formatAMPM(new Date)+'</p>' +
+                                                '</div>' +
+                                            '</div>' +
+                                        '</div>' +
+                                    '</div>' +
+                                    outerConditionHTML+
+                                '</div>' +
+                            '</div>' +
+                        '</div>' +
+                    '</div>';
+
+		    $("#ct").prepend($html);
+		    $('#composeMailModal').modal('hide');
+		    $(".list-actions#draft").trigger('click');
+		    swal({
+		        title: 'Successfully Saved to Draft',
+		        type: 'success',
+		        padding: '2em'
+		    })
+		    $_GET_mailItem_Draft();
+			contentBoxPosition();
+			stopPropagations();
+			dynamicBadgeNotification('draftmail');
+	});
+	
+
+	/*
+		fn. $_GET_mailItem_Draft ==> Trigger when clicked on Draft Button in Modal.
+	*/
+	function $_GET_mailItem_Draft() {
+		$(".mail-item.draft").off('click').on('click', function(event) {
+
+		    $('#btn-send').show();
+			$('#btn-reply').hide();
+			$('#btn-fwd').hide();
+			// Save And Reply Save
+			$('#btn-save').show();
+			$('#btn-reply-save').hide();
+			$('#btn-fwd-save').hide();
+			
+		    var $_mailFrom =  $(this).find('.f-body').attr('data-mailFrom');
+		    var $_mailTo =  $(this).find('.f-body').attr('data-mailTo');
+		    var $_mailCC =  $(this).find('.f-body').attr('data-mailCC');
+		    var $_mailSubject =  $(this).find('.mail-title').attr('data-mailtitle');
+		    var $_mailDataTarget =  $(this).find('.mail-item-heading').attr('data-target');
+		    $_sendMail($_mailDataTarget);
+		    var $_mailDescription =  JSON.parse($(this).find('.mail-content-excerpt').attr('data-maildescription'));
+
+		    $('#m-form').val($_mailFrom);
+		    $('#m-to').val($_mailTo);
+		    $('#m-cc').val($_mailCC);
+		    $('#m-subject').val($_mailSubject);
+		    quill.setContents($_mailDescription);
+		    $('#composeMailModal').modal('show');
+		})
+	}
+
+	/*
+		fn. $_GET_mailItem_Reply ==> Trigger when clicked on Reply Button inside Mail Content.
+	*/
+	function $_GET_mailItem_Reply() {
+		$(".reply").on('click', function(event) {
+
+			// Send And Reply
+			$('#btn-reply').show();
+			$('#btn-send').hide();
+			$('#btn-fwd').hide();
+
+			// Save And Reply Save
+			$('#btn-reply-save').show();
+			$('#btn-fwd-save').hide();
+			$('#btn-save').hide();		
+
+			var $_mailFrom =  $(this).parents('.mail-content-container').attr('data-mailFrom');
+		    var $_mailTo =  $(this).parents('.mail-content-container').attr('data-mailTo');
+		    var $_mailCC =  $(this).parents('.mail-content-container').attr('data-mailCC');
+			var $_mailSubject = $(this).parents('.mail-content-container').find('.mail-content').attr('data-mailtitle');
+		    var $_mailDescription =  JSON.parse($(this).parents('.mail-content-container').find('.mail-content').attr('data-maildescription'));
+
+		    $('#m-form').val($_mailFrom);
+		    $('#m-to').val($_mailTo);
+		    $('#m-cc').val($_mailCC);
+		    $('#m-subject').val('Re: ' + $_mailSubject);
+			quill.setContents($_mailDescription);
+			$('#composeMailModal').modal('show');
+		})
+	}
+
+	/*
+		fn. $_GET_mailItem_Forward ==> Trigger when clicked on Forward Button inside Mail Content.
+	*/
+	function $_GET_mailItem_Forward() {
+		$(".forward").on('click', function(event) {
+
+			$('#btn-fwd').show();
+			$('#btn-reply').hide();
+			$('#btn-send').hide();
+
+			$('#btn-fwd-save').show();
+			$('#btn-reply-save').hide();
+			$('#btn-save').hide();
+
+			var $_mailFrom =  $(this).parents('.mail-content-container').attr('data-mailFrom');
+		    var $_mailTo =  $(this).parents('.mail-content-container').attr('data-mailTo');
+		    var $_mailCC =  $(this).parents('.mail-content-container').attr('data-mailCC');
+			var $_mailSubject = $(this).parents('.mail-content-container').find('.mail-content').attr('data-mailtitle');
+		    var $_mailDescription =  JSON.parse($(this).parents('.mail-content-container').find('.mail-content').attr('data-maildescription'));
+
+		    $('#m-form').val($_mailFrom);
+		    $('#m-to').val($_mailTo);
+		    $('#m-cc').val($_mailCC);
+		    $('#m-subject').val('Fwd: ' + $_mailSubject);
+			quill.setContents($_mailDescription);
+			$('#composeMailModal').modal('show');
+		})
+	}
+
+	$_sendMail();
+	$_GET_mailItem_Draft();
+	$_GET_mailItem_Reply();
+	$_GET_mailItem_Forward();
+	contentBoxPosition();
+	stopPropagations();
+
+	$('.tab-title .nav-pills a.nav-link').on('click', function(event) {
+	  $(this).parents('.mail-box-container').find('.tab-title').removeClass('mail-menu-show')
+	  $(this).parents('.mail-box-container').find('.mail-overlay').removeClass('mail-overlay-show')
+	})
+	
+});
\ No newline at end of file
diff --git a/static/js/apps/invoice.js b/static/js/apps/invoice.js
new file mode 100644
index 00000000..8d167477
--- /dev/null
+++ b/static/js/apps/invoice.js
@@ -0,0 +1,63 @@
+$('.search > input').on('keyup', function() {
+  var rex = new RegExp($(this).val(), 'i');
+    $('.nav .nav-item').hide();
+    $('.nav .nav-item').filter(function() {
+        return rex.test($(this).text());
+    }).show();
+});
+
+$('[data-toggle="tooltip"]').tooltip({
+  'template': '<div class="tooltip actions-btn-tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>',
+})
+
+var $btns = $('.list-actions').click(function() {
+
+  var getDataInvoiceAttr = $(this).attr('data-invoice-id');
+  var getParentDiv = $(this).parents('.doc-container');
+  var getParentInvListContainer = $(this).parents('.inv-list-container');
+
+  var $el = $('.' + this.id).show();
+  $('#ct > div').not($el).hide();
+  var setInvoiceNumber = getParentDiv.find('.invoice-inbox .inv-number').text('#'+ getDataInvoiceAttr);
+  var showInvHeaderSection = getParentDiv.find('.invoice-inbox .invoice-header-section').css('display', 'flex');
+  var showInvContentSection = getParentDiv.find('.invoice-inbox #ct').css('display', 'block');
+  var showInvContentSection = getParentDiv.find('.invoice-inbox').css('height', 'calc(100vh - 197px)');
+  var hideInvEmptyContent = getParentDiv.find('.invoice-inbox .inv-not-selected').css('display', 'none');
+  var hideInvEmptyContent = getParentDiv.find('.invoice-container .inv--thankYou').css('display', 'block');
+  if ($(this).parents('.tab-title').hasClass('open-inv-sidebar')) {
+    $(this).parents('.tab-title').removeClass('open-inv-sidebar');
+  }
+  $btns.removeClass('active');
+  $(this).addClass('active');
+
+  var myDiv = document.getElementsByClassName('invoice-inbox')[0];
+  myDiv.scrollTop = 0;
+})
+
+$('.action-print').on('click', function(event) {
+  event.preventDefault();
+  /* Act on the event */
+  window.print();
+});
+
+const ps = new PerfectScrollbar('.inv-list-container', {
+  suppressScrollX : true
+});
+
+
+const inv_container = new PerfectScrollbar('.invoice-inbox', {
+  suppressScrollX : true
+});
+
+if (window.innerWidth >= 768) {
+  const inv_container = new PerfectScrollbar('.invoice-inbox', {
+    suppressScrollX : true
+  });
+} else if (window.innerWidth < 768) {
+  inv_container.destroy();
+}
+
+
+$('.hamburger, .inv-not-selected p').on('click', function(event) {
+  $('.doc-container').find('.tab-title').toggleClass('open-inv-sidebar')
+})
\ No newline at end of file
diff --git a/static/js/apps/mailbox-chat.js b/static/js/apps/mailbox-chat.js
new file mode 100644
index 00000000..c4cf3019
--- /dev/null
+++ b/static/js/apps/mailbox-chat.js
@@ -0,0 +1,156 @@
+$('.search > input').on('keyup', function() {
+  var rex = new RegExp($(this).val(), 'i');
+    $('.people .person').hide();
+    $('.people .person').filter(function() {
+        return rex.test($(this).text());
+    }).show();
+});
+
+$('.user-list-box .person').on('click', function(event) {
+    if ($(this).hasClass('.active')) {
+        return false;
+    } else {
+        var findChat = $(this).attr('data-chat');
+        var personName = $(this).find('.user-name').text();
+        var personImage = $(this).find('img').attr('src');
+        var hideTheNonSelectedContent = $(this).parents('.chat-system').find('.chat-box .chat-not-selected').hide();
+        var showChatInnerContent = $(this).parents('.chat-system').find('.chat-box .chat-box-inner').show();
+
+        if (window.innerWidth <= 767) {
+          $('.chat-box .current-chat-user-name .name').html(personName.split(' ')[0]);
+        } else if (window.innerWidth > 767) {
+          $('.chat-box .current-chat-user-name .name').html(personName);
+        }
+        $('.chat-box .current-chat-user-name img').attr('src', personImage);
+        $('.chat').removeClass('active-chat');
+        $('.user-list-box .person').removeClass('active');
+        $('.chat-box .chat-box-inner').css('height', '100%');
+        $(this).addClass('active');
+        $('.chat[data-chat = '+findChat+']').addClass('active-chat');
+    }
+    if ($(this).parents('.user-list-box').hasClass('user-list-box-show')) {
+      $(this).parents('.user-list-box').removeClass('user-list-box-show');
+    }
+    $('.chat-meta-user').addClass('chat-active');
+    $('.chat-box').css('height', 'calc(100vh - 233px)');
+    $('.chat-footer').addClass('chat-active');
+
+  const ps = new PerfectScrollbar('.chat-conversation-box', {
+    suppressScrollX : true
+  });
+
+  const getScrollContainer = document.querySelector('.chat-conversation-box');
+  getScrollContainer.scrollTop = 0;
+});
+
+const ps = new PerfectScrollbar('.people', {
+  suppressScrollX : true
+});
+
+function callOnConnect() {
+  var getCallStatusText = $('.overlay-phone-call .call-status');
+  var getCallTimer = $('.overlay-phone-call .timer');
+  var setCallStatusText = getCallStatusText.text('Connected');
+  var setCallTimerDiv = getCallTimer.css('visibility', 'visible');
+}
+
+$('.phone-call-screen').off('click').on('click', function(event) {
+  var getCallingUserName = $(this).parents('.chat-system').find('.person.active .user-name').attr('data-name');
+  var getCallingUserImg = $(this).parents('.chat-system').find('.person.active .f-head img').attr('src');
+  var setCallingUserName = $(this).parents('.chat-box').find('.overlay-phone-call .user-name').text(getCallingUserName);
+  var setCallingUserName = $(this).parents('.chat-box').find('.overlay-phone-call .calling-user-img img').attr('src', getCallingUserImg);
+  var applyOverlay = $(this).parents('.chat-box').find('.overlay-phone-call').addClass('phone-call-show');
+  setTimeout(callOnConnect, 2000);
+})
+
+$('.switch-to-video-call').off('click').on('click', function(event) {
+    var getCallerId = $(this).parents('.overlay-phone-call').find('.user-name').text();
+    var getCallerImg = $(this).parents('.overlay-phone-call').find('.calling-user-img img').attr('src');
+    $(this).parents('.overlay-phone-call').removeClass('phone-call-show');
+    $('.overlay-video-call').addClass('video-call-show');
+    $('.overlay-video-call').find('.user-name').text(getCallerId);
+    $('.overlay-video-call').find('.calling-user-img img').attr('src', getCallerImg);
+    var removeOverlay = $(this).parents('.overlay-phone-call').removeClass('phone-call-show');
+    var getCallStatusText = $(this).parents('.overlay-phone-call').find('.call-status').text('Calling...');
+    var getCallStatusTimer = $(this).parents('.overlay-phone-call').find('.timer').removeAttr('style');
+    setTimeout(videoCallOnConnect, 2000);
+})
+$('.switch-to-microphone').off('click').on('click', function(event) {
+  var toggleClass = $(this).toggleClass('micro-off');
+})
+$('.cancel-call').on('click', function(event) {
+
+    if ($(this).parents('.overlay-phone-call').hasClass('phone-call-show')) {
+      var removeOverlay = $(this).parents('.overlay-phone-call').removeClass('phone-call-show');
+      var getCallStatusText = $(this).parents('.overlay-phone-call').find('.call-status').text('Calling...');
+      var getCallStatusTimer = $(this).parents('.overlay-phone-call').find('.timer').removeAttr('style');
+    } else if ($(this).parents('.overlay-video-call').hasClass('video-call-show')) {
+      var removeOverlay = $(this).parents('.overlay-video-call').removeClass('video-call-show');
+      var setCallStatusText =  $(this).parents('.overlay-video-call').find('.call-status').text('Calling...');
+      var removeVideoConnectClass = $(this).parents('.overlay-video-call').removeClass('onConnect');
+      var displayCallerImage = $(this).parents('.overlay-video-call').find('.calling-user-img').css('display', 'block');
+      var hideVideoCallTimerDiv = $(this).parents('.overlay-video-call').find('.timer').removeAttr('style');
+    }
+})
+$('.go-back-chat').on('click', function(event) {
+
+  if ($(this).parents('.overlay-phone-call').hasClass('phone-call-show')) {
+    var removeOverlay = $(this).parents('.chat-box').find('.overlay-phone-call').removeClass('phone-call-show');
+  } else if ($(this).parents('.overlay-video-call').hasClass('video-call-show')) {
+    var removeOverlay = $(this).parents('.chat-box').find('.overlay-video-call').removeClass('video-call-show')
+  }
+
+})
+
+function videoCallOnConnect() {
+  var getVideoCallingDiv = $('.overlay-video-call');
+  var setVideoCallingImage = getVideoCallingDiv.addClass('onConnect');
+  var getCallStatusText = $('.overlay-video-call .call-status');
+  var getCallStatusImage = $('.overlay-video-call .calling-user-img');
+  var getCallTimer = $('.overlay-video-call .timer');
+  var setCallStatusText = getCallStatusText.text('Connected');
+  var setVideoCallingImage = getCallStatusImage.css('display', 'none');
+  var setVideoCallTimerDiv = getCallTimer.css('visibility', 'visible');
+}
+
+$('.video-call-screen').off('click').on('click', function(event) {
+  var getCallingUserName = $(this).parents('.chat-system').find('.person.active .user-name').attr('data-name');
+  var getCallingUserImg = $(this).parents('.chat-system').find('.person.active .f-head img').attr('src');
+  var setCallingUserName = $(this).parents('.chat-box').find('.overlay-video-call .user-name').text(getCallingUserName);
+  var setCallingUserName = $(this).parents('.chat-box').find('.overlay-video-call .calling-user-img img').attr('src', getCallingUserImg);
+  var applyOverlay = $(this).parents('.chat-box').find('.overlay-video-call').addClass('video-call-show');
+  setTimeout(videoCallOnConnect, 2000);
+})
+$('.switch-to-phone-call').off('click').on('click', function(event) {
+    var getCallerId = $(this).parents('.overlay-video-call').find('.user-name').text();
+    var getCallerImg = $(this).parents('.overlay-video-call').find('.calling-user-img img').attr('src');
+
+    $(this).parents('.overlay-video-call').removeClass('video-call-show');
+    $('.overlay-phone-call').addClass('phone-call-show');
+    $('.overlay-phone-call').find('.user-name').text(getCallerId);
+    $('.overlay-phone-call').find('.calling-user-img img').attr('src', getCallerImg);
+
+    var removeOverlay = $(this).parents('.overlay-video-call').removeClass('video-call-show');
+    var setCallStatusText =  $(this).parents('.overlay-video-call').find('.call-status').text('Calling...');
+    var removeVideoConnectClass = $(this).parents('.overlay-video-call').removeClass('onConnect');
+    var displayCallerImage = $(this).parents('.overlay-video-call').find('.calling-user-img').css('display', 'block');
+    var hideVideoCallTimerDiv = $(this).parents('.overlay-video-call').find('.timer').removeAttr('style');
+    setTimeout(callOnConnect, 2000);
+})
+
+$('.mail-write-box').on('keydown', function(event) {
+    if(event.key === 'Enter') {
+        var chatInput = $(this);
+        var chatMessageValue = chatInput.val();
+        if (chatMessageValue === '') { return; }
+        $messageHtml = '<div class="bubble me">' + chatMessageValue + '</div>';
+        var appendMessage = $(this).parents('.chat-system').find('.active-chat').append($messageHtml);
+        const getScrollContainer = document.querySelector('.chat-conversation-box');
+        getScrollContainer.scrollTop = getScrollContainer.scrollHeight;
+        var clearChatInput = chatInput.val('');
+    }
+})
+
+$('.hamburger, .chat-system .chat-box .chat-not-selected p').on('click', function(event) {
+  $(this).parents('.chat-system').find('.user-list-box').toggleClass('user-list-box-show')
+})
\ No newline at end of file
diff --git a/static/js/apps/notes.js b/static/js/apps/notes.js
new file mode 100644
index 00000000..6b57aa10
--- /dev/null
+++ b/static/js/apps/notes.js
@@ -0,0 +1,180 @@
+$(document).ready(function() {
+    function deleteNote() {
+        $(".delete-note").off('click').on('click', function(event) {
+          event.stopPropagation();
+          $(this).parents('.note-item').remove();
+        })
+    }
+
+    function favNote() {
+        $(".fav-note").off('click').on('click', function(event) {
+          event.stopPropagation();
+          $(this).parents('.note-item').toggleClass('note-fav');
+        })
+    }
+
+    function addLabelGroups() {
+        $('.tags-selector .label-group-item').off('click').on('click', function(event) {
+          event.preventDefault();
+          /* Act on the event */
+          var getclass = this.className;
+          var getSplitclass = getclass.split(' ')[0];
+          if ($(this).hasClass('label-personal')) {
+            $(this).parents('.note-item').removeClass('note-social');
+            $(this).parents('.note-item').removeClass('note-work');
+            $(this).parents('.note-item').removeClass('note-important');
+            $(this).parents('.note-item').toggleClass(getSplitclass);
+          } else if ($(this).hasClass('label-work')) {
+            $(this).parents('.note-item').removeClass('note-personal');
+            $(this).parents('.note-item').removeClass('note-social');
+            $(this).parents('.note-item').removeClass('note-important');
+            $(this).parents('.note-item').toggleClass(getSplitclass);
+          } else if ($(this).hasClass('label-social')) {
+            $(this).parents('.note-item').removeClass('note-personal');
+            $(this).parents('.note-item').removeClass('note-work');
+            $(this).parents('.note-item').removeClass('note-important');
+            $(this).parents('.note-item').toggleClass(getSplitclass);
+          } else if ($(this).hasClass('label-important')) {
+            $(this).parents('.note-item').removeClass('note-personal');
+            $(this).parents('.note-item').removeClass('note-social');
+            $(this).parents('.note-item').removeClass('note-work');
+            $(this).parents('.note-item').toggleClass(getSplitclass);
+          }
+        });
+    }
+
+    $('.hamburger').on('click', function(event) {
+        $('.app-note-container').find('.tab-title').toggleClass('note-menu-show')
+        $('.app-note-container').find('.app-note-overlay').toggleClass('app-note-overlay-show')
+    })
+    $('.app-note-overlay').on('click', function(e){
+        $(this).parents('.app-note-container').children('.tab-title').removeClass('note-menu-show')
+        $(this).removeClass('app-note-overlay-show')
+    })
+    $('.tab-title .nav-pills a.nav-link').on('click', function(event) {
+        $(this).parents('.app-note-container').find('.tab-title').removeClass('note-menu-show')
+        $(this).parents('.app-note-container').find('.app-note-overlay').removeClass('app-note-overlay-show')
+    })
+
+    var $btns = $('.list-actions').click(function() {
+        if (this.id == 'all-notes') {
+          var $el = $('.' + this.id).fadeIn();
+          $('#ct > div').not($el).hide();
+        } if (this.id == 'important') {
+          var $el = $('.' + this.id).fadeIn();
+          $('#ct > div').not($el).hide();
+        } else {
+          var $el = $('.' + this.id).fadeIn();
+          $('#ct > div').not($el).hide();
+        }
+        $btns.removeClass('active');
+        $(this).addClass('active');  
+    })
+
+    $('#btn-add-notes').on('click', function(event) {
+        $('#notesMailModal').modal('show');
+        $('#btn-n-save').hide();
+        $('#btn-n-add').show();
+    })
+
+    // Button add
+    $("#btn-n-add").on('click', function(event) {
+        event.preventDefault();
+        /* Act on the event */
+        var today = new Date();
+        var dd = String(today.getDate()).padStart(2, '0');
+        var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
+        var yyyy = today.getFullYear();
+        var today = mm + '/' + dd + '/' + yyyy;
+
+        var $_noteTitle = document.getElementById('n-title').value;
+        var $_noteDescription = document.getElementById('n-description').value;
+
+        $html = '<div class="note-item all-notes">' +
+                    '<div class="note-inner-content">' +
+                        '<div class="note-content">' +
+                            '<p class="note-title" data-noteTitle="'+$_noteTitle+'">'+$_noteTitle+'</p>' +
+                            '<p class="meta-time">'+today+'</p>' +
+                            '<div class="note-description-content">' +
+                                '<p class="note-description" data-noteDescription="'+$_noteDescription+'">'+$_noteDescription+'</p>' +
+                            '</div>' +
+                        '</div>' +
+                        '<div class="note-action">' +
+                            '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-star fav-note"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg> ' +
+                            '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2 delete-note"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>' +
+                        '</div>' +
+                        '<div class="note-footer">' +
+                            '<div class="tags-selector btn-group">' +
+                                '<a class="nav-link dropdown-toggle d-icon label-group" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="true">' +
+                                    '<span>' +
+                                        '<div class="tags">' +
+                                            '<div class="g-dot-personal"></div>' +
+                                            '<div class="g-dot-work"></div>' +
+                                            '<div class="g-dot-social"></div>' +
+                                            '<div class="g-dot-important"></div>' +
+                                            '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-vertical"><circle cx="12" cy="12" r="1"></circle><circle cx="12" cy="5" r="1"></circle><circle cx="12" cy="19" r="1"></circle></svg>' +
+                                        '</div>' +
+                                    '</span>' +
+                                '</a>' +
+                                '<div class="dropdown-menu dropdown-menu-right d-icon-menu">' +
+                                    '<a class="note-personal label-group-item label-personal dropdown-item position-relative g-dot-personal" href="javascript:void(0);"> Personal</a>' +
+                                    '<a class="note-work label-group-item label-work dropdown-item position-relative g-dot-work" href="javascript:void(0);"> Work</a>' +
+                                    '<a class="note-social label-group-item label-social dropdown-item position-relative g-dot-social" href="javascript:void(0);"> Social</a>' +
+                                    '<a class="note-important label-group-item label-important dropdown-item position-relative g-dot-important" href="javascript:void(0);"> Important</a>' +
+                                '</div>' +
+                            '</div>' +
+                        '</div>' +
+                    '</div>' +
+                '</div> ';
+
+        $("#ct").prepend($html);
+        $('#notesMailModal').modal('hide');
+
+        deleteNote();
+        favNote();
+        addLabelGroups();
+    });
+
+    $('#notesMailModal').on('hidden.bs.modal', function (event) {
+        event.preventDefault();
+        document.getElementById('n-title').value = '';
+        document.getElementById('n-description').value = '';
+    })
+
+    deleteNote();
+    favNote();
+    addLabelGroups();
+})
+
+// Validation Process
+
+var $_getValidationField = document.getElementsByClassName('validation-text');
+
+getNoteTitleInput = document.getElementById('n-title');
+
+getNoteTitleInput.addEventListener('input', function() {
+
+    getNoteTitleInputValue = this.value;
+
+    if (getNoteTitleInputValue == "") {
+      $_getValidationField[0].innerHTML = 'Title Required';
+      $_getValidationField[0].style.display = 'block';
+    } else {
+      $_getValidationField[0].style.display = 'none';
+    }
+})
+
+getNoteDescriptionInput = document.getElementById('n-description');
+
+getNoteDescriptionInput.addEventListener('input', function() {
+
+  getNoteDescriptionInputValue = this.value;
+
+  if (getNoteDescriptionInputValue == "") {
+    $_getValidationField[1].innerHTML = 'Description Required';
+    $_getValidationField[1].style.display = 'block';
+  } else {
+    $_getValidationField[1].style.display = 'none';
+  }
+
+})
\ No newline at end of file
diff --git a/static/js/apps/scrumboard.js b/static/js/apps/scrumboard.js
new file mode 100644
index 00000000..8c96c9a6
--- /dev/null
+++ b/static/js/apps/scrumboard.js
@@ -0,0 +1,461 @@
+$(function() {
+
+    /*
+    =========================================
+    |                                       |
+    |          Variables Definations        |
+    |                                       |
+    =========================================
+    */
+
+    var Container = {
+        scrumboard: $('.scrumboard'),
+        card: $('.scrumboard .card')
+    }
+
+    // Containers
+    var scrumboard = Container.scrumboard;
+    var card = Container.card;
+
+
+    // Make Task Sortable
+
+    function $_taskSortable() {
+        $('[data-sortable="true"]').sortable({
+            connectWith: '.connect-sorting-content',
+            items: ".card",
+            cursor: 'move',
+            placeholder: "ui-state-highlight",
+            refreshPosition: true,
+            stop: function( event, ui ) {
+                var parent_ui = ui.item.parent().attr('data-section');
+
+            },
+            update: function( event, ui ) {
+                console.log(ui);
+                console.log(ui.item);
+            }
+        });
+    }
+
+    // Click on Add Task button to open the modal and more..
+
+    function addTask() {
+        $('.addTask').on('click', function(event) {
+            event.preventDefault();
+            getParentElement = $(this).parents('[data-connect="sorting"]').attr('data-section');
+            $('.edit-task-title').hide();
+            $('.add-task-title').show();
+            $('[data-btnfn="addTask"]').show();
+            $('[data-btnfn="editTask"]').hide();
+            $('.addTaskAccordion .collapse').collapse('hide');
+            $('#addTaskModal').modal('show');
+            $_taskAdd(getParentElement);
+        });
+    }
+
+    // Get the range count value
+
+    $('#progress-range-counter').on('input', function(event) {
+        event.preventDefault();
+        /* Act on the event */
+        getRangeValue = $(this).val();
+        $('.range-count-number').html(getRangeValue);
+        $('.range-count-number').attr('data-rangeCountNumber', getRangeValue);
+    });
+
+    // Reset the input Values
+
+    $('#addTaskModal, #addListModal').on('hidden.bs.modal', function (e) {
+        $('input,textarea').val('');
+        $('input[type="range"]').val(0);
+        $('.range-count-number').attr('data-rangecountnumber', 0);
+        $('.range-count-number').html(0);
+    })
+
+    // change the modal Button class on accordion open 
+
+    $('.addTaskAccordion .collapse').on('shown.bs.collapse', function () {
+
+        getClassOfAccordion = $(this).parents('.card').attr('class').split(' ')[1];
+        getClassOfAddTaskBtn = $(this).parents('.modal-content').find('[data-btnfn="addTask"]').attr('class').split(' ')[1];
+        removeClassOfAddTaskBtn = $(this).parents('.modal-content').find('[data-btnfn="addTask"]').removeClass(getClassOfAddTaskBtn);
+        var addClassInAddTaskBtn;
+
+        if (getClassOfAccordion === 'task-simple') {
+            addClassInAddTaskBtn = $(this).parents('.modal-content').find('[data-btnfn="addTask"]').addClass('task-simple');
+        }
+        if (getClassOfAccordion === 'task-text-progress') {
+            addClassInAddTaskBtn = $(this).parents('.modal-content').find('[data-btnfn="addTask"]').addClass('task-text-progress');
+        } else if (getClassOfAccordion === 'task-checkbox') {
+            addClassInAddTaskBtn = $(this).parents('.modal-content').find('[data-btnfn="addTask"]').addClass('task-checkbox');
+        } else if (getClassOfAccordion === 'task-image') {
+            addClassInAddTaskBtn = $(this).parents('.modal-content').find('[data-btnfn="addTask"]').addClass('task-image');
+        }
+    })
+
+    function $_taskAdd( getParent ) {
+
+        $('[data-btnfn="addTask"]').off('click').on('click', function(event) {
+
+            getAddBtnClass = $(this).attr('class').split(' ')[1];
+
+              var today = new Date();
+              var dd = String(today.getDate()).padStart(2, '0');
+              var mm = String(today.getMonth()); //January is 0!
+              var yyyy = today.getFullYear();
+
+              var monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ];
+
+              today = dd + ' ' + monthNames[mm] + ', ' + yyyy;
+
+            var $_getParent = getParent;
+
+            if (getAddBtnClass === 'task-simple') {
+                var $_task = document.getElementById('s-simple-task').value;
+
+                $html =   '<div data-draggable="true" class="card simple-title-task" style="">'+
+                                '<div class="card-body">'+
+
+                                    '<div class="task-header">'+
+                                        
+                                        '<div class="">'+
+                                            '<h4 class="" data-taskTitle="'+$_task+'">'+$_task+'</h4>'+
+                                        '</div>'+
+
+                                        '<div class="">'+
+                                            '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit-2 s-task-edit"><path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path></svg> '+
+                                            '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2 s-task-delete"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>'+
+                                        '</div>'+
+
+                                    '</div>'+
+
+                                '</div>'+
+                            '</div>';
+
+                $("[data-section='"+$_getParent+"'] .connect-sorting-content").append($html); 
+
+            } else if (getAddBtnClass === 'task-text-progress') {
+                var $_task = document.getElementById('s-task').value;
+                var $_taskText = document.getElementById('s-text').value;
+
+                var $_taskProgress = $('.range-count-number').attr('data-rangeCountNumber');
+
+                    $html = '<div data-draggable="true" class="card task-text-progress" style="">'+
+                                '<div class="card-body">'+
+
+                                    '<div class="task-header">'+
+                                        
+                                        '<div class="">'+
+                                            '<h4 class="" data-taskTitle="'+ $_task +'">'+ $_task +'</h4>'+
+                                        '</div>'+
+                                        
+                                        '<div class="">'+
+                                            '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit-2 s-task-edit"><path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path></svg>'+
+                                        '</div>'+
+
+                                    '</div>'+
+
+                                    '<div class="task-body">'+
+
+                                        '<div class="task-content">'+
+                                            '<p class="" data-taskText="'+ $_taskText +'">'+ $_taskText +'</p>'+
+
+                                            '<div class="">'+
+                                                '<div class="progress br-30">'+
+                                                    '<div class="progress-bar bg-success" role="progressbar" data-progressState="'+$_taskProgress+'" style="width: '+$_taskProgress+'%" aria-valuenow="'+$_taskProgress+'" aria-valuemin="0" aria-valuemax="100"></div>'+
+                                                '</div>'+
+
+                                                '<p class="progress-count">'+$_taskProgress+'%</p>'+
+
+                                            '</div>'+
+                                        '</div>'+
+
+                                        '<div class="task-bottom">'+
+                                            '<div class="tb-section-1">'+
+                                                '<span data-taskDate="'+today+'"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg> '+today+'</span>'+
+                                            '</div>'+
+                                            '<div class="tb-section-2">'+
+                                                '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2 s-task-delete"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>'+
+                                            '</div>'+
+                                        '</div>'+
+                                        
+                                    '</div>'+
+
+                                '</div>'+
+                            '</div>';
+
+                $("[data-section='"+$_getParent+"'] .connect-sorting-content").append($html); 
+
+            } else if (getAddBtnClass === 'task-image') {
+                var $_task = document.getElementById('s-image-task').value;
+
+                $html =   '<div data-draggable="true" class="card img-task ui-sortable-handle" style="">'+
+                                '<div class="card-body">'+
+
+                                    '<div class="task-content">'+
+                                        '<img src="assets/img/400x168.jpg" class="img-fluid">'+
+                                    '</div>'+
+
+                                    '<div class="task-header">'+
+                                        
+                                        '<div class="">'+
+                                            '<h4 class="" data-tasktitle="'+ $_task +'">'+ $_task +'</h4>'+
+                                        '</div>'+
+
+                                        '<div class="">'+
+                                            '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit-2 s-task-edit"><path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path></svg>'+
+                                        '</div>'+
+
+                                    '</div>'+
+
+                                    '<div class="task-body">'+
+
+                                        '<div class="task-bottom">'+
+                                            '<div class="tb-section-1">'+
+                                                '<span data-taskdate="'+today+'"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg> '+today+'</span>'+
+                                            '</div>'+
+                                            '<div class="tb-section-2">'+
+                                                '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2 s-task-delete"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>'+
+                                            '</div>'+
+                                        '</div>'+
+                                        
+                                    '</div>'+
+                                '</div>'+
+                            '</div>';
+
+                $("[data-section='"+$_getParent+"'] .connect-sorting-content").append($html);
+            }
+
+            $('#addTaskModal').modal('hide');
+
+            $_taskEdit();
+            $_taskDelete();
+        });
+    }
+
+    $("#add-list").off('click').on('click', function(event) {
+      event.preventDefault();
+
+        $('.add-list').show();
+        $('.edit-list').hide();
+        $('.edit-list-title').hide();
+        $('.add-list-title').show();
+        $('#addListModal').modal('show');
+    });
+
+    $(".add-list").off('click').on('click', function(event) {
+        var today = new Date();
+        var dd = String(today.getDate()).padStart(2, '0');
+        var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
+        var yyyy = today.getFullYear();
+
+        today = mm + '.' + dd + '.' + yyyy;
+
+        var $_listTitle = document.getElementById('s-list-name').value;
+
+        var $_listTitleLower = $_listTitle.toLowerCase();
+        var $_listTitleRemoveWhiteSpaces = $_listTitleLower.split(' ').join('_') ;
+        var $_listSectionDataAttr = $_listTitleRemoveWhiteSpaces;
+
+
+        $html = '<div data-section="s-'+$_listSectionDataAttr+'" class="task-list-container  mb-4 " data-connect="sorting">'+
+                    '<div class="connect-sorting">'+
+                        '<div class="task-container-header">'+
+                            '<h6 class="s-heading" data-listTitle="'+$_listTitle+'">'+$_listTitle+'</h6>'+
+                            '<div class="dropdown">'+
+                                '<a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink-4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">'+
+                                    '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-horizontal"><circle cx="12" cy="12" r="1"></circle><circle cx="19" cy="12" r="1"></circle><circle cx="5" cy="12" r="1"></circle></svg>'+
+                                '</a>'+
+                                '<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink-4">'+
+                                    '<a class="dropdown-item list-edit" href="javascript:void(0);">Edit</a>'+
+                                    '<a class="dropdown-item list-delete" href="javascript:void(0);">Delete</a>'+
+                                    '<a class="dropdown-item list-clear-all" href="javascript:void(0);">Clear All</a>'+
+                                '</div>'+
+                            '</div>'+
+                        '</div>'+
+
+                        '<div class="connect-sorting-content" data-sortable="true">'+
+                            
+                            
+                        '</div>'+
+
+                        '<div class="add-s-task">'+
+                            '<a class="addTask"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus-circle"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line></svg> Add Task</a>'+
+                        '</div>'+
+
+                    '</div>'+
+                '</div>';
+
+        $(".task-list-section").append($html); 
+        $('#addListModal').modal('hide');
+        $('#s-list-name').val('');
+        $_taskSortable();
+        $_editList()
+        $_deleteList();
+        $_clearList();
+        addTask();
+        $_taskEdit();
+        $_taskDelete();
+    })
+
+    // Delete the whole list including tasks at on click
+
+    function $_deleteList() {
+        $('.list-delete').off('click').on('click', function(event) {
+            event.preventDefault();
+            $(this).parents('[data-connect]').remove();
+        })
+    }
+    function $_editList() {
+        $('.list-edit').off('click').on('click', function(event) {
+
+            event.preventDefault();
+
+            var $_outerThis = $(this);
+           
+            $('.add-list').hide();
+            $('.edit-list').show();
+
+            $('.add-list-title').hide();
+            $('.edit-list-title').show();
+
+            var $_listTitle = $_outerThis.parents('[data-connect="sorting"]').find('.s-heading').attr('data-listTitle');
+            $('#s-list-name').val($_listTitle);
+
+            $('.edit-list').off('click').on('click', function(event) {
+                var $_innerThis = $(this);
+                var $_getListTitle = document.getElementById('s-list-name').value;
+
+                var $_editedListTitle = $_outerThis.parents('[data-connect="sorting"]').find('.s-heading').html($_getListTitle);
+                var $_editedListTitleDataAttr = $_outerThis.parents('[data-connect="sorting"]').find('.s-heading').attr('data-listTitle', $_getListTitle);
+
+                $('#addListModal').modal('hide');
+                $('#s-list-name').val('');
+            })
+            $('#addListModal').modal('show');
+            $('#addListModal').on('hidden.bs.modal', function (e) {
+                $('#s-list-name').val('');
+            })
+        })
+    }
+
+    // Clear all task at on click
+
+    function $_clearList() {
+        $('.list-clear-all').off('click').on('click', function(event) {
+            event.preventDefault();
+            $(this).parents('[data-connect="sorting"]').find('.connect-sorting-content .card').remove();
+        })
+    }
+
+    // Delete the task on click 
+
+    function $_taskDelete() {
+        $('.card .s-task-delete').off('click').on('click', function(event) {
+            event.preventDefault();
+
+            get_card_parent = $(this).parents('.card');
+
+            $('#deleteConformation').modal('show');
+
+            $('[data-remove="task"]').on('click', function(event) {
+                event.preventDefault();
+                /* Act on the event */
+                get_card_parent.remove();
+                $('#deleteConformation').modal('hide');
+            });
+
+        })
+    }
+
+    function $_taskEdit() {
+      $('.card .s-task-edit').off('click').on('click', function(event) {
+
+        event.preventDefault();
+
+        var $_outerThis = $(this);
+       
+        $('.add-task-title').hide();
+        $('.edit-task-title').show();
+
+        $('[data-btnfn="addTask"]').hide();
+        $('[data-btnfn="editTask"]').show();
+
+        if ($(this).parents('.card').hasClass('img-task')) {
+
+            var $_taskTitle = $_outerThis.parents('.card').find('h4').attr('data-taskTitle');
+            var get_value_title = $('.task-image #s-image-task').val($_taskTitle);
+            $('.task-image .collapse').collapse('show');
+
+        } else if ($(this).parents('.card').hasClass('simple-title-task')) {
+
+            var $_taskTitle = $_outerThis.parents('.card').find('h4').attr('data-taskTitle');
+            var get_value_title = $('.task-simple #s-simple-task').val($_taskTitle);
+            $('.task-simple .collapse').collapse('show');
+
+        } else if ($(this).parents('.card').hasClass('task-text-progress')) {
+
+            var $_taskTitle = $_outerThis.parents('.card').find('h4').attr('data-taskTitle');
+            var get_value_title = $('.task-text-progress #s-task').val($_taskTitle);
+
+            var $_taskText = $_outerThis.parents('.card').find('p:not(".progress-count")').attr('data-taskText');
+            var get_value_text = $('.task-text-progress #s-text').val($_taskText);
+
+            var $_taskProgress = $_outerThis.parents('.card').find('div.progress-bar').attr('data-progressState');
+            var get_value_progress = $('#progress-range-counter').val($_taskProgress);
+            var get_value_progressHtml = $('.range-count-number').html($_taskProgress);
+            var get_value_progressDataAttr = $('.range-count-number').attr('data-rangecountnumber', $_taskProgress);
+
+            $('.task-text-progress .collapse').collapse('show');
+        }
+
+        $('[data-btnfn="editTask"]').off('click').on('click', function(event) {
+            var $_innerThis = $(this);
+
+            if ($_outerThis.parents('.card').hasClass('img-task')) {
+
+                var $_task = document.getElementById('s-image-task').value;
+                var $_taskDataAttr = $_outerThis.parents('.card').find('h4').attr('data-taskTitle' , $_task);
+                var $_taskTitle = $_outerThis.parents('.card').find('h4').html($_task);
+
+            } else if ($_outerThis.parents('.card').hasClass('simple-title-task')) {
+
+                var $_task = document.getElementById('s-simple-task').value;
+                var $_taskDataAttr = $_outerThis.parents('.card').find('h4').attr('data-taskTitle' , $_task);
+                var $_taskTitle = $_outerThis.parents('.card').find('h4').html($_task);
+
+            } else if ($_outerThis.parents('.card').hasClass('task-text-progress')) {
+
+                var $_taskValue = document.getElementById('s-task').value;
+                var $_taskTextValue = document.getElementById('s-text').value;
+                var $_taskProgressValue = $('.range-count-number').attr('data-rangeCountNumber');
+
+                var $_taskDataAttr = $_outerThis.parents('.card').find('h4').attr('data-taskTitle' , $_taskValue);
+                var $_taskTitle = $_outerThis.parents('.card').find('h4').html($_taskValue);
+                var $_taskTextDataAttr = $_outerThis.parents('.card').find('p:not(".progress-count")').attr('data-tasktext' , $_taskTextValue);
+                var $_taskText = $_outerThis.parents('.card').find('p:not(".progress-count")').html($_taskTextValue);
+
+                var $_taskProgressStyle = $_outerThis.parents('.card').find('div.progress-bar').attr('style', "width: " + $_taskProgressValue +"%");
+                var $_taskProgressDataAttr = $_outerThis.parents('.card').find('div.progress-bar').attr('data-progressState', $_taskProgressValue);
+                var $_taskProgressAriaAttr = $_outerThis.parents('.card').find('div.progress-bar').attr('aria-valuenow', $_taskProgressValue);
+                var $_taskProgressProgressCount = $_outerThis.parents('.card').find('.progress-count').html($_taskProgressValue+"%");
+            }
+
+            $('#addTaskModal').modal('hide');
+            var setDate = $('.taskDate').html('');
+            $('.taskDate').hide();
+        })
+        $('#addTaskModal').modal('show');
+      })
+    }
+
+$_editList();
+$_deleteList();
+$_clearList();
+addTask();
+$_taskEdit();
+$_taskDelete();
+$_taskSortable();
+
+});
\ No newline at end of file
diff --git a/static/js/apps/todoList.js b/static/js/apps/todoList.js
new file mode 100644
index 00000000..6c79f9b1
--- /dev/null
+++ b/static/js/apps/todoList.js
@@ -0,0 +1,443 @@
+$('.input-search').on('keyup', function() {
+  var rex = new RegExp($(this).val(), 'i');
+    $('.todo-box .todo-item').hide();
+    $('.todo-box .todo-item').filter(function() {
+        return rex.test($(this).text());
+    }).show();
+});
+
+const taskViewScroll = new PerfectScrollbar('.task-text', {
+    wheelSpeed:.5,
+    swipeEasing:!0,
+    minScrollbarLength:40,
+    maxScrollbarLength:300,
+    suppressScrollX : true
+});
+function dynamicBadgeNotification( setTodoCategoryCount ) {
+  var todoCategoryCount = setTodoCategoryCount;
+
+  // Get Parents Div(s)
+  var get_ParentsDiv = $('.todo-item');
+  var get_TodoAllListParentsDiv = $('.todo-item.all-list');
+  var get_TodoCompletedListParentsDiv = $('.todo-item.todo-task-done');
+  var get_TodoImportantListParentsDiv = $('.todo-item.todo-task-important');
+
+  // Get Parents Div(s) Counts
+  var get_TodoListElementsCount = get_TodoAllListParentsDiv.length;
+  var get_CompletedTaskElementsCount = get_TodoCompletedListParentsDiv.length;
+  var get_ImportantTaskElementsCount = get_TodoImportantListParentsDiv.length;
+
+  // Get Badge Div(s)
+  var getBadgeTodoAllListDiv = $('#all-list .todo-badge');
+  var getBadgeCompletedTaskListDiv = $('#todo-task-done .todo-badge');
+  var getBadgeImportantTaskListDiv = $('#todo-task-important .todo-badge');
+
+
+  if (todoCategoryCount === 'allList') {
+    if (get_TodoListElementsCount === 0) {
+      getBadgeTodoAllListDiv.text('');
+      return;
+    }
+    if (get_TodoListElementsCount > 9) {
+        getBadgeTodoAllListDiv.css({
+            padding: '2px 0px',
+            height: '25px',
+            width: '25px'
+        });
+    } else if (get_TodoListElementsCount <= 9) {
+        getBadgeTodoAllListDiv.removeAttr('style');
+    }
+    getBadgeTodoAllListDiv.text(get_TodoListElementsCount);
+  }
+  else if (todoCategoryCount === 'completedList') {
+    if (get_CompletedTaskElementsCount === 0) {
+      getBadgeCompletedTaskListDiv.text('');
+      return;
+    }
+    if (get_CompletedTaskElementsCount > 9) {
+        getBadgeCompletedTaskListDiv.css({
+            padding: '2px 0px',
+            height: '25px',
+            width: '25px'
+        });
+    } else if (get_CompletedTaskElementsCount <= 9) {
+        getBadgeCompletedTaskListDiv.removeAttr('style');
+    }
+    getBadgeCompletedTaskListDiv.text(get_CompletedTaskElementsCount);
+  }
+  else if (todoCategoryCount === 'importantList') {
+    if (get_ImportantTaskElementsCount === 0) {
+      getBadgeImportantTaskListDiv.text('');
+      return;
+    }
+    if (get_ImportantTaskElementsCount > 9) {
+        getBadgeImportantTaskListDiv.css({
+            padding: '2px 0px',
+            height: '25px',
+            width: '25px'
+        });
+    } else if (get_ImportantTaskElementsCount <= 9) {
+        getBadgeImportantTaskListDiv.removeAttr('style');
+    }
+    getBadgeImportantTaskListDiv.text(get_ImportantTaskElementsCount);
+  }
+}
+
+new dynamicBadgeNotification('allList');
+new dynamicBadgeNotification('completedList');
+new dynamicBadgeNotification('importantList');
+
+/*
+  ====================
+    Quill Editor
+  ====================
+*/
+
+var quill = new Quill('#taskdescription', {
+  modules: {
+    toolbar: [
+      [{ header: [1, 2, false] }],
+      ['bold', 'italic', 'underline'],
+      ['image', 'code-block']
+    ]
+  },
+  placeholder: 'Compose an epic...',
+  theme: 'snow'  // or 'bubble'
+});
+
+$('#addTaskModal').on('hidden.bs.modal', function (e) {
+  // do something...
+  $(this)
+    .find("input,textarea,select")
+       .val('')
+       .end();
+
+  quill.deleteText(0, 2000);
+})
+$('.mail-menu').on('click', function(event) {
+  $('.tab-title').addClass('mail-menu-show');
+  $('.mail-overlay').addClass('mail-overlay-show');
+})
+$('.mail-overlay').on('click', function(event) {
+  $('.tab-title').removeClass('mail-menu-show');
+  $('.mail-overlay').removeClass('mail-overlay-show');
+})
+$('#addTask').on('click', function(event) {
+  event.preventDefault();
+  $('.add-tsk').show();
+  $('.edit-tsk').hide();
+  $('#addTaskModal').modal('show');
+  const ps = new PerfectScrollbar('.todo-box-scroll', {
+    suppressScrollX : true
+  });
+});
+const ps = new PerfectScrollbar('.todo-box-scroll', {
+    suppressScrollX : true
+  });
+
+const todoListScroll = new PerfectScrollbar('.todoList-sidebar-scroll', {
+    suppressScrollX : true
+  });
+
+function checkCheckbox() {
+  $('.todo-item input[type="checkbox"]').click(function() {
+    if ($(this).is(":checked")) {
+        $(this).parents('.todo-item').addClass('todo-task-done');
+    }
+    else if ($(this).is(":not(:checked)")) {
+        $(this).parents('.todo-item').removeClass('todo-task-done');
+    }
+    new dynamicBadgeNotification('completedList');
+  });
+}
+
+function deleteDropdown() {
+  $('.action-dropdown .dropdown-menu .delete.dropdown-item').click(function() {
+    if(!$(this).parents('.todo-item').hasClass('todo-task-trash')) {
+
+        var getTodoParent = $(this).parents('.todo-item');
+        var getTodoClass = getTodoParent.attr('class');
+
+        var getFirstClass = getTodoClass.split(' ')[1];
+        var getSecondClass = getTodoClass.split(' ')[2];
+        var getThirdClass = getTodoClass.split(' ')[3];
+
+        if (getFirstClass === 'all-list') {
+          getTodoParent.removeClass(getFirstClass);
+        }
+        if (getSecondClass === 'todo-task-done' || getSecondClass === 'todo-task-important') {
+          getTodoParent.removeClass(getSecondClass);
+        }
+        if (getThirdClass === 'todo-task-done' || getThirdClass === 'todo-task-important') {
+          getTodoParent.removeClass(getThirdClass);
+        }
+        $(this).parents('.todo-item').addClass('todo-task-trash');
+    } else if($(this).parents('.todo-item').hasClass('todo-task-trash')) {
+        $(this).parents('.todo-item').removeClass('todo-task-trash');
+    }
+    new dynamicBadgeNotification('allList');
+    new dynamicBadgeNotification('completedList');
+    new dynamicBadgeNotification('importantList');
+  });
+}
+function deletePermanentlyDropdown() {
+  $('.action-dropdown .dropdown-menu .permanent-delete.dropdown-item').on('click', function(event) {
+    event.preventDefault();
+    if($(this).parents('.todo-item').hasClass('todo-task-trash')) {
+      $(this).parents('.todo-item').remove();
+    }
+  });
+}
+
+function reviveMailDropdown() {
+  $('.action-dropdown .dropdown-menu .revive.dropdown-item').on('click', function(event) {
+    event.preventDefault();
+    if($(this).parents('.todo-item').hasClass('todo-task-trash')) {
+      var getTodoParent = $(this).parents('.todo-item');
+      var getTodoClass = getTodoParent.attr('class');
+      var getFirstClass = getTodoClass.split(' ')[1];
+      $(this).parents('.todo-item').removeClass(getFirstClass);
+      $(this).parents('.todo-item').addClass('all-list');
+      $(this).parents('.todo-item').hide();
+    }
+    new dynamicBadgeNotification('allList');
+    new dynamicBadgeNotification('completedList');
+    new dynamicBadgeNotification('importantList');
+  });
+}
+
+function importantDropdown() {
+  $('.important').click(function() {
+    if(!$(this).parents('.todo-item').hasClass('todo-task-important')){
+        $(this).parents('.todo-item').addClass('todo-task-important');
+        $(this).html('Back to List');
+    }
+    else if($(this).parents('.todo-item').hasClass('todo-task-important')){
+        $(this).parents('.todo-item').removeClass('todo-task-important');
+        $(this).html('Important');
+        $(".list-actions#all-list").trigger('click');
+    }
+    new dynamicBadgeNotification('importantList');
+  });
+}
+
+function priorityDropdown() {
+  $('.priority-dropdown .dropdown-menu .dropdown-item').on('click', function(event) {
+
+     var getClass = $(this).attr('class').split(' ')[1];
+     var getDropdownClass = $(this).parents('.p-dropdown').children('.dropdown-toggle').attr('class').split(' ')[1];
+     $(this).parents('.p-dropdown').children('.dropdown-toggle').removeClass(getDropdownClass);
+
+     $(this).parents('.p-dropdown').children('.dropdown-toggle').addClass(getClass);
+  })
+}
+
+function editDropdown() {
+  $('.action-dropdown .dropdown-menu .edit.dropdown-item').click(function() {
+
+    event.preventDefault();
+
+    var $_outerThis = $(this);
+   
+    $('.add-tsk').hide();
+    $('.edit-tsk').show();
+
+    var $_taskTitle = $_outerThis.parents('.todo-item').children().find('.todo-heading').attr('data-todoHeading');
+    var $_taskText = $_outerThis.parents('.todo-item').children().find('.todo-text').attr('data-todoText');
+    var $_taskJson = JSON.parse($_taskText);
+
+    $('#task').val($_taskTitle);
+    quill.setContents($_taskJson);
+
+    $('.edit-tsk').off('click').on('click', function(event) {
+        var $_innerThis = $(this);
+        var $_task = document.getElementById('task').value;
+        var $_taskDescription = document.getElementById('taskdescription').value;
+
+        var today = new Date();
+        var dd = String(today.getDate()).padStart(2, '0');
+        var mm = String(today.getMonth()); //January is 0!
+        var yyyy = today.getFullYear();
+        var monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ];
+
+        today = monthNames[mm] + ', ' + dd + ' ' + yyyy;
+
+
+        var $_taskDescriptionText = quill.getText();
+        var $_taskDescriptionInnerHTML = quill.root.innerHTML;
+
+        var delta = quill.getContents();
+        var $_textDelta = JSON.stringify(delta);
+
+        var length = 125;
+
+        var trimmedString = $_taskDescriptionText.length > length ?
+          $_taskDescriptionText.substring(0, length - 3) + "..." :
+          $_taskDescriptionText;
+
+        var $_taskEditedTitle = $_outerThis.parents('.todo-item').children().find('.todo-heading').html($_task);
+        var $_taskEditedText = $_outerThis.parents('.todo-item').children().find('.todo-text').html(trimmedString);
+        var $_taskEditedText = $_outerThis.parents('.todo-item').children().find('.meta-date').html(today);
+
+        var $_taskEditedTitleDataAttr = $_outerThis.parents('.todo-item').children().find('.todo-heading').attr('data-todoHeading', $_task);
+        var $_taskEditedTextDataAttr = $_outerThis.parents('.todo-item').children().find('.todo-text').attr('data-todoText', $_textDelta);
+        var $_taskEditedTextDataAttr = $_outerThis.parents('.todo-item').children().find('.todo-text').attr('data-todoHtml', $_taskDescriptionInnerHTML);
+        $('#addTaskModal').modal('hide');
+    })
+    $('#addTaskModal').modal('show');
+  })
+}
+
+function todoItem() {
+  $('.todo-item .todo-content').on('click', function(event) {
+    event.preventDefault();
+   
+    var $_taskTitle = $(this).find('.todo-heading').attr('data-todoHeading');
+    var $todoHtml = $(this).find('.todo-text').attr('data-todoHtml');
+
+    $('.task-heading').text($_taskTitle);
+    $('.task-text').html($todoHtml);
+    
+    $('#todoShowListItem').modal('show');
+  });
+}
+var $btns = $('.list-actions').click(function() {
+  if (this.id == 'all-list') {
+    var $el = $('.' + this.id).fadeIn();
+    $('#ct > div').not($el).hide();
+  } else if (this.id == 'todo-task-trash') {
+    var $el = $('.' + this.id).fadeIn();
+    $('#ct > div').not($el).hide();
+  } else {
+    var $el = $('.' + this.id).fadeIn();
+    $('#ct > div').not($el).hide();
+  }
+  $btns.removeClass('active');
+  $(this).addClass('active');  
+})
+
+checkCheckbox();
+deleteDropdown();
+deletePermanentlyDropdown();
+reviveMailDropdown();
+importantDropdown();
+priorityDropdown();
+editDropdown();
+todoItem();
+
+$(".add-tsk").click(function(){
+  var today = new Date();
+  var dd = String(today.getDate()).padStart(2, '0');
+  var mm = String(today.getMonth()); //January is 0!
+  var yyyy = today.getFullYear();
+  var monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ];
+
+  today = monthNames[mm] + ', ' + dd + ' ' + yyyy;
+  var $_task = document.getElementById('task').value;
+
+  var $_taskDescriptionText = quill.getText();
+  var $_taskDescriptionInnerHTML = quill.root.innerHTML;
+
+  var delta = quill.getContents();
+  var $_textDelta = JSON.stringify(delta);
+
+  $html = '<div class="todo-item all-list">'+
+              '<div class="todo-item-inner">'+
+                  '<div class="n-chk text-center">'+
+                      '<label class="new-control new-checkbox checkbox-primary">'+
+                        '<input type="checkbox" class="new-control-input inbox-chkbox">'+
+                        '<span class="new-control-indicator"></span>'+
+                      '</label>'+
+                  '</div>'+
+  
+                  '<div class="todo-content">'+
+                      '<h5 class="todo-heading" data-todoHeading="'+$_task+'"> '+$_task+'</h5>'+
+                      '<p class="meta-date">'+today+'</p>'+
+                      "<p class='todo-text' data-todoHtml='"+$_taskDescriptionInnerHTML+"' data-todoText='"+$_textDelta+"'> "+$_taskDescriptionText+"</p>"+
+                  '</div>'+
+  
+                  '<div class="priority-dropdown">'+
+                      '<div class="dropdown p-dropdown">'+
+                          '<a class="dropdown-toggle primary" href="#" role="button" id="dropdownMenuLink-4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">'+
+                              '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-alert-octagon"><polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"></polygon><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12" y2="16"></line></svg>'+
+                          '</a>'+
+  
+                          '<div class="dropdown-menu" aria-labelledby="dropdownMenuLink-4">'+
+                              '<a class="dropdown-item danger" href="javascript:void(0);"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-alert-octagon"><polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"></polygon><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12" y2="16"></line></svg> High</a>'+
+                              '<a class="dropdown-item warning" href="javascript:void(0);"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-alert-octagon"><polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"></polygon><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12" y2="16"></line></svg> Middle</a>'+
+                              '<a class="dropdown-item primary" href="javascript:void(0);"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-alert-octagon"><polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"></polygon><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12" y2="16"></line></svg> Low</a>'+
+                          '</div>'+
+                      '</div>'+
+                  '</div>'+
+  
+                  '<div class="action-dropdown">'+
+                      '<div class="dropdown">'+
+                          '<a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink-4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">'+
+                              '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-vertical"><circle cx="12" cy="12" r="1"></circle><circle cx="12" cy="5" r="1"></circle><circle cx="12" cy="19" r="1"></circle></svg>'+
+                          '</a>'+
+  
+                          '<div class="dropdown-menu" aria-labelledby="dropdownMenuLink-4">'+
+                              '<a class="dropdown-item edit" href="javascript:void(0);">Edit</a>'+
+                              '<a class="important dropdown-item" href="javascript:void(0);">Important</a>'+
+                              '<a class="dropdown-item delete" href="javascript:void(0);">Delete</a>'+
+                              '<a class="dropdown-item permanent-delete" href="javascript:void(0);">Permanent Delete</a>'+
+                              '<a class="dropdown-item revive" href="javascript:void(0);">Revive Task</a>'+
+                          '</div>'+
+                      '</div>'+
+                  '</div>'+
+  
+              '</div>'+
+          '</div>';
+
+
+    $("#ct").prepend($html); 
+    $('#addTaskModal').modal('hide');
+    checkCheckbox();
+    deleteDropdown();
+    deletePermanentlyDropdown();
+    reviveMailDropdown();
+    editDropdown();
+    priorityDropdown();
+    todoItem();
+    importantDropdown();
+    new dynamicBadgeNotification('allList');
+    $(".list-actions#all-list").trigger('click');
+});
+
+$('.tab-title .nav-pills a.nav-link').on('click', function(event) {
+  $(this).parents('.mail-box-container').find('.tab-title').removeClass('mail-menu-show')
+  $(this).parents('.mail-box-container').find('.mail-overlay').removeClass('mail-overlay-show')
+})
+
+// Validation Process
+
+  var $_getValidationField = document.getElementsByClassName('validation-text');
+
+  getTaskTitleInput = document.getElementById('task');
+
+  getTaskTitleInput.addEventListener('input', function() {
+
+      getTaskTitleInputValue = this.value;
+
+      if (getTaskTitleInputValue == "") {
+        $_getValidationField[0].innerHTML = 'Title Required';
+        $_getValidationField[0].style.display = 'block';
+      } else {
+        $_getValidationField[0].style.display = 'none';
+      }
+  })
+
+  getTaskDescriptionInput = document.getElementById('taskdescription');
+
+  getTaskDescriptionInput.addEventListener('input', function() {
+
+    getTaskDescriptionInputValue = this.value;
+
+    if (getTaskDescriptionInputValue == "") {
+      $_getValidationField[1].innerHTML = 'Description Required';
+      $_getValidationField[1].style.display = 'block';
+    } else {
+      $_getValidationField[1].style.display = 'none';
+    }
+
+  })
\ No newline at end of file
diff --git a/static/js/authentication/form-1.js b/static/js/authentication/form-1.js
new file mode 100644
index 00000000..158bc292
--- /dev/null
+++ b/static/js/authentication/form-1.js
@@ -0,0 +1,12 @@
+var togglePassword = document.getElementById("toggle-password");
+
+if (togglePassword) {
+	togglePassword.addEventListener('click', function() {
+	  var x = document.getElementById("password");
+	  if (x.type === "password") {
+	    x.type = "text";
+	  } else {
+	    x.type = "password";
+	  }
+	});
+}
diff --git a/static/js/authentication/form-2.js b/static/js/authentication/form-2.js
new file mode 100644
index 00000000..d6b13c52
--- /dev/null
+++ b/static/js/authentication/form-2.js
@@ -0,0 +1,18 @@
+var togglePassword = document.getElementById("toggle-password");
+var formContent = document.getElementsByClassName('form-content')[0]; 
+var getFormContentHeight = formContent.clientHeight;
+
+var formImage = document.getElementsByClassName('form-image')[0];
+if (formImage) {
+	var setFormImageHeight = formImage.style.height = getFormContentHeight + 'px';
+}
+if (togglePassword) {
+	togglePassword.addEventListener('click', function() {
+	  var x = document.getElementById("password");
+	  if (x.type === "password") {
+	    x.type = "text";
+	  } else {
+	    x.type = "password";
+	  }
+	});
+}
\ No newline at end of file
diff --git a/static/js/clipboard/clipboard.min.js b/static/js/clipboard/clipboard.min.js
new file mode 100644
index 00000000..1993676f
--- /dev/null
+++ b/static/js/clipboard/clipboard.min.js
@@ -0,0 +1,7 @@
+/*!
+ * clipboard.js v1.6.1
+ * https://zenorocha.github.io/clipboard.js
+ *
+ * Licensed MIT © Zeno Rocha
+ */
+!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var t;t="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,t.Clipboard=e()}}(function(){var e,t,n;return function e(t,n,o){function i(a,c){if(!n[a]){if(!t[a]){var l="function"==typeof require&&require;if(!c&&l)return l(a,!0);if(r)return r(a,!0);var u=new Error("Cannot find module '"+a+"'");throw u.code="MODULE_NOT_FOUND",u}var s=n[a]={exports:{}};t[a][0].call(s.exports,function(e){var n=t[a][1][e];return i(n?n:e)},s,s.exports,e,t,n,o)}return n[a].exports}for(var r="function"==typeof require&&require,a=0;a<o.length;a++)i(o[a]);return i}({1:[function(e,t,n){function o(e,t){for(;e&&e.nodeType!==i;){if(e.matches(t))return e;e=e.parentNode}}var i=9;if("undefined"!=typeof Element&&!Element.prototype.matches){var r=Element.prototype;r.matches=r.matchesSelector||r.mozMatchesSelector||r.msMatchesSelector||r.oMatchesSelector||r.webkitMatchesSelector}t.exports=o},{}],2:[function(e,t,n){function o(e,t,n,o,r){var a=i.apply(this,arguments);return e.addEventListener(n,a,r),{destroy:function(){e.removeEventListener(n,a,r)}}}function i(e,t,n,o){return function(n){n.delegateTarget=r(n.target,t),n.delegateTarget&&o.call(e,n)}}var r=e("./closest");t.exports=o},{"./closest":1}],3:[function(e,t,n){n.node=function(e){return void 0!==e&&e instanceof HTMLElement&&1===e.nodeType},n.nodeList=function(e){var t=Object.prototype.toString.call(e);return void 0!==e&&("[object NodeList]"===t||"[object HTMLCollection]"===t)&&"length"in e&&(0===e.length||n.node(e[0]))},n.string=function(e){return"string"==typeof e||e instanceof String},n.fn=function(e){var t=Object.prototype.toString.call(e);return"[object Function]"===t}},{}],4:[function(e,t,n){function o(e,t,n){if(!e&&!t&&!n)throw new Error("Missing required arguments");if(!c.string(t))throw new TypeError("Second argument must be a String");if(!c.fn(n))throw new TypeError("Third argument must be a Function");if(c.node(e))return i(e,t,n);if(c.nodeList(e))return r(e,t,n);if(c.string(e))return a(e,t,n);throw new TypeError("First argument must be a String, HTMLElement, HTMLCollection, or NodeList")}function i(e,t,n){return e.addEventListener(t,n),{destroy:function(){e.removeEventListener(t,n)}}}function r(e,t,n){return Array.prototype.forEach.call(e,function(e){e.addEventListener(t,n)}),{destroy:function(){Array.prototype.forEach.call(e,function(e){e.removeEventListener(t,n)})}}}function a(e,t,n){return l(document.body,e,t,n)}var c=e("./is"),l=e("delegate");t.exports=o},{"./is":3,delegate:2}],5:[function(e,t,n){function o(e){var t;if("SELECT"===e.nodeName)e.focus(),t=e.value;else if("INPUT"===e.nodeName||"TEXTAREA"===e.nodeName){var n=e.hasAttribute("readonly");n||e.setAttribute("readonly",""),e.select(),e.setSelectionRange(0,e.value.length),n||e.removeAttribute("readonly"),t=e.value}else{e.hasAttribute("contenteditable")&&e.focus();var o=window.getSelection(),i=document.createRange();i.selectNodeContents(e),o.removeAllRanges(),o.addRange(i),t=o.toString()}return t}t.exports=o},{}],6:[function(e,t,n){function o(){}o.prototype={on:function(e,t,n){var o=this.e||(this.e={});return(o[e]||(o[e]=[])).push({fn:t,ctx:n}),this},once:function(e,t,n){function o(){i.off(e,o),t.apply(n,arguments)}var i=this;return o._=t,this.on(e,o,n)},emit:function(e){var t=[].slice.call(arguments,1),n=((this.e||(this.e={}))[e]||[]).slice(),o=0,i=n.length;for(o;o<i;o++)n[o].fn.apply(n[o].ctx,t);return this},off:function(e,t){var n=this.e||(this.e={}),o=n[e],i=[];if(o&&t)for(var r=0,a=o.length;r<a;r++)o[r].fn!==t&&o[r].fn._!==t&&i.push(o[r]);return i.length?n[e]=i:delete n[e],this}},t.exports=o},{}],7:[function(t,n,o){!function(i,r){if("function"==typeof e&&e.amd)e(["module","select"],r);else if("undefined"!=typeof o)r(n,t("select"));else{var a={exports:{}};r(a,i.select),i.clipboardAction=a.exports}}(this,function(e,t){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var i=n(t),r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},a=function(){function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,n,o){return n&&e(t.prototype,n),o&&e(t,o),t}}(),c=function(){function e(t){o(this,e),this.resolveOptions(t),this.initSelection()}return a(e,[{key:"resolveOptions",value:function e(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};this.action=t.action,this.emitter=t.emitter,this.target=t.target,this.text=t.text,this.trigger=t.trigger,this.selectedText=""}},{key:"initSelection",value:function e(){this.text?this.selectFake():this.target&&this.selectTarget()}},{key:"selectFake",value:function e(){var t=this,n="rtl"==document.documentElement.getAttribute("dir");this.removeFake(),this.fakeHandlerCallback=function(){return t.removeFake()},this.fakeHandler=document.body.addEventListener("click",this.fakeHandlerCallback)||!0,this.fakeElem=document.createElement("textarea"),this.fakeElem.style.fontSize="12pt",this.fakeElem.style.border="0",this.fakeElem.style.padding="0",this.fakeElem.style.margin="0",this.fakeElem.style.position="absolute",this.fakeElem.style[n?"right":"left"]="-9999px";var o=window.pageYOffset||document.documentElement.scrollTop;this.fakeElem.style.top=o+"px",this.fakeElem.setAttribute("readonly",""),this.fakeElem.value=this.text,document.body.appendChild(this.fakeElem),this.selectedText=(0,i.default)(this.fakeElem),this.copyText()}},{key:"removeFake",value:function e(){this.fakeHandler&&(document.body.removeEventListener("click",this.fakeHandlerCallback),this.fakeHandler=null,this.fakeHandlerCallback=null),this.fakeElem&&(document.body.removeChild(this.fakeElem),this.fakeElem=null)}},{key:"selectTarget",value:function e(){this.selectedText=(0,i.default)(this.target),this.copyText()}},{key:"copyText",value:function e(){var t=void 0;try{t=document.execCommand(this.action)}catch(e){t=!1}this.handleResult(t)}},{key:"handleResult",value:function e(t){this.emitter.emit(t?"success":"error",{action:this.action,text:this.selectedText,trigger:this.trigger,clearSelection:this.clearSelection.bind(this)})}},{key:"clearSelection",value:function e(){this.target&&this.target.blur(),window.getSelection().removeAllRanges()}},{key:"destroy",value:function e(){this.removeFake()}},{key:"action",set:function e(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"copy";if(this._action=t,"copy"!==this._action&&"cut"!==this._action)throw new Error('Invalid "action" value, use either "copy" or "cut"')},get:function e(){return this._action}},{key:"target",set:function e(t){if(void 0!==t){if(!t||"object"!==("undefined"==typeof t?"undefined":r(t))||1!==t.nodeType)throw new Error('Invalid "target" value, use a valid Element');if("copy"===this.action&&t.hasAttribute("disabled"))throw new Error('Invalid "target" attribute. Please use "readonly" instead of "disabled" attribute');if("cut"===this.action&&(t.hasAttribute("readonly")||t.hasAttribute("disabled")))throw new Error('Invalid "target" attribute. You can\'t cut text from elements with "readonly" or "disabled" attributes');this._target=t}},get:function e(){return this._target}}]),e}();e.exports=c})},{select:5}],8:[function(t,n,o){!function(i,r){if("function"==typeof e&&e.amd)e(["module","./clipboard-action","tiny-emitter","good-listener"],r);else if("undefined"!=typeof o)r(n,t("./clipboard-action"),t("tiny-emitter"),t("good-listener"));else{var a={exports:{}};r(a,i.clipboardAction,i.tinyEmitter,i.goodListener),i.clipboard=a.exports}}(this,function(e,t,n,o){"use strict";function i(e){return e&&e.__esModule?e:{default:e}}function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function c(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}function l(e,t){var n="data-clipboard-"+e;if(t.hasAttribute(n))return t.getAttribute(n)}var u=i(t),s=i(n),f=i(o),d=function(){function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,n,o){return n&&e(t.prototype,n),o&&e(t,o),t}}(),h=function(e){function t(e,n){r(this,t);var o=a(this,(t.__proto__||Object.getPrototypeOf(t)).call(this));return o.resolveOptions(n),o.listenClick(e),o}return c(t,e),d(t,[{key:"resolveOptions",value:function e(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};this.action="function"==typeof t.action?t.action:this.defaultAction,this.target="function"==typeof t.target?t.target:this.defaultTarget,this.text="function"==typeof t.text?t.text:this.defaultText}},{key:"listenClick",value:function e(t){var n=this;this.listener=(0,f.default)(t,"click",function(e){return n.onClick(e)})}},{key:"onClick",value:function e(t){var n=t.delegateTarget||t.currentTarget;this.clipboardAction&&(this.clipboardAction=null),this.clipboardAction=new u.default({action:this.action(n),target:this.target(n),text:this.text(n),trigger:n,emitter:this})}},{key:"defaultAction",value:function e(t){return l("action",t)}},{key:"defaultTarget",value:function e(t){var n=l("target",t);if(n)return document.querySelector(n)}},{key:"defaultText",value:function e(t){return l("text",t)}},{key:"destroy",value:function e(){this.listener.destroy(),this.clipboardAction&&(this.clipboardAction.destroy(),this.clipboardAction=null)}}],[{key:"isSupported",value:function e(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:["copy","cut"],n="string"==typeof t?[t]:t,o=!!document.queryCommandSupported;return n.forEach(function(e){o=o&&!!document.queryCommandSupported(e)}),o}}]),t}(s.default);e.exports=h})},{"./clipboard-action":7,"good-listener":4,"tiny-emitter":6}]},{},[8])(8)});
\ No newline at end of file
diff --git a/static/js/components/custom-carousel.js b/static/js/components/custom-carousel.js
new file mode 100644
index 00000000..cea2fa1e
--- /dev/null
+++ b/static/js/components/custom-carousel.js
@@ -0,0 +1,10 @@
+$(function(){
+    var car_m_2 = $('#car_m_2').data('carousel');
+    var thumbs = $('#car_m_2_thumbs > .thumb');
+    $.each(thumbs, function(){
+        var thumb = $(this),  index = thumb.data('index') - 1;
+        thumb.on('click', function(){
+            car_m_2.slideTo(index);
+        });
+    });
+});
\ No newline at end of file
diff --git a/static/js/components/custom-countdown.js b/static/js/components/custom-countdown.js
new file mode 100644
index 00000000..9a6ad97a
--- /dev/null
+++ b/static/js/components/custom-countdown.js
@@ -0,0 +1,55 @@
+$('#cd-simple').countdown('2020/10/10', function(event) {
+  var $this = $(this).html(event.strftime(''
+    +'<div class="countdown">'+
+        '<div class="clock-count-container">'+
+            '<h1 class="clock-val">%d</h1>'+
+        '</div>'+
+        '<h4 class="clock-text"> Days </h4>'+
+    '</div>'+
+    '<div class="countdown">'+
+        '<div class="clock-count-container">'+
+            '<h1 class="clock-val">%H</h1>'+
+        '</div>'+
+        '<h4 class="clock-text"> Hours </h4>'+
+    '</div>'+
+    '<div class="countdown">'+
+        '<div class="clock-count-container">'+
+            '<h1 class="clock-val">%M</h1>'+
+        '</div>'+
+        '<h4 class="clock-text"> Mins </h4>'+
+    '</div>'+
+    '<div class="countdown">'+
+        '<div class="clock-count-container">'+
+            '<h1 class="clock-val">%S</h1>'+
+        '</div>'+
+        '<h4 class="clock-text"> Sec </h4>'+
+    '</div>'));
+});
+
+$('#cd-circle').countdown('2020/10/10', function(event) {
+  var $this = $(this).html(event.strftime(''
+    +'<div class="countdown">'+
+        '<div class="clock-count-container">'+
+            '<h1 class="clock-val">365</h1>'+
+        '</div>'+
+        '<h4 class="clock-text"> Days </h4>'+
+    '</div>'+
+    '<div class="countdown">'+
+        '<div class="clock-count-container">'+
+            '<h1 class="clock-val">%H</h1>'+
+        '</div>'+
+        '<h4 class="clock-text"> Hours </h4>'+
+    '</div>'+
+    '<div class="countdown">'+
+        '<div class="clock-count-container">'+
+            '<h1 class="clock-val">%M</h1>'+
+        '</div>'+
+        '<h4 class="clock-text"> Mins </h4>'+
+    '</div>'+
+    '<div class="countdown">'+
+        '<div class="clock-count-container">'+
+            '<h1 class="clock-val">%S</h1>'+
+        '</div>'+
+        '<h4 class="clock-text"> Sec </h4>'+
+    '</div>'));
+});
\ No newline at end of file
diff --git a/static/js/components/custom-counter.js b/static/js/components/custom-counter.js
new file mode 100644
index 00000000..b63f362a
--- /dev/null
+++ b/static/js/components/custom-counter.js
@@ -0,0 +1,102 @@
+var cSpeed = 6000;
+
+// Simple Counter
+
+var value = $('.s-counter2').text();
+$('.s-counter2').countTo({
+    from: 0,
+    to: value,
+    speed: cSpeed,
+    formatter: function (value, options) {
+        return value.toFixed(options.decimals).replace(/\B(?=(?:\d{3})+(?!\d))/g, ',');
+    }
+});
+var value = $('.s-counter3').text();
+$('.s-counter3').countTo({
+    from: 0,
+    to: value,
+    speed: cSpeed,
+    formatter: function (value, options) {
+        return value.toFixed(options.decimals).replace(/\B(?=(?:\d{3})+(?!\d))/g, ',');
+    }
+});
+var value = $('.s-counter4').text();
+$('.s-counter4').countTo({
+    from: 0,
+    to: value,
+    speed: cSpeed,
+    formatter: function (value, options) {
+        return value.toFixed(options.decimals).replace(/\B(?=(?:\d{3})+(?!\d))/g, ',');
+    }
+});
+
+
+// With Icon
+
+var value = $('.ico-counter1').text();
+$('.ico-counter1').countTo({
+    from: 0,
+    to: value,
+    speed: cSpeed,
+    formatter: function (value, options) {
+        return value.toFixed(options.decimals).replace(/\B(?=(?:\d{3})+(?!\d))/g, ',');
+    }
+});
+var value = $('.ico-counter2').text();
+$('.ico-counter2').countTo({
+    from: 0,
+    to: value,
+    speed: cSpeed,
+    formatter: function (value, options) {
+        return value.toFixed(options.decimals).replace(/\B(?=(?:\d{3})+(?!\d))/g, ',');
+    }
+});
+var value = $('.ico-counter3').text();
+$('.ico-counter3').countTo({
+    from: 0,
+    to: value,
+    speed: cSpeed,
+    formatter: function (value, options) {
+        return value.toFixed(options.decimals).replace(/\B(?=(?:\d{3})+(?!\d))/g, ',');
+    }
+});
+
+
+// Circle
+
+var value = $('.c-counter1').text();
+$('.c-counter1').countTo({
+    from: 0,
+    to: value,
+    speed: cSpeed,
+    formatter: function (value, options) {
+        return value.toFixed(options.decimals).replace(/\B(?=(?:\d{3})+(?!\d))/g, ',');
+    }
+});
+var value = $('.c-counter2').text();
+$('.c-counter2').countTo({
+    from: 0,
+    to: value,
+    speed: cSpeed,
+    formatter: function (value, options) {
+        return value.toFixed(options.decimals).replace(/\B(?=(?:\d{3})+(?!\d))/g, ',');
+    }
+});
+var value = $('.c-counter3').text();
+$('.c-counter3').countTo({
+    from: 0,
+    to: value,
+    speed: cSpeed,
+    formatter: function (value, options) {
+        return value.toFixed(options.decimals).replace(/\B(?=(?:\d{3})+(?!\d))/g, ',');
+    }
+});
+var value = $('.c-counter4').text();
+$('.c-counter4').countTo({
+    from: 0,
+    to: value,
+    speed: cSpeed,
+    formatter: function (value, options) {
+        return value.toFixed(options.decimals).replace(/\B(?=(?:\d{3})+(?!\d))/g, ',');
+    }
+});
\ No newline at end of file
diff --git a/static/js/components/notification/custom-snackbar.js b/static/js/components/notification/custom-snackbar.js
new file mode 100644
index 00000000..9d3177dc
--- /dev/null
+++ b/static/js/components/notification/custom-snackbar.js
@@ -0,0 +1,149 @@
+// Default
+
+$('.default').click(function() {
+   Snackbar.show({text: 'Example notification text.', duration: 100000});
+});
+
+// Position
+
+$('.top-left').click(function() {
+    Snackbar.show({
+        text: 'Example notification text.',
+        pos: 'top-left'
+    });
+});
+
+$('.top-center').click(function() {
+    Snackbar.show({
+        text: 'Example notification text.',
+        pos: 'top-center'
+    });
+});
+
+$('.top-right').click(function() {
+    Snackbar.show({
+        text: 'Example notification text.',
+        pos: 'top-right'
+    });
+});
+
+$('.bottom-left').click(function() {
+    Snackbar.show({
+        text: 'Example notification text.',
+        pos: 'bottom-left'
+    });
+});
+
+$('.bottom-center').click(function() {
+    Snackbar.show({
+        text: 'Example notification text.',
+        pos: 'bottom-center'
+    });
+});
+
+$('.bottom-right').click(function() {
+    Snackbar.show({
+        text: 'Example notification text.',
+        pos: 'bottom-right'
+    });
+});
+
+
+// Action Button
+
+$('.no-action').click(function() {
+    Snackbar.show({
+        showAction: false
+    });
+});
+
+// Action Text
+
+$('.action-text').click(function() {
+    Snackbar.show({
+        actionText: 'Thanks!'
+    });
+});
+
+// Text Color
+
+$('.text-color').click(function() {
+    Snackbar.show({
+        actionTextColor: '#e2a03f',
+    });
+});
+
+// Click Callback
+$('.click-callback').click(function() {
+    Snackbar.show({
+        text: 'Custom callback when action button is clicked.',
+        width: 'auto',
+        onActionClick: function(element) {
+            //Set opacity of element to 0 to close Snackbar 
+            $(element).css('opacity', 0);
+            Snackbar.show({
+                text: 'Thanks for clicking the  <strong>Dismiss</strong>  button!',
+                showActionButton: false
+            });
+        }
+    });
+});
+
+// Duration
+
+$('.duration').click(function() {
+    Snackbar.show({
+        text: 'Duration set to 5s',
+        duration: 5000,
+    });
+});
+
+// Custom Background
+
+$('.snackbar-bg-primary').click(function() {
+    Snackbar.show({
+        text: 'Primary',
+        actionTextColor: '#fff',
+        backgroundColor: '#1b55e2'
+    });
+});
+
+$('.snackbar-bg-info').click(function() {
+    Snackbar.show({
+        text: 'Info',
+        actionTextColor: '#fff',
+        backgroundColor: '#2196f3'
+    });
+});
+
+$('.snackbar-bg-success').click(function() {
+    Snackbar.show({
+        text: 'Success',
+        actionTextColor: '#fff',
+        backgroundColor: '#8dbf42'
+    });
+});
+
+$('.snackbar-bg-warning').click(function() {
+    Snackbar.show({
+        text: 'Warning',
+        actionTextColor: '#fff',
+        backgroundColor: '#e2a03f'
+    });
+});
+
+$('.snackbar-bg-danger').click(function() {
+    Snackbar.show({
+        text: 'Danger',
+        actionTextColor: '#fff',
+        backgroundColor: '#e7515a'
+    });
+});
+
+$('.snackbar-bg-dark').click(function() {
+    Snackbar.show({
+        text: 'Dark',
+        actionTextColor: '#fff',
+        backgroundColor: '#3b3f5c'
+    });
+});
\ No newline at end of file
diff --git a/static/js/components/session-timeout/bootstrap-session-timeout.js b/static/js/components/session-timeout/bootstrap-session-timeout.js
new file mode 100644
index 00000000..847d25ac
--- /dev/null
+++ b/static/js/components/session-timeout/bootstrap-session-timeout.js
@@ -0,0 +1,87 @@
+! function(a) {
+    "use strict";
+    a.sessionTimeout = function(b) {
+        function c() {
+            n || (a.ajax({
+                type: i.ajaxType,
+                url: i.keepAliveUrl,
+                data: i.ajaxData
+            }), n = !0, setTimeout(function() {
+                n = !1
+            }, i.keepAliveInterval))
+        }
+
+        function d() {
+            clearTimeout(g), (i.countdownMessage || i.countdownBar) && f("session", !0), "function" == typeof i.onStart && i.onStart(i), i.keepAlive && c(), g = setTimeout(function() {
+                "function" != typeof i.onWarn ? a("#session-timeout-dialog").modal("show") : i.onWarn(i), e()
+            }, i.warnAfter)
+        }
+
+        function e() {
+            clearTimeout(g), a("#session-timeout-dialog").hasClass("in") || !i.countdownMessage && !i.countdownBar || f("dialog", !0), g = setTimeout(function() {
+                "function" != typeof i.onRedir ? window.location = i.redirUrl : i.onRedir(i)
+            }, i.redirAfter - i.warnAfter)
+        }
+
+        function f(b, c) {
+            clearTimeout(j.timer), "dialog" === b && c ? j.timeLeft = Math.floor((i.redirAfter - i.warnAfter) / 1e3) : "session" === b && c && (j.timeLeft = Math.floor(i.redirAfter / 1e3)), i.countdownBar && "dialog" === b ? j.percentLeft = Math.floor(j.timeLeft / ((i.redirAfter - i.warnAfter) / 1e3) * 100) : i.countdownBar && "session" === b && (j.percentLeft = Math.floor(j.timeLeft / (i.redirAfter / 1e3) * 100));
+            var d = a(".countdown-holder"),
+                e = j.timeLeft >= 0 ? j.timeLeft : 0;
+            if (i.countdownSmart) {
+                var g = Math.floor(e / 60),
+                    h = e % 60,
+                    k = g > 0 ? g + "m" : "";
+                k.length > 0 && (k += " "), k += h + "s", d.text(k)
+            } else d.text(e + "s");
+            i.countdownBar && a(".countdown-bar").css("width", j.percentLeft + "%"), j.timeLeft = j.timeLeft - 1, j.timer = setTimeout(function() {
+                f(b)
+            }, 1e3)
+        }
+        var g, h = {
+                title: "Your Session is About to Expire!",
+                message: "Your session is about to expire.",
+                logoutButton: "Logout",
+                keepAliveButton: "Stay",
+                keepAliveUrl: "/keep-alive",
+                ajaxType: "POST",
+                ajaxData: "",
+                redirUrl: "/timed-out",
+                logoutUrl: "/log-out",
+                warnAfter: 9e5,
+                redirAfter: 12e5,
+                keepAliveInterval: 5e3,
+                keepAlive: !0,
+                ignoreUserActivity: !1,
+                onStart: !1,
+                onWarn: !1,
+                onRedir: !1,
+                countdownMessage: !1,
+                countdownBar: !1,
+                countdownSmart: !1
+            },
+            i = h,
+            j = {};
+        if (b && (i = a.extend(h, b)), i.warnAfter >= i.redirAfter) return console.error('Bootstrap-session-timeout plugin is miss-configured. Option "redirAfter" must be equal or greater than "warnAfter".'), !1;
+        if ("function" != typeof i.onWarn) {
+            var k = i.countdownMessage ? "<p>" + i.countdownMessage.replace(/{timer}/g, '<span class="countdown-holder"></span>') + "</p>" : "",
+                l = i.countdownBar ? '<div class="progress mb-3 mt-4">                   <div class="progress-bar bg-secondary countdown-bar active  progress-bar-striped progress-bar-animated" role="progressbar" style="min-width: 15px; width: 100%;">                                        </div>                 </div>' : "";
+            a("body").append('<div class="modal fade" id="session-timeout-dialog">               <div class="modal-dialog  modal-dialog-centered">                 <div class="modal-content">                                   <div class="modal-body">                     <p>' + i.message + "</p>                     " + k + "                     " + l + '                   </div>                   <div class="modal-footer justify-content-center">                     <button id="session-timeout-dialog-logout" type="button" class="btn btn-dark mb-0 mt-0">' + i.logoutButton + '</button>                     <button id="session-timeout-dialog-keepalive" type="button" class="btn btn-primary mb-0 mt-0" data-dismiss="modal">' + i.keepAliveButton + "</button>                   </div>                 </div>               </div>              </div>"), a("#session-timeout-dialog-logout").on("click", function() {
+                window.location = i.logoutUrl
+            }), a("#session-timeout-dialog").on("hide.bs.modal", function() {
+                d()
+            })
+        }
+        if (!i.ignoreUserActivity) {
+            var m = [-1, -1];
+            a(document).on("keyup mouseup mousemove touchend touchmove", function(b) {
+                if ("mousemove" === b.type) {
+                    if (b.clientX === m[0] && b.clientY === m[1]) return;
+                    m[0] = b.clientX, m[1] = b.clientY
+                }
+                d(), a("#session-timeout-dialog").length > 0 && a("#session-timeout-dialog").data("bs.modal") && a("#session-timeout-dialog").data("bs.modal").isShown && (a("#session-timeout-dialog").modal("hide"), a("body").removeClass("modal-open"), a("div.modal-backdrop").remove())
+            })
+        }
+        var n = !1;
+        d()
+    }
+}(jQuery);
diff --git a/static/js/components/session-timeout/custom-bootstrap_session_timeout.js b/static/js/components/session-timeout/custom-bootstrap_session_timeout.js
new file mode 100644
index 00000000..1f0206f0
--- /dev/null
+++ b/static/js/components/session-timeout/custom-bootstrap_session_timeout.js
@@ -0,0 +1,28 @@
+var SessionTimeout=function() {
+    var e=function() {
+        $.sessionTimeout( {
+            title:"Session Timeout Notification", 
+            message:"Your session is about to expire.", 
+            keepAliveUrl:"", 
+            redirUrl:"auth_lockscreen.html", 
+            logoutUrl:"auth_login.html", 
+            warnAfter:6e3, 
+            redirAfter:21e3, 
+            ignoreUserActivity:!0, 
+            countdownMessage:"Redirecting in {timer}.", 
+            countdownBar: !0
+        }
+        )
+    };
+    return {
+        init:function() {
+            e()
+        }
+    }
+}
+
+();
+jQuery(document).ready(function() {
+    SessionTimeout.init()
+}
+);
\ No newline at end of file
diff --git a/static/js/components/ui-accordions.js b/static/js/components/ui-accordions.js
new file mode 100644
index 00000000..28744661
--- /dev/null
+++ b/static/js/components/ui-accordions.js
@@ -0,0 +1,17 @@
+$('#toggleAccordion .collapse').on('shown.bs.collapse', function(){
+    $(this).parent().find(".icons").html('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-up"><polyline points="18 15 12 9 6 15"></polyline></svg>');
+}).on('hidden.bs.collapse', function(){
+    $(this).parent().find(".icons").html('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>');
+});
+
+$('#withoutSpacing .collapse').on('shown.bs.collapse', function(){
+    $(this).parent().find(".icons").html('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-up"><polyline points="18 15 12 9 6 15"></polyline></svg>');
+}).on('hidden.bs.collapse', function(){
+    $(this).parent().find(".icons").html('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>');
+});
+
+$('#iconsAccordion .collapse').on('shown.bs.collapse', function(){
+    $(this).parent().find(".icons").html('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-up"><polyline points="18 15 12 9 6 15"></polyline></svg>');
+}).on('hidden.bs.collapse', function(){
+    $(this).parent().find(".icons").html('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>');
+});
\ No newline at end of file
diff --git a/static/js/custom.js b/static/js/custom.js
new file mode 100644
index 00000000..f9540342
--- /dev/null
+++ b/static/js/custom.js
@@ -0,0 +1,134 @@
+/*
+=========================================
+|                                       |
+|           Scroll To Top               |
+|                                       |
+=========================================
+*/ 
+$('.scrollTop').click(function() {
+    $("html, body").animate({scrollTop: 0});
+});
+
+
+$('.navbar .dropdown.notification-dropdown > .dropdown-menu, .navbar .dropdown.message-dropdown > .dropdown-menu ').click(function(e) {
+    e.stopPropagation();
+});
+
+/*
+=========================================
+|                                       |
+|       Multi-Check checkbox            |
+|                                       |
+=========================================
+*/
+
+function checkall(clickchk, relChkbox) {
+
+    var checker = $('#' + clickchk);
+    var multichk = $('.' + relChkbox);
+
+
+    checker.click(function () {
+        multichk.prop('checked', $(this).prop('checked'));
+    });    
+}
+
+
+/*
+=========================================
+|                                       |
+|           MultiCheck                  |
+|                                       |
+=========================================
+*/
+
+/*
+    This MultiCheck Function is recommanded for datatable
+*/
+
+function multiCheck(tb_var) {
+    tb_var.on("change", ".chk-parent", function() {
+        var e=$(this).closest("table").find("td:first-child .child-chk"), a=$(this).is(":checked");
+        $(e).each(function() {
+            a?($(this).prop("checked", !0), $(this).closest("tr").addClass("active")): ($(this).prop("checked", !1), $(this).closest("tr").removeClass("active"))
+        })
+    }),
+    tb_var.on("change", "tbody tr .new-control", function() {
+        $(this).parents("tr").toggleClass("active")
+    })
+}
+
+/*
+=========================================
+|                                       |
+|           MultiCheck                  |
+|                                       |
+=========================================
+*/
+
+function checkall(clickchk, relChkbox) {
+
+    var checker = $('#' + clickchk);
+    var multichk = $('.' + relChkbox);
+
+
+    checker.click(function () {
+        multichk.prop('checked', $(this).prop('checked'));
+    });    
+}
+
+/*
+=========================================
+|                                       |
+|               Tooltips                |
+|                                       |
+=========================================
+*/
+
+$('.bs-tooltip').tooltip();
+
+/*
+=========================================
+|                                       |
+|               Popovers                |
+|                                       |
+=========================================
+*/
+
+$('.bs-popover').popover();
+
+
+/*
+================================================
+|                                              |
+|               Rounded Tooltip                |
+|                                              |
+================================================
+*/
+
+$('.t-dot').tooltip({
+    template: '<div class="tooltip status rounded-tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'
+})
+
+
+/*
+================================================
+|            IE VERSION Dector                 |
+================================================
+*/
+
+function GetIEVersion() {
+  var sAgent = window.navigator.userAgent;
+  var Idx = sAgent.indexOf("MSIE");
+
+  // If IE, return version number.
+  if (Idx > 0) 
+    return parseInt(sAgent.substring(Idx+ 5, sAgent.indexOf(".", Idx)));
+
+  // If IE 11 then look for Updated user agent string.
+  else if (!!navigator.userAgent.match(/Trident\/7\./)) 
+    return 11;
+
+  else
+    return 0; //It is not IE
+}
\ No newline at end of file
diff --git a/static/js/dashboard/dash_1.js b/static/js/dashboard/dash_1.js
new file mode 100644
index 00000000..679db8ea
--- /dev/null
+++ b/static/js/dashboard/dash_1.js
@@ -0,0 +1,532 @@
+try {
+
+/*
+    ==============================
+    |    @Options Charts Script   |
+    ==============================
+*/
+
+/*
+    =============================
+        Daily Sales | Options
+    =============================
+*/
+var d_2options1 = {
+  chart: {
+        height: 160,
+        type: 'bar',
+        stacked: true,
+        stackType: '100%',
+        toolbar: {
+          show: false,
+        }
+    },
+    dataLabels: {
+        enabled: false,
+    },
+    stroke: {
+        show: true,
+        width: 1,
+    },
+    colors: ['#e2a03f', '#e0e6ed'],
+    responsive: [{
+        breakpoint: 480,
+        options: {
+            legend: {
+                position: 'bottom',
+                offsetX: -10,
+                offsetY: 0
+            }
+        }
+    }],
+    series: [{
+        name: 'Sales',
+        data: [44, 55, 41, 67, 22, 43, 21]
+    },{
+        name: 'Last Week',
+        data: [13, 23, 20, 8, 13, 27, 33]
+    }],
+    xaxis: {
+        labels: {
+            show: false,
+        },
+        categories: ['Sun', 'Mon', 'Tue', 'Wed', 'Thur', 'Fri', 'Sat'],
+    },
+    yaxis: {
+        show: false
+    },
+    fill: {
+        opacity: 1
+    },
+    plotOptions: {
+        bar: {
+            horizontal: false,
+            endingShape: 'rounded',
+            columnWidth: '25%',
+        }
+    },
+    legend: {
+        show: false,
+    },
+    grid: {
+        show: false,
+        xaxis: {
+            lines: {
+                show: false
+            }
+        },
+        padding: {
+          top: 10,
+          right: 0,
+          bottom: -40,
+          left: 0
+        }, 
+    },
+}
+
+/*
+    =============================
+        Total Orders | Options
+    =============================
+*/
+var d_2options2 = {
+  chart: {
+    id: 'sparkline1',
+    group: 'sparklines',
+    type: 'area',
+    height: 280,
+    sparkline: {
+      enabled: true
+    },
+  },
+  stroke: {
+      curve: 'smooth',
+      width: 2
+  },
+  fill: {
+    opacity: 1,
+  },
+  series: [{
+    name: 'Sales',
+    data: [28, 40, 36, 52, 38, 60, 38, 52, 36, 40]
+  }],
+  labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
+  yaxis: {
+    min: 0
+  },
+  grid: {
+    padding: {
+      top: 125,
+      right: 0,
+      bottom: 36,
+      left: 0
+    }, 
+  },
+  fill: {
+      type:"gradient",
+      gradient: {
+          type: "vertical",
+          shadeIntensity: 1,
+          inverseColors: !1,
+          opacityFrom: .40,
+          opacityTo: .05,
+          stops: [45, 100]
+      }
+  },
+  tooltip: {
+    x: {
+      show: false,
+    },
+    theme: 'dark'
+  },
+  colors: ['#fff']
+}
+
+/*
+    =================================
+        Revenue Monthly | Options
+    =================================
+*/
+var options1 = {
+  chart: {
+    fontFamily: 'Nunito, sans-serif',
+    height: 365,
+    type: 'area',
+    zoom: {
+        enabled: false
+    },
+    dropShadow: {
+      enabled: true,
+      opacity: 0.3,
+      blur: 5,
+      left: -7,
+      top: 22
+    },
+    toolbar: {
+      show: false
+    },
+    events: {
+      mounted: function(ctx, config) {
+        const highest1 = ctx.getHighestValueInSeries(0);
+        const highest2 = ctx.getHighestValueInSeries(1);
+
+        ctx.addPointAnnotation({
+          x: new Date(ctx.w.globals.seriesX[0][ctx.w.globals.series[0].indexOf(highest1)]).getTime(),
+          y: highest1,
+          label: {
+            style: {
+              cssClass: 'd-none'
+            }
+          },
+          customSVG: {
+              SVG: '<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="#1b55e2" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-circle"><circle cx="12" cy="12" r="10"></circle></svg>',
+              cssClass: undefined,
+              offsetX: -8,
+              offsetY: 5
+          }
+        })
+
+        ctx.addPointAnnotation({
+          x: new Date(ctx.w.globals.seriesX[1][ctx.w.globals.series[1].indexOf(highest2)]).getTime(),
+          y: highest2,
+          label: {
+            style: {
+              cssClass: 'd-none'
+            }
+          },
+          customSVG: {
+              SVG: '<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="#e7515a" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-circle"><circle cx="12" cy="12" r="10"></circle></svg>',
+              cssClass: undefined,
+              offsetX: -8,
+              offsetY: 5
+          }
+        })
+      },
+    }
+  },
+  colors: ['#1b55e2', '#e7515a'],
+  dataLabels: {
+      enabled: false
+  },
+  markers: {
+    discrete: [{
+    seriesIndex: 0,
+    dataPointIndex: 7,
+    fillColor: '#000',
+    strokeColor: '#000',
+    size: 5
+  }, {
+    seriesIndex: 2,
+    dataPointIndex: 11,
+    fillColor: '#000',
+    strokeColor: '#000',
+    size: 4
+  }]
+  },
+  subtitle: {
+    text: 'Total Profit',
+    align: 'left',
+    margin: 0,
+    offsetX: -10,
+    offsetY: 35,
+    floating: false,
+    style: {
+      fontSize: '14px',
+      color:  '#888ea8'
+    }
+  },
+  title: {
+    text: '$10,840',
+    align: 'left',
+    margin: 0,
+    offsetX: -10,
+    offsetY: 0,
+    floating: false,
+    style: {
+      fontSize: '25px',
+      color:  '#0e1726'
+    },
+  },
+  stroke: {
+      show: true,
+      curve: 'smooth',
+      width: 2,
+      lineCap: 'square'
+  },
+  series: [{
+      name: 'Income',
+      data: [16800, 16800, 15500, 17800, 15500, 17000, 19000, 16000, 15000, 17000, 14000, 17000]
+  }, {
+      name: 'Expenses',
+      data: [16500, 17500, 16200, 17300, 16000, 19500, 16000, 17000, 16000, 19000, 18000, 19000]
+  }],
+  labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+  xaxis: {
+    axisBorder: {
+      show: false
+    },
+    axisTicks: {
+      show: false
+    },
+    crosshairs: {
+      show: true
+    },
+    labels: {
+      offsetX: 0,
+      offsetY: 5,
+      style: {
+          fontSize: '12px',
+          fontFamily: 'Nunito, sans-serif',
+          cssClass: 'apexcharts-xaxis-title',
+      },
+    }
+  },
+  yaxis: {
+    labels: {
+      formatter: function(value, index) {
+        return (value / 1000) + 'K'
+      },
+      offsetX: -22,
+      offsetY: 0,
+      style: {
+          fontSize: '12px',
+          fontFamily: 'Nunito, sans-serif',
+          cssClass: 'apexcharts-yaxis-title',
+      },
+    }
+  },
+  grid: {
+    borderColor: '#e0e6ed',
+    strokeDashArray: 5,
+    xaxis: {
+        lines: {
+            show: true
+        }
+    },   
+    yaxis: {
+        lines: {
+            show: false,
+        }
+    },
+    padding: {
+      top: 0,
+      right: 0,
+      bottom: 0,
+      left: -10
+    }, 
+  }, 
+  legend: {
+    position: 'top',
+    horizontalAlign: 'right',
+    offsetY: -50,
+    fontSize: '16px',
+    fontFamily: 'Nunito, sans-serif',
+    markers: {
+      width: 10,
+      height: 10,
+      strokeWidth: 0,
+      strokeColor: '#fff',
+      fillColors: undefined,
+      radius: 12,
+      onClick: undefined,
+      offsetX: 0,
+      offsetY: 0
+    },    
+    itemMargin: {
+      horizontal: 0,
+      vertical: 20
+    }
+  },
+  tooltip: {
+    theme: 'dark',
+    marker: {
+      show: true,
+    },
+    x: {
+      show: false,
+    }
+  },
+  fill: {
+      type:"gradient",
+      gradient: {
+          type: "vertical",
+          shadeIntensity: 1,
+          inverseColors: !1,
+          opacityFrom: .28,
+          opacityTo: .05,
+          stops: [45, 100]
+      }
+  },
+  responsive: [{
+    breakpoint: 575,
+    options: {
+      legend: {
+          offsetY: -30,
+      },
+    },
+  }]
+}
+
+/*
+    ==================================
+        Sales By Category | Options
+    ==================================
+*/
+var options = {
+    chart: {
+        type: 'donut',
+        width: 380
+    },
+    colors: ['#5c1ac3', '#e2a03f', '#e7515a', '#e2a03f'],
+    dataLabels: {
+      enabled: false
+    },
+    legend: {
+        position: 'bottom',
+        horizontalAlign: 'center',
+        fontSize: '14px',
+        markers: {
+          width: 10,
+          height: 10,
+        },
+        itemMargin: {
+          horizontal: 0,
+          vertical: 8
+        }
+    },
+    plotOptions: {
+      pie: {
+        donut: {
+          size: '65%',
+          background: 'transparent',
+          labels: {
+            show: true,
+            name: {
+              show: true,
+              fontSize: '29px',
+              fontFamily: 'Nunito, sans-serif',
+              color: undefined,
+              offsetY: -10
+            },
+            value: {
+              show: true,
+              fontSize: '26px',
+              fontFamily: 'Nunito, sans-serif',
+              color: '20',
+              offsetY: 16,
+              formatter: function (val) {
+                return val
+              }
+            },
+            total: {
+              show: true,
+              showAlways: true,
+              label: 'Total',
+              color: '#888ea8',
+              formatter: function (w) {
+                return w.globals.seriesTotals.reduce( function(a, b) {
+                  return a + b
+                }, 0)
+              }
+            }
+          }
+        }
+      }
+    },
+    stroke: {
+      show: true,
+      width: 25,
+    },
+    series: [985, 737, 270],
+    labels: ['Apparel', 'Electronic', 'Others'],
+    responsive: [{
+        breakpoint: 1599,
+        options: {
+            chart: {
+                width: '350px',
+                height: '400px'
+            },
+            legend: {
+                position: 'bottom'
+            }
+        },
+
+        breakpoint: 1439,
+        options: {
+            chart: {
+                width: '250px',
+                height: '390px'
+            },
+            legend: {
+                position: 'bottom'
+            },
+            plotOptions: {
+              pie: {
+                donut: {
+                  size: '65%',
+                }
+              }
+            }
+        },
+    }]
+}
+
+
+/*
+    ==============================
+    |    @Render Charts Script    |
+    ==============================
+*/
+
+
+/*
+    ============================
+        Daily Sales | Render
+    ============================
+*/
+var d_2C_1 = new ApexCharts(document.querySelector("#daily-sales"), d_2options1);
+d_2C_1.render();
+
+/*
+    ============================
+        Total Orders | Render
+    ============================
+*/
+var d_2C_2 = new ApexCharts(document.querySelector("#total-orders"), d_2options2);
+d_2C_2.render();
+
+/*
+    ================================
+        Revenue Monthly | Render
+    ================================
+*/
+var chart1 = new ApexCharts(
+    document.querySelector("#revenueMonthly"),
+    options1
+);
+
+chart1.render();
+
+/*
+    =================================
+        Sales By Category | Render
+    =================================
+*/
+var chart = new ApexCharts(
+    document.querySelector("#chart-2"),
+    options
+);
+
+chart.render();
+
+/*
+    =============================================
+        Perfect Scrollbar | Recent Activities
+    =============================================
+*/
+const ps = new PerfectScrollbar(document.querySelector('.mt-container'));
+
+
+} catch(e) {
+    console.log(e);
+}
\ No newline at end of file
diff --git a/static/js/dashboard/dash_2.js b/static/js/dashboard/dash_2.js
new file mode 100644
index 00000000..6ae00dc1
--- /dev/null
+++ b/static/js/dashboard/dash_2.js
@@ -0,0 +1,503 @@
+try {
+
+
+    /*
+        ==============================
+        |    @Options Charts Script   |
+        ==============================
+    */
+
+    /*
+        ======================================
+            Visitor Statistics | Options
+        ======================================
+    */
+
+    
+    // Total Visits
+
+    var spark1 = {
+        chart: {
+            id: 'unique-visits',
+            group: 'sparks2',
+            type: 'line',
+            height: 80,
+            sparkline: {
+                enabled: true
+            },
+            dropShadow: {
+                enabled: true,
+                top: 1,
+                left: 1,
+                blur: 2,
+                color: '#e2a03f',
+                opacity: 0.7,
+            }
+        },
+        series: [{
+            data: [21, 9, 36, 12, 44, 25, 59, 41, 66, 25]
+        }],
+        stroke: {
+          curve: 'smooth',
+          width: 2,
+        },
+        markers: {
+            size: 0
+        },
+        grid: {
+          padding: {
+            top: 35,
+            bottom: 0,
+            left: 40
+          }
+        },
+        colors: ['#e2a03f'],
+        tooltip: {
+            x: {
+                show: false
+            },
+            y: {
+                title: {
+                    formatter: function formatter(val) {
+                        return '';
+                    }
+                }
+            }
+        },
+        responsive: [{
+            breakpoint: 1351,
+            options: {
+               chart: {
+                  height: 95,
+              },
+              grid: {
+                  padding: {
+                    top: 35,
+                    bottom: 0,
+                    left: 0
+                  }
+              },
+            },
+        },
+        {
+            breakpoint: 1200,
+            options: {
+               chart: {
+                  height: 80,
+              },
+              grid: {
+                  padding: {
+                    top: 35,
+                    bottom: 0,
+                    left: 40
+                  }
+              },
+            },
+        },
+        {
+            breakpoint: 576,
+            options: {
+               chart: {
+                  height: 95,
+              },
+              grid: {
+                  padding: {
+                    top: 45,
+                    bottom: 0,
+                    left: 0
+                  }
+              },
+            },
+        }
+
+        ]
+    }
+
+    // Paid Visits
+
+    var spark2 = {
+        chart: {
+          id: 'total-users',
+          group: 'sparks1',
+          type: 'line',
+          height: 80,
+          sparkline: {
+            enabled: true
+          },
+          dropShadow: {
+            enabled: true,
+            top: 3,
+            left: 1,
+            blur: 3,
+            color: '#009688',
+            opacity: 0.7,
+          }
+        },
+        series: [{
+          data: [22, 19, 30, 47, 32, 44, 34, 55, 41, 69]
+        }],
+        stroke: {
+          curve: 'smooth',
+          width: 2,
+        },
+        markers: {
+          size: 0
+        },
+        grid: {
+          padding: {
+            top: 35,
+            bottom: 0,
+            left: 40
+          }
+        },
+        colors: ['#009688'],
+        tooltip: {
+          x: {
+            show: false
+          },
+          y: {
+            title: {
+              formatter: function formatter(val) {
+                return '';
+              }
+            }
+          }
+        },
+        responsive: [{
+            breakpoint: 1351,
+            options: {
+               chart: {
+                  height: 95,
+              },
+              grid: {
+                  padding: {
+                    top: 35,
+                    bottom: 0,
+                    left: 0
+                  }
+              },
+            },
+        },
+        {
+            breakpoint: 1200,
+            options: {
+               chart: {
+                  height: 80,
+              },
+              grid: {
+                  padding: {
+                    top: 35,
+                    bottom: 0,
+                    left: 40
+                  }
+              },
+            },
+        },
+        {
+            breakpoint: 576,
+            options: {
+               chart: {
+                  height: 95,
+              },
+              grid: {
+                  padding: {
+                    top: 35,
+                    bottom: 0,
+                    left: 0
+                  }
+              },
+            },
+        }
+        ]
+    }
+    
+
+    /*
+        ===================================
+            Unique Visitors | Options
+        ===================================
+    */
+
+    var d_1options1 = {
+      chart: {
+          height: 350,
+          type: 'bar',
+          toolbar: {
+            show: false,
+          },
+          dropShadow: {
+              enabled: true,
+              top: 1,
+              left: 1,
+              blur: 2,
+              color: '#acb0c3',
+              opacity: 0.7,
+          }
+      },
+      colors: ['#5c1ac3', '#ffbb44'],
+      plotOptions: {
+          bar: {
+              horizontal: false,
+              columnWidth: '55%',
+              endingShape: 'rounded'  
+          },
+      },
+      dataLabels: {
+          enabled: false
+      },
+      legend: {
+            position: 'bottom',
+            horizontalAlign: 'center',
+            fontSize: '14px',
+            markers: {
+              width: 10,
+              height: 10,
+            },
+            itemMargin: {
+              horizontal: 0,
+              vertical: 8
+            }
+      },
+      stroke: {
+          show: true,
+          width: 2,
+          colors: ['transparent']
+      },
+      series: [{
+          name: 'Direct',
+          data: [58, 44, 55, 57, 56, 61, 58, 63, 60, 66, 56, 63]
+      }, {
+          name: 'Organic',
+          data: [91, 76, 85, 101, 98, 87, 105, 91, 114, 94, 66, 70]
+      }],
+      xaxis: {
+          categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+      },
+      fill: {
+        type: 'gradient',
+        gradient: {
+          shade: 'light',
+          type: 'vertical',
+          shadeIntensity: 0.3,
+          inverseColors: false,
+          opacityFrom: 1,
+          opacityTo: 0.8,
+          stops: [0, 100]
+        }
+      },
+      tooltip: {
+          y: {
+              formatter: function (val) {
+                  return val
+              }
+          }
+      }
+    }
+
+    /*
+        ==============================
+            Statistics | Options
+        ==============================
+    */
+
+    // Followers
+
+    var d_1options3 = {
+      chart: {
+        id: 'sparkline1',
+        type: 'area',
+        height: 160,
+        sparkline: {
+          enabled: true
+        },
+      },
+      stroke: {
+          curve: 'smooth',
+          width: 2,
+      },
+      series: [{
+        name: 'Sales',
+        data: [38, 60, 38, 52, 36, 40, 28 ]
+      }],
+      labels: ['1', '2', '3', '4', '5', '6', '7'],
+      yaxis: {
+        min: 0
+      },
+      colors: ['#1b55e2'],
+      tooltip: {
+        x: {
+          show: false,
+        }
+      },
+      fill: {
+          type:"gradient",
+          gradient: {
+              type: "vertical",
+              shadeIntensity: 1,
+              inverseColors: !1,
+              opacityFrom: .40,
+              opacityTo: .05,
+              stops: [45, 100]
+          }
+      },
+    }
+
+    // Referral
+
+    var d_1options4 = {
+      chart: {
+        id: 'sparkline1',
+        type: 'area',
+        height: 160,
+        sparkline: {
+          enabled: true
+        },
+      },
+      stroke: {
+          curve: 'smooth',
+          width: 2,
+      },
+      series: [{
+        name: 'Sales',
+        data: [ 60, 28, 52, 38, 40, 36, 38]
+      }],
+      labels: ['1', '2', '3', '4', '5', '6', '7'],
+      yaxis: {
+        min: 0
+      },
+      colors: ['#e7515a'],
+      tooltip: {
+        x: {
+          show: false,
+        }
+      },
+      fill: {
+          type:"gradient",
+          gradient: {
+              type: "vertical",
+              shadeIntensity: 1,
+              inverseColors: !1,
+              opacityFrom: .40,
+              opacityTo: .05,
+              stops: [45, 100]
+          }
+      },
+    }
+
+    // Engagement Rate
+
+    var d_1options5 = {
+      chart: {
+        id: 'sparkline1',
+        type: 'area',
+        height: 160,
+        sparkline: {
+          enabled: true
+        },
+      },
+      stroke: {
+          curve: 'smooth',
+          width: 2,
+      },
+      fill: {
+        opacity: 1,
+      },
+      series: [{
+        name: 'Sales',
+        data: [28, 50, 36, 60, 38, 52, 38 ]
+      }],
+      labels: ['1', '2', '3', '4', '5', '6', '7'],
+      yaxis: {
+        min: 0
+      },
+      colors: ['#8dbf42'],
+      tooltip: {
+        x: {
+          show: false,
+        }
+      },
+      fill: {
+          type:"gradient",
+          gradient: {
+              type: "vertical",
+              shadeIntensity: 1,
+              inverseColors: !1,
+              opacityFrom: .40,
+              opacityTo: .05,
+              stops: [45, 100]
+          }
+      },
+    }
+
+    
+
+
+    /*
+        ==============================
+        |    @Render Charts Script    |
+        ==============================
+    */
+
+
+    /*
+        ======================================
+            Visitor Statistics | Script
+        ======================================
+    */
+
+    // Total Visits
+    d_1C_1 = new ApexCharts(document.querySelector("#total-users"), spark1);
+    d_1C_1.render();
+
+    // Paid Visits
+    d_1C_2 = new ApexCharts(document.querySelector("#paid-visits"), spark2);
+    d_1C_2.render();
+
+    /*
+        ===================================
+            Unique Visitors | Script
+        ===================================
+    */
+
+    var d_1C_3 = new ApexCharts(
+        document.querySelector("#uniqueVisits"),
+        d_1options1
+    );
+    d_1C_3.render();
+
+    /*
+        ==============================
+            Statistics | Script
+        ==============================
+    */
+
+
+    // Followers
+
+    var d_1C_5 = new ApexCharts(document.querySelector("#hybrid_followers"), d_1options3);
+    d_1C_5.render()
+
+    // Referral
+
+    var d_1C_6 = new ApexCharts(document.querySelector("#hybrid_followers1"), d_1options4);
+    d_1C_6.render()
+
+    // Engagement Rate
+
+    var d_1C_7 = new ApexCharts(document.querySelector("#hybrid_followers3"), d_1options5);
+    d_1C_7.render()
+
+
+
+  /*
+      =============================================
+          Perfect Scrollbar | Notifications
+      =============================================
+  */
+  const ps = new PerfectScrollbar(document.querySelector('.mt-container'));
+
+
+} catch(e) {
+  // statements
+  console.log(e);
+}
diff --git a/static/js/elements/custom-search.js b/static/js/elements/custom-search.js
new file mode 100644
index 00000000..252eb729
--- /dev/null
+++ b/static/js/elements/custom-search.js
@@ -0,0 +1,20 @@
+// Search 1
+
+$('#input-search').on('keyup', function() {
+  var rex = new RegExp($(this).val(), 'i');
+    $('.searchable-container .items').hide();
+    $('.searchable-container .items').filter(function() {
+        return rex.test($(this).text());
+    }).show();
+});
+
+
+// Search 2
+document.getElementsByClassName('full-search')[0].addEventListener('click', function() {
+    this.classList.add("input-focused");
+    document.getElementsByClassName('demo-search-overlay')[0].classList.add("show");
+})
+document.getElementsByClassName('demo-search-overlay')[0].addEventListener('click', function() {
+    this.classList.remove("show");
+    document.getElementsByClassName('full-search')[0].classList.remove("input-focused");
+})
\ No newline at end of file
diff --git a/static/js/elements/popovers.js b/static/js/elements/popovers.js
new file mode 100644
index 00000000..12f9294d
--- /dev/null
+++ b/static/js/elements/popovers.js
@@ -0,0 +1,45 @@
+/*
+    Popovers
+*/
+
+$('.btn-popover-primary').popover({
+    template: '<div class="popover popover-primary" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>',
+    title: "Primary",
+    content: "Primary popover"
+});
+
+$('.btn-popover-success').popover({
+    template: '<div class="popover popover-success" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>',
+    title: "Success",
+    content: "Success popover"
+});
+
+$('.btn-popover-info').popover({
+    template: '<div class="popover popover-info" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>',
+    title: "Info",
+    content: "Info popover"
+});
+
+$('.btn-popover-danger').popover({
+    template: '<div class="popover popover-danger" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>',
+    title: "Danger",
+    content: "Danger popover"
+});
+
+$('.btn-popover-warning').popover({
+    template: '<div class="popover popover-warning" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>',
+    title: "Warning",
+    content: "Warning popover"
+});
+
+$('.btn-popover-secondary').popover({
+    template: '<div class="popover popover-secondary" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>',
+    title: "Secondary",
+    content: "Secondary popover"
+});
+
+$('.btn-popover-dark').popover({
+    template: '<div class="popover popover-dark" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>',
+    title: "Dark",
+    content: "Dark popover"
+});
diff --git a/static/js/elements/tooltip.js b/static/js/elements/tooltip.js
new file mode 100644
index 00000000..7f15f2c2
--- /dev/null
+++ b/static/js/elements/tooltip.js
@@ -0,0 +1,38 @@
+/*
+    Tooltip
+*/
+
+$('.primary').tooltip({
+    template: '<div class="tooltip tooltip-primary" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>',
+    title: "Primary"
+});
+
+$('.success').tooltip({
+    template: '<div class="tooltip tooltip-success" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>',
+    title: "Success"
+});
+
+$('.info').tooltip({
+    template: '<div class="tooltip tooltip-info" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>',
+    title: "Info"
+});
+
+$('.danger').tooltip({
+    template: '<div class="tooltip tooltip-danger" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>',
+    title: "Danger"
+});
+
+$('.warning').tooltip({
+    template: '<div class="tooltip tooltip-warning" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>',
+    title: "Warning"
+});
+
+$('.secondary').tooltip({
+    template: '<div class="tooltip tooltip-secondary" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>',
+    title: "Secondary"
+});
+
+$('.dark').tooltip({
+    template: '<div class="tooltip tooltip-dark" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>',
+    title: "Dark"
+});
\ No newline at end of file
diff --git a/static/js/forms/bootstrap_validation/bs_validation_script.js b/static/js/forms/bootstrap_validation/bs_validation_script.js
new file mode 100644
index 00000000..01157b8a
--- /dev/null
+++ b/static/js/forms/bootstrap_validation/bs_validation_script.js
@@ -0,0 +1,80 @@
+// Example starter JavaScript for disabling form submissions if there are invalid fields
+(function() {
+  'use strict';
+  window.addEventListener('load', function() {
+    // Fetch all the forms we want to apply custom Bootstrap validation styles to
+    var forms = document.getElementsByClassName('needs-validation');
+    // Loop over them and prevent submission
+    var validation = Array.prototype.filter.call(forms, function(form) {
+      form.addEventListener('submit', function(event) {
+        if (form.checkValidity() === false) {
+          event.preventDefault();
+          event.stopPropagation();
+        }
+        form.classList.add('was-validated');
+      }, false);
+    });
+  }, false);
+
+  window.addEventListener('load', function() {
+    // Fetch all the forms we want to apply custom Bootstrap validation styles to
+    var forms = document.getElementsByClassName('simple-example');
+    var invalid = $('.simple-example .invalid-feedback');
+ 
+    // Loop over them and prevent submission
+    var validation = Array.prototype.filter.call(forms, function(form) {
+      form.addEventListener('submit', function(event) {
+        if (form.checkValidity() === false) {
+          event.preventDefault();
+          event.stopPropagation();
+            invalid.css('display', 'block');
+        } else {
+            invalid.css('display', 'none');
+            form.classList.add('was-validated');
+        }
+      }, false);
+    });
+
+  }, false);
+
+  window.addEventListener('load', function() {
+    // Fetch all the forms we want to apply custom Bootstrap validation styles to
+    var forms = document.getElementsByClassName('email');
+    var invalid = $('.email .invalid-feedback');
+
+    // Loop over them and prevent submission
+    var validation = Array.prototype.filter.call(forms, function(form) {
+      form.addEventListener('submit', function(event) {
+        if (form.checkValidity() === false) {
+          event.preventDefault();
+          event.stopPropagation();
+            invalid.css('display', 'block');
+        } else {
+            invalid.css('display', 'none');
+            form.classList.add('was-validated');
+        }
+      }, false);
+    });
+  }, false);
+
+  window.addEventListener('load', function() {
+    // Fetch all the forms we want to apply custom Bootstrap validation styles to
+    var forms = document.getElementsByClassName('select');
+    var invalid = $('.select .invalid-feedback');
+
+    // Loop over them and prevent submission
+    var validation = Array.prototype.filter.call(forms, function(form) {
+      form.addEventListener('submit', function(event) {
+        if (form.checkValidity() === false) {
+          event.preventDefault();
+          event.stopPropagation();
+            invalid.css('display', 'block');
+        } else {
+            invalid.css('display', 'none');
+            form.classList.add('was-validated');
+        }
+      }, false);
+    });
+  }, false);
+
+})();
\ No newline at end of file
diff --git a/static/js/forms/custom-clipboard.js b/static/js/forms/custom-clipboard.js
new file mode 100644
index 00000000..7c7d9257
--- /dev/null
+++ b/static/js/forms/custom-clipboard.js
@@ -0,0 +1 @@
+var clipboard = new Clipboard('.btn');
\ No newline at end of file
diff --git a/static/js/ie11fix/fn.fix-padStart.js b/static/js/ie11fix/fn.fix-padStart.js
new file mode 100644
index 00000000..f70a3b3f
--- /dev/null
+++ b/static/js/ie11fix/fn.fix-padStart.js
@@ -0,0 +1,18 @@
+// https://github.com/uxitten/polyfill/blob/master/string.polyfill.js
+// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padStart
+if (!String.prototype.padStart) {
+    String.prototype.padStart = function padStart(targetLength,padString) {
+        targetLength = targetLength>>0; //truncate if number or convert non-number to 0;
+        padString = String((typeof padString !== 'undefined' ? padString : ' '));
+        if (this.length > targetLength) {
+            return String(this);
+        }
+        else {
+            targetLength = targetLength-this.length;
+            if (targetLength > padString.length) {
+                padString += padString.repeat(targetLength/padString.length); //append to original to ensure we are longer than needed
+            }
+            return padString.slice(0,targetLength) + String(this);
+        }
+    };
+}
\ No newline at end of file
diff --git a/static/js/libs/jquery-3.1.1.min.js b/static/js/libs/jquery-3.1.1.min.js
new file mode 100644
index 00000000..4c5be4c0
--- /dev/null
+++ b/static/js/libs/jquery-3.1.1.min.js
@@ -0,0 +1,4 @@
+/*! jQuery v3.1.1 | (c) jQuery Foundation | jquery.org/license */
+!function(a,b){"use strict";"object"==typeof module&&"object"==typeof module.exports?module.exports=a.document?b(a,!0):function(a){if(!a.document)throw new Error("jQuery requires a window with a document");return b(a)}:b(a)}("undefined"!=typeof window?window:this,function(a,b){"use strict";var c=[],d=a.document,e=Object.getPrototypeOf,f=c.slice,g=c.concat,h=c.push,i=c.indexOf,j={},k=j.toString,l=j.hasOwnProperty,m=l.toString,n=m.call(Object),o={};function p(a,b){b=b||d;var c=b.createElement("script");c.text=a,b.head.appendChild(c).parentNode.removeChild(c)}var q="3.1.1",r=function(a,b){return new r.fn.init(a,b)},s=/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,t=/^-ms-/,u=/-([a-z])/g,v=function(a,b){return b.toUpperCase()};r.fn=r.prototype={jquery:q,constructor:r,length:0,toArray:function(){return f.call(this)},get:function(a){return null==a?f.call(this):a<0?this[a+this.length]:this[a]},pushStack:function(a){var b=r.merge(this.constructor(),a);return b.prevObject=this,b},each:function(a){return r.each(this,a)},map:function(a){return this.pushStack(r.map(this,function(b,c){return a.call(b,c,b)}))},slice:function(){return this.pushStack(f.apply(this,arguments))},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},eq:function(a){var b=this.length,c=+a+(a<0?b:0);return this.pushStack(c>=0&&c<b?[this[c]]:[])},end:function(){return this.prevObject||this.constructor()},push:h,sort:c.sort,splice:c.splice},r.extend=r.fn.extend=function(){var a,b,c,d,e,f,g=arguments[0]||{},h=1,i=arguments.length,j=!1;for("boolean"==typeof g&&(j=g,g=arguments[h]||{},h++),"object"==typeof g||r.isFunction(g)||(g={}),h===i&&(g=this,h--);h<i;h++)if(null!=(a=arguments[h]))for(b in a)c=g[b],d=a[b],g!==d&&(j&&d&&(r.isPlainObject(d)||(e=r.isArray(d)))?(e?(e=!1,f=c&&r.isArray(c)?c:[]):f=c&&r.isPlainObject(c)?c:{},g[b]=r.extend(j,f,d)):void 0!==d&&(g[b]=d));return g},r.extend({expando:"jQuery"+(q+Math.random()).replace(/\D/g,""),isReady:!0,error:function(a){throw new Error(a)},noop:function(){},isFunction:function(a){return"function"===r.type(a)},isArray:Array.isArray,isWindow:function(a){return null!=a&&a===a.window},isNumeric:function(a){var b=r.type(a);return("number"===b||"string"===b)&&!isNaN(a-parseFloat(a))},isPlainObject:function(a){var b,c;return!(!a||"[object Object]"!==k.call(a))&&(!(b=e(a))||(c=l.call(b,"constructor")&&b.constructor,"function"==typeof c&&m.call(c)===n))},isEmptyObject:function(a){var b;for(b in a)return!1;return!0},type:function(a){return null==a?a+"":"object"==typeof a||"function"==typeof a?j[k.call(a)]||"object":typeof a},globalEval:function(a){p(a)},camelCase:function(a){return a.replace(t,"ms-").replace(u,v)},nodeName:function(a,b){return a.nodeName&&a.nodeName.toLowerCase()===b.toLowerCase()},each:function(a,b){var c,d=0;if(w(a)){for(c=a.length;d<c;d++)if(b.call(a[d],d,a[d])===!1)break}else for(d in a)if(b.call(a[d],d,a[d])===!1)break;return a},trim:function(a){return null==a?"":(a+"").replace(s,"")},makeArray:function(a,b){var c=b||[];return null!=a&&(w(Object(a))?r.merge(c,"string"==typeof a?[a]:a):h.call(c,a)),c},inArray:function(a,b,c){return null==b?-1:i.call(b,a,c)},merge:function(a,b){for(var c=+b.length,d=0,e=a.length;d<c;d++)a[e++]=b[d];return a.length=e,a},grep:function(a,b,c){for(var d,e=[],f=0,g=a.length,h=!c;f<g;f++)d=!b(a[f],f),d!==h&&e.push(a[f]);return e},map:function(a,b,c){var d,e,f=0,h=[];if(w(a))for(d=a.length;f<d;f++)e=b(a[f],f,c),null!=e&&h.push(e);else for(f in a)e=b(a[f],f,c),null!=e&&h.push(e);return g.apply([],h)},guid:1,proxy:function(a,b){var c,d,e;if("string"==typeof b&&(c=a[b],b=a,a=c),r.isFunction(a))return d=f.call(arguments,2),e=function(){return a.apply(b||this,d.concat(f.call(arguments)))},e.guid=a.guid=a.guid||r.guid++,e},now:Date.now,support:o}),"function"==typeof Symbol&&(r.fn[Symbol.iterator]=c[Symbol.iterator]),r.each("Boolean Number String Function Array Date RegExp Object Error Symbol".split(" "),function(a,b){j["[object "+b+"]"]=b.toLowerCase()});function w(a){var b=!!a&&"length"in a&&a.length,c=r.type(a);return"function"!==c&&!r.isWindow(a)&&("array"===c||0===b||"number"==typeof b&&b>0&&b-1 in a)}var x=function(a){var b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u="sizzle"+1*new Date,v=a.document,w=0,x=0,y=ha(),z=ha(),A=ha(),B=function(a,b){return a===b&&(l=!0),0},C={}.hasOwnProperty,D=[],E=D.pop,F=D.push,G=D.push,H=D.slice,I=function(a,b){for(var c=0,d=a.length;c<d;c++)if(a[c]===b)return c;return-1},J="checked|selected|async|autofocus|autoplay|controls|defer|disabled|hidden|ismap|loop|multiple|open|readonly|required|scoped",K="[\\x20\\t\\r\\n\\f]",L="(?:\\\\.|[\\w-]|[^\0-\\xa0])+",M="\\["+K+"*("+L+")(?:"+K+"*([*^$|!~]?=)"+K+"*(?:'((?:\\\\.|[^\\\\'])*)'|\"((?:\\\\.|[^\\\\\"])*)\"|("+L+"))|)"+K+"*\\]",N=":("+L+")(?:\\((('((?:\\\\.|[^\\\\'])*)'|\"((?:\\\\.|[^\\\\\"])*)\")|((?:\\\\.|[^\\\\()[\\]]|"+M+")*)|.*)\\)|)",O=new RegExp(K+"+","g"),P=new RegExp("^"+K+"+|((?:^|[^\\\\])(?:\\\\.)*)"+K+"+$","g"),Q=new RegExp("^"+K+"*,"+K+"*"),R=new RegExp("^"+K+"*([>+~]|"+K+")"+K+"*"),S=new RegExp("="+K+"*([^\\]'\"]*?)"+K+"*\\]","g"),T=new RegExp(N),U=new RegExp("^"+L+"$"),V={ID:new RegExp("^#("+L+")"),CLASS:new RegExp("^\\.("+L+")"),TAG:new RegExp("^("+L+"|[*])"),ATTR:new RegExp("^"+M),PSEUDO:new RegExp("^"+N),CHILD:new RegExp("^:(only|first|last|nth|nth-last)-(child|of-type)(?:\\("+K+"*(even|odd|(([+-]|)(\\d*)n|)"+K+"*(?:([+-]|)"+K+"*(\\d+)|))"+K+"*\\)|)","i"),bool:new RegExp("^(?:"+J+")$","i"),needsContext:new RegExp("^"+K+"*[>+~]|:(even|odd|eq|gt|lt|nth|first|last)(?:\\("+K+"*((?:-\\d)?\\d*)"+K+"*\\)|)(?=[^-]|$)","i")},W=/^(?:input|select|textarea|button)$/i,X=/^h\d$/i,Y=/^[^{]+\{\s*\[native \w/,Z=/^(?:#([\w-]+)|(\w+)|\.([\w-]+))$/,$=/[+~]/,_=new RegExp("\\\\([\\da-f]{1,6}"+K+"?|("+K+")|.)","ig"),aa=function(a,b,c){var d="0x"+b-65536;return d!==d||c?b:d<0?String.fromCharCode(d+65536):String.fromCharCode(d>>10|55296,1023&d|56320)},ba=/([\0-\x1f\x7f]|^-?\d)|^-$|[^\0-\x1f\x7f-\uFFFF\w-]/g,ca=function(a,b){return b?"\0"===a?"\ufffd":a.slice(0,-1)+"\\"+a.charCodeAt(a.length-1).toString(16)+" ":"\\"+a},da=function(){m()},ea=ta(function(a){return a.disabled===!0&&("form"in a||"label"in a)},{dir:"parentNode",next:"legend"});try{G.apply(D=H.call(v.childNodes),v.childNodes),D[v.childNodes.length].nodeType}catch(fa){G={apply:D.length?function(a,b){F.apply(a,H.call(b))}:function(a,b){var c=a.length,d=0;while(a[c++]=b[d++]);a.length=c-1}}}function ga(a,b,d,e){var f,h,j,k,l,o,r,s=b&&b.ownerDocument,w=b?b.nodeType:9;if(d=d||[],"string"!=typeof a||!a||1!==w&&9!==w&&11!==w)return d;if(!e&&((b?b.ownerDocument||b:v)!==n&&m(b),b=b||n,p)){if(11!==w&&(l=Z.exec(a)))if(f=l[1]){if(9===w){if(!(j=b.getElementById(f)))return d;if(j.id===f)return d.push(j),d}else if(s&&(j=s.getElementById(f))&&t(b,j)&&j.id===f)return d.push(j),d}else{if(l[2])return G.apply(d,b.getElementsByTagName(a)),d;if((f=l[3])&&c.getElementsByClassName&&b.getElementsByClassName)return G.apply(d,b.getElementsByClassName(f)),d}if(c.qsa&&!A[a+" "]&&(!q||!q.test(a))){if(1!==w)s=b,r=a;else if("object"!==b.nodeName.toLowerCase()){(k=b.getAttribute("id"))?k=k.replace(ba,ca):b.setAttribute("id",k=u),o=g(a),h=o.length;while(h--)o[h]="#"+k+" "+sa(o[h]);r=o.join(","),s=$.test(a)&&qa(b.parentNode)||b}if(r)try{return G.apply(d,s.querySelectorAll(r)),d}catch(x){}finally{k===u&&b.removeAttribute("id")}}}return i(a.replace(P,"$1"),b,d,e)}function ha(){var a=[];function b(c,e){return a.push(c+" ")>d.cacheLength&&delete b[a.shift()],b[c+" "]=e}return b}function ia(a){return a[u]=!0,a}function ja(a){var b=n.createElement("fieldset");try{return!!a(b)}catch(c){return!1}finally{b.parentNode&&b.parentNode.removeChild(b),b=null}}function ka(a,b){var c=a.split("|"),e=c.length;while(e--)d.attrHandle[c[e]]=b}function la(a,b){var c=b&&a,d=c&&1===a.nodeType&&1===b.nodeType&&a.sourceIndex-b.sourceIndex;if(d)return d;if(c)while(c=c.nextSibling)if(c===b)return-1;return a?1:-1}function ma(a){return function(b){var c=b.nodeName.toLowerCase();return"input"===c&&b.type===a}}function na(a){return function(b){var c=b.nodeName.toLowerCase();return("input"===c||"button"===c)&&b.type===a}}function oa(a){return function(b){return"form"in b?b.parentNode&&b.disabled===!1?"label"in b?"label"in b.parentNode?b.parentNode.disabled===a:b.disabled===a:b.isDisabled===a||b.isDisabled!==!a&&ea(b)===a:b.disabled===a:"label"in b&&b.disabled===a}}function pa(a){return ia(function(b){return b=+b,ia(function(c,d){var e,f=a([],c.length,b),g=f.length;while(g--)c[e=f[g]]&&(c[e]=!(d[e]=c[e]))})})}function qa(a){return a&&"undefined"!=typeof a.getElementsByTagName&&a}c=ga.support={},f=ga.isXML=function(a){var b=a&&(a.ownerDocument||a).documentElement;return!!b&&"HTML"!==b.nodeName},m=ga.setDocument=function(a){var b,e,g=a?a.ownerDocument||a:v;return g!==n&&9===g.nodeType&&g.documentElement?(n=g,o=n.documentElement,p=!f(n),v!==n&&(e=n.defaultView)&&e.top!==e&&(e.addEventListener?e.addEventListener("unload",da,!1):e.attachEvent&&e.attachEvent("onunload",da)),c.attributes=ja(function(a){return a.className="i",!a.getAttribute("className")}),c.getElementsByTagName=ja(function(a){return a.appendChild(n.createComment("")),!a.getElementsByTagName("*").length}),c.getElementsByClassName=Y.test(n.getElementsByClassName),c.getById=ja(function(a){return o.appendChild(a).id=u,!n.getElementsByName||!n.getElementsByName(u).length}),c.getById?(d.filter.ID=function(a){var b=a.replace(_,aa);return function(a){return a.getAttribute("id")===b}},d.find.ID=function(a,b){if("undefined"!=typeof b.getElementById&&p){var c=b.getElementById(a);return c?[c]:[]}}):(d.filter.ID=function(a){var b=a.replace(_,aa);return function(a){var c="undefined"!=typeof a.getAttributeNode&&a.getAttributeNode("id");return c&&c.value===b}},d.find.ID=function(a,b){if("undefined"!=typeof b.getElementById&&p){var c,d,e,f=b.getElementById(a);if(f){if(c=f.getAttributeNode("id"),c&&c.value===a)return[f];e=b.getElementsByName(a),d=0;while(f=e[d++])if(c=f.getAttributeNode("id"),c&&c.value===a)return[f]}return[]}}),d.find.TAG=c.getElementsByTagName?function(a,b){return"undefined"!=typeof b.getElementsByTagName?b.getElementsByTagName(a):c.qsa?b.querySelectorAll(a):void 0}:function(a,b){var c,d=[],e=0,f=b.getElementsByTagName(a);if("*"===a){while(c=f[e++])1===c.nodeType&&d.push(c);return d}return f},d.find.CLASS=c.getElementsByClassName&&function(a,b){if("undefined"!=typeof b.getElementsByClassName&&p)return b.getElementsByClassName(a)},r=[],q=[],(c.qsa=Y.test(n.querySelectorAll))&&(ja(function(a){o.appendChild(a).innerHTML="<a id='"+u+"'></a><select id='"+u+"-\r\\' msallowcapture=''><option selected=''></option></select>",a.querySelectorAll("[msallowcapture^='']").length&&q.push("[*^$]="+K+"*(?:''|\"\")"),a.querySelectorAll("[selected]").length||q.push("\\["+K+"*(?:value|"+J+")"),a.querySelectorAll("[id~="+u+"-]").length||q.push("~="),a.querySelectorAll(":checked").length||q.push(":checked"),a.querySelectorAll("a#"+u+"+*").length||q.push(".#.+[+~]")}),ja(function(a){a.innerHTML="<a href='' disabled='disabled'></a><select disabled='disabled'><option/></select>";var b=n.createElement("input");b.setAttribute("type","hidden"),a.appendChild(b).setAttribute("name","D"),a.querySelectorAll("[name=d]").length&&q.push("name"+K+"*[*^$|!~]?="),2!==a.querySelectorAll(":enabled").length&&q.push(":enabled",":disabled"),o.appendChild(a).disabled=!0,2!==a.querySelectorAll(":disabled").length&&q.push(":enabled",":disabled"),a.querySelectorAll("*,:x"),q.push(",.*:")})),(c.matchesSelector=Y.test(s=o.matches||o.webkitMatchesSelector||o.mozMatchesSelector||o.oMatchesSelector||o.msMatchesSelector))&&ja(function(a){c.disconnectedMatch=s.call(a,"*"),s.call(a,"[s!='']:x"),r.push("!=",N)}),q=q.length&&new RegExp(q.join("|")),r=r.length&&new RegExp(r.join("|")),b=Y.test(o.compareDocumentPosition),t=b||Y.test(o.contains)?function(a,b){var c=9===a.nodeType?a.documentElement:a,d=b&&b.parentNode;return a===d||!(!d||1!==d.nodeType||!(c.contains?c.contains(d):a.compareDocumentPosition&&16&a.compareDocumentPosition(d)))}:function(a,b){if(b)while(b=b.parentNode)if(b===a)return!0;return!1},B=b?function(a,b){if(a===b)return l=!0,0;var d=!a.compareDocumentPosition-!b.compareDocumentPosition;return d?d:(d=(a.ownerDocument||a)===(b.ownerDocument||b)?a.compareDocumentPosition(b):1,1&d||!c.sortDetached&&b.compareDocumentPosition(a)===d?a===n||a.ownerDocument===v&&t(v,a)?-1:b===n||b.ownerDocument===v&&t(v,b)?1:k?I(k,a)-I(k,b):0:4&d?-1:1)}:function(a,b){if(a===b)return l=!0,0;var c,d=0,e=a.parentNode,f=b.parentNode,g=[a],h=[b];if(!e||!f)return a===n?-1:b===n?1:e?-1:f?1:k?I(k,a)-I(k,b):0;if(e===f)return la(a,b);c=a;while(c=c.parentNode)g.unshift(c);c=b;while(c=c.parentNode)h.unshift(c);while(g[d]===h[d])d++;return d?la(g[d],h[d]):g[d]===v?-1:h[d]===v?1:0},n):n},ga.matches=function(a,b){return ga(a,null,null,b)},ga.matchesSelector=function(a,b){if((a.ownerDocument||a)!==n&&m(a),b=b.replace(S,"='$1']"),c.matchesSelector&&p&&!A[b+" "]&&(!r||!r.test(b))&&(!q||!q.test(b)))try{var d=s.call(a,b);if(d||c.disconnectedMatch||a.document&&11!==a.document.nodeType)return d}catch(e){}return ga(b,n,null,[a]).length>0},ga.contains=function(a,b){return(a.ownerDocument||a)!==n&&m(a),t(a,b)},ga.attr=function(a,b){(a.ownerDocument||a)!==n&&m(a);var e=d.attrHandle[b.toLowerCase()],f=e&&C.call(d.attrHandle,b.toLowerCase())?e(a,b,!p):void 0;return void 0!==f?f:c.attributes||!p?a.getAttribute(b):(f=a.getAttributeNode(b))&&f.specified?f.value:null},ga.escape=function(a){return(a+"").replace(ba,ca)},ga.error=function(a){throw new Error("Syntax error, unrecognized expression: "+a)},ga.uniqueSort=function(a){var b,d=[],e=0,f=0;if(l=!c.detectDuplicates,k=!c.sortStable&&a.slice(0),a.sort(B),l){while(b=a[f++])b===a[f]&&(e=d.push(f));while(e--)a.splice(d[e],1)}return k=null,a},e=ga.getText=function(a){var b,c="",d=0,f=a.nodeType;if(f){if(1===f||9===f||11===f){if("string"==typeof a.textContent)return a.textContent;for(a=a.firstChild;a;a=a.nextSibling)c+=e(a)}else if(3===f||4===f)return a.nodeValue}else while(b=a[d++])c+=e(b);return c},d=ga.selectors={cacheLength:50,createPseudo:ia,match:V,attrHandle:{},find:{},relative:{">":{dir:"parentNode",first:!0}," ":{dir:"parentNode"},"+":{dir:"previousSibling",first:!0},"~":{dir:"previousSibling"}},preFilter:{ATTR:function(a){return a[1]=a[1].replace(_,aa),a[3]=(a[3]||a[4]||a[5]||"").replace(_,aa),"~="===a[2]&&(a[3]=" "+a[3]+" "),a.slice(0,4)},CHILD:function(a){return a[1]=a[1].toLowerCase(),"nth"===a[1].slice(0,3)?(a[3]||ga.error(a[0]),a[4]=+(a[4]?a[5]+(a[6]||1):2*("even"===a[3]||"odd"===a[3])),a[5]=+(a[7]+a[8]||"odd"===a[3])):a[3]&&ga.error(a[0]),a},PSEUDO:function(a){var b,c=!a[6]&&a[2];return V.CHILD.test(a[0])?null:(a[3]?a[2]=a[4]||a[5]||"":c&&T.test(c)&&(b=g(c,!0))&&(b=c.indexOf(")",c.length-b)-c.length)&&(a[0]=a[0].slice(0,b),a[2]=c.slice(0,b)),a.slice(0,3))}},filter:{TAG:function(a){var b=a.replace(_,aa).toLowerCase();return"*"===a?function(){return!0}:function(a){return a.nodeName&&a.nodeName.toLowerCase()===b}},CLASS:function(a){var b=y[a+" "];return b||(b=new RegExp("(^|"+K+")"+a+"("+K+"|$)"))&&y(a,function(a){return b.test("string"==typeof a.className&&a.className||"undefined"!=typeof a.getAttribute&&a.getAttribute("class")||"")})},ATTR:function(a,b,c){return function(d){var e=ga.attr(d,a);return null==e?"!="===b:!b||(e+="","="===b?e===c:"!="===b?e!==c:"^="===b?c&&0===e.indexOf(c):"*="===b?c&&e.indexOf(c)>-1:"$="===b?c&&e.slice(-c.length)===c:"~="===b?(" "+e.replace(O," ")+" ").indexOf(c)>-1:"|="===b&&(e===c||e.slice(0,c.length+1)===c+"-"))}},CHILD:function(a,b,c,d,e){var f="nth"!==a.slice(0,3),g="last"!==a.slice(-4),h="of-type"===b;return 1===d&&0===e?function(a){return!!a.parentNode}:function(b,c,i){var j,k,l,m,n,o,p=f!==g?"nextSibling":"previousSibling",q=b.parentNode,r=h&&b.nodeName.toLowerCase(),s=!i&&!h,t=!1;if(q){if(f){while(p){m=b;while(m=m[p])if(h?m.nodeName.toLowerCase()===r:1===m.nodeType)return!1;o=p="only"===a&&!o&&"nextSibling"}return!0}if(o=[g?q.firstChild:q.lastChild],g&&s){m=q,l=m[u]||(m[u]={}),k=l[m.uniqueID]||(l[m.uniqueID]={}),j=k[a]||[],n=j[0]===w&&j[1],t=n&&j[2],m=n&&q.childNodes[n];while(m=++n&&m&&m[p]||(t=n=0)||o.pop())if(1===m.nodeType&&++t&&m===b){k[a]=[w,n,t];break}}else if(s&&(m=b,l=m[u]||(m[u]={}),k=l[m.uniqueID]||(l[m.uniqueID]={}),j=k[a]||[],n=j[0]===w&&j[1],t=n),t===!1)while(m=++n&&m&&m[p]||(t=n=0)||o.pop())if((h?m.nodeName.toLowerCase()===r:1===m.nodeType)&&++t&&(s&&(l=m[u]||(m[u]={}),k=l[m.uniqueID]||(l[m.uniqueID]={}),k[a]=[w,t]),m===b))break;return t-=e,t===d||t%d===0&&t/d>=0}}},PSEUDO:function(a,b){var c,e=d.pseudos[a]||d.setFilters[a.toLowerCase()]||ga.error("unsupported pseudo: "+a);return e[u]?e(b):e.length>1?(c=[a,a,"",b],d.setFilters.hasOwnProperty(a.toLowerCase())?ia(function(a,c){var d,f=e(a,b),g=f.length;while(g--)d=I(a,f[g]),a[d]=!(c[d]=f[g])}):function(a){return e(a,0,c)}):e}},pseudos:{not:ia(function(a){var b=[],c=[],d=h(a.replace(P,"$1"));return d[u]?ia(function(a,b,c,e){var f,g=d(a,null,e,[]),h=a.length;while(h--)(f=g[h])&&(a[h]=!(b[h]=f))}):function(a,e,f){return b[0]=a,d(b,null,f,c),b[0]=null,!c.pop()}}),has:ia(function(a){return function(b){return ga(a,b).length>0}}),contains:ia(function(a){return a=a.replace(_,aa),function(b){return(b.textContent||b.innerText||e(b)).indexOf(a)>-1}}),lang:ia(function(a){return U.test(a||"")||ga.error("unsupported lang: "+a),a=a.replace(_,aa).toLowerCase(),function(b){var c;do if(c=p?b.lang:b.getAttribute("xml:lang")||b.getAttribute("lang"))return c=c.toLowerCase(),c===a||0===c.indexOf(a+"-");while((b=b.parentNode)&&1===b.nodeType);return!1}}),target:function(b){var c=a.location&&a.location.hash;return c&&c.slice(1)===b.id},root:function(a){return a===o},focus:function(a){return a===n.activeElement&&(!n.hasFocus||n.hasFocus())&&!!(a.type||a.href||~a.tabIndex)},enabled:oa(!1),disabled:oa(!0),checked:function(a){var b=a.nodeName.toLowerCase();return"input"===b&&!!a.checked||"option"===b&&!!a.selected},selected:function(a){return a.parentNode&&a.parentNode.selectedIndex,a.selected===!0},empty:function(a){for(a=a.firstChild;a;a=a.nextSibling)if(a.nodeType<6)return!1;return!0},parent:function(a){return!d.pseudos.empty(a)},header:function(a){return X.test(a.nodeName)},input:function(a){return W.test(a.nodeName)},button:function(a){var b=a.nodeName.toLowerCase();return"input"===b&&"button"===a.type||"button"===b},text:function(a){var b;return"input"===a.nodeName.toLowerCase()&&"text"===a.type&&(null==(b=a.getAttribute("type"))||"text"===b.toLowerCase())},first:pa(function(){return[0]}),last:pa(function(a,b){return[b-1]}),eq:pa(function(a,b,c){return[c<0?c+b:c]}),even:pa(function(a,b){for(var c=0;c<b;c+=2)a.push(c);return a}),odd:pa(function(a,b){for(var c=1;c<b;c+=2)a.push(c);return a}),lt:pa(function(a,b,c){for(var d=c<0?c+b:c;--d>=0;)a.push(d);return a}),gt:pa(function(a,b,c){for(var d=c<0?c+b:c;++d<b;)a.push(d);return a})}},d.pseudos.nth=d.pseudos.eq;for(b in{radio:!0,checkbox:!0,file:!0,password:!0,image:!0})d.pseudos[b]=ma(b);for(b in{submit:!0,reset:!0})d.pseudos[b]=na(b);function ra(){}ra.prototype=d.filters=d.pseudos,d.setFilters=new ra,g=ga.tokenize=function(a,b){var c,e,f,g,h,i,j,k=z[a+" "];if(k)return b?0:k.slice(0);h=a,i=[],j=d.preFilter;while(h){c&&!(e=Q.exec(h))||(e&&(h=h.slice(e[0].length)||h),i.push(f=[])),c=!1,(e=R.exec(h))&&(c=e.shift(),f.push({value:c,type:e[0].replace(P," ")}),h=h.slice(c.length));for(g in d.filter)!(e=V[g].exec(h))||j[g]&&!(e=j[g](e))||(c=e.shift(),f.push({value:c,type:g,matches:e}),h=h.slice(c.length));if(!c)break}return b?h.length:h?ga.error(a):z(a,i).slice(0)};function sa(a){for(var b=0,c=a.length,d="";b<c;b++)d+=a[b].value;return d}function ta(a,b,c){var d=b.dir,e=b.next,f=e||d,g=c&&"parentNode"===f,h=x++;return b.first?function(b,c,e){while(b=b[d])if(1===b.nodeType||g)return a(b,c,e);return!1}:function(b,c,i){var j,k,l,m=[w,h];if(i){while(b=b[d])if((1===b.nodeType||g)&&a(b,c,i))return!0}else while(b=b[d])if(1===b.nodeType||g)if(l=b[u]||(b[u]={}),k=l[b.uniqueID]||(l[b.uniqueID]={}),e&&e===b.nodeName.toLowerCase())b=b[d]||b;else{if((j=k[f])&&j[0]===w&&j[1]===h)return m[2]=j[2];if(k[f]=m,m[2]=a(b,c,i))return!0}return!1}}function ua(a){return a.length>1?function(b,c,d){var e=a.length;while(e--)if(!a[e](b,c,d))return!1;return!0}:a[0]}function va(a,b,c){for(var d=0,e=b.length;d<e;d++)ga(a,b[d],c);return c}function wa(a,b,c,d,e){for(var f,g=[],h=0,i=a.length,j=null!=b;h<i;h++)(f=a[h])&&(c&&!c(f,d,e)||(g.push(f),j&&b.push(h)));return g}function xa(a,b,c,d,e,f){return d&&!d[u]&&(d=xa(d)),e&&!e[u]&&(e=xa(e,f)),ia(function(f,g,h,i){var j,k,l,m=[],n=[],o=g.length,p=f||va(b||"*",h.nodeType?[h]:h,[]),q=!a||!f&&b?p:wa(p,m,a,h,i),r=c?e||(f?a:o||d)?[]:g:q;if(c&&c(q,r,h,i),d){j=wa(r,n),d(j,[],h,i),k=j.length;while(k--)(l=j[k])&&(r[n[k]]=!(q[n[k]]=l))}if(f){if(e||a){if(e){j=[],k=r.length;while(k--)(l=r[k])&&j.push(q[k]=l);e(null,r=[],j,i)}k=r.length;while(k--)(l=r[k])&&(j=e?I(f,l):m[k])>-1&&(f[j]=!(g[j]=l))}}else r=wa(r===g?r.splice(o,r.length):r),e?e(null,g,r,i):G.apply(g,r)})}function ya(a){for(var b,c,e,f=a.length,g=d.relative[a[0].type],h=g||d.relative[" "],i=g?1:0,k=ta(function(a){return a===b},h,!0),l=ta(function(a){return I(b,a)>-1},h,!0),m=[function(a,c,d){var e=!g&&(d||c!==j)||((b=c).nodeType?k(a,c,d):l(a,c,d));return b=null,e}];i<f;i++)if(c=d.relative[a[i].type])m=[ta(ua(m),c)];else{if(c=d.filter[a[i].type].apply(null,a[i].matches),c[u]){for(e=++i;e<f;e++)if(d.relative[a[e].type])break;return xa(i>1&&ua(m),i>1&&sa(a.slice(0,i-1).concat({value:" "===a[i-2].type?"*":""})).replace(P,"$1"),c,i<e&&ya(a.slice(i,e)),e<f&&ya(a=a.slice(e)),e<f&&sa(a))}m.push(c)}return ua(m)}function za(a,b){var c=b.length>0,e=a.length>0,f=function(f,g,h,i,k){var l,o,q,r=0,s="0",t=f&&[],u=[],v=j,x=f||e&&d.find.TAG("*",k),y=w+=null==v?1:Math.random()||.1,z=x.length;for(k&&(j=g===n||g||k);s!==z&&null!=(l=x[s]);s++){if(e&&l){o=0,g||l.ownerDocument===n||(m(l),h=!p);while(q=a[o++])if(q(l,g||n,h)){i.push(l);break}k&&(w=y)}c&&((l=!q&&l)&&r--,f&&t.push(l))}if(r+=s,c&&s!==r){o=0;while(q=b[o++])q(t,u,g,h);if(f){if(r>0)while(s--)t[s]||u[s]||(u[s]=E.call(i));u=wa(u)}G.apply(i,u),k&&!f&&u.length>0&&r+b.length>1&&ga.uniqueSort(i)}return k&&(w=y,j=v),t};return c?ia(f):f}return h=ga.compile=function(a,b){var c,d=[],e=[],f=A[a+" "];if(!f){b||(b=g(a)),c=b.length;while(c--)f=ya(b[c]),f[u]?d.push(f):e.push(f);f=A(a,za(e,d)),f.selector=a}return f},i=ga.select=function(a,b,c,e){var f,i,j,k,l,m="function"==typeof a&&a,n=!e&&g(a=m.selector||a);if(c=c||[],1===n.length){if(i=n[0]=n[0].slice(0),i.length>2&&"ID"===(j=i[0]).type&&9===b.nodeType&&p&&d.relative[i[1].type]){if(b=(d.find.ID(j.matches[0].replace(_,aa),b)||[])[0],!b)return c;m&&(b=b.parentNode),a=a.slice(i.shift().value.length)}f=V.needsContext.test(a)?0:i.length;while(f--){if(j=i[f],d.relative[k=j.type])break;if((l=d.find[k])&&(e=l(j.matches[0].replace(_,aa),$.test(i[0].type)&&qa(b.parentNode)||b))){if(i.splice(f,1),a=e.length&&sa(i),!a)return G.apply(c,e),c;break}}}return(m||h(a,n))(e,b,!p,c,!b||$.test(a)&&qa(b.parentNode)||b),c},c.sortStable=u.split("").sort(B).join("")===u,c.detectDuplicates=!!l,m(),c.sortDetached=ja(function(a){return 1&a.compareDocumentPosition(n.createElement("fieldset"))}),ja(function(a){return a.innerHTML="<a href='#'></a>","#"===a.firstChild.getAttribute("href")})||ka("type|href|height|width",function(a,b,c){if(!c)return a.getAttribute(b,"type"===b.toLowerCase()?1:2)}),c.attributes&&ja(function(a){return a.innerHTML="<input/>",a.firstChild.setAttribute("value",""),""===a.firstChild.getAttribute("value")})||ka("value",function(a,b,c){if(!c&&"input"===a.nodeName.toLowerCase())return a.defaultValue}),ja(function(a){return null==a.getAttribute("disabled")})||ka(J,function(a,b,c){var d;if(!c)return a[b]===!0?b.toLowerCase():(d=a.getAttributeNode(b))&&d.specified?d.value:null}),ga}(a);r.find=x,r.expr=x.selectors,r.expr[":"]=r.expr.pseudos,r.uniqueSort=r.unique=x.uniqueSort,r.text=x.getText,r.isXMLDoc=x.isXML,r.contains=x.contains,r.escapeSelector=x.escape;var y=function(a,b,c){var d=[],e=void 0!==c;while((a=a[b])&&9!==a.nodeType)if(1===a.nodeType){if(e&&r(a).is(c))break;d.push(a)}return d},z=function(a,b){for(var c=[];a;a=a.nextSibling)1===a.nodeType&&a!==b&&c.push(a);return c},A=r.expr.match.needsContext,B=/^<([a-z][^\/\0>:\x20\t\r\n\f]*)[\x20\t\r\n\f]*\/?>(?:<\/\1>|)$/i,C=/^.[^:#\[\.,]*$/;function D(a,b,c){return r.isFunction(b)?r.grep(a,function(a,d){return!!b.call(a,d,a)!==c}):b.nodeType?r.grep(a,function(a){return a===b!==c}):"string"!=typeof b?r.grep(a,function(a){return i.call(b,a)>-1!==c}):C.test(b)?r.filter(b,a,c):(b=r.filter(b,a),r.grep(a,function(a){return i.call(b,a)>-1!==c&&1===a.nodeType}))}r.filter=function(a,b,c){var d=b[0];return c&&(a=":not("+a+")"),1===b.length&&1===d.nodeType?r.find.matchesSelector(d,a)?[d]:[]:r.find.matches(a,r.grep(b,function(a){return 1===a.nodeType}))},r.fn.extend({find:function(a){var b,c,d=this.length,e=this;if("string"!=typeof a)return this.pushStack(r(a).filter(function(){for(b=0;b<d;b++)if(r.contains(e[b],this))return!0}));for(c=this.pushStack([]),b=0;b<d;b++)r.find(a,e[b],c);return d>1?r.uniqueSort(c):c},filter:function(a){return this.pushStack(D(this,a||[],!1))},not:function(a){return this.pushStack(D(this,a||[],!0))},is:function(a){return!!D(this,"string"==typeof a&&A.test(a)?r(a):a||[],!1).length}});var E,F=/^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]+))$/,G=r.fn.init=function(a,b,c){var e,f;if(!a)return this;if(c=c||E,"string"==typeof a){if(e="<"===a[0]&&">"===a[a.length-1]&&a.length>=3?[null,a,null]:F.exec(a),!e||!e[1]&&b)return!b||b.jquery?(b||c).find(a):this.constructor(b).find(a);if(e[1]){if(b=b instanceof r?b[0]:b,r.merge(this,r.parseHTML(e[1],b&&b.nodeType?b.ownerDocument||b:d,!0)),B.test(e[1])&&r.isPlainObject(b))for(e in b)r.isFunction(this[e])?this[e](b[e]):this.attr(e,b[e]);return this}return f=d.getElementById(e[2]),f&&(this[0]=f,this.length=1),this}return a.nodeType?(this[0]=a,this.length=1,this):r.isFunction(a)?void 0!==c.ready?c.ready(a):a(r):r.makeArray(a,this)};G.prototype=r.fn,E=r(d);var H=/^(?:parents|prev(?:Until|All))/,I={children:!0,contents:!0,next:!0,prev:!0};r.fn.extend({has:function(a){var b=r(a,this),c=b.length;return this.filter(function(){for(var a=0;a<c;a++)if(r.contains(this,b[a]))return!0})},closest:function(a,b){var c,d=0,e=this.length,f=[],g="string"!=typeof a&&r(a);if(!A.test(a))for(;d<e;d++)for(c=this[d];c&&c!==b;c=c.parentNode)if(c.nodeType<11&&(g?g.index(c)>-1:1===c.nodeType&&r.find.matchesSelector(c,a))){f.push(c);break}return this.pushStack(f.length>1?r.uniqueSort(f):f)},index:function(a){return a?"string"==typeof a?i.call(r(a),this[0]):i.call(this,a.jquery?a[0]:a):this[0]&&this[0].parentNode?this.first().prevAll().length:-1},add:function(a,b){return this.pushStack(r.uniqueSort(r.merge(this.get(),r(a,b))))},addBack:function(a){return this.add(null==a?this.prevObject:this.prevObject.filter(a))}});function J(a,b){while((a=a[b])&&1!==a.nodeType);return a}r.each({parent:function(a){var b=a.parentNode;return b&&11!==b.nodeType?b:null},parents:function(a){return y(a,"parentNode")},parentsUntil:function(a,b,c){return y(a,"parentNode",c)},next:function(a){return J(a,"nextSibling")},prev:function(a){return J(a,"previousSibling")},nextAll:function(a){return y(a,"nextSibling")},prevAll:function(a){return y(a,"previousSibling")},nextUntil:function(a,b,c){return y(a,"nextSibling",c)},prevUntil:function(a,b,c){return y(a,"previousSibling",c)},siblings:function(a){return z((a.parentNode||{}).firstChild,a)},children:function(a){return z(a.firstChild)},contents:function(a){return a.contentDocument||r.merge([],a.childNodes)}},function(a,b){r.fn[a]=function(c,d){var e=r.map(this,b,c);return"Until"!==a.slice(-5)&&(d=c),d&&"string"==typeof d&&(e=r.filter(d,e)),this.length>1&&(I[a]||r.uniqueSort(e),H.test(a)&&e.reverse()),this.pushStack(e)}});var K=/[^\x20\t\r\n\f]+/g;function L(a){var b={};return r.each(a.match(K)||[],function(a,c){b[c]=!0}),b}r.Callbacks=function(a){a="string"==typeof a?L(a):r.extend({},a);var b,c,d,e,f=[],g=[],h=-1,i=function(){for(e=a.once,d=b=!0;g.length;h=-1){c=g.shift();while(++h<f.length)f[h].apply(c[0],c[1])===!1&&a.stopOnFalse&&(h=f.length,c=!1)}a.memory||(c=!1),b=!1,e&&(f=c?[]:"")},j={add:function(){return f&&(c&&!b&&(h=f.length-1,g.push(c)),function d(b){r.each(b,function(b,c){r.isFunction(c)?a.unique&&j.has(c)||f.push(c):c&&c.length&&"string"!==r.type(c)&&d(c)})}(arguments),c&&!b&&i()),this},remove:function(){return r.each(arguments,function(a,b){var c;while((c=r.inArray(b,f,c))>-1)f.splice(c,1),c<=h&&h--}),this},has:function(a){return a?r.inArray(a,f)>-1:f.length>0},empty:function(){return f&&(f=[]),this},disable:function(){return e=g=[],f=c="",this},disabled:function(){return!f},lock:function(){return e=g=[],c||b||(f=c=""),this},locked:function(){return!!e},fireWith:function(a,c){return e||(c=c||[],c=[a,c.slice?c.slice():c],g.push(c),b||i()),this},fire:function(){return j.fireWith(this,arguments),this},fired:function(){return!!d}};return j};function M(a){return a}function N(a){throw a}function O(a,b,c){var d;try{a&&r.isFunction(d=a.promise)?d.call(a).done(b).fail(c):a&&r.isFunction(d=a.then)?d.call(a,b,c):b.call(void 0,a)}catch(a){c.call(void 0,a)}}r.extend({Deferred:function(b){var c=[["notify","progress",r.Callbacks("memory"),r.Callbacks("memory"),2],["resolve","done",r.Callbacks("once memory"),r.Callbacks("once memory"),0,"resolved"],["reject","fail",r.Callbacks("once memory"),r.Callbacks("once memory"),1,"rejected"]],d="pending",e={state:function(){return d},always:function(){return f.done(arguments).fail(arguments),this},"catch":function(a){return e.then(null,a)},pipe:function(){var a=arguments;return r.Deferred(function(b){r.each(c,function(c,d){var e=r.isFunction(a[d[4]])&&a[d[4]];f[d[1]](function(){var a=e&&e.apply(this,arguments);a&&r.isFunction(a.promise)?a.promise().progress(b.notify).done(b.resolve).fail(b.reject):b[d[0]+"With"](this,e?[a]:arguments)})}),a=null}).promise()},then:function(b,d,e){var f=0;function g(b,c,d,e){return function(){var h=this,i=arguments,j=function(){var a,j;if(!(b<f)){if(a=d.apply(h,i),a===c.promise())throw new TypeError("Thenable self-resolution");j=a&&("object"==typeof a||"function"==typeof a)&&a.then,r.isFunction(j)?e?j.call(a,g(f,c,M,e),g(f,c,N,e)):(f++,j.call(a,g(f,c,M,e),g(f,c,N,e),g(f,c,M,c.notifyWith))):(d!==M&&(h=void 0,i=[a]),(e||c.resolveWith)(h,i))}},k=e?j:function(){try{j()}catch(a){r.Deferred.exceptionHook&&r.Deferred.exceptionHook(a,k.stackTrace),b+1>=f&&(d!==N&&(h=void 0,i=[a]),c.rejectWith(h,i))}};b?k():(r.Deferred.getStackHook&&(k.stackTrace=r.Deferred.getStackHook()),a.setTimeout(k))}}return r.Deferred(function(a){c[0][3].add(g(0,a,r.isFunction(e)?e:M,a.notifyWith)),c[1][3].add(g(0,a,r.isFunction(b)?b:M)),c[2][3].add(g(0,a,r.isFunction(d)?d:N))}).promise()},promise:function(a){return null!=a?r.extend(a,e):e}},f={};return r.each(c,function(a,b){var g=b[2],h=b[5];e[b[1]]=g.add,h&&g.add(function(){d=h},c[3-a][2].disable,c[0][2].lock),g.add(b[3].fire),f[b[0]]=function(){return f[b[0]+"With"](this===f?void 0:this,arguments),this},f[b[0]+"With"]=g.fireWith}),e.promise(f),b&&b.call(f,f),f},when:function(a){var b=arguments.length,c=b,d=Array(c),e=f.call(arguments),g=r.Deferred(),h=function(a){return function(c){d[a]=this,e[a]=arguments.length>1?f.call(arguments):c,--b||g.resolveWith(d,e)}};if(b<=1&&(O(a,g.done(h(c)).resolve,g.reject),"pending"===g.state()||r.isFunction(e[c]&&e[c].then)))return g.then();while(c--)O(e[c],h(c),g.reject);return g.promise()}});var P=/^(Eval|Internal|Range|Reference|Syntax|Type|URI)Error$/;r.Deferred.exceptionHook=function(b,c){a.console&&a.console.warn&&b&&P.test(b.name)&&a.console.warn("jQuery.Deferred exception: "+b.message,b.stack,c)},r.readyException=function(b){a.setTimeout(function(){throw b})};var Q=r.Deferred();r.fn.ready=function(a){return Q.then(a)["catch"](function(a){r.readyException(a)}),this},r.extend({isReady:!1,readyWait:1,holdReady:function(a){a?r.readyWait++:r.ready(!0)},ready:function(a){(a===!0?--r.readyWait:r.isReady)||(r.isReady=!0,a!==!0&&--r.readyWait>0||Q.resolveWith(d,[r]))}}),r.ready.then=Q.then;function R(){d.removeEventListener("DOMContentLoaded",R),
+a.removeEventListener("load",R),r.ready()}"complete"===d.readyState||"loading"!==d.readyState&&!d.documentElement.doScroll?a.setTimeout(r.ready):(d.addEventListener("DOMContentLoaded",R),a.addEventListener("load",R));var S=function(a,b,c,d,e,f,g){var h=0,i=a.length,j=null==c;if("object"===r.type(c)){e=!0;for(h in c)S(a,b,h,c[h],!0,f,g)}else if(void 0!==d&&(e=!0,r.isFunction(d)||(g=!0),j&&(g?(b.call(a,d),b=null):(j=b,b=function(a,b,c){return j.call(r(a),c)})),b))for(;h<i;h++)b(a[h],c,g?d:d.call(a[h],h,b(a[h],c)));return e?a:j?b.call(a):i?b(a[0],c):f},T=function(a){return 1===a.nodeType||9===a.nodeType||!+a.nodeType};function U(){this.expando=r.expando+U.uid++}U.uid=1,U.prototype={cache:function(a){var b=a[this.expando];return b||(b={},T(a)&&(a.nodeType?a[this.expando]=b:Object.defineProperty(a,this.expando,{value:b,configurable:!0}))),b},set:function(a,b,c){var d,e=this.cache(a);if("string"==typeof b)e[r.camelCase(b)]=c;else for(d in b)e[r.camelCase(d)]=b[d];return e},get:function(a,b){return void 0===b?this.cache(a):a[this.expando]&&a[this.expando][r.camelCase(b)]},access:function(a,b,c){return void 0===b||b&&"string"==typeof b&&void 0===c?this.get(a,b):(this.set(a,b,c),void 0!==c?c:b)},remove:function(a,b){var c,d=a[this.expando];if(void 0!==d){if(void 0!==b){r.isArray(b)?b=b.map(r.camelCase):(b=r.camelCase(b),b=b in d?[b]:b.match(K)||[]),c=b.length;while(c--)delete d[b[c]]}(void 0===b||r.isEmptyObject(d))&&(a.nodeType?a[this.expando]=void 0:delete a[this.expando])}},hasData:function(a){var b=a[this.expando];return void 0!==b&&!r.isEmptyObject(b)}};var V=new U,W=new U,X=/^(?:\{[\w\W]*\}|\[[\w\W]*\])$/,Y=/[A-Z]/g;function Z(a){return"true"===a||"false"!==a&&("null"===a?null:a===+a+""?+a:X.test(a)?JSON.parse(a):a)}function $(a,b,c){var d;if(void 0===c&&1===a.nodeType)if(d="data-"+b.replace(Y,"-$&").toLowerCase(),c=a.getAttribute(d),"string"==typeof c){try{c=Z(c)}catch(e){}W.set(a,b,c)}else c=void 0;return c}r.extend({hasData:function(a){return W.hasData(a)||V.hasData(a)},data:function(a,b,c){return W.access(a,b,c)},removeData:function(a,b){W.remove(a,b)},_data:function(a,b,c){return V.access(a,b,c)},_removeData:function(a,b){V.remove(a,b)}}),r.fn.extend({data:function(a,b){var c,d,e,f=this[0],g=f&&f.attributes;if(void 0===a){if(this.length&&(e=W.get(f),1===f.nodeType&&!V.get(f,"hasDataAttrs"))){c=g.length;while(c--)g[c]&&(d=g[c].name,0===d.indexOf("data-")&&(d=r.camelCase(d.slice(5)),$(f,d,e[d])));V.set(f,"hasDataAttrs",!0)}return e}return"object"==typeof a?this.each(function(){W.set(this,a)}):S(this,function(b){var c;if(f&&void 0===b){if(c=W.get(f,a),void 0!==c)return c;if(c=$(f,a),void 0!==c)return c}else this.each(function(){W.set(this,a,b)})},null,b,arguments.length>1,null,!0)},removeData:function(a){return this.each(function(){W.remove(this,a)})}}),r.extend({queue:function(a,b,c){var d;if(a)return b=(b||"fx")+"queue",d=V.get(a,b),c&&(!d||r.isArray(c)?d=V.access(a,b,r.makeArray(c)):d.push(c)),d||[]},dequeue:function(a,b){b=b||"fx";var c=r.queue(a,b),d=c.length,e=c.shift(),f=r._queueHooks(a,b),g=function(){r.dequeue(a,b)};"inprogress"===e&&(e=c.shift(),d--),e&&("fx"===b&&c.unshift("inprogress"),delete f.stop,e.call(a,g,f)),!d&&f&&f.empty.fire()},_queueHooks:function(a,b){var c=b+"queueHooks";return V.get(a,c)||V.access(a,c,{empty:r.Callbacks("once memory").add(function(){V.remove(a,[b+"queue",c])})})}}),r.fn.extend({queue:function(a,b){var c=2;return"string"!=typeof a&&(b=a,a="fx",c--),arguments.length<c?r.queue(this[0],a):void 0===b?this:this.each(function(){var c=r.queue(this,a,b);r._queueHooks(this,a),"fx"===a&&"inprogress"!==c[0]&&r.dequeue(this,a)})},dequeue:function(a){return this.each(function(){r.dequeue(this,a)})},clearQueue:function(a){return this.queue(a||"fx",[])},promise:function(a,b){var c,d=1,e=r.Deferred(),f=this,g=this.length,h=function(){--d||e.resolveWith(f,[f])};"string"!=typeof a&&(b=a,a=void 0),a=a||"fx";while(g--)c=V.get(f[g],a+"queueHooks"),c&&c.empty&&(d++,c.empty.add(h));return h(),e.promise(b)}});var _=/[+-]?(?:\d*\.|)\d+(?:[eE][+-]?\d+|)/.source,aa=new RegExp("^(?:([+-])=|)("+_+")([a-z%]*)$","i"),ba=["Top","Right","Bottom","Left"],ca=function(a,b){return a=b||a,"none"===a.style.display||""===a.style.display&&r.contains(a.ownerDocument,a)&&"none"===r.css(a,"display")},da=function(a,b,c,d){var e,f,g={};for(f in b)g[f]=a.style[f],a.style[f]=b[f];e=c.apply(a,d||[]);for(f in b)a.style[f]=g[f];return e};function ea(a,b,c,d){var e,f=1,g=20,h=d?function(){return d.cur()}:function(){return r.css(a,b,"")},i=h(),j=c&&c[3]||(r.cssNumber[b]?"":"px"),k=(r.cssNumber[b]||"px"!==j&&+i)&&aa.exec(r.css(a,b));if(k&&k[3]!==j){j=j||k[3],c=c||[],k=+i||1;do f=f||".5",k/=f,r.style(a,b,k+j);while(f!==(f=h()/i)&&1!==f&&--g)}return c&&(k=+k||+i||0,e=c[1]?k+(c[1]+1)*c[2]:+c[2],d&&(d.unit=j,d.start=k,d.end=e)),e}var fa={};function ga(a){var b,c=a.ownerDocument,d=a.nodeName,e=fa[d];return e?e:(b=c.body.appendChild(c.createElement(d)),e=r.css(b,"display"),b.parentNode.removeChild(b),"none"===e&&(e="block"),fa[d]=e,e)}function ha(a,b){for(var c,d,e=[],f=0,g=a.length;f<g;f++)d=a[f],d.style&&(c=d.style.display,b?("none"===c&&(e[f]=V.get(d,"display")||null,e[f]||(d.style.display="")),""===d.style.display&&ca(d)&&(e[f]=ga(d))):"none"!==c&&(e[f]="none",V.set(d,"display",c)));for(f=0;f<g;f++)null!=e[f]&&(a[f].style.display=e[f]);return a}r.fn.extend({show:function(){return ha(this,!0)},hide:function(){return ha(this)},toggle:function(a){return"boolean"==typeof a?a?this.show():this.hide():this.each(function(){ca(this)?r(this).show():r(this).hide()})}});var ia=/^(?:checkbox|radio)$/i,ja=/<([a-z][^\/\0>\x20\t\r\n\f]+)/i,ka=/^$|\/(?:java|ecma)script/i,la={option:[1,"<select multiple='multiple'>","</select>"],thead:[1,"<table>","</table>"],col:[2,"<table><colgroup>","</colgroup></table>"],tr:[2,"<table><tbody>","</tbody></table>"],td:[3,"<table><tbody><tr>","</tr></tbody></table>"],_default:[0,"",""]};la.optgroup=la.option,la.tbody=la.tfoot=la.colgroup=la.caption=la.thead,la.th=la.td;function ma(a,b){var c;return c="undefined"!=typeof a.getElementsByTagName?a.getElementsByTagName(b||"*"):"undefined"!=typeof a.querySelectorAll?a.querySelectorAll(b||"*"):[],void 0===b||b&&r.nodeName(a,b)?r.merge([a],c):c}function na(a,b){for(var c=0,d=a.length;c<d;c++)V.set(a[c],"globalEval",!b||V.get(b[c],"globalEval"))}var oa=/<|&#?\w+;/;function pa(a,b,c,d,e){for(var f,g,h,i,j,k,l=b.createDocumentFragment(),m=[],n=0,o=a.length;n<o;n++)if(f=a[n],f||0===f)if("object"===r.type(f))r.merge(m,f.nodeType?[f]:f);else if(oa.test(f)){g=g||l.appendChild(b.createElement("div")),h=(ja.exec(f)||["",""])[1].toLowerCase(),i=la[h]||la._default,g.innerHTML=i[1]+r.htmlPrefilter(f)+i[2],k=i[0];while(k--)g=g.lastChild;r.merge(m,g.childNodes),g=l.firstChild,g.textContent=""}else m.push(b.createTextNode(f));l.textContent="",n=0;while(f=m[n++])if(d&&r.inArray(f,d)>-1)e&&e.push(f);else if(j=r.contains(f.ownerDocument,f),g=ma(l.appendChild(f),"script"),j&&na(g),c){k=0;while(f=g[k++])ka.test(f.type||"")&&c.push(f)}return l}!function(){var a=d.createDocumentFragment(),b=a.appendChild(d.createElement("div")),c=d.createElement("input");c.setAttribute("type","radio"),c.setAttribute("checked","checked"),c.setAttribute("name","t"),b.appendChild(c),o.checkClone=b.cloneNode(!0).cloneNode(!0).lastChild.checked,b.innerHTML="<textarea>x</textarea>",o.noCloneChecked=!!b.cloneNode(!0).lastChild.defaultValue}();var qa=d.documentElement,ra=/^key/,sa=/^(?:mouse|pointer|contextmenu|drag|drop)|click/,ta=/^([^.]*)(?:\.(.+)|)/;function ua(){return!0}function va(){return!1}function wa(){try{return d.activeElement}catch(a){}}function xa(a,b,c,d,e,f){var g,h;if("object"==typeof b){"string"!=typeof c&&(d=d||c,c=void 0);for(h in b)xa(a,h,c,d,b[h],f);return a}if(null==d&&null==e?(e=c,d=c=void 0):null==e&&("string"==typeof c?(e=d,d=void 0):(e=d,d=c,c=void 0)),e===!1)e=va;else if(!e)return a;return 1===f&&(g=e,e=function(a){return r().off(a),g.apply(this,arguments)},e.guid=g.guid||(g.guid=r.guid++)),a.each(function(){r.event.add(this,b,e,d,c)})}r.event={global:{},add:function(a,b,c,d,e){var f,g,h,i,j,k,l,m,n,o,p,q=V.get(a);if(q){c.handler&&(f=c,c=f.handler,e=f.selector),e&&r.find.matchesSelector(qa,e),c.guid||(c.guid=r.guid++),(i=q.events)||(i=q.events={}),(g=q.handle)||(g=q.handle=function(b){return"undefined"!=typeof r&&r.event.triggered!==b.type?r.event.dispatch.apply(a,arguments):void 0}),b=(b||"").match(K)||[""],j=b.length;while(j--)h=ta.exec(b[j])||[],n=p=h[1],o=(h[2]||"").split(".").sort(),n&&(l=r.event.special[n]||{},n=(e?l.delegateType:l.bindType)||n,l=r.event.special[n]||{},k=r.extend({type:n,origType:p,data:d,handler:c,guid:c.guid,selector:e,needsContext:e&&r.expr.match.needsContext.test(e),namespace:o.join(".")},f),(m=i[n])||(m=i[n]=[],m.delegateCount=0,l.setup&&l.setup.call(a,d,o,g)!==!1||a.addEventListener&&a.addEventListener(n,g)),l.add&&(l.add.call(a,k),k.handler.guid||(k.handler.guid=c.guid)),e?m.splice(m.delegateCount++,0,k):m.push(k),r.event.global[n]=!0)}},remove:function(a,b,c,d,e){var f,g,h,i,j,k,l,m,n,o,p,q=V.hasData(a)&&V.get(a);if(q&&(i=q.events)){b=(b||"").match(K)||[""],j=b.length;while(j--)if(h=ta.exec(b[j])||[],n=p=h[1],o=(h[2]||"").split(".").sort(),n){l=r.event.special[n]||{},n=(d?l.delegateType:l.bindType)||n,m=i[n]||[],h=h[2]&&new RegExp("(^|\\.)"+o.join("\\.(?:.*\\.|)")+"(\\.|$)"),g=f=m.length;while(f--)k=m[f],!e&&p!==k.origType||c&&c.guid!==k.guid||h&&!h.test(k.namespace)||d&&d!==k.selector&&("**"!==d||!k.selector)||(m.splice(f,1),k.selector&&m.delegateCount--,l.remove&&l.remove.call(a,k));g&&!m.length&&(l.teardown&&l.teardown.call(a,o,q.handle)!==!1||r.removeEvent(a,n,q.handle),delete i[n])}else for(n in i)r.event.remove(a,n+b[j],c,d,!0);r.isEmptyObject(i)&&V.remove(a,"handle events")}},dispatch:function(a){var b=r.event.fix(a),c,d,e,f,g,h,i=new Array(arguments.length),j=(V.get(this,"events")||{})[b.type]||[],k=r.event.special[b.type]||{};for(i[0]=b,c=1;c<arguments.length;c++)i[c]=arguments[c];if(b.delegateTarget=this,!k.preDispatch||k.preDispatch.call(this,b)!==!1){h=r.event.handlers.call(this,b,j),c=0;while((f=h[c++])&&!b.isPropagationStopped()){b.currentTarget=f.elem,d=0;while((g=f.handlers[d++])&&!b.isImmediatePropagationStopped())b.rnamespace&&!b.rnamespace.test(g.namespace)||(b.handleObj=g,b.data=g.data,e=((r.event.special[g.origType]||{}).handle||g.handler).apply(f.elem,i),void 0!==e&&(b.result=e)===!1&&(b.preventDefault(),b.stopPropagation()))}return k.postDispatch&&k.postDispatch.call(this,b),b.result}},handlers:function(a,b){var c,d,e,f,g,h=[],i=b.delegateCount,j=a.target;if(i&&j.nodeType&&!("click"===a.type&&a.button>=1))for(;j!==this;j=j.parentNode||this)if(1===j.nodeType&&("click"!==a.type||j.disabled!==!0)){for(f=[],g={},c=0;c<i;c++)d=b[c],e=d.selector+" ",void 0===g[e]&&(g[e]=d.needsContext?r(e,this).index(j)>-1:r.find(e,this,null,[j]).length),g[e]&&f.push(d);f.length&&h.push({elem:j,handlers:f})}return j=this,i<b.length&&h.push({elem:j,handlers:b.slice(i)}),h},addProp:function(a,b){Object.defineProperty(r.Event.prototype,a,{enumerable:!0,configurable:!0,get:r.isFunction(b)?function(){if(this.originalEvent)return b(this.originalEvent)}:function(){if(this.originalEvent)return this.originalEvent[a]},set:function(b){Object.defineProperty(this,a,{enumerable:!0,configurable:!0,writable:!0,value:b})}})},fix:function(a){return a[r.expando]?a:new r.Event(a)},special:{load:{noBubble:!0},focus:{trigger:function(){if(this!==wa()&&this.focus)return this.focus(),!1},delegateType:"focusin"},blur:{trigger:function(){if(this===wa()&&this.blur)return this.blur(),!1},delegateType:"focusout"},click:{trigger:function(){if("checkbox"===this.type&&this.click&&r.nodeName(this,"input"))return this.click(),!1},_default:function(a){return r.nodeName(a.target,"a")}},beforeunload:{postDispatch:function(a){void 0!==a.result&&a.originalEvent&&(a.originalEvent.returnValue=a.result)}}}},r.removeEvent=function(a,b,c){a.removeEventListener&&a.removeEventListener(b,c)},r.Event=function(a,b){return this instanceof r.Event?(a&&a.type?(this.originalEvent=a,this.type=a.type,this.isDefaultPrevented=a.defaultPrevented||void 0===a.defaultPrevented&&a.returnValue===!1?ua:va,this.target=a.target&&3===a.target.nodeType?a.target.parentNode:a.target,this.currentTarget=a.currentTarget,this.relatedTarget=a.relatedTarget):this.type=a,b&&r.extend(this,b),this.timeStamp=a&&a.timeStamp||r.now(),void(this[r.expando]=!0)):new r.Event(a,b)},r.Event.prototype={constructor:r.Event,isDefaultPrevented:va,isPropagationStopped:va,isImmediatePropagationStopped:va,isSimulated:!1,preventDefault:function(){var a=this.originalEvent;this.isDefaultPrevented=ua,a&&!this.isSimulated&&a.preventDefault()},stopPropagation:function(){var a=this.originalEvent;this.isPropagationStopped=ua,a&&!this.isSimulated&&a.stopPropagation()},stopImmediatePropagation:function(){var a=this.originalEvent;this.isImmediatePropagationStopped=ua,a&&!this.isSimulated&&a.stopImmediatePropagation(),this.stopPropagation()}},r.each({altKey:!0,bubbles:!0,cancelable:!0,changedTouches:!0,ctrlKey:!0,detail:!0,eventPhase:!0,metaKey:!0,pageX:!0,pageY:!0,shiftKey:!0,view:!0,"char":!0,charCode:!0,key:!0,keyCode:!0,button:!0,buttons:!0,clientX:!0,clientY:!0,offsetX:!0,offsetY:!0,pointerId:!0,pointerType:!0,screenX:!0,screenY:!0,targetTouches:!0,toElement:!0,touches:!0,which:function(a){var b=a.button;return null==a.which&&ra.test(a.type)?null!=a.charCode?a.charCode:a.keyCode:!a.which&&void 0!==b&&sa.test(a.type)?1&b?1:2&b?3:4&b?2:0:a.which}},r.event.addProp),r.each({mouseenter:"mouseover",mouseleave:"mouseout",pointerenter:"pointerover",pointerleave:"pointerout"},function(a,b){r.event.special[a]={delegateType:b,bindType:b,handle:function(a){var c,d=this,e=a.relatedTarget,f=a.handleObj;return e&&(e===d||r.contains(d,e))||(a.type=f.origType,c=f.handler.apply(this,arguments),a.type=b),c}}}),r.fn.extend({on:function(a,b,c,d){return xa(this,a,b,c,d)},one:function(a,b,c,d){return xa(this,a,b,c,d,1)},off:function(a,b,c){var d,e;if(a&&a.preventDefault&&a.handleObj)return d=a.handleObj,r(a.delegateTarget).off(d.namespace?d.origType+"."+d.namespace:d.origType,d.selector,d.handler),this;if("object"==typeof a){for(e in a)this.off(e,b,a[e]);return this}return b!==!1&&"function"!=typeof b||(c=b,b=void 0),c===!1&&(c=va),this.each(function(){r.event.remove(this,a,c,b)})}});var ya=/<(?!area|br|col|embed|hr|img|input|link|meta|param)(([a-z][^\/\0>\x20\t\r\n\f]*)[^>]*)\/>/gi,za=/<script|<style|<link/i,Aa=/checked\s*(?:[^=]|=\s*.checked.)/i,Ba=/^true\/(.*)/,Ca=/^\s*<!(?:\[CDATA\[|--)|(?:\]\]|--)>\s*$/g;function Da(a,b){return r.nodeName(a,"table")&&r.nodeName(11!==b.nodeType?b:b.firstChild,"tr")?a.getElementsByTagName("tbody")[0]||a:a}function Ea(a){return a.type=(null!==a.getAttribute("type"))+"/"+a.type,a}function Fa(a){var b=Ba.exec(a.type);return b?a.type=b[1]:a.removeAttribute("type"),a}function Ga(a,b){var c,d,e,f,g,h,i,j;if(1===b.nodeType){if(V.hasData(a)&&(f=V.access(a),g=V.set(b,f),j=f.events)){delete g.handle,g.events={};for(e in j)for(c=0,d=j[e].length;c<d;c++)r.event.add(b,e,j[e][c])}W.hasData(a)&&(h=W.access(a),i=r.extend({},h),W.set(b,i))}}function Ha(a,b){var c=b.nodeName.toLowerCase();"input"===c&&ia.test(a.type)?b.checked=a.checked:"input"!==c&&"textarea"!==c||(b.defaultValue=a.defaultValue)}function Ia(a,b,c,d){b=g.apply([],b);var e,f,h,i,j,k,l=0,m=a.length,n=m-1,q=b[0],s=r.isFunction(q);if(s||m>1&&"string"==typeof q&&!o.checkClone&&Aa.test(q))return a.each(function(e){var f=a.eq(e);s&&(b[0]=q.call(this,e,f.html())),Ia(f,b,c,d)});if(m&&(e=pa(b,a[0].ownerDocument,!1,a,d),f=e.firstChild,1===e.childNodes.length&&(e=f),f||d)){for(h=r.map(ma(e,"script"),Ea),i=h.length;l<m;l++)j=e,l!==n&&(j=r.clone(j,!0,!0),i&&r.merge(h,ma(j,"script"))),c.call(a[l],j,l);if(i)for(k=h[h.length-1].ownerDocument,r.map(h,Fa),l=0;l<i;l++)j=h[l],ka.test(j.type||"")&&!V.access(j,"globalEval")&&r.contains(k,j)&&(j.src?r._evalUrl&&r._evalUrl(j.src):p(j.textContent.replace(Ca,""),k))}return a}function Ja(a,b,c){for(var d,e=b?r.filter(b,a):a,f=0;null!=(d=e[f]);f++)c||1!==d.nodeType||r.cleanData(ma(d)),d.parentNode&&(c&&r.contains(d.ownerDocument,d)&&na(ma(d,"script")),d.parentNode.removeChild(d));return a}r.extend({htmlPrefilter:function(a){return a.replace(ya,"<$1></$2>")},clone:function(a,b,c){var d,e,f,g,h=a.cloneNode(!0),i=r.contains(a.ownerDocument,a);if(!(o.noCloneChecked||1!==a.nodeType&&11!==a.nodeType||r.isXMLDoc(a)))for(g=ma(h),f=ma(a),d=0,e=f.length;d<e;d++)Ha(f[d],g[d]);if(b)if(c)for(f=f||ma(a),g=g||ma(h),d=0,e=f.length;d<e;d++)Ga(f[d],g[d]);else Ga(a,h);return g=ma(h,"script"),g.length>0&&na(g,!i&&ma(a,"script")),h},cleanData:function(a){for(var b,c,d,e=r.event.special,f=0;void 0!==(c=a[f]);f++)if(T(c)){if(b=c[V.expando]){if(b.events)for(d in b.events)e[d]?r.event.remove(c,d):r.removeEvent(c,d,b.handle);c[V.expando]=void 0}c[W.expando]&&(c[W.expando]=void 0)}}}),r.fn.extend({detach:function(a){return Ja(this,a,!0)},remove:function(a){return Ja(this,a)},text:function(a){return S(this,function(a){return void 0===a?r.text(this):this.empty().each(function(){1!==this.nodeType&&11!==this.nodeType&&9!==this.nodeType||(this.textContent=a)})},null,a,arguments.length)},append:function(){return Ia(this,arguments,function(a){if(1===this.nodeType||11===this.nodeType||9===this.nodeType){var b=Da(this,a);b.appendChild(a)}})},prepend:function(){return Ia(this,arguments,function(a){if(1===this.nodeType||11===this.nodeType||9===this.nodeType){var b=Da(this,a);b.insertBefore(a,b.firstChild)}})},before:function(){return Ia(this,arguments,function(a){this.parentNode&&this.parentNode.insertBefore(a,this)})},after:function(){return Ia(this,arguments,function(a){this.parentNode&&this.parentNode.insertBefore(a,this.nextSibling)})},empty:function(){for(var a,b=0;null!=(a=this[b]);b++)1===a.nodeType&&(r.cleanData(ma(a,!1)),a.textContent="");return this},clone:function(a,b){return a=null!=a&&a,b=null==b?a:b,this.map(function(){return r.clone(this,a,b)})},html:function(a){return S(this,function(a){var b=this[0]||{},c=0,d=this.length;if(void 0===a&&1===b.nodeType)return b.innerHTML;if("string"==typeof a&&!za.test(a)&&!la[(ja.exec(a)||["",""])[1].toLowerCase()]){a=r.htmlPrefilter(a);try{for(;c<d;c++)b=this[c]||{},1===b.nodeType&&(r.cleanData(ma(b,!1)),b.innerHTML=a);b=0}catch(e){}}b&&this.empty().append(a)},null,a,arguments.length)},replaceWith:function(){var a=[];return Ia(this,arguments,function(b){var c=this.parentNode;r.inArray(this,a)<0&&(r.cleanData(ma(this)),c&&c.replaceChild(b,this))},a)}}),r.each({appendTo:"append",prependTo:"prepend",insertBefore:"before",insertAfter:"after",replaceAll:"replaceWith"},function(a,b){r.fn[a]=function(a){for(var c,d=[],e=r(a),f=e.length-1,g=0;g<=f;g++)c=g===f?this:this.clone(!0),r(e[g])[b](c),h.apply(d,c.get());return this.pushStack(d)}});var Ka=/^margin/,La=new RegExp("^("+_+")(?!px)[a-z%]+$","i"),Ma=function(b){var c=b.ownerDocument.defaultView;return c&&c.opener||(c=a),c.getComputedStyle(b)};!function(){function b(){if(i){i.style.cssText="box-sizing:border-box;position:relative;display:block;margin:auto;border:1px;padding:1px;top:1%;width:50%",i.innerHTML="",qa.appendChild(h);var b=a.getComputedStyle(i);c="1%"!==b.top,g="2px"===b.marginLeft,e="4px"===b.width,i.style.marginRight="50%",f="4px"===b.marginRight,qa.removeChild(h),i=null}}var c,e,f,g,h=d.createElement("div"),i=d.createElement("div");i.style&&(i.style.backgroundClip="content-box",i.cloneNode(!0).style.backgroundClip="",o.clearCloneStyle="content-box"===i.style.backgroundClip,h.style.cssText="border:0;width:8px;height:0;top:0;left:-9999px;padding:0;margin-top:1px;position:absolute",h.appendChild(i),r.extend(o,{pixelPosition:function(){return b(),c},boxSizingReliable:function(){return b(),e},pixelMarginRight:function(){return b(),f},reliableMarginLeft:function(){return b(),g}}))}();function Na(a,b,c){var d,e,f,g,h=a.style;return c=c||Ma(a),c&&(g=c.getPropertyValue(b)||c[b],""!==g||r.contains(a.ownerDocument,a)||(g=r.style(a,b)),!o.pixelMarginRight()&&La.test(g)&&Ka.test(b)&&(d=h.width,e=h.minWidth,f=h.maxWidth,h.minWidth=h.maxWidth=h.width=g,g=c.width,h.width=d,h.minWidth=e,h.maxWidth=f)),void 0!==g?g+"":g}function Oa(a,b){return{get:function(){return a()?void delete this.get:(this.get=b).apply(this,arguments)}}}var Pa=/^(none|table(?!-c[ea]).+)/,Qa={position:"absolute",visibility:"hidden",display:"block"},Ra={letterSpacing:"0",fontWeight:"400"},Sa=["Webkit","Moz","ms"],Ta=d.createElement("div").style;function Ua(a){if(a in Ta)return a;var b=a[0].toUpperCase()+a.slice(1),c=Sa.length;while(c--)if(a=Sa[c]+b,a in Ta)return a}function Va(a,b,c){var d=aa.exec(b);return d?Math.max(0,d[2]-(c||0))+(d[3]||"px"):b}function Wa(a,b,c,d,e){var f,g=0;for(f=c===(d?"border":"content")?4:"width"===b?1:0;f<4;f+=2)"margin"===c&&(g+=r.css(a,c+ba[f],!0,e)),d?("content"===c&&(g-=r.css(a,"padding"+ba[f],!0,e)),"margin"!==c&&(g-=r.css(a,"border"+ba[f]+"Width",!0,e))):(g+=r.css(a,"padding"+ba[f],!0,e),"padding"!==c&&(g+=r.css(a,"border"+ba[f]+"Width",!0,e)));return g}function Xa(a,b,c){var d,e=!0,f=Ma(a),g="border-box"===r.css(a,"boxSizing",!1,f);if(a.getClientRects().length&&(d=a.getBoundingClientRect()[b]),d<=0||null==d){if(d=Na(a,b,f),(d<0||null==d)&&(d=a.style[b]),La.test(d))return d;e=g&&(o.boxSizingReliable()||d===a.style[b]),d=parseFloat(d)||0}return d+Wa(a,b,c||(g?"border":"content"),e,f)+"px"}r.extend({cssHooks:{opacity:{get:function(a,b){if(b){var c=Na(a,"opacity");return""===c?"1":c}}}},cssNumber:{animationIterationCount:!0,columnCount:!0,fillOpacity:!0,flexGrow:!0,flexShrink:!0,fontWeight:!0,lineHeight:!0,opacity:!0,order:!0,orphans:!0,widows:!0,zIndex:!0,zoom:!0},cssProps:{"float":"cssFloat"},style:function(a,b,c,d){if(a&&3!==a.nodeType&&8!==a.nodeType&&a.style){var e,f,g,h=r.camelCase(b),i=a.style;return b=r.cssProps[h]||(r.cssProps[h]=Ua(h)||h),g=r.cssHooks[b]||r.cssHooks[h],void 0===c?g&&"get"in g&&void 0!==(e=g.get(a,!1,d))?e:i[b]:(f=typeof c,"string"===f&&(e=aa.exec(c))&&e[1]&&(c=ea(a,b,e),f="number"),null!=c&&c===c&&("number"===f&&(c+=e&&e[3]||(r.cssNumber[h]?"":"px")),o.clearCloneStyle||""!==c||0!==b.indexOf("background")||(i[b]="inherit"),g&&"set"in g&&void 0===(c=g.set(a,c,d))||(i[b]=c)),void 0)}},css:function(a,b,c,d){var e,f,g,h=r.camelCase(b);return b=r.cssProps[h]||(r.cssProps[h]=Ua(h)||h),g=r.cssHooks[b]||r.cssHooks[h],g&&"get"in g&&(e=g.get(a,!0,c)),void 0===e&&(e=Na(a,b,d)),"normal"===e&&b in Ra&&(e=Ra[b]),""===c||c?(f=parseFloat(e),c===!0||isFinite(f)?f||0:e):e}}),r.each(["height","width"],function(a,b){r.cssHooks[b]={get:function(a,c,d){if(c)return!Pa.test(r.css(a,"display"))||a.getClientRects().length&&a.getBoundingClientRect().width?Xa(a,b,d):da(a,Qa,function(){return Xa(a,b,d)})},set:function(a,c,d){var e,f=d&&Ma(a),g=d&&Wa(a,b,d,"border-box"===r.css(a,"boxSizing",!1,f),f);return g&&(e=aa.exec(c))&&"px"!==(e[3]||"px")&&(a.style[b]=c,c=r.css(a,b)),Va(a,c,g)}}}),r.cssHooks.marginLeft=Oa(o.reliableMarginLeft,function(a,b){if(b)return(parseFloat(Na(a,"marginLeft"))||a.getBoundingClientRect().left-da(a,{marginLeft:0},function(){return a.getBoundingClientRect().left}))+"px"}),r.each({margin:"",padding:"",border:"Width"},function(a,b){r.cssHooks[a+b]={expand:function(c){for(var d=0,e={},f="string"==typeof c?c.split(" "):[c];d<4;d++)e[a+ba[d]+b]=f[d]||f[d-2]||f[0];return e}},Ka.test(a)||(r.cssHooks[a+b].set=Va)}),r.fn.extend({css:function(a,b){return S(this,function(a,b,c){var d,e,f={},g=0;if(r.isArray(b)){for(d=Ma(a),e=b.length;g<e;g++)f[b[g]]=r.css(a,b[g],!1,d);return f}return void 0!==c?r.style(a,b,c):r.css(a,b)},a,b,arguments.length>1)}});function Ya(a,b,c,d,e){return new Ya.prototype.init(a,b,c,d,e)}r.Tween=Ya,Ya.prototype={constructor:Ya,init:function(a,b,c,d,e,f){this.elem=a,this.prop=c,this.easing=e||r.easing._default,this.options=b,this.start=this.now=this.cur(),this.end=d,this.unit=f||(r.cssNumber[c]?"":"px")},cur:function(){var a=Ya.propHooks[this.prop];return a&&a.get?a.get(this):Ya.propHooks._default.get(this)},run:function(a){var b,c=Ya.propHooks[this.prop];return this.options.duration?this.pos=b=r.easing[this.easing](a,this.options.duration*a,0,1,this.options.duration):this.pos=b=a,this.now=(this.end-this.start)*b+this.start,this.options.step&&this.options.step.call(this.elem,this.now,this),c&&c.set?c.set(this):Ya.propHooks._default.set(this),this}},Ya.prototype.init.prototype=Ya.prototype,Ya.propHooks={_default:{get:function(a){var b;return 1!==a.elem.nodeType||null!=a.elem[a.prop]&&null==a.elem.style[a.prop]?a.elem[a.prop]:(b=r.css(a.elem,a.prop,""),b&&"auto"!==b?b:0)},set:function(a){r.fx.step[a.prop]?r.fx.step[a.prop](a):1!==a.elem.nodeType||null==a.elem.style[r.cssProps[a.prop]]&&!r.cssHooks[a.prop]?a.elem[a.prop]=a.now:r.style(a.elem,a.prop,a.now+a.unit)}}},Ya.propHooks.scrollTop=Ya.propHooks.scrollLeft={set:function(a){a.elem.nodeType&&a.elem.parentNode&&(a.elem[a.prop]=a.now)}},r.easing={linear:function(a){return a},swing:function(a){return.5-Math.cos(a*Math.PI)/2},_default:"swing"},r.fx=Ya.prototype.init,r.fx.step={};var Za,$a,_a=/^(?:toggle|show|hide)$/,ab=/queueHooks$/;function bb(){$a&&(a.requestAnimationFrame(bb),r.fx.tick())}function cb(){return a.setTimeout(function(){Za=void 0}),Za=r.now()}function db(a,b){var c,d=0,e={height:a};for(b=b?1:0;d<4;d+=2-b)c=ba[d],e["margin"+c]=e["padding"+c]=a;return b&&(e.opacity=e.width=a),e}function eb(a,b,c){for(var d,e=(hb.tweeners[b]||[]).concat(hb.tweeners["*"]),f=0,g=e.length;f<g;f++)if(d=e[f].call(c,b,a))return d}function fb(a,b,c){var d,e,f,g,h,i,j,k,l="width"in b||"height"in b,m=this,n={},o=a.style,p=a.nodeType&&ca(a),q=V.get(a,"fxshow");c.queue||(g=r._queueHooks(a,"fx"),null==g.unqueued&&(g.unqueued=0,h=g.empty.fire,g.empty.fire=function(){g.unqueued||h()}),g.unqueued++,m.always(function(){m.always(function(){g.unqueued--,r.queue(a,"fx").length||g.empty.fire()})}));for(d in b)if(e=b[d],_a.test(e)){if(delete b[d],f=f||"toggle"===e,e===(p?"hide":"show")){if("show"!==e||!q||void 0===q[d])continue;p=!0}n[d]=q&&q[d]||r.style(a,d)}if(i=!r.isEmptyObject(b),i||!r.isEmptyObject(n)){l&&1===a.nodeType&&(c.overflow=[o.overflow,o.overflowX,o.overflowY],j=q&&q.display,null==j&&(j=V.get(a,"display")),k=r.css(a,"display"),"none"===k&&(j?k=j:(ha([a],!0),j=a.style.display||j,k=r.css(a,"display"),ha([a]))),("inline"===k||"inline-block"===k&&null!=j)&&"none"===r.css(a,"float")&&(i||(m.done(function(){o.display=j}),null==j&&(k=o.display,j="none"===k?"":k)),o.display="inline-block")),c.overflow&&(o.overflow="hidden",m.always(function(){o.overflow=c.overflow[0],o.overflowX=c.overflow[1],o.overflowY=c.overflow[2]})),i=!1;for(d in n)i||(q?"hidden"in q&&(p=q.hidden):q=V.access(a,"fxshow",{display:j}),f&&(q.hidden=!p),p&&ha([a],!0),m.done(function(){p||ha([a]),V.remove(a,"fxshow");for(d in n)r.style(a,d,n[d])})),i=eb(p?q[d]:0,d,m),d in q||(q[d]=i.start,p&&(i.end=i.start,i.start=0))}}function gb(a,b){var c,d,e,f,g;for(c in a)if(d=r.camelCase(c),e=b[d],f=a[c],r.isArray(f)&&(e=f[1],f=a[c]=f[0]),c!==d&&(a[d]=f,delete a[c]),g=r.cssHooks[d],g&&"expand"in g){f=g.expand(f),delete a[d];for(c in f)c in a||(a[c]=f[c],b[c]=e)}else b[d]=e}function hb(a,b,c){var d,e,f=0,g=hb.prefilters.length,h=r.Deferred().always(function(){delete i.elem}),i=function(){if(e)return!1;for(var b=Za||cb(),c=Math.max(0,j.startTime+j.duration-b),d=c/j.duration||0,f=1-d,g=0,i=j.tweens.length;g<i;g++)j.tweens[g].run(f);return h.notifyWith(a,[j,f,c]),f<1&&i?c:(h.resolveWith(a,[j]),!1)},j=h.promise({elem:a,props:r.extend({},b),opts:r.extend(!0,{specialEasing:{},easing:r.easing._default},c),originalProperties:b,originalOptions:c,startTime:Za||cb(),duration:c.duration,tweens:[],createTween:function(b,c){var d=r.Tween(a,j.opts,b,c,j.opts.specialEasing[b]||j.opts.easing);return j.tweens.push(d),d},stop:function(b){var c=0,d=b?j.tweens.length:0;if(e)return this;for(e=!0;c<d;c++)j.tweens[c].run(1);return b?(h.notifyWith(a,[j,1,0]),h.resolveWith(a,[j,b])):h.rejectWith(a,[j,b]),this}}),k=j.props;for(gb(k,j.opts.specialEasing);f<g;f++)if(d=hb.prefilters[f].call(j,a,k,j.opts))return r.isFunction(d.stop)&&(r._queueHooks(j.elem,j.opts.queue).stop=r.proxy(d.stop,d)),d;return r.map(k,eb,j),r.isFunction(j.opts.start)&&j.opts.start.call(a,j),r.fx.timer(r.extend(i,{elem:a,anim:j,queue:j.opts.queue})),j.progress(j.opts.progress).done(j.opts.done,j.opts.complete).fail(j.opts.fail).always(j.opts.always)}r.Animation=r.extend(hb,{tweeners:{"*":[function(a,b){var c=this.createTween(a,b);return ea(c.elem,a,aa.exec(b),c),c}]},tweener:function(a,b){r.isFunction(a)?(b=a,a=["*"]):a=a.match(K);for(var c,d=0,e=a.length;d<e;d++)c=a[d],hb.tweeners[c]=hb.tweeners[c]||[],hb.tweeners[c].unshift(b)},prefilters:[fb],prefilter:function(a,b){b?hb.prefilters.unshift(a):hb.prefilters.push(a)}}),r.speed=function(a,b,c){var e=a&&"object"==typeof a?r.extend({},a):{complete:c||!c&&b||r.isFunction(a)&&a,duration:a,easing:c&&b||b&&!r.isFunction(b)&&b};return r.fx.off||d.hidden?e.duration=0:"number"!=typeof e.duration&&(e.duration in r.fx.speeds?e.duration=r.fx.speeds[e.duration]:e.duration=r.fx.speeds._default),null!=e.queue&&e.queue!==!0||(e.queue="fx"),e.old=e.complete,e.complete=function(){r.isFunction(e.old)&&e.old.call(this),e.queue&&r.dequeue(this,e.queue)},e},r.fn.extend({fadeTo:function(a,b,c,d){return this.filter(ca).css("opacity",0).show().end().animate({opacity:b},a,c,d)},animate:function(a,b,c,d){var e=r.isEmptyObject(a),f=r.speed(b,c,d),g=function(){var b=hb(this,r.extend({},a),f);(e||V.get(this,"finish"))&&b.stop(!0)};return g.finish=g,e||f.queue===!1?this.each(g):this.queue(f.queue,g)},stop:function(a,b,c){var d=function(a){var b=a.stop;delete a.stop,b(c)};return"string"!=typeof a&&(c=b,b=a,a=void 0),b&&a!==!1&&this.queue(a||"fx",[]),this.each(function(){var b=!0,e=null!=a&&a+"queueHooks",f=r.timers,g=V.get(this);if(e)g[e]&&g[e].stop&&d(g[e]);else for(e in g)g[e]&&g[e].stop&&ab.test(e)&&d(g[e]);for(e=f.length;e--;)f[e].elem!==this||null!=a&&f[e].queue!==a||(f[e].anim.stop(c),b=!1,f.splice(e,1));!b&&c||r.dequeue(this,a)})},finish:function(a){return a!==!1&&(a=a||"fx"),this.each(function(){var b,c=V.get(this),d=c[a+"queue"],e=c[a+"queueHooks"],f=r.timers,g=d?d.length:0;for(c.finish=!0,r.queue(this,a,[]),e&&e.stop&&e.stop.call(this,!0),b=f.length;b--;)f[b].elem===this&&f[b].queue===a&&(f[b].anim.stop(!0),f.splice(b,1));for(b=0;b<g;b++)d[b]&&d[b].finish&&d[b].finish.call(this);delete c.finish})}}),r.each(["toggle","show","hide"],function(a,b){var c=r.fn[b];r.fn[b]=function(a,d,e){return null==a||"boolean"==typeof a?c.apply(this,arguments):this.animate(db(b,!0),a,d,e)}}),r.each({slideDown:db("show"),slideUp:db("hide"),slideToggle:db("toggle"),fadeIn:{opacity:"show"},fadeOut:{opacity:"hide"},fadeToggle:{opacity:"toggle"}},function(a,b){r.fn[a]=function(a,c,d){return this.animate(b,a,c,d)}}),r.timers=[],r.fx.tick=function(){var a,b=0,c=r.timers;for(Za=r.now();b<c.length;b++)a=c[b],a()||c[b]!==a||c.splice(b--,1);c.length||r.fx.stop(),Za=void 0},r.fx.timer=function(a){r.timers.push(a),a()?r.fx.start():r.timers.pop()},r.fx.interval=13,r.fx.start=function(){$a||($a=a.requestAnimationFrame?a.requestAnimationFrame(bb):a.setInterval(r.fx.tick,r.fx.interval))},r.fx.stop=function(){a.cancelAnimationFrame?a.cancelAnimationFrame($a):a.clearInterval($a),$a=null},r.fx.speeds={slow:600,fast:200,_default:400},r.fn.delay=function(b,c){return b=r.fx?r.fx.speeds[b]||b:b,c=c||"fx",this.queue(c,function(c,d){var e=a.setTimeout(c,b);d.stop=function(){a.clearTimeout(e)}})},function(){var a=d.createElement("input"),b=d.createElement("select"),c=b.appendChild(d.createElement("option"));a.type="checkbox",o.checkOn=""!==a.value,o.optSelected=c.selected,a=d.createElement("input"),a.value="t",a.type="radio",o.radioValue="t"===a.value}();var ib,jb=r.expr.attrHandle;r.fn.extend({attr:function(a,b){return S(this,r.attr,a,b,arguments.length>1)},removeAttr:function(a){return this.each(function(){r.removeAttr(this,a)})}}),r.extend({attr:function(a,b,c){var d,e,f=a.nodeType;if(3!==f&&8!==f&&2!==f)return"undefined"==typeof a.getAttribute?r.prop(a,b,c):(1===f&&r.isXMLDoc(a)||(e=r.attrHooks[b.toLowerCase()]||(r.expr.match.bool.test(b)?ib:void 0)),
+void 0!==c?null===c?void r.removeAttr(a,b):e&&"set"in e&&void 0!==(d=e.set(a,c,b))?d:(a.setAttribute(b,c+""),c):e&&"get"in e&&null!==(d=e.get(a,b))?d:(d=r.find.attr(a,b),null==d?void 0:d))},attrHooks:{type:{set:function(a,b){if(!o.radioValue&&"radio"===b&&r.nodeName(a,"input")){var c=a.value;return a.setAttribute("type",b),c&&(a.value=c),b}}}},removeAttr:function(a,b){var c,d=0,e=b&&b.match(K);if(e&&1===a.nodeType)while(c=e[d++])a.removeAttribute(c)}}),ib={set:function(a,b,c){return b===!1?r.removeAttr(a,c):a.setAttribute(c,c),c}},r.each(r.expr.match.bool.source.match(/\w+/g),function(a,b){var c=jb[b]||r.find.attr;jb[b]=function(a,b,d){var e,f,g=b.toLowerCase();return d||(f=jb[g],jb[g]=e,e=null!=c(a,b,d)?g:null,jb[g]=f),e}});var kb=/^(?:input|select|textarea|button)$/i,lb=/^(?:a|area)$/i;r.fn.extend({prop:function(a,b){return S(this,r.prop,a,b,arguments.length>1)},removeProp:function(a){return this.each(function(){delete this[r.propFix[a]||a]})}}),r.extend({prop:function(a,b,c){var d,e,f=a.nodeType;if(3!==f&&8!==f&&2!==f)return 1===f&&r.isXMLDoc(a)||(b=r.propFix[b]||b,e=r.propHooks[b]),void 0!==c?e&&"set"in e&&void 0!==(d=e.set(a,c,b))?d:a[b]=c:e&&"get"in e&&null!==(d=e.get(a,b))?d:a[b]},propHooks:{tabIndex:{get:function(a){var b=r.find.attr(a,"tabindex");return b?parseInt(b,10):kb.test(a.nodeName)||lb.test(a.nodeName)&&a.href?0:-1}}},propFix:{"for":"htmlFor","class":"className"}}),o.optSelected||(r.propHooks.selected={get:function(a){var b=a.parentNode;return b&&b.parentNode&&b.parentNode.selectedIndex,null},set:function(a){var b=a.parentNode;b&&(b.selectedIndex,b.parentNode&&b.parentNode.selectedIndex)}}),r.each(["tabIndex","readOnly","maxLength","cellSpacing","cellPadding","rowSpan","colSpan","useMap","frameBorder","contentEditable"],function(){r.propFix[this.toLowerCase()]=this});function mb(a){var b=a.match(K)||[];return b.join(" ")}function nb(a){return a.getAttribute&&a.getAttribute("class")||""}r.fn.extend({addClass:function(a){var b,c,d,e,f,g,h,i=0;if(r.isFunction(a))return this.each(function(b){r(this).addClass(a.call(this,b,nb(this)))});if("string"==typeof a&&a){b=a.match(K)||[];while(c=this[i++])if(e=nb(c),d=1===c.nodeType&&" "+mb(e)+" "){g=0;while(f=b[g++])d.indexOf(" "+f+" ")<0&&(d+=f+" ");h=mb(d),e!==h&&c.setAttribute("class",h)}}return this},removeClass:function(a){var b,c,d,e,f,g,h,i=0;if(r.isFunction(a))return this.each(function(b){r(this).removeClass(a.call(this,b,nb(this)))});if(!arguments.length)return this.attr("class","");if("string"==typeof a&&a){b=a.match(K)||[];while(c=this[i++])if(e=nb(c),d=1===c.nodeType&&" "+mb(e)+" "){g=0;while(f=b[g++])while(d.indexOf(" "+f+" ")>-1)d=d.replace(" "+f+" "," ");h=mb(d),e!==h&&c.setAttribute("class",h)}}return this},toggleClass:function(a,b){var c=typeof a;return"boolean"==typeof b&&"string"===c?b?this.addClass(a):this.removeClass(a):r.isFunction(a)?this.each(function(c){r(this).toggleClass(a.call(this,c,nb(this),b),b)}):this.each(function(){var b,d,e,f;if("string"===c){d=0,e=r(this),f=a.match(K)||[];while(b=f[d++])e.hasClass(b)?e.removeClass(b):e.addClass(b)}else void 0!==a&&"boolean"!==c||(b=nb(this),b&&V.set(this,"__className__",b),this.setAttribute&&this.setAttribute("class",b||a===!1?"":V.get(this,"__className__")||""))})},hasClass:function(a){var b,c,d=0;b=" "+a+" ";while(c=this[d++])if(1===c.nodeType&&(" "+mb(nb(c))+" ").indexOf(b)>-1)return!0;return!1}});var ob=/\r/g;r.fn.extend({val:function(a){var b,c,d,e=this[0];{if(arguments.length)return d=r.isFunction(a),this.each(function(c){var e;1===this.nodeType&&(e=d?a.call(this,c,r(this).val()):a,null==e?e="":"number"==typeof e?e+="":r.isArray(e)&&(e=r.map(e,function(a){return null==a?"":a+""})),b=r.valHooks[this.type]||r.valHooks[this.nodeName.toLowerCase()],b&&"set"in b&&void 0!==b.set(this,e,"value")||(this.value=e))});if(e)return b=r.valHooks[e.type]||r.valHooks[e.nodeName.toLowerCase()],b&&"get"in b&&void 0!==(c=b.get(e,"value"))?c:(c=e.value,"string"==typeof c?c.replace(ob,""):null==c?"":c)}}}),r.extend({valHooks:{option:{get:function(a){var b=r.find.attr(a,"value");return null!=b?b:mb(r.text(a))}},select:{get:function(a){var b,c,d,e=a.options,f=a.selectedIndex,g="select-one"===a.type,h=g?null:[],i=g?f+1:e.length;for(d=f<0?i:g?f:0;d<i;d++)if(c=e[d],(c.selected||d===f)&&!c.disabled&&(!c.parentNode.disabled||!r.nodeName(c.parentNode,"optgroup"))){if(b=r(c).val(),g)return b;h.push(b)}return h},set:function(a,b){var c,d,e=a.options,f=r.makeArray(b),g=e.length;while(g--)d=e[g],(d.selected=r.inArray(r.valHooks.option.get(d),f)>-1)&&(c=!0);return c||(a.selectedIndex=-1),f}}}}),r.each(["radio","checkbox"],function(){r.valHooks[this]={set:function(a,b){if(r.isArray(b))return a.checked=r.inArray(r(a).val(),b)>-1}},o.checkOn||(r.valHooks[this].get=function(a){return null===a.getAttribute("value")?"on":a.value})});var pb=/^(?:focusinfocus|focusoutblur)$/;r.extend(r.event,{trigger:function(b,c,e,f){var g,h,i,j,k,m,n,o=[e||d],p=l.call(b,"type")?b.type:b,q=l.call(b,"namespace")?b.namespace.split("."):[];if(h=i=e=e||d,3!==e.nodeType&&8!==e.nodeType&&!pb.test(p+r.event.triggered)&&(p.indexOf(".")>-1&&(q=p.split("."),p=q.shift(),q.sort()),k=p.indexOf(":")<0&&"on"+p,b=b[r.expando]?b:new r.Event(p,"object"==typeof b&&b),b.isTrigger=f?2:3,b.namespace=q.join("."),b.rnamespace=b.namespace?new RegExp("(^|\\.)"+q.join("\\.(?:.*\\.|)")+"(\\.|$)"):null,b.result=void 0,b.target||(b.target=e),c=null==c?[b]:r.makeArray(c,[b]),n=r.event.special[p]||{},f||!n.trigger||n.trigger.apply(e,c)!==!1)){if(!f&&!n.noBubble&&!r.isWindow(e)){for(j=n.delegateType||p,pb.test(j+p)||(h=h.parentNode);h;h=h.parentNode)o.push(h),i=h;i===(e.ownerDocument||d)&&o.push(i.defaultView||i.parentWindow||a)}g=0;while((h=o[g++])&&!b.isPropagationStopped())b.type=g>1?j:n.bindType||p,m=(V.get(h,"events")||{})[b.type]&&V.get(h,"handle"),m&&m.apply(h,c),m=k&&h[k],m&&m.apply&&T(h)&&(b.result=m.apply(h,c),b.result===!1&&b.preventDefault());return b.type=p,f||b.isDefaultPrevented()||n._default&&n._default.apply(o.pop(),c)!==!1||!T(e)||k&&r.isFunction(e[p])&&!r.isWindow(e)&&(i=e[k],i&&(e[k]=null),r.event.triggered=p,e[p](),r.event.triggered=void 0,i&&(e[k]=i)),b.result}},simulate:function(a,b,c){var d=r.extend(new r.Event,c,{type:a,isSimulated:!0});r.event.trigger(d,null,b)}}),r.fn.extend({trigger:function(a,b){return this.each(function(){r.event.trigger(a,b,this)})},triggerHandler:function(a,b){var c=this[0];if(c)return r.event.trigger(a,b,c,!0)}}),r.each("blur focus focusin focusout resize scroll click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup contextmenu".split(" "),function(a,b){r.fn[b]=function(a,c){return arguments.length>0?this.on(b,null,a,c):this.trigger(b)}}),r.fn.extend({hover:function(a,b){return this.mouseenter(a).mouseleave(b||a)}}),o.focusin="onfocusin"in a,o.focusin||r.each({focus:"focusin",blur:"focusout"},function(a,b){var c=function(a){r.event.simulate(b,a.target,r.event.fix(a))};r.event.special[b]={setup:function(){var d=this.ownerDocument||this,e=V.access(d,b);e||d.addEventListener(a,c,!0),V.access(d,b,(e||0)+1)},teardown:function(){var d=this.ownerDocument||this,e=V.access(d,b)-1;e?V.access(d,b,e):(d.removeEventListener(a,c,!0),V.remove(d,b))}}});var qb=a.location,rb=r.now(),sb=/\?/;r.parseXML=function(b){var c;if(!b||"string"!=typeof b)return null;try{c=(new a.DOMParser).parseFromString(b,"text/xml")}catch(d){c=void 0}return c&&!c.getElementsByTagName("parsererror").length||r.error("Invalid XML: "+b),c};var tb=/\[\]$/,ub=/\r?\n/g,vb=/^(?:submit|button|image|reset|file)$/i,wb=/^(?:input|select|textarea|keygen)/i;function xb(a,b,c,d){var e;if(r.isArray(b))r.each(b,function(b,e){c||tb.test(a)?d(a,e):xb(a+"["+("object"==typeof e&&null!=e?b:"")+"]",e,c,d)});else if(c||"object"!==r.type(b))d(a,b);else for(e in b)xb(a+"["+e+"]",b[e],c,d)}r.param=function(a,b){var c,d=[],e=function(a,b){var c=r.isFunction(b)?b():b;d[d.length]=encodeURIComponent(a)+"="+encodeURIComponent(null==c?"":c)};if(r.isArray(a)||a.jquery&&!r.isPlainObject(a))r.each(a,function(){e(this.name,this.value)});else for(c in a)xb(c,a[c],b,e);return d.join("&")},r.fn.extend({serialize:function(){return r.param(this.serializeArray())},serializeArray:function(){return this.map(function(){var a=r.prop(this,"elements");return a?r.makeArray(a):this}).filter(function(){var a=this.type;return this.name&&!r(this).is(":disabled")&&wb.test(this.nodeName)&&!vb.test(a)&&(this.checked||!ia.test(a))}).map(function(a,b){var c=r(this).val();return null==c?null:r.isArray(c)?r.map(c,function(a){return{name:b.name,value:a.replace(ub,"\r\n")}}):{name:b.name,value:c.replace(ub,"\r\n")}}).get()}});var yb=/%20/g,zb=/#.*$/,Ab=/([?&])_=[^&]*/,Bb=/^(.*?):[ \t]*([^\r\n]*)$/gm,Cb=/^(?:about|app|app-storage|.+-extension|file|res|widget):$/,Db=/^(?:GET|HEAD)$/,Eb=/^\/\//,Fb={},Gb={},Hb="*/".concat("*"),Ib=d.createElement("a");Ib.href=qb.href;function Jb(a){return function(b,c){"string"!=typeof b&&(c=b,b="*");var d,e=0,f=b.toLowerCase().match(K)||[];if(r.isFunction(c))while(d=f[e++])"+"===d[0]?(d=d.slice(1)||"*",(a[d]=a[d]||[]).unshift(c)):(a[d]=a[d]||[]).push(c)}}function Kb(a,b,c,d){var e={},f=a===Gb;function g(h){var i;return e[h]=!0,r.each(a[h]||[],function(a,h){var j=h(b,c,d);return"string"!=typeof j||f||e[j]?f?!(i=j):void 0:(b.dataTypes.unshift(j),g(j),!1)}),i}return g(b.dataTypes[0])||!e["*"]&&g("*")}function Lb(a,b){var c,d,e=r.ajaxSettings.flatOptions||{};for(c in b)void 0!==b[c]&&((e[c]?a:d||(d={}))[c]=b[c]);return d&&r.extend(!0,a,d),a}function Mb(a,b,c){var d,e,f,g,h=a.contents,i=a.dataTypes;while("*"===i[0])i.shift(),void 0===d&&(d=a.mimeType||b.getResponseHeader("Content-Type"));if(d)for(e in h)if(h[e]&&h[e].test(d)){i.unshift(e);break}if(i[0]in c)f=i[0];else{for(e in c){if(!i[0]||a.converters[e+" "+i[0]]){f=e;break}g||(g=e)}f=f||g}if(f)return f!==i[0]&&i.unshift(f),c[f]}function Nb(a,b,c,d){var e,f,g,h,i,j={},k=a.dataTypes.slice();if(k[1])for(g in a.converters)j[g.toLowerCase()]=a.converters[g];f=k.shift();while(f)if(a.responseFields[f]&&(c[a.responseFields[f]]=b),!i&&d&&a.dataFilter&&(b=a.dataFilter(b,a.dataType)),i=f,f=k.shift())if("*"===f)f=i;else if("*"!==i&&i!==f){if(g=j[i+" "+f]||j["* "+f],!g)for(e in j)if(h=e.split(" "),h[1]===f&&(g=j[i+" "+h[0]]||j["* "+h[0]])){g===!0?g=j[e]:j[e]!==!0&&(f=h[0],k.unshift(h[1]));break}if(g!==!0)if(g&&a["throws"])b=g(b);else try{b=g(b)}catch(l){return{state:"parsererror",error:g?l:"No conversion from "+i+" to "+f}}}return{state:"success",data:b}}r.extend({active:0,lastModified:{},etag:{},ajaxSettings:{url:qb.href,type:"GET",isLocal:Cb.test(qb.protocol),global:!0,processData:!0,async:!0,contentType:"application/x-www-form-urlencoded; charset=UTF-8",accepts:{"*":Hb,text:"text/plain",html:"text/html",xml:"application/xml, text/xml",json:"application/json, text/javascript"},contents:{xml:/\bxml\b/,html:/\bhtml/,json:/\bjson\b/},responseFields:{xml:"responseXML",text:"responseText",json:"responseJSON"},converters:{"* text":String,"text html":!0,"text json":JSON.parse,"text xml":r.parseXML},flatOptions:{url:!0,context:!0}},ajaxSetup:function(a,b){return b?Lb(Lb(a,r.ajaxSettings),b):Lb(r.ajaxSettings,a)},ajaxPrefilter:Jb(Fb),ajaxTransport:Jb(Gb),ajax:function(b,c){"object"==typeof b&&(c=b,b=void 0),c=c||{};var e,f,g,h,i,j,k,l,m,n,o=r.ajaxSetup({},c),p=o.context||o,q=o.context&&(p.nodeType||p.jquery)?r(p):r.event,s=r.Deferred(),t=r.Callbacks("once memory"),u=o.statusCode||{},v={},w={},x="canceled",y={readyState:0,getResponseHeader:function(a){var b;if(k){if(!h){h={};while(b=Bb.exec(g))h[b[1].toLowerCase()]=b[2]}b=h[a.toLowerCase()]}return null==b?null:b},getAllResponseHeaders:function(){return k?g:null},setRequestHeader:function(a,b){return null==k&&(a=w[a.toLowerCase()]=w[a.toLowerCase()]||a,v[a]=b),this},overrideMimeType:function(a){return null==k&&(o.mimeType=a),this},statusCode:function(a){var b;if(a)if(k)y.always(a[y.status]);else for(b in a)u[b]=[u[b],a[b]];return this},abort:function(a){var b=a||x;return e&&e.abort(b),A(0,b),this}};if(s.promise(y),o.url=((b||o.url||qb.href)+"").replace(Eb,qb.protocol+"//"),o.type=c.method||c.type||o.method||o.type,o.dataTypes=(o.dataType||"*").toLowerCase().match(K)||[""],null==o.crossDomain){j=d.createElement("a");try{j.href=o.url,j.href=j.href,o.crossDomain=Ib.protocol+"//"+Ib.host!=j.protocol+"//"+j.host}catch(z){o.crossDomain=!0}}if(o.data&&o.processData&&"string"!=typeof o.data&&(o.data=r.param(o.data,o.traditional)),Kb(Fb,o,c,y),k)return y;l=r.event&&o.global,l&&0===r.active++&&r.event.trigger("ajaxStart"),o.type=o.type.toUpperCase(),o.hasContent=!Db.test(o.type),f=o.url.replace(zb,""),o.hasContent?o.data&&o.processData&&0===(o.contentType||"").indexOf("application/x-www-form-urlencoded")&&(o.data=o.data.replace(yb,"+")):(n=o.url.slice(f.length),o.data&&(f+=(sb.test(f)?"&":"?")+o.data,delete o.data),o.cache===!1&&(f=f.replace(Ab,"$1"),n=(sb.test(f)?"&":"?")+"_="+rb++ +n),o.url=f+n),o.ifModified&&(r.lastModified[f]&&y.setRequestHeader("If-Modified-Since",r.lastModified[f]),r.etag[f]&&y.setRequestHeader("If-None-Match",r.etag[f])),(o.data&&o.hasContent&&o.contentType!==!1||c.contentType)&&y.setRequestHeader("Content-Type",o.contentType),y.setRequestHeader("Accept",o.dataTypes[0]&&o.accepts[o.dataTypes[0]]?o.accepts[o.dataTypes[0]]+("*"!==o.dataTypes[0]?", "+Hb+"; q=0.01":""):o.accepts["*"]);for(m in o.headers)y.setRequestHeader(m,o.headers[m]);if(o.beforeSend&&(o.beforeSend.call(p,y,o)===!1||k))return y.abort();if(x="abort",t.add(o.complete),y.done(o.success),y.fail(o.error),e=Kb(Gb,o,c,y)){if(y.readyState=1,l&&q.trigger("ajaxSend",[y,o]),k)return y;o.async&&o.timeout>0&&(i=a.setTimeout(function(){y.abort("timeout")},o.timeout));try{k=!1,e.send(v,A)}catch(z){if(k)throw z;A(-1,z)}}else A(-1,"No Transport");function A(b,c,d,h){var j,m,n,v,w,x=c;k||(k=!0,i&&a.clearTimeout(i),e=void 0,g=h||"",y.readyState=b>0?4:0,j=b>=200&&b<300||304===b,d&&(v=Mb(o,y,d)),v=Nb(o,v,y,j),j?(o.ifModified&&(w=y.getResponseHeader("Last-Modified"),w&&(r.lastModified[f]=w),w=y.getResponseHeader("etag"),w&&(r.etag[f]=w)),204===b||"HEAD"===o.type?x="nocontent":304===b?x="notmodified":(x=v.state,m=v.data,n=v.error,j=!n)):(n=x,!b&&x||(x="error",b<0&&(b=0))),y.status=b,y.statusText=(c||x)+"",j?s.resolveWith(p,[m,x,y]):s.rejectWith(p,[y,x,n]),y.statusCode(u),u=void 0,l&&q.trigger(j?"ajaxSuccess":"ajaxError",[y,o,j?m:n]),t.fireWith(p,[y,x]),l&&(q.trigger("ajaxComplete",[y,o]),--r.active||r.event.trigger("ajaxStop")))}return y},getJSON:function(a,b,c){return r.get(a,b,c,"json")},getScript:function(a,b){return r.get(a,void 0,b,"script")}}),r.each(["get","post"],function(a,b){r[b]=function(a,c,d,e){return r.isFunction(c)&&(e=e||d,d=c,c=void 0),r.ajax(r.extend({url:a,type:b,dataType:e,data:c,success:d},r.isPlainObject(a)&&a))}}),r._evalUrl=function(a){return r.ajax({url:a,type:"GET",dataType:"script",cache:!0,async:!1,global:!1,"throws":!0})},r.fn.extend({wrapAll:function(a){var b;return this[0]&&(r.isFunction(a)&&(a=a.call(this[0])),b=r(a,this[0].ownerDocument).eq(0).clone(!0),this[0].parentNode&&b.insertBefore(this[0]),b.map(function(){var a=this;while(a.firstElementChild)a=a.firstElementChild;return a}).append(this)),this},wrapInner:function(a){return r.isFunction(a)?this.each(function(b){r(this).wrapInner(a.call(this,b))}):this.each(function(){var b=r(this),c=b.contents();c.length?c.wrapAll(a):b.append(a)})},wrap:function(a){var b=r.isFunction(a);return this.each(function(c){r(this).wrapAll(b?a.call(this,c):a)})},unwrap:function(a){return this.parent(a).not("body").each(function(){r(this).replaceWith(this.childNodes)}),this}}),r.expr.pseudos.hidden=function(a){return!r.expr.pseudos.visible(a)},r.expr.pseudos.visible=function(a){return!!(a.offsetWidth||a.offsetHeight||a.getClientRects().length)},r.ajaxSettings.xhr=function(){try{return new a.XMLHttpRequest}catch(b){}};var Ob={0:200,1223:204},Pb=r.ajaxSettings.xhr();o.cors=!!Pb&&"withCredentials"in Pb,o.ajax=Pb=!!Pb,r.ajaxTransport(function(b){var c,d;if(o.cors||Pb&&!b.crossDomain)return{send:function(e,f){var g,h=b.xhr();if(h.open(b.type,b.url,b.async,b.username,b.password),b.xhrFields)for(g in b.xhrFields)h[g]=b.xhrFields[g];b.mimeType&&h.overrideMimeType&&h.overrideMimeType(b.mimeType),b.crossDomain||e["X-Requested-With"]||(e["X-Requested-With"]="XMLHttpRequest");for(g in e)h.setRequestHeader(g,e[g]);c=function(a){return function(){c&&(c=d=h.onload=h.onerror=h.onabort=h.onreadystatechange=null,"abort"===a?h.abort():"error"===a?"number"!=typeof h.status?f(0,"error"):f(h.status,h.statusText):f(Ob[h.status]||h.status,h.statusText,"text"!==(h.responseType||"text")||"string"!=typeof h.responseText?{binary:h.response}:{text:h.responseText},h.getAllResponseHeaders()))}},h.onload=c(),d=h.onerror=c("error"),void 0!==h.onabort?h.onabort=d:h.onreadystatechange=function(){4===h.readyState&&a.setTimeout(function(){c&&d()})},c=c("abort");try{h.send(b.hasContent&&b.data||null)}catch(i){if(c)throw i}},abort:function(){c&&c()}}}),r.ajaxPrefilter(function(a){a.crossDomain&&(a.contents.script=!1)}),r.ajaxSetup({accepts:{script:"text/javascript, application/javascript, application/ecmascript, application/x-ecmascript"},contents:{script:/\b(?:java|ecma)script\b/},converters:{"text script":function(a){return r.globalEval(a),a}}}),r.ajaxPrefilter("script",function(a){void 0===a.cache&&(a.cache=!1),a.crossDomain&&(a.type="GET")}),r.ajaxTransport("script",function(a){if(a.crossDomain){var b,c;return{send:function(e,f){b=r("<script>").prop({charset:a.scriptCharset,src:a.url}).on("load error",c=function(a){b.remove(),c=null,a&&f("error"===a.type?404:200,a.type)}),d.head.appendChild(b[0])},abort:function(){c&&c()}}}});var Qb=[],Rb=/(=)\?(?=&|$)|\?\?/;r.ajaxSetup({jsonp:"callback",jsonpCallback:function(){var a=Qb.pop()||r.expando+"_"+rb++;return this[a]=!0,a}}),r.ajaxPrefilter("json jsonp",function(b,c,d){var e,f,g,h=b.jsonp!==!1&&(Rb.test(b.url)?"url":"string"==typeof b.data&&0===(b.contentType||"").indexOf("application/x-www-form-urlencoded")&&Rb.test(b.data)&&"data");if(h||"jsonp"===b.dataTypes[0])return e=b.jsonpCallback=r.isFunction(b.jsonpCallback)?b.jsonpCallback():b.jsonpCallback,h?b[h]=b[h].replace(Rb,"$1"+e):b.jsonp!==!1&&(b.url+=(sb.test(b.url)?"&":"?")+b.jsonp+"="+e),b.converters["script json"]=function(){return g||r.error(e+" was not called"),g[0]},b.dataTypes[0]="json",f=a[e],a[e]=function(){g=arguments},d.always(function(){void 0===f?r(a).removeProp(e):a[e]=f,b[e]&&(b.jsonpCallback=c.jsonpCallback,Qb.push(e)),g&&r.isFunction(f)&&f(g[0]),g=f=void 0}),"script"}),o.createHTMLDocument=function(){var a=d.implementation.createHTMLDocument("").body;return a.innerHTML="<form></form><form></form>",2===a.childNodes.length}(),r.parseHTML=function(a,b,c){if("string"!=typeof a)return[];"boolean"==typeof b&&(c=b,b=!1);var e,f,g;return b||(o.createHTMLDocument?(b=d.implementation.createHTMLDocument(""),e=b.createElement("base"),e.href=d.location.href,b.head.appendChild(e)):b=d),f=B.exec(a),g=!c&&[],f?[b.createElement(f[1])]:(f=pa([a],b,g),g&&g.length&&r(g).remove(),r.merge([],f.childNodes))},r.fn.load=function(a,b,c){var d,e,f,g=this,h=a.indexOf(" ");return h>-1&&(d=mb(a.slice(h)),a=a.slice(0,h)),r.isFunction(b)?(c=b,b=void 0):b&&"object"==typeof b&&(e="POST"),g.length>0&&r.ajax({url:a,type:e||"GET",dataType:"html",data:b}).done(function(a){f=arguments,g.html(d?r("<div>").append(r.parseHTML(a)).find(d):a)}).always(c&&function(a,b){g.each(function(){c.apply(this,f||[a.responseText,b,a])})}),this},r.each(["ajaxStart","ajaxStop","ajaxComplete","ajaxError","ajaxSuccess","ajaxSend"],function(a,b){r.fn[b]=function(a){return this.on(b,a)}}),r.expr.pseudos.animated=function(a){return r.grep(r.timers,function(b){return a===b.elem}).length};function Sb(a){return r.isWindow(a)?a:9===a.nodeType&&a.defaultView}r.offset={setOffset:function(a,b,c){var d,e,f,g,h,i,j,k=r.css(a,"position"),l=r(a),m={};"static"===k&&(a.style.position="relative"),h=l.offset(),f=r.css(a,"top"),i=r.css(a,"left"),j=("absolute"===k||"fixed"===k)&&(f+i).indexOf("auto")>-1,j?(d=l.position(),g=d.top,e=d.left):(g=parseFloat(f)||0,e=parseFloat(i)||0),r.isFunction(b)&&(b=b.call(a,c,r.extend({},h))),null!=b.top&&(m.top=b.top-h.top+g),null!=b.left&&(m.left=b.left-h.left+e),"using"in b?b.using.call(a,m):l.css(m)}},r.fn.extend({offset:function(a){if(arguments.length)return void 0===a?this:this.each(function(b){r.offset.setOffset(this,a,b)});var b,c,d,e,f=this[0];if(f)return f.getClientRects().length?(d=f.getBoundingClientRect(),d.width||d.height?(e=f.ownerDocument,c=Sb(e),b=e.documentElement,{top:d.top+c.pageYOffset-b.clientTop,left:d.left+c.pageXOffset-b.clientLeft}):d):{top:0,left:0}},position:function(){if(this[0]){var a,b,c=this[0],d={top:0,left:0};return"fixed"===r.css(c,"position")?b=c.getBoundingClientRect():(a=this.offsetParent(),b=this.offset(),r.nodeName(a[0],"html")||(d=a.offset()),d={top:d.top+r.css(a[0],"borderTopWidth",!0),left:d.left+r.css(a[0],"borderLeftWidth",!0)}),{top:b.top-d.top-r.css(c,"marginTop",!0),left:b.left-d.left-r.css(c,"marginLeft",!0)}}},offsetParent:function(){return this.map(function(){var a=this.offsetParent;while(a&&"static"===r.css(a,"position"))a=a.offsetParent;return a||qa})}}),r.each({scrollLeft:"pageXOffset",scrollTop:"pageYOffset"},function(a,b){var c="pageYOffset"===b;r.fn[a]=function(d){return S(this,function(a,d,e){var f=Sb(a);return void 0===e?f?f[b]:a[d]:void(f?f.scrollTo(c?f.pageXOffset:e,c?e:f.pageYOffset):a[d]=e)},a,d,arguments.length)}}),r.each(["top","left"],function(a,b){r.cssHooks[b]=Oa(o.pixelPosition,function(a,c){if(c)return c=Na(a,b),La.test(c)?r(a).position()[b]+"px":c})}),r.each({Height:"height",Width:"width"},function(a,b){r.each({padding:"inner"+a,content:b,"":"outer"+a},function(c,d){r.fn[d]=function(e,f){var g=arguments.length&&(c||"boolean"!=typeof e),h=c||(e===!0||f===!0?"margin":"border");return S(this,function(b,c,e){var f;return r.isWindow(b)?0===d.indexOf("outer")?b["inner"+a]:b.document.documentElement["client"+a]:9===b.nodeType?(f=b.documentElement,Math.max(b.body["scroll"+a],f["scroll"+a],b.body["offset"+a],f["offset"+a],f["client"+a])):void 0===e?r.css(b,c,h):r.style(b,c,e,h)},b,g?e:void 0,g)}})}),r.fn.extend({bind:function(a,b,c){return this.on(a,null,b,c)},unbind:function(a,b){return this.off(a,null,b)},delegate:function(a,b,c,d){return this.on(b,a,c,d)},undelegate:function(a,b,c){return 1===arguments.length?this.off(a,"**"):this.off(b,a||"**",c)}}),r.parseJSON=JSON.parse,"function"==typeof define&&define.amd&&define("jquery",[],function(){return r});var Tb=a.jQuery,Ub=a.$;return r.noConflict=function(b){return a.$===r&&(a.$=Ub),b&&a.jQuery===r&&(a.jQuery=Tb),r},b||(a.jQuery=a.$=r),r});
diff --git a/static/js/libs/jquery-ui.js b/static/js/libs/jquery-ui.js
new file mode 100644
index 00000000..f89afb7a
--- /dev/null
+++ b/static/js/libs/jquery-ui.js
@@ -0,0 +1,18704 @@
+/*! jQuery UI - v1.12.1 - 2016-09-14
+* http://jqueryui.com
+* Includes: widget.js, position.js, data.js, disable-selection.js, effect.js, effects/effect-blind.js, effects/effect-bounce.js, effects/effect-clip.js, effects/effect-drop.js, effects/effect-explode.js, effects/effect-fade.js, effects/effect-fold.js, effects/effect-highlight.js, effects/effect-puff.js, effects/effect-pulsate.js, effects/effect-scale.js, effects/effect-shake.js, effects/effect-size.js, effects/effect-slide.js, effects/effect-transfer.js, focusable.js, form-reset-mixin.js, jquery-1-7.js, keycode.js, labels.js, scroll-parent.js, tabbable.js, unique-id.js, widgets/accordion.js, widgets/autocomplete.js, widgets/button.js, widgets/checkboxradio.js, widgets/controlgroup.js, widgets/datepicker.js, widgets/dialog.js, widgets/draggable.js, widgets/droppable.js, widgets/menu.js, widgets/mouse.js, widgets/progressbar.js, widgets/resizable.js, widgets/selectable.js, widgets/selectmenu.js, widgets/slider.js, widgets/sortable.js, widgets/spinner.js, widgets/tabs.js, widgets/tooltip.js
+* Copyright jQuery Foundation and other contributors; Licensed MIT */
+
+(function( factory ) {
+	if ( typeof define === "function" && define.amd ) {
+
+		// AMD. Register as an anonymous module.
+		define([ "jquery" ], factory );
+	} else {
+
+		// Browser globals
+		factory( jQuery );
+	}
+}(function( $ ) {
+
+$.ui = $.ui || {};
+
+var version = $.ui.version = "1.12.1";
+
+
+/*!
+ * jQuery UI Widget 1.12.1
+ * http://jqueryui.com
+ *
+ * Copyright jQuery Foundation and other contributors
+ * Released under the MIT license.
+ * http://jquery.org/license
+ */
+
+//>>label: Widget
+//>>group: Core
+//>>description: Provides a factory for creating stateful widgets with a common API.
+//>>docs: http://api.jqueryui.com/jQuery.widget/
+//>>demos: http://jqueryui.com/widget/
+
+
+
+var widgetUuid = 0;
+var widgetSlice = Array.prototype.slice;
+
+$.cleanData = ( function( orig ) {
+	return function( elems ) {
+		var events, elem, i;
+		for ( i = 0; ( elem = elems[ i ] ) != null; i++ ) {
+			try {
+
+				// Only trigger remove when necessary to save time
+				events = $._data( elem, "events" );
+				if ( events && events.remove ) {
+					$( elem ).triggerHandler( "remove" );
+				}
+
+			// Http://bugs.jquery.com/ticket/8235
+			} catch ( e ) {}
+		}
+		orig( elems );
+	};
+} )( $.cleanData );
+
+$.widget = function( name, base, prototype ) {
+	var existingConstructor, constructor, basePrototype;
+
+	// ProxiedPrototype allows the provided prototype to remain unmodified
+	// so that it can be used as a mixin for multiple widgets (#8876)
+	var proxiedPrototype = {};
+
+	var namespace = name.split( "." )[ 0 ];
+	name = name.split( "." )[ 1 ];
+	var fullName = namespace + "-" + name;
+
+	if ( !prototype ) {
+		prototype = base;
+		base = $.Widget;
+	}
+
+	if ( $.isArray( prototype ) ) {
+		prototype = $.extend.apply( null, [ {} ].concat( prototype ) );
+	}
+
+	// Create selector for plugin
+	$.expr[ ":" ][ fullName.toLowerCase() ] = function( elem ) {
+		return !!$.data( elem, fullName );
+	};
+
+	$[ namespace ] = $[ namespace ] || {};
+	existingConstructor = $[ namespace ][ name ];
+	constructor = $[ namespace ][ name ] = function( options, element ) {
+
+		// Allow instantiation without "new" keyword
+		if ( !this._createWidget ) {
+			return new constructor( options, element );
+		}
+
+		// Allow instantiation without initializing for simple inheritance
+		// must use "new" keyword (the code above always passes args)
+		if ( arguments.length ) {
+			this._createWidget( options, element );
+		}
+	};
+
+	// Extend with the existing constructor to carry over any static properties
+	$.extend( constructor, existingConstructor, {
+		version: prototype.version,
+
+		// Copy the object used to create the prototype in case we need to
+		// redefine the widget later
+		_proto: $.extend( {}, prototype ),
+
+		// Track widgets that inherit from this widget in case this widget is
+		// redefined after a widget inherits from it
+		_childConstructors: []
+	} );
+
+	basePrototype = new base();
+
+	// We need to make the options hash a property directly on the new instance
+	// otherwise we'll modify the options hash on the prototype that we're
+	// inheriting from
+	basePrototype.options = $.widget.extend( {}, basePrototype.options );
+	$.each( prototype, function( prop, value ) {
+		if ( !$.isFunction( value ) ) {
+			proxiedPrototype[ prop ] = value;
+			return;
+		}
+		proxiedPrototype[ prop ] = ( function() {
+			function _super() {
+				return base.prototype[ prop ].apply( this, arguments );
+			}
+
+			function _superApply( args ) {
+				return base.prototype[ prop ].apply( this, args );
+			}
+
+			return function() {
+				var __super = this._super;
+				var __superApply = this._superApply;
+				var returnValue;
+
+				this._super = _super;
+				this._superApply = _superApply;
+
+				returnValue = value.apply( this, arguments );
+
+				this._super = __super;
+				this._superApply = __superApply;
+
+				return returnValue;
+			};
+		} )();
+	} );
+	constructor.prototype = $.widget.extend( basePrototype, {
+
+		// TODO: remove support for widgetEventPrefix
+		// always use the name + a colon as the prefix, e.g., draggable:start
+		// don't prefix for widgets that aren't DOM-based
+		widgetEventPrefix: existingConstructor ? ( basePrototype.widgetEventPrefix || name ) : name
+	}, proxiedPrototype, {
+		constructor: constructor,
+		namespace: namespace,
+		widgetName: name,
+		widgetFullName: fullName
+	} );
+
+	// If this widget is being redefined then we need to find all widgets that
+	// are inheriting from it and redefine all of them so that they inherit from
+	// the new version of this widget. We're essentially trying to replace one
+	// level in the prototype chain.
+	if ( existingConstructor ) {
+		$.each( existingConstructor._childConstructors, function( i, child ) {
+			var childPrototype = child.prototype;
+
+			// Redefine the child widget using the same prototype that was
+			// originally used, but inherit from the new version of the base
+			$.widget( childPrototype.namespace + "." + childPrototype.widgetName, constructor,
+				child._proto );
+		} );
+
+		// Remove the list of existing child constructors from the old constructor
+		// so the old child constructors can be garbage collected
+		delete existingConstructor._childConstructors;
+	} else {
+		base._childConstructors.push( constructor );
+	}
+
+	$.widget.bridge( name, constructor );
+
+	return constructor;
+};
+
+$.widget.extend = function( target ) {
+	var input = widgetSlice.call( arguments, 1 );
+	var inputIndex = 0;
+	var inputLength = input.length;
+	var key;
+	var value;
+
+	for ( ; inputIndex < inputLength; inputIndex++ ) {
+		for ( key in input[ inputIndex ] ) {
+			value = input[ inputIndex ][ key ];
+			if ( input[ inputIndex ].hasOwnProperty( key ) && value !== undefined ) {
+
+				// Clone objects
+				if ( $.isPlainObject( value ) ) {
+					target[ key ] = $.isPlainObject( target[ key ] ) ?
+						$.widget.extend( {}, target[ key ], value ) :
+
+						// Don't extend strings, arrays, etc. with objects
+						$.widget.extend( {}, value );
+
+				// Copy everything else by reference
+				} else {
+					target[ key ] = value;
+				}
+			}
+		}
+	}
+	return target;
+};
+
+$.widget.bridge = function( name, object ) {
+	var fullName = object.prototype.widgetFullName || name;
+	$.fn[ name ] = function( options ) {
+		var isMethodCall = typeof options === "string";
+		var args = widgetSlice.call( arguments, 1 );
+		var returnValue = this;
+
+		if ( isMethodCall ) {
+
+			// If this is an empty collection, we need to have the instance method
+			// return undefined instead of the jQuery instance
+			if ( !this.length && options === "instance" ) {
+				returnValue = undefined;
+			} else {
+				this.each( function() {
+					var methodValue;
+					var instance = $.data( this, fullName );
+
+					if ( options === "instance" ) {
+						returnValue = instance;
+						return false;
+					}
+
+					if ( !instance ) {
+						return $.error( "cannot call methods on " + name +
+							" prior to initialization; " +
+							"attempted to call method '" + options + "'" );
+					}
+
+					if ( !$.isFunction( instance[ options ] ) || options.charAt( 0 ) === "_" ) {
+						return $.error( "no such method '" + options + "' for " + name +
+							" widget instance" );
+					}
+
+					methodValue = instance[ options ].apply( instance, args );
+
+					if ( methodValue !== instance && methodValue !== undefined ) {
+						returnValue = methodValue && methodValue.jquery ?
+							returnValue.pushStack( methodValue.get() ) :
+							methodValue;
+						return false;
+					}
+				} );
+			}
+		} else {
+
+			// Allow multiple hashes to be passed on init
+			if ( args.length ) {
+				options = $.widget.extend.apply( null, [ options ].concat( args ) );
+			}
+
+			this.each( function() {
+				var instance = $.data( this, fullName );
+				if ( instance ) {
+					instance.option( options || {} );
+					if ( instance._init ) {
+						instance._init();
+					}
+				} else {
+					$.data( this, fullName, new object( options, this ) );
+				}
+			} );
+		}
+
+		return returnValue;
+	};
+};
+
+$.Widget = function( /* options, element */ ) {};
+$.Widget._childConstructors = [];
+
+$.Widget.prototype = {
+	widgetName: "widget",
+	widgetEventPrefix: "",
+	defaultElement: "<div>",
+
+	options: {
+		classes: {},
+		disabled: false,
+
+		// Callbacks
+		create: null
+	},
+
+	_createWidget: function( options, element ) {
+		element = $( element || this.defaultElement || this )[ 0 ];
+		this.element = $( element );
+		this.uuid = widgetUuid++;
+		this.eventNamespace = "." + this.widgetName + this.uuid;
+
+		this.bindings = $();
+		this.hoverable = $();
+		this.focusable = $();
+		this.classesElementLookup = {};
+
+		if ( element !== this ) {
+			$.data( element, this.widgetFullName, this );
+			this._on( true, this.element, {
+				remove: function( event ) {
+					if ( event.target === element ) {
+						this.destroy();
+					}
+				}
+			} );
+			this.document = $( element.style ?
+
+				// Element within the document
+				element.ownerDocument :
+
+				// Element is window or document
+				element.document || element );
+			this.window = $( this.document[ 0 ].defaultView || this.document[ 0 ].parentWindow );
+		}
+
+		this.options = $.widget.extend( {},
+			this.options,
+			this._getCreateOptions(),
+			options );
+
+		this._create();
+
+		if ( this.options.disabled ) {
+			this._setOptionDisabled( this.options.disabled );
+		}
+
+		this._trigger( "create", null, this._getCreateEventData() );
+		this._init();
+	},
+
+	_getCreateOptions: function() {
+		return {};
+	},
+
+	_getCreateEventData: $.noop,
+
+	_create: $.noop,
+
+	_init: $.noop,
+
+	destroy: function() {
+		var that = this;
+
+		this._destroy();
+		$.each( this.classesElementLookup, function( key, value ) {
+			that._removeClass( value, key );
+		} );
+
+		// We can probably remove the unbind calls in 2.0
+		// all event bindings should go through this._on()
+		this.element
+			.off( this.eventNamespace )
+			.removeData( this.widgetFullName );
+		this.widget()
+			.off( this.eventNamespace )
+			.removeAttr( "aria-disabled" );
+
+		// Clean up events and states
+		this.bindings.off( this.eventNamespace );
+	},
+
+	_destroy: $.noop,
+
+	widget: function() {
+		return this.element;
+	},
+
+	option: function( key, value ) {
+		var options = key;
+		var parts;
+		var curOption;
+		var i;
+
+		if ( arguments.length === 0 ) {
+
+			// Don't return a reference to the internal hash
+			return $.widget.extend( {}, this.options );
+		}
+
+		if ( typeof key === "string" ) {
+
+			// Handle nested keys, e.g., "foo.bar" => { foo: { bar: ___ } }
+			options = {};
+			parts = key.split( "." );
+			key = parts.shift();
+			if ( parts.length ) {
+				curOption = options[ key ] = $.widget.extend( {}, this.options[ key ] );
+				for ( i = 0; i < parts.length - 1; i++ ) {
+					curOption[ parts[ i ] ] = curOption[ parts[ i ] ] || {};
+					curOption = curOption[ parts[ i ] ];
+				}
+				key = parts.pop();
+				if ( arguments.length === 1 ) {
+					return curOption[ key ] === undefined ? null : curOption[ key ];
+				}
+				curOption[ key ] = value;
+			} else {
+				if ( arguments.length === 1 ) {
+					return this.options[ key ] === undefined ? null : this.options[ key ];
+				}
+				options[ key ] = value;
+			}
+		}
+
+		this._setOptions( options );
+
+		return this;
+	},
+
+	_setOptions: function( options ) {
+		var key;
+
+		for ( key in options ) {
+			this._setOption( key, options[ key ] );
+		}
+
+		return this;
+	},
+
+	_setOption: function( key, value ) {
+		if ( key === "classes" ) {
+			this._setOptionClasses( value );
+		}
+
+		this.options[ key ] = value;
+
+		if ( key === "disabled" ) {
+			this._setOptionDisabled( value );
+		}
+
+		return this;
+	},
+
+	_setOptionClasses: function( value ) {
+		var classKey, elements, currentElements;
+
+		for ( classKey in value ) {
+			currentElements = this.classesElementLookup[ classKey ];
+			if ( value[ classKey ] === this.options.classes[ classKey ] ||
+					!currentElements ||
+					!currentElements.length ) {
+				continue;
+			}
+
+			// We are doing this to create a new jQuery object because the _removeClass() call
+			// on the next line is going to destroy the reference to the current elements being
+			// tracked. We need to save a copy of this collection so that we can add the new classes
+			// below.
+			elements = $( currentElements.get() );
+			this._removeClass( currentElements, classKey );
+
+			// We don't use _addClass() here, because that uses this.options.classes
+			// for generating the string of classes. We want to use the value passed in from
+			// _setOption(), this is the new value of the classes option which was passed to
+			// _setOption(). We pass this value directly to _classes().
+			elements.addClass( this._classes( {
+				element: elements,
+				keys: classKey,
+				classes: value,
+				add: true
+			} ) );
+		}
+	},
+
+	_setOptionDisabled: function( value ) {
+		this._toggleClass( this.widget(), this.widgetFullName + "-disabled", null, !!value );
+
+		// If the widget is becoming disabled, then nothing is interactive
+		if ( value ) {
+			this._removeClass( this.hoverable, null, "ui-state-hover" );
+			this._removeClass( this.focusable, null, "ui-state-focus" );
+		}
+	},
+
+	enable: function() {
+		return this._setOptions( { disabled: false } );
+	},
+
+	disable: function() {
+		return this._setOptions( { disabled: true } );
+	},
+
+	_classes: function( options ) {
+		var full = [];
+		var that = this;
+
+		options = $.extend( {
+			element: this.element,
+			classes: this.options.classes || {}
+		}, options );
+
+		function processClassString( classes, checkOption ) {
+			var current, i;
+			for ( i = 0; i < classes.length; i++ ) {
+				current = that.classesElementLookup[ classes[ i ] ] || $();
+				if ( options.add ) {
+					current = $( $.unique( current.get().concat( options.element.get() ) ) );
+				} else {
+					current = $( current.not( options.element ).get() );
+				}
+				that.classesElementLookup[ classes[ i ] ] = current;
+				full.push( classes[ i ] );
+				if ( checkOption && options.classes[ classes[ i ] ] ) {
+					full.push( options.classes[ classes[ i ] ] );
+				}
+			}
+		}
+
+		this._on( options.element, {
+			"remove": "_untrackClassesElement"
+		} );
+
+		if ( options.keys ) {
+			processClassString( options.keys.match( /\S+/g ) || [], true );
+		}
+		if ( options.extra ) {
+			processClassString( options.extra.match( /\S+/g ) || [] );
+		}
+
+		return full.join( " " );
+	},
+
+	_untrackClassesElement: function( event ) {
+		var that = this;
+		$.each( that.classesElementLookup, function( key, value ) {
+			if ( $.inArray( event.target, value ) !== -1 ) {
+				that.classesElementLookup[ key ] = $( value.not( event.target ).get() );
+			}
+		} );
+	},
+
+	_removeClass: function( element, keys, extra ) {
+		return this._toggleClass( element, keys, extra, false );
+	},
+
+	_addClass: function( element, keys, extra ) {
+		return this._toggleClass( element, keys, extra, true );
+	},
+
+	_toggleClass: function( element, keys, extra, add ) {
+		add = ( typeof add === "boolean" ) ? add : extra;
+		var shift = ( typeof element === "string" || element === null ),
+			options = {
+				extra: shift ? keys : extra,
+				keys: shift ? element : keys,
+				element: shift ? this.element : element,
+				add: add
+			};
+		options.element.toggleClass( this._classes( options ), add );
+		return this;
+	},
+
+	_on: function( suppressDisabledCheck, element, handlers ) {
+		var delegateElement;
+		var instance = this;
+
+		// No suppressDisabledCheck flag, shuffle arguments
+		if ( typeof suppressDisabledCheck !== "boolean" ) {
+			handlers = element;
+			element = suppressDisabledCheck;
+			suppressDisabledCheck = false;
+		}
+
+		// No element argument, shuffle and use this.element
+		if ( !handlers ) {
+			handlers = element;
+			element = this.element;
+			delegateElement = this.widget();
+		} else {
+			element = delegateElement = $( element );
+			this.bindings = this.bindings.add( element );
+		}
+
+		$.each( handlers, function( event, handler ) {
+			function handlerProxy() {
+
+				// Allow widgets to customize the disabled handling
+				// - disabled as an array instead of boolean
+				// - disabled class as method for disabling individual parts
+				if ( !suppressDisabledCheck &&
+						( instance.options.disabled === true ||
+						$( this ).hasClass( "ui-state-disabled" ) ) ) {
+					return;
+				}
+				return ( typeof handler === "string" ? instance[ handler ] : handler )
+					.apply( instance, arguments );
+			}
+
+			// Copy the guid so direct unbinding works
+			if ( typeof handler !== "string" ) {
+				handlerProxy.guid = handler.guid =
+					handler.guid || handlerProxy.guid || $.guid++;
+			}
+
+			var match = event.match( /^([\w:-]*)\s*(.*)$/ );
+			var eventName = match[ 1 ] + instance.eventNamespace;
+			var selector = match[ 2 ];
+
+			if ( selector ) {
+				delegateElement.on( eventName, selector, handlerProxy );
+			} else {
+				element.on( eventName, handlerProxy );
+			}
+		} );
+	},
+
+	_off: function( element, eventName ) {
+		eventName = ( eventName || "" ).split( " " ).join( this.eventNamespace + " " ) +
+			this.eventNamespace;
+		element.off( eventName ).off( eventName );
+
+		// Clear the stack to avoid memory leaks (#10056)
+		this.bindings = $( this.bindings.not( element ).get() );
+		this.focusable = $( this.focusable.not( element ).get() );
+		this.hoverable = $( this.hoverable.not( element ).get() );
+	},
+
+	_delay: function( handler, delay ) {
+		function handlerProxy() {
+			return ( typeof handler === "string" ? instance[ handler ] : handler )
+				.apply( instance, arguments );
+		}
+		var instance = this;
+		return setTimeout( handlerProxy, delay || 0 );
+	},
+
+	_hoverable: function( element ) {
+		this.hoverable = this.hoverable.add( element );
+		this._on( element, {
+			mouseenter: function( event ) {
+				this._addClass( $( event.currentTarget ), null, "ui-state-hover" );
+			},
+			mouseleave: function( event ) {
+				this._removeClass( $( event.currentTarget ), null, "ui-state-hover" );
+			}
+		} );
+	},
+
+	_focusable: function( element ) {
+		this.focusable = this.focusable.add( element );
+		this._on( element, {
+			focusin: function( event ) {
+				this._addClass( $( event.currentTarget ), null, "ui-state-focus" );
+			},
+			focusout: function( event ) {
+				this._removeClass( $( event.currentTarget ), null, "ui-state-focus" );
+			}
+		} );
+	},
+
+	_trigger: function( type, event, data ) {
+		var prop, orig;
+		var callback = this.options[ type ];
+
+		data = data || {};
+		event = $.Event( event );
+		event.type = ( type === this.widgetEventPrefix ?
+			type :
+			this.widgetEventPrefix + type ).toLowerCase();
+
+		// The original event may come from any element
+		// so we need to reset the target on the new event
+		event.target = this.element[ 0 ];
+
+		// Copy original event properties over to the new event
+		orig = event.originalEvent;
+		if ( orig ) {
+			for ( prop in orig ) {
+				if ( !( prop in event ) ) {
+					event[ prop ] = orig[ prop ];
+				}
+			}
+		}
+
+		this.element.trigger( event, data );
+		return !( $.isFunction( callback ) &&
+			callback.apply( this.element[ 0 ], [ event ].concat( data ) ) === false ||
+			event.isDefaultPrevented() );
+	}
+};
+
+$.each( { show: "fadeIn", hide: "fadeOut" }, function( method, defaultEffect ) {
+	$.Widget.prototype[ "_" + method ] = function( element, options, callback ) {
+		if ( typeof options === "string" ) {
+			options = { effect: options };
+		}
+
+		var hasOptions;
+		var effectName = !options ?
+			method :
+			options === true || typeof options === "number" ?
+				defaultEffect :
+				options.effect || defaultEffect;
+
+		options = options || {};
+		if ( typeof options === "number" ) {
+			options = { duration: options };
+		}
+
+		hasOptions = !$.isEmptyObject( options );
+		options.complete = callback;
+
+		if ( options.delay ) {
+			element.delay( options.delay );
+		}
+
+		if ( hasOptions && $.effects && $.effects.effect[ effectName ] ) {
+			element[ method ]( options );
+		} else if ( effectName !== method && element[ effectName ] ) {
+			element[ effectName ]( options.duration, options.easing, callback );
+		} else {
+			element.queue( function( next ) {
+				$( this )[ method ]();
+				if ( callback ) {
+					callback.call( element[ 0 ] );
+				}
+				next();
+			} );
+		}
+	};
+} );
+
+var widget = $.widget;
+
+
+/*!
+ * jQuery UI Position 1.12.1
+ * http://jqueryui.com
+ *
+ * Copyright jQuery Foundation and other contributors
+ * Released under the MIT license.
+ * http://jquery.org/license
+ *
+ * http://api.jqueryui.com/position/
+ */
+
+//>>label: Position
+//>>group: Core
+//>>description: Positions elements relative to other elements.
+//>>docs: http://api.jqueryui.com/position/
+//>>demos: http://jqueryui.com/position/
+
+
+( function() {
+var cachedScrollbarWidth,
+	max = Math.max,
+	abs = Math.abs,
+	rhorizontal = /left|center|right/,
+	rvertical = /top|center|bottom/,
+	roffset = /[\+\-]\d+(\.[\d]+)?%?/,
+	rposition = /^\w+/,
+	rpercent = /%$/,
+	_position = $.fn.position;
+
+function getOffsets( offsets, width, height ) {
+	return [
+		parseFloat( offsets[ 0 ] ) * ( rpercent.test( offsets[ 0 ] ) ? width / 100 : 1 ),
+		parseFloat( offsets[ 1 ] ) * ( rpercent.test( offsets[ 1 ] ) ? height / 100 : 1 )
+	];
+}
+
+function parseCss( element, property ) {
+	return parseInt( $.css( element, property ), 10 ) || 0;
+}
+
+function getDimensions( elem ) {
+	var raw = elem[ 0 ];
+	if ( raw.nodeType === 9 ) {
+		return {
+			width: elem.width(),
+			height: elem.height(),
+			offset: { top: 0, left: 0 }
+		};
+	}
+	if ( $.isWindow( raw ) ) {
+		return {
+			width: elem.width(),
+			height: elem.height(),
+			offset: { top: elem.scrollTop(), left: elem.scrollLeft() }
+		};
+	}
+	if ( raw.preventDefault ) {
+		return {
+			width: 0,
+			height: 0,
+			offset: { top: raw.pageY, left: raw.pageX }
+		};
+	}
+	return {
+		width: elem.outerWidth(),
+		height: elem.outerHeight(),
+		offset: elem.offset()
+	};
+}
+
+$.position = {
+	scrollbarWidth: function() {
+		if ( cachedScrollbarWidth !== undefined ) {
+			return cachedScrollbarWidth;
+		}
+		var w1, w2,
+			div = $( "<div " +
+				"style='display:block;position:absolute;width:50px;height:50px;overflow:hidden;'>" +
+				"<div style='height:100px;width:auto;'></div></div>" ),
+			innerDiv = div.children()[ 0 ];
+
+		$( "body" ).append( div );
+		w1 = innerDiv.offsetWidth;
+		div.css( "overflow", "scroll" );
+
+		w2 = innerDiv.offsetWidth;
+
+		if ( w1 === w2 ) {
+			w2 = div[ 0 ].clientWidth;
+		}
+
+		div.remove();
+
+		return ( cachedScrollbarWidth = w1 - w2 );
+	},
+	getScrollInfo: function( within ) {
+		var overflowX = within.isWindow || within.isDocument ? "" :
+				within.element.css( "overflow-x" ),
+			overflowY = within.isWindow || within.isDocument ? "" :
+				within.element.css( "overflow-y" ),
+			hasOverflowX = overflowX === "scroll" ||
+				( overflowX === "auto" && within.width < within.element[ 0 ].scrollWidth ),
+			hasOverflowY = overflowY === "scroll" ||
+				( overflowY === "auto" && within.height < within.element[ 0 ].scrollHeight );
+		return {
+			width: hasOverflowY ? $.position.scrollbarWidth() : 0,
+			height: hasOverflowX ? $.position.scrollbarWidth() : 0
+		};
+	},
+	getWithinInfo: function( element ) {
+		var withinElement = $( element || window ),
+			isWindow = $.isWindow( withinElement[ 0 ] ),
+			isDocument = !!withinElement[ 0 ] && withinElement[ 0 ].nodeType === 9,
+			hasOffset = !isWindow && !isDocument;
+		return {
+			element: withinElement,
+			isWindow: isWindow,
+			isDocument: isDocument,
+			offset: hasOffset ? $( element ).offset() : { left: 0, top: 0 },
+			scrollLeft: withinElement.scrollLeft(),
+			scrollTop: withinElement.scrollTop(),
+			width: withinElement.outerWidth(),
+			height: withinElement.outerHeight()
+		};
+	}
+};
+
+$.fn.position = function( options ) {
+	if ( !options || !options.of ) {
+		return _position.apply( this, arguments );
+	}
+
+	// Make a copy, we don't want to modify arguments
+	options = $.extend( {}, options );
+
+	var atOffset, targetWidth, targetHeight, targetOffset, basePosition, dimensions,
+		target = $( options.of ),
+		within = $.position.getWithinInfo( options.within ),
+		scrollInfo = $.position.getScrollInfo( within ),
+		collision = ( options.collision || "flip" ).split( " " ),
+		offsets = {};
+
+	dimensions = getDimensions( target );
+	if ( target[ 0 ].preventDefault ) {
+
+		// Force left top to allow flipping
+		options.at = "left top";
+	}
+	targetWidth = dimensions.width;
+	targetHeight = dimensions.height;
+	targetOffset = dimensions.offset;
+
+	// Clone to reuse original targetOffset later
+	basePosition = $.extend( {}, targetOffset );
+
+	// Force my and at to have valid horizontal and vertical positions
+	// if a value is missing or invalid, it will be converted to center
+	$.each( [ "my", "at" ], function() {
+		var pos = ( options[ this ] || "" ).split( " " ),
+			horizontalOffset,
+			verticalOffset;
+
+		if ( pos.length === 1 ) {
+			pos = rhorizontal.test( pos[ 0 ] ) ?
+				pos.concat( [ "center" ] ) :
+				rvertical.test( pos[ 0 ] ) ?
+					[ "center" ].concat( pos ) :
+					[ "center", "center" ];
+		}
+		pos[ 0 ] = rhorizontal.test( pos[ 0 ] ) ? pos[ 0 ] : "center";
+		pos[ 1 ] = rvertical.test( pos[ 1 ] ) ? pos[ 1 ] : "center";
+
+		// Calculate offsets
+		horizontalOffset = roffset.exec( pos[ 0 ] );
+		verticalOffset = roffset.exec( pos[ 1 ] );
+		offsets[ this ] = [
+			horizontalOffset ? horizontalOffset[ 0 ] : 0,
+			verticalOffset ? verticalOffset[ 0 ] : 0
+		];
+
+		// Reduce to just the positions without the offsets
+		options[ this ] = [
+			rposition.exec( pos[ 0 ] )[ 0 ],
+			rposition.exec( pos[ 1 ] )[ 0 ]
+		];
+	} );
+
+	// Normalize collision option
+	if ( collision.length === 1 ) {
+		collision[ 1 ] = collision[ 0 ];
+	}
+
+	if ( options.at[ 0 ] === "right" ) {
+		basePosition.left += targetWidth;
+	} else if ( options.at[ 0 ] === "center" ) {
+		basePosition.left += targetWidth / 2;
+	}
+
+	if ( options.at[ 1 ] === "bottom" ) {
+		basePosition.top += targetHeight;
+	} else if ( options.at[ 1 ] === "center" ) {
+		basePosition.top += targetHeight / 2;
+	}
+
+	atOffset = getOffsets( offsets.at, targetWidth, targetHeight );
+	basePosition.left += atOffset[ 0 ];
+	basePosition.top += atOffset[ 1 ];
+
+	return this.each( function() {
+		var collisionPosition, using,
+			elem = $( this ),
+			elemWidth = elem.outerWidth(),
+			elemHeight = elem.outerHeight(),
+			marginLeft = parseCss( this, "marginLeft" ),
+			marginTop = parseCss( this, "marginTop" ),
+			collisionWidth = elemWidth + marginLeft + parseCss( this, "marginRight" ) +
+				scrollInfo.width,
+			collisionHeight = elemHeight + marginTop + parseCss( this, "marginBottom" ) +
+				scrollInfo.height,
+			position = $.extend( {}, basePosition ),
+			myOffset = getOffsets( offsets.my, elem.outerWidth(), elem.outerHeight() );
+
+		if ( options.my[ 0 ] === "right" ) {
+			position.left -= elemWidth;
+		} else if ( options.my[ 0 ] === "center" ) {
+			position.left -= elemWidth / 2;
+		}
+
+		if ( options.my[ 1 ] === "bottom" ) {
+			position.top -= elemHeight;
+		} else if ( options.my[ 1 ] === "center" ) {
+			position.top -= elemHeight / 2;
+		}
+
+		position.left += myOffset[ 0 ];
+		position.top += myOffset[ 1 ];
+
+		collisionPosition = {
+			marginLeft: marginLeft,
+			marginTop: marginTop
+		};
+
+		$.each( [ "left", "top" ], function( i, dir ) {
+			if ( $.ui.position[ collision[ i ] ] ) {
+				$.ui.position[ collision[ i ] ][ dir ]( position, {
+					targetWidth: targetWidth,
+					targetHeight: targetHeight,
+					elemWidth: elemWidth,
+					elemHeight: elemHeight,
+					collisionPosition: collisionPosition,
+					collisionWidth: collisionWidth,
+					collisionHeight: collisionHeight,
+					offset: [ atOffset[ 0 ] + myOffset[ 0 ], atOffset [ 1 ] + myOffset[ 1 ] ],
+					my: options.my,
+					at: options.at,
+					within: within,
+					elem: elem
+				} );
+			}
+		} );
+
+		if ( options.using ) {
+
+			// Adds feedback as second argument to using callback, if present
+			using = function( props ) {
+				var left = targetOffset.left - position.left,
+					right = left + targetWidth - elemWidth,
+					top = targetOffset.top - position.top,
+					bottom = top + targetHeight - elemHeight,
+					feedback = {
+						target: {
+							element: target,
+							left: targetOffset.left,
+							top: targetOffset.top,
+							width: targetWidth,
+							height: targetHeight
+						},
+						element: {
+							element: elem,
+							left: position.left,
+							top: position.top,
+							width: elemWidth,
+							height: elemHeight
+						},
+						horizontal: right < 0 ? "left" : left > 0 ? "right" : "center",
+						vertical: bottom < 0 ? "top" : top > 0 ? "bottom" : "middle"
+					};
+				if ( targetWidth < elemWidth && abs( left + right ) < targetWidth ) {
+					feedback.horizontal = "center";
+				}
+				if ( targetHeight < elemHeight && abs( top + bottom ) < targetHeight ) {
+					feedback.vertical = "middle";
+				}
+				if ( max( abs( left ), abs( right ) ) > max( abs( top ), abs( bottom ) ) ) {
+					feedback.important = "horizontal";
+				} else {
+					feedback.important = "vertical";
+				}
+				options.using.call( this, props, feedback );
+			};
+		}
+
+		elem.offset( $.extend( position, { using: using } ) );
+	} );
+};
+
+$.ui.position = {
+	fit: {
+		left: function( position, data ) {
+			var within = data.within,
+				withinOffset = within.isWindow ? within.scrollLeft : within.offset.left,
+				outerWidth = within.width,
+				collisionPosLeft = position.left - data.collisionPosition.marginLeft,
+				overLeft = withinOffset - collisionPosLeft,
+				overRight = collisionPosLeft + data.collisionWidth - outerWidth - withinOffset,
+				newOverRight;
+
+			// Element is wider than within
+			if ( data.collisionWidth > outerWidth ) {
+
+				// Element is initially over the left side of within
+				if ( overLeft > 0 && overRight <= 0 ) {
+					newOverRight = position.left + overLeft + data.collisionWidth - outerWidth -
+						withinOffset;
+					position.left += overLeft - newOverRight;
+
+				// Element is initially over right side of within
+				} else if ( overRight > 0 && overLeft <= 0 ) {
+					position.left = withinOffset;
+
+				// Element is initially over both left and right sides of within
+				} else {
+					if ( overLeft > overRight ) {
+						position.left = withinOffset + outerWidth - data.collisionWidth;
+					} else {
+						position.left = withinOffset;
+					}
+				}
+
+			// Too far left -> align with left edge
+			} else if ( overLeft > 0 ) {
+				position.left += overLeft;
+
+			// Too far right -> align with right edge
+			} else if ( overRight > 0 ) {
+				position.left -= overRight;
+
+			// Adjust based on position and margin
+			} else {
+				position.left = max( position.left - collisionPosLeft, position.left );
+			}
+		},
+		top: function( position, data ) {
+			var within = data.within,
+				withinOffset = within.isWindow ? within.scrollTop : within.offset.top,
+				outerHeight = data.within.height,
+				collisionPosTop = position.top - data.collisionPosition.marginTop,
+				overTop = withinOffset - collisionPosTop,
+				overBottom = collisionPosTop + data.collisionHeight - outerHeight - withinOffset,
+				newOverBottom;
+
+			// Element is taller than within
+			if ( data.collisionHeight > outerHeight ) {
+
+				// Element is initially over the top of within
+				if ( overTop > 0 && overBottom <= 0 ) {
+					newOverBottom = position.top + overTop + data.collisionHeight - outerHeight -
+						withinOffset;
+					position.top += overTop - newOverBottom;
+
+				// Element is initially over bottom of within
+				} else if ( overBottom > 0 && overTop <= 0 ) {
+					position.top = withinOffset;
+
+				// Element is initially over both top and bottom of within
+				} else {
+					if ( overTop > overBottom ) {
+						position.top = withinOffset + outerHeight - data.collisionHeight;
+					} else {
+						position.top = withinOffset;
+					}
+				}
+
+			// Too far up -> align with top
+			} else if ( overTop > 0 ) {
+				position.top += overTop;
+
+			// Too far down -> align with bottom edge
+			} else if ( overBottom > 0 ) {
+				position.top -= overBottom;
+
+			// Adjust based on position and margin
+			} else {
+				position.top = max( position.top - collisionPosTop, position.top );
+			}
+		}
+	},
+	flip: {
+		left: function( position, data ) {
+			var within = data.within,
+				withinOffset = within.offset.left + within.scrollLeft,
+				outerWidth = within.width,
+				offsetLeft = within.isWindow ? within.scrollLeft : within.offset.left,
+				collisionPosLeft = position.left - data.collisionPosition.marginLeft,
+				overLeft = collisionPosLeft - offsetLeft,
+				overRight = collisionPosLeft + data.collisionWidth - outerWidth - offsetLeft,
+				myOffset = data.my[ 0 ] === "left" ?
+					-data.elemWidth :
+					data.my[ 0 ] === "right" ?
+						data.elemWidth :
+						0,
+				atOffset = data.at[ 0 ] === "left" ?
+					data.targetWidth :
+					data.at[ 0 ] === "right" ?
+						-data.targetWidth :
+						0,
+				offset = -2 * data.offset[ 0 ],
+				newOverRight,
+				newOverLeft;
+
+			if ( overLeft < 0 ) {
+				newOverRight = position.left + myOffset + atOffset + offset + data.collisionWidth -
+					outerWidth - withinOffset;
+				if ( newOverRight < 0 || newOverRight < abs( overLeft ) ) {
+					position.left += myOffset + atOffset + offset;
+				}
+			} else if ( overRight > 0 ) {
+				newOverLeft = position.left - data.collisionPosition.marginLeft + myOffset +
+					atOffset + offset - offsetLeft;
+				if ( newOverLeft > 0 || abs( newOverLeft ) < overRight ) {
+					position.left += myOffset + atOffset + offset;
+				}
+			}
+		},
+		top: function( position, data ) {
+			var within = data.within,
+				withinOffset = within.offset.top + within.scrollTop,
+				outerHeight = within.height,
+				offsetTop = within.isWindow ? within.scrollTop : within.offset.top,
+				collisionPosTop = position.top - data.collisionPosition.marginTop,
+				overTop = collisionPosTop - offsetTop,
+				overBottom = collisionPosTop + data.collisionHeight - outerHeight - offsetTop,
+				top = data.my[ 1 ] === "top",
+				myOffset = top ?
+					-data.elemHeight :
+					data.my[ 1 ] === "bottom" ?
+						data.elemHeight :
+						0,
+				atOffset = data.at[ 1 ] === "top" ?
+					data.targetHeight :
+					data.at[ 1 ] === "bottom" ?
+						-data.targetHeight :
+						0,
+				offset = -2 * data.offset[ 1 ],
+				newOverTop,
+				newOverBottom;
+			if ( overTop < 0 ) {
+				newOverBottom = position.top + myOffset + atOffset + offset + data.collisionHeight -
+					outerHeight - withinOffset;
+				if ( newOverBottom < 0 || newOverBottom < abs( overTop ) ) {
+					position.top += myOffset + atOffset + offset;
+				}
+			} else if ( overBottom > 0 ) {
+				newOverTop = position.top - data.collisionPosition.marginTop + myOffset + atOffset +
+					offset - offsetTop;
+				if ( newOverTop > 0 || abs( newOverTop ) < overBottom ) {
+					position.top += myOffset + atOffset + offset;
+				}
+			}
+		}
+	},
+	flipfit: {
+		left: function() {
+			$.ui.position.flip.left.apply( this, arguments );
+			$.ui.position.fit.left.apply( this, arguments );
+		},
+		top: function() {
+			$.ui.position.flip.top.apply( this, arguments );
+			$.ui.position.fit.top.apply( this, arguments );
+		}
+	}
+};
+
+} )();
+
+var position = $.ui.position;
+
+
+/*!
+ * jQuery UI :data 1.12.1
+ * http://jqueryui.com
+ *
+ * Copyright jQuery Foundation and other contributors
+ * Released under the MIT license.
+ * http://jquery.org/license
+ */
+
+//>>label: :data Selector
+//>>group: Core
+//>>description: Selects elements which have data stored under the specified key.
+//>>docs: http://api.jqueryui.com/data-selector/
+
+
+var data = $.extend( $.expr[ ":" ], {
+	data: $.expr.createPseudo ?
+		$.expr.createPseudo( function( dataName ) {
+			return function( elem ) {
+				return !!$.data( elem, dataName );
+			};
+		} ) :
+
+		// Support: jQuery <1.8
+		function( elem, i, match ) {
+			return !!$.data( elem, match[ 3 ] );
+		}
+} );
+
+/*!
+ * jQuery UI Disable Selection 1.12.1
+ * http://jqueryui.com
+ *
+ * Copyright jQuery Foundation and other contributors
+ * Released under the MIT license.
+ * http://jquery.org/license
+ */
+
+//>>label: disableSelection
+//>>group: Core
+//>>description: Disable selection of text content within the set of matched elements.
+//>>docs: http://api.jqueryui.com/disableSelection/
+
+// This file is deprecated
+
+
+var disableSelection = $.fn.extend( {
+	disableSelection: ( function() {
+		var eventType = "onselectstart" in document.createElement( "div" ) ?
+			"selectstart" :
+			"mousedown";
+
+		return function() {
+			return this.on( eventType + ".ui-disableSelection", function( event ) {
+				event.preventDefault();
+			} );
+		};
+	} )(),
+
+	enableSelection: function() {
+		return this.off( ".ui-disableSelection" );
+	}
+} );
+
+
+/*!
+ * jQuery UI Effects 1.12.1
+ * http://jqueryui.com
+ *
+ * Copyright jQuery Foundation and other contributors
+ * Released under the MIT license.
+ * http://jquery.org/license
+ */
+
+//>>label: Effects Core
+//>>group: Effects
+// jscs:disable maximumLineLength
+//>>description: Extends the internal jQuery effects. Includes morphing and easing. Required by all other effects.
+// jscs:enable maximumLineLength
+//>>docs: http://api.jqueryui.com/category/effects-core/
+//>>demos: http://jqueryui.com/effect/
+
+
+
+var dataSpace = "ui-effects-",
+	dataSpaceStyle = "ui-effects-style",
+	dataSpaceAnimated = "ui-effects-animated",
+
+	// Create a local jQuery because jQuery Color relies on it and the
+	// global may not exist with AMD and a custom build (#10199)
+	jQuery = $;
+
+$.effects = {
+	effect: {}
+};
+
+/*!
+ * jQuery Color Animations v2.1.2
+ * https://github.com/jquery/jquery-color
+ *
+ * Copyright 2014 jQuery Foundation and other contributors
+ * Released under the MIT license.
+ * http://jquery.org/license
+ *
+ * Date: Wed Jan 16 08:47:09 2013 -0600
+ */
+( function( jQuery, undefined ) {
+
+	var stepHooks = "backgroundColor borderBottomColor borderLeftColor borderRightColor " +
+		"borderTopColor color columnRuleColor outlineColor textDecorationColor textEmphasisColor",
+
+	// Plusequals test for += 100 -= 100
+	rplusequals = /^([\-+])=\s*(\d+\.?\d*)/,
+
+	// A set of RE's that can match strings and generate color tuples.
+	stringParsers = [ {
+			re: /rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*(?:,\s*(\d?(?:\.\d+)?)\s*)?\)/,
+			parse: function( execResult ) {
+				return [
+					execResult[ 1 ],
+					execResult[ 2 ],
+					execResult[ 3 ],
+					execResult[ 4 ]
+				];
+			}
+		}, {
+			re: /rgba?\(\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*(?:,\s*(\d?(?:\.\d+)?)\s*)?\)/,
+			parse: function( execResult ) {
+				return [
+					execResult[ 1 ] * 2.55,
+					execResult[ 2 ] * 2.55,
+					execResult[ 3 ] * 2.55,
+					execResult[ 4 ]
+				];
+			}
+		}, {
+
+			// This regex ignores A-F because it's compared against an already lowercased string
+			re: /#([a-f0-9]{2})([a-f0-9]{2})([a-f0-9]{2})/,
+			parse: function( execResult ) {
+				return [
+					parseInt( execResult[ 1 ], 16 ),
+					parseInt( execResult[ 2 ], 16 ),
+					parseInt( execResult[ 3 ], 16 )
+				];
+			}
+		}, {
+
+			// This regex ignores A-F because it's compared against an already lowercased string
+			re: /#([a-f0-9])([a-f0-9])([a-f0-9])/,
+			parse: function( execResult ) {
+				return [
+					parseInt( execResult[ 1 ] + execResult[ 1 ], 16 ),
+					parseInt( execResult[ 2 ] + execResult[ 2 ], 16 ),
+					parseInt( execResult[ 3 ] + execResult[ 3 ], 16 )
+				];
+			}
+		}, {
+			re: /hsla?\(\s*(\d+(?:\.\d+)?)\s*,\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*(?:,\s*(\d?(?:\.\d+)?)\s*)?\)/,
+			space: "hsla",
+			parse: function( execResult ) {
+				return [
+					execResult[ 1 ],
+					execResult[ 2 ] / 100,
+					execResult[ 3 ] / 100,
+					execResult[ 4 ]
+				];
+			}
+		} ],
+
+	// JQuery.Color( )
+	color = jQuery.Color = function( color, green, blue, alpha ) {
+		return new jQuery.Color.fn.parse( color, green, blue, alpha );
+	},
+	spaces = {
+		rgba: {
+			props: {
+				red: {
+					idx: 0,
+					type: "byte"
+				},
+				green: {
+					idx: 1,
+					type: "byte"
+				},
+				blue: {
+					idx: 2,
+					type: "byte"
+				}
+			}
+		},
+
+		hsla: {
+			props: {
+				hue: {
+					idx: 0,
+					type: "degrees"
+				},
+				saturation: {
+					idx: 1,
+					type: "percent"
+				},
+				lightness: {
+					idx: 2,
+					type: "percent"
+				}
+			}
+		}
+	},
+	propTypes = {
+		"byte": {
+			floor: true,
+			max: 255
+		},
+		"percent": {
+			max: 1
+		},
+		"degrees": {
+			mod: 360,
+			floor: true
+		}
+	},
+	support = color.support = {},
+
+	// Element for support tests
+	supportElem = jQuery( "<p>" )[ 0 ],
+
+	// Colors = jQuery.Color.names
+	colors,
+
+	// Local aliases of functions called often
+	each = jQuery.each;
+
+// Determine rgba support immediately
+supportElem.style.cssText = "background-color:rgba(1,1,1,.5)";
+support.rgba = supportElem.style.backgroundColor.indexOf( "rgba" ) > -1;
+
+// Define cache name and alpha properties
+// for rgba and hsla spaces
+each( spaces, function( spaceName, space ) {
+	space.cache = "_" + spaceName;
+	space.props.alpha = {
+		idx: 3,
+		type: "percent",
+		def: 1
+	};
+} );
+
+function clamp( value, prop, allowEmpty ) {
+	var type = propTypes[ prop.type ] || {};
+
+	if ( value == null ) {
+		return ( allowEmpty || !prop.def ) ? null : prop.def;
+	}
+
+	// ~~ is an short way of doing floor for positive numbers
+	value = type.floor ? ~~value : parseFloat( value );
+
+	// IE will pass in empty strings as value for alpha,
+	// which will hit this case
+	if ( isNaN( value ) ) {
+		return prop.def;
+	}
+
+	if ( type.mod ) {
+
+		// We add mod before modding to make sure that negatives values
+		// get converted properly: -10 -> 350
+		return ( value + type.mod ) % type.mod;
+	}
+
+	// For now all property types without mod have min and max
+	return 0 > value ? 0 : type.max < value ? type.max : value;
+}
+
+function stringParse( string ) {
+	var inst = color(),
+		rgba = inst._rgba = [];
+
+	string = string.toLowerCase();
+
+	each( stringParsers, function( i, parser ) {
+		var parsed,
+			match = parser.re.exec( string ),
+			values = match && parser.parse( match ),
+			spaceName = parser.space || "rgba";
+
+		if ( values ) {
+			parsed = inst[ spaceName ]( values );
+
+			// If this was an rgba parse the assignment might happen twice
+			// oh well....
+			inst[ spaces[ spaceName ].cache ] = parsed[ spaces[ spaceName ].cache ];
+			rgba = inst._rgba = parsed._rgba;
+
+			// Exit each( stringParsers ) here because we matched
+			return false;
+		}
+	} );
+
+	// Found a stringParser that handled it
+	if ( rgba.length ) {
+
+		// If this came from a parsed string, force "transparent" when alpha is 0
+		// chrome, (and maybe others) return "transparent" as rgba(0,0,0,0)
+		if ( rgba.join() === "0,0,0,0" ) {
+			jQuery.extend( rgba, colors.transparent );
+		}
+		return inst;
+	}
+
+	// Named colors
+	return colors[ string ];
+}
+
+color.fn = jQuery.extend( color.prototype, {
+	parse: function( red, green, blue, alpha ) {
+		if ( red === undefined ) {
+			this._rgba = [ null, null, null, null ];
+			return this;
+		}
+		if ( red.jquery || red.nodeType ) {
+			red = jQuery( red ).css( green );
+			green = undefined;
+		}
+
+		var inst = this,
+			type = jQuery.type( red ),
+			rgba = this._rgba = [];
+
+		// More than 1 argument specified - assume ( red, green, blue, alpha )
+		if ( green !== undefined ) {
+			red = [ red, green, blue, alpha ];
+			type = "array";
+		}
+
+		if ( type === "string" ) {
+			return this.parse( stringParse( red ) || colors._default );
+		}
+
+		if ( type === "array" ) {
+			each( spaces.rgba.props, function( key, prop ) {
+				rgba[ prop.idx ] = clamp( red[ prop.idx ], prop );
+			} );
+			return this;
+		}
+
+		if ( type === "object" ) {
+			if ( red instanceof color ) {
+				each( spaces, function( spaceName, space ) {
+					if ( red[ space.cache ] ) {
+						inst[ space.cache ] = red[ space.cache ].slice();
+					}
+				} );
+			} else {
+				each( spaces, function( spaceName, space ) {
+					var cache = space.cache;
+					each( space.props, function( key, prop ) {
+
+						// If the cache doesn't exist, and we know how to convert
+						if ( !inst[ cache ] && space.to ) {
+
+							// If the value was null, we don't need to copy it
+							// if the key was alpha, we don't need to copy it either
+							if ( key === "alpha" || red[ key ] == null ) {
+								return;
+							}
+							inst[ cache ] = space.to( inst._rgba );
+						}
+
+						// This is the only case where we allow nulls for ALL properties.
+						// call clamp with alwaysAllowEmpty
+						inst[ cache ][ prop.idx ] = clamp( red[ key ], prop, true );
+					} );
+
+					// Everything defined but alpha?
+					if ( inst[ cache ] &&
+							jQuery.inArray( null, inst[ cache ].slice( 0, 3 ) ) < 0 ) {
+
+						// Use the default of 1
+						inst[ cache ][ 3 ] = 1;
+						if ( space.from ) {
+							inst._rgba = space.from( inst[ cache ] );
+						}
+					}
+				} );
+			}
+			return this;
+		}
+	},
+	is: function( compare ) {
+		var is = color( compare ),
+			same = true,
+			inst = this;
+
+		each( spaces, function( _, space ) {
+			var localCache,
+				isCache = is[ space.cache ];
+			if ( isCache ) {
+				localCache = inst[ space.cache ] || space.to && space.to( inst._rgba ) || [];
+				each( space.props, function( _, prop ) {
+					if ( isCache[ prop.idx ] != null ) {
+						same = ( isCache[ prop.idx ] === localCache[ prop.idx ] );
+						return same;
+					}
+				} );
+			}
+			return same;
+		} );
+		return same;
+	},
+	_space: function() {
+		var used = [],
+			inst = this;
+		each( spaces, function( spaceName, space ) {
+			if ( inst[ space.cache ] ) {
+				used.push( spaceName );
+			}
+		} );
+		return used.pop();
+	},
+	transition: function( other, distance ) {
+		var end = color( other ),
+			spaceName = end._space(),
+			space = spaces[ spaceName ],
+			startColor = this.alpha() === 0 ? color( "transparent" ) : this,
+			start = startColor[ space.cache ] || space.to( startColor._rgba ),
+			result = start.slice();
+
+		end = end[ space.cache ];
+		each( space.props, function( key, prop ) {
+			var index = prop.idx,
+				startValue = start[ index ],
+				endValue = end[ index ],
+				type = propTypes[ prop.type ] || {};
+
+			// If null, don't override start value
+			if ( endValue === null ) {
+				return;
+			}
+
+			// If null - use end
+			if ( startValue === null ) {
+				result[ index ] = endValue;
+			} else {
+				if ( type.mod ) {
+					if ( endValue - startValue > type.mod / 2 ) {
+						startValue += type.mod;
+					} else if ( startValue - endValue > type.mod / 2 ) {
+						startValue -= type.mod;
+					}
+				}
+				result[ index ] = clamp( ( endValue - startValue ) * distance + startValue, prop );
+			}
+		} );
+		return this[ spaceName ]( result );
+	},
+	blend: function( opaque ) {
+
+		// If we are already opaque - return ourself
+		if ( this._rgba[ 3 ] === 1 ) {
+			return this;
+		}
+
+		var rgb = this._rgba.slice(),
+			a = rgb.pop(),
+			blend = color( opaque )._rgba;
+
+		return color( jQuery.map( rgb, function( v, i ) {
+			return ( 1 - a ) * blend[ i ] + a * v;
+		} ) );
+	},
+	toRgbaString: function() {
+		var prefix = "rgba(",
+			rgba = jQuery.map( this._rgba, function( v, i ) {
+				return v == null ? ( i > 2 ? 1 : 0 ) : v;
+			} );
+
+		if ( rgba[ 3 ] === 1 ) {
+			rgba.pop();
+			prefix = "rgb(";
+		}
+
+		return prefix + rgba.join() + ")";
+	},
+	toHslaString: function() {
+		var prefix = "hsla(",
+			hsla = jQuery.map( this.hsla(), function( v, i ) {
+				if ( v == null ) {
+					v = i > 2 ? 1 : 0;
+				}
+
+				// Catch 1 and 2
+				if ( i && i < 3 ) {
+					v = Math.round( v * 100 ) + "%";
+				}
+				return v;
+			} );
+
+		if ( hsla[ 3 ] === 1 ) {
+			hsla.pop();
+			prefix = "hsl(";
+		}
+		return prefix + hsla.join() + ")";
+	},
+	toHexString: function( includeAlpha ) {
+		var rgba = this._rgba.slice(),
+			alpha = rgba.pop();
+
+		if ( includeAlpha ) {
+			rgba.push( ~~( alpha * 255 ) );
+		}
+
+		return "#" + jQuery.map( rgba, function( v ) {
+
+			// Default to 0 when nulls exist
+			v = ( v || 0 ).toString( 16 );
+			return v.length === 1 ? "0" + v : v;
+		} ).join( "" );
+	},
+	toString: function() {
+		return this._rgba[ 3 ] === 0 ? "transparent" : this.toRgbaString();
+	}
+} );
+color.fn.parse.prototype = color.fn;
+
+// Hsla conversions adapted from:
+// https://code.google.com/p/maashaack/source/browse/packages/graphics/trunk/src/graphics/colors/HUE2RGB.as?r=5021
+
+function hue2rgb( p, q, h ) {
+	h = ( h + 1 ) % 1;
+	if ( h * 6 < 1 ) {
+		return p + ( q - p ) * h * 6;
+	}
+	if ( h * 2 < 1 ) {
+		return q;
+	}
+	if ( h * 3 < 2 ) {
+		return p + ( q - p ) * ( ( 2 / 3 ) - h ) * 6;
+	}
+	return p;
+}
+
+spaces.hsla.to = function( rgba ) {
+	if ( rgba[ 0 ] == null || rgba[ 1 ] == null || rgba[ 2 ] == null ) {
+		return [ null, null, null, rgba[ 3 ] ];
+	}
+	var r = rgba[ 0 ] / 255,
+		g = rgba[ 1 ] / 255,
+		b = rgba[ 2 ] / 255,
+		a = rgba[ 3 ],
+		max = Math.max( r, g, b ),
+		min = Math.min( r, g, b ),
+		diff = max - min,
+		add = max + min,
+		l = add * 0.5,
+		h, s;
+
+	if ( min === max ) {
+		h = 0;
+	} else if ( r === max ) {
+		h = ( 60 * ( g - b ) / diff ) + 360;
+	} else if ( g === max ) {
+		h = ( 60 * ( b - r ) / diff ) + 120;
+	} else {
+		h = ( 60 * ( r - g ) / diff ) + 240;
+	}
+
+	// Chroma (diff) == 0 means greyscale which, by definition, saturation = 0%
+	// otherwise, saturation is based on the ratio of chroma (diff) to lightness (add)
+	if ( diff === 0 ) {
+		s = 0;
+	} else if ( l <= 0.5 ) {
+		s = diff / add;
+	} else {
+		s = diff / ( 2 - add );
+	}
+	return [ Math.round( h ) % 360, s, l, a == null ? 1 : a ];
+};
+
+spaces.hsla.from = function( hsla ) {
+	if ( hsla[ 0 ] == null || hsla[ 1 ] == null || hsla[ 2 ] == null ) {
+		return [ null, null, null, hsla[ 3 ] ];
+	}
+	var h = hsla[ 0 ] / 360,
+		s = hsla[ 1 ],
+		l = hsla[ 2 ],
+		a = hsla[ 3 ],
+		q = l <= 0.5 ? l * ( 1 + s ) : l + s - l * s,
+		p = 2 * l - q;
+
+	return [
+		Math.round( hue2rgb( p, q, h + ( 1 / 3 ) ) * 255 ),
+		Math.round( hue2rgb( p, q, h ) * 255 ),
+		Math.round( hue2rgb( p, q, h - ( 1 / 3 ) ) * 255 ),
+		a
+	];
+};
+
+each( spaces, function( spaceName, space ) {
+	var props = space.props,
+		cache = space.cache,
+		to = space.to,
+		from = space.from;
+
+	// Makes rgba() and hsla()
+	color.fn[ spaceName ] = function( value ) {
+
+		// Generate a cache for this space if it doesn't exist
+		if ( to && !this[ cache ] ) {
+			this[ cache ] = to( this._rgba );
+		}
+		if ( value === undefined ) {
+			return this[ cache ].slice();
+		}
+
+		var ret,
+			type = jQuery.type( value ),
+			arr = ( type === "array" || type === "object" ) ? value : arguments,
+			local = this[ cache ].slice();
+
+		each( props, function( key, prop ) {
+			var val = arr[ type === "object" ? key : prop.idx ];
+			if ( val == null ) {
+				val = local[ prop.idx ];
+			}
+			local[ prop.idx ] = clamp( val, prop );
+		} );
+
+		if ( from ) {
+			ret = color( from( local ) );
+			ret[ cache ] = local;
+			return ret;
+		} else {
+			return color( local );
+		}
+	};
+
+	// Makes red() green() blue() alpha() hue() saturation() lightness()
+	each( props, function( key, prop ) {
+
+		// Alpha is included in more than one space
+		if ( color.fn[ key ] ) {
+			return;
+		}
+		color.fn[ key ] = function( value ) {
+			var vtype = jQuery.type( value ),
+				fn = ( key === "alpha" ? ( this._hsla ? "hsla" : "rgba" ) : spaceName ),
+				local = this[ fn ](),
+				cur = local[ prop.idx ],
+				match;
+
+			if ( vtype === "undefined" ) {
+				return cur;
+			}
+
+			if ( vtype === "function" ) {
+				value = value.call( this, cur );
+				vtype = jQuery.type( value );
+			}
+			if ( value == null && prop.empty ) {
+				return this;
+			}
+			if ( vtype === "string" ) {
+				match = rplusequals.exec( value );
+				if ( match ) {
+					value = cur + parseFloat( match[ 2 ] ) * ( match[ 1 ] === "+" ? 1 : -1 );
+				}
+			}
+			local[ prop.idx ] = value;
+			return this[ fn ]( local );
+		};
+	} );
+} );
+
+// Add cssHook and .fx.step function for each named hook.
+// accept a space separated string of properties
+color.hook = function( hook ) {
+	var hooks = hook.split( " " );
+	each( hooks, function( i, hook ) {
+		jQuery.cssHooks[ hook ] = {
+			set: function( elem, value ) {
+				var parsed, curElem,
+					backgroundColor = "";
+
+				if ( value !== "transparent" && ( jQuery.type( value ) !== "string" ||
+						( parsed = stringParse( value ) ) ) ) {
+					value = color( parsed || value );
+					if ( !support.rgba && value._rgba[ 3 ] !== 1 ) {
+						curElem = hook === "backgroundColor" ? elem.parentNode : elem;
+						while (
+							( backgroundColor === "" || backgroundColor === "transparent" ) &&
+							curElem && curElem.style
+						) {
+							try {
+								backgroundColor = jQuery.css( curElem, "backgroundColor" );
+								curElem = curElem.parentNode;
+							} catch ( e ) {
+							}
+						}
+
+						value = value.blend( backgroundColor && backgroundColor !== "transparent" ?
+							backgroundColor :
+							"_default" );
+					}
+
+					value = value.toRgbaString();
+				}
+				try {
+					elem.style[ hook ] = value;
+				} catch ( e ) {
+
+					// Wrapped to prevent IE from throwing errors on "invalid" values like
+					// 'auto' or 'inherit'
+				}
+			}
+		};
+		jQuery.fx.step[ hook ] = function( fx ) {
+			if ( !fx.colorInit ) {
+				fx.start = color( fx.elem, hook );
+				fx.end = color( fx.end );
+				fx.colorInit = true;
+			}
+			jQuery.cssHooks[ hook ].set( fx.elem, fx.start.transition( fx.end, fx.pos ) );
+		};
+	} );
+
+};
+
+color.hook( stepHooks );
+
+jQuery.cssHooks.borderColor = {
+	expand: function( value ) {
+		var expanded = {};
+
+		each( [ "Top", "Right", "Bottom", "Left" ], function( i, part ) {
+			expanded[ "border" + part + "Color" ] = value;
+		} );
+		return expanded;
+	}
+};
+
+// Basic color names only.
+// Usage of any of the other color names requires adding yourself or including
+// jquery.color.svg-names.js.
+colors = jQuery.Color.names = {
+
+	// 4.1. Basic color keywords
+	aqua: "#00ffff",
+	black: "#000000",
+	blue: "#0000ff",
+	fuchsia: "#ff00ff",
+	gray: "#808080",
+	green: "#008000",
+	lime: "#00ff00",
+	maroon: "#800000",
+	navy: "#000080",
+	olive: "#808000",
+	purple: "#800080",
+	red: "#ff0000",
+	silver: "#c0c0c0",
+	teal: "#008080",
+	white: "#ffffff",
+	yellow: "#ffff00",
+
+	// 4.2.3. "transparent" color keyword
+	transparent: [ null, null, null, 0 ],
+
+	_default: "#ffffff"
+};
+
+} )( jQuery );
+
+/******************************************************************************/
+/****************************** CLASS ANIMATIONS ******************************/
+/******************************************************************************/
+( function() {
+
+var classAnimationActions = [ "add", "remove", "toggle" ],
+	shorthandStyles = {
+		border: 1,
+		borderBottom: 1,
+		borderColor: 1,
+		borderLeft: 1,
+		borderRight: 1,
+		borderTop: 1,
+		borderWidth: 1,
+		margin: 1,
+		padding: 1
+	};
+
+$.each(
+	[ "borderLeftStyle", "borderRightStyle", "borderBottomStyle", "borderTopStyle" ],
+	function( _, prop ) {
+		$.fx.step[ prop ] = function( fx ) {
+			if ( fx.end !== "none" && !fx.setAttr || fx.pos === 1 && !fx.setAttr ) {
+				jQuery.style( fx.elem, prop, fx.end );
+				fx.setAttr = true;
+			}
+		};
+	}
+);
+
+function getElementStyles( elem ) {
+	var key, len,
+		style = elem.ownerDocument.defaultView ?
+			elem.ownerDocument.defaultView.getComputedStyle( elem, null ) :
+			elem.currentStyle,
+		styles = {};
+
+	if ( style && style.length && style[ 0 ] && style[ style[ 0 ] ] ) {
+		len = style.length;
+		while ( len-- ) {
+			key = style[ len ];
+			if ( typeof style[ key ] === "string" ) {
+				styles[ $.camelCase( key ) ] = style[ key ];
+			}
+		}
+
+	// Support: Opera, IE <9
+	} else {
+		for ( key in style ) {
+			if ( typeof style[ key ] === "string" ) {
+				styles[ key ] = style[ key ];
+			}
+		}
+	}
+
+	return styles;
+}
+
+function styleDifference( oldStyle, newStyle ) {
+	var diff = {},
+		name, value;
+
+	for ( name in newStyle ) {
+		value = newStyle[ name ];
+		if ( oldStyle[ name ] !== value ) {
+			if ( !shorthandStyles[ name ] ) {
+				if ( $.fx.step[ name ] || !isNaN( parseFloat( value ) ) ) {
+					diff[ name ] = value;
+				}
+			}
+		}
+	}
+
+	return diff;
+}
+
+// Support: jQuery <1.8
+if ( !$.fn.addBack ) {
+	$.fn.addBack = function( selector ) {
+		return this.add( selector == null ?
+			this.prevObject : this.prevObject.filter( selector )
+		);
+	};
+}
+
+$.effects.animateClass = function( value, duration, easing, callback ) {
+	var o = $.speed( duration, easing, callback );
+
+	return this.queue( function() {
+		var animated = $( this ),
+			baseClass = animated.attr( "class" ) || "",
+			applyClassChange,
+			allAnimations = o.children ? animated.find( "*" ).addBack() : animated;
+
+		// Map the animated objects to store the original styles.
+		allAnimations = allAnimations.map( function() {
+			var el = $( this );
+			return {
+				el: el,
+				start: getElementStyles( this )
+			};
+		} );
+
+		// Apply class change
+		applyClassChange = function() {
+			$.each( classAnimationActions, function( i, action ) {
+				if ( value[ action ] ) {
+					animated[ action + "Class" ]( value[ action ] );
+				}
+			} );
+		};
+		applyClassChange();
+
+		// Map all animated objects again - calculate new styles and diff
+		allAnimations = allAnimations.map( function() {
+			this.end = getElementStyles( this.el[ 0 ] );
+			this.diff = styleDifference( this.start, this.end );
+			return this;
+		} );
+
+		// Apply original class
+		animated.attr( "class", baseClass );
+
+		// Map all animated objects again - this time collecting a promise
+		allAnimations = allAnimations.map( function() {
+			var styleInfo = this,
+				dfd = $.Deferred(),
+				opts = $.extend( {}, o, {
+					queue: false,
+					complete: function() {
+						dfd.resolve( styleInfo );
+					}
+				} );
+
+			this.el.animate( this.diff, opts );
+			return dfd.promise();
+		} );
+
+		// Once all animations have completed:
+		$.when.apply( $, allAnimations.get() ).done( function() {
+
+			// Set the final class
+			applyClassChange();
+
+			// For each animated element,
+			// clear all css properties that were animated
+			$.each( arguments, function() {
+				var el = this.el;
+				$.each( this.diff, function( key ) {
+					el.css( key, "" );
+				} );
+			} );
+
+			// This is guarnteed to be there if you use jQuery.speed()
+			// it also handles dequeuing the next anim...
+			o.complete.call( animated[ 0 ] );
+		} );
+	} );
+};
+
+$.fn.extend( {
+	addClass: ( function( orig ) {
+		return function( classNames, speed, easing, callback ) {
+			return speed ?
+				$.effects.animateClass.call( this,
+					{ add: classNames }, speed, easing, callback ) :
+				orig.apply( this, arguments );
+		};
+	} )( $.fn.addClass ),
+
+	removeClass: ( function( orig ) {
+		return function( classNames, speed, easing, callback ) {
+			return arguments.length > 1 ?
+				$.effects.animateClass.call( this,
+					{ remove: classNames }, speed, easing, callback ) :
+				orig.apply( this, arguments );
+		};
+	} )( $.fn.removeClass ),
+
+	toggleClass: ( function( orig ) {
+		return function( classNames, force, speed, easing, callback ) {
+			if ( typeof force === "boolean" || force === undefined ) {
+				if ( !speed ) {
+
+					// Without speed parameter
+					return orig.apply( this, arguments );
+				} else {
+					return $.effects.animateClass.call( this,
+						( force ? { add: classNames } : { remove: classNames } ),
+						speed, easing, callback );
+				}
+			} else {
+
+				// Without force parameter
+				return $.effects.animateClass.call( this,
+					{ toggle: classNames }, force, speed, easing );
+			}
+		};
+	} )( $.fn.toggleClass ),
+
+	switchClass: function( remove, add, speed, easing, callback ) {
+		return $.effects.animateClass.call( this, {
+			add: add,
+			remove: remove
+		}, speed, easing, callback );
+	}
+} );
+
+} )();
+
+/******************************************************************************/
+/*********************************** EFFECTS **********************************/
+/******************************************************************************/
+
+( function() {
+
+if ( $.expr && $.expr.filters && $.expr.filters.animated ) {
+	$.expr.filters.animated = ( function( orig ) {
+		return function( elem ) {
+			return !!$( elem ).data( dataSpaceAnimated ) || orig( elem );
+		};
+	} )( $.expr.filters.animated );
+}
+
+if ( $.uiBackCompat !== false ) {
+	$.extend( $.effects, {
+
+		// Saves a set of properties in a data storage
+		save: function( element, set ) {
+			var i = 0, length = set.length;
+			for ( ; i < length; i++ ) {
+				if ( set[ i ] !== null ) {
+					element.data( dataSpace + set[ i ], element[ 0 ].style[ set[ i ] ] );
+				}
+			}
+		},
+
+		// Restores a set of previously saved properties from a data storage
+		restore: function( element, set ) {
+			var val, i = 0, length = set.length;
+			for ( ; i < length; i++ ) {
+				if ( set[ i ] !== null ) {
+					val = element.data( dataSpace + set[ i ] );
+					element.css( set[ i ], val );
+				}
+			}
+		},
+
+		setMode: function( el, mode ) {
+			if ( mode === "toggle" ) {
+				mode = el.is( ":hidden" ) ? "show" : "hide";
+			}
+			return mode;
+		},
+
+		// Wraps the element around a wrapper that copies position properties
+		createWrapper: function( element ) {
+
+			// If the element is already wrapped, return it
+			if ( element.parent().is( ".ui-effects-wrapper" ) ) {
+				return element.parent();
+			}
+
+			// Wrap the element
+			var props = {
+					width: element.outerWidth( true ),
+					height: element.outerHeight( true ),
+					"float": element.css( "float" )
+				},
+				wrapper = $( "<div></div>" )
+					.addClass( "ui-effects-wrapper" )
+					.css( {
+						fontSize: "100%",
+						background: "transparent",
+						border: "none",
+						margin: 0,
+						padding: 0
+					} ),
+
+				// Store the size in case width/height are defined in % - Fixes #5245
+				size = {
+					width: element.width(),
+					height: element.height()
+				},
+				active = document.activeElement;
+
+			// Support: Firefox
+			// Firefox incorrectly exposes anonymous content
+			// https://bugzilla.mozilla.org/show_bug.cgi?id=561664
+			try {
+				active.id;
+			} catch ( e ) {
+				active = document.body;
+			}
+
+			element.wrap( wrapper );
+
+			// Fixes #7595 - Elements lose focus when wrapped.
+			if ( element[ 0 ] === active || $.contains( element[ 0 ], active ) ) {
+				$( active ).trigger( "focus" );
+			}
+
+			// Hotfix for jQuery 1.4 since some change in wrap() seems to actually
+			// lose the reference to the wrapped element
+			wrapper = element.parent();
+
+			// Transfer positioning properties to the wrapper
+			if ( element.css( "position" ) === "static" ) {
+				wrapper.css( { position: "relative" } );
+				element.css( { position: "relative" } );
+			} else {
+				$.extend( props, {
+					position: element.css( "position" ),
+					zIndex: element.css( "z-index" )
+				} );
+				$.each( [ "top", "left", "bottom", "right" ], function( i, pos ) {
+					props[ pos ] = element.css( pos );
+					if ( isNaN( parseInt( props[ pos ], 10 ) ) ) {
+						props[ pos ] = "auto";
+					}
+				} );
+				element.css( {
+					position: "relative",
+					top: 0,
+					left: 0,
+					right: "auto",
+					bottom: "auto"
+				} );
+			}
+			element.css( size );
+
+			return wrapper.css( props ).show();
+		},
+
+		removeWrapper: function( element ) {
+			var active = document.activeElement;
+
+			if ( element.parent().is( ".ui-effects-wrapper" ) ) {
+				element.parent().replaceWith( element );
+
+				// Fixes #7595 - Elements lose focus when wrapped.
+				if ( element[ 0 ] === active || $.contains( element[ 0 ], active ) ) {
+					$( active ).trigger( "focus" );
+				}
+			}
+
+			return element;
+		}
+	} );
+}
+
+$.extend( $.effects, {
+	version: "1.12.1",
+
+	define: function( name, mode, effect ) {
+		if ( !effect ) {
+			effect = mode;
+			mode = "effect";
+		}
+
+		$.effects.effect[ name ] = effect;
+		$.effects.effect[ name ].mode = mode;
+
+		return effect;
+	},
+
+	scaledDimensions: function( element, percent, direction ) {
+		if ( percent === 0 ) {
+			return {
+				height: 0,
+				width: 0,
+				outerHeight: 0,
+				outerWidth: 0
+			};
+		}
+
+		var x = direction !== "horizontal" ? ( ( percent || 100 ) / 100 ) : 1,
+			y = direction !== "vertical" ? ( ( percent || 100 ) / 100 ) : 1;
+
+		return {
+			height: element.height() * y,
+			width: element.width() * x,
+			outerHeight: element.outerHeight() * y,
+			outerWidth: element.outerWidth() * x
+		};
+
+	},
+
+	clipToBox: function( animation ) {
+		return {
+			width: animation.clip.right - animation.clip.left,
+			height: animation.clip.bottom - animation.clip.top,
+			left: animation.clip.left,
+			top: animation.clip.top
+		};
+	},
+
+	// Injects recently queued functions to be first in line (after "inprogress")
+	unshift: function( element, queueLength, count ) {
+		var queue = element.queue();
+
+		if ( queueLength > 1 ) {
+			queue.splice.apply( queue,
+				[ 1, 0 ].concat( queue.splice( queueLength, count ) ) );
+		}
+		element.dequeue();
+	},
+
+	saveStyle: function( element ) {
+		element.data( dataSpaceStyle, element[ 0 ].style.cssText );
+	},
+
+	restoreStyle: function( element ) {
+		element[ 0 ].style.cssText = element.data( dataSpaceStyle ) || "";
+		element.removeData( dataSpaceStyle );
+	},
+
+	mode: function( element, mode ) {
+		var hidden = element.is( ":hidden" );
+
+		if ( mode === "toggle" ) {
+			mode = hidden ? "show" : "hide";
+		}
+		if ( hidden ? mode === "hide" : mode === "show" ) {
+			mode = "none";
+		}
+		return mode;
+	},
+
+	// Translates a [top,left] array into a baseline value
+	getBaseline: function( origin, original ) {
+		var y, x;
+
+		switch ( origin[ 0 ] ) {
+		case "top":
+			y = 0;
+			break;
+		case "middle":
+			y = 0.5;
+			break;
+		case "bottom":
+			y = 1;
+			break;
+		default:
+			y = origin[ 0 ] / original.height;
+		}
+
+		switch ( origin[ 1 ] ) {
+		case "left":
+			x = 0;
+			break;
+		case "center":
+			x = 0.5;
+			break;
+		case "right":
+			x = 1;
+			break;
+		default:
+			x = origin[ 1 ] / original.width;
+		}
+
+		return {
+			x: x,
+			y: y
+		};
+	},
+
+	// Creates a placeholder element so that the original element can be made absolute
+	createPlaceholder: function( element ) {
+		var placeholder,
+			cssPosition = element.css( "position" ),
+			position = element.position();
+
+		// Lock in margins first to account for form elements, which
+		// will change margin if you explicitly set height
+		// see: http://jsfiddle.net/JZSMt/3/ https://bugs.webkit.org/show_bug.cgi?id=107380
+		// Support: Safari
+		element.css( {
+			marginTop: element.css( "marginTop" ),
+			marginBottom: element.css( "marginBottom" ),
+			marginLeft: element.css( "marginLeft" ),
+			marginRight: element.css( "marginRight" )
+		} )
+		.outerWidth( element.outerWidth() )
+		.outerHeight( element.outerHeight() );
+
+		if ( /^(static|relative)/.test( cssPosition ) ) {
+			cssPosition = "absolute";
+
+			placeholder = $( "<" + element[ 0 ].nodeName + ">" ).insertAfter( element ).css( {
+
+				// Convert inline to inline block to account for inline elements
+				// that turn to inline block based on content (like img)
+				display: /^(inline|ruby)/.test( element.css( "display" ) ) ?
+					"inline-block" :
+					"block",
+				visibility: "hidden",
+
+				// Margins need to be set to account for margin collapse
+				marginTop: element.css( "marginTop" ),
+				marginBottom: element.css( "marginBottom" ),
+				marginLeft: element.css( "marginLeft" ),
+				marginRight: element.css( "marginRight" ),
+				"float": element.css( "float" )
+			} )
+			.outerWidth( element.outerWidth() )
+			.outerHeight( element.outerHeight() )
+			.addClass( "ui-effects-placeholder" );
+
+			element.data( dataSpace + "placeholder", placeholder );
+		}
+
+		element.css( {
+			position: cssPosition,
+			left: position.left,
+			top: position.top
+		} );
+
+		return placeholder;
+	},
+
+	removePlaceholder: function( element ) {
+		var dataKey = dataSpace + "placeholder",
+				placeholder = element.data( dataKey );
+
+		if ( placeholder ) {
+			placeholder.remove();
+			element.removeData( dataKey );
+		}
+	},
+
+	// Removes a placeholder if it exists and restores
+	// properties that were modified during placeholder creation
+	cleanUp: function( element ) {
+		$.effects.restoreStyle( element );
+		$.effects.removePlaceholder( element );
+	},
+
+	setTransition: function( element, list, factor, value ) {
+		value = value || {};
+		$.each( list, function( i, x ) {
+			var unit = element.cssUnit( x );
+			if ( unit[ 0 ] > 0 ) {
+				value[ x ] = unit[ 0 ] * factor + unit[ 1 ];
+			}
+		} );
+		return value;
+	}
+} );
+
+// Return an effect options object for the given parameters:
+function _normalizeArguments( effect, options, speed, callback ) {
+
+	// Allow passing all options as the first parameter
+	if ( $.isPlainObject( effect ) ) {
+		options = effect;
+		effect = effect.effect;
+	}
+
+	// Convert to an object
+	effect = { effect: effect };
+
+	// Catch (effect, null, ...)
+	if ( options == null ) {
+		options = {};
+	}
+
+	// Catch (effect, callback)
+	if ( $.isFunction( options ) ) {
+		callback = options;
+		speed = null;
+		options = {};
+	}
+
+	// Catch (effect, speed, ?)
+	if ( typeof options === "number" || $.fx.speeds[ options ] ) {
+		callback = speed;
+		speed = options;
+		options = {};
+	}
+
+	// Catch (effect, options, callback)
+	if ( $.isFunction( speed ) ) {
+		callback = speed;
+		speed = null;
+	}
+
+	// Add options to effect
+	if ( options ) {
+		$.extend( effect, options );
+	}
+
+	speed = speed || options.duration;
+	effect.duration = $.fx.off ? 0 :
+		typeof speed === "number" ? speed :
+		speed in $.fx.speeds ? $.fx.speeds[ speed ] :
+		$.fx.speeds._default;
+
+	effect.complete = callback || options.complete;
+
+	return effect;
+}
+
+function standardAnimationOption( option ) {
+
+	// Valid standard speeds (nothing, number, named speed)
+	if ( !option || typeof option === "number" || $.fx.speeds[ option ] ) {
+		return true;
+	}
+
+	// Invalid strings - treat as "normal" speed
+	if ( typeof option === "string" && !$.effects.effect[ option ] ) {
+		return true;
+	}
+
+	// Complete callback
+	if ( $.isFunction( option ) ) {
+		return true;
+	}
+
+	// Options hash (but not naming an effect)
+	if ( typeof option === "object" && !option.effect ) {
+		return true;
+	}
+
+	// Didn't match any standard API
+	return false;
+}
+
+$.fn.extend( {
+	effect: function( /* effect, options, speed, callback */ ) {
+		var args = _normalizeArguments.apply( this, arguments ),
+			effectMethod = $.effects.effect[ args.effect ],
+			defaultMode = effectMethod.mode,
+			queue = args.queue,
+			queueName = queue || "fx",
+			complete = args.complete,
+			mode = args.mode,
+			modes = [],
+			prefilter = function( next ) {
+				var el = $( this ),
+					normalizedMode = $.effects.mode( el, mode ) || defaultMode;
+
+				// Sentinel for duck-punching the :animated psuedo-selector
+				el.data( dataSpaceAnimated, true );
+
+				// Save effect mode for later use,
+				// we can't just call $.effects.mode again later,
+				// as the .show() below destroys the initial state
+				modes.push( normalizedMode );
+
+				// See $.uiBackCompat inside of run() for removal of defaultMode in 1.13
+				if ( defaultMode && ( normalizedMode === "show" ||
+						( normalizedMode === defaultMode && normalizedMode === "hide" ) ) ) {
+					el.show();
+				}
+
+				if ( !defaultMode || normalizedMode !== "none" ) {
+					$.effects.saveStyle( el );
+				}
+
+				if ( $.isFunction( next ) ) {
+					next();
+				}
+			};
+
+		if ( $.fx.off || !effectMethod ) {
+
+			// Delegate to the original method (e.g., .show()) if possible
+			if ( mode ) {
+				return this[ mode ]( args.duration, complete );
+			} else {
+				return this.each( function() {
+					if ( complete ) {
+						complete.call( this );
+					}
+				} );
+			}
+		}
+
+		function run( next ) {
+			var elem = $( this );
+
+			function cleanup() {
+				elem.removeData( dataSpaceAnimated );
+
+				$.effects.cleanUp( elem );
+
+				if ( args.mode === "hide" ) {
+					elem.hide();
+				}
+
+				done();
+			}
+
+			function done() {
+				if ( $.isFunction( complete ) ) {
+					complete.call( elem[ 0 ] );
+				}
+
+				if ( $.isFunction( next ) ) {
+					next();
+				}
+			}
+
+			// Override mode option on a per element basis,
+			// as toggle can be either show or hide depending on element state
+			args.mode = modes.shift();
+
+			if ( $.uiBackCompat !== false && !defaultMode ) {
+				if ( elem.is( ":hidden" ) ? mode === "hide" : mode === "show" ) {
+
+					// Call the core method to track "olddisplay" properly
+					elem[ mode ]();
+					done();
+				} else {
+					effectMethod.call( elem[ 0 ], args, done );
+				}
+			} else {
+				if ( args.mode === "none" ) {
+
+					// Call the core method to track "olddisplay" properly
+					elem[ mode ]();
+					done();
+				} else {
+					effectMethod.call( elem[ 0 ], args, cleanup );
+				}
+			}
+		}
+
+		// Run prefilter on all elements first to ensure that
+		// any showing or hiding happens before placeholder creation,
+		// which ensures that any layout changes are correctly captured.
+		return queue === false ?
+			this.each( prefilter ).each( run ) :
+			this.queue( queueName, prefilter ).queue( queueName, run );
+	},
+
+	show: ( function( orig ) {
+		return function( option ) {
+			if ( standardAnimationOption( option ) ) {
+				return orig.apply( this, arguments );
+			} else {
+				var args = _normalizeArguments.apply( this, arguments );
+				args.mode = "show";
+				return this.effect.call( this, args );
+			}
+		};
+	} )( $.fn.show ),
+
+	hide: ( function( orig ) {
+		return function( option ) {
+			if ( standardAnimationOption( option ) ) {
+				return orig.apply( this, arguments );
+			} else {
+				var args = _normalizeArguments.apply( this, arguments );
+				args.mode = "hide";
+				return this.effect.call( this, args );
+			}
+		};
+	} )( $.fn.hide ),
+
+	toggle: ( function( orig ) {
+		return function( option ) {
+			if ( standardAnimationOption( option ) || typeof option === "boolean" ) {
+				return orig.apply( this, arguments );
+			} else {
+				var args = _normalizeArguments.apply( this, arguments );
+				args.mode = "toggle";
+				return this.effect.call( this, args );
+			}
+		};
+	} )( $.fn.toggle ),
+
+	cssUnit: function( key ) {
+		var style = this.css( key ),
+			val = [];
+
+		$.each( [ "em", "px", "%", "pt" ], function( i, unit ) {
+			if ( style.indexOf( unit ) > 0 ) {
+				val = [ parseFloat( style ), unit ];
+			}
+		} );
+		return val;
+	},
+
+	cssClip: function( clipObj ) {
+		if ( clipObj ) {
+			return this.css( "clip", "rect(" + clipObj.top + "px " + clipObj.right + "px " +
+				clipObj.bottom + "px " + clipObj.left + "px)" );
+		}
+		return parseClip( this.css( "clip" ), this );
+	},
+
+	transfer: function( options, done ) {
+		var element = $( this ),
+			target = $( options.to ),
+			targetFixed = target.css( "position" ) === "fixed",
+			body = $( "body" ),
+			fixTop = targetFixed ? body.scrollTop() : 0,
+			fixLeft = targetFixed ? body.scrollLeft() : 0,
+			endPosition = target.offset(),
+			animation = {
+				top: endPosition.top - fixTop,
+				left: endPosition.left - fixLeft,
+				height: target.innerHeight(),
+				width: target.innerWidth()
+			},
+			startPosition = element.offset(),
+			transfer = $( "<div class='ui-effects-transfer'></div>" )
+				.appendTo( "body" )
+				.addClass( options.className )
+				.css( {
+					top: startPosition.top - fixTop,
+					left: startPosition.left - fixLeft,
+					height: element.innerHeight(),
+					width: element.innerWidth(),
+					position: targetFixed ? "fixed" : "absolute"
+				} )
+				.animate( animation, options.duration, options.easing, function() {
+					transfer.remove();
+					if ( $.isFunction( done ) ) {
+						done();
+					}
+				} );
+	}
+} );
+
+function parseClip( str, element ) {
+		var outerWidth = element.outerWidth(),
+			outerHeight = element.outerHeight(),
+			clipRegex = /^rect\((-?\d*\.?\d*px|-?\d+%|auto),?\s*(-?\d*\.?\d*px|-?\d+%|auto),?\s*(-?\d*\.?\d*px|-?\d+%|auto),?\s*(-?\d*\.?\d*px|-?\d+%|auto)\)$/,
+			values = clipRegex.exec( str ) || [ "", 0, outerWidth, outerHeight, 0 ];
+
+		return {
+			top: parseFloat( values[ 1 ] ) || 0,
+			right: values[ 2 ] === "auto" ? outerWidth : parseFloat( values[ 2 ] ),
+			bottom: values[ 3 ] === "auto" ? outerHeight : parseFloat( values[ 3 ] ),
+			left: parseFloat( values[ 4 ] ) || 0
+		};
+}
+
+$.fx.step.clip = function( fx ) {
+	if ( !fx.clipInit ) {
+		fx.start = $( fx.elem ).cssClip();
+		if ( typeof fx.end === "string" ) {
+			fx.end = parseClip( fx.end, fx.elem );
+		}
+		fx.clipInit = true;
+	}
+
+	$( fx.elem ).cssClip( {
+		top: fx.pos * ( fx.end.top - fx.start.top ) + fx.start.top,
+		right: fx.pos * ( fx.end.right - fx.start.right ) + fx.start.right,
+		bottom: fx.pos * ( fx.end.bottom - fx.start.bottom ) + fx.start.bottom,
+		left: fx.pos * ( fx.end.left - fx.start.left ) + fx.start.left
+	} );
+};
+
+} )();
+
+/******************************************************************************/
+/*********************************** EASING ***********************************/
+/******************************************************************************/
+
+( function() {
+
+// Based on easing equations from Robert Penner (http://www.robertpenner.com/easing)
+
+var baseEasings = {};
+
+$.each( [ "Quad", "Cubic", "Quart", "Quint", "Expo" ], function( i, name ) {
+	baseEasings[ name ] = function( p ) {
+		return Math.pow( p, i + 2 );
+	};
+} );
+
+$.extend( baseEasings, {
+	Sine: function( p ) {
+		return 1 - Math.cos( p * Math.PI / 2 );
+	},
+	Circ: function( p ) {
+		return 1 - Math.sqrt( 1 - p * p );
+	},
+	Elastic: function( p ) {
+		return p === 0 || p === 1 ? p :
+			-Math.pow( 2, 8 * ( p - 1 ) ) * Math.sin( ( ( p - 1 ) * 80 - 7.5 ) * Math.PI / 15 );
+	},
+	Back: function( p ) {
+		return p * p * ( 3 * p - 2 );
+	},
+	Bounce: function( p ) {
+		var pow2,
+			bounce = 4;
+
+		while ( p < ( ( pow2 = Math.pow( 2, --bounce ) ) - 1 ) / 11 ) {}
+		return 1 / Math.pow( 4, 3 - bounce ) - 7.5625 * Math.pow( ( pow2 * 3 - 2 ) / 22 - p, 2 );
+	}
+} );
+
+$.each( baseEasings, function( name, easeIn ) {
+	$.easing[ "easeIn" + name ] = easeIn;
+	$.easing[ "easeOut" + name ] = function( p ) {
+		return 1 - easeIn( 1 - p );
+	};
+	$.easing[ "easeInOut" + name ] = function( p ) {
+		return p < 0.5 ?
+			easeIn( p * 2 ) / 2 :
+			1 - easeIn( p * -2 + 2 ) / 2;
+	};
+} );
+
+} )();
+
+var effect = $.effects;
+
+
+/*!
+ * jQuery UI Effects Blind 1.12.1
+ * http://jqueryui.com
+ *
+ * Copyright jQuery Foundation and other contributors
+ * Released under the MIT license.
+ * http://jquery.org/license
+ */
+
+//>>label: Blind Effect
+//>>group: Effects
+//>>description: Blinds the element.
+//>>docs: http://api.jqueryui.com/blind-effect/
+//>>demos: http://jqueryui.com/effect/
+
+
+
+var effectsEffectBlind = $.effects.define( "blind", "hide", function( options, done ) {
+	var map = {
+			up: [ "bottom", "top" ],
+			vertical: [ "bottom", "top" ],
+			down: [ "top", "bottom" ],
+			left: [ "right", "left" ],
+			horizontal: [ "right", "left" ],
+			right: [ "left", "right" ]
+		},
+		element = $( this ),
+		direction = options.direction || "up",
+		start = element.cssClip(),
+		animate = { clip: $.extend( {}, start ) },
+		placeholder = $.effects.createPlaceholder( element );
+
+	animate.clip[ map[ direction ][ 0 ] ] = animate.clip[ map[ direction ][ 1 ] ];
+
+	if ( options.mode === "show" ) {
+		element.cssClip( animate.clip );
+		if ( placeholder ) {
+			placeholder.css( $.effects.clipToBox( animate ) );
+		}
+
+		animate.clip = start;
+	}
+
+	if ( placeholder ) {
+		placeholder.animate( $.effects.clipToBox( animate ), options.duration, options.easing );
+	}
+
+	element.animate( animate, {
+		queue: false,
+		duration: options.duration,
+		easing: options.easing,
+		complete: done
+	} );
+} );
+
+
+/*!
+ * jQuery UI Effects Bounce 1.12.1
+ * http://jqueryui.com
+ *
+ * Copyright jQuery Foundation and other contributors
+ * Released under the MIT license.
+ * http://jquery.org/license
+ */
+
+//>>label: Bounce Effect
+//>>group: Effects
+//>>description: Bounces an element horizontally or vertically n times.
+//>>docs: http://api.jqueryui.com/bounce-effect/
+//>>demos: http://jqueryui.com/effect/
+
+
+
+var effectsEffectBounce = $.effects.define( "bounce", function( options, done ) {
+	var upAnim, downAnim, refValue,
+		element = $( this ),
+
+		// Defaults:
+		mode = options.mode,
+		hide = mode === "hide",
+		show = mode === "show",
+		direction = options.direction || "up",
+		distance = options.distance,
+		times = options.times || 5,
+
+		// Number of internal animations
+		anims = times * 2 + ( show || hide ? 1 : 0 ),
+		speed = options.duration / anims,
+		easing = options.easing,
+
+		// Utility:
+		ref = ( direction === "up" || direction === "down" ) ? "top" : "left",
+		motion = ( direction === "up" || direction === "left" ),
+		i = 0,
+
+		queuelen = element.queue().length;
+
+	$.effects.createPlaceholder( element );
+
+	refValue = element.css( ref );
+
+	// Default distance for the BIGGEST bounce is the outer Distance / 3
+	if ( !distance ) {
+		distance = element[ ref === "top" ? "outerHeight" : "outerWidth" ]() / 3;
+	}
+
+	if ( show ) {
+		downAnim = { opacity: 1 };
+		downAnim[ ref ] = refValue;
+
+		// If we are showing, force opacity 0 and set the initial position
+		// then do the "first" animation
+		element
+			.css( "opacity", 0 )
+			.css( ref, motion ? -distance * 2 : distance * 2 )
+			.animate( downAnim, speed, easing );
+	}
+
+	// Start at the smallest distance if we are hiding
+	if ( hide ) {
+		distance = distance / Math.pow( 2, times - 1 );
+	}
+
+	downAnim = {};
+	downAnim[ ref ] = refValue;
+
+	// Bounces up/down/left/right then back to 0 -- times * 2 animations happen here
+	for ( ; i < times; i++ ) {
+		upAnim = {};
+		upAnim[ ref ] = ( motion ? "-=" : "+=" ) + distance;
+
+		element
+			.animate( upAnim, speed, easing )
+			.animate( downAnim, speed, easing );
+
+		distance = hide ? distance * 2 : distance / 2;
+	}
+
+	// Last Bounce when Hiding
+	if ( hide ) {
+		upAnim = { opacity: 0 };
+		upAnim[ ref ] = ( motion ? "-=" : "+=" ) + distance;
+
+		element.animate( upAnim, speed, easing );
+	}
+
+	element.queue( done );
+
+	$.effects.unshift( element, queuelen, anims + 1 );
+} );
+
+
+/*!
+ * jQuery UI Effects Clip 1.12.1
+ * http://jqueryui.com
+ *
+ * Copyright jQuery Foundation and other contributors
+ * Released under the MIT license.
+ * http://jquery.org/license
+ */
+
+//>>label: Clip Effect
+//>>group: Effects
+//>>description: Clips the element on and off like an old TV.
+//>>docs: http://api.jqueryui.com/clip-effect/
+//>>demos: http://jqueryui.com/effect/
+
+
+
+var effectsEffectClip = $.effects.define( "clip", "hide", function( options, done ) {
+	var start,
+		animate = {},
+		element = $( this ),
+		direction = options.direction || "vertical",
+		both = direction === "both",
+		horizontal = both || direction === "horizontal",
+		vertical = both || direction === "vertical";
+
+	start = element.cssClip();
+	animate.clip = {
+		top: vertical ? ( start.bottom - start.top ) / 2 : start.top,
+		right: horizontal ? ( start.right - start.left ) / 2 : start.right,
+		bottom: vertical ? ( start.bottom - start.top ) / 2 : start.bottom,
+		left: horizontal ? ( start.right - start.left ) / 2 : start.left
+	};
+
+	$.effects.createPlaceholder( element );
+
+	if ( options.mode === "show" ) {
+		element.cssClip( animate.clip );
+		animate.clip = start;
+	}
+
+	element.animate( animate, {
+		queue: false,
+		duration: options.duration,
+		easing: options.easing,
+		complete: done
+	} );
+
+} );
+
+
+/*!
+ * jQuery UI Effects Drop 1.12.1
+ * http://jqueryui.com
+ *
+ * Copyright jQuery Foundation and other contributors
+ * Released under the MIT license.
+ * http://jquery.org/license
+ */
+
+//>>label: Drop Effect
+//>>group: Effects
+//>>description: Moves an element in one direction and hides it at the same time.
+//>>docs: http://api.jqueryui.com/drop-effect/
+//>>demos: http://jqueryui.com/effect/
+
+
+
+var effectsEffectDrop = $.effects.define( "drop", "hide", function( options, done ) {
+
+	var distance,
+		element = $( this ),
+		mode = options.mode,
+		show = mode === "show",
+		direction = options.direction || "left",
+		ref = ( direction === "up" || direction === "down" ) ? "top" : "left",
+		motion = ( direction === "up" || direction === "left" ) ? "-=" : "+=",
+		oppositeMotion = ( motion === "+=" ) ? "-=" : "+=",
+		animation = {
+			opacity: 0
+		};
+
+	$.effects.createPlaceholder( element );
+
+	distance = options.distance ||
+		element[ ref === "top" ? "outerHeight" : "outerWidth" ]( true ) / 2;
+
+	animation[ ref ] = motion + distance;
+
+	if ( show ) {
+		element.css( animation );
+
+		animation[ ref ] = oppositeMotion + distance;
+		animation.opacity = 1;
+	}
+
+	// Animate
+	element.animate( animation, {
+		queue: false,
+		duration: options.duration,
+		easing: options.easing,
+		complete: done
+	} );
+} );
+
+
+/*!
+ * jQuery UI Effects Explode 1.12.1
+ * http://jqueryui.com
+ *
+ * Copyright jQuery Foundation and other contributors
+ * Released under the MIT license.
+ * http://jquery.org/license
+ */
+
+//>>label: Explode Effect
+//>>group: Effects
+// jscs:disable maximumLineLength
+//>>description: Explodes an element in all directions into n pieces. Implodes an element to its original wholeness.
+// jscs:enable maximumLineLength
+//>>docs: http://api.jqueryui.com/explode-effect/
+//>>demos: http://jqueryui.com/effect/
+
+
+
+var effectsEffectExplode = $.effects.define( "explode", "hide", function( options, done ) {
+
+	var i, j, left, top, mx, my,
+		rows = options.pieces ? Math.round( Math.sqrt( options.pieces ) ) : 3,
+		cells = rows,
+		element = $( this ),
+		mode = options.mode,
+		show = mode === "show",
+
+		// Show and then visibility:hidden the element before calculating offset
+		offset = element.show().css( "visibility", "hidden" ).offset(),
+
+		// Width and height of a piece
+		width = Math.ceil( element.outerWidth() / cells ),
+		height = Math.ceil( element.outerHeight() / rows ),
+		pieces = [];
+
+	// Children animate complete:
+	function childComplete() {
+		pieces.push( this );
+		if ( pieces.length === rows * cells ) {
+			animComplete();
+		}
+	}
+
+	// Clone the element for each row and cell.
+	for ( i = 0; i < rows; i++ ) { // ===>
+		top = offset.top + i * height;
+		my = i - ( rows - 1 ) / 2;
+
+		for ( j = 0; j < cells; j++ ) { // |||
+			left = offset.left + j * width;
+			mx = j - ( cells - 1 ) / 2;
+
+			// Create a clone of the now hidden main element that will be absolute positioned
+			// within a wrapper div off the -left and -top equal to size of our pieces
+			element
+				.clone()
+				.appendTo( "body" )
+				.wrap( "<div></div>" )
+				.css( {
+					position: "absolute",
+					visibility: "visible",
+					left: -j * width,
+					top: -i * height
+				} )
+
+				// Select the wrapper - make it overflow: hidden and absolute positioned based on
+				// where the original was located +left and +top equal to the size of pieces
+				.parent()
+					.addClass( "ui-effects-explode" )
+					.css( {
+						position: "absolute",
+						overflow: "hidden",
+						width: width,
+						height: height,
+						left: left + ( show ? mx * width : 0 ),
+						top: top + ( show ? my * height : 0 ),
+						opacity: show ? 0 : 1
+					} )
+					.animate( {
+						left: left + ( show ? 0 : mx * width ),
+						top: top + ( show ? 0 : my * height ),
+						opacity: show ? 1 : 0
+					}, options.duration || 500, options.easing, childComplete );
+		}
+	}
+
+	function animComplete() {
+		element.css( {
+			visibility: "visible"
+		} );
+		$( pieces ).remove();
+		done();
+	}
+} );
+
+
+/*!
+ * jQuery UI Effects Fade 1.12.1
+ * http://jqueryui.com
+ *
+ * Copyright jQuery Foundation and other contributors
+ * Released under the MIT license.
+ * http://jquery.org/license
+ */
+
+//>>label: Fade Effect
+//>>group: Effects
+//>>description: Fades the element.
+//>>docs: http://api.jqueryui.com/fade-effect/
+//>>demos: http://jqueryui.com/effect/
+
+
+
+var effectsEffectFade = $.effects.define( "fade", "toggle", function( options, done ) {
+	var show = options.mode === "show";
+
+	$( this )
+		.css( "opacity", show ? 0 : 1 )
+		.animate( {
+			opacity: show ? 1 : 0
+		}, {
+			queue: false,
+			duration: options.duration,
+			easing: options.easing,
+			complete: done
+		} );
+} );
+
+
+/*!
+ * jQuery UI Effects Fold 1.12.1
+ * http://jqueryui.com
+ *
+ * Copyright jQuery Foundation and other contributors
+ * Released under the MIT license.
+ * http://jquery.org/license
+ */
+
+//>>label: Fold Effect
+//>>group: Effects
+//>>description: Folds an element first horizontally and then vertically.
+//>>docs: http://api.jqueryui.com/fold-effect/
+//>>demos: http://jqueryui.com/effect/
+
+
+
+var effectsEffectFold = $.effects.define( "fold", "hide", function( options, done ) {
+
+	// Create element
+	var element = $( this ),
+		mode = options.mode,
+		show = mode === "show",
+		hide = mode === "hide",
+		size = options.size || 15,
+		percent = /([0-9]+)%/.exec( size ),
+		horizFirst = !!options.horizFirst,
+		ref = horizFirst ? [ "right", "bottom" ] : [ "bottom", "right" ],
+		duration = options.duration / 2,
+
+		placeholder = $.effects.createPlaceholder( element ),
+
+		start = element.cssClip(),
+		animation1 = { clip: $.extend( {}, start ) },
+		animation2 = { clip: $.extend( {}, start ) },
+
+		distance = [ start[ ref[ 0 ] ], start[ ref[ 1 ] ] ],
+
+		queuelen = element.queue().length;
+
+	if ( percent ) {
+		size = parseInt( percent[ 1 ], 10 ) / 100 * distance[ hide ? 0 : 1 ];
+	}
+	animation1.clip[ ref[ 0 ] ] = size;
+	animation2.clip[ ref[ 0 ] ] = size;
+	animation2.clip[ ref[ 1 ] ] = 0;
+
+	if ( show ) {
+		element.cssClip( animation2.clip );
+		if ( placeholder ) {
+			placeholder.css( $.effects.clipToBox( animation2 ) );
+		}
+
+		animation2.clip = start;
+	}
+
+	// Animate
+	element
+		.queue( function( next ) {
+			if ( placeholder ) {
+				placeholder
+					.animate( $.effects.clipToBox( animation1 ), duration, options.easing )
+					.animate( $.effects.clipToBox( animation2 ), duration, options.easing );
+			}
+
+			next();
+		} )
+		.animate( animation1, duration, options.easing )
+		.animate( animation2, duration, options.easing )
+		.queue( done );
+
+	$.effects.unshift( element, queuelen, 4 );
+} );
+
+
+/*!
+ * jQuery UI Effects Highlight 1.12.1
+ * http://jqueryui.com
+ *
+ * Copyright jQuery Foundation and other contributors
+ * Released under the MIT license.
+ * http://jquery.org/license
+ */
+
+//>>label: Highlight Effect
+//>>group: Effects
+//>>description: Highlights the background of an element in a defined color for a custom duration.
+//>>docs: http://api.jqueryui.com/highlight-effect/
+//>>demos: http://jqueryui.com/effect/
+
+
+
+var effectsEffectHighlight = $.effects.define( "highlight", "show", function( options, done ) {
+	var element = $( this ),
+		animation = {
+			backgroundColor: element.css( "backgroundColor" )
+		};
+
+	if ( options.mode === "hide" ) {
+		animation.opacity = 0;
+	}
+
+	$.effects.saveStyle( element );
+
+	element
+		.css( {
+			backgroundImage: "none",
+			backgroundColor: options.color || "#ffff99"
+		} )
+		.animate( animation, {
+			queue: false,
+			duration: options.duration,
+			easing: options.easing,
+			complete: done
+		} );
+} );
+
+
+/*!
+ * jQuery UI Effects Size 1.12.1
+ * http://jqueryui.com
+ *
+ * Copyright jQuery Foundation and other contributors
+ * Released under the MIT license.
+ * http://jquery.org/license
+ */
+
+//>>label: Size Effect
+//>>group: Effects
+//>>description: Resize an element to a specified width and height.
+//>>docs: http://api.jqueryui.com/size-effect/
+//>>demos: http://jqueryui.com/effect/
+
+
+
+var effectsEffectSize = $.effects.define( "size", function( options, done ) {
+
+	// Create element
+	var baseline, factor, temp,
+		element = $( this ),
+
+		// Copy for children
+		cProps = [ "fontSize" ],
+		vProps = [ "borderTopWidth", "borderBottomWidth", "paddingTop", "paddingBottom" ],
+		hProps = [ "borderLeftWidth", "borderRightWidth", "paddingLeft", "paddingRight" ],
+
+		// Set options
+		mode = options.mode,
+		restore = mode !== "effect",
+		scale = options.scale || "both",
+		origin = options.origin || [ "middle", "center" ],
+		position = element.css( "position" ),
+		pos = element.position(),
+		original = $.effects.scaledDimensions( element ),
+		from = options.from || original,
+		to = options.to || $.effects.scaledDimensions( element, 0 );
+
+	$.effects.createPlaceholder( element );
+
+	if ( mode === "show" ) {
+		temp = from;
+		from = to;
+		to = temp;
+	}
+
+	// Set scaling factor
+	factor = {
+		from: {
+			y: from.height / original.height,
+			x: from.width / original.width
+		},
+		to: {
+			y: to.height / original.height,
+			x: to.width / original.width
+		}
+	};
+
+	// Scale the css box
+	if ( scale === "box" || scale === "both" ) {
+
+		// Vertical props scaling
+		if ( factor.from.y !== factor.to.y ) {
+			from = $.effects.setTransition( element, vProps, factor.from.y, from );
+			to = $.effects.setTransition( element, vProps, factor.to.y, to );
+		}
+
+		// Horizontal props scaling
+		if ( factor.from.x !== factor.to.x ) {
+			from = $.effects.setTransition( element, hProps, factor.from.x, from );
+			to = $.effects.setTransition( element, hProps, factor.to.x, to );
+		}
+	}
+
+	// Scale the content
+	if ( scale === "content" || scale === "both" ) {
+
+		// Vertical props scaling
+		if ( factor.from.y !== factor.to.y ) {
+			from = $.effects.setTransition( element, cProps, factor.from.y, from );
+			to = $.effects.setTransition( element, cProps, factor.to.y, to );
+		}
+	}
+
+	// Adjust the position properties based on the provided origin points
+	if ( origin ) {
+		baseline = $.effects.getBaseline( origin, original );
+		from.top = ( original.outerHeight - from.outerHeight ) * baseline.y + pos.top;
+		from.left = ( original.outerWidth - from.outerWidth ) * baseline.x + pos.left;
+		to.top = ( original.outerHeight - to.outerHeight ) * baseline.y + pos.top;
+		to.left = ( original.outerWidth - to.outerWidth ) * baseline.x + pos.left;
+	}
+	element.css( from );
+
+	// Animate the children if desired
+	if ( scale === "content" || scale === "both" ) {
+
+		vProps = vProps.concat( [ "marginTop", "marginBottom" ] ).concat( cProps );
+		hProps = hProps.concat( [ "marginLeft", "marginRight" ] );
+
+		// Only animate children with width attributes specified
+		// TODO: is this right? should we include anything with css width specified as well
+		element.find( "*[width]" ).each( function() {
+			var child = $( this ),
+				childOriginal = $.effects.scaledDimensions( child ),
+				childFrom = {
+					height: childOriginal.height * factor.from.y,
+					width: childOriginal.width * factor.from.x,
+					outerHeight: childOriginal.outerHeight * factor.from.y,
+					outerWidth: childOriginal.outerWidth * factor.from.x
+				},
+				childTo = {
+					height: childOriginal.height * factor.to.y,
+					width: childOriginal.width * factor.to.x,
+					outerHeight: childOriginal.height * factor.to.y,
+					outerWidth: childOriginal.width * factor.to.x
+				};
+
+			// Vertical props scaling
+			if ( factor.from.y !== factor.to.y ) {
+				childFrom = $.effects.setTransition( child, vProps, factor.from.y, childFrom );
+				childTo = $.effects.setTransition( child, vProps, factor.to.y, childTo );
+			}
+
+			// Horizontal props scaling
+			if ( factor.from.x !== factor.to.x ) {
+				childFrom = $.effects.setTransition( child, hProps, factor.from.x, childFrom );
+				childTo = $.effects.setTransition( child, hProps, factor.to.x, childTo );
+			}
+
+			if ( restore ) {
+				$.effects.saveStyle( child );
+			}
+
+			// Animate children
+			child.css( childFrom );
+			child.animate( childTo, options.duration, options.easing, function() {
+
+				// Restore children
+				if ( restore ) {
+					$.effects.restoreStyle( child );
+				}
+			} );
+		} );
+	}
+
+	// Animate
+	element.animate( to, {
+		queue: false,
+		duration: options.duration,
+		easing: options.easing,
+		complete: function() {
+
+			var offset = element.offset();
+
+			if ( to.opacity === 0 ) {
+				element.css( "opacity", from.opacity );
+			}
+
+			if ( !restore ) {
+				element
+					.css( "position", position === "static" ? "relative" : position )
+					.offset( offset );
+
+				// Need to save style here so that automatic style restoration
+				// doesn't restore to the original styles from before the animation.
+				$.effects.saveStyle( element );
+			}
+
+			done();
+		}
+	} );
+
+} );
+
+
+/*!
+ * jQuery UI Effects Scale 1.12.1
+ * http://jqueryui.com
+ *
+ * Copyright jQuery Foundation and other contributors
+ * Released under the MIT license.
+ * http://jquery.org/license
+ */
+
+//>>label: Scale Effect
+//>>group: Effects
+//>>description: Grows or shrinks an element and its content.
+//>>docs: http://api.jqueryui.com/scale-effect/
+//>>demos: http://jqueryui.com/effect/
+
+
+
+var effectsEffectScale = $.effects.define( "scale", function( options, done ) {
+
+	// Create element
+	var el = $( this ),
+		mode = options.mode,
+		percent = parseInt( options.percent, 10 ) ||
+			( parseInt( options.percent, 10 ) === 0 ? 0 : ( mode !== "effect" ? 0 : 100 ) ),
+
+		newOptions = $.extend( true, {
+			from: $.effects.scaledDimensions( el ),
+			to: $.effects.scaledDimensions( el, percent, options.direction || "both" ),
+			origin: options.origin || [ "middle", "center" ]
+		}, options );
+
+	// Fade option to support puff
+	if ( options.fade ) {
+		newOptions.from.opacity = 1;
+		newOptions.to.opacity = 0;
+	}
+
+	$.effects.effect.size.call( this, newOptions, done );
+} );
+
+
+/*!
+ * jQuery UI Effects Puff 1.12.1
+ * http://jqueryui.com
+ *
+ * Copyright jQuery Foundation and other contributors
+ * Released under the MIT license.
+ * http://jquery.org/license
+ */
+
+//>>label: Puff Effect
+//>>group: Effects
+//>>description: Creates a puff effect by scaling the element up and hiding it at the same time.
+//>>docs: http://api.jqueryui.com/puff-effect/
+//>>demos: http://jqueryui.com/effect/
+
+
+
+var effectsEffectPuff = $.effects.define( "puff", "hide", function( options, done ) {
+	var newOptions = $.extend( true, {}, options, {
+		fade: true,
+		percent: parseInt( options.percent, 10 ) || 150
+	} );
+
+	$.effects.effect.scale.call( this, newOptions, done );
+} );
+
+
+/*!
+ * jQuery UI Effects Pulsate 1.12.1
+ * http://jqueryui.com
+ *
+ * Copyright jQuery Foundation and other contributors
+ * Released under the MIT license.
+ * http://jquery.org/license
+ */
+
+//>>label: Pulsate Effect
+//>>group: Effects
+//>>description: Pulsates an element n times by changing the opacity to zero and back.
+//>>docs: http://api.jqueryui.com/pulsate-effect/
+//>>demos: http://jqueryui.com/effect/
+
+
+
+var effectsEffectPulsate = $.effects.define( "pulsate", "show", function( options, done ) {
+	var element = $( this ),
+		mode = options.mode,
+		show = mode === "show",
+		hide = mode === "hide",
+		showhide = show || hide,
+
+		// Showing or hiding leaves off the "last" animation
+		anims = ( ( options.times || 5 ) * 2 ) + ( showhide ? 1 : 0 ),
+		duration = options.duration / anims,
+		animateTo = 0,
+		i = 1,
+		queuelen = element.queue().length;
+
+	if ( show || !element.is( ":visible" ) ) {
+		element.css( "opacity", 0 ).show();
+		animateTo = 1;
+	}
+
+	// Anims - 1 opacity "toggles"
+	for ( ; i < anims; i++ ) {
+		element.animate( { opacity: animateTo }, duration, options.easing );
+		animateTo = 1 - animateTo;
+	}
+
+	element.animate( { opacity: animateTo }, duration, options.easing );
+
+	element.queue( done );
+
+	$.effects.unshift( element, queuelen, anims + 1 );
+} );
+
+
+/*!
+ * jQuery UI Effects Shake 1.12.1
+ * http://jqueryui.com
+ *
+ * Copyright jQuery Foundation and other contributors
+ * Released under the MIT license.
+ * http://jquery.org/license
+ */
+
+//>>label: Shake Effect
+//>>group: Effects
+//>>description: Shakes an element horizontally or vertically n times.
+//>>docs: http://api.jqueryui.com/shake-effect/
+//>>demos: http://jqueryui.com/effect/
+
+
+
+var effectsEffectShake = $.effects.define( "shake", function( options, done ) {
+
+	var i = 1,
+		element = $( this ),
+		direction = options.direction || "left",
+		distance = options.distance || 20,
+		times = options.times || 3,
+		anims = times * 2 + 1,
+		speed = Math.round( options.duration / anims ),
+		ref = ( direction === "up" || direction === "down" ) ? "top" : "left",
+		positiveMotion = ( direction === "up" || direction === "left" ),
+		animation = {},
+		animation1 = {},
+		animation2 = {},
+
+		queuelen = element.queue().length;
+
+	$.effects.createPlaceholder( element );
+
+	// Animation
+	animation[ ref ] = ( positiveMotion ? "-=" : "+=" ) + distance;
+	animation1[ ref ] = ( positiveMotion ? "+=" : "-=" ) + distance * 2;
+	animation2[ ref ] = ( positiveMotion ? "-=" : "+=" ) + distance * 2;
+
+	// Animate
+	element.animate( animation, speed, options.easing );
+
+	// Shakes
+	for ( ; i < times; i++ ) {
+		element
+			.animate( animation1, speed, options.easing )
+			.animate( animation2, speed, options.easing );
+	}
+
+	element
+		.animate( animation1, speed, options.easing )
+		.animate( animation, speed / 2, options.easing )
+		.queue( done );
+
+	$.effects.unshift( element, queuelen, anims + 1 );
+} );
+
+
+/*!
+ * jQuery UI Effects Slide 1.12.1
+ * http://jqueryui.com
+ *
+ * Copyright jQuery Foundation and other contributors
+ * Released under the MIT license.
+ * http://jquery.org/license
+ */
+
+//>>label: Slide Effect
+//>>group: Effects
+//>>description: Slides an element in and out of the viewport.
+//>>docs: http://api.jqueryui.com/slide-effect/
+//>>demos: http://jqueryui.com/effect/
+
+
+
+var effectsEffectSlide = $.effects.define( "slide", "show", function( options, done ) {
+	var startClip, startRef,
+		element = $( this ),
+		map = {
+			up: [ "bottom", "top" ],
+			down: [ "top", "bottom" ],
+			left: [ "right", "left" ],
+			right: [ "left", "right" ]
+		},
+		mode = options.mode,
+		direction = options.direction || "left",
+		ref = ( direction === "up" || direction === "down" ) ? "top" : "left",
+		positiveMotion = ( direction === "up" || direction === "left" ),
+		distance = options.distance ||
+			element[ ref === "top" ? "outerHeight" : "outerWidth" ]( true ),
+		animation = {};
+
+	$.effects.createPlaceholder( element );
+
+	startClip = element.cssClip();
+	startRef = element.position()[ ref ];
+
+	// Define hide animation
+	animation[ ref ] = ( positiveMotion ? -1 : 1 ) * distance + startRef;
+	animation.clip = element.cssClip();
+	animation.clip[ map[ direction ][ 1 ] ] = animation.clip[ map[ direction ][ 0 ] ];
+
+	// Reverse the animation if we're showing
+	if ( mode === "show" ) {
+		element.cssClip( animation.clip );
+		element.css( ref, animation[ ref ] );
+		animation.clip = startClip;
+		animation[ ref ] = startRef;
+	}
+
+	// Actually animate
+	element.animate( animation, {
+		queue: false,
+		duration: options.duration,
+		easing: options.easing,
+		complete: done
+	} );
+} );
+
+
+/*!
+ * jQuery UI Effects Transfer 1.12.1
+ * http://jqueryui.com
+ *
+ * Copyright jQuery Foundation and other contributors
+ * Released under the MIT license.
+ * http://jquery.org/license
+ */
+
+//>>label: Transfer Effect
+//>>group: Effects
+//>>description: Displays a transfer effect from one element to another.
+//>>docs: http://api.jqueryui.com/transfer-effect/
+//>>demos: http://jqueryui.com/effect/
+
+
+
+var effect;
+if ( $.uiBackCompat !== false ) {
+	effect = $.effects.define( "transfer", function( options, done ) {
+		$( this ).transfer( options, done );
+	} );
+}
+var effectsEffectTransfer = effect;
+
+
+/*!
+ * jQuery UI Focusable 1.12.1
+ * http://jqueryui.com
+ *
+ * Copyright jQuery Foundation and other contributors
+ * Released under the MIT license.
+ * http://jquery.org/license
+ */
+
+//>>label: :focusable Selector
+//>>group: Core
+//>>description: Selects elements which can be focused.
+//>>docs: http://api.jqueryui.com/focusable-selector/
+
+
+
+// Selectors
+$.ui.focusable = function( element, hasTabindex ) {
+	var map, mapName, img, focusableIfVisible, fieldset,
+		nodeName = element.nodeName.toLowerCase();
+
+	if ( "area" === nodeName ) {
+		map = element.parentNode;
+		mapName = map.name;
+		if ( !element.href || !mapName || map.nodeName.toLowerCase() !== "map" ) {
+			return false;
+		}
+		img = $( "img[usemap='#" + mapName + "']" );
+		return img.length > 0 && img.is( ":visible" );
+	}
+
+	if ( /^(input|select|textarea|button|object)$/.test( nodeName ) ) {
+		focusableIfVisible = !element.disabled;
+
+		if ( focusableIfVisible ) {
+
+			// Form controls within a disabled fieldset are disabled.
+			// However, controls within the fieldset's legend do not get disabled.
+			// Since controls generally aren't placed inside legends, we skip
+			// this portion of the check.
+			fieldset = $( element ).closest( "fieldset" )[ 0 ];
+			if ( fieldset ) {
+				focusableIfVisible = !fieldset.disabled;
+			}
+		}
+	} else if ( "a" === nodeName ) {
+		focusableIfVisible = element.href || hasTabindex;
+	} else {
+		focusableIfVisible = hasTabindex;
+	}
+
+	return focusableIfVisible && $( element ).is( ":visible" ) && visible( $( element ) );
+};
+
+// Support: IE 8 only
+// IE 8 doesn't resolve inherit to visible/hidden for computed values
+function visible( element ) {
+	var visibility = element.css( "visibility" );
+	while ( visibility === "inherit" ) {
+		element = element.parent();
+		visibility = element.css( "visibility" );
+	}
+	return visibility !== "hidden";
+}
+
+$.extend( $.expr[ ":" ], {
+	focusable: function( element ) {
+		return $.ui.focusable( element, $.attr( element, "tabindex" ) != null );
+	}
+} );
+
+var focusable = $.ui.focusable;
+
+
+
+
+// Support: IE8 Only
+// IE8 does not support the form attribute and when it is supplied. It overwrites the form prop
+// with a string, so we need to find the proper form.
+var form = $.fn.form = function() {
+	return typeof this[ 0 ].form === "string" ? this.closest( "form" ) : $( this[ 0 ].form );
+};
+
+
+/*!
+ * jQuery UI Form Reset Mixin 1.12.1
+ * http://jqueryui.com
+ *
+ * Copyright jQuery Foundation and other contributors
+ * Released under the MIT license.
+ * http://jquery.org/license
+ */
+
+//>>label: Form Reset Mixin
+//>>group: Core
+//>>description: Refresh input widgets when their form is reset
+//>>docs: http://api.jqueryui.com/form-reset-mixin/
+
+
+
+var formResetMixin = $.ui.formResetMixin = {
+	_formResetHandler: function() {
+		var form = $( this );
+
+		// Wait for the form reset to actually happen before refreshing
+		setTimeout( function() {
+			var instances = form.data( "ui-form-reset-instances" );
+			$.each( instances, function() {
+				this.refresh();
+			} );
+		} );
+	},
+
+	_bindFormResetHandler: function() {
+		this.form = this.element.form();
+		if ( !this.form.length ) {
+			return;
+		}
+
+		var instances = this.form.data( "ui-form-reset-instances" ) || [];
+		if ( !instances.length ) {
+
+			// We don't use _on() here because we use a single event handler per form
+			this.form.on( "reset.ui-form-reset", this._formResetHandler );
+		}
+		instances.push( this );
+		this.form.data( "ui-form-reset-instances", instances );
+	},
+
+	_unbindFormResetHandler: function() {
+		if ( !this.form.length ) {
+			return;
+		}
+
+		var instances = this.form.data( "ui-form-reset-instances" );
+		instances.splice( $.inArray( this, instances ), 1 );
+		if ( instances.length ) {
+			this.form.data( "ui-form-reset-instances", instances );
+		} else {
+			this.form
+				.removeData( "ui-form-reset-instances" )
+				.off( "reset.ui-form-reset" );
+		}
+	}
+};
+
+
+/*!
+ * jQuery UI Support for jQuery core 1.7.x 1.12.1
+ * http://jqueryui.com
+ *
+ * Copyright jQuery Foundation and other contributors
+ * Released under the MIT license.
+ * http://jquery.org/license
+ *
+ */
+
+//>>label: jQuery 1.7 Support
+//>>group: Core
+//>>description: Support version 1.7.x of jQuery core
+
+
+
+// Support: jQuery 1.7 only
+// Not a great way to check versions, but since we only support 1.7+ and only
+// need to detect <1.8, this is a simple check that should suffice. Checking
+// for "1.7." would be a bit safer, but the version string is 1.7, not 1.7.0
+// and we'll never reach 1.70.0 (if we do, we certainly won't be supporting
+// 1.7 anymore). See #11197 for why we're not using feature detection.
+if ( $.fn.jquery.substring( 0, 3 ) === "1.7" ) {
+
+	// Setters for .innerWidth(), .innerHeight(), .outerWidth(), .outerHeight()
+	// Unlike jQuery Core 1.8+, these only support numeric values to set the
+	// dimensions in pixels
+	$.each( [ "Width", "Height" ], function( i, name ) {
+		var side = name === "Width" ? [ "Left", "Right" ] : [ "Top", "Bottom" ],
+			type = name.toLowerCase(),
+			orig = {
+				innerWidth: $.fn.innerWidth,
+				innerHeight: $.fn.innerHeight,
+				outerWidth: $.fn.outerWidth,
+				outerHeight: $.fn.outerHeight
+			};
+
+		function reduce( elem, size, border, margin ) {
+			$.each( side, function() {
+				size -= parseFloat( $.css( elem, "padding" + this ) ) || 0;
+				if ( border ) {
+					size -= parseFloat( $.css( elem, "border" + this + "Width" ) ) || 0;
+				}
+				if ( margin ) {
+					size -= parseFloat( $.css( elem, "margin" + this ) ) || 0;
+				}
+			} );
+			return size;
+		}
+
+		$.fn[ "inner" + name ] = function( size ) {
+			if ( size === undefined ) {
+				return orig[ "inner" + name ].call( this );
+			}
+
+			return this.each( function() {
+				$( this ).css( type, reduce( this, size ) + "px" );
+			} );
+		};
+
+		$.fn[ "outer" + name ] = function( size, margin ) {
+			if ( typeof size !== "number" ) {
+				return orig[ "outer" + name ].call( this, size );
+			}
+
+			return this.each( function() {
+				$( this ).css( type, reduce( this, size, true, margin ) + "px" );
+			} );
+		};
+	} );
+
+	$.fn.addBack = function( selector ) {
+		return this.add( selector == null ?
+			this.prevObject : this.prevObject.filter( selector )
+		);
+	};
+}
+
+;
+/*!
+ * jQuery UI Keycode 1.12.1
+ * http://jqueryui.com
+ *
+ * Copyright jQuery Foundation and other contributors
+ * Released under the MIT license.
+ * http://jquery.org/license
+ */
+
+//>>label: Keycode
+//>>group: Core
+//>>description: Provide keycodes as keynames
+//>>docs: http://api.jqueryui.com/jQuery.ui.keyCode/
+
+
+var keycode = $.ui.keyCode = {
+	BACKSPACE: 8,
+	COMMA: 188,
+	DELETE: 46,
+	DOWN: 40,
+	END: 35,
+	ENTER: 13,
+	ESCAPE: 27,
+	HOME: 36,
+	LEFT: 37,
+	PAGE_DOWN: 34,
+	PAGE_UP: 33,
+	PERIOD: 190,
+	RIGHT: 39,
+	SPACE: 32,
+	TAB: 9,
+	UP: 38
+};
+
+
+
+
+// Internal use only
+var escapeSelector = $.ui.escapeSelector = ( function() {
+	var selectorEscape = /([!"#$%&'()*+,./:;<=>?@[\]^`{|}~])/g;
+	return function( selector ) {
+		return selector.replace( selectorEscape, "\\$1" );
+	};
+} )();
+
+
+/*!
+ * jQuery UI Labels 1.12.1
+ * http://jqueryui.com
+ *
+ * Copyright jQuery Foundation and other contributors
+ * Released under the MIT license.
+ * http://jquery.org/license
+ */
+
+//>>label: labels
+//>>group: Core
+//>>description: Find all the labels associated with a given input
+//>>docs: http://api.jqueryui.com/labels/
+
+
+
+var labels = $.fn.labels = function() {
+	var ancestor, selector, id, labels, ancestors;
+
+	// Check control.labels first
+	if ( this[ 0 ].labels && this[ 0 ].labels.length ) {
+		return this.pushStack( this[ 0 ].labels );
+	}
+
+	// Support: IE <= 11, FF <= 37, Android <= 2.3 only
+	// Above browsers do not support control.labels. Everything below is to support them
+	// as well as document fragments. control.labels does not work on document fragments
+	labels = this.eq( 0 ).parents( "label" );
+
+	// Look for the label based on the id
+	id = this.attr( "id" );
+	if ( id ) {
+
+		// We don't search against the document in case the element
+		// is disconnected from the DOM
+		ancestor = this.eq( 0 ).parents().last();
+
+		// Get a full set of top level ancestors
+		ancestors = ancestor.add( ancestor.length ? ancestor.siblings() : this.siblings() );
+
+		// Create a selector for the label based on the id
+		selector = "label[for='" + $.ui.escapeSelector( id ) + "']";
+
+		labels = labels.add( ancestors.find( selector ).addBack( selector ) );
+
+	}
+
+	// Return whatever we have found for labels
+	return this.pushStack( labels );
+};
+
+
+/*!
+ * jQuery UI Scroll Parent 1.12.1
+ * http://jqueryui.com
+ *
+ * Copyright jQuery Foundation and other contributors
+ * Released under the MIT license.
+ * http://jquery.org/license
+ */
+
+//>>label: scrollParent
+//>>group: Core
+//>>description: Get the closest ancestor element that is scrollable.
+//>>docs: http://api.jqueryui.com/scrollParent/
+
+
+
+var scrollParent = $.fn.scrollParent = function( includeHidden ) {
+	var position = this.css( "position" ),
+		excludeStaticParent = position === "absolute",
+		overflowRegex = includeHidden ? /(auto|scroll|hidden)/ : /(auto|scroll)/,
+		scrollParent = this.parents().filter( function() {
+			var parent = $( this );
+			if ( excludeStaticParent && parent.css( "position" ) === "static" ) {
+				return false;
+			}
+			return overflowRegex.test( parent.css( "overflow" ) + parent.css( "overflow-y" ) +
+				parent.css( "overflow-x" ) );
+		} ).eq( 0 );
+
+	return position === "fixed" || !scrollParent.length ?
+		$( this[ 0 ].ownerDocument || document ) :
+		scrollParent;
+};
+
+
+/*!
+ * jQuery UI Tabbable 1.12.1
+ * http://jqueryui.com
+ *
+ * Copyright jQuery Foundation and other contributors
+ * Released under the MIT license.
+ * http://jquery.org/license
+ */
+
+//>>label: :tabbable Selector
+//>>group: Core
+//>>description: Selects elements which can be tabbed to.
+//>>docs: http://api.jqueryui.com/tabbable-selector/
+
+
+
+var tabbable = $.extend( $.expr[ ":" ], {
+	tabbable: function( element ) {
+		var tabIndex = $.attr( element, "tabindex" ),
+			hasTabindex = tabIndex != null;
+		return ( !hasTabindex || tabIndex >= 0 ) && $.ui.focusable( element, hasTabindex );
+	}
+} );
+
+
+/*!
+ * jQuery UI Unique ID 1.12.1
+ * http://jqueryui.com
+ *
+ * Copyright jQuery Foundation and other contributors
+ * Released under the MIT license.
+ * http://jquery.org/license
+ */
+
+//>>label: uniqueId
+//>>group: Core
+//>>description: Functions to generate and remove uniqueId's
+//>>docs: http://api.jqueryui.com/uniqueId/
+
+
+
+var uniqueId = $.fn.extend( {
+	uniqueId: ( function() {
+		var uuid = 0;
+
+		return function() {
+			return this.each( function() {
+				if ( !this.id ) {
+					this.id = "ui-id-" + ( ++uuid );
+				}
+			} );
+		};
+	} )(),
+
+	removeUniqueId: function() {
+		return this.each( function() {
+			if ( /^ui-id-\d+$/.test( this.id ) ) {
+				$( this ).removeAttr( "id" );
+			}
+		} );
+	}
+} );
+
+
+/*!
+ * jQuery UI Accordion 1.12.1
+ * http://jqueryui.com
+ *
+ * Copyright jQuery Foundation and other contributors
+ * Released under the MIT license.
+ * http://jquery.org/license
+ */
+
+//>>label: Accordion
+//>>group: Widgets
+// jscs:disable maximumLineLength
+//>>description: Displays collapsible content panels for presenting information in a limited amount of space.
+// jscs:enable maximumLineLength
+//>>docs: http://api.jqueryui.com/accordion/
+//>>demos: http://jqueryui.com/accordion/
+//>>css.structure: ../../themes/base/core.css
+//>>css.structure: ../../themes/base/accordion.css
+//>>css.theme: ../../themes/base/theme.css
+
+
+
+var widgetsAccordion = $.widget( "ui.accordion", {
+	version: "1.12.1",
+	options: {
+		active: 0,
+		animate: {},
+		classes: {
+			"ui-accordion-header": "ui-corner-top",
+			"ui-accordion-header-collapsed": "ui-corner-all",
+			"ui-accordion-content": "ui-corner-bottom"
+		},
+		collapsible: false,
+		event: "click",
+		header: "> li > :first-child, > :not(li):even",
+		heightStyle: "auto",
+		icons: {
+			activeHeader: "ui-icon-triangle-1-s",
+			header: "ui-icon-triangle-1-e"
+		},
+
+		// Callbacks
+		activate: null,
+		beforeActivate: null
+	},
+
+	hideProps: {
+		borderTopWidth: "hide",
+		borderBottomWidth: "hide",
+		paddingTop: "hide",
+		paddingBottom: "hide",
+		height: "hide"
+	},
+
+	showProps: {
+		borderTopWidth: "show",
+		borderBottomWidth: "show",
+		paddingTop: "show",
+		paddingBottom: "show",
+		height: "show"
+	},
+
+	_create: function() {
+		var options = this.options;
+
+		this.prevShow = this.prevHide = $();
+		this._addClass( "ui-accordion", "ui-widget ui-helper-reset" );
+		this.element.attr( "role", "tablist" );
+
+		// Don't allow collapsible: false and active: false / null
+		if ( !options.collapsible && ( options.active === false || options.active == null ) ) {
+			options.active = 0;
+		}
+
+		this._processPanels();
+
+		// handle negative values
+		if ( options.active < 0 ) {
+			options.active += this.headers.length;
+		}
+		this._refresh();
+	},
+
+	_getCreateEventData: function() {
+		return {
+			header: this.active,
+			panel: !this.active.length ? $() : this.active.next()
+		};
+	},
+
+	_createIcons: function() {
+		var icon, children,
+			icons = this.options.icons;
+
+		if ( icons ) {
+			icon = $( "<span>" );
+			this._addClass( icon, "ui-accordion-header-icon", "ui-icon " + icons.header );
+			icon.prependTo( this.headers );
+			children = this.active.children( ".ui-accordion-header-icon" );
+			this._removeClass( children, icons.header )
+				._addClass( children, null, icons.activeHeader )
+				._addClass( this.headers, "ui-accordion-icons" );
+		}
+	},
+
+	_destroyIcons: function() {
+		this._removeClass( this.headers, "ui-accordion-icons" );
+		this.headers.children( ".ui-accordion-header-icon" ).remove();
+	},
+
+	_destroy: function() {
+		var contents;
+
+		// Clean up main element
+		this.element.removeAttr( "role" );
+
+		// Clean up headers
+		this.headers
+			.removeAttr( "role aria-expanded aria-selected aria-controls tabIndex" )
+			.removeUniqueId();
+
+		this._destroyIcons();
+
+		// Clean up content panels
+		contents = this.headers.next()
+			.css( "display", "" )
+			.removeAttr( "role aria-hidden aria-labelledby" )
+			.removeUniqueId();
+
+		if ( this.options.heightStyle !== "content" ) {
+			contents.css( "height", "" );
+		}
+	},
+
+	_setOption: function( key, value ) {
+		if ( key === "active" ) {
+
+			// _activate() will handle invalid values and update this.options
+			this._activate( value );
+			return;
+		}
+
+		if ( key === "event" ) {
+			if ( this.options.event ) {
+				this._off( this.headers, this.options.event );
+			}
+			this._setupEvents( value );
+		}
+
+		this._super( key, value );
+
+		// Setting collapsible: false while collapsed; open first panel
+		if ( key === "collapsible" && !value && this.options.active === false ) {
+			this._activate( 0 );
+		}
+
+		if ( key === "icons" ) {
+			this._destroyIcons();
+			if ( value ) {
+				this._createIcons();
+			}
+		}
+	},
+
+	_setOptionDisabled: function( value ) {
+		this._super( value );
+
+		this.element.attr( "aria-disabled", value );
+
+		// Support: IE8 Only
+		// #5332 / #6059 - opacity doesn't cascade to positioned elements in IE
+		// so we need to add the disabled class to the headers and panels
+		this._toggleClass( null, "ui-state-disabled", !!value );
+		this._toggleClass( this.headers.add( this.headers.next() ), null, "ui-state-disabled",
+			!!value );
+	},
+
+	_keydown: function( event ) {
+		if ( event.altKey || event.ctrlKey ) {
+			return;
+		}
+
+		var keyCode = $.ui.keyCode,
+			length = this.headers.length,
+			currentIndex = this.headers.index( event.target ),
+			toFocus = false;
+
+		switch ( event.keyCode ) {
+		case keyCode.RIGHT:
+		case keyCode.DOWN:
+			toFocus = this.headers[ ( currentIndex + 1 ) % length ];
+			break;
+		case keyCode.LEFT:
+		case keyCode.UP:
+			toFocus = this.headers[ ( currentIndex - 1 + length ) % length ];
+			break;
+		case keyCode.SPACE:
+		case keyCode.ENTER:
+			this._eventHandler( event );
+			break;
+		case keyCode.HOME:
+			toFocus = this.headers[ 0 ];
+			break;
+		case keyCode.END:
+			toFocus = this.headers[ length - 1 ];
+			break;
+		}
+
+		if ( toFocus ) {
+			$( event.target ).attr( "tabIndex", -1 );
+			$( toFocus ).attr( "tabIndex", 0 );
+			$( toFocus ).trigger( "focus" );
+			event.preventDefault();
+		}
+	},
+
+	_panelKeyDown: function( event ) {
+		if ( event.keyCode === $.ui.keyCode.UP && event.ctrlKey ) {
+			$( event.currentTarget ).prev().trigger( "focus" );
+		}
+	},
+
+	refresh: function() {
+		var options = this.options;
+		this._processPanels();
+
+		// Was collapsed or no panel
+		if ( ( options.active === false && options.collapsible === true ) ||
+				!this.headers.length ) {
+			options.active = false;
+			this.active = $();
+
+		// active false only when collapsible is true
+		} else if ( options.active === false ) {
+			this._activate( 0 );
+
+		// was active, but active panel is gone
+		} else if ( this.active.length && !$.contains( this.element[ 0 ], this.active[ 0 ] ) ) {
+
+			// all remaining panel are disabled
+			if ( this.headers.length === this.headers.find( ".ui-state-disabled" ).length ) {
+				options.active = false;
+				this.active = $();
+
+			// activate previous panel
+			} else {
+				this._activate( Math.max( 0, options.active - 1 ) );
+			}
+
+		// was active, active panel still exists
+		} else {
+
+			// make sure active index is correct
+			options.active = this.headers.index( this.active );
+		}
+
+		this._destroyIcons();
+
+		this._refresh();
+	},
+
+	_processPanels: function() {
+		var prevHeaders = this.headers,
+			prevPanels = this.panels;
+
+		this.headers = this.element.find( this.options.header );
+		this._addClass( this.headers, "ui-accordion-header ui-accordion-header-collapsed",
+			"ui-state-default" );
+
+		this.panels = this.headers.next().filter( ":not(.ui-accordion-content-active)" ).hide();
+		this._addClass( this.panels, "ui-accordion-content", "ui-helper-reset ui-widget-content" );
+
+		// Avoid memory leaks (#10056)
+		if ( prevPanels ) {
+			this._off( prevHeaders.not( this.headers ) );
+			this._off( prevPanels.not( this.panels ) );
+		}
+	},
+
+	_refresh: function() {
+		var maxHeight,
+			options = this.options,
+			heightStyle = options.heightStyle,
+			parent = this.element.parent();
+
+		this.active = this._findActive( options.active );
+		this._addClass( this.active, "ui-accordion-header-active", "ui-state-active" )
+			._removeClass( this.active, "ui-accordion-header-collapsed" );
+		this._addClass( this.active.next(), "ui-accordion-content-active" );
+		this.active.next().show();
+
+		this.headers
+			.attr( "role", "tab" )
+			.each( function() {
+				var header = $( this ),
+					headerId = header.uniqueId().attr( "id" ),
+					panel = header.next(),
+					panelId = panel.uniqueId().attr( "id" );
+				header.attr( "aria-controls", panelId );
+				panel.attr( "aria-labelledby", headerId );
+			} )
+			.next()
+				.attr( "role", "tabpanel" );
+
+		this.headers
+			.not( this.active )
+				.attr( {
+					"aria-selected": "false",
+					"aria-expanded": "false",
+					tabIndex: -1
+				} )
+				.next()
+					.attr( {
+						"aria-hidden": "true"
+					} )
+					.hide();
+
+		// Make sure at least one header is in the tab order
+		if ( !this.active.length ) {
+			this.headers.eq( 0 ).attr( "tabIndex", 0 );
+		} else {
+			this.active.attr( {
+				"aria-selected": "true",
+				"aria-expanded": "true",
+				tabIndex: 0
+			} )
+				.next()
+					.attr( {
+						"aria-hidden": "false"
+					} );
+		}
+
+		this._createIcons();
+
+		this._setupEvents( options.event );
+
+		if ( heightStyle === "fill" ) {
+			maxHeight = parent.height();
+			this.element.siblings( ":visible" ).each( function() {
+				var elem = $( this ),
+					position = elem.css( "position" );
+
+				if ( position === "absolute" || position === "fixed" ) {
+					return;
+				}
+				maxHeight -= elem.outerHeight( true );
+			} );
+
+			this.headers.each( function() {
+				maxHeight -= $( this ).outerHeight( true );
+			} );
+
+			this.headers.next()
+				.each( function() {
+					$( this ).height( Math.max( 0, maxHeight -
+						$( this ).innerHeight() + $( this ).height() ) );
+				} )
+				.css( "overflow", "auto" );
+		} else if ( heightStyle === "auto" ) {
+			maxHeight = 0;
+			this.headers.next()
+				.each( function() {
+					var isVisible = $( this ).is( ":visible" );
+					if ( !isVisible ) {
+						$( this ).show();
+					}
+					maxHeight = Math.max( maxHeight, $( this ).css( "height", "" ).height() );
+					if ( !isVisible ) {
+						$( this ).hide();
+					}
+				} )
+				.height( maxHeight );
+		}
+	},
+
+	_activate: function( index ) {
+		var active = this._findActive( index )[ 0 ];
+
+		// Trying to activate the already active panel
+		if ( active === this.active[ 0 ] ) {
+			return;
+		}
+
+		// Trying to collapse, simulate a click on the currently active header
+		active = active || this.active[ 0 ];
+
+		this._eventHandler( {
+			target: active,
+			currentTarget: active,
+			preventDefault: $.noop
+		} );
+	},
+
+	_findActive: function( selector ) {
+		return typeof selector === "number" ? this.headers.eq( selector ) : $();
+	},
+
+	_setupEvents: function( event ) {
+		var events = {
+			keydown: "_keydown"
+		};
+		if ( event ) {
+			$.each( event.split( " " ), function( index, eventName ) {
+				events[ eventName ] = "_eventHandler";
+			} );
+		}
+
+		this._off( this.headers.add( this.headers.next() ) );
+		this._on( this.headers, events );
+		this._on( this.headers.next(), { keydown: "_panelKeyDown" } );
+		this._hoverable( this.headers );
+		this._focusable( this.headers );
+	},
+
+	_eventHandler: function( event ) {
+		var activeChildren, clickedChildren,
+			options = this.options,
+			active = this.active,
+			clicked = $( event.currentTarget ),
+			clickedIsActive = clicked[ 0 ] === active[ 0 ],
+			collapsing = clickedIsActive && options.collapsible,
+			toShow = collapsing ? $() : clicked.next(),
+			toHide = active.next(),
+			eventData = {
+				oldHeader: active,
+				oldPanel: toHide,
+				newHeader: collapsing ? $() : clicked,
+				newPanel: toShow
+			};
+
+		event.preventDefault();
+
+		if (
+
+				// click on active header, but not collapsible
+				( clickedIsActive && !options.collapsible ) ||
+
+				// allow canceling activation
+				( this._trigger( "beforeActivate", event, eventData ) === false ) ) {
+			return;
+		}
+
+		options.active = collapsing ? false : this.headers.index( clicked );
+
+		// When the call to ._toggle() comes after the class changes
+		// it causes a very odd bug in IE 8 (see #6720)
+		this.active = clickedIsActive ? $() : clicked;
+		this._toggle( eventData );
+
+		// Switch classes
+		// corner classes on the previously active header stay after the animation
+		this._removeClass( active, "ui-accordion-header-active", "ui-state-active" );
+		if ( options.icons ) {
+			activeChildren = active.children( ".ui-accordion-header-icon" );
+			this._removeClass( activeChildren, null, options.icons.activeHeader )
+				._addClass( activeChildren, null, options.icons.header );
+		}
+
+		if ( !clickedIsActive ) {
+			this._removeClass( clicked, "ui-accordion-header-collapsed" )
+				._addClass( clicked, "ui-accordion-header-active", "ui-state-active" );
+			if ( options.icons ) {
+				clickedChildren = clicked.children( ".ui-accordion-header-icon" );
+				this._removeClass( clickedChildren, null, options.icons.header )
+					._addClass( clickedChildren, null, options.icons.activeHeader );
+			}
+
+			this._addClass( clicked.next(), "ui-accordion-content-active" );
+		}
+	},
+
+	_toggle: function( data ) {
+		var toShow = data.newPanel,
+			toHide = this.prevShow.length ? this.prevShow : data.oldPanel;
+
+		// Handle activating a panel during the animation for another activation
+		this.prevShow.add( this.prevHide ).stop( true, true );
+		this.prevShow = toShow;
+		this.prevHide = toHide;
+
+		if ( this.options.animate ) {
+			this._animate( toShow, toHide, data );
+		} else {
+			toHide.hide();
+			toShow.show();
+			this._toggleComplete( data );
+		}
+
+		toHide.attr( {
+			"aria-hidden": "true"
+		} );
+		toHide.prev().attr( {
+			"aria-selected": "false",
+			"aria-expanded": "false"
+		} );
+
+		// if we're switching panels, remove the old header from the tab order
+		// if we're opening from collapsed state, remove the previous header from the tab order
+		// if we're collapsing, then keep the collapsing header in the tab order
+		if ( toShow.length && toHide.length ) {
+			toHide.prev().attr( {
+				"tabIndex": -1,
+				"aria-expanded": "false"
+			} );
+		} else if ( toShow.length ) {
+			this.headers.filter( function() {
+				return parseInt( $( this ).attr( "tabIndex" ), 10 ) === 0;
+			} )
+				.attr( "tabIndex", -1 );
+		}
+
+		toShow
+			.attr( "aria-hidden", "false" )
+			.prev()
+				.attr( {
+					"aria-selected": "true",
+					"aria-expanded": "true",
+					tabIndex: 0
+				} );
+	},
+
+	_animate: function( toShow, toHide, data ) {
+		var total, easing, duration,
+			that = this,
+			adjust = 0,
+			boxSizing = toShow.css( "box-sizing" ),
+			down = toShow.length &&
+				( !toHide.length || ( toShow.index() < toHide.index() ) ),
+			animate = this.options.animate || {},
+			options = down && animate.down || animate,
+			complete = function() {
+				that._toggleComplete( data );
+			};
+
+		if ( typeof options === "number" ) {
+			duration = options;
+		}
+		if ( typeof options === "string" ) {
+			easing = options;
+		}
+
+		// fall back from options to animation in case of partial down settings
+		easing = easing || options.easing || animate.easing;
+		duration = duration || options.duration || animate.duration;
+
+		if ( !toHide.length ) {
+			return toShow.animate( this.showProps, duration, easing, complete );
+		}
+		if ( !toShow.length ) {
+			return toHide.animate( this.hideProps, duration, easing, complete );
+		}
+
+		total = toShow.show().outerHeight();
+		toHide.animate( this.hideProps, {
+			duration: duration,
+			easing: easing,
+			step: function( now, fx ) {
+				fx.now = Math.round( now );
+			}
+		} );
+		toShow
+			.hide()
+			.animate( this.showProps, {
+				duration: duration,
+				easing: easing,
+				complete: complete,
+				step: function( now, fx ) {
+					fx.now = Math.round( now );
+					if ( fx.prop !== "height" ) {
+						if ( boxSizing === "content-box" ) {
+							adjust += fx.now;
+						}
+					} else if ( that.options.heightStyle !== "content" ) {
+						fx.now = Math.round( total - toHide.outerHeight() - adjust );
+						adjust = 0;
+					}
+				}
+			} );
+	},
+
+	_toggleComplete: function( data ) {
+		var toHide = data.oldPanel,
+			prev = toHide.prev();
+
+		this._removeClass( toHide, "ui-accordion-content-active" );
+		this._removeClass( prev, "ui-accordion-header-active" )
+			._addClass( prev, "ui-accordion-header-collapsed" );
+
+		// Work around for rendering bug in IE (#5421)
+		if ( toHide.length ) {
+			toHide.parent()[ 0 ].className = toHide.parent()[ 0 ].className;
+		}
+		this._trigger( "activate", null, data );
+	}
+} );
+
+
+
+var safeActiveElement = $.ui.safeActiveElement = function( document ) {
+	var activeElement;
+
+	// Support: IE 9 only
+	// IE9 throws an "Unspecified error" accessing document.activeElement from an <iframe>
+	try {
+		activeElement = document.activeElement;
+	} catch ( error ) {
+		activeElement = document.body;
+	}
+
+	// Support: IE 9 - 11 only
+	// IE may return null instead of an element
+	// Interestingly, this only seems to occur when NOT in an iframe
+	if ( !activeElement ) {
+		activeElement = document.body;
+	}
+
+	// Support: IE 11 only
+	// IE11 returns a seemingly empty object in some cases when accessing
+	// document.activeElement from an <iframe>
+	if ( !activeElement.nodeName ) {
+		activeElement = document.body;
+	}
+
+	return activeElement;
+};
+
+
+/*!
+ * jQuery UI Menu 1.12.1
+ * http://jqueryui.com
+ *
+ * Copyright jQuery Foundation and other contributors
+ * Released under the MIT license.
+ * http://jquery.org/license
+ */
+
+//>>label: Menu
+//>>group: Widgets
+//>>description: Creates nestable menus.
+//>>docs: http://api.jqueryui.com/menu/
+//>>demos: http://jqueryui.com/menu/
+//>>css.structure: ../../themes/base/core.css
+//>>css.structure: ../../themes/base/menu.css
+//>>css.theme: ../../themes/base/theme.css
+
+
+
+var widgetsMenu = $.widget( "ui.menu", {
+	version: "1.12.1",
+	defaultElement: "<ul>",
+	delay: 300,
+	options: {
+		icons: {
+			submenu: "ui-icon-caret-1-e"
+		},
+		items: "> *",
+		menus: "ul",
+		position: {
+			my: "left top",
+			at: "right top"
+		},
+		role: "menu",
+
+		// Callbacks
+		blur: null,
+		focus: null,
+		select: null
+	},
+
+	_create: function() {
+		this.activeMenu = this.element;
+
+		// Flag used to prevent firing of the click handler
+		// as the event bubbles up through nested menus
+		this.mouseHandled = false;
+		this.element
+			.uniqueId()
+			.attr( {
+				role: this.options.role,
+				tabIndex: 0
+			} );
+
+		this._addClass( "ui-menu", "ui-widget ui-widget-content" );
+		this._on( {
+
+			// Prevent focus from sticking to links inside menu after clicking
+			// them (focus should always stay on UL during navigation).
+			"mousedown .ui-menu-item": function( event ) {
+				event.preventDefault();
+			},
+			"click .ui-menu-item": function( event ) {
+				var target = $( event.target );
+				var active = $( $.ui.safeActiveElement( this.document[ 0 ] ) );
+				if ( !this.mouseHandled && target.not( ".ui-state-disabled" ).length ) {
+					this.select( event );
+
+					// Only set the mouseHandled flag if the event will bubble, see #9469.
+					if ( !event.isPropagationStopped() ) {
+						this.mouseHandled = true;
+					}
+
+					// Open submenu on click
+					if ( target.has( ".ui-menu" ).length ) {
+						this.expand( event );
+					} else if ( !this.element.is( ":focus" ) &&
+							active.closest( ".ui-menu" ).length ) {
+
+						// Redirect focus to the menu
+						this.element.trigger( "focus", [ true ] );
+
+						// If the active item is on the top level, let it stay active.
+						// Otherwise, blur the active item since it is no longer visible.
+						if ( this.active && this.active.parents( ".ui-menu" ).length === 1 ) {
+							clearTimeout( this.timer );
+						}
+					}
+				}
+			},
+			"mouseenter .ui-menu-item": function( event ) {
+
+				// Ignore mouse events while typeahead is active, see #10458.
+				// Prevents focusing the wrong item when typeahead causes a scroll while the mouse
+				// is over an item in the menu
+				if ( this.previousFilter ) {
+					return;
+				}
+
+				var actualTarget = $( event.target ).closest( ".ui-menu-item" ),
+					target = $( event.currentTarget );
+
+				// Ignore bubbled events on parent items, see #11641
+				if ( actualTarget[ 0 ] !== target[ 0 ] ) {
+					return;
+				}
+
+				// Remove ui-state-active class from siblings of the newly focused menu item
+				// to avoid a jump caused by adjacent elements both having a class with a border
+				this._removeClass( target.siblings().children( ".ui-state-active" ),
+					null, "ui-state-active" );
+				this.focus( event, target );
+			},
+			mouseleave: "collapseAll",
+			"mouseleave .ui-menu": "collapseAll",
+			focus: function( event, keepActiveItem ) {
+
+				// If there's already an active item, keep it active
+				// If not, activate the first item
+				var item = this.active || this.element.find( this.options.items ).eq( 0 );
+
+				if ( !keepActiveItem ) {
+					this.focus( event, item );
+				}
+			},
+			blur: function( event ) {
+				this._delay( function() {
+					var notContained = !$.contains(
+						this.element[ 0 ],
+						$.ui.safeActiveElement( this.document[ 0 ] )
+					);
+					if ( notContained ) {
+						this.collapseAll( event );
+					}
+				} );
+			},
+			keydown: "_keydown"
+		} );
+
+		this.refresh();
+
+		// Clicks outside of a menu collapse any open menus
+		this._on( this.document, {
+			click: function( event ) {
+				if ( this._closeOnDocumentClick( event ) ) {
+					this.collapseAll( event );
+				}
+
+				// Reset the mouseHandled flag
+				this.mouseHandled = false;
+			}
+		} );
+	},
+
+	_destroy: function() {
+		var items = this.element.find( ".ui-menu-item" )
+				.removeAttr( "role aria-disabled" ),
+			submenus = items.children( ".ui-menu-item-wrapper" )
+				.removeUniqueId()
+				.removeAttr( "tabIndex role aria-haspopup" );
+
+		// Destroy (sub)menus
+		this.element
+			.removeAttr( "aria-activedescendant" )
+			.find( ".ui-menu" ).addBack()
+				.removeAttr( "role aria-labelledby aria-expanded aria-hidden aria-disabled " +
+					"tabIndex" )
+				.removeUniqueId()
+				.show();
+
+		submenus.children().each( function() {
+			var elem = $( this );
+			if ( elem.data( "ui-menu-submenu-caret" ) ) {
+				elem.remove();
+			}
+		} );
+	},
+
+	_keydown: function( event ) {
+		var match, prev, character, skip,
+			preventDefault = true;
+
+		switch ( event.keyCode ) {
+		case $.ui.keyCode.PAGE_UP:
+			this.previousPage( event );
+			break;
+		case $.ui.keyCode.PAGE_DOWN:
+			this.nextPage( event );
+			break;
+		case $.ui.keyCode.HOME:
+			this._move( "first", "first", event );
+			break;
+		case $.ui.keyCode.END:
+			this._move( "last", "last", event );
+			break;
+		case $.ui.keyCode.UP:
+			this.previous( event );
+			break;
+		case $.ui.keyCode.DOWN:
+			this.next( event );
+			break;
+		case $.ui.keyCode.LEFT:
+			this.collapse( event );
+			break;
+		case $.ui.keyCode.RIGHT:
+			if ( this.active && !this.active.is( ".ui-state-disabled" ) ) {
+				this.expand( event );
+			}
+			break;
+		case $.ui.keyCode.ENTER:
+		case $.ui.keyCode.SPACE:
+			this._activate( event );
+			break;
+		case $.ui.keyCode.ESCAPE:
+			this.collapse( event );
+			break;
+		default:
+			preventDefault = false;
+			prev = this.previousFilter || "";
+			skip = false;
+
+			// Support number pad values
+			character = event.keyCode >= 96 && event.keyCode <= 105 ?
+				( event.keyCode - 96 ).toString() : String.fromCharCode( event.keyCode );
+
+			clearTimeout( this.filterTimer );
+
+			if ( character === prev ) {
+				skip = true;
+			} else {
+				character = prev + character;
+			}
+
+			match = this._filterMenuItems( character );
+			match = skip && match.index( this.active.next() ) !== -1 ?
+				this.active.nextAll( ".ui-menu-item" ) :
+				match;
+
+			// If no matches on the current filter, reset to the last character pressed
+			// to move down the menu to the first item that starts with that character
+			if ( !match.length ) {
+				character = String.fromCharCode( event.keyCode );
+				match = this._filterMenuItems( character );
+			}
+
+			if ( match.length ) {
+				this.focus( event, match );
+				this.previousFilter = character;
+				this.filterTimer = this._delay( function() {
+					delete this.previousFilter;
+				}, 1000 );
+			} else {
+				delete this.previousFilter;
+			}
+		}
+
+		if ( preventDefault ) {
+			event.preventDefault();
+		}
+	},
+
+	_activate: function( event ) {
+		if ( this.active && !this.active.is( ".ui-state-disabled" ) ) {
+			if ( this.active.children( "[aria-haspopup='true']" ).length ) {
+				this.expand( event );
+			} else {
+				this.select( event );
+			}
+		}
+	},
+
+	refresh: function() {
+		var menus, items, newSubmenus, newItems, newWrappers,
+			that = this,
+			icon = this.options.icons.submenu,
+			submenus = this.element.find( this.options.menus );
+
+		this._toggleClass( "ui-menu-icons", null, !!this.element.find( ".ui-icon" ).length );
+
+		// Initialize nested menus
+		newSubmenus = submenus.filter( ":not(.ui-menu)" )
+			.hide()
+			.attr( {
+				role: this.options.role,
+				"aria-hidden": "true",
+				"aria-expanded": "false"
+			} )
+			.each( function() {
+				var menu = $( this ),
+					item = menu.prev(),
+					submenuCaret = $( "<span>" ).data( "ui-menu-submenu-caret", true );
+
+				that._addClass( submenuCaret, "ui-menu-icon", "ui-icon " + icon );
+				item
+					.attr( "aria-haspopup", "true" )
+					.prepend( submenuCaret );
+				menu.attr( "aria-labelledby", item.attr( "id" ) );
+			} );
+
+		this._addClass( newSubmenus, "ui-menu", "ui-widget ui-widget-content ui-front" );
+
+		menus = submenus.add( this.element );
+		items = menus.find( this.options.items );
+
+		// Initialize menu-items containing spaces and/or dashes only as dividers
+		items.not( ".ui-menu-item" ).each( function() {
+			var item = $( this );
+			if ( that._isDivider( item ) ) {
+				that._addClass( item, "ui-menu-divider", "ui-widget-content" );
+			}
+		} );
+
+		// Don't refresh list items that are already adapted
+		newItems = items.not( ".ui-menu-item, .ui-menu-divider" );
+		newWrappers = newItems.children()
+			.not( ".ui-menu" )
+				.uniqueId()
+				.attr( {
+					tabIndex: -1,
+					role: this._itemRole()
+				} );
+		this._addClass( newItems, "ui-menu-item" )
+			._addClass( newWrappers, "ui-menu-item-wrapper" );
+
+		// Add aria-disabled attribute to any disabled menu item
+		items.filter( ".ui-state-disabled" ).attr( "aria-disabled", "true" );
+
+		// If the active item has been removed, blur the menu
+		if ( this.active && !$.contains( this.element[ 0 ], this.active[ 0 ] ) ) {
+			this.blur();
+		}
+	},
+
+	_itemRole: function() {
+		return {
+			menu: "menuitem",
+			listbox: "option"
+		}[ this.options.role ];
+	},
+
+	_setOption: function( key, value ) {
+		if ( key === "icons" ) {
+			var icons = this.element.find( ".ui-menu-icon" );
+			this._removeClass( icons, null, this.options.icons.submenu )
+				._addClass( icons, null, value.submenu );
+		}
+		this._super( key, value );
+	},
+
+	_setOptionDisabled: function( value ) {
+		this._super( value );
+
+		this.element.attr( "aria-disabled", String( value ) );
+		this._toggleClass( null, "ui-state-disabled", !!value );
+	},
+
+	focus: function( event, item ) {
+		var nested, focused, activeParent;
+		this.blur( event, event && event.type === "focus" );
+
+		this._scrollIntoView( item );
+
+		this.active = item.first();
+
+		focused = this.active.children( ".ui-menu-item-wrapper" );
+		this._addClass( focused, null, "ui-state-active" );
+
+		// Only update aria-activedescendant if there's a role
+		// otherwise we assume focus is managed elsewhere
+		if ( this.options.role ) {
+			this.element.attr( "aria-activedescendant", focused.attr( "id" ) );
+		}
+
+		// Highlight active parent menu item, if any
+		activeParent = this.active
+			.parent()
+				.closest( ".ui-menu-item" )
+					.children( ".ui-menu-item-wrapper" );
+		this._addClass( activeParent, null, "ui-state-active" );
+
+		if ( event && event.type === "keydown" ) {
+			this._close();
+		} else {
+			this.timer = this._delay( function() {
+				this._close();
+			}, this.delay );
+		}
+
+		nested = item.children( ".ui-menu" );
+		if ( nested.length && event && ( /^mouse/.test( event.type ) ) ) {
+			this._startOpening( nested );
+		}
+		this.activeMenu = item.parent();
+
+		this._trigger( "focus", event, { item: item } );
+	},
+
+	_scrollIntoView: function( item ) {
+		var borderTop, paddingTop, offset, scroll, elementHeight, itemHeight;
+		if ( this._hasScroll() ) {
+			borderTop = parseFloat( $.css( this.activeMenu[ 0 ], "borderTopWidth" ) ) || 0;
+			paddingTop = parseFloat( $.css( this.activeMenu[ 0 ], "paddingTop" ) ) || 0;
+			offset = item.offset().top - this.activeMenu.offset().top - borderTop - paddingTop;
+			scroll = this.activeMenu.scrollTop();
+			elementHeight = this.activeMenu.height();
+			itemHeight = item.outerHeight();
+
+			if ( offset < 0 ) {
+				this.activeMenu.scrollTop( scroll + offset );
+			} else if ( offset + itemHeight > elementHeight ) {
+				this.activeMenu.scrollTop( scroll + offset - elementHeight + itemHeight );
+			}
+		}
+	},
+
+	blur: function( event, fromFocus ) {
+		if ( !fromFocus ) {
+			clearTimeout( this.timer );
+		}
+
+		if ( !this.active ) {
+			return;
+		}
+
+		this._removeClass( this.active.children( ".ui-menu-item-wrapper" ),
+			null, "ui-state-active" );
+
+		this._trigger( "blur", event, { item: this.active } );
+		this.active = null;
+	},
+
+	_startOpening: function( submenu ) {
+		clearTimeout( this.timer );
+
+		// Don't open if already open fixes a Firefox bug that caused a .5 pixel
+		// shift in the submenu position when mousing over the caret icon
+		if ( submenu.attr( "aria-hidden" ) !== "true" ) {
+			return;
+		}
+
+		this.timer = this._delay( function() {
+			this._close();
+			this._open( submenu );
+		}, this.delay );
+	},
+
+	_open: function( submenu ) {
+		var position = $.extend( {
+			of: this.active
+		}, this.options.position );
+
+		clearTimeout( this.timer );
+		this.element.find( ".ui-menu" ).not( submenu.parents( ".ui-menu" ) )
+			.hide()
+			.attr( "aria-hidden", "true" );
+
+		submenu
+			.show()
+			.removeAttr( "aria-hidden" )
+			.attr( "aria-expanded", "true" )
+			.position( position );
+	},
+
+	collapseAll: function( event, all ) {
+		clearTimeout( this.timer );
+		this.timer = this._delay( function() {
+
+			// If we were passed an event, look for the submenu that contains the event
+			var currentMenu = all ? this.element :
+				$( event && event.target ).closest( this.element.find( ".ui-menu" ) );
+
+			// If we found no valid submenu ancestor, use the main menu to close all
+			// sub menus anyway
+			if ( !currentMenu.length ) {
+				currentMenu = this.element;
+			}
+
+			this._close( currentMenu );
+
+			this.blur( event );
+
+			// Work around active item staying active after menu is blurred
+			this._removeClass( currentMenu.find( ".ui-state-active" ), null, "ui-state-active" );
+
+			this.activeMenu = currentMenu;
+		}, this.delay );
+	},
+
+	// With no arguments, closes the currently active menu - if nothing is active
+	// it closes all menus.  If passed an argument, it will search for menus BELOW
+	_close: function( startMenu ) {
+		if ( !startMenu ) {
+			startMenu = this.active ? this.active.parent() : this.element;
+		}
+
+		startMenu.find( ".ui-menu" )
+			.hide()
+			.attr( "aria-hidden", "true" )
+			.attr( "aria-expanded", "false" );
+	},
+
+	_closeOnDocumentClick: function( event ) {
+		return !$( event.target ).closest( ".ui-menu" ).length;
+	},
+
+	_isDivider: function( item ) {
+
+		// Match hyphen, em dash, en dash
+		return !/[^\-\u2014\u2013\s]/.test( item.text() );
+	},
+
+	collapse: function( event ) {
+		var newItem = this.active &&
+			this.active.parent().closest( ".ui-menu-item", this.element );
+		if ( newItem && newItem.length ) {
+			this._close();
+			this.focus( event, newItem );
+		}
+	},
+
+	expand: function( event ) {
+		var newItem = this.active &&
+			this.active
+				.children( ".ui-menu " )
+					.find( this.options.items )
+						.first();
+
+		if ( newItem && newItem.length ) {
+			this._open( newItem.parent() );
+
+			// Delay so Firefox will not hide activedescendant change in expanding submenu from AT
+			this._delay( function() {
+				this.focus( event, newItem );
+			} );
+		}
+	},
+
+	next: function( event ) {
+		this._move( "next", "first", event );
+	},
+
+	previous: function( event ) {
+		this._move( "prev", "last", event );
+	},
+
+	isFirstItem: function() {
+		return this.active && !this.active.prevAll( ".ui-menu-item" ).length;
+	},
+
+	isLastItem: function() {
+		return this.active && !this.active.nextAll( ".ui-menu-item" ).length;
+	},
+
+	_move: function( direction, filter, event ) {
+		var next;
+		if ( this.active ) {
+			if ( direction === "first" || direction === "last" ) {
+				next = this.active
+					[ direction === "first" ? "prevAll" : "nextAll" ]( ".ui-menu-item" )
+					.eq( -1 );
+			} else {
+				next = this.active
+					[ direction + "All" ]( ".ui-menu-item" )
+					.eq( 0 );
+			}
+		}
+		if ( !next || !next.length || !this.active ) {
+			next = this.activeMenu.find( this.options.items )[ filter ]();
+		}
+
+		this.focus( event, next );
+	},
+
+	nextPage: function( event ) {
+		var item, base, height;
+
+		if ( !this.active ) {
+			this.next( event );
+			return;
+		}
+		if ( this.isLastItem() ) {
+			return;
+		}
+		if ( this._hasScroll() ) {
+			base = this.active.offset().top;
+			height = this.element.height();
+			this.active.nextAll( ".ui-menu-item" ).each( function() {
+				item = $( this );
+				return item.offset().top - base - height < 0;
+			} );
+
+			this.focus( event, item );
+		} else {
+			this.focus( event, this.activeMenu.find( this.options.items )
+				[ !this.active ? "first" : "last" ]() );
+		}
+	},
+
+	previousPage: function( event ) {
+		var item, base, height;
+		if ( !this.active ) {
+			this.next( event );
+			return;
+		}
+		if ( this.isFirstItem() ) {
+			return;
+		}
+		if ( this._hasScroll() ) {
+			base = this.active.offset().top;
+			height = this.element.height();
+			this.active.prevAll( ".ui-menu-item" ).each( function() {
+				item = $( this );
+				return item.offset().top - base + height > 0;
+			} );
+
+			this.focus( event, item );
+		} else {
+			this.focus( event, this.activeMenu.find( this.options.items ).first() );
+		}
+	},
+
+	_hasScroll: function() {
+		return this.element.outerHeight() < this.element.prop( "scrollHeight" );
+	},
+
+	select: function( event ) {
+
+		// TODO: It should never be possible to not have an active item at this
+		// point, but the tests don't trigger mouseenter before click.
+		this.active = this.active || $( event.target ).closest( ".ui-menu-item" );
+		var ui = { item: this.active };
+		if ( !this.active.has( ".ui-menu" ).length ) {
+			this.collapseAll( event, true );
+		}
+		this._trigger( "select", event, ui );
+	},
+
+	_filterMenuItems: function( character ) {
+		var escapedCharacter = character.replace( /[\-\[\]{}()*+?.,\\\^$|#\s]/g, "\\$&" ),
+			regex = new RegExp( "^" + escapedCharacter, "i" );
+
+		return this.activeMenu
+			.find( this.options.items )
+
+				// Only match on items, not dividers or other content (#10571)
+				.filter( ".ui-menu-item" )
+					.filter( function() {
+						return regex.test(
+							$.trim( $( this ).children( ".ui-menu-item-wrapper" ).text() ) );
+					} );
+	}
+} );
+
+
+/*!
+ * jQuery UI Autocomplete 1.12.1
+ * http://jqueryui.com
+ *
+ * Copyright jQuery Foundation and other contributors
+ * Released under the MIT license.
+ * http://jquery.org/license
+ */
+
+//>>label: Autocomplete
+//>>group: Widgets
+//>>description: Lists suggested words as the user is typing.
+//>>docs: http://api.jqueryui.com/autocomplete/
+//>>demos: http://jqueryui.com/autocomplete/
+//>>css.structure: ../../themes/base/core.css
+//>>css.structure: ../../themes/base/autocomplete.css
+//>>css.theme: ../../themes/base/theme.css
+
+
+
+$.widget( "ui.autocomplete", {
+	version: "1.12.1",
+	defaultElement: "<input>",
+	options: {
+		appendTo: null,
+		autoFocus: false,
+		delay: 300,
+		minLength: 1,
+		position: {
+			my: "left top",
+			at: "left bottom",
+			collision: "none"
+		},
+		source: null,
+
+		// Callbacks
+		change: null,
+		close: null,
+		focus: null,
+		open: null,
+		response: null,
+		search: null,
+		select: null
+	},
+
+	requestIndex: 0,
+	pending: 0,
+
+	_create: function() {
+
+		// Some browsers only repeat keydown events, not keypress events,
+		// so we use the suppressKeyPress flag to determine if we've already
+		// handled the keydown event. #7269
+		// Unfortunately the code for & in keypress is the same as the up arrow,
+		// so we use the suppressKeyPressRepeat flag to avoid handling keypress
+		// events when we know the keydown event was used to modify the
+		// search term. #7799
+		var suppressKeyPress, suppressKeyPressRepeat, suppressInput,
+			nodeName = this.element[ 0 ].nodeName.toLowerCase(),
+			isTextarea = nodeName === "textarea",
+			isInput = nodeName === "input";
+
+		// Textareas are always multi-line
+		// Inputs are always single-line, even if inside a contentEditable element
+		// IE also treats inputs as contentEditable
+		// All other element types are determined by whether or not they're contentEditable
+		this.isMultiLine = isTextarea || !isInput && this._isContentEditable( this.element );
+
+		this.valueMethod = this.element[ isTextarea || isInput ? "val" : "text" ];
+		this.isNewMenu = true;
+
+		this._addClass( "ui-autocomplete-input" );
+		this.element.attr( "autocomplete", "off" );
+
+		this._on( this.element, {
+			keydown: function( event ) {
+				if ( this.element.prop( "readOnly" ) ) {
+					suppressKeyPress = true;
+					suppressInput = true;
+					suppressKeyPressRepeat = true;
+					return;
+				}
+
+				suppressKeyPress = false;
+				suppressInput = false;
+				suppressKeyPressRepeat = false;
+				var keyCode = $.ui.keyCode;
+				switch ( event.keyCode ) {
+				case keyCode.PAGE_UP:
+					suppressKeyPress = true;
+					this._move( "previousPage", event );
+					break;
+				case keyCode.PAGE_DOWN:
+					suppressKeyPress = true;
+					this._move( "nextPage", event );
+					break;
+				case keyCode.UP:
+					suppressKeyPress = true;
+					this._keyEvent( "previous", event );
+					break;
+				case keyCode.DOWN:
+					suppressKeyPress = true;
+					this._keyEvent( "next", event );
+					break;
+				case keyCode.ENTER:
+
+					// when menu is open and has focus
+					if ( this.menu.active ) {
+
+						// #6055 - Opera still allows the keypress to occur
+						// which causes forms to submit
+						suppressKeyPress = true;
+						event.preventDefault();
+						this.menu.select( event );
+					}
+					break;
+				case keyCode.TAB:
+					if ( this.menu.active ) {
+						this.menu.select( event );
+					}
+					break;
+				case keyCode.ESCAPE:
+					if ( this.menu.element.is( ":visible" ) ) {
+						if ( !this.isMultiLine ) {
+							this._value( this.term );
+						}
+						this.close( event );
+
+						// Different browsers have different default behavior for escape
+						// Single press can mean undo or clear
+						// Double press in IE means clear the whole form
+						event.preventDefault();
+					}
+					break;
+				default:
+					suppressKeyPressRepeat = true;
+
+					// search timeout should be triggered before the input value is changed
+					this._searchTimeout( event );
+					break;
+				}
+			},
+			keypress: function( event ) {
+				if ( suppressKeyPress ) {
+					suppressKeyPress = false;
+					if ( !this.isMultiLine || this.menu.element.is( ":visible" ) ) {
+						event.preventDefault();
+					}
+					return;
+				}
+				if ( suppressKeyPressRepeat ) {
+					return;
+				}
+
+				// Replicate some key handlers to allow them to repeat in Firefox and Opera
+				var keyCode = $.ui.keyCode;
+				switch ( event.keyCode ) {
+				case keyCode.PAGE_UP:
+					this._move( "previousPage", event );
+					break;
+				case keyCode.PAGE_DOWN:
+					this._move( "nextPage", event );
+					break;
+				case keyCode.UP:
+					this._keyEvent( "previous", event );
+					break;
+				case keyCode.DOWN:
+					this._keyEvent( "next", event );
+					break;
+				}
+			},
+			input: function( event ) {
+				if ( suppressInput ) {
+					suppressInput = false;
+					event.preventDefault();
+					return;
+				}
+				this._searchTimeout( event );
+			},
+			focus: function() {
+				this.selectedItem = null;
+				this.previous = this._value();
+			},
+			blur: function( event ) {
+				if ( this.cancelBlur ) {
+					delete this.cancelBlur;
+					return;
+				}
+
+				clearTimeout( this.searching );
+				this.close( event );
+				this._change( event );
+			}
+		} );
+
+		this._initSource();
+		this.menu = $( "<ul>" )
+			.appendTo( this._appendTo() )
+			.menu( {
+
+				// disable ARIA support, the live region takes care of that
+				role: null
+			} )
+			.hide()
+			.menu( "instance" );
+
+		this._addClass( this.menu.element, "ui-autocomplete", "ui-front" );
+		this._on( this.menu.element, {
+			mousedown: function( event ) {
+
+				// prevent moving focus out of the text field
+				event.preventDefault();
+
+				// IE doesn't prevent moving focus even with event.preventDefault()
+				// so we set a flag to know when we should ignore the blur event
+				this.cancelBlur = true;
+				this._delay( function() {
+					delete this.cancelBlur;
+
+					// Support: IE 8 only
+					// Right clicking a menu item or selecting text from the menu items will
+					// result in focus moving out of the input. However, we've already received
+					// and ignored the blur event because of the cancelBlur flag set above. So
+					// we restore focus to ensure that the menu closes properly based on the user's
+					// next actions.
+					if ( this.element[ 0 ] !== $.ui.safeActiveElement( this.document[ 0 ] ) ) {
+						this.element.trigger( "focus" );
+					}
+				} );
+			},
+			menufocus: function( event, ui ) {
+				var label, item;
+
+				// support: Firefox
+				// Prevent accidental activation of menu items in Firefox (#7024 #9118)
+				if ( this.isNewMenu ) {
+					this.isNewMenu = false;
+					if ( event.originalEvent && /^mouse/.test( event.originalEvent.type ) ) {
+						this.menu.blur();
+
+						this.document.one( "mousemove", function() {
+							$( event.target ).trigger( event.originalEvent );
+						} );
+
+						return;
+					}
+				}
+
+				item = ui.item.data( "ui-autocomplete-item" );
+				if ( false !== this._trigger( "focus", event, { item: item } ) ) {
+
+					// use value to match what will end up in the input, if it was a key event
+					if ( event.originalEvent && /^key/.test( event.originalEvent.type ) ) {
+						this._value( item.value );
+					}
+				}
+
+				// Announce the value in the liveRegion
+				label = ui.item.attr( "aria-label" ) || item.value;
+				if ( label && $.trim( label ).length ) {
+					this.liveRegion.children().hide();
+					$( "<div>" ).text( label ).appendTo( this.liveRegion );
+				}
+			},
+			menuselect: function( event, ui ) {
+				var item = ui.item.data( "ui-autocomplete-item" ),
+					previous = this.previous;
+
+				// Only trigger when focus was lost (click on menu)
+				if ( this.element[ 0 ] !== $.ui.safeActiveElement( this.document[ 0 ] ) ) {
+					this.element.trigger( "focus" );
+					this.previous = previous;
+
+					// #6109 - IE triggers two focus events and the second
+					// is asynchronous, so we need to reset the previous
+					// term synchronously and asynchronously :-(
+					this._delay( function() {
+						this.previous = previous;
+						this.selectedItem = item;
+					} );
+				}
+
+				if ( false !== this._trigger( "select", event, { item: item } ) ) {
+					this._value( item.value );
+				}
+
+				// reset the term after the select event
+				// this allows custom select handling to work properly
+				this.term = this._value();
+
+				this.close( event );
+				this.selectedItem = item;
+			}
+		} );
+
+		this.liveRegion = $( "<div>", {
+			role: "status",
+			"aria-live": "assertive",
+			"aria-relevant": "additions"
+		} )
+			.appendTo( this.document[ 0 ].body );
+
+		this._addClass( this.liveRegion, null, "ui-helper-hidden-accessible" );
+
+		// Turning off autocomplete prevents the browser from remembering the
+		// value when navigating through history, so we re-enable autocomplete
+		// if the page is unloaded before the widget is destroyed. #7790
+		this._on( this.window, {
+			beforeunload: function() {
+				this.element.removeAttr( "autocomplete" );
+			}
+		} );
+	},
+
+	_destroy: function() {
+		clearTimeout( this.searching );
+		this.element.removeAttr( "autocomplete" );
+		this.menu.element.remove();
+		this.liveRegion.remove();
+	},
+
+	_setOption: function( key, value ) {
+		this._super( key, value );
+		if ( key === "source" ) {
+			this._initSource();
+		}
+		if ( key === "appendTo" ) {
+			this.menu.element.appendTo( this._appendTo() );
+		}
+		if ( key === "disabled" && value && this.xhr ) {
+			this.xhr.abort();
+		}
+	},
+
+	_isEventTargetInWidget: function( event ) {
+		var menuElement = this.menu.element[ 0 ];
+
+		return event.target === this.element[ 0 ] ||
+			event.target === menuElement ||
+			$.contains( menuElement, event.target );
+	},
+
+	_closeOnClickOutside: function( event ) {
+		if ( !this._isEventTargetInWidget( event ) ) {
+			this.close();
+		}
+	},
+
+	_appendTo: function() {
+		var element = this.options.appendTo;
+
+		if ( element ) {
+			element = element.jquery || element.nodeType ?
+				$( element ) :
+				this.document.find( element ).eq( 0 );
+		}
+
+		if ( !element || !element[ 0 ] ) {
+			element = this.element.closest( ".ui-front, dialog" );
+		}
+
+		if ( !element.length ) {
+			element = this.document[ 0 ].body;
+		}
+
+		return element;
+	},
+
+	_initSource: function() {
+		var array, url,
+			that = this;
+		if ( $.isArray( this.options.source ) ) {
+			array = this.options.source;
+			this.source = function( request, response ) {
+				response( $.ui.autocomplete.filter( array, request.term ) );
+			};
+		} else if ( typeof this.options.source === "string" ) {
+			url = this.options.source;
+			this.source = function( request, response ) {
+				if ( that.xhr ) {
+					that.xhr.abort();
+				}
+				that.xhr = $.ajax( {
+					url: url,
+					data: request,
+					dataType: "json",
+					success: function( data ) {
+						response( data );
+					},
+					error: function() {
+						response( [] );
+					}
+				} );
+			};
+		} else {
+			this.source = this.options.source;
+		}
+	},
+
+	_searchTimeout: function( event ) {
+		clearTimeout( this.searching );
+		this.searching = this._delay( function() {
+
+			// Search if the value has changed, or if the user retypes the same value (see #7434)
+			var equalValues = this.term === this._value(),
+				menuVisible = this.menu.element.is( ":visible" ),
+				modifierKey = event.altKey || event.ctrlKey || event.metaKey || event.shiftKey;
+
+			if ( !equalValues || ( equalValues && !menuVisible && !modifierKey ) ) {
+				this.selectedItem = null;
+				this.search( null, event );
+			}
+		}, this.options.delay );
+	},
+
+	search: function( value, event ) {
+		value = value != null ? value : this._value();
+
+		// Always save the actual value, not the one passed as an argument
+		this.term = this._value();
+
+		if ( value.length < this.options.minLength ) {
+			return this.close( event );
+		}
+
+		if ( this._trigger( "search", event ) === false ) {
+			return;
+		}
+
+		return this._search( value );
+	},
+
+	_search: function( value ) {
+		this.pending++;
+		this._addClass( "ui-autocomplete-loading" );
+		this.cancelSearch = false;
+
+		this.source( { term: value }, this._response() );
+	},
+
+	_response: function() {
+		var index = ++this.requestIndex;
+
+		return $.proxy( function( content ) {
+			if ( index === this.requestIndex ) {
+				this.__response( content );
+			}
+
+			this.pending--;
+			if ( !this.pending ) {
+				this._removeClass( "ui-autocomplete-loading" );
+			}
+		}, this );
+	},
+
+	__response: function( content ) {
+		if ( content ) {
+			content = this._normalize( content );
+		}
+		this._trigger( "response", null, { content: content } );
+		if ( !this.options.disabled && content && content.length && !this.cancelSearch ) {
+			this._suggest( content );
+			this._trigger( "open" );
+		} else {
+
+			// use ._close() instead of .close() so we don't cancel future searches
+			this._close();
+		}
+	},
+
+	close: function( event ) {
+		this.cancelSearch = true;
+		this._close( event );
+	},
+
+	_close: function( event ) {
+
+		// Remove the handler that closes the menu on outside clicks
+		this._off( this.document, "mousedown" );
+
+		if ( this.menu.element.is( ":visible" ) ) {
+			this.menu.element.hide();
+			this.menu.blur();
+			this.isNewMenu = true;
+			this._trigger( "close", event );
+		}
+	},
+
+	_change: function( event ) {
+		if ( this.previous !== this._value() ) {
+			this._trigger( "change", event, { item: this.selectedItem } );
+		}
+	},
+
+	_normalize: function( items ) {
+
+		// assume all items have the right format when the first item is complete
+		if ( items.length && items[ 0 ].label && items[ 0 ].value ) {
+			return items;
+		}
+		return $.map( items, function( item ) {
+			if ( typeof item === "string" ) {
+				return {
+					label: item,
+					value: item
+				};
+			}
+			return $.extend( {}, item, {
+				label: item.label || item.value,
+				value: item.value || item.label
+			} );
+		} );
+	},
+
+	_suggest: function( items ) {
+		var ul = this.menu.element.empty();
+		this._renderMenu( ul, items );
+		this.isNewMenu = true;
+		this.menu.refresh();
+
+		// Size and position menu
+		ul.show();
+		this._resizeMenu();
+		ul.position( $.extend( {
+			of: this.element
+		}, this.options.position ) );
+
+		if ( this.options.autoFocus ) {
+			this.menu.next();
+		}
+
+		// Listen for interactions outside of the widget (#6642)
+		this._on( this.document, {
+			mousedown: "_closeOnClickOutside"
+		} );
+	},
+
+	_resizeMenu: function() {
+		var ul = this.menu.element;
+		ul.outerWidth( Math.max(
+
+			// Firefox wraps long text (possibly a rounding bug)
+			// so we add 1px to avoid the wrapping (#7513)
+			ul.width( "" ).outerWidth() + 1,
+			this.element.outerWidth()
+		) );
+	},
+
+	_renderMenu: function( ul, items ) {
+		var that = this;
+		$.each( items, function( index, item ) {
+			that._renderItemData( ul, item );
+		} );
+	},
+
+	_renderItemData: function( ul, item ) {
+		return this._renderItem( ul, item ).data( "ui-autocomplete-item", item );
+	},
+
+	_renderItem: function( ul, item ) {
+		return $( "<li>" )
+			.append( $( "<div>" ).text( item.label ) )
+			.appendTo( ul );
+	},
+
+	_move: function( direction, event ) {
+		if ( !this.menu.element.is( ":visible" ) ) {
+			this.search( null, event );
+			return;
+		}
+		if ( this.menu.isFirstItem() && /^previous/.test( direction ) ||
+				this.menu.isLastItem() && /^next/.test( direction ) ) {
+
+			if ( !this.isMultiLine ) {
+				this._value( this.term );
+			}
+
+			this.menu.blur();
+			return;
+		}
+		this.menu[ direction ]( event );
+	},
+
+	widget: function() {
+		return this.menu.element;
+	},
+
+	_value: function() {
+		return this.valueMethod.apply( this.element, arguments );
+	},
+
+	_keyEvent: function( keyEvent, event ) {
+		if ( !this.isMultiLine || this.menu.element.is( ":visible" ) ) {
+			this._move( keyEvent, event );
+
+			// Prevents moving cursor to beginning/end of the text field in some browsers
+			event.preventDefault();
+		}
+	},
+
+	// Support: Chrome <=50
+	// We should be able to just use this.element.prop( "isContentEditable" )
+	// but hidden elements always report false in Chrome.
+	// https://code.google.com/p/chromium/issues/detail?id=313082
+	_isContentEditable: function( element ) {
+		if ( !element.length ) {
+			return false;
+		}
+
+		var editable = element.prop( "contentEditable" );
+
+		if ( editable === "inherit" ) {
+		  return this._isContentEditable( element.parent() );
+		}
+
+		return editable === "true";
+	}
+} );
+
+$.extend( $.ui.autocomplete, {
+	escapeRegex: function( value ) {
+		return value.replace( /[\-\[\]{}()*+?.,\\\^$|#\s]/g, "\\$&" );
+	},
+	filter: function( array, term ) {
+		var matcher = new RegExp( $.ui.autocomplete.escapeRegex( term ), "i" );
+		return $.grep( array, function( value ) {
+			return matcher.test( value.label || value.value || value );
+		} );
+	}
+} );
+
+// Live region extension, adding a `messages` option
+// NOTE: This is an experimental API. We are still investigating
+// a full solution for string manipulation and internationalization.
+$.widget( "ui.autocomplete", $.ui.autocomplete, {
+	options: {
+		messages: {
+			noResults: "No search results.",
+			results: function( amount ) {
+				return amount + ( amount > 1 ? " results are" : " result is" ) +
+					" available, use up and down arrow keys to navigate.";
+			}
+		}
+	},
+
+	__response: function( content ) {
+		var message;
+		this._superApply( arguments );
+		if ( this.options.disabled || this.cancelSearch ) {
+			return;
+		}
+		if ( content && content.length ) {
+			message = this.options.messages.results( content.length );
+		} else {
+			message = this.options.messages.noResults;
+		}
+		this.liveRegion.children().hide();
+		$( "<div>" ).text( message ).appendTo( this.liveRegion );
+	}
+} );
+
+var widgetsAutocomplete = $.ui.autocomplete;
+
+
+/*!
+ * jQuery UI Controlgroup 1.12.1
+ * http://jqueryui.com
+ *
+ * Copyright jQuery Foundation and other contributors
+ * Released under the MIT license.
+ * http://jquery.org/license
+ */
+
+//>>label: Controlgroup
+//>>group: Widgets
+//>>description: Visually groups form control widgets
+//>>docs: http://api.jqueryui.com/controlgroup/
+//>>demos: http://jqueryui.com/controlgroup/
+//>>css.structure: ../../themes/base/core.css
+//>>css.structure: ../../themes/base/controlgroup.css
+//>>css.theme: ../../themes/base/theme.css
+
+
+var controlgroupCornerRegex = /ui-corner-([a-z]){2,6}/g;
+
+var widgetsControlgroup = $.widget( "ui.controlgroup", {
+	version: "1.12.1",
+	defaultElement: "<div>",
+	options: {
+		direction: "horizontal",
+		disabled: null,
+		onlyVisible: true,
+		items: {
+			"button": "input[type=button], input[type=submit], input[type=reset], button, a",
+			"controlgroupLabel": ".ui-controlgroup-label",
+			"checkboxradio": "input[type='checkbox'], input[type='radio']",
+			"selectmenu": "select",
+			"spinner": ".ui-spinner-input"
+		}
+	},
+
+	_create: function() {
+		this._enhance();
+	},
+
+	// To support the enhanced option in jQuery Mobile, we isolate DOM manipulation
+	_enhance: function() {
+		this.element.attr( "role", "toolbar" );
+		this.refresh();
+	},
+
+	_destroy: function() {
+		this._callChildMethod( "destroy" );
+		this.childWidgets.removeData( "ui-controlgroup-data" );
+		this.element.removeAttr( "role" );
+		if ( this.options.items.controlgroupLabel ) {
+			this.element
+				.find( this.options.items.controlgroupLabel )
+				.find( ".ui-controlgroup-label-contents" )
+				.contents().unwrap();
+		}
+	},
+
+	_initWidgets: function() {
+		var that = this,
+			childWidgets = [];
+
+		// First we iterate over each of the items options
+		$.each( this.options.items, function( widget, selector ) {
+			var labels;
+			var options = {};
+
+			// Make sure the widget has a selector set
+			if ( !selector ) {
+				return;
+			}
+
+			if ( widget === "controlgroupLabel" ) {
+				labels = that.element.find( selector );
+				labels.each( function() {
+					var element = $( this );
+
+					if ( element.children( ".ui-controlgroup-label-contents" ).length ) {
+						return;
+					}
+					element.contents()
+						.wrapAll( "<span class='ui-controlgroup-label-contents'></span>" );
+				} );
+				that._addClass( labels, null, "ui-widget ui-widget-content ui-state-default" );
+				childWidgets = childWidgets.concat( labels.get() );
+				return;
+			}
+
+			// Make sure the widget actually exists
+			if ( !$.fn[ widget ] ) {
+				return;
+			}
+
+			// We assume everything is in the middle to start because we can't determine
+			// first / last elements until all enhancments are done.
+			if ( that[ "_" + widget + "Options" ] ) {
+				options = that[ "_" + widget + "Options" ]( "middle" );
+			} else {
+				options = { classes: {} };
+			}
+
+			// Find instances of this widget inside controlgroup and init them
+			that.element
+				.find( selector )
+				.each( function() {
+					var element = $( this );
+					var instance = element[ widget ]( "instance" );
+
+					// We need to clone the default options for this type of widget to avoid
+					// polluting the variable options which has a wider scope than a single widget.
+					var instanceOptions = $.widget.extend( {}, options );
+
+					// If the button is the child of a spinner ignore it
+					// TODO: Find a more generic solution
+					if ( widget === "button" && element.parent( ".ui-spinner" ).length ) {
+						return;
+					}
+
+					// Create the widget if it doesn't exist
+					if ( !instance ) {
+						instance = element[ widget ]()[ widget ]( "instance" );
+					}
+					if ( instance ) {
+						instanceOptions.classes =
+							that._resolveClassesValues( instanceOptions.classes, instance );
+					}
+					element[ widget ]( instanceOptions );
+
+					// Store an instance of the controlgroup to be able to reference
+					// from the outermost element for changing options and refresh
+					var widgetElement = element[ widget ]( "widget" );
+					$.data( widgetElement[ 0 ], "ui-controlgroup-data",
+						instance ? instance : element[ widget ]( "instance" ) );
+
+					childWidgets.push( widgetElement[ 0 ] );
+				} );
+		} );
+
+		this.childWidgets = $( $.unique( childWidgets ) );
+		this._addClass( this.childWidgets, "ui-controlgroup-item" );
+	},
+
+	_callChildMethod: function( method ) {
+		this.childWidgets.each( function() {
+			var element = $( this ),
+				data = element.data( "ui-controlgroup-data" );
+			if ( data && data[ method ] ) {
+				data[ method ]();
+			}
+		} );
+	},
+
+	_updateCornerClass: function( element, position ) {
+		var remove = "ui-corner-top ui-corner-bottom ui-corner-left ui-corner-right ui-corner-all";
+		var add = this._buildSimpleOptions( position, "label" ).classes.label;
+
+		this._removeClass( element, null, remove );
+		this._addClass( element, null, add );
+	},
+
+	_buildSimpleOptions: function( position, key ) {
+		var direction = this.options.direction === "vertical";
+		var result = {
+			classes: {}
+		};
+		result.classes[ key ] = {
+			"middle": "",
+			"first": "ui-corner-" + ( direction ? "top" : "left" ),
+			"last": "ui-corner-" + ( direction ? "bottom" : "right" ),
+			"only": "ui-corner-all"
+		}[ position ];
+
+		return result;
+	},
+
+	_spinnerOptions: function( position ) {
+		var options = this._buildSimpleOptions( position, "ui-spinner" );
+
+		options.classes[ "ui-spinner-up" ] = "";
+		options.classes[ "ui-spinner-down" ] = "";
+
+		return options;
+	},
+
+	_buttonOptions: function( position ) {
+		return this._buildSimpleOptions( position, "ui-button" );
+	},
+
+	_checkboxradioOptions: function( position ) {
+		return this._buildSimpleOptions( position, "ui-checkboxradio-label" );
+	},
+
+	_selectmenuOptions: function( position ) {
+		var direction = this.options.direction === "vertical";
+		return {
+			width: direction ? "auto" : false,
+			classes: {
+				middle: {
+					"ui-selectmenu-button-open": "",
+					"ui-selectmenu-button-closed": ""
+				},
+				first: {
+					"ui-selectmenu-button-open": "ui-corner-" + ( direction ? "top" : "tl" ),
+					"ui-selectmenu-button-closed": "ui-corner-" + ( direction ? "top" : "left" )
+				},
+				last: {
+					"ui-selectmenu-button-open": direction ? "" : "ui-corner-tr",
+					"ui-selectmenu-button-closed": "ui-corner-" + ( direction ? "bottom" : "right" )
+				},
+				only: {
+					"ui-selectmenu-button-open": "ui-corner-top",
+					"ui-selectmenu-button-closed": "ui-corner-all"
+				}
+
+			}[ position ]
+		};
+	},
+
+	_resolveClassesValues: function( classes, instance ) {
+		var result = {};
+		$.each( classes, function( key ) {
+			var current = instance.options.classes[ key ] || "";
+			current = $.trim( current.replace( controlgroupCornerRegex, "" ) );
+			result[ key ] = ( current + " " + classes[ key ] ).replace( /\s+/g, " " );
+		} );
+		return result;
+	},
+
+	_setOption: function( key, value ) {
+		if ( key === "direction" ) {
+			this._removeClass( "ui-controlgroup-" + this.options.direction );
+		}
+
+		this._super( key, value );
+		if ( key === "disabled" ) {
+			this._callChildMethod( value ? "disable" : "enable" );
+			return;
+		}
+
+		this.refresh();
+	},
+
+	refresh: function() {
+		var children,
+			that = this;
+
+		this._addClass( "ui-controlgroup ui-controlgroup-" + this.options.direction );
+
+		if ( this.options.direction === "horizontal" ) {
+			this._addClass( null, "ui-helper-clearfix" );
+		}
+		this._initWidgets();
+
+		children = this.childWidgets;
+
+		// We filter here because we need to track all childWidgets not just the visible ones
+		if ( this.options.onlyVisible ) {
+			children = children.filter( ":visible" );
+		}
+
+		if ( children.length ) {
+
+			// We do this last because we need to make sure all enhancment is done
+			// before determining first and last
+			$.each( [ "first", "last" ], function( index, value ) {
+				var instance = children[ value ]().data( "ui-controlgroup-data" );
+
+				if ( instance && that[ "_" + instance.widgetName + "Options" ] ) {
+					var options = that[ "_" + instance.widgetName + "Options" ](
+						children.length === 1 ? "only" : value
+					);
+					options.classes = that._resolveClassesValues( options.classes, instance );
+					instance.element[ instance.widgetName ]( options );
+				} else {
+					that._updateCornerClass( children[ value ](), value );
+				}
+			} );
+
+			// Finally call the refresh method on each of the child widgets.
+			this._callChildMethod( "refresh" );
+		}
+	}
+} );
+
+/*!
+ * jQuery UI Checkboxradio 1.12.1
+ * http://jqueryui.com
+ *
+ * Copyright jQuery Foundation and other contributors
+ * Released under the MIT license.
+ * http://jquery.org/license
+ */
+
+//>>label: Checkboxradio
+//>>group: Widgets
+//>>description: Enhances a form with multiple themeable checkboxes or radio buttons.
+//>>docs: http://api.jqueryui.com/checkboxradio/
+//>>demos: http://jqueryui.com/checkboxradio/
+//>>css.structure: ../../themes/base/core.css
+//>>css.structure: ../../themes/base/button.css
+//>>css.structure: ../../themes/base/checkboxradio.css
+//>>css.theme: ../../themes/base/theme.css
+
+
+
+$.widget( "ui.checkboxradio", [ $.ui.formResetMixin, {
+	version: "1.12.1",
+	options: {
+		disabled: null,
+		label: null,
+		icon: true,
+		classes: {
+			"ui-checkboxradio-label": "ui-corner-all",
+			"ui-checkboxradio-icon": "ui-corner-all"
+		}
+	},
+
+	_getCreateOptions: function() {
+		var disabled, labels;
+		var that = this;
+		var options = this._super() || {};
+
+		// We read the type here, because it makes more sense to throw a element type error first,
+		// rather then the error for lack of a label. Often if its the wrong type, it
+		// won't have a label (e.g. calling on a div, btn, etc)
+		this._readType();
+
+		labels = this.element.labels();
+
+		// If there are multiple labels, use the last one
+		this.label = $( labels[ labels.length - 1 ] );
+		if ( !this.label.length ) {
+			$.error( "No label found for checkboxradio widget" );
+		}
+
+		this.originalLabel = "";
+
+		// We need to get the label text but this may also need to make sure it does not contain the
+		// input itself.
+		this.label.contents().not( this.element[ 0 ] ).each( function() {
+
+			// The label contents could be text, html, or a mix. We concat each element to get a
+			// string representation of the label, without the input as part of it.
+			that.originalLabel += this.nodeType === 3 ? $( this ).text() : this.outerHTML;
+		} );
+
+		// Set the label option if we found label text
+		if ( this.originalLabel ) {
+			options.label = this.originalLabel;
+		}
+
+		disabled = this.element[ 0 ].disabled;
+		if ( disabled != null ) {
+			options.disabled = disabled;
+		}
+		return options;
+	},
+
+	_create: function() {
+		var checked = this.element[ 0 ].checked;
+
+		this._bindFormResetHandler();
+
+		if ( this.options.disabled == null ) {
+			this.options.disabled = this.element[ 0 ].disabled;
+		}
+
+		this._setOption( "disabled", this.options.disabled );
+		this._addClass( "ui-checkboxradio", "ui-helper-hidden-accessible" );
+		this._addClass( this.label, "ui-checkboxradio-label", "ui-button ui-widget" );
+
+		if ( this.type === "radio" ) {
+			this._addClass( this.label, "ui-checkboxradio-radio-label" );
+		}
+
+		if ( this.options.label && this.options.label !== this.originalLabel ) {
+			this._updateLabel();
+		} else if ( this.originalLabel ) {
+			this.options.label = this.originalLabel;
+		}
+
+		this._enhance();
+
+		if ( checked ) {
+			this._addClass( this.label, "ui-checkboxradio-checked", "ui-state-active" );
+			if ( this.icon ) {
+				this._addClass( this.icon, null, "ui-state-hover" );
+			}
+		}
+
+		this._on( {
+			change: "_toggleClasses",
+			focus: function() {
+				this._addClass( this.label, null, "ui-state-focus ui-visual-focus" );
+			},
+			blur: function() {
+				this._removeClass( this.label, null, "ui-state-focus ui-visual-focus" );
+			}
+		} );
+	},
+
+	_readType: function() {
+		var nodeName = this.element[ 0 ].nodeName.toLowerCase();
+		this.type = this.element[ 0 ].type;
+		if ( nodeName !== "input" || !/radio|checkbox/.test( this.type ) ) {
+			$.error( "Can't create checkboxradio on element.nodeName=" + nodeName +
+				" and element.type=" + this.type );
+		}
+	},
+
+	// Support jQuery Mobile enhanced option
+	_enhance: function() {
+		this._updateIcon( this.element[ 0 ].checked );
+	},
+
+	widget: function() {
+		return this.label;
+	},
+
+	_getRadioGroup: function() {
+		var group;
+		var name = this.element[ 0 ].name;
+		var nameSelector = "input[name='" + $.ui.escapeSelector( name ) + "']";
+
+		if ( !name ) {
+			return $( [] );
+		}
+
+		if ( this.form.length ) {
+			group = $( this.form[ 0 ].elements ).filter( nameSelector );
+		} else {
+
+			// Not inside a form, check all inputs that also are not inside a form
+			group = $( nameSelector ).filter( function() {
+				return $( this ).form().length === 0;
+			} );
+		}
+
+		return group.not( this.element );
+	},
+
+	_toggleClasses: function() {
+		var checked = this.element[ 0 ].checked;
+		this._toggleClass( this.label, "ui-checkboxradio-checked", "ui-state-active", checked );
+
+		if ( this.options.icon && this.type === "checkbox" ) {
+			this._toggleClass( this.icon, null, "ui-icon-check ui-state-checked", checked )
+				._toggleClass( this.icon, null, "ui-icon-blank", !checked );
+		}
+
+		if ( this.type === "radio" ) {
+			this._getRadioGroup()
+				.each( function() {
+					var instance = $( this ).checkboxradio( "instance" );
+
+					if ( instance ) {
+						instance._removeClass( instance.label,
+							"ui-checkboxradio-checked", "ui-state-active" );
+					}
+				} );
+		}
+	},
+
+	_destroy: function() {
+		this._unbindFormResetHandler();
+
+		if ( this.icon ) {
+			this.icon.remove();
+			this.iconSpace.remove();
+		}
+	},
+
+	_setOption: function( key, value ) {
+
+		// We don't allow the value to be set to nothing
+		if ( key === "label" && !value ) {
+			return;
+		}
+
+		this._super( key, value );
+
+		if ( key === "disabled" ) {
+			this._toggleClass( this.label, null, "ui-state-disabled", value );
+			this.element[ 0 ].disabled = value;
+
+			// Don't refresh when setting disabled
+			return;
+		}
+		this.refresh();
+	},
+
+	_updateIcon: function( checked ) {
+		var toAdd = "ui-icon ui-icon-background ";
+
+		if ( this.options.icon ) {
+			if ( !this.icon ) {
+				this.icon = $( "<span>" );
+				this.iconSpace = $( "<span> </span>" );
+				this._addClass( this.iconSpace, "ui-checkboxradio-icon-space" );
+			}
+
+			if ( this.type === "checkbox" ) {
+				toAdd += checked ? "ui-icon-check ui-state-checked" : "ui-icon-blank";
+				this._removeClass( this.icon, null, checked ? "ui-icon-blank" : "ui-icon-check" );
+			} else {
+				toAdd += "ui-icon-blank";
+			}
+			this._addClass( this.icon, "ui-checkboxradio-icon", toAdd );
+			if ( !checked ) {
+				this._removeClass( this.icon, null, "ui-icon-check ui-state-checked" );
+			}
+			this.icon.prependTo( this.label ).after( this.iconSpace );
+		} else if ( this.icon !== undefined ) {
+			this.icon.remove();
+			this.iconSpace.remove();
+			delete this.icon;
+		}
+	},
+
+	_updateLabel: function() {
+
+		// Remove the contents of the label ( minus the icon, icon space, and input )
+		var contents = this.label.contents().not( this.element[ 0 ] );
+		if ( this.icon ) {
+			contents = contents.not( this.icon[ 0 ] );
+		}
+		if ( this.iconSpace ) {
+			contents = contents.not( this.iconSpace[ 0 ] );
+		}
+		contents.remove();
+
+		this.label.append( this.options.label );
+	},
+
+	refresh: function() {
+		var checked = this.element[ 0 ].checked,
+			isDisabled = this.element[ 0 ].disabled;
+
+		this._updateIcon( checked );
+		this._toggleClass( this.label, "ui-checkboxradio-checked", "ui-state-active", checked );
+		if ( this.options.label !== null ) {
+			this._updateLabel();
+		}
+
+		if ( isDisabled !== this.options.disabled ) {
+			this._setOptions( { "disabled": isDisabled } );
+		}
+	}
+
+} ] );
+
+var widgetsCheckboxradio = $.ui.checkboxradio;
+
+
+/*!
+ * jQuery UI Button 1.12.1
+ * http://jqueryui.com
+ *
+ * Copyright jQuery Foundation and other contributors
+ * Released under the MIT license.
+ * http://jquery.org/license
+ */
+
+//>>label: Button
+//>>group: Widgets
+//>>description: Enhances a form with themeable buttons.
+//>>docs: http://api.jqueryui.com/button/
+//>>demos: http://jqueryui.com/button/
+//>>css.structure: ../../themes/base/core.css
+//>>css.structure: ../../themes/base/button.css
+//>>css.theme: ../../themes/base/theme.css
+
+
+
+$.widget( "ui.button", {
+	version: "1.12.1",
+	defaultElement: "<button>",
+	options: {
+		classes: {
+			"ui-button": "ui-corner-all"
+		},
+		disabled: null,
+		icon: null,
+		iconPosition: "beginning",
+		label: null,
+		showLabel: true
+	},
+
+	_getCreateOptions: function() {
+		var disabled,
+
+			// This is to support cases like in jQuery Mobile where the base widget does have
+			// an implementation of _getCreateOptions
+			options = this._super() || {};
+
+		this.isInput = this.element.is( "input" );
+
+		disabled = this.element[ 0 ].disabled;
+		if ( disabled != null ) {
+			options.disabled = disabled;
+		}
+
+		this.originalLabel = this.isInput ? this.element.val() : this.element.html();
+		if ( this.originalLabel ) {
+			options.label = this.originalLabel;
+		}
+
+		return options;
+	},
+
+	_create: function() {
+		if ( !this.option.showLabel & !this.options.icon ) {
+			this.options.showLabel = true;
+		}
+
+		// We have to check the option again here even though we did in _getCreateOptions,
+		// because null may have been passed on init which would override what was set in
+		// _getCreateOptions
+		if ( this.options.disabled == null ) {
+			this.options.disabled = this.element[ 0 ].disabled || false;
+		}
+
+		this.hasTitle = !!this.element.attr( "title" );
+
+		// Check to see if the label needs to be set or if its already correct
+		if ( this.options.label && this.options.label !== this.originalLabel ) {
+			if ( this.isInput ) {
+				this.element.val( this.options.label );
+			} else {
+				this.element.html( this.options.label );
+			}
+		}
+		this._addClass( "ui-button", "ui-widget" );
+		this._setOption( "disabled", this.options.disabled );
+		this._enhance();
+
+		if ( this.element.is( "a" ) ) {
+			this._on( {
+				"keyup": function( event ) {
+					if ( event.keyCode === $.ui.keyCode.SPACE ) {
+						event.preventDefault();
+
+						// Support: PhantomJS <= 1.9, IE 8 Only
+						// If a native click is available use it so we actually cause navigation
+						// otherwise just trigger a click event
+						if ( this.element[ 0 ].click ) {
+							this.element[ 0 ].click();
+						} else {
+							this.element.trigger( "click" );
+						}
+					}
+				}
+			} );
+		}
+	},
+
+	_enhance: function() {
+		if ( !this.element.is( "button" ) ) {
+			this.element.attr( "role", "button" );
+		}
+
+		if ( this.options.icon ) {
+			this._updateIcon( "icon", this.options.icon );
+			this._updateTooltip();
+		}
+	},
+
+	_updateTooltip: function() {
+		this.title = this.element.attr( "title" );
+
+		if ( !this.options.showLabel && !this.title ) {
+			this.element.attr( "title", this.options.label );
+		}
+	},
+
+	_updateIcon: function( option, value ) {
+		var icon = option !== "iconPosition",
+			position = icon ? this.options.iconPosition : value,
+			displayBlock = position === "top" || position === "bottom";
+
+		// Create icon
+		if ( !this.icon ) {
+			this.icon = $( "<span>" );
+
+			this._addClass( this.icon, "ui-button-icon", "ui-icon" );
+
+			if ( !this.options.showLabel ) {
+				this._addClass( "ui-button-icon-only" );
+			}
+		} else if ( icon ) {
+
+			// If we are updating the icon remove the old icon class
+			this._removeClass( this.icon, null, this.options.icon );
+		}
+
+		// If we are updating the icon add the new icon class
+		if ( icon ) {
+			this._addClass( this.icon, null, value );
+		}
+
+		this._attachIcon( position );
+
+		// If the icon is on top or bottom we need to add the ui-widget-icon-block class and remove
+		// the iconSpace if there is one.
+		if ( displayBlock ) {
+			this._addClass( this.icon, null, "ui-widget-icon-block" );
+			if ( this.iconSpace ) {
+				this.iconSpace.remove();
+			}
+		} else {
+
+			// Position is beginning or end so remove the ui-widget-icon-block class and add the
+			// space if it does not exist
+			if ( !this.iconSpace ) {
+				this.iconSpace = $( "<span> </span>" );
+				this._addClass( this.iconSpace, "ui-button-icon-space" );
+			}
+			this._removeClass( this.icon, null, "ui-wiget-icon-block" );
+			this._attachIconSpace( position );
+		}
+	},
+
+	_destroy: function() {
+		this.element.removeAttr( "role" );
+
+		if ( this.icon ) {
+			this.icon.remove();
+		}
+		if ( this.iconSpace ) {
+			this.iconSpace.remove();
+		}
+		if ( !this.hasTitle ) {
+			this.element.removeAttr( "title" );
+		}
+	},
+
+	_attachIconSpace: function( iconPosition ) {
+		this.icon[ /^(?:end|bottom)/.test( iconPosition ) ? "before" : "after" ]( this.iconSpace );
+	},
+
+	_attachIcon: function( iconPosition ) {
+		this.element[ /^(?:end|bottom)/.test( iconPosition ) ? "append" : "prepend" ]( this.icon );
+	},
+
+	_setOptions: function( options ) {
+		var newShowLabel = options.showLabel === undefined ?
+				this.options.showLabel :
+				options.showLabel,
+			newIcon = options.icon === undefined ? this.options.icon : options.icon;
+
+		if ( !newShowLabel && !newIcon ) {
+			options.showLabel = true;
+		}
+		this._super( options );
+	},
+
+	_setOption: function( key, value ) {
+		if ( key === "icon" ) {
+			if ( value ) {
+				this._updateIcon( key, value );
+			} else if ( this.icon ) {
+				this.icon.remove();
+				if ( this.iconSpace ) {
+					this.iconSpace.remove();
+				}
+			}
+		}
+
+		if ( key === "iconPosition" ) {
+			this._updateIcon( key, value );
+		}
+
+		// Make sure we can't end up with a button that has neither text nor icon
+		if ( key === "showLabel" ) {
+				this._toggleClass( "ui-button-icon-only", null, !value );
+				this._updateTooltip();
+		}
+
+		if ( key === "label" ) {
+			if ( this.isInput ) {
+				this.element.val( value );
+			} else {
+
+				// If there is an icon, append it, else nothing then append the value
+				// this avoids removal of the icon when setting label text
+				this.element.html( value );
+				if ( this.icon ) {
+					this._attachIcon( this.options.iconPosition );
+					this._attachIconSpace( this.options.iconPosition );
+				}
+			}
+		}
+
+		this._super( key, value );
+
+		if ( key === "disabled" ) {
+			this._toggleClass( null, "ui-state-disabled", value );
+			this.element[ 0 ].disabled = value;
+			if ( value ) {
+				this.element.blur();
+			}
+		}
+	},
+
+	refresh: function() {
+
+		// Make sure to only check disabled if its an element that supports this otherwise
+		// check for the disabled class to determine state
+		var isDisabled = this.element.is( "input, button" ) ?
+			this.element[ 0 ].disabled : this.element.hasClass( "ui-button-disabled" );
+
+		if ( isDisabled !== this.options.disabled ) {
+			this._setOptions( { disabled: isDisabled } );
+		}
+
+		this._updateTooltip();
+	}
+} );
+
+// DEPRECATED
+if ( $.uiBackCompat !== false ) {
+
+	// Text and Icons options
+	$.widget( "ui.button", $.ui.button, {
+		options: {
+			text: true,
+			icons: {
+				primary: null,
+				secondary: null
+			}
+		},
+
+		_create: function() {
+			if ( this.options.showLabel && !this.options.text ) {
+				this.options.showLabel = this.options.text;
+			}
+			if ( !this.options.showLabel && this.options.text ) {
+				this.options.text = this.options.showLabel;
+			}
+			if ( !this.options.icon && ( this.options.icons.primary ||
+					this.options.icons.secondary ) ) {
+				if ( this.options.icons.primary ) {
+					this.options.icon = this.options.icons.primary;
+				} else {
+					this.options.icon = this.options.icons.secondary;
+					this.options.iconPosition = "end";
+				}
+			} else if ( this.options.icon ) {
+				this.options.icons.primary = this.options.icon;
+			}
+			this._super();
+		},
+
+		_setOption: function( key, value ) {
+			if ( key === "text" ) {
+				this._super( "showLabel", value );
+				return;
+			}
+			if ( key === "showLabel" ) {
+				this.options.text = value;
+			}
+			if ( key === "icon" ) {
+				this.options.icons.primary = value;
+			}
+			if ( key === "icons" ) {
+				if ( value.primary ) {
+					this._super( "icon", value.primary );
+					this._super( "iconPosition", "beginning" );
+				} else if ( value.secondary ) {
+					this._super( "icon", value.secondary );
+					this._super( "iconPosition", "end" );
+				}
+			}
+			this._superApply( arguments );
+		}
+	} );
+
+	$.fn.button = ( function( orig ) {
+		return function() {
+			if ( !this.length || ( this.length && this[ 0 ].tagName !== "INPUT" ) ||
+					( this.length && this[ 0 ].tagName === "INPUT" && (
+						this.attr( "type" ) !== "checkbox" && this.attr( "type" ) !== "radio"
+					) ) ) {
+				return orig.apply( this, arguments );
+			}
+			if ( !$.ui.checkboxradio ) {
+				$.error( "Checkboxradio widget missing" );
+			}
+			if ( arguments.length === 0 ) {
+				return this.checkboxradio( {
+					"icon": false
+				} );
+			}
+			return this.checkboxradio.apply( this, arguments );
+		};
+	} )( $.fn.button );
+
+	$.fn.buttonset = function() {
+		if ( !$.ui.controlgroup ) {
+			$.error( "Controlgroup widget missing" );
+		}
+		if ( arguments[ 0 ] === "option" && arguments[ 1 ] === "items" && arguments[ 2 ] ) {
+			return this.controlgroup.apply( this,
+				[ arguments[ 0 ], "items.button", arguments[ 2 ] ] );
+		}
+		if ( arguments[ 0 ] === "option" && arguments[ 1 ] === "items" ) {
+			return this.controlgroup.apply( this, [ arguments[ 0 ], "items.button" ] );
+		}
+		if ( typeof arguments[ 0 ] === "object" && arguments[ 0 ].items ) {
+			arguments[ 0 ].items = {
+				button: arguments[ 0 ].items
+			};
+		}
+		return this.controlgroup.apply( this, arguments );
+	};
+}
+
+var widgetsButton = $.ui.button;
+
+
+// jscs:disable maximumLineLength
+/* jscs:disable requireCamelCaseOrUpperCaseIdentifiers */
+/*!
+ * jQuery UI Datepicker 1.12.1
+ * http://jqueryui.com
+ *
+ * Copyright jQuery Foundation and other contributors
+ * Released under the MIT license.
+ * http://jquery.org/license
+ */
+
+//>>label: Datepicker
+//>>group: Widgets
+//>>description: Displays a calendar from an input or inline for selecting dates.
+//>>docs: http://api.jqueryui.com/datepicker/
+//>>demos: http://jqueryui.com/datepicker/
+//>>css.structure: ../../themes/base/core.css
+//>>css.structure: ../../themes/base/datepicker.css
+//>>css.theme: ../../themes/base/theme.css
+
+
+
+$.extend( $.ui, { datepicker: { version: "1.12.1" } } );
+
+var datepicker_instActive;
+
+function datepicker_getZindex( elem ) {
+	var position, value;
+	while ( elem.length && elem[ 0 ] !== document ) {
+
+		// Ignore z-index if position is set to a value where z-index is ignored by the browser
+		// This makes behavior of this function consistent across browsers
+		// WebKit always returns auto if the element is positioned
+		position = elem.css( "position" );
+		if ( position === "absolute" || position === "relative" || position === "fixed" ) {
+
+			// IE returns 0 when zIndex is not specified
+			// other browsers return a string
+			// we ignore the case of nested elements with an explicit value of 0
+			// <div style="z-index: -10;"><div style="z-index: 0;"></div></div>
+			value = parseInt( elem.css( "zIndex" ), 10 );
+			if ( !isNaN( value ) && value !== 0 ) {
+				return value;
+			}
+		}
+		elem = elem.parent();
+	}
+
+	return 0;
+}
+/* Date picker manager.
+   Use the singleton instance of this class, $.datepicker, to interact with the date picker.
+   Settings for (groups of) date pickers are maintained in an instance object,
+   allowing multiple different settings on the same page. */
+
+function Datepicker() {
+	this._curInst = null; // The current instance in use
+	this._keyEvent = false; // If the last event was a key event
+	this._disabledInputs = []; // List of date picker inputs that have been disabled
+	this._datepickerShowing = false; // True if the popup picker is showing , false if not
+	this._inDialog = false; // True if showing within a "dialog", false if not
+	this._mainDivId = "ui-datepicker-div"; // The ID of the main datepicker division
+	this._inlineClass = "ui-datepicker-inline"; // The name of the inline marker class
+	this._appendClass = "ui-datepicker-append"; // The name of the append marker class
+	this._triggerClass = "ui-datepicker-trigger"; // The name of the trigger marker class
+	this._dialogClass = "ui-datepicker-dialog"; // The name of the dialog marker class
+	this._disableClass = "ui-datepicker-disabled"; // The name of the disabled covering marker class
+	this._unselectableClass = "ui-datepicker-unselectable"; // The name of the unselectable cell marker class
+	this._currentClass = "ui-datepicker-current-day"; // The name of the current day marker class
+	this._dayOverClass = "ui-datepicker-days-cell-over"; // The name of the day hover marker class
+	this.regional = []; // Available regional settings, indexed by language code
+	this.regional[ "" ] = { // Default regional settings
+		closeText: "Done", // Display text for close link
+		prevText: "Prev", // Display text for previous month link
+		nextText: "Next", // Display text for next month link
+		currentText: "Today", // Display text for current month link
+		monthNames: [ "January","February","March","April","May","June",
+			"July","August","September","October","November","December" ], // Names of months for drop-down and formatting
+		monthNamesShort: [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ], // For formatting
+		dayNames: [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ], // For formatting
+		dayNamesShort: [ "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" ], // For formatting
+		dayNamesMin: [ "Su","Mo","Tu","We","Th","Fr","Sa" ], // Column headings for days starting at Sunday
+		weekHeader: "Wk", // Column header for week of the year
+		dateFormat: "mm/dd/yy", // See format options on parseDate
+		firstDay: 0, // The first day of the week, Sun = 0, Mon = 1, ...
+		isRTL: false, // True if right-to-left language, false if left-to-right
+		showMonthAfterYear: false, // True if the year select precedes month, false for month then year
+		yearSuffix: "" // Additional text to append to the year in the month headers
+	};
+	this._defaults = { // Global defaults for all the date picker instances
+		showOn: "focus", // "focus" for popup on focus,
+			// "button" for trigger button, or "both" for either
+		showAnim: "fadeIn", // Name of jQuery animation for popup
+		showOptions: {}, // Options for enhanced animations
+		defaultDate: null, // Used when field is blank: actual date,
+			// +/-number for offset from today, null for today
+		appendText: "", // Display text following the input box, e.g. showing the format
+		buttonText: "...", // Text for trigger button
+		buttonImage: "", // URL for trigger button image
+		buttonImageOnly: false, // True if the image appears alone, false if it appears on a button
+		hideIfNoPrevNext: false, // True to hide next/previous month links
+			// if not applicable, false to just disable them
+		navigationAsDateFormat: false, // True if date formatting applied to prev/today/next links
+		gotoCurrent: false, // True if today link goes back to current selection instead
+		changeMonth: false, // True if month can be selected directly, false if only prev/next
+		changeYear: false, // True if year can be selected directly, false if only prev/next
+		yearRange: "c-10:c+10", // Range of years to display in drop-down,
+			// either relative to today's year (-nn:+nn), relative to currently displayed year
+			// (c-nn:c+nn), absolute (nnnn:nnnn), or a combination of the above (nnnn:-n)
+		showOtherMonths: false, // True to show dates in other months, false to leave blank
+		selectOtherMonths: false, // True to allow selection of dates in other months, false for unselectable
+		showWeek: false, // True to show week of the year, false to not show it
+		calculateWeek: this.iso8601Week, // How to calculate the week of the year,
+			// takes a Date and returns the number of the week for it
+		shortYearCutoff: "+10", // Short year values < this are in the current century,
+			// > this are in the previous century,
+			// string value starting with "+" for current year + value
+		minDate: null, // The earliest selectable date, or null for no limit
+		maxDate: null, // The latest selectable date, or null for no limit
+		duration: "fast", // Duration of display/closure
+		beforeShowDay: null, // Function that takes a date and returns an array with
+			// [0] = true if selectable, false if not, [1] = custom CSS class name(s) or "",
+			// [2] = cell title (optional), e.g. $.datepicker.noWeekends
+		beforeShow: null, // Function that takes an input field and
+			// returns a set of custom settings for the date picker
+		onSelect: null, // Define a callback function when a date is selected
+		onChangeMonthYear: null, // Define a callback function when the month or year is changed
+		onClose: null, // Define a callback function when the datepicker is closed
+		numberOfMonths: 1, // Number of months to show at a time
+		showCurrentAtPos: 0, // The position in multipe months at which to show the current month (starting at 0)
+		stepMonths: 1, // Number of months to step back/forward
+		stepBigMonths: 12, // Number of months to step back/forward for the big links
+		altField: "", // Selector for an alternate field to store selected dates into
+		altFormat: "", // The date format to use for the alternate field
+		constrainInput: true, // The input is constrained by the current date format
+		showButtonPanel: false, // True to show button panel, false to not show it
+		autoSize: false, // True to size the input for the date format, false to leave as is
+		disabled: false // The initial disabled state
+	};
+	$.extend( this._defaults, this.regional[ "" ] );
+	this.regional.en = $.extend( true, {}, this.regional[ "" ] );
+	this.regional[ "en-US" ] = $.extend( true, {}, this.regional.en );
+	this.dpDiv = datepicker_bindHover( $( "<div id='" + this._mainDivId + "' class='ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all'></div>" ) );
+}
+
+$.extend( Datepicker.prototype, {
+	/* Class name added to elements to indicate already configured with a date picker. */
+	markerClassName: "hasDatepicker",
+
+	//Keep track of the maximum number of rows displayed (see #7043)
+	maxRows: 4,
+
+	// TODO rename to "widget" when switching to widget factory
+	_widgetDatepicker: function() {
+		return this.dpDiv;
+	},
+
+	/* Override the default settings for all instances of the date picker.
+	 * @param  settings  object - the new settings to use as defaults (anonymous object)
+	 * @return the manager object
+	 */
+	setDefaults: function( settings ) {
+		datepicker_extendRemove( this._defaults, settings || {} );
+		return this;
+	},
+
+	/* Attach the date picker to a jQuery selection.
+	 * @param  target	element - the target input field or division or span
+	 * @param  settings  object - the new settings to use for this date picker instance (anonymous)
+	 */
+	_attachDatepicker: function( target, settings ) {
+		var nodeName, inline, inst;
+		nodeName = target.nodeName.toLowerCase();
+		inline = ( nodeName === "div" || nodeName === "span" );
+		if ( !target.id ) {
+			this.uuid += 1;
+			target.id = "dp" + this.uuid;
+		}
+		inst = this._newInst( $( target ), inline );
+		inst.settings = $.extend( {}, settings || {} );
+		if ( nodeName === "input" ) {
+			this._connectDatepicker( target, inst );
+		} else if ( inline ) {
+			this._inlineDatepicker( target, inst );
+		}
+	},
+
+	/* Create a new instance object. */
+	_newInst: function( target, inline ) {
+		var id = target[ 0 ].id.replace( /([^A-Za-z0-9_\-])/g, "\\\\$1" ); // escape jQuery meta chars
+		return { id: id, input: target, // associated target
+			selectedDay: 0, selectedMonth: 0, selectedYear: 0, // current selection
+			drawMonth: 0, drawYear: 0, // month being drawn
+			inline: inline, // is datepicker inline or not
+			dpDiv: ( !inline ? this.dpDiv : // presentation div
+			datepicker_bindHover( $( "<div class='" + this._inlineClass + " ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all'></div>" ) ) ) };
+	},
+
+	/* Attach the date picker to an input field. */
+	_connectDatepicker: function( target, inst ) {
+		var input = $( target );
+		inst.append = $( [] );
+		inst.trigger = $( [] );
+		if ( input.hasClass( this.markerClassName ) ) {
+			return;
+		}
+		this._attachments( input, inst );
+		input.addClass( this.markerClassName ).on( "keydown", this._doKeyDown ).
+			on( "keypress", this._doKeyPress ).on( "keyup", this._doKeyUp );
+		this._autoSize( inst );
+		$.data( target, "datepicker", inst );
+
+		//If disabled option is true, disable the datepicker once it has been attached to the input (see ticket #5665)
+		if ( inst.settings.disabled ) {
+			this._disableDatepicker( target );
+		}
+	},
+
+	/* Make attachments based on settings. */
+	_attachments: function( input, inst ) {
+		var showOn, buttonText, buttonImage,
+			appendText = this._get( inst, "appendText" ),
+			isRTL = this._get( inst, "isRTL" );
+
+		if ( inst.append ) {
+			inst.append.remove();
+		}
+		if ( appendText ) {
+			inst.append = $( "<span class='" + this._appendClass + "'>" + appendText + "</span>" );
+			input[ isRTL ? "before" : "after" ]( inst.append );
+		}
+
+		input.off( "focus", this._showDatepicker );
+
+		if ( inst.trigger ) {
+			inst.trigger.remove();
+		}
+
+		showOn = this._get( inst, "showOn" );
+		if ( showOn === "focus" || showOn === "both" ) { // pop-up date picker when in the marked field
+			input.on( "focus", this._showDatepicker );
+		}
+		if ( showOn === "button" || showOn === "both" ) { // pop-up date picker when button clicked
+			buttonText = this._get( inst, "buttonText" );
+			buttonImage = this._get( inst, "buttonImage" );
+			inst.trigger = $( this._get( inst, "buttonImageOnly" ) ?
+				$( "<img/>" ).addClass( this._triggerClass ).
+					attr( { src: buttonImage, alt: buttonText, title: buttonText } ) :
+				$( "<button type='button'></button>" ).addClass( this._triggerClass ).
+					html( !buttonImage ? buttonText : $( "<img/>" ).attr(
+					{ src:buttonImage, alt:buttonText, title:buttonText } ) ) );
+			input[ isRTL ? "before" : "after" ]( inst.trigger );
+			inst.trigger.on( "click", function() {
+				if ( $.datepicker._datepickerShowing && $.datepicker._lastInput === input[ 0 ] ) {
+					$.datepicker._hideDatepicker();
+				} else if ( $.datepicker._datepickerShowing && $.datepicker._lastInput !== input[ 0 ] ) {
+					$.datepicker._hideDatepicker();
+					$.datepicker._showDatepicker( input[ 0 ] );
+				} else {
+					$.datepicker._showDatepicker( input[ 0 ] );
+				}
+				return false;
+			} );
+		}
+	},
+
+	/* Apply the maximum length for the date format. */
+	_autoSize: function( inst ) {
+		if ( this._get( inst, "autoSize" ) && !inst.inline ) {
+			var findMax, max, maxI, i,
+				date = new Date( 2009, 12 - 1, 20 ), // Ensure double digits
+				dateFormat = this._get( inst, "dateFormat" );
+
+			if ( dateFormat.match( /[DM]/ ) ) {
+				findMax = function( names ) {
+					max = 0;
+					maxI = 0;
+					for ( i = 0; i < names.length; i++ ) {
+						if ( names[ i ].length > max ) {
+							max = names[ i ].length;
+							maxI = i;
+						}
+					}
+					return maxI;
+				};
+				date.setMonth( findMax( this._get( inst, ( dateFormat.match( /MM/ ) ?
+					"monthNames" : "monthNamesShort" ) ) ) );
+				date.setDate( findMax( this._get( inst, ( dateFormat.match( /DD/ ) ?
+					"dayNames" : "dayNamesShort" ) ) ) + 20 - date.getDay() );
+			}
+			inst.input.attr( "size", this._formatDate( inst, date ).length );
+		}
+	},
+
+	/* Attach an inline date picker to a div. */
+	_inlineDatepicker: function( target, inst ) {
+		var divSpan = $( target );
+		if ( divSpan.hasClass( this.markerClassName ) ) {
+			return;
+		}
+		divSpan.addClass( this.markerClassName ).append( inst.dpDiv );
+		$.data( target, "datepicker", inst );
+		this._setDate( inst, this._getDefaultDate( inst ), true );
+		this._updateDatepicker( inst );
+		this._updateAlternate( inst );
+
+		//If disabled option is true, disable the datepicker before showing it (see ticket #5665)
+		if ( inst.settings.disabled ) {
+			this._disableDatepicker( target );
+		}
+
+		// Set display:block in place of inst.dpDiv.show() which won't work on disconnected elements
+		// http://bugs.jqueryui.com/ticket/7552 - A Datepicker created on a detached div has zero height
+		inst.dpDiv.css( "display", "block" );
+	},
+
+	/* Pop-up the date picker in a "dialog" box.
+	 * @param  input element - ignored
+	 * @param  date	string or Date - the initial date to display
+	 * @param  onSelect  function - the function to call when a date is selected
+	 * @param  settings  object - update the dialog date picker instance's settings (anonymous object)
+	 * @param  pos int[2] - coordinates for the dialog's position within the screen or
+	 *					event - with x/y coordinates or
+	 *					leave empty for default (screen centre)
+	 * @return the manager object
+	 */
+	_dialogDatepicker: function( input, date, onSelect, settings, pos ) {
+		var id, browserWidth, browserHeight, scrollX, scrollY,
+			inst = this._dialogInst; // internal instance
+
+		if ( !inst ) {
+			this.uuid += 1;
+			id = "dp" + this.uuid;
+			this._dialogInput = $( "<input type='text' id='" + id +
+				"' style='position: absolute; top: -100px; width: 0px;'/>" );
+			this._dialogInput.on( "keydown", this._doKeyDown );
+			$( "body" ).append( this._dialogInput );
+			inst = this._dialogInst = this._newInst( this._dialogInput, false );
+			inst.settings = {};
+			$.data( this._dialogInput[ 0 ], "datepicker", inst );
+		}
+		datepicker_extendRemove( inst.settings, settings || {} );
+		date = ( date && date.constructor === Date ? this._formatDate( inst, date ) : date );
+		this._dialogInput.val( date );
+
+		this._pos = ( pos ? ( pos.length ? pos : [ pos.pageX, pos.pageY ] ) : null );
+		if ( !this._pos ) {
+			browserWidth = document.documentElement.clientWidth;
+			browserHeight = document.documentElement.clientHeight;
+			scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
+			scrollY = document.documentElement.scrollTop || document.body.scrollTop;
+			this._pos = // should use actual width/height below
+				[ ( browserWidth / 2 ) - 100 + scrollX, ( browserHeight / 2 ) - 150 + scrollY ];
+		}
+
+		// Move input on screen for focus, but hidden behind dialog
+		this._dialogInput.css( "left", ( this._pos[ 0 ] + 20 ) + "px" ).css( "top", this._pos[ 1 ] + "px" );
+		inst.settings.onSelect = onSelect;
+		this._inDialog = true;
+		this.dpDiv.addClass( this._dialogClass );
+		this._showDatepicker( this._dialogInput[ 0 ] );
+		if ( $.blockUI ) {
+			$.blockUI( this.dpDiv );
+		}
+		$.data( this._dialogInput[ 0 ], "datepicker", inst );
+		return this;
+	},
+
+	/* Detach a datepicker from its control.
+	 * @param  target	element - the target input field or division or span
+	 */
+	_destroyDatepicker: function( target ) {
+		var nodeName,
+			$target = $( target ),
+			inst = $.data( target, "datepicker" );
+
+		if ( !$target.hasClass( this.markerClassName ) ) {
+			return;
+		}
+
+		nodeName = target.nodeName.toLowerCase();
+		$.removeData( target, "datepicker" );
+		if ( nodeName === "input" ) {
+			inst.append.remove();
+			inst.trigger.remove();
+			$target.removeClass( this.markerClassName ).
+				off( "focus", this._showDatepicker ).
+				off( "keydown", this._doKeyDown ).
+				off( "keypress", this._doKeyPress ).
+				off( "keyup", this._doKeyUp );
+		} else if ( nodeName === "div" || nodeName === "span" ) {
+			$target.removeClass( this.markerClassName ).empty();
+		}
+
+		if ( datepicker_instActive === inst ) {
+			datepicker_instActive = null;
+		}
+	},
+
+	/* Enable the date picker to a jQuery selection.
+	 * @param  target	element - the target input field or division or span
+	 */
+	_enableDatepicker: function( target ) {
+		var nodeName, inline,
+			$target = $( target ),
+			inst = $.data( target, "datepicker" );
+
+		if ( !$target.hasClass( this.markerClassName ) ) {
+			return;
+		}
+
+		nodeName = target.nodeName.toLowerCase();
+		if ( nodeName === "input" ) {
+			target.disabled = false;
+			inst.trigger.filter( "button" ).
+				each( function() { this.disabled = false; } ).end().
+				filter( "img" ).css( { opacity: "1.0", cursor: "" } );
+		} else if ( nodeName === "div" || nodeName === "span" ) {
+			inline = $target.children( "." + this._inlineClass );
+			inline.children().removeClass( "ui-state-disabled" );
+			inline.find( "select.ui-datepicker-month, select.ui-datepicker-year" ).
+				prop( "disabled", false );
+		}
+		this._disabledInputs = $.map( this._disabledInputs,
+			function( value ) { return ( value === target ? null : value ); } ); // delete entry
+	},
+
+	/* Disable the date picker to a jQuery selection.
+	 * @param  target	element - the target input field or division or span
+	 */
+	_disableDatepicker: function( target ) {
+		var nodeName, inline,
+			$target = $( target ),
+			inst = $.data( target, "datepicker" );
+
+		if ( !$target.hasClass( this.markerClassName ) ) {
+			return;
+		}
+
+		nodeName = target.nodeName.toLowerCase();
+		if ( nodeName === "input" ) {
+			target.disabled = true;
+			inst.trigger.filter( "button" ).
+				each( function() { this.disabled = true; } ).end().
+				filter( "img" ).css( { opacity: "0.5", cursor: "default" } );
+		} else if ( nodeName === "div" || nodeName === "span" ) {
+			inline = $target.children( "." + this._inlineClass );
+			inline.children().addClass( "ui-state-disabled" );
+			inline.find( "select.ui-datepicker-month, select.ui-datepicker-year" ).
+				prop( "disabled", true );
+		}
+		this._disabledInputs = $.map( this._disabledInputs,
+			function( value ) { return ( value === target ? null : value ); } ); // delete entry
+		this._disabledInputs[ this._disabledInputs.length ] = target;
+	},
+
+	/* Is the first field in a jQuery collection disabled as a datepicker?
+	 * @param  target	element - the target input field or division or span
+	 * @return boolean - true if disabled, false if enabled
+	 */
+	_isDisabledDatepicker: function( target ) {
+		if ( !target ) {
+			return false;
+		}
+		for ( var i = 0; i < this._disabledInputs.length; i++ ) {
+			if ( this._disabledInputs[ i ] === target ) {
+				return true;
+			}
+		}
+		return false;
+	},
+
+	/* Retrieve the instance data for the target control.
+	 * @param  target  element - the target input field or division or span
+	 * @return  object - the associated instance data
+	 * @throws  error if a jQuery problem getting data
+	 */
+	_getInst: function( target ) {
+		try {
+			return $.data( target, "datepicker" );
+		}
+		catch ( err ) {
+			throw "Missing instance data for this datepicker";
+		}
+	},
+
+	/* Update or retrieve the settings for a date picker attached to an input field or division.
+	 * @param  target  element - the target input field or division or span
+	 * @param  name	object - the new settings to update or
+	 *				string - the name of the setting to change or retrieve,
+	 *				when retrieving also "all" for all instance settings or
+	 *				"defaults" for all global defaults
+	 * @param  value   any - the new value for the setting
+	 *				(omit if above is an object or to retrieve a value)
+	 */
+	_optionDatepicker: function( target, name, value ) {
+		var settings, date, minDate, maxDate,
+			inst = this._getInst( target );
+
+		if ( arguments.length === 2 && typeof name === "string" ) {
+			return ( name === "defaults" ? $.extend( {}, $.datepicker._defaults ) :
+				( inst ? ( name === "all" ? $.extend( {}, inst.settings ) :
+				this._get( inst, name ) ) : null ) );
+		}
+
+		settings = name || {};
+		if ( typeof name === "string" ) {
+			settings = {};
+			settings[ name ] = value;
+		}
+
+		if ( inst ) {
+			if ( this._curInst === inst ) {
+				this._hideDatepicker();
+			}
+
+			date = this._getDateDatepicker( target, true );
+			minDate = this._getMinMaxDate( inst, "min" );
+			maxDate = this._getMinMaxDate( inst, "max" );
+			datepicker_extendRemove( inst.settings, settings );
+
+			// reformat the old minDate/maxDate values if dateFormat changes and a new minDate/maxDate isn't provided
+			if ( minDate !== null && settings.dateFormat !== undefined && settings.minDate === undefined ) {
+				inst.settings.minDate = this._formatDate( inst, minDate );
+			}
+			if ( maxDate !== null && settings.dateFormat !== undefined && settings.maxDate === undefined ) {
+				inst.settings.maxDate = this._formatDate( inst, maxDate );
+			}
+			if ( "disabled" in settings ) {
+				if ( settings.disabled ) {
+					this._disableDatepicker( target );
+				} else {
+					this._enableDatepicker( target );
+				}
+			}
+			this._attachments( $( target ), inst );
+			this._autoSize( inst );
+			this._setDate( inst, date );
+			this._updateAlternate( inst );
+			this._updateDatepicker( inst );
+		}
+	},
+
+	// Change method deprecated
+	_changeDatepicker: function( target, name, value ) {
+		this._optionDatepicker( target, name, value );
+	},
+
+	/* Redraw the date picker attached to an input field or division.
+	 * @param  target  element - the target input field or division or span
+	 */
+	_refreshDatepicker: function( target ) {
+		var inst = this._getInst( target );
+		if ( inst ) {
+			this._updateDatepicker( inst );
+		}
+	},
+
+	/* Set the dates for a jQuery selection.
+	 * @param  target element - the target input field or division or span
+	 * @param  date	Date - the new date
+	 */
+	_setDateDatepicker: function( target, date ) {
+		var inst = this._getInst( target );
+		if ( inst ) {
+			this._setDate( inst, date );
+			this._updateDatepicker( inst );
+			this._updateAlternate( inst );
+		}
+	},
+
+	/* Get the date(s) for the first entry in a jQuery selection.
+	 * @param  target element - the target input field or division or span
+	 * @param  noDefault boolean - true if no default date is to be used
+	 * @return Date - the current date
+	 */
+	_getDateDatepicker: function( target, noDefault ) {
+		var inst = this._getInst( target );
+		if ( inst && !inst.inline ) {
+			this._setDateFromField( inst, noDefault );
+		}
+		return ( inst ? this._getDate( inst ) : null );
+	},
+
+	/* Handle keystrokes. */
+	_doKeyDown: function( event ) {
+		var onSelect, dateStr, sel,
+			inst = $.datepicker._getInst( event.target ),
+			handled = true,
+			isRTL = inst.dpDiv.is( ".ui-datepicker-rtl" );
+
+		inst._keyEvent = true;
+		if ( $.datepicker._datepickerShowing ) {
+			switch ( event.keyCode ) {
+				case 9: $.datepicker._hideDatepicker();
+						handled = false;
+						break; // hide on tab out
+				case 13: sel = $( "td." + $.datepicker._dayOverClass + ":not(." +
+									$.datepicker._currentClass + ")", inst.dpDiv );
+						if ( sel[ 0 ] ) {
+							$.datepicker._selectDay( event.target, inst.selectedMonth, inst.selectedYear, sel[ 0 ] );
+						}
+
+						onSelect = $.datepicker._get( inst, "onSelect" );
+						if ( onSelect ) {
+							dateStr = $.datepicker._formatDate( inst );
+
+							// Trigger custom callback
+							onSelect.apply( ( inst.input ? inst.input[ 0 ] : null ), [ dateStr, inst ] );
+						} else {
+							$.datepicker._hideDatepicker();
+						}
+
+						return false; // don't submit the form
+				case 27: $.datepicker._hideDatepicker();
+						break; // hide on escape
+				case 33: $.datepicker._adjustDate( event.target, ( event.ctrlKey ?
+							-$.datepicker._get( inst, "stepBigMonths" ) :
+							-$.datepicker._get( inst, "stepMonths" ) ), "M" );
+						break; // previous month/year on page up/+ ctrl
+				case 34: $.datepicker._adjustDate( event.target, ( event.ctrlKey ?
+							+$.datepicker._get( inst, "stepBigMonths" ) :
+							+$.datepicker._get( inst, "stepMonths" ) ), "M" );
+						break; // next month/year on page down/+ ctrl
+				case 35: if ( event.ctrlKey || event.metaKey ) {
+							$.datepicker._clearDate( event.target );
+						}
+						handled = event.ctrlKey || event.metaKey;
+						break; // clear on ctrl or command +end
+				case 36: if ( event.ctrlKey || event.metaKey ) {
+							$.datepicker._gotoToday( event.target );
+						}
+						handled = event.ctrlKey || event.metaKey;
+						break; // current on ctrl or command +home
+				case 37: if ( event.ctrlKey || event.metaKey ) {
+							$.datepicker._adjustDate( event.target, ( isRTL ? +1 : -1 ), "D" );
+						}
+						handled = event.ctrlKey || event.metaKey;
+
+						// -1 day on ctrl or command +left
+						if ( event.originalEvent.altKey ) {
+							$.datepicker._adjustDate( event.target, ( event.ctrlKey ?
+								-$.datepicker._get( inst, "stepBigMonths" ) :
+								-$.datepicker._get( inst, "stepMonths" ) ), "M" );
+						}
+
+						// next month/year on alt +left on Mac
+						break;
+				case 38: if ( event.ctrlKey || event.metaKey ) {
+							$.datepicker._adjustDate( event.target, -7, "D" );
+						}
+						handled = event.ctrlKey || event.metaKey;
+						break; // -1 week on ctrl or command +up
+				case 39: if ( event.ctrlKey || event.metaKey ) {
+							$.datepicker._adjustDate( event.target, ( isRTL ? -1 : +1 ), "D" );
+						}
+						handled = event.ctrlKey || event.metaKey;
+
+						// +1 day on ctrl or command +right
+						if ( event.originalEvent.altKey ) {
+							$.datepicker._adjustDate( event.target, ( event.ctrlKey ?
+								+$.datepicker._get( inst, "stepBigMonths" ) :
+								+$.datepicker._get( inst, "stepMonths" ) ), "M" );
+						}
+
+						// next month/year on alt +right
+						break;
+				case 40: if ( event.ctrlKey || event.metaKey ) {
+							$.datepicker._adjustDate( event.target, +7, "D" );
+						}
+						handled = event.ctrlKey || event.metaKey;
+						break; // +1 week on ctrl or command +down
+				default: handled = false;
+			}
+		} else if ( event.keyCode === 36 && event.ctrlKey ) { // display the date picker on ctrl+home
+			$.datepicker._showDatepicker( this );
+		} else {
+			handled = false;
+		}
+
+		if ( handled ) {
+			event.preventDefault();
+			event.stopPropagation();
+		}
+	},
+
+	/* Filter entered characters - based on date format. */
+	_doKeyPress: function( event ) {
+		var chars, chr,
+			inst = $.datepicker._getInst( event.target );
+
+		if ( $.datepicker._get( inst, "constrainInput" ) ) {
+			chars = $.datepicker._possibleChars( $.datepicker._get( inst, "dateFormat" ) );
+			chr = String.fromCharCode( event.charCode == null ? event.keyCode : event.charCode );
+			return event.ctrlKey || event.metaKey || ( chr < " " || !chars || chars.indexOf( chr ) > -1 );
+		}
+	},
+
+	/* Synchronise manual entry and field/alternate field. */
+	_doKeyUp: function( event ) {
+		var date,
+			inst = $.datepicker._getInst( event.target );
+
+		if ( inst.input.val() !== inst.lastVal ) {
+			try {
+				date = $.datepicker.parseDate( $.datepicker._get( inst, "dateFormat" ),
+					( inst.input ? inst.input.val() : null ),
+					$.datepicker._getFormatConfig( inst ) );
+
+				if ( date ) { // only if valid
+					$.datepicker._setDateFromField( inst );
+					$.datepicker._updateAlternate( inst );
+					$.datepicker._updateDatepicker( inst );
+				}
+			}
+			catch ( err ) {
+			}
+		}
+		return true;
+	},
+
+	/* Pop-up the date picker for a given input field.
+	 * If false returned from beforeShow event handler do not show.
+	 * @param  input  element - the input field attached to the date picker or
+	 *					event - if triggered by focus
+	 */
+	_showDatepicker: function( input ) {
+		input = input.target || input;
+		if ( input.nodeName.toLowerCase() !== "input" ) { // find from button/image trigger
+			input = $( "input", input.parentNode )[ 0 ];
+		}
+
+		if ( $.datepicker._isDisabledDatepicker( input ) || $.datepicker._lastInput === input ) { // already here
+			return;
+		}
+
+		var inst, beforeShow, beforeShowSettings, isFixed,
+			offset, showAnim, duration;
+
+		inst = $.datepicker._getInst( input );
+		if ( $.datepicker._curInst && $.datepicker._curInst !== inst ) {
+			$.datepicker._curInst.dpDiv.stop( true, true );
+			if ( inst && $.datepicker._datepickerShowing ) {
+				$.datepicker._hideDatepicker( $.datepicker._curInst.input[ 0 ] );
+			}
+		}
+
+		beforeShow = $.datepicker._get( inst, "beforeShow" );
+		beforeShowSettings = beforeShow ? beforeShow.apply( input, [ input, inst ] ) : {};
+		if ( beforeShowSettings === false ) {
+			return;
+		}
+		datepicker_extendRemove( inst.settings, beforeShowSettings );
+
+		inst.lastVal = null;
+		$.datepicker._lastInput = input;
+		$.datepicker._setDateFromField( inst );
+
+		if ( $.datepicker._inDialog ) { // hide cursor
+			input.value = "";
+		}
+		if ( !$.datepicker._pos ) { // position below input
+			$.datepicker._pos = $.datepicker._findPos( input );
+			$.datepicker._pos[ 1 ] += input.offsetHeight; // add the height
+		}
+
+		isFixed = false;
+		$( input ).parents().each( function() {
+			isFixed |= $( this ).css( "position" ) === "fixed";
+			return !isFixed;
+		} );
+
+		offset = { left: $.datepicker._pos[ 0 ], top: $.datepicker._pos[ 1 ] };
+		$.datepicker._pos = null;
+
+		//to avoid flashes on Firefox
+		inst.dpDiv.empty();
+
+		// determine sizing offscreen
+		inst.dpDiv.css( { position: "absolute", display: "block", top: "-1000px" } );
+		$.datepicker._updateDatepicker( inst );
+
+		// fix width for dynamic number of date pickers
+		// and adjust position before showing
+		offset = $.datepicker._checkOffset( inst, offset, isFixed );
+		inst.dpDiv.css( { position: ( $.datepicker._inDialog && $.blockUI ?
+			"static" : ( isFixed ? "fixed" : "absolute" ) ), display: "none",
+			left: offset.left + "px", top: offset.top + "px" } );
+
+		if ( !inst.inline ) {
+			showAnim = $.datepicker._get( inst, "showAnim" );
+			duration = $.datepicker._get( inst, "duration" );
+			inst.dpDiv.css( "z-index", datepicker_getZindex( $( input ) ) + 1 );
+			$.datepicker._datepickerShowing = true;
+
+			if ( $.effects && $.effects.effect[ showAnim ] ) {
+				inst.dpDiv.show( showAnim, $.datepicker._get( inst, "showOptions" ), duration );
+			} else {
+				inst.dpDiv[ showAnim || "show" ]( showAnim ? duration : null );
+			}
+
+			if ( $.datepicker._shouldFocusInput( inst ) ) {
+				inst.input.trigger( "focus" );
+			}
+
+			$.datepicker._curInst = inst;
+		}
+	},
+
+	/* Generate the date picker content. */
+	_updateDatepicker: function( inst ) {
+		this.maxRows = 4; //Reset the max number of rows being displayed (see #7043)
+		datepicker_instActive = inst; // for delegate hover events
+		inst.dpDiv.empty().append( this._generateHTML( inst ) );
+		this._attachHandlers( inst );
+
+		var origyearshtml,
+			numMonths = this._getNumberOfMonths( inst ),
+			cols = numMonths[ 1 ],
+			width = 17,
+			activeCell = inst.dpDiv.find( "." + this._dayOverClass + " a" );
+
+		if ( activeCell.length > 0 ) {
+			datepicker_handleMouseover.apply( activeCell.get( 0 ) );
+		}
+
+		inst.dpDiv.removeClass( "ui-datepicker-multi-2 ui-datepicker-multi-3 ui-datepicker-multi-4" ).width( "" );
+		if ( cols > 1 ) {
+			inst.dpDiv.addClass( "ui-datepicker-multi-" + cols ).css( "width", ( width * cols ) + "em" );
+		}
+		inst.dpDiv[ ( numMonths[ 0 ] !== 1 || numMonths[ 1 ] !== 1 ? "add" : "remove" ) +
+			"Class" ]( "ui-datepicker-multi" );
+		inst.dpDiv[ ( this._get( inst, "isRTL" ) ? "add" : "remove" ) +
+			"Class" ]( "ui-datepicker-rtl" );
+
+		if ( inst === $.datepicker._curInst && $.datepicker._datepickerShowing && $.datepicker._shouldFocusInput( inst ) ) {
+			inst.input.trigger( "focus" );
+		}
+
+		// Deffered render of the years select (to avoid flashes on Firefox)
+		if ( inst.yearshtml ) {
+			origyearshtml = inst.yearshtml;
+			setTimeout( function() {
+
+				//assure that inst.yearshtml didn't change.
+				if ( origyearshtml === inst.yearshtml && inst.yearshtml ) {
+					inst.dpDiv.find( "select.ui-datepicker-year:first" ).replaceWith( inst.yearshtml );
+				}
+				origyearshtml = inst.yearshtml = null;
+			}, 0 );
+		}
+	},
+
+	// #6694 - don't focus the input if it's already focused
+	// this breaks the change event in IE
+	// Support: IE and jQuery <1.9
+	_shouldFocusInput: function( inst ) {
+		return inst.input && inst.input.is( ":visible" ) && !inst.input.is( ":disabled" ) && !inst.input.is( ":focus" );
+	},
+
+	/* Check positioning to remain on screen. */
+	_checkOffset: function( inst, offset, isFixed ) {
+		var dpWidth = inst.dpDiv.outerWidth(),
+			dpHeight = inst.dpDiv.outerHeight(),
+			inputWidth = inst.input ? inst.input.outerWidth() : 0,
+			inputHeight = inst.input ? inst.input.outerHeight() : 0,
+			viewWidth = document.documentElement.clientWidth + ( isFixed ? 0 : $( document ).scrollLeft() ),
+			viewHeight = document.documentElement.clientHeight + ( isFixed ? 0 : $( document ).scrollTop() );
+
+		offset.left -= ( this._get( inst, "isRTL" ) ? ( dpWidth - inputWidth ) : 0 );
+		offset.left -= ( isFixed && offset.left === inst.input.offset().left ) ? $( document ).scrollLeft() : 0;
+		offset.top -= ( isFixed && offset.top === ( inst.input.offset().top + inputHeight ) ) ? $( document ).scrollTop() : 0;
+
+		// Now check if datepicker is showing outside window viewport - move to a better place if so.
+		offset.left -= Math.min( offset.left, ( offset.left + dpWidth > viewWidth && viewWidth > dpWidth ) ?
+			Math.abs( offset.left + dpWidth - viewWidth ) : 0 );
+		offset.top -= Math.min( offset.top, ( offset.top + dpHeight > viewHeight && viewHeight > dpHeight ) ?
+			Math.abs( dpHeight + inputHeight ) : 0 );
+
+		return offset;
+	},
+
+	/* Find an object's position on the screen. */
+	_findPos: function( obj ) {
+		var position,
+			inst = this._getInst( obj ),
+			isRTL = this._get( inst, "isRTL" );
+
+		while ( obj && ( obj.type === "hidden" || obj.nodeType !== 1 || $.expr.filters.hidden( obj ) ) ) {
+			obj = obj[ isRTL ? "previousSibling" : "nextSibling" ];
+		}
+
+		position = $( obj ).offset();
+		return [ position.left, position.top ];
+	},
+
+	/* Hide the date picker from view.
+	 * @param  input  element - the input field attached to the date picker
+	 */
+	_hideDatepicker: function( input ) {
+		var showAnim, duration, postProcess, onClose,
+			inst = this._curInst;
+
+		if ( !inst || ( input && inst !== $.data( input, "datepicker" ) ) ) {
+			return;
+		}
+
+		if ( this._datepickerShowing ) {
+			showAnim = this._get( inst, "showAnim" );
+			duration = this._get( inst, "duration" );
+			postProcess = function() {
+				$.datepicker._tidyDialog( inst );
+			};
+
+			// DEPRECATED: after BC for 1.8.x $.effects[ showAnim ] is not needed
+			if ( $.effects && ( $.effects.effect[ showAnim ] || $.effects[ showAnim ] ) ) {
+				inst.dpDiv.hide( showAnim, $.datepicker._get( inst, "showOptions" ), duration, postProcess );
+			} else {
+				inst.dpDiv[ ( showAnim === "slideDown" ? "slideUp" :
+					( showAnim === "fadeIn" ? "fadeOut" : "hide" ) ) ]( ( showAnim ? duration : null ), postProcess );
+			}
+
+			if ( !showAnim ) {
+				postProcess();
+			}
+			this._datepickerShowing = false;
+
+			onClose = this._get( inst, "onClose" );
+			if ( onClose ) {
+				onClose.apply( ( inst.input ? inst.input[ 0 ] : null ), [ ( inst.input ? inst.input.val() : "" ), inst ] );
+			}
+
+			this._lastInput = null;
+			if ( this._inDialog ) {
+				this._dialogInput.css( { position: "absolute", left: "0", top: "-100px" } );
+				if ( $.blockUI ) {
+					$.unblockUI();
+					$( "body" ).append( this.dpDiv );
+				}
+			}
+			this._inDialog = false;
+		}
+	},
+
+	/* Tidy up after a dialog display. */
+	_tidyDialog: function( inst ) {
+		inst.dpDiv.removeClass( this._dialogClass ).off( ".ui-datepicker-calendar" );
+	},
+
+	/* Close date picker if clicked elsewhere. */
+	_checkExternalClick: function( event ) {
+		if ( !$.datepicker._curInst ) {
+			return;
+		}
+
+		var $target = $( event.target ),
+			inst = $.datepicker._getInst( $target[ 0 ] );
+
+		if ( ( ( $target[ 0 ].id !== $.datepicker._mainDivId &&
+				$target.parents( "#" + $.datepicker._mainDivId ).length === 0 &&
+				!$target.hasClass( $.datepicker.markerClassName ) &&
+				!$target.closest( "." + $.datepicker._triggerClass ).length &&
+				$.datepicker._datepickerShowing && !( $.datepicker._inDialog && $.blockUI ) ) ) ||
+			( $target.hasClass( $.datepicker.markerClassName ) && $.datepicker._curInst !== inst ) ) {
+				$.datepicker._hideDatepicker();
+		}
+	},
+
+	/* Adjust one of the date sub-fields. */
+	_adjustDate: function( id, offset, period ) {
+		var target = $( id ),
+			inst = this._getInst( target[ 0 ] );
+
+		if ( this._isDisabledDatepicker( target[ 0 ] ) ) {
+			return;
+		}
+		this._adjustInstDate( inst, offset +
+			( period === "M" ? this._get( inst, "showCurrentAtPos" ) : 0 ), // undo positioning
+			period );
+		this._updateDatepicker( inst );
+	},
+
+	/* Action for current link. */
+	_gotoToday: function( id ) {
+		var date,
+			target = $( id ),
+			inst = this._getInst( target[ 0 ] );
+
+		if ( this._get( inst, "gotoCurrent" ) && inst.currentDay ) {
+			inst.selectedDay = inst.currentDay;
+			inst.drawMonth = inst.selectedMonth = inst.currentMonth;
+			inst.drawYear = inst.selectedYear = inst.currentYear;
+		} else {
+			date = new Date();
+			inst.selectedDay = date.getDate();
+			inst.drawMonth = inst.selectedMonth = date.getMonth();
+			inst.drawYear = inst.selectedYear = date.getFullYear();
+		}
+		this._notifyChange( inst );
+		this._adjustDate( target );
+	},
+
+	/* Action for selecting a new month/year. */
+	_selectMonthYear: function( id, select, period ) {
+		var target = $( id ),
+			inst = this._getInst( target[ 0 ] );
+
+		inst[ "selected" + ( period === "M" ? "Month" : "Year" ) ] =
+		inst[ "draw" + ( period === "M" ? "Month" : "Year" ) ] =
+			parseInt( select.options[ select.selectedIndex ].value, 10 );
+
+		this._notifyChange( inst );
+		this._adjustDate( target );
+	},
+
+	/* Action for selecting a day. */
+	_selectDay: function( id, month, year, td ) {
+		var inst,
+			target = $( id );
+
+		if ( $( td ).hasClass( this._unselectableClass ) || this._isDisabledDatepicker( target[ 0 ] ) ) {
+			return;
+		}
+
+		inst = this._getInst( target[ 0 ] );
+		inst.selectedDay = inst.currentDay = $( "a", td ).html();
+		inst.selectedMonth = inst.currentMonth = month;
+		inst.selectedYear = inst.currentYear = year;
+		this._selectDate( id, this._formatDate( inst,
+			inst.currentDay, inst.currentMonth, inst.currentYear ) );
+	},
+
+	/* Erase the input field and hide the date picker. */
+	_clearDate: function( id ) {
+		var target = $( id );
+		this._selectDate( target, "" );
+	},
+
+	/* Update the input field with the selected date. */
+	_selectDate: function( id, dateStr ) {
+		var onSelect,
+			target = $( id ),
+			inst = this._getInst( target[ 0 ] );
+
+		dateStr = ( dateStr != null ? dateStr : this._formatDate( inst ) );
+		if ( inst.input ) {
+			inst.input.val( dateStr );
+		}
+		this._updateAlternate( inst );
+
+		onSelect = this._get( inst, "onSelect" );
+		if ( onSelect ) {
+			onSelect.apply( ( inst.input ? inst.input[ 0 ] : null ), [ dateStr, inst ] );  // trigger custom callback
+		} else if ( inst.input ) {
+			inst.input.trigger( "change" ); // fire the change event
+		}
+
+		if ( inst.inline ) {
+			this._updateDatepicker( inst );
+		} else {
+			this._hideDatepicker();
+			this._lastInput = inst.input[ 0 ];
+			if ( typeof( inst.input[ 0 ] ) !== "object" ) {
+				inst.input.trigger( "focus" ); // restore focus
+			}
+			this._lastInput = null;
+		}
+	},
+
+	/* Update any alternate field to synchronise with the main field. */
+	_updateAlternate: function( inst ) {
+		var altFormat, date, dateStr,
+			altField = this._get( inst, "altField" );
+
+		if ( altField ) { // update alternate field too
+			altFormat = this._get( inst, "altFormat" ) || this._get( inst, "dateFormat" );
+			date = this._getDate( inst );
+			dateStr = this.formatDate( altFormat, date, this._getFormatConfig( inst ) );
+			$( altField ).val( dateStr );
+		}
+	},
+
+	/* Set as beforeShowDay function to prevent selection of weekends.
+	 * @param  date  Date - the date to customise
+	 * @return [boolean, string] - is this date selectable?, what is its CSS class?
+	 */
+	noWeekends: function( date ) {
+		var day = date.getDay();
+		return [ ( day > 0 && day < 6 ), "" ];
+	},
+
+	/* Set as calculateWeek to determine the week of the year based on the ISO 8601 definition.
+	 * @param  date  Date - the date to get the week for
+	 * @return  number - the number of the week within the year that contains this date
+	 */
+	iso8601Week: function( date ) {
+		var time,
+			checkDate = new Date( date.getTime() );
+
+		// Find Thursday of this week starting on Monday
+		checkDate.setDate( checkDate.getDate() + 4 - ( checkDate.getDay() || 7 ) );
+
+		time = checkDate.getTime();
+		checkDate.setMonth( 0 ); // Compare with Jan 1
+		checkDate.setDate( 1 );
+		return Math.floor( Math.round( ( time - checkDate ) / 86400000 ) / 7 ) + 1;
+	},
+
+	/* Parse a string value into a date object.
+	 * See formatDate below for the possible formats.
+	 *
+	 * @param  format string - the expected format of the date
+	 * @param  value string - the date in the above format
+	 * @param  settings Object - attributes include:
+	 *					shortYearCutoff  number - the cutoff year for determining the century (optional)
+	 *					dayNamesShort	string[7] - abbreviated names of the days from Sunday (optional)
+	 *					dayNames		string[7] - names of the days from Sunday (optional)
+	 *					monthNamesShort string[12] - abbreviated names of the months (optional)
+	 *					monthNames		string[12] - names of the months (optional)
+	 * @return  Date - the extracted date value or null if value is blank
+	 */
+	parseDate: function( format, value, settings ) {
+		if ( format == null || value == null ) {
+			throw "Invalid arguments";
+		}
+
+		value = ( typeof value === "object" ? value.toString() : value + "" );
+		if ( value === "" ) {
+			return null;
+		}
+
+		var iFormat, dim, extra,
+			iValue = 0,
+			shortYearCutoffTemp = ( settings ? settings.shortYearCutoff : null ) || this._defaults.shortYearCutoff,
+			shortYearCutoff = ( typeof shortYearCutoffTemp !== "string" ? shortYearCutoffTemp :
+				new Date().getFullYear() % 100 + parseInt( shortYearCutoffTemp, 10 ) ),
+			dayNamesShort = ( settings ? settings.dayNamesShort : null ) || this._defaults.dayNamesShort,
+			dayNames = ( settings ? settings.dayNames : null ) || this._defaults.dayNames,
+			monthNamesShort = ( settings ? settings.monthNamesShort : null ) || this._defaults.monthNamesShort,
+			monthNames = ( settings ? settings.monthNames : null ) || this._defaults.monthNames,
+			year = -1,
+			month = -1,
+			day = -1,
+			doy = -1,
+			literal = false,
+			date,
+
+			// Check whether a format character is doubled
+			lookAhead = function( match ) {
+				var matches = ( iFormat + 1 < format.length && format.charAt( iFormat + 1 ) === match );
+				if ( matches ) {
+					iFormat++;
+				}
+				return matches;
+			},
+
+			// Extract a number from the string value
+			getNumber = function( match ) {
+				var isDoubled = lookAhead( match ),
+					size = ( match === "@" ? 14 : ( match === "!" ? 20 :
+					( match === "y" && isDoubled ? 4 : ( match === "o" ? 3 : 2 ) ) ) ),
+					minSize = ( match === "y" ? size : 1 ),
+					digits = new RegExp( "^\\d{" + minSize + "," + size + "}" ),
+					num = value.substring( iValue ).match( digits );
+				if ( !num ) {
+					throw "Missing number at position " + iValue;
+				}
+				iValue += num[ 0 ].length;
+				return parseInt( num[ 0 ], 10 );
+			},
+
+			// Extract a name from the string value and convert to an index
+			getName = function( match, shortNames, longNames ) {
+				var index = -1,
+					names = $.map( lookAhead( match ) ? longNames : shortNames, function( v, k ) {
+						return [ [ k, v ] ];
+					} ).sort( function( a, b ) {
+						return -( a[ 1 ].length - b[ 1 ].length );
+					} );
+
+				$.each( names, function( i, pair ) {
+					var name = pair[ 1 ];
+					if ( value.substr( iValue, name.length ).toLowerCase() === name.toLowerCase() ) {
+						index = pair[ 0 ];
+						iValue += name.length;
+						return false;
+					}
+				} );
+				if ( index !== -1 ) {
+					return index + 1;
+				} else {
+					throw "Unknown name at position " + iValue;
+				}
+			},
+
+			// Confirm that a literal character matches the string value
+			checkLiteral = function() {
+				if ( value.charAt( iValue ) !== format.charAt( iFormat ) ) {
+					throw "Unexpected literal at position " + iValue;
+				}
+				iValue++;
+			};
+
+		for ( iFormat = 0; iFormat < format.length; iFormat++ ) {
+			if ( literal ) {
+				if ( format.charAt( iFormat ) === "'" && !lookAhead( "'" ) ) {
+					literal = false;
+				} else {
+					checkLiteral();
+				}
+			} else {
+				switch ( format.charAt( iFormat ) ) {
+					case "d":
+						day = getNumber( "d" );
+						break;
+					case "D":
+						getName( "D", dayNamesShort, dayNames );
+						break;
+					case "o":
+						doy = getNumber( "o" );
+						break;
+					case "m":
+						month = getNumber( "m" );
+						break;
+					case "M":
+						month = getName( "M", monthNamesShort, monthNames );
+						break;
+					case "y":
+						year = getNumber( "y" );
+						break;
+					case "@":
+						date = new Date( getNumber( "@" ) );
+						year = date.getFullYear();
+						month = date.getMonth() + 1;
+						day = date.getDate();
+						break;
+					case "!":
+						date = new Date( ( getNumber( "!" ) - this._ticksTo1970 ) / 10000 );
+						year = date.getFullYear();
+						month = date.getMonth() + 1;
+						day = date.getDate();
+						break;
+					case "'":
+						if ( lookAhead( "'" ) ) {
+							checkLiteral();
+						} else {
+							literal = true;
+						}
+						break;
+					default:
+						checkLiteral();
+				}
+			}
+		}
+
+		if ( iValue < value.length ) {
+			extra = value.substr( iValue );
+			if ( !/^\s+/.test( extra ) ) {
+				throw "Extra/unparsed characters found in date: " + extra;
+			}
+		}
+
+		if ( year === -1 ) {
+			year = new Date().getFullYear();
+		} else if ( year < 100 ) {
+			year += new Date().getFullYear() - new Date().getFullYear() % 100 +
+				( year <= shortYearCutoff ? 0 : -100 );
+		}
+
+		if ( doy > -1 ) {
+			month = 1;
+			day = doy;
+			do {
+				dim = this._getDaysInMonth( year, month - 1 );
+				if ( day <= dim ) {
+					break;
+				}
+				month++;
+				day -= dim;
+			} while ( true );
+		}
+
+		date = this._daylightSavingAdjust( new Date( year, month - 1, day ) );
+		if ( date.getFullYear() !== year || date.getMonth() + 1 !== month || date.getDate() !== day ) {
+			throw "Invalid date"; // E.g. 31/02/00
+		}
+		return date;
+	},
+
+	/* Standard date formats. */
+	ATOM: "yy-mm-dd", // RFC 3339 (ISO 8601)
+	COOKIE: "D, dd M yy",
+	ISO_8601: "yy-mm-dd",
+	RFC_822: "D, d M y",
+	RFC_850: "DD, dd-M-y",
+	RFC_1036: "D, d M y",
+	RFC_1123: "D, d M yy",
+	RFC_2822: "D, d M yy",
+	RSS: "D, d M y", // RFC 822
+	TICKS: "!",
+	TIMESTAMP: "@",
+	W3C: "yy-mm-dd", // ISO 8601
+
+	_ticksTo1970: ( ( ( 1970 - 1 ) * 365 + Math.floor( 1970 / 4 ) - Math.floor( 1970 / 100 ) +
+		Math.floor( 1970 / 400 ) ) * 24 * 60 * 60 * 10000000 ),
+
+	/* Format a date object into a string value.
+	 * The format can be combinations of the following:
+	 * d  - day of month (no leading zero)
+	 * dd - day of month (two digit)
+	 * o  - day of year (no leading zeros)
+	 * oo - day of year (three digit)
+	 * D  - day name short
+	 * DD - day name long
+	 * m  - month of year (no leading zero)
+	 * mm - month of year (two digit)
+	 * M  - month name short
+	 * MM - month name long
+	 * y  - year (two digit)
+	 * yy - year (four digit)
+	 * @ - Unix timestamp (ms since 01/01/1970)
+	 * ! - Windows ticks (100ns since 01/01/0001)
+	 * "..." - literal text
+	 * '' - single quote
+	 *
+	 * @param  format string - the desired format of the date
+	 * @param  date Date - the date value to format
+	 * @param  settings Object - attributes include:
+	 *					dayNamesShort	string[7] - abbreviated names of the days from Sunday (optional)
+	 *					dayNames		string[7] - names of the days from Sunday (optional)
+	 *					monthNamesShort string[12] - abbreviated names of the months (optional)
+	 *					monthNames		string[12] - names of the months (optional)
+	 * @return  string - the date in the above format
+	 */
+	formatDate: function( format, date, settings ) {
+		if ( !date ) {
+			return "";
+		}
+
+		var iFormat,
+			dayNamesShort = ( settings ? settings.dayNamesShort : null ) || this._defaults.dayNamesShort,
+			dayNames = ( settings ? settings.dayNames : null ) || this._defaults.dayNames,
+			monthNamesShort = ( settings ? settings.monthNamesShort : null ) || this._defaults.monthNamesShort,
+			monthNames = ( settings ? settings.monthNames : null ) || this._defaults.monthNames,
+
+			// Check whether a format character is doubled
+			lookAhead = function( match ) {
+				var matches = ( iFormat + 1 < format.length && format.charAt( iFormat + 1 ) === match );
+				if ( matches ) {
+					iFormat++;
+				}
+				return matches;
+			},
+
+			// Format a number, with leading zero if necessary
+			formatNumber = function( match, value, len ) {
+				var num = "" + value;
+				if ( lookAhead( match ) ) {
+					while ( num.length < len ) {
+						num = "0" + num;
+					}
+				}
+				return num;
+			},
+
+			// Format a name, short or long as requested
+			formatName = function( match, value, shortNames, longNames ) {
+				return ( lookAhead( match ) ? longNames[ value ] : shortNames[ value ] );
+			},
+			output = "",
+			literal = false;
+
+		if ( date ) {
+			for ( iFormat = 0; iFormat < format.length; iFormat++ ) {
+				if ( literal ) {
+					if ( format.charAt( iFormat ) === "'" && !lookAhead( "'" ) ) {
+						literal = false;
+					} else {
+						output += format.charAt( iFormat );
+					}
+				} else {
+					switch ( format.charAt( iFormat ) ) {
+						case "d":
+							output += formatNumber( "d", date.getDate(), 2 );
+							break;
+						case "D":
+							output += formatName( "D", date.getDay(), dayNamesShort, dayNames );
+							break;
+						case "o":
+							output += formatNumber( "o",
+								Math.round( ( new Date( date.getFullYear(), date.getMonth(), date.getDate() ).getTime() - new Date( date.getFullYear(), 0, 0 ).getTime() ) / 86400000 ), 3 );
+							break;
+						case "m":
+							output += formatNumber( "m", date.getMonth() + 1, 2 );
+							break;
+						case "M":
+							output += formatName( "M", date.getMonth(), monthNamesShort, monthNames );
+							break;
+						case "y":
+							output += ( lookAhead( "y" ) ? date.getFullYear() :
+								( date.getFullYear() % 100 < 10 ? "0" : "" ) + date.getFullYear() % 100 );
+							break;
+						case "@":
+							output += date.getTime();
+							break;
+						case "!":
+							output += date.getTime() * 10000 + this._ticksTo1970;
+							break;
+						case "'":
+							if ( lookAhead( "'" ) ) {
+								output += "'";
+							} else {
+								literal = true;
+							}
+							break;
+						default:
+							output += format.charAt( iFormat );
+					}
+				}
+			}
+		}
+		return output;
+	},
+
+	/* Extract all possible characters from the date format. */
+	_possibleChars: function( format ) {
+		var iFormat,
+			chars = "",
+			literal = false,
+
+			// Check whether a format character is doubled
+			lookAhead = function( match ) {
+				var matches = ( iFormat + 1 < format.length && format.charAt( iFormat + 1 ) === match );
+				if ( matches ) {
+					iFormat++;
+				}
+				return matches;
+			};
+
+		for ( iFormat = 0; iFormat < format.length; iFormat++ ) {
+			if ( literal ) {
+				if ( format.charAt( iFormat ) === "'" && !lookAhead( "'" ) ) {
+					literal = false;
+				} else {
+					chars += format.charAt( iFormat );
+				}
+			} else {
+				switch ( format.charAt( iFormat ) ) {
+					case "d": case "m": case "y": case "@":
+						chars += "0123456789";
+						break;
+					case "D": case "M":
+						return null; // Accept anything
+					case "'":
+						if ( lookAhead( "'" ) ) {
+							chars += "'";
+						} else {
+							literal = true;
+						}
+						break;
+					default:
+						chars += format.charAt( iFormat );
+				}
+			}
+		}
+		return chars;
+	},
+
+	/* Get a setting value, defaulting if necessary. */
+	_get: function( inst, name ) {
+		return inst.settings[ name ] !== undefined ?
+			inst.settings[ name ] : this._defaults[ name ];
+	},
+
+	/* Parse existing date and initialise date picker. */
+	_setDateFromField: function( inst, noDefault ) {
+		if ( inst.input.val() === inst.lastVal ) {
+			return;
+		}
+
+		var dateFormat = this._get( inst, "dateFormat" ),
+			dates = inst.lastVal = inst.input ? inst.input.val() : null,
+			defaultDate = this._getDefaultDate( inst ),
+			date = defaultDate,
+			settings = this._getFormatConfig( inst );
+
+		try {
+			date = this.parseDate( dateFormat, dates, settings ) || defaultDate;
+		} catch ( event ) {
+			dates = ( noDefault ? "" : dates );
+		}
+		inst.selectedDay = date.getDate();
+		inst.drawMonth = inst.selectedMonth = date.getMonth();
+		inst.drawYear = inst.selectedYear = date.getFullYear();
+		inst.currentDay = ( dates ? date.getDate() : 0 );
+		inst.currentMonth = ( dates ? date.getMonth() : 0 );
+		inst.currentYear = ( dates ? date.getFullYear() : 0 );
+		this._adjustInstDate( inst );
+	},
+
+	/* Retrieve the default date shown on opening. */
+	_getDefaultDate: function( inst ) {
+		return this._restrictMinMax( inst,
+			this._determineDate( inst, this._get( inst, "defaultDate" ), new Date() ) );
+	},
+
+	/* A date may be specified as an exact value or a relative one. */
+	_determineDate: function( inst, date, defaultDate ) {
+		var offsetNumeric = function( offset ) {
+				var date = new Date();
+				date.setDate( date.getDate() + offset );
+				return date;
+			},
+			offsetString = function( offset ) {
+				try {
+					return $.datepicker.parseDate( $.datepicker._get( inst, "dateFormat" ),
+						offset, $.datepicker._getFormatConfig( inst ) );
+				}
+				catch ( e ) {
+
+					// Ignore
+				}
+
+				var date = ( offset.toLowerCase().match( /^c/ ) ?
+					$.datepicker._getDate( inst ) : null ) || new Date(),
+					year = date.getFullYear(),
+					month = date.getMonth(),
+					day = date.getDate(),
+					pattern = /([+\-]?[0-9]+)\s*(d|D|w|W|m|M|y|Y)?/g,
+					matches = pattern.exec( offset );
+
+				while ( matches ) {
+					switch ( matches[ 2 ] || "d" ) {
+						case "d" : case "D" :
+							day += parseInt( matches[ 1 ], 10 ); break;
+						case "w" : case "W" :
+							day += parseInt( matches[ 1 ], 10 ) * 7; break;
+						case "m" : case "M" :
+							month += parseInt( matches[ 1 ], 10 );
+							day = Math.min( day, $.datepicker._getDaysInMonth( year, month ) );
+							break;
+						case "y": case "Y" :
+							year += parseInt( matches[ 1 ], 10 );
+							day = Math.min( day, $.datepicker._getDaysInMonth( year, month ) );
+							break;
+					}
+					matches = pattern.exec( offset );
+				}
+				return new Date( year, month, day );
+			},
+			newDate = ( date == null || date === "" ? defaultDate : ( typeof date === "string" ? offsetString( date ) :
+				( typeof date === "number" ? ( isNaN( date ) ? defaultDate : offsetNumeric( date ) ) : new Date( date.getTime() ) ) ) );
+
+		newDate = ( newDate && newDate.toString() === "Invalid Date" ? defaultDate : newDate );
+		if ( newDate ) {
+			newDate.setHours( 0 );
+			newDate.setMinutes( 0 );
+			newDate.setSeconds( 0 );
+			newDate.setMilliseconds( 0 );
+		}
+		return this._daylightSavingAdjust( newDate );
+	},
+
+	/* Handle switch to/from daylight saving.
+	 * Hours may be non-zero on daylight saving cut-over:
+	 * > 12 when midnight changeover, but then cannot generate
+	 * midnight datetime, so jump to 1AM, otherwise reset.
+	 * @param  date  (Date) the date to check
+	 * @return  (Date) the corrected date
+	 */
+	_daylightSavingAdjust: function( date ) {
+		if ( !date ) {
+			return null;
+		}
+		date.setHours( date.getHours() > 12 ? date.getHours() + 2 : 0 );
+		return date;
+	},
+
+	/* Set the date(s) directly. */
+	_setDate: function( inst, date, noChange ) {
+		var clear = !date,
+			origMonth = inst.selectedMonth,
+			origYear = inst.selectedYear,
+			newDate = this._restrictMinMax( inst, this._determineDate( inst, date, new Date() ) );
+
+		inst.selectedDay = inst.currentDay = newDate.getDate();
+		inst.drawMonth = inst.selectedMonth = inst.currentMonth = newDate.getMonth();
+		inst.drawYear = inst.selectedYear = inst.currentYear = newDate.getFullYear();
+		if ( ( origMonth !== inst.selectedMonth || origYear !== inst.selectedYear ) && !noChange ) {
+			this._notifyChange( inst );
+		}
+		this._adjustInstDate( inst );
+		if ( inst.input ) {
+			inst.input.val( clear ? "" : this._formatDate( inst ) );
+		}
+	},
+
+	/* Retrieve the date(s) directly. */
+	_getDate: function( inst ) {
+		var startDate = ( !inst.currentYear || ( inst.input && inst.input.val() === "" ) ? null :
+			this._daylightSavingAdjust( new Date(
+			inst.currentYear, inst.currentMonth, inst.currentDay ) ) );
+			return startDate;
+	},
+
+	/* Attach the onxxx handlers.  These are declared statically so
+	 * they work with static code transformers like Caja.
+	 */
+	_attachHandlers: function( inst ) {
+		var stepMonths = this._get( inst, "stepMonths" ),
+			id = "#" + inst.id.replace( /\\\\/g, "\\" );
+		inst.dpDiv.find( "[data-handler]" ).map( function() {
+			var handler = {
+				prev: function() {
+					$.datepicker._adjustDate( id, -stepMonths, "M" );
+				},
+				next: function() {
+					$.datepicker._adjustDate( id, +stepMonths, "M" );
+				},
+				hide: function() {
+					$.datepicker._hideDatepicker();
+				},
+				today: function() {
+					$.datepicker._gotoToday( id );
+				},
+				selectDay: function() {
+					$.datepicker._selectDay( id, +this.getAttribute( "data-month" ), +this.getAttribute( "data-year" ), this );
+					return false;
+				},
+				selectMonth: function() {
+					$.datepicker._selectMonthYear( id, this, "M" );
+					return false;
+				},
+				selectYear: function() {
+					$.datepicker._selectMonthYear( id, this, "Y" );
+					return false;
+				}
+			};
+			$( this ).on( this.getAttribute( "data-event" ), handler[ this.getAttribute( "data-handler" ) ] );
+		} );
+	},
+
+	/* Generate the HTML for the current state of the date picker. */
+	_generateHTML: function( inst ) {
+		var maxDraw, prevText, prev, nextText, next, currentText, gotoDate,
+			controls, buttonPanel, firstDay, showWeek, dayNames, dayNamesMin,
+			monthNames, monthNamesShort, beforeShowDay, showOtherMonths,
+			selectOtherMonths, defaultDate, html, dow, row, group, col, selectedDate,
+			cornerClass, calender, thead, day, daysInMonth, leadDays, curRows, numRows,
+			printDate, dRow, tbody, daySettings, otherMonth, unselectable,
+			tempDate = new Date(),
+			today = this._daylightSavingAdjust(
+				new Date( tempDate.getFullYear(), tempDate.getMonth(), tempDate.getDate() ) ), // clear time
+			isRTL = this._get( inst, "isRTL" ),
+			showButtonPanel = this._get( inst, "showButtonPanel" ),
+			hideIfNoPrevNext = this._get( inst, "hideIfNoPrevNext" ),
+			navigationAsDateFormat = this._get( inst, "navigationAsDateFormat" ),
+			numMonths = this._getNumberOfMonths( inst ),
+			showCurrentAtPos = this._get( inst, "showCurrentAtPos" ),
+			stepMonths = this._get( inst, "stepMonths" ),
+			isMultiMonth = ( numMonths[ 0 ] !== 1 || numMonths[ 1 ] !== 1 ),
+			currentDate = this._daylightSavingAdjust( ( !inst.currentDay ? new Date( 9999, 9, 9 ) :
+				new Date( inst.currentYear, inst.currentMonth, inst.currentDay ) ) ),
+			minDate = this._getMinMaxDate( inst, "min" ),
+			maxDate = this._getMinMaxDate( inst, "max" ),
+			drawMonth = inst.drawMonth - showCurrentAtPos,
+			drawYear = inst.drawYear;
+
+		if ( drawMonth < 0 ) {
+			drawMonth += 12;
+			drawYear--;
+		}
+		if ( maxDate ) {
+			maxDraw = this._daylightSavingAdjust( new Date( maxDate.getFullYear(),
+				maxDate.getMonth() - ( numMonths[ 0 ] * numMonths[ 1 ] ) + 1, maxDate.getDate() ) );
+			maxDraw = ( minDate && maxDraw < minDate ? minDate : maxDraw );
+			while ( this._daylightSavingAdjust( new Date( drawYear, drawMonth, 1 ) ) > maxDraw ) {
+				drawMonth--;
+				if ( drawMonth < 0 ) {
+					drawMonth = 11;
+					drawYear--;
+				}
+			}
+		}
+		inst.drawMonth = drawMonth;
+		inst.drawYear = drawYear;
+
+		prevText = this._get( inst, "prevText" );
+		prevText = ( !navigationAsDateFormat ? prevText : this.formatDate( prevText,
+			this._daylightSavingAdjust( new Date( drawYear, drawMonth - stepMonths, 1 ) ),
+			this._getFormatConfig( inst ) ) );
+
+		prev = ( this._canAdjustMonth( inst, -1, drawYear, drawMonth ) ?
+			"<a class='ui-datepicker-prev ui-corner-all' data-handler='prev' data-event='click'" +
+			" title='" + prevText + "'><span class='ui-icon ui-icon-circle-triangle-" + ( isRTL ? "e" : "w" ) + "'>" + prevText + "</span></a>" :
+			( hideIfNoPrevNext ? "" : "<a class='ui-datepicker-prev ui-corner-all ui-state-disabled' title='" + prevText + "'><span class='ui-icon ui-icon-circle-triangle-" + ( isRTL ? "e" : "w" ) + "'>" + prevText + "</span></a>" ) );
+
+		nextText = this._get( inst, "nextText" );
+		nextText = ( !navigationAsDateFormat ? nextText : this.formatDate( nextText,
+			this._daylightSavingAdjust( new Date( drawYear, drawMonth + stepMonths, 1 ) ),
+			this._getFormatConfig( inst ) ) );
+
+		next = ( this._canAdjustMonth( inst, +1, drawYear, drawMonth ) ?
+			"<a class='ui-datepicker-next ui-corner-all' data-handler='next' data-event='click'" +
+			" title='" + nextText + "'><span class='ui-icon ui-icon-circle-triangle-" + ( isRTL ? "w" : "e" ) + "'>" + nextText + "</span></a>" :
+			( hideIfNoPrevNext ? "" : "<a class='ui-datepicker-next ui-corner-all ui-state-disabled' title='" + nextText + "'><span class='ui-icon ui-icon-circle-triangle-" + ( isRTL ? "w" : "e" ) + "'>" + nextText + "</span></a>" ) );
+
+		currentText = this._get( inst, "currentText" );
+		gotoDate = ( this._get( inst, "gotoCurrent" ) && inst.currentDay ? currentDate : today );
+		currentText = ( !navigationAsDateFormat ? currentText :
+			this.formatDate( currentText, gotoDate, this._getFormatConfig( inst ) ) );
+
+		controls = ( !inst.inline ? "<button type='button' class='ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all' data-handler='hide' data-event='click'>" +
+			this._get( inst, "closeText" ) + "</button>" : "" );
+
+		buttonPanel = ( showButtonPanel ) ? "<div class='ui-datepicker-buttonpane ui-widget-content'>" + ( isRTL ? controls : "" ) +
+			( this._isInRange( inst, gotoDate ) ? "<button type='button' class='ui-datepicker-current ui-state-default ui-priority-secondary ui-corner-all' data-handler='today' data-event='click'" +
+			">" + currentText + "</button>" : "" ) + ( isRTL ? "" : controls ) + "</div>" : "";
+
+		firstDay = parseInt( this._get( inst, "firstDay" ), 10 );
+		firstDay = ( isNaN( firstDay ) ? 0 : firstDay );
+
+		showWeek = this._get( inst, "showWeek" );
+		dayNames = this._get( inst, "dayNames" );
+		dayNamesMin = this._get( inst, "dayNamesMin" );
+		monthNames = this._get( inst, "monthNames" );
+		monthNamesShort = this._get( inst, "monthNamesShort" );
+		beforeShowDay = this._get( inst, "beforeShowDay" );
+		showOtherMonths = this._get( inst, "showOtherMonths" );
+		selectOtherMonths = this._get( inst, "selectOtherMonths" );
+		defaultDate = this._getDefaultDate( inst );
+		html = "";
+
+		for ( row = 0; row < numMonths[ 0 ]; row++ ) {
+			group = "";
+			this.maxRows = 4;
+			for ( col = 0; col < numMonths[ 1 ]; col++ ) {
+				selectedDate = this._daylightSavingAdjust( new Date( drawYear, drawMonth, inst.selectedDay ) );
+				cornerClass = " ui-corner-all";
+				calender = "";
+				if ( isMultiMonth ) {
+					calender += "<div class='ui-datepicker-group";
+					if ( numMonths[ 1 ] > 1 ) {
+						switch ( col ) {
+							case 0: calender += " ui-datepicker-group-first";
+								cornerClass = " ui-corner-" + ( isRTL ? "right" : "left" ); break;
+							case numMonths[ 1 ] - 1: calender += " ui-datepicker-group-last";
+								cornerClass = " ui-corner-" + ( isRTL ? "left" : "right" ); break;
+							default: calender += " ui-datepicker-group-middle"; cornerClass = ""; break;
+						}
+					}
+					calender += "'>";
+				}
+				calender += "<div class='ui-datepicker-header ui-widget-header ui-helper-clearfix" + cornerClass + "'>" +
+					( /all|left/.test( cornerClass ) && row === 0 ? ( isRTL ? next : prev ) : "" ) +
+					( /all|right/.test( cornerClass ) && row === 0 ? ( isRTL ? prev : next ) : "" ) +
+					this._generateMonthYearHeader( inst, drawMonth, drawYear, minDate, maxDate,
+					row > 0 || col > 0, monthNames, monthNamesShort ) + // draw month headers
+					"</div><table class='ui-datepicker-calendar'><thead>" +
+					"<tr>";
+				thead = ( showWeek ? "<th class='ui-datepicker-week-col'>" + this._get( inst, "weekHeader" ) + "</th>" : "" );
+				for ( dow = 0; dow < 7; dow++ ) { // days of the week
+					day = ( dow + firstDay ) % 7;
+					thead += "<th scope='col'" + ( ( dow + firstDay + 6 ) % 7 >= 5 ? " class='ui-datepicker-week-end'" : "" ) + ">" +
+						"<span title='" + dayNames[ day ] + "'>" + dayNamesMin[ day ] + "</span></th>";
+				}
+				calender += thead + "</tr></thead><tbody>";
+				daysInMonth = this._getDaysInMonth( drawYear, drawMonth );
+				if ( drawYear === inst.selectedYear && drawMonth === inst.selectedMonth ) {
+					inst.selectedDay = Math.min( inst.selectedDay, daysInMonth );
+				}
+				leadDays = ( this._getFirstDayOfMonth( drawYear, drawMonth ) - firstDay + 7 ) % 7;
+				curRows = Math.ceil( ( leadDays + daysInMonth ) / 7 ); // calculate the number of rows to generate
+				numRows = ( isMultiMonth ? this.maxRows > curRows ? this.maxRows : curRows : curRows ); //If multiple months, use the higher number of rows (see #7043)
+				this.maxRows = numRows;
+				printDate = this._daylightSavingAdjust( new Date( drawYear, drawMonth, 1 - leadDays ) );
+				for ( dRow = 0; dRow < numRows; dRow++ ) { // create date picker rows
+					calender += "<tr>";
+					tbody = ( !showWeek ? "" : "<td class='ui-datepicker-week-col'>" +
+						this._get( inst, "calculateWeek" )( printDate ) + "</td>" );
+					for ( dow = 0; dow < 7; dow++ ) { // create date picker days
+						daySettings = ( beforeShowDay ?
+							beforeShowDay.apply( ( inst.input ? inst.input[ 0 ] : null ), [ printDate ] ) : [ true, "" ] );
+						otherMonth = ( printDate.getMonth() !== drawMonth );
+						unselectable = ( otherMonth && !selectOtherMonths ) || !daySettings[ 0 ] ||
+							( minDate && printDate < minDate ) || ( maxDate && printDate > maxDate );
+						tbody += "<td class='" +
+							( ( dow + firstDay + 6 ) % 7 >= 5 ? " ui-datepicker-week-end" : "" ) + // highlight weekends
+							( otherMonth ? " ui-datepicker-other-month" : "" ) + // highlight days from other months
+							( ( printDate.getTime() === selectedDate.getTime() && drawMonth === inst.selectedMonth && inst._keyEvent ) || // user pressed key
+							( defaultDate.getTime() === printDate.getTime() && defaultDate.getTime() === selectedDate.getTime() ) ?
+
+							// or defaultDate is current printedDate and defaultDate is selectedDate
+							" " + this._dayOverClass : "" ) + // highlight selected day
+							( unselectable ? " " + this._unselectableClass + " ui-state-disabled" : "" ) +  // highlight unselectable days
+							( otherMonth && !showOtherMonths ? "" : " " + daySettings[ 1 ] + // highlight custom dates
+							( printDate.getTime() === currentDate.getTime() ? " " + this._currentClass : "" ) + // highlight selected day
+							( printDate.getTime() === today.getTime() ? " ui-datepicker-today" : "" ) ) + "'" + // highlight today (if different)
+							( ( !otherMonth || showOtherMonths ) && daySettings[ 2 ] ? " title='" + daySettings[ 2 ].replace( /'/g, "&#39;" ) + "'" : "" ) + // cell title
+							( unselectable ? "" : " data-handler='selectDay' data-event='click' data-month='" + printDate.getMonth() + "' data-year='" + printDate.getFullYear() + "'" ) + ">" + // actions
+							( otherMonth && !showOtherMonths ? "&#xa0;" : // display for other months
+							( unselectable ? "<span class='ui-state-default'>" + printDate.getDate() + "</span>" : "<a class='ui-state-default" +
+							( printDate.getTime() === today.getTime() ? " ui-state-highlight" : "" ) +
+							( printDate.getTime() === currentDate.getTime() ? " ui-state-active" : "" ) + // highlight selected day
+							( otherMonth ? " ui-priority-secondary" : "" ) + // distinguish dates from other months
+							"' href='#'>" + printDate.getDate() + "</a>" ) ) + "</td>"; // display selectable date
+						printDate.setDate( printDate.getDate() + 1 );
+						printDate = this._daylightSavingAdjust( printDate );
+					}
+					calender += tbody + "</tr>";
+				}
+				drawMonth++;
+				if ( drawMonth > 11 ) {
+					drawMonth = 0;
+					drawYear++;
+				}
+				calender += "</tbody></table>" + ( isMultiMonth ? "</div>" +
+							( ( numMonths[ 0 ] > 0 && col === numMonths[ 1 ] - 1 ) ? "<div class='ui-datepicker-row-break'></div>" : "" ) : "" );
+				group += calender;
+			}
+			html += group;
+		}
+		html += buttonPanel;
+		inst._keyEvent = false;
+		return html;
+	},
+
+	/* Generate the month and year header. */
+	_generateMonthYearHeader: function( inst, drawMonth, drawYear, minDate, maxDate,
+			secondary, monthNames, monthNamesShort ) {
+
+		var inMinYear, inMaxYear, month, years, thisYear, determineYear, year, endYear,
+			changeMonth = this._get( inst, "changeMonth" ),
+			changeYear = this._get( inst, "changeYear" ),
+			showMonthAfterYear = this._get( inst, "showMonthAfterYear" ),
+			html = "<div class='ui-datepicker-title'>",
+			monthHtml = "";
+
+		// Month selection
+		if ( secondary || !changeMonth ) {
+			monthHtml += "<span class='ui-datepicker-month'>" + monthNames[ drawMonth ] + "</span>";
+		} else {
+			inMinYear = ( minDate && minDate.getFullYear() === drawYear );
+			inMaxYear = ( maxDate && maxDate.getFullYear() === drawYear );
+			monthHtml += "<select class='ui-datepicker-month' data-handler='selectMonth' data-event='change'>";
+			for ( month = 0; month < 12; month++ ) {
+				if ( ( !inMinYear || month >= minDate.getMonth() ) && ( !inMaxYear || month <= maxDate.getMonth() ) ) {
+					monthHtml += "<option value='" + month + "'" +
+						( month === drawMonth ? " selected='selected'" : "" ) +
+						">" + monthNamesShort[ month ] + "</option>";
+				}
+			}
+			monthHtml += "</select>";
+		}
+
+		if ( !showMonthAfterYear ) {
+			html += monthHtml + ( secondary || !( changeMonth && changeYear ) ? "&#xa0;" : "" );
+		}
+
+		// Year selection
+		if ( !inst.yearshtml ) {
+			inst.yearshtml = "";
+			if ( secondary || !changeYear ) {
+				html += "<span class='ui-datepicker-year'>" + drawYear + "</span>";
+			} else {
+
+				// determine range of years to display
+				years = this._get( inst, "yearRange" ).split( ":" );
+				thisYear = new Date().getFullYear();
+				determineYear = function( value ) {
+					var year = ( value.match( /c[+\-].*/ ) ? drawYear + parseInt( value.substring( 1 ), 10 ) :
+						( value.match( /[+\-].*/ ) ? thisYear + parseInt( value, 10 ) :
+						parseInt( value, 10 ) ) );
+					return ( isNaN( year ) ? thisYear : year );
+				};
+				year = determineYear( years[ 0 ] );
+				endYear = Math.max( year, determineYear( years[ 1 ] || "" ) );
+				year = ( minDate ? Math.max( year, minDate.getFullYear() ) : year );
+				endYear = ( maxDate ? Math.min( endYear, maxDate.getFullYear() ) : endYear );
+				inst.yearshtml += "<select class='ui-datepicker-year' data-handler='selectYear' data-event='change'>";
+				for ( ; year <= endYear; year++ ) {
+					inst.yearshtml += "<option value='" + year + "'" +
+						( year === drawYear ? " selected='selected'" : "" ) +
+						">" + year + "</option>";
+				}
+				inst.yearshtml += "</select>";
+
+				html += inst.yearshtml;
+				inst.yearshtml = null;
+			}
+		}
+
+		html += this._get( inst, "yearSuffix" );
+		if ( showMonthAfterYear ) {
+			html += ( secondary || !( changeMonth && changeYear ) ? "&#xa0;" : "" ) + monthHtml;
+		}
+		html += "</div>"; // Close datepicker_header
+		return html;
+	},
+
+	/* Adjust one of the date sub-fields. */
+	_adjustInstDate: function( inst, offset, period ) {
+		var year = inst.selectedYear + ( period === "Y" ? offset : 0 ),
+			month = inst.selectedMonth + ( period === "M" ? offset : 0 ),
+			day = Math.min( inst.selectedDay, this._getDaysInMonth( year, month ) ) + ( period === "D" ? offset : 0 ),
+			date = this._restrictMinMax( inst, this._daylightSavingAdjust( new Date( year, month, day ) ) );
+
+		inst.selectedDay = date.getDate();
+		inst.drawMonth = inst.selectedMonth = date.getMonth();
+		inst.drawYear = inst.selectedYear = date.getFullYear();
+		if ( period === "M" || period === "Y" ) {
+			this._notifyChange( inst );
+		}
+	},
+
+	/* Ensure a date is within any min/max bounds. */
+	_restrictMinMax: function( inst, date ) {
+		var minDate = this._getMinMaxDate( inst, "min" ),
+			maxDate = this._getMinMaxDate( inst, "max" ),
+			newDate = ( minDate && date < minDate ? minDate : date );
+		return ( maxDate && newDate > maxDate ? maxDate : newDate );
+	},
+
+	/* Notify change of month/year. */
+	_notifyChange: function( inst ) {
+		var onChange = this._get( inst, "onChangeMonthYear" );
+		if ( onChange ) {
+			onChange.apply( ( inst.input ? inst.input[ 0 ] : null ),
+				[ inst.selectedYear, inst.selectedMonth + 1, inst ] );
+		}
+	},
+
+	/* Determine the number of months to show. */
+	_getNumberOfMonths: function( inst ) {
+		var numMonths = this._get( inst, "numberOfMonths" );
+		return ( numMonths == null ? [ 1, 1 ] : ( typeof numMonths === "number" ? [ 1, numMonths ] : numMonths ) );
+	},
+
+	/* Determine the current maximum date - ensure no time components are set. */
+	_getMinMaxDate: function( inst, minMax ) {
+		return this._determineDate( inst, this._get( inst, minMax + "Date" ), null );
+	},
+
+	/* Find the number of days in a given month. */
+	_getDaysInMonth: function( year, month ) {
+		return 32 - this._daylightSavingAdjust( new Date( year, month, 32 ) ).getDate();
+	},
+
+	/* Find the day of the week of the first of a month. */
+	_getFirstDayOfMonth: function( year, month ) {
+		return new Date( year, month, 1 ).getDay();
+	},
+
+	/* Determines if we should allow a "next/prev" month display change. */
+	_canAdjustMonth: function( inst, offset, curYear, curMonth ) {
+		var numMonths = this._getNumberOfMonths( inst ),
+			date = this._daylightSavingAdjust( new Date( curYear,
+			curMonth + ( offset < 0 ? offset : numMonths[ 0 ] * numMonths[ 1 ] ), 1 ) );
+
+		if ( offset < 0 ) {
+			date.setDate( this._getDaysInMonth( date.getFullYear(), date.getMonth() ) );
+		}
+		return this._isInRange( inst, date );
+	},
+
+	/* Is the given date in the accepted range? */
+	_isInRange: function( inst, date ) {
+		var yearSplit, currentYear,
+			minDate = this._getMinMaxDate( inst, "min" ),
+			maxDate = this._getMinMaxDate( inst, "max" ),
+			minYear = null,
+			maxYear = null,
+			years = this._get( inst, "yearRange" );
+			if ( years ) {
+				yearSplit = years.split( ":" );
+				currentYear = new Date().getFullYear();
+				minYear = parseInt( yearSplit[ 0 ], 10 );
+				maxYear = parseInt( yearSplit[ 1 ], 10 );
+				if ( yearSplit[ 0 ].match( /[+\-].*/ ) ) {
+					minYear += currentYear;
+				}
+				if ( yearSplit[ 1 ].match( /[+\-].*/ ) ) {
+					maxYear += currentYear;
+				}
+			}
+
+		return ( ( !minDate || date.getTime() >= minDate.getTime() ) &&
+			( !maxDate || date.getTime() <= maxDate.getTime() ) &&
+			( !minYear || date.getFullYear() >= minYear ) &&
+			( !maxYear || date.getFullYear() <= maxYear ) );
+	},
+
+	/* Provide the configuration settings for formatting/parsing. */
+	_getFormatConfig: function( inst ) {
+		var shortYearCutoff = this._get( inst, "shortYearCutoff" );
+		shortYearCutoff = ( typeof shortYearCutoff !== "string" ? shortYearCutoff :
+			new Date().getFullYear() % 100 + parseInt( shortYearCutoff, 10 ) );
+		return { shortYearCutoff: shortYearCutoff,
+			dayNamesShort: this._get( inst, "dayNamesShort" ), dayNames: this._get( inst, "dayNames" ),
+			monthNamesShort: this._get( inst, "monthNamesShort" ), monthNames: this._get( inst, "monthNames" ) };
+	},
+
+	/* Format the given date for display. */
+	_formatDate: function( inst, day, month, year ) {
+		if ( !day ) {
+			inst.currentDay = inst.selectedDay;
+			inst.currentMonth = inst.selectedMonth;
+			inst.currentYear = inst.selectedYear;
+		}
+		var date = ( day ? ( typeof day === "object" ? day :
+			this._daylightSavingAdjust( new Date( year, month, day ) ) ) :
+			this._daylightSavingAdjust( new Date( inst.currentYear, inst.currentMonth, inst.currentDay ) ) );
+		return this.formatDate( this._get( inst, "dateFormat" ), date, this._getFormatConfig( inst ) );
+	}
+} );
+
+/*
+ * Bind hover events for datepicker elements.
+ * Done via delegate so the binding only occurs once in the lifetime of the parent div.
+ * Global datepicker_instActive, set by _updateDatepicker allows the handlers to find their way back to the active picker.
+ */
+function datepicker_bindHover( dpDiv ) {
+	var selector = "button, .ui-datepicker-prev, .ui-datepicker-next, .ui-datepicker-calendar td a";
+	return dpDiv.on( "mouseout", selector, function() {
+			$( this ).removeClass( "ui-state-hover" );
+			if ( this.className.indexOf( "ui-datepicker-prev" ) !== -1 ) {
+				$( this ).removeClass( "ui-datepicker-prev-hover" );
+			}
+			if ( this.className.indexOf( "ui-datepicker-next" ) !== -1 ) {
+				$( this ).removeClass( "ui-datepicker-next-hover" );
+			}
+		} )
+		.on( "mouseover", selector, datepicker_handleMouseover );
+}
+
+function datepicker_handleMouseover() {
+	if ( !$.datepicker._isDisabledDatepicker( datepicker_instActive.inline ? datepicker_instActive.dpDiv.parent()[ 0 ] : datepicker_instActive.input[ 0 ] ) ) {
+		$( this ).parents( ".ui-datepicker-calendar" ).find( "a" ).removeClass( "ui-state-hover" );
+		$( this ).addClass( "ui-state-hover" );
+		if ( this.className.indexOf( "ui-datepicker-prev" ) !== -1 ) {
+			$( this ).addClass( "ui-datepicker-prev-hover" );
+		}
+		if ( this.className.indexOf( "ui-datepicker-next" ) !== -1 ) {
+			$( this ).addClass( "ui-datepicker-next-hover" );
+		}
+	}
+}
+
+/* jQuery extend now ignores nulls! */
+function datepicker_extendRemove( target, props ) {
+	$.extend( target, props );
+	for ( var name in props ) {
+		if ( props[ name ] == null ) {
+			target[ name ] = props[ name ];
+		}
+	}
+	return target;
+}
+
+/* Invoke the datepicker functionality.
+   @param  options  string - a command, optionally followed by additional parameters or
+					Object - settings for attaching new datepicker functionality
+   @return  jQuery object */
+$.fn.datepicker = function( options ) {
+
+	/* Verify an empty collection wasn't passed - Fixes #6976 */
+	if ( !this.length ) {
+		return this;
+	}
+
+	/* Initialise the date picker. */
+	if ( !$.datepicker.initialized ) {
+		$( document ).on( "mousedown", $.datepicker._checkExternalClick );
+		$.datepicker.initialized = true;
+	}
+
+	/* Append datepicker main container to body if not exist. */
+	if ( $( "#" + $.datepicker._mainDivId ).length === 0 ) {
+		$( "body" ).append( $.datepicker.dpDiv );
+	}
+
+	var otherArgs = Array.prototype.slice.call( arguments, 1 );
+	if ( typeof options === "string" && ( options === "isDisabled" || options === "getDate" || options === "widget" ) ) {
+		return $.datepicker[ "_" + options + "Datepicker" ].
+			apply( $.datepicker, [ this[ 0 ] ].concat( otherArgs ) );
+	}
+	if ( options === "option" && arguments.length === 2 && typeof arguments[ 1 ] === "string" ) {
+		return $.datepicker[ "_" + options + "Datepicker" ].
+			apply( $.datepicker, [ this[ 0 ] ].concat( otherArgs ) );
+	}
+	return this.each( function() {
+		typeof options === "string" ?
+			$.datepicker[ "_" + options + "Datepicker" ].
+				apply( $.datepicker, [ this ].concat( otherArgs ) ) :
+			$.datepicker._attachDatepicker( this, options );
+	} );
+};
+
+$.datepicker = new Datepicker(); // singleton instance
+$.datepicker.initialized = false;
+$.datepicker.uuid = new Date().getTime();
+$.datepicker.version = "1.12.1";
+
+var widgetsDatepicker = $.datepicker;
+
+
+
+
+// This file is deprecated
+var ie = $.ui.ie = !!/msie [\w.]+/.exec( navigator.userAgent.toLowerCase() );
+
+/*!
+ * jQuery UI Mouse 1.12.1
+ * http://jqueryui.com
+ *
+ * Copyright jQuery Foundation and other contributors
+ * Released under the MIT license.
+ * http://jquery.org/license
+ */
+
+//>>label: Mouse
+//>>group: Widgets
+//>>description: Abstracts mouse-based interactions to assist in creating certain widgets.
+//>>docs: http://api.jqueryui.com/mouse/
+
+
+
+var mouseHandled = false;
+$( document ).on( "mouseup", function() {
+	mouseHandled = false;
+} );
+
+var widgetsMouse = $.widget( "ui.mouse", {
+	version: "1.12.1",
+	options: {
+		cancel: "input, textarea, button, select, option",
+		distance: 1,
+		delay: 0
+	},
+	_mouseInit: function() {
+		var that = this;
+
+		this.element
+			.on( "mousedown." + this.widgetName, function( event ) {
+				return that._mouseDown( event );
+			} )
+			.on( "click." + this.widgetName, function( event ) {
+				if ( true === $.data( event.target, that.widgetName + ".preventClickEvent" ) ) {
+					$.removeData( event.target, that.widgetName + ".preventClickEvent" );
+					event.stopImmediatePropagation();
+					return false;
+				}
+			} );
+
+		this.started = false;
+	},
+
+	// TODO: make sure destroying one instance of mouse doesn't mess with
+	// other instances of mouse
+	_mouseDestroy: function() {
+		this.element.off( "." + this.widgetName );
+		if ( this._mouseMoveDelegate ) {
+			this.document
+				.off( "mousemove." + this.widgetName, this._mouseMoveDelegate )
+				.off( "mouseup." + this.widgetName, this._mouseUpDelegate );
+		}
+	},
+
+	_mouseDown: function( event ) {
+
+		// don't let more than one widget handle mouseStart
+		if ( mouseHandled ) {
+			return;
+		}
+
+		this._mouseMoved = false;
+
+		// We may have missed mouseup (out of window)
+		( this._mouseStarted && this._mouseUp( event ) );
+
+		this._mouseDownEvent = event;
+
+		var that = this,
+			btnIsLeft = ( event.which === 1 ),
+
+			// event.target.nodeName works around a bug in IE 8 with
+			// disabled inputs (#7620)
+			elIsCancel = ( typeof this.options.cancel === "string" && event.target.nodeName ?
+				$( event.target ).closest( this.options.cancel ).length : false );
+		if ( !btnIsLeft || elIsCancel || !this._mouseCapture( event ) ) {
+			return true;
+		}
+
+		this.mouseDelayMet = !this.options.delay;
+		if ( !this.mouseDelayMet ) {
+			this._mouseDelayTimer = setTimeout( function() {
+				that.mouseDelayMet = true;
+			}, this.options.delay );
+		}
+
+		if ( this._mouseDistanceMet( event ) && this._mouseDelayMet( event ) ) {
+			this._mouseStarted = ( this._mouseStart( event ) !== false );
+			if ( !this._mouseStarted ) {
+				event.preventDefault();
+				return true;
+			}
+		}
+
+		// Click event may never have fired (Gecko & Opera)
+		if ( true === $.data( event.target, this.widgetName + ".preventClickEvent" ) ) {
+			$.removeData( event.target, this.widgetName + ".preventClickEvent" );
+		}
+
+		// These delegates are required to keep context
+		this._mouseMoveDelegate = function( event ) {
+			return that._mouseMove( event );
+		};
+		this._mouseUpDelegate = function( event ) {
+			return that._mouseUp( event );
+		};
+
+		this.document
+			.on( "mousemove." + this.widgetName, this._mouseMoveDelegate )
+			.on( "mouseup." + this.widgetName, this._mouseUpDelegate );
+
+		event.preventDefault();
+
+		mouseHandled = true;
+		return true;
+	},
+
+	_mouseMove: function( event ) {
+
+		// Only check for mouseups outside the document if you've moved inside the document
+		// at least once. This prevents the firing of mouseup in the case of IE<9, which will
+		// fire a mousemove event if content is placed under the cursor. See #7778
+		// Support: IE <9
+		if ( this._mouseMoved ) {
+
+			// IE mouseup check - mouseup happened when mouse was out of window
+			if ( $.ui.ie && ( !document.documentMode || document.documentMode < 9 ) &&
+					!event.button ) {
+				return this._mouseUp( event );
+
+			// Iframe mouseup check - mouseup occurred in another document
+			} else if ( !event.which ) {
+
+				// Support: Safari <=8 - 9
+				// Safari sets which to 0 if you press any of the following keys
+				// during a drag (#14461)
+				if ( event.originalEvent.altKey || event.originalEvent.ctrlKey ||
+						event.originalEvent.metaKey || event.originalEvent.shiftKey ) {
+					this.ignoreMissingWhich = true;
+				} else if ( !this.ignoreMissingWhich ) {
+					return this._mouseUp( event );
+				}
+			}
+		}
+
+		if ( event.which || event.button ) {
+			this._mouseMoved = true;
+		}
+
+		if ( this._mouseStarted ) {
+			this._mouseDrag( event );
+			return event.preventDefault();
+		}
+
+		if ( this._mouseDistanceMet( event ) && this._mouseDelayMet( event ) ) {
+			this._mouseStarted =
+				( this._mouseStart( this._mouseDownEvent, event ) !== false );
+			( this._mouseStarted ? this._mouseDrag( event ) : this._mouseUp( event ) );
+		}
+
+		return !this._mouseStarted;
+	},
+
+	_mouseUp: function( event ) {
+		this.document
+			.off( "mousemove." + this.widgetName, this._mouseMoveDelegate )
+			.off( "mouseup." + this.widgetName, this._mouseUpDelegate );
+
+		if ( this._mouseStarted ) {
+			this._mouseStarted = false;
+
+			if ( event.target === this._mouseDownEvent.target ) {
+				$.data( event.target, this.widgetName + ".preventClickEvent", true );
+			}
+
+			this._mouseStop( event );
+		}
+
+		if ( this._mouseDelayTimer ) {
+			clearTimeout( this._mouseDelayTimer );
+			delete this._mouseDelayTimer;
+		}
+
+		this.ignoreMissingWhich = false;
+		mouseHandled = false;
+		event.preventDefault();
+	},
+
+	_mouseDistanceMet: function( event ) {
+		return ( Math.max(
+				Math.abs( this._mouseDownEvent.pageX - event.pageX ),
+				Math.abs( this._mouseDownEvent.pageY - event.pageY )
+			) >= this.options.distance
+		);
+	},
+
+	_mouseDelayMet: function( /* event */ ) {
+		return this.mouseDelayMet;
+	},
+
+	// These are placeholder methods, to be overriden by extending plugin
+	_mouseStart: function( /* event */ ) {},
+	_mouseDrag: function( /* event */ ) {},
+	_mouseStop: function( /* event */ ) {},
+	_mouseCapture: function( /* event */ ) { return true; }
+} );
+
+
+
+
+// $.ui.plugin is deprecated. Use $.widget() extensions instead.
+var plugin = $.ui.plugin = {
+	add: function( module, option, set ) {
+		var i,
+			proto = $.ui[ module ].prototype;
+		for ( i in set ) {
+			proto.plugins[ i ] = proto.plugins[ i ] || [];
+			proto.plugins[ i ].push( [ option, set[ i ] ] );
+		}
+	},
+	call: function( instance, name, args, allowDisconnected ) {
+		var i,
+			set = instance.plugins[ name ];
+
+		if ( !set ) {
+			return;
+		}
+
+		if ( !allowDisconnected && ( !instance.element[ 0 ].parentNode ||
+				instance.element[ 0 ].parentNode.nodeType === 11 ) ) {
+			return;
+		}
+
+		for ( i = 0; i < set.length; i++ ) {
+			if ( instance.options[ set[ i ][ 0 ] ] ) {
+				set[ i ][ 1 ].apply( instance.element, args );
+			}
+		}
+	}
+};
+
+
+
+var safeBlur = $.ui.safeBlur = function( element ) {
+
+	// Support: IE9 - 10 only
+	// If the <body> is blurred, IE will switch windows, see #9420
+	if ( element && element.nodeName.toLowerCase() !== "body" ) {
+		$( element ).trigger( "blur" );
+	}
+};
+
+
+/*!
+ * jQuery UI Draggable 1.12.1
+ * http://jqueryui.com
+ *
+ * Copyright jQuery Foundation and other contributors
+ * Released under the MIT license.
+ * http://jquery.org/license
+ */
+
+//>>label: Draggable
+//>>group: Interactions
+//>>description: Enables dragging functionality for any element.
+//>>docs: http://api.jqueryui.com/draggable/
+//>>demos: http://jqueryui.com/draggable/
+//>>css.structure: ../../themes/base/draggable.css
+
+
+
+$.widget( "ui.draggable", $.ui.mouse, {
+	version: "1.12.1",
+	widgetEventPrefix: "drag",
+	options: {
+		addClasses: true,
+		appendTo: "parent",
+		axis: false,
+		connectToSortable: false,
+		containment: false,
+		cursor: "auto",
+		cursorAt: false,
+		grid: false,
+		handle: false,
+		helper: "original",
+		iframeFix: false,
+		opacity: false,
+		refreshPositions: false,
+		revert: false,
+		revertDuration: 500,
+		scope: "default",
+		scroll: true,
+		scrollSensitivity: 20,
+		scrollSpeed: 20,
+		snap: false,
+		snapMode: "both",
+		snapTolerance: 20,
+		stack: false,
+		zIndex: false,
+
+		// Callbacks
+		drag: null,
+		start: null,
+		stop: null
+	},
+	_create: function() {
+
+		if ( this.options.helper === "original" ) {
+			this._setPositionRelative();
+		}
+		if ( this.options.addClasses ) {
+			this._addClass( "ui-draggable" );
+		}
+		this._setHandleClassName();
+
+		this._mouseInit();
+	},
+
+	_setOption: function( key, value ) {
+		this._super( key, value );
+		if ( key === "handle" ) {
+			this._removeHandleClassName();
+			this._setHandleClassName();
+		}
+	},
+
+	_destroy: function() {
+		if ( ( this.helper || this.element ).is( ".ui-draggable-dragging" ) ) {
+			this.destroyOnClear = true;
+			return;
+		}
+		this._removeHandleClassName();
+		this._mouseDestroy();
+	},
+
+	_mouseCapture: function( event ) {
+		var o = this.options;
+
+		// Among others, prevent a drag on a resizable-handle
+		if ( this.helper || o.disabled ||
+				$( event.target ).closest( ".ui-resizable-handle" ).length > 0 ) {
+			return false;
+		}
+
+		//Quit if we're not on a valid handle
+		this.handle = this._getHandle( event );
+		if ( !this.handle ) {
+			return false;
+		}
+
+		this._blurActiveElement( event );
+
+		this._blockFrames( o.iframeFix === true ? "iframe" : o.iframeFix );
+
+		return true;
+
+	},
+
+	_blockFrames: function( selector ) {
+		this.iframeBlocks = this.document.find( selector ).map( function() {
+			var iframe = $( this );
+
+			return $( "<div>" )
+				.css( "position", "absolute" )
+				.appendTo( iframe.parent() )
+				.outerWidth( iframe.outerWidth() )
+				.outerHeight( iframe.outerHeight() )
+				.offset( iframe.offset() )[ 0 ];
+		} );
+	},
+
+	_unblockFrames: function() {
+		if ( this.iframeBlocks ) {
+			this.iframeBlocks.remove();
+			delete this.iframeBlocks;
+		}
+	},
+
+	_blurActiveElement: function( event ) {
+		var activeElement = $.ui.safeActiveElement( this.document[ 0 ] ),
+			target = $( event.target );
+
+		// Don't blur if the event occurred on an element that is within
+		// the currently focused element
+		// See #10527, #12472
+		if ( target.closest( activeElement ).length ) {
+			return;
+		}
+
+		// Blur any element that currently has focus, see #4261
+		$.ui.safeBlur( activeElement );
+	},
+
+	_mouseStart: function( event ) {
+
+		var o = this.options;
+
+		//Create and append the visible helper
+		this.helper = this._createHelper( event );
+
+		this._addClass( this.helper, "ui-draggable-dragging" );
+
+		//Cache the helper size
+		this._cacheHelperProportions();
+
+		//If ddmanager is used for droppables, set the global draggable
+		if ( $.ui.ddmanager ) {
+			$.ui.ddmanager.current = this;
+		}
+
+		/*
+		 * - Position generation -
+		 * This block generates everything position related - it's the core of draggables.
+		 */
+
+		//Cache the margins of the original element
+		this._cacheMargins();
+
+		//Store the helper's css position
+		this.cssPosition = this.helper.css( "position" );
+		this.scrollParent = this.helper.scrollParent( true );
+		this.offsetParent = this.helper.offsetParent();
+		this.hasFixedAncestor = this.helper.parents().filter( function() {
+				return $( this ).css( "position" ) === "fixed";
+			} ).length > 0;
+
+		//The element's absolute position on the page minus margins
+		this.positionAbs = this.element.offset();
+		this._refreshOffsets( event );
+
+		//Generate the original position
+		this.originalPosition = this.position = this._generatePosition( event, false );
+		this.originalPageX = event.pageX;
+		this.originalPageY = event.pageY;
+
+		//Adjust the mouse offset relative to the helper if "cursorAt" is supplied
+		( o.cursorAt && this._adjustOffsetFromHelper( o.cursorAt ) );
+
+		//Set a containment if given in the options
+		this._setContainment();
+
+		//Trigger event + callbacks
+		if ( this._trigger( "start", event ) === false ) {
+			this._clear();
+			return false;
+		}
+
+		//Recache the helper size
+		this._cacheHelperProportions();
+
+		//Prepare the droppable offsets
+		if ( $.ui.ddmanager && !o.dropBehaviour ) {
+			$.ui.ddmanager.prepareOffsets( this, event );
+		}
+
+		// Execute the drag once - this causes the helper not to be visible before getting its
+		// correct position
+		this._mouseDrag( event, true );
+
+		// If the ddmanager is used for droppables, inform the manager that dragging has started
+		// (see #5003)
+		if ( $.ui.ddmanager ) {
+			$.ui.ddmanager.dragStart( this, event );
+		}
+
+		return true;
+	},
+
+	_refreshOffsets: function( event ) {
+		this.offset = {
+			top: this.positionAbs.top - this.margins.top,
+			left: this.positionAbs.left - this.margins.left,
+			scroll: false,
+			parent: this._getParentOffset(),
+			relative: this._getRelativeOffset()
+		};
+
+		this.offset.click = {
+			left: event.pageX - this.offset.left,
+			top: event.pageY - this.offset.top
+		};
+	},
+
+	_mouseDrag: function( event, noPropagation ) {
+
+		// reset any necessary cached properties (see #5009)
+		if ( this.hasFixedAncestor ) {
+			this.offset.parent = this._getParentOffset();
+		}
+
+		//Compute the helpers position
+		this.position = this._generatePosition( event, true );
+		this.positionAbs = this._convertPositionTo( "absolute" );
+
+		//Call plugins and callbacks and use the resulting position if something is returned
+		if ( !noPropagation ) {
+			var ui = this._uiHash();
+			if ( this._trigger( "drag", event, ui ) === false ) {
+				this._mouseUp( new $.Event( "mouseup", event ) );
+				return false;
+			}
+			this.position = ui.position;
+		}
+
+		this.helper[ 0 ].style.left = this.position.left + "px";
+		this.helper[ 0 ].style.top = this.position.top + "px";
+
+		if ( $.ui.ddmanager ) {
+			$.ui.ddmanager.drag( this, event );
+		}
+
+		return false;
+	},
+
+	_mouseStop: function( event ) {
+
+		//If we are using droppables, inform the manager about the drop
+		var that = this,
+			dropped = false;
+		if ( $.ui.ddmanager && !this.options.dropBehaviour ) {
+			dropped = $.ui.ddmanager.drop( this, event );
+		}
+
+		//if a drop comes from outside (a sortable)
+		if ( this.dropped ) {
+			dropped = this.dropped;
+			this.dropped = false;
+		}
+
+		if ( ( this.options.revert === "invalid" && !dropped ) ||
+				( this.options.revert === "valid" && dropped ) ||
+				this.options.revert === true || ( $.isFunction( this.options.revert ) &&
+				this.options.revert.call( this.element, dropped ) )
+		) {
+			$( this.helper ).animate(
+				this.originalPosition,
+				parseInt( this.options.revertDuration, 10 ),
+				function() {
+					if ( that._trigger( "stop", event ) !== false ) {
+						that._clear();
+					}
+				}
+			);
+		} else {
+			if ( this._trigger( "stop", event ) !== false ) {
+				this._clear();
+			}
+		}
+
+		return false;
+	},
+
+	_mouseUp: function( event ) {
+		this._unblockFrames();
+
+		// If the ddmanager is used for droppables, inform the manager that dragging has stopped
+		// (see #5003)
+		if ( $.ui.ddmanager ) {
+			$.ui.ddmanager.dragStop( this, event );
+		}
+
+		// Only need to focus if the event occurred on the draggable itself, see #10527
+		if ( this.handleElement.is( event.target ) ) {
+
+			// The interaction is over; whether or not the click resulted in a drag,
+			// focus the element
+			this.element.trigger( "focus" );
+		}
+
+		return $.ui.mouse.prototype._mouseUp.call( this, event );
+	},
+
+	cancel: function() {
+
+		if ( this.helper.is( ".ui-draggable-dragging" ) ) {
+			this._mouseUp( new $.Event( "mouseup", { target: this.element[ 0 ] } ) );
+		} else {
+			this._clear();
+		}
+
+		return this;
+
+	},
+
+	_getHandle: function( event ) {
+		return this.options.handle ?
+			!!$( event.target ).closest( this.element.find( this.options.handle ) ).length :
+			true;
+	},
+
+	_setHandleClassName: function() {
+		this.handleElement = this.options.handle ?
+			this.element.find( this.options.handle ) : this.element;
+		this._addClass( this.handleElement, "ui-draggable-handle" );
+	},
+
+	_removeHandleClassName: function() {
+		this._removeClass( this.handleElement, "ui-draggable-handle" );
+	},
+
+	_createHelper: function( event ) {
+
+		var o = this.options,
+			helperIsFunction = $.isFunction( o.helper ),
+			helper = helperIsFunction ?
+				$( o.helper.apply( this.element[ 0 ], [ event ] ) ) :
+				( o.helper === "clone" ?
+					this.element.clone().removeAttr( "id" ) :
+					this.element );
+
+		if ( !helper.parents( "body" ).length ) {
+			helper.appendTo( ( o.appendTo === "parent" ?
+				this.element[ 0 ].parentNode :
+				o.appendTo ) );
+		}
+
+		// Http://bugs.jqueryui.com/ticket/9446
+		// a helper function can return the original element
+		// which wouldn't have been set to relative in _create
+		if ( helperIsFunction && helper[ 0 ] === this.element[ 0 ] ) {
+			this._setPositionRelative();
+		}
+
+		if ( helper[ 0 ] !== this.element[ 0 ] &&
+				!( /(fixed|absolute)/ ).test( helper.css( "position" ) ) ) {
+			helper.css( "position", "absolute" );
+		}
+
+		return helper;
+
+	},
+
+	_setPositionRelative: function() {
+		if ( !( /^(?:r|a|f)/ ).test( this.element.css( "position" ) ) ) {
+			this.element[ 0 ].style.position = "relative";
+		}
+	},
+
+	_adjustOffsetFromHelper: function( obj ) {
+		if ( typeof obj === "string" ) {
+			obj = obj.split( " " );
+		}
+		if ( $.isArray( obj ) ) {
+			obj = { left: +obj[ 0 ], top: +obj[ 1 ] || 0 };
+		}
+		if ( "left" in obj ) {
+			this.offset.click.left = obj.left + this.margins.left;
+		}
+		if ( "right" in obj ) {
+			this.offset.click.left = this.helperProportions.width - obj.right + this.margins.left;
+		}
+		if ( "top" in obj ) {
+			this.offset.click.top = obj.top + this.margins.top;
+		}
+		if ( "bottom" in obj ) {
+			this.offset.click.top = this.helperProportions.height - obj.bottom + this.margins.top;
+		}
+	},
+
+	_isRootNode: function( element ) {
+		return ( /(html|body)/i ).test( element.tagName ) || element === this.document[ 0 ];
+	},
+
+	_getParentOffset: function() {
+
+		//Get the offsetParent and cache its position
+		var po = this.offsetParent.offset(),
+			document = this.document[ 0 ];
+
+		// This is a special case where we need to modify a offset calculated on start, since the
+		// following happened:
+		// 1. The position of the helper is absolute, so it's position is calculated based on the
+		// next positioned parent
+		// 2. The actual offset parent is a child of the scroll parent, and the scroll parent isn't
+		// the document, which means that the scroll is included in the initial calculation of the
+		// offset of the parent, and never recalculated upon drag
+		if ( this.cssPosition === "absolute" && this.scrollParent[ 0 ] !== document &&
+				$.contains( this.scrollParent[ 0 ], this.offsetParent[ 0 ] ) ) {
+			po.left += this.scrollParent.scrollLeft();
+			po.top += this.scrollParent.scrollTop();
+		}
+
+		if ( this._isRootNode( this.offsetParent[ 0 ] ) ) {
+			po = { top: 0, left: 0 };
+		}
+
+		return {
+			top: po.top + ( parseInt( this.offsetParent.css( "borderTopWidth" ), 10 ) || 0 ),
+			left: po.left + ( parseInt( this.offsetParent.css( "borderLeftWidth" ), 10 ) || 0 )
+		};
+
+	},
+
+	_getRelativeOffset: function() {
+		if ( this.cssPosition !== "relative" ) {
+			return { top: 0, left: 0 };
+		}
+
+		var p = this.element.position(),
+			scrollIsRootNode = this._isRootNode( this.scrollParent[ 0 ] );
+
+		return {
+			top: p.top - ( parseInt( this.helper.css( "top" ), 10 ) || 0 ) +
+				( !scrollIsRootNode ? this.scrollParent.scrollTop() : 0 ),
+			left: p.left - ( parseInt( this.helper.css( "left" ), 10 ) || 0 ) +
+				( !scrollIsRootNode ? this.scrollParent.scrollLeft() : 0 )
+		};
+
+	},
+
+	_cacheMargins: function() {
+		this.margins = {
+			left: ( parseInt( this.element.css( "marginLeft" ), 10 ) || 0 ),
+			top: ( parseInt( this.element.css( "marginTop" ), 10 ) || 0 ),
+			right: ( parseInt( this.element.css( "marginRight" ), 10 ) || 0 ),
+			bottom: ( parseInt( this.element.css( "marginBottom" ), 10 ) || 0 )
+		};
+	},
+
+	_cacheHelperProportions: function() {
+		this.helperProportions = {
+			width: this.helper.outerWidth(),
+			height: this.helper.outerHeight()
+		};
+	},
+
+	_setContainment: function() {
+
+		var isUserScrollable, c, ce,
+			o = this.options,
+			document = this.document[ 0 ];
+
+		this.relativeContainer = null;
+
+		if ( !o.containment ) {
+			this.containment = null;
+			return;
+		}
+
+		if ( o.containment === "window" ) {
+			this.containment = [
+				$( window ).scrollLeft() - this.offset.relative.left - this.offset.parent.left,
+				$( window ).scrollTop() - this.offset.relative.top - this.offset.parent.top,
+				$( window ).scrollLeft() + $( window ).width() -
+					this.helperProportions.width - this.margins.left,
+				$( window ).scrollTop() +
+					( $( window ).height() || document.body.parentNode.scrollHeight ) -
+					this.helperProportions.height - this.margins.top
+			];
+			return;
+		}
+
+		if ( o.containment === "document" ) {
+			this.containment = [
+				0,
+				0,
+				$( document ).width() - this.helperProportions.width - this.margins.left,
+				( $( document ).height() || document.body.parentNode.scrollHeight ) -
+					this.helperProportions.height - this.margins.top
+			];
+			return;
+		}
+
+		if ( o.containment.constructor === Array ) {
+			this.containment = o.containment;
+			return;
+		}
+
+		if ( o.containment === "parent" ) {
+			o.containment = this.helper[ 0 ].parentNode;
+		}
+
+		c = $( o.containment );
+		ce = c[ 0 ];
+
+		if ( !ce ) {
+			return;
+		}
+
+		isUserScrollable = /(scroll|auto)/.test( c.css( "overflow" ) );
+
+		this.containment = [
+			( parseInt( c.css( "borderLeftWidth" ), 10 ) || 0 ) +
+				( parseInt( c.css( "paddingLeft" ), 10 ) || 0 ),
+			( parseInt( c.css( "borderTopWidth" ), 10 ) || 0 ) +
+				( parseInt( c.css( "paddingTop" ), 10 ) || 0 ),
+			( isUserScrollable ? Math.max( ce.scrollWidth, ce.offsetWidth ) : ce.offsetWidth ) -
+				( parseInt( c.css( "borderRightWidth" ), 10 ) || 0 ) -
+				( parseInt( c.css( "paddingRight" ), 10 ) || 0 ) -
+				this.helperProportions.width -
+				this.margins.left -
+				this.margins.right,
+			( isUserScrollable ? Math.max( ce.scrollHeight, ce.offsetHeight ) : ce.offsetHeight ) -
+				( parseInt( c.css( "borderBottomWidth" ), 10 ) || 0 ) -
+				( parseInt( c.css( "paddingBottom" ), 10 ) || 0 ) -
+				this.helperProportions.height -
+				this.margins.top -
+				this.margins.bottom
+		];
+		this.relativeContainer = c;
+	},
+
+	_convertPositionTo: function( d, pos ) {
+
+		if ( !pos ) {
+			pos = this.position;
+		}
+
+		var mod = d === "absolute" ? 1 : -1,
+			scrollIsRootNode = this._isRootNode( this.scrollParent[ 0 ] );
+
+		return {
+			top: (
+
+				// The absolute mouse position
+				pos.top	+
+
+				// Only for relative positioned nodes: Relative offset from element to offset parent
+				this.offset.relative.top * mod +
+
+				// The offsetParent's offset without borders (offset + border)
+				this.offset.parent.top * mod -
+				( ( this.cssPosition === "fixed" ?
+					-this.offset.scroll.top :
+					( scrollIsRootNode ? 0 : this.offset.scroll.top ) ) * mod )
+			),
+			left: (
+
+				// The absolute mouse position
+				pos.left +
+
+				// Only for relative positioned nodes: Relative offset from element to offset parent
+				this.offset.relative.left * mod +
+
+				// The offsetParent's offset without borders (offset + border)
+				this.offset.parent.left * mod	-
+				( ( this.cssPosition === "fixed" ?
+					-this.offset.scroll.left :
+					( scrollIsRootNode ? 0 : this.offset.scroll.left ) ) * mod )
+			)
+		};
+
+	},
+
+	_generatePosition: function( event, constrainPosition ) {
+
+		var containment, co, top, left,
+			o = this.options,
+			scrollIsRootNode = this._isRootNode( this.scrollParent[ 0 ] ),
+			pageX = event.pageX,
+			pageY = event.pageY;
+
+		// Cache the scroll
+		if ( !scrollIsRootNode || !this.offset.scroll ) {
+			this.offset.scroll = {
+				top: this.scrollParent.scrollTop(),
+				left: this.scrollParent.scrollLeft()
+			};
+		}
+
+		/*
+		 * - Position constraining -
+		 * Constrain the position to a mix of grid, containment.
+		 */
+
+		// If we are not dragging yet, we won't check for options
+		if ( constrainPosition ) {
+			if ( this.containment ) {
+				if ( this.relativeContainer ) {
+					co = this.relativeContainer.offset();
+					containment = [
+						this.containment[ 0 ] + co.left,
+						this.containment[ 1 ] + co.top,
+						this.containment[ 2 ] + co.left,
+						this.containment[ 3 ] + co.top
+					];
+				} else {
+					containment = this.containment;
+				}
+
+				if ( event.pageX - this.offset.click.left < containment[ 0 ] ) {
+					pageX = containment[ 0 ] + this.offset.click.left;
+				}
+				if ( event.pageY - this.offset.click.top < containment[ 1 ] ) {
+					pageY = containment[ 1 ] + this.offset.click.top;
+				}
+				if ( event.pageX - this.offset.click.left > containment[ 2 ] ) {
+					pageX = containment[ 2 ] + this.offset.click.left;
+				}
+				if ( event.pageY - this.offset.click.top > containment[ 3 ] ) {
+					pageY = containment[ 3 ] + this.offset.click.top;
+				}
+			}
+
+			if ( o.grid ) {
+
+				//Check for grid elements set to 0 to prevent divide by 0 error causing invalid
+				// argument errors in IE (see ticket #6950)
+				top = o.grid[ 1 ] ? this.originalPageY + Math.round( ( pageY -
+					this.originalPageY ) / o.grid[ 1 ] ) * o.grid[ 1 ] : this.originalPageY;
+				pageY = containment ? ( ( top - this.offset.click.top >= containment[ 1 ] ||
+					top - this.offset.click.top > containment[ 3 ] ) ?
+						top :
+						( ( top - this.offset.click.top >= containment[ 1 ] ) ?
+							top - o.grid[ 1 ] : top + o.grid[ 1 ] ) ) : top;
+
+				left = o.grid[ 0 ] ? this.originalPageX +
+					Math.round( ( pageX - this.originalPageX ) / o.grid[ 0 ] ) * o.grid[ 0 ] :
+					this.originalPageX;
+				pageX = containment ? ( ( left - this.offset.click.left >= containment[ 0 ] ||
+					left - this.offset.click.left > containment[ 2 ] ) ?
+						left :
+						( ( left - this.offset.click.left >= containment[ 0 ] ) ?
+							left - o.grid[ 0 ] : left + o.grid[ 0 ] ) ) : left;
+			}
+
+			if ( o.axis === "y" ) {
+				pageX = this.originalPageX;
+			}
+
+			if ( o.axis === "x" ) {
+				pageY = this.originalPageY;
+			}
+		}
+
+		return {
+			top: (
+
+				// The absolute mouse position
+				pageY -
+
+				// Click offset (relative to the element)
+				this.offset.click.top -
+
+				// Only for relative positioned nodes: Relative offset from element to offset parent
+				this.offset.relative.top -
+
+				// The offsetParent's offset without borders (offset + border)
+				this.offset.parent.top +
+				( this.cssPosition === "fixed" ?
+					-this.offset.scroll.top :
+					( scrollIsRootNode ? 0 : this.offset.scroll.top ) )
+			),
+			left: (
+
+				// The absolute mouse position
+				pageX -
+
+				// Click offset (relative to the element)
+				this.offset.click.left -
+
+				// Only for relative positioned nodes: Relative offset from element to offset parent
+				this.offset.relative.left -
+
+				// The offsetParent's offset without borders (offset + border)
+				this.offset.parent.left +
+				( this.cssPosition === "fixed" ?
+					-this.offset.scroll.left :
+					( scrollIsRootNode ? 0 : this.offset.scroll.left ) )
+			)
+		};
+
+	},
+
+	_clear: function() {
+		this._removeClass( this.helper, "ui-draggable-dragging" );
+		if ( this.helper[ 0 ] !== this.element[ 0 ] && !this.cancelHelperRemoval ) {
+			this.helper.remove();
+		}
+		this.helper = null;
+		this.cancelHelperRemoval = false;
+		if ( this.destroyOnClear ) {
+			this.destroy();
+		}
+	},
+
+	// From now on bulk stuff - mainly helpers
+
+	_trigger: function( type, event, ui ) {
+		ui = ui || this._uiHash();
+		$.ui.plugin.call( this, type, [ event, ui, this ], true );
+
+		// Absolute position and offset (see #6884 ) have to be recalculated after plugins
+		if ( /^(drag|start|stop)/.test( type ) ) {
+			this.positionAbs = this._convertPositionTo( "absolute" );
+			ui.offset = this.positionAbs;
+		}
+		return $.Widget.prototype._trigger.call( this, type, event, ui );
+	},
+
+	plugins: {},
+
+	_uiHash: function() {
+		return {
+			helper: this.helper,
+			position: this.position,
+			originalPosition: this.originalPosition,
+			offset: this.positionAbs
+		};
+	}
+
+} );
+
+$.ui.plugin.add( "draggable", "connectToSortable", {
+	start: function( event, ui, draggable ) {
+		var uiSortable = $.extend( {}, ui, {
+			item: draggable.element
+		} );
+
+		draggable.sortables = [];
+		$( draggable.options.connectToSortable ).each( function() {
+			var sortable = $( this ).sortable( "instance" );
+
+			if ( sortable && !sortable.options.disabled ) {
+				draggable.sortables.push( sortable );
+
+				// RefreshPositions is called at drag start to refresh the containerCache
+				// which is used in drag. This ensures it's initialized and synchronized
+				// with any changes that might have happened on the page since initialization.
+				sortable.refreshPositions();
+				sortable._trigger( "activate", event, uiSortable );
+			}
+		} );
+	},
+	stop: function( event, ui, draggable ) {
+		var uiSortable = $.extend( {}, ui, {
+			item: draggable.element
+		} );
+
+		draggable.cancelHelperRemoval = false;
+
+		$.each( draggable.sortables, function() {
+			var sortable = this;
+
+			if ( sortable.isOver ) {
+				sortable.isOver = 0;
+
+				// Allow this sortable to handle removing the helper
+				draggable.cancelHelperRemoval = true;
+				sortable.cancelHelperRemoval = false;
+
+				// Use _storedCSS To restore properties in the sortable,
+				// as this also handles revert (#9675) since the draggable
+				// may have modified them in unexpected ways (#8809)
+				sortable._storedCSS = {
+					position: sortable.placeholder.css( "position" ),
+					top: sortable.placeholder.css( "top" ),
+					left: sortable.placeholder.css( "left" )
+				};
+
+				sortable._mouseStop( event );
+
+				// Once drag has ended, the sortable should return to using
+				// its original helper, not the shared helper from draggable
+				sortable.options.helper = sortable.options._helper;
+			} else {
+
+				// Prevent this Sortable from removing the helper.
+				// However, don't set the draggable to remove the helper
+				// either as another connected Sortable may yet handle the removal.
+				sortable.cancelHelperRemoval = true;
+
+				sortable._trigger( "deactivate", event, uiSortable );
+			}
+		} );
+	},
+	drag: function( event, ui, draggable ) {
+		$.each( draggable.sortables, function() {
+			var innermostIntersecting = false,
+				sortable = this;
+
+			// Copy over variables that sortable's _intersectsWith uses
+			sortable.positionAbs = draggable.positionAbs;
+			sortable.helperProportions = draggable.helperProportions;
+			sortable.offset.click = draggable.offset.click;
+
+			if ( sortable._intersectsWith( sortable.containerCache ) ) {
+				innermostIntersecting = true;
+
+				$.each( draggable.sortables, function() {
+
+					// Copy over variables that sortable's _intersectsWith uses
+					this.positionAbs = draggable.positionAbs;
+					this.helperProportions = draggable.helperProportions;
+					this.offset.click = draggable.offset.click;
+
+					if ( this !== sortable &&
+							this._intersectsWith( this.containerCache ) &&
+							$.contains( sortable.element[ 0 ], this.element[ 0 ] ) ) {
+						innermostIntersecting = false;
+					}
+
+					return innermostIntersecting;
+				} );
+			}
+
+			if ( innermostIntersecting ) {
+
+				// If it intersects, we use a little isOver variable and set it once,
+				// so that the move-in stuff gets fired only once.
+				if ( !sortable.isOver ) {
+					sortable.isOver = 1;
+
+					// Store draggable's parent in case we need to reappend to it later.
+					draggable._parent = ui.helper.parent();
+
+					sortable.currentItem = ui.helper
+						.appendTo( sortable.element )
+						.data( "ui-sortable-item", true );
+
+					// Store helper option to later restore it
+					sortable.options._helper = sortable.options.helper;
+
+					sortable.options.helper = function() {
+						return ui.helper[ 0 ];
+					};
+
+					// Fire the start events of the sortable with our passed browser event,
+					// and our own helper (so it doesn't create a new one)
+					event.target = sortable.currentItem[ 0 ];
+					sortable._mouseCapture( event, true );
+					sortable._mouseStart( event, true, true );
+
+					// Because the browser event is way off the new appended portlet,
+					// modify necessary variables to reflect the changes
+					sortable.offset.click.top = draggable.offset.click.top;
+					sortable.offset.click.left = draggable.offset.click.left;
+					sortable.offset.parent.left -= draggable.offset.parent.left -
+						sortable.offset.parent.left;
+					sortable.offset.parent.top -= draggable.offset.parent.top -
+						sortable.offset.parent.top;
+
+					draggable._trigger( "toSortable", event );
+
+					// Inform draggable that the helper is in a valid drop zone,
+					// used solely in the revert option to handle "valid/invalid".
+					draggable.dropped = sortable.element;
+
+					// Need to refreshPositions of all sortables in the case that
+					// adding to one sortable changes the location of the other sortables (#9675)
+					$.each( draggable.sortables, function() {
+						this.refreshPositions();
+					} );
+
+					// Hack so receive/update callbacks work (mostly)
+					draggable.currentItem = draggable.element;
+					sortable.fromOutside = draggable;
+				}
+
+				if ( sortable.currentItem ) {
+					sortable._mouseDrag( event );
+
+					// Copy the sortable's position because the draggable's can potentially reflect
+					// a relative position, while sortable is always absolute, which the dragged
+					// element has now become. (#8809)
+					ui.position = sortable.position;
+				}
+			} else {
+
+				// If it doesn't intersect with the sortable, and it intersected before,
+				// we fake the drag stop of the sortable, but make sure it doesn't remove
+				// the helper by using cancelHelperRemoval.
+				if ( sortable.isOver ) {
+
+					sortable.isOver = 0;
+					sortable.cancelHelperRemoval = true;
+
+					// Calling sortable's mouseStop would trigger a revert,
+					// so revert must be temporarily false until after mouseStop is called.
+					sortable.options._revert = sortable.options.revert;
+					sortable.options.revert = false;
+
+					sortable._trigger( "out", event, sortable._uiHash( sortable ) );
+					sortable._mouseStop( event, true );
+
+					// Restore sortable behaviors that were modfied
+					// when the draggable entered the sortable area (#9481)
+					sortable.options.revert = sortable.options._revert;
+					sortable.options.helper = sortable.options._helper;
+
+					if ( sortable.placeholder ) {
+						sortable.placeholder.remove();
+					}
+
+					// Restore and recalculate the draggable's offset considering the sortable
+					// may have modified them in unexpected ways. (#8809, #10669)
+					ui.helper.appendTo( draggable._parent );
+					draggable._refreshOffsets( event );
+					ui.position = draggable._generatePosition( event, true );
+
+					draggable._trigger( "fromSortable", event );
+
+					// Inform draggable that the helper is no longer in a valid drop zone
+					draggable.dropped = false;
+
+					// Need to refreshPositions of all sortables just in case removing
+					// from one sortable changes the location of other sortables (#9675)
+					$.each( draggable.sortables, function() {
+						this.refreshPositions();
+					} );
+				}
+			}
+		} );
+	}
+} );
+
+$.ui.plugin.add( "draggable", "cursor", {
+	start: function( event, ui, instance ) {
+		var t = $( "body" ),
+			o = instance.options;
+
+		if ( t.css( "cursor" ) ) {
+			o._cursor = t.css( "cursor" );
+		}
+		t.css( "cursor", o.cursor );
+	},
+	stop: function( event, ui, instance ) {
+		var o = instance.options;
+		if ( o._cursor ) {
+			$( "body" ).css( "cursor", o._cursor );
+		}
+	}
+} );
+
+$.ui.plugin.add( "draggable", "opacity", {
+	start: function( event, ui, instance ) {
+		var t = $( ui.helper ),
+			o = instance.options;
+		if ( t.css( "opacity" ) ) {
+			o._opacity = t.css( "opacity" );
+		}
+		t.css( "opacity", o.opacity );
+	},
+	stop: function( event, ui, instance ) {
+		var o = instance.options;
+		if ( o._opacity ) {
+			$( ui.helper ).css( "opacity", o._opacity );
+		}
+	}
+} );
+
+$.ui.plugin.add( "draggable", "scroll", {
+	start: function( event, ui, i ) {
+		if ( !i.scrollParentNotHidden ) {
+			i.scrollParentNotHidden = i.helper.scrollParent( false );
+		}
+
+		if ( i.scrollParentNotHidden[ 0 ] !== i.document[ 0 ] &&
+				i.scrollParentNotHidden[ 0 ].tagName !== "HTML" ) {
+			i.overflowOffset = i.scrollParentNotHidden.offset();
+		}
+	},
+	drag: function( event, ui, i  ) {
+
+		var o = i.options,
+			scrolled = false,
+			scrollParent = i.scrollParentNotHidden[ 0 ],
+			document = i.document[ 0 ];
+
+		if ( scrollParent !== document && scrollParent.tagName !== "HTML" ) {
+			if ( !o.axis || o.axis !== "x" ) {
+				if ( ( i.overflowOffset.top + scrollParent.offsetHeight ) - event.pageY <
+						o.scrollSensitivity ) {
+					scrollParent.scrollTop = scrolled = scrollParent.scrollTop + o.scrollSpeed;
+				} else if ( event.pageY - i.overflowOffset.top < o.scrollSensitivity ) {
+					scrollParent.scrollTop = scrolled = scrollParent.scrollTop - o.scrollSpeed;
+				}
+			}
+
+			if ( !o.axis || o.axis !== "y" ) {
+				if ( ( i.overflowOffset.left + scrollParent.offsetWidth ) - event.pageX <
+						o.scrollSensitivity ) {
+					scrollParent.scrollLeft = scrolled = scrollParent.scrollLeft + o.scrollSpeed;
+				} else if ( event.pageX - i.overflowOffset.left < o.scrollSensitivity ) {
+					scrollParent.scrollLeft = scrolled = scrollParent.scrollLeft - o.scrollSpeed;
+				}
+			}
+
+		} else {
+
+			if ( !o.axis || o.axis !== "x" ) {
+				if ( event.pageY - $( document ).scrollTop() < o.scrollSensitivity ) {
+					scrolled = $( document ).scrollTop( $( document ).scrollTop() - o.scrollSpeed );
+				} else if ( $( window ).height() - ( event.pageY - $( document ).scrollTop() ) <
+						o.scrollSensitivity ) {
+					scrolled = $( document ).scrollTop( $( document ).scrollTop() + o.scrollSpeed );
+				}
+			}
+
+			if ( !o.axis || o.axis !== "y" ) {
+				if ( event.pageX - $( document ).scrollLeft() < o.scrollSensitivity ) {
+					scrolled = $( document ).scrollLeft(
+						$( document ).scrollLeft() - o.scrollSpeed
+					);
+				} else if ( $( window ).width() - ( event.pageX - $( document ).scrollLeft() ) <
+						o.scrollSensitivity ) {
+					scrolled = $( document ).scrollLeft(
+						$( document ).scrollLeft() + o.scrollSpeed
+					);
+				}
+			}
+
+		}
+
+		if ( scrolled !== false && $.ui.ddmanager && !o.dropBehaviour ) {
+			$.ui.ddmanager.prepareOffsets( i, event );
+		}
+
+	}
+} );
+
+$.ui.plugin.add( "draggable", "snap", {
+	start: function( event, ui, i ) {
+
+		var o = i.options;
+
+		i.snapElements = [];
+
+		$( o.snap.constructor !== String ? ( o.snap.items || ":data(ui-draggable)" ) : o.snap )
+			.each( function() {
+				var $t = $( this ),
+					$o = $t.offset();
+				if ( this !== i.element[ 0 ] ) {
+					i.snapElements.push( {
+						item: this,
+						width: $t.outerWidth(), height: $t.outerHeight(),
+						top: $o.top, left: $o.left
+					} );
+				}
+			} );
+
+	},
+	drag: function( event, ui, inst ) {
+
+		var ts, bs, ls, rs, l, r, t, b, i, first,
+			o = inst.options,
+			d = o.snapTolerance,
+			x1 = ui.offset.left, x2 = x1 + inst.helperProportions.width,
+			y1 = ui.offset.top, y2 = y1 + inst.helperProportions.height;
+
+		for ( i = inst.snapElements.length - 1; i >= 0; i-- ) {
+
+			l = inst.snapElements[ i ].left - inst.margins.left;
+			r = l + inst.snapElements[ i ].width;
+			t = inst.snapElements[ i ].top - inst.margins.top;
+			b = t + inst.snapElements[ i ].height;
+
+			if ( x2 < l - d || x1 > r + d || y2 < t - d || y1 > b + d ||
+					!$.contains( inst.snapElements[ i ].item.ownerDocument,
+					inst.snapElements[ i ].item ) ) {
+				if ( inst.snapElements[ i ].snapping ) {
+					( inst.options.snap.release &&
+						inst.options.snap.release.call(
+							inst.element,
+							event,
+							$.extend( inst._uiHash(), { snapItem: inst.snapElements[ i ].item } )
+						) );
+				}
+				inst.snapElements[ i ].snapping = false;
+				continue;
+			}
+
+			if ( o.snapMode !== "inner" ) {
+				ts = Math.abs( t - y2 ) <= d;
+				bs = Math.abs( b - y1 ) <= d;
+				ls = Math.abs( l - x2 ) <= d;
+				rs = Math.abs( r - x1 ) <= d;
+				if ( ts ) {
+					ui.position.top = inst._convertPositionTo( "relative", {
+						top: t - inst.helperProportions.height,
+						left: 0
+					} ).top;
+				}
+				if ( bs ) {
+					ui.position.top = inst._convertPositionTo( "relative", {
+						top: b,
+						left: 0
+					} ).top;
+				}
+				if ( ls ) {
+					ui.position.left = inst._convertPositionTo( "relative", {
+						top: 0,
+						left: l - inst.helperProportions.width
+					} ).left;
+				}
+				if ( rs ) {
+					ui.position.left = inst._convertPositionTo( "relative", {
+						top: 0,
+						left: r
+					} ).left;
+				}
+			}
+
+			first = ( ts || bs || ls || rs );
+
+			if ( o.snapMode !== "outer" ) {
+				ts = Math.abs( t - y1 ) <= d;
+				bs = Math.abs( b - y2 ) <= d;
+				ls = Math.abs( l - x1 ) <= d;
+				rs = Math.abs( r - x2 ) <= d;
+				if ( ts ) {
+					ui.position.top = inst._convertPositionTo( "relative", {
+						top: t,
+						left: 0
+					} ).top;
+				}
+				if ( bs ) {
+					ui.position.top = inst._convertPositionTo( "relative", {
+						top: b - inst.helperProportions.height,
+						left: 0
+					} ).top;
+				}
+				if ( ls ) {
+					ui.position.left = inst._convertPositionTo( "relative", {
+						top: 0,
+						left: l
+					} ).left;
+				}
+				if ( rs ) {
+					ui.position.left = inst._convertPositionTo( "relative", {
+						top: 0,
+						left: r - inst.helperProportions.width
+					} ).left;
+				}
+			}
+
+			if ( !inst.snapElements[ i ].snapping && ( ts || bs || ls || rs || first ) ) {
+				( inst.options.snap.snap &&
+					inst.options.snap.snap.call(
+						inst.element,
+						event,
+						$.extend( inst._uiHash(), {
+							snapItem: inst.snapElements[ i ].item
+						} ) ) );
+			}
+			inst.snapElements[ i ].snapping = ( ts || bs || ls || rs || first );
+
+		}
+
+	}
+} );
+
+$.ui.plugin.add( "draggable", "stack", {
+	start: function( event, ui, instance ) {
+		var min,
+			o = instance.options,
+			group = $.makeArray( $( o.stack ) ).sort( function( a, b ) {
+				return ( parseInt( $( a ).css( "zIndex" ), 10 ) || 0 ) -
+					( parseInt( $( b ).css( "zIndex" ), 10 ) || 0 );
+			} );
+
+		if ( !group.length ) { return; }
+
+		min = parseInt( $( group[ 0 ] ).css( "zIndex" ), 10 ) || 0;
+		$( group ).each( function( i ) {
+			$( this ).css( "zIndex", min + i );
+		} );
+		this.css( "zIndex", ( min + group.length ) );
+	}
+} );
+
+$.ui.plugin.add( "draggable", "zIndex", {
+	start: function( event, ui, instance ) {
+		var t = $( ui.helper ),
+			o = instance.options;
+
+		if ( t.css( "zIndex" ) ) {
+			o._zIndex = t.css( "zIndex" );
+		}
+		t.css( "zIndex", o.zIndex );
+	},
+	stop: function( event, ui, instance ) {
+		var o = instance.options;
+
+		if ( o._zIndex ) {
+			$( ui.helper ).css( "zIndex", o._zIndex );
+		}
+	}
+} );
+
+var widgetsDraggable = $.ui.draggable;
+
+
+/*!
+ * jQuery UI Resizable 1.12.1
+ * http://jqueryui.com
+ *
+ * Copyright jQuery Foundation and other contributors
+ * Released under the MIT license.
+ * http://jquery.org/license
+ */
+
+//>>label: Resizable
+//>>group: Interactions
+//>>description: Enables resize functionality for any element.
+//>>docs: http://api.jqueryui.com/resizable/
+//>>demos: http://jqueryui.com/resizable/
+//>>css.structure: ../../themes/base/core.css
+//>>css.structure: ../../themes/base/resizable.css
+//>>css.theme: ../../themes/base/theme.css
+
+
+
+$.widget( "ui.resizable", $.ui.mouse, {
+	version: "1.12.1",
+	widgetEventPrefix: "resize",
+	options: {
+		alsoResize: false,
+		animate: false,
+		animateDuration: "slow",
+		animateEasing: "swing",
+		aspectRatio: false,
+		autoHide: false,
+		classes: {
+			"ui-resizable-se": "ui-icon ui-icon-gripsmall-diagonal-se"
+		},
+		containment: false,
+		ghost: false,
+		grid: false,
+		handles: "e,s,se",
+		helper: false,
+		maxHeight: null,
+		maxWidth: null,
+		minHeight: 10,
+		minWidth: 10,
+
+		// See #7960
+		zIndex: 90,
+
+		// Callbacks
+		resize: null,
+		start: null,
+		stop: null
+	},
+
+	_num: function( value ) {
+		return parseFloat( value ) || 0;
+	},
+
+	_isNumber: function( value ) {
+		return !isNaN( parseFloat( value ) );
+	},
+
+	_hasScroll: function( el, a ) {
+
+		if ( $( el ).css( "overflow" ) === "hidden" ) {
+			return false;
+		}
+
+		var scroll = ( a && a === "left" ) ? "scrollLeft" : "scrollTop",
+			has = false;
+
+		if ( el[ scroll ] > 0 ) {
+			return true;
+		}
+
+		// TODO: determine which cases actually cause this to happen
+		// if the element doesn't have the scroll set, see if it's possible to
+		// set the scroll
+		el[ scroll ] = 1;
+		has = ( el[ scroll ] > 0 );
+		el[ scroll ] = 0;
+		return has;
+	},
+
+	_create: function() {
+
+		var margins,
+			o = this.options,
+			that = this;
+		this._addClass( "ui-resizable" );
+
+		$.extend( this, {
+			_aspectRatio: !!( o.aspectRatio ),
+			aspectRatio: o.aspectRatio,
+			originalElement: this.element,
+			_proportionallyResizeElements: [],
+			_helper: o.helper || o.ghost || o.animate ? o.helper || "ui-resizable-helper" : null
+		} );
+
+		// Wrap the element if it cannot hold child nodes
+		if ( this.element[ 0 ].nodeName.match( /^(canvas|textarea|input|select|button|img)$/i ) ) {
+
+			this.element.wrap(
+				$( "<div class='ui-wrapper' style='overflow: hidden;'></div>" ).css( {
+					position: this.element.css( "position" ),
+					width: this.element.outerWidth(),
+					height: this.element.outerHeight(),
+					top: this.element.css( "top" ),
+					left: this.element.css( "left" )
+				} )
+			);
+
+			this.element = this.element.parent().data(
+				"ui-resizable", this.element.resizable( "instance" )
+			);
+
+			this.elementIsWrapper = true;
+
+			margins = {
+				marginTop: this.originalElement.css( "marginTop" ),
+				marginRight: this.originalElement.css( "marginRight" ),
+				marginBottom: this.originalElement.css( "marginBottom" ),
+				marginLeft: this.originalElement.css( "marginLeft" )
+			};
+
+			this.element.css( margins );
+			this.originalElement.css( "margin", 0 );
+
+			// support: Safari
+			// Prevent Safari textarea resize
+			this.originalResizeStyle = this.originalElement.css( "resize" );
+			this.originalElement.css( "resize", "none" );
+
+			this._proportionallyResizeElements.push( this.originalElement.css( {
+				position: "static",
+				zoom: 1,
+				display: "block"
+			} ) );
+
+			// Support: IE9
+			// avoid IE jump (hard set the margin)
+			this.originalElement.css( margins );
+
+			this._proportionallyResize();
+		}
+
+		this._setupHandles();
+
+		if ( o.autoHide ) {
+			$( this.element )
+				.on( "mouseenter", function() {
+					if ( o.disabled ) {
+						return;
+					}
+					that._removeClass( "ui-resizable-autohide" );
+					that._handles.show();
+				} )
+				.on( "mouseleave", function() {
+					if ( o.disabled ) {
+						return;
+					}
+					if ( !that.resizing ) {
+						that._addClass( "ui-resizable-autohide" );
+						that._handles.hide();
+					}
+				} );
+		}
+
+		this._mouseInit();
+	},
+
+	_destroy: function() {
+
+		this._mouseDestroy();
+
+		var wrapper,
+			_destroy = function( exp ) {
+				$( exp )
+					.removeData( "resizable" )
+					.removeData( "ui-resizable" )
+					.off( ".resizable" )
+					.find( ".ui-resizable-handle" )
+						.remove();
+			};
+
+		// TODO: Unwrap at same DOM position
+		if ( this.elementIsWrapper ) {
+			_destroy( this.element );
+			wrapper = this.element;
+			this.originalElement.css( {
+				position: wrapper.css( "position" ),
+				width: wrapper.outerWidth(),
+				height: wrapper.outerHeight(),
+				top: wrapper.css( "top" ),
+				left: wrapper.css( "left" )
+			} ).insertAfter( wrapper );
+			wrapper.remove();
+		}
+
+		this.originalElement.css( "resize", this.originalResizeStyle );
+		_destroy( this.originalElement );
+
+		return this;
+	},
+
+	_setOption: function( key, value ) {
+		this._super( key, value );
+
+		switch ( key ) {
+		case "handles":
+			this._removeHandles();
+			this._setupHandles();
+			break;
+		default:
+			break;
+		}
+	},
+
+	_setupHandles: function() {
+		var o = this.options, handle, i, n, hname, axis, that = this;
+		this.handles = o.handles ||
+			( !$( ".ui-resizable-handle", this.element ).length ?
+				"e,s,se" : {
+					n: ".ui-resizable-n",
+					e: ".ui-resizable-e",
+					s: ".ui-resizable-s",
+					w: ".ui-resizable-w",
+					se: ".ui-resizable-se",
+					sw: ".ui-resizable-sw",
+					ne: ".ui-resizable-ne",
+					nw: ".ui-resizable-nw"
+				} );
+
+		this._handles = $();
+		if ( this.handles.constructor === String ) {
+
+			if ( this.handles === "all" ) {
+				this.handles = "n,e,s,w,se,sw,ne,nw";
+			}
+
+			n = this.handles.split( "," );
+			this.handles = {};
+
+			for ( i = 0; i < n.length; i++ ) {
+
+				handle = $.trim( n[ i ] );
+				hname = "ui-resizable-" + handle;
+				axis = $( "<div>" );
+				this._addClass( axis, "ui-resizable-handle " + hname );
+
+				axis.css( { zIndex: o.zIndex } );
+
+				this.handles[ handle ] = ".ui-resizable-" + handle;
+				this.element.append( axis );
+			}
+
+		}
+
+		this._renderAxis = function( target ) {
+
+			var i, axis, padPos, padWrapper;
+
+			target = target || this.element;
+
+			for ( i in this.handles ) {
+
+				if ( this.handles[ i ].constructor === String ) {
+					this.handles[ i ] = this.element.children( this.handles[ i ] ).first().show();
+				} else if ( this.handles[ i ].jquery || this.handles[ i ].nodeType ) {
+					this.handles[ i ] = $( this.handles[ i ] );
+					this._on( this.handles[ i ], { "mousedown": that._mouseDown } );
+				}
+
+				if ( this.elementIsWrapper &&
+						this.originalElement[ 0 ]
+							.nodeName
+							.match( /^(textarea|input|select|button)$/i ) ) {
+					axis = $( this.handles[ i ], this.element );
+
+					padWrapper = /sw|ne|nw|se|n|s/.test( i ) ?
+						axis.outerHeight() :
+						axis.outerWidth();
+
+					padPos = [ "padding",
+						/ne|nw|n/.test( i ) ? "Top" :
+						/se|sw|s/.test( i ) ? "Bottom" :
+						/^e$/.test( i ) ? "Right" : "Left" ].join( "" );
+
+					target.css( padPos, padWrapper );
+
+					this._proportionallyResize();
+				}
+
+				this._handles = this._handles.add( this.handles[ i ] );
+			}
+		};
+
+		// TODO: make renderAxis a prototype function
+		this._renderAxis( this.element );
+
+		this._handles = this._handles.add( this.element.find( ".ui-resizable-handle" ) );
+		this._handles.disableSelection();
+
+		this._handles.on( "mouseover", function() {
+			if ( !that.resizing ) {
+				if ( this.className ) {
+					axis = this.className.match( /ui-resizable-(se|sw|ne|nw|n|e|s|w)/i );
+				}
+				that.axis = axis && axis[ 1 ] ? axis[ 1 ] : "se";
+			}
+		} );
+
+		if ( o.autoHide ) {
+			this._handles.hide();
+			this._addClass( "ui-resizable-autohide" );
+		}
+	},
+
+	_removeHandles: function() {
+		this._handles.remove();
+	},
+
+	_mouseCapture: function( event ) {
+		var i, handle,
+			capture = false;
+
+		for ( i in this.handles ) {
+			handle = $( this.handles[ i ] )[ 0 ];
+			if ( handle === event.target || $.contains( handle, event.target ) ) {
+				capture = true;
+			}
+		}
+
+		return !this.options.disabled && capture;
+	},
+
+	_mouseStart: function( event ) {
+
+		var curleft, curtop, cursor,
+			o = this.options,
+			el = this.element;
+
+		this.resizing = true;
+
+		this._renderProxy();
+
+		curleft = this._num( this.helper.css( "left" ) );
+		curtop = this._num( this.helper.css( "top" ) );
+
+		if ( o.containment ) {
+			curleft += $( o.containment ).scrollLeft() || 0;
+			curtop += $( o.containment ).scrollTop() || 0;
+		}
+
+		this.offset = this.helper.offset();
+		this.position = { left: curleft, top: curtop };
+
+		this.size = this._helper ? {
+				width: this.helper.width(),
+				height: this.helper.height()
+			} : {
+				width: el.width(),
+				height: el.height()
+			};
+
+		this.originalSize = this._helper ? {
+				width: el.outerWidth(),
+				height: el.outerHeight()
+			} : {
+				width: el.width(),
+				height: el.height()
+			};
+
+		this.sizeDiff = {
+			width: el.outerWidth() - el.width(),
+			height: el.outerHeight() - el.height()
+		};
+
+		this.originalPosition = { left: curleft, top: curtop };
+		this.originalMousePosition = { left: event.pageX, top: event.pageY };
+
+		this.aspectRatio = ( typeof o.aspectRatio === "number" ) ?
+			o.aspectRatio :
+			( ( this.originalSize.width / this.originalSize.height ) || 1 );
+
+		cursor = $( ".ui-resizable-" + this.axis ).css( "cursor" );
+		$( "body" ).css( "cursor", cursor === "auto" ? this.axis + "-resize" : cursor );
+
+		this._addClass( "ui-resizable-resizing" );
+		this._propagate( "start", event );
+		return true;
+	},
+
+	_mouseDrag: function( event ) {
+
+		var data, props,
+			smp = this.originalMousePosition,
+			a = this.axis,
+			dx = ( event.pageX - smp.left ) || 0,
+			dy = ( event.pageY - smp.top ) || 0,
+			trigger = this._change[ a ];
+
+		this._updatePrevProperties();
+
+		if ( !trigger ) {
+			return false;
+		}
+
+		data = trigger.apply( this, [ event, dx, dy ] );
+
+		this._updateVirtualBoundaries( event.shiftKey );
+		if ( this._aspectRatio || event.shiftKey ) {
+			data = this._updateRatio( data, event );
+		}
+
+		data = this._respectSize( data, event );
+
+		this._updateCache( data );
+
+		this._propagate( "resize", event );
+
+		props = this._applyChanges();
+
+		if ( !this._helper && this._proportionallyResizeElements.length ) {
+			this._proportionallyResize();
+		}
+
+		if ( !$.isEmptyObject( props ) ) {
+			this._updatePrevProperties();
+			this._trigger( "resize", event, this.ui() );
+			this._applyChanges();
+		}
+
+		return false;
+	},
+
+	_mouseStop: function( event ) {
+
+		this.resizing = false;
+		var pr, ista, soffseth, soffsetw, s, left, top,
+			o = this.options, that = this;
+
+		if ( this._helper ) {
+
+			pr = this._proportionallyResizeElements;
+			ista = pr.length && ( /textarea/i ).test( pr[ 0 ].nodeName );
+			soffseth = ista && this._hasScroll( pr[ 0 ], "left" ) ? 0 : that.sizeDiff.height;
+			soffsetw = ista ? 0 : that.sizeDiff.width;
+
+			s = {
+				width: ( that.helper.width()  - soffsetw ),
+				height: ( that.helper.height() - soffseth )
+			};
+			left = ( parseFloat( that.element.css( "left" ) ) +
+				( that.position.left - that.originalPosition.left ) ) || null;
+			top = ( parseFloat( that.element.css( "top" ) ) +
+				( that.position.top - that.originalPosition.top ) ) || null;
+
+			if ( !o.animate ) {
+				this.element.css( $.extend( s, { top: top, left: left } ) );
+			}
+
+			that.helper.height( that.size.height );
+			that.helper.width( that.size.width );
+
+			if ( this._helper && !o.animate ) {
+				this._proportionallyResize();
+			}
+		}
+
+		$( "body" ).css( "cursor", "auto" );
+
+		this._removeClass( "ui-resizable-resizing" );
+
+		this._propagate( "stop", event );
+
+		if ( this._helper ) {
+			this.helper.remove();
+		}
+
+		return false;
+
+	},
+
+	_updatePrevProperties: function() {
+		this.prevPosition = {
+			top: this.position.top,
+			left: this.position.left
+		};
+		this.prevSize = {
+			width: this.size.width,
+			height: this.size.height
+		};
+	},
+
+	_applyChanges: function() {
+		var props = {};
+
+		if ( this.position.top !== this.prevPosition.top ) {
+			props.top = this.position.top + "px";
+		}
+		if ( this.position.left !== this.prevPosition.left ) {
+			props.left = this.position.left + "px";
+		}
+		if ( this.size.width !== this.prevSize.width ) {
+			props.width = this.size.width + "px";
+		}
+		if ( this.size.height !== this.prevSize.height ) {
+			props.height = this.size.height + "px";
+		}
+
+		this.helper.css( props );
+
+		return props;
+	},
+
+	_updateVirtualBoundaries: function( forceAspectRatio ) {
+		var pMinWidth, pMaxWidth, pMinHeight, pMaxHeight, b,
+			o = this.options;
+
+		b = {
+			minWidth: this._isNumber( o.minWidth ) ? o.minWidth : 0,
+			maxWidth: this._isNumber( o.maxWidth ) ? o.maxWidth : Infinity,
+			minHeight: this._isNumber( o.minHeight ) ? o.minHeight : 0,
+			maxHeight: this._isNumber( o.maxHeight ) ? o.maxHeight : Infinity
+		};
+
+		if ( this._aspectRatio || forceAspectRatio ) {
+			pMinWidth = b.minHeight * this.aspectRatio;
+			pMinHeight = b.minWidth / this.aspectRatio;
+			pMaxWidth = b.maxHeight * this.aspectRatio;
+			pMaxHeight = b.maxWidth / this.aspectRatio;
+
+			if ( pMinWidth > b.minWidth ) {
+				b.minWidth = pMinWidth;
+			}
+			if ( pMinHeight > b.minHeight ) {
+				b.minHeight = pMinHeight;
+			}
+			if ( pMaxWidth < b.maxWidth ) {
+				b.maxWidth = pMaxWidth;
+			}
+			if ( pMaxHeight < b.maxHeight ) {
+				b.maxHeight = pMaxHeight;
+			}
+		}
+		this._vBoundaries = b;
+	},
+
+	_updateCache: function( data ) {
+		this.offset = this.helper.offset();
+		if ( this._isNumber( data.left ) ) {
+			this.position.left = data.left;
+		}
+		if ( this._isNumber( data.top ) ) {
+			this.position.top = data.top;
+		}
+		if ( this._isNumber( data.height ) ) {
+			this.size.height = data.height;
+		}
+		if ( this._isNumber( data.width ) ) {
+			this.size.width = data.width;
+		}
+	},
+
+	_updateRatio: function( data ) {
+
+		var cpos = this.position,
+			csize = this.size,
+			a = this.axis;
+
+		if ( this._isNumber( data.height ) ) {
+			data.width = ( data.height * this.aspectRatio );
+		} else if ( this._isNumber( data.width ) ) {
+			data.height = ( data.width / this.aspectRatio );
+		}
+
+		if ( a === "sw" ) {
+			data.left = cpos.left + ( csize.width - data.width );
+			data.top = null;
+		}
+		if ( a === "nw" ) {
+			data.top = cpos.top + ( csize.height - data.height );
+			data.left = cpos.left + ( csize.width - data.width );
+		}
+
+		return data;
+	},
+
+	_respectSize: function( data ) {
+
+		var o = this._vBoundaries,
+			a = this.axis,
+			ismaxw = this._isNumber( data.width ) && o.maxWidth && ( o.maxWidth < data.width ),
+			ismaxh = this._isNumber( data.height ) && o.maxHeight && ( o.maxHeight < data.height ),
+			isminw = this._isNumber( data.width ) && o.minWidth && ( o.minWidth > data.width ),
+			isminh = this._isNumber( data.height ) && o.minHeight && ( o.minHeight > data.height ),
+			dw = this.originalPosition.left + this.originalSize.width,
+			dh = this.originalPosition.top + this.originalSize.height,
+			cw = /sw|nw|w/.test( a ), ch = /nw|ne|n/.test( a );
+		if ( isminw ) {
+			data.width = o.minWidth;
+		}
+		if ( isminh ) {
+			data.height = o.minHeight;
+		}
+		if ( ismaxw ) {
+			data.width = o.maxWidth;
+		}
+		if ( ismaxh ) {
+			data.height = o.maxHeight;
+		}
+
+		if ( isminw && cw ) {
+			data.left = dw - o.minWidth;
+		}
+		if ( ismaxw && cw ) {
+			data.left = dw - o.maxWidth;
+		}
+		if ( isminh && ch ) {
+			data.top = dh - o.minHeight;
+		}
+		if ( ismaxh && ch ) {
+			data.top = dh - o.maxHeight;
+		}
+
+		// Fixing jump error on top/left - bug #2330
+		if ( !data.width && !data.height && !data.left && data.top ) {
+			data.top = null;
+		} else if ( !data.width && !data.height && !data.top && data.left ) {
+			data.left = null;
+		}
+
+		return data;
+	},
+
+	_getPaddingPlusBorderDimensions: function( element ) {
+		var i = 0,
+			widths = [],
+			borders = [
+				element.css( "borderTopWidth" ),
+				element.css( "borderRightWidth" ),
+				element.css( "borderBottomWidth" ),
+				element.css( "borderLeftWidth" )
+			],
+			paddings = [
+				element.css( "paddingTop" ),
+				element.css( "paddingRight" ),
+				element.css( "paddingBottom" ),
+				element.css( "paddingLeft" )
+			];
+
+		for ( ; i < 4; i++ ) {
+			widths[ i ] = ( parseFloat( borders[ i ] ) || 0 );
+			widths[ i ] += ( parseFloat( paddings[ i ] ) || 0 );
+		}
+
+		return {
+			height: widths[ 0 ] + widths[ 2 ],
+			width: widths[ 1 ] + widths[ 3 ]
+		};
+	},
+
+	_proportionallyResize: function() {
+
+		if ( !this._proportionallyResizeElements.length ) {
+			return;
+		}
+
+		var prel,
+			i = 0,
+			element = this.helper || this.element;
+
+		for ( ; i < this._proportionallyResizeElements.length; i++ ) {
+
+			prel = this._proportionallyResizeElements[ i ];
+
+			// TODO: Seems like a bug to cache this.outerDimensions
+			// considering that we are in a loop.
+			if ( !this.outerDimensions ) {
+				this.outerDimensions = this._getPaddingPlusBorderDimensions( prel );
+			}
+
+			prel.css( {
+				height: ( element.height() - this.outerDimensions.height ) || 0,
+				width: ( element.width() - this.outerDimensions.width ) || 0
+			} );
+
+		}
+
+	},
+
+	_renderProxy: function() {
+
+		var el = this.element, o = this.options;
+		this.elementOffset = el.offset();
+
+		if ( this._helper ) {
+
+			this.helper = this.helper || $( "<div style='overflow:hidden;'></div>" );
+
+			this._addClass( this.helper, this._helper );
+			this.helper.css( {
+				width: this.element.outerWidth(),
+				height: this.element.outerHeight(),
+				position: "absolute",
+				left: this.elementOffset.left + "px",
+				top: this.elementOffset.top + "px",
+				zIndex: ++o.zIndex //TODO: Don't modify option
+			} );
+
+			this.helper
+				.appendTo( "body" )
+				.disableSelection();
+
+		} else {
+			this.helper = this.element;
+		}
+
+	},
+
+	_change: {
+		e: function( event, dx ) {
+			return { width: this.originalSize.width + dx };
+		},
+		w: function( event, dx ) {
+			var cs = this.originalSize, sp = this.originalPosition;
+			return { left: sp.left + dx, width: cs.width - dx };
+		},
+		n: function( event, dx, dy ) {
+			var cs = this.originalSize, sp = this.originalPosition;
+			return { top: sp.top + dy, height: cs.height - dy };
+		},
+		s: function( event, dx, dy ) {
+			return { height: this.originalSize.height + dy };
+		},
+		se: function( event, dx, dy ) {
+			return $.extend( this._change.s.apply( this, arguments ),
+				this._change.e.apply( this, [ event, dx, dy ] ) );
+		},
+		sw: function( event, dx, dy ) {
+			return $.extend( this._change.s.apply( this, arguments ),
+				this._change.w.apply( this, [ event, dx, dy ] ) );
+		},
+		ne: function( event, dx, dy ) {
+			return $.extend( this._change.n.apply( this, arguments ),
+				this._change.e.apply( this, [ event, dx, dy ] ) );
+		},
+		nw: function( event, dx, dy ) {
+			return $.extend( this._change.n.apply( this, arguments ),
+				this._change.w.apply( this, [ event, dx, dy ] ) );
+		}
+	},
+
+	_propagate: function( n, event ) {
+		$.ui.plugin.call( this, n, [ event, this.ui() ] );
+		( n !== "resize" && this._trigger( n, event, this.ui() ) );
+	},
+
+	plugins: {},
+
+	ui: function() {
+		return {
+			originalElement: this.originalElement,
+			element: this.element,
+			helper: this.helper,
+			position: this.position,
+			size: this.size,
+			originalSize: this.originalSize,
+			originalPosition: this.originalPosition
+		};
+	}
+
+} );
+
+/*
+ * Resizable Extensions
+ */
+
+$.ui.plugin.add( "resizable", "animate", {
+
+	stop: function( event ) {
+		var that = $( this ).resizable( "instance" ),
+			o = that.options,
+			pr = that._proportionallyResizeElements,
+			ista = pr.length && ( /textarea/i ).test( pr[ 0 ].nodeName ),
+			soffseth = ista && that._hasScroll( pr[ 0 ], "left" ) ? 0 : that.sizeDiff.height,
+			soffsetw = ista ? 0 : that.sizeDiff.width,
+			style = {
+				width: ( that.size.width - soffsetw ),
+				height: ( that.size.height - soffseth )
+			},
+			left = ( parseFloat( that.element.css( "left" ) ) +
+				( that.position.left - that.originalPosition.left ) ) || null,
+			top = ( parseFloat( that.element.css( "top" ) ) +
+				( that.position.top - that.originalPosition.top ) ) || null;
+
+		that.element.animate(
+			$.extend( style, top && left ? { top: top, left: left } : {} ), {
+				duration: o.animateDuration,
+				easing: o.animateEasing,
+				step: function() {
+
+					var data = {
+						width: parseFloat( that.element.css( "width" ) ),
+						height: parseFloat( that.element.css( "height" ) ),
+						top: parseFloat( that.element.css( "top" ) ),
+						left: parseFloat( that.element.css( "left" ) )
+					};
+
+					if ( pr && pr.length ) {
+						$( pr[ 0 ] ).css( { width: data.width, height: data.height } );
+					}
+
+					// Propagating resize, and updating values for each animation step
+					that._updateCache( data );
+					that._propagate( "resize", event );
+
+				}
+			}
+		);
+	}
+
+} );
+
+$.ui.plugin.add( "resizable", "containment", {
+
+	start: function() {
+		var element, p, co, ch, cw, width, height,
+			that = $( this ).resizable( "instance" ),
+			o = that.options,
+			el = that.element,
+			oc = o.containment,
+			ce = ( oc instanceof $ ) ?
+				oc.get( 0 ) :
+				( /parent/.test( oc ) ) ? el.parent().get( 0 ) : oc;
+
+		if ( !ce ) {
+			return;
+		}
+
+		that.containerElement = $( ce );
+
+		if ( /document/.test( oc ) || oc === document ) {
+			that.containerOffset = {
+				left: 0,
+				top: 0
+			};
+			that.containerPosition = {
+				left: 0,
+				top: 0
+			};
+
+			that.parentData = {
+				element: $( document ),
+				left: 0,
+				top: 0,
+				width: $( document ).width(),
+				height: $( document ).height() || document.body.parentNode.scrollHeight
+			};
+		} else {
+			element = $( ce );
+			p = [];
+			$( [ "Top", "Right", "Left", "Bottom" ] ).each( function( i, name ) {
+				p[ i ] = that._num( element.css( "padding" + name ) );
+			} );
+
+			that.containerOffset = element.offset();
+			that.containerPosition = element.position();
+			that.containerSize = {
+				height: ( element.innerHeight() - p[ 3 ] ),
+				width: ( element.innerWidth() - p[ 1 ] )
+			};
+
+			co = that.containerOffset;
+			ch = that.containerSize.height;
+			cw = that.containerSize.width;
+			width = ( that._hasScroll ( ce, "left" ) ? ce.scrollWidth : cw );
+			height = ( that._hasScroll ( ce ) ? ce.scrollHeight : ch ) ;
+
+			that.parentData = {
+				element: ce,
+				left: co.left,
+				top: co.top,
+				width: width,
+				height: height
+			};
+		}
+	},
+
+	resize: function( event ) {
+		var woset, hoset, isParent, isOffsetRelative,
+			that = $( this ).resizable( "instance" ),
+			o = that.options,
+			co = that.containerOffset,
+			cp = that.position,
+			pRatio = that._aspectRatio || event.shiftKey,
+			cop = {
+				top: 0,
+				left: 0
+			},
+			ce = that.containerElement,
+			continueResize = true;
+
+		if ( ce[ 0 ] !== document && ( /static/ ).test( ce.css( "position" ) ) ) {
+			cop = co;
+		}
+
+		if ( cp.left < ( that._helper ? co.left : 0 ) ) {
+			that.size.width = that.size.width +
+				( that._helper ?
+					( that.position.left - co.left ) :
+					( that.position.left - cop.left ) );
+
+			if ( pRatio ) {
+				that.size.height = that.size.width / that.aspectRatio;
+				continueResize = false;
+			}
+			that.position.left = o.helper ? co.left : 0;
+		}
+
+		if ( cp.top < ( that._helper ? co.top : 0 ) ) {
+			that.size.height = that.size.height +
+				( that._helper ?
+					( that.position.top - co.top ) :
+					that.position.top );
+
+			if ( pRatio ) {
+				that.size.width = that.size.height * that.aspectRatio;
+				continueResize = false;
+			}
+			that.position.top = that._helper ? co.top : 0;
+		}
+
+		isParent = that.containerElement.get( 0 ) === that.element.parent().get( 0 );
+		isOffsetRelative = /relative|absolute/.test( that.containerElement.css( "position" ) );
+
+		if ( isParent && isOffsetRelative ) {
+			that.offset.left = that.parentData.left + that.position.left;
+			that.offset.top = that.parentData.top + that.position.top;
+		} else {
+			that.offset.left = that.element.offset().left;
+			that.offset.top = that.element.offset().top;
+		}
+
+		woset = Math.abs( that.sizeDiff.width +
+			( that._helper ?
+				that.offset.left - cop.left :
+				( that.offset.left - co.left ) ) );
+
+		hoset = Math.abs( that.sizeDiff.height +
+			( that._helper ?
+				that.offset.top - cop.top :
+				( that.offset.top - co.top ) ) );
+
+		if ( woset + that.size.width >= that.parentData.width ) {
+			that.size.width = that.parentData.width - woset;
+			if ( pRatio ) {
+				that.size.height = that.size.width / that.aspectRatio;
+				continueResize = false;
+			}
+		}
+
+		if ( hoset + that.size.height >= that.parentData.height ) {
+			that.size.height = that.parentData.height - hoset;
+			if ( pRatio ) {
+				that.size.width = that.size.height * that.aspectRatio;
+				continueResize = false;
+			}
+		}
+
+		if ( !continueResize ) {
+			that.position.left = that.prevPosition.left;
+			that.position.top = that.prevPosition.top;
+			that.size.width = that.prevSize.width;
+			that.size.height = that.prevSize.height;
+		}
+	},
+
+	stop: function() {
+		var that = $( this ).resizable( "instance" ),
+			o = that.options,
+			co = that.containerOffset,
+			cop = that.containerPosition,
+			ce = that.containerElement,
+			helper = $( that.helper ),
+			ho = helper.offset(),
+			w = helper.outerWidth() - that.sizeDiff.width,
+			h = helper.outerHeight() - that.sizeDiff.height;
+
+		if ( that._helper && !o.animate && ( /relative/ ).test( ce.css( "position" ) ) ) {
+			$( this ).css( {
+				left: ho.left - cop.left - co.left,
+				width: w,
+				height: h
+			} );
+		}
+
+		if ( that._helper && !o.animate && ( /static/ ).test( ce.css( "position" ) ) ) {
+			$( this ).css( {
+				left: ho.left - cop.left - co.left,
+				width: w,
+				height: h
+			} );
+		}
+	}
+} );
+
+$.ui.plugin.add( "resizable", "alsoResize", {
+
+	start: function() {
+		var that = $( this ).resizable( "instance" ),
+			o = that.options;
+
+		$( o.alsoResize ).each( function() {
+			var el = $( this );
+			el.data( "ui-resizable-alsoresize", {
+				width: parseFloat( el.width() ), height: parseFloat( el.height() ),
+				left: parseFloat( el.css( "left" ) ), top: parseFloat( el.css( "top" ) )
+			} );
+		} );
+	},
+
+	resize: function( event, ui ) {
+		var that = $( this ).resizable( "instance" ),
+			o = that.options,
+			os = that.originalSize,
+			op = that.originalPosition,
+			delta = {
+				height: ( that.size.height - os.height ) || 0,
+				width: ( that.size.width - os.width ) || 0,
+				top: ( that.position.top - op.top ) || 0,
+				left: ( that.position.left - op.left ) || 0
+			};
+
+			$( o.alsoResize ).each( function() {
+				var el = $( this ), start = $( this ).data( "ui-resizable-alsoresize" ), style = {},
+					css = el.parents( ui.originalElement[ 0 ] ).length ?
+							[ "width", "height" ] :
+							[ "width", "height", "top", "left" ];
+
+				$.each( css, function( i, prop ) {
+					var sum = ( start[ prop ] || 0 ) + ( delta[ prop ] || 0 );
+					if ( sum && sum >= 0 ) {
+						style[ prop ] = sum || null;
+					}
+				} );
+
+				el.css( style );
+			} );
+	},
+
+	stop: function() {
+		$( this ).removeData( "ui-resizable-alsoresize" );
+	}
+} );
+
+$.ui.plugin.add( "resizable", "ghost", {
+
+	start: function() {
+
+		var that = $( this ).resizable( "instance" ), cs = that.size;
+
+		that.ghost = that.originalElement.clone();
+		that.ghost.css( {
+			opacity: 0.25,
+			display: "block",
+			position: "relative",
+			height: cs.height,
+			width: cs.width,
+			margin: 0,
+			left: 0,
+			top: 0
+		} );
+
+		that._addClass( that.ghost, "ui-resizable-ghost" );
+
+		// DEPRECATED
+		// TODO: remove after 1.12
+		if ( $.uiBackCompat !== false && typeof that.options.ghost === "string" ) {
+
+			// Ghost option
+			that.ghost.addClass( this.options.ghost );
+		}
+
+		that.ghost.appendTo( that.helper );
+
+	},
+
+	resize: function() {
+		var that = $( this ).resizable( "instance" );
+		if ( that.ghost ) {
+			that.ghost.css( {
+				position: "relative",
+				height: that.size.height,
+				width: that.size.width
+			} );
+		}
+	},
+
+	stop: function() {
+		var that = $( this ).resizable( "instance" );
+		if ( that.ghost && that.helper ) {
+			that.helper.get( 0 ).removeChild( that.ghost.get( 0 ) );
+		}
+	}
+
+} );
+
+$.ui.plugin.add( "resizable", "grid", {
+
+	resize: function() {
+		var outerDimensions,
+			that = $( this ).resizable( "instance" ),
+			o = that.options,
+			cs = that.size,
+			os = that.originalSize,
+			op = that.originalPosition,
+			a = that.axis,
+			grid = typeof o.grid === "number" ? [ o.grid, o.grid ] : o.grid,
+			gridX = ( grid[ 0 ] || 1 ),
+			gridY = ( grid[ 1 ] || 1 ),
+			ox = Math.round( ( cs.width - os.width ) / gridX ) * gridX,
+			oy = Math.round( ( cs.height - os.height ) / gridY ) * gridY,
+			newWidth = os.width + ox,
+			newHeight = os.height + oy,
+			isMaxWidth = o.maxWidth && ( o.maxWidth < newWidth ),
+			isMaxHeight = o.maxHeight && ( o.maxHeight < newHeight ),
+			isMinWidth = o.minWidth && ( o.minWidth > newWidth ),
+			isMinHeight = o.minHeight && ( o.minHeight > newHeight );
+
+		o.grid = grid;
+
+		if ( isMinWidth ) {
+			newWidth += gridX;
+		}
+		if ( isMinHeight ) {
+			newHeight += gridY;
+		}
+		if ( isMaxWidth ) {
+			newWidth -= gridX;
+		}
+		if ( isMaxHeight ) {
+			newHeight -= gridY;
+		}
+
+		if ( /^(se|s|e)$/.test( a ) ) {
+			that.size.width = newWidth;
+			that.size.height = newHeight;
+		} else if ( /^(ne)$/.test( a ) ) {
+			that.size.width = newWidth;
+			that.size.height = newHeight;
+			that.position.top = op.top - oy;
+		} else if ( /^(sw)$/.test( a ) ) {
+			that.size.width = newWidth;
+			that.size.height = newHeight;
+			that.position.left = op.left - ox;
+		} else {
+			if ( newHeight - gridY <= 0 || newWidth - gridX <= 0 ) {
+				outerDimensions = that._getPaddingPlusBorderDimensions( this );
+			}
+
+			if ( newHeight - gridY > 0 ) {
+				that.size.height = newHeight;
+				that.position.top = op.top - oy;
+			} else {
+				newHeight = gridY - outerDimensions.height;
+				that.size.height = newHeight;
+				that.position.top = op.top + os.height - newHeight;
+			}
+			if ( newWidth - gridX > 0 ) {
+				that.size.width = newWidth;
+				that.position.left = op.left - ox;
+			} else {
+				newWidth = gridX - outerDimensions.width;
+				that.size.width = newWidth;
+				that.position.left = op.left + os.width - newWidth;
+			}
+		}
+	}
+
+} );
+
+var widgetsResizable = $.ui.resizable;
+
+
+/*!
+ * jQuery UI Dialog 1.12.1
+ * http://jqueryui.com
+ *
+ * Copyright jQuery Foundation and other contributors
+ * Released under the MIT license.
+ * http://jquery.org/license
+ */
+
+//>>label: Dialog
+//>>group: Widgets
+//>>description: Displays customizable dialog windows.
+//>>docs: http://api.jqueryui.com/dialog/
+//>>demos: http://jqueryui.com/dialog/
+//>>css.structure: ../../themes/base/core.css
+//>>css.structure: ../../themes/base/dialog.css
+//>>css.theme: ../../themes/base/theme.css
+
+
+
+$.widget( "ui.dialog", {
+	version: "1.12.1",
+	options: {
+		appendTo: "body",
+		autoOpen: true,
+		buttons: [],
+		classes: {
+			"ui-dialog": "ui-corner-all",
+			"ui-dialog-titlebar": "ui-corner-all"
+		},
+		closeOnEscape: true,
+		closeText: "Close",
+		draggable: true,
+		hide: null,
+		height: "auto",
+		maxHeight: null,
+		maxWidth: null,
+		minHeight: 150,
+		minWidth: 150,
+		modal: false,
+		position: {
+			my: "center",
+			at: "center",
+			of: window,
+			collision: "fit",
+
+			// Ensure the titlebar is always visible
+			using: function( pos ) {
+				var topOffset = $( this ).css( pos ).offset().top;
+				if ( topOffset < 0 ) {
+					$( this ).css( "top", pos.top - topOffset );
+				}
+			}
+		},
+		resizable: true,
+		show: null,
+		title: null,
+		width: 300,
+
+		// Callbacks
+		beforeClose: null,
+		close: null,
+		drag: null,
+		dragStart: null,
+		dragStop: null,
+		focus: null,
+		open: null,
+		resize: null,
+		resizeStart: null,
+		resizeStop: null
+	},
+
+	sizeRelatedOptions: {
+		buttons: true,
+		height: true,
+		maxHeight: true,
+		maxWidth: true,
+		minHeight: true,
+		minWidth: true,
+		width: true
+	},
+
+	resizableRelatedOptions: {
+		maxHeight: true,
+		maxWidth: true,
+		minHeight: true,
+		minWidth: true
+	},
+
+	_create: function() {
+		this.originalCss = {
+			display: this.element[ 0 ].style.display,
+			width: this.element[ 0 ].style.width,
+			minHeight: this.element[ 0 ].style.minHeight,
+			maxHeight: this.element[ 0 ].style.maxHeight,
+			height: this.element[ 0 ].style.height
+		};
+		this.originalPosition = {
+			parent: this.element.parent(),
+			index: this.element.parent().children().index( this.element )
+		};
+		this.originalTitle = this.element.attr( "title" );
+		if ( this.options.title == null && this.originalTitle != null ) {
+			this.options.title = this.originalTitle;
+		}
+
+		// Dialogs can't be disabled
+		if ( this.options.disabled ) {
+			this.options.disabled = false;
+		}
+
+		this._createWrapper();
+
+		this.element
+			.show()
+			.removeAttr( "title" )
+			.appendTo( this.uiDialog );
+
+		this._addClass( "ui-dialog-content", "ui-widget-content" );
+
+		this._createTitlebar();
+		this._createButtonPane();
+
+		if ( this.options.draggable && $.fn.draggable ) {
+			this._makeDraggable();
+		}
+		if ( this.options.resizable && $.fn.resizable ) {
+			this._makeResizable();
+		}
+
+		this._isOpen = false;
+
+		this._trackFocus();
+	},
+
+	_init: function() {
+		if ( this.options.autoOpen ) {
+			this.open();
+		}
+	},
+
+	_appendTo: function() {
+		var element = this.options.appendTo;
+		if ( element && ( element.jquery || element.nodeType ) ) {
+			return $( element );
+		}
+		return this.document.find( element || "body" ).eq( 0 );
+	},
+
+	_destroy: function() {
+		var next,
+			originalPosition = this.originalPosition;
+
+		this._untrackInstance();
+		this._destroyOverlay();
+
+		this.element
+			.removeUniqueId()
+			.css( this.originalCss )
+
+			// Without detaching first, the following becomes really slow
+			.detach();
+
+		this.uiDialog.remove();
+
+		if ( this.originalTitle ) {
+			this.element.attr( "title", this.originalTitle );
+		}
+
+		next = originalPosition.parent.children().eq( originalPosition.index );
+
+		// Don't try to place the dialog next to itself (#8613)
+		if ( next.length && next[ 0 ] !== this.element[ 0 ] ) {
+			next.before( this.element );
+		} else {
+			originalPosition.parent.append( this.element );
+		}
+	},
+
+	widget: function() {
+		return this.uiDialog;
+	},
+
+	disable: $.noop,
+	enable: $.noop,
+
+	close: function( event ) {
+		var that = this;
+
+		if ( !this._isOpen || this._trigger( "beforeClose", event ) === false ) {
+			return;
+		}
+
+		this._isOpen = false;
+		this._focusedElement = null;
+		this._destroyOverlay();
+		this._untrackInstance();
+
+		if ( !this.opener.filter( ":focusable" ).trigger( "focus" ).length ) {
+
+			// Hiding a focused element doesn't trigger blur in WebKit
+			// so in case we have nothing to focus on, explicitly blur the active element
+			// https://bugs.webkit.org/show_bug.cgi?id=47182
+			$.ui.safeBlur( $.ui.safeActiveElement( this.document[ 0 ] ) );
+		}
+
+		this._hide( this.uiDialog, this.options.hide, function() {
+			that._trigger( "close", event );
+		} );
+	},
+
+	isOpen: function() {
+		return this._isOpen;
+	},
+
+	moveToTop: function() {
+		this._moveToTop();
+	},
+
+	_moveToTop: function( event, silent ) {
+		var moved = false,
+			zIndices = this.uiDialog.siblings( ".ui-front:visible" ).map( function() {
+				return +$( this ).css( "z-index" );
+			} ).get(),
+			zIndexMax = Math.max.apply( null, zIndices );
+
+		if ( zIndexMax >= +this.uiDialog.css( "z-index" ) ) {
+			this.uiDialog.css( "z-index", zIndexMax + 1 );
+			moved = true;
+		}
+
+		if ( moved && !silent ) {
+			this._trigger( "focus", event );
+		}
+		return moved;
+	},
+
+	open: function() {
+		var that = this;
+		if ( this._isOpen ) {
+			if ( this._moveToTop() ) {
+				this._focusTabbable();
+			}
+			return;
+		}
+
+		this._isOpen = true;
+		this.opener = $( $.ui.safeActiveElement( this.document[ 0 ] ) );
+
+		this._size();
+		this._position();
+		this._createOverlay();
+		this._moveToTop( null, true );
+
+		// Ensure the overlay is moved to the top with the dialog, but only when
+		// opening. The overlay shouldn't move after the dialog is open so that
+		// modeless dialogs opened after the modal dialog stack properly.
+		if ( this.overlay ) {
+			this.overlay.css( "z-index", this.uiDialog.css( "z-index" ) - 1 );
+		}
+
+		this._show( this.uiDialog, this.options.show, function() {
+			that._focusTabbable();
+			that._trigger( "focus" );
+		} );
+
+		// Track the dialog immediately upon openening in case a focus event
+		// somehow occurs outside of the dialog before an element inside the
+		// dialog is focused (#10152)
+		this._makeFocusTarget();
+
+		this._trigger( "open" );
+	},
+
+	_focusTabbable: function() {
+
+		// Set focus to the first match:
+		// 1. An element that was focused previously
+		// 2. First element inside the dialog matching [autofocus]
+		// 3. Tabbable element inside the content element
+		// 4. Tabbable element inside the buttonpane
+		// 5. The close button
+		// 6. The dialog itself
+		var hasFocus = this._focusedElement;
+		if ( !hasFocus ) {
+			hasFocus = this.element.find( "[autofocus]" );
+		}
+		if ( !hasFocus.length ) {
+			hasFocus = this.element.find( ":tabbable" );
+		}
+		if ( !hasFocus.length ) {
+			hasFocus = this.uiDialogButtonPane.find( ":tabbable" );
+		}
+		if ( !hasFocus.length ) {
+			hasFocus = this.uiDialogTitlebarClose.filter( ":tabbable" );
+		}
+		if ( !hasFocus.length ) {
+			hasFocus = this.uiDialog;
+		}
+		hasFocus.eq( 0 ).trigger( "focus" );
+	},
+
+	_keepFocus: function( event ) {
+		function checkFocus() {
+			var activeElement = $.ui.safeActiveElement( this.document[ 0 ] ),
+				isActive = this.uiDialog[ 0 ] === activeElement ||
+					$.contains( this.uiDialog[ 0 ], activeElement );
+			if ( !isActive ) {
+				this._focusTabbable();
+			}
+		}
+		event.preventDefault();
+		checkFocus.call( this );
+
+		// support: IE
+		// IE <= 8 doesn't prevent moving focus even with event.preventDefault()
+		// so we check again later
+		this._delay( checkFocus );
+	},
+
+	_createWrapper: function() {
+		this.uiDialog = $( "<div>" )
+			.hide()
+			.attr( {
+
+				// Setting tabIndex makes the div focusable
+				tabIndex: -1,
+				role: "dialog"
+			} )
+			.appendTo( this._appendTo() );
+
+		this._addClass( this.uiDialog, "ui-dialog", "ui-widget ui-widget-content ui-front" );
+		this._on( this.uiDialog, {
+			keydown: function( event ) {
+				if ( this.options.closeOnEscape && !event.isDefaultPrevented() && event.keyCode &&
+						event.keyCode === $.ui.keyCode.ESCAPE ) {
+					event.preventDefault();
+					this.close( event );
+					return;
+				}
+
+				// Prevent tabbing out of dialogs
+				if ( event.keyCode !== $.ui.keyCode.TAB || event.isDefaultPrevented() ) {
+					return;
+				}
+				var tabbables = this.uiDialog.find( ":tabbable" ),
+					first = tabbables.filter( ":first" ),
+					last = tabbables.filter( ":last" );
+
+				if ( ( event.target === last[ 0 ] || event.target === this.uiDialog[ 0 ] ) &&
+						!event.shiftKey ) {
+					this._delay( function() {
+						first.trigger( "focus" );
+					} );
+					event.preventDefault();
+				} else if ( ( event.target === first[ 0 ] ||
+						event.target === this.uiDialog[ 0 ] ) && event.shiftKey ) {
+					this._delay( function() {
+						last.trigger( "focus" );
+					} );
+					event.preventDefault();
+				}
+			},
+			mousedown: function( event ) {
+				if ( this._moveToTop( event ) ) {
+					this._focusTabbable();
+				}
+			}
+		} );
+
+		// We assume that any existing aria-describedby attribute means
+		// that the dialog content is marked up properly
+		// otherwise we brute force the content as the description
+		if ( !this.element.find( "[aria-describedby]" ).length ) {
+			this.uiDialog.attr( {
+				"aria-describedby": this.element.uniqueId().attr( "id" )
+			} );
+		}
+	},
+
+	_createTitlebar: function() {
+		var uiDialogTitle;
+
+		this.uiDialogTitlebar = $( "<div>" );
+		this._addClass( this.uiDialogTitlebar,
+			"ui-dialog-titlebar", "ui-widget-header ui-helper-clearfix" );
+		this._on( this.uiDialogTitlebar, {
+			mousedown: function( event ) {
+
+				// Don't prevent click on close button (#8838)
+				// Focusing a dialog that is partially scrolled out of view
+				// causes the browser to scroll it into view, preventing the click event
+				if ( !$( event.target ).closest( ".ui-dialog-titlebar-close" ) ) {
+
+					// Dialog isn't getting focus when dragging (#8063)
+					this.uiDialog.trigger( "focus" );
+				}
+			}
+		} );
+
+		// Support: IE
+		// Use type="button" to prevent enter keypresses in textboxes from closing the
+		// dialog in IE (#9312)
+		this.uiDialogTitlebarClose = $( "<button type='button'></button>" )
+			.button( {
+				label: $( "<a>" ).text( this.options.closeText ).html(),
+				icon: "ui-icon-closethick",
+				showLabel: false
+			} )
+			.appendTo( this.uiDialogTitlebar );
+
+		this._addClass( this.uiDialogTitlebarClose, "ui-dialog-titlebar-close" );
+		this._on( this.uiDialogTitlebarClose, {
+			click: function( event ) {
+				event.preventDefault();
+				this.close( event );
+			}
+		} );
+
+		uiDialogTitle = $( "<span>" ).uniqueId().prependTo( this.uiDialogTitlebar );
+		this._addClass( uiDialogTitle, "ui-dialog-title" );
+		this._title( uiDialogTitle );
+
+		this.uiDialogTitlebar.prependTo( this.uiDialog );
+
+		this.uiDialog.attr( {
+			"aria-labelledby": uiDialogTitle.attr( "id" )
+		} );
+	},
+
+	_title: function( title ) {
+		if ( this.options.title ) {
+			title.text( this.options.title );
+		} else {
+			title.html( "&#160;" );
+		}
+	},
+
+	_createButtonPane: function() {
+		this.uiDialogButtonPane = $( "<div>" );
+		this._addClass( this.uiDialogButtonPane, "ui-dialog-buttonpane",
+			"ui-widget-content ui-helper-clearfix" );
+
+		this.uiButtonSet = $( "<div>" )
+			.appendTo( this.uiDialogButtonPane );
+		this._addClass( this.uiButtonSet, "ui-dialog-buttonset" );
+
+		this._createButtons();
+	},
+
+	_createButtons: function() {
+		var that = this,
+			buttons = this.options.buttons;
+
+		// If we already have a button pane, remove it
+		this.uiDialogButtonPane.remove();
+		this.uiButtonSet.empty();
+
+		if ( $.isEmptyObject( buttons ) || ( $.isArray( buttons ) && !buttons.length ) ) {
+			this._removeClass( this.uiDialog, "ui-dialog-buttons" );
+			return;
+		}
+
+		$.each( buttons, function( name, props ) {
+			var click, buttonOptions;
+			props = $.isFunction( props ) ?
+				{ click: props, text: name } :
+				props;
+
+			// Default to a non-submitting button
+			props = $.extend( { type: "button" }, props );
+
+			// Change the context for the click callback to be the main element
+			click = props.click;
+			buttonOptions = {
+				icon: props.icon,
+				iconPosition: props.iconPosition,
+				showLabel: props.showLabel,
+
+				// Deprecated options
+				icons: props.icons,
+				text: props.text
+			};
+
+			delete props.click;
+			delete props.icon;
+			delete props.iconPosition;
+			delete props.showLabel;
+
+			// Deprecated options
+			delete props.icons;
+			if ( typeof props.text === "boolean" ) {
+				delete props.text;
+			}
+
+			$( "<button></button>", props )
+				.button( buttonOptions )
+				.appendTo( that.uiButtonSet )
+				.on( "click", function() {
+					click.apply( that.element[ 0 ], arguments );
+				} );
+		} );
+		this._addClass( this.uiDialog, "ui-dialog-buttons" );
+		this.uiDialogButtonPane.appendTo( this.uiDialog );
+	},
+
+	_makeDraggable: function() {
+		var that = this,
+			options = this.options;
+
+		function filteredUi( ui ) {
+			return {
+				position: ui.position,
+				offset: ui.offset
+			};
+		}
+
+		this.uiDialog.draggable( {
+			cancel: ".ui-dialog-content, .ui-dialog-titlebar-close",
+			handle: ".ui-dialog-titlebar",
+			containment: "document",
+			start: function( event, ui ) {
+				that._addClass( $( this ), "ui-dialog-dragging" );
+				that._blockFrames();
+				that._trigger( "dragStart", event, filteredUi( ui ) );
+			},
+			drag: function( event, ui ) {
+				that._trigger( "drag", event, filteredUi( ui ) );
+			},
+			stop: function( event, ui ) {
+				var left = ui.offset.left - that.document.scrollLeft(),
+					top = ui.offset.top - that.document.scrollTop();
+
+				options.position = {
+					my: "left top",
+					at: "left" + ( left >= 0 ? "+" : "" ) + left + " " +
+						"top" + ( top >= 0 ? "+" : "" ) + top,
+					of: that.window
+				};
+				that._removeClass( $( this ), "ui-dialog-dragging" );
+				that._unblockFrames();
+				that._trigger( "dragStop", event, filteredUi( ui ) );
+			}
+		} );
+	},
+
+	_makeResizable: function() {
+		var that = this,
+			options = this.options,
+			handles = options.resizable,
+
+			// .ui-resizable has position: relative defined in the stylesheet
+			// but dialogs have to use absolute or fixed positioning
+			position = this.uiDialog.css( "position" ),
+			resizeHandles = typeof handles === "string" ?
+				handles :
+				"n,e,s,w,se,sw,ne,nw";
+
+		function filteredUi( ui ) {
+			return {
+				originalPosition: ui.originalPosition,
+				originalSize: ui.originalSize,
+				position: ui.position,
+				size: ui.size
+			};
+		}
+
+		this.uiDialog.resizable( {
+			cancel: ".ui-dialog-content",
+			containment: "document",
+			alsoResize: this.element,
+			maxWidth: options.maxWidth,
+			maxHeight: options.maxHeight,
+			minWidth: options.minWidth,
+			minHeight: this._minHeight(),
+			handles: resizeHandles,
+			start: function( event, ui ) {
+				that._addClass( $( this ), "ui-dialog-resizing" );
+				that._blockFrames();
+				that._trigger( "resizeStart", event, filteredUi( ui ) );
+			},
+			resize: function( event, ui ) {
+				that._trigger( "resize", event, filteredUi( ui ) );
+			},
+			stop: function( event, ui ) {
+				var offset = that.uiDialog.offset(),
+					left = offset.left - that.document.scrollLeft(),
+					top = offset.top - that.document.scrollTop();
+
+				options.height = that.uiDialog.height();
+				options.width = that.uiDialog.width();
+				options.position = {
+					my: "left top",
+					at: "left" + ( left >= 0 ? "+" : "" ) + left + " " +
+						"top" + ( top >= 0 ? "+" : "" ) + top,
+					of: that.window
+				};
+				that._removeClass( $( this ), "ui-dialog-resizing" );
+				that._unblockFrames();
+				that._trigger( "resizeStop", event, filteredUi( ui ) );
+			}
+		} )
+			.css( "position", position );
+	},
+
+	_trackFocus: function() {
+		this._on( this.widget(), {
+			focusin: function( event ) {
+				this._makeFocusTarget();
+				this._focusedElement = $( event.target );
+			}
+		} );
+	},
+
+	_makeFocusTarget: function() {
+		this._untrackInstance();
+		this._trackingInstances().unshift( this );
+	},
+
+	_untrackInstance: function() {
+		var instances = this._trackingInstances(),
+			exists = $.inArray( this, instances );
+		if ( exists !== -1 ) {
+			instances.splice( exists, 1 );
+		}
+	},
+
+	_trackingInstances: function() {
+		var instances = this.document.data( "ui-dialog-instances" );
+		if ( !instances ) {
+			instances = [];
+			this.document.data( "ui-dialog-instances", instances );
+		}
+		return instances;
+	},
+
+	_minHeight: function() {
+		var options = this.options;
+
+		return options.height === "auto" ?
+			options.minHeight :
+			Math.min( options.minHeight, options.height );
+	},
+
+	_position: function() {
+
+		// Need to show the dialog to get the actual offset in the position plugin
+		var isVisible = this.uiDialog.is( ":visible" );
+		if ( !isVisible ) {
+			this.uiDialog.show();
+		}
+		this.uiDialog.position( this.options.position );
+		if ( !isVisible ) {
+			this.uiDialog.hide();
+		}
+	},
+
+	_setOptions: function( options ) {
+		var that = this,
+			resize = false,
+			resizableOptions = {};
+
+		$.each( options, function( key, value ) {
+			that._setOption( key, value );
+
+			if ( key in that.sizeRelatedOptions ) {
+				resize = true;
+			}
+			if ( key in that.resizableRelatedOptions ) {
+				resizableOptions[ key ] = value;
+			}
+		} );
+
+		if ( resize ) {
+			this._size();
+			this._position();
+		}
+		if ( this.uiDialog.is( ":data(ui-resizable)" ) ) {
+			this.uiDialog.resizable( "option", resizableOptions );
+		}
+	},
+
+	_setOption: function( key, value ) {
+		var isDraggable, isResizable,
+			uiDialog = this.uiDialog;
+
+		if ( key === "disabled" ) {
+			return;
+		}
+
+		this._super( key, value );
+
+		if ( key === "appendTo" ) {
+			this.uiDialog.appendTo( this._appendTo() );
+		}
+
+		if ( key === "buttons" ) {
+			this._createButtons();
+		}
+
+		if ( key === "closeText" ) {
+			this.uiDialogTitlebarClose.button( {
+
+				// Ensure that we always pass a string
+				label: $( "<a>" ).text( "" + this.options.closeText ).html()
+			} );
+		}
+
+		if ( key === "draggable" ) {
+			isDraggable = uiDialog.is( ":data(ui-draggable)" );
+			if ( isDraggable && !value ) {
+				uiDialog.draggable( "destroy" );
+			}
+
+			if ( !isDraggable && value ) {
+				this._makeDraggable();
+			}
+		}
+
+		if ( key === "position" ) {
+			this._position();
+		}
+
+		if ( key === "resizable" ) {
+
+			// currently resizable, becoming non-resizable
+			isResizable = uiDialog.is( ":data(ui-resizable)" );
+			if ( isResizable && !value ) {
+				uiDialog.resizable( "destroy" );
+			}
+
+			// Currently resizable, changing handles
+			if ( isResizable && typeof value === "string" ) {
+				uiDialog.resizable( "option", "handles", value );
+			}
+
+			// Currently non-resizable, becoming resizable
+			if ( !isResizable && value !== false ) {
+				this._makeResizable();
+			}
+		}
+
+		if ( key === "title" ) {
+			this._title( this.uiDialogTitlebar.find( ".ui-dialog-title" ) );
+		}
+	},
+
+	_size: function() {
+
+		// If the user has resized the dialog, the .ui-dialog and .ui-dialog-content
+		// divs will both have width and height set, so we need to reset them
+		var nonContentHeight, minContentHeight, maxContentHeight,
+			options = this.options;
+
+		// Reset content sizing
+		this.element.show().css( {
+			width: "auto",
+			minHeight: 0,
+			maxHeight: "none",
+			height: 0
+		} );
+
+		if ( options.minWidth > options.width ) {
+			options.width = options.minWidth;
+		}
+
+		// Reset wrapper sizing
+		// determine the height of all the non-content elements
+		nonContentHeight = this.uiDialog.css( {
+			height: "auto",
+			width: options.width
+		} )
+			.outerHeight();
+		minContentHeight = Math.max( 0, options.minHeight - nonContentHeight );
+		maxContentHeight = typeof options.maxHeight === "number" ?
+			Math.max( 0, options.maxHeight - nonContentHeight ) :
+			"none";
+
+		if ( options.height === "auto" ) {
+			this.element.css( {
+				minHeight: minContentHeight,
+				maxHeight: maxContentHeight,
+				height: "auto"
+			} );
+		} else {
+			this.element.height( Math.max( 0, options.height - nonContentHeight ) );
+		}
+
+		if ( this.uiDialog.is( ":data(ui-resizable)" ) ) {
+			this.uiDialog.resizable( "option", "minHeight", this._minHeight() );
+		}
+	},
+
+	_blockFrames: function() {
+		this.iframeBlocks = this.document.find( "iframe" ).map( function() {
+			var iframe = $( this );
+
+			return $( "<div>" )
+				.css( {
+					position: "absolute",
+					width: iframe.outerWidth(),
+					height: iframe.outerHeight()
+				} )
+				.appendTo( iframe.parent() )
+				.offset( iframe.offset() )[ 0 ];
+		} );
+	},
+
+	_unblockFrames: function() {
+		if ( this.iframeBlocks ) {
+			this.iframeBlocks.remove();
+			delete this.iframeBlocks;
+		}
+	},
+
+	_allowInteraction: function( event ) {
+		if ( $( event.target ).closest( ".ui-dialog" ).length ) {
+			return true;
+		}
+
+		// TODO: Remove hack when datepicker implements
+		// the .ui-front logic (#8989)
+		return !!$( event.target ).closest( ".ui-datepicker" ).length;
+	},
+
+	_createOverlay: function() {
+		if ( !this.options.modal ) {
+			return;
+		}
+
+		// We use a delay in case the overlay is created from an
+		// event that we're going to be cancelling (#2804)
+		var isOpening = true;
+		this._delay( function() {
+			isOpening = false;
+		} );
+
+		if ( !this.document.data( "ui-dialog-overlays" ) ) {
+
+			// Prevent use of anchors and inputs
+			// Using _on() for an event handler shared across many instances is
+			// safe because the dialogs stack and must be closed in reverse order
+			this._on( this.document, {
+				focusin: function( event ) {
+					if ( isOpening ) {
+						return;
+					}
+
+					if ( !this._allowInteraction( event ) ) {
+						event.preventDefault();
+						this._trackingInstances()[ 0 ]._focusTabbable();
+					}
+				}
+			} );
+		}
+
+		this.overlay = $( "<div>" )
+			.appendTo( this._appendTo() );
+
+		this._addClass( this.overlay, null, "ui-widget-overlay ui-front" );
+		this._on( this.overlay, {
+			mousedown: "_keepFocus"
+		} );
+		this.document.data( "ui-dialog-overlays",
+			( this.document.data( "ui-dialog-overlays" ) || 0 ) + 1 );
+	},
+
+	_destroyOverlay: function() {
+		if ( !this.options.modal ) {
+			return;
+		}
+
+		if ( this.overlay ) {
+			var overlays = this.document.data( "ui-dialog-overlays" ) - 1;
+
+			if ( !overlays ) {
+				this._off( this.document, "focusin" );
+				this.document.removeData( "ui-dialog-overlays" );
+			} else {
+				this.document.data( "ui-dialog-overlays", overlays );
+			}
+
+			this.overlay.remove();
+			this.overlay = null;
+		}
+	}
+} );
+
+// DEPRECATED
+// TODO: switch return back to widget declaration at top of file when this is removed
+if ( $.uiBackCompat !== false ) {
+
+	// Backcompat for dialogClass option
+	$.widget( "ui.dialog", $.ui.dialog, {
+		options: {
+			dialogClass: ""
+		},
+		_createWrapper: function() {
+			this._super();
+			this.uiDialog.addClass( this.options.dialogClass );
+		},
+		_setOption: function( key, value ) {
+			if ( key === "dialogClass" ) {
+				this.uiDialog
+					.removeClass( this.options.dialogClass )
+					.addClass( value );
+			}
+			this._superApply( arguments );
+		}
+	} );
+}
+
+var widgetsDialog = $.ui.dialog;
+
+
+/*!
+ * jQuery UI Droppable 1.12.1
+ * http://jqueryui.com
+ *
+ * Copyright jQuery Foundation and other contributors
+ * Released under the MIT license.
+ * http://jquery.org/license
+ */
+
+//>>label: Droppable
+//>>group: Interactions
+//>>description: Enables drop targets for draggable elements.
+//>>docs: http://api.jqueryui.com/droppable/
+//>>demos: http://jqueryui.com/droppable/
+
+
+
+$.widget( "ui.droppable", {
+	version: "1.12.1",
+	widgetEventPrefix: "drop",
+	options: {
+		accept: "*",
+		addClasses: true,
+		greedy: false,
+		scope: "default",
+		tolerance: "intersect",
+
+		// Callbacks
+		activate: null,
+		deactivate: null,
+		drop: null,
+		out: null,
+		over: null
+	},
+	_create: function() {
+
+		var proportions,
+			o = this.options,
+			accept = o.accept;
+
+		this.isover = false;
+		this.isout = true;
+
+		this.accept = $.isFunction( accept ) ? accept : function( d ) {
+			return d.is( accept );
+		};
+
+		this.proportions = function( /* valueToWrite */ ) {
+			if ( arguments.length ) {
+
+				// Store the droppable's proportions
+				proportions = arguments[ 0 ];
+			} else {
+
+				// Retrieve or derive the droppable's proportions
+				return proportions ?
+					proportions :
+					proportions = {
+						width: this.element[ 0 ].offsetWidth,
+						height: this.element[ 0 ].offsetHeight
+					};
+			}
+		};
+
+		this._addToManager( o.scope );
+
+		o.addClasses && this._addClass( "ui-droppable" );
+
+	},
+
+	_addToManager: function( scope ) {
+
+		// Add the reference and positions to the manager
+		$.ui.ddmanager.droppables[ scope ] = $.ui.ddmanager.droppables[ scope ] || [];
+		$.ui.ddmanager.droppables[ scope ].push( this );
+	},
+
+	_splice: function( drop ) {
+		var i = 0;
+		for ( ; i < drop.length; i++ ) {
+			if ( drop[ i ] === this ) {
+				drop.splice( i, 1 );
+			}
+		}
+	},
+
+	_destroy: function() {
+		var drop = $.ui.ddmanager.droppables[ this.options.scope ];
+
+		this._splice( drop );
+	},
+
+	_setOption: function( key, value ) {
+
+		if ( key === "accept" ) {
+			this.accept = $.isFunction( value ) ? value : function( d ) {
+				return d.is( value );
+			};
+		} else if ( key === "scope" ) {
+			var drop = $.ui.ddmanager.droppables[ this.options.scope ];
+
+			this._splice( drop );
+			this._addToManager( value );
+		}
+
+		this._super( key, value );
+	},
+
+	_activate: function( event ) {
+		var draggable = $.ui.ddmanager.current;
+
+		this._addActiveClass();
+		if ( draggable ) {
+			this._trigger( "activate", event, this.ui( draggable ) );
+		}
+	},
+
+	_deactivate: function( event ) {
+		var draggable = $.ui.ddmanager.current;
+
+		this._removeActiveClass();
+		if ( draggable ) {
+			this._trigger( "deactivate", event, this.ui( draggable ) );
+		}
+	},
+
+	_over: function( event ) {
+
+		var draggable = $.ui.ddmanager.current;
+
+		// Bail if draggable and droppable are same element
+		if ( !draggable || ( draggable.currentItem ||
+				draggable.element )[ 0 ] === this.element[ 0 ] ) {
+			return;
+		}
+
+		if ( this.accept.call( this.element[ 0 ], ( draggable.currentItem ||
+				draggable.element ) ) ) {
+			this._addHoverClass();
+			this._trigger( "over", event, this.ui( draggable ) );
+		}
+
+	},
+
+	_out: function( event ) {
+
+		var draggable = $.ui.ddmanager.current;
+
+		// Bail if draggable and droppable are same element
+		if ( !draggable || ( draggable.currentItem ||
+				draggable.element )[ 0 ] === this.element[ 0 ] ) {
+			return;
+		}
+
+		if ( this.accept.call( this.element[ 0 ], ( draggable.currentItem ||
+				draggable.element ) ) ) {
+			this._removeHoverClass();
+			this._trigger( "out", event, this.ui( draggable ) );
+		}
+
+	},
+
+	_drop: function( event, custom ) {
+
+		var draggable = custom || $.ui.ddmanager.current,
+			childrenIntersection = false;
+
+		// Bail if draggable and droppable are same element
+		if ( !draggable || ( draggable.currentItem ||
+				draggable.element )[ 0 ] === this.element[ 0 ] ) {
+			return false;
+		}
+
+		this.element
+			.find( ":data(ui-droppable)" )
+			.not( ".ui-draggable-dragging" )
+			.each( function() {
+				var inst = $( this ).droppable( "instance" );
+				if (
+					inst.options.greedy &&
+					!inst.options.disabled &&
+					inst.options.scope === draggable.options.scope &&
+					inst.accept.call(
+						inst.element[ 0 ], ( draggable.currentItem || draggable.element )
+					) &&
+					intersect(
+						draggable,
+						$.extend( inst, { offset: inst.element.offset() } ),
+						inst.options.tolerance, event
+					)
+				) {
+					childrenIntersection = true;
+					return false; }
+			} );
+		if ( childrenIntersection ) {
+			return false;
+		}
+
+		if ( this.accept.call( this.element[ 0 ],
+				( draggable.currentItem || draggable.element ) ) ) {
+			this._removeActiveClass();
+			this._removeHoverClass();
+
+			this._trigger( "drop", event, this.ui( draggable ) );
+			return this.element;
+		}
+
+		return false;
+
+	},
+
+	ui: function( c ) {
+		return {
+			draggable: ( c.currentItem || c.element ),
+			helper: c.helper,
+			position: c.position,
+			offset: c.positionAbs
+		};
+	},
+
+	// Extension points just to make backcompat sane and avoid duplicating logic
+	// TODO: Remove in 1.13 along with call to it below
+	_addHoverClass: function() {
+		this._addClass( "ui-droppable-hover" );
+	},
+
+	_removeHoverClass: function() {
+		this._removeClass( "ui-droppable-hover" );
+	},
+
+	_addActiveClass: function() {
+		this._addClass( "ui-droppable-active" );
+	},
+
+	_removeActiveClass: function() {
+		this._removeClass( "ui-droppable-active" );
+	}
+} );
+
+var intersect = $.ui.intersect = ( function() {
+	function isOverAxis( x, reference, size ) {
+		return ( x >= reference ) && ( x < ( reference + size ) );
+	}
+
+	return function( draggable, droppable, toleranceMode, event ) {
+
+		if ( !droppable.offset ) {
+			return false;
+		}
+
+		var x1 = ( draggable.positionAbs ||
+				draggable.position.absolute ).left + draggable.margins.left,
+			y1 = ( draggable.positionAbs ||
+				draggable.position.absolute ).top + draggable.margins.top,
+			x2 = x1 + draggable.helperProportions.width,
+			y2 = y1 + draggable.helperProportions.height,
+			l = droppable.offset.left,
+			t = droppable.offset.top,
+			r = l + droppable.proportions().width,
+			b = t + droppable.proportions().height;
+
+		switch ( toleranceMode ) {
+		case "fit":
+			return ( l <= x1 && x2 <= r && t <= y1 && y2 <= b );
+		case "intersect":
+			return ( l < x1 + ( draggable.helperProportions.width / 2 ) && // Right Half
+				x2 - ( draggable.helperProportions.width / 2 ) < r && // Left Half
+				t < y1 + ( draggable.helperProportions.height / 2 ) && // Bottom Half
+				y2 - ( draggable.helperProportions.height / 2 ) < b ); // Top Half
+		case "pointer":
+			return isOverAxis( event.pageY, t, droppable.proportions().height ) &&
+				isOverAxis( event.pageX, l, droppable.proportions().width );
+		case "touch":
+			return (
+				( y1 >= t && y1 <= b ) || // Top edge touching
+				( y2 >= t && y2 <= b ) || // Bottom edge touching
+				( y1 < t && y2 > b ) // Surrounded vertically
+			) && (
+				( x1 >= l && x1 <= r ) || // Left edge touching
+				( x2 >= l && x2 <= r ) || // Right edge touching
+				( x1 < l && x2 > r ) // Surrounded horizontally
+			);
+		default:
+			return false;
+		}
+	};
+} )();
+
+/*
+	This manager tracks offsets of draggables and droppables
+*/
+$.ui.ddmanager = {
+	current: null,
+	droppables: { "default": [] },
+	prepareOffsets: function( t, event ) {
+
+		var i, j,
+			m = $.ui.ddmanager.droppables[ t.options.scope ] || [],
+			type = event ? event.type : null, // workaround for #2317
+			list = ( t.currentItem || t.element ).find( ":data(ui-droppable)" ).addBack();
+
+		droppablesLoop: for ( i = 0; i < m.length; i++ ) {
+
+			// No disabled and non-accepted
+			if ( m[ i ].options.disabled || ( t && !m[ i ].accept.call( m[ i ].element[ 0 ],
+					( t.currentItem || t.element ) ) ) ) {
+				continue;
+			}
+
+			// Filter out elements in the current dragged item
+			for ( j = 0; j < list.length; j++ ) {
+				if ( list[ j ] === m[ i ].element[ 0 ] ) {
+					m[ i ].proportions().height = 0;
+					continue droppablesLoop;
+				}
+			}
+
+			m[ i ].visible = m[ i ].element.css( "display" ) !== "none";
+			if ( !m[ i ].visible ) {
+				continue;
+			}
+
+			// Activate the droppable if used directly from draggables
+			if ( type === "mousedown" ) {
+				m[ i ]._activate.call( m[ i ], event );
+			}
+
+			m[ i ].offset = m[ i ].element.offset();
+			m[ i ].proportions( {
+				width: m[ i ].element[ 0 ].offsetWidth,
+				height: m[ i ].element[ 0 ].offsetHeight
+			} );
+
+		}
+
+	},
+	drop: function( draggable, event ) {
+
+		var dropped = false;
+
+		// Create a copy of the droppables in case the list changes during the drop (#9116)
+		$.each( ( $.ui.ddmanager.droppables[ draggable.options.scope ] || [] ).slice(), function() {
+
+			if ( !this.options ) {
+				return;
+			}
+			if ( !this.options.disabled && this.visible &&
+					intersect( draggable, this, this.options.tolerance, event ) ) {
+				dropped = this._drop.call( this, event ) || dropped;
+			}
+
+			if ( !this.options.disabled && this.visible && this.accept.call( this.element[ 0 ],
+					( draggable.currentItem || draggable.element ) ) ) {
+				this.isout = true;
+				this.isover = false;
+				this._deactivate.call( this, event );
+			}
+
+		} );
+		return dropped;
+
+	},
+	dragStart: function( draggable, event ) {
+
+		// Listen for scrolling so that if the dragging causes scrolling the position of the
+		// droppables can be recalculated (see #5003)
+		draggable.element.parentsUntil( "body" ).on( "scroll.droppable", function() {
+			if ( !draggable.options.refreshPositions ) {
+				$.ui.ddmanager.prepareOffsets( draggable, event );
+			}
+		} );
+	},
+	drag: function( draggable, event ) {
+
+		// If you have a highly dynamic page, you might try this option. It renders positions
+		// every time you move the mouse.
+		if ( draggable.options.refreshPositions ) {
+			$.ui.ddmanager.prepareOffsets( draggable, event );
+		}
+
+		// Run through all droppables and check their positions based on specific tolerance options
+		$.each( $.ui.ddmanager.droppables[ draggable.options.scope ] || [], function() {
+
+			if ( this.options.disabled || this.greedyChild || !this.visible ) {
+				return;
+			}
+
+			var parentInstance, scope, parent,
+				intersects = intersect( draggable, this, this.options.tolerance, event ),
+				c = !intersects && this.isover ?
+					"isout" :
+					( intersects && !this.isover ? "isover" : null );
+			if ( !c ) {
+				return;
+			}
+
+			if ( this.options.greedy ) {
+
+				// find droppable parents with same scope
+				scope = this.options.scope;
+				parent = this.element.parents( ":data(ui-droppable)" ).filter( function() {
+					return $( this ).droppable( "instance" ).options.scope === scope;
+				} );
+
+				if ( parent.length ) {
+					parentInstance = $( parent[ 0 ] ).droppable( "instance" );
+					parentInstance.greedyChild = ( c === "isover" );
+				}
+			}
+
+			// We just moved into a greedy child
+			if ( parentInstance && c === "isover" ) {
+				parentInstance.isover = false;
+				parentInstance.isout = true;
+				parentInstance._out.call( parentInstance, event );
+			}
+
+			this[ c ] = true;
+			this[ c === "isout" ? "isover" : "isout" ] = false;
+			this[ c === "isover" ? "_over" : "_out" ].call( this, event );
+
+			// We just moved out of a greedy child
+			if ( parentInstance && c === "isout" ) {
+				parentInstance.isout = false;
+				parentInstance.isover = true;
+				parentInstance._over.call( parentInstance, event );
+			}
+		} );
+
+	},
+	dragStop: function( draggable, event ) {
+		draggable.element.parentsUntil( "body" ).off( "scroll.droppable" );
+
+		// Call prepareOffsets one final time since IE does not fire return scroll events when
+		// overflow was caused by drag (see #5003)
+		if ( !draggable.options.refreshPositions ) {
+			$.ui.ddmanager.prepareOffsets( draggable, event );
+		}
+	}
+};
+
+// DEPRECATED
+// TODO: switch return back to widget declaration at top of file when this is removed
+if ( $.uiBackCompat !== false ) {
+
+	// Backcompat for activeClass and hoverClass options
+	$.widget( "ui.droppable", $.ui.droppable, {
+		options: {
+			hoverClass: false,
+			activeClass: false
+		},
+		_addActiveClass: function() {
+			this._super();
+			if ( this.options.activeClass ) {
+				this.element.addClass( this.options.activeClass );
+			}
+		},
+		_removeActiveClass: function() {
+			this._super();
+			if ( this.options.activeClass ) {
+				this.element.removeClass( this.options.activeClass );
+			}
+		},
+		_addHoverClass: function() {
+			this._super();
+			if ( this.options.hoverClass ) {
+				this.element.addClass( this.options.hoverClass );
+			}
+		},
+		_removeHoverClass: function() {
+			this._super();
+			if ( this.options.hoverClass ) {
+				this.element.removeClass( this.options.hoverClass );
+			}
+		}
+	} );
+}
+
+var widgetsDroppable = $.ui.droppable;
+
+
+/*!
+ * jQuery UI Progressbar 1.12.1
+ * http://jqueryui.com
+ *
+ * Copyright jQuery Foundation and other contributors
+ * Released under the MIT license.
+ * http://jquery.org/license
+ */
+
+//>>label: Progressbar
+//>>group: Widgets
+// jscs:disable maximumLineLength
+//>>description: Displays a status indicator for loading state, standard percentage, and other progress indicators.
+// jscs:enable maximumLineLength
+//>>docs: http://api.jqueryui.com/progressbar/
+//>>demos: http://jqueryui.com/progressbar/
+//>>css.structure: ../../themes/base/core.css
+//>>css.structure: ../../themes/base/progressbar.css
+//>>css.theme: ../../themes/base/theme.css
+
+
+
+var widgetsProgressbar = $.widget( "ui.progressbar", {
+	version: "1.12.1",
+	options: {
+		classes: {
+			"ui-progressbar": "ui-corner-all",
+			"ui-progressbar-value": "ui-corner-left",
+			"ui-progressbar-complete": "ui-corner-right"
+		},
+		max: 100,
+		value: 0,
+
+		change: null,
+		complete: null
+	},
+
+	min: 0,
+
+	_create: function() {
+
+		// Constrain initial value
+		this.oldValue = this.options.value = this._constrainedValue();
+
+		this.element.attr( {
+
+			// Only set static values; aria-valuenow and aria-valuemax are
+			// set inside _refreshValue()
+			role: "progressbar",
+			"aria-valuemin": this.min
+		} );
+		this._addClass( "ui-progressbar", "ui-widget ui-widget-content" );
+
+		this.valueDiv = $( "<div>" ).appendTo( this.element );
+		this._addClass( this.valueDiv, "ui-progressbar-value", "ui-widget-header" );
+		this._refreshValue();
+	},
+
+	_destroy: function() {
+		this.element.removeAttr( "role aria-valuemin aria-valuemax aria-valuenow" );
+
+		this.valueDiv.remove();
+	},
+
+	value: function( newValue ) {
+		if ( newValue === undefined ) {
+			return this.options.value;
+		}
+
+		this.options.value = this._constrainedValue( newValue );
+		this._refreshValue();
+	},
+
+	_constrainedValue: function( newValue ) {
+		if ( newValue === undefined ) {
+			newValue = this.options.value;
+		}
+
+		this.indeterminate = newValue === false;
+
+		// Sanitize value
+		if ( typeof newValue !== "number" ) {
+			newValue = 0;
+		}
+
+		return this.indeterminate ? false :
+			Math.min( this.options.max, Math.max( this.min, newValue ) );
+	},
+
+	_setOptions: function( options ) {
+
+		// Ensure "value" option is set after other values (like max)
+		var value = options.value;
+		delete options.value;
+
+		this._super( options );
+
+		this.options.value = this._constrainedValue( value );
+		this._refreshValue();
+	},
+
+	_setOption: function( key, value ) {
+		if ( key === "max" ) {
+
+			// Don't allow a max less than min
+			value = Math.max( this.min, value );
+		}
+		this._super( key, value );
+	},
+
+	_setOptionDisabled: function( value ) {
+		this._super( value );
+
+		this.element.attr( "aria-disabled", value );
+		this._toggleClass( null, "ui-state-disabled", !!value );
+	},
+
+	_percentage: function() {
+		return this.indeterminate ?
+			100 :
+			100 * ( this.options.value - this.min ) / ( this.options.max - this.min );
+	},
+
+	_refreshValue: function() {
+		var value = this.options.value,
+			percentage = this._percentage();
+
+		this.valueDiv
+			.toggle( this.indeterminate || value > this.min )
+			.width( percentage.toFixed( 0 ) + "%" );
+
+		this
+			._toggleClass( this.valueDiv, "ui-progressbar-complete", null,
+				value === this.options.max )
+			._toggleClass( "ui-progressbar-indeterminate", null, this.indeterminate );
+
+		if ( this.indeterminate ) {
+			this.element.removeAttr( "aria-valuenow" );
+			if ( !this.overlayDiv ) {
+				this.overlayDiv = $( "<div>" ).appendTo( this.valueDiv );
+				this._addClass( this.overlayDiv, "ui-progressbar-overlay" );
+			}
+		} else {
+			this.element.attr( {
+				"aria-valuemax": this.options.max,
+				"aria-valuenow": value
+			} );
+			if ( this.overlayDiv ) {
+				this.overlayDiv.remove();
+				this.overlayDiv = null;
+			}
+		}
+
+		if ( this.oldValue !== value ) {
+			this.oldValue = value;
+			this._trigger( "change" );
+		}
+		if ( value === this.options.max ) {
+			this._trigger( "complete" );
+		}
+	}
+} );
+
+
+/*!
+ * jQuery UI Selectable 1.12.1
+ * http://jqueryui.com
+ *
+ * Copyright jQuery Foundation and other contributors
+ * Released under the MIT license.
+ * http://jquery.org/license
+ */
+
+//>>label: Selectable
+//>>group: Interactions
+//>>description: Allows groups of elements to be selected with the mouse.
+//>>docs: http://api.jqueryui.com/selectable/
+//>>demos: http://jqueryui.com/selectable/
+//>>css.structure: ../../themes/base/selectable.css
+
+
+
+var widgetsSelectable = $.widget( "ui.selectable", $.ui.mouse, {
+	version: "1.12.1",
+	options: {
+		appendTo: "body",
+		autoRefresh: true,
+		distance: 0,
+		filter: "*",
+		tolerance: "touch",
+
+		// Callbacks
+		selected: null,
+		selecting: null,
+		start: null,
+		stop: null,
+		unselected: null,
+		unselecting: null
+	},
+	_create: function() {
+		var that = this;
+
+		this._addClass( "ui-selectable" );
+
+		this.dragged = false;
+
+		// Cache selectee children based on filter
+		this.refresh = function() {
+			that.elementPos = $( that.element[ 0 ] ).offset();
+			that.selectees = $( that.options.filter, that.element[ 0 ] );
+			that._addClass( that.selectees, "ui-selectee" );
+			that.selectees.each( function() {
+				var $this = $( this ),
+					selecteeOffset = $this.offset(),
+					pos = {
+						left: selecteeOffset.left - that.elementPos.left,
+						top: selecteeOffset.top - that.elementPos.top
+					};
+				$.data( this, "selectable-item", {
+					element: this,
+					$element: $this,
+					left: pos.left,
+					top: pos.top,
+					right: pos.left + $this.outerWidth(),
+					bottom: pos.top + $this.outerHeight(),
+					startselected: false,
+					selected: $this.hasClass( "ui-selected" ),
+					selecting: $this.hasClass( "ui-selecting" ),
+					unselecting: $this.hasClass( "ui-unselecting" )
+				} );
+			} );
+		};
+		this.refresh();
+
+		this._mouseInit();
+
+		this.helper = $( "<div>" );
+		this._addClass( this.helper, "ui-selectable-helper" );
+	},
+
+	_destroy: function() {
+		this.selectees.removeData( "selectable-item" );
+		this._mouseDestroy();
+	},
+
+	_mouseStart: function( event ) {
+		var that = this,
+			options = this.options;
+
+		this.opos = [ event.pageX, event.pageY ];
+		this.elementPos = $( this.element[ 0 ] ).offset();
+
+		if ( this.options.disabled ) {
+			return;
+		}
+
+		this.selectees = $( options.filter, this.element[ 0 ] );
+
+		this._trigger( "start", event );
+
+		$( options.appendTo ).append( this.helper );
+
+		// position helper (lasso)
+		this.helper.css( {
+			"left": event.pageX,
+			"top": event.pageY,
+			"width": 0,
+			"height": 0
+		} );
+
+		if ( options.autoRefresh ) {
+			this.refresh();
+		}
+
+		this.selectees.filter( ".ui-selected" ).each( function() {
+			var selectee = $.data( this, "selectable-item" );
+			selectee.startselected = true;
+			if ( !event.metaKey && !event.ctrlKey ) {
+				that._removeClass( selectee.$element, "ui-selected" );
+				selectee.selected = false;
+				that._addClass( selectee.$element, "ui-unselecting" );
+				selectee.unselecting = true;
+
+				// selectable UNSELECTING callback
+				that._trigger( "unselecting", event, {
+					unselecting: selectee.element
+				} );
+			}
+		} );
+
+		$( event.target ).parents().addBack().each( function() {
+			var doSelect,
+				selectee = $.data( this, "selectable-item" );
+			if ( selectee ) {
+				doSelect = ( !event.metaKey && !event.ctrlKey ) ||
+					!selectee.$element.hasClass( "ui-selected" );
+				that._removeClass( selectee.$element, doSelect ? "ui-unselecting" : "ui-selected" )
+					._addClass( selectee.$element, doSelect ? "ui-selecting" : "ui-unselecting" );
+				selectee.unselecting = !doSelect;
+				selectee.selecting = doSelect;
+				selectee.selected = doSelect;
+
+				// selectable (UN)SELECTING callback
+				if ( doSelect ) {
+					that._trigger( "selecting", event, {
+						selecting: selectee.element
+					} );
+				} else {
+					that._trigger( "unselecting", event, {
+						unselecting: selectee.element
+					} );
+				}
+				return false;
+			}
+		} );
+
+	},
+
+	_mouseDrag: function( event ) {
+
+		this.dragged = true;
+
+		if ( this.options.disabled ) {
+			return;
+		}
+
+		var tmp,
+			that = this,
+			options = this.options,
+			x1 = this.opos[ 0 ],
+			y1 = this.opos[ 1 ],
+			x2 = event.pageX,
+			y2 = event.pageY;
+
+		if ( x1 > x2 ) { tmp = x2; x2 = x1; x1 = tmp; }
+		if ( y1 > y2 ) { tmp = y2; y2 = y1; y1 = tmp; }
+		this.helper.css( { left: x1, top: y1, width: x2 - x1, height: y2 - y1 } );
+
+		this.selectees.each( function() {
+			var selectee = $.data( this, "selectable-item" ),
+				hit = false,
+				offset = {};
+
+			//prevent helper from being selected if appendTo: selectable
+			if ( !selectee || selectee.element === that.element[ 0 ] ) {
+				return;
+			}
+
+			offset.left   = selectee.left   + that.elementPos.left;
+			offset.right  = selectee.right  + that.elementPos.left;
+			offset.top    = selectee.top    + that.elementPos.top;
+			offset.bottom = selectee.bottom + that.elementPos.top;
+
+			if ( options.tolerance === "touch" ) {
+				hit = ( !( offset.left > x2 || offset.right < x1 || offset.top > y2 ||
+                    offset.bottom < y1 ) );
+			} else if ( options.tolerance === "fit" ) {
+				hit = ( offset.left > x1 && offset.right < x2 && offset.top > y1 &&
+                    offset.bottom < y2 );
+			}
+
+			if ( hit ) {
+
+				// SELECT
+				if ( selectee.selected ) {
+					that._removeClass( selectee.$element, "ui-selected" );
+					selectee.selected = false;
+				}
+				if ( selectee.unselecting ) {
+					that._removeClass( selectee.$element, "ui-unselecting" );
+					selectee.unselecting = false;
+				}
+				if ( !selectee.selecting ) {
+					that._addClass( selectee.$element, "ui-selecting" );
+					selectee.selecting = true;
+
+					// selectable SELECTING callback
+					that._trigger( "selecting", event, {
+						selecting: selectee.element
+					} );
+				}
+			} else {
+
+				// UNSELECT
+				if ( selectee.selecting ) {
+					if ( ( event.metaKey || event.ctrlKey ) && selectee.startselected ) {
+						that._removeClass( selectee.$element, "ui-selecting" );
+						selectee.selecting = false;
+						that._addClass( selectee.$element, "ui-selected" );
+						selectee.selected = true;
+					} else {
+						that._removeClass( selectee.$element, "ui-selecting" );
+						selectee.selecting = false;
+						if ( selectee.startselected ) {
+							that._addClass( selectee.$element, "ui-unselecting" );
+							selectee.unselecting = true;
+						}
+
+						// selectable UNSELECTING callback
+						that._trigger( "unselecting", event, {
+							unselecting: selectee.element
+						} );
+					}
+				}
+				if ( selectee.selected ) {
+					if ( !event.metaKey && !event.ctrlKey && !selectee.startselected ) {
+						that._removeClass( selectee.$element, "ui-selected" );
+						selectee.selected = false;
+
+						that._addClass( selectee.$element, "ui-unselecting" );
+						selectee.unselecting = true;
+
+						// selectable UNSELECTING callback
+						that._trigger( "unselecting", event, {
+							unselecting: selectee.element
+						} );
+					}
+				}
+			}
+		} );
+
+		return false;
+	},
+
+	_mouseStop: function( event ) {
+		var that = this;
+
+		this.dragged = false;
+
+		$( ".ui-unselecting", this.element[ 0 ] ).each( function() {
+			var selectee = $.data( this, "selectable-item" );
+			that._removeClass( selectee.$element, "ui-unselecting" );
+			selectee.unselecting = false;
+			selectee.startselected = false;
+			that._trigger( "unselected", event, {
+				unselected: selectee.element
+			} );
+		} );
+		$( ".ui-selecting", this.element[ 0 ] ).each( function() {
+			var selectee = $.data( this, "selectable-item" );
+			that._removeClass( selectee.$element, "ui-selecting" )
+				._addClass( selectee.$element, "ui-selected" );
+			selectee.selecting = false;
+			selectee.selected = true;
+			selectee.startselected = true;
+			that._trigger( "selected", event, {
+				selected: selectee.element
+			} );
+		} );
+		this._trigger( "stop", event );
+
+		this.helper.remove();
+
+		return false;
+	}
+
+} );
+
+
+/*!
+ * jQuery UI Selectmenu 1.12.1
+ * http://jqueryui.com
+ *
+ * Copyright jQuery Foundation and other contributors
+ * Released under the MIT license.
+ * http://jquery.org/license
+ */
+
+//>>label: Selectmenu
+//>>group: Widgets
+// jscs:disable maximumLineLength
+//>>description: Duplicates and extends the functionality of a native HTML select element, allowing it to be customizable in behavior and appearance far beyond the limitations of a native select.
+// jscs:enable maximumLineLength
+//>>docs: http://api.jqueryui.com/selectmenu/
+//>>demos: http://jqueryui.com/selectmenu/
+//>>css.structure: ../../themes/base/core.css
+//>>css.structure: ../../themes/base/selectmenu.css, ../../themes/base/button.css
+//>>css.theme: ../../themes/base/theme.css
+
+
+
+var widgetsSelectmenu = $.widget( "ui.selectmenu", [ $.ui.formResetMixin, {
+	version: "1.12.1",
+	defaultElement: "<select>",
+	options: {
+		appendTo: null,
+		classes: {
+			"ui-selectmenu-button-open": "ui-corner-top",
+			"ui-selectmenu-button-closed": "ui-corner-all"
+		},
+		disabled: null,
+		icons: {
+			button: "ui-icon-triangle-1-s"
+		},
+		position: {
+			my: "left top",
+			at: "left bottom",
+			collision: "none"
+		},
+		width: false,
+
+		// Callbacks
+		change: null,
+		close: null,
+		focus: null,
+		open: null,
+		select: null
+	},
+
+	_create: function() {
+		var selectmenuId = this.element.uniqueId().attr( "id" );
+		this.ids = {
+			element: selectmenuId,
+			button: selectmenuId + "-button",
+			menu: selectmenuId + "-menu"
+		};
+
+		this._drawButton();
+		this._drawMenu();
+		this._bindFormResetHandler();
+
+		this._rendered = false;
+		this.menuItems = $();
+	},
+
+	_drawButton: function() {
+		var icon,
+			that = this,
+			item = this._parseOption(
+				this.element.find( "option:selected" ),
+				this.element[ 0 ].selectedIndex
+			);
+
+		// Associate existing label with the new button
+		this.labels = this.element.labels().attr( "for", this.ids.button );
+		this._on( this.labels, {
+			click: function( event ) {
+				this.button.focus();
+				event.preventDefault();
+			}
+		} );
+
+		// Hide original select element
+		this.element.hide();
+
+		// Create button
+		this.button = $( "<span>", {
+			tabindex: this.options.disabled ? -1 : 0,
+			id: this.ids.button,
+			role: "combobox",
+			"aria-expanded": "false",
+			"aria-autocomplete": "list",
+			"aria-owns": this.ids.menu,
+			"aria-haspopup": "true",
+			title: this.element.attr( "title" )
+		} )
+			.insertAfter( this.element );
+
+		this._addClass( this.button, "ui-selectmenu-button ui-selectmenu-button-closed",
+			"ui-button ui-widget" );
+
+		icon = $( "<span>" ).appendTo( this.button );
+		this._addClass( icon, "ui-selectmenu-icon", "ui-icon " + this.options.icons.button );
+		this.buttonItem = this._renderButtonItem( item )
+			.appendTo( this.button );
+
+		if ( this.options.width !== false ) {
+			this._resizeButton();
+		}
+
+		this._on( this.button, this._buttonEvents );
+		this.button.one( "focusin", function() {
+
+			// Delay rendering the menu items until the button receives focus.
+			// The menu may have already been rendered via a programmatic open.
+			if ( !that._rendered ) {
+				that._refreshMenu();
+			}
+		} );
+	},
+
+	_drawMenu: function() {
+		var that = this;
+
+		// Create menu
+		this.menu = $( "<ul>", {
+			"aria-hidden": "true",
+			"aria-labelledby": this.ids.button,
+			id: this.ids.menu
+		} );
+
+		// Wrap menu
+		this.menuWrap = $( "<div>" ).append( this.menu );
+		this._addClass( this.menuWrap, "ui-selectmenu-menu", "ui-front" );
+		this.menuWrap.appendTo( this._appendTo() );
+
+		// Initialize menu widget
+		this.menuInstance = this.menu
+			.menu( {
+				classes: {
+					"ui-menu": "ui-corner-bottom"
+				},
+				role: "listbox",
+				select: function( event, ui ) {
+					event.preventDefault();
+
+					// Support: IE8
+					// If the item was selected via a click, the text selection
+					// will be destroyed in IE
+					that._setSelection();
+
+					that._select( ui.item.data( "ui-selectmenu-item" ), event );
+				},
+				focus: function( event, ui ) {
+					var item = ui.item.data( "ui-selectmenu-item" );
+
+					// Prevent inital focus from firing and check if its a newly focused item
+					if ( that.focusIndex != null && item.index !== that.focusIndex ) {
+						that._trigger( "focus", event, { item: item } );
+						if ( !that.isOpen ) {
+							that._select( item, event );
+						}
+					}
+					that.focusIndex = item.index;
+
+					that.button.attr( "aria-activedescendant",
+						that.menuItems.eq( item.index ).attr( "id" ) );
+				}
+			} )
+			.menu( "instance" );
+
+		// Don't close the menu on mouseleave
+		this.menuInstance._off( this.menu, "mouseleave" );
+
+		// Cancel the menu's collapseAll on document click
+		this.menuInstance._closeOnDocumentClick = function() {
+			return false;
+		};
+
+		// Selects often contain empty items, but never contain dividers
+		this.menuInstance._isDivider = function() {
+			return false;
+		};
+	},
+
+	refresh: function() {
+		this._refreshMenu();
+		this.buttonItem.replaceWith(
+			this.buttonItem = this._renderButtonItem(
+
+				// Fall back to an empty object in case there are no options
+				this._getSelectedItem().data( "ui-selectmenu-item" ) || {}
+			)
+		);
+		if ( this.options.width === null ) {
+			this._resizeButton();
+		}
+	},
+
+	_refreshMenu: function() {
+		var item,
+			options = this.element.find( "option" );
+
+		this.menu.empty();
+
+		this._parseOptions( options );
+		this._renderMenu( this.menu, this.items );
+
+		this.menuInstance.refresh();
+		this.menuItems = this.menu.find( "li" )
+			.not( ".ui-selectmenu-optgroup" )
+				.find( ".ui-menu-item-wrapper" );
+
+		this._rendered = true;
+
+		if ( !options.length ) {
+			return;
+		}
+
+		item = this._getSelectedItem();
+
+		// Update the menu to have the correct item focused
+		this.menuInstance.focus( null, item );
+		this._setAria( item.data( "ui-selectmenu-item" ) );
+
+		// Set disabled state
+		this._setOption( "disabled", this.element.prop( "disabled" ) );
+	},
+
+	open: function( event ) {
+		if ( this.options.disabled ) {
+			return;
+		}
+
+		// If this is the first time the menu is being opened, render the items
+		if ( !this._rendered ) {
+			this._refreshMenu();
+		} else {
+
+			// Menu clears focus on close, reset focus to selected item
+			this._removeClass( this.menu.find( ".ui-state-active" ), null, "ui-state-active" );
+			this.menuInstance.focus( null, this._getSelectedItem() );
+		}
+
+		// If there are no options, don't open the menu
+		if ( !this.menuItems.length ) {
+			return;
+		}
+
+		this.isOpen = true;
+		this._toggleAttr();
+		this._resizeMenu();
+		this._position();
+
+		this._on( this.document, this._documentClick );
+
+		this._trigger( "open", event );
+	},
+
+	_position: function() {
+		this.menuWrap.position( $.extend( { of: this.button }, this.options.position ) );
+	},
+
+	close: function( event ) {
+		if ( !this.isOpen ) {
+			return;
+		}
+
+		this.isOpen = false;
+		this._toggleAttr();
+
+		this.range = null;
+		this._off( this.document );
+
+		this._trigger( "close", event );
+	},
+
+	widget: function() {
+		return this.button;
+	},
+
+	menuWidget: function() {
+		return this.menu;
+	},
+
+	_renderButtonItem: function( item ) {
+		var buttonItem = $( "<span>" );
+
+		this._setText( buttonItem, item.label );
+		this._addClass( buttonItem, "ui-selectmenu-text" );
+
+		return buttonItem;
+	},
+
+	_renderMenu: function( ul, items ) {
+		var that = this,
+			currentOptgroup = "";
+
+		$.each( items, function( index, item ) {
+			var li;
+
+			if ( item.optgroup !== currentOptgroup ) {
+				li = $( "<li>", {
+					text: item.optgroup
+				} );
+				that._addClass( li, "ui-selectmenu-optgroup", "ui-menu-divider" +
+					( item.element.parent( "optgroup" ).prop( "disabled" ) ?
+						" ui-state-disabled" :
+						"" ) );
+
+				li.appendTo( ul );
+
+				currentOptgroup = item.optgroup;
+			}
+
+			that._renderItemData( ul, item );
+		} );
+	},
+
+	_renderItemData: function( ul, item ) {
+		return this._renderItem( ul, item ).data( "ui-selectmenu-item", item );
+	},
+
+	_renderItem: function( ul, item ) {
+		var li = $( "<li>" ),
+			wrapper = $( "<div>", {
+				title: item.element.attr( "title" )
+			} );
+
+		if ( item.disabled ) {
+			this._addClass( li, null, "ui-state-disabled" );
+		}
+		this._setText( wrapper, item.label );
+
+		return li.append( wrapper ).appendTo( ul );
+	},
+
+	_setText: function( element, value ) {
+		if ( value ) {
+			element.text( value );
+		} else {
+			element.html( "&#160;" );
+		}
+	},
+
+	_move: function( direction, event ) {
+		var item, next,
+			filter = ".ui-menu-item";
+
+		if ( this.isOpen ) {
+			item = this.menuItems.eq( this.focusIndex ).parent( "li" );
+		} else {
+			item = this.menuItems.eq( this.element[ 0 ].selectedIndex ).parent( "li" );
+			filter += ":not(.ui-state-disabled)";
+		}
+
+		if ( direction === "first" || direction === "last" ) {
+			next = item[ direction === "first" ? "prevAll" : "nextAll" ]( filter ).eq( -1 );
+		} else {
+			next = item[ direction + "All" ]( filter ).eq( 0 );
+		}
+
+		if ( next.length ) {
+			this.menuInstance.focus( event, next );
+		}
+	},
+
+	_getSelectedItem: function() {
+		return this.menuItems.eq( this.element[ 0 ].selectedIndex ).parent( "li" );
+	},
+
+	_toggle: function( event ) {
+		this[ this.isOpen ? "close" : "open" ]( event );
+	},
+
+	_setSelection: function() {
+		var selection;
+
+		if ( !this.range ) {
+			return;
+		}
+
+		if ( window.getSelection ) {
+			selection = window.getSelection();
+			selection.removeAllRanges();
+			selection.addRange( this.range );
+
+		// Support: IE8
+		} else {
+			this.range.select();
+		}
+
+		// Support: IE
+		// Setting the text selection kills the button focus in IE, but
+		// restoring the focus doesn't kill the selection.
+		this.button.focus();
+	},
+
+	_documentClick: {
+		mousedown: function( event ) {
+			if ( !this.isOpen ) {
+				return;
+			}
+
+			if ( !$( event.target ).closest( ".ui-selectmenu-menu, #" +
+					$.ui.escapeSelector( this.ids.button ) ).length ) {
+				this.close( event );
+			}
+		}
+	},
+
+	_buttonEvents: {
+
+		// Prevent text selection from being reset when interacting with the selectmenu (#10144)
+		mousedown: function() {
+			var selection;
+
+			if ( window.getSelection ) {
+				selection = window.getSelection();
+				if ( selection.rangeCount ) {
+					this.range = selection.getRangeAt( 0 );
+				}
+
+			// Support: IE8
+			} else {
+				this.range = document.selection.createRange();
+			}
+		},
+
+		click: function( event ) {
+			this._setSelection();
+			this._toggle( event );
+		},
+
+		keydown: function( event ) {
+			var preventDefault = true;
+			switch ( event.keyCode ) {
+			case $.ui.keyCode.TAB:
+			case $.ui.keyCode.ESCAPE:
+				this.close( event );
+				preventDefault = false;
+				break;
+			case $.ui.keyCode.ENTER:
+				if ( this.isOpen ) {
+					this._selectFocusedItem( event );
+				}
+				break;
+			case $.ui.keyCode.UP:
+				if ( event.altKey ) {
+					this._toggle( event );
+				} else {
+					this._move( "prev", event );
+				}
+				break;
+			case $.ui.keyCode.DOWN:
+				if ( event.altKey ) {
+					this._toggle( event );
+				} else {
+					this._move( "next", event );
+				}
+				break;
+			case $.ui.keyCode.SPACE:
+				if ( this.isOpen ) {
+					this._selectFocusedItem( event );
+				} else {
+					this._toggle( event );
+				}
+				break;
+			case $.ui.keyCode.LEFT:
+				this._move( "prev", event );
+				break;
+			case $.ui.keyCode.RIGHT:
+				this._move( "next", event );
+				break;
+			case $.ui.keyCode.HOME:
+			case $.ui.keyCode.PAGE_UP:
+				this._move( "first", event );
+				break;
+			case $.ui.keyCode.END:
+			case $.ui.keyCode.PAGE_DOWN:
+				this._move( "last", event );
+				break;
+			default:
+				this.menu.trigger( event );
+				preventDefault = false;
+			}
+
+			if ( preventDefault ) {
+				event.preventDefault();
+			}
+		}
+	},
+
+	_selectFocusedItem: function( event ) {
+		var item = this.menuItems.eq( this.focusIndex ).parent( "li" );
+		if ( !item.hasClass( "ui-state-disabled" ) ) {
+			this._select( item.data( "ui-selectmenu-item" ), event );
+		}
+	},
+
+	_select: function( item, event ) {
+		var oldIndex = this.element[ 0 ].selectedIndex;
+
+		// Change native select element
+		this.element[ 0 ].selectedIndex = item.index;
+		this.buttonItem.replaceWith( this.buttonItem = this._renderButtonItem( item ) );
+		this._setAria( item );
+		this._trigger( "select", event, { item: item } );
+
+		if ( item.index !== oldIndex ) {
+			this._trigger( "change", event, { item: item } );
+		}
+
+		this.close( event );
+	},
+
+	_setAria: function( item ) {
+		var id = this.menuItems.eq( item.index ).attr( "id" );
+
+		this.button.attr( {
+			"aria-labelledby": id,
+			"aria-activedescendant": id
+		} );
+		this.menu.attr( "aria-activedescendant", id );
+	},
+
+	_setOption: function( key, value ) {
+		if ( key === "icons" ) {
+			var icon = this.button.find( "span.ui-icon" );
+			this._removeClass( icon, null, this.options.icons.button )
+				._addClass( icon, null, value.button );
+		}
+
+		this._super( key, value );
+
+		if ( key === "appendTo" ) {
+			this.menuWrap.appendTo( this._appendTo() );
+		}
+
+		if ( key === "width" ) {
+			this._resizeButton();
+		}
+	},
+
+	_setOptionDisabled: function( value ) {
+		this._super( value );
+
+		this.menuInstance.option( "disabled", value );
+		this.button.attr( "aria-disabled", value );
+		this._toggleClass( this.button, null, "ui-state-disabled", value );
+
+		this.element.prop( "disabled", value );
+		if ( value ) {
+			this.button.attr( "tabindex", -1 );
+			this.close();
+		} else {
+			this.button.attr( "tabindex", 0 );
+		}
+	},
+
+	_appendTo: function() {
+		var element = this.options.appendTo;
+
+		if ( element ) {
+			element = element.jquery || element.nodeType ?
+				$( element ) :
+				this.document.find( element ).eq( 0 );
+		}
+
+		if ( !element || !element[ 0 ] ) {
+			element = this.element.closest( ".ui-front, dialog" );
+		}
+
+		if ( !element.length ) {
+			element = this.document[ 0 ].body;
+		}
+
+		return element;
+	},
+
+	_toggleAttr: function() {
+		this.button.attr( "aria-expanded", this.isOpen );
+
+		// We can't use two _toggleClass() calls here, because we need to make sure
+		// we always remove classes first and add them second, otherwise if both classes have the
+		// same theme class, it will be removed after we add it.
+		this._removeClass( this.button, "ui-selectmenu-button-" +
+			( this.isOpen ? "closed" : "open" ) )
+			._addClass( this.button, "ui-selectmenu-button-" +
+				( this.isOpen ? "open" : "closed" ) )
+			._toggleClass( this.menuWrap, "ui-selectmenu-open", null, this.isOpen );
+
+		this.menu.attr( "aria-hidden", !this.isOpen );
+	},
+
+	_resizeButton: function() {
+		var width = this.options.width;
+
+		// For `width: false`, just remove inline style and stop
+		if ( width === false ) {
+			this.button.css( "width", "" );
+			return;
+		}
+
+		// For `width: null`, match the width of the original element
+		if ( width === null ) {
+			width = this.element.show().outerWidth();
+			this.element.hide();
+		}
+
+		this.button.outerWidth( width );
+	},
+
+	_resizeMenu: function() {
+		this.menu.outerWidth( Math.max(
+			this.button.outerWidth(),
+
+			// Support: IE10
+			// IE10 wraps long text (possibly a rounding bug)
+			// so we add 1px to avoid the wrapping
+			this.menu.width( "" ).outerWidth() + 1
+		) );
+	},
+
+	_getCreateOptions: function() {
+		var options = this._super();
+
+		options.disabled = this.element.prop( "disabled" );
+
+		return options;
+	},
+
+	_parseOptions: function( options ) {
+		var that = this,
+			data = [];
+		options.each( function( index, item ) {
+			data.push( that._parseOption( $( item ), index ) );
+		} );
+		this.items = data;
+	},
+
+	_parseOption: function( option, index ) {
+		var optgroup = option.parent( "optgroup" );
+
+		return {
+			element: option,
+			index: index,
+			value: option.val(),
+			label: option.text(),
+			optgroup: optgroup.attr( "label" ) || "",
+			disabled: optgroup.prop( "disabled" ) || option.prop( "disabled" )
+		};
+	},
+
+	_destroy: function() {
+		this._unbindFormResetHandler();
+		this.menuWrap.remove();
+		this.button.remove();
+		this.element.show();
+		this.element.removeUniqueId();
+		this.labels.attr( "for", this.ids.element );
+	}
+} ] );
+
+
+/*!
+ * jQuery UI Slider 1.12.1
+ * http://jqueryui.com
+ *
+ * Copyright jQuery Foundation and other contributors
+ * Released under the MIT license.
+ * http://jquery.org/license
+ */
+
+//>>label: Slider
+//>>group: Widgets
+//>>description: Displays a flexible slider with ranges and accessibility via keyboard.
+//>>docs: http://api.jqueryui.com/slider/
+//>>demos: http://jqueryui.com/slider/
+//>>css.structure: ../../themes/base/core.css
+//>>css.structure: ../../themes/base/slider.css
+//>>css.theme: ../../themes/base/theme.css
+
+
+
+var widgetsSlider = $.widget( "ui.slider", $.ui.mouse, {
+	version: "1.12.1",
+	widgetEventPrefix: "slide",
+
+	options: {
+		animate: false,
+		classes: {
+			"ui-slider": "ui-corner-all",
+			"ui-slider-handle": "ui-corner-all",
+
+			// Note: ui-widget-header isn't the most fittingly semantic framework class for this
+			// element, but worked best visually with a variety of themes
+			"ui-slider-range": "ui-corner-all ui-widget-header"
+		},
+		distance: 0,
+		max: 100,
+		min: 0,
+		orientation: "horizontal",
+		range: false,
+		step: 1,
+		value: 0,
+		values: null,
+
+		// Callbacks
+		change: null,
+		slide: null,
+		start: null,
+		stop: null
+	},
+
+	// Number of pages in a slider
+	// (how many times can you page up/down to go through the whole range)
+	numPages: 5,
+
+	_create: function() {
+		this._keySliding = false;
+		this._mouseSliding = false;
+		this._animateOff = true;
+		this._handleIndex = null;
+		this._detectOrientation();
+		this._mouseInit();
+		this._calculateNewMax();
+
+		this._addClass( "ui-slider ui-slider-" + this.orientation,
+			"ui-widget ui-widget-content" );
+
+		this._refresh();
+
+		this._animateOff = false;
+	},
+
+	_refresh: function() {
+		this._createRange();
+		this._createHandles();
+		this._setupEvents();
+		this._refreshValue();
+	},
+
+	_createHandles: function() {
+		var i, handleCount,
+			options = this.options,
+			existingHandles = this.element.find( ".ui-slider-handle" ),
+			handle = "<span tabindex='0'></span>",
+			handles = [];
+
+		handleCount = ( options.values && options.values.length ) || 1;
+
+		if ( existingHandles.length > handleCount ) {
+			existingHandles.slice( handleCount ).remove();
+			existingHandles = existingHandles.slice( 0, handleCount );
+		}
+
+		for ( i = existingHandles.length; i < handleCount; i++ ) {
+			handles.push( handle );
+		}
+
+		this.handles = existingHandles.add( $( handles.join( "" ) ).appendTo( this.element ) );
+
+		this._addClass( this.handles, "ui-slider-handle", "ui-state-default" );
+
+		this.handle = this.handles.eq( 0 );
+
+		this.handles.each( function( i ) {
+			$( this )
+				.data( "ui-slider-handle-index", i )
+				.attr( "tabIndex", 0 );
+		} );
+	},
+
+	_createRange: function() {
+		var options = this.options;
+
+		if ( options.range ) {
+			if ( options.range === true ) {
+				if ( !options.values ) {
+					options.values = [ this._valueMin(), this._valueMin() ];
+				} else if ( options.values.length && options.values.length !== 2 ) {
+					options.values = [ options.values[ 0 ], options.values[ 0 ] ];
+				} else if ( $.isArray( options.values ) ) {
+					options.values = options.values.slice( 0 );
+				}
+			}
+
+			if ( !this.range || !this.range.length ) {
+				this.range = $( "<div>" )
+					.appendTo( this.element );
+
+				this._addClass( this.range, "ui-slider-range" );
+			} else {
+				this._removeClass( this.range, "ui-slider-range-min ui-slider-range-max" );
+
+				// Handle range switching from true to min/max
+				this.range.css( {
+					"left": "",
+					"bottom": ""
+				} );
+			}
+			if ( options.range === "min" || options.range === "max" ) {
+				this._addClass( this.range, "ui-slider-range-" + options.range );
+			}
+		} else {
+			if ( this.range ) {
+				this.range.remove();
+			}
+			this.range = null;
+		}
+	},
+
+	_setupEvents: function() {
+		this._off( this.handles );
+		this._on( this.handles, this._handleEvents );
+		this._hoverable( this.handles );
+		this._focusable( this.handles );
+	},
+
+	_destroy: function() {
+		this.handles.remove();
+		if ( this.range ) {
+			this.range.remove();
+		}
+
+		this._mouseDestroy();
+	},
+
+	_mouseCapture: function( event ) {
+		var position, normValue, distance, closestHandle, index, allowed, offset, mouseOverHandle,
+			that = this,
+			o = this.options;
+
+		if ( o.disabled ) {
+			return false;
+		}
+
+		this.elementSize = {
+			width: this.element.outerWidth(),
+			height: this.element.outerHeight()
+		};
+		this.elementOffset = this.element.offset();
+
+		position = { x: event.pageX, y: event.pageY };
+		normValue = this._normValueFromMouse( position );
+		distance = this._valueMax() - this._valueMin() + 1;
+		this.handles.each( function( i ) {
+			var thisDistance = Math.abs( normValue - that.values( i ) );
+			if ( ( distance > thisDistance ) ||
+				( distance === thisDistance &&
+					( i === that._lastChangedValue || that.values( i ) === o.min ) ) ) {
+				distance = thisDistance;
+				closestHandle = $( this );
+				index = i;
+			}
+		} );
+
+		allowed = this._start( event, index );
+		if ( allowed === false ) {
+			return false;
+		}
+		this._mouseSliding = true;
+
+		this._handleIndex = index;
+
+		this._addClass( closestHandle, null, "ui-state-active" );
+		closestHandle.trigger( "focus" );
+
+		offset = closestHandle.offset();
+		mouseOverHandle = !$( event.target ).parents().addBack().is( ".ui-slider-handle" );
+		this._clickOffset = mouseOverHandle ? { left: 0, top: 0 } : {
+			left: event.pageX - offset.left - ( closestHandle.width() / 2 ),
+			top: event.pageY - offset.top -
+				( closestHandle.height() / 2 ) -
+				( parseInt( closestHandle.css( "borderTopWidth" ), 10 ) || 0 ) -
+				( parseInt( closestHandle.css( "borderBottomWidth" ), 10 ) || 0 ) +
+				( parseInt( closestHandle.css( "marginTop" ), 10 ) || 0 )
+		};
+
+		if ( !this.handles.hasClass( "ui-state-hover" ) ) {
+			this._slide( event, index, normValue );
+		}
+		this._animateOff = true;
+		return true;
+	},
+
+	_mouseStart: function() {
+		return true;
+	},
+
+	_mouseDrag: function( event ) {
+		var position = { x: event.pageX, y: event.pageY },
+			normValue = this._normValueFromMouse( position );
+
+		this._slide( event, this._handleIndex, normValue );
+
+		return false;
+	},
+
+	_mouseStop: function( event ) {
+		this._removeClass( this.handles, null, "ui-state-active" );
+		this._mouseSliding = false;
+
+		this._stop( event, this._handleIndex );
+		this._change( event, this._handleIndex );
+
+		this._handleIndex = null;
+		this._clickOffset = null;
+		this._animateOff = false;
+
+		return false;
+	},
+
+	_detectOrientation: function() {
+		this.orientation = ( this.options.orientation === "vertical" ) ? "vertical" : "horizontal";
+	},
+
+	_normValueFromMouse: function( position ) {
+		var pixelTotal,
+			pixelMouse,
+			percentMouse,
+			valueTotal,
+			valueMouse;
+
+		if ( this.orientation === "horizontal" ) {
+			pixelTotal = this.elementSize.width;
+			pixelMouse = position.x - this.elementOffset.left -
+				( this._clickOffset ? this._clickOffset.left : 0 );
+		} else {
+			pixelTotal = this.elementSize.height;
+			pixelMouse = position.y - this.elementOffset.top -
+				( this._clickOffset ? this._clickOffset.top : 0 );
+		}
+
+		percentMouse = ( pixelMouse / pixelTotal );
+		if ( percentMouse > 1 ) {
+			percentMouse = 1;
+		}
+		if ( percentMouse < 0 ) {
+			percentMouse = 0;
+		}
+		if ( this.orientation === "vertical" ) {
+			percentMouse = 1 - percentMouse;
+		}
+
+		valueTotal = this._valueMax() - this._valueMin();
+		valueMouse = this._valueMin() + percentMouse * valueTotal;
+
+		return this._trimAlignValue( valueMouse );
+	},
+
+	_uiHash: function( index, value, values ) {
+		var uiHash = {
+			handle: this.handles[ index ],
+			handleIndex: index,
+			value: value !== undefined ? value : this.value()
+		};
+
+		if ( this._hasMultipleValues() ) {
+			uiHash.value = value !== undefined ? value : this.values( index );
+			uiHash.values = values || this.values();
+		}
+
+		return uiHash;
+	},
+
+	_hasMultipleValues: function() {
+		return this.options.values && this.options.values.length;
+	},
+
+	_start: function( event, index ) {
+		return this._trigger( "start", event, this._uiHash( index ) );
+	},
+
+	_slide: function( event, index, newVal ) {
+		var allowed, otherVal,
+			currentValue = this.value(),
+			newValues = this.values();
+
+		if ( this._hasMultipleValues() ) {
+			otherVal = this.values( index ? 0 : 1 );
+			currentValue = this.values( index );
+
+			if ( this.options.values.length === 2 && this.options.range === true ) {
+				newVal =  index === 0 ? Math.min( otherVal, newVal ) : Math.max( otherVal, newVal );
+			}
+
+			newValues[ index ] = newVal;
+		}
+
+		if ( newVal === currentValue ) {
+			return;
+		}
+
+		allowed = this._trigger( "slide", event, this._uiHash( index, newVal, newValues ) );
+
+		// A slide can be canceled by returning false from the slide callback
+		if ( allowed === false ) {
+			return;
+		}
+
+		if ( this._hasMultipleValues() ) {
+			this.values( index, newVal );
+		} else {
+			this.value( newVal );
+		}
+	},
+
+	_stop: function( event, index ) {
+		this._trigger( "stop", event, this._uiHash( index ) );
+	},
+
+	_change: function( event, index ) {
+		if ( !this._keySliding && !this._mouseSliding ) {
+
+			//store the last changed value index for reference when handles overlap
+			this._lastChangedValue = index;
+			this._trigger( "change", event, this._uiHash( index ) );
+		}
+	},
+
+	value: function( newValue ) {
+		if ( arguments.length ) {
+			this.options.value = this._trimAlignValue( newValue );
+			this._refreshValue();
+			this._change( null, 0 );
+			return;
+		}
+
+		return this._value();
+	},
+
+	values: function( index, newValue ) {
+		var vals,
+			newValues,
+			i;
+
+		if ( arguments.length > 1 ) {
+			this.options.values[ index ] = this._trimAlignValue( newValue );
+			this._refreshValue();
+			this._change( null, index );
+			return;
+		}
+
+		if ( arguments.length ) {
+			if ( $.isArray( arguments[ 0 ] ) ) {
+				vals = this.options.values;
+				newValues = arguments[ 0 ];
+				for ( i = 0; i < vals.length; i += 1 ) {
+					vals[ i ] = this._trimAlignValue( newValues[ i ] );
+					this._change( null, i );
+				}
+				this._refreshValue();
+			} else {
+				if ( this._hasMultipleValues() ) {
+					return this._values( index );
+				} else {
+					return this.value();
+				}
+			}
+		} else {
+			return this._values();
+		}
+	},
+
+	_setOption: function( key, value ) {
+		var i,
+			valsLength = 0;
+
+		if ( key === "range" && this.options.range === true ) {
+			if ( value === "min" ) {
+				this.options.value = this._values( 0 );
+				this.options.values = null;
+			} else if ( value === "max" ) {
+				this.options.value = this._values( this.options.values.length - 1 );
+				this.options.values = null;
+			}
+		}
+
+		if ( $.isArray( this.options.values ) ) {
+			valsLength = this.options.values.length;
+		}
+
+		this._super( key, value );
+
+		switch ( key ) {
+			case "orientation":
+				this._detectOrientation();
+				this._removeClass( "ui-slider-horizontal ui-slider-vertical" )
+					._addClass( "ui-slider-" + this.orientation );
+				this._refreshValue();
+				if ( this.options.range ) {
+					this._refreshRange( value );
+				}
+
+				// Reset positioning from previous orientation
+				this.handles.css( value === "horizontal" ? "bottom" : "left", "" );
+				break;
+			case "value":
+				this._animateOff = true;
+				this._refreshValue();
+				this._change( null, 0 );
+				this._animateOff = false;
+				break;
+			case "values":
+				this._animateOff = true;
+				this._refreshValue();
+
+				// Start from the last handle to prevent unreachable handles (#9046)
+				for ( i = valsLength - 1; i >= 0; i-- ) {
+					this._change( null, i );
+				}
+				this._animateOff = false;
+				break;
+			case "step":
+			case "min":
+			case "max":
+				this._animateOff = true;
+				this._calculateNewMax();
+				this._refreshValue();
+				this._animateOff = false;
+				break;
+			case "range":
+				this._animateOff = true;
+				this._refresh();
+				this._animateOff = false;
+				break;
+		}
+	},
+
+	_setOptionDisabled: function( value ) {
+		this._super( value );
+
+		this._toggleClass( null, "ui-state-disabled", !!value );
+	},
+
+	//internal value getter
+	// _value() returns value trimmed by min and max, aligned by step
+	_value: function() {
+		var val = this.options.value;
+		val = this._trimAlignValue( val );
+
+		return val;
+	},
+
+	//internal values getter
+	// _values() returns array of values trimmed by min and max, aligned by step
+	// _values( index ) returns single value trimmed by min and max, aligned by step
+	_values: function( index ) {
+		var val,
+			vals,
+			i;
+
+		if ( arguments.length ) {
+			val = this.options.values[ index ];
+			val = this._trimAlignValue( val );
+
+			return val;
+		} else if ( this._hasMultipleValues() ) {
+
+			// .slice() creates a copy of the array
+			// this copy gets trimmed by min and max and then returned
+			vals = this.options.values.slice();
+			for ( i = 0; i < vals.length; i += 1 ) {
+				vals[ i ] = this._trimAlignValue( vals[ i ] );
+			}
+
+			return vals;
+		} else {
+			return [];
+		}
+	},
+
+	// Returns the step-aligned value that val is closest to, between (inclusive) min and max
+	_trimAlignValue: function( val ) {
+		if ( val <= this._valueMin() ) {
+			return this._valueMin();
+		}
+		if ( val >= this._valueMax() ) {
+			return this._valueMax();
+		}
+		var step = ( this.options.step > 0 ) ? this.options.step : 1,
+			valModStep = ( val - this._valueMin() ) % step,
+			alignValue = val - valModStep;
+
+		if ( Math.abs( valModStep ) * 2 >= step ) {
+			alignValue += ( valModStep > 0 ) ? step : ( -step );
+		}
+
+		// Since JavaScript has problems with large floats, round
+		// the final value to 5 digits after the decimal point (see #4124)
+		return parseFloat( alignValue.toFixed( 5 ) );
+	},
+
+	_calculateNewMax: function() {
+		var max = this.options.max,
+			min = this._valueMin(),
+			step = this.options.step,
+			aboveMin = Math.round( ( max - min ) / step ) * step;
+		max = aboveMin + min;
+		if ( max > this.options.max ) {
+
+			//If max is not divisible by step, rounding off may increase its value
+			max -= step;
+		}
+		this.max = parseFloat( max.toFixed( this._precision() ) );
+	},
+
+	_precision: function() {
+		var precision = this._precisionOf( this.options.step );
+		if ( this.options.min !== null ) {
+			precision = Math.max( precision, this._precisionOf( this.options.min ) );
+		}
+		return precision;
+	},
+
+	_precisionOf: function( num ) {
+		var str = num.toString(),
+			decimal = str.indexOf( "." );
+		return decimal === -1 ? 0 : str.length - decimal - 1;
+	},
+
+	_valueMin: function() {
+		return this.options.min;
+	},
+
+	_valueMax: function() {
+		return this.max;
+	},
+
+	_refreshRange: function( orientation ) {
+		if ( orientation === "vertical" ) {
+			this.range.css( { "width": "", "left": "" } );
+		}
+		if ( orientation === "horizontal" ) {
+			this.range.css( { "height": "", "bottom": "" } );
+		}
+	},
+
+	_refreshValue: function() {
+		var lastValPercent, valPercent, value, valueMin, valueMax,
+			oRange = this.options.range,
+			o = this.options,
+			that = this,
+			animate = ( !this._animateOff ) ? o.animate : false,
+			_set = {};
+
+		if ( this._hasMultipleValues() ) {
+			this.handles.each( function( i ) {
+				valPercent = ( that.values( i ) - that._valueMin() ) / ( that._valueMax() -
+					that._valueMin() ) * 100;
+				_set[ that.orientation === "horizontal" ? "left" : "bottom" ] = valPercent + "%";
+				$( this ).stop( 1, 1 )[ animate ? "animate" : "css" ]( _set, o.animate );
+				if ( that.options.range === true ) {
+					if ( that.orientation === "horizontal" ) {
+						if ( i === 0 ) {
+							that.range.stop( 1, 1 )[ animate ? "animate" : "css" ]( {
+								left: valPercent + "%"
+							}, o.animate );
+						}
+						if ( i === 1 ) {
+							that.range[ animate ? "animate" : "css" ]( {
+								width: ( valPercent - lastValPercent ) + "%"
+							}, {
+								queue: false,
+								duration: o.animate
+							} );
+						}
+					} else {
+						if ( i === 0 ) {
+							that.range.stop( 1, 1 )[ animate ? "animate" : "css" ]( {
+								bottom: ( valPercent ) + "%"
+							}, o.animate );
+						}
+						if ( i === 1 ) {
+							that.range[ animate ? "animate" : "css" ]( {
+								height: ( valPercent - lastValPercent ) + "%"
+							}, {
+								queue: false,
+								duration: o.animate
+							} );
+						}
+					}
+				}
+				lastValPercent = valPercent;
+			} );
+		} else {
+			value = this.value();
+			valueMin = this._valueMin();
+			valueMax = this._valueMax();
+			valPercent = ( valueMax !== valueMin ) ?
+					( value - valueMin ) / ( valueMax - valueMin ) * 100 :
+					0;
+			_set[ this.orientation === "horizontal" ? "left" : "bottom" ] = valPercent + "%";
+			this.handle.stop( 1, 1 )[ animate ? "animate" : "css" ]( _set, o.animate );
+
+			if ( oRange === "min" && this.orientation === "horizontal" ) {
+				this.range.stop( 1, 1 )[ animate ? "animate" : "css" ]( {
+					width: valPercent + "%"
+				}, o.animate );
+			}
+			if ( oRange === "max" && this.orientation === "horizontal" ) {
+				this.range.stop( 1, 1 )[ animate ? "animate" : "css" ]( {
+					width: ( 100 - valPercent ) + "%"
+				}, o.animate );
+			}
+			if ( oRange === "min" && this.orientation === "vertical" ) {
+				this.range.stop( 1, 1 )[ animate ? "animate" : "css" ]( {
+					height: valPercent + "%"
+				}, o.animate );
+			}
+			if ( oRange === "max" && this.orientation === "vertical" ) {
+				this.range.stop( 1, 1 )[ animate ? "animate" : "css" ]( {
+					height: ( 100 - valPercent ) + "%"
+				}, o.animate );
+			}
+		}
+	},
+
+	_handleEvents: {
+		keydown: function( event ) {
+			var allowed, curVal, newVal, step,
+				index = $( event.target ).data( "ui-slider-handle-index" );
+
+			switch ( event.keyCode ) {
+				case $.ui.keyCode.HOME:
+				case $.ui.keyCode.END:
+				case $.ui.keyCode.PAGE_UP:
+				case $.ui.keyCode.PAGE_DOWN:
+				case $.ui.keyCode.UP:
+				case $.ui.keyCode.RIGHT:
+				case $.ui.keyCode.DOWN:
+				case $.ui.keyCode.LEFT:
+					event.preventDefault();
+					if ( !this._keySliding ) {
+						this._keySliding = true;
+						this._addClass( $( event.target ), null, "ui-state-active" );
+						allowed = this._start( event, index );
+						if ( allowed === false ) {
+							return;
+						}
+					}
+					break;
+			}
+
+			step = this.options.step;
+			if ( this._hasMultipleValues() ) {
+				curVal = newVal = this.values( index );
+			} else {
+				curVal = newVal = this.value();
+			}
+
+			switch ( event.keyCode ) {
+				case $.ui.keyCode.HOME:
+					newVal = this._valueMin();
+					break;
+				case $.ui.keyCode.END:
+					newVal = this._valueMax();
+					break;
+				case $.ui.keyCode.PAGE_UP:
+					newVal = this._trimAlignValue(
+						curVal + ( ( this._valueMax() - this._valueMin() ) / this.numPages )
+					);
+					break;
+				case $.ui.keyCode.PAGE_DOWN:
+					newVal = this._trimAlignValue(
+						curVal - ( ( this._valueMax() - this._valueMin() ) / this.numPages ) );
+					break;
+				case $.ui.keyCode.UP:
+				case $.ui.keyCode.RIGHT:
+					if ( curVal === this._valueMax() ) {
+						return;
+					}
+					newVal = this._trimAlignValue( curVal + step );
+					break;
+				case $.ui.keyCode.DOWN:
+				case $.ui.keyCode.LEFT:
+					if ( curVal === this._valueMin() ) {
+						return;
+					}
+					newVal = this._trimAlignValue( curVal - step );
+					break;
+			}
+
+			this._slide( event, index, newVal );
+		},
+		keyup: function( event ) {
+			var index = $( event.target ).data( "ui-slider-handle-index" );
+
+			if ( this._keySliding ) {
+				this._keySliding = false;
+				this._stop( event, index );
+				this._change( event, index );
+				this._removeClass( $( event.target ), null, "ui-state-active" );
+			}
+		}
+	}
+} );
+
+
+/*!
+ * jQuery UI Sortable 1.12.1
+ * http://jqueryui.com
+ *
+ * Copyright jQuery Foundation and other contributors
+ * Released under the MIT license.
+ * http://jquery.org/license
+ */
+
+//>>label: Sortable
+//>>group: Interactions
+//>>description: Enables items in a list to be sorted using the mouse.
+//>>docs: http://api.jqueryui.com/sortable/
+//>>demos: http://jqueryui.com/sortable/
+//>>css.structure: ../../themes/base/sortable.css
+
+
+
+var widgetsSortable = $.widget( "ui.sortable", $.ui.mouse, {
+	version: "1.12.1",
+	widgetEventPrefix: "sort",
+	ready: false,
+	options: {
+		appendTo: "parent",
+		axis: false,
+		connectWith: false,
+		containment: false,
+		cursor: "auto",
+		cursorAt: false,
+		dropOnEmpty: true,
+		forcePlaceholderSize: false,
+		forceHelperSize: false,
+		grid: false,
+		handle: false,
+		helper: "original",
+		items: "> *",
+		opacity: false,
+		placeholder: false,
+		revert: false,
+		scroll: true,
+		scrollSensitivity: 20,
+		scrollSpeed: 20,
+		scope: "default",
+		tolerance: "intersect",
+		zIndex: 1000,
+
+		// Callbacks
+		activate: null,
+		beforeStop: null,
+		change: null,
+		deactivate: null,
+		out: null,
+		over: null,
+		receive: null,
+		remove: null,
+		sort: null,
+		start: null,
+		stop: null,
+		update: null
+	},
+
+	_isOverAxis: function( x, reference, size ) {
+		return ( x >= reference ) && ( x < ( reference + size ) );
+	},
+
+	_isFloating: function( item ) {
+		return ( /left|right/ ).test( item.css( "float" ) ) ||
+			( /inline|table-cell/ ).test( item.css( "display" ) );
+	},
+
+	_create: function() {
+		this.containerCache = {};
+		this._addClass( "ui-sortable" );
+
+		//Get the items
+		this.refresh();
+
+		//Let's determine the parent's offset
+		this.offset = this.element.offset();
+
+		//Initialize mouse events for interaction
+		this._mouseInit();
+
+		this._setHandleClassName();
+
+		//We're ready to go
+		this.ready = true;
+
+	},
+
+	_setOption: function( key, value ) {
+		this._super( key, value );
+
+		if ( key === "handle" ) {
+			this._setHandleClassName();
+		}
+	},
+
+	_setHandleClassName: function() {
+		var that = this;
+		this._removeClass( this.element.find( ".ui-sortable-handle" ), "ui-sortable-handle" );
+		$.each( this.items, function() {
+			that._addClass(
+				this.instance.options.handle ?
+					this.item.find( this.instance.options.handle ) :
+					this.item,
+				"ui-sortable-handle"
+			);
+		} );
+	},
+
+	_destroy: function() {
+		this._mouseDestroy();
+
+		for ( var i = this.items.length - 1; i >= 0; i-- ) {
+			this.items[ i ].item.removeData( this.widgetName + "-item" );
+		}
+
+		return this;
+	},
+
+	_mouseCapture: function( event, overrideHandle ) {
+		var currentItem = null,
+			validHandle = false,
+			that = this;
+
+		if ( this.reverting ) {
+			return false;
+		}
+
+		if ( this.options.disabled || this.options.type === "static" ) {
+			return false;
+		}
+
+		//We have to refresh the items data once first
+		this._refreshItems( event );
+
+		//Find out if the clicked node (or one of its parents) is a actual item in this.items
+		$( event.target ).parents().each( function() {
+			if ( $.data( this, that.widgetName + "-item" ) === that ) {
+				currentItem = $( this );
+				return false;
+			}
+		} );
+		if ( $.data( event.target, that.widgetName + "-item" ) === that ) {
+			currentItem = $( event.target );
+		}
+
+		if ( !currentItem ) {
+			return false;
+		}
+		if ( this.options.handle && !overrideHandle ) {
+			$( this.options.handle, currentItem ).find( "*" ).addBack().each( function() {
+				if ( this === event.target ) {
+					validHandle = true;
+				}
+			} );
+			if ( !validHandle ) {
+				return false;
+			}
+		}
+
+		this.currentItem = currentItem;
+		this._removeCurrentsFromItems();
+		return true;
+
+	},
+
+	_mouseStart: function( event, overrideHandle, noActivation ) {
+
+		var i, body,
+			o = this.options;
+
+		this.currentContainer = this;
+
+		//We only need to call refreshPositions, because the refreshItems call has been moved to
+		// mouseCapture
+		this.refreshPositions();
+
+		//Create and append the visible helper
+		this.helper = this._createHelper( event );
+
+		//Cache the helper size
+		this._cacheHelperProportions();
+
+		/*
+		 * - Position generation -
+		 * This block generates everything position related - it's the core of draggables.
+		 */
+
+		//Cache the margins of the original element
+		this._cacheMargins();
+
+		//Get the next scrolling parent
+		this.scrollParent = this.helper.scrollParent();
+
+		//The element's absolute position on the page minus margins
+		this.offset = this.currentItem.offset();
+		this.offset = {
+			top: this.offset.top - this.margins.top,
+			left: this.offset.left - this.margins.left
+		};
+
+		$.extend( this.offset, {
+			click: { //Where the click happened, relative to the element
+				left: event.pageX - this.offset.left,
+				top: event.pageY - this.offset.top
+			},
+			parent: this._getParentOffset(),
+
+			// This is a relative to absolute position minus the actual position calculation -
+			// only used for relative positioned helper
+			relative: this._getRelativeOffset()
+		} );
+
+		// Only after we got the offset, we can change the helper's position to absolute
+		// TODO: Still need to figure out a way to make relative sorting possible
+		this.helper.css( "position", "absolute" );
+		this.cssPosition = this.helper.css( "position" );
+
+		//Generate the original position
+		this.originalPosition = this._generatePosition( event );
+		this.originalPageX = event.pageX;
+		this.originalPageY = event.pageY;
+
+		//Adjust the mouse offset relative to the helper if "cursorAt" is supplied
+		( o.cursorAt && this._adjustOffsetFromHelper( o.cursorAt ) );
+
+		//Cache the former DOM position
+		this.domPosition = {
+			prev: this.currentItem.prev()[ 0 ],
+			parent: this.currentItem.parent()[ 0 ]
+		};
+
+		// If the helper is not the original, hide the original so it's not playing any role during
+		// the drag, won't cause anything bad this way
+		if ( this.helper[ 0 ] !== this.currentItem[ 0 ] ) {
+			this.currentItem.hide();
+		}
+
+		//Create the placeholder
+		this._createPlaceholder();
+
+		//Set a containment if given in the options
+		if ( o.containment ) {
+			this._setContainment();
+		}
+
+		if ( o.cursor && o.cursor !== "auto" ) { // cursor option
+			body = this.document.find( "body" );
+
+			// Support: IE
+			this.storedCursor = body.css( "cursor" );
+			body.css( "cursor", o.cursor );
+
+			this.storedStylesheet =
+				$( "<style>*{ cursor: " + o.cursor + " !important; }</style>" ).appendTo( body );
+		}
+
+		if ( o.opacity ) { // opacity option
+			if ( this.helper.css( "opacity" ) ) {
+				this._storedOpacity = this.helper.css( "opacity" );
+			}
+			this.helper.css( "opacity", o.opacity );
+		}
+
+		if ( o.zIndex ) { // zIndex option
+			if ( this.helper.css( "zIndex" ) ) {
+				this._storedZIndex = this.helper.css( "zIndex" );
+			}
+			this.helper.css( "zIndex", o.zIndex );
+		}
+
+		//Prepare scrolling
+		if ( this.scrollParent[ 0 ] !== this.document[ 0 ] &&
+				this.scrollParent[ 0 ].tagName !== "HTML" ) {
+			this.overflowOffset = this.scrollParent.offset();
+		}
+
+		//Call callbacks
+		this._trigger( "start", event, this._uiHash() );
+
+		//Recache the helper size
+		if ( !this._preserveHelperProportions ) {
+			this._cacheHelperProportions();
+		}
+
+		//Post "activate" events to possible containers
+		if ( !noActivation ) {
+			for ( i = this.containers.length - 1; i >= 0; i-- ) {
+				this.containers[ i ]._trigger( "activate", event, this._uiHash( this ) );
+			}
+		}
+
+		//Prepare possible droppables
+		if ( $.ui.ddmanager ) {
+			$.ui.ddmanager.current = this;
+		}
+
+		if ( $.ui.ddmanager && !o.dropBehaviour ) {
+			$.ui.ddmanager.prepareOffsets( this, event );
+		}
+
+		this.dragging = true;
+
+		this._addClass( this.helper, "ui-sortable-helper" );
+
+		// Execute the drag once - this causes the helper not to be visiblebefore getting its
+		// correct position
+		this._mouseDrag( event );
+		return true;
+
+	},
+
+	_mouseDrag: function( event ) {
+		var i, item, itemElement, intersection,
+			o = this.options,
+			scrolled = false;
+
+		//Compute the helpers position
+		this.position = this._generatePosition( event );
+		this.positionAbs = this._convertPositionTo( "absolute" );
+
+		if ( !this.lastPositionAbs ) {
+			this.lastPositionAbs = this.positionAbs;
+		}
+
+		//Do scrolling
+		if ( this.options.scroll ) {
+			if ( this.scrollParent[ 0 ] !== this.document[ 0 ] &&
+					this.scrollParent[ 0 ].tagName !== "HTML" ) {
+
+				if ( ( this.overflowOffset.top + this.scrollParent[ 0 ].offsetHeight ) -
+						event.pageY < o.scrollSensitivity ) {
+					this.scrollParent[ 0 ].scrollTop =
+						scrolled = this.scrollParent[ 0 ].scrollTop + o.scrollSpeed;
+				} else if ( event.pageY - this.overflowOffset.top < o.scrollSensitivity ) {
+					this.scrollParent[ 0 ].scrollTop =
+						scrolled = this.scrollParent[ 0 ].scrollTop - o.scrollSpeed;
+				}
+
+				if ( ( this.overflowOffset.left + this.scrollParent[ 0 ].offsetWidth ) -
+						event.pageX < o.scrollSensitivity ) {
+					this.scrollParent[ 0 ].scrollLeft = scrolled =
+						this.scrollParent[ 0 ].scrollLeft + o.scrollSpeed;
+				} else if ( event.pageX - this.overflowOffset.left < o.scrollSensitivity ) {
+					this.scrollParent[ 0 ].scrollLeft = scrolled =
+						this.scrollParent[ 0 ].scrollLeft - o.scrollSpeed;
+				}
+
+			} else {
+
+				if ( event.pageY - this.document.scrollTop() < o.scrollSensitivity ) {
+					scrolled = this.document.scrollTop( this.document.scrollTop() - o.scrollSpeed );
+				} else if ( this.window.height() - ( event.pageY - this.document.scrollTop() ) <
+						o.scrollSensitivity ) {
+					scrolled = this.document.scrollTop( this.document.scrollTop() + o.scrollSpeed );
+				}
+
+				if ( event.pageX - this.document.scrollLeft() < o.scrollSensitivity ) {
+					scrolled = this.document.scrollLeft(
+						this.document.scrollLeft() - o.scrollSpeed
+					);
+				} else if ( this.window.width() - ( event.pageX - this.document.scrollLeft() ) <
+						o.scrollSensitivity ) {
+					scrolled = this.document.scrollLeft(
+						this.document.scrollLeft() + o.scrollSpeed
+					);
+				}
+
+			}
+
+			if ( scrolled !== false && $.ui.ddmanager && !o.dropBehaviour ) {
+				$.ui.ddmanager.prepareOffsets( this, event );
+			}
+		}
+
+		//Regenerate the absolute position used for position checks
+		this.positionAbs = this._convertPositionTo( "absolute" );
+
+		//Set the helper position
+		if ( !this.options.axis || this.options.axis !== "y" ) {
+			this.helper[ 0 ].style.left = this.position.left + "px";
+		}
+		if ( !this.options.axis || this.options.axis !== "x" ) {
+			this.helper[ 0 ].style.top = this.position.top + "px";
+		}
+
+		//Rearrange
+		for ( i = this.items.length - 1; i >= 0; i-- ) {
+
+			//Cache variables and intersection, continue if no intersection
+			item = this.items[ i ];
+			itemElement = item.item[ 0 ];
+			intersection = this._intersectsWithPointer( item );
+			if ( !intersection ) {
+				continue;
+			}
+
+			// Only put the placeholder inside the current Container, skip all
+			// items from other containers. This works because when moving
+			// an item from one container to another the
+			// currentContainer is switched before the placeholder is moved.
+			//
+			// Without this, moving items in "sub-sortables" can cause
+			// the placeholder to jitter between the outer and inner container.
+			if ( item.instance !== this.currentContainer ) {
+				continue;
+			}
+
+			// Cannot intersect with itself
+			// no useless actions that have been done before
+			// no action if the item moved is the parent of the item checked
+			if ( itemElement !== this.currentItem[ 0 ] &&
+				this.placeholder[ intersection === 1 ? "next" : "prev" ]()[ 0 ] !== itemElement &&
+				!$.contains( this.placeholder[ 0 ], itemElement ) &&
+				( this.options.type === "semi-dynamic" ?
+					!$.contains( this.element[ 0 ], itemElement ) :
+					true
+				)
+			) {
+
+				this.direction = intersection === 1 ? "down" : "up";
+
+				if ( this.options.tolerance === "pointer" || this._intersectsWithSides( item ) ) {
+					this._rearrange( event, item );
+				} else {
+					break;
+				}
+
+				this._trigger( "change", event, this._uiHash() );
+				break;
+			}
+		}
+
+		//Post events to containers
+		this._contactContainers( event );
+
+		//Interconnect with droppables
+		if ( $.ui.ddmanager ) {
+			$.ui.ddmanager.drag( this, event );
+		}
+
+		//Call callbacks
+		this._trigger( "sort", event, this._uiHash() );
+
+		this.lastPositionAbs = this.positionAbs;
+		return false;
+
+	},
+
+	_mouseStop: function( event, noPropagation ) {
+
+		if ( !event ) {
+			return;
+		}
+
+		//If we are using droppables, inform the manager about the drop
+		if ( $.ui.ddmanager && !this.options.dropBehaviour ) {
+			$.ui.ddmanager.drop( this, event );
+		}
+
+		if ( this.options.revert ) {
+			var that = this,
+				cur = this.placeholder.offset(),
+				axis = this.options.axis,
+				animation = {};
+
+			if ( !axis || axis === "x" ) {
+				animation.left = cur.left - this.offset.parent.left - this.margins.left +
+					( this.offsetParent[ 0 ] === this.document[ 0 ].body ?
+						0 :
+						this.offsetParent[ 0 ].scrollLeft
+					);
+			}
+			if ( !axis || axis === "y" ) {
+				animation.top = cur.top - this.offset.parent.top - this.margins.top +
+					( this.offsetParent[ 0 ] === this.document[ 0 ].body ?
+						0 :
+						this.offsetParent[ 0 ].scrollTop
+					);
+			}
+			this.reverting = true;
+			$( this.helper ).animate(
+				animation,
+				parseInt( this.options.revert, 10 ) || 500,
+				function() {
+					that._clear( event );
+				}
+			);
+		} else {
+			this._clear( event, noPropagation );
+		}
+
+		return false;
+
+	},
+
+	cancel: function() {
+
+		if ( this.dragging ) {
+
+			this._mouseUp( new $.Event( "mouseup", { target: null } ) );
+
+			if ( this.options.helper === "original" ) {
+				this.currentItem.css( this._storedCSS );
+				this._removeClass( this.currentItem, "ui-sortable-helper" );
+			} else {
+				this.currentItem.show();
+			}
+
+			//Post deactivating events to containers
+			for ( var i = this.containers.length - 1; i >= 0; i-- ) {
+				this.containers[ i ]._trigger( "deactivate", null, this._uiHash( this ) );
+				if ( this.containers[ i ].containerCache.over ) {
+					this.containers[ i ]._trigger( "out", null, this._uiHash( this ) );
+					this.containers[ i ].containerCache.over = 0;
+				}
+			}
+
+		}
+
+		if ( this.placeholder ) {
+
+			//$(this.placeholder[0]).remove(); would have been the jQuery way - unfortunately,
+			// it unbinds ALL events from the original node!
+			if ( this.placeholder[ 0 ].parentNode ) {
+				this.placeholder[ 0 ].parentNode.removeChild( this.placeholder[ 0 ] );
+			}
+			if ( this.options.helper !== "original" && this.helper &&
+					this.helper[ 0 ].parentNode ) {
+				this.helper.remove();
+			}
+
+			$.extend( this, {
+				helper: null,
+				dragging: false,
+				reverting: false,
+				_noFinalSort: null
+			} );
+
+			if ( this.domPosition.prev ) {
+				$( this.domPosition.prev ).after( this.currentItem );
+			} else {
+				$( this.domPosition.parent ).prepend( this.currentItem );
+			}
+		}
+
+		return this;
+
+	},
+
+	serialize: function( o ) {
+
+		var items = this._getItemsAsjQuery( o && o.connected ),
+			str = [];
+		o = o || {};
+
+		$( items ).each( function() {
+			var res = ( $( o.item || this ).attr( o.attribute || "id" ) || "" )
+				.match( o.expression || ( /(.+)[\-=_](.+)/ ) );
+			if ( res ) {
+				str.push(
+					( o.key || res[ 1 ] + "[]" ) +
+					"=" + ( o.key && o.expression ? res[ 1 ] : res[ 2 ] ) );
+			}
+		} );
+
+		if ( !str.length && o.key ) {
+			str.push( o.key + "=" );
+		}
+
+		return str.join( "&" );
+
+	},
+
+	toArray: function( o ) {
+
+		var items = this._getItemsAsjQuery( o && o.connected ),
+			ret = [];
+
+		o = o || {};
+
+		items.each( function() {
+			ret.push( $( o.item || this ).attr( o.attribute || "id" ) || "" );
+		} );
+		return ret;
+
+	},
+
+	/* Be careful with the following core functions */
+	_intersectsWith: function( item ) {
+
+		var x1 = this.positionAbs.left,
+			x2 = x1 + this.helperProportions.width,
+			y1 = this.positionAbs.top,
+			y2 = y1 + this.helperProportions.height,
+			l = item.left,
+			r = l + item.width,
+			t = item.top,
+			b = t + item.height,
+			dyClick = this.offset.click.top,
+			dxClick = this.offset.click.left,
+			isOverElementHeight = ( this.options.axis === "x" ) || ( ( y1 + dyClick ) > t &&
+				( y1 + dyClick ) < b ),
+			isOverElementWidth = ( this.options.axis === "y" ) || ( ( x1 + dxClick ) > l &&
+				( x1 + dxClick ) < r ),
+			isOverElement = isOverElementHeight && isOverElementWidth;
+
+		if ( this.options.tolerance === "pointer" ||
+			this.options.forcePointerForContainers ||
+			( this.options.tolerance !== "pointer" &&
+				this.helperProportions[ this.floating ? "width" : "height" ] >
+				item[ this.floating ? "width" : "height" ] )
+		) {
+			return isOverElement;
+		} else {
+
+			return ( l < x1 + ( this.helperProportions.width / 2 ) && // Right Half
+				x2 - ( this.helperProportions.width / 2 ) < r && // Left Half
+				t < y1 + ( this.helperProportions.height / 2 ) && // Bottom Half
+				y2 - ( this.helperProportions.height / 2 ) < b ); // Top Half
+
+		}
+	},
+
+	_intersectsWithPointer: function( item ) {
+		var verticalDirection, horizontalDirection,
+			isOverElementHeight = ( this.options.axis === "x" ) ||
+				this._isOverAxis(
+					this.positionAbs.top + this.offset.click.top, item.top, item.height ),
+			isOverElementWidth = ( this.options.axis === "y" ) ||
+				this._isOverAxis(
+					this.positionAbs.left + this.offset.click.left, item.left, item.width ),
+			isOverElement = isOverElementHeight && isOverElementWidth;
+
+		if ( !isOverElement ) {
+			return false;
+		}
+
+		verticalDirection = this._getDragVerticalDirection();
+		horizontalDirection = this._getDragHorizontalDirection();
+
+		return this.floating ?
+			( ( horizontalDirection === "right" || verticalDirection === "down" ) ? 2 : 1 )
+			: ( verticalDirection && ( verticalDirection === "down" ? 2 : 1 ) );
+
+	},
+
+	_intersectsWithSides: function( item ) {
+
+		var isOverBottomHalf = this._isOverAxis( this.positionAbs.top +
+				this.offset.click.top, item.top + ( item.height / 2 ), item.height ),
+			isOverRightHalf = this._isOverAxis( this.positionAbs.left +
+				this.offset.click.left, item.left + ( item.width / 2 ), item.width ),
+			verticalDirection = this._getDragVerticalDirection(),
+			horizontalDirection = this._getDragHorizontalDirection();
+
+		if ( this.floating && horizontalDirection ) {
+			return ( ( horizontalDirection === "right" && isOverRightHalf ) ||
+				( horizontalDirection === "left" && !isOverRightHalf ) );
+		} else {
+			return verticalDirection && ( ( verticalDirection === "down" && isOverBottomHalf ) ||
+				( verticalDirection === "up" && !isOverBottomHalf ) );
+		}
+
+	},
+
+	_getDragVerticalDirection: function() {
+		var delta = this.positionAbs.top - this.lastPositionAbs.top;
+		return delta !== 0 && ( delta > 0 ? "down" : "up" );
+	},
+
+	_getDragHorizontalDirection: function() {
+		var delta = this.positionAbs.left - this.lastPositionAbs.left;
+		return delta !== 0 && ( delta > 0 ? "right" : "left" );
+	},
+
+	refresh: function( event ) {
+		this._refreshItems( event );
+		this._setHandleClassName();
+		this.refreshPositions();
+		return this;
+	},
+
+	_connectWith: function() {
+		var options = this.options;
+		return options.connectWith.constructor === String ?
+			[ options.connectWith ] :
+			options.connectWith;
+	},
+
+	_getItemsAsjQuery: function( connected ) {
+
+		var i, j, cur, inst,
+			items = [],
+			queries = [],
+			connectWith = this._connectWith();
+
+		if ( connectWith && connected ) {
+			for ( i = connectWith.length - 1; i >= 0; i-- ) {
+				cur = $( connectWith[ i ], this.document[ 0 ] );
+				for ( j = cur.length - 1; j >= 0; j-- ) {
+					inst = $.data( cur[ j ], this.widgetFullName );
+					if ( inst && inst !== this && !inst.options.disabled ) {
+						queries.push( [ $.isFunction( inst.options.items ) ?
+							inst.options.items.call( inst.element ) :
+							$( inst.options.items, inst.element )
+								.not( ".ui-sortable-helper" )
+								.not( ".ui-sortable-placeholder" ), inst ] );
+					}
+				}
+			}
+		}
+
+		queries.push( [ $.isFunction( this.options.items ) ?
+			this.options.items
+				.call( this.element, null, { options: this.options, item: this.currentItem } ) :
+			$( this.options.items, this.element )
+				.not( ".ui-sortable-helper" )
+				.not( ".ui-sortable-placeholder" ), this ] );
+
+		function addItems() {
+			items.push( this );
+		}
+		for ( i = queries.length - 1; i >= 0; i-- ) {
+			queries[ i ][ 0 ].each( addItems );
+		}
+
+		return $( items );
+
+	},
+
+	_removeCurrentsFromItems: function() {
+
+		var list = this.currentItem.find( ":data(" + this.widgetName + "-item)" );
+
+		this.items = $.grep( this.items, function( item ) {
+			for ( var j = 0; j < list.length; j++ ) {
+				if ( list[ j ] === item.item[ 0 ] ) {
+					return false;
+				}
+			}
+			return true;
+		} );
+
+	},
+
+	_refreshItems: function( event ) {
+
+		this.items = [];
+		this.containers = [ this ];
+
+		var i, j, cur, inst, targetData, _queries, item, queriesLength,
+			items = this.items,
+			queries = [ [ $.isFunction( this.options.items ) ?
+				this.options.items.call( this.element[ 0 ], event, { item: this.currentItem } ) :
+				$( this.options.items, this.element ), this ] ],
+			connectWith = this._connectWith();
+
+		//Shouldn't be run the first time through due to massive slow-down
+		if ( connectWith && this.ready ) {
+			for ( i = connectWith.length - 1; i >= 0; i-- ) {
+				cur = $( connectWith[ i ], this.document[ 0 ] );
+				for ( j = cur.length - 1; j >= 0; j-- ) {
+					inst = $.data( cur[ j ], this.widgetFullName );
+					if ( inst && inst !== this && !inst.options.disabled ) {
+						queries.push( [ $.isFunction( inst.options.items ) ?
+							inst.options.items
+								.call( inst.element[ 0 ], event, { item: this.currentItem } ) :
+							$( inst.options.items, inst.element ), inst ] );
+						this.containers.push( inst );
+					}
+				}
+			}
+		}
+
+		for ( i = queries.length - 1; i >= 0; i-- ) {
+			targetData = queries[ i ][ 1 ];
+			_queries = queries[ i ][ 0 ];
+
+			for ( j = 0, queriesLength = _queries.length; j < queriesLength; j++ ) {
+				item = $( _queries[ j ] );
+
+				// Data for target checking (mouse manager)
+				item.data( this.widgetName + "-item", targetData );
+
+				items.push( {
+					item: item,
+					instance: targetData,
+					width: 0, height: 0,
+					left: 0, top: 0
+				} );
+			}
+		}
+
+	},
+
+	refreshPositions: function( fast ) {
+
+		// Determine whether items are being displayed horizontally
+		this.floating = this.items.length ?
+			this.options.axis === "x" || this._isFloating( this.items[ 0 ].item ) :
+			false;
+
+		//This has to be redone because due to the item being moved out/into the offsetParent,
+		// the offsetParent's position will change
+		if ( this.offsetParent && this.helper ) {
+			this.offset.parent = this._getParentOffset();
+		}
+
+		var i, item, t, p;
+
+		for ( i = this.items.length - 1; i >= 0; i-- ) {
+			item = this.items[ i ];
+
+			//We ignore calculating positions of all connected containers when we're not over them
+			if ( item.instance !== this.currentContainer && this.currentContainer &&
+					item.item[ 0 ] !== this.currentItem[ 0 ] ) {
+				continue;
+			}
+
+			t = this.options.toleranceElement ?
+				$( this.options.toleranceElement, item.item ) :
+				item.item;
+
+			if ( !fast ) {
+				item.width = t.outerWidth();
+				item.height = t.outerHeight();
+			}
+
+			p = t.offset();
+			item.left = p.left;
+			item.top = p.top;
+		}
+
+		if ( this.options.custom && this.options.custom.refreshContainers ) {
+			this.options.custom.refreshContainers.call( this );
+		} else {
+			for ( i = this.containers.length - 1; i >= 0; i-- ) {
+				p = this.containers[ i ].element.offset();
+				this.containers[ i ].containerCache.left = p.left;
+				this.containers[ i ].containerCache.top = p.top;
+				this.containers[ i ].containerCache.width =
+					this.containers[ i ].element.outerWidth();
+				this.containers[ i ].containerCache.height =
+					this.containers[ i ].element.outerHeight();
+			}
+		}
+
+		return this;
+	},
+
+	_createPlaceholder: function( that ) {
+		that = that || this;
+		var className,
+			o = that.options;
+
+		if ( !o.placeholder || o.placeholder.constructor === String ) {
+			className = o.placeholder;
+			o.placeholder = {
+				element: function() {
+
+					var nodeName = that.currentItem[ 0 ].nodeName.toLowerCase(),
+						element = $( "<" + nodeName + ">", that.document[ 0 ] );
+
+						that._addClass( element, "ui-sortable-placeholder",
+								className || that.currentItem[ 0 ].className )
+							._removeClass( element, "ui-sortable-helper" );
+
+					if ( nodeName === "tbody" ) {
+						that._createTrPlaceholder(
+							that.currentItem.find( "tr" ).eq( 0 ),
+							$( "<tr>", that.document[ 0 ] ).appendTo( element )
+						);
+					} else if ( nodeName === "tr" ) {
+						that._createTrPlaceholder( that.currentItem, element );
+					} else if ( nodeName === "img" ) {
+						element.attr( "src", that.currentItem.attr( "src" ) );
+					}
+
+					if ( !className ) {
+						element.css( "visibility", "hidden" );
+					}
+
+					return element;
+				},
+				update: function( container, p ) {
+
+					// 1. If a className is set as 'placeholder option, we don't force sizes -
+					// the class is responsible for that
+					// 2. The option 'forcePlaceholderSize can be enabled to force it even if a
+					// class name is specified
+					if ( className && !o.forcePlaceholderSize ) {
+						return;
+					}
+
+					//If the element doesn't have a actual height by itself (without styles coming
+					// from a stylesheet), it receives the inline height from the dragged item
+					if ( !p.height() ) {
+						p.height(
+							that.currentItem.innerHeight() -
+							parseInt( that.currentItem.css( "paddingTop" ) || 0, 10 ) -
+							parseInt( that.currentItem.css( "paddingBottom" ) || 0, 10 ) );
+					}
+					if ( !p.width() ) {
+						p.width(
+							that.currentItem.innerWidth() -
+							parseInt( that.currentItem.css( "paddingLeft" ) || 0, 10 ) -
+							parseInt( that.currentItem.css( "paddingRight" ) || 0, 10 ) );
+					}
+				}
+			};
+		}
+
+		//Create the placeholder
+		that.placeholder = $( o.placeholder.element.call( that.element, that.currentItem ) );
+
+		//Append it after the actual current item
+		that.currentItem.after( that.placeholder );
+
+		//Update the size of the placeholder (TODO: Logic to fuzzy, see line 316/317)
+		o.placeholder.update( that, that.placeholder );
+
+	},
+
+	_createTrPlaceholder: function( sourceTr, targetTr ) {
+		var that = this;
+
+		sourceTr.children().each( function() {
+			$( "<td>&#160;</td>", that.document[ 0 ] )
+				.attr( "colspan", $( this ).attr( "colspan" ) || 1 )
+				.appendTo( targetTr );
+		} );
+	},
+
+	_contactContainers: function( event ) {
+		var i, j, dist, itemWithLeastDistance, posProperty, sizeProperty, cur, nearBottom,
+			floating, axis,
+			innermostContainer = null,
+			innermostIndex = null;
+
+		// Get innermost container that intersects with item
+		for ( i = this.containers.length - 1; i >= 0; i-- ) {
+
+			// Never consider a container that's located within the item itself
+			if ( $.contains( this.currentItem[ 0 ], this.containers[ i ].element[ 0 ] ) ) {
+				continue;
+			}
+
+			if ( this._intersectsWith( this.containers[ i ].containerCache ) ) {
+
+				// If we've already found a container and it's more "inner" than this, then continue
+				if ( innermostContainer &&
+						$.contains(
+							this.containers[ i ].element[ 0 ],
+							innermostContainer.element[ 0 ] ) ) {
+					continue;
+				}
+
+				innermostContainer = this.containers[ i ];
+				innermostIndex = i;
+
+			} else {
+
+				// container doesn't intersect. trigger "out" event if necessary
+				if ( this.containers[ i ].containerCache.over ) {
+					this.containers[ i ]._trigger( "out", event, this._uiHash( this ) );
+					this.containers[ i ].containerCache.over = 0;
+				}
+			}
+
+		}
+
+		// If no intersecting containers found, return
+		if ( !innermostContainer ) {
+			return;
+		}
+
+		// Move the item into the container if it's not there already
+		if ( this.containers.length === 1 ) {
+			if ( !this.containers[ innermostIndex ].containerCache.over ) {
+				this.containers[ innermostIndex ]._trigger( "over", event, this._uiHash( this ) );
+				this.containers[ innermostIndex ].containerCache.over = 1;
+			}
+		} else {
+
+			// When entering a new container, we will find the item with the least distance and
+			// append our item near it
+			dist = 10000;
+			itemWithLeastDistance = null;
+			floating = innermostContainer.floating || this._isFloating( this.currentItem );
+			posProperty = floating ? "left" : "top";
+			sizeProperty = floating ? "width" : "height";
+			axis = floating ? "pageX" : "pageY";
+
+			for ( j = this.items.length - 1; j >= 0; j-- ) {
+				if ( !$.contains(
+						this.containers[ innermostIndex ].element[ 0 ], this.items[ j ].item[ 0 ] )
+				) {
+					continue;
+				}
+				if ( this.items[ j ].item[ 0 ] === this.currentItem[ 0 ] ) {
+					continue;
+				}
+
+				cur = this.items[ j ].item.offset()[ posProperty ];
+				nearBottom = false;
+				if ( event[ axis ] - cur > this.items[ j ][ sizeProperty ] / 2 ) {
+					nearBottom = true;
+				}
+
+				if ( Math.abs( event[ axis ] - cur ) < dist ) {
+					dist = Math.abs( event[ axis ] - cur );
+					itemWithLeastDistance = this.items[ j ];
+					this.direction = nearBottom ? "up" : "down";
+				}
+			}
+
+			//Check if dropOnEmpty is enabled
+			if ( !itemWithLeastDistance && !this.options.dropOnEmpty ) {
+				return;
+			}
+
+			if ( this.currentContainer === this.containers[ innermostIndex ] ) {
+				if ( !this.currentContainer.containerCache.over ) {
+					this.containers[ innermostIndex ]._trigger( "over", event, this._uiHash() );
+					this.currentContainer.containerCache.over = 1;
+				}
+				return;
+			}
+
+			itemWithLeastDistance ?
+				this._rearrange( event, itemWithLeastDistance, null, true ) :
+				this._rearrange( event, null, this.containers[ innermostIndex ].element, true );
+			this._trigger( "change", event, this._uiHash() );
+			this.containers[ innermostIndex ]._trigger( "change", event, this._uiHash( this ) );
+			this.currentContainer = this.containers[ innermostIndex ];
+
+			//Update the placeholder
+			this.options.placeholder.update( this.currentContainer, this.placeholder );
+
+			this.containers[ innermostIndex ]._trigger( "over", event, this._uiHash( this ) );
+			this.containers[ innermostIndex ].containerCache.over = 1;
+		}
+
+	},
+
+	_createHelper: function( event ) {
+
+		var o = this.options,
+			helper = $.isFunction( o.helper ) ?
+				$( o.helper.apply( this.element[ 0 ], [ event, this.currentItem ] ) ) :
+				( o.helper === "clone" ? this.currentItem.clone() : this.currentItem );
+
+		//Add the helper to the DOM if that didn't happen already
+		if ( !helper.parents( "body" ).length ) {
+			$( o.appendTo !== "parent" ?
+				o.appendTo :
+				this.currentItem[ 0 ].parentNode )[ 0 ].appendChild( helper[ 0 ] );
+		}
+
+		if ( helper[ 0 ] === this.currentItem[ 0 ] ) {
+			this._storedCSS = {
+				width: this.currentItem[ 0 ].style.width,
+				height: this.currentItem[ 0 ].style.height,
+				position: this.currentItem.css( "position" ),
+				top: this.currentItem.css( "top" ),
+				left: this.currentItem.css( "left" )
+			};
+		}
+
+		if ( !helper[ 0 ].style.width || o.forceHelperSize ) {
+			helper.width( this.currentItem.width() );
+		}
+		if ( !helper[ 0 ].style.height || o.forceHelperSize ) {
+			helper.height( this.currentItem.height() );
+		}
+
+		return helper;
+
+	},
+
+	_adjustOffsetFromHelper: function( obj ) {
+		if ( typeof obj === "string" ) {
+			obj = obj.split( " " );
+		}
+		if ( $.isArray( obj ) ) {
+			obj = { left: +obj[ 0 ], top: +obj[ 1 ] || 0 };
+		}
+		if ( "left" in obj ) {
+			this.offset.click.left = obj.left + this.margins.left;
+		}
+		if ( "right" in obj ) {
+			this.offset.click.left = this.helperProportions.width - obj.right + this.margins.left;
+		}
+		if ( "top" in obj ) {
+			this.offset.click.top = obj.top + this.margins.top;
+		}
+		if ( "bottom" in obj ) {
+			this.offset.click.top = this.helperProportions.height - obj.bottom + this.margins.top;
+		}
+	},
+
+	_getParentOffset: function() {
+
+		//Get the offsetParent and cache its position
+		this.offsetParent = this.helper.offsetParent();
+		var po = this.offsetParent.offset();
+
+		// This is a special case where we need to modify a offset calculated on start, since the
+		// following happened:
+		// 1. The position of the helper is absolute, so it's position is calculated based on the
+		// next positioned parent
+		// 2. The actual offset parent is a child of the scroll parent, and the scroll parent isn't
+		// the document, which means that the scroll is included in the initial calculation of the
+		// offset of the parent, and never recalculated upon drag
+		if ( this.cssPosition === "absolute" && this.scrollParent[ 0 ] !== this.document[ 0 ] &&
+				$.contains( this.scrollParent[ 0 ], this.offsetParent[ 0 ] ) ) {
+			po.left += this.scrollParent.scrollLeft();
+			po.top += this.scrollParent.scrollTop();
+		}
+
+		// This needs to be actually done for all browsers, since pageX/pageY includes this
+		// information with an ugly IE fix
+		if ( this.offsetParent[ 0 ] === this.document[ 0 ].body ||
+				( this.offsetParent[ 0 ].tagName &&
+				this.offsetParent[ 0 ].tagName.toLowerCase() === "html" && $.ui.ie ) ) {
+			po = { top: 0, left: 0 };
+		}
+
+		return {
+			top: po.top + ( parseInt( this.offsetParent.css( "borderTopWidth" ), 10 ) || 0 ),
+			left: po.left + ( parseInt( this.offsetParent.css( "borderLeftWidth" ), 10 ) || 0 )
+		};
+
+	},
+
+	_getRelativeOffset: function() {
+
+		if ( this.cssPosition === "relative" ) {
+			var p = this.currentItem.position();
+			return {
+				top: p.top - ( parseInt( this.helper.css( "top" ), 10 ) || 0 ) +
+					this.scrollParent.scrollTop(),
+				left: p.left - ( parseInt( this.helper.css( "left" ), 10 ) || 0 ) +
+					this.scrollParent.scrollLeft()
+			};
+		} else {
+			return { top: 0, left: 0 };
+		}
+
+	},
+
+	_cacheMargins: function() {
+		this.margins = {
+			left: ( parseInt( this.currentItem.css( "marginLeft" ), 10 ) || 0 ),
+			top: ( parseInt( this.currentItem.css( "marginTop" ), 10 ) || 0 )
+		};
+	},
+
+	_cacheHelperProportions: function() {
+		this.helperProportions = {
+			width: this.helper.outerWidth(),
+			height: this.helper.outerHeight()
+		};
+	},
+
+	_setContainment: function() {
+
+		var ce, co, over,
+			o = this.options;
+		if ( o.containment === "parent" ) {
+			o.containment = this.helper[ 0 ].parentNode;
+		}
+		if ( o.containment === "document" || o.containment === "window" ) {
+			this.containment = [
+				0 - this.offset.relative.left - this.offset.parent.left,
+				0 - this.offset.relative.top - this.offset.parent.top,
+				o.containment === "document" ?
+					this.document.width() :
+					this.window.width() - this.helperProportions.width - this.margins.left,
+				( o.containment === "document" ?
+					( this.document.height() || document.body.parentNode.scrollHeight ) :
+					this.window.height() || this.document[ 0 ].body.parentNode.scrollHeight
+				) - this.helperProportions.height - this.margins.top
+			];
+		}
+
+		if ( !( /^(document|window|parent)$/ ).test( o.containment ) ) {
+			ce = $( o.containment )[ 0 ];
+			co = $( o.containment ).offset();
+			over = ( $( ce ).css( "overflow" ) !== "hidden" );
+
+			this.containment = [
+				co.left + ( parseInt( $( ce ).css( "borderLeftWidth" ), 10 ) || 0 ) +
+					( parseInt( $( ce ).css( "paddingLeft" ), 10 ) || 0 ) - this.margins.left,
+				co.top + ( parseInt( $( ce ).css( "borderTopWidth" ), 10 ) || 0 ) +
+					( parseInt( $( ce ).css( "paddingTop" ), 10 ) || 0 ) - this.margins.top,
+				co.left + ( over ? Math.max( ce.scrollWidth, ce.offsetWidth ) : ce.offsetWidth ) -
+					( parseInt( $( ce ).css( "borderLeftWidth" ), 10 ) || 0 ) -
+					( parseInt( $( ce ).css( "paddingRight" ), 10 ) || 0 ) -
+					this.helperProportions.width - this.margins.left,
+				co.top + ( over ? Math.max( ce.scrollHeight, ce.offsetHeight ) : ce.offsetHeight ) -
+					( parseInt( $( ce ).css( "borderTopWidth" ), 10 ) || 0 ) -
+					( parseInt( $( ce ).css( "paddingBottom" ), 10 ) || 0 ) -
+					this.helperProportions.height - this.margins.top
+			];
+		}
+
+	},
+
+	_convertPositionTo: function( d, pos ) {
+
+		if ( !pos ) {
+			pos = this.position;
+		}
+		var mod = d === "absolute" ? 1 : -1,
+			scroll = this.cssPosition === "absolute" &&
+				!( this.scrollParent[ 0 ] !== this.document[ 0 ] &&
+				$.contains( this.scrollParent[ 0 ], this.offsetParent[ 0 ] ) ) ?
+					this.offsetParent :
+					this.scrollParent,
+			scrollIsRootNode = ( /(html|body)/i ).test( scroll[ 0 ].tagName );
+
+		return {
+			top: (
+
+				// The absolute mouse position
+				pos.top	+
+
+				// Only for relative positioned nodes: Relative offset from element to offset parent
+				this.offset.relative.top * mod +
+
+				// The offsetParent's offset without borders (offset + border)
+				this.offset.parent.top * mod -
+				( ( this.cssPosition === "fixed" ?
+					-this.scrollParent.scrollTop() :
+					( scrollIsRootNode ? 0 : scroll.scrollTop() ) ) * mod )
+			),
+			left: (
+
+				// The absolute mouse position
+				pos.left +
+
+				// Only for relative positioned nodes: Relative offset from element to offset parent
+				this.offset.relative.left * mod +
+
+				// The offsetParent's offset without borders (offset + border)
+				this.offset.parent.left * mod	-
+				( ( this.cssPosition === "fixed" ?
+					-this.scrollParent.scrollLeft() : scrollIsRootNode ? 0 :
+					scroll.scrollLeft() ) * mod )
+			)
+		};
+
+	},
+
+	_generatePosition: function( event ) {
+
+		var top, left,
+			o = this.options,
+			pageX = event.pageX,
+			pageY = event.pageY,
+			scroll = this.cssPosition === "absolute" &&
+				!( this.scrollParent[ 0 ] !== this.document[ 0 ] &&
+				$.contains( this.scrollParent[ 0 ], this.offsetParent[ 0 ] ) ) ?
+					this.offsetParent :
+					this.scrollParent,
+				scrollIsRootNode = ( /(html|body)/i ).test( scroll[ 0 ].tagName );
+
+		// This is another very weird special case that only happens for relative elements:
+		// 1. If the css position is relative
+		// 2. and the scroll parent is the document or similar to the offset parent
+		// we have to refresh the relative offset during the scroll so there are no jumps
+		if ( this.cssPosition === "relative" && !( this.scrollParent[ 0 ] !== this.document[ 0 ] &&
+				this.scrollParent[ 0 ] !== this.offsetParent[ 0 ] ) ) {
+			this.offset.relative = this._getRelativeOffset();
+		}
+
+		/*
+		 * - Position constraining -
+		 * Constrain the position to a mix of grid, containment.
+		 */
+
+		if ( this.originalPosition ) { //If we are not dragging yet, we won't check for options
+
+			if ( this.containment ) {
+				if ( event.pageX - this.offset.click.left < this.containment[ 0 ] ) {
+					pageX = this.containment[ 0 ] + this.offset.click.left;
+				}
+				if ( event.pageY - this.offset.click.top < this.containment[ 1 ] ) {
+					pageY = this.containment[ 1 ] + this.offset.click.top;
+				}
+				if ( event.pageX - this.offset.click.left > this.containment[ 2 ] ) {
+					pageX = this.containment[ 2 ] + this.offset.click.left;
+				}
+				if ( event.pageY - this.offset.click.top > this.containment[ 3 ] ) {
+					pageY = this.containment[ 3 ] + this.offset.click.top;
+				}
+			}
+
+			if ( o.grid ) {
+				top = this.originalPageY + Math.round( ( pageY - this.originalPageY ) /
+					o.grid[ 1 ] ) * o.grid[ 1 ];
+				pageY = this.containment ?
+					( ( top - this.offset.click.top >= this.containment[ 1 ] &&
+						top - this.offset.click.top <= this.containment[ 3 ] ) ?
+							top :
+							( ( top - this.offset.click.top >= this.containment[ 1 ] ) ?
+								top - o.grid[ 1 ] : top + o.grid[ 1 ] ) ) :
+								top;
+
+				left = this.originalPageX + Math.round( ( pageX - this.originalPageX ) /
+					o.grid[ 0 ] ) * o.grid[ 0 ];
+				pageX = this.containment ?
+					( ( left - this.offset.click.left >= this.containment[ 0 ] &&
+						left - this.offset.click.left <= this.containment[ 2 ] ) ?
+							left :
+							( ( left - this.offset.click.left >= this.containment[ 0 ] ) ?
+								left - o.grid[ 0 ] : left + o.grid[ 0 ] ) ) :
+								left;
+			}
+
+		}
+
+		return {
+			top: (
+
+				// The absolute mouse position
+				pageY -
+
+				// Click offset (relative to the element)
+				this.offset.click.top -
+
+				// Only for relative positioned nodes: Relative offset from element to offset parent
+				this.offset.relative.top -
+
+				// The offsetParent's offset without borders (offset + border)
+				this.offset.parent.top +
+				( ( this.cssPosition === "fixed" ?
+					-this.scrollParent.scrollTop() :
+					( scrollIsRootNode ? 0 : scroll.scrollTop() ) ) )
+			),
+			left: (
+
+				// The absolute mouse position
+				pageX -
+
+				// Click offset (relative to the element)
+				this.offset.click.left -
+
+				// Only for relative positioned nodes: Relative offset from element to offset parent
+				this.offset.relative.left -
+
+				// The offsetParent's offset without borders (offset + border)
+				this.offset.parent.left +
+				( ( this.cssPosition === "fixed" ?
+					-this.scrollParent.scrollLeft() :
+					scrollIsRootNode ? 0 : scroll.scrollLeft() ) )
+			)
+		};
+
+	},
+
+	_rearrange: function( event, i, a, hardRefresh ) {
+
+		a ? a[ 0 ].appendChild( this.placeholder[ 0 ] ) :
+			i.item[ 0 ].parentNode.insertBefore( this.placeholder[ 0 ],
+				( this.direction === "down" ? i.item[ 0 ] : i.item[ 0 ].nextSibling ) );
+
+		//Various things done here to improve the performance:
+		// 1. we create a setTimeout, that calls refreshPositions
+		// 2. on the instance, we have a counter variable, that get's higher after every append
+		// 3. on the local scope, we copy the counter variable, and check in the timeout,
+		// if it's still the same
+		// 4. this lets only the last addition to the timeout stack through
+		this.counter = this.counter ? ++this.counter : 1;
+		var counter = this.counter;
+
+		this._delay( function() {
+			if ( counter === this.counter ) {
+
+				//Precompute after each DOM insertion, NOT on mousemove
+				this.refreshPositions( !hardRefresh );
+			}
+		} );
+
+	},
+
+	_clear: function( event, noPropagation ) {
+
+		this.reverting = false;
+
+		// We delay all events that have to be triggered to after the point where the placeholder
+		// has been removed and everything else normalized again
+		var i,
+			delayedTriggers = [];
+
+		// We first have to update the dom position of the actual currentItem
+		// Note: don't do it if the current item is already removed (by a user), or it gets
+		// reappended (see #4088)
+		if ( !this._noFinalSort && this.currentItem.parent().length ) {
+			this.placeholder.before( this.currentItem );
+		}
+		this._noFinalSort = null;
+
+		if ( this.helper[ 0 ] === this.currentItem[ 0 ] ) {
+			for ( i in this._storedCSS ) {
+				if ( this._storedCSS[ i ] === "auto" || this._storedCSS[ i ] === "static" ) {
+					this._storedCSS[ i ] = "";
+				}
+			}
+			this.currentItem.css( this._storedCSS );
+			this._removeClass( this.currentItem, "ui-sortable-helper" );
+		} else {
+			this.currentItem.show();
+		}
+
+		if ( this.fromOutside && !noPropagation ) {
+			delayedTriggers.push( function( event ) {
+				this._trigger( "receive", event, this._uiHash( this.fromOutside ) );
+			} );
+		}
+		if ( ( this.fromOutside ||
+				this.domPosition.prev !==
+				this.currentItem.prev().not( ".ui-sortable-helper" )[ 0 ] ||
+				this.domPosition.parent !== this.currentItem.parent()[ 0 ] ) && !noPropagation ) {
+
+			// Trigger update callback if the DOM position has changed
+			delayedTriggers.push( function( event ) {
+				this._trigger( "update", event, this._uiHash() );
+			} );
+		}
+
+		// Check if the items Container has Changed and trigger appropriate
+		// events.
+		if ( this !== this.currentContainer ) {
+			if ( !noPropagation ) {
+				delayedTriggers.push( function( event ) {
+					this._trigger( "remove", event, this._uiHash() );
+				} );
+				delayedTriggers.push( ( function( c ) {
+					return function( event ) {
+						c._trigger( "receive", event, this._uiHash( this ) );
+					};
+				} ).call( this, this.currentContainer ) );
+				delayedTriggers.push( ( function( c ) {
+					return function( event ) {
+						c._trigger( "update", event, this._uiHash( this ) );
+					};
+				} ).call( this, this.currentContainer ) );
+			}
+		}
+
+		//Post events to containers
+		function delayEvent( type, instance, container ) {
+			return function( event ) {
+				container._trigger( type, event, instance._uiHash( instance ) );
+			};
+		}
+		for ( i = this.containers.length - 1; i >= 0; i-- ) {
+			if ( !noPropagation ) {
+				delayedTriggers.push( delayEvent( "deactivate", this, this.containers[ i ] ) );
+			}
+			if ( this.containers[ i ].containerCache.over ) {
+				delayedTriggers.push( delayEvent( "out", this, this.containers[ i ] ) );
+				this.containers[ i ].containerCache.over = 0;
+			}
+		}
+
+		//Do what was originally in plugins
+		if ( this.storedCursor ) {
+			this.document.find( "body" ).css( "cursor", this.storedCursor );
+			this.storedStylesheet.remove();
+		}
+		if ( this._storedOpacity ) {
+			this.helper.css( "opacity", this._storedOpacity );
+		}
+		if ( this._storedZIndex ) {
+			this.helper.css( "zIndex", this._storedZIndex === "auto" ? "" : this._storedZIndex );
+		}
+
+		this.dragging = false;
+
+		if ( !noPropagation ) {
+			this._trigger( "beforeStop", event, this._uiHash() );
+		}
+
+		//$(this.placeholder[0]).remove(); would have been the jQuery way - unfortunately,
+		// it unbinds ALL events from the original node!
+		this.placeholder[ 0 ].parentNode.removeChild( this.placeholder[ 0 ] );
+
+		if ( !this.cancelHelperRemoval ) {
+			if ( this.helper[ 0 ] !== this.currentItem[ 0 ] ) {
+				this.helper.remove();
+			}
+			this.helper = null;
+		}
+
+		if ( !noPropagation ) {
+			for ( i = 0; i < delayedTriggers.length; i++ ) {
+
+				// Trigger all delayed events
+				delayedTriggers[ i ].call( this, event );
+			}
+			this._trigger( "stop", event, this._uiHash() );
+		}
+
+		this.fromOutside = false;
+		return !this.cancelHelperRemoval;
+
+	},
+
+	_trigger: function() {
+		if ( $.Widget.prototype._trigger.apply( this, arguments ) === false ) {
+			this.cancel();
+		}
+	},
+
+	_uiHash: function( _inst ) {
+		var inst = _inst || this;
+		return {
+			helper: inst.helper,
+			placeholder: inst.placeholder || $( [] ),
+			position: inst.position,
+			originalPosition: inst.originalPosition,
+			offset: inst.positionAbs,
+			item: inst.currentItem,
+			sender: _inst ? _inst.element : null
+		};
+	}
+
+} );
+
+
+/*!
+ * jQuery UI Spinner 1.12.1
+ * http://jqueryui.com
+ *
+ * Copyright jQuery Foundation and other contributors
+ * Released under the MIT license.
+ * http://jquery.org/license
+ */
+
+//>>label: Spinner
+//>>group: Widgets
+//>>description: Displays buttons to easily input numbers via the keyboard or mouse.
+//>>docs: http://api.jqueryui.com/spinner/
+//>>demos: http://jqueryui.com/spinner/
+//>>css.structure: ../../themes/base/core.css
+//>>css.structure: ../../themes/base/spinner.css
+//>>css.theme: ../../themes/base/theme.css
+
+
+
+function spinnerModifer( fn ) {
+	return function() {
+		var previous = this.element.val();
+		fn.apply( this, arguments );
+		this._refresh();
+		if ( previous !== this.element.val() ) {
+			this._trigger( "change" );
+		}
+	};
+}
+
+$.widget( "ui.spinner", {
+	version: "1.12.1",
+	defaultElement: "<input>",
+	widgetEventPrefix: "spin",
+	options: {
+		classes: {
+			"ui-spinner": "ui-corner-all",
+			"ui-spinner-down": "ui-corner-br",
+			"ui-spinner-up": "ui-corner-tr"
+		},
+		culture: null,
+		icons: {
+			down: "ui-icon-triangle-1-s",
+			up: "ui-icon-triangle-1-n"
+		},
+		incremental: true,
+		max: null,
+		min: null,
+		numberFormat: null,
+		page: 10,
+		step: 1,
+
+		change: null,
+		spin: null,
+		start: null,
+		stop: null
+	},
+
+	_create: function() {
+
+		// handle string values that need to be parsed
+		this._setOption( "max", this.options.max );
+		this._setOption( "min", this.options.min );
+		this._setOption( "step", this.options.step );
+
+		// Only format if there is a value, prevents the field from being marked
+		// as invalid in Firefox, see #9573.
+		if ( this.value() !== "" ) {
+
+			// Format the value, but don't constrain.
+			this._value( this.element.val(), true );
+		}
+
+		this._draw();
+		this._on( this._events );
+		this._refresh();
+
+		// Turning off autocomplete prevents the browser from remembering the
+		// value when navigating through history, so we re-enable autocomplete
+		// if the page is unloaded before the widget is destroyed. #7790
+		this._on( this.window, {
+			beforeunload: function() {
+				this.element.removeAttr( "autocomplete" );
+			}
+		} );
+	},
+
+	_getCreateOptions: function() {
+		var options = this._super();
+		var element = this.element;
+
+		$.each( [ "min", "max", "step" ], function( i, option ) {
+			var value = element.attr( option );
+			if ( value != null && value.length ) {
+				options[ option ] = value;
+			}
+		} );
+
+		return options;
+	},
+
+	_events: {
+		keydown: function( event ) {
+			if ( this._start( event ) && this._keydown( event ) ) {
+				event.preventDefault();
+			}
+		},
+		keyup: "_stop",
+		focus: function() {
+			this.previous = this.element.val();
+		},
+		blur: function( event ) {
+			if ( this.cancelBlur ) {
+				delete this.cancelBlur;
+				return;
+			}
+
+			this._stop();
+			this._refresh();
+			if ( this.previous !== this.element.val() ) {
+				this._trigger( "change", event );
+			}
+		},
+		mousewheel: function( event, delta ) {
+			if ( !delta ) {
+				return;
+			}
+			if ( !this.spinning && !this._start( event ) ) {
+				return false;
+			}
+
+			this._spin( ( delta > 0 ? 1 : -1 ) * this.options.step, event );
+			clearTimeout( this.mousewheelTimer );
+			this.mousewheelTimer = this._delay( function() {
+				if ( this.spinning ) {
+					this._stop( event );
+				}
+			}, 100 );
+			event.preventDefault();
+		},
+		"mousedown .ui-spinner-button": function( event ) {
+			var previous;
+
+			// We never want the buttons to have focus; whenever the user is
+			// interacting with the spinner, the focus should be on the input.
+			// If the input is focused then this.previous is properly set from
+			// when the input first received focus. If the input is not focused
+			// then we need to set this.previous based on the value before spinning.
+			previous = this.element[ 0 ] === $.ui.safeActiveElement( this.document[ 0 ] ) ?
+				this.previous : this.element.val();
+			function checkFocus() {
+				var isActive = this.element[ 0 ] === $.ui.safeActiveElement( this.document[ 0 ] );
+				if ( !isActive ) {
+					this.element.trigger( "focus" );
+					this.previous = previous;
+
+					// support: IE
+					// IE sets focus asynchronously, so we need to check if focus
+					// moved off of the input because the user clicked on the button.
+					this._delay( function() {
+						this.previous = previous;
+					} );
+				}
+			}
+
+			// Ensure focus is on (or stays on) the text field
+			event.preventDefault();
+			checkFocus.call( this );
+
+			// Support: IE
+			// IE doesn't prevent moving focus even with event.preventDefault()
+			// so we set a flag to know when we should ignore the blur event
+			// and check (again) if focus moved off of the input.
+			this.cancelBlur = true;
+			this._delay( function() {
+				delete this.cancelBlur;
+				checkFocus.call( this );
+			} );
+
+			if ( this._start( event ) === false ) {
+				return;
+			}
+
+			this._repeat( null, $( event.currentTarget )
+				.hasClass( "ui-spinner-up" ) ? 1 : -1, event );
+		},
+		"mouseup .ui-spinner-button": "_stop",
+		"mouseenter .ui-spinner-button": function( event ) {
+
+			// button will add ui-state-active if mouse was down while mouseleave and kept down
+			if ( !$( event.currentTarget ).hasClass( "ui-state-active" ) ) {
+				return;
+			}
+
+			if ( this._start( event ) === false ) {
+				return false;
+			}
+			this._repeat( null, $( event.currentTarget )
+				.hasClass( "ui-spinner-up" ) ? 1 : -1, event );
+		},
+
+		// TODO: do we really want to consider this a stop?
+		// shouldn't we just stop the repeater and wait until mouseup before
+		// we trigger the stop event?
+		"mouseleave .ui-spinner-button": "_stop"
+	},
+
+	// Support mobile enhanced option and make backcompat more sane
+	_enhance: function() {
+		this.uiSpinner = this.element
+			.attr( "autocomplete", "off" )
+			.wrap( "<span>" )
+			.parent()
+
+				// Add buttons
+				.append(
+					"<a></a><a></a>"
+				);
+	},
+
+	_draw: function() {
+		this._enhance();
+
+		this._addClass( this.uiSpinner, "ui-spinner", "ui-widget ui-widget-content" );
+		this._addClass( "ui-spinner-input" );
+
+		this.element.attr( "role", "spinbutton" );
+
+		// Button bindings
+		this.buttons = this.uiSpinner.children( "a" )
+			.attr( "tabIndex", -1 )
+			.attr( "aria-hidden", true )
+			.button( {
+				classes: {
+					"ui-button": ""
+				}
+			} );
+
+		// TODO: Right now button does not support classes this is already updated in button PR
+		this._removeClass( this.buttons, "ui-corner-all" );
+
+		this._addClass( this.buttons.first(), "ui-spinner-button ui-spinner-up" );
+		this._addClass( this.buttons.last(), "ui-spinner-button ui-spinner-down" );
+		this.buttons.first().button( {
+			"icon": this.options.icons.up,
+			"showLabel": false
+		} );
+		this.buttons.last().button( {
+			"icon": this.options.icons.down,
+			"showLabel": false
+		} );
+
+		// IE 6 doesn't understand height: 50% for the buttons
+		// unless the wrapper has an explicit height
+		if ( this.buttons.height() > Math.ceil( this.uiSpinner.height() * 0.5 ) &&
+				this.uiSpinner.height() > 0 ) {
+			this.uiSpinner.height( this.uiSpinner.height() );
+		}
+	},
+
+	_keydown: function( event ) {
+		var options = this.options,
+			keyCode = $.ui.keyCode;
+
+		switch ( event.keyCode ) {
+		case keyCode.UP:
+			this._repeat( null, 1, event );
+			return true;
+		case keyCode.DOWN:
+			this._repeat( null, -1, event );
+			return true;
+		case keyCode.PAGE_UP:
+			this._repeat( null, options.page, event );
+			return true;
+		case keyCode.PAGE_DOWN:
+			this._repeat( null, -options.page, event );
+			return true;
+		}
+
+		return false;
+	},
+
+	_start: function( event ) {
+		if ( !this.spinning && this._trigger( "start", event ) === false ) {
+			return false;
+		}
+
+		if ( !this.counter ) {
+			this.counter = 1;
+		}
+		this.spinning = true;
+		return true;
+	},
+
+	_repeat: function( i, steps, event ) {
+		i = i || 500;
+
+		clearTimeout( this.timer );
+		this.timer = this._delay( function() {
+			this._repeat( 40, steps, event );
+		}, i );
+
+		this._spin( steps * this.options.step, event );
+	},
+
+	_spin: function( step, event ) {
+		var value = this.value() || 0;
+
+		if ( !this.counter ) {
+			this.counter = 1;
+		}
+
+		value = this._adjustValue( value + step * this._increment( this.counter ) );
+
+		if ( !this.spinning || this._trigger( "spin", event, { value: value } ) !== false ) {
+			this._value( value );
+			this.counter++;
+		}
+	},
+
+	_increment: function( i ) {
+		var incremental = this.options.incremental;
+
+		if ( incremental ) {
+			return $.isFunction( incremental ) ?
+				incremental( i ) :
+				Math.floor( i * i * i / 50000 - i * i / 500 + 17 * i / 200 + 1 );
+		}
+
+		return 1;
+	},
+
+	_precision: function() {
+		var precision = this._precisionOf( this.options.step );
+		if ( this.options.min !== null ) {
+			precision = Math.max( precision, this._precisionOf( this.options.min ) );
+		}
+		return precision;
+	},
+
+	_precisionOf: function( num ) {
+		var str = num.toString(),
+			decimal = str.indexOf( "." );
+		return decimal === -1 ? 0 : str.length - decimal - 1;
+	},
+
+	_adjustValue: function( value ) {
+		var base, aboveMin,
+			options = this.options;
+
+		// Make sure we're at a valid step
+		// - find out where we are relative to the base (min or 0)
+		base = options.min !== null ? options.min : 0;
+		aboveMin = value - base;
+
+		// - round to the nearest step
+		aboveMin = Math.round( aboveMin / options.step ) * options.step;
+
+		// - rounding is based on 0, so adjust back to our base
+		value = base + aboveMin;
+
+		// Fix precision from bad JS floating point math
+		value = parseFloat( value.toFixed( this._precision() ) );
+
+		// Clamp the value
+		if ( options.max !== null && value > options.max ) {
+			return options.max;
+		}
+		if ( options.min !== null && value < options.min ) {
+			return options.min;
+		}
+
+		return value;
+	},
+
+	_stop: function( event ) {
+		if ( !this.spinning ) {
+			return;
+		}
+
+		clearTimeout( this.timer );
+		clearTimeout( this.mousewheelTimer );
+		this.counter = 0;
+		this.spinning = false;
+		this._trigger( "stop", event );
+	},
+
+	_setOption: function( key, value ) {
+		var prevValue, first, last;
+
+		if ( key === "culture" || key === "numberFormat" ) {
+			prevValue = this._parse( this.element.val() );
+			this.options[ key ] = value;
+			this.element.val( this._format( prevValue ) );
+			return;
+		}
+
+		if ( key === "max" || key === "min" || key === "step" ) {
+			if ( typeof value === "string" ) {
+				value = this._parse( value );
+			}
+		}
+		if ( key === "icons" ) {
+			first = this.buttons.first().find( ".ui-icon" );
+			this._removeClass( first, null, this.options.icons.up );
+			this._addClass( first, null, value.up );
+			last = this.buttons.last().find( ".ui-icon" );
+			this._removeClass( last, null, this.options.icons.down );
+			this._addClass( last, null, value.down );
+		}
+
+		this._super( key, value );
+	},
+
+	_setOptionDisabled: function( value ) {
+		this._super( value );
+
+		this._toggleClass( this.uiSpinner, null, "ui-state-disabled", !!value );
+		this.element.prop( "disabled", !!value );
+		this.buttons.button( value ? "disable" : "enable" );
+	},
+
+	_setOptions: spinnerModifer( function( options ) {
+		this._super( options );
+	} ),
+
+	_parse: function( val ) {
+		if ( typeof val === "string" && val !== "" ) {
+			val = window.Globalize && this.options.numberFormat ?
+				Globalize.parseFloat( val, 10, this.options.culture ) : +val;
+		}
+		return val === "" || isNaN( val ) ? null : val;
+	},
+
+	_format: function( value ) {
+		if ( value === "" ) {
+			return "";
+		}
+		return window.Globalize && this.options.numberFormat ?
+			Globalize.format( value, this.options.numberFormat, this.options.culture ) :
+			value;
+	},
+
+	_refresh: function() {
+		this.element.attr( {
+			"aria-valuemin": this.options.min,
+			"aria-valuemax": this.options.max,
+
+			// TODO: what should we do with values that can't be parsed?
+			"aria-valuenow": this._parse( this.element.val() )
+		} );
+	},
+
+	isValid: function() {
+		var value = this.value();
+
+		// Null is invalid
+		if ( value === null ) {
+			return false;
+		}
+
+		// If value gets adjusted, it's invalid
+		return value === this._adjustValue( value );
+	},
+
+	// Update the value without triggering change
+	_value: function( value, allowAny ) {
+		var parsed;
+		if ( value !== "" ) {
+			parsed = this._parse( value );
+			if ( parsed !== null ) {
+				if ( !allowAny ) {
+					parsed = this._adjustValue( parsed );
+				}
+				value = this._format( parsed );
+			}
+		}
+		this.element.val( value );
+		this._refresh();
+	},
+
+	_destroy: function() {
+		this.element
+			.prop( "disabled", false )
+			.removeAttr( "autocomplete role aria-valuemin aria-valuemax aria-valuenow" );
+
+		this.uiSpinner.replaceWith( this.element );
+	},
+
+	stepUp: spinnerModifer( function( steps ) {
+		this._stepUp( steps );
+	} ),
+	_stepUp: function( steps ) {
+		if ( this._start() ) {
+			this._spin( ( steps || 1 ) * this.options.step );
+			this._stop();
+		}
+	},
+
+	stepDown: spinnerModifer( function( steps ) {
+		this._stepDown( steps );
+	} ),
+	_stepDown: function( steps ) {
+		if ( this._start() ) {
+			this._spin( ( steps || 1 ) * -this.options.step );
+			this._stop();
+		}
+	},
+
+	pageUp: spinnerModifer( function( pages ) {
+		this._stepUp( ( pages || 1 ) * this.options.page );
+	} ),
+
+	pageDown: spinnerModifer( function( pages ) {
+		this._stepDown( ( pages || 1 ) * this.options.page );
+	} ),
+
+	value: function( newVal ) {
+		if ( !arguments.length ) {
+			return this._parse( this.element.val() );
+		}
+		spinnerModifer( this._value ).call( this, newVal );
+	},
+
+	widget: function() {
+		return this.uiSpinner;
+	}
+} );
+
+// DEPRECATED
+// TODO: switch return back to widget declaration at top of file when this is removed
+if ( $.uiBackCompat !== false ) {
+
+	// Backcompat for spinner html extension points
+	$.widget( "ui.spinner", $.ui.spinner, {
+		_enhance: function() {
+			this.uiSpinner = this.element
+				.attr( "autocomplete", "off" )
+				.wrap( this._uiSpinnerHtml() )
+				.parent()
+
+					// Add buttons
+					.append( this._buttonHtml() );
+		},
+		_uiSpinnerHtml: function() {
+			return "<span>";
+		},
+
+		_buttonHtml: function() {
+			return "<a></a><a></a>";
+		}
+	} );
+}
+
+var widgetsSpinner = $.ui.spinner;
+
+
+/*!
+ * jQuery UI Tabs 1.12.1
+ * http://jqueryui.com
+ *
+ * Copyright jQuery Foundation and other contributors
+ * Released under the MIT license.
+ * http://jquery.org/license
+ */
+
+//>>label: Tabs
+//>>group: Widgets
+//>>description: Transforms a set of container elements into a tab structure.
+//>>docs: http://api.jqueryui.com/tabs/
+//>>demos: http://jqueryui.com/tabs/
+//>>css.structure: ../../themes/base/core.css
+//>>css.structure: ../../themes/base/tabs.css
+//>>css.theme: ../../themes/base/theme.css
+
+
+
+$.widget( "ui.tabs", {
+	version: "1.12.1",
+	delay: 300,
+	options: {
+		active: null,
+		classes: {
+			"ui-tabs": "ui-corner-all",
+			"ui-tabs-nav": "ui-corner-all",
+			"ui-tabs-panel": "ui-corner-bottom",
+			"ui-tabs-tab": "ui-corner-top"
+		},
+		collapsible: false,
+		event: "click",
+		heightStyle: "content",
+		hide: null,
+		show: null,
+
+		// Callbacks
+		activate: null,
+		beforeActivate: null,
+		beforeLoad: null,
+		load: null
+	},
+
+	_isLocal: ( function() {
+		var rhash = /#.*$/;
+
+		return function( anchor ) {
+			var anchorUrl, locationUrl;
+
+			anchorUrl = anchor.href.replace( rhash, "" );
+			locationUrl = location.href.replace( rhash, "" );
+
+			// Decoding may throw an error if the URL isn't UTF-8 (#9518)
+			try {
+				anchorUrl = decodeURIComponent( anchorUrl );
+			} catch ( error ) {}
+			try {
+				locationUrl = decodeURIComponent( locationUrl );
+			} catch ( error ) {}
+
+			return anchor.hash.length > 1 && anchorUrl === locationUrl;
+		};
+	} )(),
+
+	_create: function() {
+		var that = this,
+			options = this.options;
+
+		this.running = false;
+
+		this._addClass( "ui-tabs", "ui-widget ui-widget-content" );
+		this._toggleClass( "ui-tabs-collapsible", null, options.collapsible );
+
+		this._processTabs();
+		options.active = this._initialActive();
+
+		// Take disabling tabs via class attribute from HTML
+		// into account and update option properly.
+		if ( $.isArray( options.disabled ) ) {
+			options.disabled = $.unique( options.disabled.concat(
+				$.map( this.tabs.filter( ".ui-state-disabled" ), function( li ) {
+					return that.tabs.index( li );
+				} )
+			) ).sort();
+		}
+
+		// Check for length avoids error when initializing empty list
+		if ( this.options.active !== false && this.anchors.length ) {
+			this.active = this._findActive( options.active );
+		} else {
+			this.active = $();
+		}
+
+		this._refresh();
+
+		if ( this.active.length ) {
+			this.load( options.active );
+		}
+	},
+
+	_initialActive: function() {
+		var active = this.options.active,
+			collapsible = this.options.collapsible,
+			locationHash = location.hash.substring( 1 );
+
+		if ( active === null ) {
+
+			// check the fragment identifier in the URL
+			if ( locationHash ) {
+				this.tabs.each( function( i, tab ) {
+					if ( $( tab ).attr( "aria-controls" ) === locationHash ) {
+						active = i;
+						return false;
+					}
+				} );
+			}
+
+			// Check for a tab marked active via a class
+			if ( active === null ) {
+				active = this.tabs.index( this.tabs.filter( ".ui-tabs-active" ) );
+			}
+
+			// No active tab, set to false
+			if ( active === null || active === -1 ) {
+				active = this.tabs.length ? 0 : false;
+			}
+		}
+
+		// Handle numbers: negative, out of range
+		if ( active !== false ) {
+			active = this.tabs.index( this.tabs.eq( active ) );
+			if ( active === -1 ) {
+				active = collapsible ? false : 0;
+			}
+		}
+
+		// Don't allow collapsible: false and active: false
+		if ( !collapsible && active === false && this.anchors.length ) {
+			active = 0;
+		}
+
+		return active;
+	},
+
+	_getCreateEventData: function() {
+		return {
+			tab: this.active,
+			panel: !this.active.length ? $() : this._getPanelForTab( this.active )
+		};
+	},
+
+	_tabKeydown: function( event ) {
+		var focusedTab = $( $.ui.safeActiveElement( this.document[ 0 ] ) ).closest( "li" ),
+			selectedIndex = this.tabs.index( focusedTab ),
+			goingForward = true;
+
+		if ( this._handlePageNav( event ) ) {
+			return;
+		}
+
+		switch ( event.keyCode ) {
+		case $.ui.keyCode.RIGHT:
+		case $.ui.keyCode.DOWN:
+			selectedIndex++;
+			break;
+		case $.ui.keyCode.UP:
+		case $.ui.keyCode.LEFT:
+			goingForward = false;
+			selectedIndex--;
+			break;
+		case $.ui.keyCode.END:
+			selectedIndex = this.anchors.length - 1;
+			break;
+		case $.ui.keyCode.HOME:
+			selectedIndex = 0;
+			break;
+		case $.ui.keyCode.SPACE:
+
+			// Activate only, no collapsing
+			event.preventDefault();
+			clearTimeout( this.activating );
+			this._activate( selectedIndex );
+			return;
+		case $.ui.keyCode.ENTER:
+
+			// Toggle (cancel delayed activation, allow collapsing)
+			event.preventDefault();
+			clearTimeout( this.activating );
+
+			// Determine if we should collapse or activate
+			this._activate( selectedIndex === this.options.active ? false : selectedIndex );
+			return;
+		default:
+			return;
+		}
+
+		// Focus the appropriate tab, based on which key was pressed
+		event.preventDefault();
+		clearTimeout( this.activating );
+		selectedIndex = this._focusNextTab( selectedIndex, goingForward );
+
+		// Navigating with control/command key will prevent automatic activation
+		if ( !event.ctrlKey && !event.metaKey ) {
+
+			// Update aria-selected immediately so that AT think the tab is already selected.
+			// Otherwise AT may confuse the user by stating that they need to activate the tab,
+			// but the tab will already be activated by the time the announcement finishes.
+			focusedTab.attr( "aria-selected", "false" );
+			this.tabs.eq( selectedIndex ).attr( "aria-selected", "true" );
+
+			this.activating = this._delay( function() {
+				this.option( "active", selectedIndex );
+			}, this.delay );
+		}
+	},
+
+	_panelKeydown: function( event ) {
+		if ( this._handlePageNav( event ) ) {
+			return;
+		}
+
+		// Ctrl+up moves focus to the current tab
+		if ( event.ctrlKey && event.keyCode === $.ui.keyCode.UP ) {
+			event.preventDefault();
+			this.active.trigger( "focus" );
+		}
+	},
+
+	// Alt+page up/down moves focus to the previous/next tab (and activates)
+	_handlePageNav: function( event ) {
+		if ( event.altKey && event.keyCode === $.ui.keyCode.PAGE_UP ) {
+			this._activate( this._focusNextTab( this.options.active - 1, false ) );
+			return true;
+		}
+		if ( event.altKey && event.keyCode === $.ui.keyCode.PAGE_DOWN ) {
+			this._activate( this._focusNextTab( this.options.active + 1, true ) );
+			return true;
+		}
+	},
+
+	_findNextTab: function( index, goingForward ) {
+		var lastTabIndex = this.tabs.length - 1;
+
+		function constrain() {
+			if ( index > lastTabIndex ) {
+				index = 0;
+			}
+			if ( index < 0 ) {
+				index = lastTabIndex;
+			}
+			return index;
+		}
+
+		while ( $.inArray( constrain(), this.options.disabled ) !== -1 ) {
+			index = goingForward ? index + 1 : index - 1;
+		}
+
+		return index;
+	},
+
+	_focusNextTab: function( index, goingForward ) {
+		index = this._findNextTab( index, goingForward );
+		this.tabs.eq( index ).trigger( "focus" );
+		return index;
+	},
+
+	_setOption: function( key, value ) {
+		if ( key === "active" ) {
+
+			// _activate() will handle invalid values and update this.options
+			this._activate( value );
+			return;
+		}
+
+		this._super( key, value );
+
+		if ( key === "collapsible" ) {
+			this._toggleClass( "ui-tabs-collapsible", null, value );
+
+			// Setting collapsible: false while collapsed; open first panel
+			if ( !value && this.options.active === false ) {
+				this._activate( 0 );
+			}
+		}
+
+		if ( key === "event" ) {
+			this._setupEvents( value );
+		}
+
+		if ( key === "heightStyle" ) {
+			this._setupHeightStyle( value );
+		}
+	},
+
+	_sanitizeSelector: function( hash ) {
+		return hash ? hash.replace( /[!"$%&'()*+,.\/:;<=>?@\[\]\^`{|}~]/g, "\\$&" ) : "";
+	},
+
+	refresh: function() {
+		var options = this.options,
+			lis = this.tablist.children( ":has(a[href])" );
+
+		// Get disabled tabs from class attribute from HTML
+		// this will get converted to a boolean if needed in _refresh()
+		options.disabled = $.map( lis.filter( ".ui-state-disabled" ), function( tab ) {
+			return lis.index( tab );
+		} );
+
+		this._processTabs();
+
+		// Was collapsed or no tabs
+		if ( options.active === false || !this.anchors.length ) {
+			options.active = false;
+			this.active = $();
+
+		// was active, but active tab is gone
+		} else if ( this.active.length && !$.contains( this.tablist[ 0 ], this.active[ 0 ] ) ) {
+
+			// all remaining tabs are disabled
+			if ( this.tabs.length === options.disabled.length ) {
+				options.active = false;
+				this.active = $();
+
+			// activate previous tab
+			} else {
+				this._activate( this._findNextTab( Math.max( 0, options.active - 1 ), false ) );
+			}
+
+		// was active, active tab still exists
+		} else {
+
+			// make sure active index is correct
+			options.active = this.tabs.index( this.active );
+		}
+
+		this._refresh();
+	},
+
+	_refresh: function() {
+		this._setOptionDisabled( this.options.disabled );
+		this._setupEvents( this.options.event );
+		this._setupHeightStyle( this.options.heightStyle );
+
+		this.tabs.not( this.active ).attr( {
+			"aria-selected": "false",
+			"aria-expanded": "false",
+			tabIndex: -1
+		} );
+		this.panels.not( this._getPanelForTab( this.active ) )
+			.hide()
+			.attr( {
+				"aria-hidden": "true"
+			} );
+
+		// Make sure one tab is in the tab order
+		if ( !this.active.length ) {
+			this.tabs.eq( 0 ).attr( "tabIndex", 0 );
+		} else {
+			this.active
+				.attr( {
+					"aria-selected": "true",
+					"aria-expanded": "true",
+					tabIndex: 0
+				} );
+			this._addClass( this.active, "ui-tabs-active", "ui-state-active" );
+			this._getPanelForTab( this.active )
+				.show()
+				.attr( {
+					"aria-hidden": "false"
+				} );
+		}
+	},
+
+	_processTabs: function() {
+		var that = this,
+			prevTabs = this.tabs,
+			prevAnchors = this.anchors,
+			prevPanels = this.panels;
+
+		this.tablist = this._getList().attr( "role", "tablist" );
+		this._addClass( this.tablist, "ui-tabs-nav",
+			"ui-helper-reset ui-helper-clearfix ui-widget-header" );
+
+		// Prevent users from focusing disabled tabs via click
+		this.tablist
+			.on( "mousedown" + this.eventNamespace, "> li", function( event ) {
+				if ( $( this ).is( ".ui-state-disabled" ) ) {
+					event.preventDefault();
+				}
+			} )
+
+			// Support: IE <9
+			// Preventing the default action in mousedown doesn't prevent IE
+			// from focusing the element, so if the anchor gets focused, blur.
+			// We don't have to worry about focusing the previously focused
+			// element since clicking on a non-focusable element should focus
+			// the body anyway.
+			.on( "focus" + this.eventNamespace, ".ui-tabs-anchor", function() {
+				if ( $( this ).closest( "li" ).is( ".ui-state-disabled" ) ) {
+					this.blur();
+				}
+			} );
+
+		this.tabs = this.tablist.find( "> li:has(a[href])" )
+			.attr( {
+				role: "tab",
+				tabIndex: -1
+			} );
+		this._addClass( this.tabs, "ui-tabs-tab", "ui-state-default" );
+
+		this.anchors = this.tabs.map( function() {
+			return $( "a", this )[ 0 ];
+		} )
+			.attr( {
+				role: "presentation",
+				tabIndex: -1
+			} );
+		this._addClass( this.anchors, "ui-tabs-anchor" );
+
+		this.panels = $();
+
+		this.anchors.each( function( i, anchor ) {
+			var selector, panel, panelId,
+				anchorId = $( anchor ).uniqueId().attr( "id" ),
+				tab = $( anchor ).closest( "li" ),
+				originalAriaControls = tab.attr( "aria-controls" );
+
+			// Inline tab
+			if ( that._isLocal( anchor ) ) {
+				selector = anchor.hash;
+				panelId = selector.substring( 1 );
+				panel = that.element.find( that._sanitizeSelector( selector ) );
+
+			// remote tab
+			} else {
+
+				// If the tab doesn't already have aria-controls,
+				// generate an id by using a throw-away element
+				panelId = tab.attr( "aria-controls" ) || $( {} ).uniqueId()[ 0 ].id;
+				selector = "#" + panelId;
+				panel = that.element.find( selector );
+				if ( !panel.length ) {
+					panel = that._createPanel( panelId );
+					panel.insertAfter( that.panels[ i - 1 ] || that.tablist );
+				}
+				panel.attr( "aria-live", "polite" );
+			}
+
+			if ( panel.length ) {
+				that.panels = that.panels.add( panel );
+			}
+			if ( originalAriaControls ) {
+				tab.data( "ui-tabs-aria-controls", originalAriaControls );
+			}
+			tab.attr( {
+				"aria-controls": panelId,
+				"aria-labelledby": anchorId
+			} );
+			panel.attr( "aria-labelledby", anchorId );
+		} );
+
+		this.panels.attr( "role", "tabpanel" );
+		this._addClass( this.panels, "ui-tabs-panel", "ui-widget-content" );
+
+		// Avoid memory leaks (#10056)
+		if ( prevTabs ) {
+			this._off( prevTabs.not( this.tabs ) );
+			this._off( prevAnchors.not( this.anchors ) );
+			this._off( prevPanels.not( this.panels ) );
+		}
+	},
+
+	// Allow overriding how to find the list for rare usage scenarios (#7715)
+	_getList: function() {
+		return this.tablist || this.element.find( "ol, ul" ).eq( 0 );
+	},
+
+	_createPanel: function( id ) {
+		return $( "<div>" )
+			.attr( "id", id )
+			.data( "ui-tabs-destroy", true );
+	},
+
+	_setOptionDisabled: function( disabled ) {
+		var currentItem, li, i;
+
+		if ( $.isArray( disabled ) ) {
+			if ( !disabled.length ) {
+				disabled = false;
+			} else if ( disabled.length === this.anchors.length ) {
+				disabled = true;
+			}
+		}
+
+		// Disable tabs
+		for ( i = 0; ( li = this.tabs[ i ] ); i++ ) {
+			currentItem = $( li );
+			if ( disabled === true || $.inArray( i, disabled ) !== -1 ) {
+				currentItem.attr( "aria-disabled", "true" );
+				this._addClass( currentItem, null, "ui-state-disabled" );
+			} else {
+				currentItem.removeAttr( "aria-disabled" );
+				this._removeClass( currentItem, null, "ui-state-disabled" );
+			}
+		}
+
+		this.options.disabled = disabled;
+
+		this._toggleClass( this.widget(), this.widgetFullName + "-disabled", null,
+			disabled === true );
+	},
+
+	_setupEvents: function( event ) {
+		var events = {};
+		if ( event ) {
+			$.each( event.split( " " ), function( index, eventName ) {
+				events[ eventName ] = "_eventHandler";
+			} );
+		}
+
+		this._off( this.anchors.add( this.tabs ).add( this.panels ) );
+
+		// Always prevent the default action, even when disabled
+		this._on( true, this.anchors, {
+			click: function( event ) {
+				event.preventDefault();
+			}
+		} );
+		this._on( this.anchors, events );
+		this._on( this.tabs, { keydown: "_tabKeydown" } );
+		this._on( this.panels, { keydown: "_panelKeydown" } );
+
+		this._focusable( this.tabs );
+		this._hoverable( this.tabs );
+	},
+
+	_setupHeightStyle: function( heightStyle ) {
+		var maxHeight,
+			parent = this.element.parent();
+
+		if ( heightStyle === "fill" ) {
+			maxHeight = parent.height();
+			maxHeight -= this.element.outerHeight() - this.element.height();
+
+			this.element.siblings( ":visible" ).each( function() {
+				var elem = $( this ),
+					position = elem.css( "position" );
+
+				if ( position === "absolute" || position === "fixed" ) {
+					return;
+				}
+				maxHeight -= elem.outerHeight( true );
+			} );
+
+			this.element.children().not( this.panels ).each( function() {
+				maxHeight -= $( this ).outerHeight( true );
+			} );
+
+			this.panels.each( function() {
+				$( this ).height( Math.max( 0, maxHeight -
+					$( this ).innerHeight() + $( this ).height() ) );
+			} )
+				.css( "overflow", "auto" );
+		} else if ( heightStyle === "auto" ) {
+			maxHeight = 0;
+			this.panels.each( function() {
+				maxHeight = Math.max( maxHeight, $( this ).height( "" ).height() );
+			} ).height( maxHeight );
+		}
+	},
+
+	_eventHandler: function( event ) {
+		var options = this.options,
+			active = this.active,
+			anchor = $( event.currentTarget ),
+			tab = anchor.closest( "li" ),
+			clickedIsActive = tab[ 0 ] === active[ 0 ],
+			collapsing = clickedIsActive && options.collapsible,
+			toShow = collapsing ? $() : this._getPanelForTab( tab ),
+			toHide = !active.length ? $() : this._getPanelForTab( active ),
+			eventData = {
+				oldTab: active,
+				oldPanel: toHide,
+				newTab: collapsing ? $() : tab,
+				newPanel: toShow
+			};
+
+		event.preventDefault();
+
+		if ( tab.hasClass( "ui-state-disabled" ) ||
+
+				// tab is already loading
+				tab.hasClass( "ui-tabs-loading" ) ||
+
+				// can't switch durning an animation
+				this.running ||
+
+				// click on active header, but not collapsible
+				( clickedIsActive && !options.collapsible ) ||
+
+				// allow canceling activation
+				( this._trigger( "beforeActivate", event, eventData ) === false ) ) {
+			return;
+		}
+
+		options.active = collapsing ? false : this.tabs.index( tab );
+
+		this.active = clickedIsActive ? $() : tab;
+		if ( this.xhr ) {
+			this.xhr.abort();
+		}
+
+		if ( !toHide.length && !toShow.length ) {
+			$.error( "jQuery UI Tabs: Mismatching fragment identifier." );
+		}
+
+		if ( toShow.length ) {
+			this.load( this.tabs.index( tab ), event );
+		}
+		this._toggle( event, eventData );
+	},
+
+	// Handles show/hide for selecting tabs
+	_toggle: function( event, eventData ) {
+		var that = this,
+			toShow = eventData.newPanel,
+			toHide = eventData.oldPanel;
+
+		this.running = true;
+
+		function complete() {
+			that.running = false;
+			that._trigger( "activate", event, eventData );
+		}
+
+		function show() {
+			that._addClass( eventData.newTab.closest( "li" ), "ui-tabs-active", "ui-state-active" );
+
+			if ( toShow.length && that.options.show ) {
+				that._show( toShow, that.options.show, complete );
+			} else {
+				toShow.show();
+				complete();
+			}
+		}
+
+		// Start out by hiding, then showing, then completing
+		if ( toHide.length && this.options.hide ) {
+			this._hide( toHide, this.options.hide, function() {
+				that._removeClass( eventData.oldTab.closest( "li" ),
+					"ui-tabs-active", "ui-state-active" );
+				show();
+			} );
+		} else {
+			this._removeClass( eventData.oldTab.closest( "li" ),
+				"ui-tabs-active", "ui-state-active" );
+			toHide.hide();
+			show();
+		}
+
+		toHide.attr( "aria-hidden", "true" );
+		eventData.oldTab.attr( {
+			"aria-selected": "false",
+			"aria-expanded": "false"
+		} );
+
+		// If we're switching tabs, remove the old tab from the tab order.
+		// If we're opening from collapsed state, remove the previous tab from the tab order.
+		// If we're collapsing, then keep the collapsing tab in the tab order.
+		if ( toShow.length && toHide.length ) {
+			eventData.oldTab.attr( "tabIndex", -1 );
+		} else if ( toShow.length ) {
+			this.tabs.filter( function() {
+				return $( this ).attr( "tabIndex" ) === 0;
+			} )
+				.attr( "tabIndex", -1 );
+		}
+
+		toShow.attr( "aria-hidden", "false" );
+		eventData.newTab.attr( {
+			"aria-selected": "true",
+			"aria-expanded": "true",
+			tabIndex: 0
+		} );
+	},
+
+	_activate: function( index ) {
+		var anchor,
+			active = this._findActive( index );
+
+		// Trying to activate the already active panel
+		if ( active[ 0 ] === this.active[ 0 ] ) {
+			return;
+		}
+
+		// Trying to collapse, simulate a click on the current active header
+		if ( !active.length ) {
+			active = this.active;
+		}
+
+		anchor = active.find( ".ui-tabs-anchor" )[ 0 ];
+		this._eventHandler( {
+			target: anchor,
+			currentTarget: anchor,
+			preventDefault: $.noop
+		} );
+	},
+
+	_findActive: function( index ) {
+		return index === false ? $() : this.tabs.eq( index );
+	},
+
+	_getIndex: function( index ) {
+
+		// meta-function to give users option to provide a href string instead of a numerical index.
+		if ( typeof index === "string" ) {
+			index = this.anchors.index( this.anchors.filter( "[href$='" +
+				$.ui.escapeSelector( index ) + "']" ) );
+		}
+
+		return index;
+	},
+
+	_destroy: function() {
+		if ( this.xhr ) {
+			this.xhr.abort();
+		}
+
+		this.tablist
+			.removeAttr( "role" )
+			.off( this.eventNamespace );
+
+		this.anchors
+			.removeAttr( "role tabIndex" )
+			.removeUniqueId();
+
+		this.tabs.add( this.panels ).each( function() {
+			if ( $.data( this, "ui-tabs-destroy" ) ) {
+				$( this ).remove();
+			} else {
+				$( this ).removeAttr( "role tabIndex " +
+					"aria-live aria-busy aria-selected aria-labelledby aria-hidden aria-expanded" );
+			}
+		} );
+
+		this.tabs.each( function() {
+			var li = $( this ),
+				prev = li.data( "ui-tabs-aria-controls" );
+			if ( prev ) {
+				li
+					.attr( "aria-controls", prev )
+					.removeData( "ui-tabs-aria-controls" );
+			} else {
+				li.removeAttr( "aria-controls" );
+			}
+		} );
+
+		this.panels.show();
+
+		if ( this.options.heightStyle !== "content" ) {
+			this.panels.css( "height", "" );
+		}
+	},
+
+	enable: function( index ) {
+		var disabled = this.options.disabled;
+		if ( disabled === false ) {
+			return;
+		}
+
+		if ( index === undefined ) {
+			disabled = false;
+		} else {
+			index = this._getIndex( index );
+			if ( $.isArray( disabled ) ) {
+				disabled = $.map( disabled, function( num ) {
+					return num !== index ? num : null;
+				} );
+			} else {
+				disabled = $.map( this.tabs, function( li, num ) {
+					return num !== index ? num : null;
+				} );
+			}
+		}
+		this._setOptionDisabled( disabled );
+	},
+
+	disable: function( index ) {
+		var disabled = this.options.disabled;
+		if ( disabled === true ) {
+			return;
+		}
+
+		if ( index === undefined ) {
+			disabled = true;
+		} else {
+			index = this._getIndex( index );
+			if ( $.inArray( index, disabled ) !== -1 ) {
+				return;
+			}
+			if ( $.isArray( disabled ) ) {
+				disabled = $.merge( [ index ], disabled ).sort();
+			} else {
+				disabled = [ index ];
+			}
+		}
+		this._setOptionDisabled( disabled );
+	},
+
+	load: function( index, event ) {
+		index = this._getIndex( index );
+		var that = this,
+			tab = this.tabs.eq( index ),
+			anchor = tab.find( ".ui-tabs-anchor" ),
+			panel = this._getPanelForTab( tab ),
+			eventData = {
+				tab: tab,
+				panel: panel
+			},
+			complete = function( jqXHR, status ) {
+				if ( status === "abort" ) {
+					that.panels.stop( false, true );
+				}
+
+				that._removeClass( tab, "ui-tabs-loading" );
+				panel.removeAttr( "aria-busy" );
+
+				if ( jqXHR === that.xhr ) {
+					delete that.xhr;
+				}
+			};
+
+		// Not remote
+		if ( this._isLocal( anchor[ 0 ] ) ) {
+			return;
+		}
+
+		this.xhr = $.ajax( this._ajaxSettings( anchor, event, eventData ) );
+
+		// Support: jQuery <1.8
+		// jQuery <1.8 returns false if the request is canceled in beforeSend,
+		// but as of 1.8, $.ajax() always returns a jqXHR object.
+		if ( this.xhr && this.xhr.statusText !== "canceled" ) {
+			this._addClass( tab, "ui-tabs-loading" );
+			panel.attr( "aria-busy", "true" );
+
+			this.xhr
+				.done( function( response, status, jqXHR ) {
+
+					// support: jQuery <1.8
+					// http://bugs.jquery.com/ticket/11778
+					setTimeout( function() {
+						panel.html( response );
+						that._trigger( "load", event, eventData );
+
+						complete( jqXHR, status );
+					}, 1 );
+				} )
+				.fail( function( jqXHR, status ) {
+
+					// support: jQuery <1.8
+					// http://bugs.jquery.com/ticket/11778
+					setTimeout( function() {
+						complete( jqXHR, status );
+					}, 1 );
+				} );
+		}
+	},
+
+	_ajaxSettings: function( anchor, event, eventData ) {
+		var that = this;
+		return {
+
+			// Support: IE <11 only
+			// Strip any hash that exists to prevent errors with the Ajax request
+			url: anchor.attr( "href" ).replace( /#.*$/, "" ),
+			beforeSend: function( jqXHR, settings ) {
+				return that._trigger( "beforeLoad", event,
+					$.extend( { jqXHR: jqXHR, ajaxSettings: settings }, eventData ) );
+			}
+		};
+	},
+
+	_getPanelForTab: function( tab ) {
+		var id = $( tab ).attr( "aria-controls" );
+		return this.element.find( this._sanitizeSelector( "#" + id ) );
+	}
+} );
+
+// DEPRECATED
+// TODO: Switch return back to widget declaration at top of file when this is removed
+if ( $.uiBackCompat !== false ) {
+
+	// Backcompat for ui-tab class (now ui-tabs-tab)
+	$.widget( "ui.tabs", $.ui.tabs, {
+		_processTabs: function() {
+			this._superApply( arguments );
+			this._addClass( this.tabs, "ui-tab" );
+		}
+	} );
+}
+
+var widgetsTabs = $.ui.tabs;
+
+
+/*!
+ * jQuery UI Tooltip 1.12.1
+ * http://jqueryui.com
+ *
+ * Copyright jQuery Foundation and other contributors
+ * Released under the MIT license.
+ * http://jquery.org/license
+ */
+
+//>>label: Tooltip
+//>>group: Widgets
+//>>description: Shows additional information for any element on hover or focus.
+//>>docs: http://api.jqueryui.com/tooltip/
+//>>demos: http://jqueryui.com/tooltip/
+//>>css.structure: ../../themes/base/core.css
+//>>css.structure: ../../themes/base/tooltip.css
+//>>css.theme: ../../themes/base/theme.css
+
+
+
+$.widget( "ui.tooltip", {
+	version: "1.12.1",
+	options: {
+		classes: {
+			"ui-tooltip": "ui-corner-all ui-widget-shadow"
+		},
+		content: function() {
+
+			// support: IE<9, Opera in jQuery <1.7
+			// .text() can't accept undefined, so coerce to a string
+			var title = $( this ).attr( "title" ) || "";
+
+			// Escape title, since we're going from an attribute to raw HTML
+			return $( "<a>" ).text( title ).html();
+		},
+		hide: true,
+
+		// Disabled elements have inconsistent behavior across browsers (#8661)
+		items: "[title]:not([disabled])",
+		position: {
+			my: "left top+15",
+			at: "left bottom",
+			collision: "flipfit flip"
+		},
+		show: true,
+		track: false,
+
+		// Callbacks
+		close: null,
+		open: null
+	},
+
+	_addDescribedBy: function( elem, id ) {
+		var describedby = ( elem.attr( "aria-describedby" ) || "" ).split( /\s+/ );
+		describedby.push( id );
+		elem
+			.data( "ui-tooltip-id", id )
+			.attr( "aria-describedby", $.trim( describedby.join( " " ) ) );
+	},
+
+	_removeDescribedBy: function( elem ) {
+		var id = elem.data( "ui-tooltip-id" ),
+			describedby = ( elem.attr( "aria-describedby" ) || "" ).split( /\s+/ ),
+			index = $.inArray( id, describedby );
+
+		if ( index !== -1 ) {
+			describedby.splice( index, 1 );
+		}
+
+		elem.removeData( "ui-tooltip-id" );
+		describedby = $.trim( describedby.join( " " ) );
+		if ( describedby ) {
+			elem.attr( "aria-describedby", describedby );
+		} else {
+			elem.removeAttr( "aria-describedby" );
+		}
+	},
+
+	_create: function() {
+		this._on( {
+			mouseover: "open",
+			focusin: "open"
+		} );
+
+		// IDs of generated tooltips, needed for destroy
+		this.tooltips = {};
+
+		// IDs of parent tooltips where we removed the title attribute
+		this.parents = {};
+
+		// Append the aria-live region so tooltips announce correctly
+		this.liveRegion = $( "<div>" )
+			.attr( {
+				role: "log",
+				"aria-live": "assertive",
+				"aria-relevant": "additions"
+			} )
+			.appendTo( this.document[ 0 ].body );
+		this._addClass( this.liveRegion, null, "ui-helper-hidden-accessible" );
+
+		this.disabledTitles = $( [] );
+	},
+
+	_setOption: function( key, value ) {
+		var that = this;
+
+		this._super( key, value );
+
+		if ( key === "content" ) {
+			$.each( this.tooltips, function( id, tooltipData ) {
+				that._updateContent( tooltipData.element );
+			} );
+		}
+	},
+
+	_setOptionDisabled: function( value ) {
+		this[ value ? "_disable" : "_enable" ]();
+	},
+
+	_disable: function() {
+		var that = this;
+
+		// Close open tooltips
+		$.each( this.tooltips, function( id, tooltipData ) {
+			var event = $.Event( "blur" );
+			event.target = event.currentTarget = tooltipData.element[ 0 ];
+			that.close( event, true );
+		} );
+
+		// Remove title attributes to prevent native tooltips
+		this.disabledTitles = this.disabledTitles.add(
+			this.element.find( this.options.items ).addBack()
+				.filter( function() {
+					var element = $( this );
+					if ( element.is( "[title]" ) ) {
+						return element
+							.data( "ui-tooltip-title", element.attr( "title" ) )
+							.removeAttr( "title" );
+					}
+				} )
+		);
+	},
+
+	_enable: function() {
+
+		// restore title attributes
+		this.disabledTitles.each( function() {
+			var element = $( this );
+			if ( element.data( "ui-tooltip-title" ) ) {
+				element.attr( "title", element.data( "ui-tooltip-title" ) );
+			}
+		} );
+		this.disabledTitles = $( [] );
+	},
+
+	open: function( event ) {
+		var that = this,
+			target = $( event ? event.target : this.element )
+
+				// we need closest here due to mouseover bubbling,
+				// but always pointing at the same event target
+				.closest( this.options.items );
+
+		// No element to show a tooltip for or the tooltip is already open
+		if ( !target.length || target.data( "ui-tooltip-id" ) ) {
+			return;
+		}
+
+		if ( target.attr( "title" ) ) {
+			target.data( "ui-tooltip-title", target.attr( "title" ) );
+		}
+
+		target.data( "ui-tooltip-open", true );
+
+		// Kill parent tooltips, custom or native, for hover
+		if ( event && event.type === "mouseover" ) {
+			target.parents().each( function() {
+				var parent = $( this ),
+					blurEvent;
+				if ( parent.data( "ui-tooltip-open" ) ) {
+					blurEvent = $.Event( "blur" );
+					blurEvent.target = blurEvent.currentTarget = this;
+					that.close( blurEvent, true );
+				}
+				if ( parent.attr( "title" ) ) {
+					parent.uniqueId();
+					that.parents[ this.id ] = {
+						element: this,
+						title: parent.attr( "title" )
+					};
+					parent.attr( "title", "" );
+				}
+			} );
+		}
+
+		this._registerCloseHandlers( event, target );
+		this._updateContent( target, event );
+	},
+
+	_updateContent: function( target, event ) {
+		var content,
+			contentOption = this.options.content,
+			that = this,
+			eventType = event ? event.type : null;
+
+		if ( typeof contentOption === "string" || contentOption.nodeType ||
+				contentOption.jquery ) {
+			return this._open( event, target, contentOption );
+		}
+
+		content = contentOption.call( target[ 0 ], function( response ) {
+
+			// IE may instantly serve a cached response for ajax requests
+			// delay this call to _open so the other call to _open runs first
+			that._delay( function() {
+
+				// Ignore async response if tooltip was closed already
+				if ( !target.data( "ui-tooltip-open" ) ) {
+					return;
+				}
+
+				// JQuery creates a special event for focusin when it doesn't
+				// exist natively. To improve performance, the native event
+				// object is reused and the type is changed. Therefore, we can't
+				// rely on the type being correct after the event finished
+				// bubbling, so we set it back to the previous value. (#8740)
+				if ( event ) {
+					event.type = eventType;
+				}
+				this._open( event, target, response );
+			} );
+		} );
+		if ( content ) {
+			this._open( event, target, content );
+		}
+	},
+
+	_open: function( event, target, content ) {
+		var tooltipData, tooltip, delayedShow, a11yContent,
+			positionOption = $.extend( {}, this.options.position );
+
+		if ( !content ) {
+			return;
+		}
+
+		// Content can be updated multiple times. If the tooltip already
+		// exists, then just update the content and bail.
+		tooltipData = this._find( target );
+		if ( tooltipData ) {
+			tooltipData.tooltip.find( ".ui-tooltip-content" ).html( content );
+			return;
+		}
+
+		// If we have a title, clear it to prevent the native tooltip
+		// we have to check first to avoid defining a title if none exists
+		// (we don't want to cause an element to start matching [title])
+		//
+		// We use removeAttr only for key events, to allow IE to export the correct
+		// accessible attributes. For mouse events, set to empty string to avoid
+		// native tooltip showing up (happens only when removing inside mouseover).
+		if ( target.is( "[title]" ) ) {
+			if ( event && event.type === "mouseover" ) {
+				target.attr( "title", "" );
+			} else {
+				target.removeAttr( "title" );
+			}
+		}
+
+		tooltipData = this._tooltip( target );
+		tooltip = tooltipData.tooltip;
+		this._addDescribedBy( target, tooltip.attr( "id" ) );
+		tooltip.find( ".ui-tooltip-content" ).html( content );
+
+		// Support: Voiceover on OS X, JAWS on IE <= 9
+		// JAWS announces deletions even when aria-relevant="additions"
+		// Voiceover will sometimes re-read the entire log region's contents from the beginning
+		this.liveRegion.children().hide();
+		a11yContent = $( "<div>" ).html( tooltip.find( ".ui-tooltip-content" ).html() );
+		a11yContent.removeAttr( "name" ).find( "[name]" ).removeAttr( "name" );
+		a11yContent.removeAttr( "id" ).find( "[id]" ).removeAttr( "id" );
+		a11yContent.appendTo( this.liveRegion );
+
+		function position( event ) {
+			positionOption.of = event;
+			if ( tooltip.is( ":hidden" ) ) {
+				return;
+			}
+			tooltip.position( positionOption );
+		}
+		if ( this.options.track && event && /^mouse/.test( event.type ) ) {
+			this._on( this.document, {
+				mousemove: position
+			} );
+
+			// trigger once to override element-relative positioning
+			position( event );
+		} else {
+			tooltip.position( $.extend( {
+				of: target
+			}, this.options.position ) );
+		}
+
+		tooltip.hide();
+
+		this._show( tooltip, this.options.show );
+
+		// Handle tracking tooltips that are shown with a delay (#8644). As soon
+		// as the tooltip is visible, position the tooltip using the most recent
+		// event.
+		// Adds the check to add the timers only when both delay and track options are set (#14682)
+		if ( this.options.track && this.options.show && this.options.show.delay ) {
+			delayedShow = this.delayedShow = setInterval( function() {
+				if ( tooltip.is( ":visible" ) ) {
+					position( positionOption.of );
+					clearInterval( delayedShow );
+				}
+			}, $.fx.interval );
+		}
+
+		this._trigger( "open", event, { tooltip: tooltip } );
+	},
+
+	_registerCloseHandlers: function( event, target ) {
+		var events = {
+			keyup: function( event ) {
+				if ( event.keyCode === $.ui.keyCode.ESCAPE ) {
+					var fakeEvent = $.Event( event );
+					fakeEvent.currentTarget = target[ 0 ];
+					this.close( fakeEvent, true );
+				}
+			}
+		};
+
+		// Only bind remove handler for delegated targets. Non-delegated
+		// tooltips will handle this in destroy.
+		if ( target[ 0 ] !== this.element[ 0 ] ) {
+			events.remove = function() {
+				this._removeTooltip( this._find( target ).tooltip );
+			};
+		}
+
+		if ( !event || event.type === "mouseover" ) {
+			events.mouseleave = "close";
+		}
+		if ( !event || event.type === "focusin" ) {
+			events.focusout = "close";
+		}
+		this._on( true, target, events );
+	},
+
+	close: function( event ) {
+		var tooltip,
+			that = this,
+			target = $( event ? event.currentTarget : this.element ),
+			tooltipData = this._find( target );
+
+		// The tooltip may already be closed
+		if ( !tooltipData ) {
+
+			// We set ui-tooltip-open immediately upon open (in open()), but only set the
+			// additional data once there's actually content to show (in _open()). So even if the
+			// tooltip doesn't have full data, we always remove ui-tooltip-open in case we're in
+			// the period between open() and _open().
+			target.removeData( "ui-tooltip-open" );
+			return;
+		}
+
+		tooltip = tooltipData.tooltip;
+
+		// Disabling closes the tooltip, so we need to track when we're closing
+		// to avoid an infinite loop in case the tooltip becomes disabled on close
+		if ( tooltipData.closing ) {
+			return;
+		}
+
+		// Clear the interval for delayed tracking tooltips
+		clearInterval( this.delayedShow );
+
+		// Only set title if we had one before (see comment in _open())
+		// If the title attribute has changed since open(), don't restore
+		if ( target.data( "ui-tooltip-title" ) && !target.attr( "title" ) ) {
+			target.attr( "title", target.data( "ui-tooltip-title" ) );
+		}
+
+		this._removeDescribedBy( target );
+
+		tooltipData.hiding = true;
+		tooltip.stop( true );
+		this._hide( tooltip, this.options.hide, function() {
+			that._removeTooltip( $( this ) );
+		} );
+
+		target.removeData( "ui-tooltip-open" );
+		this._off( target, "mouseleave focusout keyup" );
+
+		// Remove 'remove' binding only on delegated targets
+		if ( target[ 0 ] !== this.element[ 0 ] ) {
+			this._off( target, "remove" );
+		}
+		this._off( this.document, "mousemove" );
+
+		if ( event && event.type === "mouseleave" ) {
+			$.each( this.parents, function( id, parent ) {
+				$( parent.element ).attr( "title", parent.title );
+				delete that.parents[ id ];
+			} );
+		}
+
+		tooltipData.closing = true;
+		this._trigger( "close", event, { tooltip: tooltip } );
+		if ( !tooltipData.hiding ) {
+			tooltipData.closing = false;
+		}
+	},
+
+	_tooltip: function( element ) {
+		var tooltip = $( "<div>" ).attr( "role", "tooltip" ),
+			content = $( "<div>" ).appendTo( tooltip ),
+			id = tooltip.uniqueId().attr( "id" );
+
+		this._addClass( content, "ui-tooltip-content" );
+		this._addClass( tooltip, "ui-tooltip", "ui-widget ui-widget-content" );
+
+		tooltip.appendTo( this._appendTo( element ) );
+
+		return this.tooltips[ id ] = {
+			element: element,
+			tooltip: tooltip
+		};
+	},
+
+	_find: function( target ) {
+		var id = target.data( "ui-tooltip-id" );
+		return id ? this.tooltips[ id ] : null;
+	},
+
+	_removeTooltip: function( tooltip ) {
+		tooltip.remove();
+		delete this.tooltips[ tooltip.attr( "id" ) ];
+	},
+
+	_appendTo: function( target ) {
+		var element = target.closest( ".ui-front, dialog" );
+
+		if ( !element.length ) {
+			element = this.document[ 0 ].body;
+		}
+
+		return element;
+	},
+
+	_destroy: function() {
+		var that = this;
+
+		// Close open tooltips
+		$.each( this.tooltips, function( id, tooltipData ) {
+
+			// Delegate to close method to handle common cleanup
+			var event = $.Event( "blur" ),
+				element = tooltipData.element;
+			event.target = event.currentTarget = element[ 0 ];
+			that.close( event, true );
+
+			// Remove immediately; destroying an open tooltip doesn't use the
+			// hide animation
+			$( "#" + id ).remove();
+
+			// Restore the title
+			if ( element.data( "ui-tooltip-title" ) ) {
+
+				// If the title attribute has changed since open(), don't restore
+				if ( !element.attr( "title" ) ) {
+					element.attr( "title", element.data( "ui-tooltip-title" ) );
+				}
+				element.removeData( "ui-tooltip-title" );
+			}
+		} );
+		this.liveRegion.remove();
+	}
+} );
+
+// DEPRECATED
+// TODO: Switch return back to widget declaration at top of file when this is removed
+if ( $.uiBackCompat !== false ) {
+
+	// Backcompat for tooltipClass option
+	$.widget( "ui.tooltip", $.ui.tooltip, {
+		options: {
+			tooltipClass: null
+		},
+		_tooltip: function() {
+			var tooltipData = this._superApply( arguments );
+			if ( this.options.tooltipClass ) {
+				tooltipData.tooltip.addClass( this.options.tooltipClass );
+			}
+			return tooltipData;
+		}
+	} );
+}
+
+var widgetsTooltip = $.ui.tooltip;
+
+
+}));
\ No newline at end of file
diff --git a/static/js/loader.js b/static/js/loader.js
new file mode 100644
index 00000000..9791a8f8
--- /dev/null
+++ b/static/js/loader.js
@@ -0,0 +1,4 @@
+window.addEventListener("load", function(){
+    var load_screen = document.getElementById("load_screen");
+    document.body.removeChild(load_screen);
+});
\ No newline at end of file
diff --git a/static/js/pages/coming-soon/coming-soon.js b/static/js/pages/coming-soon/coming-soon.js
new file mode 100644
index 00000000..4a1dd3c1
--- /dev/null
+++ b/static/js/pages/coming-soon/coming-soon.js
@@ -0,0 +1,31 @@
+// Set the date we're counting down to
+var getYear = new Date().getFullYear()+1;
+var countDownDate = new Date("Dec 5, "+ getYear +" 15:37:25").getTime();
+
+// Update the count down every 1 second
+var countdownfunction = setInterval(function() {
+
+  // Get todays date and time
+  var now = new Date().getTime();
+  
+  // Find the distance between now an the count down date
+  var distance = countDownDate - now;
+  
+  // Time calculations for days, hours, minutes and seconds
+  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
+  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
+  var seconds = Math.floor((distance % (1000 * 60)) / 1000);
+  
+  // Output the result in an element with id="demo"
+  document.getElementById("timer").innerHTML = '<div class="days"><span class="count">' + days + '</span> <span class="text">Days</span></div>' +
+ '<div class="hours"><span class="count">'+ hours +'</span> <span class="text">Hours</span></div>' +
+ '<div class="min"><span class="count">'+ minutes +'</span> <span class="text">Mins</span></div>' +
+ '<div class="sec"><span class="count">'+ seconds +'</span> <span class="text">Secs</span></div>';
+  
+  // If the count down is over, write some text 
+  if (distance < 0) {
+    clearInterval(countdownfunction);
+    document.getElementById("timer").innerHTML = "EXPIRED";
+  }
+}, 1000);
\ No newline at end of file
diff --git a/static/js/pages/faq/faq.js b/static/js/pages/faq/faq.js
new file mode 100644
index 00000000..184c15f4
--- /dev/null
+++ b/static/js/pages/faq/faq.js
@@ -0,0 +1,7 @@
+// Scroll To Top
+
+$(document).on('click', '.arrow', function(event) {
+  event.preventDefault();
+  var body = $("html, body");
+  body.stop().animate({scrollTop:0}, 500, 'swing');
+});
\ No newline at end of file
diff --git a/static/js/pages/faq/faq2.js b/static/js/pages/faq/faq2.js
new file mode 100644
index 00000000..956aa4a8
--- /dev/null
+++ b/static/js/pages/faq/faq2.js
@@ -0,0 +1,5 @@
+$('#simple_faq .collapse').on('shown.bs.collapse', function(){
+    $(this).parent().find(".icons").html('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-up"><polyline points="18 15 12 9 6 15"></polyline></svg>');
+}).on('hidden.bs.collapse', function(){
+    $(this).parent().find(".icons").html('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>');
+});
\ No newline at end of file
diff --git a/static/js/pages/helpdesk.js b/static/js/pages/helpdesk.js
new file mode 100644
index 00000000..184c15f4
--- /dev/null
+++ b/static/js/pages/helpdesk.js
@@ -0,0 +1,7 @@
+// Scroll To Top
+
+$(document).on('click', '.arrow', function(event) {
+  event.preventDefault();
+  var body = $("html, body");
+  body.stop().animate({scrollTop:0}, 500, 'swing');
+});
\ No newline at end of file
diff --git a/static/js/scrollspyNav.js b/static/js/scrollspyNav.js
new file mode 100644
index 00000000..a796cad0
--- /dev/null
+++ b/static/js/scrollspyNav.js
@@ -0,0 +1,22 @@
+// Cache selectors
+var lastId,
+    sidenav = $(".sidenav"),
+    // All list items
+    menuItems = sidenav.find("a");
+
+menuItems.on('click', function(event) {
+  // Make sure this.hash has a value before overriding default behavior
+  if (this.hash !== "") {
+    // Prevent default anchor click behavior
+    event.preventDefault();
+
+    // Store hash
+    var hash = this.hash;
+
+    // Using jQuery's animate() method to add smooth page scroll
+    // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
+    $('html, body').animate({
+      scrollTop: $(hash).offset().top + -82
+    }, 800);
+  }  // End if
+});
\ No newline at end of file
diff --git a/static/js/users/account-settings.js b/static/js/users/account-settings.js
new file mode 100644
index 00000000..74c97046
--- /dev/null
+++ b/static/js/users/account-settings.js
@@ -0,0 +1,46 @@
+jQuery(document).ready(function($) {
+  
+  $('.dropify').dropify({
+      messages: { 'default': 'Click to Upload or Drag n Drop', 'remove':  '<i class="flaticon-close-fill"></i>', 'replace': 'Upload or Drag n Drop' }
+  });
+
+  // Save notification messagae
+  $('#multiple-messages').on('click', function() {
+      $.blockUI({
+          message: $('.blockui-growl-message'), 
+          fadeIn: 700, 
+          fadeOut: 700, 
+          timeout: 3000, //unblock after 3 seconds
+          showOverlay: false, 
+          centerY: false, 
+          css: { 
+              width: '250px',
+              backgroundColor: 'transparent',
+              top: '80px',
+              left: 'auto',
+              right: '15px',
+              border: 0,
+              opacity: .95,
+              zIndex: 1200,
+          } 
+      }); 
+  });
+
+  setTimeout(function(){ $('.list-group-item.list-group-item-action').last().removeClass('active'); }, 100);
+
+});
+
+progressBarCount('.progress-range-counter');
+
+function progressBarCount($progressCount) {
+    var elements = document.querySelectorAll($progressCount);
+    for (var i = 0; i < elements.length; i++) {
+        elements[i].addEventListener('input', function(event) {
+            getValueOfRangeSlider = this.value;
+            getParentElement = this.closest(".custom-progress").querySelector('.range-count-number');
+
+            setValueOfRangeCountValue = getParentElement.innerHTML = getValueOfRangeSlider;
+            setValueOfAttributeValue = getParentElement.setAttribute("data-rangeCountNumber", getValueOfRangeSlider)
+        });
+    }
+}
\ No newline at end of file
diff --git a/static/js/widgets/modules-widgets.js b/static/js/widgets/modules-widgets.js
new file mode 100644
index 00000000..83ae1f12
--- /dev/null
+++ b/static/js/widgets/modules-widgets.js
@@ -0,0 +1,1086 @@
+try {
+
+
+    /*
+        ==============================
+        |    @Options Charts Script   |
+        ==============================
+    */
+
+    /*
+        ======================================
+            Visitor Statistics | Options
+        ======================================
+    */
+
+    // Total Visits
+
+    var spark1 = {
+        chart: {
+          id: 'total-users',
+          group: 'sparks1',
+          type: 'line',
+          height: 80,
+          sparkline: {
+            enabled: true
+          },
+          dropShadow: {
+            enabled: true,
+            top: 3,
+            left: 1,
+            blur: 3,
+            color: '#009688',
+            opacity: 0.6,
+          }
+        },
+        series: [{
+          data: [12, 14, 5, 47, 32, 44, 14, 55, 41, 69]
+        }],
+        stroke: {
+          curve: 'smooth',
+          width: 2,
+        },
+        markers: {
+          size: 0
+        },
+        grid: {
+          padding: {
+            top: 35,
+            bottom: 0,
+            left: 40
+          }
+        },
+        colors: ['#009688'],
+        tooltip: {
+          x: {
+            show: false
+          },
+          y: {
+            title: {
+              formatter: function formatter(val) {
+                return '';
+              }
+            }
+          }
+        },
+        responsive: [{
+            breakpoint: 1351,
+            options: {
+               chart: {
+                  height: 95,
+              },
+              grid: {
+                  padding: {
+                    top: 35,
+                    bottom: 0,
+                    left: 0
+                  }
+              },
+            },
+        },
+        {
+            breakpoint: 1200,
+            options: {
+               chart: {
+                  height: 80,
+              },
+              grid: {
+                  padding: {
+                    top: 35,
+                    bottom: 0,
+                    left: 40
+                  }
+              },
+            },
+        },
+        {
+            breakpoint: 576,
+            options: {
+               chart: {
+                  height: 95,
+              },
+              grid: {
+                  padding: {
+                    top: 35,
+                    bottom: 0,
+                    left: 0
+                  }
+              },
+            },
+        }
+        ]
+    }
+    
+    // Paid Visits
+
+    var spark2 = {
+        chart: {
+            id: 'unique-visits',
+            group: 'sparks2',
+            type: 'line',
+            height: 80,
+            sparkline: {
+                enabled: true
+            },
+            dropShadow: {
+                enabled: true,
+                top: 1,
+                left: 1,
+                blur: 2,
+                color: '#e2a03f',
+                opacity: 0.2,
+            }
+        },
+        series: [{
+            data: [21, 9, 36, 12, 44, 25, 59, 41, 66, 25]
+        }],
+        stroke: {
+          curve: 'smooth',
+          width: 2,
+        },
+        markers: {
+            size: 0
+        },
+        grid: {
+          padding: {
+            top: 35,
+            bottom: 0,
+            left: 40
+          }
+        },
+        colors: ['#e2a03f'],
+        tooltip: {
+            x: {
+                show: false
+            },
+            y: {
+                title: {
+                    formatter: function formatter(val) {
+                        return '';
+                    }
+                }
+            }
+        },
+        responsive: [{
+            breakpoint: 1351,
+            options: {
+               chart: {
+                  height: 95,
+              },
+              grid: {
+                  padding: {
+                    top: 35,
+                    bottom: 0,
+                    left: 0
+                  }
+              },
+            },
+        },
+        {
+            breakpoint: 1200,
+            options: {
+               chart: {
+                  height: 80,
+              },
+              grid: {
+                  padding: {
+                    top: 35,
+                    bottom: 0,
+                    left: 40
+                  }
+              },
+            },
+        },
+        {
+            breakpoint: 576,
+            options: {
+               chart: {
+                  height: 95,
+              },
+              grid: {
+                  padding: {
+                    top: 35,
+                    bottom: 0,
+                    left: 0
+                  }
+              },
+            },
+        }
+
+        ]
+    }
+
+    /*
+        ===================================
+            Unique Visitors | Options
+        ===================================
+    */
+
+    var d_1options1 = {
+      chart: {
+          height: 350,
+          type: 'bar',
+          toolbar: {
+            show: false,
+          },
+          dropShadow: {
+              enabled: true,
+              top: 1,
+              left: 1,
+              blur: 2,
+              color: '#acb0c3',
+              opacity: 0.7,
+          }
+      },
+      colors: ['#5c1ac3', '#ffbb44'],
+      plotOptions: {
+          bar: {
+              horizontal: false,
+              columnWidth: '55%',
+              endingShape: 'rounded'  
+          },
+      },
+      dataLabels: {
+          enabled: false
+      },
+      legend: {
+            position: 'bottom',
+            horizontalAlign: 'center',
+            fontSize: '14px',
+            markers: {
+              width: 10,
+              height: 10,
+            },
+            itemMargin: {
+              horizontal: 0,
+              vertical: 8
+            }
+      },
+      stroke: {
+          show: true,
+          width: 2,
+          colors: ['transparent']
+      },
+      series: [{
+          name: 'Direct',
+          data: [58, 44, 55, 57, 56, 61, 58, 63, 60, 66, 56, 63]
+      }, {
+          name: 'Organic',
+          data: [91, 76, 85, 101, 98, 87, 105, 91, 114, 94, 66, 70]
+      }],
+      xaxis: {
+          categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+      },
+      fill: {
+        type: 'gradient',
+        gradient: {
+          shade: 'light',
+          type: 'vertical',
+          shadeIntensity: 0.3,
+          inverseColors: false,
+          opacityFrom: 1,
+          opacityTo: 0.8,
+          stops: [0, 100]
+        }
+      },
+      tooltip: {
+          y: {
+              formatter: function (val) {
+                  return val
+              }
+          }
+      }
+    }
+
+
+    /*
+        ====================================
+            Orgainc and Direct | Options
+        ====================================
+    */
+
+    var d_1options2 = {
+        chart: {
+            type: 'pie',
+            width: 350
+        },
+        colors: ['#2196f3', '#1b2e4b'],
+        dataLabels: {
+          enabled: false
+        },
+        legend: {
+            position: 'bottom',
+            horizontalAlign: 'center',
+            fontSize: '14px',
+            markers: {
+              width: 10,
+              height: 10,
+            },
+            itemMargin: {
+              horizontal: 0,
+              vertical: 8
+            }
+        },        
+        series: [20, 80],
+        labels: ['Direct', 'Organic'],
+        responsive: [{
+            breakpoint: 1599,
+            options: {
+                chart: {
+                    width: '200px',
+                    height: '290px'
+                },
+                legend: {
+                    position: 'bottom'
+                }
+            },
+        }]
+    }
+
+
+    /*
+        ==============================
+            Statistics | Options
+        ==============================
+    */
+
+    // Followers
+
+    var d_1options3 = {
+      chart: {
+        id: 'sparkline1',
+        type: 'area',
+        height: 160,
+        sparkline: {
+          enabled: true
+        },
+      },
+      stroke: {
+          curve: 'smooth',
+          width: 2,
+      },
+      series: [{
+        name: 'Sales',
+        data: [28, 40, 36, 52, 38, 60, 38]
+      }],
+      labels: ['1', '2', '3', '4', '5', '6', '7'],
+      yaxis: {
+        min: 0
+      },
+      colors: ['#1b55e2'],
+      tooltip: {
+        x: {
+          show: false,
+        }
+      },
+      fill: {
+          type:"gradient",
+          gradient: {
+              type: "vertical",
+              shadeIntensity: 1,
+              inverseColors: !1,
+              opacityFrom: .40,
+              opacityTo: .05,
+              stops: [45, 100]
+          }
+      },
+    }
+
+    // Referral
+
+    var d_1options4 = {
+      chart: {
+        id: 'sparkline1',
+        type: 'area',
+        height: 160,
+        sparkline: {
+          enabled: true
+        },
+      },
+      stroke: {
+          curve: 'smooth',
+          width: 2,
+      },
+      series: [{
+        name: 'Sales',
+        data: [28, 40, 36, 52, 38, 60, 38]
+      }],
+      labels: ['1', '2', '3', '4', '5', '6', '7'],
+      yaxis: {
+        min: 0
+      },
+      colors: ['#e7515a'],
+      tooltip: {
+        x: {
+          show: false,
+        }
+      },
+      fill: {
+          type:"gradient",
+          gradient: {
+              type: "vertical",
+              shadeIntensity: 1,
+              inverseColors: !1,
+              opacityFrom: .40,
+              opacityTo: .05,
+              stops: [45, 100]
+          }
+      },
+    }
+
+    // Engagement Rate
+
+    var d_1options5 = {
+      chart: {
+        id: 'sparkline1',
+        type: 'area',
+        height: 160,
+        sparkline: {
+          enabled: true
+        },
+      },
+      stroke: {
+          curve: 'smooth',
+          width: 2,
+      },
+      fill: {
+        opacity: 1,
+      },
+      series: [{
+        name: 'Sales',
+        data: [28, 40, 36, 52, 38, 60, 38]
+      }],
+      labels: ['1', '2', '3', '4', '5', '6', '7'],
+      yaxis: {
+        min: 0
+      },
+      colors: ['#8dbf42'],
+      tooltip: {
+        x: {
+          show: false,
+        }
+      },
+      fill: {
+          type:"gradient",
+          gradient: {
+              type: "vertical",
+              shadeIntensity: 1,
+              inverseColors: !1,
+              opacityFrom: .40,
+              opacityTo: .05,
+              stops: [45, 100]
+          }
+      },
+    }
+
+    
+
+
+    /*
+        ==============================
+        |    @Render Charts Script    |
+        ==============================
+    */
+
+
+    /*
+        ======================================
+            Visitor Statistics | Script
+        ======================================
+    */
+
+    // Total Visits
+    d_1C_1 = new ApexCharts(document.querySelector("#total-users"), spark1);
+    d_1C_1.render();
+
+    // Paid Visits
+    d_1C_2 = new ApexCharts(document.querySelector("#paid-visits"), spark2);
+    d_1C_2.render();
+
+    /*
+        ===================================
+            Unique Visitors | Script
+        ===================================
+    */
+
+    var d_1C_3 = new ApexCharts(
+        document.querySelector("#uniqueVisits"),
+        d_1options1
+    );
+    d_1C_3.render();
+
+    /*
+        ====================================
+            Orgainc and Direct | Script
+        ====================================
+    */
+
+    var d_1C_4 = new ApexCharts(document.querySelector("#orgaincDirect"), d_1options2);
+    d_1C_4.render();
+
+
+    /*
+        ==============================
+            Statistics | Script
+        ==============================
+    */
+
+
+    // Followers
+
+    var d_1C_5 = new ApexCharts(document.querySelector("#hybrid_followers"), d_1options3);
+    d_1C_5.render()
+
+    // Referral
+
+    var d_1C_6 = new ApexCharts(document.querySelector("#hybrid_followers1"), d_1options4);
+    d_1C_6.render()
+
+    // Engagement Rate
+
+    var d_1C_7 = new ApexCharts(document.querySelector("#hybrid_followers3"), d_1options5);
+    d_1C_7.render()
+
+
+
+} catch(e) {
+  // statements
+  console.log(e);
+}
+
+
+
+try {
+
+/*
+    ==============================
+    |    @Options Charts Script   |
+    ==============================
+*/
+
+/*
+    =============================
+        Daily Sales | Options
+    =============================
+*/
+var d_2options1 = {
+  chart: {
+        height: 160,
+        type: 'bar',
+        stacked: true,
+        stackType: '100%',
+        toolbar: {
+          show: false,
+        }
+    },
+    dataLabels: {
+        enabled: false,
+    },
+    stroke: {
+        show: true,
+        width: 1,
+    },
+    colors: ['#e2a03f', '#e0e6ed'],
+    responsive: [{
+        breakpoint: 480,
+        options: {
+            legend: {
+                position: 'bottom',
+                offsetX: -10,
+                offsetY: 0
+            }
+        }
+    }],
+    series: [{
+        name: 'Sales',
+        data: [44, 55, 41, 67, 22, 43, 21]
+    },{
+        name: 'Last Week',
+        data: [13, 23, 20, 8, 13, 27, 33]
+    }],
+    xaxis: {
+        labels: {
+            show: false,
+        },
+        categories: ['Sun', 'Mon', 'Tue', 'Wed', 'Thur', 'Fri', 'Sat'],
+    },
+    yaxis: {
+        show: false
+    },
+    fill: {
+        opacity: 1
+    },
+    plotOptions: {
+        bar: {
+            horizontal: false,
+            endingShape: 'rounded',
+            columnWidth: '25%',
+        }
+    },
+    legend: {
+        show: false,
+    },
+    grid: {
+        show: false,
+        xaxis: {
+            lines: {
+                show: false
+            }
+        },
+        padding: {
+          top: 10,
+          right: 0,
+          bottom: -40,
+          left: 0
+        }, 
+    },
+}
+
+/*
+    =============================
+        Total Orders | Options
+    =============================
+*/
+var d_2options2 = {
+  chart: {
+    id: 'sparkline1',
+    group: 'sparklines',
+    type: 'area',
+    height: 280,
+    sparkline: {
+      enabled: true
+    },
+  },
+  stroke: {
+      curve: 'smooth',
+      width: 2
+  },
+  fill: {
+    opacity: 1,
+  },
+  series: [{
+    name: 'Sales',
+    data: [28, 40, 36, 52, 38, 60, 38, 52, 36, 40]
+  }],
+  labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
+  yaxis: {
+    min: 0
+  },
+  grid: {
+    padding: {
+      top: 125,
+      right: 0,
+      bottom: 36,
+      left: 0
+    }, 
+  },
+  fill: {
+      type:"gradient",
+      gradient: {
+          type: "vertical",
+          shadeIntensity: 1,
+          inverseColors: !1,
+          opacityFrom: .40,
+          opacityTo: .05,
+          stops: [45, 100]
+      }
+  },
+  tooltip: {
+    x: {
+      show: false,
+    },
+    theme: 'dark'
+  },
+  colors: ['#fff']
+}
+
+/*
+    =================================
+        Revenue Monthly | Options
+    =================================
+*/
+var options1 = {
+  chart: {
+    fontFamily: 'Nunito, sans-serif',
+    height: 365,
+    type: 'area',
+    zoom: {
+        enabled: false
+    },
+    dropShadow: {
+      enabled: true,
+      opacity: 0.3,
+      blur: 5,
+      left: -7,
+      top: 22
+    },
+    toolbar: {
+      show: false
+    },
+    events: {
+      mounted: function(ctx, config) {
+        const highest1 = ctx.getHighestValueInSeries(0);
+        const highest2 = ctx.getHighestValueInSeries(1);
+
+        ctx.addPointAnnotation({
+          x: new Date(ctx.w.globals.seriesX[0][ctx.w.globals.series[0].indexOf(highest1)]).getTime(),
+          y: highest1,
+          label: {
+            style: {
+              cssClass: 'd-none'
+            }
+          },
+          customSVG: {
+              SVG: '<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="#1b55e2" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-circle"><circle cx="12" cy="12" r="10"></circle></svg>',
+              cssClass: undefined,
+              offsetX: -8,
+              offsetY: 5
+          }
+        })
+
+        ctx.addPointAnnotation({
+          x: new Date(ctx.w.globals.seriesX[1][ctx.w.globals.series[1].indexOf(highest2)]).getTime(),
+          y: highest2,
+          label: {
+            style: {
+              cssClass: 'd-none'
+            }
+          },
+          customSVG: {
+              SVG: '<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="#e7515a" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-circle"><circle cx="12" cy="12" r="10"></circle></svg>',
+              cssClass: undefined,
+              offsetX: -8,
+              offsetY: 5
+          }
+        })
+      },
+    }
+  },
+  colors: ['#1b55e2', '#e7515a'],
+  dataLabels: {
+      enabled: false
+  },
+  markers: {
+    discrete: [{
+    seriesIndex: 0,
+    dataPointIndex: 7,
+    fillColor: '#000',
+    strokeColor: '#000',
+    size: 5
+  }, {
+    seriesIndex: 2,
+    dataPointIndex: 11,
+    fillColor: '#000',
+    strokeColor: '#000',
+    size: 4
+  }]
+  },
+  subtitle: {
+    text: 'Total Profit',
+    align: 'left',
+    margin: 0,
+    offsetX: -10,
+    offsetY: 35,
+    floating: false,
+    style: {
+      fontSize: '14px',
+      color:  '#888ea8'
+    }
+  },
+  title: {
+    text: '$10,840',
+    align: 'left',
+    margin: 0,
+    offsetX: -10,
+    offsetY: 0,
+    floating: false,
+    style: {
+      fontSize: '25px',
+      color:  '#0e1726'
+    },
+  },
+  stroke: {
+      show: true,
+      curve: 'smooth',
+      width: 2,
+      lineCap: 'square'
+  },
+  series: [{
+      name: 'Income',
+      data: [16800, 16800, 15500, 17800, 15500, 17000, 19000, 16000, 15000, 17000, 14000, 17000]
+  }, {
+      name: 'Expenses',
+      data: [16500, 17500, 16200, 17300, 16000, 19500, 16000, 17000, 16000, 19000, 18000, 19000]
+  }],
+  labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+  xaxis: {
+    axisBorder: {
+      show: false
+    },
+    axisTicks: {
+      show: false
+    },
+    crosshairs: {
+      show: true
+    },
+    labels: {
+      offsetX: 0,
+      offsetY: 5,
+      style: {
+          fontSize: '12px',
+          fontFamily: 'Nunito, sans-serif',
+          cssClass: 'apexcharts-xaxis-title',
+      },
+    }
+  },
+  yaxis: {
+    labels: {
+      formatter: function(value, index) {
+        return (value / 1000) + 'K'
+      },
+      offsetX: -22,
+      offsetY: 0,
+      style: {
+          fontSize: '12px',
+          fontFamily: 'Nunito, sans-serif',
+          cssClass: 'apexcharts-yaxis-title',
+      },
+    }
+  },
+  grid: {
+    borderColor: '#e0e6ed',
+    strokeDashArray: 5,
+    xaxis: {
+        lines: {
+            show: true
+        }
+    },   
+    yaxis: {
+        lines: {
+            show: false,
+        }
+    },
+    padding: {
+      top: 0,
+      right: 0,
+      bottom: 0,
+      left: -10
+    }, 
+  }, 
+  legend: {
+    position: 'top',
+    horizontalAlign: 'right',
+    offsetY: -50,
+    fontSize: '16px',
+    fontFamily: 'Nunito, sans-serif',
+    markers: {
+      width: 10,
+      height: 10,
+      strokeWidth: 0,
+      strokeColor: '#fff',
+      fillColors: undefined,
+      radius: 12,
+      onClick: undefined,
+      offsetX: 0,
+      offsetY: 0
+    },    
+    itemMargin: {
+      horizontal: 0,
+      vertical: 20
+    }
+  },
+  tooltip: {
+    theme: 'dark',
+    marker: {
+      show: true,
+    },
+    x: {
+      show: false,
+    }
+  },
+  fill: {
+      type:"gradient",
+      gradient: {
+          type: "vertical",
+          shadeIntensity: 1,
+          inverseColors: !1,
+          opacityFrom: .28,
+          opacityTo: .05,
+          stops: [45, 100]
+      }
+  },
+  responsive: [{
+    breakpoint: 575,
+    options: {
+      legend: {
+          offsetY: -30,
+      },
+    },
+  }]
+}
+
+/*
+    ==================================
+        Sales By Category | Options
+    ==================================
+*/
+var options = {
+    chart: {
+        type: 'donut',
+        width: 380
+    },
+    colors: ['#5c1ac3', '#e2a03f', '#e7515a', '#e2a03f'],
+    dataLabels: {
+      enabled: false
+    },
+    legend: {
+        position: 'bottom',
+        horizontalAlign: 'center',
+        fontSize: '14px',
+        markers: {
+          width: 10,
+          height: 10,
+        },
+        itemMargin: {
+          horizontal: 0,
+          vertical: 8
+        }
+    },
+    plotOptions: {
+      pie: {
+        donut: {
+          size: '65%',
+          background: 'transparent',
+          labels: {
+            show: true,
+            name: {
+              show: true,
+              fontSize: '29px',
+              fontFamily: 'Nunito, sans-serif',
+              color: undefined,
+              offsetY: -10
+            },
+            value: {
+              show: true,
+              fontSize: '26px',
+              fontFamily: 'Nunito, sans-serif',
+              color: '20',
+              offsetY: 16,
+              formatter: function (val) {
+                return val
+              }
+            },
+            total: {
+              show: true,
+              showAlways: true,
+              label: 'Total',
+              color: '#888ea8',
+              formatter: function (w) {
+                return w.globals.seriesTotals.reduce( function(a, b) {
+                  return a + b
+                }, 0)
+              }
+            }
+          }
+        }
+      }
+    },
+    stroke: {
+      show: true,
+      width: 25,
+    },
+    series: [985, 737, 270],
+    labels: ['Apparel', 'Electronic', 'Others'],
+    responsive: [{
+        breakpoint: 1599,
+        options: {
+            chart: {
+                width: '350px',
+                height: '400px'
+            },
+            legend: {
+                position: 'bottom'
+            }
+        },
+
+        breakpoint: 1439,
+        options: {
+            chart: {
+                width: '250px',
+                height: '390px'
+            },
+            legend: {
+                position: 'bottom'
+            },
+            plotOptions: {
+              pie: {
+                donut: {
+                  size: '65%',
+                }
+              }
+            }
+        },
+    }]
+}
+
+
+/*
+    ==============================
+    |    @Render Charts Script    |
+    ==============================
+*/
+
+
+/*
+    ============================
+        Daily Sales | Render
+    ============================
+*/
+var d_2C_1 = new ApexCharts(document.querySelector("#daily-sales"), d_2options1);
+d_2C_1.render();
+
+/*
+    ============================
+        Total Orders | Render
+    ============================
+*/
+var d_2C_2 = new ApexCharts(document.querySelector("#total-orders"), d_2options2);
+d_2C_2.render();
+
+/*
+    ================================
+        Revenue Monthly | Render
+    ================================
+*/
+var chart1 = new ApexCharts(
+    document.querySelector("#revenueMonthly"),
+    options1
+);
+
+chart1.render();
+
+/*
+    =================================
+        Sales By Category | Render
+    =================================
+*/
+var chart = new ApexCharts(
+    document.querySelector("#chart-2"),
+    options
+);
+
+chart.render();
+
+
+/*
+    =============================================
+        Perfect Scrollbar | Recent Activities
+    =============================================
+*/
+// const ps = new PerfectScrollbar(document.querySelector('.mt-container'));
+$('.mt-container').each(function(){ const ps = new PerfectScrollbar($(this)[0]); });
+
+
+} catch(e) {
+    console.log(e);
+}
\ No newline at end of file
diff --git a/templates/.DS_Store b/templates/.DS_Store
new file mode 100644
index 0000000000000000000000000000000000000000..034beb81553cef5d36b5d5787a00f3151546fdcc
GIT binary patch
literal 6148
zcmeHK!AiqG5Z!I7ZYyFBf_lqE@X$kRi&aDjwH|sCB6?7<i7gt4+0vvIt&x0({*gc6
z=jhDtwxHFUh{_DizRB#&hIt!yGmJ6b7<4L(6&Yg!6fu*B;S<4m)G5grPZp5l8m&NH
zc!Bib85bn^{S4sV<(S7@7P0P!{o8@L^;adTkV%|3jCy9DpS@n-M{&9Q!ZX?2%<P;H
z1yNWioH<u==)`V3h#GGH1fLGv_{uZ(p_IYIcD*CNJ3KEg?a459{jl3t$$qB`A*aWF
z*pb7A9E6=nt>fqkA@U-BUR)iGwrZ7<wNb4lC2LgKs8>r?eRDfW@?v?dvfFB3-`<Vx
zlZQvW863V;C5r~f@C3%B!W*X_1~R+^-#C68M@S411H{1JXTY3nV*c-!LKP4L#K1Q*
zfaik+if9{5HL9Zn2Gs%p=D@84Z1w98XrTkpHkfJz4+z((fI5|%7K5A4f$Mabw@rMi
zQKvJm-VE!QH*?dWaMO5jONBFTYow7FAO_wufW03`5%2%~uls)$L<2EE4E#?9c&_O*
z8&I3MTc@hTyVe42gQ8$us&SG6hPsL&7O&zJP$l5E&;YazrW(NmLO%kE1{#QgA7$VT
DimzJ@

literal 0
HcmV?d00001

diff --git a/templates/base/base_layout.html b/templates/base/base_layout.html
new file mode 100644
index 00000000..7e5d6649
--- /dev/null
+++ b/templates/base/base_layout.html
@@ -0,0 +1,1366 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no">
+    <title>Sales Admin | CORK - Multipurpose Bootstrap Dashboard Template </title>
+    <link rel="icon" type="image/x-icon" href="assets/img/favicon.ico"/>
+    <link href="assets/css/loader.css" rel="stylesheet" type="text/css" />
+    <script src="assets/js/loader.js"></script>
+    <!-- BEGIN GLOBAL MANDATORY STYLES -->
+    <link href="https://fonts.googleapis.com/css?family=Nunito:400,600,700" rel="stylesheet">
+    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
+    <link href="assets/css/plugins.css" rel="stylesheet" type="text/css" />
+    <!-- END GLOBAL MANDATORY STYLES -->
+
+    <!-- BEGIN PAGE LEVEL PLUGINS/CUSTOM STYLES -->
+    <link href="plugins/apex/apexcharts.css" rel="stylesheet" type="text/css">
+    <link href="assets/css/dashboard/dash_1.css" rel="stylesheet" type="text/css" />
+    <!-- END PAGE LEVEL PLUGINS/CUSTOM STYLES -->
+
+</head>
+<body>
+    <!-- BEGIN LOADER -->
+    <div id="load_screen"> <div class="loader"> <div class="loader-content">
+        <div class="spinner-grow align-self-center"></div>
+    </div></div></div>
+    <!--  END LOADER -->
+
+    <!--  BEGIN NAVBAR  -->
+    <div class="header-container fixed-top">
+        <header class="header navbar navbar-expand-sm">
+
+            <ul class="navbar-item theme-brand flex-row  text-center">
+                <li class="nav-item theme-logo">
+                    <a href="index.html">
+                        <img src="assets/img/90x90.jpg" class="navbar-logo" alt="logo">
+                    </a>
+                </li>
+                <li class="nav-item theme-text">
+                    <a href="index.html" class="nav-link"> CORK </a>
+                </li>
+            </ul>
+
+            <ul class="navbar-item flex-row ml-md-0 ml-auto">
+                <li class="nav-item align-self-center search-animated">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search toggle-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+                    <form class="form-inline search-full form-inline search" role="search">
+                        <div class="search-bar">
+                            <input type="text" class="form-control search-form-control  ml-lg-auto" placeholder="Search...">
+                        </div>
+                    </form>
+                </li>
+            </ul>
+
+            <ul class="navbar-item flex-row ml-md-auto">
+
+                <li class="nav-item dropdown language-dropdown">
+                    <a href="javascript:void(0);" class="nav-link dropdown-toggle" id="language-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                        <img src="assets/img/ca.png" class="flag-width" alt="flag">
+                    </a>
+                    <div class="dropdown-menu position-absolute" aria-labelledby="language-dropdown">
+                        <a class="dropdown-item d-flex" href="javascript:void(0);"><img src="assets/img/de.png" class="flag-width" alt="flag"> <span class="align-self-center">&nbsp;German</span></a>
+                        <a class="dropdown-item d-flex" href="javascript:void(0);"><img src="assets/img/jp.png" class="flag-width" alt="flag"> <span class="align-self-center">&nbsp;Japanese</span></a>
+                        <a class="dropdown-item d-flex" href="javascript:void(0);"><img src="assets/img/fr.png" class="flag-width" alt="flag"> <span class="align-self-center">&nbsp;French</span></a>
+                        <a class="dropdown-item d-flex" href="javascript:void(0);"><img src="assets/img/ca.png" class="flag-width" alt="flag"> <span class="align-self-center">&nbsp;English</span></a>
+                    </div>
+                </li>
+
+                <li class="nav-item dropdown message-dropdown">
+                    <a href="javascript:void(0);" class="nav-link dropdown-toggle" id="messageDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-mail"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
+                    </a>
+                    <div class="dropdown-menu p-0 position-absolute" aria-labelledby="messageDropdown">
+                        <div class="">
+                            <a class="dropdown-item">
+                                <div class="">
+
+                                    <div class="media">
+                                        <div class="user-img">
+                                            <img class="usr-img rounded-circle" src="assets/img/90x90.jpg" alt="profile">
+                                        </div>
+                                        <div class="media-body">
+                                            <div class="">
+                                                <h5 class="usr-name">Kara Young</h5>
+                                                <p class="msg-title">ACCOUNT UPDATE</p>
+                                            </div>
+                                        </div>
+                                    </div>
+
+                                </div>
+                            </a>
+                            <a class="dropdown-item">
+                                <div class="">
+
+                                    <div class="media">
+                                        <div class="user-img">
+                                            <img class="usr-img rounded-circle" src="assets/img/90x90.jpg" alt="profile">
+                                        </div>
+                                        <div class="media-body">
+                                            <div class="">
+                                                <h5 class="usr-name">Daisy Anderson</h5>
+                                                <p class="msg-title">ACCOUNT UPDATE</p>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    
+                                </div>
+                            </a>
+                            <a class="dropdown-item">
+                                <div class="">
+
+                                    <div class="media">
+                                        <div class="user-img">
+                                            <img class="usr-img rounded-circle" src="assets/img/90x90.jpg" alt="profile">
+                                        </div>
+                                        <div class="media-body">
+                                            <div class="">
+                                                <h5 class="usr-name">Oscar Garner</h5>
+                                                <p class="msg-title">ACCOUNT UPDATE</p>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    
+                                </div>
+                            </a>
+                        </div>
+                    </div>
+                </li>
+
+                <li class="nav-item dropdown notification-dropdown">
+                    <a href="javascript:void(0);" class="nav-link dropdown-toggle" id="notificationDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bell"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg><span class="badge badge-success"></span>
+                    </a>
+                    <div class="dropdown-menu position-absolute" aria-labelledby="notificationDropdown">
+                        <div class="notification-scroll">
+
+                            <div class="dropdown-item">
+                                <div class="media">
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-heart"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
+                                    <div class="media-body">
+                                        <div class="notification-para"><span class="user-name">Shaun Park</span> likes your photo.</div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div class="dropdown-item">
+                                <div class="media">
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-share-2"><circle cx="18" cy="5" r="3"></circle><circle cx="6" cy="12" r="3"></circle><circle cx="18" cy="19" r="3"></circle><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"></line><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"></line></svg>
+                                    <div class="media-body">
+                                        <div class="notification-para"><span class="user-name">Kelly Young</span> shared your post</div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div class="dropdown-item">
+                                <div class="media">
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-tag"><path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"></path><line x1="7" y1="7" x2="7" y2="7"></line></svg>
+                                    <div class="media-body">
+                                        <div class="notification-para"><span class="user-name">Kelly Young</span> mentioned you in comment.</div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </li>
+
+                <li class="nav-item dropdown user-profile-dropdown">
+                    <a href="javascript:void(0);" class="nav-link dropdown-toggle user" id="userProfileDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+                        <img src="assets/img/90x90.jpg" alt="avatar">
+                    </a>
+                    <div class="dropdown-menu position-absolute" aria-labelledby="userProfileDropdown">
+                        <div class="">
+                            <div class="dropdown-item">
+                                <a class="" href="user_profile.html"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-user"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg> My Profile</a>
+                            </div>
+                            <div class="dropdown-item">
+                                <a class="" href="apps_mailbox.html"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-inbox"><polyline points="22 12 16 12 14 15 10 15 8 12 2 12"></polyline><path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"></path></svg> Inbox</a>
+                            </div>
+                            <div class="dropdown-item">
+                                <a class="" href="auth_lockscreen.html"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-lock"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg> Lock Screen</a>
+                            </div>
+                            <div class="dropdown-item">
+                                <a class="" href="auth_login.html"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-log-out"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg> Sign Out</a>
+                            </div>
+                        </div>
+                    </div>
+                </li>
+
+            </ul>
+        </header>
+    </div>
+    <!--  END NAVBAR  -->
+
+    <!--  BEGIN NAVBAR  -->
+    <div class="sub-header-container">
+        <header class="header navbar navbar-expand-sm">
+            <a href="javascript:void(0);" class="sidebarCollapse" data-placement="bottom"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg></a>
+
+            <ul class="navbar-nav flex-row">
+                <li>
+                    <div class="page-header">
+
+                        <nav class="breadcrumb-one" aria-label="breadcrumb">
+                            <ol class="breadcrumb">
+                                <li class="breadcrumb-item"><a href="javascript:void(0);">Dashboard</a></li>
+                                <li class="breadcrumb-item active" aria-current="page"><span>Sales</span></li>
+                            </ol>
+                        </nav>
+
+                    </div>
+                </li>
+            </ul>
+            <ul class="navbar-nav flex-row ml-auto ">
+                <li class="nav-item more-dropdown">
+                    <div class="dropdown  custom-dropdown-icon">
+                        <a class="dropdown-toggle btn" href="#" role="button" id="customDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span>Settings</span> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg></a>
+
+                        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="customDropdown">
+                            <a class="dropdown-item" data-value="Settings" href="javascript:void(0);">Settings</a>
+                            <a class="dropdown-item" data-value="Mail" href="javascript:void(0);">Mail</a>
+                            <a class="dropdown-item" data-value="Print" href="javascript:void(0);">Print</a>
+                            <a class="dropdown-item" data-value="Download" href="javascript:void(0);">Download</a>
+                            <a class="dropdown-item" data-value="Share" href="javascript:void(0);">Share</a>
+                        </div>
+                    </div>
+                </li>
+            </ul>
+        </header>
+    </div>
+    <!--  END NAVBAR  -->
+
+    <!--  BEGIN MAIN CONTAINER  -->
+    <div class="main-container" id="container">
+
+        <div class="overlay"></div>
+        <div class="search-overlay"></div>
+
+        <!--  BEGIN SIDEBAR  -->
+        <div class="sidebar-wrapper sidebar-theme">
+            
+            <nav id="sidebar">
+                <div class="shadow-bottom"></div>
+                <ul class="list-unstyled menu-categories" id="accordionExample">
+                    <li class="menu">
+                        <a href="#dashboard" data-active="true" data-toggle="collapse" aria-expanded="true" class="dropdown-toggle">
+                            <div class="">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                                <span>Dashboard</span>
+                            </div>
+                            <div>
+                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right"><polyline points="9 18 15 12 9 6"></polyline></svg>
+                            </div>
+                        </a>
+                        <ul class="collapse submenu list-unstyled show" id="dashboard" data-parent="#accordionExample">
+                            <li class="active">
+                                <a href="index.html"> Sales </a>
+                            </li>
+                            <li>
+                                <a href="index2.html"> Analytics </a>
+                            </li>
+                        </ul>
+                    </li>
+
+                    <li class="menu">
+                        <a href="#app" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
+                            <div class="">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-cpu"><rect x="4" y="4" width="16" height="16" rx="2" ry="2"></rect><rect x="9" y="9" width="6" height="6"></rect><line x1="9" y1="1" x2="9" y2="4"></line><line x1="15" y1="1" x2="15" y2="4"></line><line x1="9" y1="20" x2="9" y2="23"></line><line x1="15" y1="20" x2="15" y2="23"></line><line x1="20" y1="9" x2="23" y2="9"></line><line x1="20" y1="14" x2="23" y2="14"></line><line x1="1" y1="9" x2="4" y2="9"></line><line x1="1" y1="14" x2="4" y2="14"></line></svg>
+                                <span>Apps</span>
+                            </div>
+                            <div>
+                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right"><polyline points="9 18 15 12 9 6"></polyline></svg>
+                            </div>
+                        </a>
+                        <ul class="collapse submenu list-unstyled" id="app" data-parent="#accordionExample">
+                            <li>
+                                <a href="apps_chat.html"> Chat </a>
+                            </li>
+                            <li>
+                                <a href="apps_mailbox.html"> Mailbox  </a>
+                            </li>
+                            <li>
+                                <a href="apps_todoList.html"> Todo List </a>
+                            </li>                            
+                            <li>
+                                <a href="apps_notes.html"> Notes </a>
+                            </li>
+                            <li>
+                                <a href="apps_scrumboard.html">Scrumboard</a>
+                            </li>
+                            <li>
+                                <a href="apps_contacts.html"> Contacts </a>
+                            </li>
+                            <li>
+                                <a href="apps_invoice.html"> Invoice List </a>
+                            </li>
+                            <li>
+                                <a href="apps_calendar.html"> Calendar </a>
+                            </li>
+                        </ul>
+                    </li>
+
+                    <li class="menu">
+                        <a href="#components" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
+                            <div class="">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-box"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                                <span>Components</span>
+                            </div>
+                            <div>
+                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right"><polyline points="9 18 15 12 9 6"></polyline></svg>
+                            </div>
+                        </a>
+                        <ul class="collapse submenu list-unstyled" id="components" data-parent="#accordionExample">
+                            <li>
+                                <a href="component_tabs.html"> Tabs </a>
+                            </li>
+                            <li>
+                                <a href="component_accordion.html"> Accordions  </a>
+                            </li>
+                            <li>
+                                <a href="component_modal.html"> Modals </a>
+                            </li>                            
+                            <li>
+                                <a href="component_cards.html"> Cards </a>
+                            </li>
+                            <li>
+                                <a href="component_bootstrap_carousel.html">Carousel</a>
+                            </li>
+                            <li>
+                                <a href="component_blockui.html"> Block UI </a>
+                            </li>
+                            <li>
+                                <a href="component_countdown.html"> Countdown </a>
+                            </li>
+                            <li>
+                                <a href="component_counter.html"> Counter </a>
+                            </li>
+                            <li>
+                                <a href="component_sweetalert.html"> Sweet Alerts </a>
+                            </li>
+                            <li>
+                                <a href="component_timeline.html"> Timeline </a>
+                            </li>
+                            <li>
+                                <a href="component_snackbar.html"> Notifications </a>
+                            </li>
+                            <li>
+                                <a href="component_session_timeout.html"> Session Timeout </a>
+                            </li>
+                            <li>
+                                <a href="component_media_object.html"> Media Object </a>
+                            </li>
+                            <li>
+                                <a href="component_list_group.html"> List Group </a>
+                            </li>
+                            <li>
+                                <a href="component_pricing_table.html"> Pricing Tables </a>
+                            </li>
+                            <li>
+                                <a href="component_lightbox.html"> Lightbox </a>
+                            </li>
+                        </ul>
+                    </li>
+
+                    <li class="menu">
+                        <a href="#elements" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
+                            <div class="">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-zap"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg>
+                                <span>Elements</span>
+                            </div>
+                            <div>
+                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right"><polyline points="9 18 15 12 9 6"></polyline></svg>
+                            </div>
+                        </a>
+                        <ul class="collapse submenu list-unstyled" id="elements" data-parent="#accordionExample">
+                            <li>
+                                <a href="element_alerts.html"> Alerts </a>
+                            </li>
+                            <li>
+                                <a href="element_avatar.html"> Avatar </a>
+                            </li>
+                            <li>
+                                <a href="element_badges.html"> Badges </a>
+                            </li>
+                            <li>
+                                <a href="element_breadcrumbs.html"> Breadcrumbs </a>
+                            </li>                            
+                            <li>
+                                <a href="element_buttons.html"> Buttons </a>
+                            </li>
+                            <li>
+                                <a href="element_buttons_group.html"> Button Groups </a>
+                            </li>
+                            <li>
+                                <a href="element_color_library.html"> Color Library </a>
+                            </li>
+                            <li>
+                                <a href="element_dropdown.html"> Dropdown </a>
+                            </li>
+                            <li>
+                                <a href="element_infobox.html"> Infobox </a>
+                            </li>
+                            <li>
+                                <a href="element_jumbotron.html"> Jumbotron </a>
+                            </li>
+                            <li>
+                                <a href="element_loader.html"> Loader </a>
+                            </li>
+                            <li>
+                                <a href="element_pagination.html"> Pagination </a>
+                            </li>
+                            <li>
+                                <a href="element_popovers.html"> Popovers </a>
+                            </li>
+                            <li>
+                                <a href="element_progress_bar.html"> Progress Bar </a>
+                            </li>
+                            <li>
+                                <a href="element_search.html"> Search </a>
+                            </li>
+                            <li>
+                                <a href="element_tooltips.html"> Tooltips </a>
+                            </li>
+                            <li>
+                                <a href="element_treeview.html"> Treeview </a>
+                            </li>
+                            <li>
+                                <a href="element_typography.html"> Typography </a>
+                            </li>
+                        </ul>
+                    </li>
+
+                    <li class="menu">
+                        <a href="fonticons.html" aria-expanded="false" class="dropdown-toggle">
+                            <div class="">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-target"><circle cx="12" cy="12" r="10"></circle><circle cx="12" cy="12" r="6"></circle><circle cx="12" cy="12" r="2"></circle></svg>
+                                <span>Font Icons</span>
+                            </div>
+                        </a>
+                    </li>
+
+                    <li class="menu">
+                        <a href="widgets.html" aria-expanded="false" class="dropdown-toggle">
+                            <div class="">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-airplay"><path d="M5 17H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-1"></path><polygon points="12 15 17 21 7 21 12 15"></polygon></svg>
+                                <span>Widgets</span>
+                            </div>
+                        </a>
+                    </li>
+
+                    <li class="menu">
+                        <a href="table_basic.html" aria-expanded="false" class="dropdown-toggle">
+                            <div class="">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-layout"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
+                                <span>Tables</span>
+                            </div>
+                        </a>
+                    </li>
+
+                    <li class="menu">
+                        <a href="#datatables" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
+                            <div class="">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-layers"><polygon points="12 2 2 7 12 12 22 7 12 2"></polygon><polyline points="2 17 12 22 22 17"></polyline><polyline points="2 12 12 17 22 12"></polyline></svg>
+                                <span>DataTables</span>
+                            </div>
+                            <div>
+                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right"><polyline points="9 18 15 12 9 6"></polyline></svg>
+                            </div>
+                        </a>
+                        <ul class="collapse submenu list-unstyled" id="datatables" data-parent="#accordionExample">
+                            <li>
+                                <a href="table_dt_basic.html"> Basic </a>
+                            </li>
+                            <li>
+                                <a href="table_dt_basic-dark.html"> Dark </a>
+                            </li>
+                            <li>
+                                <a href="table_dt_ordering_sorting.html"> Order Sorting </a>
+                            </li>
+                            <li>
+                                <a href="table_dt_multi-column_ordering.html"> Multi-Column </a>
+                            </li>
+                            <li>
+                                <a href="table_dt_multiple_tables.html"> Multiple Tables</a>
+                            </li>
+                            <li>
+                                <a href="table_dt_alternative_pagination.html"> Alt. Pagination</a>
+                            </li>
+                            <li>
+                                <a href="table_dt_custom.html"> Custom </a>
+                            </li>
+                            <li>
+                                <a href="table_dt_range_search.html"> Range Search </a>
+                            </li>
+                            <li>
+                                <a href="table_dt_html5.html"> HTML5 Export </a>
+                            </li>
+                            <li>
+                                <a href="table_dt_live_dom_ordering.html"> Live DOM ordering </a>
+                            </li>
+                            <li>
+                                <a href="table_dt_miscellaneous.html"> Miscellaneous </a>
+                            </li>
+                        </ul>
+                    </li>
+
+                    <li class="menu">
+                        <a href="#forms" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
+                            <div class="">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clipboard"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>
+                                <span>Forms</span>
+                            </div>
+                            <div>
+                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right"><polyline points="9 18 15 12 9 6"></polyline></svg>
+                            </div>
+                        </a>
+                        <ul class="collapse submenu list-unstyled" id="forms" data-parent="#accordionExample">
+                            <li>
+                                <a href="form_bootstrap_basic.html"> Basic </a>
+                            </li>
+                            <li>
+                                <a href="form_input_group_basic.html"> Input Group </a>
+                            </li>
+                            <li>
+                                <a href="form_layouts.html"> Layouts </a>
+                            </li>
+                            <li>
+                                <a href="form_validation.html"> Validation </a>
+                            </li>
+                            <li>
+                                <a href="form_input_mask.html"> Input Mask </a>
+                            </li>
+                            <li>
+                                <a href="form_bootstrap_select.html"> Bootstrap Select </a>
+                            </li>
+                            <li>
+                                <a href="form_select2.html"> Select2 </a>
+                            </li>
+                            <li>
+                                <a href="form_bootstrap_touchspin.html"> TouchSpin </a>
+                            </li>
+                            <li>
+                                <a href="form_maxlength.html"> Maxlength </a>
+                            </li>                          
+                            <li>
+                                <a href="form_checkbox_radio.html"> Checkbox &amp; Radio </a>
+                            </li>                            
+                            <li>
+                                <a href="form_switches.html"> Switches </a>
+                            </li>
+                            <li>
+                                <a href="form_wizard.html"> Wizards </a>
+                            </li>
+                            <li>
+                                <a href="form_fileupload.html"> File Upload </a>
+                            </li>
+                            <li>
+                                <a href="form_quill.html"> Quill Editor </a>
+                            </li>
+                            <li>
+                                <a href="form_markdown.html"> Markdown Editor </a>
+                            </li>
+                            <li>
+                                <a href="form_date_range_picker.html"> Date &amp; Range Picker </a>
+                            </li>
+                            <li>
+                                <a href="form_clipboard.html"> Clipboard </a>
+                            </li>
+                            <li>
+                                <a href="form_typeahead.html"> Typeahead </a>
+                            </li>
+                        </ul>
+                    </li>
+                    
+                    <li class="menu">
+                        <a href="#users" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
+                            <div class="">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-users"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
+                                <span>Users</span>
+                            </div>
+                            <div>
+                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right"><polyline points="9 18 15 12 9 6"></polyline></svg>
+                            </div>
+                        </a>
+                        <ul class="collapse submenu list-unstyled" id="users" data-parent="#accordionExample">
+                            <li>
+                                <a href="user_profile.html"> Profile </a>
+                            </li>
+                            <li>
+                                <a href="user_account_setting.html"> Account Settings </a>
+                            </li>
+                        </ul>
+                    </li>
+
+                    <li class="menu">
+                        <a href="#pages" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
+                            <div class="">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline></svg>
+                                <span>Pages</span>
+                            </div>
+                            <div>
+                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right"><polyline points="9 18 15 12 9 6"></polyline></svg>
+                            </div>
+                        </a>
+                        <ul class="collapse submenu list-unstyled" id="pages" data-parent="#accordionExample">
+                            <li>
+                                <a href="pages_helpdesk.html"> Helpdesk </a>
+                            </li>
+                            <li>
+                                <a href="pages_contact_us.html"> Contact Form </a>
+                            </li>
+                            <li>
+                                <a href="pages_faq.html"> FAQ </a>
+                            </li>
+                            <li>
+                                <a href="pages_faq2.html"> FAQ 2 </a>
+                            </li>
+                            <li>
+                                <a href="pages_privacy.html"> Privacy Policy </a>
+                            </li>
+                            <li>
+                                <a href="pages_coming_soon.html"> Coming Soon </a>
+                            </li>
+                            <li>
+                                <a href="#pages-error" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> Error <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right"><polyline points="9 18 15 12 9 6"></polyline></svg> </a>
+                                <ul class="collapse list-unstyled sub-submenu" id="pages-error" data-parent="#pages"> 
+                                    <li>
+                                        <a href="pages_error404.html"> 404 </a>
+                                    </li>
+                                    <li>
+                                        <a href="pages_error500.html"> 500 </a>
+                                    </li>
+                                    <li>
+                                        <a href="pages_error503.html"> 503 </a>
+                                    </li>
+                                    <li>
+                                        <a href="pages_maintenence.html"> Maintanence </a>
+                                    </li>
+                                </ul>
+                            </li>
+                        </ul>
+                    </li>
+
+                    <li class="menu">
+                        <a href="#authentication" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
+                            <div class="">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-lock"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>
+                                <span>Authentication</span>
+                            </div>
+                            <div>
+                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right"><polyline points="9 18 15 12 9 6"></polyline></svg>
+                            </div>
+                        </a>
+                        <ul class="collapse submenu list-unstyled" id="authentication" data-parent="#accordionExample">
+                            <li>
+                                <a href="auth_login_boxed.html"> Login Boxed </a>
+                            </li>
+                            <li>
+                                <a href="auth_register_boxed.html"> Register Boxed </a>
+                            </li>
+                            <li>
+                                <a href="auth_lockscreen_boxed.html"> Unlock Boxed </a>
+                            </li>
+                            <li>
+                                <a href="auth_pass_recovery_boxed.html"> Recover ID Boxed </a>
+                            </li>
+                            <li>
+                                <a href="auth_login.html"> Login Cover </a>
+                            </li>
+                            <li>
+                                <a href="auth_register.html"> Register Cover </a>
+                            </li>
+                            <li>
+                                <a href="auth_lockscreen.html"> Unlock Cover </a>
+                            </li>
+                            <li>
+                                <a href="auth_pass_recovery.html"> Recover ID Cover </a>
+                            </li>
+                        </ul>
+                    </li>
+
+                    <li class="menu">
+                        <a href="dragndrop_dragula.html" aria-expanded="false" class="dropdown-toggle">
+                            <div class="">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-move"><polyline points="5 9 2 12 5 15"></polyline><polyline points="9 5 12 2 15 5"></polyline><polyline points="15 19 12 22 9 19"></polyline><polyline points="19 9 22 12 19 15"></polyline><line x1="2" y1="12" x2="22" y2="12"></line><line x1="12" y1="2" x2="12" y2="22"></line></svg>
+                                <span>Drag and Drop</span>
+                            </div>
+                        </a>
+                    </li>
+
+                    <li class="menu">
+                        <a href="map_jvector.html" aria-expanded="false" class="dropdown-toggle">
+                            <div class="">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-map"><polygon points="1 6 1 22 8 18 16 22 23 18 23 2 16 6 8 2 1 6"></polygon><line x1="8" y1="2" x2="8" y2="18"></line><line x1="16" y1="6" x2="16" y2="22"></line></svg>
+                                <span>Maps</span>
+                            </div>
+                        </a>
+                    </li>
+
+                    <li class="menu">
+                        <a href="charts_apex.html" aria-expanded="false" class="dropdown-toggle">
+                            <div class="">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-pie-chart"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
+                                <span>Charts</span>
+                            </div>
+                        </a>
+                    </li>
+
+                    <li class="menu">
+                        <a href="#starter-kit" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
+                            <div class="">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-terminal"><polyline points="4 17 10 11 4 5"></polyline><line x1="12" y1="19" x2="20" y2="19"></line></svg>
+                                <span>Starter Kit</span>
+                            </div>
+                            <div>
+                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right"><polyline points="9 18 15 12 9 6"></polyline></svg>
+                            </div>
+                        </a>
+                        <ul class="collapse submenu list-unstyled" id="starter-kit" data-parent="#accordionExample">
+                            <li>
+                                <a href="starter_kit_blank_page.html"> Blank Page </a>
+                            </li>
+                            <li>
+                                <a href="starter_kit_breadcrumbs.html"> Breadcrumbs </a>
+                            </li>
+                            <li>
+                                <a href="starter_kit_boxed.html"> Boxed </a>
+                            </li>
+                            <li>
+                                <a href="starter_kit_alt_menu.html"> Alternate Menu </a>
+                            </li>
+                        </ul>
+                    </li>
+
+                    <li class="menu">
+                        <a href="../../documentation/index.html" aria-expanded="false" class="dropdown-toggle">
+                            <div class="">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-book"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path></svg>
+                                <span>Documentation</span>
+                            </div>
+                        </a>
+                    </li>
+                    
+                </ul>
+                <!-- <div class="shadow-bottom"></div> -->
+                
+            </nav>
+
+        </div>
+        <!--  END SIDEBAR  -->
+        
+        <!--  BEGIN CONTENT AREA  -->
+        <div id="content" class="main-content">
+            <div class="layout-px-spacing">
+
+                <div class="row layout-top-spacing">
+
+                    <div class="col-xl-8 col-lg-12 col-md-12 col-sm-12 col-12 layout-spacing">
+                        <div class="widget widget-chart-one">
+                            <div class="widget-heading">
+                                <h5 class="">Revenue</h5>
+                                <ul class="tabs tab-pills">
+                                    <li><a href="javascript:void(0);" id="tb_1" class="tabmenu">Monthly</a></li>
+                                </ul>
+                            </div>
+
+                            <div class="widget-content">
+                                <div class="tabs tab-content">
+                                    <div id="content_1" class="tabcontent"> 
+                                        <div id="revenueMonthly"></div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="col-xl-4 col-lg-12 col-md-12 col-sm-12 col-12 layout-spacing">
+                        <div class="widget widget-chart-two">
+                            <div class="widget-heading">
+                                <h5 class="">Sales by Category</h5>
+                            </div>
+                            <div class="widget-content">
+                                <div id="chart-2" class=""></div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="col-xl-4 col-lg-6 col-md-6 col-sm-6 col-12 layout-spacing">
+                        <div class="widget-two">
+                            <div class="widget-content">
+                                <div class="w-numeric-value">
+                                    <div class="w-content">
+                                        <span class="w-value">Daily sales</span>
+                                        <span class="w-numeric-title">Go to columns for details.</span>
+                                    </div>
+                                    <div class="w-icon">
+                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-dollar-sign"><line x1="12" y1="1" x2="12" y2="23"></line><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path></svg>
+                                    </div>
+                                </div>
+                                <div class="w-chart">
+                                    <div id="daily-sales"></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="col-xl-4 col-lg-6 col-md-6 col-sm-6 col-12 layout-spacing">
+                        <div class="widget-three">
+                            <div class="widget-heading">
+                                <h5 class="">Summary</h5>
+                            </div>
+                            <div class="widget-content">
+
+                                <div class="order-summary">
+
+                                    <div class="summary-list">
+                                        <div class="w-icon">
+                                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-shopping-bag"><path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"></path><line x1="3" y1="6" x2="21" y2="6"></line><path d="M16 10a4 4 0 0 1-8 0"></path></svg>
+                                        </div>
+                                        <div class="w-summary-details">
+                                            
+                                            <div class="w-summary-info">
+                                                <h6>Income</h6>
+                                                <p class="summary-count">$92,600</p>
+                                            </div>
+
+                                            <div class="w-summary-stats">
+                                                <div class="progress">
+                                                    <div class="progress-bar bg-gradient-secondary" role="progressbar" style="width: 90%" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
+                                                </div>
+                                            </div>
+
+                                        </div>
+
+                                    </div>
+
+                                    <div class="summary-list">
+                                        <div class="w-icon">
+                                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-tag"><path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"></path><line x1="7" y1="7" x2="7" y2="7"></line></svg>
+                                        </div>
+                                        <div class="w-summary-details">
+                                            
+                                            <div class="w-summary-info">
+                                                <h6>Profit</h6>
+                                                <p class="summary-count">$37,515</p>
+                                            </div>
+
+                                            <div class="w-summary-stats">
+                                                <div class="progress">
+                                                    <div class="progress-bar bg-gradient-success" role="progressbar" style="width: 65%" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"></div>
+                                                </div>
+                                            </div>
+
+                                        </div>
+
+                                    </div>
+
+                                    <div class="summary-list">
+                                        <div class="w-icon">
+                                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-credit-card"><rect x="1" y="4" width="22" height="16" rx="2" ry="2"></rect><line x1="1" y1="10" x2="23" y2="10"></line></svg>
+                                        </div>
+                                        <div class="w-summary-details">
+                                            
+                                            <div class="w-summary-info">
+                                                <h6>Expenses</h6>
+                                                <p class="summary-count">$55,085</p>
+                                            </div>
+
+                                            <div class="w-summary-stats">
+                                                <div class="progress">
+                                                    <div class="progress-bar bg-gradient-warning" role="progressbar" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
+                                                </div>
+                                            </div>
+
+                                        </div>
+
+                                    </div>
+                                    
+                                </div>
+
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="col-xl-4 col-lg-12 col-md-6 col-sm-12 col-12 layout-spacing">
+                        <div class="widget-one">
+                            <div class="widget-content">
+                                <div class="w-numeric-value">
+                                    <div class="w-icon">
+                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-shopping-cart"><circle cx="9" cy="21" r="1"></circle><circle cx="20" cy="21" r="1"></circle><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path></svg>
+                                    </div>
+                                    <div class="w-content">
+                                        <span class="w-value">3,192</span>
+                                        <span class="w-numeric-title">Total Orders</span>
+                                    </div>
+                                </div>
+                                <div class="w-chart">
+                                    <div id="total-orders"></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="col-xl-5 col-lg-12 col-md-6 col-sm-12 col-12 layout-spacing">
+                        <div class="widget widget-table-one">
+                            <div class="widget-heading">
+                                <h5 class="">Transactions</h5>
+                            </div>
+
+                            <div class="widget-content">
+                                <div class="transactions-list">
+                                    <div class="t-item">
+                                        <div class="t-company-name">
+                                            <div class="t-icon">
+                                                <div class="icon">
+                                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                                                </div>
+                                            </div>
+                                            <div class="t-name">
+                                                <h4>Electricity Bill</h4>
+                                                <p class="meta-date">4 Aug 1:00PM</p>
+                                            </div>
+
+                                        </div>
+                                        <div class="t-rate rate-dec">
+                                            <p><span>-$16.44</span> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-down"><line x1="12" y1="5" x2="12" y2="19"></line><polyline points="19 12 12 19 5 12"></polyline></svg></p>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <div class="transactions-list">
+                                    <div class="t-item">
+                                        <div class="t-company-name">
+                                            <div class="t-icon">
+                                                <div class="avatar avatar-xl">
+                                                    <span class="avatar-title rounded-circle">SP</span>
+                                                </div>
+                                            </div>
+                                            <div class="t-name">
+                                                <h4>Shaun Park</h4>
+                                                <p class="meta-date">4 Aug 1:00PM</p>
+                                            </div>
+                                        </div>
+                                        <div class="t-rate rate-inc">
+                                            <p><span>+$66.44</span> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-up"><line x1="12" y1="19" x2="12" y2="5"></line><polyline points="5 12 12 5 19 12"></polyline></svg></p>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <div class="transactions-list">
+                                    <div class="t-item">
+                                        <div class="t-company-name">
+                                            <div class="t-icon">
+                                                <div class="avatar avatar-xl">
+                                                    <span class="avatar-title rounded-circle">AD</span>
+                                                </div>
+                                            </div>
+                                            <div class="t-name">
+                                                <h4>Amy Diaz</h4>
+                                                <p class="meta-date">4 Aug 1:00PM</p>
+                                            </div>
+
+                                        </div>
+                                        <div class="t-rate rate-inc">
+                                            <p><span>+$66.44</span> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-up"><line x1="12" y1="19" x2="12" y2="5"></line><polyline points="5 12 12 5 19 12"></polyline></svg></p>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <div class="transactions-list">
+                                    <div class="t-item">
+                                        <div class="t-company-name">
+                                            <div class="t-icon">
+                                                <div class="icon">
+                                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                                                </div>
+                                            </div>
+                                            <div class="t-name">
+                                                <h4>Netflix</h4>
+                                                <p class="meta-date">4 Aug 1:00PM</p>
+                                            </div>
+
+                                        </div>
+                                        <div class="t-rate rate-dec">
+                                            <p><span>-$32.00</span> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-down"><line x1="12" y1="5" x2="12" y2="19"></line><polyline points="19 12 12 19 5 12"></polyline></svg></p>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-12 layout-spacing">
+                        
+                        <div class="widget widget-activity-four">
+
+                            <div class="widget-heading">
+                                <h5 class="">Recent Activities</h5>
+                            </div>
+
+                            <div class="widget-content">
+
+                                <div class="mt-container mx-auto">
+                                    <div class="timeline-line">
+                                        
+                                        <div class="item-timeline timeline-primary">
+                                            <div class="t-dot" data-original-title="" title="">
+                                            </div>
+                                            <div class="t-text">
+                                                <p><span>Updated</span> Server Logs</p>
+                                                <span class="badge badge-danger">Pending</span>
+                                                <p class="t-time">Just Now</p>
+                                            </div>
+                                        </div>
+
+                                        <div class="item-timeline timeline-success">
+                                            <div class="t-dot" data-original-title="" title="">
+                                            </div>
+                                            <div class="t-text">
+                                                <p>Send Mail to <a href="javascript:void(0);">HR</a> and <a href="javascript:void(0);">Admin</a></p>
+                                                <span class="badge badge-success">Completed</span>
+                                                <p class="t-time">2 min ago</p>
+                                            </div>
+                                        </div>
+
+                                        <div class="item-timeline  timeline-danger">
+                                            <div class="t-dot" data-original-title="" title="">
+                                            </div>
+                                            <div class="t-text">
+                                                <p>Backup <span>Files EOD</span></p>
+                                                <span class="badge badge-danger">Pending</span>
+                                                <p class="t-time">14:00</p>
+                                            </div>
+                                        </div>
+
+                                        <div class="item-timeline  timeline-dark">
+                                            <div class="t-dot" data-original-title="" title="">
+                                            </div>
+                                            <div class="t-text">
+                                                <p>Collect documents from <a href="javascript:void(0);">Sara</a></p>
+                                                <span class="badge badge-success">Completed</span>
+                                                <p class="t-time">16:00</p>
+                                            </div>
+                                        </div>
+
+                                        <div class="item-timeline  timeline-warning">
+                                            <div class="t-dot" data-original-title="" title="">
+                                            </div>
+                                            <div class="t-text">
+                                                <p>Conference call with <a href="javascript:void(0);">Marketing Manager</a>.</p>
+                                                <span class="badge badge-primary">In progress</span>
+                                                <p class="t-time">17:00</p>
+                                            </div>
+                                        </div>
+
+                                        <div class="item-timeline  timeline-secondary">
+                                            <div class="t-dot" data-original-title="" title="">
+                                            </div>
+                                            <div class="t-text">
+                                                <p>Rebooted Server</p>
+                                                <span class="badge badge-success">Completed</span>
+                                                <p class="t-time">17:00</p>
+                                            </div>
+                                        </div>
+
+                                        <div class="item-timeline  timeline-warning">
+                                            <div class="t-dot" data-original-title="" title="">
+                                            </div>
+                                            <div class="t-text">
+                                                <p>Send contract details to Freelancer</p>
+                                                <span class="badge badge-danger">Pending</span>
+                                                <p class="t-time">18:00</p>
+                                            </div>
+                                        </div>
+
+                                        <div class="item-timeline  timeline-dark">
+                                            <div class="t-dot" data-original-title="" title="">
+                                            </div>
+                                            <div class="t-text">
+                                                <p>Kelly want to increase the time of the project.</p>
+                                                <span class="badge badge-primary">In Progress</span>
+                                                <p class="t-time">19:00</p>
+                                            </div>
+                                        </div>
+
+                                        <div class="item-timeline  timeline-success">
+                                            <div class="t-dot" data-original-title="" title="">
+                                            </div>
+                                            <div class="t-text">
+                                                <p>Server down for maintanence</p>
+                                                <span class="badge badge-success">Completed</span>
+                                                <p class="t-time">19:00</p>
+                                            </div>
+                                        </div>
+
+                                        <div class="item-timeline  timeline-secondary">
+                                            <div class="t-dot" data-original-title="" title="">
+                                            </div>
+                                            <div class="t-text">
+                                                <p>Malicious link detected</p>
+                                                <span class="badge badge-warning">Block</span>
+                                                <p class="t-time">20:00</p>
+                                            </div>
+                                        </div>
+
+                                        <div class="item-timeline  timeline-warning">
+                                            <div class="t-dot" data-original-title="" title="">
+                                            </div>
+                                            <div class="t-text">
+                                                <p>Rebooted Server</p>
+                                                <span class="badge badge-success">Completed</span>
+                                                <p class="t-time">23:00</p>
+                                            </div>
+                                        </div>
+
+                                    </div>                                    
+                                </div>
+
+                                <div class="tm-action-btn">
+                                    <button class="btn">View All <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg></button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12 layout-spacing">
+                        
+                        <div class="widget widget-account-invoice-one">
+
+                            <div class="widget-heading">
+                                <h5 class="">Account Info</h5>
+                            </div>
+
+                            <div class="widget-content">
+                                <div class="invoice-box">
+                                    
+                                    <div class="acc-total-info">
+                                        <h5>Balance</h5>
+                                        <p class="acc-amount">$470</p>
+                                    </div>
+
+                                    <div class="inv-detail">                                        
+                                        <div class="info-detail-1">
+                                            <p>Monthly Plan</p>
+                                            <p>$ 199.0</p>
+                                        </div>
+                                        <div class="info-detail-2">
+                                            <p>Taxes</p>
+                                            <p>$ 17.82</p>
+                                        </div>
+                                        <div class="info-detail-3 info-sub">
+                                            <div class="info-detail">
+                                                <p>Extras this month</p>
+                                                <p>$ -0.68</p>
+                                            </div>
+                                            <div class="info-detail-sub">
+                                                <p>Netflix Yearly Subscription</p>
+                                                <p>$ 0</p>
+                                            </div>
+                                            <div class="info-detail-sub">
+                                                <p>Others</p>
+                                                <p>$ -0.68</p>
+                                            </div>
+                                        </div>
+                                    </div>
+
+                                    <div class="inv-action">
+                                        <a href="" class="btn btn-dark">Summary</a>
+                                        <a href="" class="btn btn-danger">Transfer</a>
+                                    </div>
+                                </div>
+                            </div>
+
+                        </div>
+                    </div>
+
+                    <div class="col-xl-6 col-lg-12 col-md-12 col-sm-12 col-12 layout-spacing">
+                        <div class="widget widget-table-two">
+
+                            <div class="widget-heading">
+                                <h5 class="">Recent Orders</h5>
+                            </div>
+
+                            <div class="widget-content">
+                                <div class="table-responsive">
+                                    <table class="table">
+                                        <thead>
+                                            <tr>
+                                                <th><div class="th-content">Customer</div></th>
+                                                <th><div class="th-content">Product</div></th>
+                                                <th><div class="th-content">Invoice</div></th>
+                                                <th><div class="th-content th-heading">Price</div></th>
+                                                <th><div class="th-content">Status</div></th>
+                                            </tr>
+                                        </thead>
+                                        <tbody>
+                                            <tr>
+                                                <td><div class="td-content customer-name"><img src="assets/img/90x90.jpg" alt="avatar">Andy King</div></td>
+                                                <td><div class="td-content product-brand">Nike Sport</div></td>
+                                                <td><div class="td-content">#76894</div></td>
+                                                <td><div class="td-content pricing"><span class="">$88.00</span></div></td>
+                                                <td><div class="td-content"><span class="badge outline-badge-primary">Shipped</span></div></td>
+                                            </tr>
+                                            <tr>
+                                                <td><div class="td-content customer-name"><img src="assets/img/90x90.jpg" alt="avatar">Irene Collins</div></td>
+                                                <td><div class="td-content product-brand">Speakers</div></td>
+                                                <td><div class="td-content">#75844</div></td>
+                                                <td><div class="td-content pricing"><span class="">$84.00</span></div></td>
+                                                <td><div class="td-content"><span class="badge outline-badge-success">Paid</span></div></td>
+                                            </tr>
+                                            <tr>
+                                                <td><div class="td-content customer-name"><img src="assets/img/90x90.jpg" alt="avatar">Laurie Fox</div></td>
+                                                <td><div class="td-content product-brand">Camera</div></td>
+                                                <td><div class="td-content">#66894</div></td>
+                                                <td><div class="td-content pricing"><span class="">$126.04</span></div></td>
+                                                <td><div class="td-content"><span class="badge outline-badge-danger">Pending</span></div></td>
+                                            </tr>
+                                            <tr>
+                                                <td><div class="td-content customer-name"><img src="assets/img/90x90.jpg" alt="avatar">Luke Ivory</div></td>
+                                                <td><div class="td-content product-brand">Headphone</div></td>
+                                                <td><div class="td-content">#46894</div></td>
+                                                <td><div class="td-content pricing"><span class="">$56.07</span></div></td>
+                                                <td><div class="td-content"><span class="badge outline-badge-success">Paid</span></div></td>
+                                            </tr>
+                                            <tr>
+                                                <td><div class="td-content customer-name"><img src="assets/img/90x90.jpg" alt="avatar">Ryan Collins</div></td>
+                                                <td><div class="td-content product-brand">Sport</div></td>
+                                                <td><div class="td-content">#89891</div></td>
+                                                <td><div class="td-content pricing"><span class="">$108.09</span></div></td>
+                                                <td><div class="td-content"><span class="badge outline-badge-primary">Shipped</span></div></td>
+                                            </tr>
+                                            <tr>
+                                                <td><div class="td-content customer-name"><img src="assets/img/90x90.jpg" alt="avatar">Nia Hillyer</div></td>
+                                                <td><div class="td-content product-brand">Sunglasses</div></td>
+                                                <td><div class="td-content">#26974</div></td>
+                                                <td><div class="td-content pricing"><span class="">$168.09</span></div></td>
+                                                <td><div class="td-content"><span class="badge outline-badge-primary">Shipped</span></div></td>
+                                            </tr>
+                                            <tr>
+                                                <td><div class="td-content customer-name"><img src="assets/img/90x90.jpg" alt="avatar">Sonia Shaw</div></td>
+                                                <td><div class="td-content product-brand">Watch</div></td>
+                                                <td><div class="td-content">#76844</div></td>
+                                                <td><div class="td-content pricing"><span class="">$110.00</span></div></td>
+                                                <td><div class="td-content"><span class="badge outline-badge-success">Paid</span></div></td>
+                                            </tr>
+                                        </tbody>
+                                    </table>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="col-xl-6 col-lg-12 col-md-12 col-sm-12 col-12 layout-spacing">
+                        <div class="widget widget-table-three">
+
+                            <div class="widget-heading">
+                                <h5 class="">Top Selling Product</h5>
+                            </div>
+
+                            <div class="widget-content">
+                                <div class="table-responsive">
+                                    <table class="table">
+                                        <thead>
+                                            <tr>
+                                                <th><div class="th-content">Product</div></th>
+                                                <th><div class="th-content th-heading">Price</div></th>
+                                                <th><div class="th-content th-heading">Discount</div></th>
+                                                <th><div class="th-content">Sold</div></th>
+                                                <th><div class="th-content">Source</div></th>
+                                            </tr>
+                                        </thead>
+                                        <tbody>
+                                            <tr>
+                                                <td><div class="td-content product-name"><img src="assets/img/90x90.jpg" alt="product">Speakers</div></td>
+                                                <td><div class="td-content"><span class="pricing">$84.00</span></div></td>
+                                                <td><div class="td-content"><span class="discount-pricing">$10.00</span></div></td>
+                                                <td><div class="td-content">240</div></td>
+                                                <td><div class="td-content"><a href="javascript:void(0);" class="">Direct</a></div></td>
+                                            </tr>
+                                            <tr>
+                                                <td><div class="td-content product-name"><img src="assets/img/90x90.jpg" alt="product">Sunglasses</div></td>
+                                                <td><div class="td-content"><span class="pricing">$56.07</span></div></td>
+                                                <td><div class="td-content"><span class="discount-pricing">$5.07</span></div></td>
+                                                <td><div class="td-content">190</div></td>
+                                                <td><div class="td-content"><a href="javascript:void(0);" class="">Google</a></div></td>
+                                            </tr>
+                                            <tr>
+                                                <td><div class="td-content product-name"><img src="assets/img/90x90.jpg" alt="product">Watch</div></td>
+                                                <td><div class="td-content"><span class="pricing">$88.00</span></div></td>
+                                                <td><div class="td-content"><span class="discount-pricing">$20.00</span></div></td>
+                                                <td><div class="td-content">66</div></td>
+                                                <td><div class="td-content"><a href="javascript:void(0);" class="">Ads</a></div></td>
+                                            </tr>
+                                            <tr>
+                                                <td><div class="td-content product-name"><img src="assets/img/90x90.jpg" alt="product">Laptop</div></td>
+                                                <td><div class="td-content"><span class="pricing">$110.00</span></div></td>
+                                                <td><div class="td-content"><span class="discount-pricing">$33.00</span></div></td>
+                                                <td><div class="td-content">35</div></td>
+                                                <td><div class="td-content"><a href="javascript:void(0);" class="">Email</a></div></td>
+                                            </tr>
+                                            <tr>
+                                                <td><div class="td-content product-name"><img src="assets/img/90x90.jpg" alt="product">Camera</div></td>
+                                                <td><div class="td-content"><span class="pricing">$126.04</span></div></td>
+                                                <td><div class="td-content"><span class="discount-pricing">$26.04</span></div></td>
+                                                <td><div class="td-content">30</div></td>
+                                                <td><div class="td-content"><a href="javascript:void(0);" class="">Referral</a></div></td>
+                                            </tr>
+                                            <tr>
+                                                <td><div class="td-content product-name"><img src="assets/img/90x90.jpg" alt="product">Shoes</div></td>
+                                                <td><div class="td-content"><span class="pricing">$108.09</span></div></td>
+                                                <td><div class="td-content"><span class="discount-pricing">$47.09</span></div></td>
+                                                <td><div class="td-content">130</div></td>
+                                                <td><div class="td-content"><a href="javascript:void(0);" class="">Google</a></div></td>
+                                            </tr>
+                                            <tr>
+                                                <td><div class="td-content product-name"><img src="assets/img/90x90.jpg" alt="product">Headphone</div></td>
+                                                <td><div class="td-content"><span class="pricing">$168.09</span></div></td>
+                                                <td><div class="td-content"><span class="discount-pricing">$60.09</span></div></td>
+                                                <td><div class="td-content">170</div></td>
+                                                <td><div class="td-content"><a href="javascript:void(0);" class="">Ads</a></div></td>
+                                            </tr>
+                                        </tbody>
+                                    </table>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                </div>
+
+            </div>
+            <div class="footer-wrapper">
+                <div class="footer-section f-section-1">
+                    <p class="">Copyright © 2020 <a target="_blank" href="https://designreset.com">DesignReset</a>, All rights reserved.</p>
+                </div>
+                <div class="footer-section f-section-2">
+                    <p class="">Coded with <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-heart"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg></p>
+                </div>
+            </div>
+        </div>
+        <!--  END CONTENT AREA  -->
+
+    </div>
+    <!-- END MAIN CONTAINER -->
+
+    <!-- BEGIN GLOBAL MANDATORY SCRIPTS -->
+    <script src="assets/js/libs/jquery-3.1.1.min.js"></script>
+    <script src="bootstrap/js/popper.min.js"></script>
+    <script src="bootstrap/js/bootstrap.min.js"></script>
+    <script src="plugins/perfect-scrollbar/perfect-scrollbar.min.js"></script>
+    <script src="assets/js/app.js"></script>
+    <script>
+        $(document).ready(function() {
+            App.init();
+        });
+    </script>
+    <script src="assets/js/custom.js"></script>
+    <!-- END GLOBAL MANDATORY SCRIPTS -->
+
+    <!-- BEGIN PAGE LEVEL PLUGINS/CUSTOM SCRIPTS -->
+    <script src="plugins/apex/apexcharts.min.js"></script>
+    <script src="assets/js/dashboard/dash_1.js"></script>
+    <!-- BEGIN PAGE LEVEL PLUGINS/CUSTOM SCRIPTS -->
+
+</body>
+</html>
\ No newline at end of file