diff --git a/basicswap/static/css/style.css b/basicswap/static/css/style.css
index cf9f1b6..d650ab3 100644
--- a/basicswap/static/css/style.css
+++ b/basicswap/static/css/style.css
@@ -16,16 +16,16 @@
 
 .floatright
 {
-  position: fixed;
-  top: 2em;
-  right: 2em;
+  position:fixed;
+  top:10px;
+  right:18px;
   margin: 0;
-  z-index: 50;
+  width:calc(33.33% - 25px);
 }
 
 .error
 {
-  border: 1px solid red;
+  background:#ff5b5b;
 }
 
 .error_msg
diff --git a/basicswap/static/images/coins/Firo-20.png b/basicswap/static/images/coins/Firo-20.png
new file mode 100644
index 0000000..82f8130
Binary files /dev/null and b/basicswap/static/images/coins/Firo-20.png differ
diff --git a/basicswap/static/images/coins/Firo.png b/basicswap/static/images/coins/Firo.png
new file mode 100644
index 0000000..cd317dd
Binary files /dev/null and b/basicswap/static/images/coins/Firo.png differ
diff --git a/basicswap/static/images/coins/Veil-20.png b/basicswap/static/images/coins/Veil-20.png
new file mode 100644
index 0000000..1c9933d
Binary files /dev/null and b/basicswap/static/images/coins/Veil-20.png differ
diff --git a/basicswap/static/images/coins/Veil.png b/basicswap/static/images/coins/Veil.png
new file mode 100644
index 0000000..858664d
Binary files /dev/null and b/basicswap/static/images/coins/Veil.png differ
diff --git a/basicswap/static/js/chart.js b/basicswap/static/js/chart.js
new file mode 100644
index 0000000..c95358a
--- /dev/null
+++ b/basicswap/static/js/chart.js
@@ -0,0 +1,19768 @@
+/**
+ * Skipped minification because the original files appears to be already minified.
+ * Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files
+ */
+var CryptoCharts = (function (t) {
+    var e = {};
+    function i(a) {
+        if (e[a]) return e[a].exports;
+        var s = (e[a] = { i: a, l: !1, exports: {} });
+        return t[a].call(s.exports, s, s.exports, i), (s.l = !0), s.exports;
+    }
+    return (
+        (i.m = t),
+        (i.c = e),
+        (i.d = function (t, e, a) {
+            i.o(t, e) || Object.defineProperty(t, e, { enumerable: !0, get: a });
+        }),
+        (i.r = function (t) {
+            "undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(t, Symbol.toStringTag, { value: "Module" }), Object.defineProperty(t, "__esModule", { value: !0 });
+        }),
+        (i.t = function (t, e) {
+            if ((1 & e && (t = i(t)), 8 & e)) return t;
+            if (4 & e && "object" == typeof t && t && t.__esModule) return t;
+            var a = Object.create(null);
+            if ((i.r(a), Object.defineProperty(a, "default", { enumerable: !0, value: t }), 2 & e && "string" != typeof t))
+                for (var s in t)
+                    i.d(
+                        a,
+                        s,
+                        function (e) {
+                            return t[e];
+                        }.bind(null, s)
+                    );
+            return a;
+        }),
+        (i.n = function (t) {
+            var e =
+                t && t.__esModule
+                    ? function () {
+                          return t.default;
+                      }
+                    : function () {
+                          return t;
+                      };
+            return i.d(e, "a", e), e;
+        }),
+        (i.o = function (t, e) {
+            return Object.prototype.hasOwnProperty.call(t, e);
+        }),
+        (i.p = ""),
+        i((i.s = 106))
+    );
+})([
+    function (t, e, i) {
+        (function (e) {
+            var i = "object",
+                a = function (t) {
+                    return t && t.Math == Math && t;
+                };
+            t.exports = a(typeof globalThis == i && globalThis) || a(typeof window == i && window) || a(typeof self == i && self) || a(typeof e == i && e) || Function("return this")();
+        }.call(this, i(23)));
+    },
+    function (t, e, i) {
+        var a = i(0),
+            s = i(16),
+            n = i(40),
+            r = i(59),
+            o = a.Symbol,
+            l = s("wks");
+        t.exports = function (t) {
+            return l[t] || (l[t] = (r && o[t]) || (r ? o : n)("Symbol." + t));
+        };
+    },
+    function (t, e, i) {
+        "use strict";
+        (function (t, a) {
+            /*!
+             * ApexCharts v3.8.0
+             * (c) 2018-2019 Juned Chhipa
+             * Released under the MIT License.
+             */
+            function s(t) {
+                return (s =
+                    "function" == typeof Symbol && "symbol" == typeof Symbol.iterator
+                        ? function (t) {
+                              return typeof t;
+                          }
+                        : function (t) {
+                              return t && "function" == typeof Symbol && t.constructor === Symbol && t !== Symbol.prototype ? "symbol" : typeof t;
+                          })(t);
+            }
+            function n(t, e) {
+                if (!(t instanceof e)) throw new TypeError("Cannot call a class as a function");
+            }
+            function r(t, e) {
+                for (var i = 0; i < e.length; i++) {
+                    var a = e[i];
+                    (a.enumerable = a.enumerable || !1), (a.configurable = !0), "value" in a && (a.writable = !0), Object.defineProperty(t, a.key, a);
+                }
+            }
+            function o(t, e, i) {
+                return e && r(t.prototype, e), i && r(t, i), t;
+            }
+            function l(t, e, i) {
+                return e in t ? Object.defineProperty(t, e, { value: i, enumerable: !0, configurable: !0, writable: !0 }) : (t[e] = i), t;
+            }
+            function h(t) {
+                for (var e = 1; e < arguments.length; e++) {
+                    var i = null != arguments[e] ? arguments[e] : {},
+                        a = Object.keys(i);
+                    "function" == typeof Object.getOwnPropertySymbols &&
+                        (a = a.concat(
+                            Object.getOwnPropertySymbols(i).filter(function (t) {
+                                return Object.getOwnPropertyDescriptor(i, t).enumerable;
+                            })
+                        )),
+                        a.forEach(function (e) {
+                            l(t, e, i[e]);
+                        });
+                }
+                return t;
+            }
+            function c(t, e) {
+                if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function");
+                (t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } })), e && u(t, e);
+            }
+            function d(t) {
+                return (d = Object.setPrototypeOf
+                    ? Object.getPrototypeOf
+                    : function (t) {
+                          return t.__proto__ || Object.getPrototypeOf(t);
+                      })(t);
+            }
+            function u(t, e) {
+                return (u =
+                    Object.setPrototypeOf ||
+                    function (t, e) {
+                        return (t.__proto__ = e), t;
+                    })(t, e);
+            }
+            function f(t, e) {
+                return !e || ("object" != typeof e && "function" != typeof e)
+                    ? (function (t) {
+                          if (void 0 === t) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+                          return t;
+                      })(t)
+                    : e;
+            }
+            function g(t) {
+                return (
+                    (function (t) {
+                        if (Array.isArray(t)) {
+                            for (var e = 0, i = new Array(t.length); e < t.length; e++) i[e] = t[e];
+                            return i;
+                        }
+                    })(t) ||
+                    (function (t) {
+                        if (Symbol.iterator in Object(t) || "[object Arguments]" === Object.prototype.toString.call(t)) return Array.from(t);
+                    })(t) ||
+                    (function () {
+                        throw new TypeError("Invalid attempt to spread non-iterable instance");
+                    })()
+                );
+            }
+            var p = (function () {
+                    function t() {
+                        n(this, t);
+                    }
+                    return (
+                        o(
+                            t,
+                            [
+                                {
+                                    key: "shadeRGBColor",
+                                    value: function (t, e) {
+                                        var i = e.split(","),
+                                            a = t < 0 ? 0 : 255,
+                                            s = t < 0 ? -1 * t : t,
+                                            n = parseInt(i[0].slice(4)),
+                                            r = parseInt(i[1]),
+                                            o = parseInt(i[2]);
+                                        return "rgb(" + (Math.round((a - n) * s) + n) + "," + (Math.round((a - r) * s) + r) + "," + (Math.round((a - o) * s) + o) + ")";
+                                    },
+                                },
+                                {
+                                    key: "shadeHexColor",
+                                    value: function (t, e) {
+                                        var i = parseInt(e.slice(1), 16),
+                                            a = t < 0 ? 0 : 255,
+                                            s = t < 0 ? -1 * t : t,
+                                            n = i >> 16,
+                                            r = (i >> 8) & 255,
+                                            o = 255 & i;
+                                        return "#" + (16777216 + 65536 * (Math.round((a - n) * s) + n) + 256 * (Math.round((a - r) * s) + r) + (Math.round((a - o) * s) + o)).toString(16).slice(1);
+                                    },
+                                },
+                                {
+                                    key: "shadeColor",
+                                    value: function (t, e) {
+                                        return e.length > 7 ? this.shadeRGBColor(t, e) : this.shadeHexColor(t, e);
+                                    },
+                                },
+                            ],
+                            [
+                                {
+                                    key: "bind",
+                                    value: function (t, e) {
+                                        return function () {
+                                            return t.apply(e, arguments);
+                                        };
+                                    },
+                                },
+                                {
+                                    key: "isObject",
+                                    value: function (t) {
+                                        return t && "object" === s(t) && !Array.isArray(t) && null != t;
+                                    },
+                                },
+                                {
+                                    key: "listToArray",
+                                    value: function (t) {
+                                        var e,
+                                            i = [];
+                                        for (e = 0; e < t.length; e++) i[e] = t[e];
+                                        return i;
+                                    },
+                                },
+                                {
+                                    key: "extend",
+                                    value: function (t, e) {
+                                        var i = this;
+                                        "function" != typeof Object.assign &&
+                                            (Object.assign = function (t) {
+                                                if (null == t) throw new TypeError("Cannot convert undefined or null to object");
+                                                for (var e = Object(t), i = 1; i < arguments.length; i++) {
+                                                    var a = arguments[i];
+                                                    if (null != a) for (var s in a) a.hasOwnProperty(s) && (e[s] = a[s]);
+                                                }
+                                                return e;
+                                            });
+                                        var a = Object.assign({}, t);
+                                        return (
+                                            this.isObject(t) &&
+                                                this.isObject(e) &&
+                                                Object.keys(e).forEach(function (s) {
+                                                    i.isObject(e[s]) && s in t ? (a[s] = i.extend(t[s], e[s])) : Object.assign(a, l({}, s, e[s]));
+                                                }),
+                                            a
+                                        );
+                                    },
+                                },
+                                {
+                                    key: "extendArray",
+                                    value: function (e, i) {
+                                        var a = [];
+                                        return (
+                                            e.map(function (e) {
+                                                a.push(t.extend(i, e));
+                                            }),
+                                            (e = a)
+                                        );
+                                    },
+                                },
+                                {
+                                    key: "monthMod",
+                                    value: function (t) {
+                                        return t % 12;
+                                    },
+                                },
+                                {
+                                    key: "addProps",
+                                    value: function (t, e, i) {
+                                        "string" == typeof e && (e = e.split(".")), (t[e[0]] = t[e[0]] || {});
+                                        var a = t[e[0]];
+                                        return e.length > 1 ? (e.shift(), this.addProps(a, e, i)) : (t[e[0]] = i), t;
+                                    },
+                                },
+                                {
+                                    key: "clone",
+                                    value: function (t) {
+                                        if ("[object Array]" === Object.prototype.toString.call(t)) {
+                                            for (var e = [], i = 0; i < t.length; i++) e[i] = this.clone(t[i]);
+                                            return e;
+                                        }
+                                        if ("object" === s(t)) {
+                                            var a = {};
+                                            for (var n in t) t.hasOwnProperty(n) && (a[n] = this.clone(t[n]));
+                                            return a;
+                                        }
+                                        return t;
+                                    },
+                                },
+                                {
+                                    key: "log10",
+                                    value: function (t) {
+                                        return Math.log(t) / Math.LN10;
+                                    },
+                                },
+                                {
+                                    key: "roundToBase10",
+                                    value: function (t) {
+                                        return Math.pow(10, Math.floor(Math.log10(t)));
+                                    },
+                                },
+                                {
+                                    key: "roundToBase",
+                                    value: function (t, e) {
+                                        return Math.pow(e, Math.floor(Math.log(t) / Math.log(e)));
+                                    },
+                                },
+                                {
+                                    key: "parseNumber",
+                                    value: function (t) {
+                                        return null === t ? t : parseFloat(t);
+                                    },
+                                },
+                                {
+                                    key: "noExponents",
+                                    value: function (t) {
+                                        var e = String(t).split(/[eE]/);
+                                        if (1 == e.length) return e[0];
+                                        var i = "",
+                                            a = t < 0 ? "-" : "",
+                                            s = e[0].replace(".", ""),
+                                            n = Number(e[1]) + 1;
+                                        if (n < 0) {
+                                            for (i = a + "0."; n++; ) i += "0";
+                                            return i + s.replace(/^\-/, "");
+                                        }
+                                        for (n -= s.length; n--; ) i += "0";
+                                        return s + i;
+                                    },
+                                },
+                                {
+                                    key: "getDimensions",
+                                    value: function (t) {
+                                        var e = getComputedStyle(t),
+                                            i = [],
+                                            a = t.clientHeight,
+                                            s = t.clientWidth;
+                                        return (a -= parseFloat(e.paddingTop) + parseFloat(e.paddingBottom)), (s -= parseFloat(e.paddingLeft) + parseFloat(e.paddingRight)), i.push(s), i.push(a), i;
+                                    },
+                                },
+                                {
+                                    key: "getBoundingClientRect",
+                                    value: function (t) {
+                                        var e = t.getBoundingClientRect();
+                                        return { top: e.top, right: e.right, bottom: e.bottom, left: e.left, width: e.width, height: e.height, x: e.x, y: e.y };
+                                    },
+                                },
+                                {
+                                    key: "hexToRgba",
+                                    value: function () {
+                                        var t = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : "#999999",
+                                            e = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : 0.6;
+                                        "#" !== t.substring(0, 1) && (t = "#999999");
+                                        var i = t.replace("#", "");
+                                        i = i.match(new RegExp("(.{" + i.length / 3 + "})", "g"));
+                                        for (var a = 0; a < i.length; a++) i[a] = parseInt(1 === i[a].length ? i[a] + i[a] : i[a], 16);
+                                        return void 0 !== e && i.push(e), "rgba(" + i.join(",") + ")";
+                                    },
+                                },
+                                {
+                                    key: "getOpacityFromRGBA",
+                                    value: function (t) {
+                                        return (t = t.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i))[3];
+                                    },
+                                },
+                                {
+                                    key: "rgb2hex",
+                                    value: function (t) {
+                                        return (t = t.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i)) && 4 === t.length
+                                            ? "#" + ("0" + parseInt(t[1], 10).toString(16)).slice(-2) + ("0" + parseInt(t[2], 10).toString(16)).slice(-2) + ("0" + parseInt(t[3], 10).toString(16)).slice(-2)
+                                            : "";
+                                    },
+                                },
+                                {
+                                    key: "isColorHex",
+                                    value: function (t) {
+                                        return /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(t);
+                                    },
+                                },
+                                {
+                                    key: "polarToCartesian",
+                                    value: function (t, e, i, a) {
+                                        var s = ((a - 90) * Math.PI) / 180;
+                                        return { x: t + i * Math.cos(s), y: e + i * Math.sin(s) };
+                                    },
+                                },
+                                {
+                                    key: "escapeString",
+                                    value: function (t) {
+                                        var e = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : "x",
+                                            i = t.toString().slice();
+                                        return (i = i.replace(/[` ~!@#$%^&*()_|+\-=?;:'",.<>\{\}\[\]\\\/]/gi, e));
+                                    },
+                                },
+                                {
+                                    key: "negToZero",
+                                    value: function (t) {
+                                        return t < 0 ? 0 : t;
+                                    },
+                                },
+                                {
+                                    key: "moveIndexInArray",
+                                    value: function (t, e, i) {
+                                        if (i >= t.length) for (var a = i - t.length + 1; a--; ) t.push(void 0);
+                                        return t.splice(i, 0, t.splice(e, 1)[0]), t;
+                                    },
+                                },
+                                {
+                                    key: "extractNumber",
+                                    value: function (t) {
+                                        return parseFloat(t.replace(/[^\d\.]*/g, ""));
+                                    },
+                                },
+                                {
+                                    key: "randomString",
+                                    value: function (t) {
+                                        for (var e = "", i = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz", a = 0; a < t; a++) e += i.charAt(Math.floor(Math.random() * i.length));
+                                        return e;
+                                    },
+                                },
+                                {
+                                    key: "findAncestor",
+                                    value: function (t, e) {
+                                        for (; (t = t.parentElement) && !t.classList.contains(e); );
+                                        return t;
+                                    },
+                                },
+                                {
+                                    key: "setELstyles",
+                                    value: function (t, e) {
+                                        for (var i in e) e.hasOwnProperty(i) && (t.style.key = e[i]);
+                                    },
+                                },
+                                {
+                                    key: "isNumber",
+                                    value: function (t) {
+                                        return !isNaN(t) && parseFloat(Number(t)) === t && !isNaN(parseInt(t, 10));
+                                    },
+                                },
+                                {
+                                    key: "isFloat",
+                                    value: function (t) {
+                                        return Number(t) === t && t % 1 != 0;
+                                    },
+                                },
+                                {
+                                    key: "isSafari",
+                                    value: function () {
+                                        return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+                                    },
+                                },
+                                {
+                                    key: "isFirefox",
+                                    value: function () {
+                                        return navigator.userAgent.toLowerCase().indexOf("firefox") > -1;
+                                    },
+                                },
+                                {
+                                    key: "isIE11",
+                                    value: function () {
+                                        if (-1 !== window.navigator.userAgent.indexOf("MSIE") || window.navigator.appVersion.indexOf("Trident/") > -1) return !0;
+                                    },
+                                },
+                                {
+                                    key: "isIE",
+                                    value: function () {
+                                        var t = window.navigator.userAgent,
+                                            e = t.indexOf("MSIE ");
+                                        if (e > 0) return parseInt(t.substring(e + 5, t.indexOf(".", e)), 10);
+                                        if (t.indexOf("Trident/") > 0) {
+                                            var i = t.indexOf("rv:");
+                                            return parseInt(t.substring(i + 3, t.indexOf(".", i)), 10);
+                                        }
+                                        var a = t.indexOf("Edge/");
+                                        return a > 0 && parseInt(t.substring(a + 5, t.indexOf(".", a)), 10);
+                                    },
+                                },
+                            ]
+                        ),
+                        t
+                    );
+                })(),
+                x = (function () {
+                    function t(e) {
+                        n(this, t), (this.ctx = e), (this.w = e.w);
+                    }
+                    return (
+                        o(t, [
+                            {
+                                key: "getDefaultFilter",
+                                value: function (t, e) {
+                                    var i = this.w;
+                                    t.unfilter(!0),
+                                        new window.SVG.Filter().size("120%", "180%", "-5%", "-40%"),
+                                        "none" !== i.config.states.normal.filter
+                                            ? this.applyFilter(t, e, i.config.states.normal.filter.type, i.config.states.normal.filter.value)
+                                            : i.config.chart.dropShadow.enabled && this.dropShadow(t, i.config.chart.dropShadow, e);
+                                },
+                            },
+                            {
+                                key: "addNormalFilter",
+                                value: function (t, e) {
+                                    var i = this.w;
+                                    i.config.chart.dropShadow.enabled && this.dropShadow(t, i.config.chart.dropShadow, e);
+                                },
+                            },
+                            {
+                                key: "addLightenFilter",
+                                value: function (t, e, i) {
+                                    var a = this,
+                                        s = this.w,
+                                        n = i.intensity;
+                                    if (!p.isFirefox()) {
+                                        t.unfilter(!0);
+                                        var r = new window.SVG.Filter();
+                                        r.size("120%", "180%", "-5%", "-40%"),
+                                            t.filter(function (t) {
+                                                var i = s.config.chart.dropShadow;
+                                                (r = i.enabled ? a.addShadow(t, e, i) : t).componentTransfer({ rgb: { type: "linear", slope: 1.5, intercept: n } });
+                                            }),
+                                            t.filterer.node.setAttribute("filterUnits", "userSpaceOnUse");
+                                    }
+                                },
+                            },
+                            {
+                                key: "addDarkenFilter",
+                                value: function (t, e, i) {
+                                    var a = this,
+                                        s = this.w,
+                                        n = i.intensity;
+                                    if (!p.isFirefox()) {
+                                        t.unfilter(!0);
+                                        var r = new window.SVG.Filter();
+                                        r.size("120%", "180%", "-5%", "-40%"),
+                                            t.filter(function (t) {
+                                                var i = s.config.chart.dropShadow;
+                                                (r = i.enabled ? a.addShadow(t, e, i) : t).componentTransfer({ rgb: { type: "linear", slope: n } });
+                                            }),
+                                            t.filterer.node.setAttribute("filterUnits", "userSpaceOnUse");
+                                    }
+                                },
+                            },
+                            {
+                                key: "applyFilter",
+                                value: function (t, e, i) {
+                                    var a = arguments.length > 3 && void 0 !== arguments[3] ? arguments[3] : 0.5;
+                                    switch (i) {
+                                        case "none":
+                                            this.addNormalFilter(t, e);
+                                            break;
+                                        case "lighten":
+                                            this.addLightenFilter(t, e, { intensity: a });
+                                            break;
+                                        case "darken":
+                                            this.addDarkenFilter(t, e, { intensity: a });
+                                    }
+                                },
+                            },
+                            {
+                                key: "addShadow",
+                                value: function (t, e, i) {
+                                    var a = i.blur,
+                                        s = i.top,
+                                        n = i.left,
+                                        r = i.color,
+                                        o = i.opacity,
+                                        l = t
+                                            .flood(Array.isArray(r) ? r[e] : r, o)
+                                            .composite(t.sourceAlpha, "in")
+                                            .offset(n, s)
+                                            .gaussianBlur(a)
+                                            .merge(t.source);
+                                    return t.blend(t.source, l);
+                                },
+                            },
+                            {
+                                key: "dropShadow",
+                                value: function (t, e) {
+                                    var i = arguments.length > 2 && void 0 !== arguments[2] ? arguments[2] : 0,
+                                        a = e.top,
+                                        s = e.left,
+                                        n = e.blur,
+                                        r = e.color,
+                                        o = e.opacity,
+                                        l = e.noUserSpaceOnUse;
+                                    return (
+                                        t.unfilter(!0),
+                                        (r = Array.isArray(r) ? r[i] : r),
+                                        new window.SVG.Filter().size("120%", "180%", "-5%", "-40%"),
+                                        t.filter(function (t) {
+                                            var e = null;
+                                            (e =
+                                                p.isSafari() || p.isFirefox() || p.isIE()
+                                                    ? t.flood(r, o).composite(t.sourceAlpha, "in").offset(s, a).gaussianBlur(n)
+                                                    : t.flood(r, o).composite(t.sourceAlpha, "in").offset(s, a).gaussianBlur(n).merge(t.source)),
+                                                t.blend(t.source, e);
+                                        }),
+                                        l || t.filterer.node.setAttribute("filterUnits", "userSpaceOnUse"),
+                                        t
+                                    );
+                                },
+                            },
+                            {
+                                key: "setSelectionFilter",
+                                value: function (t, e, i) {
+                                    var a = this.w;
+                                    if (void 0 !== a.globals.selectedDataPoints[e] && a.globals.selectedDataPoints[e].indexOf(i) > -1) {
+                                        t.node.setAttribute("selected", !0);
+                                        var s = a.config.states.active.filter;
+                                        "none" !== s && this.applyFilter(t, e, s.type, s.value);
+                                    }
+                                },
+                            },
+                        ]),
+                        t
+                    );
+                })(),
+                v = (function () {
+                    function t(e) {
+                        n(this, t), (this.ctx = e), (this.w = e.w), this.setEasingFunctions();
+                    }
+                    return (
+                        o(t, [
+                            {
+                                key: "setEasingFunctions",
+                                value: function () {
+                                    var t;
+                                    switch (this.w.config.chart.animations.easing) {
+                                        case "linear":
+                                            t = "-";
+                                            break;
+                                        case "easein":
+                                            t = "<";
+                                            break;
+                                        case "easeout":
+                                            t = ">";
+                                            break;
+                                        case "easeinout":
+                                            t = "<>";
+                                            break;
+                                        case "swing":
+                                            t = function (t) {
+                                                var e = 1.70158;
+                                                return (t -= 1) * t * ((e + 1) * t + e) + 1;
+                                            };
+                                            break;
+                                        case "bounce":
+                                            t = function (t) {
+                                                return t < 1 / 2.75
+                                                    ? 7.5625 * t * t
+                                                    : t < 2 / 2.75
+                                                    ? 7.5625 * (t -= 1.5 / 2.75) * t + 0.75
+                                                    : t < 2.5 / 2.75
+                                                    ? 7.5625 * (t -= 2.25 / 2.75) * t + 0.9375
+                                                    : 7.5625 * (t -= 2.625 / 2.75) * t + 0.984375;
+                                            };
+                                            break;
+                                        case "elastic":
+                                            t = function (t) {
+                                                return t === !!t ? t : Math.pow(2, -10 * t) * Math.sin(((t - 0.075) * (2 * Math.PI)) / 0.3) + 1;
+                                            };
+                                            break;
+                                        default:
+                                            t = "<>";
+                                    }
+                                    this.w.globals.easing = t;
+                                },
+                            },
+                            {
+                                key: "animateLine",
+                                value: function (t, e, i, a) {
+                                    t.attr(e).animate(a).attr(i);
+                                },
+                            },
+                            {
+                                key: "animateCircleRadius",
+                                value: function (t, e, i, a, s) {
+                                    e || (e = 0), t.attr({ r: e }).animate(a, s).attr({ r: i });
+                                },
+                            },
+                            {
+                                key: "animateCircle",
+                                value: function (t, e, i, a, s) {
+                                    t.attr({ r: e.r, cx: e.cx, cy: e.cy }).animate(a, s).attr({ r: i.r, cx: i.cx, cy: i.cy });
+                                },
+                            },
+                            {
+                                key: "animateRect",
+                                value: function (t, e, i, a, s) {
+                                    t.attr(e)
+                                        .animate(a)
+                                        .attr(i)
+                                        .afterAll(function () {
+                                            s();
+                                        });
+                                },
+                            },
+                            {
+                                key: "animatePathsGradually",
+                                value: function (t) {
+                                    var e = t.el,
+                                        i = t.j,
+                                        a = t.pathFrom,
+                                        s = t.pathTo,
+                                        n = t.speed,
+                                        r = t.delay,
+                                        o = t.strokeWidth,
+                                        l = this.w,
+                                        h = 0;
+                                    l.config.chart.animations.animateGradually.enabled && (h = l.config.chart.animations.animateGradually.delay),
+                                        l.config.chart.animations.dynamicAnimation.enabled && l.globals.dataChanged && (h = 0),
+                                        this.morphSVG(e, i, a, s, n, o, r * h);
+                                },
+                            },
+                            {
+                                key: "showDelayedElements",
+                                value: function () {
+                                    this.w.globals.delayedElements.forEach(function (t) {
+                                        t.el.classList.remove("hidden");
+                                    });
+                                },
+                            },
+                            {
+                                key: "morphSVG",
+                                value: function (t, e, i, a, s, n, r) {
+                                    var o = this,
+                                        l = this.w;
+                                    i || (i = t.attr("pathFrom")),
+                                        a || (a = t.attr("pathTo")),
+                                        (!i || i.indexOf("undefined") > -1 || i.indexOf("NaN") > -1) && ((i = "M 0 ".concat(l.globals.gridHeight)), (s = 1)),
+                                        (a.indexOf("undefined") > -1 || a.indexOf("NaN") > -1) && ((a = "M 0 ".concat(l.globals.gridHeight)), (s = 1)),
+                                        l.globals.shouldAnimate || (s = 1),
+                                        t
+                                            .plot(i)
+                                            .animate(1, l.globals.easing, r)
+                                            .plot(i)
+                                            .animate(s, l.globals.easing, r)
+                                            .plot(a)
+                                            .afterAll(function () {
+                                                p.isNumber(e)
+                                                    ? e === l.globals.series[l.globals.maxValsInArrayIndex].length - 2 && l.globals.shouldAnimate && (l.globals.animationEnded = !0)
+                                                    : l.globals.shouldAnimate && ((l.globals.animationEnded = !0), "function" == typeof l.config.chart.events.animationEnd && l.config.chart.events.animationEnd(o.ctx, l)),
+                                                    o.showDelayedElements();
+                                            });
+                                },
+                            },
+                        ]),
+                        t
+                    );
+                })(),
+                m = (function () {
+                    function t(e) {
+                        n(this, t), (this.ctx = e), (this.w = e.w);
+                    }
+                    return (
+                        o(
+                            t,
+                            [
+                                {
+                                    key: "drawLine",
+                                    value: function (t, e, i, a) {
+                                        var s = arguments.length > 4 && void 0 !== arguments[4] ? arguments[4] : "#a8a8a8",
+                                            n = arguments.length > 5 && void 0 !== arguments[5] ? arguments[5] : 0,
+                                            r = arguments.length > 6 && void 0 !== arguments[6] ? arguments[6] : null;
+                                        return this.w.globals.dom.Paper.line().attr({ x1: t, y1: e, x2: i, y2: a, stroke: s, "stroke-dasharray": n, "stroke-width": r });
+                                    },
+                                },
+                                {
+                                    key: "drawRect",
+                                    value: function () {
+                                        var t = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : 0,
+                                            e = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : 0,
+                                            i = arguments.length > 2 && void 0 !== arguments[2] ? arguments[2] : 0,
+                                            a = arguments.length > 3 && void 0 !== arguments[3] ? arguments[3] : 0,
+                                            s = arguments.length > 4 && void 0 !== arguments[4] ? arguments[4] : 0,
+                                            n = arguments.length > 5 && void 0 !== arguments[5] ? arguments[5] : "#fefefe",
+                                            r = arguments.length > 6 && void 0 !== arguments[6] ? arguments[6] : 1,
+                                            o = arguments.length > 7 && void 0 !== arguments[7] ? arguments[7] : null,
+                                            l = arguments.length > 8 && void 0 !== arguments[8] ? arguments[8] : null,
+                                            h = arguments.length > 9 && void 0 !== arguments[9] ? arguments[9] : 0,
+                                            c = this.w.globals.dom.Paper.rect();
+                                        return (
+                                            c.attr({ x: t, y: e, width: i > 0 ? i : 0, height: a > 0 ? a : 0, rx: s, ry: s, fill: n, opacity: r, "stroke-width": null !== o ? o : 0, stroke: null !== l ? l : "none", "stroke-dasharray": h }),
+                                            c
+                                        );
+                                    },
+                                },
+                                {
+                                    key: "drawPolygon",
+                                    value: function (t) {
+                                        var e = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : "#e1e1e1",
+                                            i = arguments.length > 2 && void 0 !== arguments[2] ? arguments[2] : "none";
+                                        return this.w.globals.dom.Paper.polygon(t).attr({ fill: i, stroke: e });
+                                    },
+                                },
+                                {
+                                    key: "drawCircle",
+                                    value: function (t) {
+                                        var e = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : null,
+                                            i = this.w.globals.dom.Paper.circle(2 * t);
+                                        return null !== e && i.attr(e), i;
+                                    },
+                                },
+                                {
+                                    key: "drawPath",
+                                    value: function (t) {
+                                        var e = t.d,
+                                            i = void 0 === e ? "" : e,
+                                            a = t.stroke,
+                                            s = void 0 === a ? "#a8a8a8" : a,
+                                            n = t.strokeWidth,
+                                            r = void 0 === n ? 1 : n,
+                                            o = t.fill,
+                                            l = t.fillOpacity,
+                                            h = void 0 === l ? 1 : l,
+                                            c = t.strokeOpacity,
+                                            d = void 0 === c ? 1 : c,
+                                            u = t.classes,
+                                            f = t.strokeLinecap,
+                                            g = void 0 === f ? null : f,
+                                            p = t.strokeDashArray,
+                                            x = void 0 === p ? 0 : p,
+                                            v = this.w;
+                                        return (
+                                            null === g && (g = v.config.stroke.lineCap),
+                                            (i.indexOf("undefined") > -1 || i.indexOf("NaN") > -1) && (i = "M 0 ".concat(v.globals.gridHeight)),
+                                            v.globals.dom.Paper.path(i).attr({ fill: o, "fill-opacity": h, stroke: s, "stroke-opacity": d, "stroke-linecap": g, "stroke-width": r, "stroke-dasharray": x, class: u })
+                                        );
+                                    },
+                                },
+                                {
+                                    key: "group",
+                                    value: function () {
+                                        var t = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : null,
+                                            e = this.w.globals.dom.Paper.group();
+                                        return null !== t && e.attr(t), e;
+                                    },
+                                },
+                                {
+                                    key: "move",
+                                    value: function (t, e) {
+                                        var i = ["M", t, e].join(" ");
+                                        return i;
+                                    },
+                                },
+                                {
+                                    key: "line",
+                                    value: function (t, e) {
+                                        var i = arguments.length > 2 && void 0 !== arguments[2] ? arguments[2] : null,
+                                            a = null;
+                                        return null === i ? (a = ["L", t, e].join(" ")) : "H" === i ? (a = ["H", t].join(" ")) : "V" === i && (a = ["V", e].join(" ")), a;
+                                    },
+                                },
+                                {
+                                    key: "curve",
+                                    value: function (t, e, i, a, s, n) {
+                                        var r = ["C", t, e, i, a, s, n].join(" ");
+                                        return r;
+                                    },
+                                },
+                                {
+                                    key: "quadraticCurve",
+                                    value: function (t, e, i, a) {
+                                        return ["Q", t, e, i, a].join(" ");
+                                    },
+                                },
+                                {
+                                    key: "arc",
+                                    value: function (t, e, i, a, s, n, r) {
+                                        var o = "A";
+                                        arguments.length > 7 && void 0 !== arguments[7] && arguments[7] && (o = "a");
+                                        var l = [o, t, e, i, a, s, n, r].join(" ");
+                                        return l;
+                                    },
+                                },
+                                {
+                                    key: "renderPaths",
+                                    value: function (t) {
+                                        var e,
+                                            i = t.i,
+                                            a = t.j,
+                                            s = t.realIndex,
+                                            n = t.pathFrom,
+                                            r = t.pathTo,
+                                            o = t.stroke,
+                                            l = t.strokeWidth,
+                                            c = t.strokeLinecap,
+                                            d = t.fill,
+                                            u = t.animationDelay,
+                                            f = t.initialSpeed,
+                                            g = t.dataChangeSpeed,
+                                            p = t.className,
+                                            m = t.id,
+                                            b = t.shouldClipToGrid,
+                                            y = void 0 === b || b,
+                                            w = t.bindEventsOnPaths,
+                                            k = void 0 === w || w,
+                                            S = t.drawShadow,
+                                            A = void 0 === S || S,
+                                            C = this.w,
+                                            L = new x(this.ctx),
+                                            E = new v(this.ctx),
+                                            P = this.w.config.chart.animations.enabled,
+                                            T = P && this.w.config.chart.animations.dynamicAnimation.enabled,
+                                            M = !!((P && !C.globals.resized) || (T && C.globals.dataChanged && C.globals.shouldAnimate));
+                                        M ? (e = n) : ((e = r), (this.w.globals.animationEnded = !0));
+                                        var z = C.config.stroke.dashArray,
+                                            I = 0;
+                                        I = Array.isArray(z) ? z[s] : C.config.stroke.dashArray;
+                                        var X = this.drawPath({ d: e, stroke: o, strokeWidth: l, fill: d, fillOpacity: 1, classes: p, strokeLinecap: c, strokeDashArray: I });
+                                        if ((X.attr("id", "".concat(m, "-").concat(i)), X.attr("index", s), y && X.attr({ "clip-path": "url(#gridRectMask".concat(C.globals.cuid, ")") }), "none" !== C.config.states.normal.filter.type))
+                                            L.getDefaultFilter(X, s);
+                                        else if (
+                                            C.config.chart.dropShadow.enabled &&
+                                            A &&
+                                            (!C.config.chart.dropShadow.enabledSeries || (C.config.chart.dropShadow.enabledSeries && -1 !== C.config.chart.dropShadow.enabledSeries.indexOf(s)))
+                                        ) {
+                                            var F = C.config.chart.dropShadow;
+                                            L.dropShadow(X, F, s);
+                                        }
+                                        k &&
+                                            (X.node.addEventListener("mouseenter", this.pathMouseEnter.bind(this, X)),
+                                            X.node.addEventListener("mouseleave", this.pathMouseLeave.bind(this, X)),
+                                            X.node.addEventListener("mousedown", this.pathMouseDown.bind(this, X))),
+                                            X.attr({ pathTo: r, pathFrom: n });
+                                        var Y = { el: X, j: a, pathFrom: n, pathTo: r, strokeWidth: l };
+                                        return (
+                                            !P || C.globals.resized || C.globals.dataChanged ? (!C.globals.resized && C.globals.dataChanged) || E.showDelayedElements() : E.animatePathsGradually(h({}, Y, { speed: f, delay: u })),
+                                            C.globals.dataChanged && T && M && E.animatePathsGradually(h({}, Y, { speed: g })),
+                                            X
+                                        );
+                                    },
+                                },
+                                {
+                                    key: "drawPattern",
+                                    value: function (t, e, i) {
+                                        var a = arguments.length > 3 && void 0 !== arguments[3] ? arguments[3] : "#a8a8a8",
+                                            s = arguments.length > 4 && void 0 !== arguments[4] ? arguments[4] : 0;
+                                        return this.w.globals.dom.Paper.pattern(e, i, function (n) {
+                                            "horizontalLines" === t
+                                                ? n.line(0, 0, i, 0).stroke({ color: a, width: s + 1 })
+                                                : "verticalLines" === t
+                                                ? n.line(0, 0, 0, e).stroke({ color: a, width: s + 1 })
+                                                : "slantedLines" === t
+                                                ? n.line(0, 0, e, i).stroke({ color: a, width: s })
+                                                : "squares" === t
+                                                ? n.rect(e, i).fill("none").stroke({ color: a, width: s })
+                                                : "circles" === t && n.circle(e).fill("none").stroke({ color: a, width: s });
+                                        });
+                                    },
+                                },
+                                {
+                                    key: "drawGradient",
+                                    value: function (t, e, i, a, s) {
+                                        var n,
+                                            r = arguments.length > 5 && void 0 !== arguments[5] ? arguments[5] : null,
+                                            o = arguments.length > 6 && void 0 !== arguments[6] ? arguments[6] : null,
+                                            l = arguments.length > 7 && void 0 !== arguments[7] ? arguments[7] : null,
+                                            h = arguments.length > 8 && void 0 !== arguments[8] ? arguments[8] : 0,
+                                            c = this.w;
+                                        (e = p.hexToRgba(e, a)), (i = p.hexToRgba(i, s));
+                                        var d = 0,
+                                            u = 1,
+                                            f = 1,
+                                            g = null;
+                                        null !== o && ((d = void 0 !== o[0] ? o[0] / 100 : 0), (u = void 0 !== o[1] ? o[1] / 100 : 1), (f = void 0 !== o[2] ? o[2] / 100 : 1), (g = void 0 !== o[3] ? o[3] / 100 : null));
+                                        var x = !("donut" !== c.config.chart.type && "pie" !== c.config.chart.type && "bubble" !== c.config.chart.type);
+                                        if (
+                                            ((n =
+                                                null === l || 0 === l.length
+                                                    ? c.globals.dom.Paper.gradient(x ? "radial" : "linear", function (t) {
+                                                          t.at(d, e, a), t.at(u, i, s), t.at(f, i, s), null !== g && t.at(g, e, a);
+                                                      })
+                                                    : c.globals.dom.Paper.gradient(x ? "radial" : "linear", function (t) {
+                                                          (Array.isArray(l[h]) ? l[h] : l).forEach(function (e) {
+                                                              t.at(e.offset / 100, e.color, e.opacity);
+                                                          });
+                                                      })),
+                                            x)
+                                        ) {
+                                            var v = c.globals.gridWidth / 2,
+                                                m = c.globals.gridHeight / 2;
+                                            "bubble" !== c.config.chart.type ? n.attr({ gradientUnits: "userSpaceOnUse", cx: v, cy: m, r: r }) : n.attr({ cx: 0.5, cy: 0.5, r: 0.8, fx: 0.2, fy: 0.2 });
+                                        } else "vertical" === t ? n.from(0, 0).to(0, 1) : "diagonal" === t ? n.from(0, 0).to(1, 1) : "horizontal" === t ? n.from(0, 1).to(1, 1) : "diagonal2" === t && n.from(0, 1).to(2, 2);
+                                        return n;
+                                    },
+                                },
+                                {
+                                    key: "drawText",
+                                    value: function (t) {
+                                        var e,
+                                            i = this.w,
+                                            a = t.x,
+                                            s = t.y,
+                                            n = t.text,
+                                            r = t.textAnchor,
+                                            o = t.fontSize,
+                                            l = t.fontFamily,
+                                            h = t.foreColor,
+                                            c = t.opacity;
+                                        return (
+                                            void 0 === n && (n = ""),
+                                            r || (r = "start"),
+                                            h || (h = i.config.chart.foreColor),
+                                            (l = l || i.config.chart.fontFamily),
+                                            (e = Array.isArray(n)
+                                                ? i.globals.dom.Paper.text(function (t) {
+                                                      for (var e = 0; e < n.length; e++) t.tspan(n[e]);
+                                                  })
+                                                : i.globals.dom.Paper.plain(n)).attr({ x: a, y: s, "text-anchor": r, "dominant-baseline": "auto", "font-size": o, "font-family": l, fill: h, class: t.cssClass }),
+                                            (e.node.style.fontFamily = l),
+                                            (e.node.style.opacity = c),
+                                            e
+                                        );
+                                    },
+                                },
+                                {
+                                    key: "addTspan",
+                                    value: function (t, e, i) {
+                                        var a = t.tspan(e);
+                                        i || (i = this.w.config.chart.fontFamily), (a.node.style.fontFamily = i);
+                                    },
+                                },
+                                {
+                                    key: "drawMarker",
+                                    value: function (t, e, i) {
+                                        t = t || 0;
+                                        var a = i.pSize || 0,
+                                            s = null;
+                                        if ("square" === i.shape) {
+                                            var n = void 0 === i.pRadius ? a / 2 : i.pRadius;
+                                            null === e && ((a = 0), (n = 0));
+                                            var r = 1.2 * a + n,
+                                                o = this.drawRect(r, r, r, r, n);
+                                            o.attr({
+                                                x: t - r / 2,
+                                                y: e - r / 2,
+                                                cx: t,
+                                                cy: e,
+                                                class: i.class ? i.class : "",
+                                                fill: i.pointFillColor,
+                                                "fill-opacity": i.pointFillOpacity ? i.pointFillOpacity : 1,
+                                                stroke: i.pointStrokeColor,
+                                                "stroke-width": i.pWidth ? i.pWidth : 0,
+                                                "stroke-opacity": i.pointStrokeOpacity ? i.pointStrokeOpacity : 1,
+                                            }),
+                                                (s = o);
+                                        } else
+                                            "circle" === i.shape &&
+                                                (p.isNumber(e) || ((a = 0), (e = 0)),
+                                                (s = this.drawCircle(a, {
+                                                    cx: t,
+                                                    cy: e,
+                                                    class: i.class ? i.class : "",
+                                                    stroke: i.pointStrokeColor,
+                                                    fill: i.pointFillColor,
+                                                    "fill-opacity": i.pointFillOpacity ? i.pointFillOpacity : 1,
+                                                    "stroke-width": i.pWidth ? i.pWidth : 0,
+                                                    "stroke-opacity": i.pointStrokeOpacity ? i.pointStrokeOpacity : 1,
+                                                })));
+                                        return s;
+                                    },
+                                },
+                                {
+                                    key: "pathMouseEnter",
+                                    value: function (t, e) {
+                                        var i = this.w,
+                                            a = new x(this.ctx),
+                                            s = parseInt(t.node.getAttribute("index")),
+                                            n = parseInt(t.node.getAttribute("j"));
+                                        if (
+                                            ("function" == typeof i.config.chart.events.dataPointMouseEnter && i.config.chart.events.dataPointMouseEnter(e, this.ctx, { seriesIndex: s, dataPointIndex: n, w: i }),
+                                            this.ctx.fireEvent("dataPointMouseEnter", [e, this.ctx, { seriesIndex: s, dataPointIndex: n, w: i }]),
+                                            ("none" === i.config.states.active.filter.type || "true" !== t.node.getAttribute("selected")) &&
+                                                "none" !== i.config.states.hover.filter.type &&
+                                                "none" !== i.config.states.active.filter.type &&
+                                                !i.globals.isTouchDevice)
+                                        ) {
+                                            var r = i.config.states.hover.filter;
+                                            a.applyFilter(t, s, r.type, r.value);
+                                        }
+                                    },
+                                },
+                                {
+                                    key: "pathMouseLeave",
+                                    value: function (t, e) {
+                                        var i = this.w,
+                                            a = new x(this.ctx),
+                                            s = parseInt(t.node.getAttribute("index")),
+                                            n = parseInt(t.node.getAttribute("j"));
+                                        "function" == typeof i.config.chart.events.dataPointMouseLeave && i.config.chart.events.dataPointMouseLeave(e, this.ctx, { seriesIndex: s, dataPointIndex: n, w: i }),
+                                            this.ctx.fireEvent("dataPointMouseLeave", [e, this.ctx, { seriesIndex: s, dataPointIndex: n, w: i }]),
+                                            ("none" !== i.config.states.active.filter.type && "true" === t.node.getAttribute("selected")) || ("none" !== i.config.states.hover.filter.type && a.getDefaultFilter(t, s));
+                                    },
+                                },
+                                {
+                                    key: "pathMouseDown",
+                                    value: function (t, e) {
+                                        var i = this.w,
+                                            a = new x(this.ctx),
+                                            s = parseInt(t.node.getAttribute("index")),
+                                            n = parseInt(t.node.getAttribute("j")),
+                                            r = "false";
+                                        if ("true" === t.node.getAttribute("selected")) {
+                                            if ((t.node.setAttribute("selected", "false"), i.globals.selectedDataPoints[s].indexOf(n) > -1)) {
+                                                var o = i.globals.selectedDataPoints[s].indexOf(n);
+                                                i.globals.selectedDataPoints[s].splice(o, 1);
+                                            }
+                                        } else {
+                                            if (!i.config.states.active.allowMultipleDataPointsSelection && i.globals.selectedDataPoints.length > 0) {
+                                                i.globals.selectedDataPoints = [];
+                                                var l = i.globals.dom.Paper.select(".apexcharts-series path").members,
+                                                    h = i.globals.dom.Paper.select(".apexcharts-series circle, .apexcharts-series rect").members;
+                                                l.forEach(function (t) {
+                                                    t.node.setAttribute("selected", "false"), a.getDefaultFilter(t, s);
+                                                }),
+                                                    h.forEach(function (t) {
+                                                        t.node.setAttribute("selected", "false"), a.getDefaultFilter(t, s);
+                                                    });
+                                            }
+                                            t.node.setAttribute("selected", "true"), (r = "true"), void 0 === i.globals.selectedDataPoints[s] && (i.globals.selectedDataPoints[s] = []), i.globals.selectedDataPoints[s].push(n);
+                                        }
+                                        if ("true" === r) {
+                                            var c = i.config.states.active.filter;
+                                            "none" !== c && a.applyFilter(t, s, c.type, c.value);
+                                        } else "none" !== i.config.states.active.filter.type && a.getDefaultFilter(t, s);
+                                        "function" == typeof i.config.chart.events.dataPointSelection &&
+                                            i.config.chart.events.dataPointSelection(e, this.ctx, { selectedDataPoints: i.globals.selectedDataPoints, seriesIndex: s, dataPointIndex: n, w: i }),
+                                            e && this.ctx.fireEvent("dataPointSelection", [e, this.ctx, { selectedDataPoints: i.globals.selectedDataPoints, seriesIndex: s, dataPointIndex: n, w: i }]);
+                                    },
+                                },
+                                {
+                                    key: "rotateAroundCenter",
+                                    value: function (t) {
+                                        var e = t.getBBox();
+                                        return { x: e.x + e.width / 2, y: e.y + e.height / 2 };
+                                    },
+                                },
+                                {
+                                    key: "getTextRects",
+                                    value: function (t, e, i, a) {
+                                        var s = !(arguments.length > 4 && void 0 !== arguments[4]) || arguments[4],
+                                            n = this.w,
+                                            r = this.drawText({ x: -200, y: -200, text: t, textAnchor: "start", fontSize: e, fontFamily: i, foreColor: "#fff", opacity: 0 });
+                                        a && r.attr("transform", a), n.globals.dom.Paper.add(r);
+                                        var o = r.bbox();
+                                        return s || (o = r.node.getBoundingClientRect()), r.remove(), { width: o.width, height: o.height };
+                                    },
+                                },
+                                {
+                                    key: "placeTextWithEllipsis",
+                                    value: function (t, e, i) {
+                                        if (((t.textContent = e), e.length > 0 && t.getComputedTextLength() >= i)) {
+                                            for (var a = e.length - 3; a > 0; a -= 3) if (t.getSubStringLength(0, a) <= i) return void (t.textContent = e.substring(0, a) + "...");
+                                            t.textContent = "...";
+                                        }
+                                    },
+                                },
+                            ],
+                            [
+                                {
+                                    key: "setAttrs",
+                                    value: function (t, e) {
+                                        for (var i in e) e.hasOwnProperty(i) && t.setAttribute(i, e[i]);
+                                    },
+                                },
+                            ]
+                        ),
+                        t
+                    );
+                })();
+            var b = {
+                    name: "en",
+                    options: {
+                        months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
+                        shortMonths: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
+                        days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
+                        shortDays: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
+                        toolbar: {
+                            exportToSVG: "Download SVG",
+                            exportToPNG: "Download PNG",
+                            menu: "Menu",
+                            selection: "Selection",
+                            selectionZoom: "Selection Zoom",
+                            zoomIn: "Zoom In",
+                            zoomOut: "Zoom Out",
+                            pan: "Panning",
+                            reset: "Reset Zoom",
+                        },
+                    },
+                },
+                y = (function () {
+                    function t() {
+                        n(this, t),
+                            (this.yAxis = {
+                                show: !0,
+                                showAlways: !1,
+                                seriesName: void 0,
+                                opposite: !1,
+                                reversed: !1,
+                                logarithmic: !1,
+                                tickAmount: void 0,
+                                forceNiceScale: !1,
+                                max: void 0,
+                                min: void 0,
+                                floating: !1,
+                                decimalsInFloat: void 0,
+                                labels: { show: !0, minWidth: 0, maxWidth: 160, offsetX: 0, offsetY: 0, align: void 0, rotate: 0, padding: 20, style: { colors: [], fontSize: "11px", fontFamily: void 0, cssClass: "" }, formatter: void 0 },
+                                axisBorder: { show: !1, color: "#78909C", offsetX: 0, offsetY: 0 },
+                                axisTicks: { show: !1, color: "#78909C", width: 6, offsetX: 0, offsetY: 0 },
+                                title: { text: void 0, rotate: 90, offsetY: 0, offsetX: 0, style: { color: void 0, fontSize: "11px", fontFamily: void 0, cssClass: "" } },
+                                tooltip: { enabled: !1, offsetX: 0 },
+                                crosshairs: { show: !0, position: "front", stroke: { color: "#b6b6b6", width: 1, dashArray: 0 } },
+                            }),
+                            (this.xAxisAnnotation = {
+                                x: 0,
+                                x2: null,
+                                strokeDashArray: 1,
+                                fillColor: "#c2c2c2",
+                                borderColor: "#c2c2c2",
+                                opacity: 0.3,
+                                offsetX: 0,
+                                offsetY: 0,
+                                label: {
+                                    borderColor: "#c2c2c2",
+                                    borderWidth: 1,
+                                    text: void 0,
+                                    textAnchor: "middle",
+                                    orientation: "vertical",
+                                    position: "top",
+                                    offsetX: 0,
+                                    offsetY: 0,
+                                    style: { background: "#fff", color: void 0, fontSize: "11px", fontFamily: void 0, cssClass: "", padding: { left: 5, right: 5, top: 2, bottom: 2 } },
+                                },
+                            }),
+                            (this.yAxisAnnotation = {
+                                y: 0,
+                                y2: null,
+                                strokeDashArray: 1,
+                                fillColor: "#c2c2c2",
+                                borderColor: "#c2c2c2",
+                                opacity: 0.3,
+                                offsetX: 0,
+                                offsetY: 0,
+                                yAxisIndex: 0,
+                                label: {
+                                    borderColor: "#c2c2c2",
+                                    borderWidth: 1,
+                                    text: void 0,
+                                    textAnchor: "end",
+                                    position: "right",
+                                    offsetX: 0,
+                                    offsetY: -3,
+                                    style: { background: "#fff", color: void 0, fontSize: "11px", fontFamily: void 0, cssClass: "", padding: { left: 5, right: 5, top: 0, bottom: 2 } },
+                                },
+                            }),
+                            (this.pointAnnotation = {
+                                x: 0,
+                                y: null,
+                                yAxisIndex: 0,
+                                seriesIndex: 0,
+                                marker: { size: 0, fillColor: "#fff", strokeWidth: 2, strokeColor: "#333", shape: "circle", offsetX: 0, offsetY: 0, radius: 2, cssClass: "" },
+                                label: {
+                                    borderColor: "#c2c2c2",
+                                    borderWidth: 1,
+                                    text: void 0,
+                                    textAnchor: "middle",
+                                    offsetX: 0,
+                                    offsetY: -15,
+                                    style: { background: "#fff", color: void 0, fontSize: "11px", fontFamily: void 0, cssClass: "", padding: { left: 5, right: 5, top: 0, bottom: 2 } },
+                                },
+                                customSVG: { SVG: void 0, cssClass: void 0, offsetX: 0, offsetY: 0 },
+                            });
+                    }
+                    return (
+                        o(t, [
+                            {
+                                key: "init",
+                                value: function () {
+                                    return {
+                                        annotations: { position: "front", yaxis: [this.yAxisAnnotation], xaxis: [this.xAxisAnnotation], points: [this.pointAnnotation] },
+                                        chart: {
+                                            animations: { enabled: !0, easing: "easeinout", speed: 800, animateGradually: { delay: 150, enabled: !0 }, dynamicAnimation: { enabled: !0, speed: 350 } },
+                                            background: "transparent",
+                                            locales: [b],
+                                            defaultLocale: "en",
+                                            dropShadow: { enabled: !1, enabledSeries: void 0, top: 2, left: 2, blur: 4, color: "#000", opacity: 0.35 },
+                                            events: {
+                                                animationEnd: void 0,
+                                                beforeMount: void 0,
+                                                mounted: void 0,
+                                                updated: void 0,
+                                                click: void 0,
+                                                legendClick: void 0,
+                                                markerClick: void 0,
+                                                selection: void 0,
+                                                dataPointSelection: void 0,
+                                                dataPointMouseEnter: void 0,
+                                                dataPointMouseLeave: void 0,
+                                                beforeZoom: void 0,
+                                                zoomed: void 0,
+                                                scrolled: void 0,
+                                            },
+                                            foreColor: "#373d3f",
+                                            fontFamily: "Helvetica, Arial, sans-serif",
+                                            height: "auto",
+                                            parentHeightOffset: 15,
+                                            id: void 0,
+                                            group: void 0,
+                                            offsetX: 0,
+                                            offsetY: 0,
+                                            selection: {
+                                                enabled: !1,
+                                                type: "x",
+                                                fill: { color: "#24292e", opacity: 0.1 },
+                                                stroke: { width: 1, color: "#24292e", opacity: 0.4, dashArray: 3 },
+                                                xaxis: { min: void 0, max: void 0 },
+                                                yaxis: { min: void 0, max: void 0 },
+                                            },
+                                            sparkline: { enabled: !1 },
+                                            brush: { enabled: !1, autoScaleYaxis: !0, target: void 0 },
+                                            stacked: !1,
+                                            stackType: "normal",
+                                            toolbar: { show: !0, tools: { download: !0, selection: !0, zoom: !0, zoomin: !0, zoomout: !0, pan: !0, reset: !0, customIcons: [] }, autoSelected: "zoom" },
+                                            type: "line",
+                                            width: "100%",
+                                            zoom: { enabled: !0, type: "x", autoScaleYaxis: !1, zoomedArea: { fill: { color: "#90CAF9", opacity: 0.4 }, stroke: { color: "#0D47A1", opacity: 0.4, width: 1 } } },
+                                        },
+                                        plotOptions: {
+                                            bar: {
+                                                horizontal: !1,
+                                                columnWidth: "70%",
+                                                barHeight: "70%",
+                                                distributed: !1,
+                                                endingShape: "flat",
+                                                colors: { ranges: [], backgroundBarColors: [], backgroundBarOpacity: 1 },
+                                                dataLabels: { maxItems: 100, hideOverflowingLabels: !0, position: "top" },
+                                            },
+                                            candlestick: { colors: { upward: "#00B746", downward: "#EF403C" }, wick: { useFillColor: !0 } },
+                                            heatmap: { radius: 2, enableShades: !0, shadeIntensity: 0.5, reverseNegativeShade: !0, distributed: !1, colorScale: { inverse: !1, ranges: [], min: void 0, max: void 0 } },
+                                            radialBar: {
+                                                size: void 0,
+                                                inverseOrder: !1,
+                                                startAngle: 0,
+                                                endAngle: 360,
+                                                offsetX: 0,
+                                                offsetY: 0,
+                                                hollow: {
+                                                    margin: 5,
+                                                    size: "50%",
+                                                    background: "transparent",
+                                                    image: void 0,
+                                                    imageWidth: 150,
+                                                    imageHeight: 150,
+                                                    imageOffsetX: 0,
+                                                    imageOffsetY: 0,
+                                                    imageClipped: !0,
+                                                    position: "front",
+                                                    dropShadow: { enabled: !1, top: 0, left: 0, blur: 3, color: "#000", opacity: 0.5 },
+                                                },
+                                                track: {
+                                                    show: !0,
+                                                    startAngle: void 0,
+                                                    endAngle: void 0,
+                                                    background: "#f2f2f2",
+                                                    strokeWidth: "97%",
+                                                    opacity: 1,
+                                                    margin: 5,
+                                                    dropShadow: { enabled: !1, top: 0, left: 0, blur: 3, color: "#000", opacity: 0.5 },
+                                                },
+                                                dataLabels: {
+                                                    show: !0,
+                                                    name: { show: !0, fontSize: "16px", fontFamily: void 0, color: void 0, offsetY: 0 },
+                                                    value: {
+                                                        show: !0,
+                                                        fontSize: "14px",
+                                                        fontFamily: void 0,
+                                                        color: void 0,
+                                                        offsetY: 16,
+                                                        formatter: function (t) {
+                                                            return t + "%";
+                                                        },
+                                                    },
+                                                    total: {
+                                                        show: !1,
+                                                        label: "Total",
+                                                        color: void 0,
+                                                        formatter: function (t) {
+                                                            return (
+                                                                t.globals.seriesTotals.reduce(function (t, e) {
+                                                                    return t + e;
+                                                                }, 0) /
+                                                                    t.globals.series.length +
+                                                                "%"
+                                                            );
+                                                        },
+                                                    },
+                                                },
+                                            },
+                                            rangeBar: {},
+                                            pie: {
+                                                size: void 0,
+                                                customScale: 1,
+                                                offsetX: 0,
+                                                offsetY: 0,
+                                                expandOnClick: !0,
+                                                dataLabels: { offset: 0, minAngleToShowLabel: 10 },
+                                                donut: {
+                                                    size: "65%",
+                                                    background: "transparent",
+                                                    labels: {
+                                                        show: !1,
+                                                        name: { show: !0, fontSize: "16px", fontFamily: void 0, color: void 0, offsetY: -10 },
+                                                        value: {
+                                                            show: !0,
+                                                            fontSize: "20px",
+                                                            fontFamily: void 0,
+                                                            color: void 0,
+                                                            offsetY: 10,
+                                                            formatter: function (t) {
+                                                                return t;
+                                                            },
+                                                        },
+                                                        total: {
+                                                            show: !1,
+                                                            label: "Total",
+                                                            color: void 0,
+                                                            formatter: function (t) {
+                                                                return t.globals.seriesTotals.reduce(function (t, e) {
+                                                                    return t + e;
+                                                                }, 0);
+                                                            },
+                                                        },
+                                                    },
+                                                },
+                                            },
+                                            radar: { size: void 0, offsetX: 0, offsetY: 0, polygons: { strokeColors: "#e8e8e8", connectorColors: "#e8e8e8", fill: { colors: void 0 } } },
+                                        },
+                                        colors: void 0,
+                                        dataLabels: {
+                                            enabled: !0,
+                                            enabledOnSeries: void 0,
+                                            formatter: function (t) {
+                                                return null !== t ? t : "";
+                                            },
+                                            textAnchor: "middle",
+                                            offsetX: 0,
+                                            offsetY: 0,
+                                            style: { fontSize: "12px", fontFamily: void 0, colors: void 0 },
+                                            dropShadow: { enabled: !1, top: 1, left: 1, blur: 1, color: "#000", opacity: 0.45 },
+                                        },
+                                        fill: {
+                                            type: "solid",
+                                            colors: void 0,
+                                            opacity: 0.85,
+                                            gradient: { shade: "dark", type: "horizontal", shadeIntensity: 0.5, gradientToColors: void 0, inverseColors: !0, opacityFrom: 1, opacityTo: 1, stops: [0, 50, 100], colorStops: [] },
+                                            image: { src: [], width: void 0, height: void 0 },
+                                            pattern: { style: "sqaures", width: 6, height: 6, strokeWidth: 2 },
+                                        },
+                                        grid: {
+                                            show: !0,
+                                            borderColor: "#e0e0e0",
+                                            strokeDashArray: 0,
+                                            position: "back",
+                                            xaxis: { lines: { show: !1, animate: !1 } },
+                                            yaxis: { lines: { show: !0, animate: !1 } },
+                                            row: { colors: void 0, opacity: 0.5 },
+                                            column: { colors: void 0, opacity: 0.5 },
+                                            padding: { top: 0, right: 10, bottom: 0, left: 12 },
+                                        },
+                                        labels: [],
+                                        legend: {
+                                            show: !0,
+                                            showForSingleSeries: !1,
+                                            showForNullSeries: !0,
+                                            showForZeroSeries: !0,
+                                            floating: !1,
+                                            position: "bottom",
+                                            horizontalAlign: "center",
+                                            fontSize: "12px",
+                                            fontFamily: void 0,
+                                            width: void 0,
+                                            height: void 0,
+                                            formatter: void 0,
+                                            offsetX: -20,
+                                            offsetY: 0,
+                                            labels: { colors: void 0, useSeriesColors: !1 },
+                                            markers: { width: 12, height: 12, strokeWidth: 0, strokeColor: "#fff", radius: 12, customHTML: void 0, offsetX: 0, offsetY: 0, onClick: void 0 },
+                                            itemMargin: { horizontal: 0, vertical: 5 },
+                                            onItemClick: { toggleDataSeries: !0 },
+                                            onItemHover: { highlightDataSeries: !0 },
+                                        },
+                                        markers: {
+                                            discrete: [],
+                                            size: 0,
+                                            colors: void 0,
+                                            strokeColors: "#fff",
+                                            strokeWidth: 2,
+                                            strokeOpacity: 0.9,
+                                            fillOpacity: 1,
+                                            shape: "circle",
+                                            radius: 2,
+                                            offsetX: 0,
+                                            offsetY: 0,
+                                            hover: { size: void 0, sizeOffset: 3 },
+                                        },
+                                        noData: { text: void 0, align: "center", verticalAlign: "middle", offsetX: 0, offsetY: 0, style: { color: void 0, fontSize: "14px", fontFamily: void 0 } },
+                                        responsive: [],
+                                        series: void 0,
+                                        states: {
+                                            normal: { filter: { type: "none", value: 0 } },
+                                            hover: { filter: { type: "lighten", value: 0.15 } },
+                                            active: { allowMultipleDataPointsSelection: !1, filter: { type: "darken", value: 0.65 } },
+                                        },
+                                        title: { text: void 0, align: "left", margin: 10, offsetX: 0, offsetY: 0, floating: !1, style: { fontSize: "14px", fontFamily: void 0, color: void 0 } },
+                                        subtitle: { text: void 0, align: "left", margin: 10, offsetX: 0, offsetY: 30, floating: !1, style: { fontSize: "12px", fontFamily: void 0, color: void 0 } },
+                                        stroke: { show: !0, curve: "smooth", lineCap: "butt", width: 2, colors: void 0, dashArray: 0 },
+                                        tooltip: {
+                                            enabled: !0,
+                                            enabledOnSeries: void 0,
+                                            shared: !0,
+                                            followCursor: !1,
+                                            intersect: !1,
+                                            inverseOrder: !1,
+                                            custom: void 0,
+                                            fillSeriesColor: !1,
+                                            theme: "light",
+                                            style: { fontSize: "12px", fontFamily: void 0 },
+                                            onDatasetHover: { highlightDataSeries: !1 },
+                                            x: { show: !0, format: "dd MMM", formatter: void 0 },
+                                            y: {
+                                                formatter: void 0,
+                                                title: {
+                                                    formatter: function (t) {
+                                                        return t;
+                                                    },
+                                                },
+                                            },
+                                            z: { formatter: void 0, title: "Size: " },
+                                            marker: { show: !0 },
+                                            items: { display: "flex" },
+                                            fixed: { enabled: !1, position: "topRight", offsetX: 0, offsetY: 0 },
+                                        },
+                                        xaxis: {
+                                            type: "category",
+                                            categories: [],
+                                            offsetX: 0,
+                                            offsetY: 0,
+                                            labels: {
+                                                show: !0,
+                                                rotate: -45,
+                                                rotateAlways: !1,
+                                                hideOverlappingLabels: !0,
+                                                trim: !0,
+                                                minHeight: void 0,
+                                                maxHeight: 120,
+                                                showDuplicates: !0,
+                                                style: { colors: [], fontSize: "12px", fontFamily: void 0, cssClass: "" },
+                                                offsetX: 0,
+                                                offsetY: 0,
+                                                format: void 0,
+                                                formatter: void 0,
+                                                datetimeFormatter: { year: "yyyy", month: "MMM 'yy", day: "dd MMM", hour: "HH:mm", minute: "HH:mm:ss" },
+                                            },
+                                            axisBorder: { show: !0, color: "#78909C", width: "100%", height: 1, offsetX: 0, offsetY: 0 },
+                                            axisTicks: { show: !0, color: "#78909C", height: 6, offsetX: 0, offsetY: 0 },
+                                            tickAmount: void 0,
+                                            tickPlacement: "on",
+                                            min: void 0,
+                                            max: void 0,
+                                            range: void 0,
+                                            floating: !1,
+                                            position: "bottom",
+                                            title: { text: void 0, offsetX: 0, offsetY: 0, style: { color: void 0, fontSize: "12px", fontFamily: void 0, cssClass: "" } },
+                                            crosshairs: {
+                                                show: !0,
+                                                width: 1,
+                                                position: "back",
+                                                opacity: 0.9,
+                                                stroke: { color: "#b6b6b6", width: 1, dashArray: 3 },
+                                                fill: { type: "solid", color: "#B1B9C4", gradient: { colorFrom: "#D8E3F0", colorTo: "#BED1E6", stops: [0, 100], opacityFrom: 0.4, opacityTo: 0.5 } },
+                                                dropShadow: { enabled: !1, left: 0, top: 0, blur: 1, opacity: 0.4 },
+                                            },
+                                            tooltip: { enabled: !0, offsetY: 0, formatter: void 0, style: { fontSize: "12px", fontFamily: void 0 } },
+                                        },
+                                        yaxis: this.yAxis,
+                                        theme: { mode: "light", palette: "palette1", monochrome: { enabled: !1, color: "#008FFB", shadeTo: "light", shadeIntensity: 0.65 } },
+                                    };
+                                },
+                            },
+                        ]),
+                        t
+                    );
+                })(),
+                w = (function () {
+                    function t(e) {
+                        n(this, t), (this.ctx = e), (this.w = e.w), (this.graphics = new m(this.ctx)), this.w.globals.isBarHorizontal && (this.invertAxis = !0), (this.xDivision = this.w.globals.gridWidth / this.w.globals.dataPoints);
+                    }
+                    return (
+                        o(t, [
+                            {
+                                key: "drawAnnotations",
+                                value: function () {
+                                    var t = this.w;
+                                    if (t.globals.axisCharts) {
+                                        for (
+                                            var e = this.drawYAxisAnnotations(), i = this.drawXAxisAnnotations(), a = this.drawPointAnnotations(), s = t.config.chart.animations.enabled, n = [e, i, a], r = [i.node, e.node, a.node], o = 0;
+                                            o < 3;
+                                            o++
+                                        )
+                                            t.globals.dom.elGraphical.add(n[o]), !s || t.globals.resized || t.globals.dataChanged || r[o].classList.add("hidden"), t.globals.delayedElements.push({ el: r[o], index: 0 });
+                                        this.annotationsBackground();
+                                    }
+                                },
+                            },
+                            {
+                                key: "getStringX",
+                                value: function (t) {
+                                    var e = this.w,
+                                        i = t,
+                                        a = e.globals.labels.indexOf(t),
+                                        s = e.globals.dom.baseEl.querySelector(".apexcharts-xaxis-texts-g text:nth-child(" + (a + 1) + ")");
+                                    return s && (i = parseFloat(s.getAttribute("x"))), i;
+                                },
+                            },
+                            {
+                                key: "addXaxisAnnotation",
+                                value: function (t, e, i) {
+                                    var a = this.w,
+                                        s = this.invertAxis ? a.globals.minY : a.globals.minX,
+                                        n = this.invertAxis ? a.globals.yRange[0] : a.globals.xRange,
+                                        r = (t.x - s) / (n / a.globals.gridWidth),
+                                        o = t.label.text;
+                                    ("category" !== a.config.xaxis.type && !a.config.xaxis.convertedCatToNumeric) || this.invertAxis || (r = this.getStringX(t.x));
+                                    var l = t.strokeDashArray;
+                                    if (!(r < 0 || r > a.globals.gridWidth)) {
+                                        if (null === t.x2) {
+                                            var h = this.graphics.drawLine(r + t.offsetX, 0 + t.offsetY, r + t.offsetX, a.globals.gridHeight + t.offsetY, t.borderColor, l);
+                                            e.appendChild(h.node);
+                                        } else {
+                                            var c = (t.x2 - s) / (n / a.globals.gridWidth);
+                                            if ((("category" !== a.config.xaxis.type && !a.config.xaxis.convertedCatToNumeric) || this.invertAxis || (c = this.getStringX(t.x2)), c < r)) {
+                                                var d = r;
+                                                (r = c), (c = d);
+                                            }
+                                            if (o) {
+                                                var u = this.graphics.drawRect(r + t.offsetX, 0 + t.offsetY, c - r, a.globals.gridHeight + t.offsetY, 0, t.fillColor, t.opacity, 1, t.borderColor, l);
+                                                e.appendChild(u.node);
+                                            }
+                                        }
+                                        var f = "top" === t.label.position ? -3 : a.globals.gridHeight,
+                                            g = this.graphics.drawText({
+                                                x: r + t.label.offsetX,
+                                                y: f + t.label.offsetY,
+                                                text: o,
+                                                textAnchor: t.label.textAnchor,
+                                                fontSize: t.label.style.fontSize,
+                                                fontFamily: t.label.style.fontFamily,
+                                                foreColor: t.label.style.color,
+                                                cssClass: "apexcharts-xaxis-annotation-label " + t.label.style.cssClass,
+                                            });
+                                        g.attr({ rel: i }), e.appendChild(g.node), this.setOrientations(t, i);
+                                    }
+                                },
+                            },
+                            {
+                                key: "drawXAxisAnnotations",
+                                value: function () {
+                                    var t = this,
+                                        e = this.w,
+                                        i = this.graphics.group({ class: "apexcharts-xaxis-annotations" });
+                                    return (
+                                        e.config.annotations.xaxis.map(function (e, a) {
+                                            t.addXaxisAnnotation(e, i.node, a);
+                                        }),
+                                        i
+                                    );
+                                },
+                            },
+                            {
+                                key: "addYaxisAnnotation",
+                                value: function (t, e, i) {
+                                    var a,
+                                        s,
+                                        n = this.w,
+                                        r = t.strokeDashArray;
+                                    if (this.invertAxis) {
+                                        var o = n.globals.labels.indexOf(t.y),
+                                            l = n.globals.dom.baseEl.querySelector(".apexcharts-yaxis-texts-g text:nth-child(" + (o + 1) + ")");
+                                        l && (a = parseFloat(l.getAttribute("y")));
+                                    } else
+                                        (a = n.globals.gridHeight - (t.y - n.globals.minYArr[t.yAxisIndex]) / (n.globals.yRange[t.yAxisIndex] / n.globals.gridHeight)),
+                                            n.config.yaxis[t.yAxisIndex] && n.config.yaxis[t.yAxisIndex].reversed && (a = (t.y - n.globals.minYArr[t.yAxisIndex]) / (n.globals.yRange[t.yAxisIndex] / n.globals.gridHeight));
+                                    var h = t.label.text;
+                                    if (null === t.y2) {
+                                        var c = this.graphics.drawLine(0 + t.offsetX, a + t.offsetY, n.globals.gridWidth + t.offsetX, a + t.offsetY, t.borderColor, r);
+                                        e.appendChild(c.node);
+                                    } else {
+                                        if (this.invertAxis) {
+                                            var d = n.globals.labels.indexOf(t.y2),
+                                                u = n.globals.dom.baseEl.querySelector(".apexcharts-yaxis-texts-g text:nth-child(" + (d + 1) + ")");
+                                            u && (s = parseFloat(u.getAttribute("y")));
+                                        } else
+                                            (s = n.globals.gridHeight - (t.y2 - n.globals.minYArr[t.yAxisIndex]) / (n.globals.yRange[t.yAxisIndex] / n.globals.gridHeight)),
+                                                n.config.yaxis[t.yAxisIndex] && n.config.yaxis[t.yAxisIndex].reversed && (s = (t.y2 - n.globals.minYArr[t.yAxisIndex]) / (n.globals.yRange[t.yAxisIndex] / n.globals.gridHeight));
+                                        if (s > a) {
+                                            var f = a;
+                                            (a = s), (s = f);
+                                        }
+                                        if (h) {
+                                            var g = this.graphics.drawRect(0 + t.offsetX, s + t.offsetY, n.globals.gridWidth + t.offsetX, a - s, 0, t.fillColor, t.opacity, 1, t.borderColor, r);
+                                            e.appendChild(g.node);
+                                        }
+                                    }
+                                    var p = "right" === t.label.position ? n.globals.gridWidth : 0,
+                                        x = this.graphics.drawText({
+                                            x: p + t.label.offsetX,
+                                            y: (s || a) + t.label.offsetY - 3,
+                                            text: h,
+                                            textAnchor: t.label.textAnchor,
+                                            fontSize: t.label.style.fontSize,
+                                            fontFamily: t.label.style.fontFamily,
+                                            foreColor: t.label.style.color,
+                                            cssClass: "apexcharts-yaxis-annotation-label " + t.label.style.cssClass,
+                                        });
+                                    x.attr({ rel: i }), e.appendChild(x.node);
+                                },
+                            },
+                            {
+                                key: "drawYAxisAnnotations",
+                                value: function () {
+                                    var t = this,
+                                        e = this.w,
+                                        i = this.graphics.group({ class: "apexcharts-yaxis-annotations" });
+                                    return (
+                                        e.config.annotations.yaxis.map(function (e, a) {
+                                            t.addYaxisAnnotation(e, i.node, a);
+                                        }),
+                                        i
+                                    );
+                                },
+                            },
+                            {
+                                key: "clearAnnotations",
+                                value: function (t) {
+                                    var e = t.w.globals.dom.baseEl.querySelectorAll(".apexcharts-yaxis-annotations, .apexcharts-xaxis-annotations, .apexcharts-point-annotations");
+                                    (e = p.listToArray(e)).forEach(function (t) {
+                                        for (; t.firstChild; ) t.removeChild(t.firstChild);
+                                    });
+                                },
+                            },
+                            {
+                                key: "addPointAnnotation",
+                                value: function (t, e, i) {
+                                    var a = this.w,
+                                        s = 0,
+                                        n = 0,
+                                        r = 0;
+                                    if ((this.invertAxis && console.warn("Point annotation is not supported in horizontal bar charts."), "string" == typeof t.x)) {
+                                        var o = a.globals.labels.indexOf(t.x),
+                                            l = a.globals.dom.baseEl.querySelector(".apexcharts-xaxis-texts-g text:nth-child(" + (o + 1) + ")");
+                                        s = parseFloat(l.getAttribute("x"));
+                                        var h = t.y;
+                                        null === t.y && (h = a.globals.series[t.seriesIndex][o]),
+                                            (n = a.globals.gridHeight - (h - a.globals.minYArr[t.yAxisIndex]) / (a.globals.yRange[t.yAxisIndex] / a.globals.gridHeight) - parseInt(t.label.style.fontSize) - t.marker.size),
+                                            (r = a.globals.gridHeight - (h - a.globals.minYArr[t.yAxisIndex]) / (a.globals.yRange[t.yAxisIndex] / a.globals.gridHeight)),
+                                            a.config.yaxis[t.yAxisIndex] &&
+                                                a.config.yaxis[t.yAxisIndex].reversed &&
+                                                ((n = (h - a.globals.minYArr[t.yAxisIndex]) / (a.globals.yRange[t.yAxisIndex] / a.globals.gridHeight) + parseInt(t.label.style.fontSize) + t.marker.size),
+                                                (r = (h - a.globals.minYArr[t.yAxisIndex]) / (a.globals.yRange[t.yAxisIndex] / a.globals.gridHeight)));
+                                    } else
+                                        (s = (t.x - a.globals.minX) / (a.globals.xRange / a.globals.gridWidth)),
+                                            (n = a.globals.gridHeight - (parseFloat(t.y) - a.globals.minYArr[t.yAxisIndex]) / (a.globals.yRange[t.yAxisIndex] / a.globals.gridHeight) - parseInt(t.label.style.fontSize) - t.marker.size),
+                                            (r = a.globals.gridHeight - (t.y - a.globals.minYArr[t.yAxisIndex]) / (a.globals.yRange[t.yAxisIndex] / a.globals.gridHeight)),
+                                            a.config.yaxis[t.yAxisIndex] &&
+                                                a.config.yaxis[t.yAxisIndex].reversed &&
+                                                ((n = (parseFloat(t.y) - a.globals.minYArr[t.yAxisIndex]) / (a.globals.yRange[t.yAxisIndex] / a.globals.gridHeight) - parseInt(t.label.style.fontSize) - t.marker.size),
+                                                (r = (t.y - a.globals.minYArr[t.yAxisIndex]) / (a.globals.yRange[t.yAxisIndex] / a.globals.gridHeight)));
+                                    if (!(s < 0 || s > a.globals.gridWidth)) {
+                                        var c = {
+                                                pSize: t.marker.size,
+                                                pWidth: t.marker.strokeWidth,
+                                                pointFillColor: t.marker.fillColor,
+                                                pointStrokeColor: t.marker.strokeColor,
+                                                shape: t.marker.shape,
+                                                radius: t.marker.radius,
+                                                class: "apexcharts-point-annotation-marker " + t.marker.cssClass,
+                                            },
+                                            d = this.graphics.drawMarker(s + t.marker.offsetX, r + t.marker.offsetY, c);
+                                        e.appendChild(d.node);
+                                        var u = t.label.text ? t.label.text : "",
+                                            f = this.graphics.drawText({
+                                                x: s + t.label.offsetX,
+                                                y: n + t.label.offsetY,
+                                                text: u,
+                                                textAnchor: t.label.textAnchor,
+                                                fontSize: t.label.style.fontSize,
+                                                fontFamily: t.label.style.fontFamily,
+                                                foreColor: t.label.style.color,
+                                                cssClass: "apexcharts-point-annotation-label " + t.label.style.cssClass,
+                                            });
+                                        if ((f.attr({ rel: i }), e.appendChild(f.node), t.customSVG.SVG)) {
+                                            var g = this.graphics.group({ class: "apexcharts-point-annotations-custom-svg " + t.customSVG.cssClass });
+                                            g.attr({ transform: "translate(".concat(s + t.customSVG.offsetX, ", ").concat(n + t.customSVG.offsetY, ")") }), (g.node.innerHTML = t.customSVG.SVG), e.appendChild(g.node);
+                                        }
+                                    }
+                                },
+                            },
+                            {
+                                key: "drawPointAnnotations",
+                                value: function () {
+                                    var t = this,
+                                        e = this.w,
+                                        i = this.graphics.group({ class: "apexcharts-point-annotations" });
+                                    return (
+                                        e.config.annotations.points.map(function (e, a) {
+                                            t.addPointAnnotation(e, i.node, a);
+                                        }),
+                                        i
+                                    );
+                                },
+                            },
+                            {
+                                key: "setOrientations",
+                                value: function (t) {
+                                    var e = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : null,
+                                        i = this.w;
+                                    if ("vertical" === t.label.orientation) {
+                                        var a = null !== e ? e : 0,
+                                            s = i.globals.dom.baseEl.querySelector(".apexcharts-xaxis-annotations .apexcharts-xaxis-annotation-label[rel='".concat(a, "']"));
+                                        if (null !== s) {
+                                            var n = s.getBoundingClientRect();
+                                            s.setAttribute("x", parseFloat(s.getAttribute("x")) - n.height + 4),
+                                                "top" === t.label.position ? s.setAttribute("y", parseFloat(s.getAttribute("y")) + n.width) : s.setAttribute("y", parseFloat(s.getAttribute("y")) - n.width);
+                                            var r = this.graphics.rotateAroundCenter(s),
+                                                o = r.x,
+                                                l = r.y;
+                                            s.setAttribute("transform", "rotate(-90 ".concat(o, " ").concat(l, ")"));
+                                        }
+                                    }
+                                },
+                            },
+                            {
+                                key: "addBackgroundToAnno",
+                                value: function (t, e) {
+                                    var i = this.w;
+                                    if (!e.label.text || (e.label.text && !e.label.text.trim())) return null;
+                                    var a = i.globals.dom.baseEl.querySelector(".apexcharts-grid").getBoundingClientRect(),
+                                        s = t.getBoundingClientRect(),
+                                        n = e.label.style.padding.left,
+                                        r = e.label.style.padding.right,
+                                        o = e.label.style.padding.top,
+                                        l = e.label.style.padding.bottom;
+                                    "vertical" === e.label.orientation && ((o = e.label.style.padding.left), (l = e.label.style.padding.right), (n = e.label.style.padding.top), (r = e.label.style.padding.bottom));
+                                    var h = s.left - a.left - n,
+                                        c = s.top - a.top - o;
+                                    return this.graphics.drawRect(h, c, s.width + n + r, s.height + o + l, 0, e.label.style.background, 1, e.label.borderWidth, e.label.borderColor, 0);
+                                },
+                            },
+                            {
+                                key: "annotationsBackground",
+                                value: function () {
+                                    var t = this,
+                                        e = this.w,
+                                        i = function (i, a, s) {
+                                            var n = e.globals.dom.baseEl.querySelector(".apexcharts-".concat(s, "-annotations .apexcharts-").concat(s, "-annotation-label[rel='").concat(a, "']"));
+                                            if (n) {
+                                                var r = n.parentNode,
+                                                    o = t.addBackgroundToAnno(n, i);
+                                                o && r.insertBefore(o.node, n);
+                                            }
+                                        };
+                                    e.config.annotations.xaxis.map(function (t, e) {
+                                        i(t, e, "xaxis");
+                                    }),
+                                        e.config.annotations.yaxis.map(function (t, e) {
+                                            i(t, e, "yaxis");
+                                        }),
+                                        e.config.annotations.points.map(function (t, e) {
+                                            i(t, e, "point");
+                                        });
+                                },
+                            },
+                            {
+                                key: "addText",
+                                value: function (t, e, i) {
+                                    var a = t.x,
+                                        s = t.y,
+                                        n = t.text,
+                                        r = t.textAnchor,
+                                        o = t.appendTo,
+                                        l = void 0 === o ? ".apexcharts-inner" : o,
+                                        h = t.foreColor,
+                                        c = t.fontSize,
+                                        d = t.fontFamily,
+                                        u = t.cssClass,
+                                        f = t.backgroundColor,
+                                        g = t.borderWidth,
+                                        p = t.strokeDashArray,
+                                        x = t.radius,
+                                        v = t.borderColor,
+                                        m = t.paddingLeft,
+                                        b = void 0 === m ? 4 : m,
+                                        y = t.paddingRight,
+                                        w = void 0 === y ? 4 : y,
+                                        k = t.paddingBottom,
+                                        S = void 0 === k ? 2 : k,
+                                        A = t.paddingTop,
+                                        C = void 0 === A ? 2 : A,
+                                        L = i,
+                                        E = L.w,
+                                        P = E.globals.dom.baseEl.querySelector(l),
+                                        T = this.graphics.drawText({ x: a, y: s, text: n, textAnchor: r || "start", fontSize: c || "12px", fontFamily: d || E.config.chart.fontFamily, foreColor: h || E.config.chart.foreColor, cssClass: u });
+                                    P.appendChild(T.node);
+                                    var M = T.bbox();
+                                    if (n) {
+                                        var z = this.graphics.drawRect(M.x - b, M.y - C, M.width + b + w, M.height + S + C, x, f, 1, g, v, p);
+                                        T.before(z);
+                                    }
+                                    return (
+                                        e &&
+                                            E.globals.memory.methodsToExec.push({
+                                                context: L,
+                                                method: L.addText,
+                                                params: {
+                                                    x: a,
+                                                    y: s,
+                                                    text: n,
+                                                    textAnchor: r,
+                                                    appendTo: l,
+                                                    foreColor: h,
+                                                    fontSize: c,
+                                                    cssClass: u,
+                                                    backgroundColor: f,
+                                                    borderWidth: g,
+                                                    strokeDashArray: p,
+                                                    radius: x,
+                                                    borderColor: v,
+                                                    paddingLeft: b,
+                                                    paddingRight: w,
+                                                    paddingBottom: S,
+                                                    paddingTop: C,
+                                                },
+                                            }),
+                                        i
+                                    );
+                                },
+                            },
+                            {
+                                key: "addPointAnnotationExternal",
+                                value: function (t, e, i) {
+                                    return (
+                                        void 0 === this.invertAxis && (this.invertAxis = i.w.globals.isBarHorizontal),
+                                        this.addAnnotationExternal({ params: t, pushToMemory: e, context: i, type: "point", contextMethod: i.addPointAnnotation }),
+                                        i
+                                    );
+                                },
+                            },
+                            {
+                                key: "addYaxisAnnotationExternal",
+                                value: function (t, e, i) {
+                                    return this.addAnnotationExternal({ params: t, pushToMemory: e, context: i, type: "yaxis", contextMethod: i.addYaxisAnnotation }), i;
+                                },
+                            },
+                            {
+                                key: "addXaxisAnnotationExternal",
+                                value: function (t, e, i) {
+                                    return this.addAnnotationExternal({ params: t, pushToMemory: e, context: i, type: "xaxis", contextMethod: i.addXaxisAnnotation }), i;
+                                },
+                            },
+                            {
+                                key: "addAnnotationExternal",
+                                value: function (t) {
+                                    var e = t.params,
+                                        i = t.pushToMemory,
+                                        a = t.context,
+                                        s = t.type,
+                                        n = t.contextMethod,
+                                        r = a,
+                                        o = r.w,
+                                        l = o.globals.dom.baseEl.querySelector(".apexcharts-".concat(s, "-annotations")),
+                                        h = l.childNodes.length + 1,
+                                        c = new y(),
+                                        d = Object.assign({}, "xaxis" === s ? c.xAxisAnnotation : "yaxis" === s ? c.yAxisAnnotation : c.pointAnnotation),
+                                        u = p.extend(d, e);
+                                    switch (s) {
+                                        case "xaxis":
+                                            this.addXaxisAnnotation(u, l, h);
+                                            break;
+                                        case "yaxis":
+                                            this.addYaxisAnnotation(u, l, h);
+                                            break;
+                                        case "point":
+                                            this.addPointAnnotation(u, l, h);
+                                    }
+                                    var f = o.globals.dom.baseEl.querySelector(".apexcharts-".concat(s, "-annotations .apexcharts-").concat(s, "-annotation-label[rel='").concat(h, "']")),
+                                        g = this.addBackgroundToAnno(f, u);
+                                    return g && l.insertBefore(g.node, f), i && o.globals.memory.methodsToExec.push({ context: r, method: n, params: e }), a;
+                                },
+                            },
+                        ]),
+                        t
+                    );
+                })(),
+                k = (function () {
+                    function t(e) {
+                        n(this, t), (this.ctx = e), (this.w = e.w), (this.months31 = [1, 3, 5, 7, 8, 10, 12]), (this.months30 = [2, 4, 6, 9, 11]), (this.daysCntOfYear = [0, 31, 59, 90, 120, 151, 181, 212, 243, 273, 304, 334]);
+                    }
+                    return (
+                        o(t, [
+                            {
+                                key: "isValidDate",
+                                value: function (t) {
+                                    return !isNaN(this.parseDate(t));
+                                },
+                            },
+                            {
+                                key: "getUTCTimeStamp",
+                                value: function (t) {
+                                    return Date.parse(t) ? new Date(new Date(t).toISOString().substr(0, 25)).getTime() : t;
+                                },
+                            },
+                            {
+                                key: "parseDate",
+                                value: function (t) {
+                                    var e = Date.parse(t);
+                                    if (!isNaN(e)) return this.getUTCTimeStamp(t);
+                                    var i = Date.parse(t.replace(/-/g, "/").replace(/[a-z]+/gi, " "));
+                                    return (i = this.getUTCTimeStamp(i));
+                                },
+                            },
+                            {
+                                key: "treatAsUtc",
+                                value: function (t) {
+                                    var e = new Date(t);
+                                    return e.setMinutes(e.getMinutes() - e.getTimezoneOffset()), e;
+                                },
+                            },
+                            {
+                                key: "formatDate",
+                                value: function (t, e) {
+                                    var i = !(arguments.length > 2 && void 0 !== arguments[2]) || arguments[2],
+                                        a = !(arguments.length > 3 && void 0 !== arguments[3]) || arguments[3],
+                                        s = this.w.globals.locale,
+                                        n = ["\0"].concat(g(s.months)),
+                                        r = [""].concat(g(s.shortMonths)),
+                                        o = [""].concat(g(s.days)),
+                                        l = [""].concat(g(s.shortDays));
+                                    function h(t, e) {
+                                        var i = t + "";
+                                        for (e = e || 2; i.length < e; ) i = "0" + i;
+                                        return i;
+                                    }
+                                    a && (t = this.treatAsUtc(t));
+                                    var c = i ? t.getUTCFullYear() : t.getFullYear();
+                                    e = (e = (e = e.replace(/(^|[^\\])yyyy+/g, "$1" + c)).replace(/(^|[^\\])yy/g, "$1" + c.toString().substr(2, 2))).replace(/(^|[^\\])y/g, "$1" + c);
+                                    var d = (i ? t.getUTCMonth() : t.getMonth()) + 1;
+                                    e = (e = (e = (e = e.replace(/(^|[^\\])MMMM+/g, "$1" + n[0])).replace(/(^|[^\\])MMM/g, "$1" + r[0])).replace(/(^|[^\\])MM/g, "$1" + h(d))).replace(/(^|[^\\])M/g, "$1" + d);
+                                    var u = i ? t.getUTCDate() : t.getDate();
+                                    e = (e = (e = (e = e.replace(/(^|[^\\])dddd+/g, "$1" + o[0])).replace(/(^|[^\\])ddd/g, "$1" + l[0])).replace(/(^|[^\\])dd/g, "$1" + h(u))).replace(/(^|[^\\])d/g, "$1" + u);
+                                    var f = i ? t.getUTCHours() : t.getHours(),
+                                        p = f > 12 ? f - 12 : 0 === f ? 12 : f;
+                                    e = (e = (e = (e = e.replace(/(^|[^\\])HH+/g, "$1" + h(f))).replace(/(^|[^\\])H/g, "$1" + f)).replace(/(^|[^\\])hh+/g, "$1" + h(p))).replace(/(^|[^\\])h/g, "$1" + p);
+                                    var x = i ? t.getUTCMinutes() : t.getMinutes();
+                                    e = (e = e.replace(/(^|[^\\])mm+/g, "$1" + h(x))).replace(/(^|[^\\])m/g, "$1" + x);
+                                    var v = i ? t.getUTCSeconds() : t.getSeconds();
+                                    e = (e = e.replace(/(^|[^\\])ss+/g, "$1" + h(v))).replace(/(^|[^\\])s/g, "$1" + v);
+                                    var m = i ? t.getUTCMilliseconds() : t.getMilliseconds();
+                                    (e = e.replace(/(^|[^\\])fff+/g, "$1" + h(m, 3))), (m = Math.round(m / 10)), (e = e.replace(/(^|[^\\])ff/g, "$1" + h(m))), (m = Math.round(m / 10));
+                                    var b = f < 12 ? "AM" : "PM";
+                                    e = (e = (e = e.replace(/(^|[^\\])f/g, "$1" + m)).replace(/(^|[^\\])TT+/g, "$1" + b)).replace(/(^|[^\\])T/g, "$1" + b.charAt(0));
+                                    var y = b.toLowerCase();
+                                    e = (e = e.replace(/(^|[^\\])tt+/g, "$1" + y)).replace(/(^|[^\\])t/g, "$1" + y.charAt(0));
+                                    var w = -t.getTimezoneOffset(),
+                                        k = i || !w ? "Z" : w > 0 ? "+" : "-";
+                                    if (!i) {
+                                        var S = (w = Math.abs(w)) % 60;
+                                        k += h(Math.floor(w / 60)) + ":" + h(S);
+                                    }
+                                    e = e.replace(/(^|[^\\])K/g, "$1" + k);
+                                    var A = (i ? t.getUTCDay() : t.getDay()) + 1;
+                                    return (e = (e = (e = (e = (e = e.replace(new RegExp(o[0], "g"), o[A])).replace(new RegExp(l[0], "g"), l[A])).replace(new RegExp(n[0], "g"), n[d])).replace(new RegExp(r[0], "g"), r[d])).replace(
+                                        /\\(.)/g,
+                                        "$1"
+                                    ));
+                                },
+                            },
+                            {
+                                key: "getTimeUnitsfromTimestamp",
+                                value: function (t, e) {
+                                    var i = this.w;
+                                    void 0 !== i.config.xaxis.min && (t = i.config.xaxis.min), void 0 !== i.config.xaxis.max && (e = i.config.xaxis.max);
+                                    var a = new Date(t).getFullYear(),
+                                        s = new Date(e).getFullYear(),
+                                        n = new Date(t).getMonth(),
+                                        r = new Date(e).getMonth(),
+                                        o = new Date(t).getDate(),
+                                        l = new Date(e).getDate(),
+                                        h = new Date(t).getHours(),
+                                        c = new Date(e).getHours();
+                                    return { minMinute: new Date(t).getMinutes(), maxMinute: new Date(e).getMinutes(), minHour: h, maxHour: c, minDate: o, maxDate: l, minMonth: n, maxMonth: r, minYear: a, maxYear: s };
+                                },
+                            },
+                            {
+                                key: "isLeapYear",
+                                value: function (t) {
+                                    return (t % 4 == 0 && t % 100 != 0) || t % 400 == 0;
+                                },
+                            },
+                            {
+                                key: "calculcateLastDaysOfMonth",
+                                value: function (t, e, i) {
+                                    return this.determineDaysOfMonths(t, e) - i;
+                                },
+                            },
+                            {
+                                key: "determineDaysOfYear",
+                                value: function (t) {
+                                    var e = 365;
+                                    return this.isLeapYear(t) && (e = 366), e;
+                                },
+                            },
+                            {
+                                key: "determineRemainingDaysOfYear",
+                                value: function (t, e, i) {
+                                    var a = this.daysCntOfYear[e] + i;
+                                    return e > 1 && this.isLeapYear() && a++, a;
+                                },
+                            },
+                            {
+                                key: "determineDaysOfMonths",
+                                value: function (t, e) {
+                                    var i = 30;
+                                    switch (((t = p.monthMod(t)), !0)) {
+                                        case this.months30.indexOf(t) > -1:
+                                            2 === t && (i = this.isLeapYear(e) ? 29 : 28);
+                                            break;
+                                        case this.months31.indexOf(t) > -1:
+                                        default:
+                                            i = 31;
+                                    }
+                                    return i;
+                                },
+                            },
+                        ]),
+                        t
+                    );
+                })(),
+                S = (function () {
+                    function t(e) {
+                        n(this, t), (this.opts = e);
+                    }
+                    return (
+                        o(
+                            t,
+                            [
+                                {
+                                    key: "line",
+                                    value: function () {
+                                        return {
+                                            chart: { animations: { easing: "swing" } },
+                                            dataLabels: { enabled: !1 },
+                                            stroke: { width: 5, curve: "straight" },
+                                            markers: { size: 0, hover: { sizeOffset: 6 } },
+                                            xaxis: { crosshairs: { width: 1 } },
+                                        };
+                                    },
+                                },
+                                {
+                                    key: "sparkline",
+                                    value: function (t) {
+                                        (this.opts.yaxis[0].labels.show = !1), (this.opts.yaxis[0].floating = !0);
+                                        return p.extend(t, {
+                                            grid: { show: !1, padding: { left: 0, right: 0, top: 0, bottom: 0 } },
+                                            legend: { show: !1 },
+                                            xaxis: { labels: { show: !1 }, tooltip: { enabled: !1 }, axisBorder: { show: !1 } },
+                                            chart: { toolbar: { show: !1 }, zoom: { enabled: !1 } },
+                                            dataLabels: { enabled: !1 },
+                                        });
+                                    },
+                                },
+                                {
+                                    key: "bar",
+                                    value: function () {
+                                        return {
+                                            chart: { stacked: !1, animations: { easing: "swing" } },
+                                            plotOptions: { bar: { dataLabels: { position: "center" } } },
+                                            dataLabels: { style: { colors: ["#fff"] } },
+                                            stroke: { width: 0 },
+                                            fill: { opacity: 0.85 },
+                                            legend: { markers: { shape: "square", radius: 2, size: 8 } },
+                                            tooltip: { shared: !1 },
+                                            xaxis: { tooltip: { enabled: !1 }, crosshairs: { width: "barWidth", position: "back", fill: { type: "gradient" }, dropShadow: { enabled: !1 }, stroke: { width: 0 } } },
+                                        };
+                                    },
+                                },
+                                {
+                                    key: "candlestick",
+                                    value: function () {
+                                        return {
+                                            stroke: { width: 1, colors: ["#333"] },
+                                            dataLabels: { enabled: !1 },
+                                            tooltip: {
+                                                shared: !0,
+                                                custom: function (t) {
+                                                    var e = t.seriesIndex,
+                                                        i = t.dataPointIndex,
+                                                        a = t.w;
+                                                    return (
+                                                        '<div class="apexcharts-tooltip-candlestick"><div>Open: <span class="value">' +
+                                                        a.globals.seriesCandleO[e][i] +
+                                                        '</span></div><div>High: <span class="value">' +
+                                                        a.globals.seriesCandleH[e][i] +
+                                                        '</span></div><div>Low: <span class="value">' +
+                                                        a.globals.seriesCandleL[e][i] +
+                                                        '</span></div><div>Close: <span class="value">' +
+                                                        a.globals.seriesCandleC[e][i] +
+                                                        "</span></div></div>"
+                                                    );
+                                                },
+                                            },
+                                            states: { active: { filter: { type: "none" } } },
+                                            xaxis: { crosshairs: { width: 1 } },
+                                        };
+                                    },
+                                },
+                                {
+                                    key: "rangeBar",
+                                    value: function () {
+                                        return {
+                                            stroke: { width: 0 },
+                                            plotOptions: { bar: { dataLabels: { position: "center" } } },
+                                            dataLabels: {
+                                                enabled: !1,
+                                                formatter: function (t, e) {
+                                                    e.ctx;
+                                                    var i = e.seriesIndex,
+                                                        a = e.dataPointIndex,
+                                                        s = e.w,
+                                                        n = s.globals.seriesRangeStart[i][a];
+                                                    return s.globals.seriesRangeEnd[i][a] - n;
+                                                },
+                                                style: { colors: ["#fff"] },
+                                            },
+                                            tooltip: {
+                                                shared: !1,
+                                                followCursor: !0,
+                                                custom: function (t) {
+                                                    var e = t.ctx,
+                                                        i = t.seriesIndex,
+                                                        a = t.dataPointIndex,
+                                                        s = t.w,
+                                                        n = s.globals.seriesRangeStart[i][a],
+                                                        r = s.globals.seriesRangeEnd[i][a],
+                                                        o = "",
+                                                        l = "",
+                                                        h = s.globals.colors[i];
+                                                    if (void 0 === s.config.tooltip.x.formatter)
+                                                        if ("datetime" === s.config.xaxis.type) {
+                                                            var c = new k(e);
+                                                            (o = c.formatDate(new Date(n), s.config.tooltip.x.format, !0, !0)), (l = c.formatDate(new Date(r), s.config.tooltip.x.format, !0, !0));
+                                                        } else (o = n), (l = r);
+                                                    else (o = s.config.tooltip.x.formatter(n)), (l = s.config.tooltip.x.formatter(r));
+                                                    var d = s.globals.labels[a];
+                                                    return (
+                                                        '<div class="apexcharts-tooltip-rangebar"><div> <span class="series-name" style="color: ' +
+                                                        h +
+                                                        '">' +
+                                                        (s.config.series[i].name ? s.config.series[i].name : "") +
+                                                        '</span></div><div> <span class="category">' +
+                                                        d +
+                                                        ': </span> <span class="value start-value">' +
+                                                        o +
+                                                        '</span> <span class="separator">-</span> <span class="value end-value">' +
+                                                        l +
+                                                        "</span></div></div>"
+                                                    );
+                                                },
+                                            },
+                                            xaxis: { tooltip: { enabled: !1 }, crosshairs: { stroke: { width: 0 } } },
+                                        };
+                                    },
+                                },
+                                {
+                                    key: "area",
+                                    value: function () {
+                                        return {
+                                            stroke: { width: 4 },
+                                            fill: { type: "gradient", gradient: { inverseColors: !1, shade: "light", type: "vertical", opacityFrom: 0.65, opacityTo: 0.5, stops: [0, 100, 100] } },
+                                            markers: { size: 0, hover: { sizeOffset: 6 } },
+                                            tooltip: { followCursor: !1 },
+                                        };
+                                    },
+                                },
+                                {
+                                    key: "brush",
+                                    value: function (t) {
+                                        return p.extend(t, {
+                                            chart: { toolbar: { autoSelected: "selection", show: !1 }, zoom: { enabled: !1 } },
+                                            dataLabels: { enabled: !1 },
+                                            stroke: { width: 1 },
+                                            tooltip: { enabled: !1 },
+                                            xaxis: { tooltip: { enabled: !1 } },
+                                        });
+                                    },
+                                },
+                                {
+                                    key: "stacked100",
+                                    value: function () {
+                                        var t = this;
+                                        (this.opts.dataLabels = this.opts.dataLabels || {}), (this.opts.dataLabels.formatter = this.opts.dataLabels.formatter || void 0);
+                                        var e = this.opts.dataLabels.formatter;
+                                        this.opts.yaxis.forEach(function (e, i) {
+                                            (t.opts.yaxis[i].min = 0), (t.opts.yaxis[i].max = 100);
+                                        }),
+                                            "bar" === this.opts.chart.type &&
+                                                (this.opts.dataLabels.formatter =
+                                                    e ||
+                                                    function (t) {
+                                                        return "number" == typeof t && t ? t.toFixed(0) + "%" : t;
+                                                    });
+                                    },
+                                },
+                                {
+                                    key: "bubble",
+                                    value: function () {
+                                        return {
+                                            dataLabels: { style: { colors: ["#fff"] } },
+                                            tooltip: { shared: !1, intersect: !0 },
+                                            xaxis: { crosshairs: { width: 0 } },
+                                            fill: { type: "solid", gradient: { shade: "light", inverse: !0, shadeIntensity: 0.55, opacityFrom: 0.4, opacityTo: 0.8 } },
+                                        };
+                                    },
+                                },
+                                {
+                                    key: "scatter",
+                                    value: function () {
+                                        return { dataLabels: { enabled: !1 }, tooltip: { shared: !1, intersect: !0 }, markers: { size: 6, strokeWidth: 2, hover: { sizeOffset: 2 } } };
+                                    },
+                                },
+                                {
+                                    key: "heatmap",
+                                    value: function () {
+                                        return {
+                                            chart: { stacked: !1, zoom: { enabled: !1 } },
+                                            fill: { opacity: 1 },
+                                            dataLabels: { style: { colors: ["#fff"] } },
+                                            stroke: { colors: ["#fff"] },
+                                            tooltip: { followCursor: !0, marker: { show: !1 }, x: { show: !1 } },
+                                            legend: { position: "top", markers: { shape: "square", size: 10, offsetY: 2 } },
+                                            grid: { padding: { right: 20 } },
+                                        };
+                                    },
+                                },
+                                {
+                                    key: "pie",
+                                    value: function () {
+                                        return {
+                                            chart: { toolbar: { show: !1 } },
+                                            plotOptions: { pie: { donut: { labels: { show: !1 } } } },
+                                            dataLabels: {
+                                                formatter: function (t) {
+                                                    return t.toFixed(1) + "%";
+                                                },
+                                                style: { colors: ["#fff"] },
+                                                dropShadow: { enabled: !0 },
+                                            },
+                                            stroke: { colors: ["#fff"] },
+                                            fill: { opacity: 1, gradient: { shade: "dark", shadeIntensity: 0.35, inverseColors: !1, stops: [0, 100, 100] } },
+                                            padding: { right: 0, left: 0 },
+                                            tooltip: { theme: "dark", fillSeriesColor: !0 },
+                                            legend: { position: "right" },
+                                        };
+                                    },
+                                },
+                                {
+                                    key: "donut",
+                                    value: function () {
+                                        return {
+                                            chart: { toolbar: { show: !1 } },
+                                            dataLabels: {
+                                                formatter: function (t) {
+                                                    return t.toFixed(1) + "%";
+                                                },
+                                                style: { colors: ["#fff"] },
+                                                dropShadow: { enabled: !0 },
+                                            },
+                                            stroke: { colors: ["#fff"] },
+                                            fill: { opacity: 1, gradient: { shade: "dark", shadeIntensity: 0.4, inverseColors: !1, type: "vertical", opacityFrom: 1, opacityTo: 1, stops: [70, 98, 100] } },
+                                            padding: { right: 0, left: 0 },
+                                            tooltip: { theme: "dark", fillSeriesColor: !0 },
+                                            legend: { position: "right" },
+                                        };
+                                    },
+                                },
+                                {
+                                    key: "radar",
+                                    value: function () {
+                                        return (
+                                            (this.opts.yaxis[0].labels.style.fontSize = "13px"),
+                                            (this.opts.yaxis[0].labels.offsetY = 6),
+                                            {
+                                                dataLabels: { enabled: !0, style: { colors: ["#a8a8a8"], fontSize: "11px" } },
+                                                stroke: { width: 2 },
+                                                markers: { size: 3, strokeWidth: 1, strokeOpacity: 1 },
+                                                fill: { opacity: 0.2 },
+                                                tooltip: { shared: !1, intersect: !0, followCursor: !0 },
+                                                grid: { show: !1 },
+                                                xaxis: { tooltip: { enabled: !1 }, crosshairs: { show: !1 } },
+                                            }
+                                        );
+                                    },
+                                },
+                                {
+                                    key: "radialBar",
+                                    value: function () {
+                                        return {
+                                            chart: { animations: { dynamicAnimation: { enabled: !0, speed: 800 } }, toolbar: { show: !1 } },
+                                            fill: { gradient: { shade: "dark", shadeIntensity: 0.4, inverseColors: !1, type: "diagonal2", opacityFrom: 1, opacityTo: 1, stops: [70, 98, 100] } },
+                                            padding: { right: 0, left: 0 },
+                                            legend: { show: !1, position: "right" },
+                                            tooltip: { enabled: !1, fillSeriesColor: !0 },
+                                        };
+                                    },
+                                },
+                            ],
+                            [
+                                {
+                                    key: "convertCatToNumeric",
+                                    value: function (t) {
+                                        (t.xaxis.type = "numeric"),
+                                            (t.xaxis.convertedCatToNumeric = !0),
+                                            (t.xaxis.labels = t.xaxis.labels || {}),
+                                            (t.xaxis.labels.formatter =
+                                                t.xaxis.labels.formatter ||
+                                                function (t) {
+                                                    return t;
+                                                }),
+                                            (t.chart = t.chart || {}),
+                                            (t.chart.zoom = t.chart.zoom || (window.Apex.chart && window.Apex.chart.zoom) || {});
+                                        var e = t.xaxis.labels.formatter,
+                                            i = t.xaxis.categories && t.xaxis.categories.length ? t.xaxis.categories : t.labels;
+                                        return (
+                                            i &&
+                                                i.length &&
+                                                (t.xaxis.labels.formatter = function (t) {
+                                                    return e(i[t - 1]);
+                                                }),
+                                            (t.xaxis.categories = []),
+                                            (t.labels = []),
+                                            (t.chart.zoom.enabled = t.chart.zoom.enabled || !1),
+                                            t
+                                        );
+                                    },
+                                },
+                            ]
+                        ),
+                        t
+                    );
+                })(),
+                A = (function () {
+                    function t(e) {
+                        n(this, t), (this.ctx = e), (this.w = e.w);
+                    }
+                    return (
+                        o(
+                            t,
+                            [
+                                {
+                                    key: "getStackedSeriesTotals",
+                                    value: function () {
+                                        for (var t = this.w, e = [], i = 0; i < t.globals.series[t.globals.maxValsInArrayIndex].length; i++) {
+                                            for (var a = 0, s = 0; s < t.globals.series.length; s++) a += t.globals.series[s][i];
+                                            e.push(a);
+                                        }
+                                        return (t.globals.stackedSeriesTotals = e), e;
+                                    },
+                                },
+                                {
+                                    key: "getSeriesTotalByIndex",
+                                    value: function () {
+                                        var t = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : null;
+                                        return null === t
+                                            ? this.w.config.series.reduce(function (t, e) {
+                                                  return t + e;
+                                              }, 0)
+                                            : this.w.globals.series[t].reduce(function (t, e) {
+                                                  return t + e;
+                                              }, 0);
+                                    },
+                                },
+                                {
+                                    key: "isSeriesNull",
+                                    value: function () {
+                                        var t = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : null;
+                                        return (
+                                            0 ===
+                                            (null === t
+                                                ? this.w.config.series.filter(function (t) {
+                                                      return null !== t;
+                                                  })
+                                                : this.w.globals.series[t].filter(function (t) {
+                                                      return null !== t;
+                                                  })
+                                            ).length
+                                        );
+                                    },
+                                },
+                                {
+                                    key: "seriesHaveSameValues",
+                                    value: function (t) {
+                                        return this.w.globals.series[t].every(function (t, e, i) {
+                                            return t === i[0];
+                                        });
+                                    },
+                                },
+                                {
+                                    key: "getLargestSeries",
+                                    value: function () {
+                                        var t = this.w;
+                                        t.globals.maxValsInArrayIndex = t.globals.series
+                                            .map(function (t) {
+                                                return t.length;
+                                            })
+                                            .indexOf(
+                                                Math.max.apply(
+                                                    Math,
+                                                    t.globals.series.map(function (t) {
+                                                        return t.length;
+                                                    })
+                                                )
+                                            );
+                                    },
+                                },
+                                {
+                                    key: "getLargestMarkerSize",
+                                    value: function () {
+                                        var t = this.w,
+                                            e = 0;
+                                        return (
+                                            t.globals.markers.size.forEach(function (t) {
+                                                e = Math.max(e, t);
+                                            }),
+                                            (t.globals.markers.largestSize = e),
+                                            e
+                                        );
+                                    },
+                                },
+                                {
+                                    key: "getSeriesTotals",
+                                    value: function () {
+                                        var t = this.w;
+                                        t.globals.seriesTotals = t.globals.series.map(function (t, e) {
+                                            var i = 0;
+                                            if (Array.isArray(t)) for (var a = 0; a < t.length; a++) i += t[a];
+                                            else i += t;
+                                            return i;
+                                        });
+                                    },
+                                },
+                                {
+                                    key: "getSeriesTotalsXRange",
+                                    value: function (t, e) {
+                                        var i = this.w;
+                                        return i.globals.series.map(function (a, s) {
+                                            for (var n = 0, r = 0; r < a.length; r++) i.globals.seriesX[s][r] > t && i.globals.seriesX[s][r] < e && (n += a[r]);
+                                            return n;
+                                        });
+                                    },
+                                },
+                                {
+                                    key: "getPercentSeries",
+                                    value: function () {
+                                        var t = this.w;
+                                        t.globals.seriesPercent = t.globals.series.map(function (e, i) {
+                                            var a = [];
+                                            if (Array.isArray(e))
+                                                for (var s = 0; s < e.length; s++) {
+                                                    var n = t.globals.stackedSeriesTotals[s],
+                                                        r = (100 * e[s]) / n;
+                                                    a.push(r);
+                                                }
+                                            else {
+                                                var o =
+                                                    (100 * e) /
+                                                    t.globals.seriesTotals.reduce(function (t, e) {
+                                                        return t + e;
+                                                    }, 0);
+                                                a.push(o);
+                                            }
+                                            return a;
+                                        });
+                                    },
+                                },
+                                {
+                                    key: "getCalculatedRatios",
+                                    value: function () {
+                                        var t,
+                                            e,
+                                            i,
+                                            a,
+                                            s,
+                                            n = this.w.globals,
+                                            r = [],
+                                            o = [],
+                                            l = 0.1,
+                                            h = 0;
+                                        if (((n.yRange = []), n.isMultipleYAxis)) for (var c = 0; c < n.minYArr.length; c++) n.yRange.push(Math.abs(n.minYArr[c] - n.maxYArr[c])), o.push(0);
+                                        else n.yRange.push(Math.abs(n.minY - n.maxY));
+                                        (n.xRange = Math.abs(n.maxX - n.minX)), (n.zRange = Math.abs(n.maxZ - n.minZ));
+                                        for (var d = 0; d < n.yRange.length; d++) r.push(n.yRange[d] / n.gridHeight);
+                                        if (
+                                            ((e = n.xRange / n.gridWidth),
+                                            (i = Math.abs(n.initialmaxX - n.initialminX) / n.gridWidth),
+                                            (t = n.yRange / n.gridWidth),
+                                            (a = n.xRange / n.gridHeight),
+                                            (s = (n.zRange / n.gridHeight) * 16),
+                                            n.minY !== Number.MIN_VALUE && 0 !== Math.abs(n.minY) && (n.hasNegs = !0),
+                                            n.isMultipleYAxis)
+                                        ) {
+                                            o = [];
+                                            for (var u = 0; u < r.length; u++) o.push(-n.minYArr[u] / r[u]);
+                                        } else o.push(-n.minY / r[0]), n.minY !== Number.MIN_VALUE && 0 !== Math.abs(n.minY) && ((l = -n.minY / t), (h = n.minX / e));
+                                        return { yRatio: r, invertedYRatio: t, zRatio: s, xRatio: e, initialXRatio: i, invertedXRatio: a, baseLineInvertedY: l, baseLineY: o, baseLineX: h };
+                                    },
+                                },
+                                {
+                                    key: "getLogSeries",
+                                    value: function (t) {
+                                        var e = this.w;
+                                        return (
+                                            (e.globals.seriesLog = t.map(function (t, i) {
+                                                return e.config.yaxis[i] && e.config.yaxis[i].logarithmic
+                                                    ? t.map(function (t) {
+                                                          return null === t ? null : (Math.log(t) - Math.log(e.globals.minYArr[i])) / (Math.log(e.globals.maxYArr[i]) - Math.log(e.globals.minYArr[i]));
+                                                      })
+                                                    : t;
+                                            })),
+                                            e.globals.seriesLog
+                                        );
+                                    },
+                                },
+                                {
+                                    key: "getLogYRatios",
+                                    value: function (t) {
+                                        var e = this,
+                                            i = this.w,
+                                            a = this.w.globals;
+                                        return (
+                                            (a.yLogRatio = t.slice()),
+                                            (a.logYRange = a.yRange.map(function (t, s) {
+                                                if (i.config.yaxis[s] && e.w.config.yaxis[s].logarithmic) {
+                                                    var n,
+                                                        r = -Number.MAX_VALUE,
+                                                        o = Number.MIN_VALUE;
+                                                    return (
+                                                        a.seriesLog.forEach(function (t, e) {
+                                                            t.forEach(function (t) {
+                                                                i.config.yaxis[e] && i.config.yaxis[e].logarithmic && ((r = Math.max(t, r)), (o = Math.min(t, o)));
+                                                            });
+                                                        }),
+                                                        (n = Math.pow(a.yRange[s], Math.abs(o - r) / a.yRange[s])),
+                                                        (a.yLogRatio[s] = n / a.gridHeight),
+                                                        n
+                                                    );
+                                                }
+                                            })),
+                                            a.yLogRatio
+                                        );
+                                    },
+                                },
+                            ],
+                            [
+                                {
+                                    key: "checkComboSeries",
+                                    value: function (t) {
+                                        var e = !1,
+                                            i = !1;
+                                        return (
+                                            t.length &&
+                                                void 0 !== t[0].type &&
+                                                ((e = !0),
+                                                t.forEach(function (t) {
+                                                    ("bar" !== t.type && "column" !== t.type) || (i = !0);
+                                                })),
+                                            { comboCharts: e, comboChartsHasBars: i }
+                                        );
+                                    },
+                                },
+                                {
+                                    key: "extendArrayProps",
+                                    value: function (t, e) {
+                                        return (
+                                            e.yaxis && (e = t.extendYAxis(e)),
+                                            e.annotations && (e.annotations.yaxis && (e = t.extendYAxisAnnotations(e)), e.annotations.xaxis && (e = t.extendXAxisAnnotations(e)), e.annotations.points && (e = t.extendPointAnnotations(e))),
+                                            e
+                                        );
+                                    },
+                                },
+                            ]
+                        ),
+                        t
+                    );
+                })(),
+                C = (function () {
+                    function t(e) {
+                        n(this, t), (this.opts = e);
+                    }
+                    return (
+                        o(t, [
+                            {
+                                key: "init",
+                                value: function () {
+                                    var t = this.opts,
+                                        e = new y(),
+                                        i = new S(t);
+                                    (this.chartType = t.chart.type),
+                                        "histogram" === this.chartType && ((t.chart.type = "bar"), (t = p.extend({ plotOptions: { bar: { columnWidth: "99.99%" } } }, t))),
+                                        (t.series = this.checkEmptySeries(t.series)),
+                                        (t = this.extendYAxis(t)),
+                                        (t = this.extendAnnotations(t));
+                                    var a = e.init(),
+                                        n = {};
+                                    if (t && "object" === s(t)) {
+                                        var r = {};
+                                        switch (this.chartType) {
+                                            case "line":
+                                                r = i.line();
+                                                break;
+                                            case "area":
+                                                r = i.area();
+                                                break;
+                                            case "bar":
+                                                r = i.bar();
+                                                break;
+                                            case "candlestick":
+                                                r = i.candlestick();
+                                                break;
+                                            case "rangeBar":
+                                                r = i.rangeBar();
+                                                break;
+                                            case "histogram":
+                                                r = i.bar();
+                                                break;
+                                            case "bubble":
+                                                r = i.bubble();
+                                                break;
+                                            case "scatter":
+                                                r = i.scatter();
+                                                break;
+                                            case "heatmap":
+                                                r = i.heatmap();
+                                                break;
+                                            case "pie":
+                                                r = i.pie();
+                                                break;
+                                            case "donut":
+                                                r = i.donut();
+                                                break;
+                                            case "radar":
+                                                r = i.radar();
+                                                break;
+                                            case "radialBar":
+                                                r = i.radialBar();
+                                                break;
+                                            default:
+                                                r = i.line();
+                                        }
+                                        t.chart.brush && t.chart.brush.enabled && (r = i.brush(r)),
+                                            t.chart.stacked && "100%" === t.chart.stackType && i.stacked100(),
+                                            this.checkForDarkTheme(window.Apex),
+                                            this.checkForDarkTheme(t),
+                                            (t.xaxis = t.xaxis || window.Apex.xaxis || {});
+                                        var o = A.checkComboSeries(t.series);
+                                        ("line" !== t.chart.type && "area" !== t.chart.type && "scatter" !== t.chart.type) ||
+                                            o.comboChartsHasBars ||
+                                            "datetime" === t.xaxis.type ||
+                                            "numeric" === t.xaxis.type ||
+                                            "between" === t.xaxis.tickPlacement ||
+                                            (t = S.convertCatToNumeric(t)),
+                                            ((t.chart.sparkline && t.chart.sparkline.enabled) || (window.Apex.chart && window.Apex.chart.sparkline && window.Apex.chart.sparkline.enabled)) && (r = i.sparkline(r)),
+                                            (n = p.extend(a, r));
+                                    }
+                                    var l = p.extend(n, window.Apex);
+                                    return (a = p.extend(l, t)), (a = this.handleUserInputErrors(a));
+                                },
+                            },
+                            {
+                                key: "extendYAxis",
+                                value: function (t) {
+                                    var e = new y();
+                                    return (
+                                        void 0 === t.yaxis && (t.yaxis = {}),
+                                        t.yaxis.constructor !== Array && window.Apex.yaxis && window.Apex.yaxis.constructor !== Array && (t.yaxis = p.extend(t.yaxis, window.Apex.yaxis)),
+                                        t.yaxis.constructor !== Array ? (t.yaxis = [p.extend(e.yAxis, t.yaxis)]) : (t.yaxis = p.extendArray(t.yaxis, e.yAxis)),
+                                        t
+                                    );
+                                },
+                            },
+                            {
+                                key: "extendAnnotations",
+                                value: function (t) {
+                                    return (
+                                        void 0 === t.annotations && ((t.annotations = {}), (t.annotations.yaxis = []), (t.annotations.xaxis = []), (t.annotations.points = [])),
+                                        (t = this.extendYAxisAnnotations(t)),
+                                        (t = this.extendXAxisAnnotations(t)),
+                                        (t = this.extendPointAnnotations(t))
+                                    );
+                                },
+                            },
+                            {
+                                key: "extendYAxisAnnotations",
+                                value: function (t) {
+                                    var e = new y();
+                                    return (t.annotations.yaxis = p.extendArray(void 0 !== t.annotations.yaxis ? t.annotations.yaxis : [], e.yAxisAnnotation)), t;
+                                },
+                            },
+                            {
+                                key: "extendXAxisAnnotations",
+                                value: function (t) {
+                                    var e = new y();
+                                    return (t.annotations.xaxis = p.extendArray(void 0 !== t.annotations.xaxis ? t.annotations.xaxis : [], e.xAxisAnnotation)), t;
+                                },
+                            },
+                            {
+                                key: "extendPointAnnotations",
+                                value: function (t) {
+                                    var e = new y();
+                                    return (t.annotations.points = p.extendArray(void 0 !== t.annotations.points ? t.annotations.points : [], e.pointAnnotation)), t;
+                                },
+                            },
+                            {
+                                key: "checkForDarkTheme",
+                                value: function (t) {
+                                    t.theme &&
+                                        "dark" === t.theme.mode &&
+                                        (t.tooltip || (t.tooltip = {}), "light" !== t.tooltip.theme && (t.tooltip.theme = "dark"), t.chart.foreColor || (t.chart.foreColor = "#f6f7f8"), t.theme.palette || (t.theme.palette = "palette4"));
+                                },
+                            },
+                            {
+                                key: "checkEmptySeries",
+                                value: function (t) {
+                                    return 0 === t.length ? [{ data: [] }] : t;
+                                },
+                            },
+                            {
+                                key: "handleUserInputErrors",
+                                value: function (t) {
+                                    var e = t;
+                                    if (e.tooltip.shared && e.tooltip.intersect) throw new Error("tooltip.shared cannot be enabled when tooltip.intersect is true. Turn off any other option by setting it to false.");
+                                    if (
+                                        (e.chart.scroller && console.warn("Scroller has been deprecated since v2.0.0. Please remove the configuration for chart.scroller"),
+                                        ("bar" === e.chart.type || "rangeBar" === e.chart.type) && e.plotOptions.bar.horizontal)
+                                    ) {
+                                        if (e.yaxis.length > 1) throw new Error("Multiple Y Axis for bars are not supported. Switch to column chart by setting plotOptions.bar.horizontal=false");
+                                        e.yaxis[0].reversed && (e.yaxis[0].opposite = !0), (e.xaxis.tooltip.enabled = !1), (e.yaxis[0].tooltip.enabled = !1), (e.chart.zoom.enabled = !1);
+                                    }
+                                    return (
+                                        ("bar" !== e.chart.type && "rangeBar" !== e.chart.type) ||
+                                            (e.tooltip.shared &&
+                                                ("barWidth" === e.xaxis.crosshairs.width &&
+                                                    e.series.length > 1 &&
+                                                    (console.warn('crosshairs.width = "barWidth" is only supported in single series, not in a multi-series barChart.'), (e.xaxis.crosshairs.width = "tickWidth")),
+                                                e.plotOptions.bar.horizontal && ((e.states.hover.type = "none"), (e.tooltip.shared = !1)),
+                                                e.tooltip.followCursor ||
+                                                    (console.warn("followCursor option in shared columns cannot be turned off. Please set %ctooltip.followCursor: true", "color: blue;"), (e.tooltip.followCursor = !0)))),
+                                        "candlestick" === e.chart.type && e.yaxis[0].reversed && (console.warn("Reversed y-axis in candlestick chart is not supported."), (e.yaxis[0].reversed = !1)),
+                                        e.chart.group &&
+                                            0 === e.yaxis[0].labels.minWidth &&
+                                            console.warn("It looks like you have multiple charts in synchronization. You must provide yaxis.labels.minWidth which must be EQUAL for all grouped charts to prevent incorrect behaviour."),
+                                        Array.isArray(e.stroke.width) &&
+                                            "line" !== e.chart.type &&
+                                            "area" !== e.chart.type &&
+                                            (console.warn("stroke.width option accepts array only for line and area charts. Reverted back to Number"), (e.stroke.width = e.stroke.width[0])),
+                                        e
+                                    );
+                                },
+                            },
+                        ]),
+                        t
+                    );
+                })(),
+                L = (function () {
+                    function t() {
+                        n(this, t);
+                    }
+                    return (
+                        o(t, [
+                            {
+                                key: "globalVars",
+                                value: function (t) {
+                                    return {
+                                        chartID: null,
+                                        cuid: null,
+                                        events: { beforeMount: [], mounted: [], updated: [], clicked: [], selection: [], dataPointSelection: [], zoomed: [], scrolled: [] },
+                                        colors: [],
+                                        clientX: null,
+                                        clientY: null,
+                                        fill: { colors: [] },
+                                        stroke: { colors: [] },
+                                        dataLabels: { style: { colors: [] } },
+                                        radarPolygons: { fill: { colors: [] } },
+                                        markers: { colors: [], size: t.markers.size, largestSize: 0 },
+                                        animationEnded: !1,
+                                        isTouchDevice: "ontouchstart" in window || navigator.msMaxTouchPoints,
+                                        isDirty: !1,
+                                        isExecCalled: !1,
+                                        initialConfig: null,
+                                        lastXAxis: [],
+                                        lastYAxis: [],
+                                        series: [],
+                                        seriesRangeStart: [],
+                                        seriesRangeEnd: [],
+                                        seriesPercent: [],
+                                        seriesTotals: [],
+                                        stackedSeriesTotals: [],
+                                        seriesX: [],
+                                        seriesZ: [],
+                                        labels: [],
+                                        timelineLabels: [],
+                                        invertedTimelineLabels: [],
+                                        seriesNames: [],
+                                        noLabelsProvided: !1,
+                                        allSeriesCollapsed: !1,
+                                        collapsedSeries: [],
+                                        collapsedSeriesIndices: [],
+                                        ancillaryCollapsedSeries: [],
+                                        ancillaryCollapsedSeriesIndices: [],
+                                        risingSeries: [],
+                                        dataFormatXNumeric: !1,
+                                        selectedDataPoints: [],
+                                        ignoreYAxisIndexes: [],
+                                        padHorizontal: 0,
+                                        maxValsInArrayIndex: 0,
+                                        radialSize: 0,
+                                        zoomEnabled: "zoom" === t.chart.toolbar.autoSelected && t.chart.toolbar.tools.zoom && t.chart.zoom.enabled,
+                                        panEnabled: "pan" === t.chart.toolbar.autoSelected && t.chart.toolbar.tools.pan,
+                                        selectionEnabled: "selection" === t.chart.toolbar.autoSelected && t.chart.toolbar.tools.selection,
+                                        yaxis: null,
+                                        minY: Number.MIN_VALUE,
+                                        maxY: -Number.MAX_VALUE,
+                                        minYArr: [],
+                                        maxYArr: [],
+                                        maxX: -Number.MAX_VALUE,
+                                        initialmaxX: -Number.MAX_VALUE,
+                                        minX: Number.MIN_VALUE,
+                                        initialminX: Number.MIN_VALUE,
+                                        minZ: Number.MIN_VALUE,
+                                        maxZ: -Number.MAX_VALUE,
+                                        minXDiff: Number.MAX_VALUE,
+                                        mousedown: !1,
+                                        lastClientPosition: {},
+                                        visibleXRange: void 0,
+                                        yRange: [],
+                                        zRange: 0,
+                                        xRange: 0,
+                                        yValueDecimal: 0,
+                                        total: 0,
+                                        SVGNS: "http://www.w3.org/2000/svg",
+                                        svgWidth: 0,
+                                        svgHeight: 0,
+                                        noData: !1,
+                                        locale: {},
+                                        dom: {},
+                                        memory: { methodsToExec: [] },
+                                        shouldAnimate: !0,
+                                        skipLastTimelinelabel: !1,
+                                        delayedElements: [],
+                                        axisCharts: !0,
+                                        isXNumeric: !1,
+                                        isDataXYZ: !1,
+                                        resized: !1,
+                                        resizeTimer: null,
+                                        comboCharts: !1,
+                                        comboChartsHasBars: !1,
+                                        dataChanged: !1,
+                                        previousPaths: [],
+                                        seriesXvalues: [],
+                                        seriesYvalues: [],
+                                        seriesCandleO: [],
+                                        seriesCandleH: [],
+                                        seriesCandleL: [],
+                                        seriesCandleC: [],
+                                        allSeriesHasEqualX: !0,
+                                        dataPoints: 0,
+                                        pointsArray: [],
+                                        dataLabelsRects: [],
+                                        lastDrawnDataLabelsIndexes: [],
+                                        hasNullValues: !1,
+                                        easing: null,
+                                        zoomed: !1,
+                                        gridWidth: 0,
+                                        gridHeight: 0,
+                                        yAxisScale: [],
+                                        xAxisScale: null,
+                                        xAxisTicksPositions: [],
+                                        timescaleTicks: [],
+                                        rotateXLabels: !1,
+                                        defaultLabels: !1,
+                                        xLabelFormatter: void 0,
+                                        yLabelFormatters: [],
+                                        xaxisTooltipFormatter: void 0,
+                                        ttKeyFormatter: void 0,
+                                        ttVal: void 0,
+                                        ttZFormatter: void 0,
+                                        LINE_HEIGHT_RATIO: 1.618,
+                                        xAxisLabelsHeight: 0,
+                                        yAxisLabelsWidth: 0,
+                                        scaleX: 1,
+                                        scaleY: 1,
+                                        translateX: 0,
+                                        translateY: 0,
+                                        translateYAxisX: [],
+                                        yLabelsCoords: [],
+                                        yTitleCoords: [],
+                                        yAxisWidths: [],
+                                        translateXAxisY: 0,
+                                        translateXAxisX: 0,
+                                        tooltip: null,
+                                        tooltipOpts: null,
+                                    };
+                                },
+                            },
+                            {
+                                key: "init",
+                                value: function (t) {
+                                    var e = this.globalVars(t);
+                                    return (
+                                        (e.initialConfig = p.extend({}, t)),
+                                        (e.initialSeries = JSON.parse(JSON.stringify(e.initialConfig.series))),
+                                        (e.lastXAxis = JSON.parse(JSON.stringify(e.initialConfig.xaxis))),
+                                        (e.lastYAxis = JSON.parse(JSON.stringify(e.initialConfig.yaxis))),
+                                        e
+                                    );
+                                },
+                            },
+                        ]),
+                        t
+                    );
+                })(),
+                E = (function () {
+                    function t(e) {
+                        n(this, t), (this.opts = e);
+                    }
+                    return (
+                        o(t, [
+                            {
+                                key: "init",
+                                value: function () {
+                                    var t = new C(this.opts).init();
+                                    return { config: t, globals: new L().init(t) };
+                                },
+                            },
+                        ]),
+                        t
+                    );
+                })(),
+                P = (function () {
+                    function t(e) {
+                        n(this, t), (this.ctx = e), (this.w = e.w), (this.opts = null), (this.seriesIndex = 0);
+                    }
+                    return (
+                        o(t, [
+                            {
+                                key: "clippedImgArea",
+                                value: function (t) {
+                                    var e = this.w,
+                                        i = e.config,
+                                        a = parseInt(e.globals.gridWidth),
+                                        s = parseInt(e.globals.gridHeight),
+                                        n = a > s ? a : s,
+                                        r = t.image,
+                                        o = 0,
+                                        l = 0;
+                                    void 0 === t.width && void 0 === t.height
+                                        ? void 0 !== i.fill.image.width && void 0 !== i.fill.image.height
+                                            ? ((o = i.fill.image.width + 1), (l = i.fill.image.height))
+                                            : ((o = n + 1), (l = n))
+                                        : ((o = t.width), (l = t.height));
+                                    var h = document.createElementNS(e.globals.SVGNS, "pattern");
+                                    m.setAttrs(h, { id: t.patternID, patternUnits: t.patternUnits ? t.patternUnits : "userSpaceOnUse", width: o + "px", height: l + "px" });
+                                    var c = document.createElementNS(e.globals.SVGNS, "image");
+                                    h.appendChild(c),
+                                        c.setAttributeNS("http://www.w3.org/1999/xlink", "href", r),
+                                        m.setAttrs(c, { x: 0, y: 0, preserveAspectRatio: "none", width: o + "px", height: l + "px" }),
+                                        (c.style.opacity = t.opacity),
+                                        e.globals.dom.elDefs.node.appendChild(h);
+                                },
+                            },
+                            {
+                                key: "getSeriesIndex",
+                                value: function (t) {
+                                    var e = this.w;
+                                    return (
+                                        ("bar" === e.config.chart.type && e.config.plotOptions.bar.distributed) || "heatmap" === e.config.chart.type
+                                            ? (this.seriesIndex = t.seriesNumber)
+                                            : (this.seriesIndex = t.seriesNumber % e.globals.series.length),
+                                        this.seriesIndex
+                                    );
+                                },
+                            },
+                            {
+                                key: "fillPath",
+                                value: function (t) {
+                                    var e = this.w;
+                                    this.opts = t;
+                                    var i,
+                                        a,
+                                        s,
+                                        n = this.w.config;
+                                    this.seriesIndex = this.getSeriesIndex(t);
+                                    var r = this.getFillColors(),
+                                        o = r[this.seriesIndex];
+                                    "function" == typeof o && (o = o({ seriesIndex: this.seriesIndex, value: t.value, w: e }));
+                                    var l = this.getFillType(this.seriesIndex),
+                                        h = Array.isArray(n.fill.opacity) ? n.fill.opacity[this.seriesIndex] : n.fill.opacity,
+                                        c = o;
+                                    return (
+                                        t.color && (o = t.color),
+                                        -1 === o.indexOf("rgb") ? (c = p.hexToRgba(o, h)) : o.indexOf("rgba") > -1 && (h = "0." + p.getOpacityFromRGBA(r[this.seriesIndex])),
+                                        "pattern" === l && (a = this.handlePatternFill(a, o, h, c)),
+                                        "gradient" === l && (s = this.handleGradientFill(s, o, h, this.seriesIndex)),
+                                        n.fill.image.src.length > 0 && "image" === l
+                                            ? t.seriesNumber < n.fill.image.src.length
+                                                ? (this.clippedImgArea({ opacity: h, image: n.fill.image.src[t.seriesNumber], patternUnits: t.patternUnits, patternID: "pattern".concat(e.globals.cuid).concat(t.seriesNumber + 1) }),
+                                                  (i = "url(#pattern".concat(e.globals.cuid).concat(t.seriesNumber + 1, ")")))
+                                                : (i = c)
+                                            : (i = "gradient" === l ? s : "pattern" === l ? a : c),
+                                        t.solid && (i = c),
+                                        i
+                                    );
+                                },
+                            },
+                            {
+                                key: "getFillType",
+                                value: function (t) {
+                                    var e = this.w;
+                                    return Array.isArray(e.config.fill.type) ? e.config.fill.type[t] : e.config.fill.type;
+                                },
+                            },
+                            {
+                                key: "getFillColors",
+                                value: function () {
+                                    var t = this.w,
+                                        e = t.config,
+                                        i = this.opts,
+                                        a = [];
+                                    return (
+                                        t.globals.comboCharts
+                                            ? "line" === t.config.series[this.seriesIndex].type
+                                                ? t.globals.stroke.colors instanceof Array
+                                                    ? (a = t.globals.stroke.colors)
+                                                    : a.push(t.globals.stroke.colors)
+                                                : t.globals.fill.colors instanceof Array
+                                                ? (a = t.globals.fill.colors)
+                                                : a.push(t.globals.fill.colors)
+                                            : "line" === e.chart.type
+                                            ? t.globals.stroke.colors instanceof Array
+                                                ? (a = t.globals.stroke.colors)
+                                                : a.push(t.globals.stroke.colors)
+                                            : t.globals.fill.colors instanceof Array
+                                            ? (a = t.globals.fill.colors)
+                                            : a.push(t.globals.fill.colors),
+                                        void 0 !== i.fillColors && ((a = []), i.fillColors instanceof Array ? (a = i.fillColors.slice()) : a.push(i.fillColors)),
+                                        a
+                                    );
+                                },
+                            },
+                            {
+                                key: "handlePatternFill",
+                                value: function (t, e, i, a) {
+                                    var s = this.w.config,
+                                        n = this.opts,
+                                        r = new m(this.ctx),
+                                        o =
+                                            void 0 === s.fill.pattern.strokeWidth
+                                                ? Array.isArray(s.stroke.width)
+                                                    ? s.stroke.width[this.seriesIndex]
+                                                    : s.stroke.width
+                                                : Array.isArray(s.fill.pattern.strokeWidth)
+                                                ? s.fill.pattern.strokeWidth[this.seriesIndex]
+                                                : s.fill.pattern.strokeWidth,
+                                        l = e;
+                                    s.fill.pattern.style instanceof Array
+                                        ? (t = void 0 !== s.fill.pattern.style[n.seriesNumber] ? r.drawPattern(s.fill.pattern.style[n.seriesNumber], s.fill.pattern.width, s.fill.pattern.height, l, o, i) : a)
+                                        : (t = r.drawPattern(s.fill.pattern.style, s.fill.pattern.width, s.fill.pattern.height, l, o, i));
+                                    return t;
+                                },
+                            },
+                            {
+                                key: "handleGradientFill",
+                                value: function (t, e, i, a) {
+                                    var s,
+                                        n,
+                                        r = this.w.config,
+                                        o = this.opts,
+                                        l = new m(this.ctx),
+                                        h = new p(),
+                                        c = r.fill.gradient.type,
+                                        d = void 0 === r.fill.gradient.opacityFrom ? i : Array.isArray(r.fill.gradient.opacityFrom) ? r.fill.gradient.opacityFrom[a] : r.fill.gradient.opacityFrom,
+                                        u = void 0 === r.fill.gradient.opacityTo ? i : Array.isArray(r.fill.gradient.opacityTo) ? r.fill.gradient.opacityTo[a] : r.fill.gradient.opacityTo;
+                                    if (
+                                        ((s = e),
+                                        (n =
+                                            void 0 === r.fill.gradient.gradientToColors || 0 === r.fill.gradient.gradientToColors.length
+                                                ? "dark" === r.fill.gradient.shade
+                                                    ? h.shadeColor(-1 * parseFloat(r.fill.gradient.shadeIntensity), e)
+                                                    : h.shadeColor(parseFloat(r.fill.gradient.shadeIntensity), e)
+                                                : r.fill.gradient.gradientToColors[o.seriesNumber]),
+                                        r.fill.gradient.inverseColors)
+                                    ) {
+                                        var f = s;
+                                        (s = n), (n = f);
+                                    }
+                                    return l.drawGradient(c, s, n, d, u, o.size, r.fill.gradient.stops, r.fill.gradient.colorStops, a);
+                                },
+                            },
+                        ]),
+                        t
+                    );
+                })(),
+                T = (function () {
+                    function t(e, i) {
+                        n(this, t), (this.ctx = e), (this.w = e.w);
+                    }
+                    return (
+                        o(t, [
+                            {
+                                key: "setGlobalMarkerSize",
+                                value: function () {
+                                    var t = this.w;
+                                    if (((t.globals.markers.size = Array.isArray(t.config.markers.size) ? t.config.markers.size : [t.config.markers.size]), t.globals.markers.size.length > 0)) {
+                                        if (t.globals.markers.size.length < t.globals.series.length + 1)
+                                            for (var e = 0; e <= t.globals.series.length; e++) void 0 === t.globals.markers.size[e] && t.globals.markers.size.push(t.globals.markers.size[0]);
+                                    } else
+                                        t.globals.markers.size = t.config.series.map(function (e) {
+                                            return t.config.markers.size;
+                                        });
+                                },
+                            },
+                            {
+                                key: "plotChartMarkers",
+                                value: function (t, e, i) {
+                                    var a,
+                                        s = this,
+                                        n = this.w,
+                                        r = e,
+                                        o = t,
+                                        l = null,
+                                        h = new m(this.ctx);
+                                    if ((n.globals.markers.size[e] > 0 && (l = h.group({ class: "apexcharts-series-markers" })).attr("clip-path", "url(#gridRectMarkerMask".concat(n.globals.cuid, ")")), o.x instanceof Array))
+                                        for (
+                                            var c = function (t) {
+                                                    var c = i;
+                                                    1 === i && 0 === t && (c = 0), 1 === i && 1 === t && (c = 1);
+                                                    var d = "apexcharts-marker";
+                                                    if (
+                                                        (("line" !== n.config.chart.type && "area" !== n.config.chart.type) || n.globals.comboCharts || n.config.tooltip.intersect || (d += " no-pointer-events"),
+                                                        Array.isArray(n.config.markers.size) ? n.globals.markers.size[e] > 0 : n.config.markers.size > 0)
+                                                    ) {
+                                                        p.isNumber(o.y[t]) ? (d += " w".concat((Math.random() + 1).toString(36).substring(4))) : (d = "apexcharts-nullpoint");
+                                                        var u = s.getMarkerConfig(d, e);
+                                                        n.config.markers.discrete.map(function (t) {
+                                                            t.seriesIndex === e && t.dataPointIndex === c && ((u.pointStrokeColor = t.strokeColor), (u.pointFillColor = t.fillColor), (u.pSize = t.size));
+                                                        }),
+                                                            n.config.series[r].data[i] &&
+                                                                (n.config.series[r].data[i].fillColor && (u.pointFillColor = n.config.series[r].data[i].fillColor),
+                                                                n.config.series[r].data[i].strokeColor && (u.pointStrokeColor = n.config.series[r].data[i].strokeColor)),
+                                                            (a = h.drawMarker(o.x[t], o.y[t], u)).attr("rel", c),
+                                                            a.attr("j", c),
+                                                            a.attr("index", e),
+                                                            a.node.setAttribute("default-marker-size", u.pSize),
+                                                            new x(s.ctx).setSelectionFilter(a, e, c),
+                                                            s.addEvents(a),
+                                                            l && l.add(a);
+                                                    } else void 0 === n.globals.pointsArray[e] && (n.globals.pointsArray[e] = []), n.globals.pointsArray[e].push([o.x[t], o.y[t]]);
+                                                },
+                                                d = 0;
+                                            d < o.x.length;
+                                            d++
+                                        )
+                                            c(d);
+                                    return l;
+                                },
+                            },
+                            {
+                                key: "getMarkerConfig",
+                                value: function (t, e) {
+                                    var i = this.w,
+                                        a = this.getMarkerStyle(e);
+                                    return {
+                                        pSize: i.globals.markers.size[e],
+                                        pRadius: i.config.markers.radius,
+                                        pWidth: i.config.markers.strokeWidth,
+                                        pointStrokeColor: a.pointStrokeColor,
+                                        pointFillColor: a.pointFillColor,
+                                        shape: i.config.markers.shape instanceof Array ? i.config.markers.shape[e] : i.config.markers.shape,
+                                        class: t,
+                                        pointStrokeOpacity: i.config.markers.strokeOpacity,
+                                        pointFillOpacity: i.config.markers.fillOpacity,
+                                        seriesIndex: e,
+                                    };
+                                },
+                            },
+                            {
+                                key: "addEvents",
+                                value: function (t) {
+                                    var e = new m(this.ctx);
+                                    t.node.addEventListener("mouseenter", e.pathMouseEnter.bind(this.ctx, t)),
+                                        t.node.addEventListener("mouseleave", e.pathMouseLeave.bind(this.ctx, t)),
+                                        t.node.addEventListener("mousedown", e.pathMouseDown.bind(this.ctx, t)),
+                                        t.node.addEventListener("touchstart", e.pathMouseDown.bind(this.ctx, t), { passive: !0 });
+                                },
+                            },
+                            {
+                                key: "getMarkerStyle",
+                                value: function (t) {
+                                    var e = this.w,
+                                        i = e.globals.markers.colors,
+                                        a = e.config.markers.strokeColor || e.config.markers.strokeColors;
+                                    return { pointStrokeColor: a instanceof Array ? a[t] : a, pointFillColor: i instanceof Array ? i[t] : i };
+                                },
+                            },
+                        ]),
+                        t
+                    );
+                })(),
+                M = (function () {
+                    function t(e) {
+                        n(this, t),
+                            (this.ctx = e),
+                            (this.w = e.w),
+                            (this.initialAnim = this.w.config.chart.animations.enabled),
+                            (this.dynamicAnim = this.initialAnim && this.w.config.chart.animations.dynamicAnimation.enabled),
+                            (this.radiusSizes = []);
+                    }
+                    return (
+                        o(t, [
+                            {
+                                key: "draw",
+                                value: function (t, e, i) {
+                                    var a = this.w,
+                                        s = new m(this.ctx),
+                                        n = i.realIndex,
+                                        r = i.pointsPos,
+                                        o = i.zRatio,
+                                        l = i.elParent,
+                                        h = s.group({ class: "apexcharts-series-markers apexcharts-series-".concat(a.config.chart.type) });
+                                    if ((h.attr("clip-path", "url(#gridRectMarkerMask".concat(a.globals.cuid, ")")), r.x instanceof Array))
+                                        for (var c = 0; c < r.x.length; c++) {
+                                            var d = e + 1,
+                                                u = !0;
+                                            0 === e && 0 === c && (d = 0), 0 === e && 1 === c && (d = 1);
+                                            var f = 0,
+                                                g = a.globals.markers.size[n];
+                                            o !== 1 / 0 && ((g = a.globals.seriesZ[n][d] / o), void 0 === this.radiusSizes[n] && this.radiusSizes.push([]), this.radiusSizes[n].push(g)), a.config.chart.animations.enabled || (f = g);
+                                            var p = r.x[c],
+                                                x = r.y[c];
+                                            if (((f = f || 0), ((0 === p && 0 === x) || null === x || void 0 === a.globals.series[n][d]) && (u = !1), u)) {
+                                                var v = this.drawPoint(p, x, f, g, n, d, e);
+                                                h.add(v);
+                                            }
+                                            l.add(h);
+                                        }
+                                },
+                            },
+                            {
+                                key: "drawPoint",
+                                value: function (t, e, i, a, s, n, r) {
+                                    var o = this.w,
+                                        l = s,
+                                        h = new v(this.ctx),
+                                        c = new x(this.ctx),
+                                        d = new P(this.ctx),
+                                        u = new T(this.ctx),
+                                        f = new m(this.ctx),
+                                        g = u.getMarkerConfig("apexcharts-marker", l),
+                                        p = d.fillPath({ seriesNumber: s, patternUnits: "objectBoundingBox", value: o.globals.series[s][r] }),
+                                        b = f.drawCircle(i);
+                                    if (
+                                        (o.config.series[l].data[n] && o.config.series[l].data[n].fillColor && (p = o.config.series[l].data[n].fillColor),
+                                        b.attr({ cx: t, cy: e, fill: p, stroke: g.pointStrokeColor, strokeWidth: g.pWidth }),
+                                        o.config.chart.dropShadow.enabled)
+                                    ) {
+                                        var y = o.config.chart.dropShadow;
+                                        c.dropShadow(b, y, s);
+                                    }
+                                    if (this.initialAnim && !o.globals.dataChanged) {
+                                        var w = 1;
+                                        o.globals.resized || (w = o.config.chart.animations.speed), h.animateCircleRadius(b, 0, a, w, o.globals.easing);
+                                    }
+                                    if (o.globals.dataChanged)
+                                        if (this.dynamicAnim) {
+                                            var k,
+                                                S,
+                                                A,
+                                                C,
+                                                L = o.config.chart.animations.dynamicAnimation.speed;
+                                            null != (C = o.globals.previousPaths[s] && o.globals.previousPaths[s][r]) && ((k = C.x), (S = C.y), (A = void 0 !== C.r ? C.r : a));
+                                            for (var E = 0; E < o.globals.collapsedSeries.length; E++) o.globals.collapsedSeries[E].index === s && ((L = 1), (a = 0));
+                                            0 === t && 0 === e && (a = 0), h.animateCircle(b, { cx: k, cy: S, r: A }, { cx: t, cy: e, r: a }, L, o.globals.easing);
+                                        } else b.attr({ r: a });
+                                    return b.attr({ rel: n, j: n, index: s, "default-marker-size": a }), c.setSelectionFilter(b, s, n), u.addEvents(b), b.node.classList.add("apexcharts-marker"), b;
+                                },
+                            },
+                            {
+                                key: "centerTextInBubble",
+                                value: function (t) {
+                                    var e = this.w;
+                                    return { y: (t += parseInt(e.config.dataLabels.style.fontSize) / 4) };
+                                },
+                            },
+                        ]),
+                        t
+                    );
+                })(),
+                z = (function () {
+                    function t(e) {
+                        n(this, t), (this.ctx = e), (this.w = e.w);
+                    }
+                    return (
+                        o(t, [
+                            {
+                                key: "dataLabelsCorrection",
+                                value: function (t, e, i, a, s, n, r) {
+                                    var o = this.w,
+                                        l = !1,
+                                        h = new m(this.ctx).getTextRects(i, r),
+                                        c = h.width,
+                                        d = h.height;
+                                    void 0 === o.globals.dataLabelsRects[a] && (o.globals.dataLabelsRects[a] = []), o.globals.dataLabelsRects[a].push({ x: t, y: e, width: c, height: d });
+                                    var u = o.globals.dataLabelsRects[a].length - 2,
+                                        f = void 0 !== o.globals.lastDrawnDataLabelsIndexes[a] ? o.globals.lastDrawnDataLabelsIndexes[a][o.globals.lastDrawnDataLabelsIndexes[a].length - 1] : 0;
+                                    if (void 0 !== o.globals.dataLabelsRects[a][u]) {
+                                        var g = o.globals.dataLabelsRects[a][f];
+                                        (t > g.x + g.width + 2 || e > g.y + g.height + 2 || t + c < g.x) && (l = !0);
+                                    }
+                                    return (0 === s || n) && (l = !0), { x: t, y: e, drawnextLabel: l };
+                                },
+                            },
+                            {
+                                key: "drawDataLabel",
+                                value: function (t, e, i) {
+                                    var a = arguments.length > 4 && void 0 !== arguments[4] ? arguments[4] : "top",
+                                        s = this.w,
+                                        n = new m(this.ctx),
+                                        r = s.config.dataLabels,
+                                        o = 0,
+                                        l = 0,
+                                        h = i,
+                                        c = null;
+                                    if (!r.enabled || t.x instanceof Array != !0) return c;
+                                    (c = n.group({ class: "apexcharts-data-labels" })).attr("clip-path", "url(#gridRectMarkerMask".concat(s.globals.cuid, ")"));
+                                    for (var d = 0; d < t.x.length; d++)
+                                        if (((o = t.x[d] + r.offsetX), (l = t.y[d] + r.offsetY - s.globals.markers.size[e] - 5), "bottom" === a && (l = l + 2 * s.globals.markers.size[e] + 1.4 * parseInt(r.style.fontSize)), !isNaN(o))) {
+                                            1 === i && 0 === d && (h = 0), 1 === i && 1 === d && (h = 1);
+                                            var u = s.globals.series[e][h],
+                                                f = "";
+                                            if ("bubble" === s.config.chart.type) (f = s.globals.seriesZ[e][h]), (l = t.y[d] + s.config.dataLabels.offsetY), (l = new M(this.ctx).centerTextInBubble(l, e, h).y);
+                                            else void 0 !== u && (f = s.config.dataLabels.formatter(u, { ctx: this.ctx, seriesIndex: e, dataPointIndex: h, w: s }));
+                                            this.plotDataLabelsText({ x: o, y: l, text: f, i: e, j: h, parent: c, offsetCorrection: !0, dataLabelsConfig: s.config.dataLabels });
+                                        }
+                                    return c;
+                                },
+                            },
+                            {
+                                key: "plotDataLabelsText",
+                                value: function (t) {
+                                    var e = this.w,
+                                        i = new m(this.ctx),
+                                        a = t.x,
+                                        s = t.y,
+                                        n = t.i,
+                                        r = t.j,
+                                        o = t.text,
+                                        l = t.textAnchor,
+                                        h = t.parent,
+                                        c = t.dataLabelsConfig,
+                                        d = t.alwaysDrawDataLabel,
+                                        u = t.offsetCorrection;
+                                    if (!(Array.isArray(e.config.dataLabels.enabledOnSeries) && e.config.dataLabels.enabledOnSeries.indexOf(n) > -1)) {
+                                        var f = { x: a, y: s, drawnextLabel: !0 };
+                                        if ((u && (f = this.dataLabelsCorrection(a, s, o, n, r, d, parseInt(c.style.fontSize))), e.globals.zoomed || ((a = f.x), (s = f.y)), f.drawnextLabel)) {
+                                            var g = i.drawText({
+                                                width: 100,
+                                                height: parseInt(c.style.fontSize),
+                                                x: a,
+                                                y: s,
+                                                foreColor: e.globals.dataLabels.style.colors[n],
+                                                textAnchor: l || c.textAnchor,
+                                                text: o,
+                                                fontSize: c.style.fontSize,
+                                                fontFamily: c.style.fontFamily,
+                                            });
+                                            if ((g.attr({ class: "apexcharts-datalabel", cx: a, cy: s }), c.dropShadow.enabled)) {
+                                                var p = c.dropShadow;
+                                                new x(this.ctx).dropShadow(g, p);
+                                            }
+                                            h.add(g), void 0 === e.globals.lastDrawnDataLabelsIndexes[n] && (e.globals.lastDrawnDataLabelsIndexes[n] = []), e.globals.lastDrawnDataLabelsIndexes[n].push(r);
+                                        }
+                                    }
+                                },
+                            },
+                        ]),
+                        t
+                    );
+                })(),
+                I = (function () {
+                    function t(e, i) {
+                        n(this, t), (this.ctx = e), (this.w = e.w);
+                        var a = this.w;
+                        (this.barOptions = a.config.plotOptions.bar),
+                            (this.isHorizontal = this.barOptions.horizontal),
+                            (this.strokeWidth = a.config.stroke.width),
+                            (this.isNullValue = !1),
+                            (this.xyRatios = i),
+                            null !== this.xyRatios &&
+                                ((this.xRatio = i.xRatio),
+                                (this.yRatio = i.yRatio),
+                                (this.invertedXRatio = i.invertedXRatio),
+                                (this.invertedYRatio = i.invertedYRatio),
+                                (this.baseLineY = i.baseLineY),
+                                (this.baseLineInvertedY = i.baseLineInvertedY)),
+                            (this.yaxisIndex = 0),
+                            (this.seriesLen = 0);
+                    }
+                    return (
+                        o(t, [
+                            {
+                                key: "draw",
+                                value: function (t, e) {
+                                    var i = this.w,
+                                        a = new m(this.ctx),
+                                        s = new A(this.ctx, i);
+                                    (t = s.getLogSeries(t)), (this.series = t), (this.yRatio = s.getLogYRatios(this.yRatio)), this.initVariables(t);
+                                    var n = a.group({ class: "apexcharts-bar-series apexcharts-plot-series" });
+                                    i.config.dataLabels.enabled &&
+                                        this.totalItems > i.config.plotOptions.bar.dataLabels.maxItems &&
+                                        console.warn("WARNING: DataLabels are enabled but there are too many to display. This may cause performance issue when rendering.");
+                                    for (var r = 0, o = 0; r < t.length; r++, o++) {
+                                        var l,
+                                            h,
+                                            c,
+                                            d,
+                                            u = void 0,
+                                            f = void 0,
+                                            g = void 0,
+                                            x = void 0,
+                                            v = [],
+                                            b = [],
+                                            y = i.globals.comboCharts ? e[r] : r,
+                                            w = a.group({ class: "apexcharts-series", rel: r + 1, seriesName: p.escapeString(i.globals.seriesNames[y]), "data:realIndex": y });
+                                        this.ctx.series.addCollapsedClassToSeries(w, y), t[r].length > 0 && (this.visibleI = this.visibleI + 1);
+                                        var k = 0,
+                                            S = 0,
+                                            C = 0;
+                                        this.yRatio.length > 1 && (this.yaxisIndex = y), (this.isReversed = i.config.yaxis[this.yaxisIndex] && i.config.yaxis[this.yaxisIndex].reversed);
+                                        var L = this.initialPositions();
+                                        (x = L.y), (S = L.barHeight), (h = L.yDivision), (d = L.zeroW), (g = L.x), (C = L.barWidth), (l = L.xDivision), (c = L.zeroH), this.horizontal || b.push(g + C / 2);
+                                        for (var E = a.group({ class: "apexcharts-datalabels" }), P = 0, T = i.globals.dataPoints; P < i.globals.dataPoints; P++, T--) {
+                                            void 0 === this.series[r][P] || null === t[r][P] ? (this.isNullValue = !0) : (this.isNullValue = !1),
+                                                i.config.stroke.show && (k = this.isNullValue ? 0 : Array.isArray(this.strokeWidth) ? this.strokeWidth[y] : this.strokeWidth);
+                                            var M = null;
+                                            this.isHorizontal
+                                                ? ((M = this.drawBarPaths({ indexes: { i: r, j: P, realIndex: y, bc: o }, barHeight: S, strokeWidth: k, pathTo: u, pathFrom: f, zeroW: d, x: g, y: x, yDivision: h, elSeries: w })),
+                                                  (C = this.series[r][P] / this.invertedYRatio))
+                                                : ((M = this.drawColumnPaths({ indexes: { i: r, j: P, realIndex: y, bc: o }, x: g, y: x, xDivision: l, pathTo: u, pathFrom: f, barWidth: C, zeroH: c, strokeWidth: k, elSeries: w })),
+                                                  (S = this.series[r][P] / this.yRatio[this.yaxisIndex])),
+                                                (u = M.pathTo),
+                                                (f = M.pathFrom),
+                                                (x = M.y),
+                                                (g = M.x),
+                                                P > 0 && b.push(g + C / 2),
+                                                v.push(x);
+                                            var z = this.getPathFillColor(t, r, P, y);
+                                            w = this.renderSeries({
+                                                realIndex: y,
+                                                pathFill: z,
+                                                j: P,
+                                                i: r,
+                                                pathFrom: f,
+                                                pathTo: u,
+                                                strokeWidth: k,
+                                                elSeries: w,
+                                                x: g,
+                                                y: x,
+                                                series: t,
+                                                barHeight: S,
+                                                barWidth: C,
+                                                elDataLabelsWrap: E,
+                                                visibleSeries: this.visibleI,
+                                                type: "bar",
+                                            });
+                                        }
+                                        (i.globals.seriesXvalues[y] = b), (i.globals.seriesYvalues[y] = v), n.add(w);
+                                    }
+                                    return n;
+                                },
+                            },
+                            {
+                                key: "getPathFillColor",
+                                value: function (t, e, i, a) {
+                                    var s = this.w,
+                                        n = new P(this.ctx),
+                                        r = null,
+                                        o = this.barOptions.distributed ? i : e;
+                                    this.barOptions.colors.ranges.length > 0 &&
+                                        this.barOptions.colors.ranges.map(function (a) {
+                                            t[e][i] >= a.from && t[e][i] <= a.to && (r = a.color);
+                                        });
+                                    return (
+                                        s.config.series[e].data[i] && s.config.series[e].data[i].fillColor && (r = s.config.series[e].data[i].fillColor),
+                                        n.fillPath({ seriesNumber: this.barOptions.distributed ? o : a, color: r, value: t[e][i] })
+                                    );
+                                },
+                            },
+                            {
+                                key: "renderSeries",
+                                value: function (t) {
+                                    var e = t.realIndex,
+                                        i = t.pathFill,
+                                        a = t.lineFill,
+                                        s = t.j,
+                                        n = t.i,
+                                        r = t.pathFrom,
+                                        o = t.pathTo,
+                                        l = t.strokeWidth,
+                                        h = t.elSeries,
+                                        c = t.x,
+                                        d = t.y,
+                                        u = t.series,
+                                        f = t.barHeight,
+                                        g = t.barWidth,
+                                        p = t.elDataLabelsWrap,
+                                        v = t.visibleSeries,
+                                        b = t.type,
+                                        y = this.w,
+                                        w = new m(this.ctx);
+                                    a || (a = this.barOptions.distributed ? y.globals.stroke.colors[s] : y.globals.stroke.colors[e]),
+                                        y.config.series[n].data[s] && y.config.series[n].data[s].strokeColor && (a = y.config.series[n].data[s].strokeColor),
+                                        this.isNullValue && (i = "none");
+                                    var k = ((s / y.config.chart.animations.animateGradually.delay) * (y.config.chart.animations.speed / y.globals.dataPoints)) / 2.4,
+                                        S = w.renderPaths({
+                                            i: n,
+                                            j: s,
+                                            realIndex: e,
+                                            pathFrom: r,
+                                            pathTo: o,
+                                            stroke: a,
+                                            strokeWidth: l,
+                                            strokeLineCap: y.config.stroke.lineCap,
+                                            fill: i,
+                                            animationDelay: k,
+                                            initialSpeed: y.config.chart.animations.speed,
+                                            dataChangeSpeed: y.config.chart.animations.dynamicAnimation.speed,
+                                            className: "apexcharts-".concat(b, "-area"),
+                                            id: "apexcharts-".concat(b, "-area"),
+                                        });
+                                    S.attr("clip-path", "url(#gridRectMask".concat(y.globals.cuid, ")")), new x(this.ctx).setSelectionFilter(S, e, s), h.add(S);
+                                    var A = this.calculateDataLabelsPos({ x: c, y: d, i: n, j: s, series: u, realIndex: e, barHeight: f, barWidth: g, renderedPath: S, visibleSeries: v });
+                                    return null !== A && p.add(A), h.add(p), h;
+                                },
+                            },
+                            {
+                                key: "initVariables",
+                                value: function (t) {
+                                    var e = this.w;
+                                    (this.series = t), (this.totalItems = 0), (this.seriesLen = 0), (this.visibleI = -1), (this.visibleItems = 1);
+                                    for (var i = 0; i < t.length; i++)
+                                        if ((t[i].length > 0 && ((this.seriesLen = this.seriesLen + 1), (this.totalItems += t[i].length)), e.globals.isXNumeric))
+                                            for (var a = 0; a < t[i].length; a++) e.globals.seriesX[i][a] > e.globals.minX && e.globals.seriesX[i][a] < e.globals.maxX && this.visibleItems++;
+                                        else this.visibleItems = e.globals.dataPoints;
+                                    0 === this.seriesLen && (this.seriesLen = 1);
+                                },
+                            },
+                            {
+                                key: "initialPositions",
+                                value: function () {
+                                    var t,
+                                        e,
+                                        i,
+                                        a,
+                                        s,
+                                        n,
+                                        r,
+                                        o,
+                                        l = this.w;
+                                    return (
+                                        this.isHorizontal
+                                            ? ((s = (i = l.globals.gridHeight / l.globals.dataPoints) / this.seriesLen),
+                                              l.globals.isXNumeric && (s = (i = l.globals.gridHeight / this.totalItems) / this.seriesLen),
+                                              (s = (s * parseInt(this.barOptions.barHeight)) / 100),
+                                              (o = this.baseLineInvertedY + l.globals.padHorizontal + (this.isReversed ? l.globals.gridWidth : 0) - (this.isReversed ? 2 * this.baseLineInvertedY : 0)),
+                                              (e = (i - s * this.seriesLen) / 2))
+                                            : ((n = (((a = l.globals.gridWidth / this.visibleItems) / this.seriesLen) * parseInt(this.barOptions.columnWidth)) / 100),
+                                              l.globals.isXNumeric && (n = (((a = l.globals.minXDiff / this.xRatio) / this.seriesLen) * parseInt(this.barOptions.columnWidth)) / 100),
+                                              (r = l.globals.gridHeight - this.baseLineY[this.yaxisIndex] - (this.isReversed ? l.globals.gridHeight : 0) + (this.isReversed ? 2 * this.baseLineY[this.yaxisIndex] : 0)),
+                                              (t = l.globals.padHorizontal + (a - n * this.seriesLen) / 2)),
+                                        { x: t, y: e, yDivision: i, xDivision: a, barHeight: s, barWidth: n, zeroH: r, zeroW: o }
+                                    );
+                                },
+                            },
+                            {
+                                key: "drawBarPaths",
+                                value: function (t) {
+                                    var e = t.indexes,
+                                        i = t.barHeight,
+                                        a = t.strokeWidth,
+                                        s = t.pathTo,
+                                        n = t.pathFrom,
+                                        r = t.zeroW,
+                                        o = t.x,
+                                        l = t.y,
+                                        h = t.yDivision,
+                                        c = t.elSeries,
+                                        d = this.w,
+                                        u = new m(this.ctx),
+                                        f = e.i,
+                                        g = e.j,
+                                        p = e.realIndex,
+                                        x = e.bc;
+                                    d.globals.isXNumeric && (l = (d.globals.seriesX[f][g] - d.globals.minX) / this.invertedXRatio - i);
+                                    var v = l + i * this.visibleI;
+                                    (s = u.move(r, v)), (n = u.move(r, v)), d.globals.previousPaths.length > 0 && (n = this.getPathFrom(p, g));
+                                    var b = {
+                                            barHeight: i,
+                                            strokeWidth: a,
+                                            barYPosition: v,
+                                            x: (o = void 0 === this.series[f][g] || null === this.series[f][g] ? r : r + this.series[f][g] / this.invertedYRatio - 2 * (this.isReversed ? this.series[f][g] / this.invertedYRatio : 0)),
+                                            zeroW: r,
+                                        },
+                                        y = this.barEndingShape(d, b, this.series, f, g);
+                                    if (
+                                        ((s = s + u.line(y.newX, v) + y.path + u.line(r, v + i - a) + u.line(r, v)),
+                                        (n = n + u.line(r, v) + y.ending_p_from + u.line(r, v + i - a) + u.line(r, v + i - a) + u.line(r, v)),
+                                        d.globals.isXNumeric || (l += h),
+                                        this.barOptions.colors.backgroundBarColors.length > 0 && 0 === f)
+                                    ) {
+                                        x >= this.barOptions.colors.backgroundBarColors.length && (x = 0);
+                                        var w = this.barOptions.colors.backgroundBarColors[x],
+                                            k = u.drawRect(0, v - i * this.visibleI, d.globals.gridWidth, i * this.seriesLen, 0, w, this.barOptions.colors.backgroundBarOpacity);
+                                        c.add(k), k.node.classList.add("apexcharts-backgroundBar");
+                                    }
+                                    return { pathTo: s, pathFrom: n, x: o, y: l, barYPosition: v };
+                                },
+                            },
+                            {
+                                key: "drawColumnPaths",
+                                value: function (t) {
+                                    var e = t.indexes,
+                                        i = t.x,
+                                        a = t.y,
+                                        s = t.xDivision,
+                                        n = t.pathTo,
+                                        r = t.pathFrom,
+                                        o = t.barWidth,
+                                        l = t.zeroH,
+                                        h = t.strokeWidth,
+                                        c = t.elSeries,
+                                        d = this.w,
+                                        u = new m(this.ctx),
+                                        f = e.i,
+                                        g = e.j,
+                                        p = e.realIndex,
+                                        x = e.bc;
+                                    d.globals.isXNumeric && (i = (d.globals.seriesX[f][g] - d.globals.minX) / this.xRatio - o / 2);
+                                    var v = i + o * this.visibleI;
+                                    (n = u.move(v, l)), (r = u.move(v, l)), d.globals.previousPaths.length > 0 && (r = this.getPathFrom(p, g));
+                                    var b = {
+                                            barWidth: o,
+                                            strokeWidth: h,
+                                            barXPosition: v,
+                                            y: (a =
+                                                void 0 === this.series[f][g] || null === this.series[f][g]
+                                                    ? l
+                                                    : l - this.series[f][g] / this.yRatio[this.yaxisIndex] + 2 * (this.isReversed ? this.series[f][g] / this.yRatio[this.yaxisIndex] : 0)),
+                                            zeroH: l,
+                                        },
+                                        y = this.barEndingShape(d, b, this.series, f, g);
+                                    if (
+                                        ((n = n + u.line(v, y.newY) + y.path + u.line(v + o - h, l) + u.line(v - h / 2, l)),
+                                        (r = r + u.line(v, l) + y.ending_p_from + u.line(v + o - h, l) + u.line(v + o - h, l) + u.line(v - h / 2, l)),
+                                        d.globals.isXNumeric || (i += s),
+                                        this.barOptions.colors.backgroundBarColors.length > 0 && 0 === f)
+                                    ) {
+                                        x >= this.barOptions.colors.backgroundBarColors.length && (x = 0);
+                                        var w = this.barOptions.colors.backgroundBarColors[x],
+                                            k = u.drawRect(v - o * this.visibleI, 0, o * this.seriesLen, d.globals.gridHeight, 0, w, this.barOptions.colors.backgroundBarOpacity);
+                                        c.add(k), k.node.classList.add("apexcharts-backgroundBar");
+                                    }
+                                    return { pathTo: n, pathFrom: r, x: i, y: a, barXPosition: v };
+                                },
+                            },
+                            {
+                                key: "getPathFrom",
+                                value: function (t, e) {
+                                    for (var i, a = this.w, s = 0; s < a.globals.previousPaths.length; s++) {
+                                        var n = a.globals.previousPaths[s];
+                                        n.paths.length > 0 && parseInt(n.realIndex) === parseInt(t) && void 0 !== a.globals.previousPaths[s].paths[e] && (i = a.globals.previousPaths[s].paths[e].d);
+                                    }
+                                    return i;
+                                },
+                            },
+                            {
+                                key: "calculateDataLabelsPos",
+                                value: function (t) {
+                                    var e = t.x,
+                                        i = t.y,
+                                        a = t.i,
+                                        s = t.j,
+                                        n = t.realIndex,
+                                        r = t.series,
+                                        o = t.barHeight,
+                                        l = t.barWidth,
+                                        h = t.visibleSeries,
+                                        c = t.renderedPath,
+                                        d = this.w,
+                                        u = new m(this.ctx),
+                                        f = Array.isArray(this.strokeWidth) ? this.strokeWidth[n] : this.strokeWidth,
+                                        g = e + parseFloat(l * h),
+                                        p = i + parseFloat(o * h);
+                                    d.globals.isXNumeric && !d.globals.isBarHorizontal && ((g = e + parseFloat(l * (h + 1)) - f), (p = i + parseFloat(o * (h + 1)) - f));
+                                    var x = e,
+                                        v = i,
+                                        b = {},
+                                        y = d.config.dataLabels,
+                                        w = this.barOptions.dataLabels,
+                                        k = y.offsetX,
+                                        S = y.offsetY,
+                                        A = { width: 0, height: 0 };
+                                    return (
+                                        d.config.dataLabels.enabled && (A = u.getTextRects(d.globals.yLabelFormatters[0](d.globals.maxY), parseInt(y.style.fontSize))),
+                                        (b = this.isHorizontal
+                                            ? this.calculateBarsDataLabelsPosition({
+                                                  x: e,
+                                                  y: i,
+                                                  i: a,
+                                                  j: s,
+                                                  renderedPath: c,
+                                                  bcy: p,
+                                                  barHeight: o,
+                                                  barWidth: l,
+                                                  textRects: A,
+                                                  strokeWidth: f,
+                                                  dataLabelsX: x,
+                                                  dataLabelsY: v,
+                                                  barDataLabelsConfig: w,
+                                                  offX: k,
+                                                  offY: S,
+                                              })
+                                            : this.calculateColumnsDataLabelsPosition({
+                                                  x: e,
+                                                  y: i,
+                                                  i: a,
+                                                  j: s,
+                                                  renderedPath: c,
+                                                  realIndex: n,
+                                                  bcx: g,
+                                                  bcy: p,
+                                                  barHeight: o,
+                                                  barWidth: l,
+                                                  textRects: A,
+                                                  strokeWidth: f,
+                                                  dataLabelsY: v,
+                                                  barDataLabelsConfig: w,
+                                                  offX: k,
+                                                  offY: S,
+                                              })),
+                                        c.attr({ cy: b.bcy, cx: b.bcx, j: s, val: r[a][s], barHeight: o, barWidth: l }),
+                                        this.drawCalculatedDataLabels({ x: b.dataLabelsX, y: b.dataLabelsY, val: r[a][s], i: n, j: s, barWidth: l, barHeight: o, textRects: A, dataLabelsConfig: y })
+                                    );
+                                },
+                            },
+                            {
+                                key: "calculateColumnsDataLabelsPosition",
+                                value: function (t) {
+                                    var e,
+                                        i = this.w,
+                                        a = t.i,
+                                        s = t.j,
+                                        n = t.y,
+                                        r = t.bcx,
+                                        o = t.barWidth,
+                                        l = t.barHeight,
+                                        h = t.textRects,
+                                        c = t.dataLabelsY,
+                                        d = t.barDataLabelsConfig,
+                                        u = t.strokeWidth,
+                                        f = t.offX,
+                                        g = t.offY,
+                                        p = i.globals.gridWidth / i.globals.dataPoints;
+                                    (r -= u / 2), (e = i.globals.isXNumeric ? r - o / 2 + f : r - p + o / 2 + f);
+                                    var x = this.series[a][s] <= 0;
+                                    switch ((this.isReversed && (n -= l), d.position)) {
+                                        case "center":
+                                            c = x ? n + l / 2 + h.height / 2 + g : n + l / 2 + h.height / 2 - g;
+                                            break;
+                                        case "bottom":
+                                            c = x ? n + l + h.height + u + g : n + l - h.height / 2 + u - g;
+                                            break;
+                                        case "top":
+                                            c = x ? n - h.height / 2 - g : n + h.height + g;
+                                    }
+                                    return i.config.chart.stacked || (c < 0 ? (c = 0 + u) : c + h.height / 3 > i.globals.gridHeight && (c = i.globals.gridHeight - u)), { bcx: r, bcy: n, dataLabelsX: e, dataLabelsY: c };
+                                },
+                            },
+                            {
+                                key: "calculateBarsDataLabelsPosition",
+                                value: function (t) {
+                                    var e = this.w,
+                                        i = t.x,
+                                        a = t.i,
+                                        s = t.j,
+                                        n = t.bcy,
+                                        r = t.barHeight,
+                                        o = t.barWidth,
+                                        l = t.textRects,
+                                        h = t.dataLabelsX,
+                                        c = t.strokeWidth,
+                                        d = t.barDataLabelsConfig,
+                                        u = t.offX,
+                                        f = t.offY,
+                                        g = n - e.globals.gridHeight / e.globals.dataPoints + r / 2 + l.height / 2 + f - 3,
+                                        p = this.series[a][s] <= 0;
+                                    switch ((this.isReversed && (i += o), d.position)) {
+                                        case "center":
+                                            h = p ? i - o / 2 - u : i - o / 2 + u;
+                                            break;
+                                        case "bottom":
+                                            h = p ? i - o - c - Math.round(l.width / 2) - u : i - o + c + Math.round(l.width / 2) + u;
+                                            break;
+                                        case "top":
+                                            h = p ? i - c + Math.round(l.width / 2) - u : i - c - Math.round(l.width / 2) + u;
+                                    }
+                                    return e.config.chart.stacked || (h < 0 ? (h = h + l.width + c) : h + l.width / 2 > e.globals.gridWidth && (h = e.globals.gridWidth - l.width - c)), { bcx: i, bcy: n, dataLabelsX: h, dataLabelsY: g };
+                                },
+                            },
+                            {
+                                key: "drawCalculatedDataLabels",
+                                value: function (t) {
+                                    var e = t.x,
+                                        i = t.y,
+                                        a = t.val,
+                                        s = t.i,
+                                        n = t.j,
+                                        r = t.textRects,
+                                        o = t.barHeight,
+                                        l = t.barWidth,
+                                        h = t.dataLabelsConfig,
+                                        c = this.w,
+                                        d = new z(this.ctx),
+                                        u = new m(this.ctx),
+                                        f = h.formatter,
+                                        g = null,
+                                        p = c.globals.collapsedSeriesIndices.indexOf(s) > -1;
+                                    if (h.enabled && !p) {
+                                        g = u.group({ class: "apexcharts-data-labels" });
+                                        var x = "";
+                                        void 0 !== a && (x = f(a, { seriesIndex: s, dataPointIndex: n, w: c })),
+                                            0 === a && c.config.chart.stacked && (x = ""),
+                                            c.config.chart.stacked &&
+                                                this.barOptions.dataLabels.hideOverflowingLabels &&
+                                                (this.isHorizontal
+                                                    ? ((l = this.series[s][n] / this.yRatio[this.yaxisIndex]), r.width / 1.6 > l && (x = ""))
+                                                    : ((o = this.series[s][n] / this.yRatio[this.yaxisIndex]), r.height / 1.6 > o && (x = ""))),
+                                            d.plotDataLabelsText({ x: e, y: i, text: x, i: s, j: n, parent: g, dataLabelsConfig: h, alwaysDrawDataLabel: !0, offsetCorrection: !0 });
+                                    }
+                                    return g;
+                                },
+                            },
+                            {
+                                key: "barEndingShape",
+                                value: function (t, e, i, a, s) {
+                                    var n = new m(this.ctx);
+                                    if (this.isHorizontal) {
+                                        var r = null,
+                                            o = e.x;
+                                        if (void 0 !== i[a][s] || null !== i[a][s]) {
+                                            var l = i[a][s] < 0,
+                                                h = e.barHeight / 2 - e.strokeWidth;
+                                            switch ((l && (h = -e.barHeight / 2 - e.strokeWidth), t.config.chart.stacked || ("rounded" === this.barOptions.endingShape && (o = e.x - h / 2)), this.barOptions.endingShape)) {
+                                                case "flat":
+                                                    r = n.line(o, e.barYPosition + e.barHeight - e.strokeWidth);
+                                                    break;
+                                                case "rounded":
+                                                    r = n.quadraticCurve(o + h, e.barYPosition + (e.barHeight - e.strokeWidth) / 2, o, e.barYPosition + e.barHeight - e.strokeWidth);
+                                            }
+                                        }
+                                        return { path: r, ending_p_from: "", newX: o };
+                                    }
+                                    var c = null,
+                                        d = e.y;
+                                    if (void 0 !== i[a][s] || null !== i[a][s]) {
+                                        var u = i[a][s] < 0,
+                                            f = e.barWidth / 2 - e.strokeWidth;
+                                        switch ((u && (f = -e.barWidth / 2 - e.strokeWidth), t.config.chart.stacked || ("rounded" === this.barOptions.endingShape && (d += f / 2)), this.barOptions.endingShape)) {
+                                            case "flat":
+                                                c = n.line(e.barXPosition + e.barWidth - e.strokeWidth, d);
+                                                break;
+                                            case "rounded":
+                                                c = n.quadraticCurve(e.barXPosition + (e.barWidth - e.strokeWidth) / 2, d - f, e.barXPosition + e.barWidth - e.strokeWidth, d);
+                                        }
+                                    }
+                                    return { path: c, ending_p_from: "", newY: d };
+                                },
+                            },
+                        ]),
+                        t
+                    );
+                })(),
+                X = (function (t) {
+                    function e() {
+                        return n(this, e), f(this, d(e).apply(this, arguments));
+                    }
+                    return (
+                        c(e, I),
+                        o(e, [
+                            {
+                                key: "draw",
+                                value: function (t, e) {
+                                    var i = this.w;
+                                    (this.graphics = new m(this.ctx)), (this.fill = new P(this.ctx)), (this.bar = new I(this.ctx, this.xyRatios));
+                                    var a = new A(this.ctx, i);
+                                    (t = a.getLogSeries(t)),
+                                        (this.yRatio = a.getLogYRatios(this.yRatio)),
+                                        this.initVariables(t),
+                                        "100%" === i.config.chart.stackType && (t = i.globals.seriesPercent.slice()),
+                                        (this.series = t),
+                                        (this.totalItems = 0),
+                                        (this.prevY = []),
+                                        (this.prevX = []),
+                                        (this.prevYF = []),
+                                        (this.prevXF = []),
+                                        (this.prevYVal = []),
+                                        (this.prevXVal = []),
+                                        (this.xArrj = []),
+                                        (this.xArrjF = []),
+                                        (this.xArrjVal = []),
+                                        (this.yArrj = []),
+                                        (this.yArrjF = []),
+                                        (this.yArrjVal = []);
+                                    for (var s = 0; s < t.length; s++) t[s].length > 0 && (this.totalItems += t[s].length);
+                                    for (var n = this.graphics.group({ class: "apexcharts-bar-series apexcharts-plot-series" }), r = 0, o = 0, l = 0, h = 0; l < t.length; l++, h++) {
+                                        var c = void 0,
+                                            d = void 0,
+                                            u = void 0,
+                                            f = void 0,
+                                            g = void 0,
+                                            x = void 0,
+                                            v = [],
+                                            b = [],
+                                            y = i.globals.comboCharts ? e[l] : l;
+                                        this.yRatio.length > 1 && (this.yaxisIndex = y), (this.isReversed = i.config.yaxis[this.yaxisIndex] && i.config.yaxis[this.yaxisIndex].reversed);
+                                        var w = this.graphics.group({ class: "apexcharts-series", seriesName: p.escapeString(i.globals.seriesNames[y]), rel: l + 1, "data:realIndex": y }),
+                                            k = this.graphics.group({ class: "apexcharts-datalabels" }),
+                                            S = 0,
+                                            C = 0,
+                                            L = 0,
+                                            E = this.initialPositions(r, o, u, f, g, x);
+                                        (o = E.y),
+                                            (C = E.barHeight),
+                                            (f = E.yDivision),
+                                            (x = E.zeroW),
+                                            (r = E.x),
+                                            (L = E.barWidth),
+                                            (u = E.xDivision),
+                                            (g = E.zeroH),
+                                            (this.yArrj = []),
+                                            (this.yArrjF = []),
+                                            (this.yArrjVal = []),
+                                            (this.xArrj = []),
+                                            (this.xArrjF = []),
+                                            (this.xArrjVal = []);
+                                        for (var T = 0; T < i.globals.dataPoints; T++) {
+                                            i.config.stroke.show && (S = this.isNullValue ? 0 : Array.isArray(this.strokeWidth) ? this.strokeWidth[y] : this.strokeWidth);
+                                            var M = null;
+                                            this.isHorizontal
+                                                ? ((M = this.drawBarPaths({ indexes: { i: l, j: T, realIndex: y, bc: h }, barHeight: C, strokeWidth: S, pathTo: c, pathFrom: d, zeroW: x, x: r, y: o, yDivision: f, elSeries: w })),
+                                                  (L = this.series[l][T] / this.invertedYRatio))
+                                                : ((M = this.drawColumnPaths({ indexes: { i: l, j: T, realIndex: y, bc: h }, x: r, y: o, xDivision: u, pathTo: c, pathFrom: d, barWidth: L, zeroH: g, strokeWidth: S, elSeries: w })),
+                                                  (C = this.series[l][T] / this.yRatio[this.yaxisIndex])),
+                                                (c = M.pathTo),
+                                                (d = M.pathFrom),
+                                                (o = M.y),
+                                                (r = M.x),
+                                                v.push(r),
+                                                b.push(o);
+                                            var z = this.bar.getPathFillColor(t, l, T, y);
+                                            w = this.renderSeries({
+                                                realIndex: y,
+                                                pathFill: z,
+                                                j: T,
+                                                i: l,
+                                                pathFrom: d,
+                                                pathTo: c,
+                                                strokeWidth: S,
+                                                elSeries: w,
+                                                x: r,
+                                                y: o,
+                                                series: t,
+                                                barHeight: C,
+                                                barWidth: L,
+                                                elDataLabelsWrap: k,
+                                                type: "bar",
+                                                visibleSeries: 0,
+                                            });
+                                        }
+                                        (i.globals.seriesXvalues[y] = v),
+                                            (i.globals.seriesYvalues[y] = b),
+                                            this.prevY.push(this.yArrj),
+                                            this.prevYF.push(this.yArrjF),
+                                            this.prevYVal.push(this.yArrjVal),
+                                            this.prevX.push(this.xArrj),
+                                            this.prevXF.push(this.xArrjF),
+                                            this.prevXVal.push(this.xArrjVal),
+                                            n.add(w);
+                                    }
+                                    return n;
+                                },
+                            },
+                            {
+                                key: "initialPositions",
+                                value: function (t, e, i, a, s, n) {
+                                    var r,
+                                        o,
+                                        l = this.w;
+                                    return (
+                                        this.isHorizontal
+                                            ? ((r = ((r = a = l.globals.gridHeight / l.globals.dataPoints) * parseInt(l.config.plotOptions.bar.barHeight)) / 100),
+                                              (n = this.baseLineInvertedY + l.globals.padHorizontal + (this.isReversed ? l.globals.gridWidth : 0) - (this.isReversed ? 2 * this.baseLineInvertedY : 0)),
+                                              (e = (a - r) / 2))
+                                            : ((o = i = l.globals.gridWidth / l.globals.dataPoints),
+                                              (o = l.globals.isXNumeric ? ((i = l.globals.minXDiff / this.xRatio) * parseInt(this.barOptions.columnWidth)) / 100 : (o * parseInt(l.config.plotOptions.bar.columnWidth)) / 100),
+                                              (s = this.baseLineY[this.yaxisIndex] + (this.isReversed ? l.globals.gridHeight : 0) - (this.isReversed ? 2 * this.baseLineY[this.yaxisIndex] : 0)),
+                                              (t = l.globals.padHorizontal + (i - o) / 2)),
+                                        { x: t, y: e, yDivision: a, xDivision: i, barHeight: r, barWidth: o, zeroH: s, zeroW: n }
+                                    );
+                                },
+                            },
+                            {
+                                key: "drawBarPaths",
+                                value: function (t) {
+                                    for (
+                                        var e,
+                                            i = t.indexes,
+                                            a = t.barHeight,
+                                            s = t.strokeWidth,
+                                            n = t.pathTo,
+                                            r = t.pathFrom,
+                                            o = t.zeroW,
+                                            l = t.x,
+                                            h = t.y,
+                                            c = t.yDivision,
+                                            d = t.elSeries,
+                                            u = this.w,
+                                            f = h,
+                                            g = i.i,
+                                            p = i.j,
+                                            x = i.realIndex,
+                                            v = i.bc,
+                                            m = 0,
+                                            b = 0;
+                                        b < this.prevXF.length;
+                                        b++
+                                    )
+                                        m += this.prevXF[b][p];
+                                    if (g > 0) {
+                                        var y = o;
+                                        this.prevXVal[g - 1][p] < 0
+                                            ? (y = this.series[g][p] >= 0 ? this.prevX[g - 1][p] + m - 2 * (this.isReversed ? m : 0) : this.prevX[g - 1][p])
+                                            : this.prevXVal[g - 1][p] >= 0 && (y = this.series[g][p] >= 0 ? this.prevX[g - 1][p] : this.prevX[g - 1][p] - m + 2 * (this.isReversed ? m : 0)),
+                                            (e = y);
+                                    } else e = o;
+                                    l = null === this.series[g][p] ? e : e + this.series[g][p] / this.invertedYRatio - 2 * (this.isReversed ? this.series[g][p] / this.invertedYRatio : 0);
+                                    var w = { barHeight: a, strokeWidth: s, invertedYRatio: this.invertedYRatio, barYPosition: f, x: l },
+                                        k = this.bar.barEndingShape(u, w, this.series, g, p);
+                                    if (
+                                        (this.series.length > 1 && g !== this.endingShapeOnSeriesNumber && (k.path = this.graphics.line(k.newX, f + a - s)),
+                                        this.xArrj.push(k.newX),
+                                        this.xArrjF.push(Math.abs(e - k.newX)),
+                                        this.xArrjVal.push(this.series[g][p]),
+                                        (n = this.graphics.move(e, f)),
+                                        (r = this.graphics.move(e, f)),
+                                        u.globals.previousPaths.length > 0 && (r = this.bar.getPathFrom(x, p, !1)),
+                                        (n = n + this.graphics.line(k.newX, f) + k.path + this.graphics.line(e, f + a - s) + this.graphics.line(e, f)),
+                                        (r = r + this.graphics.line(e, f) + this.graphics.line(e, f + a - s) + this.graphics.line(e, f + a - s) + this.graphics.line(e, f + a - s) + this.graphics.line(e, f)),
+                                        u.config.plotOptions.bar.colors.backgroundBarColors.length > 0 && 0 === g)
+                                    ) {
+                                        v >= u.config.plotOptions.bar.colors.backgroundBarColors.length && (v = 0);
+                                        var S = u.config.plotOptions.bar.colors.backgroundBarColors[v],
+                                            A = this.graphics.drawRect(0, f, u.globals.gridWidth, a, 0, S, u.config.plotOptions.bar.colors.backgroundBarOpacity);
+                                        d.add(A), A.node.classList.add("apexcharts-backgroundBar");
+                                    }
+                                    return { pathTo: n, pathFrom: r, x: l, y: (h += c) };
+                                },
+                            },
+                            {
+                                key: "drawColumnPaths",
+                                value: function (t) {
+                                    var e = t.indexes,
+                                        i = t.x,
+                                        a = t.y,
+                                        s = t.xDivision,
+                                        n = t.pathTo,
+                                        r = t.pathFrom,
+                                        o = t.barWidth,
+                                        l = t.zeroH,
+                                        h = t.strokeWidth,
+                                        c = t.elSeries,
+                                        d = this.w,
+                                        u = e.i,
+                                        f = e.j,
+                                        g = e.realIndex,
+                                        p = e.bc;
+                                    if (d.globals.isXNumeric) {
+                                        var x = d.globals.seriesX[u][f];
+                                        x || (x = 0), (i = (x - d.globals.minX) / this.xRatio - o / 2);
+                                    }
+                                    for (var v, m = i, b = 0, y = 0; y < this.prevYF.length; y++) b += this.prevYF[y][f];
+                                    if ((u > 0 && !d.globals.isXNumeric) || (u > 0 && d.globals.isXNumeric && d.globals.seriesX[u - 1][f] === d.globals.seriesX[u][f])) {
+                                        var w = this.prevY[u - 1][f];
+                                        v = this.prevYVal[u - 1][f] < 0 ? (this.series[u][f] >= 0 ? w - b + 2 * (this.isReversed ? b : 0) : w) : this.series[u][f] >= 0 ? w : w + b - 2 * (this.isReversed ? b : 0);
+                                    } else v = d.globals.gridHeight - l;
+                                    a = v - this.series[u][f] / this.yRatio[this.yaxisIndex] + 2 * (this.isReversed ? this.series[u][f] / this.yRatio[this.yaxisIndex] : 0);
+                                    var k = { barWidth: o, strokeWidth: h, yRatio: this.yRatio[this.yaxisIndex], barXPosition: m, y: a },
+                                        S = this.bar.barEndingShape(d, k, this.series, u, f);
+                                    if (
+                                        (this.yArrj.push(S.newY),
+                                        this.yArrjF.push(Math.abs(v - S.newY)),
+                                        this.yArrjVal.push(this.series[u][f]),
+                                        (n = this.graphics.move(m, v)),
+                                        (r = this.graphics.move(m, v)),
+                                        d.globals.previousPaths.length > 0 && (r = this.bar.getPathFrom(g, f, !1)),
+                                        (n = n + this.graphics.line(m, S.newY) + S.path + this.graphics.line(m + o - h, v) + this.graphics.line(m - h / 2, v)),
+                                        (r = r + this.graphics.line(m, v) + this.graphics.line(m + o - h, v) + this.graphics.line(m + o - h, v) + this.graphics.line(m + o - h, v) + this.graphics.line(m - h / 2, v)),
+                                        d.config.plotOptions.bar.colors.backgroundBarColors.length > 0 && 0 === u)
+                                    ) {
+                                        p >= d.config.plotOptions.bar.colors.backgroundBarColors.length && (p = 0);
+                                        var A = d.config.plotOptions.bar.colors.backgroundBarColors[p],
+                                            C = this.graphics.drawRect(m, 0, o, d.globals.gridHeight, 0, A, d.config.plotOptions.bar.colors.backgroundBarOpacity);
+                                        c.add(C), C.node.classList.add("apexcharts-backgroundBar");
+                                    }
+                                    return (i += s), { pathTo: n, pathFrom: r, x: d.globals.isXNumeric ? i - s : i, y: a };
+                                },
+                            },
+                            {
+                                key: "checkZeroSeries",
+                                value: function (t) {
+                                    for (var e = t.series, i = this.w, a = 0; a < e.length; a++) {
+                                        for (var s = 0, n = 0; n < e[i.globals.maxValsInArrayIndex].length; n++) s += e[a][n];
+                                        0 === s && this.zeroSerieses.push(a);
+                                    }
+                                    for (var r = e.length - 1; r >= 0; r--) this.zeroSerieses.indexOf(r) > -1 && r === this.endingShapeOnSeriesNumber && (this.endingShapeOnSeriesNumber -= 1);
+                                },
+                            },
+                        ]),
+                        e
+                    );
+                })(),
+                F = (function (t) {
+                    function e() {
+                        return n(this, e), f(this, d(e).apply(this, arguments));
+                    }
+                    return (
+                        c(e, I),
+                        o(e, [
+                            {
+                                key: "draw",
+                                value: function (t, e) {
+                                    var i = this.w,
+                                        a = new m(this.ctx),
+                                        s = new P(this.ctx);
+                                    this.candlestickOptions = this.w.config.plotOptions.candlestick;
+                                    var n = new A(this.ctx, i);
+                                    (t = n.getLogSeries(t)), (this.series = t), (this.yRatio = n.getLogYRatios(this.yRatio)), this.initVariables(t);
+                                    for (var r = a.group({ class: "apexcharts-candlestick-series apexcharts-plot-series" }), o = 0, l = 0; o < t.length; o++, l++) {
+                                        var h,
+                                            c,
+                                            d = void 0,
+                                            u = void 0,
+                                            f = void 0,
+                                            g = void 0,
+                                            x = [],
+                                            v = [],
+                                            b = i.globals.comboCharts ? e[o] : o,
+                                            y = a.group({ class: "apexcharts-series", seriesName: p.escapeString(i.globals.seriesNames[b]), rel: o + 1, "data:realIndex": b });
+                                        t[o].length > 0 && (this.visibleI = this.visibleI + 1);
+                                        var w,
+                                            k,
+                                            S = 0;
+                                        this.yRatio.length > 1 && (this.yaxisIndex = b);
+                                        var C = this.initialPositions();
+                                        (g = C.y), (w = C.barHeight), (f = C.x), (k = C.barWidth), (h = C.xDivision), (c = C.zeroH), v.push(f + k / 2);
+                                        for (var L = a.group({ class: "apexcharts-datalabels" }), E = 0, T = i.globals.dataPoints; E < i.globals.dataPoints; E++, T--) {
+                                            void 0 === this.series[o][E] || null === t[o][E] ? (this.isNullValue = !0) : (this.isNullValue = !1),
+                                                i.config.stroke.show && (S = this.isNullValue ? 0 : Array.isArray(this.strokeWidth) ? this.strokeWidth[b] : this.strokeWidth);
+                                            var M,
+                                                z = this.drawCandleStickPaths({ indexes: { i: o, j: E, realIndex: b, bc: l }, x: f, y: g, xDivision: h, pathTo: d, pathFrom: u, barWidth: k, zeroH: c, strokeWidth: S, elSeries: y });
+                                            (d = z.pathTo), (u = z.pathFrom), (g = z.y), (f = z.x), (M = z.color), E > 0 && v.push(f + k / 2), x.push(g);
+                                            var I = s.fillPath({ seriesNumber: b, color: M, value: t[o][E] }),
+                                                X = this.candlestickOptions.wick.useFillColor ? M : void 0;
+                                            y = this.renderSeries({
+                                                realIndex: b,
+                                                pathFill: I,
+                                                lineFill: X,
+                                                j: E,
+                                                i: o,
+                                                pathFrom: u,
+                                                pathTo: d,
+                                                strokeWidth: S,
+                                                elSeries: y,
+                                                x: f,
+                                                y: g,
+                                                series: t,
+                                                barHeight: w,
+                                                barWidth: k,
+                                                elDataLabelsWrap: L,
+                                                visibleSeries: this.visibleI,
+                                                type: "candlestick",
+                                            });
+                                        }
+                                        (i.globals.seriesXvalues[b] = v), (i.globals.seriesYvalues[b] = x), r.add(y);
+                                    }
+                                    return r;
+                                },
+                            },
+                            {
+                                key: "drawCandleStickPaths",
+                                value: function (t) {
+                                    var e = t.indexes,
+                                        i = t.x,
+                                        a = (t.y, t.xDivision),
+                                        s = t.pathTo,
+                                        n = t.pathFrom,
+                                        r = t.barWidth,
+                                        o = t.zeroH,
+                                        l = t.strokeWidth,
+                                        h = this.w,
+                                        c = new m(this.ctx),
+                                        d = e.i,
+                                        u = e.j,
+                                        f = !0,
+                                        g = h.config.plotOptions.candlestick.colors.upward,
+                                        p = h.config.plotOptions.candlestick.colors.downward,
+                                        x = this.yRatio[this.yaxisIndex],
+                                        v = e.realIndex,
+                                        b = this.getOHLCValue(v, u),
+                                        y = o,
+                                        w = o;
+                                    b.o > b.c && (f = !1);
+                                    var k = Math.min(b.o, b.c),
+                                        S = Math.max(b.o, b.c);
+                                    h.globals.isXNumeric && (i = (h.globals.seriesX[d][u] - h.globals.minX) / this.xRatio - r / 2);
+                                    var A = i + r * this.visibleI;
+                                    return (
+                                        void 0 === this.series[d][u] || null === this.series[d][u] ? (k = o) : ((k = o - k / x), (S = o - S / x), (y = o - b.h / x), (w = o - b.l / x)),
+                                        c.move(A, o),
+                                        (n = c.move(A, k)),
+                                        h.globals.previousPaths.length > 0 && (n = this.getPathFrom(v, u, !0)),
+                                        (s =
+                                            c.move(A, S) +
+                                            c.line(A + r / 2, S) +
+                                            c.line(A + r / 2, y) +
+                                            c.line(A + r / 2, S) +
+                                            c.line(A + r, S) +
+                                            c.line(A + r, k) +
+                                            c.line(A + r / 2, k) +
+                                            c.line(A + r / 2, w) +
+                                            c.line(A + r / 2, k) +
+                                            c.line(A, k) +
+                                            c.line(A, S - l / 2)),
+                                        (n += c.move(A, k)),
+                                        h.globals.isXNumeric || (i += a),
+                                        { pathTo: s, pathFrom: n, x: i, y: S, barXPosition: A, color: f ? g : p }
+                                    );
+                                },
+                            },
+                            {
+                                key: "getOHLCValue",
+                                value: function (t, e) {
+                                    var i = this.w;
+                                    return { o: i.globals.seriesCandleO[t][e], h: i.globals.seriesCandleH[t][e], l: i.globals.seriesCandleL[t][e], c: i.globals.seriesCandleC[t][e] };
+                                },
+                            },
+                        ]),
+                        e
+                    );
+                })(),
+                Y = (function () {
+                    function t(e) {
+                        n(this, t), (this.ctx = e), (this.w = e.w);
+                    }
+                    return (
+                        o(t, [
+                            {
+                                key: "drawXCrosshairs",
+                                value: function () {
+                                    var t = this.w,
+                                        e = new m(this.ctx),
+                                        i = new x(this.ctx),
+                                        a = t.config.xaxis.crosshairs.fill.gradient,
+                                        s = t.config.xaxis.crosshairs.dropShadow,
+                                        n = t.config.xaxis.crosshairs.fill.type,
+                                        r = a.colorFrom,
+                                        o = a.colorTo,
+                                        l = a.opacityFrom,
+                                        h = a.opacityTo,
+                                        c = a.stops,
+                                        d = s.enabled,
+                                        u = s.left,
+                                        f = s.top,
+                                        g = s.blur,
+                                        v = s.color,
+                                        b = s.opacity,
+                                        y = t.config.xaxis.crosshairs.fill.color;
+                                    if (t.config.xaxis.crosshairs.show) {
+                                        "gradient" === n && (y = e.drawGradient("vertical", r, o, l, h, null, c, null));
+                                        var w = e.drawRect();
+                                        1 === t.config.xaxis.crosshairs.width && (w = e.drawLine()),
+                                            w.attr({
+                                                class: "apexcharts-xcrosshairs",
+                                                x: 0,
+                                                y: 0,
+                                                y2: t.globals.gridHeight,
+                                                width: p.isNumber(t.config.xaxis.crosshairs.width) ? t.config.xaxis.crosshairs.width : 0,
+                                                height: t.globals.gridHeight,
+                                                fill: y,
+                                                filter: "none",
+                                                "fill-opacity": t.config.xaxis.crosshairs.opacity,
+                                                stroke: t.config.xaxis.crosshairs.stroke.color,
+                                                "stroke-width": t.config.xaxis.crosshairs.stroke.width,
+                                                "stroke-dasharray": t.config.xaxis.crosshairs.stroke.dashArray,
+                                            }),
+                                            d && (w = i.dropShadow(w, { left: u, top: f, blur: g, color: v, opacity: b })),
+                                            t.globals.dom.elGraphical.add(w);
+                                    }
+                                },
+                            },
+                            {
+                                key: "drawYCrosshairs",
+                                value: function () {
+                                    var t = this.w,
+                                        e = new m(this.ctx),
+                                        i = t.config.yaxis[0].crosshairs;
+                                    if (t.config.yaxis[0].crosshairs.show) {
+                                        var a = e.drawLine(0, 0, t.globals.gridWidth, 0, i.stroke.color, i.stroke.dashArray, i.stroke.width);
+                                        a.attr({ class: "apexcharts-ycrosshairs" }), t.globals.dom.elGraphical.add(a);
+                                    }
+                                    var s = e.drawLine(0, 0, t.globals.gridWidth, 0, i.stroke.color, 0, 0);
+                                    s.attr({ class: "apexcharts-ycrosshairs-hidden" }), t.globals.dom.elGraphical.add(s);
+                                },
+                            },
+                        ]),
+                        t
+                    );
+                })(),
+                O = (function () {
+                    function t(e, i) {
+                        n(this, t),
+                            (this.ctx = e),
+                            (this.w = e.w),
+                            (this.xRatio = i.xRatio),
+                            (this.yRatio = i.yRatio),
+                            (this.negRange = !1),
+                            (this.dynamicAnim = this.w.config.chart.animations.dynamicAnimation),
+                            (this.rectRadius = this.w.config.plotOptions.heatmap.radius),
+                            (this.strokeWidth = this.w.config.stroke.width);
+                    }
+                    return (
+                        o(t, [
+                            {
+                                key: "draw",
+                                value: function (t) {
+                                    var e = this.w,
+                                        i = new m(this.ctx),
+                                        a = i.group({ class: "apexcharts-heatmap" });
+                                    a.attr("clip-path", "url(#gridRectMask".concat(e.globals.cuid, ")"));
+                                    var s = e.globals.gridWidth / e.globals.dataPoints,
+                                        n = e.globals.gridHeight / e.globals.series.length,
+                                        r = 0,
+                                        o = !1;
+                                    this.checkColorRange();
+                                    var l = t.slice();
+                                    e.config.yaxis[0].reversed && ((o = !0), l.reverse());
+                                    for (var h = o ? 0 : l.length - 1; o ? h < l.length : h >= 0; o ? h++ : h--) {
+                                        var c = i.group({ class: "apexcharts-series apexcharts-heatmap-series", seriesName: p.escapeString(e.globals.seriesNames[h]), rel: h + 1, "data:realIndex": h });
+                                        if (e.config.chart.dropShadow.enabled) {
+                                            var d = e.config.chart.dropShadow;
+                                            new x(this.ctx).dropShadow(c, d, h);
+                                        }
+                                        for (var u = 0, f = 0; f < l[h].length; f++) {
+                                            var g = 1,
+                                                v = this.determineHeatColor(h, f);
+                                            if (e.globals.hasNegs || this.negRange) {
+                                                var b = e.config.plotOptions.heatmap.shadeIntensity;
+                                                g = e.config.plotOptions.heatmap.reverseNegativeShade
+                                                    ? v.percent < 0
+                                                        ? (v.percent / 100) * (1.25 * b)
+                                                        : (1 - v.percent / 100) * (1.25 * b)
+                                                    : v.percent < 0
+                                                    ? 1 - (1 + v.percent / 100) * b
+                                                    : (1 - v.percent / 100) * b;
+                                            } else g = 1 - v.percent / 100;
+                                            var y = v.color;
+                                            if (e.config.plotOptions.heatmap.enableShades) {
+                                                var w = new p();
+                                                y = p.hexToRgba(w.shadeColor(g, v.color), e.config.fill.opacity);
+                                            }
+                                            var k = this.rectRadius,
+                                                S = i.drawRect(u, r, s, n, k);
+                                            if (
+                                                (S.attr({ cx: u, cy: r }),
+                                                S.node.classList.add("apexcharts-heatmap-rect"),
+                                                c.add(S),
+                                                S.attr({ fill: y, i: h, index: h, j: f, val: l[h][f], "stroke-width": this.strokeWidth, stroke: e.globals.stroke.colors[0], color: y }),
+                                                S.node.addEventListener("mouseenter", i.pathMouseEnter.bind(this, S)),
+                                                S.node.addEventListener("mouseleave", i.pathMouseLeave.bind(this, S)),
+                                                S.node.addEventListener("mousedown", i.pathMouseDown.bind(this, S)),
+                                                e.config.chart.animations.enabled && !e.globals.dataChanged)
+                                            ) {
+                                                var A = 1;
+                                                e.globals.resized || (A = e.config.chart.animations.speed), this.animateHeatMap(S, u, r, s, n, A);
+                                            }
+                                            if (e.globals.dataChanged) {
+                                                var C = 1;
+                                                if (this.dynamicAnim.enabled && e.globals.shouldAnimate) {
+                                                    C = this.dynamicAnim.speed;
+                                                    var L = e.globals.previousPaths[h] && e.globals.previousPaths[h][f] && e.globals.previousPaths[h][f].color;
+                                                    L || (L = "rgba(255, 255, 255, 0)"), this.animateHeatColor(S, p.isColorHex(L) ? L : p.rgb2hex(L), p.isColorHex(y) ? y : p.rgb2hex(y), C);
+                                                }
+                                            }
+                                            var E = this.calculateHeatmapDataLabels({ x: u, y: r, i: h, j: f, series: l, rectHeight: n, rectWidth: s });
+                                            null !== E && c.add(E), (u += s);
+                                        }
+                                        (r += n), a.add(c);
+                                    }
+                                    var P = e.globals.yAxisScale[0].result.slice();
+                                    e.config.yaxis[0].reversed ? P.unshift("") : P.push(""), (e.globals.yAxisScale[0].result = P);
+                                    var T = e.globals.gridHeight / e.globals.series.length;
+                                    return (e.config.yaxis[0].labels.offsetY = -T / 2), a;
+                                },
+                            },
+                            {
+                                key: "checkColorRange",
+                                value: function () {
+                                    var t = this,
+                                        e = this.w.config.plotOptions.heatmap;
+                                    e.colorScale.ranges.length > 0 &&
+                                        e.colorScale.ranges.map(function (e, i) {
+                                            e.from < 0 && (t.negRange = !0);
+                                        });
+                                },
+                            },
+                            {
+                                key: "determineHeatColor",
+                                value: function (t, e) {
+                                    var i = this.w,
+                                        a = i.globals.series[t][e],
+                                        s = i.config.plotOptions.heatmap,
+                                        n = s.colorScale.inverse ? e : t,
+                                        r = i.globals.colors[n],
+                                        o = Math.min.apply(Math, g(i.globals.series[t])),
+                                        l = Math.max.apply(Math, g(i.globals.series[t]));
+                                    s.distributed || ((o = i.globals.minY), (l = i.globals.maxY)),
+                                        void 0 !== s.colorScale.min && ((o = s.colorScale.min < i.globals.minY ? s.colorScale.min : i.globals.minY), (l = s.colorScale.max > i.globals.maxY ? s.colorScale.max : i.globals.maxY));
+                                    var h = Math.abs(l) + Math.abs(o),
+                                        c = (100 * a) / (0 === h ? h - 1e-6 : h);
+                                    s.colorScale.ranges.length > 0 &&
+                                        s.colorScale.ranges.map(function (t, e) {
+                                            if (a >= t.from && a <= t.to) {
+                                                (r = t.color), (o = t.from), (l = t.to);
+                                                var i = Math.abs(l) + Math.abs(o);
+                                                c = (100 * a) / (0 === i ? i - 1e-6 : i);
+                                            }
+                                        });
+                                    return { color: r, percent: c };
+                                },
+                            },
+                            {
+                                key: "calculateHeatmapDataLabels",
+                                value: function (t) {
+                                    var e = t.x,
+                                        i = t.y,
+                                        a = t.i,
+                                        s = t.j,
+                                        n = (t.series, t.rectHeight),
+                                        r = t.rectWidth,
+                                        o = this.w,
+                                        l = o.config.dataLabels,
+                                        h = new m(this.ctx),
+                                        c = new z(this.ctx),
+                                        d = l.formatter,
+                                        u = null;
+                                    if (l.enabled) {
+                                        u = h.group({ class: "apexcharts-data-labels" });
+                                        var f = l.offsetX,
+                                            g = l.offsetY,
+                                            p = e + r / 2 + f,
+                                            x = i + n / 2 + parseInt(l.style.fontSize) / 3 + g,
+                                            v = d(o.globals.series[a][s], { seriesIndex: a, dataPointIndex: s, w: o });
+                                        c.plotDataLabelsText({ x: p, y: x, text: v, i: a, j: s, parent: u, dataLabelsConfig: l });
+                                    }
+                                    return u;
+                                },
+                            },
+                            {
+                                key: "animateHeatMap",
+                                value: function (t, e, i, a, s, n) {
+                                    var r = this;
+                                    new v(this.ctx).animateRect(t, { x: e + a / 2, y: i + s / 2, width: 0, height: 0 }, { x: e, y: i, width: a, height: s }, n, function () {
+                                        r.w.globals.animationEnded = !0;
+                                    });
+                                },
+                            },
+                            {
+                                key: "animateHeatColor",
+                                value: function (t, e, i, a) {
+                                    t.attr({ fill: e }).animate(a).attr({ fill: i });
+                                },
+                            },
+                        ]),
+                        t
+                    );
+                })(),
+                R = (function () {
+                    function t(e) {
+                        n(this, t),
+                            (this.ctx = e),
+                            (this.w = e.w),
+                            (this.chartType = this.w.config.chart.type),
+                            (this.initialAnim = this.w.config.chart.animations.enabled),
+                            (this.dynamicAnim = this.initialAnim && this.w.config.chart.animations.dynamicAnimation.enabled),
+                            (this.animBeginArr = [0]),
+                            (this.animDur = 0),
+                            (this.donutDataLabels = this.w.config.plotOptions.pie.donut.labels);
+                        var i = this.w;
+                        (this.lineColorArr = void 0 !== i.globals.stroke.colors ? i.globals.stroke.colors : i.globals.colors),
+                            (this.defaultSize = i.globals.svgHeight < i.globals.svgWidth ? i.globals.svgHeight - 35 : i.globals.gridWidth),
+                            (this.centerY = this.defaultSize / 2),
+                            (this.centerX = i.globals.gridWidth / 2),
+                            (this.fullAngle = 360),
+                            (this.donutSize = 0),
+                            (this.sliceLabels = []),
+                            (this.prevSectorAngleArr = []);
+                    }
+                    return (
+                        o(t, [
+                            {
+                                key: "draw",
+                                value: function (t) {
+                                    var e = this.w,
+                                        i = new m(this.ctx),
+                                        a = i.group({ class: "apexcharts-pie" });
+                                    if (e.globals.noData) return a;
+                                    for (var s = 0, n = 0; n < t.length; n++) s += p.negToZero(t[n]);
+                                    var r = [],
+                                        o = i.group();
+                                    0 === s && (s = 1e-5);
+                                    for (var l = 0; l < t.length; l++) {
+                                        var h = (this.fullAngle * p.negToZero(t[l])) / s;
+                                        r.push(h);
+                                    }
+                                    if (e.globals.dataChanged) {
+                                        for (var c, d = 0, u = 0; u < e.globals.previousPaths.length; u++) d += p.negToZero(e.globals.previousPaths[u]);
+                                        for (var f = 0; f < e.globals.previousPaths.length; f++) (c = (this.fullAngle * p.negToZero(e.globals.previousPaths[f])) / d), this.prevSectorAngleArr.push(c);
+                                    }
+                                    (e.globals.radialSize = this.defaultSize / 2.05 - e.config.stroke.width - e.config.chart.dropShadow.blur),
+                                        void 0 !== e.config.plotOptions.pie.size && (e.globals.radialSize = e.config.plotOptions.pie.size),
+                                        (this.donutSize = (e.globals.radialSize * parseInt(e.config.plotOptions.pie.donut.size)) / 100),
+                                        this.donutSize < 0 && (this.donutSize = 0);
+                                    var g = e.config.plotOptions.pie.customScale,
+                                        x = e.globals.gridWidth / 2,
+                                        v = e.globals.gridHeight / 2,
+                                        b = x - (e.globals.gridWidth / 2) * g,
+                                        y = v - (e.globals.gridHeight / 2) * g;
+                                    if (this.donutDataLabels.show) {
+                                        var w = this.renderInnerDataLabels(this.donutDataLabels, {
+                                            hollowSize: this.donutSize,
+                                            centerX: this.centerX,
+                                            centerY: this.centerY,
+                                            opacity: this.donutDataLabels.show,
+                                            translateX: b,
+                                            translateY: y,
+                                        });
+                                        a.add(w);
+                                    }
+                                    if ("donut" === e.config.chart.type) {
+                                        var k = i.drawCircle(this.donutSize);
+                                        k.attr({ cx: this.centerX, cy: this.centerY, fill: e.config.plotOptions.pie.donut.background }), o.add(k);
+                                    }
+                                    var S = this.drawArcs(r, t);
+                                    return (
+                                        this.sliceLabels.forEach(function (t) {
+                                            S.add(t);
+                                        }),
+                                        o.attr({
+                                            transform: "translate("
+                                                .concat(b, ", ")
+                                                .concat(y - 5, ") scale(")
+                                                .concat(g, ")"),
+                                        }),
+                                        a.attr({ "data:innerTranslateX": b, "data:innerTranslateY": y - 25 }),
+                                        o.add(S),
+                                        a.add(o),
+                                        a
+                                    );
+                                },
+                            },
+                            {
+                                key: "drawArcs",
+                                value: function (t, e) {
+                                    var i = this.w,
+                                        a = new x(this.ctx),
+                                        s = new m(this.ctx),
+                                        n = new P(this.ctx),
+                                        r = s.group({ class: "apexcharts-slices" }),
+                                        o = 0,
+                                        l = 0,
+                                        h = 0,
+                                        c = 0;
+                                    this.strokeWidth = i.config.stroke.show ? i.config.stroke.width : 0;
+                                    for (var d = 0; d < t.length; d++) {
+                                        var u = s.group({ class: "apexcharts-series apexcharts-pie-series", seriesName: p.escapeString(i.globals.seriesNames[d]), id: "apexcharts-series-" + d, rel: d + 1, "data:realIndex": d });
+                                        r.add(u), (l = c), (h = (o = h) + t[d]), (c = l + this.prevSectorAngleArr[d]);
+                                        var f = h - o,
+                                            g = n.fillPath({ seriesNumber: d, size: i.globals.radialSize, value: e[d] }),
+                                            v = this.getChangedPath(l, c),
+                                            b = s.drawPath({
+                                                d: v,
+                                                stroke: this.lineColorArr instanceof Array ? this.lineColorArr[d] : this.lineColorArr,
+                                                strokeWidth: this.strokeWidth,
+                                                fill: g,
+                                                fillOpacity: i.config.fill.opacity,
+                                                classes: "apexcharts-pie-area",
+                                            });
+                                        if ((b.attr({ id: "apexcharts-".concat(i.config.chart.type, "-slice-").concat(d), index: 0, j: d }), i.config.chart.dropShadow.enabled)) {
+                                            var y = i.config.chart.dropShadow;
+                                            a.dropShadow(b, y, d);
+                                        }
+                                        this.addListeners(b, this.donutDataLabels), m.setAttrs(b.node, { "data:angle": f, "data:startAngle": o, "data:strokeWidth": this.strokeWidth, "data:value": e[d] });
+                                        var w = { x: 0, y: 0 };
+                                        "pie" === i.config.chart.type
+                                            ? (w = p.polarToCartesian(this.centerX, this.centerY, i.globals.radialSize / 1.25 + i.config.plotOptions.pie.dataLabels.offset, o + (h - o) / 2))
+                                            : "donut" === i.config.chart.type &&
+                                              (w = p.polarToCartesian(this.centerX, this.centerY, (i.globals.radialSize + this.donutSize) / 2 + i.config.plotOptions.pie.dataLabels.offset, o + (h - o) / 2)),
+                                            u.add(b);
+                                        var k = 0;
+                                        if (
+                                            (!this.initialAnim || i.globals.resized || i.globals.dataChanged
+                                                ? this.animBeginArr.push(0)
+                                                : ((k = ((h - o) / this.fullAngle) * i.config.chart.animations.speed), (this.animDur = k + this.animDur), this.animBeginArr.push(this.animDur)),
+                                            this.dynamicAnim && i.globals.dataChanged
+                                                ? this.animatePaths(b, {
+                                                      size: i.globals.radialSize,
+                                                      endAngle: h,
+                                                      startAngle: o,
+                                                      prevStartAngle: l,
+                                                      prevEndAngle: c,
+                                                      animateStartingPos: !0,
+                                                      i: d,
+                                                      animBeginArr: this.animBeginArr,
+                                                      dur: i.config.chart.animations.dynamicAnimation.speed,
+                                                  })
+                                                : this.animatePaths(b, { size: i.globals.radialSize, endAngle: h, startAngle: o, i: d, totalItems: t.length - 1, animBeginArr: this.animBeginArr, dur: k }),
+                                            i.config.plotOptions.pie.expandOnClick && b.click(this.pieClicked.bind(this, d)),
+                                            i.config.dataLabels.enabled)
+                                        ) {
+                                            var S = w.x,
+                                                A = w.y,
+                                                C = (100 * (h - o)) / 360 + "%";
+                                            if (0 !== f && i.config.plotOptions.pie.dataLabels.minAngleToShowLabel < t[d]) {
+                                                var L = i.config.dataLabels.formatter;
+                                                void 0 !== L && (C = L(i.globals.seriesPercent[d][0], { seriesIndex: d, w: i }));
+                                                var E = i.globals.dataLabels.style.colors[d],
+                                                    T = s.drawText({ x: S, y: A, text: C, textAnchor: "middle", fontSize: i.config.dataLabels.style.fontSize, fontFamily: i.config.dataLabels.style.fontFamily, foreColor: E });
+                                                if (i.config.dataLabels.dropShadow.enabled) {
+                                                    var M = i.config.dataLabels.dropShadow;
+                                                    new x(this.ctx).dropShadow(T, M);
+                                                }
+                                                T.node.classList.add("apexcharts-pie-label"),
+                                                    i.config.chart.animations.animate &&
+                                                        !1 === i.globals.resized &&
+                                                        (T.node.classList.add("apexcharts-pie-label-delay"), (T.node.style.animationDelay = i.config.chart.animations.speed / 940 + "s")),
+                                                    this.sliceLabels.push(T);
+                                            }
+                                        }
+                                    }
+                                    return r;
+                                },
+                            },
+                            {
+                                key: "addListeners",
+                                value: function (t, e) {
+                                    var i = new m(this.ctx);
+                                    t.node.addEventListener("mouseenter", i.pathMouseEnter.bind(this, t)),
+                                        t.node.addEventListener("mouseenter", this.printDataLabelsInner.bind(this, t.node, e)),
+                                        t.node.addEventListener("mouseleave", i.pathMouseLeave.bind(this, t)),
+                                        t.node.addEventListener("mouseleave", this.revertDataLabelsInner.bind(this, t.node, e)),
+                                        t.node.addEventListener("mousedown", i.pathMouseDown.bind(this, t)),
+                                        t.node.addEventListener("mousedown", this.printDataLabelsInner.bind(this, t.node, e));
+                                },
+                            },
+                            {
+                                key: "animatePaths",
+                                value: function (t, e) {
+                                    var i = this.w,
+                                        a = e.endAngle - e.startAngle,
+                                        s = a,
+                                        n = e.startAngle,
+                                        r = e.startAngle;
+                                    void 0 !== e.prevStartAngle && void 0 !== e.prevEndAngle && ((n = e.prevEndAngle), (s = e.prevEndAngle - e.prevStartAngle)),
+                                        e.i === i.config.series.length - 1 && (a + r > this.fullAngle ? (e.endAngle = e.endAngle - (a + r)) : a + r < this.fullAngle && (e.endAngle = e.endAngle + (this.fullAngle - (a + r)))),
+                                        a === this.fullAngle && (a = this.fullAngle - 0.01),
+                                        this.animateArc(t, n, r, a, s, e);
+                                },
+                            },
+                            {
+                                key: "animateArc",
+                                value: function (t, e, i, a, s, n) {
+                                    var r,
+                                        o = this,
+                                        l = this.w,
+                                        h = n.size;
+                                    (isNaN(e) || isNaN(s)) && ((e = i), (s = a), (n.dur = 0));
+                                    var c = a,
+                                        d = i,
+                                        u = e - i;
+                                    l.globals.dataChanged && n.shouldSetPrevPaths && ((r = o.getPiePath({ me: o, startAngle: d, angle: s, size: h })), t.attr({ d: r })),
+                                        0 !== n.dur
+                                            ? t
+                                                  .animate(n.dur, l.globals.easing, n.animBeginArr[n.i])
+                                                  .afterAll(function () {
+                                                      ("pie" !== l.config.chart.type && "donut" !== l.config.chart.type) || this.animate(300).attr({ "stroke-width": l.config.stroke.width }), (l.globals.animationEnded = !0);
+                                                  })
+                                                  .during(function (l) {
+                                                      (c = u + (a - u) * l),
+                                                          n.animateStartingPos && ((c = s + (a - s) * l), (d = e - s + (i - (e - s)) * l)),
+                                                          (r = o.getPiePath({ me: o, startAngle: d, angle: c, size: h })),
+                                                          t.node.setAttribute("data:pathOrig", r),
+                                                          t.attr({ d: r });
+                                                  })
+                                            : ((r = o.getPiePath({ me: o, startAngle: d, angle: a, size: h })), n.isTrack || (l.globals.animationEnded = !0), t.node.setAttribute("data:pathOrig", r), t.attr({ d: r }));
+                                },
+                            },
+                            {
+                                key: "pieClicked",
+                                value: function (t) {
+                                    var e,
+                                        i = this.w,
+                                        a = this.w.globals.radialSize + 4,
+                                        s = i.globals.dom.Paper.select("#apexcharts-".concat(i.config.chart.type.toLowerCase(), "-slice-").concat(t)).members[0],
+                                        n = s.attr("d");
+                                    if ("true" !== s.attr("data:pieClicked")) {
+                                        var r = i.globals.dom.baseEl.querySelectorAll(".apexcharts-pie-area");
+                                        Array.prototype.forEach.call(r, function (t) {
+                                            t.setAttribute("data:pieClicked", "false");
+                                            var e = t.getAttribute("data:pathOrig");
+                                            t.setAttribute("d", e);
+                                        }),
+                                            s.attr("data:pieClicked", "true");
+                                        var o = parseInt(s.attr("data:startAngle")),
+                                            l = parseInt(s.attr("data:angle"));
+                                        (e = this.getPiePath({ me: this, startAngle: o, angle: l, size: a })), 360 !== l && s.plot(e).animate(1).plot(n).animate(100).plot(e);
+                                    } else {
+                                        s.attr({ "data:pieClicked": "false" }), this.revertDataLabelsInner(s.node, this.donutDataLabels);
+                                        var h = s.attr("data:pathOrig");
+                                        s.attr({ d: h });
+                                    }
+                                },
+                            },
+                            {
+                                key: "getChangedPath",
+                                value: function (t, e) {
+                                    var i = "";
+                                    return this.dynamicAnim && this.w.globals.dataChanged && (i = this.getPiePath({ me: this, startAngle: t, angle: e - t, size: this.size })), i;
+                                },
+                            },
+                            {
+                                key: "getPiePath",
+                                value: function (t) {
+                                    var e = t.me,
+                                        i = t.startAngle,
+                                        a = t.angle,
+                                        s = t.size,
+                                        n = this.w,
+                                        r = i,
+                                        o = (Math.PI * (r - 90)) / 180,
+                                        l = a + i;
+                                    Math.ceil(l) >= 360 && (l = 359.99);
+                                    var h = (Math.PI * (l - 90)) / 180,
+                                        c = e.centerX + s * Math.cos(o),
+                                        d = e.centerY + s * Math.sin(o),
+                                        u = e.centerX + s * Math.cos(h),
+                                        f = e.centerY + s * Math.sin(h),
+                                        g = p.polarToCartesian(e.centerX, e.centerY, e.donutSize, l),
+                                        x = p.polarToCartesian(e.centerX, e.centerY, e.donutSize, r),
+                                        v = a > 180 ? 1 : 0;
+                                    return "donut" === n.config.chart.type
+                                        ? ["M", c, d, "A", s, s, 0, v, 1, u, f, "L", g.x, g.y, "A", e.donutSize, e.donutSize, 0, v, 0, x.x, x.y, "L", c, d, "z"].join(" ")
+                                        : "pie" === n.config.chart.type
+                                        ? ["M", c, d, "A", s, s, 0, v, 1, u, f, "L", e.centerX, e.centerY, "L", c, d].join(" ")
+                                        : ["M", c, d, "A", s, s, 0, v, 1, u, f].join(" ");
+                                },
+                            },
+                            {
+                                key: "renderInnerDataLabels",
+                                value: function (t, e) {
+                                    var i = this.w,
+                                        a = new m(this.ctx),
+                                        s = a.group({ class: "apexcharts-datalabels-group", transform: "translate(".concat(e.translateX ? e.translateX : 0, ", ").concat(e.translateY ? e.translateY : 0, ")") }),
+                                        n = t.total.show;
+                                    s.node.style.opacity = e.opacity;
+                                    var r,
+                                        o,
+                                        l = e.centerX,
+                                        h = e.centerY;
+                                    (r = void 0 === t.name.color ? i.globals.colors[0] : t.name.color), (o = void 0 === t.value.color ? i.config.chart.foreColor : t.value.color);
+                                    var c = t.value.formatter,
+                                        d = "",
+                                        u = "";
+                                    if ((n ? ((r = t.total.color), (u = t.total.label), (d = t.total.formatter(i))) : 1 === i.globals.series.length && ((d = c(i.globals.series[0], i)), (u = i.globals.seriesNames[0])), t.name.show)) {
+                                        var f = a.drawText({ x: l, y: h + parseInt(t.name.offsetY), text: u, textAnchor: "middle", foreColor: r, fontSize: t.name.fontSize, fontFamily: t.name.fontFamily });
+                                        f.node.classList.add("apexcharts-datalabel-label"), s.add(f);
+                                    }
+                                    if (t.value.show) {
+                                        var g = t.name.show ? parseInt(t.value.offsetY) + 16 : t.value.offsetY,
+                                            p = a.drawText({ x: l, y: h + g, text: d, textAnchor: "middle", foreColor: o, fontSize: t.value.fontSize, fontFamily: t.value.fontFamily });
+                                        p.node.classList.add("apexcharts-datalabel-value"), s.add(p);
+                                    }
+                                    return s;
+                                },
+                            },
+                            {
+                                key: "printInnerLabels",
+                                value: function (t, e, i, a) {
+                                    var s,
+                                        n = this.w;
+                                    a ? (s = void 0 === t.name.color ? n.globals.colors[parseInt(a.parentNode.getAttribute("rel")) - 1] : t.name.color) : n.globals.series.length > 1 && t.total.show && (s = t.total.color);
+                                    var r = n.globals.dom.baseEl.querySelector(".apexcharts-datalabel-label"),
+                                        o = n.globals.dom.baseEl.querySelector(".apexcharts-datalabel-value");
+                                    (i = (0, t.value.formatter)(i, n)),
+                                        a || "function" != typeof t.total.formatter || (i = t.total.formatter(n)),
+                                        null !== r && (r.textContent = e),
+                                        null !== o && (o.textContent = i),
+                                        null !== r && (r.style.fill = s);
+                                },
+                            },
+                            {
+                                key: "printDataLabelsInner",
+                                value: function (t, e) {
+                                    var i = this.w,
+                                        a = t.getAttribute("data:value"),
+                                        s = i.globals.seriesNames[parseInt(t.parentNode.getAttribute("rel")) - 1];
+                                    i.globals.series.length > 1 && this.printInnerLabels(e, s, a, t);
+                                    var n = i.globals.dom.baseEl.querySelector(".apexcharts-datalabels-group");
+                                    null !== n && (n.style.opacity = 1);
+                                },
+                            },
+                            {
+                                key: "revertDataLabelsInner",
+                                value: function (e, i, a) {
+                                    var s = this.w,
+                                        n = s.globals.dom.baseEl.querySelector(".apexcharts-datalabels-group");
+                                    if (i.total.show && s.globals.series.length > 1) {
+                                        new t(this.ctx).printInnerLabels(i, i.total.label, i.total.formatter(s));
+                                    } else {
+                                        var r = document.querySelectorAll(".apexcharts-pie-area"),
+                                            o = !1;
+                                        if (
+                                            (Array.prototype.forEach.call(r, function (t) {
+                                                "true" === t.getAttribute("data:pieClicked") && ((o = !0), this.printDataLabelsInner(t, i));
+                                            }),
+                                            !o)
+                                        )
+                                            if (s.globals.selectedDataPoints.length && s.globals.series.length > 1)
+                                                if (s.globals.selectedDataPoints[0].length > 0) {
+                                                    var l = s.globals.selectedDataPoints[0],
+                                                        h = s.globals.dom.baseEl.querySelector("#apexcharts-".concat(s.config.chart.type.toLowerCase(), "-slice-").concat(l));
+                                                    this.printDataLabelsInner(h, i);
+                                                } else n && s.globals.selectedDataPoints.length && 0 === s.globals.selectedDataPoints[0].length && (n.style.opacity = 0);
+                                            else n && s.globals.series.length > 1 && (n.style.opacity = 0);
+                                    }
+                                },
+                            },
+                        ]),
+                        t
+                    );
+                })(),
+                D = (function () {
+                    function t(e) {
+                        n(this, t),
+                            (this.ctx = e),
+                            (this.w = e.w),
+                            (this.chartType = this.w.config.chart.type),
+                            (this.initialAnim = this.w.config.chart.animations.enabled),
+                            (this.dynamicAnim = this.initialAnim && this.w.config.chart.animations.dynamicAnimation.enabled),
+                            (this.animDur = 0);
+                        var i = this.w;
+                        (this.graphics = new m(this.ctx)),
+                            (this.lineColorArr = void 0 !== i.globals.stroke.colors ? i.globals.stroke.colors : i.globals.colors),
+                            (this.defaultSize = i.globals.svgHeight < i.globals.svgWidth ? i.globals.svgHeight - 35 : i.globals.gridWidth),
+                            (this.maxValue = this.w.globals.maxY),
+                            (this.polygons = i.config.plotOptions.radar.polygons),
+                            (this.maxLabelWidth = 20);
+                        var a = i.globals.labels.slice().sort(function (t, e) {
+                                return e.length - t.length;
+                            })[0],
+                            s = this.graphics.getTextRects(a, i.config.dataLabels.style.fontSize);
+                        (this.size = this.defaultSize / 2.1 - i.config.stroke.width - i.config.chart.dropShadow.blur - s.width / 1.75),
+                            void 0 !== i.config.plotOptions.radar.size && (this.size = i.config.plotOptions.radar.size),
+                            (this.dataRadiusOfPercent = []),
+                            (this.dataRadius = []),
+                            (this.angleArr = []),
+                            (this.yaxisLabelsTextsPos = []);
+                    }
+                    return (
+                        o(t, [
+                            {
+                                key: "draw",
+                                value: function (t) {
+                                    var e = this,
+                                        i = this.w,
+                                        a = new P(this.ctx),
+                                        s = [];
+                                    (this.dataPointsLen = t[i.globals.maxValsInArrayIndex].length), (this.disAngle = (2 * Math.PI) / this.dataPointsLen);
+                                    var n = i.globals.gridWidth / 2,
+                                        r = i.globals.gridHeight / 2,
+                                        o = this.graphics.group({ class: "apexcharts-radar-series", "data:innerTranslateX": n, "data:innerTranslateY": r - 25, transform: "translate(".concat(n || 0, ", ").concat(r || 0, ")") }),
+                                        l = [],
+                                        c = null;
+                                    if (
+                                        ((this.yaxisLabels = this.graphics.group({ class: "apexcharts-yaxis" })),
+                                        t.forEach(function (t, n) {
+                                            var r = e.graphics.group().attr({ class: "apexcharts-series", seriesName: p.escapeString(i.globals.seriesNames[n]), rel: n + 1, "data:realIndex": n });
+                                            (e.dataRadiusOfPercent[n] = []),
+                                                (e.dataRadius[n] = []),
+                                                (e.angleArr[n] = []),
+                                                t.forEach(function (t, i) {
+                                                    (e.dataRadiusOfPercent[n][i] = t / e.maxValue), (e.dataRadius[n][i] = e.dataRadiusOfPercent[n][i] * e.size), (e.angleArr[n][i] = i * e.disAngle);
+                                                }),
+                                                (l = e.getDataPointsPos(e.dataRadius[n], e.angleArr[n]));
+                                            var o = e.createPaths(l, { x: 0, y: 0 });
+                                            (c = e.graphics.group({ class: "apexcharts-series-markers-wrap hidden" })), i.globals.delayedElements.push({ el: c.node, index: n });
+                                            var d = {
+                                                    i: n,
+                                                    realIndex: n,
+                                                    animationDelay: n,
+                                                    initialSpeed: i.config.chart.animations.speed,
+                                                    dataChangeSpeed: i.config.chart.animations.dynamicAnimation.speed,
+                                                    className: "apexcharts-radar",
+                                                    id: "apexcharts-radar",
+                                                    shouldClipToGrid: !1,
+                                                    bindEventsOnPaths: !1,
+                                                    stroke: i.globals.stroke.colors[n],
+                                                    strokeLineCap: i.config.stroke.lineCap,
+                                                },
+                                                u = null;
+                                            i.globals.previousPaths.length > 0 && (u = e.getPathFrom(n));
+                                            for (var f = 0; f < o.linePathsTo.length; f++) {
+                                                var g = e.graphics.renderPaths(
+                                                    h({}, d, {
+                                                        pathFrom: null === u ? o.linePathsFrom[f] : u,
+                                                        pathTo: o.linePathsTo[f],
+                                                        strokeWidth: Array.isArray(i.config.stroke.width) ? i.config.stroke.width[n] : i.config.stroke.width,
+                                                        fill: "none",
+                                                        drawShadow: !1,
+                                                    })
+                                                );
+                                                r.add(g);
+                                                var v = a.fillPath({ seriesNumber: n }),
+                                                    m = e.graphics.renderPaths(h({}, d, { pathFrom: null === u ? o.areaPathsFrom[f] : u, pathTo: o.areaPathsTo[f], strokeWidth: 0, fill: v, drawShadow: !1 }));
+                                                if (i.config.chart.dropShadow.enabled) {
+                                                    var b = new x(e.ctx),
+                                                        y = i.config.chart.dropShadow;
+                                                    b.dropShadow(m, Object.assign({}, y, { noUserSpaceOnUse: !0 }), n);
+                                                }
+                                                r.add(m);
+                                            }
+                                            t.forEach(function (t, i) {
+                                                var a = new T(e.ctx).getMarkerConfig("apexcharts-marker", n),
+                                                    s = e.graphics.drawMarker(l[i].x, l[i].y, a);
+                                                s.attr("rel", i), s.attr("j", i), s.attr("index", n), s.node.setAttribute("default-marker-size", a.pSize);
+                                                var o = e.graphics.group({ class: "apexcharts-series-markers" });
+                                                o && o.add(s), c.add(o), r.add(c);
+                                            }),
+                                                s.push(r);
+                                        }),
+                                        this.drawPolygons({ parent: o }),
+                                        i.config.dataLabels.enabled)
+                                    ) {
+                                        var d = this.drawLabels();
+                                        o.add(d);
+                                    }
+                                    return (
+                                        o.add(this.yaxisLabels),
+                                        s.forEach(function (t) {
+                                            o.add(t);
+                                        }),
+                                        o
+                                    );
+                                },
+                            },
+                            {
+                                key: "drawPolygons",
+                                value: function (t) {
+                                    for (var e = this, i = this.w, a = t.parent, s = i.globals.yAxisScale[0].result.reverse(), n = s.length, r = [], o = this.size / (n - 1), l = 0; l < n; l++) r[l] = o * l;
+                                    r.reverse();
+                                    var h = [],
+                                        c = [];
+                                    r.forEach(function (t, i) {
+                                        var a = e.getPolygonPos(t),
+                                            s = "";
+                                        a.forEach(function (t, a) {
+                                            if (0 === i) {
+                                                var n = e.graphics.drawLine(t.x, t.y, 0, 0, Array.isArray(e.polygons.connectorColors) ? e.polygons.connectorColors[a] : e.polygons.connectorColors);
+                                                c.push(n);
+                                            }
+                                            0 === a && e.yaxisLabelsTextsPos.push({ x: t.x, y: t.y }), (s += t.x + "," + t.y + " ");
+                                        }),
+                                            h.push(s);
+                                    }),
+                                        h.forEach(function (t, s) {
+                                            var n = e.polygons.strokeColors,
+                                                r = e.graphics.drawPolygon(t, Array.isArray(n) ? n[s] : n, i.globals.radarPolygons.fill.colors[s]);
+                                            a.add(r);
+                                        }),
+                                        c.forEach(function (t) {
+                                            a.add(t);
+                                        }),
+                                        i.config.yaxis[0].show &&
+                                            this.yaxisLabelsTextsPos.forEach(function (t, i) {
+                                                var a = e.drawYAxisText(t.x, t.y, i, s[i]);
+                                                e.yaxisLabels.add(a);
+                                            });
+                                },
+                            },
+                            {
+                                key: "drawYAxisText",
+                                value: function (t, e, i, a) {
+                                    var s = this.w,
+                                        n = s.config.yaxis[0],
+                                        r = s.globals.yLabelFormatters[0];
+                                    return this.graphics.drawText({
+                                        x: t + n.labels.offsetX,
+                                        y: e + n.labels.offsetY,
+                                        text: r(a, i),
+                                        textAnchor: "middle",
+                                        fontSize: n.labels.style.fontSize,
+                                        fontFamily: n.labels.style.fontFamily,
+                                        foreColor: n.labels.style.color,
+                                    });
+                                },
+                            },
+                            {
+                                key: "drawLabels",
+                                value: function () {
+                                    var t = this,
+                                        e = this.w,
+                                        i = "middle",
+                                        a = e.config.dataLabels,
+                                        s = this.graphics.group({ class: "apexcharts-datalabels" }),
+                                        n = this.getPolygonPos(this.size),
+                                        r = 0,
+                                        o = 0;
+                                    return (
+                                        e.globals.labels.forEach(function (l, h) {
+                                            var c = a.formatter,
+                                                d = new z(t.ctx);
+                                            if (n[h]) {
+                                                (r = n[h].x),
+                                                    (o = n[h].y),
+                                                    Math.abs(n[h].x) >= 10 ? (n[h].x > 0 ? ((i = "start"), (r += 10)) : n[h].x < 0 && ((i = "end"), (r -= 10))) : (i = "middle"),
+                                                    Math.abs(n[h].y) >= t.size - 10 && (n[h].y < 0 ? (o -= 10) : n[h].y > 0 && (o += 10));
+                                                var u = c(l, { seriesIndex: -1, dataPointIndex: h, w: e });
+                                                d.plotDataLabelsText({ x: r, y: o, text: u, textAnchor: i, i: h, j: h, parent: s, dataLabelsConfig: a, offsetCorrection: !1 });
+                                            }
+                                        }),
+                                        s
+                                    );
+                                },
+                            },
+                            {
+                                key: "createPaths",
+                                value: function (t, e) {
+                                    var i = this,
+                                        a = [],
+                                        s = [],
+                                        n = [],
+                                        r = [];
+                                    if (t.length) {
+                                        (s = [this.graphics.move(e.x, e.y)]), (r = [this.graphics.move(e.x, e.y)]);
+                                        var o = this.graphics.move(t[0].x, t[0].y),
+                                            l = this.graphics.move(t[0].x, t[0].y);
+                                        t.forEach(function (e, a) {
+                                            (o += i.graphics.line(e.x, e.y)), (l += i.graphics.line(e.x, e.y)), a === t.length - 1 && ((o += "Z"), (l += "Z"));
+                                        }),
+                                            a.push(o),
+                                            n.push(l);
+                                    }
+                                    return { linePathsFrom: s, linePathsTo: a, areaPathsFrom: r, areaPathsTo: n };
+                                },
+                            },
+                            {
+                                key: "getPathFrom",
+                                value: function (t) {
+                                    for (var e = this.w, i = null, a = 0; a < e.globals.previousPaths.length; a++) {
+                                        var s = e.globals.previousPaths[a];
+                                        s.paths.length > 0 && parseInt(s.realIndex) === parseInt(t) && void 0 !== e.globals.previousPaths[a].paths[0] && (i = e.globals.previousPaths[a].paths[0].d);
+                                    }
+                                    return i;
+                                },
+                            },
+                            {
+                                key: "getDataPointsPos",
+                                value: function (t, e) {
+                                    var i = arguments.length > 2 && void 0 !== arguments[2] ? arguments[2] : this.dataPointsLen;
+                                    (t = t || []), (e = e || []);
+                                    for (var a = [], s = 0; s < i; s++) {
+                                        var n = {};
+                                        (n.x = t[s] * Math.sin(e[s])), (n.y = -t[s] * Math.cos(e[s])), a.push(n);
+                                    }
+                                    return a;
+                                },
+                            },
+                            {
+                                key: "getPolygonPos",
+                                value: function (t) {
+                                    for (var e = [], i = (2 * Math.PI) / this.dataPointsLen, a = 0; a < this.dataPointsLen; a++) {
+                                        var s = {};
+                                        (s.x = t * Math.sin(a * i)), (s.y = -t * Math.cos(a * i)), e.push(s);
+                                    }
+                                    return e;
+                                },
+                            },
+                        ]),
+                        t
+                    );
+                })(),
+                N = (function (t) {
+                    function e(t) {
+                        var i;
+                        n(this, e), ((i = f(this, d(e).call(this, t))).ctx = t), (i.w = t.w), (i.animBeginArr = [0]), (i.animDur = 0);
+                        var a = i.w;
+                        return (
+                            (i.startAngle = a.config.plotOptions.radialBar.startAngle),
+                            (i.endAngle = a.config.plotOptions.radialBar.endAngle),
+                            (i.trackStartAngle = a.config.plotOptions.radialBar.track.startAngle),
+                            (i.trackEndAngle = a.config.plotOptions.radialBar.track.endAngle),
+                            (i.radialDataLabels = a.config.plotOptions.radialBar.dataLabels),
+                            i.trackStartAngle || (i.trackStartAngle = i.startAngle),
+                            i.trackEndAngle || (i.trackEndAngle = i.endAngle),
+                            360 === i.endAngle && (i.endAngle = 359.99),
+                            (i.fullAngle = 360 - a.config.plotOptions.radialBar.endAngle - a.config.plotOptions.radialBar.startAngle),
+                            (i.margin = parseInt(a.config.plotOptions.radialBar.track.margin)),
+                            i
+                        );
+                    }
+                    return (
+                        c(e, R),
+                        o(e, [
+                            {
+                                key: "draw",
+                                value: function (t) {
+                                    var e = this.w,
+                                        i = new m(this.ctx),
+                                        a = i.group({ class: "apexcharts-radialbar" });
+                                    if (e.globals.noData) return a;
+                                    var s = i.group(),
+                                        n = this.defaultSize / 2,
+                                        r = e.globals.gridWidth / 2,
+                                        o = this.defaultSize / 2.05 - e.config.stroke.width - e.config.chart.dropShadow.blur;
+                                    void 0 !== e.config.plotOptions.radialBar.size && (o = e.config.plotOptions.radialBar.size);
+                                    var l = e.globals.fill.colors;
+                                    if (e.config.plotOptions.radialBar.track.show) {
+                                        var h = this.drawTracks({ size: o, centerX: r, centerY: n, colorArr: l, series: t });
+                                        s.add(h);
+                                    }
+                                    var c = this.drawArcs({ size: o, centerX: r, centerY: n, colorArr: l, series: t }),
+                                        d = 360;
+                                    return (
+                                        e.config.plotOptions.radialBar.startAngle < 0 && (d = Math.abs(e.config.plotOptions.radialBar.endAngle - e.config.plotOptions.radialBar.startAngle)),
+                                        (e.globals.radialSize = o - o / (360 / (360 - d)) + 10),
+                                        s.add(c.g),
+                                        "front" === e.config.plotOptions.radialBar.hollow.position && (c.g.add(c.elHollow), c.dataLabels && c.g.add(c.dataLabels)),
+                                        a.add(s),
+                                        a
+                                    );
+                                },
+                            },
+                            {
+                                key: "drawTracks",
+                                value: function (t) {
+                                    var e = this.w,
+                                        i = new m(this.ctx),
+                                        a = i.group({ class: "apexcharts-tracks" }),
+                                        s = new x(this.ctx),
+                                        n = new P(this.ctx),
+                                        r = this.getStrokeWidth(t);
+                                    t.size = t.size - r / 2;
+                                    for (var o = 0; o < t.series.length; o++) {
+                                        var l = i.group({ class: "apexcharts-radialbar-track apexcharts-track" });
+                                        a.add(l), l.attr({ id: "apexcharts-track-" + o, rel: o + 1 }), (t.size = t.size - r - this.margin);
+                                        var h = e.config.plotOptions.radialBar.track,
+                                            c = n.fillPath({ seriesNumber: 0, size: t.size, fillColors: Array.isArray(h.background) ? h.background[o] : h.background, solid: !0 }),
+                                            d = this.trackStartAngle,
+                                            u = this.trackEndAngle;
+                                        Math.abs(u) + Math.abs(d) >= 360 && (u = 360 - Math.abs(this.startAngle) - 0.1);
+                                        var f = i.drawPath({ d: "", stroke: c, strokeWidth: (r * parseInt(h.strokeWidth)) / 100, fill: "none", strokeOpacity: h.opacity, classes: "apexcharts-radialbar-area" });
+                                        if (h.dropShadow.enabled) {
+                                            var g = h.dropShadow;
+                                            s.dropShadow(f, g);
+                                        }
+                                        l.add(f),
+                                            f.attr("id", "apexcharts-radialbarTrack-" + o),
+                                            this.animatePaths(f, { centerX: t.centerX, centerY: t.centerY, endAngle: u, startAngle: d, size: t.size, i: o, totalItems: 2, animBeginArr: 0, dur: 0, isTrack: !0, easing: e.globals.easing });
+                                    }
+                                    return a;
+                                },
+                            },
+                            {
+                                key: "drawArcs",
+                                value: function (t) {
+                                    var e = this.w,
+                                        i = new m(this.ctx),
+                                        a = new P(this.ctx),
+                                        s = new x(this.ctx),
+                                        n = i.group(),
+                                        r = this.getStrokeWidth(t);
+                                    t.size = t.size - r / 2;
+                                    var o = e.config.plotOptions.radialBar.hollow.background,
+                                        l = t.size - r * t.series.length - this.margin * t.series.length - (r * parseInt(e.config.plotOptions.radialBar.track.strokeWidth)) / 100 / 2,
+                                        h = l - e.config.plotOptions.radialBar.hollow.margin;
+                                    void 0 !== e.config.plotOptions.radialBar.hollow.image && (o = this.drawHollowImage(t, n, l, o));
+                                    var c = this.drawHollow({ size: h, centerX: t.centerX, centerY: t.centerY, fill: o });
+                                    if (e.config.plotOptions.radialBar.hollow.dropShadow.enabled) {
+                                        var d = e.config.plotOptions.radialBar.hollow.dropShadow;
+                                        s.dropShadow(c, d);
+                                    }
+                                    var u = 1;
+                                    !this.radialDataLabels.total.show && e.globals.series.length > 1 && (u = 0);
+                                    var f = null;
+                                    this.radialDataLabels.show && (f = this.renderInnerDataLabels(this.radialDataLabels, { hollowSize: l, centerX: t.centerX, centerY: t.centerY, opacity: u })),
+                                        "back" === e.config.plotOptions.radialBar.hollow.position && (n.add(c), f && n.add(f));
+                                    var g = !1;
+                                    e.config.plotOptions.radialBar.inverseOrder && (g = !0);
+                                    for (var v = g ? t.series.length - 1 : 0; g ? v >= 0 : v < t.series.length; g ? v-- : v++) {
+                                        var b = i.group({ class: "apexcharts-series apexcharts-radial-series", seriesName: p.escapeString(e.globals.seriesNames[v]) });
+                                        n.add(b), b.attr({ id: "apexcharts-series-" + v, rel: v + 1, "data:realIndex": v }), this.ctx.series.addCollapsedClassToSeries(b, v), (t.size = t.size - r - this.margin);
+                                        var y = a.fillPath({ seriesNumber: v, size: t.size, value: t.series[v] }),
+                                            w = this.startAngle,
+                                            k = void 0,
+                                            S = Math.abs(e.config.plotOptions.radialBar.endAngle - e.config.plotOptions.radialBar.startAngle),
+                                            A = p.negToZero(t.series[v] > 100 ? 100 : t.series[v]) / 100,
+                                            C = Math.round(S * A) + this.startAngle,
+                                            L = void 0;
+                                        e.globals.dataChanged && ((k = this.startAngle), (L = Math.round((S * p.negToZero(e.globals.previousPaths[v])) / 100) + k)),
+                                            Math.abs(C) + Math.abs(w) >= 360 && (C -= 0.01),
+                                            Math.abs(L) + Math.abs(k) >= 360 && (L -= 0.01);
+                                        var E = C - w,
+                                            T = Array.isArray(e.config.stroke.dashArray) ? e.config.stroke.dashArray[v] : e.config.stroke.dashArray,
+                                            M = i.drawPath({ d: "", stroke: y, strokeWidth: r, fill: "none", fillOpacity: e.config.fill.opacity, classes: "apexcharts-radialbar-area", strokeDashArray: T });
+                                        if ((m.setAttrs(M.node, { "data:angle": E, "data:value": t.series[v] }), e.config.chart.dropShadow.enabled)) {
+                                            var z = e.config.chart.dropShadow;
+                                            s.dropShadow(M, z, v);
+                                        }
+                                        this.addListeners(M, this.radialDataLabels), b.add(M), M.attr({ id: "apexcharts-radialbar-slice-" + v, index: 0, j: v });
+                                        var I = 0;
+                                        !this.initialAnim ||
+                                            e.globals.resized ||
+                                            e.globals.dataChanged ||
+                                            ((I = ((C - w) / 360) * e.config.chart.animations.speed), (this.animDur = I / (1.2 * t.series.length) + this.animDur), this.animBeginArr.push(this.animDur)),
+                                            e.globals.dataChanged &&
+                                                ((I = ((C - w) / 360) * e.config.chart.animations.dynamicAnimation.speed), (this.animDur = I / (1.2 * t.series.length) + this.animDur), this.animBeginArr.push(this.animDur)),
+                                            this.animatePaths(M, {
+                                                centerX: t.centerX,
+                                                centerY: t.centerY,
+                                                endAngle: C,
+                                                startAngle: w,
+                                                prevEndAngle: L,
+                                                prevStartAngle: k,
+                                                size: t.size,
+                                                i: v,
+                                                totalItems: 2,
+                                                animBeginArr: this.animBeginArr,
+                                                dur: I,
+                                                shouldSetPrevPaths: !0,
+                                                easing: e.globals.easing,
+                                            });
+                                    }
+                                    return { g: n, elHollow: c, dataLabels: f };
+                                },
+                            },
+                            {
+                                key: "drawHollow",
+                                value: function (t) {
+                                    var e = new m(this.ctx).drawCircle(2 * t.size);
+                                    return e.attr({ class: "apexcharts-radialbar-hollow", cx: t.centerX, cy: t.centerY, r: t.size, fill: t.fill }), e;
+                                },
+                            },
+                            {
+                                key: "drawHollowImage",
+                                value: function (t, e, i, a) {
+                                    var s = this.w,
+                                        n = new P(this.ctx),
+                                        r = (Math.random() + 1).toString(36).substring(4),
+                                        o = s.config.plotOptions.radialBar.hollow.image;
+                                    if (s.config.plotOptions.radialBar.hollow.imageClipped)
+                                        n.clippedImgArea({ width: i, height: i, image: o, patternID: "pattern".concat(s.globals.cuid).concat(r) }), (a = "url(#pattern".concat(s.globals.cuid).concat(r, ")"));
+                                    else {
+                                        var l = s.config.plotOptions.radialBar.hollow.imageWidth,
+                                            h = s.config.plotOptions.radialBar.hollow.imageHeight;
+                                        if (void 0 === l && void 0 === h) {
+                                            var c = s.globals.dom.Paper.image(o).loaded(function (e) {
+                                                this.move(t.centerX - e.width / 2 + s.config.plotOptions.radialBar.hollow.imageOffsetX, t.centerY - e.height / 2 + s.config.plotOptions.radialBar.hollow.imageOffsetY);
+                                            });
+                                            e.add(c);
+                                        } else {
+                                            var d = s.globals.dom.Paper.image(o).loaded(function (e) {
+                                                this.move(t.centerX - l / 2 + s.config.plotOptions.radialBar.hollow.imageOffsetX, t.centerY - h / 2 + s.config.plotOptions.radialBar.hollow.imageOffsetY), this.size(l, h);
+                                            });
+                                            e.add(d);
+                                        }
+                                    }
+                                    return a;
+                                },
+                            },
+                            {
+                                key: "getStrokeWidth",
+                                value: function (t) {
+                                    var e = this.w;
+                                    return (t.size * (100 - parseInt(e.config.plotOptions.radialBar.hollow.size))) / 100 / (t.series.length + 1) - this.margin;
+                                },
+                            },
+                        ]),
+                        e
+                    );
+                })(),
+                H = (function (t) {
+                    function e() {
+                        return n(this, e), f(this, d(e).apply(this, arguments));
+                    }
+                    return (
+                        c(e, I),
+                        o(e, [
+                            {
+                                key: "draw",
+                                value: function (t, e) {
+                                    var i = this.w,
+                                        a = new m(this.ctx),
+                                        s = new P(this.ctx);
+                                    (this.rangeBarOptions = this.w.config.plotOptions.rangeBar),
+                                        (this.series = t),
+                                        (this.seriesRangeStart = i.globals.seriesRangeStart),
+                                        (this.seriesRangeEnd = i.globals.seriesRangeEnd),
+                                        this.initVariables(t);
+                                    for (var n = a.group({ class: "apexcharts-rangebar-series apexcharts-plot-series" }), r = 0, o = 0; r < t.length; r++, o++) {
+                                        var l,
+                                            h,
+                                            c,
+                                            d,
+                                            u = void 0,
+                                            f = void 0,
+                                            g = void 0,
+                                            x = void 0,
+                                            v = [],
+                                            b = [],
+                                            y = i.globals.comboCharts ? e[r] : r,
+                                            w = a.group({ class: "apexcharts-series", seriesName: p.escapeString(i.globals.seriesNames[y]), rel: r + 1, "data:realIndex": y });
+                                        t[r].length > 0 && (this.visibleI = this.visibleI + 1);
+                                        var k = 0,
+                                            S = 0,
+                                            A = 0;
+                                        this.yRatio.length > 1 && (this.yaxisIndex = y);
+                                        var C = this.initialPositions();
+                                        (x = C.y), (h = C.yDivision), (S = C.barHeight), (d = C.zeroW), (g = C.x), (A = C.barWidth), (l = C.xDivision), (c = C.zeroH), b.push(g + A / 2);
+                                        for (var L = a.group({ class: "apexcharts-datalabels" }), E = 0, T = i.globals.dataPoints; E < i.globals.dataPoints; E++, T--) {
+                                            void 0 === this.series[r][E] || null === t[r][E] ? (this.isNullValue = !0) : (this.isNullValue = !1),
+                                                i.config.stroke.show && (k = this.isNullValue ? 0 : Array.isArray(this.strokeWidth) ? this.strokeWidth[y] : this.strokeWidth);
+                                            var M = null;
+                                            this.isHorizontal
+                                                ? (A = (M = this.drawRangeBarPaths({ indexes: { i: r, j: E, realIndex: y, bc: o }, barHeight: S, strokeWidth: k, pathTo: u, pathFrom: f, zeroW: d, x: g, y: x, yDivision: h, elSeries: w }))
+                                                      .barWidth)
+                                                : (S = (M = this.drawRangeColumnPaths({ indexes: { i: r, j: E, realIndex: y, bc: o }, x: g, y: x, xDivision: l, pathTo: u, pathFrom: f, barWidth: A, zeroH: c, strokeWidth: k, elSeries: w }))
+                                                      .barHeight),
+                                                (u = M.pathTo),
+                                                (f = M.pathFrom),
+                                                (x = M.y),
+                                                (g = M.x),
+                                                E > 0 && b.push(g + A / 2),
+                                                v.push(x);
+                                            var z = s.fillPath({ seriesNumber: y }),
+                                                I = i.globals.stroke.colors[y];
+                                            w = this.renderSeries({
+                                                realIndex: y,
+                                                pathFill: z,
+                                                lineFill: I,
+                                                j: E,
+                                                i: r,
+                                                pathFrom: f,
+                                                pathTo: u,
+                                                strokeWidth: k,
+                                                elSeries: w,
+                                                x: g,
+                                                y: x,
+                                                series: t,
+                                                barHeight: S,
+                                                barWidth: A,
+                                                elDataLabelsWrap: L,
+                                                visibleSeries: this.visibleI,
+                                                type: "rangebar",
+                                            });
+                                        }
+                                        (i.globals.seriesXvalues[y] = b), (i.globals.seriesYvalues[y] = v), n.add(w);
+                                    }
+                                    return n;
+                                },
+                            },
+                            {
+                                key: "drawRangeColumnPaths",
+                                value: function (t) {
+                                    var e = t.indexes,
+                                        i = t.x,
+                                        a = (t.y, t.strokeWidth),
+                                        s = t.xDivision,
+                                        n = t.pathTo,
+                                        r = t.pathFrom,
+                                        o = t.barWidth,
+                                        l = t.zeroH,
+                                        h = this.w,
+                                        c = new m(this.ctx),
+                                        d = e.i,
+                                        u = e.j,
+                                        f = this.yRatio[this.yaxisIndex],
+                                        g = e.realIndex,
+                                        p = this.getRangeValue(g, u),
+                                        x = Math.min(p.start, p.end),
+                                        v = Math.max(p.start, p.end);
+                                    h.globals.isXNumeric && (i = (h.globals.seriesX[d][u] - h.globals.minX) / this.xRatio - o / 2);
+                                    var b = i + o * this.visibleI;
+                                    void 0 === this.series[d][u] || null === this.series[d][u] ? (x = l) : ((x = l - x / f), (v = l - v / f));
+                                    var y = Math.abs(v - x);
+                                    return (
+                                        c.move(b, l),
+                                        (r = c.move(b, x)),
+                                        h.globals.previousPaths.length > 0 && (r = this.getPathFrom(g, u, !0)),
+                                        (n = c.move(b, v) + c.line(b + o, v) + c.line(b + o, x) + c.line(b, x) + c.line(b, v - a / 2)),
+                                        (r = r + c.move(b, x) + c.line(b + o, x) + c.line(b + o, x) + c.line(b, x)),
+                                        h.globals.isXNumeric || (i += s),
+                                        { pathTo: n, pathFrom: r, barHeight: y, x: i, y: v, barXPosition: b }
+                                    );
+                                },
+                            },
+                            {
+                                key: "drawRangeBarPaths",
+                                value: function (t) {
+                                    var e = t.indexes,
+                                        i = (t.x, t.y),
+                                        a = t.yDivision,
+                                        s = t.pathTo,
+                                        n = t.pathFrom,
+                                        r = t.barHeight,
+                                        o = t.zeroW,
+                                        l = this.w,
+                                        h = new m(this.ctx),
+                                        c = e.i,
+                                        d = e.j,
+                                        u = e.realIndex,
+                                        f = o,
+                                        g = o;
+                                    l.globals.isXNumeric && (i = (l.globals.seriesX[c][d] - l.globals.minX) / this.invertedXRatio - r);
+                                    var p = i + r * this.visibleI;
+                                    void 0 !== this.series[c][d] && null !== this.series[c][d] && ((f = o + this.seriesRangeStart[c][d] / this.invertedYRatio), (g = o + this.seriesRangeEnd[c][d] / this.invertedYRatio)),
+                                        h.move(o, p),
+                                        (n = h.move(o, p)),
+                                        l.globals.previousPaths.length > 0 && (n = this.getPathFrom(u, d));
+                                    var x = Math.abs(g - f);
+                                    return (
+                                        (s = h.move(f, p) + h.line(g, p) + h.line(g, p + r) + h.line(f, p + r) + h.line(f, p)),
+                                        (n = n + h.line(f, p) + h.line(f, p + r) + h.line(f, p + r) + h.line(f, p)),
+                                        l.globals.isXNumeric || (i += a),
+                                        { pathTo: s, pathFrom: n, barWidth: x, x: g, y: i, barYPosition: p }
+                                    );
+                                },
+                            },
+                            {
+                                key: "getRangeValue",
+                                value: function (t, e) {
+                                    var i = this.w;
+                                    return { start: i.globals.seriesRangeStart[t][e], end: i.globals.seriesRangeEnd[t][e] };
+                                },
+                            },
+                        ]),
+                        e
+                    );
+                })(),
+                _ = (function () {
+                    function t(e) {
+                        n(this, t), (this.ctx = e), (this.w = e.w), (this.tooltipKeyFormat = "dd MMM");
+                    }
+                    return (
+                        o(t, [
+                            {
+                                key: "xLabelFormat",
+                                value: function (t, e) {
+                                    var i = this.w;
+                                    if ("datetime" === i.config.xaxis.type && void 0 === i.config.tooltip.x.formatter) return new k(this.ctx).formatDate(new Date(e), i.config.tooltip.x.format, !0, !0);
+                                    return t(e);
+                                },
+                            },
+                            {
+                                key: "setLabelFormatters",
+                                value: function () {
+                                    var t = this.w;
+                                    return (
+                                        (t.globals.xLabelFormatter = function (t) {
+                                            return t;
+                                        }),
+                                        (t.globals.xaxisTooltipFormatter = function (t) {
+                                            return t;
+                                        }),
+                                        (t.globals.ttKeyFormatter = function (t) {
+                                            return t;
+                                        }),
+                                        (t.globals.ttZFormatter = function (t) {
+                                            return t;
+                                        }),
+                                        (t.globals.legendFormatter = function (t) {
+                                            return t;
+                                        }),
+                                        "function" == typeof t.config.tooltip.x.formatter && (t.globals.ttKeyFormatter = t.config.tooltip.x.formatter),
+                                        "function" == typeof t.config.xaxis.tooltip.formatter && (t.globals.xaxisTooltipFormatter = t.config.xaxis.tooltip.formatter),
+                                        Array.isArray(t.config.tooltip.y) ? (t.globals.ttVal = t.config.tooltip.y) : void 0 !== t.config.tooltip.y.formatter && (t.globals.ttVal = t.config.tooltip.y),
+                                        void 0 !== t.config.tooltip.z.formatter && (t.globals.ttZFormatter = t.config.tooltip.z.formatter),
+                                        void 0 !== t.config.legend.formatter && (t.globals.legendFormatter = t.config.legend.formatter),
+                                        void 0 !== t.config.xaxis.labels.formatter
+                                            ? (t.globals.xLabelFormatter = t.config.xaxis.labels.formatter)
+                                            : (t.globals.xLabelFormatter = function (e) {
+                                                  return p.isNumber(e) ? ("numeric" === t.config.xaxis.type && t.globals.dataPoints < 50 ? e.toFixed(1) : e.toFixed(0)) : e;
+                                              }),
+                                        t.config.yaxis.forEach(function (e, i) {
+                                            void 0 !== e.labels.formatter
+                                                ? (t.globals.yLabelFormatters[i] = e.labels.formatter)
+                                                : (t.globals.yLabelFormatters[i] = function (a) {
+                                                      return p.isNumber(a)
+                                                          ? 0 !== t.globals.yValueDecimal
+                                                              ? a.toFixed(void 0 !== e.decimalsInFloat ? e.decimalsInFloat : t.globals.yValueDecimal)
+                                                              : t.globals.maxYArr[i] - t.globals.minYArr[i] < 5
+                                                              ? a.toFixed(1)
+                                                              : a.toFixed(0)
+                                                          : a;
+                                                  });
+                                        }),
+                                        t.globals
+                                    );
+                                },
+                            },
+                            {
+                                key: "heatmapLabelFormatters",
+                                value: function () {
+                                    var t = this.w;
+                                    if ("heatmap" === t.config.chart.type) {
+                                        t.globals.yAxisScale[0].result = t.globals.seriesNames.slice();
+                                        var e = t.globals.seriesNames.reduce(function (t, e) {
+                                            return t.length > e.length ? t : e;
+                                        }, 0);
+                                        (t.globals.yAxisScale[0].niceMax = e), (t.globals.yAxisScale[0].niceMin = e);
+                                    }
+                                },
+                            },
+                        ]),
+                        t
+                    );
+                })(),
+                W = (function () {
+                    function t(e) {
+                        n(this, t), (this.ctx = e), (this.w = e.w);
+                    }
+                    return (
+                        o(t, [
+                            {
+                                key: "getLabel",
+                                value: function (t, e, i, a) {
+                                    var s,
+                                        n = arguments.length > 4 && void 0 !== arguments[4] ? arguments[4] : [],
+                                        r = this.w,
+                                        o = void 0 === t[a] ? "" : t[a],
+                                        l = r.globals.xLabelFormatter,
+                                        h = r.config.xaxis.labels.formatter;
+                                    return (
+                                        (s = new _(this.ctx).xLabelFormat(l, o)),
+                                        void 0 !== h && (s = h(o, t[a], a)),
+                                        e.length > 0 ? ((i = e[a].position), (s = e[a].value)) : "datetime" === r.config.xaxis.type && void 0 === h && (s = ""),
+                                        void 0 === s && (s = ""),
+                                        (0 === (s = s.toString()).indexOf("NaN") || 0 === s.toLowerCase().indexOf("invalid") || s.toLowerCase().indexOf("infinity") >= 0 || (n.indexOf(s) >= 0 && !r.config.xaxis.labels.showDuplicates)) &&
+                                            (s = ""),
+                                        { x: i, text: s }
+                                    );
+                                },
+                            },
+                            {
+                                key: "drawYAxisTicks",
+                                value: function (t, e, i, a, s, n, r) {
+                                    var o = this.w,
+                                        l = new m(this.ctx),
+                                        h = o.globals.translateY;
+                                    if (a.show) {
+                                        !0 === o.config.yaxis[s].opposite && (t += a.width);
+                                        for (var c = e; c >= 0; c--) {
+                                            var d = h + e / 10 + o.config.yaxis[s].labels.offsetY - 1;
+                                            o.globals.isBarHorizontal && (d = n * c);
+                                            var u = l.drawLine(t + i.offsetX - a.width + a.offsetX, d + a.offsetY, t + i.offsetX + a.offsetX, d + a.offsetY, i.color);
+                                            r.add(u), (h += n);
+                                        }
+                                    }
+                                },
+                            },
+                        ]),
+                        t
+                    );
+                })(),
+                B = (function () {
+                    function t(e) {
+                        n(this, t), (this.ctx = e), (this.w = e.w);
+                        var i = this.w;
+                        (this.xaxisFontSize = i.config.xaxis.labels.style.fontSize),
+                            (this.axisFontFamily = i.config.xaxis.labels.style.fontFamily),
+                            (this.xaxisForeColors = i.config.xaxis.labels.style.colors),
+                            (this.xAxisoffX = 0),
+                            "bottom" === i.config.xaxis.position && (this.xAxisoffX = i.globals.gridHeight),
+                            (this.drawnLabels = []),
+                            (this.axesUtils = new W(e));
+                    }
+                    return (
+                        o(t, [
+                            {
+                                key: "drawYaxis",
+                                value: function (t) {
+                                    var e = this.w,
+                                        i = new m(this.ctx),
+                                        a = e.config.yaxis[t].labels.style.fontSize,
+                                        s = e.config.yaxis[t].labels.style.fontFamily,
+                                        n = i.group({ class: "apexcharts-yaxis", rel: t, transform: "translate(" + e.globals.translateYAxisX[t] + ", 0)" });
+                                    if (!e.config.yaxis[t].show) return n;
+                                    var r = i.group({ class: "apexcharts-yaxis-texts-g" });
+                                    n.add(r);
+                                    var o = e.globals.yAxisScale[t].result.length - 1,
+                                        l = e.globals.gridHeight / o + 0.1,
+                                        h = e.globals.translateY,
+                                        c = e.globals.yLabelFormatters[t],
+                                        d = e.globals.yAxisScale[t].result.slice();
+                                    if ((e.config.yaxis[t] && e.config.yaxis[t].reversed && d.reverse(), e.config.yaxis[t].labels.show))
+                                        for (var u = o; u >= 0; u--) {
+                                            var f = d[u];
+                                            f = c(f, u);
+                                            var g = e.config.yaxis[t].labels.padding;
+                                            e.config.yaxis[t].opposite && 0 !== e.config.yaxis.length && (g *= -1);
+                                            var p = i.drawText({
+                                                x: g,
+                                                y: h + o / 10 + e.config.yaxis[t].labels.offsetY + 1,
+                                                text: f,
+                                                textAnchor: e.config.yaxis[t].opposite ? "start" : "end",
+                                                fontSize: a,
+                                                fontFamily: s,
+                                                foreColor: e.config.yaxis[t].labels.style.color,
+                                                cssClass: "apexcharts-yaxis-label " + e.config.yaxis[t].labels.style.cssClass,
+                                            });
+                                            r.add(p);
+                                            var x = i.rotateAroundCenter(p.node);
+                                            0 !== e.config.yaxis[t].labels.rotate && p.node.setAttribute("transform", "rotate(".concat(e.config.yaxis[t].labels.rotate, " ").concat(x.x, " ").concat(x.y, ")")), (h += l);
+                                        }
+                                    if (void 0 !== e.config.yaxis[t].title.text) {
+                                        var v = i.group({ class: "apexcharts-yaxis-title" }),
+                                            b = 0;
+                                        e.config.yaxis[t].opposite && (b = e.globals.translateYAxisX[t]);
+                                        var y = i.drawText({
+                                            x: b,
+                                            y: e.globals.gridHeight / 2 + e.globals.translateY,
+                                            text: e.config.yaxis[t].title.text,
+                                            textAnchor: "end",
+                                            foreColor: e.config.yaxis[t].title.style.color,
+                                            fontSize: e.config.yaxis[t].title.style.fontSize,
+                                            fontFamily: e.config.yaxis[t].title.style.fontFamily,
+                                            cssClass: "apexcharts-yaxis-title-text " + e.config.yaxis[t].title.style.cssClass,
+                                        });
+                                        v.add(y), n.add(v);
+                                    }
+                                    var w = e.config.yaxis[t].axisBorder;
+                                    if (w.show) {
+                                        var k = 31 + w.offsetX;
+                                        e.config.yaxis[t].opposite && (k = -31 - w.offsetX);
+                                        var S = i.drawLine(k, e.globals.translateY + w.offsetY - 2, k, e.globals.gridHeight + e.globals.translateY + w.offsetY + 2, w.color);
+                                        n.add(S), this.axesUtils.drawYAxisTicks(k, o, w, e.config.yaxis[t].axisTicks, t, l, n);
+                                    }
+                                    return n;
+                                },
+                            },
+                            {
+                                key: "drawYaxisInversed",
+                                value: function (t) {
+                                    var e = this.w,
+                                        i = new m(this.ctx),
+                                        a = i.group({ class: "apexcharts-xaxis apexcharts-yaxis-inversed" }),
+                                        s = i.group({ class: "apexcharts-xaxis-texts-g", transform: "translate(".concat(e.globals.translateXAxisX, ", ").concat(e.globals.translateXAxisY, ")") });
+                                    a.add(s);
+                                    var n = e.globals.yAxisScale[t].result.length - 1,
+                                        r = e.globals.gridWidth / n + 0.1,
+                                        o = r + e.config.xaxis.labels.offsetX,
+                                        l = e.globals.xLabelFormatter,
+                                        h = e.globals.yAxisScale[t].result.slice(),
+                                        c = e.globals.invertedTimelineLabels;
+                                    c.length > 0 && ((this.xaxisLabels = c.slice()), (n = (h = c.slice()).length)), e.config.yaxis[t] && e.config.yaxis[t].reversed && h.reverse();
+                                    var d = c.length;
+                                    if (e.config.xaxis.labels.show)
+                                        for (var u = d ? 0 : n; d ? u < d - 1 : u >= 0; d ? u++ : u--) {
+                                            var f = h[u];
+                                            f = l(f, u);
+                                            var g = e.globals.gridWidth + e.globals.padHorizontal - (o - r + e.config.xaxis.labels.offsetX);
+                                            if (c.length) {
+                                                var p = this.axesUtils.getLabel(h, c, g, u, this.drawnLabels);
+                                                (g = p.x), (f = p.text), this.drawnLabels.push(p.text);
+                                            }
+                                            var x = i.drawText({
+                                                x: g,
+                                                y: this.xAxisoffX + e.config.xaxis.labels.offsetY + 30,
+                                                text: "",
+                                                textAnchor: "middle",
+                                                foreColor: Array.isArray(this.xaxisForeColors) ? this.xaxisForeColors[t] : this.xaxisForeColors,
+                                                fontSize: this.xaxisFontSize,
+                                                fontFamily: this.xaxisFontFamily,
+                                                cssClass: "apexcharts-xaxis-label " + e.config.xaxis.labels.style.cssClass,
+                                            });
+                                            s.add(x), x.tspan(f);
+                                            var v = document.createElementNS(e.globals.SVGNS, "title");
+                                            (v.textContent = f), x.node.appendChild(v), (o += r);
+                                        }
+                                    if (void 0 !== e.config.xaxis.title.text) {
+                                        var b = i.group({ class: "apexcharts-xaxis-title apexcharts-yaxis-title-inversed" }),
+                                            y = i.drawText({
+                                                x: e.globals.gridWidth / 2,
+                                                y: this.xAxisoffX + parseInt(this.xaxisFontSize) + parseInt(e.config.xaxis.title.style.fontSize) + 20,
+                                                text: e.config.xaxis.title.text,
+                                                textAnchor: "middle",
+                                                fontSize: e.config.xaxis.title.style.fontSize,
+                                                fontFamily: e.config.xaxis.title.style.fontFamily,
+                                                cssClass: "apexcharts-xaxis-title-text " + e.config.xaxis.title.style.cssClass,
+                                            });
+                                        b.add(y), a.add(b);
+                                    }
+                                    var w = e.config.yaxis[t].axisBorder;
+                                    if (w.show) {
+                                        var k = i.drawLine(e.globals.padHorizontal + w.offsetX, 1 + w.offsetY, e.globals.padHorizontal + w.offsetX, e.globals.gridHeight + w.offsetY, w.color);
+                                        a.add(k);
+                                    }
+                                    return a;
+                                },
+                            },
+                            {
+                                key: "yAxisTitleRotate",
+                                value: function (t, e) {
+                                    var i = this.w,
+                                        a = new m(this.ctx),
+                                        s = { width: 0, height: 0 },
+                                        n = { width: 0, height: 0 },
+                                        r = i.globals.dom.baseEl.querySelector(" .apexcharts-yaxis[rel='".concat(t, "'] .apexcharts-yaxis-texts-g"));
+                                    null !== r && (s = r.getBoundingClientRect());
+                                    var o = i.globals.dom.baseEl.querySelector(".apexcharts-yaxis[rel='".concat(t, "'] .apexcharts-yaxis-title text"));
+                                    if ((null !== o && (n = o.getBoundingClientRect()), null !== o)) {
+                                        var l = this.xPaddingForYAxisTitle(t, s, n, e);
+                                        o.setAttribute("x", l.xPos - (e ? 10 : 0));
+                                    }
+                                    if (null !== o) {
+                                        var h = a.rotateAroundCenter(o);
+                                        e
+                                            ? o.setAttribute("transform", "rotate(".concat(i.config.yaxis[t].title.rotate, " ").concat(h.x, " ").concat(h.y, ")"))
+                                            : o.setAttribute("transform", "rotate(-".concat(i.config.yaxis[t].title.rotate, " ").concat(h.x, " ").concat(h.y, ")"));
+                                    }
+                                },
+                            },
+                            {
+                                key: "xPaddingForYAxisTitle",
+                                value: function (t, e, i, a) {
+                                    var s = this.w,
+                                        n = 0,
+                                        r = 0,
+                                        o = 10;
+                                    return void 0 === s.config.yaxis[t].title.text || t < 0
+                                        ? { xPos: r, padd: 0 }
+                                        : (a
+                                              ? ((r = e.width + s.config.yaxis[t].title.offsetX + i.width / 2 + o / 2), 0 === (n += 1) && (r -= o / 2))
+                                              : ((r = -1 * e.width + s.config.yaxis[t].title.offsetX + o / 2 + i.width / 2), s.globals.isBarHorizontal && ((o = 25), (r = -1 * e.width - s.config.yaxis[t].title.offsetX - o))),
+                                          { xPos: r, padd: o });
+                                },
+                            },
+                            {
+                                key: "setYAxisXPosition",
+                                value: function (t, e) {
+                                    var i = this.w,
+                                        a = 0,
+                                        s = 0,
+                                        n = 21,
+                                        r = 1;
+                                    i.config.yaxis.length > 1 && (this.multipleYs = !0),
+                                        i.config.yaxis.map(function (o, l) {
+                                            var h = i.globals.ignoreYAxisIndexes.indexOf(l) > -1 || !o.show || o.floating || 0 === t[l].width,
+                                                c = t[l].width + e[l].width;
+                                            o.opposite
+                                                ? i.globals.isBarHorizontal
+                                                    ? ((s = i.globals.gridWidth + i.globals.translateX - 1), (i.globals.translateYAxisX[l] = s - o.labels.offsetX))
+                                                    : ((s = i.globals.gridWidth + i.globals.translateX + r), h || (r = r + c + 20), (i.globals.translateYAxisX[l] = s - o.labels.offsetX + 20))
+                                                : ((a = i.globals.translateX - n), h || (n = n + c + 20), (i.globals.translateYAxisX[l] = a + o.labels.offsetX));
+                                        });
+                                },
+                            },
+                            {
+                                key: "setYAxisTextAlignments",
+                                value: function () {
+                                    var t = this.w,
+                                        e = t.globals.dom.baseEl.querySelectorAll(".apexcharts-yaxis");
+                                    (e = p.listToArray(e)).forEach(function (e, i) {
+                                        var a = t.config.yaxis[i];
+                                        if (void 0 !== a.labels.align) {
+                                            var s = t.globals.dom.baseEl.querySelector(".apexcharts-yaxis[rel='".concat(i, "'] .apexcharts-yaxis-texts-g")),
+                                                n = t.globals.dom.baseEl.querySelectorAll(".apexcharts-yaxis[rel='".concat(i, "'] .apexcharts-yaxis-label"));
+                                            n = p.listToArray(n);
+                                            var r = s.getBoundingClientRect();
+                                            "left" === a.labels.align
+                                                ? (n.forEach(function (t, e) {
+                                                      t.setAttribute("text-anchor", "start");
+                                                  }),
+                                                  a.opposite || s.setAttribute("transform", "translate(-".concat(r.width, ", 0)")))
+                                                : "center" === a.labels.align
+                                                ? (n.forEach(function (t, e) {
+                                                      t.setAttribute("text-anchor", "middle");
+                                                  }),
+                                                  s.setAttribute("transform", "translate(".concat((r.width / 2) * (a.opposite ? 1 : -1), ", 0)")))
+                                                : "right" === a.labels.align &&
+                                                  (n.forEach(function (t, e) {
+                                                      t.setAttribute("text-anchor", "end");
+                                                  }),
+                                                  a.opposite && s.setAttribute("transform", "translate(".concat(r.width, ", 0)")));
+                                        }
+                                    });
+                                },
+                            },
+                        ]),
+                        t
+                    );
+                })(),
+                V = (function () {
+                    function t(e) {
+                        n(this, t), (this.ctx = e), (this.w = e.w), (this.lgRect = {}), (this.yAxisWidth = 0), (this.xAxisHeight = 0), (this.isSparkline = this.w.config.chart.sparkline.enabled), (this.xPadRight = 0), (this.xPadLeft = 0);
+                    }
+                    return (
+                        o(t, [
+                            {
+                                key: "plotCoords",
+                                value: function () {
+                                    var t = this.w,
+                                        e = t.globals,
+                                        i = this.getLegendsRect();
+                                    e.axisCharts ? this.setGridCoordsForAxisCharts(i) : this.setGridCoordsForNonAxisCharts(i),
+                                        this.titleSubtitleOffset(),
+                                        (e.gridHeight = e.gridHeight - t.config.grid.padding.top - t.config.grid.padding.bottom),
+                                        (e.gridWidth = e.gridWidth - t.config.grid.padding.left - t.config.grid.padding.right - this.xPadRight - this.xPadLeft),
+                                        (e.translateX = e.translateX + t.config.grid.padding.left + this.xPadLeft),
+                                        (e.translateY = e.translateY + t.config.grid.padding.top);
+                                },
+                            },
+                            {
+                                key: "conditionalChecksForAxisCoords",
+                                value: function (t, e) {
+                                    var i = this.w;
+                                    (this.xAxisHeight = (t.height + e.height) * i.globals.LINE_HEIGHT_RATIO + 15),
+                                        (this.xAxisWidth = t.width),
+                                        this.xAxisHeight - e.height > i.config.xaxis.labels.maxHeight && (this.xAxisHeight = i.config.xaxis.labels.maxHeight),
+                                        i.config.xaxis.labels.minHeight && this.xAxisHeight < i.config.xaxis.labels.minHeight && (this.xAxisHeight = i.config.xaxis.labels.minHeight),
+                                        i.config.xaxis.floating && (this.xAxisHeight = 0),
+                                        i.globals.isBarHorizontal ? (this.yAxisWidth = i.globals.yLabelsCoords[0].width + i.globals.yTitleCoords[0].width + 15) : (this.yAxisWidth = this.getTotalYAxisWidth());
+                                    var a = 0,
+                                        s = 0;
+                                    i.config.yaxis.forEach(function (t) {
+                                        (a += t.labels.minWidth), (s += t.labels.maxWidth);
+                                    }),
+                                        this.yAxisWidth < a && (this.yAxisWidth = a),
+                                        this.yAxisWidth > s && (this.yAxisWidth = s);
+                                },
+                            },
+                            {
+                                key: "setGridCoordsForAxisCharts",
+                                value: function (t) {
+                                    var e = this.w,
+                                        i = e.globals,
+                                        a = this.getyAxisLabelsCoords(),
+                                        s = this.getxAxisLabelsCoords(),
+                                        n = this.getyAxisTitleCoords(),
+                                        r = this.getxAxisTitleCoords();
+                                    (e.globals.yLabelsCoords = []),
+                                        (e.globals.yTitleCoords = []),
+                                        e.config.yaxis.map(function (t, i) {
+                                            e.globals.yLabelsCoords.push({ width: a[i].width, index: i }), e.globals.yTitleCoords.push({ width: n[i].width, index: i });
+                                        }),
+                                        this.conditionalChecksForAxisCoords(s, r),
+                                        (i.translateXAxisY = e.globals.rotateXLabels ? this.xAxisHeight / 8 : -4),
+                                        (i.translateXAxisX = e.globals.rotateXLabels && e.globals.isXNumeric && e.config.xaxis.labels.rotate <= -45 ? -this.xAxisWidth / 4 : 0),
+                                        e.globals.isBarHorizontal && ((i.rotateXLabels = !1), (i.translateXAxisY = (parseInt(e.config.xaxis.labels.style.fontSize) / 1.5) * -1)),
+                                        (i.translateXAxisY = i.translateXAxisY + e.config.xaxis.labels.offsetY),
+                                        (i.translateXAxisX = i.translateXAxisX + e.config.xaxis.labels.offsetX);
+                                    var o = this.yAxisWidth,
+                                        l = this.xAxisHeight;
+                                    (i.xAxisLabelsHeight = this.xAxisHeight), (i.xAxisHeight = this.xAxisHeight);
+                                    var h = 10;
+                                    switch (
+                                        ((e.config.grid.show && "radar" !== e.config.chart.type) || ((o = 0), (l = 35)),
+                                        this.isSparkline && ((t = { height: 0, width: 0 }), (l = 0), (o = 0), (h = 0)),
+                                        this.additionalPaddingXLabels(s),
+                                        e.config.legend.position)
+                                    ) {
+                                        case "bottom":
+                                            (i.translateY = h), (i.translateX = o), (i.gridHeight = i.svgHeight - t.height - l - (this.isSparkline ? 0 : e.globals.rotateXLabels ? 10 : 15)), (i.gridWidth = i.svgWidth - o);
+                                            break;
+                                        case "top":
+                                            (i.translateY = t.height + h), (i.translateX = o), (i.gridHeight = i.svgHeight - t.height - l - (this.isSparkline ? 0 : e.globals.rotateXLabels ? 10 : 15)), (i.gridWidth = i.svgWidth - o);
+                                            break;
+                                        case "left":
+                                            (i.translateY = h), (i.translateX = t.width + o), (i.gridHeight = i.svgHeight - l - 12), (i.gridWidth = i.svgWidth - t.width - o);
+                                            break;
+                                        case "right":
+                                            (i.translateY = h), (i.translateX = o), (i.gridHeight = i.svgHeight - l - 12), (i.gridWidth = i.svgWidth - t.width - o - 5);
+                                            break;
+                                        default:
+                                            throw new Error("Legend position not supported");
+                                    }
+                                    this.setGridXPosForDualYAxis(n, a), new B(this.ctx).setYAxisXPosition(a, n);
+                                },
+                            },
+                            {
+                                key: "setGridCoordsForNonAxisCharts",
+                                value: function (t) {
+                                    var e = this.w,
+                                        i = e.globals,
+                                        a = 0;
+                                    e.config.legend.show && !e.config.legend.floating && (a = 20);
+                                    var s = 10,
+                                        n = 0;
+                                    if (
+                                        ("pie" === e.config.chart.type || "donut" === e.config.chart.type
+                                            ? ((s += e.config.plotOptions.pie.offsetY), (n += e.config.plotOptions.pie.offsetX))
+                                            : "radialBar" === e.config.chart.type && ((s += e.config.plotOptions.radialBar.offsetY), (n += e.config.plotOptions.radialBar.offsetX)),
+                                        !e.config.legend.show)
+                                    )
+                                        return (i.gridHeight = i.svgHeight - 35), (i.gridWidth = i.gridHeight), (i.translateY = s - 10), void (i.translateX = n + (i.svgWidth - i.gridWidth) / 2);
+                                    switch (e.config.legend.position) {
+                                        case "bottom":
+                                            (i.gridHeight = i.svgHeight - t.height - 35), (i.gridWidth = i.gridHeight), (i.translateY = s - 20), (i.translateX = n + (i.svgWidth - i.gridWidth) / 2);
+                                            break;
+                                        case "top":
+                                            (i.gridHeight = i.svgHeight - t.height - 35), (i.gridWidth = i.gridHeight), (i.translateY = t.height + s + 10), (i.translateX = n + (i.svgWidth - i.gridWidth) / 2);
+                                            break;
+                                        case "left":
+                                            (i.gridWidth = i.svgWidth - t.width - a), (i.gridHeight = i.gridWidth), (i.translateY = s), (i.translateX = n + t.width + a);
+                                            break;
+                                        case "right":
+                                            (i.gridWidth = i.svgWidth - t.width - a - 5), (i.gridHeight = i.gridWidth), (i.translateY = s), (i.translateX = n + 10);
+                                            break;
+                                        default:
+                                            throw new Error("Legend position not supported");
+                                    }
+                                },
+                            },
+                            {
+                                key: "setGridXPosForDualYAxis",
+                                value: function (t, e) {
+                                    var i = this.w;
+                                    i.config.yaxis.map(function (a, s) {
+                                        -1 === i.globals.ignoreYAxisIndexes.indexOf(s) &&
+                                            !i.config.yaxis[s].floating &&
+                                            i.config.yaxis[s].show &&
+                                            a.opposite &&
+                                            (i.globals.translateX = i.globals.translateX - (e[s].width + t[s].width) - parseInt(i.config.yaxis[s].labels.style.fontSize) / 1.2 - 12);
+                                    });
+                                },
+                            },
+                            {
+                                key: "additionalPaddingXLabels",
+                                value: function (t) {
+                                    var e = this,
+                                        i = this.w;
+                                    if (("category" === i.config.xaxis.type && i.globals.isBarHorizontal) || "numeric" === i.config.xaxis.type || "datetime" === i.config.xaxis.type) {
+                                        var a = i.globals.isXNumeric;
+                                        i.config.yaxis.forEach(function (s, n) {
+                                            var r;
+                                            (!s.show || s.floating || -1 !== i.globals.collapsedSeriesIndices.indexOf(n) || a || (s.opposite && i.globals.isBarHorizontal)) &&
+                                                (((a && i.globals.isMultipleYAxis && -1 !== i.globals.collapsedSeriesIndices.indexOf(n)) || (i.globals.isBarHorizontal && s.opposite)) &&
+                                                    ((r = t), i.config.grid.padding.left < r.width && (e.xPadLeft = r.width / 2 + 1)),
+                                                ((!i.globals.isBarHorizontal && s.opposite && -1 !== i.globals.collapsedSeriesIndices.indexOf(n)) || (a && !i.globals.isMultipleYAxis)) &&
+                                                    (function (t) {
+                                                        e.timescaleLabels
+                                                            ? e.timescaleLabels[e.timescaleLabels.length - 1].position + t.width > i.globals.gridWidth
+                                                                ? (i.globals.skipLastTimelinelabel = !0)
+                                                                : (i.globals.skipLastTimelinelabel = !1)
+                                                            : "datetime" !== i.config.xaxis.type && i.config.grid.padding.right < t.width && (e.xPadRight = t.width / 2 + 1);
+                                                    })(t));
+                                        });
+                                    }
+                                },
+                            },
+                            {
+                                key: "titleSubtitleOffset",
+                                value: function () {
+                                    var t = this.w,
+                                        e = t.globals,
+                                        i = this.isSparkline || !t.globals.axisCharts ? 0 : 10;
+                                    void 0 !== t.config.title.text ? (i += t.config.title.margin) : (i += this.isSparkline || !t.globals.axisCharts ? 0 : 5),
+                                        void 0 !== t.config.subtitle.text ? (i += t.config.subtitle.margin) : (i += this.isSparkline || !t.globals.axisCharts ? 0 : 5),
+                                        t.config.legend.show && "bottom" === t.config.legend.position && !t.config.legend.floating && (t.config.series.length > 1 || !t.globals.axisCharts || t.config.legend.showForSingleSeries) && (i += 10);
+                                    var a = this.getTitleSubtitleCoords("title"),
+                                        s = this.getTitleSubtitleCoords("subtitle");
+                                    (e.gridHeight = e.gridHeight - a.height - s.height - i), (e.translateY = e.translateY + a.height + s.height + i);
+                                },
+                            },
+                            {
+                                key: "getTotalYAxisWidth",
+                                value: function () {
+                                    var t = this.w,
+                                        e = 0,
+                                        i = 10,
+                                        a = function (e) {
+                                            return t.globals.ignoreYAxisIndexes.indexOf(e) > -1;
+                                        };
+                                    return (
+                                        t.globals.yLabelsCoords.map(function (s, n) {
+                                            var r = t.config.yaxis[n].floating;
+                                            s.width > 0 && !r ? ((e = e + s.width + i), a(n) && (e = e - s.width - i)) : (e += r || !t.config.yaxis[n].show ? 0 : 5);
+                                        }),
+                                        t.globals.yTitleCoords.map(function (s, n) {
+                                            var r = t.config.yaxis[n].floating;
+                                            (i = parseInt(t.config.yaxis[n].title.style.fontSize)), s.width > 0 && !r ? ((e = e + s.width + i), a(n) && (e = e - s.width - i)) : (e += r || !t.config.yaxis[n].show ? 0 : 5);
+                                        }),
+                                        e
+                                    );
+                                },
+                            },
+                            {
+                                key: "getxAxisTimeScaleLabelsCoords",
+                                value: function () {
+                                    var t,
+                                        e = this.w;
+                                    (this.timescaleLabels = e.globals.timelineLabels.slice()), e.globals.isBarHorizontal && "datetime" === e.config.xaxis.type && (this.timescaleLabels = e.globals.invertedTimelineLabels.slice());
+                                    var i = this.timescaleLabels.map(function (t) {
+                                            return t.value;
+                                        }),
+                                        a = i.reduce(function (t, e) {
+                                            return void 0 === t ? (console.error("You have possibly supplied invalid Date format. Please supply a valid JavaScript Date"), 0) : t.length > e.length ? t : e;
+                                        }, 0);
+                                    return (
+                                        1.05 * (t = new m(this.ctx).getTextRects(a, e.config.xaxis.labels.style.fontSize)).width * i.length > e.globals.gridWidth && 0 !== e.config.xaxis.labels.rotate && (e.globals.overlappingXLabels = !0),
+                                        t
+                                    );
+                                },
+                            },
+                            {
+                                key: "getxAxisLabelsCoords",
+                                value: function () {
+                                    var t,
+                                        e = this.w,
+                                        i = e.globals.labels.slice();
+                                    if (e.globals.timelineLabels.length > 0) {
+                                        var a = this.getxAxisTimeScaleLabelsCoords();
+                                        t = { width: a.width, height: a.height };
+                                    } else {
+                                        var s = "left" !== e.config.legend.position || "right" !== e.config.legend.position || e.config.legend.floating ? 0 : this.lgRect.width,
+                                            n = e.globals.xLabelFormatter,
+                                            r = i.reduce(function (t, e) {
+                                                return t.length > e.length ? t : e;
+                                            }, 0);
+                                        e.globals.isBarHorizontal &&
+                                            (r = e.globals.yAxisScale[0].result.reduce(function (t, e) {
+                                                return t.length > e.length ? t : e;
+                                            }, 0)),
+                                            (r = new _(this.ctx).xLabelFormat(n, r));
+                                        var o = new m(this.ctx),
+                                            l = o.getTextRects(r, e.config.xaxis.labels.style.fontSize);
+                                        (t = { width: l.width, height: l.height }).width * i.length > e.globals.svgWidth - s - this.yAxisWidth && 0 !== e.config.xaxis.labels.rotate
+                                            ? e.globals.isBarHorizontal ||
+                                              ((e.globals.rotateXLabels = !0),
+                                              (l = o.getTextRects(r, e.config.xaxis.labels.style.fontSize, e.config.xaxis.labels.style.fontFamily, "rotate(".concat(e.config.xaxis.labels.rotate, " 0 0)"), !1)),
+                                              (t.height = l.height / 1.66))
+                                            : (e.globals.rotateXLabels = !1);
+                                    }
+                                    return e.config.xaxis.labels.show || (t = { width: 0, height: 0 }), { width: t.width, height: t.height };
+                                },
+                            },
+                            {
+                                key: "getyAxisLabelsCoords",
+                                value: function () {
+                                    var t = this,
+                                        e = this.w,
+                                        i = [],
+                                        a = 10;
+                                    return (
+                                        e.config.yaxis.map(function (s, n) {
+                                            if (s.show && s.labels.show && e.globals.yAxisScale[n].result.length) {
+                                                var r = e.globals.yLabelFormatters[n],
+                                                    o = r(e.globals.yAxisScale[n].niceMax, -1);
+                                                if (((void 0 !== o && 0 !== o.length) || (o = e.globals.yAxisScale[n].niceMax), e.globals.isBarHorizontal))
+                                                    (a = 0),
+                                                        (o = r(
+                                                            (o = e.globals.labels.slice().reduce(function (t, e) {
+                                                                return t.length > e.length ? t : e;
+                                                            }, 0)),
+                                                            -1
+                                                        ));
+                                                var l = new m(t.ctx).getTextRects(o, s.labels.style.fontSize);
+                                                i.push({ width: l.width + a, height: l.height });
+                                            } else i.push({ width: 0, height: 0 });
+                                        }),
+                                        i
+                                    );
+                                },
+                            },
+                            {
+                                key: "getxAxisTitleCoords",
+                                value: function () {
+                                    var t = this.w,
+                                        e = 0,
+                                        i = 0;
+                                    if (void 0 !== t.config.xaxis.title.text) {
+                                        var a = new m(this.ctx).getTextRects(t.config.xaxis.title.text, t.config.xaxis.title.style.fontSize);
+                                        (e = a.width), (i = a.height);
+                                    }
+                                    return { width: e, height: i };
+                                },
+                            },
+                            {
+                                key: "getyAxisTitleCoords",
+                                value: function () {
+                                    var t = this,
+                                        e = this.w,
+                                        i = [];
+                                    return (
+                                        e.config.yaxis.map(function (e, a) {
+                                            if (e.show && void 0 !== e.title.text) {
+                                                var s = new m(t.ctx).getTextRects(e.title.text, e.title.style.fontSize, e.title.style.fontFamily, "rotate(-90 0 0)", !1);
+                                                i.push({ width: s.width, height: s.height });
+                                            } else i.push({ width: 0, height: 0 });
+                                        }),
+                                        i
+                                    );
+                                },
+                            },
+                            {
+                                key: "getTitleSubtitleCoords",
+                                value: function (t) {
+                                    var e = this.w,
+                                        i = 0,
+                                        a = 0,
+                                        s = "title" === t ? e.config.title.floating : e.config.subtitle.floating,
+                                        n = e.globals.dom.baseEl.querySelector(".apexcharts-".concat(t, "-text"));
+                                    if (null !== n && !s) {
+                                        var r = n.getBoundingClientRect();
+                                        (i = r.width), (a = e.globals.axisCharts ? r.height + 5 : r.height);
+                                    }
+                                    return { width: i, height: a };
+                                },
+                            },
+                            {
+                                key: "getLegendsRect",
+                                value: function () {
+                                    var t = this.w,
+                                        e = t.globals.dom.baseEl.querySelector(".apexcharts-legend"),
+                                        i = Object.assign({}, p.getBoundingClientRect(e));
+                                    return (
+                                        null !== e && !t.config.legend.floating && t.config.legend.show
+                                            ? (this.lgRect = { x: i.x, y: i.y, height: i.height, width: 0 === i.height ? 0 : i.width })
+                                            : (this.lgRect = { x: 0, y: 0, height: 0, width: 0 }),
+                                        this.lgRect
+                                    );
+                                },
+                            },
+                        ]),
+                        t
+                    );
+                })(),
+                G = (function () {
+                    function t(e) {
+                        n(this, t), (this.ctx = e), (this.w = e.w);
+                    }
+                    return (
+                        o(t, [
+                            {
+                                key: "getAllSeriesEls",
+                                value: function () {
+                                    return this.w.globals.dom.baseEl.querySelectorAll(".apexcharts-series");
+                                },
+                            },
+                            {
+                                key: "getSeriesByName",
+                                value: function (t) {
+                                    return this.w.globals.dom.baseEl.querySelector("[seriesName='".concat(p.escapeString(t), "']"));
+                                },
+                            },
+                            {
+                                key: "addCollapsedClassToSeries",
+                                value: function (t, e) {
+                                    var i = this.w;
+                                    function a(i) {
+                                        for (var a = 0; a < i.length; a++) i[a].index === e && t.node.classList.add("apexcharts-series-collapsed");
+                                    }
+                                    a(i.globals.collapsedSeries), a(i.globals.ancillaryCollapsedSeries);
+                                },
+                            },
+                            {
+                                key: "resetSeries",
+                                value: function () {
+                                    var t = !(arguments.length > 0 && void 0 !== arguments[0]) || arguments[0],
+                                        e = this.w,
+                                        i = e.globals.initialSeries.slice();
+                                    (e.config.series = i),
+                                        (e.globals.collapsedSeries = []),
+                                        (e.globals.ancillaryCollapsedSeries = []),
+                                        (e.globals.collapsedSeriesIndices = []),
+                                        (e.globals.ancillaryCollapsedSeriesIndices = []),
+                                        (e.globals.previousPaths = []),
+                                        t && this.ctx._updateSeries(i, e.config.chart.animations.dynamicAnimation.enabled);
+                                },
+                            },
+                            {
+                                key: "toggleSeriesOnHover",
+                                value: function (t, e) {
+                                    var i = this.w,
+                                        a = i.globals.dom.baseEl.querySelectorAll(".apexcharts-series");
+                                    if ("mousemove" === t.type) {
+                                        var s = parseInt(e.getAttribute("rel")) - 1,
+                                            n = null;
+                                        n =
+                                            i.globals.axisCharts || "radialBar" === i.config.chart.type
+                                                ? i.globals.axisCharts
+                                                    ? i.globals.dom.baseEl.querySelector(".apexcharts-series[data\\:realIndex='".concat(s, "']"))
+                                                    : i.globals.dom.baseEl.querySelector(".apexcharts-series[rel='".concat(s + 1, "']"))
+                                                : i.globals.dom.baseEl.querySelector(".apexcharts-series[rel='".concat(s + 1, "'] path"));
+                                        for (var r = 0; r < a.length; r++) a[r].classList.add("legend-mouseover-inactive");
+                                        null !== n && (i.globals.axisCharts || n.parentNode.classList.remove("legend-mouseover-inactive"), n.classList.remove("legend-mouseover-inactive"));
+                                    } else if ("mouseout" === t.type) for (var o = 0; o < a.length; o++) a[o].classList.remove("legend-mouseover-inactive");
+                                },
+                            },
+                            {
+                                key: "highlightRangeInSeries",
+                                value: function (t, e) {
+                                    var i = this.w,
+                                        a = i.globals.dom.baseEl.querySelectorAll(".apexcharts-heatmap-rect"),
+                                        s = function () {
+                                            for (var t = 0; t < a.length; t++) a[t].classList.remove("legend-mouseover-inactive");
+                                        };
+                                    if ("mousemove" === t.type) {
+                                        var n = parseInt(e.getAttribute("rel")) - 1;
+                                        s(),
+                                            (function () {
+                                                for (var t = 0; t < a.length; t++) a[t].classList.add("legend-mouseover-inactive");
+                                            })(),
+                                            (function (t) {
+                                                for (var e = 0; e < a.length; e++) {
+                                                    var i = parseInt(a[e].getAttribute("val"));
+                                                    i >= t.from && i <= t.to && a[e].classList.remove("legend-mouseover-inactive");
+                                                }
+                                            })(i.config.plotOptions.heatmap.colorScale.ranges[n]);
+                                    } else "mouseout" === t.type && s();
+                                },
+                            },
+                            {
+                                key: "getActiveSeriesIndex",
+                                value: function () {
+                                    var t = this.w,
+                                        e = 0;
+                                    if (t.globals.series.length > 1)
+                                        for (
+                                            var i = t.globals.series.map(function (e, i) {
+                                                    return e.length > 0 && "bar" !== t.config.series[i].type && "column" !== t.config.series[i].type ? i : -1;
+                                                }),
+                                                a = 0;
+                                            a < i.length;
+                                            a++
+                                        )
+                                            if (-1 !== i[a]) {
+                                                e = i[a];
+                                                break;
+                                            }
+                                    return e;
+                                },
+                            },
+                            {
+                                key: "getActiveConfigSeriesIndex",
+                                value: function () {
+                                    var t = this.w,
+                                        e = 0;
+                                    if (t.config.series.length > 1)
+                                        for (
+                                            var i = t.config.series.map(function (t, e) {
+                                                    return t.data && t.data.length > 0 ? e : -1;
+                                                }),
+                                                a = 0;
+                                            a < i.length;
+                                            a++
+                                        )
+                                            if (-1 !== i[a]) {
+                                                e = i[a];
+                                                break;
+                                            }
+                                    return e;
+                                },
+                            },
+                            {
+                                key: "getPreviousPaths",
+                                value: function () {
+                                    var t = this.w;
+                                    function e(e, i, a) {
+                                        for (var s = e[i].childNodes, n = { type: a, paths: [], realIndex: e[i].getAttribute("data:realIndex") }, r = 0; r < s.length; r++)
+                                            if (s[r].hasAttribute("pathTo")) {
+                                                var o = s[r].getAttribute("pathTo");
+                                                n.paths.push({ d: o });
+                                            }
+                                        t.globals.previousPaths.push(n);
+                                    }
+                                    t.globals.previousPaths = [];
+                                    var i = t.globals.dom.baseEl.querySelectorAll(".apexcharts-line-series .apexcharts-series");
+                                    if (i.length > 0) for (var a = i.length - 1; a >= 0; a--) e(i, a, "line");
+                                    var s = t.globals.dom.baseEl.querySelectorAll(".apexcharts-area-series .apexcharts-series");
+                                    if (s.length > 0) for (var n = s.length - 1; n >= 0; n--) e(s, n, "area");
+                                    var r = t.globals.dom.baseEl.querySelectorAll(".apexcharts-bar-series .apexcharts-series");
+                                    if (r.length > 0) for (var o = 0; o < r.length; o++) e(r, o, "bar");
+                                    var l = t.globals.dom.baseEl.querySelectorAll(".apexcharts-candlestick-series .apexcharts-series");
+                                    if (l.length > 0) for (var h = 0; h < l.length; h++) e(l, h, "candlestick");
+                                    var c = t.globals.dom.baseEl.querySelectorAll(".apexcharts-radar-series .apexcharts-series");
+                                    if (c.length > 0) for (var d = 0; d < c.length; d++) e(c, d, "radar");
+                                    var u = t.globals.dom.baseEl.querySelectorAll(".apexcharts-bubble-series .apexcharts-series");
+                                    if (u.length > 0)
+                                        for (var f = 0; f < u.length; f++) {
+                                            for (var g = t.globals.dom.baseEl.querySelectorAll(".apexcharts-bubble-series .apexcharts-series[data\\:realIndex='".concat(f, "'] circle")), p = [], x = 0; x < g.length; x++)
+                                                p.push({ x: g[x].getAttribute("cx"), y: g[x].getAttribute("cy"), r: g[x].getAttribute("r") });
+                                            t.globals.previousPaths.push(p);
+                                        }
+                                    var v = t.globals.dom.baseEl.querySelectorAll(".apexcharts-scatter-series .apexcharts-series");
+                                    if (v.length > 0)
+                                        for (var m = 0; m < v.length; m++) {
+                                            for (var b = t.globals.dom.baseEl.querySelectorAll(".apexcharts-scatter-series .apexcharts-series[data\\:realIndex='".concat(m, "'] circle")), y = [], w = 0; w < b.length; w++)
+                                                y.push({ x: b[w].getAttribute("cx"), y: b[w].getAttribute("cy"), r: b[w].getAttribute("r") });
+                                            t.globals.previousPaths.push(y);
+                                        }
+                                    var k = t.globals.dom.baseEl.querySelectorAll(".apexcharts-heatmap .apexcharts-series");
+                                    if (k.length > 0)
+                                        for (var S = 0; S < k.length; S++) {
+                                            for (var A = t.globals.dom.baseEl.querySelectorAll(".apexcharts-heatmap .apexcharts-series[data\\:realIndex='".concat(S, "'] rect")), C = [], L = 0; L < A.length; L++)
+                                                C.push({ color: A[L].getAttribute("color") });
+                                            t.globals.previousPaths.push(C);
+                                        }
+                                    t.globals.axisCharts || (t.globals.previousPaths = t.globals.series);
+                                },
+                            },
+                            {
+                                key: "handleNoData",
+                                value: function () {
+                                    var t = this.w,
+                                        e = t.config.noData,
+                                        i = new m(this.ctx),
+                                        a = t.globals.svgWidth / 2,
+                                        s = t.globals.svgHeight / 2,
+                                        n = "middle";
+                                    if (
+                                        ((t.globals.noData = !0),
+                                        (t.globals.animationEnded = !0),
+                                        "left" === e.align ? ((a = 10), (n = "start")) : "right" === e.align && ((a = t.globals.svgWidth - 10), (n = "end")),
+                                        "top" === e.verticalAlign ? (s = 50) : "bottom" === e.verticalAlign && (s = t.globals.svgHeight - 50),
+                                        (a += e.offsetX),
+                                        (s = s + parseInt(e.style.fontSize) + 2),
+                                        void 0 !== e.text && "" !== e.text)
+                                    ) {
+                                        var r = i.drawText({ x: a, y: s, text: e.text, textAnchor: n, fontSize: e.style.fontSize, fontFamily: e.style.fontFamily, foreColor: e.style.color, opacity: 1, class: "apexcharts-text-nodata" });
+                                        r.node.setAttribute("class", "apexcharts-title-text"), t.globals.dom.Paper.add(r);
+                                    }
+                                },
+                            },
+                            {
+                                key: "setNullSeriesToZeroValues",
+                                value: function (t) {
+                                    for (var e = this.w, i = 0; i < t.length; i++) if (0 === t[i].length) for (var a = 0; a < t[e.globals.maxValsInArrayIndex].length; a++) t[i].push(0);
+                                    return t;
+                                },
+                            },
+                            {
+                                key: "hasAllSeriesEqualX",
+                                value: function () {
+                                    for (var t = !0, e = this.w, i = this.filteredSeriesX(), a = 0; a < i.length - 1; a++)
+                                        if (i[a][0] !== i[a + 1][0]) {
+                                            t = !1;
+                                            break;
+                                        }
+                                    return (e.globals.allSeriesHasEqualX = t), t;
+                                },
+                            },
+                            {
+                                key: "filteredSeriesX",
+                                value: function () {
+                                    var t = this.w.globals.seriesX.map(function (t, e) {
+                                        return t.length > 0 ? t : [];
+                                    });
+                                    return t;
+                                },
+                            },
+                        ]),
+                        t
+                    );
+                })(),
+                j = (function () {
+                    function t(e, i) {
+                        n(this, t), (this.ctx = e), (this.w = e.w), (this.onLegendClick = this.onLegendClick.bind(this)), (this.onLegendHovered = this.onLegendHovered.bind(this));
+                    }
+                    return (
+                        o(t, [
+                            {
+                                key: "init",
+                                value: function () {
+                                    var t = this.w,
+                                        e = t.globals,
+                                        i = t.config;
+                                    if (((i.legend.showForSingleSeries && 1 === e.series.length) || e.series.length > 1 || !e.axisCharts) && i.legend.show) {
+                                        for (; e.dom.elLegendWrap.firstChild; ) e.dom.elLegendWrap.removeChild(e.dom.elLegendWrap.firstChild);
+                                        this.drawLegends(),
+                                            p.isIE11() ? document.getElementsByTagName("head")[0].appendChild(this.getLegendStyles()) : this.appendToForeignObject(),
+                                            "bottom" === i.legend.position || "top" === i.legend.position ? this.legendAlignHorizontal() : ("right" !== i.legend.position && "left" !== i.legend.position) || this.legendAlignVertical();
+                                    }
+                                },
+                            },
+                            {
+                                key: "appendToForeignObject",
+                                value: function () {
+                                    var t = this.w.globals;
+                                    t.dom.elLegendForeign = document.createElementNS(t.SVGNS, "foreignObject");
+                                    var e = t.dom.elLegendForeign;
+                                    e.setAttribute("x", 0),
+                                        e.setAttribute("y", 0),
+                                        e.setAttribute("width", t.svgWidth),
+                                        e.setAttribute("height", t.svgHeight),
+                                        t.dom.elLegendWrap.setAttribute("xmlns", "http://www.w3.org/1999/xhtml"),
+                                        e.appendChild(t.dom.elLegendWrap),
+                                        e.appendChild(this.getLegendStyles()),
+                                        t.dom.Paper.node.insertBefore(e, t.dom.elGraphical.node);
+                                },
+                            },
+                            {
+                                key: "drawLegends",
+                                value: function () {
+                                    var t = this.w,
+                                        e = t.config.legend.fontFamily,
+                                        i = t.globals.seriesNames,
+                                        a = t.globals.colors.slice();
+                                    if ("heatmap" === t.config.chart.type) {
+                                        var s = t.config.plotOptions.heatmap.colorScale.ranges;
+                                        (i = s.map(function (t) {
+                                            return t.name ? t.name : t.from + " - " + t.to;
+                                        })),
+                                            (a = s.map(function (t) {
+                                                return t.color;
+                                            }));
+                                    }
+                                    for (var n = t.globals.legendFormatter, r = 0; r <= i.length - 1; r++) {
+                                        var o = n(i[r], { seriesIndex: r, w: t }),
+                                            l = !1,
+                                            h = !1;
+                                        if (t.globals.collapsedSeries.length > 0) for (var c = 0; c < t.globals.collapsedSeries.length; c++) t.globals.collapsedSeries[c].index === r && (l = !0);
+                                        if (t.globals.ancillaryCollapsedSeriesIndices.length > 0) for (var d = 0; d < t.globals.ancillaryCollapsedSeriesIndices.length; d++) t.globals.ancillaryCollapsedSeriesIndices[d] === r && (h = !0);
+                                        var u = document.createElement("span");
+                                        u.classList.add("apexcharts-legend-marker");
+                                        var f = t.config.legend.markers.offsetX,
+                                            g = t.config.legend.markers.offsetY,
+                                            p = t.config.legend.markers.height,
+                                            x = t.config.legend.markers.width,
+                                            v = t.config.legend.markers.strokeWidth,
+                                            b = t.config.legend.markers.strokeColor,
+                                            y = t.config.legend.markers.radius,
+                                            w = u.style;
+                                        (w.background = a[r]),
+                                            (w.color = a[r]),
+                                            (w.height = Array.isArray(p) ? parseFloat(p[r]) + "px" : parseFloat(p) + "px"),
+                                            (w.width = Array.isArray(x) ? parseFloat(x[r]) + "px" : parseFloat(x) + "px"),
+                                            (w.left = Array.isArray(f) ? f[r] : f),
+                                            (w.top = Array.isArray(g) ? g[r] : g),
+                                            (w.borderWidth = Array.isArray(v) ? v[r] : v),
+                                            (w.borderColor = Array.isArray(b) ? b[r] : b),
+                                            (w.borderRadius = Array.isArray(y) ? parseFloat(y[r]) + "px" : parseFloat(y) + "px"),
+                                            t.config.legend.markers.customHTML &&
+                                                (Array.isArray(t.config.legend.markers.customHTML) ? (u.innerHTML = t.config.legend.markers.customHTML[r]()) : (u.innerHTML = t.config.legend.markers.customHTML())),
+                                            m.setAttrs(u, { rel: r + 1, "data:collapsed": l || h }),
+                                            (l || h) && u.classList.add("inactive-legend");
+                                        var k = document.createElement("div"),
+                                            S = document.createElement("span");
+                                        S.classList.add("apexcharts-legend-text"), (S.innerHTML = o);
+                                        var C = t.config.legend.labels.useSeriesColors ? t.globals.colors[r] : t.config.legend.labels.colors;
+                                        C || (C = t.config.chart.foreColor),
+                                            (S.style.color = C),
+                                            (S.style.fontSize = parseFloat(t.config.legend.fontSize) + "px"),
+                                            (S.style.fontFamily = e || t.config.chart.fontFamily),
+                                            m.setAttrs(S, { rel: r + 1, "data:collapsed": l || h }),
+                                            k.appendChild(u),
+                                            k.appendChild(S);
+                                        var L = new A(this.ctx);
+                                        if (!t.config.legend.showForZeroSeries)
+                                            0 === L.getSeriesTotalByIndex(r) &&
+                                                L.seriesHaveSameValues(r) &&
+                                                !L.isSeriesNull(r) &&
+                                                -1 === t.globals.collapsedSeriesIndices.indexOf(r) &&
+                                                -1 === t.globals.ancillaryCollapsedSeriesIndices.indexOf(r) &&
+                                                k.classList.add("apexcharts-hidden-zero-series");
+                                        t.config.legend.showForNullSeries ||
+                                            (L.isSeriesNull(r) && -1 === t.globals.collapsedSeriesIndices.indexOf(r) && -1 === t.globals.ancillaryCollapsedSeriesIndices.indexOf(r) && k.classList.add("apexcharts-hidden-null-series")),
+                                            t.globals.dom.elLegendWrap.appendChild(k),
+                                            t.globals.dom.elLegendWrap.classList.add(t.config.legend.horizontalAlign),
+                                            t.globals.dom.elLegendWrap.classList.add("position-" + t.config.legend.position),
+                                            k.classList.add("apexcharts-legend-series"),
+                                            (k.style.margin = "".concat(t.config.legend.itemMargin.horizontal, "px ").concat(t.config.legend.itemMargin.vertical, "px")),
+                                            (t.globals.dom.elLegendWrap.style.width = t.config.legend.width ? t.config.legend.width + "px" : ""),
+                                            (t.globals.dom.elLegendWrap.style.height = t.config.legend.height ? t.config.legend.height + "px" : ""),
+                                            m.setAttrs(k, { rel: r + 1, "data:collapsed": l || h }),
+                                            (l || h) && k.classList.add("inactive-legend"),
+                                            t.config.legend.onItemClick.toggleDataSeries || k.classList.add("no-click");
+                                    }
+                                    "heatmap" !== t.config.chart.type && t.config.legend.onItemClick.toggleDataSeries && t.globals.dom.elWrap.addEventListener("click", this.onLegendClick, !0),
+                                        t.config.legend.onItemHover.highlightDataSeries &&
+                                            (t.globals.dom.elWrap.addEventListener("mousemove", this.onLegendHovered, !0), t.globals.dom.elWrap.addEventListener("mouseout", this.onLegendHovered, !0));
+                                },
+                            },
+                            {
+                                key: "getLegendBBox",
+                                value: function () {
+                                    var t = this.w.globals.dom.baseEl.querySelector(".apexcharts-legend").getBoundingClientRect(),
+                                        e = t.width;
+                                    return { clwh: t.height, clww: e };
+                                },
+                            },
+                            {
+                                key: "setLegendWrapXY",
+                                value: function (t, e) {
+                                    var i = this.w,
+                                        a = i.globals.dom.baseEl.querySelector(".apexcharts-legend"),
+                                        s = a.getBoundingClientRect(),
+                                        n = 0,
+                                        r = 0;
+                                    if ("bottom" === i.config.legend.position) r += i.globals.svgHeight - s.height / 2;
+                                    else if ("top" === i.config.legend.position) {
+                                        var o = new V(this.ctx),
+                                            l = o.getTitleSubtitleCoords("title").height,
+                                            h = o.getTitleSubtitleCoords("subtitle").height;
+                                        r = r + (l > 0 ? l - 10 : 0) + (h > 0 ? h - 10 : 0);
+                                    }
+                                    (a.style.position = "absolute"),
+                                        (n = n + t + i.config.legend.offsetX),
+                                        (r = r + e + i.config.legend.offsetY),
+                                        (a.style.left = n + "px"),
+                                        (a.style.top = r + "px"),
+                                        "bottom" === i.config.legend.position
+                                            ? ((a.style.top = "auto"), (a.style.bottom = 10 + i.config.legend.offsetY + "px"))
+                                            : "right" === i.config.legend.position && ((a.style.left = "auto"), (a.style.right = 25 + i.config.legend.offsetX + "px")),
+                                        a.style.width && (a.style.width = parseInt(i.config.legend.width) + "px"),
+                                        a.style.height && (a.style.height = parseInt(i.config.legend.height) + "px");
+                                },
+                            },
+                            {
+                                key: "legendAlignHorizontal",
+                                value: function () {
+                                    var t = this.w;
+                                    t.globals.dom.baseEl.querySelector(".apexcharts-legend").style.right = 0;
+                                    var e = this.getLegendBBox(),
+                                        i = new V(this.ctx),
+                                        a = i.getTitleSubtitleCoords("title"),
+                                        s = i.getTitleSubtitleCoords("subtitle"),
+                                        n = 0;
+                                    "bottom" === t.config.legend.position ? (n = -e.clwh / 1.8) : "top" === t.config.legend.position && (n = a.height + s.height + t.config.title.margin + t.config.subtitle.margin - 15),
+                                        this.setLegendWrapXY(20, n);
+                                },
+                            },
+                            {
+                                key: "legendAlignVertical",
+                                value: function () {
+                                    var t = this.w,
+                                        e = this.getLegendBBox(),
+                                        i = 0;
+                                    "left" === t.config.legend.position && (i = 20), "right" === t.config.legend.position && (i = t.globals.svgWidth - e.clww - 10), this.setLegendWrapXY(i, 20);
+                                },
+                            },
+                            {
+                                key: "onLegendHovered",
+                                value: function (t) {
+                                    var e = this.w,
+                                        i = t.target.classList.contains("apexcharts-legend-text") || t.target.classList.contains("apexcharts-legend-marker");
+                                    if ("heatmap" !== e.config.chart.type) !t.target.classList.contains("inactive-legend") && i && new G(this.ctx).toggleSeriesOnHover(t, t.target);
+                                    else if (i) {
+                                        var a = parseInt(t.target.getAttribute("rel")) - 1;
+                                        this.ctx.fireEvent("legendHover", [this.ctx, a, this.w]), new G(this.ctx).highlightRangeInSeries(t, t.target);
+                                    }
+                                },
+                            },
+                            {
+                                key: "onLegendClick",
+                                value: function (t) {
+                                    if (t.target.classList.contains("apexcharts-legend-text") || t.target.classList.contains("apexcharts-legend-marker")) {
+                                        var e = parseInt(t.target.getAttribute("rel")) - 1,
+                                            i = "true" === t.target.getAttribute("data:collapsed"),
+                                            a = this.w.config.chart.events.legendClick;
+                                        "function" == typeof a && a(this.ctx, e, this.w), this.ctx.fireEvent("legendClick", [this.ctx, e, this.w]);
+                                        var s = this.w.config.legend.markers.onClick;
+                                        "function" == typeof s && t.target.classList.contains("apexcharts-legend-marker") && (s(this.ctx, e, this.w), this.ctx.fireEvent("legendMarkerClick", [this.ctx, e, this.w])),
+                                            this.toggleDataSeries(e, i);
+                                    }
+                                },
+                            },
+                            {
+                                key: "getLegendStyles",
+                                value: function () {
+                                    var t = document.createElement("style");
+                                    t.setAttribute("type", "text/css");
+                                    var e = document.createTextNode(
+                                        "\n    \n      .apexcharts-legend {\n        display: flex;\n        overflow: auto;\n        padding: 0 10px;\n      }\n\n      .apexcharts-legend.position-bottom, .apexcharts-legend.position-top {\n        flex-wrap: wrap\n      }\n      .apexcharts-legend.position-right, .apexcharts-legend.position-left {\n        flex-direction: column;\n        bottom: 0;\n      }\n\n      .apexcharts-legend.position-bottom.left, .apexcharts-legend.position-top.left, .apexcharts-legend.position-right, .apexcharts-legend.position-left {\n        justify-content: flex-start;\n      }\n\n      .apexcharts-legend.position-bottom.center, .apexcharts-legend.position-top.center {\n        justify-content: center;  \n      }\n\n      .apexcharts-legend.position-bottom.right, .apexcharts-legend.position-top.right {\n        justify-content: flex-end;\n      }\n\n      .apexcharts-legend-series {\n        cursor: pointer;\n        line-height: normal;\n      }\n\n      .apexcharts-legend.position-bottom .apexcharts-legend-series, .apexcharts-legend.position-top .apexcharts-legend-series{\n        display: flex;\n        align-items: center;\n      }\n\n      .apexcharts-legend-text {\n        position: relative;\n        font-size: 14px;\n      }\n\n      .apexcharts-legend-text *, .apexcharts-legend-marker * {\n        pointer-events: none;\n      }\n\n      .apexcharts-legend-marker {\n        position: relative;\n        display: inline-block;\n        cursor: pointer;\n        margin-right: 3px;\n      }\n      \n      .apexcharts-legend.right .apexcharts-legend-series, .apexcharts-legend.left .apexcharts-legend-series{\n        display: inline-block;\n      }\n\n      .apexcharts-legend-series.no-click {\n        cursor: auto;\n      }\n\n      .apexcharts-legend .apexcharts-hidden-zero-series, .apexcharts-legend .apexcharts-hidden-null-series {\n        display: none !important;\n      }\n\n      .inactive-legend {\n        opacity: 0.45;\n      }"
+                                    );
+                                    return t.appendChild(e), t;
+                                },
+                            },
+                            {
+                                key: "toggleDataSeries",
+                                value: function (t, e) {
+                                    var i = this.w;
+                                    if (i.globals.axisCharts || "radialBar" === i.config.chart.type) {
+                                        i.globals.resized = !0;
+                                        var a = null,
+                                            s = null;
+                                        if (
+                                            ((i.globals.risingSeries = []),
+                                            i.globals.axisCharts
+                                                ? ((a = i.globals.dom.baseEl.querySelector(".apexcharts-series[data\\:realIndex='".concat(t, "']"))), (s = parseInt(a.getAttribute("data:realIndex"))))
+                                                : ((a = i.globals.dom.baseEl.querySelector(".apexcharts-series[rel='".concat(t + 1, "']"))), (s = parseInt(a.getAttribute("rel")) - 1)),
+                                            e)
+                                        )
+                                            this.riseCollapsedSeries(i.globals.collapsedSeries, i.globals.collapsedSeriesIndices, s),
+                                                this.riseCollapsedSeries(i.globals.ancillaryCollapsedSeries, i.globals.ancillaryCollapsedSeriesIndices, s);
+                                        else {
+                                            if (i.globals.axisCharts) {
+                                                var n = !1;
+                                                if (
+                                                    (i.config.yaxis[s] &&
+                                                        i.config.yaxis[s].show &&
+                                                        i.config.yaxis[s].showAlways &&
+                                                        ((n = !0),
+                                                        i.globals.ancillaryCollapsedSeriesIndices.indexOf(s) < 0 &&
+                                                            (i.globals.ancillaryCollapsedSeries.push({ index: s, data: i.config.series[s].data.slice(), type: a.parentNode.className.baseVal.split("-")[1] }),
+                                                            i.globals.ancillaryCollapsedSeriesIndices.push(s))),
+                                                    !n)
+                                                ) {
+                                                    i.globals.collapsedSeries.push({ index: s, data: i.config.series[s].data.slice(), type: a.parentNode.className.baseVal.split("-")[1] }), i.globals.collapsedSeriesIndices.push(s);
+                                                    var r = i.globals.risingSeries.indexOf(s);
+                                                    i.globals.risingSeries.splice(r, 1);
+                                                }
+                                                i.config.series[s].data = [];
+                                            } else i.globals.collapsedSeries.push({ index: s, data: i.config.series[s] }), i.globals.collapsedSeriesIndices.push(s), (i.config.series[s] = 0);
+                                            for (var o = a.childNodes, l = 0; l < o.length; l++)
+                                                o[l].classList.contains("apexcharts-series-markers-wrap") && (o[l].classList.contains("apexcharts-hide") ? o[l].classList.remove("apexcharts-hide") : o[l].classList.add("apexcharts-hide"));
+                                            (i.globals.allSeriesCollapsed = i.globals.collapsedSeries.length === i.globals.series.length), this.ctx._updateSeries(i.config.series, i.config.chart.animations.dynamicAnimation.enabled);
+                                        }
+                                    } else {
+                                        var h = i.globals.dom.Paper.select(" .apexcharts-series[rel='".concat(t + 1, "'] path")),
+                                            c = i.config.chart.type;
+                                        if ("pie" === c || "donut" === c) {
+                                            var d = i.config.plotOptions.pie.donut.labels,
+                                                u = new m(this.ctx),
+                                                f = new R(this.ctx);
+                                            u.pathMouseDown(h.members[0], null), f.printDataLabelsInner(h.members[0].node, d);
+                                        }
+                                        h.fire("click");
+                                    }
+                                },
+                            },
+                            {
+                                key: "riseCollapsedSeries",
+                                value: function (t, e, i) {
+                                    var a = this.w;
+                                    if (t.length > 0)
+                                        for (var s = 0; s < t.length; s++)
+                                            t[s].index === i &&
+                                                (a.globals.axisCharts
+                                                    ? ((a.config.series[i].data = t[s].data.slice()), t.splice(s, 1), e.splice(s, 1), a.globals.risingSeries.push(i))
+                                                    : ((a.config.series[i] = t[s].data), t.splice(s, 1), e.splice(s, 1), a.globals.risingSeries.push(i)),
+                                                this.ctx._updateSeries(a.config.series, a.config.chart.animations.dynamicAnimation.enabled));
+                                },
+                            },
+                        ]),
+                        t
+                    );
+                })(),
+                U = (function () {
+                    function t(e, i, a) {
+                        n(this, t),
+                            (this.ctx = e),
+                            (this.w = e.w),
+                            (this.xyRatios = i),
+                            (this.pointsChart = !("bubble" !== this.w.config.chart.type && "scatter" !== this.w.config.chart.type) || a),
+                            (this.scatter = new M(this.ctx)),
+                            (this.noNegatives = this.w.globals.minX === Number.MAX_VALUE),
+                            (this.yaxisIndex = 0);
+                    }
+                    return (
+                        o(t, [
+                            {
+                                key: "draw",
+                                value: function (t, e, i) {
+                                    var a = this.w,
+                                        s = new m(this.ctx),
+                                        n = new P(this.ctx),
+                                        r = a.globals.comboCharts ? e : a.config.chart.type,
+                                        o = s.group({ class: "apexcharts-".concat(r, "-series apexcharts-plot-series") }),
+                                        l = new A(this.ctx, a);
+                                    t = l.getLogSeries(t);
+                                    var c = this.xyRatios.yRatio;
+                                    c = l.getLogYRatios(c);
+                                    for (var d = this.xyRatios.zRatio, u = this.xyRatios.xRatio, f = this.xyRatios.baseLineY, g = [], x = [], v = 0, b = 0; b < t.length; b++) {
+                                        if ("line" === r && ("gradient" === a.config.fill.type || "gradient" === a.config.fill.type[b]) && l.seriesHaveSameValues(b)) {
+                                            var y = t[b].slice();
+                                            (y[y.length - 1] = y[y.length - 1] + 1e-6), (t[b] = y);
+                                        }
+                                        var w = a.globals.gridWidth / a.globals.dataPoints,
+                                            k = a.globals.comboCharts ? i[b] : b;
+                                        c.length > 1 && (this.yaxisIndex = k), (this.isReversed = a.config.yaxis[this.yaxisIndex] && a.config.yaxis[this.yaxisIndex].reversed);
+                                        var S = [],
+                                            C = [],
+                                            L = a.globals.gridHeight - f[this.yaxisIndex] - (this.isReversed ? a.globals.gridHeight : 0) + (this.isReversed ? 2 * f[this.yaxisIndex] : 0),
+                                            E = L;
+                                        L > a.globals.gridHeight && (E = a.globals.gridHeight), (v = w / 2);
+                                        var M = a.globals.padHorizontal + v,
+                                            I = 1;
+                                        a.globals.isXNumeric && a.globals.seriesX.length > 0 && (M = (a.globals.seriesX[k][0] - a.globals.minX) / u), C.push(M);
+                                        var X = void 0,
+                                            F = void 0,
+                                            Y = void 0,
+                                            O = void 0,
+                                            R = [],
+                                            D = [],
+                                            N = s.group({ class: "apexcharts-series", seriesName: p.escapeString(a.globals.seriesNames[k]) }),
+                                            H = s.group({ class: "apexcharts-series-markers-wrap" }),
+                                            _ = s.group({ class: "apexcharts-datalabels" });
+                                        this.ctx.series.addCollapsedClassToSeries(N, k);
+                                        var W = t[b].length === a.globals.dataPoints;
+                                        N.attr({ "data:longestSeries": W, rel: b + 1, "data:realIndex": k }), (this.appendPathFrom = !0);
+                                        var B = M,
+                                            V = void 0,
+                                            G = B,
+                                            j = L,
+                                            U = 0;
+                                        if (((j = this.determineFirstPrevY({ i: b, series: t, yRatio: c[this.yaxisIndex], zeroY: L, prevY: j, prevSeriesY: x, lineYPosition: U }).prevY), S.push(j), (V = j), null === t[b][0])) {
+                                            for (var q = 0; q < t[b].length; q++)
+                                                if (null !== t[b][q]) {
+                                                    (G = w * q), (j = L - t[b][q] / c[this.yaxisIndex]), (X = s.move(G, j)), (F = s.move(G, E));
+                                                    break;
+                                                }
+                                        } else (X = s.move(G, j)), (F = s.move(G, E) + s.line(G, j));
+                                        if (((Y = s.move(-1, L) + s.line(-1, L)), (O = s.move(-1, L) + s.line(-1, L)), a.globals.previousPaths.length > 0)) {
+                                            var Z = this.checkPreviousPaths({ pathFromLine: Y, pathFromArea: O, realIndex: k });
+                                            (Y = Z.pathFromLine), (O = Z.pathFromArea);
+                                        }
+                                        for (var $ = a.globals.dataPoints > 1 ? a.globals.dataPoints - 1 : a.globals.dataPoints, J = 0; J < $; J++) {
+                                            if (a.globals.isXNumeric) {
+                                                var Q = a.globals.seriesX[k][J + 1];
+                                                void 0 === a.globals.seriesX[k][J + 1] && (Q = a.globals.seriesX[k][$ - 1]), (M = (Q - a.globals.minX) / u);
+                                            } else M += w;
+                                            var K = p.isNumber(a.globals.minYArr[k]) ? a.globals.minYArr[k] : a.globals.minY;
+                                            a.config.chart.stacked
+                                                ? ((U = b > 0 && a.globals.collapsedSeries.length < a.config.series.length - 1 ? x[b - 1][J + 1] : L),
+                                                  (I =
+                                                      void 0 === t[b][J + 1] || null === t[b][J + 1]
+                                                          ? U - K / c[this.yaxisIndex] + 2 * (this.isReversed ? K / c[this.yaxisIndex] : 0)
+                                                          : U - t[b][J + 1] / c[this.yaxisIndex] + 2 * (this.isReversed ? t[b][J + 1] / c[this.yaxisIndex] : 0)))
+                                                : (I =
+                                                      void 0 === t[b][J + 1] || null === t[b][J + 1]
+                                                          ? L - K / c[this.yaxisIndex] + 2 * (this.isReversed ? K / c[this.yaxisIndex] : 0)
+                                                          : L - t[b][J + 1] / c[this.yaxisIndex] + 2 * (this.isReversed ? t[b][J + 1] / c[this.yaxisIndex] : 0)),
+                                                C.push(M),
+                                                S.push(I);
+                                            var tt = this.createPaths({ series: t, i: b, j: J, x: M, y: I, xDivision: w, pX: B, pY: V, areaBottomY: E, linePath: X, areaPath: F, linePaths: R, areaPaths: D, seriesIndex: i });
+                                            (D = tt.areaPaths), (R = tt.linePaths), (B = tt.pX), (V = tt.pY), (F = tt.areaPath), (X = tt.linePath), this.appendPathFrom && ((Y += s.line(M, L)), (O += s.line(M, L)));
+                                            var et = this.calculatePoints({ series: t, x: M, y: I, realIndex: k, i: b, j: J, prevY: j, categoryAxisCorrection: v, xRatio: u });
+                                            if (this.pointsChart) this.scatter.draw(N, J, { realIndex: k, pointsPos: et, zRatio: d, elParent: H });
+                                            else {
+                                                var it = new T(this.ctx);
+                                                a.globals.dataPoints > 1 && H.node.classList.add("hidden");
+                                                var at = it.plotChartMarkers(et, k, J + 1);
+                                                null !== at && H.add(at);
+                                            }
+                                            var st = !t[b][J + 1] || t[b][J + 1] > t[b][J] ? "top" : "bottom",
+                                                nt = new z(this.ctx).drawDataLabel(et, k, J + 1, null, st);
+                                            null !== nt && _.add(nt);
+                                        }
+                                        x.push(S), (a.globals.seriesXvalues[k] = C), (a.globals.seriesYvalues[k] = S), this.pointsChart || a.globals.delayedElements.push({ el: H.node, index: k });
+                                        var rt = {
+                                            i: b,
+                                            realIndex: k,
+                                            animationDelay: b,
+                                            initialSpeed: a.config.chart.animations.speed,
+                                            dataChangeSpeed: a.config.chart.animations.dynamicAnimation.speed,
+                                            className: "apexcharts-".concat(r),
+                                            id: "apexcharts-".concat(r),
+                                        };
+                                        if ("area" === r)
+                                            for (var ot = n.fillPath({ seriesNumber: k }), lt = 0; lt < D.length; lt++) {
+                                                var ht = s.renderPaths(h({}, rt, { pathFrom: O, pathTo: D[lt], stroke: "none", strokeWidth: 0, strokeLineCap: null, fill: ot }));
+                                                N.add(ht);
+                                            }
+                                        if (a.config.stroke.show && !this.pointsChart) {
+                                            var ct = null;
+                                            ct = "line" === r ? n.fillPath({ seriesNumber: k, i: b }) : a.globals.stroke.colors[k];
+                                            for (var dt = 0; dt < R.length; dt++) {
+                                                var ut = s.renderPaths(
+                                                    h({}, rt, {
+                                                        pathFrom: Y,
+                                                        pathTo: R[dt],
+                                                        stroke: ct,
+                                                        strokeWidth: Array.isArray(a.config.stroke.width) ? a.config.stroke.width[k] : a.config.stroke.width,
+                                                        strokeLineCap: a.config.stroke.lineCap,
+                                                        fill: "none",
+                                                    })
+                                                );
+                                                N.add(ut);
+                                            }
+                                        }
+                                        N.add(H), N.add(_), g.push(N);
+                                    }
+                                    for (var ft = g.length; ft > 0; ft--) o.add(g[ft - 1]);
+                                    return o;
+                                },
+                            },
+                            {
+                                key: "createPaths",
+                                value: function (t) {
+                                    var e = t.series,
+                                        i = t.i,
+                                        a = t.j,
+                                        s = t.x,
+                                        n = t.y,
+                                        r = t.pX,
+                                        o = t.pY,
+                                        l = t.xDivision,
+                                        h = t.areaBottomY,
+                                        c = t.linePath,
+                                        d = t.areaPath,
+                                        u = t.linePaths,
+                                        f = t.areaPaths,
+                                        g = t.seriesIndex,
+                                        p = this.w,
+                                        x = new m(this.ctx),
+                                        v = p.config.stroke.curve;
+                                    if ((Array.isArray(p.config.stroke.curve) && (v = Array.isArray(g) ? p.config.stroke.curve[g[i]] : p.config.stroke.curve[i]), "smooth" === v)) {
+                                        var b = 0.35 * (s - r);
+                                        p.globals.hasNullValues
+                                            ? (null !== e[i][a] &&
+                                                  (null !== e[i][a + 1]
+                                                      ? ((c = x.move(r, o) + x.curve(r + b, o, s - b, n, s + 1, n)), (d = x.move(r + 1, o) + x.curve(r + b, o, s - b, n, s + 1, n) + x.line(s, h) + x.line(r, h) + "z"))
+                                                      : ((c = x.move(r, o)), (d = x.move(r, o) + "z"))),
+                                              u.push(c),
+                                              f.push(d))
+                                            : ((c += x.curve(r + b, o, s - b, n, s, n)), (d += x.curve(r + b, o, s - b, n, s, n))),
+                                            (r = s),
+                                            (o = n),
+                                            a === e[i].length - 2 && ((d = d + x.curve(r, o, s, n, s, h) + x.move(s, n) + "z"), p.globals.hasNullValues || (u.push(c), f.push(d)));
+                                    } else
+                                        null === e[i][a + 1] && ((c += x.move(s, n)), (d = d + x.line(s - l, h) + x.move(s, n))),
+                                            null === e[i][a] && ((c += x.move(s, n)), (d += x.move(s, h))),
+                                            "stepline" === v ? ((c = c + x.line(s, null, "H") + x.line(null, n, "V")), (d = d + x.line(s, null, "H") + x.line(null, n, "V"))) : "straight" === v && ((c += x.line(s, n)), (d += x.line(s, n))),
+                                            a === e[i].length - 2 && ((d = d + x.line(s, h) + x.move(s, n) + "z"), u.push(c), f.push(d));
+                                    return { linePaths: u, areaPaths: f, pX: r, pY: o, linePath: c, areaPath: d };
+                                },
+                            },
+                            {
+                                key: "calculatePoints",
+                                value: function (t) {
+                                    var e = t.series,
+                                        i = t.realIndex,
+                                        a = t.x,
+                                        s = t.y,
+                                        n = t.i,
+                                        r = t.j,
+                                        o = t.prevY,
+                                        l = t.categoryAxisCorrection,
+                                        h = t.xRatio,
+                                        c = this.w,
+                                        d = [],
+                                        u = [];
+                                    if (0 === r) {
+                                        var f = l + c.config.markers.offsetX;
+                                        c.globals.isXNumeric && (f = (c.globals.seriesX[i][0] - c.globals.minX) / h + c.config.markers.offsetX),
+                                            d.push(f),
+                                            u.push(p.isNumber(e[n][0]) ? o + c.config.markers.offsetY : null),
+                                            d.push(a + c.config.markers.offsetX),
+                                            u.push(p.isNumber(e[n][r + 1]) ? s + c.config.markers.offsetY : null);
+                                    } else d.push(a + c.config.markers.offsetX), u.push(p.isNumber(e[n][r + 1]) ? s + c.config.markers.offsetY : null);
+                                    return { x: d, y: u };
+                                },
+                            },
+                            {
+                                key: "checkPreviousPaths",
+                                value: function (t) {
+                                    for (var e = t.pathFromLine, i = t.pathFromArea, a = t.realIndex, s = this.w, n = 0; n < s.globals.previousPaths.length; n++) {
+                                        var r = s.globals.previousPaths[n];
+                                        ("line" === r.type || "area" === r.type) &&
+                                            r.paths.length > 0 &&
+                                            parseInt(r.realIndex) === parseInt(a) &&
+                                            ("line" === r.type
+                                                ? ((this.appendPathFrom = !1), (e = s.globals.previousPaths[n].paths[0].d))
+                                                : "area" === r.type && ((this.appendPathFrom = !1), (i = s.globals.previousPaths[n].paths[0].d), s.config.stroke.show && (e = s.globals.previousPaths[n].paths[1].d)));
+                                    }
+                                    return { pathFromLine: e, pathFromArea: i };
+                                },
+                            },
+                            {
+                                key: "determineFirstPrevY",
+                                value: function (t) {
+                                    var e = t.i,
+                                        i = t.series,
+                                        a = t.yRatio,
+                                        s = t.zeroY,
+                                        n = t.prevY,
+                                        r = t.prevSeriesY,
+                                        o = t.lineYPosition,
+                                        l = this.w;
+                                    if (void 0 !== i[e][0]) n = l.config.chart.stacked ? (o = e > 0 ? r[e - 1][0] : s) - i[e][0] / a + 2 * (this.isReversed ? i[e][0] / a : 0) : s - i[e][0] / a + 2 * (this.isReversed ? i[e][0] / a : 0);
+                                    else if (l.config.chart.stacked && e > 0 && void 0 === i[e][0])
+                                        for (var h = e - 1; h >= 0; h--)
+                                            if (null !== i[h][0] && void 0 !== i[h][0]) {
+                                                n = o = r[h][0];
+                                                break;
+                                            }
+                                    return { prevY: n, lineYPosition: o };
+                                },
+                            },
+                        ]),
+                        t
+                    );
+                })(),
+                q = (function () {
+                    function t(e) {
+                        n(this, t), (this.ctx = e), (this.w = e.w);
+                        var i = this.w;
+                        (this.xaxisLabels = i.globals.labels.slice()),
+                            i.globals.timelineLabels.length > 0 && (this.xaxisLabels = i.globals.timelineLabels.slice()),
+                            (this.drawnLabels = []),
+                            "top" === i.config.xaxis.position ? (this.offY = 0) : (this.offY = i.globals.gridHeight + 1),
+                            (this.offY = this.offY + i.config.xaxis.axisBorder.offsetY),
+                            (this.xaxisFontSize = i.config.xaxis.labels.style.fontSize),
+                            (this.xaxisFontFamily = i.config.xaxis.labels.style.fontFamily),
+                            (this.xaxisForeColors = i.config.xaxis.labels.style.colors),
+                            (this.xaxisBorderWidth = i.config.xaxis.axisBorder.width),
+                            this.xaxisBorderWidth.indexOf("%") > -1 ? (this.xaxisBorderWidth = (i.globals.gridWidth * parseInt(this.xaxisBorderWidth)) / 100) : (this.xaxisBorderWidth = parseInt(this.xaxisBorderWidth)),
+                            (this.xaxisBorderHeight = i.config.xaxis.axisBorder.height),
+                            (this.yaxis = i.config.yaxis[0]),
+                            (this.axesUtils = new W(e));
+                    }
+                    return (
+                        o(t, [
+                            {
+                                key: "drawXaxis",
+                                value: function () {
+                                    var t,
+                                        e = this.w,
+                                        i = new m(this.ctx),
+                                        a = i.group({ class: "apexcharts-xaxis", transform: "translate(".concat(e.config.xaxis.offsetX, ", ").concat(e.config.xaxis.offsetY, ")") }),
+                                        s = i.group({ class: "apexcharts-xaxis-texts-g", transform: "translate(".concat(e.globals.translateXAxisX, ", ").concat(e.globals.translateXAxisY, ")") });
+                                    a.add(s);
+                                    for (var n = e.globals.padHorizontal, r = [], o = 0; o < this.xaxisLabels.length; o++) r.push(this.xaxisLabels[o]);
+                                    n = e.globals.isXNumeric ? n + (t = e.globals.gridWidth / (r.length - 1)) / 2 + e.config.xaxis.labels.offsetX : n + (t = e.globals.gridWidth / r.length) + e.config.xaxis.labels.offsetX;
+                                    var l = r.length;
+                                    if (e.config.xaxis.labels.show)
+                                        for (var h = 0; h <= l - 1; h++) {
+                                            var c = n - t / 2 + e.config.xaxis.labels.offsetX,
+                                                d = this.axesUtils.getLabel(r, e.globals.timelineLabels, c, h, this.drawnLabels);
+                                            this.drawnLabels.push(d.text);
+                                            var u = 28;
+                                            e.globals.rotateXLabels && (u = 22);
+                                            var f = i.drawText({
+                                                x: d.x,
+                                                y: this.offY + e.config.xaxis.labels.offsetY + u,
+                                                text: "",
+                                                textAnchor: "middle",
+                                                fontSize: this.xaxisFontSize,
+                                                fontFamily: this.xaxisFontFamily,
+                                                foreColor: Array.isArray(this.xaxisForeColors) ? this.xaxisForeColors[h] : this.xaxisForeColors,
+                                                cssClass: "apexcharts-xaxis-label " + e.config.xaxis.labels.style.cssClass,
+                                            });
+                                            h === l - 1 && e.globals.skipLastTimelinelabel && (d.text = ""), s.add(f), i.addTspan(f, d.text, this.xaxisFontFamily);
+                                            var g = document.createElementNS(e.globals.SVGNS, "title");
+                                            (g.textContent = d.text), f.node.appendChild(g), (n += t);
+                                        }
+                                    if (void 0 !== e.config.xaxis.title.text) {
+                                        var p = i.group({ class: "apexcharts-xaxis-title" }),
+                                            x = i.drawText({
+                                                x: e.globals.gridWidth / 2 + e.config.xaxis.title.offsetX,
+                                                y: this.offY - parseInt(this.xaxisFontSize) + e.globals.xAxisLabelsHeight + e.config.xaxis.title.offsetY,
+                                                text: e.config.xaxis.title.text,
+                                                textAnchor: "middle",
+                                                fontSize: e.config.xaxis.title.style.fontSize,
+                                                fontFamily: e.config.xaxis.title.style.fontFamily,
+                                                foreColor: e.config.xaxis.title.style.color,
+                                                cssClass: "apexcharts-xaxis-title-text " + e.config.xaxis.title.style.cssClass,
+                                            });
+                                        p.add(x), a.add(p);
+                                    }
+                                    if (e.config.xaxis.axisBorder.show) {
+                                        var v = 0;
+                                        "bar" === e.config.chart.type && e.globals.isXNumeric && (v -= 15);
+                                        var b = i.drawLine(e.globals.padHorizontal + v + e.config.xaxis.axisBorder.offsetX, this.offY, this.xaxisBorderWidth, this.offY, e.config.xaxis.axisBorder.color, 0, this.xaxisBorderHeight);
+                                        a.add(b);
+                                    }
+                                    return a;
+                                },
+                            },
+                            {
+                                key: "drawXaxisInversed",
+                                value: function (t) {
+                                    var e,
+                                        i,
+                                        a = this.w,
+                                        s = new m(this.ctx),
+                                        n = a.config.yaxis[0].opposite ? a.globals.translateYAxisX[t] : 0,
+                                        r = s.group({ class: "apexcharts-yaxis apexcharts-xaxis-inversed", rel: t }),
+                                        o = s.group({ class: "apexcharts-yaxis-texts-g apexcharts-xaxis-inversed-texts-g", transform: "translate(" + n + ", 0)" });
+                                    r.add(o);
+                                    for (var l = [], h = 0; h < this.xaxisLabels.length; h++) l.push(this.xaxisLabels[h]);
+                                    i = -(e = a.globals.gridHeight / l.length) / 2.2;
+                                    var c = a.globals.yLabelFormatters[0],
+                                        d = a.config.yaxis[0].labels;
+                                    if (d.show)
+                                        for (var u = 0; u <= l.length - 1; u++) {
+                                            var f = void 0 === l[u] ? "" : l[u];
+                                            f = c(f);
+                                            var g = s.drawText({
+                                                x: d.offsetX - 15,
+                                                y: i + e + d.offsetY,
+                                                text: f,
+                                                textAnchor: this.yaxis.opposite ? "start" : "end",
+                                                foreColor: d.style.color ? d.style.color : d.style.colors[u],
+                                                fontSize: d.style.fontSize,
+                                                fontFamily: d.style.fontFamily,
+                                                cssClass: "apexcharts-yaxis-label " + d.style.cssClass,
+                                            });
+                                            if ((o.add(g), 0 !== a.config.yaxis[t].labels.rotate)) {
+                                                var p = s.rotateAroundCenter(g.node);
+                                                g.node.setAttribute("transform", "rotate(".concat(a.config.yaxis[t].labels.rotate, " ").concat(p.x, " ").concat(p.y, ")"));
+                                            }
+                                            i += e;
+                                        }
+                                    if (void 0 !== a.config.yaxis[0].title.text) {
+                                        var x = s.group({ class: "apexcharts-yaxis-title apexcharts-xaxis-title-inversed", transform: "translate(" + n + ", 0)" }),
+                                            v = s.drawText({
+                                                x: 0,
+                                                y: a.globals.gridHeight / 2,
+                                                text: a.config.yaxis[0].title.text,
+                                                textAnchor: "middle",
+                                                foreColor: a.config.yaxis[0].title.style.color,
+                                                fontSize: a.config.yaxis[0].title.style.fontSize,
+                                                fontFamily: a.config.yaxis[0].title.style.fontFamily,
+                                                cssClass: "apexcharts-yaxis-title-text " + a.config.yaxis[0].title.style.cssClass,
+                                            });
+                                        x.add(v), r.add(x);
+                                    }
+                                    if (a.config.xaxis.axisBorder.show) {
+                                        var b = s.drawLine(a.globals.padHorizontal + a.config.xaxis.axisBorder.offsetX, this.offY, this.xaxisBorderWidth, this.offY, this.yaxis.axisBorder.color, 0, this.xaxisBorderHeight);
+                                        r.add(b), this.axesUtils.drawYAxisTicks(0, l.length, a.config.yaxis[0].axisBorder, a.config.yaxis[0].axisTicks, 0, e, r);
+                                    }
+                                    return r;
+                                },
+                            },
+                            {
+                                key: "drawXaxisTicks",
+                                value: function (t, e) {
+                                    var i = this.w,
+                                        a = t;
+                                    if (!(t < 0 || t > i.globals.gridWidth)) {
+                                        var s = this.offY + i.config.xaxis.axisTicks.offsetY,
+                                            n = s + i.config.xaxis.axisTicks.height;
+                                        if (i.config.xaxis.axisTicks.show) {
+                                            var r = new m(this.ctx).drawLine(
+                                                t + i.config.xaxis.axisTicks.offsetX,
+                                                s + i.config.xaxis.offsetY,
+                                                a + i.config.xaxis.axisTicks.offsetX,
+                                                n + i.config.xaxis.offsetY,
+                                                i.config.xaxis.axisTicks.color
+                                            );
+                                            e.add(r), r.node.classList.add("apexcharts-xaxis-tick");
+                                        }
+                                    }
+                                },
+                            },
+                            {
+                                key: "getXAxisTicksPositions",
+                                value: function () {
+                                    var t = this.w,
+                                        e = [],
+                                        i = this.xaxisLabels.length,
+                                        a = t.globals.padHorizontal;
+                                    if (t.globals.timelineLabels.length > 0) for (var s = 0; s < i; s++) (a = this.xaxisLabels[s].position), e.push(a);
+                                    else
+                                        for (var n = i, r = 0; r < n; r++) {
+                                            var o = n;
+                                            t.globals.isXNumeric && "bar" !== t.config.chart.type && (o -= 1), (a += t.globals.gridWidth / o), e.push(a);
+                                        }
+                                    return e;
+                                },
+                            },
+                            {
+                                key: "xAxisLabelCorrections",
+                                value: function () {
+                                    var t = this.w,
+                                        e = new m(this.ctx),
+                                        i = t.globals.dom.baseEl.querySelector(".apexcharts-xaxis-texts-g"),
+                                        a = t.globals.dom.baseEl.querySelectorAll(".apexcharts-xaxis-texts-g text"),
+                                        s = t.globals.dom.baseEl.querySelectorAll(".apexcharts-yaxis-inversed text"),
+                                        n = t.globals.dom.baseEl.querySelectorAll(".apexcharts-xaxis-inversed-texts-g text");
+                                    if (t.globals.rotateXLabels || t.config.xaxis.labels.rotateAlways)
+                                        for (var r = 0; r < a.length; r++) {
+                                            var o = e.rotateAroundCenter(a[r]);
+                                            (o.y = o.y - 1), (o.x = o.x + 1), a[r].setAttribute("transform", "rotate(".concat(t.config.xaxis.labels.rotate, " ").concat(o.x, " ").concat(o.y, ")")), a[r].setAttribute("text-anchor", "end");
+                                            i.setAttribute("transform", "translate(0, ".concat(-10, ")"));
+                                            var l = a[r].childNodes;
+                                            t.config.xaxis.labels.trim && e.placeTextWithEllipsis(l[0], l[0].textContent, t.config.xaxis.labels.maxHeight - 40);
+                                        }
+                                    else
+                                        for (var h = t.globals.gridWidth / t.globals.labels.length, c = 0; c < a.length; c++) {
+                                            var d = a[c].childNodes;
+                                            t.config.xaxis.labels.trim && "datetime" !== t.config.xaxis.type && e.placeTextWithEllipsis(d[0], d[0].textContent, h);
+                                        }
+                                    if (s.length > 0) {
+                                        var u = s[s.length - 1].getBBox(),
+                                            f = s[0].getBBox();
+                                        u.x < -20 && s[s.length - 1].parentNode.removeChild(s[s.length - 1]), f.x + f.width > t.globals.gridWidth && s[0].parentNode.removeChild(s[0]);
+                                        for (var g = 0; g < n.length; g++) e.placeTextWithEllipsis(n[g], n[g].textContent, t.config.yaxis[0].labels.maxWidth - 2 * parseInt(t.config.yaxis[0].title.style.fontSize) - 20);
+                                    }
+                                },
+                            },
+                        ]),
+                        t
+                    );
+                })(),
+                Z = (function () {
+                    function t(e) {
+                        n(this, t), (this.ctx = e), (this.w = e.w);
+                    }
+                    return (
+                        o(t, [
+                            {
+                                key: "niceScale",
+                                value: function (t, e, i) {
+                                    var a = arguments.length > 3 && void 0 !== arguments[3] ? arguments[3] : 0,
+                                        s = arguments.length > 4 && void 0 !== arguments[4] ? arguments[4] : 10,
+                                        n = this.w,
+                                        r = (void 0 === this.w.config.yaxis[a].max && void 0 === this.w.config.yaxis[a].min) || this.w.config.yaxis[a].forceNiceScale;
+                                    if ((t === Number.MIN_VALUE && 0 === e) || (!p.isNumber(t) && !p.isNumber(e)) || (t === Number.MIN_VALUE && e === -Number.MAX_VALUE)) return (t = 0), (e = s), this.linearScale(t, e, s);
+                                    t > e ? (console.warn("yaxis.min cannot be greater than yaxis.max"), (e = t + 0.1)) : t === e && ((t = 0 === t ? 0 : t - 0.5), (e = 0 === e ? 2 : e + 0.5));
+                                    var o = [],
+                                        l = Math.abs(e - t);
+                                    l < 1 && r && ("candlestick" === n.config.chart.type || "candlestick" === n.config.series[a].type || n.globals.isRangeData) && (e *= 1.01);
+                                    var h = s + 1;
+                                    h < 2 ? (h = 2) : h > 2 && (h -= 2);
+                                    for (var c = l / h, d = Math.floor(p.log10(c)), u = Math.pow(10, d), f = parseInt(c / u) * u, g = f * Math.floor(t / f), x = f * Math.ceil(e / f), v = g; o.push(v), !((v += f) > x); );
+                                    if (r && i > 10) return { result: o, niceMin: o[0], niceMax: o[o.length - 1] };
+                                    var m = t;
+                                    (o = []).push(m);
+                                    for (var b = Math.abs(e - t) / s, y = 0; y <= s; y++) (m += b), o.push(m);
+                                    return o[o.length - 2] >= e && o.pop(), { result: o, niceMin: o[0], niceMax: o[o.length - 1] };
+                                },
+                            },
+                            {
+                                key: "linearScale",
+                                value: function (t, e) {
+                                    var i = arguments.length > 2 && void 0 !== arguments[2] ? arguments[2] : 10,
+                                        a = Math.abs(e - t) / i;
+                                    i === Number.MAX_VALUE && ((i = 10), (a = 1));
+                                    for (var s = [], n = t; i >= 0; ) s.push(n), (n += a), (i -= 1);
+                                    return { result: s, niceMin: s[0], niceMax: s[s.length - 1] };
+                                },
+                            },
+                            {
+                                key: "logarithmicScale",
+                                value: function (t, e, i, a) {
+                                    (e < 0 || e === Number.MIN_VALUE) && (e = 0.01);
+                                    for (var s = Math.log(e) / Math.log(10), n = Math.log(i) / Math.log(10), r = Math.abs(i - e) / a, o = [], l = e; a >= 0; ) o.push(l), (l += r), (a -= 1);
+                                    var h = o.map(function (t, a) {
+                                        t <= 0 && (t = 0.01);
+                                        var r = (n - s) / (i - e),
+                                            o = Math.pow(10, s + r * (t - s));
+                                        return Math.round(o / p.roundToBase(o, 10)) * p.roundToBase(o, 10);
+                                    });
+                                    return 0 === h[0] && (h[0] = 1), { result: h, niceMin: h[0], niceMax: h[h.length - 1] };
+                                },
+                            },
+                            {
+                                key: "setYScaleForIndex",
+                                value: function (t, e, i) {
+                                    var a = this.w.globals,
+                                        s = this.w.config,
+                                        n = a.isBarHorizontal ? s.xaxis : s.yaxis[t];
+                                    if ((void 0 === a.yAxisScale[t] && (a.yAxisScale[t] = []), n.logarithmic))
+                                        (a.allSeriesCollapsed = !1), (a.yAxisScale[t] = this.logarithmicScale(t, e, i, n.tickAmount ? n.tickAmount : Math.floor(Math.log10(i))));
+                                    else if (i !== -Number.MAX_VALUE && p.isNumber(i))
+                                        if (((a.allSeriesCollapsed = !1), (void 0 === n.min && void 0 === n.max) || n.forceNiceScale)) {
+                                            var r = Math.abs(i - e);
+                                            a.yAxisScale[t] = this.niceScale(e, i, r, t, n.tickAmount ? n.tickAmount : r < 5 && r > 1 ? r + 1 : 5);
+                                        } else a.yAxisScale[t] = this.linearScale(e, i, n.tickAmount);
+                                    else a.yAxisScale[t] = this.linearScale(0, 5, 5);
+                                },
+                            },
+                            {
+                                key: "setMultipleYScales",
+                                value: function () {
+                                    var t = this,
+                                        e = this.w.globals,
+                                        i = this.w.config,
+                                        a = e.minYArr.concat([]),
+                                        s = e.maxYArr.concat([]),
+                                        n = [];
+                                    i.yaxis.forEach(function (r, o) {
+                                        var l = o;
+                                        i.series.forEach(function (t, i) {
+                                            t.name === r.seriesName && -1 === e.collapsedSeriesIndices.indexOf(i) && ((l = i), o !== i ? n.push({ index: i, similarIndex: o, alreadyExists: !0 }) : n.push({ index: i }));
+                                        });
+                                        var h = a[l],
+                                            c = s[l];
+                                        t.setYScaleForIndex(o, h, c);
+                                    }),
+                                        this.sameScaleInMultipleAxes(a, s, n);
+                                },
+                            },
+                            {
+                                key: "sameScaleInMultipleAxes",
+                                value: function (t, e, i) {
+                                    var a = this,
+                                        s = this.w.config,
+                                        n = this.w.globals,
+                                        r = [];
+                                    i.forEach(function (t) {
+                                        t.alreadyExists && (void 0 === r[t.index] && (r[t.index] = []), r[t.index].push(t.index), r[t.index].push(t.similarIndex));
+                                    }),
+                                        r.forEach(function (t, e) {
+                                            r.forEach(function (i, a) {
+                                                var s, n;
+                                                e !== a &&
+                                                    ((s = t),
+                                                    (n = i),
+                                                    s.filter(function (t) {
+                                                        return -1 !== n.indexOf(t);
+                                                    })).length > 0 &&
+                                                    (r[e] = r[e].concat(r[a]));
+                                            });
+                                        });
+                                    var o = r
+                                        .map(function (t) {
+                                            return t.filter(function (e, i) {
+                                                return t.indexOf(e) === i;
+                                            });
+                                        })
+                                        .map(function (t) {
+                                            return t.sort();
+                                        });
+                                    r = r.filter(function (t) {
+                                        return !!t;
+                                    });
+                                    var l = o.slice(),
+                                        h = l.map(function (t) {
+                                            return JSON.stringify(t);
+                                        });
+                                    l = l.filter(function (t, e) {
+                                        return h.indexOf(JSON.stringify(t)) === e;
+                                    });
+                                    var c = [],
+                                        d = [];
+                                    t.forEach(function (t, i) {
+                                        l.forEach(function (a, s) {
+                                            a.indexOf(i) > -1 && (void 0 === c[s] && ((c[s] = []), (d[s] = [])), c[s].push({ key: i, value: t }), d[s].push({ key: i, value: e[i] }));
+                                        });
+                                    });
+                                    var u = Array.apply(null, Array(l.length)).map(Number.prototype.valueOf, Number.MIN_VALUE),
+                                        f = Array.apply(null, Array(l.length)).map(Number.prototype.valueOf, -Number.MAX_VALUE);
+                                    c.forEach(function (t, e) {
+                                        t.forEach(function (t, i) {
+                                            u[e] = Math.min(t.value, u[e]);
+                                        });
+                                    }),
+                                        d.forEach(function (t, e) {
+                                            t.forEach(function (t, i) {
+                                                f[e] = Math.max(t.value, f[e]);
+                                            });
+                                        }),
+                                        t.forEach(function (t, e) {
+                                            d.forEach(function (t, i) {
+                                                var r = u[i],
+                                                    o = f[i];
+                                                s.chart.stacked &&
+                                                    ((o = 0),
+                                                    t.forEach(function (t, e) {
+                                                        (o += t.value), r !== Number.MIN_VALUE && (r += c[i][e].value);
+                                                    })),
+                                                    t.forEach(function (i, l) {
+                                                        t[l].key === e &&
+                                                            (void 0 !== s.yaxis[e].min && (r = "function" == typeof s.yaxis[e].min ? s.yaxis[e].min(n.minY) : s.yaxis[e].min),
+                                                            void 0 !== s.yaxis[e].max && (o = "function" == typeof s.yaxis[e].max ? s.yaxis[e].max(n.maxY) : s.yaxis[e].max),
+                                                            a.setYScaleForIndex(e, r, o));
+                                                    });
+                                            });
+                                        });
+                                },
+                            },
+                            {
+                                key: "autoScaleY",
+                                value: function (t, e, i) {
+                                    t || (t = this);
+                                    var a = t.w,
+                                        s = a.globals.seriesX[0],
+                                        n = a.config.chart.stacked;
+                                    return (
+                                        e.forEach(function (t, r) {
+                                            for (var o = 0, l = 0; l < s.length; l++)
+                                                if (s[l] >= i.xaxis.min) {
+                                                    o = l;
+                                                    break;
+                                                }
+                                            var h,
+                                                c,
+                                                d = a.globals.minYArr[r],
+                                                u = a.globals.maxYArr[r],
+                                                f = a.globals.stackedSeriesTotals;
+                                            a.globals.series.forEach(function (r, l) {
+                                                var g = r[o];
+                                                n
+                                                    ? ((g = f[o]),
+                                                      (h = c = g),
+                                                      f.forEach(function (t, e) {
+                                                          s[e] <= i.xaxis.max && s[e] >= i.xaxis.min && (t > c && null !== t && (c = t), r[e] < h && null !== r[e] && (h = r[e]));
+                                                      }))
+                                                    : ((h = c = g),
+                                                      r.forEach(function (t, e) {
+                                                          if (s[e] <= i.xaxis.max && s[e] >= i.xaxis.min) {
+                                                              var n = t,
+                                                                  r = t;
+                                                              a.globals.series.forEach(function (i, a) {
+                                                                  null !== t && ((n = Math.min(i[e], n)), (r = Math.max(i[e], r)));
+                                                              }),
+                                                                  r > c && null !== r && (c = r),
+                                                                  n < h && null !== n && (h = n);
+                                                          }
+                                                      })),
+                                                    void 0 === h && void 0 === c && ((h = d), (c = u)),
+                                                    (c *= c < 0 ? 0.9 : 1.1) < 0 && c < u && (c = u),
+                                                    (h *= h < 0 ? 1.1 : 0.9) < 0 && h > d && (h = d),
+                                                    e.length > 1
+                                                        ? ((e[l].min = void 0 === t.min ? h : t.min), (e[l].max = void 0 === t.max ? c : t.max))
+                                                        : ((e[0].min = void 0 === t.min ? h : t.min), (e[0].max = void 0 === t.max ? c : t.max));
+                                            });
+                                        }),
+                                        e
+                                    );
+                                },
+                            },
+                        ]),
+                        t
+                    );
+                })(),
+                $ = (function () {
+                    function t(e) {
+                        n(this, t), (this.ctx = e), (this.w = e.w), (this.scales = new Z(e));
+                    }
+                    return (
+                        o(t, [
+                            {
+                                key: "init",
+                                value: function () {
+                                    this.setYRange(), this.setXRange(), this.setZRange();
+                                },
+                            },
+                            {
+                                key: "getMinYMaxY",
+                                value: function (t) {
+                                    var e = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : Number.MAX_VALUE,
+                                        i = arguments.length > 2 && void 0 !== arguments[2] ? arguments[2] : -Number.MAX_VALUE,
+                                        a = arguments.length > 3 && void 0 !== arguments[3] ? arguments[3] : null,
+                                        s = this.w.globals,
+                                        n = -Number.MAX_VALUE,
+                                        r = Number.MIN_VALUE;
+                                    null === a && (a = t + 1);
+                                    var o = s.series,
+                                        l = o,
+                                        h = o;
+                                    "candlestick" === this.w.config.chart.type ? ((l = s.seriesCandleL), (h = s.seriesCandleH)) : s.isRangeData && ((l = s.seriesRangeStart), (h = s.seriesRangeEnd));
+                                    for (var c = t; c < a; c++) {
+                                        s.dataPoints = Math.max(s.dataPoints, o[c].length);
+                                        for (var d = 0; d < s.series[c].length; d++) {
+                                            var u = o[c][d];
+                                            null !== u && p.isNumber(u)
+                                                ? ((n = Math.max(n, h[c][d])),
+                                                  (e = Math.min(e, l[c][d])),
+                                                  (i = Math.max(i, l[c][d])),
+                                                  "candlestick" === this.w.config.chart.type &&
+                                                      ((n = Math.max(n, s.seriesCandleO[c][d])), (n = Math.max(n, s.seriesCandleH[c][d])), (n = Math.max(n, s.seriesCandleL[c][d])), (i = n = Math.max(n, s.seriesCandleC[c][d]))),
+                                                  p.isFloat(u) && ((u = p.noExponents(u)), (s.yValueDecimal = Math.max(s.yValueDecimal, u.toString().split(".")[1].length))),
+                                                  r > l[c][d] && l[c][d] < 0 && (r = l[c][d]))
+                                                : (s.hasNullValues = !0);
+                                        }
+                                    }
+                                    return { minY: r, maxY: n, lowestY: e, highestY: i };
+                                },
+                            },
+                            {
+                                key: "setYRange",
+                                value: function () {
+                                    var t = this.w.globals,
+                                        e = this.w.config;
+                                    (t.maxY = -Number.MAX_VALUE), (t.minY = Number.MIN_VALUE);
+                                    var i = Number.MAX_VALUE;
+                                    if (t.isMultipleYAxis)
+                                        for (var a = 0; a < t.series.length; a++) {
+                                            var s = this.getMinYMaxY(a, i, null, a + 1);
+                                            t.minYArr.push(s.minY), t.maxYArr.push(s.maxY), (i = s.lowestY);
+                                        }
+                                    var n = this.getMinYMaxY(0, i, null, t.series.length);
+                                    if (((t.minY = n.minY), (t.maxY = n.maxY), (i = n.lowestY), e.chart.stacked)) {
+                                        for (var r = [], o = [], l = 0; l < t.series[t.maxValsInArrayIndex].length; l++)
+                                            for (var h = 0, c = 0, d = 0; d < t.series.length; d++)
+                                                null !== t.series[d][l] && p.isNumber(t.series[d][l]) && (t.series[d][l] > 0 ? (h = h + parseFloat(t.series[d][l]) + 1e-4) : (c += parseFloat(t.series[d][l]))),
+                                                    d === t.series.length - 1 && (r.push(h), o.push(c));
+                                        for (var u = 0; u < r.length; u++) (t.maxY = Math.max(t.maxY, r[u])), (t.minY = Math.min(t.minY, o[u]));
+                                    }
+                                    if (("line" === e.chart.type || "area" === e.chart.type || "candlestick" === e.chart.type) && t.minY === Number.MIN_VALUE && i !== -Number.MAX_VALUE && i !== t.maxY) {
+                                        var f = t.maxY - i;
+                                        i >= 0 && i <= 10 && (f = 0), (t.minY = i - (5 * f) / 100), (t.maxY = t.maxY + (5 * f) / 100);
+                                    }
+                                    return (
+                                        e.yaxis.map(function (e, i) {
+                                            void 0 !== e.max && ("number" == typeof e.max ? (t.maxYArr[i] = e.max) : "function" == typeof e.max && (t.maxYArr[i] = e.max(t.maxY)), (t.maxY = t.maxYArr[i])),
+                                                void 0 !== e.min && ("number" == typeof e.min ? (t.minYArr[i] = e.min) : "function" == typeof e.min && (t.minYArr[i] = e.min(t.minY)), (t.minY = t.minYArr[i]));
+                                        }),
+                                        t.isBarHorizontal && (void 0 !== e.xaxis.min && "number" == typeof e.xaxis.min && (t.minY = e.xaxis.min), void 0 !== e.xaxis.max && "number" == typeof e.xaxis.max && (t.maxY = e.xaxis.max)),
+                                        t.isMultipleYAxis
+                                            ? (this.scales.setMultipleYScales(),
+                                              (t.minY = i),
+                                              t.yAxisScale.forEach(function (e, i) {
+                                                  (t.minYArr[i] = e.niceMin), (t.maxYArr[i] = e.niceMax);
+                                              }))
+                                            : (this.scales.setYScaleForIndex(0, t.minY, t.maxY),
+                                              (t.minY = t.yAxisScale[0].niceMin),
+                                              (t.maxY = t.yAxisScale[0].niceMax),
+                                              (t.minYArr[0] = t.yAxisScale[0].niceMin),
+                                              (t.maxYArr[0] = t.yAxisScale[0].niceMax)),
+                                        { minY: t.minY, maxY: t.maxY, minYArr: t.minYArr, maxYArr: t.maxYArr }
+                                    );
+                                },
+                            },
+                            {
+                                key: "setXRange",
+                                value: function () {
+                                    var t,
+                                        e = this.w.globals,
+                                        i = this.w.config,
+                                        a = "numeric" === i.xaxis.type || "datetime" === i.xaxis.type || ("category" === i.xaxis.type && !e.noLabelsProvided) || e.noLabelsProvided || e.isXNumeric;
+                                    if (e.isXNumeric)
+                                        for (var s = 0; s < e.series.length; s++)
+                                            if (e.labels[s])
+                                                for (var n = 0; n < e.labels[s].length; n++)
+                                                    null !== e.labels[s][n] &&
+                                                        p.isNumber(e.labels[s][n]) &&
+                                                        ((e.maxX = Math.max(e.maxX, e.labels[s][n])),
+                                                        (e.initialmaxX = Math.max(e.maxX, e.labels[s][n])),
+                                                        (e.minX = Math.min(e.minX, e.labels[s][n])),
+                                                        (e.initialminX = Math.min(e.minX, e.labels[s][n])));
+                                    if (
+                                        (e.noLabelsProvided && 0 === i.xaxis.categories.length && ((e.maxX = e.labels[e.labels.length - 1]), (e.initialmaxX = e.labels[e.labels.length - 1]), (e.minX = 1), (e.initialminX = 1)),
+                                        (e.comboChartsHasBars || "candlestick" === i.chart.type || ("bar" === i.chart.type && e.isXNumeric)) && ("category" !== i.xaxis.type || e.isXNumeric))
+                                    ) {
+                                        var r = (e.svgWidth / e.dataPoints) * (Math.abs(e.maxX - e.minX) / e.svgWidth),
+                                            o = e.minX - r / 2;
+                                        (e.minX = o), (e.initialminX = o);
+                                        var l = e.maxX + r / ((e.series.length + 1) / e.series.length);
+                                        (e.maxX = l), (e.initialmaxX = l);
+                                    }
+                                    (!e.isXNumeric && !e.noLabelsProvided) ||
+                                        (i.xaxis.convertedCatToNumeric && !e.dataFormatXNumeric) ||
+                                        (void 0 === i.xaxis.tickAmount
+                                            ? ((t = Math.round(e.svgWidth / 150)), "numeric" === i.xaxis.type && e.dataPoints < 20 && (t = e.dataPoints - 1), t > e.dataPoints && 0 !== e.dataPoints && (t = e.dataPoints - 1))
+                                            : (t = "dataPoints" === i.xaxis.tickAmount ? e.series[e.maxValsInArrayIndex].length - 1 : i.xaxis.tickAmount),
+                                        void 0 !== i.xaxis.max && "number" == typeof i.xaxis.max && (e.maxX = i.xaxis.max),
+                                        void 0 !== i.xaxis.min && "number" == typeof i.xaxis.min && (e.minX = i.xaxis.min),
+                                        void 0 !== i.xaxis.range && (e.minX = e.maxX - i.xaxis.range),
+                                        e.minX !== Number.MAX_VALUE && e.maxX !== -Number.MAX_VALUE
+                                            ? (e.xAxisScale = this.scales.linearScale(e.minX, e.maxX, t))
+                                            : ((e.xAxisScale = this.scales.linearScale(1, t, t)),
+                                              e.noLabelsProvided && e.labels.length > 0 && ((e.xAxisScale = this.scales.linearScale(1, e.labels.length, t - 1)), (e.seriesX = e.labels.slice()))),
+                                        a && (e.labels = e.xAxisScale.result.slice()));
+                                    if (e.minX === e.maxX)
+                                        if ("datetime" === i.xaxis.type) {
+                                            var h = new Date(e.minX);
+                                            h.setDate(h.getDate() - 2), (e.minX = new Date(h).getTime());
+                                            var c = new Date(e.maxX);
+                                            c.setDate(c.getDate() + 2), (e.maxX = new Date(c).getTime());
+                                        } else ("numeric" === i.xaxis.type || ("category" === i.xaxis.type && !e.noLabelsProvided)) && ((e.minX = e.minX - 2), (e.maxX = e.maxX + 2));
+                                    return (
+                                        e.isXNumeric &&
+                                            (e.seriesX.forEach(function (t, i) {
+                                                t.forEach(function (t, a) {
+                                                    if (a > 0) {
+                                                        var s = t - e.seriesX[i][a - 1];
+                                                        e.minXDiff = Math.min(s, e.minXDiff);
+                                                    }
+                                                });
+                                            }),
+                                            this.calcMinXDiffForTinySeries()),
+                                        { minX: e.minX, maxX: e.maxX }
+                                    );
+                                },
+                            },
+                            {
+                                key: "calcMinXDiffForTinySeries",
+                                value: function () {
+                                    var t = this.w,
+                                        e = t.globals.labels.length;
+                                    return (
+                                        1 === t.globals.labels.length
+                                            ? (t.globals.minXDiff = (t.globals.maxX - t.globals.minX) / e / 3)
+                                            : t.globals.minXDiff === Number.MAX_VALUE &&
+                                              (t.globals.timelineLabels.length > 0 && (e = t.globals.timelineLabels.length), e < 3 && (e = 3), (t.globals.minXDiff = (t.globals.maxX - t.globals.minX) / e)),
+                                        t.globals.minXDiff
+                                    );
+                                },
+                            },
+                            {
+                                key: "setZRange",
+                                value: function () {
+                                    var t = this.w.globals;
+                                    if (t.isDataXYZ)
+                                        for (var e = 0; e < t.series.length; e++)
+                                            if (void 0 !== t.seriesZ[e])
+                                                for (var i = 0; i < t.seriesZ[e].length; i++)
+                                                    null !== t.seriesZ[e][i] && p.isNumber(t.seriesZ[e][i]) && ((t.maxZ = Math.max(t.maxZ, t.seriesZ[e][i])), (t.minZ = Math.min(t.minZ, t.seriesZ[e][i])));
+                                },
+                            },
+                        ]),
+                        t
+                    );
+                })(),
+                J = (function () {
+                    function t(e) {
+                        n(this, t), (this.ctx = e), (this.w = e.w), (this.timeScaleArray = []);
+                    }
+                    return (
+                        o(t, [
+                            {
+                                key: "calculateTimeScaleTicks",
+                                value: function (t, e) {
+                                    var i = this,
+                                        a = this.w;
+                                    if (a.globals.allSeriesCollapsed) return (a.globals.labels = []), (a.globals.timelineLabels = []), [];
+                                    var s = new k(this.ctx),
+                                        n = (e - t) / 864e5;
+                                    this.determineInterval(n), (a.globals.disableZoomIn = !1), (a.globals.disableZoomOut = !1), n < 0.005 ? (a.globals.disableZoomIn = !0) : n > 5e4 && (a.globals.disableZoomOut = !0);
+                                    var r = s.getTimeUnitsfromTimestamp(t, e),
+                                        o = a.globals.gridWidth / n,
+                                        l = o / 24,
+                                        c = l / 60,
+                                        d = Math.floor(24 * n),
+                                        u = Math.floor(24 * n * 60),
+                                        f = Math.floor(n),
+                                        g = Math.floor(n / 30),
+                                        p = Math.floor(n / 365),
+                                        x = { minMinute: r.minMinute, minHour: r.minHour, minDate: r.minDate, minMonth: r.minMonth, minYear: r.minYear },
+                                        v = {
+                                            firstVal: x,
+                                            currentMinute: x.minMinute,
+                                            currentHour: x.minHour,
+                                            currentMonthDate: x.minDate,
+                                            currentDate: x.minDate,
+                                            currentMonth: x.minMonth,
+                                            currentYear: x.minYear,
+                                            daysWidthOnXAxis: o,
+                                            hoursWidthOnXAxis: l,
+                                            minutesWidthOnXAxis: c,
+                                            numberOfMinutes: u,
+                                            numberOfHours: d,
+                                            numberOfDays: f,
+                                            numberOfMonths: g,
+                                            numberOfYears: p,
+                                        };
+                                    switch (this.tickInterval) {
+                                        case "years":
+                                            this.generateYearScale(v);
+                                            break;
+                                        case "months":
+                                        case "half_year":
+                                            this.generateMonthScale(v);
+                                            break;
+                                        case "months_days":
+                                        case "months_fortnight":
+                                        case "days":
+                                        case "week_days":
+                                            this.generateDayScale(v);
+                                            break;
+                                        case "hours":
+                                            this.generateHourScale(v);
+                                            break;
+                                        case "minutes":
+                                            this.generateMinuteScale(v);
+                                    }
+                                    var m = this.timeScaleArray.map(function (t) {
+                                        var e = { position: t.position, unit: t.unit, year: t.year, day: t.day ? t.day : 1, hour: t.hour ? t.hour : 0, month: t.month + 1 };
+                                        return "month" === t.unit
+                                            ? h({}, e, { value: t.value + 1 })
+                                            : "day" === t.unit || "hour" === t.unit
+                                            ? h({}, e, { value: t.value })
+                                            : "minute" === t.unit
+                                            ? h({}, e, { value: t.value, minute: t.value })
+                                            : t;
+                                    });
+                                    return m.filter(function (t) {
+                                        var e = 1,
+                                            s = Math.ceil(a.globals.gridWidth / 120),
+                                            n = t.value;
+                                        void 0 !== a.config.xaxis.tickAmount && (s = a.config.xaxis.tickAmount), m.length > s && (e = Math.floor(m.length / s));
+                                        var r = !1,
+                                            o = !1;
+                                        switch (i.tickInterval) {
+                                            case "half_year":
+                                                (e = 7), "year" === t.unit && (r = !0);
+                                                break;
+                                            case "months":
+                                                (e = 1), "year" === t.unit && (r = !0);
+                                                break;
+                                            case "months_fortnight":
+                                                (e = 15), ("year" !== t.unit && "month" !== t.unit) || (r = !0), 30 === n && (o = !0);
+                                                break;
+                                            case "months_days":
+                                                (e = 10), "month" === t.unit && (r = !0), 30 === n && (o = !0);
+                                                break;
+                                            case "week_days":
+                                                (e = 8), "month" === t.unit && (r = !0);
+                                                break;
+                                            case "days":
+                                                (e = 1), "month" === t.unit && (r = !0);
+                                                break;
+                                            case "hours":
+                                                "day" === t.unit && (r = !0);
+                                                break;
+                                            case "minutes":
+                                                n % 5 != 0 && (o = !0);
+                                        }
+                                        if ("minutes" === i.tickInterval || "hours" === i.tickInterval) {
+                                            if (!o) return !0;
+                                        } else if ((n % e == 0 || r) && !o) return !0;
+                                    });
+                                },
+                            },
+                            {
+                                key: "recalcDimensionsBasedOnFormat",
+                                value: function (t, e) {
+                                    var i = this.w,
+                                        a = this.formatDates(t),
+                                        s = this.removeOverlappingTS(a);
+                                    e ? (i.globals.invertedTimelineLabels = s.slice()) : (i.globals.timelineLabels = s.slice()), new V(this.ctx).plotCoords();
+                                },
+                            },
+                            {
+                                key: "determineInterval",
+                                value: function (t) {
+                                    switch (!0) {
+                                        case t > 1825:
+                                            this.tickInterval = "years";
+                                            break;
+                                        case t > 800 && t <= 1825:
+                                            this.tickInterval = "half_year";
+                                            break;
+                                        case t > 180 && t <= 800:
+                                            this.tickInterval = "months";
+                                            break;
+                                        case t > 90 && t <= 180:
+                                            this.tickInterval = "months_fortnight";
+                                            break;
+                                        case t > 60 && t <= 90:
+                                            this.tickInterval = "months_days";
+                                            break;
+                                        case t > 30 && t <= 60:
+                                            this.tickInterval = "week_days";
+                                            break;
+                                        case t > 2 && t <= 30:
+                                            this.tickInterval = "days";
+                                            break;
+                                        case t > 0.1 && t <= 2:
+                                            this.tickInterval = "hours";
+                                            break;
+                                        case t < 0.1:
+                                            this.tickInterval = "minutes";
+                                            break;
+                                        default:
+                                            this.tickInterval = "days";
+                                    }
+                                },
+                            },
+                            {
+                                key: "generateYearScale",
+                                value: function (t) {
+                                    var e = t.firstVal,
+                                        i = t.currentMonth,
+                                        a = t.currentYear,
+                                        s = t.daysWidthOnXAxis,
+                                        n = t.numberOfYears,
+                                        r = e.minYear,
+                                        o = 0,
+                                        l = new k(this.ctx);
+                                    if (e.minDate > 1 && e.minMonth > 0) {
+                                        var h = l.determineRemainingDaysOfYear(e.minYear, e.minMonth, e.minDate);
+                                        (o = (l.determineDaysOfYear(e.minYear) - h + 1) * s), (r = e.minYear + 1), this.timeScaleArray.push({ position: o, value: r, unit: "year", year: r, month: p.monthMod(i + 1) });
+                                    } else 1 === e.minDate && 0 === e.minMonth && this.timeScaleArray.push({ position: o, value: r, unit: "year", year: a, month: p.monthMod(i + 1) });
+                                    for (var c = r, d = o, u = 0; u < n; u++) c++, (d = l.determineDaysOfYear(c - 1) * s + d), this.timeScaleArray.push({ position: d, value: c, unit: "year", year: c, month: 1 });
+                                },
+                            },
+                            {
+                                key: "generateMonthScale",
+                                value: function (t) {
+                                    var e = t.firstVal,
+                                        i = t.currentMonthDate,
+                                        a = t.currentMonth,
+                                        s = t.currentYear,
+                                        n = t.daysWidthOnXAxis,
+                                        r = t.numberOfMonths,
+                                        o = a,
+                                        l = 0,
+                                        h = new k(this.ctx),
+                                        c = "month",
+                                        d = 0;
+                                    if (e.minDate > 1) {
+                                        (l = (h.determineDaysOfMonths(a + 1, e.minYear) - i + 1) * n), (o = p.monthMod(a + 1));
+                                        var u = s + d,
+                                            f = p.monthMod(o),
+                                            g = o;
+                                        0 === o && ((c = "year"), (g = u), (f = 1), (u += d += 1)), this.timeScaleArray.push({ position: l, value: g, unit: c, year: u, month: f });
+                                    } else this.timeScaleArray.push({ position: l, value: o, unit: c, year: s, month: p.monthMod(a) });
+                                    for (var x = o + 1, v = l, m = 0, b = 1; m < r; m++, b++) {
+                                        0 === (x = p.monthMod(x)) ? ((c = "year"), (d += 1)) : (c = "month");
+                                        var y = s + Math.floor(x / 12) + d;
+                                        v = h.determineDaysOfMonths(x, y) * n + v;
+                                        var w = 0 === x ? y : x;
+                                        this.timeScaleArray.push({ position: v, value: w, unit: c, year: y, month: 0 === x ? 1 : x }), x++;
+                                    }
+                                },
+                            },
+                            {
+                                key: "generateDayScale",
+                                value: function (t) {
+                                    var e = t.firstVal,
+                                        i = t.currentMonth,
+                                        a = t.currentYear,
+                                        s = t.hoursWidthOnXAxis,
+                                        n = t.numberOfDays,
+                                        r = new k(this.ctx),
+                                        o = "day",
+                                        l = (24 - e.minHour) * s,
+                                        h = e.minDate + 1,
+                                        c = h,
+                                        d = function (t, e, i) {
+                                            return t > r.determineDaysOfMonths(e + 1, i) ? ((u = 1), (o = "month"), (c = e += 1), e) : e;
+                                        },
+                                        u = h,
+                                        f = d(u, i, a);
+                                    this.timeScaleArray.push({ position: l, value: c, unit: o, year: a, month: p.monthMod(f), day: u });
+                                    for (var g = l, x = 0; x < n; x++) {
+                                        (o = "day"), (f = d((u += 1), f, a + Math.floor(f / 12) + 0));
+                                        var v = a + Math.floor(f / 12) + 0;
+                                        g = 24 * s + g;
+                                        var m = 1 === u ? p.monthMod(f) : u;
+                                        this.timeScaleArray.push({ position: g, value: m, unit: o, year: v, month: p.monthMod(f), day: m });
+                                    }
+                                },
+                            },
+                            {
+                                key: "generateHourScale",
+                                value: function (t) {
+                                    var e = t.firstVal,
+                                        i = t.currentDate,
+                                        a = t.currentMonth,
+                                        s = t.currentYear,
+                                        n = t.minutesWidthOnXAxis,
+                                        r = t.numberOfHours,
+                                        o = new k(this.ctx),
+                                        l = "hour",
+                                        h = function (t, e) {
+                                            return t > o.determineDaysOfMonths(e + 1, s) && ((x = 1), (e += 1)), { month: e, date: x };
+                                        },
+                                        c = function (t, e) {
+                                            return t > o.determineDaysOfMonths(e + 1, s) ? (e += 1) : e;
+                                        },
+                                        d = 60 - e.minMinute,
+                                        u = d * n,
+                                        f = e.minHour + 1,
+                                        g = f + 1;
+                                    60 === d && ((u = 0), (g = (f = e.minHour) + 1));
+                                    var x = i,
+                                        v = c(x, a);
+                                    this.timeScaleArray.push({ position: u, value: f, unit: l, day: x, hour: g, year: s, month: p.monthMod(v) });
+                                    for (var m = u, b = 0; b < r; b++) {
+                                        if (((l = "hour"), g >= 24)) (g = 0), (l = "day"), (v = h((x += 1), v).month), (v = c(x, v));
+                                        var y = s + Math.floor(v / 12) + 0;
+                                        m = 0 === g && 0 === b ? d * n : 60 * n + m;
+                                        var w = 0 === g ? x : g;
+                                        this.timeScaleArray.push({ position: m, value: w, unit: l, hour: g, day: x, year: y, month: p.monthMod(v) }), g++;
+                                    }
+                                },
+                            },
+                            {
+                                key: "generateMinuteScale",
+                                value: function (t) {
+                                    var e = t.firstVal,
+                                        i = t.currentMinute,
+                                        a = t.currentHour,
+                                        s = t.currentDate,
+                                        n = t.currentMonth,
+                                        r = t.currentYear,
+                                        o = t.minutesWidthOnXAxis,
+                                        l = t.numberOfMinutes,
+                                        h = o - (i - e.minMinute),
+                                        c = e.minMinute + 1,
+                                        d = c + 1,
+                                        u = s,
+                                        f = n,
+                                        g = r,
+                                        x = a;
+                                    this.timeScaleArray.push({ position: h, value: c, unit: "minute", day: u, hour: x, minute: d, year: g, month: p.monthMod(f) });
+                                    for (var v = h, m = 0; m < l; m++) {
+                                        d >= 60 && ((d = 0), 24 === (x += 1) && (x = 0));
+                                        var b = r + Math.floor(f / 12) + 0;
+                                        v = o + v;
+                                        var y = d;
+                                        this.timeScaleArray.push({ position: v, value: y, unit: "minute", hour: x, minute: d, day: u, year: b, month: p.monthMod(f) }), d++;
+                                    }
+                                },
+                            },
+                            {
+                                key: "createRawDateString",
+                                value: function (t, e) {
+                                    var i = t.year;
+                                    return (
+                                        (i += "-" + ("0" + t.month.toString()).slice(-2)),
+                                        "day" === t.unit ? (i += "day" === t.unit ? "-" + ("0" + e).slice(-2) : "-01") : (i += "-" + ("0" + (t.day ? t.day : "1")).slice(-2)),
+                                        "hour" === t.unit ? (i += "hour" === t.unit ? "T" + ("0" + e).slice(-2) : "T00") : (i += "T" + ("0" + (t.hour ? t.hour : "0")).slice(-2)),
+                                        (i += "minute" === t.unit ? ":" + ("0" + e).slice(-2) + ":00.000Z" : ":00:00.000Z")
+                                    );
+                                },
+                            },
+                            {
+                                key: "formatDates",
+                                value: function (t) {
+                                    var e = this,
+                                        i = this.w;
+                                    return t.map(function (t) {
+                                        var a = t.value.toString(),
+                                            s = new k(e.ctx),
+                                            n = e.createRawDateString(t, a),
+                                            r = new Date(Date.parse(n));
+                                        if (void 0 === i.config.xaxis.labels.format) {
+                                            var o = "dd MMM",
+                                                l = i.config.xaxis.labels.datetimeFormatter;
+                                            "year" === t.unit && (o = l.year),
+                                                "month" === t.unit && (o = l.month),
+                                                "day" === t.unit && (o = l.day),
+                                                "hour" === t.unit && (o = l.hour),
+                                                "minute" === t.unit && (o = l.minute),
+                                                (a = s.formatDate(r, o, !0, !1));
+                                        } else a = s.formatDate(r, i.config.xaxis.labels.format);
+                                        return { dateString: n, position: t.position, value: a, unit: t.unit, year: t.year, month: t.month };
+                                    });
+                                },
+                            },
+                            {
+                                key: "removeOverlappingTS",
+                                value: function (t) {
+                                    var e = this,
+                                        i = new m(this.ctx),
+                                        a = 0,
+                                        s = t.map(function (s, n) {
+                                            if (n > 0 && e.w.config.xaxis.labels.hideOverlappingLabels) {
+                                                var r = i.getTextRects(t[a].value).width,
+                                                    o = t[a].position;
+                                                return s.position > o + r + 10 ? ((a = n), s) : null;
+                                            }
+                                            return s;
+                                        });
+                                    return (s = s.filter(function (t) {
+                                        return null !== t;
+                                    }));
+                                },
+                            },
+                        ]),
+                        t
+                    );
+                })(),
+                Q = (function () {
+                    function t(e, i) {
+                        n(this, t), (this.ctx = i), (this.w = i.w), (this.el = e), (this.coreUtils = new A(this.ctx)), (this.twoDSeries = []), (this.threeDSeries = []), (this.twoDSeriesX = []);
+                    }
+                    return (
+                        o(t, [
+                            {
+                                key: "setupElements",
+                                value: function () {
+                                    var t = this.w.globals,
+                                        e = this.w.config,
+                                        i = e.chart.type;
+                                    (t.axisCharts = ["line", "area", "bar", "rangeBar", "candlestick", "radar", "scatter", "bubble", "heatmap"].indexOf(i) > -1),
+                                        (t.xyCharts = ["line", "area", "bar", "rangeBar", "candlestick", "scatter", "bubble"].indexOf(i) > -1),
+                                        (t.isBarHorizontal = ("bar" === e.chart.type || "rangeBar" === e.chart.type) && e.plotOptions.bar.horizontal),
+                                        (t.chartClass = ".apexcharts" + t.cuid),
+                                        (t.dom.baseEl = this.el),
+                                        (t.dom.elWrap = document.createElement("div")),
+                                        m.setAttrs(t.dom.elWrap, { id: t.chartClass.substring(1), class: "apexcharts-canvas " + t.chartClass.substring(1) }),
+                                        this.el.appendChild(t.dom.elWrap),
+                                        (t.dom.Paper = new window.SVG.Doc(t.dom.elWrap)),
+                                        t.dom.Paper.attr({ class: "apexcharts-svg", "xmlns:data": "ApexChartsNS", transform: "translate(".concat(e.chart.offsetX, ", ").concat(e.chart.offsetY, ")") }),
+                                        (t.dom.Paper.node.style.background = e.chart.background),
+                                        this.setSVGDimensions(),
+                                        (t.dom.elGraphical = t.dom.Paper.group().attr({ class: "apexcharts-inner apexcharts-graphical" })),
+                                        (t.dom.elDefs = t.dom.Paper.defs()),
+                                        (t.dom.elLegendWrap = document.createElement("div")),
+                                        t.dom.elLegendWrap.classList.add("apexcharts-legend"),
+                                        t.dom.elWrap.appendChild(t.dom.elLegendWrap),
+                                        t.dom.Paper.add(t.dom.elGraphical),
+                                        t.dom.elGraphical.add(t.dom.elDefs);
+                                },
+                            },
+                            {
+                                key: "plotChartType",
+                                value: function (t, e) {
+                                    var i = this.w,
+                                        a = i.config,
+                                        s = i.globals,
+                                        n = { series: [], i: [] },
+                                        r = { series: [], i: [] },
+                                        o = { series: [], i: [] },
+                                        l = { series: [], i: [] },
+                                        h = { series: [], i: [] };
+                                    s.series.map(function (e, a) {
+                                        void 0 !== t[a].type
+                                            ? ("column" === t[a].type || "bar" === t[a].type
+                                                  ? ((i.config.plotOptions.bar.horizontal = !1), l.series.push(e), l.i.push(a))
+                                                  : "area" === t[a].type
+                                                  ? (r.series.push(e), r.i.push(a))
+                                                  : "line" === t[a].type
+                                                  ? (n.series.push(e), n.i.push(a))
+                                                  : "scatter" === t[a].type
+                                                  ? (o.series.push(e), o.i.push(a))
+                                                  : "bubble" === t[a].type ||
+                                                    ("candlestick" === t[a].type
+                                                        ? (h.series.push(e), h.i.push(a))
+                                                        : console.warn("You have specified an unrecognized chart type. Available types for this propery are line/area/column/bar/scatter/bubble")),
+                                              (s.comboCharts = !0))
+                                            : (n.series.push(e), n.i.push(a));
+                                    });
+                                    var c = new U(this.ctx, e),
+                                        d = new F(this.ctx, e),
+                                        u = new R(this.ctx),
+                                        f = new N(this.ctx),
+                                        g = new H(this.ctx, e),
+                                        p = new D(this.ctx),
+                                        x = [];
+                                    if (s.comboCharts) {
+                                        if ((r.series.length > 0 && x.push(c.draw(r.series, "area", r.i)), l.series.length > 0))
+                                            if (i.config.chart.stacked) {
+                                                var v = new X(this.ctx, e);
+                                                x.push(v.draw(l.series, l.i));
+                                            } else {
+                                                var m = new I(this.ctx, e);
+                                                x.push(m.draw(l.series, l.i));
+                                            }
+                                        if ((n.series.length > 0 && x.push(c.draw(n.series, "line", n.i)), h.series.length > 0 && x.push(d.draw(h.series, h.i)), o.series.length > 0)) {
+                                            var b = new U(this.ctx, e, !0);
+                                            x.push(b.draw(o.series, "scatter", o.i));
+                                        }
+                                    } else
+                                        switch (a.chart.type) {
+                                            case "line":
+                                                x = c.draw(s.series, "line");
+                                                break;
+                                            case "area":
+                                                x = c.draw(s.series, "area");
+                                                break;
+                                            case "bar":
+                                                if (a.chart.stacked) x = new X(this.ctx, e).draw(s.series);
+                                                else x = new I(this.ctx, e).draw(s.series);
+                                                break;
+                                            case "candlestick":
+                                                x = new F(this.ctx, e).draw(s.series);
+                                                break;
+                                            case "rangeBar":
+                                                x = g.draw(s.series);
+                                                break;
+                                            case "heatmap":
+                                                x = new O(this.ctx, e).draw(s.series);
+                                                break;
+                                            case "pie":
+                                            case "donut":
+                                                x = u.draw(s.series);
+                                                break;
+                                            case "radialBar":
+                                                x = f.draw(s.series);
+                                                break;
+                                            case "radar":
+                                                x = p.draw(s.series);
+                                                break;
+                                            default:
+                                                x = c.draw(s.series);
+                                        }
+                                    return x;
+                                },
+                            },
+                            {
+                                key: "setSVGDimensions",
+                                value: function () {
+                                    var t = this.w.globals,
+                                        e = this.w.config;
+                                    (t.svgWidth = e.chart.width), (t.svgHeight = e.chart.height);
+                                    var i = p.getDimensions(this.el),
+                                        a = e.chart.width
+                                            .toString()
+                                            .split(/[0-9]+/g)
+                                            .pop();
+                                    if (
+                                        ("%" === a
+                                            ? p.isNumber(i[0]) && (0 === i[0].width && (i = p.getDimensions(this.el.parentNode)), (t.svgWidth = (i[0] * parseInt(e.chart.width)) / 100))
+                                            : ("px" !== a && "" !== a) || (t.svgWidth = parseInt(e.chart.width)),
+                                        "auto" !== t.svgHeight && "" !== t.svgHeight)
+                                    )
+                                        if (
+                                            "%" ===
+                                            e.chart.height
+                                                .toString()
+                                                .split(/[0-9]+/g)
+                                                .pop()
+                                        ) {
+                                            var s = p.getDimensions(this.el.parentNode);
+                                            t.svgHeight = (s[1] * parseInt(e.chart.height)) / 100;
+                                        } else t.svgHeight = parseInt(e.chart.height);
+                                    else t.axisCharts ? (t.svgHeight = t.svgWidth / 1.61) : (t.svgHeight = t.svgWidth);
+                                    t.svgWidth < 0 && (t.svgWidth = 0), t.svgHeight < 0 && (t.svgHeight = 0), m.setAttrs(t.dom.Paper.node, { width: t.svgWidth, height: t.svgHeight });
+                                    var n = e.chart.sparkline.enabled ? 0 : t.axisCharts ? e.chart.parentHeightOffset : 0;
+                                    (t.dom.Paper.node.parentNode.parentNode.style.minHeight = t.svgHeight + n + "px"), (t.dom.elWrap.style.width = t.svgWidth + "px"), (t.dom.elWrap.style.height = t.svgHeight + "px");
+                                },
+                            },
+                            {
+                                key: "shiftGraphPosition",
+                                value: function () {
+                                    var t = this.w.globals,
+                                        e = t.translateY,
+                                        i = { transform: "translate(" + t.translateX + ", " + e + ")" };
+                                    m.setAttrs(t.dom.elGraphical.node, i);
+                                },
+                            },
+                            {
+                                key: "resizeNonAxisCharts",
+                                value: function () {
+                                    var t = this.w,
+                                        e = t.globals,
+                                        i = 0;
+                                    ("top" !== t.config.legend.position && "bottom" !== t.config.legend.position) || (i = new j(this.ctx).getLegendBBox().clwh + 10);
+                                    var a = t.globals.dom.baseEl.querySelector(".apexcharts-radialbar"),
+                                        s = 2 * t.globals.radialSize;
+                                    a && -90 !== t.config.plotOptions.radialBar.startAngle && (s = p.getBoundingClientRect(a).height);
+                                    var n = Math.max(s, 2 * t.globals.radialSize) + e.translateY + i + 20;
+                                    e.dom.elLegendForeign && e.dom.elLegendForeign.setAttribute("height", n),
+                                        (e.dom.elWrap.style.height = n + "px"),
+                                        m.setAttrs(e.dom.Paper.node, { height: n }),
+                                        (e.dom.Paper.node.parentNode.parentNode.style.minHeight = n + "px");
+                                },
+                            },
+                            {
+                                key: "coreCalculations",
+                                value: function () {
+                                    new $(this.ctx).init();
+                                },
+                            },
+                            {
+                                key: "resetGlobals",
+                                value: function () {
+                                    var t = this,
+                                        e = this.w.globals;
+                                    (e.series = []),
+                                        (e.seriesCandleO = []),
+                                        (e.seriesCandleH = []),
+                                        (e.seriesCandleL = []),
+                                        (e.seriesCandleC = []),
+                                        (e.seriesRangeStart = []),
+                                        (e.seriesRangeEnd = []),
+                                        (e.seriesPercent = []),
+                                        (e.seriesX = []),
+                                        (e.seriesZ = []),
+                                        (e.seriesNames = []),
+                                        (e.seriesTotals = []),
+                                        (e.stackedSeriesTotals = []),
+                                        (e.labels = []),
+                                        (e.timelineLabels = []),
+                                        (e.noLabelsProvided = !1),
+                                        (e.timescaleTicks = []),
+                                        (e.resizeTimer = null),
+                                        (e.selectionResizeTimer = null),
+                                        (e.seriesXvalues = t.w.config.series.map(function (t) {
+                                            return [];
+                                        })),
+                                        (e.seriesYvalues = t.w.config.series.map(function (t) {
+                                            return [];
+                                        })),
+                                        (e.delayedElements = []),
+                                        (e.pointsArray = []),
+                                        (e.dataLabelsRects = []),
+                                        (e.isXNumeric = !1),
+                                        (e.isDataXYZ = !1),
+                                        (e.maxY = -Number.MAX_VALUE),
+                                        (e.minY = Number.MIN_VALUE),
+                                        (e.minYArr = []),
+                                        (e.maxYArr = []),
+                                        (e.maxX = -Number.MAX_VALUE),
+                                        (e.minX = Number.MAX_VALUE),
+                                        (e.initialmaxX = -Number.MAX_VALUE),
+                                        (e.initialminX = Number.MAX_VALUE),
+                                        (e.maxDate = 0),
+                                        (e.minDate = Number.MAX_VALUE),
+                                        (e.minZ = Number.MAX_VALUE),
+                                        (e.maxZ = -Number.MAX_VALUE),
+                                        (e.minXDiff = Number.MAX_VALUE),
+                                        (e.yAxisScale = []),
+                                        (e.xAxisScale = null),
+                                        (e.xAxisTicksPositions = []),
+                                        (e.yLabelsCoords = []),
+                                        (e.yTitleCoords = []),
+                                        (e.xRange = 0),
+                                        (e.yRange = []),
+                                        (e.zRange = 0),
+                                        (e.dataPoints = 0);
+                                },
+                            },
+                            {
+                                key: "isMultipleY",
+                                value: function () {
+                                    if (this.w.config.yaxis.constructor === Array && this.w.config.yaxis.length > 1) return (this.w.globals.isMultipleYAxis = !0), !0;
+                                },
+                            },
+                            {
+                                key: "excludeCollapsedSeriesInYAxis",
+                                value: function () {
+                                    var t = this,
+                                        e = this.w;
+                                    e.globals.ignoreYAxisIndexes = e.globals.collapsedSeries.map(function (e, i) {
+                                        if (t.w.globals.isMultipleYAxis) return e.index;
+                                    });
+                                },
+                            },
+                            {
+                                key: "isMultiFormat",
+                                value: function () {
+                                    return this.isFormatXY() || this.isFormat2DArray();
+                                },
+                            },
+                            {
+                                key: "isFormatXY",
+                                value: function () {
+                                    var t = this.w.config.series.slice(),
+                                        e = new G(this.ctx);
+                                    if (
+                                        ((this.activeSeriesIndex = e.getActiveConfigSeriesIndex()),
+                                        void 0 !== t[this.activeSeriesIndex].data &&
+                                            t[this.activeSeriesIndex].data.length > 0 &&
+                                            null !== t[this.activeSeriesIndex].data[0] &&
+                                            void 0 !== t[this.activeSeriesIndex].data[0].x &&
+                                            null !== t[this.activeSeriesIndex].data[0])
+                                    )
+                                        return !0;
+                                },
+                            },
+                            {
+                                key: "isFormat2DArray",
+                                value: function () {
+                                    var t = this.w.config.series.slice(),
+                                        e = new G(this.ctx);
+                                    if (
+                                        ((this.activeSeriesIndex = e.getActiveConfigSeriesIndex()),
+                                        void 0 !== t[this.activeSeriesIndex].data &&
+                                            t[this.activeSeriesIndex].data.length > 0 &&
+                                            void 0 !== t[this.activeSeriesIndex].data[0] &&
+                                            null !== t[this.activeSeriesIndex].data[0] &&
+                                            t[this.activeSeriesIndex].data[0].constructor === Array)
+                                    )
+                                        return !0;
+                                },
+                            },
+                            {
+                                key: "handleFormat2DArray",
+                                value: function (t, e) {
+                                    for (var i = this.w.config, a = this.w.globals, s = 0; s < t[e].data.length; s++)
+                                        if (
+                                            (void 0 !== t[e].data[s][1] &&
+                                                (Array.isArray(t[e].data[s][1]) && 4 === t[e].data[s][1].length ? this.twoDSeries.push(p.parseNumber(t[e].data[s][1][3])) : this.twoDSeries.push(p.parseNumber(t[e].data[s][1])),
+                                                (a.dataFormatXNumeric = !0)),
+                                            "datetime" === i.xaxis.type)
+                                        ) {
+                                            var n = new Date(t[e].data[s][0]);
+                                            (n = new Date(n).getTime()), this.twoDSeriesX.push(n);
+                                        } else this.twoDSeriesX.push(t[e].data[s][0]);
+                                    for (var r = 0; r < t[e].data.length; r++) void 0 !== t[e].data[r][2] && (this.threeDSeries.push(t[e].data[r][2]), (a.isDataXYZ = !0));
+                                },
+                            },
+                            {
+                                key: "handleFormatXY",
+                                value: function (t, e) {
+                                    var i = this.w.config,
+                                        a = this.w.globals,
+                                        s = new k(this.ctx),
+                                        n = e;
+                                    a.collapsedSeriesIndices.indexOf(e) > -1 && (n = this.activeSeriesIndex);
+                                    for (var r = 0; r < t[e].data.length; r++)
+                                        void 0 !== t[e].data[r].y && (Array.isArray(t[e].data[r].y) ? this.twoDSeries.push(p.parseNumber(t[e].data[r].y[t[e].data[r].y.length - 1])) : this.twoDSeries.push(p.parseNumber(t[e].data[r].y)));
+                                    for (var o = 0; o < t[n].data.length; o++) {
+                                        var l = "string" == typeof t[n].data[o].x,
+                                            h = !!s.isValidDate(t[n].data[o].x.toString());
+                                        l || h
+                                            ? l
+                                                ? "datetime" !== i.xaxis.type || a.isRangeData
+                                                    ? ((this.fallbackToCategory = !0), this.twoDSeriesX.push(t[n].data[o].x))
+                                                    : this.twoDSeriesX.push(s.parseDate(t[n].data[o].x))
+                                                : "datetime" === i.xaxis.type
+                                                ? this.twoDSeriesX.push(s.parseDate(t[n].data[o].x.toString()))
+                                                : ((a.dataFormatXNumeric = !0), (a.isXNumeric = !0), this.twoDSeriesX.push(parseFloat(t[n].data[o].x)))
+                                            : ((a.isXNumeric = !0), (a.dataFormatXNumeric = !0), this.twoDSeriesX.push(t[n].data[o].x));
+                                    }
+                                    if (t[e].data[0] && void 0 !== t[e].data[0].z) {
+                                        for (var c = 0; c < t[e].data.length; c++) this.threeDSeries.push(t[e].data[c].z);
+                                        a.isDataXYZ = !0;
+                                    }
+                                },
+                            },
+                            {
+                                key: "handleRangeData",
+                                value: function (t, e) {
+                                    var i = this.w.globals,
+                                        a = {};
+                                    return (
+                                        this.isFormat2DArray() ? (a = this.handleRangeDataFormat("array", t, e)) : this.isFormatXY() && (a = this.handleRangeDataFormat("xy", t, e)),
+                                        i.seriesRangeStart.push(a.start),
+                                        i.seriesRangeEnd.push(a.end),
+                                        a
+                                    );
+                                },
+                            },
+                            {
+                                key: "handleCandleStickData",
+                                value: function (t, e) {
+                                    var i = this.w.globals,
+                                        a = {};
+                                    return (
+                                        this.isFormat2DArray() ? (a = this.handleCandleStickDataFormat("array", t, e)) : this.isFormatXY() && (a = this.handleCandleStickDataFormat("xy", t, e)),
+                                        i.seriesCandleO.push(a.o),
+                                        i.seriesCandleH.push(a.h),
+                                        i.seriesCandleL.push(a.l),
+                                        i.seriesCandleC.push(a.c),
+                                        a
+                                    );
+                                },
+                            },
+                            {
+                                key: "handleRangeDataFormat",
+                                value: function (t, e, i) {
+                                    var a = [],
+                                        s = [],
+                                        n = "Please provide [Start, End] values in valid format. Read more https://apexcharts.com/docs/series/#rangecharts",
+                                        r = new G(this.ctx).getActiveConfigSeriesIndex();
+                                    if ("array" === t) {
+                                        if (2 !== e[r].data[0][1].length) throw new Error(n);
+                                        for (var o = 0; o < e[i].data.length; o++) a.push(e[i].data[o][1][0]), s.push(e[i].data[o][1][1]);
+                                    } else if ("xy" === t) {
+                                        if (2 !== e[r].data[0].y.length) throw new Error(n);
+                                        for (var l = 0; l < e[i].data.length; l++) a.push(e[i].data[l].y[0]), s.push(e[i].data[l].y[1]);
+                                    }
+                                    return { start: a, end: s };
+                                },
+                            },
+                            {
+                                key: "handleCandleStickDataFormat",
+                                value: function (t, e, i) {
+                                    var a = [],
+                                        s = [],
+                                        n = [],
+                                        r = [],
+                                        o = "Please provide [Open, High, Low and Close] values in valid format. Read more https://apexcharts.com/docs/series/#candlestick";
+                                    if ("array" === t) {
+                                        if (4 !== e[i].data[0][1].length) throw new Error(o);
+                                        for (var l = 0; l < e[i].data.length; l++) a.push(e[i].data[l][1][0]), s.push(e[i].data[l][1][1]), n.push(e[i].data[l][1][2]), r.push(e[i].data[l][1][3]);
+                                    } else if ("xy" === t) {
+                                        if (4 !== e[i].data[0].y.length) throw new Error(o);
+                                        for (var h = 0; h < e[i].data.length; h++) a.push(e[i].data[h].y[0]), s.push(e[i].data[h].y[1]), n.push(e[i].data[h].y[2]), r.push(e[i].data[h].y[3]);
+                                    }
+                                    return { o: a, h: s, l: n, c: r };
+                                },
+                            },
+                            {
+                                key: "parseDataAxisCharts",
+                                value: function (t) {
+                                    for (var e = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : this.ctx, i = this.w.config, a = this.w.globals, s = new k(e), n = 0; n < t.length; n++) {
+                                        if (((this.twoDSeries = []), (this.twoDSeriesX = []), (this.threeDSeries = []), void 0 === t[n].data))
+                                            return void console.error("It is a possibility that you may have not included 'data' property in series.");
+                                        if (
+                                            (("rangeBar" !== i.chart.type && "rangeArea" !== i.chart.type && "rangeBar" !== t[n].type && "rangeArea" !== t[n].type) || ((a.isRangeData = !0), this.handleRangeData(t, n)), this.isMultiFormat())
+                                        )
+                                            this.isFormat2DArray() ? this.handleFormat2DArray(t, n) : this.isFormatXY() && this.handleFormatXY(t, n),
+                                                ("candlestick" !== i.chart.type && "candlestick" !== t[n].type) || this.handleCandleStickData(t, n),
+                                                a.series.push(this.twoDSeries),
+                                                a.labels.push(this.twoDSeriesX),
+                                                a.seriesX.push(this.twoDSeriesX),
+                                                this.fallbackToCategory || (a.isXNumeric = !0);
+                                        else {
+                                            if ("datetime" === i.xaxis.type) {
+                                                a.isXNumeric = !0;
+                                                for (var r = i.labels.length > 0 ? i.labels.slice() : i.xaxis.categories.slice(), o = 0; o < r.length; o++)
+                                                    if ("string" == typeof r[o]) {
+                                                        if (!s.isValidDate(r[o])) throw new Error("You have provided invalid Date format. Please provide a valid JavaScript Date");
+                                                        this.twoDSeriesX.push(s.parseDate(r[o]));
+                                                    } else {
+                                                        if (13 !== String(r[o]).length) throw new Error("Please provide a valid JavaScript timestamp");
+                                                        this.twoDSeriesX.push(r[o]);
+                                                    }
+                                                a.seriesX.push(this.twoDSeriesX);
+                                            } else if ("numeric" === i.xaxis.type) {
+                                                a.isXNumeric = !0;
+                                                var l = i.labels.length > 0 ? i.labels.slice() : i.xaxis.categories.slice();
+                                                l.length > 0 && ((this.twoDSeriesX = l), a.seriesX.push(this.twoDSeriesX));
+                                            }
+                                            a.labels.push(this.twoDSeriesX);
+                                            var h = t[n].data.map(function (t) {
+                                                return p.parseNumber(t);
+                                            });
+                                            a.series.push(h);
+                                        }
+                                        a.seriesZ.push(this.threeDSeries), void 0 !== t[n].name ? a.seriesNames.push(t[n].name) : a.seriesNames.push("series-" + parseInt(n + 1));
+                                    }
+                                    return this.w;
+                                },
+                            },
+                            {
+                                key: "parseDataNonAxisCharts",
+                                value: function (t) {
+                                    var e = this.w.globals,
+                                        i = this.w.config;
+                                    (e.series = t.slice()), (e.seriesNames = i.labels.slice());
+                                    for (var a = 0; a < e.series.length; a++) void 0 === e.seriesNames[a] && e.seriesNames.push("series-" + (a + 1));
+                                    return this.w;
+                                },
+                            },
+                            {
+                                key: "handleExternalLabelsData",
+                                value: function (t) {
+                                    var e = this.w.config,
+                                        i = this.w.globals;
+                                    if (e.xaxis.categories.length > 0) i.labels = e.xaxis.categories;
+                                    else if (e.labels.length > 0) i.labels = e.labels.slice();
+                                    else if (this.fallbackToCategory) i.labels = i.labels[0];
+                                    else {
+                                        var a = [];
+                                        if (i.axisCharts) {
+                                            for (var s = 0; s < i.series[i.maxValsInArrayIndex].length; s++) a.push(s + 1);
+                                            for (var n = 0; n < t.length; n++) i.seriesX.push(a);
+                                            i.isXNumeric = !0;
+                                        }
+                                        if (0 === a.length) {
+                                            a = [0, 10];
+                                            for (var r = 0; r < t.length; r++) i.seriesX.push(a);
+                                        }
+                                        (i.labels = a), (i.noLabelsProvided = !0);
+                                    }
+                                },
+                            },
+                            {
+                                key: "parseData",
+                                value: function (t) {
+                                    var e = this.w,
+                                        i = e.config,
+                                        a = e.globals;
+                                    if (
+                                        (this.excludeCollapsedSeriesInYAxis(),
+                                        (this.fallbackToCategory = !1),
+                                        this.resetGlobals(),
+                                        this.isMultipleY(),
+                                        a.axisCharts ? this.parseDataAxisCharts(t) : this.parseDataNonAxisCharts(t),
+                                        this.coreUtils.getLargestSeries(),
+                                        "bar" === i.chart.type && i.chart.stacked)
+                                    ) {
+                                        var s = new G(this.ctx);
+                                        a.series = s.setNullSeriesToZeroValues(a.series);
+                                    }
+                                    this.coreUtils.getSeriesTotals(),
+                                        a.axisCharts && this.coreUtils.getStackedSeriesTotals(),
+                                        this.coreUtils.getPercentSeries(),
+                                        a.dataFormatXNumeric || (a.isXNumeric && ("numeric" !== i.xaxis.type || 0 !== i.labels.length || 0 !== i.xaxis.categories.length)) || this.handleExternalLabelsData(t);
+                                },
+                            },
+                            {
+                                key: "xySettings",
+                                value: function () {
+                                    var t = null,
+                                        e = this.w;
+                                    if (e.globals.axisCharts) {
+                                        if ("back" === e.config.xaxis.crosshairs.position) new Y(this.ctx).drawXCrosshairs();
+                                        if ("back" === e.config.yaxis[0].crosshairs.position) new Y(this.ctx).drawYCrosshairs();
+                                        if (((t = this.coreUtils.getCalculatedRatios()), "datetime" === e.config.xaxis.type && void 0 === e.config.xaxis.labels.formatter)) {
+                                            var i,
+                                                a = new J(this.ctx);
+                                            isFinite(e.globals.minX) && isFinite(e.globals.maxX) && !e.globals.isBarHorizontal
+                                                ? ((i = a.calculateTimeScaleTicks(e.globals.minX, e.globals.maxX)), a.recalcDimensionsBasedOnFormat(i, !1))
+                                                : e.globals.isBarHorizontal && ((i = a.calculateTimeScaleTicks(e.globals.minY, e.globals.maxY)), a.recalcDimensionsBasedOnFormat(i, !0));
+                                        }
+                                    }
+                                    return t;
+                                },
+                            },
+                            {
+                                key: "drawAxis",
+                                value: function (t, e) {
+                                    var i,
+                                        a,
+                                        s = this.w.globals,
+                                        n = this.w.config,
+                                        r = new q(this.ctx),
+                                        o = new B(this.ctx);
+                                    s.axisCharts &&
+                                        "radar" !== t &&
+                                        (s.isBarHorizontal
+                                            ? ((a = o.drawYaxisInversed(0)), (i = r.drawXaxisInversed(0)), s.dom.elGraphical.add(i), s.dom.elGraphical.add(a))
+                                            : ((i = r.drawXaxis()),
+                                              s.dom.elGraphical.add(i),
+                                              n.yaxis.map(function (t, e) {
+                                                  -1 === s.ignoreYAxisIndexes.indexOf(e) && ((a = o.drawYaxis(e)), s.dom.Paper.add(a));
+                                              })));
+                                    n.yaxis.map(function (t, e) {
+                                        -1 === s.ignoreYAxisIndexes.indexOf(e) && o.yAxisTitleRotate(e, t.opposite);
+                                    });
+                                },
+                            },
+                            {
+                                key: "setupBrushHandler",
+                                value: function () {
+                                    var t = this,
+                                        e = this.w;
+                                    e.config.chart.brush.enabled &&
+                                        "function" != typeof e.config.chart.events.selection &&
+                                        (e.config.chart.brush.targets || [e.config.chart.brush.target]).forEach(function (i) {
+                                            var a = ApexCharts.getChartByID(i);
+                                            a.w.globals.brushSource = t.ctx;
+                                            var s = function () {
+                                                t.ctx._updateOptions({ chart: { selection: { xaxis: { min: a.w.globals.minX, max: a.w.globals.maxX } } } }, !1, !1);
+                                            };
+                                            "function" != typeof a.w.config.chart.events.zoomed &&
+                                                (a.w.config.chart.events.zoomed = function () {
+                                                    s();
+                                                }),
+                                                "function" != typeof a.w.config.chart.events.scrolled &&
+                                                    (a.w.config.chart.events.scrolled = function () {
+                                                        s();
+                                                    }),
+                                                (e.config.chart.events.selection = function (t, i) {
+                                                    var s = p.clone(e.config.yaxis);
+                                                    e.config.chart.brush.autoScaleYaxis && (s = new Z(a).autoScaleY(a, s, i));
+                                                    a._updateOptions({ xaxis: { min: i.xaxis.min, max: i.xaxis.max }, yaxis: s }, !1, !1, !1);
+                                                });
+                                        });
+                                },
+                            },
+                        ]),
+                        t
+                    );
+                })();
+            var K = setTimeout;
+            function tt() {}
+            function et(t) {
+                if (!(this instanceof et)) throw new TypeError("Promises must be constructed via new");
+                if ("function" != typeof t) throw new TypeError("not a function");
+                (this._state = 0), (this._handled = !1), (this._value = void 0), (this._deferreds = []), ot(t, this);
+            }
+            function it(t, e) {
+                for (; 3 === t._state; ) t = t._value;
+                0 !== t._state
+                    ? ((t._handled = !0),
+                      et._immediateFn(function () {
+                          var i = 1 === t._state ? e.onFulfilled : e.onRejected;
+                          if (null !== i) {
+                              var a;
+                              try {
+                                  a = i(t._value);
+                              } catch (t) {
+                                  return void st(e.promise, t);
+                              }
+                              at(e.promise, a);
+                          } else (1 === t._state ? at : st)(e.promise, t._value);
+                      }))
+                    : t._deferreds.push(e);
+            }
+            function at(t, e) {
+                try {
+                    if (e === t) throw new TypeError("A promise cannot be resolved with itself.");
+                    if (e && ("object" == typeof e || "function" == typeof e)) {
+                        var i = e.then;
+                        if (e instanceof et) return (t._state = 3), (t._value = e), void nt(t);
+                        if ("function" == typeof i)
+                            return void ot(
+                                ((a = i),
+                                (s = e),
+                                function () {
+                                    a.apply(s, arguments);
+                                }),
+                                t
+                            );
+                    }
+                    (t._state = 1), (t._value = e), nt(t);
+                } catch (e) {
+                    st(t, e);
+                }
+                var a, s;
+            }
+            function st(t, e) {
+                (t._state = 2), (t._value = e), nt(t);
+            }
+            function nt(t) {
+                2 === t._state &&
+                    0 === t._deferreds.length &&
+                    et._immediateFn(function () {
+                        t._handled || et._unhandledRejectionFn(t._value);
+                    });
+                for (var e = 0, i = t._deferreds.length; e < i; e++) it(t, t._deferreds[e]);
+                t._deferreds = null;
+            }
+            function rt(t, e, i) {
+                (this.onFulfilled = "function" == typeof t ? t : null), (this.onRejected = "function" == typeof e ? e : null), (this.promise = i);
+            }
+            function ot(t, e) {
+                var i = !1;
+                try {
+                    t(
+                        function (t) {
+                            i || ((i = !0), at(e, t));
+                        },
+                        function (t) {
+                            i || ((i = !0), st(e, t));
+                        }
+                    );
+                } catch (t) {
+                    if (i) return;
+                    (i = !0), st(e, t);
+                }
+            }
+            (et.prototype.catch = function (t) {
+                return this.then(null, t);
+            }),
+                (et.prototype.then = function (t, e) {
+                    var i = new this.constructor(tt);
+                    return it(this, new rt(t, e, i)), i;
+                }),
+                (et.prototype.finally = function (t) {
+                    var e = this.constructor;
+                    return this.then(
+                        function (i) {
+                            return e.resolve(t()).then(function () {
+                                return i;
+                            });
+                        },
+                        function (i) {
+                            return e.resolve(t()).then(function () {
+                                return e.reject(i);
+                            });
+                        }
+                    );
+                }),
+                (et.all = function (t) {
+                    return new et(function (e, i) {
+                        if (!t || void 0 === t.length) throw new TypeError("Promise.all accepts an array");
+                        var a = Array.prototype.slice.call(t);
+                        if (0 === a.length) return e([]);
+                        var s = a.length;
+                        function n(t, r) {
+                            try {
+                                if (r && ("object" == typeof r || "function" == typeof r)) {
+                                    var o = r.then;
+                                    if ("function" == typeof o)
+                                        return void o.call(
+                                            r,
+                                            function (e) {
+                                                n(t, e);
+                                            },
+                                            i
+                                        );
+                                }
+                                (a[t] = r), 0 == --s && e(a);
+                            } catch (t) {
+                                i(t);
+                            }
+                        }
+                        for (var r = 0; r < a.length; r++) n(r, a[r]);
+                    });
+                }),
+                (et.resolve = function (t) {
+                    return t && "object" == typeof t && t.constructor === et
+                        ? t
+                        : new et(function (e) {
+                              e(t);
+                          });
+                }),
+                (et.reject = function (t) {
+                    return new et(function (e, i) {
+                        i(t);
+                    });
+                }),
+                (et.race = function (t) {
+                    return new et(function (e, i) {
+                        for (var a = 0, s = t.length; a < s; a++) t[a].then(e, i);
+                    });
+                }),
+                (et._immediateFn =
+                    ("function" == typeof t &&
+                        function (e) {
+                            t(e);
+                        }) ||
+                    function (t) {
+                        K(t, 0);
+                    }),
+                (et._unhandledRejectionFn = function (t) {
+                    "undefined" != typeof console && console && console.warn("Possible Unhandled Promise Rejection:", t);
+                });
+            var lt,
+                ht,
+                ct = (function () {
+                    function t(e) {
+                        n(this, t), (this.ctx = e), (this.w = e.w);
+                    }
+                    return (
+                        o(t, [
+                            {
+                                key: "getSvgString",
+                                value: function () {
+                                    return this.w.globals.dom.Paper.svg();
+                                },
+                            },
+                            {
+                                key: "cleanup",
+                                value: function () {
+                                    var t = this.w,
+                                        e = t.globals.dom.baseEl.querySelector(".apexcharts-xcrosshairs"),
+                                        i = t.globals.dom.baseEl.querySelector(".apexcharts-ycrosshairs");
+                                    e && e.setAttribute("x", -500), i && (i.setAttribute("y1", -100), i.setAttribute("y2", -100));
+                                },
+                            },
+                            {
+                                key: "svgUrl",
+                                value: function () {
+                                    this.cleanup();
+                                    var t = this.getSvgString(),
+                                        e = new Blob([t], { type: "image/svg+xml;charset=utf-8" });
+                                    return URL.createObjectURL(e);
+                                },
+                            },
+                            {
+                                key: "dataURI",
+                                value: function () {
+                                    var t = this;
+                                    return new et(function (e) {
+                                        var i = t.w;
+                                        t.cleanup();
+                                        var a = document.createElement("canvas");
+                                        (a.width = i.globals.svgWidth), (a.height = i.globals.svgHeight);
+                                        var s = "transparent" === i.config.chart.background ? "#fff" : i.config.chart.background,
+                                            n = a.getContext("2d");
+                                        (n.fillStyle = s), n.fillRect(0, 0, a.width, a.height);
+                                        var r = window.URL || window.webkitURL || window,
+                                            o = new Image();
+                                        o.crossOrigin = "anonymous";
+                                        var l = t.getSvgString(),
+                                            h = "data:image/svg+xml," + encodeURIComponent(l);
+                                        (o.onload = function () {
+                                            n.drawImage(o, 0, 0), r.revokeObjectURL(h);
+                                            var t = a.toDataURL("image/png");
+                                            e(t);
+                                        }),
+                                            (o.src = h);
+                                    });
+                                },
+                            },
+                            {
+                                key: "exportToSVG",
+                                value: function () {
+                                    this.triggerDownload(this.svgUrl(), ".svg");
+                                },
+                            },
+                            {
+                                key: "exportToPng",
+                                value: function () {
+                                    var t = this;
+                                    this.dataURI().then(function (e) {
+                                        t.triggerDownload(e, ".png");
+                                    });
+                                },
+                            },
+                            {
+                                key: "triggerDownload",
+                                value: function (t, e) {
+                                    var i = document.createElement("a");
+                                    (i.href = t), (i.download = this.w.globals.chartID + e), document.body.appendChild(i), i.click(), document.body.removeChild(i);
+                                },
+                            },
+                        ]),
+                        t
+                    );
+                })(),
+                dt = (function () {
+                    function t(e) {
+                        n(this, t), (this.ctx = e), (this.w = e.w);
+                        var i = this.w;
+                        (this.anim = new v(this.ctx)),
+                            (this.xaxisLabels = i.globals.labels.slice()),
+                            (this.animX = i.config.grid.xaxis.lines.animate && i.config.chart.animations.enabled),
+                            (this.animY = i.config.grid.yaxis.lines.animate && i.config.chart.animations.enabled),
+                            i.globals.timelineLabels.length > 0 && (this.xaxisLabels = i.globals.timelineLabels.slice());
+                    }
+                    return (
+                        o(t, [
+                            {
+                                key: "drawGridArea",
+                                value: function () {
+                                    var t = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : null,
+                                        e = this.w,
+                                        i = new m(this.ctx);
+                                    null === t && (t = i.group({ class: "apexcharts-grid" }));
+                                    var a = i.drawLine(e.globals.padHorizontal, 1, e.globals.padHorizontal, e.globals.gridHeight, "transparent"),
+                                        s = i.drawLine(e.globals.padHorizontal, e.globals.gridHeight, e.globals.gridWidth, e.globals.gridHeight, "transparent");
+                                    return t.add(s), t.add(a), t;
+                                },
+                            },
+                            {
+                                key: "drawGrid",
+                                value: function () {
+                                    var t = this.w,
+                                        e = new q(this.ctx),
+                                        i = new B(this.ctx),
+                                        a = this.w.globals,
+                                        s = null;
+                                    if (a.axisCharts) {
+                                        if (t.config.grid.show) (s = this.renderGrid()), a.dom.elGraphical.add(s.el), this.drawGridArea(s.el);
+                                        else {
+                                            var n = this.drawGridArea();
+                                            a.dom.elGraphical.add(n);
+                                        }
+                                        null !== s && e.xAxisLabelCorrections(s.xAxisTickWidth), i.setYAxisTextAlignments();
+                                    }
+                                },
+                            },
+                            {
+                                key: "createGridMask",
+                                value: function () {
+                                    var t = this.w,
+                                        e = t.globals,
+                                        i = new m(this.ctx),
+                                        a = Array.isArray(t.config.stroke.width) ? 0 : t.config.stroke.width;
+                                    if (Array.isArray(t.config.stroke.width)) {
+                                        var s = 0;
+                                        t.config.stroke.width.forEach(function (t) {
+                                            s = Math.max(s, t);
+                                        }),
+                                            (a = s);
+                                    }
+                                    (e.dom.elGridRectMask = document.createElementNS(e.SVGNS, "clipPath")),
+                                        e.dom.elGridRectMask.setAttribute("id", "gridRectMask".concat(e.cuid)),
+                                        (e.dom.elGridRectMarkerMask = document.createElementNS(e.SVGNS, "clipPath")),
+                                        e.dom.elGridRectMarkerMask.setAttribute("id", "gridRectMarkerMask".concat(e.cuid)),
+                                        (e.dom.elGridRect = i.drawRect(-a / 2, -a / 2, e.gridWidth + a, e.gridHeight + a, 0, "#fff")),
+                                        new A(this).getLargestMarkerSize();
+                                    var n = t.globals.markers.largestSize + 1;
+                                    (e.dom.elGridRectMarker = i.drawRect(-n, -n, e.gridWidth + 2 * n, e.gridHeight + 2 * n, 0, "#fff")),
+                                        e.dom.elGridRectMask.appendChild(e.dom.elGridRect.node),
+                                        e.dom.elGridRectMarkerMask.appendChild(e.dom.elGridRectMarker.node);
+                                    var r = e.dom.baseEl.querySelector("defs");
+                                    r.appendChild(e.dom.elGridRectMask), r.appendChild(e.dom.elGridRectMarkerMask);
+                                },
+                            },
+                            {
+                                key: "renderGrid",
+                                value: function () {
+                                    var t = this.w,
+                                        e = new m(this.ctx),
+                                        i = t.config.grid.strokeDashArray,
+                                        a = e.group({ class: "apexcharts-grid" }),
+                                        s = e.group({ class: "apexcharts-gridlines-horizontal" }),
+                                        n = e.group({ class: "apexcharts-gridlines-vertical" });
+                                    a.add(s), a.add(n);
+                                    for (var r, o = 8, l = 0; l < t.globals.series.length && (void 0 !== t.globals.yAxisScale[l] && (o = t.globals.yAxisScale[l].result.length - 1), !(o > 2)); l++);
+                                    if (t.globals.isBarHorizontal) {
+                                        if (((r = o), t.config.grid.xaxis.lines.show || t.config.xaxis.axisTicks.show))
+                                            for (var h, c = t.globals.padHorizontal, d = t.globals.gridHeight, u = 0; u < r + 1 && ((h = c = c + t.globals.gridWidth / r + 0.3), u !== r - 1); u++) {
+                                                if (t.config.grid.xaxis.lines.show) {
+                                                    var f = e.drawLine(c, 0, h, d, t.config.grid.borderColor, i);
+                                                    f.node.classList.add("apexcharts-gridline"), n.add(f), this.animX && this.animateLine(f, { x1: 0, x2: 0 }, { x1: c, x2: h });
+                                                }
+                                                new q(this.ctx).drawXaxisTicks(c, a);
+                                            }
+                                        if (t.config.grid.yaxis.lines.show)
+                                            for (var g = 0, p = 0, x = t.globals.gridWidth, v = 0; v < t.globals.dataPoints + 1; v++) {
+                                                var b = e.drawLine(0, g, x, p, t.config.grid.borderColor, i);
+                                                s.add(b), b.node.classList.add("apexcharts-gridline"), this.animY && this.animateLine(b, { y1: g + 20, y2: p + 20 }, { y1: g, y2: p }), (p = g += t.globals.gridHeight / t.globals.dataPoints);
+                                            }
+                                    } else {
+                                        if (((r = this.xaxisLabels.length), t.config.grid.xaxis.lines.show || t.config.xaxis.axisTicks.show)) {
+                                            var y,
+                                                w = t.globals.padHorizontal,
+                                                k = t.globals.gridHeight;
+                                            if (t.globals.timelineLabels.length > 0)
+                                                for (var S = 0; S < r; S++) {
+                                                    if (((w = this.xaxisLabels[S].position), (y = this.xaxisLabels[S].position), t.config.grid.xaxis.lines.show && w > 0 && w < t.globals.gridWidth)) {
+                                                        var A = e.drawLine(w, 0, y, k, t.config.grid.borderColor, i);
+                                                        A.node.classList.add("apexcharts-gridline"), n.add(A), this.animX && this.animateLine(A, { x1: 0, x2: 0 }, { x1: w, x2: y });
+                                                    }
+                                                    var C = new q(this.ctx);
+                                                    (S === r - 1 && t.globals.skipLastTimelinelabel) || C.drawXaxisTicks(w, a);
+                                                }
+                                            else
+                                                for (var L = r, E = 0; E < L; E++) {
+                                                    var P = L;
+                                                    if ((t.globals.isXNumeric && "bar" !== t.config.chart.type && (P -= 1), (y = w += t.globals.gridWidth / P), E === P - 1)) break;
+                                                    if (t.config.grid.xaxis.lines.show) {
+                                                        var T = e.drawLine(w, 0, y, k, t.config.grid.borderColor, i);
+                                                        T.node.classList.add("apexcharts-gridline"), n.add(T), this.animX && this.animateLine(T, { x1: 0, x2: 0 }, { x1: w, x2: y });
+                                                    }
+                                                    new q(this.ctx).drawXaxisTicks(w, a);
+                                                }
+                                        }
+                                        if (t.config.grid.yaxis.lines.show)
+                                            for (var M = 0, z = 0, I = t.globals.gridWidth, X = 0; X < o + 1; X++) {
+                                                var F = e.drawLine(0, M, I, z, t.config.grid.borderColor, i);
+                                                s.add(F), F.node.classList.add("apexcharts-gridline"), this.animY && this.animateLine(F, { y1: M + 20, y2: z + 20 }, { y1: M, y2: z }), (z = M += t.globals.gridHeight / o);
+                                            }
+                                    }
+                                    return this.drawGridBands(a, r, o), { el: a, xAxisTickWidth: t.globals.gridWidth / r };
+                                },
+                            },
+                            {
+                                key: "drawGridBands",
+                                value: function (t, e, i) {
+                                    var a = this.w,
+                                        s = new m(this.ctx);
+                                    if (void 0 !== a.config.grid.row.colors && a.config.grid.row.colors.length > 0)
+                                        for (var n = 0, r = a.globals.gridHeight / i, o = a.globals.gridWidth, l = 0, h = 0; l < i; l++, h++) {
+                                            h >= a.config.grid.row.colors.length && (h = 0);
+                                            var c = a.config.grid.row.colors[h],
+                                                d = s.drawRect(0, n, o, r, 0, c, a.config.grid.row.opacity);
+                                            t.add(d), d.node.classList.add("apexcharts-gridRow"), (n += a.globals.gridHeight / i);
+                                        }
+                                    if (void 0 !== a.config.grid.column.colors && a.config.grid.column.colors.length > 0)
+                                        for (var u = a.globals.padHorizontal, f = a.globals.padHorizontal + a.globals.gridWidth / e, g = a.globals.gridHeight, p = 0, x = 0; p < e; p++, x++) {
+                                            x >= a.config.grid.column.colors.length && (x = 0);
+                                            var v = a.config.grid.column.colors[x],
+                                                b = s.drawRect(u, 0, f, g, 0, v, a.config.grid.column.opacity);
+                                            b.node.classList.add("apexcharts-gridColumn"), t.add(b), (u += a.globals.gridWidth / e);
+                                        }
+                                },
+                            },
+                            {
+                                key: "animateLine",
+                                value: function (t, e, i) {
+                                    var a = this.w,
+                                        s = a.config.chart.animations;
+                                    if (s && !a.globals.resized && !a.globals.dataChanged) {
+                                        var n = s.speed;
+                                        this.anim.animateLine(t, e, i, n);
+                                    }
+                                },
+                            },
+                        ]),
+                        t
+                    );
+                })(),
+                ut = (function () {
+                    function t(e) {
+                        n(this, t), (this.ctx = e), (this.w = e.w);
+                    }
+                    return (
+                        o(t, [
+                            {
+                                key: "checkResponsiveConfig",
+                                value: function (t) {
+                                    var e = this,
+                                        i = this.w,
+                                        a = i.config;
+                                    if (0 !== a.responsive.length) {
+                                        var s = a.responsive.slice();
+                                        s.sort(function (t, e) {
+                                            return t.breakpoint > e.breakpoint ? 1 : e.breakpoint > t.breakpoint ? -1 : 0;
+                                        }).reverse();
+                                        var n = new C({}),
+                                            r = function () {
+                                                var t = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {},
+                                                    a = s[0].breakpoint,
+                                                    r = window.innerWidth > 0 ? window.innerWidth : screen.width;
+                                                if (r > a) {
+                                                    var o = A.extendArrayProps(n, i.globals.initialConfig);
+                                                    (t = p.extend(o, t)), (t = p.extend(i.config, t)), e.overrideResponsiveOptions(t);
+                                                } else for (var l = 0; l < s.length; l++) r < s[l].breakpoint && ((t = A.extendArrayProps(n, s[l].options)), (t = p.extend(i.config, t)), e.overrideResponsiveOptions(t));
+                                            };
+                                        if (t) {
+                                            var o = A.extendArrayProps(n, t);
+                                            (o = p.extend(i.config, o)), r((o = p.extend(o, t)));
+                                        } else r({});
+                                    }
+                                },
+                            },
+                            {
+                                key: "overrideResponsiveOptions",
+                                value: function (t) {
+                                    var e = new C(t).init();
+                                    this.w.config = e;
+                                },
+                            },
+                        ]),
+                        t
+                    );
+                })(),
+                ft = (function () {
+                    function t(e) {
+                        n(this, t), (this.ctx = e), (this.w = e.w), (this.colors = []);
+                    }
+                    return (
+                        o(t, [
+                            {
+                                key: "init",
+                                value: function () {
+                                    this.setDefaultColors();
+                                },
+                            },
+                            {
+                                key: "setDefaultColors",
+                                value: function () {
+                                    var t = this.w,
+                                        e = new p();
+                                    if (
+                                        (t.globals.dom.elWrap.classList.add(t.config.theme.mode), void 0 === t.config.colors ? (t.globals.colors = this.predefined()) : (t.globals.colors = t.config.colors), t.config.theme.monochrome.enabled)
+                                    ) {
+                                        var i = [],
+                                            a = t.globals.series.length;
+                                        t.config.plotOptions.bar.distributed && "bar" === t.config.chart.type && (a = t.globals.series[0].length * t.globals.series.length);
+                                        for (var s = t.config.theme.monochrome.color, n = 1 / (a / t.config.theme.monochrome.shadeIntensity), r = t.config.theme.monochrome.shadeTo, o = 0, l = 0; l < a; l++) {
+                                            var h = void 0;
+                                            "dark" === r ? ((h = e.shadeColor(-1 * o, s)), (o += n)) : ((h = e.shadeColor(o, s)), (o += n)), i.push(h);
+                                        }
+                                        t.globals.colors = i.slice();
+                                    }
+                                    var c = t.globals.colors.slice();
+                                    this.pushExtraColors(t.globals.colors),
+                                        void 0 === t.config.stroke.colors ? (t.globals.stroke.colors = c) : (t.globals.stroke.colors = t.config.stroke.colors),
+                                        this.pushExtraColors(t.globals.stroke.colors),
+                                        void 0 === t.config.fill.colors ? (t.globals.fill.colors = c) : (t.globals.fill.colors = t.config.fill.colors),
+                                        this.pushExtraColors(t.globals.fill.colors),
+                                        void 0 === t.config.dataLabels.style.colors ? (t.globals.dataLabels.style.colors = c) : (t.globals.dataLabels.style.colors = t.config.dataLabels.style.colors),
+                                        this.pushExtraColors(t.globals.dataLabels.style.colors, 50),
+                                        void 0 === t.config.plotOptions.radar.polygons.fill.colors
+                                            ? (t.globals.radarPolygons.fill.colors = ["dark" === t.config.theme.mode ? "#202D48" : "#fff"])
+                                            : (t.globals.radarPolygons.fill.colors = t.config.plotOptions.radar.polygons.fill.colors),
+                                        this.pushExtraColors(t.globals.radarPolygons.fill.colors, 20),
+                                        void 0 === t.config.markers.colors ? (t.globals.markers.colors = c) : (t.globals.markers.colors = t.config.markers.colors),
+                                        this.pushExtraColors(t.globals.markers.colors);
+                                },
+                            },
+                            {
+                                key: "pushExtraColors",
+                                value: function (t, e) {
+                                    var i = arguments.length > 2 && void 0 !== arguments[2] ? arguments[2] : null,
+                                        a = this.w,
+                                        s = e || a.globals.series.length;
+                                    if (
+                                        (null === i && (i = ("bar" === a.config.chart.type && a.config.plotOptions.bar.distributed) || ("heatmap" === a.config.chart.type && a.config.plotOptions.heatmap.colorScale.inverse)),
+                                        i && (s = a.globals.series[0].length * a.globals.series.length),
+                                        t.length < s)
+                                    )
+                                        for (var n = s - t.length, r = 0; r < n; r++) t.push(t[r]);
+                                },
+                            },
+                            {
+                                key: "updateThemeOptions",
+                                value: function (t) {
+                                    (t.chart = t.chart || {}), (t.tooltip = t.tooltip || {});
+                                    var e = t.theme.mode || "light",
+                                        i = t.theme.palette ? t.theme.palette : "dark" === e ? "palette4" : "palette1",
+                                        a = t.chart.foreColor ? t.chart.foreColor : "dark" === e ? "#f6f7f8" : "#373d3f";
+                                    return (t.tooltip.theme = e), (t.chart.foreColor = a), (t.theme.palette = i), t;
+                                },
+                            },
+                            {
+                                key: "predefined",
+                                value: function () {
+                                    switch (this.w.config.theme.palette) {
+                                        case "palette1":
+                                            this.colors = ["#008FFB", "#00E396", "#FEB019", "#FF4560", "#775DD0"];
+                                            break;
+                                        case "palette2":
+                                            this.colors = ["#3f51b5", "#03a9f4", "#4caf50", "#f9ce1d", "#FF9800"];
+                                            break;
+                                        case "palette3":
+                                            this.colors = ["#33b2df", "#546E7A", "#d4526e", "#13d8aa", "#A5978B"];
+                                            break;
+                                        case "palette4":
+                                            this.colors = ["#4ecdc4", "#c7f464", "#81D4FA", "#fd6a6a", "#546E7A"];
+                                            break;
+                                        case "palette5":
+                                            this.colors = ["#2b908f", "#f9a3a4", "#90ee7e", "#fa4443", "#69d2e7"];
+                                            break;
+                                        case "palette6":
+                                            this.colors = ["#449DD1", "#F86624", "#EA3546", "#662E9B", "#C5D86D"];
+                                            break;
+                                        case "palette7":
+                                            this.colors = ["#D7263D", "#1B998B", "#2E294E", "#F46036", "#E2C044"];
+                                            break;
+                                        case "palette8":
+                                            this.colors = ["#662E9B", "#F86624", "#F9C80E", "#EA3546", "#43BCCD"];
+                                            break;
+                                        case "palette9":
+                                            this.colors = ["#5C4742", "#A5978B", "#8D5B4C", "#5A2A27", "#C4BBAF"];
+                                            break;
+                                        case "palette10":
+                                            this.colors = ["#A300D6", "#7D02EB", "#5653FE", "#2983FF", "#00B1F2"];
+                                            break;
+                                        default:
+                                            this.colors = ["#008FFB", "#00E396", "#FEB019", "#FF4560", "#775DD0"];
+                                    }
+                                    return this.colors;
+                                },
+                            },
+                        ]),
+                        t
+                    );
+                })(),
+                gt = (function () {
+                    function t(e) {
+                        n(this, t), (this.w = e.w), (this.ttCtx = e), (this.ctx = e.ctx);
+                    }
+                    return (
+                        o(t, [
+                            {
+                                key: "getNearestValues",
+                                value: function (t) {
+                                    var e = t.hoverArea,
+                                        i = t.elGrid,
+                                        a = t.clientX,
+                                        s = t.clientY,
+                                        n = t.hasBars,
+                                        r = this.w,
+                                        o = r.globals.gridWidth,
+                                        l = o / (r.globals.dataPoints - 1),
+                                        h = i.getBoundingClientRect();
+                                    ((n && r.globals.comboCharts) || n) && (l = o / r.globals.dataPoints);
+                                    var c = a - h.left,
+                                        d = s - h.top;
+                                    c < 0 || d < 0 || c > r.globals.gridWidth || d > r.globals.gridHeight
+                                        ? (e.classList.remove("hovering-zoom"), e.classList.remove("hovering-pan"))
+                                        : r.globals.zoomEnabled
+                                        ? (e.classList.remove("hovering-pan"), e.classList.add("hovering-zoom"))
+                                        : r.globals.panEnabled && (e.classList.remove("hovering-zoom"), e.classList.add("hovering-pan"));
+                                    var u = Math.round(c / l);
+                                    n && ((u = Math.ceil(c / l)), (u -= 1));
+                                    for (var f, g = null, p = null, x = [], v = 0; v < r.globals.seriesXvalues.length; v++) x.push([r.globals.seriesXvalues[v][0] - 1e-6].concat(r.globals.seriesXvalues[v]));
+                                    return (
+                                        (x = x.map(function (t) {
+                                            return t.filter(function (t) {
+                                                return t;
+                                            });
+                                        })),
+                                        (f = r.globals.seriesYvalues.map(function (t) {
+                                            return t.filter(function (t) {
+                                                return t;
+                                            });
+                                        })),
+                                        r.globals.isXNumeric && ((g = (p = this.closestInMultiArray(c, d, x, f)).index), (u = p.j), null !== g && ((x = r.globals.seriesXvalues[g]), (u = (p = this.closestInArray(c, x)).index))),
+                                        (!u || u < 1) && (u = 0),
+                                        { capturedSeries: g, j: u, hoverX: c, hoverY: d }
+                                    );
+                                },
+                            },
+                            {
+                                key: "closestInMultiArray",
+                                value: function (t, e, i, a) {
+                                    var s = this.w,
+                                        n = 0,
+                                        r = null,
+                                        o = -1;
+                                    s.globals.series.length > 1 ? (n = this.getFirstActiveXArray(i)) : (r = 0);
+                                    var l = a[n][0],
+                                        h = i[n][0],
+                                        c = Math.abs(t - h),
+                                        d = Math.abs(e - l),
+                                        u = d + c;
+                                    return (
+                                        a.map(function (s, n) {
+                                            s.map(function (s, l) {
+                                                var h = Math.abs(e - a[n][l]),
+                                                    f = Math.abs(t - i[n][l]),
+                                                    g = f + h;
+                                                g < u && ((u = g), (c = f), (d = h), (r = n), (o = l));
+                                            });
+                                        }),
+                                        { index: r, j: o }
+                                    );
+                                },
+                            },
+                            {
+                                key: "getFirstActiveXArray",
+                                value: function (t) {
+                                    for (
+                                        var e = 0,
+                                            i = new A(this.ctx),
+                                            a = t.map(function (t, e) {
+                                                return t.length > 0 ? e : -1;
+                                            }),
+                                            s = 0;
+                                        s < a.length;
+                                        s++
+                                    ) {
+                                        var n = i.getSeriesTotalByIndex(s);
+                                        if (-1 !== a[s] && 0 !== n && !i.seriesHaveSameValues(s)) {
+                                            e = a[s];
+                                            break;
+                                        }
+                                    }
+                                    return e;
+                                },
+                            },
+                            {
+                                key: "closestInArray",
+                                value: function (t, e) {
+                                    for (var i = e[0], a = null, s = Math.abs(t - i), n = 0; n < e.length; n++) {
+                                        var r = Math.abs(t - e[n]);
+                                        r < s && ((s = r), (i = e[n]), (a = n));
+                                    }
+                                    return { index: a };
+                                },
+                            },
+                            {
+                                key: "isXoverlap",
+                                value: function (t) {
+                                    var e = [],
+                                        i = this.w.globals.seriesX.filter(function (t) {
+                                            return void 0 !== t[0];
+                                        });
+                                    if (i.length > 0) for (var a = 0; a < i.length - 1; a++) void 0 !== i[a][t] && void 0 !== i[a + 1][t] && i[a][t] !== i[a + 1][t] && e.push("unEqual");
+                                    return 0 === e.length;
+                                },
+                            },
+                            {
+                                key: "isinitialSeriesSameLen",
+                                value: function () {
+                                    for (var t = !0, e = this.w.globals.initialSeries, i = 0; i < e.length - 1; i++)
+                                        if (e[i].data.length !== e[i + 1].data.length) {
+                                            t = !1;
+                                            break;
+                                        }
+                                    return t;
+                                },
+                            },
+                            {
+                                key: "getBarsHeight",
+                                value: function (t) {
+                                    return g(t).reduce(function (t, e) {
+                                        return t + e.getBBox().height;
+                                    }, 0);
+                                },
+                            },
+                            {
+                                key: "toggleAllTooltipSeriesGroups",
+                                value: function (t) {
+                                    var e = this.w,
+                                        i = this.ttCtx;
+                                    0 === i.allTooltipSeriesGroups.length && (i.allTooltipSeriesGroups = e.globals.dom.baseEl.querySelectorAll(".apexcharts-tooltip-series-group"));
+                                    for (var a = i.allTooltipSeriesGroups, s = 0; s < a.length; s++)
+                                        "enable" === t ? (a[s].classList.add("active"), (a[s].style.display = e.config.tooltip.items.display)) : (a[s].classList.remove("active"), (a[s].style.display = "none"));
+                                },
+                            },
+                        ]),
+                        t
+                    );
+                })(),
+                pt = (function () {
+                    function t(e) {
+                        n(this, t), (this.w = e.w), (this.ctx = e.ctx), (this.ttCtx = e), (this.tooltipUtil = new gt(e));
+                    }
+                    return (
+                        o(t, [
+                            {
+                                key: "drawSeriesTexts",
+                                value: function (t) {
+                                    var e = t.shared,
+                                        i = void 0 === e || e,
+                                        a = t.ttItems,
+                                        s = t.i,
+                                        n = void 0 === s ? 0 : s,
+                                        r = t.j,
+                                        o = void 0 === r ? null : r;
+                                    void 0 !== this.w.config.tooltip.custom ? this.handleCustomTooltip({ i: n, j: o }) : this.toggleActiveInactiveSeries(i);
+                                    var l = this.getValuesToPrint({ i: n, j: o });
+                                    this.printLabels({ i: n, j: o, values: l, ttItems: a, shared: i });
+                                    var h = this.ttCtx.getElTooltip();
+                                    (this.ttCtx.tooltipRect.ttWidth = h.getBoundingClientRect().width), (this.ttCtx.tooltipRect.ttHeight = h.getBoundingClientRect().height);
+                                },
+                            },
+                            {
+                                key: "printLabels",
+                                value: function (t) {
+                                    var e,
+                                        i = t.i,
+                                        a = t.j,
+                                        s = t.values,
+                                        n = t.ttItems,
+                                        r = t.shared,
+                                        o = this.w,
+                                        l = s.xVal,
+                                        h = s.zVal,
+                                        c = s.xAxisTTVal,
+                                        d = "",
+                                        u = o.globals.colors[i];
+                                    null !== a && o.config.plotOptions.bar.distributed && (u = o.globals.colors[a]);
+                                    for (var f = 0, g = o.globals.series.length - 1; f < o.globals.series.length; f++, g--) {
+                                        var p = this.getFormatters(i);
+                                        if (((d = this.getSeriesName({ fn: p.yLbTitleFormatter, index: i, seriesIndex: i, j: a })), r)) {
+                                            var x = o.config.tooltip.inverseOrder ? g : f;
+                                            (p = this.getFormatters(x)),
+                                                (d = this.getSeriesName({ fn: p.yLbTitleFormatter, index: x, seriesIndex: i, j: a })),
+                                                (u = o.globals.colors[x]),
+                                                (e = p.yLbFormatter(o.globals.series[x][a], { series: o.globals.series, seriesIndex: x, dataPointIndex: a, w: o })),
+                                                ((this.ttCtx.hasBars() && o.config.chart.stacked && 0 === o.globals.series[x][a]) || void 0 === o.globals.series[x][a]) && (e = void 0);
+                                        } else e = p.yLbFormatter(o.globals.series[i][a], { series: o.globals.series, seriesIndex: i, dataPointIndex: a, w: o });
+                                        null === a && (e = p.yLbFormatter(o.globals.series[i], o)), this.DOMHandling({ t: f, ttItems: n, values: { val: e, xVal: l, xAxisTTVal: c, zVal: h }, seriesName: d, shared: r, pColor: u });
+                                    }
+                                },
+                            },
+                            {
+                                key: "getFormatters",
+                                value: function (t) {
+                                    var e,
+                                        i = this.w,
+                                        a = i.globals.yLabelFormatters[t];
+                                    return (
+                                        void 0 !== i.globals.ttVal
+                                            ? Array.isArray(i.globals.ttVal)
+                                                ? ((a = i.globals.ttVal[t] && i.globals.ttVal[t].formatter), (e = i.globals.ttVal[t] && i.globals.ttVal[t].title && i.globals.ttVal[t].title.formatter))
+                                                : ((a = i.globals.ttVal.formatter), "function" == typeof i.globals.ttVal.title.formatter && (e = i.globals.ttVal.title.formatter))
+                                            : (e = i.config.tooltip.y.title.formatter),
+                                        "function" != typeof a &&
+                                            (a = i.globals.yLabelFormatters[0]
+                                                ? i.globals.yLabelFormatters[0]
+                                                : function (t) {
+                                                      return t;
+                                                  }),
+                                        "function" != typeof e &&
+                                            (e = function (t) {
+                                                return t;
+                                            }),
+                                        { yLbFormatter: a, yLbTitleFormatter: e }
+                                    );
+                                },
+                            },
+                            {
+                                key: "getSeriesName",
+                                value: function (t) {
+                                    var e = t.fn,
+                                        i = t.index,
+                                        a = t.seriesIndex,
+                                        s = t.j,
+                                        n = this.w;
+                                    return e(String(n.globals.seriesNames[i]), { series: n.globals.series, seriesIndex: a, dataPointIndex: s, w: n });
+                                },
+                            },
+                            {
+                                key: "DOMHandling",
+                                value: function (t) {
+                                    var e = t.t,
+                                        i = t.ttItems,
+                                        a = t.values,
+                                        s = t.seriesName,
+                                        n = t.shared,
+                                        r = t.pColor,
+                                        o = this.w,
+                                        l = this.ttCtx,
+                                        h = a.val,
+                                        c = a.xVal,
+                                        d = a.xAxisTTVal,
+                                        u = a.zVal,
+                                        f = null;
+                                    (f = i[e].children),
+                                        o.config.tooltip.fillSeriesColor && ((i[e].style.backgroundColor = r), (f[0].style.display = "none")),
+                                        l.showTooltipTitle && (null === l.tooltipTitle && (l.tooltipTitle = o.globals.dom.baseEl.querySelector(".apexcharts-tooltip-title")), (l.tooltipTitle.innerHTML = c)),
+                                        l.blxaxisTooltip && (l.xaxisTooltipText.innerHTML = "" !== d ? d : c);
+                                    var g = i[e].querySelector(".apexcharts-tooltip-text-label");
+                                    g && (g.innerHTML = s ? s + ": " : "");
+                                    var p = i[e].querySelector(".apexcharts-tooltip-text-value");
+                                    (p && (p.innerHTML = h), f[0] && f[0].classList.contains("apexcharts-tooltip-marker") && (f[0].style.backgroundColor = r), o.config.tooltip.marker.show || (f[0].style.display = "none"), null !== u) &&
+                                        ((i[e].querySelector(".apexcharts-tooltip-text-z-label").innerHTML = o.config.tooltip.z.title), (i[e].querySelector(".apexcharts-tooltip-text-z-value").innerHTML = u));
+                                    n && f[0] && (null == h || o.globals.collapsedSeriesIndices.indexOf(e) > -1 ? (f[0].parentNode.style.display = "none") : (f[0].parentNode.style.display = o.config.tooltip.items.display));
+                                },
+                            },
+                            {
+                                key: "toggleActiveInactiveSeries",
+                                value: function (t) {
+                                    var e = this.w;
+                                    if (t) this.tooltipUtil.toggleAllTooltipSeriesGroups("enable");
+                                    else {
+                                        this.tooltipUtil.toggleAllTooltipSeriesGroups("disable");
+                                        var i = e.globals.dom.baseEl.querySelector(".apexcharts-tooltip-series-group");
+                                        i && (i.classList.add("active"), (i.style.display = e.config.tooltip.items.display));
+                                    }
+                                },
+                            },
+                            {
+                                key: "getValuesToPrint",
+                                value: function (t) {
+                                    var e = t.i,
+                                        i = t.j,
+                                        a = this.w,
+                                        s = this.ctx.series.filteredSeriesX(),
+                                        n = "",
+                                        r = null,
+                                        o = null,
+                                        l = { series: a.globals.series, seriesIndex: e, dataPointIndex: i, w: a },
+                                        h = a.globals.ttZFormatter;
+                                    null === i
+                                        ? (o = a.globals.series[e])
+                                        : a.globals.isXNumeric
+                                        ? ((n = s[e][i]), 0 === s[e].length && (n = s[this.tooltipUtil.getFirstActiveXArray(s)][i]))
+                                        : (n = void 0 !== a.globals.labels[i] ? a.globals.labels[i] : "");
+                                    var c = n;
+                                    a.globals.isXNumeric && "datetime" === a.config.xaxis.type ? (n = new _(this.ctx).xLabelFormat(a.globals.ttKeyFormatter, c)) : (n = a.globals.xLabelFormatter(c, l));
+                                    return (
+                                        void 0 !== a.config.tooltip.x.formatter && (n = a.globals.ttKeyFormatter(c, l)),
+                                        a.globals.seriesZ.length > 0 && a.globals.seriesZ[0].length > 0 && (r = h(a.globals.seriesZ[e][i], a)),
+                                        { val: o, xVal: n, xAxisTTVal: "function" == typeof a.config.xaxis.tooltip.formatter ? a.globals.xaxisTooltipFormatter(c, l) : n, zVal: r }
+                                    );
+                                },
+                            },
+                            {
+                                key: "handleCustomTooltip",
+                                value: function (t) {
+                                    var e = t.i,
+                                        i = t.j,
+                                        a = this.w;
+                                    this.ttCtx.getElTooltip().innerHTML = a.config.tooltip.custom({ ctx: this.ctx, series: a.globals.series, seriesIndex: e, dataPointIndex: i, w: a });
+                                },
+                            },
+                        ]),
+                        t
+                    );
+                })(),
+                xt = (function () {
+                    function t(e) {
+                        n(this, t), (this.ttCtx = e), (this.ctx = e.ctx), (this.w = e.w);
+                    }
+                    return (
+                        o(t, [
+                            {
+                                key: "moveXCrosshairs",
+                                value: function (t) {
+                                    var e = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : null,
+                                        i = this.ttCtx,
+                                        a = this.w,
+                                        s = i.getElXCrosshairs(),
+                                        n = t - i.xcrosshairsWidth / 2,
+                                        r = a.globals.labels.slice().length;
+                                    if (
+                                        (null !== e && (n = (a.globals.gridWidth / r) * e),
+                                        "tickWidth" === a.config.xaxis.crosshairs.width || "barWidth" === a.config.xaxis.crosshairs.width
+                                            ? n + i.xcrosshairsWidth > a.globals.gridWidth && (n = a.globals.gridWidth - i.xcrosshairsWidth)
+                                            : null !== e && (n += a.globals.gridWidth / r / 2),
+                                        n < 0 && (n = 0),
+                                        n > a.globals.gridWidth && (n = a.globals.gridWidth),
+                                        null !== s && (s.setAttribute("x", n), s.setAttribute("x1", n), s.setAttribute("x2", n), s.setAttribute("y2", a.globals.gridHeight), s.classList.add("active")),
+                                        i.blxaxisTooltip)
+                                    ) {
+                                        var o = n;
+                                        ("tickWidth" !== a.config.xaxis.crosshairs.width && "barWidth" !== a.config.xaxis.crosshairs.width) || (o = n + i.xcrosshairsWidth / 2), this.moveXAxisTooltip(o);
+                                    }
+                                },
+                            },
+                            {
+                                key: "moveYCrosshairs",
+                                value: function (t) {
+                                    var e = this.ttCtx;
+                                    null !== e.ycrosshairs && (m.setAttrs(e.ycrosshairs, { y1: t, y2: t }), m.setAttrs(e.ycrosshairsHidden, { y1: t, y2: t }));
+                                },
+                            },
+                            {
+                                key: "moveXAxisTooltip",
+                                value: function (t) {
+                                    var e = this.w,
+                                        i = this.ttCtx;
+                                    if (null !== i.xaxisTooltip) {
+                                        i.xaxisTooltip.classList.add("active");
+                                        var a = i.xaxisOffY + e.config.xaxis.tooltip.offsetY + e.globals.translateY + 1 + e.config.xaxis.offsetY;
+                                        if (((t -= i.xaxisTooltip.getBoundingClientRect().width / 2), !isNaN(t))) {
+                                            t += e.globals.translateX;
+                                            var s;
+                                            (s = new m(this.ctx).getTextRects(i.xaxisTooltipText.innerHTML)),
+                                                (i.xaxisTooltipText.style.minWidth = s.width + "px"),
+                                                (i.xaxisTooltip.style.left = t + "px"),
+                                                (i.xaxisTooltip.style.top = a + "px");
+                                        }
+                                    }
+                                },
+                            },
+                            {
+                                key: "moveYAxisTooltip",
+                                value: function (t) {
+                                    var e = this.w,
+                                        i = this.ttCtx;
+                                    null === i.yaxisTTEls && (i.yaxisTTEls = e.globals.dom.baseEl.querySelectorAll(".apexcharts-yaxistooltip"));
+                                    var a = parseInt(i.ycrosshairsHidden.getAttribute("y1")),
+                                        s = e.globals.translateY + a,
+                                        n = i.yaxisTTEls[t].getBoundingClientRect().height,
+                                        r = e.globals.translateYAxisX[t] - 2;
+                                    e.config.yaxis[t].opposite && (r -= 26),
+                                        (s -= n / 2),
+                                        -1 === e.globals.ignoreYAxisIndexes.indexOf(t)
+                                            ? (i.yaxisTTEls[t].classList.add("active"), (i.yaxisTTEls[t].style.top = s + "px"), (i.yaxisTTEls[t].style.left = r + e.config.yaxis[t].tooltip.offsetX + "px"))
+                                            : i.yaxisTTEls[t].classList.remove("active");
+                                },
+                            },
+                            {
+                                key: "moveTooltip",
+                                value: function (t, e) {
+                                    var i = arguments.length > 2 && void 0 !== arguments[2] ? arguments[2] : null,
+                                        a = this.w,
+                                        s = this.ttCtx,
+                                        n = s.getElTooltip(),
+                                        r = s.tooltipRect,
+                                        o = null !== i ? parseInt(i) : 1,
+                                        l = parseInt(t) + o + 5,
+                                        h = parseInt(e) + o / 2;
+                                    if ((l > a.globals.gridWidth / 2 && (l = l - r.ttWidth - o - 15), l > a.globals.gridWidth - r.ttWidth - 10 && (l = a.globals.gridWidth - r.ttWidth), l < -20 && (l = -20), a.config.tooltip.followCursor)) {
+                                        var c = s.getElGrid().getBoundingClientRect();
+                                        h = s.e.clientY + a.globals.translateY - c.top - r.ttHeight / 2;
+                                    }
+                                    var d = this.positionChecks(r, l, h);
+                                    (l = d.x), (h = d.y), isNaN(l) || ((l += a.globals.translateX), (n.style.left = l + "px"), (n.style.top = h + "px"));
+                                },
+                            },
+                            {
+                                key: "positionChecks",
+                                value: function (t, e, i) {
+                                    var a = this.w;
+                                    return t.ttHeight + i > a.globals.gridHeight && (i = a.globals.gridHeight - t.ttHeight + a.globals.translateY), i < 0 && (i = 0), { x: e, y: i };
+                                },
+                            },
+                            {
+                                key: "moveMarkers",
+                                value: function (t, e) {
+                                    var i = this.w,
+                                        a = this.ttCtx;
+                                    if (i.globals.markers.size[t] > 0)
+                                        for (var s = i.globals.dom.baseEl.querySelectorAll(" .apexcharts-series[data\\:realIndex='".concat(t, "'] .apexcharts-marker")), n = 0; n < s.length; n++)
+                                            parseInt(s[n].getAttribute("rel")) === e && (a.marker.resetPointsSize(), a.marker.enlargeCurrentPoint(e, s[n]));
+                                    else a.marker.resetPointsSize(), this.moveDynamicPointOnHover(e, t);
+                                },
+                            },
+                            {
+                                key: "moveDynamicPointOnHover",
+                                value: function (t, e) {
+                                    var i,
+                                        a,
+                                        s = this.w,
+                                        n = this.ttCtx,
+                                        r = s.globals.pointsArray,
+                                        o = s.config.markers.hover.size;
+                                    void 0 === o && (o = s.globals.markers.size[e] + s.config.markers.hover.sizeOffset), (i = r[e][t][0]), (a = r[e][t][1] ? r[e][t][1] : 0);
+                                    var l = s.globals.dom.baseEl.querySelector(".apexcharts-series[data\\:realIndex='".concat(e, "'] .apexcharts-series-markers circle"));
+                                    l && (l.setAttribute("r", o), l.setAttribute("cx", i), l.setAttribute("cy", a)), this.moveXCrosshairs(i), n.fixedTooltip || this.moveTooltip(i, a, o);
+                                },
+                            },
+                            {
+                                key: "moveDynamicPointsOnHover",
+                                value: function (t) {
+                                    var e,
+                                        i = this.ttCtx,
+                                        a = i.w,
+                                        s = 0,
+                                        n = 0,
+                                        r = a.globals.pointsArray;
+                                    e = new G(this.ctx).getActiveSeriesIndex();
+                                    var o = a.config.markers.hover.size;
+                                    void 0 === o && (o = a.globals.markers.size[e] + a.config.markers.hover.sizeOffset), r[e] && ((s = r[e][t][0]), (n = r[e][t][1]));
+                                    var l = null,
+                                        h = i.getAllMarkers();
+                                    if (null !== (l = null !== h ? h : a.globals.dom.baseEl.querySelectorAll(".apexcharts-series-markers circle")))
+                                        for (var c = 0; c < l.length; c++) {
+                                            var d = r[c];
+                                            if (d && d.length) {
+                                                var u = r[c][t][1];
+                                                l[c].setAttribute("cx", s);
+                                                var f = parseInt(l[c].parentNode.parentNode.parentNode.getAttribute("data:realIndex"));
+                                                null !== u ? (l[f] && l[f].setAttribute("r", o), l[f] && l[f].setAttribute("cy", u)) : l[f] && l[f].setAttribute("r", 0);
+                                            }
+                                        }
+                                    if ((this.moveXCrosshairs(s), !i.fixedTooltip)) {
+                                        var g = n || a.globals.gridHeight;
+                                        this.moveTooltip(s, g, o);
+                                    }
+                                },
+                            },
+                            {
+                                key: "moveStickyTooltipOverBars",
+                                value: function (t) {
+                                    var e,
+                                        i = this.w,
+                                        a = this.ttCtx,
+                                        s = i.globals.dom.baseEl.querySelector(
+                                            ".apexcharts-bar-series .apexcharts-series[rel='1'] path[j='"
+                                                .concat(t, "'], .apexcharts-candlestick-series .apexcharts-series[rel='1'] path[j='")
+                                                .concat(t, "'], .apexcharts-rangebar-series .apexcharts-series[rel='1'] path[j='")
+                                                .concat(t, "']")
+                                        ),
+                                        n = s ? parseFloat(s.getAttribute("cx")) : 0,
+                                        r = s ? parseFloat(s.getAttribute("barWidth")) : 0;
+                                    i.globals.isXNumeric ? (n -= r / 2) : ((n = a.xAxisTicksPositions[t - 1] + a.dataPointsDividedWidth / 2), isNaN(n) && (n = a.xAxisTicksPositions[t] - a.dataPointsDividedWidth / 2));
+                                    var o = a.getElGrid().getBoundingClientRect();
+                                    if (((e = a.e.clientY - o.top - a.tooltipRect.ttHeight / 2), this.moveXCrosshairs(n), !a.fixedTooltip)) {
+                                        var l = e || i.globals.gridHeight;
+                                        this.moveTooltip(n, l);
+                                    }
+                                },
+                            },
+                        ]),
+                        t
+                    );
+                })(),
+                vt = (function () {
+                    function t(e) {
+                        n(this, t), (this.w = e.w), (this.ttCtx = e), (this.ctx = e.ctx), (this.tooltipPosition = new xt(e));
+                    }
+                    return (
+                        o(t, [
+                            {
+                                key: "drawDynamicPoints",
+                                value: function () {
+                                    for (var t = this.w, e = new m(this.ctx), i = new T(this.ctx), a = t.globals.dom.baseEl.querySelectorAll(".apexcharts-series"), s = 0; s < a.length; s++) {
+                                        var n = parseInt(a[s].getAttribute("data:realIndex")),
+                                            r = t.globals.dom.baseEl.querySelector(".apexcharts-series[data\\:realIndex='".concat(n, "'] .apexcharts-series-markers-wrap"));
+                                        if (null !== r) {
+                                            var o = void 0,
+                                                l = "apexcharts-marker w".concat((Math.random() + 1).toString(36).substring(4));
+                                            ("line" !== t.config.chart.type && "area" !== t.config.chart.type) || t.globals.comboCharts || t.config.tooltip.intersect || (l += " no-pointer-events");
+                                            var h = i.getMarkerConfig(l, n);
+                                            (o = e.drawMarker(0, 0, h)).node.setAttribute("default-marker-size", 0);
+                                            var c = document.createElementNS(t.globals.SVGNS, "g");
+                                            c.classList.add("apexcharts-series-markers"), c.appendChild(o.node), r.appendChild(c);
+                                        }
+                                    }
+                                },
+                            },
+                            {
+                                key: "enlargeCurrentPoint",
+                                value: function (t, e) {
+                                    var i = arguments.length > 2 && void 0 !== arguments[2] ? arguments[2] : null,
+                                        a = arguments.length > 3 && void 0 !== arguments[3] ? arguments[3] : null,
+                                        s = this.w;
+                                    "bubble" !== s.config.chart.type && this.newPointSize(t, e);
+                                    var n = e.getAttribute("cx"),
+                                        r = e.getAttribute("cy");
+                                    if ((null !== i && null !== a && ((n = i), (r = a)), this.tooltipPosition.moveXCrosshairs(n), !this.fixedTooltip)) {
+                                        if ("radar" === s.config.chart.type) {
+                                            var o = this.ttCtx.getElGrid().getBoundingClientRect();
+                                            n = this.ttCtx.e.clientX - o.left;
+                                        }
+                                        this.tooltipPosition.moveTooltip(n, r, s.config.markers.hover.size);
+                                    }
+                                },
+                            },
+                            {
+                                key: "enlargePoints",
+                                value: function (t) {
+                                    for (
+                                        var e = this.w, i = this.ttCtx, a = t, s = e.globals.dom.baseEl.querySelectorAll(".apexcharts-series:not(.apexcharts-series-collapsed) .apexcharts-marker"), n = e.config.markers.hover.size, r = 0;
+                                        r < s.length;
+                                        r++
+                                    ) {
+                                        var o = s[r].getAttribute("rel"),
+                                            l = s[r].getAttribute("index");
+                                        if ((void 0 === n && (n = e.globals.markers.size[l] + e.config.markers.hover.sizeOffset), a === parseInt(o))) {
+                                            this.newPointSize(a, s[r]);
+                                            var h = s[r].getAttribute("cx"),
+                                                c = s[r].getAttribute("cy");
+                                            this.tooltipPosition.moveXCrosshairs(h), i.fixedTooltip || this.tooltipPosition.moveTooltip(h, c, n);
+                                        } else this.oldPointSize(s[r]);
+                                    }
+                                },
+                            },
+                            {
+                                key: "newPointSize",
+                                value: function (t, e) {
+                                    var i = this.w,
+                                        a = i.config.markers.hover.size,
+                                        s = null;
+                                    s = 0 === t ? e.parentNode.firstChild : e.parentNode.lastChild;
+                                    var n = parseInt(s.getAttribute("index"));
+                                    void 0 === a && (a = i.globals.markers.size[n] + i.config.markers.hover.sizeOffset), s.setAttribute("r", a);
+                                },
+                            },
+                            {
+                                key: "oldPointSize",
+                                value: function (t) {
+                                    var e = parseInt(t.getAttribute("default-marker-size"));
+                                    t.setAttribute("r", e);
+                                },
+                            },
+                            {
+                                key: "resetPointsSize",
+                                value: function () {
+                                    for (var t = this.w.globals.dom.baseEl.querySelectorAll(".apexcharts-series:not(.apexcharts-series-collapsed) .apexcharts-marker"), e = 0; e < t.length; e++) {
+                                        var i = parseInt(t[e].getAttribute("default-marker-size"));
+                                        p.isNumber(i) ? t[e].setAttribute("r", i) : t[e].setAttribute("r", 0);
+                                    }
+                                },
+                            },
+                        ]),
+                        t
+                    );
+                })(),
+                mt = (function () {
+                    function t(e) {
+                        n(this, t), (this.w = e.w), (this.ttCtx = e);
+                    }
+                    return (
+                        o(t, [
+                            {
+                                key: "getAttr",
+                                value: function (t, e) {
+                                    return parseFloat(t.target.getAttribute(e));
+                                },
+                            },
+                            {
+                                key: "handleHeatTooltip",
+                                value: function (t) {
+                                    var e = t.e,
+                                        i = t.opt,
+                                        a = t.x,
+                                        s = t.y,
+                                        n = this.ttCtx,
+                                        r = this.w;
+                                    if (e.target.classList.contains("apexcharts-heatmap-rect")) {
+                                        var o = this.getAttr(e, "i"),
+                                            l = this.getAttr(e, "j"),
+                                            h = this.getAttr(e, "cx"),
+                                            c = this.getAttr(e, "cy"),
+                                            d = this.getAttr(e, "width"),
+                                            u = this.getAttr(e, "height");
+                                        if (
+                                            (n.tooltipLabels.drawSeriesTexts({ ttItems: i.ttItems, i: o, j: l, shared: !1 }),
+                                            (a = h + n.tooltipRect.ttWidth / 2 + d),
+                                            (s = c + n.tooltipRect.ttHeight / 2 - u / 2),
+                                            n.tooltipPosition.moveXCrosshairs(h + d / 2),
+                                            a > r.globals.gridWidth / 2 && (a = h - n.tooltipRect.ttWidth / 2 + d),
+                                            n.w.config.tooltip.followCursor)
+                                        ) {
+                                            var f = n.getElGrid().getBoundingClientRect();
+                                            s = n.e.clientY - f.top + r.globals.translateY / 2 - 10;
+                                        }
+                                    }
+                                    return { x: a, y: s };
+                                },
+                            },
+                            {
+                                key: "handleMarkerTooltip",
+                                value: function (t) {
+                                    var e,
+                                        i,
+                                        a = t.e,
+                                        s = t.opt,
+                                        n = t.x,
+                                        r = t.y,
+                                        o = this.w,
+                                        l = this.ttCtx;
+                                    if (a.target.classList.contains("apexcharts-marker")) {
+                                        var h = parseInt(s.paths.getAttribute("cx")),
+                                            c = parseInt(s.paths.getAttribute("cy")),
+                                            d = parseFloat(s.paths.getAttribute("val"));
+                                        if (((i = parseInt(s.paths.getAttribute("rel"))), (e = parseInt(s.paths.parentNode.parentNode.parentNode.getAttribute("rel")) - 1), l.intersect)) {
+                                            var u = p.findAncestor(s.paths, "apexcharts-series");
+                                            u && (e = parseInt(u.getAttribute("data:realIndex")));
+                                        }
+                                        if (
+                                            (l.tooltipLabels.drawSeriesTexts({ ttItems: s.ttItems, i: e, j: i, shared: !l.showOnIntersect && o.config.tooltip.shared }),
+                                            "mouseup" === a.type && l.markerClick(a, e, i),
+                                            (n = h),
+                                            (r = c + o.globals.translateY - 1.4 * l.tooltipRect.ttHeight),
+                                            l.w.config.tooltip.followCursor)
+                                        ) {
+                                            var f = l.getElGrid().getBoundingClientRect();
+                                            r = l.e.clientY + o.globals.translateY - f.top;
+                                        }
+                                        d < 0 && (r = c), l.marker.enlargeCurrentPoint(i, s.paths, n, r);
+                                    }
+                                    return { x: n, y: r };
+                                },
+                            },
+                            {
+                                key: "handleBarTooltip",
+                                value: function (t) {
+                                    var e,
+                                        i,
+                                        a = t.e,
+                                        s = t.opt,
+                                        n = this.w,
+                                        r = this.ttCtx,
+                                        o = r.getElTooltip(),
+                                        l = 0,
+                                        h = 0,
+                                        c = 0,
+                                        d = this.getBarTooltipXY({ e: a, opt: s });
+                                    e = d.i;
+                                    var u = d.barHeight,
+                                        f = d.j;
+                                    if (
+                                        ((n.globals.isBarHorizontal && r.hasBars()) || !n.config.tooltip.shared
+                                            ? ((h = d.x), (c = d.y), (i = Array.isArray(n.config.stroke.width) ? n.config.stroke.width[e] : n.config.stroke.width), (l = h))
+                                            : n.globals.comboCharts || n.config.tooltip.shared || (l /= 2),
+                                        isNaN(c) && (c = n.globals.svgHeight - r.tooltipRect.ttHeight),
+                                        h + r.tooltipRect.ttWidth > n.globals.gridWidth ? (h -= r.tooltipRect.ttWidth) : h < 0 && (h += r.tooltipRect.ttWidth),
+                                        r.w.config.tooltip.followCursor)
+                                    ) {
+                                        var g = r.getElGrid().getBoundingClientRect();
+                                        c = r.e.clientY - g.top;
+                                    }
+                                    if (
+                                        (null === r.tooltip && (r.tooltip = n.globals.dom.baseEl.querySelector(".apexcharts-tooltip")),
+                                        n.config.tooltip.shared || (n.globals.comboChartsHasBars ? r.tooltipPosition.moveXCrosshairs(l + i / 2) : r.tooltipPosition.moveXCrosshairs(l)),
+                                        !r.fixedTooltip && (!n.config.tooltip.shared || (n.globals.isBarHorizontal && r.hasBars())))
+                                    ) {
+                                        x && (h = n.globals.gridWidth - h), (o.style.left = h + n.globals.translateX + "px");
+                                        var p = parseInt(s.paths.parentNode.getAttribute("data:realIndex")),
+                                            x = n.globals.isMultipleYAxis ? n.config.yaxis[p] && n.config.yaxis[p].reversed : n.config.yaxis[0].reversed;
+                                        !x || (n.globals.isBarHorizontal && r.hasBars()) || (c = c + u - 2 * (n.globals.series[e][f] < 0 ? u : 0)),
+                                            r.tooltipRect.ttHeight + c > n.globals.gridHeight
+                                                ? ((c = n.globals.gridHeight - r.tooltipRect.ttHeight + n.globals.translateY), (o.style.top = c + "px"))
+                                                : (o.style.top = c + n.globals.translateY - r.tooltipRect.ttHeight / 2 + "px");
+                                    }
+                                },
+                            },
+                            {
+                                key: "getBarTooltipXY",
+                                value: function (t) {
+                                    var e = t.e,
+                                        i = t.opt,
+                                        a = this.w,
+                                        s = null,
+                                        n = this.ttCtx,
+                                        r = 0,
+                                        o = 0,
+                                        l = 0,
+                                        h = 0,
+                                        c = 0,
+                                        d = e.target.classList;
+                                    if (d.contains("apexcharts-bar-area") || d.contains("apexcharts-candlestick-area") || d.contains("apexcharts-rangebar-area")) {
+                                        var u = e.target,
+                                            f = u.getBoundingClientRect(),
+                                            g = i.elGrid.getBoundingClientRect(),
+                                            p = f.height;
+                                        c = f.height;
+                                        var x = f.width,
+                                            v = parseInt(u.getAttribute("cx")),
+                                            m = parseInt(u.getAttribute("cy"));
+                                        h = parseFloat(u.getAttribute("barWidth"));
+                                        var b = "touchmove" === e.type ? e.touches[0].clientX : e.clientX;
+                                        (s = parseInt(u.getAttribute("j"))),
+                                            (r = parseInt(u.parentNode.getAttribute("rel")) - 1),
+                                            a.globals.comboCharts && (r = parseInt(u.parentNode.getAttribute("data:realIndex"))),
+                                            n.tooltipLabels.drawSeriesTexts({ ttItems: i.ttItems, i: r, j: s, shared: !n.showOnIntersect && a.config.tooltip.shared }),
+                                            a.config.tooltip.followCursor
+                                                ? a.globals.isBarHorizontal
+                                                    ? ((o = b - g.left + 15), (l = m - n.dataPointsDividedHeight + p / 2 - n.tooltipRect.ttHeight / 2))
+                                                    : ((o = a.globals.isXNumeric ? v - x / 2 : v - n.dataPointsDividedWidth + x / 2), (l = e.clientY - g.top - n.tooltipRect.ttHeight / 2 - 15))
+                                                : a.globals.isBarHorizontal
+                                                ? ((o = v) < n.xyRatios.baseLineInvertedY && (o = v - n.tooltipRect.ttWidth), (l = m - n.dataPointsDividedHeight + p / 2 - n.tooltipRect.ttHeight / 2))
+                                                : ((o = a.globals.isXNumeric ? v - x / 2 : v - n.dataPointsDividedWidth + x / 2), (l = m));
+                                    }
+                                    return { x: o, y: l, barHeight: c, barWidth: h, i: r, j: s };
+                                },
+                            },
+                        ]),
+                        t
+                    );
+                })(),
+                bt = (function () {
+                    function t(e) {
+                        n(this, t), (this.w = e.w), (this.ttCtx = e);
+                    }
+                    return (
+                        o(t, [
+                            {
+                                key: "drawXaxisTooltip",
+                                value: function () {
+                                    var t = this.w,
+                                        e = this.ttCtx,
+                                        i = "bottom" === t.config.xaxis.position;
+                                    e.xaxisOffY = i ? t.globals.gridHeight + 1 : 1;
+                                    var a = i ? "apexcharts-xaxistooltip apexcharts-xaxistooltip-bottom" : "apexcharts-xaxistooltip apexcharts-xaxistooltip-top",
+                                        s = t.globals.dom.elWrap;
+                                    e.blxaxisTooltip &&
+                                        null === t.globals.dom.baseEl.querySelector(".apexcharts-xaxistooltip") &&
+                                        ((e.xaxisTooltip = document.createElement("div")),
+                                        e.xaxisTooltip.setAttribute("class", a + " " + t.config.tooltip.theme),
+                                        s.appendChild(e.xaxisTooltip),
+                                        (e.xaxisTooltipText = document.createElement("div")),
+                                        e.xaxisTooltipText.classList.add("apexcharts-xaxistooltip-text"),
+                                        (e.xaxisTooltipText.style.fontFamily = t.config.xaxis.tooltip.style.fontFamily || t.config.chart.fontFamily),
+                                        (e.xaxisTooltipText.style.fontSize = t.config.xaxis.tooltip.style.fontSize),
+                                        e.xaxisTooltip.appendChild(e.xaxisTooltipText));
+                                },
+                            },
+                            {
+                                key: "drawYaxisTooltip",
+                                value: function () {
+                                    for (var t = this.w, e = this.ttCtx, i = 0; i < t.config.yaxis.length; i++) {
+                                        var a = t.config.yaxis[i].opposite || t.config.yaxis[i].crosshairs.opposite;
+                                        e.yaxisOffX = a ? t.globals.gridWidth + 1 : 1;
+                                        var s = "apexcharts-yaxistooltip apexcharts-yaxistooltip-".concat(i, a ? " apexcharts-yaxistooltip-right" : " apexcharts-yaxistooltip-left"),
+                                            n = t.globals.dom.elWrap;
+                                        if (e.blyaxisTooltip)
+                                            null === t.globals.dom.baseEl.querySelector(".apexcharts-yaxistooltip apexcharts-yaxistooltip-".concat(i)) &&
+                                                ((e.yaxisTooltip = document.createElement("div")),
+                                                e.yaxisTooltip.setAttribute("class", s + " " + t.config.tooltip.theme),
+                                                n.appendChild(e.yaxisTooltip),
+                                                0 === i && (e.yaxisTooltipText = []),
+                                                e.yaxisTooltipText.push(document.createElement("div")),
+                                                e.yaxisTooltipText[i].classList.add("apexcharts-yaxistooltip-text"),
+                                                e.yaxisTooltip.appendChild(e.yaxisTooltipText[i]));
+                                    }
+                                },
+                            },
+                            {
+                                key: "setXCrosshairWidth",
+                                value: function () {
+                                    var t = this.w,
+                                        e = this.ttCtx,
+                                        i = e.getElXCrosshairs();
+                                    if (((e.xcrosshairsWidth = parseInt(t.config.xaxis.crosshairs.width)), t.globals.comboCharts)) {
+                                        var a = t.globals.dom.baseEl.querySelector(".apexcharts-bar-area");
+                                        if (null !== a && "barWidth" === t.config.xaxis.crosshairs.width) {
+                                            var s = parseFloat(a.getAttribute("barWidth"));
+                                            e.xcrosshairsWidth = s;
+                                        } else if ("tickWidth" === t.config.xaxis.crosshairs.width) {
+                                            var n = t.globals.labels.length;
+                                            e.xcrosshairsWidth = t.globals.gridWidth / n;
+                                        }
+                                    } else if ("tickWidth" === t.config.xaxis.crosshairs.width) {
+                                        var r = t.globals.labels.length;
+                                        e.xcrosshairsWidth = t.globals.gridWidth / r;
+                                    } else if ("barWidth" === t.config.xaxis.crosshairs.width) {
+                                        var o = t.globals.dom.baseEl.querySelector(".apexcharts-bar-area");
+                                        if (null !== o) {
+                                            var l = parseFloat(o.getAttribute("barWidth"));
+                                            e.xcrosshairsWidth = l;
+                                        } else e.xcrosshairsWidth = 1;
+                                    }
+                                    t.globals.isBarHorizontal && (e.xcrosshairsWidth = 0), null !== i && e.xcrosshairsWidth > 0 && i.setAttribute("width", e.xcrosshairsWidth);
+                                },
+                            },
+                            {
+                                key: "handleYCrosshair",
+                                value: function () {
+                                    var t = this.w,
+                                        e = this.ttCtx;
+                                    (e.ycrosshairs = t.globals.dom.baseEl.querySelector(".apexcharts-ycrosshairs")), (e.ycrosshairsHidden = t.globals.dom.baseEl.querySelector(".apexcharts-ycrosshairs-hidden"));
+                                },
+                            },
+                            {
+                                key: "drawYaxisTooltipText",
+                                value: function (t, e, i) {
+                                    var a = this.ttCtx,
+                                        s = this.w,
+                                        n = s.globals.yLabelFormatters[t];
+                                    if (a.blyaxisTooltip) {
+                                        var r = a.getElGrid().getBoundingClientRect(),
+                                            o = (e - r.top) * i.yRatio[t],
+                                            l = s.globals.maxYArr[t] - s.globals.minYArr[t],
+                                            h = s.globals.minYArr[t] + (l - o);
+                                        a.tooltipPosition.moveYCrosshairs(e - r.top), (a.yaxisTooltipText[t].innerHTML = n(h)), a.tooltipPosition.moveYAxisTooltip(t);
+                                    }
+                                },
+                            },
+                        ]),
+                        t
+                    );
+                })(),
+                yt = (function () {
+                    function t(e) {
+                        n(this, t), (this.ctx = e), (this.w = e.w);
+                        var i = this.w;
+                        (this.tConfig = i.config.tooltip),
+                            (this.tooltipUtil = new gt(this)),
+                            (this.tooltipLabels = new pt(this)),
+                            (this.tooltipPosition = new xt(this)),
+                            (this.marker = new vt(this)),
+                            (this.intersect = new mt(this)),
+                            (this.axesTooltip = new bt(this)),
+                            (this.showOnIntersect = this.tConfig.intersect),
+                            (this.showTooltipTitle = this.tConfig.x.show),
+                            (this.fixedTooltip = this.tConfig.fixed.enabled),
+                            (this.xaxisTooltip = null),
+                            (this.yaxisTTEls = null),
+                            (this.isBarShared = !i.globals.isBarHorizontal && this.tConfig.shared);
+                    }
+                    return (
+                        o(t, [
+                            {
+                                key: "getElTooltip",
+                                value: function (t) {
+                                    return t || (t = this), t.w.globals.dom.baseEl.querySelector(".apexcharts-tooltip");
+                                },
+                            },
+                            {
+                                key: "getElXCrosshairs",
+                                value: function () {
+                                    return this.w.globals.dom.baseEl.querySelector(".apexcharts-xcrosshairs");
+                                },
+                            },
+                            {
+                                key: "getElGrid",
+                                value: function () {
+                                    return this.w.globals.dom.baseEl.querySelector(".apexcharts-grid");
+                                },
+                            },
+                            {
+                                key: "drawTooltip",
+                                value: function (t) {
+                                    var e = this.w;
+                                    (this.xyRatios = t),
+                                        (this.blxaxisTooltip = e.config.xaxis.tooltip.enabled && e.globals.axisCharts),
+                                        (this.blyaxisTooltip = e.config.yaxis[0].tooltip.enabled && e.globals.axisCharts),
+                                        (this.allTooltipSeriesGroups = []),
+                                        e.globals.axisCharts || (this.showTooltipTitle = !1);
+                                    var i = document.createElement("div");
+                                    if ((i.classList.add("apexcharts-tooltip"), i.classList.add(this.tConfig.theme), e.globals.dom.elWrap.appendChild(i), e.globals.axisCharts)) {
+                                        this.axesTooltip.drawXaxisTooltip(), this.axesTooltip.drawYaxisTooltip(), this.axesTooltip.setXCrosshairWidth(), this.axesTooltip.handleYCrosshair();
+                                        var a = new q(this.ctx);
+                                        this.xAxisTicksPositions = a.getXAxisTicksPositions();
+                                    }
+                                    if (
+                                        (((e.globals.comboCharts && !this.tConfig.shared) ||
+                                            (this.tConfig.intersect && !this.tConfig.shared) ||
+                                            (("bar" === e.config.chart.type || "rangeBar" === e.config.chart.type) && !this.tConfig.shared)) &&
+                                            (this.showOnIntersect = !0),
+                                        (0 !== e.config.markers.size && 0 !== e.globals.markers.largestSize) || this.marker.drawDynamicPoints(this),
+                                        e.globals.collapsedSeries.length !== e.globals.series.length)
+                                    ) {
+                                        (this.dataPointsDividedHeight = e.globals.gridHeight / e.globals.dataPoints),
+                                            (this.dataPointsDividedWidth = e.globals.gridWidth / e.globals.dataPoints),
+                                            this.showTooltipTitle &&
+                                                ((this.tooltipTitle = document.createElement("div")),
+                                                this.tooltipTitle.classList.add("apexcharts-tooltip-title"),
+                                                (this.tooltipTitle.style.fontFamily = this.tConfig.style.fontFamily || e.config.chart.fontFamily),
+                                                (this.tooltipTitle.style.fontSize = this.tConfig.style.fontSize),
+                                                i.appendChild(this.tooltipTitle));
+                                        var s = e.globals.series.length;
+                                        (e.globals.xyCharts || e.globals.comboCharts) && this.tConfig.shared && (s = this.showOnIntersect ? 1 : e.globals.series.length), (this.ttItems = this.createTTElements(s)), this.addSVGEvents();
+                                    }
+                                },
+                            },
+                            {
+                                key: "createTTElements",
+                                value: function (t) {
+                                    for (var e = this.w, i = [], a = this.getElTooltip(), s = 0; s < t; s++) {
+                                        var n = document.createElement("div");
+                                        n.classList.add("apexcharts-tooltip-series-group"),
+                                            this.tConfig.shared &&
+                                                this.tConfig.enabledOnSeries &&
+                                                Array.isArray(this.tConfig.enabledOnSeries) &&
+                                                this.tConfig.enabledOnSeries.indexOf(s) < 0 &&
+                                                n.classList.add("apexcharts-tooltip-series-group-hidden");
+                                        var r = document.createElement("span");
+                                        r.classList.add("apexcharts-tooltip-marker"), (r.style.backgroundColor = e.globals.colors[s]), n.appendChild(r);
+                                        var o = document.createElement("div");
+                                        o.classList.add("apexcharts-tooltip-text"), (o.style.fontFamily = this.tConfig.style.fontFamily || e.config.chart.fontFamily), (o.style.fontSize = this.tConfig.style.fontSize);
+                                        var l = document.createElement("div");
+                                        l.classList.add("apexcharts-tooltip-y-group");
+                                        var h = document.createElement("span");
+                                        h.classList.add("apexcharts-tooltip-text-label"), l.appendChild(h);
+                                        var c = document.createElement("span");
+                                        c.classList.add("apexcharts-tooltip-text-value"), l.appendChild(c);
+                                        var d = document.createElement("div");
+                                        d.classList.add("apexcharts-tooltip-z-group");
+                                        var u = document.createElement("span");
+                                        u.classList.add("apexcharts-tooltip-text-z-label"), d.appendChild(u);
+                                        var f = document.createElement("span");
+                                        f.classList.add("apexcharts-tooltip-text-z-value"), d.appendChild(f), o.appendChild(l), o.appendChild(d), n.appendChild(o), a.appendChild(n), i.push(n);
+                                    }
+                                    return i;
+                                },
+                            },
+                            {
+                                key: "addSVGEvents",
+                                value: function () {
+                                    var t = this.w,
+                                        e = t.config.chart.type,
+                                        i = this.getElTooltip(),
+                                        a = !("bar" !== e && "candlestick" !== e && "rangeBar" !== e),
+                                        s = t.globals.dom.Paper.node,
+                                        n = this.getElGrid();
+                                    n && (this.seriesBound = n.getBoundingClientRect());
+                                    var r,
+                                        o = [],
+                                        l = [],
+                                        h = { hoverArea: s, elGrid: n, tooltipEl: i, tooltipY: o, tooltipX: l, ttItems: this.ttItems };
+                                    if (
+                                        t.globals.axisCharts &&
+                                        ("area" === e || "line" === e || "scatter" === e || "bubble" === e
+                                            ? (r = t.globals.dom.baseEl.querySelectorAll(".apexcharts-series[data\\:longestSeries='true'] .apexcharts-marker"))
+                                            : a
+                                            ? (r = t.globals.dom.baseEl.querySelectorAll(".apexcharts-series .apexcharts-bar-area, .apexcharts-series .apexcharts-candlestick-area, .apexcharts-series .apexcharts-rangebar-area"))
+                                            : "heatmap" === e
+                                            ? (r = t.globals.dom.baseEl.querySelectorAll(".apexcharts-series .apexcharts-heatmap"))
+                                            : "radar" === e && (r = t.globals.dom.baseEl.querySelectorAll(".apexcharts-series .apexcharts-marker")),
+                                        r && r.length)
+                                    )
+                                        for (var c = 0; c < r.length; c++) o.push(r[c].getAttribute("cy")), l.push(r[c].getAttribute("cx"));
+                                    if ((t.globals.xyCharts && !this.showOnIntersect) || (t.globals.comboCharts && !this.showOnIntersect) || (a && this.hasBars() && this.tConfig.shared)) this.addPathsEventListeners([s], h);
+                                    else if (a && !t.globals.comboCharts) this.addBarsEventListeners(h);
+                                    else if ("bubble" === e || "scatter" === e || "radar" === e || (this.showOnIntersect && ("area" === e || "line" === e))) this.addPointsEventsListeners(h);
+                                    else if (!t.globals.axisCharts || "heatmap" === e) {
+                                        var d = t.globals.dom.baseEl.querySelectorAll(".apexcharts-series");
+                                        this.addPathsEventListeners(d, h);
+                                    }
+                                    if (this.showOnIntersect) {
+                                        var u = t.globals.dom.baseEl.querySelectorAll(".apexcharts-line-series .apexcharts-marker");
+                                        u.length > 0 && this.addPathsEventListeners(u, h);
+                                        var f = t.globals.dom.baseEl.querySelectorAll(".apexcharts-area-series .apexcharts-marker");
+                                        f.length > 0 && this.addPathsEventListeners(f, h), this.hasBars() && !this.tConfig.shared && this.addBarsEventListeners(h);
+                                    }
+                                },
+                            },
+                            {
+                                key: "drawFixedTooltipRect",
+                                value: function () {
+                                    var t = this.w,
+                                        e = this.getElTooltip(),
+                                        i = e.getBoundingClientRect(),
+                                        a = i.width + 10,
+                                        s = i.height + 10,
+                                        n = this.tConfig.fixed.offsetX,
+                                        r = this.tConfig.fixed.offsetY;
+                                    return (
+                                        this.tConfig.fixed.position.toLowerCase().indexOf("right") > -1 && (n = n + t.globals.svgWidth - a + 10),
+                                        this.tConfig.fixed.position.toLowerCase().indexOf("bottom") > -1 && (r = r + t.globals.svgHeight - s - 10),
+                                        (e.style.left = n + "px"),
+                                        (e.style.top = r + "px"),
+                                        { x: n, y: r, ttWidth: a, ttHeight: s }
+                                    );
+                                },
+                            },
+                            {
+                                key: "addPointsEventsListeners",
+                                value: function (t) {
+                                    var e = this.w.globals.dom.baseEl.querySelectorAll(".apexcharts-series-markers .apexcharts-marker");
+                                    this.addPathsEventListeners(e, t);
+                                },
+                            },
+                            {
+                                key: "addBarsEventListeners",
+                                value: function (t) {
+                                    var e = this.w.globals.dom.baseEl.querySelectorAll(".apexcharts-bar-area, .apexcharts-candlestick-area, .apexcharts-rangebar-area");
+                                    this.addPathsEventListeners(e, t);
+                                },
+                            },
+                            {
+                                key: "addPathsEventListeners",
+                                value: function (t, e) {
+                                    for (
+                                        var i = this,
+                                            a = this,
+                                            s = function (s) {
+                                                var n = { paths: t[s], tooltipEl: e.tooltipEl, tooltipY: e.tooltipY, tooltipX: e.tooltipX, elGrid: e.elGrid, hoverArea: e.hoverArea, ttItems: e.ttItems };
+                                                i.w.globals.tooltipOpts = n;
+                                                ["mousemove", "mouseup", "touchmove", "mouseout", "touchend"].map(function (e) {
+                                                    return t[s].addEventListener(e, a.seriesHover.bind(a, n), { capture: !1, passive: !0 });
+                                                });
+                                            },
+                                            n = 0;
+                                        n < t.length;
+                                        n++
+                                    )
+                                        s(n);
+                                },
+                            },
+                            {
+                                key: "seriesHover",
+                                value: function (t, e) {
+                                    var i = this,
+                                        a = [],
+                                        s = this.w;
+                                    s.config.chart.group && (a = this.ctx.getGroupedCharts()),
+                                        (s.globals.axisCharts && ((s.globals.minX === -1 / 0 && s.globals.maxX === 1 / 0) || 0 === s.globals.dataPoints)) ||
+                                            (a.length
+                                                ? a.forEach(function (a) {
+                                                      var s = i.getElTooltip(a),
+                                                          n = { paths: t.paths, tooltipEl: s, tooltipY: t.tooltipY, tooltipX: t.tooltipX, elGrid: t.elGrid, hoverArea: t.hoverArea, ttItems: a.w.globals.tooltip.ttItems };
+                                                      a.w.globals.minX === i.w.globals.minX && a.w.globals.maxX === i.w.globals.maxX && a.w.globals.tooltip.seriesHoverByContext({ chartCtx: a, ttCtx: a.w.globals.tooltip, opt: n, e: e });
+                                                  })
+                                                : this.seriesHoverByContext({ chartCtx: this.ctx, ttCtx: this.w.globals.tooltip, opt: t, e: e }));
+                                },
+                            },
+                            {
+                                key: "seriesHoverByContext",
+                                value: function (t) {
+                                    var e = t.chartCtx,
+                                        i = t.ttCtx,
+                                        a = t.opt,
+                                        s = t.e,
+                                        n = e.w,
+                                        r = this.getElTooltip();
+                                    ((i.tooltipRect = { x: 0, y: 0, ttWidth: r.getBoundingClientRect().width, ttHeight: r.getBoundingClientRect().height }), (i.e = s), !i.hasBars() || n.globals.comboCharts || i.isBarShared) ||
+                                        (this.tConfig.onDatasetHover.highlightDataSeries && new G(e).toggleSeriesOnHover(s, s.target.parentNode));
+                                    i.fixedTooltip && i.drawFixedTooltipRect(),
+                                        n.globals.axisCharts ? i.axisChartsTooltips({ e: s, opt: a, tooltipRect: i.tooltipRect }) : i.nonAxisChartsTooltips({ e: s, opt: a, tooltipRect: i.tooltipRect });
+                                },
+                            },
+                            {
+                                key: "axisChartsTooltips",
+                                value: function (t) {
+                                    var e,
+                                        i,
+                                        a,
+                                        s = t.e,
+                                        n = t.opt,
+                                        r = this.w,
+                                        o = null,
+                                        l = n.elGrid.getBoundingClientRect(),
+                                        h = "touchmove" === s.type ? s.touches[0].clientX : s.clientX,
+                                        c = "touchmove" === s.type ? s.touches[0].clientY : s.clientY;
+                                    if (((this.clientY = c), (this.clientX = h), c < l.top || c > l.top + l.height)) this.handleMouseOut(n);
+                                    else {
+                                        if (Array.isArray(this.tConfig.enabledOnSeries)) {
+                                            var d = parseInt(n.paths.getAttribute("index"));
+                                            if (this.tConfig.enabledOnSeries.indexOf(d) < 0) return void this.handleMouseOut(n);
+                                        }
+                                        var u = this.getElTooltip(),
+                                            f = this.getElXCrosshairs(),
+                                            g = r.globals.xyCharts || ("bar" === r.config.chart.type && !r.globals.isBarHorizontal && this.hasBars() && this.tConfig.shared) || (r.globals.comboCharts && this.hasBars);
+                                        if ((r.globals.isBarHorizontal && this.hasBars() && (g = !1), "mousemove" === s.type || "touchmove" === s.type || "mouseup" === s.type)) {
+                                            if ((null !== f && f.classList.add("active"), null !== this.ycrosshairs && this.blyaxisTooltip && this.ycrosshairs.classList.add("active"), g && !this.showOnIntersect)) {
+                                                e = (o = this.tooltipUtil.getNearestValues({ context: this, hoverArea: n.hoverArea, elGrid: n.elGrid, clientX: h, clientY: c, hasBars: this.hasBars })).j;
+                                                var p = o.capturedSeries;
+                                                if (o.hoverX < 0 || o.hoverX > r.globals.gridWidth) return void this.handleMouseOut(n);
+                                                if (null !== p) {
+                                                    if (null === r.globals.series[p][e]) return void n.tooltipEl.classList.remove("active");
+                                                    void 0 !== r.globals.series[p][e]
+                                                        ? this.tConfig.shared && this.tooltipUtil.isXoverlap(e) && this.tooltipUtil.isinitialSeriesSameLen()
+                                                            ? this.create(s, this, p, e, n.ttItems)
+                                                            : this.create(s, this, p, e, n.ttItems, !1)
+                                                        : this.tooltipUtil.isXoverlap(e) && this.create(s, this, 0, e, n.ttItems);
+                                                } else this.tooltipUtil.isXoverlap(e) && this.create(s, this, 0, e, n.ttItems);
+                                            } else if ("heatmap" === r.config.chart.type) {
+                                                var x = this.intersect.handleHeatTooltip({ e: s, opt: n, x: i, y: a });
+                                                (i = x.x), (a = x.y), (u.style.left = i + "px"), (u.style.top = a + "px");
+                                            } else this.hasBars && this.intersect.handleBarTooltip({ e: s, opt: n }), this.hasMarkers && this.intersect.handleMarkerTooltip({ e: s, opt: n, x: i, y: a });
+                                            if (this.blyaxisTooltip) for (var v = 0; v < r.config.yaxis.length; v++) this.axesTooltip.drawYaxisTooltipText(v, c, this.xyRatios);
+                                            n.tooltipEl.classList.add("active");
+                                        } else ("mouseout" !== s.type && "touchend" !== s.type) || this.handleMouseOut(n);
+                                    }
+                                },
+                            },
+                            {
+                                key: "nonAxisChartsTooltips",
+                                value: function (t) {
+                                    var e = t.e,
+                                        i = t.opt,
+                                        a = t.tooltipRect,
+                                        s = this.w,
+                                        n = i.paths.getAttribute("rel"),
+                                        r = this.getElTooltip(),
+                                        o = s.globals.dom.elWrap.getBoundingClientRect();
+                                    if ("mousemove" === e.type || "touchmove" === e.type) {
+                                        r.classList.add("active"), this.tooltipLabels.drawSeriesTexts({ ttItems: i.ttItems, i: parseInt(n) - 1, shared: !1 });
+                                        var l = s.globals.clientX - o.left - a.ttWidth / 2,
+                                            h = s.globals.clientY - o.top - a.ttHeight - 10;
+                                        (r.style.left = l + "px"), (r.style.top = h + "px");
+                                    } else ("mouseout" !== e.type && "touchend" !== e.type) || r.classList.remove("active");
+                                },
+                            },
+                            {
+                                key: "deactivateHoverFilter",
+                                value: function () {
+                                    for (var t = this.w, e = new m(this.ctx), i = t.globals.dom.Paper.select(".apexcharts-bar-area"), a = 0; a < i.length; a++) e.pathMouseLeave(i[a]);
+                                },
+                            },
+                            {
+                                key: "handleMouseOut",
+                                value: function (t) {
+                                    var e = this.w,
+                                        i = this.getElXCrosshairs();
+                                    if (
+                                        (t.tooltipEl.classList.remove("active"),
+                                        this.deactivateHoverFilter(),
+                                        "bubble" !== e.config.chart.type && this.marker.resetPointsSize(),
+                                        null !== i && i.classList.remove("active"),
+                                        null !== this.ycrosshairs && this.ycrosshairs.classList.remove("active"),
+                                        this.blxaxisTooltip && this.xaxisTooltip.classList.remove("active"),
+                                        this.blyaxisTooltip)
+                                    ) {
+                                        null === this.yaxisTTEls && (this.yaxisTTEls = e.globals.dom.baseEl.querySelectorAll(".apexcharts-yaxistooltip"));
+                                        for (var a = 0; a < this.yaxisTTEls.length; a++) this.yaxisTTEls[a].classList.remove("active");
+                                    }
+                                },
+                            },
+                            {
+                                key: "getElMarkers",
+                                value: function () {
+                                    return this.w.globals.dom.baseEl.querySelectorAll(" .apexcharts-series-markers");
+                                },
+                            },
+                            {
+                                key: "getAllMarkers",
+                                value: function () {
+                                    return this.w.globals.dom.baseEl.querySelectorAll(".apexcharts-series-markers .apexcharts-marker");
+                                },
+                            },
+                            {
+                                key: "hasMarkers",
+                                value: function () {
+                                    return this.getElMarkers().length > 0;
+                                },
+                            },
+                            {
+                                key: "getElBars",
+                                value: function () {
+                                    return this.w.globals.dom.baseEl.querySelectorAll(".apexcharts-bar-series,  .apexcharts-candlestick-series, .apexcharts-rangebar-series");
+                                },
+                            },
+                            {
+                                key: "hasBars",
+                                value: function () {
+                                    return this.getElBars().length > 0;
+                                },
+                            },
+                            {
+                                key: "markerClick",
+                                value: function (t, e, i) {
+                                    var a = this.w;
+                                    "function" == typeof a.config.chart.events.markerClick && a.config.chart.events.markerClick(t, this.ctx, { seriesIndex: e, dataPointIndex: i, w: a }),
+                                        this.ctx.fireEvent("markerClick", [t, this.ctx, { seriesIndex: e, dataPointIndex: i, w: a }]);
+                                },
+                            },
+                            {
+                                key: "create",
+                                value: function (t, e, i, a, s) {
+                                    var n = arguments.length > 5 && void 0 !== arguments[5] ? arguments[5] : null,
+                                        r = this.w,
+                                        o = e;
+                                    "mouseup" === t.type && this.markerClick(t, i, a), null === n && (n = this.tConfig.shared);
+                                    var l = this.hasMarkers(),
+                                        h = this.getElBars();
+                                    if (n) {
+                                        if (
+                                            (o.tooltipLabels.drawSeriesTexts({ ttItems: s, i: i, j: a, shared: !this.showOnIntersect && this.tConfig.shared }),
+                                            l && (r.globals.markers.largestSize > 0 ? o.marker.enlargePoints(a) : o.tooltipPosition.moveDynamicPointsOnHover(a)),
+                                            this.hasBars() && ((this.barSeriesHeight = this.tooltipUtil.getBarsHeight(h)), this.barSeriesHeight > 0))
+                                        ) {
+                                            var c = new m(this.ctx),
+                                                d = r.globals.dom.Paper.select(".apexcharts-bar-area[j='".concat(a, "']"));
+                                            this.deactivateHoverFilter(), this.tooltipPosition.moveStickyTooltipOverBars(a);
+                                            for (var u = 0; u < d.length; u++) c.pathMouseEnter(d[u]);
+                                        }
+                                    } else o.tooltipLabels.drawSeriesTexts({ shared: !1, ttItems: s, i: i, j: a }), this.hasBars() && o.tooltipPosition.moveStickyTooltipOverBars(a), l && o.tooltipPosition.moveMarkers(i, a);
+                                },
+                            },
+                        ]),
+                        t
+                    );
+                })(),
+                wt = (function () {
+                    function t(e) {
+                        n(this, t), (this.ctx = e), (this.w = e.w), (this.ev = this.w.config.chart.events), (this.localeValues = this.w.globals.locale.toolbar);
+                    }
+                    return (
+                        o(t, [
+                            {
+                                key: "createToolbar",
+                                value: function () {
+                                    var t = this.w,
+                                        e = document.createElement("div");
+                                    if (
+                                        (e.setAttribute("class", "apexcharts-toolbar"),
+                                        t.globals.dom.elWrap.appendChild(e),
+                                        (this.elZoom = document.createElement("div")),
+                                        (this.elZoomIn = document.createElement("div")),
+                                        (this.elZoomOut = document.createElement("div")),
+                                        (this.elPan = document.createElement("div")),
+                                        (this.elSelection = document.createElement("div")),
+                                        (this.elZoomReset = document.createElement("div")),
+                                        (this.elMenuIcon = document.createElement("div")),
+                                        (this.elMenu = document.createElement("div")),
+                                        (this.elCustomIcons = []),
+                                        (this.t = t.config.chart.toolbar.tools),
+                                        Array.isArray(this.t.customIcons))
+                                    )
+                                        for (var i = 0; i < this.t.customIcons.length; i++) this.elCustomIcons.push(document.createElement("div"));
+                                    this.elMenuItems = [];
+                                    var a = [];
+                                    this.t.zoomin &&
+                                        t.config.chart.zoom.enabled &&
+                                        a.push({
+                                            el: this.elZoomIn,
+                                            icon:
+                                                "string" == typeof this.t.zoomin
+                                                    ? this.t.zoomin
+                                                    : '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">\n    <path d="M0 0h24v24H0z" fill="none"/>\n    <path d="M13 7h-2v4H7v2h4v4h2v-4h4v-2h-4V7zm-1-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/>\n</svg>\n',
+                                            title: this.localeValues.zoomIn,
+                                            class: "apexcharts-zoom-in-icon",
+                                        }),
+                                        this.t.zoomout &&
+                                            t.config.chart.zoom.enabled &&
+                                            a.push({
+                                                el: this.elZoomOut,
+                                                icon:
+                                                    "string" == typeof this.t.zoomout
+                                                        ? this.t.zoomout
+                                                        : '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">\n    <path d="M0 0h24v24H0z" fill="none"/>\n    <path d="M7 11v2h10v-2H7zm5-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/>\n</svg>\n',
+                                                title: this.localeValues.zoomOut,
+                                                class: "apexcharts-zoom-out-icon",
+                                            }),
+                                        this.t.zoom &&
+                                            t.config.chart.zoom.enabled &&
+                                            a.push({
+                                                el: this.elZoom,
+                                                icon:
+                                                    "string" == typeof this.t.zoom
+                                                        ? this.t.zoom
+                                                        : '<svg xmlns="http://www.w3.org/2000/svg" fill="#000000" height="24" viewBox="0 0 24 24" width="24">\n    <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>\n    <path d="M0 0h24v24H0V0z" fill="none"/>\n    <path d="M12 10h-2v2H9v-2H7V9h2V7h1v2h2v1z"/>\n</svg>',
+                                                title: this.localeValues.selectionZoom,
+                                                class: t.globals.isTouchDevice ? "hidden" : "apexcharts-zoom-icon",
+                                            }),
+                                        this.t.selection &&
+                                            t.config.chart.selection.enabled &&
+                                            a.push({
+                                                el: this.elSelection,
+                                                icon:
+                                                    "string" == typeof this.t.selection
+                                                        ? this.t.selection
+                                                        : '<svg fill="#6E8192" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">\n    <path d="M0 0h24v24H0z" fill="none"/>\n    <path d="M3 5h2V3c-1.1 0-2 .9-2 2zm0 8h2v-2H3v2zm4 8h2v-2H7v2zM3 9h2V7H3v2zm10-6h-2v2h2V3zm6 0v2h2c0-1.1-.9-2-2-2zM5 21v-2H3c0 1.1.9 2 2 2zm-2-4h2v-2H3v2zM9 3H7v2h2V3zm2 18h2v-2h-2v2zm8-8h2v-2h-2v2zm0 8c1.1 0 2-.9 2-2h-2v2zm0-12h2V7h-2v2zm0 8h2v-2h-2v2zm-4 4h2v-2h-2v2zm0-16h2V3h-2v2z"/>\n</svg>',
+                                                title: this.localeValues.selection,
+                                                class: t.globals.isTouchDevice ? "hidden" : "apexcharts-selection-icon",
+                                            }),
+                                        this.t.pan &&
+                                            t.config.chart.zoom.enabled &&
+                                            a.push({
+                                                el: this.elPan,
+                                                icon:
+                                                    "string" == typeof this.t.pan
+                                                        ? this.t.pan
+                                                        : '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000" height="24" viewBox="0 0 24 24" width="24">\n    <defs>\n        <path d="M0 0h24v24H0z" id="a"/>\n    </defs>\n    <clipPath id="b">\n        <use overflow="visible" xlink:href="#a"/>\n    </clipPath>\n    <path clip-path="url(#b)" d="M23 5.5V20c0 2.2-1.8 4-4 4h-7.3c-1.08 0-2.1-.43-2.85-1.19L1 14.83s1.26-1.23 1.3-1.25c.22-.19.49-.29.79-.29.22 0 .42.06.6.16.04.01 4.31 2.46 4.31 2.46V4c0-.83.67-1.5 1.5-1.5S11 3.17 11 4v7h1V1.5c0-.83.67-1.5 1.5-1.5S15 .67 15 1.5V11h1V2.5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5V11h1V5.5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5z"/>\n</svg>',
+                                                title: this.localeValues.pan,
+                                                class: t.globals.isTouchDevice ? "hidden" : "apexcharts-pan-icon",
+                                            }),
+                                        this.t.reset &&
+                                            t.config.chart.zoom.enabled &&
+                                            a.push({
+                                                el: this.elZoomReset,
+                                                icon:
+                                                    "string" == typeof this.t.reset
+                                                        ? this.t.reset
+                                                        : '<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">\n    <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>\n    <path d="M0 0h24v24H0z" fill="none"/>\n</svg>',
+                                                title: this.localeValues.reset,
+                                                class: "apexcharts-reset-zoom-icon",
+                                            }),
+                                        this.t.download &&
+                                            a.push({
+                                                el: this.elMenuIcon,
+                                                icon:
+                                                    "string" == typeof this.t.download
+                                                        ? this.t.download
+                                                        : '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></svg>',
+                                                title: this.localeValues.menu,
+                                                class: "apexcharts-menu-icon",
+                                            });
+                                    for (var s = 0; s < this.elCustomIcons.length; s++)
+                                        a.push({
+                                            el: this.elCustomIcons[s],
+                                            icon: this.t.customIcons[s].icon,
+                                            title: this.t.customIcons[s].title,
+                                            index: this.t.customIcons[s].index,
+                                            class: "apexcharts-toolbar-custom-icon " + this.t.customIcons[s].class,
+                                        });
+                                    a.forEach(function (t, e) {
+                                        t.index && p.moveIndexInArray(a, e, t.index);
+                                    });
+                                    for (var n = 0; n < a.length; n++) m.setAttrs(a[n].el, { class: a[n].class, title: a[n].title }), (a[n].el.innerHTML = a[n].icon), e.appendChild(a[n].el);
+                                    e.appendChild(this.elMenu), m.setAttrs(this.elMenu, { class: "apexcharts-menu" });
+                                    for (
+                                        var r = [
+                                                { name: "exportSVG", title: this.localeValues.exportToSVG },
+                                                { name: "exportPNG", title: this.localeValues.exportToPNG },
+                                            ],
+                                            o = 0;
+                                        o < r.length;
+                                        o++
+                                    )
+                                        this.elMenuItems.push(document.createElement("div")),
+                                            (this.elMenuItems[o].innerHTML = r[o].title),
+                                            m.setAttrs(this.elMenuItems[o], { class: "apexcharts-menu-item ".concat(r[o].name), title: r[o].title }),
+                                            this.elMenu.appendChild(this.elMenuItems[o]);
+                                    t.globals.zoomEnabled ? this.elZoom.classList.add("selected") : t.globals.panEnabled ? this.elPan.classList.add("selected") : t.globals.selectionEnabled && this.elSelection.classList.add("selected"),
+                                        this.addToolbarEventListeners();
+                                },
+                            },
+                            {
+                                key: "addToolbarEventListeners",
+                                value: function () {
+                                    var t = this;
+                                    this.elZoomReset.addEventListener("click", this.handleZoomReset.bind(this)),
+                                        this.elSelection.addEventListener("click", this.toggleSelection.bind(this)),
+                                        this.elZoom.addEventListener("click", this.toggleZooming.bind(this)),
+                                        this.elZoomIn.addEventListener("click", this.handleZoomIn.bind(this)),
+                                        this.elZoomOut.addEventListener("click", this.handleZoomOut.bind(this)),
+                                        this.elPan.addEventListener("click", this.togglePanning.bind(this)),
+                                        this.elMenuIcon.addEventListener("click", this.toggleMenu.bind(this)),
+                                        this.elMenuItems.forEach(function (e) {
+                                            e.classList.contains("exportSVG") ? e.addEventListener("click", t.downloadSVG.bind(t)) : e.classList.contains("exportPNG") && e.addEventListener("click", t.downloadPNG.bind(t));
+                                        });
+                                    for (var e = 0; e < this.t.customIcons.length; e++) this.elCustomIcons[e].addEventListener("click", this.t.customIcons[e].click);
+                                },
+                            },
+                            {
+                                key: "toggleSelection",
+                                value: function () {
+                                    this.toggleOtherControls(),
+                                        (this.w.globals.selectionEnabled = !this.w.globals.selectionEnabled),
+                                        this.elSelection.classList.contains("selected") ? this.elSelection.classList.remove("selected") : this.elSelection.classList.add("selected");
+                                },
+                            },
+                            {
+                                key: "toggleZooming",
+                                value: function () {
+                                    this.toggleOtherControls(),
+                                        (this.w.globals.zoomEnabled = !this.w.globals.zoomEnabled),
+                                        this.elZoom.classList.contains("selected") ? this.elZoom.classList.remove("selected") : this.elZoom.classList.add("selected");
+                                },
+                            },
+                            {
+                                key: "getToolbarIconsReference",
+                                value: function () {
+                                    var t = this.w;
+                                    this.elZoom || (this.elZoom = t.globals.dom.baseEl.querySelector(".apexcharts-zoom-icon")),
+                                        this.elPan || (this.elPan = t.globals.dom.baseEl.querySelector(".apexcharts-pan-icon")),
+                                        this.elSelection || (this.elSelection = t.globals.dom.baseEl.querySelector(".apexcharts-selection-icon"));
+                                },
+                            },
+                            {
+                                key: "enableZooming",
+                                value: function () {
+                                    this.toggleOtherControls(), (this.w.globals.zoomEnabled = !0), this.elZoom && this.elZoom.classList.add("selected"), this.elPan && this.elPan.classList.remove("selected");
+                                },
+                            },
+                            {
+                                key: "enablePanning",
+                                value: function () {
+                                    this.toggleOtherControls(), (this.w.globals.panEnabled = !0), this.elPan && this.elPan.classList.add("selected"), this.elZoom && this.elZoom.classList.remove("selected");
+                                },
+                            },
+                            {
+                                key: "togglePanning",
+                                value: function () {
+                                    this.toggleOtherControls(),
+                                        (this.w.globals.panEnabled = !this.w.globals.panEnabled),
+                                        this.elPan.classList.contains("selected") ? this.elPan.classList.remove("selected") : this.elPan.classList.add("selected");
+                                },
+                            },
+                            {
+                                key: "toggleOtherControls",
+                                value: function () {
+                                    var t = this.w;
+                                    (t.globals.panEnabled = !1),
+                                        (t.globals.zoomEnabled = !1),
+                                        (t.globals.selectionEnabled = !1),
+                                        this.getToolbarIconsReference(),
+                                        this.elPan && this.elPan.classList.remove("selected"),
+                                        this.elSelection && this.elSelection.classList.remove("selected"),
+                                        this.elZoom && this.elZoom.classList.remove("selected");
+                                },
+                            },
+                            {
+                                key: "handleZoomIn",
+                                value: function () {
+                                    var t = this.w,
+                                        e = (t.globals.minX + t.globals.maxX) / 2,
+                                        i = (t.globals.minX + e) / 2,
+                                        a = (t.globals.maxX + e) / 2;
+                                    t.globals.disableZoomIn || this.zoomUpdateOptions(i, a);
+                                },
+                            },
+                            {
+                                key: "handleZoomOut",
+                                value: function () {
+                                    var t = this.w;
+                                    if (!("datetime" === t.config.xaxis.type && new Date(t.globals.minX).getUTCFullYear() < 1e3)) {
+                                        var e = (t.globals.minX + t.globals.maxX) / 2,
+                                            i = t.globals.minX - (e - t.globals.minX),
+                                            a = t.globals.maxX - (e - t.globals.maxX);
+                                        t.globals.disableZoomOut || this.zoomUpdateOptions(i, a);
+                                    }
+                                },
+                            },
+                            {
+                                key: "zoomUpdateOptions",
+                                value: function (t, e) {
+                                    var i = { min: t, max: e },
+                                        a = this.getBeforeZoomRange(i);
+                                    a && (i = a.xaxis), (this.w.globals.zoomed = !0), this.ctx._updateOptions({ xaxis: i }, !1, this.w.config.chart.animations.dynamicAnimation.enabled), this.zoomCallback(i);
+                                },
+                            },
+                            {
+                                key: "zoomCallback",
+                                value: function (t, e) {
+                                    "function" == typeof this.ev.zoomed && this.ev.zoomed(this.ctx, { xaxis: t, yaxis: e });
+                                },
+                            },
+                            {
+                                key: "getBeforeZoomRange",
+                                value: function (t, e) {
+                                    var i = null;
+                                    return "function" == typeof this.ev.beforeZoom && (i = this.ev.beforeZoom(this, { xaxis: t, yaxis: e })), i;
+                                },
+                            },
+                            {
+                                key: "toggleMenu",
+                                value: function () {
+                                    this.elMenu.classList.contains("open") ? this.elMenu.classList.remove("open") : this.elMenu.classList.add("open");
+                                },
+                            },
+                            {
+                                key: "downloadPNG",
+                                value: function () {
+                                    var t = new ct(this.ctx);
+                                    t.exportToPng(this.ctx), this.toggleMenu();
+                                },
+                            },
+                            {
+                                key: "downloadSVG",
+                                value: function () {
+                                    var t = new ct(this.ctx);
+                                    t.exportToSVG(), this.toggleMenu();
+                                },
+                            },
+                            {
+                                key: "handleZoomReset",
+                                value: function (t) {
+                                    var e = this;
+                                    this.ctx.getSyncedCharts().forEach(function (t) {
+                                        var i = t.w;
+                                        i.globals.minX !== i.globals.initialminX &&
+                                            i.globals.maxX !== i.globals.initialmaxX &&
+                                            (t.revertDefaultAxisMinMax(),
+                                            "function" == typeof i.config.chart.events.zoomed && e.zoomCallback({ min: i.config.xaxis.min, max: i.config.xaxis.max }),
+                                            (i.globals.zoomed = !1),
+                                            t._updateSeries(i.globals.initialSeries, i.config.chart.animations.dynamicAnimation.enabled));
+                                    });
+                                },
+                            },
+                            {
+                                key: "destroy",
+                                value: function () {
+                                    (this.elZoom = null), (this.elZoomIn = null), (this.elZoomOut = null), (this.elPan = null), (this.elSelection = null), (this.elZoomReset = null), (this.elMenuIcon = null);
+                                },
+                            },
+                        ]),
+                        t
+                    );
+                })(),
+                kt = (function (t) {
+                    function e(t) {
+                        var i;
+                        return (
+                            n(this, e),
+                            ((i = f(this, d(e).call(this, t))).ctx = t),
+                            (i.w = t.w),
+                            (i.dragged = !1),
+                            (i.graphics = new m(i.ctx)),
+                            (i.eventList = ["mousedown", "mouseleave", "mousemove", "touchstart", "touchmove", "mouseup", "touchend"]),
+                            (i.clientX = 0),
+                            (i.clientY = 0),
+                            (i.startX = 0),
+                            (i.endX = 0),
+                            (i.dragX = 0),
+                            (i.startY = 0),
+                            (i.endY = 0),
+                            (i.dragY = 0),
+                            i
+                        );
+                    }
+                    return (
+                        c(e, wt),
+                        o(e, [
+                            {
+                                key: "init",
+                                value: function (t) {
+                                    var e = this,
+                                        i = t.xyRatios,
+                                        a = this.w,
+                                        s = this;
+                                    (this.xyRatios = i),
+                                        (this.zoomRect = this.graphics.drawRect(0, 0, 0, 0)),
+                                        (this.selectionRect = this.graphics.drawRect(0, 0, 0, 0)),
+                                        (this.gridRect = a.globals.dom.baseEl.querySelector(".apexcharts-grid")),
+                                        this.zoomRect.node.classList.add("apexcharts-zoom-rect"),
+                                        this.selectionRect.node.classList.add("apexcharts-selection-rect"),
+                                        a.globals.dom.elGraphical.add(this.zoomRect),
+                                        a.globals.dom.elGraphical.add(this.selectionRect),
+                                        "x" === a.config.chart.selection.type
+                                            ? (this.slDraggableRect = this.selectionRect.draggable({ minX: 0, minY: 0, maxX: a.globals.gridWidth, maxY: a.globals.gridHeight }).on("dragmove", this.selectionDragging.bind(this, "dragging")))
+                                            : "y" === a.config.chart.selection.type
+                                            ? (this.slDraggableRect = this.selectionRect.draggable({ minX: 0, maxX: a.globals.gridWidth }).on("dragmove", this.selectionDragging.bind(this, "dragging")))
+                                            : (this.slDraggableRect = this.selectionRect.draggable().on("dragmove", this.selectionDragging.bind(this, "dragging"))),
+                                        this.preselectedSelection(),
+                                        (this.hoverArea = a.globals.dom.baseEl.querySelector(a.globals.chartClass)),
+                                        this.hoverArea.classList.add("zoomable"),
+                                        this.eventList.forEach(function (t) {
+                                            e.hoverArea.addEventListener(t, s.svgMouseEvents.bind(s, i), { capture: !1, passive: !0 });
+                                        });
+                                },
+                            },
+                            {
+                                key: "destroy",
+                                value: function () {
+                                    this.slDraggableRect && (this.slDraggableRect.draggable(!1), this.slDraggableRect.off(), this.selectionRect.off()), (this.selectionRect = null), (this.zoomRect = null), (this.gridRect = null);
+                                },
+                            },
+                            {
+                                key: "svgMouseEvents",
+                                value: function (t, e) {
+                                    var i = this.w,
+                                        a = this,
+                                        s = this.ctx.toolbar,
+                                        n = i.globals.zoomEnabled ? i.config.chart.zoom.type : i.config.chart.selection.type;
+                                    if (
+                                        (e.shiftKey ? ((this.shiftWasPressed = !0), s.enablePanning()) : this.shiftWasPressed && (s.enableZooming(), (this.shiftWasPressed = !1)),
+                                        !(e.target.classList.contains("apexcharts-selection-rect") || e.target.parentNode.classList.contains("apexcharts-toolbar")))
+                                    ) {
+                                        if (
+                                            ((a.clientX = "touchmove" === e.type || "touchstart" === e.type ? e.touches[0].clientX : "touchend" === e.type ? e.changedTouches[0].clientX : e.clientX),
+                                            (a.clientY = "touchmove" === e.type || "touchstart" === e.type ? e.touches[0].clientY : "touchend" === e.type ? e.changedTouches[0].clientY : e.clientY),
+                                            "mousedown" === e.type && 1 === e.which)
+                                        ) {
+                                            var r = a.gridRect.getBoundingClientRect();
+                                            (a.startX = a.clientX - r.left), (a.startY = a.clientY - r.top), (a.dragged = !1), (a.w.globals.mousedown = !0);
+                                        }
+                                        if (
+                                            ((("mousemove" === e.type && 1 === e.which) || "touchmove" === e.type) &&
+                                                ((a.dragged = !0),
+                                                i.globals.panEnabled
+                                                    ? ((i.globals.selection = null), a.w.globals.mousedown && a.panDragging({ context: a, zoomtype: n, xyRatios: t }))
+                                                    : ((a.w.globals.mousedown && i.globals.zoomEnabled) || (a.w.globals.mousedown && i.globals.selectionEnabled)) && (a.selection = a.selectionDrawing({ context: a, zoomtype: n }))),
+                                            "mouseup" === e.type || "touchend" === e.type || "mouseleave" === e.type)
+                                        ) {
+                                            var o = a.gridRect.getBoundingClientRect();
+                                            a.w.globals.mousedown &&
+                                                ((a.endX = a.clientX - o.left),
+                                                (a.endY = a.clientY - o.top),
+                                                (a.dragX = Math.abs(a.endX - a.startX)),
+                                                (a.dragY = Math.abs(a.endY - a.startY)),
+                                                (i.globals.zoomEnabled || i.globals.selectionEnabled) && a.selectionDrawn({ context: a, zoomtype: n })),
+                                                i.globals.zoomEnabled && a.hideSelectionRect(this.selectionRect),
+                                                (a.dragged = !1),
+                                                (a.w.globals.mousedown = !1);
+                                        }
+                                        this.makeSelectionRectDraggable();
+                                    }
+                                },
+                            },
+                            {
+                                key: "makeSelectionRectDraggable",
+                                value: function () {
+                                    var t = this.w;
+                                    if (this.selectionRect) {
+                                        var e = this.selectionRect.node.getBoundingClientRect();
+                                        e.width > 0 &&
+                                            e.height > 0 &&
+                                            this.slDraggableRect
+                                                .selectize()
+                                                .resize({ constraint: { minX: 0, minY: 0, maxX: t.globals.gridWidth, maxY: t.globals.gridHeight } })
+                                                .on("resizing", this.selectionDragging.bind(this, "resizing"));
+                                    }
+                                },
+                            },
+                            {
+                                key: "preselectedSelection",
+                                value: function () {
+                                    var t = this.w,
+                                        e = this.xyRatios;
+                                    if (!t.globals.zoomEnabled)
+                                        if (void 0 !== t.globals.selection && null !== t.globals.selection) this.drawSelectionRect(t.globals.selection);
+                                        else if (void 0 !== t.config.chart.selection.xaxis.min && void 0 !== t.config.chart.selection.xaxis.max) {
+                                            var i = (t.config.chart.selection.xaxis.min - t.globals.minX) / e.xRatio,
+                                                a = {
+                                                    x: i,
+                                                    y: 0,
+                                                    width: t.globals.gridWidth - (t.globals.maxX - t.config.chart.selection.xaxis.max) / e.xRatio - i,
+                                                    height: t.globals.gridHeight,
+                                                    translateX: 0,
+                                                    translateY: 0,
+                                                    selectionEnabled: !0,
+                                                };
+                                            this.drawSelectionRect(a),
+                                                this.makeSelectionRectDraggable(),
+                                                "function" == typeof t.config.chart.events.selection &&
+                                                    t.config.chart.events.selection(this.ctx, { xaxis: { min: t.config.chart.selection.xaxis.min, max: t.config.chart.selection.xaxis.max }, yaxis: {} });
+                                        }
+                                },
+                            },
+                            {
+                                key: "drawSelectionRect",
+                                value: function (t) {
+                                    var e = t.x,
+                                        i = t.y,
+                                        a = t.width,
+                                        s = t.height,
+                                        n = t.translateX,
+                                        r = t.translateY,
+                                        o = this.w,
+                                        l = this.zoomRect,
+                                        h = this.selectionRect;
+                                    if (this.dragged || null !== o.globals.selection) {
+                                        var c = { transform: "translate(" + n + ", " + r + ")" };
+                                        o.globals.zoomEnabled &&
+                                            this.dragged &&
+                                            (l.attr({
+                                                x: e,
+                                                y: i,
+                                                width: a,
+                                                height: s,
+                                                fill: o.config.chart.zoom.zoomedArea.fill.color,
+                                                "fill-opacity": o.config.chart.zoom.zoomedArea.fill.opacity,
+                                                stroke: o.config.chart.zoom.zoomedArea.stroke.color,
+                                                "stroke-width": o.config.chart.zoom.zoomedArea.stroke.width,
+                                                "stroke-opacity": o.config.chart.zoom.zoomedArea.stroke.opacity,
+                                            }),
+                                            m.setAttrs(l.node, c)),
+                                            o.globals.selectionEnabled &&
+                                                (h.attr({
+                                                    x: e,
+                                                    y: i,
+                                                    width: a > 0 ? a : 0,
+                                                    height: s > 0 ? s : 0,
+                                                    fill: o.config.chart.selection.fill.color,
+                                                    "fill-opacity": o.config.chart.selection.fill.opacity,
+                                                    stroke: o.config.chart.selection.stroke.color,
+                                                    "stroke-width": o.config.chart.selection.stroke.width,
+                                                    "stroke-dasharray": o.config.chart.selection.stroke.dashArray,
+                                                    "stroke-opacity": o.config.chart.selection.stroke.opacity,
+                                                }),
+                                                m.setAttrs(h.node, c));
+                                    }
+                                },
+                            },
+                            {
+                                key: "hideSelectionRect",
+                                value: function (t) {
+                                    t && t.attr({ x: 0, y: 0, width: 0, height: 0 });
+                                },
+                            },
+                            {
+                                key: "selectionDrawing",
+                                value: function (t) {
+                                    var e = t.context,
+                                        i = t.zoomtype,
+                                        a = this.w,
+                                        s = e,
+                                        n = this.gridRect.getBoundingClientRect(),
+                                        r = s.startX - 1,
+                                        o = s.startY,
+                                        l = s.clientX - n.left - r,
+                                        h = s.clientY - n.top - o,
+                                        c = 0,
+                                        d = 0,
+                                        u = {};
+                                    return (
+                                        Math.abs(l + r) > a.globals.gridWidth ? (l = a.globals.gridWidth - r) : s.clientX - n.left < 0 && (l = r),
+                                        r > s.clientX - n.left && (c = -(l = Math.abs(l))),
+                                        o > s.clientY - n.top && (d = -(h = Math.abs(h))),
+                                        (u =
+                                            "x" === i
+                                                ? { x: r, y: 0, width: l, height: a.globals.gridHeight, translateX: c, translateY: 0 }
+                                                : "y" === i
+                                                ? { x: 0, y: o, width: a.globals.gridWidth, height: h, translateX: 0, translateY: d }
+                                                : { x: r, y: o, width: l, height: h, translateX: c, translateY: d }),
+                                        s.drawSelectionRect(u),
+                                        s.selectionDragging("resizing"),
+                                        u
+                                    );
+                                },
+                            },
+                            {
+                                key: "selectionDragging",
+                                value: function (t, e) {
+                                    var i = this,
+                                        a = this.w,
+                                        s = this.xyRatios,
+                                        n = this.selectionRect,
+                                        r = 0;
+                                    "resizing" === t && (r = 30),
+                                        "function" == typeof a.config.chart.events.selection &&
+                                            a.globals.selectionEnabled &&
+                                            (clearTimeout(this.w.globals.selectionResizeTimer),
+                                            (this.w.globals.selectionResizeTimer = window.setTimeout(function () {
+                                                var t = i.gridRect.getBoundingClientRect(),
+                                                    e = n.node.getBoundingClientRect(),
+                                                    r = a.globals.xAxisScale.niceMin + (e.left - t.left) * s.xRatio,
+                                                    o = a.globals.xAxisScale.niceMin + (e.right - t.left) * s.xRatio,
+                                                    l = a.globals.yAxisScale[0].niceMin + (t.bottom - e.bottom) * s.yRatio[0],
+                                                    h = a.globals.yAxisScale[0].niceMax - (e.top - t.top) * s.yRatio[0];
+                                                a.config.chart.events.selection(i.ctx, { xaxis: { min: r, max: o }, yaxis: { min: l, max: h } });
+                                            }, r)));
+                                },
+                            },
+                            {
+                                key: "selectionDrawn",
+                                value: function (t) {
+                                    var e = t.context,
+                                        i = t.zoomtype,
+                                        a = this.w,
+                                        s = e,
+                                        n = this.xyRatios,
+                                        r = this.ctx.toolbar;
+                                    if (s.startX > s.endX) {
+                                        var o = s.startX;
+                                        (s.startX = s.endX), (s.endX = o);
+                                    }
+                                    if (s.startY > s.endY) {
+                                        var l = s.startY;
+                                        (s.startY = s.endY), (s.endY = l);
+                                    }
+                                    var h = a.globals.xAxisScale.niceMin + s.startX * n.xRatio,
+                                        c = a.globals.xAxisScale.niceMin + s.endX * n.xRatio,
+                                        d = [],
+                                        u = [];
+                                    if (
+                                        (a.config.yaxis.forEach(function (t, e) {
+                                            d.push(Math.floor(a.globals.yAxisScale[e].niceMax - n.yRatio[e] * s.startY)), u.push(Math.floor(a.globals.yAxisScale[e].niceMax - n.yRatio[e] * s.endY));
+                                        }),
+                                        s.dragged && (s.dragX > 10 || s.dragY > 10) && h !== c)
+                                    )
+                                        if (a.globals.zoomEnabled) {
+                                            var f = p.clone(a.globals.initialConfig.yaxis);
+                                            a.globals.zoomed || ((a.globals.lastXAxis = p.clone(a.config.xaxis)), (a.globals.lastYAxis = p.clone(a.config.yaxis)));
+                                            var g = { min: h, max: c };
+                                            if (
+                                                (("xy" !== i && "y" !== i) ||
+                                                    f.forEach(function (t, e) {
+                                                        (f[e].min = u[e]), (f[e].max = d[e]);
+                                                    }),
+                                                a.config.chart.zoom.autoScaleYaxis)
+                                            ) {
+                                                var x = new Z(s.ctx);
+                                                f = x.autoScaleY(s.ctx, f, { xaxis: g });
+                                            }
+                                            if (r) {
+                                                var v = r.getBeforeZoomRange(g, f);
+                                                v && ((g = v.xaxis ? v.xaxis : g), (f = v.yaxis ? v.yaxe : f));
+                                            }
+                                            s.ctx._updateOptions({ xaxis: g, yaxis: f }, !1, s.w.config.chart.animations.dynamicAnimation.enabled),
+                                                "function" == typeof a.config.chart.events.zoomed && r.zoomCallback(g, f),
+                                                (a.globals.zoomed = !0);
+                                        } else if (a.globals.selectionEnabled) {
+                                            var m,
+                                                b = null;
+                                            (m = { min: h, max: c }),
+                                                ("xy" !== i && "y" !== i) ||
+                                                    (b = p.clone(a.config.yaxis)).forEach(function (t, e) {
+                                                        (b[e].min = u[e]), (b[e].max = d[e]);
+                                                    }),
+                                                (a.globals.selection = s.selection),
+                                                "function" == typeof a.config.chart.events.selection && a.config.chart.events.selection(s.ctx, { xaxis: m, yaxis: b });
+                                        }
+                                },
+                            },
+                            {
+                                key: "panDragging",
+                                value: function (t) {
+                                    var e,
+                                        i = t.context,
+                                        a = this.w,
+                                        s = i;
+                                    if (void 0 !== a.globals.lastClientPosition.x) {
+                                        var n = a.globals.lastClientPosition.x - s.clientX,
+                                            r = a.globals.lastClientPosition.y - s.clientY;
+                                        Math.abs(n) > Math.abs(r) && n > 0
+                                            ? (e = "left")
+                                            : Math.abs(n) > Math.abs(r) && n < 0
+                                            ? (e = "right")
+                                            : Math.abs(r) > Math.abs(n) && r > 0
+                                            ? (e = "up")
+                                            : Math.abs(r) > Math.abs(n) && r < 0 && (e = "down");
+                                    }
+                                    a.globals.lastClientPosition = { x: s.clientX, y: s.clientY };
+                                    var o = a.globals.minX,
+                                        l = a.globals.maxX;
+                                    s.panScrolled(e, o, l);
+                                },
+                            },
+                            {
+                                key: "panScrolled",
+                                value: function (t, e, i) {
+                                    var a = this.w,
+                                        s = this.xyRatios,
+                                        n = p.clone(a.globals.initialConfig.yaxis);
+                                    "left" === t
+                                        ? ((e = a.globals.minX + (a.globals.gridWidth / 15) * s.xRatio), (i = a.globals.maxX + (a.globals.gridWidth / 15) * s.xRatio))
+                                        : "right" === t && ((e = a.globals.minX - (a.globals.gridWidth / 15) * s.xRatio), (i = a.globals.maxX - (a.globals.gridWidth / 15) * s.xRatio)),
+                                        (e < a.globals.initialminX || i > a.globals.initialmaxX) && ((e = a.globals.minX), (i = a.globals.maxX));
+                                    var r = { min: e, max: i };
+                                    a.config.chart.zoom.autoScaleYaxis && (n = new Z(this.ctx).autoScaleY(this.ctx, n, { xaxis: r }));
+                                    this.ctx._updateOptions({ xaxis: { min: e, max: i }, yaxis: n }, !1, !1), "function" == typeof a.config.chart.events.scrolled && a.config.chart.events.scrolled(this.ctx, { xaxis: { min: e, max: i } });
+                                },
+                            },
+                        ]),
+                        e
+                    );
+                })(),
+                St = (function () {
+                    function t(e) {
+                        n(this, t), (this.ctx = e), (this.w = e.w);
+                    }
+                    return (
+                        o(t, [
+                            {
+                                key: "draw",
+                                value: function () {
+                                    this.drawTitleSubtitle("title"), this.drawTitleSubtitle("subtitle");
+                                },
+                            },
+                            {
+                                key: "drawTitleSubtitle",
+                                value: function (t) {
+                                    var e = this.w,
+                                        i = "title" === t ? e.config.title : e.config.subtitle,
+                                        a = e.globals.svgWidth / 2,
+                                        s = i.offsetY,
+                                        n = "middle";
+                                    if (("left" === i.align ? ((a = 10), (n = "start")) : "right" === i.align && ((a = e.globals.svgWidth - 10), (n = "end")), (a += i.offsetX), (s = s + parseInt(i.style.fontSize) + 2), void 0 !== i.text)) {
+                                        var r = new m(this.ctx).drawText({ x: a, y: s, text: i.text, textAnchor: n, fontSize: i.style.fontSize, fontFamily: i.style.fontFamily, foreColor: i.style.color, opacity: 1 });
+                                        r.node.setAttribute("class", "apexcharts-".concat(t, "-text")), e.globals.dom.Paper.add(r);
+                                    }
+                                },
+                            },
+                        ]),
+                        t
+                    );
+                })();
+            (lt = "undefined" != typeof window ? window : void 0),
+                (ht = function (t, e) {
+                    var i = ((void 0 !== this ? this : t).SVG = function (t) {
+                        if (i.supported) return (t = new i.Doc(t)), i.parser.draw || i.prepare(), t;
+                    });
+                    if (((i.ns = "http://www.w3.org/2000/svg"), (i.xmlns = "http://www.w3.org/2000/xmlns/"), (i.xlink = "http://www.w3.org/1999/xlink"), (i.svgjs = "http://svgjs.com/svgjs"), (i.supported = !0), !i.supported)) return !1;
+                    (i.did = 1e3),
+                        (i.eid = function (t) {
+                            return "Svgjs" + d(t) + i.did++;
+                        }),
+                        (i.create = function (t) {
+                            var i = e.createElementNS(this.ns, t);
+                            return i.setAttribute("id", this.eid(t)), i;
+                        }),
+                        (i.extend = function () {
+                            var t, e, a, s;
+                            for (e = (t = [].slice.call(arguments)).pop(), s = t.length - 1; s >= 0; s--) if (t[s]) for (a in e) t[s].prototype[a] = e[a];
+                            i.Set && i.Set.inherit && i.Set.inherit();
+                        }),
+                        (i.invent = function (t) {
+                            var e =
+                                "function" == typeof t.create
+                                    ? t.create
+                                    : function () {
+                                          this.constructor.call(this, i.create(t.create));
+                                      };
+                            return t.inherit && (e.prototype = new t.inherit()), t.extend && i.extend(e, t.extend), t.construct && i.extend(t.parent || i.Container, t.construct), e;
+                        }),
+                        (i.adopt = function (e) {
+                            return e
+                                ? e.instance
+                                    ? e.instance
+                                    : (((a =
+                                          "svg" == e.nodeName
+                                              ? e.parentNode instanceof t.SVGElement
+                                                  ? new i.Nested()
+                                                  : new i.Doc()
+                                              : "linearGradient" == e.nodeName
+                                              ? new i.Gradient("linear")
+                                              : "radialGradient" == e.nodeName
+                                              ? new i.Gradient("radial")
+                                              : i[d(e.nodeName)]
+                                              ? new i[d(e.nodeName)]()
+                                              : new i.Element(e)).type = e.nodeName),
+                                      (a.node = e),
+                                      (e.instance = a),
+                                      a instanceof i.Doc && a.namespace().defs(),
+                                      a.setData(JSON.parse(e.getAttribute("svgjs:data")) || {}),
+                                      a)
+                                : null;
+                            var a;
+                        }),
+                        (i.prepare = function () {
+                            var t = e.getElementsByTagName("body")[0],
+                                a = (t ? new i.Doc(t) : i.adopt(e.documentElement).nested()).size(2, 0);
+                            i.parser = { body: t || e.documentElement, draw: a.style("opacity:0;position:absolute;left:-100%;top:-100%;overflow:hidden").node, poly: a.polyline().node, path: a.path().node, native: i.create("svg") };
+                        }),
+                        (i.parser = { native: i.create("svg") }),
+                        e.addEventListener(
+                            "DOMContentLoaded",
+                            function () {
+                                i.parser.draw || i.prepare();
+                            },
+                            !1
+                        ),
+                        (i.regex = {
+                            numberAndUnit: /^([+-]?(\d+(\.\d*)?|\.\d+)(e[+-]?\d+)?)([a-z%]*)$/i,
+                            hex: /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i,
+                            rgb: /rgb\((\d+),(\d+),(\d+)\)/,
+                            reference: /#([a-z0-9\-_]+)/i,
+                            transforms: /\)\s*,?\s*/,
+                            whitespace: /\s/g,
+                            isHex: /^#[a-f0-9]{3,6}$/i,
+                            isRgb: /^rgb\(/,
+                            isCss: /[^:]+:[^;]+;?/,
+                            isBlank: /^(\s+)?$/,
+                            isNumber: /^[+-]?(\d+(\.\d*)?|\.\d+)(e[+-]?\d+)?$/i,
+                            isPercent: /^-?[\d\.]+%$/,
+                            isImage: /\.(jpg|jpeg|png|gif|svg)(\?[^=]+.*)?/i,
+                            delimiter: /[\s,]+/,
+                            hyphen: /([^e])\-/gi,
+                            pathLetters: /[MLHVCSQTAZ]/gi,
+                            isPathLetter: /[MLHVCSQTAZ]/i,
+                            numbersWithDots: /((\d?\.\d+(?:e[+-]?\d+)?)((?:\.\d+(?:e[+-]?\d+)?)+))+/gi,
+                            dots: /\./g,
+                        }),
+                        (i.utils = {
+                            map: function (t, e) {
+                                var i,
+                                    a = t.length,
+                                    s = [];
+                                for (i = 0; i < a; i++) s.push(e(t[i]));
+                                return s;
+                            },
+                            filter: function (t, e) {
+                                var i,
+                                    a = t.length,
+                                    s = [];
+                                for (i = 0; i < a; i++) e(t[i]) && s.push(t[i]);
+                                return s;
+                            },
+                            radians: function (t) {
+                                return ((t % 360) * Math.PI) / 180;
+                            },
+                            degrees: function (t) {
+                                return ((180 * t) / Math.PI) % 360;
+                            },
+                            filterSVGElements: function (e) {
+                                return this.filter(e, function (e) {
+                                    return e instanceof t.SVGElement;
+                                });
+                            },
+                        }),
+                        (i.defaults = {
+                            attrs: {
+                                "fill-opacity": 1,
+                                "stroke-opacity": 1,
+                                "stroke-width": 0,
+                                "stroke-linejoin": "miter",
+                                "stroke-linecap": "butt",
+                                fill: "#000000",
+                                stroke: "#000000",
+                                opacity: 1,
+                                x: 0,
+                                y: 0,
+                                cx: 0,
+                                cy: 0,
+                                width: 0,
+                                height: 0,
+                                r: 0,
+                                rx: 0,
+                                ry: 0,
+                                offset: 0,
+                                "stop-opacity": 1,
+                                "stop-color": "#000000",
+                                "font-size": 16,
+                                "font-family": "Helvetica, Arial, sans-serif",
+                                "text-anchor": "start",
+                            },
+                        }),
+                        (i.Color = function (t) {
+                            var e, a;
+                            ((this.r = 0), (this.g = 0), (this.b = 0), t) &&
+                                ("string" == typeof t
+                                    ? i.regex.isRgb.test(t)
+                                        ? ((e = i.regex.rgb.exec(t.replace(i.regex.whitespace, ""))), (this.r = parseInt(e[1])), (this.g = parseInt(e[2])), (this.b = parseInt(e[3])))
+                                        : i.regex.isHex.test(t) &&
+                                          ((e = i.regex.hex.exec(4 == (a = t).length ? ["#", a.substring(1, 2), a.substring(1, 2), a.substring(2, 3), a.substring(2, 3), a.substring(3, 4), a.substring(3, 4)].join("") : a)),
+                                          (this.r = parseInt(e[1], 16)),
+                                          (this.g = parseInt(e[2], 16)),
+                                          (this.b = parseInt(e[3], 16)))
+                                    : "object" === s(t) && ((this.r = t.r), (this.g = t.g), (this.b = t.b)));
+                        }),
+                        i.extend(i.Color, {
+                            toString: function () {
+                                return this.toHex();
+                            },
+                            toHex: function () {
+                                return "#" + u(this.r) + u(this.g) + u(this.b);
+                            },
+                            toRgb: function () {
+                                return "rgb(" + [this.r, this.g, this.b].join() + ")";
+                            },
+                            brightness: function () {
+                                return (this.r / 255) * 0.3 + (this.g / 255) * 0.59 + (this.b / 255) * 0.11;
+                            },
+                            morph: function (t) {
+                                return (this.destination = new i.Color(t)), this;
+                            },
+                            at: function (t) {
+                                return this.destination
+                                    ? ((t = t < 0 ? 0 : t > 1 ? 1 : t),
+                                      new i.Color({ r: ~~(this.r + (this.destination.r - this.r) * t), g: ~~(this.g + (this.destination.g - this.g) * t), b: ~~(this.b + (this.destination.b - this.b) * t) }))
+                                    : this;
+                            },
+                        }),
+                        (i.Color.test = function (t) {
+                            return (t += ""), i.regex.isHex.test(t) || i.regex.isRgb.test(t);
+                        }),
+                        (i.Color.isRgb = function (t) {
+                            return t && "number" == typeof t.r && "number" == typeof t.g && "number" == typeof t.b;
+                        }),
+                        (i.Color.isColor = function (t) {
+                            return i.Color.isRgb(t) || i.Color.test(t);
+                        }),
+                        (i.Array = function (t, e) {
+                            0 == (t = (t || []).valueOf()).length && e && (t = e.valueOf()), (this.value = this.parse(t));
+                        }),
+                        i.extend(i.Array, {
+                            morph: function (t) {
+                                if (((this.destination = this.parse(t)), this.value.length != this.destination.length)) {
+                                    for (var e = this.value[this.value.length - 1], i = this.destination[this.destination.length - 1]; this.value.length > this.destination.length; ) this.destination.push(i);
+                                    for (; this.value.length < this.destination.length; ) this.value.push(e);
+                                }
+                                return this;
+                            },
+                            settle: function () {
+                                for (var t = 0, e = this.value.length, i = []; t < e; t++) -1 == i.indexOf(this.value[t]) && i.push(this.value[t]);
+                                return (this.value = i);
+                            },
+                            at: function (t) {
+                                if (!this.destination) return this;
+                                for (var e = 0, a = this.value.length, s = []; e < a; e++) s.push(this.value[e] + (this.destination[e] - this.value[e]) * t);
+                                return new i.Array(s);
+                            },
+                            toString: function () {
+                                return this.value.join(" ");
+                            },
+                            valueOf: function () {
+                                return this.value;
+                            },
+                            parse: function (t) {
+                                return (t = t.valueOf()), Array.isArray(t) ? t : this.split(t);
+                            },
+                            split: function (t) {
+                                return t.trim().split(i.regex.delimiter).map(parseFloat);
+                            },
+                            reverse: function () {
+                                return this.value.reverse(), this;
+                            },
+                            clone: function () {
+                                var t = new this.constructor();
+                                return (
+                                    (t.value = (function t(e) {
+                                        var i = e.slice(0);
+                                        for (var a = i.length; a--; ) Array.isArray(i[a]) && (i[a] = t(i[a]));
+                                        return i;
+                                    })(this.value)),
+                                    t
+                                );
+                            },
+                        }),
+                        (i.PointArray = function (t, e) {
+                            i.Array.call(this, t, e || [[0, 0]]);
+                        }),
+                        (i.PointArray.prototype = new i.Array()),
+                        (i.PointArray.prototype.constructor = i.PointArray),
+                        i.extend(i.PointArray, {
+                            toString: function () {
+                                for (var t = 0, e = this.value.length, i = []; t < e; t++) i.push(this.value[t].join(","));
+                                return i.join(" ");
+                            },
+                            toLine: function () {
+                                return { x1: this.value[0][0], y1: this.value[0][1], x2: this.value[1][0], y2: this.value[1][1] };
+                            },
+                            at: function (t) {
+                                if (!this.destination) return this;
+                                for (var e = 0, a = this.value.length, s = []; e < a; e++) s.push([this.value[e][0] + (this.destination[e][0] - this.value[e][0]) * t, this.value[e][1] + (this.destination[e][1] - this.value[e][1]) * t]);
+                                return new i.PointArray(s);
+                            },
+                            parse: function (t) {
+                                var e = [];
+                                if (((t = t.valueOf()), Array.isArray(t))) {
+                                    if (Array.isArray(t[0]))
+                                        return t.map(function (t) {
+                                            return t.slice();
+                                        });
+                                    if (null != t[0].x)
+                                        return t.map(function (t) {
+                                            return [t.x, t.y];
+                                        });
+                                } else t = t.trim().split(i.regex.delimiter).map(parseFloat);
+                                t.length % 2 != 0 && t.pop();
+                                for (var a = 0, s = t.length; a < s; a += 2) e.push([t[a], t[a + 1]]);
+                                return e;
+                            },
+                            move: function (t, e) {
+                                var i = this.bbox();
+                                if (((t -= i.x), (e -= i.y), !isNaN(t) && !isNaN(e))) for (var a = this.value.length - 1; a >= 0; a--) this.value[a] = [this.value[a][0] + t, this.value[a][1] + e];
+                                return this;
+                            },
+                            size: function (t, e) {
+                                var i,
+                                    a = this.bbox();
+                                for (i = this.value.length - 1; i >= 0; i--) a.width && (this.value[i][0] = ((this.value[i][0] - a.x) * t) / a.width + a.x), a.height && (this.value[i][1] = ((this.value[i][1] - a.y) * e) / a.height + a.y);
+                                return this;
+                            },
+                            bbox: function () {
+                                return i.parser.draw || i.prepare(), i.parser.poly.setAttribute("points", this.toString()), i.parser.poly.getBBox();
+                            },
+                        });
+                    for (
+                        var a = {
+                                M: function (t, e, i) {
+                                    return (e.x = i.x = t[0]), (e.y = i.y = t[1]), ["M", e.x, e.y];
+                                },
+                                L: function (t, e) {
+                                    return (e.x = t[0]), (e.y = t[1]), ["L", t[0], t[1]];
+                                },
+                                H: function (t, e) {
+                                    return (e.x = t[0]), ["H", t[0]];
+                                },
+                                V: function (t, e) {
+                                    return (e.y = t[0]), ["V", t[0]];
+                                },
+                                C: function (t, e) {
+                                    return (e.x = t[4]), (e.y = t[5]), ["C", t[0], t[1], t[2], t[3], t[4], t[5]];
+                                },
+                                S: function (t, e) {
+                                    return (e.x = t[2]), (e.y = t[3]), ["S", t[0], t[1], t[2], t[3]];
+                                },
+                                Q: function (t, e) {
+                                    return (e.x = t[2]), (e.y = t[3]), ["Q", t[0], t[1], t[2], t[3]];
+                                },
+                                T: function (t, e) {
+                                    return (e.x = t[0]), (e.y = t[1]), ["T", t[0], t[1]];
+                                },
+                                Z: function (t, e, i) {
+                                    return (e.x = i.x), (e.y = i.y), ["Z"];
+                                },
+                                A: function (t, e) {
+                                    return (e.x = t[5]), (e.y = t[6]), ["A", t[0], t[1], t[2], t[3], t[4], t[5], t[6]];
+                                },
+                            },
+                            n = "mlhvqtcsaz".split(""),
+                            r = 0,
+                            o = n.length;
+                        r < o;
+                        ++r
+                    )
+                        a[n[r]] = (function (t) {
+                            return function (e, i, s) {
+                                if ("H" == t) e[0] = e[0] + i.x;
+                                else if ("V" == t) e[0] = e[0] + i.y;
+                                else if ("A" == t) (e[5] = e[5] + i.x), (e[6] = e[6] + i.y);
+                                else for (var n = 0, r = e.length; n < r; ++n) e[n] = e[n] + (n % 2 ? i.y : i.x);
+                                return a[t](e, i, s);
+                            };
+                        })(n[r].toUpperCase());
+                    (i.PathArray = function (t, e) {
+                        i.Array.call(this, t, e || [["M", 0, 0]]);
+                    }),
+                        (i.PathArray.prototype = new i.Array()),
+                        (i.PathArray.prototype.constructor = i.PathArray),
+                        i.extend(i.PathArray, {
+                            toString: function () {
+                                return (function (t) {
+                                    for (var e = 0, i = t.length, a = ""; e < i; e++)
+                                        (a += t[e][0]),
+                                            null != t[e][1] &&
+                                                ((a += t[e][1]),
+                                                null != t[e][2] &&
+                                                    ((a += " "),
+                                                    (a += t[e][2]),
+                                                    null != t[e][3] &&
+                                                        ((a += " "),
+                                                        (a += t[e][3]),
+                                                        (a += " "),
+                                                        (a += t[e][4]),
+                                                        null != t[e][5] && ((a += " "), (a += t[e][5]), (a += " "), (a += t[e][6]), null != t[e][7] && ((a += " "), (a += t[e][7]))))));
+                                    return a + " ";
+                                })(this.value);
+                            },
+                            move: function (t, e) {
+                                var i = this.bbox();
+                                if (((t -= i.x), (e -= i.y), !isNaN(t) && !isNaN(e)))
+                                    for (var a, s = this.value.length - 1; s >= 0; s--)
+                                        "M" == (a = this.value[s][0]) || "L" == a || "T" == a
+                                            ? ((this.value[s][1] += t), (this.value[s][2] += e))
+                                            : "H" == a
+                                            ? (this.value[s][1] += t)
+                                            : "V" == a
+                                            ? (this.value[s][1] += e)
+                                            : "C" == a || "S" == a || "Q" == a
+                                            ? ((this.value[s][1] += t), (this.value[s][2] += e), (this.value[s][3] += t), (this.value[s][4] += e), "C" == a && ((this.value[s][5] += t), (this.value[s][6] += e)))
+                                            : "A" == a && ((this.value[s][6] += t), (this.value[s][7] += e));
+                                return this;
+                            },
+                            size: function (t, e) {
+                                var i,
+                                    a,
+                                    s = this.bbox();
+                                for (i = this.value.length - 1; i >= 0; i--)
+                                    "M" == (a = this.value[i][0]) || "L" == a || "T" == a
+                                        ? ((this.value[i][1] = ((this.value[i][1] - s.x) * t) / s.width + s.x), (this.value[i][2] = ((this.value[i][2] - s.y) * e) / s.height + s.y))
+                                        : "H" == a
+                                        ? (this.value[i][1] = ((this.value[i][1] - s.x) * t) / s.width + s.x)
+                                        : "V" == a
+                                        ? (this.value[i][1] = ((this.value[i][1] - s.y) * e) / s.height + s.y)
+                                        : "C" == a || "S" == a || "Q" == a
+                                        ? ((this.value[i][1] = ((this.value[i][1] - s.x) * t) / s.width + s.x),
+                                          (this.value[i][2] = ((this.value[i][2] - s.y) * e) / s.height + s.y),
+                                          (this.value[i][3] = ((this.value[i][3] - s.x) * t) / s.width + s.x),
+                                          (this.value[i][4] = ((this.value[i][4] - s.y) * e) / s.height + s.y),
+                                          "C" == a && ((this.value[i][5] = ((this.value[i][5] - s.x) * t) / s.width + s.x), (this.value[i][6] = ((this.value[i][6] - s.y) * e) / s.height + s.y)))
+                                        : "A" == a &&
+                                          ((this.value[i][1] = (this.value[i][1] * t) / s.width),
+                                          (this.value[i][2] = (this.value[i][2] * e) / s.height),
+                                          (this.value[i][6] = ((this.value[i][6] - s.x) * t) / s.width + s.x),
+                                          (this.value[i][7] = ((this.value[i][7] - s.y) * e) / s.height + s.y));
+                                return this;
+                            },
+                            equalCommands: function (t) {
+                                var e, a, s;
+                                for (t = new i.PathArray(t), s = this.value.length === t.value.length, e = 0, a = this.value.length; s && e < a; e++) s = this.value[e][0] === t.value[e][0];
+                                return s;
+                            },
+                            morph: function (t) {
+                                return (t = new i.PathArray(t)), this.equalCommands(t) ? (this.destination = t) : (this.destination = null), this;
+                            },
+                            at: function (t) {
+                                if (!this.destination) return this;
+                                var e,
+                                    a,
+                                    s,
+                                    n,
+                                    r = this.value,
+                                    o = this.destination.value,
+                                    l = [],
+                                    h = new i.PathArray();
+                                for (e = 0, a = r.length; e < a; e++) {
+                                    for (l[e] = [r[e][0]], s = 1, n = r[e].length; s < n; s++) l[e][s] = r[e][s] + (o[e][s] - r[e][s]) * t;
+                                    "A" === l[e][0] && ((l[e][4] = +(0 != l[e][4])), (l[e][5] = +(0 != l[e][5])));
+                                }
+                                return (h.value = l), h;
+                            },
+                            parse: function (t) {
+                                if (t instanceof i.PathArray) return t.valueOf();
+                                var e,
+                                    s = { M: 2, L: 2, H: 1, V: 1, C: 6, S: 4, Q: 4, T: 2, A: 7, Z: 0 };
+                                t =
+                                    "string" == typeof t
+                                        ? t.replace(i.regex.numbersWithDots, h).replace(i.regex.pathLetters, " $& ").replace(i.regex.hyphen, "$1 -").trim().split(i.regex.delimiter)
+                                        : t.reduce(function (t, e) {
+                                              return [].concat.call(t, e);
+                                          }, []);
+                                var n = [],
+                                    r = new i.Point(),
+                                    o = new i.Point(),
+                                    l = 0,
+                                    c = t.length;
+                                do {
+                                    i.regex.isPathLetter.test(t[l]) ? ((e = t[l]), ++l) : "M" == e ? (e = "L") : "m" == e && (e = "l"), n.push(a[e].call(null, t.slice(l, (l += s[e.toUpperCase()])).map(parseFloat), r, o));
+                                } while (c > l);
+                                return n;
+                            },
+                            bbox: function () {
+                                return i.parser.draw || i.prepare(), i.parser.path.setAttribute("d", this.toString()), i.parser.path.getBBox();
+                            },
+                        }),
+                        (i.Number = i.invent({
+                            create: function (t, e) {
+                                (this.value = 0),
+                                    (this.unit = e || ""),
+                                    "number" == typeof t
+                                        ? (this.value = isNaN(t) ? 0 : isFinite(t) ? t : t < 0 ? -3.4e38 : 3.4e38)
+                                        : "string" == typeof t
+                                        ? (e = t.match(i.regex.numberAndUnit)) && ((this.value = parseFloat(e[1])), "%" == e[5] ? (this.value /= 100) : "s" == e[5] && (this.value *= 1e3), (this.unit = e[5]))
+                                        : t instanceof i.Number && ((this.value = t.valueOf()), (this.unit = t.unit));
+                            },
+                            extend: {
+                                toString: function () {
+                                    return ("%" == this.unit ? ~~(1e8 * this.value) / 1e6 : "s" == this.unit ? this.value / 1e3 : this.value) + this.unit;
+                                },
+                                toJSON: function () {
+                                    return this.toString();
+                                },
+                                valueOf: function () {
+                                    return this.value;
+                                },
+                                plus: function (t) {
+                                    return (t = new i.Number(t)), new i.Number(this + t, this.unit || t.unit);
+                                },
+                                minus: function (t) {
+                                    return (t = new i.Number(t)), new i.Number(this - t, this.unit || t.unit);
+                                },
+                                times: function (t) {
+                                    return (t = new i.Number(t)), new i.Number(this * t, this.unit || t.unit);
+                                },
+                                divide: function (t) {
+                                    return (t = new i.Number(t)), new i.Number(this / t, this.unit || t.unit);
+                                },
+                                to: function (t) {
+                                    var e = new i.Number(this);
+                                    return "string" == typeof t && (e.unit = t), e;
+                                },
+                                morph: function (t) {
+                                    return (this.destination = new i.Number(t)), t.relative && (this.destination.value += this.value), this;
+                                },
+                                at: function (t) {
+                                    return this.destination ? new i.Number(this.destination).minus(this).times(t).plus(this) : this;
+                                },
+                            },
+                        })),
+                        (i.Element = i.invent({
+                            create: function (t) {
+                                (this._stroke = i.defaults.attrs.stroke),
+                                    (this._event = null),
+                                    (this.dom = {}),
+                                    (this.node = t) && ((this.type = t.nodeName), (this.node.instance = this), (this._stroke = t.getAttribute("stroke") || this._stroke));
+                            },
+                            extend: {
+                                x: function (t) {
+                                    return this.attr("x", t);
+                                },
+                                y: function (t) {
+                                    return this.attr("y", t);
+                                },
+                                cx: function (t) {
+                                    return null == t ? this.x() + this.width() / 2 : this.x(t - this.width() / 2);
+                                },
+                                cy: function (t) {
+                                    return null == t ? this.y() + this.height() / 2 : this.y(t - this.height() / 2);
+                                },
+                                move: function (t, e) {
+                                    return this.x(t).y(e);
+                                },
+                                center: function (t, e) {
+                                    return this.cx(t).cy(e);
+                                },
+                                width: function (t) {
+                                    return this.attr("width", t);
+                                },
+                                height: function (t) {
+                                    return this.attr("height", t);
+                                },
+                                size: function (t, e) {
+                                    var a = f(this, t, e);
+                                    return this.width(new i.Number(a.width)).height(new i.Number(a.height));
+                                },
+                                clone: function (t) {
+                                    this.writeDataToDom();
+                                    var e = v(this.node.cloneNode(!0));
+                                    return t ? t.add(e) : this.after(e), e;
+                                },
+                                remove: function () {
+                                    return this.parent() && this.parent().removeElement(this), this;
+                                },
+                                replace: function (t) {
+                                    return this.after(t).remove(), t;
+                                },
+                                addTo: function (t) {
+                                    return t.put(this);
+                                },
+                                putIn: function (t) {
+                                    return t.add(this);
+                                },
+                                id: function (t) {
+                                    return this.attr("id", t);
+                                },
+                                inside: function (t, e) {
+                                    var i = this.bbox();
+                                    return t > i.x && e > i.y && t < i.x + i.width && e < i.y + i.height;
+                                },
+                                show: function () {
+                                    return this.style("display", "");
+                                },
+                                hide: function () {
+                                    return this.style("display", "none");
+                                },
+                                visible: function () {
+                                    return "none" != this.style("display");
+                                },
+                                toString: function () {
+                                    return this.attr("id");
+                                },
+                                classes: function () {
+                                    var t = this.attr("class");
+                                    return null == t ? [] : t.trim().split(i.regex.delimiter);
+                                },
+                                hasClass: function (t) {
+                                    return -1 != this.classes().indexOf(t);
+                                },
+                                addClass: function (t) {
+                                    if (!this.hasClass(t)) {
+                                        var e = this.classes();
+                                        e.push(t), this.attr("class", e.join(" "));
+                                    }
+                                    return this;
+                                },
+                                removeClass: function (t) {
+                                    return (
+                                        this.hasClass(t) &&
+                                            this.attr(
+                                                "class",
+                                                this.classes()
+                                                    .filter(function (e) {
+                                                        return e != t;
+                                                    })
+                                                    .join(" ")
+                                            ),
+                                        this
+                                    );
+                                },
+                                toggleClass: function (t) {
+                                    return this.hasClass(t) ? this.removeClass(t) : this.addClass(t);
+                                },
+                                reference: function (t) {
+                                    return i.get(this.attr(t));
+                                },
+                                parent: function (e) {
+                                    var a = this;
+                                    if (!a.node.parentNode) return null;
+                                    if (((a = i.adopt(a.node.parentNode)), !e)) return a;
+                                    for (; a && a.node instanceof t.SVGElement; ) {
+                                        if ("string" == typeof e ? a.matches(e) : a instanceof e) return a;
+                                        if (!a.node.parentNode || "#document" == a.node.parentNode.nodeName) return null;
+                                        a = i.adopt(a.node.parentNode);
+                                    }
+                                },
+                                doc: function () {
+                                    return this instanceof i.Doc ? this : this.parent(i.Doc);
+                                },
+                                parents: function (t) {
+                                    var e = [],
+                                        i = this;
+                                    do {
+                                        if (!(i = i.parent(t)) || !i.node) break;
+                                        e.push(i);
+                                    } while (i.parent);
+                                    return e;
+                                },
+                                matches: function (t) {
+                                    return (function (t, e) {
+                                        return (t.matches || t.matchesSelector || t.msMatchesSelector || t.mozMatchesSelector || t.webkitMatchesSelector || t.oMatchesSelector).call(t, e);
+                                    })(this.node, t);
+                                },
+                                native: function () {
+                                    return this.node;
+                                },
+                                svg: function (t) {
+                                    var a = e.createElement("svg");
+                                    if (!(t && this instanceof i.Parent))
+                                        return a.appendChild((t = e.createElement("svg"))), this.writeDataToDom(), t.appendChild(this.node.cloneNode(!0)), a.innerHTML.replace(/^<svg>/, "").replace(/<\/svg>$/, "");
+                                    a.innerHTML = "<svg>" + t.replace(/\n/, "").replace(/<([\w:-]+)([^<]+?)\/>/g, "<$1$2></$1>") + "</svg>";
+                                    for (var s = 0, n = a.firstChild.childNodes.length; s < n; s++) this.node.appendChild(a.firstChild.firstChild);
+                                    return this;
+                                },
+                                writeDataToDom: function () {
+                                    (this.each || this.lines) &&
+                                        (this.each ? this : this.lines()).each(function () {
+                                            this.writeDataToDom();
+                                        });
+                                    return this.node.removeAttribute("svgjs:data"), Object.keys(this.dom).length && this.node.setAttribute("svgjs:data", JSON.stringify(this.dom)), this;
+                                },
+                                setData: function (t) {
+                                    return (this.dom = t), this;
+                                },
+                                is: function (t) {
+                                    return (function (t, e) {
+                                        return t instanceof e;
+                                    })(this, t);
+                                },
+                            },
+                        })),
+                        (i.easing = {
+                            "-": function (t) {
+                                return t;
+                            },
+                            "<>": function (t) {
+                                return -Math.cos(t * Math.PI) / 2 + 0.5;
+                            },
+                            ">": function (t) {
+                                return Math.sin((t * Math.PI) / 2);
+                            },
+                            "<": function (t) {
+                                return 1 - Math.cos((t * Math.PI) / 2);
+                            },
+                        }),
+                        (i.morph = function (t) {
+                            return function (e, a) {
+                                return new i.MorphObj(e, a).at(t);
+                            };
+                        }),
+                        (i.Situation = i.invent({
+                            create: function (t) {
+                                (this.init = !1),
+                                    (this.reversed = !1),
+                                    (this.reversing = !1),
+                                    (this.duration = new i.Number(t.duration).valueOf()),
+                                    (this.delay = new i.Number(t.delay).valueOf()),
+                                    (this.start = +new Date() + this.delay),
+                                    (this.finish = this.start + this.duration),
+                                    (this.ease = t.ease),
+                                    (this.loop = 0),
+                                    (this.loops = !1),
+                                    (this.animations = {}),
+                                    (this.attrs = {}),
+                                    (this.styles = {}),
+                                    (this.transforms = []),
+                                    (this.once = {});
+                            },
+                        })),
+                        (i.FX = i.invent({
+                            create: function (t) {
+                                (this._target = t), (this.situations = []), (this.active = !1), (this.situation = null), (this.paused = !1), (this.lastPos = 0), (this.pos = 0), (this.absPos = 0), (this._speed = 1);
+                            },
+                            extend: {
+                                animate: function (t, e, a) {
+                                    "object" === s(t) && ((e = t.ease), (a = t.delay), (t = t.duration));
+                                    var n = new i.Situation({ duration: t || 1e3, delay: a || 0, ease: i.easing[e || "-"] || e });
+                                    return this.queue(n), this;
+                                },
+                                delay: function (t) {
+                                    var e = new i.Situation({ duration: t, delay: 0, ease: i.easing["-"] });
+                                    return this.queue(e);
+                                },
+                                target: function (t) {
+                                    return t && t instanceof i.Element ? ((this._target = t), this) : this._target;
+                                },
+                                timeToAbsPos: function (t) {
+                                    return (t - this.situation.start) / (this.situation.duration / this._speed);
+                                },
+                                absPosToTime: function (t) {
+                                    return (this.situation.duration / this._speed) * t + this.situation.start;
+                                },
+                                startAnimFrame: function () {
+                                    this.stopAnimFrame(),
+                                        (this.animationFrame = t.requestAnimationFrame(
+                                            function () {
+                                                this.step();
+                                            }.bind(this)
+                                        ));
+                                },
+                                stopAnimFrame: function () {
+                                    t.cancelAnimationFrame(this.animationFrame);
+                                },
+                                start: function () {
+                                    return !this.active && this.situation && ((this.active = !0), this.startCurrent()), this;
+                                },
+                                startCurrent: function () {
+                                    return (this.situation.start = +new Date() + this.situation.delay / this._speed), (this.situation.finish = this.situation.start + this.situation.duration / this._speed), this.initAnimations().step();
+                                },
+                                queue: function (t) {
+                                    return ("function" == typeof t || t instanceof i.Situation) && this.situations.push(t), this.situation || (this.situation = this.situations.shift()), this;
+                                },
+                                dequeue: function () {
+                                    return this.stop(), (this.situation = this.situations.shift()), this.situation && (this.situation instanceof i.Situation ? this.start() : this.situation.call(this)), this;
+                                },
+                                initAnimations: function () {
+                                    var t,
+                                        e,
+                                        a,
+                                        s = this.situation;
+                                    if (s.init) return this;
+                                    for (t in s.animations)
+                                        for (a = this.target()[t](), Array.isArray(a) || (a = [a]), Array.isArray(s.animations[t]) || (s.animations[t] = [s.animations[t]]), e = a.length; e--; )
+                                            s.animations[t][e] instanceof i.Number && (a[e] = new i.Number(a[e])), (s.animations[t][e] = a[e].morph(s.animations[t][e]));
+                                    for (t in s.attrs) s.attrs[t] = new i.MorphObj(this.target().attr(t), s.attrs[t]);
+                                    for (t in s.styles) s.styles[t] = new i.MorphObj(this.target().style(t), s.styles[t]);
+                                    return (s.initialTransformation = this.target().matrixify()), (s.init = !0), this;
+                                },
+                                clearQueue: function () {
+                                    return (this.situations = []), this;
+                                },
+                                clearCurrent: function () {
+                                    return (this.situation = null), this;
+                                },
+                                stop: function (t, e) {
+                                    var i = this.active;
+                                    return (this.active = !1), e && this.clearQueue(), t && this.situation && (!i && this.startCurrent(), this.atEnd()), this.stopAnimFrame(), this.clearCurrent();
+                                },
+                                reset: function () {
+                                    if (this.situation) {
+                                        var t = this.situation;
+                                        this.stop(), (this.situation = t), this.atStart();
+                                    }
+                                    return this;
+                                },
+                                finish: function () {
+                                    for (this.stop(!0, !1); this.dequeue().situation && this.stop(!0, !1); );
+                                    return this.clearQueue().clearCurrent(), this;
+                                },
+                                atStart: function () {
+                                    return this.at(0, !0);
+                                },
+                                atEnd: function () {
+                                    return !0 === this.situation.loops && (this.situation.loops = this.situation.loop + 1), "number" == typeof this.situation.loops ? this.at(this.situation.loops, !0) : this.at(1, !0);
+                                },
+                                at: function (t, e) {
+                                    var i = this.situation.duration / this._speed;
+                                    return (
+                                        (this.absPos = t),
+                                        e || (this.situation.reversed && (this.absPos = 1 - this.absPos), (this.absPos += this.situation.loop)),
+                                        (this.situation.start = +new Date() - this.absPos * i),
+                                        (this.situation.finish = this.situation.start + i),
+                                        this.step(!0)
+                                    );
+                                },
+                                speed: function (t) {
+                                    return 0 === t ? this.pause() : t ? ((this._speed = t), this.at(this.absPos, !0)) : this._speed;
+                                },
+                                loop: function (t, e) {
+                                    var i = this.last();
+                                    return (i.loops = null == t || t), (i.loop = 0), e && (i.reversing = !0), this;
+                                },
+                                pause: function () {
+                                    return (this.paused = !0), this.stopAnimFrame(), this;
+                                },
+                                play: function () {
+                                    return this.paused ? ((this.paused = !1), this.at(this.absPos, !0)) : this;
+                                },
+                                reverse: function (t) {
+                                    var e = this.last();
+                                    return (e.reversed = void 0 === t ? !e.reversed : t), this;
+                                },
+                                progress: function (t) {
+                                    return t ? this.situation.ease(this.pos) : this.pos;
+                                },
+                                after: function (t) {
+                                    var e = this.last();
+                                    return (
+                                        this.target().on("finished.fx", function i(a) {
+                                            a.detail.situation == e && (t.call(this, e), this.off("finished.fx", i));
+                                        }),
+                                        this._callStart()
+                                    );
+                                },
+                                during: function (t) {
+                                    var e = this.last(),
+                                        a = function (a) {
+                                            a.detail.situation == e && t.call(this, a.detail.pos, i.morph(a.detail.pos), a.detail.eased, e);
+                                        };
+                                    return (
+                                        this.target().off("during.fx", a).on("during.fx", a),
+                                        this.after(function () {
+                                            this.off("during.fx", a);
+                                        }),
+                                        this._callStart()
+                                    );
+                                },
+                                afterAll: function (t) {
+                                    var e = function e(i) {
+                                        t.call(this), this.off("allfinished.fx", e);
+                                    };
+                                    return this.target().off("allfinished.fx", e).on("allfinished.fx", e), this._callStart();
+                                },
+                                duringAll: function (t) {
+                                    var e = function (e) {
+                                        t.call(this, e.detail.pos, i.morph(e.detail.pos), e.detail.eased, e.detail.situation);
+                                    };
+                                    return (
+                                        this.target().off("during.fx", e).on("during.fx", e),
+                                        this.afterAll(function () {
+                                            this.off("during.fx", e);
+                                        }),
+                                        this._callStart()
+                                    );
+                                },
+                                last: function () {
+                                    return this.situations.length ? this.situations[this.situations.length - 1] : this.situation;
+                                },
+                                add: function (t, e, i) {
+                                    return (this.last()[i || "animations"][t] = e), this._callStart();
+                                },
+                                step: function (t) {
+                                    var e, i, a;
+                                    (t || (this.absPos = this.timeToAbsPos(+new Date())), !1 !== this.situation.loops)
+                                        ? ((e = Math.max(this.absPos, 0)),
+                                          (i = Math.floor(e)),
+                                          !0 === this.situation.loops || i < this.situation.loops
+                                              ? ((this.pos = e - i), (a = this.situation.loop), (this.situation.loop = i))
+                                              : ((this.absPos = this.situation.loops), (this.pos = 1), (a = this.situation.loop - 1), (this.situation.loop = this.situation.loops)),
+                                          this.situation.reversing && (this.situation.reversed = this.situation.reversed != Boolean((this.situation.loop - a) % 2)))
+                                        : ((this.absPos = Math.min(this.absPos, 1)), (this.pos = this.absPos));
+                                    this.pos < 0 && (this.pos = 0), this.situation.reversed && (this.pos = 1 - this.pos);
+                                    var s = this.situation.ease(this.pos);
+                                    for (var n in this.situation.once) n > this.lastPos && n <= s && (this.situation.once[n].call(this.target(), this.pos, s), delete this.situation.once[n]);
+                                    return (
+                                        this.active && this.target().fire("during", { pos: this.pos, eased: s, fx: this, situation: this.situation }),
+                                        this.situation
+                                            ? (this.eachAt(),
+                                              (1 == this.pos && !this.situation.reversed) || (this.situation.reversed && 0 == this.pos)
+                                                  ? (this.stopAnimFrame(),
+                                                    this.target().fire("finished", { fx: this, situation: this.situation }),
+                                                    this.situations.length || (this.target().fire("allfinished"), this.situations.length || (this.target().off(".fx"), (this.active = !1))),
+                                                    this.active ? this.dequeue() : this.clearCurrent())
+                                                  : !this.paused && this.active && this.startAnimFrame(),
+                                              (this.lastPos = s),
+                                              this)
+                                            : this
+                                    );
+                                },
+                                eachAt: function () {
+                                    var t,
+                                        e,
+                                        a,
+                                        s = this,
+                                        n = this.target(),
+                                        r = this.situation;
+                                    for (t in r.animations)
+                                        (a = [].concat(r.animations[t]).map(function (t) {
+                                            return "string" != typeof t && t.at ? t.at(r.ease(s.pos), s.pos) : t;
+                                        })),
+                                            n[t].apply(n, a);
+                                    for (t in r.attrs)
+                                        (a = [t].concat(r.attrs[t]).map(function (t) {
+                                            return "string" != typeof t && t.at ? t.at(r.ease(s.pos), s.pos) : t;
+                                        })),
+                                            n.attr.apply(n, a);
+                                    for (t in r.styles)
+                                        (a = [t].concat(r.styles[t]).map(function (t) {
+                                            return "string" != typeof t && t.at ? t.at(r.ease(s.pos), s.pos) : t;
+                                        })),
+                                            n.style.apply(n, a);
+                                    if (r.transforms.length) {
+                                        for (a = r.initialTransformation, t = 0, e = r.transforms.length; t < e; t++) {
+                                            var o = r.transforms[t];
+                                            o instanceof i.Matrix
+                                                ? (a = o.relative ? a.multiply(new i.Matrix().morph(o).at(r.ease(this.pos))) : a.morph(o).at(r.ease(this.pos)))
+                                                : (o.relative || o.undo(a.extract()), (a = a.multiply(o.at(r.ease(this.pos)))));
+                                        }
+                                        n.matrix(a);
+                                    }
+                                    return this;
+                                },
+                                once: function (t, e, i) {
+                                    var a = this.last();
+                                    return i || (t = a.ease(t)), (a.once[t] = e), this;
+                                },
+                                _callStart: function () {
+                                    return (
+                                        setTimeout(
+                                            function () {
+                                                this.start();
+                                            }.bind(this),
+                                            0
+                                        ),
+                                        this
+                                    );
+                                },
+                            },
+                            parent: i.Element,
+                            construct: {
+                                animate: function (t, e, a) {
+                                    return (this.fx || (this.fx = new i.FX(this))).animate(t, e, a);
+                                },
+                                delay: function (t) {
+                                    return (this.fx || (this.fx = new i.FX(this))).delay(t);
+                                },
+                                stop: function (t, e) {
+                                    return this.fx && this.fx.stop(t, e), this;
+                                },
+                                finish: function () {
+                                    return this.fx && this.fx.finish(), this;
+                                },
+                                pause: function () {
+                                    return this.fx && this.fx.pause(), this;
+                                },
+                                play: function () {
+                                    return this.fx && this.fx.play(), this;
+                                },
+                                speed: function (t) {
+                                    if (this.fx) {
+                                        if (null == t) return this.fx.speed();
+                                        this.fx.speed(t);
+                                    }
+                                    return this;
+                                },
+                            },
+                        })),
+                        (i.MorphObj = i.invent({
+                            create: function (t, e) {
+                                return i.Color.isColor(e)
+                                    ? new i.Color(t).morph(e)
+                                    : i.regex.delimiter.test(t)
+                                    ? i.regex.pathLetters.test(t)
+                                        ? new i.PathArray(t).morph(e)
+                                        : new i.Array(t).morph(e)
+                                    : i.regex.numberAndUnit.test(e)
+                                    ? new i.Number(t).morph(e)
+                                    : ((this.value = t), void (this.destination = e));
+                            },
+                            extend: {
+                                at: function (t, e) {
+                                    return e < 1 ? this.value : this.destination;
+                                },
+                                valueOf: function () {
+                                    return this.value;
+                                },
+                            },
+                        })),
+                        i.extend(i.FX, {
+                            attr: function (t, e, i) {
+                                if ("object" === s(t)) for (var a in t) this.attr(a, t[a]);
+                                else this.add(t, e, "attrs");
+                                return this;
+                            },
+                            style: function (t, e) {
+                                if ("object" === s(t)) for (var i in t) this.style(i, t[i]);
+                                else this.add(t, e, "styles");
+                                return this;
+                            },
+                            x: function (t, e) {
+                                if (this.target() instanceof i.G) return this.transform({ x: t }, e), this;
+                                var a = new i.Number(t);
+                                return (a.relative = e), this.add("x", a);
+                            },
+                            y: function (t, e) {
+                                if (this.target() instanceof i.G) return this.transform({ y: t }, e), this;
+                                var a = new i.Number(t);
+                                return (a.relative = e), this.add("y", a);
+                            },
+                            cx: function (t) {
+                                return this.add("cx", new i.Number(t));
+                            },
+                            cy: function (t) {
+                                return this.add("cy", new i.Number(t));
+                            },
+                            move: function (t, e) {
+                                return this.x(t).y(e);
+                            },
+                            center: function (t, e) {
+                                return this.cx(t).cy(e);
+                            },
+                            size: function (t, e) {
+                                var a;
+                                this.target() instanceof i.Text
+                                    ? this.attr("font-size", t)
+                                    : ((t && e) || (a = this.target().bbox()), t || (t = (a.width / a.height) * e), e || (e = (a.height / a.width) * t), this.add("width", new i.Number(t)).add("height", new i.Number(e)));
+                                return this;
+                            },
+                            width: function (t) {
+                                return this.add("width", new i.Number(t));
+                            },
+                            height: function (t) {
+                                return this.add("height", new i.Number(t));
+                            },
+                            plot: function (t, e, i, a) {
+                                return 4 == arguments.length ? this.plot([t, e, i, a]) : this.add("plot", new (this.target().morphArray)(t));
+                            },
+                            leading: function (t) {
+                                return this.target().leading ? this.add("leading", new i.Number(t)) : this;
+                            },
+                            viewbox: function (t, e, a, s) {
+                                return this.target() instanceof i.Container && this.add("viewbox", new i.ViewBox(t, e, a, s)), this;
+                            },
+                            update: function (t) {
+                                if (this.target() instanceof i.Stop) {
+                                    if ("number" == typeof t || t instanceof i.Number) return this.update({ offset: arguments[0], color: arguments[1], opacity: arguments[2] });
+                                    null != t.opacity && this.attr("stop-opacity", t.opacity), null != t.color && this.attr("stop-color", t.color), null != t.offset && this.attr("offset", t.offset);
+                                }
+                                return this;
+                            },
+                        }),
+                        (i.Box = i.invent({
+                            create: function (t, e, a, n) {
+                                if (!("object" !== s(t) || t instanceof i.Element)) return i.Box.call(this, null != t.left ? t.left : t.x, null != t.top ? t.top : t.y, t.width, t.height);
+                                4 == arguments.length && ((this.x = t), (this.y = e), (this.width = a), (this.height = n)), m(this);
+                            },
+                            extend: {
+                                merge: function (t) {
+                                    var e = new this.constructor();
+                                    return (
+                                        (e.x = Math.min(this.x, t.x)), (e.y = Math.min(this.y, t.y)), (e.width = Math.max(this.x + this.width, t.x + t.width) - e.x), (e.height = Math.max(this.y + this.height, t.y + t.height) - e.y), m(e)
+                                    );
+                                },
+                                transform: function (t) {
+                                    var e,
+                                        a = 1 / 0,
+                                        s = -1 / 0,
+                                        n = 1 / 0,
+                                        r = -1 / 0;
+                                    return (
+                                        [new i.Point(this.x, this.y), new i.Point(this.x2, this.y), new i.Point(this.x, this.y2), new i.Point(this.x2, this.y2)].forEach(function (e) {
+                                            (e = e.transform(t)), (a = Math.min(a, e.x)), (s = Math.max(s, e.x)), (n = Math.min(n, e.y)), (r = Math.max(r, e.y));
+                                        }),
+                                        ((e = new this.constructor()).x = a),
+                                        (e.width = s - a),
+                                        (e.y = n),
+                                        (e.height = r - n),
+                                        m(e),
+                                        e
+                                    );
+                                },
+                            },
+                        })),
+                        (i.BBox = i.invent({
+                            create: function (t) {
+                                if ((i.Box.apply(this, [].slice.call(arguments)), t instanceof i.Element)) {
+                                    var a;
+                                    try {
+                                        if (!e.documentElement.contains) {
+                                            for (var s = t.node; s.parentNode; ) s = s.parentNode;
+                                            if (s != e) throw new Error("Element not in the dom");
+                                        }
+                                        a = t.node.getBBox();
+                                    } catch (e) {
+                                        if (t instanceof i.Shape) {
+                                            i.parser.draw || i.prepare();
+                                            var n = t.clone(i.parser.draw.instance).show();
+                                            (a = n.node.getBBox()), n.remove();
+                                        } else a = { x: t.node.clientLeft, y: t.node.clientTop, width: t.node.clientWidth, height: t.node.clientHeight };
+                                    }
+                                    i.Box.call(this, a);
+                                }
+                            },
+                            inherit: i.Box,
+                            parent: i.Element,
+                            construct: {
+                                bbox: function () {
+                                    return new i.BBox(this);
+                                },
+                            },
+                        })),
+                        (i.BBox.prototype.constructor = i.BBox),
+                        i.extend(i.Element, {
+                            tbox: function () {
+                                return console.warn("Use of TBox is deprecated and mapped to RBox. Use .rbox() instead."), this.rbox(this.doc());
+                            },
+                        }),
+                        (i.RBox = i.invent({
+                            create: function (t) {
+                                i.Box.apply(this, [].slice.call(arguments)), t instanceof i.Element && i.Box.call(this, t.node.getBoundingClientRect());
+                            },
+                            inherit: i.Box,
+                            parent: i.Element,
+                            extend: {
+                                addOffset: function () {
+                                    return (this.x += t.pageXOffset), (this.y += t.pageYOffset), this;
+                                },
+                            },
+                            construct: {
+                                rbox: function (t) {
+                                    return t ? new i.RBox(this).transform(t.screenCTM().inverse()) : new i.RBox(this).addOffset();
+                                },
+                            },
+                        })),
+                        (i.RBox.prototype.constructor = i.RBox),
+                        (i.Matrix = i.invent({
+                            create: function (t) {
+                                var e,
+                                    a = p([1, 0, 0, 1, 0, 0]);
+                                for (
+                                    t =
+                                        t instanceof i.Element
+                                            ? t.matrixify()
+                                            : "string" == typeof t
+                                            ? p(t.split(i.regex.delimiter).map(parseFloat))
+                                            : 6 == arguments.length
+                                            ? p([].slice.call(arguments))
+                                            : Array.isArray(t)
+                                            ? p(t)
+                                            : "object" === s(t)
+                                            ? t
+                                            : a,
+                                        e = y.length - 1;
+                                    e >= 0;
+                                    --e
+                                )
+                                    this[y[e]] = null != t[y[e]] ? t[y[e]] : a[y[e]];
+                            },
+                            extend: {
+                                extract: function () {
+                                    var t = g(this, 0, 1),
+                                        e = g(this, 1, 0),
+                                        a = (180 / Math.PI) * Math.atan2(t.y, t.x) - 90;
+                                    return {
+                                        x: this.e,
+                                        y: this.f,
+                                        transformedX: (this.e * Math.cos((a * Math.PI) / 180) + this.f * Math.sin((a * Math.PI) / 180)) / Math.sqrt(this.a * this.a + this.b * this.b),
+                                        transformedY: (this.f * Math.cos((a * Math.PI) / 180) + this.e * Math.sin((-a * Math.PI) / 180)) / Math.sqrt(this.c * this.c + this.d * this.d),
+                                        skewX: -a,
+                                        skewY: (180 / Math.PI) * Math.atan2(e.y, e.x),
+                                        scaleX: Math.sqrt(this.a * this.a + this.b * this.b),
+                                        scaleY: Math.sqrt(this.c * this.c + this.d * this.d),
+                                        rotation: a,
+                                        a: this.a,
+                                        b: this.b,
+                                        c: this.c,
+                                        d: this.d,
+                                        e: this.e,
+                                        f: this.f,
+                                        matrix: new i.Matrix(this),
+                                    };
+                                },
+                                clone: function () {
+                                    return new i.Matrix(this);
+                                },
+                                morph: function (t) {
+                                    return (this.destination = new i.Matrix(t)), this;
+                                },
+                                at: function (t) {
+                                    return this.destination
+                                        ? new i.Matrix({
+                                              a: this.a + (this.destination.a - this.a) * t,
+                                              b: this.b + (this.destination.b - this.b) * t,
+                                              c: this.c + (this.destination.c - this.c) * t,
+                                              d: this.d + (this.destination.d - this.d) * t,
+                                              e: this.e + (this.destination.e - this.e) * t,
+                                              f: this.f + (this.destination.f - this.f) * t,
+                                          })
+                                        : this;
+                                },
+                                multiply: function (t) {
+                                    return new i.Matrix(
+                                        this.native().multiply(
+                                            (function (t) {
+                                                t instanceof i.Matrix || (t = new i.Matrix(t));
+                                                return t;
+                                            })(t).native()
+                                        )
+                                    );
+                                },
+                                inverse: function () {
+                                    return new i.Matrix(this.native().inverse());
+                                },
+                                translate: function (t, e) {
+                                    return new i.Matrix(this.native().translate(t || 0, e || 0));
+                                },
+                                scale: function (t, e, a, s) {
+                                    return 1 == arguments.length ? (e = t) : 3 == arguments.length && ((s = a), (a = e), (e = t)), this.around(a, s, new i.Matrix(t, 0, 0, e, 0, 0));
+                                },
+                                rotate: function (t, e, a) {
+                                    return (t = i.utils.radians(t)), this.around(e, a, new i.Matrix(Math.cos(t), Math.sin(t), -Math.sin(t), Math.cos(t), 0, 0));
+                                },
+                                flip: function (t, e) {
+                                    return "x" == t ? this.scale(-1, 1, e, 0) : "y" == t ? this.scale(1, -1, 0, e) : this.scale(-1, -1, t, null != e ? e : t);
+                                },
+                                skew: function (t, e, a, s) {
+                                    return (
+                                        1 == arguments.length ? (e = t) : 3 == arguments.length && ((s = a), (a = e), (e = t)),
+                                        (t = i.utils.radians(t)),
+                                        (e = i.utils.radians(e)),
+                                        this.around(a, s, new i.Matrix(1, Math.tan(e), Math.tan(t), 1, 0, 0))
+                                    );
+                                },
+                                skewX: function (t, e, i) {
+                                    return this.skew(t, 0, e, i);
+                                },
+                                skewY: function (t, e, i) {
+                                    return this.skew(0, t, e, i);
+                                },
+                                around: function (t, e, a) {
+                                    return this.multiply(new i.Matrix(1, 0, 0, 1, t || 0, e || 0))
+                                        .multiply(a)
+                                        .multiply(new i.Matrix(1, 0, 0, 1, -t || 0, -e || 0));
+                                },
+                                native: function () {
+                                    for (var t = i.parser.native.createSVGMatrix(), e = y.length - 1; e >= 0; e--) t[y[e]] = this[y[e]];
+                                    return t;
+                                },
+                                toString: function () {
+                                    return "matrix(" + b(this.a) + "," + b(this.b) + "," + b(this.c) + "," + b(this.d) + "," + b(this.e) + "," + b(this.f) + ")";
+                                },
+                            },
+                            parent: i.Element,
+                            construct: {
+                                ctm: function () {
+                                    return new i.Matrix(this.node.getCTM());
+                                },
+                                screenCTM: function () {
+                                    if (this instanceof i.Nested) {
+                                        var t = this.rect(1, 1),
+                                            e = t.node.getScreenCTM();
+                                        return t.remove(), new i.Matrix(e);
+                                    }
+                                    return new i.Matrix(this.node.getScreenCTM());
+                                },
+                            },
+                        })),
+                        (i.Point = i.invent({
+                            create: function (t, e) {
+                                var i;
+                                (i = Array.isArray(t) ? { x: t[0], y: t[1] } : "object" === s(t) ? { x: t.x, y: t.y } : null != t ? { x: t, y: null != e ? e : t } : { x: 0, y: 0 }), (this.x = i.x), (this.y = i.y);
+                            },
+                            extend: {
+                                clone: function () {
+                                    return new i.Point(this);
+                                },
+                                morph: function (t, e) {
+                                    return (this.destination = new i.Point(t, e)), this;
+                                },
+                                at: function (t) {
+                                    return this.destination ? new i.Point({ x: this.x + (this.destination.x - this.x) * t, y: this.y + (this.destination.y - this.y) * t }) : this;
+                                },
+                                native: function () {
+                                    var t = i.parser.native.createSVGPoint();
+                                    return (t.x = this.x), (t.y = this.y), t;
+                                },
+                                transform: function (t) {
+                                    return new i.Point(this.native().matrixTransform(t.native()));
+                                },
+                            },
+                        })),
+                        i.extend(i.Element, {
+                            point: function (t, e) {
+                                return new i.Point(t, e).transform(this.screenCTM().inverse());
+                            },
+                        }),
+                        i.extend(i.Element, {
+                            attr: function (t, e, a) {
+                                if (null == t) {
+                                    for (t = {}, a = (e = this.node.attributes).length - 1; a >= 0; a--) t[e[a].nodeName] = i.regex.isNumber.test(e[a].nodeValue) ? parseFloat(e[a].nodeValue) : e[a].nodeValue;
+                                    return t;
+                                }
+                                if ("object" === s(t)) for (e in t) this.attr(e, t[e]);
+                                else if (null === e) this.node.removeAttribute(t);
+                                else {
+                                    if (null == e) return null == (e = this.node.getAttribute(t)) ? i.defaults.attrs[t] : i.regex.isNumber.test(e) ? parseFloat(e) : e;
+                                    "stroke-width" == t ? this.attr("stroke", parseFloat(e) > 0 ? this._stroke : null) : "stroke" == t && (this._stroke = e),
+                                        ("fill" != t && "stroke" != t) ||
+                                            (i.regex.isImage.test(e) && (e = this.doc().defs().image(e, 0, 0)),
+                                            e instanceof i.Image &&
+                                                (e = this.doc()
+                                                    .defs()
+                                                    .pattern(0, 0, function () {
+                                                        this.add(e);
+                                                    }))),
+                                        "number" == typeof e ? (e = new i.Number(e)) : i.Color.isColor(e) ? (e = new i.Color(e)) : Array.isArray(e) && (e = new i.Array(e)),
+                                        "leading" == t ? this.leading && this.leading(e) : "string" == typeof a ? this.node.setAttributeNS(a, t, e.toString()) : this.node.setAttribute(t, e.toString()),
+                                        !this.rebuild || ("font-size" != t && "x" != t) || this.rebuild(t, e);
+                                }
+                                return this;
+                            },
+                        }),
+                        i.extend(i.Element, {
+                            transform: function (t, e) {
+                                var a, n;
+                                if ("object" !== s(t)) return (a = new i.Matrix(this).extract()), "string" == typeof t ? a[t] : a;
+                                if (((a = new i.Matrix(this)), (e = !!e || !!t.relative), null != t.a)) a = e ? a.multiply(new i.Matrix(t)) : new i.Matrix(t);
+                                else if (null != t.rotation) x(t, this), (a = e ? a.rotate(t.rotation, t.cx, t.cy) : a.rotate(t.rotation - a.extract().rotation, t.cx, t.cy));
+                                else if (null != t.scale || null != t.scaleX || null != t.scaleY) {
+                                    if ((x(t, this), (t.scaleX = null != t.scale ? t.scale : null != t.scaleX ? t.scaleX : 1), (t.scaleY = null != t.scale ? t.scale : null != t.scaleY ? t.scaleY : 1), !e)) {
+                                        var r = a.extract();
+                                        (t.scaleX = (1 * t.scaleX) / r.scaleX), (t.scaleY = (1 * t.scaleY) / r.scaleY);
+                                    }
+                                    a = a.scale(t.scaleX, t.scaleY, t.cx, t.cy);
+                                } else if (null != t.skew || null != t.skewX || null != t.skewY) {
+                                    if ((x(t, this), (t.skewX = null != t.skew ? t.skew : null != t.skewX ? t.skewX : 0), (t.skewY = null != t.skew ? t.skew : null != t.skewY ? t.skewY : 0), !e)) {
+                                        r = a.extract();
+                                        a = a.multiply(new i.Matrix().skew(r.skewX, r.skewY, t.cx, t.cy).inverse());
+                                    }
+                                    a = a.skew(t.skewX, t.skewY, t.cx, t.cy);
+                                } else
+                                    t.flip
+                                        ? ("x" == t.flip || "y" == t.flip
+                                              ? (t.offset = null == t.offset ? this.bbox()["c" + t.flip] : t.offset)
+                                              : null == t.offset
+                                              ? ((n = this.bbox()), (t.flip = n.cx), (t.offset = n.cy))
+                                              : (t.flip = t.offset),
+                                          (a = new i.Matrix().flip(t.flip, t.offset)))
+                                        : (null == t.x && null == t.y) || (e ? (a = a.translate(t.x, t.y)) : (null != t.x && (a.e = t.x), null != t.y && (a.f = t.y)));
+                                return this.attr("transform", a);
+                            },
+                        }),
+                        i.extend(i.FX, {
+                            transform: function (t, e) {
+                                var a,
+                                    n,
+                                    r = this.target();
+                                return "object" !== s(t)
+                                    ? ((a = new i.Matrix(r).extract()), "string" == typeof t ? a[t] : a)
+                                    : ((e = !!e || !!t.relative),
+                                      null != t.a
+                                          ? (a = new i.Matrix(t))
+                                          : null != t.rotation
+                                          ? (x(t, r), (a = new i.Rotate(t.rotation, t.cx, t.cy)))
+                                          : null != t.scale || null != t.scaleX || null != t.scaleY
+                                          ? (x(t, r),
+                                            (t.scaleX = null != t.scale ? t.scale : null != t.scaleX ? t.scaleX : 1),
+                                            (t.scaleY = null != t.scale ? t.scale : null != t.scaleY ? t.scaleY : 1),
+                                            (a = new i.Scale(t.scaleX, t.scaleY, t.cx, t.cy)))
+                                          : null != t.skewX || null != t.skewY
+                                          ? (x(t, r), (t.skewX = null != t.skewX ? t.skewX : 0), (t.skewY = null != t.skewY ? t.skewY : 0), (a = new i.Skew(t.skewX, t.skewY, t.cx, t.cy)))
+                                          : t.flip
+                                          ? ("x" == t.flip || "y" == t.flip ? (t.offset = null == t.offset ? r.bbox()["c" + t.flip] : t.offset) : null == t.offset ? ((n = r.bbox()), (t.flip = n.cx), (t.offset = n.cy)) : (t.flip = t.offset),
+                                            (a = new i.Matrix().flip(t.flip, t.offset)))
+                                          : (null == t.x && null == t.y) || (a = new i.Translate(t.x, t.y)),
+                                      a ? ((a.relative = e), this.last().transforms.push(a), this._callStart()) : this);
+                            },
+                        }),
+                        i.extend(i.Element, {
+                            untransform: function () {
+                                return this.attr("transform", null);
+                            },
+                            matrixify: function () {
+                                return (this.attr("transform") || "")
+                                    .split(i.regex.transforms)
+                                    .slice(0, -1)
+                                    .map(function (t) {
+                                        var e = t.trim().split("(");
+                                        return [
+                                            e[0],
+                                            e[1].split(i.regex.delimiter).map(function (t) {
+                                                return parseFloat(t);
+                                            }),
+                                        ];
+                                    })
+                                    .reduce(function (t, e) {
+                                        return "matrix" == e[0] ? t.multiply(p(e[1])) : t[e[0]].apply(t, e[1]);
+                                    }, new i.Matrix());
+                            },
+                            toParent: function (t) {
+                                if (this == t) return this;
+                                var e = this.screenCTM(),
+                                    i = t.screenCTM().inverse();
+                                return this.addTo(t).untransform().transform(i.multiply(e)), this;
+                            },
+                            toDoc: function () {
+                                return this.toParent(this.doc());
+                            },
+                        }),
+                        (i.Transformation = i.invent({
+                            create: function (t, e) {
+                                if (arguments.length > 1 && "boolean" != typeof e) return this.constructor.call(this, [].slice.call(arguments));
+                                if (Array.isArray(t)) for (var i = 0, a = this.arguments.length; i < a; ++i) this[this.arguments[i]] = t[i];
+                                else if ("object" === s(t)) for (i = 0, a = this.arguments.length; i < a; ++i) this[this.arguments[i]] = t[this.arguments[i]];
+                                (this.inversed = !1), !0 === e && (this.inversed = !0);
+                            },
+                            extend: {
+                                arguments: [],
+                                method: "",
+                                at: function (t) {
+                                    for (var e = [], a = 0, s = this.arguments.length; a < s; ++a) e.push(this[this.arguments[a]]);
+                                    var n = this._undo || new i.Matrix();
+                                    return (n = new i.Matrix().morph(i.Matrix.prototype[this.method].apply(n, e)).at(t)), this.inversed ? n.inverse() : n;
+                                },
+                                undo: function (t) {
+                                    for (var e = 0, a = this.arguments.length; e < a; ++e) t[this.arguments[e]] = void 0 === this[this.arguments[e]] ? 0 : t[this.arguments[e]];
+                                    return (t.cx = this.cx), (t.cy = this.cy), (this._undo = new i[d(this.method)](t, !0).at(1)), this;
+                                },
+                            },
+                        })),
+                        (i.Translate = i.invent({
+                            parent: i.Matrix,
+                            inherit: i.Transformation,
+                            create: function (t, e) {
+                                this.constructor.apply(this, [].slice.call(arguments));
+                            },
+                            extend: { arguments: ["transformedX", "transformedY"], method: "translate" },
+                        })),
+                        (i.Rotate = i.invent({
+                            parent: i.Matrix,
+                            inherit: i.Transformation,
+                            create: function (t, e) {
+                                this.constructor.apply(this, [].slice.call(arguments));
+                            },
+                            extend: {
+                                arguments: ["rotation", "cx", "cy"],
+                                method: "rotate",
+                                at: function (t) {
+                                    var e = new i.Matrix().rotate(new i.Number().morph(this.rotation - (this._undo ? this._undo.rotation : 0)).at(t), this.cx, this.cy);
+                                    return this.inversed ? e.inverse() : e;
+                                },
+                                undo: function (t) {
+                                    return (this._undo = t), this;
+                                },
+                            },
+                        })),
+                        (i.Scale = i.invent({
+                            parent: i.Matrix,
+                            inherit: i.Transformation,
+                            create: function (t, e) {
+                                this.constructor.apply(this, [].slice.call(arguments));
+                            },
+                            extend: { arguments: ["scaleX", "scaleY", "cx", "cy"], method: "scale" },
+                        })),
+                        (i.Skew = i.invent({
+                            parent: i.Matrix,
+                            inherit: i.Transformation,
+                            create: function (t, e) {
+                                this.constructor.apply(this, [].slice.call(arguments));
+                            },
+                            extend: { arguments: ["skewX", "skewY", "cx", "cy"], method: "skew" },
+                        })),
+                        i.extend(i.Element, {
+                            style: function (t, e) {
+                                if (0 == arguments.length) return this.node.style.cssText || "";
+                                if (arguments.length < 2)
+                                    if ("object" === s(t)) for (e in t) this.style(e, t[e]);
+                                    else {
+                                        if (!i.regex.isCss.test(t)) return this.node.style[c(t)];
+                                        for (
+                                            t = t
+                                                .split(/\s*;\s*/)
+                                                .filter(function (t) {
+                                                    return !!t;
+                                                })
+                                                .map(function (t) {
+                                                    return t.split(/\s*:\s*/);
+                                                });
+                                            (e = t.pop());
+
+                                        )
+                                            this.style(e[0], e[1]);
+                                    }
+                                else this.node.style[c(t)] = null === e || i.regex.isBlank.test(e) ? "" : e;
+                                return this;
+                            },
+                        }),
+                        (i.Parent = i.invent({
+                            create: function (t) {
+                                this.constructor.call(this, t);
+                            },
+                            inherit: i.Element,
+                            extend: {
+                                children: function () {
+                                    return i.utils.map(i.utils.filterSVGElements(this.node.childNodes), function (t) {
+                                        return i.adopt(t);
+                                    });
+                                },
+                                add: function (t, e) {
+                                    return null == e ? this.node.appendChild(t.node) : t.node != this.node.childNodes[e] && this.node.insertBefore(t.node, this.node.childNodes[e]), this;
+                                },
+                                put: function (t, e) {
+                                    return this.add(t, e), t;
+                                },
+                                has: function (t) {
+                                    return this.index(t) >= 0;
+                                },
+                                index: function (t) {
+                                    return [].slice.call(this.node.childNodes).indexOf(t.node);
+                                },
+                                get: function (t) {
+                                    return i.adopt(this.node.childNodes[t]);
+                                },
+                                first: function () {
+                                    return this.get(0);
+                                },
+                                last: function () {
+                                    return this.get(this.node.childNodes.length - 1);
+                                },
+                                each: function (t, e) {
+                                    var a,
+                                        s,
+                                        n = this.children();
+                                    for (a = 0, s = n.length; a < s; a++) n[a] instanceof i.Element && t.apply(n[a], [a, n]), e && n[a] instanceof i.Container && n[a].each(t, e);
+                                    return this;
+                                },
+                                removeElement: function (t) {
+                                    return this.node.removeChild(t.node), this;
+                                },
+                                clear: function () {
+                                    for (; this.node.hasChildNodes(); ) this.node.removeChild(this.node.lastChild);
+                                    return delete this._defs, this;
+                                },
+                                defs: function () {
+                                    return this.doc().defs();
+                                },
+                            },
+                        })),
+                        i.extend(i.Parent, {
+                            ungroup: function (t, e) {
+                                return 0 === e || this instanceof i.Defs || this.node == i.parser.draw
+                                    ? this
+                                    : ((t = t || (this instanceof i.Doc ? this : this.parent(i.Parent))),
+                                      (e = e || 1 / 0),
+                                      this.each(function () {
+                                          return this instanceof i.Defs ? this : this instanceof i.Parent ? this.ungroup(t, e - 1) : this.toParent(t);
+                                      }),
+                                      this.node.firstChild || this.remove(),
+                                      this);
+                            },
+                            flatten: function (t, e) {
+                                return this.ungroup(t, e);
+                            },
+                        }),
+                        (i.Container = i.invent({
+                            create: function (t) {
+                                this.constructor.call(this, t);
+                            },
+                            inherit: i.Parent,
+                        })),
+                        (i.ViewBox = i.invent({
+                            create: function (t) {
+                                var e,
+                                    a,
+                                    n,
+                                    r,
+                                    o,
+                                    l,
+                                    h,
+                                    c = 1,
+                                    d = 1,
+                                    u = /[+-]?(?:\d+(?:\.\d*)?|\.\d+)(?:e[+-]?\d+)?/gi;
+                                if (t instanceof i.Element) {
+                                    for (l = t, h = t, o = (t.attr("viewBox") || "").match(u), t.bbox, n = new i.Number(t.width()), r = new i.Number(t.height()); "%" == n.unit; )
+                                        (c *= n.value), (n = new i.Number(l instanceof i.Doc ? l.parent().offsetWidth : l.parent().width())), (l = l.parent());
+                                    for (; "%" == r.unit; ) (d *= r.value), (r = new i.Number(h instanceof i.Doc ? h.parent().offsetHeight : h.parent().height())), (h = h.parent());
+                                    (this.x = 0),
+                                        (this.y = 0),
+                                        (this.width = n * c),
+                                        (this.height = r * d),
+                                        (this.zoom = 1),
+                                        o &&
+                                            ((e = parseFloat(o[0])),
+                                            (a = parseFloat(o[1])),
+                                            (n = parseFloat(o[2])),
+                                            (r = parseFloat(o[3])),
+                                            (this.zoom = this.width / this.height > n / r ? this.height / r : this.width / n),
+                                            (this.x = e),
+                                            (this.y = a),
+                                            (this.width = n),
+                                            (this.height = r));
+                                } else
+                                    (t =
+                                        "string" == typeof t
+                                            ? t.match(u).map(function (t) {
+                                                  return parseFloat(t);
+                                              })
+                                            : Array.isArray(t)
+                                            ? t
+                                            : "object" === s(t)
+                                            ? [t.x, t.y, t.width, t.height]
+                                            : 4 == arguments.length
+                                            ? [].slice.call(arguments)
+                                            : [0, 0, 0, 0]),
+                                        (this.x = t[0]),
+                                        (this.y = t[1]),
+                                        (this.width = t[2]),
+                                        (this.height = t[3]);
+                            },
+                            extend: {
+                                toString: function () {
+                                    return this.x + " " + this.y + " " + this.width + " " + this.height;
+                                },
+                                morph: function (t, e, a, s) {
+                                    return (this.destination = new i.ViewBox(t, e, a, s)), this;
+                                },
+                                at: function (t) {
+                                    return this.destination
+                                        ? new i.ViewBox([
+                                              this.x + (this.destination.x - this.x) * t,
+                                              this.y + (this.destination.y - this.y) * t,
+                                              this.width + (this.destination.width - this.width) * t,
+                                              this.height + (this.destination.height - this.height) * t,
+                                          ])
+                                        : this;
+                                },
+                            },
+                            parent: i.Container,
+                            construct: {
+                                viewbox: function (t, e, a, s) {
+                                    return 0 == arguments.length ? new i.ViewBox(this) : this.attr("viewBox", new i.ViewBox(t, e, a, s));
+                                },
+                            },
+                        })),
+                        ["click", "dblclick", "mousedown", "mouseup", "mouseover", "mouseout", "mousemove", "touchstart", "touchmove", "touchleave", "touchend", "touchcancel"].forEach(function (t) {
+                            i.Element.prototype[t] = function (e) {
+                                return i.on(this.node, t, e), this;
+                            };
+                        }),
+                        (i.listeners = []),
+                        (i.handlerMap = []),
+                        (i.listenerId = 0),
+                        (i.on = function (t, e, a, s, n) {
+                            var r = a.bind(s || t.instance || t),
+                                o = (i.handlerMap.indexOf(t) + 1 || i.handlerMap.push(t)) - 1,
+                                l = e.split(".")[0],
+                                h = e.split(".")[1] || "*";
+                            (i.listeners[o] = i.listeners[o] || {}),
+                                (i.listeners[o][l] = i.listeners[o][l] || {}),
+                                (i.listeners[o][l][h] = i.listeners[o][l][h] || {}),
+                                a._svgjsListenerId || (a._svgjsListenerId = ++i.listenerId),
+                                (i.listeners[o][l][h][a._svgjsListenerId] = r),
+                                t.addEventListener(l, r, n || !1);
+                        }),
+                        (i.off = function (t, e, a) {
+                            var s = i.handlerMap.indexOf(t),
+                                n = e && e.split(".")[0],
+                                r = e && e.split(".")[1],
+                                o = "";
+                            if (-1 != s)
+                                if (a) {
+                                    if (("function" == typeof a && (a = a._svgjsListenerId), !a)) return;
+                                    i.listeners[s][n] && i.listeners[s][n][r || "*"] && (t.removeEventListener(n, i.listeners[s][n][r || "*"][a], !1), delete i.listeners[s][n][r || "*"][a]);
+                                } else if (r && n) {
+                                    if (i.listeners[s][n] && i.listeners[s][n][r]) {
+                                        for (a in i.listeners[s][n][r]) i.off(t, [n, r].join("."), a);
+                                        delete i.listeners[s][n][r];
+                                    }
+                                } else if (r) for (e in i.listeners[s]) for (o in i.listeners[s][e]) r === o && i.off(t, [e, r].join("."));
+                                else if (n) {
+                                    if (i.listeners[s][n]) {
+                                        for (o in i.listeners[s][n]) i.off(t, [n, o].join("."));
+                                        delete i.listeners[s][n];
+                                    }
+                                } else {
+                                    for (e in i.listeners[s]) i.off(t, e);
+                                    delete i.listeners[s], delete i.handlerMap[s];
+                                }
+                        }),
+                        i.extend(i.Element, {
+                            on: function (t, e, a, s) {
+                                return i.on(this.node, t, e, a, s), this;
+                            },
+                            off: function (t, e) {
+                                return i.off(this.node, t, e), this;
+                            },
+                            fire: function (e, a) {
+                                return e instanceof t.Event ? this.node.dispatchEvent(e) : this.node.dispatchEvent((e = new i.CustomEvent(e, { detail: a, cancelable: !0 }))), (this._event = e), this;
+                            },
+                            event: function () {
+                                return this._event;
+                            },
+                        }),
+                        (i.Defs = i.invent({ create: "defs", inherit: i.Container })),
+                        (i.G = i.invent({
+                            create: "g",
+                            inherit: i.Container,
+                            extend: {
+                                x: function (t) {
+                                    return null == t ? this.transform("x") : this.transform({ x: t - this.x() }, !0);
+                                },
+                                y: function (t) {
+                                    return null == t ? this.transform("y") : this.transform({ y: t - this.y() }, !0);
+                                },
+                                cx: function (t) {
+                                    return null == t ? this.gbox().cx : this.x(t - this.gbox().width / 2);
+                                },
+                                cy: function (t) {
+                                    return null == t ? this.gbox().cy : this.y(t - this.gbox().height / 2);
+                                },
+                                gbox: function () {
+                                    var t = this.bbox(),
+                                        e = this.transform();
+                                    return (t.x += e.x), (t.x2 += e.x), (t.cx += e.x), (t.y += e.y), (t.y2 += e.y), (t.cy += e.y), t;
+                                },
+                            },
+                            construct: {
+                                group: function () {
+                                    return this.put(new i.G());
+                                },
+                            },
+                        })),
+                        (i.Doc = i.invent({
+                            create: function (t) {
+                                t &&
+                                    ("svg" == (t = "string" == typeof t ? e.getElementById(t) : t).nodeName
+                                        ? this.constructor.call(this, t)
+                                        : (this.constructor.call(this, i.create("svg")), t.appendChild(this.node), this.size("100%", "100%")),
+                                    this.namespace().defs());
+                            },
+                            inherit: i.Container,
+                            extend: {
+                                namespace: function () {
+                                    return this.attr({ xmlns: i.ns, version: "1.1" }).attr("xmlns:xlink", i.xlink, i.xmlns).attr("xmlns:svgjs", i.svgjs, i.xmlns);
+                                },
+                                defs: function () {
+                                    var t;
+                                    this._defs || ((t = this.node.getElementsByTagName("defs")[0]) ? (this._defs = i.adopt(t)) : (this._defs = new i.Defs()), this.node.appendChild(this._defs.node));
+                                    return this._defs;
+                                },
+                                parent: function () {
+                                    return this.node.parentNode && "#document" != this.node.parentNode.nodeName ? this.node.parentNode : null;
+                                },
+                                spof: function () {
+                                    var t = this.node.getScreenCTM();
+                                    return t && this.style("left", (-t.e % 1) + "px").style("top", (-t.f % 1) + "px"), this;
+                                },
+                                remove: function () {
+                                    return this.parent() && this.parent().removeChild(this.node), this;
+                                },
+                                clear: function () {
+                                    for (; this.node.hasChildNodes(); ) this.node.removeChild(this.node.lastChild);
+                                    return delete this._defs, i.parser.draw && !i.parser.draw.parentNode && this.node.appendChild(i.parser.draw), this;
+                                },
+                                clone: function (t) {
+                                    this.writeDataToDom();
+                                    var e = this.node,
+                                        i = v(e.cloneNode(!0));
+                                    return t ? (t.node || t).appendChild(i.node) : e.parentNode.insertBefore(i.node, e.nextSibling), i;
+                                },
+                            },
+                        })),
+                        i.extend(i.Element, {
+                            siblings: function () {
+                                return this.parent().children();
+                            },
+                            position: function () {
+                                return this.parent().index(this);
+                            },
+                            next: function () {
+                                return this.siblings()[this.position() + 1];
+                            },
+                            previous: function () {
+                                return this.siblings()[this.position() - 1];
+                            },
+                            forward: function () {
+                                var t = this.position() + 1,
+                                    e = this.parent();
+                                return e.removeElement(this).add(this, t), e instanceof i.Doc && e.node.appendChild(e.defs().node), this;
+                            },
+                            backward: function () {
+                                var t = this.position();
+                                return (
+                                    t > 0 &&
+                                        this.parent()
+                                            .removeElement(this)
+                                            .add(this, t - 1),
+                                    this
+                                );
+                            },
+                            front: function () {
+                                var t = this.parent();
+                                return t.node.appendChild(this.node), t instanceof i.Doc && t.node.appendChild(t.defs().node), this;
+                            },
+                            back: function () {
+                                return this.position() > 0 && this.parent().removeElement(this).add(this, 0), this;
+                            },
+                            before: function (t) {
+                                t.remove();
+                                var e = this.position();
+                                return this.parent().add(t, e), this;
+                            },
+                            after: function (t) {
+                                t.remove();
+                                var e = this.position();
+                                return this.parent().add(t, e + 1), this;
+                            },
+                        }),
+                        (i.Mask = i.invent({
+                            create: function () {
+                                this.constructor.call(this, i.create("mask")), (this.targets = []);
+                            },
+                            inherit: i.Container,
+                            extend: {
+                                remove: function () {
+                                    for (var t = this.targets.length - 1; t >= 0; t--) this.targets[t] && this.targets[t].unmask();
+                                    return (this.targets = []), i.Element.prototype.remove.call(this), this;
+                                },
+                            },
+                            construct: {
+                                mask: function () {
+                                    return this.defs().put(new i.Mask());
+                                },
+                            },
+                        })),
+                        i.extend(i.Element, {
+                            maskWith: function (t) {
+                                return (this.masker = t instanceof i.Mask ? t : this.parent().mask().add(t)), this.masker.targets.push(this), this.attr("mask", 'url("#' + this.masker.attr("id") + '")');
+                            },
+                            unmask: function () {
+                                return delete this.masker, this.attr("mask", null);
+                            },
+                        }),
+                        (i.ClipPath = i.invent({
+                            create: function () {
+                                this.constructor.call(this, i.create("clipPath")), (this.targets = []);
+                            },
+                            inherit: i.Container,
+                            extend: {
+                                remove: function () {
+                                    for (var t = this.targets.length - 1; t >= 0; t--) this.targets[t] && this.targets[t].unclip();
+                                    return (this.targets = []), this.parent().removeElement(this), this;
+                                },
+                            },
+                            construct: {
+                                clip: function () {
+                                    return this.defs().put(new i.ClipPath());
+                                },
+                            },
+                        })),
+                        i.extend(i.Element, {
+                            clipWith: function (t) {
+                                return (this.clipper = t instanceof i.ClipPath ? t : this.parent().clip().add(t)), this.clipper.targets.push(this), this.attr("clip-path", 'url("#' + this.clipper.attr("id") + '")');
+                            },
+                            unclip: function () {
+                                return delete this.clipper, this.attr("clip-path", null);
+                            },
+                        }),
+                        (i.Gradient = i.invent({
+                            create: function (t) {
+                                this.constructor.call(this, i.create(t + "Gradient")), (this.type = t);
+                            },
+                            inherit: i.Container,
+                            extend: {
+                                at: function (t, e, a) {
+                                    return this.put(new i.Stop()).update(t, e, a);
+                                },
+                                update: function (t) {
+                                    return this.clear(), "function" == typeof t && t.call(this, this), this;
+                                },
+                                fill: function () {
+                                    return "url(#" + this.id() + ")";
+                                },
+                                toString: function () {
+                                    return this.fill();
+                                },
+                                attr: function (t, e, a) {
+                                    return "transform" == t && (t = "gradientTransform"), i.Container.prototype.attr.call(this, t, e, a);
+                                },
+                            },
+                            construct: {
+                                gradient: function (t, e) {
+                                    return this.defs().gradient(t, e);
+                                },
+                            },
+                        })),
+                        i.extend(i.Gradient, i.FX, {
+                            from: function (t, e) {
+                                return "radial" == (this._target || this).type ? this.attr({ fx: new i.Number(t), fy: new i.Number(e) }) : this.attr({ x1: new i.Number(t), y1: new i.Number(e) });
+                            },
+                            to: function (t, e) {
+                                return "radial" == (this._target || this).type ? this.attr({ cx: new i.Number(t), cy: new i.Number(e) }) : this.attr({ x2: new i.Number(t), y2: new i.Number(e) });
+                            },
+                        }),
+                        i.extend(i.Defs, {
+                            gradient: function (t, e) {
+                                return this.put(new i.Gradient(t)).update(e);
+                            },
+                        }),
+                        (i.Stop = i.invent({
+                            create: "stop",
+                            inherit: i.Element,
+                            extend: {
+                                update: function (t) {
+                                    return (
+                                        ("number" == typeof t || t instanceof i.Number) && (t = { offset: arguments[0], color: arguments[1], opacity: arguments[2] }),
+                                        null != t.opacity && this.attr("stop-opacity", t.opacity),
+                                        null != t.color && this.attr("stop-color", t.color),
+                                        null != t.offset && this.attr("offset", new i.Number(t.offset)),
+                                        this
+                                    );
+                                },
+                            },
+                        })),
+                        (i.Pattern = i.invent({
+                            create: "pattern",
+                            inherit: i.Container,
+                            extend: {
+                                fill: function () {
+                                    return "url(#" + this.id() + ")";
+                                },
+                                update: function (t) {
+                                    return this.clear(), "function" == typeof t && t.call(this, this), this;
+                                },
+                                toString: function () {
+                                    return this.fill();
+                                },
+                                attr: function (t, e, a) {
+                                    return "transform" == t && (t = "patternTransform"), i.Container.prototype.attr.call(this, t, e, a);
+                                },
+                            },
+                            construct: {
+                                pattern: function (t, e, i) {
+                                    return this.defs().pattern(t, e, i);
+                                },
+                            },
+                        })),
+                        i.extend(i.Defs, {
+                            pattern: function (t, e, a) {
+                                return this.put(new i.Pattern()).update(a).attr({ x: 0, y: 0, width: t, height: e, patternUnits: "userSpaceOnUse" });
+                            },
+                        }),
+                        (i.Shape = i.invent({
+                            create: function (t) {
+                                this.constructor.call(this, t);
+                            },
+                            inherit: i.Element,
+                        })),
+                        (i.Bare = i.invent({
+                            create: function (t, e) {
+                                if ((this.constructor.call(this, i.create(t)), e)) for (var a in e.prototype) "function" == typeof e.prototype[a] && (this[a] = e.prototype[a]);
+                            },
+                            inherit: i.Element,
+                            extend: {
+                                words: function (t) {
+                                    for (; this.node.hasChildNodes(); ) this.node.removeChild(this.node.lastChild);
+                                    return this.node.appendChild(e.createTextNode(t)), this;
+                                },
+                            },
+                        })),
+                        i.extend(i.Parent, {
+                            element: function (t, e) {
+                                return this.put(new i.Bare(t, e));
+                            },
+                        }),
+                        (i.Symbol = i.invent({
+                            create: "symbol",
+                            inherit: i.Container,
+                            construct: {
+                                symbol: function () {
+                                    return this.put(new i.Symbol());
+                                },
+                            },
+                        })),
+                        (i.Use = i.invent({
+                            create: "use",
+                            inherit: i.Shape,
+                            extend: {
+                                element: function (t, e) {
+                                    return this.attr("href", (e || "") + "#" + t, i.xlink);
+                                },
+                            },
+                            construct: {
+                                use: function (t, e) {
+                                    return this.put(new i.Use()).element(t, e);
+                                },
+                            },
+                        })),
+                        (i.Rect = i.invent({
+                            create: "rect",
+                            inherit: i.Shape,
+                            construct: {
+                                rect: function (t, e) {
+                                    return this.put(new i.Rect()).size(t, e);
+                                },
+                            },
+                        })),
+                        (i.Circle = i.invent({
+                            create: "circle",
+                            inherit: i.Shape,
+                            construct: {
+                                circle: function (t) {
+                                    return this.put(new i.Circle()).rx(new i.Number(t).divide(2)).move(0, 0);
+                                },
+                            },
+                        })),
+                        i.extend(i.Circle, i.FX, {
+                            rx: function (t) {
+                                return this.attr("r", t);
+                            },
+                            ry: function (t) {
+                                return this.rx(t);
+                            },
+                        }),
+                        (i.Ellipse = i.invent({
+                            create: "ellipse",
+                            inherit: i.Shape,
+                            construct: {
+                                ellipse: function (t, e) {
+                                    return this.put(new i.Ellipse()).size(t, e).move(0, 0);
+                                },
+                            },
+                        })),
+                        i.extend(i.Ellipse, i.Rect, i.FX, {
+                            rx: function (t) {
+                                return this.attr("rx", t);
+                            },
+                            ry: function (t) {
+                                return this.attr("ry", t);
+                            },
+                        }),
+                        i.extend(i.Circle, i.Ellipse, {
+                            x: function (t) {
+                                return null == t ? this.cx() - this.rx() : this.cx(t + this.rx());
+                            },
+                            y: function (t) {
+                                return null == t ? this.cy() - this.ry() : this.cy(t + this.ry());
+                            },
+                            cx: function (t) {
+                                return null == t ? this.attr("cx") : this.attr("cx", t);
+                            },
+                            cy: function (t) {
+                                return null == t ? this.attr("cy") : this.attr("cy", t);
+                            },
+                            width: function (t) {
+                                return null == t ? 2 * this.rx() : this.rx(new i.Number(t).divide(2));
+                            },
+                            height: function (t) {
+                                return null == t ? 2 * this.ry() : this.ry(new i.Number(t).divide(2));
+                            },
+                            size: function (t, e) {
+                                var a = f(this, t, e);
+                                return this.rx(new i.Number(a.width).divide(2)).ry(new i.Number(a.height).divide(2));
+                            },
+                        }),
+                        (i.Line = i.invent({
+                            create: "line",
+                            inherit: i.Shape,
+                            extend: {
+                                array: function () {
+                                    return new i.PointArray([
+                                        [this.attr("x1"), this.attr("y1")],
+                                        [this.attr("x2"), this.attr("y2")],
+                                    ]);
+                                },
+                                plot: function (t, e, a, s) {
+                                    return null == t ? this.array() : ((t = void 0 !== e ? { x1: t, y1: e, x2: a, y2: s } : new i.PointArray(t).toLine()), this.attr(t));
+                                },
+                                move: function (t, e) {
+                                    return this.attr(this.array().move(t, e).toLine());
+                                },
+                                size: function (t, e) {
+                                    var i = f(this, t, e);
+                                    return this.attr(this.array().size(i.width, i.height).toLine());
+                                },
+                            },
+                            construct: {
+                                line: function (t, e, a, s) {
+                                    return i.Line.prototype.plot.apply(this.put(new i.Line()), null != t ? [t, e, a, s] : [0, 0, 0, 0]);
+                                },
+                            },
+                        })),
+                        (i.Polyline = i.invent({
+                            create: "polyline",
+                            inherit: i.Shape,
+                            construct: {
+                                polyline: function (t) {
+                                    return this.put(new i.Polyline()).plot(t || new i.PointArray());
+                                },
+                            },
+                        })),
+                        (i.Polygon = i.invent({
+                            create: "polygon",
+                            inherit: i.Shape,
+                            construct: {
+                                polygon: function (t) {
+                                    return this.put(new i.Polygon()).plot(t || new i.PointArray());
+                                },
+                            },
+                        })),
+                        i.extend(i.Polyline, i.Polygon, {
+                            array: function () {
+                                return this._array || (this._array = new i.PointArray(this.attr("points")));
+                            },
+                            plot: function (t) {
+                                return null == t ? this.array() : this.clear().attr("points", "string" == typeof t ? t : (this._array = new i.PointArray(t)));
+                            },
+                            clear: function () {
+                                return delete this._array, this;
+                            },
+                            move: function (t, e) {
+                                return this.attr("points", this.array().move(t, e));
+                            },
+                            size: function (t, e) {
+                                var i = f(this, t, e);
+                                return this.attr("points", this.array().size(i.width, i.height));
+                            },
+                        }),
+                        i.extend(i.Line, i.Polyline, i.Polygon, {
+                            morphArray: i.PointArray,
+                            x: function (t) {
+                                return null == t ? this.bbox().x : this.move(t, this.bbox().y);
+                            },
+                            y: function (t) {
+                                return null == t ? this.bbox().y : this.move(this.bbox().x, t);
+                            },
+                            width: function (t) {
+                                var e = this.bbox();
+                                return null == t ? e.width : this.size(t, e.height);
+                            },
+                            height: function (t) {
+                                var e = this.bbox();
+                                return null == t ? e.height : this.size(e.width, t);
+                            },
+                        }),
+                        (i.Path = i.invent({
+                            create: "path",
+                            inherit: i.Shape,
+                            extend: {
+                                morphArray: i.PathArray,
+                                array: function () {
+                                    return this._array || (this._array = new i.PathArray(this.attr("d")));
+                                },
+                                plot: function (t) {
+                                    return null == t ? this.array() : this.clear().attr("d", "string" == typeof t ? t : (this._array = new i.PathArray(t)));
+                                },
+                                clear: function () {
+                                    return delete this._array, this;
+                                },
+                                move: function (t, e) {
+                                    return this.attr("d", this.array().move(t, e));
+                                },
+                                x: function (t) {
+                                    return null == t ? this.bbox().x : this.move(t, this.bbox().y);
+                                },
+                                y: function (t) {
+                                    return null == t ? this.bbox().y : this.move(this.bbox().x, t);
+                                },
+                                size: function (t, e) {
+                                    var i = f(this, t, e);
+                                    return this.attr("d", this.array().size(i.width, i.height));
+                                },
+                                width: function (t) {
+                                    return null == t ? this.bbox().width : this.size(t, this.bbox().height);
+                                },
+                                height: function (t) {
+                                    return null == t ? this.bbox().height : this.size(this.bbox().width, t);
+                                },
+                            },
+                            construct: {
+                                path: function (t) {
+                                    return this.put(new i.Path()).plot(t || new i.PathArray());
+                                },
+                            },
+                        })),
+                        (i.Image = i.invent({
+                            create: "image",
+                            inherit: i.Shape,
+                            extend: {
+                                load: function (e) {
+                                    if (!e) return this;
+                                    var a = this,
+                                        s = new t.Image();
+                                    return (
+                                        i.on(s, "load", function () {
+                                            i.off(s);
+                                            var t = a.parent(i.Pattern);
+                                            null !== t &&
+                                                (0 == a.width() && 0 == a.height() && a.size(s.width, s.height),
+                                                t && 0 == t.width() && 0 == t.height() && t.size(a.width(), a.height()),
+                                                "function" == typeof a._loaded && a._loaded.call(a, { width: s.width, height: s.height, ratio: s.width / s.height, url: e }));
+                                        }),
+                                        i.on(s, "error", function (t) {
+                                            i.off(s), "function" == typeof a._error && a._error.call(a, t);
+                                        }),
+                                        this.attr("href", (s.src = this.src = e), i.xlink)
+                                    );
+                                },
+                                loaded: function (t) {
+                                    return (this._loaded = t), this;
+                                },
+                                error: function (t) {
+                                    return (this._error = t), this;
+                                },
+                            },
+                            construct: {
+                                image: function (t, e, a) {
+                                    return this.put(new i.Image())
+                                        .load(t)
+                                        .size(e || 0, a || e || 0);
+                                },
+                            },
+                        })),
+                        (i.Text = i.invent({
+                            create: function () {
+                                this.constructor.call(this, i.create("text")), (this.dom.leading = new i.Number(1.3)), (this._rebuild = !0), (this._build = !1), this.attr("font-family", i.defaults.attrs["font-family"]);
+                            },
+                            inherit: i.Shape,
+                            extend: {
+                                x: function (t) {
+                                    return null == t ? this.attr("x") : this.attr("x", t);
+                                },
+                                y: function (t) {
+                                    var e = this.attr("y"),
+                                        i = "number" == typeof e ? e - this.bbox().y : 0;
+                                    return null == t ? ("number" == typeof e ? e - i : e) : this.attr("y", "number" == typeof t.valueOf() ? t + i : t);
+                                },
+                                cx: function (t) {
+                                    return null == t ? this.bbox().cx : this.x(t - this.bbox().width / 2);
+                                },
+                                cy: function (t) {
+                                    return null == t ? this.bbox().cy : this.y(t - this.bbox().height / 2);
+                                },
+                                text: function (t) {
+                                    if (void 0 === t) {
+                                        t = "";
+                                        for (var e = this.node.childNodes, a = 0, s = e.length; a < s; ++a) 0 != a && 3 != e[a].nodeType && 1 == i.adopt(e[a]).dom.newLined && (t += "\n"), (t += e[a].textContent);
+                                        return t;
+                                    }
+                                    if ((this.clear().build(!0), "function" == typeof t)) t.call(this, this);
+                                    else {
+                                        a = 0;
+                                        for (var n = (t = t.split("\n")).length; a < n; a++) this.tspan(t[a]).newLine();
+                                    }
+                                    return this.build(!1).rebuild();
+                                },
+                                size: function (t) {
+                                    return this.attr("font-size", t).rebuild();
+                                },
+                                leading: function (t) {
+                                    return null == t ? this.dom.leading : ((this.dom.leading = new i.Number(t)), this.rebuild());
+                                },
+                                lines: function () {
+                                    var t = ((this.textPath && this.textPath()) || this).node,
+                                        e = i.utils.map(i.utils.filterSVGElements(t.childNodes), function (t) {
+                                            return i.adopt(t);
+                                        });
+                                    return new i.Set(e);
+                                },
+                                rebuild: function (t) {
+                                    if (("boolean" == typeof t && (this._rebuild = t), this._rebuild)) {
+                                        var e = this,
+                                            a = 0,
+                                            s = this.dom.leading * new i.Number(this.attr("font-size"));
+                                        this.lines().each(function () {
+                                            this.dom.newLined && (e.textPath() || this.attr("x", e.attr("x")), "\n" == this.text() ? (a += s) : (this.attr("dy", s + a), (a = 0)));
+                                        }),
+                                            this.fire("rebuild");
+                                    }
+                                    return this;
+                                },
+                                build: function (t) {
+                                    return (this._build = !!t), this;
+                                },
+                                setData: function (t) {
+                                    return (this.dom = t), (this.dom.leading = new i.Number(t.leading || 1.3)), this;
+                                },
+                            },
+                            construct: {
+                                text: function (t) {
+                                    return this.put(new i.Text()).text(t);
+                                },
+                                plain: function (t) {
+                                    return this.put(new i.Text()).plain(t);
+                                },
+                            },
+                        })),
+                        (i.Tspan = i.invent({
+                            create: "tspan",
+                            inherit: i.Shape,
+                            extend: {
+                                text: function (t) {
+                                    return null == t ? this.node.textContent + (this.dom.newLined ? "\n" : "") : ("function" == typeof t ? t.call(this, this) : this.plain(t), this);
+                                },
+                                dx: function (t) {
+                                    return this.attr("dx", t);
+                                },
+                                dy: function (t) {
+                                    return this.attr("dy", t);
+                                },
+                                newLine: function () {
+                                    var t = this.parent(i.Text);
+                                    return (this.dom.newLined = !0), this.dy(t.dom.leading * t.attr("font-size")).attr("x", t.x());
+                                },
+                            },
+                        })),
+                        i.extend(i.Text, i.Tspan, {
+                            plain: function (t) {
+                                return !1 === this._build && this.clear(), this.node.appendChild(e.createTextNode(t)), this;
+                            },
+                            tspan: function (t) {
+                                var e = ((this.textPath && this.textPath()) || this).node,
+                                    a = new i.Tspan();
+                                return !1 === this._build && this.clear(), e.appendChild(a.node), a.text(t);
+                            },
+                            clear: function () {
+                                for (var t = ((this.textPath && this.textPath()) || this).node; t.hasChildNodes(); ) t.removeChild(t.lastChild);
+                                return this;
+                            },
+                            length: function () {
+                                return this.node.getComputedTextLength();
+                            },
+                        }),
+                        (i.TextPath = i.invent({
+                            create: "textPath",
+                            inherit: i.Parent,
+                            parent: i.Text,
+                            construct: {
+                                morphArray: i.PathArray,
+                                path: function (t) {
+                                    for (var e = new i.TextPath(), a = this.doc().defs().path(t); this.node.hasChildNodes(); ) e.node.appendChild(this.node.firstChild);
+                                    return this.node.appendChild(e.node), e.attr("href", "#" + a, i.xlink), this;
+                                },
+                                array: function () {
+                                    var t = this.track();
+                                    return t ? t.array() : null;
+                                },
+                                plot: function (t) {
+                                    var e = this.track(),
+                                        i = null;
+                                    return e && (i = e.plot(t)), null == t ? i : this;
+                                },
+                                track: function () {
+                                    var t = this.textPath();
+                                    if (t) return t.reference("href");
+                                },
+                                textPath: function () {
+                                    if (this.node.firstChild && "textPath" == this.node.firstChild.nodeName) return i.adopt(this.node.firstChild);
+                                },
+                            },
+                        })),
+                        (i.Nested = i.invent({
+                            create: function () {
+                                this.constructor.call(this, i.create("svg")), this.style("overflow", "visible");
+                            },
+                            inherit: i.Container,
+                            construct: {
+                                nested: function () {
+                                    return this.put(new i.Nested());
+                                },
+                            },
+                        })),
+                        (i.A = i.invent({
+                            create: "a",
+                            inherit: i.Container,
+                            extend: {
+                                to: function (t) {
+                                    return this.attr("href", t, i.xlink);
+                                },
+                                show: function (t) {
+                                    return this.attr("show", t, i.xlink);
+                                },
+                                target: function (t) {
+                                    return this.attr("target", t);
+                                },
+                            },
+                            construct: {
+                                link: function (t) {
+                                    return this.put(new i.A()).to(t);
+                                },
+                            },
+                        })),
+                        i.extend(i.Element, {
+                            linkTo: function (t) {
+                                var e = new i.A();
+                                return "function" == typeof t ? t.call(e, e) : e.to(t), this.parent().put(e).put(this);
+                            },
+                        }),
+                        (i.Marker = i.invent({
+                            create: "marker",
+                            inherit: i.Container,
+                            extend: {
+                                width: function (t) {
+                                    return this.attr("markerWidth", t);
+                                },
+                                height: function (t) {
+                                    return this.attr("markerHeight", t);
+                                },
+                                ref: function (t, e) {
+                                    return this.attr("refX", t).attr("refY", e);
+                                },
+                                update: function (t) {
+                                    return this.clear(), "function" == typeof t && t.call(this, this), this;
+                                },
+                                toString: function () {
+                                    return "url(#" + this.id() + ")";
+                                },
+                            },
+                            construct: {
+                                marker: function (t, e, i) {
+                                    return this.defs().marker(t, e, i);
+                                },
+                            },
+                        })),
+                        i.extend(i.Defs, {
+                            marker: function (t, e, a) {
+                                return this.put(new i.Marker())
+                                    .size(t, e)
+                                    .ref(t / 2, e / 2)
+                                    .viewbox(0, 0, t, e)
+                                    .attr("orient", "auto")
+                                    .update(a);
+                            },
+                        }),
+                        i.extend(i.Line, i.Polyline, i.Polygon, i.Path, {
+                            marker: function (t, e, a, s) {
+                                var n = ["marker"];
+                                return "all" != t && n.push(t), (n = n.join("-")), (t = arguments[1] instanceof i.Marker ? arguments[1] : this.doc().marker(e, a, s)), this.attr(n, t);
+                            },
+                        });
+                    var l = {
+                        stroke: ["color", "width", "opacity", "linecap", "linejoin", "miterlimit", "dasharray", "dashoffset"],
+                        fill: ["color", "opacity", "rule"],
+                        prefix: function (t, e) {
+                            return "color" == e ? t : t + "-" + e;
+                        },
+                    };
+                    function h(t, e, a, s) {
+                        return a + s.replace(i.regex.dots, " .");
+                    }
+                    function c(t) {
+                        return t.toLowerCase().replace(/-(.)/g, function (t, e) {
+                            return e.toUpperCase();
+                        });
+                    }
+                    function d(t) {
+                        return t.charAt(0).toUpperCase() + t.slice(1);
+                    }
+                    function u(t) {
+                        var e = t.toString(16);
+                        return 1 == e.length ? "0" + e : e;
+                    }
+                    function f(t, e, i) {
+                        if (null == e || null == i) {
+                            var a = t.bbox();
+                            null == e ? (e = (a.width / a.height) * i) : null == i && (i = (a.height / a.width) * e);
+                        }
+                        return { width: e, height: i };
+                    }
+                    function g(t, e, i) {
+                        return { x: e * t.a + i * t.c + 0, y: e * t.b + i * t.d + 0 };
+                    }
+                    function p(t) {
+                        return { a: t[0], b: t[1], c: t[2], d: t[3], e: t[4], f: t[5] };
+                    }
+                    function x(t, e) {
+                        (t.cx = null == t.cx ? e.bbox().cx : t.cx), (t.cy = null == t.cy ? e.bbox().cy : t.cy);
+                    }
+                    function v(e) {
+                        for (var a = e.childNodes.length - 1; a >= 0; a--) e.childNodes[a] instanceof t.SVGElement && v(e.childNodes[a]);
+                        return i.adopt(e).id(i.eid(e.nodeName));
+                    }
+                    function m(t) {
+                        return (
+                            null == t.x && ((t.x = 0), (t.y = 0), (t.width = 0), (t.height = 0)), (t.w = t.width), (t.h = t.height), (t.x2 = t.x + t.width), (t.y2 = t.y + t.height), (t.cx = t.x + t.width / 2), (t.cy = t.y + t.height / 2), t
+                        );
+                    }
+                    function b(t) {
+                        return Math.abs(t) > 1e-37 ? t : 0;
+                    }
+                    ["fill", "stroke"].forEach(function (t) {
+                        var e,
+                            a = {};
+                        (a[t] = function (a) {
+                            if (void 0 === a) return this;
+                            if ("string" == typeof a || i.Color.isRgb(a) || (a && "function" == typeof a.fill)) this.attr(t, a);
+                            else for (e = l[t].length - 1; e >= 0; e--) null != a[l[t][e]] && this.attr(l.prefix(t, l[t][e]), a[l[t][e]]);
+                            return this;
+                        }),
+                            i.extend(i.Element, i.FX, a);
+                    }),
+                        i.extend(i.Element, i.FX, {
+                            rotate: function (t, e, i) {
+                                return this.transform({ rotation: t, cx: e, cy: i });
+                            },
+                            skew: function (t, e, i, a) {
+                                return 1 == arguments.length || 3 == arguments.length ? this.transform({ skew: t, cx: e, cy: i }) : this.transform({ skewX: t, skewY: e, cx: i, cy: a });
+                            },
+                            scale: function (t, e, i, a) {
+                                return 1 == arguments.length || 3 == arguments.length ? this.transform({ scale: t, cx: e, cy: i }) : this.transform({ scaleX: t, scaleY: e, cx: i, cy: a });
+                            },
+                            translate: function (t, e) {
+                                return this.transform({ x: t, y: e });
+                            },
+                            flip: function (t, e) {
+                                return (e = "number" == typeof t ? t : e), this.transform({ flip: t || "both", offset: e });
+                            },
+                            matrix: function (t) {
+                                return this.attr("transform", new i.Matrix(6 == arguments.length ? [].slice.call(arguments) : t));
+                            },
+                            opacity: function (t) {
+                                return this.attr("opacity", t);
+                            },
+                            dx: function (t) {
+                                return this.x(new i.Number(t).plus(this instanceof i.FX ? 0 : this.x()), !0);
+                            },
+                            dy: function (t) {
+                                return this.y(new i.Number(t).plus(this instanceof i.FX ? 0 : this.y()), !0);
+                            },
+                            dmove: function (t, e) {
+                                return this.dx(t).dy(e);
+                            },
+                        }),
+                        i.extend(i.Rect, i.Ellipse, i.Circle, i.Gradient, i.FX, {
+                            radius: function (t, e) {
+                                var a = (this._target || this).type;
+                                return "radial" == a || "circle" == a ? this.attr("r", new i.Number(t)) : this.rx(t).ry(null == e ? t : e);
+                            },
+                        }),
+                        i.extend(i.Path, {
+                            length: function () {
+                                return this.node.getTotalLength();
+                            },
+                            pointAt: function (t) {
+                                return this.node.getPointAtLength(t);
+                            },
+                        }),
+                        i.extend(i.Parent, i.Text, i.Tspan, i.FX, {
+                            font: function (t, e) {
+                                if ("object" === s(t)) for (e in t) this.font(e, t[e]);
+                                return "leading" == t
+                                    ? this.leading(e)
+                                    : "anchor" == t
+                                    ? this.attr("text-anchor", e)
+                                    : "size" == t || "family" == t || "weight" == t || "stretch" == t || "variant" == t || "style" == t
+                                    ? this.attr("font-" + t, e)
+                                    : this.attr(t, e);
+                            },
+                        }),
+                        (i.Set = i.invent({
+                            create: function (t) {
+                                Array.isArray(t) ? (this.members = t) : this.clear();
+                            },
+                            extend: {
+                                add: function () {
+                                    var t,
+                                        e,
+                                        i = [].slice.call(arguments);
+                                    for (t = 0, e = i.length; t < e; t++) this.members.push(i[t]);
+                                    return this;
+                                },
+                                remove: function (t) {
+                                    var e = this.index(t);
+                                    return e > -1 && this.members.splice(e, 1), this;
+                                },
+                                each: function (t) {
+                                    for (var e = 0, i = this.members.length; e < i; e++) t.apply(this.members[e], [e, this.members]);
+                                    return this;
+                                },
+                                clear: function () {
+                                    return (this.members = []), this;
+                                },
+                                length: function () {
+                                    return this.members.length;
+                                },
+                                has: function (t) {
+                                    return this.index(t) >= 0;
+                                },
+                                index: function (t) {
+                                    return this.members.indexOf(t);
+                                },
+                                get: function (t) {
+                                    return this.members[t];
+                                },
+                                first: function () {
+                                    return this.get(0);
+                                },
+                                last: function () {
+                                    return this.get(this.members.length - 1);
+                                },
+                                valueOf: function () {
+                                    return this.members;
+                                },
+                                bbox: function () {
+                                    if (0 == this.members.length) return new i.RBox();
+                                    var t = this.members[0].rbox(this.members[0].doc());
+                                    return (
+                                        this.each(function () {
+                                            t = t.merge(this.rbox(this.doc()));
+                                        }),
+                                        t
+                                    );
+                                },
+                            },
+                            construct: {
+                                set: function (t) {
+                                    return new i.Set(t);
+                                },
+                            },
+                        })),
+                        (i.FX.Set = i.invent({
+                            create: function (t) {
+                                this.set = t;
+                            },
+                        })),
+                        (i.Set.inherit = function () {
+                            var t = [];
+                            for (var e in i.Shape.prototype) "function" == typeof i.Shape.prototype[e] && "function" != typeof i.Set.prototype[e] && t.push(e);
+                            for (var e in (t.forEach(function (t) {
+                                i.Set.prototype[t] = function () {
+                                    for (var e = 0, a = this.members.length; e < a; e++) this.members[e] && "function" == typeof this.members[e][t] && this.members[e][t].apply(this.members[e], arguments);
+                                    return "animate" == t ? this.fx || (this.fx = new i.FX.Set(this)) : this;
+                                };
+                            }),
+                            (t = []),
+                            i.FX.prototype))
+                                "function" == typeof i.FX.prototype[e] && "function" != typeof i.FX.Set.prototype[e] && t.push(e);
+                            t.forEach(function (t) {
+                                i.FX.Set.prototype[t] = function () {
+                                    for (var e = 0, i = this.set.members.length; e < i; e++) this.set.members[e].fx[t].apply(this.set.members[e].fx, arguments);
+                                    return this;
+                                };
+                            });
+                        }),
+                        i.extend(i.Element, {
+                            data: function (t, e, i) {
+                                if ("object" === s(t)) for (e in t) this.data(e, t[e]);
+                                else if (arguments.length < 2)
+                                    try {
+                                        return JSON.parse(this.attr("data-" + t));
+                                    } catch (e) {
+                                        return this.attr("data-" + t);
+                                    }
+                                else this.attr("data-" + t, null === e ? null : !0 === i || "string" == typeof e || "number" == typeof e ? e : JSON.stringify(e));
+                                return this;
+                            },
+                        }),
+                        i.extend(i.Element, {
+                            remember: function (t, e) {
+                                if ("object" === s(arguments[0])) for (var e in t) this.remember(e, t[e]);
+                                else {
+                                    if (1 == arguments.length) return this.memory()[t];
+                                    this.memory()[t] = e;
+                                }
+                                return this;
+                            },
+                            forget: function () {
+                                if (0 == arguments.length) this._memory = {};
+                                else for (var t = arguments.length - 1; t >= 0; t--) delete this.memory()[arguments[t]];
+                                return this;
+                            },
+                            memory: function () {
+                                return this._memory || (this._memory = {});
+                            },
+                        }),
+                        (i.get = function (t) {
+                            var a = e.getElementById(
+                                (function (t) {
+                                    var e = (t || "").toString().match(i.regex.reference);
+                                    if (e) return e[1];
+                                })(t) || t
+                            );
+                            return i.adopt(a);
+                        }),
+                        (i.select = function (t, a) {
+                            return new i.Set(
+                                i.utils.map((a || e).querySelectorAll(t), function (t) {
+                                    return i.adopt(t);
+                                })
+                            );
+                        }),
+                        i.extend(i.Parent, {
+                            select: function (t) {
+                                return i.select(t, this.node);
+                            },
+                        });
+                    var y = "abcdef".split("");
+                    if ("function" != typeof t.CustomEvent) {
+                        var w = function (t, i) {
+                            i = i || { bubbles: !1, cancelable: !1, detail: void 0 };
+                            var a = e.createEvent("CustomEvent");
+                            return a.initCustomEvent(t, i.bubbles, i.cancelable, i.detail), a;
+                        };
+                        (w.prototype = t.Event.prototype), (i.CustomEvent = w);
+                    } else i.CustomEvent = t.CustomEvent;
+                    return (
+                        (function (e) {
+                            for (var i = 0, a = ["moz", "webkit"], s = 0; s < a.length && !t.requestAnimationFrame; ++s)
+                                (e.requestAnimationFrame = e[a[s] + "RequestAnimationFrame"]), (e.cancelAnimationFrame = e[a[s] + "CancelAnimationFrame"] || e[a[s] + "CancelRequestAnimationFrame"]);
+                            (e.requestAnimationFrame =
+                                e.requestAnimationFrame ||
+                                function (t) {
+                                    var a = new Date().getTime(),
+                                        s = Math.max(0, 16 - (a - i)),
+                                        n = e.setTimeout(function () {
+                                            t(a + s);
+                                        }, s);
+                                    return (i = a + s), n;
+                                }),
+                                (e.cancelAnimationFrame = e.cancelAnimationFrame || e.clearTimeout);
+                        })(t),
+                        i
+                    );
+                }),
+                "function" == typeof define && i(105)
+                    ? define(function () {
+                          return ht(lt, lt.document);
+                      })
+                    : "object" === ("undefined" == typeof exports ? "undefined" : s(exports)) && void 0 !== a
+                    ? (a.exports = lt.document
+                          ? ht(lt, lt.document)
+                          : function (t) {
+                                return ht(t, t.document);
+                            })
+                    : (lt.SVG = ht(lt, lt.document)),
+                /*! svg.filter.js - v2.0.2 - 2016-02-24
+                 * https://github.com/wout/svg.filter.js
+                 * Copyright (c) 2016 Wout Fierens; Licensed MIT */
+                function () {
+                    (SVG.Filter = SVG.invent({
+                        create: "filter",
+                        inherit: SVG.Parent,
+                        extend: {
+                            source: "SourceGraphic",
+                            sourceAlpha: "SourceAlpha",
+                            background: "BackgroundImage",
+                            backgroundAlpha: "BackgroundAlpha",
+                            fill: "FillPaint",
+                            stroke: "StrokePaint",
+                            autoSetIn: !0,
+                            put: function (t, e) {
+                                return this.add(t, e), !t.attr("in") && this.autoSetIn && t.attr("in", this.source), t.attr("result") || t.attr("result", t), t;
+                            },
+                            blend: function (t, e, i) {
+                                return this.put(new SVG.BlendEffect(t, e, i));
+                            },
+                            colorMatrix: function (t, e) {
+                                return this.put(new SVG.ColorMatrixEffect(t, e));
+                            },
+                            convolveMatrix: function (t) {
+                                return this.put(new SVG.ConvolveMatrixEffect(t));
+                            },
+                            componentTransfer: function (t) {
+                                return this.put(new SVG.ComponentTransferEffect(t));
+                            },
+                            composite: function (t, e, i) {
+                                return this.put(new SVG.CompositeEffect(t, e, i));
+                            },
+                            flood: function (t, e) {
+                                return this.put(new SVG.FloodEffect(t, e));
+                            },
+                            offset: function (t, e) {
+                                return this.put(new SVG.OffsetEffect(t, e));
+                            },
+                            image: function (t) {
+                                return this.put(new SVG.ImageEffect(t));
+                            },
+                            merge: function () {
+                                var t = [void 0];
+                                for (var e in arguments) t.push(arguments[e]);
+                                return this.put(new (SVG.MergeEffect.bind.apply(SVG.MergeEffect, t))());
+                            },
+                            gaussianBlur: function (t, e) {
+                                return this.put(new SVG.GaussianBlurEffect(t, e));
+                            },
+                            morphology: function (t, e) {
+                                return this.put(new SVG.MorphologyEffect(t, e));
+                            },
+                            diffuseLighting: function (t, e, i) {
+                                return this.put(new SVG.DiffuseLightingEffect(t, e, i));
+                            },
+                            displacementMap: function (t, e, i, a, s) {
+                                return this.put(new SVG.DisplacementMapEffect(t, e, i, a, s));
+                            },
+                            specularLighting: function (t, e, i, a) {
+                                return this.put(new SVG.SpecularLightingEffect(t, e, i, a));
+                            },
+                            tile: function () {
+                                return this.put(new SVG.TileEffect());
+                            },
+                            turbulence: function (t, e, i, a, s) {
+                                return this.put(new SVG.TurbulenceEffect(t, e, i, a, s));
+                            },
+                            toString: function () {
+                                return "url(#" + this.attr("id") + ")";
+                            },
+                        },
+                    })),
+                        SVG.extend(SVG.Defs, {
+                            filter: function (t) {
+                                var e = this.put(new SVG.Filter());
+                                return "function" == typeof t && t.call(e, e), e;
+                            },
+                        }),
+                        SVG.extend(SVG.Container, {
+                            filter: function (t) {
+                                return this.defs().filter(t);
+                            },
+                        }),
+                        SVG.extend(SVG.Element, SVG.G, SVG.Nested, {
+                            filter: function (t) {
+                                return (
+                                    (this.filterer = t instanceof SVG.Element ? t : this.doc().filter(t)),
+                                    this.doc() && this.filterer.doc() !== this.doc() && this.doc().defs().add(this.filterer),
+                                    this.attr("filter", this.filterer),
+                                    this.filterer
+                                );
+                            },
+                            unfilter: function (t) {
+                                return this.filterer && !0 === t && this.filterer.remove(), delete this.filterer, this.attr("filter", null);
+                            },
+                        }),
+                        (SVG.Effect = SVG.invent({
+                            create: function () {
+                                this.constructor.call(this);
+                            },
+                            inherit: SVG.Element,
+                            extend: {
+                                in: function (t) {
+                                    return null == t
+                                        ? (this.parent() &&
+                                              this.parent()
+                                                  .select('[result="' + this.attr("in") + '"]')
+                                                  .get(0)) ||
+                                              this.attr("in")
+                                        : this.attr("in", t);
+                                },
+                                result: function (t) {
+                                    return null == t ? this.attr("result") : this.attr("result", t);
+                                },
+                                toString: function () {
+                                    return this.result();
+                                },
+                            },
+                        })),
+                        (SVG.ParentEffect = SVG.invent({
+                            create: function () {
+                                this.constructor.call(this);
+                            },
+                            inherit: SVG.Parent,
+                            extend: {
+                                in: function (t) {
+                                    return null == t
+                                        ? (this.parent() &&
+                                              this.parent()
+                                                  .select('[result="' + this.attr("in") + '"]')
+                                                  .get(0)) ||
+                                              this.attr("in")
+                                        : this.attr("in", t);
+                                },
+                                result: function (t) {
+                                    return null == t ? this.attr("result") : this.attr("result", t);
+                                },
+                                toString: function () {
+                                    return this.result();
+                                },
+                            },
+                        }));
+                    var t = {
+                        blend: function (t, e) {
+                            return this.parent() && this.parent().blend(this, t, e);
+                        },
+                        colorMatrix: function (t, e) {
+                            return this.parent() && this.parent().colorMatrix(t, e).in(this);
+                        },
+                        convolveMatrix: function (t) {
+                            return this.parent() && this.parent().convolveMatrix(t).in(this);
+                        },
+                        componentTransfer: function (t) {
+                            return this.parent() && this.parent().componentTransfer(t).in(this);
+                        },
+                        composite: function (t, e) {
+                            return this.parent() && this.parent().composite(this, t, e);
+                        },
+                        flood: function (t, e) {
+                            return this.parent() && this.parent().flood(t, e);
+                        },
+                        offset: function (t, e) {
+                            return this.parent() && this.parent().offset(t, e).in(this);
+                        },
+                        image: function (t) {
+                            return this.parent() && this.parent().image(t);
+                        },
+                        merge: function () {
+                            return this.parent() && this.parent().merge.apply(this.parent(), [this].concat(arguments));
+                        },
+                        gaussianBlur: function (t, e) {
+                            return this.parent() && this.parent().gaussianBlur(t, e).in(this);
+                        },
+                        morphology: function (t, e) {
+                            return this.parent() && this.parent().morphology(t, e).in(this);
+                        },
+                        diffuseLighting: function (t, e, i) {
+                            return this.parent() && this.parent().diffuseLighting(t, e, i).in(this);
+                        },
+                        displacementMap: function (t, e, i, a) {
+                            return this.parent() && this.parent().displacementMap(this, t, e, i, a);
+                        },
+                        specularLighting: function (t, e, i, a) {
+                            return this.parent() && this.parent().specularLighting(t, e, i, a).in(this);
+                        },
+                        tile: function () {
+                            return this.parent() && this.parent().tile().in(this);
+                        },
+                        turbulence: function (t, e, i, a, s) {
+                            return this.parent() && this.parent().turbulence(t, e, i, a, s).in(this);
+                        },
+                    };
+                    SVG.extend(SVG.Effect, t),
+                        SVG.extend(SVG.ParentEffect, t),
+                        (SVG.ChildEffect = SVG.invent({
+                            create: function () {
+                                this.constructor.call(this);
+                            },
+                            inherit: SVG.Element,
+                            extend: {
+                                in: function (t) {
+                                    this.attr("in", t);
+                                },
+                            },
+                        }));
+                    var e = {
+                            blend: function (t, e, i) {
+                                this.attr({ in: t, in2: e, mode: i || "normal" });
+                            },
+                            colorMatrix: function (t, e) {
+                                "matrix" == t && (e = s(e)), this.attr({ type: t, values: void 0 === e ? null : e });
+                            },
+                            convolveMatrix: function (t) {
+                                (t = s(t)), this.attr({ order: Math.sqrt(t.split(" ").length), kernelMatrix: t });
+                            },
+                            composite: function (t, e, i) {
+                                this.attr({ in: t, in2: e, operator: i });
+                            },
+                            flood: function (t, e) {
+                                this.attr("flood-color", t), null != e && this.attr("flood-opacity", e);
+                            },
+                            offset: function (t, e) {
+                                this.attr({ dx: t, dy: e });
+                            },
+                            image: function (t) {
+                                this.attr("href", t, SVG.xlink);
+                            },
+                            displacementMap: function (t, e, i, a, s) {
+                                this.attr({ in: t, in2: e, scale: i, xChannelSelector: a, yChannelSelector: s });
+                            },
+                            gaussianBlur: function (t, e) {
+                                null != t || null != e
+                                    ? this.attr(
+                                          "stdDeviation",
+                                          (function (t) {
+                                              if (!Array.isArray(t)) return t;
+                                              for (var e = 0, i = t.length, a = []; e < i; e++) a.push(t[e]);
+                                              return a.join(" ");
+                                          })(Array.prototype.slice.call(arguments))
+                                      )
+                                    : this.attr("stdDeviation", "0 0");
+                            },
+                            morphology: function (t, e) {
+                                this.attr({ operator: t, radius: e });
+                            },
+                            tile: function () {},
+                            turbulence: function (t, e, i, a, s) {
+                                this.attr({ numOctaves: e, seed: i, stitchTiles: a, baseFrequency: t, type: s });
+                            },
+                        },
+                        i = {
+                            merge: function () {
+                                var t;
+                                if (arguments[0] instanceof SVG.Set) {
+                                    var e = this;
+                                    arguments[0].each(function (t) {
+                                        this instanceof SVG.MergeNode ? e.put(this) : (this instanceof SVG.Effect || this instanceof SVG.ParentEffect) && e.put(new SVG.MergeNode(this));
+                                    });
+                                } else {
+                                    t = Array.isArray(arguments[0]) ? arguments[0] : arguments;
+                                    for (var i = 0; i < t.length; i++) t[i] instanceof SVG.MergeNode ? this.put(t[i]) : this.put(new SVG.MergeNode(t[i]));
+                                }
+                            },
+                            componentTransfer: function (t) {
+                                if (
+                                    ((this.rgb = new SVG.Set()),
+                                    ["r", "g", "b", "a"].forEach(
+                                        function (t) {
+                                            (this[t] = new SVG["Func" + t.toUpperCase()]("identity")), this.rgb.add(this[t]), this.node.appendChild(this[t].node);
+                                        }.bind(this)
+                                    ),
+                                    t)
+                                )
+                                    for (var e in (t.rgb &&
+                                        (["r", "g", "b"].forEach(
+                                            function (e) {
+                                                this[e].attr(t.rgb);
+                                            }.bind(this)
+                                        ),
+                                        delete t.rgb),
+                                    t))
+                                        this[e].attr(t[e]);
+                            },
+                            diffuseLighting: function (t, e, i) {
+                                this.attr({ surfaceScale: t, diffuseConstant: e, kernelUnitLength: i });
+                            },
+                            specularLighting: function (t, e, i, a) {
+                                this.attr({ surfaceScale: t, diffuseConstant: e, specularExponent: i, kernelUnitLength: a });
+                            },
+                        },
+                        a = {
+                            distantLight: function (t, e) {
+                                this.attr({ azimuth: t, elevation: e });
+                            },
+                            pointLight: function (t, e, i) {
+                                this.attr({ x: t, y: e, z: i });
+                            },
+                            spotLight: function (t, e, i, a, s, n) {
+                                this.attr({ x: t, y: e, z: i, pointsAtX: a, pointsAtY: s, pointsAtZ: n });
+                            },
+                            mergeNode: function (t) {
+                                this.attr("in", t);
+                            },
+                        };
+                    function s(t) {
+                        return Array.isArray(t) && (t = new SVG.Array(t)), t.toString().replace(/^\s+/, "").replace(/\s+$/, "").replace(/\s+/g, " ");
+                    }
+                    function n() {
+                        var t = function () {};
+                        for (var e in ("function" == typeof arguments[arguments.length - 1] && ((t = arguments[arguments.length - 1]), Array.prototype.splice.call(arguments, arguments.length - 1, 1)), arguments))
+                            for (var i in arguments[e]) t(arguments[e][i], i, arguments[e]);
+                    }
+                    ["r", "g", "b", "a"].forEach(function (t) {
+                        a["Func" + t.toUpperCase()] = function (t) {
+                            switch ((this.attr("type", t), t)) {
+                                case "table":
+                                    this.attr("tableValues", arguments[1]);
+                                    break;
+                                case "linear":
+                                    this.attr("slope", arguments[1]), this.attr("intercept", arguments[2]);
+                                    break;
+                                case "gamma":
+                                    this.attr("amplitude", arguments[1]), this.attr("exponent", arguments[2]), this.attr("offset", arguments[2]);
+                            }
+                        };
+                    }),
+                        n(e, function (t, e) {
+                            var i = e.charAt(0).toUpperCase() + e.slice(1);
+                            SVG[i + "Effect"] = SVG.invent({
+                                create: function () {
+                                    this.constructor.call(this, SVG.create("fe" + i)), t.apply(this, arguments), this.result(this.attr("id") + "Out");
+                                },
+                                inherit: SVG.Effect,
+                                extend: {},
+                            });
+                        }),
+                        n(i, function (t, e) {
+                            var i = e.charAt(0).toUpperCase() + e.slice(1);
+                            SVG[i + "Effect"] = SVG.invent({
+                                create: function () {
+                                    this.constructor.call(this, SVG.create("fe" + i)), t.apply(this, arguments), this.result(this.attr("id") + "Out");
+                                },
+                                inherit: SVG.ParentEffect,
+                                extend: {},
+                            });
+                        }),
+                        n(a, function (t, e) {
+                            var i = e.charAt(0).toUpperCase() + e.slice(1);
+                            SVG[i] = SVG.invent({
+                                create: function () {
+                                    this.constructor.call(this, SVG.create("fe" + i)), t.apply(this, arguments);
+                                },
+                                inherit: SVG.ChildEffect,
+                                extend: {},
+                            });
+                        }),
+                        SVG.extend(SVG.MergeEffect, {
+                            in: function (t) {
+                                return t instanceof SVG.MergeNode ? this.add(t, 0) : this.add(new SVG.MergeNode(t), 0), this;
+                            },
+                        }),
+                        SVG.extend(SVG.CompositeEffect, SVG.BlendEffect, SVG.DisplacementMapEffect, {
+                            in2: function (t) {
+                                return null == t
+                                    ? (this.parent() &&
+                                          this.parent()
+                                              .select('[result="' + this.attr("in2") + '"]')
+                                              .get(0)) ||
+                                          this.attr("in2")
+                                    : this.attr("in2", t);
+                            },
+                        }),
+                        (SVG.filter = { sepiatone: [0.343, 0.669, 0.119, 0, 0, 0.249, 0.626, 0.13, 0, 0, 0.172, 0.334, 0.111, 0, 0, 0, 0, 0, 1, 0] });
+                }.call(void 0),
+                (function () {
+                    function t(t, s, n, r, o, l, h) {
+                        for (var c = t.slice(s, n || h), d = r.slice(o, l || h), u = 0, f = { pos: [0, 0], start: [0, 0] }, g = { pos: [0, 0], start: [0, 0] }; ; ) {
+                            if (
+                                ((c[u] = e.call(f, c[u])),
+                                (d[u] = e.call(g, d[u])),
+                                c[u][0] != d[u][0] || "M" == c[u][0] || ("A" == c[u][0] && (c[u][4] != d[u][4] || c[u][5] != d[u][5]))
+                                    ? (Array.prototype.splice.apply(c, [u, 1].concat(a.call(f, c[u]))), Array.prototype.splice.apply(d, [u, 1].concat(a.call(g, d[u]))))
+                                    : ((c[u] = i.call(f, c[u])), (d[u] = i.call(g, d[u]))),
+                                ++u == c.length && u == d.length)
+                            )
+                                break;
+                            u == c.length && c.push(["C", f.pos[0], f.pos[1], f.pos[0], f.pos[1], f.pos[0], f.pos[1]]), u == d.length && d.push(["C", g.pos[0], g.pos[1], g.pos[0], g.pos[1], g.pos[0], g.pos[1]]);
+                        }
+                        return { start: c, dest: d };
+                    }
+                    function e(t) {
+                        switch (t[0]) {
+                            case "z":
+                            case "Z":
+                                (t[0] = "L"), (t[1] = this.start[0]), (t[2] = this.start[1]);
+                                break;
+                            case "H":
+                                (t[0] = "L"), (t[2] = this.pos[1]);
+                                break;
+                            case "V":
+                                (t[0] = "L"), (t[2] = t[1]), (t[1] = this.pos[0]);
+                                break;
+                            case "T":
+                                (t[0] = "Q"), (t[3] = t[1]), (t[4] = t[2]), (t[1] = this.reflection[1]), (t[2] = this.reflection[0]);
+                                break;
+                            case "S":
+                                (t[0] = "C"), (t[6] = t[4]), (t[5] = t[3]), (t[4] = t[2]), (t[3] = t[1]), (t[2] = this.reflection[1]), (t[1] = this.reflection[0]);
+                        }
+                        return t;
+                    }
+                    function i(t) {
+                        var e = t.length;
+                        return (this.pos = [t[e - 2], t[e - 1]]), -1 != "SCQT".indexOf(t[0]) && (this.reflection = [2 * this.pos[0] - t[e - 4], 2 * this.pos[1] - t[e - 3]]), t;
+                    }
+                    function a(t) {
+                        var e = [t];
+                        switch (t[0]) {
+                            case "M":
+                                return (this.pos = this.start = [t[1], t[2]]), e;
+                            case "L":
+                                (t[5] = t[3] = t[1]), (t[6] = t[4] = t[2]), (t[1] = this.pos[0]), (t[2] = this.pos[1]);
+                                break;
+                            case "Q":
+                                (t[6] = t[4]),
+                                    (t[5] = t[3]),
+                                    (t[4] = (1 * t[4]) / 3 + (2 * t[2]) / 3),
+                                    (t[3] = (1 * t[3]) / 3 + (2 * t[1]) / 3),
+                                    (t[2] = (1 * this.pos[1]) / 3 + (2 * t[2]) / 3),
+                                    (t[1] = (1 * this.pos[0]) / 3 + (2 * t[1]) / 3);
+                                break;
+                            case "A":
+                                t = (e = (function (t, e) {
+                                    var i,
+                                        a,
+                                        s,
+                                        n,
+                                        r,
+                                        o,
+                                        l,
+                                        h,
+                                        c,
+                                        d,
+                                        u,
+                                        f,
+                                        g,
+                                        p,
+                                        x,
+                                        v,
+                                        m,
+                                        b,
+                                        y,
+                                        w,
+                                        k,
+                                        S,
+                                        A,
+                                        C,
+                                        L,
+                                        E,
+                                        P = Math.abs(e[1]),
+                                        T = Math.abs(e[2]),
+                                        M = e[3] % 360,
+                                        z = e[4],
+                                        I = e[5],
+                                        X = e[6],
+                                        F = e[7],
+                                        Y = new SVG.Point(t),
+                                        O = new SVG.Point(X, F),
+                                        R = [];
+                                    if (0 === P || 0 === T || (Y.x === O.x && Y.y === O.y)) return [["C", Y.x, Y.y, O.x, O.y, O.x, O.y]];
+                                    (i = new SVG.Point((Y.x - O.x) / 2, (Y.y - O.y) / 2).transform(new SVG.Matrix().rotate(M))), (a = (i.x * i.x) / (P * P) + (i.y * i.y) / (T * T)) > 1 && ((a = Math.sqrt(a)), (P *= a), (T *= a));
+                                    (s = new SVG.Matrix()
+                                        .rotate(M)
+                                        .scale(1 / P, 1 / T)
+                                        .rotate(-M)),
+                                        (Y = Y.transform(s)),
+                                        (O = O.transform(s)),
+                                        (n = [O.x - Y.x, O.y - Y.y]),
+                                        (o = n[0] * n[0] + n[1] * n[1]),
+                                        (r = Math.sqrt(o)),
+                                        (n[0] /= r),
+                                        (n[1] /= r),
+                                        (l = o < 4 ? Math.sqrt(1 - o / 4) : 0),
+                                        z === I && (l *= -1);
+                                    (h = new SVG.Point((O.x + Y.x) / 2 + l * -n[1], (O.y + Y.y) / 2 + l * n[0])),
+                                        (c = new SVG.Point(Y.x - h.x, Y.y - h.y)),
+                                        (d = new SVG.Point(O.x - h.x, O.y - h.y)),
+                                        (u = Math.acos(c.x / Math.sqrt(c.x * c.x + c.y * c.y))),
+                                        c.y < 0 && (u *= -1);
+                                    (f = Math.acos(d.x / Math.sqrt(d.x * d.x + d.y * d.y))), d.y < 0 && (f *= -1);
+                                    I && u > f && (f += 2 * Math.PI);
+                                    !I && u < f && (f -= 2 * Math.PI);
+                                    for (p = Math.ceil((2 * Math.abs(u - f)) / Math.PI), v = [], m = u, g = (f - u) / p, x = (4 * Math.tan(g / 4)) / 3, k = 0; k <= p; k++)
+                                        (y = Math.cos(m)), (b = Math.sin(m)), (w = new SVG.Point(h.x + y, h.y + b)), (v[k] = [new SVG.Point(w.x + x * b, w.y - x * y), w, new SVG.Point(w.x - x * b, w.y + x * y)]), (m += g);
+                                    for (v[0][0] = v[0][1].clone(), v[v.length - 1][2] = v[v.length - 1][1].clone(), s = new SVG.Matrix().rotate(M).scale(P, T).rotate(-M), k = 0, S = v.length; k < S; k++)
+                                        (v[k][0] = v[k][0].transform(s)), (v[k][1] = v[k][1].transform(s)), (v[k][2] = v[k][2].transform(s));
+                                    for (k = 1, S = v.length; k < S; k++) (w = v[k - 1][2]), (A = w.x), (C = w.y), (w = v[k][0]), (L = w.x), (E = w.y), (w = v[k][1]), (X = w.x), (F = w.y), R.push(["C", A, C, L, E, X, F]);
+                                    return R;
+                                })(this.pos, t))[0];
+                        }
+                        return (t[0] = "C"), (this.pos = [t[5], t[6]]), (this.reflection = [2 * t[5] - t[3], 2 * t[6] - t[4]]), e;
+                    }
+                    function s(t, e) {
+                        if (!1 === e) return !1;
+                        for (var i = e, a = t.length; i < a; ++i) if ("M" == t[i][0]) return i;
+                        return !1;
+                    }
+                    SVG.extend(SVG.PathArray, {
+                        morph: function (e) {
+                            for (var i = this.value, a = this.parse(e), n = 0, r = 0, o = !1, l = !1; !1 !== n || !1 !== r; ) {
+                                var h;
+                                (o = s(i, !1 !== n && n + 1)),
+                                    (l = s(a, !1 !== r && r + 1)),
+                                    !1 === n && (n = 0 == (h = new SVG.PathArray(c.start).bbox()).height || 0 == h.width ? i.push(i[0]) - 1 : i.push(["M", h.x + h.width / 2, h.y + h.height / 2]) - 1),
+                                    !1 === r && (r = 0 == (h = new SVG.PathArray(c.dest).bbox()).height || 0 == h.width ? a.push(a[0]) - 1 : a.push(["M", h.x + h.width / 2, h.y + h.height / 2]) - 1);
+                                var c = t(i, n, o, a, r, l);
+                                (i = i.slice(0, n).concat(c.start, !1 === o ? [] : i.slice(o))), (a = a.slice(0, r).concat(c.dest, !1 === l ? [] : a.slice(l))), (n = !1 !== o && n + c.start.length), (r = !1 !== l && r + c.dest.length);
+                            }
+                            return (this.value = i), (this.destination = new SVG.PathArray()), (this.destination.value = a), this;
+                        },
+                    });
+                })(),
+                /*! svg.draggable.js - v2.2.2 - 2019-01-08
+                 * https://github.com/svgdotjs/svg.draggable.js
+                 * Copyright (c) 2019 Wout Fierens; Licensed MIT */
+                function () {
+                    function t(t) {
+                        t.remember("_draggable", this), (this.el = t);
+                    }
+                    (t.prototype.init = function (t, e) {
+                        var i = this;
+                        (this.constraint = t),
+                            (this.value = e),
+                            this.el.on("mousedown.drag", function (t) {
+                                i.start(t);
+                            }),
+                            this.el.on("touchstart.drag", function (t) {
+                                i.start(t);
+                            });
+                    }),
+                        (t.prototype.transformPoint = function (t, e) {
+                            var i = ((t = t || window.event).changedTouches && t.changedTouches[0]) || t;
+                            return (this.p.x = i.clientX - (e || 0)), (this.p.y = i.clientY), this.p.matrixTransform(this.m);
+                        }),
+                        (t.prototype.getBBox = function () {
+                            var t = this.el.bbox();
+                            return this.el instanceof SVG.Nested && (t = this.el.rbox()), (this.el instanceof SVG.G || this.el instanceof SVG.Use || this.el instanceof SVG.Nested) && ((t.x = this.el.x()), (t.y = this.el.y())), t;
+                        }),
+                        (t.prototype.start = function (t) {
+                            if (("click" != t.type && "mousedown" != t.type && "mousemove" != t.type) || 1 == (t.which || t.buttons)) {
+                                var e = this;
+                                if ((this.el.fire("beforedrag", { event: t, handler: this }), !this.el.event().defaultPrevented)) {
+                                    t.preventDefault(),
+                                        t.stopPropagation(),
+                                        (this.parent = this.parent || this.el.parent(SVG.Nested) || this.el.parent(SVG.Doc)),
+                                        (this.p = this.parent.node.createSVGPoint()),
+                                        (this.m = this.el.node.getScreenCTM().inverse());
+                                    var i,
+                                        a = this.getBBox();
+                                    if (this.el instanceof SVG.Text)
+                                        switch (((i = this.el.node.getComputedTextLength()), this.el.attr("text-anchor"))) {
+                                            case "middle":
+                                                i /= 2;
+                                                break;
+                                            case "start":
+                                                i = 0;
+                                        }
+                                    (this.startPoints = { point: this.transformPoint(t, i), box: a, transform: this.el.transform() }),
+                                        SVG.on(window, "mousemove.drag", function (t) {
+                                            e.drag(t);
+                                        }),
+                                        SVG.on(window, "touchmove.drag", function (t) {
+                                            e.drag(t);
+                                        }),
+                                        SVG.on(window, "mouseup.drag", function (t) {
+                                            e.end(t);
+                                        }),
+                                        SVG.on(window, "touchend.drag", function (t) {
+                                            e.end(t);
+                                        }),
+                                        this.el.fire("dragstart", { event: t, p: this.startPoints.point, m: this.m, handler: this });
+                                }
+                            }
+                        }),
+                        (t.prototype.drag = function (t) {
+                            var e = this.getBBox(),
+                                i = this.transformPoint(t),
+                                a = this.startPoints.box.x + i.x - this.startPoints.point.x,
+                                s = this.startPoints.box.y + i.y - this.startPoints.point.y,
+                                n = this.constraint,
+                                r = i.x - this.startPoints.point.x,
+                                o = i.y - this.startPoints.point.y;
+                            if ((this.el.fire("dragmove", { event: t, p: i, m: this.m, handler: this }), this.el.event().defaultPrevented)) return i;
+                            if ("function" == typeof n) {
+                                var l = n.call(this.el, a, s, this.m);
+                                "boolean" == typeof l && (l = { x: l, y: l }), !0 === l.x ? this.el.x(a) : !1 !== l.x && this.el.x(l.x), !0 === l.y ? this.el.y(s) : !1 !== l.y && this.el.y(l.y);
+                            } else
+                                "object" == typeof n &&
+                                    (null != n.minX && a < n.minX ? (r = (a = n.minX) - this.startPoints.box.x) : null != n.maxX && a > n.maxX - e.width && (r = (a = n.maxX - e.width) - this.startPoints.box.x),
+                                    null != n.minY && s < n.minY ? (o = (s = n.minY) - this.startPoints.box.y) : null != n.maxY && s > n.maxY - e.height && (o = (s = n.maxY - e.height) - this.startPoints.box.y),
+                                    null != n.snapToGrid && ((a -= a % n.snapToGrid), (s -= s % n.snapToGrid), (r -= r % n.snapToGrid), (o -= o % n.snapToGrid)),
+                                    this.el instanceof SVG.G ? this.el.matrix(this.startPoints.transform).transform({ x: r, y: o }, !0) : this.el.move(a, s));
+                            return i;
+                        }),
+                        (t.prototype.end = function (t) {
+                            var e = this.drag(t);
+                            this.el.fire("dragend", { event: t, p: e, m: this.m, handler: this }), SVG.off(window, "mousemove.drag"), SVG.off(window, "touchmove.drag"), SVG.off(window, "mouseup.drag"), SVG.off(window, "touchend.drag");
+                        }),
+                        SVG.extend(SVG.Element, {
+                            draggable: function (e, i) {
+                                ("function" != typeof e && "object" != typeof e) || ((i = e), (e = !0));
+                                var a = this.remember("_draggable") || new t(this);
+                                return (e = void 0 === e || e) ? a.init(i || {}, e) : (this.off("mousedown.drag"), this.off("touchstart.drag")), this;
+                            },
+                        });
+                }.call(void 0),
+                (function () {
+                    function t(t) {
+                        (this.el = t), t.remember("_selectHandler", this), (this.pointSelection = { isSelected: !1 }), (this.rectSelection = { isSelected: !1 });
+                    }
+                    (t.prototype.init = function (t, e) {
+                        var i = this.el.bbox();
+                        for (var a in ((this.options = {}), this.el.selectize.defaults)) (this.options[a] = this.el.selectize.defaults[a]), void 0 !== e[a] && (this.options[a] = e[a]);
+                        (this.parent = this.el.parent()),
+                            (this.nested = this.nested || this.parent.group()),
+                            this.nested.matrix(new SVG.Matrix(this.el).translate(i.x, i.y)),
+                            this.options.deepSelect && -1 !== ["line", "polyline", "polygon"].indexOf(this.el.type) ? this.selectPoints(t) : this.selectRect(t),
+                            this.observe(),
+                            this.cleanup();
+                    }),
+                        (t.prototype.selectPoints = function (t) {
+                            return (this.pointSelection.isSelected = t), this.pointSelection.set ? this : ((this.pointSelection.set = this.parent.set()), this.drawCircles(), this);
+                        }),
+                        (t.prototype.getPointArray = function () {
+                            var t = this.el.bbox();
+                            return this.el
+                                .array()
+                                .valueOf()
+                                .map(function (e) {
+                                    return [e[0] - t.x, e[1] - t.y];
+                                });
+                        }),
+                        (t.prototype.drawCircles = function () {
+                            for (var t = this, e = this.getPointArray(), i = 0, a = e.length; i < a; ++i) {
+                                var s = (function (e) {
+                                    return function (i) {
+                                        (i = i || window.event).preventDefault ? i.preventDefault() : (i.returnValue = !1), i.stopPropagation();
+                                        var a = i.pageX || i.touches[0].pageX,
+                                            s = i.pageY || i.touches[0].pageY;
+                                        t.el.fire("point", { x: a, y: s, i: e, event: i });
+                                    };
+                                })(i);
+                                this.pointSelection.set.add(
+                                    this.nested
+                                        .circle(this.options.radius)
+                                        .center(e[i][0], e[i][1])
+                                        .addClass(this.options.classPoints)
+                                        .addClass(this.options.classPoints + "_point")
+                                        .on("touchstart", s)
+                                        .on("mousedown", s)
+                                );
+                            }
+                        }),
+                        (t.prototype.updatePointSelection = function () {
+                            var t = this.getPointArray();
+                            this.pointSelection.set.each(function (e) {
+                                (this.cx() === t[e][0] && this.cy() === t[e][1]) || this.center(t[e][0], t[e][1]);
+                            });
+                        }),
+                        (t.prototype.updateRectSelection = function () {
+                            var t = this.el.bbox();
+                            this.rectSelection.set.get(0).attr({ width: t.width, height: t.height }),
+                                this.options.points &&
+                                    (this.rectSelection.set.get(2).center(t.width, 0),
+                                    this.rectSelection.set.get(3).center(t.width, t.height),
+                                    this.rectSelection.set.get(4).center(0, t.height),
+                                    this.rectSelection.set.get(5).center(t.width / 2, 0),
+                                    this.rectSelection.set.get(6).center(t.width, t.height / 2),
+                                    this.rectSelection.set.get(7).center(t.width / 2, t.height),
+                                    this.rectSelection.set.get(8).center(0, t.height / 2)),
+                                this.options.rotationPoint && (this.options.points ? this.rectSelection.set.get(9).center(t.width / 2, 20) : this.rectSelection.set.get(1).center(t.width / 2, 20));
+                        }),
+                        (t.prototype.selectRect = function (t) {
+                            var e = this,
+                                i = this.el.bbox();
+                            function a(t) {
+                                return function (i) {
+                                    (i = i || window.event).preventDefault ? i.preventDefault() : (i.returnValue = !1), i.stopPropagation();
+                                    var a = i.pageX || i.touches[0].pageX,
+                                        s = i.pageY || i.touches[0].pageY;
+                                    e.el.fire(t, { x: a, y: s, event: i });
+                                };
+                            }
+                            if (
+                                ((this.rectSelection.isSelected = t),
+                                (this.rectSelection.set = this.rectSelection.set || this.parent.set()),
+                                this.rectSelection.set.get(0) || this.rectSelection.set.add(this.nested.rect(i.width, i.height).addClass(this.options.classRect)),
+                                this.options.points && !this.rectSelection.set.get(1))
+                            ) {
+                                var s = "touchstart",
+                                    n = "mousedown";
+                                this.rectSelection.set.add(
+                                    this.nested
+                                        .circle(this.options.radius)
+                                        .center(0, 0)
+                                        .attr("class", this.options.classPoints + "_lt")
+                                        .on(n, a("lt"))
+                                        .on(s, a("lt"))
+                                ),
+                                    this.rectSelection.set.add(
+                                        this.nested
+                                            .circle(this.options.radius)
+                                            .center(i.width, 0)
+                                            .attr("class", this.options.classPoints + "_rt")
+                                            .on(n, a("rt"))
+                                            .on(s, a("rt"))
+                                    ),
+                                    this.rectSelection.set.add(
+                                        this.nested
+                                            .circle(this.options.radius)
+                                            .center(i.width, i.height)
+                                            .attr("class", this.options.classPoints + "_rb")
+                                            .on(n, a("rb"))
+                                            .on(s, a("rb"))
+                                    ),
+                                    this.rectSelection.set.add(
+                                        this.nested
+                                            .circle(this.options.radius)
+                                            .center(0, i.height)
+                                            .attr("class", this.options.classPoints + "_lb")
+                                            .on(n, a("lb"))
+                                            .on(s, a("lb"))
+                                    ),
+                                    this.rectSelection.set.add(
+                                        this.nested
+                                            .circle(this.options.radius)
+                                            .center(i.width / 2, 0)
+                                            .attr("class", this.options.classPoints + "_t")
+                                            .on(n, a("t"))
+                                            .on(s, a("t"))
+                                    ),
+                                    this.rectSelection.set.add(
+                                        this.nested
+                                            .circle(this.options.radius)
+                                            .center(i.width, i.height / 2)
+                                            .attr("class", this.options.classPoints + "_r")
+                                            .on(n, a("r"))
+                                            .on(s, a("r"))
+                                    ),
+                                    this.rectSelection.set.add(
+                                        this.nested
+                                            .circle(this.options.radius)
+                                            .center(i.width / 2, i.height)
+                                            .attr("class", this.options.classPoints + "_b")
+                                            .on(n, a("b"))
+                                            .on(s, a("b"))
+                                    ),
+                                    this.rectSelection.set.add(
+                                        this.nested
+                                            .circle(this.options.radius)
+                                            .center(0, i.height / 2)
+                                            .attr("class", this.options.classPoints + "_l")
+                                            .on(n, a("l"))
+                                            .on(s, a("l"))
+                                    ),
+                                    this.rectSelection.set.each(function () {
+                                        this.addClass(e.options.classPoints);
+                                    });
+                            }
+                            if (this.options.rotationPoint && ((this.options.points && !this.rectSelection.set.get(9)) || (!this.options.points && !this.rectSelection.set.get(1)))) {
+                                var r = function (t) {
+                                    (t = t || window.event).preventDefault ? t.preventDefault() : (t.returnValue = !1), t.stopPropagation();
+                                    var i = t.pageX || t.touches[0].pageX,
+                                        a = t.pageY || t.touches[0].pageY;
+                                    e.el.fire("rot", { x: i, y: a, event: t });
+                                };
+                                this.rectSelection.set.add(
+                                    this.nested
+                                        .circle(this.options.radius)
+                                        .center(i.width / 2, 20)
+                                        .attr("class", this.options.classPoints + "_rot")
+                                        .on("touchstart", r)
+                                        .on("mousedown", r)
+                                );
+                            }
+                        }),
+                        (t.prototype.handler = function () {
+                            var t = this.el.bbox();
+                            this.nested.matrix(new SVG.Matrix(this.el).translate(t.x, t.y)), this.rectSelection.isSelected && this.updateRectSelection(), this.pointSelection.isSelected && this.updatePointSelection();
+                        }),
+                        (t.prototype.observe = function () {
+                            var t = this;
+                            if (MutationObserver)
+                                if (this.rectSelection.isSelected || this.pointSelection.isSelected)
+                                    (this.observerInst =
+                                        this.observerInst ||
+                                        new MutationObserver(function () {
+                                            t.handler();
+                                        })),
+                                        this.observerInst.observe(this.el.node, { attributes: !0 });
+                                else
+                                    try {
+                                        this.observerInst.disconnect(), delete this.observerInst;
+                                    } catch (t) {}
+                            else
+                                this.el.off("DOMAttrModified.select"),
+                                    (this.rectSelection.isSelected || this.pointSelection.isSelected) &&
+                                        this.el.on("DOMAttrModified.select", function () {
+                                            t.handler();
+                                        });
+                        }),
+                        (t.prototype.cleanup = function () {
+                            !this.rectSelection.isSelected &&
+                                this.rectSelection.set &&
+                                (this.rectSelection.set.each(function () {
+                                    this.remove();
+                                }),
+                                this.rectSelection.set.clear(),
+                                delete this.rectSelection.set),
+                                !this.pointSelection.isSelected &&
+                                    this.pointSelection.set &&
+                                    (this.pointSelection.set.each(function () {
+                                        this.remove();
+                                    }),
+                                    this.pointSelection.set.clear(),
+                                    delete this.pointSelection.set),
+                                this.pointSelection.isSelected || this.rectSelection.isSelected || (this.nested.remove(), delete this.nested);
+                        }),
+                        SVG.extend(SVG.Element, {
+                            selectize: function (e, i) {
+                                return "object" == typeof e && ((i = e), (e = !0)), (this.remember("_selectHandler") || new t(this)).init(void 0 === e || e, i || {}), this;
+                            },
+                        }),
+                        (SVG.Element.prototype.selectize.defaults = { points: !0, classRect: "svg_select_boundingRect", classPoints: "svg_select_points", radius: 7, rotationPoint: !0, deepSelect: !1 });
+                })(),
+                (function () {
+                    (function () {
+                        function t(t) {
+                            t.remember("_resizeHandler", this), (this.el = t), (this.parameters = {}), (this.lastUpdateCall = null), (this.p = t.doc().node.createSVGPoint());
+                        }
+                        (t.prototype.transformPoint = function (t, e, i) {
+                            return (this.p.x = t - (this.offset.x - window.pageXOffset)), (this.p.y = e - (this.offset.y - window.pageYOffset)), this.p.matrixTransform(i || this.m);
+                        }),
+                            (t.prototype._extractPosition = function (t) {
+                                return { x: null != t.clientX ? t.clientX : t.touches[0].clientX, y: null != t.clientY ? t.clientY : t.touches[0].clientY };
+                            }),
+                            (t.prototype.init = function (t) {
+                                var e = this;
+                                if ((this.stop(), "stop" !== t)) {
+                                    for (var i in ((this.options = {}), this.el.resize.defaults)) (this.options[i] = this.el.resize.defaults[i]), void 0 !== t[i] && (this.options[i] = t[i]);
+                                    this.el.on("lt.resize", function (t) {
+                                        e.resize(t || window.event);
+                                    }),
+                                        this.el.on("rt.resize", function (t) {
+                                            e.resize(t || window.event);
+                                        }),
+                                        this.el.on("rb.resize", function (t) {
+                                            e.resize(t || window.event);
+                                        }),
+                                        this.el.on("lb.resize", function (t) {
+                                            e.resize(t || window.event);
+                                        }),
+                                        this.el.on("t.resize", function (t) {
+                                            e.resize(t || window.event);
+                                        }),
+                                        this.el.on("r.resize", function (t) {
+                                            e.resize(t || window.event);
+                                        }),
+                                        this.el.on("b.resize", function (t) {
+                                            e.resize(t || window.event);
+                                        }),
+                                        this.el.on("l.resize", function (t) {
+                                            e.resize(t || window.event);
+                                        }),
+                                        this.el.on("rot.resize", function (t) {
+                                            e.resize(t || window.event);
+                                        }),
+                                        this.el.on("point.resize", function (t) {
+                                            e.resize(t || window.event);
+                                        }),
+                                        this.update();
+                                }
+                            }),
+                            (t.prototype.stop = function () {
+                                return (
+                                    this.el.off("lt.resize"),
+                                    this.el.off("rt.resize"),
+                                    this.el.off("rb.resize"),
+                                    this.el.off("lb.resize"),
+                                    this.el.off("t.resize"),
+                                    this.el.off("r.resize"),
+                                    this.el.off("b.resize"),
+                                    this.el.off("l.resize"),
+                                    this.el.off("rot.resize"),
+                                    this.el.off("point.resize"),
+                                    this
+                                );
+                            }),
+                            (t.prototype.resize = function (t) {
+                                var e = this;
+                                (this.m = this.el.node.getScreenCTM().inverse()), (this.offset = { x: window.pageXOffset, y: window.pageYOffset });
+                                var i = this._extractPosition(t.detail.event);
+                                if (
+                                    ((this.parameters = { type: this.el.type, p: this.transformPoint(i.x, i.y), x: t.detail.x, y: t.detail.y, box: this.el.bbox(), rotation: this.el.transform().rotation }),
+                                    "text" === this.el.type && (this.parameters.fontSize = this.el.attr()["font-size"]),
+                                    void 0 !== t.detail.i)
+                                ) {
+                                    var a = this.el.array().valueOf();
+                                    (this.parameters.i = t.detail.i), (this.parameters.pointCoords = [a[t.detail.i][0], a[t.detail.i][1]]);
+                                }
+                                switch (t.type) {
+                                    case "lt":
+                                        this.calc = function (t, e) {
+                                            var i = this.snapToGrid(t, e);
+                                            if (this.parameters.box.width - i[0] > 0 && this.parameters.box.height - i[1] > 0) {
+                                                if ("text" === this.parameters.type) return this.el.move(this.parameters.box.x + i[0], this.parameters.box.y), void this.el.attr("font-size", this.parameters.fontSize - i[0]);
+                                                (i = this.checkAspectRatio(i)), this.el.move(this.parameters.box.x + i[0], this.parameters.box.y + i[1]).size(this.parameters.box.width - i[0], this.parameters.box.height - i[1]);
+                                            }
+                                        };
+                                        break;
+                                    case "rt":
+                                        this.calc = function (t, e) {
+                                            var i = this.snapToGrid(t, e, 2);
+                                            if (this.parameters.box.width + i[0] > 0 && this.parameters.box.height - i[1] > 0) {
+                                                if ("text" === this.parameters.type) return this.el.move(this.parameters.box.x - i[0], this.parameters.box.y), void this.el.attr("font-size", this.parameters.fontSize + i[0]);
+                                                (i = this.checkAspectRatio(i, !0)), this.el.move(this.parameters.box.x, this.parameters.box.y + i[1]).size(this.parameters.box.width + i[0], this.parameters.box.height - i[1]);
+                                            }
+                                        };
+                                        break;
+                                    case "rb":
+                                        this.calc = function (t, e) {
+                                            var i = this.snapToGrid(t, e, 0);
+                                            if (this.parameters.box.width + i[0] > 0 && this.parameters.box.height + i[1] > 0) {
+                                                if ("text" === this.parameters.type) return this.el.move(this.parameters.box.x - i[0], this.parameters.box.y), void this.el.attr("font-size", this.parameters.fontSize + i[0]);
+                                                (i = this.checkAspectRatio(i)), this.el.move(this.parameters.box.x, this.parameters.box.y).size(this.parameters.box.width + i[0], this.parameters.box.height + i[1]);
+                                            }
+                                        };
+                                        break;
+                                    case "lb":
+                                        this.calc = function (t, e) {
+                                            var i = this.snapToGrid(t, e, 1);
+                                            if (this.parameters.box.width - i[0] > 0 && this.parameters.box.height + i[1] > 0) {
+                                                if ("text" === this.parameters.type) return this.el.move(this.parameters.box.x + i[0], this.parameters.box.y), void this.el.attr("font-size", this.parameters.fontSize - i[0]);
+                                                (i = this.checkAspectRatio(i, !0)), this.el.move(this.parameters.box.x + i[0], this.parameters.box.y).size(this.parameters.box.width - i[0], this.parameters.box.height + i[1]);
+                                            }
+                                        };
+                                        break;
+                                    case "t":
+                                        this.calc = function (t, e) {
+                                            var i = this.snapToGrid(t, e, 2);
+                                            if (this.parameters.box.height - i[1] > 0) {
+                                                if ("text" === this.parameters.type) return;
+                                                this.el.move(this.parameters.box.x, this.parameters.box.y + i[1]).height(this.parameters.box.height - i[1]);
+                                            }
+                                        };
+                                        break;
+                                    case "r":
+                                        this.calc = function (t, e) {
+                                            var i = this.snapToGrid(t, e, 0);
+                                            if (this.parameters.box.width + i[0] > 0) {
+                                                if ("text" === this.parameters.type) return;
+                                                this.el.move(this.parameters.box.x, this.parameters.box.y).width(this.parameters.box.width + i[0]);
+                                            }
+                                        };
+                                        break;
+                                    case "b":
+                                        this.calc = function (t, e) {
+                                            var i = this.snapToGrid(t, e, 0);
+                                            if (this.parameters.box.height + i[1] > 0) {
+                                                if ("text" === this.parameters.type) return;
+                                                this.el.move(this.parameters.box.x, this.parameters.box.y).height(this.parameters.box.height + i[1]);
+                                            }
+                                        };
+                                        break;
+                                    case "l":
+                                        this.calc = function (t, e) {
+                                            var i = this.snapToGrid(t, e, 1);
+                                            if (this.parameters.box.width - i[0] > 0) {
+                                                if ("text" === this.parameters.type) return;
+                                                this.el.move(this.parameters.box.x + i[0], this.parameters.box.y).width(this.parameters.box.width - i[0]);
+                                            }
+                                        };
+                                        break;
+                                    case "rot":
+                                        this.calc = function (t, e) {
+                                            var i = t + this.parameters.p.x,
+                                                a = e + this.parameters.p.y,
+                                                s = Math.atan2(this.parameters.p.y - this.parameters.box.y - this.parameters.box.height / 2, this.parameters.p.x - this.parameters.box.x - this.parameters.box.width / 2),
+                                                n = Math.atan2(a - this.parameters.box.y - this.parameters.box.height / 2, i - this.parameters.box.x - this.parameters.box.width / 2),
+                                                r = this.parameters.rotation + (180 * (n - s)) / Math.PI + this.options.snapToAngle / 2;
+                                            this.el.center(this.parameters.box.cx, this.parameters.box.cy).rotate(r - (r % this.options.snapToAngle), this.parameters.box.cx, this.parameters.box.cy);
+                                        };
+                                        break;
+                                    case "point":
+                                        this.calc = function (t, e) {
+                                            var i = this.snapToGrid(t, e, this.parameters.pointCoords[0], this.parameters.pointCoords[1]),
+                                                a = this.el.array().valueOf();
+                                            (a[this.parameters.i][0] = this.parameters.pointCoords[0] + i[0]), (a[this.parameters.i][1] = this.parameters.pointCoords[1] + i[1]), this.el.plot(a);
+                                        };
+                                }
+                                this.el.fire("resizestart", { dx: this.parameters.x, dy: this.parameters.y, event: t }),
+                                    SVG.on(window, "touchmove.resize", function (t) {
+                                        e.update(t || window.event);
+                                    }),
+                                    SVG.on(window, "touchend.resize", function () {
+                                        e.done();
+                                    }),
+                                    SVG.on(window, "mousemove.resize", function (t) {
+                                        e.update(t || window.event);
+                                    }),
+                                    SVG.on(window, "mouseup.resize", function () {
+                                        e.done();
+                                    });
+                            }),
+                            (t.prototype.update = function (t) {
+                                if (t) {
+                                    var e = this._extractPosition(t),
+                                        i = this.transformPoint(e.x, e.y),
+                                        a = i.x - this.parameters.p.x,
+                                        s = i.y - this.parameters.p.y;
+                                    (this.lastUpdateCall = [a, s]), this.calc(a, s), this.el.fire("resizing", { dx: a, dy: s, event: t });
+                                } else this.lastUpdateCall && this.calc(this.lastUpdateCall[0], this.lastUpdateCall[1]);
+                            }),
+                            (t.prototype.done = function () {
+                                (this.lastUpdateCall = null), SVG.off(window, "mousemove.resize"), SVG.off(window, "mouseup.resize"), SVG.off(window, "touchmove.resize"), SVG.off(window, "touchend.resize"), this.el.fire("resizedone");
+                            }),
+                            (t.prototype.snapToGrid = function (t, e, i, a) {
+                                var s;
+                                return (
+                                    void 0 !== a
+                                        ? (s = [(i + t) % this.options.snapToGrid, (a + e) % this.options.snapToGrid])
+                                        : ((i = null == i ? 3 : i),
+                                          (s = [
+                                              (this.parameters.box.x + t + (1 & i ? 0 : this.parameters.box.width)) % this.options.snapToGrid,
+                                              (this.parameters.box.y + e + (2 & i ? 0 : this.parameters.box.height)) % this.options.snapToGrid,
+                                          ])),
+                                    t < 0 && (s[0] -= this.options.snapToGrid),
+                                    e < 0 && (s[1] -= this.options.snapToGrid),
+                                    (t -= Math.abs(s[0]) < this.options.snapToGrid / 2 ? s[0] : s[0] - (t < 0 ? -this.options.snapToGrid : this.options.snapToGrid)),
+                                    (e -= Math.abs(s[1]) < this.options.snapToGrid / 2 ? s[1] : s[1] - (e < 0 ? -this.options.snapToGrid : this.options.snapToGrid)),
+                                    this.constraintToBox(t, e, i, a)
+                                );
+                            }),
+                            (t.prototype.constraintToBox = function (t, e, i, a) {
+                                var s,
+                                    n,
+                                    r = this.options.constraint || {};
+                                return (
+                                    void 0 !== a ? ((s = i), (n = a)) : ((s = this.parameters.box.x + (1 & i ? 0 : this.parameters.box.width)), (n = this.parameters.box.y + (2 & i ? 0 : this.parameters.box.height))),
+                                    void 0 !== r.minX && s + t < r.minX && (t = r.minX - s),
+                                    void 0 !== r.maxX && s + t > r.maxX && (t = r.maxX - s),
+                                    void 0 !== r.minY && n + e < r.minY && (e = r.minY - n),
+                                    void 0 !== r.maxY && n + e > r.maxY && (e = r.maxY - n),
+                                    [t, e]
+                                );
+                            }),
+                            (t.prototype.checkAspectRatio = function (t, e) {
+                                if (!this.options.saveAspectRatio) return t;
+                                var i = t.slice(),
+                                    a = this.parameters.box.width / this.parameters.box.height,
+                                    s = this.parameters.box.width + t[0],
+                                    n = this.parameters.box.height - t[1],
+                                    r = s / n;
+                                return r < a ? ((i[1] = s / a - this.parameters.box.height), e && (i[1] = -i[1])) : r > a && ((i[0] = this.parameters.box.width - n * a), e && (i[0] = -i[0])), i;
+                            }),
+                            SVG.extend(SVG.Element, {
+                                resize: function (e) {
+                                    return (this.remember("_resizeHandler") || new t(this)).init(e || {}), this;
+                                },
+                            }),
+                            (SVG.Element.prototype.resize.defaults = { snapToAngle: 0.1, snapToGrid: 1, constraint: {}, saveAspectRatio: !1 });
+                    }.call(this));
+                })();
+            !(function (t, e) {
+                void 0 === e && (e = {});
+                var i = e.insertAt;
+                if (t && "undefined" != typeof document) {
+                    var a = document.head || document.getElementsByTagName("head")[0],
+                        s = document.createElement("style");
+                    (s.type = "text/css"), "top" === i && a.firstChild ? a.insertBefore(s, a.firstChild) : a.appendChild(s), s.styleSheet ? (s.styleSheet.cssText = t) : s.appendChild(document.createTextNode(t));
+                }
+            })(
+                '.apexcharts-canvas {\n  position: relative;\n  user-select: none;\n  /* cannot give overflow: hidden as it will crop tooltips which overflow outside chart area */\n}\n\n/* scrollbar is not visible by default for legend, hence forcing the visibility */\n.apexcharts-canvas ::-webkit-scrollbar {\n  -webkit-appearance: none;\n  width: 6px;\n}\n.apexcharts-canvas ::-webkit-scrollbar-thumb {\n  border-radius: 4px;\n  background-color: rgba(0,0,0,.5);\n  box-shadow: 0 0 1px rgba(255,255,255,.5);\n  -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);\n}\n.apexcharts-canvas.dark {\n  background: #343F57;\n}\n\n.apexcharts-inner {\n  position: relative;\n}\n\n.legend-mouseover-inactive {\n  transition: 0.15s ease all;\n  opacity: 0.20;\n}\n\n.apexcharts-series-collapsed {\n  opacity: 0;\n}\n\n.apexcharts-gridline, .apexcharts-text {\n  pointer-events: none;\n}\n\n.apexcharts-tooltip {\n  border-radius: 5px;\n  box-shadow: 2px 2px 6px -4px #999;\n  cursor: default;\n  font-size: 14px;\n  left: 62px;\n  opacity: 0;\n  pointer-events: none;\n  position: absolute;\n  top: 20px;\n  overflow: hidden;\n  white-space: nowrap;\n  z-index: 12;\n  transition: 0.15s ease all;\n}\n.apexcharts-tooltip.light {\n  border: 1px solid #e3e3e3;\n  background: rgba(255, 255, 255, 0.96);\n}\n.apexcharts-tooltip.dark {\n  color: #fff;\n  background: rgba(30,30,30, 0.8);\n}\n.apexcharts-tooltip * {\n  font-family: inherit;\n}\n\n.apexcharts-tooltip .apexcharts-marker,\n.apexcharts-area-series .apexcharts-area,\n.apexcharts-line {\n  pointer-events: none;\n}\n\n.apexcharts-tooltip.active {\n  opacity: 1;\n  transition: 0.15s ease all;\n}\n\n.apexcharts-tooltip-title {\n  padding: 6px;\n  font-size: 15px;\n  margin-bottom: 4px;\n}\n.apexcharts-tooltip.light .apexcharts-tooltip-title {\n  background: #ECEFF1;\n  border-bottom: 1px solid #ddd;\n}\n.apexcharts-tooltip.dark .apexcharts-tooltip-title {\n  background: rgba(0, 0, 0, 0.7);\n  border-bottom: 1px solid #333;\n}\n\n.apexcharts-tooltip-text-value,\n.apexcharts-tooltip-text-z-value {\n  display: inline-block;\n  font-weight: 600;\n  margin-left: 5px;\n}\n\n.apexcharts-tooltip-text-z-label:empty,\n.apexcharts-tooltip-text-z-value:empty {\n  display: none;\n}\n\n.apexcharts-tooltip-text-value, \n.apexcharts-tooltip-text-z-value {\n  font-weight: 600;\n}\n\n.apexcharts-tooltip-marker {\n  width: 12px;\n  height: 12px;\n  position: relative;\n  top: 0px;\n  margin-right: 10px;\n  border-radius: 50%;\n}\n\n.apexcharts-tooltip-series-group {\n  padding: 0 10px;\n  display: none;\n  text-align: left;\n  justify-content: left;\n  align-items: center;\n}\n\n.apexcharts-tooltip-series-group.active .apexcharts-tooltip-marker {\n  opacity: 1;\n}\n.apexcharts-tooltip-series-group.active, .apexcharts-tooltip-series-group:last-child {\n  padding-bottom: 4px;\n}\n.apexcharts-tooltip-series-group-hidden {\n  opacity: 0;\n  height: 0;\n  line-height: 0;\n  padding: 0 !important;\n}\n.apexcharts-tooltip-y-group {\n  padding: 6px 0 5px;\n}\n.apexcharts-tooltip-candlestick {\n  padding: 4px 8px;\n}\n.apexcharts-tooltip-candlestick > div {\n  margin: 4px 0;\n}\n.apexcharts-tooltip-candlestick span.value {\n  font-weight: bold;\n}\n\n.apexcharts-tooltip-rangebar {\n  padding: 5px 8px;\n}\n\n.apexcharts-tooltip-rangebar .category {\n  font-weight: 600;\n  color: #777;\n}\n\n.apexcharts-tooltip-rangebar .series-name {\n  font-weight: bold;\n  display: block;\n  margin-bottom: 5px;\n}\n\n.apexcharts-xaxistooltip {\n  opacity: 0;\n  padding: 9px 10px;\n  pointer-events: none;\n  color: #373d3f;\n  font-size: 13px;\n  text-align: center;\n  border-radius: 2px;\n  position: absolute;\n  z-index: 10;\n\tbackground: #ECEFF1;\n  border: 1px solid #90A4AE;\n  transition: 0.15s ease all;\n}\n\n.apexcharts-xaxistooltip.dark {\n  background: rgba(0, 0, 0, 0.7);\n  border: 1px solid rgba(0, 0, 0, 0.5);\n  color: #fff;\n}\n\n.apexcharts-xaxistooltip:after, .apexcharts-xaxistooltip:before {\n\tleft: 50%;\n\tborder: solid transparent;\n\tcontent: " ";\n\theight: 0;\n\twidth: 0;\n\tposition: absolute;\n\tpointer-events: none;\n}\n\n.apexcharts-xaxistooltip:after {\n\tborder-color: rgba(236, 239, 241, 0);\n\tborder-width: 6px;\n\tmargin-left: -6px;\n}\n.apexcharts-xaxistooltip:before {\n\tborder-color: rgba(144, 164, 174, 0);\n\tborder-width: 7px;\n\tmargin-left: -7px;\n}\n\n.apexcharts-xaxistooltip-bottom:after, .apexcharts-xaxistooltip-bottom:before {\n  bottom: 100%;\n}\n\n.apexcharts-xaxistooltip-top:after, .apexcharts-xaxistooltip-top:before {\n  top: 100%;\n}\n\n.apexcharts-xaxistooltip-bottom:after {\n  border-bottom-color: #ECEFF1;\n}\n.apexcharts-xaxistooltip-bottom:before {\n  border-bottom-color: #90A4AE;\n}\n\n.apexcharts-xaxistooltip-bottom.dark:after {\n  border-bottom-color: rgba(0, 0, 0, 0.5);\n}\n.apexcharts-xaxistooltip-bottom.dark:before {\n  border-bottom-color: rgba(0, 0, 0, 0.5);\n}\n\n.apexcharts-xaxistooltip-top:after {\n  border-top-color:#ECEFF1\n}\n.apexcharts-xaxistooltip-top:before {\n  border-top-color: #90A4AE;\n}\n.apexcharts-xaxistooltip-top.dark:after {\n  border-top-color:rgba(0, 0, 0, 0.5);\n}\n.apexcharts-xaxistooltip-top.dark:before {\n  border-top-color: rgba(0, 0, 0, 0.5);\n}\n\n\n.apexcharts-xaxistooltip.active {\n  opacity: 1;\n  transition: 0.15s ease all;\n}\n\n.apexcharts-yaxistooltip {\n  opacity: 0;\n  padding: 4px 10px;\n  pointer-events: none;\n  color: #373d3f;\n  font-size: 13px;\n  text-align: center;\n  border-radius: 2px;\n  position: absolute;\n  z-index: 10;\n\tbackground: #ECEFF1;\n  border: 1px solid #90A4AE;\n}\n\n.apexcharts-yaxistooltip.dark {\n  background: rgba(0, 0, 0, 0.7);\n  border: 1px solid rgba(0, 0, 0, 0.5);\n  color: #fff;\n}\n\n.apexcharts-yaxistooltip:after, .apexcharts-yaxistooltip:before {\n\ttop: 50%;\n\tborder: solid transparent;\n\tcontent: " ";\n\theight: 0;\n\twidth: 0;\n\tposition: absolute;\n\tpointer-events: none;\n}\n.apexcharts-yaxistooltip:after {\n\tborder-color: rgba(236, 239, 241, 0);\n\tborder-width: 6px;\n\tmargin-top: -6px;\n}\n.apexcharts-yaxistooltip:before {\n\tborder-color: rgba(144, 164, 174, 0);\n\tborder-width: 7px;\n\tmargin-top: -7px;\n}\n\n.apexcharts-yaxistooltip-left:after, .apexcharts-yaxistooltip-left:before {\n  left: 100%;\n}\n\n.apexcharts-yaxistooltip-right:after, .apexcharts-yaxistooltip-right:before {\n  right: 100%;\n}\n\n.apexcharts-yaxistooltip-left:after {\n  border-left-color: #ECEFF1;\n}\n.apexcharts-yaxistooltip-left:before {\n  border-left-color: #90A4AE;\n}\n.apexcharts-yaxistooltip-left.dark:after {\n  border-left-color: rgba(0, 0, 0, 0.5);\n}\n.apexcharts-yaxistooltip-left.dark:before {\n  border-left-color: rgba(0, 0, 0, 0.5);\n}\n\n.apexcharts-yaxistooltip-right:after {\n  border-right-color: #ECEFF1;\n}\n.apexcharts-yaxistooltip-right:before {\n  border-right-color: #90A4AE;\n}\n.apexcharts-yaxistooltip-right.dark:after {\n  border-right-color: rgba(0, 0, 0, 0.5);\n}\n.apexcharts-yaxistooltip-right.dark:before {\n  border-right-color: rgba(0, 0, 0, 0.5);\n}\n\n.apexcharts-yaxistooltip.active {\n  opacity: 1;\n}\n\n.apexcharts-xcrosshairs, .apexcharts-ycrosshairs {\n  pointer-events: none;\n  opacity: 0;\n  transition: 0.15s ease all;\n}\n\n.apexcharts-xcrosshairs.active, .apexcharts-ycrosshairs.active {\n  opacity: 1;\n  transition: 0.15s ease all;\n}\n\n.apexcharts-ycrosshairs-hidden {\n  opacity: 0;\n}\n\n.apexcharts-zoom-rect {\n  pointer-events: none;\n}\n.apexcharts-selection-rect {\n  cursor: move;\n}\n\n.svg_select_points, .svg_select_points_rot {\n  opacity: 0;\n  visibility: hidden;\n}\n.svg_select_points_l, .svg_select_points_r {\n  cursor: ew-resize;\n  opacity: 1;\n  visibility: visible;\n  fill: #888;\n}\n.apexcharts-canvas.zoomable .hovering-zoom {\n  cursor: crosshair\n}\n.apexcharts-canvas.zoomable .hovering-pan {\n  cursor: move\n}\n\n.apexcharts-xaxis,\n.apexcharts-yaxis {\n  pointer-events: none;\n}\n\n.apexcharts-zoom-icon, \n.apexcharts-zoom-in-icon,\n.apexcharts-zoom-out-icon,\n.apexcharts-reset-zoom-icon, \n.apexcharts-pan-icon, \n.apexcharts-selection-icon,\n.apexcharts-menu-icon, \n.apexcharts-toolbar-custom-icon {\n  cursor: pointer;\n  width: 20px;\n  height: 20px;\n  line-height: 24px;\n  color: #6E8192;\n  text-align: center;\n}\n\n\n.apexcharts-zoom-icon svg, \n.apexcharts-zoom-in-icon svg,\n.apexcharts-zoom-out-icon svg,\n.apexcharts-reset-zoom-icon svg,\n.apexcharts-menu-icon svg {\n  fill: #6E8192;\n}\n.apexcharts-selection-icon svg {\n  fill: #444;\n  transform: scale(0.76)\n}\n\n.dark .apexcharts-zoom-icon svg, \n.dark .apexcharts-zoom-in-icon svg,\n.dark .apexcharts-zoom-out-icon svg,\n.dark .apexcharts-reset-zoom-icon svg, \n.dark .apexcharts-pan-icon svg, \n.dark .apexcharts-selection-icon svg,\n.dark .apexcharts-menu-icon svg, \n.dark .apexcharts-toolbar-custom-icon svg{\n  fill: #f3f4f5;\n}\n\n.apexcharts-canvas .apexcharts-zoom-icon.selected svg, \n.apexcharts-canvas .apexcharts-selection-icon.selected svg, \n.apexcharts-canvas .apexcharts-reset-zoom-icon.selected svg {\n  fill: #008FFB;\n}\n.light .apexcharts-selection-icon:not(.selected):hover svg,\n.light .apexcharts-zoom-icon:not(.selected):hover svg, \n.light .apexcharts-zoom-in-icon:hover svg, \n.light .apexcharts-zoom-out-icon:hover svg, \n.light .apexcharts-reset-zoom-icon:hover svg, \n.light .apexcharts-menu-icon:hover svg {\n  fill: #333;\n}\n\n.apexcharts-selection-icon, .apexcharts-menu-icon {\n  position: relative;\n}\n.apexcharts-reset-zoom-icon {\n  margin-left: 5px;\n}\n.apexcharts-zoom-icon, .apexcharts-reset-zoom-icon, .apexcharts-menu-icon {\n  transform: scale(0.85);\n}\n\n.apexcharts-zoom-in-icon, .apexcharts-zoom-out-icon {\n  transform: scale(0.7)\n}\n\n.apexcharts-zoom-out-icon {\n  margin-right: 3px;\n}\n\n.apexcharts-pan-icon {\n  transform: scale(0.62);\n  position: relative;\n  left: 1px;\n  top: 0px;\n}\n.apexcharts-pan-icon svg {\n  fill: #fff;\n  stroke: #6E8192;\n  stroke-width: 2;\n}\n.apexcharts-pan-icon.selected svg {\n  stroke: #008FFB;\n}\n.apexcharts-pan-icon:not(.selected):hover svg {\n  stroke: #333;\n}\n\n.apexcharts-toolbar {\n  position: absolute;\n  z-index: 11;\n  top: 0px;\n  right: 3px;\n  max-width: 176px;\n  text-align: right;\n  border-radius: 3px;\n  padding: 0px 6px 2px 6px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center; \n}\n\n.apexcharts-toolbar svg {\n  pointer-events: none;\n}\n\n.apexcharts-menu {\n  background: #fff;\n  position: absolute;\n  top: 100%;\n  border: 1px solid #ddd;\n  border-radius: 3px;\n  padding: 3px;\n  right: 10px;\n  opacity: 0;\n  min-width: 110px;\n  transition: 0.15s ease all;\n  pointer-events: none;\n}\n\n.apexcharts-menu.open {\n  opacity: 1;\n  pointer-events: all;\n  transition: 0.15s ease all;\n}\n\n.apexcharts-menu-item {\n  padding: 6px 7px;\n  font-size: 12px;\n  cursor: pointer;\n}\n.light .apexcharts-menu-item:hover {\n  background: #eee;\n}\n.dark .apexcharts-menu {\n  background: rgba(0, 0, 0, 0.7);\n  color: #fff;\n}\n\n@media screen and (min-width: 768px) {\n  .apexcharts-toolbar {\n    /*opacity: 0;*/\n  }\n\n  .apexcharts-canvas:hover .apexcharts-toolbar {\n    opacity: 1;\n  } \n}\n\n.apexcharts-datalabel.hidden {\n  opacity: 0;\n}\n\n.apexcharts-pie-label,\n.apexcharts-datalabel, .apexcharts-datalabel-label, .apexcharts-datalabel-value {\n  cursor: default;\n  pointer-events: none;\n}\n\n.apexcharts-pie-label-delay {\n  opacity: 0;\n  animation-name: opaque;\n  animation-duration: 0.3s;\n  animation-fill-mode: forwards;\n  animation-timing-function: ease;\n}\n\n.apexcharts-canvas .hidden {\n  opacity: 0;\n}\n\n.apexcharts-hide .apexcharts-series-points {\n  opacity: 0;\n}\n\n.apexcharts-area-series .apexcharts-series-markers .apexcharts-marker.no-pointer-events,\n.apexcharts-line-series .apexcharts-series-markers .apexcharts-marker.no-pointer-events, .apexcharts-radar-series path, .apexcharts-radar-series polygon {\n  pointer-events: none;\n}\n\n/* markers */\n\n.apexcharts-marker {\n  transition: 0.15s ease all;\n}\n\n@keyframes opaque {\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}'
+            ),
+                /*! @source http://purl.eligrey.com/github/classList.js/blob/master/classList.js */
+                "document" in self &&
+                    (("classList" in document.createElement("_") && (!document.createElementNS || "classList" in document.createElementNS("http://www.w3.org/2000/svg", "g"))) ||
+                        (function (t) {
+                            if ("Element" in t) {
+                                var e = t.Element.prototype,
+                                    i = Object,
+                                    a =
+                                        String.prototype.trim ||
+                                        function () {
+                                            return this.replace(/^\s+|\s+$/g, "");
+                                        },
+                                    s =
+                                        Array.prototype.indexOf ||
+                                        function (t) {
+                                            for (var e = 0, i = this.length; e < i; e++) if (e in this && this[e] === t) return e;
+                                            return -1;
+                                        },
+                                    n = function (t, e) {
+                                        (this.name = t), (this.code = DOMException[t]), (this.message = e);
+                                    },
+                                    r = function (t, e) {
+                                        if ("" === e) throw new n("SYNTAX_ERR", "The token must not be empty.");
+                                        if (/\s/.test(e)) throw new n("INVALID_CHARACTER_ERR", "The token must not contain space characters.");
+                                        return s.call(t, e);
+                                    },
+                                    o = function (t) {
+                                        for (var e = a.call(t.getAttribute("class") || ""), i = e ? e.split(/\s+/) : [], s = 0, n = i.length; s < n; s++) this.push(i[s]);
+                                        this._updateClassName = function () {
+                                            t.setAttribute("class", this.toString());
+                                        };
+                                    },
+                                    l = (o.prototype = []),
+                                    h = function () {
+                                        return new o(this);
+                                    };
+                                if (
+                                    ((n.prototype = Error.prototype),
+                                    (l.item = function (t) {
+                                        return this[t] || null;
+                                    }),
+                                    (l.contains = function (t) {
+                                        return ~r(this, t + "");
+                                    }),
+                                    (l.add = function () {
+                                        var t,
+                                            e = arguments,
+                                            i = 0,
+                                            a = e.length,
+                                            s = !1;
+                                        do {
+                                            (t = e[i] + ""), ~r(this, t) || (this.push(t), (s = !0));
+                                        } while (++i < a);
+                                        s && this._updateClassName();
+                                    }),
+                                    (l.remove = function () {
+                                        var t,
+                                            e,
+                                            i = arguments,
+                                            a = 0,
+                                            s = i.length,
+                                            n = !1;
+                                        do {
+                                            for (t = i[a] + "", e = r(this, t); ~e; ) this.splice(e, 1), (n = !0), (e = r(this, t));
+                                        } while (++a < s);
+                                        n && this._updateClassName();
+                                    }),
+                                    (l.toggle = function (t, e) {
+                                        var i = this.contains(t),
+                                            a = i ? !0 !== e && "remove" : !1 !== e && "add";
+                                        return a && this[a](t), !0 === e || !1 === e ? e : !i;
+                                    }),
+                                    (l.replace = function (t, e) {
+                                        var i = r(t + "");
+                                        ~i && (this.splice(i, 1, e), this._updateClassName());
+                                    }),
+                                    (l.toString = function () {
+                                        return this.join(" ");
+                                    }),
+                                    i.defineProperty)
+                                ) {
+                                    var c = { get: h, enumerable: !0, configurable: !0 };
+                                    try {
+                                        i.defineProperty(e, "classList", c);
+                                    } catch (t) {
+                                        (void 0 !== t.number && -2146823252 !== t.number) || ((c.enumerable = !1), i.defineProperty(e, "classList", c));
+                                    }
+                                } else i.prototype.__defineGetter__ && e.__defineGetter__("classList", h);
+                            }
+                        })(self),
+                    (function () {
+                        var t = document.createElement("_");
+                        if ((t.classList.add("c1", "c2"), !t.classList.contains("c2"))) {
+                            var e = function (t) {
+                                var e = DOMTokenList.prototype[t];
+                                DOMTokenList.prototype[t] = function (t) {
+                                    var i,
+                                        a = arguments.length;
+                                    for (i = 0; i < a; i++) (t = arguments[i]), e.call(this, t);
+                                };
+                            };
+                            e("add"), e("remove");
+                        }
+                        if ((t.classList.toggle("c3", !1), t.classList.contains("c3"))) {
+                            var i = DOMTokenList.prototype.toggle;
+                            DOMTokenList.prototype.toggle = function (t, e) {
+                                return 1 in arguments && !this.contains(t) == !e ? e : i.call(this, t);
+                            };
+                        }
+                        "replace" in document.createElement("_").classList ||
+                            (DOMTokenList.prototype.replace = function (t, e) {
+                                var i = this.toString().split(" "),
+                                    a = i.indexOf(t + "");
+                                ~a && ((i = i.slice(a)), this.remove.apply(this, i), this.add(e), this.add.apply(this, i.slice(1)));
+                            }),
+                            (t = null);
+                    })()),
+                (function () {
+                    var t = !1;
+                    function e(t) {
+                        var e = t.__resizeTriggers__,
+                            i = e.firstElementChild,
+                            a = e.lastElementChild,
+                            s = i.firstElementChild;
+                        (a.scrollLeft = a.scrollWidth),
+                            (a.scrollTop = a.scrollHeight),
+                            (s.style.width = i.offsetWidth + 1 + "px"),
+                            (s.style.height = i.offsetHeight + 1 + "px"),
+                            (i.scrollLeft = i.scrollWidth),
+                            (i.scrollTop = i.scrollHeight);
+                    }
+                    function i(t) {
+                        var i = this;
+                        e(this),
+                            this.__resizeRAF__ && r(this.__resizeRAF__),
+                            (this.__resizeRAF__ = n(function () {
+                                (function (t) {
+                                    return t.offsetWidth != t.__resizeLast__.width || t.offsetHeight != t.__resizeLast__.height;
+                                })(i) &&
+                                    ((i.__resizeLast__.width = i.offsetWidth),
+                                    (i.__resizeLast__.height = i.offsetHeight),
+                                    i.__resizeListeners__.forEach(function (e) {
+                                        e.call(t);
+                                    }));
+                            }));
+                    }
+                    var a,
+                        s,
+                        n =
+                            ((a =
+                                window.requestAnimationFrame ||
+                                window.mozRequestAnimationFrame ||
+                                window.webkitRequestAnimationFrame ||
+                                function (t) {
+                                    return window.setTimeout(t, 20);
+                                }),
+                            function (t) {
+                                return a(t);
+                            }),
+                        r =
+                            ((s = window.cancelAnimationFrame || window.mozCancelAnimationFrame || window.webkitCancelAnimationFrame || window.clearTimeout),
+                            function (t) {
+                                return s(t);
+                            }),
+                        o = !1,
+                        l = "",
+                        h = "animationstart",
+                        c = "Webkit Moz O ms".split(" "),
+                        d = "webkitAnimationStart animationstart oAnimationStart MSAnimationStart".split(" "),
+                        u = document.createElement("fakeelement");
+                    if ((void 0 !== u.style.animationName && (o = !0), !1 === o))
+                        for (var f = 0; f < c.length; f++)
+                            if (void 0 !== u.style[c[f] + "AnimationName"]) {
+                                (l = "-" + c[f].toLowerCase() + "-"), (h = d[f]);
+                                break;
+                            }
+                    var g = "@" + l + "keyframes resizeanim { from { opacity: 0; } to { opacity: 0; } } ",
+                        p = l + "animation: 1ms resizeanim; ";
+                    (window.addResizeListener = function (a, s) {
+                        a.__resizeTriggers__ ||
+                            ("static" == getComputedStyle(a).position && (a.style.position = "relative"),
+                            (function () {
+                                if (!t) {
+                                    var e =
+                                            (g || "") +
+                                            ".resize-triggers { " +
+                                            (p || "") +
+                                            'visibility: hidden; opacity: 0; } .resize-triggers, .resize-triggers > div, .contract-trigger:before { content: " "; display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; } .resize-triggers > div { background: #eee; overflow: auto; } .contract-trigger:before { width: 200%; height: 200%; }',
+                                        i = document.head || document.getElementsByTagName("head")[0],
+                                        a = document.createElement("style");
+                                    (a.type = "text/css"), a.styleSheet ? (a.styleSheet.cssText = e) : a.appendChild(document.createTextNode(e)), i.appendChild(a), (t = !0);
+                                }
+                            })(),
+                            (a.__resizeLast__ = {}),
+                            (a.__resizeListeners__ = []),
+                            ((a.__resizeTriggers__ = document.createElement("div")).className = "resize-triggers"),
+                            (a.__resizeTriggers__.innerHTML = '<div class="expand-trigger"><div></div></div><div class="contract-trigger"></div>'),
+                            a.appendChild(a.__resizeTriggers__),
+                            e(a),
+                            a.addEventListener("scroll", i, !0),
+                            h &&
+                                a.__resizeTriggers__.addEventListener(h, function (t) {
+                                    "resizeanim" == t.animationName && e(a);
+                                })),
+                            a.__resizeListeners__.push(s);
+                    }),
+                        (window.removeResizeListener = function (t, e) {
+                            t && (t.__resizeListeners__.splice(t.__resizeListeners__.indexOf(e), 1), t.__resizeListeners__.length || (t.removeEventListener("scroll", i), (t.__resizeTriggers__ = !t.removeChild(t.__resizeTriggers__))));
+                        });
+                })(),
+                (window.Apex = {});
+            var At = (function () {
+                function t(e, i) {
+                    n(this, t),
+                        (this.opts = i),
+                        (this.ctx = this),
+                        (this.w = new E(i).init()),
+                        (this.el = e),
+                        (this.w.globals.cuid = (Math.random() + 1).toString(36).substring(4)),
+                        (this.w.globals.chartID = this.w.config.chart.id ? this.w.config.chart.id : this.w.globals.cuid),
+                        (this.eventList = ["mousedown", "mousemove", "touchstart", "touchmove", "mouseup", "touchend"]),
+                        this.initModules(),
+                        (this.create = p.bind(this.create, this)),
+                        (this.documentEvent = p.bind(this.documentEvent, this)),
+                        (this.windowResizeHandler = this.windowResize.bind(this));
+                }
+                return (
+                    o(
+                        t,
+                        [
+                            {
+                                key: "render",
+                                value: function () {
+                                    var t = this;
+                                    return new et(function (e, i) {
+                                        if (null !== t.el) {
+                                            void 0 === Apex._chartInstances && (Apex._chartInstances = []),
+                                                t.w.config.chart.id && Apex._chartInstances.push({ id: t.w.globals.chartID, group: t.w.config.chart.group, chart: t }),
+                                                t.setLocale(t.w.config.chart.defaultLocale);
+                                            var a = t.w.config.chart.events.beforeMount;
+                                            "function" == typeof a && a(t, t.w),
+                                                t.fireEvent("beforeMount", [t, t.w]),
+                                                window.addEventListener("resize", t.windowResizeHandler),
+                                                window.addResizeListener(t.el.parentNode, t.parentResizeCallback.bind(t));
+                                            var s = t.create(t.w.config.series, {});
+                                            if (!s) return e(t);
+                                            t.mount(s)
+                                                .then(function () {
+                                                    e(s), "function" == typeof t.w.config.chart.events.mounted && t.w.config.chart.events.mounted(t, t.w), t.fireEvent("mounted", [t, t.w]);
+                                                })
+                                                .catch(function (t) {
+                                                    i(t);
+                                                });
+                                        } else i(new Error("Element not found"));
+                                    });
+                                },
+                            },
+                            {
+                                key: "initModules",
+                                value: function () {
+                                    (this.animations = new v(this)),
+                                        (this.core = new Q(this.el, this)),
+                                        (this.grid = new dt(this)),
+                                        (this.coreUtils = new A(this)),
+                                        (this.config = new C({})),
+                                        (this.crosshairs = new Y(this)),
+                                        (this.options = new y()),
+                                        (this.responsive = new ut(this)),
+                                        (this.series = new G(this)),
+                                        (this.theme = new ft(this)),
+                                        (this.formatters = new _(this)),
+                                        (this.titleSubtitle = new St(this)),
+                                        (this.legend = new j(this)),
+                                        (this.toolbar = new wt(this)),
+                                        (this.dimensions = new V(this)),
+                                        (this.zoomPanSelection = new kt(this)),
+                                        (this.w.globals.tooltip = new yt(this));
+                                },
+                            },
+                            {
+                                key: "addEventListener",
+                                value: function (t, e) {
+                                    var i = this.w;
+                                    i.globals.events.hasOwnProperty(t) ? i.globals.events[t].push(e) : (i.globals.events[t] = [e]);
+                                },
+                            },
+                            {
+                                key: "removeEventListener",
+                                value: function (t, e) {
+                                    var i = this.w;
+                                    if (i.globals.events.hasOwnProperty(t)) {
+                                        var a = i.globals.events[t].indexOf(e);
+                                        -1 !== a && i.globals.events[t].splice(a, 1);
+                                    }
+                                },
+                            },
+                            {
+                                key: "fireEvent",
+                                value: function (t, e) {
+                                    var i = this.w;
+                                    if (i.globals.events.hasOwnProperty(t)) {
+                                        (e && e.length) || (e = []);
+                                        for (var a = i.globals.events[t], s = a.length, n = 0; n < s; n++) a[n].apply(null, e);
+                                    }
+                                },
+                            },
+                            {
+                                key: "create",
+                                value: function (t, e) {
+                                    var i = this.w;
+                                    this.initModules();
+                                    var a = this.w.globals;
+                                    if (((a.noData = !1), (a.animationEnded = !1), this.responsive.checkResponsiveConfig(e), null === this.el)) return (a.animationEnded = !0), null;
+                                    if ((this.core.setupElements(), 0 === a.svgWidth)) return (a.animationEnded = !0), null;
+                                    var s = A.checkComboSeries(t);
+                                    (a.comboCharts = s.comboCharts),
+                                        (a.comboChartsHasBars = s.comboChartsHasBars),
+                                        (0 === t.length || (1 === t.length && t[0].data && 0 === t[0].data.length)) && this.series.handleNoData(),
+                                        this.setupEventHandlers(),
+                                        this.core.parseData(t),
+                                        this.theme.init(),
+                                        new T(this).setGlobalMarkerSize(),
+                                        this.formatters.setLabelFormatters(),
+                                        this.titleSubtitle.draw(),
+                                        i.globals.noData || this.legend.init(),
+                                        this.series.hasAllSeriesEqualX(),
+                                        a.axisCharts && (this.core.coreCalculations(), "category" !== i.config.xaxis.type && this.formatters.setLabelFormatters()),
+                                        this.formatters.heatmapLabelFormatters(),
+                                        this.dimensions.plotCoords();
+                                    var n = this.core.xySettings();
+                                    this.grid.createGridMask();
+                                    var r = this.core.plotChartType(t, n);
+                                    this.core.shiftGraphPosition();
+                                    var o = { plot: { left: i.globals.translateX, top: i.globals.translateY, width: i.globals.gridWidth, height: i.globals.gridHeight } };
+                                    return { elGraph: r, xyRatios: n, elInner: i.globals.dom.elGraphical, dimensions: o };
+                                },
+                            },
+                            {
+                                key: "mount",
+                                value: function () {
+                                    var t = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : null,
+                                        e = this,
+                                        i = e.w;
+                                    return new et(function (a, s) {
+                                        if (null === e.el) return s(new Error("Not enough data to display or target element not found"));
+                                        if (
+                                            ((null === t || i.globals.allSeriesCollapsed) && e.series.handleNoData(),
+                                            (e.annotations = new w(e)),
+                                            e.core.drawAxis(i.config.chart.type, t.xyRatios),
+                                            (e.grid = new dt(e)),
+                                            "back" === i.config.grid.position && e.grid.drawGrid(),
+                                            "back" === i.config.annotations.position && e.annotations.drawAnnotations(),
+                                            t.elGraph instanceof Array)
+                                        )
+                                            for (var n = 0; n < t.elGraph.length; n++) i.globals.dom.elGraphical.add(t.elGraph[n]);
+                                        else i.globals.dom.elGraphical.add(t.elGraph);
+                                        if (
+                                            ("front" === i.config.grid.position && e.grid.drawGrid(),
+                                            "front" === i.config.xaxis.crosshairs.position && e.crosshairs.drawXCrosshairs(),
+                                            "front" === i.config.yaxis[0].crosshairs.position && e.crosshairs.drawYCrosshairs(),
+                                            "front" === i.config.annotations.position && e.annotations.drawAnnotations(),
+                                            !i.globals.noData)
+                                        ) {
+                                            if ((i.config.tooltip.enabled && !i.globals.noData && e.w.globals.tooltip.drawTooltip(t.xyRatios), i.globals.axisCharts && i.globals.isXNumeric))
+                                                (i.config.chart.zoom.enabled || (i.config.chart.selection && i.config.chart.selection.enabled) || (i.config.chart.pan && i.config.chart.pan.enabled)) &&
+                                                    e.zoomPanSelection.init({ xyRatios: t.xyRatios });
+                                            else {
+                                                var r = i.config.chart.toolbar.tools;
+                                                (r.zoom = !1), (r.zoomin = !1), (r.zoomout = !1), (r.selection = !1), (r.pan = !1), (r.reset = !1);
+                                            }
+                                            i.config.chart.toolbar.show && !i.globals.allSeriesCollapsed && e.toolbar.createToolbar();
+                                        }
+                                        i.globals.memory.methodsToExec.length > 0 &&
+                                            i.globals.memory.methodsToExec.forEach(function (t) {
+                                                t.method(t.params, !1, t.context);
+                                            }),
+                                            i.globals.axisCharts || i.globals.noData || e.core.resizeNonAxisCharts(),
+                                            a(e);
+                                    });
+                                },
+                            },
+                            {
+                                key: "clearPreviousPaths",
+                                value: function () {
+                                    var t = this.w;
+                                    (t.globals.previousPaths = []), (t.globals.allSeriesCollapsed = !1), (t.globals.collapsedSeries = []), (t.globals.collapsedSeriesIndices = []);
+                                },
+                            },
+                            {
+                                key: "updateOptions",
+                                value: function (t) {
+                                    var e = arguments.length > 1 && void 0 !== arguments[1] && arguments[1],
+                                        i = !(arguments.length > 2 && void 0 !== arguments[2]) || arguments[2],
+                                        a = !(arguments.length > 3 && void 0 !== arguments[3]) || arguments[3],
+                                        s = this.w;
+                                    return (
+                                        t.series &&
+                                            (this.resetSeries(!1),
+                                            t.series[0].data &&
+                                                (t.series = t.series.map(function (t, e) {
+                                                    return h({}, s.config.series[e], {
+                                                        name: t.name ? t.name : s.config.series[e] && s.config.series[e].name,
+                                                        type: t.type ? t.type : s.config.series[e] && s.config.series[e].type,
+                                                        data: t.data ? t.data : s.config.series[e] && s.config.series[e].data,
+                                                    });
+                                                })),
+                                            this.revertDefaultAxisMinMax()),
+                                        t.xaxis && ((t.xaxis.min || t.xaxis.max) && this.forceXAxisUpdate(t), t.xaxis.categories && t.xaxis.categories.length && s.config.xaxis.convertedCatToNumeric && (t = S.convertCatToNumeric(t))),
+                                        s.globals.collapsedSeriesIndices.length > 0 && this.clearPreviousPaths(),
+                                        t.theme && (t = this.theme.updateThemeOptions(t)),
+                                        this._updateOptions(t, e, i, a)
+                                    );
+                                },
+                            },
+                            {
+                                key: "_updateOptions",
+                                value: function (t) {
+                                    var e = arguments.length > 1 && void 0 !== arguments[1] && arguments[1],
+                                        i = !(arguments.length > 2 && void 0 !== arguments[2]) || arguments[2],
+                                        a = arguments.length > 3 && void 0 !== arguments[3] && arguments[3],
+                                        n = this.getSyncedCharts();
+                                    this.w.globals.isExecCalled && ((n = [this]), (this.w.globals.isExecCalled = !1)),
+                                        n.forEach(function (n) {
+                                            var r = n.w;
+                                            return (
+                                                (r.globals.shouldAnimate = i),
+                                                e || ((r.globals.resized = !0), (r.globals.dataChanged = !0), i && n.series.getPreviousPaths()),
+                                                t &&
+                                                    "object" === s(t) &&
+                                                    ((n.config = new C(t)),
+                                                    (t = A.extendArrayProps(n.config, t)),
+                                                    (r.config = p.extend(r.config, t)),
+                                                    a && ((r.globals.lastXAxis = []), (r.globals.lastYAxis = []), (r.globals.initialConfig = p.extend({}, r.config)), (r.globals.initialSeries = JSON.parse(JSON.stringify(r.config.series))))),
+                                                n.update(t)
+                                            );
+                                        });
+                                },
+                            },
+                            {
+                                key: "updateSeries",
+                                value: function () {
+                                    var t = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : [],
+                                        e = !(arguments.length > 1 && void 0 !== arguments[1]) || arguments[1],
+                                        i = !(arguments.length > 2 && void 0 !== arguments[2]) || arguments[2];
+                                    return this.resetSeries(!1), this.revertDefaultAxisMinMax(), this._updateSeries(t, e, i);
+                                },
+                            },
+                            {
+                                key: "appendSeries",
+                                value: function (t) {
+                                    var e = !(arguments.length > 1 && void 0 !== arguments[1]) || arguments[1],
+                                        i = !(arguments.length > 2 && void 0 !== arguments[2]) || arguments[2],
+                                        a = this.w.config.series.slice();
+                                    return a.push(t), this.resetSeries(!1), this.revertDefaultAxisMinMax(), this._updateSeries(a, e, i);
+                                },
+                            },
+                            {
+                                key: "_updateSeries",
+                                value: function (t, e) {
+                                    var i,
+                                        a = arguments.length > 2 && void 0 !== arguments[2] && arguments[2],
+                                        s = this.w;
+                                    return (
+                                        (this.w.globals.shouldAnimate = e),
+                                        (s.globals.dataChanged = !0),
+                                        s.globals.allSeriesCollapsed && (s.globals.allSeriesCollapsed = !1),
+                                        e && this.series.getPreviousPaths(),
+                                        s.globals.axisCharts
+                                            ? (0 ===
+                                                  (i = t.map(function (t, e) {
+                                                      return h({}, s.config.series[e], {
+                                                          name: t.name ? t.name : s.config.series[e] && s.config.series[e].name,
+                                                          type: t.type ? t.type : s.config.series[e] && s.config.series[e].type,
+                                                          data: t.data ? t.data : s.config.series[e] && s.config.series[e].data,
+                                                      });
+                                                  })).length && (i = [{ data: [] }]),
+                                              (s.config.series = i))
+                                            : (s.config.series = t.slice()),
+                                        a && ((s.globals.initialConfig.series = JSON.parse(JSON.stringify(s.config.series))), (s.globals.initialSeries = JSON.parse(JSON.stringify(s.config.series)))),
+                                        this.update()
+                                    );
+                                },
+                            },
+                            {
+                                key: "getSyncedCharts",
+                                value: function () {
+                                    var t = this.getGroupedCharts(),
+                                        e = [this];
+                                    return (
+                                        t.length &&
+                                            ((e = []),
+                                            t.forEach(function (t) {
+                                                e.push(t);
+                                            })),
+                                        e
+                                    );
+                                },
+                            },
+                            {
+                                key: "getGroupedCharts",
+                                value: function () {
+                                    var t = this;
+                                    return Apex._chartInstances
+                                        .filter(function (t) {
+                                            if (t.group) return !0;
+                                        })
+                                        .map(function (e) {
+                                            return t.w.config.chart.group === e.group ? e.chart : t;
+                                        });
+                                },
+                            },
+                            {
+                                key: "appendData",
+                                value: function (t) {
+                                    var e = !(arguments.length > 1 && void 0 !== arguments[1]) || arguments[1],
+                                        i = this;
+                                    (i.w.globals.dataChanged = !0), i.series.getPreviousPaths();
+                                    for (var a = i.w.config.series.slice(), s = 0; s < a.length; s++) if (void 0 !== t[s]) for (var n = 0; n < t[s].data.length; n++) a[s].data.push(t[s].data[n]);
+                                    return (i.w.config.series = a), e && (i.w.globals.initialSeries = JSON.parse(JSON.stringify(i.w.config.series))), this.update();
+                                },
+                            },
+                            {
+                                key: "update",
+                                value: function (t) {
+                                    var e = this;
+                                    return new et(function (i, a) {
+                                        e.clear();
+                                        var s = e.create(e.w.config.series, t);
+                                        if (!s) return i(e);
+                                        e.mount(s)
+                                            .then(function () {
+                                                "function" == typeof e.w.config.chart.events.updated && e.w.config.chart.events.updated(e, e.w), e.fireEvent("updated", [e, e.w]), (e.w.globals.isDirty = !0), i(e);
+                                            })
+                                            .catch(function (t) {
+                                                a(t);
+                                            });
+                                    });
+                                },
+                            },
+                            {
+                                key: "forceXAxisUpdate",
+                                value: function (t) {
+                                    var e = this.w;
+                                    void 0 !== t.xaxis.min && ((e.config.xaxis.min = t.xaxis.min), (e.globals.lastXAxis.min = t.xaxis.min)),
+                                        void 0 !== t.xaxis.max && ((e.config.xaxis.max = t.xaxis.max), (e.globals.lastXAxis.max = t.xaxis.max));
+                                },
+                            },
+                            {
+                                key: "revertDefaultAxisMinMax",
+                                value: function () {
+                                    var t = this.w;
+                                    (t.config.xaxis.min = t.globals.lastXAxis.min),
+                                        (t.config.xaxis.max = t.globals.lastXAxis.max),
+                                        t.config.yaxis.map(function (e, i) {
+                                            t.globals.zoomed && void 0 !== t.globals.lastYAxis[i] && ((e.min = t.globals.lastYAxis[i].min), (e.max = t.globals.lastYAxis[i].max));
+                                        });
+                                },
+                            },
+                            {
+                                key: "clear",
+                                value: function () {
+                                    this.zoomPanSelection && this.zoomPanSelection.destroy(),
+                                        this.toolbar && this.toolbar.destroy(),
+                                        (this.animations = null),
+                                        (this.annotations = null),
+                                        (this.core = null),
+                                        (this.grid = null),
+                                        (this.series = null),
+                                        (this.responsive = null),
+                                        (this.theme = null),
+                                        (this.formatters = null),
+                                        (this.titleSubtitle = null),
+                                        (this.legend = null),
+                                        (this.dimensions = null),
+                                        (this.options = null),
+                                        (this.crosshairs = null),
+                                        (this.zoomPanSelection = null),
+                                        (this.toolbar = null),
+                                        (this.w.globals.tooltip = null),
+                                        this.clearDomElements();
+                                },
+                            },
+                            {
+                                key: "killSVG",
+                                value: function (t) {
+                                    return new et(function (e, i) {
+                                        t.each(function (t, e) {
+                                            this.removeClass("*"), this.off(), this.stop();
+                                        }, !0),
+                                            t.ungroup(),
+                                            t.clear(),
+                                            e("done");
+                                    });
+                                },
+                            },
+                            {
+                                key: "clearDomElements",
+                                value: function () {
+                                    var t = this;
+                                    this.eventList.forEach(function (e) {
+                                        document.removeEventListener(e, t.documentEvent);
+                                    });
+                                    var e = this.w.globals.dom;
+                                    if (null !== this.el) for (; this.el.firstChild; ) this.el.removeChild(this.el.firstChild);
+                                    this.killSVG(e.Paper),
+                                        e.Paper.remove(),
+                                        (e.elWrap = null),
+                                        (e.elGraphical = null),
+                                        (e.elLegendWrap = null),
+                                        (e.baseEl = null),
+                                        (e.elGridRect = null),
+                                        (e.elGridRectMask = null),
+                                        (e.elGridRectMarkerMask = null),
+                                        (e.elDefs = null);
+                                },
+                            },
+                            {
+                                key: "destroy",
+                                value: function () {
+                                    this.clear();
+                                    var t = this.w.config.chart.id;
+                                    t &&
+                                        Apex._chartInstances.forEach(function (e, i) {
+                                            e.id === t && Apex._chartInstances.splice(i, 1);
+                                        }),
+                                        window.removeEventListener("resize", this.windowResizeHandler),
+                                        window.removeResizeListener(this.el.parentNode, this.parentResizeCallback.bind(this));
+                                },
+                            },
+                            {
+                                key: "toggleSeries",
+                                value: function (t) {
+                                    var e = this.series.getSeriesByName(t),
+                                        i = parseInt(e.getAttribute("data:realIndex")),
+                                        a = e.classList.contains("apexcharts-series-collapsed");
+                                    this.legend.toggleDataSeries(i, a);
+                                },
+                            },
+                            {
+                                key: "resetSeries",
+                                value: function () {
+                                    var t = !(arguments.length > 0 && void 0 !== arguments[0]) || arguments[0];
+                                    this.series.resetSeries(t);
+                                },
+                            },
+                            {
+                                key: "setupEventHandlers",
+                                value: function () {
+                                    var t = this,
+                                        e = this.w,
+                                        i = this,
+                                        a = e.globals.dom.baseEl.querySelector(e.globals.chartClass);
+                                    (this.eventListHandlers = []),
+                                        this.eventList.forEach(function (t) {
+                                            a.addEventListener(
+                                                t,
+                                                function (t) {
+                                                    ("mousedown" === t.type && 1 === t.which) ||
+                                                        ((("mouseup" === t.type && 1 === t.which) || "touchend" === t.type) &&
+                                                            ("function" == typeof e.config.chart.events.click && e.config.chart.events.click(t, i, e), i.fireEvent("click", [t, i, e])));
+                                                },
+                                                { capture: !1, passive: !0 }
+                                            );
+                                        }),
+                                        this.eventList.forEach(function (e) {
+                                            document.addEventListener(e, t.documentEvent);
+                                        }),
+                                        this.core.setupBrushHandler();
+                                },
+                            },
+                            {
+                                key: "documentEvent",
+                                value: function (t) {
+                                    var e = this.w;
+                                    (e.globals.clientX = "touchmove" === t.type ? t.touches[0].clientX : t.clientX), (e.globals.clientY = "touchmove" === t.type ? t.touches[0].clientY : t.clientY);
+                                },
+                            },
+                            {
+                                key: "addXaxisAnnotation",
+                                value: function (t) {
+                                    var e = !(arguments.length > 1 && void 0 !== arguments[1]) || arguments[1],
+                                        i = arguments.length > 2 && void 0 !== arguments[2] ? arguments[2] : void 0,
+                                        a = this;
+                                    i && (a = i), a.annotations.addXaxisAnnotationExternal(t, e, a);
+                                },
+                            },
+                            {
+                                key: "addYaxisAnnotation",
+                                value: function (t) {
+                                    var e = !(arguments.length > 1 && void 0 !== arguments[1]) || arguments[1],
+                                        i = arguments.length > 2 && void 0 !== arguments[2] ? arguments[2] : void 0,
+                                        a = this;
+                                    i && (a = i), a.annotations.addYaxisAnnotationExternal(t, e, a);
+                                },
+                            },
+                            {
+                                key: "addPointAnnotation",
+                                value: function (t) {
+                                    var e = !(arguments.length > 1 && void 0 !== arguments[1]) || arguments[1],
+                                        i = arguments.length > 2 && void 0 !== arguments[2] ? arguments[2] : void 0,
+                                        a = this;
+                                    i && (a = i), a.annotations.addPointAnnotationExternal(t, e, a);
+                                },
+                            },
+                            {
+                                key: "clearAnnotations",
+                                value: function () {
+                                    var t = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : void 0,
+                                        e = this;
+                                    t && (e = t), e.annotations.clearAnnotations(e);
+                                },
+                            },
+                            {
+                                key: "addText",
+                                value: function (t) {
+                                    var e = !(arguments.length > 1 && void 0 !== arguments[1]) || arguments[1],
+                                        i = arguments.length > 2 && void 0 !== arguments[2] ? arguments[2] : void 0,
+                                        a = this;
+                                    i && (a = i), a.annotations.addText(t, e, a);
+                                },
+                            },
+                            {
+                                key: "getChartArea",
+                                value: function () {
+                                    return this.w.globals.dom.baseEl.querySelector(".apexcharts-inner");
+                                },
+                            },
+                            {
+                                key: "getSeriesTotalXRange",
+                                value: function (t, e) {
+                                    return this.coreUtils.getSeriesTotalsXRange(t, e);
+                                },
+                            },
+                            {
+                                key: "getHighestValueInSeries",
+                                value: function () {
+                                    var t = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : 0;
+                                    return new $(this.ctx).getMinYMaxY(t).highestY;
+                                },
+                            },
+                            {
+                                key: "getLowestValueInSeries",
+                                value: function () {
+                                    var t = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : 0;
+                                    return new $(this.ctx).getMinYMaxY(t).lowestY;
+                                },
+                            },
+                            {
+                                key: "getSeriesTotal",
+                                value: function () {
+                                    return this.w.globals.seriesTotals;
+                                },
+                            },
+                            {
+                                key: "setLocale",
+                                value: function (t) {
+                                    this.setCurrentLocaleValues(t);
+                                },
+                            },
+                            {
+                                key: "toggleDataPointSelection",
+                                value: function (t, e) {
+                                    var i = this.w,
+                                        a = null;
+                                    (a = i.globals.axisCharts
+                                        ? i.globals.dom.Paper.select(
+                                              ".apexcharts-series[data\\:realIndex='"
+                                                  .concat(t, "'] path[j='")
+                                                  .concat(e, "'], .apexcharts-series[data\\:realIndex='")
+                                                  .concat(t, "'] circle[j='")
+                                                  .concat(e, "'], .apexcharts-series[data\\:realIndex='")
+                                                  .concat(t, "'] rect[j='")
+                                                  .concat(e, "']")
+                                          ).members[0]
+                                        : i.globals.dom.Paper.select(".apexcharts-series[data\\:realIndex='".concat(t, "']")).members[0])
+                                        ? new m(this.ctx).pathMouseDown(a, null)
+                                        : console.warn("toggleDataPointSelection: Element not found");
+                                    return a.node ? a.node : null;
+                                },
+                            },
+                            {
+                                key: "setCurrentLocaleValues",
+                                value: function (t) {
+                                    var e = this.w.config.chart.locales;
+                                    window.Apex.chart && window.Apex.chart.locales && window.Apex.chart.locales.length > 0 && (e = this.w.config.chart.locales.concat(window.Apex.chart.locales));
+                                    var i = e.filter(function (e) {
+                                        return e.name === t;
+                                    })[0];
+                                    if (!i) throw new Error("Wrong locale name provided. Please make sure you set the correct locale name in options");
+                                    var a = p.extend(b, i);
+                                    this.w.globals.locale = a.options;
+                                },
+                            },
+                            {
+                                key: "dataURI",
+                                value: function () {
+                                    return new ct(this.ctx).dataURI();
+                                },
+                            },
+                            {
+                                key: "paper",
+                                value: function () {
+                                    return this.w.globals.dom.Paper;
+                                },
+                            },
+                            {
+                                key: "parentResizeCallback",
+                                value: function () {
+                                    this.w.globals.animationEnded && this.windowResize();
+                                },
+                            },
+                            {
+                                key: "windowResize",
+                                value: function () {
+                                    var t = this;
+                                    clearTimeout(this.w.globals.resizeTimer),
+                                        (this.w.globals.resizeTimer = window.setTimeout(function () {
+                                            (t.w.globals.resized = !0), (t.w.globals.dataChanged = !1), t.update();
+                                        }, 150));
+                                },
+                            },
+                        ],
+                        [
+                            {
+                                key: "initOnLoad",
+                                value: function () {
+                                    for (var e = document.querySelectorAll("[data-apexcharts]"), i = 0; i < e.length; i++) {
+                                        new t(e[i], JSON.parse(e[i].getAttribute("data-options"))).render();
+                                    }
+                                },
+                            },
+                            {
+                                key: "exec",
+                                value: function (t, e) {
+                                    var i = this.getChartByID(t);
+                                    if (i) {
+                                        i.w.globals.isExecCalled = !0;
+                                        for (var a = arguments.length, s = new Array(a > 2 ? a - 2 : 0), n = 2; n < a; n++) s[n - 2] = arguments[n];
+                                        switch (e) {
+                                            case "updateOptions":
+                                                return i.updateOptions.apply(i, s);
+                                            case "updateSeries":
+                                                return i.updateSeries.apply(i, s);
+                                            case "appendData":
+                                                return i.appendData.apply(i, s);
+                                            case "appendSeries":
+                                                return i.appendSeries.apply(i, s);
+                                            case "toggleSeries":
+                                                return i.toggleSeries.apply(i, s);
+                                            case "dataURI":
+                                                return i.dataURI.apply(i, s);
+                                            case "addXaxisAnnotation":
+                                                return i.addXaxisAnnotation.apply(i, s);
+                                            case "addYaxisAnnotation":
+                                                return i.addYaxisAnnotation.apply(i, s);
+                                            case "addPointAnnotation":
+                                                return i.addPointAnnotation.apply(i, s);
+                                            case "addText":
+                                                return i.addText.apply(i, s);
+                                            case "clearAnnotations":
+                                                return i.clearAnnotations.apply(i, s);
+                                            case "paper":
+                                                return i.paper.apply(i, s);
+                                            case "destroy":
+                                                return i.destroy();
+                                        }
+                                    }
+                                },
+                            },
+                            {
+                                key: "merge",
+                                value: function (t, e) {
+                                    return p.extend(t, e);
+                                },
+                            },
+                            {
+                                key: "getChartByID",
+                                value: function (t) {
+                                    return Apex._chartInstances.filter(function (e) {
+                                        return e.id === t;
+                                    })[0].chart;
+                                },
+                            },
+                        ]
+                    ),
+                    t
+                );
+            })();
+            e.a = At;
+        }.call(this, i(101).setImmediate, i(104)(t)));
+    },
+    function (t, e, i) {
+        var a = i(9),
+            s = i(11),
+            n = i(17);
+        t.exports = a
+            ? function (t, e, i) {
+                  return s.f(t, e, n(1, i));
+              }
+            : function (t, e, i) {
+                  return (t[e] = i), t;
+              };
+    },
+    function (t, e, i) {
+        var a = i(7);
+        t.exports = function (t) {
+            if (!a(t)) throw TypeError(String(t) + " is not an object");
+            return t;
+        };
+    },
+    function (t, e) {
+        var i = {}.hasOwnProperty;
+        t.exports = function (t, e) {
+            return i.call(t, e);
+        };
+    },
+    function (t, e) {
+        t.exports = function (t) {
+            try {
+                return !!t();
+            } catch (t) {
+                return !0;
+            }
+        };
+    },
+    function (t, e) {
+        t.exports = function (t) {
+            return "object" == typeof t ? null !== t : "function" == typeof t;
+        };
+    },
+    function (t, e, i) {
+        var a = i(0),
+            s = i(30).f,
+            n = i(3),
+            r = i(15),
+            o = i(24),
+            l = i(64),
+            h = i(45);
+        t.exports = function (t, e) {
+            var i,
+                c,
+                d,
+                u,
+                f,
+                g = t.target,
+                p = t.global,
+                x = t.stat;
+            if ((i = p ? a : x ? a[g] || o(g, {}) : (a[g] || {}).prototype))
+                for (c in e) {
+                    if (((u = e[c]), (d = t.noTargetGet ? (f = s(i, c)) && f.value : i[c]), !h(p ? c : g + (x ? "." : "#") + c, t.forced) && void 0 !== d)) {
+                        if (typeof u == typeof d) continue;
+                        l(u, d);
+                    }
+                    (t.sham || (d && d.sham)) && n(u, "sham", !0), r(i, c, u, t);
+                }
+        };
+    },
+    function (t, e, i) {
+        var a = i(6);
+        t.exports = !a(function () {
+            return (
+                7 !=
+                Object.defineProperty({}, "a", {
+                    get: function () {
+                        return 7;
+                    },
+                }).a
+            );
+        });
+    },
+    function (t, e) {
+        t.exports = function (t) {
+            if ("function" != typeof t) throw TypeError(String(t) + " is not a function");
+            return t;
+        };
+    },
+    function (t, e, i) {
+        var a = i(9),
+            s = i(37),
+            n = i(4),
+            r = i(38),
+            o = Object.defineProperty;
+        e.f = a
+            ? o
+            : function (t, e, i) {
+                  if ((n(t), (e = r(e, !0)), n(i), s))
+                      try {
+                          return o(t, e, i);
+                      } catch (t) {}
+                  if ("get" in i || "set" in i) throw TypeError("Accessors not supported");
+                  return "value" in i && (t[e] = i.value), t;
+              };
+    },
+    function (t, e) {
+        var i = {}.toString;
+        t.exports = function (t) {
+            return i.call(t).slice(8, -1);
+        };
+    },
+    function (t, e) {
+        t.exports = {};
+    },
+    function (t, e, i) {
+        "use strict";
+        var a = i(10),
+            s = function (t) {
+                var e, i;
+                (this.promise = new t(function (t, a) {
+                    if (void 0 !== e || void 0 !== i) throw TypeError("Bad Promise constructor");
+                    (e = t), (i = a);
+                })),
+                    (this.resolve = a(e)),
+                    (this.reject = a(i));
+            };
+        t.exports.f = function (t) {
+            return new s(t);
+        };
+    },
+    function (t, e, i) {
+        var a = i(0),
+            s = i(16),
+            n = i(3),
+            r = i(5),
+            o = i(24),
+            l = i(39),
+            h = i(19),
+            c = h.get,
+            d = h.enforce,
+            u = String(l).split("toString");
+        s("inspectSource", function (t) {
+            return l.call(t);
+        }),
+            (t.exports = function (t, e, i, s) {
+                var l = !!s && !!s.unsafe,
+                    h = !!s && !!s.enumerable,
+                    c = !!s && !!s.noTargetGet;
+                "function" == typeof i && ("string" != typeof e || r(i, "name") || n(i, "name", e), (d(i).source = u.join("string" == typeof e ? e : ""))),
+                    t !== a ? (l ? !c && t[e] && (h = !0) : delete t[e], h ? (t[e] = i) : n(t, e, i)) : h ? (t[e] = i) : o(e, i);
+            })(Function.prototype, "toString", function () {
+                return ("function" == typeof this && c(this).source) || l.call(this);
+            });
+    },
+    function (t, e, i) {
+        var a = i(0),
+            s = i(24),
+            n = i(18),
+            r = a["__core-js_shared__"] || s("__core-js_shared__", {});
+        (t.exports = function (t, e) {
+            return r[t] || (r[t] = void 0 !== e ? e : {});
+        })("versions", []).push({ version: "3.1.3", mode: n ? "pure" : "global", copyright: "© 2019 Denis Pushkarev (zloirock.ru)" });
+    },
+    function (t, e) {
+        t.exports = function (t, e) {
+            return { enumerable: !(1 & t), configurable: !(2 & t), writable: !(4 & t), value: e };
+        };
+    },
+    function (t, e) {
+        t.exports = !1;
+    },
+    function (t, e, i) {
+        var a,
+            s,
+            n,
+            r = i(57),
+            o = i(0),
+            l = i(7),
+            h = i(3),
+            c = i(5),
+            d = i(26),
+            u = i(27),
+            f = o.WeakMap;
+        if (r) {
+            var g = new f(),
+                p = g.get,
+                x = g.has,
+                v = g.set;
+            (a = function (t, e) {
+                return v.call(g, t, e), e;
+            }),
+                (s = function (t) {
+                    return p.call(g, t) || {};
+                }),
+                (n = function (t) {
+                    return x.call(g, t);
+                });
+        } else {
+            var m = d("state");
+            (u[m] = !0),
+                (a = function (t, e) {
+                    return h(t, m, e), e;
+                }),
+                (s = function (t) {
+                    return c(t, m) ? t[m] : {};
+                }),
+                (n = function (t) {
+                    return c(t, m);
+                });
+        }
+        t.exports = {
+            set: a,
+            get: s,
+            has: n,
+            enforce: function (t) {
+                return n(t) ? s(t) : a(t, {});
+            },
+            getterFor: function (t) {
+                return function (e) {
+                    var i;
+                    if (!l(e) || (i = s(e)).type !== t) throw TypeError("Incompatible receiver, " + t + " required");
+                    return i;
+                };
+            },
+        };
+    },
+    function (t, e, i) {
+        var a = i(63),
+            s = i(29);
+        t.exports = function (t) {
+            return a(s(t));
+        };
+    },
+    function (t, e, i) {
+        var a = i(4),
+            s = i(84),
+            n = i(44),
+            r = i(49),
+            o = i(85),
+            l = i(86),
+            h = {};
+        (t.exports = function (t, e, i, c, d) {
+            var u,
+                f,
+                g,
+                p,
+                x,
+                v = r(e, i, c ? 2 : 1);
+            if (d) u = t;
+            else {
+                if ("function" != typeof (f = o(t))) throw TypeError("Target is not iterable");
+                if (s(f)) {
+                    for (g = 0, p = n(t.length); p > g; g++) if ((c ? v(a((x = t[g]))[0], x[1]) : v(t[g])) === h) return h;
+                    return;
+                }
+                u = f.call(t);
+            }
+            for (; !(x = u.next()).done; ) if (l(u, v, x.value, c) === h) return h;
+        }).BREAK = h;
+    },
+    function (t, e) {
+        t.exports = function (t) {
+            try {
+                return { error: !1, value: t() };
+            } catch (t) {
+                return { error: !0, value: t };
+            }
+        };
+    },
+    function (t, e) {
+        var i;
+        i = (function () {
+            return this;
+        })();
+        try {
+            i = i || new Function("return this")();
+        } catch (t) {
+            "object" == typeof window && (i = window);
+        }
+        t.exports = i;
+    },
+    function (t, e, i) {
+        var a = i(0),
+            s = i(3);
+        t.exports = function (t, e) {
+            try {
+                s(a, t, e);
+            } catch (i) {
+                a[t] = e;
+            }
+            return e;
+        };
+    },
+    function (t, e, i) {
+        var a = i(0),
+            s = i(7),
+            n = a.document,
+            r = s(n) && s(n.createElement);
+        t.exports = function (t) {
+            return r ? n.createElement(t) : {};
+        };
+    },
+    function (t, e, i) {
+        var a = i(16),
+            s = i(40),
+            n = a("keys");
+        t.exports = function (t) {
+            return n[t] || (n[t] = s(t));
+        };
+    },
+    function (t, e) {
+        t.exports = {};
+    },
+    function (t, e) {
+        var i = Math.ceil,
+            a = Math.floor;
+        t.exports = function (t) {
+            return isNaN((t = +t)) ? 0 : (t > 0 ? a : i)(t);
+        };
+    },
+    function (t, e) {
+        t.exports = function (t) {
+            if (null == t) throw TypeError("Can't call method on " + t);
+            return t;
+        };
+    },
+    function (t, e, i) {
+        var a = i(9),
+            s = i(62),
+            n = i(17),
+            r = i(20),
+            o = i(38),
+            l = i(5),
+            h = i(37),
+            c = Object.getOwnPropertyDescriptor;
+        e.f = a
+            ? c
+            : function (t, e) {
+                  if (((t = r(t)), (e = o(e, !0)), h))
+                      try {
+                          return c(t, e);
+                      } catch (t) {}
+                  if (l(t, e)) return n(!s.f.call(t, e), t[e]);
+              };
+    },
+    function (t, e) {
+        t.exports = ["constructor", "hasOwnProperty", "isPrototypeOf", "propertyIsEnumerable", "toLocaleString", "toString", "valueOf"];
+    },
+    function (t, e, i) {
+        var a = i(5),
+            s = i(71),
+            n = i(26),
+            r = i(72),
+            o = n("IE_PROTO"),
+            l = Object.prototype;
+        t.exports = r
+            ? Object.getPrototypeOf
+            : function (t) {
+                  return (t = s(t)), a(t, o) ? t[o] : "function" == typeof t.constructor && t instanceof t.constructor ? t.constructor.prototype : t instanceof Object ? l : null;
+              };
+    },
+    function (t, e, i) {
+        var a = i(4),
+            s = i(73),
+            n = i(31),
+            r = i(27),
+            o = i(47),
+            l = i(25),
+            h = i(26)("IE_PROTO"),
+            c = function () {},
+            d = function () {
+                var t,
+                    e = l("iframe"),
+                    i = n.length;
+                for (e.style.display = "none", o.appendChild(e), e.src = String("javascript:"), (t = e.contentWindow.document).open(), t.write("<script>document.F=Object</script>"), t.close(), d = t.F; i--; ) delete d.prototype[n[i]];
+                return d();
+            };
+        (t.exports =
+            Object.create ||
+            function (t, e) {
+                var i;
+                return null !== t ? ((c.prototype = a(t)), (i = new c()), (c.prototype = null), (i[h] = t)) : (i = d()), void 0 === e ? i : s(i, e);
+            }),
+            (r[h] = !0);
+    },
+    function (t, e, i) {
+        var a = i(11).f,
+            s = i(5),
+            n = i(1)("toStringTag");
+        t.exports = function (t, e, i) {
+            t && !s((t = i ? t : t.prototype), n) && a(t, n, { configurable: !0, value: e });
+        };
+    },
+    function (t, e, i) {
+        t.exports = i(0);
+    },
+    function (t, e, i) {
+        var a = i(35),
+            s = i(0),
+            n = function (t) {
+                return "function" == typeof t ? t : void 0;
+            };
+        t.exports = function (t, e) {
+            return arguments.length < 2 ? n(a[t]) || n(s[t]) : (a[t] && a[t][e]) || (s[t] && s[t][e]);
+        };
+    },
+    function (t, e, i) {
+        var a = i(9),
+            s = i(6),
+            n = i(25);
+        t.exports =
+            !a &&
+            !s(function () {
+                return (
+                    7 !=
+                    Object.defineProperty(n("div"), "a", {
+                        get: function () {
+                            return 7;
+                        },
+                    }).a
+                );
+            });
+    },
+    function (t, e, i) {
+        var a = i(7);
+        t.exports = function (t, e) {
+            if (!a(t)) return t;
+            var i, s;
+            if (e && "function" == typeof (i = t.toString) && !a((s = i.call(t)))) return s;
+            if ("function" == typeof (i = t.valueOf) && !a((s = i.call(t)))) return s;
+            if (!e && "function" == typeof (i = t.toString) && !a((s = i.call(t)))) return s;
+            throw TypeError("Can't convert object to primitive value");
+        };
+    },
+    function (t, e, i) {
+        var a = i(16);
+        t.exports = a("native-function-to-string", Function.toString);
+    },
+    function (t, e) {
+        var i = 0,
+            a = Math.random();
+        t.exports = function (t) {
+            return "Symbol(".concat(void 0 === t ? "" : t, ")_", (++i + a).toString(36));
+        };
+    },
+    function (t, e, i) {
+        var a = i(12),
+            s = i(1)("toStringTag"),
+            n =
+                "Arguments" ==
+                a(
+                    (function () {
+                        return arguments;
+                    })()
+                );
+        t.exports = function (t) {
+            var e, i, r;
+            return void 0 === t
+                ? "Undefined"
+                : null === t
+                ? "Null"
+                : "string" ==
+                  typeof (i = (function (t, e) {
+                      try {
+                          return t[e];
+                      } catch (t) {}
+                  })((e = Object(t)), s))
+                ? i
+                : n
+                ? a(e)
+                : "Object" == (r = a(e)) && "function" == typeof e.callee
+                ? "Arguments"
+                : r;
+        };
+    },
+    function (t, e, i) {
+        "use strict";
+        var a = i(8),
+            s = i(70),
+            n = i(32),
+            r = i(48),
+            o = i(34),
+            l = i(3),
+            h = i(15),
+            c = i(1),
+            d = i(18),
+            u = i(13),
+            f = i(46),
+            g = f.IteratorPrototype,
+            p = f.BUGGY_SAFARI_ITERATORS,
+            x = c("iterator"),
+            v = function () {
+                return this;
+            };
+        t.exports = function (t, e, i, c, f, m, b) {
+            s(i, e, c);
+            var y,
+                w,
+                k,
+                S = function (t) {
+                    if (t === f && P) return P;
+                    if (!p && t in L) return L[t];
+                    switch (t) {
+                        case "keys":
+                        case "values":
+                        case "entries":
+                            return function () {
+                                return new i(this, t);
+                            };
+                    }
+                    return function () {
+                        return new i(this);
+                    };
+                },
+                A = e + " Iterator",
+                C = !1,
+                L = t.prototype,
+                E = L[x] || L["@@iterator"] || (f && L[f]),
+                P = (!p && E) || S(f),
+                T = ("Array" == e && L.entries) || E;
+            if (
+                (T && ((y = n(T.call(new t()))), g !== Object.prototype && y.next && (d || n(y) === g || (r ? r(y, g) : "function" != typeof y[x] && l(y, x, v)), o(y, A, !0, !0), d && (u[A] = v))),
+                "values" == f &&
+                    E &&
+                    "values" !== E.name &&
+                    ((C = !0),
+                    (P = function () {
+                        return E.call(this);
+                    })),
+                (d && !b) || L[x] === P || l(L, x, P),
+                (u[e] = P),
+                f)
+            )
+                if (((w = { values: S("values"), keys: m ? P : S("keys"), entries: S("entries") }), b)) for (k in w) (!p && !C && k in L) || h(L, k, w[k]);
+                else a({ target: e, proto: !0, forced: p || C }, w);
+            return w;
+        };
+    },
+    function (t, e, i) {
+        var a = i(5),
+            s = i(20),
+            n = i(67),
+            r = i(27),
+            o = n(!1);
+        t.exports = function (t, e) {
+            var i,
+                n = s(t),
+                l = 0,
+                h = [];
+            for (i in n) !a(r, i) && a(n, i) && h.push(i);
+            for (; e.length > l; ) a(n, (i = e[l++])) && (~o(h, i) || h.push(i));
+            return h;
+        };
+    },
+    function (t, e, i) {
+        var a = i(28),
+            s = Math.min;
+        t.exports = function (t) {
+            return t > 0 ? s(a(t), 9007199254740991) : 0;
+        };
+    },
+    function (t, e, i) {
+        var a = i(6),
+            s = /#|\.prototype\./,
+            n = function (t, e) {
+                var i = o[r(t)];
+                return i == h || (i != l && ("function" == typeof e ? a(e) : !!e));
+            },
+            r = (n.normalize = function (t) {
+                return String(t).replace(s, ".").toLowerCase();
+            }),
+            o = (n.data = {}),
+            l = (n.NATIVE = "N"),
+            h = (n.POLYFILL = "P");
+        t.exports = n;
+    },
+    function (t, e, i) {
+        "use strict";
+        var a,
+            s,
+            n,
+            r = i(32),
+            o = i(3),
+            l = i(5),
+            h = i(1),
+            c = i(18),
+            d = h("iterator"),
+            u = !1;
+        [].keys && ("next" in (n = [].keys()) ? (s = r(r(n))) !== Object.prototype && (a = s) : (u = !0)),
+            null == a && (a = {}),
+            c ||
+                l(a, d) ||
+                o(a, d, function () {
+                    return this;
+                }),
+            (t.exports = { IteratorPrototype: a, BUGGY_SAFARI_ITERATORS: u });
+    },
+    function (t, e, i) {
+        var a = i(0).document;
+        t.exports = a && a.documentElement;
+    },
+    function (t, e, i) {
+        var a = i(75);
+        t.exports =
+            Object.setPrototypeOf ||
+            ("__proto__" in {}
+                ? (function () {
+                      var t,
+                          e = !1,
+                          i = {};
+                      try {
+                          (t = Object.getOwnPropertyDescriptor(Object.prototype, "__proto__").set).call(i, []), (e = i instanceof Array);
+                      } catch (t) {}
+                      return function (i, s) {
+                          return a(i, s), e ? t.call(i, s) : (i.__proto__ = s), i;
+                      };
+                  })()
+                : void 0);
+    },
+    function (t, e, i) {
+        var a = i(10);
+        t.exports = function (t, e, i) {
+            if ((a(t), void 0 === e)) return t;
+            switch (i) {
+                case 0:
+                    return function () {
+                        return t.call(e);
+                    };
+                case 1:
+                    return function (i) {
+                        return t.call(e, i);
+                    };
+                case 2:
+                    return function (i, a) {
+                        return t.call(e, i, a);
+                    };
+                case 3:
+                    return function (i, a, s) {
+                        return t.call(e, i, a, s);
+                    };
+            }
+            return function () {
+                return t.apply(e, arguments);
+            };
+        };
+    },
+    function (t, e, i) {
+        var a = i(4),
+            s = i(10),
+            n = i(1)("species");
+        t.exports = function (t, e) {
+            var i,
+                r = a(t).constructor;
+            return void 0 === r || null == (i = a(r)[n]) ? e : s(i);
+        };
+    },
+    function (t, e, i) {
+        var a,
+            s,
+            n,
+            r = i(0),
+            o = i(6),
+            l = i(12),
+            h = i(49),
+            c = i(47),
+            d = i(25),
+            u = r.location,
+            f = r.setImmediate,
+            g = r.clearImmediate,
+            p = r.process,
+            x = r.MessageChannel,
+            v = r.Dispatch,
+            m = 0,
+            b = {},
+            y = function (t) {
+                if (b.hasOwnProperty(t)) {
+                    var e = b[t];
+                    delete b[t], e();
+                }
+            },
+            w = function (t) {
+                return function () {
+                    y(t);
+                };
+            },
+            k = function (t) {
+                y(t.data);
+            },
+            S = function (t) {
+                r.postMessage(t + "", u.protocol + "//" + u.host);
+            };
+        (f && g) ||
+            ((f = function (t) {
+                for (var e = [], i = 1; arguments.length > i; ) e.push(arguments[i++]);
+                return (
+                    (b[++m] = function () {
+                        ("function" == typeof t ? t : Function(t)).apply(void 0, e);
+                    }),
+                    a(m),
+                    m
+                );
+            }),
+            (g = function (t) {
+                delete b[t];
+            }),
+            "process" == l(p)
+                ? (a = function (t) {
+                      p.nextTick(w(t));
+                  })
+                : v && v.now
+                ? (a = function (t) {
+                      v.now(w(t));
+                  })
+                : x
+                ? ((n = (s = new x()).port2), (s.port1.onmessage = k), (a = h(n.postMessage, n, 1)))
+                : !r.addEventListener || "function" != typeof postMessage || r.importScripts || o(S)
+                ? (a =
+                      "onreadystatechange" in d("script")
+                          ? function (t) {
+                                c.appendChild(d("script")).onreadystatechange = function () {
+                                    c.removeChild(this), y(t);
+                                };
+                            }
+                          : function (t) {
+                                setTimeout(w(t), 0);
+                            })
+                : ((a = S), r.addEventListener("message", k, !1))),
+            (t.exports = { set: f, clear: g });
+    },
+    function (t, e, i) {
+        var a = i(0).navigator;
+        t.exports = (a && a.userAgent) || "";
+    },
+    function (t, e, i) {
+        var a = i(4),
+            s = i(7),
+            n = i(14);
+        t.exports = function (t, e) {
+            if ((a(t), s(e) && e.constructor === t)) return e;
+            var i = n.f(t);
+            return (0, i.resolve)(e), i.promise;
+        };
+    },
+    function (t, e, i) {
+        (t.exports = i(55)), i(91), i(92), i(93), i(94);
+    },
+    function (t, e, i) {
+        i(56), i(60), i(76), i(80), i(90);
+        var a = i(35);
+        t.exports = a.Promise;
+    },
+    function (t, e, i) {
+        var a = i(15),
+            s = i(58),
+            n = Object.prototype;
+        s !== n.toString && a(n, "toString", s, { unsafe: !0 });
+    },
+    function (t, e, i) {
+        var a = i(0),
+            s = i(39),
+            n = a.WeakMap;
+        t.exports = "function" == typeof n && /native code/.test(s.call(n));
+    },
+    function (t, e, i) {
+        "use strict";
+        var a = i(41),
+            s = {};
+        (s[i(1)("toStringTag")] = "z"),
+            (t.exports =
+                "[object z]" !== String(s)
+                    ? function () {
+                          return "[object " + a(this) + "]";
+                      }
+                    : s.toString);
+    },
+    function (t, e, i) {
+        var a = i(6);
+        t.exports =
+            !!Object.getOwnPropertySymbols &&
+            !a(function () {
+                return !String(Symbol());
+            });
+    },
+    function (t, e, i) {
+        "use strict";
+        var a = i(61),
+            s = i(19),
+            n = i(42),
+            r = s.set,
+            o = s.getterFor("String Iterator");
+        n(
+            String,
+            "String",
+            function (t) {
+                r(this, { type: "String Iterator", string: String(t), index: 0 });
+            },
+            function () {
+                var t,
+                    e = o(this),
+                    i = e.string,
+                    s = e.index;
+                return s >= i.length ? { value: void 0, done: !0 } : ((t = a(i, s, !0)), (e.index += t.length), { value: t, done: !1 });
+            }
+        );
+    },
+    function (t, e, i) {
+        var a = i(28),
+            s = i(29);
+        t.exports = function (t, e, i) {
+            var n,
+                r,
+                o = String(s(t)),
+                l = a(e),
+                h = o.length;
+            return l < 0 || l >= h
+                ? i
+                    ? ""
+                    : void 0
+                : (n = o.charCodeAt(l)) < 55296 || n > 56319 || l + 1 === h || (r = o.charCodeAt(l + 1)) < 56320 || r > 57343
+                ? i
+                    ? o.charAt(l)
+                    : n
+                : i
+                ? o.slice(l, l + 2)
+                : r - 56320 + ((n - 55296) << 10) + 65536;
+        };
+    },
+    function (t, e, i) {
+        "use strict";
+        var a = {}.propertyIsEnumerable,
+            s = Object.getOwnPropertyDescriptor,
+            n = s && !a.call({ 1: 2 }, 1);
+        e.f = n
+            ? function (t) {
+                  var e = s(this, t);
+                  return !!e && e.enumerable;
+              }
+            : a;
+    },
+    function (t, e, i) {
+        var a = i(6),
+            s = i(12),
+            n = "".split;
+        t.exports = a(function () {
+            return !Object("z").propertyIsEnumerable(0);
+        })
+            ? function (t) {
+                  return "String" == s(t) ? n.call(t, "") : Object(t);
+              }
+            : Object;
+    },
+    function (t, e, i) {
+        var a = i(5),
+            s = i(65),
+            n = i(30),
+            r = i(11);
+        t.exports = function (t, e) {
+            for (var i = s(e), o = r.f, l = n.f, h = 0; h < i.length; h++) {
+                var c = i[h];
+                a(t, c) || o(t, c, l(e, c));
+            }
+        };
+    },
+    function (t, e, i) {
+        var a = i(0),
+            s = i(66),
+            n = i(69),
+            r = i(4),
+            o = a.Reflect;
+        t.exports =
+            (o && o.ownKeys) ||
+            function (t) {
+                var e = s.f(r(t)),
+                    i = n.f;
+                return i ? e.concat(i(t)) : e;
+            };
+    },
+    function (t, e, i) {
+        var a = i(43),
+            s = i(31).concat("length", "prototype");
+        e.f =
+            Object.getOwnPropertyNames ||
+            function (t) {
+                return a(t, s);
+            };
+    },
+    function (t, e, i) {
+        var a = i(20),
+            s = i(44),
+            n = i(68);
+        t.exports = function (t) {
+            return function (e, i, r) {
+                var o,
+                    l = a(e),
+                    h = s(l.length),
+                    c = n(r, h);
+                if (t && i != i) {
+                    for (; h > c; ) if ((o = l[c++]) != o) return !0;
+                } else for (; h > c; c++) if ((t || c in l) && l[c] === i) return t || c || 0;
+                return !t && -1;
+            };
+        };
+    },
+    function (t, e, i) {
+        var a = i(28),
+            s = Math.max,
+            n = Math.min;
+        t.exports = function (t, e) {
+            var i = a(t);
+            return i < 0 ? s(i + e, 0) : n(i, e);
+        };
+    },
+    function (t, e) {
+        e.f = Object.getOwnPropertySymbols;
+    },
+    function (t, e, i) {
+        "use strict";
+        var a = i(46).IteratorPrototype,
+            s = i(33),
+            n = i(17),
+            r = i(34),
+            o = i(13),
+            l = function () {
+                return this;
+            };
+        t.exports = function (t, e, i) {
+            var h = e + " Iterator";
+            return (t.prototype = s(a, { next: n(1, i) })), r(t, h, !1, !0), (o[h] = l), t;
+        };
+    },
+    function (t, e, i) {
+        var a = i(29);
+        t.exports = function (t) {
+            return Object(a(t));
+        };
+    },
+    function (t, e, i) {
+        var a = i(6);
+        t.exports = !a(function () {
+            function t() {}
+            return (t.prototype.constructor = null), Object.getPrototypeOf(new t()) !== t.prototype;
+        });
+    },
+    function (t, e, i) {
+        var a = i(9),
+            s = i(11),
+            n = i(4),
+            r = i(74);
+        t.exports = a
+            ? Object.defineProperties
+            : function (t, e) {
+                  n(t);
+                  for (var i, a = r(e), o = a.length, l = 0; o > l; ) s.f(t, (i = a[l++]), e[i]);
+                  return t;
+              };
+    },
+    function (t, e, i) {
+        var a = i(43),
+            s = i(31);
+        t.exports =
+            Object.keys ||
+            function (t) {
+                return a(t, s);
+            };
+    },
+    function (t, e, i) {
+        var a = i(7),
+            s = i(4);
+        t.exports = function (t, e) {
+            if ((s(t), !a(e) && null !== e)) throw TypeError("Can't set " + String(e) + " as a prototype");
+        };
+    },
+    function (t, e, i) {
+        var a = i(0),
+            s = i(77),
+            n = i(78),
+            r = i(3),
+            o = i(1),
+            l = o("iterator"),
+            h = o("toStringTag"),
+            c = n.values;
+        for (var d in s) {
+            var u = a[d],
+                f = u && u.prototype;
+            if (f) {
+                if (f[l] !== c)
+                    try {
+                        r(f, l, c);
+                    } catch (t) {
+                        f[l] = c;
+                    }
+                if ((f[h] || r(f, h, d), s[d]))
+                    for (var g in n)
+                        if (f[g] !== n[g])
+                            try {
+                                r(f, g, n[g]);
+                            } catch (t) {
+                                f[g] = n[g];
+                            }
+            }
+        }
+    },
+    function (t, e) {
+        t.exports = {
+            CSSRuleList: 0,
+            CSSStyleDeclaration: 0,
+            CSSValueList: 0,
+            ClientRectList: 0,
+            DOMRectList: 0,
+            DOMStringList: 0,
+            DOMTokenList: 1,
+            DataTransferItemList: 0,
+            FileList: 0,
+            HTMLAllCollection: 0,
+            HTMLCollection: 0,
+            HTMLFormElement: 0,
+            HTMLSelectElement: 0,
+            MediaList: 0,
+            MimeTypeArray: 0,
+            NamedNodeMap: 0,
+            NodeList: 1,
+            PaintRequestList: 0,
+            Plugin: 0,
+            PluginArray: 0,
+            SVGLengthList: 0,
+            SVGNumberList: 0,
+            SVGPathSegList: 0,
+            SVGPointList: 0,
+            SVGStringList: 0,
+            SVGTransformList: 0,
+            SourceBufferList: 0,
+            StyleSheetList: 0,
+            TextTrackCueList: 0,
+            TextTrackList: 0,
+            TouchList: 0,
+        };
+    },
+    function (t, e, i) {
+        "use strict";
+        var a = i(20),
+            s = i(79),
+            n = i(13),
+            r = i(19),
+            o = i(42),
+            l = r.set,
+            h = r.getterFor("Array Iterator");
+        (t.exports = o(
+            Array,
+            "Array",
+            function (t, e) {
+                l(this, { type: "Array Iterator", target: a(t), index: 0, kind: e });
+            },
+            function () {
+                var t = h(this),
+                    e = t.target,
+                    i = t.kind,
+                    a = t.index++;
+                return !e || a >= e.length ? ((t.target = void 0), { value: void 0, done: !0 }) : "keys" == i ? { value: a, done: !1 } : "values" == i ? { value: e[a], done: !1 } : { value: [a, e[a]], done: !1 };
+            },
+            "values"
+        )),
+            (n.Arguments = n.Array),
+            s("keys"),
+            s("values"),
+            s("entries");
+    },
+    function (t, e, i) {
+        var a = i(1),
+            s = i(33),
+            n = i(3),
+            r = a("unscopables"),
+            o = Array.prototype;
+        null == o[r] && n(o, r, s(null)),
+            (t.exports = function (t) {
+                o[r][t] = !0;
+            });
+    },
+    function (t, e, i) {
+        "use strict";
+        var a,
+            s,
+            n,
+            r = i(8),
+            o = i(18),
+            l = i(0),
+            h = i(35),
+            c = i(81),
+            d = i(34),
+            u = i(82),
+            f = i(7),
+            g = i(10),
+            p = i(83),
+            x = i(12),
+            v = i(21),
+            m = i(87),
+            b = i(50),
+            y = i(51).set,
+            w = i(88),
+            k = i(53),
+            S = i(89),
+            A = i(14),
+            C = i(22),
+            L = i(52),
+            E = i(19),
+            P = i(45),
+            T = i(1)("species"),
+            M = "Promise",
+            z = E.get,
+            I = E.set,
+            X = E.getterFor(M),
+            F = l.Promise,
+            Y = l.TypeError,
+            O = l.document,
+            R = l.process,
+            D = l.fetch,
+            N = R && R.versions,
+            H = (N && N.v8) || "",
+            _ = A.f,
+            W = _,
+            B = "process" == x(R),
+            V = !!(O && O.createEvent && l.dispatchEvent),
+            G = P(M, function () {
+                var t = F.resolve(1),
+                    e = function () {},
+                    i = ((t.constructor = {})[T] = function (t) {
+                        t(e, e);
+                    });
+                return !((B || "function" == typeof PromiseRejectionEvent) && (!o || t.finally) && t.then(e) instanceof i && 0 !== H.indexOf("6.6") && -1 === L.indexOf("Chrome/66"));
+            }),
+            j =
+                G ||
+                !m(function (t) {
+                    F.all(t).catch(function () {});
+                }),
+            U = function (t) {
+                var e;
+                return !(!f(t) || "function" != typeof (e = t.then)) && e;
+            },
+            q = function (t, e, i) {
+                if (!e.notified) {
+                    e.notified = !0;
+                    var a = e.reactions;
+                    w(function () {
+                        for (
+                            var s = e.value,
+                                n = 1 == e.state,
+                                r = 0,
+                                o = function (i) {
+                                    var a,
+                                        r,
+                                        o,
+                                        l = n ? i.ok : i.fail,
+                                        h = i.resolve,
+                                        c = i.reject,
+                                        d = i.domain;
+                                    try {
+                                        l
+                                            ? (n || (2 === e.rejection && Q(t, e), (e.rejection = 1)),
+                                              !0 === l ? (a = s) : (d && d.enter(), (a = l(s)), d && (d.exit(), (o = !0))),
+                                              a === i.promise ? c(Y("Promise-chain cycle")) : (r = U(a)) ? r.call(a, h, c) : h(a))
+                                            : c(s);
+                                    } catch (t) {
+                                        d && !o && d.exit(), c(t);
+                                    }
+                                };
+                            a.length > r;
+
+                        )
+                            o(a[r++]);
+                        (e.reactions = []), (e.notified = !1), i && !e.rejection && $(t, e);
+                    });
+                }
+            },
+            Z = function (t, e, i) {
+                var a, s;
+                V ? (((a = O.createEvent("Event")).promise = e), (a.reason = i), a.initEvent(t, !1, !0), l.dispatchEvent(a)) : (a = { promise: e, reason: i }),
+                    (s = l["on" + t]) ? s(a) : "unhandledrejection" === t && S("Unhandled promise rejection", i);
+            },
+            $ = function (t, e) {
+                y.call(l, function () {
+                    var i,
+                        a = e.value;
+                    if (
+                        J(e) &&
+                        ((i = C(function () {
+                            B ? R.emit("unhandledRejection", a, t) : Z("unhandledrejection", t, a);
+                        })),
+                        (e.rejection = B || J(e) ? 2 : 1),
+                        i.error)
+                    )
+                        throw i.value;
+                });
+            },
+            J = function (t) {
+                return 1 !== t.rejection && !t.parent;
+            },
+            Q = function (t, e) {
+                y.call(l, function () {
+                    B ? R.emit("rejectionHandled", t) : Z("rejectionhandled", t, e.value);
+                });
+            },
+            K = function (t, e, i, a) {
+                return function (s) {
+                    t(e, i, s, a);
+                };
+            },
+            tt = function (t, e, i, a) {
+                e.done || ((e.done = !0), a && (e = a), (e.value = i), (e.state = 2), q(t, e, !0));
+            },
+            et = function (t, e, i, a) {
+                if (!e.done) {
+                    (e.done = !0), a && (e = a);
+                    try {
+                        if (t === i) throw Y("Promise can't be resolved itself");
+                        var s = U(i);
+                        s
+                            ? w(function () {
+                                  var a = { done: !1 };
+                                  try {
+                                      s.call(i, K(et, t, a, e), K(tt, t, a, e));
+                                  } catch (i) {
+                                      tt(t, a, i, e);
+                                  }
+                              })
+                            : ((e.value = i), (e.state = 1), q(t, e, !1));
+                    } catch (i) {
+                        tt(t, { done: !1 }, i, e);
+                    }
+                }
+            };
+        G &&
+            ((F = function (t) {
+                p(this, F, M), g(t), a.call(this);
+                var e = z(this);
+                try {
+                    t(K(et, this, e), K(tt, this, e));
+                } catch (t) {
+                    tt(this, e, t);
+                }
+            }),
+            ((a = function (t) {
+                I(this, { type: M, done: !1, notified: !1, parent: !1, reactions: [], rejection: !1, state: 0, value: void 0 });
+            }).prototype = c(F.prototype, {
+                then: function (t, e) {
+                    var i = X(this),
+                        a = _(b(this, F));
+                    return (a.ok = "function" != typeof t || t), (a.fail = "function" == typeof e && e), (a.domain = B ? R.domain : void 0), (i.parent = !0), i.reactions.push(a), 0 != i.state && q(this, i, !1), a.promise;
+                },
+                catch: function (t) {
+                    return this.then(void 0, t);
+                },
+            })),
+            (s = function () {
+                var t = new a(),
+                    e = z(t);
+                (this.promise = t), (this.resolve = K(et, t, e)), (this.reject = K(tt, t, e));
+            }),
+            (A.f = _ = function (t) {
+                return t === F || t === n ? new s(t) : W(t);
+            }),
+            o ||
+                "function" != typeof D ||
+                r(
+                    { global: !0, enumerable: !0, forced: !0 },
+                    {
+                        fetch: function (t) {
+                            return k(F, D.apply(l, arguments));
+                        },
+                    }
+                )),
+            r({ global: !0, wrap: !0, forced: G }, { Promise: F }),
+            d(F, M, !1, !0),
+            u(M),
+            (n = h.Promise),
+            r(
+                { target: M, stat: !0, forced: G },
+                {
+                    reject: function (t) {
+                        var e = _(this);
+                        return e.reject.call(void 0, t), e.promise;
+                    },
+                }
+            ),
+            r(
+                { target: M, stat: !0, forced: o || G },
+                {
+                    resolve: function (t) {
+                        return k(o && this === n ? F : this, t);
+                    },
+                }
+            ),
+            r(
+                { target: M, stat: !0, forced: j },
+                {
+                    all: function (t) {
+                        var e = this,
+                            i = _(e),
+                            a = i.resolve,
+                            s = i.reject,
+                            n = C(function () {
+                                var i = g(e.resolve),
+                                    n = [],
+                                    r = 0,
+                                    o = 1;
+                                v(t, function (t) {
+                                    var l = r++,
+                                        h = !1;
+                                    n.push(void 0),
+                                        o++,
+                                        i.call(e, t).then(function (t) {
+                                            h || ((h = !0), (n[l] = t), --o || a(n));
+                                        }, s);
+                                }),
+                                    --o || a(n);
+                            });
+                        return n.error && s(n.value), i.promise;
+                    },
+                    race: function (t) {
+                        var e = this,
+                            i = _(e),
+                            a = i.reject,
+                            s = C(function () {
+                                var s = g(e.resolve);
+                                v(t, function (t) {
+                                    s.call(e, t).then(i.resolve, a);
+                                });
+                            });
+                        return s.error && a(s.value), i.promise;
+                    },
+                }
+            );
+    },
+    function (t, e, i) {
+        var a = i(15);
+        t.exports = function (t, e, i) {
+            for (var s in e) a(t, s, e[s], i);
+            return t;
+        };
+    },
+    function (t, e, i) {
+        "use strict";
+        var a = i(36),
+            s = i(11),
+            n = i(1),
+            r = i(9),
+            o = n("species");
+        t.exports = function (t) {
+            var e = a(t),
+                i = s.f;
+            r &&
+                e &&
+                !e[o] &&
+                i(e, o, {
+                    configurable: !0,
+                    get: function () {
+                        return this;
+                    },
+                });
+        };
+    },
+    function (t, e) {
+        t.exports = function (t, e, i) {
+            if (!(t instanceof e)) throw TypeError("Incorrect " + (i ? i + " " : "") + "invocation");
+            return t;
+        };
+    },
+    function (t, e, i) {
+        var a = i(1),
+            s = i(13),
+            n = a("iterator"),
+            r = Array.prototype;
+        t.exports = function (t) {
+            return void 0 !== t && (s.Array === t || r[n] === t);
+        };
+    },
+    function (t, e, i) {
+        var a = i(41),
+            s = i(13),
+            n = i(1)("iterator");
+        t.exports = function (t) {
+            if (null != t) return t[n] || t["@@iterator"] || s[a(t)];
+        };
+    },
+    function (t, e, i) {
+        var a = i(4);
+        t.exports = function (t, e, i, s) {
+            try {
+                return s ? e(a(i)[0], i[1]) : e(i);
+            } catch (e) {
+                var n = t.return;
+                throw (void 0 !== n && a(n.call(t)), e);
+            }
+        };
+    },
+    function (t, e, i) {
+        var a = i(1)("iterator"),
+            s = !1;
+        try {
+            var n = 0,
+                r = {
+                    next: function () {
+                        return { done: !!n++ };
+                    },
+                    return: function () {
+                        s = !0;
+                    },
+                };
+            (r[a] = function () {
+                return this;
+            }),
+                Array.from(r, function () {
+                    throw 2;
+                });
+        } catch (t) {}
+        t.exports = function (t, e) {
+            if (!e && !s) return !1;
+            var i = !1;
+            try {
+                var n = {};
+                (n[a] = function () {
+                    return {
+                        next: function () {
+                            return { done: (i = !0) };
+                        },
+                    };
+                }),
+                    t(n);
+            } catch (t) {}
+            return i;
+        };
+    },
+    function (t, e, i) {
+        var a,
+            s,
+            n,
+            r,
+            o,
+            l,
+            h,
+            c = i(0),
+            d = i(30).f,
+            u = i(12),
+            f = i(51).set,
+            g = i(52),
+            p = c.MutationObserver || c.WebKitMutationObserver,
+            x = c.process,
+            v = c.Promise,
+            m = "process" == u(x),
+            b = d(c, "queueMicrotask"),
+            y = b && b.value;
+        y ||
+            ((a = function () {
+                var t, e;
+                for (m && (t = x.domain) && t.exit(); s; ) {
+                    (e = s.fn), (s = s.next);
+                    try {
+                        e();
+                    } catch (t) {
+                        throw (s ? r() : (n = void 0), t);
+                    }
+                }
+                (n = void 0), t && t.enter();
+            }),
+            m
+                ? (r = function () {
+                      x.nextTick(a);
+                  })
+                : p && !/(iphone|ipod|ipad).*applewebkit/i.test(g)
+                ? ((o = !0),
+                  (l = document.createTextNode("")),
+                  new p(a).observe(l, { characterData: !0 }),
+                  (r = function () {
+                      l.data = o = !o;
+                  }))
+                : v && v.resolve
+                ? ((h = v.resolve(void 0)),
+                  (r = function () {
+                      h.then(a);
+                  }))
+                : (r = function () {
+                      f.call(c, a);
+                  })),
+            (t.exports =
+                y ||
+                function (t) {
+                    var e = { fn: t, next: void 0 };
+                    n && (n.next = e), s || ((s = e), r()), (n = e);
+                });
+    },
+    function (t, e, i) {
+        var a = i(0);
+        t.exports = function (t, e) {
+            var i = a.console;
+            i && i.error && (1 === arguments.length ? i.error(t) : i.error(t, e));
+        };
+    },
+    function (t, e, i) {
+        "use strict";
+        var a = i(8),
+            s = i(36),
+            n = i(50),
+            r = i(53);
+        a(
+            { target: "Promise", proto: !0, real: !0 },
+            {
+                finally: function (t) {
+                    var e = n(this, s("Promise")),
+                        i = "function" == typeof t;
+                    return this.then(
+                        i
+                            ? function (i) {
+                                  return r(e, t()).then(function () {
+                                      return i;
+                                  });
+                              }
+                            : t,
+                        i
+                            ? function (i) {
+                                  return r(e, t()).then(function () {
+                                      throw i;
+                                  });
+                              }
+                            : t
+                    );
+                },
+            }
+        );
+    },
+    function (t, e, i) {
+        var a = i(8),
+            s = i(32),
+            n = i(48),
+            r = i(33),
+            o = i(17),
+            l = i(21),
+            h = i(3),
+            c = function (t, e) {
+                var i = this;
+                if (!(i instanceof c)) return new c(t, e);
+                n && (i = n(new Error(e), s(i)));
+                var a = [];
+                return l(t, a.push, a), (i.errors = a), void 0 !== e && h(i, "message", String(e)), i;
+            };
+        (c.prototype = r(Error.prototype, { constructor: o(5, c), name: o(5, "AggregateError") })), a({ global: !0 }, { AggregateError: c });
+    },
+    function (t, e, i) {
+        "use strict";
+        var a = i(8),
+            s = i(10),
+            n = i(14),
+            r = i(22),
+            o = i(21);
+        a(
+            { target: "Promise", stat: !0 },
+            {
+                allSettled: function (t) {
+                    var e = this,
+                        i = n.f(e),
+                        a = i.resolve,
+                        l = i.reject,
+                        h = r(function () {
+                            var i = s(e.resolve),
+                                n = [],
+                                r = 0,
+                                l = 1;
+                            o(t, function (t) {
+                                var s = r++,
+                                    o = !1;
+                                n.push(void 0),
+                                    l++,
+                                    i.call(e, t).then(
+                                        function (t) {
+                                            o || ((o = !0), (n[s] = { status: "fulfilled", value: t }), --l || a(n));
+                                        },
+                                        function (t) {
+                                            o || ((o = !0), (n[s] = { status: "rejected", reason: t }), --l || a(n));
+                                        }
+                                    );
+                            }),
+                                --l || a(n);
+                        });
+                    return h.error && l(h.value), i.promise;
+                },
+            }
+        );
+    },
+    function (t, e, i) {
+        "use strict";
+        var a = i(8),
+            s = i(14),
+            n = i(22);
+        a(
+            { target: "Promise", stat: !0 },
+            {
+                try: function (t) {
+                    var e = s.f(this),
+                        i = n(t);
+                    return (i.error ? e.reject : e.resolve)(i.value), e.promise;
+                },
+            }
+        );
+    },
+    function (t, e, i) {
+        "use strict";
+        var a = i(8),
+            s = i(10),
+            n = i(36),
+            r = i(14),
+            o = i(22),
+            l = i(21);
+        a(
+            { target: "Promise", stat: !0 },
+            {
+                any: function (t) {
+                    var e = this,
+                        i = r.f(e),
+                        a = i.resolve,
+                        h = i.reject,
+                        c = o(function () {
+                            var i = s(e.resolve),
+                                r = [],
+                                o = 0,
+                                c = 1,
+                                d = !1;
+                            l(t, function (t) {
+                                var s = o++,
+                                    l = !1;
+                                r.push(void 0),
+                                    c++,
+                                    i.call(e, t).then(
+                                        function (t) {
+                                            l || d || ((d = !0), a(t));
+                                        },
+                                        function (t) {
+                                            l || d || ((l = !0), (r[s] = t), --c || h(new (n("AggregateError"))(r, "No one promise resolved")));
+                                        }
+                                    );
+                            }),
+                                --c || h(new (n("AggregateError"))(r, "No one promise resolved"));
+                        });
+                    return c.error && h(c.value), i.promise;
+                },
+            }
+        );
+    },
+    function (t, e, i) {
+        var a = (function (t) {
+            "use strict";
+            var e,
+                i = Object.prototype,
+                a = i.hasOwnProperty,
+                s = "function" == typeof Symbol ? Symbol : {},
+                n = s.iterator || "@@iterator",
+                r = s.asyncIterator || "@@asyncIterator",
+                o = s.toStringTag || "@@toStringTag";
+            function l(t, e, i, a) {
+                var s = e && e.prototype instanceof p ? e : p,
+                    n = Object.create(s.prototype),
+                    r = new E(a || []);
+                return (
+                    (n._invoke = (function (t, e, i) {
+                        var a = c;
+                        return function (s, n) {
+                            if (a === u) throw new Error("Generator is already running");
+                            if (a === f) {
+                                if ("throw" === s) throw n;
+                                return T();
+                            }
+                            for (i.method = s, i.arg = n; ; ) {
+                                var r = i.delegate;
+                                if (r) {
+                                    var o = A(r, i);
+                                    if (o) {
+                                        if (o === g) continue;
+                                        return o;
+                                    }
+                                }
+                                if ("next" === i.method) i.sent = i._sent = i.arg;
+                                else if ("throw" === i.method) {
+                                    if (a === c) throw ((a = f), i.arg);
+                                    i.dispatchException(i.arg);
+                                } else "return" === i.method && i.abrupt("return", i.arg);
+                                a = u;
+                                var l = h(t, e, i);
+                                if ("normal" === l.type) {
+                                    if (((a = i.done ? f : d), l.arg === g)) continue;
+                                    return { value: l.arg, done: i.done };
+                                }
+                                "throw" === l.type && ((a = f), (i.method = "throw"), (i.arg = l.arg));
+                            }
+                        };
+                    })(t, i, r)),
+                    n
+                );
+            }
+            function h(t, e, i) {
+                try {
+                    return { type: "normal", arg: t.call(e, i) };
+                } catch (t) {
+                    return { type: "throw", arg: t };
+                }
+            }
+            t.wrap = l;
+            var c = "suspendedStart",
+                d = "suspendedYield",
+                u = "executing",
+                f = "completed",
+                g = {};
+            function p() {}
+            function x() {}
+            function v() {}
+            var m = {};
+            m[n] = function () {
+                return this;
+            };
+            var b = Object.getPrototypeOf,
+                y = b && b(b(P([])));
+            y && y !== i && a.call(y, n) && (m = y);
+            var w = (v.prototype = p.prototype = Object.create(m));
+            function k(t) {
+                ["next", "throw", "return"].forEach(function (e) {
+                    t[e] = function (t) {
+                        return this._invoke(e, t);
+                    };
+                });
+            }
+            function S(t) {
+                var e;
+                this._invoke = function (i, s) {
+                    function n() {
+                        return new Promise(function (e, n) {
+                            !(function e(i, s, n, r) {
+                                var o = h(t[i], t, s);
+                                if ("throw" !== o.type) {
+                                    var l = o.arg,
+                                        c = l.value;
+                                    return c && "object" == typeof c && a.call(c, "__await")
+                                        ? Promise.resolve(c.__await).then(
+                                              function (t) {
+                                                  e("next", t, n, r);
+                                              },
+                                              function (t) {
+                                                  e("throw", t, n, r);
+                                              }
+                                          )
+                                        : Promise.resolve(c).then(
+                                              function (t) {
+                                                  (l.value = t), n(l);
+                                              },
+                                              function (t) {
+                                                  return e("throw", t, n, r);
+                                              }
+                                          );
+                                }
+                                r(o.arg);
+                            })(i, s, e, n);
+                        });
+                    }
+                    return (e = e ? e.then(n, n) : n());
+                };
+            }
+            function A(t, i) {
+                var a = t.iterator[i.method];
+                if (a === e) {
+                    if (((i.delegate = null), "throw" === i.method)) {
+                        if (t.iterator.return && ((i.method = "return"), (i.arg = e), A(t, i), "throw" === i.method)) return g;
+                        (i.method = "throw"), (i.arg = new TypeError("The iterator does not provide a 'throw' method"));
+                    }
+                    return g;
+                }
+                var s = h(a, t.iterator, i.arg);
+                if ("throw" === s.type) return (i.method = "throw"), (i.arg = s.arg), (i.delegate = null), g;
+                var n = s.arg;
+                return n
+                    ? n.done
+                        ? ((i[t.resultName] = n.value), (i.next = t.nextLoc), "return" !== i.method && ((i.method = "next"), (i.arg = e)), (i.delegate = null), g)
+                        : n
+                    : ((i.method = "throw"), (i.arg = new TypeError("iterator result is not an object")), (i.delegate = null), g);
+            }
+            function C(t) {
+                var e = { tryLoc: t[0] };
+                1 in t && (e.catchLoc = t[1]), 2 in t && ((e.finallyLoc = t[2]), (e.afterLoc = t[3])), this.tryEntries.push(e);
+            }
+            function L(t) {
+                var e = t.completion || {};
+                (e.type = "normal"), delete e.arg, (t.completion = e);
+            }
+            function E(t) {
+                (this.tryEntries = [{ tryLoc: "root" }]), t.forEach(C, this), this.reset(!0);
+            }
+            function P(t) {
+                if (t) {
+                    var i = t[n];
+                    if (i) return i.call(t);
+                    if ("function" == typeof t.next) return t;
+                    if (!isNaN(t.length)) {
+                        var s = -1,
+                            r = function i() {
+                                for (; ++s < t.length; ) if (a.call(t, s)) return (i.value = t[s]), (i.done = !1), i;
+                                return (i.value = e), (i.done = !0), i;
+                            };
+                        return (r.next = r);
+                    }
+                }
+                return { next: T };
+            }
+            function T() {
+                return { value: e, done: !0 };
+            }
+            return (
+                (x.prototype = w.constructor = v),
+                (v.constructor = x),
+                (v[o] = x.displayName = "GeneratorFunction"),
+                (t.isGeneratorFunction = function (t) {
+                    var e = "function" == typeof t && t.constructor;
+                    return !!e && (e === x || "GeneratorFunction" === (e.displayName || e.name));
+                }),
+                (t.mark = function (t) {
+                    return Object.setPrototypeOf ? Object.setPrototypeOf(t, v) : ((t.__proto__ = v), o in t || (t[o] = "GeneratorFunction")), (t.prototype = Object.create(w)), t;
+                }),
+                (t.awrap = function (t) {
+                    return { __await: t };
+                }),
+                k(S.prototype),
+                (S.prototype[r] = function () {
+                    return this;
+                }),
+                (t.AsyncIterator = S),
+                (t.async = function (e, i, a, s) {
+                    var n = new S(l(e, i, a, s));
+                    return t.isGeneratorFunction(i)
+                        ? n
+                        : n.next().then(function (t) {
+                              return t.done ? t.value : n.next();
+                          });
+                }),
+                k(w),
+                (w[o] = "Generator"),
+                (w[n] = function () {
+                    return this;
+                }),
+                (w.toString = function () {
+                    return "[object Generator]";
+                }),
+                (t.keys = function (t) {
+                    var e = [];
+                    for (var i in t) e.push(i);
+                    return (
+                        e.reverse(),
+                        function i() {
+                            for (; e.length; ) {
+                                var a = e.pop();
+                                if (a in t) return (i.value = a), (i.done = !1), i;
+                            }
+                            return (i.done = !0), i;
+                        }
+                    );
+                }),
+                (t.values = P),
+                (E.prototype = {
+                    constructor: E,
+                    reset: function (t) {
+                        if (((this.prev = 0), (this.next = 0), (this.sent = this._sent = e), (this.done = !1), (this.delegate = null), (this.method = "next"), (this.arg = e), this.tryEntries.forEach(L), !t))
+                            for (var i in this) "t" === i.charAt(0) && a.call(this, i) && !isNaN(+i.slice(1)) && (this[i] = e);
+                    },
+                    stop: function () {
+                        this.done = !0;
+                        var t = this.tryEntries[0].completion;
+                        if ("throw" === t.type) throw t.arg;
+                        return this.rval;
+                    },
+                    dispatchException: function (t) {
+                        if (this.done) throw t;
+                        var i = this;
+                        function s(a, s) {
+                            return (o.type = "throw"), (o.arg = t), (i.next = a), s && ((i.method = "next"), (i.arg = e)), !!s;
+                        }
+                        for (var n = this.tryEntries.length - 1; n >= 0; --n) {
+                            var r = this.tryEntries[n],
+                                o = r.completion;
+                            if ("root" === r.tryLoc) return s("end");
+                            if (r.tryLoc <= this.prev) {
+                                var l = a.call(r, "catchLoc"),
+                                    h = a.call(r, "finallyLoc");
+                                if (l && h) {
+                                    if (this.prev < r.catchLoc) return s(r.catchLoc, !0);
+                                    if (this.prev < r.finallyLoc) return s(r.finallyLoc);
+                                } else if (l) {
+                                    if (this.prev < r.catchLoc) return s(r.catchLoc, !0);
+                                } else {
+                                    if (!h) throw new Error("try statement without catch or finally");
+                                    if (this.prev < r.finallyLoc) return s(r.finallyLoc);
+                                }
+                            }
+                        }
+                    },
+                    abrupt: function (t, e) {
+                        for (var i = this.tryEntries.length - 1; i >= 0; --i) {
+                            var s = this.tryEntries[i];
+                            if (s.tryLoc <= this.prev && a.call(s, "finallyLoc") && this.prev < s.finallyLoc) {
+                                var n = s;
+                                break;
+                            }
+                        }
+                        n && ("break" === t || "continue" === t) && n.tryLoc <= e && e <= n.finallyLoc && (n = null);
+                        var r = n ? n.completion : {};
+                        return (r.type = t), (r.arg = e), n ? ((this.method = "next"), (this.next = n.finallyLoc), g) : this.complete(r);
+                    },
+                    complete: function (t, e) {
+                        if ("throw" === t.type) throw t.arg;
+                        return (
+                            "break" === t.type || "continue" === t.type
+                                ? (this.next = t.arg)
+                                : "return" === t.type
+                                ? ((this.rval = this.arg = t.arg), (this.method = "return"), (this.next = "end"))
+                                : "normal" === t.type && e && (this.next = e),
+                            g
+                        );
+                    },
+                    finish: function (t) {
+                        for (var e = this.tryEntries.length - 1; e >= 0; --e) {
+                            var i = this.tryEntries[e];
+                            if (i.finallyLoc === t) return this.complete(i.completion, i.afterLoc), L(i), g;
+                        }
+                    },
+                    catch: function (t) {
+                        for (var e = this.tryEntries.length - 1; e >= 0; --e) {
+                            var i = this.tryEntries[e];
+                            if (i.tryLoc === t) {
+                                var a = i.completion;
+                                if ("throw" === a.type) {
+                                    var s = a.arg;
+                                    L(i);
+                                }
+                                return s;
+                            }
+                        }
+                        throw new Error("illegal catch attempt");
+                    },
+                    delegateYield: function (t, i, a) {
+                        return (this.delegate = { iterator: P(t), resultName: i, nextLoc: a }), "next" === this.method && (this.arg = e), g;
+                    },
+                }),
+                t
+            );
+        })(t.exports);
+        try {
+            regeneratorRuntime = a;
+        } catch (t) {
+            Function("r", "regeneratorRuntime = r")(a);
+        }
+    },
+    function (t, e, i) {
+        var a = i(97);
+        "string" == typeof a && (a = [[t.i, a, ""]]);
+        var s = { hmr: !0, transform: void 0, insertInto: void 0 };
+        i(99)(a, s);
+        a.locals && (t.exports = a.locals);
+    },
+    function (t, e, i) {
+        (t.exports = i(98)(!1)).push([
+            t.i,
+            ".apexcharts-zoom-icon {\r\n  display: none;\r\n}\r\n.footer {\r\n  margin-top: -20px;\r\n  font-size: 12px;\r\n  padding-right: 12px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: flex-end;\r\n  font-family: monospace;\r\n}\r\n.image {\r\n  width: 30px;\r\n}\r\n.arrow_box {\r\n  padding: 10px;\r\n  text-align: center;\r\n  font-family: Helvetica, Arial, sans-serif;\r\n}\r\n.tooltip-weights {\r\n  border-top: 1px solid rgba(255, 255, 255, 0.2);\r\n  padding: 5px;\r\n  display: block;\r\n  font-size: 12px;\r\n}\r\n.pc_negative {\r\n  color: red;\r\n  font-weight: bold;\r\n}\r\n.pc_positive {\r\n  color: green;\r\n  font-weight: bold;\r\n}\r\n.tooltip-heatmap-date {\r\n  font-size: 11px;\r\n  color: #777;\r\n}\r\n.tooltip-heatmap-price {\r\n  color: #000;\r\n  margin-right: 5px;\r\n}\r\n.cryptochart-container {\r\n  position: relative;\r\n  min-height: 300px;\r\n  transition: min-height 0.3s ease-in-out;\r\n}\r\n.cryptochart_loading {\r\n  margin: 0;\r\n  position: absolute;\r\n  top: 50%;\r\n  -ms-transform: translateY(-50%);\r\n  transform: translateY(-50%);\r\n  text-align: center;\r\n  width: 100%;\r\n}\r\n.cryptochart_loading svg {\r\n  width: 7%;\r\n  min-width: 40px;\r\n  margin: auto;\r\n  height: auto;\r\n}\r\n",
+            "",
+        ]);
+    },
+    function (t, e, i) {
+        "use strict";
+        t.exports = function (t) {
+            var e = [];
+            return (
+                (e.toString = function () {
+                    return this.map(function (e) {
+                        var i = (function (t, e) {
+                            var i = t[1] || "",
+                                a = t[3];
+                            if (!a) return i;
+                            if (e && "function" == typeof btoa) {
+                                var s = ((r = a), "/*# sourceMappingURL=data:application/json;charset=utf-8;base64," + btoa(unescape(encodeURIComponent(JSON.stringify(r)))) + " */"),
+                                    n = a.sources.map(function (t) {
+                                        return "/*# sourceURL=" + a.sourceRoot + t + " */";
+                                    });
+                                return [i].concat(n).concat([s]).join("\n");
+                            }
+                            var r;
+                            return [i].join("\n");
+                        })(e, t);
+                        return e[2] ? "@media " + e[2] + "{" + i + "}" : i;
+                    }).join("");
+                }),
+                (e.i = function (t, i) {
+                    "string" == typeof t && (t = [[null, t, ""]]);
+                    for (var a = {}, s = 0; s < this.length; s++) {
+                        var n = this[s][0];
+                        null != n && (a[n] = !0);
+                    }
+                    for (s = 0; s < t.length; s++) {
+                        var r = t[s];
+                        (null != r[0] && a[r[0]]) || (i && !r[2] ? (r[2] = i) : i && (r[2] = "(" + r[2] + ") and (" + i + ")"), e.push(r));
+                    }
+                }),
+                e
+            );
+        };
+    },
+    function (t, e, i) {
+        var a,
+            s,
+            n = {},
+            r =
+                ((a = function () {
+                    return window && document && document.all && !window.atob;
+                }),
+                function () {
+                    return void 0 === s && (s = a.apply(this, arguments)), s;
+                }),
+            o = (function (t) {
+                var e = {};
+                return function (t, i) {
+                    if ("function" == typeof t) return t();
+                    if (void 0 === e[t]) {
+                        var a = function (t, e) {
+                            return e ? e.querySelector(t) : document.querySelector(t);
+                        }.call(this, t, i);
+                        if (window.HTMLIFrameElement && a instanceof window.HTMLIFrameElement)
+                            try {
+                                a = a.contentDocument.head;
+                            } catch (t) {
+                                a = null;
+                            }
+                        e[t] = a;
+                    }
+                    return e[t];
+                };
+            })(),
+            l = null,
+            h = 0,
+            c = [],
+            d = i(100);
+        function u(t, e) {
+            for (var i = 0; i < t.length; i++) {
+                var a = t[i],
+                    s = n[a.id];
+                if (s) {
+                    s.refs++;
+                    for (var r = 0; r < s.parts.length; r++) s.parts[r](a.parts[r]);
+                    for (; r < a.parts.length; r++) s.parts.push(m(a.parts[r], e));
+                } else {
+                    var o = [];
+                    for (r = 0; r < a.parts.length; r++) o.push(m(a.parts[r], e));
+                    n[a.id] = { id: a.id, refs: 1, parts: o };
+                }
+            }
+        }
+        function f(t, e) {
+            for (var i = [], a = {}, s = 0; s < t.length; s++) {
+                var n = t[s],
+                    r = e.base ? n[0] + e.base : n[0],
+                    o = { css: n[1], media: n[2], sourceMap: n[3] };
+                a[r] ? a[r].parts.push(o) : i.push((a[r] = { id: r, parts: [o] }));
+            }
+            return i;
+        }
+        function g(t, e) {
+            var i = o(t.insertInto);
+            if (!i) throw new Error("Couldn't find a style target. This probably means that the value for the 'insertInto' parameter is invalid.");
+            var a = c[c.length - 1];
+            if ("top" === t.insertAt) a ? (a.nextSibling ? i.insertBefore(e, a.nextSibling) : i.appendChild(e)) : i.insertBefore(e, i.firstChild), c.push(e);
+            else if ("bottom" === t.insertAt) i.appendChild(e);
+            else {
+                if ("object" != typeof t.insertAt || !t.insertAt.before)
+                    throw new Error("[Style Loader]\n\n Invalid value for parameter 'insertAt' ('options.insertAt') found.\n Must be 'top', 'bottom', or Object.\n (https://github.com/webpack-contrib/style-loader#insertat)\n");
+                var s = o(t.insertAt.before, i);
+                i.insertBefore(e, s);
+            }
+        }
+        function p(t) {
+            if (null === t.parentNode) return !1;
+            t.parentNode.removeChild(t);
+            var e = c.indexOf(t);
+            e >= 0 && c.splice(e, 1);
+        }
+        function x(t) {
+            var e = document.createElement("style");
+            if ((void 0 === t.attrs.type && (t.attrs.type = "text/css"), void 0 === t.attrs.nonce)) {
+                var a = (function () {
+                    0;
+                    return i.nc;
+                })();
+                a && (t.attrs.nonce = a);
+            }
+            return v(e, t.attrs), g(t, e), e;
+        }
+        function v(t, e) {
+            Object.keys(e).forEach(function (i) {
+                t.setAttribute(i, e[i]);
+            });
+        }
+        function m(t, e) {
+            var i, a, s, n;
+            if (e.transform && t.css) {
+                if (!(n = "function" == typeof e.transform ? e.transform(t.css) : e.transform.default(t.css))) return function () {};
+                t.css = n;
+            }
+            if (e.singleton) {
+                var r = h++;
+                (i = l || (l = x(e))), (a = w.bind(null, i, r, !1)), (s = w.bind(null, i, r, !0));
+            } else
+                t.sourceMap && "function" == typeof URL && "function" == typeof URL.createObjectURL && "function" == typeof URL.revokeObjectURL && "function" == typeof Blob && "function" == typeof btoa
+                    ? ((i = (function (t) {
+                          var e = document.createElement("link");
+                          return void 0 === t.attrs.type && (t.attrs.type = "text/css"), (t.attrs.rel = "stylesheet"), v(e, t.attrs), g(t, e), e;
+                      })(e)),
+                      (a = function (t, e, i) {
+                          var a = i.css,
+                              s = i.sourceMap,
+                              n = void 0 === e.convertToAbsoluteUrls && s;
+                          (e.convertToAbsoluteUrls || n) && (a = d(a));
+                          s && (a += "\n/*# sourceMappingURL=data:application/json;base64," + btoa(unescape(encodeURIComponent(JSON.stringify(s)))) + " */");
+                          var r = new Blob([a], { type: "text/css" }),
+                              o = t.href;
+                          (t.href = URL.createObjectURL(r)), o && URL.revokeObjectURL(o);
+                      }.bind(null, i, e)),
+                      (s = function () {
+                          p(i), i.href && URL.revokeObjectURL(i.href);
+                      }))
+                    : ((i = x(e)),
+                      (a = function (t, e) {
+                          var i = e.css,
+                              a = e.media;
+                          a && t.setAttribute("media", a);
+                          if (t.styleSheet) t.styleSheet.cssText = i;
+                          else {
+                              for (; t.firstChild; ) t.removeChild(t.firstChild);
+                              t.appendChild(document.createTextNode(i));
+                          }
+                      }.bind(null, i)),
+                      (s = function () {
+                          p(i);
+                      }));
+            return (
+                a(t),
+                function (e) {
+                    if (e) {
+                        if (e.css === t.css && e.media === t.media && e.sourceMap === t.sourceMap) return;
+                        a((t = e));
+                    } else s();
+                }
+            );
+        }
+        t.exports = function (t, e) {
+            if ("undefined" != typeof DEBUG && DEBUG && "object" != typeof document) throw new Error("The style-loader cannot be used in a non-browser environment");
+            ((e = e || {}).attrs = "object" == typeof e.attrs ? e.attrs : {}), e.singleton || "boolean" == typeof e.singleton || (e.singleton = r()), e.insertInto || (e.insertInto = "head"), e.insertAt || (e.insertAt = "bottom");
+            var i = f(t, e);
+            return (
+                u(i, e),
+                function (t) {
+                    for (var a = [], s = 0; s < i.length; s++) {
+                        var r = i[s];
+                        (o = n[r.id]).refs--, a.push(o);
+                    }
+                    t && u(f(t, e), e);
+                    for (s = 0; s < a.length; s++) {
+                        var o;
+                        if (0 === (o = a[s]).refs) {
+                            for (var l = 0; l < o.parts.length; l++) o.parts[l]();
+                            delete n[o.id];
+                        }
+                    }
+                }
+            );
+        };
+        var b,
+            y =
+                ((b = []),
+                function (t, e) {
+                    return (b[t] = e), b.filter(Boolean).join("\n");
+                });
+        function w(t, e, i, a) {
+            var s = i ? "" : a.css;
+            if (t.styleSheet) t.styleSheet.cssText = y(e, s);
+            else {
+                var n = document.createTextNode(s),
+                    r = t.childNodes;
+                r[e] && t.removeChild(r[e]), r.length ? t.insertBefore(n, r[e]) : t.appendChild(n);
+            }
+        }
+    },
+    function (t, e) {
+        t.exports = function (t) {
+            var e = "undefined" != typeof window && window.location;
+            if (!e) throw new Error("fixUrls requires window.location");
+            if (!t || "string" != typeof t) return t;
+            var i = e.protocol + "//" + e.host,
+                a = i + e.pathname.replace(/\/[^\/]*$/, "/");
+            return t.replace(/url\s*\(((?:[^)(]|\((?:[^)(]+|\([^)(]*\))*\))*)\)/gi, function (t, e) {
+                var s,
+                    n = e
+                        .trim()
+                        .replace(/^"(.*)"$/, function (t, e) {
+                            return e;
+                        })
+                        .replace(/^'(.*)'$/, function (t, e) {
+                            return e;
+                        });
+                return /^(#|data:|http:\/\/|https:\/\/|file:\/\/\/|\s*$)/i.test(n) ? t : ((s = 0 === n.indexOf("//") ? n : 0 === n.indexOf("/") ? i + n : a + n.replace(/^\.\//, "")), "url(" + JSON.stringify(s) + ")");
+            });
+        };
+    },
+    function (t, e, i) {
+        (function (t) {
+            var a = (void 0 !== t && t) || ("undefined" != typeof self && self) || window,
+                s = Function.prototype.apply;
+            function n(t, e) {
+                (this._id = t), (this._clearFn = e);
+            }
+            (e.setTimeout = function () {
+                return new n(s.call(setTimeout, a, arguments), clearTimeout);
+            }),
+                (e.setInterval = function () {
+                    return new n(s.call(setInterval, a, arguments), clearInterval);
+                }),
+                (e.clearTimeout = e.clearInterval = function (t) {
+                    t && t.close();
+                }),
+                (n.prototype.unref = n.prototype.ref = function () {}),
+                (n.prototype.close = function () {
+                    this._clearFn.call(a, this._id);
+                }),
+                (e.enroll = function (t, e) {
+                    clearTimeout(t._idleTimeoutId), (t._idleTimeout = e);
+                }),
+                (e.unenroll = function (t) {
+                    clearTimeout(t._idleTimeoutId), (t._idleTimeout = -1);
+                }),
+                (e._unrefActive = e.active = function (t) {
+                    clearTimeout(t._idleTimeoutId);
+                    var e = t._idleTimeout;
+                    e >= 0 &&
+                        (t._idleTimeoutId = setTimeout(function () {
+                            t._onTimeout && t._onTimeout();
+                        }, e));
+                }),
+                i(102),
+                (e.setImmediate = ("undefined" != typeof self && self.setImmediate) || (void 0 !== t && t.setImmediate) || (this && this.setImmediate)),
+                (e.clearImmediate = ("undefined" != typeof self && self.clearImmediate) || (void 0 !== t && t.clearImmediate) || (this && this.clearImmediate));
+        }.call(this, i(23)));
+    },
+    function (t, e, i) {
+        (function (t, e) {
+            !(function (t, i) {
+                "use strict";
+                if (!t.setImmediate) {
+                    var a,
+                        s,
+                        n,
+                        r,
+                        o,
+                        l = 1,
+                        h = {},
+                        c = !1,
+                        d = t.document,
+                        u = Object.getPrototypeOf && Object.getPrototypeOf(t);
+                    (u = u && u.setTimeout ? u : t),
+                        "[object process]" === {}.toString.call(t.process)
+                            ? (a = function (t) {
+                                  e.nextTick(function () {
+                                      g(t);
+                                  });
+                              })
+                            : !(function () {
+                                  if (t.postMessage && !t.importScripts) {
+                                      var e = !0,
+                                          i = t.onmessage;
+                                      return (
+                                          (t.onmessage = function () {
+                                              e = !1;
+                                          }),
+                                          t.postMessage("", "*"),
+                                          (t.onmessage = i),
+                                          e
+                                      );
+                                  }
+                              })()
+                            ? t.MessageChannel
+                                ? (((n = new MessageChannel()).port1.onmessage = function (t) {
+                                      g(t.data);
+                                  }),
+                                  (a = function (t) {
+                                      n.port2.postMessage(t);
+                                  }))
+                                : d && "onreadystatechange" in d.createElement("script")
+                                ? ((s = d.documentElement),
+                                  (a = function (t) {
+                                      var e = d.createElement("script");
+                                      (e.onreadystatechange = function () {
+                                          g(t), (e.onreadystatechange = null), s.removeChild(e), (e = null);
+                                      }),
+                                          s.appendChild(e);
+                                  }))
+                                : (a = function (t) {
+                                      setTimeout(g, 0, t);
+                                  })
+                            : ((r = "setImmediate$" + Math.random() + "$"),
+                              (o = function (e) {
+                                  e.source === t && "string" == typeof e.data && 0 === e.data.indexOf(r) && g(+e.data.slice(r.length));
+                              }),
+                              t.addEventListener ? t.addEventListener("message", o, !1) : t.attachEvent("onmessage", o),
+                              (a = function (e) {
+                                  t.postMessage(r + e, "*");
+                              })),
+                        (u.setImmediate = function (t) {
+                            "function" != typeof t && (t = new Function("" + t));
+                            for (var e = new Array(arguments.length - 1), i = 0; i < e.length; i++) e[i] = arguments[i + 1];
+                            var s = { callback: t, args: e };
+                            return (h[l] = s), a(l), l++;
+                        }),
+                        (u.clearImmediate = f);
+                }
+                function f(t) {
+                    delete h[t];
+                }
+                function g(t) {
+                    if (c) setTimeout(g, 0, t);
+                    else {
+                        var e = h[t];
+                        if (e) {
+                            c = !0;
+                            try {
+                                !(function (t) {
+                                    var e = t.callback,
+                                        a = t.args;
+                                    switch (a.length) {
+                                        case 0:
+                                            e();
+                                            break;
+                                        case 1:
+                                            e(a[0]);
+                                            break;
+                                        case 2:
+                                            e(a[0], a[1]);
+                                            break;
+                                        case 3:
+                                            e(a[0], a[1], a[2]);
+                                            break;
+                                        default:
+                                            e.apply(i, a);
+                                    }
+                                })(e);
+                            } finally {
+                                f(t), (c = !1);
+                            }
+                        }
+                    }
+                }
+            })("undefined" == typeof self ? (void 0 === t ? this : t) : self);
+        }.call(this, i(23), i(103)));
+    },
+    function (t, e) {
+        var i,
+            a,
+            s = (t.exports = {});
+        function n() {
+            throw new Error("setTimeout has not been defined");
+        }
+        function r() {
+            throw new Error("clearTimeout has not been defined");
+        }
+        function o(t) {
+            if (i === setTimeout) return setTimeout(t, 0);
+            if ((i === n || !i) && setTimeout) return (i = setTimeout), setTimeout(t, 0);
+            try {
+                return i(t, 0);
+            } catch (e) {
+                try {
+                    return i.call(null, t, 0);
+                } catch (e) {
+                    return i.call(this, t, 0);
+                }
+            }
+        }
+        !(function () {
+            try {
+                i = "function" == typeof setTimeout ? setTimeout : n;
+            } catch (t) {
+                i = n;
+            }
+            try {
+                a = "function" == typeof clearTimeout ? clearTimeout : r;
+            } catch (t) {
+                a = r;
+            }
+        })();
+        var l,
+            h = [],
+            c = !1,
+            d = -1;
+        function u() {
+            c && l && ((c = !1), l.length ? (h = l.concat(h)) : (d = -1), h.length && f());
+        }
+        function f() {
+            if (!c) {
+                var t = o(u);
+                c = !0;
+                for (var e = h.length; e; ) {
+                    for (l = h, h = []; ++d < e; ) l && l[d].run();
+                    (d = -1), (e = h.length);
+                }
+                (l = null),
+                    (c = !1),
+                    (function (t) {
+                        if (a === clearTimeout) return clearTimeout(t);
+                        if ((a === r || !a) && clearTimeout) return (a = clearTimeout), clearTimeout(t);
+                        try {
+                            a(t);
+                        } catch (e) {
+                            try {
+                                return a.call(null, t);
+                            } catch (e) {
+                                return a.call(this, t);
+                            }
+                        }
+                    })(t);
+            }
+        }
+        function g(t, e) {
+            (this.fun = t), (this.array = e);
+        }
+        function p() {}
+        (s.nextTick = function (t) {
+            var e = new Array(arguments.length - 1);
+            if (arguments.length > 1) for (var i = 1; i < arguments.length; i++) e[i - 1] = arguments[i];
+            h.push(new g(t, e)), 1 !== h.length || c || o(f);
+        }),
+            (g.prototype.run = function () {
+                this.fun.apply(null, this.array);
+            }),
+            (s.title = "browser"),
+            (s.browser = !0),
+            (s.env = {}),
+            (s.argv = []),
+            (s.version = ""),
+            (s.versions = {}),
+            (s.on = p),
+            (s.addListener = p),
+            (s.once = p),
+            (s.off = p),
+            (s.removeListener = p),
+            (s.removeAllListeners = p),
+            (s.emit = p),
+            (s.prependListener = p),
+            (s.prependOnceListener = p),
+            (s.listeners = function (t) {
+                return [];
+            }),
+            (s.binding = function (t) {
+                throw new Error("process.binding is not supported");
+            }),
+            (s.cwd = function () {
+                return "/";
+            }),
+            (s.chdir = function (t) {
+                throw new Error("process.chdir is not supported");
+            }),
+            (s.umask = function () {
+                return 0;
+            });
+    },
+    function (t, e) {
+        t.exports = function (t) {
+            if (!t.webpackPolyfill) {
+                var e = Object.create(t);
+                e.children || (e.children = []),
+                    Object.defineProperty(e, "loaded", {
+                        enumerable: !0,
+                        get: function () {
+                            return e.l;
+                        },
+                    }),
+                    Object.defineProperty(e, "id", {
+                        enumerable: !0,
+                        get: function () {
+                            return e.i;
+                        },
+                    }),
+                    Object.defineProperty(e, "exports", { enumerable: !0 }),
+                    (e.webpackPolyfill = 1);
+            }
+            return e;
+        };
+    },
+    function (t, e) {
+        (function (e) {
+            t.exports = e;
+        }.call(this, {}));
+    },
+    function (t, e, i) {
+        "use strict";
+        i.r(e);
+        i(54), i(95), i(96);
+        function a(t, e, i) {
+            return e in t ? Object.defineProperty(t, e, { value: i, enumerable: !0, configurable: !0, writable: !0 }) : (t[e] = i), t;
+        }
+        function s(t) {
+            return (s =
+                "function" == typeof Symbol && "symbol" == typeof Symbol.iterator
+                    ? function (t) {
+                          return typeof t;
+                      }
+                    : function (t) {
+                          return t && "function" == typeof Symbol && t.constructor === Symbol && t !== Symbol.prototype ? "symbol" : typeof t;
+                      })(t);
+        }
+        function n(t) {
+            return t && "object" === s(t) && !Array.isArray(t);
+        }
+        function r(t) {
+            for (var e = arguments.length, i = new Array(e > 1 ? e - 1 : 0), s = 1; s < e; s++) i[s - 1] = arguments[s];
+            if (!i.length) return t;
+            var o = i.shift();
+            if (n(t) && n(o)) for (var l in o) n(o[l]) ? (t[l] || Object.assign(t, a({}, l, {})), r(t[l], o[l])) : Object.assign(t, a({}, l, o[l]));
+            return r.apply(void 0, [t].concat(i));
+        }
+        function o(t, e, i) {
+            var a = null;
+            e && (a = [].concat.apply([], e));
+            var s = Math.max.apply(
+                    Math,
+                    i.map(function (t) {
+                        return t.max;
+                    })
+                ),
+                n = Math.min.apply(
+                    Math,
+                    i.map(function (t) {
+                        return t.min;
+                    })
+                ),
+                o = 0,
+                l = 0;
+            n < 0 && (o = Math.ceil(n) - 1), s > 0 && (l = Math.ceil(s) + 1);
+            var h = {
+                chart: { id: t.chart_id, height: 500, type: "area", toolbar: { show: !1 } },
+                colors: ["#4CAF50", "#2196F3", "#FF5722", "#607D8B", "#E91E63", "#673AB7", "#00BCD4", "#FF9800", "#009688", "#8BC34A", "#F44336", "#3F51B5", "#FFEB3B", "#9C27B0", "#FFC107", "#795548", "#CDDC39", "#03A9F4", "#9E9E9E"],
+                annotations: {
+                    position: "back",
+                    yaxis: [{ y: 0, y2: o, borderColor: "red", fillColor: "red", opacity: 0.15, label: { borderWidth: 0, style: { fontSize: "1px", color: "#333", background: "transparent", cssClass: "hidden" }, text: "." } }],
+                },
+                legend: { position: "top" },
+                dataLabels: { enabled: !1 },
+                stroke: { curve: "smooth", width: 2 },
+                series: i,
+                grid: { yaxis: { lines: { show: !1 } }, xaxis: { lines: { show: !1 } } },
+                yaxis: {
+                    min: o,
+                    max: l,
+                    labels: {
+                        style: { color: "#555555", fontSize: "12px" },
+                        formatter: function (t) {
+                            return t.toFixed(2) + "%";
+                        },
+                    },
+                    axisTicks: { show: !0, color: "#ccc" },
+                    axisBorder: { show: !0, color: "#ccc" },
+                },
+                xaxis: {
+                    type: "category",
+                    axisTicks: { show: !0, color: "#ccc" },
+                    axisBorder: { show: !0, color: "#ccc" },
+                    labels: {
+                        style: { colors: "#555555", fontSize: "12px" },
+                        formatter: function (t, e, i) {
+                            return new Date(e).toLocaleDateString("en-GB", { month: "short", day: "2-digit" });
+                        },
+                    },
+                    tooltip: { enabled: !1 },
+                },
+                tooltip: {
+                    shared: !0,
+                    x: {
+                        formatter: function (t, e) {
+                            e.series, e.seriesIndex, e.dataPointIndex, e.w;
+                            return new Date(t).toLocaleDateString("en-GB", { year: "numeric", month: "short", day: "2-digit" });
+                        },
+                    },
+                    y: {
+                        formatter: function (t, e) {
+                            var i = e.seriesIndex,
+                                a = e.dataPointIndex;
+                            if (e.w.config.series[i].data[a]) return e.w.config.series[i].data[a].y.toFixed(2) + "%" + " / $" + e.w.config.series[i].data[a].price.toFixed(2);
+                        },
+                    },
+                },
+            };
+            return t.options && (t.options.theme && delete h.colors, r(h, t.options), !0 === t.options.title && (h.title = { text: "ROI of " + a + " over time" })), h;
+        }
+        var l = i(2);
+        function h(t, e, i, a, s, n, r) {
+            try {
+                var o = t[n](r),
+                    l = o.value;
+            } catch (t) {
+                return void i(t);
+            }
+            o.done ? e(l) : Promise.resolve(l).then(a, s);
+        }
+        function c(t, e, i) {
+            return d.apply(this, arguments);
+        }
+        function d() {
+            var t;
+            return (
+                (t = regeneratorRuntime.mark(function t(e, i, a) {
+                    var s, n, r, o, l, h, c, d, u;
+                    return regeneratorRuntime.wrap(function (t) {
+                        for (;;)
+                            switch ((t.prev = t.next)) {
+                                case 0:
+                                    (n = function (t) {
+                                        var e = [];
+                                        return (
+                                            t.forEach(function (t) {
+                                                var i = {};
+                                                (i.x = t.time), (i.y = t.close), e.push(i);
+                                            }),
+                                            e
+                                        );
+                                    }),
+                                        (s = []),
+                                        (r = 30),
+                                        a.last_days && (r = a.last_days),
+                                        (o = 0);
+                                case 5:
+                                    if (!(o < e.length)) {
+                                        t.next = 22;
+                                        break;
+                                    }
+                                    return (
+                                        (l = {}),
+                                        (h = "https://min-api.cryptocompare.com/data/histoday?fsym=" + e[o] + "&tsym=USD&limit=" + Number(r)),
+                                        i && (h = h + "&api_key=" + i),
+                                        (t.next = 11),
+                                        fetch(h).catch(function (t) {
+                                            return console.error("Error:", t);
+                                        })
+                                    );
+                                case 11:
+                                    return (c = t.sent), (t.next = 14), c.json();
+                                case 14:
+                                    (d = t.sent), (u = d.Data.slice(1)), (l.name = e[o].toString()), (l.data = n(u)), s.push(l);
+                                case 19:
+                                    o++, (t.next = 5);
+                                    break;
+                                case 22:
+                                    return t.abrupt("return", s);
+                                case 23:
+                                case "end":
+                                    return t.stop();
+                            }
+                    }, t);
+                })),
+                (d = function () {
+                    var e = this,
+                        i = arguments;
+                    return new Promise(function (a, s) {
+                        var n = t.apply(e, i);
+                        function r(t) {
+                            h(n, a, s, r, o, "next", t);
+                        }
+                        function o(t) {
+                            h(n, a, s, r, o, "throw", t);
+                        }
+                        r(void 0);
+                    });
+                }).apply(this, arguments)
+            );
+        }
+        function u(t, e, i, a, s, n, r) {
+            try {
+                var o = t[n](r),
+                    l = o.value;
+            } catch (t) {
+                return void i(t);
+            }
+            o.done ? e(l) : Promise.resolve(l).then(a, s);
+        }
+        function f(t, e) {
+            return g.apply(this, arguments);
+        }
+        function g() {
+            var t;
+            return (
+                (t = regeneratorRuntime.mark(function t(e, i) {
+                    var a, s, n, r, o, l, h, c, d, u, f, g;
+                    return regeneratorRuntime.wrap(function (t) {
+                        for (;;)
+                            switch ((t.prev = t.next)) {
+                                case 0:
+                                    (g = function (t) {
+                                        var e = [];
+                                        return (
+                                            t.values.forEach(function (t) {
+                                                f(Number(t.x)) && e.push(t);
+                                            }),
+                                            e
+                                        );
+                                    }),
+                                        (f = function (t) {
+                                            var e = new Date(1e3 * t).toISOString(),
+                                                i = new Date(e).setUTCHours(0, 0, 0, 0),
+                                                a = !1;
+                                            return t === Math.round(i / 1e3) && (a = !0), a;
+                                        }),
+                                        (a = []),
+                                        (s = Math.round(new Date().getTime() / 1e3) - 2592e3),
+                                        (n = Math.round(new Date().getTime() / 1e3)),
+                                        i.from && (s = i.from),
+                                        i.to && (n = i.to),
+                                        i.last_days && ((r = 86400 * i.last_days), (s = n - r)),
+                                        (o = 0);
+                                case 9:
+                                    if (!(o < e.length)) {
+                                        t.next = 28;
+                                        break;
+                                    }
+                                    return (
+                                        (t.next = 12),
+                                        fetch("https://api.iconomi.com/v1/daa/" + e[o] + "/pricehistory?from=" + s + "&to=" + n).catch(function (t) {
+                                            return console.error("Error:", t);
+                                        })
+                                    );
+                                case 12:
+                                    return (l = t.sent), (t.next = 15), l.json();
+                                case 15:
+                                    return (
+                                        (h = t.sent),
+                                        (c = g(h)),
+                                        (t.next = 19),
+                                        fetch("https://api.iconomi.com/v1/daa/" + e[o] + "/price").catch(function (t) {
+                                            return console.error("Error:", t);
+                                        })
+                                    );
+                                case 19:
+                                    return (d = t.sent), (t.next = 22), d.json();
+                                case 22:
+                                    (u = t.sent), (c[c.length - 1].y = u.price.toString()), a.push({ name: e[o], data: c });
+                                case 25:
+                                    o++, (t.next = 9);
+                                    break;
+                                case 28:
+                                    return t.abrupt("return", a);
+                                case 29:
+                                case "end":
+                                    return t.stop();
+                            }
+                    }, t);
+                })),
+                (g = function () {
+                    var e = this,
+                        i = arguments;
+                    return new Promise(function (a, s) {
+                        var n = t.apply(e, i);
+                        function r(t) {
+                            u(n, a, s, r, o, "next", t);
+                        }
+                        function o(t) {
+                            u(n, a, s, r, o, "throw", t);
+                        }
+                        r(void 0);
+                    });
+                }).apply(this, arguments)
+            );
+        }
+        function p(t) {
+            return (
+                (function (t) {
+                    if (Array.isArray(t)) {
+                        for (var e = 0, i = new Array(t.length); e < t.length; e++) i[e] = t[e];
+                        return i;
+                    }
+                })(t) ||
+                (function (t) {
+                    if (Symbol.iterator in Object(t) || "[object Arguments]" === Object.prototype.toString.call(t)) return Array.from(t);
+                })(t) ||
+                (function () {
+                    throw new TypeError("Invalid attempt to spread non-iterable instance");
+                })()
+            );
+        }
+        function x(t, e, i, a, s, n, r) {
+            try {
+                var o = t[n](r),
+                    l = o.value;
+            } catch (t) {
+                return void i(t);
+            }
+            o.done ? e(l) : Promise.resolve(l).then(a, s);
+        }
+        function v(t, e, i, a, s) {
+            return m.apply(this, arguments);
+        }
+        function m() {
+            var t;
+            return (
+                (t = regeneratorRuntime.mark(function t(e, i, a, s, n) {
+                    var r, o, l;
+                    return regeneratorRuntime.wrap(function (t) {
+                        for (;;)
+                            switch ((t.prev = t.next)) {
+                                case 0:
+                                    if (((r = null), (o = null), !e)) {
+                                        t.next = 6;
+                                        break;
+                                    }
+                                    return (t.next = 5), f(e, n);
+                                case 5:
+                                    r = t.sent;
+                                case 6:
+                                    if (!i) {
+                                        t.next = 10;
+                                        break;
+                                    }
+                                    return (t.next = 9), c(i, a, n);
+                                case 9:
+                                    o = t.sent;
+                                case 10:
+                                    return (
+                                        (l = []),
+                                        (e || i) &&
+                                            Promise.all([r, o]).then(function (t) {
+                                                var e = t[0],
+                                                    i = t[1],
+                                                    a = null;
+                                                e && i ? (a = [].concat(p(e), p(i))) : e ? ((a = p(e)), console.log(e)) : ((a = p(i)), console.log(i)), l.push(a);
+                                            }),
+                                        t.abrupt("return", l)
+                                    );
+                                case 13:
+                                case "end":
+                                    return t.stop();
+                            }
+                    }, t);
+                })),
+                (m = function () {
+                    var e = this,
+                        i = arguments;
+                    return new Promise(function (a, s) {
+                        var n = t.apply(e, i);
+                        function r(t) {
+                            x(n, a, s, r, o, "next", t);
+                        }
+                        function o(t) {
+                            x(n, a, s, r, o, "throw", t);
+                        }
+                        r(void 0);
+                    });
+                }).apply(this, arguments)
+            );
+        }
+        function b(t, e, i, a, s, n, r) {
+            try {
+                var o = t[n](r),
+                    l = o.value;
+            } catch (t) {
+                return void i(t);
+            }
+            o.done ? e(l) : Promise.resolve(l).then(a, s);
+        }
+        function y(t, e, i, a, s) {
+            return w.apply(this, arguments);
+        }
+        function w() {
+            var t;
+            return (
+                (t = regeneratorRuntime.mark(function t(e, i, a, s, n) {
+                    var r, o, l, h;
+                    return regeneratorRuntime.wrap(function (t) {
+                        for (;;)
+                            switch ((t.prev = t.next)) {
+                                case 0:
+                                    return (
+                                        (r = function (t, e) {
+                                            return 0 !== e ? (0 !== t ? ((e - t) / t) * 100 : 100 * e) : 100 * -t;
+                                        }),
+                                        (t.next = 3),
+                                        v(e, i, a, s, n)
+                                    );
+                                case 3:
+                                    return (o = t.sent), (t.next = 6), o;
+                                case 6:
+                                    return (
+                                        (l = t.sent),
+                                        (h = []),
+                                        s &&
+                                            (l.length > 0
+                                                ? s.forEach(function (t) {
+                                                      l[0].push(t);
+                                                  })
+                                                : (l.push([]),
+                                                  s.forEach(function (t) {
+                                                      l[0].push(t);
+                                                  }))),
+                                        l[0].forEach(function (t) {
+                                            var e = [],
+                                                i = t.data,
+                                                a = 0,
+                                                s = 0;
+                                            i.forEach(function (t) {
+                                                var n = t.y,
+                                                    o = i[0].y,
+                                                    l = 1e3 * t.x,
+                                                    h = r(o, n);
+                                                h <= a && (a = h), h >= s && (s = h), e.push({ x: Number(l), y: Number(h.toFixed(2)), price: Number(n) });
+                                            }),
+                                                h.push({ name: t.name, data: e, min: Number(a.toFixed(2)), max: Number(s.toFixed(2)) });
+                                        }),
+                                        t.abrupt("return", h)
+                                    );
+                                case 11:
+                                case "end":
+                                    return t.stop();
+                            }
+                    }, t);
+                })),
+                (w = function () {
+                    var e = this,
+                        i = arguments;
+                    return new Promise(function (a, s) {
+                        var n = t.apply(e, i);
+                        function r(t) {
+                            b(n, a, s, r, o, "next", t);
+                        }
+                        function o(t) {
+                            b(n, a, s, r, o, "throw", t);
+                        }
+                        r(void 0);
+                    });
+                }).apply(this, arguments)
+            );
+        }
+        function k(t) {
+            var e,
+                i = null;
+            return (
+                t && (i = t),
+                '<svg\n    viewBox="0 0 105 140"\n    xmlns="http://www.w3.org/2000/svg"\n  ><defs>\n      <linearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%">\n        <stop offset="0%" style="stop-color:#1EC198;stop-opacity:1" />\n        <stop offset="100%" style="stop-color:#265CDD;stop-opacity:1" />\n      </linearGradient>\n    </defs>\n  '.concat(
+                    ((e = ""),
+                    [
+                        { x: 0, y: 50, height: 40, dur: 0 },
+                        { x: 30, y: 40, height: 60, dur: 0.1 },
+                        { x: 60, y: 30, height: 80, dur: 0.2 },
+                        { x: 90, y: 20, height: 100, dur: 0.3 },
+                    ].forEach(function (t, a) {
+                        var s;
+                        e += '<rect width="15" x="'
+                            .concat(t.x, '" height="')
+                            .concat(t.height, '" y="')
+                            .concat(t.y, '" rx="3" fill="')
+                            .concat(
+                                (function (t) {
+                                    var e = "url(#grad2)";
+                                    return i && (e = i[t]), e;
+                                })(a),
+                                '" id="bar'
+                            )
+                            .concat(a, '">')
+                            .concat(
+                                ((s = t.dur),
+                                '<animate\n        attributeName="height"\n        begin="'
+                                    .concat(
+                                        s,
+                                        's"\n        dur="1s"\n        values="120;110;100;90;80;70;60;50;40;140;120"\n        calcMode="linear"\n        repeatCount="indefinite"\n      />\n      <animate\n        attributeName="y"\n        begin="'
+                                    )
+                                    .concat(s, 's"\n        dur="1s"\n        values="10;15;20;25;30;35;40;45;50;0;10"\n        calcMode="linear"\n        repeatCount="indefinite"\n      />')),
+                                "</rect>"
+                            );
+                    }),
+                    e),
+                    "\n  </svg>"
+                )
+            );
+        }
+        function S(t, e) {
+            var i = k();
+            e.loading_indicator.colors && (i = k(e.loading_indicator.colors));
+            var a = "<div class='".concat(t, ' cryptochart_loading\' title="loading chart...">').concat(i, "</div>");
+            document.querySelectorAll("#" + t)[0].classList.add("cryptochart-container"), (document.querySelectorAll("#" + t)[0].innerHTML = a);
+        }
+        function A(t, e) {
+            var i = e / 1e3;
+            (t.style.transition = "opacity " + i + "s ease"),
+                (t.style.opacity = 0),
+                setTimeout(function () {
+                    t.parentNode.removeChild(t);
+                }, e);
+        }
+        function C(t, e, i, a, s, n, r) {
+            try {
+                var o = t[n](r),
+                    l = o.value;
+            } catch (t) {
+                return void i(t);
+            }
+            o.done ? e(l) : Promise.resolve(l).then(a, s);
+        }
+        function L() {
+            var t;
+            return (
+                (t = regeneratorRuntime.mark(function t(e) {
+                    var i, a, s, n, r, h, c, d;
+                    return regeneratorRuntime.wrap(function (t) {
+                        for (;;)
+                            switch ((t.prev = t.next)) {
+                                case 0:
+                                    return (
+                                        (i = null),
+                                        (a = null),
+                                        (s = []),
+                                        (n = null),
+                                        (r = null),
+                                        (h = null),
+                                        e.chart_id && (h = e.chart_id),
+                                        e.iconomi_tickers && ((i = e.iconomi_tickers), s.push(i)),
+                                        e.cryptocompare_tickers && ((a = e.cryptocompare_tickers), s.push(a)),
+                                        e.cryptocompare_api_key && (n = e.cryptocompare_api_key),
+                                        e.custom_data &&
+                                            ((r = e.custom_data),
+                                            (c = []),
+                                            r.forEach(function (t) {
+                                                c.push(t.name);
+                                            }),
+                                            s.push(c)),
+                                        e.loading_indicator && S(h, e),
+                                        (t.next = 14),
+                                        y(i, a, n, r, e)
+                                    );
+                                case 14:
+                                    (d = t.sent), new l.a(document.querySelector("#" + h), o(e, s, d)).render(), e.loading_indicator && A(document.querySelector(".".concat(h, ".cryptochart_loading")), 2e3);
+                                case 18:
+                                case "end":
+                                    return t.stop();
+                            }
+                    }, t);
+                })),
+                (L = function () {
+                    var e = this,
+                        i = arguments;
+                    return new Promise(function (a, s) {
+                        var n = t.apply(e, i);
+                        function r(t) {
+                            C(n, a, s, r, o, "next", t);
+                        }
+                        function o(t) {
+                            C(n, a, s, r, o, "throw", t);
+                        }
+                        r(void 0);
+                    });
+                }).apply(this, arguments)
+            );
+        }
+        function E(t, e, i) {
+            var a = null;
+            e && (a = [].concat.apply([], e));
+            var s = i[0],
+                n = -1,
+                o = 1;
+            function l(t) {
+                return ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"][t];
+            }
+            s.min && s.max && (s.min < n && (n = Math.round(s.min)), s.max > o && (o = Math.round(s.max)));
+            var h = (function (t) {
+                    var e = t.reduce(function (t, e) {
+                            var i = new Date(e.x).getDay();
+                            return t[i] || (t[i] = []), t[i].push(e), t;
+                        }, {}),
+                        i = [];
+                    Object.keys(e).forEach(function (t) {
+                        i.push(e[t].length);
+                    });
+                    var a = new Date(s.data[0].x).getUTCDay();
+                    return (
+                        Object.keys(e).forEach(function (t) {
+                            if (t < a) {
+                                var i = e[t][0].x - 6048e5;
+                                e[t].unshift({ x: i, y: null });
+                            }
+                        }),
+                        Object.keys(e)
+                            .map(function (t) {
+                                return { name: ((i = t), ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"][i]), data: e[t] };
+                                var i;
+                            })
+                            .reverse()
+                    );
+                })(s.data),
+                c = {
+                    chart: { id: t.chart_id, height: 200, animations: { enabled: !0 }, type: "heatmap", zoom: { enabled: !1 }, toolbar: { tools: { download: !1, zoomin: !1, zoomout: !1, pan: !1, selection: !1, reset: 0 } } },
+                    legend: { position: "top", markers: { radius: 0, offsetY: 0 }, onItemClick: { toggleDataSeries: !0 } },
+                    dataLabels: { enabled: !1 },
+                    series: h,
+                    grid: { position: "back", yaxis: { lines: { show: !1 } } },
+                    yaxis: {
+                        show: !0,
+                        labels: {
+                            formatter: function (t, e) {
+                                if (e % 2 != 0) return t;
+                            },
+                            style: { color: "#555555", fontSize: "11px" },
+                        },
+                    },
+                    xaxis: {
+                        type: "category",
+                        labels: {
+                            show: !0,
+                            offsetY: -4,
+                            style: { colors: "#555555", fontSize: "11px" },
+                            showDuplicates: !0,
+                            formatter: function (t, e, i) {
+                                return l(new Date(e).getMonth()) + " " + new Date(e).getUTCFullYear().toString().substr(-2);
+                            },
+                        },
+                        axisTicks: { show: !1 },
+                        axisBorder: { show: !1 },
+                        tooltip: {
+                            enabled: !1,
+                            formatter: function (t) {
+                                return l(new Date(t).getMonth());
+                            },
+                        },
+                    },
+                    stroke: { width: 0 },
+                    tooltip: {
+                        custom: function (t) {
+                            var e = t.series,
+                                i = t.seriesIndex,
+                                a = t.dataPointIndex,
+                                s = t.w;
+                            if (!s.config.series[i].data[a].y) return null;
+                            var n = new Date(s.config.series[i].data[a].x),
+                                r = "$" + s.config.series[i].data[a].price.toFixed(2),
+                                o = n.toLocaleDateString("en-GB", { weekday: "short", year: "numeric", month: "short", day: "numeric" }),
+                                l = "+" + s.config.series[i].data[a].change + "%",
+                                h = "pc_positive";
+                            return (
+                                e[i][a] < 0 && ((l = s.config.series[i].data[a].change + "%"), (h = "pc_negative")),
+                                "<div class=\"arrow_box\"><span class='tooltip-heatmap-price'>" + r + "</span><span class=" + h + ">" + l + "</span><br><span class='tooltip-heatmap-date'>" + o + "</span></span></div>"
+                            );
+                        },
+                    },
+                    plotOptions: {
+                        heatmap: {
+                            reverseNegativeShade: !0,
+                            radius: 0,
+                            shadeIntensity: 0.5,
+                            enableShades: !0,
+                            colorScale: {
+                                ranges: [
+                                    { from: 1e3 * n, to: -1e3, color: "#FF0000", name: "< -1%" },
+                                    { from: -1e3, to: 1e3, color: "#cccccc", name: "-1% to 1%" },
+                                    { from: 1e3, to: 1e3 * o, color: "#00A100", name: ">1%" },
+                                ],
+                                max: 1e3 * o,
+                                min: 1e3 * n,
+                            },
+                        },
+                    },
+                };
+            return t.options && (t.options.theme && delete c.colors, r(c, t.options), !0 === t.options.title && (c.title = { text: "Daily % change of " + a + " over time" })), c;
+        }
+        function P(t, e, i, a, s, n, r) {
+            try {
+                var o = t[n](r),
+                    l = o.value;
+            } catch (t) {
+                return void i(t);
+            }
+            o.done ? e(l) : Promise.resolve(l).then(a, s);
+        }
+        function T(t, e, i, a, s) {
+            return M.apply(this, arguments);
+        }
+        function M() {
+            var t;
+            return (
+                (t = regeneratorRuntime.mark(function t(e, i, a, s, n) {
+                    var r, o, l;
+                    return regeneratorRuntime.wrap(function (t) {
+                        for (;;)
+                            switch ((t.prev = t.next)) {
+                                case 0:
+                                    return (t.next = 2), v(e, i, a, s, n);
+                                case 2:
+                                    return (r = t.sent), (t.next = 5), r;
+                                case 5:
+                                    return (
+                                        (o = t.sent),
+                                        (l = []),
+                                        s &&
+                                            (o.length > 0
+                                                ? s.forEach(function (t) {
+                                                      o[0].push(t);
+                                                  })
+                                                : (o.push([]),
+                                                  s.forEach(function (t) {
+                                                      o[0].push(t);
+                                                  }))),
+                                        o[0].forEach(function (t) {
+                                            var e = [],
+                                                i = t.data,
+                                                a = 0,
+                                                s = 0;
+                                            i.forEach(function (t, n) {
+                                                var r = t.y,
+                                                    o = 0;
+                                                o = n > 0 ? i[n - 1].y : t.y;
+                                                var l = 1e3 * t.x,
+                                                    h = 100 * (1 - o / r);
+                                                h <= a && (a = h - 4), h >= s && (s = h + 4), e.push({ x: Number(l), change: Number(h.toFixed(2)), y: Math.floor(1e3 * h), price: Number(r) });
+                                            }),
+                                                l.push({ name: t.name, data: e, min: Number(a.toFixed(2)), max: Number(s.toFixed(2)) });
+                                        }),
+                                        t.abrupt("return", l)
+                                    );
+                                case 10:
+                                case "end":
+                                    return t.stop();
+                            }
+                    }, t);
+                })),
+                (M = function () {
+                    var e = this,
+                        i = arguments;
+                    return new Promise(function (a, s) {
+                        var n = t.apply(e, i);
+                        function r(t) {
+                            P(n, a, s, r, o, "next", t);
+                        }
+                        function o(t) {
+                            P(n, a, s, r, o, "throw", t);
+                        }
+                        r(void 0);
+                    });
+                }).apply(this, arguments)
+            );
+        }
+        function z(t, e, i, a, s, n, r) {
+            try {
+                var o = t[n](r),
+                    l = o.value;
+            } catch (t) {
+                return void i(t);
+            }
+            o.done ? e(l) : Promise.resolve(l).then(a, s);
+        }
+        function I() {
+            var t;
+            return (
+                (t = regeneratorRuntime.mark(function t(e) {
+                    var i, a, s, n, r, o, h, c;
+                    return regeneratorRuntime.wrap(function (t) {
+                        for (;;)
+                            switch ((t.prev = t.next)) {
+                                case 0:
+                                    return (
+                                        (i = null),
+                                        (a = null),
+                                        (s = []),
+                                        (n = null),
+                                        (r = null),
+                                        (o = null),
+                                        e.chart_id && (o = e.chart_id),
+                                        e.iconomi_tickers && ((i = e.iconomi_tickers), s.push(i)),
+                                        e.cryptocompare_tickers && ((a = e.cryptocompare_tickers), s.push(a)),
+                                        e.cryptocompare_api_key && (n = e.cryptocompare_api_key),
+                                        e.custom_data &&
+                                            ((r = e.custom_data),
+                                            (h = []),
+                                            r.forEach(function (t) {
+                                                h.push(t.name);
+                                            }),
+                                            s.push(h)),
+                                        e.loading_indicator && S(o, e),
+                                        (t.next = 14),
+                                        T(i, a, n, r, e)
+                                    );
+                                case 14:
+                                    (c = t.sent), new l.a(document.querySelector("#" + o), E(e, s, c)).render(), e.loading_indicator && A(document.querySelector(".".concat(o, ".cryptochart_loading")), 2e3);
+                                case 18:
+                                case "end":
+                                    return t.stop();
+                            }
+                    }, t);
+                })),
+                (I = function () {
+                    var e = this,
+                        i = arguments;
+                    return new Promise(function (a, s) {
+                        var n = t.apply(e, i);
+                        function r(t) {
+                            z(n, a, s, r, o, "next", t);
+                        }
+                        function o(t) {
+                            z(n, a, s, r, o, "throw", t);
+                        }
+                        r(void 0);
+                    });
+                }).apply(this, arguments)
+            );
+        }
+        function X(t, e, i) {
+            var a = null;
+            e && (a = [].concat.apply([], e));
+            var s = {
+                chart: { id: t.chart_id, sparkline: { enabled: !0 }, type: "area", toolbar: { tools: { download: !1, zoomin: !1, zoomout: !1, pan: !1, selection: !1, reset: 0 } } },
+                colors: ["#4CAF50", "#2196F3", "#FF5722", "#607D8B", "#E91E63", "#673AB7", "#00BCD4", "#FF9800", "#009688", "#8BC34A", "#F44336", "#3F51B5", "#FFEB3B", "#9C27B0", "#FFC107", "#795548", "#CDDC39", "#03A9F4", "#9E9E9E"],
+                legend: { show: !1 },
+                dataLabels: { enabled: !1 },
+                stroke: { curve: "smooth", width: 2 },
+                series: i,
+                grid: { yaxis: { lines: { show: !1 } }, xaxis: { lines: { show: !1 } } },
+                yaxis: { axisTicks: { show: !1 }, axisBorder: { show: !1 } },
+                xaxis: { format: "dd MMM yyyy", type: "datetime", axisTicks: { show: !1 }, axisBorder: { show: !1 }, tooltip: { enabled: !1 }, crosshairs: { show: !1 } },
+                tooltip: {
+                    shared: !0,
+                    x: { format: "dd MMM yyyy" },
+                    y: {
+                        formatter: function (t, e) {
+                            var i = e.seriesIndex,
+                                a = e.dataPointIndex;
+                            if (e.w.config.series[i].data[a]) return "$" + Number(e.w.config.series[i].data[a].y).toFixed(2);
+                        },
+                    },
+                },
+            };
+            if (t.tooltip && "priceonly" === t.tooltip) {
+                var n = {
+                    custom: function (t) {
+                        var e = t.series,
+                            i = t.seriesIndex,
+                            a = t.dataPointIndex;
+                        t.w;
+                        return '<div class="arrow_box"><span>$' + Number(e[i][a]) + "</span></div>";
+                    },
+                };
+                s.tooltip = n;
+            }
+            return (
+                !0 === t.axes &&
+                    ((s.chart.sparkline = !1),
+                    (s.yaxis = {
+                        labels: {
+                            style: { color: "#555555", fontSize: "12px" },
+                            formatter: function (t) {
+                                return "$" + t.toFixed(2);
+                            },
+                        },
+                        axisTicks: { show: !0, color: "#ccc" },
+                        axisBorder: { show: !0, color: "#ccc" },
+                    }),
+                    (s.xaxis = {
+                        type: "category",
+                        axisTicks: { show: !0, color: "#ccc" },
+                        axisBorder: { show: !0, color: "#ccc" },
+                        labels: {
+                            style: { colors: "#555555", fontSize: "12px" },
+                            formatter: function (t, e, i) {
+                                return new Date(e).toLocaleDateString("en-GB", { month: "short", day: "2-digit" });
+                            },
+                        },
+                        tooltip: { enabled: !1 },
+                    }),
+                    (s.tooltip = {
+                        x: {
+                            formatter: function (t, e) {
+                                e.series, e.seriesIndex, e.dataPointIndex, e.w;
+                                return new Date(t).toLocaleDateString("en-GB", { year: "numeric", month: "short", day: "2-digit" });
+                            },
+                        },
+                    })),
+                t.options && (t.options.theme && delete s.colors, r(s, t.options), !0 === t.options.title && (s.title = { text: a + " price over time" })),
+                s
+            );
+        }
+        function F(t, e, i, a, s, n, r) {
+            try {
+                var o = t[n](r),
+                    l = o.value;
+            } catch (t) {
+                return void i(t);
+            }
+            o.done ? e(l) : Promise.resolve(l).then(a, s);
+        }
+        function Y(t, e, i, a, s) {
+            return O.apply(this, arguments);
+        }
+        function O() {
+            var t;
+            return (
+                (t = regeneratorRuntime.mark(function t(e, i, a, s, n) {
+                    var r, o, l;
+                    return regeneratorRuntime.wrap(function (t) {
+                        for (;;)
+                            switch ((t.prev = t.next)) {
+                                case 0:
+                                    return (t.next = 2), v(e, i, a, s, n);
+                                case 2:
+                                    return (r = t.sent), (t.next = 5), r;
+                                case 5:
+                                    return (
+                                        (o = t.sent),
+                                        (l = []),
+                                        s &&
+                                            (o.length > 0
+                                                ? s.forEach(function (t) {
+                                                      o[0].push(t);
+                                                  })
+                                                : (o.push([]),
+                                                  s.forEach(function (t) {
+                                                      o[0].push(t);
+                                                  }))),
+                                        o[0].forEach(function (t) {
+                                            var e = [],
+                                                i = t.data,
+                                                a = 0,
+                                                s = 0;
+                                            i.forEach(function (t) {
+                                                var n = t.y,
+                                                    r = i[0].y,
+                                                    o = 1e3 * t.x,
+                                                    l = 100 * (1 - r / n);
+                                                l <= a && (a = l), l >= s && (s = l), e.push({ x: Number(o), y: Number(n).toFixed(2), change: Number(l) });
+                                            }),
+                                                l.push({ name: t.name, data: e, min: Number(a.toFixed(2)), max: Number(s.toFixed(2)) });
+                                        }),
+                                        t.abrupt("return", l)
+                                    );
+                                case 10:
+                                case "end":
+                                    return t.stop();
+                            }
+                    }, t);
+                })),
+                (O = function () {
+                    var e = this,
+                        i = arguments;
+                    return new Promise(function (a, s) {
+                        var n = t.apply(e, i);
+                        function r(t) {
+                            F(n, a, s, r, o, "next", t);
+                        }
+                        function o(t) {
+                            F(n, a, s, r, o, "throw", t);
+                        }
+                        r(void 0);
+                    });
+                }).apply(this, arguments)
+            );
+        }
+        function R(t, e, i, a, s, n, r) {
+            try {
+                var o = t[n](r),
+                    l = o.value;
+            } catch (t) {
+                return void i(t);
+            }
+            o.done ? e(l) : Promise.resolve(l).then(a, s);
+        }
+        function D() {
+            var t;
+            return (
+                (t = regeneratorRuntime.mark(function t(e) {
+                    var i, a, s, n, r, o, h, c;
+                    return regeneratorRuntime.wrap(function (t) {
+                        for (;;)
+                            switch ((t.prev = t.next)) {
+                                case 0:
+                                    return (
+                                        (i = null),
+                                        (a = null),
+                                        (s = []),
+                                        (n = null),
+                                        (r = null),
+                                        (o = null),
+                                        e.chart_id && (o = e.chart_id),
+                                        e.iconomi_tickers && ((i = e.iconomi_tickers), s.push(i)),
+                                        e.cryptocompare_tickers && ((a = e.cryptocompare_tickers), s.push(a)),
+                                        e.cryptocompare_api_key && (n = e.cryptocompare_api_key),
+                                        e.custom_data &&
+                                            ((r = e.custom_data),
+                                            (h = []),
+                                            r.forEach(function (t) {
+                                                h.push(t.name);
+                                            }),
+                                            s.push(h)),
+                                        e.loading_indicator && S(o, e),
+                                        (t.next = 14),
+                                        Y(i, a, n, r, e)
+                                    );
+                                case 14:
+                                    (c = t.sent), new l.a(document.querySelector("#" + o), X(e, s, c)).render(), e.loading_indicator && A(document.querySelector(".".concat(o, ".cryptochart_loading")), 2e3);
+                                case 18:
+                                case "end":
+                                    return t.stop();
+                            }
+                    }, t);
+                })),
+                (D = function () {
+                    var e = this,
+                        i = arguments;
+                    return new Promise(function (a, s) {
+                        var n = t.apply(e, i);
+                        function r(t) {
+                            R(n, a, s, r, o, "next", t);
+                        }
+                        function o(t) {
+                            R(n, a, s, r, o, "throw", t);
+                        }
+                        r(void 0);
+                    });
+                }).apply(this, arguments)
+            );
+        }
+        function N(t, e, i) {
+            var a = null;
+            e && (a = [].concat.apply([], e));
+            var s = i[0].series,
+                n = i[0].rebalanced,
+                o = i[0].labels,
+                l = i[0].tickers,
+                h = {
+                    plotOptions: {
+                        pie: {
+                            donut: {
+                                labels: {
+                                    show: !0,
+                                    name: { show: !0, color: "#000000", offsetY: -15 },
+                                    value: {
+                                        show: !0,
+                                        color: "#000000",
+                                        offsetY: -5,
+                                        formatter: function (t, e) {
+                                            e.seriesIndex;
+                                            return (100 * t).toFixed(2) + "%";
+                                        },
+                                    },
+                                    total: {
+                                        show: !0,
+                                        label: "Total " + a + " Assets:",
+                                        formatter: function (t) {
+                                            return s.length;
+                                        },
+                                    },
+                                },
+                            },
+                        },
+                    },
+                    chart: { id: t.chart_id, type: "donut" },
+                    series: s,
+                    labels: o,
+                    legend: { position: "right", offsetY: 25, horizontalAlign: "left" },
+                    dataLabels: {
+                        enabled: !0,
+                        formatter: function (t, e) {
+                            var i = e.seriesIndex;
+                            e.dataPointIndex, e.w;
+                            return l[i];
+                        },
+                        dropShadow: { enabled: !0 },
+                    },
+                    tooltip: {
+                        custom: function (t) {
+                            var e = t.series,
+                                i = t.seriesIndex;
+                            t.dataPointIndex, t.w;
+                            return '<div class="arrow_box"><span>' + o[i] + " (" + l[i] + ")<br><span class='tooltip-weights'> Current: " + (100 * e[i]).toFixed(2) + "%<br> Target: " + (100 * n[i]).toFixed(2) + "%</span></span></div>";
+                        },
+                    },
+                    colors: ["#4CAF50", "#2196F3", "#FF5722", "#607D8B", "#E91E63", "#673AB7", "#00BCD4", "#FF9800", "#009688", "#8BC34A", "#F44336", "#3F51B5", "#FFEB3B", "#9C27B0", "#FFC107", "#795548", "#CDDC39", "#03A9F4", "#9E9E9E"],
+                };
+            return t.options && (t.options.theme && delete h.colors, r(h, t.options), !0 === t.options.title && (h.title = { text: a + " Crypto Fund Breakdown" })), h;
+        }
+        function H(t, e, i, a, s, n, r) {
+            try {
+                var o = t[n](r),
+                    l = o.value;
+            } catch (t) {
+                return void i(t);
+            }
+            o.done ? e(l) : Promise.resolve(l).then(a, s);
+        }
+        function _(t) {
+            return W.apply(this, arguments);
+        }
+        function W() {
+            var t;
+            return (
+                (t = regeneratorRuntime.mark(function t(e) {
+                    var i, a, s, n;
+                    return regeneratorRuntime.wrap(function (t) {
+                        for (;;)
+                            switch ((t.prev = t.next)) {
+                                case 0:
+                                    (i = []), (a = 0);
+                                case 2:
+                                    if (!(a < e.length)) {
+                                        t.next = 13;
+                                        break;
+                                    }
+                                    return (
+                                        (t.next = 5),
+                                        fetch("https://api.iconomi.com/v1/daa/" + e[a] + "/structure").catch(function (t) {
+                                            return console.error("Error:", t);
+                                        })
+                                    );
+                                case 5:
+                                    return (s = t.sent), (t.next = 8), s.json();
+                                case 8:
+                                    (n = t.sent), i.push({ name: e[a], data: n.values });
+                                case 10:
+                                    a++, (t.next = 2);
+                                    break;
+                                case 13:
+                                    return t.abrupt("return", i);
+                                case 14:
+                                case "end":
+                                    return t.stop();
+                            }
+                    }, t);
+                })),
+                (W = function () {
+                    var e = this,
+                        i = arguments;
+                    return new Promise(function (a, s) {
+                        var n = t.apply(e, i);
+                        function r(t) {
+                            H(n, a, s, r, o, "next", t);
+                        }
+                        function o(t) {
+                            H(n, a, s, r, o, "throw", t);
+                        }
+                        r(void 0);
+                    });
+                }).apply(this, arguments)
+            );
+        }
+        function B(t, e, i, a, s, n, r) {
+            try {
+                var o = t[n](r),
+                    l = o.value;
+            } catch (t) {
+                return void i(t);
+            }
+            o.done ? e(l) : Promise.resolve(l).then(a, s);
+        }
+        function V(t, e) {
+            return G.apply(this, arguments);
+        }
+        function G() {
+            var t;
+            return (
+                (t = regeneratorRuntime.mark(function t(e, i) {
+                    var a, s, n;
+                    return regeneratorRuntime.wrap(function (t) {
+                        for (;;)
+                            switch ((t.prev = t.next)) {
+                                case 0:
+                                    return (t.next = 2), _(e);
+                                case 2:
+                                    return (a = t.sent), (t.next = 5), a;
+                                case 5:
+                                    return (
+                                        (s = t.sent),
+                                        (n = []),
+                                        s.forEach(function (t) {
+                                            var e = [],
+                                                i = [],
+                                                a = [],
+                                                s = [];
+                                            t.data.forEach(function (t) {
+                                                i.push(t.targetWeight), s.push(t.rebalancedWeight), e.push(t.assetName), a.push(t.assetTicker);
+                                            }),
+                                                n.push({ series: i, labels: e, tickers: a, rebalanced: s });
+                                        }),
+                                        t.abrupt("return", n)
+                                    );
+                                case 9:
+                                case "end":
+                                    return t.stop();
+                            }
+                    }, t);
+                })),
+                (G = function () {
+                    var e = this,
+                        i = arguments;
+                    return new Promise(function (a, s) {
+                        var n = t.apply(e, i);
+                        function r(t) {
+                            B(n, a, s, r, o, "next", t);
+                        }
+                        function o(t) {
+                            B(n, a, s, r, o, "throw", t);
+                        }
+                        r(void 0);
+                    });
+                }).apply(this, arguments)
+            );
+        }
+        function j(t, e, i, a, s, n, r) {
+            try {
+                var o = t[n](r),
+                    l = o.value;
+            } catch (t) {
+                return void i(t);
+            }
+            o.done ? e(l) : Promise.resolve(l).then(a, s);
+        }
+        function U() {
+            var t;
+            return (
+                (t = regeneratorRuntime.mark(function t(e) {
+                    var i, a, s, n, r, o;
+                    return regeneratorRuntime.wrap(function (t) {
+                        for (;;)
+                            switch ((t.prev = t.next)) {
+                                case 0:
+                                    return (
+                                        (i = null),
+                                        (a = []),
+                                        (s = null),
+                                        (n = null),
+                                        e.chart_id && (n = e.chart_id),
+                                        e.iconomi_tickers && ((i = e.iconomi_tickers), a.push(i)),
+                                        e.custom_data &&
+                                            ((s = e.custom_data),
+                                            (r = []),
+                                            s.forEach(function (t) {
+                                                r.push(t.name);
+                                            }),
+                                            a.push(r)),
+                                        e.loading_indicator && S(n, e),
+                                        (t.next = 10),
+                                        V(i, s)
+                                    );
+                                case 10:
+                                    (o = t.sent), new l.a(document.querySelector("#" + n), N(e, a, o)).render(), e.loading_indicator && A(document.querySelector(".".concat(n, ".cryptochart_loading")), 2e3);
+                                case 14:
+                                case "end":
+                                    return t.stop();
+                            }
+                    }, t);
+                })),
+                (U = function () {
+                    var e = this,
+                        i = arguments;
+                    return new Promise(function (a, s) {
+                        var n = t.apply(e, i);
+                        function r(t) {
+                            j(n, a, s, r, o, "next", t);
+                        }
+                        function o(t) {
+                            j(n, a, s, r, o, "throw", t);
+                        }
+                        r(void 0);
+                    });
+                }).apply(this, arguments)
+            );
+        }
+        function q(t, e, i) {
+            var a = null;
+            e && (a = [].concat.apply([], e));
+            var s = i[0].rebalanced_coin_weights,
+                n = i[0].current_coin_weights,
+                o = i[0].coin_names,
+                l = {
+                    plotOptions: { bar: { horizontal: !0, columnWidth: "70%", barHeight: "70%" } },
+                    yaxis: { show: !0 },
+                    xaxis: {
+                        labels: {
+                            show: !0,
+                            formatter: function (t, e, i) {
+                                return t + "%";
+                            },
+                        },
+                        tickAmount: 5,
+                        max: 100,
+                        axisTicks: { show: !0 },
+                        axisBorder: { show: !0 },
+                    },
+                    chart: { id: t.chart_id, type: "bar", stacked: !0, stackType: "100%", toolbar: { show: !1 } },
+                    grid: { yaxis: { lines: { show: !1 } } },
+                    series: s,
+                    labels: t.iconomi_tickers,
+                    legend: { position: "top", horizontalAlign: "left", onItemClick: { toggleDataSeries: !1 } },
+                    dataLabels: {
+                        enabled: !0,
+                        formatter: function (t, e) {
+                            var i = e.seriesIndex;
+                            e.dataPointIndex, e.w;
+                            return n[i].name;
+                        },
+                        dropShadow: { enabled: !0 },
+                    },
+                    tooltip: {
+                        custom: function (t) {
+                            var e = t.series,
+                                i = t.seriesIndex,
+                                a = t.dataPointIndex,
+                                s = (t.w, e[i][a]),
+                                r = n[i].data[a],
+                                l = o.find(function (t) {
+                                    return t.cointicker === n[i].name;
+                                });
+                            return '<div class="arrow_box"><span>' + l.name + " (" + l.cointicker + ")<br><span class='tooltip-weights'> Current: " + (100 * r).toFixed(2) + "%<br> Target: " + (100 * s).toFixed(2) + "%</span></span></div>";
+                        },
+                    },
+                    colors: ["#4CAF50", "#2196F3", "#FF5722", "#607D8B", "#E91E63", "#673AB7", "#00BCD4", "#FF9800", "#009688", "#8BC34A", "#F44336", "#3F51B5", "#FFEB3B", "#9C27B0", "#FFC107", "#795548", "#CDDC39", "#03A9F4", "#9E9E9E"],
+                    fill: { opacity: 1, type: "gradient", gradient: { shade: "dark", type: "vertical", shadeIntensity: 0.35, gradientToColors: void 0, inverseColors: !1, opacityFrom: 0.95, opacityTo: 0.95, stops: [95, 0, 100] } },
+                };
+            return t.options && (t.options.theme && delete l.colors, r(l, t.options), !0 === t.options.title && (l.title = { text: a.join(", ") + " Crypto Funds" })), l;
+        }
+        function Z(t, e, i, a, s, n, r) {
+            try {
+                var o = t[n](r),
+                    l = o.value;
+            } catch (t) {
+                return void i(t);
+            }
+            o.done ? e(l) : Promise.resolve(l).then(a, s);
+        }
+        function $(t, e) {
+            return J.apply(this, arguments);
+        }
+        function J() {
+            var t;
+            return (
+                (t = regeneratorRuntime.mark(function t(e, i) {
+                    var a, s, n, r, o, l, h, c, d;
+                    return regeneratorRuntime.wrap(function (t) {
+                        for (;;)
+                            switch ((t.prev = t.next)) {
+                                case 0:
+                                    return (
+                                        (d = function (t) {
+                                            var e = [];
+                                            return (
+                                                Object.keys(t).forEach(function (i, a) {
+                                                    var s = {};
+                                                    (s.name = i), (s.data = t[i]), e.push(s);
+                                                }),
+                                                e
+                                            );
+                                        }),
+                                        (t.next = 3),
+                                        _(e)
+                                    );
+                                case 3:
+                                    return (a = t.sent), (t.next = 6), a;
+                                case 6:
+                                    return (
+                                        (s = t.sent),
+                                        (n = []),
+                                        (r = []),
+                                        (o = []),
+                                        s.forEach(function (t) {
+                                            var e = [];
+                                            t.data.forEach(function (i) {
+                                                e.push({ portfolio: t.name, assetName: i.assetName, assetTicker: i.assetTicker, rebalanced: i.rebalancedWeight, weight: i.targetWeight }),
+                                                    o.push({ name: i.assetName, cointicker: i.assetTicker });
+                                            }),
+                                                n.push(e);
+                                        }),
+                                        n.forEach(function (t, e) {
+                                            o.forEach(function (i) {
+                                                if (
+                                                    !t.some(function (t) {
+                                                        return t.assetTicker === i.cointicker;
+                                                    })
+                                                ) {
+                                                    var a = { portfolio: t[0].portfolio, assetName: i.cointicker, assetTicker: i.cointicker, rebalanced: 0, weight: 0 };
+                                                    n[e].push(a);
+                                                }
+                                            });
+                                        }),
+                                        (l = n.flat()),
+                                        (h = []),
+                                        (c = []),
+                                        Object.keys(l).forEach(function (t, e) {
+                                            var i = l[t],
+                                                a = i.assetTicker,
+                                                s = i.assetTicker;
+                                            (h[a] = h[a] || []), h[a].push(i.rebalanced), (c[s] = c[s] || []), c[s].push(i.weight);
+                                        }),
+                                        r.push({ rebalanced_coin_weights: d(h), current_coin_weights: d(c), coin_names: o }),
+                                        t.abrupt("return", r)
+                                    );
+                                case 18:
+                                case "end":
+                                    return t.stop();
+                            }
+                    }, t);
+                })),
+                (J = function () {
+                    var e = this,
+                        i = arguments;
+                    return new Promise(function (a, s) {
+                        var n = t.apply(e, i);
+                        function r(t) {
+                            Z(n, a, s, r, o, "next", t);
+                        }
+                        function o(t) {
+                            Z(n, a, s, r, o, "throw", t);
+                        }
+                        r(void 0);
+                    });
+                }).apply(this, arguments)
+            );
+        }
+        function Q(t, e, i, a, s, n, r) {
+            try {
+                var o = t[n](r),
+                    l = o.value;
+            } catch (t) {
+                return void i(t);
+            }
+            o.done ? e(l) : Promise.resolve(l).then(a, s);
+        }
+        function K() {
+            var t;
+            return (
+                (t = regeneratorRuntime.mark(function t(e) {
+                    var i, a, s, n, r, o;
+                    return regeneratorRuntime.wrap(function (t) {
+                        for (;;)
+                            switch ((t.prev = t.next)) {
+                                case 0:
+                                    return (
+                                        (i = null),
+                                        (a = []),
+                                        (s = null),
+                                        (n = null),
+                                        e.chart_id && (n = e.chart_id),
+                                        e.iconomi_tickers && ((i = e.iconomi_tickers), a.push(i)),
+                                        e.custom_data &&
+                                            ((s = e.custom_data),
+                                            (r = []),
+                                            s.forEach(function (t) {
+                                                r.push(t.name);
+                                            }),
+                                            a.push(r)),
+                                        e.loading_indicator && S(n, e),
+                                        (t.next = 10),
+                                        $(i, s)
+                                    );
+                                case 10:
+                                    (o = t.sent), new l.a(document.querySelector("#" + n), q(e, a, o)).render(), e.loading_indicator && A(document.querySelector(".".concat(n, ".cryptochart_loading")), 2e3);
+                                case 14:
+                                case "end":
+                                    return t.stop();
+                            }
+                    }, t);
+                })),
+                (K = function () {
+                    var e = this,
+                        i = arguments;
+                    return new Promise(function (a, s) {
+                        var n = t.apply(e, i);
+                        function r(t) {
+                            Q(n, a, s, r, o, "next", t);
+                        }
+                        function o(t) {
+                            Q(n, a, s, r, o, "throw", t);
+                        }
+                        r(void 0);
+                    });
+                }).apply(this, arguments)
+            );
+        }
+        function tt(t) {
+            !(function (t) {
+                L.apply(this, arguments);
+            })(t);
+        }
+        function et(t) {
+            !(function (t) {
+                I.apply(this, arguments);
+            })(t);
+        }
+        function it(t) {
+            !(function (t) {
+                D.apply(this, arguments);
+            })(t);
+        }
+        function at(t) {
+            !(function (t) {
+                U.apply(this, arguments);
+            })(t);
+        }
+        function st(t) {
+            !(function (t) {
+                K.apply(this, arguments);
+            })(t);
+        }
+        i.d(e, "roiComparison", function () {
+            return tt;
+        }),
+            i.d(e, "priceHeatmap", function () {
+                return et;
+            }),
+            i.d(e, "priceHistory", function () {
+                return it;
+            }),
+            i.d(e, "cryptoFundPie", function () {
+                return at;
+            }),
+            i.d(e, "cryptoFundBar", function () {
+                return st;
+            });
+    },
+]);
diff --git a/basicswap/templates/404.html b/basicswap/templates/404.html
index ccc699c..49ddd9a 100644
--- a/basicswap/templates/404.html
+++ b/basicswap/templates/404.html
@@ -1,57 +1,50 @@
 {% include 'header.html' %}
 <div class="container mx-auto">
-
- <section class="bg-white p-5 mt-5">
-  <div class="flex flex-wrap items-center -m-2">
-   <div class="w-full md:w-1/2 p-2">
-    <ul class="flex flex-wrap items-center gap-x-3 mb-2">
-     <li>
-      <a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/">
-       <p>Home</p>
-      </a>
-     </li>
-     <li>
-      <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-       <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
-      </svg>
-     </li>
-     <li><a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/404">404</a></li>
-     <li>
-      <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-       <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
-      </svg>
-     </li>
-    </ul>
-   </div>
-  </div>
- </section>
-
-{% include 'inc_messages.html' %}
-
- <section class="relative py-24 md:py-40 bg-white">
-  <div class="relative z-10 container px-4 mx-auto">
-    <div class="flex flex-wrap items-center -mx-4">
-      <div class="w-full md:w-1/2 px-4 mb-16 md:mb-0">
-        <div class="md:max-w-xl md:mx-auto text-center md:text-left">
-          <span class="inline-block mb-6 px-3 py-1 font-semibold bg-blue-100 rounded-full text-sm">Error 404</span>
-          <h2 class="mb-4 text-4xl md:text-5xl leading-tight font-bold tracking-tighter">Oh no! Error 404</h2>
-          <p class="mb-6 text-lg md:text-xl text-coolGray-500">Something went wrong, so this page is broken.</p>
-          <div class="flex flex-wrap">
-            <div class="w-full lg:w-auto py-1 lg:py-0 lg:mr-6"><a class="inline-block py-5 px-7 w-full text-base md:text-lg leading-4 text-blue-50 font-medium text-center bg-blue-500 hover:bg-blue-600 border border-blue-500 rounded-md shadow-sm focus:ring-0 focus:outline-none" href="/">Go back to Homepage</a></div>
-            <div class="w-full lg:w-auto py-1 lg:py-0"><a class="inline-block py-5 px-7 w-full text-base md:text-lg leading-4 text-coolGray-800 font-medium text-center bg-white hover:bg-coolGray-100 border border-coolGray-200 rounded-md shadow-sm focus:ring-0 focus:outline-none" href="/refresh">Try Again</a></div> <!-- todo add last URL page visit -->
-          </div>
-        </div>
-      </div>
-      <div class="w-full md:w-1/3 px-4">
-        <img class="mx-auto" src="/static/images/other/what-why.gif" alt="">
+  <section class="bg-white p-5 mt-5">
+    <div class="flex flex-wrap items-center -m-2">
+      <div class="w-full md:w-1/2 p-2">
+        <ul class="flex flex-wrap items-center gap-x-3 mb-2">
+          <li>
+            <a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/">
+              <p>Home</p>
+            </a>
+          </li>
+          <li>
+            <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
+            </svg>
+          </li>
+          <li><a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/404">404</a></li>
+          <li>
+            <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
+            </svg>
+          </li>
+        </ul>
       </div>
     </div>
-  </div>
-</section>
-
-</div>
-{% include 'footer.html' %}
+  </section> 
+  {% include 'inc_messages.html' %}
+  <section class="relative py-24 md:py-40 bg-white">
+    <div class="relative z-10 container px-4 mx-auto">
+      <div class="flex flex-wrap items-center -mx-4">
+        <div class="w-full md:w-1/2 px-4 mb-16 md:mb-0">
+          <div class="md:max-w-xl md:mx-auto text-center md:text-left"> <span class="inline-block mb-6 px-3 py-1 font-semibold bg-blue-100 rounded-full text-sm">Error 404</span>
+            <h2 class="mb-4 text-4xl md:text-5xl leading-tight font-bold tracking-tighter">Oh no! Error 404</h2>
+            <p class="mb-6 text-lg md:text-xl text-coolGray-500">Something went wrong, so this page is broken.</p>
+            <div class="flex flex-wrap">
+              <div class="w-full lg:w-auto py-1 lg:py-0 lg:mr-6"><a class="inline-block py-5 px-7 w-full text-base md:text-lg leading-4 text-blue-50 font-medium text-center bg-blue-500 hover:bg-blue-600 border border-blue-500 rounded-md shadow-sm focus:ring-0 focus:outline-none" href="/">Go back to Homepage</a></div>
+              <div class="w-full lg:w-auto py-1 lg:py-0"><a class="inline-block py-5 px-7 w-full text-base md:text-lg leading-4 text-coolGray-800 font-medium text-center bg-white hover:bg-coolGray-100 border border-coolGray-200 rounded-md shadow-sm focus:ring-0 focus:outline-none" href="/refresh">Try Again</a></div>
+              <!-- todo add last URL page visit -->
+            </div>
+          </div>
+        </div>
+        <div class="w-full md:w-1/3 px-4"> <img class="mx-auto" src="/static/images/other/what-why.gif" alt=""> </div>
+      </div>
+    </div>
+  </section>
+</div> 
+{% include 'footer.html' %} 
 </div>
 </body>
-
-</html>
+</html>
\ No newline at end of file
diff --git a/basicswap/templates/active.html b/basicswap/templates/active.html
index 96d7f8e..bcb3f7d 100644
--- a/basicswap/templates/active.html
+++ b/basicswap/templates/active.html
@@ -1,6 +1,5 @@
 {% include 'header.html' %}
 <div class="container mx-auto">
-
   <section class="bg-white p-5 mt-5">
     <div class="flex flex-wrap items-center -m-2">
       <div class="w-full md:w-1/2 p-2">
@@ -25,40 +24,31 @@
       </div>
     </div>
   </section>
-
   <section class="py-4">
     <div class="container px-4 mx-auto">
-      <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden">
-        <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt="">
-        <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt="">
-        <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
+      <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden"> <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
         <div class="relative z-20 flex flex-wrap items-center">
           <div class="w-full md:w-1/2 p-3">
             <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">Swaps in Progress / Active Swaps</h2>
-            <p class="font-semibold text-coolGray-200">
-              {% if refresh %}
-              Page Refresh {{ refresh }} seconds
-              {% endif %}
-            </p>
+            <p class="font-semibold text-coolGray-200"> {% if refresh %} Page Refresh {{ refresh }} seconds {% endif %} </p>
           </div>
           <div class="w-full md:w-1/2 p-3">
-            <a id="refresh" href="/active"><button class="block md:ml-auto px-5 py-3 font-medium text-lcg text-white bg-blue-500 hover:bg-blue-600 rounded-md focus:ring-0 focus:outline-none">Refresh</button></a>
+            <a id="refresh" href="/active">
+              <button class="block md:ml-auto px-5 py-3 font-medium text-lcg text-white bg-blue-500 hover:bg-blue-600 rounded-md focus:ring-0 focus:outline-none">Refresh</button>
+            </a>
           </div>
         </div>
       </div>
     </div>
   </section>
-
   <section class="bg-white">
     <div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden bg-white">
       <div class="pb-6 border-coolGray-100">
         <div class="flex flex-wrap items-center justify-between -m-2">
           <div class="w-full pt-2">
-
             <div class="container px-0 mx-auto mt-5">
               <div class="overflow-x-auto relative border sm:rounded-lg">
                 <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
-
                   <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300">
                     <tr>
                       <th scope="col" class="py-3 px-6"> Bid ID </th>
@@ -68,8 +58,7 @@
                       <th scope="col" class="py-3 px-7"> PTX Status </th>
                     </tr>
                   </thead>
-
-                  <tbody>
+                  <tbody> 
                     {% for s in active_swaps %}
                     <tr class="bg-white border-t hover:bg-gray-50">
                       <td class="py-4 px-6 text-xs monospace"><a href=/bid/{{ s[0] }}>{{ s[0] }}</a></td>
@@ -77,9 +66,9 @@
                       <td class="py-4 px-6">{{ s[2] }}</td>
                       <td class="py-4 px-6">{{ s[3] }}</td>
                       <td class="py-4 px-6">{{ s[4] }}</td>
-                    </tr>
-                    {% endfor %}
-                  </tbody>
+                    </tr> 
+                  {% endfor %} 
+                </tbody>
                 </table>
               </div>
             </div>
@@ -87,11 +76,8 @@
         </div>
       </div>
     </div>
-
   </section>
-
 </div>
 {% include 'footer.html' %}
 </body>
-
-</html>
+</html>
\ No newline at end of file
diff --git a/basicswap/templates/automation_strategies.html b/basicswap/templates/automation_strategies.html
index d9e39da..e83d344 100644
--- a/basicswap/templates/automation_strategies.html
+++ b/basicswap/templates/automation_strategies.html
@@ -24,41 +24,32 @@
       </div>
     </div>
   </section>
-
   <section class="py-4">
     <div class="container px-4 mx-auto">
-      <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden">
-        <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt="">
-        <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt="">
-        <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/elements/wave.svg" alt="">
+      <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden"> <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/elements/wave.svg" alt="">
         <div class="relative z-20 flex flex-wrap items-center -m-3">
           <div class="w-full md:w-1/2 p-3">
             <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">Automation Strategies</h2>
             <p class="font-semibold text-coolGray-200"></p>
           </div>
           <div class="w-full md:w-1/2 p-3">
-            <a id="refresh" href="/newautomationstrategy"><button class="block md:ml-auto px-5 py-3 font-medium text-lcg text-white bg-blue-500 hover:bg-blue-600 rounded-md focus:ring-0 focus:outline-none">Create New Strategy</button></a>
+            <a id="refresh" href="/newautomationstrategy">
+              <button class="block md:ml-auto px-5 py-3 font-medium text-lcg text-white bg-blue-500 hover:bg-blue-600 rounded-md focus:ring-0 focus:outline-none">Create New Strategy</button>
+            </a>
           </div>
         </div>
       </div>
     </div>
-  </section>
-
-{% include 'inc_messages.html' %}
-
+  </section> {% include 'inc_messages.html' %}
   <section class="bg-white">
     <div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden bg-white ">
       <div class="pb-6 border-coolGray-100">
         <div class="flex flex-wrap items-center justify-between -m-2">
           <div class="w-full pt-2">
-
             <div class="container px-0 mx-auto mt-5">
               <div class="overflow-x-auto relative border sm:rounded-lg">
-
                 <form method="post">
-
                   <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
-
                     <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300">
                       <tr>
                         <th scope="col" class="py-3 px-6">Filter</th>
@@ -66,45 +57,37 @@
                         <th scope="col"></th>
                       </tr>
                     </thead>
-
                     <tr class="bg-white border-t hover:bg-gray-50">
-                      <td class="py-4 px-6 bold w-96">
-                        Sort by:
-                      </td>
+                      <td class="py-4 px-6 bold w-96"> Sort by: </td>
                       <td class="py-4 bold w-96">
                         <select class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="sort_by">
-                          <option value="created_at"{% if filters.sort_by=='created_at' %} selected{% endif %}>Created At</option>
+                          <option value="created_at" {% if filters.sort_by=='created_at' %} selected{% endif %}>Created At</option>
                         </select>
                       </td>
                       <td class="py-4 px-6 pr-5">
                         <select class="pr-15 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="sort_dir">
-                          <option value="asc"{% if filters.sort_dir=='asc' %} selected{% endif %}>Ascending</option>
-                          <option value="desc"{% if filters.sort_dir=='desc' %} selected{% endif %}>Descending</option>
+                          <option value="asc" {% if filters.sort_dir=='asc' %} selected{% endif %}>Ascending</option>
+                          <option value="desc" {% if filters.sort_dir=='desc' %} selected{% endif %}>Descending</option>
                         </select>
                       </td>
                     </tr>
-
                   </table>
               </div>
             </div>
-
             <div class="pt-10 bg-white bg-opacity-60 rounded-b-md">
               <div class="w-full md:w-0/12">
                 <div class="flex flex-wrap justify-end -m-1.5">
-
                   <div class="w-full md:w-auto p-1.5">
                     <button type="submit" name='pageback' value="Page Back" class="outline-none flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none">
                       <svg aria-hidden="true" class="mr-2 w-5 h-5" fill="#556987" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                         <path fill-rule="evenodd" d="M7.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l2.293 2.293a1 1 0 010 1.414z" clip-rule="evenodd"></path>
                       </svg> <span>Page Back</span> </button>
                   </div>
-
                   <div class="flex items-center">
                     <div class="w-full md:w-auto p-1.5">
                       <p class="text-sm font-heading">Page: {{ filters.page_no }}</p>
                     </div>
                   </div>
-
                   <div class="w-full md:w-auto p-1.5">
                     <button type="submit" name='pageforwards' value="Page Forwards" class="outline-none flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none"> <span>Page Forwards</span>
                       <svg aria-hidden="true" class="ml-2 w-5 h-5" fill="#556987" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
@@ -112,62 +95,49 @@
                       </svg>
                     </button>
                   </div>
-
                   <div class="w-full md:w-auto p-1.5 ml-2">
-                    <button name='clearfilters' value="Clear Filters" class="outline-none flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none">
-                      <span>Clear Filters</span> </button>
+                    <button name='clearfilters' value="Clear Filters" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none">        <svg class="mr-2 w-5 h-5" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
+                              <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#556987" stroke-linejoin="round" class="nc-icon-wrapper">
+                                <rect x="2" y="2" width="7" height="7"></rect>
+                                <rect x="15" y="15" width="7" height="7"></rect>
+                                <rect x="2" y="15" width="7" height="7"></rect>
+                                <polyline points="15 6 17 8 22 3" stroke="#556987"></polyline>
+                              </g>
+                            </svg>  Clear Filters</button>
                   </div>
-
-                  <div class="w-full md:w-auto p-1.5 ml-2">
-                    <button value="Submit" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
-                      <span>Submit</span> </button>
-                  </div>
-
+                               <div class="w-full md:w-auto p-1.5 ml-2">
+                          <button name="" value="Submit" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none"><svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round" ><polyline points=" 6,12 10,16 18,8 " stroke="#ffffff"></polyline> <circle cx="12" cy="12" r="11"></circle></g></svg>  Apply</button>
+                        </div>
                 </div>
               </div>
             </div>
-
             <input type="hidden" name="formid" value="{{ form_id }}">
-            <input type="hidden" name="pageno" value="{{ filters.page_no }}">
-
-            </form>
-
+            <input type="hidden" name="pageno" value="{{ filters.page_no }}"> </form>
             <div class="container px-0 mx-auto mt-10">
               <div class="overflow-x-auto relative border sm:rounded-lg">
-
                 <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
-
-
                   <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300">
                     <tr>
                       <th scope="col" class="py-3 px-6">Name</th>
                       <th scope="col" class="py-3">Type</th>
                     </tr>
-                  </thead>
-
+                  </thead> 
                   {% for s in strategies %}
                   <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-4 px-6 bold w-96">
-                      <a class="monospace bolder-t" href=/automationstrategy/{{ s[0] }}>{{ s[1] }}</a>
-                    </td>
-                    <td class="py-4 pr-5">{{ s[2] }}
-                    </td>
-                  </tr>
-                  {% endfor %}
-
-                </table>
+                    <td class="py-4 px-6 bold w-96"> <a class="monospace bolder-t" href=/automationstrategy/{{ s[0] }}>{{ s[1] }}</a> </td>
+                    <td class="py-4 pr-5">{{ s[2] }} </td>
+                  </tr> 
+                {% endfor %} 
+              </table>
               </div>
             </div>
-
           </div>
         </div>
       </div>
     </div>
-
   </section>
-</div>
+</div> 
 {% include 'footer.html' %}
 </div>
 </body>
-
-</html>
+</html>
\ No newline at end of file
diff --git a/basicswap/templates/automation_strategy.html b/basicswap/templates/automation_strategy.html
index b67d32b..5bffdd7 100644
--- a/basicswap/templates/automation_strategy.html
+++ b/basicswap/templates/automation_strategy.html
@@ -1,122 +1,97 @@
 {% include 'header.html' %}
 <div class="container mx-auto">
- <section class="bg-white p-5 mt-5">
-  <div class="flex flex-wrap items-center -m-2">
-   <div class="w-full md:w-1/2 p-2">
-    <ul class="flex flex-wrap items-center gap-x-3 mb-2">
-     <li>
-      <a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/">
-       <p>Home</p>
-      </a>
-     </li>
-     <li>
-      <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-       <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
-      </svg>
-     </li>
-     <li><a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/automation">Automation Strategies</a></li>
-     <li>
-      <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-       <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
-      </svg>
-     </li>
-     <li><a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/automation">ID: {{ strategy_id }}</a></li>
-    </ul>
-   </div>
-  </div>
- </section>
-
- <section class="py-4">
-  <div class="container px-4 mx-auto">
-   <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden">
-    <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt="">
-    <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt="">
-    <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
-    <div class="relative z-20 flex flex-wrap items-center -m-3">
-     <div class="w-full md:w-1/2 p-3">
-      <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">Automation Strategy {{ strategy_id }}</h2>
-     </div>
-    </div>
-   </div>
-  </div>
- </section>
-
-{% include 'inc_messages.html' %}
-
- <section class="bg-white">
-  <div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden bg-white ">
-   <div class="pb-6 border-coolGray-100">
-    <div class="flex flex-wrap items-center justify-between -m-2">
-     <div class="w-full pt-2 text-center ">
-
-      <div class="container px-0 mx-auto mt-5">
-       <div class="overflow-x-auto relative border sm:rounded-lg">
-
-        <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
-
-         <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300">
-          <tr>
-           <th scope="col" class="py-3 px-6">Option</th>
-           <th scope="col" class="py-3">Type</th>
-           <th scope="col"></th>
-          </tr>
-         </thead>
-
-         <tr class="bg-white border-t hover:bg-gray-50">
-          <td class="py-4 px-6 bold w-96">Label</td>
-          <td>{{ strategy.label }}</td>
-         </tr>
-         <tr class="bg-white border-t hover:bg-gray-50">
-          <td class="py-4 px-6 bold w-96">Type</td>
-          <td>{{ strategy.type }}</td>
-         </tr>
-         <tr class="bg-white border-t hover:bg-gray-50">
-          <td class="py-4 px-6 bold w-96">Only known identities</td>
-          <td>{{ strategy.only_known_identities }}</td>
-         </tr>
-
-         <tr class="bg-white border-t hover:bg-gray-50">
-          <td class="py-4 px-6 bold w-96">Data</td>
-          <td class="py-4 pr-5">
-           <textarea class="outline-none block p-2.5 text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 w-full monospace" rows="5" readonly>
-           {{ strategy.data }}
-           </textarea>
-         <tr class="bg-white border-t hover:bg-gray-50">
-          <td class="py-4 px-6 bold w-96">Notes</td>
-          <td class="py-4 pr-5">
-           <textarea class="outline-none block p-2.5 text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 w-full monospace" rows="5" readonly>
-           {{ strategy.note }}
-           </textarea>
-          </td>
-         </tr>
-        </table>
-
-       </div>
+  <section class="bg-white p-5 mt-5">
+    <div class="flex flex-wrap items-center -m-2">
+      <div class="w-full md:w-1/2 p-2">
+        <ul class="flex flex-wrap items-center gap-x-3 mb-2">
+          <li>
+            <a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/">
+              <p>Home</p>
+            </a>
+          </li>
+          <li>
+            <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
+            </svg>
+          </li>
+          <li><a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/automation">Automation Strategies</a></li>
+          <li>
+            <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
+            </svg>
+          </li>
+          <li><a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/automation">ID: {{ strategy_id }}</a></li>
+        </ul>
       </div>
-
-      <div class="p-6 pt-10 bg-white bg-opacity-60 rounded-b-md">
-       <div class="w-full md:w-0/12">
-        <div class="flex flex-wrap justify-end -m-1.5">
-
-         <div class="w-full md:w-auto p-1.5 ml-2">
-          <a href="/automation" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
-            <span>Back</span> </a>
-         </div>
-
+    </div>
+  </section>
+  <section class="py-4">
+    <div class="container px-4 mx-auto">
+      <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden"> <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
+        <div class="relative z-20 flex flex-wrap items-center -m-3">
+          <div class="w-full md:w-1/2 p-3">
+            <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">Automation Strategy {{ strategy_id }}</h2> </div>
         </div>
-       </div>
       </div>
-
-     </div>
     </div>
-   </div>
-  </div>
-
- </section>
-
-</div>
+  </section>
+  {% include 'inc_messages.html' %}
+  <section class="bg-white">
+    <div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden bg-white ">
+      <div class="pb-6 border-coolGray-100">
+        <div class="flex flex-wrap items-center justify-between -m-2">
+          <div class="w-full pt-2 text-center ">
+            <div class="container px-0 mx-auto mt-5">
+              <div class="overflow-x-auto relative border sm:rounded-lg">
+                <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
+                  <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300">
+                    <tr>
+                      <th scope="col" class="py-3 px-6">Option</th>
+                      <th scope="col" class="py-3">Type</th>
+                      <th scope="col"></th>
+                    </tr>
+                  </thead>
+                  <tr class="bg-white border-t hover:bg-gray-50">
+                    <td class="py-4 px-6 bold w-96">Label</td>
+                    <td>{{ strategy.label }}</td>
+                  </tr>
+                  <tr class="bg-white border-t hover:bg-gray-50">
+                    <td class="py-4 px-6 bold w-96">Type</td>
+                    <td>{{ strategy.type }}</td>
+                  </tr>
+                  <tr class="bg-white border-t hover:bg-gray-50">
+                    <td class="py-4 px-6 bold w-96">Only known identities</td>
+                    <td>{{ strategy.only_known_identities }}</td>
+                  </tr>
+                  <tr class="bg-white border-t hover:bg-gray-50">
+                    <td class="py-4 px-6 bold w-96">Data</td>
+                    <td class="py-4 pr-5">
+                      <textarea class="outline-none block p-2.5 text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 w-full monospace" rows="5" readonly>{{ strategy.data }}</textarea>
+                      <tr class="bg-white border-t hover:bg-gray-50">
+                        <td class="py-4 px-6 bold w-96">Notes</td>
+                        <td class="py-4 pr-5">
+                          <textarea class="outline-none block p-2.5 text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 w-full monospace" rows="5" readonly>{{ strategy.note }}</textarea>
+                        </td>
+                      </tr>
+                </table>
+              </div>
+            </div>
+            <div class="p-6 pt-10 bg-white bg-opacity-60 rounded-b-md">
+              <div class="w-full md:w-0/12">
+                <div class="flex flex-wrap justify-end -m-1.5">
+                  <div class="w-full md:w-auto p-1.5 ml-2">
+                    <a href="/automation" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-non"><svg class="text-gray-500 w-5 h-5 mr-2" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="square" stroke-width="2" fill="none" stroke="#556987" stroke-linejoin="miter" class="nc-icon-wrapper" stroke-miterlimit="10"><line data-cap="butt" x1="18" y1="12" x2="7" y2="12" stroke-linecap="butt" stroke="#556987"></line> <polyline points=" 11,16 7,12 11,8 " stroke="#5569878"></polyline> <circle cx="12" cy="12" r="11"></circle></g></svg> <span>Back</span> </a>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</div> 
 {% include 'footer.html' %}
 </div>
 </body>
-
-</html>
+</html>
\ No newline at end of file
diff --git a/basicswap/templates/automation_strategy_new.html b/basicswap/templates/automation_strategy_new.html
index a5123ec..fb0049a 100644
--- a/basicswap/templates/automation_strategy_new.html
+++ b/basicswap/templates/automation_strategy_new.html
@@ -25,39 +25,28 @@
       </div>
     </div>
   </section>
-
   <section class="py-4">
     <div class="container px-4 mx-auto">
-      <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden">
-        <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt="">
-        <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt="">
-        <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
+      <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden"> <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
         <div class="relative z-20 flex flex-wrap items-center -m-3">
           <div class="w-full md:w-1/2 p-3">
-            <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">New Automation Strategy (todo)</h2>
-          </div>
+            <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">New Automation Strategy (todo)</h2> </div>
         </div>
       </div>
     </div>
   </section>
-
 {% include 'inc_messages.html' %}
-
   <section class="bg-white">
     <div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden bg-white ">
       <div class="pb-6 border-coolGray-100">
         <div class="flex flex-wrap items-center justify-between -m-2">
-          <div class="w-full pt-2 text-center ">
-
-          </div>
+          <div class="w-full pt-2 text-center "> </div>
         </div>
       </div>
     </div>
-
   </section>
-</div>
+</div> 
 {% include 'footer.html' %}
 </div>
 </body>
-
-</html>
+</html>
\ No newline at end of file
diff --git a/basicswap/templates/bid.html b/basicswap/templates/bid.html
index 3932174..8b5c2bb 100644
--- a/basicswap/templates/bid.html
+++ b/basicswap/templates/bid.html
@@ -1,5 +1,4 @@
 {% include 'header.html' %}
-
 <div class="container mx-auto">
   <section class="bg-white p-5 mt-5">
     <div class="flex flex-wrap items-center -m-2">
@@ -26,13 +25,9 @@
       </div>
     </div>
   </section>
-
   <section class="py-4">
     <div class="container px-4 mx-auto">
-      <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden">
-        <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt="">
-        <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt="">
-        <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
+      <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden"> <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
         <div class="relative z-20 flex flex-wrap items-center -m-3">
           <div class="w-full md:w-1/2 p-3">
             <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">Bid
@@ -42,62 +37,69 @@
             </h2>
             <p class="font-semibold text-coolGray-200">Bid ID: {{ bid_id }}</p>
           </div>
-          <div class="w-full md:w-1/2 p-3">
+          <div class="w-full md:w-1/2 p-3 p-6 container flex flex-wrap items-center justify-end items-center mx-auto"> 
             {% if refresh %}
-            <a id="refresh" href=/bid/{{ bid_id }}><button class="block md:ml-auto px-5 py-3 font-medium text-lcg text-white bg-blue-500 hover:bg-blue-600 rounded-md focus:ring-0 focus:outline-none">Refresh {{ refresh }} seconds</button></a>
-            {% else %}
-            <a id="refresh" href=/bid/{{ bid_id }}><button class="block md:ml-auto px-5 py-3 font-medium text-lcg text-white bg-blue-500 hover:bg-blue-600 rounded-md focus:ring-0 focus:outline-none">Refresh</button></a>
-            {% endif %}
+            <a id="refresh" href="/bid/{{ bid_id }}" class="flex flex-wrap justify-center px-5 py-4 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
+              <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
+                <g fill="#ffffff">
+                  <path fill="#ffffff" d="M12,3c1.989,0,3.873,0.65,5.43,1.833l-3.604,3.393l9.167,0.983L22.562,0l-3.655,3.442 C16.957,1.862,14.545,1,12,1C5.935,1,1,5.935,1,12h2C3,7.037,7.037,3,12,3z"></path>
+                  <path data-color="color-2" d="M12,21c-1.989,0-3.873-0.65-5.43-1.833l3.604-3.393l-9.167-0.983L1.438,24l3.655-3.442 C7.043,22.138,9.455,23,12,23c6.065,0,11-4.935,11-11h-2C21,16.963,16.963,21,12,21z"></path>
+                </g>
+              </svg> <span>Refresh {{ refresh }} seconds</span> </a>
+              {% else %}
+            <a id="refresh" href="/bid/{{ bid_id }}" class="flex flex-wrap justify-center px-5 py-4 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
+              <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
+                <g fill="#ffffff">
+                  <path fill="#ffffff" d="M12,3c1.989,0,3.873,0.65,5.43,1.833l-3.604,3.393l9.167,0.983L22.562,0l-3.655,3.442 C16.957,1.862,14.545,1,12,1C5.935,1,1,5.935,1,12h2C3,7.037,7.037,3,12,3z"></path>
+                  <path data-color="color-2" d="M12,21c-1.989,0-3.873-0.65-5.43-1.833l3.604-3.393l-9.167-0.983L1.438,24l3.655-3.442 C7.043,22.138,9.455,23,12,23c6.065,0,11-4.935,11-11h-2C21,16.963,16.963,21,12,21z"></path>
+                </g>
+              </svg> <span>Refresh</span> </a> 
+            {% endif %} 
           </div>
         </div>
       </div>
     </div>
-  </section>
-
-{% include 'inc_messages.html' %}
-
+  </section> 
+  {% include 'inc_messages.html' %}
   <section class="bg-white">
     <div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden bg-white ">
       <div class="pb-6 border-coolGray-100">
         <div class="flex flex-wrap items-center justify-between -m-2">
           <div class="w-full pt-2">
-
-
-
             <div class="container px-0 mx-auto mt-5">
               <div class="overflow-x-auto relative border sm:rounded-lg">
-
-
                 <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
-
                   <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300">
                     <tr>
-                      <th scope="col" class="py-3 px-6">Item</th>
-                      <th scope="col">Data </th>
-
+                      <th scope="col" class="py-3 px-6 w-1/3">Details</th>
+                      <th scope="col"></th>
                     </tr>
-                  </thead>
-
-
+                  </thead> 
                   {% if data.was_sent == 'True' %}
-
                   <tr class="bg-white border-t hover:bg-gray-50">
                     <td class="py-4 px-6 bold">Swap</td>
-                    <td>{{ data.amt_to }} {{ data.ticker_to }} for {{ data.amt_from }} {{ data.ticker_from }}</td>
-                  </tr>
-
-                  {% else %}
+                    <td><span class="bold">{{ data.amt_to }} {{ data.ticker_to }}</span> for <span class="bold">{{ data.amt_from }} {{ data.ticker_from }}</span></td>
+                  </tr> {% else %}
                   <tr class="bg-white border-t hover:bg-gray-50">
                     <td class="py-4 px-6 bold">Swap</td>
-                    <td>{{ data.amt_from }} {{ data.ticker_from }} for {{ data.amt_to }} {{ data.ticker_to }}</td>
-                  </tr>
-
-                  {% endif %}
-
+                    <td><span class="bold">{{ data.amt_from }} {{ data.ticker_from }}</span> for <span class="bold">{{ data.amt_to }} {{ data.ticker_to }}</span></td>
+                  </tr> {% endif %}
                   <tr class="bg-white border-t hover:bg-gray-50">
                     <td class="py-4 px-6 bold">Bid Rate</td>
                     <td>{{ data.bid_rate }}</td>
                   </tr>
+                  <tr class="bg-white border-t hover:bg-gray-50">
+                    <td class="py-4 px-6 bold">Coin From (You Send) </td>
+                    <td> <span class="inline-flex align-middle items-center justify-center w-9 h-10 bg-white-50 rounded">
+                      <img class="h-7" src="/static/images/coins/{{ data.coin_from }}.png" alt="{{ data.coin_from }}">
+                    </span> {{ data.coin_from }} </td>
+                  </tr>
+                  <tr class="bg-white border-t hover:bg-gray-50">
+                    <td class="py-4 px-6 bold">Coin To (You Get)</td>
+                    <td> <span class="inline-flex align-middle items-center justify-center w-9 h-10 bg-white-50 rounded">
+                      <img class="h-7" src="/static/images/coins/{{ data.coin_to }}.png" alt="{{ data.coin_to }}">
+                    </span> {{ data.coin_to }} </td>
+                  </tr>
                   <tr class="bg-white border-t hover:bg-gray-50">
                     <td class="py-4 px-6 bold">Bid State</td>
                     <td>{{ data.bid_state }}</td>
@@ -116,22 +118,42 @@
                   </tr>
                   <tr class="bg-white border-t hover:bg-gray-50">
                     <td class="py-4 px-6 bold">Offer</td>
-                    <td><a class="monospace" href="/offer/{{ data.offer_id }}">{{ data.offer_id }}</a></td>
+                    <td><a class="monospace bold select-all" href="/offer/{{ data.offer_id }}">{{ data.offer_id }}</a></td>
                   </tr>
                   <tr class="bg-white border-t hover:bg-gray-50">
                     <td class="py-4 px-6 bold">Address From</td>
-                    <td><a class="monospace" href="/identity/{{ data.addr_from }}">{{ data.addr_from }}</a> {{ data.addr_from_label }}</td>
+                    <td><a class="monospace bold select-all" href="/identity/{{ data.addr_from }}">{{ data.addr_from }}</a> {{ data.addr_from_label }}</td>
                   </tr>
                   <tr class="bg-white border-t hover:bg-gray-50">
                     <td class="py-4 px-6 bold">Proof of Funds</td>
                     <td>{{ data.proof_address }}</td>
                   </tr>
                   <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-4 px-6 bold">Created At</td>
+                    <td scope="row" class="flex items-center px-46 whitespace-nowrap">
+                      <svg alt="" class="w-5 h-5 rounded-full ml-5" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
+                        <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round">
+                          <circle cx="12" cy="12" r="11"></circle>
+                          <polyline points=" 12,6 12,12 18,12 " stroke="#6b7280"></polyline>
+                        </g>
+                      </svg>
+                      <div class="py-4 pl-2 bold">
+                        <div>Created At</div>
+                      </div>
+                    </td>
                     <td>{{ data.created_at }}</td>
                   </tr>
                   <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-4 px-6 bold">Expired At</td>
+                    <td scope="row" class="flex items-center px-46 whitespace-nowrap">
+                      <svg alt="" class="w-5 h-5 rounded-full  ml-5" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
+                        <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round">
+                          <circle cx="12" cy="12" r="11"></circle>
+                          <polyline points=" 12,6 12,12 18,12 " stroke="#6b7280"></polyline>
+                        </g>
+                      </svg>
+                      <div class="py-4 pl-2 bold">
+                        <div>Expired At</div>
+                      </div>
+                    </td>
                     <td>{{ data.expired_at }}</td>
                   </tr>
                   <tr class="bg-white border-t hover:bg-gray-50">
@@ -157,7 +179,7 @@
                   <tr class="bg-white border-t hover:bg-gray-50">
                     <td class="py-4 px-6 bold">Participate Conf</td>
                     <td>{{ data.participate_conf }}</td>
-                  </tr>
+                  </tr> 
                   {% if data.show_txns %}
                   <tr class="bg-white border-t hover:bg-gray-50">
                     <td class="py-4 px-6 bold">Initiate Tx Refund</td>
@@ -174,239 +196,228 @@
                   <tr class="bg-white border-t hover:bg-gray-50">
                     <td class="py-4 px-6 bold">Participate Tx Spend Tx</td>
                     <td class="monospace">{{ data.participate_tx_spend }}</td>
-                  </tr>
-                  {% endif %}
-                </table>
-
+                  </tr> 
+                {% endif %} 
+              </table>
               </div>
             </div>
-
             <section class="bg-white p-6">
               <div class="flex flex-wrap items-center">
                 <div class="w-full">
-                  <h4 class="font-semibold text-black text-2xl">Old states</h4>
-                </div>
+                  <h4 class="font-semibold text-black text-2xl">Old states</h4> </div>
               </div>
             </section>
-
-            <div class="container px-0 mx-auto mt-5">
+            <div class="container px-0 mx-auto">
               <div class="overflow-x-auto relative border sm:rounded-lg">
-
-
                 <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
-
                   <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300">
                     <tr>
                       <th scope="col" class="py-3 px-6">Old States</th>
                       <th scope="col">Set at Time</th>
-
                     </tr>
-                  </thead>
-
+                  </thead> 
                   {% for s in old_states %}
                   <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-4 px-6">{{ s[1] }}</td>
-                    <td>{{ s[0] | formatts }} </td>
-                  </tr>
-                  {% endfor %}
-                </table>
-
+                    <td class="py-3 px-6 w-1/3 bold"> {{ s[1] }}</td>
+                    <td scope="row" class="flex items-center px-46 whitespace-nowrap">
+                      <svg alt="" class="w-5 h-5 rounded-full  mr-2" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
+                        <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round">
+                          <circle cx="12" cy="12" r="11"></circle>
+                          <polyline points=" 12,6 12,12 18,12 " stroke="#6b7280"></polyline>
+                        </g>
+                      </svg>
+                      <div class="py-4 pr-2">
+                        <div>{{ s[0] | formatts }}</div>
+                      </div>
+                    </td>
+                  </tr> 
+                {% endfor %}
+              </table>
               </div>
-            </div>
-
-
-            {% if data.events %}
-
+            </div> {% if data.events %}
             <section class="bg-white p-6">
               <div class="flex flex-wrap items-center">
                 <div class="w-full">
-                  <h4 class="font-semibold text-black text-2xl">Events</h4>
-                </div>
+                  <h4 class="font-semibold text-black text-2xl">Events</h4> </div>
               </div>
             </section>
-
-
-            <div class="container px-0 mx-auto mt-5">
+            <div class="container px-0 mx-auto">
               <div class="overflow-x-auto relative border sm:rounded-lg">
-
                 <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
-
                   <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300">
                     <tr>
-                      <th scope="col" class="py-3 px-6">Time</th>
+                      <th scope="col" class="w-1/3 py-3 px-6 bold">Time</th>
                       <th scope="col">Events</th>
-
                     </tr>
-                  </thead>
-
+                  </thead> 
                   {% for e in data.events %}
                   <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-4 px-6">{{ e.at | formatts }}</td>
+                    <td scope="row" class="flex items-center px-46 whitespace-nowrap">
+                      <svg alt="" class="w-5 h-5 rounded-full  ml-5" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
+                        <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round">
+                          <circle cx="12" cy="12" r="11"></circle>
+                          <polyline points=" 12,6 12,12 18,12 " stroke="#6b7280"></polyline>
+                        </g>
+                      </svg>
+                      <div class="py-4 pl-2 bold">
+                        <div>{{ e.at | formatts }}</div>
+                      </div>
+                    </td>
                     <td>{{ e.desc }}</td>
-                  </tr>
-                  {% endfor %}
-                </table>
-
+                  </tr> {% endfor %} </table>
               </div>
-            </div>
+            </div> 
             {% else %}
-            {% endif %}
-
+             {% endif %}
             <form method="post">
-
               <div class="p-6 pt-10 bg-white bg-opacity-60 rounded-b-md">
                 <div class="w-full md:w-0/12">
-                  <div class="flex flex-wrap justify-end -m-1.5">
-
+                  <div class="flex flex-wrap justify-end -m-1.5"> 
                     {% if edit_bid %}
-
-                    <table>
+                    <table class="mt-1">
                       <tr>
-                        <td class="bold pr-5">Change Bid State:</td>
+                        <td class="pr-2 bold">Change Bid State:</td>
                         <td>
-                          <select class="pappearance-none pr-15 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="new_state">
+                          <div class="relative">
+                                <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                  <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"></path>
+                                </svg>
+                          <select class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="new_state">
                             {% for s in data.bid_states %}
                             <option value="{{ s[0] }}" {% if data.bid_state_ind==s[0] %} selected{% endif %}>{{ s[1] }}</option>
-                            {% endfor %}
-                          </select>
+                          {% endfor %} 
+                        </select>
+                         </div>
                         </td>
-                      </tr>
-
+                      </tr> 
                       {% if data.debug_ui == true %}
                       <tr>
-                        <td class="bold pr-5">Debug Option:</td>
+                        <td class="py-6 pr-2 bold">Debug Option:</td>
                         <td>
-                          <select class="apappearance-none pr-15 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="debugind">
+
+
+<div class="relative">
+                                <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                  <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"></path>
+                                </svg>
+            
+                          <select class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="debugind">
                             <option{% if data.debug_ind=="-1" %} selected{% endif %} value="-1">None</option>
                               {% for a in data.debug_options %}
-                              <option{% if data.debug_ind==a[0] %} selected{% endif %} value="{{ a[0] }}">{{ a[1] }}</option>
-                                {% endfor %}
-                          </select>
+                              <option{% if data.debug_ind==a[0] %} selected{% endif %} value="{{ a[0] }}">{{ a[1] }}</option> 
+                              {% endfor %}
+                            </select>
+                          </div>
                         </td>
                       </tr>
-                      {% endif %}
-
-                    </table>
-
-
+                    {% endif %} 
+                  </table>
                     <div class="w-full md:w-auto p-1.5 ml-2">
-                      <button name="edit_bid_cancel" value="Cancel" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none">
-                        <span>Cancel</span> </button>
+                      <button name="edit_bid_cancel" value="Cancel" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-red-500 hover:text-red-600 border border-red-400 hover:border-red-500 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none">
+<svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ef5844" stroke-linejoin="round" ><line x1="16" y1="8" x2="8" y2="16" stroke="#ef5844"></line> <line x1="16" y1="16" x2="8" y2="8" stroke="#ef5844"></line> <circle cx="12" cy="12" r="11"></circle></g></svg> Cancel </button>
                     </div>
-
-
-
-
                     <div class="w-full md:w-auto p-1.5">
-                      <button name="edit_bid_submit" value="Submit" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
-                        <span>Submit Edit Bid</span> </button>
-                    </div>
-
+                      <button name="edit_bid_submit" value="Submit" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none">
+ <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#556987" stroke-linejoin="round" ><line x1="2" y1="23" x2="22" y2="23" stroke="#556987"></line> <line data-cap="butt" x1="13" y1="5" x2="17" y2="9"></line> <polygon points="8 18 3 19 4 14 16 2 20 6 8 18"></polygon></g></svg> Submit Edit Bid </button>
+                    </div> 
                     {% else %}
-
-              {% if data.show_bidder_seq_diagram %}
-                <div class="w-full md:w-auto p-1.5">
-                <button name="hide_bidder_seq_diagram" type="submit" value="Hide Bidder Sequence Diagram" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none">
-                <span>Hide Bidder Sequence Diagram</span>
-                </button>
-                </div>
-              {% else %}
-                <div class="w-full md:w-auto p-1.5">
-                <button name="show_bidder_seq_diagram" type="submit" value="Show Bidder Sequence Diagram" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none">
-                <span>Show Bidder Sequence Diagram</span>
-                </button>
-                </div>
-              {% endif %}
-              {% if data.show_offerer_seq_diagram %}
-                <div class="w-full md:w-auto p-1.5">
-                <button name="hide_offerer_seq_diagram" type="submit" value="Hide Offerer Sequence Diagram" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none">
-                <span>Hide Offerer Sequence Diagram</span>
-                </button>
-                </div>
-              {% else %}
-                <div class="w-full md:w-auto p-1.5">
-                <button name="show_offerer_seq_diagram" type="submit" value="Show Offerer Sequence Diagram" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none">
-                <span>Show Offerer Sequence Diagram</span>
-                </button>
-                </div>
-              {% endif %}
-
-
+                    {% if data.show_bidder_seq_diagram %}
+                    <div class="w-full md:w-auto p-1.5">
+                      <button name="hide_bidder_seq_diagram" type="submit" value="Hide Bidder Sequence Diagram" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none">
+<svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#556987" stroke-linejoin="round" ><rect x="2" y="2" width="8" height="4"></rect><rect x="2" y="18" width="8" height="4"></rect><line x1="6" y1="9" x2="6" y2="15"></line><polyline points="13 4 17 4 17 6"></polyline><polyline points="13 20 17 20 17 18"></polyline><polygon points="12 12 17 9 22 12 17 15 12 12" stroke="#556987"></polygon></g></svg> Hide Bidder Sequence Diagram </button>
+                    </div> 
+                    {% else %}
+                    <div class="w-full md:w-auto p-1.5">
+                      <button name="show_bidder_seq_diagram" type="submit" value="Show Bidder Sequence Diagram" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none">
+<svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#556987" stroke-linejoin="round" ><rect x="2" y="2" width="8" height="4"></rect><rect x="2" y="18" width="8" height="4"></rect><line x1="6" y1="9" x2="6" y2="15"></line><polyline points="13 4 17 4 17 6"></polyline><polyline points="13 20 17 20 17 18"></polyline><polygon points="12 12 17 9 22 12 17 15 12 12" stroke="#556987"></polygon></g></svg> Show Bidder Sequence Diagram </button>
+                    </div> 
+                    {% endif %} 
+                    {% if data.show_offerer_seq_diagram %}
+                    <div class="w-full md:w-auto p-1.5">
+                      <button name="hide_offerer_seq_diagram" type="submit" value="Hide Offerer Sequence Diagram" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none">
+<svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#556987" stroke-linejoin="round" ><rect x="2" y="2" width="8" height="4"></rect><rect x="2" y="18" width="8" height="4"></rect><line x1="6" y1="9" x2="6" y2="15"></line><polyline points="13 4 17 4 17 6"></polyline><polyline points="13 20 17 20 17 18"></polyline><polygon points="12 12 17 9 22 12 17 15 12 12" stroke="#556987"></polygon></g></svg> Hide Offerer Sequence Diagram </button>
+                    </div> 
+                    {% else %}
+                    <div class="w-full md:w-auto p-1.5">
+                      <button name="show_offerer_seq_diagram" type="submit" value="Show Offerer Sequence Diagram" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none">
+<svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#556987" stroke-linejoin="round" ><rect x="2" y="2" width="8" height="4"></rect><rect x="2" y="18" width="8" height="4"></rect><line x1="6" y1="9" x2="6" y2="15"></line><polyline points="13 4 17 4 17 6"></polyline><polyline points="13 20 17 20 17 18"></polyline><polygon points="12 12 17 9 22 12 17 15 12 12" stroke="#556987"></polygon></g></svg> Show Offerer Sequence Diagram </button>
+                    </div> 
+                    {% endif %}
                     {% if data.can_abandon == true %}
-
                     <div class="w-full md:w-auto p-1.5">
                       <button name="abandon_bid" type="submit" value="Abandon Bid" onclick="return confirmPopup();" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-red-500 hover:text-red-600 border border-red-400 hover:border-red-500 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none">
-                        <span>Abandon Bid</span> </button>
+<svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ef5844" stroke-linejoin="round" ><line x1="16" y1="8" x2="8" y2="16" stroke="#ef5844"></line> <line x1="16" y1="16" x2="8" y2="8" stroke="#ef5844"></line> <circle cx="12" cy="12" r="11"></circle></g></svg> Abandon Bid </button>
                     </div>
-
-                    {% endif %}
-
+                    {% endif %} 
                     {% if data.show_txns %}
-
                     <div class="w-full md:w-auto p-1.5">
                       <button name="hide_txns" type="submit" value="Hide Info" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none">
-                        <span>Hide info</span> </button>
-                    </div>
-
+<svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#556987" stroke-linejoin="round" ><circle cx="12" cy="12" r="11"></circle><line x1="12" y1="11" x2="12" y2="17" stroke="#556987"></line><circle cx="12" cy="7" r="1" stroke="none" fill="#556987"></circle></g></svg> Hide info </button>
+                    </div> 
                     {% else %}
-
                     <div class="w-full md:w-auto p-1.5">
                       <button name="show_txns" type="submit" value="Show More Info" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none">
-                        <span>Show More Info</span> </button>
-                    </div>
-
+<svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#556987" stroke-linejoin="round" ><circle cx="12" cy="12" r="11"></circle><line x1="12" y1="11" x2="12" y2="17" stroke="#556987"></line><circle cx="12" cy="7" r="1" stroke="none" fill="#556987"></circle></g></svg> Show More Info </button>
+                    </div> 
                     {% endif %}
-
                     <div class="w-full md:w-auto p-1.5">
                       <button name="edit_bid" type="submit" value="Edit Bid" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none">
-                        <span>Edit bit</span> </button>
+ <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#556987" stroke-linejoin="round" ><line x1="2" y1="23" x2="22" y2="23" stroke="#556987"></line> <line data-cap="butt" x1="13" y1="5" x2="17" y2="9"></line> <polygon points="8 18 3 19 4 14 16 2 20 6 8 18"></polygon></g></svg> Edit bit </button>
                     </div>
-
                     {% endif %}
-
                     {% if data.was_received == 'True' %}
-
                     <div class="w-full md:w-auto p-1.5">
                       <button name="accept_bid" value="Accept Bid" type="submit" onclick='return confirmPopup("Accept");' class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
-                        <span>Accept Bid</span> </button>
-                    </div>
-
-                    {% endif %}
-
-
-
-                  </div>
+<svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round" ><polyline points=" 6,12 10,16 18,8 " stroke="#ffffff"></polyline> <circle cx="12" cy="12" r="11"></circle></g></svg> Accept Bid </button>
+                    </div> 
+                  {% endif %} 
+                </div>
                 </div>
               </div>
-
-
-
-              <input type="hidden" name="formid" value="{{ form_id }}">
-            </form>
-
-            {% if data.show_bidder_seq_diagram %}
-            <img src="/static/sequence_diagrams/bidder.alt.xu.min.svg" />
+              <input type="hidden" name="formid" value="{{ form_id }}"> </form>
+              {% if data.show_bidder_seq_diagram %}
+            <section class="bg-white p-6">
+              <div class="flex flex-wrap items-center">
+                <div class="w-full">
+                  <h4 class="font-semibold text-black text-2xl">Bidder Sequence Diagram</h4> </div>
+              </div>
+            </section>
+            <section>
+              <div class="container mx-auto">
+                <div class="overflow-x-auto items-center justify-center relative border sm:rounded-lg p-10">
+                  <div class="flex items-center justify-center min-h-screen">
+                    <div class="flex items-center justify-between text-white"> <img class="h-full py-2 pr-4 ml-8" src="/static/sequence_diagrams/bidder.alt.xu.min.svg"> </div>
+                  </div>
+                </div>
+            </section>
             {% endif %}
-
             {% if data.show_offerer_seq_diagram %}
-            <img src="/static/sequence_diagrams/offerer.alt.xu.min.svg" />
-            {% endif %}
-
+            <section class="bg-white p-6">
+              <div class="flex flex-wrap items-center">
+                <div class="w-full">
+                  <h4 class="font-semibold text-black text-2xl">Offerer Sequence Diagram</h4> </div>
+              </div>
+            </section>
+            <section>
+              <div class="container mx-auto">
+                <div class="overflow-x-auto items-center justify-center relative border sm:rounded-lg p-10">
+                  <div class="flex items-center justify-center min-h-screen">
+                    <div class="flex items-center justify-between text-white"> <img class="h-full py-2 pr-4 ml-8" src="/static/sequence_diagrams/offerer.alt.xu.min.svg"> </div>
+                  </div>
+                </div>
+            </section>
+          {% endif %}
+        </div>
+            </div>
           </div>
         </div>
-      </div>
-    </div>
-
   </section>
-
   <script>
     function confirmPopup() {
-        return confirm("Are you sure?");
+      return confirm("Are you sure?");
     }
   </script>
-
-</div>
+  </div> 
 {% include 'footer.html' %}
 </body>
-
-</html>
+</html>
\ No newline at end of file
diff --git a/basicswap/templates/bid_xmr.html b/basicswap/templates/bid_xmr.html
index 13ec179..fc6c44b 100644
--- a/basicswap/templates/bid_xmr.html
+++ b/basicswap/templates/bid_xmr.html
@@ -1,5 +1,4 @@
 {% include 'header.html' %}
-
 <div class="container mx-auto">
   <section class="bg-white p-5 mt-5">
     <div class="flex flex-wrap items-center -m-2">
@@ -26,77 +25,82 @@
       </div>
     </div>
   </section>
-
   <section class="py-4">
     <div class="container px-4 mx-auto">
-      <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden">
-        <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt="">
-        <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt="">
-        <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
+      <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden"> <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
         <div class="relative z-20 flex flex-wrap items-center -m-3">
           <div class="w-full md:w-1/2 p-3">
             <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">Bid
               {% if debug_mode == true %}
               (Debug: bid_xmr template)
-              {% endif %}
-            </h2>
+              {% endif %}</h2>
             <p class="font-semibold text-coolGray-200">Bid ID: {{ bid_id }}</p>
           </div>
-          <div class="w-full md:w-1/2 p-3">
+          <div class="w-full md:w-1/2 p-3 p-6 container flex flex-wrap items-center justify-end items-center mx-auto">
             {% if refresh %}
-            <a id="refresh" href=/bid/{{ bid_id }}><button class="block md:ml-auto px-5 py-3 font-medium text-lcg text-white bg-blue-500 hover:bg-blue-600 rounded-md focus:ring-0 focus:outline-none">Refresh {{ refresh }} seconds</button></a>
-            {% else %}
-            <a id="refresh" href=/bid/{{ bid_id }}><button class="block md:ml-auto px-5 py-3 font-medium text-lcg text-white bg-blue-500 hover:bg-blue-600 rounded-md focus:ring-0 focus:outline-none">Refresh</button></a>
+            <a id="refresh" href="/bid/{{ bid_id }}" class="flex flex-wrap justify-center px-5 py-4 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
+              <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
+                <g fill="#ffffff" >
+                  <path fill="#ffffff" d="M12,3c1.989,0,3.873,0.65,5.43,1.833l-3.604,3.393l9.167,0.983L22.562,0l-3.655,3.442 C16.957,1.862,14.545,1,12,1C5.935,1,1,5.935,1,12h2C3,7.037,7.037,3,12,3z"></path>
+                  <path data-color="color-2" d="M12,21c-1.989,0-3.873-0.65-5.43-1.833l3.604-3.393l-9.167-0.983L1.438,24l3.655-3.442 C7.043,22.138,9.455,23,12,23c6.065,0,11-4.935,11-11h-2C21,16.963,16.963,21,12,21z"></path>
+                </g>
+              </svg> <span>Refresh {{ refresh }} seconds</span> </a>
+              {% else %}
+            <a id="refresh" href="/bid/{{ bid_id }}" class="flex flex-wrap justify-center px-5 py-4 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
+              <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
+                <g fill="#ffffff" >
+                  <path fill="#ffffff" d="M12,3c1.989,0,3.873,0.65,5.43,1.833l-3.604,3.393l9.167,0.983L22.562,0l-3.655,3.442 C16.957,1.862,14.545,1,12,1C5.935,1,1,5.935,1,12h2C3,7.037,7.037,3,12,3z"></path>
+                  <path data-color="color-2" d="M12,21c-1.989,0-3.873-0.65-5.43-1.833l3.604-3.393l-9.167-0.983L1.438,24l3.655-3.442 C7.043,22.138,9.455,23,12,23c6.065,0,11-4.935,11-11h-2C21,16.963,16.963,21,12,21z"></path>
+                </g>
+              </svg> <span>Refresh</span> </a>
             {% endif %}
           </div>
         </div>
       </div>
     </div>
   </section>
-
-{% include 'inc_messages.html' %}
-
+  {% include 'inc_messages.html' %}
   <section class="bg-white">
     <div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden bg-white ">
       <div class="pb-6 border-coolGray-100">
         <div class="flex flex-wrap items-center justify-between -m-2">
           <div class="w-full pt-2">
-
             <div class="container px-0 mx-auto mt-5">
               <div class="overflow-x-auto relative border sm:rounded-lg">
-
                 <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
-
                   <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300">
                     <tr>
-                      <th scope="col" class="py-3 px-6">Item</th>
-                      <th scope="col">Data </th>
-
+                      <th scope="col" class="py-3 px-6 w-1/3">Details</th>
+                      <th scope="col"></th>
                     </tr>
                   </thead>
-
                   {% if data.was_sent == 'True' %}
                   <tr class="bg-white border-t hover:bg-gray-50">
                     <td class="py-4 px-6 bold">Swap</td>
-                    <td>{{ data.amt_to }} {{ data.ticker_to }} for {{ data.amt_from }} {{ data.ticker_from }}</td>
+                    <td><span class="bold">{{ data.amt_to }} {{ data.ticker_to }}</span> for <span class="bold">{{ data.amt_from }} {{ data.ticker_from }}</span></td>
                   </tr>
                   {% else %}
                   <tr class="bg-white border-t hover:bg-gray-50">
                     <td class="py-4 px-6 bold">Swap</td>
-                    <td>{{ data.amt_from }} {{ data.ticker_from }} for {{ data.amt_to }} {{ data.ticker_to }}</td>
+                    <td><span class="bold">{{ data.amt_from }} {{ data.ticker_from }}</span> for <span class="bold">{{ data.amt_to }} {{ data.ticker_to }}</span></td>
                   </tr>
+
                   {% endif %}
                   <tr class="bg-white border-t hover:bg-gray-50">
                     <td class="py-4 px-6 bold">Bid Rate</td>
                     <td>{{ data.bid_rate }}</td>
                   </tr>
                   <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-4 px-6 bold">Coin From</td>
-                    <td>{{ data.coin_from }}</td>
+                    <td class="py-4 px-6 bold">Coin From (You Send) </td>
+                    <td> <span class="inline-flex align-middle items-center justify-center w-9 h-10 bg-white-50 rounded">
+                      <img class="h-7" src="/static/images/coins/{{ data.coin_from }}.png" alt="{{ data.coin_from }}">
+                    </span> {{ data.coin_from }} </td>
                   </tr>
                   <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-4 px-6 bold">Coin To</td>
-                    <td>{{ data.coin_to }}</td>
+                    <td class="py-4 px-6 bold">Coin To (You Get)</td>
+                    <td> <span class="inline-flex align-middle items-center justify-center w-9 h-10 bg-white-50 rounded">
+                      <img class="h-7" src="/static/images/coins/{{ data.coin_to }}.png" alt="{{ data.coin_to }}">
+                    </span> {{ data.coin_to }} </td>
                   </tr>
                   <tr class="bg-white border-t hover:bg-gray-50">
                     <td class="py-4 px-6 bold">Bid State</td>
@@ -108,18 +112,38 @@
                   </tr>
                   <tr class="bg-white border-t hover:bg-gray-50">
                     <td class="py-4 px-6 bold">Offer</td>
-                    <td><a class="monospace" href="/offer/{{ data.offer_id }}">{{ data.offer_id }}</a></td>
+                    <td><a class="monospace bold select-all" href="/offer/{{ data.offer_id }}">{{ data.offer_id }}</a></td>
                   </tr>
                   <tr class="bg-white border-t hover:bg-gray-50">
                     <td class="py-4 px-6 bold">Address From</td>
-                    <td><a class="monospace" href="/identity/{{ data.addr_from }}">{{ data.addr_from }}</a> {{ data.addr_from_label }}</td>
+                    <td><a class="monospace bold select-all" href="/identity/{{ data.addr_from }}">{{ data.addr_from }}</a> {{ data.addr_from_label }}</td>
                   </tr>
                   <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-4 px-6 bold">Created At</td>
+                    <td scope="row" class="flex items-center px-46 whitespace-nowrap">
+                      <svg alt="" class="w-5 h-5 rounded-full ml-5" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
+                        <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round">
+                          <circle cx="12" cy="12" r="11"></circle>
+                          <polyline points=" 12,6 12,12 18,12 " stroke="#6b7280"></polyline>
+                        </g>
+                      </svg>
+                      <div class="py-4 pl-2 bold">
+                        <div>Created At</div>
+                      </div>
+                    </td>
                     <td>{{ data.created_at }}</td>
                   </tr>
                   <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-4 px-6 bold">Expired At</td>
+                    <td scope="row" class="flex items-center px-46 whitespace-nowrap">
+                      <svg alt="" class="w-5 h-5 rounded-full  ml-5" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
+                        <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round">
+                          <circle cx="12" cy="12" r="11"></circle>
+                          <polyline points=" 12,6 12,12 18,12 " stroke="#6b7280"></polyline>
+                        </g>
+                      </svg>
+                      <div class="py-4 pl-2 bold">
+                        <div>Expired At</div>
+                      </div>
+                    </td>
                     <td>{{ data.expired_at }}</td>
                   </tr>
                   <tr class="bg-white border-t hover:bg-gray-50">
@@ -134,7 +158,7 @@
                   <tr class="bg-white border-t hover:bg-gray-50">
                     <td class="py-4 px-6 bold">{{ data.ticker_from }} lock refund tx valid at</td>
                     <td>{{ data.coin_a_lock_refund_tx_est_final | formatts }}</td>
-                  </tr>
+                  </tr> 
                   {% if data.coin_a_lock_refund_swipe_tx_est_final != 'None' %}
                   <tr class="bg-white border-t hover:bg-gray-50">
                     <td class="py-4 px-6 bold">{{ data.ticker_from }} lock refund tx swipeable at</td>
@@ -145,100 +169,94 @@
                     <td class="py-4 px-6 bold">{{ data.ticker_from }} chain median time</td>
                     <td>{{ data.coin_a_last_median_time | formatts }}</td>
                   </tr>
-                  {% endif %}
-                </table>
-
+                {% endif %}
+              </table>
               </div>
             </div>
-
             <section class="bg-white p-6">
               <div class="flex flex-wrap items-center">
                 <div class="w-full">
-                  <h4 class="font-semibold text-black text-2xl">Old states</h4>
-                </div>
+                  <h4 class="font-semibold text-black text-2xl">Old states</h4> </div>
               </div>
             </section>
-
-            <div class="container px-0 mx-auto mt-5">
+            <div class="container px-0 mx-auto">
               <div class="overflow-x-auto relative border sm:rounded-lg">
-
-
                 <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
-
                   <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300">
                     <tr>
                       <th scope="col" class="py-3 px-6">Old States</th>
                       <th scope="col">Set at Time</th>
-
                     </tr>
                   </thead>
-
                   {% for s in old_states %}
                   <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-4 px-6">{{ s[1] }}</td>
-                    <td>{{ s[0] | formatts }} </td>
+                    <td class="py-3 px-6 w-1/3 bold"> {{ s[1] }}</td>
+                    <td scope="row" class="flex items-center px-46 whitespace-nowrap">
+                      <svg alt="" class="w-5 h-5 rounded-full  mr-2" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
+                        <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round">
+                          <circle cx="12" cy="12" r="11"></circle>
+                          <polyline points=" 12,6 12,12 18,12 " stroke="#6b7280"></polyline>
+                        </g>
+                      </svg>
+                      <div class="py-4 pr-2">
+                        <div>{{ s[0] | formatts }}</div>
+                      </div>
+                    </td>
                   </tr>
-                  {% endfor %}
-                </table>
-
+                {% endfor %}
+              </table>
               </div>
             </div>
-
             {% if data.events %}
-
             <section class="bg-white p-6">
               <div class="flex flex-wrap items-center">
                 <div class="w-full">
-                  <h4 class="font-semibold text-black text-2xl">Events</h4>
-                </div>
+                  <h4 class="font-semibold text-black text-2xl">Events</h4> </div>
               </div>
             </section>
-
-            <div class="container px-0 mx-auto mt-5">
+            <div class="container px-0 mx-auto">
               <div class="overflow-x-auto relative border sm:rounded-lg">
-
                 <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
-
                   <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300">
                     <tr>
-                      <th scope="col" class="py-3 px-6">Time</th>
+                      <th scope="col" class="w-1/3 py-3 px-6 bold">Time</th>
                       <th scope="col">Events</th>
-
                     </tr>
                   </thead>
-
                   {% for e in data.events %}
                   <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-4 px-6">{{ e.at | formatts }}</td>
+                    <td scope="row" class="flex items-center px-46 whitespace-nowrap">
+                      <svg alt="" class="w-5 h-5 rounded-full  ml-5" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
+                        <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round">
+                          <circle cx="12" cy="12" r="11"></circle>
+                          <polyline points=" 12,6 12,12 18,12 " stroke="#6b7280"></polyline>
+                        </g>
+                      </svg>
+                      <div class="py-4 pl-2 bold">
+                        <div>{{ e.at | formatts }}</div>
+                      </div>
+                    </td>
                     <td>{{ e.desc }}</td>
-                  </tr>
-                  {% endfor %}
-                </table>
-
+                  </tr> {% endfor %} </table>
               </div>
             </div>
             {% else %}
             {% endif %}
-
             <form method="post">
-
               {% if data.show_txns %}
               {% if data.xmr_b_shared_address or data.xmr_b_shared_viewkey or data.xmr_b_half_privatekey %}
-
               <section class="bg-white p-6">
                 <div class="flex flex-wrap items-center">
                   <div class="w-full">
-                    <h4 class="font-semibold text-black text-2xl">View keys/Shared Address:</h4>
-                  </div>
+                    <h4 class="font-semibold text-black text-2xl">View keys/Shared Address:</h4> </div>
                 </div>
               </section>
-
-              <div class="container px-0 mx-auto mt-5">
+              <div class="container px-0 mx-auto">
                 <div class="overflow-x-auto relative border sm:rounded-lg">
                   <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
                     <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300">
                       <tr>
-                        <th scope="col" class="py-3 px-6 w-96">Type</th>
+                        <th scope="col" class="py-3 px-6 w-1/3">Type</th>
                         <th scope="col">Output</th>
                       </tr>
                     </thead>
@@ -259,68 +277,61 @@
                       <td class="py-4 px-6 bold">Key Half:</td>
                       <td class="py-4 monospace">{{ data.xmr_b_half_privatekey }}</td>
                     </tr>
-                    {% endif %}
-                  </table>
+                  {% endif %}
+                </table>
                 </div>
               </div>
               {% endif %}
-
-
               <section class="bg-white p-6">
                 <div class="flex flex-wrap items-center">
                   <div class="w-full">
-                    <h4 class="font-semibold text-black text-2xl">Transactions</h4>
-                  </div>
+                    <h4 class="font-semibold text-black text-2xl">Transactions</h4> </div>
                 </div>
               </section>
-
-              <div class="container px-0 mx-auto mt-5">
+              <div class="container px-0 mx-auto">
                 <div class="overflow-x-auto relative border sm:rounded-lg">
-
-
                   <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
-
                     <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300">
                       <tr>
-                        <th scope="col" class="py-3 px-6">Tx Type</th>
+                        <th scope="col" class="py-3 px-6 w-1/3">Tx Type</th>
                         <th scope="col">Tx ID</th>
                         <th scope="col">Blocks Deep</th>
                       </tr>
                     </thead>
                     {% for tx in data.txns %}
                     <tr class="bg-white border-t hover:bg-gray-50">
-                      <td class="py-4 px-6">{{ tx.type }}</td>
-                      <td class="py-4 px-6 monospace">{{ tx.txid }}</td>
-                      <td class="py-4 px-6">{{ tx.confirms }}</td>
+                      <td class="py-4 px-6 bold">{{ tx.type }}</td>
+                      <td class="py-4 monospace">{{ tx.txid }}</td>
+                      <td class="py-4 ">{{ tx.confirms }}</td>
                     </tr>
-                    {% endfor %}
-                  </table>
-
+                  {% endfor %}
+                </table>
                 </div>
               </div>
-
-              <div class="p-6 pt-10 bg-white bg-opacity-60 rounded-b-md">
+              <div class="pt-10 bg-white bg-opacity-60 rounded-b-md">
                 <div class="w-full md:w-0/12">
                   <div class="flex flex-wrap justify-end -m-1.5">
-
                     <table>
                       <tr>
                         <td class="bold pr-5">View Transaction:</td>
                         <td>
-
-                          <select class="pappearance-none pr-15 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="view_tx">
-                            {% if data.txns|length %}
-                            {% for tx in data.txns %}
-                            <option value="{{ tx.txid }}" {% if data.view_tx_ind==tx.txid %} selected{% endif %}>{{ tx.type }} {{ tx.txid }}</option>
-                            {% endfor %}
-                            {% else %}
-                            <option value="0">None exist yet</option>
+                          <div class="relative">
+                            <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                              <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"></path>
+                            </svg>
+                            <select class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="view_tx">
+                              {% if data.txns|length %}
+                              {% for tx in data.txns %}
+                              <option value="{{ tx.txid }}" {% if data.view_tx_ind==tx.txid %} selected{% endif %}>{{ tx.type }} {{ tx.txid }}</option>
+                              {% endfor %}
+                              {% else %}
+                              <option value="0">None exist yet</option>
                             {% endif %}
                           </select>
+                          </div>
                         </td>
                       </tr>
                     </table>
-
                     <div class="w-full md:w-auto p-1.5 ml-2">
                       <button name="view_tx_submit" value="View Tx" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none">
                         <svg class="mr-2" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
@@ -330,7 +341,6 @@
                           </g>
                         </svg> <span>View Tx</span> </button>
                     </div>
-
                     <div class="w-full md:w-auto p-1.5 ml-2">
                       <button name="view_lock_transfers" value="View Lock Wallet Transfers" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none">
                         <svg class="mr-2" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
@@ -340,215 +350,202 @@
                           </g>
                         </svg> <span>View Lock Wallet Transfers</span> </button>
                     </div>
-
                   </div>
                 </div>
               </div>
-
               {% if data.view_tx_hex %}
-
-              <label for="transfers_view" class="bold block mb-2 text-sm font-medium text-gray-900">{{ data.view_tx_hex }}</label>
-              <textarea rows="4" class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 monospace" id="tx_view" readonly>
-              {{ data.view_tx_desc }}
-              </textarea>
-
+              <label for="transfers_view" class="bold block mb-2 text-sm font-medium text-gray-900">TX Hex:</label>
+              <textarea rows="5" class="outline-none mb-10 block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 monospace" readonly>{{ data.view_tx_hex }}</textarea>
+              <textarea rows="15" class="outline-none block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 monospace" id="tx_view" readonly>{{ data.view_tx_desc }}</textarea>
               {% endif %}
-
               {% if data.lock_transfers %}
-
               <label for="transfers_view" class="bold block mb-2 text-sm font-medium text-gray-900">Lock wallet transfers:</label>
-              <textarea rows="4" class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 monospace" id="transfers_view" readonly>
-              {{ data.lock_transfers }}
-              </textarea>
+              <textarea rows="15" class="outline-none block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 monospace" id="transfers_view" readonly>{{ data.lock_transfers }}</textarea>
+              {% endif %}
+              {% endif %}
+ 
 
-              {% endif %}
-              {% endif %}
 
               {% if data.show_bidder_seq_diagram %}
-              <img src="/static/sequence_diagrams/xmr.bidder.alt.xu.min.svg" />
-              {% endif %}
+            <section class="bg-white p-6">
+              <div class="flex flex-wrap items-center">
+                <div class="w-full">
+                  <h4 class="font-semibold text-black text-2xl">Bidder Sequence Diagram</h4> </div>
+              </div>
+            </section>
+            <section>
+              <div class="container mx-auto">
+                <div class="overflow-x-auto items-center justify-center relative border sm:rounded-lg p-10">
+                  <div class="flex items-center justify-center min-h-screen">
+                    <div class="flex items-center justify-between text-white"> <img class="h-full py-2 pr-4 ml-8" src="/static/sequence_diagrams/bidder.alt.xu.min.svg"> </div>
+                  </div>
+                </div>
+            </section>
+            {% endif %}
+            {% if data.show_offerer_seq_diagram %}
+            <section class="bg-white p-6">
+              <div class="flex flex-wrap items-center">
+                <div class="w-full">
+                  <h4 class="font-semibold text-black text-2xl">Offerer Sequence Diagram</h4> </div>
+              </div>
+            </section>
+            <section>
+              <div class="container mx-auto">
+                <div class="overflow-x-auto items-center justify-center relative border sm:rounded-lg p-10">
+                  <div class="flex items-center justify-center min-h-screen">
+                    <div class="flex items-center justify-between text-white"> <img class="h-full py-2 pr-4 ml-8" src="/static/sequence_diagrams/offerer.alt.xu.min.svg"> </div>
+                  </div>
+                </div>
+            </section>
+          {% endif %}
+
 
-              {% if data.show_offerer_seq_diagram %}
-              <img src="/static/sequence_diagrams/xmr.offerer.alt.xu.min.svg" />
-              {% endif %}
 
               {% if data.chain_a_lock_tx_inputs %}
               <section class="bg-white p-6">
                 <div class="flex flex-wrap items-center">
                   <div class="w-full">
-                    <h4 class="font-semibold text-black text-2xl">Chain A Lock TX Inputs:</h4>
-                  </div>
+                    <h4 class="font-semibold text-black text-2xl">Chain A Lock TX Inputs:</h4> </div>
                 </div>
               </section>
-
-              <div class="container px-0 mx-auto mt-5">
+              <div class="container px-0 mx-auto">
                 <div class="overflow-x-auto relative border sm:rounded-lg">
-
-
                   <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
-
                     <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300">
                       <tr>
-                        <th scope="col" class="py-3 px-6">txid</th>
-                        <th scope="col">vout</th>
+                        <th scope="col" class="py-3 px-6 w-1/3">txid</th>
+                        <th scope="col">out</th>
                         <th scope="col">locked</th>
                       </tr>
                     </thead>
-
                     {% for txi in data.chain_a_lock_tx_inputs %}
                     <tr class="bg-white border-t hover:bg-gray-50">
                       <td class="py-4 px-6">{{ txi.txid }}</td>
-                      <td class="py-4 px-6 monospace">{{ txi.vout }}</td>
-                      <td class="py-4 px-6">{% if txi.islocked %} true {% else %} false {% endif %}</td>
+                      <td class="py-4 monospace">{{ txi.vout }}</td>
+                      <td class="py-4 ">{% if txi.islocked %} true {% else %} false {% endif %}</td>
                     </tr>
-                    {% endfor %}
-
-                  </table>
-
+                  {% endfor %}
+                </table>
                 </div>
               </div>
-
               {% endif %}
-
               <div class="p-6 pt-10 bg-white bg-opacity-60 rounded-b-md">
                 <div class="w-full md:w-0/12">
                   <div class="flex flex-wrap justify-end -m-1.5">
-
                     {% if edit_bid %}
-
                     <table class="mt-1">
                       <tr>
-                        <td class="bold pr-5 ">Change Bid State:</td>
+                        <td class="pr-2 bold">Change Bid State:</td>
                         <td>
-                          <select class="pappearance-none pr-15 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="new_state">
+                         <div class="relative">
+                                <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                  <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"></path>
+                                </svg>
+                          <select class="appearance-none pr-15 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="new_state">
                             {% for s in data.bid_states %}
-                            <option value="{{ s[0] }}" {% if data.bid_state_ind==s[0] %} selected{% endif %}>{{ s[1] }}</option>
-                            {% endfor %}
-                          </select>
+                            <option value="{{ s[0] }}" {% if data.bid_state_ind==s[0] %} selected{% endif %}>{{ s[1] }}</option> {% endfor %} </select>
+                          </div>
                         </td>
                       </tr>
-
                       {% if data.debug_ui == true %}
                       <tr>
-                        <td class="bold pr-5">Debug Option</td>
-                        <td>
-                          <select class="pappearance-none pr-15 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="debugind">
-                            <option{% if data.debug_ind=="-1" %} selected{% endif %} value="-1">-- None --</option>
+                        <td class="py-6 pr-2 bold"">Debug Option</td>
+                        <td>  
+                          <div class="relative">
+                                                      <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                  <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"></path>
+                                </svg>
+                          <select class="appearance-none pr-15 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="debugind">
+                            <option{% if data.debug_ind=="-1" %} selected{% endif %} value="-1">None</option>
                               {% for a in data.debug_options %}
                               <option{% if data.debug_ind==a[0] %} selected{% endif %} value="{{ a[0] }}">{{ a[1] }}</option>
-                                {% endfor %}
-                          </select>
+                              {% endfor %}
+                            </select>
+                               </div>
                         </td>
                       </tr>
                       <tr>
-                        <td class="bold pr-5">Sweep No-Script TX</td>
-                        <td><input class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" type="text" id="kbs_other" name="kbs_other"></td>
+                        <td class="pr-2 bold">Sweep No-Script TX</td>
+                        <td>
+
+                          <input class="appearance-none pr-15 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" type="text" id="kbs_other" name="kbs_other">
+                        </td>
                       </tr>
-                      {% endif %}
-                    </table>
-
+                    {% endif %} 
+                  </table>
                     <div class="w-full md:w-auto p-1.5 ml-2">
-                      <button name="edit_bid_cancel" value="Cancel" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none">
-                        <span>Cancel</span> </button>
+                      <button name="edit_bid_cancel" value="Cancel" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-red-500 hover:text-red-600 border border-red-400 hover:border-red-500 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none">
+<svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ef5844" stroke-linejoin="round" ><line x1="16" y1="8" x2="8" y2="16" stroke="#ef5844"></line> <line x1="16" y1="16" x2="8" y2="8" stroke="#ef5844"></line> <circle cx="12" cy="12" r="11"></circle></g></svg> Cancel </button>
                     </div>
-
                     <div class="w-full md:w-auto p-1.5">
-                      <button name="edit_bid_submit" value="Submit" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
-                        <span>Submit Edit Bid</span> </button>
-                    </div>
-
+                      <button name="edit_bid_submit" value="Submit" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none">
+ <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#556987" stroke-linejoin="round" ><line x1="2" y1="23" x2="22" y2="23" stroke="#556987"></line> <line data-cap="butt" x1="13" y1="5" x2="17" y2="9"></line> <polygon points="8 18 3 19 4 14 16 2 20 6 8 18"></polygon></g></svg> Submit Edit Bid </button>
+                    </div> 
                     {% else %}
-
-              {% if data.show_bidder_seq_diagram %}
-                <div class="w-full md:w-auto p-1.5">
-                <button name="hide_bidder_seq_diagram" type="submit" value="Hide Bidder Sequence Diagram" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none">
-                <span>Hide Bidder Sequence Diagram</span>
-                </button>
-                </div>
-              {% else %}
-                <div class="w-full md:w-auto p-1.5">
-                <button name="show_bidder_seq_diagram" type="submit" value="Show Bidder Sequence Diagram" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none">
-                <span>Show Bidder Sequence Diagram</span>
-                </button>
-                </div>
-              {% endif %}
-              {% if data.show_offerer_seq_diagram %}
-                <div class="w-full md:w-auto p-1.5">
-                <button name="hide_offerer_seq_diagram" type="submit" value="Hide Offerer Sequence Diagram" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none">
-                <span>Hide Offerer Sequence Diagram</span>
-                </button>
-                </div>
-              {% else %}
-                <div class="w-full md:w-auto p-1.5">
-                <button name="show_offerer_seq_diagram" type="submit" value="Show Offerer Sequence Diagram" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none">
-                <span>Show Offerer Sequence Diagram</span>
-                </button>
-                </div>
-              {% endif %}
-
-
-                    {% if data.can_abandon == true %}
-
+                    {% if data.show_bidder_seq_diagram %}
                     <div class="w-full md:w-auto p-1.5">
-                      <button name="abandon_bid" value="Abandon Bid" onclick='return confirmPopup("Abandon");' type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-red-500 hover:text-red-600 border border-red-400 hover:border-red-500 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none">
-                        <span>Abandon Bid</span> </button>
-                    </div>
-
+                      <button name="hide_bidder_seq_diagram" type="submit" value="Hide Bidder Sequence Diagram" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none">
+<svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#556987" stroke-linejoin="round" ><rect x="2" y="2" width="8" height="4"></rect><rect x="2" y="18" width="8" height="4"></rect><line x1="6" y1="9" x2="6" y2="15"></line><polyline points="13 4 17 4 17 6"></polyline><polyline points="13 20 17 20 17 18"></polyline><polygon points="12 12 17 9 22 12 17 15 12 12" stroke="#556987"></polygon></g></svg> Hide Bidder Sequence Diagram </button>
+                    </div> 
+                    {% else %}
+                    <div class="w-full md:w-auto p-1.5">
+                      <button name="show_bidder_seq_diagram" type="submit" value="Show Bidder Sequence Diagram" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none">
+<svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#556987" stroke-linejoin="round" ><rect x="2" y="2" width="8" height="4"></rect><rect x="2" y="18" width="8" height="4"></rect><line x1="6" y1="9" x2="6" y2="15"></line><polyline points="13 4 17 4 17 6"></polyline><polyline points="13 20 17 20 17 18"></polyline><polygon points="12 12 17 9 22 12 17 15 12 12" stroke="#556987"></polygon></g></svg> Show Bidder Sequence Diagram </button>
+                    </div> 
+                    {% endif %} 
+                    {% if data.show_offerer_seq_diagram %}
+                    <div class="w-full md:w-auto p-1.5">
+                      <button name="hide_offerer_seq_diagram" type="submit" value="Hide Offerer Sequence Diagram" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none">
+<svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#556987" stroke-linejoin="round" ><rect x="2" y="2" width="8" height="4"></rect><rect x="2" y="18" width="8" height="4"></rect><line x1="6" y1="9" x2="6" y2="15"></line><polyline points="13 4 17 4 17 6"></polyline><polyline points="13 20 17 20 17 18"></polyline><polygon points="12 12 17 9 22 12 17 15 12 12" stroke="#556987"></polygon></g></svg> Hide Offerer Sequence Diagram </button>
+                    </div> 
+                    {% else %}
+                    <div class="w-full md:w-auto p-1.5">
+                      <button name="show_offerer_seq_diagram" type="submit" value="Show Offerer Sequence Diagram" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none">
+<svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#556987" stroke-linejoin="round" ><rect x="2" y="2" width="8" height="4"></rect><rect x="2" y="18" width="8" height="4"></rect><line x1="6" y1="9" x2="6" y2="15"></line><polyline points="13 4 17 4 17 6"></polyline><polyline points="13 20 17 20 17 18"></polyline><polygon points="12 12 17 9 22 12 17 15 12 12" stroke="#556987"></polygon></g></svg> Show Offerer Sequence Diagram </button>
+                    </div> 
                     {% endif %}
+                    {% if data.can_abandon == true %}
+                    <div class="w-full md:w-auto p-1.5">
+                      <button name="abandon_bid" type="submit" value="Abandon Bid" onclick="return confirmPopup();" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-red-500 hover:text-red-600 border border-red-400 hover:border-red-500 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none">
+<svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ef5844" stroke-linejoin="round" ><line x1="16" y1="8" x2="8" y2="16" stroke="#ef5844"></line> <line x1="16" y1="16" x2="8" y2="8" stroke="#ef5844"></line> <circle cx="12" cy="12" r="11"></circle></g></svg> Abandon Bid </button>
+                    </div>
+                    {% endif %} 
                     {% if data.show_txns %}
-
                     <div class="w-full md:w-auto p-1.5">
                       <button name="hide_txns" type="submit" value="Hide Info" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none">
-                        <span>Hide info</span> </button>
-                    </div>
-
+<svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#556987" stroke-linejoin="round" ><circle cx="12" cy="12" r="11"></circle><line x1="12" y1="11" x2="12" y2="17" stroke="#556987"></line><circle cx="12" cy="7" r="1" stroke="none" fill="#556987"></circle></g></svg> Hide info </button>
+                    </div> 
                     {% else %}
-
                     <div class="w-full md:w-auto p-1.5">
                       <button name="show_txns" type="submit" value="Show More Info" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none">
-                        <span>Show More Info</span> </button>
-                    </div>
-
+<svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#556987" stroke-linejoin="round" ><circle cx="12" cy="12" r="11"></circle><line x1="12" y1="11" x2="12" y2="17" stroke="#556987"></line><circle cx="12" cy="7" r="1" stroke="none" fill="#556987"></circle></g></svg> Show More Info </button>
+                    </div> 
                     {% endif %}
-
                     <div class="w-full md:w-auto p-1.5">
                       <button name="edit_bid" type="submit" value="Edit Bid" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none">
-                        <span>Edit bid</span> </button>
+ <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#556987" stroke-linejoin="round" ><line x1="2" y1="23" x2="22" y2="23" stroke="#556987"></line> <line data-cap="butt" x1="13" y1="5" x2="17" y2="9"></line> <polygon points="8 18 3 19 4 14 16 2 20 6 8 18"></polygon></g></svg> Edit bit </button>
                     </div>
-
                     {% endif %}
-
                     {% if data.was_received == 'True' %}
-
                     <div class="w-full md:w-auto p-1.5">
-                      <button name="accept_bid" value="Accept Bid" onclick='return confirmPopup("Accept");' type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
-                        <span>Accept Bid</span> </button>
-                    </div>
-
-                    {% endif %}
-
-                  </div>
+                      <button name="accept_bid" value="Accept Bid" type="submit" onclick='return confirmPopup("Accept");' class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
+<svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round" ><polyline points=" 6,12 10,16 18,8 " stroke="#ffffff"></polyline> <circle cx="12" cy="12" r="11"></circle></g></svg> Accept Bid </button>
+                    </div> 
+                  {% endif %} 
+                </div>
                 </div>
               </div>
-
-              <input type="hidden" name="formid" value="{{ form_id }}">
-
-
-          </div>
+              <input type="hidden" name="formid" value="{{ form_id }}"> </div>
         </div>
       </div>
-    </div> <!-- todo double check -->
-
+    </div>
     </form>
-
     <script>
       function confirmPopup(name) {
-          return confirm(name + " Bid - Are you sure?");
+        return confirm(name + " Bid - Are you sure?");
       }
     </script>
-
 </div>
 {% include 'footer.html' %}
 </body>
-
-</html>
+</html>
\ No newline at end of file
diff --git a/basicswap/templates/bids.html b/basicswap/templates/bids.html
index ddab01f..051cd63 100644
--- a/basicswap/templates/bids.html
+++ b/basicswap/templates/bids.html
@@ -1,7 +1,5 @@
 {% include 'header.html' %}
-
 <div class="container mx-auto">
-
   <section class="bg-white p-5 mt-5">
     <div class="flex flex-wrap items-center -m-2">
       <div class="w-full md:w-1/2 p-2">
@@ -26,13 +24,9 @@
       </div>
     </div>
   </section>
-
   <section class="py-4">
     <div class="container px-4 mx-auto">
-      <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden">
-         <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt="">
-         <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt="">
-         <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
+      <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden"> <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
         <div class="relative z-20 flex flex-wrap items-center -m-3">
           <div class="w-full md:w-1/2 p-3">
             <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">{{ page_type_available }} {{ page_type_received }} {{ page_type_sent }}</h2>
@@ -42,50 +36,39 @@
       </div>
     </div>
   </section>
-
-<!-- todo -->
-  {% if refresh %}
+  <!-- todo -->{% if refresh %}
   <p>Page Refresh: {{ refresh }} seconds</p> {% endif %} {% for m in messages %}
-  <p>{{ m }}</p>
-  {% endfor %}
-<!-- todo -->
-
+  <p>{{ m }}</p> {% endfor %}
+  <!-- todo -->
   <section class="bg-white">
     <div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden bg-white">
       <div class="pb-6 border-coolGray-100">
         <div class="flex flex-wrap items-center justify-between -m-2">
           <div class="w-full pt-2">
-
             <form method="post">
-
               <div class="flex justify-between items-center pb-4 bg-white">
                 <div class="bg-white bg-opacity-60 rounded-b-md">
                   <div class="w-full md:w-0/12">
                     <div class="flex flex-wrap justify-end -m-1.5">
-
                       <div class="flex items-center">
                         <div class="w-full md:w-auto p-1.5">
                           <p class="text-sm font-heading bold">Sort By:</p>
                         </div>
                       </div>
-
                       <div class="w-full md:w-auto p-1.5">
                         <div class="relative">
                           <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-                            <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB">
-                            </path>
+                            <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path>
                           </svg>
                           <select name="sort_by" class="appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
                             <option value="created_at" {% if filters.sort_by=='created_at' %} selected{% endif %}>Time At</option>
                           </select>
                         </div>
                       </div>
-
                       <div class="w-full md:w-auto p-1.5">
                         <div class="relative">
                           <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-                            <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB">
-                            </path>
+                            <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path>
                           </svg>
                           <select name="sort_dir" class="appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
                             <option value="asc" {% if filters.sort_dir=='asc' %} selected{% endif %}>Ascending</option>
@@ -93,39 +76,33 @@
                           </select>
                         </div>
                       </div>
-
                       <div class="flex items-center">
                         <div class="w-full md:w-auto p-1.5">
                           <p class="text-sm font-heading bold">State:</p>
                         </div>
                       </div>
-
                       <div class="w-full md:w-auto p-1.5">
                         <div class="relative">
                           <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-                            <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB">
-                            </path>
+                            <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path>
                           </svg>
                           <select name="state" class="appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
                             <option value="-1" {% if filters.bid_state_ind==-1 %} selected{% endif %}>Any</option>
                             {% for s in data.bid_states %}
                             <option value="{{ s[0] }}" {% if filters.bid_state_ind==s[0] %} selected{% endif %}>{{ s[1] }}</option>
-                            {% endfor %}
-                          </select>
+                          {% endfor %}
+                        </select>
                         </div>
                       </div>
-
                       <div class="flex items-center">
                         <div class="w-full md:w-auto p-1.5">
                           <p class="text-sm font-heading bold">Include Expired:</p>
                         </div>
                       </div>
-
                       <div class="w-full md:w-auto p-1.5">
                         <div class="relative">
                           <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-                            <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB">
-                            </path>
+                            <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path>
                           </svg>
                           <select name="with_expired" class="appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
                             <option value="true" {% if filters.with_expired==true %} selected{% endif %}>Include</option>
@@ -133,7 +110,6 @@
                           </select>
                         </div>
                       </div>
-
                       <div class="w-full md:w-auto p-1.5">
                         <div class="relative">
                           <button type="submit" name='clearfilters' value="Clear Filters" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none">
@@ -151,7 +127,6 @@
                             </svg> <span>Clear</span> </button>
                         </div>
                       </div>
-
                       <div class="w-full md:w-auto p-1.5">
                         <div class="relative">
                           <button type="submit" name='applyfilters' value="Apply Filters" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm  bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
@@ -165,17 +140,13 @@
                             </svg> <span>Apply Filters</span> </button>
                         </div>
                       </div>
-
                     </div>
                   </div>
                 </div>
               </div>
-
-
               <div class="container px-0 mx-auto mt-5">
                 <div class="overflow-x-auto relative border sm:rounded-lg">
                   <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
-
                     <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300">
                       <tr>
                         <th scope="col" class="py-3 px-6"> Time At </th>
@@ -187,7 +158,6 @@
                         <th scope="col" class="py-3 px-6"> PTX Status </th>
                       </tr>
                     </thead>
-
                     <tbody>
                       {% for b in bids %}
                       <tr class="bg-white border-t hover:bg-gray-50">
@@ -210,58 +180,42 @@
                         <td class="py-4 px-6">{{ b[5] }}</td>
                       </tr>
                     </tbody>
-                    {% endfor %}
-
-                  </table>
-
+                  {% endfor %}
+                </table>
                   <input type="hidden" name="formid" value="{{ form_id }}">
-                  <input type="hidden" name="pageno" value="{{ filters.page_no }}">
-
-
-                  </div>
-                </div>
-
-                <div class="pt-10 bg-white bg-opacity-60 rounded-b-md">
-                  <div class="w-full md:w-0/12">
-
-                    <div class="flex flex-wrap justify-end -m-1.5">
-
-                      <div class="w-full md:w-auto p-1.5">
-                        <button type="submit" name='pageback' value="Page Back" class="outline-none flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none">
-                          <svg aria-hidden="true" class="mr-2 w-5 h-5" fill="#556987" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-                            <path fill-rule="evenodd" d="M7.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l2.293 2.293a1 1 0 010 1.414z" clip-rule="evenodd"></path>
-                          </svg> <span>Page Back</span> </button>
-                      </div>
-
-                      <div class="flex items-center">
-                        <div class="w-full md:w-auto p-1.5">
-                          <p class="text-sm font-heading">Page: {{ filters.page_no }}</p>
-                        </div>
-                      </div>
-
-                      <div class="w-full md:w-auto p-1.5">
-                        <button type="submit" name='pageforwards' value="Page Forwards" class="outline-none flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none"> <span>Page Forwards</span>
-                          <svg aria-hidden="true" class="ml-2 w-5 h-5" fill="#556987" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-                            <path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
-                          </svg>
-                        </button>
-                      </div>
-
+                  <input type="hidden" name="pageno" value="{{ filters.page_no }}"> </div>
+              </div>
+              <div class="pt-10 bg-white bg-opacity-60 rounded-b-md">
+                <div class="w-full md:w-0/12">
+                  <div class="flex flex-wrap justify-end -m-1.5">
+                    <div class="w-full md:w-auto p-1.5">
+                      <button type="submit" name='pageback' value="Page Back" class="outline-none flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none">
+                        <svg aria-hidden="true" class="mr-2 w-5 h-5" fill="#556987" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+                          <path fill-rule="evenodd" d="M7.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l2.293 2.293a1 1 0 010 1.414z" clip-rule="evenodd"></path>
+                        </svg> <span>Page Back</span> </button>
+                    </div>
+                    <div class="flex items-center">
+                      <div class="w-full md:w-auto p-1.5">
+                        <p class="text-sm font-heading">Page: {{ filters.page_no }}</p>
+                      </div>
+                    </div>
+                    <div class="w-full md:w-auto p-1.5">
+                      <button type="submit" name='pageforwards' value="Page Forwards" class="outline-none flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none"> <span>Page Forwards</span>
+                        <svg aria-hidden="true" class="ml-2 w-5 h-5" fill="#556987" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+                          <path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
+                        </svg>
+                      </button>
                     </div>
-
                   </div>
                 </div>
-
-              </form>
-
-            </div>
+              </div>
+            </form>
           </div>
         </div>
       </div>
-
-</section>
-
+    </div>
+  </section>
 </div>
 {% include 'footer.html' %}
 </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/basicswap/templates/debug.html b/basicswap/templates/debug.html
index c65565a..1c19aff 100644
--- a/basicswap/templates/debug.html
+++ b/basicswap/templates/debug.html
@@ -1,95 +1,81 @@
 {% include 'header.html' %}
 <div class="container mx-auto">
-
- <section class="bg-white p-5 mt-5">
-  <div class="flex flex-wrap items-center -m-2">
-   <div class="w-full md:w-1/2 p-2">
-    <ul class="flex flex-wrap items-center gap-x-3 mb-2">
-     <li>
-      <a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/">
-       <p>Home</p>
-      </a>
-     </li>
-     <li>
-      <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-       <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
-      </svg>
-     </li>
-     <li><a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/debug">Debug</a></li>
-     <li>
-      <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-       <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
-      </svg>
-     </li>
-    </ul>
-   </div>
-  </div>
- </section>
-
- <section class="py-4">
-  <div class="container px-4 mx-auto">
-   <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden">
-    <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt="">
-    <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt="">
-    <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
-    <div class="relative z-20 flex flex-wrap items-center -m-3">
-     <div class="w-full md:w-1/2 p-3">
-      <h2 class="mb-6 text-4xl font-bold text-white tracking-tighte r">Debug</h2>
-      <p class="font-semibold text-coolGray-200"></p>
-     </div>
+  <section class="bg-white p-5 mt-5">
+    <div class="flex flex-wrap items-center -m-2">
+      <div class="w-full md:w-1/2 p-2">
+        <ul class="flex flex-wrap items-center gap-x-3 mb-2">
+          <li>
+            <a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/">
+              <p>Home</p>
+            </a>
+          </li>
+          <li>
+            <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
+            </svg>
+          </li>
+          <li><a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/debug">Debug</a></li>
+          <li>
+            <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
+            </svg>
+          </li>
+        </ul>
+      </div>
     </div>
-   </div>
-  </div>
- </section>
-
-{% include 'inc_messages.html' %}
-
- <section class="bg-white">
-  <div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden bg-white ">
-   <div class="pb-6 border-coolGray-100">
-    <div class="flex flex-wrap items-center justify-between -m-2">
-     <div class="w-full pt-2">
-
-      <div class="container px-0 mx-auto mt-5">
-       <div class="overflow-x-auto relative border sm:rounded-lg">
-
-        <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
-
-         <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300">
-          <tr>
-           <th scope="col" class="py-3 px-6 w-80">Name</th>
-           <th scope="col" class="py-3">Input</th>
-          </tr>
-         </thead>
-
-<form method="post">
-<tr class="bg-white border-t hover:bg-gray-50">
- <td class="py-4 pl-5 pr-5 bold">Reinitialise XMR wallet</td>
- <td td class="py-4"><input name="reinit_xmr" type="submit" value="Yes" class="inline-block w-20 py-1 px-2 font-medium text-center text-sm rounded-md shadow-button bg-blue-500 text-white border border-coolGray-200 hover:border-coolGray-300"></td>
- <input type="hidden" name="formid" value="{{ form_id }}">
-</tr>
-</form>
-</table>
-</div>
-</div
-</div>
-</div>
-</div>
-</div>
-
-</section>
-
-<!-- todo
+  </section>
+  <section class="py-4">
+    <div class="container px-4 mx-auto">
+      <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden"> <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
+        <div class="relative z-20 flex flex-wrap items-center -m-3">
+          <div class="w-full md:w-1/2 p-3">
+            <h2 class="mb-6 text-4xl font-bold text-white tracking-tighte r">Debug</h2>
+            <p class="font-semibold text-coolGray-200"></p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  {% include 'inc_messages.html' %}
+  <section class="bg-white">
+    <div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden bg-white ">
+      <div class="pb-6 border-coolGray-100">
+        <div class="flex flex-wrap items-center justify-between -m-2">
+          <div class="w-full pt-2">
+            <div class="container px-0 mx-auto mt-5">
+              <div class="overflow-x-auto relative border sm:rounded-lg">
+                <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
+                  <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300">
+                    <tr>
+                      <th scope="col" class="py-3 px-6 w-80">Option</th>
+                      <th scope="col" class="py-3"></th>
+                    </tr>
+                  </thead>
+                  <form method="post">
+                    <tr class="bg-white border-t hover:bg-gray-50">
+                      <td class="py-4 pl-5 pr-5 bold">Reinitialise XMR wallet</td>
+                      <td td class="py-4">
+                    <button name="reinit_xmr" type="submit" value="Yes" class="flex flex-wrap justify-center py-2 px-4 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
+                      <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="square" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="miter" class="nc-icon-wrapper" stroke-miterlimit="10"><polyline points="2.966 1.13 2.237 6.927 7.929 5.341"></polyline><path d="M2.921,18.2a11.006,11.006,0,0,1-1.041-1.9" stroke="#ffffff"></path><path d="M8.461,22.412a11.07,11.07,0,0,1-1.529-.654q-.2-.1-.392-.214" stroke="#ffffff"></path><path d="M15.539,22.41a11.062,11.062,0,0,1-2.06.486" stroke="#ffffff"></path><path d="M21.08,18.206a10.984,10.984,0,0,1-1.438,1.705" stroke="#ffffff"></path><path d="M2.759,6.027A11,11,0,0,1,22.9,13.464"></path></g></svg> Yes </button>
+                      </td>
+                      <input type="hidden" name="formid" value="{{ form_id }}"> </tr>
+                  </form>
+                </table>
+              </div>
+            </div </div>
+          </div>
+        </div>
+      </div>
+  </section>
+  <!-- todo
 {% if result %}
 <textarea class="monospace" rows="40" cols="160">
 {{ result }}
 </textarea>
 {% endif %}
 -->
-
-</div>
+  </div>
 {% include 'footer.html' %}
 </div>
 </body>
-
-</html>
+</html>
\ No newline at end of file
diff --git a/basicswap/templates/error.html b/basicswap/templates/error.html
index 3760de7..cec7c3e 100644
--- a/basicswap/templates/error.html
+++ b/basicswap/templates/error.html
@@ -1,11 +1,16 @@
-<!DOCTYPE html><html lang="en"><head>
-<meta charset="UTF-8">
-<link rel=icon sizes="32x32" type="image/png" href="/static/images/favicon-32.png">
-<title>{{ title }}</title>
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <link rel=icon sizes="32x32" type="image/png" href="/static/images/favicon-32.png">
+  <title>{{ title }}</title>
 </head>
+
 <body>
-<h2>{{ title_str }}</h2>
-<p>Info: {{ message_str }}</p>
-<p><a href="/">home</a></p>
+  <h2>{{ title_str }}</h2>
+  <p>Info: {{ message_str }}</p>
+  <p><a href="/">home</a></p>
 </body>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/basicswap/templates/explorers.html b/basicswap/templates/explorers.html
index a645522..fa8a666 100644
--- a/basicswap/templates/explorers.html
+++ b/basicswap/templates/explorers.html
@@ -24,13 +24,9 @@
       </div>
     </div>
   </section>
-
   <section class="py-4">
     <div class="container px-4 mx-auto">
-      <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden">
-        <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt="">
-        <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt="">
-        <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
+      <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden"> <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
         <div class="relative z-20 flex flex-wrap items-center -m-3">
           <div class="w-full md:w-1/2 p-3">
             <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">Explorers</h2>
@@ -40,122 +36,87 @@
       </div>
     </div>
   </section>
-
-{% include 'inc_messages.html' %}
-
-   <section class="bg-white">
+  {% include 'inc_messages.html' %}
+  <section class="bg-white">
     <div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden bg-white ">
       <div class="pb-6 border-coolGray-100">
         <div class="flex flex-wrap items-center justify-between -m-2">
           <div class="w-full pt-2">
-
             <div class="container px-0 mx-auto mt-5">
               <div class="overflow-x-auto relative border sm:rounded-lg">
-
                 <form method="post">
-
                   <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
-
                     <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300">
                       <tr>
                         <th scope="col" class="py-3 px-6">Select Explorer</th>
                         <th scope="col">Action</th>
                       </tr>
                     </thead>
-
                     <tr class="bg-white border-t">
                       <td class="py-4 px-6 bold w-96">
-
-
-
-                     <div class="relative">
-                        <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-                          <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path>
-                        </svg> 
-                        <select class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"name="explorer">
-                          <!-- <option value="-1" {% if explorer==-1 %} selected{% endif %}>Select Explorer</option> -->
-                          {% for e in explorers %}
-                          <option value="{{ e[0] }}" {% if explorer==e[0] %} selected{% endif %}>{{ e[1] }}</option>
+                        <div class="relative">
+                          <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path>
+                          </svg>
+                          <select class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="explorer">
+                            <!-- <option value="-1" {% if explorer==-1 %} selected{% endif %}>Select Explorer</option> -->{% for e in explorers %}
+                            <option value="{{ e[0] }}" {% if explorer==e[0] %} selected{% endif %}>{{ e[1] }}</option>
                           {% endfor %}
                         </select>
-                      </div>
-
+                        </div>
                       </td>
                       <td class="py-4 pr-5">
                         <select class="pr-15 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="action">
-                          <option value="-1" {% if action==-1 %} selected{% endif %}>Select Action</option>
-                          {% for a in actions %}
+                          <option value="-1" {% if action==-1 %} selected{% endif %}>Select Action</option> {% for a in actions %}
                           <option value="{{ a[0] }}" {% if action==a[0] %} selected{% endif %}>{{ a[1] }}</option>
-                          {% endfor %}
-                        </select>
+                        {% endfor %}
+                      </select>
                       </td>
                     </tr>
-
                     <tr class="bg-white border-t hover:bg-gray-50">
-                      <td class="py-4 px-6 bold">
-                        Arguments:
-                      </td>
+                      <td class="py-4 px-6 bold"> Arguments: </td>
                       <td class="py-4 pr-5">
-                        <input class="appearance-none bg-gray-50 border w-full border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" type="text" name="args" placeholder="Arguments">
-                      </td>
+                        <input class="appearance-none bg-gray-50 border w-full border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" type="text" name="args" placeholder="Arguments"> </td>
                     </tr>
-
                   </table>
               </div>
             </div>
-
             <div class="p-6 pt-10 bg-white bg-opacity-60 rounded-b-md">
               <div class="w-full md:w-0/12">
                 <div class="flex flex-wrap justify-end -m-1.5">
-
-                  <div class="w-full md:w-auto p-1.5 ml-2">
-                    <button value="Submit" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
-                      <span>Submit</span> </button>
-                  </div>
-
+                       <div class="w-full md:w-auto p-1.5 ml-2">
+                          <button type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none"><svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round" ><polyline points=" 6,12 10,16 18,8 " stroke="#ffffff"></polyline> <circle cx="12" cy="12" r="11"></circle></g></svg>  Apply</button>
+                        </div>
                 </div>
               </div>
             </div>
-
             <input type="hidden" name="formid" value="{{ form_id }}">
-
             {% if result %}
-
             <div class="container px-0 mx-auto mt-5">
               <div class="overflow-x-auto relative border sm:rounded-lg">
-
                 <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
-
                   <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300">
                     <tr>
                       <th scope="col" class="py-3 px-6">Explorer output:</th>
                     </tr>
                   </thead>
-
                   <tr class="bg-white border-t hover:bg-gray-50">
                     <td class="py-4 pl-5 pr-5">
-                      <textarea class="whitespace-pre-line outline-none block p-2.5 text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 w-full monospace" rows="15">
-                      {{ result }}
-                      </textarea>
+                      <textarea class="whitespace-pre-line outline-none block p-2.5 text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 w-full monospace" rows="15"> {{ result }} </textarea>
                     </td>
                   </tr>
-
                 </table>
               </div>
             </div>
-            {% endif %}
-
-            </form>
-
+          {% endif %}
+        </form>
           </div>
         </div>
       </div>
     </div>
-
   </section>
 </div>
-  {% include 'footer.html' %}
+{% include 'footer.html' %}
 </div>
 </body>
-
 </html>
\ No newline at end of file
diff --git a/basicswap/templates/footer.html b/basicswap/templates/footer.html
index 4ed5a8d..3488074 100644
--- a/basicswap/templates/footer.html
+++ b/basicswap/templates/footer.html
@@ -2,39 +2,32 @@
   <div class="container px-4 mx-auto">
     <div class="flex flex-wrap lg:items-center pt-24 pb-12 -mx-4">
       <div class="w-full md:w-3/4 px-4">
-        <a class="block mb-8 max-w-max" href="#">
-          <img class="h-8" src="/static/images/logos/basicswap-logo-dark.svg" alt="">
-        </a>
+        <a class="block mb-8 max-w-max" href="#"> <img class="h-8" src="/static/images/logos/basicswap-logo-dark.svg" alt=""> </a>
         <div class="mb-12 md:mb-0 flex flex-wrap -mx-3 md:-mx-6">
           <div class="w-full md:w-auto p-3 md:py-0 md:px-6"><a class="inline-block text-coolGray-500 hover:text-coolGray-600 font-medium" href="https://academy.particl.io/en/latest/basicswap-dex/basicswap_explained.html" target="_blank">BasicSwap Explained</a></div>
           <div class="w-full md:w-auto p-3 md:py-0 md:px-6"><a class="inline-block text-coolGray-500 hover:text-coolGray-600 font-medium" href="https://academy.particl.io/en/latest/basicswap-guides/basicswapguides_installation.html" target="_blank">Tutorials and Guides</a></div>
           <div class="w-full md:w-auto p-3 md:py-0 md:px-6"><a class="inline-block text-coolGray-500 hover:text-coolGray-600 font-medium" href="https://academy.particl.io/en/latest/faq/get_support.html" target="_blank">Get Support</a></div>
         </div>
       </div>
-      <div class="w-full md:w-1/4 px-4">
-
-      </div>
+      <div class="w-full md:w-1/4 px-4"> </div>
     </div>
   </div>
   <div class="border-b border-coolGray-100"></div>
   <div class="container px-4 mx-auto">
     <div class="flex flex-wrap items-center py-12 md:pb-32">
       <div class="w-full md:w-1/2 mb-6 md:mb-0">
-
         <div class="flex items-center">
           <div class="flex items-center">
-
-        <p class="mr-1 text-sm text-gray-90 font-medium ">© 2022~ </p>
-        <p class="text-sm text-coolGray-400 font-medium">{{ title }}</p>
-        <span class="w-1 h-1 mx-1.5 bg-gray-500 rounded-full"></span>
-        <p class="text-sm text-coolGray-400 font-medium">GUI 0.1.1 </p>
-        <span class="w-1 h-1 mx-1.5 bg-gray-500 rounded-full"></span>
-        <p class="mr-2 text-sm font-bold text-gray-90 ">Made with </p>
-        <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#f80b0b" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M21.243,3.757 c-2.343-2.343-6.142-2.343-8.485,0c-0.289,0.289-0.54,0.6-0.757,0.927c-0.217-0.327-0.469-0.639-0.757-0.927 c-2.343-2.343-6.142-2.343-8.485,0c-2.343,2.343-2.343,6.142,0,8.485L12,21.485l9.243-9.243C23.586,9.899,23.586,6.1,21.243,3.757z"></path></g></svg>
-        <span class="ml-2 text-sm font-bold text-gray-90 ">by TV and CRZ</span>
+            <p class="mr-1 text-sm text-gray-90 font-medium ">© 2022~ </p>
+            <p class="text-sm text-coolGray-400 font-medium">{{ title }}</p> <span class="w-1 h-1 mx-1.5 bg-gray-500 rounded-full"></span>
+            <p class="text-sm text-coolGray-400 font-medium">GUI 0.1.2 </p> <span class="w-1 h-1 mx-1.5 bg-gray-500 rounded-full"></span>
+            <p class="mr-2 text-sm font-bold text-gray-90 ">Made with </p>
+            <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
+              <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#f80b0b" stroke-linejoin="round" class="nc-icon-wrapper">
+                <path d="M21.243,3.757 c-2.343-2.343-6.142-2.343-8.485,0c-0.289,0.289-0.54,0.6-0.757,0.927c-0.217-0.327-0.469-0.639-0.757-0.927 c-2.343-2.343-6.142-2.343-8.485,0c-2.343,2.343-2.343,6.142,0,8.485L12,21.485l9.243-9.243C23.586,9.899,23.586,6.1,21.243,3.757z"></path>
+              </g>
+            </svg> <span class="ml-2 text-sm font-bold text-gray-90 ">by TV and CRZ</span> </div>
         </div>
-
-      </div>
       </div>
       <div class="w-full md:w-1/2">
         <div class="flex flex-wrap md:justify-end -mx-5">
@@ -47,8 +40,7 @@
           </div>
           <div class="px-5">
             <a class="inline-block text-coolGray-300 hover:text-coolGray-400" href="#">
-              <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-              </svg>
+              <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"> </svg>
             </a>
           </div>
         </div>
@@ -56,4 +48,4 @@
     </div>
   </div>
 </section>
-  <script src="/static/js/libs/dd.min.js"></script>
\ No newline at end of file
+<script src="/static/js/libs/dd.min.js"></script>
\ No newline at end of file
diff --git a/basicswap/templates/header.html b/basicswap/templates/header.html
index 867e018..b6aeef6 100644
--- a/basicswap/templates/header.html
+++ b/basicswap/templates/header.html
@@ -16,7 +16,6 @@
 </head>
 
 <body>
-
   <section>
     <nav class="relative bg-gray-800">
       <div class="p-6 container flex flex-wrap items-center justify-between items-center mx-auto">
@@ -35,15 +34,14 @@
           </li>
           <li>
             <a class="flex mr-10 items-center py-2.5 text-gray-50 hover:text-gray-100 text-sm" href="/offers">
-                <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 24 24">
-                  <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round">
-                    <rect x="3" y="1" width="18" height="22"></rect>
-                    <line x1="12" y1="8" x2="12" y2="16" stroke="#6b7280"></line>
-                    <line x1="8" y1="14" x2="8" y2="16" stroke="#6b7280"></line>
-                    <line x1="16" y1="11" x2="16" y2="16" stroke="#6b7280"> </line>
-                  </g>
-                </svg>
-                <span>Show Order Book</span> <span class="inline-flex justify-center items-center text-xs font-semibold ml-3 mr-2 px-2.5 py-1 font-small text-white bg-blue-500 rounded-full">{{ summary.num_network_offers }}</span> </a>
+              <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 24 24">
+                <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round">
+                  <rect x="3" y="1" width="18" height="22"></rect>
+                  <line x1="12" y1="8" x2="12" y2="16" stroke="#6b7280"></line>
+                  <line x1="8" y1="14" x2="8" y2="16" stroke="#6b7280"></line>
+                  <line x1="16" y1="11" x2="16" y2="16" stroke="#6b7280"> </line>
+                </g>
+              </svg> <span>Show Order Book</span> <span class="inline-flex justify-center items-center text-xs font-semibold ml-3 mr-2 px-2.5 py-1 font-small text-white bg-blue-500 rounded-full">{{ summary.num_network_offers }}</span> </a>
           </li>
           <li>
             <a class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none" href="/newoffer">
@@ -73,178 +71,170 @@
             </svg>
           </div>
         </ul>
-
-<!-- dropdown settings & tools -->
-          <div id="dropdownNavbar" class="hidden z-50 w-50 font-normal bg-white shadow divide-y divide-gray-100">
-            <ul class="py-0 text-sm text-gray-700" aria-labelledby="dropdownLargeButton">
-              <li>
-                <a href="/settings" class="flex items-center block py-4 px-4 hover:bg-gray-100"> <span class="sr-only">Settings</span>
-                  <svg class="text-gray-500 w-5 h-5 mr-3" xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 24 24">
-                    <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round">
-                      <circle cx="12" cy="12" r="3" stroke="#6b7280"></circle>
-                      <path d="M20,12a8.049,8.049,0,0,0-.188-1.713l2.714-2.055-2-3.464L17.383,6.094a7.987,7.987,0,0,0-2.961-1.719L14,1H10L9.578,4.375A7.987,7.987,0,0,0,6.617,6.094L3.474,4.768l-2,3.464,2.714,2.055a7.9,7.9,0,0,0,0,3.426L1.474,15.768l2,3.464,3.143-1.326a7.987,7.987,0,0,0,2.961,1.719L10,23h4l.422-3.375a7.987,7.987,0,0,0,2.961-1.719l3.143,1.326,2-3.464-2.714-2.055A8.049,8.049,0,0,0,20,12Z"></path>
-                    </g>
-                  </svg> Settings </a>
-              </li>
-                {% if debug_mode == true %}
-              <li>
-                <a href="/rpc" class="flex items-center block py-4 px-4 hover:bg-gray-100"> <span class="sr-only">RPC</span>
-                  <svg class="text-gray-500 w-5 h-5 mr-3" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
-                    <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round">
-                      <rect x="1" y="2" width="22" height="20"></rect>
-                      <line x1="1" y1="6" x2="23" y2="6"></line>
-                      <polyline points=" 5,11 7,13 5,15 " stroke="#6b7280"></polyline>
-                      <line x1="10" y1="15" x2="14" y2="15" stroke="#6b7280"></line>
-                      <line x1="6" y1="2" x2="6" y2="6"></line>
-                    </g>
-                  </svg> RPC Console </a>
-              </li>
-                 {% endif %}
-                 {% if debug_mode == true %}
-               <li>
-                 <a href="/debug" class="flex items-center block py-4 px-4 hover:bg-gray-100"> <span class="sr-only">Debug</span>
-                   <svg class="text-gray-500 w-5 h-5 mr-3" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
-                   <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round">
-                   <path data-cap="butt" d="M5.29,10H4A3,3,0,0,1,1,7V6" stroke="#6b7280"></path>
-                   <path data-cap="butt" d="M5.29,18H4a3,3,0,0,0-3,3v1" stroke="#6b7280"></path>
-                   <path data-cap="butt" d="M8,6.255V5a4,4,0,0,1,4-4h0a4,4,0,0,1,4,4V6.255" stroke="#6b7280"></path>
-                   <line x1="5" y1="14" x2="1" y2="14" stroke="#6b7280"></line> <path data-cap="butt" d="M18.71,10H20a3,3,0,0,0,3-3V6" stroke="#6b7280"></path>
-                   <path data-cap="butt" d="M18.71,18H20a3,3,0,0,1,3,3v1" stroke="#6b7280"></path> <line x1="19" y1="14" x2="23" y2="14" stroke="#6b7280"></line>
-                   <path d="M19,16A7,7,0,0,1,5,16V12a7,7,0,0,1,14,0Z"></path></g></svg> Debug </a>
-               </li>
-                  {% endif %}
-                {% if debug_mode == true %}
-              <li>
-                <a href="/explorers" class="flex items-center block py-4 px-4 hover:bg-gray-100"> <span class="sr-only">Explorers</span>
-                  <svg class="text-gray-500 w-5 h-5 mr-3" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
-                    <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round">
-                      <line x1="22" y1="22" x2="15.656" y2="15.656" stroke="#6b7280"></line>
-                      <circle cx="10" cy="10" r="8"></circle>
-                    </g>
-                  </svg> Explorers </a>
-              </li>
-               {% endif %}
-              <li>
-                <a href="/smsgaddresses" class="flex items-center block py-4 px-4 hover:bg-gray-100"> <span class="sr-only">Settings</span>
-                  <svg class="text-gray-500 w-5 h-5 mr-3" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
-                    <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round">
-                      <path data-cap="butt" d="M11.992,11.737,14.2,13.4A2,2,0,0,1,15,15v1H7V15a2,2,0,0,1,.8-1.6l2.208-1.663" stroke="#6b7280"></path>
-                      <rect x="9" y="7" width="4" height="5" rx="2" ry="2" stroke="#6b7280"></rect>
-                      <path d="M2,1H18a2,2,0,0,1,2,2V21a2,2,0,0,1-2,2H2Z"></path>
-                      <line x1="23" y1="5" x2="23" y2="9" stroke="#6b7280"></line>
-                    </g>
-                  </svg> SMSG Addresses </a>
-              </li>
-              <li>
-                <a href="/watched" class="flex items-center block py-4 px-4 hover:bg-gray-100"> <span class="sr-only">Automation Strategies</span>
-                  <svg class="text-gray-500 w-5 h-5 mr-3" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
-                    <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round">
-                      <path d="M1.373,13.183a2.064,2.064,0,0,1,0-2.366C2.946,8.59,6.819,4,12,4s9.054,4.59,10.627,6.817a2.064,2.064,0,0,1,0,2.366C21.054,15.41,17.181,20,12,20S2.946,15.41,1.373,13.183Z"></path>
-                      <circle cx="12" cy="12" r="4" stroke="#6b7280"></circle>
-                    </g>
-                  </svg> Watch Outputs <span class="inline-flex justify-center items-center text-xs font-semibold ml-3 mr-2 px-2.5 py-1 font-small text-white bg-blue-500 rounded-full">{{ summary.num_watched_outputs }}</span> </a>
-              </li>
-                {% if debug_mode == true %}
-              <li>
-                <a href="/automation" class="flex items-center block py-4 px-4 hover:bg-gray-100"> <span class="sr-only">Automation Strategies</span>
-                  <svg class="text-gray-500 w-5 h-5 mr-3" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
-                    <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round">
-                      <line data-cap="butt" x1="5" y1="1" x2="5" y2="6" stroke="#6b7280"></line>
-                      <line x1="3" y1="1" x2="7" y2="1" stroke="#6b7280"> </line>
-                      <line data-cap="butt" x1="19" y1="1" x2="19" y2="6" stroke="#6b7280"></line>
-                      <line x1="17" y1="1" x2="21" y2="1" stroke="#6b7280"></line>
-                      <rect x="6" y="15" width="12" height="4" stroke="#6b7280"></rect>
-                      <line data-cap="butt" x1="10" y1="19" x2="10" y2="15" stroke="#6b7280"></line>
-                      <line data-cap="butt" x1="14" y1="19" x2="14" y2="15" stroke="#6b7280"></line>
-                      <line x1="6" y1="11" x2="8" y2="11" stroke="#6b7280"></line>
-                      <line x1="16" y1="11" x2="18" y2="11" stroke="#6b7280"> </line>
-                      <polygon points="23 6 5 6 1 6 1 23 23 23 23 6"></polygon>
-                    </g>
-                  </svg> Automation Strategies</a>
-              </li>
-               {% endif %}
-            </ul>
-            <div class="text-sm text-gray-700">
-              <a href="/shutdown/{{ shutdown_token }}" class="flex items-center block py-4 px-4 hover:bg-gray-100"> <span class="sr-only">Shutdown</span>
+        <!-- dropdown settings & tools -->
+        <div id="dropdownNavbar" class="hidden z-50 w-50 font-normal bg-white shadow divide-y divide-gray-100">
+          <ul class="py-0 text-sm text-gray-700" aria-labelledby="dropdownLargeButton">
+            <li>
+              <a href="/settings" class="flex items-center block py-4 px-4 hover:bg-gray-100"> <span class="sr-only">Settings</span>
+                <svg class="text-gray-500 w-5 h-5 mr-3" xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 24 24">
+                  <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round">
+                    <circle cx="12" cy="12" r="3" stroke="#6b7280"></circle>
+                    <path d="M20,12a8.049,8.049,0,0,0-.188-1.713l2.714-2.055-2-3.464L17.383,6.094a7.987,7.987,0,0,0-2.961-1.719L14,1H10L9.578,4.375A7.987,7.987,0,0,0,6.617,6.094L3.474,4.768l-2,3.464,2.714,2.055a7.9,7.9,0,0,0,0,3.426L1.474,15.768l2,3.464,3.143-1.326a7.987,7.987,0,0,0,2.961,1.719L10,23h4l.422-3.375a7.987,7.987,0,0,0,2.961-1.719l3.143,1.326,2-3.464-2.714-2.055A8.049,8.049,0,0,0,20,12Z"></path>
+                  </g>
+                </svg> Settings </a>
+            </li>
+            {% if debug_mode == true %}
+            <li>
+              <a href="/rpc" class="flex items-center block py-4 px-4 hover:bg-gray-100"> <span class="sr-only">RPC</span>
                 <svg class="text-gray-500 w-5 h-5 mr-3" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
                   <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round">
-                    <line data-cap="butt" x1="11" y1="10" x2="22" y2="10" stroke="#6b7280"></line>
-                    <polyline points="18 6 22 10 18 14" stroke="#6b7280"></polyline>
-                    <polyline data-cap="butt" points="13 13 13 17 8 17"></polyline>
-                    <polyline data-cap="butt" points="1 2 8 7.016 8 22 1 17 1 2 13 2 13 7"></polyline>
+                    <rect x="1" y="2" width="22" height="20"></rect>
+                    <line x1="1" y1="6" x2="23" y2="6"></line>
+                    <polyline points=" 5,11 7,13 5,15 " stroke="#6b7280"></polyline>
+                    <line x1="10" y1="15" x2="14" y2="15" stroke="#6b7280"></line>
+                    <line x1="6" y1="2" x2="6" y2="6"></line>
                   </g>
-                </svg> Shutdown </a>
-            </div>
+                </svg> RPC Console </a>
+            </li>
+            {% endif %}
+            {% if debug_mode == true %}
+            <li>
+              <a href="/debug" class="flex items-center block py-4 px-4 hover:bg-gray-100"> <span class="sr-only">Debug</span>
+                <svg class="text-gray-500 w-5 h-5 mr-3" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
+                  <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round">
+                    <path data-cap="butt" d="M5.29,10H4A3,3,0,0,1,1,7V6" stroke="#6b7280"></path>
+                    <path data-cap="butt" d="M5.29,18H4a3,3,0,0,0-3,3v1" stroke="#6b7280"></path>
+                    <path data-cap="butt" d="M8,6.255V5a4,4,0,0,1,4-4h0a4,4,0,0,1,4,4V6.255" stroke="#6b7280"></path>
+                    <line x1="5" y1="14" x2="1" y2="14" stroke="#6b7280"></line>
+                    <path data-cap="butt" d="M18.71,10H20a3,3,0,0,0,3-3V6" stroke="#6b7280"></path>
+                    <path data-cap="butt" d="M18.71,18H20a3,3,0,0,1,3,3v1" stroke="#6b7280"></path>
+                    <line x1="19" y1="14" x2="23" y2="14" stroke="#6b7280"></line>
+                    <path d="M19,16A7,7,0,0,1,5,16V12a7,7,0,0,1,14,0Z"></path>
+                  </g>
+                </svg> Debug </a>
+            </li>
+            {% endif %}
+            {% if debug_mode == true %}
+            <li>
+              <a href="/explorers" class="flex items-center block py-4 px-4 hover:bg-gray-100"> <span class="sr-only">Explorers</span>
+                <svg class="text-gray-500 w-5 h-5 mr-3" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
+                  <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round">
+                    <line x1="22" y1="22" x2="15.656" y2="15.656" stroke="#6b7280"></line>
+                    <circle cx="10" cy="10" r="8"></circle>
+                  </g>
+                </svg> Explorers </a>
+            </li>
+            {% endif %}
+            <li>
+              <a href="/smsgaddresses" class="flex items-center block py-4 px-4 hover:bg-gray-100"> <span class="sr-only">Settings</span>
+                <svg class="text-gray-500 w-5 h-5 mr-3" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
+                  <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round">
+                    <path data-cap="butt" d="M11.992,11.737,14.2,13.4A2,2,0,0,1,15,15v1H7V15a2,2,0,0,1,.8-1.6l2.208-1.663" stroke="#6b7280"></path>
+                    <rect x="9" y="7" width="4" height="5" rx="2" ry="2" stroke="#6b7280"></rect>
+                    <path d="M2,1H18a2,2,0,0,1,2,2V21a2,2,0,0,1-2,2H2Z"></path>
+                    <line x1="23" y1="5" x2="23" y2="9" stroke="#6b7280"></line>
+                  </g>
+                </svg> SMSG Addresses </a>
+            </li>
+            <li>
+              <a href="/watched" class="flex items-center block py-4 px-4 hover:bg-gray-100"> <span class="sr-only">Automation Strategies</span>
+                <svg class="text-gray-500 w-5 h-5 mr-3" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
+                  <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round">
+                    <path d="M1.373,13.183a2.064,2.064,0,0,1,0-2.366C2.946,8.59,6.819,4,12,4s9.054,4.59,10.627,6.817a2.064,2.064,0,0,1,0,2.366C21.054,15.41,17.181,20,12,20S2.946,15.41,1.373,13.183Z"></path>
+                    <circle cx="12" cy="12" r="4" stroke="#6b7280"></circle>
+                  </g>
+                </svg> Watch Outputs <span class="inline-flex justify-center items-center text-xs font-semibold ml-3 mr-2 px-2.5 py-1 font-small text-white bg-blue-500 rounded-full">{{ summary.num_watched_outputs }}</span> </a>
+            </li>
+            {% if debug_mode == true %}
+            <li>
+              <a href="/automation" class="flex items-center block py-4 px-4 hover:bg-gray-100"> <span class="sr-only">Automation Strategies</span>
+                <svg class="text-gray-500 w-5 h-5 mr-3" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
+                  <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round">
+                    <line data-cap="butt" x1="5" y1="1" x2="5" y2="6" stroke="#6b7280"></line>
+                    <line x1="3" y1="1" x2="7" y2="1" stroke="#6b7280"> </line>
+                    <line data-cap="butt" x1="19" y1="1" x2="19" y2="6" stroke="#6b7280"></line>
+                    <line x1="17" y1="1" x2="21" y2="1" stroke="#6b7280"></line>
+                    <rect x="6" y="15" width="12" height="4" stroke="#6b7280"></rect>
+                    <line data-cap="butt" x1="10" y1="19" x2="10" y2="15" stroke="#6b7280"></line>
+                    <line data-cap="butt" x1="14" y1="19" x2="14" y2="15" stroke="#6b7280"></line>
+                    <line x1="6" y1="11" x2="8" y2="11" stroke="#6b7280"></line>
+                    <line x1="16" y1="11" x2="18" y2="11" stroke="#6b7280"> </line>
+                    <polygon points="23 6 5 6 1 6 1 23 23 23 23 6"></polygon>
+                  </g>
+                </svg> Automation Strategies</a>
+            </li>
+          {% endif %}
+        </ul>
+          <div class="text-sm text-gray-700">
+            <a href="/shutdown/{{ shutdown_token }}" class="flex items-center block py-4 px-4 hover:bg-gray-100"> <span class="sr-only">Shutdown</span>
+              <svg class="text-gray-500 w-5 h-5 mr-3" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
+                <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round">
+                  <line data-cap="butt" x1="11" y1="10" x2="22" y2="10" stroke="#6b7280"></line>
+                  <polyline points="18 6 22 10 18 14" stroke="#6b7280"></polyline>
+                  <polyline data-cap="butt" points="13 13 13 17 8 17"></polyline>
+                  <polyline data-cap="butt" points="1 2 8 7.016 8 22 1 17 1 2 13 2 13 7"></polyline>
+                </g>
+              </svg> Shutdown </a>
           </div>
-<!-- dropdown settings & tools -->
-
-
-
-
-<!-- notifications -->
-          <button id="dropdownNotificationButton" data-dropdown-toggle="dropdownNotification" class="inline-flex items-center text-sm font-medium text-center text-gray-500 focus:outline-none " type="button">
-            <svg class="h-5 w-5" viewBox="0 0 16 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M14 11.18V8C13.9986 6.58312 13.4958 5.21247 12.5806 4.13077C11.6655 3.04908 10.3971 2.32615 9 2.09V1C9 0.734784 8.89464 0.48043 8.70711 0.292893C8.51957 0.105357 8.26522 0 8 0C7.73478 0 7.48043 0.105357 7.29289 0.292893C7.10536 0.48043 7 0.734784 7 1V2.09C5.60294 2.32615 4.33452 3.04908 3.41939 4.13077C2.50425 5.21247 2.00144 6.58312 2 8V11.18C1.41645 11.3863 0.910998 11.7681 0.552938 12.2729C0.194879 12.7778 0.00173951 13.3811 0 14V16C0 16.2652 0.105357 16.5196 0.292893 16.7071C0.48043 16.8946 0.734784 17 1 17H4.14C4.37028 17.8474 4.873 18.5954 5.5706 19.1287C6.26819 19.6621 7.1219 19.951 8 19.951C8.8781 19.951 9.73181 19.6621 10.4294 19.1287C11.127 18.5954 11.6297 17.8474 11.86 17H15C15.2652 17 15.5196 16.8946 15.7071 16.7071C15.8946 16.5196 16 16.2652 16 16V14C15.9983 13.3811 15.8051 12.7778 15.4471 12.2729C15.089 11.7681 14.5835 11.3863 14 11.18ZM4 8C4 6.93913 4.42143 5.92172 5.17157 5.17157C5.92172 4.42143 6.93913 4 8 4C9.06087 4 10.0783 4.42143 10.8284 5.17157C11.5786 5.92172 12 6.93913 12 8V11H4V8ZM8 18C7.65097 17.9979 7.30857 17.9045 7.00683 17.7291C6.70509 17.5536 6.45451 17.3023 6.28 17H9.72C9.54549 17.3023 9.29491 17.5536 8.99317 17.7291C8.69143 17.9045 8.34903 17.9979 8 18ZM14 15H2V14C2 13.7348 2.10536 13.4804 2.29289 13.2929C2.48043 13.1054 2.73478 13 3 13H13C13.2652 13 13.5196 13.1054 13.7071 13.2929C13.8946 13.4804 14 13.7348 14 14V15Z" fill="currentColor"></path>
-            </svg>
-            <div class="flex relative">
-              <!-- Todo -->
-               <div class="inline-flex relative -top-2 right-2 w-3 h-3 bg-green-500 rounded-full border-2 border-white"></div>
-              <!-- Red <div class="inline-flex relative -top-2 right-3 w-3 h-3 bg-red-500 rounded-full border-2 border-white"></div>  -->
+        </div>
+        <!-- dropdown settings & tools -->
+        <!-- notifications -->
+        <button id="dropdownNotificationButton" data-dropdown-toggle="dropdownNotification" class="inline-flex items-center text-sm font-medium text-center text-gray-500 focus:outline-none " type="button">
+          <svg class="h-5 w-5" viewBox="0 0 16 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M14 11.18V8C13.9986 6.58312 13.4958 5.21247 12.5806 4.13077C11.6655 3.04908 10.3971 2.32615 9 2.09V1C9 0.734784 8.89464 0.48043 8.70711 0.292893C8.51957 0.105357 8.26522 0 8 0C7.73478 0 7.48043 0.105357 7.29289 0.292893C7.10536 0.48043 7 0.734784 7 1V2.09C5.60294 2.32615 4.33452 3.04908 3.41939 4.13077C2.50425 5.21247 2.00144 6.58312 2 8V11.18C1.41645 11.3863 0.910998 11.7681 0.552938 12.2729C0.194879 12.7778 0.00173951 13.3811 0 14V16C0 16.2652 0.105357 16.5196 0.292893 16.7071C0.48043 16.8946 0.734784 17 1 17H4.14C4.37028 17.8474 4.873 18.5954 5.5706 19.1287C6.26819 19.6621 7.1219 19.951 8 19.951C8.8781 19.951 9.73181 19.6621 10.4294 19.1287C11.127 18.5954 11.6297 17.8474 11.86 17H15C15.2652 17 15.5196 16.8946 15.7071 16.7071C15.8946 16.5196 16 16.2652 16 16V14C15.9983 13.3811 15.8051 12.7778 15.4471 12.2729C15.089 11.7681 14.5835 11.3863 14 11.18ZM4 8C4 6.93913 4.42143 5.92172 5.17157 5.17157C5.92172 4.42143 6.93913 4 8 4C9.06087 4 10.0783 4.42143 10.8284 5.17157C11.5786 5.92172 12 6.93913 12 8V11H4V8ZM8 18C7.65097 17.9979 7.30857 17.9045 7.00683 17.7291C6.70509 17.5536 6.45451 17.3023 6.28 17H9.72C9.54549 17.3023 9.29491 17.5536 8.99317 17.7291C8.69143 17.9045 8.34903 17.9979 8 18ZM14 15H2V14C2 13.7348 2.10536 13.4804 2.29289 13.2929C2.48043 13.1054 2.73478 13 3 13H13C13.2652 13 13.5196 13.1054 13.7071 13.2929C13.8946 13.4804 14 13.7348 14 14V15Z" fill="currentColor"></path>
+          </svg>
+          <div class="flex relative">
+            <!-- Todo -->
+            <div class="inline-flex relative -top-2 right-2 w-3 h-3 bg-green-500 rounded-full border-2 border-white"></div>
+            <!-- Red <div class="inline-flex relative -top-2 right-3 w-3 h-3 bg-red-500 rounded-full border-2 border-white"></div>  --></div>
+        </button>
+        <!-- Dropdown menu -->
+        <div id="dropdownNotification" class="hidden z-50 w-full max-w-sm bg-white shadow rounded divide-y divide-gray-100 drop-shadow" aria-labelledby="dropdownNotificationButton">
+          <div class="block py-2 px-4 font-medium text-center text-gray-700 bg-gray-50 drop-shadow"> Notifications </div>
+          <div class="divide-y divide-gray-100">
+            {% for entry in notifications %} {% if entry[1] == 1 %}
+            <div class="flex py-3 px-4 hover:bg-gray-100">
+              <div class="flex-shrink-0"> <img class="w-11 h-11 rounded-full" src="/static/images/other/new_offer.png" alt="New Offer"> </div>
+              <div class="pl-3 w-full">
+                <div class="text-gray-500 text-sm mb-1.5"> <span class="font-semibold text-gray-900">
+                    NEW NETWORK OFFER</span>
+                  <br/> <span class="mt-2 mb-2 inline-flex px-2.5 py-1.5 text-xs font-small monospace text-center text-white bg-gray-900 rounded-lg hover:bg-gray-700 focus:ring-4 focus:outline-none focus:ring-gray-300">
+                  <a href="/offer/{{ entry[2].offer_id }}">{{ entry[2].offer_id|truncate(37, True) }}</a>
+                  </span></div>
+                <div class="text-xs text-blue-600">{{ entry[0] }}</div>
+              </div>
             </div>
-          </button>
-          <!-- Dropdown menu -->
-          <div id="dropdownNotification" class="hidden z-50 w-full max-w-sm bg-white shadow rounded divide-y divide-gray-100 drop-shadow" aria-labelledby="dropdownNotificationButton">
-            <div class="block py-2 px-4 font-medium text-center text-gray-700 bg-gray-50 drop-shadow"> Notifications </div>
-            <div class="divide-y divide-gray-100">
-              {% for entry in notifications %}
-              {% if entry[1] == 1 %}
-              <div class="flex py-3 px-4 hover:bg-gray-100">
-                <div class="flex-shrink-0"> <img class="w-11 h-11 rounded-full" src="/static/images/other/new_offer.png" alt="New Offer"> </div>
-                <div class="pl-3 w-full">
-                   <div class="text-gray-500 text-sm mb-1.5">
-                    <span class="font-semibold text-gray-900">
-                    NEW NETWORK OFFER</span><br/>
-                  <span class="mt-2 mb-2 inline-flex px-2.5 py-1.5 text-xs font-small monospace text-center text-white bg-gray-800 rounded-lg hover:bg-gray-700 focus:ring-4 focus:outline-none focus:ring-gray-300">
-                  <a href="/offer/{{ entry[2].offer_id }}">{{ entry[2].offer_id|truncate(42, True) }}</a>
-                  </span></div>
-                  <div class="text-xs text-blue-600">{{ entry[0] }}</div>
-                </div>
-              </div>
-              {% elif entry[1] == 2 %}
-              <div class="flex py-3 px-4 hover:bg-gray-100">
-                <div class="flex-shrink-0"> <img class="w-11 h-11 rounded-full" src="/static/images/other/bid_accepted.png" alt="New Accepted"> </div>
-                <div class="pl-3 w-full">
-
-                  <div class="text-gray-500 text-sm mb-1.5">
-                    <span class="font-semibold text-gray-900">
-                    <a href="/bid/{{ entry[2].bid_id }}">NEW BID</a> ON OFFER</span><br/>
-                    <span class="mt-2 mb-2 inline-flex px-2.5 py-1.5 text-xs font-small monospace text-center text-white bg-gray-800 rounded-lg hover:bg-gray-700 focus:ring-4 focus:outline-none focus:ring-gray-300">
-                      <a href="/offer/{{ entry[2].offer_id }}">{{ entry[2].offer_id|truncate(42, True) }}</a>
+            {% elif entry[1] == 2 %}
+            <div class="flex py-3 px-4 hover:bg-gray-100">
+              <div class="flex-shrink-0"> <img class="w-11 h-11 rounded-full" src="/static/images/other/bid_accepted.png" alt="New Accepted"> </div>
+              <div class="pl-3 w-full">
+                <div class="text-gray-500 text-sm mb-1.5"> <span class="font-semibold text-gray-900">
+                    <a href="/bid/{{ entry[2].bid_id }}">NEW BID</a> ON OFFER</span>
+                  <br/> <span class="mt-2 mb-2 inline-flex px-2.5 py-1.5 text-xs font-small monospace text-center text-white bg-gray-800 rounded-lg hover:bg-gray-700 focus:ring-4 focus:outline-none focus:ring-gray-300">
+                      <a href="/offer/{{ entry[2].offer_id }}">{{ entry[2].offer_id|truncate(37, True) }}</a>
                     </span></div>
-                  <div class="text-xs text-blue-600">{{ entry[0] }}</div>
-                </div>
+                <div class="text-xs text-blue-600">{{ entry[0] }}</div>
               </div>
-              {% elif entry[1] == 3 %}
-              <div class="flex py-3 px-4 hover:bg-gray-100">
-                <div class="flex-shrink-0"> <img class="w-11 h-11 rounded-full" src="/static/images/other/new_offer.png" alt="New Offer"> </div>
-                <div class="pl-3 w-full">
-                   <div class="text-gray-500 text-sm mb-1.5">
-                    <span class="font-semibold text-gray-900">
-                    BID ACCEPTED</span><br/>
-                  <span class="mt-2 mb-2 inline-flex px-2.5 py-1.5 text-xs font-small monospace text-center text-white bg-gray-800 rounded-lg hover:bg-gray-700 focus:ring-4 focus:outline-none focus:ring-gray-300">
-                  <a href="/bid/{{ entry[2].bid_id }}">{{ entry[2].bid_id|truncate(42, True) }}</a>
+            </div>
+            {% elif entry[1] == 3 %}
+            <div class="flex py-3 px-4 hover:bg-gray-100">
+              <div class="flex-shrink-0"> <img class="w-11 h-11 rounded-full" src="/static/images/other/new_offer.png" alt="New Offer"> </div>
+              <div class="pl-3 w-full">
+                <div class="text-gray-500 text-sm mb-1.5"> <span class="font-semibold text-gray-900">
+                    BID ACCEPTED</span>
+                  <br/> <span class="mt-2 mb-2 inline-flex px-2.5 py-1.5 text-xs font-small monospace text-center text-white bg-gray-800 rounded-lg hover:bg-gray-700 focus:ring-4 focus:outline-none focus:ring-gray-300">
+                  <a href="/bid/{{ entry[2].bid_id }}">{{ entry[2].bid_id|truncate(37, True) }}</a>
                   </span></div>
-                  <div class="text-xs text-blue-600">{{ entry[0] }}</div>
-                </div>
+                <div class="text-xs text-blue-600">{{ entry[0] }}</div>
               </div>
-               {% else %}
-              <div class="flex py-3 px-4 hover:bg-gray-100">
-                <div class="flex-shrink-0"> <img class="w-11 h-11 rounded-full" src="/static/images/other/new_offer.png" alt="New Offer"> </div>
-                <div class="pl-3 w-full">
-                   <div class="text-gray-500 text-sm mb-1.5">
-                    <span class="font-semibold text-gray-900">
-                    UNKNOWN EVENT</span><br/>
-                  <span class="mt-2 mb-2 inline-flex px-2.5 py-1.5 text-xs font-small monospace text-center text-white bg-gray-800 rounded-lg hover:bg-gray-700 focus:ring-4 focus:outline-none focus:ring-gray-300">
+            </div>
+            {% else %}
+            <div class="flex py-3 px-4 hover:bg-gray-100">
+              <div class="flex-shrink-0"> <img class="w-11 h-11 rounded-full" src="/static/images/other/new_offer.png" alt="New Offer"> </div>
+              <div class="pl-3 w-full">
+                <div class="text-gray-500 text-sm mb-1.5"> <span class="font-semibold text-gray-900">
+                    UNKNOWN EVENT</span>
+                  <br/> <span class="mt-2 mb-2 inline-flex px-2.5 py-1.5 text-xs font-small monospace text-center text-white bg-gray-800 rounded-lg hover:bg-gray-700 focus:ring-4 focus:outline-none focus:ring-gray-300">
                   {{ entry[1] }}
                   <div class="text-xs text-blue-600">{{ entry[0] }}</div>
                 </div>
@@ -282,159 +272,113 @@
                       <circle cx="7" cy="10" r="3" stroke="#2ad167"></circle>
                       <path data-cap="butt" d="M10,10a2,2,0,0,1,4,0" stroke="#2ad167"></path></g>
                   </svg>
-                  <span data-tooltip-target="tooltip-DEV" ></span> </div>   <div class="tooltip-arrow" data-popper-arrow></div>
-                  <div id="tooltip-DEV" role="tooltip" class="inline-block absolute invisible z-10 py-2 px-3 text-sm font-medium text-white bg-blue-500 rounded-lg shadow-sm opacity-0 transition-opacity duration-300 tooltip">
-                      <p>Debug mode: Active </p> {% if debug_ui_mode == true %} <p> Debug UI mode: Active </p> {% endif %}
-                  </div>
-              </li>
+                  <span data-tooltip-target="tooltip-DEV" ></span> </div>
+                <div class="tooltip-arrow" data-popper-arrow></div>
+                <div id="tooltip-DEV" role="tooltip" class="inline-block absolute invisible z-10 py-2 px-3 text-sm font-medium text-white bg-blue-500 rounded-lg shadow-sm opacity-0 transition-opacity duration-300 tooltip">
+                  <p>Debug mode: Active </p> {% if debug_ui_mode == true %}
+                  <p> Debug UI mode: Active </p> {% endif %} </div>
+                </li>
                 </ul>
-  <!-- dev mode icons on/off -->
+                <!-- dev mode icons on/off -->
                 {% endif %}
-
-            {% if use_tor_proxy == true %}
-  <!-- tor -->
-                        <ul class="xl:flex ml-5">
-                    <li>
-                      <a href="/tor">
+                {% if use_tor_proxy == true %}
+                <!-- tor -->
+                <ul class="xl:flex ml-5">
+                  <li>
+                    <a href="/tor">
                       <div data-tooltip-target="tooltip-TOR" class="flex items-center text-gray-50 hover:text-gray-100 text-sm">
                         <svg class="text-gray-500 w-5 h-5 mr-3" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
                           <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#AA70E4" stroke-linejoin="round">
                             <path d="M9,18.8A6.455,6.455,0,0,1,7,14,6.455,6.455,0,0,1,9,9.2" stroke="#AA70E4"></path>
                             <path d="M15,18.8A6.455,6.455,0,0,0,17,14a6.455,6.455,0,0,0-2-4.8" stroke="#AA70E4"></path>
-                             <path d="M14,2.256V1H10V2.256A3.949,3.949,0,0,1,7.658,5.891,8.979,8.979,0,0,0,2,14c0,4.971,4.477,9,10,9s10-4.029,10-9a8.978,8.978,0,0,0-5.658-8.109A3.95,3.95,0,0,1,14,2.256Z"></path>
-                           </g>
-                         </svg>
-                       </a>
-                        <span data-tooltip-target="tooltip-TOR" ></span> </div>   <div class="tooltip-arrow" data-popper-arrow></div>
-                        <div id="tooltip-TOR" role="tooltip" class="inline-block absolute invisible z-10 py-2 px-3 text-sm font-medium text-white bg-blue-500 rounded-lg shadow-sm opacity-0 transition-opacity duration-300 tooltip">
-                            Tor mode: Active{% if tor_established == true %}, Connected{% endif %}
-                        </div>
-                    </li>
-                      </ul>
-   <!-- tor -->
+                            <path d="M14,2.256V1H10V2.256A3.949,3.949,0,0,1,7.658,5.891,8.979,8.979,0,0,0,2,14c0,4.971,4.477,9,10,9s10-4.029,10-9a8.978,8.978,0,0,0-5.658-8.109A3.95,3.95,0,0,1,14,2.256Z"></path>
+                          </g>
+                        </svg>
+                    </a> <span data-tooltip-target="tooltip-TOR"></span> </div>
+                    <div class="tooltip-arrow" data-popper-arrow></div>
+                    <div id="tooltip-TOR" role="tooltip" class="inline-block absolute invisible z-10 py-2 px-3 text-sm font-medium text-white bg-blue-500 rounded-lg shadow-sm opacity-0 transition-opacity duration-300 tooltip"> Tor mode: Active {% if tor_established == true %}
+                      <br> Tor: Connected{% endif %} </div>
+                  </li>
+                </ul>
+                <!-- tor -->
               {% endif %}
-</div>
-
-
-<!-- connected & sync (todo) -->
-          <div class="flex ml-2 items-center text-gray-50 hover:text-gray-100 text-sm hidden">
-            <div class="flex-shrink-0 w-px h-10 bg-gray-600 ml-4 mr-5"></div>
-            <svg class="text-gray-500 w-5 h-5 mr-4" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
-              <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#0fe97f" stroke-linejoin="round">
-                <g class="nc-loop-ripple-24-icon-o">
-                  <circle cx="12" cy="12" r="11"></circle>
-                  <circle cx="12" cy="12" r="11" stroke="#0fe97f"></circle>
-                </g>
-                <style>
-                  .nc-loop-ripple-24-icon-o {
-                    --animation-duration: 2.2s
-                  }
-
-                  .nc-loop-ripple-24-icon-o * {
-                    transform-origin: 50% 50%;
-                    animation: nc-loop-ripple-anim var(--animation-duration) infinite cubic-bezier(.215, .61, .355, 1)
-                  }
-
-                  .nc-loop-ripple-24-icon-o:nth-child(2) {
-                    animation-delay: calc(var(--animation-duration)/-2)
-                  }
-
-                  @keyframes nc-loop-ripple-anim {
-                    0% {
-                      opacity: 1;
-                      transform: scale(.2)
-                    }
-                    100% {
-                      opacity: 0;
-                      transform: scale(1)
-                    }
-                  }
-                </style>
-              </g>
-            </svg>
-          </div>
-<!-- connected & sync (todo) -->
-
-
-        <div class="hidden xl:block"> </div>
-
-<!-- mobile menu -->
-        <div class="ml-auto flex xl:hidden">
-          <button class="navbar-burger flex items-center rounded focus:outline-none">
-            <svg class="text-white bg-blue-500 hover:bg-blue-600 block h-8 w-8 p-2 rounded" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
-              <title>Mobile Menu</title>
-              <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
-            </svg>
-          </button>
-        </div>
-<!-- mobile menu -->
-
-      </div>
-      <div class="hidden xl:block py-5 px-6 bg-gray-50 border-b">
-        <div class="flex items-center container flex flex-wrap items-center justify-between items-center mx-auto">
-          <ul class="flex items-center">
-            <li>
-              <a class="flex mr-10 items-center text-sm text-gray-500 hover:text-gray-600" href="/active">
-                <svg class="text-gray-100 w-5 h-5 ml-7 mr-2" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
-                  <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round">
-                    <circle data-cap="butt" cx="12" cy="12" r="3" stroke="#6b7280"></circle>
-                    <polyline points="16.071 5.341 21.763 6.927 21.034 1.13"></polyline>
-                    <path data-cap="butt" d="M1,12A11,11,0,0,1,21.763,6.927"></path>
-                    <polyline points="7.929 18.659 2.237 17.073 2.966 22.87"></polyline>
-                    <path data-cap="butt" d="M23,12A11,11,0,0,1,2.237,17.073"></path>
-                  </g>
-                </svg> <span>Swaps in Progress </span> <span class="inline-flex justify-center items-center text-xs font-semibold ml-3 mr-2 px-2.5 py-1 font-small text-white bg-blue-500 rounded-full">{{ summary.num_swapping }}</span> </a>
-            </li>
-            <div class="flex-shrink-0 w-px h-10 bg-gray-300 mr-10"></div>
-            <li>
-              <a class="flex mr-5 items-center text-sm text-gray-500 hover:text-gray-600" href="/sentoffers">
-                <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 24 24">
-                  <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round">
-                    <circle cx="5" cy="5" r="4"></circle>
-                    <circle cx="19" cy="19" r="4"></circle>
-                    <polyline data-cap="butt" points="13,5 21,5 21,11 " stroke="#6b7280"></polyline>
-                    <polyline data-cap="butt" points="11,19 3,19 3,13 " stroke="#6b7280"></polyline>
-                    <polyline points=" 16,2 13,5 16,8 " stroke="#6b7280"></polyline>
-                    <polyline points=" 8,16 11,19 8,22 " stroke="#6b7280"></polyline>
-                  </g>
-                </svg> <span>Your Offers</span> <span class="inline-flex justify-center items-center text-xs font-semibold ml-3 mr-2 px-2.5 py-1 font-small text-white bg-blue-500 rounded-full">{{ summary.num_sent_offers }}</span> </a>
-            </li>
-            <div class="flex-shrink-0 w-px h-10 bg-gray-300 ml-4 mr-10"></div>
-            <li>
-              <a class="flex mr-10 items-center text-sm text-gray-500 hover:text-gray-600" href="/availablebids">
-                <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
-                  <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round">
-                    <circle cx="12" cy="12" r="11"></circle>
-                    <polyline points=" 12,6 12,12 18,12 " stroke="#6b7280"></polyline>
-                  </g>
-                </svg> <span>Available Bids</span> <span class="inline-flex justify-center items-center text-xs font-semibold ml-3 mr-2 px-2.5 py-1 font-small text-white bg-blue-500 rounded-full">{{ summary.num_available_bids }}</span> </a>
-            </li>
-            <li>
-              <a class="flex mr-10 items-center text-sm text-gray-500 hover:text-gray-600" href="/receivedbids">
-                <svg class="text-gray-100 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
-                  <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round">
-                    <path d="M2,16v4a2,2,0,0,0,2,2H20a2,2,0,0,0,2-2V16"> </path>
-                    <line data-cap="butt" x1="12" y1="1" x2="12" y2="16" stroke="#6b7280"></line>
-                    <polyline points="7 11 12 16 17 11" stroke="#6b7280"></polyline>
-                  </g>
-                </svg> <span>Bids Received</span> <span class="inline-flex justify-center items-center text-xs font-semibold ml-3 mr-2 px-2.5 py-1 font-small text-white bg-blue-500 rounded-full">{{ summary.num_recv_bids }}</span> </a>
-            </li>
-            <li>
-              <a class="flex mr-10 items-center text-sm text-gray-500 hover:text-gray-600" href="/sentbids">
-                <svg class="text-gray-100 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
-                  <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round">
-                    <path d="M2,16v4a2,2,0,0,0,2,2H20a2,2,0,0,0,2-2V16"></path>
-                    <line data-cap="butt" x1="12" y1="17" x2="12" y2="2" stroke="#6b7280"></line>
-                    <polyline points="17 7 12 2 7 7" stroke="#6b7280"></polyline>
-                  </g>
-                </svg> <span>Bids Sent</span> <span class="inline-flex justify-center items-center text-xs font-semibold ml-3 mr-2 px-2.5 py-1 font-small text-white bg-blue-500 rounded-full">{{ summary.num_sent_bids }}</span> </a>
-            </li>
-          </ul>
-        </div>
-      </div>
+            </div>
+              <div class="hidden xl:block"> </div>
+              <!-- mobile menu -->
+              <div class="ml-auto flex xl:hidden">
+                <button class="navbar-burger flex items-center rounded focus:outline-none">
+                  <svg class="text-white bg-blue-500 hover:bg-blue-600 block h-8 w-8 p-2 rounded" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
+                    <title>Mobile Menu</title>
+                    <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
+                  </svg>
+                </button>
+              </div>
+              <!-- mobile menu -->
+            </div>
+            <div class="hidden xl:block py-5 px-6 bg-gray-50 border-b">
+              <div class="flex items-center container flex flex-wrap items-center justify-between items-center mx-auto">
+                <ul class="flex items-center">
+                  <li>
+                    <a class="flex mr-10 items-center text-sm text-gray-500 hover:text-gray-600" href="/active">
+                      <svg class="text-gray-100 w-5 h-5 ml-7 mr-2" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
+                        <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round">
+                          <circle data-cap="butt" cx="12" cy="12" r="3" stroke="#6b7280"></circle>
+                          <polyline points="16.071 5.341 21.763 6.927 21.034 1.13"></polyline>
+                          <path data-cap="butt" d="M1,12A11,11,0,0,1,21.763,6.927"></path>
+                          <polyline points="7.929 18.659 2.237 17.073 2.966 22.87"></polyline>
+                          <path data-cap="butt" d="M23,12A11,11,0,0,1,2.237,17.073"></path>
+                        </g>
+                      </svg> <span>Swaps in Progress </span> <span class="inline-flex justify-center items-center text-xs font-semibold ml-3 mr-2 px-2.5 py-1 font-small text-white bg-blue-500 rounded-full">{{ summary.num_swapping }}</span> </a>
+                  </li>
+                  <div class="flex-shrink-0 w-px h-10 bg-gray-300 mr-10"></div>
+                  <li>
+                    <a class="flex mr-5 items-center text-sm text-gray-500 hover:text-gray-600" href="/sentoffers">
+                      <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 24 24">
+                        <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round">
+                          <circle cx="5" cy="5" r="4"></circle>
+                          <circle cx="19" cy="19" r="4"></circle>
+                          <polyline data-cap="butt" points="13,5 21,5 21,11 " stroke="#6b7280"></polyline>
+                          <polyline data-cap="butt" points="11,19 3,19 3,13 " stroke="#6b7280"></polyline>
+                          <polyline points=" 16,2 13,5 16,8 " stroke="#6b7280"></polyline>
+                          <polyline points=" 8,16 11,19 8,22 " stroke="#6b7280"></polyline>
+                        </g>
+                      </svg> <span>Your Offers</span> <span class="inline-flex justify-center items-center text-xs font-semibold ml-3 mr-2 px-2.5 py-1 font-small text-white bg-blue-500 rounded-full">{{ summary.num_sent_offers }}</span> </a>
+                  </li>
+                  <div class="flex-shrink-0 w-px h-10 bg-gray-300 ml-4 mr-10"></div>
+                  <li>
+                    <a class="flex mr-10 items-center text-sm text-gray-500 hover:text-gray-600" href="/availablebids">
+                      <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
+                        <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round">
+                          <circle cx="12" cy="12" r="11"></circle>
+                          <polyline points=" 12,6 12,12 18,12 " stroke="#6b7280"></polyline>
+                        </g>
+                      </svg> <span>Available Bids</span> <span class="inline-flex justify-center items-center text-xs font-semibold ml-3 mr-2 px-2.5 py-1 font-small text-white bg-blue-500 rounded-full">{{ summary.num_available_bids }}</span> </a>
+                  </li>
+                  <li>
+                    <a class="flex mr-10 items-center text-sm text-gray-500 hover:text-gray-600" href="/receivedbids">
+                      <svg class="text-gray-100 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
+                        <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round">
+                          <path d="M2,16v4a2,2,0,0,0,2,2H20a2,2,0,0,0,2-2V16"> </path>
+                          <line data-cap="butt" x1="12" y1="1" x2="12" y2="16" stroke="#6b7280"></line>
+                          <polyline points="7 11 12 16 17 11" stroke="#6b7280"></polyline>
+                        </g>
+                      </svg> <span>Bids Received</span> <span class="inline-flex justify-center items-center text-xs font-semibold ml-3 mr-2 px-2.5 py-1 font-small text-white bg-blue-500 rounded-full">{{ summary.num_recv_bids }}</span> </a>
+                  </li>
+                  <li>
+                    <a class="flex mr-10 items-center text-sm text-gray-500 hover:text-gray-600" href="/sentbids">
+                      <svg class="text-gray-100 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
+                        <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round">
+                          <path d="M2,16v4a2,2,0,0,0,2,2H20a2,2,0,0,0,2-2V16"></path>
+                          <line data-cap="butt" x1="12" y1="17" x2="12" y2="2" stroke="#6b7280"></line>
+                          <polyline points="17 7 12 2 7 7" stroke="#6b7280"></polyline>
+                        </g>
+                      </svg> <span>Bids Sent</span> <span class="inline-flex justify-center items-center text-xs font-semibold ml-3 mr-2 px-2.5 py-1 font-small text-white bg-blue-500 rounded-full">{{ summary.num_sent_bids }}</span> </a>
+                  </li>
+                </ul>
+              </div>
+            </div>
     </nav>
-
-<!-- mobile sidebar -->
+    <!-- mobile sidebar -->
     <div class="hidden navbar-menu fixed top-0 left-0 bottom-0 w-3/4 lg:w-80 sm:max-w-xs z-50">
       <div class="navbar-backdrop fixed inset-0 bg-gray-800 opacity-10"></div>
       <nav class="relative flex flex-col pt-6 pb-8 h-full w-full bg-gray-800 overflow-y-auto">
@@ -546,10 +490,10 @@
                 </span> <span>Bids Sent</span> <span class="inline-flex justify-center items-center text-xs font-semibold ml-3 mr-2 px-2.5 py-1 font-small text-white bg-blue-500 rounded-full">{{ summary.num_sent_bids }}</span> </a>
             </li>
           </ul>
-            <h3 class="mb-2 text-xs uppercase text-gray-500 font-medium mt-5">Settings</h3>
-            <ul class="text-sm font-medium">
-              <li>
-                <a class="flex items-center pl-3 py-3 pr-2 text-gray-50 hover:bg-gray-900 rounded" href="/settings"> <span class="inline-block mr-3">
+          <h3 class="mb-2 text-xs uppercase text-gray-500 font-medium mt-5">Settings</h3>
+          <ul class="text-sm font-medium">
+            <li>
+              <a class="flex items-center pl-3 py-3 pr-2 text-gray-50 hover:bg-gray-900 rounded" href="/settings"> <span class="inline-block mr-3">
                   <svg class="text-gray-500 w-5 h-5 mr-3" xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 24 24">
                     <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round">
                       <circle cx="12" cy="12" r="3" stroke="#6b7280"></circle>
@@ -557,8 +501,8 @@
                     </g>
                   </svg>
                   </span> <span>Settings</span> </a>
-              </li>
-              {% if debug_mode == true %}
+            </li>
+            {% if debug_mode == true %}
             <li>
               <a class="flex items-center pl-3 py-3 pr-4 text-gray-50 hover:bg-gray-900 rounded" href="/rpc"> <span class="inline-block mr-3">
                 <svg class="text-gray-500 w-5 h-5 mr-3" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
@@ -574,8 +518,8 @@
             </li>
             {% endif %}
             {% if debug_mode == true %}
-          <li>
-            <a class="flex items-center pl-3 py-3 pr-4 text-gray-50 hover:bg-gray-900 rounded" href="/debug"> <span class="inline-block mr-3">
+            <li>
+              <a class="flex items-center pl-3 py-3 pr-4 text-gray-50 hover:bg-gray-900 rounded" href="/debug"> <span class="inline-block mr-3">
               <svg class="text-gray-500 w-5 h-5 mr-3" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
               <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round" class="nc-icon-wrapper">
               <path data-cap="butt" d="M5.29,10H4A3,3,0,0,1,1,7V6" stroke="#6b7280"></path>
@@ -585,8 +529,8 @@
               <path data-cap="butt" d="M18.71,18H20a3,3,0,0,1,3,3v1" stroke="#6b7280"></path> <line x1="19" y1="14" x2="23" y2="14" stroke="#6b7280"></line>
               <path d="M19,16A7,7,0,0,1,5,16V12a7,7,0,0,1,14,0Z"></path></g></svg>
             </span> <span>Debug</span> </a>
-          </li>
-          {% endif %}
+            </li>
+            {% endif %}
             {% if debug_mode == true %}
             <li>
               <a class="flex items-center pl-3 py-3 pr-4 text-gray-50 hover:bg-gray-900 rounded" href="/explorers"> <span class="inline-block mr-3">
@@ -653,8 +597,8 @@
                  </svg>
               </span> <span>TOR</span> </a>
             </li>
-            {% endif %}
-          </ul>
+          {% endif %}
+        </ul>
           <div class="pt-8 text-sm font-medium">
             <a class="flex items-center pl-3 py-3 pr-4 text-gray-50 hover:bg-gray-900 rounded" href="/shutdown/{{ shutdown_token }}"> <span class="inline-block mr-3">
               <svg class="text-gray-500 w-5 h-5 mr-3" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
@@ -670,37 +614,35 @@
         </div>
       </nav>
     </div>
-<!-- mobile sidebar -->
-  </section>
-
+    <!-- mobile sidebar -->
+  </section> 
   {% if ws_url %}
   <script>
-  var ws = new WebSocket("{{ ws_url }}"),
+    var ws = new WebSocket("{{ ws_url }}"),
       floating_div = document.createElement('div');
-      floating_div.classList.add('floatright');
-      messages = document.createElement('ul');
-      messages.setAttribute('id', 'ul_updates');
-  ws.onmessage = function (event) {
+    floating_div.classList.add('floatright');
+    messages = document.createElement('ul');
+    messages.setAttribute('id', 'ul_updates');
+    ws.onmessage = function(event) {
       let json = JSON.parse(event.data);
-
       let event_message = 'Unknown event';
       if (json['event'] == 'new_offer') {
-          event_message = '<div class="p-4 w-full mt-5 text-gray-500 bg-white rounded-lg shadow"> <div class="flex"> <div class="text-sm font-normal"> <div class="mb-1 text-sm font-semibold text-gray-900"> <a href=/offer/' + json['offer_id'] + '>New offer</a></div></div></div></div>';
-      } else
-      if (json['event'] == 'new_bid') {
-          event_message = '<div class="p-4 w-full mt-5 text-gray-500 bg-white rounded-lg shadow"> <div class="flex"> <div class="text-sm font-normal"> <div class="mb-1 text-sm font-semibold text-gray-900"> <a href=/bid/' + json['bid_id'] + '>New bid</a> on offer</div><div class="mt-2 mb-2 inline-flex px-2.5 py-1.5 text-xs font-small monospace text-center text-white bg-gray-800 rounded-lg hover:bg-gray-700 focus:ring-4 focus:outline-none focus:ring-gray-300" href=/offer/' + json['offer_id'] + '>' + json['offer_id'] + '</a></div></div>';
-      } else
-      if (json['event'] == 'bid_accepted') {
-          event_message = '<div class="p-4 w-full mt-5 text-gray-500 bg-white rounded-lg shadow"><div class="flex"><div class="text-sm font-normal"><div class="mb-1 text-sm font-semibold text-gray-900"><a href=/bid/' + json['bid_id'] + '>Bid accepted</a></div></div></div></div>';
+        event_message = '<div class="p-4 w-full mt-5 text-gray-500 bg-white rounded-lg shadow"> <div class="flex"> <div class="text-sm font-normal"> <div class="mb-1 text-sm font-semibold text-gray-900"> <a href=/offer/' + json['offer_id'] + '>New offer</a></div></div></div></div>';
+      }
+      else
+      if (json['event'] == 'new_bid') {
+        event_message = '<div class="p-4 w-full mt-5 text-gray-500 bg-white rounded-lg shadow"> <div class="flex"> <div class="text-sm font-normal"> <div class="mb-1 text-sm font-semibold text-gray-900"> <a href=/bid/' + json['bid_id'] + '>New bid</a> on offer</div><div class="mt-2 mb-2 inline-flex px-2.5 py-1.5 text-xs font-small monospace text-center text-white bg-gray-800 rounded-lg hover:bg-gray-700 focus:ring-4 focus:outline-none focus:ring-gray-300" href=/offer/' + json['offer_id'] + '>' + json['offer_id'] + '</a></div></div>';
+      }
+      else
+      if (json['event'] == 'bid_accepted') {
+        event_message = '<div class="p-4 w-full mt-5 text-gray-500 bg-white rounded-lg shadow"><div class="flex"><div class="text-sm font-normal"><div class="mb-1 text-sm font-semibold text-gray-900"><a href=/bid/' + json['bid_id'] + '>Bid accepted</a></div></div></div></div>';
       }
-
       let messages = document.getElementById('ul_updates'),
-      message = document.createElement('li');
-
+        message = document.createElement('li');
       message.innerHTML = event_message;
       messages.appendChild(message);
-  };
-  floating_div.appendChild(messages);
-  document.body.appendChild(floating_div);
- </script>
-  {% endif %}
+    };
+    floating_div.appendChild(messages);
+    document.body.appendChild(floating_div);
+  </script>
+  {% endif %}
\ No newline at end of file
diff --git a/basicswap/templates/identity.html b/basicswap/templates/identity.html
index 4cd59af..0cad1e6 100644
--- a/basicswap/templates/identity.html
+++ b/basicswap/templates/identity.html
@@ -1,5 +1,4 @@
 {% include 'header.html' %}
-
 <div class="container mx-auto">
   <section class="bg-white p-5 mt-5">
     <div class="flex flex-wrap items-center -m-2">
@@ -26,13 +25,9 @@
       </div>
     </div>
   </section>
-
   <section class="py-4">
     <div class="container px-4 mx-auto">
-      <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden">
-        <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt="">
-        <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt="">
-        <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
+      <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden"> <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
         <div class="relative z-20 flex flex-wrap items-center -m-3">
           <div class="w-full md:w-1/2 p-3">
             <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">Identity</h2>
@@ -42,33 +37,28 @@
       </div>
     </div>
   </section>
-
-{% include 'inc_messages.html' %}
-
+  {% include 'inc_messages.html' %}
   <section class="bg-white">
     <div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden bg-white ">
       <div class="pb-6 border-coolGray-100">
         <div class="flex flex-wrap items-center justify-between -m-2">
           <div class="w-full pt-2">
-
             <div class="container px-0 mx-auto mt-5">
               <div class="overflow-x-auto relative border sm:rounded-lg">
-
                 <form method="post">
-
                   <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
-
                     <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300">
                       <tr>
                         <th scope="col" class="py-3 px-6">Item</th>
                         <th scope="col">Data </th>
                       </tr>
                     </thead>
-
                     {% if data.show_edit_form %}
                     <tr>
                       <td class="py-4 px-6 bold">Label</td>
-                      <td class="py-4"><input class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" type="text" id="label" name="label" value="{{ data.label }}"></td>
+                      <td class="py-4">
+                        <input class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" type="text" id="label" name="label" value="{{ data.label }}">
+                      </td>
                     </tr>
                     {% else %}
                     <tr>
@@ -76,7 +66,6 @@
                       <td class="py-4">{{ data.label }}</td>
                     </tr>
                     {% endif %}
-
                     <tr class="bg-white border-t hover:bg-gray-50">
                       <td class="py-4 px-6 bold w-96">Successful Sent Bids</td>
                       <td>{{ data.num_sent_bids_successful }}</td>
@@ -101,54 +90,33 @@
                       <td class="py-4 px-6 bold">Failed Received Bids</td>
                       <td>{{ data.num_recv_bids_failed }}</td>
                     </tr>
-
                   </table>
               </div>
             </div>
-
             <div class="p-6 pt-10 bg-white bg-opacity-60 rounded-b-md">
               <div class="w-full md:w-0/12">
                 <div class="flex flex-wrap justify-end -m-1.5">
-
-                  {% if data.show_edit_form  %}
-
+                  {% if data.show_edit_form %}
                   <div class="w-full md:w-auto p-1.5 ml-2">
-                    <button name="apply" value="Apply" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
-                      <span>Apply</span> </button>
+                    <button name="apply" value="Apply" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none"> <span>Apply</span> </button>
                   </div>
-
                   <div class="w-full md:w-auto p-1.5 ml-2">
-                    <button name="cancel" value="Cancel" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none">
-                      <span>Cancel</span> </button>
+                    <button name="cancel" value="Cancel" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none"> <span>Cancel</span> </button>
                   </div>
-
                   {% else %}
                   <div class="w-full md:w-auto p-1.5 ml-2">
-                    <button name="edit" value="edit" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
-                      <span>Edit</span> </button>
+                    <button name="edit" value="edit" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none"> <span>Edit</span> </button>
                   </div>
-
-                  {% endif %}
-
-                </div>
+                {% endif %} </div>
               </div>
             </div>
-
-            <input type="hidden" name="formid" value="{{ form_id }}">
-
-            </form>
-
+            <input type="hidden" name="formid" value="{{ form_id }}"> </form>
           </div>
         </div>
       </div>
     </div>
-
   </section>
-
-
-</div>
-{% include 'footer.html' %}
 </div>
+{% include 'footer.html' %} </div>
 </body>
-
-</html>
+</html>
\ No newline at end of file
diff --git a/basicswap/templates/inc_messages.html b/basicswap/templates/inc_messages.html
index db35f19..8454fd2 100644
--- a/basicswap/templates/inc_messages.html
+++ b/basicswap/templates/inc_messages.html
@@ -1,5 +1,4 @@
 {% for m in messages %}
-
 <section class="py-4" id="messages_{{ m[0] }}" role="alert">
   <div class="container px-4 mx-auto">
     <div class="p-6 bg-green-100 border border-green-200 rounded-md">
@@ -12,25 +11,22 @@
               </svg>
             </div>
             <div class="flex-1 p-1">
-              <h3 class="font-medium text-sm text-green-900">{{ m[1] }}</h3>
-            </div>
+              <h3 class="font-medium text-sm text-green-900">{{ m[1] }}</h3> </div>
           </div>
         </div>
         <div class="w-auto p-2">
-            <button type="button" class="ml-auto bg-green-100 text-green-500 rounded-lg focus:ring-0 focus:ring-green-400 p-1.5 hover:bg-green-200 inline-flex h-8 w-8 focus:outline-none" data-dismiss-target="#messages_{{ m[0] }}" aria-label="Close">
-            <span class="sr-only">Close</span>
-            <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+          <button type="button" class="ml-auto bg-green-100 text-green-500 rounded-lg focus:ring-0 focus:ring-green-400 p-1.5 hover:bg-green-200 inline-flex h-8 w-8 focus:outline-none" data-dismiss-target="#messages_{{ m[0] }}" aria-label="Close"> <span class="sr-only">Close</span>
+            <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+              <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
+            </svg>
           </button>
         </div>
       </div>
     </div>
   </div>
-</section>
-
-{% endfor %}
-
+</section> 
+{% endfor %} 
 {% for m in err_messages %}
-
 <section class="py-4" id="err_messages_{{ m[0] }}" role="alert">
   <div class="container px-4 mx-auto">
     <div class="p-6 bg-red-100 border border-red-200 rounded-md">
@@ -45,20 +41,18 @@
             <div class="flex-1 p-1">
               <h3 class="font-medium text-sm text-red-900 error_msg">
                 <p class="error_msg">Error: {{ m[1] }}</p>
-              </h3>
-            </div>
+              </h3> </div>
           </div>
         </div>
         <div class="w-auto p-2">
-          <button type="button" class="ml-auto bg-red-100 text-red-500 rounded-lg focus:ring-0 focus:ring-red-400 p-1.5 hover:bg-red-200 inline-flex h-8 w-8 focus:outline-none" data-dismiss-target="#err_messages_{{ m[0] }}" aria-label="Close">
-            <span class="sr-only">Close</span>
-            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
+          <button type="button" class="ml-auto bg-red-100 text-red-500 rounded-lg focus:ring-0 focus:ring-red-400 p-1.5 hover:bg-red-200 inline-flex h-8 w-8 focus:outline-none" data-dismiss-target="#err_messages_{{ m[0] }}" aria-label="Close"> <span class="sr-only">Close</span>
+            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+              <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
             </svg>
           </button>
         </div>
       </div>
     </div>
   </div>
-</section>
-
-{% endfor %}
+</section> 
+{% endfor %}
\ No newline at end of file
diff --git a/basicswap/templates/index.html b/basicswap/templates/index.html
index 805583a..ed55cb3 100644
--- a/basicswap/templates/index.html
+++ b/basicswap/templates/index.html
@@ -1,40 +1,35 @@
 {% include 'header.html' %}
 <div class="container mx-auto">
-	<section class="py-24 bg-white">
-		<div class="container px-4 mx-auto">
-			<div class="text-center">
-				<div class="inline-block mb-6 px-3 py-1 font-semibold bg-blue-100 rounded-full">
-					<div class="flex flex-wrap items-center-m-1">
-						<div class="w-auto p-1"><a class="text-sm" href="">BasicSwap version: {{ version }}</a></div>
-					</div>
-				</div>
-				<h3 class="mb-10 mx-auto text-3xl md:text-4xl leading-tight text-coolGray-900 font-bold tracking-tighter max-w-5xl">Welcome to BasicSwap DEX</h3>
-				<div class="relative mb-10 mx-auto max-w-max">
-					<img class="absolute top-1/2 transform -translate-y-1/2 w-1/2 md:w-auto text-yellow-400" src="/static/images/elements/circle-violet.svg" alt="">
-					<img class="absolute top-1/2 right-0 transform -translate-y-1/2 w-1/4 md:w-auto text-blue-500" src="/static/images/elements/dots-blue.svg" alt="">
-					<img class="absolute p-7 -mt-1 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 w-10/12 z-20" src="/static/images/gfx/dashboard.png" alt="">
-					<img class="relative z-10" src="/static/images/gfx/macbook.png" alt="">
-				</div>
-				<p class="mb-6 mx-auto text-lg md:text-xl text-coolGray-500 font-medium max-w-4xl">Swap cryptocurrencies in a distributed trading environment with <b>no restrictions</b> and <b>no fees.</b></p>
-				<div class="p-6 pt-10 bg-white bg-opacity-60 rounded-b-md">
-					<div class="w-full md:w-0/12">
-						<div class="flex flex-wrap justify-center -m-1.5">
-							<div class="w-full md:w-auto py-1 md:py-0 md:mr-6">
-								<button name="" value="Apply" type="submit" class="text-center justify-center md:text-lg w-full md:text-lg flex flex-wrap py-3 px-4 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none"> <span><a href="/wallets">Your Wallets</a></span> </button>
-							</div>
-							<div class="w-full md:w-auto py-1 md:py-0 md:mr-6">
-								<button name="" value="Apply" type="submit" class="text-center justify-center md:text-lg w-full md:text-lg flex flex-wrap py-3 px-4 text-coolGray-800 font-medium text-sm bg-white hover:bg-coolGray-100 border border-coolGray-200 rounded-md shadow-button focus:ring-0 focus:outline-none"> <span><a href="/offers">Start Trading</a></span> </button>
-							</div>
-							<div class="w-full md:w-auto py-1 md:py-0 md:mr-6">
-								<button name="" value="Apply" type="submit" class="text-center justify-center md:text-lg w-full md:text-lg flex flex-wrap py-3 px-4 text-coolGray-800 font-medium text-sm bg-white hover:bg-coolGray-100 border border-coolGray-200 rounded-md shadow-button focus:ring-0 focus:outline-none"> <span><a href="https://academy.particl.io/en/latest/faq/get_support.html" target="_blank">Help (Academy)</a></span> </button>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-	</section>
+  <section class="py-24 bg-white">
+    <div class="container px-4 mx-auto">
+      <div class="text-center">
+        <div class="inline-block mb-6 px-3 py-1 font-semibold bg-blue-100 rounded-full">
+          <div class="flex flex-wrap items-center-m-1">
+            <div class="w-auto p-1"><a class="text-sm" href="">BasicSwap version: {{ version }}</a></div>
+          </div>
+        </div>
+        <h3 class="mb-10 mx-auto text-3xl md:text-4xl leading-tight text-coolGray-900 font-bold tracking-tighter max-w-5xl">Welcome to BasicSwap DEX</h3>
+        <div class="relative mb-10 mx-auto max-w-max"> <img class="absolute top-1/2 transform -translate-y-1/2 w-1/2 md:w-auto text-yellow-400" src="/static/images/elements/circle-violet.svg" alt=""> <img class="absolute top-1/2 right-0 transform -translate-y-1/2 w-1/4 md:w-auto text-blue-500" src="/static/images/elements/dots-blue.svg" alt=""> <img class="absolute p-7 -mt-1 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 w-10/12 z-20" src="/static/images/gfx/dashboard.png" alt=""> <img class="relative z-10" src="/static/images/gfx/macbook.png" alt=""> </div>
+        <p class="mb-6 mx-auto text-lg md:text-xl text-coolGray-500 font-medium max-w-4xl">Swap cryptocurrencies in a distributed trading environment with <b>no restrictions</b> and <b>no fees.</b></p>
+        <div class="p-6 pt-10 bg-white bg-opacity-60 rounded-b-md">
+          <div class="w-full md:w-0/12">
+            <div class="flex flex-wrap justify-center -m-1.5">
+              <div class="w-full md:w-auto py-1 md:py-0 md:mr-6">
+                <button name="" value="Apply" type="submit" class="text-center justify-center md:text-lg w-full md:text-lg flex flex-wrap py-3 px-4 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none"> <span><a href="/wallets">Your Wallets</a></span> </button>
+              </div>
+              <div class="w-full md:w-auto py-1 md:py-0 md:mr-6">
+                <button name="" value="Apply" type="submit" class="text-center justify-center md:text-lg w-full md:text-lg flex flex-wrap py-3 px-4 text-coolGray-800 font-medium text-sm bg-white hover:bg-coolGray-100 border border-coolGray-200 rounded-md shadow-button focus:ring-0 focus:outline-none"> <span><a href="/offers">Start Trading</a></span> </button>
+              </div>
+              <div class="w-full md:w-auto py-1 md:py-0 md:mr-6">
+                <button name="" value="Apply" type="submit" class="text-center justify-center md:text-lg w-full md:text-lg flex flex-wrap py-3 px-4 text-coolGray-800 font-medium text-sm bg-white hover:bg-coolGray-100 border border-coolGray-200 rounded-md shadow-button focus:ring-0 focus:outline-none"> <span><a href="https://academy.particl.io/en/latest/faq/get_support.html" target="_blank">Help (Academy)</a></span> </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
 </div>
 {% include 'footer.html' %}
 </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/basicswap/templates/info.html b/basicswap/templates/info.html
index 3760de7..cec7c3e 100644
--- a/basicswap/templates/info.html
+++ b/basicswap/templates/info.html
@@ -1,11 +1,16 @@
-<!DOCTYPE html><html lang="en"><head>
-<meta charset="UTF-8">
-<link rel=icon sizes="32x32" type="image/png" href="/static/images/favicon-32.png">
-<title>{{ title }}</title>
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <link rel=icon sizes="32x32" type="image/png" href="/static/images/favicon-32.png">
+  <title>{{ title }}</title>
 </head>
+
 <body>
-<h2>{{ title_str }}</h2>
-<p>Info: {{ message_str }}</p>
-<p><a href="/">home</a></p>
+  <h2>{{ title_str }}</h2>
+  <p>Info: {{ message_str }}</p>
+  <p><a href="/">home</a></p>
 </body>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/basicswap/templates/offer.html b/basicswap/templates/offer.html
index e2a3c16..8af6767 100644
--- a/basicswap/templates/offer.html
+++ b/basicswap/templates/offer.html
@@ -1,5 +1,4 @@
 {% include 'header.html' %}
-
 <div class="container mx-auto">
   <section class="bg-white p-5 mt-5">
     <div class="flex flex-wrap items-center -m-2">
@@ -26,269 +25,272 @@
       </div>
     </div>
   </section>
-
   <section class="py-4">
     <div class="container px-4 mx-auto">
-      <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden">
-        <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt="">
-        <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt="">
-        <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
+      <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden"> <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
         <div class="relative z-20 flex flex-wrap items-center -m-3">
           <div class="w-full md:w-1/2 p-3">
             <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">Offer (normal)</h2>
             <p class="font-semibold text-coolGray-200">Offer ID: {{ offer_id }}</p>
           </div>
-          <div class="w-full md:w-1/2 p-3">
-            {% if refresh %}
-            <a id="refresh" href=/offer/{{ offer_id }}><button class="block md:ml-auto px-5 py-3 font-medium text-lcg text-white bg-blue-500 hover:bg-blue-600 rounded-md focus:ring-0 focus:outline-none">Refresh {{ refresh }} seconds</button></a>
+          <div class="w-full md:w-1/2 p-3"> {% if refresh %}
+            <a id="refresh" href=/offer/{{ offer_id }}>
+              <button class="block md:ml-auto px-5 py-3 font-medium text-lcg text-white bg-blue-500 hover:bg-blue-600 rounded-md focus:ring-0 focus:outline-none">Refresh {{ refresh }} seconds</button>
+            </a>
             {% else %}
-            <a id="refresh" href=/offer/{{ offer_id }}><button class="block md:ml-auto px-5 py-3 font-medium text-lcg text-white bg-blue-500 hover:bg-blue-600 rounded-md focus:ring-0 focus:outline-none">Refresh</button></a>
-            {% endif %}
+            <a id="refresh" href=/offer/{{ offer_id }}>
+              <button class="block md:ml-auto px-5 py-3 font-medium text-lcg text-white bg-blue-500 hover:bg-blue-600 rounded-md focus:ring-0 focus:outline-none">Refresh</button>
+            </a>
+          {% endif %} </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  {% include 'inc_messages.html' %} 
+  {% if sent_bid_id %}
+  <section class="py-4">
+    <div class="container px-4 mx-auto">
+      <div class="p-6 bg-green-100 border border-green-200 rounded-md">
+        <div class="flex flex-wrap justify-between items-center -m-2">
+          <div class="flex-1 p-2">
+            <div class="flex flex-wrap -m-1">
+              <div class="w-auto p-1">
+                <svg class="relative top-0.5" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M12.4732 4.80667C12.4112 4.74418 12.3375 4.69458 12.2563 4.66074C12.175 4.62689 12.0879 4.60947 11.9999 4.60947C11.9119 4.60947 11.8247 4.62689 11.7435 4.66074C11.6623 4.69458 11.5885 4.74418 11.5266 4.80667L6.55989 9.78L4.47322 7.68667C4.40887 7.62451 4.33291 7.57563 4.24967 7.54283C4.16644 7.51003 4.07755 7.49394 3.9881 7.49549C3.89865 7.49703 3.81037 7.51619 3.72832 7.55185C3.64627 7.58751 3.57204 7.63898 3.50989 7.70333C3.44773 7.76768 3.39885 7.84364 3.36605 7.92688C3.33324 8.01011 3.31716 8.099 3.31871 8.18845C3.32025 8.2779 3.3394 8.36618 3.37507 8.44823C3.41073 8.53028 3.4622 8.60451 3.52655 8.66667L6.08655 11.2267C6.14853 11.2892 6.22226 11.3387 6.3035 11.3726C6.38474 11.4064 6.47188 11.4239 6.55989 11.4239C6.64789 11.4239 6.73503 11.4064 6.81627 11.3726C6.89751 11.3387 6.97124 11.2892 7.03322 11.2267L12.4732 5.78667C12.5409 5.72424 12.5949 5.64847 12.6318 5.56414C12.6688 5.4798 12.6878 5.38873 12.6878 5.29667C12.6878 5.2046 12.6688 5.11353 12.6318 5.02919C12.5949 4.94486 12.5409 4.86909 12.4732 4.80667Z" fill="#2AD168"></path>
+                </svg>
+              </div>
+              <div class="flex-1 p-1">
+                <h3 class="font-medium text-sm text-green-900"><a href="/bid/{{ sent_bid_id }}">Sent Bid {{ sent_bid_id }}</a></h3> </div>
+            </div>
+          </div>
+          <div class="w-auto p-2">
+            <a href="#">
+              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M8.94004 8L13.14 3.80667C13.2656 3.68113 13.3361 3.51087 13.3361 3.33333C13.3361 3.1558 13.2656 2.98554 13.14 2.86C13.0145 2.73447 12.8442 2.66394 12.6667 2.66394C12.4892 2.66394 12.3189 2.73447 12.1934 2.86L8.00004 7.06L3.80671 2.86C3.68117 2.73447 3.51091 2.66394 3.33337 2.66394C3.15584 2.66394 2.98558 2.73447 2.86004 2.86C2.7345 2.98554 2.66398 3.1558 2.66398 3.33333C2.66398 3.51087 2.7345 3.68113 2.86004 3.80667L7.06004 8L2.86004 12.1933C2.79756 12.2553 2.74796 12.329 2.71411 12.4103C2.68027 12.4915 2.66284 12.5787 2.66284 12.6667C2.66284 12.7547 2.68027 12.8418 2.71411 12.9231C2.74796 13.0043 2.79756 13.078 2.86004 13.14C2.92202 13.2025 2.99575 13.2521 3.07699 13.2859C3.15823 13.3198 3.24537 13.3372 3.33337 13.3372C3.42138 13.3372 3.50852 13.3198 3.58976 13.2859C3.671 13.2521 3.74473 13.2025 3.80671 13.14L8.00004 8.94L12.1934 13.14C12.2554 13.2025 12.3291 13.2521 12.4103 13.2859C12.4916 13.3198 12.5787 13.3372 12.6667 13.3372C12.7547 13.3372 12.8419 13.3198 12.9231 13.2859C13.0043 13.2521 13.0781 13.2025 13.14 13.14C13.2025 13.078 13.2521 13.0043 13.286 12.9231C13.3198 12.8418 13.3372 12.7547 13.3372 12.6667C13.3372 12.5787 13.3198 12.4915 13.286 12.4103C13.2521 12.329 13.2025 12.2553 13.14 12.1933L8.94004 8Z" fill="#156633"></path>
+              </svg>
+            </a>
           </div>
         </div>
       </div>
     </div>
   </section>
-
-{% include 'inc_messages.html' %}
-
-{% if sent_bid_id %}
-<section class="py-4">
- <div class="container px-4 mx-auto">
-   <div class="p-6 bg-green-100 border border-green-200 rounded-md">
-     <div class="flex flex-wrap justify-between items-center -m-2">
-       <div class="flex-1 p-2">
-         <div class="flex flex-wrap -m-1">
-           <div class="w-auto p-1">
-             <svg class="relative top-0.5" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-               <path d="M12.4732 4.80667C12.4112 4.74418 12.3375 4.69458 12.2563 4.66074C12.175 4.62689 12.0879 4.60947 11.9999 4.60947C11.9119 4.60947 11.8247 4.62689 11.7435 4.66074C11.6623 4.69458 11.5885 4.74418 11.5266 4.80667L6.55989 9.78L4.47322 7.68667C4.40887 7.62451 4.33291 7.57563 4.24967 7.54283C4.16644 7.51003 4.07755 7.49394 3.9881 7.49549C3.89865 7.49703 3.81037 7.51619 3.72832 7.55185C3.64627 7.58751 3.57204 7.63898 3.50989 7.70333C3.44773 7.76768 3.39885 7.84364 3.36605 7.92688C3.33324 8.01011 3.31716 8.099 3.31871 8.18845C3.32025 8.2779 3.3394 8.36618 3.37507 8.44823C3.41073 8.53028 3.4622 8.60451 3.52655 8.66667L6.08655 11.2267C6.14853 11.2892 6.22226 11.3387 6.3035 11.3726C6.38474 11.4064 6.47188 11.4239 6.55989 11.4239C6.64789 11.4239 6.73503 11.4064 6.81627 11.3726C6.89751 11.3387 6.97124 11.2892 7.03322 11.2267L12.4732 5.78667C12.5409 5.72424 12.5949 5.64847 12.6318 5.56414C12.6688 5.4798 12.6878 5.38873 12.6878 5.29667C12.6878 5.2046 12.6688 5.11353 12.6318 5.02919C12.5949 4.94486 12.5409 4.86909 12.4732 4.80667Z" fill="#2AD168"></path>
-             </svg>
-           </div>
-           <div class="flex-1 p-1">
-             <h3 class="font-medium text-sm text-green-900"><a href="/bid/{{ sent_bid_id }}">Sent Bid {{ sent_bid_id }}</a></h3>
-           </div>
-         </div>
-       </div>
-       <div class="w-auto p-2">
-         <a href="#">
-           <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-             <path d="M8.94004 8L13.14 3.80667C13.2656 3.68113 13.3361 3.51087 13.3361 3.33333C13.3361 3.1558 13.2656 2.98554 13.14 2.86C13.0145 2.73447 12.8442 2.66394 12.6667 2.66394C12.4892 2.66394 12.3189 2.73447 12.1934 2.86L8.00004 7.06L3.80671 2.86C3.68117 2.73447 3.51091 2.66394 3.33337 2.66394C3.15584 2.66394 2.98558 2.73447 2.86004 2.86C2.7345 2.98554 2.66398 3.1558 2.66398 3.33333C2.66398 3.51087 2.7345 3.68113 2.86004 3.80667L7.06004 8L2.86004 12.1933C2.79756 12.2553 2.74796 12.329 2.71411 12.4103C2.68027 12.4915 2.66284 12.5787 2.66284 12.6667C2.66284 12.7547 2.68027 12.8418 2.71411 12.9231C2.74796 13.0043 2.79756 13.078 2.86004 13.14C2.92202 13.2025 2.99575 13.2521 3.07699 13.2859C3.15823 13.3198 3.24537 13.3372 3.33337 13.3372C3.42138 13.3372 3.50852 13.3198 3.58976 13.2859C3.671 13.2521 3.74473 13.2025 3.80671 13.14L8.00004 8.94L12.1934 13.14C12.2554 13.2025 12.3291 13.2521 12.4103 13.2859C12.4916 13.3198 12.5787 13.3372 12.6667 13.3372C12.7547 13.3372 12.8419 13.3198 12.9231 13.2859C13.0043 13.2521 13.0781 13.2025 13.14 13.14C13.2025 13.078 13.2521 13.0043 13.286 12.9231C13.3198 12.8418 13.3372 12.7547 13.3372 12.6667C13.3372 12.5787 13.3198 12.4915 13.286 12.4103C13.2521 12.329 13.2025 12.2553 13.14 12.1933L8.94004 8Z" fill="#156633"></path>
-           </svg>
-         </a>
-       </div>
-     </div>
-   </div>
- </div>
-</section>
-{% endif %}
-
-<section class="bg-white">
-  <div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden bg-white ">
-    <div class="pb-6 border-coolGray-100">
-      <div class="flex flex-wrap items-center justify-between -m-2">
-        <div class="w-full pt-2">
-
-  <div class="container px-0 mx-auto mt-5">
-    <div class="overflow-x-auto relative border sm:rounded-lg">
-
-<table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
-
-<thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300">
-  <tr>
-    <th scope="col" class="py-3 px-6">Item</th>
-    <th scope="col">Data</th>
-
-  </tr>
-</thead>
-
-<tr class="bg-white border-t hover:bg-gray-50"><td class="py-4 px-6 bold">Offer State</td><td>{{ data.state }}</td></tr>
-<tr class="bg-white border-t hover:bg-gray-50"><td class="py-4 px-6 bold">Coin From</td><td>{{ data.coin_from }}</td></tr>
-<tr class="bg-white border-t hover:bg-gray-50"><td class="py-4 px-6 bold">Coin To</td><td>{{ data.coin_to }}</td></tr>
-<tr class="bg-white border-t hover:bg-gray-50"><td class="py-4 px-6 bold">Amount From</td><td>{{ data.amt_from }} {{ data.tla_from }}</td></tr>
-<tr class="bg-white border-t hover:bg-gray-50"><td class="py-4 px-6 bold">Amount To</td><td>{{ data.amt_to }} {{ data.tla_to }}</td></tr>
-<tr class="bg-white border-t hover:bg-gray-50"><td class="py-4 px-6 bold">Minimum Bid Amount</td><td>{{ data.amt_bid_min }} {{ data.tla_from }}</td></tr>
-<tr class="bg-white border-t hover:bg-gray-50"><td class="py-4 px-6 bold">Rate</td><td>{{ data.rate }}</td></tr>
-<tr class="bg-white border-t hover:bg-gray-50"><td class="py-4 px-6 bold" title="Total coin-from value of completed bids, that this node is involved in">Amount Swapped</td><td>{{ data.amt_swapped }} {{ data.tla_from }}</td></tr>
-<tr class="bg-white border-t hover:bg-gray-50"><td class="py-4 px-6 bold" title="If bids can be sent with a different amount">Amount Variable</td><td>{{ data.amount_negotiable }}</td></tr>
-<tr class="bg-white border-t hover:bg-gray-50"><td class="py-4 px-6 bold" title="If bids can be sent with a different amount">Rate Variable</td><td>{{ data.rate_negotiable }}</td></tr>
-<tr class="bg-white border-t hover:bg-gray-50"><td class="py-4 px-6 bold">Script Lock Type</td><td>{{ data.lock_type }}</td></tr>
-<tr class="bg-white border-t hover:bg-gray-50"><td class="py-4 px-6 bold">Script Lock Value</td><td>{{ data.lock_value }} {{ data.lock_value_hr }}</td></tr>
-
-{% if data.addr_to == "Public" %}
-<tr class="bg-white border-t hover:bg-gray-50"><td class="py-4 px-6 bold">Address To</td><td>{{ data.addr_to }}</td></tr>
-{% else %}
-<tr class="bg-white border-t hover:bg-gray-50"><td class="py-4 px-6 bold">Address To</td><td><a class="monospace" href="/identity/{{ data.addr_to }}">{{ data.addr_to }}</a> {{ data.addr_to_label }}</td></tr>
-{% endif %}
-
-<tr class="bg-white border-t hover:bg-gray-50"><td class="py-4 px-6 bold">Address From</td><td><a class="monospace" href="/identity/{{ data.addr_from }}">{{ data.addr_from }}</a> {{ data.addr_from_label }}</td></tr>
-<tr class="bg-white border-t hover:bg-gray-50"><td class="py-4 px-6 bold">Created At</td><td>{{ data.created_at | formatts }}</td></tr>
-<tr class="bg-white border-t hover:bg-gray-50"><td class="py-4 px-6 bold">Expired At</td><td>{{ data.expired_at | formatts }}</td></tr>
-<tr class="bg-white border-t hover:bg-gray-50"><td class="py-4 px-6 bold">Sent</td><td>{{ data.sent }}</td></tr>
-<tr class="bg-white border-t hover:bg-gray-50"><td class="py-4 px-6 bold">Revoked</td><td>{{ data.was_revoked }}</td></tr>
-
-{% if data.sent == 'True' %}
-<tr class="bg-white border-t hover:bg-gray-50"><td class="py-4 px-6 bold">Auto Accept Strategy</td><td>
-{% if data.automation_strat_id == -1 %}
-None
-{% else %}
-<a class="monospace" href="/automationstrategy/{{ data.automation_strat_id }}">{{ data.automation_strat_label }}</a>
-{% endif %}
-</td></tr>
-{% endif %}
-
-{% if data.xmr_type == true %}
-<tr class="bg-white border-t hover:bg-gray-50"><td class="py-4 px-6 bold">Chain A offer fee rate</td><td>{{ data.a_fee_rate }}</td></tr>
-<tr class="bg-white border-t hover:bg-gray-50"><td class="py-4 px-6 bold">Chain A local fee rate</td><td>{{ data.a_fee_rate_verify }}, fee source: {{ data.a_fee_rate_verify_src }} {% if data.a_fee_warn == true %} WARNING {% endif %}</td></tr>
-{% endif %}
-
-</table>
-</div>
-</div>
-
-<section class="bg-white p-6">
-  <div class="flex flex-wrap items-center">
-    <div class="w-full">
-      <h4 class="font-semibold text-black text-2xl">Bids</h4>
-    </div>
-  </div>
-</section>
-
-<div class="container px-0 mx-auto mt-5">
-<div class="overflow-x-auto relative border sm:rounded-lg">
-
-<table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
-
-<thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300">
-<tr>
-<th scope="col" class="py-3 px-6">Bid ID</th>
-<th scope="col" class="py-3 px-6">Bid Amount</th>
-<th scope="col" class="py-3 px-6">Bid Rate</th>
-<th scope="col" class="py-3 px-6">Bid Status</th>
-<th scope="col" class="py-3 px-6">Identity From</th>
-
-</tr>
-</thead>
-
-{% for b in bids %}
-<tr class="bg-white border-t hover:bg-gray-50">
-  <td class="py-4 px-6"><a class="monospace" href=/bid/{{ b[0] }}>{{ b[0] }}</a></td>
-  <td class="py-4 px-6">{{ b[1] }}</td>
-  <td class="py-4 px-6">{{ b[3] }}</td>
-  <td class="py-4 px-6">{{ b[2] }}</td>
-  <td class="py-4 px-6"><a class="monospace" href=/identity/{{ b[4] }}>{{ b[4] }}</a></td>
-</tr>
-{% endfor %}
-</table>
-
-</div>
-</div>
-
-<form method="post">
-
-{% if data.show_bid_form %}
-
-<section class="bg-white p-6">
-  <div class="flex flex-wrap items-center">
-    <div class="w-full">
-      <h4 class="font-semibold text-black text-2xl">New Bid</h4>
-    </div>
-  </div>
-</section>
-
-<div class="container px-0 mx-auto mt-5">
-<div class="overflow-x-auto relative border sm:rounded-lg">
-
-<table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
-
-  <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300">
-  <tr>
-  <th scope="col" class="py-3 px-6">Input</th>
-  <th scope="col" class="">Output</th>
-
-  </tr>
-  </thead>
-
-
-  <tr class="bg-white border-t hover:bg-gray-50">
-    <td class="py-4 px-6">You will send  <span class="bold" id="bid_amt_to">{{ data.amt_to }}</span> {{ data.tla_to }}</td>
-  <td class="py-4">And receive <span class="bold" id="bid_amt_from">{{ data.amt_from }}</span> {{ data.tla_from }}
-    {% if data.xmr_type == true %}
-     (excluding {{ data.amt_from_lock_spend_tx_fee }} {{ data.tla_from }} in tx fees).
-    {% else %}
-     (excluding a tx fee).
-    {% endif %}</td>
-  </tr>
-
-  <tr class="bg-white border-t hover:bg-gray-50">
-  <td class="py-10 px-6 bold">Send From Address</td>
-<td>
-
-
-<select class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" name="addr_from">
-{% for a in addrs %}
-<option value="{{ a[0] }}" {% if data.nb_addr_from==a[0] %} selected{% endif %}>{{ a[0] }} {{ a[1] }}</option>
-{% endfor %}
-<option value="-1" {% if data.nb_addr_from=="-1" %} selected{% endif %}>New Address</option>
-</select>
-
-</td>
-</tr>
-
-{% if data.amount_negotiable == true %}
-  <tr class="bg-white border-t hover:bg-gray-50">
-  <td class="py-4 px-6 bold">Amount</td>
-  <td class="py-4 px-6"><input type="text" class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" id="bid_amount" name="bid_amount" value="{{ data.bid_amount }}" onchange="updateBidParams('amount');"></td>
-</tr>
-{% endif %}
-
-{% if data.rate_negotiable == true %}
-  <tr class="bg-white border-t hover:bg-gray-50">
-  <td class="py-4 px-6 bold">Rate</td>
-  <td class="py-4"><input type="text" class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" id="bid_rate" name="bid_rate" value="{{ data.bid_rate }}" onchange="updateBidParams('rate');"></td>
-</tr>
-{% endif %}
-
-  <tr class="bg-white border-t hover:bg-gray-50">
-  <td class="py-4 px-6 bold">Minutes valid</td>
-  <td class="py-4"><input type="number" class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" name="validmins" min="10" max="1440" value="{{ data.nb_validmins }}">
-  </td>
-</tr>
-
-{% if data.debug_ui == true %}
-
-  <tr class="bg-white border-t hover:bg-gray-50">
-  <td class="py-4 px-6 bold">Debug Option:</td>
-  <td class="py-4">
-  <select class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" name="debugind">
-<option{% if data.debug_ind=="-1" %} selected{% endif %} value="-1">None</option>
-{% for a in data.debug_options %}
-<option{% if data.debug_ind==a[0] %} selected{% endif %} value="{{ a[0] }}">{{ a[1] }}</option>
-{% endfor %}
-</select>
-</td>
-</tr>
-{% endif %}
-
-</table>
-
-</div>
-</div>
-
-<div class="p-6 pt-10 bg-white bg-opacity-60 rounded-b-md">
-  <div class="w-full md:w-0/12">
-    <div class="flex flex-wrap justify-end -m-1.5">
-
-      <div class="w-full md:w-auto p-1.5 ml-2">
-        <button name="sendbid" value="Send Bid" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
-          <span>Send Bid</span> </button>
-      </div>
-
-      <div class="w-full md:w-auto p-1.5 ml-2">
-        <button name="cancel" value="Cancel" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none">
-          <span>Cancel</span> </button>
-      </div>
-
-      <!-- TODO:
+  {% endif %}
+  <section class="bg-white">
+    <div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden bg-white ">
+      <div class="pb-6 border-coolGray-100">
+        <div class="flex flex-wrap items-center justify-between -m-2">
+          <div class="w-full pt-2">
+            <div class="container px-0 mx-auto mt-5">
+              <div class="overflow-x-auto relative border sm:rounded-lg">
+                <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
+                  <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300">
+                    <tr>
+                      <th scope="col" class="py-3 px-6">Item</th>
+                      <th scope="col">Data</th>
+                    </tr>
+                  </thead>
+                  <tr class="bg-white border-t hover:bg-gray-50">
+                    <td class="py-4 px-6 bold">Offer State</td>
+                    <td>{{ data.state }}</td>
+                  </tr>
+                  <tr class="bg-white border-t hover:bg-gray-50">
+                    <td class="py-4 px-6 bold">Coin From</td>
+                    <td>{{ data.coin_from }}</td>
+                  </tr>
+                  <tr class="bg-white border-t hover:bg-gray-50">
+                    <td class="py-4 px-6 bold">Coin To</td>
+                    <td>{{ data.coin_to }}</td>
+                  </tr>
+                  <tr class="bg-white border-t hover:bg-gray-50">
+                    <td class="py-4 px-6 bold">Amount From</td>
+                    <td>{{ data.amt_from }} {{ data.tla_from }}</td>
+                  </tr>
+                  <tr class="bg-white border-t hover:bg-gray-50">
+                    <td class="py-4 px-6 bold">Amount To</td>
+                    <td>{{ data.amt_to }} {{ data.tla_to }}</td>
+                  </tr>
+                  <tr class="bg-white border-t hover:bg-gray-50">
+                    <td class="py-4 px-6 bold">Minimum Bid Amount</td>
+                    <td>{{ data.amt_bid_min }} {{ data.tla_from }}</td>
+                  </tr>
+                  <tr class="bg-white border-t hover:bg-gray-50">
+                    <td class="py-4 px-6 bold">Rate</td>
+                    <td>{{ data.rate }}</td>
+                  </tr>
+                  <tr class="bg-white border-t hover:bg-gray-50">
+                    <td class="py-4 px-6 bold" title="Total coin-from value of completed bids, that this node is involved in">Amount Swapped</td>
+                    <td>{{ data.amt_swapped }} {{ data.tla_from }}</td>
+                  </tr>
+                  <tr class="bg-white border-t hover:bg-gray-50">
+                    <td class="py-4 px-6 bold" title="If bids can be sent with a different amount">Amount Variable</td>
+                    <td>{{ data.amount_negotiable }}</td>
+                  </tr>
+                  <tr class="bg-white border-t hover:bg-gray-50">
+                    <td class="py-4 px-6 bold" title="If bids can be sent with a different amount">Rate Variable</td>
+                    <td>{{ data.rate_negotiable }}</td>
+                  </tr>
+                  <tr class="bg-white border-t hover:bg-gray-50">
+                    <td class="py-4 px-6 bold">Script Lock Type</td>
+                    <td>{{ data.lock_type }}</td>
+                  </tr>
+                  <tr class="bg-white border-t hover:bg-gray-50">
+                    <td class="py-4 px-6 bold">Script Lock Value</td>
+                    <td>{{ data.lock_value }} {{ data.lock_value_hr }}</td>
+                  </tr> {% if data.addr_to == "Public" %}
+                  <tr class="bg-white border-t hover:bg-gray-50">
+                    <td class="py-4 px-6 bold">Address To</td>
+                    <td>{{ data.addr_to }}</td>
+                  </tr> {% else %}
+                  <tr class="bg-white border-t hover:bg-gray-50">
+                    <td class="py-4 px-6 bold">Address To</td>
+                    <td><a class="monospace" href="/identity/{{ data.addr_to }}">{{ data.addr_to }}</a> {{ data.addr_to_label }}</td>
+                  </tr> {% endif %}
+                  <tr class="bg-white border-t hover:bg-gray-50">
+                    <td class="py-4 px-6 bold">Address From</td>
+                    <td><a class="monospace" href="/identity/{{ data.addr_from }}">{{ data.addr_from }}</a> {{ data.addr_from_label }}</td>
+                  </tr>
+                  <tr class="bg-white border-t hover:bg-gray-50">
+                    <td class="py-4 px-6 bold">Created At</td>
+                    <td>{{ data.created_at | formatts }}</td>
+                  </tr>
+                  <tr class="bg-white border-t hover:bg-gray-50">
+                    <td class="py-4 px-6 bold">Expired At</td>
+                    <td>{{ data.expired_at | formatts }}</td>
+                  </tr>
+                  <tr class="bg-white border-t hover:bg-gray-50">
+                    <td class="py-4 px-6 bold">Sent</td>
+                    <td>{{ data.sent }}</td>
+                  </tr>
+                  <tr class="bg-white border-t hover:bg-gray-50">
+                    <td class="py-4 px-6 bold">Revoked</td>
+                    <td>{{ data.was_revoked }}</td>
+                  </tr>
+                  {% if data.sent == 'True' %}
+                  <tr class="bg-white border-t hover:bg-gray-50">
+                    <td class="py-4 px-6 bold">Auto Accept Strategy</td>
+                    <td>
+                      {% if data.automation_strat_id == -1 %} None {% else %}<a class="monospace" href="/automationstrategy/{{ data.automation_strat_id }}">{{ data.automation_strat_label }}</a> {% endif %} 
+                    </td>
+                  </tr>
+                  {% endif %}
+                  {% if data.xmr_type == true %}
+                  <tr class="bg-white border-t hover:bg-gray-50">
+                    <td class="py-4 px-6 bold">Chain A offer fee rate</td>
+                    <td>{{ data.a_fee_rate }}</td>
+                  </tr>
+                  <tr class="bg-white border-t hover:bg-gray-50">
+                    <td class="py-4 px-6 bold">Chain A local fee rate</td>
+                    <td>{{ data.a_fee_rate_verify }}, fee source: {{ data.a_fee_rate_verify_src }} {% if data.a_fee_warn == true %} WARNING {% endif %}</td>
+                  </tr> {% endif %} </table>
+              </div>
+            </div>
+            <section class="bg-white p-6">
+              <div class="flex flex-wrap items-center">
+                <div class="w-full">
+                  <h4 class="font-semibold text-black text-2xl">Bids</h4> </div>
+              </div>
+            </section>
+            <div class="container px-0 mx-auto mt-5">
+              <div class="overflow-x-auto relative border sm:rounded-lg">
+                <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
+                  <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300">
+                    <tr>
+                      <th scope="col" class="py-3 px-6">Bid ID</th>
+                      <th scope="col" class="py-3 px-6">Bid Amount</th>
+                      <th scope="col" class="py-3 px-6">Bid Rate</th>
+                      <th scope="col" class="py-3 px-6">Bid Status</th>
+                      <th scope="col" class="py-3 px-6">Identity From</th>
+                    </tr>
+                  </thead> 
+                  {% for b in bids %}
+                  <tr class="bg-white border-t hover:bg-gray-50">
+                    <td class="py-4 px-6"><a class="monospace" href=/bid/{{ b[0] }}>{{ b[0] }}</a></td>
+                    <td class="py-4 px-6">{{ b[1] }}</td>
+                    <td class="py-4 px-6">{{ b[3] }}</td>
+                    <td class="py-4 px-6">{{ b[2] }}</td>
+                    <td class="py-4 px-6"><a class="monospace" href=/identity/{{ b[4] }}>{{ b[4] }}</a></td>
+                  </tr>
+                {% endfor %}
+              </table>
+              </div>
+            </div>
+            <form method="post">
+              {% if data.show_bid_form %}
+              <section class="bg-white p-6">
+                <div class="flex flex-wrap items-center">
+                  <div class="w-full">
+                    <h4 class="font-semibold text-black text-2xl">New Bid</h4> </div>
+                </div>
+              </section>
+              <div class="container px-0 mx-auto mt-5">
+                <div class="overflow-x-auto relative border sm:rounded-lg">
+                  <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
+                    <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300">
+                      <tr>
+                        <th scope="col" class="py-3 px-6">Input</th>
+                        <th scope="col" class="">Output</th>
+                      </tr>
+                    </thead>
+                    <tr class="bg-white border-t hover:bg-gray-50">
+                      <td class="py-4 px-6">You will send <span class="bold" id="bid_amt_to">{{ data.amt_to }}</span> {{ data.tla_to }}</td>
+                      <td class="py-4">And receive <span class="bold" id="bid_amt_from">{{ data.amt_from }}</span> {{ data.tla_from }} {% if data.xmr_type == true %} (excluding {{ data.amt_from_lock_spend_tx_fee }} {{ data.tla_from }} in tx fees). {% else %} (excluding a tx fee). {% endif %}</td>
+                    </tr>
+                    <tr class="bg-white border-t hover:bg-gray-50">
+                      <td class="py-10 px-6 bold">Send From Address</td>
+                      <td>
+                        <select class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" name="addr_from"> {% for a in addrs %}
+                          <option value="{{ a[0] }}" {% if data.nb_addr_from==a[0] %} selected{% endif %}>{{ a[0] }} {{ a[1] }}</option> {% endfor %}
+                          <option value="-1" {% if data.nb_addr_from=="-1" %} selected{% endif %}>New Address</option>
+                        </select>
+                      </td>
+                    </tr>
+                    {% if data.amount_negotiable == true %}
+                    <tr class="bg-white border-t hover:bg-gray-50">
+                      <td class="py-4 px-6 bold">Amount</td>
+                      <td class="py-4 px-6">
+                        <input type="text" class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" id="bid_amount" name="bid_amount" value="{{ data.bid_amount }}" onchange="updateBidParams('amount');">
+                      </td>
+                    </tr>
+                    {% endif %}
+                    {% if data.rate_negotiable == true %}
+                    <tr class="bg-white border-t hover:bg-gray-50">
+                      <td class="py-4 px-6 bold">Rate</td>
+                      <td class="py-4">
+                        <input type="text" class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" id="bid_rate" name="bid_rate" value="{{ data.bid_rate }}" onchange="updateBidParams('rate');">
+                      </td>
+                    </tr>
+                    {% endif %}
+                    <tr class="bg-white border-t hover:bg-gray-50">
+                      <td class="py-4 px-6 bold">Minutes valid</td>
+                      <td class="py-4">
+                        <input type="number" class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" name="validmins" min="10" max="1440" value="{{ data.nb_validmins }}"> </td>
+                    </tr>
+                    {% if data.debug_ui == true %}
+                    <tr class="bg-white border-t hover:bg-gray-50">
+                      <td class="py-4 px-6 bold">Debug Option:</td>
+                      <td class="py-4">
+                        <select class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" name="debugind">
+                          <option{% if data.debug_ind=="-1" %} selected{% endif %} value="-1">None</option>
+                            {% for a in data.debug_options %}
+                            <option{% if data.debug_ind==a[0] %} selected{% endif %} value="{{ a[0] }}">{{ a[1] }}</option>
+                            {% endfor %}
+                          </select>
+                      </td>
+                    </tr>
+                    {% endif %}
+                  </table>
+                </div>
+              </div>
+              <div class="p-6 pt-10 bg-white bg-opacity-60 rounded-b-md">
+                <div class="w-full md:w-0/12">
+                  <div class="flex flex-wrap justify-end -m-1.5">
+                    <div class="w-full md:w-auto p-1.5 ml-2">
+                      <button name="sendbid" value="Send Bid" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none"> <span>Send Bid</span> </button>
+                    </div>
+                    <div class="w-full md:w-auto p-1.5 ml-2">
+                      <button name="cancel" value="Cancel" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none"> <span>Cancel</span> </button>
+                    </div>
+                    <!-- TODO:
        <div class="w-full md:w-auto p-1.5 ml-2">
         <button name="check_rates" value="Lookup Rates"  type="button" onclick='lookup_rates();' class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none">
           <svg class="mr-2" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
@@ -298,42 +300,27 @@ None
             </g>
           </svg> <span>Lookup Rates</span> </button>
       </div>
-      -->
-
-</div>
-</div>
-</div>
-
-{% else %}
-
-<div class="p-6 pt-10 bg-white bg-opacity-60 rounded-b-md">
-  <div class="w-full md:w-0/12">
-    <div class="flex flex-wrap justify-end -m-1.5">
-
-<div class="w-full md:w-auto p-1.5 ml-2">
-  <button name="newbid" value="New Bid" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
-    <span>New Bid</span> </button>
-</div>
-
-
-{% if data.sent == 'True' %}
-
-<div class="w-full md:w-auto p-1.5 ml-2">
-  <button name="repeat_offer"  value="Repeat Offer" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none">
-    <span>Repeat Offer</span> </button>
-</div>
-
-{% if data.was_revoked != true %}
-
-<div class="w-full md:w-auto p-1.5 ml-2">
-  <button name="revoke_offer"  value="Revoke Offer" type="submit" onclick="return confirmPopup();" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none">
-    <span>Revoke Offer</span> </button>
-</div>
-
-{% endif %}
-{% endif %}
-
-<!-- todo
+      --></div>
+                </div>
+              </div>
+              {% else %}
+              <div class="p-6 pt-10 bg-white bg-opacity-60 rounded-b-md">
+                <div class="w-full md:w-0/12">
+                  <div class="flex flex-wrap justify-end -m-1.5">
+                    <div class="w-full md:w-auto p-1.5 ml-2">
+                      <button name="newbid" value="New Bid" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none"> <span>New Bid</span> </button>
+                    </div>
+                    {% if data.sent == 'True' %}
+                    <div class="w-full md:w-auto p-1.5 ml-2">
+                      <button name="repeat_offer" value="Repeat Offer" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none"> <span>Repeat Offer</span> </button>
+                    </div>
+                    {% if data.was_revoked != true %}
+                    <div class="w-full md:w-auto p-1.5 ml-2">
+                      <button name="revoke_offer" value="Revoke Offer" type="submit" onclick="return confirmPopup();" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none"> <span>Revoke Offer</span> </button>
+                    </div>
+                    {% endif %}
+                    {% endif %}
+                    <!-- todo
 <div class="w-full md:w-auto p-1.5 ml-2">
   <button name="check_rates" type="button"  value="Lookup Rates" onclick='lookup_rates();' class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none">
     <svg class="mr-2" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
@@ -343,103 +330,86 @@ None
       </g>
     </svg> <span>Lookup Rates</span> </button>
 </div>
--->
-
-</div>
-</div>
-</div>
-
-{% endif %}
-
-<input type="hidden" id="coin_from" value="{{ data.coin_from_ind }}">
-<input type="hidden" id="coin_to" value="{{ data.coin_to_ind }}">
-<input type="hidden" id="amt_var" value="{{ data.amount_negotiable }}">
-<input type="hidden" id="rate_var" value="{{ data.rate_negotiable }}">
-<input type="hidden" id="amount_from" value="{{ data.amt_from }}">
-<input type="hidden" id="offer_rate" value="{{ data.rate }}">
-<input type="hidden" name="formid" value="{{ form_id }}">
-</form>
-
-<p id="rates_display"></p>
-
-</div>
-</div>
-</div>
-</div>
-
-</section>
-
-<script>
-const xhr_rates = new XMLHttpRequest();
-xhr_rates.onload = () => {
-    if (xhr_rates.status == 200) {
+--></div>
+                </div>
+              </div>
+              {% endif %}
+              <input type="hidden" id="coin_from" value="{{ data.coin_from_ind }}">
+              <input type="hidden" id="coin_to" value="{{ data.coin_to_ind }}">
+              <input type="hidden" id="amt_var" value="{{ data.amount_negotiable }}">
+              <input type="hidden" id="rate_var" value="{{ data.rate_negotiable }}">
+              <input type="hidden" id="amount_from" value="{{ data.amt_from }}">
+              <input type="hidden" id="offer_rate" value="{{ data.rate }}">
+              <input type="hidden" name="formid" value="{{ form_id }}"> </form>
+            <p id="rates_display"></p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <script>
+    const xhr_rates = new XMLHttpRequest();
+    xhr_rates.onload = () => {
+      if (xhr_rates.status == 200) {
         const obj = JSON.parse(xhr_rates.response);
-
         inner_html = '<h4 class="bold>Rates</h4><pre><code>' + JSON.stringify(obj, null, '  ') + '</code></pre>';
         document.getElementById('rates_display').innerHTML = inner_html;
+      }
     }
-}
 
-function lookup_rates() {
-    const coin_from = document.getElementById('coin_from').value;
-    const coin_to = document.getElementById('coin_to').value;
-
-    if (coin_from == '-1' || coin_to == '-1') {
+    function lookup_rates() {
+      const coin_from = document.getElementById('coin_from').value;
+      const coin_to = document.getElementById('coin_to').value;
+      if (coin_from == '-1' || coin_to == '-1') {
         alert('Coins from and to must be set first.');
         return;
+      }
+      inner_html = '<h4>Rates</h4><p>Updating...</p>';
+      document.getElementById('rates_display').innerHTML = inner_html;
+      xhr_rates.open('POST', '/json/rates');
+      xhr_rates.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
+      xhr_rates.send('coin_from=' + coin_from + '&coin_to=' + coin_to);
     }
-
-    inner_html = '<h4>Rates</h4><p>Updating...</p>';
-    document.getElementById('rates_display').innerHTML = inner_html;
-
-    xhr_rates.open('POST', '/json/rates');
-    xhr_rates.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
-    xhr_rates.send('coin_from='+coin_from+'&coin_to='+coin_to);
-}
-
-const xhr_bid_params = new XMLHttpRequest();
-xhr_bid_params.onload = () => {
-    if (xhr_bid_params.status == 200) {
+    const xhr_bid_params = new XMLHttpRequest();
+    xhr_bid_params.onload = () => {
+      if (xhr_bid_params.status == 200) {
         const obj = JSON.parse(xhr_bid_params.response);
         document.getElementById('bid_amt_to').innerHTML = obj['amount_to'];
+      }
     }
-}
 
-function updateBidParams(value_changed) {
-    const coin_from = document.getElementById('coin_from').value;
-    const coin_to = document.getElementById('coin_to').value;
-    const amt_var = document.getElementById('amt_var').value;
-    const rate_var = document.getElementById('rate_var').value;
-
-    let amt_from = '';
-    let rate = '';
-    if (amt_var == 'True') {
+    function updateBidParams(value_changed) {
+      const coin_from = document.getElementById('coin_from').value;
+      const coin_to = document.getElementById('coin_to').value;
+      const amt_var = document.getElementById('amt_var').value;
+      const rate_var = document.getElementById('rate_var').value;
+      let amt_from = '';
+      let rate = '';
+      if (amt_var == 'True') {
         amt_from = document.getElementById('bid_amount').value;
-    } else {
+      }
+      else {
         amt_from = document.getElementById('amount_from').value;
-    }
-    if (rate_var == 'True') {
+      }
+      if (rate_var == 'True') {
         rate = document.getElementById('bid_rate').value;
-    } else {
+      }
+      else {
         rate = document.getElementById('offer_rate').value;
-    }
-
-    if (value_changed == 'amount') {
+      }
+      if (value_changed == 'amount') {
         document.getElementById('bid_amt_from').innerHTML = amt_from;
+      }
+      xhr_bid_params.open('POST', '/json/rate');
+      xhr_bid_params.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
+      xhr_bid_params.send('coin_from=' + coin_from + '&coin_to=' + coin_to + '&rate=' + rate + '&amt_from=' + amt_from);
     }
 
-    xhr_bid_params.open('POST', '/json/rate');
-    xhr_bid_params.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
-    xhr_bid_params.send('coin_from='+coin_from+'&coin_to='+coin_to+'&rate='+rate+'&amt_from='+amt_from);
-}
-
-function confirmPopup() {
-    return confirm("Are you sure?");
-}
-
-</script>
-
+    function confirmPopup() {
+      return confirm("Are you sure?");
+    }
+  </script>
 </div>
 {% include 'footer.html' %}
 </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/basicswap/templates/offer_confirm.html b/basicswap/templates/offer_confirm.html
index 76c3cd4..2fdd2d8 100644
--- a/basicswap/templates/offer_confirm.html
+++ b/basicswap/templates/offer_confirm.html
@@ -1,686 +1,624 @@
 {% include 'header.html' %}
 <div class="container mx-auto">
- <section class="bg-white p-5 mt-5">
-  <div class="flex flex-wrap items-center -m-2">
-   <div class="w-full md:w-1/2 p-2">
-     <ul class="flex flex-wrap items-center gap-x-3 mb-2">
-      <li>
-       <a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/">
-        <p>Home</p>
-       </a>
-      </li>
-      <li>
-       <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
-       </svg>
-      </li>
-      <li><a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/newoffer">Place an new offer</a></li>
-      <li>
-       <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
-       </svg>
-      </li>
-      <li><a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="#">Setup offer parameters</a></li>
-      <li>
-       <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
-       </svg>
-      </li>
-      <li><a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="#">Confirm your offer information</a></li>
-      <li>
-       <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
-       </svg>
-      </li>
-     </ul>
-   </div>
-  </div>
- </section>
-
- <section class="py-4">
-  <div class="container px-4 mx-auto">
-   <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden"> <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
-    <div class="relative z-20 flex flex-wrap items-center -m-3">
-     <div class="w-full md:w-1/2 p-3">
-      <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">Confirm your offer information</h2>
-      <p class="font-semibold text-coolGray-200">Place a new offer on BasicSwap’s order book.</p>
-     </div>
-    </div>
-   </div>
-  </div>
- </section <section class="bg-white">
- <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden bg-white rounded-t-md">
-  <div class="pb-6 border-coolGray-100">
-   <div class="flex flex-wrap items-center justify-between -m-2">
-    <div class="w-full p-2">
-
-{% include 'inc_messages.html' %}
-
-     <div class="p-5 mb-10">
-         <div class="mx-4 p-4">
-             <div class="flex items-center">
-                 <div class="flex items-center text-teal-600 relative">
-                     <div class="rounded-full h-12 w-12 py-3 border-2 border-blue-500">
-                         <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
-                             <g fill="#3b82f6"><polygon points="14.5 23.5 11.5 23.5 11.5 4.321 6.766 8.108 4.892 5.766 11.474 0.5 14.5 0.5 14.5 23.5" fill="#3b82f6"></polygon>
-                             </g>
-                         </svg>
-                     </div>
-                     <div class="absolute top-0 -ml-10 text-center mt-16 w-32 text-xs font-medium uppercase text-gray-500">Step 1</div>
-                 </div>
-                 <div class="flex-auto border-t-2 border-blue-500"></div>
-                 <div class="flex items-center text-teal-600 relative">
-                     <div class="rounded-full transition duration-500 ease-in-out h-12 w-12 py-3 border-2 border-blue-500">
-                       <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
-                         <g fill="#3b82f6">
-                         <path d="M19.5,23.5H4.5V20.2l.667-.445C9.549,16.828,16.5,10.78,16.5,7c0-2.654-1.682-4-5-4A9.108,9.108,0,0,0,7.333,4.248L6.084,5.08,4.42,2.584l1.247-.832A11.963,11.963,0,0,1,11.5,0c4.935,0,8,2.683,8,7,0,5-6.5,10.662-10.232,13.5H19.5ZM6,21H6Z" fill="#3b82f6"></path>
-                       </g>
-                     </svg>
-                     </div>
-                     <div class="absolute top-0 -ml-10 text-center mt-16 w-32 text-xs font-medium uppercase text-gray-500">Step 2</div>
-                 </div>
-                 <div class="flex-auto border-t-2 border-blue-500"></div>
-                 <div class="flex items-center text-gray-500 relative">
-                     <div class="rounded-full transition duration-500 ease-in-out h-12 w-12 py-3 border-2 border-blue-500">
-                         <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
-                           <g fill="#3b82f6" >
-                             <polygon points="9 21 1 13 4 10 9 15 21 3 24 6 9 21" fill="#3b82f6"></polygon>
-                           </g>
-                         </svg>
-                     </div>
-                     <div class="absolute top-0 -ml-10 text-center mt-16 w-32 text-xs font-medium uppercase text-gray-500">Confirm</div>
-                 </div>
-             </div>
-         </div>
-     </div>
-
-     <form method="post">
-      <div class="py-6 border-b border-coolGray-100">
-       <div class="w-full md:w-10/12">
-        <div class="flex flex-wrap -m-3">
-         <div class="w-full md:w-1/3 p-3">
-          <p class="text-sm text-coolGray-800 font-semibold">Select network</p>
-         </div>
-         <div class="w-full md:flex-1 p-3">
-          <div class="relative">
-           <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path>
-           </svg>
-           <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
-            <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
-             <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round" >
-              <line data-cap="butt" x1="7.6" y1="10.5" x2="16.4" y2="5.5" stroke="#3b82f6"></line>
-              <line data-cap="butt" x1="7.6" y1="13.5" x2="16.4" y2="18.5" stroke="#3b82f6"></line>
-              <circle cx="5" cy="12" r="3"></circle>
-              <circle cx="19" cy="4" r="3"></circle>
-              <circle cx="19" cy="20" r="3"></circle>
-             </g>
+  <section class="bg-white p-5 mt-5">
+    <div class="flex flex-wrap items-center -m-2">
+      <div class="w-full md:w-1/2 p-2">
+        <ul class="flex flex-wrap items-center gap-x-3 mb-2">
+          <li>
+            <a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/">
+              <p>Home</p>
+            </a>
+          </li>
+          <li>
+            <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
             </svg>
-           </div>
-           <select class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 opacity-70" name="addr_to" disabled>
-            <option{% if data.addr_to=="-1" %} selected{% endif %} value="-1">Public Network</option>
-             {% for a in addrs_to %}
-             <option{% if data.addr_to==a[0] %} selected{% endif %} value="{{ a[0] }}" class="">{{ a[0] }} {{ a[1] }}</option>
-              {% endfor %}
-           </select>
-          </div>
-         </div>
-        </div>
-       </div>
-      </div>
-
-      <div class="py-6 border-b border-coolGray-100">
-       <div class="w-full md:w-10/12">
-        <div class="flex flex-wrap -m-3">
-         <div class="w-full md:w-1/3 p-3">
-          <p class="text-sm text-coolGray-800 font-semibold">Select address</p>
-         </div>
-         <div class="w-full md:flex-1 p-3">
-          <div class="relative">
-           <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path>
-           </svg>
-           <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
-            <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
-             <title>contacts 2</title>
-             <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round" >
-              <path data-cap="butt" d="M11.992,11.737,14.2,13.4A2,2,0,0,1,15,15v1H7V15a2,2,0,0,1,.8-1.6l2.208-1.663" stroke="#3b82f6"></path>
-              <rect x="9" y="7" width="4" height="5" rx="2" ry="2" stroke="#3b82f6"></rect>
-              <path d="M2,1H18a2,2,0,0,1,2,2V21a2,2,0,0,1-2,2H2Z"></path>
-              <line x1="23" y1="5" x2="23" y2="9" stroke="#3b82f6"></line>
-             </g>
+          </li>
+          <li><a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/newoffer">Place an new offer</a></li>
+          <li>
+            <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
             </svg>
-           </div>
-           <select class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 opacity-70" name="addr_from" disabled>
-            {% for a in addrs %}
-            <option{% if data.addr_from==a[0] %} selected{% endif %} value="{{ a[0] }}">{{ a[0] }} {{ a[1] }}</option>
-             {% endfor %}
-             <option{% if data.addr_from=="-1" %} selected{% endif %} value="-1">New Address</option>
-           </select>
-          </div>
-         </div>
-        </div>
-       </div>
+          </li>
+          <li><a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="#">Setup offer parameters</a></li>
+          <li>
+            <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
+            </svg>
+          </li>
+          <li><a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="#">Confirm your offer information</a></li>
+          <li>
+            <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
+            </svg>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </section>
+  <section class="py-4">
+    <div class="container px-4 mx-auto">
+      <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden"> <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
+        <div class="relative z-20 flex flex-wrap items-center -m-3">
+          <div class="w-full md:w-1/2 p-3">
+            <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">Confirm your offer information</h2>
+            <p class="font-semibold text-coolGray-200">Place a new offer on BasicSwap’s order book.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section <section class="bg-white">
+  <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden bg-white rounded-t-md">
+    <div class="pb-6 border-coolGray-100">
+      <div class="flex flex-wrap items-center justify-between -m-2">
+        <div class="w-full p-2">
+          {% include 'inc_messages.html' %}
+          <div class="p-5 mb-10">
+            <div class="mx-4 p-4">
+              <div class="flex items-center">
+                <div class="flex items-center text-teal-600 relative">
+                  <div class="rounded-full h-12 w-12 py-3 border-2 border-blue-500">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
+                      <g fill="#3b82f6">
+                        <polygon points="14.5 23.5 11.5 23.5 11.5 4.321 6.766 8.108 4.892 5.766 11.474 0.5 14.5 0.5 14.5 23.5" fill="#3b82f6"></polygon>
+                      </g>
+                    </svg>
+                  </div>
+                  <div class="absolute top-0 -ml-10 text-center mt-16 w-32 text-xs font-medium uppercase text-gray-500">Step 1</div>
+                </div>
+                <div class="flex-auto border-t-2 border-blue-500"></div>
+                <div class="flex items-center text-teal-600 relative">
+                  <div class="rounded-full transition duration-500 ease-in-out h-12 w-12 py-3 border-2 border-blue-500">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
+                      <g fill="#3b82f6">
+                        <path d="M19.5,23.5H4.5V20.2l.667-.445C9.549,16.828,16.5,10.78,16.5,7c0-2.654-1.682-4-5-4A9.108,9.108,0,0,0,7.333,4.248L6.084,5.08,4.42,2.584l1.247-.832A11.963,11.963,0,0,1,11.5,0c4.935,0,8,2.683,8,7,0,5-6.5,10.662-10.232,13.5H19.5ZM6,21H6Z" fill="#3b82f6"></path>
+                      </g>
+                    </svg>
+                  </div>
+                  <div class="absolute top-0 -ml-10 text-center mt-16 w-32 text-xs font-medium uppercase text-gray-500">Step 2</div>
+                </div>
+                <div class="flex-auto border-t-2 border-blue-500"></div>
+                <div class="flex items-center text-gray-500 relative">
+                  <div class="rounded-full transition duration-500 ease-in-out h-12 w-12 py-3 border-2 border-blue-500">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
+                      <g fill="#3b82f6">
+                        <polygon points="9 21 1 13 4 10 9 15 21 3 24 6 9 21" fill="#3b82f6"></polygon>
+                      </g>
+                    </svg>
+                  </div>
+                  <div class="absolute top-0 -ml-10 text-center mt-16 w-32 text-xs font-medium uppercase text-gray-500">Confirm</div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <form method="post">
+            <div class="py-6 border-b border-coolGray-100">
+              <div class="w-full md:w-10/12">
+                <div class="flex flex-wrap -m-3">
+                  <div class="w-full md:w-1/3 p-3">
+                    <p class="text-sm text-coolGray-800 font-semibold">Select network</p>
+                  </div>
+                  <div class="w-full md:flex-1 p-3">
+                    <div class="relative">
+                      <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path>
+                      </svg>
+                      <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
+                        <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
+                          <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round">
+                            <line data-cap="butt" x1="7.6" y1="10.5" x2="16.4" y2="5.5" stroke="#3b82f6"></line>
+                            <line data-cap="butt" x1="7.6" y1="13.5" x2="16.4" y2="18.5" stroke="#3b82f6"></line>
+                            <circle cx="5" cy="12" r="3"></circle>
+                            <circle cx="19" cy="4" r="3"></circle>
+                            <circle cx="19" cy="20" r="3"></circle>
+                          </g>
+                        </svg>
+                      </div>
+                      <select class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 opacity-70" name="addr_to" disabled>
+                        <option{% if data.addr_to=="-1" %} selected{% endif %} value="-1">Public Network</option>
+                          {% for a in addrs_to %}
+                          <option{% if data.addr_to==a[0] %} selected{% endif %} value="{{ a[0] }}" class="">{{ a[0] }} {{ a[1] }}</option>
+                          {% endfor %}
+                        </select>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="py-6 border-b border-coolGray-100">
+              <div class="w-full md:w-10/12">
+                <div class="flex flex-wrap -m-3">
+                  <div class="w-full md:w-1/3 p-3">
+                    <p class="text-sm text-coolGray-800 font-semibold">Select address</p>
+                  </div>
+                  <div class="w-full md:flex-1 p-3">
+                    <div class="relative">
+                      <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path>
+                      </svg>
+                      <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
+                        <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
+                          <title>contacts 2</title>
+                          <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round">
+                            <path data-cap="butt" d="M11.992,11.737,14.2,13.4A2,2,0,0,1,15,15v1H7V15a2,2,0,0,1,.8-1.6l2.208-1.663" stroke="#3b82f6"></path>
+                            <rect x="9" y="7" width="4" height="5" rx="2" ry="2" stroke="#3b82f6"></rect>
+                            <path d="M2,1H18a2,2,0,0,1,2,2V21a2,2,0,0,1-2,2H2Z"></path>
+                            <line x1="23" y1="5" x2="23" y2="9" stroke="#3b82f6"></line>
+                          </g>
+                        </svg>
+                      </div>
+                      <select class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 opacity-70" name="addr_from" disabled>
+                        {% for a in addrs %}
+                        <option{% if data.addr_from==a[0] %} selected{% endif %} value="{{ a[0] }}">{{ a[0] }} {{ a[1] }}</option>
+                        {% endfor %}
+                        <option{% if data.addr_from=="-1" %} selected{% endif %} value="-1">New Address</option>
+                      </select>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="py-6 border-b border-coolGray-100">
+              <div class="w-full md:w-10/12">
+                <div class="flex flex-wrap -m-3">
+                  <div class="w-full md:w-1/3 p-3">
+                    <p class="text-sm text-coolGray-800 font-semibold">You Send</p>
+                  </div>
+                  <div class="w-full md:flex-1 p-3">
+                    <div class="flex flex-wrap -m-3">
+                      <div class="w-full md:w-1/2 p-3">
+                        <div class="relative">
+                          <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path>
+                          </svg>
+                          <select is="ms-dropdown" class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-5 opacity-70" id="coin_from" name="coin_from" onchange="set_rate('coin_from');" disabled>
+                            <option value="-1" data-image="/static/images/other/placeholder-line.png">Coin</option>
+                            {% for c in coins_from %}
+                            <option{% if data.coin_from==c[0] %} selected{% endif %} value="{{ c[0] }}" data-image="/static/images/coins/{{ c[1]|replace(" ", "-") }}.png">{{ c[1] }}</option>
+                            {% endfor %}
+                          </select>
+                        </div>
+                      </div>
+                      <div class="w-full md:w-1/2 p-3">
+                        <div class="relative">
+                          <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
+                            <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
+                              <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round">
+                                <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path>
+                                <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline>
+                                <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path>
+                                <polyline points="18.654 16.071 17.068 21.763 22.865 21.034"></polyline>
+                                <path data-cap="butt" d="M12.211,1a11,11,0,0,1,4.857,20.763"></path>
+                              </g>
+                            </svg>
+                          </div>
+                          <input class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none block w-full p-5 opacity-70" type="text" id="amt_from" name="amt_from" value="{{ data.amt_from }}" onchange="set_rate('amt_from');" readonly> </div>
+                      </div>
+                      {% if data.swap_style == 'xmr' %}
+                      <div class="w-full md:w-1/2 p-3">
+                        <p class="mb-1.5 font-medium text-base text-coolGray-800">Fee From Confirm Target</p>
+                        <div class="relative">
+                          <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
+                            <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
+                              <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round">
+                                <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path>
+                                <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline>
+                                <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path>
+                                <polyline points="18.654 16.071 17.068 21.763 22.865 21.034"></polyline>
+                                <path data-cap="butt" d="M12.211,1a11,11,0,0,1,4.857,20.763"></path>
+                              </g>
+                            </svg>
+                          </div>
+                          <input class="pl-10 appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none block w-full p-2.5 opacity-70" type="number" name="fee_from_conf" min="1" max="32" value="{{ data.fee_from_conf }}" readonly> </div>
+                      </div>
+                      <div class="w-full md:w-1/2 p-3">
+                        <p class="mb-1.5 font-medium text-base text-coolGray-800">Fee Rate From</p>
+                        <div class="relative">
+                          <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
+                            <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
+                              <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round">
+                                <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path>
+                                <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline>
+                                <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path>
+                                <polyline points="18.654 16.071 17.068 21.763 22.865 21.034"></polyline>
+                                <path data-cap="butt" d="M12.211,1a11,11,0,0,1,4.857,20.763"></path>
+                              </g>
+                            </svg>
+                          </div>
+                          <input class="pl-10 appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none block w-full p-2.5 opacity-70" name="fee_rate_from" value="{{ data.from_fee_override }}" readonly> </div> <span class="text-sm mt-2 block"><b>Fee Rate Source:</b> {{ data.from_fee_src }}</span> </div>
+                      <div class="w-full md:w-1/2 p-3">
+                        <p class="mb-1.5 font-medium text-base text-coolGray-800">Fee From Increase By</p>
+                        <div class="relative">
+                          <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path>
+                          </svg>
+                          <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
+                            <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
+                              <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round">
+                                <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path>
+                                <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline>
+                                <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path>
+                                <polyline points="18.654 16.071 17.068 21.763 22.865 21.034"></polyline>
+                                <path data-cap="butt" d="M12.211,1a11,11,0,0,1,4.857,20.763"></path>
+                              </g>
+                            </svg>
+                          </div>
+                          <select class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 opacity-70" name="fee_from_extra_" disabled>
+                            <option value="0">None</option>
+                            <option value="10" {% if data.fee_from_extra==10 %} selected{% endif %}>10%</option>
+                            <option value="50" {% if data.fee_from_extra==50 %} selected{% endif %}>50%</option>
+                            <option value="100" {% if data.fee_from_extra==100 %} selected{% endif %}>100%</option>
+                          </select>
+                        </div> <span class="text-sm mt-2 block"><b>Lock Tx Spend Fee:</b> {{ data.amt_from_lock_spend_tx_fee }} {{ data.tla_from }}</span> </div>
+                      {% endif %}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="py-6 border-b border-coolGray-100">
+              <div class="w-full md:w-10/12">
+                <div class="flex flex-wrap -m-3">
+                  <div class="w-full md:w-1/3 p-3">
+                    <p class="text-sm text-coolGray-800 font-semibold">You Get</p>
+                  </div>
+                  <div class="w-full md:flex-1 p-3">
+                    <div class="flex flex-wrap -m-3">
+                      <div class="w-full md:w-1/2 p-3">
+                        <div class="relative">
+                          <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path>
+                          </svg>
+                          <select is="ms-dropdown" class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-5 opacity-70" id="coin_to" name="coin_to" onchange="set_rate('coin_to');" disabled>
+                            <option value="-1" data-image="/static/images/other/placeholder-line.png">Coin</option>
+                            {% for c in coins %}
+                            <option{% if data.coin_to==c[0] %} selected{% endif %} value="{{ c[0] }}" data-image="/static/images/coins/{{ c[1]|replace(" ", "-") }}.png">{{ c[1] }}</option>
+                            {% endfor %}
+                          </select>
+                        </div>
+                      </div>
+                      <div class="w-full md:w-1/2 p-3">
+                        <div class="relative">
+                          <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
+                            <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
+                              <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round">
+                                <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path>
+                                <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline>
+                                <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path>
+                                <polyline points="18.654 16.071 17.068 21.763 22.865 21.034"></polyline>
+                                <path data-cap="butt" d="M12.211,1a11,11,0,0,1,4.857,20.763"></path>
+                              </g>
+                            </svg>
+                          </div>
+                          <input class="pl-10 pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none block w-full p-5 opacity-70" type="text" id="amt_to" name="amt_to" value="{{ data.amt_to }}" onchange="set_rate('amt_to');" readonly> </div>
+                      </div>
+                      {% if data.swap_style == 'xmr' %}
+                      <div class="w-full md:w-1/2 p-3">
+                        <p class="mb-1.5 font-medium text-base text-coolGray-800">Fee To Confirm Target</p>
+                        <div class="relative">
+                          <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
+                            <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
+                              <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round">
+                                <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path>
+                                <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline>
+                                <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path>
+                                <polyline points="18.654 16.071 17.068 21.763 22.865 21.034"></polyline>
+                                <path data-cap="butt" d="M12.211,1a11,11,0,0,1,4.857,20.763"></path>
+                              </g>
+                            </svg>
+                          </div>
+                          <input class="pl-10 appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none block w-full p-2.5 opacity-70" type="number" name="fee_to_conf" min="1" max="32" value="{{ data.fee_to_conf }}" readonly> </div>
+                      </div>
+                      <div class="w-full md:w-1/2 p-3">
+                        <p class="mb-1.5 font-medium text-base text-coolGray-800">Fee Rate To</p>
+                        <div class="relative">
+                          <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
+                            <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
+                              <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round">
+                                <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path>
+                                <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline>
+                                <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path>
+                                <polyline points="18.654 16.071 17.068 21.763 22.865 21.034"></polyline>
+                                <path data-cap="butt" d="M12.211,1a11,11,0,0,1,4.857,20.763"></path>
+                              </g>
+                            </svg>
+                          </div>
+                          <input class="pl-10 appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none block w-full p-2.5 opacity-70" name="fee_rate_to" value="{{ data.to_fee_override }}" readonly> </div> <span class="text-sm mt-2 block"><b>Fee Rate Source:</b> {{ data.to_fee_src }}</span> </div>
+                      <div class="w-full md:w-1/2 p-3">
+                        <p class="mb-1.5 font-medium text-base text-coolGray-800">Fee To Increase By</p>
+                        <div class="relative">
+                          <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path>
+                          </svg>
+                          <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
+                            <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
+                              <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round">
+                                <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path>
+                                <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline>
+                                <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path>
+                                <polyline points="18.654 16.071 17.068 21.763 22.865 21.034"></polyline>
+                                <path data-cap="butt" d="M12.211,1a11,11,0,0,1,4.857,20.763"></path>
+                              </g>
+                            </svg>
+                          </div>
+                          <select class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 opacity-70" name="fee_to_extra_" disabled>
+                            <option value="0">None</option>
+                            <option value="10" {% if data.fee_from_extra==10 %} selected{% endif %}>10%</option>
+                            <option value="50" {% if data.fee_from_extra==50 %} selected{% endif %}>50%</option>
+                            <option value="100" {% if data.fee_from_extra==100 %} selected{% endif %}>100%</option>
+                          </select>
+                        </div>
+                      </div>
+                      {% endif %}
+                      {% if data.swap_style == 'xmr' and coin_to != '6' %}
+                      <div class="w-full md:w-1/2 p-3">
+                        <p class="mb-1.5 font-medium text-base text-coolGray-800">Fee To Confirm Target</p>
+                        <div class="relative">
+                          <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
+                            <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
+                              <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round">
+                                <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path>
+                                <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline>
+                                <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path>
+                                <polyline points="18.654 16.071 17.068 21.763 22.865 21.034"></polyline>
+                                <path data-cap="butt" d="M12.211,1a11,11,0,0,1,4.857,20.763"></path>
+                              </g>
+                            </svg>
+                          </div>
+                          <input class="pl-10 appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none block w-full p-2.5 opacity-70" type="number" name="fee_to_conf" min="1" max="32" value="{{ data.fee_from_conf }}" readonly> </div>
+                      </div>
+                      <div class="w-full md:w-1/2 p-3">
+                        <p class="mb-1.5 font-medium text-base text-coolGray-800">Fee To Increase By</p>
+                        <div class="relative">
+                          <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path>
+                          </svg>
+                          <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
+                            <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
+                              <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round">
+                                <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path>
+                                <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline>
+                                <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path>
+                                <polyline points="18.654 16.071 17.068 21.763 22.865 21.034"></polyline>
+                                <path data-cap="butt" d="M12.211,1a11,11,0,0,1,4.857,20.763"></path>
+                              </g>
+                            </svg>
+                          </div>
+                          <select class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 opacity-70" name="fee_to_extra" disabled>
+                            <option value="0">None</option>
+                            <option value="10" {% if data.fee_from_extra==10 %} selected{% endif %}>10%</option>
+                            <option value="50" {% if data.fee_from_extra==50 %} selected{% endif %}>50%</option>
+                            <option value="100" {% if data.fee_from_extra==100 %} selected{% endif %}>100%</option>
+                          </select>
+                        </div>
+                      </div>
+                    {% endif %}
+                  </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="py-6 border-b border-coolGray-100">
+              <div class="w-full md:w-10/12">
+                <div class="flex flex-wrap -m-3">
+                  <div class="w-full md:w-1/3 p-3">
+                    <p class="text-sm text-coolGray-800 font-semibold">Bid amount</p>
+                  </div>
+                  <div class="w-full md:flex-1 p-3">
+                    <div class="flex flex-wrap -m-3">
+                      <div class="w-full md:w-1/2 p-3">
+                        <p class="mb-1.5 font-medium text-base text-coolGray-800">Minimum Bid Amount</p>
+                        <div class="relative">
+                          <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
+                            <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
+                              <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round">
+                                <rect x="9.843" y="5.379" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -0.7635 13.1569)" width="11.314" height="4.243"></rect>
+                                <polyline points="3,23 3,19 15,19 15,23 "></polyline>
+                                <line x1="4" y1="15" x2="1" y2="15" stroke="#3b82f6"></line>
+                                <line x1="5.757" y1="10.757" x2="3.636" y2="8.636" stroke="#3b82f6"></line>
+                                <line x1="1" y1="23" x2="17" y2="23"></line>
+                                <line x1="17" y1="9" x2="23" y2="15"></line>
+                              </g>
+                            </svg>
+                          </div>
+                          <input class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none block w-full p-2.5 opacity-70" type="text" id="amt_bid_min" name="amt_bid_min" value="{{ data.amt_bid_min }}" title="Bids with an amount below the minimum bid value will be discarded" readonly> </div>
+                      </div>
+                      <div class="w-full md:w-1/2 p-3">
+                        <p class="mb-1.5 font-medium text-base text-coolGray-800">Rate</p>
+                        <div class="relative">
+                          <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
+                            <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
+                              <g fill="#3b82f6">
+                                <path d="M9,9h5L7,0,0,9H5V23a1,1,0,0,0,1,1H8a1,1,0,0,0,1-1Z" fill="#3b82f6"></path>
+                                <path d="M14,17a3,3,0,1,1,3-3A3,3,0,0,1,14,17Zm0-4a1,1,0,1,0,1,1A1,1,0,0,0,14,13Z" data-color="color-2"></path>
+                                <path d="M21,24a3,3,0,1,1,3-3A3,3,0,0,1,21,24Zm0-4a1,1,0,1,0,1,1A1,1,0,0,0,21,20Z" data-color="color-2"></path>
+                                <path d="M13,23a1,1,0,0,1-.707-1.707l9-9a1,1,0,0,1,1.414,1.414l-9,9A1,1,0,0,1,13,23Z" data-color="color-2"></path>
+                              </g>
+                            </svg>
+                          </div>
+                          <input class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none block w-full p-2.5 opacity-70" type="text" id="rate" name="rate" value="{{ data.rate }}" onchange="set_rate('rate');" readonly> </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="py-6 border-b border-coolGray-100">
+              <div class="w-full md:w-10/12">
+                <div class="flex flex-wrap -m-3">
+                  <div class="w-full md:w-1/3 p-3">
+                    <p class="text-sm text-coolGray-800 font-semibold">Time</p>
+                  </div>
+                  <div class="w-full md:flex-1 p-3">
+                    <div class="flex flex-wrap -m-3">
+                      <div class="w-full md:w-1/2 p-3">
+                        <p class="mb-1.5 font-medium text-base text-coolGray-800">Offer valid (hrs)</p>
+                        <div class="relative">
+                          <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
+                            <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
+                              <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round">
+                                <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path>
+                                <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline>
+                                <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path>
+                                <polyline points="18.654 16.071 17.068 21.763 22.865 21.034"></polyline>
+                                <path data-cap="butt" d="M12.211,1a11,11,0,0,1,4.857,20.763"></path>
+                              </g>
+                            </svg>
+                          </div>
+                          <input class="pl-10 appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none block w-full p-2.5 opacity-70" type="number" name="validhrs" min="1" max="48" value="{{ data.validhrs }}" readonly> </div>
+                      </div>
+                      {% if data.debug_ui == true %}
+                      <div class="w-full md:w-1/2 p-3">
+                        <p class="mb-1.5 font-medium text-base text-coolGray-800">Contract Locked (Mins)</p>
+                        <div class="relative">
+                          <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
+                            <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
+                              <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round">
+                                <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path>
+                                <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline>
+                                <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path>
+                                <polyline points="18.654 16.071 17.068 21.763 22.865 21.034"></polyline>
+                                <path data-cap="butt" d="M12.211,1a11,11,0,0,1,4.857,20.763"></path>
+                              </g>
+                            </svg>
+                          </div>
+                          <input class="pl-10 appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none block w-full p-2.5 opacity-70" type="number" name="lockmins" min="10" max="5000" value="{{ data.lockmins }}" readonly> </div>
+                          {% if data.swap_style != 'xmr' %}
+                        <div class="text-sm text-gray-500 mt-1.5">(Participate txn will be locked for half the time.)</div>
+                      {% endif %}
+                    </div>
+                    {% else %}
+                      <div class="w-full md:w-1/2 p-3">
+                        <p class="mb-1.5 font-medium text-base text-coolGray-800">Contract locked (Hours)</p>
+                        <div class="relative">
+                          <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
+                            <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
+                              <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round">
+                                <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path>
+                                <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline>
+                                <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path>
+                                <polyline points="18.654 16.071 17.068 21.763 22.865 21.034"></polyline>
+                                <path data-cap="butt" d="M12.211,1a11,11,0,0,1,4.857,20.763"></path>
+                              </g>
+                            </svg>
+                          </div>
+                          <input class="pl-10 appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none block w-full p-2.5 opacity-70" type="number" name="lockhrs" min="1" max="96" value="{{ data.lockhrs }}" readonly> </div>
+                          {% if data.swap_style != 'xmr' %}
+                        <div class="text-sm text-gray-500 mt-1.5">(Participate txn will be locked for half the time.)</div>
+                      {% endif %}
+                    </div>
+                  {% endif %}
+                </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="py-6 border-b border-coolGray-100">
+              <div class="w-full md:w-10/12">
+                <div class="flex flex-wrap -m-3">
+                  <div class="w-full md:w-1/3 p-3">
+                    <p class="text-sm text-coolGray-800 font-semibold">Strategy (BETA)</p>
+                  </div>
+                  <div class="w-full md:flex-1 p-3">
+                    <div class="flex flex-wrap -m-3">
+                      <div class="w-full md:w-1/2 p-3">
+                        <p class="mb-1.5 font-medium text-base text-coolGray-800">Auto Accept Strategy</p>
+                        <div class="relative">
+                          <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path>
+                          </svg>
+                          <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
+                            <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
+                              <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round">
+                                <circle cx="12" cy="12" r="5" stroke="#3b82f6" data-cap="butt"></circle>
+                                <polygon points="5 6 2 4 5 2 5 6" fill="#3b82f6" stroke="none"></polygon>
+                                <polygon points="19 18 22 20 19 22 19 18" fill="#3b82f6" stroke="none"></polygon>
+                                <polygon points="5 6 2 4 5 2 5 6"></polygon>
+                                <line x1="5" y1="4" x2="9" y2="4"></line>
+                                <polygon points="19 18 22 20 19 22 19 18"></polygon>
+                                <line x1="19" y1="20" x2="15" y2="20"></line>
+                              </g>
+                            </svg>
+                          </div>
+                          <select class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 opacity-70" name="automation_strat_id" disabled>
+                            <option value="-1" {% if data.automation_strat_id==-1 %} selected{% endif %}>None</option>
+                            {% for a in automation_strategies %}
+                            <option value="{{ a[0] }}" {% if data.automation_strat_id==a[0] %} selected{% endif %}>{{ a[1] }}</option>
+                          {% endfor %}
+                        </select>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="py-6 border-coolGray-100">
+              <div class="w-full md:w-10/12">
+                <div class="flex flex-wrap -m-3">
+                  <div class="w-full md:w-1/3 p-3">
+                    <p class="text-sm text-coolGray-800 font-semibold">Options</p>
+                  </div>
+                  <div class="w-full md:flex-1 p-3">
+                    <div class="form-check form-check-inline">
+                      <input class="form-check-input h-4 w-4 border border-gray-300 rounded-sm bg-gray-50 checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer opacity-70" type="checkbox" id="amt_var" name="amt_var" value="av" {% if data.amt_var==true %} checked="checked" {% endif %} disabled>
+                      <label class="form-check-label inline-block text-gray-800" for="inlineCheckbox2">Amount Variable</label>
+                    </div>
+                    <div class="form-check form-check-inline">
+                      <input class="form-check-input h-4 w-4 border border-gray-300 rounded-sm bg-gray-50 checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer opacity-70" type="checkbox" id="rate_var" name="rate_var" value="rv" {% if data.rate_var==true %} checked="checked" {% endif %} disabled>
+                      <label class="form-check-label bg-gray-50inline-block text-gray-800" for="inlineCheckbox3">Rate Variable</label>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="p-6 pt-10 bg-white bg-opacity-60 rounded-b-md">
+              <div class="w-full md:w-0/12">
+                <div class="flex flex-wrap justify-end -m-1.5">
+                  <div class="w-full md:w-auto p-1.5">
+                    <button name="step2" type="submit" value="Back" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none">
+                      <svg class="mr-2" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
+                        <g fill="#556987">
+                          <path fill="#556987" d="M12,3c1.989,0,3.873,0.65,5.43,1.833l-3.604,3.393l9.167,0.983L22.562,0l-3.655,3.442 C16.957,1.862,14.545,1,12,1C5.935,1,1,5.935,1,12h2C3,7.037,7.037,3,12,3z"></path>
+                          <path data-color="#556987" d="M12,21c-1.989,0-3.873-0.65-5.43-1.833l3.604-3.393l-9.167-0.983L1.438,24l3.655-3.442 C7.043,22.138,9.455,23,12,23c6.065,0,11-4.935,11-11h-2C21,16.963,16.963,21,12,21z"></path>
+                        </g>
+                      </svg> <span>Back</span> </button>
+                  </div>
+                  <div class="w-full md:w-auto p-1.5">
+                    <button name="submit_offer" value="Continue" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
+                      <svg class="mr-2" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
+                        <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round">
+                          <circle cx="12" cy="12" r="11"></circle>
+                          <polyline points="11 8 15 12 11 16" stroke="#ffffff"></polyline>
+                        </g>
+                      </svg> <span>Confirm Offer</span> </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <input type="hidden" name="formid" value="{{ form_id }}">
+            <input type="hidden" name="addr_to" value="{{ data.addr_to }}">
+            <input type="hidden" name="addr_from" value="{{ data.addr_from }}">
+            <input type="hidden" name="coin_from" value="{{ data.coin_from }}">
+            <input type="hidden" name="fee_from_extra" value="{{ data.fee_from_extra }}">
+            <input type="hidden" name="coin_to" value="{{ data.coin_to }}">
+            <input type="hidden" name="fee_to_extra" value="{{ data.fee_to_extra }}">
+            {% if data.automation_strat_id != -1 %}
+            <input type="hidden" name="automation_strat_id" value="{{ data.automation_strat_id }}">
+            {% endif %} 
+            {% if data.amt_var==true %}
+            <input type="hidden" name="amt_var" value="av">
+            {% endif %}
+            {% if data.rate_var==true %}
+            <input type="hidden" name="rate_var" value="rv">
+          {% endif %}
+        </form>
+          <script src="static/js/new_offer.js"></script>
+        </div>
       </div>
-
-      <div class="py-6 border-b border-coolGray-100">
-       <div class="w-full md:w-10/12">
-        <div class="flex flex-wrap -m-3">
-         <div class="w-full md:w-1/3 p-3">
-          <p class="text-sm text-coolGray-800 font-semibold">You Send</p>
-         </div>
-         <div class="w-full md:flex-1 p-3">
-          <div class="flex flex-wrap -m-3">
-           <div class="w-full md:w-1/2 p-3">
-            <div class="relative">
-             <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path>
-             </svg>
-             <select is="ms-dropdown" class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-5 opacity-70" id="coin_from" name="coin_from" onchange="set_rate('coin_from');" disabled>
-              <option value="-1" data-image="/static/images/other/placeholder-line.png">Coin</option>
-              {% for c in coins_from %}
-              <option{% if data.coin_from==c[0] %} selected{% endif %} value="{{ c[0] }}" data-image="/static/images/coins/{{ c[1]|replace(" ", "-") }}.png">{{ c[1] }}</option>
-               {% endfor %}
-             </select>
-            </div>
-           </div>
-           <div class="w-full md:w-1/2 p-3">
-            <div class="relative">
-             <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
-              <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
-               <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round">
-                <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path>
-                <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline>
-                <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path>
-                <polyline points="18.654 16.071 17.068 21.763 22.865 21.034"></polyline>
-                <path data-cap="butt" d="M12.211,1a11,11,0,0,1,4.857,20.763"></path>
-               </g>
-              </svg>
-             </div>
-             <input class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none block w-full p-5 opacity-70" type="text" id="amt_from" name="amt_from" value="{{ data.amt_from }}" onchange="set_rate('amt_from');" readonly>
-            </div>
-           </div>
-
-           {% if data.swap_style == 'xmr' %}
-
-           <div class="w-full md:w-1/2 p-3">
-            <p class="mb-1.5 font-medium text-base text-coolGray-800">Fee From Confirm Target</p>
-            <div class="relative">
-             <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
-              <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
-               <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round" >
-                <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path>
-                <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline>
-                <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path>
-                <polyline points="18.654 16.071 17.068 21.763 22.865 21.034"></polyline>
-                <path data-cap="butt" d="M12.211,1a11,11,0,0,1,4.857,20.763"></path>
-               </g>
-              </svg>
-             </div>
-             <input class="pl-10 appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none block w-full p-2.5 opacity-70" type="number" name="fee_from_conf" min="1" max="32" value="{{ data.fee_from_conf }}" readonly>
-            </div>
-           </div>
-
-           <div class="w-full md:w-1/2 p-3">
-            <p class="mb-1.5 font-medium text-base text-coolGray-800">Fee Rate From</p>
-            <div class="relative">
-             <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
-              <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
-               <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round" >
-                <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path>
-                <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline>
-                <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path>
-                <polyline points="18.654 16.071 17.068 21.763 22.865 21.034"></polyline>
-                <path data-cap="butt" d="M12.211,1a11,11,0,0,1,4.857,20.763"></path>
-               </g>
-              </svg>
-             </div>
-             <input class="pl-10 appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none block w-full p-2.5 opacity-70" name="fee_rate_from" value="{{ data.from_fee_override }}" readonly>
-            </div>
-            <span class="text-sm mt-2 block"><b>Fee Rate Source:</b> {{ data.from_fee_src }}</span>
-           </div>
-
-           <div class="w-full md:w-1/2 p-3">
-            <p class="mb-1.5 font-medium text-base text-coolGray-800">Fee From Increase By</p>
-            <div class="relative">
-             <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path>
-             </svg>
-             <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
-              <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
-               <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round" >
-                <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path>
-                <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline>
-                <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path>
-                <polyline points="18.654 16.071 17.068 21.763 22.865 21.034"></polyline>
-                <path data-cap="butt" d="M12.211,1a11,11,0,0,1,4.857,20.763"></path>
-               </g>
-              </svg>
-             </div>
-             <select class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 opacity-70" name="fee_from_extra_" disabled>
-              <option value="0">None</option>
-              <option value="10" {% if data.fee_from_extra==10 %} selected{% endif %}>10%</option>
-              <option value="50" {% if data.fee_from_extra==50 %} selected{% endif %}>50%</option>
-              <option value="100" {% if data.fee_from_extra==100 %} selected{% endif %}>100%</option>
-             </select>
-            </div>
-            <span class="text-sm mt-2 block"><b>Lock Tx Spend Fee:</b> {{ data.amt_from_lock_spend_tx_fee }} {{ data.tla_from }}</span>
-           </div>
-
-           {% endif %}
-
-          </div>
-         </div>
-        </div>
-       </div>
-      </div>
-
-      <div class="py-6 border-b border-coolGray-100">
-       <div class="w-full md:w-10/12">
-        <div class="flex flex-wrap -m-3">
-         <div class="w-full md:w-1/3 p-3">
-          <p class="text-sm text-coolGray-800 font-semibold">You Get</p>
-         </div>
-         <div class="w-full md:flex-1 p-3">
-          <div class="flex flex-wrap -m-3">
-
-           <div class="w-full md:w-1/2 p-3">
-            <div class="relative">
-             <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path>
-             </svg>
-             <select is="ms-dropdown" class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-5 opacity-70" id="coin_to" name="coin_to" onchange="set_rate('coin_to');" disabled>
-              <option value="-1" data-image="/static/images/other/placeholder-line.png">Coin</option>
-              {% for c in coins %}
-              <option{% if data.coin_to==c[0] %} selected{% endif %} value="{{ c[0] }}" data-image="/static/images/coins/{{ c[1]|replace(" ", "-") }}.png">{{ c[1] }}</option>
-               {% endfor %}
-             </select>
-            </div>
-           </div>
-           <div class="w-full md:w-1/2 p-3">
-            <div class="relative">
-             <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
-              <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
-               <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round">
-                <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path>
-                <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline>
-                <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path>
-                <polyline points="18.654 16.071 17.068 21.763 22.865 21.034"></polyline>
-                <path data-cap="butt" d="M12.211,1a11,11,0,0,1,4.857,20.763"></path>
-               </g>
-              </svg>
-             </div>
-             <input class="pl-10 pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none block w-full p-5 opacity-70" type="text" id="amt_to" name="amt_to" value="{{ data.amt_to }}" onchange="set_rate('amt_to');" readonly>
-            </div>
-           </div>
-
-           {% if data.swap_style == 'xmr' %}
-
-           <div class="w-full md:w-1/2 p-3">
-            <p class="mb-1.5 font-medium text-base text-coolGray-800">Fee To Confirm Target</p>
-            <div class="relative">
-             <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
-              <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
-               <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round">
-                <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path>
-                <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline>
-                <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path>
-                <polyline points="18.654 16.071 17.068 21.763 22.865 21.034"></polyline>
-                <path data-cap="butt" d="M12.211,1a11,11,0,0,1,4.857,20.763"></path>
-               </g>
-              </svg>
-             </div>
-             <input class="pl-10 appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none block w-full p-2.5 opacity-70" type="number" name="fee_to_conf" min="1" max="32" value="{{ data.fee_to_conf }}" readonly>
-            </div>
-           </div>
-
-           <div class="w-full md:w-1/2 p-3">
-            <p class="mb-1.5 font-medium text-base text-coolGray-800">Fee Rate To</p>
-            <div class="relative">
-             <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
-              <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
-               <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round">
-                <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path>
-                <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline>
-                <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path>
-                <polyline points="18.654 16.071 17.068 21.763 22.865 21.034"></polyline>
-                <path data-cap="butt" d="M12.211,1a11,11,0,0,1,4.857,20.763"></path>
-               </g>
-              </svg>
-             </div>
-             <input class="pl-10 appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none block w-full p-2.5 opacity-70" name="fee_rate_to" value="{{ data.to_fee_override }}" readonly>
-            </div>
-            <span class="text-sm mt-2 block"><b>Fee Rate Source:</b> {{ data.to_fee_src }}</span>
-           </div>
-
-           <div class="w-full md:w-1/2 p-3">
-            <p class="mb-1.5 font-medium text-base text-coolGray-800">Fee To Increase By</p>
-            <div class="relative">
-             <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path>
-             </svg>
-             <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
-              <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
-               <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round">
-                <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path>
-                <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline>
-                <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path>
-                <polyline points="18.654 16.071 17.068 21.763 22.865 21.034"></polyline>
-                <path data-cap="butt" d="M12.211,1a11,11,0,0,1,4.857,20.763"></path>
-               </g>
-              </svg>
-             </div>
-             <select class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 opacity-70" name="fee_to_extra_" disabled>
-              <option value="0">None</option>
-              <option value="10" {% if data.fee_from_extra==10 %} selected{% endif %}>10%</option>
-              <option value="50" {% if data.fee_from_extra==50 %} selected{% endif %}>50%</option>
-              <option value="100" {% if data.fee_from_extra==100 %} selected{% endif %}>100%</option>
-             </select>
-            </div>
-           </div>
-
-           {% endif %}
-
-           {% if data.swap_style == 'xmr' and coin_to != '6' %}
-
-           <div class="w-full md:w-1/2 p-3">
-            <p class="mb-1.5 font-medium text-base text-coolGray-800">Fee To Confirm Target</p>
-            <div class="relative">
-             <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
-              <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
-               <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round">
-                <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path>
-                <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline>
-                <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path>
-                <polyline points="18.654 16.071 17.068 21.763 22.865 21.034"></polyline>
-                <path data-cap="butt" d="M12.211,1a11,11,0,0,1,4.857,20.763"></path>
-               </g>
-              </svg>
-             </div>
-             <input class="pl-10 appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none block w-full p-2.5 opacity-70" type="number" name="fee_to_conf" min="1" max="32" value="{{ data.fee_from_conf }}" readonly>
-            </div>
-           </div>
-
-           <div class="w-full md:w-1/2 p-3">
-            <p class="mb-1.5 font-medium text-base text-coolGray-800">Fee To Increase By</p>
-            <div class="relative">
-             <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path>
-             </svg>
-             <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
-              <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
-               <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round">
-                <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path>
-                <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline>
-                <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path>
-                <polyline points="18.654 16.071 17.068 21.763 22.865 21.034"></polyline>
-                <path data-cap="butt" d="M12.211,1a11,11,0,0,1,4.857,20.763"></path>
-               </g>
-              </svg>
-             </div>
-             <select class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 opacity-70" name="fee_to_extra" disabled>
-              <option value="0">None</option>
-              <option value="10" {% if data.fee_from_extra==10 %} selected{% endif %}>10%</option>
-              <option value="50" {% if data.fee_from_extra==50 %} selected{% endif %}>50%</option>
-              <option value="100" {% if data.fee_from_extra==100 %} selected{% endif %}>100%</option>
-             </select>
-            </div>
-           </div>
-           {% endif %}
-
-          </div>
-         </div>
-        </div>
-       </div>
-      </div>
-
-      <div class="py-6 border-b border-coolGray-100">
-       <div class="w-full md:w-10/12">
-        <div class="flex flex-wrap -m-3">
-         <div class="w-full md:w-1/3 p-3">
-          <p class="text-sm text-coolGray-800 font-semibold">Bid amount</p>
-         </div>
-         <div class="w-full md:flex-1 p-3">
-          <div class="flex flex-wrap -m-3">
-
-           <div class="w-full md:w-1/2 p-3">
-            <p class="mb-1.5 font-medium text-base text-coolGray-800">Minimum Bid Amount</p>
-            <div class="relative">
-             <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
-              <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
-               <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round" >
-                <rect x="9.843" y="5.379" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -0.7635 13.1569)" width="11.314" height="4.243"></rect>
-                <polyline points="3,23 3,19 15,19 15,23 "></polyline>
-                <line x1="4" y1="15" x2="1" y2="15" stroke="#3b82f6"></line>
-                <line x1="5.757" y1="10.757" x2="3.636" y2="8.636" stroke="#3b82f6"></line>
-                <line x1="1" y1="23" x2="17" y2="23"></line>
-                <line x1="17" y1="9" x2="23" y2="15"></line>
-               </g>
-              </svg>
-             </div>
-             <input class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none block w-full p-2.5 opacity-70" type="text" id="amt_bid_min" name="amt_bid_min" value="{{ data.amt_bid_min }}" title="Bids with an amount below the minimum bid value will be discarded" readonly>
-            </div>
-           </div>
-           <div class="w-full md:w-1/2 p-3">
-            <p class="mb-1.5 font-medium text-base text-coolGray-800">Rate</p>
-            <div class="relative">
-             <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
-              <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
-               <g fill="#3b82f6" >
-                <path d="M9,9h5L7,0,0,9H5V23a1,1,0,0,0,1,1H8a1,1,0,0,0,1-1Z" fill="#3b82f6"></path>
-                <path d="M14,17a3,3,0,1,1,3-3A3,3,0,0,1,14,17Zm0-4a1,1,0,1,0,1,1A1,1,0,0,0,14,13Z" data-color="color-2"></path>
-                <path d="M21,24a3,3,0,1,1,3-3A3,3,0,0,1,21,24Zm0-4a1,1,0,1,0,1,1A1,1,0,0,0,21,20Z" data-color="color-2"></path>
-                <path d="M13,23a1,1,0,0,1-.707-1.707l9-9a1,1,0,0,1,1.414,1.414l-9,9A1,1,0,0,1,13,23Z" data-color="color-2"></path>
-               </g>
-              </svg>
-             </div>
-             <input class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none block w-full p-2.5 opacity-70" type="text" id="rate" name="rate" value="{{ data.rate }}" onchange="set_rate('rate');" readonly>
-            </div>
-           </div>
-          </div>
-         </div>
-        </div>
-       </div>
-      </div>
-
-      <div class="py-6 border-b border-coolGray-100">
-       <div class="w-full md:w-10/12">
-        <div class="flex flex-wrap -m-3">
-         <div class="w-full md:w-1/3 p-3">
-          <p class="text-sm text-coolGray-800 font-semibold">Time</p>
-         </div>
-         <div class="w-full md:flex-1 p-3">
-          <div class="flex flex-wrap -m-3">
-
-           <div class="w-full md:w-1/2 p-3">
-            <p class="mb-1.5 font-medium text-base text-coolGray-800">Offer valid (hrs)</p>
-            <div class="relative">
-             <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
-              <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
-               <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round" >
-                <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path>
-                <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline>
-                <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path>
-                <polyline points="18.654 16.071 17.068 21.763 22.865 21.034"></polyline>
-                <path data-cap="butt" d="M12.211,1a11,11,0,0,1,4.857,20.763"></path>
-               </g>
-              </svg>
-             </div>
-             <input class="pl-10 appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none block w-full p-2.5 opacity-70" type="number" name="validhrs" min="1" max="48" value="{{ data.validhrs }}" readonly>
-            </div>
-           </div>
-
-           {% if data.debug_ui == true %}
-
-           <div class="w-full md:w-1/2 p-3">
-            <p class="mb-1.5 font-medium text-base text-coolGray-800">Contract Locked (Mins)</p>
-            <div class="relative">
-             <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
-              <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
-               <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round" >
-                <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path>
-                <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline>
-                <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path>
-                <polyline points="18.654 16.071 17.068 21.763 22.865 21.034"></polyline>
-                <path data-cap="butt" d="M12.211,1a11,11,0,0,1,4.857,20.763"></path>
-               </g>
-              </svg>
-             </div>
-             <input class="pl-10 appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none block w-full p-2.5 opacity-70" type="number" name="lockmins" min="10" max="5000" value="{{ data.lockmins }}" readonly>
-            </div>
-            {% if data.swap_style != 'xmr' %}
-            <div class="text-sm text-gray-500 mt-1.5">(Participate txn will be locked for half the time.)</div>
-            {% endif %}
-           </div>
-
-           {% else %}
-
-           <div class="w-full md:w-1/2 p-3">
-            <p class="mb-1.5 font-medium text-base text-coolGray-800">Contract locked (Hours)</p>
-            <div class="relative">
-             <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
-              <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
-               <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round" >
-                <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path>
-                <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline>
-                <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path>
-                <polyline points="18.654 16.071 17.068 21.763 22.865 21.034"></polyline>
-                <path data-cap="butt" d="M12.211,1a11,11,0,0,1,4.857,20.763"></path>
-               </g>
-              </svg>
-             </div>
-
-             <input class="pl-10 appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none block w-full p-2.5 opacity-70" type="number" name="lockhrs" min="1" max="96" value="{{ data.lockhrs }}" readonly>
-
-            </div>
-            {% if data.swap_style != 'xmr' %}
-            <div class="text-sm text-gray-500 mt-1.5">(Participate txn will be locked for half the time.)</div>
-            {% endif %}
-           </div>
-
-           {% endif %}
-
-          </div>
-         </div>
-        </div>
-       </div>
-      </div>
-
-      <div class="py-6 border-b border-coolGray-100">
-       <div class="w-full md:w-10/12">
-        <div class="flex flex-wrap -m-3">
-         <div class="w-full md:w-1/3 p-3">
-          <p class="text-sm text-coolGray-800 font-semibold">Strategy (BETA)</p>
-         </div>
-         <div class="w-full md:flex-1 p-3">
-          <div class="flex flex-wrap -m-3">
-
-           <div class="w-full md:w-1/2 p-3">
-            <p class="mb-1.5 font-medium text-base text-coolGray-800">Auto Accept Strategy</p>
-            <div class="relative">
-             <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path>
-             </svg>
-             <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
-              <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
-               <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round" >
-                <circle cx="12" cy="12" r="5" stroke="#3b82f6" data-cap="butt"></circle>
-                <polygon points="5 6 2 4 5 2 5 6" fill="#3b82f6" stroke="none"></polygon>
-                <polygon points="19 18 22 20 19 22 19 18" fill="#3b82f6" stroke="none"></polygon>
-                <polygon points="5 6 2 4 5 2 5 6"></polygon>
-                <line x1="5" y1="4" x2="9" y2="4"></line>
-                <polygon points="19 18 22 20 19 22 19 18"></polygon>
-                <line x1="19" y1="20" x2="15" y2="20"></line>
-               </g>
-              </svg>
-             </div>
-             <select class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 opacity-70" name="automation_strat_id" disabled>
-              <option value="-1" {% if data.automation_strat_id==-1 %} selected{% endif %}>None</option>
-              {% for a in automation_strategies %}
-              <option value="{{ a[0] }}" {% if data.automation_strat_id==a[0] %} selected{% endif %}>{{ a[1] }}</option>
-              {% endfor %}
-             </select>
-            </div>
-           </div>
-
-          </div>
-         </div>
-        </div>
-       </div>
-      </div>
-
-      <div class="py-6 border-coolGray-100">
-       <div class="w-full md:w-10/12">
-        <div class="flex flex-wrap -m-3">
-         <div class="w-full md:w-1/3 p-3">
-          <p class="text-sm text-coolGray-800 font-semibold">Options</p>
-         </div>
-         <div class="w-full md:flex-1 p-3">
-          <div class="form-check form-check-inline">
-           <input class="form-check-input h-4 w-4 border border-gray-300 rounded-sm bg-gray-50 checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer opacity-70" type="checkbox" id="amt_var" name="amt_var" value="av" {% if data.amt_var==true %} checked="checked" {% endif %} disabled>
-           <label class="form-check-label inline-block text-gray-800" for="inlineCheckbox2">Amount Variable</label>
-          </div>
-          <div class="form-check form-check-inline">
-           <input class="form-check-input h-4 w-4 border border-gray-300 rounded-sm bg-gray-50 checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer opacity-70" type="checkbox" id="rate_var" name="rate_var" value="rv" {% if data.rate_var==true %} checked="checked" {% endif %} disabled>
-           <label class="form-check-label bg-gray-50inline-block text-gray-800" for="inlineCheckbox3">Rate Variable</label>
-          </div>
-         </div>
-        </div>
-       </div>
-      </div>
-
-      <div class="p-6 pt-10 bg-white bg-opacity-60 rounded-b-md">
-       <div class="w-full md:w-0/12">
-        <div class="flex flex-wrap justify-end -m-1.5">
-         <div class="w-full md:w-auto p-1.5">
-          <button name="step2" type="submit" value="Back" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none">
-           <svg class="mr-2" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
-            <g fill="#556987">
-             <path fill="#556987" d="M12,3c1.989,0,3.873,0.65,5.43,1.833l-3.604,3.393l9.167,0.983L22.562,0l-3.655,3.442 C16.957,1.862,14.545,1,12,1C5.935,1,1,5.935,1,12h2C3,7.037,7.037,3,12,3z"></path>
-             <path data-color="#556987" d="M12,21c-1.989,0-3.873-0.65-5.43-1.833l3.604-3.393l-9.167-0.983L1.438,24l3.655-3.442 C7.043,22.138,9.455,23,12,23c6.065,0,11-4.935,11-11h-2C21,16.963,16.963,21,12,21z"></path>
-            </g>
-           </svg> <span>Back</span> </button>
-         </div>
-
-         <div class="w-full md:w-auto p-1.5">
-          <button name="submit_offer" value="Continue" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
-           <svg class="mr-2" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
-            <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round">
-             <circle cx="12" cy="12" r="11"></circle>
-             <polyline points="11 8 15 12 11 16" stroke="#ffffff"></polyline>
-            </g>
-           </svg> <span>Confirm Offer</span> </button>
-         </div>
-        </div>
-       </div>
-      </div>
-
-      <input type="hidden" name="formid" value="{{ form_id }}">
-      <input type="hidden" name="addr_to" value="{{ data.addr_to }}">
-      <input type="hidden" name="addr_from" value="{{ data.addr_from }}">
-      <input type="hidden" name="coin_from" value="{{ data.coin_from }}">
-      <input type="hidden" name="fee_from_extra" value="{{ data.fee_from_extra }}">
-      <input type="hidden" name="coin_to" value="{{ data.coin_to }}">
-      <input type="hidden" name="fee_to_extra" value="{{ data.fee_to_extra }}">
-      {% if data.automation_strat_id != -1 %}
-      <input type="hidden" name="automation_strat_id" value="{{ data.automation_strat_id }}">
-      {% endif %}
-      {% if data.amt_var==true %}
-      <input type="hidden" name="amt_var" value="av">
-      {% endif %}
-      {% if data.rate_var==true %}
-      <input type="hidden" name="rate_var" value="rv">
-      {% endif %}
-     </form>
-
-     <script src="static/js/new_offer.js"></script>
     </div>
-   </div>
   </div>
- </div>
 </div>
 {% include 'footer.html' %}
-
 </body>
-
-</html>
+</html>
\ No newline at end of file
diff --git a/basicswap/templates/offer_new_1.html b/basicswap/templates/offer_new_1.html
index 96538a0..fcb593e 100644
--- a/basicswap/templates/offer_new_1.html
+++ b/basicswap/templates/offer_new_1.html
@@ -24,13 +24,9 @@
       </div>
     </div>
   </section>
-
   <section class="py-4">
     <div class="container px-4 mx-auto">
-      <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden">
-        <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt="">
-        <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt="">
-        <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
+      <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden"> <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
         <div class="relative z-20 flex flex-wrap items-center -m-3">
           <div class="w-full md:w-1/2 p-3">
             <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">Place an new offer</h2>
@@ -40,53 +36,50 @@
       </div>
     </div>
   </section>
-
   <section class="bg-white">
     <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden bg-white rounded-t-md">
       <div class="pb-6 border-coolGray-100">
         <div class="flex flex-wrap items-center justify-between -m-2">
           <div class="w-full p-2">
-
-{% include 'inc_messages.html' %}
-
+            {% include 'inc_messages.html' %}
             <div class="p-5 mb-10">
-                <div class="mx-4 p-4">
-                    <div class="flex items-center">
-                        <div class="flex items-center text-teal-600 relative">
-                            <div class="rounded-full h-12 w-12 py-3 border-2 border-blue-500">
-                                <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
-                                    <g fill="#3b82f6"><polygon points="14.5 23.5 11.5 23.5 11.5 4.321 6.766 8.108 4.892 5.766 11.474 0.5 14.5 0.5 14.5 23.5" fill="#3b82f6"></polygon>
-                                    </g>
-                                </svg>
-                            </div>
-                            <div class="absolute top-0 -ml-10 text-center mt-16 w-32 text-xs font-medium uppercase text-gray-500">Step 1</div>
-                        </div>
-                        <div class="flex-auto border-t-2 border-teal-600"></div>
-                        <div class="flex items-center text-teal-600 relative">
-                            <div class="rounded-full transition duration-500 ease-in-out h-12 w-12 py-3 border-2 border-teal-600">
-                              <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
-                                <g fill="#3b82f6">
-                                <path d="M19.5,23.5H4.5V20.2l.667-.445C9.549,16.828,16.5,10.78,16.5,7c0-2.654-1.682-4-5-4A9.108,9.108,0,0,0,7.333,4.248L6.084,5.08,4.42,2.584l1.247-.832A11.963,11.963,0,0,1,11.5,0c4.935,0,8,2.683,8,7,0,5-6.5,10.662-10.232,13.5H19.5ZM6,21H6Z" fill="#d1d5db"></path>
-                              </g>
-                            </svg>
-                            </div>
-                            <div class="absolute top-0 -ml-10 text-center mt-16 w-32 text-xs font-medium uppercase text-gray-500">Step 2</div>
-                        </div>
-                        <div class="flex-auto border-t-2 border-teal-600"></div>
-                        <div class="flex items-center text-gray-500 relative">
-                            <div class="rounded-full transition duration-500 ease-in-out h-12 w-12 py-3 border-2 border-teal-600">
-                                <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
-                                  <g fill="#3b82f6" >
-                                    <polygon points="9 21 1 13 4 10 9 15 21 3 24 6 9 21" fill="#d1d5db"></polygon>
-                                  </g>
-                                </svg>
-                            </div>
-                            <div class="absolute top-0 -ml-10 text-center mt-16 w-32 text-xs font-medium uppercase text-gray-500">Confirm</div>
-                        </div>
+              <div class="mx-4 p-4">
+                <div class="flex items-center">
+                  <div class="flex items-center text-teal-600 relative">
+                    <div class="rounded-full h-12 w-12 py-3 border-2 border-blue-500">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
+                        <g fill="#3b82f6">
+                          <polygon points="14.5 23.5 11.5 23.5 11.5 4.321 6.766 8.108 4.892 5.766 11.474 0.5 14.5 0.5 14.5 23.5" fill="#3b82f6"></polygon>
+                        </g>
+                      </svg>
                     </div>
+                    <div class="absolute top-0 -ml-10 text-center mt-16 w-32 text-xs font-medium uppercase text-gray-500">Step 1</div>
+                  </div>
+                  <div class="flex-auto border-t-2 border-teal-600"></div>
+                  <div class="flex items-center text-teal-600 relative">
+                    <div class="rounded-full transition duration-500 ease-in-out h-12 w-12 py-3 border-2 border-teal-600">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
+                        <g fill="#3b82f6">
+                          <path d="M19.5,23.5H4.5V20.2l.667-.445C9.549,16.828,16.5,10.78,16.5,7c0-2.654-1.682-4-5-4A9.108,9.108,0,0,0,7.333,4.248L6.084,5.08,4.42,2.584l1.247-.832A11.963,11.963,0,0,1,11.5,0c4.935,0,8,2.683,8,7,0,5-6.5,10.662-10.232,13.5H19.5ZM6,21H6Z" fill="#d1d5db"></path>
+                        </g>
+                      </svg>
+                    </div>
+                    <div class="absolute top-0 -ml-10 text-center mt-16 w-32 text-xs font-medium uppercase text-gray-500">Step 2</div>
+                  </div>
+                  <div class="flex-auto border-t-2 border-teal-600"></div>
+                  <div class="flex items-center text-gray-500 relative">
+                    <div class="rounded-full transition duration-500 ease-in-out h-12 w-12 py-3 border-2 border-teal-600">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
+                        <g fill="#3b82f6">
+                          <polygon points="9 21 1 13 4 10 9 15 21 3 24 6 9 21" fill="#d1d5db"></polygon>
+                        </g>
+                      </svg>
+                    </div>
+                    <div class="absolute top-0 -ml-10 text-center mt-16 w-32 text-xs font-medium uppercase text-gray-500">Confirm</div>
+                  </div>
                 </div>
+              </div>
             </div>
-
             <form method="post" autocomplete="off">
               <div class="py-6 border-b border-t border-coolGray-100">
                 <div class="w-full md:w-10/12">
@@ -101,7 +94,7 @@
                         </svg>
                         <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
                           <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
-                            <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round" >
+                            <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round">
                               <line data-cap="butt" x1="7.6" y1="10.5" x2="16.4" y2="5.5" stroke="#3b82f6"></line>
                               <line data-cap="butt" x1="7.6" y1="13.5" x2="16.4" y2="18.5" stroke="#3b82f6"></line>
                               <circle cx="5" cy="12" r="3"></circle>
@@ -114,14 +107,13 @@
                           <option{% if data.addr_to=="-1" %} selected{% endif %} value="-1">Public Network</option>
                             {% for a in addrs_to %}
                             <option{% if data.addr_to==a[0] %} selected{% endif %} value="{{ a[0] }}">{{ a[0] }} {{ a[1] }}</option>
-                              {% endfor %}
-                        </select>
+                            {% endfor %}
+                          </select>
                       </div>
                     </div>
                   </div>
                 </div>
               </div>
-
               <div class="py-6 border-b border-coolGray-100">
                 <div class="w-full md:w-10/12">
                   <div class="flex flex-wrap -m-3">
@@ -135,7 +127,7 @@
                         </svg>
                         <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
                           <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
-                            <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round" >
+                            <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round">
                               <path data-cap="butt" d="M11.992,11.737,14.2,13.4A2,2,0,0,1,15,15v1H7V15a2,2,0,0,1,.8-1.6l2.208-1.663" stroke="#3b82f6"></path>
                               <rect x="9" y="7" width="4" height="5" rx="2" ry="2" stroke="#3b82f6"></rect>
                               <path d="M2,1H18a2,2,0,0,1,2,2V21a2,2,0,0,1-2,2H2Z"></path>
@@ -146,7 +138,7 @@
                         <select class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="addr_from">
                           {% for a in addrs %}
                           <option{% if data.addr_from==a[0] %} selected{% endif %} value="{{ a[0] }}">{{ a[0] }} {{ a[1] }}</option>
-                            {% endfor %}
+                          {% endfor %}
                             <option{% if data.addr_from=="-1" %} selected{% endif %} value="-1">New Address</option>
                         </select>
                       </div>
@@ -154,7 +146,6 @@
                   </div>
                 </div>
               </div>
-
               <div class="py-6 border-b border-coolGray-100">
                 <div class="w-full md:w-10/12">
                   <div class="flex flex-wrap -m-3">
@@ -171,8 +162,8 @@
                             <select is="ms-dropdown" class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-5" id="coin_from" name="coin_from" onchange="set_rate('coin_from');">
                               <option value="-1" data-image="/static/images/other/placeholder-line.png">You Send</option>
                               {% for c in coins_from %}
-                              <option{% if data.coin_from==c[0] %} selected{% endif %} value="{{ c[0] }}" data-image="/static/images/coins/{{ c[1]|replace(" ", "-") }}.png">{{ c[1] }}</option>
-                                {% endfor %}
+                             <option{% if data.coin_to==c[0] %} selected{% endif %} value="{{ c[0] }}" data-image="/static/images/coins/{{ c[1]|replace(" ", "-") }}.png">{{ c[1] }}</option>
+                              {% endfor %}
                             </select>
                           </div>
                         </div>
@@ -180,7 +171,7 @@
                           <div class="relative">
                             <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
                               <svg xmlns="http://www.w3.org/2000/svg" height="30" width="30" viewBox="0 0 24 24">
-                                <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round" >
+                                <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round">
                                   <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path>
                                   <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline>
                                   <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path>
@@ -189,26 +180,21 @@
                                 </g>
                               </svg>
                             </div>
-                            <input class="pl-14 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-5" placeholder="Amount you Send" type="text" id="amt_from" name="amt_from" value="{{ data.amt_from }}">
-
-                          </div>
+                            <input class="pl-14 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-5" placeholder="Amount you Send" type="text" id="amt_from" name="amt_from" value="{{ data.amt_from }}"> </div>
                         </div>
-
                       </div>
                     </div>
                   </div>
                 </div>
               </div>
-
               <div class="py-6 border-b border-coolGray-100">
                 <div class="w-full md:w-10/12">
                   <div class="flex flex-wrap -m-3">
                     <div class="w-full md:w-1/3 p-3">
-                       <p class="text-sm text-coolGray-800 font-semibold">You Get</p>
+                      <p class="text-sm text-coolGray-800 font-semibold">You Get</p>
                     </div>
                     <div class="w-full md:flex-1 p-3">
                       <div class="flex flex-wrap -m-3">
-
                         <div class="w-full md:w-1/2 p-3">
                           <div class="relative">
                             <svg class="absolute right-4 top-1/2 transform -translate-y-1/2 z-50" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -218,7 +204,7 @@
                               <option value="-1" data-image="/static/images/other/placeholder-line.png">You Get</option>
                               {% for c in coins %}
                               <option{% if data.coin_to==c[0] %} selected{% endif %} value="{{ c[0] }}" data-image="/static/images/coins/{{ c[1]|replace(" ", "-") }}.png">{{ c[1] }}</option>
-                                {% endfor %}
+                              {% endfor %}
                             </select>
                           </div>
                         </div>
@@ -226,7 +212,7 @@
                           <div class="relative">
                             <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
                               <svg xmlns="http://www.w3.org/2000/svg" height="30" width="30" viewBox="0 0 24 24">
-                                <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round" >
+                                <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round">
                                   <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path>
                                   <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline>
                                   <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path>
@@ -235,16 +221,13 @@
                                 </g>
                               </svg>
                             </div>
-                            <input class="pl-14 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-5 " placeholder="Amount you Get" type="text" id="amt_to" name="amt_to" value="{{ data.amt_to }}" onchange="set_rate('amt_to');">
-                          </div>
+                            <input class="pl-14 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-5 " placeholder="Amount you Get" type="text" id="amt_to" name="amt_to" value="{{ data.amt_to }}" onchange="set_rate('amt_to');"> </div>
                         </div>
-
                       </div>
                     </div>
                   </div>
                 </div>
               </div>
-
               <div class="py-6 border-b border-coolGray-100">
                 <div class="w-full md:w-10/12">
                   <div class="flex flex-wrap -m-3">
@@ -253,14 +236,13 @@
                     </div>
                     <div class="w-full md:flex-1 p-3">
                       <div class="flex flex-wrap -m-3">
-
                         <div class="w-full md:w-1/2 p-3">
                           <p class="mb-1.5 font-medium text-base text-coolGray-800">Minimum Bid Amount</p>
                           <div class="relative">
                             <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
                               <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
                                 <title>law</title>
-                                <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round" >
+                                <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round">
                                   <rect x="9.843" y="5.379" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -0.7635 13.1569)" width="11.314" height="4.243"></rect>
                                   <polyline points="3,23 3,19 15,19 15,23 "></polyline>
                                   <line x1="4" y1="15" x2="1" y2="15" stroke="#3b82f6"></line>
@@ -270,15 +252,14 @@
                                 </g>
                               </svg>
                             </div>
-                            <input class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" type="text" id="amt_bid_min" name="amt_bid_min" value="{{ data.amt_bid_min }}" title="Bids with an amount below the minimum bid value will be discarded">
-                          </div>
+                            <input class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" type="text" id="amt_bid_min" name="amt_bid_min" value="{{ data.amt_bid_min }}" title="Bids with an amount below the minimum bid value will be discarded"> </div>
                         </div>
                         <div class="w-full md:w-1/2 p-3">
                           <p class="mb-1.5 font-medium text-base text-coolGray-800">Rate</p>
                           <div class="relative">
                             <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
                               <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
-                                <g fill="#3b82f6" >
+                                <g fill="#3b82f6">
                                   <path d="M9,9h5L7,0,0,9H5V23a1,1,0,0,0,1,1H8a1,1,0,0,0,1-1Z" fill="#3b82f6"></path>
                                   <path d="M14,17a3,3,0,1,1,3-3A3,3,0,0,1,14,17Zm0-4a1,1,0,1,0,1,1A1,1,0,0,0,14,13Z" data-color="color-2"></path>
                                   <path d="M21,24a3,3,0,1,1,3-3A3,3,0,0,1,21,24Zm0-4a1,1,0,1,0,1,1A1,1,0,0,0,21,20Z" data-color="color-2"></path>
@@ -286,15 +267,13 @@
                                 </g>
                               </svg>
                             </div>
-                            <input class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" type="text" id="rate" name="rate" value="{{ data.rate }}" onchange="set_rate('rate');">
-                          </div>
+                            <input class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" type="text" id="rate" name="rate" value="{{ data.rate }}" onchange="set_rate('rate');"> </div>
                         </div>
                       </div>
                     </div>
                   </div>
                 </div>
               </div>
-
               <div class="py-6 border-coolGray-100">
                 <div class="w-full md:w-10/12">
                   <div class="flex flex-wrap -m-3">
@@ -318,7 +297,6 @@
                   </div>
                 </div>
               </div>
-
               <div class="py-6 border-b border-t border-coolGray-100">
                 <div class="w-full md:w-10/12">
                   <div class="flex flex-wrap -m-3">
@@ -326,14 +304,11 @@
                       <p class="text-sm text-coolGray-800 font-semibold">Rates</p>
                     </div>
                     <div class="w-full md:flex-1 p-3">
-                      <p id="rates_display">
-
-                      </p>
+                      <p id="rates_display"> </p>
                     </div>
                   </div>
                 </div>
               </div>
-
               <div class="p-6 pt-10 bg-white bg-opacity-60 mb-10 rounded-b-md mb-20">
                 <div class="w-full md:w-0/12">
                   <div class="flex flex-wrap justify-end -m-1.5">
@@ -367,161 +342,141 @@
                   </div>
                 </div>
               </div>
-
               <input type="hidden" name="formid" value="{{ form_id }}">
-              <input type="hidden" name="step1" value="a">
-            </form>
-
+              <input type="hidden" name="step1" value="a"> </form>
           </div>
         </div>
       </div>
     </div>
-
   </section>
-
   <script>
     const xhr_rates = new XMLHttpRequest();
     xhr_rates.onload = () => {
-        if (xhr_rates.status == 200) {
-            const obj = JSON.parse(xhr_rates.response);
-
-            inner_html = '<pre><code>' + JSON.stringify(obj, null, '  ') + '</code></pre>';
-            document.getElementById('rates_display').innerHTML = inner_html;
-        }
+      if (xhr_rates.status == 200) {
+        const obj = JSON.parse(xhr_rates.response);
+        inner_html = '<pre><code>' + JSON.stringify(obj, null, '  ') + '</code></pre>';
+        document.getElementById('rates_display').innerHTML = inner_html;
+      }
     }
-
     const xhr_rate = new XMLHttpRequest();
     xhr_rate.onload = () => {
-        if (xhr_rate.status == 200) {
-            const obj = JSON.parse(xhr_rate.response);
-
-            if (obj.hasOwnProperty('rate')) {
-                document.getElementById('rate').value = obj['rate'];
-            } else
-            if (obj.hasOwnProperty('amount_to')) {
-                document.getElementById('amt_to').value = obj['amount_to'];
-            } else
-            if (obj.hasOwnProperty('amount_from')) {
-                document.getElementById('amt_from').value = obj['amount_from'];
-            }
+      if (xhr_rate.status == 200) {
+        const obj = JSON.parse(xhr_rate.response);
+        if (obj.hasOwnProperty('rate')) {
+          document.getElementById('rate').value = obj['rate'];
         }
+        else
+        if (obj.hasOwnProperty('amount_to')) {
+          document.getElementById('amt_to').value = obj['amount_to'];
+        }
+        else
+        if (obj.hasOwnProperty('amount_from')) {
+          document.getElementById('amt_from').value = obj['amount_from'];
+        }
+      }
     }
-
     const xhr_rates_table = new XMLHttpRequest();
     xhr_rates_table.onload = () => {
-        if (xhr_rates_table.status == 200) {
-            const list = JSON.parse(xhr_rates_table.response);
-            headings = ['Source', 'Coin From', 'Coin To', 'Coin From USD Rate', 'Coin To USD Rate', 'Coin From BTC Rate', 'Coin To BTC Rate', 'Relative Rate'];
-            table = document.createElement('table');
-            table.setAttribute("class", "");
-
-            heading_head = document.createElement('thead');
-
-            headings_row = document.createElement('tr');
-            data_row.setAttribute("class", "");
-
-            for (let i = 0; i < headings.length; i++) {
-                column = document.createElement('th');
-                column.textContent = headings[i];
-                headings_row.appendChild(column);
-            }
-            table.appendChild(headings_row);
-
-            for (let i = 0; i < list.length; i++) {
-                data_row = document.createElement('tr');
-                for (let j = 0; j < list[i].length; j++) {
-                    column = document.createElement('td');
-                    column.textContent = list[i][j];
-                    data_row.appendChild(column);
-                }
-                table.appendChild(data_row);
-            }
-            // Clear existing
-            const display_node = document.getElementById("rates_display");
-            while (display_node.lastElementChild) {
-                display_node.removeChild(display_node.lastElementChild);
-            }
-
-            heading = document.createElement('h4');
-            heading.textContent = ''
-            display_node.appendChild(heading);
-            display_node.appendChild(table);
+      if (xhr_rates_table.status == 200) {
+        const list = JSON.parse(xhr_rates_table.response);
+        headings = ['Source', 'Coin From', 'Coin To', 'Coin From USD Rate', 'Coin To USD Rate', 'Coin From BTC Rate', 'Coin To BTC Rate', 'Relative Rate'];
+        table = document.createElement('table');
+        table.setAttribute("class", "");
+        heading_head = document.createElement('thead');
+        headings_row = document.createElement('tr');
+        data_row.setAttribute("class", "");
+        for (let i = 0; i < headings.length; i++) {
+          column = document.createElement('th');
+          column.textContent = headings[i];
+          headings_row.appendChild(column);
         }
+        table.appendChild(headings_row);
+        for (let i = 0; i < list.length; i++) {
+          data_row = document.createElement('tr');
+          for (let j = 0; j < list[i].length; j++) {
+            column = document.createElement('td');
+            column.textContent = list[i][j];
+            data_row.appendChild(column);
+          }
+          table.appendChild(data_row);
+        }
+        // Clear existing
+        const display_node = document.getElementById("rates_display");
+        while (display_node.lastElementChild) {
+          display_node.removeChild(display_node.lastElementChild);
+        }
+        heading = document.createElement('h4');
+        heading.textContent = ''
+        display_node.appendChild(heading);
+        display_node.appendChild(table);
+      }
     }
 
     function lookup_rates() {
-        const coin_from = document.getElementById('coin_from').value;
-        const coin_to = document.getElementById('coin_to').value;
-
-        if (coin_from == '-1' || coin_to == '-1') {
-            alert('Coins from and to must be set first.');
-            return;
-        }
-
-        inner_html = '<p>Updating...</p>';
-        document.getElementById('rates_display').innerHTML = inner_html;
-
-        xhr_rates.open('POST', '/json/rates');
-        xhr_rates.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
-        xhr_rates.send('coin_from='+coin_from+'&coin_to='+coin_to);
+      const coin_from = document.getElementById('coin_from').value;
+      const coin_to = document.getElementById('coin_to').value;
+      if (coin_from == '-1' || coin_to == '-1') {
+        alert('Coins from and to must be set first.');
+        return;
+      }
+      inner_html = '<p>Updating...</p>';
+      document.getElementById('rates_display').innerHTML = inner_html;
+      xhr_rates.open('POST', '/json/rates');
+      xhr_rates.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
+      xhr_rates.send('coin_from=' + coin_from + '&coin_to=' + coin_to);
     }
 
     function lookup_rates_table() {
-        const coin_from = document.getElementById('coin_from').value;
-        const coin_to = document.getElementById('coin_to').value;
-
-        if (coin_from == '-1' || coin_to == '-1') {
-            alert('Coins from and to must be set first.');
-            return;
-        }
-
-        inner_html = 'Updating...</p>';
-        document.getElementById('rates_display').innerHTML = inner_html;
-
-        xhr_rates_table.open('GET', '/json/rateslist?from='+coin_from+'&to='+coin_to);
-        xhr_rates_table.send();
+      const coin_from = document.getElementById('coin_from').value;
+      const coin_to = document.getElementById('coin_to').value;
+      if (coin_from == '-1' || coin_to == '-1') {
+        alert('Coins from and to must be set first.');
+        return;
+      }
+      inner_html = 'Updating...</p>';
+      document.getElementById('rates_display').innerHTML = inner_html;
+      xhr_rates_table.open('GET', '/json/rateslist?from=' + coin_from + '&to=' + coin_to);
+      xhr_rates_table.send();
     }
 
     function set_rate(value_changed) {
-        const coin_from = document.getElementById('coin_from').value;
-        const coin_to = document.getElementById('coin_to').value;
-        const amt_from = document.getElementById('amt_from').value;
-        const amt_to = document.getElementById('amt_to').value;
-        const rate = document.getElementById('rate').value;
-        const lock_rate = rate == '' ? false : document.getElementById('rate_lock').checked;
-
-        if (coin_from == '-1' || coin_to == '-1') {
-            return;
+      const coin_from = document.getElementById('coin_from').value;
+      const coin_to = document.getElementById('coin_to').value;
+      const amt_from = document.getElementById('amt_from').value;
+      const amt_to = document.getElementById('amt_to').value;
+      const rate = document.getElementById('rate').value;
+      const lock_rate = rate == '' ? false : document.getElementById('rate_lock').checked;
+      if (coin_from == '-1' || coin_to == '-1') {
+        return;
+      }
+      params = 'coin_from=' + coin_from + '&coin_to=' + coin_to;
+      if (value_changed == 'rate' || (lock_rate && value_changed == 'amt_from') || (amt_to == '' && value_changed == 'amt_from')) {
+        if (amt_from == '' || rate == '') {
+          return;
         }
-
-        params = 'coin_from='+coin_from+'&coin_to='+coin_to;
-        if (value_changed == 'rate' || (lock_rate && value_changed == 'amt_from') || (amt_to == '' && value_changed == 'amt_from')) {
-            if (amt_from == '' || rate == '') {
-                return;
-            }
-            params += '&rate='+rate+'&amt_from='+amt_from;
-        } else
-        if (lock_rate && value_changed == 'amt_to') {
-            if (amt_to == '' || rate == '') {
-                return;
-            }
-            params += '&amt_to='+amt_to+'&rate='+rate;
-        } else {
-            if (amt_from == '' || amt_to == '') {
-                return;
-            }
-            params += '&amt_from='+amt_from+'&amt_to='+amt_to;
+        params += '&rate=' + rate + '&amt_from=' + amt_from;
+      }
+      else
+      if (lock_rate && value_changed == 'amt_to') {
+        if (amt_to == '' || rate == '') {
+          return;
         }
-
-        xhr_rate.open('POST', '/json/rate');
-        xhr_rate.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
-        xhr_rate.send(params);
+        params += '&amt_to=' + amt_to + '&rate=' + rate;
+      }
+      else {
+        if (amt_from == '' || amt_to == '') {
+          return;
+        }
+        params += '&amt_from=' + amt_from + '&amt_to=' + amt_to;
+      }
+      xhr_rate.open('POST', '/json/rate');
+      xhr_rate.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
+      xhr_rate.send(params);
     }
   </script>
   <script src="static/js/new_offer.js"></script>
 </div>
-  {% include 'footer.html' %}
+{% include 'footer.html' %}
 </div>
 </body>
-
-</html>
+</html>
\ No newline at end of file
diff --git a/basicswap/templates/offer_new_2.html b/basicswap/templates/offer_new_2.html
index d2796d4..da43a97 100644
--- a/basicswap/templates/offer_new_2.html
+++ b/basicswap/templates/offer_new_2.html
@@ -1,590 +1,533 @@
 {% include 'header.html' %}
 <div class="container mx-auto">
- <section class="bg-white p-5 mt-5">
-  <div class="flex flex-wrap items-center -m-2">
-   <div class="w-full md:w-1/2 p-2">
-    <ul class="flex flex-wrap items-center gap-x-3 mb-2">
-     <li>
-      <a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/">
-       <p>Home</p>
-      </a>
-     </li>
-     <li>
-      <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-       <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
-      </svg>
-     </li>
-     <li><a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/newoffer">Place an new offer</a></li>
-     <li>
-      <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-       <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
-      </svg>
-     </li>
-     <li><a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="#">Setup offer parameters</a></li>
-     <li>
-      <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-       <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
-      </svg>
-     </li>
-    </ul>
-   </div>
-  </div>
- </section>
-
- <section class="py-4">
-  <div class="container px-4 mx-auto">
-   <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden"> <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
-    <div class="relative z-20 flex flex-wrap items-center -m-3">
-     <div class="w-full md:w-1/2 p-3">
-      <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">Setup offer parameters</h2>
-      <p class="font-semibold text-coolGray-200">Place a new offer on BasicSwap’s order book.</p>
-     </div>
-    </div>
-   </div>
-  </div>
- </section class="bg-white">
- <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden bg-white rounded-t-md">
-  <div class="pb-6 border-coolGray-100">
-   <div class="flex flex-wrap items-center justify-between -m-2">
-    <div class="w-full p-2">
-
-{% include 'inc_messages.html' %}
-
-     <div class="p-5 mb-10">
-         <div class="mx-4 p-4">
-             <div class="flex items-center">
-                 <div class="flex items-center text-teal-600 relative">
-                     <div class="rounded-full h-12 w-12 py-3 border-2 border-blue-500">
-                         <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
-                             <g fill="#3b82f6"><polygon points="14.5 23.5 11.5 23.5 11.5 4.321 6.766 8.108 4.892 5.766 11.474 0.5 14.5 0.5 14.5 23.5" fill="#3b82f6"></polygon>
-                             </g>
-                         </svg>
-                     </div>
-                     <div class="absolute top-0 -ml-10 text-center mt-16 w-32 text-xs font-medium uppercase text-gray-500">Step 1</div>
-                 </div>
-                 <div class="flex-auto border-t-2 border-blue-500"></div>
-                 <div class="flex items-center text-teal-600 relative">
-                     <div class="rounded-full transition duration-500 ease-in-out h-12 w-12 py-3 border-2 border-blue-500">
-                       <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
-                         <g fill="#3b82f6">
-                         <path d="M19.5,23.5H4.5V20.2l.667-.445C9.549,16.828,16.5,10.78,16.5,7c0-2.654-1.682-4-5-4A9.108,9.108,0,0,0,7.333,4.248L6.084,5.08,4.42,2.584l1.247-.832A11.963,11.963,0,0,1,11.5,0c4.935,0,8,2.683,8,7,0,5-6.5,10.662-10.232,13.5H19.5ZM6,21H6Z" fill="#3b82f6"></path>
-                       </g>
-                     </svg>
-                     </div>
-                     <div class="absolute top-0 -ml-10 text-center mt-16 w-32 text-xs font-medium uppercase text-gray-500">Step 2</div>
-                 </div>
-                 <div class="flex-auto border-t-2 border-teal-600"></div>
-                 <div class="flex items-center text-gray-500 relative">
-                     <div class="rounded-full transition duration-500 ease-in-out h-12 w-12 py-3 border-2 border-teal-600">
-                         <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
-                           <g fill="#3b82f6" >
-                             <polygon points="9 21 1 13 4 10 9 15 21 3 24 6 9 21" fill="#d1d5db"></polygon>
-                           </g>
-                         </svg>
-                     </div>
-                     <div class="absolute top-0 -ml-10 text-center mt-16 w-32 text-xs font-medium uppercase text-gray-500">Confirm</div>
-                 </div>
-             </div>
-         </div>
-     </div>
-
-     <form method="post">
-      <div class="py-6 border-b border-coolGray-100">
-       <div class="w-full md:w-10/12">
-        <div class="flex flex-wrap -m-3">
-         <div class="w-full md:w-1/3 p-3">
-          <p class="text-sm text-coolGray-800 font-semibold">Select network</p>
-         </div>
-         <div class="w-full md:flex-1 p-3">
-          <div class="relative">
-           <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path>
-           </svg>
-           <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
-            <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
-             <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round" >
-              <line data-cap="butt" x1="7.6" y1="10.5" x2="16.4" y2="5.5" stroke="#3b82f6"></line>
-              <line data-cap="butt" x1="7.6" y1="13.5" x2="16.4" y2="18.5" stroke="#3b82f6"></line>
-              <circle cx="5" cy="12" r="3"></circle>
-              <circle cx="19" cy="4" r="3"></circle>
-              <circle cx="19" cy="20" r="3"></circle>
-             </g>
+  <section class="bg-white p-5 mt-5">
+    <div class="flex flex-wrap items-center -m-2">
+      <div class="w-full md:w-1/2 p-2">
+        <ul class="flex flex-wrap items-center gap-x-3 mb-2">
+          <li>
+            <a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/">
+              <p>Home</p>
+            </a>
+          </li>
+          <li>
+            <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
             </svg>
-           </div>
-           <select class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="addr_to" disabled>
-            <option{% if data.addr_to=="-1" %} selected{% endif %} value="-1">Public Network</option>
-             {% for a in addrs_to %}
-             <option{% if data.addr_to==a[0] %} selected{% endif %} value="{{ a[0] }}">{{ a[0] }} {{ a[1] }}</option>
-              {% endfor %}
-           </select>
-          </div>
-         </div>
-        </div>
-       </div>
-      </div>
-
-      <div class="py-6 border-b border-coolGray-100">
-       <div class="w-full md:w-10/12">
-        <div class="flex flex-wrap -m-3">
-         <div class="w-full md:w-1/3 p-3">
-          <p class="text-sm text-coolGray-800 font-semibold">Select address</p>
-         </div>
-         <div class="w-full md:flex-1 p-3">
-          <div class="relative">
-           <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path>
-           </svg>
-           <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
-            <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
-             <title>contacts 2</title>
-             <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round" >
-              <path data-cap="butt" d="M11.992,11.737,14.2,13.4A2,2,0,0,1,15,15v1H7V15a2,2,0,0,1,.8-1.6l2.208-1.663" stroke="#3b82f6"></path>
-              <rect x="9" y="7" width="4" height="5" rx="2" ry="2" stroke="#3b82f6"></rect>
-              <path d="M2,1H18a2,2,0,0,1,2,2V21a2,2,0,0,1-2,2H2Z"></path>
-              <line x1="23" y1="5" x2="23" y2="9" stroke="#3b82f6"></line>
-             </g>
+          </li>
+          <li><a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/newoffer">Place an new offer</a></li>
+          <li>
+            <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
             </svg>
-           </div>
-           <select class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="addr_from" disabled>
-            {% for a in addrs %}
-            <option{% if data.addr_from==a[0] %} selected{% endif %} value="{{ a[0] }}">{{ a[0] }} {{ a[1] }}</option>
-             {% endfor %}
-             <option{% if data.addr_from=="-1" %} selected{% endif %} value="-1">New Address</option>
-           </select>
-          </div>
-         </div>
-        </div>
-       </div>
+          </li>
+          <li><a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="#">Setup offer parameters</a></li>
+          <li>
+            <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
+            </svg>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </section>
+  <section class="py-4">
+    <div class="container px-4 mx-auto">
+      <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden"> <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
+        <div class="relative z-20 flex flex-wrap items-center -m-3">
+          <div class="w-full md:w-1/2 p-3">
+            <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">Setup offer parameters</h2>
+            <p class="font-semibold text-coolGray-200">Place a new offer on BasicSwap’s order book.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section class="bg-white">
+  <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden bg-white rounded-t-md">
+    <div class="pb-6 border-coolGray-100">
+      <div class="flex flex-wrap items-center justify-between -m-2">
+        <div class="w-full p-2">
+          {% include 'inc_messages.html' %}
+          <div class="p-5 mb-10">
+            <div class="mx-4 p-4">
+              <div class="flex items-center">
+                <div class="flex items-center text-teal-600 relative">
+                  <div class="rounded-full h-12 w-12 py-3 border-2 border-blue-500">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
+                      <g fill="#3b82f6">
+                        <polygon points="14.5 23.5 11.5 23.5 11.5 4.321 6.766 8.108 4.892 5.766 11.474 0.5 14.5 0.5 14.5 23.5" fill="#3b82f6"></polygon>
+                      </g>
+                    </svg>
+                  </div>
+                  <div class="absolute top-0 -ml-10 text-center mt-16 w-32 text-xs font-medium uppercase text-gray-500">Step 1</div>
+                </div>
+                <div class="flex-auto border-t-2 border-blue-500"></div>
+                <div class="flex items-center text-teal-600 relative">
+                  <div class="rounded-full transition duration-500 ease-in-out h-12 w-12 py-3 border-2 border-blue-500">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
+                      <g fill="#3b82f6">
+                        <path d="M19.5,23.5H4.5V20.2l.667-.445C9.549,16.828,16.5,10.78,16.5,7c0-2.654-1.682-4-5-4A9.108,9.108,0,0,0,7.333,4.248L6.084,5.08,4.42,2.584l1.247-.832A11.963,11.963,0,0,1,11.5,0c4.935,0,8,2.683,8,7,0,5-6.5,10.662-10.232,13.5H19.5ZM6,21H6Z" fill="#3b82f6"></path>
+                      </g>
+                    </svg>
+                  </div>
+                  <div class="absolute top-0 -ml-10 text-center mt-16 w-32 text-xs font-medium uppercase text-gray-500">Step 2</div>
+                </div>
+                <div class="flex-auto border-t-2 border-teal-600"></div>
+                <div class="flex items-center text-gray-500 relative">
+                  <div class="rounded-full transition duration-500 ease-in-out h-12 w-12 py-3 border-2 border-teal-600">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
+                      <g fill="#3b82f6">
+                        <polygon points="9 21 1 13 4 10 9 15 21 3 24 6 9 21" fill="#d1d5db"></polygon>
+                      </g>
+                    </svg>
+                  </div>
+                  <div class="absolute top-0 -ml-10 text-center mt-16 w-32 text-xs font-medium uppercase text-gray-500">Confirm</div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <form method="post">
+            <div class="py-6 border-b border-coolGray-100">
+              <div class="w-full md:w-10/12">
+                <div class="flex flex-wrap -m-3">
+                  <div class="w-full md:w-1/3 p-3">
+                    <p class="text-sm text-coolGray-800 font-semibold">Select network</p>
+                  </div>
+                  <div class="w-full md:flex-1 p-3">
+                    <div class="relative">
+                      <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path>
+                      </svg>
+                      <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
+                        <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
+                          <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round">
+                            <line data-cap="butt" x1="7.6" y1="10.5" x2="16.4" y2="5.5" stroke="#3b82f6"></line>
+                            <line data-cap="butt" x1="7.6" y1="13.5" x2="16.4" y2="18.5" stroke="#3b82f6"></line>
+                            <circle cx="5" cy="12" r="3"></circle>
+                            <circle cx="19" cy="4" r="3"></circle>
+                            <circle cx="19" cy="20" r="3"></circle>
+                          </g>
+                        </svg>
+                      </div>
+                      <select class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="addr_to" disabled>
+                        <option{% if data.addr_to=="-1" %} selected{% endif %} value="-1">Public Network</option> 
+                          {% for a in addrs_to %}
+                          <option{% if data.addr_to==a[0] %} selected{% endif %} value="{{ a[0] }}">{{ a[0] }} {{ a[1] }}</option>
+                          {% endfor %}
+                        </select>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="py-6 border-b border-coolGray-100">
+              <div class="w-full md:w-10/12">
+                <div class="flex flex-wrap -m-3">
+                  <div class="w-full md:w-1/3 p-3">
+                    <p class="text-sm text-coolGray-800 font-semibold">Select address</p>
+                  </div>
+                  <div class="w-full md:flex-1 p-3">
+                    <div class="relative">
+                      <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path>
+                      </svg>
+                      <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
+                        <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
+                          <title>contacts 2</title>
+                          <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round">
+                            <path data-cap="butt" d="M11.992,11.737,14.2,13.4A2,2,0,0,1,15,15v1H7V15a2,2,0,0,1,.8-1.6l2.208-1.663" stroke="#3b82f6"></path>
+                            <rect x="9" y="7" width="4" height="5" rx="2" ry="2" stroke="#3b82f6"></rect>
+                            <path d="M2,1H18a2,2,0,0,1,2,2V21a2,2,0,0,1-2,2H2Z"></path>
+                            <line x1="23" y1="5" x2="23" y2="9" stroke="#3b82f6"></line>
+                          </g>
+                        </svg>
+                      </div>
+                      <select class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="addr_from" disabled> {% for a in addrs %}
+                        <option{% if data.addr_from==a[0] %} selected{% endif %} value="{{ a[0] }}">{{ a[0] }} {{ a[1] }}</option> {% endfor %}
+                          <option{% if data.addr_from=="-1" %} selected{% endif %} value="-1">New Address</option>
+                      </select>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="py-6 border-b border-coolGray-100">
+              <div class="w-full md:w-10/12">
+                <div class="flex flex-wrap -m-3">
+                  <div class="w-full md:w-1/3 p-3">
+                    <p class="text-sm text-coolGray-800 font-semibold">You Send</p>
+                  </div>
+                  <div class="w-full md:flex-1 p-3">
+                    <div class="flex flex-wrap -m-3">
+                      <div class="w-full md:w-1/2 p-3">
+                        <div class="relative">
+                          <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path>
+                          </svg>
+                          <select is="ms-dropdown" class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-5" id="coin_from" name="coin_from" onchange="set_rate('coin_from');" disabled>
+                            <option value="-1" data-image="/static/images/other/placeholder-line.png">Coin</option>
+                            {% for c in coins_from %}
+                            <option{% if data.coin_from==c[0] %} selected{% endif %} value="{{ c[0] }}" data-image="/static/images/coins/{{ c[1]|replace(" ", "-") }}.png">{{ c[1] }}</option>
+                            {% endfor %}
+                          </select>
+                        </div>
+                      </div>
+                      <div class="w-full md:w-1/2 p-3">
+                        <div class="relative">
+                          <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
+                            <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
+                              <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round">
+                                <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path>
+                                <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline>
+                                <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path>
+                                <polyline points="18.654 16.071 17.068 21.763 22.865 21.034"></polyline>
+                                <path data-cap="butt" d="M12.211,1a11,11,0,0,1,4.857,20.763"></path>
+                              </g>
+                            </svg>
+                          </div>
+                          <input class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none block w-full p-5 opacity-70" type="text" id="amt_from" name="amt_from" value="{{ data.amt_from }}" onchange="set_rate('amt_from');" readonly> </div>
+                      </div>
+                      {% if data.swap_style == 'xmr' %}
+                      <div class="w-full md:w-1/2 p-3">
+                        <p class="mb-1.5 font-medium text-base text-coolGray-800">Fee From Confirm Target</p>
+                        <div class="relative">
+                          <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
+                            <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
+                              <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round">
+                                <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path>
+                                <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline>
+                                <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path>
+                                <polyline points="18.654 16.071 17.068 21.763 22.865 21.034"></polyline>
+                                <path data-cap="butt" d="M12.211,1a11,11,0,0,1,4.857,20.763"></path>
+                              </g>
+                            </svg>
+                          </div>
+                          <input class="pl-10 appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" type="number" name="fee_from_conf" min="1" max="32" value="{{ data.fee_from_conf }}"> </div>
+                      </div>
+                      <div class="w-full md:w-1/2 p-3">
+                        <p class="mb-1.5 font-medium text-base text-coolGray-800">Fee From Increase By</p>
+                        <div class="relative">
+                          <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path>
+                          </svg>
+                          <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
+                            <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
+                              <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round">
+                                <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path>
+                                <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline>
+                                <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path>
+                                <polyline points="18.654 16.071 17.068 21.763 22.865 21.034"></polyline>
+                                <path data-cap="butt" d="M12.211,1a11,11,0,0,1,4.857,20.763"></path>
+                              </g>
+                            </svg>
+                          </div>
+                          <select class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="fee_from_extra">
+                            <option value="0">None</option>
+                            <option value="10" {% if data.fee_from_extra==10 %} selected{% endif %}>10%</option>
+                            <option value="50" {% if data.fee_from_extra==50 %} selected{% endif %}>50%</option>
+                            <option value="100" {% if data.fee_from_extra==100 %} selected{% endif %}>100%</option>
+                          </select>
+                        </div>
+                      </div>
+                    {% endif %}
+                  </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="py-6 border-b border-coolGray-100">
+              <div class="w-full md:w-10/12">
+                <div class="flex flex-wrap -m-3">
+                  <div class="w-full md:w-1/3 p-3">
+                    <p class="text-sm text-coolGray-800 font-semibold">You Get</p>
+                  </div>
+                  <div class="w-full md:flex-1 p-3">
+                    <div class="flex flex-wrap -m-3">
+                      <div class="w-full md:w-1/2 p-3">
+                        <div class="relative">
+                          <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path>
+                          </svg>
+                          <select is="ms-dropdown" class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-5" id="coin_to" name="coin_to" onchange="set_rate('coin_to');" disabled>
+                            <option value="-1" data-image="/static/images/other/placeholder-line.png">Coin</option>
+                            {% for c in coins %}
+                            <option{% if data.coin_to==c[0] %} selected{% endif %} value="{{ c[0] }}" data-image="/static/images/coins/{{ c[1]|replace(" ", "-") }}.png">{{ c[1] }}</option>
+                            {% endfor %}
+                          </select>
+                        </div>
+                      </div>
+                      <div class="w-full md:w-1/2 p-3">
+                        <div class="relative">
+                          <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
+                            <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
+                              <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round">
+                                <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path>
+                                <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline>
+                                <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path>
+                                <polyline points="18.654 16.071 17.068 21.763 22.865 21.034"></polyline>
+                                <path data-cap="butt" d="M12.211,1a11,11,0,0,1,4.857,20.763"></path>
+                              </g>
+                            </svg>
+                          </div>
+                          <input class="pl-10 pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none block w-full p-5 opacity-70" type="text" id="amt_to" name="amt_to" value="{{ data.amt_to }}" onchange="set_rate('amt_to');" readonly> </div>
+                      </div>
+                      {% if data.swap_style == 'xmr' and coin_to != '6' %}
+                      <div class="w-full md:w-1/2 p-3">
+                        <p class="mb-1.5 font-medium text-base text-coolGray-800">Fee From Confirm Target</p>
+                        <div class="relative">
+                          <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
+                            <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
+                              <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round">
+                                <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path>
+                                <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline>
+                                <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path>
+                                <polyline points="18.654 16.071 17.068 21.763 22.865 21.034"></polyline>
+                                <path data-cap="butt" d="M12.211,1a11,11,0,0,1,4.857,20.763"></path>
+                              </g>
+                            </svg>
+                          </div>
+                          <input class="pl-10 appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" type="number" name="fee_to_conf" min="1" max="32" value="{{ data.fee_from_conf }}"> </div>
+                      </div>
+                      <div class="w-full md:w-1/2 p-3">
+                        <p class="mb-1.5 font-medium text-base text-coolGray-800">Fee From Increase By</p>
+                        <div class="relative">
+                          <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path>
+                          </svg>
+                          <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
+                            <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
+                              <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round">
+                                <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path>
+                                <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline>
+                                <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path>
+                                <polyline points="18.654 16.071 17.068 21.763 22.865 21.034"></polyline>
+                                <path data-cap="butt" d="M12.211,1a11,11,0,0,1,4.857,20.763"></path>
+                              </g>
+                            </svg>
+                          </div>
+                          <select class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="fee_to_extra">
+                            <option value="0">None</option>
+                            <option value="10" {% if data.fee_from_extra==10 %} selected{% endif %}>10%</option>
+                            <option value="50" {% if data.fee_from_extra==50 %} selected{% endif %}>50%</option>
+                            <option value="100" {% if data.fee_from_extra==100 %} selected{% endif %}>100%</option>
+                          </select>
+                        </div>
+                      </div>
+                    {% endif %}
+                  </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="py-6 border-b border-coolGray-100">
+              <div class="w-full md:w-10/12">
+                <div class="flex flex-wrap -m-3">
+                  <div class="w-full md:w-1/3 p-3">
+                    <p class="text-sm text-coolGray-800 font-semibold">Bid amount</p>
+                  </div>
+                  <div class="w-full md:flex-1 p-3">
+                    <div class="flex flex-wrap -m-3">
+                      <div class="w-full md:w-1/2 p-3">
+                        <p class="mb-1.5 font-medium text-base text-coolGray-800">Minimum Bid Amount</p>
+                        <div class="relative">
+                          <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
+                            <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
+                              <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round">
+                                <rect x="9.843" y="5.379" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -0.7635 13.1569)" width="11.314" height="4.243"></rect>
+                                <polyline points="3,23 3,19 15,19 15,23 "></polyline>
+                                <line x1="4" y1="15" x2="1" y2="15" stroke="#3b82f6"></line>
+                                <line x1="5.757" y1="10.757" x2="3.636" y2="8.636" stroke="#3b82f6"></line>
+                                <line x1="1" y1="23" x2="17" y2="23"></line>
+                                <line x1="17" y1="9" x2="23" y2="15"></line>
+                              </g>
+                            </svg>
+                          </div>
+                          <input class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none block w-full p-2.5 opacity-70" type="text" id="amt_bid_min" name="amt_bid_min" value="{{ data.amt_bid_min }}" title="Bids with an amount below the minimum bid value will be discarded" readonly> </div>
+                      </div>
+                      <div class="w-full md:w-1/2 p-3">
+                        <p class="mb-1.5 font-medium text-base text-coolGray-800">Rate</p>
+                        <div class="relative">
+                          <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
+                            <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
+                              <g fill="#3b82f6">
+                                <path d="M9,9h5L7,0,0,9H5V23a1,1,0,0,0,1,1H8a1,1,0,0,0,1-1Z" fill="#3b82f6"></path>
+                                <path d="M14,17a3,3,0,1,1,3-3A3,3,0,0,1,14,17Zm0-4a1,1,0,1,0,1,1A1,1,0,0,0,14,13Z" data-color="color-2"></path>
+                                <path d="M21,24a3,3,0,1,1,3-3A3,3,0,0,1,21,24Zm0-4a1,1,0,1,0,1,1A1,1,0,0,0,21,20Z" data-color="color-2"></path>
+                                <path d="M13,23a1,1,0,0,1-.707-1.707l9-9a1,1,0,0,1,1.414,1.414l-9,9A1,1,0,0,1,13,23Z" data-color="color-2"></path>
+                              </g>
+                            </svg>
+                          </div>
+                          <input class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none block w-full p-2.5 opacity-70" type="text" id="rate" name="rate" value="{{ data.rate }}" onchange="set_rate('rate');" readonly> </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="py-6 border-b border-coolGray-100">
+              <div class="w-full md:w-10/12">
+                <div class="flex flex-wrap -m-3">
+                  <div class="w-full md:w-1/3 p-3">
+                    <p class="text-sm text-coolGray-800 font-semibold">Time</p>
+                  </div>
+                  <div class="w-full md:flex-1 p-3">
+                    <div class="flex flex-wrap -m-3">
+                      <div class="w-full md:w-1/2 p-3">
+                        <p class="mb-1.5 font-medium text-base text-coolGray-800">Offer valid (hrs)</p>
+                        <div class="relative">
+                          <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
+                            <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
+                              <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round">
+                                <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path>
+                                <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline>
+                                <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path>
+                                <polyline points="18.654 16.071 17.068 21.763 22.865 21.034"></polyline>
+                                <path data-cap="butt" d="M12.211,1a11,11,0,0,1,4.857,20.763"></path>
+                              </g>
+                            </svg>
+                          </div>
+                          <input class="pl-10 appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" type="number" name="validhrs" min="1" max="48" value="{{ data.validhrs }}"> </div>
+                      </div>
+                      {% if data.debug_ui == true %}
+                      <div class="w-full md:w-1/2 p-3">
+                        <p class="mb-1.5 font-medium text-base text-coolGray-800">Contract Locked (Mins)</p>
+                        <div class="relative">
+                          <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
+                            <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
+                              <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round">
+                                <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path>
+                                <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline>
+                                <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path>
+                                <polyline points="18.654 16.071 17.068 21.763 22.865 21.034"></polyline>
+                                <path data-cap="butt" d="M12.211,1a11,11,0,0,1,4.857,20.763"></path>
+                              </g>
+                            </svg>
+                          </div>
+                          <input class="pl-10 appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" type="number" name="lockmins" min="10" max="5000" value="{{ data.lockmins }}"> </div> {% if data.swap_style != 'xmr' %}
+                        <div class="text-sm text-gray-500 mt-1.5">(Participate txn will be locked for half the time.)</div>
+                      {% endif %}
+                    </div>
+                    {% else %}
+                      <div class="w-full md:w-1/2 p-3">
+                        <p class="mb-1.5 font-medium text-base text-coolGray-800">Contract locked (Hours)</p>
+                        <div class="relative">
+                          <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
+                            <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
+                              <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round">
+                                <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path>
+                                <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline>
+                                <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path>
+                                <polyline points="18.654 16.071 17.068 21.763 22.865 21.034"></polyline>
+                                <path data-cap="butt" d="M12.211,1a11,11,0,0,1,4.857,20.763"></path>
+                              </g>
+                            </svg>
+                          </div>
+                          <input class="pl-10 appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" type="number" name="lockhrs" min="1" max="96" value="{{ data.lockhrs }}"> </div>
+                          {% if data.swap_style != 'xmr' %}
+                        <div class="text-sm text-gray-500 mt-1.5">(Participate txn will be locked for half the time.)</div>
+                      {% endif %}
+                    </div>
+                  {% endif %}
+                </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="py-6 border-b border-coolGray-100">
+              <div class="w-full md:w-10/12">
+                <div class="flex flex-wrap -m-3">
+                  <div class="w-full md:w-1/3 p-3">
+                    <p class="text-sm text-coolGray-800 font-semibold">Strategy (BETA)</p>
+                  </div>
+                  <div class="w-full md:flex-1 p-3">
+                    <div class="flex flex-wrap -m-3">
+                      <div class="w-full md:w-1/2 p-3">
+                        <p class="mb-1.5 font-medium text-base text-coolGray-800">Auto Accept Strategy</p>
+                        <div class="relative">
+                          <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path>
+                          </svg>
+                          <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
+                            <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
+                              <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round">
+                                <circle cx="12" cy="12" r="5" stroke="#3b82f6" data-cap="butt"></circle>
+                                <polygon points="5 6 2 4 5 2 5 6" fill="#3b82f6" stroke="none"></polygon>
+                                <polygon points="19 18 22 20 19 22 19 18" fill="#3b82f6" stroke="none"></polygon>
+                                <polygon points="5 6 2 4 5 2 5 6"></polygon>
+                                <line x1="5" y1="4" x2="9" y2="4"></line>
+                                <polygon points="19 18 22 20 19 22 19 18"></polygon>
+                                <line x1="19" y1="20" x2="15" y2="20"></line>
+                              </g>
+                            </svg>
+                          </div>
+                          <select class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="automation_strat_id">
+                            <option value="-1" {% if data.automation_strat_id==-1 %} selected{% endif %}>None</option> 
+                            {% for a in automation_strategies %}
+                            <option value="{{ a[0] }}" {% if data.automation_strat_id==a[0] %} selected{% endif %}>{{ a[1] }}</option>
+                          {% endfor %}
+                        </select>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="py-6 border-coolGray-100">
+              <div class="w-full md:w-10/12">
+                <div class="flex flex-wrap -m-3">
+                  <div class="w-full md:w-1/3 p-3">
+                    <p class="text-sm text-coolGray-800 font-semibold">Options</p>
+                  </div>
+                  <div class="w-full md:flex-1 p-3">
+                    <div class="form-check form-check-inline">
+                      <input class="form-check-input h-4 w-4 border border-gray-300 rounded-sm bg-gray-50 checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer" type="checkbox" id="amt_var" name="amt_var" value="av" {% if data.amt_var==true %} checked="checked" {% endif %} disabled>
+                      <label class="form-check-label inline-block text-gray-800" for="inlineCheckbox2">Amount Variable</label>
+                    </div>
+                    <div class="form-check form-check-inline">
+                      <input class="form-check-input h-4 w-4 border border-gray-300 rounded-sm bg-gray-50 checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer" type="checkbox" id="rate_var" name="rate_var" value="rv" {% if data.rate_var==true %} checked="checked" {% endif %} disabled>
+                      <label class="form-check-label bg-gray-50inline-block text-gray-800" for="inlineCheckbox3">Rate Variable</label>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="p-6 pt-10 bg-white bg-opacity-60 rounded-b-md">
+              <div class="w-full md:w-0/12">
+                <div class="flex flex-wrap justify-end -m-1.5">
+                  <div class="w-full md:w-auto p-1.5">
+                    <button name="step1" type="submit" value="Back" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none">
+                      <svg class="mr-2" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
+                        <g fill="#556987">
+                          <path fill="#556987" d="M12,3c1.989,0,3.873,0.65,5.43,1.833l-3.604,3.393l9.167,0.983L22.562,0l-3.655,3.442 C16.957,1.862,14.545,1,12,1C5.935,1,1,5.935,1,12h2C3,7.037,7.037,3,12,3z"></path>
+                          <path data-color="#556987" d="M12,21c-1.989,0-3.873-0.65-5.43-1.833l3.604-3.393l-9.167-0.983L1.438,24l3.655-3.442 C7.043,22.138,9.455,23,12,23c6.065,0,11-4.935,11-11h-2C21,16.963,16.963,21,12,21z"></path>
+                        </g>
+                      </svg> <span>Back</span> </button>
+                  </div>
+                  <div class="w-full md:w-auto p-1.5">
+                    <button name="check_offer" value="Continue" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
+                      <svg class="mr-2" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
+                        <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round">
+                          <circle cx="12" cy="12" r="11"></circle>
+                          <polyline points="11 8 15 12 11 16" stroke="#ffffff"></polyline>
+                        </g>
+                      </svg> <span>Continue</span> </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <input type="hidden" name="formid" value="{{ form_id }}">
+            <input type="hidden" name="addr_to" value="{{ data.addr_to }}">
+            <input type="hidden" name="addr_from" value="{{ data.addr_from }}">
+            <input type="hidden" name="coin_from" value="{{ data.coin_from }}">
+            <input type="hidden" name="coin_to" value="{{ data.coin_to }}"> {% if data.amt_var==true %}
+            <input type="hidden" name="amt_var" value="true"> {% endif %} {% if data.rate_var==true %}
+            <input type="hidden" name="rate_var" value="true"> {% endif %} </form>
+          <script src="static/js/new_offer.js"></script>
+        </div>
       </div>
-
-      <div class="py-6 border-b border-coolGray-100">
-       <div class="w-full md:w-10/12">
-        <div class="flex flex-wrap -m-3">
-         <div class="w-full md:w-1/3 p-3">
-          <p class="text-sm text-coolGray-800 font-semibold">You Send</p>
-         </div>
-         <div class="w-full md:flex-1 p-3">
-          <div class="flex flex-wrap -m-3">
-           <div class="w-full md:w-1/2 p-3">
-            <div class="relative">
-             <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path>
-             </svg>
-             <select is="ms-dropdown" class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-5" id="coin_from" name="coin_from" onchange="set_rate('coin_from');" disabled>
-              <option value="-1" data-image="/static/images/other/placeholder-line.png">Coin</option>
-              {% for c in coins_from %}
-              <option{% if data.coin_from==c[0] %} selected{% endif %} value="{{ c[0] }}" data-image="/static/images/coins/{{ c[1]|replace(" ", "-") }}.png">{{ c[1] }}</option>
-               {% endfor %}
-             </select>
-            </div>
-           </div>
-           <div class="w-full md:w-1/2 p-3">
-            <div class="relative">
-             <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
-              <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
-               <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round" >
-                <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path>
-                <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline>
-                <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path>
-                <polyline points="18.654 16.071 17.068 21.763 22.865 21.034"></polyline>
-                <path data-cap="butt" d="M12.211,1a11,11,0,0,1,4.857,20.763"></path>
-               </g>
-              </svg>
-             </div>
-             <input class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none block w-full p-5 opacity-70" type="text" id="amt_from" name="amt_from" value="{{ data.amt_from }}" onchange="set_rate('amt_from');" readonly>
-            </div>
-           </div>
-
-           {% if data.swap_style == 'xmr' %}
-
-           <div class="w-full md:w-1/2 p-3">
-            <p class="mb-1.5 font-medium text-base text-coolGray-800">Fee From Confirm Target</p>
-            <div class="relative">
-             <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
-              <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
-               <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round" >
-                <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path>
-                <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline>
-                <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path>
-                <polyline points="18.654 16.071 17.068 21.763 22.865 21.034"></polyline>
-                <path data-cap="butt" d="M12.211,1a11,11,0,0,1,4.857,20.763"></path>
-               </g>
-              </svg>
-             </div>
-             <input class="pl-10 appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" type="number" name="fee_from_conf" min="1" max="32" value="{{ data.fee_from_conf }}">
-            </div>
-           </div>
-
-           <div class="w-full md:w-1/2 p-3">
-            <p class="mb-1.5 font-medium text-base text-coolGray-800">Fee From Increase By</p>
-            <div class="relative">
-             <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path>
-             </svg>
-             <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
-              <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
-               <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round">
-                <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path>
-                <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline>
-                <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path>
-                <polyline points="18.654 16.071 17.068 21.763 22.865 21.034"></polyline>
-                <path data-cap="butt" d="M12.211,1a11,11,0,0,1,4.857,20.763"></path>
-               </g>
-              </svg>
-             </div>
-             <select class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="fee_from_extra">
-              <option value="0">None</option>
-              <option value="10" {% if data.fee_from_extra==10 %} selected{% endif %}>10%</option>
-              <option value="50" {% if data.fee_from_extra==50 %} selected{% endif %}>50%</option>
-              <option value="100" {% if data.fee_from_extra==100 %} selected{% endif %}>100%</option>
-             </select>
-            </div>
-           </div>
-
-           {% endif %}
-
-          </div>
-         </div>
-        </div>
-       </div>
-      </div>
-
-      <div class="py-6 border-b border-coolGray-100">
-       <div class="w-full md:w-10/12">
-        <div class="flex flex-wrap -m-3">
-         <div class="w-full md:w-1/3 p-3">
-          <p class="text-sm text-coolGray-800 font-semibold">You Get</p>
-         </div>
-         <div class="w-full md:flex-1 p-3">
-          <div class="flex flex-wrap -m-3">
-
-           <div class="w-full md:w-1/2 p-3">
-            <div class="relative">
-             <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path>
-             </svg>
-             <select is="ms-dropdown" class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-5" id="coin_to" name="coin_to" onchange="set_rate('coin_to');" disabled>
-              <option value="-1" data-image="/static/images/other/placeholder-line.png">Coin</option> {% for c in coins %}
-              <option{% if data.coin_to==c[0] %} selected{% endif %} value="{{ c[0] }}" data-image="/static/images/coins/{{ c[1]|replace(" ", "-") }}.png">{{ c[1] }}</option>
-
-               {% endfor %}
-
-             </select>
-            </div>
-           </div>
-           <div class="w-full md:w-1/2 p-3">
-            <div class="relative">
-             <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
-              <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
-               <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round">
-                <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path>
-                <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline>
-                <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path>
-                <polyline points="18.654 16.071 17.068 21.763 22.865 21.034"></polyline>
-                <path data-cap="butt" d="M12.211,1a11,11,0,0,1,4.857,20.763"></path>
-               </g>
-              </svg>
-             </div>
-             <input class="pl-10 pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none block w-full p-5 opacity-70" type="text" id="amt_to" name="amt_to" value="{{ data.amt_to }}" onchange="set_rate('amt_to');" readonly>
-            </div>
-           </div>
-
-           {% if data.swap_style == 'xmr' and coin_to != '6' %}
-
-           <div class="w-full md:w-1/2 p-3">
-            <p class="mb-1.5 font-medium text-base text-coolGray-800">Fee From Confirm Target</p>
-            <div class="relative">
-             <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
-              <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
-               <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round">
-                <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path>
-                <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline>
-                <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path>
-                <polyline points="18.654 16.071 17.068 21.763 22.865 21.034"></polyline>
-                <path data-cap="butt" d="M12.211,1a11,11,0,0,1,4.857,20.763"></path>
-               </g>
-              </svg>
-             </div>
-             <input class="pl-10 appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" type="number" name="fee_to_conf" min="1" max="32" value="{{ data.fee_from_conf }}">
-            </div>
-           </div>
-
-           <div class="w-full md:w-1/2 p-3">
-            <p class="mb-1.5 font-medium text-base text-coolGray-800">Fee From Increase By</p>
-            <div class="relative">
-             <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path>
-             </svg>
-             <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
-              <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
-               <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round" >
-                <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path>
-                <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline>
-                <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path>
-                <polyline points="18.654 16.071 17.068 21.763 22.865 21.034"></polyline>
-                <path data-cap="butt" d="M12.211,1a11,11,0,0,1,4.857,20.763"></path>
-               </g>
-              </svg>
-             </div>
-             <select class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="fee_to_extra">
-              <option value="0">None</option>
-              <option value="10" {% if data.fee_from_extra==10 %} selected{% endif %}>10%</option>
-              <option value="50" {% if data.fee_from_extra==50 %} selected{% endif %}>50%</option>
-              <option value="100" {% if data.fee_from_extra==100 %} selected{% endif %}>100%</option>
-             </select>
-            </div>
-           </div>
-
-           {% endif %}
-
-          </div>
-         </div>
-        </div>
-       </div>
-      </div>
-
-      <div class="py-6 border-b border-coolGray-100">
-       <div class="w-full md:w-10/12">
-        <div class="flex flex-wrap -m-3">
-         <div class="w-full md:w-1/3 p-3">
-          <p class="text-sm text-coolGray-800 font-semibold">Bid amount</p>
-         </div>
-         <div class="w-full md:flex-1 p-3">
-          <div class="flex flex-wrap -m-3">
-
-           <div class="w-full md:w-1/2 p-3">
-            <p class="mb-1.5 font-medium text-base text-coolGray-800">Minimum Bid Amount</p>
-            <div class="relative">
-             <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
-              <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
-               <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round" >
-                <rect x="9.843" y="5.379" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -0.7635 13.1569)" width="11.314" height="4.243"></rect>
-                <polyline points="3,23 3,19 15,19 15,23 "></polyline>
-                <line x1="4" y1="15" x2="1" y2="15" stroke="#3b82f6"></line>
-                <line x1="5.757" y1="10.757" x2="3.636" y2="8.636" stroke="#3b82f6"></line>
-                <line x1="1" y1="23" x2="17" y2="23"></line>
-                <line x1="17" y1="9" x2="23" y2="15"></line>
-               </g>
-              </svg>
-             </div>
-             <input class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none block w-full p-2.5 opacity-70" type="text" id="amt_bid_min" name="amt_bid_min" value="{{ data.amt_bid_min }}" title="Bids with an amount below the minimum bid value will be discarded" readonly>
-            </div>
-           </div>
-           <div class="w-full md:w-1/2 p-3">
-            <p class="mb-1.5 font-medium text-base text-coolGray-800">Rate</p>
-            <div class="relative">
-             <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
-              <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
-               <g fill="#3b82f6" >
-                <path d="M9,9h5L7,0,0,9H5V23a1,1,0,0,0,1,1H8a1,1,0,0,0,1-1Z" fill="#3b82f6"></path>
-                <path d="M14,17a3,3,0,1,1,3-3A3,3,0,0,1,14,17Zm0-4a1,1,0,1,0,1,1A1,1,0,0,0,14,13Z" data-color="color-2"></path>
-                <path d="M21,24a3,3,0,1,1,3-3A3,3,0,0,1,21,24Zm0-4a1,1,0,1,0,1,1A1,1,0,0,0,21,20Z" data-color="color-2"></path>
-                <path d="M13,23a1,1,0,0,1-.707-1.707l9-9a1,1,0,0,1,1.414,1.414l-9,9A1,1,0,0,1,13,23Z" data-color="color-2"></path>
-               </g>
-              </svg>
-             </div>
-             <input class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none block w-full p-2.5 opacity-70" type="text" id="rate" name="rate" value="{{ data.rate }}" onchange="set_rate('rate');" readonly>
-            </div>
-           </div>
-          </div>
-         </div>
-        </div>
-       </div>
-      </div>
-
-      <div class="py-6 border-b border-coolGray-100">
-       <div class="w-full md:w-10/12">
-        <div class="flex flex-wrap -m-3">
-         <div class="w-full md:w-1/3 p-3">
-          <p class="text-sm text-coolGray-800 font-semibold">Time</p>
-         </div>
-         <div class="w-full md:flex-1 p-3">
-          <div class="flex flex-wrap -m-3">
-
-           <div class="w-full md:w-1/2 p-3">
-            <p class="mb-1.5 font-medium text-base text-coolGray-800">Offer valid (hrs)</p>
-            <div class="relative">
-             <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
-              <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
-               <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round" >
-                <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path>
-                <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline>
-                <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path>
-                <polyline points="18.654 16.071 17.068 21.763 22.865 21.034"></polyline>
-                <path data-cap="butt" d="M12.211,1a11,11,0,0,1,4.857,20.763"></path>
-               </g>
-              </svg>
-             </div>
-             <input class="pl-10 appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" type="number" name="validhrs" min="1" max="48" value="{{ data.validhrs }}">
-            </div>
-           </div>
-
-           {% if data.debug_ui == true %}
-
-           <div class="w-full md:w-1/2 p-3">
-            <p class="mb-1.5 font-medium text-base text-coolGray-800">Contract Locked (Mins)</p>
-            <div class="relative">
-             <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
-              <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
-               <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round" >
-                <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path>
-                <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline>
-                <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path>
-                <polyline points="18.654 16.071 17.068 21.763 22.865 21.034"></polyline>
-                <path data-cap="butt" d="M12.211,1a11,11,0,0,1,4.857,20.763"></path>
-               </g>
-              </svg>
-             </div>
-             <input class="pl-10 appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" type="number" name="lockmins" min="10" max="5000" value="{{ data.lockmins }}">
-            </div>
-
-            {% if data.swap_style != 'xmr' %}
-            <div class="text-sm text-gray-500 mt-1.5">(Participate txn will be locked for half the time.)</div>
-            {% endif %}
-
-           </div>
-
-           {% else %}
-           <div class="w-full md:w-1/2 p-3">
-            <p class="mb-1.5 font-medium text-base text-coolGray-800">Contract locked (Hours)</p>
-            <div class="relative">
-             <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
-              <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
-               <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round" >
-                <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path>
-                <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline>
-                <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path>
-                <polyline points="18.654 16.071 17.068 21.763 22.865 21.034"></polyline>
-                <path data-cap="butt" d="M12.211,1a11,11,0,0,1,4.857,20.763"></path>
-               </g>
-              </svg>
-             </div>
-             <input class="pl-10 appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" type="number" name="lockhrs" min="1" max="96" value="{{ data.lockhrs }}">
-            </div>
-
-            {% if data.swap_style != 'xmr' %}
-            <div class="text-sm text-gray-500 mt-1.5">(Participate txn will be locked for half the time.)</div>
-            {% endif %}
-           </div>
-
-           {% endif %}
-
-          </div>
-         </div>
-        </div>
-       </div>
-      </div>
-
-      <div class="py-6 border-b border-coolGray-100">
-       <div class="w-full md:w-10/12">
-        <div class="flex flex-wrap -m-3">
-         <div class="w-full md:w-1/3 p-3">
-          <p class="text-sm text-coolGray-800 font-semibold">Strategy (BETA)</p>
-         </div>
-         <div class="w-full md:flex-1 p-3">
-          <div class="flex flex-wrap -m-3">
-
-           <div class="w-full md:w-1/2 p-3">
-            <p class="mb-1.5 font-medium text-base text-coolGray-800">Auto Accept Strategy</p>
-            <div class="relative">
-             <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path>
-             </svg>
-             <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
-              <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
-               <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round" >
-                <circle cx="12" cy="12" r="5" stroke="#3b82f6" data-cap="butt"></circle>
-                <polygon points="5 6 2 4 5 2 5 6" fill="#3b82f6" stroke="none"></polygon>
-                <polygon points="19 18 22 20 19 22 19 18" fill="#3b82f6" stroke="none"></polygon>
-                <polygon points="5 6 2 4 5 2 5 6"></polygon>
-                <line x1="5" y1="4" x2="9" y2="4"></line>
-                <polygon points="19 18 22 20 19 22 19 18"></polygon>
-                <line x1="19" y1="20" x2="15" y2="20"></line>
-               </g>
-              </svg>
-             </div>
-             <select class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="automation_strat_id">
-              <option value="-1" {% if data.automation_strat_id==-1 %} selected{% endif %}>None</option>
-              {% for a in automation_strategies %}
-              <option value="{{ a[0] }}" {% if data.automation_strat_id==a[0] %} selected{% endif %}>{{ a[1] }}</option>
-              {% endfor %}
-             </select>
-            </div>
-           </div>
-
-          </div>
-         </div>
-        </div>
-       </div>
-      </div>
-
-      <div class="py-6 border-coolGray-100">
-       <div class="w-full md:w-10/12">
-        <div class="flex flex-wrap -m-3">
-         <div class="w-full md:w-1/3 p-3">
-          <p class="text-sm text-coolGray-800 font-semibold">Options</p>
-         </div>
-         <div class="w-full md:flex-1 p-3">
-          <div class="form-check form-check-inline">
-           <input class="form-check-input h-4 w-4 border border-gray-300 rounded-sm bg-gray-50 checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer" type="checkbox" id="amt_var" name="amt_var" value="av" {% if data.amt_var==true %} checked="checked" {% endif %} disabled>
-           <label class="form-check-label inline-block text-gray-800" for="inlineCheckbox2">Amount Variable</label>
-          </div>
-          <div class="form-check form-check-inline">
-           <input class="form-check-input h-4 w-4 border border-gray-300 rounded-sm bg-gray-50 checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer" type="checkbox" id="rate_var" name="rate_var" value="rv" {% if data.rate_var==true %} checked="checked" {% endif %} disabled>
-           <label class="form-check-label bg-gray-50inline-block text-gray-800" for="inlineCheckbox3">Rate Variable</label>
-          </div>
-         </div>
-        </div>
-       </div>
-      </div>
-
-      <div class="p-6 pt-10 bg-white bg-opacity-60 rounded-b-md">
-       <div class="w-full md:w-0/12">
-        <div class="flex flex-wrap justify-end -m-1.5">
-         <div class="w-full md:w-auto p-1.5">
-          <button name="step1" type="submit" value="Back" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none">
-           <svg class="mr-2" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
-            <g fill="#556987">
-             <path fill="#556987" d="M12,3c1.989,0,3.873,0.65,5.43,1.833l-3.604,3.393l9.167,0.983L22.562,0l-3.655,3.442 C16.957,1.862,14.545,1,12,1C5.935,1,1,5.935,1,12h2C3,7.037,7.037,3,12,3z"></path>
-             <path data-color="#556987" d="M12,21c-1.989,0-3.873-0.65-5.43-1.833l3.604-3.393l-9.167-0.983L1.438,24l3.655-3.442 C7.043,22.138,9.455,23,12,23c6.065,0,11-4.935,11-11h-2C21,16.963,16.963,21,12,21z"></path>
-            </g>
-           </svg> <span>Back</span> </button>
-         </div>
-
-         <div class="w-full md:w-auto p-1.5">
-          <button name="check_offer" value="Continue" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
-           <svg class="mr-2" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
-            <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round">
-             <circle cx="12" cy="12" r="11"></circle>
-             <polyline points="11 8 15 12 11 16" stroke="#ffffff"></polyline>
-            </g>
-           </svg> <span>Continue</span> </button>
-         </div>
-        </div>
-       </div>
-      </div>
-
-      <input type="hidden" name="formid" value="{{ form_id }}">
-      <input type="hidden" name="addr_to" value="{{ data.addr_to }}">
-      <input type="hidden" name="addr_from" value="{{ data.addr_from }}">
-      <input type="hidden" name="coin_from" value="{{ data.coin_from }}">
-      <input type="hidden" name="coin_to" value="{{ data.coin_to }}">
-      {% if data.amt_var==true %}
-      <input type="hidden" name="amt_var" value="true">
-      {% endif %}
-      {% if data.rate_var==true %}
-      <input type="hidden" name="rate_var" value="true">
-      {% endif %}
-     </form>
-
-     <script src="static/js/new_offer.js"></script>
     </div>
-   </div>
   </div>
- </div>
 </div>
 {% include 'footer.html' %}
-
 </body>
-
-</html>
+</html>
\ No newline at end of file
diff --git a/basicswap/templates/offers.html b/basicswap/templates/offers.html
index ef66f78..7000fb9 100644
--- a/basicswap/templates/offers.html
+++ b/basicswap/templates/offers.html
@@ -1,6 +1,5 @@
 {% include 'header.html' %}
 <div class="container mx-auto">
-
   <section class="bg-white p-5 mt-5">
     <div class="flex flex-wrap items-center -m-2">
       <div class="w-full md:w-1/2 p-2">
@@ -26,13 +25,9 @@
       </div>
     </div>
   </section>
-
   <section class="py-4">
     <div class="container px-4 mx-auto">
-      <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden">
-         <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt="">
-         <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt="">
-         <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
+      <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden"> <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
         <div class="relative z-20 flex flex-wrap items-center -m-3">
           <div class="w-full md:w-1/2 p-3">
             <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">{{ page_type }}</h2>
@@ -42,64 +37,222 @@
       </div>
     </div>
   </section>
-
-{% include 'inc_messages.html' %}
-
+  {% include 'inc_messages.html' %}
   <section class="bg-white">
     <div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden bg-white ">
       <div class="pb-6 border-coolGray-100">
         <div class="flex flex-wrap items-center justify-between -m-2">
           <div class="w-full pt-2">
-
+            <!-- Chart-->
+            <div class="mb-10 mt-8 {{ chart }}">
+              <div id="price-chart"></div>
+              <script src="/static/js/chart.js"></script>
+              <script>
+                CryptoCharts.roiComparison({
+                  chart_id: "price-chart",
+                  cryptocompare_api_key: "cd7600e7b5fdd99c6f900673ff0ee8f64d6d4219a4bb87191ad4a2e3fc65d7f4", // Todo @ in settings/general user can set api_key
+                  cryptocompare_tickers: ["BTC", "PART", "DASH", "PIVX", "XMR", "LTC", "FIRO"],
+                  last_days: 30,
+                  axes: true,
+                  title: true,
+                  loading_indicator: false,
+                  fontFamily: "Inter,Helvetica, Arial, sans-serif",
+                  options: {
+                    colors: ["#f2a900", "#2ad167", "#1376b5", "#662D91", "#fc6621", "#345D9D", "#9B1C2E"],
+                    chart: {
+                      type: "area",
+                      height: 360
+                    },
+                    dataLabels: {
+                      enabled: false
+                    },
+                    stroke: {
+                      curve: "smooth"
+                    },
+                    xaxis: {
+                      labels: {
+                        style: {
+                          tickAmount: 4,
+                          // colors: colors,
+                          fontSize: "12px"
+                        }
+                      }
+                    },
+                    yaxis: {
+                      min: -100,
+                      max: 200,
+                      tickAmount: 4
+                    },
+                    grid: {
+                      show: true,
+                      borderColor: "#e5e5e5",
+                      strokeDashArray: 0,
+                      position: "back",
+                      xaxis: {
+                        lines: {
+                          show: false
+                        }
+                      },
+                      yaxis: {
+                        lines: {
+                          show: true
+                        }
+                      },
+                      row: {
+                        colors: undefined,
+                        opacity: 0.5
+                      },
+                      column: {
+                        colors: undefined,
+                        opacity: 0.5
+                      },
+                      padding: {
+                        top: 0,
+                        right: 0,
+                        bottom: 0,
+                        left: 0
+                      }
+                    },
+                    legend: {
+                      show: true,
+                      showForSingleSeries: false,
+                      showForNullSeries: true,
+                      showForZeroSeries: true,
+                      position: "right",
+                      horizontalAlign: "right",
+                      floating: false,
+                      fontSize: "14px",
+                      fontFamily: "Inter,Helvetica, Arial, sans-serif",
+                      fontWeight: 400,
+                      formatter: undefined,
+                      inverseOrder: false,
+                      width: undefined,
+                      height: undefined,
+                      tooltipHoverFormatter: undefined,
+                      customLegendItems: [],
+                      offsetX: -20,
+                      offsetY: -20,
+                      labels: {
+                        colors: undefined,
+                        useSeriesColors: false
+                      },
+                      markers: {
+                        width: 14,
+                        height: 14,
+                        strokeWidth: 2,
+                        strokeColor: "#00000",
+                        fillColors: undefined,
+                        radius: 12,
+                        customHTML: undefined,
+                        onClick: undefined,
+                        offsetX: 0,
+                        offsetY: 0
+                      },
+                      itemMargin: {
+                        horizontal: 5,
+                        vertical: 15
+                      },
+                      onItemClick: {
+                        toggleDataSeries: true
+                      },
+                      onItemHover: {
+                        highlightDataSeries: true
+                      }
+                    },
+                    annotations: {
+                      yaxis: [{
+                        y: 8600,
+                        y2: 9000,
+                        borderColor: "#000",
+                        fillColor: "#FEB019",
+                        label: {
+                          text: "Y-axis range"
+                        }
+                      }]
+                    },
+                    markers: {
+                      size: 0,
+                      colors: undefined,
+                      strokeColors: "#fff",
+                      strokeWidth: 2,
+                      strokeOpacity: 0.9,
+                      strokeDashArray: 0,
+                      fillOpacity: 1,
+                      discrete: [],
+                      shape: "circle",
+                      radius: 2,
+                      offsetX: 0,
+                      offsetY: 0,
+                      onClick: undefined,
+                      onDblClick: undefined,
+                      showNullDataPoints: true,
+                      hover: {
+                        size: undefined,
+                        sizeOffset: 3
+                      }
+                    },
+                    title: {
+                      text: '30 Days Moving % - Daily price in USD',
+                      align: 'left',
+                      margin: 10,
+                      offsetX: 10,
+                      offsetY: 0,
+                      floating: false,
+                      style: {
+                        fontSize: '14px',
+                        fontWeight: 'bold',
+                        fontFamily: "Inter,Helvetica, Arial, sans-serif",
+                        color: '#212121'
+                      },
+                    }
+                  }
+                });
+              </script>
+            </div>
+            <!-- Chart -->
             <form method="post">
-
               <div class="flex justify-between items-center pb-4 bg-white">
                 <div class="bg-white bg-opacity-60 rounded-b-md">
                   <div class="w-full md:w-0/12">
                     <div class="flex flex-wrap justify-end -m-1.5">
-
-
                       <div class="w-full md:w-auto p-1.5">
                         <div class="relative">
                           <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                             <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path>
                           </svg>
                           <select is="ms-dropdown" name="coin_to" class="appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
-                          {% for c in coins_from %}
-                          <option class="text-sm" value="{{ c[0] }}"{% if filters.coin_to==c[0] %} selected{% endif %} data-image="/static/images/coins/{{ c[1]|replace(" ", "-") }}-20.png">{{ c[1] }}</option>
+                            {% for c in coins_from %}
+                            <option class="text-sm" value="{{ c[0] }}" {% if filters.coin_to==c[0] %} selected{% endif %} data-image="/static/images/coins/{{ c[1]|replace(" ", "-") }}-20.png">{{ c[1] }}</option>
                           {% endfor %}
-                          </select>
+                        </select>
                         </div>
                       </div>
-
                       <div class="flex items-center ">
                         <div class="w-full md:w-auto p-1.5 ">
-                          <p class="text-sm font-heading"> <svg aria-hidden="true " class="w-5 h-5 " fill="currentColor " viewBox="0 0 20 20 " xmlns="http://www.w3.org/2000/svg ">
+                          <p class="text-sm font-heading">
+                            <svg aria-hidden="true " class="w-5 h-5 " fill="currentColor " viewBox="0 0 20 20 " xmlns="http://www.w3.org/2000/svg ">
                               <path fill-rule="evenodd " d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z " clip-rule="evenodd "></path>
-                            </svg></p>
+                            </svg>
+                          </p>
                         </div>
                       </div>
-
                       <div class="w-full md:w-auto p-1.5 ">
                         <div class="relative ">
                           <svg class="absolute right-4 top-1/2 transform -translate-y-1/2 " width="16 " height="16 " viewBox="0 0 16 16 " fill="none " xmlns="http://www.w3.org/2000/svg ">
-                            <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z " fill="#8896AB ">
-                            </path>
+                            <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z " fill="#8896AB "> </path>
                           </svg>
                           <select is="ms-dropdown" name="coin_from " class="appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
-                          {% for c in coins %}
-                          <option class="text-sm" value="{{ c[0] }}"{% if filters.coin_from==c[0] %} selected{% endif %} data-image="/static/images/coins/{{ c[1]|replace(" ", "-") }}-20.png">{{ c[1] }}</option>
+                            {% for c in coins %}
+                            <option class="text-sm" value="{{ c[0] }}" {% if filters.coin_from==c[0] %} selected{% endif %} data-image="/static/images/coins/{{ c[1]|replace(" ", "-") }}-20.png">{{ c[1] }}</option>
                           {% endfor %}
-                          </select>
+                        </select>
                         </div>
                       </div>
-
                       <div class="flex items-center">
                         <div class="w-full md:w-auto p-1.5">
                           <p class="text-sm font-heading bold">Sort By:</p>
                         </div>
                       </div>
-
                       <div class="w-full md:w-auto p-1.5">
                         <div class="relative">
                           <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -111,7 +264,6 @@
                           </select>
                         </div>
                       </div>
-
                       <div class="w-full md:w-auto p-1.5">
                         <div class="relative">
                           <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -123,13 +275,11 @@
                           </select>
                         </div>
                       </div>
-
                       <div class="flex items-center">
                         <div class="w-full md:w-auto p-1.5">
                           <p class="text-sm font-heading bold">Sent From Node:</p>
                         </div>
                       </div>
-
                       <div class="w-full md:w-auto p-1.5">
                         <div class="relative">
                           <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -141,7 +291,6 @@
                           </select>
                         </div>
                       </div>
-
                       <div class="w-full md:w-auto p-1.5">
                         <div class="relative">
                           <button type="submit" name='clearfilters' value="Clear Filters" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none">
@@ -159,7 +308,6 @@
                             </svg> <span>Clear</span> </button>
                         </div>
                       </div>
-
                       <div class="w-full md:w-auto p-1.5">
                         <div class="relative">
                           <button type="submit" name='applyfilters' value="Apply Filters" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm  bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
@@ -173,16 +321,13 @@
                             </svg> <span>Apply Filters</span> </button>
                         </div>
                       </div>
-
                     </div>
                   </div>
                 </div>
               </div>
-
               <div class="container px-0 mx-auto mt-5">
                 <div class="overflow-x-auto relative border sm:rounded-lg">
                   <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
-
                     <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300">
                       <tr>
                         <th scope="col" class="py-3 px-6"> TIME AT </th>
@@ -199,14 +344,11 @@
                         <th scope="col" class="py-3 px-6"> Trade </th>
                       </tr>
                     </thead>
-
-                    <tbody>
-                      {% for o in offers %}
+                    <tbody> {% for o in offers %}
                       <tr class="bg-white border-t hover:bg-gray-50">
-
                         <td scope="row" class="flex items-center py-7 px-46 text-gray-900 whitespace-nowrap">
-                          <svg class="w-5 h-5 rounded-full ml-5" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
-                            <g stroke-linecap="round" stroke-width="2" fill="none" stroke="{% if o[12]==2 %}#AC0000{% elif o[11]==true %}#6b7280{% else %}#3B82F6{% endif %}" stroke-linejoin="round" class="nc-icon-wrapper">
+                          <svg alt="" class="w-5 h-5 rounded-full ml-5" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
+                            <g stroke-linecap="round" stroke-width="2" fill="none" stroke="{% if o[12]==2 %}#AC0000{% elif o[11]==true %}#6b7280{% else %}#3B82F6{% endif %}" stroke-linejoin="round">
                               <circle cx="12" cy="12" r="11"></circle>
                               <polyline points=" 12,6 12,12 18,12 " stroke="{% if o[12]==2 %}#AC0000{% elif o[11]==true %}#6b7280{% else %}#3B82F6{% endif %}"></polyline>
                             </g>
@@ -218,7 +360,7 @@
                         <!--<td class="py-4 px-6 text-xs"><a class="monospace text-xs" href=/offer/{{ o[1] }}>{{ o[1]|truncate(6, True) }}</a></td>-->
                         <!--<td class="py-4 px-6 text-xs monospace">{{ o[8] }}{% if o[9]==true %} <b>Sent</b>{% endif %}</td>-->
                         <!--Todo: Add link back -->
-                        <td class="py-4 px-6 monospace">{{ o[7] }} </td>
+                        <td class="py-4 px-6 monospace">{{ o[7] }} {% if o[12]==2 %}Revoked{% elif o[11]==true %}Not Active{% else %}Active{% endif %}</td>
                         <td class="py-4 px-6 text-xs monospace"><a href="/identity/{{ o[8] }}{% if o[9]==true %}{% endif %}">{{ o[8] }}</a></td>
                         <td class="py-4"><span class="inline-flex align-middle items-center justify-center w-9 h-10 bg-white-50 rounded"><img class="h-7" src="/static/images/coins/{{ o[2]|replace(" ", "-") }}.png" alt=""></span> {{ o[2] }}</td>
                         <td class="py-4 text-xs">{{ o[4] }}</td>
@@ -226,37 +368,27 @@
                         <td class="py-4 text-xs">{{ o[5] }}</td>
                         <td class="py-4 text-xs px-6">{{ o[6] }}</td>
                         <!--  <td class="py-4 px-6">{{ o[10] }}</td>-->
-                        <td class="py-4 px-6"> <a class="inline-block w-20 py-1 px-2 font-medium text-center text-sm rounded-md shadow-button {% if o[9]==true %} bg-white text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 {% else %} bg-blue-500 text-white {% endif %}" href="/offer/{{ o[1] }}">{% if o[9]==true %}Edit {% else %} Swap {% endif %}</a>
-                        </td>
+                        <td class="py-4 px-6"> <a class="inline-block w-20 py-1 px-2 font-medium text-center text-sm rounded-md shadow-button {% if o[9]==true %} bg-white text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 {% else %} bg-blue-500 text-white {% endif %}" href="/offer/{{ o[1] }}">{% if o[9]==true %}Edit {% else %} Swap {% endif %}</a> </td>
                       </tr>
-                    </tbody>
-
-                    {% endfor %}
+                    </tbody>{% endfor %}
                   </table>
-
                   <input type="hidden" name="formid" value="{{ form_id }}">
-                  <input type="hidden" name="pageno" value="{{ filters.page_no }}">
-
-                </div>
+                  <input type="hidden" name="pageno" value="{{ filters.page_no }}"> </div>
               </div>
-
               <div class="pt-10 bg-white bg-opacity-60 rounded-b-md">
                 <div class="w-full md:w-0/12">
                   <div class="flex flex-wrap justify-end -m-1.5">
-
                     <div class="w-full md:w-auto p-1.5">
                       <button type="submit" name='pageback' value="Page Back" class="outline-none flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none">
                         <svg aria-hidden="true" class="mr-2 w-5 h-5" fill="#556987" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                           <path fill-rule="evenodd" d="M7.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l2.293 2.293a1 1 0 010 1.414z" clip-rule="evenodd"></path>
                         </svg> <span>Page Back</span> </button>
                     </div>
-
                     <div class="flex items-center">
                       <div class="w-full md:w-auto p-1.5">
                         <p class="text-sm font-heading">Page: {{ filters.page_no }}</p>
                       </div>
                     </div>
-
                     <div class="w-full md:w-auto p-1.5">
                       <button type="submit" name='pageforwards' value="Page Forwards" class="outline-none flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none"> <span>Page Forwards</span>
                         <svg aria-hidden="true" class="ml-2 w-5 h-5" fill="#556987" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
@@ -264,21 +396,16 @@
                         </svg>
                       </button>
                     </div>
-
                   </div>
                 </div>
               </div>
-
             </form>
-
           </div>
         </div>
       </div>
     </div>
-
-</section>
-
+  </section>
 </div>
 {% include 'footer.html' %}
 </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/basicswap/templates/rpc.html b/basicswap/templates/rpc.html
index e516ea6..06a3d5d 100644
--- a/basicswap/templates/rpc.html
+++ b/basicswap/templates/rpc.html
@@ -1,6 +1,5 @@
 {% include 'header.html' %}
 <div class="container mx-auto">
-
   <section class="bg-white p-5 mt-5">
     <div class="flex flex-wrap items-center -m-2">
       <div class="w-full md:w-1/2 p-2">
@@ -25,13 +24,9 @@
       </div>
     </div>
   </section>
-
   <section class="py-4">
     <div class="container px-4 mx-auto">
-      <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden">
-        <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt="">
-        <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt="">
-        <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
+      <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden"> <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
         <div class="relative z-20 flex flex-wrap items-center -m-3">
           <div class="w-full md:w-1/2 p-3">
             <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">RPC Console</h2>
@@ -41,21 +36,15 @@
       </div>
     </div>
   </section>
-
-{% include 'inc_messages.html' %}
-
-
+  {% include 'inc_messages.html' %}
   <section class="bg-white">
     <div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden bg-white ">
       <div class="pb-6 border-coolGray-100">
         <div class="flex flex-wrap items-center justify-between -m-2">
           <div class="w-full pt-2">
-
             <div class="container px-0 mx-auto mt-2">
               <div class="overflow-x-auto relative border sm:rounded-lg">
-
                 <form method="post" autocomplete="off">
-
                   <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
                     <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300">
                       <tr>
@@ -63,49 +52,39 @@
                         <th scope="col">RPC Console Input</th>
                       </tr>
                     </thead>
-
                     <tr class="bg-white border-t">
                       <td class="py-4 px-6 w-1/3 bold">
-
-                     <div class="relative">
-                        <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-                          <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path>
-                        </svg> 
+                        <div class="relative">
+                          <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path>
+                          </svg>
                           <select class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="coin_type">
-                          <option value="-1" {% if coin_type==-1 %} selected{% endif %}>Select Coin</option>
-                          {% for c in coins %}
-                          <option value="{{ c[0] }}" {% if coin_type==c[0] %} selected{% endif %}>{{ c[1] }}</option>
+                            <option value="-1" {% if coin_type==-1 %} selected{% endif %}>Select Coin</option> 
+                            {% for c in coins %}
+                            <option value="{{ c[0] }}" {% if coin_type==c[0] %} selected{% endif %}>{{ c[1] }}</option>
                           {% endfor %}
                         </select>
-                      </div>
-
+                        </div>
+                      </td>
+                      <td class="py-4 pr-5 w-2/3">
+                        <input class="w-full aappearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 w-full block p-2.5" type="text" name="cmd">
                       </td>
-                      <td class="py-4 pr-5 w-2/3"><input class="w-full aappearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 w-full block p-2.5" type="text" name="cmd"></td>
                     </tr>
                   </table>
               </div>
             </div>
-
             <div class="p-6 pt-10 bg-white bg-opacity-60 rounded-b-md">
               <div class="w-full md:w-0/12">
                 <div class="flex flex-wrap justify-end -m-1.5">
-
-                  <div class="w-full md:w-auto p-1.5 ml-2">
-                    <button value="Submit" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
-                      <span>Submit</span> </button>
-                  </div>
-
+                               <div class="w-full md:w-auto p-1.5 ml-2">
+                          <button name="" value="Apply" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none"><svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round" ><polyline points=" 6,12 10,16 18,8 " stroke="#ffffff"></polyline> <circle cx="12" cy="12" r="11"></circle></g></svg>  Apply</button>
+                        </div>
                 </div>
               </div>
             </div>
-
-            <input type="hidden" name="formid" value="{{ form_id }}">
-
-            {% if result %}
-
+            <input type="hidden" name="formid" value="{{ form_id }}"> {% if result %}
             <div class="container px-0 mx-auto mt-5">
               <div class="overflow-x-auto relative border sm:rounded-lg">
-
                 <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
                   <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300">
                     <tr>
@@ -114,28 +93,20 @@
                   </thead>
                   <tr class="bg-white border-t hover:bg-gray-50">
                     <td class="py-4 pl-5 pr-5">
-                      <textarea class="wwhitespace-pre-line outline-none block p-2.5 text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 w-full monospace" rows="15">
-                      {{ result }}
-                      </textarea>
+                      <textarea class="wwhitespace-pre-line outline-none block p-2.5 text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 w-full monospace" rows="15">{{ result }}</textarea>
                     </td>
                   </tr>
-
                 </table>
               </div>
             </div>
-            {% endif %}
-
-            </form>
-
+          {% endif %}
+        </form>
           </div>
         </div>
       </div>
     </div>
-
   </section>
-
 </div>
 {% include 'footer.html' %}
 </body>
-
 </html>
\ No newline at end of file
diff --git a/basicswap/templates/settings.html b/basicswap/templates/settings.html
index 37d5efb..2db7959 100644
--- a/basicswap/templates/settings.html
+++ b/basicswap/templates/settings.html
@@ -1,5 +1,4 @@
 {% include 'header.html' %}
-
 <div class="container mx-auto">
   <section class="bg-white p-5 mt-5">
     <div class="flex flex-wrap items-center -m-2">
@@ -15,7 +14,7 @@
               <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
             </svg>
           </li>
-          <li><a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/settings">Settings</a></li>
+          <li> <a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/settings">Settings</a> </li>
           <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
             <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
           </svg>
@@ -23,13 +22,9 @@
       </div>
     </div>
   </section>
-
   <section class="py-4">
     <div class="container px-4 mx-auto">
-      <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden">
-        <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt="">
-        <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt="">
-        <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
+      <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden"> <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
         <div class="relative z-20 flex flex-wrap items-center -m-3">
           <div class="w-full md:w-1/2 p-3">
             <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">Settings</h2>
@@ -39,443 +34,423 @@
       </div>
     </div>
   </section>
-
-{% include 'inc_messages.html' %}
-
-
-
-    <section class="bg-white">
-      <div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden bg-white ">
-        <div class="pb-6 border-coolGray-100">
-          <div class="flex flex-wrap items-center justify-between -m-2">
-            <div class="w-full pt-2">
-
-
-<div class="mb-10 border-b border-gray-200">
-    <ul class="flex flex-wrap -mb-px text-sm font-medium text-center" id="myTab" data-tabs-toggle="#settingstab" role="tablist">
-        <li class="mr-2" role="presentation">
-            <a class="cursor-pointer inline-block p-4 rounded-t-lg border-b-2" id="profile-tab" data-tabs-target="#coins" role="tab" aria-controls="coins" aria-selected="false">Coins</a>
-        </li>
-        <li class="mr-2" role="presentation">
-            <a class="cursor-pointer inline-block p-4 rounded-t-lg border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300" id="general-tab" data-tabs-target="#general" role="tab" aria-controls="general" aria-selected="false">General</a>
-        </li>
-        <li class="mr-2" role="presentation">
-            <a class="cursor-pointer inline-block p-4 rounded-t-lg border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300" id="tor-tab" data-tabs-target="#tor" role="tab" aria-controls="tor" aria-selected="false">Tor</a>
-        </li>
-    </ul>
-</div>
-
-
-
-
-<div id="settingstab">
-    <div class="hidden rounded-lg" id="coins" role="tabpanel" aria-labelledby="coins-tab">
-
-
-
-    {% for c in chains %}
- <form method="post">
-              <section class="bg-white p-3">
-                <div class="flex flex-wrap items-center">
-                  <div class="w-full">
-                    <h4 class="font-semibold text-black text-2xl align-middle">
-                      <span class="inline-block align-middle items-center justify-center w-9 h-10 bg-white-50 rounded">
-                      <img class="h-9" src="/static/images/coins/{{ c.name }}.png" alt=""> </span> {{ c.display_name }}</h4>
+  {% include 'inc_messages.html' %}
+  <section class="bg-white">
+    <div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden bg-white">
+      <div class="pb-6 border-coolGray-100">
+        <div class="flex flex-wrap items-center justify-between -m-2">
+          <div class="w-full pt-2">
+            <div class="mb-10 border-b border-gray-200">
+              <ul class="flex flex-wrap -mb-px text-sm font-medium text-center" id="myTab" data-tabs-toggle="#settingstab" role="tablist">
+                <li class="mr-2" role="presentation"> <a class="cursor-pointer inline-block p-4 rounded-t-lg border-b-2" id="profile-tab" data-tabs-target="#coins" role="tab" aria-controls="coins" aria-selected="false">Coins</a> </li>
+                <li class="mr-2" role="presentation"> <a class="cursor-pointer inline-block p-4 rounded-t-lg border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300" id="general-tab" data-tabs-target="#general" role="tab" aria-controls="general" aria-selected="false">General</a> </li>
+                <li class="mr-2" role="presentation"> <a class="cursor-pointer inline-block p-4 rounded-t-lg border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300" id="tor-tab" data-tabs-target="#tor" role="tab" aria-controls="tor" aria-selected="false">Tor</a> </li>
+              </ul>
+            </div>
+            <div id="settingstab">
+              <div class="hidden rounded-lg" id="coins" role="tabpanel" aria-labelledby="coins-tab">
+                <form method="post">
+                {% for c in chains %}
+                  <section class="bg-white pl-3">
+                    <div class="flex flex-wrap items-center">
+                      <div class="w-full">
+                        <h4 class="font-semibold text-black text-2xl align-middle">
+             <span class="mr-2 inline-block align-middle items-center justify-center w-9 h-10 bg-white-50 rounded">
+              <img class="h-9" src="/static/images/coins/{{ c.name }}.png" alt="">
+             </span>{{ c.display_name }}
+            </h4></div>
+                    </div>
+                  </section>
+                  <div class="container px-0 mx-auto mt-5">
+                    <div class="overflow-x-auto relative border sm:rounded-lg">
+                      <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
+                        <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none">
+                          <tr>
+                            <th scope="col" class="py-3 px-6">Settings</th>
+                            <th scope="col">Value</th>
+                          </tr>
+                        </thead> 
+                        {% if c.connection_type %}
+                        <tr>
+                          <td class="py-4 px-6 bold w-96 bold">Connection Type</td>
+                          <td class="py-4">{{ c.connection_type }}</td>
+                        </tr> {% endif %} 
+                        {% if c.manage_daemon is defined %} {% if c.name == 'monero' %}
+                        <tr class="bg-white border-t hover:bg-gray-50">
+                          <td class="py-4 px-6 bold">Manage Daemon</td>
+                          <td class="py-4 pr-5">
+                            <div class="w-52 md:flex-1">
+                              <div class="relative">
+                                <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                  <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"></path>
+                                </svg>
+                                <select class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="managedaemon_{{ c.name }}">
+                                  <option value="true" {% if c.manage_daemon==true %} selected{% endif %}>True</option>
+                                  <option value="false" {% if c.manage_daemon==false %} selected{% endif %}>False</option>
+                                </select>
+                              </div>
+                            </div>
+                          </td>
+                        </tr>
+                        <tr class="bg-white border-t hover:bg-gray-50">
+                          <td class="py-4 px-6 bold">Daemon RPC Host</td>
+                          <td class="py-4 pr-5">
+                            <input type="text" class="w-52 appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" name="rpchost_{{ c.name }}" value="{{ c.rpchost }}"> </td>
+                        </tr>
+                        <tr class="bg-white border-t hover:bg-gray-50">
+                          <td class="py-4 px-6 bold">Daemon RPC Port</td>
+                          <td class="py-4 pr-5">
+                            <input type="text" class="w-52 appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" name="rpcport_{{ c.name }}" value="{{ c.rpcport }}"> </td>
+                        </tr>
+                        <tr class="bg-white border-t hover:bg-gray-50">
+                          <td class="py-4 px-6" colspan=2>
+                            <label for="message" class="block mb-2 text-sm font-medium text-gray-900">List trusted public nodes to use if “Automatically Select Daemon” is set as “True”.
+                              <br /> </label>
+                            <textarea class="outline-none block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 monospace" placeholder="(Add one entry per line) eg: node.xmr.to:18081" name="remotedaemonurls_{{ c.name }}" rows="4" cols="100"> {{ c.remotedaemonurls }} </textarea>
+                          </td>
+                        </tr>
+                        <tr class="bg-white border-t hover:bg-gray-50">
+                          <td class="py-4 px-6 bold w-96 bold">Automatically Select Daemon</td>
+                          <td class="py-4 pr-5">
+                            <div class="w-52 md:flex-1">
+                              <div class="relative">
+                                <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                  <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"></path>
+                                </svg>
+                                <select class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="autosetdaemon_{{ c.name }}">
+                                  <option value="true" {% if c.autosetdaemon==true %} selected{% endif %}>True</option>
+                                  <option value="false" {% if c.autosetdaemon==false %} selected{% endif %}>False</option>
+                                </select>
+                              </div>
+                            </div>
+                          </td>
+                        </tr>
+                        {% else %}
+                        <tr class="bg-white border-t hover:bg-gray-50">
+                          <td class="py-4 px-6 bold bold">Manage Daemon</td>
+                          <td>{{ c.manage_daemon }}</td>
+                        </tr>
+                        {% endif %}
+                        {% endif %}
+                        {% if c.manage_wallet_daemon is defined %}
+                        <tr class="bg-white border-t hover:bg-gray-50">
+                          <td class="py-4 px-6 bold bold">Manage Wallet Daemon</td>
+                          <td>{{ c.manage_wallet_daemon }}</td>
+                        </tr>
+                        {% endif %}
+                        <tr class="bg-white border-t hover:bg-gray-50">
+                          <td class="py-4 px-6 bold bold">Chain Lookups</td>
+                          <td class="py-4 pr-5">
+                            <div class="w-52 md:flex-1">
+                              <div class="relative">
+                                <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                  <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"></path>
+                                </svg>
+                                <select class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="lookups_{{ c.name }}">
+                                  <option value="local" {% if c.lookups=='local' %} selected{% endif %}>Local Node</option>
+                                  <option value="explorer" {% if c.lookups=='explorer' %} selected{% endif %}>Explorer</option>
+                                </select>
+                              </div>
+                            </div>
+                          </td>
+                        </tr>
+                        {% if c.name == 'monero' %}
+                        <tr class="bg-white border-t hover:bg-gray-50">
+                          <td class="py-4 px-6 bold w-96 bold">Transaction Fee Priority</td>
+                          <td class="py-4 pr-5">
+                            <div class="w-52 md:flex-1">
+                              <div class="relative">
+                                <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                  <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"></path>
+                                </svg>
+                                <select class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="fee_priority_{{ c.name }}">
+                                  <option value="0" {% if c.fee_priority==0 %} selected{% endif %}>Default</option>
+                                  <option value="1" {% if c.fee_priority==1 %} selected{% endif %}>Low</option>
+                                  <option value="2" {% if c.fee_priority==2 %} selected{% endif %}>Medium</option>
+                                  <option value="3" {% if c.fee_priority==3 %} selected{% endif %}>High</option>
+                                </select>
+                              </div>
+                            </div>
+                          </td>
+                        </tr>
+                        {% else %}
+                        <tr class="bg-white border-t hover:bg-gray-50">
+                          <td class="py-4 px-6 bold bold">Blocks Confirmed Target</td>
+                          <td class="py-4 pr-5">
+                            <input type="number" class="w-52 appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" name="conf_target_{{ c.name }}" min="1" max="32" value="{{ c.conf_target }}"> </td>
+                        </tr>
+                        {% endif %}
+                        {% if c.name == 'particl' %}
+                        <tr class="bg-white border-t hover:bg-gray-50">
+                          <td class="py-4 px-6 bold bold">Anon Tx Ring Size</td>
+                          <td class="py-4 pr-5">
+                            <input type="number" class="w-52 appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" name="rct_ring_size_{{ c.name }}" min="3" max="32" value="{{ c.anon_tx_ring_size }}"> </td>
+                        </tr>
+                      {% endif %}
+                    </table>
+                    </div>
                   </div>
-                </div>
-              </section>
+                  <div class="p-6 pt-10 bg-white bg-opacity-60 rounded-b-md">
+                    <div class="w-full md:w-0/12">
+                      <div class="flex flex-wrap justify-end -m-1.5">
+                        <div class="w-full md:w-auto p-1.5 ml-2">
+                          <button name="apply_{{ c.name }}" value="Apply" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none"><svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round" ><polyline points=" 6,12 10,16 18,8 " stroke="#ffffff"></polyline> <circle cx="12" cy="12" r="11"></circle></g></svg>  Apply</button>
+                        </div>
+                        {% if c.can_disable == true %}
+                        <div class="w-full md:w-auto p-1.5 ml-2">
+                          <button name="disable_{{ c.name }}" value="Disable" onclick="return confirmPopup('Disable', '{{ c.display_name }}');" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-red-500 hover:text-red-600 border border-red-400 hover:border-red-500 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none"><svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ef5844" stroke-linejoin="round" ><line x1="16" y1="8" x2="8" y2="16" stroke="#ef5844"></line> <line x1="16" y1="16" x2="8" y2="8" stroke="#ef5844"></line> <circle cx="12" cy="12" r="11"></circle></g></svg> Disable Coin </button>
+                        </div>
+                        {% endif %}
+                        {% if c.can_reenable == true %}
+                        <div class="w-full md:w-auto p-1.5 ml-2">
+                          <button name="enable_{{ c.name }}" value="Enable" onclick="return confirmPopup('Enable', '{{ c.display_name }}');" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-white hover:bg-white font-medium text-sm text-green-500 border border-green-500 hover:text-green-600 hover:border-green-600 rounded-md shadow-button focus:ring-0 focus:outline-none"><svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#2ad167" stroke-linejoin="round" ><polyline points=" 6,12 10,16 18,8 " stroke="#2ad167"></polyline> <circle cx="12" cy="12" r="11"></circle></g></svg> Enable</button>
+                        </div>
 
-              <div class="container px-0 mx-auto mt-5">
-                <div class="overflow-x-auto relative border sm:rounded-lg">
 
-                  <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
-                    <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none">
-                      <tr>
-                        <th scope="col" class="py-3 px-6">Settings</th>
-                        <th scope="col">Value</th>
-                      </tr>
-                    </thead>
 
-                    {% if c.connection_type %}
-                    <tr>
-                      <td class="py-4 px-6 bold w-96 bold">Connection Type</td>
-                      <td class="py-4">{{ c.connection_type }}</td>
-                    </tr>
-                    {% endif %}
-                    {% if c.manage_daemon is defined %}
-                    {% if c.name == 'monero' %}
-                    <tr class="bg-white border-t hover:bg-gray-50">
-                      <td class="py-4 px-6 bold w-96">Manage Daemon</td>
-                      <td>
-                        <select class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" name="managedaemon_{{ c.name }}">
-                          <option value="true" {% if c.manage_daemon==true %} selected{% endif %}>True</option>
-                          <option value="false" {% if c.manage_daemon==false %} selected{% endif %}>False</option>
-                        </select>
-                      </td>
-                    </tr>
-                    <tr class="bg-white border-t hover:bg-gray-50">
-                      <td class="py-4 px-6 bold w-96 bold">Daemon RPC Host</td>
-                      <td><input type="text" class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" name="rpchost_{{ c.name }}" value="{{ c.rpchost }}"></td>
-                    </tr>
-                    <tr class="bg-white border-t hover:bg-gray-50">
-                      <td class="py-4 px-6 bold w-96 bold">Daemon RPC Port</td>
-                      <td><input type="text" class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" name="rpcport_{{ c.name }}" value="{{ c.rpcport }}"></td>
-                    </tr>
-                    <tr class="bg-white border-t hover:bg-gray-50">
-                      <td class="py-4 px-6" colspan=2>
-                        <label for="message" class="block mb-2 text-sm font-medium text-gray-900">List trusted public nodes to use if “Automatically Select Daemon” is set as “True”. <br/></label>
-                            <textarea class="outline-none block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 monospace" placeholder="(Add one entry per line) eg: node.xmr.to:18081" name="remotedaemonurls_{{ c.name }}" rows="4" cols="100">{{ c.remotedaemonurls }}</textarea>
-                      </td>
-                    </tr>
-                      <tr class="bg-white border-t hover:bg-gray-50">
-                      <td class="py-4 px-6 bold w-96 bold">Automatically Select Daemon</td>
-                      <td>
-                        <select class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" name="autosetdaemon_{{ c.name }}">
-                          <option value="true" {% if c.autosetdaemon==true %} selected{% endif %}>True</option>
-                          <option value="false" {% if c.autosetdaemon==false %} selected{% endif %}>False</option>
-                        </select>
-                      </td>
-                    </tr>
-                    {% else %}
-                    <tr class="bg-white border-t hover:bg-gray-50">
-                      <td class="py-4 px-6 bold w-96 bold">Manage Daemon</td>
-                      <td>{{ c.manage_daemon }}</td>
-                    </tr>
-                    {% endif %}
-                    {% endif %}
-                    {% if c.manage_wallet_daemon is defined %}
-                    <tr class="bg-white border-t hover:bg-gray-50">
-                      <td class="py-4 px-6 bold w-96 bold">Manage Wallet Daemon</td>
-                      <td>{{ c.manage_wallet_daemon }}</td>
-                    </tr>
-                    {% endif %}
-                    <tr class="bg-white border-t hover:bg-gray-50">
-                      <td class="py-4 px-6 bold w-96 bold">Chain Lookups</td>
-                      <td>
-                        <select class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" name="lookups_{{ c.name }}">
-                          <option value="local" {% if c.lookups=='local' %} selected{% endif %}>Local Node</option>
-                          <option value="explorer" {% if c.lookups=='explorer' %} selected{% endif %}>Explorer</option>
-                        </select>
-                      </td>
-                    </tr>
-                    {% if c.name == 'monero' %}
-                    <tr class="bg-white border-t hover:bg-gray-50">
-                      <td class="py-4 px-6 bold w-96 bold">Transaction Fee Priority</td>
-                      <td>
-                        <select class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" name="fee_priority_{{ c.name }}">
-                          <option value="0" {% if c.fee_priority==0 %} selected{% endif %}>Default</option>
-                          <option value="1" {% if c.fee_priority==1 %} selected{% endif %}>Low</option>
-                          <option value="2" {% if c.fee_priority==2 %} selected{% endif %}>Medium</option>
-                          <option value="3" {% if c.fee_priority==3 %} selected{% endif %}>High</option>
-                        </select>
-                      </td>
-                    </tr>
-                    {% else %}
-                    <tr class="bg-white border-t hover:bg-gray-50">
-                      <td class="py-4 px-6 bold w-96 bold">Blocks Confirmed Target</td>
-                      <td><input type="number" class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" name="conf_target_{{ c.name }}" min="1" max="32" value="{{ c.conf_target }}"></td>
-                    </tr>
-                    {% endif %}
-                    {% if c.name == 'particl' %}
-                    <tr class="bg-white border-t hover:bg-gray-50">
-                      <td class="py-4 px-6 bold w-96 bold">Anon Tx Ring Size</td>
-                      <td><input type="number" class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" name="rct_ring_size_{{ c.name }}" min="3" max="32" value="{{ c.anon_tx_ring_size }}"></td>
-                    </tr>
-                    {% endif %}
+
+
+                      {% endif %}
+                    </div>
+                    </div>
+                  </div>
                   </table>
-                </div>
-              </div>
-
-              <div class="p-6 pt-10 bg-white bg-opacity-60 rounded-b-md">
-                <div class="w-full md:w-0/12">
-                  <div class="flex flex-wrap justify-end -m-1.5">
-
-                    <div class="w-full md:w-auto p-1.5 ml-2">
-                      <button name="apply_{{ c.name }}" value="Apply" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
-                        <span>Apply</span> </button>
+                  {% endfor %}
+                  <input type="hidden" name="formid" value="{{ form_id }}"> </div>
+              <div class="hidden rounded-lg" id="general" role="tabpanel" aria-labelledby="general-tab">
+                <section class="bg-white">
+                  <div class="pl-2 pr-2 pt-0 pb-0 mt-5 h-full overflow-hidden bg-white">
+                    <div class="pb-6 border-coolGray-100">
+                      <div class="flex flex-wrap items-center justify-between -m-2">
+                        <div class="w-full pt-2">
+                          <section class="bg-white pl-3">
+                            <div class="flex flex-wrap items-center">
+                              <div class="w-full">
+                                <h4 class="font-semibold text-black text-2xl align-middle">
+             <span class="mr-2 inline-block align-middle items-center justify-center w-8 h-7 bg-white-50 rounded">
+              <svg class="text-gray-500 w-7 h-7" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round" class="nc-icon-wrapper"><circle cx="12" cy="12" r="3" stroke="#3b82f6"></circle> <path d="M20,12a8.049,8.049,0,0,0-.188-1.713l2.714-2.055-2-3.464L17.383,6.094a7.987,7.987,0,0,0-2.961-1.719L14,1H10L9.578,4.375A7.987,7.987,0,0,0,6.617,6.094L3.474,4.768l-2,3.464,2.714,2.055a7.9,7.9,0,0,0,0,3.426L1.474,15.768l2,3.464,3.143-1.326a7.987,7.987,0,0,0,2.961,1.719L10,23h4l.422-3.375a7.987,7.987,0,0,0,2.961-1.719l3.143,1.326,2-3.464-2.714-2.055A8.049,8.049,0,0,0,20,12Z"></path></g></svg>
+             </span>General (todo)
+            </h4> </div>
+                            </div>
+                          </section> 
+                          <div class="container px-0 mx-auto mt-5">
+                            <div class="overflow-x-auto relative border sm:rounded-lg">
+                              <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
+                                <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none">
+                                  <tr>
+                                    <th scope="col" class="py-3 px-6">Settings</th>
+                                    <th scope="col">Value</th>
+                                  </tr>
+                                </thead>
+                                <tr class="bg-white border-t hover:bg-gray-50">
+                                  <td class="py-4 px-6 bold w-96 bold">Debug Node</td>
+                                  <td class="py-4 pr-5">
+                                    <div class="w-52 md:flex-1">
+                                      <div class="relative">
+                                        <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                          <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"></path>
+                                        </svg>
+                                        <select class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
+                                          <option value="true">True</option>
+                                          <option value="false">False</option>
+                                        </select>
+                                      </div>
+                                    </div>
+                                  </td>
+                                </tr>
+                                <tr class="bg-white border-t hover:bg-gray-50">
+                                  <td class="py-4 px-6 bold">Debug Mode UI</td>
+                                  <td class="py-4 pr-5">
+                                    <div class="w-52 md:flex-1">
+                                      <div class="relative">
+                                        <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                          <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"></path>
+                                        </svg>
+                                        <select class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
+                                          <option value="true">True</option>
+                                          <option value="false">False</option>
+                                        </select>
+                                      </div>
+                                    </div>
+                                  </td>
+                                </tr>
+                              </table>
+                            </div>
+                          </div>
+                          <div class="p-6 pt-10 bg-white bg-opacity-60 rounded-b-md">
+                            <div class="w-full md:w-0/12">
+                              <div class="flex flex-wrap justify-end -m-1.5">
+                              <div class="w-full md:w-auto p-1.5 ml-2">
+                          <button name="" value="Apply" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none"><svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round" ><polyline points=" 6,12 10,16 18,8 " stroke="#ffffff"></polyline> <circle cx="12" cy="12" r="11"></circle></g></svg>  Apply</button>
+                        </div>
+                              </div>
+                            </div>
+                          </div>
+                          <section class="bg-white pl-3">
+                            <div class="flex flex-wrap items-center">
+                              <div class="w-full">
+                                <h4 class="font-semibold text-black text-2xl align-middle">
+             <span class="mr-2 inline-block align-middle items-center justify-center w-9 h-8 bg-white-50 rounded">
+              <svg class="text-gray-500 w-7 h-7" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round" class="nc-icon-wrapper"><rect x="10" y="14" width="4" height="9"></rect> <rect x="1" y="18" width="4" height="5"></rect> <rect x="19" y="10" width="4" height="13"></rect> <polyline data-cap="butt" points="3,10 8,5 12,9 20,1 " stroke="#3b82f6"></polyline> <polyline points=" 15,1 20,1 20,6 " stroke="#3b82f6"></polyline></g></svg>
+             </span>Chart (todo)
+            </h4> </div>
+                            </div>
+                          </section>
+                          <div class="container px-0 mx-auto mt-5">
+                            <div class="overflow-x-auto relative border sm:rounded-lg">
+                              <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
+                                <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none">
+                                  <tr>
+                                    <th scope="col" class="py-3 px-6">Settings</th>
+                                    <th scope="col">Value</th>
+                                  </tr>
+                                </thead>
+                                <tr>
+                                  <td class="py-4 px-6 bold w-96 bold">Show Chart</td>
+                                  <td class="py-4 pr-5">
+                                    <div class="w-52 md:flex-1">
+                                      <div class="relative">
+                                        <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                          <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"></path>
+                                        </svg>
+                                        <select class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
+                                          <option value="true">True</option>
+                                          <option value="false">False</option>
+                                        </select>
+                                      </div>
+                                    </div>
+                                  </td>
+                                </tr>
+                                <tr class="bg-white border-t hover:bg-gray-50">
+                                  <td class="py-4 px-6 bold">Chart API Key (URL)</td>
+                                  <td class="py-4 pr-5">
+                                    <input type="text" class="w-52 appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" name="" min="3" max="32" value=""> </td>
+                                </tr>
+                              </table>
+                            </div>
+                          </div>
+                          <div class="p-6 pt-10 bg-white bg-opacity-60 rounded-b-md">
+                            <div class="w-full md:w-0/12">
+                              <div class="flex flex-wrap justify-end -m-1.5">
+                              <div class="w-full md:w-auto p-1.5 ml-2">
+                          <button name="" value="Apply" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none"><svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round" ><polyline points=" 6,12 10,16 18,8 " stroke="#ffffff"></polyline> <circle cx="12" cy="12" r="11"></circle></g></svg>  Apply</button>
+                        </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
                     </div>
-
-                    {% if c.can_disable == true %}
-
-                    <div class="w-full md:w-auto p-1.5 ml-2">
-                      <button name="disable_{{ c.name }}" value="Disable" onclick="return confirmPopup('Disable', '{{ c.display_name }}');" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-red-500 hover:text-red-600 border border-red-400 hover:border-red-500 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none">
-                        <span>Disable Coin</span> </button>
-                    </div>
-
-                    {% endif %}
-                    {% if c.can_reenable == true %}
-
-                    <div class="w-full md:w-auto p-1.5 ml-2">
-                      <button name="enable_{{ c.name }}" value="Enable" onclick="return confirmPopup('Enable', '{{ c.display_name }}');" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-white hover:bg-white font-medium text-sm text-green-500 border border-green-500 hover:text-green-600 hover:border-green-600 rounded-md shadow-button focus:ring-0 focus:outline-none">
-                        <span>Enable</span> </button>
-                    </div>
-                    {% endif %}
-
                   </div>
-                </div>
               </div>
-           </table>
-              <input type="hidden" name="formid" value="{{ form_id }}">
-  </form>
-
-              {% endfor %}
-
-
-
+              <div class="hidden rounded-lg" id="tor" role="tabpanel" aria-labelledby="tor-tab">
+                <section class="bg-white">
+                  <div class="pl-2 pr-2 pt-0 pb-0 mt-5 h-full overflow-hidden bg-white ">
+                    <div class="pb-6 border-coolGray-100">
+                      <div class="flex flex-wrap items-center justify-between -m-2">
+                        <div class="w-full pt-2">
+                          <section class="bg-white pl-3">
+                            <div class="flex flex-wrap items-center">
+                              <div class="w-full">
+                                <h4 class="font-semibold text-black text-2xl align-middle">
+             <span class="mr-2 inline-block align-middle items-center justify-center w-9 h-8 bg-white-50 rounded">
+                     <svg class="text-gray-500 w-7 h-7" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
+                          <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#AA70E4" stroke-linejoin="round">
+                            <path d="M9,18.8A6.455,6.455,0,0,1,7,14,6.455,6.455,0,0,1,9,9.2" stroke="#AA70E4"></path>
+                            <path d="M15,18.8A6.455,6.455,0,0,0,17,14a6.455,6.455,0,0,0-2-4.8" stroke="#AA70E4"></path>
+                            <path d="M14,2.256V1H10V2.256A3.949,3.949,0,0,1,7.658,5.891,8.979,8.979,0,0,0,2,14c0,4.971,4.477,9,10,9s10-4.029,10-9a8.978,8.978,0,0,0-5.658-8.109A3.95,3.95,0,0,1,14,2.256Z"></path>
+                          </g>
+                        </svg>
+             </span>Tor (todo)
+            </h4> </div>
+                            </div>
+                          </section>
+                          <div class="container px-0 mx-auto mt-5">
+                            <div class="overflow-x-auto relative border sm:rounded-lg">
+                              <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
+                                <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none">
+                                  <tr>
+                                    <th scope="col" class="py-3 px-6">Settings</th>
+                                    <th scope="col">Value</th>
+                                  </tr>
+                                </thead>
+                                <tr>
+                                  <td class="py-4 px-6 bold w-96 bold">Use Tor</td>
+                                  <td class="py-4 pr-5">
+                                    <div class="w-1/5 md:flex-1">
+                                      <div class="relative">
+                                        <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                          <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"></path>
+                                        </svg>
+                                        <select class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
+                                          <option value="true">True</option>
+                                          <option value="false">False</option>
+                                        </select>
+                                      </div>
+                                    </div>
+                                  </td>
+                                </tr>
+                                <tr class="bg-white border-t hover:bg-gray-50">
+                                  <td class="py-4 px-6 bold w-96">Use Tor Proxy</td>
+                                  <td class="py-4 pr-5">
+                                    <div class="w-1/5 md:flex-1">
+                                      <div class="relative">
+                                        <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                          <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"></path>
+                                        </svg>
+                                        <select class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
+                                          <option value="true">True</option>
+                                          <option value="false">False</option>
+                                        </select>
+                                      </div>
+                                    </div>
+                                  </td>
+                                </tr>
+                                <tr class="bg-white border-t hover:bg-gray-50">
+                                  <td class="py-4 px-6 bold w-96">Tor Proxy Host</td>
+                                  <td class="py-4 pr-5">
+                                    <input type="text" class="w-1/5 appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" name="" min="3" max="32" value=""> </td>
+                                </tr>
+                                <tr class="bg-white border-t hover:bg-gray-50">
+                                  <td class="py-4 px-6 bold w-96">Tor Proxy Port</td>
+                                  <td class="py-4 pr-5">
+                                    <input type="text" class="w-1/5 appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" name="" min="3" max="32" value=""> </td>
+                                </tr>
+                                <tr class="bg-white border-t hover:bg-gray-50">
+                                  <td class="py-4 px-6 bold w-96">Tor Control Port</td>
+                                  <td class="py-4 pr-5">
+                                    <input type="text" class="w-1/5 appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" name="" min="3" max="32" value=""> </td>
+                                </tr>
+                              </table>
+                            </div>
+                          </div>
+                          <div class="p-6 pt-10 bg-white bg-opacity-60 rounded-b-md">
+                            <div class="w-full md:w-0/12">
+                              <div class="flex flex-wrap justify-end -m-1.5">
+                               <div class="w-full md:w-auto p-1.5 ml-2">
+                          <button name="" value="Apply" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none"><svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round" ><polyline points=" 6,12 10,16 18,8 " stroke="#ffffff"></polyline> <circle cx="12" cy="12" r="11"></circle></g></svg>  Apply</button>
+                        </div>
+                              </div>
+                            </div>
+                          </div>
+                          </form>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
-    <div class="hidden rounded-lg" id="general" role="tabpanel" aria-labelledby="general-tab">
- <form method="post">
-  <section class="bg-white">
-      <div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden bg-white ">
-        <div class="pb-6 border-coolGray-100">
-          <div class="flex flex-wrap items-center justify-between -m-2">
-            <div class="w-full pt-2">
-
-
-              <section class="bg-white p-3">
-                <div class="flex flex-wrap items-center">
-                  <div class="w-full">
-                    <h4 class="font-semibold text-black text-2xl align-middle">
-                      <span class="inline-block align-middle items-center justify-center w-9 h-10 bg-white-50 rounded">
-                      <img class="h-9" src="" alt=""> </span>General</h4>
-                  </div>
-                </div>
-              </section>
-
-              <div class="container px-0 mx-auto mt-5">
-                <div class="overflow-x-auto relative border sm:rounded-lg">
-
-                  <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
-                    <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none">
-                      <tr>
-                        <th scope="col" class="py-3 px-6">Settings</th>
-                        <th scope="col">Value</th>
-                      </tr>
-                    </thead>
-
-                    <tr>
-                      <td class="py-4 px-6 bold w-96 bold">Debug Mode</td>
-                         <td>
-                        <select class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" >
-                          <option value="true" >True</option>
-                          <option value="false" >False</option>
-                        </select>
-                      </td>
-                    </tr>
-
-                    <tr class="bg-white border-t hover:bg-gray-50">
-                      <td class="py-4 px-6 bold w-96">Debug Mode UI</td>
-                      <td>
-                        <select class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" >
-                          <option value="true" >True</option>
-                          <option value="false" >False</option>
-                        </select>
-                      </td>
-                    </tr>
-                    </tr>
-        </table>
- </div> </div>
-
-
-
-
-
-              <div class="p-6 pt-10 bg-white bg-opacity-60 rounded-b-md">
-                <div class="w-full md:w-0/12">
-                  <div class="flex flex-wrap justify-end -m-1.5">
-
-                    <div class="w-full md:w-auto p-1.5 ml-2">
-                      <button name="apply" value="Apply" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
-                        <span>Apply</span> </button>
-                    </div>
-
-
-
-                  </div>
-                </div>
-              </div>
-<form>
- <form method="post">
-              <section class="bg-white p-3">
-                <div class="flex flex-wrap items-center">
-                  <div class="w-full">
-                    <h4 class="font-semibold text-black text-2xl align-middle">
-                      <span class="inline-block align-middle items-center justify-center w-9 h-10 bg-white-50 rounded">
-                      <img class="h-9" src="" alt=""> </span>Chart (todo)</h4>
-                  </div>
-                </div>
-              </section>
-
-              <div class="container px-0 mx-auto mt-5">
-                <div class="overflow-x-auto relative border sm:rounded-lg">
-
-                  <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
-                    <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none">
-                      <tr>
-                        <th scope="col" class="py-3 px-6">Settings</th>
-                        <th scope="col">Value</th>
-                      </tr>
-                    </thead>
-
-                    <tr>
-                      <td class="py-4 px-6 bold w-96 bold">Show Chart</td>
-                         <td>
-                        <select class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" >
-                         <option value="true" >True</option>
-                          <option value="false" >False</option>
-                        </select>
-                      </td>
-                    </tr>
-
-                    <tr class="bg-white border-t hover:bg-gray-50">
-                      <td class="py-4 px-6 bold w-96">Chart API Key (URL)</td>
-                      <td><input type="text" class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" name="" min="3" max="32" value=""></td>
-                    </tr>
-                    </tr>
-        </table>
- </div> </div>
-
-
-
-              <div class="p-6 pt-10 bg-white bg-opacity-60 rounded-b-md">
-                <div class="w-full md:w-0/12">
-                  <div class="flex flex-wrap justify-end -m-1.5">
-
-                    <div class="w-full md:w-auto p-1.5 ml-2">
-                      <button name="apply" value="Apply" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
-                        <span>Apply</span> </button>
-                    </div>
-
-
-
-                  </div>
-                </div>
-              </div>
-
-</form>
- </div> </div> </div> </div>
-
-
-
-    </div>
-    <div class="hidden rounded-lg" id="tor" role="tabpanel" aria-labelledby="tor-tab">
-
- <form method="post">
-
-  <section class="bg-white">
-      <div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden bg-white ">
-        <div class="pb-6 border-coolGray-100">
-          <div class="flex flex-wrap items-center justify-between -m-2">
-            <div class="w-full pt-2">
-
-
-              <section class="bg-white p-3">
-                <div class="flex flex-wrap items-center">
-                  <div class="w-full">
-                    <h4 class="font-semibold text-black text-2xl align-middle">
-                      <span class="inline-block align-middle items-center justify-center w-9 h-10 bg-white-50 rounded">
-                      <img class="h-9" src="" alt=""> </span>Tor</h4>
-                  </div>
-                </div>
-              </section>
-
-              <div class="container px-0 mx-auto mt-5">
-                <div class="overflow-x-auto relative border sm:rounded-lg">
-
-                  <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
-                    <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none">
-                      <tr>
-                        <th scope="col" class="py-3 px-6">Settings</th>
-                        <th scope="col">Value</th>
-                      </tr>
-                    </thead>
-
-                    <tr>
-                      <td class="py-4 px-6 bold w-96 bold">Use TOR</td>
-                         <td>
-                        <select class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" >
-                          <option value="true" >True</option>
-                          <option value="false" >False</option>
-                        </select>
-                      </td>
-                    </tr>
-
-                    <tr class="bg-white border-t hover:bg-gray-50">
-                      <td class="py-4 px-6 bold w-96">Use Tor Proxy</td>
-                      <td>
-                        <select class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" >
-                          <option value="true" >True</option>
-                          <option value="false" >False</option>
-                        </select>
-                      </td>
-                    </tr>
-                    </tr>
-
-
-
-                    <tr class="bg-white border-t hover:bg-gray-50">
-                      <td class="py-4 px-6 bold w-96">Tot Proxy Host</td>
-                        <td><input type="text" class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" name="" min="3" max="32" value=""></td>
-                    </tr>
-                    </tr>
-                       <tr class="bg-white border-t hover:bg-gray-50">
-                      <td class="py-4 px-6 bold w-96">Tor Proxy Port</td>
-                        <td><input type="text" class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" name="" min="3" max="32" value=""></td>
-                    </tr>
-                    </tr>
-                                    <tr class="bg-white border-t hover:bg-gray-50">
-                      <td class="py-4 px-6 bold w-96">Tor Control Port</td>
-                        <td><input type="text" class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" name="" min="3" max="32" value=""></td>
-                    </tr>
-                    </tr>
-        </table>
- </div> </div>
-
-              <div class="p-6 pt-10 bg-white bg-opacity-60 rounded-b-md">
-                <div class="w-full md:w-0/12">
-                  <div class="flex flex-wrap justify-end -m-1.5">
-
-                     <div class="w-full md:w-auto p-1.5 ml-2">
-                      <button name="apply" value="Apply" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none">
-                        <span>Default</span> </button>
-                    </div>
-
-                    <div class="w-full md:w-auto p-1.5 ml-2">
-                      <button name="apply" value="Apply" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
-                        <span>Apply</span> </button>
-                    </div>
-
-
-
-                  </div>
-                </div>
-              </div>
-
-
-</form>
-
- </div> </div> </div> </div>
-
-
-    </div> <!-- -->
-
 </div>
-</div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-
 </section>
-
 <script>
   function confirmPopup(action, coin_name) {
-      return confirm(action + " " + coin_name + "?\nWill shutdown basicswap.");
+    return confirm(action + " " + coin_name + "?\nWill shutdown basicswap.");
   }
 </script>
 {% include 'footer.html' %}
 </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/basicswap/templates/smsgaddresses.html b/basicswap/templates/smsgaddresses.html
index 0bc4648..e595fef 100644
--- a/basicswap/templates/smsgaddresses.html
+++ b/basicswap/templates/smsgaddresses.html
@@ -1,5 +1,4 @@
 {% include 'header.html' %}
-
 <div class="container mx-auto">
   <section class="bg-white p-5 mt-5">
     <div class="flex flex-wrap items-center -m-2">
@@ -25,13 +24,9 @@
       </div>
     </div>
   </section>
-
   <section class="py-4">
     <div class="container px-4 mx-auto">
-      <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden">
-        <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt="">
-        <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt="">
-        <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
+      <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden"> <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
         <div class="relative z-20 flex flex-wrap items-center -m-3">
           <div class="w-full md:w-1/2 p-3">
             <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">Active SMSG Addresses</h2>
@@ -41,197 +36,156 @@
       </div>
     </div>
   </section>
-
-{% include 'inc_messages.html' %}
-
+  {% include 'inc_messages.html' %}
   <section class="bg-white">
     <div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden bg-white ">
       <div class="pb-6 border-coolGray-100">
         <div class="flex flex-wrap items-center justify-between -m-2">
           <div class="w-full pt-2">
-
             <form method="post">
-
               {% if data.edit_address %}
-
               <input type="hidden" name="edit_address_id" value="{{ data.addr_data.id }}">
               <input type="hidden" name="edit_address" value="{{ data.addr_data.addr }}">
-
               <section class="bg-white p-6">
                 <div class="flex flex-wrap items-center">
                   <div class="w-full">
-                    <h4 class="font-semibold text-black text-2xl">Edit Address: {{ data.addr_data.addr }}</h4>
-                  </div>
+                    <h4 class="font-semibold text-black text-2xl">Edit Address: {{ data.addr_data.addr }}</h4> </div>
                 </div>
               </section>
-
-              <div class="container px-0 mx-auto mt-5">
+              <div class="container px-0 mx-auto">
                 <div class="overflow-x-auto relative border sm:rounded-lg">
-
                   <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
-
                     <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300">
                       <tr>
                         <th scope="col" class="py-3 px-6">SETTING</th>
                         <th scope="col">VALUE</th>
                       </tr>
                     </thead>
-
                     <tr class="bg-white border-t hover:bg-gray-50">
                       <td class="py-4 px-6 monospace bold">Pubkey</td>
-                      <td class="py-4">{{ data.addr_data.pubkey }}</td>
+                      <td class="py-4 pr-5 select-all monospace">{{ data.addr_data.pubkey }}</td>
                     </tr>
-
                     <tr class="bg-white border-t hover:bg-gray-50">
                       <td class="py-4 px-6">Active</td>
-                      <td>
-                        <select class="pappearance-none pr-15 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" name="active_ind">
+                      <td class="py-4 pr-5">
+                      <div class="w-52 md:flex-1">
+                      <div class="relative">
+                                <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                  <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"></path>
+                                </svg>
+                        <select class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="active_ind">
                           <option value="1" {% if data.addr_data.active_ind==1 %} selected{% endif %}>True</option>
                           <option value="0" {% if data.addr_data.active_ind==0 %} selected{% endif %}>False</option>
                         </select>
+                      </div>
+                    </div>
                       </td>
                     </tr>
-
                     <tr class="bg-white border-t hover:bg-gray-50">
                       <td class="py-4 px-6">Note</td>
-                      <td>
-                        <input class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" name="addressnote" type="text" value="{{ data.addr_data.note }}" maxlength="30">
+                      <td class="py-4 pr-5">
+                        <input class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5 w-full" name="addressnote" type="text" value="{{ data.addr_data.note }}" maxlength="30"> </td>
+                    </tr>
+                    <tr>
+                  </table>
+                </div>
+              </div>
+              <div class="p-6 pt-10 bg-white bg-opacity-60 rounded-b-md">
+                <div class="w-full md:w-0/12">
+                  <div class="flex flex-wrap justify-end -m-1.5">
+                    <div class="w-full md:w-auto p-1.5 ml-2">
+                    <button name="saveaddr" value="Save Address" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none "><svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="square" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="miter" class="nc-icon-wrapper" stroke-miterlimit="10"><line x1="12" y1="7" x2="12" y2="17" stroke="#ffffff"></line> <line x1="17" y1="12" x2="7" y2="12" stroke="#ffffff"></line> <circle cx="12" cy="12" r="11"></circle></g></svg>Create Address</button>
+                    </div>
+                  <div class="w-full md:w-auto p-1.5 ml-2">
+                   <button name="cancel" value="Cancel" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none"><svg class="text-gray-500 w-5 h-5 mr-2" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="square" stroke-width="2" fill="none" stroke="#556987" stroke-linejoin="miter" class="nc-icon-wrapper" stroke-miterlimit="10"><line data-cap="butt" x1="18" y1="12" x2="7" y2="12" stroke-linecap="butt" stroke="#556987"></line> <polyline points=" 11,16 7,12 11,8 " stroke="#5569878"></polyline> <circle cx="12" cy="12" r="11"></circle></g></svg>Go Back</button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              {% elif data.new_address %}
+              <section class="bg-white p-6">
+                <div class="flex flex-wrap items-center">
+                  <div class="w-full">
+                    <h4 class="font-semibold text-black text-2xl">New Receiving Address</h4> </div>
+                </div>
+              </section>
+              <div class="container px-0 mx-auto">
+                <div class="overflow-x-auto relative border sm:rounded-lg">
+                  <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
+                    <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300">
+                      <tr>
+                        <th scope="col" class="py-3 px-6">SETTING</th>
+                        <th scope="col">VALUE</th>
+                      </tr>
+                    </thead>
+                    <tr class="bg-white border-t hover:bg-gray-50">
+                      <td class="py-4 px-6 bold">Note</td>
+                      <td class="py-4 pr-5">
+                        <input class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5 w-full" name="addressnote" type="text" value="" maxlength="30">
                       </td>
                     </tr>
-
-                    <tr>
-
                   </table>
                 </div>
               </div>
-
               <div class="p-6 pt-10 bg-white bg-opacity-60 rounded-b-md">
                 <div class="w-full md:w-0/12">
                   <div class="flex flex-wrap justify-end -m-1.5">
-
                     <div class="w-full md:w-auto p-1.5 ml-2">
-                      <button name="saveaddr" value="Save Address" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
-                           <span>Save Address</span> </button>
+                    <button name="createnewaddr" value="Create Address" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none "><svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="square" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="miter" class="nc-icon-wrapper" stroke-miterlimit="10"><line x1="12" y1="7" x2="12" y2="17" stroke="#ffffff"></line> <line x1="17" y1="12" x2="7" y2="12" stroke="#ffffff"></line> <circle cx="12" cy="12" r="11"></circle></g></svg>Create Address</button>
                     </div>
-
-                    <div class="w-full md:w-auto p-1.5 ml-2">
-                      <button name="cancel" value="cancel" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none">
-                           <span>Cancel</span> </button>
+                  <div class="w-full md:w-auto p-1.5 ml-2">
+                   <button name="cancel" value="Cancel" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-non"><svg class="text-gray-500 w-5 h-5 mr-2" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="square" stroke-width="2" fill="none" stroke="#556987" stroke-linejoin="miter" class="nc-icon-wrapper" stroke-miterlimit="10"><line data-cap="butt" x1="18" y1="12" x2="7" y2="12" stroke-linecap="butt" stroke="#556987"></line> <polyline points=" 11,16 7,12 11,8 " stroke="#5569878"></polyline> <circle cx="12" cy="12" r="11"></circle></g></svg>Go Back</button>
                     </div>
-
                   </div>
                 </div>
               </div>
-
-              {% elif data.new_address %}
-
-              <section class="bg-white p-6">
-                <div class="flex flex-wrap items-center">
-                  <div class="w-full">
-                    <h4 class="font-semibold text-black text-2xl">New Receiving Address</h4>
-                  </div>
-                </div>
-              </section>
-
-              <div class="container px-0 mx-auto mt-5">
-                <div class="overflow-x-auto relative border sm:rounded-lg">
-
-                  <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
-
-                    <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300">
-                      <tr>
-                        <th scope="col" class="py-3 px-6">SETTING</th>
-                        <th scope="col">VALUE</th>
-                      </tr>
-                    </thead>
-
-                    <tr class="bg-white border-t hover:bg-gray-50">
-                      <td class="py-4 px-6 bold">Note</td>
-                      <td><input class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" name="addressnote" type="text" value="" maxlength="30"></td>
-                    </tr>
-                  </table>
-
-
-                </div>
-              </div>
-
-              <div class="p-6 pt-10 bg-white bg-opacity-60 rounded-b-md">
-                <div class="w-full md:w-0/12">
-                  <div class="flex flex-wrap justify-end -m-1.5">
-
-                    <div class="w-full md:w-auto p-1.5 ml-2">
-                      <button name="createnewaddr" value="Create Address" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
-                        <span>Create Address</span> </button>
-                    </div>
-
-                    <div class="w-full md:w-auto p-1.5 ml-2">
-                      <button name="cancel" value="Cancel" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none">
-                        <span>Cancel</span> </button>
-                    </div>
-
-                  </div>
-                </div>
-              </div>
-
               {% elif data.new_send_address %}
-
               <section class="bg-white p-6">
                 <div class="flex flex-wrap items-center">
                   <div class="w-full">
-                    <h4 class="font-semibold text-black text-2xl">Add Sending Address</h4>
-                  </div>
+                    <h4 class="font-semibold text-black text-2xl">Add Sending Address</h4> </div>
                 </div>
               </section>
-
-              <div class="container px-0 mx-auto mt-5">
+              <div class="container px-0 mx-auto">
                 <div class="overflow-x-auto relative border sm:rounded-lg">
-
                   <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
-
                     <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300">
                       <tr>
                         <th scope="col" class="py-3 px-6">SETTING</th>
                         <th scope="col">VALUE</th>
                       </tr>
                     </thead>
-
-                      <tr class="bg-white border-t hover:bg-gray-50">
+                    <tr class="bg-white border-t hover:bg-gray-50">
                       <td class="py-4 px-6 bold">Pubkey</td>
-                      <td><input class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" name="addresspubkey" type="text" value="" maxlength="66"></td>
+                      <td class="py-4 pr-5">
+                        <input class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5 w-full monospace" name="addresspubkey" type="text" value="" maxlength="66">
+                      </td>
                     </tr>
                     <tr class="bg-white border-t hover:bg-gray-50">
                       <td class="py-4 px-6 bold">Note</td>
-                      <td><input class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" name="addressnote" type="text" value="" maxlength="30"></td>
+                      <td class="py-4 pr-5">
+                        <input class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5 w-full" name="addressnote" type="text" value="" maxlength="30">
+                      </td>
                     </tr>
                   </table>
                 </div>
               </div>
-
               <div class="p-6 pt-10 bg-white bg-opacity-60 rounded-b-md">
                 <div class="w-full md:w-0/12">
                   <div class="flex flex-wrap justify-end -m-1.5">
-
                     <div class="w-full md:w-auto p-1.5 ml-2">
-                      <button name="createnewsendaddr" value="Add Address" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
-                        <span>Add Address</span> </button>
+                    <button name="createnewsendaddr" value="Add Address" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none "><svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="square" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="miter" class="nc-icon-wrapper" stroke-miterlimit="10"><line x1="12" y1="7" x2="12" y2="17" stroke="#ffffff"></line> <line x1="17" y1="12" x2="7" y2="12" stroke="#ffffff"></line> <circle cx="12" cy="12" r="11"></circle></g></svg>Create Address</button>
                     </div>
-
-                    <div class="w-full md:w-auto p-1.5 ml-2">
-                      <button name="cancel" value="Cancel" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none">
-                        <span>Cancel</span> </button>
+                  <div class="w-full md:w-auto p-1.5 ml-2">
+                   <button name="cancel" value="Cancel" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-non"><svg class="text-gray-500 w-5 h-5 mr-2" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="square" stroke-width="2" fill="none" stroke="#556987" stroke-linejoin="miter" class="nc-icon-wrapper" stroke-miterlimit="10"><line data-cap="butt" x1="18" y1="12" x2="7" y2="12" stroke-linecap="butt" stroke="#556987"></line> <polyline points=" 11,16 7,12 11,8 " stroke="#5569878"></polyline> <circle cx="12" cy="12" r="11"></circle></g></svg>Go Back</button>
                     </div>
-
                   </div>
                 </div>
               </div>
-
               {% else %}
-
               <div class="container px-0 mx-auto mt-5">
                 <div class="overflow-x-auto relative border sm:rounded-lg">
-
                   <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
-
                     <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300">
                       <tr>
                         <th scope="col" class="py-3 px-6">Address</th>
@@ -242,66 +196,54 @@
                         <th scope="col">Action</th>
                       </tr>
                     </thead>
-
                     <tr class="bg-white border-t hover:bg-gray-50">
                       <td class="py-6 px-6"><b class="monospace">{{ network_addr }}</b></td>
                       <td class="py-4">Network Address
                         <td />
-                      <td class="py-4">
-                        <td />
-                      <td class="py-4">
-                        <td />
-                    </tr>
-
-
-                    {% for sa in smsgaddresses %}
+                        <td class="py-4">
+                          <td />
+                          <td class="py-4">
+                            <td /> </tr>
+                            {% for sa in smsgaddresses %}
                     <tr class="bg-white border-t hover:bg-gray-50">
-                      <td class="py-4 px-6 monospace bold">{{ sa.addr }}</td>
+                      <td class="py-4 px-6 monospace bold select-all">{{ sa.addr }}</td>
                       <td class="py-4">{{ sa.type }}</td>
                       <td>{{ sa.active_ind }}</td>
                       <td class="py-4">{{ sa.created_at | formatts }}</td>
                       <td class="py-4">{{ sa.note }}</td>
-                      <td class="py-4"><input class="inline-block w-20 py-1 px-2 font-medium text-center text-sm rounded-md shadow-button bg-white text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300" type="submit" name="editaddr_{{ sa.id }}" value="Edit"></td>
-                    </tr>
-                    {% endfor %}
-
+                      <td class="py-4">
+                        <input class="inline-block w-20 py-1 px-2 font-medium text-center text-sm rounded-md shadow-button bg-white text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300" type="submit" name="editaddr_{{ sa.id }}" value="Edit">
+                      </td>
+                    </tr>{% endfor %}
                   </table>
                 </div>
               </div>
-
-
               <div class="p-6 pt-10 bg-white bg-opacity-60 rounded-b-md">
                 <div class="w-full md:w-0/12">
                   <div class="flex flex-wrap justify-end -m-1.5">
-
-
-                    <div class="w-full md:w-auto p-1.5 ml-2">
-                      <button name="shownewaddr" value="New Address" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
-                        <span>New Address</span> </button>
-                    </div>
-
-                    <div class="w-full md:w-auto p-1.5 ml-2">
-                      <button name="showaddaddr" value="Add Sending Address" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
-                        <span>Add Sending Address</span> </button>
-                    </div>
-
+             <div class="w-full md:w-auto p-1.5 ml-2">
+                          <button name="shownewaddr" value="New Address" type="submit"  class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none"><svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="square" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="miter" class="nc-icon-wrapper" stroke-miterlimit="10"><line x1="12" y1="7" x2="12" y2="17" stroke="#ffffff"></line> <line x1="17" y1="12" x2="7" y2="12" stroke="#ffffff"></line> <circle cx="12" cy="12" r="11"></circle></g></svg>New Address</button>
+                        </div>
+                 <div class="w-full md:w-auto p-1.5 ml-2">
+                          <button name="showaddaddr" value="Add Sending Address" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none"><svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="square" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="miter" class="nc-icon-wrapper" stroke-miterlimit="10"><line x1="12" y1="7" x2="12" y2="17" stroke="#ffffff"></line> <line x1="17" y1="12" x2="7" y2="12" stroke="#ffffff"></line> <circle cx="12" cy="12" r="11"></circle></g></svg>Add Sending Address</button>
+                        </div>
                   </div>
                 </div>
               </div>
-
               {% endif %}
-              <input type="hidden" name="formid" value="{{ form_id }}">
-            </form>
-
+              <input type="hidden" name="formid" value="{{ form_id }}"> </form>
           </div>
         </div>
       </div>
     </div>
-
   </section>
 </div>
-  {% include 'footer.html' %}
+{% include 'footer.html' %}
 </div>
 </body>
-
 </html>
+
+
+  
+
+   
\ No newline at end of file
diff --git a/basicswap/templates/tor.html b/basicswap/templates/tor.html
index 9c747bc..a7d5a29 100644
--- a/basicswap/templates/tor.html
+++ b/basicswap/templates/tor.html
@@ -1,6 +1,5 @@
 {% include 'header.html' %}
 <div class="container mx-auto">
-
   <section class="bg-white p-5 mt-5">
     <div class="flex flex-wrap items-center -m-2">
       <div class="w-full md:w-1/2 p-2">
@@ -25,46 +24,38 @@
       </div>
     </div>
   </section>
-
   <section class="py-4">
     <div class="container px-4 mx-auto">
-      <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden">
-        <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt="">
-        <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt="">
-        <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
+      <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden"> <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
         <div class="relative z-20 flex flex-wrap items-center -m-3">
           <div class="w-full md:w-1/2 p-3">
             <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">TOR</h2>
             <p class="font-semibold text-coolGray-200">TOR connection information</p>
           </div>
           <div class="w-full md:w-1/2 p-3">
-            <a id="refresh" href="/tor"><button class="block md:ml-auto px-5 py-3 font-medium text-lcg text-white bg-blue-500 hover:bg-blue-600 rounded-md focus:ring-0 focus:outline-none">Refresh</button></a>
+            <a id="refresh" href="/tor">
+              <button class="block md:ml-auto px-5 py-3 font-medium text-lcg text-white bg-blue-500 hover:bg-blue-600 rounded-md focus:ring-0 focus:outline-none">Refresh</button>
+            </a>
           </div>
         </div>
       </div>
     </div>
   </section>
-
-{% include 'inc_messages.html' %}
-
+  {% include 'inc_messages.html' %}
   <section class="bg-white">
     <div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden bg-white ">
       <div class="pb-6 border-coolGray-100">
         <div class="flex flex-wrap items-center justify-between -m-2">
           <div class="w-full pt-2">
-
             <div class="container px-0 mx-auto mt-5">
               <div class="overflow-x-auto relative border sm:rounded-lg">
-
                 <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
-
                   <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300">
                     <tr>
                       <th scope="col" class="py-3 px-6 w-80">Name:</th>
                       <th scope="col" class="py-3">Output:</th>
                     </tr>
                   </thead>
-
                   <tr class="bg-white border-t hover:bg-gray-50">
                     <td class="py-4 pl-5 pr-5 w-80 bold">TOR Mode</td>
                     <td td class="py-4">{% if use_tor_proxy == true %} Active {% if tor_established == true %} & Connected{% endif %} {% endif %}</td>
@@ -87,12 +78,8 @@
           </div>
         </div>
       </div>
-
   </section>
-
-</div>
-{% include 'footer.html' %}
+  </div>{% include 'footer.html' %}
 </div>
 </body>
-
-</html>
+</html>
\ No newline at end of file
diff --git a/basicswap/templates/wallet.html b/basicswap/templates/wallet.html
index 7b2044e..aca28fa 100644
--- a/basicswap/templates/wallet.html
+++ b/basicswap/templates/wallet.html
@@ -25,13 +25,9 @@
       </div>
     </div>
   </section>
-
   <section class="py-4">
     <div class="container px-4 mx-auto">
-      <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden">
-        <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt="">
-        <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt="">
-        <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
+      <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden"> <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
         <div class="relative z-20 flex flex-wrap items-center -m-3">
           <div class="w-full md:w-1/2 p-3">
             <h2 class="text-4xl font-bold text-white tracking-tighter">
@@ -41,50 +37,51 @@
             <p class="font-semibold text-coolGray-200 pl-2 pt-5">Manage your {{ w.ticker }} wallet. {% if refresh %} (Page Refresh: {{ refresh }} seconds) {% endif %}</p>
           </div>
           <div class="w-full md:w-1/2 p-3 p-6 container flex flex-wrap items-center justify-end items-center mx-auto">
-           <a class="flex flex-wrap justify-center px-5 py-4 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none" id="refresh" href="/wallet/{{ w.ticker }}">
-            <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g fill="#ffffff" class="nc-icon-wrapper"><path fill="#ffffff" d="M12,3c1.989,0,3.873,0.65,5.43,1.833l-3.604,3.393l9.167,0.983L22.562,0l-3.655,3.442 C16.957,1.862,14.545,1,12,1C5.935,1,1,5.935,1,12h2C3,7.037,7.037,3,12,3z"></path> <path data-color="color-2" d="M12,21c-1.989,0-3.873-0.65-5.43-1.833l3.604-3.393l-9.167-0.983L1.438,24l3.655-3.442 C7.043,22.138,9.455,23,12,23c6.065,0,11-4.935,11-11h-2C21,16.963,16.963,21,12,21z"></path></g></svg>
-               <span>Refresh</span> 
-            </a>      
+            <a class="flex flex-wrap justify-center px-5 py-4 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none" id="refresh" href="/wallet/{{ w.ticker }}">
+              <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
+                <g fill="#ffffff" class="nc-icon-wrapper">
+                  <path fill="#ffffff" d="M12,3c1.989,0,3.873,0.65,5.43,1.833l-3.604,3.393l9.167,0.983L22.562,0l-3.655,3.442 C16.957,1.862,14.545,1,12,1C5.935,1,1,5.935,1,12h2C3,7.037,7.037,3,12,3z"></path>
+                  <path data-color="color-2" d="M12,21c-1.989,0-3.873-0.65-5.43-1.833l3.604-3.393l-9.167-0.983L1.438,24l3.655-3.442 C7.043,22.138,9.455,23,12,23c6.065,0,11-4.935,11-11h-2C21,16.963,16.963,21,12,21z"></path>
+                </g>
+              </svg> <span>Refresh</span> </a>
           </div>
         </div>
       </div>
     </div>
   </section>
-
-{% include 'inc_messages.html' %}
-
-{% if w.updating %}
-
-      <section class="py-4" id="updating" role="alert">
-              <div class="container px-4 mx-auto">
-                <div class="p-6 bg-blue-100 border border-blue-200 rounded-md">
-                  <div class="flex flex-wrap justify-between items-center -m-2">
-                    <div class="flex-1 p-2">
-                      <div class="flex flex-wrap -m-1">
-                        <div class="w-auto p-1">
-                          <svg aria-hidden="true" class="flex-shrink-0 w-5 h-5 text-blue-700 dark:text-blue-800" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path></svg>
-                          </svg>
-                        </div>
-                        <div class="flex-1 p-1">
-                          <h3 class="font-medium text-sm text-blue-900">Updating...</h3>
-                        </div>
-                      </div>
-                    </div>
-                    <div class="w-auto p-2">
-                        <button type="button" class="ml-auto bg-blue-100 text-blue-500 rounded-lg focus:ring-0 focus:ring-blue-400 p-1.5 hover:bg-blue-200 inline-flex h-8 w-8 focus:outline-none" data-dismiss-target="#updating" aria-label="Close">
-                        <span class="sr-only">Close</span>
-                        <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
-                      </button>
-                    </div>
-                  </div>
-                </div>
+  {% include 'inc_messages.html' %} 
+  {% if w.updating %}
+  <section class="py-4" id="updating" role="alert">
+    <div class="container px-4 mx-auto">
+      <div class="p-6 bg-blue-100 border border-blue-200 rounded-md">
+        <div class="flex flex-wrap justify-between items-center -m-2">
+          <div class="flex-1 p-2">
+            <div class="flex flex-wrap -m-1">
+              <div class="w-auto p-1">
+                <svg aria-hidden="true" class="flex-shrink-0 w-5 h-5 text-blue-700 dark:text-blue-800" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+                  <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path>
+                </svg>
+                </svg>
               </div>
-            </section>
-
-{% endif %}
-{% if w.havedata %} {% if w.error %} 
-
-    <section class="py-4">
+              <div class="flex-1 p-1">
+                <h3 class="font-medium text-sm text-blue-900">Updating...</h3> </div>
+            </div>
+          </div>
+          <div class="w-auto p-2">
+            <button type="button" class="ml-auto bg-blue-100 text-blue-500 rounded-lg focus:ring-0 focus:ring-blue-400 p-1.5 hover:bg-blue-200 inline-flex h-8 w-8 focus:outline-none" data-dismiss-target="#updating" aria-label="Close"> <span class="sr-only">Close</span>
+              <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+                <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  {% endif %}
+  {% if w.havedata %}
+  {% if w.error %}
+  <section class="py-4">
     <div class="container px-4 mx-auto">
       <div class="p-6 bg-red-100 border border-red-200 rounded-md">
         <div class="flex flex-wrap justify-between items-center -m-2">
@@ -98,8 +95,7 @@
               <div class="flex-1 p-1">
                 <h3 class="font-medium text-sm text-red-900 error_msg">
                   <p class="error_msg">Error: {{ w.error }}</p>
-                </h3>
-              </div>
+                </h3> </div>
             </div>
           </div>
           <div class="w-auto p-2">
@@ -113,9 +109,7 @@
       </div>
     </div>
   </section>
-
-{% else %}
-
+  {% else %}
   <form method="post" autocomplete="off">
     <section class="bg-white">
       <div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden bg-white ">
@@ -141,22 +135,27 @@
                     </tr>
                     <tr class="bg-white border-t hover:bg-gray-50">
                       <td class="py-4 px-4 bold"><span class="inline-flex align-middle items-center justify-center w-9 h-10 bg-white-50 rounded"><img class="h-7" src="/static/images/coins/{{ w.name }}.png" alt="{{ w.name }}"></span>Balance:</td>
-                      <td class="bold">{{ w.balance }}</td>{% if w.unconfirmed %}
+                      <td class="bold">{{ w.balance }}</td>
+                      {% if w.unconfirmed %}
                       <td>Unconfirmed:</td>
-                      <td>{{ w.unconfirmed }}</td>{% endif %}
-                    </tr> {% if w.cid == '1' %}
+                      <td>{{ w.unconfirmed }}</td>
+                      {% endif %} </tr>
+                      {% if w.cid == '1' %}
                     <tr class="bg-white border-t hover:bg-gray-50">
                       <td class="py-4 px-4 bold"><span class="inline-flex align-middle items-center justify-center w-9 h-10 bg-white-50 rounded"><img class="h-7" src="/static/images/coins/{{ w.name }}.png" alt="{{ w.name }} Blind"></span>Blind Balance:</td>
-                      <td class="bold">{{ w.blind_balance }}</td>{% if w.blind_unconfirmed %}
+                      <td class="bold">{{ w.blind_balance }}</td>
+                      {% if w.blind_unconfirmed %}
                       <td>Blind Unconfirmed:</td>
-                      <td>{{ w.blind_unconfirmed }}</td>{% endif %}
+                      <td>{{ w.blind_unconfirmed }}</td> 
+                      {% endif %}
                     </tr>
                     <tr class="bg-white border-t hover:bg-gray-50">
                       <td class="py-4 px-4 bold"><span class="inline-flex align-middle items-center justify-center w-9 h-10 bg-white-50 rounded"><img class="h-7" src="/static/images/coins/{{ w.name }}.png" alt="{{ w.name }} Anon"></span>Anon Balance:</td>
-                      <td class="bold">{{ w.anon_balance }}</td>{% if w.anon_pending %}
+                      <td class="bold">{{ w.anon_balance }}</td>
+                      {% if w.anon_pending %}
                       <td>Anon Pending:</td>
-                      <td>{{ w.anon_pending }}</td>{% endif %}
-                    </tr> {% endif %}
+                      <td>{{ w.anon_pending }}</td>{% endif %} </tr>
+                      {% endif %}
                     <tr class="bg-white border-t hover:bg-gray-50">
                       <td class="py-4 px-6 bold">Blocks:</td>
                       <td>{{ w.blocks }} {% if w.known_block_count %} / {{ w.known_block_count }} {% endif %}</td>
@@ -168,255 +167,245 @@
                     <tr class="bg-white border-t hover:bg-gray-50">
                       <td class="py-4 px-6 bold">Bootstrapping:</td>
                       <td>{{ w.bootstrapping }}</td>
-                    </tr> {% endif %}
+                    </tr> 
+                    {% endif %}
                     <tr class="bg-white border-t hover:bg-gray-50">
                       <td class="py-4 px-6 bold">Expected Seed:</td>
                       <td>{{ w.expected_seed }}</td>
-                      {% if w.expected_seed != true %}
-                       </tr>
-                    </table>
+                    {% if w.expected_seed != true %}
+                  </tr>
+                  </table>
                 </div>
               </div>
               <div class="p-6 pt-10 bg-white bg-opacity-60 rounded-b-md">
                 <div class="w-full md:w-0/12">
                   <div class="flex flex-wrap justify-end -m-1.5">
                     <div class="w-full md:w-auto p-1.5 ml-2">
-                      <input class="flex flex-wrap justify-center px-4 py-2.5 font-medium text-sm text-red-500 hover:text-red-600 border border-red-400 hover:border-red-500 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none" type="submit" name="reseed_{{ w.cid }}" value="Reseed wallet" onclick="return confirmReseed();">
-                    </div>
-                   </div>
-                </div>
-              </div>
-                       {% else %}
-                    </tr> {% if w.cid == '1' %}
-                    <tr class="bg-white border-t hover:bg-gray-50">
-                      <td class="py-4 px-6 bold">Stealth Address</td>
-                      <td colspan=2 class="monospace bold select-all">{{ w.stealth_address }}</td>
-                    </tr> {% endif %} {% if w.cid == '6' %}
-                    <tr class="bg-white border-t hover:bg-gray-50">
-                      <td class="py-4 px-6 bold">Main Address</td>
-                      <td colspan=2 class="monospace bold select-all">{{ w.main_address }}</td>
-                    </tr>
-                    <tr class="bg-white border-t hover:bg-gray-50">
-                      <td class="py-4 px-6 bold">
-        
-
-<button type="submit" class="flex flex-wrap justify-center w-52 py-2 px-4 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none" name="newaddr_{{ w.cid }}" value="New Subaddress">
-  <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g fill="#ffffff" class="nc-icon-wrapper"><path fill="#ffffff" d="M12,3c1.989,0,3.873,0.65,5.43,1.833l-3.604,3.393l9.167,0.983L22.562,0l-3.655,3.442 C16.957,1.862,14.545,1,12,1C5.935,1,1,5.935,1,12h2C3,7.037,7.037,3,12,3z"></path> <path data-color="color-2" d="M12,21c-1.989,0-3.873-0.65-5.43-1.833l3.604-3.393l-9.167-0.983L1.438,24l3.655-3.442 C7.043,22.138,9.455,23,12,23c6.065,0,11-4.935,11-11h-2C21,16.963,16.963,21,12,21z"></path></g></svg>
-  New Subaddress
-</button>
-
-
-                      </td>
-                      <td colspan=2 class="monospace select-all">{{ w.deposit_address }}</td>
-                    </tr> {% else %}
-                    <tr class="bg-white border-t hover:bg-gray-50">
-                      <td class="py-4 px-6 bold">
-
-
-
-<button type="submit" class="flex flex-wrap justify-center w-52 py-2 px-4 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none" name="newaddr_{{ w.cid }}" value="New Deposit Address">
-  <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g fill="#ffffff" class="nc-icon-wrapper"><path fill="#ffffff" d="M12,3c1.989,0,3.873,0.65,5.43,1.833l-3.604,3.393l9.167,0.983L22.562,0l-3.655,3.442 C16.957,1.862,14.545,1,12,1C5.935,1,1,5.935,1,12h2C3,7.037,7.037,3,12,3z"></path> <path data-color="color-2" d="M12,21c-1.989,0-3.873-0.65-5.43-1.833l3.604-3.393l-9.167-0.983L1.438,24l3.655-3.442 C7.043,22.138,9.455,23,12,23c6.065,0,11-4.935,11-11h-2C21,16.963,16.963,21,12,21z"></path></g></svg>
-  New Deposit Address
-</button>
-
-
-
-
-     
-
-
-                      </td>
-                      <td colspan=2 class="monospace bold select-all" id="deposit_address">{{ w.deposit_address }}</td>
-                    </tr> {% endif %}
-                  </table>
-                </div>
-              </div>
-              <section class="bg-white p-6">
-                <div class="flex flex-wrap items-center">
-                  <div class="w-full">
-                    <h4 class="font-semibold text-black text-2xl">Withdraw</h4>
+                      <input class="flex flex-wrap justify-center px-4 py-2.5 font-medium text-sm text-red-500 hover:text-red-600 border border-red-400 hover:border-red-500 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none" type="submit" name="reseed_{{ w.cid }}" value="Reseed wallet" onclick="return confirmReseed();"> </div>
                   </div>
                 </div>
-              </section>
-              <div class="container px-0 mx-auto mt-2">
-                <div class="overflow-x-auto relative border sm:rounded-lg">
-                  <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
-                    <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300">
-                      <tr>
-                        <th scope="col" class="py-3 px-6">OPTIONS</th>
-                        <th scope="col"></th>
-                        <th scope="col"></th>
-                        <th scope="col"></th>
-                      </tr>
-                    </thead>
-                    <tr class="bg-white border-t hover:bg-gray-50">
-                      <td class="py-4 pl-6 bold w-1/4">
-  
-
-<button type="submit" class="flex flex-wrap justify-center py-2 px-4 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none" name="withdraw_{{ w.cid }}" value="Withdraw" onclick="return confirmWithdrawal();">
-<svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g fill="#ffffff" class="nc-icon-wrapper"><polygon data-color="color-2" points="6,10 12,17 18,10 13,10 13,1 11,1 11,10 "></polygon> <path fill="#ffffff" d="M22,21H2v-6H0v7c0,0.552,0.448,1,1,1h22c0.552,0,1-0.448,1-1v-7h-2V21z"></path></g></svg>
-  Withdraw 
-</button>
-
-
-
-                      </td>
-                      <td class="py-4 pr-5">
-                        <input placeholder="Address" class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 w-full block p-2.5" type="text" name="to_{{ w.cid }}" value="{{ w.wd_address }}">
-                      </td>
-                      <td class="py-4 pr-5">
-                        <input placeholder="Amount" class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" type="text" name="amt_{{ w.cid }}" value="{{ w.wd_value }}">
-                      </td>
-                    </tr>
-                    <tr class="bg-white border-t hover:bg-gray-50">
-                      <td class="py-4 px-6 bold"> Subtract Fee: </td>
-                      <td>
-                        <input class="form-check-input h-4 w-4 border border-gray-300 rounded-sm bg-gray-50 checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain cursor-pointer" type="checkbox" name="subfee_{{ w.cid }}" {% if w.wd_subfee==true %} checked=checked{% endif %}>
-                      </td>
-                      <td></td>
-                    </tr> {% if w.cid == '1' %}
-                    <tr class="bg-white border-t hover:bg-gray-50">
-                      <td class="py-4 px-6 bold">Type From -> To:</td>
-                      <td class="py-4 pr-5">
-
+              </div>
+            {% else %}
+          </tr>
+          {% if w.cid == '1' %}
+              <tr class="bg-white border-t hover:bg-gray-50">
+                <td class="py-4 px-6 bold">Stealth Address</td>
+                <td colspan=2 class="monospace bold select-all">{{ w.stealth_address }}</td>
+              </tr>
+              {% endif %}
+              {% if w.cid == '6' %}
+              <tr class="bg-white border-t hover:bg-gray-50">
+                <td class="py-4 px-6 bold">Main Address</td>
+                <td colspan=2 class="monospace bold select-all">{{ w.main_address }}</td>
+              </tr>
+              <tr class="bg-white border-t hover:bg-gray-50">
+                <td class="py-4 px-6 bold">
+                  <button type="submit" class="flex flex-wrap justify-center w-52 py-2 px-4 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none" name="newaddr_{{ w.cid }}" value="New Subaddress">
+                    <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
+                      <g fill="#ffffff" class="nc-icon-wrapper">
+                        <path fill="#ffffff" d="M12,3c1.989,0,3.873,0.65,5.43,1.833l-3.604,3.393l9.167,0.983L22.562,0l-3.655,3.442 C16.957,1.862,14.545,1,12,1C5.935,1,1,5.935,1,12h2C3,7.037,7.037,3,12,3z"></path>
+                        <path data-color="color-2" d="M12,21c-1.989,0-3.873-0.65-5.43-1.833l3.604-3.393l-9.167-0.983L1.438,24l3.655-3.442 C7.043,22.138,9.455,23,12,23c6.065,0,11-4.935,11-11h-2C21,16.963,16.963,21,12,21z"></path>
+                      </g>
+                    </svg> New Subaddress </button>
+                </td>
+                <td colspan=2 class="monospace select-all">{{ w.deposit_address }}</td>
+              </tr>
+              {% else %}
+              <tr class="bg-white border-t hover:bg-gray-50">
+                <td class="py-4 px-6 bold">
+                  <button type="submit" class="flex flex-wrap justify-center w-52 py-2 px-4 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none" name="newaddr_{{ w.cid }}" value="New Deposit Address">
+                    <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
+                      <g fill="#ffffff" class="nc-icon-wrapper">
+                        <path fill="#ffffff" d="M12,3c1.989,0,3.873,0.65,5.43,1.833l-3.604,3.393l9.167,0.983L22.562,0l-3.655,3.442 C16.957,1.862,14.545,1,12,1C5.935,1,1,5.935,1,12h2C3,7.037,7.037,3,12,3z"></path>
+                        <path data-color="color-2" d="M12,21c-1.989,0-3.873-0.65-5.43-1.833l3.604-3.393l-9.167-0.983L1.438,24l3.655-3.442 C7.043,22.138,9.455,23,12,23c6.065,0,11-4.935,11-11h-2C21,16.963,16.963,21,12,21z"></path>
+                      </g>
+                    </svg> New Deposit Address </button>
+                </td>
+                <td colspan=2 class="monospace bold select-all" id="deposit_address">{{ w.deposit_address }}</td>
+              </tr>
+            {% endif %}
+          </table>
+            </div>
+          </div>
+          <section class="bg-white p-6">
+            <div class="flex flex-wrap items-center">
+              <div class="w-full">
+                <h4 class="font-semibold text-black text-2xl">Withdraw</h4> </div>
+            </div>
+          </section>
+          <div class="container px-0 mx-auto mt-2">
+            <div class="overflow-x-auto relative border sm:rounded-lg">
+              <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
+                <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300">
+                  <tr>
+                    <th scope="col" class="py-3 px-6">OPTIONS</th>
+                    <th scope="col"></th>
+                    <th scope="col"></th>
+                    <th scope="col"></th>
+                  </tr>
+                </thead>
+                <tr class="bg-white border-t hover:bg-gray-50">
+                  <td class="py-4 pl-6 bold w-1/4">
+                    <button type="submit" class="flex flex-wrap justify-center py-2 px-4 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none" name="withdraw_{{ w.cid }}" value="Withdraw" onclick="return confirmWithdrawal();">
+                      <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
+                        <g fill="#ffffff" class="nc-icon-wrapper">
+                          <polygon data-color="color-2" points="6,10 12,17 18,10 13,10 13,1 11,1 11,10 "></polygon>
+                          <path fill="#ffffff" d="M22,21H2v-6H0v7c0,0.552,0.448,1,1,1h22c0.552,0,1-0.448,1-1v-7h-2V21z"></path>
+                        </g>
+                      </svg> Withdraw </button>
+                  </td>
+                  <td class="py-4 pr-5">
+                    <input placeholder="Address" class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 w-full block p-2.5" type="text" name="to_{{ w.cid }}" value="{{ w.wd_address }}"> </td>
+                  <td class="py-4 pr-5">
+                    <input placeholder="Amount" class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" type="text" name="amt_{{ w.cid }}" value="{{ w.wd_value }}"> </td>
+                </tr>
+                <tr class="bg-white border-t hover:bg-gray-50">
+                  <td class="py-4 px-6 bold"> Subtract Fee: </td>
+                  <td>
+                    <input class="form-check-input h-4 w-4 border border-gray-300 rounded-sm bg-gray-50 checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain cursor-pointer" type="checkbox" name="subfee_{{ w.cid }}" {% if w.wd_subfee==true %} checked=checked{% endif %}> </td>
+                  <td></td>
+                </tr>
+                {% if w.cid == '1' %}
+                <tr class="bg-white border-t hover:bg-gray-50">
+                  <td class="py-4 px-6 bold">Type From -> To:</td>
+                  <td class="py-4 pr-5">
                     <div class="w-full md:flex-1">
                       <div class="relative">
                         <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                           <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path>
-                        </svg> 
-                          <select class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="withdraw_type_from_{{ w.cid }}">
+                        </svg>
+                        <select class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="withdraw_type_from_{{ w.cid }}">
                           <option value="plain" {% if w.wd_type_from=='plain' %} selected{% endif %}>Plain</option>
                           <option value="blind" {% if w.wd_type_from=='blind' %} selected{% endif %}>Blind</option>
                           <option value="anon" {% if w.wd_type_from=='anon' %} selected{% endif %}>Anon</option>
                         </select>
                       </div>
                     </div>
-                      </td>
-                      <td class="py-4 pr-5">
-
-                  <div class="w-full md:flex-1">
+                  </td>
+                  <td class="py-4 pr-5">
+                    <div class="w-full md:flex-1">
                       <div class="relative">
                         <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                           <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path>
-                        </svg> 
-                          <select class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="withdraw_type_to_{{ w.cid }}">
+                        </svg>
+                        <select class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="withdraw_type_to_{{ w.cid }}">
                           <option value="plain" {% if w.wd_type_to=='plain' %} selected{% endif %}>Plain</option>
                           <option value="blind" {% if w.wd_type_to=='blind' %} selected{% endif %}>Blind</option>
                           <option value="anon" {% if w.wd_type_to=='anon' %} selected{% endif %}>Anon</option>
                         </select>
                       </div>
                     </div>
-                      </td>
-                      <td class="py-4"> </td>
-                    </tr> {% endif %}
-                    <tr class="bg-white border-t hover:bg-gray-50 ">
-                      <td class="py-4 px-6 bold">Fee Rate:</td>
-                      <td>{{ w.fee_rate }}</td>
-                      <td><b>Est Fee:</b> {{ w.est_fee }}</td>
-                      <td></td>
-                    </tr>
-                  </table>
-                </div>
-              </div> {% if w.cid != '6' %} {% if w.show_utxo_groups %}
-              <section class="bg-white p-6">
-                <div class="flex flex-wrap items-center">
-                  <div class="w-full">
-                    <h4 class="font-semibold text-black text-2xl">UTXO Groups</h4>
-                  </div>
-                </div>
-              </section>
-              <div class="container px-0 mx-auto mt-2">
-                <div class="overflow-x-auto relative border sm:rounded-lg">
-                  <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
-                    <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300">
-                      <tr>
-                        <th scope="col" class="py-3 px-6">OPTIONS</th>
-                        <th scope="col"></th>
-                      </tr>
-                    </thead>
-                    <tr class="bg-white border-t hover:bg-gray-50">
-                      <td class="py-4 px-6 w-1/4 bold">UTXO Groups:</td>
-                      <td class="py-4 pr-7">
-                        <textarea class="wwhitespace-pre-line outline-none block p-2.5 text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 w-full monospace" id="tx_view" rows="6" readonly>{{ w.utxo_groups }}</textarea>
-                      </td>
-                    </tr>
-                    <tr class="bg-white border-t hover:bg-gray-50">
-                      <td class="py-4 px-6">
-<button type="submit" class="flex flex-wrap justify-center px-4 py-2 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none" id="create_utxo" name="create_utxo" value="Create UTXO" onclick="return confirmUTXOResize();">
-<svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round" class="nc-icon-wrapper"> <polyline points="1 15 1 21 23 21 23 15"></polyline> <line x1="12" y1="3" x2="12" y2="13" stroke="#ffffff"></line> <line x1="17" y1="8" x2="7" y2="8" stroke="#ffffff"></line> </g></svg>
-  Create UTXO
-</button>
-      
-                      </td>
-                      <td>
-                        <input placeholder="Amount" class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" type="text" name="utxo_value" value="{{ w.utxo_value }}">
-                      </td>
-                    </tr>
-                  </table>
+                  </td>
+                  <td class="py-4"> </td>
+                </tr>
+                {% endif %}
+                <tr class="bg-white border-t hover:bg-gray-50 ">
+                  <td class="py-4 px-6 bold">Fee Rate:</td>
+                  <td>{{ w.fee_rate }}</td>
+                  <td><b>Est Fee:</b> {{ w.est_fee }}</td>
+                  <td></td>
+                </tr>
+              </table>
+            </div>
+          </div>
+          {% if w.cid != '6' %}
+           {% if w.show_utxo_groups %}
+          <section class="bg-white p-6">
+            <div class="flex flex-wrap items-center">
+              <div class="w-full">
+                <h4 class="font-semibold text-black text-2xl">UTXO Groups</h4> </div>
+            </div>
+          </section>
+          <div class="container px-0 mx-auto mt-2">
+            <div class="overflow-x-auto relative border sm:rounded-lg">
+              <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
+                <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300">
+                  <tr>
+                    <th scope="col" class="py-3 px-6">OPTIONS</th>
+                    <th scope="col"></th>
+                  </tr>
+                </thead>
+                <tr class="bg-white border-t hover:bg-gray-50">
+                  <td class="py-4 px-6 w-1/4 bold">UTXO Groups:</td>
+                  <td class="py-4 pr-7">
+                    <textarea class="wwhitespace-pre-line outline-none block p-2.5 text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 w-full monospace" id="tx_view" rows="6" readonly>{{ w.utxo_groups }}</textarea>
+                  </td>
+                </tr>
+                <tr class="bg-white border-t hover:bg-gray-50">
+                  <td class="py-4 px-6">
+                    <button type="submit" class="flex flex-wrap justify-center px-4 py-2 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none" id="create_utxo" name="create_utxo" value="Create UTXO" onclick="return confirmUTXOResize();">
+                      <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
+                        <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round" class="nc-icon-wrapper">
+                          <polyline points="1 15 1 21 23 21 23 15"></polyline>
+                          <line x1="12" y1="3" x2="12" y2="13" stroke="#ffffff"></line>
+                          <line x1="17" y1="8" x2="7" y2="8" stroke="#ffffff"></line>
+                        </g>
+                      </svg> Create UTXO </button>
+                  </td>
+                  <td>
+                    <input placeholder="Amount" class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" type="text" name="utxo_value" value="{{ w.utxo_value }}"> </td>
+                </tr>
+              </table>
+            </div>
+          </div>
+          <div class="p-6 pt-10 bg-white bg-opacity-60 rounded-b-md">
+            <div class="w-full md:w-0/12">
+              <div class="flex flex-wrap justify-end -m-1.5">
+                <div class="w-full md:w-auto p-1.5 ml-2">
+                  <button type="submit" class="flex flex-wrap justify-center px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none" id="closeutxogroups" name="closeutxogroups" value="Close UTXO Groups">
+                    <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
+                      <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round" class="nc-icon-wrapper">
+                        <rect x="2" y="9" width="12" height="14"></rect>
+                        <polyline points=" 6,5 18,5 18,19 " stroke="#ffffff"></polyline>
+                        <polyline points=" 10,1 22,1 22,15 " stroke="#ffffff"></polyline>
+                      </g>
+                    </svg> Close UTXO Groups </button>
                 </div>
               </div>
-              <div class="p-6 pt-10 bg-white bg-opacity-60 rounded-b-md">
-                <div class="w-full md:w-0/12">
-                  <div class="flex flex-wrap justify-end -m-1.5">
-                    <div class="w-full md:w-auto p-1.5 ml-2">
-
-<button type="submit" class="flex flex-wrap justify-center px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none" id="closeutxogroups" name="closeutxogroups" value="Close UTXO Groups">
-<svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round" class="nc-icon-wrapper"><rect x="2" y="9" width="12" height="14"></rect> <polyline points=" 6,5 18,5 18,19 " stroke="#ffffff"></polyline> <polyline points=" 10,1 22,1 22,15 " stroke="#ffffff"></polyline></g></svg>
-  Close UTXO Groups
-</button>
-
-
-
-
-
-                    </div>
-                  </div>
+            </div>
+          </div>
+          {% else %}
+          <div class="p-6 pt-10 bg-white bg-opacity-60 rounded-b-md">
+            <div class="w-full md:w-0/12">
+              <div class="flex flex-wrap justify-end -m-1.5">
+                <div class="w-full md:w-auto p-1.5 ml-2">
+                  <button type="submit" class="flex flex-wrap justify-center px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none" id="showutxogroups" name="showutxogroups" value="Show UTXO Groups">
+                    <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
+                      <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round" class="nc-icon-wrapper">
+                        <rect x="2" y="9" width="12" height="14"></rect>
+                        <polyline points=" 6,5 18,5 18,19 " stroke="#ffffff"></polyline>
+                        <polyline points=" 10,1 22,1 22,15 " stroke="#ffffff"></polyline>
+                      </g>
+                    </svg> Show UTXO Groups </button>
                 </div>
-              </div> {% else %}
-              <div class="p-6 pt-10 bg-white bg-opacity-60 rounded-b-md">
-                <div class="w-full md:w-0/12">
-                  <div class="flex flex-wrap justify-end -m-1.5">
-                    <div class="w-full md:w-auto p-1.5 ml-2">
-          
+              </div>
+            </div>
+          </div>
+          {% endif %}
+          {% endif %}
+          {% endif %}
+          {% endif %}
+          {% endif %}
+          <!-- havedata -->
+          <input type="hidden" name="formid" value="{{ form_id }}"> </form>
+  </div>
+  <script>
+    function confirmReseed() {
+      return confirm("Are you sure?\nBackup your wallet before and after.\nWon't detect used keys.\nShould only be used for new wallets.");
+    }
 
-<button type="submit" class="flex flex-wrap justify-center px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none" id="showutxogroups" name="showutxogroups" value="Show UTXO Groups">
-<svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round" class="nc-icon-wrapper"><rect x="2" y="9" width="12" height="14"></rect> <polyline points=" 6,5 18,5 18,19 " stroke="#ffffff"></polyline> <polyline points=" 10,1 22,1 22,15 " stroke="#ffffff"></polyline></g></svg>
-  Show UTXO Groups
-</button>
+    function confirmWithdrawal() {
+      return confirm("Are you sure?");
+    }
 
-
-                    </div>
-                  </div>
-                </div>
-              </div> {% endif %} {% endif %} {% endif %} {% endif %} {% endif %}
-              <!-- havedata -->
-              <input type="hidden" name="formid" value="{{ form_id }}">
-  </form>
-</div>
-
-
-<script>
-  function confirmReseed()
-  {
-    return confirm("Are you sure?\nBackup your wallet before and after.\nWon't detect used keys.\nShould only be used for new wallets.");
-  }
-
-  function confirmWithdrawal()
-  {
-    return confirm("Are you sure?");
-  }
-
-  function confirmUTXOResize()
-  {
-    return confirm("Are you sure?");
-  }
-</script>
-
-</div>
+    function confirmUTXOResize() {
+      return confirm("Are you sure?");
+    }
+  </script>
+  </div>
 </div>
 </div>
 </div>
 {% include 'footer.html' %}
 </body>
-
-</html>
+</html>
\ No newline at end of file
diff --git a/basicswap/templates/wallets.html b/basicswap/templates/wallets.html
index 3f26154..174f2d9 100644
--- a/basicswap/templates/wallets.html
+++ b/basicswap/templates/wallets.html
@@ -24,96 +24,87 @@
       </div>
     </div>
   </section>
-
   <section class="py-4">
     <div class="container px-4 mx-auto">
-      <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden">
-        <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt="">
-        <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt="">
-        <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
+      <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden"> <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
         <div class="relative z-20 flex flex-wrap items-center -m-3">
           <div class="w-full md:w-1/2 p-3">
             <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">Wallets</h2>
             <p class="font-semibold text-coolGray-200">Check your coin balances and manage your wallets. {% if refresh %} (Page Refresh: {{ refresh }} seconds) {% endif %}</p>
           </div>
           <div class="w-full md:w-1/2 p-3 p-6 container flex flex-wrap items-center justify-end items-center mx-auto">
-           <a class="flex flex-wrap justify-center px-5 py-4 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none" id="refresh" href="/wallets">
-            <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g fill="#ffffff" class="nc-icon-wrapper"><path fill="#ffffff" d="M12,3c1.989,0,3.873,0.65,5.43,1.833l-3.604,3.393l9.167,0.983L22.562,0l-3.655,3.442 C16.957,1.862,14.545,1,12,1C5.935,1,1,5.935,1,12h2C3,7.037,7.037,3,12,3z"></path> <path data-color="color-2" d="M12,21c-1.989,0-3.873-0.65-5.43-1.833l3.604-3.393l-9.167-0.983L1.438,24l3.655-3.442 C7.043,22.138,9.455,23,12,23c6.065,0,11-4.935,11-11h-2C21,16.963,16.963,21,12,21z"></path></g></svg>
-               <span>Refresh</span> 
-            </a>      
+            <a class="flex flex-wrap justify-center px-5 py-4 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none" id="refresh" href="/wallets">
+              <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
+                <g fill="#ffffff" class="nc-icon-wrapper">
+                  <path fill="#ffffff" d="M12,3c1.989,0,3.873,0.65,5.43,1.833l-3.604,3.393l9.167,0.983L22.562,0l-3.655,3.442 C16.957,1.862,14.545,1,12,1C5.935,1,1,5.935,1,12h2C3,7.037,7.037,3,12,3z"></path>
+                  <path data-color="color-2" d="M12,21c-1.989,0-3.873-0.65-5.43-1.833l3.604-3.393l-9.167-0.983L1.438,24l3.655-3.442 C7.043,22.138,9.455,23,12,23c6.065,0,11-4.935,11-11h-2C21,16.963,16.963,21,12,21z"></path>
+                </g>
+              </svg> <span>Refresh</span> </a>
           </div>
         </div>
       </div>
     </div>
   </section>
-
   {% include 'inc_messages.html' %}
-
   <section class="bg-white py-4">
     <div class="container px-4 mx-auto">
-      <div class="flex flex-wrap -m-4"> {% for w in wallets %} {% if w.havedata %} {% if w.error %}
-        <p>Error: {{ w.error }}</p> {% else %}
+      <div class="flex flex-wrap -m-4">
+        {% for w in wallets %}
+        {% if w.havedata %}
+        {% if w.error %}
+        <p>Error: {{ w.error }}</p>
+        {% else %}
         <div class="w-full lg:w-1/3 p-4">
           <div class="bg-white shadow rounded overflow-hidden">
             <div class="pt-6 px-6 mb-10 flex justify-between items-center"> <span class="inline-flex items-center justify-center w-9 h-10 bg-white-50 rounded">
                 <img class="h-9" src="/static/images/coins/{{ w.name }}.png" alt=""></span> <a class="py-2 px-3 bg-blue-500 text-xs text-white rounded-full hover:bg-blue-600" href="/wallet/{{ w.ticker }}">Manage</a> </div>
             <div class="px-6 mb-6">
               <h4 class="text-xl font-bold">{{ w.name }} <span class="inline-block font-medium text-xs text-gray-500">({{ w.ticker }})</span></h4>
-              <p class="text-xs text-gray-500">Version: {{ w.version }} {% if w.updating %} <span class="inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500">Updating</span></p> {% endif %}
-            </div>
+              <p class="text-xs text-gray-500">Version: {{ w.version }} {% if w.updating %} <span class="inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500">Updating</span></p> {% endif %} </div>
             <div class="p-6 bg-gray-50">
               <div class="flex mb-2 justify-between items-center">
-                <h4 class="text-xs font-medium">Balance:</h4> <span class="bold inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500">{{ w.balance }}</span>
-              </div> {% if w.unconfirmed %}
+                <h4 class="text-xs font-medium">Balance:</h4> <span class="bold inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500">{{ w.balance }}</span> </div> {% if w.unconfirmed %}
               <div class="flex mb-2 justify-between items-center">
-                <h4 class="text-xs font-medium">Unconfirmed:</h4> <span class="inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500">{{ w.unconfirmed }}</span>
-              </div> {% endif %} {% if w.cid == '1' %}
+                <h4 class="text-xs font-medium">Unconfirmed:</h4> <span class="inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500">{{ w.unconfirmed }}</span> </div> {% endif %} {% if w.cid == '1' %}
               <div class="flex mb-2 justify-between items-center">
-                <h4 class="text-xs font-medium">Blind Balance:</h4> <span class="bold inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500">{{ w.blind_balance }}</span>
-              </div> {% if w.blind_unconfirmed %}
+                <h4 class="text-xs font-medium">Blind Balance:</h4> <span class="bold inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500">{{ w.blind_balance }}</span> </div> {% if w.blind_unconfirmed %}
               <div class="flex mb-2 justify-between items-center">
-                <h4 class="text-xs font-medium">Blind Unconfirmed:</h4> <span class="inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500">{{ w.blind_unconfirmed }}</span>
-              </div> {% endif %}
+                <h4 class="text-xs font-medium">Blind Unconfirmed:</h4> <span class="inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500">{{ w.blind_unconfirmed }}</span> </div> {% endif %}
               <div class="flex mb-2 justify-between items-center">
-                <h4 class="text-xs font-medium">Anon Balance:</h4> <span class="bold inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500">{{ w.anon_balance }}</span>
-              </div> {% if w.anon_pending %}
+                <h4 class="text-xs font-medium">Anon Balance:</h4> <span class="bold inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500">{{ w.anon_balance }}</span> </div> {% if w.anon_pending %}
               <div class="flex mb-2 justify-between items-center">
-                <h4 class="text-xs font-medium">Anon Pending:</h4> <span class="inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500">{{ w.anon_pending }}</span>
-              </div> {% endif %} {% endif %}
+                <h4 class="text-xs font-medium">Anon Pending:</h4> <span class="inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500">{{ w.anon_pending }}</span> </div> {% endif %} {% endif %}
               <div class="flex mb-2 justify-between items-center">
-                <h4 class="text-xs font-medium">Blocks:</h4> <span class="inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500">{{ w.blocks }} {% if w.known_block_count %} / {{ w.known_block_count }} {% endif %}</span>
-              </div>
+                <h4 class="text-xs font-medium">Blocks:</h4> <span class="inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500">{{ w.blocks }} {% if w.known_block_count %} / {{ w.known_block_count }} {% endif %}</span> </div>
               <div class="flex mb-2 justify-between items-center">
-                <h4 class="text-xs font-medium">Last Updated:</h4> <span class="inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500">{{ w.lastupdated }}</span>
-              </div> {% if w.bootstrapping %}
+                <h4 class="text-xs font-medium">Last Updated:</h4> <span class="inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500">{{ w.lastupdated }}</span> </div> {% if w.bootstrapping %}
               <div class="flex mb-2 justify-between items-center">
-                <h4 class="text-xs font-medium">Bootstrapping:</h4> <span class="inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500">{{ w.bootstrapping }}</span>
-              </div> {% endif %}
+                <h4 class="text-xs font-medium">Bootstrapping:</h4> <span class="inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500">{{ w.bootstrapping }}</span> </div> {% endif %}
               <div class="flex mb-2 justify-between items-center">
-                <h4 class="text-xs font-medium">Expected Seed:</h4> <span class="inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500">{{ w.expected_seed }}</span>
-              </div>
+                <h4 class="text-xs font-medium">Expected Seed:</h4> <span class="inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500">{{ w.expected_seed }}</span> </div>
               <div class="flex justify-between mb-1 mt-10"> <span class="text-xs font-medium text-blue-700">Blockchain</span> <span class="text-xs font-medium text-blue-700">{{ w.synced }}%</span> </div>
               <div class="w-full bg-gray-200 rounded-full h-1">
                 <div class="bg-blue-500 h-1 rounded-full" style="width: {{ w.synced }}%"></div>
               </div>
             </div>
-          </div> {% endif %} {% endif %}
+          </div>
+          {% endif %}
+          {% endif %}
           <!-- havedata -->
-        </div> {% endfor %}
+        </div>
+        {% endfor %}
         <script>
-          function confirmReseed()
-          {
+          function confirmReseed() {
             return confirm("Are you sure?\nBackup your wallet before and after.\nWon't detect used keys.\nShould only be used for new wallets.");
           }
 
-          function confirmWithdrawal()
-          {
+          function confirmWithdrawal() {
             return confirm("Are you sure?");
           }
         </script>
       </div>
   </section>
-</div>
+  </div>
 {% include 'footer.html' %}
 </body>
 </html>
\ No newline at end of file
diff --git a/basicswap/templates/watched.html b/basicswap/templates/watched.html
index c96d31b..60d4f76 100644
--- a/basicswap/templates/watched.html
+++ b/basicswap/templates/watched.html
@@ -20,18 +20,13 @@
               <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
             </svg>
           </li>
-
         </ul>
       </div>
     </div>
   </section>
-
   <section class="py-4">
     <div class="container px-4 mx-auto">
-      <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden">
-        <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt="">
-        <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt="">
-        <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
+      <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden"> <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
         <div class="relative z-20 flex flex-wrap items-center -m-3">
           <div class="w-full md:w-1/2 p-3">
             <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">Watched Outputs</h2>
@@ -41,13 +36,11 @@
       </div>
     </div>
   </section>
-
   <section class="bg-white">
     <div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden bg-white ">
       <div class="pb-6 border-coolGray-100">
         <div class="flex flex-wrap items-center justify-between -m-2">
           <div class="w-full pt-2">
-
             <section class="bg-white p-6">
               <div class="flex flex-wrap items-center">
                 <div class="w-full">
@@ -56,7 +49,7 @@
               </div>
             </section>
 
-            <div class="container px-0 mx-auto mt-5">
+            <div class="container px-0 mx-auto">
               <div class="overflow-x-auto relative border sm:rounded-lg">
 
                 <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
@@ -74,6 +67,7 @@
                     <td class="py-4">{{ ls[1] }}</td>
                   </tr>
                   {% endfor %}
+
                 </table>
               </div>
             </div>
@@ -101,6 +95,7 @@
                     <td class="py-4">{{ wo[4] }}</td>
                   </tr>
                   {% endfor %}
+
                 </table>
               </div>
             </div>
@@ -112,8 +107,7 @@
 
   </section>
 </div>
-  {% include 'footer.html' %}
+{% include 'footer.html' %}
 </div>
 </body>
-
-</html>
+</html>
\ No newline at end of file