From d088e7757e8d17b86ff52bfc873da5968d70a087 Mon Sep 17 00:00:00 2001
From: sairaj mote <sairajmote3@gmail.com>
Date: Sat, 5 Sep 2020 02:53:32 +0530
Subject: [PATCH] 0.0.20

---
 css/main.css  |  833 +++-------
 css/main.scss |  248 ++-
 index.html    | 4074 +++++++++++++++++++++++++++++++------------------
 3 files changed, 2904 insertions(+), 2251 deletions(-)

diff --git a/css/main.css b/css/main.css
index c52e0ae..5b2d5d0 100644
--- a/css/main.css
+++ b/css/main.css
@@ -1,29 +1,24 @@
 @import url("https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&family=Roboto:wght@400;500;700&display=swap");
 * {
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
+  box-sizing: border-box;
   padding: 0;
   margin: 0;
-  font-family: 'Barlow', sans-serif;
+  font-family: "Barlow", sans-serif;
 }
 
 :root {
   scroll-behavior: smooth;
 }
 
-html {
-  margin-left: calc(100vw - 100%);
-}
-
 body {
-  --primary-color: #303F9F;
-  --text: 17, 17, 17;
-  --text-light: 85, 85, 85;
-  --foreground: 255, 255, 255;
-  --background: #e8e8e8;
+  --accent-color: #303F9F;
+  --text-color: 17, 17, 17;
+  --text-color-light: 85, 85, 85;
+  --foreground-color: 255, 255, 255;
+  --background-color: #e8e8e8;
   --dark-shade: #dadada;
-  background: var(--foreground);
-  color: rgba(var(--text), 1);
+  background: var(--foreground-color);
+  color: rgba(var(--text-color), 1);
   font-size: 16px;
   margin: 1.5rem;
 }
@@ -31,7 +26,7 @@ body {
 a {
   font-weight: 600;
   text-decoration: none;
-  color: var(--primary-color);
+  color: var(--accent-color);
 }
 
 .dark-text {
@@ -44,42 +39,28 @@ h1, h2, h3, h4, h5 {
 
 button {
   position: relative;
-  display: -webkit-inline-box;
-  display: -ms-inline-flexbox;
   display: inline-flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
+  align-items: center;
+  justify-content: center;
   text-transform: uppercase;
   letter-spacing: 0.08em;
   padding: 0.4rem 0.7rem;
   font-weight: 600;
   cursor: pointer;
   border-radius: 0.2em;
-  color: var(--primary-color);
-  -webkit-transition: -webkit-transform 0.3s, -webkit-clip-path 0.3s;
-  transition: -webkit-transform 0.3s, -webkit-clip-path 0.3s;
-  transition: transform 0.3s, clip-path 0.3s;
-  transition: transform 0.3s, clip-path 0.3s, -webkit-transform 0.3s, -webkit-clip-path 0.3s;
+  color: var(--accent-color);
+  transition: transform 0.3s;
   border: none;
-  -webkit-clip-path: circle(100%);
-          clip-path: circle(100%);
-  background: rgba(var(--text), 0.1);
+  background: rgba(var(--text-color), 0.1);
   -webkit-tap-highlight-color: transparent;
 }
-
 button:focus {
-  outline: thin solid rgba(var(--text-light), 0.4);
+  outline: thin solid rgba(var(--text-color-light), 0.4);
 }
-
 button:disabled {
   cursor: default;
-  background: rgba(var(--text-light), 1);
+  background: rgba(var(--text-color-light), 1);
 }
-
 button:disabled ~ .loader {
   opacity: 0;
 }
@@ -102,10 +83,10 @@ input[type=text]::-ms-reveal {
   height: 0;
 }
 
-input[type="search"]::-webkit-search-decoration,
-input[type="search"]::-webkit-search-cancel-button,
-input[type="search"]::-webkit-search-results-button,
-input[type="search"]::-webkit-search-results-decoration {
+input[type=search]::-webkit-search-decoration,
+input[type=search]::-webkit-search-cancel-button,
+input[type=search]::-webkit-search-results-button,
+input[type=search]::-webkit-search-results-decoration {
   display: none;
 }
 
@@ -115,8 +96,7 @@ input[type=number] {
 
 input:invalid {
   outline: none;
-  -webkit-box-shadow: none;
-          box-shadow: none;
+  box-shadow: none;
 }
 
 ::-moz-focus-inner {
@@ -140,19 +120,15 @@ input:invalid {
 }
 
 .flex {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
 }
 
 .grid {
-  display: -ms-grid;
   display: grid;
 }
 
 .grid-2 {
-  -ms-grid-columns: auto auto;
-      grid-template-columns: auto auto;
+  grid-template-columns: auto auto;
   gap: 1em;
 }
 
@@ -161,7 +137,7 @@ input:invalid {
 }
 
 .light-text {
-  color: rgba(var(--text-light), 1);
+  color: rgba(var(--text-color-light), 1);
 }
 
 .hide {
@@ -178,51 +154,31 @@ input:invalid {
 }
 
 .separator {
-  padding: .1em;
+  padding: 0.1em;
 }
 
 .no-transformations {
-  -webkit-transform: none !important;
-          transform: none !important;
+  transform: none !important;
 }
 
 .loader {
   fill: none;
   stroke-width: 10;
-  stroke: var(--primary-color);
+  stroke: var(--accent-color);
   height: 2rem;
   width: 2rem;
   overflow: visible;
   stroke-dashoffset: 230;
   stroke-dasharray: 230;
   padding: 2px;
-  -ms-grid-column-align: center;
-      justify-self: center;
-}
-
-@-webkit-keyframes rotate {
-  100% {
-    -webkit-transform: rotate(360deg);
-            transform: rotate(360deg);
-  }
+  justify-self: center;
 }
 
 @keyframes rotate {
   100% {
-    -webkit-transform: rotate(360deg);
-            transform: rotate(360deg);
+    transform: rotate(360deg);
   }
 }
-
-@-webkit-keyframes load {
-  50% {
-    stroke-dashoffset: 0;
-  }
-  100% {
-    stroke-dashoffset: -210;
-  }
-}
-
 @keyframes load {
   50% {
     stroke-dashoffset: 0;
@@ -231,30 +187,34 @@ input:invalid {
     stroke-dashoffset: -210;
   }
 }
-
 p {
   line-height: 1.5;
-  font-family: 'Roboto', sans-serif;
-  color: rgba(var(--text), 0.8);
+  font-family: "Roboto", sans-serif;
+  color: rgba(var(--text-color), 0.8);
 }
 
 .action {
   position: relative;
-  display: -webkit-inline-box;
-  display: -ms-inline-flexbox;
   display: inline-flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  background: none;
+}
+.action[disabled] .primary-btn {
+  background: none;
+}
+.action h4 {
+  font-weight: 500;
+  padding: 0.5rem 0.8rem;
+  font-size: 1rem;
+  clip-path: circle(100%);
+  transition: clip-path 0.3s;
+  border-radius: 0.2rem;
 }
-
 .action .btn {
   z-index: 2;
 }
-
 .action .loader {
   position: absolute;
   z-index: 1;
@@ -262,13 +222,11 @@ p {
 }
 
 .clip {
-  -webkit-clip-path: circle(0) !important;
-          clip-path: circle(0) !important;
+  clip-path: circle(0) !important;
 }
 
 .animate-loader {
-  -webkit-animation: load 2.6s infinite, rotate 1s infinite linear;
-          animation: load 2.6s infinite, rotate 1s infinite linear;
+  animation: load 2.6s infinite, rotate 1s infinite linear;
 }
 
 .expand {
@@ -276,101 +234,60 @@ p {
 }
 
 .fade-left {
-  -webkit-animation: fadeleft 0.3s;
-          animation: fadeleft 0.3s;
+  animation: fadeleft 0.3s;
 }
 
 .fade-right {
-  -webkit-animation: faderight 0.3s;
-          animation: faderight 0.3s;
-}
-
-@-webkit-keyframes faderight {
-  from {
-    opacity: 0;
-    -webkit-transform: translateX(-1em);
-            transform: translateX(-1em);
-  }
-  to {
-    opacity: 1;
-    -webkit-transform: none;
-            transform: none;
-  }
+  animation: faderight 0.3s;
 }
 
 @keyframes faderight {
   from {
     opacity: 0;
-    -webkit-transform: translateX(-1em);
-            transform: translateX(-1em);
+    transform: translateX(-1em);
   }
   to {
     opacity: 1;
-    -webkit-transform: none;
-            transform: none;
+    transform: none;
   }
 }
-
-@-webkit-keyframes fadeleft {
-  from {
-    opacity: 0;
-    -webkit-transform: translateX(1em);
-            transform: translateX(1em);
-  }
-  to {
-    opacity: 1;
-    -webkit-transform: none;
-            transform: none;
-  }
-}
-
 @keyframes fadeleft {
   from {
     opacity: 0;
-    -webkit-transform: translateX(1em);
-            transform: translateX(1em);
+    transform: translateX(1em);
   }
   to {
     opacity: 1;
-    -webkit-transform: none;
-            transform: none;
+    transform: none;
   }
 }
-
 #logo {
-  display: -ms-inline-grid;
   display: inline-grid;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -ms-grid-columns: auto 1fr;
-      grid-template-columns: auto 1fr;
+  align-items: center;
+  grid-template-columns: auto 1fr;
   gap: 0.6rem 0.2rem;
   margin-right: 1rem;
 }
-
 #logo h4 {
   letter-spacing: 0.06rem;
   word-spacing: 0.12rem;
   margin-top: 0.2rem;
 }
-
 #logo h5 {
-  font-family: 'Roboto', sans-serif;
+  font-family: "Roboto", sans-serif;
   font-weight: 400;
 }
-
 #logo #main_logo {
   height: 1.4rem;
   width: 1.4rem;
-  fill: rgba(var(--text), 1);
+  fill: rgba(var(--text-color), 1);
   stroke: none;
 }
 
 textarea {
   width: 100%;
   max-width: 100%;
-  background: rgba(var(--text), 0.1);
+  background: rgba(var(--text-color), 0.1);
   border: none;
   border-radius: 0.2rem;
   resize: none;
@@ -380,71 +297,53 @@ textarea {
 }
 
 .input {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
   width: 100%;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
   position: relative;
   padding: 0.8em;
   margin-bottom: 1.5em;
   border-radius: 0.2rem;
-  background: rgba(var(--text), 0.1);
+  background: rgba(var(--text-color), 0.1);
   border: 0.1em solid transparent;
   cursor: text;
 }
-
 .input:last-of-type {
   margin-bottom: 0;
 }
-
 .input:focus-within {
-  border: 0.1em solid var(--primary-color);
+  border: 0.1em solid var(--accent-color);
 }
-
 .input .placeholder {
-  opacity: .7;
+  opacity: 0.7;
   font-weight: 500;
   font-size: 1em;
   position: absolute;
-  -webkit-transition: -webkit-transform 0.3s ease;
-  transition: -webkit-transform 0.3s ease;
   transition: transform 0.3s ease;
-  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
-  -webkit-transform-origin: left;
-          transform-origin: left;
+  transform-origin: left;
   pointer-events: none;
   will-change: contents;
   text-transform: capitalize;
 }
-
 .input input {
-  -webkit-box-flex: 1;
-      -ms-flex: 1;
-          flex: 1;
+  flex: 1;
   font-size: 1rem;
   border: none;
   background: transparent;
   outline: none;
-  color: rgba(var(--text), 1);
+  color: rgba(var(--text-color), 1);
 }
 
 .animate-label input {
-  -webkit-transform: translateY(0.5em);
-          transform: translateY(0.5em);
+  transform: translateY(0.5em);
 }
-
 .animate-label .placeholder {
-  -webkit-transform: translateY(-60%) scale(0.7);
-          transform: translateY(-60%) scale(0.7);
+  transform: translateY(-60%) scale(0.7);
   opacity: 1;
-  color: var(--primary-color);
+  color: var(--accent-color);
 }
 
 .container:empty ~ .empty {
-  display: -ms-grid;
   display: grid;
 }
 
@@ -453,49 +352,35 @@ textarea {
   place-items: center;
   width: 100%;
 }
-
 .empty svg {
-  stroke: rgba(var(--text), 0.8);
+  stroke: rgba(var(--text-color), 0.8);
   height: 12em;
   width: 12em;
 }
 
 .container-header {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: row;
-          flex-direction: row;
+  align-items: center;
+  flex-direction: row;
   width: 100%;
   padding: 1rem 0;
 }
-
 .container-header h2 {
-  -webkit-box-flex: 1;
-      -ms-flex: 1;
-          flex: 1;
+  flex: 1;
   font-weight: 600;
 }
-
 .container-header button {
-  -ms-flex-item-align: center;
-      -ms-grid-row-align: center;
-      align-self: center;
+  align-self: center;
 }
 
 .btn {
-  background: var(--primary-color);
-  color: rgba(var(--foreground), 1);
+  background: var(--accent-color);
+  color: rgba(var(--foreground-color), 1);
   padding: 0.4em 1em;
 }
 
 .back-arrow {
-  stroke: rgba(var(--text), 1);
+  stroke: rgba(var(--text-color), 1);
   stroke-width: 6;
   fill: none;
   height: 2rem;
@@ -506,11 +391,11 @@ textarea {
 .card {
   border-radius: 0.6rem;
   padding: 1.5em;
-  background: rgba(var(--foreground), 1);
+  background: rgba(var(--foreground-color), 1);
 }
 
 .solid-background {
-  background: rgba(var(--foreground), 1) !important;
+  background: rgba(var(--foreground-color), 1) !important;
 }
 
 form {
@@ -518,7 +403,6 @@ form {
 }
 
 .popup-container {
-  display: -ms-grid;
   display: grid;
   position: fixed;
   top: 0;
@@ -528,201 +412,77 @@ form {
   place-items: center;
   background: rgba(0, 0, 0, 0.4);
   z-index: 10;
-  -webkit-transition: opacity 0.3s ease;
   transition: opacity 0.3s ease;
 }
-
 .popup-container .popup {
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
-  -ms-flex-item-align: end;
-      align-self: flex-end;
-  -webkit-box-align: start;
-      -ms-flex-align: start;
-          align-items: flex-start;
-  -ms-flex-wrap: wrap;
-      flex-wrap: wrap;
+  flex-direction: column;
+  align-self: flex-end;
+  align-items: flex-start;
+  flex-wrap: wrap;
   width: 100%;
   border-radius: 0.5rem 0.5rem 0 0;
   padding: 1.5rem;
   position: relative;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  background: rgba(var(--foreground), 1);
-  -webkit-transform: translateY(100%);
-          transform: translateY(100%);
-  -webkit-transition: -webkit-transform 0.3s;
-  transition: -webkit-transform 0.3s;
+  background: rgba(var(--foreground-color), 1);
+  transform: translateY(100%);
   transition: transform 0.3s;
-  transition: transform 0.3s, -webkit-transform 0.3s;
-  -webkit-box-shadow: 0 2rem 2rem rgba(0, 0, 0, 0.24);
-          box-shadow: 0 2rem 2rem rgba(0, 0, 0, 0.24);
+  box-shadow: 0 2rem 2rem rgba(0, 0, 0, 0.24);
   overflow-y: auto;
 }
-
 .popup-container .popup h5 {
   margin: 0.5rem 0;
 }
-
 .popup-container .popup button:first-of-type {
   margin-left: auto;
 }
-
 .popup-container .popup .container-header {
-  display: -ms-grid;
   display: grid;
-  -ms-grid-columns: auto 1fr auto;
-      grid-template-columns: auto 1fr auto;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  grid-template-columns: auto 1fr auto;
+  align-items: center;
   padding: 0;
   gap: 1rem;
   margin-bottom: 1.5rem;
 }
-
 .popup-container .popup .container-header .icon {
   cursor: pointer;
   padding-right: 0.4rem;
   stroke-width: 8;
 }
-
 .popup-container .popup .container-header .btn {
   padding: 0.6em 1.2em;
 }
-
 .popup-container .popup .container-header h3 {
   text-transform: capitalize;
 }
-
 .popup-container .popup p {
   margin-bottom: 1.5rem !important;
 }
 
-#show_message {
-  -webkit-transform: translate(0, -100%);
-          transform: translate(0, -100%);
-  -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
-  transition: opacity 0.3s, -webkit-transform 0.3s;
-  transition: transform 0.3s, opacity 0.3s;
-  transition: transform 0.3s, opacity 0.3s, -webkit-transform 0.3s;
-  -webkit-box-shadow: 0 0.4rem 0.8rem rgba(0, 0, 0, 0.08);
-          box-shadow: 0 0.4rem 0.8rem rgba(0, 0, 0, 0.08);
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: row;
-          flex-direction: row;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  color: rgba(var(--text), 1);
-  position: fixed;
-  right: 0;
-  top: 0;
-  width: calc(100% - 2rem);
-  margin: 1rem;
-  border-radius: 0.5rem;
-  border: solid 1px rgba(var(--text), 0.2);
-  max-width: 100%;
-  z-index: 40;
-  background: rgba(var(--foreground), 1);
-}
-
-#show_message #error_icon {
-  fill: #E53935;
-}
-
-#show_message #done_icon {
-  fill: #00C853;
-}
-
-#show_message .notification-icon {
-  height: 2em;
-  width: 2em;
-  margin: 1em 0 1em 1em;
-  fill: rgba(var(--text), 1);
-}
-
-#show_message div {
-  padding: 1em;
-  -webkit-box-flex: 1;
-      -ms-flex: 1;
-          flex: 1;
-}
-
-#show_message div h5 {
-  opacity: 0.8;
-}
-
-#show_message span {
-  font-weight: 500;
-  -webkit-box-flex: 1;
-      -ms-flex: 1;
-          flex: 1;
-}
-
-#show_message span::first-letter {
-  text-transform: uppercase;
-}
-
-#show_message button {
-  padding: 1rem;
-  margin: 0 1em 0 0;
-  border: none;
-  background: none;
-}
-
-#show_message button svg {
-  height: 1em;
-  width: 1em;
-  stroke: rgba(var(--text), 1);
-  stroke-width: 6;
-}
-
 #confirmation, #prompt {
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
-  padding: 1.5rem;
+  flex-direction: column;
 }
-
 #confirmation p, #prompt p {
   margin: 1rem;
   font-size: 1rem;
   font-weight: 500;
   color: rgba(var(--rgb-bw), 1) !important;
 }
-
 #confirmation h4, #prompt h4 {
   font-weight: 500;
   margin-bottom: 1.5rem;
 }
-
 #confirmation .input, #prompt .input {
   margin-bottom: 1rem;
 }
-
 #confirmation .btns, #prompt .btns {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: right;
-      -ms-flex-pack: right;
-          justify-content: right;
+  justify-content: right;
   width: 100%;
 }
-
 #confirmation .btns button, #prompt .btns button {
   background: none;
 }
-
 #confirmation .btns button:first-of-type, #prompt .btns button:first-of-type {
   margin-right: 0.6em;
 }
@@ -735,65 +495,45 @@ form {
 #sign_in_popup h1 {
   margin-top: 2rem;
 }
-
 #sign_in_popup h4 {
   font-weight: 500;
   margin-bottom: 3rem;
 }
-
 #sign_in_popup button {
   margin: 1rem 0;
 }
-
 #sign_in_popup p {
   margin-top: 1rem;
   font-size: 0.9rem;
   margin-bottom: 0 !important;
 }
-
 #sign_in_popup .input {
-  background: rgba(var(--text), 0.1);
+  background: rgba(var(--text-color), 0.1);
 }
 
 .primary-btn {
-  background: var(--primary-color);
+  background: var(--accent-color);
   padding: 0.8em 1.6em;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
-  color: rgba(var(--foreground), 1);
+  justify-content: center;
+  color: rgba(var(--foreground-color), 1);
 }
 
 #main_header {
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
   padding: 1em 0;
-  -webkit-box-pack: justify;
-      -ms-flex-pack: justify;
-          justify-content: space-between;
+  justify-content: space-between;
 }
-
 #main_header #display_balance {
-  display: -ms-grid;
   display: grid;
-  -ms-grid-columns: 1fr auto;
-      grid-template-columns: 1fr auto;
-      grid-template-areas: 'title title'
 ' . .';
+  grid-template-columns: 1fr auto;
+  grid-template-areas: "title title" " . .";
   gap: 0.3rem 0.5rem;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
   text-align: right;
 }
-
 #main_header #display_balance h5 {
-  -ms-grid-row: 1;
-  -ms-grid-column: 1;
-  -ms-grid-column-span: 2;
   grid-area: title;
 }
-
 #main_header #display_balance .icon {
   height: 1.4rem;
   width: 1.4rem;
@@ -806,7 +546,7 @@ form {
   height: 1.2rem;
   width: 1.2rem;
   fill: none;
-  stroke: rgba(var(--text), 0.8);
+  stroke: rgba(var(--text-color), 0.8);
   stroke-width: 6;
   overflow: visible;
   stroke-linecap: round;
@@ -814,30 +554,20 @@ form {
 }
 
 #navbar {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: row;
-          flex-direction: row;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-pack: space-evenly;
-      -ms-flex-pack: space-evenly;
-          justify-content: space-evenly;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-evenly;
   position: fixed;
   left: 0;
   right: 0;
   bottom: 0;
   top: auto;
-  border-top: solid 1px rgba(var(--text), 0.2);
+  border-top: solid 1px rgba(var(--text-color), 0.2);
   border-right: none;
   z-index: 3;
-  background: rgba(var(--foreground), 1);
+  background: rgba(var(--foreground-color), 1);
 }
-
 #navbar .navbar-item {
   position: relative;
   text-align: center;
@@ -845,25 +575,22 @@ form {
   padding: 0.3em;
   margin: 0.3em;
   border-radius: 0.4em;
-  color: rgba(var(--text), 0.8);
+  color: rgba(var(--text-color), 0.8);
   font-size: 0.9em;
   text-transform: uppercase;
   width: 100%;
   letter-spacing: 0.08em;
 }
-
 #navbar .navbar-item h5 {
   font-size: 0.6em;
   margin-top: 0.4em;
   font-weight: 700;
 }
-
 #navbar .active {
-  color: var(--primary-color);
+  color: var(--accent-color);
 }
-
 #navbar .active .icon {
-  stroke: var(--primary-color);
+  stroke: var(--accent-color);
 }
 
 .banking {
@@ -876,83 +603,65 @@ form {
   font-weight: 700;
   font-size: 3rem;
 }
-
 #home_page p {
   margin-bottom: 3rem;
 }
-
 #home_page h2 {
   margin-bottom: 1rem;
 }
 
 .options-tab {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
   margin-top: 1rem;
   margin-bottom: 1rem;
-  -ms-flex-wrap: wrap;
-      flex-wrap: wrap;
+  flex-wrap: wrap;
 }
-
 .options-tab .option {
-  display: -webkit-inline-box;
-  display: -ms-inline-flexbox;
   display: inline-flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
+  flex-direction: column;
   border-radius: 0.4rem;
   padding: 1.5rem;
   margin-right: 1rem;
   margin-bottom: 1rem;
   width: 9rem;
-  border: solid 1px rgba(var(--text), 0.2);
+  border: solid 1px rgba(var(--text-color), 0.2);
   text-transform: capitalize;
   cursor: pointer;
 }
-
 .options-tab .option .icon {
   height: 2.8rem;
   width: 2.8rem;
   padding: 0.8rem;
   border-radius: 2rem;
   margin-bottom: 1rem;
-  stroke: rgba(var(--text), 0.4);
+  stroke: rgba(var(--text-color), 0.4);
 }
-
 .options-tab .option h4 {
   font-weight: 400;
 }
-
 .options-tab .option:nth-of-type(1) .icon {
   background: #ffe5ea;
   stroke: #af0f2c;
 }
-
 .options-tab .option:nth-of-type(2) .icon {
   background: #fff9d5;
   stroke: #e69620;
 }
-
 .options-tab .option:nth-of-type(3) .icon {
   background: #e5ffe3;
   stroke: #189b0f;
 }
-
 .options-tab .option:nth-of-type(4) .icon {
   background: #e4fbff;
   stroke: #0b8ea5;
 }
-
 .options-tab .option:nth-of-type(5) .icon {
   background: #efe5ff;
   stroke: #10359b;
 }
 
 .notification-dot::after {
-  content: '';
+  content: "";
   position: absolute;
   z-index: 1;
   top: 0;
@@ -961,20 +670,15 @@ form {
   width: 0.6em;
   background-color: #E53935;
   border-radius: 0.4em;
-  -webkit-transition: -webkit-transform 0.3s;
-  transition: -webkit-transform 0.3s;
   transition: transform 0.3s;
-  transition: transform 0.3s, -webkit-transform 0.3s;
 }
 
 .shrink.notification-dot::after {
-  -webkit-transform: scale(0);
-          transform: scale(0);
+  transform: scale(0);
 }
 
 #deposit .container-header, #withdraw .container-header {
-  background: -webkit-gradient(linear, left top, left bottom, color-stop(90%, rgba(var(--foreground), 1)), to(transparent));
-  background: linear-gradient(rgba(var(--foreground), 1) 90%, transparent);
+  background: linear-gradient(rgba(var(--foreground-color), 1) 90%, transparent);
 }
 
 .secondary-btn {
@@ -982,69 +686,48 @@ form {
 }
 
 .request {
-  display: -webkit-inline-box;
-  display: -ms-inline-flexbox;
   display: inline-flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
+  flex-direction: column;
   padding: 1.5em;
   border-radius: 0.4em;
-  border: solid 1px rgba(var(--text), 0.2);
+  border: solid 1px rgba(var(--text-color), 0.2);
 }
-
 .request h5 {
-  color: rgba(var(--text-light), 1);
+  color: rgba(var(--text-color-light), 1);
   margin-bottom: 0.4rem;
   text-transform: capitalize;
 }
-
 .request h3, .request h4 {
   margin-bottom: 1.5rem;
-  font-family: 'Roboto', sans-serif;
+  font-family: "Roboto", sans-serif;
   font-weight: 500;
 }
-
 .request h4:last-of-type {
   margin-bottom: 0;
 }
-
 .request .action {
-  -ms-flex-item-align: end;
-      align-self: flex-end;
+  align-self: flex-end;
 }
-
 .request .amount {
   font-size: 1.4em;
 }
-
 .request button {
   width: auto;
-  -ms-flex-item-align: end;
-      align-self: flex-end;
+  align-self: flex-end;
   margin-top: 1.5rem;
   margin-bottom: 0;
 }
-
 .request .copy-row {
   margin-bottom: 1.5rem;
 }
-
 .request .flex {
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-pack: end;
-      -ms-flex-pack: end;
-          justify-content: flex-end;
+  align-items: center;
+  justify-content: flex-end;
   margin-top: 1.5rem;
 }
-
 .request .flex h5 {
   margin: 0;
 }
-
 .request .flex button {
   margin: 0;
 }
@@ -1052,9 +735,8 @@ form {
 .deposited {
   color: #007732;
 }
-
 .deposited::before {
-  content: '+ ';
+  content: "+ ";
 }
 
 .decline-request {
@@ -1064,59 +746,37 @@ form {
 .withdrawn {
   color: #d43125;
 }
-
 .withdrawn::before {
-  content: '- ';
+  content: "- ";
 }
 
 .container {
-  display: -ms-grid;
   display: grid;
   gap: 1em;
-  -ms-grid-columns: 1fr;
-      grid-template-columns: 1fr;
+  grid-template-columns: 1fr;
 }
 
 .page {
   padding: 2rem 0;
   padding-bottom: 4rem;
 }
-
 .page .container-header {
-  display: -ms-grid;
   display: grid;
-  -ms-grid-columns: 1fr auto;
-      grid-template-columns: 1fr auto;
-      grid-template-areas: '. .'
 'search search';
+  grid-template-columns: 1fr auto;
+  grid-template-areas: ". ." "search search";
   gap: 1rem;
-  position: -webkit-sticky;
   position: sticky;
   top: 0;
-  background: rgba(var(--foreground), 1);
+  background: rgba(var(--foreground-color), 1);
   will-change: auto;
   z-index: 2;
 }
-
 .page .container-header h2 {
   font-weight: 600;
 }
-
-.page .container-header .action {
-  height: 100%;
-}
-
-.page .container-header .action button {
-  height: 100%;
-  padding: 0.8em 1.6em;
-}
-
 .page .container-header .search {
-  -ms-grid-row: 2;
-  -ms-grid-column: 1;
-  -ms-grid-column-span: 2;
   grid-area: search;
 }
-
 .page .container-header .search input {
   padding: 1em;
   border: none;
@@ -1124,62 +784,37 @@ form {
   background: var(--dark-shade);
   font-size: 1rem;
   font-weight: 500;
-  color: rgba(var(--text), 1);
+  color: rgba(var(--text-color), 1);
   border-radius: 0.2em;
 }
-
 .page .container-header .search input:focus {
   outline: none;
-  background: rgba(var(--text-light), 0.2);
+  background: rgba(var(--text-color-light), 0.2);
 }
 
 .copy-row {
-  display: -ms-grid;
   display: grid;
-  -ms-grid-columns: 1fr auto;
-      grid-template-columns: 1fr auto;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  grid-template-columns: 1fr auto;
+  align-items: center;
   gap: 0.5rem;
 }
-
 .copy-row h4 {
   margin-bottom: 0;
 }
-
 .copy-row .icon {
   cursor: pointer;
   padding: 0.4rem;
   height: 1.8rem;
   width: 1.8rem;
 }
-
 .copy-row .copy {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
-#textCopied {
-  padding: 0.6rem 1.2rem;
-  border-radius: 2rem;
-  background: rgba(var(--text), 0.1);
-  color: rgba(var(--text), 1);
-  position: fixed;
-  bottom: 0;
-  pointer-events: none;
-  margin: 2rem 0;
-  left: 50%;
-  -webkit-transform: translateX(-50%);
-          transform: translateX(-50%);
-  -webkit-transition: 0.3s opacity ease;
-  transition: 0.3s opacity ease;
-  z-index: 20;
-}
-
 .time {
-  font-family: 'Roboto', sans-serif;
+  font-family: "Roboto", sans-serif;
   margin-bottom: 1.5rem !important;
   font-weight: 400;
 }
@@ -1187,61 +822,44 @@ form {
 #report_popup h4 {
   font-weight: 400;
 }
-
 #report_popup textarea {
   margin-top: 1rem;
 }
 
 #profile_page {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
+  flex-direction: column;
 }
-
 #profile_page button {
-  -ms-flex-item-align: start;
-      align-self: flex-start;
+  align-self: flex-start;
 }
 
 .complaint {
-  display: -ms-grid;
   display: grid;
   gap: 1.5rem 0;
 }
-
 .complaint .complaint-actions {
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
   margin: 1.5rem 0 0 0;
 }
-
 .complaint .processed {
   color: #007732;
 }
-
 .complaint .unprocessed {
   color: #d43125;
 }
-
 .complaint .processed, .complaint .unprocessed {
   margin-bottom: 1.5rem;
 }
-
 .complaint button .icon {
   padding: 0.2rem;
   margin-right: 0.5rem;
-  stroke: var(--primary-color);
+  stroke: var(--accent-color);
   stroke-width: 8;
 }
 
 .complaints-container {
   padding-top: 1.5rem;
-  display: -ms-grid;
   display: grid;
   gap: 1.5rem;
 }
@@ -1251,37 +869,23 @@ form {
 }
 
 .complaint-placeholder {
-  -webkit-animation: pulse infinite 0.6s alternate;
-          animation: pulse infinite 0.6s alternate;
+  animation: pulse infinite 0.6s alternate;
 }
-
 .complaint-placeholder h4, .complaint-placeholder h5 {
   border-radius: 0.2rem;
 }
-
 .complaint-placeholder h5 {
-  background: rgba(var(--text), 0.1);
+  background: rgba(var(--text-color), 0.1);
   padding: 0.5rem 0.6rem;
 }
-
 .complaint-placeholder h4 {
-  background: rgba(var(--text), 0.2);
+  background: rgba(var(--text-color), 0.2);
   padding: 0.8rem 0.8rem;
 }
-
 .complaint-placeholder .demo-btn {
   padding: 0.8rem 3rem;
 }
 
-@-webkit-keyframes pulse {
-  from {
-    opacity: 0.4;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
 @keyframes pulse {
   from {
     opacity: 0.4;
@@ -1290,63 +894,44 @@ form {
     opacity: 1;
   }
 }
-
 @media only screen and (max-width: 640px) {
   sm-select {
     width: 100%;
   }
 }
-
 @media only screen and (min-width: 640px) {
   body {
     padding: 1rem 6vw;
     margin-left: 6rem;
   }
+
   .popup-container .popup {
-    -webkit-transform: translateY(0) scale(0.96);
-            transform: translateY(0) scale(0.96);
+    transform: translateY(0) scale(0.96);
     width: 24rem;
-    -ms-flex-item-align: center;
-        -ms-grid-row-align: center;
-        align-self: center;
+    align-self: center;
     border-radius: 0.2rem;
     height: auto;
   }
-  #show_message {
-    -webkit-transform: translate(100%, 0);
-            transform: translate(100%, 0);
-    margin: 1rem;
-    max-width: 60vw;
-    width: -webkit-max-content;
-    width: -moz-max-content;
-    width: max-content;
-    border-radius: 0.2rem;
-  }
+
   #confirmation {
     width: 24rem;
   }
+
   .container {
-    -ms-grid-columns: (1fr)[2];
-        grid-template-columns: repeat(2, 1fr);
+    grid-template-columns: repeat(2, 1fr);
   }
+
   #navbar {
-    -webkit-box-pack: center;
-        -ms-flex-pack: center;
-            justify-content: center;
-    -webkit-box-orient: vertical;
-    -webkit-box-direction: normal;
-        -ms-flex-direction: column;
-            flex-direction: column;
-    -webkit-box-align: stretch;
-        -ms-flex-align: stretch;
-            align-items: stretch;
+    justify-content: center;
+    flex-direction: column;
+    align-items: stretch;
     left: 0;
     bottom: 0;
     top: 0;
     right: auto;
     width: 6rem;
     border-top: none;
-    border-right: solid 1px rgba(var(--text), 0.2);
+    border-right: solid 1px rgba(var(--text-color), 0.2);
   }
   #navbar .navbar-item {
     width: auto;
@@ -1361,68 +946,55 @@ form {
     font-size: 0.8em;
   }
   #navbar .navbar-item:hover .icon {
-    stroke: rgba(var(--text), 1);
+    stroke: rgba(var(--text-color), 1);
   }
   #navbar .navbar-item:hover h5 {
-    color: rgba(var(--text), 1);
+    color: rgba(var(--text-color), 1);
   }
   #navbar .navbar-item.active:hover .icon {
-    stroke: var(--primary-color);
+    stroke: var(--accent-color);
   }
   #navbar .navbar-item.active:hover h5 {
-    color: var(--primary-color);
+    color: var(--accent-color);
   }
+
   .page {
     padding-bottom: 2em;
   }
+
   #sign_in_popup {
     width: 24rem;
   }
 }
-
 #profile_page .copy-row {
-  display: -webkit-inline-box;
-  display: -ms-inline-flexbox;
   display: inline-flex;
 }
 
 #main_loader {
-  -webkit-box-shadow: none;
-          box-shadow: none;
+  box-shadow: none;
   background: none;
   text-align: center;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
+  align-items: center;
+  flex-direction: column;
 }
-
 #main_loader button {
   margin-left: 0;
   margin-top: 1.5rem;
 }
-
 #main_loader svg {
   height: 2rem;
   width: 2rem;
-  stroke: var(--primary-color);
+  stroke: var(--accent-color);
   stroke-width: 6;
   fill: none;
   overflow: visible;
   stroke-linecap: round;
   stroke-dashoffset: 210;
   stroke-dasharray: 210;
-  -ms-grid-column-align: center;
-      justify-self: center;
-  -ms-flex-item-align: center;
-      -ms-grid-row-align: center;
-      align-self: center;
+  justify-self: center;
+  align-self: center;
   margin-bottom: 2rem;
 }
-
 #main_loader h3 {
   width: 100%;
   text-transform: uppercase;
@@ -1430,108 +1002,95 @@ form {
   word-spacing: 0.16em;
 }
 
+#activity_page sm-tab-header {
+  position: sticky;
+  top: 0;
+  margin-bottom: 1rem;
+}
+
 @media only screen and (min-width: 800px) {
   .container {
-    -ms-grid-columns: (1fr)[3];
-        grid-template-columns: repeat(3, 1fr);
+    grid-template-columns: repeat(3, 1fr);
   }
+
   .complaint {
     gap: 0 1.5rem;
-    -ms-grid-columns: 1fr 1fr;
-        grid-template-columns: 1fr 1fr;
-        grid-template-areas: '. . ' 'header header';
+    grid-template-columns: 1fr 1fr;
+    grid-template-areas: ". . " "header header";
   }
   .complaint .complaint-actions {
-    -ms-grid-row: 2;
-    -ms-grid-column: 1;
-    -ms-grid-column-span: 2;
     grid-area: header;
   }
   .complaint .left {
-    border-right: 1px solid rgba(var(--text), 0.2);
+    border-right: 1px solid rgba(var(--text-color), 0.2);
   }
   .complaint .left {
     padding-right: 1.5rem;
   }
   .complaint .right {
-    display: -webkit-box;
-    display: -ms-flexbox;
     display: flex;
-    -webkit-box-pack: center;
-        -ms-flex-pack: center;
-            justify-content: center;
-    -webkit-box-orient: vertical;
-    -webkit-box-direction: normal;
-        -ms-flex-direction: column;
-            flex-direction: column;
+    justify-content: center;
+    flex-direction: column;
   }
 }
-
 @media only screen and (min-width: 1280px) {
   body {
     padding: 1rem 12vw;
   }
+
   .container {
-    -ms-grid-columns: (1fr)[3];
-        grid-template-columns: repeat(3, 1fr);
+    grid-template-columns: repeat(3, 1fr);
   }
 }
-
 @media only screen and (min-width: 1920px) {
   body {
     font-size: 24px;
     padding: 2rem 20vw;
   }
+
   .container {
-    -ms-grid-columns: (1fr)[4];
-        grid-template-columns: repeat(4, 1fr);
+    grid-template-columns: repeat(4, 1fr);
   }
 }
-
 @media only screen and (min-width: 2048px) {
   body {
     font-size: 24px;
     padding: 2rem 30vw;
   }
+
   .container {
-    -ms-grid-columns: (1fr)[4];
-        grid-template-columns: repeat(4, 1fr);
+    grid-template-columns: repeat(4, 1fr);
   }
 }
-
 @media only screen and (max-width: 320px) {
   body {
     font-size: 14px;
   }
 }
-
 @media (prefers-color-scheme: dark) {
   :root {
-    --text: 238, 238, 238;
-    --text-light: 170, 170, 170;
-    --foreground: 26, 26, 26;
-    --background: #111;
+    --text-color: 238, 238, 238;
+    --text-color-light: 170, 170, 170;
+    --foreground-color: 26, 26, 26;
+    --background-color: #111;
     --dark-shade: #1a1a1a;
   }
 }
-
 @media (prefers-color-scheme: light) {
   :root {
-    --text: 17, 17, 17;
-    --text-light: 85, 85, 85;
-    --foreground: 255, 255, 255;
-    --background: #e8e8e8;
+    --text-color: 17, 17, 17;
+    --text-color-light: 85, 85, 85;
+    --foreground-color: 255, 255, 255;
+    --background-color: #e8e8e8;
     --dark-shade: #dadada;
   }
 }
-
 @media (prefers-color-scheme: no-preference) {
   :root {
-    --text: 17, 17, 17;
-    --text-light: 85, 85, 85;
-    --foreground: 255, 255, 255;
-    --background: #e8e8e8;
+    --text-color: 17, 17, 17;
+    --text-color-light: 85, 85, 85;
+    --foreground-color: 255, 255, 255;
+    --background-color: #e8e8e8;
     --dark-shade: #dadada;
   }
-}
-/*# sourceMappingURL=main.css.map */
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/css/main.scss b/css/main.scss
index f3ebc78..40f216c 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -8,25 +8,22 @@
 :root{
     scroll-behavior: smooth;
 }
-html{
-    margin-left: calc(100vw - 100%);
-}
 body{
-    --primary-color: #303F9F;
-    --text: 17, 17, 17;
-    --text-light: 85, 85, 85;
-    --foreground: 255, 255, 255;
-    --background: #e8e8e8;
+    --accent-color: #303F9F;
+    --text-color: 17, 17, 17;
+    --text-color-light: 85, 85, 85;
+    --foreground-color: 255, 255, 255;
+    --background-color: #e8e8e8;
     --dark-shade: #dadada;
-    background: var(--foreground);
-    color: rgba(var(--text), 1);
+    background: var(--foreground-color);
+    color: rgba(var(--text-color), 1);
     font-size: 16px;
     margin: 1.5rem;
 }
 a{
     font-weight: 600;
     text-decoration: none;
-    color: var(--primary-color);
+    color: var(--accent-color);
 }
 .dark-text{
     color: #111;
@@ -45,18 +42,17 @@ button{
     font-weight: 600;
     cursor: pointer;
     border-radius: 0.2em;
-    color: var(--primary-color);
-    transition: transform 0.3s, clip-path 0.3s;
+    color: var(--accent-color);
+    transition: transform 0.3s;
     border: none;
-    clip-path: circle(100%);
-    background: rgba(var(--text), 0.1);
+    background: rgba(var(--text-color), 0.1);
     -webkit-tap-highlight-color: transparent;
     &:focus{
-        outline: thin solid rgba(var(--text-light), .4);
+        outline: thin solid rgba(var(--text-color-light), .4);
     }
     &:disabled{
         cursor: default;
-        background: rgba(var(--text-light), 1);
+        background: rgba(var(--text-color-light), 1);
     }
     &:disabled ~ .loader{
         opacity: 0;
@@ -109,7 +105,7 @@ input:invalid{
     margin-bottom: 0.4rem;
 }
 .light-text{
-    color: rgba(var(--text-light), 1);
+    color: rgba(var(--text-color-light), 1);
 }
 .hide{
     opacity: 0;
@@ -130,7 +126,7 @@ input:invalid{
 .loader{
     fill: none;
     stroke-width: 10;
-    stroke: var(--primary-color);
+    stroke: var(--accent-color);
     height: 2rem;
     width: 2rem;
     overflow: visible;
@@ -155,13 +151,28 @@ input:invalid{
 p{
     line-height: 1.5;
     font-family: 'Roboto', sans-serif;
-    color: rgba(var(--text), 0.8);
+    color: rgba(var(--text-color), 0.8);
 }
 .action{
     position: relative;
     display: inline-flex;
     align-items: center;
     justify-content: center;
+    padding: 0;
+    background: none;
+    &[disabled]{
+        .primary-btn{
+            background: none;
+        }
+    }
+    h4{
+        font-weight: 500;
+        padding: 0.5rem 0.8rem;
+        font-size: 1rem;
+        clip-path: circle(100%);
+        transition: clip-path 0.3s;
+        border-radius: 0.2rem;
+    }
     .btn{
         z-index: 2;
     }
@@ -224,14 +235,14 @@ p{
     #main_logo{
         height: 1.4rem;
         width: 1.4rem;
-        fill: rgba(var(--text), 1);
+        fill: rgba(var(--text-color), 1);
         stroke: none;
     }
 }
 textarea{
     width: 100%;
     max-width: 100%;
-    background: rgba(var(--text), 0.1);
+    background: rgba(var(--text-color), 0.1);
     border: none;
     border-radius: 0.2rem;
     resize: none;
@@ -247,14 +258,14 @@ textarea{
     padding: 0.8em;
     margin-bottom: 1.5em;
     border-radius: 0.2rem;
-    background: rgba(var(--text), 0.1);
+    background: rgba(var(--text-color), 0.1);
     border: 0.1em solid transparent;
     cursor: text;
     &:last-of-type{
         margin-bottom: 0;
     }
     &:focus-within{
-        border: 0.1em solid var(--primary-color);
+        border: 0.1em solid var(--accent-color);
     }
     .placeholder{
         opacity: .7;
@@ -273,7 +284,7 @@ textarea{
         border: none;
         background: transparent;
         outline: none;
-        color: rgba(var(--text), 1);
+        color: rgba(var(--text-color), 1);
     }
 }
 .animate-label{
@@ -283,7 +294,7 @@ textarea{
     .placeholder{
         transform: translateY(-60%)  scale(0.7);
         opacity: 1;
-        color: var(--primary-color);
+        color: var(--accent-color);
     }
 }
 .container:empty ~ .empty{
@@ -294,7 +305,7 @@ textarea{
     place-items: center;
     width: 100%;
     svg{
-        stroke: rgba(var(--text), 0.8);
+        stroke: rgba(var(--text-color), 0.8);
         height: 12em;
         width: 12em;
     }
@@ -314,12 +325,12 @@ textarea{
     }
 }
 .btn{
-    background: var(--primary-color);
-    color: rgba(var(--foreground), 1);
+    background: var(--accent-color);
+    color: rgba(var(--foreground-color), 1);
     padding: 0.4em 1em;
 }
 .back-arrow{
-    stroke: rgba(var(--text), 1);
+    stroke: rgba(var(--text-color), 1);
     stroke-width: 6;
     fill: none;
     height: 2rem;
@@ -329,10 +340,10 @@ textarea{
 .card{
     border-radius: 0.6rem;
     padding: 1.5em;
-    background: rgba(var(--foreground), 1);
+    background: rgba(var(--foreground-color), 1);
 }
 .solid-background{
-    background: rgba(var(--foreground), 1) !important;
+    background: rgba(var(--foreground-color), 1) !important;
 }
 form{
     width: 100%;
@@ -358,7 +369,7 @@ form{
         padding: 1.5rem;
         position: relative;
         display: flex;
-        background: rgba(var(--foreground), 1);
+        background: rgba(var(--foreground-color), 1);
         transform: translateY(100%);
         transition: transform 0.3s;
         box-shadow: 0 2rem 2rem rgba($color: #000000, $alpha: 0.24);
@@ -393,66 +404,8 @@ form{
         }
     }
 }
-#show_message{
-    transform: translate(0, -100%);
-    transition: transform 0.3s, opacity 0.3s;
-    box-shadow: 0 0.4rem 0.8rem rgba($color: #000000, $alpha: 0.08);
-    align-items: center;
-    flex-direction: row;
-    display: flex;
-    color: rgba(var(--text), 1);
-    position: fixed;
-    right: 0;
-    top: 0;
-    width: calc(100% - 2rem);
-    margin: 1rem;
-    border-radius: 0.5rem;
-    border: solid 1px rgba(var(--text), 0.2);
-    max-width: 100%;
-    z-index: 40;
-    background: rgba(var(--foreground), 1);
-    #error_icon{
-        fill: #E53935;
-    }
-    #done_icon{
-        fill: #00C853;
-    }
-    .notification-icon{
-        height: 2em;
-        width: 2em;
-        margin: 1em 0 1em 1em;
-        fill: rgba(var(--text), 1);
-    }
-    div{
-        padding: 1em;
-        flex: 1;
-        h5{
-            opacity: 0.8;
-        }
-    }
-    span{
-        font-weight: 500;
-        flex: 1;
-    }
-    span::first-letter{
-        text-transform: uppercase;
-    }
-    button{
-        padding: 1rem;
-        margin: 0 1em 0 0;
-        border: none;
-        background: none;
-        svg{
-            height: 1em;
-            width: 1em;
-            stroke: rgba(var(--text), 1);
-            stroke-width: 6;
-        }
-    }
-}
 #confirmation,#prompt{
     flex-direction: column;
-    padding: 1.5rem;
     p{
         margin: 1rem;
         font-size: 1rem;
@@ -499,14 +452,14 @@ form{
         margin-bottom: 0 !important;
     }
     .input{
-        background: rgba(var(--text), 0.1);
+        background: rgba(var(--text-color), 0.1);
     }
 }
 .primary-btn{
-    background: var(--primary-color);
+    background: var(--accent-color);
     padding: 0.8em 1.6em;
     justify-content: center;
-    color: rgba(var(--foreground), 1);
+    color: rgba(var(--foreground-color), 1);
 }
 #main_header{
     align-items: center;
@@ -536,7 +489,7 @@ form{
     height: 1.2rem;
     width: 1.2rem;
     fill: none;
-    stroke: rgba(var(--text), 0.8);
+    stroke: rgba(var(--text-color), 0.8);
     stroke-width: 6;
     overflow: visible;
     stroke-linecap: round;
@@ -552,10 +505,10 @@ form{
     right: 0;
     bottom: 0;
     top: auto;
-    border-top: solid 1px rgba(var(--text), 0.2);
+    border-top: solid 1px rgba(var(--text-color), 0.2);
     border-right: none;
     z-index: 3;
-    background: rgba(var(--foreground), 1);
+    background: rgba(var(--foreground-color), 1);
     .navbar-item{
         position: relative;
         text-align: center;
@@ -563,7 +516,7 @@ form{
         padding: 0.3em;
         margin: 0.3em;
         border-radius: 0.4em;
-        color: rgba(var(--text), 0.8);
+        color: rgba(var(--text-color), 0.8);
         font-size: 0.9em;
         text-transform: uppercase;
         width: 100%;
@@ -575,9 +528,9 @@ form{
         }
     }
     .active{
-        color: var(--primary-color);
+        color: var(--accent-color);
         .icon{
-            stroke: var(--primary-color);
+            stroke: var(--accent-color);
         }
     }
 }
@@ -611,7 +564,7 @@ form{
         margin-right: 1rem;
         margin-bottom: 1rem;
         width: 9rem;
-        border: solid 1px rgba(var(--text), 0.2);
+        border: solid 1px rgba(var(--text-color), 0.2);
         text-transform: capitalize;
         cursor: pointer;
         .icon{
@@ -620,7 +573,7 @@ form{
             padding: 0.8rem;
             border-radius: 2rem;
             margin-bottom: 1rem;
-            stroke: rgba(var(--text), 0.4);
+            stroke: rgba(var(--text-color), 0.4);
         }
         h4{
             font-weight: 400;
@@ -674,7 +627,7 @@ form{
 }
 #deposit, #withdraw{
     .container-header{
-        background: linear-gradient(rgba(var(--foreground), 1) 90%, transparent);
+        background: linear-gradient(rgba(var(--foreground-color), 1) 90%, transparent);
     }
 }
 .secondary-btn{
@@ -685,9 +638,9 @@ form{
     flex-direction: column;
     padding: 1.5em;
     border-radius: 0.4em;
-    border: solid 1px rgba(var(--text), 0.2);
+    border: solid 1px rgba(var(--text-color), 0.2);
     h5{
-        color: rgba(var(--text-light), 1);
+        color: rgba(var(--text-color-light), 1);
         margin-bottom: 0.4rem;
         text-transform: capitalize;
     }
@@ -757,19 +710,12 @@ form{
         gap: 1rem;
         position: sticky;
         top: 0;
-        background: rgba(var(--foreground), 1);
+        background: rgba(var(--foreground-color), 1);
         will-change: auto;
         z-index: 2;
         h2{
             font-weight: 600;
         }
-        .action{
-            height: 100%;
-            button{
-                height: 100%;
-                padding: 0.8em 1.6em;
-            }
-        }
         .search{
             grid-area: search;
             input{
@@ -779,11 +725,11 @@ form{
                 background: var(--dark-shade);
                 font-size: 1rem;
                 font-weight: 500;
-                color: rgba(var(--text), 1);
+                color: rgba(var(--text-color), 1);
                 border-radius: 0.2em;
                 &:focus{
                     outline: none;
-                    background: rgba(var(--text-light), 0.2);
+                    background: rgba(var(--text-color-light), 0.2);
                 }
             }
         }   
@@ -809,20 +755,6 @@ form{
         text-overflow: ellipsis;
     }
 }
-#textCopied{
-    padding: 0.6rem 1.2rem;
-    border-radius: 2rem;
-    background: rgba(var(--text), 0.1);
-    color: rgba(var(--text), 1);
-    position: fixed;
-    bottom: 0;
-    pointer-events: none;
-    margin: 2rem 0;
-    left: 50%;
-    transform: translateX(-50%);
-    transition: 0.3s opacity ease;
-    z-index: 20;
-}
 .time{
     font-family: 'Roboto', sans-serif;
     margin-bottom: 1.5rem !important;
@@ -863,7 +795,7 @@ form{
         .icon{
             padding: 0.2rem;
             margin-right: 0.5rem;
-            stroke: var(--primary-color);
+            stroke: var(--accent-color);
             stroke-width: 8;
         }
     }
@@ -884,11 +816,11 @@ form{
         border-radius: 0.2rem;
     }
     h5{
-        background: rgba(var(--text), 0.1);
+        background: rgba(var(--text-color), 0.1);
         padding: 0.5rem 0.6rem;
     }
     h4{
-        background: rgba(var(--text), 0.2);
+        background: rgba(var(--text-color), 0.2);
         padding: 0.8rem 0.8rem;
     }
     .demo-btn{
@@ -922,13 +854,6 @@ form{
             height: auto;
         }
     }
-    #show_message{
-        transform: translate(100%, 0);
-        margin: 1rem;
-        max-width: 60vw;
-        width: max-content;
-        border-radius: 0.2rem;
-    }
     #confirmation{
         width: 24rem;
     }
@@ -945,7 +870,7 @@ form{
         right: auto;
         width: 6rem;
         border-top: none;
-        border-right: solid 1px rgba(var(--text), 0.2);
+        border-right: solid 1px rgba(var(--text-color), 0.2);
         .navbar-item{
             width: auto;
             padding: 1.4em 0;
@@ -959,18 +884,18 @@ form{
             }
             &:hover{
                 .icon{
-                    stroke: rgba(var(--text), 1);
+                    stroke: rgba(var(--text-color), 1);
                 }
                 h5{
-                    color: rgba(var(--text), 1);
+                    color: rgba(var(--text-color), 1);
                 }
             }
             &.active:hover{
                 .icon{
-                    stroke: var(--primary-color);
+                    stroke: var(--accent-color);
                 }
                 h5{
-                    color: var(--primary-color);
+                    color: var(--accent-color);
                 }
             }
         }
@@ -1000,7 +925,7 @@ form{
     svg{
         height: 2rem;
         width: 2rem;
-        stroke: var(--primary-color);
+        stroke: var(--accent-color);
         stroke-width: 6;
         fill: none;
         overflow: visible;
@@ -1018,6 +943,13 @@ form{
         word-spacing: 0.16em;
     }
 }
+#activity_page{
+    sm-tab-header{
+        position: sticky;
+        top: 0;
+        margin-bottom: 1rem;
+    }
+}
 @media only screen and (min-width: 800px){
     .container{
         grid-template-columns: repeat(3, 1fr);
@@ -1030,7 +962,7 @@ form{
             grid-area: header;
         }
         .left{
-            border-right: 1px solid rgba(var(--text), 0.2);
+            border-right: 1px solid rgba(var(--text-color), 0.2);
         }
         .left{
             padding-right: 1.5rem;
@@ -1075,28 +1007,28 @@ form{
 }
 @media (prefers-color-scheme: dark){
     :root{
-        --text: 238, 238, 238;
-        --text-light: 170, 170, 170;
-        --foreground: 26, 26, 26;
-        --background: #111;
+        --text-color: 238, 238, 238;
+        --text-color-light: 170, 170, 170;
+        --foreground-color: 26, 26, 26;
+        --background-color: #111;
         --dark-shade: #1a1a1a;
     }
 }
 @media (prefers-color-scheme: light){
     :root{
-        --text: 17, 17, 17;
-        --text-light: 85, 85, 85;
-        --foreground: 255, 255, 255;
-        --background: #e8e8e8;
+        --text-color: 17, 17, 17;
+        --text-color-light: 85, 85, 85;
+        --foreground-color: 255, 255, 255;
+        --background-color: #e8e8e8;
         --dark-shade: #dadada;
     }
 }
 @media (prefers-color-scheme: no-preference){
     :root{
-        --text: 17, 17, 17;
-        --text-light: 85, 85, 85;
-        --foreground: 255, 255, 255;
-        --background: #e8e8e8;
+        --text-color: 17, 17, 17;
+        --text-color-light: 85, 85, 85;
+        --foreground-color: 255, 255, 255;
+        --background-color: #e8e8e8;
         --dark-shade: #dadada;
     }
 }
diff --git a/index.html b/index.html
index 2c66a13..c324019 100644
--- a/index.html
+++ b/index.html
@@ -16,9 +16,6 @@
         <source src="https://rmservices.duckdns.org/files/notification-sound.mp3" type="audio/mpeg">
         <source src="https://rmservices.duckdns.org/files/notification-sound.ogg" type="audio/ogg">
     </audio>
-    <h5 id="textCopied" class="hide">
-        Copied
-    </h5>
     <div class="popup-container hide">
         <div id="confirmation" class="popup">
             <p id="confirm_message"></p>
@@ -40,32 +37,7 @@
             </div>
         </div>
     </div>
-    <div id="show_message" class="hide">
-        <svg id="error_icon" class="notification-icon hide-completely" viewBox="0 0 100 100">
-            <title>Error icon</title>
-            <path
-                d="M50,0a50,50,0,1,0,50,50A50,50,0,0,0,50,0ZM46,27.18A.79.79,0,0,1,46.6,27h7.72a.79.79,0,0,1,.79.79l-1,28.76a.79.79,0,0,
-            1-.79.79H47.46a.77.77,0,0,1-.56-.23.73.73,0,0,1-.23-.56l-.86-28.76A.77.77,0,0,1,46,27.18Zm7.68,44.39A4.91,4.91,0,0,1,50,73.05a5.08,5.08,
-            0,0,1-5.21-5.21A5,5,0,0,1,50,62.63a5,5,0,0,1,3.73,1.45,5.18,5.18,0,0,1,1.42,3.76A5.11,5.11,0,0,1,53.72,71.57Z" />
-        </svg>
-        <svg id="done_icon" class="notification-icon" viewBox="0 0 100 100">
-            <title>Done icon</title>
-            <path
-                d="M50,0a50,50,0,1,0,50,50A50,50,0,0,0,50,0ZM80.85,32.37,40.3,72.92a1.24,1.24,0,0,1-1.75,0l-19.4-19.4a1.23,1.23,0,0,1,0-1.75l3.54-3.54a1.23,
-            1.23,0,0,1,1.74,0L38.55,62.35a1.24,1.24,0,0,0,1.75,0L75.57,27.08a1.23,1.23,0,0,1,1.74,0l3.54,3.54A1.23,1.23,0,0,1,80.85,32.37Z" />
-        </svg>
-        <div>
-            <h5>Notification</h5>
-            <span id="notification_text">Message</span>
-        </div>
-        <button id="hide_banner_btn">
-            <svg viewBox="0 0 50 50">
-                <title>Close this notification</title>
-                <line x1="50" y1="0" x2="0" y2="50" />
-                <line x1="0" y1="0" x2="50" y2="50" />
-            </svg>
-        </button>
-    </div>
+    <sm-notifications id="show_message"></sm-notifications>
     <!-- Loading screen-->
     <div class="popup-container solid-background hide">
         <div id="main_loader" class="popup">
@@ -83,7 +55,8 @@
             <div class="container-header">
                 <h1>Sign In</h1>
             </div>
-            <h4 class="expand light-text">Welcome to RanchiMall Blockchain UPI</h4>
+            <h4 class="expand light-text">Welcome to RanchiMall Blockchain UPI.<br>Please enter your FLO private key to
+                continue.</h4>
             <form class="expand" autocomplete="off" onsubmit="return false">
                 <label class="input">
                     <input id="get_priv_key_field" type="password" minlength="40" required>
@@ -93,7 +66,6 @@
                     Sign In
                 </button>
             </form>
-            <p>*Sign in button will not be activated until correct value is entered.</p>
         </div>
     </div>
     <div class="popup-container hide">
@@ -105,15 +77,15 @@
                     <line x1="64" y1="64" x2="0" y2="0" />
                 </svg>
                 <h3>Transfer Rupee</h3>
-                <div id="send_tokens_btn" class="action expand">
-                    <button class="primary-btn expand" type="submit" disabled>
+                <button id="send_tokens_btn" class="action expand" type="submit" disabled>
+                    <h4 class="expand primary-btn">
                         transfer
-                    </button>
+                    </h4>
                     <svg viewBox="0 0 73 73" class="loader">
                         <path
                             d="M72.5,36.5c0,19.88-16.12,36-36,36s-36-16.12-36-36s16.12-36,36-36S72.5,16.62,72.5,36.5" />
                     </svg>
-                </div>
+                </button>
             </div>
             <p>
                 Transfer your deposited Rupee tokens to any FLO address.<br>
@@ -121,7 +93,7 @@
             </p>
             <form autocomplete="off" onsubmit="return false">
                 <label class="input">
-                    <input id="token_receiver" type="text" required>
+                    <input floId id="token_receiver" type="text" required>
                     <div class="placeholder">Reciever's FLO ID</div>
                 </label>
                 <label class="input">
@@ -140,15 +112,15 @@
                     <line x1="64" y1="64" x2="0" y2="0" />
                 </svg>
                 <h3>Deposit rupee</h3>
-                <div id="request_tokens_btn" class="action expand">
-                    <button class="primary-btn expand" type="submit" disabled>
+                <button id="request_tokens_btn" class="action expand" type="submit" disabled>
+                    <h4 class="primary-btn expand">
                         deposit
-                    </button>
+                    </h4>
                     <svg viewBox="0 0 73 73" class="loader">
                         <path
                             d="M72.5,36.5c0,19.88-16.12,36-36,36s-36-16.12-36-36s16.12-36,36-36S72.5,16.62,72.5,36.5" />
                     </svg>
-                </div>
+                </button>
             </div>
             <p>
                 Deposit rupee through UPI to use as Digital currency powered by blockchain.
@@ -170,15 +142,15 @@
                     <line x1="64" y1="64" x2="0" y2="0" />
                 </svg>
                 <h3>Withdraw rupee</h3>
-                <div id="withdraw_cash_btn" class="action expand">
-                    <button class="primary-btn expand" type="submit" disabled>
+                <button id="withdraw_cash_btn" class="action expand" type="submit" disabled>
+                    <h4 class="primary-btn expand">
                         withdraw
-                    </button>
+                    </h4>
                     <svg viewBox="0 0 73 73" class="loader">
                         <path
                             d="M72.5,36.5c0,19.88-16.12,36-36,36s-36-16.12-36-36s16.12-36,36-36S72.5,16.62,72.5,36.5" />
                     </svg>
-                </div>
+                </button>
             </div>
             <p>
                 Withdraw or redeem your rupee tokens back to your specified UPI address.
@@ -204,15 +176,15 @@
                     <line x1="64" y1="64" x2="0" y2="0" />
                 </svg>
                 <h3>Request rupee</h3>
-                <div id="request_rupee_btn" class="action expand">
-                    <button class="primary-btn expand" type="submit" disabled>
+                <button id="request_rupee_btn" class="action expand" type="submit" disabled>
+                    <h4 class="primary-btn expand">
                         request
-                    </button>
+                    </h4>
                     <svg viewBox="0 0 73 73" class="loader">
                         <path
                             d="M72.5,36.5c0,19.88-16.12,36-36,36s-36-16.12-36-36s16.12-36,36-36S72.5,16.62,72.5,36.5" />
                     </svg>
-                </div>
+                </button>
             </div>
             <p>
                 Request for rupee tokens from other's using FLO address.
@@ -238,15 +210,15 @@
                     <line x1="64" y1="64" x2="0" y2="0" />
                 </svg>
                 <h3>Pay through cashier</h3>
-                <div id="cnf_cash_payment" class="action expand">
-                    <button class="primary-btn expand" type="submit" disabled>
+                <button id="cnf_cash_payment" class="action expand" type="submit" disabled>
+                    <h4 class="primary-btn expand">
                         pay
-                    </button>
+                    </h4>
                     <svg viewBox="0 0 73 73" class="loader">
                         <path
                             d="M72.5,36.5c0,19.88-16.12,36-36,36s-36-16.12-36-36s16.12-36,36-36S72.5,16.62,72.5,36.5" />
                     </svg>
-                </div>
+                </button>
             </div>
             <p>
                 Don't have enough token balance? Pay to our cashier through UPI and your cash will be
@@ -693,24 +665,26 @@
             </div>
             <p class="bottom-margin">*If your request isn't completed in 12hrs, use <strong>REPORT</strong> to get
                 assistance from our helpline.</p>
-            <sm-tabs>
-                <sm-tab slot="tab" active>Deposits</sm-tab>
-                <sm-panel slot="panel" id="deposit_activity_container" class="container activity-container">
+            <sm-tab-header target="user_activities">
+                <sm-tab>Deposits</sm-tab>
+                <sm-tab>Withdrawals</sm-tab>
+                <sm-tab>Pay through cashier</sm-tab>
+                <sm-tab>System Notifications</sm-tab>
+            </sm-tab-header>
+            <sm-tab-panels id="user_activities">
+                <sm-panel id="deposit_activity_container" class="container activity-container">
                     <h4>You haven't deposited rupee yet.</h4>
                 </sm-panel>
-                <sm-tab slot="tab">Withdrawals</sm-tab>
-                <sm-panel slot="panel" id="withdraw_activity_container" class="container activity-container">
+                <sm-panel id="withdraw_activity_container" class="container activity-container">
                     <h4>You haven't withdrawn rupee yet.</h4>
                 </sm-panel>
-                <sm-tab slot="tab">Pay through cashier</sm-tab>
-                <sm-panel slot="panel" id="pay_cashier_activity_container" class="container activity-container">
+                <sm-panel id="pay_cashier_activity_container" class="container activity-container">
                     <h4>You haven't paid through cashier yet.</h4>
                 </sm-panel>
-                <sm-tab slot="tab">System Notifications</sm-tab>
-                <sm-panel slot="panel" id="cashier_message_container" class="container activity-container">
+                <sm-panel id="cashier_message_container" class="container activity-container">
                     <h4>No messages from cashier.</h4>
                 </sm-panel>
-            </sm-tabs>
+            </sm-tab-panels>
         </section>
         <section id="helpline_page" class="page hide-completely">
             <div class="container-header">
@@ -718,21 +692,22 @@
             </div>
             <h5 class="label">Select Cashier</h5>
             <sm-strip-select name="cashier" id="select_cashier"></sm-strip-select>
-            <sm-tabs>
-                <sm-tab slot="tab" active>Deposit</sm-tab>
-                <sm-panel slot="panel" id="deposit_complaints_container" class="complaints-container">
+            <sm-tab-header target="all_complaints">
+                <sm-tab>Deposit</sm-tab>
+                <sm-tab>Withdraw</sm-tab>
+                <sm-tab>Pay through cashier</sm-tab>
+            </sm-tab-header>
+            <sm-tab-panels id="all_complaints">
+                <sm-panel id="deposit_complaints_container" class="complaints-container">
                     <h4>No deposit complaints.</h4>
                 </sm-panel>
-                <sm-tab slot="tab">Withdraw</sm-tab>
-                <sm-panel slot="panel" id="withdraw_complaints_container" class="complaints-container hide-completely">
+                <sm-panel id="withdraw_complaints_container" class="complaints-container hide-completely">
                     <h4>No withdraw complaints.</h4>
                 </sm-panel>
-                <sm-tab slot="tab">Pay through cashier</sm-tab>
-                <sm-panel slot="panel" id="pay_cashier_complaints_container"
-                    class="complaints-container hide-completely">
+                <sm-panel id="pay_cashier_complaints_container" class="complaints-container hide-completely">
                     <h4>No pay through cashier complaints.</h4>
                 </sm-panel>
-            </sm-tabs>
+            </sm-tab-panels>
         </section>
         <section id="profile_page" class="page hide-completely">
             <div class="container-header">
@@ -759,7 +734,9 @@
 
             //Required for blockchain API operators
             apiURL: {
-                FLO: ['https://explorer.mediciland.com/', 'https://livenet.flocha.in/', 'https://flosight.duckdns.org/', 'http://livenet-explorer.floexperiments.com/'],
+                FLO: ['https://explorer.mediciland.com/', 'https://livenet.flocha.in/',
+                    'https://flosight.duckdns.org/', 'http://livenet-explorer.floexperiments.com/'
+                ],
                 FLO_TEST: ['https://testnet-flosight.duckdns.org/', 'https://testnet.flocha.in/']
             },
             adminID: "F7HEAV9226tqXtRk34XrA9nZCb8ZcbVJt1",
@@ -772,14 +749,1430 @@
 
             //for cloud apps
             subAdmins: [],
-            application: "rupeeTokenApp",//rupeeTokenApp
+            application: "rupeeTokenAppTest1", //rupeeTokenApp
             vectorClock: {},
             appObjects: {},
             generalData: {},
             generalVC: {}
         }
     </script>
+    <script>
+        // tab
+        const smTab = document.createElement("template");
+        smTab.innerHTML = `
+<style>
+*{
+padding: 0;
+margin: 0;
+box-sizing: border-box;
+} 
+:host{
+position: relative;
+display: inline-flex;
+z-index: 1;
+}
+.tab{
+position: relative;
+user-select: none;
+justify-content: center;
+cursor: pointer;
+-webkit-tap-highlight-color: transparent;
+white-space: nowrap;
+padding: 0.4rem 0.8rem;
+font-weight: 500;
+word-spacing: 0.1em;
+text-align: center;
+transition: color 0.3s;
+text-transform: capitalize;
+font-family: var(--font-family);
+}
+@media (hover: hover){
+:host(.active) .tab{
+opacity: 1;
+}
+.tab{
+opacity: 0.7
+}
+.tab:hover{
+opacity: 1
+}
+}
+</style>
+<div part="tab" class="tab">
+<slot></slot>
+</div>
+`;
 
+        customElements.define(
+            "sm-tab",
+            class extends HTMLElement {
+                constructor() {
+                    super();
+                    this.shadow = this.attachShadow({
+                        mode: "open"
+                    }).append(
+                        smTab.content.cloneNode(true)
+                    );
+                }
+            }
+        );
+
+        // select
+        const smSelect = document.createElement("template");
+        smSelect.innerHTML = `
+<style>     
+    *{
+        padding: 0;
+        margin: 0;
+        box-sizing: border-box;
+    } 
+    .icon {
+        fill: none;
+        height: 0.8rem;
+        width: 0.8rem;
+        stroke: rgba(var(--text-color), 0.7);
+        stroke-width: 6;
+        overflow: visible;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+    }      
+    :host{
+        display: inline-flex;
+    }
+    .hide{
+        opacity: 0;
+        pointer-events: none;
+    }
+    .select{
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        cursor: pointer;
+        width: 100%;
+        -webkit-tap-highlight-color: transparent;
+    }
+    .option-text{
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+    .selection{
+        border-radius: 0.3rem;
+        display: grid;
+        grid-template-columns: 1fr auto;
+        grid-template-areas: 'heading heading' '. .';
+        padding: 0.4rem 1rem;
+        background: rgba(var(--text-color), 0.06);
+        border: solid 1px rgba(var(--text-color), 0.2);
+        align-items: center;
+        outline: none;
+    }
+    .selection:focus{
+        box-shadow: 0 0 0 0.1rem var(--accent-color) 
+    }
+    .icon{
+        margin-left: 1rem;
+    }
+    :host([align-select="left"]) .options{
+        left: 0;
+    }
+    :host([align-select="right"]) .options{
+        right: 0;
+    }
+    .options{
+        top: 100%;
+        margin-top: 0.5rem; 
+        overflow: hidden auto;
+        position: absolute;
+        grid-area: options;
+        display: flex;
+        flex-direction: column;
+        min-width: 100%;
+        background: rgba(var(--foreground-color), 1);
+        transition: opacity 0.3s, top 0.3s;
+        border: solid 1px rgba(var(--text-color), 0.2);
+        border-radius: 0.3rem;
+        z-index: 2;
+        box-shadow: 0.4rem 0.8rem 1.2rem #00000030;
+    }
+    .rotate{
+        transform: rotate(180deg)
+    }
+</style>
+<div class="select" >
+    <div class="selection" tabindex="0">
+        <div class="option-text"></div>
+        <svg class="icon toggle" viewBox="0 0 64 64">
+            <polyline points="63.65 15.99 32 47.66 0.35 15.99"/>
+        </svg>
+    </div>
+    <div class="options hide">
+        <slot></slot> 
+    </div>
+</div>`;
+        customElements.define(
+            "sm-select",
+            class extends HTMLElement {
+                constructor() {
+                    super();
+                    this.attachShadow({
+                        mode: "open"
+                    }).append(
+                        smSelect.content.cloneNode(true)
+                    );
+                }
+                static get observedAttributes() {
+                    return ["value"];
+                }
+                get value() {
+                    return this.getAttribute("value");
+                }
+                set value(val) {
+                    this.setAttribute("value", val);
+                }
+
+                collapse() {
+                    this.optionList.animate(this.slideUp, this.animationOptions);
+                    this.optionList.classList.add("hide");
+                    this.chevron.classList.remove("rotate");
+                    this.open = false;
+                }
+                connectedCallback() {
+                    this.availableOptions;
+                    this.optionList = this.shadowRoot.querySelector(".options");
+                    this.chevron = this.shadowRoot.querySelector(".toggle");
+                    let slot = this.shadowRoot.querySelector(".options slot"),
+                        selection = this.shadowRoot.querySelector(".selection"),
+                        previousOption;
+                    this.open = false;
+                    (this.slideDown = [{
+                            transform: `translateY(-0.5rem)`
+                        },
+                        {
+                            transform: `translateY(0)`
+                        },
+                    ]),
+                    (this.slideUp = [{
+                            transform: `translateY(0)`
+                        },
+                        {
+                            transform: `translateY(-0.5rem)`
+                        },
+                    ]),
+                    (this.animationOptions = {
+                        duration: 300,
+                        fill: "forwards",
+                        easing: "ease",
+                    });
+                    selection.addEventListener("click", (e) => {
+                        if (!this.open) {
+                            this.optionList.classList.remove("hide");
+                            this.optionList.animate(this.slideDown, this.animationOptions);
+                            this.chevron.classList.add("rotate");
+                            this.open = true;
+                        } else {
+                            this.collapse();
+                        }
+                    });
+                    selection.addEventListener("keydown", (e) => {
+                        if (e.code === "ArrowDown" || e.code === "ArrowRight") {
+                            e.preventDefault();
+                            this.availableOptions[0].focus();
+                        }
+                        if (e.code === "Enter" || e.code === "Space")
+                            if (!this.open) {
+                                this.optionList.classList.remove("hide");
+                                this.optionList.animate(this.slideDown, this.animationOptions);
+                                this.chevron.classList.add("rotate");
+                                this.open = true;
+                            } else {
+                                this.collapse();
+                            }
+                    });
+                    this.optionList.addEventListener("keydown", (e) => {
+                        if (e.code === "ArrowUp" || e.code === "ArrowRight") {
+                            e.preventDefault();
+                            if (document.activeElement.previousElementSibling) {
+                                document.activeElement.previousElementSibling.focus();
+                            }
+                        }
+                        if (e.code === "ArrowDown" || e.code === "ArrowLeft") {
+                            e.preventDefault();
+                            if (document.activeElement.nextElementSibling)
+                                document.activeElement.nextElementSibling.focus();
+                        }
+                    });
+                    this.addEventListener("optionSelected", (e) => {
+                        if (previousOption !== e.target) {
+                            this.setAttribute("value", e.detail.value);
+                            this.shadowRoot.querySelector(".option-text").textContent =
+                                e.detail.text;
+                            this.dispatchEvent(
+                                new CustomEvent("change", {
+                                    bubbles: true,
+                                    composed: true,
+                                })
+                            );
+                            if (previousOption) {
+                                previousOption.classList.remove("check-selected");
+                            }
+                            previousOption = e.target;
+                        }
+                        if (!e.detail.switching) this.collapse();
+
+                        e.target.classList.add("check-selected");
+                    });
+                    slot.addEventListener("slotchange", (e) => {
+                        this.availableOptions = slot.assignedElements();
+                        if (this.availableOptions[0]) {
+                            let firstElement = this.availableOptions[0];
+                            previousOption = firstElement;
+                            firstElement.classList.add("check-selected");
+                            this.setAttribute("value", firstElement.getAttribute("value"));
+                            this.shadowRoot.querySelector(".option-text").textContent =
+                                firstElement.textContent;
+                            this.availableOptions.forEach((element, index) => {
+                                element.setAttribute("data-rank", index + 1);
+                                element.setAttribute("tabindex", "0");
+                            });
+                        }
+                    });
+                    document.addEventListener("mousedown", (e) => {
+                        if (!this.contains(e.target) && this.open) {
+                            this.collapse();
+                        }
+                    });
+                }
+            }
+        );
+
+        // option
+        const smOption = document.createElement("template");
+        smOption.innerHTML = `
+<style>     
+    *{
+        padding: 0;
+        margin: 0;
+        box-sizing: border-box;
+    }     
+    :host{
+        display: flex;
+    }
+    .option{
+        min-width: 100%;
+        padding: 0.8rem 1.2rem;
+        cursor: pointer;
+        overflow-wrap: break-word;
+        outline: none;
+        display: flex;
+        align-items: center;
+    }
+    :host(:focus){
+        outline: none;
+        background: rgba(var(--text-color), 0.1);
+    }
+    :host(:focus) .option .icon{
+        opacity: 0.4
+    }
+    :host(.check-selected) .icon{
+        opacity: 1 !important
+    }
+    .icon {
+        margin-right: 0.8rem;
+        fill: none;
+        height: 0.8rem;
+        width: 0.8rem;
+        stroke: rgba(var(--text-color), 0.7);
+        stroke-width: 10;
+        overflow: visible;
+        stroke-linecap: round;
+        border-radius: 1rem;
+        stroke-linejoin: round;
+        opacity: 0;
+    }
+    @media (hover: hover){
+        .option:hover{
+            background: rgba(var(--text-color), 0.1);
+        }
+        .option:hover .icon{
+            opacity: 0.4
+        }
+    }
+</style>
+<div class="option">
+    <svg class="icon" viewBox="0 0 64 64">
+        <polyline points="0.35 31.82 21.45 52.98 63.65 10.66"/>
+    </svg>
+    <slot></slot> 
+</div>`;
+        customElements.define(
+            "sm-option",
+            class extends HTMLElement {
+                constructor() {
+                    super();
+                    this.attachShadow({
+                        mode: "open"
+                    }).append(
+                        smOption.content.cloneNode(true)
+                    );
+                }
+
+                sendDetails(switching) {
+                    let optionSelected = new CustomEvent("optionSelected", {
+                        bubbles: true,
+                        composed: true,
+                        detail: {
+                            text: this.textContent,
+                            value: this.getAttribute("value"),
+                            switching: switching,
+                        },
+                    });
+                    this.dispatchEvent(optionSelected);
+                }
+
+                connectedCallback() {
+                    let validKey = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"];
+                    this.addEventListener("click", (e) => {
+                        this.sendDetails();
+                    });
+                    this.addEventListener("keyup", (e) => {
+                        if (e.code === "Enter" || e.code === "Space") {
+                            e.preventDefault();
+                            this.sendDetails(false);
+                        }
+                        if (validKey.includes(e.code)) {
+                            e.preventDefault();
+                            this.sendDetails(true);
+                        }
+                    });
+                    if (this.hasAttribute("default")) {
+                        setTimeout(() => {
+                            this.sendDetails();
+                        }, 0);
+                    }
+                }
+            }
+        );
+
+        // select
+        const smStripSelect = document.createElement("template");
+        smStripSelect.innerHTML = `
+<style>     
+    *{
+        padding: 0;
+        margin: 0;
+        box-sizing: border-box;
+    }    
+    :host{
+        display: flex;
+    }
+    .icon {
+        position: absolute;
+        display: flex;
+        fill: none;
+        height: 2.6rem;
+        width: 2.6rem;
+        padding: 0.9rem;
+        stroke: rgba(var(--text-color), 0.7);
+        stroke-width: 10;
+        overflow: visible;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+        cursor: pointer;
+        min-width: 0;
+        z-index: 1;
+        background: rgba(var(--foreground-color), 1);
+        -webkit-tap-highlight-color: transparent;
+        transition: opacity 0.3s; 
+    }
+    .hide{
+        pointer-events: none;
+        opacity: 0;
+    }
+    .select-container{
+        position: relative;
+        display: flex;
+        width: 100%;
+        align-items: center;
+    }
+    .select{
+        position: relative;
+        display: flex;
+        gap: 0.5rem;
+        max-width: 100%;
+        overflow: auto hidden;
+    }
+    .previous-item{
+        left: 0;
+    }
+    .next-item{
+        right: 0;
+    }
+    .left,.right{
+        position: absolute;
+        width: 1rem;
+        height: 100%; 
+        transition: opacity 0.3s;
+        z-index: 1;
+    }
+    .left{
+        background: linear-gradient(to left, transparent, rgba(var(--foreground-color), 1))
+    }
+    .right{
+        right: 0;
+        background: linear-gradient(to right, transparent, rgba(var(--foreground-color), 1))
+    }
+    slot::slotted(.active){
+        border-radius: 2rem;
+        opacity: 1;
+        background-color: rgba(var(--text-color), .6);  
+        color: rgba(var(--foreground-color), 1);
+    }
+    @media (hover: none){
+        ::-webkit-scrollbar-track {
+            -webkit-box-shadow: none !important;
+            background-color: transparent !important;
+        }
+        ::-webkit-scrollbar {
+            height: 0;
+            background-color: transparent;
+        }
+        .icon{
+            display: none;
+        }
+        .left,.right{
+            display: block;
+        }
+    }
+    @media (hover: hover){
+        .select{
+            overflow: hidden;
+        }
+        .left,.right{
+            display: none;
+        }
+    }
+</style>
+<div class="select-container">
+    <div class="left hide"></div>
+    <svg class="icon previous-item hide" viewBox="4 0 64 64">
+        <title>Previous</title>
+        <polyline points="48.01 0.35 16.35 32 48.01 63.65"/>
+    </svg>
+    <div class="select">
+        <slot></slot> 
+    </div>
+    <svg class="icon next-item hide" viewBox="-6 0 64 64">
+        <title>Next</title>
+        <polyline points="15.99 0.35 47.65 32 15.99 63.65"/>
+    </svg>
+    <div class="right hide"></div>
+</div>`;
+        customElements.define(
+            "sm-strip-select",
+            class extends HTMLElement {
+                constructor() {
+                    super();
+                    this.attachShadow({
+                        mode: "open"
+                    }).append(
+                        smStripSelect.content.cloneNode(true)
+                    );
+                }
+                static get observedAttributes() {
+                    return ["value"];
+                }
+                get value() {
+                    return this.getAttribute("value");
+                }
+                set value(val) {
+                    this.setAttribute("value", val);
+                }
+                scrollLeft() {
+                    this.select.scrollBy({
+                        top: 0,
+                        left: -this.scrollDistance,
+                        behavior: "smooth",
+                    });
+                }
+
+                scrollRight() {
+                    this.select.scrollBy({
+                        top: 0,
+                        left: this.scrollDistance,
+                        behavior: "smooth",
+                    });
+                }
+                connectedCallback() {
+                    let previousOption,
+                        slot = this.shadowRoot.querySelector("slot");
+                    this.selectContainer = this.shadowRoot.querySelector(".select-container");
+                    this.select = this.shadowRoot.querySelector(".select");
+                    this.nextArrow = this.shadowRoot.querySelector(".next-item");
+                    this.previousArrow = this.shadowRoot.querySelector(".previous-item");
+                    this.nextGradient = this.shadowRoot.querySelector(".right");
+                    this.previousGradient = this.shadowRoot.querySelector(".left");
+                    this.selectOptions;
+                    this.scrollDistance = this.selectContainer.getBoundingClientRect().width;
+                    const firstElementObserver = new IntersectionObserver(
+                        (entries) => {
+                            if (entries[0].isIntersecting) {
+                                this.previousArrow.classList.add("hide");
+                                this.previousGradient.classList.add("hide");
+                            } else {
+                                this.previousArrow.classList.remove("hide");
+                                this.previousGradient.classList.remove("hide");
+                            }
+                        }, {
+                            root: this.selectContainer,
+                            threshold: 0.95,
+                        }
+                    );
+                    const lastElementObserver = new IntersectionObserver(
+                        (entries) => {
+                            if (entries[0].isIntersecting) {
+                                this.nextArrow.classList.add("hide");
+                                this.nextGradient.classList.add("hide");
+                            } else {
+                                this.nextArrow.classList.remove("hide");
+                                this.nextGradient.classList.remove("hide");
+                            }
+                        }, {
+                            root: this.selectContainer,
+                            threshold: 0.95,
+                        }
+                    );
+
+                    const selectObserver = new IntersectionObserver((entries) => {
+                        if (entries[0].isIntersecting) {
+                            this.scrollDistance = this.selectContainer.getBoundingClientRect().width;
+                        }
+                    });
+
+                    selectObserver.observe(this.selectContainer);
+                    this.addEventListener("optionSelected", (e) => {
+                        if (previousOption === e.target) return;
+                        if (previousOption) previousOption.classList.remove("active");
+                        e.target.classList.add("active");
+                        e.target.scrollIntoView({
+                            behavior: "smooth",
+                            inline: "center",
+                            block: "nearest",
+                        });
+                        this.setAttribute("value", e.detail.value);
+                        this.dispatchEvent(
+                            new CustomEvent("change", {
+                                bubbles: true,
+                                composed: true,
+                            })
+                        );
+                        previousOption = e.target;
+                    });
+                    slot.addEventListener("slotchange", (e) => {
+                        this.selectOptions = slot.assignedElements();
+                        firstElementObserver.observe(this.selectOptions[0]);
+                        lastElementObserver.observe(
+                            this.selectOptions[this.selectOptions.length - 1]
+                        );
+                        if (this.selectOptions[0]) {
+                            let firstElement = this.selectOptions[0];
+                            this.setAttribute("value", firstElement.getAttribute("value"));
+                            firstElement.classList.add("active");
+                            previousOption = firstElement;
+                        }
+                    });
+                    this.nextArrow.addEventListener("click", this.scrollRight.bind(this));
+                    this.previousArrow.addEventListener("click", this.scrollLeft.bind(this));
+                }
+
+                disconnectedCallback() {
+                    this.nextArrow.removeEventListener("click", this.scrollRight.bind(this));
+                    this.previousArrow.removeEventListener(
+                        "click",
+                        this.scrollLeft.bind(this)
+                    );
+                }
+            }
+        );
+
+        // option
+        const smStripOption = document.createElement("template");
+        smStripOption.innerHTML = `
+<style>     
+    *{
+        padding: 0;
+        margin: 0;
+        box-sizing: border-box;
+    }     
+    :host{
+        display: flex;
+    }
+    .option{
+        padding: 0.4rem 0.8rem;
+        cursor: pointer;
+        overflow-wrap: break-word;
+        outline: none;
+        border-radius: 2rem;
+        text-transform: capitalize;
+        border: solid 1px rgba(var(--text-color), .3);
+        opacity: 0.9;
+    }
+    .option:focus{
+        background: rgba(var(--text-color), 0.1);
+    }
+
+    @media (hover: hover){
+        .option{
+            transition: background 0.3s;
+        }
+        .option:hover{
+            background: rgba(var(--text-color), 0.1);
+        }
+    }
+</style>
+<div class="option" tabindex="0">
+    <slot></slot> 
+</div>`;
+        customElements.define(
+            "sm-strip-option",
+            class extends HTMLElement {
+                constructor() {
+                    super();
+                    this.attachShadow({
+                        mode: "open"
+                    }).append(
+                        smStripOption.content.cloneNode(true)
+                    );
+                }
+                sendDetails() {
+                    let optionSelected = new CustomEvent("optionSelected", {
+                        bubbles: true,
+                        composed: true,
+                        detail: {
+                            text: this.textContent,
+                            value: this.getAttribute("value"),
+                        },
+                    });
+                    this.dispatchEvent(optionSelected);
+                }
+
+                connectedCallback() {
+                    this.addEventListener("click", (e) => {
+                        this.sendDetails();
+                    });
+                    this.addEventListener("keyup", (e) => {
+                        if (e.code === "Enter" || e.code === "Space") {
+                            e.preventDefault();
+                            this.sendDetails(false);
+                        }
+                    });
+                    if (this.hasAttribute("default")) {
+                        setTimeout(() => {
+                            this.sendDetails();
+                        }, 0);
+                    }
+                }
+            }
+        );
+
+        //notifications
+
+        const smNotifications = document.createElement("template");
+        smNotifications.innerHTML = `
+<style>
+*{
+padding: 0;
+margin: 0;
+box-sizing: border-box;
+} 
+:host{
+display: flex;
+}
+.hide{
+opacity: 0 !important;
+pointer-events: none !important;
+}
+.notification-panel{
+display: grid;
+width: 100%;
+position: fixed;
+top: 0;
+right: 0;
+z-index: 100;
+max-height: 100%;
+overflow: hidden auto;
+overscroll-behavior: contain;
+}
+.no-transformations{
+transform: none;
+opacity: 1;
+}
+.notification{
+display: flex;
+opacity: 0;
+padding: 1rem 1.5rem;
+transform: translateY(-1rem);
+position: relative;
+border-radius: 0.3rem;
+box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.1),
+            0.5rem 1rem 2rem rgba(0, 0, 0, 0.1);
+background: rgba(var(--foreground-color), 1);
+transition: height 0.3s, transform 0.3s, opacity 0.3s;
+overflow: hidden;
+}
+h4:first-letter,
+p:first-letter{
+text-transform: uppercase;
+}
+h4{
+font-weight: 400;
+}
+p{
+line-height: 1.6;
+flex: 1;
+color: rgba(var(--text-color), 0.9);
+overflow-wrap: break-word;
+word-wrap: break-word;
+}
+.notification:last-of-type{
+margin-bottom: 0;
+}
+.icon {
+fill: none;
+height: 1.6rem;
+width: 1.6rem;
+stroke: rgba(var(--text-color), 0.7);
+overflow: visible;
+stroke-linecap: round;
+border-radius: 1rem;
+stroke-linejoin: round;
+cursor: pointer;
+}
+.error-icon{
+stroke: #E53935;
+}
+.success-icon{
+stroke: #00C853;
+}
+.close{
+margin-left: 1rem;
+padding: 0.5rem;
+stroke-width: 10;
+}
+.notification-icon{
+height: 1.4rem;
+width: 1.4rem;
+margin-right: 0.6rem;
+stroke-width: 6;
+}
+@media screen and (min-width: 640px){
+.notification-panel{
+    width: 40vw;
+    justify-content: flex-end;
+}
+.notification{
+    justify-self: end;
+    width: auto;
+    margin-right: 1.5rem;
+    margin-bottom: 1rem;
+    border-bottom: none;
+    border: solid 1px rgba(var(--text-color), 0.2);
+    transform: translateX(1rem);
+}
+}
+@media screen and (max-width: 640px){
+.close{
+    display: none
+}
+}
+</style>
+<div class="notification-panel">
+</div>
+`;
+
+        customElements.define(
+            "sm-notifications",
+            class extends HTMLElement {
+                constructor() {
+                    super();
+                    this.shadow = this.attachShadow({
+                        mode: "open"
+                    }).append(
+                        smNotifications.content.cloneNode(true)
+                    );
+                }
+
+                handleTouchStart(e) {
+                    this.notification = e.target.closest(".notification");
+                    this.touchStartX = e.changedTouches[0].clientX;
+                    this.notification.style.transition = "initial";
+                    this.touchStartTime = e.timeStamp;
+                }
+
+                handleTouchMove(e) {
+                    e.preventDefault();
+                    if (this.touchStartX < e.changedTouches[0].clientX) {
+                        this.offset = e.changedTouches[0].clientX - this.touchStartX;
+                        this.touchEndAnimataion = requestAnimationFrame(this.movePopup);
+                    } else {
+                        this.offset = -(this.touchStartX - e.changedTouches[0].clientX);
+                        this.touchEndAnimataion = requestAnimationFrame(this.movePopup);
+                    }
+                }
+
+                handleTouchEnd(e) {
+                    this.notification.style.transition = "transform 0.3s, opacity 0.3s";
+                    this.touchEndTime = e.timeStamp;
+                    cancelAnimationFrame(this.touchEndAnimataion);
+                    this.touchEndX = e.changedTouches[0].clientX;
+                    if (this.touchEndTime - this.touchStartTime > 200) {
+                        if (this.touchEndX - this.touchStartX > this.threshold) {
+                            this.removeNotification(this.notification);
+                        } else if (this.touchStartX - this.touchEndX > this.threshold) {
+                            this.removeNotification(this.notification, true);
+                        } else {
+                            this.resetPosition();
+                        }
+                    } else {
+                        if (this.touchEndX > this.touchStartX) {
+                            this.removeNotification(this.notification);
+                        } else {
+                            this.removeNotification(this.notification, true);
+                        }
+                    }
+                }
+
+                movePopup = () => {
+                    this.notification.style.transform = `translateX(${this.offset}px)`;
+                };
+
+                resetPosition() {
+                    this.notification.style.transform = `translateX(0)`;
+                }
+
+                push(messageBody, type, pinned) {
+                    let notification = document.createElement("div"),
+                        composition = ``;
+                    notification.classList.add("notification");
+                    if (pinned) notification.classList.add("pinned");
+                    if (type === "error") {
+                        composition += `
+    <svg class="notification-icon icon error-icon" viewBox="0 0 64 64">
+            <path d="M32,4.73a3.17,3.17,0,0,1,2.76,1.59l13.9,24.09L62.57,54.49a3.19,3.19,0,0,1-2.76,4.78H4.19a3.19,3.19,0,0,1-2.76-4.78L15.34,30.41,29.24,6.32A3.17,3.17,0,0,1,32,4.73m0-1a4.14,4.14,0,0,0-3.62,2.09L14.47,29.91.57,54a4.19,4.19,0,0,0,3.62,6.28H59.81A4.19,4.19,0,0,0,63.43,54L49.53,29.91,35.62,5.82A4.14,4.14,0,0,0,32,3.73Z"/>
+            <line x1="32" y1="24" x2="32" y2="36"/>
+            <line x1="32" y1="46" x2="32" y2="48"/>
+    </svg>`;
+                    } else if (type === "success") {
+                        composition += `
+        <svg class="notification-icon icon success-icon" viewBox="0 0 64 64">
+            <polyline points="0.35 31.82 21.45 52.98 63.65 10.66"/>
+        </svg>
+    `;
+                    }
+                    composition += `
+                    <p>${messageBody}</p>
+                    <svg class="icon close" viewBox="0 0 64 64">
+                        <title>Close</title>
+                        <line x1="64" y1="0" x2="0" y2="64"/>
+                        <line x1="64" y1="64" x2="0" y2="0"/>
+                    </svg>`;
+                    notification.innerHTML = composition;
+                    this.notificationPanel.prepend(notification);
+                    if (window.innerWidth > 640) {
+                        notification.animate(
+                            [{
+                                    transform: `translateX(1rem)`,
+                                    opacity: "0",
+                                },
+                                {
+                                    transform: "translateX(0)",
+                                    opacity: "1",
+                                },
+                            ],
+                            this.animationOptions
+                        ).onfinish = () => {
+                            notification.setAttribute("style", `transform: none;`);
+                        };
+                    } else {
+                        notification.setAttribute(
+                            "style",
+                            `transform: translateY(0); opacity: 1`
+                        );
+                    }
+                    notification.addEventListener(
+                        "touchstart",
+                        this.handleTouchStart.bind(this)
+                    );
+                    notification.addEventListener(
+                        "touchmove",
+                        this.handleTouchMove.bind(this)
+                    );
+                    notification.addEventListener("touchend", this.handleTouchEnd.bind(this));
+                }
+
+                removeNotification(notification, toLeft) {
+                    if (!this.offset) this.offset = 0;
+
+                    if (toLeft)
+                        notification.animate(
+                            [{
+                                    transform: `translateX(${this.offset}px)`,
+                                    opacity: "1",
+                                },
+                                {
+                                    transform: `translateX(-100%)`,
+                                    opacity: "0",
+                                },
+                            ],
+                            this.animationOptions
+                        ).onfinish = () => {
+                            notification.remove();
+                        };
+                    else {
+                        notification.animate(
+                            [{
+                                    transform: `translateX(${this.offset}px)`,
+                                    opacity: "1",
+                                },
+                                {
+                                    transform: `translateX(100%)`,
+                                    opacity: "0",
+                                },
+                            ],
+                            this.animationOptions
+                        ).onfinish = () => {
+                            notification.remove();
+                        };
+                    }
+                }
+
+                connectedCallback() {
+                    this.notificationPanel = this.shadowRoot.querySelector(
+                        ".notification-panel"
+                    );
+                    this.animationOptions = {
+                        duration: 300,
+                        fill: "forwards",
+                        easing: "ease",
+                    };
+                    this.fontSize = Number(
+                        window
+                        .getComputedStyle(document.body)
+                        .getPropertyValue("font-size")
+                        .match(/\d+/)[0]
+                    );
+                    this.notification;
+                    this.offset;
+                    this.touchStartX = 0;
+                    this.touchEndX = 0;
+                    this.touchStartTime = 0;
+                    this.touchEndTime = 0;
+                    this.threshold =
+                        this.notificationPanel.getBoundingClientRect().width * 0.3;
+                    this.touchEndAnimataion;
+
+                    this.notificationPanel.addEventListener("click", (e) => {
+                        if (e.target.closest(".close"))
+                            this.removeNotification(e.target.closest(".notification"));
+                    });
+
+                    const observer = new MutationObserver((mutationList) => {
+                        mutationList.forEach((mutation) => {
+                            if (mutation.type === "childList") {
+                                if (mutation.addedNodes.length) {
+                                    if (!mutation.addedNodes[0].classList.contains("pinned"))
+                                        setTimeout(() => {
+                                            this.removeNotification(mutation.addedNodes[0]);
+                                        }, 4000);
+                                    if (window.innerWidth > 640)
+                                        this.notificationPanel.style.padding =
+                                        "1.5rem 0 3rem 1.5rem";
+                                    else this.notificationPanel.style.padding =
+                                        "1rem 1rem 2rem 1rem";
+                                } else if (
+                                    mutation.removedNodes.length &&
+                                    !this.notificationPanel.children.length
+                                ) {
+                                    this.notificationPanel.style.padding = 0;
+                                }
+                            }
+                        });
+                    });
+                    observer.observe(this.notificationPanel, {
+                        attributes: true,
+                        childList: true,
+                        subtree: true,
+                    });
+                }
+            }
+        );
+
+        // tab-header
+
+        const smTabHeader = document.createElement("template");
+        smTabHeader.innerHTML = `
+<style>
+*{
+padding: 0;
+margin: 0;
+box-sizing: border-box;
+} 
+:host{
+display: flex;
+}
+.tabs{
+position: relative;
+display: grid;
+width: 100%;
+}
+.tab-header{
+display: grid;
+grid-auto-flow: column;
+justify-content: flex-start;
+gap: 1rem;
+position: relative;
+overflow: auto hidden;
+max-width: 100%;
+scrollbar-width: 0;
+}
+.indicator{
+position: absolute;
+left: 0;
+bottom: 0;
+height: 0.15rem;
+border-radius: 1rem 1rem 0 0;  
+background: var(--accent-color);
+transition: transform 0.3s, width 0.3s;
+}
+:host([variant="tab"]) .indicator{
+height: 100%;
+border-radius: 0.3rem;
+}
+:host([variant="tab"]) .tab-header{
+border-bottom: none; 
+}
+.hide-completely{
+display: none;
+}
+:host([variant="tab"]) .tab-header{
+gap: 0;
+display: inline-grid;
+justify-self: flex-start;
+background: rgba(var(--text-color), 0.1);
+border-radius: 0.3rem;
+}
+:host([variant="tab"]) slot::slotted(.active){
+color: rgba(var(--foreground-color), 1);
+}
+slot::slotted(.active){
+color: var(--accent-color);
+opacity: 1;
+}
+@media (hover: none){
+.tab-header::-webkit-scrollbar-track {
+-webkit-box-shadow: none !important;
+background-color: transparent !important;
+}
+.tab-header::-webkit-scrollbar {
+height: 0;
+background-color: transparent;
+}
+}         
+</style>
+<div part="tab-container" class="tabs">
+<div part="tab-header" class="tab-header">
+<slot></slot>
+<div part="indicator" class="indicator"></div>
+</div>
+</div>
+`;
+
+        customElements.define(
+            "sm-tab-header",
+            class extends HTMLElement {
+                constructor() {
+                    super();
+                    this.attachShadow({
+                        mode: "open"
+                    }).append(
+                        smTabHeader.content.cloneNode(true)
+                    );
+
+                    this.indicator = this.shadowRoot.querySelector(".indicator");
+                    this.tabSlot = this.shadowRoot.querySelector("slot");
+                    this.tabHeader = this.shadowRoot.querySelector(".tab-header");
+                }
+
+                sendDetails(element) {
+                    this.dispatchEvent(
+                        new CustomEvent("switchtab", {
+                            bubbles: true,
+                            detail: {
+                                target: this.target,
+                                rank: parseInt(element.getAttribute("rank")),
+                            },
+                        })
+                    );
+                }
+
+                moveIndiactor(tabDimensions) {
+                    //if(this.isTab)
+                    this.indicator.setAttribute(
+                        "style",
+                        `width: ${tabDimensions.width}px; transform: translateX(${
+          tabDimensions.left -
+          this.tabHeader.getBoundingClientRect().left +
+          this.tabHeader.scrollLeft
+        }px)`
+                    );
+                    //else
+                    //this.indicator.setAttribute('style', `width: calc(${tabDimensions.width}px - 1.6rem); transform: translateX(calc(${ tabDimensions.left - this.tabHeader.getBoundingClientRect().left + this.tabHeader.scrollLeft}px + 0.8rem)`)
+                }
+
+                connectedCallback() {
+                    if (
+                        !this.hasAttribute("target") ||
+                        this.getAttribute("target").value === ""
+                    )
+                        return;
+                    this.prevTab;
+                    this.allTabs;
+                    this.activeTab;
+                    this.isTab = false;
+                    this.target = this.getAttribute("target");
+
+                    if (
+                        this.hasAttribute("variant") &&
+                        this.getAttribute("variant") === "tab"
+                    ) {
+                        this.isTab = true;
+                    }
+
+                    this.tabSlot.addEventListener("slotchange", () => {
+                        this.tabSlot.assignedElements().forEach((tab, index) => {
+                            tab.setAttribute("rank", index);
+                        });
+                    });
+                    this.allTabs = this.tabSlot.assignedElements();
+
+                    this.tabSlot.addEventListener("click", (e) => {
+                        if (e.target === this.prevTab || !e.target.closest("sm-tab")) return;
+                        if (this.prevTab) this.prevTab.classList.remove("active");
+                        e.target.classList.add("active");
+
+                        e.target.scrollIntoView({
+                            behavior: "smooth",
+                            block: "nearest",
+                            inline: "center",
+                        });
+                        this.moveIndiactor(e.target.getBoundingClientRect());
+                        this.sendDetails(e.target);
+                        this.prevTab = e.target;
+                        this.activeTab = e.target;
+                    });
+                    let resizeObserver = new ResizeObserver((entries) => {
+                        entries.forEach((entry) => {
+                            if (this.prevTab) {
+                                let tabDimensions = this.activeTab.getBoundingClientRect();
+                                this.moveIndiactor(tabDimensions);
+                            }
+                        });
+                    });
+                    resizeObserver.observe(this);
+                    let observer = new IntersectionObserver(
+                        (entries) => {
+                            entries.forEach((entry) => {
+                                if (entry.isIntersecting) {
+                                    this.indicator.style.transition = "none";
+                                    if (this.activeTab) {
+                                        let tabDimensions = this.activeTab.getBoundingClientRect();
+                                        this.moveIndiactor(tabDimensions);
+                                    } else {
+                                        this.allTabs[0].classList.add("active");
+                                        let tabDimensions = this.allTabs[0].getBoundingClientRect();
+                                        this.moveIndiactor(tabDimensions);
+                                        this.sendDetails(this.allTabs[0]);
+                                        this.prevTab = this.tabSlot.assignedElements()[0];
+                                        this.activeTab = this.prevTab;
+                                    }
+                                }
+                            });
+                        }, {
+                            threshold: 1.0
+                        }
+                    );
+                    observer.observe(this);
+                }
+            }
+        );
+
+        // tab-panels
+
+        const smTabPanels = document.createElement("template");
+        smTabPanels.innerHTML = `
+<style>
+*{
+padding: 0;
+margin: 0;
+box-sizing: border-box;
+} 
+:host{
+width: 100%;
+}
+.panel-container{
+position: relative;
+display: flex;
+width: 100%;
+height: 100%
+overflow: hidden auto;
+}
+slot::slotted(.hide-completely){
+display: none;
+}
+@media (hover: none){
+.tab-header::-webkit-scrollbar-track {
+-webkit-box-shadow: none !important;
+background-color: transparent !important;
+}
+.tab-header::-webkit-scrollbar {
+height: 0;
+background-color: transparent;
+}
+}         
+</style>
+<div part="panel-container" class="panel-container">
+<slot>Nothing to see here.</slot>
+</div>
+`;
+
+        customElements.define(
+            "sm-tab-panels",
+            class extends HTMLElement {
+                constructor() {
+                    super();
+                    this.attachShadow({
+                        mode: "open"
+                    }).append(
+                        smTabPanels.content.cloneNode(true)
+                    );
+                    this.panelSlot = this.shadowRoot.querySelector("slot");
+                }
+                connectedCallback() {
+                    //animations
+                    let flyInLeft = [{
+                                opacity: 0,
+                                transform: "translateX(-1rem)",
+                            },
+                            {
+                                opacity: 1,
+                                transform: "none",
+                            },
+                        ],
+                        flyInRight = [{
+                                opacity: 0,
+                                transform: "translateX(1rem)",
+                            },
+                            {
+                                opacity: 1,
+                                transform: "none",
+                            },
+                        ],
+                        flyOutLeft = [{
+                                opacity: 1,
+                                transform: "none",
+                            },
+                            {
+                                opacity: 0,
+                                transform: "translateX(-1rem)",
+                            },
+                        ],
+                        flyOutRight = [{
+                                opacity: 1,
+                                transform: "none",
+                            },
+                            {
+                                opacity: 0,
+                                transform: "translateX(1rem)",
+                            },
+                        ],
+                        animationOptions = {
+                            duration: 300,
+                            fill: "forwards",
+                            easing: "ease",
+                        };
+                    this.prevPanel;
+                    this.allPanels;
+                    this.previousRank;
+
+                    this.panelSlot.addEventListener("slotchange", () => {
+                        this.panelSlot.assignedElements().forEach((panel) => {
+                            panel.classList.add("hide-completely");
+                        });
+                    });
+                    this.allPanels = this.panelSlot.assignedElements();
+                    this._targetBodyFlyRight = (targetBody) => {
+                        targetBody.classList.remove("hide-completely");
+                        targetBody.animate(flyInRight, animationOptions);
+                    };
+                    this._targetBodyFlyLeft = (targetBody) => {
+                        targetBody.classList.remove("hide-completely");
+                        targetBody.animate(flyInLeft, animationOptions);
+                    };
+                    document.addEventListener("switchtab", (e) => {
+                        if (e.detail.target !== this.id) return;
+
+                        if (this.prevPanel) {
+                            let targetBody = this.allPanels[e.detail.rank],
+                                currentBody = this.prevPanel;
+                            if (this.previousRank < e.detail.rank) {
+                                if (currentBody && !targetBody)
+                                    currentBody.animate(
+                                        flyOutLeft,
+                                        animationOptions
+                                    ).onfinish = () => {
+                                        currentBody.classList.add("hide-completely");
+                                    };
+                                else if (targetBody && !currentBody) {
+                                    this._targetBodyFlyRight(targetBody);
+                                } else if (currentBody && targetBody) {
+                                    currentBody.animate(
+                                        flyOutLeft,
+                                        animationOptions
+                                    ).onfinish = () => {
+                                        currentBody.classList.add("hide-completely");
+                                        this._targetBodyFlyRight(targetBody);
+                                    };
+                                }
+                            } else {
+                                if (currentBody && !targetBody)
+                                    currentBody.animate(
+                                        flyOutRight,
+                                        animationOptions
+                                    ).onfinish = () => {
+                                        currentBody.classList.add("hide-completely");
+                                    };
+                                else if (targetBody && !currentBody) {
+                                    this._targetBodyFlyLeft(targetBody);
+                                } else if (currentBody && targetBody) {
+                                    currentBody.animate(
+                                        flyOutRight,
+                                        animationOptions
+                                    ).onfinish = () => {
+                                        currentBody.classList.add("hide-completely");
+                                        this._targetBodyFlyLeft(targetBody);
+                                    };
+                                }
+                            }
+                        } else {
+                            this.allPanels[e.detail.rank].classList.remove("hide-completely");
+                        }
+                        this.previousRank = e.detail.rank;
+                        this.prevPanel = this.allPanels[e.detail.rank];
+                    });
+                }
+            }
+        );
+    </script>
     <script id="onLoadStartUp">
         function onLoadStartUp() {
             showPopup('main_loader', 'no')
@@ -802,7 +2195,10 @@
             depositRequest(txid, floId) {
                 let card = document.createElement('div');
                 card.classList.add('request')
-                setAttributes(card, { 'data-user-flo-id': floId, 'data-txid': txid })
+                setAttributes(card, {
+                    'data-user-flo-id': floId,
+                    'data-txid': txid
+                })
                 card.innerHTML = `  <h5>FLO ID</h5>
                                     <h4 class="breakable">${floId}</h4>
                                     <h5>UPI TXID</h5>
@@ -815,7 +2211,11 @@
             withdrawRequest(txid, upiId, floId) {
                 let card = document.createElement('div');
                 card.classList.add('request')
-                setAttributes(card, { 'data-txid': txid, 'data-user-flo-id': floId, 'data-upi': upiId })
+                setAttributes(card, {
+                    'data-txid': txid,
+                    'data-user-flo-id': floId,
+                    'data-upi': upiId
+                })
                 card.innerHTML = `  <h5>FLO ID</h5>
                                     <h4 class="breakable">${floId}</h4>
                                     <h5>UPI ID</h5>
@@ -830,7 +2230,12 @@
             payRequest(sender, txid, floId, amount) {
                 let card = document.createElement('div');
                 card.classList.add('request')
-                setAttributes(card, { 'data-sender': sender, 'data-receiver-flo-id': floId, 'data-txid': txid, 'data-amount': amount })
+                setAttributes(card, {
+                    'data-sender': sender,
+                    'data-receiver-flo-id': floId,
+                    'data-txid': txid,
+                    'data-amount': amount
+                })
                 card.innerHTML = `  <h5>Transaction ID</h5>
                                     <h4 class="breakable">${txid}</h4>
                                     <h5>Receiver's FLO ID</h5>
@@ -846,7 +2251,10 @@
                 let card = document.createElement('div'),
                     time = parseInt(vectorClock.split('_')[0])
                 card.classList.add('request')
-                setAttributes(card, { 'data-vector-clock': vectorClock, 'data-type': 'deposit' })
+                setAttributes(card, {
+                    'data-vector-clock': vectorClock,
+                    'data-type': 'deposit'
+                })
                 card.innerHTML = `  <h5 class="time">${formatedTime(time)}</h5>
                                     <h5>UPI Transanction ID</h5>
                                     <div class="copy-row">
@@ -871,7 +2279,10 @@
                     time = parseInt(vectorClock.split('_')[0])
                 card.classList.add('request')
                 let timeFrag = time.toString().split(' ');
-                setAttributes(card, { 'data-vector-clock': vectorClock, 'data-type': 'withdraw' })
+                setAttributes(card, {
+                    'data-vector-clock': vectorClock,
+                    'data-type': 'withdraw'
+                })
                 card.innerHTML = `   <h5 class="time">${formatedTime(time)}</h5>
                                     <h5>Transanction ID</h5>
                                     <div class="copy-row">
@@ -898,7 +2309,10 @@
                     time = parseInt(vectorClock.split('_')[0])
                 card.classList.add('request')
                 let timeFrag = time.toString().split(' ');
-                setAttributes(card, { 'data-vector-clock': vectorClock, 'data-type': 'pay_thru_cashier' })
+                setAttributes(card, {
+                    'data-vector-clock': vectorClock,
+                    'data-type': 'pay_thru_cashier'
+                })
                 card.innerHTML = `   <h5 class="time">${formatedTime(time)}</h5>
                                     <h5>UPI Transanction ID</h5>
                                     <div class="copy-row">
@@ -931,7 +2345,11 @@
                 let card = document.createElement('div')
                 card.classList.add('request')
 
-                setAttributes(card, { 'data-sender-address': senderAddress, 'data-amount': amount, 'data-payment-request-id': id })
+                setAttributes(card, {
+                    'data-sender-address': senderAddress,
+                    'data-amount': amount,
+                    'data-payment-request-id': id
+                })
                 card.innerHTML = `   <h5 class="time">${formatedTime(time)}</h5>
                                     <h5>Request by</h5>
                                     <div class="copy-row">
@@ -962,10 +2380,18 @@
             },
             depositComplaint(userData, cashierData, udc) {
                 let card = document.createElement('div'),
-                    { depositedAmount, customMsg, sender, vectorClock } = userData,
+                    {
+                        depositedAmount,
+                        customMsg,
+                        sender,
+                        vectorClock
+                    } = userData,
                     composition = ``;
                 card.classList.add('request', 'complaint')
-                setAttributes(card, { 'data-type': 'deposit', 'data-udc': JSON.stringify(udc) })
+                setAttributes(card, {
+                    'data-type': 'deposit',
+                    'data-udc': JSON.stringify(udc)
+                })
                 composition = `
                     
                     <div class="left">
@@ -988,7 +2414,10 @@
 
                             </div>`
                 if (cashierData.processed) {
-                    let { time, floTxId } = cashierData
+                    let {
+                        time,
+                        floTxId
+                    } = cashierData
                     composition += `
                     <div class="right">
                         <h4 class="processed">Cashier processed the request on ${formatedTime(time)}</h4>
@@ -1002,8 +2431,7 @@
                             </svg>
                         </div>
                     </div>`;
-                }
-                else {
+                } else {
                     composition += `
                     <div class="right">
                         <h4 class="unprocessed">Cashier hasn't processed the request</h4>
@@ -1023,10 +2451,18 @@
             },
             withdrawComplaint(userData, cashierData, udc) {
                 let card = document.createElement('div'),
-                    { withdrawnAmount, customMsg, sender, vectorClock } = userData,
+                    {
+                        withdrawnAmount,
+                        customMsg,
+                        sender,
+                        vectorClock
+                    } = userData,
                     composition = ``;
                 card.classList.add('request', 'complaint')
-                setAttributes(card, { 'data-type': 'withdraw', 'data-udc': JSON.stringify(udc) })
+                setAttributes(card, {
+                    'data-type': 'withdraw',
+                    'data-udc': JSON.stringify(udc)
+                })
                 composition = `
                     <div class="left">
                         <h5>Sender</h5>
@@ -1048,7 +2484,10 @@
 
                             </div>`
                 if (cashierData.processed) {
-                    let { time, floTxId } = cashierData
+                    let {
+                        time,
+                        floTxId
+                    } = cashierData
                     composition += `
                     <div class="right">
                         <h4 class="processed">Cashier processed the request on ${formatedTime(time)}</h4>
@@ -1062,8 +2501,7 @@
                             </svg>
                         </div>
                     </div>`;
-                }
-                else {
+                } else {
                     composition += `
                     <div class="right">
                         <h4 class="unprocessed">Cashier hasn't processed the request</h4>
@@ -1083,10 +2521,19 @@
             },
             payCashierComplaint(userData, cashierData, udc) {
                 let card = document.createElement('div'),
-                    { amount, customMsg, sender, receiver, vectorClock } = userData,
+                    {
+                        amount,
+                        customMsg,
+                        sender,
+                        receiver,
+                        vectorClock
+                    } = userData,
                     composition = ``;
                 card.classList.add('request', 'complaint')
-                setAttributes(card, { 'data-type': 'withdraw', 'data-udc': JSON.stringify(udc) })
+                setAttributes(card, {
+                    'data-type': 'withdraw',
+                    'data-udc': JSON.stringify(udc)
+                })
                 composition = `
                     <div class="left">
                         <h5>Sender</h5>
@@ -1117,7 +2564,10 @@
 
                             </div>`
                 if (cashierData.processed) {
-                    let { time, floTxId } = cashierData
+                    let {
+                        time,
+                        floTxId
+                    } = cashierData
                     composition += `
                     <div class="right">
                         <h4 class="processed">Cashier processed the request on ${formatedTime(time)}</h4>
@@ -1131,8 +2581,7 @@
                             </svg>
                         </div>
                     </div>`;
-                }
-                else {
+                } else {
                     composition += `
                     <div class="right">
                         <h4 class="unprocessed">Cashier hasn't processed the request</h4>
@@ -1176,9 +2625,9 @@
 
         //Checks for internet connection status
         if (!navigator.onLine)
-            notify('There seems to be a problem connecting to the internet.', 'error', 'fixed', true)
+            notify('There seems to be a problem connecting to the internet.', 'error', true, true)
         window.addEventListener('offline', () => {
-            notify('There seems to be a problem connecting to the internet.', 'error', 'fixed', true)
+            notify('There seems to be a problem connecting to the internet.', 'error', true, true)
         })
         window.addEventListener('online', () => {
             notify('We are back online.', '', '', true)
@@ -1202,11 +2651,15 @@
         }
         let popupStack = new Stack(),
             zIndex = 10;
+
         function showPopup(popup, permission) {
             let thisPopup = document.getElementById(popup);
             thisPopup.parentNode.classList.remove('hide');
             thisPopup.classList.add('no-transformations');
-            popupStack.push({ popup, permission })
+            popupStack.push({
+                popup,
+                permission
+            })
             zIndex++;
             thisPopup.parentNode.setAttribute('style', `z-index: ${zIndex}`)
             document.getElementById('main_page')
@@ -1229,7 +2682,10 @@
         function hidePopup() {
             if (popupStack.peek() === undefined)
                 return;
-            let { popup, permission } = popupStack.pop();
+            let {
+                popup,
+                permission
+            } = popupStack.pop();
             thisPopup = document.getElementById(popup);
             thisPopup.closest('.popup-container').classList.add('hide');
             thisPopup.closest('.popup').classList.remove('no-transformations');
@@ -1258,7 +2714,8 @@
         }
 
         addEventListener('mousedown', e => {
-            if (e.target.classList.contains('popup-container') && popupStack.peek() !== undefined && popupStack.peek().permission !== 'no') {
+            if (e.target.classList.contains('popup-container') && popupStack.peek() !== undefined && popupStack
+                .peek().permission !== 'no') {
                 hidePopup()
             }
         })
@@ -1269,8 +2726,7 @@
             if (option === 'start') {
                 btn.children[0].classList.add('clip')
                 btn.children[1].classList.add('animate-loader')
-            }
-            else {
+            } else {
                 btn.children[0].classList.remove('clip')
                 btn.children[1].classList.remove('animate-loader')
             }
@@ -1298,37 +2754,19 @@
                 parent.querySelector("button[type='submit']").disabled = true;
         }
 
+        let notifications = document.getElementById('show_message');
         //Function for displaying toast notifications. pass in error for mode param if you want to show an error.
         function notify(message, mode, behavior, sound) {
-            let banner = document.getElementById('show_message'),
-                back;
-            if (mode === 'error') {
-                banner.querySelector('#error_icon').classList.remove('hide-completely')
-                banner.querySelector('#done_icon').classList.add('hide-completely')
-            }
-            else {
-                banner.querySelector('#error_icon').classList.add('hide-completely')
-                banner.querySelector('#done_icon').classList.remove('hide-completely')
-            }
 
-            banner.style.background = back;
-            banner.classList.add('no-transformations')
-            banner.classList.remove('hide')
-            banner.querySelector('#notification_text').textContent = message;
+            if (mode === 'error')
+                console.error(message)
+            else
+                console.log(message)
+            notifications.push(message, mode, behavior)
             if (navigator.onLine && sound) {
                 notificationSound.currentTime = 0;
                 notificationSound.play();
             }
-            banner.querySelector('#hide_banner_btn').onclick = function () {
-                banner.classList.add('hide')
-                banner.classList.remove('no-transformations')
-            }
-            clearTimeout(currentTimeout)
-            if (behavior === 'fixed') return;
-            currentTimeout = setTimeout(() => {
-                banner.classList.add('hide')
-                banner.classList.remove('no-transformations')
-            }, 4000)
         }
 
         // displays a popup for asking permission. Use this instead of JS confirm
@@ -1365,7 +2803,6 @@
                 })
                 popup.querySelector('#prompt_message').textContent = message;
                 popup.querySelector('.submit-btn').onclick = () => {
-                    hidePopup()
                     resolve(input.value);
                 }
                 popup.querySelector('.cancel-btn').onclick = () => {
@@ -1396,10 +2833,7 @@
             let toast = document.getElementById('textCopied'),
                 textToCopy = parent.querySelector('.copy').textContent;
             navigator.clipboard.writeText(textToCopy)
-            toast.classList.remove('hide');
-            setTimeout(() => {
-                toast.classList.add('hide');
-            }, 2000)
+            notify('Copied', 'success')
         }
 
         // prevents non numerical input on firefox 
@@ -1422,6 +2856,14 @@
                 preventNonNumericalInput(e);
             let parent = formElement.closest('.popup'),
                 submitBtn = parent.querySelector("button[type='submit']");
+            if (!submitBtn) return;
+            if (formElement.hasAttribute('floId')) {
+                if (floCrypto.validateAddr(formElement.value)) {
+                    submitBtn.disabled = false;
+                } else {
+                    submitBtn.disabled = true;
+                }
+            }
             if (areInputsEmpty(parent))
                 submitBtn.disabled = false;
             else
@@ -1439,9 +2881,6 @@
             payingRequested = false,
             currentPaymentRequest;
         window.addEventListener('load', () => {
-            /*document.querySelectorAll('.popup:not(.hide)').forEach(popup => {
-                popupStack.push(popup.id)
-            })*/
             allForms.forEach((form) => {
                 form.addEventListener('input', (e) => {
                     if (e.target.closest('.input')) {
@@ -1453,7 +2892,8 @@
                 form.addEventListener('keyup', (e) => {
                     if (e.target.closest('.input')) {
                         if (e.key === 'Enter') {
-                            e.target.closest('.popup').querySelector("button[type='submit']").click();
+                            e.target.closest('.popup').querySelector("button[type='submit']")
+                                .click();
                         }
                     }
                 })
@@ -1473,7 +2913,8 @@
                 if (e.target.closest('.confirm-deposit-btn'))
                     if (await confirmation('Confirm this deposit request?')) {
                         let depositRequest = e.target.closest('.request'),
-                            status = await transfer_token(depositRequest.dataset.userFloId, depositRequest.dataset.txid)
+                            status = await transfer_token(depositRequest.dataset.userFloId,
+                                depositRequest.dataset.txid)
                         if (status) {
                             refresh_balance()
                             depositRequest.remove()
@@ -1486,7 +2927,8 @@
                 if (e.target.closest('.confirm-withdraw-btn'))
                     if (await confirmation('Confirm this withdraw request?')) {
                         let withdrawRequest = e.target.closest('.request'),
-                            status = await cash_sent(withdrawRequest.dataset.txid, withdrawRequest.dataset.userFloId, withdrawRequest.dataset.upi)
+                            status = await cash_sent(withdrawRequest.dataset.txid, withdrawRequest
+                                .dataset.userFloId, withdrawRequest.dataset.upi)
                         if (status) {
                             refresh_balance()
                             withdrawRequest.remove()
@@ -1498,7 +2940,9 @@
                 if (e.target.closest('.confirm-pay-btn'))
                     if (await confirmation('Confirm this pay request?')) {
                         let payRequest = e.target.closest('.request'),
-                            status = await pay_as_cashier(payRequest.dataset.sender, payRequest.dataset.receiverFloId, payRequest.dataset.txid, payRequest.dataset.amount)
+                            status = await pay_as_cashier(payRequest.dataset.sender, payRequest
+                                .dataset.receiverFloId, payRequest.dataset.txid, payRequest.dataset
+                                .amount)
                         if (status) {
                             refresh_balance()
                             payRequest.remove()
@@ -1515,8 +2959,11 @@
             // Function for reporting complain 
             document.getElementById('report_btn').addEventListener('click', async (e) => {
                 let customMsg = document.getElementById('complaint_field').value
-                if (await confirmation('It may take upto 12hrs to complete your request, are you sure to report this issue?')) {
-                    file_complaint(currentRequest.dataset.type, currentRequest.dataset.vectorClock, customMsg)
+                if (await confirmation(
+                        'It may take upto 12hrs to complete your request, are you sure to report this issue?'
+                        )) {
+                    file_complaint(currentRequest.dataset.type, currentRequest.dataset.vectorClock,
+                        customMsg)
                 }
             })
             // Function for requesting rupee
@@ -1545,14 +2992,16 @@
                 if (e.target.closest('.decline-request')) {
                     let parent = e.target.closest('.request'),
                         paymentRequestId = parent.dataset.paymentRequestId;
-                    if (await confirmation(`Do want to decline this request? This will remove the request.`)) {
+                    if (await confirmation(
+                            `Do want to decline this request? This will remove the request.`)) {
                         payment_request_status(paymentRequestId, 'DECLINED')
                         e.target.closest('.request').remove()
                     }
                 }
             })
             document.getElementById('select_cashier').addEventListener('change', async function (e) {
-                await Promise.all([load_deposit_complaints(this.value), load_withdraw_complaints(this.value), load_pay_thru_cashier_complaints(this.value)])
+                await Promise.all([load_deposit_complaints(this.value), load_withdraw_complaints(
+                    this.value), load_pay_thru_cashier_complaints(this.value)])
             })
 
             document.getElementById('helpline_page').addEventListener('click', async e => {
@@ -1571,6 +3020,7 @@
 
         let allPages = document.querySelectorAll('.page'),
             allTabs = document.querySelectorAll('.navbar-item');
+
         function showPage(btn, page) {
             allPages.forEach((page) => {
                 page.classList.add('hide-completely')
@@ -1603,8 +3053,8 @@
         async function signOut() {
             if (await confirmation('Do you want to sign out?')) {
                 document.querySelector('main').classList.add('hide-completely')
-                document.querySelector('#navbar').classList.add('hide-completely')
-                document.querySelector('#main_header').classList.add('hide-completely')
+                document.getElementById('navbar').classList.add('hide-completely')
+                document.getElementById('main_header').classList.add('hide-completely')
                 floDapps.clearCredentials()
                 compactIDB.deleteDB().then((message) => {
                     delete token_app.master_configurations;
@@ -1615,628 +3065,6 @@
                 })
             }
         }
-        // sm-select
-        const smSelect = document.createElement('template')
-        smSelect.innerHTML = `
-        <style>     
-            *{
-                padding: 0;
-                margin: 0;
-                box-sizing: border-box;
-            } 
-            .icon {
-                fill: none;
-                height: 0.8rem;
-                width: 0.8rem;
-                stroke: rgba(var(--text), 0.7);
-                stroke-width: 6;
-                overflow: visible;
-                stroke-linecap: round;
-                stroke-linejoin: round;
-            }      
-            :host{
-                display: inline-flex;
-            }
-            .hide{
-                opacity: 0;
-                pointer-events: none;
-            }
-            .sm-select{
-                position: relative;
-                display: flex;
-                flex-direction: column;
-                cursor: pointer;
-                width: 100%;
-            }
-            .option-text{
-                overflow: hidden;
-                text-overflow: ellipsis;
-                white-space: nowrap;
-            }
-            .selection{
-                border-radius: 0.2rem;
-                display: flex;
-                padding: 0.4rem 0.7rem;
-                background: rgba(var(--text), 0.1);
-                align-items: center;
-                justify-content: space-between;
-                outline: none;
-            }
-            .icon{
-                margin-left: 1rem;
-            }
-            .options{
-                overflow: hidden auto;
-                margin-top: 0.5rem;
-                position: absolute;
-                grid-area: options;
-                display: flex;
-                flex-direction: column;
-                top: 100%;
-                right: 0;
-                min-width: 100%;
-                transform: translateY(-0.5rem);
-                padding: 0.5rem 0;
-                background: rgba(var(--foreground), 1);
-                transition: opacity 0.3s, transform 0.3s;
-                border: solid 1px rgba(var(--text), 0.2);
-                border-radius: 0.2rem;
-                z-index: 2;
-            }
-            .rotate{
-                transform: rotate(-180deg)
-            }
-            .no-transformations{
-                transform: none;
-            }
-        </style>
-        <div class="sm-select">
-            <div class="selection" tabindex="0">
-                <div class="option-text"></div>
-                <svg class="icon toggle" viewBox="0 0 64 64">
-                    <polyline points="63.65 15.99 32 47.66 0.35 15.99"/>
-                </svg>
-            </div>
-            <div class="options hide">
-                <slot></slot> 
-            </div>
-        </div>`;
-        customElements.define('sm-select', class extends HTMLElement {
-            constructor() {
-                super()
-                this.attachShadow({ mode: 'open' }).append(smSelect.content.cloneNode(true))
-            }
-            static get observedAttributes() {
-                return ['value']
-            }
-            get value() {
-                return this.getAttribute('value')
-            }
-            set value(val) {
-                this.setAttribute('value', val)
-            }
-            connectedCallback() {
-                let optionList = this.shadowRoot.querySelector('.options'),
-                    chevron = this.shadowRoot.querySelector('.toggle'),
-                    slot = this.shadowRoot.querySelector('.options slot'),
-                    currentOption;
-                this.addEventListener('click', e => {
-                    chevron.classList.toggle('rotate')
-                    optionList.classList.toggle('hide')
-                    optionList.classList.toggle('no-transformations')
-                })
-                this.addEventListener('optionSelected', e => {
-                    if (currentOption !== e.detail.value) {
-                        this.setAttribute('value', e.detail.value)
-                        this.shadowRoot.querySelector('.option-text').textContent = e.detail.text;
-                        this.dispatchEvent(new CustomEvent('change', {
-                            bubbles: true,
-                            composed: true
-                        }))
-                        currentOption = e.detail.value;
-                    }
-                })
-                slot.addEventListener('slotchange', e => {
-                    let firstElement = slot.assignedElements()[0];
-                    currentOption = firstElement.getAttribute('value');
-                    this.setAttribute('value', firstElement.getAttribute('value'))
-                    this.shadowRoot.querySelector('.option-text').textContent = firstElement.textContent
-                });
-                document.addEventListener('mousedown', e => {
-                    if (!this.contains(e.target)) {
-                        chevron.classList.remove('rotate')
-                        optionList.classList.add('hide')
-                        optionList.classList.remove('no-transformations')
-                    }
-                })
-            }
-        })
-
-        // sm-option
-        const smOption = document.createElement('template')
-        smOption.innerHTML = `
-        <style>     
-            *{
-                padding: 0;
-                margin: 0;
-                box-sizing: border-box;
-            }     
-            :host{
-                display: flex;
-            }
-            .sm-option{
-                width: 100%;
-                padding: 0.6rem 0.8rem;
-                cursor: pointer;
-                overflow-wrap: break-word;
-                outline: none;
-            }
-            .sm-option:hover{
-                background: rgba(var(--text), 0.1);
-            }
-        </style>
-        <div class="sm-option" tabindex="0">
-            <slot></slot> 
-        </div>`;
-        customElements.define('sm-option', class extends HTMLElement {
-            constructor() {
-                super()
-                this.attachShadow({ mode: 'open' }).append(smOption.content.cloneNode(true))
-            }
-            connectedCallback() {
-                this.addEventListener('click', e => {
-                    let optionSelected = new CustomEvent('optionSelected', {
-                        bubbles: true,
-                        composed: true,
-                        detail: {
-                            text: this.textContent,
-                            value: this.getAttribute('value')
-                        }
-                    })
-                    this.dispatchEvent(optionSelected)
-                })
-                if (this.hasAttribute('default')) {
-                    setTimeout(() => {
-                        let optionSelected = new CustomEvent('optionSelected', {
-                            bubbles: true,
-                            composed: true,
-                            detail: {
-                                text: this.textContent,
-                                value: this.getAttribute('value')
-                            }
-                        })
-                        this.dispatchEvent(optionSelected)
-                    }, 0);
-                }
-            }
-        })
-        // tab-header
-
-        const smTabs = document.createElement('template')
-        smTabs.innerHTML = `
-<style>
-*{
-    padding: 0;
-    margin: 0;
-    box-sizing: border-box;
-} 
-:host{
-    display: flex;
-}
-.tabs{
-    display: flex;
-    flex-direction: column;
-    position: relative;
-    width: 100%;
-}
-.tab-header{
-    position: relative;
-    overflow: auto hidden;
-    max-width: 100%;
-    border-bottom: solid 1px rgba(var(--text), .2);
-    scrollbar-width: 0;
-    margin-bottom: 1rem;
-}
-.tab-header::-webkit-scrollbar-track {
-    -webkit-box-shadow: none !important;
-    background-color: transparent !important;
-}
-
-.tab-header::-webkit-scrollbar {
-  height: 0;
-  background-color: transparent;
-}
-
-.indicator{
-    position: absolute;
-    left: 0;
-    bottom: 0;
-    height: 0.12rem;
-    background: var(--primary-color);
-}
-slot[name="tab"]{
-    display: grid;
-    grid-auto-flow: column;
-    grid-auto-columns: max-content;
-}
-:host([type="tab"]) .indicator{
-    height: 100%;
-    border-radius: 0.2rem
-}
-:host([type="tab"]) .tab-header{
-    border-bottom: none; 
-}
-:host([type="tab"]) slot[name="tab"]{
-    border-radius: 0.2rem;
-    grid-auto-columns: 1fr;
-    border-bottom: none;
-}
-.transition{
-    transition: transform 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86), width 0.4s;
-}
-.hide-completely{
-    display: none;
-}
-:host([type="tab"]) slot[name="tab"]::slotted(.active){
-    color: rgba(var(--foreground), 1);
-}
-slot[name="tab"]::slotted(.active){
-    color: var(--primary-color);
-}
-</style>
-<div class="tabs">
-    <div class="tab-header">
-        <slot name="tab">Nothing to see here</slot>
-        <div class="indicator"></div>
-    </div>
-    <slot name="panel">Nothing to see here</slot>
-</div>
-`;
-
-        customElements.define('sm-tabs', class extends HTMLElement {
-            constructor() {
-                super()
-                this.attachShadow({ mode: 'open' }).append(smTabs.content.cloneNode(true))
-                this.indicator = this.shadowRoot.querySelector('.indicator');
-                this.tabSlot = this.shadowRoot.querySelector('slot[name="tab"]');
-                this.panelSlot = this.shadowRoot.querySelector('slot[name="panel"]');
-                this.tabHeader = this.shadowRoot.querySelector('.tab-header');
-            }
-            connectedCallback() {
-
-                //animations
-                let flyInLeft = [
-                    {
-                        opacity: 0,
-                        transform: 'translateX(-1rem)'
-                    },
-                    {
-                        opacity: 1,
-                        transform: 'none'
-                    }
-                ];
-                let flyInRight = [
-                    {
-                        opacity: 0,
-                        transform: 'translateX(1rem)'
-                    },
-                    {
-                        opacity: 1,
-                        transform: 'none'
-                    }
-                ]
-                let flyOutLeft = [
-                    {
-                        opacity: 1,
-                        transform: 'none'
-                    },
-                    {
-                        opacity: 0,
-                        transform: 'translateX(-1rem)'
-                    }
-                ]
-                let flyOutRight = [
-                    {
-                        opacity: 1,
-                        transform: 'none'
-                    },
-                    {
-                        opacity: 0,
-                        transform: 'translateX(1rem)'
-                    }
-                ]
-                let animationOptions = {
-                    duration: 300,
-                    fill: 'forwards',
-                    easing: 'ease'
-                }
-                this.prevTab
-                this.shadowRoot.querySelector('slot[name="panel"]').addEventListener('slotchange', () => {
-                    this.shadowRoot.querySelector('slot[name="panel"]').assignedElements().forEach((panel, index) => {
-                        panel.classList.add('hide-completely')
-                    })
-                })
-                this.shadowRoot.querySelector('slot[name="tab"]').addEventListener('slotchange', () => {
-                    this.shadowRoot.querySelector('slot[name="tab"]').assignedElements().forEach((panel, index) => {
-                        panel.setAttribute('rank', index + 1)
-                    })
-                })
-                this.addEventListener('switchTab', e => {
-                    if (e.target === this.prevTab)
-                        return
-                    if (this.prevTab)
-                        this.prevTab.classList.remove('active')
-                    e.target.classList.add('active')
-
-                    if (this.prevTab) {
-                        let targetBody = e.target.nextElementSibling,
-                            currentBody = this.prevTab.nextElementSibling;
-
-                        if (this.prevTab.getAttribute('rank') < e.target.getAttribute('rank')) {
-                            if (currentBody && !targetBody)
-                                currentBody.animate(flyOutLeft, animationOptions).onfinish = () => {
-                                    currentBody.classList.add('hide-completely')
-                                }
-                            else if (targetBody && !currentBody) {
-                                targetBody.classList.remove('hide-completely')
-                                targetBody.animate(flyInRight, animationOptions)
-                            }
-                            else if (currentBody && targetBody) {
-                                currentBody.animate(flyOutLeft, animationOptions).onfinish = () => {
-                                    currentBody.classList.add('hide-completely')
-                                    targetBody.classList.remove('hide-completely')
-                                    targetBody.animate(flyInRight, animationOptions)
-                                }
-                            }
-                        } else {
-                            if (currentBody && !targetBody)
-                                currentBody.animate(flyOutRight, animationOptions).onfinish = () => {
-                                    currentBody.classList.add('hide-completely')
-                                }
-                            else if (targetBody && !currentBody) {
-                                targetBody.classList.remove('hide-completely')
-                                targetBody.animate(flyInLeft, animationOptions)
-                            }
-                            else if (currentBody && targetBody) {
-                                currentBody.animate(flyOutRight, animationOptions).onfinish = () => {
-                                    currentBody.classList.add('hide-completely')
-                                    targetBody.classList.remove('hide-completely')
-                                    targetBody.animate(flyInLeft, animationOptions)
-                                }
-                            }
-                        }
-                    } else {
-                        e.target.nextElementSibling.classList.remove('hide-completely')
-                    }
-                    e.target.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' })
-                    this.indicator.setAttribute('style', `width: ${e.target.getBoundingClientRect().width}px; transform: translateX(${e.target.getBoundingClientRect().left - e.target.parentNode.getBoundingClientRect().left + this.tabHeader.scrollLeft}px)`)
-                    this.prevTab = e.target;
-                })
-                let observer = new IntersectionObserver((entries) => {
-                    entries.forEach((entry) => {
-                        if (entry.isIntersecting) {
-                            let activeElement = this.tabSlot.assignedElements().filter(element => {
-                                if (element.classList.contains('active'))
-                                    return true
-                            })
-                            if (activeElement.length) {
-                                let tabDimensions = activeElement[0].getBoundingClientRect();
-                                this.indicator.setAttribute('style', `width: ${tabDimensions.width}px; transform: translateX(${tabDimensions.left - activeElement[0].parentNode.getBoundingClientRect().left + this.tabHeader.scrollLeft}px)`)
-                            }
-                            else {
-                                this.tabSlot.assignedElements()[0].classList.add('active')
-                                let tabDimensions = this.tabSlot.assignedElements()[0].getBoundingClientRect();
-                                this.indicator.setAttribute('style', `width: ${tabDimensions.width}px; transform: translateX(${tabDimensions.left - this.tabSlot.assignedElements()[0].parentNode.getBoundingClientRect().left + this.tabHeader.scrollLeft}px)`)
-                                this.prevTab = this.tabSlot.assignedElements()[0];
-                            }
-                            setTimeout(() => {
-                                this.indicator.classList.add('transition')
-                            }, 100);
-                        }
-                    })
-                },
-                    { threshold: 1.0 })
-                observer.observe(this.tabHeader)
-            }
-        })
-
-
-        // tab
-        const smTab = document.createElement('template')
-        smTab.innerHTML = `
-<style>
-*{
-    padding: 0;
-    margin: 0;
-    box-sizing: border-box;
-} 
-:host{
-    display: inline-flex;
-    z-index: 1;
-}
-.tab{
-    user-select: none;
-    justify-content: center;
-    cursor: pointer;
-    -webkit-tap-highlight-color: transparent;
-    white-space: nowrap;
-    padding: 0.6rem 0.8rem;
-    font-weight: 500;
-    word-spacing: 0.1em;
-    text-align: center;
-    transition: color 0.3s;
-    text-transform: capitalize;
-    font-family: var(--font-family);
-}
-</style>
-<div class="tab">
-    <slot></slot>
-</div>
-`;
-
-        customElements.define('sm-tab', class extends HTMLElement {
-            constructor() {
-                super()
-                this.shadow = this.attachShadow({ mode: 'open' }).append(smTab.content.cloneNode(true))
-            }
-            connectedCallback() {
-                let switchTab = new CustomEvent('switchTab', {
-                    bubbles: true,
-                    composed: true,
-                })
-                this.addEventListener('click', () => {
-                    this.dispatchEvent(switchTab)
-                })
-                if (this.hasAttribute('active')) {
-                    setTimeout(() => {
-                        this.dispatchEvent(switchTab)
-                    }, 0)
-                }
-            }
-        })
-
-        // sm-select
-        const smStripSelect = document.createElement('template')
-        smStripSelect.innerHTML = `
-        <style>     
-            *{
-                padding: 0;
-                margin: 0;
-                box-sizing: border-box;
-            }    
-            :host{
-                display: flex;
-            }
-            ::-webkit-scrollbar-track {
-                -webkit-box-shadow: none !important;
-                background-color: transparent !important;
-            }
-            ::-webkit-scrollbar {
-                height: 0;
-                background-color: transparent;
-            }
-            .sm-select{
-                position: relative;
-                display: grid;
-                gap: 0.5rem;
-                grid-auto-flow: column;
-                grid-auto-columns: max-content;
-                max-width: 100%;
-                overflow: auto hidden;
-                margin: 0.6rem 0;
-            }
-            slot::slotted(.active){
-                border-radius: 2rem;
-                opacity: 1;
-                background-color: rgba(var(--text), .16);  
-            }
-        </style>
-        <div class="sm-select">
-            <slot></slot> 
-        </div>`;
-        customElements.define('sm-strip-select', class extends HTMLElement {
-            constructor() {
-                super()
-                this.attachShadow({ mode: 'open' }).append(smStripSelect.content.cloneNode(true))
-            }
-            static get observedAttributes() {
-                return ['value']
-            }
-            get value() {
-                return this.getAttribute('value')
-            }
-            set value(val) {
-                this.setAttribute('value', val)
-            }
-            connectedCallback() {
-                let previousOption,
-                    slot = this.shadowRoot.querySelector('slot');
-                this.addEventListener('optionSelected', e => {
-                    if (previousOption === e.target) return;
-                    if (previousOption)
-                        previousOption.classList.remove('active')
-                    e.target.classList.add('active')
-                    e.target.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' })
-                    this.setAttribute('value', e.detail.value)
-                    this.dispatchEvent(new CustomEvent('change', {
-                        bubbles: true,
-                        composed: true
-                    }))
-                    previousOption = e.target;
-                })
-                slot.addEventListener('slotchange', e => {
-                    if (slot.assignedElements()[0]) {
-                        let firstElement = slot.assignedElements()[0];
-                        this.setAttribute('value', firstElement.getAttribute('value'))
-                        firstElement.classList.add('active')
-                        previousOption = firstElement;
-                    }
-                });
-            }
-        })
-
-        // sm-option
-        const smStripOption = document.createElement('template')
-        smStripOption.innerHTML = `
-        <style>     
-            *{
-                padding: 0;
-                margin: 0;
-                box-sizing: border-box;
-            }     
-            :host{
-                display: flex;
-            }
-            .sm-option{
-                padding: 0.6rem 1rem;
-                cursor: pointer;
-                overflow-wrap: break-word;
-                outline: none;
-                border-radius: 2rem;
-                text-transform: capitalize;
-                border: solid 1px rgba(var(--text), .16);
-                opacity: 0.9;
-            }
-            .sm-option:hover{
-                background: rgba(var(--text), 0.1);
-            }
-        </style>
-        <div class="sm-option" tabindex="0">
-            <slot></slot> 
-        </div>`;
-        customElements.define('sm-strip-option', class extends HTMLElement {
-            constructor() {
-                super()
-                this.attachShadow({ mode: 'open' }).append(smStripOption.content.cloneNode(true))
-            }
-            connectedCallback() {
-                this.addEventListener('click', e => {
-                    let optionSelected = new CustomEvent('optionSelected', {
-                        bubbles: true,
-                        composed: true,
-                        detail: {
-                            text: this.textContent,
-                            value: this.getAttribute('value')
-                        }
-                    })
-                    this.dispatchEvent(optionSelected)
-                })
-                if (this.hasAttribute('default')) {
-                    setTimeout(() => {
-                        let optionSelected = new CustomEvent('optionSelected', {
-                            bubbles: true,
-                            composed: true,
-                            detail: {
-                                text: this.textContent,
-                                value: this.getAttribute('value')
-                            }
-                        })
-                        this.dispatchEvent(optionSelected)
-                    }, 0);
-                }
-            }
-        })
-
     </script>
     <script id="init_lib">
         //All util libraries required for Standard operations (DO NOT EDIT ANY)
@@ -2288,11 +3116,11 @@ slot[name="tab"]::slotted(.active){
 
 
         /*!
-        * Crypto-JS v2.5.4  Crypto.js
-        * http://code.google.com/p/crypto-js/
-        * Copyright (c) 2009-2013, Jeff Mott. All rights reserved.
-        * http://code.google.com/p/crypto-js/wiki/License
-        */
+         * Crypto-JS v2.5.4  Crypto.js
+         * http://code.google.com/p/crypto-js/
+         * Copyright (c) 2009-2013, Jeff Mott. All rights reserved.
+         * http://code.google.com/p/crypto-js/wiki/License
+         */
         if (typeof Crypto == "undefined" || !Crypto.util) {
             (function () {
 
@@ -2388,7 +3216,8 @@ slot[name="tab"]::slotted(.active){
 
                         for (var bytes = [], i = 0, imod4 = 0; i < base64.length; imod4 = ++i % 4) {
                             if (imod4 == 0) continue;
-                            bytes.push(((base64map.indexOf(base64.charAt(i - 1)) & (Math.pow(2, -2 * imod4 + 8) - 1)) << (imod4 * 2)) |
+                            bytes.push(((base64map.indexOf(base64.charAt(i - 1)) & (Math.pow(2, -2 * imod4 +
+                                    8) - 1)) << (imod4 * 2)) |
                                 (base64map.indexOf(base64.charAt(i)) >>> (6 - imod4 * 2)));
                         }
 
@@ -2460,7 +3289,7 @@ slot[name="tab"]::slotted(.active){
                 var digestbytes = util.wordsToBytes(SHA1._sha1(message));
                 return options && options.asBytes ? digestbytes :
                     options && options.asString ? Binary.bytesToString(digestbytes) :
-                        util.bytesToHex(digestbytes);
+                    util.bytesToHex(digestbytes);
             };
 
             // The core
@@ -2501,9 +3330,9 @@ slot[name="tab"]::slotted(.active){
 
                         var t = ((H0 << 5) | (H0 >>> 27)) + H4 + (w[j] >>> 0) + (
                             j < 20 ? (H1 & H2 | ~H1 & H3) + 1518500249 :
-                                j < 40 ? (H1 ^ H2 ^ H3) + 1859775393 :
-                                    j < 60 ? (H1 & H2 | H1 & H3 | H2 & H3) - 1894007588 :
-                                        (H1 ^ H2 ^ H3) - 899497514);
+                            j < 40 ? (H1 ^ H2 ^ H3) + 1859775393 :
+                            j < 60 ? (H1 & H2 | H1 & H3 | H2 & H3) - 1894007588 :
+                            (H1 ^ H2 ^ H3) - 899497514);
 
                         H4 = H3;
                         H3 = H2;
@@ -2577,7 +3406,7 @@ slot[name="tab"]::slotted(.active){
 
                 return options && options.asBytes ? hmacbytes :
                     options && options.asString ? Binary.bytesToString(hmacbytes) :
-                        util.bytesToHex(hmacbytes);
+                    util.bytesToHex(hmacbytes);
 
             };
 
@@ -2650,8 +3479,8 @@ slot[name="tab"]::slotted(.active){
                         for (var b = b.replace(/[^A-Z0-9+\/]/ig, ""), a = [], c = 0, e = 0; c < b.length; e = ++c %
                             4) e != 0 && a.push(("ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/"
                                 .indexOf(b.charAt(c - 1)) & Math.pow(2, -2 * e + 8) - 1) << e * 2 |
-                                "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/".indexOf(b.charAt(
-                                    c)) >>> 6 - e * 2);
+                            "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/".indexOf(b.charAt(
+                                c)) >>> 6 - e * 2);
                         return a
                     }
                 },
@@ -2718,7 +3547,7 @@ slot[name="tab"]::slotted(.active){
                     for (h = 0; h < 64; h++) {
                         h < 16 ? d[h] = e[h + t] : (l = d[h - 15], j = d[h - 2], d[h] = ((l << 25 | l >>> 7) ^
                             (l << 14 | l >>> 18) ^ l >>> 3) + (d[h - 7] >>> 0) + ((j << 15 | j >>> 17) ^
-                                (j << 13 | j >>> 19) ^ j >>> 10) + (d[h - 16] >>> 0));
+                            (j << 13 | j >>> 19) ^ j >>> 10) + (d[h - 16] >>> 0));
                         j = f & g ^ f & m ^ g & m;
                         var u = (f << 30 | f >>> 2) ^ (f << 19 | f >>> 13) ^ (f << 10 | f >>> 22);
                         l = (s >>> 0) + ((i << 26 | i >>> 6) ^ (i << 21 | i >>> 11) ^ (i << 7 | i >>> 25)) +
@@ -2772,19 +3601,19 @@ slot[name="tab"]::slotted(.active){
 
 
         /*!
-        * Random number generator with ArcFour PRNG
-        *
-        * NOTE: For best results, put code like
-        * <body onclick='SecureRandom.seedTime();' onkeypress='SecureRandom.seedTime();'>
-        * in your main HTML document.
-        *
-        * Copyright Tom Wu, bitaddress.org  BSD License.
-        * http://www-cs-students.stanford.edu/~tjw/jsbn/LICENSE
-        */
+         * Random number generator with ArcFour PRNG
+         *
+         * NOTE: For best results, put code like
+         * <body onclick='SecureRandom.seedTime();' onkeypress='SecureRandom.seedTime();'>
+         * in your main HTML document.
+         *
+         * Copyright Tom Wu, bitaddress.org  BSD License.
+         * http://www-cs-students.stanford.edu/~tjw/jsbn/LICENSE
+         */
         (function () {
 
             // Constructor function of Global SecureRandom object
-            var sr = window.SecureRandom = function () { };
+            var sr = window.SecureRandom = function () {};
 
             // Properties
             sr.state;
@@ -2912,9 +3741,11 @@ slot[name="tab"]::slotted(.active){
                         window.crypto.getRandomValues(ua);
                         for (t = 0; t < sr.poolSize; ++t)
                             sr.pool[sr.pptr++] = ua[t];
-                    } catch (e) { alert(e); }
+                    } catch (e) {
+                        alert(e);
+                    }
                 }
-                while (sr.pptr < sr.poolSize) {  // extract some randomness from Math.random()
+                while (sr.pptr < sr.poolSize) { // extract some randomness from Math.random()
                     t = Math.floor(65536 * Math.random());
                     sr.pool[sr.pptr++] = t >>> 8;
                     sr.pool[sr.pptr++] = t & 255;
@@ -2935,11 +3766,13 @@ slot[name="tab"]::slotted(.active){
                 // browser plugin details: ~16.2 to ~21.8 bits
                 var pluginsStr = "";
                 for (var i = 0; i < navigator.plugins.length; i++) {
-                    pluginsStr += navigator.plugins[i].name + " " + navigator.plugins[i].filename + " " + navigator.plugins[i].description + " " + navigator.plugins[i].version + ", ";
+                    pluginsStr += navigator.plugins[i].name + " " + navigator.plugins[i].filename + " " + navigator
+                        .plugins[i].description + " " + navigator.plugins[i].version + ", ";
                 }
                 var mimeTypesStr = "";
                 for (var i = 0; i < navigator.mimeTypes.length; i++) {
-                    mimeTypesStr += navigator.mimeTypes[i].description + " " + navigator.mimeTypes[i].type + " " + navigator.mimeTypes[i].suffixes + ", ";
+                    mimeTypesStr += navigator.mimeTypes[i].description + " " + navigator.mimeTypes[i].type + " " +
+                        navigator.mimeTypes[i].suffixes + ", ";
                 }
                 entropyStr += pluginsStr + mimeTypesStr;
                 // cookies and storage: 1 bit
@@ -2951,7 +3784,9 @@ slot[name="tab"]::slotted(.active){
                 // location
                 entropyStr += window.location;
 
-                var entropyBytes = Crypto.SHA256(entropyStr, { asBytes: true });
+                var entropyBytes = Crypto.SHA256(entropyStr, {
+                    asBytes: true
+                });
                 for (var i = 0; i < entropyBytes.length; i++) {
                     sr.seedInt8(entropyBytes[i]);
                 }
@@ -3167,16 +4002,16 @@ slot[name="tab"]::slotted(.active){
         // Follows 'jsbn' on Github: https://github.com/jasondavies/jsbn
         // Review and Testing: https://github.com/cryptocoinjs/bigi/
         /*!
-        * Basic JavaScript BN library - subset useful for RSA encryption. v1.4
-        *
-        * Copyright (c) 2005  Tom Wu
-        * All Rights Reserved.
-        * BSD License
-        * http://www-cs-students.stanford.edu/~tjw/jsbn/LICENSE
-        *
-        * Copyright Stephan Thomas
-        * Copyright pointbiz
-        */
+         * Basic JavaScript BN library - subset useful for RSA encryption. v1.4
+         *
+         * Copyright (c) 2005  Tom Wu
+         * All Rights Reserved.
+         * BSD License
+         * http://www-cs-students.stanford.edu/~tjw/jsbn/LICENSE
+         *
+         * Copyright Stephan Thomas
+         * Copyright pointbiz
+         */
 
         (function () {
 
@@ -3188,7 +4023,7 @@ slot[name="tab"]::slotted(.active){
                 if (a != null)
                     if ("number" == typeof a) this.fromNumber(a, b, c);
                     else if (b == null && "string" != typeof a) this.fromString(a, 256);
-                    else this.fromString(a, b);
+                else this.fromString(a, b);
             };
 
             // Bits per digit
@@ -4462,11 +5297,11 @@ slot[name="tab"]::slotted(.active){
             BigInteger.valueOf = nbv;
 
             /**
-            * Returns a byte array representation of the big integer.
-            *
-            * This returns the absolute of the contained value in big endian
-            * form. A value of zero results in an empty array.
-            */
+             * Returns a byte array representation of the big integer.
+             *
+             * This returns the absolute of the contained value in big endian
+             * form. A value of zero results in an empty array.
+             */
             BigInteger.prototype.toByteArrayUnsigned = function () {
                 var ba = this.abs().toByteArray();
                 if (ba.length) {
@@ -4483,11 +5318,11 @@ slot[name="tab"]::slotted(.active){
             };
 
             /**
-            * Turns a byte array into a big integer.
-            *
-            * This function will interpret a byte array as a big integer in big
-            * endian notation and ignore leading zeros.
-            */
+             * Turns a byte array into a big integer.
+             *
+             * This function will interpret a byte array as a big integer in big
+             * endian notation and ignore leading zeros.
+             */
             BigInteger.fromByteArrayUnsigned = function (ba) {
                 if (!ba.length) {
                     return ba.valueOf(0);
@@ -4501,29 +5336,29 @@ slot[name="tab"]::slotted(.active){
             };
 
             /**
-            * Converts big integer to signed byte representation.
-            *
-            * The format for this value uses a the most significant bit as a sign
-            * bit. If the most significant bit is already occupied by the
-            * absolute value, an extra byte is prepended and the sign bit is set
-            * there.
-            *
-            * Examples:
-            *
-            *      0 =>     0x00
-            *      1 =>     0x01
-            *     -1 =>     0x81
-            *    127 =>     0x7f
-            *   -127 =>     0xff
-            *    128 =>   0x0080
-            *   -128 =>   0x8080
-            *    255 =>   0x00ff
-            *   -255 =>   0x80ff
-            *  16300 =>   0x3fac
-            * -16300 =>   0xbfac
-            *  62300 => 0x00f35c
-            * -62300 => 0x80f35c
-            */
+             * Converts big integer to signed byte representation.
+             *
+             * The format for this value uses a the most significant bit as a sign
+             * bit. If the most significant bit is already occupied by the
+             * absolute value, an extra byte is prepended and the sign bit is set
+             * there.
+             *
+             * Examples:
+             *
+             *      0 =>     0x00
+             *      1 =>     0x01
+             *     -1 =>     0x81
+             *    127 =>     0x7f
+             *   -127 =>     0xff
+             *    128 =>   0x0080
+             *   -128 =>   0x8080
+             *    255 =>   0x00ff
+             *   -255 =>   0x80ff
+             *  16300 =>   0x3fac
+             * -16300 =>   0xbfac
+             *  62300 => 0x00f35c
+             * -62300 => 0x80f35c
+             */
             BigInteger.prototype.toByteArraySigned = function () {
                 var val = this.abs().toByteArrayUnsigned();
                 var neg = this.compareTo(BigInteger.ZERO) < 0;
@@ -4544,10 +5379,10 @@ slot[name="tab"]::slotted(.active){
             };
 
             /**
-            * Parse a signed big integer byte representation.
-            *
-            * For details on the format please see BigInteger.toByteArraySigned.
-            */
+             * Parse a signed big integer byte representation.
+             *
+             * For details on the format please see BigInteger.toByteArraySigned.
+             */
             BigInteger.fromByteArraySigned = function (ba) {
                 // Check for negative value
                 if (ba[0] & 0x80) {
@@ -4624,7 +5459,8 @@ slot[name="tab"]::slotted(.active){
                 for (var i = 0; i < this.m.t; ++i) {
                     // faster way of calculating u0 = x[i]*mp mod DV
                     var j = x[i] & 0x7fff;
-                    var u0 = (j * this.mpl + (((j * this.mph + (x[i] >> 15) * this.mpl) & this.um) << 15)) & x.DM;
+                    var u0 = (j * this.mpl + (((j * this.mph + (x[i] >> 15) * this.mpl) & this.um) << 15)) & x
+                        .DM;
                     // use am to combine the multiply-shift-add into one call
                     j = i + this.m.t;
                     x[j] += this.m.am(0, u0, x, i, 0, this.m.t);
@@ -4654,7 +5490,7 @@ slot[name="tab"]::slotted(.active){
 
 
             // A "null" reducer
-            var NullExp = window.NullExp = function NullExp() { }
+            var NullExp = window.NullExp = function NullExp() {}
             NullExp.prototype.convert = function (x) {
                 return x;
             };
@@ -4745,7 +5581,7 @@ slot[name="tab"]::slotted(.active){
         (function () {
 
             // Constructor function of Global EllipticCurve object
-            var ec = window.EllipticCurve = function () { };
+            var ec = window.EllipticCurve = function () {};
 
             // ----------------
             // ECFieldElementFp constructor
@@ -4809,7 +5645,8 @@ slot[name="tab"]::slotted(.active){
                 // p mod 4 == 3
                 if (this.q.testBit(1)) {
                     // z = g^(u+1) + p, p = 4u + 3
-                    var z = new ec.FieldElementFp(this.q, this.x.modPow(this.q.shiftRight(2).add(BigInteger.ONE),
+                    var z = new ec.FieldElementFp(this.q, this.x.modPow(this.q.shiftRight(2).add(BigInteger
+                        .ONE),
                         this.q));
                     return z.square().equals(this) ? z : null;
                 }
@@ -4831,7 +5668,7 @@ slot[name="tab"]::slotted(.active){
                         P = new BigInteger(this.q.bitLength(), rand);
                     }
                     while (P.compareTo(this.q) >= 0 || !(P.multiply(P).subtract(fourQ).modPow(legendreExponent,
-                        this.q).equals(qMinusOne)));
+                            this.q).equals(qMinusOne)));
 
                     var result = ec.FieldElementFp.fastLucasSequence(this.q, P, Q, k);
 
@@ -4851,9 +5688,9 @@ slot[name="tab"]::slotted(.active){
                 return null;
             };
             /*!
-    * Crypto-JS 2.5.4 BlockModes.js
-    * contribution from Simon Greatrix
-    */
+             * Crypto-JS 2.5.4 BlockModes.js
+             * contribution from Simon Greatrix
+             */
 
             (function (C) {
 
@@ -4892,8 +5729,8 @@ slot[name="tab"]::slotted(.active){
 
                 // No-operation padding, used for stream ciphers
                 C_pad.NoPadding = {
-                    pad: function (cipher, message) { },
-                    unpad: function (cipher, message) { }
+                    pad: function (cipher, message) {},
+                    unpad: function (cipher, message) {}
                 };
 
                 // Zero Padding.
@@ -4937,7 +5774,8 @@ slot[name="tab"]::slotted(.active){
                             var b = message.pop();
                             if (b == 0x80) return;
                             if (b != 0x00) {
-                                throw new Error("ISO-7816 padding byte must be 0, not 0x" + b.toString(16) +
+                                throw new Error("ISO-7816 padding byte must be 0, not 0x" + b.toString(
+                                        16) +
                                     ". Wrong cipher specification or key used?");
                             }
                         }
@@ -5005,8 +5843,8 @@ slot[name="tab"]::slotted(.active){
                 var C_mode = C.mode = {};
 
                 /**
-                * Mode base "class".
-                */
+                 * Mode base "class".
+                 */
                 var Mode = C_mode.Mode = function (padding) {
                     if (padding) {
                         this._padding = padding;
@@ -5030,12 +5868,12 @@ slot[name="tab"]::slotted(.active){
 
 
                 /**
-                * Electronic Code Book mode.
-                * 
-                * ECB applies the cipher directly against each block of the input.
-                * 
-                * ECB does not require an initialization vector.
-                */
+                 * Electronic Code Book mode.
+                 * 
+                 * ECB applies the cipher directly against each block of the input.
+                 * 
+                 * ECB does not require an initialization vector.
+                 */
                 var ECB = C_mode.ECB = function () {
                     // Call parent constructor
                     Mode.apply(this, arguments);
@@ -5067,11 +5905,11 @@ slot[name="tab"]::slotted(.active){
 
 
                 /**
-                * Cipher block chaining
-                * 
-                * The first block is XORed with the IV. Subsequent blocks are XOR with the
-                * previous cipher output.
-                */
+                 * Cipher block chaining
+                 * 
+                 * The first block is XORed with the IV. Subsequent blocks are XOR with the
+                 * previous cipher output.
+                 */
                 var CBC = C_mode.CBC = function () {
                     // Call parent constructor
                     Mode.apply(this, arguments);
@@ -5121,14 +5959,14 @@ slot[name="tab"]::slotted(.active){
 
 
                 /**
-                * Cipher feed back
-                * 
-                * The cipher output is XORed with the plain text to produce the cipher output,
-                * which is then fed back into the cipher to produce a bit pattern to XOR the
-                * next block with.
-                * 
-                * This is a stream cipher mode and does not require padding.
-                */
+                 * Cipher feed back
+                 * 
+                 * The cipher output is XORed with the plain text to produce the cipher output,
+                 * which is then fed back into the cipher to produce a bit pattern to XOR the
+                 * next block with.
+                 * 
+                 * This is a stream cipher mode and does not require padding.
+                 */
                 var CFB = C_mode.CFB = function () {
                     // Call parent constructor
                     Mode.apply(this, arguments);
@@ -5173,13 +6011,13 @@ slot[name="tab"]::slotted(.active){
 
 
                 /**
-                * Output feed back
-                * 
-                * The cipher repeatedly encrypts its own output. The output is XORed with the
-                * plain text to produce the cipher text.
-                * 
-                * This is a stream cipher mode and does not require padding.
-                */
+                 * Output feed back
+                 * 
+                 * The cipher repeatedly encrypts its own output. The output is XORed with the
+                 * plain text to produce the cipher text.
+                 * 
+                 * This is a stream cipher mode and does not require padding.
+                 */
                 var OFB = C_mode.OFB = function () {
                     // Call parent constructor
                     Mode.apply(this, arguments);
@@ -5212,14 +6050,14 @@ slot[name="tab"]::slotted(.active){
                 OFB_prototype._doDecrypt = OFB_prototype._doEncrypt;
 
                 /**
-                * Counter
-                * @author Gergely Risko
-                *
-                * After every block the last 4 bytes of the IV is increased by one
-                * with carry and that IV is used for the next block.
-                *
-                * This is a stream cipher mode and does not require padding.
-                */
+                 * Counter
+                 * @author Gergely Risko
+                 *
+                 * After every block the last 4 bytes of the IV is increased by one
+                 * with carry and that IV is used for the next block.
+                 *
+                 * This is a stream cipher mode and does not require padding.
+                 */
                 var CTR = C_mode.CTR = function () {
                     // Call parent constructor
                     Mode.apply(this, arguments);
@@ -5265,11 +6103,11 @@ slot[name="tab"]::slotted(.active){
             })(Crypto);
 
             /*!
-        * Crypto-JS v2.5.4  PBKDF2.js
-        * http://code.google.com/p/crypto-js/
-        * Copyright (c) 2009-2013, Jeff Mott. All rights reserved.
-        * http://code.google.com/p/crypto-js/wiki/License
-        */
+             * Crypto-JS v2.5.4  PBKDF2.js
+             * http://code.google.com/p/crypto-js/
+             * Copyright (c) 2009-2013, Jeff Mott. All rights reserved.
+             * http://code.google.com/p/crypto-js/wiki/License
+             */
             (function () {
 
                 // Shortcuts
@@ -5315,33 +6153,33 @@ slot[name="tab"]::slotted(.active){
 
                     return options && options.asBytes ? derivedKeyBytes :
                         options && options.asString ? Binary.bytesToString(derivedKeyBytes) :
-                            util.bytesToHex(derivedKeyBytes);
+                        util.bytesToHex(derivedKeyBytes);
 
                 };
 
             })();
 
             /*
-                  * Copyright (c) 2010-2011 Intalio Pte, All Rights Reserved
-                  * 
-                  * Permission is hereby granted, free of charge, to any person obtaining a copy
-                  * of this software and associated documentation files (the "Software"), to deal
-                  * in the Software without restriction, including without limitation the rights
-                  * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-                  * copies of the Software, and to permit persons to whom the Software is
-                  * furnished to do so, subject to the following conditions:
-                  * 
-                  * The above copyright notice and this permission notice shall be included in
-                  * all copies or substantial portions of the Software.
-                  * 
-                  * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-                  * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-                  * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-                  * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-                  * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-                  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-                  * THE SOFTWARE.
-                  */
+             * Copyright (c) 2010-2011 Intalio Pte, All Rights Reserved
+             * 
+             * Permission is hereby granted, free of charge, to any person obtaining a copy
+             * of this software and associated documentation files (the "Software"), to deal
+             * in the Software without restriction, including without limitation the rights
+             * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+             * copies of the Software, and to permit persons to whom the Software is
+             * furnished to do so, subject to the following conditions:
+             * 
+             * The above copyright notice and this permission notice shall be included in
+             * all copies or substantial portions of the Software.
+             * 
+             * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+             * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+             * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+             * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+             * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+             * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+             * THE SOFTWARE.
+             */
             // https://github.com/cheongwy/node-scrypt-js
             (function () {
 
@@ -5350,11 +6188,11 @@ slot[name="tab"]::slotted(.active){
 
                 //function scrypt(byte[] passwd, byte[] salt, int N, int r, int p, int dkLen)
                 /*
-                * N = Cpu cost
-                * r = Memory cost
-                * p = parallelization cost
-                * 
-                */
+                 * N = Cpu cost
+                 * r = Memory cost
+                 * p = parallelization cost
+                 * 
+                 */
                 window.Crypto_scrypt = function (passwd, salt, N, r, p, dkLen, callback) {
                     if (N == 0 || (N & (N - 1)) != 0) throw Error("N must be > 0 and a power of 2");
 
@@ -5381,7 +6219,8 @@ slot[name="tab"]::slotted(.active){
                                         type: "text/javascript"
                                     });
                                 } catch (e) {
-                                    window.BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder ||
+                                    window.BlobBuilder = window.BlobBuilder || window
+                                        .WebKitBlobBuilder ||
                                         window.MozBlobBuilder ||
                                         window.MSBlobBuilder;
                                     blob = new BlobBuilder();
@@ -5698,11 +6537,11 @@ slot[name="tab"]::slotted(.active){
             })();
 
             /*!
-              * Crypto-JS v2.5.4  AES.js
-              * http://code.google.com/p/crypto-js/
-              * Copyright (c) 2009-2013, Jeff Mott. All rights reserved.
-              * http://code.google.com/p/crypto-js/wiki/License
-              */
+             * Crypto-JS v2.5.4  AES.js
+             * http://code.google.com/p/crypto-js/
+             * Copyright (c) 2009-2013, Jeff Mott. All rights reserved.
+             * http://code.google.com/p/crypto-js/wiki/License
+             */
             (function () {
 
                 // Shortcuts
@@ -5782,11 +6621,11 @@ slot[name="tab"]::slotted(.active){
 
                 // Inner state
                 var state = [
-                    [],
-                    [],
-                    [],
-                    []
-                ],
+                        [],
+                        [],
+                        [],
+                        []
+                    ],
                     keylength,
                     nrounds,
                     keyschedule;
@@ -5794,8 +6633,8 @@ slot[name="tab"]::slotted(.active){
                 var AES = C.AES = {
 
                     /**
-                    * Public API
-                    */
+                     * Public API
+                     */
 
                     encrypt: function (message, password, options) {
 
@@ -5812,8 +6651,8 @@ slot[name="tab"]::slotted(.active){
                             // Convert to bytes if message is a string
                             m = (
                                 message.constructor == String ?
-                                    UTF8.stringToBytes(message) :
-                                    message
+                                UTF8.stringToBytes(message) :
+                                message
                             ),
 
                             // Generate random IV
@@ -5822,12 +6661,12 @@ slot[name="tab"]::slotted(.active){
                             // Generate key
                             k = (
                                 password.constructor == String ?
-                                    // Derive key from pass-phrase
-                                    C.PBKDF2(password, iv, 32, {
-                                        asBytes: true
-                                    }) :
-                                    // else, assume byte array representing cryptographic key
-                                    password
+                                // Derive key from pass-phrase
+                                C.PBKDF2(password, iv, 32, {
+                                    asBytes: true
+                                }) :
+                                // else, assume byte array representing cryptographic key
+                                password
                             );
 
                         // Encrypt
@@ -5855,8 +6694,8 @@ slot[name="tab"]::slotted(.active){
                             // Convert to bytes if ciphertext is a string
                             c = (
                                 ciphertext.constructor == String ?
-                                    util.base64ToBytes(ciphertext) :
-                                    ciphertext
+                                util.base64ToBytes(ciphertext) :
+                                ciphertext
                             ),
 
                             // Separate IV and message
@@ -5865,12 +6704,12 @@ slot[name="tab"]::slotted(.active){
                             // Generate key
                             k = (
                                 password.constructor == String ?
-                                    // Derive key from pass-phrase
-                                    C.PBKDF2(password, iv, 32, {
-                                        asBytes: true
-                                    }) :
-                                    // else, assume byte array representing cryptographic key
-                                    password
+                                // Derive key from pass-phrase
+                                C.PBKDF2(password, iv, 32, {
+                                    asBytes: true
+                                }) :
+                                // else, assume byte array representing cryptographic key
+                                password
                             );
 
                         // Decrypt
@@ -5884,8 +6723,8 @@ slot[name="tab"]::slotted(.active){
 
 
                     /**
-                    * Package private methods and properties
-                    */
+                     * Package private methods and properties
+                     */
 
                     _blocksize: 4,
 
@@ -6045,8 +6884,8 @@ slot[name="tab"]::slotted(.active){
 
 
                     /**
-                    * Private methods
-                    */
+                     * Private methods
+                     */
 
                     _init: function (k) {
                         keylength = k.length / 4;
@@ -6202,12 +7041,14 @@ slot[name="tab"]::slotted(.active){
                 if (other.isInfinity()) return this.isInfinity();
                 var u, v;
                 // u = Y2 * Z1 - Y1 * Z2
-                u = other.y.toBigInteger().multiply(this.z).subtract(this.y.toBigInteger().multiply(other.z)).mod(
-                    this.curve.q);
+                u = other.y.toBigInteger().multiply(this.z).subtract(this.y.toBigInteger().multiply(other.z))
+                    .mod(
+                        this.curve.q);
                 if (!u.equals(BigInteger.ZERO)) return false;
                 // v = X2 * Z1 - X1 * Z2
-                v = other.x.toBigInteger().multiply(this.z).subtract(this.x.toBigInteger().multiply(other.z)).mod(
-                    this.curve.q);
+                v = other.x.toBigInteger().multiply(this.z).subtract(this.x.toBigInteger().multiply(other.z))
+                    .mod(
+                        this.curve.q);
                 return v.equals(BigInteger.ZERO);
             };
 
@@ -6251,10 +7092,12 @@ slot[name="tab"]::slotted(.active){
                 var zu2 = u.square().multiply(this.z);
 
                 // x3 = v * (z2 * (z1 * u^2 - 2 * x1 * v^2) - v^3)
-                var x3 = zu2.subtract(x1v2.shiftLeft(1)).multiply(b.z).subtract(v3).multiply(v).mod(this.curve.q);
+                var x3 = zu2.subtract(x1v2.shiftLeft(1)).multiply(b.z).subtract(v3).multiply(v).mod(this.curve
+                    .q);
                 // y3 = z2 * (3 * x1 * u * v^2 - y1 * v^3 - z1 * u^3) + u * v^3
-                var y3 = x1v2.multiply(THREE).multiply(u).subtract(y1.multiply(v3)).subtract(zu2.multiply(u)).multiply(
-                    b.z).add(u.multiply(v3)).mod(this.curve.q);
+                var y3 = x1v2.multiply(THREE).multiply(u).subtract(y1.multiply(v3)).subtract(zu2.multiply(u))
+                    .multiply(
+                        b.z).add(u.multiply(v3)).mod(this.curve.q);
                 // z3 = v^3 * z1 * z2
                 var z3 = v3.multiply(this.z).multiply(b.z).mod(this.curve.q);
 
@@ -6356,7 +7199,8 @@ slot[name="tab"]::slotted(.active){
             ec.PointFp.prototype.getEncoded = function (compressed) {
                 var x = this.getX().toBigInteger();
                 var y = this.getY().toBigInteger();
-                var len = 32; // integerToBytes will zero pad if integer is less than 32 bytes. 32 bytes length is required by the Bitcoin protocol.
+                var len =
+                32; // integerToBytes will zero pad if integer is less than 32 bytes. 32 bytes length is required by the Bitcoin protocol.
                 var enc = ec.integerToBytes(x, len);
 
                 // when compressed prepend byte depending if y point is even or odd
@@ -6368,7 +7212,8 @@ slot[name="tab"]::slotted(.active){
                     }
                 } else {
                     enc.unshift(0x04);
-                    enc = enc.concat(ec.integerToBytes(y, len)); // uncompressed public key appends the bytes of the y point
+                    enc = enc.concat(ec.integerToBytes(y,
+                    len)); // uncompressed public key appends the bytes of the y point
                 }
                 return enc;
             };
@@ -6471,7 +7316,8 @@ slot[name="tab"]::slotted(.active){
             };
 
             ec.PointFp.prototype.toString = function () {
-                return '(' + this.getX().toBigInteger().toString() + ',' + this.getY().toBigInteger().toString() +
+                return '(' + this.getX().toBigInteger().toString() + ',' + this.getY().toBigInteger()
+                .toString() +
                     ')';
             };
 
@@ -6688,7 +7534,7 @@ slot[name="tab"]::slotted(.active){
         //bitTrx.js
         (function () {
 
-            var bitjs = window.bitjs = function () { };
+            var bitjs = window.bitjs = function () {};
 
             /* public vars */
             bitjs.pub = 0x23; // flochange - changed the prefix to FLO Mainnet PublicKey Prefix 0x23
@@ -6832,7 +7678,8 @@ slot[name="tab"]::slotted(.active){
 
                 btrx.addflodata = function (txcomments) { // flochange - this whole function needs to be done
                     this.floData = txcomments;
-                    return this.floData; //flochange .. returning the txcomments -- check if the function return will assign
+                    return this
+                    .floData; //flochange .. returning the txcomments -- check if the function return will assign
                 }
 
 
@@ -7137,13 +7984,16 @@ slot[name="tab"]::slotted(.active){
                     } else if (floDataCount <= 1023) {
                         floDataCountAdjusted = (floDataCount - 253) + parseInt("0xfd00fd");
                         floDataCountStringAdjusted = floDataCountAdjusted.toString(16);
-                        floDataCountString = floDataCountStringAdjusted.substr(0, 2) + floDataCountStringAdjusted.substr(4, 2) + floDataCountStringAdjusted.substr(2, 2);
+                        floDataCountString = floDataCountStringAdjusted.substr(0, 2) +
+                            floDataCountStringAdjusted.substr(4, 2) + floDataCountStringAdjusted.substr(2,
+                                2);
                     } else {
                         floDataCountString = "Character Limit Exceeded";
                     }
 
 
-                    return Crypto.util.bytesToHex(buffer) + floDataCountString + flohex;    // flochange -- Addition of floDataCountString and floData in serialization
+                    return Crypto.util.bytesToHex(buffer) + floDataCountString +
+                    flohex; // flochange -- Addition of floDataCountString and floData in serialization
                 }
 
 
@@ -7297,13 +8147,13 @@ slot[name="tab"]::slotted(.active){
                 base: BigInteger.valueOf(58),
 
                 /**
-                * Convert a byte array to a base58-encoded string.
-                *
-                * Written by Mike Hearn for BitcoinJ.
-                *   Copyright (c) 2011 Google Inc.
-                *
-                * Ported to JavaScript by Stefan Thomas.
-                */
+                 * Convert a byte array to a base58-encoded string.
+                 *
+                 * Written by Mike Hearn for BitcoinJ.
+                 *   Copyright (c) 2011 Google Inc.
+                 *
+                 * Ported to JavaScript by Stefan Thomas.
+                 */
                 encode: function (input) {
                     var bi = BigInteger.fromByteArrayUnsigned(input);
                     var chars = [];
@@ -7326,13 +8176,13 @@ slot[name="tab"]::slotted(.active){
                 },
 
                 /**
-                * Convert a base58-encoded string to a byte array.
-                *
-                * Written by Mike Hearn for BitcoinJ.
-                *   Copyright (c) 2011 Google Inc.
-                *
-                * Ported to JavaScript by Stefan Thomas.
-                */
+                 * Convert a base58-encoded string to a byte array.
+                 *
+                 * Written by Mike Hearn for BitcoinJ.
+                 *   Copyright (c) 2011 Google Inc.
+                 *
+                 * Ported to JavaScript by Stefan Thomas.
+                 */
                 decode: function (input) {
                     var bi = BigInteger.valueOf(0);
                     var leadingZerosNum = 0;
@@ -7373,20 +8223,25 @@ slot[name="tab"]::slotted(.active){
             this.hash = bytes;
         };
 
-        Bitcoin.Address.networkVersion = 0x23; // (FLO mainnet 0x23, 35D), (Bitcoin Mainnet, 0x00, 0D) // *this has no effect *
+        Bitcoin.Address.networkVersion =
+        0x23; // (FLO mainnet 0x23, 35D), (Bitcoin Mainnet, 0x00, 0D) // *this has no effect *
 
         /**
-        * Serialize this object as a standard Bitcoin address.
-        *
-        * Returns the address as a base58-encoded string in the standardized format.
-        */
+         * Serialize this object as a standard Bitcoin address.
+         *
+         * Returns the address as a base58-encoded string in the standardized format.
+         */
         Bitcoin.Address.prototype.toString = function () {
             // Get a copy of the hash
             var hash = this.hash.slice(0);
 
             // Version
             hash.unshift(this.version);
-            var checksum = Crypto.SHA256(Crypto.SHA256(hash, { asBytes: true }), { asBytes: true });
+            var checksum = Crypto.SHA256(Crypto.SHA256(hash, {
+                asBytes: true
+            }), {
+                asBytes: true
+            });
             var bytes = hash.concat(checksum.slice(0, 4));
             return Bitcoin.Base58.encode(bytes);
         };
@@ -7396,12 +8251,16 @@ slot[name="tab"]::slotted(.active){
         };
 
         /**
-        * Parse a Bitcoin address contained in a string.
-        */
+         * Parse a Bitcoin address contained in a string.
+         */
         Bitcoin.Address.decodeString = function (string, version) {
             var bytes = Bitcoin.Base58.decode(string);
             var hash = bytes.slice(0, 21);
-            var checksum = Crypto.SHA256(Crypto.SHA256(hash, { asBytes: true }), { asBytes: true });
+            var checksum = Crypto.SHA256(Crypto.SHA256(hash, {
+                asBytes: true
+            }), {
+                asBytes: true
+            });
 
             if (checksum[0] != bytes[21] ||
                 checksum[1] != bytes[22] ||
@@ -7527,10 +8386,10 @@ slot[name="tab"]::slotted(.active){
                 },
 
                 /**
-                * Serialize a signature into DER format.
-                *
-                * Takes two BigIntegers representing r and s and returns a byte array.
-                */
+                 * Serialize a signature into DER format.
+                 *
+                 * Takes two BigIntegers representing r and s and returns a byte array.
+                 */
                 serializeSig: function (r, s) {
                     var rBa = r.toByteArraySigned();
                     var sBa = s.toByteArraySigned();
@@ -7551,15 +8410,15 @@ slot[name="tab"]::slotted(.active){
                 },
 
                 /**
-                * Parses a byte array containing a DER-encoded signature.
-                *
-                * This function will return an object of the form:
-                *
-                * {
-                *   r: BigInteger,
-                *   s: BigInteger
-                * }
-                */
+                 * Parses a byte array containing a DER-encoded signature.
+                 *
+                 * This function will return an object of the form:
+                 *
+                 * {
+                 *   r: BigInteger,
+                 *   s: BigInteger
+                 * }
+                 */
                 parseSig: function (sig) {
                     var cursor;
                     if (sig[0] != 0x30)
@@ -7613,13 +8472,13 @@ slot[name="tab"]::slotted(.active){
                 },
 
                 /**
-                * Recover a public key from a signature.
-                *
-                * See SEC 1: Elliptic Curve Cryptography, section 4.1.6, "Public
-                * Key Recovery Operation".
-                *
-                * http://www.secg.org/download/aid-780/sec1-v2.pdf
-                */
+                 * Recover a public key from a signature.
+                 *
+                 * See SEC 1: Elliptic Curve Cryptography, section 4.1.6, "Public
+                 * Key Recovery Operation".
+                 *
+                 * http://www.secg.org/download/aid-780/sec1-v2.pdf
+                 */
                 recoverPubKey: function (r, s, hash, i) {
                     // The recovery parameter i has two bits.
                     i = i & 3;
@@ -7681,16 +8540,16 @@ slot[name="tab"]::slotted(.active){
                 },
 
                 /**
-                * Calculate pubkey extraction parameter.
-                *
-                * When extracting a pubkey from a signature, we have to
-                * distinguish four different cases. Rather than putting this
-                * burden on the verifier, Bitcoin includes a 2-bit value with the
-                * signature.
-                *
-                * This function simply tries all four cases and returns the value
-                * that resulted in a successful pubkey recovery.
-                */
+                 * Calculate pubkey extraction parameter.
+                 *
+                 * When extracting a pubkey from a signature, we have to
+                 * distinguish four different cases. Rather than putting this
+                 * burden on the verifier, Bitcoin includes a 2-bit value with the
+                 * signature.
+                 *
+                 * This function simply tries all four cases and returns the value
+                 * that resulted in a successful pubkey recovery.
+                 */
                 calcPubkeyRecoveryParam: function (address, r, s, hash) {
                     for (var i = 0; i < 4; i++) {
                         try {
@@ -7698,7 +8557,7 @@ slot[name="tab"]::slotted(.active){
                             if (pubkey.getBitcoinAddress().toString() == address) {
                                 return i;
                             }
-                        } catch (e) { }
+                        } catch (e) {}
                     }
                     throw "Unable to find valid recovery factor";
                 }
@@ -7716,7 +8575,8 @@ slot[name="tab"]::slotted(.active){
                     // prevent duplicates from being added to the array
                     for (var index in this.keyArray) {
                         var currentItem = this.keyArray[index];
-                        if (currentItem != null && currentItem.priv != null && item.getBitcoinAddress() == currentItem.getBitcoinAddress()) {
+                        if (currentItem != null && currentItem.priv != null && item
+                        .getBitcoinAddress() == currentItem.getBitcoinAddress()) {
                             doAdd = false;
                             break;
                         }
@@ -7748,7 +8608,8 @@ slot[name="tab"]::slotted(.active){
                         var item = pool[index];
                         if (Bitcoin.Util.hasMethods(item, 'getBitcoinAddress', 'toString')) {
                             if (item != null) {
-                                keyPoolString += "\"" + item.getBitcoinAddress() + "\"" + ", \"" + item.toString("wif") + "\"\n";
+                                keyPoolString += "\"" + item.getBitcoinAddress() + "\"" + ", \"" + item
+                                    .toString("wif") + "\"\n";
                             }
                         }
                     }
@@ -7801,8 +8662,12 @@ slot[name="tab"]::slotted(.active){
                     try {
 
                         // This part is edited for FLO. FLO WIF are always compressed WIF. FLO WIF (private key) starts with R for mainnet and c for testnet.
-                        if (((floGlobals.blockchain == "FLO") && /^R[123456789ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz]{51}$/.test(input)) ||
-                            ((floGlobals.blockchain == "FLO_TEST") && /^c[123456789ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz]{51}$/.test(input))) {
+                        if (((floGlobals.blockchain == "FLO") &&
+                                /^R[123456789ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz]{51}$/.test(
+                                    input)) ||
+                            ((floGlobals.blockchain == "FLO_TEST") &&
+                                /^c[123456789ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz]{51}$/.test(
+                                    input))) {
                             bytes = ECKey.decodeCompressedWalletImportFormat(input);
                             this.compressed = true;
                         } else if (ECKey.isHexFormat(input)) {
@@ -7838,15 +8703,19 @@ slot[name="tab"]::slotted(.active){
                     }
                 }
 
-                this.compressed = (this.compressed == undefined) ? !!ECKey.compressByDefault : this.compressed;
+                this.compressed = (this.compressed == undefined) ? !!ECKey.compressByDefault : this
+                    .compressed;
                 try {
                     // check not zero
-                    if (this.priv != null && BigInteger.ZERO.compareTo(this.priv) == 0) this.setError("Error: BigInteger equal to zero.");
+                    if (this.priv != null && BigInteger.ZERO.compareTo(this.priv) == 0) this.setError(
+                        "Error: BigInteger equal to zero.");
                     // valid range [0x1, 0xFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFEBAAEDCE6AF48A03BBFD25E8CD0364140])
-                    var hexKeyRangeLimit = "FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFEBAAEDCE6AF48A03BBFD25E8CD0364140";
+                    var hexKeyRangeLimit =
+                        "FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFEBAAEDCE6AF48A03BBFD25E8CD0364140";
                     var rangeLimitBytes = Crypto.util.hexToBytes(hexKeyRangeLimit);
                     var limitBigInt = BigInteger.fromByteArrayUnsigned(rangeLimitBytes);
-                    if (this.priv != null && limitBigInt.compareTo(this.priv) < 0) this.setError("Error: BigInteger outside of curve range.")
+                    if (this.priv != null && limitBigInt.compareTo(this.priv) < 0) this.setError(
+                        "Error: BigInteger outside of curve range.")
 
                     if (this.priv != null) {
                         KeyPool.push(this);
@@ -7862,13 +8731,13 @@ slot[name="tab"]::slotted(.active){
                 ECKey.privateKeyPrefix = 0xEF; //FLO testnet
 
             /**
-            * Whether public keys should be returned compressed by default.
-            */
+             * Whether public keys should be returned compressed by default.
+             */
             ECKey.compressByDefault = false;
 
             /**
-            * Set whether the public key should be returned compressed or not.
-            */
+             * Set whether the public key should be returned compressed or not.
+             */
             ECKey.prototype.setError = function (err) {
                 this.error = err;
                 this.priv = null;
@@ -7876,8 +8745,8 @@ slot[name="tab"]::slotted(.active){
             };
 
             /**
-            * Set whether the public key should be returned compressed or not.
-            */
+             * Set whether the public key should be returned compressed or not.
+             */
             ECKey.prototype.setCompressed = function (v) {
                 this.compressed = !!v;
                 if (this.pubPoint) this.pubPoint.compressed = this.compressed;
@@ -7885,8 +8754,8 @@ slot[name="tab"]::slotted(.active){
             };
 
             /*
-            * Return public key as a byte array in DER encoding
-            */
+             * Return public key as a byte array in DER encoding
+             */
             ECKey.prototype.getPub = function () {
                 if (this.compressed) {
                     if (this.pubComp) return this.pubComp;
@@ -7898,8 +8767,8 @@ slot[name="tab"]::slotted(.active){
             };
 
             /**
-            * Return public point as ECPoint object.
-            */
+             * Return public point as ECPoint object.
+             */
             ECKey.prototype.getPubPoint = function () {
                 if (!this.pubPoint) {
                     this.pubPoint = ecparams.getG().multiply(this.priv);
@@ -7911,19 +8780,21 @@ slot[name="tab"]::slotted(.active){
             ECKey.prototype.getPubKeyHex = function () {
                 if (this.compressed) {
                     if (this.pubKeyHexComp) return this.pubKeyHexComp;
-                    return this.pubKeyHexComp = Crypto.util.bytesToHex(this.getPub()).toString().toUpperCase();
+                    return this.pubKeyHexComp = Crypto.util.bytesToHex(this.getPub()).toString()
+                        .toUpperCase();
                 } else {
                     if (this.pubKeyHexUncomp) return this.pubKeyHexUncomp;
-                    return this.pubKeyHexUncomp = Crypto.util.bytesToHex(this.getPub()).toString().toUpperCase();
+                    return this.pubKeyHexUncomp = Crypto.util.bytesToHex(this.getPub()).toString()
+                        .toUpperCase();
                 }
             };
 
             /**
-            * Get the pubKeyHash for this key.
-            *
-            * This is calculated as RIPE160(SHA256([encoded pubkey])) and returned as
-            * a byte array.
-            */
+             * Get the pubKeyHash for this key.
+             *
+             * This is calculated as RIPE160(SHA256([encoded pubkey])) and returned as
+             * a byte array.
+             */
             ECKey.prototype.getPubKeyHash = function () {
                 if (this.compressed) {
                     if (this.pubKeyHashComp) return this.pubKeyHashComp;
@@ -7941,8 +8812,8 @@ slot[name="tab"]::slotted(.active){
             };
 
             /*
-            * Takes a public point as a hex string or byte array
-            */
+             * Takes a public point as a hex string or byte array
+             */
             ECKey.prototype.setPub = function (pub) {
                 // byte array
                 if (Bitcoin.Util.isArray(pub)) {
@@ -7960,7 +8831,11 @@ slot[name="tab"]::slotted(.active){
                 if (bytes == null) return "";
                 bytes.unshift(ECKey.privateKeyPrefix); // prepend 0x80 byte
                 if (this.compressed) bytes.push(0x01); // append 0x01 byte for compressed format
-                var checksum = Crypto.SHA256(Crypto.SHA256(bytes, { asBytes: true }), { asBytes: true });
+                var checksum = Crypto.SHA256(Crypto.SHA256(bytes, {
+                    asBytes: true
+                }), {
+                    asBytes: true
+                });
                 bytes = bytes.concat(checksum.slice(0, 4));
                 var privWif = Bitcoin.Base58.encode(bytes);
                 return privWif;
@@ -7968,7 +8843,8 @@ slot[name="tab"]::slotted(.active){
 
             // Private Key Hex Format
             ECKey.prototype.getBitcoinHexFormat = function () {
-                return Crypto.util.bytesToHex(this.getBitcoinPrivateKeyByteArray()).toString().toUpperCase();
+                return Crypto.util.bytesToHex(this.getBitcoinPrivateKeyByteArray()).toString()
+            .toUpperCase();
             };
 
             // Private Key Base64 Format
@@ -7987,14 +8863,14 @@ slot[name="tab"]::slotted(.active){
 
             ECKey.prototype.toString = function (format) {
                 format = format || "";
-                if (format.toString().toLowerCase() == "base64" || format.toString().toLowerCase() == "b64") {
+                if (format.toString().toLowerCase() == "base64" || format.toString().toLowerCase() ==
+                    "b64") {
                     return this.getBitcoinBase64Format();
                 }
                 // Wallet Import Format
                 else if (format.toString().toLowerCase() == "wif") {
                     return this.getBitcoinWalletImportFormat();
-                }
-                else {
+                } else {
                     return this.getBitcoinHexFormat();
                 }
             };
@@ -8008,12 +8884,16 @@ slot[name="tab"]::slotted(.active){
             };
 
             /**
-            * Parse a wallet import format private key contained in a string.
-            */
+             * Parse a wallet import format private key contained in a string.
+             */
             ECKey.decodeWalletImportFormat = function (privStr) {
                 var bytes = Bitcoin.Base58.decode(privStr);
                 var hash = bytes.slice(0, 33);
-                var checksum = Crypto.SHA256(Crypto.SHA256(hash, { asBytes: true }), { asBytes: true });
+                var checksum = Crypto.SHA256(Crypto.SHA256(hash, {
+                    asBytes: true
+                }), {
+                    asBytes: true
+                });
                 if (checksum[0] != bytes[33] ||
                     checksum[1] != bytes[34] ||
                     checksum[2] != bytes[35] ||
@@ -8029,12 +8909,16 @@ slot[name="tab"]::slotted(.active){
             };
 
             /**
-            * Parse a compressed wallet import format private key contained in a string.
-            */
+             * Parse a compressed wallet import format private key contained in a string.
+             */
             ECKey.decodeCompressedWalletImportFormat = function (privStr) {
                 var bytes = Bitcoin.Base58.decode(privStr);
                 var hash = bytes.slice(0, 34);
-                var checksum = Crypto.SHA256(Crypto.SHA256(hash, { asBytes: true }), { asBytes: true });
+                var checksum = Crypto.SHA256(Crypto.SHA256(hash, {
+                    asBytes: true
+                }), {
+                    asBytes: true
+                });
                 if (checksum[0] != bytes[34] ||
                     checksum[1] != bytes[35] ||
                     checksum[2] != bytes[36] ||
@@ -8074,7 +8958,8 @@ slot[name="tab"]::slotted(.active){
             // 44 characters
             ECKey.isBase64Format = function (key) {
                 key = key.toString();
-                return (/^[ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789=+\/]{44}$/.test(key));
+                return (/^[ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789=+\/]{44}$/.test(
+                    key));
             };
 
             // 99 characters, 1=1, if using dice convert 6 to 0
@@ -8086,12 +8971,18 @@ slot[name="tab"]::slotted(.active){
             // 22, 26 or 30 characters, always starts with an 'S'
             ECKey.isMiniFormat = function (key) {
                 key = key.toString();
-                var validChars22 = /^S[123456789ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz]{21}$/.test(key);
-                var validChars26 = /^S[123456789ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz]{25}$/.test(key);
-                var validChars30 = /^S[123456789ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz]{29}$/.test(key);
-                var testBytes = Crypto.SHA256(key + "?", { asBytes: true });
+                var validChars22 = /^S[123456789ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz]{21}$/
+                    .test(key);
+                var validChars26 = /^S[123456789ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz]{25}$/
+                    .test(key);
+                var validChars30 = /^S[123456789ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz]{29}$/
+                    .test(key);
+                var testBytes = Crypto.SHA256(key + "?", {
+                    asBytes: true
+                });
 
-                return ((testBytes[0] === 0x00 || testBytes[0] === 0x01) && (validChars22 || validChars26 || validChars30));
+                return ((testBytes[0] === 0x00 || testBytes[0] === 0x01) && (validChars22 || validChars26 ||
+                    validChars30));
             };
 
             return ECKey;
@@ -8100,14 +8991,14 @@ slot[name="tab"]::slotted(.active){
         // Bitcoin utility functions
         Bitcoin.Util = {
             /**
-            * Cross-browser compatibility version of Array.isArray.
-            */
+             * Cross-browser compatibility version of Array.isArray.
+             */
             isArray: Array.isArray || function (o) {
                 return Object.prototype.toString.call(o) === '[object Array]';
             },
             /**
-            * Create an array of a certain length filled with a specific value.
-            */
+             * Create an array of a certain length filled with a specific value.
+             */
             makeFilledArray: function (len, val) {
                 var array = [];
                 var i = 0;
@@ -8117,12 +9008,12 @@ slot[name="tab"]::slotted(.active){
                 return array;
             },
             /**
-            * Turn an integer into a "var_int".
-            *
-            * "var_int" is a variable length integer used by Bitcoin's binary format.
-            *
-            * Returns a byte array.
-            */
+             * Turn an integer into a "var_int".
+             *
+             * "var_int" is a variable length integer used by Bitcoin's binary format.
+             *
+             * Returns a byte array.
+             */
             numToVarInt: function (i) {
                 if (i < 0xfd) {
                     // unsigned char
@@ -8139,8 +9030,8 @@ slot[name="tab"]::slotted(.active){
                 }
             },
             /**
-            * Parse a Bitcoin value byte array, returning a BigInteger.
-            */
+             * Parse a Bitcoin value byte array, returning a BigInteger.
+             */
             valueToBigInt: function (valueBuffer) {
                 if (valueBuffer instanceof BigInteger) return valueBuffer;
 
@@ -8148,17 +9039,17 @@ slot[name="tab"]::slotted(.active){
                 return BigInteger.fromByteArrayUnsigned(valueBuffer);
             },
             /**
-            * Format a Bitcoin value as a string.
-            *
-            * Takes a BigInteger or byte-array and returns that amount of Bitcoins in a
-            * nice standard formatting.
-            *
-            * Examples:
-            * 12.3555
-            * 0.1234
-            * 900.99998888
-            * 34.00
-            */
+             * Format a Bitcoin value as a string.
+             *
+             * Takes a BigInteger or byte-array and returns that amount of Bitcoins in a
+             * nice standard formatting.
+             *
+             * Examples:
+             * 12.3555
+             * 0.1234
+             * 900.99998888
+             * 34.00
+             */
             formatValue: function (valueBuffer) {
                 var value = this.valueToBigInt(valueBuffer).toString();
                 var integerPart = value.length > 8 ? value.substr(0, value.length - 8) : '0';
@@ -8169,12 +9060,12 @@ slot[name="tab"]::slotted(.active){
                 return integerPart + "." + decimalPart;
             },
             /**
-            * Parse a floating point string as a Bitcoin value.
-            *
-            * Keep in mind that parsing user input is messy. You should always display
-            * the parsed value back to the user to make sure we understood his input
-            * correctly.
-            */
+             * Parse a floating point string as a Bitcoin value.
+             *
+             * Keep in mind that parsing user input is messy. You should always display
+             * the parsed value back to the user to make sure we understood his input
+             * correctly.
+             */
             parseValue: function (valueString) {
                 // TODO: Detect other number formats (e.g. comma as decimal separator)
                 var valueComp = valueString.split('.');
@@ -8188,21 +9079,30 @@ slot[name="tab"]::slotted(.active){
                 return value;
             },
             /**
-            * Calculate RIPEMD160(SHA256(data)).
-            *
-            * Takes an arbitrary byte array as inputs and returns the hash as a byte
-            * array.
-            */
+             * Calculate RIPEMD160(SHA256(data)).
+             *
+             * Takes an arbitrary byte array as inputs and returns the hash as a byte
+             * array.
+             */
             sha256ripe160: function (data) {
-                return ripemd160(Crypto.SHA256(data, { asBytes: true }), { asBytes: true });
+                return ripemd160(Crypto.SHA256(data, {
+                    asBytes: true
+                }), {
+                    asBytes: true
+                });
             },
             // double sha256
             dsha256: function (data) {
-                return Crypto.SHA256(Crypto.SHA256(data, { asBytes: true }), { asBytes: true });
+                return Crypto.SHA256(Crypto.SHA256(data, {
+                    asBytes: true
+                }), {
+                    asBytes: true
+                });
             },
             // duck typing method
-            hasMethods: function (obj /*, method list as strings */) {
-                var i = 1, methodName;
+            hasMethods: function (obj /*, method list as strings */ ) {
+                var i = 1,
+                    methodName;
                 while ((methodName = arguments[i++])) {
                     if (typeof obj[methodName] != 'function') {
                         return false;
@@ -8216,7 +9116,7 @@ slot[name="tab"]::slotted(.active){
         (function (ellipticCurveType) {
 
             //Defining Elliptic Encryption Object  
-            var ellipticEncryption = window.ellipticCurveEncryption = function () { };
+            var ellipticEncryption = window.ellipticCurveEncryption = function () {};
 
             ellipticEncryption.rng = new SecureRandom();
 
@@ -8391,7 +9291,7 @@ slot[name="tab"]::slotted(.active){
 
             function init(bits) {
                 if (bits && (typeof bits !== 'number' || bits % 1 !== 0 || bits < defaults.minBits || bits >
-                    defaults.maxBits)) {
+                        defaults.maxBits)) {
                     throw new Error('Number of bits must be an integer between ' + defaults.minBits + ' and ' +
                         defaults.maxBits + ', inclusive.')
                 }
@@ -8424,7 +9324,8 @@ slot[name="tab"]::slotted(.active){
             exports.init = init;
 
             function isInited() {
-                if (!config.bits || !config.size || !config.max || !config.logs || !config.exps || config.logs.length !==
+                if (!config.bits || !config.size || !config.max || !config.logs || !config.exps || config.logs
+                    .length !==
                     config.size || config.exps.length !== config.size) {
                     return false;
                 }
@@ -8454,7 +9355,7 @@ slot[name="tab"]::slotted(.active){
 
                 // node.js crypto.randomBytes()
                 if (typeof require === 'function' && (crypto = require('crypto')) && (randomBits = crypto[
-                    'randomBytes'])) {
+                        'randomBytes'])) {
                     return function (bits) {
                         var bytes = Math.ceil(bits / 8),
                             str = null;
@@ -8468,7 +9369,7 @@ slot[name="tab"]::slotted(.active){
 
                 // browsers with window.crypto.getRandomValues()
                 if (global['crypto'] && typeof global['crypto']['getRandomValues'] === 'function' && typeof global[
-                    'Uint32Array'] === 'function') {
+                        'Uint32Array'] === 'function') {
                     crypto = global['crypto'];
                     return function (bits) {
                         var elems = Math.ceil(bits / 32),
@@ -8524,8 +9425,9 @@ slot[name="tab"]::slotted(.active){
                 rng = rng || getRNG();
 
                 // test the RNG (5 times)
-                if (typeof rng !== 'function' || typeof rng(config.bits) !== 'string' || !parseInt(rng(config.bits),
-                    2) || rng(config.bits).length > config.bits || rng(config.bits).length < config.bits) {
+                if (typeof rng !== 'function' || typeof rng(config.bits) !== 'string' || !parseInt(rng(config
+                            .bits),
+                        2) || rng(config.bits).length > config.bits || rng(config.bits).length < config.bits) {
                     throw new Error(
                         "Random number generator is invalid. Supply an RNG of the form function(bits){} that returns a string containing 'bits' number of random 1's and 0's."
                     )
@@ -8577,12 +9479,14 @@ slot[name="tab"]::slotted(.active){
                     throw new Error('Secret must be a string.');
                 }
                 if (typeof numShares !== 'number' || numShares % 1 !== 0 || numShares < 2) {
-                    throw new Error('Number of shares must be an integer between 2 and 2^bits-1 (' + config.max +
+                    throw new Error('Number of shares must be an integer between 2 and 2^bits-1 (' + config
+                        .max +
                         '), inclusive.')
                 }
                 if (numShares > config.max) {
                     var neededBits = Math.ceil(Math.log(numShares + 1) / Math.LN2);
-                    throw new Error('Number of shares must be an integer between 2 and 2^bits-1 (' + config.max +
+                    throw new Error('Number of shares must be an integer between 2 and 2^bits-1 (' + config
+                        .max +
                         '), inclusive. To create ' + numShares + ' shares, use at least ' + neededBits +
                         ' bits.')
                 }
@@ -8604,7 +9508,8 @@ slot[name="tab"]::slotted(.active){
                     warn();
                 }
 
-                secret = '1' + hex2bin(secret); // append a 1 so that we can preserve the correct number of leading zeros in our secret
+                secret = '1' + hex2bin(
+                secret); // append a 1 so that we can preserve the correct number of leading zeros in our secret
                 secret = split(secret, padLength);
                 var x = new Array(numShares),
                     y = new Array(numShares);
@@ -8681,7 +9586,7 @@ slot[name="tab"]::slotted(.active){
 
                 var bits = parseInt(share[0], 36);
                 if (bits && (typeof bits !== 'number' || bits % 1 !== 0 || bits < defaults.minBits || bits >
-                    defaults.maxBits)) {
+                        defaults.maxBits)) {
                     throw new Error('Number of bits must be an integer between ' + defaults.minBits + ' and ' +
                         defaults.maxBits + ', inclusive.')
                 }
@@ -8798,15 +9703,19 @@ slot[name="tab"]::slotted(.active){
                         if (i === j) {
                             continue;
                         }
-                        if (at === x[j]) { // happens when computing a share that is in the list of shares used to compute it
-                            product = -1; // fix for a zero product term, after which the sum should be sum^0 = sum, not sum^1
+                        if (at === x[
+                            j]) { // happens when computing a share that is in the list of shares used to compute it
+                            product = -
+                            1; // fix for a zero product term, after which the sum should be sum^0 = sum, not sum^1
                             break;
                         }
-                        product = (product + config.logs[at ^ x[j]] - config.logs[x[i] ^ x[j]] + config.max /* to make sure it's not negative */) %
+                        product = (product + config.logs[at ^ x[j]] - config.logs[x[i] ^ x[j]] + config
+                                .max /* to make sure it's not negative */ ) %
                             config.max;
                     }
 
-                    sum = product === -1 ? sum : sum ^ config.exps[product]; // though exps[-1]= undefined and undefined ^ anything = anything in chrome, this behavior may not hold everywhere, so do the check
+                    sum = product === -1 ? sum : sum ^ config.exps[
+                    product]; // though exps[-1]= undefined and undefined ^ anything = anything in chrome, this behavior may not hold everywhere, so do the check
                 }
                 return sum;
             };
@@ -8877,7 +9786,8 @@ slot[name="tab"]::slotted(.active){
 
                 if (typeof bytesPerChar !== 'number' || bytesPerChar % 1 !== 0 || bytesPerChar < 1 ||
                     bytesPerChar > defaults.maxBytesPerChar) {
-                    throw new Error('Bytes per character must be an integer between 1 and ' + defaults.maxBytesPerChar +
+                    throw new Error('Bytes per character must be an integer between 1 and ' + defaults
+                        .maxBytesPerChar +
                         ', inclusive.')
                 }
 
@@ -8911,7 +9821,8 @@ slot[name="tab"]::slotted(.active){
 
                 if (typeof bytesPerChar !== 'number' || bytesPerChar % 1 !== 0 || bytesPerChar < 1 ||
                     bytesPerChar > defaults.maxBytesPerChar) {
-                    throw new Error('Bytes per character must be an integer between 1 and ' + defaults.maxBytesPerChar +
+                    throw new Error('Bytes per character must be an integer between 1 and ' + defaults
+                        .maxBytesPerChar +
                         ', inclusive.')
                 }
 
@@ -8943,7 +9854,9 @@ slot[name="tab"]::slotted(.active){
             const isDate = d => d instanceof Date;
             const isEmpty = o => Object.keys(o).length === 0;
             const isObject = o => o != null && typeof o === 'object';
-            const properObject = o => isObject(o) && !o.hasOwnProperty ? { ...o } : o;
+            const properObject = o => isObject(o) && !o.hasOwnProperty ? {
+                ...o
+            } : o;
 
 
             const getLargerArray = (l, r) => l.length > r.length ? l : r;
@@ -8963,7 +9876,9 @@ slot[name="tab"]::slotted(.active){
                             ...acc,
                             [key]: array.reduce((acc2, item, index) => {
                                 if (diff[key].hasOwnProperty(index)) {
-                                    acc2[index] = preserve(diff[key][index], leftArray[index], rightArray[index]); // diff recurse and check for nested arrays
+                                    acc2[index] = preserve(diff[key][index], leftArray[index],
+                                        rightArray[index]
+                                        ); // diff recurse and check for nested arrays
                                     return acc2;
                                 }
 
@@ -9000,9 +9915,13 @@ slot[name="tab"]::slotted(.active){
                     if (l.hasOwnProperty(key)) {
                         const difference = updatedDiff(l[key], r[key]);
 
-                        if (isObject(difference) && isEmpty(difference) && !isDate(difference)) return acc;
+                        if (isObject(difference) && isEmpty(difference) && !isDate(difference))
+                        return acc;
 
-                        return { ...acc, [key]: difference };
+                        return {
+                            ...acc,
+                            [key]: difference
+                        };
                     }
 
                     return acc;
@@ -9019,7 +9938,10 @@ slot[name="tab"]::slotted(.active){
                 const r = properObject(rhs);
 
                 const deletedValues = Object.keys(l).reduce((acc, key) => {
-                    return r.hasOwnProperty(key) ? acc : { ...acc, [key]: null };
+                    return r.hasOwnProperty(key) ? acc : {
+                        ...acc,
+                        [key]: null
+                    };
                 }, {});
 
                 if (isDate(l) || isDate(r)) {
@@ -9028,13 +9950,20 @@ slot[name="tab"]::slotted(.active){
                 }
 
                 return Object.keys(r).reduce((acc, key) => {
-                    if (!l.hasOwnProperty(key)) return { ...acc, [key]: r[key] }; // return added r key
+                    if (!l.hasOwnProperty(key)) return {
+                        ...acc,
+                        [key]: r[key]
+                    }; // return added r key
 
                     const difference = diff(l[key], r[key]);
 
-                    if (isObject(difference) && isEmpty(difference) && !isDate(difference)) return acc; // return no diff
+                    if (isObject(difference) && isEmpty(difference) && !isDate(difference))
+                return acc; // return no diff
 
-                    return { ...acc, [key]: difference }; // return updated key
+                    return {
+                        ...acc,
+                        [key]: difference
+                    }; // return updated key
                 }, deletedValues);
             };
 
@@ -9051,10 +9980,16 @@ slot[name="tab"]::slotted(.active){
 
                         if (isObject(difference) && isEmpty(difference)) return acc;
 
-                        return { ...acc, [key]: difference };
+                        return {
+                            ...acc,
+                            [key]: difference
+                        };
                     }
 
-                    return { ...acc, [key]: r[key] };
+                    return {
+                        ...acc,
+                        [key]: r[key]
+                    };
                 }, {});
             };
 
@@ -9068,7 +10003,10 @@ slot[name="tab"]::slotted(.active){
                 const r = properObject(rhs);
 
                 const deletedValues = Object.keys(l).reduce((acc, key) => {
-                    return r.hasOwnProperty(key) ? acc : { ...acc, [key]: null };
+                    return r.hasOwnProperty(key) ? acc : {
+                        ...acc,
+                        [key]: null
+                    };
                 }, {});
 
                 if (isDate(l) || isDate(r)) {
@@ -9094,18 +10032,26 @@ slot[name="tab"]::slotted(.active){
                             return acc; // return no diff
                         }
 
-                        return acc.slice(0, index).concat(rightItem).concat(acc.slice(index + 1)); // return updated key
+                        return acc.slice(0, index).concat(rightItem).concat(acc.slice(index +
+                        1)); // return updated key
                     }, deletedValues);
                 }
 
                 return Object.keys(r).reduce((acc, key) => {
-                    if (!l.hasOwnProperty(key)) return { ...acc, [key]: r[key] }; // return added r key
+                    if (!l.hasOwnProperty(key)) return {
+                        ...acc,
+                        [key]: r[key]
+                    }; // return added r key
 
                     const difference = diff(l[key], r[key]);
 
-                    if (isObject(difference) && isEmpty(difference) && !isDate(difference)) return acc; // return no diff
+                    if (isObject(difference) && isEmpty(difference) && !isDate(difference))
+                return acc; // return no diff
 
-                    return { ...acc, [key]: difference }; // return updated key
+                    return {
+                        ...acc,
+                        [key]: difference
+                    }; // return updated key
                 }, deletedValues);
             };
 
@@ -9121,10 +10067,16 @@ slot[name="tab"]::slotted(.active){
 
                         if (isObject(difference) && isEmpty(difference)) return acc;
 
-                        return { ...acc, [key]: difference };
+                        return {
+                            ...acc,
+                            [key]: difference
+                        };
                     }
 
-                    return { ...acc, [key]: null };
+                    return {
+                        ...acc,
+                        [key]: null
+                    };
                 }, {});
             };
 
@@ -9145,8 +10097,7 @@ slot[name="tab"]::slotted(.active){
                             // obj1[p] = [];
                             if (obj2[p].length < 1) {
                                 obj1[p] = obj2[p];
-                            }
-                            else {
+                            } else {
                                 obj1[p] = mergeRecursive(obj1[p], obj2[p]);
                             }
 
@@ -9184,8 +10135,7 @@ slot[name="tab"]::slotted(.active){
                         if (!Object.keys(value).length) {
                             delete obj[key]
                         }
-                    }
-                    else if (value === null) {
+                    } else if (value === null) {
                         // null, remove it
                         delete obj[key];
 
@@ -9270,7 +10220,8 @@ slot[name="tab"]::slotted(.active){
 
                 deriveSharedKeySender: function (receiverCompressedPublicKey, senderPrivateKey) {
                     try {
-                        let receiverPublicKeyString = this.getUncompressedPublicKey(receiverCompressedPublicKey);
+                        let receiverPublicKeyString = this.getUncompressedPublicKey(
+                        receiverCompressedPublicKey);
                         var senderDerivedKey = ellipticCurveEncryption.senderSharedKeyDerivation(
                             receiverPublicKeyString.x, receiverPublicKeyString.y, senderPrivateKey);
                         return senderDerivedKey;
@@ -9339,7 +10290,8 @@ slot[name="tab"]::slotted(.active){
             //Encrypt Data using public-key
             encryptData: function (data, receiverCompressedPublicKey) {
                 var senderECKeyData = this.util.getSenderPublicKeyString();
-                var senderDerivedKey = this.util.deriveSharedKeySender(receiverCompressedPublicKey, senderECKeyData
+                var senderDerivedKey = this.util.deriveSharedKeySender(receiverCompressedPublicKey,
+                    senderECKeyData
                     .privateKey);
                 let senderKey = senderDerivedKey.XValue + senderDerivedKey.YValue;
                 let secret = Crypto.AES.encrypt(data, senderKey);
@@ -9361,7 +10313,7 @@ slot[name="tab"]::slotted(.active){
 
                 var receiverDerivedKey = this.util.deriveReceiverSharedKey(data.senderPublicKeyString,
                     receiverECKeyData
-                        .privateKey);
+                    .privateKey);
 
                 let receiverKey = receiverDerivedKey.XValue + receiverDerivedKey.YValue;
                 let decryptMsg = Crypto.AES.decrypt(data.secret, receiverKey);
@@ -9646,7 +10598,8 @@ slot[name="tab"]::slotted(.active){
              * @param  {boolean} preserveRatio (optional) preserve ratio or equal contribution
              * @return {Promise}
              */
-            writeDataMultiple: function (senderPrivKeys, data, receivers = [floGlobals.adminID], preserveRatio = true) {
+            writeDataMultiple: function (senderPrivKeys, data, receivers = [floGlobals.adminID], preserveRatio =
+                true) {
                 return new Promise((resolve, reject) => {
                     if (!Array.isArray(senderPrivKeys))
                         return reject("Invalid senderPrivKeys: SenderPrivKeys must be Array")
@@ -9681,7 +10634,8 @@ slot[name="tab"]::slotted(.active){
             sendTxMultiple: function (senderPrivKeys, receivers, floData = '') {
                 return new Promise((resolve, reject) => {
 
-                    let senders = {}, preserveRatio;
+                    let senders = {},
+                        preserveRatio;
                     //check for argument validations
                     try {
                         let invalids = {
@@ -9690,7 +10644,8 @@ slot[name="tab"]::slotted(.active){
                             InvalidReceiverIDs: [],
                             InvalidReceiveAmountFor: []
                         }
-                        let inputVal = 0, outputVal = 0;
+                        let inputVal = 0,
+                            outputVal = 0;
                         //Validate sender privatekeys (and send amount if passed)
                         //conversion when only privateKeys are passed (preserveRatio mode)
                         if (Array.isArray(senderPrivKeys)) {
@@ -9699,7 +10654,8 @@ slot[name="tab"]::slotted(.active){
                                     if (!key)
                                         invalids.InvalidSenderPrivKeys.push(key);
                                     else {
-                                        let floID = floCrypto.getFloIDfromPubkeyHex(floCrypto.getPubKeyHex(key));
+                                        let floID = floCrypto.getFloIDfromPubkeyHex(floCrypto
+                                            .getPubKeyHex(key));
                                         senders[floID] = {
                                             wif: key
                                         }
@@ -9717,11 +10673,13 @@ slot[name="tab"]::slotted(.active){
                                     if (!key)
                                         invalids.InvalidSenderPrivKeys.push(key);
                                     else {
-                                        if (typeof senderPrivKeys[key] !== 'number' || senderPrivKeys[key] <= 0)
+                                        if (typeof senderPrivKeys[key] !== 'number' || senderPrivKeys[
+                                                key] <= 0)
                                             invalids.InvalidSenderAmountFor.push(key)
                                         else
                                             inputVal += senderPrivKeys[key];
-                                        let floID = floCrypto.getFloIDfromPubkeyHex(floCrypto.getPubKeyHex(key));
+                                        let floID = floCrypto.getFloIDfromPubkeyHex(floCrypto
+                                            .getPubKeyHex(key));
                                         senders[floID] = {
                                             wif: key,
                                             coins: senderPrivKeys[key]
@@ -9750,7 +10708,9 @@ slot[name="tab"]::slotted(.active){
                             return reject(invalids);
                         //Reject if given inputVal and outputVal are not equal
                         if (!preserveRatio && inputVal != outputVal)
-                            return reject(`Input Amount (${inputVal}) not equal to Output Amount (${outputVal})`)
+                            return reject(
+                                `Input Amount (${inputVal}) not equal to Output Amount (${outputVal})`
+                                )
                     } catch (error) {
                         return reject(error)
                     }
@@ -9769,12 +10729,16 @@ slot[name="tab"]::slotted(.active){
                         let insufficient = [];
                         for (let floID in senders) {
                             balance[floID] = parseFloat(results.shift());
-                            if (isNaN(balance[floID]) || (preserveRatio && balance[floID] <= totalFee) || (!preserveRatio && balance[floID] < senders[floID].coins + dividedFee))
+                            if (isNaN(balance[floID]) || (preserveRatio && balance[floID] <=
+                                    totalFee) || (!preserveRatio && balance[floID] < senders[
+                                    floID].coins + dividedFee))
                                 insufficient.push(floID)
                             totalBalance += balance[floID];
                         }
                         if (insufficient.length)
-                            return reject({ InsufficientBalance: insufficient })
+                            return reject({
+                                InsufficientBalance: insufficient
+                            })
                         //Calculate totalSentAmount and check if totalBalance is sufficient
                         let totalSendAmt = totalFee;
                         for (floID in receivers)
@@ -9801,7 +10765,8 @@ slot[name="tab"]::slotted(.active){
                                 for (let i = utxos.length - 1;
                                     (i >= 0) && (utxoAmt < sendAmt); i--) {
                                     if (utxos[i].confirmations) {
-                                        trx.addinput(utxos[i].txid, utxos[i].vout, utxos[i]
+                                        trx.addinput(utxos[i].txid, utxos[i].vout,
+                                            utxos[i]
                                             .scriptPubKey)
                                         wifSeq.push(wif);
                                         utxoAmt += utxos[i].amount;
@@ -9865,7 +10830,8 @@ slot[name="tab"]::slotted(.active){
             readAllTxs: function (addr) {
                 return new Promise((resolve, reject) => {
                     this.promisedAPI(`api/addrs/${addr}/txs?from=0&to=1`).then(response => {
-                        this.promisedAPI(`api/addrs/${addr}/txs?from=0&to=${response.totalItems}0`)
+                        this.promisedAPI(
+                                `api/addrs/${addr}/txs?from=0&to=${response.totalItems}0`)
                             .then(response => resolve(response.items))
                             .catch(error => reject(error));
                     }).catch(error => reject(error))
@@ -9887,33 +10853,37 @@ slot[name="tab"]::slotted(.active){
                 return new Promise((resolve, reject) => {
                     this.promisedAPI(`api/addrs/${addr}/txs?from=0&to=1`).then(response => {
                         var newItems = response.totalItems - options.ignoreOld;
-                        this.promisedAPI(`api/addrs/${addr}/txs?from=0&to=${newItems * 2}`).then(
-                            response => {
-                                if (options.limit <= 0)
-                                    options.limit = response.items.length;
-                                var filteredData = [];
-                                for (i = 0; i < (response.totalItems - options.ignoreOld) &&
-                                    filteredData.length < options.limit; i++) {
-                                    if (options.sentOnly && response.items[i].vin[0].addr !==
-                                        addr)
-                                        continue;
-                                    if (options.pattern && !response.items[i].floData
-                                        .startsWith(options.pattern, 0) && !response.items[i]
+                        this.promisedAPI(`api/addrs/${addr}/txs?from=0&to=${newItems * 2}`)
+                            .then(
+                                response => {
+                                    if (options.limit <= 0)
+                                        options.limit = response.items.length;
+                                    var filteredData = [];
+                                    for (i = 0; i < (response.totalItems - options.ignoreOld) &&
+                                        filteredData.length < options.limit; i++) {
+                                        if (options.sentOnly && response.items[i].vin[0]
+                                            .addr !==
+                                            addr)
+                                            continue;
+                                        if (options.pattern && !response.items[i].floData
+                                            .startsWith(options.pattern, 0) && !response.items[
+                                                i]
                                             .floData.startsWith(options.pattern, 2))
-                                        continue;
-                                    if (options.contains && !response.items[i].floData.includes(
-                                        options.contains))
-                                        continue;
-                                    if (options.filter && !options.filter(response.items[i]
-                                        .floData))
-                                        continue;
-                                    filteredData.push(response.items[i].floData);
-                                }
-                                resolve({
-                                    totalTxs: response.totalItems,
-                                    data: filteredData
-                                });
-                            }).catch(error => {
+                                            continue;
+                                        if (options.contains && !response.items[i].floData
+                                            .includes(
+                                                options.contains))
+                                            continue;
+                                        if (options.filter && !options.filter(response.items[i]
+                                                .floData))
+                                            continue;
+                                        filteredData.push(response.items[i].floData);
+                                    }
+                                    resolve({
+                                        totalTxs: response.totalItems,
+                                        data: filteredData
+                                    });
+                                }).catch(error => {
                                 reject(error);
                             });
                     }).catch(error => {
@@ -10587,11 +11557,12 @@ slot[name="tab"]::slotted(.active){
                         var db = event.target.result;
                         for (let obs in objectStores) {
                             var objectStore = db.createObjectStore(obs, objectStores[obs].options ||
-                                {});
+                            {});
                             if (objectStores[obs].indexes && typeof objectStores[obs].indexes ===
                                 'object')
                                 for (let i in objectStores[obs].indexes)
-                                    objectStore.createIndex(i, i, objectStores[obs].indexes[i] || {});
+                                    objectStore.createIndex(i, i, objectStores[obs].indexes[i] ||
+                                        {});
                         }
                         if (version)
                             removeStores.forEach(obs => db.deleteObjectStore(obs));
@@ -10765,7 +11736,8 @@ slot[name="tab"]::slotted(.active){
                             if (message.reset) {
                                 floGlobals.appObjects[message.object] = message.reset
                                 floGlobals.vectorClock[message.object] = vc
-                                compactIDB.writeData("appObjects", floGlobals.appObjects[message.object], message
+                                compactIDB.writeData("appObjects", floGlobals.appObjects[message.object],
+                                    message
                                     .object)
                                 compactIDB.writeData("vectorClock", vc, message.object)
                             }
@@ -10784,7 +11756,8 @@ slot[name="tab"]::slotted(.active){
                             if (message.diff) {
                                 floGlobals.appObjects[message.object] = mergeDifference(floGlobals.appObjects[
                                     message.object], message.diff)
-                                compactIDB.writeData("appObjects", floGlobals.appObjects[message.object], message
+                                compactIDB.writeData("appObjects", floGlobals.appObjects[message.object],
+                                    message
                                     .object)
                             }
                             floGlobals.vectorClock[message.object] = vc
@@ -10874,7 +11847,8 @@ slot[name="tab"]::slotted(.active){
                         comment: options.comment
                     })
                     options.type = type
-                    options.lowerVectorClock = options.lowerVectorClock || floGlobals.generalVC[filterStr] +
+                    options.lowerVectorClock = options.lowerVectorClock || floGlobals.generalVC[
+                            filterStr] +
                         1
                     this.requestApplicationData(options).then(dataSet => {
                         this.util.storeGeneralData(filterStr, dataSet)
@@ -10896,19 +11870,21 @@ slot[name="tab"]::slotted(.active){
                         lowerVectorClock: floGlobals.vectorClock[objectName] + 1,
                         mostRecent: true
                     }
-                    floSupernode.requestData(JSON.stringify(request), request.receiverID).then(dataSet => {
-                        this.util.resetData(dataSet)
-                        request.type = `${objectName}@Update`
-                        request.lowerVectorClock = floGlobals.vectorClock[objectName] + 1
-                        request.mostRecent = false
-                        floSupernode.requestData(JSON.stringify(request), request.receiverID).then(
-                            dataSet => {
-                                this.util.updateData(dataSet)
-                                this.util.lastCommit[objectName] = JSON.stringify(floGlobals
-                                    .appObjects[objectName])
-                                resolve('Object Data Updated')
-                            }).catch(error => reject(error))
-                    }).catch(error => reject(error))
+                    floSupernode.requestData(JSON.stringify(request), request.receiverID).then(
+                        dataSet => {
+                            this.util.resetData(dataSet)
+                            request.type = `${objectName}@Update`
+                            request.lowerVectorClock = floGlobals.vectorClock[objectName] + 1
+                            request.mostRecent = false
+                            floSupernode.requestData(JSON.stringify(request), request.receiverID)
+                                .then(
+                                    dataSet => {
+                                        this.util.updateData(dataSet)
+                                        this.util.lastCommit[objectName] = JSON.stringify(floGlobals
+                                            .appObjects[objectName])
+                                        resolve('Object Data Updated')
+                                    }).catch(error => reject(error))
+                        }).catch(error => reject(error))
                 })
             },
 
@@ -10936,7 +11912,8 @@ slot[name="tab"]::slotted(.active){
                         division: options.division || floGlobals.division,
                         object: objectName,
                         vectorClock: floGlobals.vectorClock[objectName],
-                        diff: findDifference(JSON.parse(this.util.lastCommit[objectName]), floGlobals
+                        diff: findDifference(JSON.parse(this.util.lastCommit[objectName]),
+                            floGlobals
                             .appObjects[objectName])
                     }
                     this.sendApplicationData(message, `${objectName}@Update`, options).then(result => {
@@ -11011,12 +11988,13 @@ slot[name="tab"]::slotted(.active){
                                     }
                                     compactIDB.writeData("lastTx", result.totalTxs,
                                         floGlobals.SNStorageID);
-                                    compactIDB.readAllData("supernodes").then(result => {
+                                    compactIDB.readAllData("supernodes").then(
+                                    result => {
                                         floGlobals.supernodes = result;
 
                                         floSupernode.kBucket.launch(Object.keys(
-                                            floGlobals.supernodes),
-                                            floGlobals.SNStorageID)
+                                                    floGlobals.supernodes),
+                                                floGlobals.SNStorageID)
                                             .then(result => resolve(
                                                 "Loaded Supernode list\n" +
                                                 result))
@@ -11035,12 +12013,14 @@ slot[name="tab"]::slotted(.active){
                                     pattern: floGlobals.application
                                 }).then(result => {
                                     for (var i = result.data.length - 1; i >= 0; i--) {
-                                        var content = JSON.parse(result.data[i])[floGlobals
+                                        var content = JSON.parse(result.data[i])[
+                                            floGlobals
                                             .application];
                                         if (Array.isArray(content.removeSubAdmin))
                                             for (var j = 0; j < content.removeSubAdmin
                                                 .length; j++)
-                                                compactIDB.removeData("subAdmins", content
+                                                compactIDB.removeData("subAdmins",
+                                                    content
                                                     .removeSubAdmin[j]);
                                         if (Array.isArray(content.addSubAdmin))
                                             for (var k = 0; k < content.addSubAdmin
@@ -11051,8 +12031,10 @@ slot[name="tab"]::slotted(.active){
                                     compactIDB.writeData("lastTx", result.totalTxs,
                                         floGlobals.adminID);
                                     compactIDB.readAllData("subAdmins").then(result => {
-                                        floGlobals.subAdmins = Object.keys(result);
-                                        resolve("Read subAdmins from blockchain");
+                                        floGlobals.subAdmins = Object.keys(
+                                            result);
+                                        resolve(
+                                            "Read subAdmins from blockchain");
                                     })
                                 })
                             }).catch(error => reject(error))
@@ -11123,7 +12105,8 @@ slot[name="tab"]::slotted(.active){
 
                         const getPrivateKeyCredentials = function () {
                             return new Promise((resolve, reject) => {
-                                var indexArr = localStorage.getItem(`${floGlobals.application}#privKey`)
+                                var indexArr = localStorage.getItem(
+                                    `${floGlobals.application}#privKey`)
                                 if (indexArr) {
                                     readSharesFromIDB(JSON.parse(indexArr))
                                         .then(result => resolve(result))
@@ -11146,25 +12129,28 @@ slot[name="tab"]::slotted(.active){
                                         privKey = floCrypto.generateNewID().privKey
                                     }).finally(_ => {
                                         var threshold = floCrypto.randInt(10, 20)
-                                        writeSharesToIDB(floCrypto.createShamirsSecretShares(
-                                            privKey, threshold, threshold)).then(
-                                                resultIndexes => {
-                                                    //store index keys in localStorage
-                                                    localStorage.setItem(
-                                                        `${floGlobals.application}#privKey`,
-                                                        JSON.stringify(resultIndexes))
-                                                    //also add a dummy privatekey to the IDB
-                                                    var randomPrivKey = floCrypto
-                                                        .generateNewID().privKey
-                                                    var randomThreshold = floCrypto.randInt(10,
-                                                        20)
-                                                    writeSharesToIDB(floCrypto
-                                                        .createShamirsSecretShares(
-                                                            randomPrivKey, randomThreshold,
-                                                            randomThreshold))
-                                                    //resolve private Key
-                                                    resolve(privKey)
-                                                }).catch(error => reject(error))
+                                        writeSharesToIDB(floCrypto
+                                            .createShamirsSecretShares(
+                                                privKey, threshold, threshold)).then(
+                                            resultIndexes => {
+                                                //store index keys in localStorage
+                                                localStorage.setItem(
+                                                    `${floGlobals.application}#privKey`,
+                                                    JSON.stringify(resultIndexes))
+                                                //also add a dummy privatekey to the IDB
+                                                var randomPrivKey = floCrypto
+                                                    .generateNewID().privKey
+                                                var randomThreshold = floCrypto.randInt(
+                                                    10,
+                                                    20)
+                                                writeSharesToIDB(floCrypto
+                                                    .createShamirsSecretShares(
+                                                        randomPrivKey,
+                                                        randomThreshold,
+                                                        randomThreshold))
+                                                //resolve private Key
+                                                resolve(privKey)
+                                            }).catch(error => reject(error))
                                     })
                                 }
                             })
@@ -11182,7 +12168,8 @@ slot[name="tab"]::slotted(.active){
                                         } catch (error) {
                                             reject("Access Denied: Incorrect PIN/Password")
                                         }
-                                    }).catch(error => reject("Access Denied: PIN/Password required"))
+                                    }).catch(error => reject(
+                                        "Access Denied: PIN/Password required"))
                                 }
                             })
                         }
@@ -11193,7 +12180,8 @@ slot[name="tab"]::slotted(.active){
                                     try {
                                         myPrivKey = privKey
                                         myPubKey = floCrypto.getPubKeyHex(myPrivKey)
-                                        myFloID = floCrypto.getFloIDfromPubkeyHex(myPubKey)
+                                        myFloID = floCrypto.getFloIDfromPubkeyHex(
+                                            myPubKey)
                                         resolve('Login Credentials loaded successful')
                                     } catch (error) {
                                         reject("Corrupted Private Key")
@@ -11279,8 +12267,8 @@ slot[name="tab"]::slotted(.active){
                         reject('Access Denied for Admin privilege')
                     else
                         floBlockchainAPI.writeData(floID, JSON.stringify(floData), adminPrivKey)
-                            .then(result => resolve(['Updated SubAdmin List', result]))
-                            .catch(error => reject(error))
+                        .then(result => resolve(['Updated SubAdmin List', result]))
+                        .catch(error => reject(error))
                 })
             },
 
@@ -11305,7 +12293,8 @@ slot[name="tab"]::slotted(.active){
                     let shares = floCrypto.createShamirsSecretShares(encryptedKey, threshold, threshold)
                     let promises = [];
                     for (var i = 0; i < threshold; i++)
-                        promises.push(compactIDB.writeData("credentials", shares[i], indexArr[i], floGlobals.application));
+                        promises.push(compactIDB.writeData("credentials", shares[i], indexArr[i],
+                            floGlobals.application));
                     Promise.all(promises)
                         .then(results => resolve("Private Key Secured"))
                         .catch(error => reject(error))
@@ -11337,12 +12326,15 @@ slot[name="tab"]::slotted(.active){
         reactor.addEventListener("startUpSuccessLog", log => console.log(log))
 
         reactor.registerEvent("startUpErrorLog");
-        reactor.addEventListener("startUpErrorLog", log => console.error(log))
+        reactor.addEventListener("startUpErrorLog", log => {
+            notify('Wrong Private key. Please enter correct private key.', 'error')
+            console.error(log)
+        })
     </script>
 
     <script>
         function extend(Child, Parent) {
-            var Temp = function () { };
+            var Temp = function () {};
             Temp.prototype = Parent.prototype;
             Child.prototype = new Temp();
             Child.prototype.constructor = Child;
@@ -11444,8 +12436,8 @@ slot[name="tab"]::slotted(.active){
                 for (elem in arr) {
                     if (arr.hasOwnProperty(elem)) {
                         printArrayOfArrays(arr[elem], resultant_array);
-                        if (typeof (arr[elem]) !== "object"
-                            && typeof (arr[elem]) !== "undefined") {
+                        if (typeof (arr[elem]) !== "object" &&
+                            typeof (arr[elem]) !== "undefined") {
                             resultant_array[elem] = arr[elem];
                         }
                     }
@@ -11464,7 +12456,8 @@ slot[name="tab"]::slotted(.active){
         }
 
         async function clearCashierData(dataStores = ['deposits_flo_txids', 'cash_sent_details',
-            'generalData', 'generalVC', 'pay_thru_cashier']) {
+            'generalData', 'generalVC', 'pay_thru_cashier'
+        ]) {
             try {
                 for (const ds of dataStores) {
                     compactIDB.clearData(ds);
@@ -11475,11 +12468,9 @@ slot[name="tab"]::slotted(.active){
                 return false;
             }
         }
-
     </script>
 
     <script>
-
         const token_app = {
             master_configurations: {},
             //masterFLOAddress: 'FD5hK9ryBogJ5AcSvCy1tW5as8jRTkMLky',
@@ -11492,21 +12483,21 @@ slot[name="tab"]::slotted(.active){
             parse_flo_comments: async function () {
                 text = `masterFLOAddress=FD5hK9ryBogJ5AcSvCy1tW5as8jRTkMLky
                     #!#CURRENCY=INR
-                    #!#TYPE_DEPOSITS=CASH_DEPOSITS_TEST1
-                    #!#TYPE_WITHDRAWS=CASH_WITHDRAWS_TEST1
-                    #!#TYPE_MSGES=USER_MESSAGES_TEST1
-                    #!#TYPE_PROCESSED_DEPOSITS=PROCESSED_DEPOSITS_TEST1
-                    #!#TYPE_PROCESSED_WITHDRAWS=PROCESSED_WITHDRAWS_TEST1
-                    #!#TYPE_FILE_DEPOSITS_COMPLAINT=DEPOSITS_COMPLAINT_TEST1
-                    #!#TYPE_PROCESSED_DEPOSITS_COMPLAINT=PROCESSED_DEPOSITS_COMPLAINT_TEST1
-                    #!#TYPE_FILE_WITHDRAWS_COMPLAINT=WITHDRAWS_COMPLAINT_TEST1
-                    #!#TYPE_PROCESSED_WITHDRAWS_COMPLAINT=PROCESSED_WITHDRAWS_COMPLAINT_TEST1
-                    #!#TYPE_PAY_THROUGH_CASHIER=PAY_THRU_CASHIER_TEST1
-                    #!#TYPE_FILE_PAY_THROUGH_CASHIER_COMPLAINT=PAY_THRU_CASHIER_COMPLAINT_TEST1
-                    #!#TYPE_PROCESSED_PAY_THROUGH_CASHIER=PROCESSED_PAY_THROUGH_CASHIER_TEST1
-                    #!#TYPE_PROCESSED_PAY_THROUGH_CASHIER_COMPLAINT=PROCESSED_PAY_THROUGH_CASHIER_COMPLAINT_TEST1
-                    #!#TYPE_REQUEST_PAYMENT_DECLINED=REQUEST_PAYMENT_DECLINED_TEST1
-                    #!#TYPE_REQUEST_PAYMENT_APPROVED=REQUEST_PAYMENT_APPROVED_TEST1
+                    #!#TYPE_DEPOSITS=CASH_DEPOSITS_TEST2
+                    #!#TYPE_WITHDRAWS=CASH_WITHDRAWS_TEST2
+                    #!#TYPE_MSGES=USER_MESSAGES_TEST2
+                    #!#TYPE_PROCESSED_DEPOSITS=PROCESSED_DEPOSITS_TEST2
+                    #!#TYPE_PROCESSED_WITHDRAWS=PROCESSED_WITHDRAWS_TEST2
+                    #!#TYPE_FILE_DEPOSITS_COMPLAINT=DEPOSITS_COMPLAINT_TEST2
+                    #!#TYPE_PROCESSED_DEPOSITS_COMPLAINT=PROCESSED_DEPOSITS_COMPLAINT_TEST2
+                    #!#TYPE_FILE_WITHDRAWS_COMPLAINT=WITHDRAWS_COMPLAINT_TEST2
+                    #!#TYPE_PROCESSED_WITHDRAWS_COMPLAINT=PROCESSED_WITHDRAWS_COMPLAINT_TEST2
+                    #!#TYPE_PAY_THROUGH_CASHIER=PAY_THRU_CASHIER_TEST2
+                    #!#TYPE_FILE_PAY_THROUGH_CASHIER_COMPLAINT=PAY_THRU_CASHIER_COMPLAINT_TEST2
+                    #!#TYPE_PROCESSED_PAY_THROUGH_CASHIER=PROCESSED_PAY_THROUGH_CASHIER_TEST2
+                    #!#TYPE_PROCESSED_PAY_THROUGH_CASHIER_COMPLAINT=PROCESSED_PAY_THROUGH_CASHIER_COMPLAINT_TEST2
+                    #!#TYPE_REQUEST_PAYMENT_DECLINED=REQUEST_PAYMENT_DECLINED_TEST2
+                    #!#TYPE_REQUEST_PAYMENT_APPROVED=REQUEST_PAYMENT_APPROVED_TEST2
                     #!#vendors=FGtPEBu2NFFYkqFrA9NDBJJLpVhyuPubDj,
                     #!#helplineFloId=F9MAyvT5b9aSfsuukAungrbt1L5fgmJmuK
                     #!#cashiers=
@@ -11517,7 +12508,8 @@ slot[name="tab"]::slotted(.active){
                     }`
                 text = removeWhiteSpaces(text);
                 return text;
-                const master_data = await ajaxGet(`${floGlobals.apiURL.FLO[1]}/api/txs/?address=${token_app.masterFLOAddress}`);
+                const master_data = await ajaxGet(
+                    `${floGlobals.apiURL.FLO[1]}/api/txs/?address=${token_app.masterFLOAddress}`);
                 if (typeof master_data === "object" && typeof master_data.txs === "object") {
                     let text = '';
                     let tx_cmnt_arr = [];
@@ -11565,12 +12557,12 @@ slot[name="tab"]::slotted(.active){
                                 k[1] = JSON.parse(k[1].replace(/ /g, ""));
                             }
 
-                            if (typeof token_app.master_configurations !== "object") token_app.master_configurations = {};
+                            if (typeof token_app.master_configurations !== "object") token_app
+                                .master_configurations = {};
 
                             Object.defineProperty(
                                 token_app.master_configurations,
-                                k[0],
-                                {
+                                k[0], {
                                     value: k[1],
                                     writable: false,
                                     configurable: false,
@@ -11639,10 +12631,12 @@ slot[name="tab"]::slotted(.active){
                     })
                     let cashierList = ``,
                         cashierSelect = document.getElementById('select_cashier')
+                    cashierList += `<sm-strip-option value = "">Select Cashier...</sm-strip-option>`;
                     for (cashier in token_app.master_configurations.cashiers)
                         cashierList += `<sm-strip-option value = "${cashier}">${cashier}</sm-strip-option>`
                     cashierSelect.innerHTML = cashierList;
-                    await Promise.all([load_deposit_complaints(cashierSelect.value), load_withdraw_complaints(cashierSelect.value), load_pay_thru_cashier_complaints(cashierSelect.value)])
+                    await Promise.all([load_deposit_complaints(cashierSelect.value), load_withdraw_complaints(
+                        cashierSelect.value), load_pay_thru_cashier_complaints(cashierSelect.value)])
                     userType.textContent = 'Helpline'
                     showPage(document.getElementById('helpline_page_btn'), 'helpline_page')
                 }
@@ -11669,22 +12663,32 @@ slot[name="tab"]::slotted(.active){
                 pay_through_cashier();
             },
 
-            retrieveLatestContent: async function (receiverID = floGlobals.adminID, senderIDs = floGlobals.subAdmins) {
+            retrieveLatestContent: async function (receiverID = floGlobals.adminID, senderIDs = floGlobals
+                .subAdmins) {
 
-                floCloudAPI.requestObjectData(floGlobals.application, { receiverID, senderIDs });
+                floCloudAPI.requestObjectData(floGlobals.application, {
+                    receiverID,
+                    senderIDs
+                });
 
                 if (Object.keys(token_app.master_configurations.cashiers).includes(myFloID)) {
-                    await Promise.all([floCloudAPI.requestGeneralData(token_app.master_configurations.TYPE_DEPOSITS
-                        , { receiverID: myFloID }),
+                    await Promise.all([floCloudAPI.requestGeneralData(token_app.master_configurations
+                            .TYPE_DEPOSITS, {
+                                receiverID: myFloID
+                            }),
 
-                    floCloudAPI.requestGeneralData(token_app.master_configurations.TYPE_WITHDRAWS
-                        , { receiverID: myFloID }),
+                        floCloudAPI.requestGeneralData(token_app.master_configurations.TYPE_WITHDRAWS, {
+                            receiverID: myFloID
+                        }),
 
-                    floCloudAPI.requestGeneralData(token_app.master_configurations.TYPE_MSGES
-                        , { receiverID: myFloID }),
+                        floCloudAPI.requestGeneralData(token_app.master_configurations.TYPE_MSGES, {
+                            receiverID: myFloID
+                        }),
 
-                    floCloudAPI.requestGeneralData(token_app.master_configurations.TYPE_PAY_THROUGH_CASHIER,
-                        { receiverID: myFloID })
+                        floCloudAPI.requestGeneralData(token_app.master_configurations
+                            .TYPE_PAY_THROUGH_CASHIER, {
+                                receiverID: myFloID
+                            })
                     ])
 
                     return true;
@@ -11692,12 +12696,18 @@ slot[name="tab"]::slotted(.active){
                     await clearCashierData();
 
                     await Promise.all([
-                        floCloudAPI.requestGeneralData(token_app.master_configurations.TYPE_FILE_DEPOSITS_COMPLAINT),
-                        floCloudAPI.requestGeneralData(token_app.master_configurations.TYPE_FILE_PAY_THROUGH_CASHIER_COMPLAINT),
-                        floCloudAPI.requestGeneralData(token_app.master_configurations.TYPE_FILE_WITHDRAWS_COMPLAINT),
-                        floCloudAPI.requestGeneralData(token_app.master_configurations.TYPE_PROCESSED_DEPOSITS_COMPLAINT),
-                        floCloudAPI.requestGeneralData(token_app.master_configurations.TYPE_PROCESSED_PAY_THROUGH_CASHIER_COMPLAINT),
-                        floCloudAPI.requestGeneralData(token_app.master_configurations.TYPE_PROCESSED_WITHDRAWS_COMPLAINT)
+                        floCloudAPI.requestGeneralData(token_app.master_configurations
+                            .TYPE_FILE_DEPOSITS_COMPLAINT),
+                        floCloudAPI.requestGeneralData(token_app.master_configurations
+                            .TYPE_FILE_PAY_THROUGH_CASHIER_COMPLAINT),
+                        floCloudAPI.requestGeneralData(token_app.master_configurations
+                            .TYPE_FILE_WITHDRAWS_COMPLAINT),
+                        floCloudAPI.requestGeneralData(token_app.master_configurations
+                            .TYPE_PROCESSED_DEPOSITS_COMPLAINT),
+                        floCloudAPI.requestGeneralData(token_app.master_configurations
+                            .TYPE_PROCESSED_PAY_THROUGH_CASHIER_COMPLAINT),
+                        floCloudAPI.requestGeneralData(token_app.master_configurations
+                            .TYPE_PROCESSED_WITHDRAWS_COMPLAINT)
                     ])
 
                     return true;
@@ -11706,14 +12716,22 @@ slot[name="tab"]::slotted(.active){
                     let promises = [];
 
                     for (let cashier in token_app.master_configurations.cashiers) {
-                        let p1 = floCloudAPI.requestGeneralData(token_app.master_configurations.TYPE_DEPOSITS
-                            , { receiverID: cashier, senderIDs: [myFloID] })
+                        let p1 = floCloudAPI.requestGeneralData(token_app.master_configurations.TYPE_DEPOSITS, {
+                            receiverID: cashier,
+                            senderIDs: [myFloID]
+                        })
 
-                        let p2 = floCloudAPI.requestGeneralData(token_app.master_configurations.TYPE_WITHDRAWS
-                            , { receiverID: cashier, senderIDs: [myFloID] })
+                        let p2 = floCloudAPI.requestGeneralData(token_app.master_configurations
+                        .TYPE_WITHDRAWS, {
+                            receiverID: cashier,
+                            senderIDs: [myFloID]
+                        })
 
-                        let p3 = floCloudAPI.requestGeneralData(token_app.master_configurations.TYPE_PAY_THROUGH_CASHIER,
-                            { receiverID: cashier, senderIDs: [myFloID] })
+                        let p3 = floCloudAPI.requestGeneralData(token_app.master_configurations
+                            .TYPE_PAY_THROUGH_CASHIER, {
+                                receiverID: cashier,
+                                senderIDs: [myFloID]
+                            })
 
                         promises.push(p1);
                         promises.push(p2);
@@ -11721,8 +12739,9 @@ slot[name="tab"]::slotted(.active){
 
                     }
 
-                    let p4 = floCloudAPI.requestGeneralData(token_app.master_configurations.TYPE_MSGES
-                        , { receiverID: myFloID })
+                    let p4 = floCloudAPI.requestGeneralData(token_app.master_configurations.TYPE_MSGES, {
+                        receiverID: myFloID
+                    })
 
                     promises.push(p4);
 
@@ -11734,7 +12753,6 @@ slot[name="tab"]::slotted(.active){
 
             }
         }
-
     </script>
 
     <!-- Cashier functions -->
@@ -11744,30 +12762,33 @@ slot[name="tab"]::slotted(.active){
             token_app.requests = {};
             token_app.requests.deposits = {};
             token_app.requests.withdraws = {};
-            floCloudAPI.resetObjectData(token_app, floGlobals.application,
-                { receiverID: floGlobals.adminID });
+            floCloudAPI.resetObjectData(token_app, floGlobals.application, {
+                receiverID: floGlobals.adminID
+            });
         }
 
         async function show_deposit_request() {
             try {
                 if (!Object.keys(token_app.master_configurations.cashiers).includes(myFloID)) return;
 
-                await floCloudAPI.requestGeneralData(token_app.master_configurations.TYPE_DEPOSITS,
-                    { receiverID: myFloID, senderIDs: [myFloID] });
+                await floCloudAPI.requestGeneralData(token_app.master_configurations.TYPE_DEPOSITS, {
+                    receiverID: myFloID,
+                    senderIDs: [myFloID]
+                });
 
-                let finished_tasks = await floCloudAPI.requestApplicationData(
-                    {
-                        type: token_app.master_configurations.TYPE_PROCESSED_DEPOSITS,
-                        receiverID: myFloID,
-                        senderIDs: [myFloID]
-                    });
+                let finished_tasks = await floCloudAPI.requestApplicationData({
+                    type: token_app.master_configurations.TYPE_PROCESSED_DEPOSITS,
+                    receiverID: myFloID,
+                    senderIDs: [myFloID]
+                });
 
                 if (typeof finished_tasks === "string") finished_tasks = JSON.parse(finished_tasks);
 
                 const processed_deposits = Object.values(finished_tasks).map(m => m.message.user_upi_txid);
 
-                await floCloudAPI.requestGeneralData(token_app.master_configurations.TYPE_DEPOSITS,
-                    { receiverID: myFloID });
+                await floCloudAPI.requestGeneralData(token_app.master_configurations.TYPE_DEPOSITS, {
+                    receiverID: myFloID
+                });
 
                 let cash_deposits = await compactIDB.readAllData('deposits_flo_txids');
 
@@ -11780,7 +12801,10 @@ slot[name="tab"]::slotted(.active){
                 for (const m of general_msg) {
                     if (cash_deposits_upi_txid_list.includes(m.message.upi_txid)) continue;
                     if (processed_deposits.includes(m.message.upi_txid)) continue;
-                    let { user_flo_id, upi_txid } = m.message;
+                    let {
+                        user_flo_id,
+                        upi_txid
+                    } = m.message;
                     frag.append(render.depositRequest(upi_txid, user_flo_id))
                 }
 
@@ -11795,21 +12819,22 @@ slot[name="tab"]::slotted(.active){
             try {
                 if (!Object.keys(token_app.master_configurations.cashiers).includes(myFloID)) return;
 
-                let finished_tasks = await floCloudAPI.requestApplicationData(
-                    {
-                        type: token_app.master_configurations.TYPE_PROCESSED_WITHDRAWS,
-                        receiverID: myFloID,
-                        senderIDs: [myFloID]
-                    });
+                let finished_tasks = await floCloudAPI.requestApplicationData({
+                    type: token_app.master_configurations.TYPE_PROCESSED_WITHDRAWS,
+                    receiverID: myFloID,
+                    senderIDs: [myFloID]
+                });
 
                 if (typeof finished_tasks === "string") finished_tasks = JSON.parse(finished_tasks);
 
                 const processed_withdraws = Object.values(finished_tasks).map(m => m.message.user_upi_txid);
 
-                await floCloudAPI.requestGeneralData(token_app.master_configurations.TYPE_WITHDRAWS,
-                    { receiverID: myFloID });
+                await floCloudAPI.requestGeneralData(token_app.master_configurations.TYPE_WITHDRAWS, {
+                    receiverID: myFloID
+                });
 
-                const general_msg = floDapps.getNextGeneralData(token_app.master_configurations.TYPE_WITHDRAWS, "0");
+                const general_msg = floDapps.getNextGeneralData(token_app.master_configurations.TYPE_WITHDRAWS,
+                "0");
 
                 if (typeof general_msg !== "object") {
                     notify(`No data available in withdraws.`);
@@ -11824,7 +12849,11 @@ slot[name="tab"]::slotted(.active){
                 for (const m of general_msg) {
                     if (cash_withdraws_token_txid_list.includes(m.message.token_txid)) continue;
                     if (processed_withdraws.includes(m.message.token_txid)) continue;
-                    let { token_txid, user_flo_id, withdrawer_upi } = m.message
+                    let {
+                        token_txid,
+                        user_flo_id,
+                        withdrawer_upi
+                    } = m.message
                     frag.append(render.withdrawRequest(token_txid, withdrawer_upi, user_flo_id))
                 }
 
@@ -11844,7 +12873,8 @@ slot[name="tab"]::slotted(.active){
                 const amount_of_tokens_to_transfer = prompt('Enter the amount of rupee to transfer', 0);
                 if (amount_of_tokens_to_transfer > 0) {
                     let flo_comment = `transfer ${amount_of_tokens_to_transfer} rupee#`;
-                    let flo_txid = await floBlockchainAPI.sendTx(myFloID, receiver_flo_id, 0.001, myPrivKey, flo_comment)
+                    let flo_txid = await floBlockchainAPI.sendTx(myFloID, receiver_flo_id, 0.001, myPrivKey,
+                        flo_comment)
                     console.log(flo_txid);
                     if (typeof flo_txid !== "string") {
                         notify(`Transfer unsuccessfull.`);
@@ -11856,16 +12886,18 @@ slot[name="tab"]::slotted(.active){
                         receiver_flo_id,
                         flo_txid,
                         user_upi_txid,
-                        "datetime": + new Date()
+                        "datetime": +new Date()
                     }
 
                     compactIDB.addData('deposits_flo_txids', input_data, "flo_txid");
 
                     // Add data into personal ledger as well
-                    floCloudAPI.sendGeneralData(input_data, token_app.master_configurations.TYPE_PROCESSED_DEPOSITS,
-                        { receiverID: myFloID });
+                    floCloudAPI.sendGeneralData(input_data, token_app.master_configurations
+                    .TYPE_PROCESSED_DEPOSITS, {
+                        receiverID: myFloID
+                    });
 
-                    notify(`Transfer successfull: ${flo_txid}.`, '', 'fixed', true);
+                    notify(`Transfer successfull: ${flo_txid}.`, 'success', true, true);
 
                     return true;
                 }
@@ -11881,14 +12913,15 @@ slot[name="tab"]::slotted(.active){
                     withdrawer_upi: withdraw_upi,
                     withdrawer_flo_id: withdraw_flo_id
                 };
-                if (typeof input_data["withdrawer_upi"] !== "string"
-                    || input_data["withdrawer_upi"].length < 1) {
+                if (typeof input_data["withdrawer_upi"] !== "string" ||
+                    input_data["withdrawer_upi"].length < 1) {
                     notify("Withdrawer UPI not found.");
                     return false;
                 }
-                input_data["datetime"] = + new Date();
+                input_data["datetime"] = +new Date();
 
-                let token_tx = await ajaxGet('https://ranchimallflo.duckdns.org/api/v1.0/getTransactionDetails/' + input_data["token_txid"])
+                let token_tx = await ajaxGet('https://ranchimallflo.duckdns.org/api/v1.0/getTransactionDetails/' +
+                    input_data["token_txid"])
                 if (typeof token_tx !== "object") {
                     notify("Transaction not found");
                     return false;
@@ -11902,7 +12935,8 @@ slot[name="tab"]::slotted(.active){
                     return;
                 }
 
-                notify("Please transfer INR " + amount_to_transfer + " to " + input_data["withdrawer_upi"], '', 'fixed', true);
+                notify("Please transfer INR " + amount_to_transfer + " to " + input_data["withdrawer_upi"], '',
+                    true, true);
 
                 let transfer_upi_txid = prompt("Enter the UPI txid for transferred amount.", "");
                 if (transfer_upi_txid.length < 1) {
@@ -11914,13 +12948,15 @@ slot[name="tab"]::slotted(.active){
                 compactIDB.addData("cash_sent_details", input_data, input_data["token_txid"])
 
                 // Add data into personal ledger as well
-                floCloudAPI.sendGeneralData(input_data, token_app.master_configurations.TYPE_PROCESSED_WITHDRAWS,
-                    { receiverID: myFloID });
+                floCloudAPI.sendGeneralData(input_data, token_app.master_configurations.TYPE_PROCESSED_WITHDRAWS, {
+                    receiverID: myFloID
+                });
 
                 floCloudAPI.sendGeneralData(`Your withdrawal request of INR ${amount_to_transfer} is approved. 
                         Please check reference number ${transfer_upi_txid} in your UPI ${withdraw_upi}`,
-                    token_app.master_configurations.TYPE_MSGES,
-                    { receiverID: input_data['withdrawer_flo_id'] })
+                    token_app.master_configurations.TYPE_MSGES, {
+                        receiverID: input_data['withdrawer_flo_id']
+                    })
 
             } catch (error) {
                 notify(error, 'error')
@@ -11935,28 +12971,44 @@ slot[name="tab"]::slotted(.active){
                     const token_receiver = document.getElementById('token_receiver').value;
                     const token_amount = Number(document.getElementById('token_amount').value);
                     const token_name_radio = 'rupee';
-                    const flo_comment = `transfer ${token_amount} ${token_name_radio}# to ${token_receiver}`;
-                    const token_balance_url = `https://ranchimallflo.duckdns.org/api/v1.0/getFloAddressBalance?token=${token_name_radio}&floAddress=${token_sender}`;
+                    const flo_comment =
+                    `transfer ${token_amount} ${token_name_radio}# to ${token_receiver}`;
+                    const token_balance_url =
+                        `https://ranchimallflo.duckdns.org/api/v1.0/getFloAddressBalance?token=${token_name_radio}&floAddress=${token_sender}`;
                     const sender_token_balance = await ajaxGet(token_balance_url);
                     let err_msg = '';
 
-                    if (typeof sender_token_balance !== "object"
-                        || typeof sender_token_balance.balance !== "number"
-                        || sender_token_balance.balance < token_amount) {
+                    if (token_receiver.length < 1 || !floCrypto.validateAddr(token_receiver)) {
+                        err_msg = `Invalid receiver FLO address.`;
+                        notify(err_msg, 'error');
+                        hidePopup();
+                        return false;
+                    }
+
+                    if (typeof sender_token_balance !== "object") {
+                        err_msg = `Failed to load Sender balance.`;
+                        notify(err_msg, 'error');
+                        hidePopup()
+                        return false;
+                    }
+
+                    if (typeof sender_token_balance.balance !== "number" ||
+                        sender_token_balance.balance < token_amount) {
                         err_msg = `Sender has insufficient ${token_name_radio} balance.`;
                         notify(err_msg, 'error');
                         hidePopup()
                         return false;
                     }
 
-                    let flo_txid = await floBlockchainAPI.sendTx(myFloID, token_receiver, 0.001, myPrivKey, flo_comment)
+                    let flo_txid = await floBlockchainAPI.sendTx(myFloID, token_receiver, 0.001, myPrivKey,
+                        flo_comment)
                     console.log(flo_txid);
                     if (typeof flo_txid !== "string") {
                         notify(`Transaction unsuccessful.`);
                         hidePopup()
                         return false;
                     } else {
-                        notify(`Transaction successful: ${flo_txid}.`, '', 'fixed', true);
+                        notify(`Transaction successful: ${flo_txid}.`, '', true, true);
                         if (payingRequested) {
                             payment_request_status(currentPaymentRequest.requestId, 'APPROVED')
                             showPayRequests()
@@ -11966,7 +13018,7 @@ slot[name="tab"]::slotted(.active){
                     }
                 }
             } catch (error) {
-                notify(error, 'error', 'fixed', true);
+                notify(error, 'error', true, true);
                 throw new Error(error);
             }
         }
@@ -11979,12 +13031,13 @@ slot[name="tab"]::slotted(.active){
                 }
                 const current_token_balance = document.getElementById('token_balance').textContent;
                 if (typeof current_token_balance == "string") {
-                    const get_user_balance = await ajaxGet('https://ranchimallflo.duckdns.org/api/v1.0/getFloAddressBalance?token=rupee&floAddress=' + myFloID)
+                    const get_user_balance = await ajaxGet(
+                        'https://ranchimallflo.duckdns.org/api/v1.0/getFloAddressBalance?token=rupee&floAddress=' +
+                        myFloID)
                     if (typeof get_user_balance === "object" && get_user_balance.balance >= 0) {
                         if (get_user_balance.balance === null)
                             get_user_balance.balance = 0;
-                        document.getElementById('token_balance').textContent
-                            = get_user_balance.balance;
+                        document.getElementById('token_balance').textContent = get_user_balance.balance;
                     }
                 }
                 if (refreshButton) {
@@ -12001,12 +13054,11 @@ slot[name="tab"]::slotted(.active){
             try {
                 if (!Object.keys(token_app.master_configurations.cashiers).includes(myFloID)) return;
 
-                let finished_tasks = await floCloudAPI.requestApplicationData(
-                    {
-                        type: token_app.master_configurations.TYPE_PROCESSED_PAY_THROUGH_CASHIER,
-                        receiverID: myFloID,
-                        senderIDs: [myFloID]
-                    });
+                let finished_tasks = await floCloudAPI.requestApplicationData({
+                    type: token_app.master_configurations.TYPE_PROCESSED_PAY_THROUGH_CASHIER,
+                    receiverID: myFloID,
+                    senderIDs: [myFloID]
+                });
 
                 if (typeof finished_tasks === "string") finished_tasks = JSON.parse(finished_tasks);
 
@@ -12017,10 +13069,12 @@ slot[name="tab"]::slotted(.active){
 
                 console.log(processed_cashier_payments);
 
-                await floCloudAPI.requestGeneralData(token_app.master_configurations.TYPE_PAY_THROUGH_CASHIER,
-                    { receiverID: myFloID });
+                await floCloudAPI.requestGeneralData(token_app.master_configurations.TYPE_PAY_THROUGH_CASHIER, {
+                    receiverID: myFloID
+                });
 
-                const user_requests = floDapps.getNextGeneralData(token_app.master_configurations.TYPE_PAY_THROUGH_CASHIER, "0");
+                const user_requests = floDapps.getNextGeneralData(token_app.master_configurations
+                    .TYPE_PAY_THROUGH_CASHIER, "0");
 
                 let pay_thru_cashier = await compactIDB.readAllData('pay_thru_cashier');
                 let pay_thru_cashier_list = Object.values(pay_thru_cashier).map(m => m.upi_txid);
@@ -12029,7 +13083,11 @@ slot[name="tab"]::slotted(.active){
                 for (const m of user_requests) {
                     if (processed_cashier_payments.includes(m.message.upi_txid)) continue;
                     if (pay_thru_cashier_list.includes(m.message.upi_txid)) continue;
-                    let { upi_txid, receiver_flo_id, amount } = m.message;
+                    let {
+                        upi_txid,
+                        receiver_flo_id,
+                        amount
+                    } = m.message;
                     frag.append(render.payRequest(m.sender, upi_txid, receiver_flo_id, amount))
                 }
                 payRequestsContainer.append(frag)
@@ -12049,25 +13107,28 @@ slot[name="tab"]::slotted(.active){
                 if (typeof amount_to_pay !== "number" || amount_to_pay <= 0)
                     return notify("Invalid amount.", 'error', '', true);
                 if (Number(usr_amount_to_pay) !== amount_to_pay) {
-                    let amount_mismatch = confirm("Amount mismatch: Your amount does not match what user entered. Continue?");
+                    let amount_mismatch = confirm(
+                        "Amount mismatch: Your amount does not match what user entered. Continue?");
                     if (!amount_mismatch) return;
                 }
                 let flo_statement = `transfer ${amount_to_pay} rupee# on behalf of ${sender_flo_id}`;
                 let send_token_cnf = confirm(`Send ${amount_to_pay} to ${vendor_flo_id} ?`);
                 if (send_token_cnf == true) {
-                    const token_balance_url = `https://ranchimallflo.duckdns.org/api/v1.0/getFloAddressBalance?token=rupee&floAddress=${myFloID}`;
+                    const token_balance_url =
+                        `https://ranchimallflo.duckdns.org/api/v1.0/getFloAddressBalance?token=rupee&floAddress=${myFloID}`;
                     const my_token_balance = await ajaxGet(token_balance_url);
                     let err_msg = '';
 
-                    if (typeof my_token_balance !== "object"
-                        || typeof my_token_balance.balance !== "number"
-                        || my_token_balance.balance < amount_to_pay) {
+                    if (typeof my_token_balance !== "object" ||
+                        typeof my_token_balance.balance !== "number" ||
+                        my_token_balance.balance < amount_to_pay) {
                         err_msg = `INFO: You have insufficient rupee balance.`;
-                        notify(err_msg, 'error', 'fixed', true);
+                        notify(err_msg, 'error', true, true);
                         return false;
                     }
 
-                    let flo_txid = await floBlockchainAPI.sendTx(myFloID, vendor_flo_id, 0.001, myPrivKey, flo_statement)
+                    let flo_txid = await floBlockchainAPI.sendTx(myFloID, vendor_flo_id, 0.001, myPrivKey,
+                        flo_statement)
                     console.log(flo_txid);
                     if (typeof flo_txid !== "string") {
                         notify(`Transaction unsuccessfull.`, 'error', '', true);
@@ -12078,17 +13139,19 @@ slot[name="tab"]::slotted(.active){
                             vendor_flo_id,
                             upi_txid,
                             flo_txid,
-                            'datetime': + new Date()
+                            'datetime': +new Date()
                         };
 
                         await compactIDB.addData('pay_thru_cashier', input_data, upi_txid);
 
                         // Add data into personal ledger as well
-                        await floCloudAPI.sendGeneralData(input_data, token_app.master_configurations.TYPE_PROCESSED_PAY_THROUGH_CASHIER,
-                            { receiverID: myFloID });
+                        await floCloudAPI.sendGeneralData(input_data, token_app.master_configurations
+                            .TYPE_PROCESSED_PAY_THROUGH_CASHIER, {
+                                receiverID: myFloID
+                            });
 
                         notify(`Transaction successfull: ${flo_txid}.   
-                            INR ${amount_to_pay} sent to ${vendor_flo_id}`, '', 'fixed', true);
+                            INR ${amount_to_pay} sent to ${vendor_flo_id}`, '', true, true);
                         return true;
                     }
                 }
@@ -12097,12 +13160,10 @@ slot[name="tab"]::slotted(.active){
                 throw new Error(error)
             }
         }
-
     </script>
 
     <!-- User functions -->
     <script>
-
         function request_rupee_token() {
             try {
                 const request_tokens_btn = document.getElementById('request_tokens_btn');
@@ -12112,24 +13173,30 @@ slot[name="tab"]::slotted(.active){
                     if (typeof myFloID !== "string" || myFloID.length < 1) return;
                     const token_amount_to_buy = Number(document.getElementById('token_amount_to_buy').value);
                     const cashier_upi = token_app.master_configurations.cashiers[cashier].upi_id;
-                    notify(`Please pay ₹ ${token_amount_to_buy} to UPI id ${cashier_upi}.`, '', 'fixed', true);
-                    let upi_txid = await askPrompt(`Please enter UPI TXID for deposited cash to ${cashier_upi}`);
+                    notify(`Please pay ₹ ${token_amount_to_buy} to UPI id ${cashier_upi}.`, '', true, true);
+                    let upi_txid = await askPrompt(
+                    `Please enter UPI TXID for deposited cash to ${cashier_upi}`);
                     let request_object = {
                         user_flo_id: myFloID,
                         upi_txid: upi_txid,
                         deposit_amount: token_amount_to_buy,
                     }
                     if (typeof upi_txid === "string" && upi_txid.length > 1) {
-                        floCloudAPI.sendGeneralData(request_object, token_app.master_configurations.TYPE_DEPOSITS,
-                            { receiverID: cashier }).then(result => {
-                                console.log(result);
-                                notify('Request sent successfully.');
-                                hidePopup()
-                            })
+                        floCloudAPI.sendGeneralData(request_object, token_app.master_configurations
+                            .TYPE_DEPOSITS, {
+                                receiverID: cashier
+                            }).then(result => {
+                            console.log(result);
+                            notify('Request sent.', 'success');
+                            hidePopup()
+                        })
                         return true;
+                    } else if (upi_txid.trim() === '') {
+                        notify('Please enter UPI TxID if you wish continue your transaction.');
+                    } else if (upi_txid === null) {
+                        notify('Request cancelled.', 'error');
+                        hidePopup()
                     }
-                    notify('Request failed.', 'error');
-                    hidePopup()
                     return false;
                 }
             } catch (error) {
@@ -12157,22 +13224,27 @@ slot[name="tab"]::slotted(.active){
                         notify(`Please enter a valid UPI id.`, 'error');
                         return false;
                     }
-                    const token_balance_url = `https://ranchimallflo.duckdns.org/api/v1.0/getFloAddressBalance?token=rupee&floAddress=${myFloID}`;
+                    const token_balance_url =
+                        `https://ranchimallflo.duckdns.org/api/v1.0/getFloAddressBalance?token=rupee&floAddress=${myFloID}`;
                     const user_token_balance_object = await ajaxGet(token_balance_url);
-                    if (typeof user_token_balance_object !== "object" || typeof user_token_balance_object.balance !== "number") {
-                        notify('You do not have rupee balance yet. Please deposit rupee to get balance.', 'error');
+                    if (typeof user_token_balance_object !== "object" || typeof user_token_balance_object
+                        .balance !== "number") {
+                        notify('You do not have rupee balance yet. Please deposit rupee to get balance.',
+                            'error');
                         hidePopup()
                         return;
                     }
                     const current_balance = Number(user_token_balance_object.balance);
                     if (current_balance < withdraw_cash_amount) {
-                        notify(`You have unsufficient balance to withdraw. You can withdraw only Rs ${user_token_balance_object.balance}`, 'error', 'fixed', true);
+                        notify(`You have unsufficient balance to withdraw. You can withdraw only Rs ${user_token_balance_object.balance}`,
+                            'error', true, true);
                         hidePopup()
                         return;
                     }
 
                     const flo_comment = `transfer ${withdraw_cash_amount} rupee#`;
-                    let flo_txid = await floBlockchainAPI.sendTx(myFloID, cashier, 0.001, myPrivKey, flo_comment)
+                    let flo_txid = await floBlockchainAPI.sendTx(myFloID, cashier, 0.001, myPrivKey,
+                        flo_comment)
                     console.log(flo_txid);
                     if (typeof flo_txid !== "string") {
                         notify(`Transaction unsuccessfull.`, 'error');
@@ -12190,8 +13262,10 @@ slot[name="tab"]::slotted(.active){
                     }
                     console.log(request_object);
                     if (typeof flo_txid === "string" && flo_txid.length > 1) {
-                        floCloudAPI.sendGeneralData(request_object, token_app.master_configurations.TYPE_WITHDRAWS,
-                            { receiverID: cashier });
+                        floCloudAPI.sendGeneralData(request_object, token_app.master_configurations
+                            .TYPE_WITHDRAWS, {
+                                receiverID: cashier
+                            });
                         notify('Withdraw request sent successfully.');
                         hidePopup()
                         return true;
@@ -12222,9 +13296,10 @@ slot[name="tab"]::slotted(.active){
                     let amount_to_pay = Number(paying_amount_div.value);
                     let paid_cashier_upi_txid = document.getElementById('paid_cashier_upi_txid').value;
                     paid_cashier_upi_txid = toAlphanumeric(paid_cashier_upi_txid);
-                    if (recvr_id.length < 1
-                        || amount_to_pay <= 0
-                        || paid_cashier_upi_txid.length < 1)
+                    if (recvr_id.length < 1 ||
+                        floCrypto.validateAddr(recvr_id) ||
+                        amount_to_pay <= 0 ||
+                        paid_cashier_upi_txid.length < 1)
                         return notify("Incomplete information", 'error', '', true);
                     const req_object = {
                         receiver_flo_id: recvr_id,
@@ -12232,11 +13307,14 @@ slot[name="tab"]::slotted(.active){
                         upi_txid: toAlphanumeric(paid_cashier_upi_txid)
                     }
 
-                    floCloudAPI.sendGeneralData(req_object, token_app.master_configurations.TYPE_PAY_THROUGH_CASHIER,
-                        { receiverID: cashier, senderIDs: [myFloID] });
+                    floCloudAPI.sendGeneralData(req_object, token_app.master_configurations
+                        .TYPE_PAY_THROUGH_CASHIER, {
+                            receiverID: cashier,
+                            senderIDs: [myFloID]
+                        });
 
                     notify(`You have sent cash to <span class="breakable">${recvr_id}</span> through our cashier service (${cashier_upi}). 
-                        Once the cashier receives your payment, he will transfer it to ${recvr_id}.`, '', 'fixed', true);
+                        Once the cashier receives your payment, he will transfer it to ${recvr_id}.`, '', true, true);
                     hidePopup()
                 }
 
@@ -12254,42 +13332,63 @@ slot[name="tab"]::slotted(.active){
             try {
                 await token_app.actions.retrieveLatestContent();
 
-                const deposit_msg = floDapps.getNextGeneralData(token_app.master_configurations.TYPE_DEPOSITS, "0").reverse();
-                const withdraw_msg = floDapps.getNextGeneralData(token_app.master_configurations.TYPE_WITHDRAWS, "0").reverse();
-                const user_msg = floDapps.getNextGeneralData(token_app.master_configurations.TYPE_MSGES, "0").reverse();
-                const pay_thru_cashier_msg = floDapps.getNextGeneralData(token_app.master_configurations.TYPE_PAY_THROUGH_CASHIER, "0").reverse();
+                const deposit_msg = floDapps.getNextGeneralData(token_app.master_configurations.TYPE_DEPOSITS, "0")
+                    .reverse();
+                const withdraw_msg = floDapps.getNextGeneralData(token_app.master_configurations.TYPE_WITHDRAWS,
+                    "0").reverse();
+                const user_msg = floDapps.getNextGeneralData(token_app.master_configurations.TYPE_MSGES, "0")
+                    .reverse();
+                const pay_thru_cashier_msg = floDapps.getNextGeneralData(token_app.master_configurations
+                    .TYPE_PAY_THROUGH_CASHIER, "0").reverse();
 
                 console.log(deposit_msg, withdraw_msg, user_msg)
-                depositActivityContainer.innerHTML = ``;
                 for (usr_deposits of deposit_msg) {
-                    let { upi_txid, deposit_amount } = usr_deposits.message;
+                    let {
+                        upi_txid,
+                        deposit_amount
+                    } = usr_deposits.message;
                     frag.append(render.depositActivity(usr_deposits.vectorClock, upi_txid, deposit_amount))
                 }
+                if (frag.children.length)
+                    depositActivityContainer.innerHTML = ``;
                 depositActivityContainer.append(frag)
 
 
-                withdrawActivityContainer.innerHTML = ``;
                 for (usr_withdraws of withdraw_msg) {
-                    let { token_txid, withdrawer_upi, withdraw_amount } = usr_withdraws.message;
-                    frag.append(render.withdrawActivity(usr_withdraws.vectorClock, token_txid, withdrawer_upi, withdraw_amount))
+                    let {
+                        token_txid,
+                        withdrawer_upi,
+                        withdraw_amount
+                    } = usr_withdraws.message;
+                    frag.append(render.withdrawActivity(usr_withdraws.vectorClock, token_txid, withdrawer_upi,
+                        withdraw_amount))
                 }
 
+                if (frag.children.length)
+                    withdrawActivityContainer.innerHTML = ``;
                 withdrawActivityContainer.append(frag)
 
-                payCashierActivityContainer.innerHTML = ``;
                 for (cashier_message of pay_thru_cashier_msg) {
                     console.log(cashier_message)
-                    let { receiver_flo_id, upi_txid, amount } = cashier_message.message;
-                    frag.append(render.payCashierActivity(cashier_message.vectorClock, receiver_flo_id, upi_txid, amount))
+                    let {
+                        receiver_flo_id,
+                        upi_txid,
+                        amount
+                    } = cashier_message.message;
+                    frag.append(render.payCashierActivity(cashier_message.vectorClock, receiver_flo_id, upi_txid,
+                        amount))
                 }
 
+                if (frag.children.length)
+                    payCashierActivityContainer.innerHTML = ``;
                 payCashierActivityContainer.append(frag)
 
-                cashierMessageContainer.innerHTML = ``;
                 for (msg of user_msg) {
                     frag.append(render.cashierMessage(msg))
                 }
 
+                if (frag.children.length)
+                    cashierMessageContainer.innerHTML = ``;
                 cashierMessageContainer.append(frag)
             } catch (e) {
                 notify(e, 'error');
@@ -12299,7 +13398,9 @@ slot[name="tab"]::slotted(.active){
         async function file_complaint(order_type = '', order_vc = '', custom_msg = '') {
             try {
                 let input_data = {
-                    order_type, order_vc, custom_msg,
+                    order_type,
+                    order_vc,
+                    custom_msg,
                 }
 
                 console.log(input_data);
@@ -12314,11 +13415,12 @@ slot[name="tab"]::slotted(.active){
                     complaint_type = token_app.master_configurations.TYPE_FILE_PAY_THROUGH_CASHIER_COMPLAINT;
                 } else return false;
 
-                floCloudAPI.sendGeneralData(input_data, complaint_type,
-                    { receiverID: token_app.master_configurations.helplineFloId });
+                floCloudAPI.sendGeneralData(input_data, complaint_type, {
+                    receiverID: token_app.master_configurations.helplineFloId
+                });
 
                 notify('Your complaint has been registered. Our team will take an action very soon. Thank you.',
-                    '', 'fixed', true);
+                    '', true, true);
                 hidePopup()
                 return true;
 
@@ -12329,25 +13431,28 @@ slot[name="tab"]::slotted(.active){
         async function request_payment(receiver_flo_id = '', amount = 0) {
             try {
 
-                if (typeof receiver_flo_id !== "string"
-                    || receiver_flo_id.length < 1
-                    || amount <= 0) return notify('Invalid or incomplete data provided.', 'error');
+                if (typeof receiver_flo_id !== "string" ||
+                    receiver_flo_id.length < 1 ||
+                    amount <= 0 ||
+                    !floCrypto.validateAddr(receiver_flo_id))
+                    return notify('Invalid or incomplete data provided.', 'error');
 
                 let request_object = {
                     sender_flo_id: myFloID,
                     receiver_flo_id,
                     amount,
-                    datetime: + new Date()
+                    datetime: +new Date()
                 }
 
                 request_object.pay_req_id = Crypto.SHA256(JSON.stringify(request_object));
 
-                floCloudAPI.sendGeneralData(request_object, token_app.master_configurations.TYPE_REQUEST_PAYMENT,
-                    { receiverID: receiver_flo_id }).then(result => {
-                        console.log(result);
-                        notify('Request sent successfully.');
-                        hidePopup()
-                    });
+                floCloudAPI.sendGeneralData(request_object, token_app.master_configurations.TYPE_REQUEST_PAYMENT, {
+                    receiverID: receiver_flo_id
+                }).then(result => {
+                    console.log(result);
+                    notify('Request sent.', 'success');
+                    hidePopup()
+                });
 
                 return true;
             } catch (e) {
@@ -12359,27 +13464,42 @@ slot[name="tab"]::slotted(.active){
         async function show_payment_requests() {
             try {
                 await Promise.all([
-                    floCloudAPI.requestGeneralData(token_app.master_configurations.TYPE_REQUEST_PAYMENT,
-                        { receiverID: myFloID }),
-                    floCloudAPI.requestGeneralData(token_app.master_configurations.TYPE_REQUEST_PAYMENT_DECLINED,
-                        { receiverID: myFloID }),
-                    floCloudAPI.requestGeneralData(token_app.master_configurations.TYPE_REQUEST_PAYMENT_APPROVED,
-                        { receiverID: myFloID })
+                    floCloudAPI.requestGeneralData(token_app.master_configurations.TYPE_REQUEST_PAYMENT, {
+                        receiverID: myFloID
+                    }),
+                    floCloudAPI.requestGeneralData(token_app.master_configurations
+                        .TYPE_REQUEST_PAYMENT_DECLINED, {
+                            receiverID: myFloID
+                        }),
+                    floCloudAPI.requestGeneralData(token_app.master_configurations
+                        .TYPE_REQUEST_PAYMENT_APPROVED, {
+                            receiverID: myFloID
+                        })
                 ])
-                const general_msg = floDapps.getNextGeneralData(token_app.master_configurations.TYPE_REQUEST_PAYMENT, "0").reverse(),
-                    declined_reqs_list = floDapps.getNextGeneralData(token_app.master_configurations.TYPE_REQUEST_PAYMENT_DECLINED, "0").reverse(),
-                    approved_reqs_list = floDapps.getNextGeneralData(token_app.master_configurations.TYPE_REQUEST_PAYMENT_APPROVED, "0").reverse();
+                const general_msg = floDapps.getNextGeneralData(token_app.master_configurations
+                        .TYPE_REQUEST_PAYMENT, "0").reverse(),
+                    declined_reqs_list = floDapps.getNextGeneralData(token_app.master_configurations
+                        .TYPE_REQUEST_PAYMENT_DECLINED, "0").reverse(),
+                    approved_reqs_list = floDapps.getNextGeneralData(token_app.master_configurations
+                        .TYPE_REQUEST_PAYMENT_APPROVED, "0").reverse();
 
                 console.log(general_msg);
                 console.log(approved_reqs_list);
                 console.log(declined_reqs_list);
 
-                let processed_payments_requests = approved_reqs_list.map(m => m.message).concat(declined_reqs_list.map(m => m.message));
+                let processed_payments_requests = approved_reqs_list.map(m => m.message).concat(declined_reqs_list
+                    .map(m => m.message));
 
                 let paymentRequestContainer = document.getElementById("payment_request_container");
 
                 for (const m of general_msg) {
-                    let { sender_flo_id, receiver_flo_id, amount, datetime, pay_req_id } = m.message;
+                    let {
+                        sender_flo_id,
+                        receiver_flo_id,
+                        amount,
+                        datetime,
+                        pay_req_id
+                    } = m.message;
                     if (processed_payments_requests.includes(pay_req_id || m.message)) continue;
                     console.log(sender_flo_id, amount, datetime, pay_req_id);
                     if (typeof sender_flo_id !== "string") continue;
@@ -12393,6 +13513,7 @@ slot[name="tab"]::slotted(.active){
                 return false
             }
         }
+
         function payment_request_status(req_id = '', status = '') {
             try {
 
@@ -12404,7 +13525,9 @@ slot[name="tab"]::slotted(.active){
                     status = token_app.master_configurations.TYPE_REQUEST_PAYMENT_APPROVED;
                 } else return;
 
-                floCloudAPI.sendGeneralData(req_id, status, { receiverID: myFloID });
+                floCloudAPI.sendGeneralData(req_id, status, {
+                    receiverID: myFloID
+                });
 
                 console.info(req_id + ' added to declined requests list.');
 
@@ -12418,7 +13541,6 @@ slot[name="tab"]::slotted(.active){
 
     <!-- Helpline -->
     <script>
-
         async function load_deposit_complaints(receiver = '', sendersArray = []) {
             try {
                 let container = document.getElementById('deposit_complaints_container');
@@ -12428,10 +13550,13 @@ slot[name="tab"]::slotted(.active){
                 await clearCashierData();
 
                 await Promise.all([
-                    floCloudAPI.requestGeneralData(token_app.master_configurations.TYPE_DEPOSITS,
-                        { receiverID: receiver }),
-                    floCloudAPI.requestGeneralData(token_app.master_configurations.TYPE_PROCESSED_DEPOSITS,
-                        { receiverID: receiver })
+                    floCloudAPI.requestGeneralData(token_app.master_configurations.TYPE_DEPOSITS, {
+                        receiverID: receiver
+                    }),
+                    floCloudAPI.requestGeneralData(token_app.master_configurations
+                    .TYPE_PROCESSED_DEPOSITS, {
+                        receiverID: receiver
+                    })
                 ])
 
                 let options = {
@@ -12461,18 +13586,24 @@ slot[name="tab"]::slotted(.active){
                 console.log(unprocessed_deposits_complaints);
 
                 for (const udc of unprocessed_deposits_complaints) {
-                    let all_users_deposits = floDapps.getNextGeneralData(token_app.master_configurations.TYPE_DEPOSITS, "0");
+                    let all_users_deposits = floDapps.getNextGeneralData(token_app.master_configurations
+                        .TYPE_DEPOSITS, "0");
                     let this_user_deposit = all_users_deposits.filter(f => f.vectorClock === udc.message.order_vc);
                     let this_user_deposit_upi_txid_list = this_user_deposit.map(m => m.message.upi_txid);
 
-                    let userData = {}, cashierData = {};
+                    let userData = {},
+                        cashierData = {};
                     let all_cashier_processed_deposits = floDapps
                         .getNextGeneralData(token_app.master_configurations.TYPE_PROCESSED_DEPOSITS, "0");
                     console.log(udc)
                     let this_cashier_processed_user_deposit = all_cashier_processed_deposits
                         .filter(f => this_user_deposit_upi_txid_list.includes(f.message.user_upi_txid));
                     if (this_user_deposit.length) {
-                        let { deposit_amount, upi_txid, user_flo_id } = this_user_deposit[0].message;
+                        let {
+                            deposit_amount,
+                            upi_txid,
+                            user_flo_id
+                        } = this_user_deposit[0].message;
                         userData = {
                             depositedAmount: deposit_amount,
                             upiTxId: upi_txid,
@@ -12482,14 +13613,16 @@ slot[name="tab"]::slotted(.active){
                         }
                     }
                     if (this_cashier_processed_user_deposit.length) {
-                        let { datetime, flo_txid } = this_cashier_processed_user_deposit[0].message;
+                        let {
+                            datetime,
+                            flo_txid
+                        } = this_cashier_processed_user_deposit[0].message;
                         cashierData = {
                             processed: true,
                             time: datetime,
                             floTxId: flo_txid
                         }
-                    }
-                    else {
+                    } else {
                         cashierData = {
                             processed: false
                         }
@@ -12524,10 +13657,14 @@ slot[name="tab"]::slotted(.active){
 
                 await clearCashierData();
 
-                await Promise.all([floCloudAPI.requestGeneralData(token_app.master_configurations.TYPE_WITHDRAWS,
-                    { receiverID: receiver }),
-                floCloudAPI.requestGeneralData(token_app.master_configurations.TYPE_PROCESSED_WITHDRAWS,
-                    { receiverID: receiver })])
+                await Promise.all([floCloudAPI.requestGeneralData(token_app.master_configurations.TYPE_WITHDRAWS, {
+                        receiverID: receiver
+                    }),
+                    floCloudAPI.requestGeneralData(token_app.master_configurations
+                    .TYPE_PROCESSED_WITHDRAWS, {
+                        receiverID: receiver
+                    })
+                ])
 
                 let options = {
                     type: token_app.master_configurations.TYPE_FILE_WITHDRAWS_COMPLAINT,
@@ -12543,15 +13680,18 @@ slot[name="tab"]::slotted(.active){
                 //options.type = token_app.master_configurations.TYPE_PROCESSED_DEPOSITS;
                 options.type = token_app.master_configurations.TYPE_PROCESSED_WITHDRAWS_COMPLAINT;
 
-                const processed_withdraws_complaints = JSON.parse(await floCloudAPI.requestApplicationData(options));
+                const processed_withdraws_complaints = JSON.parse(await floCloudAPI.requestApplicationData(
+                options));
 
                 // filter out processed tasks from unprocessed ones
                 const unprocessed_withdraws_complaints = Object.values(all_withdraws_complaints)
                     .filter(orders_comparer(Object.values(processed_withdraws_complaints)));
 
                 for (const udc of unprocessed_withdraws_complaints) {
-                    let all_users_withdraws = floDapps.getNextGeneralData(token_app.master_configurations.TYPE_WITHDRAWS, "0");
-                    let this_user_withdraws = all_users_withdraws.filter(f => f.vectorClock === udc.message.order_vc);
+                    let all_users_withdraws = floDapps.getNextGeneralData(token_app.master_configurations
+                        .TYPE_WITHDRAWS, "0");
+                    let this_user_withdraws = all_users_withdraws.filter(f => f.vectorClock === udc.message
+                        .order_vc);
                     console.log(this_user_withdraws);
 
                     let this_user_withdraws_token_txid_list = this_user_withdraws.map(m => m.message.token_txid);
@@ -12563,7 +13703,11 @@ slot[name="tab"]::slotted(.active){
                         .filter(f => this_user_withdraws_token_txid_list.includes(f.message.token_txid));
                     console.log(this_cashier_processed_user_withdraws);
                     if (this_user_withdraws.length) {
-                        let { withdraw_amount, upi_txid, user_flo_id } = this_user_withdraws[0].message;
+                        let {
+                            withdraw_amount,
+                            upi_txid,
+                            user_flo_id
+                        } = this_user_withdraws[0].message;
                         userData = {
                             withdrawnAmount: withdraw_amount,
                             upiTxId: upi_txid,
@@ -12573,14 +13717,16 @@ slot[name="tab"]::slotted(.active){
                         }
                     }
                     if (this_cashier_processed_user_withdraws.length) {
-                        let { datetime, flo_txid } = this_cashier_processed_user_withdraws[0].message;
+                        let {
+                            datetime,
+                            flo_txid
+                        } = this_cashier_processed_user_withdraws[0].message;
                         cashierData = {
                             processed: true,
                             time: datetime,
                             floTxId: flo_txid
                         }
-                    }
-                    else {
+                    } else {
                         cashierData = {
                             processed: false
                         }
@@ -12615,10 +13761,15 @@ slot[name="tab"]::slotted(.active){
 
                 await clearCashierData();
 
-                await Promise.all([floCloudAPI.requestGeneralData(token_app.master_configurations.TYPE_PAY_THROUGH_CASHIER,
-                    { receiverID: receiver }),
-                floCloudAPI.requestGeneralData(token_app.master_configurations.TYPE_PROCESSED_PAY_THROUGH_CASHIER,
-                    { receiverID: receiver })])
+                await Promise.all([floCloudAPI.requestGeneralData(token_app.master_configurations
+                        .TYPE_PAY_THROUGH_CASHIER, {
+                            receiverID: receiver
+                        }),
+                    floCloudAPI.requestGeneralData(token_app.master_configurations
+                        .TYPE_PROCESSED_PAY_THROUGH_CASHIER, {
+                            receiverID: receiver
+                        })
+                ])
 
                 let options = {
                     type: token_app.master_configurations.TYPE_FILE_PAY_THROUGH_CASHIER_COMPLAINT,
@@ -12629,22 +13780,27 @@ slot[name="tab"]::slotted(.active){
                     options.senderIDs = sendersArray;
                 }
 
-                const all_pay_thru_cashier_complaints = JSON.parse(await floCloudAPI.requestApplicationData(options));
+                const all_pay_thru_cashier_complaints = JSON.parse(await floCloudAPI.requestApplicationData(
+                    options));
 
                 options.type = token_app.master_configurations.TYPE_PROCESSED_PAY_THROUGH_CASHIER_COMPLAINT;
 
-                const processed_pay_thru_cashier_complaints = JSON.parse(await floCloudAPI.requestApplicationData(options));
+                const processed_pay_thru_cashier_complaints = JSON.parse(await floCloudAPI.requestApplicationData(
+                    options));
 
                 // filter out processed tasks from unprocessed ones
                 const unprocessed_pay_thru_cashier_complaints = Object.values(all_pay_thru_cashier_complaints)
                     .filter(orders_comparer(Object.values(processed_pay_thru_cashier_complaints)));
 
                 for (const udc of unprocessed_pay_thru_cashier_complaints) {
-                    let all_users_pay_thru_cashier = floDapps.getNextGeneralData(token_app.master_configurations.TYPE_PAY_THROUGH_CASHIER, "0");
-                    let this_user_pay_thru_cashier = all_users_pay_thru_cashier.filter(f => f.vectorClock === udc.message.order_vc);
+                    let all_users_pay_thru_cashier = floDapps.getNextGeneralData(token_app.master_configurations
+                        .TYPE_PAY_THROUGH_CASHIER, "0");
+                    let this_user_pay_thru_cashier = all_users_pay_thru_cashier.filter(f => f.vectorClock === udc
+                        .message.order_vc);
                     console.log(this_user_pay_thru_cashier);
 
-                    let this_user_pay_thru_cashier_upi_txid_list = this_user_pay_thru_cashier.map(m => m.message.upi_txid);
+                    let this_user_pay_thru_cashier_upi_txid_list = this_user_pay_thru_cashier.map(m => m.message
+                        .upi_txid);
 
                     let all_cashier_processed_pay_thru_cashier = floDapps
                         .getNextGeneralData(token_app.master_configurations.TYPE_PROCESSED_WITHDRAWS, "0");
@@ -12654,7 +13810,11 @@ slot[name="tab"]::slotted(.active){
                     console.log(this_cashier_processed_user_pay_thru_cashier);
 
                     if (this_user_pay_thru_cashier.length) {
-                        let { amount, upi_txid, receiver_flo_id } = this_user_pay_thru_cashier[0].message;
+                        let {
+                            amount,
+                            upi_txid,
+                            receiver_flo_id
+                        } = this_user_pay_thru_cashier[0].message;
                         userData = {
                             amount: amount,
                             upiTxId: upi_txid,
@@ -12665,14 +13825,16 @@ slot[name="tab"]::slotted(.active){
                         }
                     }
                     if (this_cashier_processed_user_pay_thru_cashier.length) {
-                        let { datetime, flo_txid } = this_cashier_processed_user_pay_thru_cashier[0].message;
+                        let {
+                            datetime,
+                            flo_txid
+                        } = this_cashier_processed_user_pay_thru_cashier[0].message;
                         cashierData = {
                             processed: true,
                             time: datetime,
                             floTxId: flo_txid
                         }
-                    }
-                    else {
+                    } else {
                         cashierData = {
                             processed: false
                         }
@@ -12705,8 +13867,9 @@ slot[name="tab"]::slotted(.active){
                     complaint_type = token_app.master_configurations.TYPE_PROCESSED_PAY_THROUGH_CASHIER_COMPLAINT;
                 } else return false;
 
-                floCloudAPI.sendGeneralData(input_data.message, complaint_type,
-                    { receiverID: token_app.master_configurations.helplineFloId });
+                floCloudAPI.sendGeneralData(input_data.message, complaint_type, {
+                    receiverID: token_app.master_configurations.helplineFloId
+                });
 
                 notify('Complaint marked as resolved.');
 
@@ -12714,7 +13877,6 @@ slot[name="tab"]::slotted(.active){
                 console.error(e);
             }
         }
-
     </script>
 </body>