From c83949de1ae56fbc3d76f843b34d182c08d10df7 Mon Sep 17 00:00:00 2001
From: shubhankarsharma00 <shubhankarsharma78@gmail.com>
Date: Fri, 12 Jun 2020 16:16:31 +0530
Subject: [PATCH 1/3] keyboard not working

---
 .eslintrc.js                      |   17 +
 index.html                        |   17 +-
 jest.config.js                    |    1 +
 jest.setup.js                     |   21 +
 package-lock.json                 |  642 +++++
 package.json                      |    1 +
 src/app.js                        |   29 +-
 src/arrayHelpers.js               |   23 +-
 src/backgroundArea.js             |   17 +-
 src/canvas2svg.js                 |  843 +++---
 src/canvasApi.js                  |  418 +--
 src/circuit.js                    |  422 +--
 src/circuitElement.js             |  472 ++--
 src/combinationalAnalysis.js      |  279 ++
 src/data.js                       |   25 +
 src/data/backupCircuit.js         |   63 +
 src/data/load.js                  |  210 ++
 src/data/project.js               |  138 +
 src/data/save.js                  |  332 +++
 src/data/saveImage.js             |   44 +
 src/data/undo.js                  |   44 +
 src/dec-bin-hex.js                |   58 +
 src/embed.js                      |   73 +
 src/embedListeners.js             |  245 ++
 src/engine.js                     |  670 +++--
 src/eventQueue.js                 |   51 +-
 src/events.js                     |  293 +++
 src/layout/layoutBuffer.js        |   61 +
 src/layout/layoutNode.js          |  103 +
 src/layoutMode.js                 |  388 +++
 src/listeners.js                  |  588 +++--
 src/minimap.js                    |  117 +
 src/module.js                     | 4033 -----------------------------
 src/modules.js                    |  154 ++
 src/modules/ALU.js                |  188 ++
 src/modules/Adder.js              |   99 +
 src/modules/AndGate.js            |  147 ++
 src/modules/Arrow.js              |   78 +
 src/modules/BitSelector.js        |  139 +
 src/modules/Buffer.js             |  115 +
 src/modules/Button.js             |  117 +
 src/modules/ConstantVal.js        |  179 ++
 src/modules/ControlledInverter.js |  111 +
 src/modules/Counter.js            |  122 +
 src/modules/Decoder.js            |  158 ++
 src/modules/Demultiplexer.js      |  163 ++
 src/modules/DigitalLed.js         |  128 +
 src/modules/Flag.js               |  187 ++
 src/modules/Ground.js             |  120 +
 src/modules/HexDisplay.js         |  155 ++
 src/modules/Input.js              |  194 ++
 src/modules/LSB.js                |  132 +
 src/modules/MSB.js                |  126 +
 src/modules/Multiplexer.js        |  186 ++
 src/modules/NandGate.js           |  144 +
 src/modules/NorGate.js            |  143 +
 src/modules/NotGate.js            |   94 +
 src/modules/OrGate.js             |  142 +
 src/modules/Output.js             |  179 ++
 src/modules/Power.js              |  127 +
 src/modules/PriorityEncoder.js    |  165 ++
 src/modules/RGBLed.js             |  122 +
 src/modules/RGBLedMatrix.js       |  330 +++
 src/modules/Random.js             |  107 +
 src/modules/Rectangle.js          |  146 ++
 src/modules/Rom.js                |  202 ++
 src/modules/SevenSegDisplay.js    |  116 +
 src/modules/SixteenSegDisplay.js  |  131 +
 src/modules/Splitter.js           |  230 ++
 src/modules/SquareRGBLed.js       |  154 ++
 src/modules/Stepper.js            |   99 +
 src/modules/Text.js               |  144 +
 src/modules/TriState.js           |  116 +
 src/modules/Tunnel.js             |  255 ++
 src/modules/TwoComplement.js      |   89 +
 src/modules/VariableLed.js        |  100 +
 src/modules/XnorGate.js           |  147 ++
 src/modules/XorGate.js            |  145 ++
 src/node.js                       |  647 ++---
 src/plotArea.js                   |  237 +-
 src/quinMcCluskey.js              |  218 ++
 src/restrictedElementDiv.js       |   24 +-
 src/sequential.js                 |   24 +
 src/sequential/Clock.js           |   83 +
 src/sequential/DflipFlop.js       |  142 +
 src/sequential/Dlatch.js          |  119 +
 src/sequential/EEPROM.js          |   68 +
 src/sequential/JKflipFlop.js      |  146 ++
 src/sequential/Keyboard.js        |  182 ++
 src/sequential/RAM.js             |  204 ++
 src/sequential/Rom.js             |  201 ++
 src/sequential/SRflipFlop.js      |  128 +
 src/sequential/TTY.js             |  187 ++
 src/sequential/TflipFlop.js       |  153 ++
 src/setup.js                      |  174 ++
 src/simulationArea.js             |   77 +-
 src/subcircuit.js                 |  458 ++++
 src/testbench.js                  |    3 +
 src/testbench/ForceGate.js        |   88 +
 src/testbench/testbenchInput.js   |  291 +++
 src/testbench/testbenchOutput.js  |  232 ++
 src/utils.js                      |  127 +-
 src/ux.js                         |  403 ++-
 src/wire.js                       |  137 +-
 test/examples/fulladder.json      |  788 ++++++
 test/gates/gates.test.js          |   39 +
 test/listenertest.test.js         |   39 +
 test/load.test.js                 |   16 +
 test/sample.test.js               |   28 +-
 test/save.test.js                 |   20 +
 test/subcircuit.test.js           |   31 +
 webpack.config.js                 |    7 +
 112 files changed, 16644 insertions(+), 6440 deletions(-)
 create mode 100644 .eslintrc.js
 create mode 100644 jest.setup.js
 create mode 100755 src/combinationalAnalysis.js
 create mode 100755 src/data.js
 create mode 100755 src/data/backupCircuit.js
 create mode 100755 src/data/load.js
 create mode 100755 src/data/project.js
 create mode 100755 src/data/save.js
 create mode 100755 src/data/saveImage.js
 create mode 100755 src/data/undo.js
 create mode 100644 src/dec-bin-hex.js
 create mode 100644 src/embed.js
 create mode 100644 src/embedListeners.js
 create mode 100755 src/events.js
 create mode 100755 src/layout/layoutBuffer.js
 create mode 100755 src/layout/layoutNode.js
 create mode 100755 src/layoutMode.js
 create mode 100755 src/minimap.js
 delete mode 100644 src/module.js
 create mode 100755 src/modules.js
 create mode 100755 src/modules/ALU.js
 create mode 100755 src/modules/Adder.js
 create mode 100755 src/modules/AndGate.js
 create mode 100755 src/modules/Arrow.js
 create mode 100755 src/modules/BitSelector.js
 create mode 100755 src/modules/Buffer.js
 create mode 100755 src/modules/Button.js
 create mode 100755 src/modules/ConstantVal.js
 create mode 100755 src/modules/ControlledInverter.js
 create mode 100644 src/modules/Counter.js
 create mode 100755 src/modules/Decoder.js
 create mode 100755 src/modules/Demultiplexer.js
 create mode 100755 src/modules/DigitalLed.js
 create mode 100755 src/modules/Flag.js
 create mode 100755 src/modules/Ground.js
 create mode 100755 src/modules/HexDisplay.js
 create mode 100755 src/modules/Input.js
 create mode 100755 src/modules/LSB.js
 create mode 100755 src/modules/MSB.js
 create mode 100755 src/modules/Multiplexer.js
 create mode 100755 src/modules/NandGate.js
 create mode 100755 src/modules/NorGate.js
 create mode 100755 src/modules/NotGate.js
 create mode 100755 src/modules/OrGate.js
 create mode 100755 src/modules/Output.js
 create mode 100755 src/modules/Power.js
 create mode 100755 src/modules/PriorityEncoder.js
 create mode 100755 src/modules/RGBLed.js
 create mode 100644 src/modules/RGBLedMatrix.js
 create mode 100644 src/modules/Random.js
 create mode 100755 src/modules/Rectangle.js
 create mode 100755 src/modules/Rom.js
 create mode 100755 src/modules/SevenSegDisplay.js
 create mode 100755 src/modules/SixteenSegDisplay.js
 create mode 100755 src/modules/Splitter.js
 create mode 100755 src/modules/SquareRGBLed.js
 create mode 100755 src/modules/Stepper.js
 create mode 100755 src/modules/Text.js
 create mode 100755 src/modules/TriState.js
 create mode 100755 src/modules/Tunnel.js
 create mode 100755 src/modules/TwoComplement.js
 create mode 100755 src/modules/VariableLed.js
 create mode 100755 src/modules/XnorGate.js
 create mode 100755 src/modules/XorGate.js
 create mode 100644 src/quinMcCluskey.js
 create mode 100644 src/sequential.js
 create mode 100644 src/sequential/Clock.js
 create mode 100644 src/sequential/DflipFlop.js
 create mode 100644 src/sequential/Dlatch.js
 create mode 100644 src/sequential/EEPROM.js
 create mode 100644 src/sequential/JKflipFlop.js
 create mode 100644 src/sequential/Keyboard.js
 create mode 100644 src/sequential/RAM.js
 create mode 100755 src/sequential/Rom.js
 create mode 100644 src/sequential/SRflipFlop.js
 create mode 100644 src/sequential/TTY.js
 create mode 100644 src/sequential/TflipFlop.js
 create mode 100755 src/setup.js
 create mode 100755 src/subcircuit.js
 create mode 100644 src/testbench.js
 create mode 100755 src/testbench/ForceGate.js
 create mode 100644 src/testbench/testbenchInput.js
 create mode 100644 src/testbench/testbenchOutput.js
 create mode 100644 test/examples/fulladder.json
 create mode 100644 test/gates/gates.test.js
 create mode 100644 test/listenertest.test.js
 create mode 100644 test/load.test.js
 create mode 100644 test/save.test.js
 create mode 100644 test/subcircuit.test.js

diff --git a/.eslintrc.js b/.eslintrc.js
new file mode 100644
index 0000000..e85c39b
--- /dev/null
+++ b/.eslintrc.js
@@ -0,0 +1,17 @@
+module.exports = {
+    "env": {
+        "browser": true,
+        "es6": true
+    },
+    "extends": "eslint:recommended",
+    "globals": {
+        "Atomics": "readonly",
+        "SharedArrayBuffer": "readonly"
+    },
+    "parserOptions": {
+        "ecmaVersion": 11,
+        "sourceType": "module"
+    },
+    "rules": {
+    }
+};
diff --git a/index.html b/index.html
index c99cecb..8d6facd 100644
--- a/index.html
+++ b/index.html
@@ -5,9 +5,9 @@
     <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  -->
 <!-- <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> -->
 <script>
-    userSignedIn = 1;
-    logix_project_id = 0;
-    projectName = "Shuy"
+    var userSignedIn = 1;
+    var logix_project_id = 0;
+    var projectName = "Shuy"
 </script>
 <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
     <a class="navbar-brand" href="/">CircuitVerse</a>
@@ -116,7 +116,7 @@
                 </div>
                 <div style="position:absolute; right:30px; top:30px; z-index:100">
                     <button type="button" class="btn zoomButton btn-lg"
-                        onclick="changeScale(0.2,'zoomButton','zoomButton',2)">
+                        id="zoomIn">
                         <span class="glyphicon glyphicon-zoom-in" aria-hidden="true"></span>
                     </button>
                 </div>
@@ -240,11 +240,10 @@
         </p>
     </div>
     <script>
-        document.addEventListener('DOMContentLoaded', function () {
-            setup()
-        }, false);
-        const embed = false;
-      const restrictedElements = []
+      var embed = false;
+      var listenToSimulator = true;
+      var userSignedIn = true;
+      var restrictedElements = []
     </script>
     <!--<script src="/js/UX.js"></script>-
     ->
diff --git a/jest.config.js b/jest.config.js
index 48bbbbb..737d7ca 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -1,5 +1,6 @@
 module.exports = {
     preset: "jest-puppeteer",
+    setupFiles: ["./jest.setup.js"],
     globals: {
         URL: "http://localhost:8080"
     },
diff --git a/jest.setup.js b/jest.setup.js
new file mode 100644
index 0000000..6dd419b
--- /dev/null
+++ b/jest.setup.js
@@ -0,0 +1,21 @@
+/**
+ * @jest-environment jsdom
+ */
+
+global.window = window
+window.Jquery = require('jquery');
+window.$ = require('jquery');
+global.jQuery = require('jquery');
+
+window.restrictedElements = []
+window.userSignedIn = true;
+window.embed = false;
+
+import Array from './src/arrayHelpers'
+window["Array"] = Array
+require('jquery-ui-bundle');
+
+const fs = require('fs');
+const path = require('path');
+const html = fs.readFileSync(path.resolve(__dirname, './index.html'), 'utf8');
+document.documentElement.innerHTML = html.toString();
diff --git a/package-lock.json b/package-lock.json
index 416f904..82671b1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2103,6 +2103,12 @@
         "acorn-walk": "^6.0.1"
       }
     },
+    "acorn-jsx": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.2.0.tgz",
+      "integrity": "sha512-HiUX/+K2YpkpJ+SzBffkM/AQ2YE03S0U1kjTLVpoJdhZMOWy8qvXVN9JdLqv2QsaQ6MPYQIuNmwD8zOiYUofLQ==",
+      "dev": true
+    },
     "acorn-walk": {
       "version": "6.2.0",
       "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-6.2.0.tgz",
@@ -3285,6 +3291,12 @@
         }
       }
     },
+    "chardet": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/chardet/-/chardet-0.7.0.tgz",
+      "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==",
+      "dev": true
+    },
     "chokidar": {
       "version": "2.1.8",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-2.1.8.tgz",
@@ -3358,6 +3370,21 @@
         }
       }
     },
+    "cli-cursor": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-3.1.0.tgz",
+      "integrity": "sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==",
+      "dev": true,
+      "requires": {
+        "restore-cursor": "^3.1.0"
+      }
+    },
+    "cli-width": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/cli-width/-/cli-width-2.2.1.tgz",
+      "integrity": "sha512-GRMWDxpOB6Dgk2E5Uo+3eEBvtOOlimMmpbFiKuLFnQzYDavtLFY3K5ona41jgN/WdRZtG7utuVSVTL4HbZHGkw==",
+      "dev": true
+    },
     "cliui": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/cliui/-/cliui-5.0.0.tgz",
@@ -4012,6 +4039,15 @@
         "buffer-indexof": "^1.0.0"
       }
     },
+    "doctrine": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
+      "integrity": "sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==",
+      "dev": true,
+      "requires": {
+        "esutils": "^2.0.2"
+      }
+    },
     "domain-browser": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.2.0.tgz",
@@ -4197,6 +4233,258 @@
         }
       }
     },
+    "eslint": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-7.2.0.tgz",
+      "integrity": "sha512-B3BtEyaDKC5MlfDa2Ha8/D6DsS4fju95zs0hjS3HdGazw+LNayai38A25qMppK37wWGWNYSPOR6oYzlz5MHsRQ==",
+      "dev": true,
+      "requires": {
+        "@babel/code-frame": "^7.0.0",
+        "ajv": "^6.10.0",
+        "chalk": "^4.0.0",
+        "cross-spawn": "^7.0.2",
+        "debug": "^4.0.1",
+        "doctrine": "^3.0.0",
+        "eslint-scope": "^5.1.0",
+        "eslint-utils": "^2.0.0",
+        "eslint-visitor-keys": "^1.2.0",
+        "espree": "^7.1.0",
+        "esquery": "^1.2.0",
+        "esutils": "^2.0.2",
+        "file-entry-cache": "^5.0.1",
+        "functional-red-black-tree": "^1.0.1",
+        "glob-parent": "^5.0.0",
+        "globals": "^12.1.0",
+        "ignore": "^4.0.6",
+        "import-fresh": "^3.0.0",
+        "imurmurhash": "^0.1.4",
+        "inquirer": "^7.0.0",
+        "is-glob": "^4.0.0",
+        "js-yaml": "^3.13.1",
+        "json-stable-stringify-without-jsonify": "^1.0.1",
+        "levn": "^0.4.1",
+        "lodash": "^4.17.14",
+        "minimatch": "^3.0.4",
+        "natural-compare": "^1.4.0",
+        "optionator": "^0.9.1",
+        "progress": "^2.0.0",
+        "regexpp": "^3.1.0",
+        "semver": "^7.2.1",
+        "strip-ansi": "^6.0.0",
+        "strip-json-comments": "^3.1.0",
+        "table": "^5.2.3",
+        "text-table": "^0.2.0",
+        "v8-compile-cache": "^2.0.3"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
+          "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==",
+          "dev": true
+        },
+        "ansi-styles": {
+          "version": "4.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
+          "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==",
+          "dev": true,
+          "requires": {
+            "@types/color-name": "^1.1.1",
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.0.0.tgz",
+          "integrity": "sha512-N9oWFcegS0sFr9oh1oz2d7Npos6vNoWW9HvtCg5N1KRFpUhaAhvTv5Y58g880fZaEYSNm3qDz8SU1UrGvp+n7A==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "cross-spawn": {
+          "version": "7.0.3",
+          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
+          "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+          "dev": true,
+          "requires": {
+            "path-key": "^3.1.0",
+            "shebang-command": "^2.0.0",
+            "which": "^2.0.1"
+          }
+        },
+        "debug": {
+          "version": "4.1.1",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
+          "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==",
+          "dev": true,
+          "requires": {
+            "ms": "^2.1.1"
+          }
+        },
+        "eslint-scope": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.0.tgz",
+          "integrity": "sha512-iiGRvtxWqgtx5m8EyQUJihBloE4EnYeGE/bz1wSPwJE6tZuJUtHlhqDM4Xj2ukE8Dyy1+HCZ4hE0fzIVMzb58w==",
+          "dev": true,
+          "requires": {
+            "esrecurse": "^4.1.0",
+            "estraverse": "^4.1.1"
+          }
+        },
+        "glob-parent": {
+          "version": "5.1.1",
+          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.1.tgz",
+          "integrity": "sha512-FnI+VGOpnlGHWZxthPGR+QhR78fuiK0sNLkHQv+bL9fQi57lNNdquIbna/WrfROrolq8GK5Ek6BiMwqL/voRYQ==",
+          "dev": true,
+          "requires": {
+            "is-glob": "^4.0.1"
+          }
+        },
+        "globals": {
+          "version": "12.4.0",
+          "resolved": "https://registry.npmjs.org/globals/-/globals-12.4.0.tgz",
+          "integrity": "sha512-BWICuzzDvDoH54NHKCseDanAhE3CeDorgDL5MT6LMXXj2WCnd9UC2szdk4AWLfjdgNBCXLUanXYcpBBKOSWGwg==",
+          "dev": true,
+          "requires": {
+            "type-fest": "^0.8.1"
+          }
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "levn": {
+          "version": "0.4.1",
+          "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
+          "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
+          "dev": true,
+          "requires": {
+            "prelude-ls": "^1.2.1",
+            "type-check": "~0.4.0"
+          }
+        },
+        "ms": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+          "dev": true
+        },
+        "optionator": {
+          "version": "0.9.1",
+          "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.1.tgz",
+          "integrity": "sha512-74RlY5FCnhq4jRxVUPKDaRwrVNXMqsGsiW6AJw4XK8hmtm10wC0ypZBLw5IIp85NZMr91+qd1RvvENwg7jjRFw==",
+          "dev": true,
+          "requires": {
+            "deep-is": "^0.1.3",
+            "fast-levenshtein": "^2.0.6",
+            "levn": "^0.4.1",
+            "prelude-ls": "^1.2.1",
+            "type-check": "^0.4.0",
+            "word-wrap": "^1.2.3"
+          }
+        },
+        "path-key": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+          "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+          "dev": true
+        },
+        "prelude-ls": {
+          "version": "1.2.1",
+          "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
+          "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
+          "dev": true
+        },
+        "semver": {
+          "version": "7.3.2",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.2.tgz",
+          "integrity": "sha512-OrOb32TeeambH6UrhtShmF7CRDqhL6/5XpPNp2DuRH6+9QLw/orhp72j87v8Qa1ScDkvrrBNpZcDejAirJmfXQ==",
+          "dev": true
+        },
+        "shebang-command": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+          "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+          "dev": true,
+          "requires": {
+            "shebang-regex": "^3.0.0"
+          }
+        },
+        "shebang-regex": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+          "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+          "dev": true
+        },
+        "strip-ansi": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
+          "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^5.0.0"
+          }
+        },
+        "strip-json-comments": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.0.tgz",
+          "integrity": "sha512-e6/d0eBu7gHtdCqFt0xJr642LdToM5/cN4Qb9DbHjVx1CP5RyeM+zH7pbecEmDv/lBqb0QH+6Uqq75rxFPkM0w==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "7.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.1.0.tgz",
+          "integrity": "sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        },
+        "type-check": {
+          "version": "0.4.0",
+          "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
+          "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
+          "dev": true,
+          "requires": {
+            "prelude-ls": "^1.2.1"
+          }
+        },
+        "type-fest": {
+          "version": "0.8.1",
+          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.8.1.tgz",
+          "integrity": "sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==",
+          "dev": true
+        },
+        "which": {
+          "version": "2.0.2",
+          "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+          "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+          "dev": true,
+          "requires": {
+            "isexe": "^2.0.0"
+          }
+        }
+      }
+    },
     "eslint-scope": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-4.0.3.tgz",
@@ -4207,12 +4495,63 @@
         "estraverse": "^4.1.1"
       }
     },
+    "eslint-utils": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-2.0.0.tgz",
+      "integrity": "sha512-0HCPuJv+7Wv1bACm8y5/ECVfYdfsAm9xmVb7saeFlxjPYALefjhbYoCkBjPdPzGH8wWyTpAez82Fh3VKYEZ8OA==",
+      "dev": true,
+      "requires": {
+        "eslint-visitor-keys": "^1.1.0"
+      }
+    },
+    "eslint-visitor-keys": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.2.0.tgz",
+      "integrity": "sha512-WFb4ihckKil6hu3Dp798xdzSfddwKKU3+nGniKF6HfeW6OLd2OUDEPP7TcHtB5+QXOKg2s6B2DaMPE1Nn/kxKQ==",
+      "dev": true
+    },
+    "espree": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-7.1.0.tgz",
+      "integrity": "sha512-dcorZSyfmm4WTuTnE5Y7MEN1DyoPYy1ZR783QW1FJoenn7RailyWFsq/UL6ZAAA7uXurN9FIpYyUs3OfiIW+Qw==",
+      "dev": true,
+      "requires": {
+        "acorn": "^7.2.0",
+        "acorn-jsx": "^5.2.0",
+        "eslint-visitor-keys": "^1.2.0"
+      },
+      "dependencies": {
+        "acorn": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.2.0.tgz",
+          "integrity": "sha512-apwXVmYVpQ34m/i71vrApRrRKCWQnZZF1+npOD0WV5xZFfwWOmKGQ2RWlfdy9vWITsenisM8M0Qeq8agcFHNiQ==",
+          "dev": true
+        }
+      }
+    },
     "esprima": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
       "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
       "dev": true
     },
+    "esquery": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.3.1.tgz",
+      "integrity": "sha512-olpvt9QG0vniUBZspVRN6lwB7hOZoTRtT+jzR+tS4ffYx2mzbw+z0XCOk44aaLYKApNX5nMm+E+P6o25ip/DHQ==",
+      "dev": true,
+      "requires": {
+        "estraverse": "^5.1.0"
+      },
+      "dependencies": {
+        "estraverse": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.1.0.tgz",
+          "integrity": "sha512-FyohXK+R0vE+y1nHLoBM7ZTyqRpqAlhdZHCWIWEviFLiGB8b04H6bQs8G+XTthacvT8VuwvteiP7RJSxMs8UEw==",
+          "dev": true
+        }
+      }
+    },
     "esrecurse": {
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.2.1.tgz",
@@ -4462,6 +4801,17 @@
         }
       }
     },
+    "external-editor": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/external-editor/-/external-editor-3.1.0.tgz",
+      "integrity": "sha512-hMQ4CX1p1izmuLYyZqLMO/qGNw10wSv9QDCPfzXfyFrOaCSSoRfqE1Kf1s5an66J5JZC62NewG+mK49jOCtQew==",
+      "dev": true,
+      "requires": {
+        "chardet": "^0.7.0",
+        "iconv-lite": "^0.4.24",
+        "tmp": "^0.0.33"
+      }
+    },
     "extglob": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/extglob/-/extglob-2.0.4.tgz",
@@ -4592,6 +4942,24 @@
       "integrity": "sha512-0btnI/H8f2pavGMN8w40mlSKOfTK2SVJmBfBeVIj3kNw0swwgzyRq0d5TJVOwodFmtvpPeWPN/MCcfuWF0Ezbw==",
       "dev": true
     },
+    "figures": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/figures/-/figures-3.2.0.tgz",
+      "integrity": "sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==",
+      "dev": true,
+      "requires": {
+        "escape-string-regexp": "^1.0.5"
+      }
+    },
+    "file-entry-cache": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-5.0.1.tgz",
+      "integrity": "sha512-bCg29ictuBaKUwwArK4ouCaqDgLZcysCFLmM/Yn/FDoqndh/9vNuQfXRDvTuXKLxfD/JtZQGKFT8MGcJBK644g==",
+      "dev": true,
+      "requires": {
+        "flat-cache": "^2.0.1"
+      }
+    },
     "file-loader": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-6.0.0.tgz",
@@ -4790,6 +5158,34 @@
         "resolve-dir": "^1.0.1"
       }
     },
+    "flat-cache": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-2.0.1.tgz",
+      "integrity": "sha512-LoQe6yDuUMDzQAEH8sgmh4Md6oZnc/7PjtwjNFSzveXqSHt6ka9fPBuso7IGf9Rz4uqnSnWiFH2B/zj24a5ReA==",
+      "dev": true,
+      "requires": {
+        "flatted": "^2.0.0",
+        "rimraf": "2.6.3",
+        "write": "1.0.3"
+      },
+      "dependencies": {
+        "rimraf": {
+          "version": "2.6.3",
+          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.3.tgz",
+          "integrity": "sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==",
+          "dev": true,
+          "requires": {
+            "glob": "^7.1.3"
+          }
+        }
+      }
+    },
+    "flatted": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-2.0.2.tgz",
+      "integrity": "sha512-r5wGx7YeOwNWNlCA0wQ86zKyDLMQr+/RB8xy74M4hTphfmjlijTSSXGuH8rnvKZnfT9i+75zmd8jcKdMR4O6jA==",
+      "dev": true
+    },
     "flush-write-stream": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/flush-write-stream/-/flush-write-stream-1.1.1.tgz",
@@ -5483,6 +5879,12 @@
       "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
       "dev": true
     },
+    "functional-red-black-tree": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz",
+      "integrity": "sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=",
+      "dev": true
+    },
     "gauge": {
       "version": "2.7.4",
       "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz",
@@ -5986,6 +6388,12 @@
       "integrity": "sha1-xg7taebY/bazEEofy8ocGS3FtQE=",
       "dev": true
     },
+    "ignore": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz",
+      "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==",
+      "dev": true
+    },
     "ignore-walk": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/ignore-walk/-/ignore-walk-3.0.3.tgz",
@@ -5994,6 +6402,24 @@
         "minimatch": "^3.0.4"
       }
     },
+    "import-fresh": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.2.1.tgz",
+      "integrity": "sha512-6e1q1cnWP2RXD9/keSkxHScg508CdXqXWgWBaETNhyuBFz+kUZlKboh+ISK+bU++DmbHimVBrOz/zzPe0sZ3sQ==",
+      "dev": true,
+      "requires": {
+        "parent-module": "^1.0.0",
+        "resolve-from": "^4.0.0"
+      },
+      "dependencies": {
+        "resolve-from": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+          "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+          "dev": true
+        }
+      }
+    },
     "import-local": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/import-local/-/import-local-2.0.0.tgz",
@@ -6040,6 +6466,117 @@
       "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz",
       "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw=="
     },
+    "inquirer": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-7.1.0.tgz",
+      "integrity": "sha512-5fJMWEmikSYu0nv/flMc475MhGbB7TSPd/2IpFV4I4rMklboCH2rQjYY5kKiYGHqUF9gvaambupcJFFG9dvReg==",
+      "dev": true,
+      "requires": {
+        "ansi-escapes": "^4.2.1",
+        "chalk": "^3.0.0",
+        "cli-cursor": "^3.1.0",
+        "cli-width": "^2.0.0",
+        "external-editor": "^3.0.3",
+        "figures": "^3.0.0",
+        "lodash": "^4.17.15",
+        "mute-stream": "0.0.8",
+        "run-async": "^2.4.0",
+        "rxjs": "^6.5.3",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0",
+        "through": "^2.3.6"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
+          "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==",
+          "dev": true
+        },
+        "ansi-styles": {
+          "version": "4.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
+          "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==",
+          "dev": true,
+          "requires": {
+            "@types/color-name": "^1.1.1",
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
+          "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "emoji-regex": {
+          "version": "8.0.0",
+          "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+          "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+          "dev": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "is-fullwidth-code-point": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+          "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+          "dev": true
+        },
+        "string-width": {
+          "version": "4.2.0",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.0.tgz",
+          "integrity": "sha512-zUz5JD+tgqtuDjMhwIg5uFVV3dtqZ9yQJlZVfq4I01/K5Paj5UHj7VyrQOJvzawSVlKpObApbfD0Ed6yJc+1eg==",
+          "dev": true,
+          "requires": {
+            "emoji-regex": "^8.0.0",
+            "is-fullwidth-code-point": "^3.0.0",
+            "strip-ansi": "^6.0.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
+          "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^5.0.0"
+          }
+        },
+        "supports-color": {
+          "version": "7.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.1.0.tgz",
+          "integrity": "sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
     "internal-ip": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/internal-ip/-/internal-ip-4.3.0.tgz",
@@ -8465,6 +9002,12 @@
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
       "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
     },
+    "json-stable-stringify-without-jsonify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
+      "integrity": "sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE=",
+      "dev": true
+    },
     "json-stringify-safe": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
@@ -8941,6 +9484,12 @@
       "integrity": "sha1-iZ8R2WhuXgXLkbNdXw5jt3PPyQE=",
       "dev": true
     },
+    "mute-stream": {
+      "version": "0.0.8",
+      "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.8.tgz",
+      "integrity": "sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==",
+      "dev": true
+    },
     "nan": {
       "version": "2.14.0",
       "resolved": "https://registry.npmjs.org/nan/-/nan-2.14.0.tgz",
@@ -9488,6 +10037,15 @@
         "readable-stream": "^2.1.5"
       }
     },
+    "parent-module": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
+      "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
+      "dev": true,
+      "requires": {
+        "callsites": "^3.0.0"
+      }
+    },
     "parse-asn1": {
       "version": "5.1.5",
       "resolved": "https://registry.npmjs.org/parse-asn1/-/parse-asn1-5.1.5.tgz",
@@ -10137,6 +10695,12 @@
         "es-abstract": "^1.17.0-next.1"
       }
     },
+    "regexpp": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/regexpp/-/regexpp-3.1.0.tgz",
+      "integrity": "sha512-ZOIzd8yVsQQA7j8GCSlPGXwg5PfmA1mrq0JP4nGhh54LaKN3xdai/vHUDu74pKwV8OxseMS65u2NImosQcSD0Q==",
+      "dev": true
+    },
     "regexpu-core": {
       "version": "4.7.0",
       "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-4.7.0.tgz",
@@ -10350,6 +10914,16 @@
       "integrity": "sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo=",
       "dev": true
     },
+    "restore-cursor": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-3.1.0.tgz",
+      "integrity": "sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==",
+      "dev": true,
+      "requires": {
+        "onetime": "^5.1.0",
+        "signal-exit": "^3.0.2"
+      }
+    },
     "ret": {
       "version": "0.1.15",
       "resolved": "https://registry.npmjs.org/ret/-/ret-0.1.15.tgz",
@@ -10386,6 +10960,12 @@
       "integrity": "sha512-nfMOlASu9OnRJo1mbEk2cz0D56a1MBNrJ7orjRZQG10XDyuvwksKbuXNp6qa+kbn839HwjwhBzhFmdsaEAfauA==",
       "dev": true
     },
+    "run-async": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/run-async/-/run-async-2.4.1.tgz",
+      "integrity": "sha512-tvVnVv01b8c1RrA6Ep7JkStj85Guv/YrMcwqYQnwjsAS2cTmmPGBBjAjpCW7RrSodNSoE2/qg9O4bceNvUuDgQ==",
+      "dev": true
+    },
     "run-queue": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/run-queue/-/run-queue-1.0.3.tgz",
@@ -10401,6 +10981,15 @@
       "integrity": "sha1-pfE/957zt0D+MKqAP7CfmIBdR4I=",
       "dev": true
     },
+    "rxjs": {
+      "version": "6.5.5",
+      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.5.5.tgz",
+      "integrity": "sha512-WfQI+1gohdf0Dai/Bbmk5L5ItH5tYqm3ki2c5GdWhKjalzjg93N3avFjVStyZZz+A2Em+ZxKH5bNghw9UeylGQ==",
+      "dev": true,
+      "requires": {
+        "tslib": "^1.9.0"
+      }
+    },
     "safe-buffer": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
@@ -10703,6 +11292,17 @@
       "integrity": "sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==",
       "dev": true
     },
+    "slice-ansi": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-2.1.0.tgz",
+      "integrity": "sha512-Qu+VC3EwYLldKa1fCxuuvULvSJOKEgk9pi8dZeCVK7TqBfUNTH4sFkk4joj8afVSfAYgJoSOetjx9QWOJ5mYoQ==",
+      "dev": true,
+      "requires": {
+        "ansi-styles": "^3.2.0",
+        "astral-regex": "^1.0.0",
+        "is-fullwidth-code-point": "^2.0.0"
+      }
+    },
     "snapdragon": {
       "version": "0.8.2",
       "resolved": "https://registry.npmjs.org/snapdragon/-/snapdragon-0.8.2.tgz",
@@ -11254,6 +11854,18 @@
       "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
       "dev": true
     },
+    "table": {
+      "version": "5.4.6",
+      "resolved": "https://registry.npmjs.org/table/-/table-5.4.6.tgz",
+      "integrity": "sha512-wmEc8m4fjnob4gt5riFRtTu/6+4rSe12TpAELNSqHMfF3IqnA+CH37USM6/YR3qRZv7e56kAEAtd6nKZaxe0Ug==",
+      "dev": true,
+      "requires": {
+        "ajv": "^6.10.2",
+        "lodash": "^4.17.14",
+        "slice-ansi": "^2.1.0",
+        "string-width": "^3.0.0"
+      }
+    },
     "tapable": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-1.1.3.tgz",
@@ -11339,12 +11951,24 @@
         "minimatch": "^3.0.4"
       }
     },
+    "text-table": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
+      "integrity": "sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=",
+      "dev": true
+    },
     "throat": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/throat/-/throat-5.0.0.tgz",
       "integrity": "sha512-fcwX4mndzpLQKBS1DVYhGAcYaYt7vsHNIvQV+WXMvnow5cgjPphq5CaayLaGsjRdSCKZFNGt7/GYAuXaNOiYCA==",
       "dev": true
     },
+    "through": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
+      "integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=",
+      "dev": true
+    },
     "through2": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz",
@@ -11370,6 +11994,15 @@
         "setimmediate": "^1.0.4"
       }
     },
+    "tmp": {
+      "version": "0.0.33",
+      "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
+      "integrity": "sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==",
+      "dev": true,
+      "requires": {
+        "os-tmpdir": "~1.0.2"
+      }
+    },
     "tmpl": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.4.tgz",
@@ -12367,6 +13000,15 @@
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
       "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8="
     },
+    "write": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/write/-/write-1.0.3.tgz",
+      "integrity": "sha512-/lg70HAjtkUgWPVZhZcm+T4hkL8Zbtp1nFNOn3lRrxnlv50SRBv7cR7RqR+GMsd3hUXy9hWBo4CHTbFTcOYwig==",
+      "dev": true,
+      "requires": {
+        "mkdirp": "^0.5.1"
+      }
+    },
     "write-file-atomic": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-3.0.3.tgz",
diff --git a/package.json b/package.json
index 2629c75..4f42eaf 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
     "babel-core": "^6.26.3",
     "babel-loader": "^8.1.0",
     "babel-polyfill": "^6.26.0",
+    "eslint": "^7.2.0",
     "file-loader": "^6.0.0",
     "jasmine": "^3.5.0",
     "jest": "^25.2.3",
diff --git a/src/app.js b/src/app.js
index 0856b32..f80d5d5 100644
--- a/src/app.js
+++ b/src/app.js
@@ -1,28 +1,13 @@
-import $ from 'jquery';
+import { setup } from './setup';
+import Array from './arrayHelpers';
+import 'bootstrap';
 
-window.$ = $
-window.jQuery = $
-
-// require('../node_modules/jquery-ui-dist!jquery-ui-dist/jquery-ui.css');
 import 'jquery-ui'
 import 'jquery-ui-dist/jquery-ui'
 import 'bootstrap'
 
-// jquery-ui theme
-// require('../node_modules/jquery-ui-dist/jquery-ui.css');
-// require('../node_modules/jquery-ui-dist/jquery-ui.theme.css');
-
-// jquery-ui theme
-// require.context('file-loader?name=[path][name].[ext]&context=node_modules/jquery-ui-dist!jquery-ui-dist', true, /jquery-ui.css/);
-// require.context('file-loader?name=[path][name].[ext]&context=node_modules/jquery-ui-dist!jquery-ui-dist', true, /jquery-ui\.theme\.css/);
-// import 'jquery-ujs';
-// var Turbolinks = require("turbolinks");
-// Turbolinks.start();
+document.addEventListener('DOMContentLoaded', () => {
+    setup();
+});
 
-// import 
-import { setup } from './circuit'
-import { AndGate } from './module'
-import { Array } from './arrayHelpers'
-window.setup = setup
-window["AndGate"] = AndGate
-window["Array"] = Array
\ No newline at end of file
+window.Array = Array;
diff --git a/src/arrayHelpers.js b/src/arrayHelpers.js
index 5c2f69c..06c5818 100644
--- a/src/arrayHelpers.js
+++ b/src/arrayHelpers.js
@@ -1,7 +1,10 @@
-export var Array = window.Array 
+/* eslint-disable func-names */
+/* eslint-disable no-global-assign */
+/* eslint-disable no-extend-native */
+export default Array = window.Array;
 Array.prototype.clean = function (deleteValue) {
-    for (var i = 0; i < this.length; i++) {
-        if (this[i] == deleteValue) {
+    for (let i = 0; i < this.length; i++) {
+        if (this[i] === deleteValue) {
             this.splice(i, 1);
             i--;
         }
@@ -10,15 +13,15 @@ Array.prototype.clean = function (deleteValue) {
 };
 
 // Following function need to be improved
-Array.prototype.extend = function (other_array) {
+Array.prototype.extend = function (otherArray) {
     /* you should include a test to check whether other_array really is an array */
-    other_array.forEach(function (v) {
-        this.push(v)
+    otherArray.forEach(function (v) {
+        this.push(v);
     }, this);
-}
+};
 
 // Following function need to be improved
-//fn to check if an elem is in an array
+// fn to check if an elem is in an array
 Array.prototype.contains = function (value) {
-    return this.indexOf(value) > -1
-};
\ No newline at end of file
+    return this.indexOf(value) > -1;
+};
diff --git a/src/backgroundArea.js b/src/backgroundArea.js
index 239f670..9447743 100644
--- a/src/backgroundArea.js
+++ b/src/backgroundArea.js
@@ -1,16 +1,17 @@
-import { width,height } from "./circuit";
-import { dots } from "./canvasApi";
-export const backgroundArea = {
-    canvas: document.getElementById("backgroundArea"),
+import { dots } from './canvasApi';
+
+let backgroundArea;
+export default backgroundArea = {
+    canvas: document.getElementById('backgroundArea'),
     setup() {
-        this.canvas = document.getElementById("backgroundArea")
+        this.canvas = document.getElementById('backgroundArea');
         this.canvas.width = width;
         this.canvas.height = height;
-        this.context = this.canvas.getContext("2d");
+        this.context = this.canvas.getContext('2d');
         dots(true, false);
     },
     clear() {
         if (!this.context) return;
         this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
-    }
-}
+    },
+};
diff --git a/src/canvas2svg.js b/src/canvas2svg.js
index 1823d35..0b08f8e 100644
--- a/src/canvas2svg.js
+++ b/src/canvas2svg.js
@@ -1,26 +1,28 @@
-"use strict";
 
-var STYLES, ctx, CanvasGradient, CanvasPattern, namedEntities;
+let STYLES; let ctx; let CanvasGradient; let CanvasPattern; var
+    namedEntities;
 
-//helper function to format a string
+// helper function to format a string
 function format(str, args) {
-    var keys = Object.keys(args), i;
-    for (i=0; i<keys.length; i++) {
-        str = str.replace(new RegExp("\\{" + keys[i] + "\\}", "gi"), args[keys[i]]);
+    const keys = Object.keys(args); var
+        i;
+    for (i = 0; i < keys.length; i++) {
+        str = str.replace(new RegExp(`\\{${keys[i]}\\}`, 'gi'), args[keys[i]]);
     }
     return str;
 }
 
-//helper function that generates a random string
+// helper function that generates a random string
 function randomString(holder) {
-    var chars, randomstring, i;
+    let chars; let randomstring; var
+        i;
     if (!holder) {
-        throw new Error("cannot create a random attribute name for an undefined object");
+        throw new Error('cannot create a random attribute name for an undefined object');
     }
-    chars = "ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz";
-    randomstring = "";
+    chars = 'ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz';
+    randomstring = '';
     do {
-        randomstring = "";
+        randomstring = '';
         for (i = 0; i < 12; i++) {
             randomstring += chars[Math.floor(Math.random() * chars.length)];
         }
@@ -28,144 +30,150 @@ function randomString(holder) {
     return randomstring;
 }
 
-//helper function to map named to numbered entities
+// helper function to map named to numbered entities
 function createNamedToNumberedLookup(items, radix) {
-    var i, entity, lookup = {}, base10, base16;
+    let i; let entity; const lookup = {}; let base10; var
+        base16;
     items = items.split(',');
     radix = radix || 10;
     // Map from named to numbered entities.
     for (i = 0; i < items.length; i += 2) {
-        entity = '&' + items[i + 1] + ';';
+        entity = `&${items[i + 1]};`;
         base10 = parseInt(items[i], radix);
-        lookup[entity] = '&#'+base10+';';
+        lookup[entity] = `&#${base10};`;
     }
-    //FF and IE need to create a regex from hex values ie &nbsp; == \xa0
-    lookup["\\xa0"] = '&#160;';
+    // FF and IE need to create a regex from hex values ie &nbsp; == \xa0
+    lookup['\\xa0'] = '&#160;';
     return lookup;
 }
 
-//helper function to map canvas-textAlign to svg-textAnchor
+// helper function to map canvas-textAlign to svg-textAnchor
 function getTextAnchor(textAlign) {
-    //TODO: support rtl languages
-    var mapping = {"left":"start", "right":"end", "center":"middle", "start":"start", "end":"end"};
+    // TODO: support rtl languages
+    const mapping = {
+        left: 'start', right: 'end', center: 'middle', start: 'start', end: 'end',
+    };
     return mapping[textAlign] || mapping.start;
 }
 
-//helper function to map canvas-textBaseline to svg-dominantBaseline
+// helper function to map canvas-textBaseline to svg-dominantBaseline
 function getDominantBaseline(textBaseline) {
-    //INFO: not supported in all browsers
-    var mapping = {"alphabetic": "alphabetic", "hanging": "hanging", "top":"text-before-edge", "bottom":"text-after-edge", "middle":"central"};
+    // INFO: not supported in all browsers
+    const mapping = {
+        alphabetic: 'alphabetic', hanging: 'hanging', top: 'text-before-edge', bottom: 'text-after-edge', middle: 'central',
+    };
     return mapping[textBaseline] || mapping.alphabetic;
 }
 
 // Unpack entities lookup where the numbers are in radix 32 to reduce the size
 // entity mapping courtesy of tinymce
 namedEntities = createNamedToNumberedLookup(
-    '50,nbsp,51,iexcl,52,cent,53,pound,54,curren,55,yen,56,brvbar,57,sect,58,uml,59,copy,' +
-        '5a,ordf,5b,laquo,5c,not,5d,shy,5e,reg,5f,macr,5g,deg,5h,plusmn,5i,sup2,5j,sup3,5k,acute,' +
-        '5l,micro,5m,para,5n,middot,5o,cedil,5p,sup1,5q,ordm,5r,raquo,5s,frac14,5t,frac12,5u,frac34,' +
-        '5v,iquest,60,Agrave,61,Aacute,62,Acirc,63,Atilde,64,Auml,65,Aring,66,AElig,67,Ccedil,' +
-        '68,Egrave,69,Eacute,6a,Ecirc,6b,Euml,6c,Igrave,6d,Iacute,6e,Icirc,6f,Iuml,6g,ETH,6h,Ntilde,' +
-        '6i,Ograve,6j,Oacute,6k,Ocirc,6l,Otilde,6m,Ouml,6n,times,6o,Oslash,6p,Ugrave,6q,Uacute,' +
-        '6r,Ucirc,6s,Uuml,6t,Yacute,6u,THORN,6v,szlig,70,agrave,71,aacute,72,acirc,73,atilde,74,auml,' +
-        '75,aring,76,aelig,77,ccedil,78,egrave,79,eacute,7a,ecirc,7b,euml,7c,igrave,7d,iacute,7e,icirc,' +
-        '7f,iuml,7g,eth,7h,ntilde,7i,ograve,7j,oacute,7k,ocirc,7l,otilde,7m,ouml,7n,divide,7o,oslash,' +
-        '7p,ugrave,7q,uacute,7r,ucirc,7s,uuml,7t,yacute,7u,thorn,7v,yuml,ci,fnof,sh,Alpha,si,Beta,' +
-        'sj,Gamma,sk,Delta,sl,Epsilon,sm,Zeta,sn,Eta,so,Theta,sp,Iota,sq,Kappa,sr,Lambda,ss,Mu,' +
-        'st,Nu,su,Xi,sv,Omicron,t0,Pi,t1,Rho,t3,Sigma,t4,Tau,t5,Upsilon,t6,Phi,t7,Chi,t8,Psi,' +
-        't9,Omega,th,alpha,ti,beta,tj,gamma,tk,delta,tl,epsilon,tm,zeta,tn,eta,to,theta,tp,iota,' +
-        'tq,kappa,tr,lambda,ts,mu,tt,nu,tu,xi,tv,omicron,u0,pi,u1,rho,u2,sigmaf,u3,sigma,u4,tau,' +
-        'u5,upsilon,u6,phi,u7,chi,u8,psi,u9,omega,uh,thetasym,ui,upsih,um,piv,812,bull,816,hellip,' +
-        '81i,prime,81j,Prime,81u,oline,824,frasl,88o,weierp,88h,image,88s,real,892,trade,89l,alefsym,' +
-        '8cg,larr,8ch,uarr,8ci,rarr,8cj,darr,8ck,harr,8dl,crarr,8eg,lArr,8eh,uArr,8ei,rArr,8ej,dArr,' +
-        '8ek,hArr,8g0,forall,8g2,part,8g3,exist,8g5,empty,8g7,nabla,8g8,isin,8g9,notin,8gb,ni,8gf,prod,' +
-        '8gh,sum,8gi,minus,8gn,lowast,8gq,radic,8gt,prop,8gu,infin,8h0,ang,8h7,and,8h8,or,8h9,cap,8ha,cup,' +
-        '8hb,int,8hk,there4,8hs,sim,8i5,cong,8i8,asymp,8j0,ne,8j1,equiv,8j4,le,8j5,ge,8k2,sub,8k3,sup,8k4,' +
-        'nsub,8k6,sube,8k7,supe,8kl,oplus,8kn,otimes,8l5,perp,8m5,sdot,8o8,lceil,8o9,rceil,8oa,lfloor,8ob,' +
-        'rfloor,8p9,lang,8pa,rang,9ea,loz,9j0,spades,9j3,clubs,9j5,hearts,9j6,diams,ai,OElig,aj,oelig,b0,' +
-        'Scaron,b1,scaron,bo,Yuml,m6,circ,ms,tilde,802,ensp,803,emsp,809,thinsp,80c,zwnj,80d,zwj,80e,lrm,' +
-        '80f,rlm,80j,ndash,80k,mdash,80o,lsquo,80p,rsquo,80q,sbquo,80s,ldquo,80t,rdquo,80u,bdquo,810,dagger,' +
-        '811,Dagger,81g,permil,81p,lsaquo,81q,rsaquo,85c,euro', 32);
-
-
-//Some basic mappings for attributes and default values.
+    '50,nbsp,51,iexcl,52,cent,53,pound,54,curren,55,yen,56,brvbar,57,sect,58,uml,59,copy,'
+        + '5a,ordf,5b,laquo,5c,not,5d,shy,5e,reg,5f,macr,5g,deg,5h,plusmn,5i,sup2,5j,sup3,5k,acute,'
+        + '5l,micro,5m,para,5n,middot,5o,cedil,5p,sup1,5q,ordm,5r,raquo,5s,frac14,5t,frac12,5u,frac34,'
+        + '5v,iquest,60,Agrave,61,Aacute,62,Acirc,63,Atilde,64,Auml,65,Aring,66,AElig,67,Ccedil,'
+        + '68,Egrave,69,Eacute,6a,Ecirc,6b,Euml,6c,Igrave,6d,Iacute,6e,Icirc,6f,Iuml,6g,ETH,6h,Ntilde,'
+        + '6i,Ograve,6j,Oacute,6k,Ocirc,6l,Otilde,6m,Ouml,6n,times,6o,Oslash,6p,Ugrave,6q,Uacute,'
+        + '6r,Ucirc,6s,Uuml,6t,Yacute,6u,THORN,6v,szlig,70,agrave,71,aacute,72,acirc,73,atilde,74,auml,'
+        + '75,aring,76,aelig,77,ccedil,78,egrave,79,eacute,7a,ecirc,7b,euml,7c,igrave,7d,iacute,7e,icirc,'
+        + '7f,iuml,7g,eth,7h,ntilde,7i,ograve,7j,oacute,7k,ocirc,7l,otilde,7m,ouml,7n,divide,7o,oslash,'
+        + '7p,ugrave,7q,uacute,7r,ucirc,7s,uuml,7t,yacute,7u,thorn,7v,yuml,ci,fnof,sh,Alpha,si,Beta,'
+        + 'sj,Gamma,sk,Delta,sl,Epsilon,sm,Zeta,sn,Eta,so,Theta,sp,Iota,sq,Kappa,sr,Lambda,ss,Mu,'
+        + 'st,Nu,su,Xi,sv,Omicron,t0,Pi,t1,Rho,t3,Sigma,t4,Tau,t5,Upsilon,t6,Phi,t7,Chi,t8,Psi,'
+        + 't9,Omega,th,alpha,ti,beta,tj,gamma,tk,delta,tl,epsilon,tm,zeta,tn,eta,to,theta,tp,iota,'
+        + 'tq,kappa,tr,lambda,ts,mu,tt,nu,tu,xi,tv,omicron,u0,pi,u1,rho,u2,sigmaf,u3,sigma,u4,tau,'
+        + 'u5,upsilon,u6,phi,u7,chi,u8,psi,u9,omega,uh,thetasym,ui,upsih,um,piv,812,bull,816,hellip,'
+        + '81i,prime,81j,Prime,81u,oline,824,frasl,88o,weierp,88h,image,88s,real,892,trade,89l,alefsym,'
+        + '8cg,larr,8ch,uarr,8ci,rarr,8cj,darr,8ck,harr,8dl,crarr,8eg,lArr,8eh,uArr,8ei,rArr,8ej,dArr,'
+        + '8ek,hArr,8g0,forall,8g2,part,8g3,exist,8g5,empty,8g7,nabla,8g8,isin,8g9,notin,8gb,ni,8gf,prod,'
+        + '8gh,sum,8gi,minus,8gn,lowast,8gq,radic,8gt,prop,8gu,infin,8h0,ang,8h7,and,8h8,or,8h9,cap,8ha,cup,'
+        + '8hb,int,8hk,there4,8hs,sim,8i5,cong,8i8,asymp,8j0,ne,8j1,equiv,8j4,le,8j5,ge,8k2,sub,8k3,sup,8k4,'
+        + 'nsub,8k6,sube,8k7,supe,8kl,oplus,8kn,otimes,8l5,perp,8m5,sdot,8o8,lceil,8o9,rceil,8oa,lfloor,8ob,'
+        + 'rfloor,8p9,lang,8pa,rang,9ea,loz,9j0,spades,9j3,clubs,9j5,hearts,9j6,diams,ai,OElig,aj,oelig,b0,'
+        + 'Scaron,b1,scaron,bo,Yuml,m6,circ,ms,tilde,802,ensp,803,emsp,809,thinsp,80c,zwnj,80d,zwj,80e,lrm,'
+        + '80f,rlm,80j,ndash,80k,mdash,80o,lsquo,80p,rsquo,80q,sbquo,80s,ldquo,80t,rdquo,80u,bdquo,810,dagger,'
+        + '811,Dagger,81g,permil,81p,lsaquo,81q,rsaquo,85c,euro', 32,
+);
+
+
+// Some basic mappings for attributes and default values.
 STYLES = {
-    "strokeStyle":{
-        svgAttr : "stroke", //corresponding svg attribute
-        canvas : "#000000", //canvas default
-        svg : "none",       //svg default
-        apply : "stroke"    //apply on stroke() or fill()
+    strokeStyle: {
+        svgAttr: 'stroke', // corresponding svg attribute
+        canvas: '#000000', // canvas default
+        svg: 'none', // svg default
+        apply: 'stroke', // apply on stroke() or fill()
     },
-    "fillStyle":{
-        svgAttr : "fill",
-        canvas : "#000000",
-        svg : null, //svg default is black, but we need to special case this to handle canvas stroke without fill
-        apply : "fill"
+    fillStyle: {
+        svgAttr: 'fill',
+        canvas: '#000000',
+        svg: null, // svg default is black, but we need to special case this to handle canvas stroke without fill
+        apply: 'fill',
     },
-    "lineCap":{
-        svgAttr : "stroke-linecap",
-        canvas : "butt",
-        svg : "butt",
-        apply : "stroke"
+    lineCap: {
+        svgAttr: 'stroke-linecap',
+        canvas: 'butt',
+        svg: 'butt',
+        apply: 'stroke',
     },
-    "lineJoin":{
-        svgAttr : "stroke-linejoin",
-        canvas : "miter",
-        svg : "miter",
-        apply : "stroke"
+    lineJoin: {
+        svgAttr: 'stroke-linejoin',
+        canvas: 'miter',
+        svg: 'miter',
+        apply: 'stroke',
     },
-    "miterLimit":{
-        svgAttr : "stroke-miterlimit",
-        canvas : 10,
-        svg : 4,
-        apply : "stroke"
+    miterLimit: {
+        svgAttr: 'stroke-miterlimit',
+        canvas: 10,
+        svg: 4,
+        apply: 'stroke',
     },
-    "lineWidth":{
-        svgAttr : "stroke-width",
-        canvas : 1,
-        svg : 1,
-        apply : "stroke"
+    lineWidth: {
+        svgAttr: 'stroke-width',
+        canvas: 1,
+        svg: 1,
+        apply: 'stroke',
     },
-    "globalAlpha": {
-        svgAttr : "opacity",
-        canvas : 1,
-        svg : 1,
-        apply :  "fill stroke"
+    globalAlpha: {
+        svgAttr: 'opacity',
+        canvas: 1,
+        svg: 1,
+        apply: 'fill stroke',
     },
-    "font":{
-        //font converts to multiple svg attributes, there is custom logic for this
-        canvas : "10px sans-serif"
+    font: {
+        // font converts to multiple svg attributes, there is custom logic for this
+        canvas: '10px sans-serif',
     },
-    "shadowColor":{
-        canvas : "#000000"
+    shadowColor: {
+        canvas: '#000000',
     },
-    "shadowOffsetX":{
-        canvas : 0
+    shadowOffsetX: {
+        canvas: 0,
     },
-    "shadowOffsetY":{
-        canvas : 0
+    shadowOffsetY: {
+        canvas: 0,
     },
-    "shadowBlur":{
-        canvas : 0
+    shadowBlur: {
+        canvas: 0,
     },
-    "textAlign":{
-        canvas : "start"
+    textAlign: {
+        canvas: 'start',
     },
-    "textBaseline":{
-        canvas : "alphabetic"
+    textBaseline: {
+        canvas: 'alphabetic',
+    },
+    lineDash: {
+        svgAttr: 'stroke-dasharray',
+        canvas: [],
+        svg: null,
+        apply: 'stroke',
     },
-    "lineDash" : {
-        svgAttr : "stroke-dasharray",
-        canvas : [],
-        svg : null,
-        apply : "stroke"
-    }
 };
 
 /**
- *
  * @param gradientNode - reference to the gradient
  * @constructor
+ * @category c2s
  */
 CanvasGradient = function (gradientNode, ctx) {
     this.__root = gradientNode;
@@ -176,16 +184,17 @@ CanvasGradient = function (gradientNode, ctx) {
  * Adds a color stop to the gradient root
  */
 CanvasGradient.prototype.addColorStop = function (offset, color) {
-    var stop = this.__ctx.__createElement("stop"), regex, matches;
-    stop.setAttribute("offset", offset);
-    if (color.indexOf("rgba") !== -1) {
-        //separate alpha value, since webkit can't handle it
+    const stop = this.__ctx.__createElement('stop'); let regex; var
+        matches;
+    stop.setAttribute('offset', offset);
+    if (color.indexOf('rgba') !== -1) {
+        // separate alpha value, since webkit can't handle it
         regex = /rgba\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d?\.?\d*)\s*\)/gi;
         matches = regex.exec(color);
-        stop.setAttribute("stop-color", format("rgb({r},{g},{b})", {r:matches[1], g:matches[2], b:matches[3]}));
-        stop.setAttribute("stop-opacity", matches[4]);
+        stop.setAttribute('stop-color', format('rgb({r},{g},{b})', { r: matches[1], g: matches[2], b: matches[3] }));
+        stop.setAttribute('stop-opacity', matches[4]);
     } else {
-        stop.setAttribute("stop-color", color);
+        stop.setAttribute('stop-color', color);
     }
     this.__root.appendChild(stop);
 };
@@ -203,32 +212,34 @@ CanvasPattern = function (pattern, ctx) {
  * height - height of your canvas (defaults to 500)
  * enableMirroring - enables canvas mirroring (get image data) (defaults to false)
  * document - the document object (defaults to the current document)
+ * @category c2s
  */
 ctx = function (o) {
-    var defaultOptions = { width:500, height:500, enableMirroring : false}, options;
+    const defaultOptions = { width: 500, height: 500, enableMirroring: false }; var
+        options;
 
-    //keep support for this way of calling C2S: new C2S(width,height)
+    // keep support for this way of calling C2S: new C2S(width,height)
     if (arguments.length > 1) {
         options = defaultOptions;
         options.width = arguments[0];
         options.height = arguments[1];
-    } else if ( !o ) {
+    } else if (!o) {
         options = defaultOptions;
     } else {
         options = o;
     }
 
     if (!(this instanceof ctx)) {
-        //did someone call this without new?
+        // did someone call this without new?
         return new ctx(options);
     }
 
-    //setup options
+    // setup options
     this.width = options.width || defaultOptions.width;
     this.height = options.height || defaultOptions.height;
     this.enableMirroring = options.enableMirroring !== undefined ? options.enableMirroring : defaultOptions.enableMirroring;
 
-    this.canvas = this;   ///point back to this instance!
+    this.canvas = this; // /point back to this instance!
     this.__document = options.document || document;
 
     // allow passing in an existing context to wrap around
@@ -236,31 +247,31 @@ ctx = function (o) {
     if (options.ctx) {
         this.__ctx = options.ctx;
     } else {
-        this.__canvas = this.__document.createElement("canvas");
-        this.__ctx = this.__canvas.getContext("2d");
+        this.__canvas = this.__document.createElement('canvas');
+        this.__ctx = this.__canvas.getContext('2d');
     }
 
     this.__setDefaultStyles();
     this.__stack = [this.__getStyleState()];
     this.__groupStack = [];
 
-    //the root svg element
-    this.__root = this.__document.createElementNS("http://www.w3.org/2000/svg", "svg");
-    this.__root.setAttribute("version", 1.1);
-    this.__root.setAttribute("xmlns", "http://www.w3.org/2000/svg");
-    this.__root.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:xlink", "http://www.w3.org/1999/xlink");
-    this.__root.setAttribute("width", this.width);
-    this.__root.setAttribute("height", this.height);
+    // the root svg element
+    this.__root = this.__document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    this.__root.setAttribute('version', 1.1);
+    this.__root.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+    this.__root.setAttributeNS('http://www.w3.org/2000/xmlns/', 'xmlns:xlink', 'http://www.w3.org/1999/xlink');
+    this.__root.setAttribute('width', this.width);
+    this.__root.setAttribute('height', this.height);
 
-    //make sure we don't generate the same ids in defs
+    // make sure we don't generate the same ids in defs
     this.__ids = {};
 
-    //defs tag
-    this.__defs = this.__document.createElementNS("http://www.w3.org/2000/svg", "defs");
+    // defs tag
+    this.__defs = this.__document.createElementNS('http://www.w3.org/2000/svg', 'defs');
     this.__root.appendChild(this.__defs);
 
-    //also add a group child. the svg element can't use the transform attribute
-    this.__currentElement = this.__document.createElementNS("http://www.w3.org/2000/svg", "g");
+    // also add a group child. the svg element can't use the transform attribute
+    this.__currentElement = this.__document.createElementNS('http://www.w3.org/2000/svg', 'g');
     this.__root.appendChild(this.__currentElement);
 };
 
@@ -270,18 +281,19 @@ ctx = function (o) {
  * @private
  */
 ctx.prototype.__createElement = function (elementName, properties, resetFill) {
-    if (typeof properties === "undefined") {
+    if (typeof properties === 'undefined') {
         properties = {};
     }
 
-    var element = this.__document.createElementNS("http://www.w3.org/2000/svg", elementName),
-        keys = Object.keys(properties), i, key;
+    const element = this.__document.createElementNS('http://www.w3.org/2000/svg', elementName);
+    const keys = Object.keys(properties); let i; var
+        key;
     if (resetFill) {
-        //if fill or stroke is not specified, the svg element should not display. By default SVG's fill is black.
-        element.setAttribute("fill", "none");
-        element.setAttribute("stroke", "none");
+        // if fill or stroke is not specified, the svg element should not display. By default SVG's fill is black.
+        element.setAttribute('fill', 'none');
+        element.setAttribute('stroke', 'none');
     }
-    for (i=0; i<keys.length; i++) {
+    for (i = 0; i < keys.length; i++) {
         key = keys[i];
         element.setAttribute(key, properties[key]);
     }
@@ -293,9 +305,10 @@ ctx.prototype.__createElement = function (elementName, properties, resetFill) {
  * @private
  */
 ctx.prototype.__setDefaultStyles = function () {
-    //default 2d canvas context properties see:http://www.w3.org/TR/2dcontext/
-    var keys = Object.keys(STYLES), i, key;
-    for (i=0; i<keys.length; i++) {
+    // default 2d canvas context properties see:http://www.w3.org/TR/2dcontext/
+    const keys = Object.keys(STYLES); let i; var
+        key;
+    for (i = 0; i < keys.length; i++) {
         key = keys[i];
         this[key] = STYLES[key].canvas;
     }
@@ -307,8 +320,9 @@ ctx.prototype.__setDefaultStyles = function () {
  * @private
  */
 ctx.prototype.__applyStyleState = function (styleState) {
-    var keys = Object.keys(styleState), i, key;
-    for (i=0; i<keys.length; i++) {
+    const keys = Object.keys(styleState); let i; var
+        key;
+    for (i = 0; i < keys.length; i++) {
         key = keys[i];
         this[key] = styleState[key];
     }
@@ -320,8 +334,9 @@ ctx.prototype.__applyStyleState = function (styleState) {
  * @private
  */
 ctx.prototype.__getStyleState = function () {
-    var i, styleState = {}, keys = Object.keys(STYLES), key;
-    for (i=0; i<keys.length; i++) {
+    let i; const styleState = {}; const keys = Object.keys(STYLES); var
+        key;
+    for (i = 0; i < keys.length; i++) {
         key = keys[i];
         styleState[key] = this[key];
     }
@@ -334,60 +349,60 @@ ctx.prototype.__getStyleState = function () {
  * @private
  */
 ctx.prototype.__applyStyleToCurrentElement = function (type) {
-    var currentElement = this.__currentElement;
-    var currentStyleGroup = this.__currentElementsToStyle;
+    let currentElement = this.__currentElement;
+    const currentStyleGroup = this.__currentElementsToStyle;
     if (currentStyleGroup) {
-        currentElement.setAttribute(type, "");
+        currentElement.setAttribute(type, '');
         currentElement = currentStyleGroup.element;
-        currentStyleGroup.children.forEach(function (node) {
-            node.setAttribute(type, "");
-        })
+        currentStyleGroup.children.forEach((node) => {
+            node.setAttribute(type, '');
+        });
     }
 
-    var keys = Object.keys(STYLES), i, style, value, id, regex, matches;
+    const keys = Object.keys(STYLES); let i; let style; let value; let id; let regex; var
+        matches;
     for (i = 0; i < keys.length; i++) {
         style = STYLES[keys[i]];
         value = this[keys[i]];
         if (style.apply) {
-            //is this a gradient or pattern?
+            // is this a gradient or pattern?
             if (value instanceof CanvasPattern) {
-                //pattern
+                // pattern
                 if (value.__ctx) {
-                    //copy over defs
-                    while(value.__ctx.__defs.childNodes.length) {
-                        id = value.__ctx.__defs.childNodes[0].getAttribute("id");
+                    // copy over defs
+                    while (value.__ctx.__defs.childNodes.length) {
+                        id = value.__ctx.__defs.childNodes[0].getAttribute('id');
                         this.__ids[id] = id;
                         this.__defs.appendChild(value.__ctx.__defs.childNodes[0]);
                     }
                 }
-                currentElement.setAttribute(style.apply, format("url(#{id})", {id:value.__root.getAttribute("id")}));
-            }
-            else if (value instanceof CanvasGradient) {
-                //gradient
-                currentElement.setAttribute(style.apply, format("url(#{id})", {id:value.__root.getAttribute("id")}));
-            } else if (style.apply.indexOf(type)!==-1 && style.svg !== value) {
-                if ((style.svgAttr === "stroke" || style.svgAttr === "fill") && value.indexOf("rgba") !== -1) {
-                    //separate alpha value, since illustrator can't handle it
+                currentElement.setAttribute(style.apply, format('url(#{id})', { id: value.__root.getAttribute('id') }));
+            } else if (value instanceof CanvasGradient) {
+                // gradient
+                currentElement.setAttribute(style.apply, format('url(#{id})', { id: value.__root.getAttribute('id') }));
+            } else if (style.apply.indexOf(type) !== -1 && style.svg !== value) {
+                if ((style.svgAttr === 'stroke' || style.svgAttr === 'fill') && value.indexOf('rgba') !== -1) {
+                    // separate alpha value, since illustrator can't handle it
                     regex = /rgba\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d?\.?\d*)\s*\)/gi;
                     matches = regex.exec(value);
-                    currentElement.setAttribute(style.svgAttr, format("rgb({r},{g},{b})", {r:matches[1], g:matches[2], b:matches[3]}));
-                    //should take globalAlpha here
-                    var opacity = matches[4];
-                    var globalAlpha = this.globalAlpha;
+                    currentElement.setAttribute(style.svgAttr, format('rgb({r},{g},{b})', { r: matches[1], g: matches[2], b: matches[3] }));
+                    // should take globalAlpha here
+                    let opacity = matches[4];
+                    const { globalAlpha } = this;
                     if (globalAlpha != null) {
                         opacity *= globalAlpha;
                     }
-                    currentElement.setAttribute(style.svgAttr+"-opacity", opacity);
+                    currentElement.setAttribute(`${style.svgAttr}-opacity`, opacity);
                 } else {
-                    var attr = style.svgAttr;
+                    let attr = style.svgAttr;
                     if (keys[i] === 'globalAlpha') {
-                        attr = type+'-'+style.svgAttr;
+                        attr = `${type}-${style.svgAttr}`;
                         if (currentElement.getAttribute(attr)) {
-                                //fill-opacity or stroke-opacity has already been set by stroke or fill.
+                            // fill-opacity or stroke-opacity has already been set by stroke or fill.
                             continue;
                         }
                     }
-                    //otherwise only update attribute if right type, and not svg default
+                    // otherwise only update attribute if right type, and not svg default
                     currentElement.setAttribute(attr, value);
                 }
             }
@@ -401,11 +416,10 @@ ctx.prototype.__applyStyleToCurrentElement = function (type) {
  */
 ctx.prototype.__closestGroupOrSvg = function (node) {
     node = node || this.__currentElement;
-    if (node.nodeName === "g" || node.nodeName === "svg") {
+    if (node.nodeName === 'g' || node.nodeName === 'svg') {
         return node;
-    } else {
-        return this.__closestGroupOrSvg(node.parentNode);
     }
+    return this.__closestGroupOrSvg(node.parentNode);
 };
 
 /**
@@ -415,22 +429,23 @@ ctx.prototype.__closestGroupOrSvg = function (node) {
  * @return serialized svg
  */
 ctx.prototype.getSerializedSvg = function (fixNamedEntities) {
-    var serialized = new XMLSerializer().serializeToString(this.__root),
-        keys, i, key, value, regexp, xmlns;
+    let serialized = new XMLSerializer().serializeToString(this.__root);
+    let keys; let i; let key; let value; let regexp; var
+        xmlns;
 
-    //IE search for a duplicate xmnls because they didn't implement setAttributeNS correctly
+    // IE search for a duplicate xmnls because they didn't implement setAttributeNS correctly
     xmlns = /xmlns="http:\/\/www\.w3\.org\/2000\/svg".+xmlns="http:\/\/www\.w3\.org\/2000\/svg/gi;
     if (xmlns.test(serialized)) {
-        serialized = serialized.replace('xmlns="http://www.w3.org/2000/svg','xmlns:xlink="http://www.w3.org/1999/xlink');
+        serialized = serialized.replace('xmlns="http://www.w3.org/2000/svg', 'xmlns:xlink="http://www.w3.org/1999/xlink');
     }
 
     if (fixNamedEntities) {
         keys = Object.keys(namedEntities);
-        //loop over each named entity and replace with the proper equivalent.
-        for (i=0; i<keys.length; i++) {
+        // loop over each named entity and replace with the proper equivalent.
+        for (i = 0; i < keys.length; i++) {
             key = keys[i];
             value = namedEntities[key];
-            regexp = new RegExp(key, "gi");
+            regexp = new RegExp(key, 'gi');
             if (regexp.test(serialized)) {
                 serialized = serialized.replace(regexp, value);
             }
@@ -443,7 +458,7 @@ ctx.prototype.getSerializedSvg = function (fixNamedEntities) {
 
 /**
  * Returns the root svg
- * @return
+ * @return {root} root
  */
 ctx.prototype.getSvg = function () {
     return this.__root;
@@ -452,8 +467,8 @@ ctx.prototype.getSvg = function () {
  * Will generate a group tag.
  */
 ctx.prototype.save = function () {
-    var group = this.__createElement("g");
-    var parent = this.__closestGroupOrSvg();
+    const group = this.__createElement('g');
+    const parent = this.__closestGroupOrSvg();
     this.__groupStack.push(parent);
     parent.appendChild(group);
     this.__currentElement = group;
@@ -465,11 +480,11 @@ ctx.prototype.save = function () {
 ctx.prototype.restore = function () {
     this.__currentElement = this.__groupStack.pop();
     this.__currentElementsToStyle = null;
-    //Clearing canvas will make the poped group invalid, currentElement is set to the root group node.
+    // Clearing canvas will make the poped group invalid, currentElement is set to the root group node.
     if (!this.__currentElement) {
         this.__currentElement = this.__root.childNodes[1];
     }
-    var state = this.__stack.pop();
+    const state = this.__stack.pop();
     this.__applyStyleState(state);
 };
 
@@ -478,28 +493,28 @@ ctx.prototype.restore = function () {
  * @private
  */
 ctx.prototype.__addTransform = function (t) {
-    //if the current element has siblings, add another group
-    var parent = this.__closestGroupOrSvg();
+    // if the current element has siblings, add another group
+    const parent = this.__closestGroupOrSvg();
     if (parent.childNodes.length > 0) {
-        if (this.__currentElement.nodeName === "path") {
-            if (!this.__currentElementsToStyle) this.__currentElementsToStyle = {element: parent, children: []};
-            this.__currentElementsToStyle.children.push(this.__currentElement)
+        if (this.__currentElement.nodeName === 'path') {
+            if (!this.__currentElementsToStyle) this.__currentElementsToStyle = { element: parent, children: [] };
+            this.__currentElementsToStyle.children.push(this.__currentElement);
             this.__applyCurrentDefaultPath();
         }
 
-        var group = this.__createElement("g");
+        const group = this.__createElement('g');
         parent.appendChild(group);
         this.__currentElement = group;
     }
 
-    var transform = this.__currentElement.getAttribute("transform");
+    let transform = this.__currentElement.getAttribute('transform');
     if (transform) {
-        transform += " ";
+        transform += ' ';
     } else {
-        transform = "";
+        transform = '';
     }
     transform += t;
-    this.__currentElement.setAttribute("transform", transform);
+    this.__currentElement.setAttribute('transform', transform);
 };
 
 /**
@@ -509,43 +524,46 @@ ctx.prototype.scale = function (x, y) {
     if (y === undefined) {
         y = x;
     }
-    this.__addTransform(format("scale({x},{y})", {x:x, y:y}));
+    this.__addTransform(format('scale({x},{y})', { x, y }));
 };
 
 /**
  * rotates the current element
  */
 ctx.prototype.rotate = function (angle) {
-    var degrees = (angle * 180 / Math.PI);
-    this.__addTransform(format("rotate({angle},{cx},{cy})", {angle:degrees, cx:0, cy:0}));
+    const degrees = (angle * 180 / Math.PI);
+    this.__addTransform(format('rotate({angle},{cx},{cy})', { angle: degrees, cx: 0, cy: 0 }));
 };
 
 /**
  * translates the current element
  */
 ctx.prototype.translate = function (x, y) {
-    this.__addTransform(format("translate({x},{y})", {x:x,y:y}));
+    this.__addTransform(format('translate({x},{y})', { x, y }));
 };
 
 /**
  * applies a transform to the current element
  */
 ctx.prototype.transform = function (a, b, c, d, e, f) {
-    this.__addTransform(format("matrix({a},{b},{c},{d},{e},{f})", {a:a, b:b, c:c, d:d, e:e, f:f}));
+    this.__addTransform(format('matrix({a},{b},{c},{d},{e},{f})', {
+        a, b, c, d, e, f,
+    }));
 };
 
 /**
  * Create a new Path Element
  */
 ctx.prototype.beginPath = function () {
-    var path, parent;
+    let path; var
+        parent;
 
     // Note that there is only one current default path, it is not part of the drawing state.
     // See also: https://html.spec.whatwg.org/multipage/scripting.html#current-default-path
-    this.__currentDefaultPath = "";
+    this.__currentDefaultPath = '';
     this.__currentPosition = {};
 
-    path = this.__createElement("path", {}, true);
+    path = this.__createElement('path', {}, true);
     parent = this.__closestGroupOrSvg();
     parent.appendChild(path);
     this.__currentElement = path;
@@ -556,11 +574,11 @@ ctx.prototype.beginPath = function () {
  * @private
  */
 ctx.prototype.__applyCurrentDefaultPath = function () {
-    var currentElement = this.__currentElement;
-    if (currentElement.nodeName === "path") {
-        currentElement.setAttribute("d", this.__currentDefaultPath);
+    const currentElement = this.__currentElement;
+    if (currentElement.nodeName === 'path') {
+        currentElement.setAttribute('d', this.__currentDefaultPath);
     } else {
-        console.error("Attempted to apply path command to node", currentElement.nodeName);
+        console.error('Attempted to apply path command to node', currentElement.nodeName);
     }
 };
 
@@ -569,7 +587,7 @@ ctx.prototype.__applyCurrentDefaultPath = function () {
  * @private
  */
 ctx.prototype.__addPathCommand = function (command) {
-    this.__currentDefaultPath += " ";
+    this.__currentDefaultPath += ' ';
     this.__currentDefaultPath += command;
 };
 
@@ -577,14 +595,14 @@ ctx.prototype.__addPathCommand = function (command) {
  * Adds the move command to the current path element,
  * if the currentPathElement is not empty create a new path element
  */
-ctx.prototype.moveTo = function (x,y) {
-    if (this.__currentElement.nodeName !== "path") {
+ctx.prototype.moveTo = function (x, y) {
+    if (this.__currentElement.nodeName !== 'path') {
         this.beginPath();
     }
 
     // creates a new subpath with the given point
-    this.__currentPosition = {x: x, y: y};
-    this.__addPathCommand(format("M {x} {y}", {x:x, y:y}));
+    this.__currentPosition = { x, y };
+    this.__addPathCommand(format('M {x} {y}', { x, y }));
 };
 
 /**
@@ -592,7 +610,7 @@ ctx.prototype.moveTo = function (x,y) {
  */
 ctx.prototype.closePath = function () {
     if (this.__currentDefaultPath) {
-        this.__addPathCommand("Z");
+        this.__addPathCommand('Z');
     }
 };
 
@@ -600,11 +618,11 @@ ctx.prototype.closePath = function () {
  * Adds a line to command
  */
 ctx.prototype.lineTo = function (x, y) {
-    this.__currentPosition = {x: x, y: y};
+    this.__currentPosition = { x, y };
     if (this.__currentDefaultPath.indexOf('M') > -1) {
-        this.__addPathCommand(format("L {x} {y}", {x:x, y:y}));
+        this.__addPathCommand(format('L {x} {y}', { x, y }));
     } else {
-        this.__addPathCommand(format("M {x} {y}", {x:x, y:y}));
+        this.__addPathCommand(format('M {x} {y}', { x, y }));
     }
 };
 
@@ -612,25 +630,30 @@ ctx.prototype.lineTo = function (x, y) {
  * Add a bezier command
  */
 ctx.prototype.bezierCurveTo = function (cp1x, cp1y, cp2x, cp2y, x, y) {
-    this.__currentPosition = {x: x, y: y};
-    this.__addPathCommand(format("C {cp1x} {cp1y} {cp2x} {cp2y} {x} {y}",
-        {cp1x:cp1x, cp1y:cp1y, cp2x:cp2x, cp2y:cp2y, x:x, y:y}));
+    this.__currentPosition = { x, y };
+    this.__addPathCommand(format('C {cp1x} {cp1y} {cp2x} {cp2y} {x} {y}',
+        {
+            cp1x, cp1y, cp2x, cp2y, x, y,
+        }));
 };
 
 /**
  * Adds a quadratic curve to command
  */
 ctx.prototype.quadraticCurveTo = function (cpx, cpy, x, y) {
-    this.__currentPosition = {x: x, y: y};
-    this.__addPathCommand(format("Q {cpx} {cpy} {x} {y}", {cpx:cpx, cpy:cpy, x:x, y:y}));
+    this.__currentPosition = { x, y };
+    this.__addPathCommand(format('Q {cpx} {cpy} {x} {y}', {
+        cpx, cpy, x, y,
+    }));
 };
 
 
 /**
  * Return a new normalized vector of given vector
+ * @category c2s
  */
-var normalize = function (vector) {
-    var len = Math.sqrt(vector[0] * vector[0] + vector[1] * vector[1]);
+const normalize = function (vector) {
+    const len = Math.sqrt(vector[0] * vector[0] + vector[1] * vector[1]);
     return [vector[0] / len, vector[1] / len];
 };
 
@@ -641,17 +664,17 @@ var normalize = function (vector) {
  */
 ctx.prototype.arcTo = function (x1, y1, x2, y2, radius) {
     // Let the point (x0, y0) be the last point in the subpath.
-    var x0 = this.__currentPosition && this.__currentPosition.x;
-    var y0 = this.__currentPosition && this.__currentPosition.y;
+    const x0 = this.__currentPosition && this.__currentPosition.x;
+    const y0 = this.__currentPosition && this.__currentPosition.y;
 
     // First ensure there is a subpath for (x1, y1).
-    if (typeof x0 == "undefined" || typeof y0 == "undefined") {
+    if (typeof x0 === 'undefined' || typeof y0 === 'undefined') {
         return;
     }
 
     // Negative values for radius must cause the implementation to throw an IndexSizeError exception.
     if (radius < 0) {
-        throw new Error("IndexSizeError: The radius provided (" + radius + ") is negative.");
+        throw new Error(`IndexSizeError: The radius provided (${radius}) is negative.`);
     }
 
     // If the point (x0, y0) is equal to the point (x1, y1),
@@ -669,8 +692,8 @@ ctx.prototype.arcTo = function (x1, y1, x2, y2, radius) {
     // Otherwise, if the points (x0, y0), (x1, y1), and (x2, y2) all lie on a single straight line,
     // then the method must add the point (x1, y1) to the subpath,
     // and connect that point to the previous point (x0, y0) by a straight line.
-    var unit_vec_p1_p0 = normalize([x0 - x1, y0 - y1]);
-    var unit_vec_p1_p2 = normalize([x2 - x1, y2 - y1]);
+    const unit_vec_p1_p0 = normalize([x0 - x1, y0 - y1]);
+    const unit_vec_p1_p2 = normalize([x2 - x1, y2 - y1]);
     if (unit_vec_p1_p0[0] * unit_vec_p1_p2[1] === unit_vec_p1_p0[1] * unit_vec_p1_p2[0]) {
         this.lineTo(x1, y1);
         return;
@@ -682,45 +705,44 @@ ctx.prototype.arcTo = function (x1, y1, x2, y2, radius) {
     // The points at which this circle touches these two lines are called the start and end tangent points respectively.
 
     // note that both vectors are unit vectors, so the length is 1
-    var cos = (unit_vec_p1_p0[0] * unit_vec_p1_p2[0] + unit_vec_p1_p0[1] * unit_vec_p1_p2[1]);
-    var theta = Math.acos(Math.abs(cos));
+    const cos = (unit_vec_p1_p0[0] * unit_vec_p1_p2[0] + unit_vec_p1_p0[1] * unit_vec_p1_p2[1]);
+    const theta = Math.acos(Math.abs(cos));
 
     // Calculate origin
-    var unit_vec_p1_origin = normalize([
+    const unit_vec_p1_origin = normalize([
         unit_vec_p1_p0[0] + unit_vec_p1_p2[0],
-        unit_vec_p1_p0[1] + unit_vec_p1_p2[1]
+        unit_vec_p1_p0[1] + unit_vec_p1_p2[1],
     ]);
-    var len_p1_origin = radius / Math.sin(theta / 2);
-    var x = x1 + len_p1_origin * unit_vec_p1_origin[0];
-    var y = y1 + len_p1_origin * unit_vec_p1_origin[1];
+    const len_p1_origin = radius / Math.sin(theta / 2);
+    const x = x1 + len_p1_origin * unit_vec_p1_origin[0];
+    const y = y1 + len_p1_origin * unit_vec_p1_origin[1];
 
     // Calculate start angle and end angle
     // rotate 90deg clockwise (note that y axis points to its down)
-    var unit_vec_origin_start_tangent = [
+    const unit_vec_origin_start_tangent = [
         -unit_vec_p1_p0[1],
-        unit_vec_p1_p0[0]
+        unit_vec_p1_p0[0],
     ];
     // rotate 90deg counter clockwise (note that y axis points to its down)
-    var unit_vec_origin_end_tangent = [
+    const unit_vec_origin_end_tangent = [
         unit_vec_p1_p2[1],
-        -unit_vec_p1_p2[0]
+        -unit_vec_p1_p2[0],
     ];
-    var getAngle = function (vector) {
+    const getAngle = function (vector) {
         // get angle (clockwise) between vector and (1, 0)
-        var x = vector[0];
-        var y = vector[1];
+        const x = vector[0];
+        const y = vector[1];
         if (y >= 0) { // note that y axis points to its down
             return Math.acos(x);
-        } else {
-            return -Math.acos(x);
         }
+        return -Math.acos(x);
     };
-    var startAngle = getAngle(unit_vec_origin_start_tangent);
-    var endAngle = getAngle(unit_vec_origin_end_tangent);
+    const startAngle = getAngle(unit_vec_origin_start_tangent);
+    const endAngle = getAngle(unit_vec_origin_end_tangent);
 
     // Connect the point (x0, y0) to the start tangent point by a straight line
     this.lineTo(x + unit_vec_origin_start_tangent[0] * radius,
-                y + unit_vec_origin_start_tangent[1] * radius);
+        y + unit_vec_origin_start_tangent[1] * radius);
 
     // Connect the start tangent point to the end tangent point by arc
     // and adding the end tangent point to the subpath.
@@ -731,35 +753,35 @@ ctx.prototype.arcTo = function (x1, y1, x2, y2, radius) {
  * Sets the stroke property on the current element
  */
 ctx.prototype.stroke = function () {
-    if (this.__currentElement.nodeName === "path") {
-        this.__currentElement.setAttribute("paint-order", "fill stroke markers");
+    if (this.__currentElement.nodeName === 'path') {
+        this.__currentElement.setAttribute('paint-order', 'fill stroke markers');
     }
     this.__applyCurrentDefaultPath();
-    this.__applyStyleToCurrentElement("stroke");
+    this.__applyStyleToCurrentElement('stroke');
 };
 
 /**
  * Sets fill properties on the current element
  */
 ctx.prototype.fill = function () {
-    if (this.__currentElement.nodeName === "path") {
-        this.__currentElement.setAttribute("paint-order", "stroke fill markers");
+    if (this.__currentElement.nodeName === 'path') {
+        this.__currentElement.setAttribute('paint-order', 'stroke fill markers');
     }
     this.__applyCurrentDefaultPath();
-    this.__applyStyleToCurrentElement("fill");
+    this.__applyStyleToCurrentElement('fill');
 };
 
 /**
  *  Adds a rectangle to the path.
  */
 ctx.prototype.rect = function (x, y, width, height) {
-    if (this.__currentElement.nodeName !== "path") {
+    if (this.__currentElement.nodeName !== 'path') {
         this.beginPath();
     }
     this.moveTo(x, y);
-    this.lineTo(x+width, y);
-    this.lineTo(x+width, y+height);
-    this.lineTo(x, y+height);
+    this.lineTo(x + width, y);
+    this.lineTo(x + width, y + height);
+    this.lineTo(x, y + height);
     this.lineTo(x, y);
     this.closePath();
 };
@@ -769,17 +791,18 @@ ctx.prototype.rect = function (x, y, width, height) {
  * adds a rectangle element
  */
 ctx.prototype.fillRect = function (x, y, width, height) {
-    var rect, parent;
-    rect = this.__createElement("rect", {
-        x : x,
-        y : y,
-        width : width,
-        height : height
+    let rect; var
+        parent;
+    rect = this.__createElement('rect', {
+        x,
+        y,
+        width,
+        height,
     }, true);
     parent = this.__closestGroupOrSvg();
     parent.appendChild(rect);
     this.__currentElement = rect;
-    this.__applyStyleToCurrentElement("fill");
+    this.__applyStyleToCurrentElement('fill');
 };
 
 /**
@@ -790,17 +813,18 @@ ctx.prototype.fillRect = function (x, y, width, height) {
  * @param height
  */
 ctx.prototype.strokeRect = function (x, y, width, height) {
-    var rect, parent;
-    rect = this.__createElement("rect", {
-        x : x,
-        y : y,
-        width : width,
-        height : height
+    let rect; var
+        parent;
+    rect = this.__createElement('rect', {
+        x,
+        y,
+        width,
+        height,
     }, true);
     parent = this.__closestGroupOrSvg();
     parent.appendChild(rect);
     this.__currentElement = rect;
-    this.__applyStyleToCurrentElement("stroke");
+    this.__applyStyleToCurrentElement('stroke');
 };
 
 
@@ -810,17 +834,17 @@ ctx.prototype.strokeRect = function (x, y, width, height) {
  * 2. remove all the childNodes of the root g element
  */
 ctx.prototype.__clearCanvas = function () {
-    var current = this.__closestGroupOrSvg(),
-        transform = current.getAttribute("transform");
-    var rootGroup = this.__root.childNodes[1];
-    var childNodes = rootGroup.childNodes;
-    for (var i = childNodes.length - 1; i >= 0; i--) {
+    const current = this.__closestGroupOrSvg();
+    const transform = current.getAttribute('transform');
+    const rootGroup = this.__root.childNodes[1];
+    const { childNodes } = rootGroup;
+    for (let i = childNodes.length - 1; i >= 0; i--) {
         if (childNodes[i]) {
             rootGroup.removeChild(childNodes[i]);
         }
     }
     this.__currentElement = rootGroup;
-    //reset __groupStack as all the child group nodes are all removed.
+    // reset __groupStack as all the child group nodes are all removed.
     this.__groupStack = [];
     if (transform) {
         this.__addTransform(transform);
@@ -831,18 +855,19 @@ ctx.prototype.__clearCanvas = function () {
  * "Clears" a canvas by just drawing a white rectangle in the current group.
  */
 ctx.prototype.clearRect = function (x, y, width, height) {
-    //clear entire canvas
+    // clear entire canvas
     if (x === 0 && y === 0 && width === this.width && height === this.height) {
         this.__clearCanvas();
         return;
     }
-    var rect, parent = this.__closestGroupOrSvg();
-    rect = this.__createElement("rect", {
-        x : x,
-        y : y,
-        width : width,
-        height : height,
-        fill : "#FFFFFF"
+    let rect; var
+        parent = this.__closestGroupOrSvg();
+    rect = this.__createElement('rect', {
+        x,
+        y,
+        width,
+        height,
+        fill: '#FFFFFF',
     }, true);
     parent.appendChild(rect);
 };
@@ -852,13 +877,13 @@ ctx.prototype.clearRect = function (x, y, width, height) {
  * Returns a canvas gradient object that has a reference to it's parent def
  */
 ctx.prototype.createLinearGradient = function (x1, y1, x2, y2) {
-    var grad = this.__createElement("linearGradient", {
-        id : randomString(this.__ids),
-        x1 : x1+"px",
-        x2 : x2+"px",
-        y1 : y1+"px",
-        y2 : y2+"px",
-        "gradientUnits" : "userSpaceOnUse"
+    const grad = this.__createElement('linearGradient', {
+        id: randomString(this.__ids),
+        x1: `${x1}px`,
+        x2: `${x2}px`,
+        y1: `${y1}px`,
+        y2: `${y2}px`,
+        gradientUnits: 'userSpaceOnUse',
     }, false);
     this.__defs.appendChild(grad);
     return new CanvasGradient(grad, this);
@@ -869,18 +894,17 @@ ctx.prototype.createLinearGradient = function (x1, y1, x2, y2) {
  * Returns a canvas gradient object that has a reference to it's parent def
  */
 ctx.prototype.createRadialGradient = function (x0, y0, r0, x1, y1, r1) {
-    var grad = this.__createElement("radialGradient", {
-        id : randomString(this.__ids),
-        cx : x1+"px",
-        cy : y1+"px",
-        r  : r1+"px",
-        fx : x0+"px",
-        fy : y0+"px",
-        "gradientUnits" : "userSpaceOnUse"
+    const grad = this.__createElement('radialGradient', {
+        id: randomString(this.__ids),
+        cx: `${x1}px`,
+        cy: `${y1}px`,
+        r: `${r1}px`,
+        fx: `${x0}px`,
+        fy: `${y0}px`,
+        gradientUnits: 'userSpaceOnUse',
     }, false);
     this.__defs.appendChild(grad);
     return new CanvasGradient(grad, this);
-
 };
 
 /**
@@ -888,23 +912,23 @@ ctx.prototype.createRadialGradient = function (x0, y0, r0, x1, y1, r1) {
  * @private
  */
 ctx.prototype.__parseFont = function () {
-    var regex = /^\s*(?=(?:(?:[-a-z]+\s*){0,2}(italic|oblique))?)(?=(?:(?:[-a-z]+\s*){0,2}(small-caps))?)(?=(?:(?:[-a-z]+\s*){0,2}(bold(?:er)?|lighter|[1-9]00))?)(?:(?:normal|\1|\2|\3)\s*){0,3}((?:xx?-)?(?:small|large)|medium|smaller|larger|[.\d]+(?:\%|in|[cem]m|ex|p[ctx]))(?:\s*\/\s*(normal|[.\d]+(?:\%|in|[cem]m|ex|p[ctx])))?\s*([-,\'\"\sa-z0-9]+?)\s*$/i;
-    var fontPart = regex.exec( this.font );
-    var data = {
-        style : fontPart[1] || 'normal',
-        size : fontPart[4] || '10px',
-        family : fontPart[6] || 'sans-serif',
+    const regex = /^\s*(?=(?:(?:[-a-z]+\s*){0,2}(italic|oblique))?)(?=(?:(?:[-a-z]+\s*){0,2}(small-caps))?)(?=(?:(?:[-a-z]+\s*){0,2}(bold(?:er)?|lighter|[1-9]00))?)(?:(?:normal|\1|\2|\3)\s*){0,3}((?:xx?-)?(?:small|large)|medium|smaller|larger|[.\d]+(?:\%|in|[cem]m|ex|p[ctx]))(?:\s*\/\s*(normal|[.\d]+(?:\%|in|[cem]m|ex|p[ctx])))?\s*([-,\'\"\sa-z0-9]+?)\s*$/i;
+    const fontPart = regex.exec(this.font);
+    const data = {
+        style: fontPart[1] || 'normal',
+        size: fontPart[4] || '10px',
+        family: fontPart[6] || 'sans-serif',
         weight: fontPart[3] || 'normal',
-        decoration : fontPart[2] || 'normal',
-        href : null
+        decoration: fontPart[2] || 'normal',
+        href: null,
     };
 
-    //canvas doesn't support underline natively, but we can pass this attribute
-    if (this.__fontUnderline === "underline") {
-        data.decoration = "underline";
+    // canvas doesn't support underline natively, but we can pass this attribute
+    if (this.__fontUnderline === 'underline') {
+        data.decoration = 'underline';
     }
 
-    //canvas also doesn't support linking, but we can pass this as well
+    // canvas also doesn't support linking, but we can pass this as well
     if (this.__fontHref) {
         data.href = this.__fontHref;
     }
@@ -921,8 +945,8 @@ ctx.prototype.__parseFont = function () {
  */
 ctx.prototype.__wrapTextLink = function (font, element) {
     if (font.href) {
-        var a = this.__createElement("a");
-        a.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", font.href);
+        const a = this.__createElement('a');
+        a.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', font.href);
         a.appendChild(element);
         return a;
     }
@@ -938,24 +962,24 @@ ctx.prototype.__wrapTextLink = function (font, element) {
  * @private
  */
 ctx.prototype.__applyText = function (text, x, y, action) {
-    var font = this.__parseFont(),
-        parent = this.__closestGroupOrSvg(),
-        textElement = this.__createElement("text", {
-            "font-family" : font.family,
-            "font-size" : font.size,
-            "font-style" : font.style,
-            "font-weight" : font.weight,
-            "text-decoration" : font.decoration,
-            "x" : x,
-            "y" : y,
-            "text-anchor": getTextAnchor(this.textAlign),
-            "dominant-baseline": getDominantBaseline(this.textBaseline)
-        }, true);
+    const font = this.__parseFont();
+    const parent = this.__closestGroupOrSvg();
+    const textElement = this.__createElement('text', {
+        'font-family': font.family,
+        'font-size': font.size,
+        'font-style': font.style,
+        'font-weight': font.weight,
+        'text-decoration': font.decoration,
+        x,
+        y,
+        'text-anchor': getTextAnchor(this.textAlign),
+        'dominant-baseline': getDominantBaseline(this.textBaseline),
+    }, true);
 
     textElement.appendChild(this.__document.createTextNode(text));
     this.__currentElement = textElement;
     this.__applyStyleToCurrentElement(action);
-    parent.appendChild(this.__wrapTextLink(font,textElement));
+    parent.appendChild(this.__wrapTextLink(font, textElement));
 };
 
 /**
@@ -965,7 +989,7 @@ ctx.prototype.__applyText = function (text, x, y, action) {
  * @param y
  */
 ctx.prototype.fillText = function (text, x, y) {
-    this.__applyText(text, x, y, "fill");
+    this.__applyText(text, x, y, 'fill');
 };
 
 /**
@@ -975,7 +999,7 @@ ctx.prototype.fillText = function (text, x, y) {
  * @param y
  */
 ctx.prototype.strokeText = function (text, x, y) {
-    this.__applyText(text, x, y, "stroke");
+    this.__applyText(text, x, y, 'stroke');
 };
 
 /**
@@ -996,23 +1020,23 @@ ctx.prototype.arc = function (x, y, radius, startAngle, endAngle, counterClockwi
     if (startAngle === endAngle) {
         return;
     }
-    startAngle = startAngle % (2*Math.PI);
-    endAngle = endAngle % (2*Math.PI);
+    startAngle %= (2 * Math.PI);
+    endAngle %= (2 * Math.PI);
     if (startAngle === endAngle) {
-        //circle time! subtract some of the angle so svg is happy (svg elliptical arc can't draw a full circle)
-        endAngle = ((endAngle + (2*Math.PI)) - 0.001 * (counterClockwise ? -1 : 1)) % (2*Math.PI);
+        // circle time! subtract some of the angle so svg is happy (svg elliptical arc can't draw a full circle)
+        endAngle = ((endAngle + (2 * Math.PI)) - 0.001 * (counterClockwise ? -1 : 1)) % (2 * Math.PI);
     }
-    var endX = x+radius*Math.cos(endAngle),
-        endY = y+radius*Math.sin(endAngle),
-        startX = x+radius*Math.cos(startAngle),
-        startY = y+radius*Math.sin(startAngle),
-        sweepFlag = counterClockwise ? 0 : 1,
-        largeArcFlag = 0,
-        diff = endAngle - startAngle;
+    const endX = x + radius * Math.cos(endAngle);
+    const endY = y + radius * Math.sin(endAngle);
+    const startX = x + radius * Math.cos(startAngle);
+    const startY = y + radius * Math.sin(startAngle);
+    const sweepFlag = counterClockwise ? 0 : 1;
+    let largeArcFlag = 0;
+    let diff = endAngle - startAngle;
 
     // https://github.com/gliffy/canvas2svg/issues/4
     if (diff < 0) {
-        diff += 2*Math.PI;
+        diff += 2 * Math.PI;
     }
 
     if (counterClockwise) {
@@ -1022,37 +1046,38 @@ ctx.prototype.arc = function (x, y, radius, startAngle, endAngle, counterClockwi
     }
 
     this.lineTo(startX, startY);
-    this.__addPathCommand(format("A {rx} {ry} {xAxisRotation} {largeArcFlag} {sweepFlag} {endX} {endY}",
-        {rx:radius, ry:radius, xAxisRotation:0, largeArcFlag:largeArcFlag, sweepFlag:sweepFlag, endX:endX, endY:endY}));
+    this.__addPathCommand(format('A {rx} {ry} {xAxisRotation} {largeArcFlag} {sweepFlag} {endX} {endY}',
+        {
+            rx: radius, ry: radius, xAxisRotation: 0, largeArcFlag, sweepFlag, endX, endY,
+        }));
 
-    this.__currentPosition = {x: endX, y: endY};
+    this.__currentPosition = { x: endX, y: endY };
 };
 
 /**
  * Generates a ClipPath from the clip command.
  */
 ctx.prototype.clip = function () {
-    var group = this.__closestGroupOrSvg(),
-        clipPath = this.__createElement("clipPath"),
-        id =  randomString(this.__ids),
-        newGroup = this.__createElement("g");
+    const group = this.__closestGroupOrSvg();
+    const clipPath = this.__createElement('clipPath');
+    const id = randomString(this.__ids);
+    const newGroup = this.__createElement('g');
 
     this.__applyCurrentDefaultPath();
     group.removeChild(this.__currentElement);
-    clipPath.setAttribute("id", id);
+    clipPath.setAttribute('id', id);
     clipPath.appendChild(this.__currentElement);
 
     this.__defs.appendChild(clipPath);
 
-    //set the clip path to this group
-    group.setAttribute("clip-path", format("url(#{id})", {id:id}));
+    // set the clip path to this group
+    group.setAttribute('clip-path', format('url(#{id})', { id }));
 
-    //clip paths can be scaled and transformed, we need to add another wrapper group to avoid later transformations
+    // clip paths can be scaled and transformed, we need to add another wrapper group to avoid later transformations
     // to this path
     group.appendChild(newGroup);
 
     this.__currentElement = newGroup;
-
 };
 
 /**
@@ -1061,11 +1086,12 @@ ctx.prototype.clip = function () {
  * http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#dom-context-2d-drawimage
  */
 ctx.prototype.drawImage = function () {
-    //convert arguments to a real array
-    var args = Array.prototype.slice.call(arguments),
-        image=args[0],
-        dx, dy, dw, dh, sx=0, sy=0, sw, sh, parent, svg, defs, group,
-        currentElement, svgImage, canvas, context, id;
+    // convert arguments to a real array
+    const args = Array.prototype.slice.call(arguments);
+    let image = args[0];
+    let dx; let dy; let dw; let dh; let sx = 0; let sy = 0; let sw; let sh; let parent; let svg; let defs; let group;
+    let currentElement; let svgImage; let canvas; let context; var
+        id;
 
     if (args.length === 3) {
         dx = args[1];
@@ -1091,56 +1117,56 @@ ctx.prototype.drawImage = function () {
         dw = args[7];
         dh = args[8];
     } else {
-        throw new Error("Inavlid number of arguments passed to drawImage: " + arguments.length);
+        throw new Error(`Inavlid number of arguments passed to drawImage: ${arguments.length}`);
     }
 
     parent = this.__closestGroupOrSvg();
     currentElement = this.__currentElement;
-    var translateDirective = "translate(" + dx + ", " + dy + ")";
+    const translateDirective = `translate(${dx}, ${dy})`;
     if (image instanceof ctx) {
-        //canvas2svg mock canvas context. In the future we may want to clone nodes instead.
-        //also I'm currently ignoring dw, dh, sw, sh, sx, sy for a mock context.
+        // canvas2svg mock canvas context. In the future we may want to clone nodes instead.
+        // also I'm currently ignoring dw, dh, sw, sh, sx, sy for a mock context.
         svg = image.getSvg().cloneNode(true);
         if (svg.childNodes && svg.childNodes.length > 1) {
             defs = svg.childNodes[0];
-            while(defs.childNodes.length) {
-                id = defs.childNodes[0].getAttribute("id");
+            while (defs.childNodes.length) {
+                id = defs.childNodes[0].getAttribute('id');
                 this.__ids[id] = id;
                 this.__defs.appendChild(defs.childNodes[0]);
             }
             group = svg.childNodes[1];
             if (group) {
-                //save original transform
-                var originTransform = group.getAttribute("transform");
-                var transformDirective;
+                // save original transform
+                const originTransform = group.getAttribute('transform');
+                let transformDirective;
                 if (originTransform) {
-                    transformDirective = originTransform+" "+translateDirective;
+                    transformDirective = `${originTransform} ${translateDirective}`;
                 } else {
                     transformDirective = translateDirective;
                 }
-                group.setAttribute("transform", transformDirective);
+                group.setAttribute('transform', transformDirective);
                 parent.appendChild(group);
             }
         }
-    } else if (image.nodeName === "CANVAS" || image.nodeName === "IMG") {
-        //canvas or image
-        svgImage = this.__createElement("image");
-        svgImage.setAttribute("width", dw);
-        svgImage.setAttribute("height", dh);
-        svgImage.setAttribute("preserveAspectRatio", "none");
+    } else if (image.nodeName === 'CANVAS' || image.nodeName === 'IMG') {
+        // canvas or image
+        svgImage = this.__createElement('image');
+        svgImage.setAttribute('width', dw);
+        svgImage.setAttribute('height', dh);
+        svgImage.setAttribute('preserveAspectRatio', 'none');
 
         if (sx || sy || sw !== image.width || sh !== image.height) {
-            //crop the image using a temporary canvas
-            canvas = this.__document.createElement("canvas");
+            // crop the image using a temporary canvas
+            canvas = this.__document.createElement('canvas');
             canvas.width = dw;
             canvas.height = dh;
-            context = canvas.getContext("2d");
+            context = canvas.getContext('2d');
             context.drawImage(image, sx, sy, sw, sh, 0, 0, dw, dh);
             image = canvas;
         }
-        svgImage.setAttribute("transform", translateDirective);
-        svgImage.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href",
-            image.nodeName === "CANVAS" ? image.toDataURL() : image.getAttribute("src"));
+        svgImage.setAttribute('transform', translateDirective);
+        svgImage.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href',
+            image.nodeName === 'CANVAS' ? image.toDataURL() : image.getAttribute('src'));
         parent.appendChild(svgImage);
     }
 };
@@ -1149,17 +1175,17 @@ ctx.prototype.drawImage = function () {
  * Generates a pattern tag
  */
 ctx.prototype.createPattern = function (image, repetition) {
-    var pattern = this.__document.createElementNS("http://www.w3.org/2000/svg", "pattern"), id = randomString(this.__ids),
-        img;
-    pattern.setAttribute("id", id);
-    pattern.setAttribute("width", image.width);
-    pattern.setAttribute("height", image.height);
-    if (image.nodeName === "CANVAS" || image.nodeName === "IMG") {
-        img = this.__document.createElementNS("http://www.w3.org/2000/svg", "image");
-        img.setAttribute("width", image.width);
-        img.setAttribute("height", image.height);
-        img.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href",
-            image.nodeName === "CANVAS" ? image.toDataURL() : image.getAttribute("src"));
+    const pattern = this.__document.createElementNS('http://www.w3.org/2000/svg', 'pattern'); const id = randomString(this.__ids);
+    let img;
+    pattern.setAttribute('id', id);
+    pattern.setAttribute('width', image.width);
+    pattern.setAttribute('height', image.height);
+    if (image.nodeName === 'CANVAS' || image.nodeName === 'IMG') {
+        img = this.__document.createElementNS('http://www.w3.org/2000/svg', 'image');
+        img.setAttribute('width', image.width);
+        img.setAttribute('height', image.height);
+        img.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href',
+            image.nodeName === 'CANVAS' ? image.toDataURL() : image.getAttribute('src'));
         pattern.appendChild(img);
         this.__defs.appendChild(pattern);
     } else if (image instanceof ctx) {
@@ -1171,7 +1197,7 @@ ctx.prototype.createPattern = function (image, repetition) {
 
 ctx.prototype.setLineDash = function (dashArray) {
     if (dashArray && dashArray.length > 0) {
-        this.lineDash = dashArray.join(",");
+        this.lineDash = dashArray.join(',');
     } else {
         this.lineDash = null;
     }
@@ -1187,13 +1213,12 @@ ctx.prototype.putImageData = function () {};
 ctx.prototype.globalCompositeOperation = function () {};
 ctx.prototype.setTransform = function () {};
 
-//add options for alternative namespace
-if (typeof window === "object") {
+// add options for alternative namespace
+if (typeof window === 'object') {
     window.C2S = ctx;
 }
 
 // CommonJS/Browserify
-if (typeof module === "object" && typeof module.exports === "object") {
+if (typeof module === 'object' && typeof module.exports === 'object') {
     module.exports = ctx;
 }
-
diff --git a/src/canvasApi.js b/src/canvasApi.js
index 648175a..7cfb1aa 100644
--- a/src/canvasApi.js
+++ b/src/canvasApi.js
@@ -1,40 +1,74 @@
-import { backgroundArea } from "./backgroundArea";
-import { simulationArea } from "./simulationArea";
-import { findDimensions } from "./engine";
+/* eslint-disable no-param-reassign */
+import backgroundArea from './backgroundArea';
+import simulationArea from './simulationArea';
+import miniMapArea, { removeMiniMap, updatelastMinimapShown } from './minimap';
+
+const unit = 10;
+
+export function findDimensions(scope = globalScope) {
+    let totalObjects = 0;
+    simulationArea.minWidth = undefined;
+    simulationArea.maxWidth = undefined;
+    simulationArea.minHeight = undefined;
+    simulationArea.maxHeight = undefined;
+    for (let i = 0; i < updateOrder.length; i++) {
+        if (updateOrder[i] !== 'wires') {
+            for (let j = 0; j < scope[updateOrder[i]].length; j++) {
+                totalObjects += 1;
+                const obj = scope[updateOrder[i]][j];
+                if (totalObjects === 1) {
+                    simulationArea.minWidth = obj.absX();
+                    simulationArea.minHeight = obj.absY();
+                    simulationArea.maxWidth = obj.absX();
+                    simulationArea.maxHeight = obj.absY();
+                }
+                if (obj.objectType !== 'Node') {
+                    if (obj.y - obj.upDimensionY < simulationArea.minHeight) { simulationArea.minHeight = obj.y - obj.upDimensionY; }
+                    if (obj.y + obj.downDimensionY > simulationArea.maxHeight) { simulationArea.maxHeight = obj.y + obj.downDimensionY; }
+                    if (obj.x - obj.leftDimensionX < simulationArea.minWidth) { simulationArea.minWidth = obj.x - obj.leftDimensionX; }
+                    if (obj.x + obj.rightDimensionX > simulationArea.maxWidth) { simulationArea.maxWidth = obj.x + obj.rightDimensionX; }
+                } else {
+                    if (obj.absY() < simulationArea.minHeight) { simulationArea.minHeight = obj.absY(); }
+                    if (obj.absY() > simulationArea.maxHeight) { simulationArea.maxHeight = obj.absY(); }
+                    if (obj.absX() < simulationArea.minWidth) { simulationArea.minWidth = obj.absX(); }
+                    if (obj.absX() > simulationArea.maxWidth) { simulationArea.maxWidth = obj.absX(); }
+                }
+            }
+        }
+    }
+    simulationArea.objectList = updateOrder;
+}
+
+
 // Function used to change the zoom level wrt to a point
 // fn to change scale (zoom) - It also shifts origin so that the position
 // of the object in focus doesn't change
-window.lastMiniMapShown = undefined
-
-
 export function changeScale(delta, xx, yy, method = 1) {
-
     // method = 3/2 - Zoom wrt center of screen
     // method = 1 - Zoom wrt position of mouse
     // Otherwise zoom wrt to selected object
 
-    if (method == 3) {
-        xx = (width / 2 - globalScope.ox) / globalScope.scale
-        yy = (height / 2 - globalScope.oy) / globalScope.scale
-    }
-    else if (xx === undefined || yy === undefined || xx == 'zoomButton' || yy == 'zoomButton') {
-        if (simulationArea.lastSelected && simulationArea.lastSelected.objectType != "Wire") { // selected object
+    if (method === 3) {
+        xx = (width / 2 - globalScope.ox) / globalScope.scale;
+        yy = (height / 2 - globalScope.oy) / globalScope.scale;
+    } else if (xx === undefined || yy === undefined || xx === 'zoomButton' || yy === 'zoomButton') {
+        if (simulationArea.lastSelected && simulationArea.lastSelected.objectType !== 'Wire') { // selected object
             xx = simulationArea.lastSelected.x;
             yy = simulationArea.lastSelected.y;
-        } else { //mouse location
-            if (method == 1) {
+        } else { // mouse location
+            // eslint-disable-next-line no-lonely-if
+            if (method === 1) {
                 xx = simulationArea.mouseX;
                 yy = simulationArea.mouseY;
-            }
-            else if (method == 2) {
-                xx = (width / 2 - globalScope.ox) / globalScope.scale
-                yy = (height / 2 - globalScope.oy) / globalScope.scale
+            } else if (method === 2) {
+                xx = (width / 2 - globalScope.ox) / globalScope.scale;
+                yy = (height / 2 - globalScope.oy) / globalScope.scale;
             }
         }
     }
 
 
-    var oldScale = globalScope.scale;
+    const oldScale = globalScope.scale;
     globalScope.scale = Math.max(0.5, Math.min(4 * DPR, globalScope.scale + delta));
     globalScope.scale = Math.round(globalScope.scale * 10) / 10;
     globalScope.ox -= Math.round(xx * (globalScope.scale - oldScale)); // Shift accordingly, so that we zoom wrt to the selected point
@@ -47,75 +81,69 @@ export function changeScale(delta, xx, yy, method = 1) {
         findDimensions(globalScope);
         miniMapArea.setup();
         $('#miniMap').show();
-        lastMiniMapShown = new Date().getTime();
+        updatelastMinimapShown();
         $('#miniMap').show();
         setTimeout(removeMiniMap, 2000);
     }
-
-
 }
-
-//fn to draw Dots on screen
-//the function is called only when the zoom level or size of screen changes.
+// fn to draw Dots on screen
+// the function is called only when the zoom level or size of screen changes.
 // Otherwise for normal panning, the canvas itself is moved to give the illusion of movement
 
 export function dots(dots = true, transparentBackground = false, force = false) {
+    const scale = unit * globalScope.scale;
+    const ox = globalScope.ox % scale; // offset
+    const oy = globalScope.oy % scale; // offset
 
-    var scale = unit * globalScope.scale;
-    var ox = globalScope.ox % scale; //offset
-    var oy = globalScope.oy % scale; //offset
-
-    document.getElementById("backgroundArea").style.left = (ox - scale) / DPR;
-    document.getElementById("backgroundArea").style.top = (oy - scale) / DPR;
-    if (globalScope.scale == simulationArea.prevScale && !force) return;
+    document.getElementById('backgroundArea').style.left = (ox - scale) / DPR;
+    document.getElementById('backgroundArea').style.top = (oy - scale) / DPR;
+    if (globalScope.scale === simulationArea.prevScale && !force) return;
 
     if (!backgroundArea.context) return;
     simulationArea.prevScale = globalScope.scale;
 
-    var canvasWidth = backgroundArea.canvas.width; //max X distance
-    var canvasHeight = backgroundArea.canvas.height; //max Y distance
+    const canvasWidth = backgroundArea.canvas.width; // max X distance
+    const canvasHeight = backgroundArea.canvas.height; // max Y distance
 
-    var ctx = backgroundArea.context;
+    const ctx = backgroundArea.context;
     ctx.beginPath();
     backgroundArea.clear();
-    ctx.strokeStyle = "#eee";
+    ctx.strokeStyle = '#eee';
     ctx.lineWidth = 1;
     if (!transparentBackground) {
-        ctx.fillStyle = "white";
+        ctx.fillStyle = 'white';
         ctx.rect(0, 0, canvasWidth, canvasHeight);
         ctx.fill();
     }
 
 
-    var correction = 0.5 * (ctx.lineWidth % 2);
-    for (var i = 0; i < canvasWidth; i += scale) {
+    const correction = 0.5 * (ctx.lineWidth % 2);
+    for (let i = 0; i < canvasWidth; i += scale) {
         ctx.moveTo(Math.round(i + correction) - correction, 0);
         ctx.lineTo(Math.round(i + correction) - correction, canvasHeight);
     }
-    for (var j = 0; j < canvasHeight; j += scale) {
+    for (let j = 0; j < canvasHeight; j += scale) {
         ctx.moveTo(0, Math.round(j + correction) - correction);
         ctx.lineTo(canvasWidth, Math.round(j + correction) - correction);
     }
     ctx.stroke();
 
 
-    return;
-
     // Old Code
     // function drawPixel(x, y, r, g, b, a) {
-    //     var index = (x + y * canvasWidth) * 4;
+    //     let index = (x + y * canvasWidth) * 4;
     //     canvasData.data[index + 0] = r;
     //     canvasData.data[index + 1] = g;
     //     canvasData.data[index + 2] = b;
     //     canvasData.data[index + 3] = a;
     // }
     // if (dots) {
-    //     var canvasData = ctx.getImageData(0, 0, canvasWidth, canvasHeight);
+    //     let canvasData = ctx.getImageData(0, 0, canvasWidth, canvasHeight);
     //
     //
     //
-    //     for (var i = 0 + ox; i < canvasWidth; i += scale)
-    //         for (var j = 0 + oy; j < canvasHeight; j += scale)
+    //     for (let i = 0 + ox; i < canvasWidth; i += scale)
+    //         for (let j = 0 + oy; j < canvasHeight; j += scale)
     //             drawPixel(i, j, 0, 0, 0, 255);
     //     ctx.putImageData(canvasData, 0, 0);
     // }
@@ -126,128 +154,119 @@ export function dots(dots = true, transparentBackground = false, force = false)
 // direction is used to abstract rotation of everything by a certain angle
 // Possible values for direction = "RIGHT" (default), "LEFT", "UP", "DOWN"
 
-function bezierCurveTo(x1, y1, x2, y2, x3, y3, xx, yy, dir) {
+export function bezierCurveTo(x1, y1, x2, y2, x3, y3, xx, yy, dir) {
     [x1, y1] = rotate(x1, y1, dir);
     [x2, y2] = rotate(x2, y2, dir);
     [x3, y3] = rotate(x3, y3, dir);
-    var ox = globalScope.ox;
-    var oy = globalScope.oy;
+    const { ox } = globalScope;
+    const { oy } = globalScope;
     x1 *= globalScope.scale;
     y1 *= globalScope.scale;
     x2 *= globalScope.scale;
     y2 *= globalScope.scale;
     x3 *= globalScope.scale;
     y3 *= globalScope.scale;
-    xx = xx * globalScope.scale;
-    yy = yy * globalScope.scale;
+    xx *= globalScope.scale;
+    yy *= globalScope.scale;
+    const ctx = simulationArea.context;
     ctx.bezierCurveTo(Math.round(xx + ox + x1), Math.round(yy + oy + y1), Math.round(xx + ox + x2), Math.round(yy + oy + y2), Math.round(xx + ox + x3), Math.round(yy + oy + y3));
 }
 
 export function moveTo(ctx, x1, y1, xx, yy, dir, bypass = false) {
-    var correction = 0.5 * (ctx.lineWidth % 2);
-    let newX
-    let newY 
+    const correction = 0.5 * (ctx.lineWidth % 2);
+    let newX;
+    let newY;
     [newX, newY] = rotate(x1, y1, dir);
-    newX = newX * globalScope.scale;
-    newY = newY * globalScope.scale;
-    xx = xx * globalScope.scale;
-    yy = yy * globalScope.scale;
-    if (bypass)
-        ctx.moveTo(xx + globalScope.ox + newX, yy + globalScope.oy + newY);
-    else
-        ctx.moveTo(Math.round(xx + globalScope.ox + newX - correction) + correction, Math.round(yy + globalScope.oy + newY - correction) + correction);
+    newX *= globalScope.scale;
+    newY *= globalScope.scale;
+    xx *= globalScope.scale;
+    yy *= globalScope.scale;
+    if (bypass) { ctx.moveTo(xx + globalScope.ox + newX, yy + globalScope.oy + newY); } else { ctx.moveTo(Math.round(xx + globalScope.ox + newX - correction) + correction, Math.round(yy + globalScope.oy + newY - correction) + correction); }
 }
 
 export function lineTo(ctx, x1, y1, xx, yy, dir) {
-    let newX
-    let newY 
+    let newX;
+    let newY;
 
-    var correction = 0.5 * (ctx.lineWidth % 2);
+    const correction = 0.5 * (ctx.lineWidth % 2);
     [newX, newY] = rotate(x1, y1, dir);
-    newX = newX * globalScope.scale;
-    newY = newY * globalScope.scale;
-    xx = xx * globalScope.scale;
-    yy = yy * globalScope.scale;
+    newX *= globalScope.scale;
+    newY *= globalScope.scale;
+    xx *= globalScope.scale;
+    yy *= globalScope.scale;
     ctx.lineTo(Math.round(xx + globalScope.ox + newX - correction) + correction, Math.round(yy + globalScope.oy + newY - correction) + correction);
 }
 
 export function arc(ctx, sx, sy, radius, start, stop, xx, yy, dir) {
-
-    //ox-x of origin, xx- x of element , sx - shift in x from element
-    let Sx,Sy,newStart,newStop,counterClock 
-
-    var correction = 0.5 * (ctx.lineWidth % 2);
+    // ox-x of origin, xx- x of element , sx - shift in x from element
+    let Sx; let Sy; let newStart; let newStop; let counterClock;
+    const correction = 0.5 * (ctx.lineWidth % 2);
     [Sx, Sy] = rotate(sx, sy, dir);
-    Sx = Sx * globalScope.scale;
-    Sy = Sy * globalScope.scale;
-    xx = xx * globalScope.scale;
-    yy = yy * globalScope.scale;
+    Sx *= globalScope.scale;
+    Sy *= globalScope.scale;
+    xx *= globalScope.scale;
+    yy *= globalScope.scale;
     radius *= globalScope.scale;
     [newStart, newStop, counterClock] = rotateAngle(start, stop, dir);
     ctx.arc(Math.round(xx + globalScope.ox + Sx + correction) - correction, Math.round(yy + globalScope.oy + Sy + correction) - correction, Math.round(radius), newStart, newStop, counterClock);
 }
 
-function arc2(ctx, sx, sy, radius, start, stop, xx, yy, dir) {
-
-    //ox-x of origin, xx- x of element , sx - shift in x from element
-
-    var correction = 0.5 * (ctx.lineWidth % 2);
+export function arc2(ctx, sx, sy, radius, start, stop, xx, yy, dir) {
+    // ox-x of origin, xx- x of element , sx - shift in x from element
+    let Sx; let Sy; let newStart; let newStop; let counterClock;
+    const correction = 0.5 * (ctx.lineWidth % 2);
     [Sx, Sy] = rotate(sx, sy, dir);
-    Sx = Sx * globalScope.scale;
-    Sy = Sy * globalScope.scale;
-    xx = xx * globalScope.scale;
-    yy = yy * globalScope.scale;
+    Sx *= globalScope.scale;
+    Sy *= globalScope.scale;
+    xx *= globalScope.scale;
+    yy *= globalScope.scale;
     radius *= globalScope.scale;
     [newStart, newStop, counterClock] = rotateAngle(start, stop, dir);
-    var pi = 0;
-    if (counterClock)
-        pi = Math.PI;
+    let pi = 0;
+    if (counterClock) { pi = Math.PI; }
     ctx.arc(Math.round(xx + globalScope.ox + Sx + correction) - correction, Math.round(yy + globalScope.oy + Sy + correction) - correction, Math.round(radius), newStart + pi, newStop + pi);
 }
 
-export function drawCircle2(ctx, sx, sy, radius, xx, yy, dir) { //ox-x of origin, xx- x of element , sx - shift in x from element
-
+export function drawCircle2(ctx, sx, sy, radius, xx, yy, dir) { // ox-x of origin, xx- x of element , sx - shift in x from element
+    let Sx;
+    let Sy;
     [Sx, Sy] = rotate(sx, sy, dir);
-    Sx = Sx * globalScope.scale;
-    Sy = Sy * globalScope.scale;
-    xx = xx * globalScope.scale;
-    yy = yy * globalScope.scale;
+    Sx *= globalScope.scale;
+    Sy *= globalScope.scale;
+    xx *= globalScope.scale;
+    yy *= globalScope.scale;
     radius *= globalScope.scale;
     ctx.arc(Math.round(xx + globalScope.ox + Sx), Math.round(yy + globalScope.oy + Sy), Math.round(radius), 0, 2 * Math.PI);
 }
 
-function rect(ctx, x1, y1, x2, y2) {
-    var correction = 0.5 * (ctx.lineWidth % 2)
-    x1 = x1 * globalScope.scale;
-    y1 = y1 * globalScope.scale;
-    x2 = x2 * globalScope.scale;
-    y2 = y2 * globalScope.scale;
+export function rect(ctx, x1, y1, x2, y2) {
+    const correction = 0.5 * (ctx.lineWidth % 2);
+    x1 *= globalScope.scale;
+    y1 *= globalScope.scale;
+    x2 *= globalScope.scale;
+    y2 *= globalScope.scale;
     ctx.rect(Math.round(globalScope.ox + x1 - correction) + correction, Math.round(globalScope.oy + y1 - correction) + correction, Math.round(x2), Math.round(y2));
 }
 
-function rect2(ctx, x1, y1, x2, y2, xx, yy, dir = "RIGHT") {
-    var correction = 0.5 * (ctx.lineWidth % 2);
+export function rect2(ctx, x1, y1, x2, y2, xx, yy, dir = 'RIGHT') {
+    const correction = 0.5 * (ctx.lineWidth % 2);
     [x1, y1] = rotate(x1, y1, dir);
     [x2, y2] = rotate(x2, y2, dir);
-    x1 = x1 * globalScope.scale;
-    y1 = y1 * globalScope.scale;
-    x2 = x2 * globalScope.scale;
-    y2 = y2 * globalScope.scale;
+    x1 *= globalScope.scale;
+    y1 *= globalScope.scale;
+    x2 *= globalScope.scale;
+    y2 *= globalScope.scale;
     xx *= globalScope.scale;
     yy *= globalScope.scale;
     ctx.rect(Math.round(globalScope.ox + xx + x1 - correction) + correction, Math.round(globalScope.oy + yy + y1 - correction) + correction, Math.round(x2), Math.round(y2));
 }
 
 
-function rotate(x1, y1, dir) {
-    if (dir == "LEFT")
-        return [-x1, y1];
-    else if (dir == "DOWN")
-        return [y1, x1];
-    else if (dir == "UP")
-        return [y1, -x1];
-    else
-        return [x1, y1];
+export function rotate(x1, y1, dir) {
+    if (dir === 'LEFT') { return [-x1, y1]; }
+    if (dir === 'DOWN') { return [y1, x1]; }
+    if (dir === 'UP') { return [y1, -x1]; }
+    return [x1, y1];
 }
 
 export function correctWidth(w) {
@@ -255,14 +274,10 @@ export function correctWidth(w) {
 }
 
 function rotateAngle(start, stop, dir) {
-    if (dir == "LEFT")
-        return [start, stop, true];
-    else if (dir == "DOWN")
-        return [start - Math.PI / 2, stop - Math.PI / 2, true];
-    else if (dir == "UP")
-        return [start - Math.PI / 2, stop - Math.PI / 2, false];
-    else
-        return [start, stop, false];
+    if (dir === 'LEFT') { return [start, stop, true]; }
+    if (dir === 'DOWN') { return [start - Math.PI / 2, stop - Math.PI / 2, true]; }
+    if (dir === 'UP') { return [start - Math.PI / 2, stop - Math.PI / 2, false]; }
+    return [start, stop, false];
 }
 
 export function drawLine(ctx, x1, y1, x2, y2, color, width) {
@@ -272,13 +287,13 @@ export function drawLine(ctx, x1, y1, x2, y2, color, width) {
     y2 *= globalScope.scale;
     ctx.beginPath();
     ctx.strokeStyle = color;
-    ctx.lineCap = "round";
-    ctx.lineWidth = correctWidth(width);//*globalScope.scale;
-    var correction = 0.5 * (ctx.lineWidth % 2);
-    var hCorrection = 0;
-    var vCorrection = 0;
-    if (y1 == y2) vCorrection = correction;
-    if (x1 == x2) hCorrection = correction;
+    ctx.lineCap = 'round';
+    ctx.lineWidth = correctWidth(width);//* globalScope.scale;
+    const correction = 0.5 * (ctx.lineWidth % 2);
+    let hCorrection = 0;
+    let vCorrection = 0;
+    if (y1 === y2) vCorrection = correction;
+    if (x1 === x2) hCorrection = correction;
     ctx.moveTo(Math.round(x1 + globalScope.ox + hCorrection) - hCorrection, Math.round(y1 + globalScope.oy + vCorrection) - vCorrection);
     ctx.lineTo(Math.round(x2 + globalScope.ox + hCorrection) - hCorrection, Math.round(y2 + globalScope.oy + vCorrection) - vCorrection);
     ctx.stroke();
@@ -286,14 +301,15 @@ export function drawLine(ctx, x1, y1, x2, y2, color, width) {
 
 // Checks if string color is a valid color using a hack
 function validColor(color) {
-    var $div = $("<div>");
-    $div.css("border", "1px solid " + color);
-    return ($div.css("border-color") != "")
+    const $div = $('<div>');
+    $div.css('border', `1px solid ${color}`);
+    return ($div.css('border-color') !== '');
 }
 
 // Helper function to color "RED" to RGBA
 function colorToRGBA(color) {
-    var cvs, ctx;
+    let cvs; let
+        ctx;
     cvs = document.createElement('canvas');
     cvs.height = 1;
     cvs.width = 1;
@@ -304,8 +320,8 @@ function colorToRGBA(color) {
 }
 
 export function drawCircle(ctx, x1, y1, r, color) {
-    x1 = x1 * globalScope.scale;
-    y1 = y1 * globalScope.scale;
+    x1 *= globalScope.scale;
+    y1 *= globalScope.scale;
     ctx.beginPath();
     ctx.fillStyle = color;
     ctx.arc(Math.round(x1 + globalScope.ox), Math.round(y1 + globalScope.oy), Math.round(r * globalScope.scale), 0, Math.PI * 2, false);
@@ -317,13 +333,13 @@ export function drawCircle(ctx, x1, y1, r, color) {
 export function canvasMessage(ctx, str, x1, y1, fontSize = 10) {
     if (!str || !str.length) return;
 
-    ctx.font = Math.round(fontSize * globalScope.scale) + "px Georgia";
-    ctx.textAlign = "center"
-    var width = ctx.measureText(str).width / globalScope.scale + 8;
-    var height = 13;
-    ctx.strokeStyle = "black";
+    ctx.font = `${Math.round(fontSize * globalScope.scale)}px Georgia`;
+    ctx.textAlign = 'center';
+    const width = ctx.measureText(str).width / globalScope.scale + 8;
+    const height = 13;
+    ctx.strokeStyle = 'black';
     ctx.lineWidth = correctWidth(1);
-    ctx.fillStyle = "yellow";
+    ctx.fillStyle = 'yellow';
     ctx.save();
     ctx.beginPath();
     rect(ctx, x1 - width / 2, y1 - height / 2 - 3, width, height);
@@ -334,93 +350,87 @@ export function canvasMessage(ctx, str, x1, y1, fontSize = 10) {
     ctx.stroke();
     ctx.fill();
     ctx.restore();
-    x1 = x1 * globalScope.scale;
-    y1 = y1 * globalScope.scale;
+    x1 *= globalScope.scale;
+    y1 *= globalScope.scale;
     ctx.beginPath();
-    ctx.fillStyle = "black";
+    ctx.fillStyle = 'black';
     ctx.fillText(str, Math.round(x1 + globalScope.ox), Math.round(y1 + globalScope.oy));
     ctx.fill();
 }
 
-function fillText(ctx, str, x1, y1, fontSize = 20) {
-    x1 = x1 * globalScope.scale;
-    y1 = y1 * globalScope.scale;
-    ctx.font = Math.round(fontSize * globalScope.scale) + "px Georgia";
+export function fillText(ctx, str, x1, y1, fontSize = 20) {
+    x1 *= globalScope.scale;
+    y1 *= globalScope.scale;
+    ctx.font = `${Math.round(fontSize * globalScope.scale)}px Georgia`;
     ctx.fillText(str, Math.round(x1 + globalScope.ox), Math.round(y1 + globalScope.oy));
 }
 
-function fillText2(ctx, str, x1, y1, xx, yy, dir) {
-
-    angle = {
-        "RIGHT": 0,
-        "LEFT": 0,
-        "DOWN": Math.PI / 2,
-        "UP": -Math.PI / 2,
-    }
-    x1 = x1 * globalScope.scale;
-    y1 = y1 * globalScope.scale;
+export function fillText2(ctx, str, x1, y1, xx, yy, dir) {
+    const angle = {
+        RIGHT: 0,
+        LEFT: 0,
+        DOWN: Math.PI / 2,
+        UP: -Math.PI / 2,
+    };
+    x1 *= globalScope.scale;
+    y1 *= globalScope.scale;
     [x1, y1] = rotate(x1, y1, dir);
-    xx = xx * globalScope.scale;
-    yy = yy * globalScope.scale;
+    xx *= globalScope.scale;
+    yy *= globalScope.scale;
 
-    ctx.font = Math.round(14 * globalScope.scale) + "px Georgia";
+    ctx.font = `${Math.round(14 * globalScope.scale)}px Georgia`;
     ctx.save();
     ctx.translate(Math.round(xx + x1 + globalScope.ox), Math.round(yy + y1 + globalScope.oy));
     ctx.rotate(angle[dir]);
-    ctx.textAlign = "center";
-    ctx.fillText(str, 0, Math.round(4 * globalScope.scale) * (1 - 0 * (+(dir == "DOWN"))));
+    ctx.textAlign = 'center';
+    ctx.fillText(str, 0, Math.round(4 * globalScope.scale) * (1 - 0 * (+(dir === 'DOWN'))));
     ctx.restore();
-
 }
 
-function fillText4(ctx, str, x1, y1, xx, yy, dir, fontSize = 14, textAlign = "center") {
-    angle = {
-        "RIGHT": 0,
-        "LEFT": 0,
-        "DOWN": Math.PI / 2,
-        "UP": -Math.PI / 2,
-    }
-    x1 = x1 * globalScope.scale;
-    y1 = y1 * globalScope.scale;
+export function fillText4(ctx, str, x1, y1, xx, yy, dir, fontSize = 14, textAlign = 'center') {
+    const angle = {
+        RIGHT: 0,
+        LEFT: 0,
+        DOWN: Math.PI / 2,
+        UP: -Math.PI / 2,
+    };
+    x1 *= globalScope.scale;
+    y1 *= globalScope.scale;
     [x1, y1] = rotate(x1, y1, dir);
-    xx = xx * globalScope.scale;
-    yy = yy * globalScope.scale;
+    xx *= globalScope.scale;
+    yy *= globalScope.scale;
 
-    ctx.font = Math.round(fontSize * globalScope.scale) + "px Georgia";
+    ctx.font = `${Math.round(fontSize * globalScope.scale)}px Georgia`;
     // ctx.font = 20+"px Georgia";
     ctx.textAlign = textAlign;
     ctx.fillText(str, xx + x1 + globalScope.ox, yy + y1 + globalScope.oy + Math.round(fontSize / 3 * globalScope.scale));
-
-
 }
 
-function fillText3(ctx, str, x1, y1, xx = 0, yy = 0, fontSize = 14, font = "Georgia", textAlign = "center") {
-
-    x1 = x1 * globalScope.scale;
-    y1 = y1 * globalScope.scale;
-    xx = xx * globalScope.scale;
-    yy = yy * globalScope.scale;
+export function fillText3(ctx, str, x1, y1, xx = 0, yy = 0, fontSize = 14, font = 'Georgia', textAlign = 'center') {
+    x1 *= globalScope.scale;
+    y1 *= globalScope.scale;
+    xx *= globalScope.scale;
+    yy *= globalScope.scale;
 
-    ctx.font = Math.round(fontSize * globalScope.scale) + "px " + font;
+    ctx.font = `${Math.round(fontSize * globalScope.scale)}px ${font}`;
     ctx.textAlign = textAlign;
     ctx.fillText(str, Math.round(xx + x1 + globalScope.ox), Math.round(yy + y1 + globalScope.oy));
-
 }
 
 
 export const oppositeDirection = {
-    "RIGHT": "LEFT",
-    "LEFT": "RIGHT",
-    "DOWN": "UP",
-    "UP": "DOWN",
-}
+    RIGHT: 'LEFT',
+    LEFT: 'RIGHT',
+    DOWN: 'UP',
+    UP: 'DOWN',
+};
 export const fixDirection = {
-    "right": "LEFT",
-    "left": "RIGHT",
-    "down": "UP",
-    "up": "DOWN",
-    "LEFT": "LEFT",
-    "RIGHT": "RIGHT",
-    "UP": "UP",
-    "DOWN": "DOWN",
-}
+    right: 'LEFT',
+    left: 'RIGHT',
+    down: 'UP',
+    up: 'DOWN',
+    LEFT: 'LEFT',
+    RIGHT: 'RIGHT',
+    UP: 'UP',
+    DOWN: 'DOWN',
+};
diff --git a/src/circuit.js b/src/circuit.js
index 5ad8755..880a2fa 100644
--- a/src/circuit.js
+++ b/src/circuit.js
@@ -1,178 +1,179 @@
-import CircuitElement from "./circuitElement";
-import * as metadata from './metadata.json'
-import { generateId,newCircuit,showMessage } from "./utils";
-import { backgroundArea } from "./backgroundArea";
-import { plotArea } from "./plotArea";
-import { simulationArea } from "./simulationArea";
-import { dots } from "./canvasApi";
-import { update } from "./engine";
-import { setupUI } from "./ux";
-import { startListeners } from "./listeners";
-function setupEnvironment() {
-    
-    const projectId = generateId();
-    const updateSimulation = true;
-    const DPR = window.devicePixelRatio || 1;
-    newCircuit("Main");
-    
-    window.data = {}
-    resetup();
+/* eslint-disable import/no-cycle */
+/* eslint-disable no-bitwise */
+/* eslint-disable guard-for-in */
+/* eslint-disable no-restricted-syntax */
+/* eslint-disable no-restricted-globals */
+/* eslint-disable consistent-return */
+/* eslint-disable func-names */
+/* eslint-disable array-callback-return */
+/* eslint-disable no-use-before-define */
+/* eslint-disable no-param-reassign */
+/* eslint-disable no-alert */
+import CircuitElement from './circuitElement';
+import simulationArea, { changeClockTime } from './simulationArea';
+import {
+    stripTags, uniq, showMessage, showError,
+} from './utils';
+import { findDimensions, dots } from './canvasApi';
+import { updateRestrictedElementsList } from './restrictedElementDiv';
+import { scheduleBackup } from './data/backupCircuit';
+import { showProperties } from './ux';
+import {
+    scheduleUpdate, updateSimulationSet,
+    updateCanvasSet, updateSubcircuitSet,
+    forceResetNodesSet, changeLightMode,
+} from './engine';
+import { toggleLayoutMode, layoutModeGet } from './layoutMode';
+import { setProjectName } from './data/save';
+import { changeClockEnable } from './sequential';
+import { changeInputSize } from './modules';
+
+export const circuitProperty = {
+    toggleLayoutMode,
+    setProjectName,
+    changeCircuitName,
+    changeClockTime,
+    deleteCurrentCircuit,
+    changeClockEnable,
+    changeInputSize,
+    changeLightMode,
+};
+export let scopeList = {};
+export function resetScopeList() {
+    scopeList = {};
 }
-var width
-var height
-export {
-    width,
-    height
-}
-export function hello() {
-    console.log("hello")
-}
-//to resize window and setup things
-function resetup() {
-    
-    DPR = window.devicePixelRatio || 1;
-    if (lightMode)
-    DPR = 1;
-    width = document.getElementById("simulationArea").clientWidth * DPR;
+/**
+ * Function used to change the current focusedCircuit
+ * Disables layoutMode if enabled
+ * Changes UI tab etc
+ * Sets flags to make updates, resets most of the things
+ * @param {string} id - identifier for circuit
+ * @category circuit
+ */
+export function switchCircuit(id) {
+    if (layoutModeGet()) { toggleLayoutMode(); }
+
+    // globalScope.fixLayout();
+    scheduleBackup();
+    if (id === globalScope.id) return;
+    $(`#${globalScope.id}`).removeClass('current');
+    $(`#${id}`).addClass('current');
+    simulationArea.lastSelected = undefined;
+    simulationArea.multipleObjectSelections = [];
+    simulationArea.copyList = [];
+    globalScope = scopeList[id];
+    updateSimulationSet(true);
+    updateSubcircuitSet(true);
+    forceResetNodesSet(true);
+    dots(false);
+    simulationArea.lastSelected = globalScope.root;
     if (!embed) {
-        height = (document.getElementById("simulation").clientHeight ) * DPR;
-    } else {
-        height = (document.getElementById("simulation").clientHeight) * DPR;
+        showProperties(simulationArea.lastSelected);
     }
-    
-    //setup simulationArea
-    backgroundArea.setup();
-    if (!embed) plotArea.setup();
-    simulationArea.setup();
-    
-    // update();
-    dots();
-    
-    document.getElementById("backgroundArea").style.height = height / DPR + 100;
-    document.getElementById("backgroundArea").style.width = width / DPR + 100;
-    document.getElementById("canvasArea").style.height = height / DPR;
-    simulationArea.canvas.width = width;
-    simulationArea.canvas.height = height;
-    backgroundArea.canvas.width = width + 100 * DPR;
-    backgroundArea.canvas.height = height + 100 * DPR;
-    if (!embed) {
-        plotArea.c.width = document.getElementById("plot").clientWidth;
-        plotArea.c.height = document.getElementById("plot").clientHeight
-    }
-    
-    updateCanvas = true;
-    update(); // INEFFICIENT, needs to be deprecated
-    simulationArea.prevScale = 0;
-    dots(true, false);
-}
-
-function setupElementLists() {
-    
-    $('#menu').empty();
-
-    window.circuitElementList = metadata.circuitElementList;
-    window.annotationList = metadata.annotationList;
-    window.inputList = metadata.inputList;
-    window.subCircuitInputList = metadata.subCircuitInputList;
-    window.moduleList = [...circuitElementList, ...annotationList]
-    window.updateOrder = ["wires", ...circuitElementList, "nodes", ...annotationList]; // Order of update
-    window.renderOrder = [...(moduleList.slice().reverse()), "wires", "allNodes"]; // Order of render
+    updateCanvasSet(true);
+    scheduleUpdate();
 
+    // to update the restricted elements information
+    updateRestrictedElementsList();
+}
 
-    function createIcon(element) {
-        return `<div class="icon logixModules" id="${element}" >
-            <img src= "img/${element}.svg" >
-            <p class="img__description">${element}</p>
-        </div>`;
+/**
+ * Deletes the current circuit
+ * Ensures that at least one circuit is there
+ * Ensures that no circuit depends on the current circuit
+ * Switched to a random circuit
+  * @category circuit
+*/
+function deleteCurrentCircuit(scopeId = globalScope.id) {
+    const scope = scopeList[scopeId];
+    if (Object.keys(scopeList).length <= 1) {
+        showError('At least 2 circuits need to be there in order to delete a circuit.');
+        return;
     }
-
-    let elementHierarchy = metadata.elementHierarchy;
-    for (let category in elementHierarchy) {
-        let htmlIcons = '';
-
-        let categoryData = elementHierarchy[category];
-
-        for (let i = 0; i < categoryData.length; i++) {
-            let element = categoryData[i];
-            htmlIcons += createIcon(element);
+    let dependencies = '';
+    for (id in scopeList) {
+        if (id != scope.id && scopeList[id].checkDependency(scope.id)) {
+            if (dependencies === '') {
+                dependencies = scopeList[id].name;
+            } else {
+                dependencies += `, ${scopeList[id].name}`;
+            }
         }
-
-        let accordionData = `<div class="panelHeader">${category}</div>
-            <div class="panel" style="overflow-y:hidden">
-              ${htmlIcons}
-            </div>`;
-
-        $('#menu').append(accordionData);
-
+    }
+    if (dependencies) {
+        dependencies = `\nThe following circuits are depending on '${scope.name}': ${dependencies}\nDelete subcircuits of ${scope.name} before trying to delete ${scope.name}`;
+        alert(dependencies);
+        return;
     }
 
-
+    const confirmation = confirm(`Are you sure want to delete: ${scope.name}\nThis cannot be undone.`);
+    if (confirmation) {
+        $(`#${scope.id}`).remove();
+        delete scopeList[scope.id];
+        switchCircuit(Object.keys(scopeList)[0]);
+        showMessage('Circuit was successfully deleted');
+    } else { showMessage('Circuit was not deleted'); }
 }
 
-export function setup() {
-
-    setupElementLists();
-    setupEnvironment();
-    if (!embed)
-        setupUI();
-    startListeners();
-    projectName = "untitled"
-    // Load project data after 1 second - needs to be improved, delay needs to be eliminated
-    setTimeout(function () {
-        if (logix_project_id != 0) {
-            $('.loadingIcon').fadeIn();
-            $.ajax({
-                url: '/simulator/get_data',
-                type: 'POST',
-                beforeSend: function (xhr) {
-                    xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content'))
-                },
-                data: {
-                    "id": logix_project_id
-                },
-                success: function (response) {
-                    data = (response);
-
-                    if (data) {
-                        load(data);
-                        simulationArea.changeClockTime(data["timePeriod"] || 500);
-                    }
-                    $('.loadingIcon').fadeOut();
-                },
-                failure: function () {
-                    alert("Error: could not load ");
-                    $('.loadingIcon').fadeOut();
-                }
-            });
-
-        }
-
-        // Restore unsaved data and save
-        else if (localStorage.getItem("recover_login") && userSignedIn) {
-            var data = JSON.parse(localStorage.getItem("recover_login"));
-            load(data);
-            localStorage.removeItem("recover");
-            localStorage.removeItem("recover_login");
-            save();
-        }
-
-        // Restore unsaved data which didn't get saved due to error
-        else if (localStorage.getItem("recover")) {
-            showMessage("We have detected that you did not save your last work. Don't worry we have recovered them. Access them using Project->Recover")
-        }
-    }, 1000);
-
+/**
+ * Function to create new circuit
+ * Function creates button in tab, creates scope and switches to this circuit
+ * @param {string} name - name of the new circuit
+ * @param {string} id - identifier for circuit
+ * @category circuit
+ */
+export function newCircuit(name, id) {
+    name = name || prompt('Enter circuit name:');
+    name = stripTags(name);
+    if (!name) return;
+    const scope = new Scope(name);
+    if (id) scope.id = id;
+    scopeList[scope.id] = scope;
+    globalScope = scope;
+    $('.circuits').removeClass('current');
+    $('#tabsBar').append(`<div class='circuits toolbarButton current' id='${scope.id}'>${name}<span class ='tabsCloseButton' id='${scope.id}'  ><i class="fa fa-times"></i></span></div>`);
+    $('.circuits').click(function () {
+        switchCircuit(this.id);
+    });
+    $('.tabsCloseButton').click(function (e) {
+        e.stopPropagation();
+        deleteCurrentCircuit(this.id);
+    });
+    if (!embed) {
+        showProperties(scope.root);
+    }
+    dots(false);
+    return scope;
+}
 
+/**
+ * Used to change name of a circuit
+ * @param {string} name - new name
+ * @param {string} id - id of the circuit
+ * @category circuit
+ */
+export function changeCircuitName(name, id = globalScope.id) {
+    name = name || 'Untitled';
+    name = stripTags(name);
+    $(`#${id}`).html(name);
+    scopeList[id].name = name;
 }
 
-export class Scope {
-    constructor(name = "localScope", id = undefined) {
+/**
+ * Class representing a Scope
+ * @class
+ * @param {string} name - name of the circuit
+ * @param {number=} id - a random id for the circuit
+ * @category circuit
+ */
+export default class Scope {
+    constructor(name = 'localScope', id = undefined) {
         this.restrictedCircuitElementsUsed = [];
         this.id = id || Math.floor((Math.random() * 100000000000) + 1);
         this.CircuitElement = [];
 
-        //root object for referring to main canvas - intermediate node uses this
-        this.root = new CircuitElement(0, 0, this, "RIGHT", 1);
+        // root object for referring to main canvas - intermediate node uses this
+        this.root = new CircuitElement(0, 0, this, 'RIGHT', 1);
         this.backups = [];
         this.timeStamp = new Date().getTime();
 
@@ -180,16 +181,16 @@ export class Scope {
         this.oy = 0;
         this.scale = DPR;
         this.tunnelList = {};
-        this.stack = []
+        this.stack = [];
 
         this.name = name;
-        this.pending = []
-        this.nodes = []; //intermediate nodes only
+        this.pending = [];
+        this.nodes = []; // intermediate nodes only
         this.allNodes = [];
         this.wires = [];
 
         // Creating arrays for other module elements
-        for (var i = 0; i < moduleList.length; i++) {
+        for (let i = 0; i < moduleList.length; i++) {
             this[moduleList[i]] = [];
         }
 
@@ -200,7 +201,7 @@ export class Scope {
             title_x: 50,
             title_y: 13,
             titleEnabled: true,
-        }
+        };
 
 
         // FOR SOME UNKNOWN REASON, MAKING THE COPY OF THE LIST COMMON
@@ -211,90 +212,93 @@ export class Scope {
         // this.renderObjectOrder = [ ...(moduleList.slice().reverse()), "wires", "allNodes"];
     }
 
-    // Resets all nodes recursively
+    /**
+     * Resets all nodes recursively
+     */
     reset() {
-        for (var i = 0; i < this.allNodes.length; i++)
-            this.allNodes[i].reset();
-        for (var i = 0; i < this.Splitter.length; i++) {
+        for (let i = 0; i < this.allNodes.length; i++) { this.allNodes[i].reset(); }
+        for (let i = 0; i < this.Splitter.length; i++) {
             this.Splitter[i].reset();
         }
-        for (var i = 0; i < this.SubCircuit.length; i++) {
+        for (let i = 0; i < this.SubCircuit.length; i++) {
             this.SubCircuit[i].reset();
         }
-
     }
 
-    // Adds all inputs to simulationQueue
+    /**
+     * Adds all inputs to simulationQueue
+    */
     addInputs() {
-        for (var i = 0; i < inputList.length; i++) {
-            for (var j = 0; j < this[inputList[i]].length; j++) {
+        for (let i = 0; i < inputList.length; i++) {
+            for (let j = 0; j < this[inputList[i]].length; j++) {
                 simulationArea.simulationQueue.add(this[inputList[i]][j], 0);
             }
         }
 
-        for (let j = 0; j < this.SubCircuit.length; j++)
-            this.SubCircuit[j].addInputs();
-
+        for (let i = 0; i < this.SubCircuit.length; i++) { this.SubCircuit[i].addInputs(); }
     }
 
-    // Ticks clocks recursively -- needs to be deprecated and synchronize all clocks with a global clock
+    /**
+     * Ticks clocks recursively -- needs to be deprecated and synchronize all clocks with a global clock
+     */
     clockTick() {
-        for (var i = 0; i < this.Clock.length; i++)
-            this.Clock[i].toggleState(); //tick clock!
-        for (var i = 0; i < this.SubCircuit.length; i++)
-            this.SubCircuit[i].localScope.clockTick(); //tick clock!
+        for (let i = 0; i < this.Clock.length; i++) { this.Clock[i].toggleState(); } // tick clock!
+        for (let i = 0; i < this.SubCircuit.length; i++) { this.SubCircuit[i].localScope.clockTick(); } // tick clock!
     }
 
-    // Checks if this circuit contains directly or indirectly scope with id
-    // Recursive nature
+    /**
+     * Checks if this circuit contains directly or indirectly scope with id
+     * Recursive nature
+     */
     checkDependency(id) {
-        if (id == this.id) return true;
-        for (var i = 0; i < this.SubCircuit.length; i++)
-            if (this.SubCircuit[i].id == id) return true;
+        if (id === this.id) return true;
+        for (let i = 0; i < this.SubCircuit.length; i++) { if (this.SubCircuit[i].id === id) return true; }
 
-        for (var i = 0; i < this.SubCircuit.length; i++)
-            if (scopeList[this.SubCircuit[i].id].checkDependency(id)) return true;
+        for (let i = 0; i < this.SubCircuit.length; i++) { if (scopeList[this.SubCircuit[i].id].checkDependency(id)) return true; }
 
-        return false
+        return false;
     }
 
-    // Get dependency list - list of all circuits, this circuit depends on
+    /**
+     * Get dependency list - list of all circuits, this circuit depends on
+     */
     getDependencies() {
-        var list = []
-        for (var i = 0; i < this.SubCircuit.length; i++) {
+        const list = [];
+        for (let i = 0; i < this.SubCircuit.length; i++) {
             list.push(this.SubCircuit[i].id);
             list.extend(scopeList[this.SubCircuit[i].id].getDependencies());
         }
         return uniq(list);
     }
 
-    // helper function to reduce layout size
+    /**
+     * helper function to reduce layout size
+    */
     fixLayout() {
-        var max_y = 20;
-        for (var i = 0; i < this.Input.length; i++)
-            max_y = Math.max(this.Input[i].layoutProperties.y, max_y)
-        for (var i = 0; i < this.Output.length; i++)
-            max_y = Math.max(this.Output[i].layoutProperties.y, max_y)
-        if (max_y != this.layout.height)
-            this.layout.height = max_y + 10;
+        let maxY = 20;
+        for (let i = 0; i < this.Input.length; i++) { maxY = Math.max(this.Input[i].layoutProperties.y, maxY); }
+        for (let i = 0; i < this.Output.length; i++) { maxY = Math.max(this.Output[i].layoutProperties.y, maxY); }
+        if (maxY !== this.layout.height) { this.layout.height = maxY + 10; }
     }
 
-    // Function which centers the circuit to the correct zoom level
+
+    /**
+     * Function which centers the circuit to the correct zoom level
+     */
     centerFocus(zoomIn = true) {
-        if (layoutMode) return;
+        if (layoutModeGet()) return;
         findDimensions(this);
-        var minX = simulationArea.minWidth || 0;
-        var minY = simulationArea.minHeight || 0;
-        var maxX = simulationArea.maxWidth || 0;
-        var maxY = simulationArea.maxHeight || 0;
+        const minX = simulationArea.minWidth || 0;
+        const minY = simulationArea.minHeight || 0;
+        const maxX = simulationArea.maxWidth || 0;
+        const maxY = simulationArea.maxHeight || 0;
 
-        var reqWidth = maxX - minX + 150;
-        var reqHeight = maxY - minY + 150;
+        const reqWidth = maxX - minX + 150;
+        const reqHeight = maxY - minY + 150;
 
-        this.scale = Math.min(width / reqWidth, height / reqHeight)
+        this.scale = Math.min(width / reqWidth, height / reqHeight);
 
-        if (!zoomIn)
-            this.scale = Math.min(this.scale, DPR);
+        if (!zoomIn) { this.scale = Math.min(this.scale, DPR); }
         this.scale = Math.max(this.scale, DPR / 10);
 
         this.ox = (-minX) * this.scale + (width - (maxX - minX) * this.scale) / 2;
diff --git a/src/circuitElement.js b/src/circuitElement.js
index cbca7dc..c6c3a98 100644
--- a/src/circuitElement.js
+++ b/src/circuitElement.js
@@ -1,51 +1,53 @@
-import { scheduleUpdate } from "./engine";
-import { width,height } from "./circuit";
-import { simulationArea } from "./simulationArea";
-const oppositeDirection = {
-    "RIGHT": "LEFT",
-    "LEFT": "RIGHT",
-    "DOWN": "UP",
-    "UP": "DOWN",
-}
+/* eslint-disable no-multi-assign */
+/* eslint-disable no-bitwise */
+import { scheduleUpdate } from './engine';
+import simulationArea from './simulationArea';
+import {
+    fixDirection, fillText, correctWidth, rect2, oppositeDirection,
+} from './canvasApi';
+
+/**
+ * Base class for circuit elements.
+ * @param {number} x - x coordinate of the element
+ * @param {number} y - y coordinate of the element
+ * @param {Scope} scope - The circuit on which circuit element is being drawn
+ * @param {string} dir - The direction of circuit element
+ * @param {number} bitWidth - the number of bits per node.
+ * @category circuitElement
+ */
 export default class CircuitElement {
     constructor(x, y, scope, dir, bitWidth) {
         // Data member initializations
-        this.objectType = this.constructor.name;
         this.x = x;
         this.y = y;
-
         this.hover = false;
-        if (this.x == undefined || this.y == undefined) {
+        if (this.x === undefined || this.y === undefined) {
             this.x = simulationArea.mouseX;
             this.y = simulationArea.mouseY;
             this.newElement = true;
             this.hover = true;
         }
-
         this.deleteNodesWhenDeleted = true; // FOR NOW - TO CHECK LATER
-
-        this.nodeList = []
+        this.nodeList = [];
         this.clicked = false;
 
         this.oldx = x;
         this.oldy = y;
 
-        /**
-         The following attributes help in setting the touch area bound. They are the distances from the center.
-         Note they are all positive distances from center. They will automatically be rotated when direction is changed.
-         To stop the rotation when direction is changed, check overrideDirectionRotation attribute.
-         **/
+        // The following attributes help in setting the touch area bound. They are the distances from the center.
+        // Note they are all positive distances from center. They will automatically be rotated when direction is changed.
+        // To stop the rotation when direction is changed, check overrideDirectionRotation attribute.
         this.leftDimensionX = 10;
         this.rightDimensionX = 10;
         this.upDimensionY = 10;
         this.downDimensionY = 10;
 
         this.rectangleObject = true;
-        this.label = "";
+        this.label = '';
         this.scope = scope;
-        this.scope[this.objectType].push(this);
+        this.baseSetup();
 
-        this.bitWidth = bitWidth || parseInt(prompt("Enter bitWidth"), 10) || 1;
+        this.bitWidth = bitWidth || parseInt(prompt('Enter bitWidth'), 10) || 1;
         this.direction = dir;
         this.directionFixed = false;
         this.labelDirectionFixed = false;
@@ -59,49 +61,82 @@ export default class CircuitElement {
             inQueue: false,
             time: undefined,
             index: undefined,
-        }
-
+        };
     }
 
+    /**
+     * Function to flip bits
+     * @param {number} val - the value of flipped bits
+     * @returns {number} - The number of flipped bits
+     */
     flipBits(val) {
         return ((~val >>> 0) << (32 - this.bitWidth)) >>> (32 - this.bitWidth);
     }
 
+    /**
+     * Function to get absolute value of x coordinate of the element
+     * @param {number} x - value of x coordinate of the element
+     * @return {number} - absolute value of x
+     */
     absX() {
         return this.x;
     }
 
+    /**
+     * Function to get absolute value of y coordinate of the element
+     * @param {number} y - value of y coordinate of the element
+     * @return {number} - absolute value of y
+     */
     absY() {
         return this.y;
     }
 
+    /**
+     * adds the element to scopeList
+     */
+    baseSetup() {
+        console.log(this.objectType);
+        this.scope[this.objectType].push(this);
+    }
+
+    /**
+     * Function to copy the circuit element obj to a new circuit element
+     * @param {CircuitElement} obj - element to be copied from
+     */
     copyFrom(obj) {
-        var properties = ["label", "labelDirection"];
-        for (var i = 0; i < properties.length; i++) {
-            if (obj[properties[i]] !== undefined)
-                this[properties[i]] = obj[properties[i]];
+        const properties = ['label', 'labelDirection'];
+        for (let i = 0; i < properties.length; i++) {
+            if (obj[properties[i]] !== undefined) { this[properties[i]] = obj[properties[i]]; }
         }
     }
 
-    /* Methods to be Implemented for derivedClass
-            saveObject(); //To generate JSON-safe data that can be loaded
-            customDraw(); //This is to draw the custom design of the circuit(Optional)
-            resolve(); // To execute digital logic(Optional)
-            override isResolvable(); // custom logic for checking if module is ready
-            override newDirection(dir) //To implement custom direction logic(Optional)
-            newOrientation(dir) //To implement custom orientation logic(Optional)
-        */
+    /** Methods to be Implemented for derivedClass
+    * saveObject(); //To generate JSON-safe data that can be loaded
+    * customDraw(); //This is to draw the custom design of the circuit(Optional)
+    * resolve(); // To execute digital logic(Optional)
+    * override isResolvable(); // custom logic for checking if module is ready
+    * override newDirection(dir) //To implement custom direction logic(Optional)
+    * newOrientation(dir) //To implement custom orientation logic(Optional)
+    */
 
     // Method definitions
 
+    /**
+     * Function to update the scope when a new element is added.
+     * @param {Scope} scope - the circuit in which we add element
+     */
     updateScope(scope) {
         this.scope = scope;
-        for (var i = 0; i < this.nodeList.length; i++)
-            this.nodeList[i].scope = scope;
+        for (let i = 0; i < this.nodeList.length; i++) { this.nodeList[i].scope = scope; }
     }
 
+    /**
+    * To generate JSON-safe data that can be loaded
+    * @memberof CircuitElement
+    * @return {JSON} - the data to be saved
+    */
     saveObject() {
-        var data = {
+        const data = {
             x: this.x,
             y: this.y,
             objectType: this.objectType,
@@ -109,69 +144,100 @@ export default class CircuitElement {
             direction: this.direction,
             labelDirection: this.labelDirection,
             propagationDelay: this.propagationDelay,
-            customData: this.customSave()
-        }
+            customData: this.customSave(),
+        };
         return data;
-
     }
 
+    /**
+    * Always overriden
+    * @memberof CircuitElement
+    * @return {JSON} - the data to be saved
+    */
+    // eslint-disable-next-line class-methods-use-this
     customSave() {
         return {
             values: {},
             nodes: {},
             constructorParamaters: [],
-        }
+        };
     }
 
+    /**
+     * check hover over the element
+     * @return {boolean}
+     */
     checkHover() {
-
         if (simulationArea.mouseDown) return;
-        for (var i = 0; i < this.nodeList.length; i++) {
+        for (let i = 0; i < this.nodeList.length; i++) {
             this.nodeList[i].checkHover();
         }
         if (!simulationArea.mouseDown) {
-            if (simulationArea.hover == this) {
+            if (simulationArea.hover === this) {
                 this.hover = this.isHover();
                 if (!this.hover) simulationArea.hover = undefined;
             } else if (!simulationArea.hover) {
                 this.hover = this.isHover();
                 if (this.hover) simulationArea.hover = this;
             } else {
-                this.hover = false
+                this.hover = false;
             }
         }
     }
 
-    //This sets the width and height of the element if its rectangular
-    // and the reference point is at the center of the object.
-    //width and height define the X and Y distance from the center.
-    //Effectively HALF the actual width and height.
-    // NOT OVERRIDABLE
+
+    /**
+     * This sets the width and height of the element if its rectangular
+     * and the reference point is at the center of the object.
+     * width and height define the X and Y distance from the center.
+     * Effectively HALF the actual width and height.
+     * NOT OVERRIDABLE
+     * @param {number} w - width
+     * @param {number} h - height
+     */
     setDimensions(width, height) {
         this.leftDimensionX = this.rightDimensionX = width;
         this.downDimensionY = this.upDimensionY = height;
     }
 
+    /**
+    * @memberof CircuitElement
+    * @param {number} w -width
+    */
     setWidth(width) {
         this.leftDimensionX = this.rightDimensionX = width;
     }
 
+    /**
+     * @param {number} h -height
+     */
     setHeight(height) {
         this.downDimensionY = this.upDimensionY = height;
     }
 
+    /**
+     * Helper Function to drag element to a new position
+     */
     startDragging() {
         this.oldx = this.x;
         this.oldy = this.y;
     }
 
+    /**
+    * Helper Function to drag element to a new position
+    * @memberof CircuitElement
+    */
     drag() {
         this.x = this.oldx + simulationArea.mouseX - simulationArea.mouseDownX;
         this.y = this.oldy + simulationArea.mouseY - simulationArea.mouseDownY;
     }
 
+    /**
+     * The update method is used to change the parameters of the object on mouse click and hover.
+     * Return Value: true if state has changed else false
+     * NOT OVERRIDABLE
+     */
     update() {
-
         let update = false;
 
         update |= this.newElement;
@@ -187,16 +253,14 @@ export default class CircuitElement {
             if (simulationArea.mouseDown) {
                 this.newElement = false;
                 simulationArea.lastSelected = this;
-                console.log(this)
-            } else return;
+            } else return update;
         }
 
         for (let i = 0; i < this.nodeList.length; i++) {
             update |= this.nodeList[i].update();
         }
 
-        if (!simulationArea.hover || simulationArea.hover == this)
-            this.hover = this.isHover();
+        if (!simulationArea.hover || simulationArea.hover === this) { this.hover = this.isHover(); }
 
         if (!simulationArea.mouseDown) this.hover = false;
 
@@ -204,26 +268,24 @@ export default class CircuitElement {
         if ((this.clicked || !simulationArea.hover) && this.isHover()) {
             this.hover = true;
             simulationArea.hover = this;
-        } else if (!simulationArea.mouseDown && this.hover && this.isHover() == false) {
+        } else if (!simulationArea.mouseDown && this.hover && this.isHover() === false) {
             if (this.hover) simulationArea.hover = undefined;
             this.hover = false;
         }
 
         if (simulationArea.mouseDown && (this.clicked)) {
-
             this.drag();
             if (!simulationArea.shiftDown && simulationArea.multipleObjectSelections.contains(this)) {
-                for (var i = 0; i < simulationArea.multipleObjectSelections.length; i++) {
+                for (let i = 0; i < simulationArea.multipleObjectSelections.length; i++) {
                     simulationArea.multipleObjectSelections[i].drag();
                 }
             }
 
             update |= true;
         } else if (simulationArea.mouseDown && !simulationArea.selected) {
-
             this.startDragging();
             if (!simulationArea.shiftDown && simulationArea.multipleObjectSelections.contains(this)) {
-                for (var i = 0; i < simulationArea.multipleObjectSelections.length; i++) {
+                for (let i = 0; i < simulationArea.multipleObjectSelections.length; i++) {
                     simulationArea.multipleObjectSelections[i].startDragging();
                 }
             }
@@ -256,34 +318,38 @@ export default class CircuitElement {
         return update;
     }
 
+    /**
+     * Helper Function to correct the direction of element
+     */
     fixDirection() {
         this.direction = fixDirection[this.direction] || this.direction;
         this.labelDirection = fixDirection[this.labelDirection] || this.labelDirection;
     }
 
-    // The isHover method is used to check if the mouse is hovering over the object.
-    // Return Value: true if mouse is hovering over object else false
-    // NOT OVERRIDABLE
+    /**
+     * The isHover method is used to check if the mouse is hovering over the object.
+     * Return Value: true if mouse is hovering over object else false
+     * NOT OVERRIDABLE
+    */
     isHover() {
+        const mX = simulationArea.mouseXf - this.x;
+        const mY = this.y - simulationArea.mouseYf;
 
-        var mX = simulationArea.mouseXf - this.x;
-        var mY = this.y - simulationArea.mouseYf;
-
-        var rX = this.rightDimensionX;
-        var lX = this.leftDimensionX;
-        var uY = this.upDimensionY;
-        var dY = this.downDimensionY;
+        let rX = this.rightDimensionX;
+        let lX = this.leftDimensionX;
+        let uY = this.upDimensionY;
+        let dY = this.downDimensionY;
 
         if (!this.directionFixed && !this.overrideDirectionRotation) {
-            if (this.direction == "LEFT") {
+            if (this.direction === 'LEFT') {
                 lX = this.rightDimensionX;
-                rX = this.leftDimensionX
-            } else if (this.direction == "DOWN") {
+                rX = this.leftDimensionX;
+            } else if (this.direction === 'DOWN') {
                 lX = this.downDimensionY;
                 rX = this.upDimensionY;
                 uY = this.leftDimensionX;
                 dY = this.rightDimensionX;
-            } else if (this.direction == "UP") {
+            } else if (this.direction === 'UP') {
                 lX = this.downDimensionY;
                 rX = this.upDimensionY;
                 dY = this.leftDimensionX;
@@ -294,14 +360,21 @@ export default class CircuitElement {
         return -lX <= mX && mX <= rX && -dY <= mY && mY <= uY;
     }
 
+    /**
+    * Helper Function to set label of an element.
+    * @memberof CircuitElement
+    * @param {string} label - the label for element
+    */
     setLabel(label) {
-        this.label = label || ""
+        this.label = label || '';
     }
 
-    //Method that draws the outline of the module and calls draw function on module Nodes.
-    //NOT OVERRIDABLE
+    /**
+     * Method that draws the outline of the module and calls draw function on module Nodes.
+     * NOT OVERRIDABLE
+     */
     draw() {
-        var ctx = simulationArea.context;
+        const ctx = simulationArea.context;
         this.checkHover();
 
 
@@ -309,30 +382,30 @@ export default class CircuitElement {
 
         // Draws rectangle and highlights
         if (this.rectangleObject) {
-            ctx.strokeStyle = "black";
-            ctx.fillStyle = "white";
+            ctx.strokeStyle = 'black';
+            ctx.fillStyle = 'white';
             ctx.lineWidth = correctWidth(3);
             ctx.beginPath();
-            rect2(ctx, -this.leftDimensionX, -this.upDimensionY, this.leftDimensionX + this.rightDimensionX, this.upDimensionY + this.downDimensionY, this.x, this.y, [this.direction, "RIGHT"][+this.directionFixed]);
-            if ((this.hover && !simulationArea.shiftDown) || simulationArea.lastSelected == this || simulationArea.multipleObjectSelections.contains(this)) ctx.fillStyle = "rgba(255, 255, 32,0.8)";
+            rect2(ctx, -this.leftDimensionX, -this.upDimensionY, this.leftDimensionX + this.rightDimensionX, this.upDimensionY + this.downDimensionY, this.x, this.y, [this.direction, 'RIGHT'][+this.directionFixed]);
+            if ((this.hover && !simulationArea.shiftDown) || simulationArea.lastSelected === this || simulationArea.multipleObjectSelections.contains(this)) ctx.fillStyle = 'rgba(255, 255, 32,0.8)';
             ctx.fill();
             ctx.stroke();
         }
-        if (this.label != "") {
-            var rX = this.rightDimensionX;
-            var lX = this.leftDimensionX;
-            var uY = this.upDimensionY;
-            var dY = this.downDimensionY;
+        if (this.label !== '') {
+            let rX = this.rightDimensionX;
+            let lX = this.leftDimensionX;
+            let uY = this.upDimensionY;
+            let dY = this.downDimensionY;
             if (!this.directionFixed) {
-                if (this.direction == "LEFT") {
+                if (this.direction === 'LEFT') {
                     lX = this.rightDimensionX;
-                    rX = this.leftDimensionX
-                } else if (this.direction == "DOWN") {
+                    rX = this.leftDimensionX;
+                } else if (this.direction === 'DOWN') {
                     lX = this.downDimensionY;
                     rX = this.upDimensionY;
                     uY = this.leftDimensionX;
                     dY = this.rightDimensionX;
-                } else if (this.direction == "UP") {
+                } else if (this.direction === 'UP') {
                     lX = this.downDimensionY;
                     rX = this.upDimensionY;
                     dY = this.leftDimensionX;
@@ -340,172 +413,199 @@ export default class CircuitElement {
                 }
             }
 
-            if (this.labelDirection == "LEFT") {
+            if (this.labelDirection === 'LEFT') {
                 ctx.beginPath();
-                ctx.textAlign = "right";
-                ctx.fillStyle = "black";
+                ctx.textAlign = 'right';
+                ctx.fillStyle = 'black';
                 fillText(ctx, this.label, this.x - lX - 10, this.y + 5, 14);
                 ctx.fill();
-            } else if (this.labelDirection == "RIGHT") {
+            } else if (this.labelDirection === 'RIGHT') {
                 ctx.beginPath();
-                ctx.textAlign = "left";
-                ctx.fillStyle = "black";
+                ctx.textAlign = 'left';
+                ctx.fillStyle = 'black';
                 fillText(ctx, this.label, this.x + rX + 10, this.y + 5, 14);
                 ctx.fill();
-            } else if (this.labelDirection == "UP") {
+            } else if (this.labelDirection === 'UP') {
                 ctx.beginPath();
-                ctx.textAlign = "center";
-                ctx.fillStyle = "black";
+                ctx.textAlign = 'center';
+                ctx.fillStyle = 'black';
                 fillText(ctx, this.label, this.x, this.y + 5 - uY - 10, 14);
                 ctx.fill();
-            } else if (this.labelDirection == "DOWN") {
+            } else if (this.labelDirection === 'DOWN') {
                 ctx.beginPath();
-                ctx.textAlign = "center";
-                ctx.fillStyle = "black";
+                ctx.textAlign = 'center';
+                ctx.fillStyle = 'black';
                 fillText(ctx, this.label, this.x, this.y + 5 + dY + 10, 14);
                 ctx.fill();
             }
         }
 
         // calls the custom circuit design
-        if (this.customDraw)
-            this.customDraw();
+        if (this.customDraw) { this.customDraw(); }
 
-        //draws nodes - Moved to renderCanvas
-        // for (var i = 0; i < this.nodeList.length; i++)
+        // draws nodes - Moved to renderCanvas
+        // for (let i = 0; i < this.nodeList.length; i++)
         //     this.nodeList[i].draw();
     }
 
-    //method to delete object
-    //OVERRIDE WITH CAUTION
+    // method to delete object
+    // OVERRIDE WITH CAUTION
     delete() {
         simulationArea.lastSelected = undefined;
         this.scope[this.objectType].clean(this); // CHECK IF THIS IS VALID
-        if (this.deleteNodesWhenDeleted)
-            this.deleteNodes();
-        else
-            for (var i = 0; i < this.nodeList.length; i++)
-                if (this.nodeList[i].connections.length)
-                    this.nodeList[i].converToIntermediate();
-                else
-                    this.nodeList[i].delete();
+        if (this.deleteNodesWhenDeleted) { this.deleteNodes(); } else {
+            for (let i = 0; i < this.nodeList.length; i++) {
+                if (this.nodeList[i].connections.length) { this.nodeList[i].converToIntermediate(); } else { this.nodeList[i].delete(); }
+            }
+        }
         this.deleted = true;
     }
 
+    /**
+    * method to delete object
+    * OVERRIDE WITH CAUTION
+    * @memberof CircuitElement
+    */
     cleanDelete() {
         this.deleteNodesWhenDeleted = true;
         this.delete();
     }
 
+    /**
+     * Helper Function to delete the element and all the node attached to it.
+     */
     deleteNodes() {
-        for (var i = 0; i < this.nodeList.length; i++)
-            this.nodeList[i].delete();
+        for (let i = 0; i < this.nodeList.length; i++) { this.nodeList[i].delete(); }
     }
 
-    //method to change direction
-    //OVERRIDE WITH CAUTION
+    /**
+     * method to change direction
+     * OVERRIDE WITH CAUTION
+     * @param {string} dir - new direction
+     */
     newDirection(dir) {
-        if (this.direction == dir) return;
+        if (this.direction === dir) return;
         // Leave this for now
         if (this.directionFixed && this.orientationFixed) return;
-        else if (this.directionFixed) {
+        if (this.directionFixed) {
             this.newOrientation(dir);
             return; // Should it return ?
         }
 
-        // if (obj.direction == undefined) return;
+        // if (obj.direction === undefined) return;
         this.direction = dir;
-        for (var i = 0; i < this.nodeList.length; i++) {
+        for (let i = 0; i < this.nodeList.length; i++) {
             this.nodeList[i].refresh();
         }
-
     }
 
+    /**
+    * Helper Function to change label direction of the element.
+    * @memberof CircuitElement
+    * @param {string} dir - new direction
+    */
     newLabelDirection(dir) {
         this.labelDirection = dir;
     }
 
-    //Method to check if object can be resolved
-    //OVERRIDE if necessary
+    /**
+     * Method to check if object can be resolved
+     * OVERRIDE if necessary
+     * @return {boolean}
+     */
     isResolvable() {
         if (this.alwaysResolve) return true;
-        for (var i = 0; i < this.nodeList.length; i++)
-            if (this.nodeList[i].type == 0 && this.nodeList[i].value == undefined) return false;
+        for (let i = 0; i < this.nodeList.length; i++) { if (this.nodeList[i].type === 0 && this.nodeList[i].value === undefined) return false; }
         return true;
     }
 
-    //Method to change object Bitwidth
-    //OVERRIDE if necessary
+
+    /**
+     * Method to change object Bitwidth
+     * OVERRIDE if necessary
+     * @param {number} bitWidth - new bitwidth
+     */
     newBitWidth(bitWidth) {
         if (this.fixedBitWidth) return;
-        if (this.bitWidth == undefined) return;
+        if (this.bitWidth === undefined) return;
         if (this.bitWidth < 1) return;
         this.bitWidth = bitWidth;
-        for (var i = 0; i < this.nodeList.length; i++)
-            this.nodeList[i].bitWidth = bitWidth;
+        for (let i = 0; i < this.nodeList.length; i++) { this.nodeList[i].bitWidth = bitWidth; }
     }
 
-    //Method to change object delay
-    //OVERRIDE if necessary
+    /**
+     * Method to change object delay
+     * OVERRIDE if necessary
+     * @param {number} delay - new delay
+     */
     changePropagationDelay(delay) {
         if (this.propagationDelayFixed) return;
-        if (delay == undefined) return;
-        if (delay == "") return;
-        delay = parseInt(delay, 10)
-        if (delay < 0) return;
-        this.propagationDelay = delay;
+        if (delay === undefined) return;
+        if (delay === '') return;
+        const tmpDelay = parseInt(delay, 10);
+        if (tmpDelay < 0) return;
+        this.propagationDelay = tmpDelay;
     }
 
-    //Dummy resolve function
-    //OVERRIDE if necessary
+    /**
+    * Dummy resolve function
+    * OVERRIDE if necessary
+    */
     resolve() {
 
     }
 
+    /**
+    * Helper Function to process verilog
+    */
     processVerilog() {
-        var output_count = 0;
-        for (var i = 0; i < this.nodeList.length; i++) {
-            if (this.nodeList[i].type == NODE_OUTPUT) {
-                this.nodeList[i].verilogLabel = this.nodeList[i].verilogLabel || (this.verilogLabel + "_" + (verilog.fixName(this.nodeList[i].label) || ("out_" + output_count)));
-                if (this.objectType != "Input" && this.nodeList[i].connections.length > 0) {
-                    if (this.scope.verilogWireList[this.bitWidth] != undefined) {
-                        if (!this.scope.verilogWireList[this.bitWidth].contains(this.nodeList[i].verilogLabel))
-                            this.scope.verilogWireList[this.bitWidth].push(this.nodeList[i].verilogLabel);
-                    } else
-                        this.scope.verilogWireList[this.bitWidth] = [this.nodeList[i].verilogLabel];
+        let outputCount = 0;
+        for (let i = 0; i < this.nodeList.length; i++) {
+            if (this.nodeList[i].type === NODE_OUTPUT) {
+                this.nodeList[i].verilogLabel = this.nodeList[i].verilogLabel || (`${this.verilogLabel}_${verilog.fixName(this.nodeList[i].label) || (`out_${outputCount}`)}`);
+                if (this.objectType !== 'Input' && this.nodeList[i].connections.length > 0) {
+                    if (this.scope.verilogWireList[this.bitWidth] !== undefined) {
+                        if (!this.scope.verilogWireList[this.bitWidth].contains(this.nodeList[i].verilogLabel)) { this.scope.verilogWireList[this.bitWidth].push(this.nodeList[i].verilogLabel); }
+                    } else { this.scope.verilogWireList[this.bitWidth] = [this.nodeList[i].verilogLabel]; }
                 }
                 this.scope.stack.push(this.nodeList[i]);
-                output_count++;
+                outputCount++;
             }
         }
     }
 
+    /**
+    * Helper Function to check if verilog resolvable
+    * @return {boolean}
+    */
     isVerilogResolvable() {
-
-        var backupValues = []
-        for (var i = 0; i < this.nodeList.length; i++) {
+        const backupValues = [];
+        for (let i = 0; i < this.nodeList.length; i++) {
             backupValues.push(this.nodeList[i].value);
             this.nodeList[i].value = undefined;
         }
 
-        for (var i = 0; i < this.nodeList.length; i++) {
+        for (let i = 0; i < this.nodeList.length; i++) {
             if (this.nodeList[i].verilogLabel) {
                 this.nodeList[i].value = 1;
             }
         }
 
-        var res = this.isResolvable();
+        const res = this.isResolvable();
 
-        for (var i = 0; i < this.nodeList.length; i++) {
+        for (let i = 0; i < this.nodeList.length; i++) {
             this.nodeList[i].value = backupValues[i];
         }
 
         return res;
     }
 
+    /**
+    * Helper Function to remove proporgation.
+    */
     removePropagation() {
-        for (var i = 0; i < this.nodeList.length; i++) {
-            if (this.nodeList[i].type == NODE_OUTPUT) {
+        for (let i = 0; i < this.nodeList.length; i++) {
+            if (this.nodeList[i].type === NODE_OUTPUT) {
                 if (this.nodeList[i].value !== undefined) {
                     this.nodeList[i].value = undefined;
                     simulationArea.simulationQueue.add(this.nodeList[i]);
@@ -514,42 +614,40 @@ export default class CircuitElement {
         }
     }
 
+    /**
+    * Helper Function to name the verilog.
+    * @return {string}
+    */
     verilogName() {
         return this.verilogType || this.objectType;
     }
 
+    /**
+    * Helper Function to generate verilog
+    * @return {JSON}
+    */
     generateVerilog() {
-
-        var inputs = [];
-        var outputs = [];
+        const inputs = [];
+        const outputs = [];
 
 
-        for (var i = 0; i < this.nodeList.length; i++) {
-            if (this.nodeList[i].type == NODE_INPUT) {
+        for (let i = 0; i < this.nodeList.length; i++) {
+            if (this.nodeList[i].type === NODE_INPUT) {
                 inputs.push(this.nodeList[i]);
             } else {
                 outputs.push(this.nodeList[i]);
             }
         }
 
-        var list = outputs.concat(inputs);
-        var res = this.verilogName() + " " + this.verilogLabel + " (" + list.map(function (x) {
-            return x.verilogLabel
-        }).join(",") + ");";
+        const list = outputs.concat(inputs);
+        const res = `${this.verilogName()} ${this.verilogLabel} (${list.map((x) => x.verilogLabel).join(',')});`;
 
         return res;
     }
 }
 
-// CircuitElement.prototype.alwaysResolve = false
-// CircuitElement.prototype.propagationDelay = 10
-
-// The update method is used to change the parameters of the object on mouse click and hover.
-// Return Value: true if state has changed else false
-// NOT OVERRIDABLE
-
-// When true this.isHover() will not rotate bounds. To be used when bounds are set manually.
-// CircuitElement.prototype.overrideDirectionRotation = false;
-
-// CircuitElement.prototype.propagationDelayFixed = false;
-// 
+CircuitElement.prototype.alwaysResolve = false;
+CircuitElement.prototype.propagationDelay = 10;
+CircuitElement.prototype.tooltip = undefined;
+CircuitElement.prototype.propagationDelayFixed = false;
+CircuitElement.prototype.objectType = 'CircuitElement';
diff --git a/src/combinationalAnalysis.js b/src/combinationalAnalysis.js
new file mode 100755
index 0000000..f02a305
--- /dev/null
+++ b/src/combinationalAnalysis.js
@@ -0,0 +1,279 @@
+/* eslint-disable import/no-cycle */
+/* eslint-disable guard-for-in */
+/* eslint-disable no-restricted-syntax */
+import Node from './node';
+import { scheduleBackup } from './data/backupCircuit';
+import BooleanMinimize from './quinMcCluskey';
+import Input from './modules/Input';
+import Output from './modules/Output';
+import AndGate from './modules/AndGate';
+import OrGate from './modules/OrGate';
+import NotGate from './modules/NotGate';
+
+const inputSample = 5;
+const dataSample = [['01---', '11110', '01---', '00000'], ['01110', '1-1-1', '----0'], ['01---', '11110', '01110', '1-1-1', '0---0'], ['----1']];
+
+const sampleInputListNames = ['A', 'B'];
+const sampleOutputListNames = ['X'];
+
+/**
+ * The prompt for combinational analysis
+ * @param {Scope=} - the circuit in which we want combinational analysis
+ * @category combinationalAnalysis
+ */
+export function createCombinationalAnalysisPrompt(scope = globalScope) {
+    // console.log("Ya");
+    scheduleBackup();
+    $('#combinationalAnalysis').empty();
+    $('#combinationalAnalysis').append("<p>Enter Input names separated by commas: <input id='inputNameList' type='text'  placeHolder='eg. In A, In B'></p>");
+    $('#combinationalAnalysis').append("<p>Enter Output names separated by commas: <input id='outputNameList' type='text'  placeHolder='eg. Out X, Out Y'></p>");
+    $('#combinationalAnalysis').append("<p>Do you need a decimal column? <input id='decimalColumnBox' type='checkbox'></p>");
+    $('#combinationalAnalysis').dialog({
+        width: 'auto',
+        buttons: [
+            {
+                text: 'Next',
+                click() {
+                    let inputList = $('#inputNameList').val().split(',');
+                    let outputList = $('#outputNameList').val().split(',');
+                    inputList = inputList.map((x) => x.trim());
+                    inputList = inputList.filter((e) => e);
+                    outputList = outputList.map((x) => x.trim());
+                    outputList = outputList.filter((e) => e);
+                    if (inputList.length > 0 && outputList.length > 0) {
+                        $(this).dialog('close');
+                        createBooleanPrompt(inputList, outputList, scope);
+                    } else {
+                        alert('Enter Input / Output Variable(s) !');
+                    }
+                },
+            },
+        ],
+    });
+}
+/**
+ * This funciton hashes the output array and makes required JSON using
+ * a BooleanMinimize class defined in Quin_Mcluskey.js let s which will
+ * be output table is also initialied here
+ * @param {Array} inputListNames - labels of input nodes
+ * @param {Array} outputListNames - labels of output nodes
+ * @param {Scope=} scope - h circuit
+ * @category combinationalAnalysis
+ */
+function createBooleanPrompt(inputListNames, outputListNames, scope = globalScope) {
+    inputListNames = inputListNames || (prompt('Enter inputs separated by commas').split(','));
+    outputListNames = outputListNames || (prompt('Enter outputs separated by commas').split(','));
+    const outputListNamesInteger = [];
+    for (let i = 0; i < outputListNames.length; i++) { outputListNamesInteger[i] = 7 * i + 13; }// assigning an integer to the value, 7*i + 13 is random
+
+    let s = '<table>';
+    s += '<tbody style="display:block; max-height:70vh; overflow-y:scroll" >';
+    s += '<tr>';
+    if ($('#decimalColumnBox').is(':checked')) { s += '<th>' + 'dec' + '</th>'; }
+    for (let i = 0; i < inputListNames.length; i++) { s += `<th>${inputListNames[i]}</th>`; }
+    for (let i = 0; i < outputListNames.length; i++) { s += `<th>${outputListNames[i]}</th>`; }
+    s += '</tr>';
+
+    const matrix = [];
+    for (let i = 0; i < inputListNames.length; i++) {
+        matrix[i] = new Array((1 << inputListNames.length));
+    }
+
+    for (let i = 0; i < inputListNames.length; i++) {
+        for (let j = 0; j < (1 << inputListNames.length); j++) {
+            matrix[i][j] = (+((j & (1 << (inputListNames.length - i - 1))) != 0));
+        }
+    }
+
+    for (let j = 0; j < (1 << inputListNames.length); j++) {
+        s += '<tr>';
+        if ($('#decimalColumnBox').is(':checked')) { s += `<td>${j}</td>`; }
+        for (let i = 0; i < inputListNames.length; i++) {
+            s += `<td>${matrix[i][j]}</td>`;
+        }
+        for (let i = 0; i < outputListNamesInteger.length; i++) {
+            s += `<td class ="output ${outputListNamesInteger[i]}" id="${j}">` + 'x' + '</td>';
+            // using hash values as they'll be used in the generateBooleanTableData function
+        }
+        s += '</tr>';
+    }
+    s += '</tbody>';
+    s += '</table>';
+    // console.log(s)
+    $('#combinationalAnalysis').empty();
+    $('#combinationalAnalysis').append(s);
+    $('#combinationalAnalysis').dialog({
+        width: 'auto',
+        buttons: [
+            {
+                text: 'Generate Circuit',
+                click() {
+                    $(this).dialog('close');
+                    const data = generateBooleanTableData(outputListNamesInteger);
+                    // passing the hash values to avoid spaces being passed which is causing a problem
+                    const minmizedCircuit = [];
+                    for (const output in data) {
+                        const temp = new BooleanMinimize(
+                            inputListNames.length,
+                            data[output][1].map(Number),
+                            data[output].x.map(Number),
+                        );
+                        minmizedCircuit.push(temp.result);
+                    }
+                    // //console.log(dataSample);
+                    drawCombinationalAnalysis(minmizedCircuit, inputListNames, outputListNames, scope);
+                },
+            },
+            {
+                text: 'Print Truth Table',
+                click() {
+                    const sTable = document.getElementById('combinationalAnalysis').innerHTML;
+                    const style = '<style> table {font: 20px Calibri;} table, th, td {border: solid 1px #DDD;border-collapse: collapse;} padding: 2px 3px;text-align: center;} </style>';
+                    const win = window.open('', '', 'height=700,width=700');
+                    win.document.write('<html><head>');
+                    win.document.write('<title>Boolean Logic Table</title>');
+                    win.document.write(style);
+                    win.document.write('</head>');
+                    win.document.write('<body>');
+                    win.document.write(`<center>${sTable}</center>`);
+                    win.document.write('</body></html>');
+                    win.document.close();
+                    win.print();
+                },
+            },
+        ],
+    });
+
+    $('.output').click(function () {
+        let v = $(this).html();
+        if (v == 0)v = $(this).html(1);
+        else if (v == 1)v = $(this).html('x');
+        else if (v == 'x')v = $(this).html(0);
+    });
+}
+
+function generateBooleanTableData(outputListNames) {
+    const data = {};
+    for (let i = 0; i < outputListNames.length; i++) {
+        data[outputListNames[i]] = {
+            x: [],
+            1: [],
+            0: [],
+        };
+        const rows = $(`.${outputListNames[i]}`);
+        for (let j = 0; j < rows.length; j++) {
+            // console.log($rows[j].innerHTML)
+            data[outputListNames[i]][rows[j].innerHTML].push(rows[j].id);
+        }
+    }
+    // console.log(data);
+    return data;
+}
+
+function drawCombinationalAnalysis(combinationalData, inputList, outputListNames, scope = globalScope) {
+    // console.log(combinationalData);
+    const inputCount = inputList.length;
+    let maxTerms = 0;
+    for (let i = 0; i < combinationalData.length; i++) { maxTerms = Math.max(maxTerms, combinationalData[i].length); }
+
+    const startPosX = 200;
+    const startPosY = 200;
+
+    let currentPosY = 300;
+    const andPosX = startPosX + inputCount * 40 + 40;
+    const orPosX = andPosX + Math.floor(maxTerms / 2) * 10 + 80;
+    const outputPosX = orPosX + 60;
+    const inputObjects = [];
+
+    const logixNodes = [];
+
+    for (let i = 0; i < inputCount; i++) {
+        inputObjects.push(new Input(startPosX + i * 40, startPosY, scope, 'DOWN', 1));
+        inputObjects[i].setLabel(inputList[i]);
+        inputObjects[i].newLabelDirection('UP');
+        const v1 = new Node(startPosX + i * 40, startPosY + 20, 2, scope.root);
+        inputObjects[i].output1.connect(v1);
+        const v2 = new Node(startPosX + i * 40 + 20, startPosY + 20, 2, scope.root);
+        v1.connect(v2);
+        const notG = new NotGate(startPosX + i * 40 + 20, startPosY + 40, scope, 'DOWN', 1);
+        notG.inp1.connect(v2);
+        logixNodes.push(v1);
+        logixNodes.push(notG.output1);
+    }
+
+    function countTerm(s) {
+        let c = 0;
+        for (let i = 0; i < s.length; i++) { if (s[i] !== '-')c++; }
+        return c;
+    }
+
+    for (let i = 0; i < combinationalData.length; i++) {
+        // //console.log(combinationalData[i]);
+        const andGateNodes = [];
+        for (let j = 0; j < combinationalData[i].length; j++) {
+            const c = countTerm(combinationalData[i][j]);
+            if (c > 1) {
+                const andGate = new AndGate(andPosX, currentPosY, scope, 'RIGHT', c, 1);
+                andGateNodes.push(andGate.output1);
+                let misses = 0;
+                for (let k = 0; k < combinationalData[i][j].length; k++) {
+                    if (combinationalData[i][j][k] == '-') { misses++; continue; }
+                    const index = 2 * k + (combinationalData[i][j][k] == 0);
+                    // console.log(index);
+                    // console.log(andGate);
+                    const v = new Node(logixNodes[index].absX(), andGate.inp[k - misses].absY(), 2, scope.root);
+                    logixNodes[index].connect(v);
+                    logixNodes[index] = v;
+                    v.connect(andGate.inp[k - misses]);
+                }
+            } else {
+                for (let k = 0; k < combinationalData[i][j].length; k++) {
+                    if (combinationalData[i][j][k] == '-') continue;
+                    const index = 2 * k + (combinationalData[i][j][k] == 0);
+                    const andGateSubstituteNode = new Node(andPosX, currentPosY, 2, scope.root);
+                    const v = new Node(logixNodes[index].absX(), andGateSubstituteNode.absY(), 2, scope.root);
+                    logixNodes[index].connect(v);
+                    logixNodes[index] = v;
+                    v.connect(andGateSubstituteNode);
+                    andGateNodes.push(andGateSubstituteNode);
+                }
+            }
+            currentPosY += c * 10 + 30;
+        }
+
+        const andGateCount = andGateNodes.length;
+        const midWay = Math.floor(andGateCount / 2);
+        let orGatePosY = (andGateNodes[midWay].absY() + andGateNodes[Math.floor((andGateCount - 1) / 2)].absY()) / 2;
+        if (orGatePosY % 10 == 5) { orGatePosY += 5; } // To make or gate fall in grid
+        if (andGateCount > 1) {
+            const o = new OrGate(orPosX, orGatePosY, scope, 'RIGHT', andGateCount, 1);
+            if (andGateCount % 2 == 1)andGateNodes[midWay].connect(o.inp[midWay]);
+            for (let j = 0; j < midWay; j++) {
+                let v = new Node(andPosX + 30 + (midWay - j) * 10, andGateNodes[j].absY(), 2, scope.root);
+                v.connect(andGateNodes[j]);
+                let v2 = new Node(andPosX + 30 + (midWay - j) * 10, o.inp[j].absY(), 2, scope.root);
+                v2.connect(v);
+                o.inp[j].connect(v2);
+
+                v = new Node(andPosX + 30 + (midWay - j) * 10, andGateNodes[andGateCount - j - 1].absY(), 2, scope.root);
+                v.connect(andGateNodes[andGateCount - j - 1]);
+                v2 = new Node(andPosX + 30 + (midWay - j) * 10, o.inp[andGateCount - j - 1].absY(), 2, scope.root);
+                v2.connect(v);
+                o.inp[andGateCount - j - 1].connect(v2);
+            }
+            const out = new Output(outputPosX, o.y, scope, 'LEFT', 1);
+            out.inp1.connect(o.output1);
+        } else {
+            const out = new Output(outputPosX, andGateNodes[0].absY(), scope, 'LEFT', 1);
+            out.inp1.connect(andGateNodes[0]);
+        }
+        out.setLabel(outputListNames[i]);
+        out.newLabelDirection('RIGHT');
+    }
+    for (let i = 0; i < logixNodes.length; i++) {
+        if (logixNodes[i].absY() != currentPosY) {
+            const v = new Node(logixNodes[i].absX(), currentPosY, 2, scope.root);
+            logixNodes[i].connect(v);
+        }
+    }
+}
diff --git a/src/data.js b/src/data.js
new file mode 100755
index 0000000..8432361
--- /dev/null
+++ b/src/data.js
@@ -0,0 +1,25 @@
+import { createSubCircuitPrompt } from './subcircuit';
+import save from './data/save';
+import load from './data/load';
+import createSaveAsImgPrompt from './data/saveImage';
+import {
+    clearProject, newProject, saveOffline, openOffline, recoverProject,
+} from './data/project';
+import { newCircuit } from './circuit';
+import { createCombinationalAnalysisPrompt } from './combinationalAnalysis';
+import { createBitConverter } from './dec-bin-hex';
+
+const logixFunction = {};
+logixFunction.save = save;
+logixFunction.load = load;
+logixFunction.createSaveAsImgPrompt = createSaveAsImgPrompt;
+logixFunction.clearProject = clearProject;
+logixFunction.newProject = newProject;
+logixFunction.saveOffline = saveOffline;
+logixFunction.newCircuit = newCircuit;
+logixFunction.createOpenLocalPrompt = openOffline;
+logixFunction.recoverProject = recoverProject;
+logixFunction.createSubCircuitPrompt = createSubCircuitPrompt;
+logixFunction.createCombinationalAnalysisPrompt = createCombinationalAnalysisPrompt;
+logixFunction.bitconverter = createBitConverter;
+export default logixFunction;
diff --git a/src/data/backupCircuit.js b/src/data/backupCircuit.js
new file mode 100755
index 0000000..f53a370
--- /dev/null
+++ b/src/data/backupCircuit.js
@@ -0,0 +1,63 @@
+import { projectSavedSet } from './project';
+/* eslint-disable no-param-reassign */
+function extract(obj) {
+    return obj.saveObject();
+}
+
+// Check if there is anything to backup - to be deprecated
+/**
+ * Check if backup is available
+ * @param {Scope} scope
+ * @return {boolean}
+ * @category data
+ */
+export function checkIfBackup(scope) {
+    for (let i = 0; i < updateOrder.length; i++) { if (scope[updateOrder[i]].length) return true; }
+    return false;
+}
+
+export function backUp(scope = globalScope) {
+    // Disconnection of subcircuits are needed because these are the connections between nodes
+    // in current scope and those in the subcircuit's scope
+    for (let i = 0; i < scope.SubCircuit.length; i++) { scope.SubCircuit[i].removeConnections(); }
+
+    const data = {};
+
+    // Storing layout
+    data.layout = scope.layout;
+
+    // Storing all nodes
+    data.allNodes = scope.allNodes.map(extract);
+
+    // Storing other details
+    data.id = scope.id;
+    data.name = scope.name;
+
+    // Storing details of all module objects
+    for (let i = 0; i < moduleList.length; i++) {
+        if (scope[moduleList[i]].length) { data[moduleList[i]] = scope[moduleList[i]].map(extract); }
+    }
+
+    // Adding restricted circuit elements used in the save data
+    data.restrictedCircuitElementsUsed = scope.restrictedCircuitElementsUsed;
+
+    // Storing intermediate nodes (nodes in wires)
+    data.nodes = [];
+    for (let i = 0; i < scope.nodes.length; i++) { data.nodes.push(scope.allNodes.indexOf(scope.nodes[i])); }
+
+    // Restoring the connections
+    for (let i = 0; i < scope.SubCircuit.length; i++) { scope.SubCircuit[i].makeConnections(); }
+
+    return data;
+}
+
+export function scheduleBackup(scope = globalScope) {
+    const backup = JSON.stringify(backUp(scope));
+    if (scope.backups.length === 0 || scope.backups[scope.backups.length - 1] !== backup) {
+        scope.backups.push(backup);
+        scope.timeStamp = new Date().getTime();
+        projectSavedSet(false);
+    }
+
+    return backup;
+}
diff --git a/src/data/load.js b/src/data/load.js
new file mode 100755
index 0000000..3527c88
--- /dev/null
+++ b/src/data/load.js
@@ -0,0 +1,210 @@
+import { resetScopeList, newCircuit, switchCircuit } from '../circuit';
+import { setProjectName } from './save';
+import {
+    scheduleUpdate, update, updateSimulationSet, updateCanvasSet, gridUpdateSet,
+} from '../engine';
+import { updateRestrictedElementsInScope } from '../restrictedElementDiv';
+import simulationArea from '../simulationArea';
+
+import { loadSubCircuit } from '../subcircuit';
+import { scheduleBackup } from './backupCircuit';
+import { showProperties } from '../ux';
+import { constructNodeConnections, loadNode, replace } from '../node';
+import { generateId } from '../utils';
+import modules from '../modules';
+import { oppositeDirection } from '../canvasApi';
+
+/**
+ * Backward compatibility - needs to be deprecated
+ * @param {CircuitElement} obj - the object to be rectified
+ * @category data
+ */
+function rectifyObjectType(obj) {
+    const rectify = {
+        FlipFlop: 'DflipFlop',
+        Ram: 'Rom',
+    };
+    return rectify[obj] || obj;
+}
+
+/**
+ * Function to load CircuitElements
+ * @param {JSON} data - JSOn data
+ * @param {Scope} scope - circuit in which we want to load modules
+ * @category data
+ */
+function loadModule(data, scope) {
+    // Create circuit element
+    const obj = new modules[rectifyObjectType(data.objectType)](data.x, data.y, scope, ...data.customData.constructorParamaters || []);
+    // Sets directions
+    obj.label = data.label;
+    obj.labelDirection = data.labelDirection || oppositeDirection[fixDirection[obj.direction]];
+
+    // Sets delay
+    obj.propagationDelay = data.propagationDelay || obj.propagationDelay;
+    obj.fixDirection();
+
+    // Restore other values
+    if (data.customData.values) {
+        for (const prop in data.customData.values) {
+            obj[prop] = data.customData.values[prop];
+        }
+    }
+
+    // Replace new nodes with the correct old nodes (with connections)
+    if (data.customData.nodes) {
+        for (const node in data.customData.nodes) {
+            const n = data.customData.nodes[node];
+            if (n instanceof Array) {
+                for (let i = 0; i < n.length; i++) {
+                    obj[node][i] = replace(obj[node][i], n[i]);
+                }
+            } else {
+                obj[node] = replace(obj[node], n);
+            }
+        }
+    }
+}
+
+/**
+ * This function shouldn't ideally exist. But temporary fix
+ * for some issues while loading nodes.
+ * @category data
+ */
+function removeBugNodes(scope = globalScope) {
+    let x = scope.allNodes.length;
+    for (let i = 0; i < x; i++) {
+        if (scope.allNodes[i].type !== 2 && scope.allNodes[i].parent.objectType === 'CircuitElement') { scope.allNodes[i].delete(); }
+        if (scope.allNodes.length !== x) {
+            i = 0;
+            x = scope.allNodes.length;
+        }
+    }
+}
+
+/**
+ * Function to load a full circuit
+ * @param {Scope} scope
+ * @param {JSON} data
+ * @category data
+ */
+export function loadScope(scope, data) {
+    const ML = moduleList.slice(); // Module List copy
+    scope.restrictedCircuitElementsUsed = data.restrictedCircuitElementsUsed;
+
+    // Load all nodes
+    data.allNodes.map((x) => loadNode(x, scope));
+
+    // Make all connections
+    for (let i = 0; i < data.allNodes.length; i++) { constructNodeConnections(scope.allNodes[i], data.allNodes[i]); }
+    // Load all modules
+    for (let i = 0; i < ML.length; i++) {
+        if (data[ML[i]]) {
+            if (ML[i] === 'SubCircuit') {
+                // Load subcircuits differently
+                for (let j = 0; j < data[ML[i]].length; j++) { loadSubCircuit(data[ML[i]][j], scope); }
+            } else {
+                // Load everything else similarly
+                for (let j = 0; j < data[ML[i]].length; j++) {
+                    loadModule(data[ML[i]][j], scope);
+                }
+            }
+        }
+    }
+    // Update wires according
+    scope.wires.map((x) => {
+        x.updateData(scope);
+    });
+    removeBugNodes(scope); // To be deprecated
+    // If layout exists, then restore
+    if (data.layout) {
+        scope.layout = data.layout;
+    } else {
+        // Else generate new layout according to how it would have been otherwise (backward compatibility)
+        scope.layout = {};
+        scope.layout.width = 100;
+        scope.layout.height = Math.max(scope.Input.length, scope.Output.length) * 20 + 20;
+        scope.layout.title_x = 50;
+        scope.layout.title_y = 13;
+        for (let i = 0; i < scope.Input.length; i++) {
+            scope.Input[i].layoutProperties = {
+                x: 0,
+                y: scope.layout.height / 2 - scope.Input.length * 10 + 20 * i + 10,
+                id: generateId(),
+            };
+        }
+        for (let i = 0; i < scope.Output.length; i++) {
+            scope.Output[i].layoutProperties = {
+                x: scope.layout.width,
+                y: scope.layout.height / 2 - scope.Output.length * 10 + 20 * i + 10,
+                id: generateId(),
+            };
+        }
+    }
+    // Backward compatibility
+    if (scope.layout.titleEnabled === undefined) { scope.layout.titleEnabled = true; }
+}
+
+
+// Function to load project from data
+/**
+ * loads a saved project
+ * @param {JSON} data - the json data of the
+ * @category data
+ * @exports load
+ */
+export default function load(data) {
+    // If project is new and no data is there, then just set project name
+    if (!data) {
+        setProjectName(projectName);
+        return;
+    }
+
+    const { projectId } = data;
+    let projectName = data.name;
+
+    if (data.name === 'Untitled') { projectName = undefined; } else { setProjectName(data.name); }
+
+    globalScope = undefined;
+    resetScopeList(); // Remove default scope
+    $('.circuits').remove(); // Delete default scope
+
+    // Load all circuits according to the dependency order
+    for (let i = 0; i < data.scopes.length; i++) {
+        // Create new circuit
+        const scope = newCircuit(data.scopes[i].name || 'Untitled', data.scopes[i].id);
+
+        // Load circuit data
+        loadScope(scope, data.scopes[i]);
+
+        // Focus circuit
+        globalScope = scope;
+
+        // Center circuit
+        if (embed) { globalScope.centerFocus(true); } else { globalScope.centerFocus(false); }
+
+        // update and backup circuit once
+        update(globalScope, true);
+
+        // Updating restricted element list initially on loading
+        updateRestrictedElementsInScope();
+
+        scheduleBackup();
+    }
+
+    // Restore clock
+    simulationArea.changeClockTime(data.timePeriod || 500);
+    simulationArea.clockEnabled = data.clockEnabled === undefined ? true : data.clockEnabled;
+
+
+    if (!embed) { showProperties(simulationArea.lastSelected); }
+
+    // Switch to last focussedCircuit
+    if (data.focussedCircuit) switchCircuit(data.focussedCircuit);
+
+
+    updateSimulationSet(true);
+    updateCanvasSet(true);
+    gridUpdateSet(true);
+    scheduleUpdate();
+}
diff --git a/src/data/project.js b/src/data/project.js
new file mode 100755
index 0000000..5a612d1
--- /dev/null
+++ b/src/data/project.js
@@ -0,0 +1,138 @@
+/* eslint-disable guard-for-in */
+/* eslint-disable no-bitwise */
+/* eslint-disable import/no-cycle */
+/* eslint-disable no-restricted-globals */
+/* eslint-disable no-alert */
+import { resetScopeList, scopeList, newCircuit } from '../circuit';
+import { showMessage, showError } from '../utils';
+import { checkIfBackup } from './backupCircuit';
+import { generateSaveData } from './save';
+import load from './load';
+
+/**
+ * Helper function to recover unsaved data
+ * @category data
+ */
+export function recoverProject() {
+    if (localStorage.getItem('recover')) {
+        const data = JSON.parse(localStorage.getItem('recover'));
+        if (confirm(`Would you like to recover: ${data.name}`)) {
+            load(data);
+        }
+        localStorage.removeItem('recover');
+    } else {
+        showError('No recover project found');
+    }
+}
+
+
+/**
+ * Prompt to restore from localStorage
+ * @category data
+ */
+export function openOffline() {
+    $('#openProjectDialog').empty();
+    const projectList = JSON.parse(localStorage.getItem('projectList'));
+    let flag = true;
+    for (id in projectList) {
+        flag = false;
+        $('#openProjectDialog').append(`<label class="option"><input type="radio" name="projectId" value="${id}" />${projectList[id]}<i class="fa fa-times deleteOfflineProject" onclick="deleteOfflineProject('${id}')"></i></label>`);
+    }
+    if (flag) $('#openProjectDialog').append('<p>Looks like no circuit has been saved yet. Create a new one and save it!</p>');
+    $('#openProjectDialog').dialog({
+        width: 'auto',
+        buttons: !flag ? [{
+            text: 'Open Project',
+            click() {
+                if (!$('input[name=projectId]:checked').val()) return;
+                load(JSON.parse(localStorage.getItem($('input[name=projectId]:checked').val())));
+                $(this).dialog('close');
+            },
+        }] : [],
+
+    });
+}
+/**
+ * Flag for project saved or not
+ * @type {boolean}
+ * @category data
+ */
+let projectSaved = true;
+export function projectSavedSet(param) {
+    projectSaved = param;
+}
+
+
+/**
+ * Helper function to store to localStorage -- needs to be deprecated/removed
+ * @category data
+ */
+export function saveOffline() {
+    const data = generateSaveData();
+    localStorage.setItem(projectId, data);
+    const temp = JSON.parse(localStorage.getItem('projectList')) || {};
+    temp[projectId] = projectName;
+    localStorage.setItem('projectList', JSON.stringify(temp));
+    showMessage(`We have saved your project: ${projectName} in your browser's localStorage`);
+}
+
+/**
+ * Checks if any circuit has unsaved data
+ * @category data
+ */
+function checkToSave() {
+    let saveFlag = false;
+    // eslint-disable-next-line no-restricted-syntax
+    for (id in scopeList) {
+        saveFlag |= checkIfBackup(scopeList[id]);
+    }
+    return saveFlag;
+}
+
+/**
+ * Prompt user to save data if unsaved
+ * @category data
+ */
+window.onbeforeunload = function () {
+    if (projectSaved || embed) return;
+
+    if (!checkToSave()) return;
+
+    alert('You have unsaved changes on this page. Do you want to leave this page and discard your changes or stay on this page?');
+    const data = generateSaveData('Untitled');
+    localStorage.setItem('recover', data);
+    // eslint-disable-next-line consistent-return
+    return 'Are u sure u want to leave? Any unsaved changes may not be recoverable';
+};
+
+
+/**
+ * Function to clear project
+ * @category data
+ */
+export function clearProject() {
+    if (confirm('Would you like to clear the project?')) {
+        globalScope = undefined;
+        resetScopeList();
+        $('.circuits').remove();
+        newCircuit('main');
+        showMessage('Your project is as good as new!');
+    }
+}
+
+/**
+ Function used to start a new project while prompting confirmation from the user
+ * @param {boolean} verify - flag to verify a new project
+ * @category data
+ */
+export function newProject(verify) {
+    if (verify || projectSaved || !checkToSave() || confirm('What you like to start a new project? Any unsaved changes will be lost.')) {
+        clearProject();
+        localStorage.removeItem('recover');
+        window.location = '/simulator';
+
+        projectName = undefined;
+        projectId = generateId();
+        showMessage('New Project has been created!');
+    }
+}
diff --git a/src/data/save.js b/src/data/save.js
new file mode 100755
index 0000000..1dbe602
--- /dev/null
+++ b/src/data/save.js
@@ -0,0 +1,332 @@
+import { scopeList } from '../circuit';
+import { resetup } from '../setup';
+import { update } from '../engine';
+import { stripTags, showMessage } from '../utils';
+import { backUp } from './backupCircuit';
+import simulationArea from '../simulationArea';
+import backgroundArea from '../backgroundArea';
+import { findDimensions } from '../canvasApi';
+import { projectSavedSet } from './project';
+
+/**
+ * Function to set the name of project.
+ * @param {string} name - name for project
+ * @category data
+ */
+export function setProjectName(name) {
+    name = stripTags(name);
+    const projectName = name;
+    $('#projectName').html(name);
+}
+
+/**
+ * Helper function to save canvas as image based on image type
+ * @param {string} name -name of the circuit
+ * @param {string} imgType - image type ex: png,jpg etc.
+ * @category data
+ */
+function downloadAsImg(name, imgType) {
+    const gh = simulationArea.canvas.toDataURL(`image/${imgType}`);
+    const anchor = document.createElement('a');
+    anchor.href = gh;
+    anchor.download = `${name}.${imgType}`;
+    anchor.click();
+}
+
+/**
+ * Generates JSON of the entire project
+ * @param {string} name - the name of project
+ * @return {JSON}
+ * @category data
+ */
+export function generateSaveData(name) {
+    data = {};
+
+    // Prompts for name, defaults to Untitled
+    name = projectName || name || prompt('Enter Project Name:') || 'Untitled';
+    data.name = stripTags(name);
+    projectName = data.name;
+    setProjectName(projectName);
+
+    // Save project details
+    data.timePeriod = simulationArea.timePeriod;
+    data.clockEnabled = simulationArea.clockEnabled;
+    data.projectId = projectId;
+    data.focussedCircuit = globalScope.id;
+
+    // Project Circuits, each scope is one circuit
+    data.scopes = [];
+    const dependencyList = {};
+    const completed = {};
+
+    // Getting list of dependencies for each circuit
+    for (id in scopeList) { dependencyList[id] = scopeList[id].getDependencies(); }
+
+    // Helper function to save Scope
+    // Recursively saves inner subcircuits first, before saving parent circuits
+    function saveScope(id) {
+        if (completed[id]) return;
+
+        for (let i = 0; i < dependencyList[id].length; i++) {
+            // Save inner subcircuits
+            saveScope(dependencyList[id][i]);
+        }
+
+        completed[id] = true;
+
+        update(scopeList[id], true); // For any pending integrity checks on subcircuits
+
+        data.scopes.push(backUp(scopeList[id]));
+    }
+
+    // Save all circuits
+    for (id in scopeList) { saveScope(id); }
+
+    // convert to text
+    data = JSON.stringify(data);
+    return data;
+}
+
+// Helper function to download text
+function download(filename, text) {
+    const pom = document.createElement('a');
+    pom.setAttribute('href', `data:text/plain;charset=utf-8,${encodeURIComponent(text)}`);
+    pom.setAttribute('download', filename);
+
+
+    if (document.createEvent) {
+        const event = document.createEvent('MouseEvents');
+        event.initEvent('click', true, true);
+        pom.dispatchEvent(event);
+    } else {
+        pom.click();
+    }
+}
+
+/**
+ * Function to generate image for the circuit
+ * @param {string} imgType - ex: png,jpg etc.
+ * @param {string} view - view type ex: full
+ * @param {boolean} transparent - tranparent bg or not
+ * @param {number} resolution - resolution of the image
+ * @param {boolean=} down - will download if true
+ * @category data
+ */
+export function generateImage(imgType, view, transparent, resolution, down = true) {
+    // Backup all data
+    const backUpOx = globalScope.ox;
+    const backUpOy = globalScope.oy;
+    const backUpWidth = width;
+    const backUpHeight = height;
+    const backUpScale = globalScope.scale;
+    const backUpContextBackground = backgroundArea.context;
+    const backUpContextSimulation = simulationArea.context;
+
+    backgroundArea.context = simulationArea.context;
+
+    globalScope.ox *= 1 / backUpScale;
+    globalScope.oy *= 1 / backUpScale;
+
+    // If SVG, create SVG context - using canvas2svg here
+    if (imgType === 'svg') {
+        simulationArea.context = new C2S(width, height);
+        resolution = 1;
+    } else if (imgType !== 'png') {
+        transparent = false;
+    }
+
+    globalScope.scale = resolution;
+
+    const scope = globalScope;
+
+    // Focus circuit
+    const flag = 1;
+    if (flag) {
+        if (view === 'full') {
+            findDimensions();
+            const minX = simulationArea.minWidth;
+            const minY = simulationArea.minHeight;
+            const maxX = simulationArea.maxWidth;
+            const maxY = simulationArea.maxHeight;
+            width = (maxX - minX + 100) * resolution;
+            height = (maxY - minY + 100) * resolution;
+
+            globalScope.ox = (-minX + 50) * resolution;
+            globalScope.oy = (-minY + 50) * resolution;
+        } else {
+            globalScope.ox *= resolution;
+            globalScope.oy *= resolution;
+            width = (width * resolution) / backUpScale;
+            height = (height * resolution) / backUpScale;
+        }
+    }
+
+    globalScope.ox = Math.round(globalScope.ox);
+    globalScope.oy = Math.round(globalScope.oy);
+
+    simulationArea.canvas.width = width;
+    simulationArea.canvas.height = height;
+    backgroundArea.canvas.width = width;
+    backgroundArea.canvas.height = height;
+
+
+    backgroundArea.context = simulationArea.context;
+
+    simulationArea.clear();
+
+    // Background
+    if (!transparent) {
+        simulationArea.context.fillStyle = 'white';
+        simulationArea.context.rect(0, 0, width, height);
+        simulationArea.context.fill();
+    }
+
+    // Draw circuits, why is it updateOrder and not renderOrder?
+    for (let i = 0; i < renderOrder.length; i++) {
+        for (let j = 0; j < scope[renderOrder[i]].length; j++) { scope[renderOrder[i]][j].draw(); }
+    }
+
+    let returnData;
+    // If circuit is to be downloaded, download, other wise return dataURL
+    if (down) {
+        if (imgType === 'svg') {
+            const mySerializedSVG = simulationArea.context.getSerializedSvg(); // true here, if you need to convert named to numbered entities.
+            download(`${globalScope.name}.svg`, mySerializedSVG);
+        } else {
+            downloadAsImg(globalScope.name, imgType);
+        }
+    } else {
+        returnData = simulationArea.canvas.toDataURL(`image/${imgType}`);
+    }
+
+    // Restore everything
+    width = backUpWidth;
+    height = backUpHeight;
+    simulationArea.canvas.width = width;
+    simulationArea.canvas.height = height;
+    backgroundArea.canvas.width = width;
+    backgroundArea.canvas.height = height;
+    globalScope.scale = backUpScale;
+    backgroundArea.context = backUpContextBackground;
+    simulationArea.context = backUpContextSimulation;
+    globalScope.ox = backUpOx;
+    globalScope.oy = backUpOy;
+
+    resetup();
+
+    if (!down) return returnData;
+}
+
+
+/**
+ * Function that is used to save image for display in the website
+ * @return {JSON}
+ * @category data
+ */
+function generateImageForOnline() {
+    simulationArea.lastSelected = undefined; // Unselect any selections
+
+    // Fix aspect ratio to 1.6
+    if (width > height * 1.6) {
+        height = width / 1.6;
+    } else {
+        width = height * 1.6;
+    }
+
+    // Center circuits
+    globalScope.centerFocus();
+
+    // Ensure image is approximately 700 x 440
+    const resolution = Math.min(700 / (simulationArea.maxWidth - simulationArea.minWidth), 440 / (simulationArea.maxHeight - simulationArea.minHeight));
+
+    data = generateImage('jpeg', 'current', false, resolution, false);
+
+    // Restores Focus
+    globalScope.centerFocus(false);
+    return data;
+}
+/**
+ * Function called when you save acircuit online
+ * @category data
+ * @exports save
+ */
+export default function save() {
+    projectSavedSet(true);
+
+    $('.loadingIcon').fadeIn();
+    const data = generateSaveData();
+
+    if (!userSignedIn) {
+        // user not signed in, save locally temporarily and force user to sign in
+        localStorage.setItem('recover_login', data);
+        // Asking user whether they want to login.
+        if (confirm('You have to login to save the project, you will be redirected to the login page.')) window.location.href = '/users/sign_in';
+        else $('.loadingIcon').fadeOut();
+        // eslint-disable-next-line camelcase
+    } else if (logix_project_id === 0) {
+        // Create new project - this part needs to be improved and optimised
+        const form = $('<form/>', {
+            action: '/simulator/create_data',
+            method: 'post',
+        });
+        form.append(
+            $('<input>', {
+                type: 'hidden',
+                name: 'authenticity_token',
+                value: $('meta[name="csrf-token"]').attr('content'),
+            }),
+        );
+        form.append(
+            $('<input>', {
+                type: 'text',
+                name: 'data',
+                value: data,
+            }),
+        );
+        form.append(
+            $('<input>', {
+                type: 'text',
+                name: 'image',
+                value: generateImageForOnline(),
+            }),
+        );
+
+        form.append(
+            $('<input>', {
+                type: 'text',
+                name: 'name',
+                value: projectName,
+            }),
+        );
+
+        $('body').append(form);
+        form.submit();
+    } else {
+        // updates project - this part needs to be improved and optimised
+        $.ajax({
+            url: '/simulator/update_data',
+            type: 'POST',
+            beforeSend(xhr) {
+                xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content'));
+            },
+            data: {
+                data,
+                id: logix_project_id,
+                image: generateImageForOnline(),
+                name: projectName,
+            },
+            success(response) {
+                showMessage(`We have saved your project: ${projectName} in our servers.`);
+                $('.loadingIcon').fadeOut();
+                localStorage.removeItem('recover');
+            },
+            failure(err) {
+                showMessage("There was an error, we couldn't save to our servers");
+                $('.loadingIcon').fadeOut();
+            },
+        });
+    }
+
+    // Restore everything
+    resetup();
+}
diff --git a/src/data/saveImage.js b/src/data/saveImage.js
new file mode 100755
index 0000000..9e58736
--- /dev/null
+++ b/src/data/saveImage.js
@@ -0,0 +1,44 @@
+/**
+ * Helper function to show prompt to save image
+ * Options - resolution, image type, view
+ * @param {Scope=} scope - useless though
+ * @category data
+ */
+import { generateImage } from './save';
+
+/**
+ * Function called to generate a prompt to save an image
+ * @category data
+ * @param {Scope=} - circuit whose image we want
+ * @exports createSaveAsImgPrompt
+ */
+export default function createSaveAsImgPrompt(scope = globalScope) {
+    $('#saveImageDialog').dialog({
+        width: 'auto',
+        buttons: [{
+            text: 'Render Circuit Image',
+            click() {
+                generateImage($('input[name=imgType]:checked').val(), $('input[name=view]:checked').val(), $('input[name=transparent]:checked').val(), $('input[name=resolution]:checked').val());
+                $(this).dialog('close');
+            },
+        }],
+
+    });
+    $('input[name=imgType]').change(() => {
+        $('input[name=resolution]').prop('disabled', false);
+        $('input[name=transparent]').prop('disabled', false);
+        const imgType = $('input[name=imgType]:checked').val();
+        if (imgType === 'svg') {
+            $('input[name=resolution][value=1]').click();
+            $('input[name=view][value="full"]').click();
+            $('input[name=resolution]').prop('disabled', true);
+            $('input[name=view]').prop('disabled', true);
+        } else if (imgType !== 'png') {
+            $('input[name=transparent]').attr('checked', false);
+            $('input[name=transparent]').prop('disabled', true);
+            $('input[name=view]').prop('disabled', false);
+        } else {
+            $('input[name=view]').prop('disabled', false);
+        }
+    });
+}
diff --git a/src/data/undo.js b/src/data/undo.js
new file mode 100755
index 0000000..44aa8e1
--- /dev/null
+++ b/src/data/undo.js
@@ -0,0 +1,44 @@
+/* eslint-disable import/no-cycle */
+/**
+ * Function to restore copy from backup
+ * @param {Scope=} scope - The circuit on which undo is called
+ * @category data
+ */
+import { layoutModeGet } from '../layoutMode';
+import Scope, { scopeList } from '../circuit';
+import { loadScope } from './load';
+import { updateRestrictedElementsInScope } from '../restrictedElementDiv';
+import { forceResetNodesSet } from '../engine';
+
+/**
+ * Function called to generate a prompt to save an image
+ * @param {Scope=} - the circuit in which we want to call undo
+ * @category data
+ * @exports undo
+ */
+export default function undo(scope = globalScope) {
+    if (layoutModeGet()) return;
+    if (scope.backups.length === 0) return;
+    const backupOx = globalScope.ox;
+    const backupOy = globalScope.oy;
+    const backupScale = globalScope.scale;
+    globalScope.ox = 0;
+    globalScope.oy = 0;
+    const tempScope = new Scope(scope.name);
+    loading = true;
+    loadScope(tempScope, JSON.parse(scope.backups.pop()));
+    tempScope.backups = scope.backups;
+    tempScope.id = scope.id;
+    tempScope.name = scope.name;
+    scopeList[scope.id] = tempScope;
+    globalScope = tempScope;
+    globalScope.ox = backupOx;
+    globalScope.oy = backupOy;
+    globalScope.scale = backupScale;
+    loading = false;
+    forceResetNodesSet(true);
+
+    // Updated restricted elements
+    updateRestrictedElementsInScope();
+}
+// for html file
diff --git a/src/dec-bin-hex.js b/src/dec-bin-hex.js
new file mode 100644
index 0000000..8c9f5af
--- /dev/null
+++ b/src/dec-bin-hex.js
@@ -0,0 +1,58 @@
+/**
+ * creates a dialog for inter converting values in different bases.
+ */
+export function createBitConverter() {
+    $('#bitconverterprompt').append(`
+    <label style='color:grey'>Decimal value</label><br><input  type='text' id='decimalInput' label="Decimal" name='text1'><br><br>
+    <label  style='color:grey'>Binary value</label><br><input  type='text' id='binaryInput' label="Binary" name='text1'><br><br>
+    <label  style='color:grey'>Octal value</label><br><input  type='text' id='octalInput' label="Octal" name='text1'><br><br>
+    <label  style='color:grey'>Hexadecimal value</label><br><input  type='text' id='hexInput' label="Hex" name='text1'><br><br>
+    `);
+    $('#bitconverterprompt').dialog({
+        buttons: [
+            {
+                text: 'Reset',
+                click() {
+                    $('#decimalInput').val('0');
+                    $('#binaryInput').val('0');
+                    $('#octalInput').val('0');
+                    $('#hexInput').val('0');
+                },
+            },
+        ],
+    });
+
+    $('#decimalInput').on('keyup', () => {
+        const x = parseInt($('#decimalInput').val(), 10);
+        setBaseValues(x);
+    });
+
+    $('#binaryInput').on('keyup', () => {
+        const x = parseInt($('#binaryInput').val(), 2);
+        setBaseValues(x);
+    });
+
+    $('#hexInput').on('keyup', () => {
+        const x = parseInt($('#hexInput').val(), 16);
+        setBaseValues(x);
+    });
+
+    $('#octalInput').on('keyup', () => {
+        const x = parseInt($('#octalInput').val(), 8);
+        setBaseValues(x);
+    });
+}
+// convertors
+const convertors = {
+    dec2bin: (x) => `0b${x.toString(2)}`,
+    dec2hex: (x) => `0x${x.toString(16)}`,
+    dec2octal: (x) => `0${x.toString(8)}`,
+};
+
+function setBaseValues(x) {
+    if (isNaN(x)) return;
+    $('#binaryInput').val(convertors.dec2bin(x));
+    $('#octalInput').val(convertors.dec2octal(x));
+    $('#hexInput').val(convertors.dec2hex(x));
+    $('#decimalInput').val(x);
+}
diff --git a/src/embed.js b/src/embed.js
new file mode 100644
index 0000000..19d3a31
--- /dev/null
+++ b/src/embed.js
@@ -0,0 +1,73 @@
+/* eslint-disable import/no-cycle */
+// Helper functions for when circuit is embedded
+import { scopeList, circuitProperty } from './circuit';
+import simulationArea from './simulationArea';
+import {
+    scheduleUpdate, wireToBeCheckedSet, updateCanvasSet, gridUpdateSet,
+} from './engine';
+import { prevPropertyObjGet, prevPropertyObjSet } from './ux';
+
+
+// circuitProperty.toggleFullScreen = toggleFullScreen;
+$(document).ready(() => {
+    if (embed) {
+        // Clock features
+        $('#clockProperty').append("<label class=''> <input type='button' class='objectPropertyAttributeEmbed' name='toggleFullScreen' value='Fullscreen' style='font-size: 20px'> </input> </label></br>");
+        $('#clockProperty').append(`Time: <input class='objectPropertyAttributeEmbed' min='50' type='number' style='width:48px' step='10' name='changeClockTime'  value='${simulationArea.timePeriod}'><br>`);
+        $('#clockProperty').append(`Clock: <label class='switch'> <input type='checkbox' ${['', 'checked'][simulationArea.clockEnabled + 0]} class='objectPropertyAttributeEmbedChecked' name='changeClockEnable' > <span class='slider'></span> </label><br>`);
+
+        // Following codes need to be removed
+        $('.objectPropertyAttributeEmbed').on('change keyup paste click', function () {
+            scheduleUpdate();
+            updateCanvasSet(true);
+            wireToBeCheckedSet(1);
+            if (simulationArea.lastSelected && simulationArea.lastSelected[this.name]) { prevPropertyObjSet(simulationArea.lastSelected[this.name](this.value)) || prevPropertyObjGet(); } else { circuitProperty[this.name](this.value); }
+        });
+
+        // Following codes need to be removed
+        $('.objectPropertyAttributeEmbedChecked').on('change keyup paste click', function () {
+            scheduleUpdate();
+            updateCanvasSet(true);
+            wireToBeCheckedSet(1);
+            if (simulationArea.lastSelected && simulationArea.lastSelected[this.name]) { prevPropertyObjSet(simulationArea.lastSelected[this.name](this.value)) || prevPropertyObjGet(); } else { circuitProperty[this.name](this.checked); }
+        });
+    }
+});
+// Full screen toggle helper function
+function toggleFullScreen(value) {
+    if (!getfullscreenelement()) {
+        GoInFullscreen(document.documentElement);
+    } else {
+        GoOutFullscreen();
+    }
+}
+// Center focus accordingly
+function exitHandler() {
+    setTimeout(() => {
+        Object.keys(scopeList).forEach((id) => {
+            scopeList[id].centerFocus(true);
+        });
+        gridUpdateSet(true);
+        scheduleUpdate();
+    }, 100);
+}
+
+function GoInFullscreen(element) {
+    if (element.requestFullscreen) { element.requestFullscreen(); } else if (element.mozRequestFullScreen) { element.mozRequestFullScreen(); } else if (element.webkitRequestFullscreen) { element.webkitRequestFullscreen(); } else if (element.msRequestFullscreen) { element.msRequestFullscreen(); }
+}
+
+function GoOutFullscreen() {
+    if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.webkitExitFullscreen) { document.webkitExitFullscreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); }
+}
+
+function getfullscreenelement() {
+    return document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement;
+}
+
+// Full screen Listeners
+if (document.addEventListener) {
+    document.addEventListener('webkitfullscreenchange', exitHandler, false);
+    document.addEventListener('mozfullscreenchange', exitHandler, false);
+    document.addEventListener('fullscreenchange', exitHandler, false);
+    document.addEventListener('MSFullscreenChange', exitHandler, false);
+}
diff --git a/src/embedListeners.js b/src/embedListeners.js
new file mode 100644
index 0000000..9faff14
--- /dev/null
+++ b/src/embedListeners.js
@@ -0,0 +1,245 @@
+/* eslint-disable import/no-cycle */
+// Listeners when circuit is embedded
+// Refer listeners.js
+import simulationArea from './simulationArea';
+import {
+    scheduleUpdate, update, updateSelectionsAndPane,
+    wireToBeCheckedSet, updatePositionSet, updateSimulationSet,
+    updateCanvasSet, gridUpdateSet, errorDetectedSet,
+} from './engine';
+import { changeScale } from './canvasApi';
+import { copy, paste } from './events';
+
+const unit = 10;
+export default function startListeners() {
+    window.addEventListener('keyup', (e) => {
+        scheduleUpdate(1);
+        if (e.keyCode == 16) {
+            simulationArea.shiftDown = false;
+        }
+        if (e.key == 'Meta' || e.key == 'Control') {
+            simulationArea.controlDown = false;
+        }
+    });
+
+    document.getElementById('simulationArea').addEventListener('mousedown', (e) => {
+        errorDetectedSet(false);
+        updateSimulationSet(true);
+        updatePositionSet(true);
+        updateCanvasSet(true);
+
+        simulationArea.lastSelected = undefined;
+        simulationArea.selected = false;
+        simulationArea.hover = undefined;
+        const rect = simulationArea.canvas.getBoundingClientRect();
+        simulationArea.mouseDownRawX = (e.clientX - rect.left) * DPR;
+        simulationArea.mouseDownRawY = (e.clientY - rect.top) * DPR;
+        simulationArea.mouseDownX = Math.round(((simulationArea.mouseDownRawX - globalScope.ox) / globalScope.scale) / unit) * unit;
+        simulationArea.mouseDownY = Math.round(((simulationArea.mouseDownRawY - globalScope.oy) / globalScope.scale) / unit) * unit;
+        simulationArea.mouseDown = true;
+        simulationArea.oldx = globalScope.ox;
+        simulationArea.oldy = globalScope.oy;
+
+
+        e.preventDefault();
+        scheduleUpdate(1);
+    });
+
+    document.getElementById('simulationArea').addEventListener('mousemove', () => {
+        const ele = document.getElementById('elementName');
+        if (globalScope && simulationArea && simulationArea.objectList) {
+            let { objectList } = simulationArea;
+            objectList = objectList.filter((val) => val !== 'wires');
+
+            for (let i = 0; i < objectList.length; i++) {
+                for (let j = 0; j < globalScope[objectList[i]].length; j++) {
+                    if (globalScope[objectList[i]][j].isHover()) {
+                        ele.style.display = 'block';
+                        if (objectList[i] === 'SubCircuit') {
+                            ele.innerHTML = `Subcircuit: ${globalScope.SubCircuit[j].data.name}`;
+                        } else {
+                            ele.innerHTML = `CircuitElement: ${objectList[i]}`;
+                        }
+                        return;
+                    }
+                }
+            }
+        }
+
+        ele.style.display = 'none';
+        document.getElementById('elementName').innerHTML = '';
+    });
+
+    window.addEventListener('mousemove', (e) => {
+        const rect = simulationArea.canvas.getBoundingClientRect();
+        simulationArea.mouseRawX = (e.clientX - rect.left) * DPR;
+        simulationArea.mouseRawY = (e.clientY - rect.top) * DPR;
+        simulationArea.mouseXf = (simulationArea.mouseRawX - globalScope.ox) / globalScope.scale;
+        simulationArea.mouseYf = (simulationArea.mouseRawY - globalScope.oy) / globalScope.scale;
+        simulationArea.mouseX = Math.round(simulationArea.mouseXf / unit) * unit;
+        simulationArea.mouseY = Math.round(simulationArea.mouseYf / unit) * unit;
+
+        updateCanvasSet(true);
+        if (simulationArea.lastSelected == globalScope.root) {
+            updateCanvasSet(true);
+            let fn;
+            fn = function () {
+                updateSelectionsAndPane();
+            };
+            scheduleUpdate(0, 20, fn);
+        } else {
+            scheduleUpdate(0, 200);
+        }
+    });
+    window.addEventListener('keydown', (e) => {
+        errorDetectedSet(false);
+        updateSimulationSet(true);
+        updatePositionSet(true);
+
+        // zoom in (+)
+        if (e.key == 'Meta' || e.key == 'Control') {
+            simulationArea.controlDown = true;
+        }
+
+        if (simulationArea.controlDown && (e.keyCode == 187 || e.KeyCode == 171)) {
+            e.preventDefault();
+            if (globalScope.scale < 4 * DPR) { changeScale(0.1 * DPR); }
+        }
+
+        // zoom out (-)
+        if (simulationArea.controlDown && (e.keyCode == 189 || e.Keycode == 173)) {
+            e.preventDefault();
+            if (globalScope.scale > 0.5 * DPR) { changeScale(-0.1 * DPR); }
+        }
+
+
+        if (simulationArea.mouseRawX < 0 || simulationArea.mouseRawY < 0 || simulationArea.mouseRawX > width || simulationArea.mouseRawY > height) return;
+
+        scheduleUpdate(1);
+        updateCanvasSet(true);
+
+        if (simulationArea.lastSelected && simulationArea.lastSelected.keyDown) {
+            if (e.key.toString().length == 1 || e.key.toString() == 'Backspace') {
+                simulationArea.lastSelected.keyDown(e.key.toString());
+                return;
+            }
+        }
+        if (simulationArea.lastSelected && simulationArea.lastSelected.keyDown2) {
+            if (e.key.toString().length == 1) {
+                simulationArea.lastSelected.keyDown2(e.key.toString());
+                return;
+            }
+        }
+
+        // if (simulationArea.lastSelected && simulationArea.lastSelected.keyDown3) {
+        //     if (e.key.toString() != "Backspace" && e.key.toString() != "Delete") {
+        //         simulationArea.lastSelected.keyDown3(e.key.toString());
+        //         return;
+        //     }
+
+        // }
+
+        if (e.key == 'T' || e.key == 't') {
+            simulationArea.changeClockTime(prompt('Enter Time:'));
+        }
+    });
+    document.getElementById('simulationArea').addEventListener('dblclick', (e) => {
+        scheduleUpdate(2);
+        if (simulationArea.lastSelected && simulationArea.lastSelected.dblclick !== undefined) {
+            simulationArea.lastSelected.dblclick();
+        }
+    });
+
+
+    window.addEventListener('mouseup', (e) => {
+        simulationArea.mouseDown = false;
+        errorDetectedSet(false);
+        updateSimulationSet(true);
+        updatePositionSet(true);
+        updateCanvasSet(true);
+        gridUpdateSet(true);
+        wireToBeCheckedSet(1);
+
+        scheduleUpdate(1);
+    });
+    window.addEventListener('mousedown', function (e) {
+        this.focus();
+    });
+
+    document.getElementById('simulationArea').addEventListener('mousewheel', MouseScroll);
+    document.getElementById('simulationArea').addEventListener('DOMMouseScroll', MouseScroll);
+
+    function MouseScroll(event) {
+        updateCanvasSet(true);
+
+        event.preventDefault();
+        const deltaY = event.wheelDelta ? event.wheelDelta : -event.detail;
+        const scrolledUp = deltaY < 0;
+        const scrolledDown = deltaY > 0;
+
+        if (event.ctrlKey) {
+            if (scrolledUp && globalScope.scale > 0.5 * DPR) {
+                changeScale(-0.1 * DPR);
+            }
+            if (scrolledDown && globalScope.scale < 4 * DPR) {
+                changeScale(0.1 * DPR);
+            }
+        } else {
+            if (scrolledUp && globalScope.scale < 4 * DPR) {
+                changeScale(0.1 * DPR);
+            }
+            if (scrolledDown && globalScope.scale > 0.5 * DPR) {
+                changeScale(-0.1 * DPR);
+            }
+        }
+
+        updateCanvasSet(true);
+        gridUpdateSet(true);
+        update(); // Schedule update not working, this is INEFFICENT
+    }
+
+    document.addEventListener('cut', (e) => {
+        simulationArea.copyList = simulationArea.multipleObjectSelections.slice();
+        if (simulationArea.lastSelected && simulationArea.lastSelected !== simulationArea.root && !simulationArea.copyList.contains(simulationArea.lastSelected)) {
+            simulationArea.copyList.push(simulationArea.lastSelected);
+        }
+
+        const textToPutOnClipboard = cut(simulationArea.copyList);
+        if (isIe) {
+            window.clipboardData.setData('Text', textToPutOnClipboard);
+        } else {
+            e.clipboardData.setData('text/plain', textToPutOnClipboard);
+        }
+        e.preventDefault();
+    });
+    document.addEventListener('copy', (e) => {
+        simulationArea.copyList = simulationArea.multipleObjectSelections.slice();
+        if (simulationArea.lastSelected && simulationArea.lastSelected !== simulationArea.root && !simulationArea.copyList.contains(simulationArea.lastSelected)) {
+            simulationArea.copyList.push(simulationArea.lastSelected);
+        }
+
+        const textToPutOnClipboard = copy(simulationArea.copyList);
+        if (isIe) {
+            window.clipboardData.setData('Text', textToPutOnClipboard);
+        } else {
+            e.clipboardData.setData('text/plain', textToPutOnClipboard);
+        }
+        e.preventDefault();
+    });
+
+    document.addEventListener('paste', (e) => {
+        let data;
+        if (isIe) {
+            data = window.clipboardData.getData('Text');
+        } else {
+            data = e.clipboardData.getData('text/plain');
+        }
+
+        paste(data);
+        e.preventDefault();
+    });
+}
+
+
+let isIe = (navigator.userAgent.toLowerCase().indexOf('msie') != -1
+    || navigator.userAgent.toLowerCase().indexOf('trident') != -1);
diff --git a/src/engine.js b/src/engine.js
index 1db494d..8a33d45 100644
--- a/src/engine.js
+++ b/src/engine.js
@@ -1,232 +1,349 @@
-import { plotArea } from "./plotArea";
-import { simulationArea } from "./simulationArea";
-import { dots, canvasMessage } from "./canvasApi";
-import { showProperties } from "./ux";
-// Engine.js
-// Core of the simulation and rendering algorithm
-
-var totalObjects = 0;
-
-// Function to check for any UI update, it is throttled by time
-export function scheduleUpdate(count = 0, time = 100, fn) {
-    // console.log(simulationArea.lastSelected)
-
-    if (count && !layoutMode) { // Force update
-        update();
-        for (var i = 0; i < count; i++)
-            setTimeout(update, 10 + 50 * i);
-    }
-
-    if (willBeUpdated) return; // Throttling
-
-    willBeUpdated = true;
-
-    if (layoutMode) {
-        setTimeout(layoutUpdate, time); // Update layout, different algorithm
-        return;
-    }
-
-    // Call a function before update ..
-    if (fn)
-        setTimeout(function () {
-            fn();
-            update();
-        }, time);
-    else setTimeout(update, time);
+/* eslint-disable import/no-cycle */
+/* eslint-disable no-use-before-define */
+/* eslint-disable no-continue */
+/* eslint-disable no-param-reassign */
+/* eslint-disable no-bitwise */
+import { layoutModeGet } from './layoutMode';
+import plotArea from './plotArea';
+import { layoutUpdate } from './layoutMode';
+import simulationArea from './simulationArea';
+import {
+    dots, canvasMessage, findDimensions, rect2,
+} from './canvasApi';
+import { showProperties, prevPropertyObjGet } from './ux';
+import { showError } from './utils';
+import miniMapArea from './minimap';
+import { createNodeGet } from './listeners';
+import { resetup } from './setup';
+
+/**
+ * Core of the simulation and rendering algorithm.
+ */
+
+/**
+ * @type {number} engine
+ * @category engine
+ */
+let wireToBeChecked = 0;
+
+/**
+ * Used to set wireChecked boolean which updates wires in UI if true (or 1). 2 if some problem and it is handled.
+ * @param {number} param - value of wirechecked
+ * @category engine
+ */
+export function wireToBeCheckedSet(param) {
+    wireToBeChecked = param;
+}
 
+/**
+ * scheduleUpdate() will be called if true
+ * @type {boolean}
+ * @category engine
+ */
+let willBeUpdated = false;
+
+/**
+ * used to set willBeUpdated variable
+ * @type {boolean}
+ * @category engine
+ * @category engine
+ */
+export function willBeUpdatedSet(param) {
+    willBeUpdated = param;
 }
 
-// fn that calls update on everything else. If any change is there, it resolves the circuit and draws it again
+/**
+ * true if we have an element selected and
+ * is used when we are paning the grid.
+ * @type {boolean}
+ * @category engine
+ */
+let objectSelection = false;
+
+/**
+ * used to set the value of object selection,
+ * @param {boolean} param
+ * @category engine
+ */
+export function objectSelectionSet(param) {
+    objectSelection = param;
+}
 
-export function update(scope = globalScope, updateEverything = false) {
+/**
+ * Flag for updating position
+ * @type {boolean}
+ * @category engine
+ */
+let updatePosition = true;
+
+/**
+ * used to set the value of updatePosition.
+ * @param {boolean} param
+ * @category engine
+ */
+export function updatePositionSet(param) {
+    updatePosition = param;
+}
 
-    willBeUpdated = false;
-    if (loading == true || layoutMode) return;
+/**
+ * Flag for updating simulation
+ * @type {boolean}
+ * @category engine
+ */
+let updateSimulation = true;
+
+/**
+ * used to set the value of updateSimulation.
+ * @param {boolean} param
+ * @category engine
+ */
+export function updateSimulationSet(param) {
+    updateSimulation = param;
+}
+/**
+ * Flag for rendering
+ * @type {boolean}
+ * @category engine
+ */
+let updateCanvas = true;
+
+/**
+ * used to set the value of updateCanvas.
+ * @param {boolean} param
+ * @category engine
+ */
+export function updateCanvasSet(param) {
+    updateCanvas = param;
+}
 
-    var updated = false;
-    simulationArea.hover = undefined;
+/**
+ *  Flag for updating grid
+ * @type {boolean}
+ * @category engine
+ */
+let gridUpdate = true;
+
+/**
+ * used to set gridUpdate
+ * @param {boolean} param
+ * @category engine
+ */
+export function gridUpdateSet(param) {
+    gridUpdate = param;
+}
+/**
+ *  Flag for updating grid
+ * @type {boolean}
+ * @category engine
+ */
+let forceResetNodes = true;
+
+/**
+ * used to set forceResetNodes
+ * @param {boolean} param
+ * @category engine
+ */
+export function forceResetNodesSet(param) {
+    forceResetNodes = param;
+}
+/**
+ *  Flag for updating grid
+ * @type {boolean}
+ * @category engine
+ */
+let errorDetected = false;
+
+/**
+ * used to set errorDetected
+ * @param {boolean} param
+ * @category engine
+ */
+export function errorDetectedSet(param) {
+    errorDetected = param;
+}
 
-    // Update wires
-    if (wireToBeChecked || updateEverything) {
-        if (wireToBeChecked == 2) wireToBeChecked = 0; // this required due to timing issues
-        else wireToBeChecked++;
-        // WHY IS THIS REQUIRED ???? we are checking inside wire ALSO
-        var prevLength = scope.wires.length;
-        for (var i = 0; i < scope.wires.length; i++) {
-            scope.wires[i].checkConnections();
-            if (scope.wires.length != prevLength) {
-                prevLength--;
-                i--;
-            }
-        }
-        scheduleUpdate();
-    }
+/**
+ * used to set errorDetected
+ * @returns {boolean} errorDetected
+ * @category engine
+ */
+export function errorDetectedGet() {
+    return errorDetected;
+}
 
-    // Update subcircuits
-    if (updateSubcircuit || updateEverything) {
-        for (var i = 0; i < scope.SubCircuit.length; i++)
-            scope.SubCircuit[i].reset();
-        updateSubcircuit = false;
+/**
+ * details of where and what canvas message has to be shown.
+ * @type {Object}
+ * @property {number} x - x cordinate of message
+ * @property {number} y - x cordinate of message
+ * @property {number} string - the message
+ * @category engine
+*/
+export let canvasMessageData = {
+    x: undefined,
+    y: undefined,
+    string: undefined,
+};
+
+/**
+ *  Flag for updating subCircuits
+ * @type {boolean}
+ * @category engine
+ */
+let updateSubcircuit = true;
+
+/**
+ * used to set updateSubcircuit
+ * @param {boolean} param
+ * @category engine
+ */
+export function updateSubcircuitSet(param) {
+    // console.log(updateSubcircuit,param);
+    if (updateSubcircuit != param) {
+        updateSubcircuit = param;
+        return true;
     }
+    updateSubcircuit = param;
+    return false;
+}
 
-    // Update UI position
-    if (updatePosition || updateEverything) {
-        for (var i = 0; i < updateOrder.length; i++)
-        for (var j = 0; j < scope[updateOrder[i]].length; j++) {
-                updated |= scope[updateOrder[i]][j].update();
-            }
+/**
+ * turn light mode on
+ * @param {boolean} val -- new value for light mode
+ * @category engine
+ */
+export function changeLightMode(val) {
+    if (!val && lightMode) {
+        lightMode = false;
+        DPR = window.devicePixelRatio || 1;
+        globalScope.scale *= DPR;
+    } else if (val && !lightMode) {
+        lightMode = true;
+        globalScope.scale /= DPR;
+        DPR = 1;
+        $('#miniMap').fadeOut('fast');
     }
+    resetup();
+}
 
-    // Updates multiple objectselections and panes window
-    if (updatePosition || updateEverything) {
-        updateSelectionsAndPane(scope);
+/**
+ * Function to render Canvas according th renderupdate order
+ * @param {Scope} scope - The circuit whose canvas we want to render
+ * @category engine
+ */
+export function renderCanvas(scope) {
+    if (layoutModeGet()) { // Different Algorithm
+        return;
     }
-
-    // Update MiniMap
-    if (!embed && simulationArea.mouseDown && simulationArea.lastSelected && simulationArea.lastSelected != globalScope.root) {
-        if (!lightMode)
-            $('#miniMap').fadeOut('fast');
+    const ctx = simulationArea.context;
+    // Reset canvas
+    simulationArea.clear();
+    // Update Grid
+    if (gridUpdate) {
+        gridUpdateSet(false);
+        dots();
     }
-
-    // Run simulation
-    if (updateSimulation) {
-        play();
+    canvasMessageData = {
+        x: undefined,
+        y: undefined,
+        string: undefined,
+    }; //  Globally set in draw fn ()
+    // Render objects
+    for (let i = 0; i < renderOrder.length; i++) {
+        for (let j = 0; j < scope[renderOrder[i]].length; j++) { scope[renderOrder[i]][j].draw(); }
     }
-
-    // Show properties of selected element
-    if (!embed && prevPropertyObj != simulationArea.lastSelected) {
-        if (simulationArea.lastSelected && simulationArea.lastSelected.objectType !== "Wire") {
-            showProperties(simulationArea.lastSelected);
-        } else {
-            // hideProperties();
-        }
+    // Show any message
+    if (canvasMessageData.string !== undefined) {
+        canvasMessage(ctx, canvasMessageData.string, canvasMessageData.x, canvasMessageData.y);
     }
-
-    //Draw, render everything
-    if (updateCanvas) {
-        renderCanvas(scope);
+    // If multiple object selections are going on, show selected area
+    if (objectSelection) {
+        ctx.beginPath();
+        ctx.lineWidth = 2;
+        ctx.strokeStyle = 'black';
+        ctx.fillStyle = 'rgba(0,0,0,0.1)';
+        rect2(ctx, simulationArea.mouseDownX, simulationArea.mouseDownY, simulationArea.mouseX - simulationArea.mouseDownX, simulationArea.mouseY - simulationArea.mouseDownY, 0, 0, 'RIGHT');
+        ctx.stroke();
+        ctx.fill();
     }
-    updateSimulation = updateCanvas = updatePosition = false;
-
-}
-
-// Function to find dimensions of the current circuit
-export function findDimensions(scope = globalScope) {
-    totalObjects = 0;
-    simulationArea.minWidth = undefined;
-    simulationArea.maxWidth = undefined;
-    simulationArea.minHeight = undefined;
-    simulationArea.maxHeight = undefined;
-    for (var i = 0; i < updateOrder.length; i++) {
-        if (updateOrder[i] !== 'wires')
-            for (var j = 0; j < scope[updateOrder[i]].length; j++) {
-
-                totalObjects += 1;
-                var obj = scope[updateOrder[i]][j];
-                if (totalObjects == 1) {
-                    simulationArea.minWidth = obj.absX();
-                    simulationArea.minHeight = obj.absY();
-                    simulationArea.maxWidth = obj.absX();
-                    simulationArea.maxHeight = obj.absY();
-                }
-                if (obj.objectType != 'Node') {
-                    if (obj.y - obj.upDimensionY < simulationArea.minHeight)
-                        simulationArea.minHeight = obj.y - obj.upDimensionY;
-                    if (obj.y + obj.downDimensionY > simulationArea.maxHeight)
-                        simulationArea.maxHeight = obj.y + obj.downDimensionY;
-                    if (obj.x - obj.leftDimensionX < simulationArea.minWidth)
-                        simulationArea.minWidth = obj.x - obj.leftDimensionX;
-                    if (obj.x + obj.rightDimensionX > simulationArea.maxWidth)
-                        simulationArea.maxWidth = obj.x + obj.rightDimensionX;
-                } else {
-                    if (obj.absY() < simulationArea.minHeight)
-                        simulationArea.minHeight = obj.absY();
-                    if (obj.absY() > simulationArea.maxHeight)
-                        simulationArea.maxHeight = obj.absY();
-                    if (obj.absX() < simulationArea.minWidth)
-                        simulationArea.minWidth = obj.absX();
-                    if (obj.absX() > simulationArea.maxWidth)
-                        simulationArea.maxWidth = obj.absX();
-                }
-
-            }
-
+    if (simulationArea.hover !== undefined) {
+        simulationArea.canvas.style.cursor = 'pointer';
+    } else if (createNodeGet()) {
+        simulationArea.canvas.style.cursor = 'grabbing';
+    } else {
+        simulationArea.canvas.style.cursor = 'default';
     }
-    simulationArea.objectList = updateOrder;
-
 }
 
-// Function to move multiple objects and panes window
+/**
+ * Function to move multiple objects and panes window
+ * deselected using dblclick right now (PR open for esc key)
+ * @param {Scope=} scope - the circuit in which we are selecting stuff
+ * @category engine
+ */
 export function updateSelectionsAndPane(scope = globalScope) {
-
     if (!simulationArea.selected && simulationArea.mouseDown) {
-
         simulationArea.selected = true;
         simulationArea.lastSelected = scope.root;
         simulationArea.hover = scope.root;
-
         // Selecting multiple objects
         if (simulationArea.shiftDown) {
-            objectSelection = true;
-        } else {
-            if (!embed) {
-                findDimensions(scope);
-                // miniMapArea.setup();
-                $('#miniMap').show();
-            }
+            objectSelectionSet(true);
+        } else if (!embed) {
+            findDimensions(scope);
+            miniMapArea.setup();
+            $('#miniMap').show();
         }
-    } else if (simulationArea.lastSelected == scope.root && simulationArea.mouseDown) {
-
-        //pane canvas
+    } else if (simulationArea.lastSelected === scope.root && simulationArea.mouseDown) {
+        // pane canvas to give an idea of grid moving
         if (!objectSelection) {
             globalScope.ox = (simulationArea.mouseRawX - simulationArea.mouseDownRawX) + simulationArea.oldx;
             globalScope.oy = (simulationArea.mouseRawY - simulationArea.mouseDownRawY) + simulationArea.oldy;
             globalScope.ox = Math.round(globalScope.ox);
             globalScope.oy = Math.round(globalScope.oy);
-            gridUpdate = true;
-            // if (!embed && !lightMode) miniMapArea.setup();
+            gridUpdateSet(true);
+            if (!embed && !lightMode) miniMapArea.setup();
         } else {
-
+            // idea: kind of empty
         }
-
-
-    } else if (simulationArea.lastSelected == scope.root) {
-
-        // Select multiple objects
-
+    } else if (simulationArea.lastSelected === scope.root) {
+        /*
+        Select multiple objects by adding them to the array
+        simulationArea.multipleObjectSelections when we select
+        using shift + mouse movement to select an area but
+        not shift + click
+        */
         simulationArea.lastSelected = undefined;
         simulationArea.selected = false;
         simulationArea.hover = undefined;
-
         if (objectSelection) {
-            objectSelection = false;
-            var x1 = simulationArea.mouseDownX;
-            var x2 = simulationArea.mouseX;
-            var y1 = simulationArea.mouseDownY;
-            var y2 = simulationArea.mouseY;
-
-            // Sort points
+            objectSelectionSet(false);
+            let x1 = simulationArea.mouseDownX;
+            let x2 = simulationArea.mouseX;
+            let y1 = simulationArea.mouseDownY;
+            let y2 = simulationArea.mouseY;
+            // Sort those four points to make a selection pane
             if (x1 > x2) {
-                var temp = x1;
+                const temp = x1;
                 x1 = x2;
                 x2 = temp;
             }
             if (y1 > y2) {
-                var temp = y1;
+                const temp = y1;
                 y1 = y2;
                 y2 = temp;
             }
-
             // Select the objects, push them into a list
-            for (var i = 0; i < updateOrder.length; i++) {
-                for (var j = 0; j < scope[updateOrder[i]].length; j++) {
-                    var obj = scope[updateOrder[i]][j];
+            for (let i = 0; i < updateOrder.length; i++) {
+                for (let j = 0; j < scope[updateOrder[i]].length; j++) {
+                    const obj = scope[updateOrder[i]][j];
                     if (simulationArea.multipleObjectSelections.contains(obj)) continue;
-                    var x, y;
-                    if (obj.objectType == "Node") {
+                    let x; var
+                        y;
+                    if (obj.objectType === 'Node') {
                         x = obj.absX();
                         y = obj.absY();
-                    } else if (obj.objectType != "Wire") {
+                    } else if (obj.objectType !== 'Wire') {
                         x = obj.x;
                         y = obj.y;
                     } else {
@@ -241,115 +358,166 @@ export function updateSelectionsAndPane(scope = globalScope) {
     }
 }
 
-// Function to render Canvas according th renderupdate order
-export function renderCanvas(scope) {
-
-    if (layoutMode) { // Different Algorithm
-        return;
-    }
-
-    var ctx = simulationArea.context;
-
-    // Reset canvas
-    simulationArea.clear();
-
-    // Update Grid
-    if (gridUpdate) {
-        gridUpdate = false;
-        dots();
-    }
-
-    canvasMessageData = undefined; //  Globally set in draw fn ()
-
-    // Render objects
-    for (var i = 0; i < renderOrder.length; i++)
-        for (var j = 0; j < scope[renderOrder[i]].length; j++)
-            scope[renderOrder[i]][j].draw();
-
-    // Show any message
-
-    if (canvasMessageData) {
-        canvasMessage(ctx, canvasMessageData.string, canvasMessageData.x, canvasMessageData.y)
-    }
-
-    // If multiple object selections are going on, show selected area
-    if (objectSelection) {
-        ctx.beginPath();
-        ctx.lineWidth = 2;
-        ctx.strokeStyle = "black"
-        ctx.fillStyle = "rgba(0,0,0,0.1)"
-        rect2(ctx, simulationArea.mouseDownX, simulationArea.mouseDownY, simulationArea.mouseX - simulationArea.mouseDownX, simulationArea.mouseY - simulationArea.mouseDownY, 0, 0, "RIGHT");
-        ctx.stroke();
-        ctx.fill();
-    }
-
-}
-
-//Main fn that resolves circuit using event driven simulation
-function play(scope = globalScope, resetNodes = false) {
-
+/**
+ * Main fn that resolves circuit using event driven simulation
+ * All inputs are added to a scope using scope.addinput() and
+ * the simulation starts to play.
+ * @param {Scope=} scope - the circuit we want to simulate
+ * @param {boolean} resetNodes - boolean to reset all nodes
+ * @category engine
+ */
+export function play(scope = globalScope, resetNodes = false) {
     if (errorDetected) return; // Don't simulate until error is fixed
-
-    if (loading == true) return; // Don't simulate until loaded
+    if (loading === true) return; // Don't simulate until loaded
     if (!embed) plotArea.stopWatch.Stop(); // Waveform thing
-
     // Reset Nodes if required
     if (resetNodes || forceResetNodes) {
         scope.reset();
         simulationArea.simulationQueue.reset();
-        forceResetNodes = false;
+        forceResetNodesSet(false);
     }
-
     // Temporarily kept for for future uses
     // else{
     //     // clearBuses(scope);
-    //     for(var i=0;i<scope.TriState.length;i++) {
+    //     for(let i=0;i<scope.TriState.length;i++) {
     //         // console.log("HIT2",i);
     //         scope.TriState[i].removePropagation();
     //     }
     // }
-
     // Add subcircuits if they can be resolved -- needs to be removed/ deprecated
-    for (var i = 0; i < scope.SubCircuit.length; i++) {
+    for (let i = 0; i < scope.SubCircuit.length; i++) {
         if (scope.SubCircuit[i].isResolvable()) simulationArea.simulationQueue.add(scope.SubCircuit[i]);
     }
-
     // To store list of circuitselements that have shown contention but kept temporarily
     // Mainly to resolve tristate bus issues
     simulationArea.contentionPending = [];
-
     // add inputs to the simulation queue
     scope.addInputs();
-
-    var stepCount = 0;
-    var elem = undefined
-
+    // to check if we have infinite loop in circuit
+    let stepCount = 0;
+    let elem;
     while (!simulationArea.simulationQueue.isEmpty()) {
         if (errorDetected) {
             simulationArea.simulationQueue.reset();
             return;
         }
-
         elem = simulationArea.simulationQueue.pop();
         elem.resolve();
         stepCount++;
-
         if (stepCount > 1000000) { // Cyclic or infinite Circuit Detection
-            showError("Simulation Stack limit exceeded: maybe due to cyclic paths or contention");
-            errorDetected = true;
-            forceResetNodes = true
+            showError('Simulation Stack limit exceeded: maybe due to cyclic paths or contention');
+            errorDetectedSet(true);
+            forceResetNodesSet(true);
         }
     }
-
     // Check for TriState Contentions
     if (simulationArea.contentionPending.length) {
-        showError("Contention at TriState");
-        forceResetNodes = true
-        errorDetected = true;
+        console.log(simulationArea.contentionPending);
+        showError('Contention at TriState');
+        forceResetNodesSet(true);
+        errorDetectedSet(true);
     }
-
     // Setting Flag Values
-    for (var i = 0; i < scope.Flag.length; i++)
-        scope.Flag[i].setPlotValue();
+    for (let i = 0; i < scope.Flag.length; i++) { scope.Flag[i].setPlotValue(); }
+}
+
+/**
+ * Function to check for any UI update, it is throttled by time
+ * @param {number=} count - this is used to force update
+ * @param {number=} time - the time throttling parameter
+ * @param {function} fn - function to run before updating UI
+ * @category engine
+ */
+export function scheduleUpdate(count = 0, time = 100, fn) {
+    if (lightMode) time *= 5;
+    if (count && !layoutModeGet()) { // Force update
+        update();
+        for (let i = 0; i < count; i++) { setTimeout(update, 10 + 50 * i); }
+    }
+    if (willBeUpdated) return; // Throttling
+    willBeUpdatedSet(true);
+    if (layoutModeGet()) {
+        setTimeout(layoutUpdate, time); // Update layout, different algorithm
+        return;
+    }
+    // Call a function before update ..
+    if (fn) {
+        setTimeout(() => {
+            fn();
+            update();
+        }, time);
+    } else setTimeout(update, time);
+}
 
+/**
+ * fn that calls update on everything else. If any change
+ * is there, it resolves the circuit and draws it again.
+ * Also updates simulations, selection, minimap, resolves
+ * circuit and redraws canvas if required.
+ * @param {Scope=} scope - the circuit to be updated
+ * @param {boolean=} updateEverything - if true we update the wires, nodes and modules
+ * @category engine
+ */
+export function update(scope = globalScope, updateEverything = false) {
+    willBeUpdatedSet(false);
+    if (loading === true || layoutModeGet()) return;
+    let updated = false;
+    simulationArea.hover = undefined;
+    // Update wires
+    if (wireToBeChecked || updateEverything) {
+        if (wireToBeChecked === 2) wireToBeChecked = 0; // this required due to timing issues
+        else wireToBeChecked++;
+        // WHY IS THIS REQUIRED ???? we are checking inside wire ALSO
+        // Idea: we can just call length again instead of doing it during loop.
+        let prevLength = scope.wires.length;
+        for (let i = 0; i < scope.wires.length; i++) {
+            scope.wires[i].checkConnections();
+            if (scope.wires.length !== prevLength) {
+                prevLength--;
+                i--;
+            }
+        }
+        scheduleUpdate();
+    }
+    // Update subcircuits
+    if (updateSubcircuit || updateEverything) {
+        for (let i = 0; i < scope.SubCircuit.length; i++) { scope.SubCircuit[i].reset(); }
+        updateSubcircuitSet(false);
+    }
+    // Update UI position
+    if (updatePosition || updateEverything) {
+        for (let i = 0; i < updateOrder.length; i++) {
+            for (let j = 0; j < scope[updateOrder[i]].length; j++) {
+                updated |= scope[updateOrder[i]][j].update();
+            }
+        }
+    }
+    // Updates multiple objectselections and panes window
+    if (updatePosition || updateEverything) {
+        updateSelectionsAndPane(scope);
+    }
+    // Update MiniMap
+    if (!embed && simulationArea.mouseDown && simulationArea.lastSelected && simulationArea.lastSelected !== globalScope.root) {
+        if (!lightMode) { $('#miniMap').fadeOut('fast'); }
+    }
+    // Run simulation
+    if (updateSimulation) {
+        play();
+    }
+    // Show properties of selected element
+    if (!embed && prevPropertyObjGet() !== simulationArea.lastSelected) {
+        if (simulationArea.lastSelected && simulationArea.lastSelected.objectType !== 'Wire') {
+            // ideas: why show properties of project in Nodes but not wires?
+            showProperties(simulationArea.lastSelected);
+        } else {
+            // hideProperties();
+        }
+    }
+    // Draw, render everything
+    if (updateCanvas) {
+        renderCanvas(scope);
+    }
+    updateSimulationSet(false);
+    updateCanvas = false;
+    updatePositionSet(false);
 }
diff --git a/src/eventQueue.js b/src/eventQueue.js
index aca4c10..cfc6a35 100644
--- a/src/eventQueue.js
+++ b/src/eventQueue.js
@@ -1,5 +1,7 @@
-// Event Queue is simply a priority Queue, basic implementation O(n^2)
-
+/**
+ * Event Queue is simply a priority Queue, basic implementation O(n^2).
+ * @category eventQueue
+ */
 export default class EventQueue {
     constructor(size) {
         this.size = size;
@@ -8,13 +10,16 @@ export default class EventQueue {
         this.time = 0;
     }
 
+    /**
+    * @param {CircuitElement} obj - the elemnt to be added
+    * @param {number} delay - the delay in adding an object to queue
+    */
     add(obj, delay) {
-
         if (obj.queueProperties.inQueue) {
             obj.queueProperties.time = this.time + (delay || obj.propagationDelay);
             let i = obj.queueProperties.index;
             while (i > 0 && obj.queueProperties.time > this.queue[i - 1].queueProperties.time) {
-                this.swap(i, i - 1)
+                this.swap(i, i - 1);
                 i--;
             }
             i = obj.queueProperties.index;
@@ -25,7 +30,7 @@ export default class EventQueue {
             return;
         }
 
-        if (this.frontIndex == this.size) throw "EventQueue size exceeded";
+        if (this.frontIndex == this.size) throw 'EventQueue size exceeded';
         this.queue[this.frontIndex] = obj;
         // console.log(this.time)
         // obj.queueProperties.time=obj.propagationDelay;
@@ -35,11 +40,15 @@ export default class EventQueue {
         obj.queueProperties.inQueue = true;
         let i = obj.queueProperties.index;
         while (i > 0 && obj.queueProperties.time > this.queue[i - 1].queueProperties.time) {
-            this.swap(i, i - 1)
+            this.swap(i, i - 1);
             i--;
         }
-
     }
+
+    /**
+    * To add without any delay.
+    * @param {CircuitElement} obj - the object to be added
+    */
     addImmediate(obj) {
         this.queue[this.frontIndex] = obj;
         obj.queueProperties.time = this.time;
@@ -48,36 +57,48 @@ export default class EventQueue {
         this.frontIndex++;
     }
 
+    /**
+    * Function to swap two objects in queue.
+    * @param {number} v1
+    * @param {number} v2
+    */
     swap(v1, v2) {
-        let obj1 = this.queue[v1];
+        const obj1 = this.queue[v1];
         obj1.queueProperties.index = v2;
 
-        let obj2 = this.queue[v2];
+        const obj2 = this.queue[v2];
         obj2.queueProperties.index = v1;
 
         this.queue[v1] = obj2;
         this.queue[v2] = obj1;
     }
 
+    /**
+    * function to pop element from queue.
+    */
     pop() {
-        if (this.isEmpty()) throw "Queue Empty"
+        if (this.isEmpty()) throw 'Queue Empty';
 
         this.frontIndex--;
-        let obj = this.queue[this.frontIndex]
+        const obj = this.queue[this.frontIndex];
         this.time = obj.queueProperties.time;
         obj.queueProperties.inQueue = false;
         return obj;
     }
 
+    /**
+     * function to reset queue.
+     */
     reset() {
-        for (let i = 0; i < this.frontIndex; i++)
-            this.queue[i].queueProperties.inQueue = false
-        this.time = 0
+        for (let i = 0; i < this.frontIndex; i++) this.queue[i].queueProperties.inQueue = false;
+        this.time = 0;
         this.frontIndex = 0;
     }
 
+    /**
+    * function to check if empty queue.
+    */
     isEmpty() {
         return this.frontIndex == 0;
     }
-
 }
diff --git a/src/events.js b/src/events.js
new file mode 100755
index 0000000..2441214
--- /dev/null
+++ b/src/events.js
@@ -0,0 +1,293 @@
+/* eslint-disable import/no-cycle */
+import Scope, { scopeList, switchCircuit, newCircuit } from './circuit';
+
+import { loadScope } from './data/load';
+import {
+    scheduleUpdate, updateSimulationSet, updateSubcircuitSet, forceResetNodesSet,
+} from './engine';
+import { backUp } from './data/backupCircuit';
+import { getNextPosition } from './modules';
+import { generateId } from './utils';
+import simulationArea from './simulationArea';
+
+/**
+ * Helper function to paste
+ * @param {JSON} copyData - the data to be pasted
+ * @category events
+ */
+export function paste(copyData) {
+    if (copyData === undefined) return;
+    const data = JSON.parse(copyData);
+    if (!data.logixClipBoardData) return;
+
+    const currentScopeId = globalScope.id;
+    for (let i = 0; i < data.scopes.length; i++) {
+        if (scopeList[data.scopes[i].id] === undefined) {
+            const scope = newCircuit(data.scopes[i].name, data.scopes[i].id);
+            loadScope(scope, data.scopes[i]);
+            scopeList[data.scopes[i].id] = scope;
+        }
+    }
+
+    switchCircuit(currentScopeId);
+    const tempScope = new Scope(globalScope.name, globalScope.id);
+    const oldOx = globalScope.ox;
+    const oldOy = globalScope.oy;
+    const oldScale = globalScope.scale;
+    loadScope(tempScope, data);
+
+    let prevLength = tempScope.allNodes.length;
+    for (let i = 0; i < tempScope.allNodes.length; i++) {
+        tempScope.allNodes[i].checkDeleted();
+        if (tempScope.allNodes.length != prevLength) {
+            prevLength--;
+            i--;
+        }
+    }
+
+    let approxX = 0;
+    let approxY = 0;
+    let count = 0;
+
+    for (let i = 0; i < updateOrder.length; i++) {
+        for (let j = 0; j < tempScope[updateOrder[i]].length; j++) {
+            const obj = tempScope[updateOrder[i]][j];
+            obj.updateScope(globalScope);
+            if (obj.objectType != 'Wire') {
+                approxX += obj.x;
+                approxY += obj.y;
+                count++;
+            }
+        }
+    }
+
+    for (let j = 0; j < tempScope.CircuitElement.length; j++) {
+        const obj = tempScope.CircuitElement[j];
+        obj.updateScope(globalScope);
+    }
+
+    approxX /= count;
+    approxY /= count;
+
+    approxX = Math.round(approxX / 10) * 10;
+    approxY = Math.round(approxY / 10) * 10;
+
+
+    for (let i = 0; i < updateOrder.length; i++) {
+        for (let j = 0; j < tempScope[updateOrder[i]].length; j++) {
+            const obj = tempScope[updateOrder[i]][j];
+            if (obj.objectType !== 'Wire') {
+                obj.x += simulationArea.mouseX - approxX;
+                obj.y += simulationArea.mouseY - approxY;
+            }
+        }
+    }
+
+    Object.keys(tempScope).forEach((l) => {
+        if (tempScope[l] instanceof Array && l !== 'objects' && l !== 'CircuitElement') {
+            globalScope[l].extend(tempScope[l]);
+        }
+    });
+    for (let i = 0; i < tempScope.Input.length; i++) {
+        tempScope.Input[i].layoutProperties.y = getNextPosition(0, globalScope);
+        tempScope.Input[i].layoutProperties.id = generateId();
+    }
+    for (let i = 0; i < tempScope.Output.length; i++) {
+        tempScope.Output[i].layoutProperties.x = globalScope.layout.width;
+        tempScope.Output[i].layoutProperties.id = generateId();
+        tempScope.Output[i].layoutProperties.y = getNextPosition(globalScope.layout.width, globalScope);
+    }
+    const canvasUpdate = true;
+    updateSimulationSet(true);
+    updateSubcircuitSet(true);
+    scheduleUpdate();
+    globalScope.ox = oldOx;
+    globalScope.oy = oldOy;
+    globalScope.scale = oldScale;
+
+
+    forceResetNodesSet(true);
+}
+/**
+ * Helper function for cut
+ * @param {JSON} copyList - The selected elements
+ * @category events
+ */
+export function cut(copyList) {
+    if (copyList.length === 0) return;
+    const tempScope = new Scope(globalScope.name, globalScope.id);
+    const oldOx = globalScope.ox;
+    const oldOy = globalScope.oy;
+    const oldScale = globalScope.scale;
+    d = backUp(globalScope);
+    loadScope(tempScope, d);
+    scopeList[tempScope.id] = tempScope;
+
+    for (let i = 0; i < copyList.length; i++) {
+        const obj = copyList[i];
+        if (obj.objectType === 'Node') obj.objectType = 'allNodes';
+        for (let j = 0; j < tempScope[obj.objectType].length; j++) {
+            if (tempScope[obj.objectType][j].x === obj.x && tempScope[obj.objectType][j].y === obj.y && (obj.objectType != 'Node' || obj.type === 2)) {
+                tempScope[obj.objectType][j].delete();
+                break;
+            }
+        }
+    }
+    tempScope.backups = globalScope.backups;
+    for (let i = 0; i < updateOrder.length; i++) {
+        let prevLength = globalScope[updateOrder[i]].length; // LOL length of list will reduce automatically when deletion starts
+        for (let j = 0; j < globalScope[updateOrder[i]].length; j++) {
+            const obj = globalScope[updateOrder[i]][j];
+            if (obj.objectType != 'Wire') { // }&&obj.objectType!='CircuitElement'){//}&&(obj.objectType!='Node'||obj.type==2)){
+                if (!copyList.contains(globalScope[updateOrder[i]][j])) {
+                    globalScope[updateOrder[i]][j].cleanDelete();
+                }
+            }
+
+            if (globalScope[updateOrder[i]].length != prevLength) {
+                prevLength--;
+                j--;
+            }
+        }
+    }
+
+    let prevLength = globalScope.wires.length;
+    for (let i = 0; i < globalScope.wires.length; i++) {
+        globalScope.wires[i].checkConnections();
+        if (globalScope.wires.length != prevLength) {
+            prevLength--;
+            i--;
+        }
+    }
+
+    updateSimulationSet(true);
+
+    let data = backUp(globalScope);
+    data.logixClipBoardData = true;
+    const dependencyList = globalScope.getDependencies();
+    data.dependencies = {};
+    Object.keys(dependencyList).forEach((dependency) => {
+        data.dependencies[dependency] = backUp(scopeList[dependency]);
+    });
+    data.logixClipBoardData = true;
+    data = JSON.stringify(data);
+
+    simulationArea.multipleObjectSelections = []; // copyList.slice();
+    simulationArea.copyList = []; // copyList.slice();
+    const canvasUpdate = true;
+    updateSimulationSet(true);
+    globalScope = tempScope;
+    scheduleUpdate();
+    globalScope.ox = oldOx;
+    globalScope.oy = oldOy;
+    globalScope.scale = oldScale;
+    forceResetNodesSet(true);
+    // eslint-disable-next-line consistent-return
+    return data;
+}
+/**
+ * Helper function for copy
+ * @param {JSON} copyList - The data to copied
+ * @param {boolean} cutflag - flase if we want to copy
+ * @category events
+ */
+export function copy(copyList, cutflag = false) {
+    if (copyList.length === 0) return;
+    const tempScope = new Scope(globalScope.name, globalScope.id);
+    const oldOx = globalScope.ox;
+    const oldOy = globalScope.oy;
+    const oldScale = globalScope.scale;
+    const d = backUp(globalScope);
+
+    loadScope(tempScope, d);
+    scopeList[tempScope.id] = tempScope;
+
+    if (cutflag) {
+        for (let i = 0; i < copyList.length; i++) {
+            const obj = copyList[i];
+            if (obj.objectType === 'Node') obj.objectType = 'allNodes';
+            for (let j = 0; j < tempScope[obj.objectType].length; j++) {
+                if (tempScope[obj.objectType][j].x === obj.x && tempScope[obj.objectType][j].y === obj.y && (obj.objectType != 'Node' || obj.type === 2)) {
+                    tempScope[obj.objectType][j].delete();
+                    break;
+                }
+            }
+        }
+    }
+    tempScope.backups = globalScope.backups;
+    for (let i = 0; i < updateOrder.length; i++) {
+        let prevLength = globalScope[updateOrder[i]].length; // LOL length of list will reduce automatically when deletion starts
+        for (let j = 0; j < globalScope[updateOrder[i]].length; j++) {
+            const obj = globalScope[updateOrder[i]][j];
+            if (obj.objectType != 'Wire') { // }&&obj.objectType!='CircuitElement'){//}&&(obj.objectType!='Node'||obj.type==2)){
+                if (!copyList.contains(globalScope[updateOrder[i]][j])) {
+                    // //console.log("DELETE:", globalScope[updateOrder[i]][j]);
+                    globalScope[updateOrder[i]][j].cleanDelete();
+                }
+            }
+
+            if (globalScope[updateOrder[i]].length != prevLength) {
+                prevLength--;
+                j--;
+            }
+        }
+    }
+
+    let prevLength = globalScope.wires.length;
+    for (let i = 0; i < globalScope.wires.length; i++) {
+        globalScope.wires[i].checkConnections();
+        if (globalScope.wires.length != prevLength) {
+            prevLength--;
+            i--;
+        }
+    }
+
+    updateSimulationSet(true);
+
+    let data = backUp(globalScope);
+    data.scopes = [];
+    const dependencyList = {};
+    const requiredDependencies = globalScope.getDependencies();
+    const completed = {};
+    Object.keys(scopeList).forEach((id) => {
+        dependencyList[id] = scopeList[id].getDependencies();
+    });
+    function saveScope(id) {
+        if (completed[id]) return;
+        for (let i = 0; i < dependencyList[id].length; i++) { saveScope(dependencyList[id][i]); }
+        completed[id] = true;
+        data.scopes.push(backUp(scopeList[id]));
+    }
+    for (let i = 0; i < requiredDependencies.length; i++) { saveScope(requiredDependencies[i]); }
+    data.logixClipBoardData = true;
+    data = JSON.stringify(data);
+    simulationArea.multipleObjectSelections = []; // copyList.slice();
+    simulationArea.copyList = []; // copyList.slice();
+    const canvasUpdate = true;
+    updateSimulationSet(true);
+    globalScope = tempScope;
+    scheduleUpdate();
+    globalScope.ox = oldOx;
+    globalScope.oy = oldOy;
+    globalScope.scale = oldScale;
+    forceResetNodesSet(true);
+    // needs to be fixed
+    // eslint-disable-next-line consistent-return
+    return data;
+}
+
+/**
+ * Function selects all the elements from the scope
+ * @category events
+ */
+export function selectAll(scope = globalScope) {
+    circuitElementList.forEach((val, _, __) => {
+        if (scope.hasOwnProperty(val)) {
+            simulationArea.multipleObjectSelections.push(...scope[val]);
+        }
+    });
+
+    if (scope.nodes) {
+        simulationArea.multipleObjectSelections.push(...scope.nodes);
+    }
+}
diff --git a/src/layout/layoutBuffer.js b/src/layout/layoutBuffer.js
new file mode 100755
index 0000000..07b7342
--- /dev/null
+++ b/src/layout/layoutBuffer.js
@@ -0,0 +1,61 @@
+import LayoutNode from './layoutNode';
+/**
+ * Buffer object to store changes so that you can reset changes
+ * @class
+ * @param {Scope=} scope
+ * @category layout
+ */
+export default class LayoutBuffer {
+    constructor(scope = globalScope) {
+        // Position of screen in layoutMode -- needs to be deprecated, reset screen position instead
+        const x = -Math.round(globalScope.ox / 10) * 10;
+        const y = -Math.round(globalScope.oy / 10) * 10;
+
+        const w = Math.round((width / globalScope.scale) * 0.01) * 10; // 10% width of screen in layoutMode
+        const h = Math.round((height / globalScope.scale) * 0.01) * 10; // 10% height of screen in layoutMode
+
+        const xx = x + w;
+        const yy = y + h;
+
+        // Position of subcircuit
+        this.xx = xx;
+        this.yy = yy;
+
+        // Assign layout if exist or create new one
+        this.layout = { ...scope.layout }; // Object.create(scope.layout);
+
+        // Push Input Nodes
+        this.Input = [];
+        for (let i = 0; i < scope.Input.length; i++) { this.Input.push(new LayoutNode(scope.Input[i].layoutProperties.x, scope.Input[i].layoutProperties.y, scope.Input[i].layoutProperties.id, scope.Input[i].label, xx, yy, scope.Input[i].type, scope.Input[i])); }
+
+        // Push Output Nodes
+        this.Output = [];
+        for (let i = 0; i < scope.Output.length; i++) { this.Output.push(new LayoutNode(scope.Output[i].layoutProperties.x, scope.Output[i].layoutProperties.y, scope.Output[i].layoutProperties.id, scope.Output[i].label, xx, yy, scope.Output[i].type, scope.Output[i])); }
+    }
+
+    /**
+     * @memberof layoutBuffer
+     * Check if position is on the boundaries of subcircuit
+     * if the desired width and heiht is allowed
+     */
+    isAllowed(x, y) {
+        if (x < 0 || x > this.layout.width || y < 0 || y > this.layout.height) return false;
+        if (x > 0 && x < this.layout.width && y > 0 && y < this.layout.height) return false;
+
+        if ((x === 0 && y === 0) || (x === 0 && y === this.layout.height) || (x === this.layout.width && y === 0) || (x === this.layout.width && y === this.layout.height)) return false;
+
+        return true;
+    }
+
+    /**
+     * @memberof layoutBuffer
+     * Check if node is already at a position
+     * Function is called while decreasing height to
+     * check if it is possible without moving other node
+     */
+    isNodeAt(x, y) {
+        for (let i = 0; i < this.Input.length; i++) { if (this.Input[i].x === x && this.Input[i].y === y) return true; }
+        for (let i = 0; i < this.Output.length; i++) { if (this.Output[i].x === x && this.Output[i].y === y) return true; }
+        return false;
+    }
+}
diff --git a/src/layout/layoutNode.js b/src/layout/layoutNode.js
new file mode 100755
index 0000000..9558523
--- /dev/null
+++ b/src/layout/layoutNode.js
@@ -0,0 +1,103 @@
+import { drawCircle } from '../canvasApi';
+import simulationArea from '../simulationArea';
+import { tempBuffer } from '../layoutMode';
+
+/**
+ * @class
+ * @param {number} x - x coord of node
+ * @param {number} y - y coord of node
+ * @param {strng} id - id for node
+ * @param {string=} label - label for the node
+ * @param {number} xx - parent x
+ * @param {number} yy - parent y
+ * @param {number} type - input or output node
+ * @param {CircuitElement} parent  parent of the node
+ * @category layout
+ */
+export default class LayoutNode {
+    constructor(x, y, id, label = '', xx, yy, type, parent) {
+        this.type = type;
+        this.id = id;
+
+        this.xx = xx; // Position of parent
+        this.yy = yy; // Position of parent
+        this.label = label;
+
+        this.prevx = undefined;
+        this.prevy = undefined;
+        this.x = x; // Position of node wrt to parent
+        this.y = y; // Position of node wrt to parent
+
+        this.radius = 5;
+        this.clicked = false;
+        this.hover = false;
+        this.wasClicked = false;
+        this.prev = 'a';
+        this.count = 0;
+        this.parent = parent;
+    }
+
+    absX() {
+        return this.x + this.xx;
+    }
+
+    absY() {
+        return this.y + this.yy;
+    }
+
+    update() {
+        // Code copied from node.update() - Some code is redundant - needs to be removed
+
+        if (this === simulationArea.hover) simulationArea.hover = undefined;
+        this.hover = this.isHover();
+
+        if (!simulationArea.mouseDown) {
+            if (this.absX() !== this.prevx || this.absY() !== this.prevy) {
+                // Store position before clicked
+                this.prevx = this.absX();
+                this.prevy = this.absY();
+            }
+        }
+
+        if (this.hover) {
+            simulationArea.hover = this;
+        }
+
+        if (simulationArea.mouseDown && ((this.hover && !simulationArea.selected) || simulationArea.lastSelected === this)) {
+            simulationArea.selected = true;
+            simulationArea.lastSelected = this;
+            this.clicked = true;
+        } else {
+            this.clicked = false;
+        }
+
+        if (!this.wasClicked && this.clicked) {
+            this.wasClicked = true;
+            this.prev = 'a';
+            simulationArea.lastSelected = this;
+        } else if (this.wasClicked && this.clicked) {
+            // Check if valid position and update accordingly
+            if (tempBuffer.isAllowed(simulationArea.mouseX - this.xx, simulationArea.mouseY - this.yy) && !tempBuffer.isNodeAt(simulationArea.mouseX - this.xx, simulationArea.mouseY - this.yy)) {
+                this.x = simulationArea.mouseX - this.xx;
+                this.y = simulationArea.mouseY - this.yy;
+            }
+        }
+    }
+
+    /**
+     * @memberof layoutNode
+     * this function is used to draw the nodes
+     */
+    draw() {
+        const ctx = simulationArea.context;
+        drawCircle(ctx, this.absX(), this.absY(), 3, ['green', 'red'][+(simulationArea.lastSelected === this)]);
+    }
+
+    /**
+     * @memberof layoutNode
+     * this function is used to check if hover
+     */
+    isHover() {
+        return this.absX() === simulationArea.mouseX && this.absY() === simulationArea.mouseY;
+    }
+}
diff --git a/src/layoutMode.js b/src/layoutMode.js
new file mode 100755
index 0000000..08bf5aa
--- /dev/null
+++ b/src/layoutMode.js
@@ -0,0 +1,388 @@
+/* eslint-disable import/no-cycle */
+/* eslint-disable no-continue */
+import {
+    dots, correctWidth, fillText, rect2,
+} from './canvasApi';
+import LayoutBuffer from './layout/layoutBuffer';
+import simulationArea from './simulationArea';
+import { hideProperties } from './ux';
+import {
+    update, scheduleUpdate, willBeUpdatedSet, gridUpdateSet,
+} from './engine';
+import miniMapArea from './minimap';
+import { showMessage } from './utils';
+
+/**
+ * Layout.js - all subcircuit layout related code is here
+ * You can edit how your subcircuit for a circuit will look by
+ * clicking edit layout in properties for a ciruit
+ * @category layoutMode
+ */
+
+let layoutMode = false;
+
+export function layoutModeSet(param) {
+    layoutMode = param;
+}
+
+export function layoutModeGet(param) {
+    return layoutMode;
+}
+
+/**
+ * @type {LayoutBuffer} - used to temporartily store all changes.
+ * @category layoutMode
+ */
+export let tempBuffer;
+
+/**
+ * Helper function to determine alignment and position of nodes for rendering
+ * @param {number} x - width of label
+ * @param {number} y - height of label
+ * @category layoutMode
+ */
+export function determineLabel(x, y) {
+    if (x === 0) return ['left', 5, 5];
+    if (x === tempBuffer.layout.width) return ['right', -5, 5];
+    if (y === 0) return ['center', 0, 13];
+    return ['center', 0, -6];
+}
+
+/**
+ * Used to move the grid in the layout mode
+ * @param {Scope} scope - the circuit whose subcircuit we are editing
+ * @category layoutMode
+ */
+export function paneLayout(scope = globalScope) {
+    if (!simulationArea.selected && simulationArea.mouseDown) {
+        simulationArea.selected = true;
+        simulationArea.lastSelected = scope.root;
+        simulationArea.hover = scope.root;
+    } else if (simulationArea.lastSelected === scope.root && simulationArea.mouseDown) {
+        // pane canvas
+        if (true) {
+            globalScope.ox = (simulationArea.mouseRawX - simulationArea.mouseDownRawX) + simulationArea.oldx;
+            globalScope.oy = (simulationArea.mouseRawY - simulationArea.mouseDownRawY) + simulationArea.oldy;
+            globalScope.ox = Math.round(globalScope.ox);
+            globalScope.oy = Math.round(globalScope.oy);
+            gridUpdateSet(true);
+            if (!embed && !lightMode) miniMapArea.setup();
+        }
+    } else if (simulationArea.lastSelected === scope.root) {
+        // Select multiple objects
+
+        simulationArea.lastSelected = undefined;
+        simulationArea.selected = false;
+        simulationArea.hover = undefined;
+    }
+}
+
+
+/**
+ * Function to render layout on screen
+ * @param {Scope=} scope
+ * @category layoutMode
+ */
+export function renderLayout(scope = globalScope) {
+    if (!layoutModeGet()) return;
+    const { xx } = tempBuffer;
+    const { yy } = tempBuffer;
+    const ctx = simulationArea.context;
+    simulationArea.clear();
+    ctx.strokeStyle = 'black';
+    ctx.fillStyle = 'white';
+    ctx.lineWidth = correctWidth(3);
+    // Draw base rectangle
+    ctx.beginPath();
+    rect2(ctx, 0, 0, tempBuffer.layout.width, tempBuffer.layout.height, xx, yy, 'RIGHT');
+    ctx.fill();
+    ctx.stroke();
+    ctx.beginPath();
+    ctx.textAlign = 'center';
+    ctx.fillStyle = 'black';
+    if (tempBuffer.layout.titleEnabled) {
+        fillText(ctx, scope.name, tempBuffer.layout.title_x + xx, yy + tempBuffer.layout.title_y, 11);
+    }
+
+    // Draw labels
+    let info;
+    for (let i = 0; i < tempBuffer.Input.length; i++) {
+        if (!tempBuffer.Input[i].label) continue;
+        info = determineLabel(tempBuffer.Input[i].x, tempBuffer.Input[i].y, scope);
+        [ctx.textAlign] = info;
+        fillText(ctx, tempBuffer.Input[i].label, tempBuffer.Input[i].x + info[1] + xx, yy + tempBuffer.Input[i].y + info[2], 12);
+    }
+    for (let i = 0; i < tempBuffer.Output.length; i++) {
+        if (!tempBuffer.Output[i].label) continue;
+        info = determineLabel(tempBuffer.Output[i].x, tempBuffer.Output[i].y, scope);
+        [ctx.textAlign] = info;
+        fillText(ctx, tempBuffer.Output[i].label, tempBuffer.Output[i].x + info[1] + xx, yy + tempBuffer.Output[i].y + info[2], 12);
+    }
+    ctx.fill();
+
+    // Draw points
+    for (let i = 0; i < tempBuffer.Input.length; i++) {
+        tempBuffer.Input[i].draw();
+    }
+    for (let i = 0; i < tempBuffer.Output.length; i++) {
+        tempBuffer.Output[i].draw();
+    }
+
+    if (gridUpdateSet(false)) {
+        dots();
+    }
+}
+
+/**
+ * Update UI, positions of inputs and outputs
+ * @param {Scope} scope - the circuit whose subcircuit we are editing
+ * @category layoutMode
+ */
+export function layoutUpdate(scope = globalScope) {
+    if (!layoutModeGet()) return;
+    willBeUpdatedSet(false);
+    for (let i = 0; i < tempBuffer.Input.length; i++) {
+        tempBuffer.Input[i].update();
+    }
+    for (let i = 0; i < tempBuffer.Output.length; i++) {
+        tempBuffer.Output[i].update();
+    }
+    paneLayout(scope);
+    renderLayout(scope);
+}
+
+/**
+ * Helper function to reset all nodes to original default positions
+ * @category layoutMode
+ */
+export function layoutResetNodes() {
+    tempBuffer.layout.width = 100;
+    tempBuffer.layout.height = Math.max(tempBuffer.Input.length, tempBuffer.Output.length) * 20 + 20;
+    for (let i = 0; i < tempBuffer.Input.length; i++) {
+        tempBuffer.Input[i].x = 0;
+        tempBuffer.Input[i].y = i * 20 + 20;
+    }
+    for (let i = 0; i < tempBuffer.Output.length; i++) {
+        tempBuffer.Output[i].x = tempBuffer.layout.width;
+        tempBuffer.Output[i].y = i * 20 + 20;
+    }
+}
+
+/**
+ * Increase width, and move all nodes
+ * @category layoutMode
+ */
+export function increaseLayoutWidth() {
+    for (let i = 0; i < tempBuffer.Input.length; i++) {
+        if (tempBuffer.Input[i].x === tempBuffer.layout.width) { tempBuffer.Input[i].x += 10; }
+    }
+    for (let i = 0; i < tempBuffer.Output.length; i++) {
+        if (tempBuffer.Output[i].x === tempBuffer.layout.width) { tempBuffer.Output[i].x += 10; }
+    }
+    tempBuffer.layout.width += 10;
+}
+
+/**
+ * Increase Height, and move all nodes
+ * @category layoutMode
+ */
+export function increaseLayoutHeight() {
+    for (let i = 0; i < tempBuffer.Input.length; i++) {
+        if (tempBuffer.Input[i].y === tempBuffer.layout.height) { tempBuffer.Input[i].y += 10; }
+    }
+    for (let i = 0; i < tempBuffer.Output.length; i++) {
+        if (tempBuffer.Output[i].y === tempBuffer.layout.height) { tempBuffer.Output[i].y += 10; }
+    }
+    tempBuffer.layout.height += 10;
+}
+
+/**
+ * Decrease Width, and move all nodes, check if space is there
+ * @category layoutMode
+ */
+export function decreaseLayoutWidth() {
+    if (tempBuffer.layout.width < 30) return;
+    for (let i = 0; i < tempBuffer.Input.length; i++) {
+        if (tempBuffer.Input[i].x === tempBuffer.layout.width - 10) {
+            showMessage('No space. Move or delete some nodes to make space.');
+            return;
+        }
+    }
+    for (let i = 0; i < tempBuffer.Output.length; i++) {
+        if (tempBuffer.Output[i].x === tempBuffer.layout.width - 10) {
+            showMessage('No space. Move or delete some nodes to make space.');
+            return;
+        }
+    }
+
+    for (let i = 0; i < tempBuffer.Input.length; i++) {
+        if (tempBuffer.Input[i].x === tempBuffer.layout.width) { tempBuffer.Input[i].x -= 10; }
+    }
+    for (let i = 0; i < tempBuffer.Output.length; i++) {
+        if (tempBuffer.Output[i].x === tempBuffer.layout.width) { tempBuffer.Output[i].x -= 10; }
+    }
+    tempBuffer.layout.width -= 10;
+}
+
+/**
+ * Decrease Height, and move all nodes, check if space is there
+ * @category layoutMode
+ */
+export function decreaseLayoutHeight() {
+    if (tempBuffer.layout.height < 30) return;
+    for (let i = 0; i < tempBuffer.Input.length; i++) {
+        if (tempBuffer.Input[i].y === tempBuffer.layout.height - 10) {
+            showMessage('No space. Move or delete some nodes to make space.');
+            return;
+        }
+    }
+    for (let i = 0; i < tempBuffer.Output.length; i++) {
+        if (tempBuffer.Output[i].y === tempBuffer.layout.height - 10) {
+            showMessage('No space. Move or delete some nodes to make space.');
+            return;
+        }
+    }
+
+    for (let i = 0; i < tempBuffer.Input.length; i++) {
+        if (tempBuffer.Input[i].y === tempBuffer.layout.height) { tempBuffer.Input[i].y -= 10; }
+    }
+    for (let i = 0; i < tempBuffer.Output.length; i++) {
+        if (tempBuffer.Output[i].y === tempBuffer.layout.height) { tempBuffer.Output[i].y -= 10; }
+    }
+    tempBuffer.layout.height -= 10;
+}
+
+/**
+ * Helper functions to move the titles
+ * @category layoutMode
+ */
+export function layoutTitleUp() {
+    tempBuffer.layout.title_y -= 5;
+}
+
+/**
+ * Helper functions to move the titles
+ * @category layoutMode
+ */
+export function layoutTitleDown() {
+    tempBuffer.layout.title_y += 5;
+}
+
+/**
+ * Helper functions to move the titles
+ * @category layoutMode
+ */
+export function layoutTitleRight() {
+    tempBuffer.layout.title_x += 5;
+}
+
+/**
+ * Helper functions to move the titles
+ * @category layoutMode
+ */
+export function layoutTitleLeft() {
+    tempBuffer.layout.title_x -= 5;
+}
+
+/**
+ * Helper functions to move the titles
+ * @category layoutMode
+ */
+export function toggleLayoutTitle() {
+    tempBuffer.layout.titleEnabled = !tempBuffer.layout.titleEnabled;
+}
+
+/**
+ * just toggles back to normal mode
+ * @category layoutMode
+ */
+function cancelLayout() {
+    if (layoutModeGet()) {
+        // eslint-disable-next-line no-use-before-define
+        toggleLayoutMode();
+    }
+}
+
+
+/**
+ * Store all data into layout and exit
+ * @category layoutMode
+ */
+function saveLayout() {
+    if (layoutModeGet()) {
+        for (let i = 0; i < tempBuffer.Input.length; i++) {
+            tempBuffer.Input[i].parent.layoutProperties.x = tempBuffer.Input[i].x;
+            tempBuffer.Input[i].parent.layoutProperties.y = tempBuffer.Input[i].y;
+        }
+        for (let i = 0; i < tempBuffer.Output.length; i++) {
+            tempBuffer.Output[i].parent.layoutProperties.x = tempBuffer.Output[i].x;
+            tempBuffer.Output[i].parent.layoutProperties.y = tempBuffer.Output[i].y;
+        }
+        globalScope.layout = { ...tempBuffer.layout };
+        // eslint-disable-next-line no-use-before-define
+        toggleLayoutMode();
+    }
+}
+
+/**
+ * Function to toggle between layoutMode and normal Mode
+ * the sidebar is disabled and n properties are shown.
+ * @category layoutMode
+ */
+export function toggleLayoutMode() {
+    if (layoutModeGet()) {
+        (layoutModeSet(false));
+        $('#layoutDialog').fadeOut();
+        globalScope.centerFocus(false);
+        dots();
+    } else {
+        (layoutModeSet(true));
+        $('#layoutDialog').fadeIn();
+        globalScope.ox = 0;
+        globalScope.oy = 0;
+        globalScope.scale = DPR * 1.3;
+        dots();
+        tempBuffer = new LayoutBuffer();
+        $('#toggleLayoutTitle')[0].checked = tempBuffer.layout.titleEnabled;
+    }
+    hideProperties();
+    update(globalScope, true);
+    scheduleUpdate();
+    // console.log(document.querySelector('#layoutDialog'))
+    $('#decreaseLayoutWidth').click(() => {
+        decreaseLayoutWidth();
+    });
+    $('#increaseLayoutWidth').click(() => {
+        increaseLayoutWidth();
+    });
+    $('#decreaseLayoutHeight').click(() => {
+        decreaseLayoutHeight();
+    });
+    $('#increaseLayoutHeight').click(() => {
+        increaseLayoutHeight();
+    });
+    $('#layoutResetNodes').click(() => {
+        layoutResetNodes();
+    });
+    $('#layoutTitleUp').click(() => {
+        layoutTitleUp();
+    });
+    $('#layoutTitleDown').click(() => {
+        layoutTitleDown();
+    });
+    $('#layoutTitleLeft').click(() => {
+        layoutTitleLeft();
+    });
+    $('#layoutTitleRight').click(() => {
+        layoutTitleRight();
+    });
+    $('#toggleLayoutTitle').click(() => {
+        toggleLayoutTitle();
+    });
+    $('#saveLayout').click(() => {
+        saveLayout();
+    });
+    $('#cancelLayout').click(() => {
+        cancelLayout();
+    });
+}
diff --git a/src/listeners.js b/src/listeners.js
index 119714b..c9833e6 100644
--- a/src/listeners.js
+++ b/src/listeners.js
@@ -1,38 +1,86 @@
 // Most Listeners are stored here
-import { simulationArea } from "./simulationArea";
-import { scheduleUpdate, update, updateSelectionsAndPane } from "./engine";
-import { width,height } from "./circuit";
-import { changeScale } from "./canvasApi";
-import { scheduleBackup } from "./backupCircuit";
-import { hideProperties } from "./ux";
-export function startListeners() {
-    window.addEventListener('keyup', function (e) {
+import { layoutModeGet } from './layoutMode';
+import simulationArea from './simulationArea';
+import {
+    scheduleUpdate, update, updateSelectionsAndPane,
+    wireToBeCheckedSet, updatePositionSet, updateSimulationSet,
+    updateCanvasSet, gridUpdateSet, errorDetectedSet,
+} from './engine';
+import { changeScale } from './canvasApi';
+import { scheduleBackup } from './data/backupCircuit';
+import { hideProperties, deleteSelected, uxvar } from './ux';
+import {
+    updateRestrictedElementsList, updateRestrictedElementsInScope, hideRestricted, showRestricted,
+} from './restrictedElementDiv';
+import { removeMiniMap, updatelastMinimapShown } from './minimap';
+import undo from './data/undo';
+import { copy, paste, selectAll } from './events';
+import save from './data/save';
+import { layoutUpdate } from './layoutMode';
+
+const unit = 10;
+let createNode = false; // Flag to create node when its value ==tru)e
+export function createNodeSet(param) {
+    createNode = param;
+}
+export function createNodeGet(param) {
+    return createNode;
+}
+
+let stopWire = true; // flag for stopoing making Nodes when the second terminal reaches a Node (closed path)
+export function stopWireSet(param) {
+    stopWire = param;
+}
+
+
+export default function startListeners() {
+    $('#deleteSelected').click(() => {
+        deleteSelected();
+    });
+
+    $('#zoomIn').click(() => {
+        changeScale(0.2, 'zoomButton', 'zoomButton', 2);
+    });
+
+    $('#zoomOut').click(() => {
+        changeScale(-0.2, 'zoomButton', 'zoomButton', 2);
+    });
+
+    $('#undoButton').click(() => {
+        undo();
+    });
+
+    window.addEventListener('keyup', (e) => {
         scheduleUpdate(1);
         simulationArea.shiftDown = e.shiftKey;
         if (e.keyCode == 16) {
             simulationArea.shiftDown = false;
         }
-        if (e.key == "Meta" || e.key == "Control") {
+        if (e.key == 'Meta' || e.key == 'Control') {
             simulationArea.controlDown = false;
         }
     });
-    document.getElementById("simulationArea").addEventListener('mousedown', function (e) {
 
-        $("input").blur();
-        errorDetected = false;
-        updateSimulation = true;
-        updatePosition = true;
-        updateCanvas = true;
+    document.getElementById('simulationArea').addEventListener('mousedown', (e) => {
+        createNodeSet(true);
+        stopWireSet(false);
+        simulationArea.mouseDown = true;
+
+        $('input').blur();
+
+        errorDetectedSet(false);
+        updateSimulationSet(true);
+        updatePositionSet(true);
+        updateCanvasSet(true);
 
         simulationArea.lastSelected = undefined;
         simulationArea.selected = false;
         simulationArea.hover = undefined;
-        var rect = simulationArea.canvas.getBoundingClientRect();
+        const rect = simulationArea.canvas.getBoundingClientRect();
         simulationArea.mouseDownRawX = (e.clientX - rect.left) * DPR;
         simulationArea.mouseDownRawY = (e.clientY - rect.top) * DPR;
         simulationArea.mouseDownX = Math.round(((simulationArea.mouseDownRawX - globalScope.ox) / globalScope.scale) / unit) * unit;
         simulationArea.mouseDownY = Math.round(((simulationArea.mouseDownRawY - globalScope.oy) / globalScope.scale) / unit) * unit;
-        simulationArea.mouseDown = true;
         simulationArea.oldx = globalScope.ox;
         simulationArea.oldy = globalScope.oy;
 
@@ -41,7 +89,7 @@ export function startListeners() {
         scheduleUpdate(1);
         $('.dropdown.open').removeClass('open');
     });
-    document.getElementById("simulationArea").addEventListener('mouseup', function (e) {
+    document.getElementById('simulationArea').addEventListener('mouseup', (e) => {
         if (simulationArea.lastSelected) simulationArea.lastSelected.newElement = false;
         /*
         handling restricted circuit elements
@@ -52,157 +100,190 @@ export function startListeners() {
             globalScope.restrictedCircuitElementsUsed.push(simulationArea.lastSelected.objectType);
             updateRestrictedElementsList();
         }
+
+        //       deselect multible elements with click
+        if (!simulationArea.shiftDown && simulationArea.multipleObjectSelections.length > 0
+        ) {
+            if (
+                !simulationArea.multipleObjectSelections.includes(
+                    simulationArea.lastSelected,
+                )
+            ) { simulationArea.multipleObjectSelections = []; }
+        }
     });
     window.addEventListener('mousemove', onMouseMove);
 
 
-
-    window.addEventListener('keydown', function (e) {
-
+    window.addEventListener('keydown', (e) => {
+        if (document.activeElement.tagName == 'INPUT') return;
+        if (listenToSimulator) {
         // If mouse is focusing on input element, then override any action
         // if($(':focus').length){
         //     return;
         // }
 
-        if (simulationArea.mouseRawX < 0 || simulationArea.mouseRawY < 0 || simulationArea.mouseRawX > width || simulationArea.mouseRawY > height) {
-            return;
-        } else {
+            if (document.activeElement.tagName == 'INPUT' || simulationArea.mouseRawX < 0 || simulationArea.mouseRawY < 0 || simulationArea.mouseRawX > width || simulationArea.mouseRawY > height) {
+                return;
+            }
             // HACK TO REMOVE FOCUS ON PROPERTIES
-            if (document.activeElement.type == "number") {
+            if (document.activeElement.type == 'number') {
                 hideProperties();
-                showProperties(simulationArea.lastSelected)
+                showProperties(simulationArea.lastSelected);
             }
-        }
 
-        errorDetected = false;
-        updateSimulation = true;
-        updatePosition = true;
-        simulationArea.shiftDown = e.shiftKey;
 
-        // zoom in (+)
-        if (e.key == "Meta" || e.key == "Control") {
-            simulationArea.controlDown = true;
-        }
+            errorDetectedSet(false);
+            updateSimulationSet(true);
+            updatePositionSet(true);
+            simulationArea.shiftDown = e.shiftKey;
 
-        if (simulationArea.controlDown && (e.keyCode == 187 || e.keyCode == 171)) {
-            e.preventDefault();
-            if (globalScope.scale < 4 * DPR) {
-                changeScale(.1 * DPR);
+            //  stop making wires when we connect the 2nd termial to a node
+            if (stopWire) {
+                createNodeSet(false);
             }
-        }
-        // zoom out (-)
-        if (simulationArea.controlDown && (e.keyCode == 189 || e.keyCode == 173)) {
-            e.preventDefault();
-            if (globalScope.scale > 0.5 * DPR) {
-                changeScale(-.1 * DPR);
+
+            if (e.key == 'Meta' || e.key == 'Control') {
+                simulationArea.controlDown = true;
             }
-        }
 
-        if (simulationArea.mouseRawX < 0 || simulationArea.mouseRawY < 0 || simulationArea.mouseRawX > width || simulationArea.mouseRawY > height) return;
 
-        scheduleUpdate(1);
-        updateCanvas = true;
-        wireToBeChecked = 1;
+            // zoom in (+)
+            if ((simulationArea.controlDown && (e.keyCode == 187 || e.keyCode == 171)) || e.keyCode == 107) {
+                e.preventDefault();
+                ZoomIn();
+            }
+            // zoom out (-)
+            if ((simulationArea.controlDown && (e.keyCode == 189 || e.keyCode == 173)) || e.keyCode == 109) {
+                e.preventDefault();
+                ZoomOut();
+            }
 
-        // Needs to be deprecated, moved to more recent listeners
-        if (simulationArea.controlDown && (e.key == "C" || e.key == "c")) {
+            if (simulationArea.mouseRawX < 0 || simulationArea.mouseRawY < 0 || simulationArea.mouseRawX > width || simulationArea.mouseRawY > height) return;
+
+            scheduleUpdate(1);
+            updateCanvasSet(true);
+            wireToBeCheckedSet(1);
+
+            // Needs to be deprecated, moved to more recent listeners
+            if (simulationArea.controlDown && (e.key == 'C' || e.key == 'c')) {
             //    simulationArea.copyList=simulationArea.multipleObjectSelections.slice();
             //    if(simulationArea.lastSelected&&simulationArea.lastSelected!==simulationArea.root&&!simulationArea.copyList.contains(simulationArea.lastSelected)){
             //        simulationArea.copyList.push(simulationArea.lastSelected);
             //    }
             //    copy(simulationArea.copyList);
-        }
-        if (simulationArea.controlDown && (e.key == "V" || e.key == "v")) {
-            //    paste(simulationArea.copyData);
-        }
+            }
 
-        if (simulationArea.lastSelected && simulationArea.lastSelected.keyDown) {
-            if (e.key.toString().length == 1 || e.key.toString() == "Backspace") {
-                simulationArea.lastSelected.keyDown(e.key.toString());
-                return;
+
+            if (simulationArea.lastSelected && simulationArea.lastSelected.keyDown) {
+                if (e.key.toString().length == 1 || e.key.toString() == 'Backspace') {
+                    simulationArea.lastSelected.keyDown(e.key.toString());
+                    return;
+                }
             }
 
-        }
+            if (simulationArea.lastSelected && simulationArea.lastSelected.keyDown2) {
+                if (e.key.toString().length == 1) {
+                    simulationArea.lastSelected.keyDown2(e.key.toString());
+                    return;
+                }
+            }
 
-        if (simulationArea.lastSelected && simulationArea.lastSelected.keyDown2) {
-            if (e.key.toString().length == 1) {
-                simulationArea.lastSelected.keyDown2(e.key.toString());
-                return;
+            if (simulationArea.lastSelected && simulationArea.lastSelected.keyDown3) {
+                if (e.key.toString() != 'Backspace' && e.key.toString() != 'Delete') {
+                    simulationArea.lastSelected.keyDown3(e.key.toString());
+                    return;
+                }
             }
 
-        }
+            if (e.keyCode == 16) {
+                simulationArea.shiftDown = true;
+                if (simulationArea.lastSelected && !simulationArea.lastSelected.keyDown && simulationArea.lastSelected.objectType != 'Wire' && simulationArea.lastSelected.objectType != 'CircuitElement' && !simulationArea.multipleObjectSelections.contains(simulationArea.lastSelected)) {
+                    simulationArea.multipleObjectSelections.push(simulationArea.lastSelected);
+                }
+            }
 
-        if (simulationArea.lastSelected && simulationArea.lastSelected.keyDown3) {
-            if (e.key.toString() != "Backspace" && e.key.toString() != "Delete") {
-                simulationArea.lastSelected.keyDown3(e.key.toString());
-                return;
+            if (e.keyCode == 8 || e.key == 'Delete') {
+                deleteSelected();
             }
 
-        }
+            if (simulationArea.controlDown && e.key.charCodeAt(0) == 122) { // detect the special CTRL-Z code
+                undo();
+            }
 
-        if (e.keyCode == 16) {
-            simulationArea.shiftDown = true;
-            if (simulationArea.lastSelected && !simulationArea.lastSelected.keyDown && simulationArea.lastSelected.objectType != "Wire" && simulationArea.lastSelected.objectType != "CircuitElement" && !simulationArea.multipleObjectSelections.contains(simulationArea.lastSelected)) {
-                simulationArea.multipleObjectSelections.push(simulationArea.lastSelected);
+            // Detect online save shortcut (CTRL+S)
+            if (simulationArea.controlDown && e.keyCode == 83 && !simulationArea.shiftDown) {
+                save();
+                e.preventDefault();
+            }
+            // Detect offline save shortcut (CTRL+SHIFT+S)
+            if (simulationArea.controlDown && e.keyCode == 83 && simulationArea.shiftDown) {
+                saveOffline();
+                e.preventDefault();
             }
-        }
 
-        if (e.keyCode == 8 || e.key == "Delete") {
-            delete_selected();
-        }
+            // Detect Select all Shortcut
+            if (simulationArea.controlDown && (e.keyCode == 65 || e.keyCode == 97)) {
+                selectAll();
+                e.preventDefault();
+            }
 
-        if (simulationArea.controlDown && e.key.charCodeAt(0) == 122) { // detect the special CTRL-Z code
-            undo();
-        }
+            // deselect all Shortcut
+            if (e.keyCode == 27) {
+                simulationArea.multipleObjectSelections = [];
+                simulationArea.lastSelected = undefined;
+                e.preventDefault();
+            }
 
-        // Detect online save shortcut (CTRL+S)
-        if (simulationArea.controlDown && e.keyCode == 83 && !simulationArea.shiftDown) {
-            save();
-            e.preventDefault();
-        }
-        // Detect offline save shortcut (CTRL+SHIFT+S)
-        if (simulationArea.controlDown && e.keyCode == 83 && simulationArea.shiftDown) {
-            saveOffline();
-            e.preventDefault();
-        }
+            // change direction fns
+            if (simulationArea.lastSelected != undefined) {
+                let direction = '';
+                switch (e.keyCode) {
+                case 37:
+                case 65:
+                    direction = 'LEFT';
+                    break;
+
+                case 38:
+                case 87:
+                    direction = 'UP';
+                    break;
+
+                case 39:
+                case 68:
+                    direction = 'RIGHT';
+                    break;
+
+                case 40:
+                case 83:
+                    direction = 'DOWN';
+                    break;
+
+                default:
+                    break;
+                }
+                if (direction !== '') {
+                    simulationArea.lastSelected.newDirection(direction);
+                }
+            }
 
-        // Detect Select all Shortcut
-        if (simulationArea.controlDown && (e.keyCode == 65 || e.keyCode == 97)) {
-            selectAll();
-            e.preventDefault();
-        }
+            if ((e.keyCode == 113 || e.keyCode == 81) && simulationArea.lastSelected != undefined) {
+                if (simulationArea.lastSelected.bitWidth !== undefined) { simulationArea.lastSelected.newBitWidth(parseInt(prompt('Enter new bitWidth'), 10)); }
+            }
 
-        //change direction fns
-        if ((e.keyCode == 37 || e.keyCode == 65) && simulationArea.lastSelected != undefined) {
-            simulationArea.lastSelected.newDirection("LEFT");
-        }
-        if ((e.keyCode == 38 || e.keyCode == 87) && simulationArea.lastSelected != undefined) {
-            simulationArea.lastSelected.newDirection("UP");
-        }
-        if ((e.keyCode == 39 || e.keyCode == 68) && simulationArea.lastSelected != undefined) {
-            simulationArea.lastSelected.newDirection("RIGHT");
-        }
-        if ((e.keyCode == 40 || e.keyCode == 83) && simulationArea.lastSelected != undefined) {
-            simulationArea.lastSelected.newDirection("DOWN");
-        }
-        if ((e.keyCode == 113 || e.keyCode == 81) && simulationArea.lastSelected != undefined) {
-            if (simulationArea.lastSelected.bitWidth !== undefined)
-                simulationArea.lastSelected.newBitWidth(parseInt(prompt("Enter new bitWidth"), 10));
-        }
-        if (simulationArea.controlDown && (e.key == "T" || e.key == "t")) {
+            if (simulationArea.controlDown && (e.key == 'T' || e.key == 't')) {
             // e.preventDefault(); //browsers normally open a new tab
-            simulationArea.changeClockTime(prompt("Enter Time:"));
-        }
-        if ((e.keyCode == 108 || e.keyCode == 76) && simulationArea.lastSelected != undefined) {
-            if (simulationArea.lastSelected.setLabel !== undefined) {
-                var labl = prompt("Enter The Label : ", simulationArea.lastSelected.label);
-                if (labl)
-                    simulationArea.lastSelected.setLabel(labl);
+                simulationArea.changeClockTime(prompt('Enter Time:'));
+            }
+            // f1 key for opening the documentation page
+            if (e.keyCode === 112) {
+                e.preventDefault();
+                window.open('https://docs.circuitverse.org/', '_blank');
             }
         }
-    })
+    });
 
-    document.getElementById("simulationArea").addEventListener('dblclick', function (e) {
+
+    document.getElementById('simulationArea').addEventListener('dblclick', (e) => {
         scheduleUpdate(2);
         if (simulationArea.lastSelected && simulationArea.lastSelected.dblclick !== undefined) {
             simulationArea.lastSelected.dblclick();
@@ -214,102 +295,78 @@ export function startListeners() {
 
     window.addEventListener('mouseup', onMouseUp);
 
+    document.getElementById('simulationArea').addEventListener('mousewheel', MouseScroll);
+    document.getElementById('simulationArea').addEventListener('DOMMouseScroll', MouseScroll);
 
+    document.addEventListener('cut', (e) => {
+        if (document.activeElement.tagName == 'INPUT') return;
 
-    document.getElementById("simulationArea").addEventListener('mousewheel', MouseScroll);
-    document.getElementById("simulationArea").addEventListener('DOMMouseScroll', MouseScroll);
+        if (listenToSimulator) {
+            simulationArea.copyList = simulationArea.multipleObjectSelections.slice();
+            if (simulationArea.lastSelected && simulationArea.lastSelected !== simulationArea.root && !simulationArea.copyList.contains(simulationArea.lastSelected)) {
+                simulationArea.copyList.push(simulationArea.lastSelected);
+            }
 
-    function MouseScroll(event) {
-        updateCanvas = true;
 
-        event.preventDefault()
-        var deltaY = event.wheelDelta ? event.wheelDelta : -event.detail;
-        var scrolledUp = deltaY < 0;
-        var scrolledDown = deltaY > 0;
+            const textToPutOnClipboard = copy(simulationArea.copyList, true);
 
-        if (event.ctrlKey) {
-            if (scrolledUp && globalScope.scale > 0.5 * DPR) {
-                changeScale(-.1 * DPR);
-            }
-            if (scrolledDown && globalScope.scale < 4 * DPR) {
-                changeScale(.1 * DPR);
-            }
-        } else {
-            if (scrolledUp && globalScope.scale < 4 * DPR) {
-                changeScale(.1 * DPR);
-            }
-            if (scrolledDown && globalScope.scale > 0.5 * DPR) {
-                changeScale(-.1 * DPR);
+            // Updated restricted elements
+            updateRestrictedElementsInScope();
+
+            localStorage.setItem('clipboardData', textToPutOnClipboard);
+            e.preventDefault();
+            if (textToPutOnClipboard == undefined) return;
+            if (isIe) {
+                window.clipboardData.setData('Text', textToPutOnClipboard);
+            } else {
+                e.clipboardData.setData('text/plain', textToPutOnClipboard);
             }
         }
+    });
 
-        updateCanvas = true;
-        gridUpdate = true;
-        if (layoutMode) layoutUpdate();
-        else update(); // Schedule update not working, this is INEFFICIENT
-    }
-
-    document.addEventListener('cut', function (e) {
-        simulationArea.copyList = simulationArea.multipleObjectSelections.slice();
-        if (simulationArea.lastSelected && simulationArea.lastSelected !== simulationArea.root && !simulationArea.copyList.contains(simulationArea.lastSelected)) {
-            simulationArea.copyList.push(simulationArea.lastSelected);
-        }
+    document.addEventListener('copy', (e) => {
+        if (document.activeElement.tagName == 'INPUT') return;
 
+        if (listenToSimulator) {
+            simulationArea.copyList = simulationArea.multipleObjectSelections.slice();
+            if (simulationArea.lastSelected && simulationArea.lastSelected !== simulationArea.root && !simulationArea.copyList.contains(simulationArea.lastSelected)) {
+                simulationArea.copyList.push(simulationArea.lastSelected);
+            }
 
-        var textToPutOnClipboard = copy(simulationArea.copyList, true);
+            const textToPutOnClipboard = copy(simulationArea.copyList);
 
-        // Updated restricted elements
-        updateRestrictedElementsInScope();
+            // Updated restricted elements
+            updateRestrictedElementsInScope();
 
-        localStorage.setItem('clipboardData', textToPutOnClipboard);
-        e.preventDefault();
-        if (textToPutOnClipboard == undefined)
-            return;
-        if (isIe) {
-            window.clipboardData.setData('Text', textToPutOnClipboard);
-        } else {
-            e.clipboardData.setData('text/plain', textToPutOnClipboard);
+            localStorage.setItem('clipboardData', textToPutOnClipboard);
+            e.preventDefault();
+            if (textToPutOnClipboard == undefined) return;
+            if (isIe) {
+                window.clipboardData.setData('Text', textToPutOnClipboard);
+            } else {
+                e.clipboardData.setData('text/plain', textToPutOnClipboard);
+            }
         }
-
     });
 
-    document.addEventListener('copy', function (e) {
-        simulationArea.copyList = simulationArea.multipleObjectSelections.slice();
-        if (simulationArea.lastSelected && simulationArea.lastSelected !== simulationArea.root && !simulationArea.copyList.contains(simulationArea.lastSelected)) {
-            simulationArea.copyList.push(simulationArea.lastSelected);
-        }
+    document.addEventListener('paste', (e) => {
+        if (document.activeElement.tagName == 'INPUT') return;
 
-        var textToPutOnClipboard = copy(simulationArea.copyList);
+        if (listenToSimulator) {
+            let data;
+            if (isIe) {
+                data = window.clipboardData.getData('Text');
+            } else {
+                data = e.clipboardData.getData('text/plain');
+            }
 
-        // Updated restricted elements
-        updateRestrictedElementsInScope();
+            paste(data);
 
-        localStorage.setItem('clipboardData', textToPutOnClipboard);
-        e.preventDefault();
-        if (textToPutOnClipboard == undefined)
-            return;
-        if (isIe) {
-            window.clipboardData.setData('Text', textToPutOnClipboard);
-        } else {
-            e.clipboardData.setData('text/plain', textToPutOnClipboard);
-        }
-
-    });
+            // Updated restricted elements
+            updateRestrictedElementsInScope();
 
-    document.addEventListener('paste', function (e) {
-        var data;
-        if (isIe) {
-            data = window.clipboardData.getData('Text');
-        } else {
-            data = e.clipboardData.getData('text/plain');
+            e.preventDefault();
         }
-
-        paste(data);
-
-        // Updated restricted elements
-        updateRestrictedElementsInScope();
-
-        e.preventDefault();
     });
 
     restrictedElements.forEach((element) => {
@@ -319,31 +376,15 @@ export function startListeners() {
 
         $(`#${element}`).mouseout(() => {
             hideRestricted();
-        })
+        });
     });
 }
 
-var isIe = (navigator.userAgent.toLowerCase().indexOf("msie") != -1 ||
-    navigator.userAgent.toLowerCase().indexOf("trident") != -1);
-
-
-function removeMiniMap() {
-    if (lightMode) return;
-
-    if (simulationArea.lastSelected == globalScope.root && simulationArea.mouseDown) return;
-    if (lastMiniMapShown + 2000 >= new Date().getTime()) {
-        setTimeout(removeMiniMap, lastMiniMapShown + 2000 - new Date().getTime());
-        return;
-    }
-    $('#miniMap').fadeOut('fast');
-
-}
-
+let isIe = (navigator.userAgent.toLowerCase().indexOf('msie') != -1
+    || navigator.userAgent.toLowerCase().indexOf('trident') != -1);
 
 function onMouseMove(e) {
-
-    var rect = simulationArea.canvas.getBoundingClientRect();
-    // console.log(rect)
+    const rect = simulationArea.canvas.getBoundingClientRect();
     simulationArea.mouseRawX = (e.clientX - rect.left) * DPR;
     simulationArea.mouseRawY = (e.clientY - rect.top) * DPR;
     simulationArea.mouseXf = (simulationArea.mouseRawX - globalScope.ox) / globalScope.scale;
@@ -351,80 +392,111 @@ function onMouseMove(e) {
     simulationArea.mouseX = Math.round(simulationArea.mouseXf / unit) * unit;
     simulationArea.mouseY = Math.round(simulationArea.mouseYf / unit) * unit;
 
-    updateCanvas = true;
+    updateCanvasSet(true);
 
     if (simulationArea.lastSelected && (simulationArea.mouseDown || simulationArea.lastSelected.newElement)) {
-        updateCanvas = true;
-        var fn;
+        updateCanvasSet(true);
+        let fn;
 
         if (simulationArea.lastSelected == globalScope.root) {
             fn = function () {
                 updateSelectionsAndPane();
-            }
+            };
         } else {
             fn = function () {
-                if (simulationArea.lastSelected)
-                    simulationArea.lastSelected.update();
+                if (simulationArea.lastSelected) { simulationArea.lastSelected.update(); }
             };
         }
         scheduleUpdate(0, 20, fn);
     } else {
         scheduleUpdate(0, 200);
     }
-
-
 }
 
 function onMouseUp(e) {
-
+    createNodeSet(simulationArea.controlDown);
+    simulationArea.mouseDown = false;
     if (!lightMode) {
-        lastMiniMapShown = new Date().getTime();
+        updatelastMinimapShown();
         setTimeout(removeMiniMap, 2000);
     }
 
-    errorDetected = false;
-    updateSimulation = true;
-    updatePosition = true;
-    updateCanvas = true;
-    gridUpdate = true;
-    wireToBeChecked = true;
+    errorDetectedSet(false);
+    updateSimulationSet(true);
+    updatePositionSet(true);
+    updateCanvasSet(true);
+    gridUpdateSet(true);
+    wireToBeCheckedSet(1);
 
     scheduleUpdate(1);
     simulationArea.mouseDown = false;
 
-    for (var i = 0; i < 2; i++) {
-        updatePosition = true;
-        wireToBeChecked = true;
+    for (let i = 0; i < 2; i++) {
+        updatePositionSet(true);
+        wireToBeCheckedSet(1);
         update();
     }
-    errorDetected = false;
-    updateSimulation = true;
-    updatePosition = true;
-    updateCanvas = true;
-    gridUpdate = true;
-    wireToBeChecked = true;
+    errorDetectedSet(false);
+    updateSimulationSet(true);
+    updatePositionSet(true);
+    updateCanvasSet(true);
+    gridUpdateSet(true);
+    wireToBeCheckedSet(1);
 
     scheduleUpdate(1);
-    var rect = simulationArea.canvas.getBoundingClientRect();
+    const rect = simulationArea.canvas.getBoundingClientRect();
 
     if (!(simulationArea.mouseRawX < 0 || simulationArea.mouseRawY < 0 || simulationArea.mouseRawX > width || simulationArea.mouseRawY > height)) {
-        smartDropXX = simulationArea.mouseX + 100; //Math.round(((simulationArea.mouseRawX - globalScope.ox+100) / globalScope.scale) / unit) * unit;
-        smartDropYY = simulationArea.mouseY - 50; //Math.round(((simulationArea.mouseRawY - globalScope.oy+100) / globalScope.scale) / unit) * unit;
+        uxvar.smartDropXX = simulationArea.mouseX + 100; // Math.round(((simulationArea.mouseRawX - globalScope.ox+100) / globalScope.scale) / unit) * unit;
+        uxvar.smartDropYY = simulationArea.mouseY - 50; // Math.round(((simulationArea.mouseRawY - globalScope.oy+100) / globalScope.scale) / unit) * unit;
     }
+}
 
+function resizeTabs() {
+    const $windowsize = $('body').width();
+    const $sideBarsize = $('.side').width();
+    const $maxwidth = ($windowsize - $sideBarsize);
+    $('#tabsBar div').each(function (e) {
+        $(this).css({ 'max-width': $maxwidth - 30 });
+    });
 }
 
-function delete_selected() {
+window.addEventListener('resize', resizeTabs);
+resizeTabs();
 
-    $("input").blur();
-    hideProperties();
-    // console.log(simulationArea.lastSelected)
-    if (simulationArea.lastSelected && !(simulationArea.lastSelected.objectType == "Node" && simulationArea.lastSelected.type != 2)) simulationArea.lastSelected.delete();
-    for (var i = 0; i < simulationArea.multipleObjectSelections.length; i++) {
-        if (!(simulationArea.multipleObjectSelections[i].objectType == "Node" && simulationArea.multipleObjectSelections[i].type != 2)) simulationArea.multipleObjectSelections[i].cleanDelete();
+$(() => {
+    $('[data-toggle="tooltip"]').tooltip();
+});
+
+// direction is only 1 or -1
+function handleZoom(direction) {
+    if (globalScope.scale > 0.5 * DPR) {
+        changeScale(direction * 0.1 * DPR);
+    } else if (globalScope.scale < 4 * DPR) {
+        changeScale(direction * 0.1 * DPR);
     }
-    simulationArea.multipleObjectSelections = [];
+    gridUpdateSet(true);
+}
 
-    // Updated restricted elements
-    // updateRestrictedElementsInScope();
+function ZoomIn() {
+    handleZoom(1);
 }
+
+function ZoomOut() {
+    handleZoom(-1);
+}
+
+export function MouseScroll(event) {
+    updateCanvasSet(true);
+    event.preventDefault();
+    let deltaY = event.wheelDelta ? event.wheelDelta : -event.detail;
+    event.preventDefault();
+    deltaY = event.wheelDelta ? event.wheelDelta : -event.detail;
+    const direction = deltaY > 0 ? 1 : -1;
+    handleZoom(direction);
+    updateCanvasSet(true);
+    gridUpdateSet(true);
+
+    if (layoutModeGet()) layoutUpdate();
+    else update(); // Schedule update not working, this is INEFFICIENT
+}
\ No newline at end of file
diff --git a/src/minimap.js b/src/minimap.js
new file mode 100755
index 0000000..552bc63
--- /dev/null
+++ b/src/minimap.js
@@ -0,0 +1,117 @@
+import simulationArea from './simulationArea';
+
+/**
+ * @type {Object} miniMapArea
+ * This object is used to draw the miniMap.
+ * @property {number} pageY
+ * @property {number} pageX
+ * @property {HTMLCanvasObject} canvas - the canvas object
+ * @property {function} setup - used to setup the parameters and dimensions
+ * @property {function} play - used to draw outline of minimap and call resolve
+ * @property {function} resolve - used to resolve all objects and draw them on minimap
+ * @property {function} clear - used to clear minimap
+ * @category minimap
+ */
+let miniMapArea;
+export default miniMapArea = {
+    canvas: document.getElementById('miniMapArea'),
+    setup() {
+        if (lightMode) return;
+        this.canvas = document.getElementById('miniMapArea');
+        this.pageHeight = height; // Math.round(((parseInt($("#simulationArea").height())))/ratio)*ratio-50; // -50 for tool bar? Check again
+        this.pageWidth = width; // Math.round(((parseInt($("#simulationArea").width())))/ratio)*ratio;
+        this.pageY = (this.pageHeight - globalScope.oy);
+        this.pageX = (this.pageWidth - globalScope.ox);
+
+        if (simulationArea.minHeight != undefined) { this.minY = Math.min(simulationArea.minHeight, (-globalScope.oy) / globalScope.scale); } else { this.minY = (-globalScope.oy) / globalScope.scale; }
+        if (simulationArea.maxHeight != undefined) { this.maxY = Math.max(simulationArea.maxHeight, this.pageY / globalScope.scale); } else { this.maxY = this.pageY / globalScope.scale; }
+        if (simulationArea.minWidth != undefined) { this.minX = Math.min(simulationArea.minWidth, (-globalScope.ox) / globalScope.scale); } else { this.minX = (-globalScope.ox) / globalScope.scale; }
+        if (simulationArea.maxWidth != undefined) { this.maxX = Math.max(simulationArea.maxWidth, (this.pageX) / globalScope.scale); } else { this.maxX = (this.pageX) / globalScope.scale; }
+
+        const h = this.maxY - this.minY;
+        const w = this.maxX - this.minX;
+
+        const ratio = Math.min(250 / h, 250 / w);
+        if (h > w) {
+            this.canvas.height = 250.0;
+            this.canvas.width = (250.0 * w) / h;
+        } else {
+            this.canvas.width = 250.0;
+            this.canvas.height = (250.0 * h) / w;
+        }
+
+        this.canvas.height += 5;
+        this.canvas.width += 5;
+
+        document.getElementById('miniMap').style.height = this.canvas.height;
+        document.getElementById('miniMap').style.width = this.canvas.width;
+        this.ctx = this.canvas.getContext('2d');
+        this.play(ratio);
+    },
+
+    play(ratio) {
+        if (lightMode) return;
+
+        this.ctx.fillStyle = '#bbb';
+        this.ctx.rect(0, 0, this.canvas.width, this.canvas.height);
+        this.ctx.fill();
+        this.resolve(ratio);
+    },
+    resolve(ratio) {
+        if (lightMode) return;
+
+        this.ctx.fillStyle = '#ddd';
+        this.ctx.beginPath();
+        this.ctx.rect(2.5 + ((this.pageX - this.pageWidth) / globalScope.scale - this.minX) * ratio, 2.5 + ((this.pageY - this.pageHeight) / globalScope.scale - this.minY) * ratio, this.pageWidth * ratio / globalScope.scale, this.pageHeight * ratio / globalScope.scale);
+        this.ctx.fill();
+
+        //  to show the area of current canvas
+        const lst = updateOrder;
+        this.ctx.strokeStyle = 'green';
+        this.ctx.fillStyle = 'DarkGreen';
+        for (let i = 0; i < lst.length; i++) {
+            if (lst[i] === 'wires') {
+                for (let j = 0; j < globalScope[lst[i]].length; j++) {
+                    this.ctx.beginPath();
+                    this.ctx.moveTo(2.5 + (globalScope[lst[i]][j].node1.absX() - this.minX) * ratio, 2.5 + (globalScope[lst[i]][j].node1.absY() - this.minY) * ratio);
+                    this.ctx.lineTo(2.5 + (globalScope[lst[i]][j].node2.absX() - this.minX) * ratio, 2.5 + (globalScope[lst[i]][j].node2.absY() - this.minY) * ratio);
+                    this.ctx.stroke();
+                }
+            } else if (lst[i] != 'nodes') {
+                // Don't include SquareRGBLed here; it has correct size.
+                let ledY = 0;
+                if (lst[i] == 'DigitalLed' || lst[i] == 'VariableLed' || lst[i] == 'RGBLed') { ledY = 20; }
+
+                for (let j = 0; j < globalScope[lst[i]].length; j++) {
+                    const xx = (globalScope[lst[i]][j].x - simulationArea.minWidth);
+                    const yy = (globalScope[lst[i]][j].y - simulationArea.minHeight);
+                    this.ctx.beginPath();
+                    const obj = globalScope[lst[i]][j];
+                    this.ctx.rect(2.5 + (obj.x - obj.leftDimensionX - this.minX) * ratio, 2.5 + (obj.y - obj.upDimensionY - this.minY) * ratio, (obj.rightDimensionX + obj.leftDimensionX) * ratio, (obj.downDimensionY + obj.upDimensionY + ledY) * ratio);
+
+                    this.ctx.fill();
+                    this.ctx.stroke();
+                }
+            }
+        }
+    },
+    clear() {
+        if (lightMode) return;
+        $('#miniMapArea').css('z-index', '-1');
+        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
+    },
+};
+let lastMiniMapShown;
+export function updatelastMinimapShown() {
+    lastMiniMapShown = new Date().getTime();
+}
+export function removeMiniMap() {
+    if (lightMode) return;
+
+    if (simulationArea.lastSelected == globalScope.root && simulationArea.mouseDown) return;
+    if (lastMiniMapShown + 2000 >= new Date().getTime()) {
+        setTimeout(removeMiniMap, lastMiniMapShown + 2000 - new Date().getTime());
+        return;
+    }
+    $('#miniMap').fadeOut('fast');
+}
diff --git a/src/module.js b/src/module.js
deleted file mode 100644
index 5a6170a..0000000
--- a/src/module.js
+++ /dev/null
@@ -1,4033 +0,0 @@
-import CircuitElement  from "./circuitElement"
-import { Node, findNode } from "./node";
-import { simulationArea } from "./simulationArea";
-import { correctWidth,lineTo,moveTo,arc } from "./canvasApi";
-
-function changeInputSize(size) {
-    if (size == undefined || size < 2 || size > 10) return;
-    if (this.inputSize == size) return;
-    size = parseInt(size, 10)
-    console.log(this.objectType, size)
-    var obj = new window[this.objectType](this.x, this.y, this.scope, this.direction, size, this.bitWidth);
-    simulationArea.lastSelected = obj;
-    this.delete();
-    console.log("obj", obj)
-    return obj;
-    // showProperties(obj);
-}
-
-export var moduleProperty = { "changeInputSize": changeInputSize } 
-
-
-export class AndGate extends CircuitElement {
-    constructor(x, y, scope = globalScope, dir = "RIGHT", inputLength = 2, bitWidth = 1) {
-        super(x, y, scope , dir, bitWidth)
-        console.log(this)
-        this.rectangleObject = false;
-        this.setDimensions(15, 20);
-        this.inp = [];
-
-        this.inputSize = inputLength;
-
-
-        //variable inputLength , node creation
-        if (inputLength % 2 == 1) {
-            for (var i = 0; i < inputLength / 2 - 1; i++) {
-                var a = new Node(-10, -10 * (i + 1), 0, this);
-                this.inp.push(a);
-            }
-            var a = new Node(-10, 0, 0, this);
-            this.inp.push(a);
-            for (var i = inputLength / 2 + 1; i < inputLength; i++) {
-                var a = new Node(-10, 10 * (i + 1 - inputLength / 2 - 1), 0, this);
-                this.inp.push(a);
-            }
-        } else {
-            for (var i = 0; i < inputLength / 2; i++) {
-                var a = new Node(-10, -10 * (i + 1), 0, this);
-                this.inp.push(a);
-            }
-            for (var i = inputLength / 2; i < inputLength; i++) {
-                var a = new Node(-10, 10 * (i + 1 - inputLength / 2), 0, this);
-                this.inp.push(a);
-            }
-        }
-
-        this.output1 = new Node(20, 0, 1, this);
-
-
-    }
-
-    //fn to create save Json Data of object
-    customSave() {
-        var data = {
-            constructorParamaters: [this.direction, this.inputSize, this.bitWidth],
-            nodes: {
-                inp: this.inp.map(findNode),
-                output1: findNode(this.output1)
-            },
-
-        }
-        return data;
-    }
-
-    //resolve output values based on inputData
-    resolve() {
-        var result = this.inp[0].value || 0;
-        if (this.isResolvable() == false) {
-            return;
-        }
-        for (var i = 1; i < this.inputSize; i++)
-            result = result & ((this.inp[i].value) || 0);
-        this.output1.value = result;
-        simulationArea.simulationQueue.add(this.output1);
-    }
-
-    //fn to draw
-    customDraw() {
-
-        let ctx = simulationArea.context;
-
-        ctx.beginPath();
-        ctx.lineWidth = correctWidth(3);
-        ctx.strokeStyle = "black"; //("rgba(0,0,0,1)");
-        ctx.fillStyle = "white";
-        var xx = this.x;
-        var yy = this.y;
-
-        moveTo(ctx,-10, -20, xx, yy, this.direction);
-        lineTo(ctx,0, -20, xx, yy, this.direction);
-        arc(ctx,0, 0, 20, (-Math.PI / 2), (Math.PI / 2), xx, yy, this.direction);
-        lineTo(ctx, -10, 20, xx, yy, this.direction);
-        lineTo(ctx,-10, -20, xx, yy, this.direction);
-        ctx.closePath();
-
-        // if ((this.hover && !simulationArea.shiftDown) || simulationArea.lastSelected == this || simulationArea.multipleObjectSelections.contains(this)) ctx.fillStyle = "rgba(255, 255, 32,0.8)";
-        ctx.fill();
-        ctx.stroke();
-
-    }
-}
-
-AndGate.prototype.tooltipText = "And Gate Tooltip : Implements logical conjunction";
-AndGate.prototype.alwaysResolve = true;
-AndGate.prototype.verilogType = "and";
-AndGate.prototype.changeInputSize = changeInputSize;
-
-// class NandGate extends CircuitElement {
-//     constructor(x, y, scope = globalScope, dir = "RIGHT", inputLength = 2, bitWidth = 1) {
-//         super(x, y, scope, dir, bitWidth);
-//         this.rectangleObject = false;
-//         this.setDimensions(15, 20);
-//         this.inp = [];
-
-
-//         this.inputSize = inputLength;
-
-
-//         //variable inputLength , node creation
-//         if (inputLength % 2 == 1) {
-//             for (var i = 0; i < inputLength / 2 - 1; i++) {
-//                 var a = new Node(-10, -10 * (i + 1), 0, this);
-//                 this.inp.push(a);
-//             }
-//             var a = new Node(-10, 0, 0, this);
-//             this.inp.push(a);
-//             for (var i = inputLength / 2 + 1; i < inputLength; i++) {
-//                 var a = new Node(-10, 10 * (i + 1 - inputLength / 2 - 1), 0, this);
-//                 this.inp.push(a);
-//             }
-//         } else {
-//             for (var i = 0; i < inputLength / 2; i++) {
-//                 var a = new Node(-10, -10 * (i + 1), 0, this);
-//                 this.inp.push(a);
-//             }
-//             for (var i = inputLength / 2; i < inputLength; i++) {
-//                 var a = new Node(-10, 10 * (i + 1 - inputLength / 2), 0, this);
-//                 this.inp.push(a);
-//             }
-//         }
-
-//         this.output1 = new Node(30, 0, 1, this);
-
-
-//     }
-
-//     //fn to create save Json Data of object
-//     customSave() {
-//         var data = {
-
-//             constructorParamaters: [this.direction, this.inputSize, this.bitWidth],
-//             nodes: {
-//                 inp: this.inp.map(findNode),
-//                 output1: findNode(this.output1)
-//             },
-//         }
-//         return data;
-//     }
-
-//     //resolve output values based on inputData
-//     resolve() {
-//         var result = this.inp[0].value || 0;
-//         if (this.isResolvable() == false) {
-//             return;
-//         }
-//         for (var i = 1; i < this.inputSize; i++)
-//             result = result & (this.inp[i].value || 0);
-//         result = ((~result >>> 0) << (32 - this.bitWidth)) >>> (32 - this.bitWidth);
-//         this.output1.value = result;
-//         simulationArea.simulationQueue.add(this.output1);
-//     }
-
-//     //fn to draw
-//     customDraw() {
-
-//         ctx = simulationArea.context;
-//         ctx.beginPath();
-//         ctx.lineWidth = correctWidth(3);
-//         ctx.strokeStyle = "black";
-//         ctx.fillStyle = "white";
-//         var xx = this.x;
-//         var yy = this.y;
-
-//         moveTo(ctx, -10, -20, xx, yy, this.direction);
-//         lineTo(ctx, 0, -20, xx, yy, this.direction);
-//         arc(ctx, 0, 0, 20, (-Math.PI / 2), (Math.PI / 2), xx, yy, this.direction);
-//         lineTo(ctx, -10, 20, xx, yy, this.direction);
-//         lineTo(ctx, -10, -20, xx, yy, this.direction);
-//         ctx.closePath();
-
-//         if ((this.hover && !simulationArea.shiftDown) || simulationArea.lastSelected == this || simulationArea.multipleObjectSelections.contains(this)) ctx.fillStyle = "rgba(255, 255, 32,0.5)";
-//         ctx.fill();
-//         ctx.stroke();
-//         ctx.beginPath();
-//         drawCircle2(ctx, 25, 0, 5, xx, yy, this.direction);
-//         ctx.stroke();
-
-
-//     }
-// }
-
-// NandGate.prototype.tooltipText = "Nand Gate ToolTip : Combination of AND and NOT gates";
-// NandGate.prototype.alwaysResolve = true;
-// NandGate.prototype.changeInputSize = changeInputSize;
-// NandGate.prototype.verilogType = "nand";
-
-// class Multiplexer extends CircuitElement {
-//     constructor(
-//         x,
-//         y,
-//         scope = globalScope,
-//         dir = "RIGHT",
-//         bitWidth = 1,
-//         controlSignalSize = 1
-//     ) {
-//         // //console.log("HIT");
-//         // //console.log(x,y,scope,dir,bitWidth,controlSignalSize);
-//         super(x, y, scope, dir, bitWidth);
-
-//         this.controlSignalSize = controlSignalSize || parseInt(prompt("Enter control signal bitWidth"), 10);
-//         this.inputSize = 1 << this.controlSignalSize;
-//         this.xOff = 0;
-//         this.yOff = 1;
-//         if (this.controlSignalSize == 1) {
-//             this.xOff = 10;
-//         }
-//         if (this.controlSignalSize <= 3) {
-//             this.yOff = 2;
-//         }
-
-//         this.setDimensions(20 - this.xOff, this.yOff * 5 * (this.inputSize));
-//         this.rectangleObject = false;
-
-//         this.inp = [];
-//         for (var i = 0; i < this.inputSize; i++) {
-//             var a = new Node(-20 + this.xOff, +this.yOff * 10 * (i - this.inputSize / 2) + 10, 0, this);
-//             this.inp.push(a);
-//         }
-
-//         this.output1 = new Node(20 - this.xOff, 0, 1, this);
-//         this.controlSignalInput = new Node(0, this.yOff * 10 * (this.inputSize / 2 - 1) + this.xOff + 10, 0, this, this.controlSignalSize, "Control Signal");
-
-
-
-//     }
-
-//     changeControlSignalSize(size) {
-//         if (size == undefined || size < 1 || size > 32) return;
-//         if (this.controlSignalSize == size) return;
-//         var obj = new window[this.objectType](this.x, this.y, this.scope, this.direction, this.bitWidth, size);
-//         this.cleanDelete();
-//         simulationArea.lastSelected = obj;
-//         return obj;
-//     }
-
-//     newBitWidth(bitWidth) {
-//         this.bitWidth = bitWidth;
-//         for (var i = 0; i < this.inputSize; i++) {
-//             this.inp[i].bitWidth = bitWidth
-//         }
-//         this.output1.bitWidth = bitWidth;
-//     }
-
-//     //fn to create save Json Data of object
-//     isResolvable() {
-//         if (this.controlSignalInput.value != undefined && this.inp[this.controlSignalInput.value].value != undefined) return true;
-//         return false;
-//     }
-
-//     customSave() {
-//         var data = {
-//             constructorParamaters: [this.direction, this.bitWidth, this.controlSignalSize],
-//             nodes: {
-//                 inp: this.inp.map(findNode),
-//                 output1: findNode(this.output1),
-//                 controlSignalInput: findNode(this.controlSignalInput)
-//             },
-//         }
-//         return data;
-//     }
-
-//     resolve() {
-
-//         if (this.isResolvable() == false) {
-//             return;
-//         }
-//         this.output1.value = this.inp[this.controlSignalInput.value].value;
-//         simulationArea.simulationQueue.add(this.output1);
-//     }
-
-//     customDraw() {
-
-//         ctx = simulationArea.context;
-
-//         var xx = this.x;
-//         var yy = this.y;
-
-//         ctx.beginPath();
-//         moveTo(ctx, 0, this.yOff * 10 * (this.inputSize / 2 - 1) + 10 + 0.5 * this.xOff, xx, yy, this.direction);
-//         lineTo(ctx, 0, this.yOff * 5 * (this.inputSize - 1) + this.xOff, xx, yy, this.direction);
-//         ctx.stroke();
-
-//         ctx.lineWidth = correctWidth(3);
-//         ctx.beginPath();
-//         ctx.strokeStyle = ("rgba(0,0,0,1)");
-
-//         ctx.fillStyle = "white";
-//         moveTo(ctx, -20 + this.xOff, -this.yOff * 10 * (this.inputSize / 2), xx, yy, this.direction);
-//         lineTo(ctx, -20 + this.xOff, 20 + this.yOff * 10 * (this.inputSize / 2 - 1), xx, yy, this.direction);
-//         lineTo(ctx, 20 - this.xOff, +this.yOff * 10 * (this.inputSize / 2 - 1) + this.xOff, xx, yy, this.direction);
-//         lineTo(ctx, 20 - this.xOff, -this.yOff * 10 * (this.inputSize / 2) - this.xOff + 20, xx, yy, this.direction);
-
-//         ctx.closePath();
-//         if ((this.hover && !simulationArea.shiftDown) || simulationArea.lastSelected == this || simulationArea.multipleObjectSelections.contains(this))
-//             ctx.fillStyle = "rgba(255, 255, 32,0.8)";
-//         ctx.fill();
-//         ctx.stroke();
-
-
-
-//         ctx.beginPath();
-//         // ctx.lineWidth = correctWidth(2);
-//         ctx.fillStyle = "black";
-//         ctx.textAlign = "center";
-//         for (var i = 0; i < this.inputSize; i++) {
-
-//             if (this.direction == "RIGHT") fillText(ctx, String(i), xx + this.inp[i].x + 7, yy + this.inp[i].y + 2, 10);
-//             else if (this.direction == "LEFT") fillText(ctx, String(i), xx + this.inp[i].x - 7, yy + this.inp[i].y + 2, 10);
-//             else if (this.direction == "UP") fillText(ctx, String(i), xx + this.inp[i].x, yy + this.inp[i].y - 4, 10);
-//             else fillText(ctx, String(i), xx + this.inp[i].x, yy + this.inp[i].y + 10, 10);
-//         }
-//         ctx.fill();
-//     }
-// }
-
-// Multiplexer.prototype.tooltipText = "Multiplexer ToolTip : Multiple inputs and a single line output.";
-// Multiplexer.prototype.mutableProperties = {
-//     "controlSignalSize": {
-//         name: "Control Signal Size",
-//         type: "number",
-//         max: "32",
-//         min: "1",
-//         func: "changeControlSignalSize",
-//     },
-// }
-
-// class XorGate extends CircuitElement {
-//     constructor(x, y, scope = globalScope, dir = "RIGHT", inputs = 2, bitWidth = 1) {
-//         super(x, y, scope, dir, bitWidth);
-//         this.rectangleObject = false;
-//         this.setDimensions(15, 20);
-
-//         this.inp = [];
-//         this.inputSize = inputs;
-
-//         if (inputs % 2 == 1) {
-//             for (var i = 0; i < inputs / 2 - 1; i++) {
-//                 var a = new Node(-20, -10 * (i + 1), 0, this);
-//                 this.inp.push(a);
-//             }
-//             var a = new Node(-20, 0, 0, this);
-//             this.inp.push(a);
-//             for (var i = inputs / 2 + 1; i < inputs; i++) {
-//                 var a = new Node(-20, 10 * (i + 1 - inputs / 2 - 1), 0, this);
-//                 this.inp.push(a);
-//             }
-//         } else {
-//             for (var i = 0; i < inputs / 2; i++) {
-//                 var a = new Node(-20, -10 * (i + 1), 0, this);
-//                 this.inp.push(a);
-//             }
-//             for (var i = inputs / 2; i < inputs; i++) {
-//                 var a = new Node(-20, 10 * (i + 1 - inputs / 2), 0, this);
-//                 this.inp.push(a);
-//             }
-//         }
-//         this.output1 = new Node(20, 0, 1, this);
-
-//     }
-
-//     customSave() {
-//         // //console.log(this.scope.allNodes);
-//         var data = {
-//             constructorParamaters: [this.direction, this.inputSize, this.bitWidth],
-//             nodes: {
-//                 inp: this.inp.map(findNode),
-//                 output1: findNode(this.output1)
-//             },
-//         }
-//         return data;
-//     }
-
-//     resolve() {
-//         var result = this.inp[0].value || 0;
-//         if (this.isResolvable() == false) {
-//             return;
-//         }
-//         for (var i = 1; i < this.inputSize; i++)
-//             result = result ^ (this.inp[i].value || 0);
-
-//         this.output1.value = result;
-//         simulationArea.simulationQueue.add(this.output1);
-//     }
-
-//     customDraw() {
-
-//         ctx = simulationArea.context;
-//         ctx.strokeStyle = ("rgba(0,0,0,1)");
-//         ctx.lineWidth = correctWidth(3);
-
-//         var xx = this.x;
-//         var yy = this.y;
-//         ctx.beginPath();
-//         ctx.fillStyle = "white";
-//         moveTo(ctx, -10, -20, xx, yy, this.direction, true);
-//         bezierCurveTo(0, -20, +15, -10, 20, 0, xx, yy, this.direction);
-//         bezierCurveTo(0 + 15, 0 + 10, 0, 0 + 20, -10, +20, xx, yy, this.direction);
-//         bezierCurveTo(0, 0, 0, 0, -10, -20, xx, yy, this.direction);
-//         // arc(ctx, 0, 0, -20, (-Math.PI / 2), (Math.PI / 2), xx, yy, this.direction);
-//         ctx.closePath();
-//         if ((this.hover && !simulationArea.shiftDown) || simulationArea.lastSelected == this || simulationArea.multipleObjectSelections.contains(this)) ctx.fillStyle = "rgba(255, 255, 32,0.8)";
-//         ctx.fill();
-//         ctx.stroke();
-//         ctx.beginPath();
-//         arc2(ctx, -35, 0, 25, 1.70 * (Math.PI), 0.30 * (Math.PI), xx, yy, this.direction);
-//         ctx.stroke();
-
-
-//     }
-// }
-
-// XorGate.prototype.tooltipText = "Xor Gate Tooltip : Implements an exclusive OR.";
-// XorGate.prototype.alwaysResolve = true;
-
-// XorGate.prototype.changeInputSize = changeInputSize;
-// XorGate.prototype.verilogType = "xor";
-
-// class XnorGate extends CircuitElement {
-//     constructor(x, y, scope = globalScope, dir = "RIGHT", inputs = 2, bitWidth = 1) {
-//         super(x, y, scope, dir, bitWidth);
-//         this.rectangleObject = false;
-//         this.setDimensions(15, 20);
-
-//         this.inp = [];
-//         this.inputSize = inputs;
-
-//         if (inputs % 2 == 1) {
-//             for (var i = 0; i < inputs / 2 - 1; i++) {
-//                 var a = new Node(-20, -10 * (i + 1), 0, this);
-//                 this.inp.push(a);
-//             }
-//             var a = new Node(-20, 0, 0, this);
-//             this.inp.push(a);
-//             for (var i = inputs / 2 + 1; i < inputs; i++) {
-//                 var a = new Node(-20, 10 * (i + 1 - inputs / 2 - 1), 0, this);
-//                 this.inp.push(a);
-//             }
-//         } else {
-//             for (var i = 0; i < inputs / 2; i++) {
-//                 var a = new Node(-20, -10 * (i + 1), 0, this);
-//                 this.inp.push(a);
-//             }
-//             for (var i = inputs / 2; i < inputs; i++) {
-//                 var a = new Node(-20, 10 * (i + 1 - inputs / 2), 0, this);
-//                 this.inp.push(a);
-//             }
-//         }
-//         this.output1 = new Node(30, 0, 1, this);
-
-//     }
-
-//     customSave() {
-//         var data = {
-//             constructorParamaters: [this.direction, this.inputSize, this.bitWidth],
-//             nodes: {
-//                 inp: this.inp.map(findNode),
-//                 output1: findNode(this.output1)
-//             },
-//         }
-//         return data;
-//     }
-
-//     resolve() {
-//         var result = this.inp[0].value || 0;
-//         if (this.isResolvable() == false) {
-//             return;
-//         }
-//         for (var i = 1; i < this.inputSize; i++)
-//             result = result ^ (this.inp[i].value || 0);
-//         result = ((~result >>> 0) << (32 - this.bitWidth)) >>> (32 - this.bitWidth);
-//         this.output1.value = result;
-//         simulationArea.simulationQueue.add(this.output1);
-//     }
-
-//     customDraw() {
-
-//         ctx = simulationArea.context;
-//         ctx.strokeStyle = ("rgba(0,0,0,1)");
-//         ctx.lineWidth = correctWidth(3);
-
-//         var xx = this.x;
-//         var yy = this.y;
-//         ctx.beginPath();
-//         ctx.fillStyle = "white";
-//         moveTo(ctx, -10, -20, xx, yy, this.direction, true);
-//         bezierCurveTo(0, -20, +15, -10, 20, 0, xx, yy, this.direction);
-//         bezierCurveTo(0 + 15, 0 + 10, 0, 0 + 20, -10, +20, xx, yy, this.direction);
-//         bezierCurveTo(0, 0, 0, 0, -10, -20, xx, yy, this.direction);
-//         // arc(ctx, 0, 0, -20, (-Math.PI / 2), (Math.PI / 2), xx, yy, this.direction);
-//         ctx.closePath();
-//         if ((this.hover && !simulationArea.shiftDown) || simulationArea.lastSelected == this || simulationArea.multipleObjectSelections.contains(this)) ctx.fillStyle = "rgba(255, 255, 32,0.8)";
-//         ctx.fill();
-//         ctx.stroke();
-//         ctx.beginPath();
-//         arc2(ctx, -35, 0, 25, 1.70 * (Math.PI), 0.30 * (Math.PI), xx, yy, this.direction);
-//         ctx.stroke();
-//         ctx.beginPath();
-//         drawCircle2(ctx, 25, 0, 5, xx, yy, this.direction);
-//         ctx.stroke();
-
-//     }
-// }
-
-// XnorGate.prototype.alwaysResolve = true;
-// XnorGate.prototype.tooltipText = "Xnor Gate ToolTip : Logical complement of the XOR gate";
-// XnorGate.prototype.changeInputSize = changeInputSize;
-// XnorGate.prototype.verilogType = "xnor";
-
-// class SevenSegDisplay extends CircuitElement {
-//     constructor(x, y, scope = globalScope) {
-//         super(x, y, scope, "RIGHT", 1);
-//         this.fixedBitWidth = true;
-//         this.directionFixed = true;
-//         this.setDimensions(30, 50);
-
-//         this.g = new Node(-20, -50, 0, this);
-//         this.f = new Node(-10, -50, 0, this);
-//         this.a = new Node(+10, -50, 0, this);
-//         this.b = new Node(+20, -50, 0, this);
-//         this.e = new Node(-20, +50, 0, this);
-//         this.d = new Node(-10, +50, 0, this);
-//         this.c = new Node(+10, +50, 0, this);
-//         this.dot = new Node(+20, +50, 0, this);
-//         this.direction = "RIGHT";
-
-
-//     }
-
-//     customSave() {
-//         var data = {
-
-//             nodes: {
-//                 g: findNode(this.g),
-//                 f: findNode(this.f),
-//                 a: findNode(this.a),
-//                 b: findNode(this.b),
-//                 d: findNode(this.d),
-//                 e: findNode(this.e),
-//                 c: findNode(this.c),
-//                 d: findNode(this.d),
-//                 dot: findNode(this.dot)
-//             },
-//         }
-//         return data;
-//     }
-
-//     customDrawSegment(x1, y1, x2, y2, color) {
-//         if (color == undefined) color = "lightgrey";
-//         ctx = simulationArea.context;
-//         ctx.beginPath();
-//         ctx.strokeStyle = color;
-//         ctx.lineWidth = correctWidth(5);
-//         xx = this.x;
-//         yy = this.y;
-//         moveTo(ctx, x1, y1, xx, yy, this.direction);
-//         lineTo(ctx, x2, y2, xx, yy, this.direction);
-//         ctx.closePath();
-//         ctx.stroke();
-//     }
-
-//     customDraw() {
-//         ctx = simulationArea.context;
-
-//         var xx = this.x;
-//         var yy = this.y;
-
-//         this.customDrawSegment(18, -3, 18, -38, ["lightgrey", "red"][this.b.value]);
-//         this.customDrawSegment(18, 3, 18, 38, ["lightgrey", "red"][this.c.value]);
-//         this.customDrawSegment(-18, -3, -18, -38, ["lightgrey", "red"][this.f.value]);
-//         this.customDrawSegment(-18, 3, -18, 38, ["lightgrey", "red"][this.e.value]);
-//         this.customDrawSegment(-17, -38, 17, -38, ["lightgrey", "red"][this.a.value]);
-//         this.customDrawSegment(-17, 0, 17, 0, ["lightgrey", "red"][this.g.value]);
-//         this.customDrawSegment(-15, 38, 17, 38, ["lightgrey", "red"][this.d.value]);
-
-//         ctx.beginPath();
-//         var dotColor = ["lightgrey", "red"][this.dot.value] || "lightgrey"
-//         ctx.strokeStyle = dotColor;
-//         rect(ctx, xx + 22, yy + 42, 2, 2);
-//         ctx.stroke();
-//     }
-// }
-
-// SevenSegDisplay.prototype.tooltipText = "Seven Display ToolTip: Consists of 7+1 single bit inputs."
-
-// class SixteenSegDisplay extends CircuitElement {
-//     constructor(x, y, scope = globalScope) {
-//         super(x, y, scope, "RIGHT", 16);
-//         this.fixedBitWidth = true;
-//         this.directionFixed = true;
-//         this.setDimensions(30, 50);
-
-//         this.input1 = new Node(0, -50, 0, this, 16);
-//         this.dot = new Node(0, 50, 0, this, 1);
-//         this.direction = "RIGHT";
-//     }
-
-//     customSave() {
-//         var data = {
-//             nodes: {
-//                 input1: findNode(this.input1),
-//                 dot: findNode(this.dot)
-//             }
-//         }
-//         return data;
-//     }
-
-//     customDrawSegment(x1, y1, x2, y2, color) {
-//         if (color == undefined) color = "lightgrey";
-//         ctx = simulationArea.context;
-//         ctx.beginPath();
-//         ctx.strokeStyle = color;
-//         ctx.lineWidth = correctWidth(4);
-//         xx = this.x;
-//         yy = this.y;
-//         moveTo(ctx, x1, y1, xx, yy, this.direction);
-//         lineTo(ctx, x2, y2, xx, yy, this.direction);
-//         ctx.closePath();
-//         ctx.stroke();
-//     }
-
-//     customDrawSegmentSlant(x1, y1, x2, y2, color) {
-//         if (color == undefined) color = "lightgrey";
-//         ctx = simulationArea.context;
-//         ctx.beginPath();
-//         ctx.strokeStyle = color;
-//         ctx.lineWidth = correctWidth(3);
-//         xx = this.x;
-//         yy = this.y;
-//         moveTo(ctx, x1, y1, xx, yy, this.direction);
-//         lineTo(ctx, x2, y2, xx, yy, this.direction);
-//         ctx.closePath();
-//         ctx.stroke();
-//     }
-
-//     customDraw() {
-//         ctx = simulationArea.context;
-
-//         var xx = this.x;
-//         var yy = this.y;
-
-//         var color = ["lightgrey", "red"];
-//         var value = this.input1.value;
-
-//         this.customDrawSegment(-20, -38, 0, -38, ["lightgrey", "red"][(value >> 15) & 1]);		//a1
-//         this.customDrawSegment(20, -38, 0, -38, ["lightgrey", "red"][(value >> 14) & 1]);		//a2
-//         this.customDrawSegment(21.5, -2, 21.5, -36, ["lightgrey", "red"][(value >> 13) & 1]);	//b
-//         this.customDrawSegment(21.5, 2, 21.5, 36, ["lightgrey", "red"][(value >> 12) & 1]);		//c
-//         this.customDrawSegment(-20, 38, 0, 38, ["lightgrey", "red"][(value >> 11) & 1]);		//d1
-//         this.customDrawSegment(20, 38, 0, 38, ["lightgrey", "red"][(value >> 10) & 1]);			//d2
-//         this.customDrawSegment(-21.5, 2, -21.5, 36, ["lightgrey", "red"][(value >> 9) & 1]);	//e
-//         this.customDrawSegment(-21.5, -36, -21.5, -2, ["lightgrey", "red"][(value >> 8) & 1]);	//f
-//         this.customDrawSegment(-20, 0, 0, 0, ["lightgrey", "red"][(value >> 7) & 1]);			//g1
-//         this.customDrawSegment(20, 0, 0, 0, ["lightgrey", "red"][(value >> 6) & 1]);			//g2
-//         this.customDrawSegmentSlant(0, 0, -21, -37, ["lightgrey", "red"][(value >> 5) & 1]);	//h
-//         this.customDrawSegment(0, -2, 0, -36, ["lightgrey", "red"][(value >> 4) & 1]);			//i
-//         this.customDrawSegmentSlant(0, 0, 21, -37, ["lightgrey", "red"][(value >> 3) & 1]);		//j
-//         this.customDrawSegmentSlant(0, 0, 21, 37, ["lightgrey", "red"][(value >> 2) & 1]);		//k
-//         this.customDrawSegment(0, 2, 0, 36, ["lightgrey", "red"][(value >> 1) & 1]);			//l
-//         this.customDrawSegmentSlant(0, 0, -21, 37, ["lightgrey", "red"][(value >> 0) & 1]);		//m
-
-//         ctx.beginPath();
-//         var dotColor = ["lightgrey", "red"][this.dot.value] || "lightgrey"
-//         ctx.strokeStyle = dotColor;
-//         rect(ctx, xx + 22, yy + 42, 2, 2);
-//         ctx.stroke();
-//     }
-// }
-
-// SixteenSegDisplay.prototype.tooltipText = "Sixteen Display ToolTip: Consists of 16+1 bit inputs.";
-
-// class HexDisplay extends CircuitElement {
-//     constructor(x, y, scope = globalScope) {
-//         super(x, y, scope, "RIGHT", 4);
-//         this.directionFixed = true;
-//         this.fixedBitWidth = true;
-//         this.setDimensions(30, 50);
-
-//         this.inp = new Node(0, -50, 0, this, 4);
-//         this.direction = "RIGHT";
-//     }
-
-//     customSave() {
-//         var data = {
-
-
-//             nodes: {
-//                 inp: findNode(this.inp)
-//             }
-
-//         }
-//         return data;
-//     }
-
-//     customDrawSegment(x1, y1, x2, y2, color) {
-//         if (color == undefined) color = "lightgrey";
-//         ctx = simulationArea.context;
-//         ctx.beginPath();
-//         ctx.strokeStyle = color;
-//         ctx.lineWidth = correctWidth(5);
-//         xx = this.x;
-//         yy = this.y;
-
-//         moveTo(ctx, x1, y1, xx, yy, this.direction);
-//         lineTo(ctx, x2, y2, xx, yy, this.direction);
-//         ctx.closePath();
-//         ctx.stroke();
-//     }
-
-//     customDraw() {
-//         ctx = simulationArea.context;
-
-//         var xx = this.x;
-//         var yy = this.y;
-
-//         ctx.strokeStyle = "black";
-//         ctx.lineWidth = correctWidth(3);
-//         var a = b = c = d = e = f = g = 0;
-//         switch (this.inp.value) {
-//             case 0:
-//                 a = b = c = d = e = f = 1;
-//                 break;
-//             case 1:
-//                 b = c = 1;
-//                 break;
-//             case 2:
-//                 a = b = g = e = d = 1;
-//                 break;
-//             case 3:
-//                 a = b = g = c = d = 1;
-//                 break;
-//             case 4:
-//                 f = g = b = c = 1;
-//                 break;
-//             case 5:
-//                 a = f = g = c = d = 1;
-//                 break;
-//             case 6:
-//                 a = f = g = e = c = d = 1;
-//                 break;
-//             case 7:
-//                 a = b = c = 1;
-//                 break;
-//             case 8:
-//                 a = b = c = d = e = g = f = 1;
-//                 break;
-//             case 9:
-//                 a = f = g = b = c = 1;
-//                 break;
-//             case 0xA:
-//                 a = f = b = c = g = e = 1;
-//                 break;
-//             case 0xB:
-//                 f = e = g = c = d = 1;
-//                 break;
-//             case 0xC:
-//                 a = f = e = d = 1;
-//                 break;
-//             case 0xD:
-//                 b = c = g = e = d = 1;
-//                 break;
-//             case 0xE:
-//                 a = f = g = e = d = 1;
-//                 break;
-//             case 0xF:
-//                 a = f = g = e = 1;
-//                 break;
-//             default:
-
-//         }
-//         this.customDrawSegment(18, -3, 18, -38, ["lightgrey", "red"][b]);
-//         this.customDrawSegment(18, 3, 18, 38, ["lightgrey", "red"][c]);
-//         this.customDrawSegment(-18, -3, -18, -38, ["lightgrey", "red"][f]);
-//         this.customDrawSegment(-18, 3, -18, 38, ["lightgrey", "red"][e]);
-//         this.customDrawSegment(-17, -38, 17, -38, ["lightgrey", "red"][a]);
-//         this.customDrawSegment(-17, 0, 17, 0, ["lightgrey", "red"][g]);
-//         this.customDrawSegment(-15, 38, 17, 38, ["lightgrey", "red"][d]);
-
-//     }
-// }
-
-// HexDisplay.prototype.tooltipText = "Hex Display ToolTip: Inputs a 4 Bit Hex number and displays it."
-
-// class OrGate extends CircuitElement {
-//     constructor(x, y, scope = globalScope, dir = "RIGHT", inputs = 2, bitWidth = 1) {
-//         // Calling base class constructor
-//         super(x, y, scope, dir, bitWidth);
-//         this.rectangleObject = false;
-//         this.setDimensions(15, 20);
-//         // Inherit base class prototype
-
-//         this.inp = [];
-//         this.inputSize = inputs;
-
-
-//         if (inputs % 2 == 1) {
-//             // for (var i = 0; i < inputs / 2 - 1; i++) {
-//             //     var a = new Node(-10, -10 * (i + 1), 0, this);
-//             //     this.inp.push(a);
-//             // }
-//             // var a = new Node(-10, 0, 0, this);
-//             // this.inp.push(a);
-//             // for (var i = inputs / 2 + 1; i < inputs; i++) {
-//             //     var a = new Node(-10, 10 * (i + 1 - inputs / 2 - 1), 0, this);
-//             //     this.inp.push(a);
-//             // }
-//             for (var i = Math.floor(inputs / 2) - 1; i >= 0; i--) {
-//                 var a = new Node(-10, -10 * (i + 1), 0, this);
-//                 this.inp.push(a);
-//             }
-//             var a = new Node(-10, 0, 0, this);
-//             this.inp.push(a);
-//             for (var i = 0; i < Math.floor(inputs / 2); i++) {
-//                 var a = new Node(-10, 10 * (i + 1), 0, this);
-//                 this.inp.push(a);
-//             }
-//         } else {
-//             for (var i = inputs / 2 - 1; i >= 0; i--) {
-//                 var a = new Node(-10, -10 * (i + 1), 0, this);
-//                 this.inp.push(a);
-//             }
-//             for (var i = 0; i < inputs / 2; i++) {
-//                 var a = new Node(-10, 10 * (i + 1), 0, this);
-//                 this.inp.push(a);
-//             }
-//         }
-//         this.output1 = new Node(20, 0, 1, this);
-
-
-
-//     }
-
-//     customSave() {
-//         var data = {
-
-//             constructorParamaters: [this.direction, this.inputSize, this.bitWidth],
-
-//             nodes: {
-//                 inp: this.inp.map(findNode),
-//                 output1: findNode(this.output1),
-//             },
-//         }
-//         return data;
-//     }
-
-//     resolve() {
-//         var result = this.inp[0].value || 0;
-//         if (this.isResolvable() == false) {
-//             return;
-//         }
-//         for (var i = 1; i < this.inputSize; i++)
-//             result = result | (this.inp[i].value || 0);
-//         this.output1.value = result;
-//         simulationArea.simulationQueue.add(this.output1);
-//     }
-
-//     customDraw() {
-
-//         ctx = simulationArea.context;
-//         ctx.strokeStyle = ("rgba(0,0,0,1)");
-//         ctx.lineWidth = correctWidth(3);
-
-//         var xx = this.x;
-//         var yy = this.y;
-//         ctx.beginPath();
-//         ctx.fillStyle = "white";
-
-//         moveTo(ctx, -10, -20, xx, yy, this.direction, true);
-//         bezierCurveTo(0, -20, +15, -10, 20, 0, xx, yy, this.direction);
-//         bezierCurveTo(0 + 15, 0 + 10, 0, 0 + 20, -10, +20, xx, yy, this.direction);
-//         bezierCurveTo(0, 0, 0, 0, -10, -20, xx, yy, this.direction);
-//         ctx.closePath();
-//         if ((this.hover && !simulationArea.shiftDown) || simulationArea.lastSelected == this || simulationArea.multipleObjectSelections.contains(this)) ctx.fillStyle = "rgba(255, 255, 32,0.8)";
-//         ctx.fill();
-//         ctx.stroke();
-
-
-
-//     }
-// }
-
-// OrGate.prototype.tooltipText = "Or Gate Tooltip : Implements logical disjunction";
-// OrGate.prototype.changeInputSize = changeInputSize;
-// OrGate.prototype.alwaysResolve = true;
-// OrGate.prototype.verilogType = "or";
-
-// class Stepper extends CircuitElement {
-//     constructor(x, y, scope = globalScope, dir = "RIGHT") {
-
-//         super(x, y, scope, dir, 8);
-//         this.setDimensions(20, 20);
-
-//         this.output1 = new Node(20, 0, 1, this, 8);
-//         this.state = 0;
-
-//     }
-
-//     customSave() {
-//         var data = {
-//             constructorParamaters: [this.direction],
-//             nodes: {
-//                 output1: findNode(this.output1),
-//             },
-//             values: {
-//                 state: this.state
-//             }
-//         }
-//         return data;
-//     }
-
-//     customDraw() {
-//         ctx = simulationArea.context;
-
-//         ctx.beginPath();
-//         ctx.font = "20px Georgia";
-//         ctx.fillStyle = "green";
-//         ctx.textAlign = "center";
-//         fillText(ctx, this.state.toString(16), this.x, this.y + 5);
-//         ctx.fill();;
-//     }
-
-//     resolve() {
-//         this.state = Math.min(this.state, (1 << this.bitWidth) - 1);
-//         this.output1.value = this.state;
-//         simulationArea.simulationQueue.add(this.output1);
-//     }
-
-//     keyDown2(key) {
-//         //console.log(key);
-//         if (this.state < (1 << this.bitWidth) && (key == "+" || key == "=")) this.state++;
-//         if (this.state > 0 && (key == "_" || key == "-")) this.state--;
-//     }
-// }
-
-// Stepper.prototype.tooltipText = "Stepper ToolTip: Increase/Decrease value by selecting the stepper and using +/- keys."
-
-// class NotGate extends CircuitElement {
-//     constructor(x, y, scope = globalScope, dir = "RIGHT", bitWidth = 1) {
-
-//         super(x, y, scope, dir, bitWidth);
-//         this.rectangleObject = false;
-//         this.setDimensions(15, 15);
-
-//         this.inp1 = new Node(-10, 0, 0, this);
-//         this.output1 = new Node(20, 0, 1, this);
-
-
-//     }
-
-//     customSave() {
-//         var data = {
-//             constructorParamaters: [this.direction, this.bitWidth],
-//             nodes: {
-//                 output1: findNode(this.output1),
-//                 inp1: findNode(this.inp1)
-//             },
-//         }
-//         return data;
-//     }
-
-//     resolve() {
-//         if (this.isResolvable() == false) {
-//             return;
-//         }
-//         this.output1.value = ((~this.inp1.value >>> 0) << (32 - this.bitWidth)) >>> (32 - this.bitWidth);
-//         simulationArea.simulationQueue.add(this.output1);
-//     }
-
-//     customDraw() {
-
-//         ctx = simulationArea.context;
-//         ctx.strokeStyle = "black";
-//         ctx.lineWidth = correctWidth(3);
-
-//         var xx = this.x;
-//         var yy = this.y;
-//         ctx.beginPath();
-//         ctx.fillStyle = "white";
-//         moveTo(ctx, -10, -10, xx, yy, this.direction);
-//         lineTo(ctx, 10, 0, xx, yy, this.direction);
-//         lineTo(ctx, -10, 10, xx, yy, this.direction);
-//         ctx.closePath();
-//         if ((this.hover && !simulationArea.shiftDown) || simulationArea.lastSelected == this || simulationArea.multipleObjectSelections.contains(this)) ctx.fillStyle = "rgba(255, 255, 32,0.8)";
-//         ctx.fill();
-//         ctx.stroke();
-//         ctx.beginPath();
-//         drawCircle2(ctx, 15, 0, 5, xx, yy, this.direction);
-//         ctx.stroke();
-
-//     }
-// }
-
-// NotGate.prototype.tooltipText = "Not Gate Tooltip : Inverts the input digital signal.";
-
-// class ForceGate extends CircuitElement {
-//     constructor(x, y, scope = globalScope, dir = "RIGHT", bitWidth = 1) {
-
-//         super(x, y, scope, dir, bitWidth);
-//         this.setDimensions(20, 10);
-
-//         this.inp1 = new Node(-20, 0, 0, this);
-//         this.inp2 = new Node(0, 0, 0, this);
-//         this.output1 = new Node(20, 0, 1, this);
-
-
-//     }
-
-//     isResolvable() {
-//         return (this.inp1.value != undefined || this.inp2.value != undefined)
-//     }
-
-//     customSave() {
-//         var data = {
-//             constructorParamaters: [this.direction, this.bitWidth],
-//             nodes: {
-//                 output1: findNode(this.output1),
-//                 inp1: findNode(this.inp1),
-//                 inp2: findNode(this.inp2)
-//             },
-//         }
-//         return data;
-//     }
-
-//     resolve() {
-//         if (this.inp2.value != undefined)
-//             this.output1.value = this.inp2.value;
-//         else
-//             this.output1.value = this.inp1.value;
-//         simulationArea.simulationQueue.add(this.output1);
-//     }
-
-//     customDraw() {
-
-//         ctx = simulationArea.context;
-//         var xx = this.x;
-//         var yy = this.y;
-
-
-
-//         ctx.beginPath();
-//         ctx.fillStyle = "Black";
-//         ctx.textAlign = "center"
-
-//         fillText4(ctx, "I", -10, 0, xx, yy, this.direction, 10);
-//         fillText4(ctx, "O", 10, 0, xx, yy, this.direction, 10);
-//         ctx.fill();
-
-//     }
-// }
-
-// ForceGate.prototype.tooltipText = "Force Gate ToolTip : ForceGate Selected.";
-
-// class Text extends CircuitElement {
-//     constructor(x, y, scope = globalScope, label = "") {
-
-//         super(x, y, scope, "RIGHT", 1);
-//         // this.setDimensions(15, 15);
-//         this.fixedBitWidth = true;
-//         this.directionFixed = true;
-//         this.labelDirectionFixed = true;
-//         this.setHeight(10);
-//         this.setLabel(label);
-
-
-
-//     }
-
-//     setLabel(str = "") {
-
-//         this.label = str;
-//         ctx = simulationArea.context;
-//         ctx.font = 14 + "px Georgia";
-//         this.leftDimensionX = 10;
-//         this.rightDimensionX = ctx.measureText(this.label).width + 10;
-//         //console.log(this.leftDimensionX,this.rightDimensionX,ctx.measureText(this.label))
-//     }
-
-//     customSave() {
-//         var data = {
-//             constructorParamaters: [this.label],
-//         }
-//         return data;
-//     }
-
-//     keyDown(key) {
-
-
-//         if (key.length == 1) {
-//             if (this.label == "Enter Text Here")
-//                 this.setLabel(key)
-//             else
-//                 this.setLabel(this.label + key);
-//         } else if (key == "Backspace") {
-//             if (this.label == "Enter Text Here")
-//                 this.setLabel("")
-//             else
-//                 this.setLabel(this.label.slice(0, -1));
-//         }
-//     }
-
-//     draw() {
-
-//         if (this.label.length == 0 && simulationArea.lastSelected != this) this.delete();
-
-//         ctx = simulationArea.context;
-//         ctx.strokeStyle = "black";
-//         ctx.lineWidth = 1;
-
-
-
-//         var xx = this.x;
-//         var yy = this.y;
-
-//         if ((this.hover && !simulationArea.shiftDown) || simulationArea.lastSelected == this || simulationArea.multipleObjectSelections.contains(this)) {
-//             ctx.beginPath();
-//             ctx.fillStyle = "white";
-//             rect2(ctx, -this.leftDimensionX, -this.upDimensionY, this.leftDimensionX + this.rightDimensionX, this.upDimensionY + this.downDimensionY, this.x, this.y, "RIGHT");
-//             ctx.fillStyle = "rgba(255, 255, 32,0.1)";
-//             ctx.fill();
-//             ctx.stroke();
-//         }
-//         ctx.beginPath();
-//         ctx.textAlign = "left";
-//         ctx.fillStyle = "black"
-//         fillText(ctx, this.label, xx, yy + 5, 14);
-//         ctx.fill();
-
-//     }
-// }
-
-// Text.prototype.tooltipText = "Text ToolTip: Use this to document your circuit."
-
-// class TriState extends CircuitElement {
-//     constructor(x, y, scope = globalScope, dir = "RIGHT", bitWidth = 1) {
-//         super(x, y, scope, dir, bitWidth);
-//         this.rectangleObject = false;
-//         this.setDimensions(15, 15);
-
-//         this.inp1 = new Node(-10, 0, 0, this);
-//         this.output1 = new Node(20, 0, 1, this);
-//         this.state = new Node(0, 0, 0, this, 1, "Enable");
-
-
-//     }
-
-//     // TriState.prototype.propagationDelay=10000;
-//     customSave() {
-//         var data = {
-//             constructorParamaters: [this.direction, this.bitWidth],
-//             nodes: {
-//                 output1: findNode(this.output1),
-//                 inp1: findNode(this.inp1),
-//                 state: findNode(this.state),
-//             },
-//         }
-//         return data;
-//     }
-
-//     // TriState.prototype.isResolvable = function(){
-//     // 	return this.inp1.value!=undefined
-//     // }
-//     newBitWidth(bitWidth) {
-//         this.inp1.bitWidth = bitWidth;
-//         this.output1.bitWidth = bitWidth;
-//         this.bitWidth = bitWidth;
-//     }
-
-//     resolve() {
-//         if (this.isResolvable() == false) {
-//             return;
-//         }
-
-//         if (this.state.value == 1) {
-//             if (this.output1.value != this.inp1.value) {
-//                 this.output1.value = this.inp1.value; //>>>0)<<(32-this.bitWidth))>>>(32-this.bitWidth);
-//                 simulationArea.simulationQueue.add(this.output1);
-//             }
-//             simulationArea.contentionPending.clean(this);
-//         } else {
-//             if (this.output1.value != undefined && !simulationArea.contentionPending.contains(this)) {
-//                 this.output1.value = undefined;
-//                 simulationArea.simulationQueue.add(this.output1);
-//             }
-
-//         }
-//         simulationArea.contentionPending.clean(this);
-//     }
-
-//     customDraw() {
-
-//         ctx = simulationArea.context;
-//         ctx.strokeStyle = ("rgba(0,0,0,1)");
-//         ctx.lineWidth = correctWidth(3);
-
-//         var xx = this.x;
-//         var yy = this.y;
-//         ctx.beginPath();
-//         ctx.fillStyle = "white";
-//         moveTo(ctx, -10, -15, xx, yy, this.direction);
-//         lineTo(ctx, 20, 0, xx, yy, this.direction);
-//         lineTo(ctx, -10, 15, xx, yy, this.direction);
-//         ctx.closePath();
-//         if ((this.hover && !simulationArea.shiftDown) || simulationArea.lastSelected == this || simulationArea.multipleObjectSelections.contains(this)) ctx.fillStyle = "rgba(255, 255, 32,0.8)";
-//         ctx.fill();
-//         ctx.stroke();
-
-//     }
-// }
-
-// TriState.prototype.tooltipText = "TriState ToolTip : Effectively removes the output from the circuit.";
-
-// class Buffer extends CircuitElement {
-//     constructor(x, y, scope = globalScope, dir = "RIGHT", bitWidth = 1) {
-//         super(x, y, scope, dir, bitWidth);
-//         this.rectangleObject = false;
-//         this.setDimensions(15, 15);
-
-//         this.state = 0;
-//         this.preState = 0;
-//         this.inp1 = new Node(-10, 0, 0, this);
-//         this.reset = new Node(0, 0, 0, this, 1, "reset");
-//         this.output1 = new Node(20, 0, 1, this);
-
-
-//     }
-
-//     customSave() {
-//         var data = {
-//             constructorParamaters: [this.direction, this.bitWidth],
-//             nodes: {
-//                 output1: findNode(this.output1),
-//                 inp1: findNode(this.inp1),
-//                 reset: findNode(this.reset),
-//             },
-//         }
-//         return data;
-//     }
-
-//     newBitWidth(bitWidth) {
-//         this.inp1.bitWidth = bitWidth;
-//         this.output1.bitWidth = bitWidth;
-//         this.bitWidth = bitWidth;
-//     }
-
-//     isResolvable() {
-//         return true;
-//     }
-
-//     resolve() {
-
-//         if (this.reset.value == 1) {
-//             this.state = this.preState;
-//         }
-//         if (this.inp1.value !== undefined)
-//             this.state = this.inp1.value;
-
-//         this.output1.value = this.state;
-//         simulationArea.simulationQueue.add(this.output1);
-
-//     }
-
-//     customDraw() {
-
-//         ctx = simulationArea.context;
-//         ctx.strokeStyle = ("rgba(200,0,0,1)");
-//         ctx.lineWidth = correctWidth(3);
-
-//         var xx = this.x;
-//         var yy = this.y;
-//         ctx.beginPath();
-//         ctx.fillStyle = "white";
-//         moveTo(ctx, -10, -15, xx, yy, this.direction);
-//         lineTo(ctx, 20, 0, xx, yy, this.direction);
-//         lineTo(ctx, -10, 15, xx, yy, this.direction);
-//         ctx.closePath();
-//         if ((this.hover && !simulationArea.shiftDown) || simulationArea.lastSelected == this || simulationArea.multipleObjectSelections.contains(this)) ctx.fillStyle = "rgba(255, 255, 32,0.8)";
-//         ctx.fill();
-//         ctx.stroke();
-
-//     }
-// }
-
-// Buffer.prototype.tooltipText = "Buffer ToolTip : Isolate the input from the output.";
-
-// class ControlledInverter extends CircuitElement {
-//     constructor(x, y, scope = globalScope, dir = "RIGHT", bitWidth = 1) {
-//         super(x, y, scope, dir, bitWidth);
-//         this.rectangleObject = false;
-//         this.setDimensions(15, 15);
-
-//         this.inp1 = new Node(-10, 0, 0, this);
-//         this.output1 = new Node(30, 0, 1, this);
-//         this.state = new Node(0, 0, 0, this, 1, "Enable");
-
-
-//     }
-
-//     customSave() {
-//         var data = {
-//             constructorParamaters: [this.direction, this.bitWidth],
-//             nodes: {
-//                 output1: findNode(this.output1),
-//                 inp1: findNode(this.inp1),
-//                 state: findNode(this.state)
-//             },
-//         }
-//         return data;
-//     }
-
-//     newBitWidth(bitWidth) {
-//         this.inp1.bitWidth = bitWidth;
-//         this.output1.bitWidth = bitWidth;
-//         this.bitWidth = bitWidth;
-//     }
-
-//     resolve() {
-//         if (this.isResolvable() == false) {
-//             return;
-//         }
-//         if (this.state.value == 1) {
-//             this.output1.value = ((~this.inp1.value >>> 0) << (32 - this.bitWidth)) >>> (32 - this.bitWidth);
-//             simulationArea.simulationQueue.add(this.output1);
-//         }
-//         if (this.state.value == 0) {
-//             this.output1.value = undefined;
-//         }
-//     }
-
-//     customDraw() {
-
-//         ctx = simulationArea.context;
-//         ctx.strokeStyle = ("rgba(0,0,0,1)");
-//         ctx.lineWidth = correctWidth(3);
-
-//         var xx = this.x;
-//         var yy = this.y;
-//         ctx.beginPath();
-//         ctx.fillStyle = "white";
-//         moveTo(ctx, -10, -15, xx, yy, this.direction);
-//         lineTo(ctx, 20, 0, xx, yy, this.direction);
-//         lineTo(ctx, -10, 15, xx, yy, this.direction);
-//         ctx.closePath();
-//         if ((this.hover && !simulationArea.shiftDown) || simulationArea.lastSelected == this || simulationArea.multipleObjectSelections.contains(this)) ctx.fillStyle = "rgba(255, 255, 32,0.8)";
-//         ctx.fill();
-//         ctx.stroke();
-//         ctx.beginPath();
-//         drawCircle2(ctx, 25, 0, 5, xx, yy, this.direction);
-//         ctx.stroke();
-
-//     }
-// }
-
-// ControlledInverter.prototype.tooltipText = "Controlled Inverter ToolTip : Controlled buffer and NOT gate.";
-
-// class Adder extends CircuitElement {
-//     constructor(x, y, scope = globalScope, dir = "RIGHT", bitWidth = 1) {
-
-//         super(x, y, scope, dir, bitWidth);
-//         this.setDimensions(20, 20);
-
-//         this.inpA = new Node(-20, -10, 0, this, this.bitWidth, "A");
-//         this.inpB = new Node(-20, 0, 0, this, this.bitWidth, "B");
-//         this.carryIn = new Node(-20, 10, 0, this, 1, "Cin");
-//         this.sum = new Node(20, 0, 1, this, this.bitWidth, "Sum");
-//         this.carryOut = new Node(20, 10, 1, this, 1, "Cout");
-
-
-
-//     }
-
-//     customSave() {
-//         var data = {
-//             constructorParamaters: [this.direction, this.bitWidth],
-//             nodes: {
-//                 inpA: findNode(this.inpA),
-//                 inpB: findNode(this.inpB),
-//                 carryIn: findNode(this.carryIn),
-//                 carryOut: findNode(this.carryOut),
-//                 sum: findNode(this.sum)
-//             },
-//         }
-//         return data;
-//     }
-
-//     isResolvable() {
-//         return this.inpA.value != undefined && this.inpB.value != undefined;
-//     }
-
-//     newBitWidth(bitWidth) {
-//         this.bitWidth = bitWidth;
-//         this.inpA.bitWidth = bitWidth;
-//         this.inpB.bitWidth = bitWidth;
-//         this.sum.bitWidth = bitWidth;
-//     }
-
-//     resolve() {
-//         if (this.isResolvable() == false) {
-//             return;
-//         }
-//         var carryIn = this.carryIn.value;
-//         if (carryIn == undefined) carryIn = 0;
-//         var sum = this.inpA.value + this.inpB.value + carryIn;
-
-//         this.sum.value = ((sum) << (32 - this.bitWidth)) >>> (32 - this.bitWidth);
-//         this.carryOut.value = +((sum >>> (this.bitWidth)) !== 0);
-//         simulationArea.simulationQueue.add(this.carryOut);
-//         simulationArea.simulationQueue.add(this.sum);
-//     }
-// }
-
-// Adder.prototype.tooltipText = "Adder ToolTip : Performs addition of numbers.";
-
-// class Rom extends CircuitElement {
-//     constructor(
-//         x,
-//         y,
-//         scope = globalScope,
-//         data = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
-//     ) {
-
-//         super(x, y, scope, "RIGHT", 1);
-//         this.fixedBitWidth = true;
-//         this.directionFixed = true;
-//         this.rectangleObject = false;
-//         this.setDimensions(80, 50);
-
-//         this.memAddr = new Node(-80, 0, 0, this, 4, "Address");
-//         this.en = new Node(0, 50, 0, this, 1, "Enable");
-//         this.dataOut = new Node(80, 0, 1, this, 8, "DataOut");
-//         this.data = data || prompt("Enter data").split(' ').map(function (x) {
-//             return parseInt(x, 16);
-//         });
-//         //console.log(this.data);
-
-
-
-//     }
-
-//     isResolvable() {
-//         if ((this.en.value == 1 || this.en.connections.length == 0) && this.memAddr.value != undefined) return true;
-//         return false;
-//     }
-
-//     customSave() {
-//         var data = {
-//             constructorParamaters: [this.data],
-//             nodes: {
-//                 memAddr: findNode(this.memAddr),
-//                 dataOut: findNode(this.dataOut),
-//                 en: findNode(this.en),
-//             },
-
-//         }
-//         return data;
-//     }
-
-//     findPos() {
-//         var i = Math.floor((simulationArea.mouseX - this.x + 35) / 20)
-//         var j = Math.floor((simulationArea.mouseY - this.y + 35) / 16);
-//         if (i < 0 || j < 0 || i > 3 || j > 3) return undefined;
-//         return j * 4 + i;
-//     }
-
-//     click() { // toggle
-//         this.selectedIndex = this.findPos();
-//     }
-
-//     keyDown(key) {
-//         if (key == "Backspace") this.delete();
-//         if (this.selectedIndex == undefined) return;
-//         key = key.toLowerCase();
-//         if (!~"1234567890abcdef".indexOf(key)) return;
-//         else {
-//             this.data[this.selectedIndex] = (this.data[this.selectedIndex] * 16 + parseInt(key, 16)) % 256;
-//         }
-//     }
-
-//     customDraw() {
-
-
-
-
-//         var ctx = simulationArea.context;
-//         var xx = this.x;
-//         var yy = this.y;
-
-//         var hoverIndex = this.findPos();
-
-
-
-
-//         ctx.strokeStyle = "black";
-//         ctx.fillStyle = "white";
-//         ctx.lineWidth = correctWidth(3);
-//         ctx.beginPath();
-//         rect2(ctx, -this.leftDimensionX, -this.upDimensionY, this.leftDimensionX + this.rightDimensionX, this.upDimensionY + this.downDimensionY, this.x, this.y, [this.direction, "RIGHT"][+this.directionFixed]);
-//         if (hoverIndex == undefined && ((!simulationArea.shiftDown && this.hover) || simulationArea.lastSelected == this || simulationArea.multipleObjectSelections.contains(this))) ctx.fillStyle = "rgba(255, 255, 32,0.8)";
-//         ctx.fill();
-//         ctx.stroke();
-//         // if (this.hover)
-//         //     ////console.log(this);
-
-//         ctx.strokeStyle = "black";
-//         ctx.fillStyle = "#fafafa";
-//         ctx.lineWidth = correctWidth(1);
-//         ctx.beginPath();
-
-//         for (var i = 0; i < 16; i += 4) {
-//             for (var j = i; j < i + 4; j++) {
-//                 rect2(ctx, (j % 4) * 20, i * 4, 20, 16, xx - 35, yy - 35);
-//             }
-//         }
-//         ctx.fill();
-//         ctx.stroke();
-
-//         if (hoverIndex != undefined) {
-//             ctx.beginPath();
-//             ctx.fillStyle = "yellow";
-//             rect2(ctx, (hoverIndex % 4) * 20, Math.floor(hoverIndex / 4) * 16, 20, 16, xx - 35, yy - 35);
-//             ctx.fill();
-//             ctx.stroke();
-//         }
-//         if (this.selectedIndex != undefined) {
-//             ctx.beginPath();
-//             ctx.fillStyle = "lightgreen";
-//             rect2(ctx, (this.selectedIndex % 4) * 20, Math.floor(this.selectedIndex / 4) * 16, 20, 16, xx - 35, yy - 35);
-//             ctx.fill();
-//             ctx.stroke();
-//         }
-//         if (this.memAddr.value != undefined) {
-//             ctx.beginPath();
-//             ctx.fillStyle = "green";
-//             rect2(ctx, (this.memAddr.value % 4) * 20, Math.floor(this.memAddr.value / 4) * 16, 20, 16, xx - 35, yy - 35);
-//             ctx.fill();
-//             ctx.stroke();
-//         }
-
-//         ctx.beginPath();
-//         ctx.fillStyle = "Black";
-//         fillText3(ctx, "A", -65, 5, xx, yy, fontSize = 16, font = "Georgia", textAlign = "right");
-//         fillText3(ctx, "D", 75, 5, xx, yy, fontSize = 16, font = "Georgia", textAlign = "right");
-//         fillText3(ctx, "En", 5, 47, xx, yy, fontSize = 16, font = "Georgia", textAlign = "right");
-//         ctx.fill();
-
-
-//         ctx.beginPath();
-//         ctx.fillStyle = "Black";
-//         for (var i = 0; i < 16; i += 4) {
-//             for (var j = i; j < i + 4; j++) {
-//                 var s = this.data[j].toString(16);
-//                 if (s.length < 2) s = '0' + s;
-//                 fillText3(ctx, s, (j % 4) * 20, i * 4, xx - 35 + 10, yy - 35 + 12, fontSize = 14, font = "Georgia", textAlign = "center")
-//             }
-//         }
-//         ctx.fill();
-
-//         ctx.beginPath();
-//         ctx.fillStyle = "Black";
-//         for (var i = 0; i < 16; i += 4) {
-
-//             var s = i.toString(16);
-//             if (s.length < 2) s = '0' + s;
-//             fillText3(ctx, s, 0, i * 4, xx - 40, yy - 35 + 12, fontSize = 14, font = "Georgia", textAlign = "right")
-
-//         }
-//         ctx.fill();
-
-
-//     }
-
-//     resolve() {
-//         if (this.isResolvable() == false) {
-//             return;
-//         }
-//         this.dataOut.value = this.data[this.memAddr.value];
-//         simulationArea.simulationQueue.add(this.dataOut);
-//     }
-// }
-
-// Rom.prototype.tooltipText = "Read-only memory";
-
-// class Splitter extends CircuitElement {
-//     constructor(
-//         x,
-//         y,
-//         scope = globalScope,
-//         dir = "RIGHT",
-//         bitWidth = undefined,
-//         bitWidthSplit = undefined
-//     ) {
-
-//         super(x, y, scope, dir, bitWidth);
-//         this.rectangleObject = false;
-
-//         this.bitWidthSplit = bitWidthSplit || prompt("Enter bitWidth Split").split(' ').filter(x => x != '').map(function (x) {
-//             return parseInt(x, 10) || 1;
-
-//         });
-//         this.splitCount = this.bitWidthSplit.length;
-
-//         this.setDimensions(10, (this.splitCount - 1) * 10 + 10);
-//         this.yOffset = (this.splitCount / 2 - 1) * 20;
-
-//         this.inp1 = new Node(-10, 10 + this.yOffset, 0, this, this.bitWidth);
-
-//         this.outputs = [];
-//         // this.prevOutValues=new Array(this.splitCount)
-//         for (var i = 0; i < this.splitCount; i++)
-//             this.outputs.push(new Node(20, i * 20 - this.yOffset - 20, 0, this, this.bitWidthSplit[i]));
-
-//         this.prevInpValue = undefined;
-
-
-//     }
-
-//     customSave() {
-//         var data = {
-
-//             constructorParamaters: [this.direction, this.bitWidth, this.bitWidthSplit],
-//             nodes: {
-//                 outputs: this.outputs.map(findNode),
-//                 inp1: findNode(this.inp1)
-//             },
-//         }
-//         return data;
-//     }
-
-//     removePropagation() {
-
-//         if (this.inp1.value == undefined) {
-//             let i = 0;
-
-//             for (i = 0; i < this.outputs.length; i++) { // False Hit
-//                 if (this.outputs[i].value == undefined) return;
-//             }
-
-//             for (i = 0; i < this.outputs.length; i++) {
-//                 if (this.outputs[i].value !== undefined) {
-//                     this.outputs[i].value = undefined;
-//                     simulationArea.simulationQueue.add(this.outputs[i]);
-//                 }
-//             }
-//         } else {
-//             if (this.inp1.value !== undefined) {
-//                 this.inp1.value = undefined;
-//                 simulationArea.simulationQueue.add(this.inp1);
-//             }
-//         }
-
-//         this.prevInpValue = undefined;
-
-//     }
-
-//     isResolvable() {
-//         var resolvable = false;
-//         if (this.inp1.value != this.prevInpValue) {
-//             if (this.inp1.value !== undefined) return true;
-//             return false;
-//         }
-//         var i;
-//         for (i = 0; i < this.splitCount; i++)
-//             if (this.outputs[i].value === undefined) break;
-//         if (i == this.splitCount) resolvable = true;
-//         return resolvable;
-//     }
-
-//     resolve() {
-//         if (this.isResolvable() == false) {
-//             return;
-//         }
-//         if (this.inp1.value !== undefined && this.inp1.value != this.prevInpValue) {
-//             var bitCount = 1;
-//             for (var i = 0; i < this.splitCount; i++) {
-//                 var bitSplitValue = extractBits(this.inp1.value, bitCount, bitCount + this.bitWidthSplit[i] - 1);
-//                 if (this.outputs[i].value != bitSplitValue) {
-//                     if (this.outputs[i].value != bitSplitValue) {
-//                         this.outputs[i].value = bitSplitValue;
-//                         simulationArea.simulationQueue.add(this.outputs[i]);
-//                     }
-//                 }
-//                 bitCount += this.bitWidthSplit[i];
-//             }
-//         } else {
-//             var n = 0;
-//             for (var i = this.splitCount - 1; i >= 0; i--) {
-//                 n <<= this.bitWidthSplit[i];
-//                 n += this.outputs[i].value;
-//             }
-//             if (this.inp1.value != n) {
-//                 this.inp1.value = n;
-//                 simulationArea.simulationQueue.add(this.inp1);
-//             }
-//             // else if (this.inp1.value != n) {
-//             //     console.log("CONTENTION");
-//             // }
-//         }
-//         this.prevInpValue = this.inp1.value;
-//     }
-
-//     reset() {
-//         this.prevInpValue = undefined;
-//     }
-
-//     processVerilog() {
-
-//         // console.log(this.inp1.verilogLabel +":"+ this.outputs[0].verilogLabel);
-//         if (this.inp1.verilogLabel != "" && this.outputs[0].verilogLabel == "") {
-//             var bitCount = 0;
-//             for (var i = 0; i < this.splitCount; i++) {
-//                 // var bitSplitValue = extractBits(this.inp1.value, bitCount, bitCount + this.bitWidthSplit[i] - 1);
-//                 if (this.bitWidthSplit[i] > 1)
-//                     var label = this.inp1.verilogLabel + '[' + (bitCount + this.bitWidthSplit[i] - 1) + ":" + bitCount + "]";
-//                 else
-//                     var label = this.inp1.verilogLabel + '[' + bitCount + "]";
-//                 if (this.outputs[i].verilogLabel != label) {
-//                     this.outputs[i].verilogLabel = label;
-//                     this.scope.stack.push(this.outputs[i]);
-//                 }
-//                 bitCount += this.bitWidthSplit[i];
-//             }
-//         } else if (this.inp1.verilogLabel == "" && this.outputs[0].verilogLabel != "") {
-
-
-//             var label = "{" + this.outputs.map((x) => {
-//                 return x.verilogLabel
-//             }).join(",") + "}";
-//             // console.log("HIT",label)
-//             if (this.inp1.verilogLabel != label) {
-//                 this.inp1.verilogLabel = label;
-//                 this.scope.stack.push(this.inp1);
-//             }
-//         }
-//     }
-
-//     customDraw() {
-
-//         ctx = simulationArea.context;
-//         ctx.strokeStyle = ["black", "brown"][((this.hover && !simulationArea.shiftDown) || simulationArea.lastSelected == this || simulationArea.multipleObjectSelections.contains(this)) + 0];
-//         ctx.lineWidth = correctWidth(3);
-
-//         var xx = this.x;
-//         var yy = this.y;
-//         ctx.beginPath();
-
-//         // drawLine(ctx, -10, -10, xx, y2, color, width)
-//         moveTo(ctx, -10, 10 + this.yOffset, xx, yy, this.direction);
-//         lineTo(ctx, 0, 0 + this.yOffset, xx, yy, this.direction);
-//         lineTo(ctx, 0, -20 * (this.splitCount - 1) + this.yOffset, xx, yy, this.direction);
-
-//         var bitCount = 0;
-//         for (var i = this.splitCount - 1; i >= 0; i--) {
-//             moveTo(ctx, 0, -20 * i + this.yOffset, xx, yy, this.direction);
-//             lineTo(ctx, 20, -20 * i + this.yOffset, xx, yy, this.direction);
-//         }
-//         ctx.stroke();
-//         ctx.beginPath();
-//         ctx.fillStyle = "black";
-//         for (var i = this.splitCount - 1; i >= 0; i--) {
-//             fillText2(ctx, bitCount + ":" + (bitCount + this.bitWidthSplit[this.splitCount - i - 1]), 12, -20 * i + this.yOffset + 10, xx, yy, this.direction);
-//             bitCount += this.bitWidthSplit[this.splitCount - i - 1];
-//         }
-//         ctx.fill();
-
-
-
-//     }
-// }
-
-// Splitter.prototype.tooltipText = "Splitter ToolTip: Split multiBit Input into smaller bitwidths or vice versa."
-
-// class Ground extends CircuitElement {
-//     constructor(x, y, scope = globalScope, bitWidth = 1) {
-//         super(x, y, scope, "RIGHT", bitWidth);
-//         this.rectangleObject = false;
-//         this.setDimensions(10, 10);
-//         this.directionFixed = true;
-//         this.output1 = new Node(0, -10, 1, this);
-//     }
-
-//     customSave() {
-//         var data = {
-//             nodes: {
-//                 output1: findNode(this.output1)
-//             },
-//             values: {
-//                 state: this.state
-//             },
-//             constructorParamaters: [this.direction, this.bitWidth]
-//         }
-//         return data;
-//     }
-
-//     resolve() {
-//         this.output1.value = 0;
-//         simulationArea.simulationQueue.add(this.output1);
-//     }
-
-//     customSave() {
-//         var data = {
-//             nodes: {
-//                 output1: findNode(this.output1)
-//             },
-//             constructorParamaters: [this.bitWidth],
-//         }
-//         return data;
-//     }
-
-//     customDraw() {
-
-//         ctx = simulationArea.context;
-
-//         ctx.beginPath();
-//         ctx.strokeStyle = ["black", "brown"][((this.hover && !simulationArea.shiftDown) || simulationArea.lastSelected == this || simulationArea.multipleObjectSelections.contains(this)) + 0];
-//         ctx.lineWidth = correctWidth(3);
-
-//         var xx = this.x;
-//         var yy = this.y;
-
-//         moveTo(ctx, 0, -10, xx, yy, this.direction);
-//         lineTo(ctx, 0, 0, xx, yy, this.direction);
-//         moveTo(ctx, -10, 0, xx, yy, this.direction);
-//         lineTo(ctx, 10, 0, xx, yy, this.direction);
-//         moveTo(ctx, -6, 5, xx, yy, this.direction);
-//         lineTo(ctx, 6, 5, xx, yy, this.direction);
-//         moveTo(ctx, -2.5, 10, xx, yy, this.direction);
-//         lineTo(ctx, 2.5, 10, xx, yy, this.direction);
-//         ctx.stroke();
-//     }
-// }
-
-// Ground.prototype.tooltipText = "Ground: All bits are Low(0).";
-// Ground.prototype.propagationDelay = 0;
-
-// class Power extends CircuitElement {
-//     constructor(x, y, scope = globalScope, bitWidth = 1) {
-
-//         super(x, y, scope, "RIGHT", bitWidth);
-//         this.directionFixed = true;
-//         this.rectangleObject = false;
-//         this.setDimensions(10, 10);
-//         this.output1 = new Node(0, 10, 1, this);
-//     }
-
-//     resolve() {
-//         this.output1.value = ~0 >>> (32 - this.bitWidth);
-//         simulationArea.simulationQueue.add(this.output1);
-//     }
-
-//     customSave() {
-//         var data = {
-
-//             nodes: {
-//                 output1: findNode(this.output1)
-//             },
-//             constructorParamaters: [this.bitWidth],
-//         }
-//         return data;
-//     }
-
-//     customDraw() {
-
-//         ctx = simulationArea.context;
-
-//         var xx = this.x;
-//         var yy = this.y;
-
-//         ctx.beginPath();
-//         ctx.strokeStyle = ("rgba(0,0,0,1)");
-//         ctx.lineWidth = correctWidth(3);
-//         ctx.fillStyle = "green";
-//         moveTo(ctx, 0, -10, xx, yy, this.direction);
-//         lineTo(ctx, -10, 0, xx, yy, this.direction);
-//         lineTo(ctx, 10, 0, xx, yy, this.direction);
-//         lineTo(ctx, 0, -10, xx, yy, this.direction);
-//         ctx.closePath();
-//         ctx.stroke();
-//         if ((this.hover && !simulationArea.shiftDown) || simulationArea.lastSelected == this || simulationArea.multipleObjectSelections.contains(this)) ctx.fillStyle = "rgba(255, 255, 32,0.8)";
-//         ctx.fill();
-//         moveTo(ctx, 0, 0, xx, yy, this.direction);
-//         lineTo(ctx, 0, 10, xx, yy, this.direction);
-//         ctx.stroke();
-
-//     }
-// }
-
-// Power.prototype.tooltipText = "Power: All bits are High(1).";
-// Power.prototype.propagationDelay = 0;
-
-// function get_next_position(x = 0, scope = globalScope) {
-//     var possible_y = 20;
-
-//     var done = {}
-//     for (var i = 0; i < scope.Input.length; i++)
-//         if (scope.Input[i].layoutProperties.x == x)
-//             done[scope.Input[i].layoutProperties.y] = 1
-//     for (var i = 0; i < scope.Output.length; i++)
-//         if (scope.Output[i].layoutProperties.x == x)
-//             done[scope.Output[i].layoutProperties.y] = 1
-
-//     // console.log(done)
-//     // return possible_y;
-
-//     while (done[possible_y] || done[possible_y + 10] || done[possible_y - 10])
-//         possible_y += 10;
-
-
-//     var height = possible_y + 20;
-//     if (height > scope.layout.height) {
-//         var old_height = scope.layout.height
-//         scope.layout.height = height;
-//         for (var i = 0; i < scope.Input.length; i++) {
-//             if (scope.Input[i].layoutProperties.y == old_height)
-//                 scope.Input[i].layoutProperties.y = scope.layout.height;
-//         }
-//         for (var i = 0; i < scope.Output.length; i++) {
-//             if (scope.Output[i].layoutProperties.y == old_height)
-//                 scope.Output[i].layoutProperties.y = scope.layout.height;
-//         }
-//     }
-//     return possible_y;
-// }
-
-// class Input extends CircuitElement {
-//     constructor(x, y, scope = globalScope, dir = "RIGHT", bitWidth = 1, layoutProperties) {
-
-//         if (layoutProperties)
-//             this.layoutProperties = layoutProperties;
-//         else {
-//             this.layoutProperties = {
-//                 x: 0,
-//                 y: get_next_position(0, scope),
-//                 id: generateId(),
-//             }
-//         }
-
-//         // Call base class constructor
-//         super(x, y, scope, dir, bitWidth);
-//         this.state = 0;
-//         this.orientationFixed = false;
-//         this.state = bin2dec(this.state); // in integer format
-//         this.output1 = new Node(this.bitWidth * 10, 0, 1, this);
-//         this.wasClicked = false;
-//         this.directionFixed = true;
-//         this.setWidth(this.bitWidth * 10);
-//         this.rectangleObject = true; // Trying to make use of base class draw
-
-
-
-//     }
-
-//     customSave() {
-//         var data = {
-//             nodes: {
-//                 output1: findNode(this.output1)
-//             },
-//             values: {
-//                 state: this.state
-//             },
-//             constructorParamaters: [this.direction, this.bitWidth, this.layoutProperties]
-//         }
-//         return data;
-//     }
-
-//     resolve() {
-//         this.output1.value = this.state;
-//         simulationArea.simulationQueue.add(this.output1);
-//     }
-
-//     // Check if override is necessary!!
-//     newBitWidth(bitWidth) {
-//         if (bitWidth < 1) return;
-//         var diffBitWidth = bitWidth - this.bitWidth;
-//         this.bitWidth = bitWidth; //||parseInt(prompt("Enter bitWidth"),10);
-//         this.setWidth(this.bitWidth * 10);
-//         this.state = 0;
-//         this.output1.bitWidth = bitWidth;
-//         if (this.direction == "RIGHT") {
-//             this.x -= 10 * diffBitWidth;
-//             this.output1.x = 10 * this.bitWidth;
-//             this.output1.leftx = 10 * this.bitWidth;
-//         } else if (this.direction == "LEFT") {
-//             this.x += 10 * diffBitWidth;
-//             this.output1.x = -10 * this.bitWidth;
-//             this.output1.leftx = 10 * this.bitWidth;
-//         }
-//     }
-
-//     click() { // toggle
-//         var pos = this.findPos();
-//         if (pos == 0) pos = 1; // minor correction
-//         if (pos < 1 || pos > this.bitWidth) return;
-//         this.state = ((this.state >>> 0) ^ (1 << (this.bitWidth - pos))) >>> 0;
-//     }
-
-//     customDraw() {
-
-//         ctx = simulationArea.context;
-//         ctx.beginPath();
-//         ctx.strokeStyle = ("rgba(0,0,0,1)");
-//         ctx.lineWidth = correctWidth(3);
-//         var xx = this.x;
-//         var yy = this.y;
-
-//         ctx.beginPath();
-//         ctx.fillStyle = "green";
-//         ctx.textAlign = "center";
-//         var bin = dec2bin(this.state, this.bitWidth);
-//         for (var k = 0; k < this.bitWidth; k++)
-//             fillText(ctx, bin[k], xx - 10 * this.bitWidth + 10 + (k) * 20, yy + 5);
-//         ctx.fill();
-
-
-//     }
-
-//     newDirection(dir) {
-//         if (dir == this.direction) return;
-//         this.direction = dir;
-//         this.output1.refresh();
-//         if (dir == "RIGHT" || dir == "LEFT") {
-//             this.output1.leftx = 10 * this.bitWidth;
-//             this.output1.lefty = 0;
-//         } else {
-//             this.output1.leftx = 10; //10*this.bitWidth;
-//             this.output1.lefty = 0;
-//         }
-
-//         this.output1.refresh();
-//         this.labelDirection = oppositeDirection[this.direction];
-//     }
-
-//     findPos() {
-//         return Math.round((simulationArea.mouseX - this.x + 10 * this.bitWidth) / 20.0);
-//     }
-// }
-
-// Input.prototype.tooltipText = "Input ToolTip: Toggle the individual bits by clicking on them."
-// Input.prototype.propagationDelay = 0;
-
-// class Output extends CircuitElement {
-//     constructor(x, y, scope = globalScope, dir = "LEFT", bitWidth = 1, layoutProperties) {
-//         // Calling base class constructor
-
-//         if (layoutProperties)
-//             this.layoutProperties = layoutProperties
-//         else {
-//             this.layoutProperties = {
-//                 x: scope.layout.width,
-//                 y: get_next_position(scope.layout.width, scope),
-//                 id: generateId(),
-//             }
-//         }
-
-
-//         super(x, y, scope, dir, bitWidth);
-//         this.rectangleObject = false;
-//         this.directionFixed = true;
-//         this.orientationFixed = false;
-//         this.setDimensions(this.bitWidth * 10, 10);
-//         this.inp1 = new Node(this.bitWidth * 10, 0, 0, this);
-
-
-//     }
-
-//     generateVerilog() {
-//         return "assign " + this.label + " = " + this.inp1.verilogLabel + ";"
-//     }
-
-//     customSave() {
-//         var data = {
-//             nodes: {
-//                 inp1: findNode(this.inp1)
-//             },
-//             constructorParamaters: [this.direction, this.bitWidth, this.layoutProperties],
-//         }
-//         return data;
-//     }
-
-//     newBitWidth(bitWidth) {
-//         if (bitWidth < 1) return;
-//         var diffBitWidth = bitWidth - this.bitWidth;
-//         this.state = undefined;
-//         this.inp1.bitWidth = bitWidth;
-//         this.bitWidth = bitWidth;
-//         this.setWidth(10 * this.bitWidth);
-
-//         if (this.direction == "RIGHT") {
-//             this.x -= 10 * diffBitWidth;
-//             this.inp1.x = 10 * this.bitWidth;
-//             this.inp1.leftx = 10 * this.bitWidth;
-//         } else if (this.direction == "LEFT") {
-//             this.x += 10 * diffBitWidth;
-//             this.inp1.x = -10 * this.bitWidth;
-//             this.inp1.leftx = 10 * this.bitWidth;
-//         }
-//     }
-
-//     customDraw() {
-//         this.state = this.inp1.value;
-//         ctx = simulationArea.context;
-//         ctx.beginPath();
-//         ctx.strokeStyle = ["blue", "red"][+(this.inp1.value == undefined)];
-//         ctx.fillStyle = "white";
-//         ctx.lineWidth = correctWidth(3);
-//         var xx = this.x;
-//         var yy = this.y;
-
-//         rect2(ctx, -10 * this.bitWidth, -10, 20 * this.bitWidth, 20, xx, yy, "RIGHT");
-//         if ((this.hover && !simulationArea.shiftDown) || simulationArea.lastSelected == this || simulationArea.multipleObjectSelections.contains(this))
-//             ctx.fillStyle = "rgba(255, 255, 32,0.8)";
-
-//         ctx.fill();
-//         ctx.stroke();
-
-//         ctx.beginPath();
-//         ctx.font = "20px Georgia";
-//         ctx.fillStyle = "green";
-//         ctx.textAlign = "center";
-//         if (this.state === undefined)
-//             var bin = 'x'.repeat(this.bitWidth);
-//         else
-//             var bin = dec2bin(this.state, this.bitWidth);
-
-//         for (var k = 0; k < this.bitWidth; k++)
-//             fillText(ctx, bin[k], xx - 10 * this.bitWidth + 10 + (k) * 20, yy + 5);
-//         ctx.fill();
-
-//     }
-
-//     newDirection(dir) {
-//         if (dir == this.direction) return;
-//         this.direction = dir;
-//         this.inp1.refresh();
-//         if (dir == "RIGHT" || dir == "LEFT") {
-//             this.inp1.leftx = 10 * this.bitWidth;
-//             this.inp1.lefty = 0;
-//         } else {
-//             this.inp1.leftx = 10; //10*this.bitWidth;
-//             this.inp1.lefty = 0;
-//         }
-
-//         this.inp1.refresh();
-//         this.labelDirection = oppositeDirection[this.direction];
-//     }
-// }
-
-// Output.prototype.tooltipText = "Output ToolTip: Simple output element showing output in binary."
-// Output.prototype.propagationDelay = 0;
-
-// class BitSelector extends CircuitElement {
-//     constructor(
-//         x,
-//         y,
-//         scope = globalScope,
-//         dir = "RIGHT",
-//         bitWidth = 2,
-//         selectorBitWidth = 1
-//     ) {
-
-//         super(x, y, scope, dir, bitWidth);
-//         this.setDimensions(20, 20);
-//         this.selectorBitWidth = selectorBitWidth || parseInt(prompt("Enter Selector bitWidth"), 10);
-//         this.rectangleObject = false;
-//         this.inp1 = new Node(-20, 0, 0, this, this.bitWidth, "Input");
-//         this.output1 = new Node(20, 0, 1, this, 1, "Output");
-//         this.bitSelectorInp = new Node(0, 20, 0, this, this.selectorBitWidth, "Bit Selector");
-
-//     }
-
-//     changeSelectorBitWidth(size) {
-//         if (size == undefined || size < 1 || size > 32) return;
-//         this.selectorBitWidth = size;
-//         this.bitSelectorInp.bitWidth = size;
-//     }
-
-//     customSave() {
-//         var data = {
-
-//             nodes: {
-//                 inp1: findNode(this.inp1),
-//                 output1: findNode(this.output1),
-//                 bitSelectorInp: findNode(this.bitSelectorInp)
-//             },
-//             constructorParamaters: [this.direction, this.bitWidth, this.selectorBitWidth],
-//         }
-//         return data;
-//     }
-
-//     newBitWidth(bitWidth) {
-//         this.inp1.bitWidth = bitWidth;
-//         this.bitWidth = bitWidth;
-//     }
-
-//     resolve() {
-//         this.output1.value = extractBits(this.inp1.value, this.bitSelectorInp.value + 1, this.bitSelectorInp.value + 1); //(this.inp1.value^(1<<this.bitSelectorInp.value))==(1<<this.bitSelectorInp.value);
-//         simulationArea.simulationQueue.add(this.output1);
-//     }
-
-//     customDraw() {
-
-//         ctx = simulationArea.context;
-//         ctx.beginPath();
-//         ctx.strokeStyle = ["blue", "red"][(this.state === undefined) + 0];
-//         ctx.fillStyle = "white";
-//         ctx.lineWidth = correctWidth(3);
-//         var xx = this.x;
-//         var yy = this.y;
-//         rect(ctx, xx - 20, yy - 20, 40, 40);
-//         if ((this.hover && !simulationArea.shiftDown) || simulationArea.lastSelected == this || simulationArea.multipleObjectSelections.contains(this)) ctx.fillStyle = "rgba(255, 255, 32,0.8)";
-//         ctx.fill();
-//         ctx.stroke();
-
-//         ctx.beginPath();
-//         ctx.font = "20px Georgia";
-//         ctx.fillStyle = "green";
-//         ctx.textAlign = "center";
-//         if (this.bitSelectorInp.value === undefined)
-//             var bit = 'x';
-//         else
-//             var bit = this.bitSelectorInp.value;
-
-//         fillText(ctx, bit, xx, yy + 5);
-//         ctx.fill();
-//     }
-// }
-
-// BitSelector.prototype.tooltipText = "BitSelector ToolTip : Divides input bits into several equal-sized groups.";
-// BitSelector.prototype.mutableProperties = {
-//     "selectorBitWidth": {
-//         name: "Selector Bit Width: ",
-//         type: "number",
-//         max: "32",
-//         min: "1",
-//         func: "changeSelectorBitWidth",
-//     }
-// }
-
-// class ConstantVal extends CircuitElement {
-//     constructor(x, y, scope = globalScope, dir = "RIGHT", bitWidth = 1, state = "0") {
-//         this.state = state || prompt("Enter value");
-//         super(x, y, scope, dir, this.state.length);
-//         this.setDimensions(10 * this.state.length, 10);
-//         this.bitWidth = bitWidth || this.state.length;
-//         this.directionFixed = true;
-//         this.orientationFixed = false;
-//         this.rectangleObject = false;
-
-//         this.output1 = new Node(this.bitWidth * 10, 0, 1, this);
-//         this.wasClicked = false;
-//         this.label = "";
-
-//     }
-
-//     generateVerilog() {
-//         return "localparam [" + (this.bitWidth - 1) + ":0] " + this.verilogLabel + "=" + this.bitWidth + "b'" + this.state + ";";
-//     }
-
-//     customSave() {
-//         var data = {
-//             nodes: {
-//                 output1: findNode(this.output1)
-//             },
-//             constructorParamaters: [this.direction, this.bitWidth, this.state],
-//         }
-//         return data;
-//     }
-
-//     resolve() {
-//         this.output1.value = bin2dec(this.state);
-//         simulationArea.simulationQueue.add(this.output1);
-//     }
-
-//     dblclick() {
-//         this.state = prompt("Re enter the value") || "0";
-//         console.log(this.state);
-//         this.newBitWidth(this.state.toString().length);
-//         //console.log(this.state, this.bitWidth);
-//     }
-
-//     newBitWidth(bitWidth) {
-//         if (bitWidth > this.state.length) this.state = '0'.repeat(bitWidth - this.state.length) + this.state;
-//         else if (bitWidth < this.state.length) this.state = this.state.slice(this.bitWidth - bitWidth);
-//         this.bitWidth = bitWidth; //||parseInt(prompt("Enter bitWidth"),10);
-//         this.output1.bitWidth = bitWidth;
-//         this.setDimensions(10 * this.bitWidth, 10);
-//         if (this.direction == "RIGHT") {
-//             this.output1.x = 10 * this.bitWidth;
-//             this.output1.leftx = 10 * this.bitWidth;
-//         } else if (this.direction == "LEFT") {
-//             this.output1.x = -10 * this.bitWidth;
-//             this.output1.leftx = 10 * this.bitWidth;
-//         }
-//     }
-
-//     customDraw() {
-
-//         ctx = simulationArea.context;
-//         ctx.beginPath();
-//         ctx.strokeStyle = ("rgba(0,0,0,1)");
-//         ctx.fillStyle = "white";
-//         ctx.lineWidth = correctWidth(1);
-//         var xx = this.x;
-//         var yy = this.y;
-
-//         rect2(ctx, -10 * this.bitWidth, -10, 20 * this.bitWidth, 20, xx, yy, "RIGHT");
-//         if ((this.hover && !simulationArea.shiftDown) || simulationArea.lastSelected == this || simulationArea.multipleObjectSelections.contains(this)) ctx.fillStyle = "rgba(255, 255, 32,0.8)";
-//         ctx.fill();
-//         ctx.stroke();
-
-//         ctx.beginPath();
-//         ctx.fillStyle = "green";
-//         ctx.textAlign = "center";
-//         var bin = this.state; //dec2bin(this.state,this.bitWidth);
-//         for (var k = 0; k < this.bitWidth; k++)
-//             fillText(ctx, bin[k], xx - 10 * this.bitWidth + 10 + (k) * 20, yy + 5);
-//         ctx.fill();
-
-//     }
-
-//     newDirection(dir) {
-//         if (dir == this.direction) return;
-//         this.direction = dir;
-//         this.output1.refresh();
-//         if (dir == "RIGHT" || dir == "LEFT") {
-//             this.output1.leftx = 10 * this.bitWidth;
-//             this.output1.lefty = 0;
-//         } else {
-//             this.output1.leftx = 10; //10*this.bitWidth;
-//             this.output1.lefty = 0;
-//         }
-
-//         this.output1.refresh();
-//         this.labelDirection = oppositeDirection[this.direction];
-//     }
-// }
-
-// ConstantVal.prototype.tooltipText = "Constant ToolTip: Bits are fixed. Double click element to change the bits."
-// ConstantVal.prototype.propagationDelay = 0;
-
-// class NorGate extends CircuitElement {
-//     constructor(x, y, scope = globalScope, dir = "RIGHT", inputs = 2, bitWidth = 1) {
-
-//         super(x, y, scope, dir, bitWidth);
-//         this.rectangleObject = false;
-//         this.setDimensions(15, 20);
-
-//         this.inp = [];
-//         this.inputSize = inputs;
-
-//         if (inputs % 2 == 1) {
-//             for (var i = 0; i < inputs / 2 - 1; i++) {
-//                 var a = new Node(-10, -10 * (i + 1), 0, this);
-//                 this.inp.push(a);
-//             }
-//             var a = new Node(-10, 0, 0, this);
-//             this.inp.push(a);
-//             for (var i = inputs / 2 + 1; i < inputs; i++) {
-//                 var a = new Node(-10, 10 * (i + 1 - inputs / 2 - 1), 0, this);
-//                 this.inp.push(a);
-//             }
-//         } else {
-//             for (var i = 0; i < inputs / 2; i++) {
-//                 var a = new Node(-10, -10 * (i + 1), 0, this);
-//                 this.inp.push(a);
-//             }
-//             for (var i = inputs / 2; i < inputs; i++) {
-//                 var a = new Node(-10, 10 * (i + 1 - inputs / 2), 0, this);
-//                 this.inp.push(a);
-//             }
-//         }
-//         this.output1 = new Node(30, 0, 1, this);
-
-
-//     }
-
-//     customSave() {
-//         var data = {
-//             constructorParamaters: [this.direction, this.inputSize, this.bitWidth],
-//             nodes: {
-//                 inp: this.inp.map(findNode),
-//                 output1: findNode(this.output1)
-//             },
-//         }
-//         return data;
-//     }
-
-//     resolve() {
-//         var result = this.inp[0].value || 0;
-//         for (var i = 1; i < this.inputSize; i++)
-//             result = result | (this.inp[i].value || 0);
-//         result = ((~result >>> 0) << (32 - this.bitWidth)) >>> (32 - this.bitWidth);
-//         this.output1.value = result
-//         simulationArea.simulationQueue.add(this.output1);
-//     }
-
-//     customDraw() {
-
-//         ctx = simulationArea.context;
-//         ctx.strokeStyle = ("rgba(0,0,0,1)");
-//         ctx.lineWidth = correctWidth(3);
-
-//         var xx = this.x;
-//         var yy = this.y;
-//         ctx.beginPath();
-//         ctx.fillStyle = "white";
-
-//         moveTo(ctx, -10, -20, xx, yy, this.direction, true);
-//         bezierCurveTo(0, -20, +15, -10, 20, 0, xx, yy, this.direction);
-//         bezierCurveTo(0 + 15, 0 + 10, 0, 0 + 20, -10, +20, xx, yy, this.direction);
-//         bezierCurveTo(0, 0, 0, 0, -10, -20, xx, yy, this.direction);
-//         ctx.closePath();
-//         if ((this.hover && !simulationArea.shiftDown) || simulationArea.lastSelected == this || simulationArea.multipleObjectSelections.contains(this)) ctx.fillStyle = "rgba(255, 255, 32,0.5)";
-//         ctx.fill();
-//         ctx.stroke();
-//         ctx.beginPath();
-//         drawCircle2(ctx, 25, 0, 5, xx, yy, this.direction);
-//         ctx.stroke();
-//         //for debugging
-//     }
-// }
-
-// NorGate.prototype.tooltipText = "Nor Gate ToolTip : Combination of OR gate and NOT gate.";
-// NorGate.prototype.alwaysResolve = true;
-// NorGate.prototype.changeInputSize = changeInputSize;
-// NorGate.prototype.verilogType = "nor";
-
-// class DigitalLed extends CircuitElement {
-//     constructor(x, y, scope = globalScope, color = "Red") {
-//         // Calling base class constructor
-
-//         super(x, y, scope, "UP", 1);
-//         this.rectangleObject = false;
-//         this.setDimensions(10, 20);
-//         this.inp1 = new Node(-40, 0, 0, this, 1);
-//         this.directionFixed = true;
-//         this.fixedBitWidth = true;
-//         this.color = color;
-//         var temp = colorToRGBA(this.color)
-//         this.actualColor = "rgba(" + temp[0] + "," + temp[1] + "," + temp[2] + "," + 0.8 + ")";
-
-
-//     }
-
-//     customSave() {
-//         var data = {
-//             constructorParamaters: [this.color],
-//             nodes: {
-//                 inp1: findNode(this.inp1)
-//             },
-//         }
-//         return data;
-//     }
-
-//     changeColor(value) {
-//         if (validColor(value)) {
-//             this.color = value;
-//             var temp = colorToRGBA(this.color)
-//             this.actualColor = "rgba(" + temp[0] + "," + temp[1] + "," + temp[2] + "," + 0.8 + ")";
-//         }
-
-//     }
-
-//     customDraw() {
-
-//         ctx = simulationArea.context;
-
-//         var xx = this.x;
-//         var yy = this.y;
-
-//         ctx.strokeStyle = "#e3e4e5";
-//         ctx.lineWidth = correctWidth(3);
-//         ctx.beginPath();
-//         moveTo(ctx, -20, 0, xx, yy, this.direction);
-//         lineTo(ctx, -40, 0, xx, yy, this.direction);
-//         ctx.stroke();
-
-//         ctx.strokeStyle = "#d3d4d5";
-//         ctx.fillStyle = ["rgba(227,228,229,0.8)", this.actualColor][this.inp1.value || 0];
-//         ctx.lineWidth = correctWidth(1);
-
-//         ctx.beginPath();
-
-//         moveTo(ctx, -15, -9, xx, yy, this.direction);
-//         lineTo(ctx, 0, -9, xx, yy, this.direction);
-//         arc(ctx, 0, 0, 9, (-Math.PI / 2), (Math.PI / 2), xx, yy, this.direction);
-//         lineTo(ctx, -15, 9, xx, yy, this.direction);
-//         lineTo(ctx, -18, 12, xx, yy, this.direction);
-//         arc(ctx, 0, 0, Math.sqrt(468), ((Math.PI / 2) + Math.acos(12 / Math.sqrt(468))), ((-Math.PI / 2) - Math.asin(18 / Math.sqrt(468))), xx, yy, this.direction);
-//         lineTo(ctx, -15, -9, xx, yy, this.direction);
-//         ctx.stroke();
-//         if ((this.hover && !simulationArea.shiftDown) || simulationArea.lastSelected == this || simulationArea.multipleObjectSelections.contains(this)) ctx.fillStyle = "rgba(255, 255, 32,0.8)";
-//         ctx.fill();
-
-//     }
-// }
-
-// DigitalLed.prototype.tooltipText = "Digital Led ToolTip: Digital LED glows high when input is High(1)."
-// DigitalLed.prototype.mutableProperties = {
-//     "color": {
-//         name: "Color: ",
-//         type: "text",
-//         func: "changeColor",
-//     },
-// }
-
-// class VariableLed extends CircuitElement {
-//     constructor(x, y, scope = globalScope) {
-//         // Calling base class constructor
-
-//         super(x, y, scope, "UP", 8);
-//         this.rectangleObject = false;
-//         this.setDimensions(10, 20);
-//         this.inp1 = new Node(-40, 0, 0, this, 8);
-//         this.directionFixed = true;
-//         this.fixedBitWidth = true;
-
-
-//     }
-
-//     customSave() {
-//         var data = {
-//             nodes: {
-//                 inp1: findNode(this.inp1)
-//             },
-//         }
-//         return data;
-//     }
-
-//     customDraw() {
-
-//         ctx = simulationArea.context;
-
-//         var xx = this.x;
-//         var yy = this.y;
-
-//         ctx.strokeStyle = "#353535";
-//         ctx.lineWidth = correctWidth(3);
-//         ctx.beginPath();
-//         moveTo(ctx, -20, 0, xx, yy, this.direction);
-//         lineTo(ctx, -40, 0, xx, yy, this.direction);
-//         ctx.stroke();
-//         var c = this.inp1.value;
-//         var alpha = c / 255;
-//         ctx.strokeStyle = "#090a0a";
-//         ctx.fillStyle = ["rgba(255,29,43," + alpha + ")", "rgba(227, 228, 229, 0.8)"][(c === undefined || c == 0) + 0];
-//         ctx.lineWidth = correctWidth(1);
-
-//         ctx.beginPath();
-
-//         moveTo(ctx, -20, -9, xx, yy, this.direction);
-//         lineTo(ctx, 0, -9, xx, yy, this.direction);
-//         arc(ctx, 0, 0, 9, (-Math.PI / 2), (Math.PI / 2), xx, yy, this.direction);
-//         lineTo(ctx, -20, 9, xx, yy, this.direction);
-//         /*lineTo(ctx,-18,12,xx,yy,this.direction);
-//         arc(ctx,0,0,Math.sqrt(468),((Math.PI/2) + Math.acos(12/Math.sqrt(468))),((-Math.PI/2) - Math.asin(18/Math.sqrt(468))),xx,yy,this.direction);
-
-//         */
-//         lineTo(ctx, -20, -9, xx, yy, this.direction);
-//         ctx.stroke();
-//         if ((this.hover && !simulationArea.shiftDown) || simulationArea.lastSelected == this || simulationArea.multipleObjectSelections.contains(this)) ctx.fillStyle = "rgba(255, 255, 32,0.8)";
-//         ctx.fill();
-
-//     }
-// }
-
-// VariableLed.prototype.tooltipText = "Variable Led ToolTip: Variable LED inputs an 8 bit value and glows with a proportional intensity."
-
-// class Button extends CircuitElement {
-//     constructor(x, y, scope = globalScope, dir = "RIGHT") {
-//         super(x, y, scope, dir, 1);
-//         this.state = 0;
-//         this.output1 = new Node(30, 0, 1, this);
-//         this.wasClicked = false;
-//         this.rectangleObject = false;
-//         this.setDimensions(10, 10);
-
-
-//     }
-
-//     customSave() {
-//         var data = {
-//             nodes: {
-//                 output1: findNode(this.output1)
-//             },
-//             values: {
-//                 state: this.state
-//             },
-//             constructorParamaters: [this.direction, this.bitWidth]
-//         }
-//         return data;
-//     }
-
-//     resolve() {
-//         if (this.wasClicked) {
-//             this.state = 1;
-//             this.output1.value = this.state;
-//         } else {
-//             this.state = 0;
-//             this.output1.value = this.state;
-//         }
-//         simulationArea.simulationQueue.add(this.output1);
-//     }
-
-//     customDraw() {
-//         ctx = simulationArea.context;
-//         var xx = this.x;
-//         var yy = this.y;
-//         ctx.fillStyle = "#ddd";
-
-//         ctx.strokeStyle = "#353535";
-//         ctx.lineWidth = correctWidth(5);
-
-//         ctx.beginPath();
-
-//         moveTo(ctx, 10, 0, xx, yy, this.direction);
-//         lineTo(ctx, 30, 0, xx, yy, this.direction);
-//         ctx.stroke();
-
-//         ctx.beginPath();
-
-//         drawCircle2(ctx, 0, 0, 12, xx, yy, this.direction);
-//         ctx.stroke();
-
-//         if ((this.hover && !simulationArea.shiftDown) || simulationArea.lastSelected == this || simulationArea.multipleObjectSelections.contains(this))
-//             ctx.fillStyle = "rgba(232, 13, 13,0.6)"
-
-//         if (this.wasClicked)
-//             ctx.fillStyle = "rgba(232, 13, 13,0.8)";
-//         ctx.fill();
-//     }
-// }
-
-// Button.prototype.tooltipText = "Button ToolTip: High(1) when pressed and Low(0) when released."
-// Button.prototype.propagationDelay = 0;
-
-// class RGBLed extends CircuitElement {
-//     constructor(x, y, scope = globalScope) {
-//         // Calling base class constructor
-
-//         super(x, y, scope, "UP", 8);
-//         this.rectangleObject = false;
-//         this.inp = [];
-//         this.setDimensions(10, 10);
-//         this.inp1 = new Node(-40, -10, 0, this, 8);
-//         this.inp2 = new Node(-40, 0, 0, this, 8);
-//         this.inp3 = new Node(-40, 10, 0, this, 8);
-//         this.inp.push(this.inp1);
-//         this.inp.push(this.inp2);
-//         this.inp.push(this.inp3);
-//         this.directionFixed = true;
-//         this.fixedBitWidth = true;
-
-
-//     }
-
-//     customSave() {
-//         var data = {
-//             nodes: {
-//                 inp1: findNode(this.inp1),
-//                 inp2: findNode(this.inp2),
-//                 inp3: findNode(this.inp3),
-//             },
-//         }
-//         return data;
-//     }
-
-//     customDraw() {
-
-//         ctx = simulationArea.context;
-
-//         var xx = this.x;
-//         var yy = this.y;
-
-//         ctx.strokeStyle = "green";
-//         ctx.lineWidth = correctWidth(3);
-//         ctx.beginPath();
-//         moveTo(ctx, -20, 0, xx, yy, this.direction);
-//         lineTo(ctx, -40, 0, xx, yy, this.direction);
-//         ctx.stroke();
-
-//         ctx.strokeStyle = "red";
-//         ctx.lineWidth = correctWidth(3);
-//         ctx.beginPath();
-//         moveTo(ctx, -20, -10, xx, yy, this.direction);
-//         lineTo(ctx, -40, -10, xx, yy, this.direction);
-//         ctx.stroke();
-
-//         ctx.strokeStyle = "blue";
-//         ctx.lineWidth = correctWidth(3);
-//         ctx.beginPath();
-//         moveTo(ctx, -20, 10, xx, yy, this.direction);
-//         lineTo(ctx, -40, 10, xx, yy, this.direction);
-//         ctx.stroke();
-
-//         var a = this.inp1.value;
-//         var b = this.inp2.value;
-//         var c = this.inp3.value;
-//         ctx.strokeStyle = "#d3d4d5";
-//         ctx.fillStyle = ["rgba(" + a + ", " + b + ", " + c + ", 0.8)", "rgba(227, 228, 229, 0.8)"][((a === undefined || b === undefined || c === undefined)) + 0]
-//         //ctx.fillStyle = ["rgba(200, 200, 200, 0.3)","rgba(227, 228, 229, 0.8)"][((a === undefined || b === undefined || c === undefined) || (a == 0 && b == 0 && c == 0)) + 0];
-//         ctx.lineWidth = correctWidth(1);
-
-//         ctx.beginPath();
-
-//         moveTo(ctx, -18, -11, xx, yy, this.direction);
-//         lineTo(ctx, 0, -11, xx, yy, this.direction);
-//         arc(ctx, 0, 0, 11, (-Math.PI / 2), (Math.PI / 2), xx, yy, this.direction);
-//         lineTo(ctx, -18, 11, xx, yy, this.direction);
-//         lineTo(ctx, -21, 15, xx, yy, this.direction);
-//         arc(ctx, 0, 0, Math.sqrt(666), ((Math.PI / 2) + Math.acos(15 / Math.sqrt(666))), ((-Math.PI / 2) - Math.asin(21 / Math.sqrt(666))), xx, yy, this.direction);
-//         lineTo(ctx, -18, -11, xx, yy, this.direction);
-//         ctx.stroke();
-//         if ((this.hover && !simulationArea.shiftDown) || simulationArea.lastSelected == this || simulationArea.multipleObjectSelections.contains(this)) ctx.fillStyle = "rgba(255, 255, 32,0.8)";
-//         ctx.fill();
-//     }
-// }
-
-// RGBLed.prototype.tooltipText = "RGB Led ToolTip: RGB Led inputs 8 bit values for the colors RED, GREEN and BLUE."
-
-// class SquareRGBLed extends CircuitElement {
-//     constructor(x, y, scope = globalScope, dir = "UP", pinLength = 1) {
-//         super(x, y, scope, dir, 8);
-//         this.rectangleObject = false;
-//         this.setDimensions(15, 15);
-//         this.pinLength = pinLength === undefined ? 1 : pinLength;
-//         var nodeX = -10 - 10 * pinLength;
-//         this.inp1 = new Node(nodeX, -10, 0, this, 8, "R");
-//         this.inp2 = new Node(nodeX, 0, 0, this, 8, "G");
-//         this.inp3 = new Node(nodeX, 10, 0, this, 8, "B");
-//         this.inp = [this.inp1, this.inp2, this.inp3];
-//         this.labelDirection = "UP";
-//         this.fixedBitWidth = true;
-
-//         this.changePinLength = function (pinLength) {
-//             if (pinLength == undefined) return;
-//             pinLength = parseInt(pinLength, 10);
-//             if (pinLength < 0 || pinLength > 1000) return;
-
-//             // Calculate the new position of the LED, so the nodes will stay in the same place.
-//             var diff = 10 * (pinLength - this.pinLength);
-//             var diffX = this.direction == "LEFT" ? -diff : this.direction == "RIGHT" ? diff : 0;
-//             var diffY = this.direction == "UP" ? -diff : this.direction == "DOWN" ? diff : 0;
-
-//             // Build a new LED with the new values; preserve label properties too.
-//             var obj = new window[this.objectType](this.x + diffX, this.y + diffY, this.scope, this.direction, pinLength);
-//             obj.label = this.label;
-//             obj.labelDirection = this.labelDirection;
-
-//             this.cleanDelete();
-//             simulationArea.lastSelected = obj;
-//             return obj;
-//         }
-
-//         this.mutableProperties = {
-//             "pinLength": {
-//                 name: "Pin Length",
-//                 type: "number",
-//                 max: "1000",
-//                 min: "0",
-//                 func: "changePinLength",
-//             },
-//         }
-//     }
-
-//     customSave() {
-//         var data = {
-//             constructorParamaters: [this.direction, this.pinLength],
-//             nodes: {
-//                 inp1: findNode(this.inp1),
-//                 inp2: findNode(this.inp2),
-//                 inp3: findNode(this.inp3),
-//             },
-//         }
-//         return data;
-//     }
-
-//     customDraw() {
-//         var ctx = simulationArea.context;
-//         var xx = this.x;
-//         var yy = this.y;
-//         var r = this.inp1.value;
-//         var g = this.inp2.value;
-//         var b = this.inp3.value;
-
-//         var colors = ["rgb(174,20,20)", "rgb(40,174,40)", "rgb(0,100,255)"];
-//         for (var i = 0; i < 3; i++) {
-//             var x = -10 - 10 * this.pinLength;
-//             var y = i * 10 - 10;
-//             ctx.lineWidth = correctWidth(3);
-
-//             // A gray line, which makes it easy on the eyes when the pin length is large
-//             ctx.beginPath();
-//             ctx.lineCap = "butt";
-//             ctx.strokeStyle = "rgb(227, 228, 229)";
-//             moveTo(ctx, -15, y, xx, yy, this.direction);
-//             lineTo(ctx, x + 10, y, xx, yy, this.direction);
-//             ctx.stroke();
-
-//             // A colored line, so people know which pin does what.
-//             ctx.lineCap = "round";
-//             ctx.beginPath();
-//             ctx.strokeStyle = colors[i];
-//             moveTo(ctx, x + 10, y, xx, yy, this.direction);
-//             lineTo(ctx, x, y, xx, yy, this.direction);
-//             ctx.stroke();
-//         }
-
-//         ctx.strokeStyle = "#d3d4d5";
-//         ctx.fillStyle = (r === undefined && g === undefined && b === undefined) ? "rgb(227, 228, 229)" : "rgb(" + (r || 0) + ", " + (g || 0) + ", " + (b || 0) + ")";
-//         ctx.lineWidth = correctWidth(1);
-//         ctx.beginPath();
-//         rect2(ctx, -15, -15, 30, 30, xx, yy, this.direction);
-//         ctx.stroke();
-
-//         if ((this.hover && !simulationArea.shiftDown) ||
-//             simulationArea.lastSelected == this ||
-//             simulationArea.multipleObjectSelections.contains(this)) {
-//             ctx.fillStyle = "rgba(255, 255, 32)";
-//         }
-
-//         ctx.fill();
-//     }
-// }
-
-// SquareRGBLed.prototype.tooltipText = "Square RGB Led ToolTip: RGB Led inputs 8 bit values for the colors RED, GREEN and BLUE."
-
-// class Demultiplexer extends CircuitElement {
-//     constructor(
-//         x,
-//         y,
-//         scope = globalScope,
-//         dir = "LEFT",
-//         bitWidth = 1,
-//         controlSignalSize = 1
-//     ) {
-
-//         super(x, y, scope, dir, bitWidth);
-//         this.controlSignalSize = controlSignalSize || parseInt(prompt("Enter control signal bitWidth"), 10);
-//         this.outputsize = 1 << this.controlSignalSize;
-//         this.xOff = 0;
-//         this.yOff = 1;
-//         if (this.controlSignalSize == 1) {
-//             this.xOff = 10;
-//         }
-//         if (this.controlSignalSize <= 3) {
-//             this.yOff = 2;
-//         }
-
-//         this.changeControlSignalSize = function (size) {
-//             if (size == undefined || size < 1 || size > 32) return;
-//             if (this.controlSignalSize == size) return;
-//             var obj = new window[this.objectType](this.x, this.y, this.scope, this.direction, this.bitWidth, size);
-//             this.cleanDelete();
-//             simulationArea.lastSelected = obj;
-//             return obj;
-//         }
-//         this.mutableProperties = {
-//             "controlSignalSize": {
-//                 name: "Control Signal Size",
-//                 type: "number",
-//                 max: "32",
-//                 min: "1",
-//                 func: "changeControlSignalSize",
-//             },
-//         }
-//         this.newBitWidth = function (bitWidth) {
-//             this.bitWidth = bitWidth;
-//             for (var i = 0; i < this.outputsize; i++) {
-//                 this.output1[i].bitWidth = bitWidth
-//             }
-//             this.input.bitWidth = bitWidth;
-//         }
-
-//         this.setDimensions(20 - this.xOff, this.yOff * 5 * (this.outputsize));
-//         this.rectangleObject = false;
-//         this.input = new Node(20 - this.xOff, 0, 0, this);
-
-//         this.output1 = [];
-//         for (var i = 0; i < this.outputsize; i++) {
-//             var a = new Node(-20 + this.xOff, +this.yOff * 10 * (i - this.outputsize / 2) + 10, 1, this);
-//             this.output1.push(a);
-//         }
-
-//         this.controlSignalInput = new Node(0, this.yOff * 10 * (this.outputsize / 2 - 1) + this.xOff + 10, 0, this, this.controlSignalSize, "Control Signal");
-
-
-//     }
-
-//     customSave() {
-//         var data = {
-//             constructorParamaters: [this.direction, this.bitWidth, this.controlSignalSize],
-//             nodes: {
-//                 output1: this.output1.map(findNode),
-//                 input: findNode(this.input),
-//                 controlSignalInput: findNode(this.controlSignalInput)
-//             },
-//         }
-//         return data;
-//     }
-
-//     resolve() {
-
-//         for (var i = 0; i < this.output1.length; i++)
-//             this.output1[i].value = 0;
-
-//         this.output1[this.controlSignalInput.value].value = this.input.value;
-
-//         for (var i = 0; i < this.output1.length; i++)
-//             simulationArea.simulationQueue.add(this.output1[i]);
-
-//     }
-
-//     customDraw() {
-
-//         ctx = simulationArea.context;
-
-//         var xx = this.x;
-//         var yy = this.y;
-
-//         ctx.beginPath();
-//         moveTo(ctx, 0, this.yOff * 10 * (this.outputsize / 2 - 1) + 10 + 0.5 * this.xOff, xx, yy, this.direction);
-//         lineTo(ctx, 0, this.yOff * 5 * (this.outputsize - 1) + this.xOff, xx, yy, this.direction);
-//         ctx.stroke();
-
-//         ctx.beginPath();
-//         ctx.strokeStyle = ("rgba(0,0,0,1)");
-//         ctx.lineWidth = correctWidth(4);
-//         ctx.fillStyle = "white";
-//         moveTo(ctx, -20 + this.xOff, -this.yOff * 10 * (this.outputsize / 2), xx, yy, this.direction);
-//         lineTo(ctx, -20 + this.xOff, 20 + this.yOff * 10 * (this.outputsize / 2 - 1), xx, yy, this.direction);
-//         lineTo(ctx, 20 - this.xOff, +this.yOff * 10 * (this.outputsize / 2 - 1) + this.xOff, xx, yy, this.direction);
-//         lineTo(ctx, 20 - this.xOff, -this.yOff * 10 * (this.outputsize / 2) - this.xOff + 20, xx, yy, this.direction);
-
-//         ctx.closePath();
-//         if ((this.hover && !simulationArea.shiftDown) || simulationArea.lastSelected == this || simulationArea.multipleObjectSelections.contains(this))
-//             ctx.fillStyle = "rgba(255, 255, 32,0.8)";
-//         ctx.fill();
-//         ctx.stroke();
-
-
-
-//         ctx.beginPath();
-//         ctx.fillStyle = "black";
-//         ctx.textAlign = "center";
-//         //[xFill,yFill] = rotate(xx + this.output1[i].x - 7, yy + this.output1[i].y + 2);
-//         ////console.log([xFill,yFill])
-//         for (var i = 0; i < this.outputsize; i++) {
-//             if (this.direction == "LEFT") fillText(ctx, String(i), xx + this.output1[i].x - 7, yy + this.output1[i].y + 2, 10);
-//             else if (this.direction == "RIGHT") fillText(ctx, String(i), xx + this.output1[i].x + 7, yy + this.output1[i].y + 2, 10);
-//             else if (this.direction == "UP") fillText(ctx, String(i), xx + this.output1[i].x, yy + this.output1[i].y - 5, 10);
-//             else fillText(ctx, String(i), xx + this.output1[i].x, yy + this.output1[i].y + 10, 10);
-//         }
-//         ctx.fill();
-//     }
-// }
-
-// Demultiplexer.prototype.tooltipText = "DeMultiplexer ToolTip : Multiple outputs and a single line input.";
-
-// class Decoder extends CircuitElement {
-//     constructor(x, y, scope = globalScope, dir = "LEFT", bitWidth = 1) {
-
-//         super(x, y, scope, dir, bitWidth);
-//         // this.controlSignalSize = controlSignalSize || parseInt(prompt("Enter control signal bitWidth"), 10);
-//         this.outputsize = 1 << this.bitWidth;
-//         this.xOff = 0;
-//         this.yOff = 1;
-//         if (this.bitWidth == 1) {
-//             this.xOff = 10;
-//         }
-//         if (this.bitWidth <= 3) {
-//             this.yOff = 2;
-//         }
-
-//         // this.changeControlSignalSize = function(size) {
-//         //     if (size == undefined || size < 1 || size > 32) return;
-//         //     if (this.controlSignalSize == size) return;
-//         //     var obj = new window[this.objectType](this.x, this.y, this.scope, this.direction, this.bitWidth, size);
-//         //     this.cleanDelete();
-//         //     simulationArea.lastSelected = obj;
-//         //     return obj;
-//         // }
-//         // this.mutableProperties = {
-//         //     "controlSignalSize": {
-//         //         name: "Control Signal Size",
-//         //         type: "number",
-//         //         max: "32",
-//         //         min: "1",
-//         //         func: "changeControlSignalSize",
-//         //     },
-//         // }
-//         this.newBitWidth = function (bitWidth) {
-//             // this.bitWidth = bitWidth;
-//             // for (var i = 0; i < this.inputSize; i++) {
-//             //     this.outputs1[i].bitWidth = bitWidth
-//             // }
-//             // this.input.bitWidth = bitWidth;
-//             if (bitWidth == undefined || bitWidth < 1 || bitWidth > 32) return;
-//             if (this.bitWidth == bitWidth) return;
-//             var obj = new window[this.objectType](this.x, this.y, this.scope, this.direction, bitWidth);
-//             this.cleanDelete();
-//             simulationArea.lastSelected = obj;
-//             return obj;
-//         }
-
-//         this.setDimensions(20 - this.xOff, this.yOff * 5 * (this.outputsize));
-//         this.rectangleObject = false;
-//         this.input = new Node(20 - this.xOff, 0, 0, this);
-
-//         this.output1 = [];
-//         for (var i = 0; i < this.outputsize; i++) {
-//             var a = new Node(-20 + this.xOff, +this.yOff * 10 * (i - this.outputsize / 2) + 10, 1, this, 1);
-//             this.output1.push(a);
-//         }
-
-//         // this.controlSignalInput = new Node(0,this.yOff * 10 * (this.outputsize / 2 - 1) +this.xOff + 10, 0, this, this.controlSignalSize,"Control Signal");
-
-
-//     }
-
-//     customSave() {
-//         var data = {
-//             constructorParamaters: [this.direction, this.bitWidth],
-//             nodes: {
-//                 output1: this.output1.map(findNode),
-//                 input: findNode(this.input),
-//             },
-//         }
-//         return data;
-//     }
-
-//     resolve() {
-
-//         for (var i = 0; i < this.output1.length; i++)
-//             this.output1[i].value = 0;
-//         this.output1[this.input.value].value = 1;
-//         for (var i = 0; i < this.output1.length; i++)
-//             simulationArea.simulationQueue.add(this.output1[i]);
-
-//     }
-
-//     customDraw() {
-
-//         ctx = simulationArea.context;
-
-//         var xx = this.x;
-//         var yy = this.y;
-
-//         // ctx.beginPath();
-//         // moveTo(ctx, 0,this.yOff * 10 * (this.outputsize / 2 - 1) + 10 + 0.5 *this.xOff, xx, yy, this.direction);
-//         // lineTo(ctx, 0,this.yOff * 5 * (this.outputsize - 1) +this.xOff, xx, yy, this.direction);
-//         // ctx.stroke();
-
-//         ctx.beginPath();
-//         ctx.strokeStyle = ("rgba(0,0,0,1)");
-//         ctx.lineWidth = correctWidth(4);
-//         ctx.fillStyle = "white";
-//         moveTo(ctx, -20 + this.xOff, -this.yOff * 10 * (this.outputsize / 2), xx, yy, this.direction);
-//         lineTo(ctx, -20 + this.xOff, 20 + this.yOff * 10 * (this.outputsize / 2 - 1), xx, yy, this.direction);
-//         lineTo(ctx, 20 - this.xOff, +this.yOff * 10 * (this.outputsize / 2 - 1) + this.xOff, xx, yy, this.direction);
-//         lineTo(ctx, 20 - this.xOff, -this.yOff * 10 * (this.outputsize / 2) - this.xOff + 20, xx, yy, this.direction);
-
-//         ctx.closePath();
-//         if ((this.hover && !simulationArea.shiftDown) || simulationArea.lastSelected == this || simulationArea.multipleObjectSelections.contains(this))
-//             ctx.fillStyle = "rgba(255, 255, 32,0.8)";
-//         ctx.fill();
-//         ctx.stroke();
-
-
-
-//         ctx.beginPath();
-//         ctx.fillStyle = "black";
-//         ctx.textAlign = "center";
-//         //[xFill,yFill] = rotate(xx + this.output1[i].x - 7, yy + this.output1[i].y + 2);
-//         ////console.log([xFill,yFill])
-//         for (var i = 0; i < this.outputsize; i++) {
-//             if (this.direction == "LEFT") fillText(ctx, String(i), xx + this.output1[i].x - 7, yy + this.output1[i].y + 2, 10);
-//             else if (this.direction == "RIGHT") fillText(ctx, String(i), xx + this.output1[i].x + 7, yy + this.output1[i].y + 2, 10);
-//             else if (this.direction == "UP") fillText(ctx, String(i), xx + this.output1[i].x, yy + this.output1[i].y - 5, 10);
-//             else fillText(ctx, String(i), xx + this.output1[i].x, yy + this.output1[i].y + 10, 10);
-//         }
-//         ctx.fill();
-//     }
-// }
-
-// Decoder.prototype.tooltipText = "Decoder ToolTip : Converts coded inputs into coded outputs.";
-
-// class Flag extends CircuitElement {
-//     constructor(x, y, scope = globalScope, dir = "RIGHT", bitWidth = 1, identifier) {
-
-//         super(x, y, scope, dir, bitWidth);
-//         this.setWidth(60);
-//         this.setHeight(20);
-//         this.rectangleObject = false;
-//         this.directionFixed = true;
-//         this.orientationFixed = false;
-//         this.identifier = identifier || ("F" + this.scope.Flag.length);
-//         this.plotValues = [];
-
-//         this.xSize = 10;
-
-//         this.inp1 = new Node(40, 0, 0, this);
-//     }
-
-//     setPlotValue() {
-//         var time = plotArea.stopWatch.ElapsedMilliseconds;
-
-//         // //console.log("DEB:",time);
-//         if (this.plotValues.length && this.plotValues[this.plotValues.length - 1][0] == time)
-//             this.plotValues.pop();
-
-//         if (this.plotValues.length == 0) {
-//             this.plotValues.push([time, this.inp1.value]);
-//             return;
-//         }
-
-//         if (this.plotValues[this.plotValues.length - 1][1] == this.inp1.value)
-//             return;
-//         else
-//             this.plotValues.push([time, this.inp1.value]);
-//     }
-
-//     customSave() {
-//         var data = {
-//             constructorParamaters: [this.direction, this.bitWidth],
-//             nodes: {
-//                 inp1: findNode(this.inp1),
-//             },
-//             values: {
-//                 identifier: this.identifier
-//             }
-//         }
-//         return data;
-//     }
-
-//     setIdentifier(id = "") {
-//         if (id.length == 0) return;
-//         this.identifier = id;
-//         var len = this.identifier.length;
-//         if (len == 1) this.xSize = 20;
-//         else if (len > 1 && len < 4) this.xSize = 10;
-//         else this.xSize = 0;
-//     }
-
-//     customDraw() {
-//         ctx = simulationArea.context;
-//         ctx.beginPath();
-//         ctx.strokeStyle = "grey";
-//         ctx.fillStyle = "#fcfcfc";
-//         ctx.lineWidth = correctWidth(1);
-//         var xx = this.x;
-//         var yy = this.y;
-
-
-//         rect2(ctx, -50 + this.xSize, -20, 100 - 2 * this.xSize, 40, xx, yy, "RIGHT");
-//         if ((this.hover && !simulationArea.shiftDown) || simulationArea.lastSelected == this || simulationArea.multipleObjectSelections.contains(this)) ctx.fillStyle = "rgba(255, 255, 32,0.8)";
-//         ctx.fill();
-//         ctx.stroke();
-
-//         ctx.font = "14px Georgia";
-//         this.xOff = ctx.measureText(this.identifier).width;
-
-//         ctx.beginPath();
-//         rect2(ctx, -40 + this.xSize, -12, this.xOff + 10, 25, xx, yy, "RIGHT");
-//         ctx.fillStyle = "#eee"
-//         ctx.strokeStyle = "#ccc";
-//         ctx.fill();
-//         ctx.stroke();
-
-//         ctx.beginPath();
-//         ctx.textAlign = "center";
-//         ctx.fillStyle = "black";
-//         fillText(ctx, this.identifier, xx - 35 + this.xOff / 2 + this.xSize, yy + 5, 14);
-//         ctx.fill();
-
-//         ctx.beginPath();
-//         ctx.font = "30px Georgia";
-//         ctx.textAlign = "center";
-//         ctx.fillStyle = ["blue", "red"][+(this.inp1.value == undefined)];
-//         if (this.inp1.value !== undefined)
-//             fillText(ctx, this.inp1.value.toString(16), xx + 35 - this.xSize, yy + 8, 25);
-//         else
-//             fillText(ctx, "x", xx + 35 - this.xSize, yy + 8, 25);
-//         ctx.fill();
-
-//     }
-
-//     newDirection(dir) {
-//         if (dir == this.direction) return;
-//         this.direction = dir;
-//         this.inp1.refresh();
-//         if (dir == "RIGHT" || dir == "LEFT") {
-//             this.inp1.leftx = 50 - this.xSize;
-//         } else if (dir == "UP") {
-//             this.inp1.leftx = 20;
-//         } else {
-//             this.inp1.leftx = 20;
-//         }
-//         // if(this.direction=="LEFT" || this.direction=="RIGHT") this.inp1.leftx=50-this.xSize;
-//         //     this.inp1.refresh();
-
-//         this.inp1.refresh();
-//     }
-// }
-
-// Flag.prototype.tooltipText = "FLag ToolTip: Use this for debugging and plotting."
-// Flag.prototype.mutableProperties = {
-//     "identifier": {
-//         name: "Debug Flag identifier",
-//         type: "text",
-//         maxlength: "5",
-//         func: "setIdentifier",
-//     },
-// }
-
-// class MSB extends CircuitElement {
-//     constructor(x, y, scope = globalScope, dir = "RIGHT", bitWidth = 1) {
-
-//         super(x, y, scope, dir, bitWidth);
-//         // this.setDimensions(20, 20);
-//         this.leftDimensionX = 10;
-//         this.rightDimensionX = 20;
-//         this.setHeight(30);
-//         this.directionFixed = true;
-//         this.bitWidth = bitWidth || parseInt(prompt("Enter bitWidth"), 10);
-//         this.rectangleObject = false;
-//         this.inputSize = 1 << this.bitWidth;
-
-//         this.inp1 = new Node(-10, 0, 0, this, this.inputSize);
-//         this.output1 = new Node(20, 0, 1, this, this.bitWidth);
-//         this.enable = new Node(20, 20, 1, this, 1);
-
-
-
-//     }
-
-//     customSave() {
-//         var data = {
-
-//             nodes: {
-//                 inp1: findNode(this.inp1),
-//                 output1: findNode(this.output1),
-//                 enable: findNode(this.enable)
-//             },
-//             constructorParamaters: [this.direction, this.bitWidth],
-//         }
-//         return data;
-//     }
-
-//     newBitWidth(bitWidth) {
-//         // this.inputSize = 1 << bitWidth
-//         this.inputSize = bitWidth
-//         this.inp1.bitWidth = this.inputSize;
-//         this.bitWidth = bitWidth;
-//         this.output1.bitWidth = bitWidth;
-//     }
-
-//     resolve() {
-
-//         var inp = this.inp1.value;
-//         this.output1.value = (dec2bin(inp).length) - 1
-//         simulationArea.simulationQueue.add(this.output1);
-//         if (inp != 0) {
-//             this.enable.value = 1;
-//         } else {
-//             this.enable.value = 0;
-//         }
-//         simulationArea.simulationQueue.add(this.enable);
-//     }
-
-//     customDraw() {
-
-//         ctx = simulationArea.context;
-//         ctx.beginPath();
-//         ctx.strokeStyle = "black";
-//         ctx.fillStyle = "white";
-//         ctx.lineWidth = correctWidth(3);
-//         var xx = this.x;
-//         var yy = this.y;
-//         rect(ctx, xx - 10, yy - 30, 30, 60);
-//         if ((this.hover && !simulationArea.shiftDown) || simulationArea.lastSelected == this || simulationArea.multipleObjectSelections.contains(this)) ctx.fillStyle = "rgba(255, 255, 32,0.8)";
-//         ctx.fill();
-//         ctx.stroke();
-
-//         ctx.beginPath();
-//         ctx.fillStyle = "black";
-//         ctx.textAlign = "center";
-//         fillText(ctx, "MSB", xx + 6, yy - 12, 10);
-//         fillText(ctx, "EN", xx + this.enable.x - 12, yy + this.enable.y + 3, 8);
-//         ctx.fill();
-
-//         ctx.beginPath();
-//         ctx.fillStyle = "green";
-//         ctx.textAlign = "center";
-//         if (this.output1.value != undefined) {
-//             fillText(ctx, this.output1.value, xx + 5, yy + 14, 13);
-//         }
-//         ctx.stroke();
-//         ctx.fill();
-//     }
-// }
-
-// MSB.prototype.tooltipText = "MSB ToolTip : The most significant bit or the high-order bit.";
-
-// class LSB extends CircuitElement {
-//     constructor(x, y, scope = globalScope, dir = "RIGHT", bitWidth = 1) {
-
-//         super(x, y, scope, dir, bitWidth);
-//         this.leftDimensionX = 10;
-//         this.rightDimensionX = 20;
-//         this.setHeight(30);
-//         this.directionFixed = true;
-//         this.bitWidth = bitWidth || parseInt(prompt("Enter bitWidth"), 10);
-//         this.rectangleObject = false;
-//         this.inputSize = 1 << this.bitWidth;
-
-//         this.inp1 = new Node(-10, 0, 0, this, this.inputSize);
-//         this.output1 = new Node(20, 0, 1, this, this.bitWidth);
-//         this.enable = new Node(20, 20, 1, this, 1);
-
-
-
-//     }
-
-//     customSave() {
-//         var data = {
-
-//             nodes: {
-//                 inp1: findNode(this.inp1),
-//                 output1: findNode(this.output1),
-//                 enable: findNode(this.enable)
-//             },
-//             constructorParamaters: [this.direction, this.bitWidth],
-//         }
-//         return data;
-//     }
-
-//     newBitWidth(bitWidth) {
-//         // this.inputSize = 1 << bitWidth
-//         this.inputSize = bitWidth
-//         this.inp1.bitWidth = this.inputSize;
-//         this.bitWidth = bitWidth;
-//         this.output1.bitWidth = bitWidth;
-//     }
-
-//     resolve() {
-
-//         var inp = dec2bin(this.inp1.value);
-//         var out = 0;
-//         for (var i = inp.length - 1; i >= 0; i--) {
-//             if (inp[i] == 1) {
-//                 out = inp.length - 1 - i;
-//                 break;
-//             }
-
-//         }
-//         this.output1.value = out;
-//         simulationArea.simulationQueue.add(this.output1);
-//         if (inp != 0) {
-//             this.enable.value = 1;
-//         } else {
-//             this.enable.value = 0;
-//         }
-//         simulationArea.simulationQueue.add(this.enable);
-//     }
-
-//     customDraw() {
-
-//         ctx = simulationArea.context;
-//         ctx.beginPath();
-//         ctx.strokeStyle = "black";
-//         ctx.fillStyle = "white";
-//         ctx.lineWidth = correctWidth(3);
-//         var xx = this.x;
-//         var yy = this.y;
-//         rect(ctx, xx - 10, yy - 30, 30, 60);
-//         if ((this.hover && !simulationArea.shiftDown) || simulationArea.lastSelected == this || simulationArea.multipleObjectSelections.contains(this)) ctx.fillStyle = "rgba(255, 255, 32,0.8)";
-//         ctx.fill();
-//         ctx.stroke();
-
-//         ctx.beginPath();
-//         ctx.fillStyle = "black";
-//         ctx.textAlign = "center";
-//         fillText(ctx, "LSB", xx + 6, yy - 12, 10);
-//         fillText(ctx, "EN", xx + this.enable.x - 12, yy + this.enable.y + 3, 8);
-//         ctx.fill();
-
-//         ctx.beginPath();
-//         ctx.fillStyle = "green";
-//         ctx.textAlign = "center";
-//         if (this.output1.value != undefined) {
-//             fillText(ctx, this.output1.value, xx + 5, yy + 14, 13);
-//         }
-//         ctx.stroke();
-//         ctx.fill();
-//     }
-// }
-
-// LSB.prototype.tooltipText = "LSB ToolTip : The least significant bit or the low-order bit.";
-
-// class PriorityEncoder extends CircuitElement {
-//     constructor(x, y, scope = globalScope, dir = "RIGHT", bitWidth = 1) {
-
-//         super(x, y, scope, dir, bitWidth);
-//         this.bitWidth = bitWidth || parseInt(prompt("Enter bitWidth"), 10);
-//         this.inputSize = 1 << this.bitWidth;
-
-//         this.yOff = 1;
-//         if (this.bitWidth <= 3) {
-//             this.yOff = 2;
-//         }
-
-//         this.setDimensions(20, this.yOff * 5 * (this.inputSize));
-//         this.directionFixed = true;
-//         this.rectangleObject = false;
-
-//         this.inp1 = [];
-//         for (var i = 0; i < this.inputSize; i++) {
-//             var a = new Node(-10, +this.yOff * 10 * (i - this.inputSize / 2) + 10, 0, this, 1);
-//             this.inp1.push(a);
-//         }
-
-//         this.output1 = [];
-//         for (var i = 0; i < this.bitWidth; i++) {
-//             var a = new Node(30, +2 * 10 * (i - this.bitWidth / 2) + 10, 1, this, 1);
-//             this.output1.push(a);
-//         }
-
-//         this.enable = new Node(10, 20 + this.inp1[this.inputSize - 1].y, 1, this, 1);
-
-
-//     }
-
-//     customSave() {
-//         var data = {
-
-//             nodes: {
-//                 inp1: this.inp1.map(findNode),
-//                 output1: this.output1.map(findNode),
-//                 enable: findNode(this.enable)
-//             },
-//             constructorParamaters: [this.direction, this.bitWidth],
-//         }
-//         return data;
-//     }
-
-//     newBitWidth(bitWidth) {
-//         if (bitWidth == undefined || bitWidth < 1 || bitWidth > 32) return;
-//         if (this.bitWidth == bitWidth) return;
-
-//         this.bitWidth = bitWidth;
-//         var obj = new window[this.objectType](this.x, this.y, this.scope, this.direction, this.bitWidth);
-//         this.inputSize = 1 << bitWidth;
-
-//         this.cleanDelete();
-//         simulationArea.lastSelected = obj;
-//         return obj;
-//     }
-
-//     resolve() {
-//         var out = 0;
-//         var temp = 0;
-//         for (var i = this.inputSize - 1; i >= 0; i--) {
-//             if (this.inp1[i].value == 1) {
-//                 out = dec2bin(i);
-//                 break;
-//             }
-//         }
-//         temp = out;
-
-//         if (out.length != undefined) {
-//             this.enable.value = 1;
-//         } else {
-//             this.enable.value = 0;
-//         }
-//         simulationArea.simulationQueue.add(this.enable);
-
-//         if (temp.length == undefined) {
-//             temp = "0";
-//             for (var i = 0; i < this.bitWidth - 1; i++) {
-//                 temp = "0" + temp;
-//             }
-//         }
-
-//         if (temp.length != this.bitWidth) {
-//             for (var i = temp.length; i < this.bitWidth; i++) {
-//                 temp = "0" + temp;
-//             }
-//         }
-
-//         for (var i = this.bitWidth - 1; i >= 0; i--) {
-//             this.output1[this.bitWidth - 1 - i].value = Number(temp[i]);
-//             simulationArea.simulationQueue.add(this.output1[this.bitWidth - 1 - i]);
-//         }
-//     }
-
-//     customDraw() {
-
-//         ctx = simulationArea.context;
-//         ctx.beginPath();
-//         ctx.strokeStyle = "black";
-//         ctx.fillStyle = "white";
-//         ctx.lineWidth = correctWidth(3);
-//         var xx = this.x;
-//         var yy = this.y;
-//         if (this.bitWidth <= 3)
-//             rect(ctx, xx - 10, yy - 10 - this.yOff * 5 * (this.inputSize), 40, 20 * (this.inputSize + 1));
-//         else
-//             rect(ctx, xx - 10, yy - 10 - this.yOff * 5 * (this.inputSize), 40, 10 * (this.inputSize + 3));
-//         if ((this.hover && !simulationArea.shiftDown) || simulationArea.lastSelected == this || simulationArea.multipleObjectSelections.contains(this)) ctx.fillStyle = "rgba(255, 255, 32,0.8)";
-//         ctx.fill();
-//         ctx.stroke();
-
-//         ctx.beginPath();
-//         ctx.fillStyle = "black";
-//         ctx.textAlign = "center";
-//         for (var i = 0; i < this.inputSize; i++) {
-//             fillText(ctx, String(i), xx, yy + this.inp1[i].y + 2, 10);
-//         }
-//         for (var i = 0; i < this.bitWidth; i++) {
-//             fillText(ctx, String(i), xx + this.output1[0].x - 10, yy + this.output1[i].y + 2, 10);
-//         }
-//         fillText(ctx, "EN", xx + this.enable.x, yy + this.enable.y - 5, 10);
-//         ctx.fill();
-
-//     }
-// }
-
-// PriorityEncoder.prototype.tooltipText = "Priority Encoder ToolTip : Compresses binary inputs into a smaller number of outputs.";
-
-// class Tunnel extends CircuitElement {
-//     constructor(x, y, scope = globalScope, dir = "LEFT", bitWidth = 1, identifier) {
-
-//         super(x, y, scope, dir, bitWidth);
-//         this.rectangleObject = false;
-//         this.centerElement = true;
-
-//         this.xSize = 10;
-
-//         this.plotValues = [];
-//         this.inp1 = new Node(0, 0, 0, this);
-//         this.setIdentifier(identifier || "T");
-//         this.setBounds();
-
-//     }
-
-//     newDirection(dir) {
-//         if (this.direction == dir) return;
-//         this.direction = dir;
-//         this.setBounds();
-//     }
-
-//     setBounds() {
-
-//         var xRotate = 0;
-//         var yRotate = 0;
-//         if (this.direction == "LEFT") {
-//             xRotate = 0;
-//             yRotate = 0;
-//         } else if (this.direction == "RIGHT") {
-//             xRotate = 120 - this.xSize;
-//             yRotate = 0;
-//         } else if (this.direction == "UP") {
-//             xRotate = 60 - this.xSize / 2;
-//             yRotate = -20;
-//         } else {
-//             xRotate = 60 - this.xSize / 2;
-//             yRotate = 20;
-//         }
-
-//         this.leftDimensionX = Math.abs(-120 + xRotate + this.xSize);
-//         this.upDimensionY = Math.abs(-20 + yRotate);
-//         this.rightDimensionX = Math.abs(xRotate)
-//         this.downDimensionY = Math.abs(20 + yRotate);
-//         console.log(this.leftDimensionX, this.upDimensionY, this.rightDimensionX, this.downDimensionY);
-
-//         // rect2(ctx, -120 + xRotate + this.xSize, -20 + yRotate, 120 - this.xSize, 40, xx, yy, "RIGHT");
-
-
-//     }
-
-//     setTunnelValue(val) {
-//         this.inp1.value = val;
-//         for (var i = 0; i < this.inp1.connections.length; i++) {
-//             if (this.inp1.connections[i].value != val) {
-//                 this.inp1.connections[i].value = val;
-//                 simulationArea.simulationQueue.add(this.inp1.connections[i]);
-//             }
-//         }
-//     }
-
-//     resolve() {
-//         for (var i = 0; i < this.scope.tunnelList[this.identifier].length; i++) {
-//             if (this.scope.tunnelList[this.identifier][i].inp1.value != this.inp1.value) {
-//                 this.scope.tunnelList[this.identifier][i].setTunnelValue(this.inp1.value);
-//             }
-//         }
-//     }
-
-//     updateScope(scope) {
-//         this.scope = scope;
-//         this.inp1.updateScope(scope);
-//         this.setIdentifier(this.identifier);
-//         //console.log("ShouldWork!");
-//     }
-
-//     setPlotValue() {
-//         var time = plotArea.stopWatch.ElapsedMilliseconds;
-//         if (this.plotValues.length && this.plotValues[this.plotValues.length - 1][0] == time)
-//             this.plotValues.pop();
-
-//         if (this.plotValues.length == 0) {
-//             this.plotValues.push([time, this.inp1.value]);
-//             return;
-//         }
-
-//         if (this.plotValues[this.plotValues.length - 1][1] == this.inp1.value)
-//             return;
-//         else
-//             this.plotValues.push([time, this.inp1.value]);
-//     }
-
-//     customSave() {
-//         var data = {
-//             constructorParamaters: [this.direction, this.bitWidth, this.identifier],
-//             nodes: {
-//                 inp1: findNode(this.inp1),
-//             },
-//             values: {
-//                 identifier: this.identifier
-//             }
-//         }
-//         return data;
-//     }
-
-//     setIdentifier(id = "") {
-//         if (id.length == 0) return;
-//         if (this.scope.tunnelList[this.identifier]) this.scope.tunnelList[this.identifier].clean(this);
-//         this.identifier = id;
-//         if (this.scope.tunnelList[this.identifier]) this.scope.tunnelList[this.identifier].push(this);
-//         else this.scope.tunnelList[this.identifier] = [this];
-
-//         var len = this.identifier.length;
-//         if (len == 1) this.xSize = 40;
-//         else if (len > 1 && len < 4) this.xSize = 20;
-//         else this.xSize = 0;
-
-//         this.setBounds();
-//     }
-
-//     delete() {
-//         this.scope.Tunnel.clean(this);
-//         this.scope.tunnelList[this.identifier].clean(this);
-//         super.delete();
-//     }
-
-//     customDraw() {
-//         ctx = simulationArea.context;
-//         ctx.beginPath();
-//         ctx.strokeStyle = "grey";
-//         ctx.fillStyle = "#fcfcfc";
-//         ctx.lineWidth = correctWidth(1);
-//         var xx = this.x;
-//         var yy = this.y;
-
-//         var xRotate = 0;
-//         var yRotate = 0;
-//         if (this.direction == "LEFT") {
-//             xRotate = 0;
-//             yRotate = 0;
-//         } else if (this.direction == "RIGHT") {
-//             xRotate = 120 - this.xSize;
-//             yRotate = 0;
-//         } else if (this.direction == "UP") {
-//             xRotate = 60 - this.xSize / 2;
-//             yRotate = -20;
-//         } else {
-//             xRotate = 60 - this.xSize / 2;
-//             yRotate = 20;
-//         }
-
-//         rect2(ctx, -120 + xRotate + this.xSize, -20 + yRotate, 120 - this.xSize, 40, xx, yy, "RIGHT");
-//         if ((this.hover && !simulationArea.shiftDown) || simulationArea.lastSelected == this || simulationArea.multipleObjectSelections.contains(this))
-//             ctx.fillStyle = "rgba(255, 255, 32,0.8)";
-//         ctx.fill();
-//         ctx.stroke();
-
-//         ctx.font = "14px Georgia";
-//         this.xOff = ctx.measureText(this.identifier).width;
-//         ctx.beginPath();
-//         rect2(ctx, -105 + xRotate + this.xSize, -11 + yRotate, this.xOff + 10, 23, xx, yy, "RIGHT");
-//         ctx.fillStyle = "#eee"
-//         ctx.strokeStyle = "#ccc";
-//         ctx.fill();
-//         ctx.stroke();
-
-//         ctx.beginPath();
-//         ctx.textAlign = "center";
-//         ctx.fillStyle = "black";
-//         fillText(ctx, this.identifier, xx - 100 + this.xOff / 2 + xRotate + this.xSize, yy + 6 + yRotate, 14);
-//         ctx.fill();
-
-//         ctx.beginPath();
-//         ctx.font = "30px Georgia";
-//         ctx.textAlign = "center";
-//         ctx.fillStyle = ["blue", "red"][+(this.inp1.value == undefined)];
-//         if (this.inp1.value !== undefined)
-//             fillText(ctx, this.inp1.value.toString(16), xx - 23 + xRotate, yy + 8 + yRotate, 25);
-//         else
-//             fillText(ctx, "x", xx - 23 + xRotate, yy + 8 + yRotate, 25);
-//         ctx.fill();
-//     }
-// }
-
-// Tunnel.prototype.tooltipText = "Tunnel ToolTip : Tunnel Selected.";
-// Tunnel.prototype.overrideDirectionRotation = true;
-// Tunnel.prototype.mutableProperties = {
-//     "identifier": {
-//         name: "Debug Flag identifier",
-//         type: "text",
-//         maxlength: "5",
-//         func: "setIdentifier",
-//     },
-// }
-
-// class ALU extends CircuitElement {
-//     constructor(x, y, scope = globalScope, dir = "RIGHT", bitWidth = 1) {
-//         // //console.log("HIT");
-//         // //console.log(x,y,scope,dir,bitWidth,controlSignalSize);
-//         super(x, y, scope, dir, bitWidth);
-//         this.message = "ALU";
-
-//         this.setDimensions(30, 40);
-//         this.rectangleObject = false;
-
-//         this.inp1 = new Node(-30, -30, 0, this, this.bitwidth, "A");
-//         this.inp2 = new Node(-30, 30, 0, this, this.bitwidth, "B");
-
-//         this.controlSignalInput = new Node(-10, -40, 0, this, 3, "Ctrl");
-//         this.carryOut = new Node(-10, 40, 1, this, 1, "Cout");
-//         this.output = new Node(30, 0, 1, this, this.bitwidth, "Out");
-
-//     }
-
-//     newBitWidth(bitWidth) {
-//         this.bitWidth = bitWidth;
-//         this.inp1.bitWidth = bitWidth;
-//         this.inp2.bitWidth = bitWidth;
-//         this.output.bitWidth = bitWidth;
-//     }
-
-//     customSave() {
-//         var data = {
-//             constructorParamaters: [this.direction, this.bitWidth],
-//             nodes: {
-//                 inp1: findNode(this.inp1),
-//                 inp2: findNode(this.inp2),
-//                 output: findNode(this.output),
-//                 carryOut: findNode(this.carryOut),
-//                 controlSignalInput: findNode(this.controlSignalInput)
-//             },
-//         }
-//         return data;
-//     }
-
-//     customDraw() {
-//         ctx = simulationArea.context;
-//         var xx = this.x;
-//         var yy = this.y;
-//         ctx.strokeStyle = "black";
-//         ctx.fillStyle = "white";
-//         ctx.lineWidth = correctWidth(3);
-//         ctx.beginPath();
-//         moveTo(ctx, 30, 10, xx, yy, this.direction);
-//         lineTo(ctx, 30, -10, xx, yy, this.direction);
-//         lineTo(ctx, 10, -40, xx, yy, this.direction);
-//         lineTo(ctx, -30, -40, xx, yy, this.direction);
-//         lineTo(ctx, -30, -20, xx, yy, this.direction);
-//         lineTo(ctx, -20, -10, xx, yy, this.direction);
-//         lineTo(ctx, -20, 10, xx, yy, this.direction);
-//         lineTo(ctx, -30, 20, xx, yy, this.direction);
-//         lineTo(ctx, -30, 40, xx, yy, this.direction);
-//         lineTo(ctx, 10, 40, xx, yy, this.direction);
-//         lineTo(ctx, 30, 10, xx, yy, this.direction);
-//         ctx.closePath();
-//         ctx.stroke();
-
-//         if ((this.hover && !simulationArea.shiftDown) || simulationArea.lastSelected == this || simulationArea.multipleObjectSelections.contains(this))
-//             ctx.fillStyle = "rgba(255, 255, 32,0.8)";
-//         ctx.fill();
-//         ctx.stroke();
-
-//         ctx.beginPath();
-//         ctx.fillStyle = "Black";
-//         ctx.textAlign = "center"
-
-//         fillText4(ctx, "B", -23, 30, xx, yy, this.direction, 6);
-//         fillText4(ctx, "A", -23, -30, xx, yy, this.direction, 6);
-//         fillText4(ctx, "CTR", -10, -30, xx, yy, this.direction, 6);
-//         fillText4(ctx, "Carry", -10, 30, xx, yy, this.direction, 6);
-//         fillText4(ctx, "Ans", 20, 0, xx, yy, this.direction, 6);
-//         ctx.fill();
-//         ctx.beginPath();
-//         ctx.fillStyle = "DarkGreen";
-//         fillText4(ctx, this.message, 0, 0, xx, yy, this.direction, 12);
-//         ctx.fill();
-
-//     }
-
-//     resolve() {
-//         if (this.controlSignalInput.value == 0) {
-//             this.output.value = ((this.inp1.value) & (this.inp2.value));
-//             simulationArea.simulationQueue.add(this.output);
-//             this.carryOut.value = 0;
-//             simulationArea.simulationQueue.add(this.carryOut);
-//             this.message = "A&B";
-//         } else if (this.controlSignalInput.value == 1) {
-//             this.output.value = ((this.inp1.value) | (this.inp2.value));
-
-//             simulationArea.simulationQueue.add(this.output);
-//             this.carryOut.value = 0;
-//             simulationArea.simulationQueue.add(this.carryOut);
-//             this.message = "A|B";
-//         } else if (this.controlSignalInput.value == 2) {
-//             var sum = this.inp1.value + this.inp2.value;
-//             this.output.value = ((sum) << (32 - this.bitWidth)) >>> (32 - this.bitWidth);
-//             this.carryOut.value = +((sum >>> (this.bitWidth)) !== 0);
-//             simulationArea.simulationQueue.add(this.carryOut);
-//             simulationArea.simulationQueue.add(this.output);
-//             this.message = "A+B";
-//         } else if (this.controlSignalInput.value == 3) {
-//             this.message = "ALU";
-//             return;
-//         } else if (this.controlSignalInput.value == 4) {
-//             this.message = "A&~B";
-//             this.output.value = ((this.inp1.value) & this.flipBits(this.inp2.value));
-//             simulationArea.simulationQueue.add(this.output);
-//             this.carryOut.value = 0;
-//             simulationArea.simulationQueue.add(this.carryOut);
-//         } else if (this.controlSignalInput.value == 5) {
-//             this.message = "A|~B";
-//             this.output.value = ((this.inp1.value) | this.flipBits(this.inp2.value));
-//             simulationArea.simulationQueue.add(this.output);
-//             this.carryOut.value = 0;
-//             simulationArea.simulationQueue.add(this.carryOut);
-//         } else if (this.controlSignalInput.value == 6) {
-//             this.message = "A-B";
-//             this.output.value = ((this.inp1.value - this.inp2.value) << (32 - this.bitWidth)) >>> (32 - this.bitWidth);
-//             simulationArea.simulationQueue.add(this.output);
-//             this.carryOut.value = 0;
-//             simulationArea.simulationQueue.add(this.carryOut);
-//         } else if (this.controlSignalInput.value == 7) {
-//             this.message = "A<B";
-//             if (this.inp1.value < this.inp2.value)
-//                 this.output.value = 1;
-//             else
-//                 this.output.value = 0;
-//             simulationArea.simulationQueue.add(this.output);
-//             this.carryOut.value = 0;
-//             simulationArea.simulationQueue.add(this.carryOut);
-//         }
-
-//     }
-// }
-
-// ALU.prototype.tooltipText = "ALU ToolTip: 0: A&B, 1:A|B, 2:A+B, 4:A&~B, 5:A|~B, 6:A-B, 7:SLT "
-
-// class Rectangle extends CircuitElement {
-//     constructor(x, y, scope = globalScope, rows = 15, cols = 20) {
-//         super(x, y, scope, "RIGHT", 1);
-//         this.directionFixed = true;
-//         this.fixedBitWidth = true;
-//         this.rectangleObject = false;
-//         this.cols = cols || parseInt(prompt("Enter cols:"));
-//         this.rows = rows || parseInt(prompt("Enter rows:"));
-//         this.setSize()
-
-//     }
-
-//     changeRowSize(size) {
-//         if (size == undefined || size < 5 || size > 1000) return;
-//         if (this.rows == size) return;
-//         this.rows = parseInt(size)
-//         this.setSize()
-//         return this;
-//     }
-
-//     changeColSize(size) {
-//         if (size == undefined || size < 5 || size > 1000) return;
-//         if (this.cols == size) return;
-//         this.cols = parseInt(size);
-//         this.setSize()
-//         return this;
-//     }
-
-//     keyDown3(dir) {
-//         //console.log(dir)
-//         if (dir == "ArrowRight")
-//             this.changeColSize(this.cols + 2)
-//         if (dir == "ArrowLeft")
-//             this.changeColSize(this.cols - 2)
-//         if (dir == "ArrowDown")
-//             this.changeRowSize(this.rows + 2)
-//         if (dir == "ArrowUp")
-//             this.changeRowSize(this.rows - 2)
-//     }
-
-//     customSave() {
-//         var data = {
-//             constructorParamaters: [this.rows, this.cols],
-//         }
-//         return data;
-//     }
-
-//     customDraw() {
-
-//         ctx = simulationArea.context;
-//         ctx.beginPath();
-//         ctx.strokeStyle = "rgba(0,0,0,1)";
-//         ctx.setLineDash([5 * globalScope.scale, 5 * globalScope.scale])
-//         ctx.lineWidth = correctWidth(1.5);
-//         var xx = this.x;
-//         var yy = this.y;
-//         rect(ctx, xx, yy, this.elementWidth, this.elementHeight);
-//         ctx.stroke();
-
-//         if (simulationArea.lastSelected == this || simulationArea.multipleObjectSelections.contains(this)) {
-//             ctx.fillStyle = "rgba(255, 255, 32,0.1)";
-//             ctx.fill();
-//         }
-//         ctx.setLineDash([])
-
-
-//     }
-
-//     setSize() {
-//         this.elementWidth = this.cols * 10;
-//         this.elementHeight = this.rows * 10;
-//         this.upDimensionY = 0;
-//         this.leftDimensionX = 0;
-//         this.rightDimensionX = this.elementWidth;
-//         this.downDimensionY = this.elementHeight;
-//     }
-// }
-
-// Rectangle.prototype.tooltipText = "Rectangle ToolTip : Used to Box the Circuit or area you want to highlight.";
-// Rectangle.prototype.mutableProperties = {
-//     "cols": {
-//         name: "Columns",
-//         type: "number",
-//         max: "1000",
-//         min: "5",
-//         func: "changeColSize",
-//     },
-//     "rows": {
-//         name: "Rows",
-//         type: "number",
-//         max: "1000",
-//         min: "5",
-//         func: "changeRowSize",
-//     }
-// }
-
-// class Arrow extends CircuitElement {
-//     constructor(x, y, scope = globalScope, dir = "RIGHT") {
-
-//         super(x, y, scope, dir, 8);
-//         this.rectangleObject = false;
-//         this.fixedBitWidth = true
-//         this.setDimensions(30, 20);
-
-//     }
-
-//     customSave() {
-//         var data = {
-//             constructorParamaters: [this.direction],
-//         }
-//         return data;
-//     }
-
-//     customDraw() {
-
-//         ctx = simulationArea.context;
-//         ctx.lineWidth = correctWidth(3);
-//         var xx = this.x;
-//         var yy = this.y;
-//         ctx.strokeStyle = "red";
-//         ctx.fillStyle = "white";
-
-//         ctx.beginPath();
-
-//         moveTo(ctx, -30, -3, xx, yy, this.direction);
-//         lineTo(ctx, 10, -3, xx, yy, this.direction);
-//         lineTo(ctx, 10, -15, xx, yy, this.direction);
-//         lineTo(ctx, 30, 0, xx, yy, this.direction);
-//         lineTo(ctx, 10, 15, xx, yy, this.direction);
-//         lineTo(ctx, 10, 3, xx, yy, this.direction);
-//         lineTo(ctx, -30, 3, xx, yy, this.direction);
-//         ctx.closePath()
-//         ctx.stroke();
-//         if ((this.hover && !simulationArea.shiftDown) || simulationArea.lastSelected == this || simulationArea.multipleObjectSelections.contains(this)) ctx.fillStyle = "rgba(255, 255, 32,0.8)";
-//         ctx.fill();
-
-//     }
-// }
-
-// Arrow.prototype.tooltipText = "Arrow ToolTip : Arrow Selected.";
diff --git a/src/modules.js b/src/modules.js
new file mode 100755
index 0000000..646ed09
--- /dev/null
+++ b/src/modules.js
@@ -0,0 +1,154 @@
+/* eslint-disable import/no-cycle */
+import AndGate from './modules/AndGate';
+import NandGate from './modules/NandGate';
+import Multiplexer from './modules/Multiplexer';
+import XorGate from './modules/XorGate';
+import XnorGate from './modules/XnorGate';
+import SevenSegDisplay from './modules/SevenSegDisplay';
+import SixteenSegDisplay from './modules/SixteenSegDisplay';
+import HexDisplay from './modules/HexDisplay';
+import OrGate from './modules/OrGate';
+import Stepper from './modules/Stepper';
+import NotGate from './modules/NotGate';
+import Text from './modules/Text';
+import TriState from './modules/TriState';
+import Buffer from './modules/Buffer';
+import ControlledInverter from './modules/ControlledInverter';
+import Adder from './modules/Adder';
+import TwoComplement from './modules/TwoComplement';
+import Splitter from './modules/Splitter';
+import Ground from './modules/Ground';
+import Power from './modules/Power';
+import Input from './modules/Input';
+import Output from './modules/Output';
+import BitSelector from './modules/BitSelector';
+import ConstantVal from './modules/ConstantVal';
+import NorGate from './modules/NorGate';
+import DigitalLed from './modules/DigitalLed';
+import VariableLed from './modules/VariableLed';
+import Button from './modules/Button';
+import RGBLed from './modules/RGBLed';
+import SquareRGBLed from './modules/SquareRGBLed';
+import Demultiplexer from './modules/Demultiplexer';
+import Decoder from './modules/Decoder';
+import Flag from './modules/Flag';
+import MSB from './modules/MSB';
+import LSB from './modules/LSB';
+import PriorityEncoder from './modules/PriorityEncoder';
+import Tunnel from './modules/Tunnel';
+import ALU from './modules/ALU';
+import Rectangle from './modules/Rectangle';
+import Arrow from './modules/Arrow';
+import Counter from './modules/Counter';
+import Random from './modules/Random';
+import RGBLedMatrix from './modules/RGBLedMatrix';
+import simulationArea from './simulationArea';
+import TflipFlop from './sequential/TflipFlop';
+import DflipFlop from './sequential/DflipFlop';
+import Dlatch from './sequential/Dlatch';
+import SRflipFlop from './sequential/SRflipFlop';
+import JKflipFlop from './sequential/JKflipFlop';
+import TTY from './sequential/TTY';
+import Keyboard from './sequential/Keyboard';
+import Clock from './sequential/Clock';
+import RAM from './sequential/RAM';
+import EEPROM from './sequential/EEPROM';
+import Rom from './sequential/Rom';
+import TB_Input from './testbench/testbenchInput';
+import TB_Output from './testbench/testbenchOutput';
+import ForceGate from './testbench/ForceGate';
+
+export function getNextPosition(x = 0, scope = globalScope) {
+    let possibleY = 20;
+    const done = {};
+    for (let i = 0; i < scope.Input.length - 1; i++) {
+        if (scope.Input[i].layoutProperties.x === x) { done[scope.Input[i].layoutProperties.y] = 1; }
+    }
+    for (let i = 0; i < scope.Output.length; i++) {
+        if (scope.Output[i].layoutProperties.x === x) { done[scope.Output[i].layoutProperties.y] = 1; }
+    }
+    while (done[possibleY] || done[possibleY + 10] || done[possibleY - 10]) { possibleY += 10; }
+    const height = possibleY + 20;
+    if (height > scope.layout.height) {
+        const oldHeight = scope.layout.height;
+        scope.layout.height = height;
+        for (let i = 0; i < scope.Input.length; i++) {
+            if (scope.Input[i].layoutProperties.y === oldHeight) { scope.Input[i].layoutProperties.y = scope.layout.height; }
+        }
+        for (let i = 0; i < scope.Output.length; i++) {
+            if (scope.Output[i].layoutProperties.y === oldHeight) { scope.Output[i].layoutProperties.y = scope.layout.height; }
+        }
+    }
+    return possibleY;
+}
+
+const modules = {
+    AndGate,
+    Random,
+    NandGate,
+    Counter,
+    Multiplexer,
+    XorGate,
+    XnorGate,
+    SevenSegDisplay,
+    SixteenSegDisplay,
+    HexDisplay,
+    OrGate,
+    Stepper,
+    NotGate,
+    Text,
+    TriState,
+    Buffer,
+    ControlledInverter,
+    Adder,
+    TwoComplement,
+    Splitter,
+    Ground,
+    Power,
+    Input,
+    Output,
+    BitSelector,
+    ConstantVal,
+    NorGate,
+    DigitalLed,
+    VariableLed,
+    Button,
+    RGBLed,
+    SquareRGBLed,
+    Demultiplexer,
+    Decoder,
+    Flag,
+    MSB,
+    LSB,
+    PriorityEncoder,
+    Tunnel,
+    ALU,
+    Rectangle,
+    Arrow,
+    RGBLedMatrix,
+    TflipFlop,
+    DflipFlop,
+    Dlatch,
+    SRflipFlop,
+    JKflipFlop,
+    TTY,
+    Keyboard,
+    Clock,
+    Rom,
+    EEPROM,
+    RAM,
+    TB_Input,
+    TB_Output,
+    ForceGate,
+};
+export default modules;
+export function changeInputSize(size) {
+    if (size == undefined || size < 2 || size > 10) return;
+    if (this.inputSize == size) return;
+    size = parseInt(size, 10);
+    const obj = new modules[this.objectType](this.x, this.y, this.scope, this.direction, size, this.bitWidth);
+    this.delete();
+    simulationArea.lastSelected = obj;
+    return obj;
+    // showProperties(obj);
+}
diff --git a/src/modules/ALU.js b/src/modules/ALU.js
new file mode 100755
index 0000000..48ac4ce
--- /dev/null
+++ b/src/modules/ALU.js
@@ -0,0 +1,188 @@
+/* eslint-disable no-bitwise */
+import CircuitElement from '../circuitElement';
+import Node, { findNode } from '../node';
+import simulationArea from '../simulationArea';
+import {
+    correctWidth, lineTo, moveTo, fillText4,
+} from '../canvasApi';
+
+/**
+ * @class
+ * ALU
+ * @extends CircuitElement
+ * @param {number} x - x coordinate of element.
+ * @param {number} y - y coordinate of element.
+ * @param {Scope=} scope - Cirucit on which element is drawn
+ * @param {string=} dir - direction of element
+ * @param {number=} bitWidth - bit width per node.
+ * @category modules
+ */
+export default class ALU extends CircuitElement {
+    constructor(x, y, scope = globalScope, dir = 'RIGHT', bitWidth = 1) {
+        // //console.log("HIT");
+        // //console.log(x,y,scope,dir,bitWidth,controlSignalSize);
+        super(x, y, scope, dir, bitWidth);
+        /* this is done in this.baseSetup() now
+        this.scope['ALU'].push(this);
+        */
+        this.message = 'ALU';
+
+        this.setDimensions(30, 40);
+        this.rectangleObject = false;
+
+        this.inp1 = new Node(-30, -30, 0, this, this.bitwidth, 'A');
+        this.inp2 = new Node(-30, 30, 0, this, this.bitwidth, 'B');
+
+        this.controlSignalInput = new Node(-10, -40, 0, this, 3, 'Ctrl');
+        this.carryOut = new Node(-10, 40, 1, this, 1, 'Cout');
+        this.output = new Node(30, 0, 1, this, this.bitwidth, 'Out');
+    }
+
+    /**
+     * @memberof ALU
+     * function to change bitwidth of the element
+     * @param {number} bitWidth - new bitwidth
+     */
+    newBitWidth(bitWidth) {
+        this.bitWidth = bitWidth;
+        this.inp1.bitWidth = bitWidth;
+        this.inp2.bitWidth = bitWidth;
+        this.output.bitWidth = bitWidth;
+    }
+
+    /**
+     * @memberof ALU
+     * fn to create save Json Data of object
+     * @return {JSON}
+     */
+    customSave() {
+        const data = {
+            constructorParamaters: [this.direction, this.bitWidth],
+            nodes: {
+                inp1: findNode(this.inp1),
+                inp2: findNode(this.inp2),
+                output: findNode(this.output),
+                carryOut: findNode(this.carryOut),
+                controlSignalInput: findNode(this.controlSignalInput),
+            },
+        };
+        return data;
+    }
+
+    /**
+     * @memberof ALU
+     * function to draw element
+     */
+    customDraw() {
+        const ctx = simulationArea.context;
+        const xx = this.x;
+        const yy = this.y;
+        ctx.strokeStyle = 'black';
+        ctx.fillStyle = 'white';
+        ctx.lineWidth = correctWidth(3);
+        ctx.beginPath();
+        moveTo(ctx, 30, 10, xx, yy, this.direction);
+        lineTo(ctx, 30, -10, xx, yy, this.direction);
+        lineTo(ctx, 10, -40, xx, yy, this.direction);
+        lineTo(ctx, -30, -40, xx, yy, this.direction);
+        lineTo(ctx, -30, -20, xx, yy, this.direction);
+        lineTo(ctx, -20, -10, xx, yy, this.direction);
+        lineTo(ctx, -20, 10, xx, yy, this.direction);
+        lineTo(ctx, -30, 20, xx, yy, this.direction);
+        lineTo(ctx, -30, 40, xx, yy, this.direction);
+        lineTo(ctx, 10, 40, xx, yy, this.direction);
+        lineTo(ctx, 30, 10, xx, yy, this.direction);
+        ctx.closePath();
+        ctx.stroke();
+
+        if ((this.hover && !simulationArea.shiftDown) || simulationArea.lastSelected === this || simulationArea.multipleObjectSelections.contains(this)) { ctx.fillStyle = 'rgba(255, 255, 32,0.8)'; }
+        ctx.fill();
+        ctx.stroke();
+
+        ctx.beginPath();
+        ctx.fillStyle = 'Black';
+        ctx.textAlign = 'center';
+
+        fillText4(ctx, 'B', -23, 30, xx, yy, this.direction, 6);
+        fillText4(ctx, 'A', -23, -30, xx, yy, this.direction, 6);
+        fillText4(ctx, 'CTR', -10, -30, xx, yy, this.direction, 6);
+        fillText4(ctx, 'Carry', -10, 30, xx, yy, this.direction, 6);
+        fillText4(ctx, 'Ans', 20, 0, xx, yy, this.direction, 6);
+        ctx.fill();
+        ctx.beginPath();
+        ctx.fillStyle = 'DarkGreen';
+        fillText4(ctx, this.message, 0, 0, xx, yy, this.direction, 12);
+        ctx.fill();
+    }
+
+    /**
+     * @memberof ALU
+     * resolve output values based on inputData
+     */
+    resolve() {
+        if (this.controlSignalInput.value === 0) {
+            this.output.value = ((this.inp1.value) & (this.inp2.value));
+            simulationArea.simulationQueue.add(this.output);
+            this.carryOut.value = 0;
+            simulationArea.simulationQueue.add(this.carryOut);
+            this.message = 'A&B';
+        } else if (this.controlSignalInput.value === 1) {
+            this.output.value = ((this.inp1.value) | (this.inp2.value));
+
+            simulationArea.simulationQueue.add(this.output);
+            this.carryOut.value = 0;
+            simulationArea.simulationQueue.add(this.carryOut);
+            this.message = 'A|B';
+        } else if (this.controlSignalInput.value === 2) {
+            const sum = this.inp1.value + this.inp2.value;
+            this.output.value = ((sum) << (32 - this.bitWidth)) >>> (32 - this.bitWidth);
+            this.carryOut.value = +((sum >>> (this.bitWidth)) !== 0);
+            simulationArea.simulationQueue.add(this.carryOut);
+            simulationArea.simulationQueue.add(this.output);
+            this.message = 'A+B';
+        } else if (this.controlSignalInput.value === 3) {
+            this.message = 'ALU';
+        } else if (this.controlSignalInput.value === 4) {
+            this.message = 'A&~B';
+            this.output.value = ((this.inp1.value) & this.flipBits(this.inp2.value));
+            simulationArea.simulationQueue.add(this.output);
+            this.carryOut.value = 0;
+            simulationArea.simulationQueue.add(this.carryOut);
+        } else if (this.controlSignalInput.value === 5) {
+            this.message = 'A|~B';
+            this.output.value = ((this.inp1.value) | this.flipBits(this.inp2.value));
+            simulationArea.simulationQueue.add(this.output);
+            this.carryOut.value = 0;
+            simulationArea.simulationQueue.add(this.carryOut);
+        } else if (this.controlSignalInput.value === 6) {
+            this.message = 'A-B';
+            this.output.value = ((this.inp1.value - this.inp2.value) << (32 - this.bitWidth)) >>> (32 - this.bitWidth);
+            simulationArea.simulationQueue.add(this.output);
+            this.carryOut.value = 0;
+            simulationArea.simulationQueue.add(this.carryOut);
+        } else if (this.controlSignalInput.value === 7) {
+            this.message = 'A<B';
+            if (this.inp1.value < this.inp2.value) { this.output.value = 1; } else { this.output.value = 0; }
+            simulationArea.simulationQueue.add(this.output);
+            this.carryOut.value = 0;
+            simulationArea.simulationQueue.add(this.carryOut);
+        }
+    }
+}
+
+/**
+ * @memberof ALU
+ * Help Tip
+ * @type {string}
+ * @category modules
+ */
+ALU.prototype.tooltipText = 'ALU ToolTip: 0: A&B, 1:A|B, 2:A+B, 4:A&~B, 5:A|~B, 6:A-B, 7:SLT ';
+
+/**
+ * @memberof ALU
+ * Help URL
+ * @type {string}
+ * @category modules
+ */
+ALU.prototype.helplink = 'https://docs.circuitverse.org/#/miscellaneous?id=alu';
+ALU.prototype.objectType = 'ALU';
diff --git a/src/modules/Adder.js b/src/modules/Adder.js
new file mode 100755
index 0000000..11c9f27
--- /dev/null
+++ b/src/modules/Adder.js
@@ -0,0 +1,99 @@
+/* eslint-disable no-bitwise */
+import CircuitElement from '../circuitElement';
+import Node, { findNode } from '../node';
+import simulationArea from '../simulationArea';
+
+/**
+ * @class
+ * Adder
+ * @extends CircuitElement
+ * @param {number} x - x coordinate of element.
+ * @param {number} y - y coordinate of element.
+ * @param {Scope=} scope - Cirucit on which element is drawn
+ * @param {string=} dir - direction of element
+ * @param {number=} bitWidth - bit width per node. modules
+ * @category modules
+ */
+export default class Adder extends CircuitElement {
+    constructor(x, y, scope = globalScope, dir = 'RIGHT', bitWidth = 1) {
+        super(x, y, scope, dir, bitWidth);
+        /* this is done in this.baseSetup() now
+        this.scope['Adder'].push(this);
+        */
+        this.setDimensions(20, 20);
+
+        this.inpA = new Node(-20, -10, 0, this, this.bitWidth, 'A');
+        this.inpB = new Node(-20, 0, 0, this, this.bitWidth, 'B');
+        this.carryIn = new Node(-20, 10, 0, this, 1, 'Cin');
+        this.sum = new Node(20, 0, 1, this, this.bitWidth, 'Sum');
+        this.carryOut = new Node(20, 10, 1, this, 1, 'Cout');
+    }
+
+    /**
+     * @memberof Adder
+     * fn to create save Json Data of object
+     * @return {JSON}
+     */
+    customSave() {
+        const data = {
+            constructorParamaters: [this.direction, this.bitWidth],
+            nodes: {
+                inpA: findNode(this.inpA),
+                inpB: findNode(this.inpB),
+                carryIn: findNode(this.carryIn),
+                carryOut: findNode(this.carryOut),
+                sum: findNode(this.sum),
+            },
+        };
+        return data;
+    }
+
+    /**
+     * @memberof Adder
+     * Checks if the element is resolvable
+     * @return {boolean}
+     */
+    isResolvable() {
+        return this.inpA.value !== undefined && this.inpB.value !== undefined;
+    }
+
+    /**
+     * @memberof Adder
+     * function to change bitwidth of the element
+     * @param {number} bitWidth - new bitwidth
+     */
+    newBitWidth(bitWidth) {
+        this.bitWidth = bitWidth;
+        this.inpA.bitWidth = bitWidth;
+        this.inpB.bitWidth = bitWidth;
+        this.sum.bitWidth = bitWidth;
+    }
+
+    /**
+     * @memberof Adder
+     * resolve output values based on inputData
+     */
+    resolve() {
+        if (this.isResolvable() === false) {
+            return;
+        }
+        let carryIn = this.carryIn.value;
+        if (carryIn === undefined) carryIn = 0;
+        const sum = this.inpA.value + this.inpB.value + carryIn;
+
+        this.sum.value = ((sum) << (32 - this.bitWidth)) >>> (32 - this.bitWidth);
+        this.carryOut.value = +((sum >>> (this.bitWidth)) !== 0);
+        simulationArea.simulationQueue.add(this.carryOut);
+        simulationArea.simulationQueue.add(this.sum);
+    }
+}
+
+/**
+ * @memberof Adder
+ * Help Tip
+ * @type {string}
+ * @category modules
+ */
+Adder.prototype.tooltipText = 'Adder ToolTip : Performs addition of numbers.';
+Adder.prototype.helplink = 'https://docs.circuitverse.org/#/miscellaneous?id=adder';
+Adder.prototype.objectType = 'Adder';
diff --git a/src/modules/AndGate.js b/src/modules/AndGate.js
new file mode 100755
index 0000000..950b454
--- /dev/null
+++ b/src/modules/AndGate.js
@@ -0,0 +1,147 @@
+import CircuitElement from '../circuitElement';
+import Node, { findNode } from '../node';
+import simulationArea from '../simulationArea';
+import {
+    correctWidth, lineTo, moveTo, arc,
+} from '../canvasApi';
+import { changeInputSize } from '../modules';
+/**
+ * @class
+ * AndGate
+ * @extends CircuitElement
+ * @param {number} x - x coordinate of And Gate.
+ * @param {number} y - y coordinate of And Gate.
+ * @param {Scope=} scope - Cirucit on which and gate is drawn
+ * @param {string=} dir - direction of And Gate
+ * @param {number=} inputLength - number of input nodes
+ * @param {number=} bitWidth - bit width per node.
+ * @category modules
+ */
+export default class AndGate extends CircuitElement {
+    constructor(x, y, scope = globalScope, dir = 'RIGHT', inputLength = 2, bitWidth = 1) {
+        /**
+         * super call
+         */
+        super(x, y, scope, dir, bitWidth);
+        /* this is done in this.baseSetup() now
+        this.scope['AndGate'].push(this);
+        */
+        this.rectangleObject = false;
+        this.setDimensions(15, 20);
+        this.inp = [];
+        this.inputSize = inputLength;
+
+        // variable inputLength , node creation
+        if (inputLength % 2 === 1) {
+            for (let i = 0; i < inputLength / 2 - 1; i++) {
+                const a = new Node(-10, -10 * (i + 1), 0, this);
+                this.inp.push(a);
+            }
+            let a = new Node(-10, 0, 0, this);
+            this.inp.push(a);
+            for (let i = inputLength / 2 + 1; i < inputLength; i++) {
+                a = new Node(-10, 10 * (i + 1 - inputLength / 2 - 1), 0, this);
+                this.inp.push(a);
+            }
+        } else {
+            for (let i = 0; i < inputLength / 2; i++) {
+                const a = new Node(-10, -10 * (i + 1), 0, this);
+                this.inp.push(a);
+            }
+            for (let i = inputLength / 2; i < inputLength; i++) {
+                const a = new Node(-10, 10 * (i + 1 - inputLength / 2), 0, this);
+                this.inp.push(a);
+            }
+        }
+
+        this.output1 = new Node(20, 0, 1, this);
+    }
+
+    /**
+     * @memberof AndGate
+     * fn to create save Json Data of object
+     * @return {JSON}
+     */
+    customSave() {
+        const data = {
+            constructorParamaters: [this.direction, this.inputSize, this.bitWidth],
+            nodes: {
+                inp: this.inp.map(findNode),
+                output1: findNode(this.output1),
+            },
+
+        };
+        return data;
+    }
+
+    /**
+     * @memberof AndGate
+     * resolve output values based on inputData
+     */
+    resolve() {
+        let result = this.inp[0].value || 0;
+        if (this.isResolvable() === false) {
+            return;
+        }
+        for (let i = 1; i < this.inputSize; i++) result &= ((this.inp[i].value) || 0);
+        this.output1.value = result;
+        simulationArea.simulationQueue.add(this.output1);
+    }
+
+    /**
+     * @memberof AndGate
+     * function to draw And Gate
+     */
+    customDraw() {
+        const ctx = simulationArea.context;
+
+        ctx.beginPath();
+        ctx.lineWidth = correctWidth(3);
+        ctx.strokeStyle = 'black'; // ("rgba(0,0,0,1)");
+        ctx.fillStyle = 'white';
+        const xx = this.x;
+        const yy = this.y;
+
+        moveTo(ctx, -10, -20, xx, yy, this.direction);
+        lineTo(ctx, 0, -20, xx, yy, this.direction);
+        arc(ctx, 0, 0, 20, (-Math.PI / 2), (Math.PI / 2), xx, yy, this.direction);
+        lineTo(ctx, -10, 20, xx, yy, this.direction);
+        lineTo(ctx, -10, -20, xx, yy, this.direction);
+        ctx.closePath();
+
+        if ((this.hover && !simulationArea.shiftDown) || simulationArea.lastSelected === this || simulationArea.multipleObjectSelections.contains(this)) ctx.fillStyle = 'rgba(255, 255, 32,0.8)';
+        ctx.fill();
+        ctx.stroke();
+    }
+}
+
+/**
+ * @memberof AndGate
+ * Help Tip
+ * @type {string}
+ * @category modules
+ */
+AndGate.prototype.tooltipText = 'And Gate Tooltip : Implements logical conjunction';
+
+/**
+ * @memberof AndGate
+ * @type {boolean}
+ * @category modules
+ */
+AndGate.prototype.alwaysResolve = true;
+
+/**
+ * @memberof AndGate
+ * @type {string}
+ * @category modules
+ */
+AndGate.prototype.verilogType = 'and';
+
+/**
+ * @memberof AndGate
+ * function to change input nodes of the gate
+ * @category modules
+ */
+AndGate.prototype.changeInputSize = changeInputSize;
+AndGate.prototype.helplink = 'https://docs.circuitverse.org/#/gates?id=and-gate';
+AndGate.prototype.objectType = 'AndGate';
diff --git a/src/modules/Arrow.js b/src/modules/Arrow.js
new file mode 100755
index 0000000..d835064
--- /dev/null
+++ b/src/modules/Arrow.js
@@ -0,0 +1,78 @@
+import CircuitElement from '../circuitElement';
+import Node, { findNode } from '../node';
+import simulationArea from '../simulationArea';
+import {
+    correctWidth, lineTo, moveTo,
+} from '../canvasApi';
+
+/**
+ * @class
+ * Arrow
+ * @extends CircuitElement
+ * @param {number} x - x coordinate of element.
+ * @param {number} y - y coordinate of element.
+ * @param {Scope=} scope - Cirucit on which element is drawn
+ * @param {string=} dir - direction of element
+ * @category modules
+ */
+export default class Arrow extends CircuitElement {
+    constructor(x, y, scope = globalScope, dir = 'RIGHT') {
+        super(x, y, scope, dir, 8);
+        /* this is done in this.baseSetup() now
+        this.scope['Arrow'].push(this);
+        */
+        this.rectangleObject = false;
+        this.fixedBitWidth = true;
+        this.setDimensions(30, 20);
+    }
+
+    /**
+     * @memberof Arrow
+     * fn to create save Json Data of object
+     * @return {JSON}
+     */
+    customSave() {
+        const data = {
+            constructorParamaters: [this.direction],
+        };
+        return data;
+    }
+
+    /**
+     * @memberof Arrow
+     * function to draw element
+     */
+    customDraw() {
+        const ctx = simulationArea.context;
+        ctx.lineWidth = correctWidth(3);
+        const xx = this.x;
+        const yy = this.y;
+        ctx.strokeStyle = 'red';
+        ctx.fillStyle = 'white';
+
+        ctx.beginPath();
+
+        moveTo(ctx, -30, -3, xx, yy, this.direction);
+        lineTo(ctx, 10, -3, xx, yy, this.direction);
+        lineTo(ctx, 10, -15, xx, yy, this.direction);
+        lineTo(ctx, 30, 0, xx, yy, this.direction);
+        lineTo(ctx, 10, 15, xx, yy, this.direction);
+        lineTo(ctx, 10, 3, xx, yy, this.direction);
+        lineTo(ctx, -30, 3, xx, yy, this.direction);
+        ctx.closePath();
+        ctx.stroke();
+        if ((this.hover && !simulationArea.shiftDown) || simulationArea.lastSelected === this || simulationArea.multipleObjectSelections.contains(this)) ctx.fillStyle = 'rgba(255, 255, 32,0.8)';
+        ctx.fill();
+    }
+}
+
+/**
+ * @memberof Arrow
+ * Help Tip
+ * @type {string}
+ * @category modules
+ */
+Arrow.prototype.tooltipText = 'Arrow ToolTip : Arrow Selected.';
+Arrow.prototype.propagationDelayFixed = true;
+Arrow.prototype.helplink = 'https://docs.circuitverse.org/#/annotation?id=arrow';
+Arrow.prototype.objectType = 'Arrow';
diff --git a/src/modules/BitSelector.js b/src/modules/BitSelector.js
new file mode 100755
index 0000000..02e1b42
--- /dev/null
+++ b/src/modules/BitSelector.js
@@ -0,0 +1,139 @@
+import CircuitElement from '../circuitElement';
+import Node, { findNode, extractBits } from '../node';
+import simulationArea from '../simulationArea';
+import { correctWidth, rect, fillText } from '../canvasApi';
+/**
+ * @class
+ * BitSelector
+ * @extends CircuitElement
+ * @param {number} x - x coordinate of element.
+ * @param {number} y - y coordinate of element.
+ * @param {Scope=} scope - Cirucit on which element is drawn
+ * @param {string=} dir - direction of element
+ * @param {number=} bitWidth - bit width per node.
+ * @param {number=} selectorBitWidth - 1 by default
+ * @category modules
+ */
+export default class BitSelector extends CircuitElement {
+    constructor(
+        x,
+        y,
+        scope = globalScope,
+        dir = 'RIGHT',
+        bitWidth = 2,
+        selectorBitWidth = 1,
+    ) {
+        super(x, y, scope, dir, bitWidth);
+        /* this is done in this.baseSetup() now
+        this.scope['BitSelector'].push(this);
+        */
+        this.setDimensions(20, 20);
+        this.selectorBitWidth = selectorBitWidth || parseInt(prompt('Enter Selector bitWidth'), 10);
+        this.rectangleObject = false;
+        this.inp1 = new Node(-20, 0, 0, this, this.bitWidth, 'Input');
+        this.output1 = new Node(20, 0, 1, this, 1, 'Output');
+        this.bitSelectorInp = new Node(0, 20, 0, this, this.selectorBitWidth, 'Bit Selector');
+    }
+
+    /**
+     * @memberof BitSelector
+     * Function to change selector Bitwidth
+     * @param {size}
+     */
+    changeSelectorBitWidth(size) {
+        if (size === undefined || size < 1 || size > 32) return;
+        this.selectorBitWidth = size;
+        this.bitSelectorInp.bitWidth = size;
+    }
+
+    /**
+     * @memberof BitSelector
+     * fn to create save Json Data of object
+     * @return {JSON}
+     */
+    customSave() {
+        const data = {
+
+            nodes: {
+                inp1: findNode(this.inp1),
+                output1: findNode(this.output1),
+                bitSelectorInp: findNode(this.bitSelectorInp),
+            },
+            constructorParamaters: [this.direction, this.bitWidth, this.selectorBitWidth],
+        };
+        return data;
+    }
+
+    /**
+     * @memberof BitSelector
+     * function to change bitwidth of the element
+     * @param {number} bitWidth - new bitwidth
+     */
+    newBitWidth(bitWidth) {
+        this.inp1.bitWidth = bitWidth;
+        this.bitWidth = bitWidth;
+    }
+
+    /**
+     * @memberof BitSelector
+     * resolve output values based on inputData
+     */
+    resolve() {
+        this.output1.value = extractBits(this.inp1.value, this.bitSelectorInp.value + 1, this.bitSelectorInp.value + 1); // (this.inp1.value^(1<<this.bitSelectorInp.value))==(1<<this.bitSelectorInp.value);
+        simulationArea.simulationQueue.add(this.output1);
+    }
+
+    /**
+     * @memberof BitSelector
+     * function to draw element
+     */
+    customDraw() {
+        const ctx = simulationArea.context;
+        ctx.beginPath();
+        ctx.strokeStyle = ['blue', 'red'][(this.state === undefined) + 0];
+        ctx.fillStyle = 'white';
+        ctx.lineWidth = correctWidth(3);
+        const xx = this.x;
+        const yy = this.y;
+        rect(ctx, xx - 20, yy - 20, 40, 40);
+        if ((this.hover && !simulationArea.shiftDown) || simulationArea.lastSelected === this || simulationArea.multipleObjectSelections.contains(this)) ctx.fillStyle = 'rgba(255, 255, 32,0.8)';
+        ctx.fill();
+        ctx.stroke();
+
+        ctx.beginPath();
+        ctx.font = '20px Georgia';
+        ctx.fillStyle = 'green';
+        ctx.textAlign = 'center';
+        let bit;
+        if (this.bitSelectorInp.value === undefined) { bit = 'x'; } else { bit = this.bitSelectorInp.value; }
+
+        fillText(ctx, bit, xx, yy + 5);
+        ctx.fill();
+    }
+}
+
+/**
+ * @memberof BitSelector
+ * Help Tip
+ * @type {string}
+ * @category modules
+ */
+BitSelector.prototype.tooltipText = 'BitSelector ToolTip : Divides input bits into several equal-sized groups.';
+BitSelector.prototype.helplink = 'https://docs.circuitverse.org/#/decodersandplexers?id=bit-selector';
+
+/**
+ * @memberof BitSelector
+ * Mutable properties of the element
+ * @type {JSON}
+ * @category modules
+ */
+BitSelector.prototype.mutableProperties = {
+    selectorBitWidth: {
+        name: 'Selector Bit Width: ',
+        type: 'number',
+        max: '32',
+        min: '1',
+        func: 'changeSelectorBitWidth',
+    },
+};
+BitSelector.prototype.objectType = 'BitSelector';
diff --git a/src/modules/Buffer.js b/src/modules/Buffer.js
new file mode 100755
index 0000000..fad6a48
--- /dev/null
+++ b/src/modules/Buffer.js
@@ -0,0 +1,115 @@
+import CircuitElement from '../circuitElement';
+import Node, { findNode } from '../node';
+import simulationArea from '../simulationArea';
+import {
+    correctWidth, lineTo, moveTo, arc,
+} from '../canvasApi';
+/**
+ * @class
+ * Buffer
+ * @extends CircuitElement
+ * @param {number} x - x coordinate of element.
+ * @param {number} y - y coordinate of element.
+ * @param {Scope=} scope - Cirucit on which element is drawn
+ * @param {string=} dir - direction of element
+ * @param {number=} bitWidth - bit width per node.
+ * @category modules
+ */
+export default class Buffer extends CircuitElement {
+    constructor(x, y, scope = globalScope, dir = 'RIGHT', bitWidth = 1) {
+        super(x, y, scope, dir, bitWidth);
+        /* this is done in this.baseSetup() now
+        this.scope['Buffer'].push(this);
+        */
+        this.rectangleObject = false;
+        this.setDimensions(15, 15);
+        this.state = 0;
+        this.preState = 0;
+        this.inp1 = new Node(-10, 0, 0, this);
+        this.reset = new Node(0, 0, 0, this, 1, 'reset');
+        this.output1 = new Node(20, 0, 1, this);
+    }
+
+    /**
+     * @memberof Buffer
+     * fn to create save Json Data of object
+     * @return {JSON}
+     */
+    customSave() {
+        const data = {
+            constructorParamaters: [this.direction, this.bitWidth],
+            nodes: {
+                output1: findNode(this.output1),
+                inp1: findNode(this.inp1),
+                reset: findNode(this.reset),
+            },
+        };
+        return data;
+    }
+
+    /**
+     * @memberof Buffer
+     * function to change bitwidth of the element
+     * @param {number} bitWidth - new bitwidth
+     */
+    newBitWidth(bitWidth) {
+        this.inp1.bitWidth = bitWidth;
+        this.output1.bitWidth = bitWidth;
+        this.bitWidth = bitWidth;
+    }
+
+    /**
+     * @memberof Buffer
+     * Checks if the element is resolvable
+     * @return {boolean}
+     */
+    isResolvable() {
+        return true;
+    }
+
+    /**
+     * @memberof Buffer
+     * resolve output values based on inputData
+     */
+    resolve() {
+        if (this.reset.value === 1) {
+            this.state = this.preState;
+        }
+        if (this.inp1.value !== undefined) { this.state = this.inp1.value; }
+
+        this.output1.value = this.state;
+        simulationArea.simulationQueue.add(this.output1);
+    }
+
+    /**
+     * @memberof Buffer
+     * function to draw element
+     */
+    customDraw() {
+        const ctx = simulationArea.context;
+        ctx.strokeStyle = ('rgba(200,0,0,1)');
+        ctx.lineWidth = correctWidth(3);
+
+        const xx = this.x;
+        const yy = this.y;
+        ctx.beginPath();
+        ctx.fillStyle = 'white';
+        moveTo(ctx, -10, -15, xx, yy, this.direction);
+        lineTo(ctx, 20, 0, xx, yy, this.direction);
+        lineTo(ctx, -10, 15, xx, yy, this.direction);
+        ctx.closePath();
+        if ((this.hover && !simulationArea.shiftDown) || simulationArea.lastSelected === this || simulationArea.multipleObjectSelections.contains(this)) ctx.fillStyle = 'rgba(255, 255, 32,0.8)';
+        ctx.fill();
+        ctx.stroke();
+    }
+}
+
+/**
+ * @memberof Buffer
+ * Help Tip
+ * @type {string}
+ * @category modules
+ */
+Buffer.prototype.tooltipText = 'Buffer ToolTip : Isolate the input from the output.';
+Buffer.prototype.helplink = 'https://docs.circuitverse.org/#/miscellaneous?id=buffer';
+Buffer.prototype.objectType = 'Buffer';
diff --git a/src/modules/Button.js b/src/modules/Button.js
new file mode 100755
index 0000000..2302fc2
--- /dev/null
+++ b/src/modules/Button.js
@@ -0,0 +1,117 @@
+import CircuitElement from '../circuitElement';
+import Node, { findNode } from '../node';
+import simulationArea from '../simulationArea';
+import {
+    correctWidth, lineTo, moveTo, drawCircle2,
+} from '../canvasApi';
+
+/**
+ * @class
+ * Button
+ * @extends CircuitElement
+ * @param {number} x - x coordinate of element.
+ * @param {number} y - y coordinate of element.
+ * @param {Scope=} scope - Cirucit on which element is drawn
+ * @param {string=} dir - direction of element
+ * @category modules
+ */
+export default class Button extends CircuitElement {
+    constructor(x, y, scope = globalScope, dir = 'RIGHT') {
+        super(x, y, scope, dir, 1);
+        /* this is done in this.baseSetup() now
+        this.scope['Button'].push(this);
+        */
+        this.state = 0;
+        this.output1 = new Node(30, 0, 1, this);
+        this.wasClicked = false;
+        this.rectangleObject = false;
+        this.setDimensions(10, 10);
+    }
+
+    /**
+     * @memberof Button
+     * fn to create save Json Data of object
+     * @return {JSON}
+     */
+    customSave() {
+        const data = {
+            nodes: {
+                output1: findNode(this.output1),
+            },
+            values: {
+                state: this.state,
+            },
+            constructorParamaters: [this.direction, this.bitWidth],
+        };
+        return data;
+    }
+
+    /**
+     * @memberof Button
+     * resolve output values based on inputData
+     */
+    resolve() {
+        if (this.wasClicked) {
+            this.state = 1;
+            this.output1.value = this.state;
+        } else {
+            this.state = 0;
+            this.output1.value = this.state;
+        }
+        simulationArea.simulationQueue.add(this.output1);
+    }
+
+    /**
+     * @memberof Button
+     * function to draw element
+     */
+    customDraw() {
+        const ctx = simulationArea.context;
+        const xx = this.x;
+        const yy = this.y;
+        ctx.fillStyle = '#ddd';
+
+        ctx.strokeStyle = '#353535';
+        ctx.lineWidth = correctWidth(5);
+
+        ctx.beginPath();
+
+        moveTo(ctx, 10, 0, xx, yy, this.direction);
+        lineTo(ctx, 30, 0, xx, yy, this.direction);
+        ctx.stroke();
+
+        ctx.beginPath();
+
+        drawCircle2(ctx, 0, 0, 12, xx, yy, this.direction);
+        ctx.stroke();
+
+        if ((this.hover && !simulationArea.shiftDown) || simulationArea.lastSelected === this || simulationArea.multipleObjectSelections.contains(this)) { ctx.fillStyle = 'rgba(232, 13, 13,0.6)'; }
+
+        if (this.wasClicked) { ctx.fillStyle = 'rgba(232, 13, 13,0.8)'; }
+        ctx.fill();
+    }
+}
+
+/**
+ * @memberof Button
+ * Help Tip
+ * @type {string}
+ * @category modules
+ */
+Button.prototype.tooltipText = 'Button ToolTip: High(1) when pressed and Low(0) when released.';
+
+/**
+ * @memberof Button
+ * Help URL
+ * @type {string}
+ * @category modules
+ */
+Button.prototype.helplink = 'https://docs.circuitverse.org/#/inputElements?id=button';
+
+/**
+ * @memberof Button
+ * @type {number}
+ * @category modules
+ */
+Button.prototype.propagationDelay = 0;
+Button.prototype.objectType = 'Button';
diff --git a/src/modules/ConstantVal.js b/src/modules/ConstantVal.js
new file mode 100755
index 0000000..710eb11
--- /dev/null
+++ b/src/modules/ConstantVal.js
@@ -0,0 +1,179 @@
+import CircuitElement from '../circuitElement';
+import Node, { findNode } from '../node';
+import simulationArea from '../simulationArea';
+import {
+    correctWidth, rect2, fillText, oppositeDirection,
+} from '../canvasApi';
+
+
+function bin2dec(binString) {
+    return parseInt(binString, 2);
+}
+
+function dec2bin(dec, bitWidth = undefined) {
+    // only for positive nos
+    const bin = (dec).toString(2);
+    if (bitWidth == undefined) return bin;
+    return '0'.repeat(bitWidth - bin.length) + bin;
+}
+
+/**
+ * @class
+ * ConstantVal
+ * @extends CircuitElement
+ * @param {number} x - x coordinate of element.
+ * @param {number} y - y coordinate of element.
+ * @param {Scope=} scope - Cirucit on which element is drawn
+ * @param {string=} dir - direction of element
+ * @param {number=} bitWidth - bit width per node.
+ * @param {string=} state - The state of element
+ * @category modules
+ */
+export default class ConstantVal extends CircuitElement {
+    constructor(x, y, scope = globalScope, dir = 'RIGHT', bitWidth = 1, state = '0') {
+        // state = state || prompt('Enter value');
+        super(x, y, scope, dir, state.length);
+        /* this is done in this.baseSetup() now
+            this.scope['ConstantVal'].push(this);
+        */
+        this.state = state;
+        this.setDimensions(10 * this.state.length, 10);
+        this.bitWidth = bitWidth || this.state.length;
+        this.directionFixed = true;
+        this.orientationFixed = false;
+        this.rectangleObject = false;
+
+        this.output1 = new Node(this.bitWidth * 10, 0, 1, this);
+        this.wasClicked = false;
+        this.label = '';
+    }
+
+    generateVerilog() {
+        return `localparam [${this.bitWidth - 1}:0] ${this.verilogLabel}=${this.bitWidth}b'${this.state};`;
+    }
+
+    /**
+     * @memberof ConstantVal
+     * fn to create save Json Data of object
+     * @return {JSON}
+     */
+    customSave() {
+        const data = {
+            nodes: {
+                output1: findNode(this.output1),
+            },
+            constructorParamaters: [this.direction, this.bitWidth, this.state],
+        };
+        return data;
+    }
+
+    /**
+     * @memberof ConstantVal
+     * resolve output values based on inputData
+     */
+    resolve() {
+        this.output1.value = bin2dec(this.state);
+        simulationArea.simulationQueue.add(this.output1);
+    }
+
+    /**
+     * @memberof ConstantVal
+     * updates state using a prompt when dbl clicked
+     */
+    dblclick() {
+        this.state = prompt('Re enter the value') || '0';
+        this.newBitWidth(this.state.toString().length);
+        // console.log(this.state, this.bitWidth);
+    }
+
+    /**
+     * @memberof ConstantVal
+     * function to change bitwidth of the element
+     * @param {number} bitWidth - new bitwidth
+     */
+    newBitWidth(bitWidth) {
+        if (bitWidth > this.state.length) this.state = '0'.repeat(bitWidth - this.state.length) + this.state;
+        else if (bitWidth < this.state.length) this.state = this.state.slice(this.bitWidth - bitWidth);
+        this.bitWidth = bitWidth; // ||parseInt(prompt("Enter bitWidth"),10);
+        this.output1.bitWidth = bitWidth;
+        this.setDimensions(10 * this.bitWidth, 10);
+        if (this.direction === 'RIGHT') {
+            this.output1.x = 10 * this.bitWidth;
+            this.output1.leftx = 10 * this.bitWidth;
+        } else if (this.direction === 'LEFT') {
+            this.output1.x = -10 * this.bitWidth;
+            this.output1.leftx = 10 * this.bitWidth;
+        }
+    }
+
+    /**
+     * @memberof ConstantVal
+     * function to draw element
+     */
+    customDraw() {
+        const ctx = simulationArea.context;
+        ctx.beginPath();
+        ctx.strokeStyle = ('rgba(0,0,0,1)');
+        ctx.fillStyle = 'white';
+        ctx.lineWidth = correctWidth(1);
+        const xx = this.x;
+        const yy = this.y;
+
+        rect2(ctx, -10 * this.bitWidth, -10, 20 * this.bitWidth, 20, xx, yy, 'RIGHT');
+        if ((this.hover && !simulationArea.shiftDown) || simulationArea.lastSelected === this || simulationArea.multipleObjectSelections.contains(this)) ctx.fillStyle = 'rgba(255, 255, 32,0.8)';
+        ctx.fill();
+        ctx.stroke();
+
+        ctx.beginPath();
+        ctx.fillStyle = 'green';
+        ctx.textAlign = 'center';
+        const bin = this.state; // dec2bin(this.state,this.bitWidth);
+        for (let k = 0; k < this.bitWidth; k++) { fillText(ctx, bin[k], xx - 10 * this.bitWidth + 10 + (k) * 20, yy + 5); }
+        ctx.fill();
+    }
+
+    /**
+     * @memberof ConstantVal
+     * function to change direction of ConstantVal
+     * @param {string} dir - new direction
+     */
+    newDirection(dir) {
+        if (dir === this.direction) return;
+        this.direction = dir;
+        this.output1.refresh();
+        if (dir === 'RIGHT' || dir === 'LEFT') {
+            this.output1.leftx = 10 * this.bitWidth;
+            this.output1.lefty = 0;
+        } else {
+            this.output1.leftx = 10; // 10*this.bitWidth;
+            this.output1.lefty = 0;
+        }
+
+        this.output1.refresh();
+        this.labelDirection = oppositeDirection[this.direction];
+    }
+}
+
+/**
+ * @memberof ConstantVal
+ * Help Tip
+ * @type {string}
+ * @category modules
+ */
+ConstantVal.prototype.tooltipText = 'Constant ToolTip: Bits are fixed. Double click element to change the bits.';
+
+/**
+ * @memberof ConstantVal
+ * Help URL
+ * @type {string}
+ * @category modules
+ */
+ConstantVal.prototype.helplink = 'https://docs.circuitverse.org/#/inputElements?id=constantval';
+
+/**
+ * @memberof ConstantVal
+ * @type {number}
+ * @category modules
+ */
+ConstantVal.prototype.propagationDelay = 0;
+ConstantVal.prototype.objectType = 'ConstantVal';
diff --git a/src/modules/ControlledInverter.js b/src/modules/ControlledInverter.js
new file mode 100755
index 0000000..0446229
--- /dev/null
+++ b/src/modules/ControlledInverter.js
@@ -0,0 +1,111 @@
+import CircuitElement from '../circuitElement';
+import Node, { findNode } from '../node';
+import simulationArea from '../simulationArea';
+import {
+    correctWidth, lineTo, moveTo, drawCircle2,
+} from '../canvasApi';
+import { changeInputSize } from '../modules';
+/**
+ * @class
+ * ControlledInverter
+ * @extends CircuitElement
+ * @param {number} x - x coordinate of element.
+ * @param {number} y - y coordinate of element.
+ * @param {Scope=} scope - Cirucit on which element is drawn
+ * @param {string=} dir - direction of element
+ * @param {number=} bitWidth - bit width per node.
+ * @category modules
+ */
+export default class ControlledInverter extends CircuitElement {
+    constructor(x, y, scope = globalScope, dir = 'RIGHT', bitWidth = 1) {
+        super(x, y, scope, dir, bitWidth);
+        /* this is done in this.baseSetup() now
+        this.scope['ControlledInverter'].push(this);
+        */
+        this.rectangleObject = false;
+        this.setDimensions(15, 15);
+
+        this.inp1 = new Node(-10, 0, 0, this);
+        this.output1 = new Node(30, 0, 1, this);
+        this.state = new Node(0, 0, 0, this, 1, 'Enable');
+    }
+
+    /**
+     * @memberof ControlledInverter
+     * fn to create save Json Data of object
+     * @return {JSON}
+     */
+    customSave() {
+        const data = {
+            constructorParamaters: [this.direction, this.bitWidth],
+            nodes: {
+                output1: findNode(this.output1),
+                inp1: findNode(this.inp1),
+                state: findNode(this.state),
+            },
+        };
+        return data;
+    }
+
+    /**
+     * @memberof ControlledInverter
+     * function to change bitwidth of the element
+     * @param {number} bitWidth - new bitwidth
+     */
+    newBitWidth(bitWidth) {
+        this.inp1.bitWidth = bitWidth;
+        this.output1.bitWidth = bitWidth;
+        this.bitWidth = bitWidth;
+    }
+
+    /**
+     * @memberof ControlledInverter
+     * resolve output values based on inputData
+     */
+    resolve() {
+        if (this.isResolvable() === false) {
+            return;
+        }
+        if (this.state.value === 1) {
+            this.output1.value = ((~this.inp1.value >>> 0) << (32 - this.bitWidth)) >>> (32 - this.bitWidth);
+            simulationArea.simulationQueue.add(this.output1);
+        }
+        if (this.state.value === 0) {
+            this.output1.value = undefined;
+        }
+    }
+
+    /**
+     * @memberof ControlledInverter
+     * function to draw element
+     */
+    customDraw() {
+        const ctx = simulationArea.context;
+        ctx.strokeStyle = ('rgba(0,0,0,1)');
+        ctx.lineWidth = correctWidth(3);
+
+        const xx = this.x;
+        const yy = this.y;
+        ctx.beginPath();
+        ctx.fillStyle = 'white';
+        moveTo(ctx, -10, -15, xx, yy, this.direction);
+        lineTo(ctx, 20, 0, xx, yy, this.direction);
+        lineTo(ctx, -10, 15, xx, yy, this.direction);
+        ctx.closePath();
+        if ((this.hover && !simulationArea.shiftDown) || simulationArea.lastSelected === this || simulationArea.multipleObjectSelections.contains(this)) ctx.fillStyle = 'rgba(255, 255, 32,0.8)';
+        ctx.fill();
+        ctx.stroke();
+        ctx.beginPath();
+        drawCircle2(ctx, 25, 0, 5, xx, yy, this.direction);
+        ctx.stroke();
+    }
+}
+
+/**
+ * @memberof ControlledInverter
+ * Help Tip
+ * @type {string}
+ * @category modules
+ */
+ControlledInverter.prototype.tooltipText = 'Controlled Inverter ToolTip : Controlled buffer and NOT gate.';
+ControlledInverter.prototype.objectType = 'ControlledInverter';
diff --git a/src/modules/Counter.js b/src/modules/Counter.js
new file mode 100644
index 0000000..d2e89c1
--- /dev/null
+++ b/src/modules/Counter.js
@@ -0,0 +1,122 @@
+import CircuitElement from '../circuitElement';
+import Node, { findNode } from '../node';
+import simulationArea from '../simulationArea';
+import { lineTo, moveTo, fillText } from '../canvasApi';
+
+/**
+ * @class
+ * Counter component.
+ * @extends CircuitElement
+ * @param {number} x - x coordinate of element.
+ * @param {number} y - y coordinate of element.
+ * @param {Scope=} scope - Cirucit on which element is drawn
+ * @param {number=} rows - number of rows
+ * @param {number=} cols - number of columns.
+ * Counts from zero to a particular maximum value, which is either
+ * specified by an input pin or determined by the Counter's bitWidth.
+ * The counter outputs its current value and a flag that indicates
+ * when the output value is zero and the clock is 1.
+ * The counter can be reset to zero at any point using the RESET pin.
+ * @category modules
+ */
+export default class Counter extends CircuitElement {
+    constructor(x, y, scope = globalScope, bitWidth = 8) {
+        super(x, y, scope, 'RIGHT', bitWidth);
+        /* this is done in this.baseSetup() now
+        this.scope['Counter'].push(this);
+        */
+        this.directionFixed = true;
+        this.rectangleObject = true;
+
+        this.setDimensions(20, 20);
+
+        this.maxValue = new Node(-20, -10, 0, this, this.bitWidth, 'MaxValue');
+        this.clock = new Node(-20, +10, 0, this, 1, 'Clock');
+        this.reset = new Node(0, 20, 0, this, 1, 'Reset');
+        this.output = new Node(20, -10, 1, this, this.bitWidth, 'Value');
+        this.zero = new Node(20, 10, 1, this, 1, 'Zero');
+
+        this.value = 0;
+        this.prevClockState = undefined;
+    }
+
+    customSave() {
+        return {
+            nodes: {
+                maxValue: findNode(this.maxValue),
+                clock: findNode(this.clock),
+                reset: findNode(this.reset),
+                output: findNode(this.output),
+                zero: findNode(this.zero),
+            },
+            constructorParamaters: [this.bitWidth],
+        };
+    }
+
+    newBitWidth(bitWidth) {
+        this.bitWidth = bitWidth;
+        this.maxValue.bitWidth = bitWidth;
+        this.output.bitWidth = bitWidth;
+    }
+
+    isResolvable() {
+        return true;
+    }
+
+    resolve() {
+        // Max value is either the value in the input pin or the max allowed by the bitWidth.
+        const maxValue = this.maxValue.value != undefined ? this.maxValue.value : (1 << this.bitWidth) - 1;
+        let outputValue = this.value;
+
+        // Increase value when clock is raised
+        if (this.clock.value != this.prevClockState && this.clock.value == 1) {
+            outputValue++;
+        }
+        this.prevClockState = this.clock.value;
+
+        // Limit to the effective maximum value; this also accounts for bitWidth changes.
+        outputValue %= (maxValue + 1);
+
+        // Reset to zero if RESET pin is on
+        if (this.reset.value == 1) {
+            outputValue = 0;
+        }
+
+        // Output the new value
+        this.value = outputValue;
+        if (this.output.value != outputValue) {
+            this.output.value = outputValue;
+            simulationArea.simulationQueue.add(this.output);
+        }
+
+        // Output the zero signal
+        const zeroValue = this.clock.value == 1 && outputValue == 0 ? 1 : 0;
+        if (this.zero.value != zeroValue) {
+            this.zero.value = zeroValue;
+            simulationArea.simulationQueue.add(this.zero);
+        }
+    }
+
+    customDraw() {
+        const ctx = simulationArea.context;
+        const xx = this.x;
+        const yy = this.y;
+
+        ctx.beginPath();
+        ctx.font = '20px Georgia';
+        ctx.fillStyle = 'green';
+        ctx.textAlign = 'center';
+        fillText(ctx, this.value.toString(16), this.x, this.y + 5);
+        ctx.fill();
+
+        ctx.beginPath();
+        moveTo(ctx, -20, 5, xx, yy, this.direction);
+        lineTo(ctx, -15, 10, xx, yy, this.direction);
+        lineTo(ctx, -20, 15, xx, yy, this.direction);
+        ctx.stroke();
+    }
+}
+
+Counter.prototype.tooltipText = 'Counter: a binary counter from zero to a given maximum value';
+Counter.prototype.helplink = 'https://docs.circuitverse.org/#/inputElements?id=counter'; Counter.prototype.objectType = 'Counter';
+Counter.prototype.objectType = 'Counter';
diff --git a/src/modules/Decoder.js b/src/modules/Decoder.js
new file mode 100755
index 0000000..3695924
--- /dev/null
+++ b/src/modules/Decoder.js
@@ -0,0 +1,158 @@
+import CircuitElement from '../circuitElement';
+import Node, { findNode } from '../node';
+import simulationArea from '../simulationArea';
+import {
+    correctWidth, lineTo, moveTo, rect, fillText,
+} from '../canvasApi';
+/**
+ * @class
+ * Decoder
+ * @extends CircuitElement
+ * @param {number} x - x coordinate of element.
+ * @param {number} y - y coordinate of element.
+ * @param {Scope=} scope - Cirucit on which element is drawn
+ * @param {string=} dir - direction of element
+ * @param {number=} bitWidth - bit width per node.
+ * @category modules
+ */
+export default class Decoder extends CircuitElement {
+    constructor(x, y, scope = globalScope, dir = 'LEFT', bitWidth = 1) {
+        super(x, y, scope, dir, bitWidth);
+        /* this is done in this.baseSetup() now
+        this.scope['Decoder'].push(this);
+        */
+        // this.controlSignalSize = controlSignalSize || parseInt(prompt("Enter control signal bitWidth"), 10);
+        this.outputsize = 1 << this.bitWidth;
+        this.xOff = 0;
+        this.yOff = 1;
+        if (this.bitWidth === 1) {
+            this.xOff = 10;
+        }
+        if (this.bitWidth <= 3) {
+            this.yOff = 2;
+        }
+
+        // this.changeControlSignalSize = function(size) {
+        //     if (size === undefined || size < 1 || size > 32) return;
+        //     if (this.controlSignalSize === size) return;
+        //     let obj = new window[this.objectType](this.x, this.y, this.scope, this.direction, this.bitWidth, size);
+        //     this.cleanDelete();
+        //     simulationArea.lastSelected = obj;
+        //     return obj;
+        // }
+        // this.mutableProperties = {
+        //     "controlSignalSize": {
+        //         name: "Control Signal Size",
+        //         type: "number",
+        //         max: "32",
+        //         min: "1",
+        //         func: "changeControlSignalSize",
+        //     },
+        // }
+        // eslint-disable-next-line no-shadow
+        this.newBitWidth = function (bitWidth) {
+            // this.bitWidth = bitWidth;
+            // for (let i = 0; i < this.inputSize; i++) {
+            //     this.outputs1[i].bitWidth = bitWidth
+            // }
+            // this.input.bitWidth = bitWidth;
+            if (bitWidth === undefined || bitWidth < 1 || bitWidth > 32) return;
+            if (this.bitWidth === bitWidth) return;
+            const obj = new Decoder(this.x, this.y, this.scope, this.direction, bitWidth);
+            this.cleanDelete();
+            simulationArea.lastSelected = obj;
+            return obj;
+        };
+
+        this.setDimensions(20 - this.xOff, this.yOff * 5 * (this.outputsize));
+        this.rectangleObject = false;
+        this.input = new Node(20 - this.xOff, 0, 0, this);
+
+        this.output1 = [];
+        for (let i = 0; i < this.outputsize; i++) {
+            const a = new Node(-20 + this.xOff, +this.yOff * 10 * (i - this.outputsize / 2) + 10, 1, this, 1);
+            this.output1.push(a);
+        }
+
+        // this.controlSignalInput = new Node(0,this.yOff * 10 * (this.outputsize / 2 - 1) +this.xOff + 10, 0, this, this.controlSignalSize,"Control Signal");
+    }
+
+    /**
+     * @memberof Decoder
+     * fn to create save Json Data of object
+     * @return {JSON}
+     */
+    customSave() {
+        const data = {
+            constructorParamaters: [this.direction, this.bitWidth],
+            nodes: {
+                output1: this.output1.map(findNode),
+                input: findNode(this.input),
+            },
+        };
+        return data;
+    }
+
+    /**
+     * @memberof Decoder
+     * resolve output values based on inputData
+     */
+    resolve() {
+        for (let i = 0; i < this.output1.length; i++) { this.output1[i].value = 0; }
+        this.output1[this.input.value].value = 1;
+        for (let i = 0; i < this.output1.length; i++) { simulationArea.simulationQueue.add(this.output1[i]); }
+    }
+
+    /**
+     * @memberof Decoder
+     * function to draw element
+     */
+    customDraw() {
+        const ctx = simulationArea.context;
+
+        const xx = this.x;
+        const yy = this.y;
+
+        // ctx.beginPath();
+        // moveTo(ctx, 0,this.yOff * 10 * (this.outputsize / 2 - 1) + 10 + 0.5 *this.xOff, xx, yy, this.direction);
+        // lineTo(ctx, 0,this.yOff * 5 * (this.outputsize - 1) +this.xOff, xx, yy, this.direction);
+        // ctx.stroke();
+
+        ctx.beginPath();
+        ctx.strokeStyle = ('rgba(0,0,0,1)');
+        ctx.lineWidth = correctWidth(4);
+        ctx.fillStyle = 'white';
+        moveTo(ctx, -20 + this.xOff, -this.yOff * 10 * (this.outputsize / 2), xx, yy, this.direction);
+        lineTo(ctx, -20 + this.xOff, 20 + this.yOff * 10 * (this.outputsize / 2 - 1), xx, yy, this.direction);
+        lineTo(ctx, 20 - this.xOff, +this.yOff * 10 * (this.outputsize / 2 - 1) + this.xOff, xx, yy, this.direction);
+        lineTo(ctx, 20 - this.xOff, -this.yOff * 10 * (this.outputsize / 2) - this.xOff + 20, xx, yy, this.direction);
+
+        ctx.closePath();
+        if ((this.hover && !simulationArea.shiftDown) || simulationArea.lastSelected === this || simulationArea.multipleObjectSelections.contains(this)) { ctx.fillStyle = 'rgba(255, 255, 32,0.8)'; }
+        ctx.fill();
+        ctx.stroke();
+
+        ctx.beginPath();
+        ctx.fillStyle = 'black';
+        ctx.textAlign = 'center';
+        // [xFill,yFill] = rotate(xx + this.output1[i].x - 7, yy + this.output1[i].y + 2);
+        // //console.log([xFill,yFill])
+        for (let i = 0; i < this.outputsize; i++) {
+            if (this.direction === 'LEFT') fillText(ctx, String(i), xx + this.output1[i].x - 7, yy + this.output1[i].y + 2, 10);
+            else if (this.direction === 'RIGHT') fillText(ctx, String(i), xx + this.output1[i].x + 7, yy + this.output1[i].y + 2, 10);
+            else if (this.direction === 'UP') fillText(ctx, String(i), xx + this.output1[i].x, yy + this.output1[i].y - 5, 10);
+            else fillText(ctx, String(i), xx + this.output1[i].x, yy + this.output1[i].y + 10, 10);
+        }
+        ctx.fill();
+    }
+}
+
+/**
+ * @memberof Decoder
+ * Help Tip
+ * @type {string}
+ * @category modules
+ */
+Decoder.prototype.tooltipText = 'Decoder ToolTip : Converts coded inputs into coded outputs.';
+Decoder.prototype.helplink = 'https://docs.circuitverse.org/#/decodersandplexers?id=decoder';
+Decoder.prototype.objectType = 'Decoder';
diff --git a/src/modules/Demultiplexer.js b/src/modules/Demultiplexer.js
new file mode 100755
index 0000000..732ee40
--- /dev/null
+++ b/src/modules/Demultiplexer.js
@@ -0,0 +1,163 @@
+import CircuitElement from '../circuitElement';
+import Node, { findNode } from '../node';
+import simulationArea from '../simulationArea';
+import {
+    correctWidth, lineTo, moveTo, fillText,
+} from '../canvasApi';
+/**
+ * @class
+ * Demultiplexer
+ * @extends CircuitElement
+ * @param {number} x - x coordinate of element.
+ * @param {number} y - y coordinate of element.
+ * @param {Scope=} scope - Cirucit on which element is drawn
+ * @param {string=} dir - direction of element
+ * @param {number=} bitWidth - bit width per node.
+ * @param {number=} controlSignalSize - 1 by default
+ * @category modules
+ */
+export default class Demultiplexer extends CircuitElement {
+    constructor(
+        x,
+        y,
+        scope = globalScope,
+        dir = 'LEFT',
+        bitWidth = 1,
+        controlSignalSize = 1,
+    ) {
+        super(x, y, scope, dir, bitWidth);
+        /* this is done in this.baseSetup() now
+        this.scope['Demultiplexer'].push(this);
+        */
+        this.controlSignalSize = controlSignalSize || parseInt(prompt('Enter control signal bitWidth'), 10);
+        this.outputsize = 1 << this.controlSignalSize;
+        this.xOff = 0;
+        this.yOff = 1;
+        if (this.controlSignalSize === 1) {
+            this.xOff = 10;
+        }
+        if (this.controlSignalSize <= 3) {
+            this.yOff = 2;
+        }
+
+        this.changeControlSignalSize = function (size) {
+            if (size === undefined || size < 1 || size > 32) return;
+            if (this.controlSignalSize === size) return;
+            const obj = new Demultiplexer(this.x, this.y, this.scope, this.direction, this.bitWidth, size);
+            this.cleanDelete();
+            simulationArea.lastSelected = obj;
+            return obj;
+        };
+        this.mutableProperties = {
+            controlSignalSize: {
+                name: 'Control Signal Size',
+                type: 'number',
+                max: '32',
+                min: '1',
+                func: 'changeControlSignalSize',
+            },
+        };
+        // eslint-disable-next-line no-shadow
+        this.newBitWidth = function (bitWidth) {
+            this.bitWidth = bitWidth;
+            for (let i = 0; i < this.outputsize; i++) {
+                this.output1[i].bitWidth = bitWidth;
+            }
+            this.input.bitWidth = bitWidth;
+        };
+
+        this.setDimensions(20 - this.xOff, this.yOff * 5 * (this.outputsize));
+        this.rectangleObject = false;
+        this.input = new Node(20 - this.xOff, 0, 0, this);
+
+        this.output1 = [];
+        for (let i = 0; i < this.outputsize; i++) {
+            const a = new Node(-20 + this.xOff, +this.yOff * 10 * (i - this.outputsize / 2) + 10, 1, this);
+            this.output1.push(a);
+        }
+
+        this.controlSignalInput = new Node(0, this.yOff * 10 * (this.outputsize / 2 - 1) + this.xOff + 10, 0, this, this.controlSignalSize, 'Control Signal');
+    }
+
+    /**
+     * @memberof Demultiplexer
+     * fn to create save Json Data of object
+     * @return {JSON}
+     */
+    customSave() {
+        const data = {
+            constructorParamaters: [this.direction, this.bitWidth, this.controlSignalSize],
+            nodes: {
+                output1: this.output1.map(findNode),
+                input: findNode(this.input),
+                controlSignalInput: findNode(this.controlSignalInput),
+            },
+        };
+        return data;
+    }
+
+    /**
+     * @memberof Demultiplexer
+     * resolve output values based on inputData
+     */
+    resolve() {
+        for (let i = 0; i < this.output1.length; i++) { this.output1[i].value = 0; }
+
+        this.output1[this.controlSignalInput.value].value = this.input.value;
+
+        for (let i = 0; i < this.output1.length; i++) { simulationArea.simulationQueue.add(this.output1[i]); }
+    }
+
+    /**
+     * @memberof Demultiplexer
+     * function to draw element
+     */
+    customDraw() {
+        const ctx = simulationArea.context;
+
+        const xx = this.x;
+        const yy = this.y;
+
+        ctx.beginPath();
+        moveTo(ctx, 0, this.yOff * 10 * (this.outputsize / 2 - 1) + 10 + 0.5 * this.xOff, xx, yy, this.direction);
+        lineTo(ctx, 0, this.yOff * 5 * (this.outputsize - 1) + this.xOff, xx, yy, this.direction);
+        ctx.stroke();
+
+        ctx.beginPath();
+        ctx.strokeStyle = ('rgba(0,0,0,1)');
+        ctx.lineWidth = correctWidth(4);
+        ctx.fillStyle = 'white';
+        moveTo(ctx, -20 + this.xOff, -this.yOff * 10 * (this.outputsize / 2), xx, yy, this.direction);
+        lineTo(ctx, -20 + this.xOff, 20 + this.yOff * 10 * (this.outputsize / 2 - 1), xx, yy, this.direction);
+        lineTo(ctx, 20 - this.xOff, +this.yOff * 10 * (this.outputsize / 2 - 1) + this.xOff, xx, yy, this.direction);
+        lineTo(ctx, 20 - this.xOff, -this.yOff * 10 * (this.outputsize / 2) - this.xOff + 20, xx, yy, this.direction);
+
+        ctx.closePath();
+        if ((this.hover && !simulationArea.shiftDown) || simulationArea.lastSelected === this || simulationArea.multipleObjectSelections.contains(this)) { ctx.fillStyle = 'rgba(255, 255, 32,0.8)'; }
+        ctx.fill();
+        ctx.stroke();
+
+        ctx.beginPath();
+        ctx.fillStyle = 'black';
+        ctx.textAlign = 'center';
+        // [xFill,yFill] = rotate(xx + this.output1[i].x - 7, yy + this.output1[i].y + 2);
+        // //console.log([xFill,yFill])
+        for (let i = 0; i < this.outputsize; i++) {
+            if (this.direction === 'LEFT') fillText(ctx, String(i), xx + this.output1[i].x - 7, yy + this.output1[i].y + 2, 10);
+            else if (this.direction === 'RIGHT') fillText(ctx, String(i), xx + this.output1[i].x + 7, yy + this.output1[i].y + 2, 10);
+            else if (this.direction === 'UP') fillText(ctx, String(i), xx + this.output1[i].x, yy + this.output1[i].y - 5, 10);
+            else fillText(ctx, String(i), xx + this.output1[i].x, yy + this.output1[i].y + 10, 10);
+        }
+        ctx.fill();
+    }
+}
+
+/**
+ * @memberof Demultiplexer
+ * Help Tip
+ * @type {string}
+ * @category modules
+ */
+Demultiplexer.prototype.tooltipText = 'DeMultiplexer ToolTip : Multiple outputs and a single line input.';
+Demultiplexer.prototype.helplink = 'https://docs.circuitverse.org/#/decodersandplexers?id=demultiplexer';
+Demultiplexer.prototype.objectType = 'Demultiplexer';
diff --git a/src/modules/DigitalLed.js b/src/modules/DigitalLed.js
new file mode 100755
index 0000000..fa6cc71
--- /dev/null
+++ b/src/modules/DigitalLed.js
@@ -0,0 +1,128 @@
+import CircuitElement from '../circuitElement';
+import Node, { findNode } from '../node';
+import simulationArea from '../simulationArea';
+import {
+    correctWidth, lineTo, moveTo, arc,
+} from '../canvasApi';
+import { changeInputSize } from '../modules';
+/**
+ * @class
+ * DigitalLed
+ * @extends CircuitElement
+ * @param {number} x - x coordinate of element.
+ * @param {number} y - y coordinate of element.
+ * @param {Scope=} scope - Cirucit on which element is drawn
+ * @param {string=} color - color of led
+ * @category modules
+ */
+export default class DigitalLed extends CircuitElement {
+    constructor(x, y, scope = globalScope, color = 'Red') {
+        // Calling base class constructor
+
+        super(x, y, scope, 'UP', 1);
+        /* this is done in this.baseSetup() now
+        this.scope['DigitalLed'].push(this);
+        */
+        this.rectangleObject = false;
+        this.setDimensions(10, 20);
+        this.inp1 = new Node(-40, 0, 0, this, 1);
+        this.directionFixed = true;
+        this.fixedBitWidth = true;
+        this.color = color;
+        const temp = colorToRGBA(this.color);
+        this.actualColor = `rgba(${temp[0]},${temp[1]},${temp[2]},${0.8})`;
+    }
+
+    /**
+     * @memberof DigitalLed
+     * fn to create save Json Data of object
+     * @return {JSON}
+     */
+    customSave() {
+        const data = {
+            constructorParamaters: [this.color],
+            nodes: {
+                inp1: findNode(this.inp1),
+            },
+        };
+        return data;
+    }
+
+    /**
+     * @memberof DigitalLed
+     * function to change color of the led
+     */
+    changeColor(value) {
+        if (validColor(value)) {
+            this.color = value;
+            const temp = colorToRGBA(this.color);
+            this.actualColor = `rgba(${temp[0]},${temp[1]},${temp[2]},${0.8})`;
+        }
+    }
+
+    /**
+     * @memberof DigitalLed
+     * function to draw element
+     */
+    customDraw() {
+        const ctx = simulationArea.context;
+
+        const xx = this.x;
+        const yy = this.y;
+
+        ctx.strokeStyle = '#e3e4e5';
+        ctx.lineWidth = correctWidth(3);
+        ctx.beginPath();
+        moveTo(ctx, -20, 0, xx, yy, this.direction);
+        lineTo(ctx, -40, 0, xx, yy, this.direction);
+        ctx.stroke();
+
+        ctx.strokeStyle = '#d3d4d5';
+        ctx.fillStyle = ['rgba(227,228,229,0.8)', this.actualColor][this.inp1.value || 0];
+        ctx.lineWidth = correctWidth(1);
+
+        ctx.beginPath();
+
+        moveTo(ctx, -15, -9, xx, yy, this.direction);
+        lineTo(ctx, 0, -9, xx, yy, this.direction);
+        arc(ctx, 0, 0, 9, (-Math.PI / 2), (Math.PI / 2), xx, yy, this.direction);
+        lineTo(ctx, -15, 9, xx, yy, this.direction);
+        lineTo(ctx, -18, 12, xx, yy, this.direction);
+        arc(ctx, 0, 0, Math.sqrt(468), ((Math.PI / 2) + Math.acos(12 / Math.sqrt(468))), ((-Math.PI / 2) - Math.asin(18 / Math.sqrt(468))), xx, yy, this.direction);
+        lineTo(ctx, -15, -9, xx, yy, this.direction);
+        ctx.stroke();
+        if ((this.hover && !simulationArea.shiftDown) || simulationArea.lastSelected === this || simulationArea.multipleObjectSelections.contains(this)) ctx.fillStyle = 'rgba(255, 255, 32,0.8)';
+        ctx.fill();
+    }
+}
+
+/**
+ * @memberof DigitalLed
+ * Help Tip
+ * @type {string}
+ * @category modules
+ */
+DigitalLed.prototype.tooltipText = 'Digital Led ToolTip: Digital LED glows high when input is High(1).';
+
+/**
+ * @memberof DigitalLed
+ * Help URL
+ * @type {string}
+ * @category modules
+ */
+DigitalLed.prototype.helplink = 'https://docs.circuitverse.org/#/outputs?id=digital-led';
+
+/**
+ * @memberof DigitalLed
+ * Mutable properties of the element
+ * @type {JSON}
+ * @category modules
+ */
+DigitalLed.prototype.mutableProperties = {
+    color: {
+        name: 'Color: ',
+        type: 'text',
+        func: 'changeColor',
+    },
+};
+DigitalLed.prototype.objectType = 'DigitalLed';
diff --git a/src/modules/Flag.js b/src/modules/Flag.js
new file mode 100755
index 0000000..d8e558d
--- /dev/null
+++ b/src/modules/Flag.js
@@ -0,0 +1,187 @@
+import CircuitElement from '../circuitElement';
+import Node, { findNode } from '../node';
+import simulationArea from '../simulationArea';
+import {
+    correctWidth, rect2, fillText,
+} from '../canvasApi';
+import plotArea from '../plotArea';
+/**
+ * @class
+ * Flag
+ * @extends CircuitElement
+ * @param {number} x - x coordinate of element.
+ * @param {number} y - y coordinate of element.
+ * @param {Scope=} scope - Cirucit on which element is drawn
+ * @param {string=} dir - direction of element
+ * @param {number=} bitWidth - bit width per node.
+ * @param {string} identifier - id
+ * @category modules
+ */
+export default class Flag extends CircuitElement {
+    constructor(x, y, scope = globalScope, dir = 'RIGHT', bitWidth = 1, identifier) {
+        super(x, y, scope, dir, bitWidth);
+        /* this is done in this.baseSetup() now
+        this.scope['Flag'].push(this);
+        */
+        this.setWidth(60);
+        this.setHeight(20);
+        this.rectangleObject = false;
+        this.directionFixed = true;
+        this.orientationFixed = false;
+        this.identifier = identifier || (`F${this.scope.Flag.length}`);
+        this.plotValues = [];
+
+        this.xSize = 10;
+
+        this.inp1 = new Node(40, 0, 0, this);
+    }
+
+    /**
+     * @memberof Flag
+     * funtion to Set plot values
+     * @type {string}
+     */
+    setPlotValue() {
+        const time = plotArea.stopWatch.ElapsedMilliseconds;
+
+        // //console.log("DEB:",time);
+        if (this.plotValues.length && this.plotValues[this.plotValues.length - 1][0] === time) { this.plotValues.pop(); }
+
+        if (this.plotValues.length === 0) {
+            this.plotValues.push([time, this.inp1.value]);
+            return;
+        }
+
+        if (this.plotValues[this.plotValues.length - 1][1] === this.inp1.value) { return; }
+        this.plotValues.push([time, this.inp1.value]);
+    }
+
+    /**
+     * @memberof Flag
+     * fn to create save Json Data of object
+     * @return {JSON}
+     */
+    customSave() {
+        const data = {
+            constructorParamaters: [this.direction, this.bitWidth],
+            nodes: {
+                inp1: findNode(this.inp1),
+            },
+            values: {
+                identifier: this.identifier,
+            },
+        };
+        return data;
+    }
+
+    /**
+     * @memberof Flag
+     * set the flag id
+     * @param {number} id - identifier for flag
+     */
+    setIdentifier(id = '') {
+        if (id.length === 0) return;
+        this.identifier = id;
+        const len = this.identifier.length;
+        if (len === 1) this.xSize = 20;
+        else if (len > 1 && len < 4) this.xSize = 10;
+        else this.xSize = 0;
+    }
+
+    /**
+     * @memberof Flag
+     * function to draw element
+     */
+    customDraw() {
+        const ctx = simulationArea.context;
+        ctx.beginPath();
+        ctx.strokeStyle = 'grey';
+        ctx.fillStyle = '#fcfcfc';
+        ctx.lineWidth = correctWidth(1);
+        const xx = this.x;
+        const yy = this.y;
+
+        rect2(ctx, -50 + this.xSize, -20, 100 - 2 * this.xSize, 40, xx, yy, 'RIGHT');
+        if ((this.hover && !simulationArea.shiftDown) || simulationArea.lastSelected === this || simulationArea.multipleObjectSelections.contains(this)) ctx.fillStyle = 'rgba(255, 255, 32,0.8)';
+        ctx.fill();
+        ctx.stroke();
+
+        ctx.font = '14px Georgia';
+        this.xOff = ctx.measureText(this.identifier).width;
+
+        ctx.beginPath();
+        rect2(ctx, -40 + this.xSize, -12, this.xOff + 10, 25, xx, yy, 'RIGHT');
+        ctx.fillStyle = '#eee';
+        ctx.strokeStyle = '#ccc';
+        ctx.fill();
+        ctx.stroke();
+
+        ctx.beginPath();
+        ctx.textAlign = 'center';
+        ctx.fillStyle = 'black';
+        fillText(ctx, this.identifier, xx - 35 + this.xOff / 2 + this.xSize, yy + 5, 14);
+        ctx.fill();
+
+        ctx.beginPath();
+        ctx.font = '30px Georgia';
+        ctx.textAlign = 'center';
+        ctx.fillStyle = ['blue', 'red'][+(this.inp1.value === undefined)];
+        if (this.inp1.value !== undefined) { fillText(ctx, this.inp1.value.toString(16), xx + 35 - this.xSize, yy + 8, 25); } else { fillText(ctx, 'x', xx + 35 - this.xSize, yy + 8, 25); }
+        ctx.fill();
+    }
+
+    /**
+     * @memberof Flag
+     * function to change direction of Flag
+     * @param {string} dir - new direction
+     */
+    newDirection(dir) {
+        if (dir === this.direction) return;
+        this.direction = dir;
+        this.inp1.refresh();
+        if (dir === 'RIGHT' || dir === 'LEFT') {
+            this.inp1.leftx = 50 - this.xSize;
+        } else if (dir === 'UP') {
+            this.inp1.leftx = 20;
+        } else {
+            this.inp1.leftx = 20;
+        }
+        // if(this.direction=="LEFT" || this.direction=="RIGHT") this.inp1.leftx=50-this.xSize;
+        //     this.inp1.refresh();
+
+        this.inp1.refresh();
+    }
+}
+
+/**
+ * @memberof Flag
+ * Help Tip
+ * @type {string}
+ * @category modules
+ */
+Flag.prototype.tooltipText = 'FLag ToolTip: Use this for debugging and plotting.';
+Flag.prototype.helplink = 'https://docs.circuitverse.org/#/timing_diagrams?id=using-flags';
+
+/**
+ * @memberof Flag
+ * Help URL
+ * @type {string}
+ * @category modules
+ */
+Flag.prototype.helplink = 'https://docs.circuitverse.org/#/miscellaneous?id=tunnel';
+
+/**
+ * @memberof Flag
+ * Mutable properties of the element
+ * @type {JSON}
+ * @category modules
+ */
+Flag.prototype.mutableProperties = {
+    identifier: {
+        name: 'Debug Flag identifier',
+        type: 'text',
+        maxlength: '5',
+        func: 'setIdentifier',
+    },
+};
+Flag.prototype.objectType = 'Flag';
diff --git a/src/modules/Ground.js b/src/modules/Ground.js
new file mode 100755
index 0000000..8598a69
--- /dev/null
+++ b/src/modules/Ground.js
@@ -0,0 +1,120 @@
+import CircuitElement from '../circuitElement';
+import Node, { findNode } from '../node';
+import simulationArea from '../simulationArea';
+import {
+    correctWidth, lineTo, moveTo, arc,
+} from '../canvasApi';
+import { changeInputSize } from '../modules';
+/**
+ * @class
+ * Ground
+ * @extends CircuitElement
+ * @param {number} x - x coordinate of element.
+ * @param {number} y - y coordinate of element.
+ * @param {Scope=} scope - Cirucit on which element is drawn
+ * @param {number=} bitWidth - bit width per node.
+ * @category modules
+ */
+export default class Ground extends CircuitElement {
+    constructor(x, y, scope = globalScope, bitWidth = 1) {
+        super(x, y, scope, 'RIGHT', bitWidth);
+        /* this is done in this.baseSetup() now
+        this.scope['Ground'].push(this);
+        */
+        this.rectangleObject = false;
+        this.setDimensions(10, 10);
+        this.directionFixed = true;
+        this.output1 = new Node(0, -10, 1, this);
+    }
+
+    /**
+     * @memberof Ground
+     * fn to create save Json Data of object
+     * @return {JSON}
+     */
+    customSave() {
+        const data = {
+            nodes: {
+                output1: findNode(this.output1),
+            },
+            values: {
+                state: this.state,
+            },
+            constructorParamaters: [this.direction, this.bitWidth],
+        };
+        return data;
+    }
+
+    /**
+     * @memberof Ground
+     * resolve output values based on inputData
+     */
+    resolve() {
+        this.output1.value = 0;
+        simulationArea.simulationQueue.add(this.output1);
+    }
+
+    /**
+     * @memberof Ground
+     * fn to create save Json Data of object
+     * @return {JSON}
+     */
+    customSave() {
+        const data = {
+            nodes: {
+                output1: findNode(this.output1),
+            },
+            constructorParamaters: [this.bitWidth],
+        };
+        return data;
+    }
+
+    /**
+     * @memberof Ground
+     * function to draw element
+     */
+    customDraw() {
+        const ctx = simulationArea.context;
+
+        ctx.beginPath();
+        ctx.strokeStyle = ['black', 'brown'][((this.hover && !simulationArea.shiftDown) || simulationArea.lastSelected === this || simulationArea.multipleObjectSelections.contains(this)) + 0];
+        ctx.lineWidth = correctWidth(3);
+
+        const xx = this.x;
+        const yy = this.y;
+
+        moveTo(ctx, 0, -10, xx, yy, this.direction);
+        lineTo(ctx, 0, 0, xx, yy, this.direction);
+        moveTo(ctx, -10, 0, xx, yy, this.direction);
+        lineTo(ctx, 10, 0, xx, yy, this.direction);
+        moveTo(ctx, -6, 5, xx, yy, this.direction);
+        lineTo(ctx, 6, 5, xx, yy, this.direction);
+        moveTo(ctx, -2.5, 10, xx, yy, this.direction);
+        lineTo(ctx, 2.5, 10, xx, yy, this.direction);
+        ctx.stroke();
+    }
+}
+
+/**
+ * @memberof Ground
+ * Help Tip
+ * @type {string}
+ * @category modules
+ */
+Ground.prototype.tooltipText = 'Ground: All bits are Low(0).';
+
+/**
+ * @memberof Ground
+ * Help URL
+ * @type {string}
+ * @category modules
+ */
+Ground.prototype.helplink = 'https://docs.circuitverse.org/#/inputElements?id=ground';
+
+/**
+ * @memberof Ground
+ * @type {number}
+ * @category modules
+ */
+Ground.prototype.propagationDelay = 0;
+Ground.prototype.objectType = 'Ground';
diff --git a/src/modules/HexDisplay.js b/src/modules/HexDisplay.js
new file mode 100755
index 0000000..658d130
--- /dev/null
+++ b/src/modules/HexDisplay.js
@@ -0,0 +1,155 @@
+import CircuitElement from '../circuitElement';
+import Node, { findNode } from '../node';
+import simulationArea from '../simulationArea';
+import {
+    correctWidth, lineTo, moveTo, arc,
+} from '../canvasApi';
+import { changeInputSize } from '../modules';
+/**
+ * @class
+ * HexDisplay
+ * @extends CircuitElement
+ * @param {number} x - x coordinate of element.
+ * @param {number} y - y coordinate of element.
+ * @param {Scope=} scope - Cirucit on which element is drawn
+ * @category modules
+ */
+export default class HexDisplay extends CircuitElement {
+    constructor(x, y, scope = globalScope) {
+        super(x, y, scope, 'RIGHT', 4);
+        /* this is done in this.baseSetup() now
+        this.scope['HexDisplay'].push(this);
+        */
+        this.directionFixed = true;
+        this.fixedBitWidth = true;
+        this.setDimensions(30, 50);
+        this.inp = new Node(0, -50, 0, this, 4);
+        this.direction = 'RIGHT';
+    }
+
+    /**
+     * @memberof HexDisplay
+     * fn to create save Json Data of object
+     * @return {JSON}
+     */
+    customSave() {
+        const data = {
+
+            nodes: {
+                inp: findNode(this.inp),
+            },
+
+        };
+        return data;
+    }
+
+    /**
+     * @memberof HexDisplay
+     * function to draw element
+     */
+    customDrawSegment(x1, y1, x2, y2, color) {
+        if (color === undefined) color = 'lightgrey';
+        const ctx = simulationArea.context;
+        ctx.beginPath();
+        ctx.strokeStyle = color;
+        ctx.lineWidth = correctWidth(5);
+        const xx = this.x;
+        const yy = this.y;
+
+        moveTo(ctx, x1, y1, xx, yy, this.direction);
+        lineTo(ctx, x2, y2, xx, yy, this.direction);
+        ctx.closePath();
+        ctx.stroke();
+    }
+
+    /**
+     * @memberof HexDisplay
+     * function to draw element
+     */
+    customDraw() {
+        const ctx = simulationArea.context;
+
+        const xx = this.x;
+        const yy = this.y;
+
+        ctx.strokeStyle = 'black';
+        ctx.lineWidth = correctWidth(3);
+        let a = 0; let b = 0; let c = 0; let d = 0; let e = 0; let f = 0; let
+            g = 0;
+        switch (this.inp.value) {
+        case 0:
+            a = b = c = d = e = f = 1;
+            break;
+        case 1:
+            b = c = 1;
+            break;
+        case 2:
+            a = b = g = e = d = 1;
+            break;
+        case 3:
+            a = b = g = c = d = 1;
+            break;
+        case 4:
+            f = g = b = c = 1;
+            break;
+        case 5:
+            a = f = g = c = d = 1;
+            break;
+        case 6:
+            a = f = g = e = c = d = 1;
+            break;
+        case 7:
+            a = b = c = 1;
+            break;
+        case 8:
+            a = b = c = d = e = g = f = 1;
+            break;
+        case 9:
+            a = f = g = b = c = 1;
+            break;
+        case 0xA:
+            a = f = b = c = g = e = 1;
+            break;
+        case 0xB:
+            f = e = g = c = d = 1;
+            break;
+        case 0xC:
+            a = f = e = d = 1;
+            break;
+        case 0xD:
+            b = c = g = e = d = 1;
+            break;
+        case 0xE:
+            a = f = g = e = d = 1;
+            break;
+        case 0xF:
+            a = f = g = e = 1;
+            break;
+        default:
+        }
+        this.customDrawSegment(18, -3, 18, -38, ['lightgrey', 'red'][b]);
+        this.customDrawSegment(18, 3, 18, 38, ['lightgrey', 'red'][c]);
+        this.customDrawSegment(-18, -3, -18, -38, ['lightgrey', 'red'][f]);
+        this.customDrawSegment(-18, 3, -18, 38, ['lightgrey', 'red'][e]);
+        this.customDrawSegment(-17, -38, 17, -38, ['lightgrey', 'red'][a]);
+        this.customDrawSegment(-17, 0, 17, 0, ['lightgrey', 'red'][g]);
+        this.customDrawSegment(-15, 38, 17, 38, ['lightgrey', 'red'][d]);
+    }
+}
+
+/**
+ * @memberof HexDisplay
+ * Help Tip
+ * @type {string}
+ * @category modules
+ */
+HexDisplay.prototype.tooltipText = 'Hex Display ToolTip: Inputs a 4 Bit Hex number and displays it.';
+
+/**
+ * @memberof HexDisplay
+ * Help URL
+ * @type {string}
+ * @category modules
+ */
+HexDisplay.prototype.helplink = 'https://docs.circuitverse.org/#/outputs?id=hex-display';
+HexDisplay.prototype.objectType = 'HexDisplay';
diff --git a/src/modules/Input.js b/src/modules/Input.js
new file mode 100755
index 0000000..c3afab5
--- /dev/null
+++ b/src/modules/Input.js
@@ -0,0 +1,194 @@
+/* eslint-disable no-unused-expressions */
+import CircuitElement from '../circuitElement';
+import Node, { findNode } from '../node';
+import simulationArea from '../simulationArea';
+import {
+    correctWidth, oppositeDirection, fillText,
+} from '../canvasApi';
+import { getNextPosition } from '../modules';
+import { generateId } from '../utils';
+/**
+ * @class
+ * Input
+ * @extends CircuitElement
+ * @param {number} x - x coordinate of element.
+ * @param {number} y - y coordinate of element.
+ * @param {Scope=} scope - Cirucit on which element is drawn
+ * @param {string=} dir - direction of element
+ * @param {number=} bitWidth - bit width per node.
+ * @param {Object=} layoutProperties - x,y and id
+ * @category modules
+ */
+
+function bin2dec(binString) {
+    return parseInt(binString, 2);
+}
+
+function dec2bin(dec, bitWidth = undefined) {
+    // only for positive nos
+    const bin = (dec).toString(2);
+    if (bitWidth == undefined) return bin;
+    return '0'.repeat(bitWidth - bin.length) + bin;
+}
+
+
+export default class Input extends CircuitElement {
+    constructor(x, y, scope = globalScope, dir = 'RIGHT', bitWidth = 1, layoutProperties) {
+        super(x, y, scope, dir, bitWidth);
+        /* this is done in this.baseSetup() now
+        this.scope['Input'].push(this);
+        */
+        if (layoutProperties) { this.layoutProperties = layoutProperties; } else {
+            this.layoutProperties = {};
+            this.layoutProperties.x = 0;
+            this.layoutProperties.y = getNextPosition(0, scope);
+            this.layoutProperties.id = generateId();
+        }
+
+        // Call base class constructor
+        this.state = 0;
+        this.orientationFixed = false;
+        this.state = bin2dec(this.state); // in integer format
+        this.output1 = new Node(this.bitWidth * 10, 0, 1, this);
+        this.wasClicked = false;
+        this.directionFixed = true;
+        this.setWidth(this.bitWidth * 10);
+        this.rectangleObject = true; // Trying to make use of base class draw
+    }
+
+    /**
+     * @memberof Input
+     * fn to create save Json Data of object
+     * @return {JSON}
+     */
+    customSave() {
+        const data = {
+            nodes: {
+                output1: findNode(this.output1),
+            },
+            values: {
+                state: this.state,
+            },
+            constructorParamaters: [this.direction, this.bitWidth, this.layoutProperties],
+        };
+        return data;
+    }
+
+    /**
+     * @memberof Input
+     * resolve output values based on inputData
+     */
+    resolve() {
+        this.output1.value = this.state;
+        simulationArea.simulationQueue.add(this.output1);
+    }
+
+    // Check if override is necessary!!
+
+    /**
+     * @memberof Input
+     * function to change bitwidth of the element
+     * @param {number} bitWidth - new bitwidth
+     */
+    newBitWidth(bitWidth) {
+        if (bitWidth < 1) return;
+        const diffBitWidth = bitWidth - this.bitWidth;
+        this.bitWidth = bitWidth; // ||parseInt(prompt("Enter bitWidth"),10);
+        this.setWidth(this.bitWidth * 10);
+        this.state = 0;
+        this.output1.bitWidth = bitWidth;
+        if (this.direction === 'RIGHT') {
+            this.x -= 10 * diffBitWidth;
+            this.output1.x = 10 * this.bitWidth;
+            this.output1.leftx = 10 * this.bitWidth;
+        } else if (this.direction === 'LEFT') {
+            this.x += 10 * diffBitWidth;
+            this.output1.x = -10 * this.bitWidth;
+            this.output1.leftx = 10 * this.bitWidth;
+        }
+    }
+
+    /**
+     * @memberof Input
+     * listener function to set selected index
+     */
+    click() { // toggle
+        let pos = this.findPos();
+        if (pos === 0) pos = 1; // minor correction
+        if (pos < 1 || pos > this.bitWidth) return;
+        this.state = ((this.state >>> 0) ^ (1 << (this.bitWidth - pos))) >>> 0;
+    }
+
+    /**
+     * @memberof Input
+     * function to draw element
+     */
+    customDraw() {
+        const ctx = simulationArea.context;
+        ctx.beginPath();
+        ctx.strokeStyle = ('rgba(0,0,0,1)');
+        ctx.lineWidth = correctWidth(3);
+        const xx = this.x;
+        const yy = this.y;
+
+        ctx.beginPath();
+        ctx.fillStyle = 'green';
+        ctx.textAlign = 'center';
+        const bin = dec2bin(this.state, this.bitWidth);
+        for (let k = 0; k < this.bitWidth; k++) { fillText(ctx, bin[k], xx - 10 * this.bitWidth + 10 + (k) * 20, yy + 5); }
+        ctx.fill();
+    }
+
+    /**
+     * @memberof Input
+     * function to change direction of input
+     * @param {string} dir - new direction
+     */
+    newDirection(dir) {
+        if (dir === this.direction) return;
+        this.direction = dir;
+        this.output1.refresh();
+        if (dir === 'RIGHT' || dir === 'LEFT') {
+            this.output1.leftx = 10 * this.bitWidth;
+            this.output1.lefty = 0;
+        } else {
+            this.output1.leftx = 10; // 10*this.bitWidth;
+            this.output1.lefty = 0;
+        }
+
+        this.output1.refresh();
+        this.labelDirection = oppositeDirection[this.direction];
+    }
+
+    /**
+     * @memberof Input
+     * function to find position of mouse click
+     */
+    findPos() {
+        return Math.round((simulationArea.mouseX - this.x + 10 * this.bitWidth) / 20.0);
+    }
+}
+
+/**
+ * @memberof Input
+ * Help Tip
+ * @type {string}
+ * @category modules
+ */
+Input.prototype.tooltipText = 'Input ToolTip: Toggle the individual bits by clicking on them.';
+
+/**
+ * @memberof Input
+ * Help URL
+ * @type {string}
+ * @category modules
+ */
+Input.prototype.helplink = 'https://docs.circuitverse.org/#/inputElements?id=input';
+
+/**
+ * @memberof Input
+ * @type {number}
+ * @category modules
+ */
+Input.prototype.propagationDelay = 0;
+Input.prototype.objectType = 'Input';
diff --git a/src/modules/LSB.js b/src/modules/LSB.js
new file mode 100755
index 0000000..7ca30d4
--- /dev/null
+++ b/src/modules/LSB.js
@@ -0,0 +1,132 @@
+import CircuitElement from '../circuitElement';
+import Node, { findNode, dec2bin } from '../node';
+import simulationArea from '../simulationArea';
+import { correctWidth, rect, fillText } from '../canvasApi';
+/**
+ * @class
+ * LSB
+ * @extends CircuitElement
+ * @param {number} x - x coordinate of element.
+ * @param {number} y - y coordinate of element.
+ * @param {Scope=} scope - Cirucit on which element is drawn
+ * @param {string=} dir - direction of element
+ * @param {number=} bitWidth - bit width per node.
+ * @category modules
+ */
+export default class LSB extends CircuitElement {
+    constructor(x, y, scope = globalScope, dir = 'RIGHT', bitWidth = 1) {
+        super(x, y, scope, dir, bitWidth);
+        /* this is done in this.baseSetup() now
+        this.scope['LSB'].push(this);
+        */
+        this.leftDimensionX = 10;
+        this.rightDimensionX = 20;
+        this.setHeight(30);
+        this.directionFixed = true;
+        this.bitWidth = bitWidth || parseInt(prompt('Enter bitWidth'), 10);
+        this.rectangleObject = false;
+        this.inputSize = 1 << this.bitWidth;
+
+        this.inp1 = new Node(-10, 0, 0, this, this.inputSize);
+        this.output1 = new Node(20, 0, 1, this, this.bitWidth);
+        this.enable = new Node(20, 20, 1, this, 1);
+    }
+
+    /**
+     * @memberof LSB
+     * fn to create save Json Data of object
+     * @return {JSON}
+     */
+    customSave() {
+        const data = {
+
+            nodes: {
+                inp1: findNode(this.inp1),
+                output1: findNode(this.output1),
+                enable: findNode(this.enable),
+            },
+            constructorParamaters: [this.direction, this.bitWidth],
+        };
+        return data;
+    }
+
+    /**
+     * @memberof LSB
+     * function to change bitwidth of the element
+     * @param {number} bitWidth - new bitwidth
+     */
+    newBitWidth(bitWidth) {
+        // this.inputSize = 1 << bitWidth
+        this.inputSize = bitWidth;
+        this.inp1.bitWidth = this.inputSize;
+        this.bitWidth = bitWidth;
+        this.output1.bitWidth = bitWidth;
+    }
+
+    /**
+     * @memberof LSB
+     * resolve output values based on inputData
+     */
+    resolve() {
+        const inp = dec2bin(this.inp1.value);
+        let out = 0;
+        for (let i = inp.length - 1; i >= 0; i--) {
+            if (inp[i] === 1) {
+                out = inp.length - 1 - i;
+                break;
+            }
+        }
+        this.output1.value = out;
+        simulationArea.simulationQueue.add(this.output1);
+        if (inp !== 0) {
+            this.enable.value = 1;
+        } else {
+            this.enable.value = 0;
+        }
+        simulationArea.simulationQueue.add(this.enable);
+    }
+
+    /**
+     * @memberof LSB
+     * function to draw element
+     */
+    customDraw() {
+        const ctx = simulationArea.context;
+        ctx.beginPath();
+        ctx.strokeStyle = 'black';
+        ctx.fillStyle = 'white';
+        ctx.lineWidth = correctWidth(3);
+        const xx = this.x;
+        const yy = this.y;
+        rect(ctx, xx - 10, yy - 30, 30, 60);
+        if ((this.hover && !simulationArea.shiftDown) || simulationArea.lastSelected === this || simulationArea.multipleObjectSelections.contains(this)) ctx.fillStyle = 'rgba(255, 255, 32,0.8)';
+        ctx.fill();
+        ctx.stroke();
+
+        ctx.beginPath();
+        ctx.fillStyle = 'black';
+        ctx.textAlign = 'center';
+        fillText(ctx, 'LSB', xx + 6, yy - 12, 10);
+        fillText(ctx, 'EN', xx + this.enable.x - 12, yy + this.enable.y + 3, 8);
+        ctx.fill();
+
+        ctx.beginPath();
+        ctx.fillStyle = 'green';
+        ctx.textAlign = 'center';
+        if (this.output1.value !== undefined) {
+            fillText(ctx, this.output1.value, xx + 5, yy + 14, 13);
+        }
+        ctx.stroke();
+        ctx.fill();
+    }
+}
+
+/**
+ * @memberof LSB
+ * Help Tip
+ * @type {string}
+ * @category modules
+ */
+LSB.prototype.tooltipText = 'LSB ToolTip : The least significant bit or the low-order bit.';
+LSB.prototype.helplink = 'https://docs.circuitverse.org/#/decodersandplexers?id=least-significant-bit-lsb-detector';
+LSB.prototype.objectType = 'LSB';
diff --git a/src/modules/MSB.js b/src/modules/MSB.js
new file mode 100755
index 0000000..5e5c487
--- /dev/null
+++ b/src/modules/MSB.js
@@ -0,0 +1,126 @@
+import CircuitElement from '../circuitElement';
+import Node, { findNode, dec2bin } from '../node';
+import simulationArea from '../simulationArea';
+import { correctWidth, rect, fillText } from '../canvasApi';
+/**
+ * @class
+ * MSB
+ * @extends CircuitElement
+ * @param {number} x - x coordinate of element.
+ * @param {number} y - y coordinate of element.
+ * @param {Scope=} scope - Cirucit on which element is drawn
+ * @param {string=} dir - direction of element
+ * @param {number=} bitWidth - bit width per node.
+ * @category modules
+ */
+export default class MSB extends CircuitElement {
+    constructor(x, y, scope = globalScope, dir = 'RIGHT', bitWidth = 1) {
+        super(x, y, scope, dir, bitWidth);
+        /* this is done in this.baseSetup() now
+        this.scope['MSB'].push(this);
+        */
+        // this.setDimensions(20, 20);
+        this.leftDimensionX = 10;
+        this.rightDimensionX = 20;
+        this.setHeight(30);
+        this.directionFixed = true;
+        this.bitWidth = bitWidth || parseInt(prompt('Enter bitWidth'), 10);
+        this.rectangleObject = false;
+        this.inputSize = 1 << this.bitWidth;
+
+        this.inp1 = new Node(-10, 0, 0, this, this.inputSize);
+        this.output1 = new Node(20, 0, 1, this, this.bitWidth);
+        this.enable = new Node(20, 20, 1, this, 1);
+    }
+
+    /**
+     * @memberof MSB
+     * fn to create save Json Data of object
+     * @return {JSON}
+     */
+    customSave() {
+        const data = {
+
+            nodes: {
+                inp1: findNode(this.inp1),
+                output1: findNode(this.output1),
+                enable: findNode(this.enable),
+            },
+            constructorParamaters: [this.direction, this.bitWidth],
+        };
+        return data;
+    }
+
+    /**
+     * @memberof MSB
+     * function to change bitwidth of the element
+     * @param {number} bitWidth - new bitwidth
+     */
+    newBitWidth(bitWidth) {
+        // this.inputSize = 1 << bitWidth
+        this.inputSize = bitWidth;
+        this.inp1.bitWidth = this.inputSize;
+        this.bitWidth = bitWidth;
+        this.output1.bitWidth = bitWidth;
+    }
+
+    /**
+     * @memberof MSB
+     * resolve output values based on inputData
+     */
+    resolve() {
+        const inp = this.inp1.value;
+        this.output1.value = (dec2bin(inp).length) - 1;
+        simulationArea.simulationQueue.add(this.output1);
+        if (inp !== 0) {
+            this.enable.value = 1;
+        } else {
+            this.enable.value = 0;
+        }
+        simulationArea.simulationQueue.add(this.enable);
+    }
+
+    /**
+     * @memberof MSB
+     * function to draw element
+     */
+    customDraw() {
+        const ctx = simulationArea.context;
+        ctx.beginPath();
+        ctx.strokeStyle = 'black';
+        ctx.fillStyle = 'white';
+        ctx.lineWidth = correctWidth(3);
+        const xx = this.x;
+        const yy = this.y;
+        rect(ctx, xx - 10, yy - 30, 30, 60);
+        if ((this.hover && !simulationArea.shiftDown) || simulationArea.lastSelected === this || simulationArea.multipleObjectSelections.contains(this)) ctx.fillStyle = 'rgba(255, 255, 32,0.8)';
+        ctx.fill();
+        ctx.stroke();
+
+        ctx.beginPath();
+        ctx.fillStyle = 'black';
+        ctx.textAlign = 'center';
+        fillText(ctx, 'MSB', xx + 6, yy - 12, 10);
+        fillText(ctx, 'EN', xx + this.enable.x - 12, yy + this.enable.y + 3, 8);
+        ctx.fill();
+
+        ctx.beginPath();
+        ctx.fillStyle = 'green';
+        ctx.textAlign = 'center';
+        if (this.output1.value !== undefined) {
+            fillText(ctx, this.output1.value, xx + 5, yy + 14, 13);
+        }
+        ctx.stroke();
+        ctx.fill();
+    }
+}
+
+/**
+ * @memberof MSB
+ * Help Tip
+ * @type {string}
+ * @category modules
+ */
+MSB.prototype.tooltipText = 'MSB ToolTip : The most significant bit or the high-order bit.';
+MSB.prototype.helplink = 'https://docs.circuitverse.org/#/decodersandplexers?id=most-significant-bit-msb-detector';
+MSB.prototype.objectType = 'MSB';
diff --git a/src/modules/Multiplexer.js b/src/modules/Multiplexer.js
new file mode 100755
index 0000000..ddc3d2b
--- /dev/null
+++ b/src/modules/Multiplexer.js
@@ -0,0 +1,186 @@
+import CircuitElement from '../circuitElement';
+import Node, { findNode } from '../node';
+import simulationArea from '../simulationArea';
+import {
+    correctWidth, lineTo, moveTo, fillText,
+} from '../canvasApi';
+import { changeInputSize } from '../modules';
+/**
+ * @class
+ * Multiplexer
+ * @extends CircuitElement
+ * @param {number} x - x coordinate of element.
+ * @param {number} y - y coordinate of element.
+ * @param {Scope=} scope - Cirucit on which element is drawn
+ * @param {string=} dir - direction of element
+ * @param {number=} bitWidth - bit width per node.
+ * @param {number=} controlSignalSize - 1 by default
+ * @category modules
+ */
+export default class Multiplexer extends CircuitElement {
+    constructor(
+        x,
+        y,
+        scope = globalScope,
+        dir = 'RIGHT',
+        bitWidth = 1,
+        controlSignalSize = 1,
+    ) {
+        super(x, y, scope, dir, bitWidth);
+        /* this is done in this.baseSetup() now
+        this.scope['Multiplexer'].push(this);
+        */
+        this.controlSignalSize = controlSignalSize || parseInt(prompt('Enter control signal bitWidth'), 10);
+        this.inputSize = 1 << this.controlSignalSize;
+        this.xOff = 0;
+        this.yOff = 1;
+        if (this.controlSignalSize === 1) {
+            this.xOff = 10;
+        }
+        if (this.controlSignalSize <= 3) {
+            this.yOff = 2;
+        }
+        this.setDimensions(20 - this.xOff, this.yOff * 5 * (this.inputSize));
+        this.rectangleObject = false;
+        this.inp = [];
+        for (let i = 0; i < this.inputSize; i++) {
+            const a = new Node(-20 + this.xOff, +this.yOff * 10 * (i - this.inputSize / 2) + 10, 0, this);
+            this.inp.push(a);
+        }
+        this.output1 = new Node(20 - this.xOff, 0, 1, this);
+        this.controlSignalInput = new Node(0, this.yOff * 10 * (this.inputSize / 2 - 1) + this.xOff + 10, 0, this, this.controlSignalSize, 'Control Signal');
+    }
+
+    /**
+     * @memberof Multiplexer
+     * function to change control signal of the element
+     */
+    changeControlSignalSize(size) {
+        if (size === undefined || size < 1 || size > 32) return;
+        if (this.controlSignalSize === size) return;
+        const obj = new Multiplexer(this.x, this.y, this.scope, this.direction, this.bitWidth, size);
+        this.cleanDelete();
+        simulationArea.lastSelected = obj;
+        return obj;
+    }
+
+    /**
+     * @memberof Multiplexer
+     * function to change bitwidth of the element
+     * @param {number} bitWidth - bitwidth
+     */
+    newBitWidth(bitWidth) {
+        this.bitWidth = bitWidth;
+        for (let i = 0; i < this.inputSize; i++) {
+            this.inp[i].bitWidth = bitWidth;
+        }
+        this.output1.bitWidth = bitWidth;
+    }
+
+    /**
+     * @memberof Multiplexer
+     * @type {boolean}
+     */
+    isResolvable() {
+        if (this.controlSignalInput.value !== undefined && this.inp[this.controlSignalInput.value].value !== undefined) return true;
+        return false;
+    }
+
+    /**
+     * @memberof Multiplexer
+     * fn to create save Json Data of object
+     * @return {JSON}
+     */
+    customSave() {
+        const data = {
+            constructorParamaters: [this.direction, this.bitWidth, this.controlSignalSize],
+            nodes: {
+                inp: this.inp.map(findNode),
+                output1: findNode(this.output1),
+                controlSignalInput: findNode(this.controlSignalInput),
+            },
+        };
+        return data;
+    }
+
+    /**
+     * @memberof Multiplexer
+     * resolve output values based on inputData
+     */
+    resolve() {
+        if (this.isResolvable() === false) {
+            return;
+        }
+        this.output1.value = this.inp[this.controlSignalInput.value].value;
+        simulationArea.simulationQueue.add(this.output1);
+    }
+
+    /**
+     * @memberof Multiplexer
+     * function to draw element
+     */
+    customDraw() {
+        const ctx = simulationArea.context;
+
+        const xx = this.x;
+        const yy = this.y;
+
+        ctx.beginPath();
+        moveTo(ctx, 0, this.yOff * 10 * (this.inputSize / 2 - 1) + 10 + 0.5 * this.xOff, xx, yy, this.direction);
+        lineTo(ctx, 0, this.yOff * 5 * (this.inputSize - 1) + this.xOff, xx, yy, this.direction);
+        ctx.stroke();
+
+        ctx.lineWidth = correctWidth(3);
+        ctx.beginPath();
+        ctx.strokeStyle = ('rgba(0,0,0,1)');
+
+        ctx.fillStyle = 'white';
+        moveTo(ctx, -20 + this.xOff, -this.yOff * 10 * (this.inputSize / 2), xx, yy, this.direction);
+        lineTo(ctx, -20 + this.xOff, 20 + this.yOff * 10 * (this.inputSize / 2 - 1), xx, yy, this.direction);
+        lineTo(ctx, 20 - this.xOff, +this.yOff * 10 * (this.inputSize / 2 - 1) + this.xOff, xx, yy, this.direction);
+        lineTo(ctx, 20 - this.xOff, -this.yOff * 10 * (this.inputSize / 2) - this.xOff + 20, xx, yy, this.direction);
+
+        ctx.closePath();
+        if ((this.hover && !simulationArea.shiftDown) || simulationArea.lastSelected === this || simulationArea.multipleObjectSelections.contains(this)) { ctx.fillStyle = 'rgba(255, 255, 32,0.8)'; }
+        ctx.fill();
+        ctx.stroke();
+
+        ctx.beginPath();
+        // ctx.lineWidth = correctWidth(2);
+        ctx.fillStyle = 'black';
+        ctx.textAlign = 'center';
+        for (let i = 0; i < this.inputSize; i++) {
+            if (this.direction === 'RIGHT') fillText(ctx, String(i), xx + this.inp[i].x + 7, yy + this.inp[i].y + 2, 10);
+            else if (this.direction === 'LEFT') fillText(ctx, String(i), xx + this.inp[i].x - 7, yy + this.inp[i].y + 2, 10);
+            else if (this.direction === 'UP') fillText(ctx, String(i), xx + this.inp[i].x, yy + this.inp[i].y - 4, 10);
+            else fillText(ctx, String(i), xx + this.inp[i].x, yy + this.inp[i].y + 10, 10);
+        }
+        ctx.fill();
+    }
+}
+
+/**
+ * @memberof Multiplexer
+ * Help Tip
+ * @type {string}
+ * @category modules
+ */
+Multiplexer.prototype.tooltipText = 'Multiplexer ToolTip : Multiple inputs and a single line output.';
+Multiplexer.prototype.helplink = 'https://docs.circuitverse.org/#/decodersandplexers?id=multiplexer';
+
+/**
+ * @memberof Multiplexer
+ * multable properties of element
+ * @type {JSON}
+ * @category modules
+ */
+Multiplexer.prototype.mutableProperties = {
+    controlSignalSize: {
+        name: 'Control Signal Size',
+        type: 'number',
+        max: '32',
+        min: '1',
+        func: 'changeControlSignalSize',
+    },
+};
+Multiplexer.prototype.objectType = 'Multiplexer';
diff --git a/src/modules/NandGate.js b/src/modules/NandGate.js
new file mode 100755
index 0000000..6daccf9
--- /dev/null
+++ b/src/modules/NandGate.js
@@ -0,0 +1,144 @@
+import CircuitElement from '../circuitElement';
+import Node, { findNode } from '../node';
+import simulationArea from '../simulationArea';
+import {
+    correctWidth, lineTo, moveTo, drawCircle2, arc,
+} from '../canvasApi';
+import { changeInputSize } from '../modules';
+/**
+ * @class
+ * NandGate
+ * @extends CircuitElement
+ * @param {number} x - x coordinate of nand Gate.
+ * @param {number} y - y coordinate of nand Gate.
+ * @param {Scope=} scope - Cirucit on which nand gate is drawn
+ * @param {string=} dir - direction of nand Gate
+ * @param {number=} inputLength - number of input nodes
+ * @param {number=} bitWidth - bit width per node.
+ * @category modules
+ */
+export default class NandGate extends CircuitElement {
+    constructor(x, y, scope = globalScope, dir = 'RIGHT', inputLength = 2, bitWidth = 1) {
+        super(x, y, scope, dir, bitWidth);
+        /* this is done in this.baseSetup() now
+        this.scope['NandGate'].push(this);
+        */
+        this.rectangleObject = false;
+        this.setDimensions(15, 20);
+        this.inp = [];
+        this.inputSize = inputLength;
+        // variable inputLength , node creation
+        if (inputLength % 2 === 1) {
+            for (let i = 0; i < inputLength / 2 - 1; i++) {
+                const a = new Node(-10, -10 * (i + 1), 0, this);
+                this.inp.push(a);
+            }
+            let a = new Node(-10, 0, 0, this);
+            this.inp.push(a);
+            for (let i = inputLength / 2 + 1; i < inputLength; i++) {
+                a = new Node(-10, 10 * (i + 1 - inputLength / 2 - 1), 0, this);
+                this.inp.push(a);
+            }
+        } else {
+            for (let i = 0; i < inputLength / 2; i++) {
+                const a = new Node(-10, -10 * (i + 1), 0, this);
+                this.inp.push(a);
+            }
+            for (let i = inputLength / 2; i < inputLength; i++) {
+                const a = new Node(-10, 10 * (i + 1 - inputLength / 2), 0, this);
+                this.inp.push(a);
+            }
+        }
+        this.output1 = new Node(30, 0, 1, this);
+    }
+
+    /**
+     * @memberof NandGate
+     * fn to create save Json Data of object
+     * @return {JSON}
+     */
+    // fn to create save Json Data of object
+    customSave() {
+        const data = {
+
+            constructorParamaters: [this.direction, this.inputSize, this.bitWidth],
+            nodes: {
+                inp: this.inp.map(findNode),
+                output1: findNode(this.output1),
+            },
+        };
+        return data;
+    }
+
+    /**
+     * @memberof NandGate
+     * resolve output values based on inputData
+     */
+    resolve() {
+        let result = this.inp[0].value || 0;
+        if (this.isResolvable() === false) {
+            return;
+        }
+        for (let i = 1; i < this.inputSize; i++) result &= (this.inp[i].value || 0);
+        result = ((~result >>> 0) << (32 - this.bitWidth)) >>> (32 - this.bitWidth);
+        this.output1.value = result;
+        simulationArea.simulationQueue.add(this.output1);
+    }
+
+    /**
+     * @memberof NandGate
+     * function to draw nand Gate
+     */
+    customDraw() {
+        const ctx = simulationArea.context;
+        ctx.beginPath();
+        ctx.lineWidth = correctWidth(3);
+        ctx.strokeStyle = 'black';
+        ctx.fillStyle = 'white';
+        const xx = this.x;
+        const yy = this.y;
+        moveTo(ctx, -10, -20, xx, yy, this.direction);
+        lineTo(ctx, 0, -20, xx, yy, this.direction);
+        arc(ctx, 0, 0, 20, (-Math.PI / 2), (Math.PI / 2), xx, yy, this.direction);
+        lineTo(ctx, -10, 20, xx, yy, this.direction);
+        lineTo(ctx, -10, -20, xx, yy, this.direction);
+        ctx.closePath();
+        if ((this.hover && !simulationArea.shiftDown) || simulationArea.lastSelected === this || simulationArea.multipleObjectSelections.contains(this)) ctx.fillStyle = 'rgba(255, 255, 32,0.5)';
+        ctx.fill();
+        ctx.stroke();
+        ctx.beginPath();
+        drawCircle2(ctx, 25, 0, 5, xx, yy, this.direction);
+        ctx.stroke();
+    }
+}
+
+/**
+ * @memberof NandGate
+ * Help Tip
+ * @type {string}
+ * @category modules
+ */
+NandGate.prototype.tooltipText = 'Nand Gate ToolTip : Combination of AND and NOT gates';
+
+/**
+ * @memberof NandGate
+ * @type {boolean}
+ * @category modules
+ */
+NandGate.prototype.alwaysResolve = true;
+
+/**
+ * @memberof NandGate
+ * function to change input nodes of the gate
+ * @category modules
+ */
+NandGate.prototype.changeInputSize = changeInputSize;
+
+/**
+ * @memberof NandGate
+ * @type {string}
+ * @category modules
+ */
+NandGate.prototype.verilogType = 'nand';
+NandGate.prototype.helplink = 'https://docs.circuitverse.org/#/gates?id=nand-gate';
+NandGate.prototype.objectType = 'NandGate';
diff --git a/src/modules/NorGate.js b/src/modules/NorGate.js
new file mode 100755
index 0000000..da74cdb
--- /dev/null
+++ b/src/modules/NorGate.js
@@ -0,0 +1,143 @@
+import CircuitElement from '../circuitElement';
+import Node, { findNode } from '../node';
+import simulationArea from '../simulationArea';
+import {
+    correctWidth, bezierCurveTo, moveTo, arc2, drawCircle2,
+} from '../canvasApi';
+import { changeInputSize } from '../modules';
+/**
+ * @class
+ * NorGate
+ * @extends CircuitElement
+ * @param {number} x - x coordinate of element.
+ * @param {number} y - y coordinate of element.
+ * @param {Scope=} scope - Cirucit on which element is drawn
+ * @param {string=} dir - direction of element
+ * @param {number=} inputs - number of input nodes
+ * @param {number=} bitWidth - bit width per node.
+ * @category modules
+ */
+export default class NorGate extends CircuitElement {
+    constructor(x, y, scope = globalScope, dir = 'RIGHT', inputs = 2, bitWidth = 1) {
+        super(x, y, scope, dir, bitWidth);
+        /* this is done in this.baseSetup() now
+        this.scope['NorGate'].push(this);
+        */
+        this.rectangleObject = false;
+        this.setDimensions(15, 20);
+
+        this.inp = [];
+        this.inputSize = inputs;
+
+        if (inputs % 2 === 1) {
+            for (let i = 0; i < inputs / 2 - 1; i++) {
+                const a = new Node(-10, -10 * (i + 1), 0, this);
+                this.inp.push(a);
+            }
+            let a = new Node(-10, 0, 0, this);
+            this.inp.push(a);
+            for (let i = inputs / 2 + 1; i < inputs; i++) {
+                a = new Node(-10, 10 * (i + 1 - inputs / 2 - 1), 0, this);
+                this.inp.push(a);
+            }
+        } else {
+            for (let i = 0; i < inputs / 2; i++) {
+                const a = new Node(-10, -10 * (i + 1), 0, this);
+                this.inp.push(a);
+            }
+            for (let i = inputs / 2; i < inputs; i++) {
+                const a = new Node(-10, 10 * (i + 1 - inputs / 2), 0, this);
+                this.inp.push(a);
+            }
+        }
+        this.output1 = new Node(30, 0, 1, this);
+    }
+
+    /**
+     * @memberof NorGate
+     * fn to create save Json Data of object
+     * @return {JSON}
+     */
+    customSave() {
+        const data = {
+            constructorParamaters: [this.direction, this.inputSize, this.bitWidth],
+            nodes: {
+                inp: this.inp.map(findNode),
+                output1: findNode(this.output1),
+            },
+        };
+        return data;
+    }
+
+    /**
+     * @memberof NorGate
+     * resolve output values based on inputData
+     */
+    resolve() {
+        let result = this.inp[0].value || 0;
+        for (let i = 1; i < this.inputSize; i++) result |= (this.inp[i].value || 0);
+        result = ((~result >>> 0) << (32 - this.bitWidth)) >>> (32 - this.bitWidth);
+        this.output1.value = result;
+        simulationArea.simulationQueue.add(this.output1);
+    }
+
+    /**
+     * @memberof NorGate
+     * function to draw element
+     */
+    customDraw() {
+        const ctx = simulationArea.context;
+        ctx.strokeStyle = ('rgba(0,0,0,1)');
+        ctx.lineWidth = correctWidth(3);
+
+        const xx = this.x;
+        const yy = this.y;
+        ctx.beginPath();
+        ctx.fillStyle = 'white';
+
+        moveTo(ctx, -10, -20, xx, yy, this.direction, true);
+        bezierCurveTo(0, -20, +15, -10, 20, 0, xx, yy, this.direction);
+        bezierCurveTo(0 + 15, 0 + 10, 0, 0 + 20, -10, +20, xx, yy, this.direction);
+        bezierCurveTo(0, 0, 0, 0, -10, -20, xx, yy, this.direction);
+        ctx.closePath();
+        if ((this.hover && !simulationArea.shiftDown) || simulationArea.lastSelected === this || simulationArea.multipleObjectSelections.contains(this)) ctx.fillStyle = 'rgba(255, 255, 32,0.5)';
+        ctx.fill();
+        ctx.stroke();
+        ctx.beginPath();
+        drawCircle2(ctx, 25, 0, 5, xx, yy, this.direction);
+        ctx.stroke();
+        // for debugging
+    }
+}
+
+/**
+ * @memberof NorGate
+ * Help Tip
+ * @type {string}
+ * @category modules
+ */
+NorGate.prototype.tooltipText = 'Nor Gate ToolTip : Combination of OR gate and NOT gate.';
+
+/**
+ * @memberof NorGate
+ * @type {boolean}
+ * @category modules
+ */
+NorGate.prototype.alwaysResolve = true;
+
+
+/**
+ * @memberof SevenSegDisplay
+ * function to change input nodes of the element
+ * @category modules
+ */
+NorGate.prototype.changeInputSize = changeInputSize;
+
+/**
+ * @memberof SevenSegDisplay
+ * @type {string}
+ * @category modules
+ */
+NorGate.prototype.verilogType = 'nor';
+NorGate.prototype.helplink = 'https://docs.circuitverse.org/#/gates?id=nor-gate';
+NorGate.prototype.objectType = 'NorGate';
diff --git a/src/modules/NotGate.js b/src/modules/NotGate.js
new file mode 100755
index 0000000..6067ff1
--- /dev/null
+++ b/src/modules/NotGate.js
@@ -0,0 +1,94 @@
+import CircuitElement from '../circuitElement';
+import Node, { findNode } from '../node';
+import simulationArea from '../simulationArea';
+import {
+    correctWidth, lineTo, moveTo, drawCircle2,
+} from '../canvasApi';
+import { changeInputSize } from '../modules';
+/**
+ * @class
+ * NotGate
+ * @extends CircuitElement
+ * @param {number} x - x coordinate of element.
+ * @param {number} y - y coordinate of element.
+ * @param {Scope=} scope - Cirucit on which element is drawn
+ * @param {string=} dir - direction of element
+ * @param {number=} bitWidth - bit width per node.
+ * @category modules
+ */
+export default class NotGate extends CircuitElement {
+    constructor(x, y, scope = globalScope, dir = 'RIGHT', bitWidth = 1) {
+        super(x, y, scope, dir, bitWidth);
+        /* this is done in this.baseSetup() now
+        this.scope['NotGate'].push(this);
+        */
+        this.rectangleObject = false;
+        this.setDimensions(15, 15);
+
+        this.inp1 = new Node(-10, 0, 0, this);
+        this.output1 = new Node(20, 0, 1, this);
+    }
+
+    /**
+     * @memberof NotGate
+     * fn to create save Json Data of object
+     * @return {JSON}
+     */
+    customSave() {
+        const data = {
+            constructorParamaters: [this.direction, this.bitWidth],
+            nodes: {
+                output1: findNode(this.output1),
+                inp1: findNode(this.inp1),
+            },
+        };
+        return data;
+    }
+
+    /**
+     * @memberof NotGate
+     * resolve output values based on inputData
+     */
+    resolve() {
+        if (this.isResolvable() === false) {
+            return;
+        }
+        this.output1.value = ((~this.inp1.value >>> 0) << (32 - this.bitWidth)) >>> (32 - this.bitWidth);
+        simulationArea.simulationQueue.add(this.output1);
+    }
+
+    /**
+     * @memberof NotGate
+     * function to draw element
+     */
+    customDraw() {
+        const ctx = simulationArea.context;
+        ctx.strokeStyle = 'black';
+        ctx.lineWidth = correctWidth(3);
+
+        const xx = this.x;
+        const yy = this.y;
+        ctx.beginPath();
+        ctx.fillStyle = 'white';
+        moveTo(ctx, -10, -10, xx, yy, this.direction);
+        lineTo(ctx, 10, 0, xx, yy, this.direction);
+        lineTo(ctx, -10, 10, xx, yy, this.direction);
+        ctx.closePath();
+        if ((this.hover && !simulationArea.shiftDown) || simulationArea.lastSelected === this || simulationArea.multipleObjectSelections.contains(this)) ctx.fillStyle = 'rgba(255, 255, 32,0.8)';
+        ctx.fill();
+        ctx.stroke();
+        ctx.beginPath();
+        drawCircle2(ctx, 15, 0, 5, xx, yy, this.direction);
+        ctx.stroke();
+    }
+}
+
+/**
+ * @memberof NotGate
+ * Help Tip
+ * @type {string}
+ * @category modules
+ */
+NotGate.prototype.tooltipText = 'Not Gate Tooltip : Inverts the input digital signal.';
+NotGate.prototype.helplink = 'https://docs.circuitverse.org/#/gates?id=not-gate';
+NotGate.prototype.objectType = 'NotGate';
diff --git a/src/modules/OrGate.js b/src/modules/OrGate.js
new file mode 100755
index 0000000..532a507
--- /dev/null
+++ b/src/modules/OrGate.js
@@ -0,0 +1,142 @@
+import CircuitElement from '../circuitElement';
+import Node, { findNode } from '../node';
+import simulationArea from '../simulationArea';
+import {
+    correctWidth, bezierCurveTo, moveTo, arc2,
+} from '../canvasApi';
+import { changeInputSize } from '../modules';
+/**
+ * @class
+ * OrGate
+ * @extends CircuitElement
+ * @param {number} x - x coordinate of element.
+ * @param {number} y - y coordinate of element.
+ * @param {Scope=} scope - Cirucit on which element is drawn
+ * @param {string=} dir - direction of element
+ * @param {number=} inputs - number of input nodes
+ * @param {number=} bitWidth - bit width per node.
+ * @category modules
+ */
+export default class OrGate extends CircuitElement {
+    constructor(x, y, scope = globalScope, dir = 'RIGHT', inputs = 2, bitWidth = 1) {
+        // Calling base class constructor
+        super(x, y, scope, dir, bitWidth);
+        /* this is done in this.baseSetup() now
+        this.scope['OrGate'].push(this);
+        */
+        this.rectangleObject = false;
+        this.setDimensions(15, 20);
+        // Inherit base class prototype
+        this.inp = [];
+        this.inputSize = inputs;
+        if (inputs % 2 === 1) {
+            for (let i = Math.floor(inputs / 2) - 1; i >= 0; i--) {
+                const a = new Node(-10, -10 * (i + 1), 0, this);
+                this.inp.push(a);
+            }
+            let a = new Node(-10, 0, 0, this);
+            this.inp.push(a);
+            for (let i = 0; i < Math.floor(inputs / 2); i++) {
+                a = new Node(-10, 10 * (i + 1), 0, this);
+                this.inp.push(a);
+            }
+        } else {
+            for (let i = inputs / 2 - 1; i >= 0; i--) {
+                const a = new Node(-10, -10 * (i + 1), 0, this);
+                this.inp.push(a);
+            }
+            for (let i = 0; i < inputs / 2; i++) {
+                const a = new Node(-10, 10 * (i + 1), 0, this);
+                this.inp.push(a);
+            }
+        }
+        this.output1 = new Node(20, 0, 1, this);
+    }
+
+    /**
+     * @memberof OrGate
+     * fn to create save Json Data of object
+     * @return {JSON}
+     */
+    customSave() {
+        const data = {
+
+            constructorParamaters: [this.direction, this.inputSize, this.bitWidth],
+
+            nodes: {
+                inp: this.inp.map(findNode),
+                output1: findNode(this.output1),
+            },
+        };
+        return data;
+    }
+
+    /**
+     * @memberof OrGate
+     * resolve output values based on inputData
+     */
+    resolve() {
+        let result = this.inp[0].value || 0;
+        if (this.isResolvable() === false) {
+            return;
+        }
+        for (let i = 1; i < this.inputSize; i++) result |= (this.inp[i].value || 0);
+        this.output1.value = result;
+        simulationArea.simulationQueue.add(this.output1);
+    }
+
+    /**
+     * @memberof OrGate
+     * function to draw element
+     */
+    customDraw() {
+        const ctx = simulationArea.context;
+        ctx.strokeStyle = ('rgba(0,0,0,1)');
+        ctx.lineWidth = correctWidth(3);
+
+        const xx = this.x;
+        const yy = this.y;
+        ctx.beginPath();
+        ctx.fillStyle = 'white';
+
+        moveTo(ctx, -10, -20, xx, yy, this.direction, true);
+        bezierCurveTo(0, -20, +15, -10, 20, 0, xx, yy, this.direction);
+        bezierCurveTo(0 + 15, 0 + 10, 0, 0 + 20, -10, +20, xx, yy, this.direction);
+        bezierCurveTo(0, 0, 0, 0, -10, -20, xx, yy, this.direction);
+        ctx.closePath();
+        if ((this.hover && !simulationArea.shiftDown) || simulationArea.lastSelected === this || simulationArea.multipleObjectSelections.contains(this)) ctx.fillStyle = 'rgba(255, 255, 32,0.8)';
+        ctx.fill();
+        ctx.stroke();
+    }
+}
+
+/**
+ * @memberof OrGate
+ * Help Tip
+ * @type {string}
+ * @category modules
+ */
+OrGate.prototype.tooltipText = 'Or Gate Tooltip : Implements logical disjunction';
+
+/**
+ * @memberof OrGate
+ * function to change input nodes of the element
+ * @category modules
+ */
+OrGate.prototype.changeInputSize = changeInputSize;
+
+/**
+ * @memberof SevenSegDisplay
+ * @type {boolean}
+ * @category modules
+ */
+OrGate.prototype.alwaysResolve = true;
+
+/**
+ * @memberof SevenSegDisplay
+ * @type {string}
+ * @category modules
+ */
+OrGate.prototype.verilogType = 'or';
+OrGate.prototype.helplink = 'https://docs.circuitverse.org/#/gates?id=or-gate';
+OrGate.prototype.objectType = 'OrGate';
diff --git a/src/modules/Output.js b/src/modules/Output.js
new file mode 100755
index 0000000..45858c3
--- /dev/null
+++ b/src/modules/Output.js
@@ -0,0 +1,179 @@
+import CircuitElement from '../circuitElement';
+import Node, { findNode } from '../node';
+import simulationArea from '../simulationArea';
+import {
+    correctWidth, fillText, rect2, oppositeDirection,
+} from '../canvasApi';
+import { getNextPosition } from '../modules';
+import { generateId } from '../utils';
+
+
+function bin2dec(binString) {
+    return parseInt(binString, 2);
+}
+
+function dec2bin(dec, bitWidth = undefined) {
+    // only for positive nos
+    const bin = (dec).toString(2);
+    if (bitWidth == undefined) return bin;
+    return '0'.repeat(bitWidth - bin.length) + bin;
+}
+
+
+/**
+ * @class
+ * Output
+ * @extends CircuitElement
+ * @param {number} x - x coordinate of element.
+ * @param {number} y - y coordinate of element.
+ * @param {Scope=} scope - Cirucit on which element is drawn
+ * @param {string=} dir - direction of element
+ * @param {number=} inputLength - number of input nodes
+ * @param {number=} bitWidth - bit width per node.
+ * @category modules
+ */
+export default class Output extends CircuitElement {
+    constructor(x, y, scope = globalScope, dir = 'LEFT', bitWidth = 1, layoutProperties) {
+        // Calling base class constructor
+        super(x, y, scope, dir, bitWidth);
+        /* this is done in this.baseSetup() now
+        this.scope['Output'].push(this);
+        */
+        if (layoutProperties) { this.layoutProperties = layoutProperties; } else {
+            this.layoutProperties = {};
+            this.layoutProperties.x = scope.layout.width;
+            this.layoutProperties.y = getNextPosition(scope.layout.width, scope);
+            this.layoutProperties.id = generateId();
+        }
+
+        this.rectangleObject = false;
+        this.directionFixed = true;
+        this.orientationFixed = false;
+        this.setDimensions(this.bitWidth * 10, 10);
+        this.inp1 = new Node(this.bitWidth * 10, 0, 0, this);
+    }
+
+    /**
+     * @memberof Output
+     * function to generate verilog for output
+     * @return {string}
+     */
+    generateVerilog() {
+        return `assign ${this.label} = ${this.inp1.verilogLabel};`;
+    }
+
+    /**
+     * @memberof Output
+     * fn to create save Json Data of object
+     * @return {JSON}
+     */
+    customSave() {
+        const data = {
+            nodes: {
+                inp1: findNode(this.inp1),
+            },
+            constructorParamaters: [this.direction, this.bitWidth, this.layoutProperties],
+        };
+        return data;
+    }
+
+    /**
+     * @memberof Output
+     * function to change bitwidth of the element
+     * @param {number} bitWidth - new bitwidth
+     */
+    newBitWidth(bitWidth) {
+        if (bitWidth < 1) return;
+        const diffBitWidth = bitWidth - this.bitWidth;
+        this.state = undefined;
+        this.inp1.bitWidth = bitWidth;
+        this.bitWidth = bitWidth;
+        this.setWidth(10 * this.bitWidth);
+
+        if (this.direction === 'RIGHT') {
+            this.x -= 10 * diffBitWidth;
+            this.inp1.x = 10 * this.bitWidth;
+            this.inp1.leftx = 10 * this.bitWidth;
+        } else if (this.direction === 'LEFT') {
+            this.x += 10 * diffBitWidth;
+            this.inp1.x = -10 * this.bitWidth;
+            this.inp1.leftx = 10 * this.bitWidth;
+        }
+    }
+
+    /**
+     * @memberof Output
+     * function to draw element
+     */
+    customDraw() {
+        this.state = this.inp1.value;
+        const ctx = simulationArea.context;
+        ctx.beginPath();
+        ctx.strokeStyle = ['blue', 'red'][+(this.inp1.value === undefined)];
+        ctx.fillStyle = 'white';
+        ctx.lineWidth = correctWidth(3);
+        const xx = this.x;
+        const yy = this.y;
+
+        rect2(ctx, -10 * this.bitWidth, -10, 20 * this.bitWidth, 20, xx, yy, 'RIGHT');
+        if ((this.hover && !simulationArea.shiftDown) || simulationArea.lastSelected === this || simulationArea.multipleObjectSelections.contains(this)) { ctx.fillStyle = 'rgba(255, 255, 32,0.8)'; }
+
+        ctx.fill();
+        ctx.stroke();
+
+        ctx.beginPath();
+        ctx.font = '20px Georgia';
+        ctx.fillStyle = 'green';
+        ctx.textAlign = 'center';
+        let bin;
+        if (this.state === undefined) { bin = 'x'.repeat(this.bitWidth); } else { bin = dec2bin(this.state, this.bitWidth); }
+
+        for (let k = 0; k < this.bitWidth; k++) { fillText(ctx, bin[k], xx - 10 * this.bitWidth + 10 + (k) * 20, yy + 5); }
+        ctx.fill();
+    }
+
+    /**
+     * @memberof Output
+     * function to change direction of Output
+     * @param {string} dir - new direction
+     */
+    newDirection(dir) {
+        if (dir === this.direction) return;
+        this.direction = dir;
+        this.inp1.refresh();
+        if (dir === 'RIGHT' || dir === 'LEFT') {
+            this.inp1.leftx = 10 * this.bitWidth;
+            this.inp1.lefty = 0;
+        } else {
+            this.inp1.leftx = 10; // 10*this.bitWidth;
+            this.inp1.lefty = 0;
+        }
+
+        this.inp1.refresh();
+        this.labelDirection = oppositeDirection[this.direction];
+    }
+}
+
+/**
+ * @memberof Output
+ * Help Tip
+ * @type {string}
+ * @category modules
+ */
+Output.prototype.tooltipText = 'Output ToolTip: Simple output element showing output in binary.';
+
+/**
+ * @memberof Output
+ * Help URL
+ * @type {string}
+ * @category modules
+ */
+Output.prototype.helplink = 'https://docs.circuitverse.org/#/outputs?id=output';
+
+/**
+ * @memberof Output
+ * @type {number}
+ * @category modules
+ */
+Output.prototype.propagationDelay = 0;
+Output.prototype.objectType = 'Output';
diff --git a/src/modules/Power.js b/src/modules/Power.js
new file mode 100755
index 0000000..8bcf119
--- /dev/null
+++ b/src/modules/Power.js
@@ -0,0 +1,127 @@
+import CircuitElement from '../circuitElement';
+import Node, { findNode } from '../node';
+import simulationArea from '../simulationArea';
+import {
+    correctWidth, lineTo, moveTo, arc,
+} from '../canvasApi';
+import { changeInputSize } from '../modules';
+/**
+ * @class
+ * Power
+ * @extends CircuitElement
+ * @param {number} x - x coordinate of element.
+ * @param {number} y - y coordinate of element.
+ * @param {Scope=} scope - Cirucit on which element is drawn
+ * @param {number=} bitWidth - bit width per node.
+ * @category modules
+ */
+export default class Power extends CircuitElement {
+    constructor(x, y, scope = globalScope, bitWidth = 1) {
+        super(x, y, scope, 'RIGHT', bitWidth);
+        /* this is done in this.baseSetup() now
+        this.scope['Power'].push(this);
+        */
+        this.directionFixed = true;
+        this.rectangleObject = false;
+        this.setDimensions(10, 10);
+        this.output1 = new Node(0, 10, 1, this);
+    }
+
+    /**
+     * @memberof Power
+     * resolve output values based on inputData
+     */
+    resolve() {
+        this.output1.value = ~0 >>> (32 - this.bitWidth);
+        simulationArea.simulationQueue.add(this.output1);
+    }
+
+    /**
+     * @memberof Power
+     * fn to create save Json Data of object
+     * @return {JSON}
+     */
+    customSave() {
+        const data = {
+
+            nodes: {
+                output1: findNode(this.output1),
+            },
+            constructorParamaters: [this.bitWidth],
+        };
+        return data;
+    }
+
+    /**
+     * @memberof Power
+     * function to draw element
+     */
+    customDraw() {
+        const ctx = simulationArea.context;
+        const xx = this.x;
+        const yy = this.y;
+        ctx.beginPath();
+        ctx.strokeStyle = ('rgba(0,0,0,1)');
+        ctx.lineWidth = correctWidth(3);
+        ctx.fillStyle = 'green';
+        moveTo(ctx, 0, -10, xx, yy, this.direction);
+        lineTo(ctx, -10, 0, xx, yy, this.direction);
+        lineTo(ctx, 10, 0, xx, yy, this.direction);
+        lineTo(ctx, 0, -10, xx, yy, this.direction);
+        ctx.closePath();
+        ctx.stroke();
+        if ((this.hover && !simulationArea.shiftDown) || simulationArea.lastSelected === this || simulationArea.multipleObjectSelections.contains(this)) ctx.fillStyle = 'rgba(255, 255, 32,0.8)';
+        ctx.fill();
+        moveTo(ctx, 0, 0, xx, yy, this.direction);
+        lineTo(ctx, 0, 10, xx, yy, this.direction);
+        ctx.stroke();
+    }
+}
+
+/**
+ * @memberof Power
+ * Help Tip
+ * @type {string}
+ * @category modules
+ */
+Power.prototype.tooltipText = 'Power: All bits are High(1).';
+
+/**
+ * @memberof Power
+ * Help URL
+ * @type {string}
+ * @category modules
+ */
+Power.prototype.helplink = 'https://docs.circuitverse.org/#/inputElements?id=power';
+
+/**
+ * @memberof Power
+ * @type {number}
+ * @category modules
+ */
+Power.prototype.propagationDelay = 0;
+
+function getNextPosition(x = 0, scope = globalScope) {
+    let possibleY = 20;
+    const done = {};
+    for (let i = 0; i < scope.Input.length; i++) {
+        if (scope.Input[i].layoutProperties.x === x) { done[scope.Input[i].layoutProperties.y] = 1; }
+    }
+    for (let i = 0; i < scope.Output.length; i++) {
+        if (scope.Output[i].layoutProperties.x === x) { done[scope.Output[i].layoutProperties.y] = 1; }
+    }
+    while (done[possibleY] || done[possibleY + 10] || done[possibleY - 10]) { possibleY += 10; }
+    const height = possibleY + 20;
+    if (height > scope.layout.height) {
+        const oldHeight = scope.layout.height;
+        scope.layout.height = height;
+        for (let i = 0; i < scope.Input.length; i++) {
+            if (scope.Input[i].layoutProperties.y === oldHeight) { scope.Input[i].layoutProperties.y = scope.layout.height; }
+        }
+        for (let i = 0; i < scope.Output.length; i++) {
+            if (scope.Output[i].layoutProperties.y === oldHeight) { scope.Output[i].layoutProperties.y = scope.layout.height; }
+        }
+    }
+    return possibleY;
+}
+Power.prototype.objectType = 'Power';
diff --git a/src/modules/PriorityEncoder.js b/src/modules/PriorityEncoder.js
new file mode 100755
index 0000000..b7912ce
--- /dev/null
+++ b/src/modules/PriorityEncoder.js
@@ -0,0 +1,165 @@
+import CircuitElement from '../circuitElement';
+import Node, { findNode, dec2bin } from '../node';
+import simulationArea from '../simulationArea';
+import { correctWidth, rect, fillText } from '../canvasApi';
+/**
+ * @class
+ * PriorityEncoder
+ * @extends CircuitElement
+ * @param {number} x - x coordinate of element.
+ * @param {number} y - y coordinate of element.
+ * @param {Scope=} scope - Cirucit on which element is drawn
+ * @param {string=} dir - direction of element
+ * @param {number=} bitWidth - bit width per node.
+ * @category modules
+ */
+export default class PriorityEncoder extends CircuitElement {
+    constructor(x, y, scope = globalScope, dir = 'RIGHT', bitWidth = 1) {
+        super(x, y, scope, dir, bitWidth);
+        /* this is done in this.baseSetup() now
+        this.scope['PriorityEncoder'].push(this);
+        */
+        this.bitWidth = bitWidth || parseInt(prompt('Enter bitWidth'), 10);
+        this.inputSize = 1 << this.bitWidth;
+
+        this.yOff = 1;
+        if (this.bitWidth <= 3) {
+            this.yOff = 2;
+        }
+
+        this.setDimensions(20, this.yOff * 5 * (this.inputSize));
+        this.directionFixed = true;
+        this.rectangleObject = false;
+
+        this.inp1 = [];
+        for (let i = 0; i < this.inputSize; i++) {
+            const a = new Node(-10, +this.yOff * 10 * (i - this.inputSize / 2) + 10, 0, this, 1);
+            this.inp1.push(a);
+        }
+
+        this.output1 = [];
+        for (let i = 0; i < this.bitWidth; i++) {
+            const a = new Node(30, +2 * 10 * (i - this.bitWidth / 2) + 10, 1, this, 1);
+            this.output1.push(a);
+        }
+
+        this.enable = new Node(10, 20 + this.inp1[this.inputSize - 1].y, 1, this, 1);
+    }
+
+    /**
+     * @memberof PriorityEncoder
+     * fn to create save Json Data of object
+     * @return {JSON}
+     */
+    customSave() {
+        const data = {
+
+            nodes: {
+                inp1: this.inp1.map(findNode),
+                output1: this.output1.map(findNode),
+                enable: findNode(this.enable),
+            },
+            constructorParamaters: [this.direction, this.bitWidth],
+        };
+        return data;
+    }
+
+    /**
+     * @memberof PriorityEncoder
+     * function to change bitwidth of the element
+     * @param {number} bitWidth - new bitwidth
+     */
+    newBitWidth(bitWidth) {
+        if (bitWidth === undefined || bitWidth < 1 || bitWidth > 32) return;
+        if (this.bitWidth === bitWidth) return;
+
+        this.bitWidth = bitWidth;
+        const obj = new PriorityEncoder(this.x, this.y, this.scope, this.direction, this.bitWidth);
+        this.inputSize = 1 << bitWidth;
+
+        this.cleanDelete();
+        simulationArea.lastSelected = obj;
+        return obj;
+    }
+
+    /**
+     * @memberof PriorityEncoder
+     * resolve output values based on inputData
+     */
+    resolve() {
+        let out = 0;
+        let temp = 0;
+        for (let i = this.inputSize - 1; i >= 0; i--) {
+            if (this.inp1[i].value === 1) {
+                out = dec2bin(i);
+                break;
+            }
+        }
+        temp = out;
+
+        if (out.length !== undefined) {
+            this.enable.value = 1;
+        } else {
+            this.enable.value = 0;
+        }
+        simulationArea.simulationQueue.add(this.enable);
+
+        if (temp.length === undefined) {
+            temp = '0';
+            for (let i = 0; i < this.bitWidth - 1; i++) {
+                temp = `0${temp}`;
+            }
+        }
+
+        if (temp.length !== this.bitWidth) {
+            for (let i = temp.length; i < this.bitWidth; i++) {
+                temp = `0${temp}`;
+            }
+        }
+
+        for (let i = this.bitWidth - 1; i >= 0; i--) {
+            this.output1[this.bitWidth - 1 - i].value = Number(temp[i]);
+            simulationArea.simulationQueue.add(this.output1[this.bitWidth - 1 - i]);
+        }
+    }
+
+    /**
+     * @memberof PriorityEncoder
+     * function to draw element
+     */
+    customDraw() {
+        const ctx = simulationArea.context;
+        ctx.beginPath();
+        ctx.strokeStyle = 'black';
+        ctx.fillStyle = 'white';
+        ctx.lineWidth = correctWidth(3);
+        const xx = this.x;
+        const yy = this.y;
+        if (this.bitWidth <= 3) { rect(ctx, xx - 10, yy - 10 - this.yOff * 5 * (this.inputSize), 40, 20 * (this.inputSize + 1)); } else { rect(ctx, xx - 10, yy - 10 - this.yOff * 5 * (this.inputSize), 40, 10 * (this.inputSize + 3)); }
+        if ((this.hover && !simulationArea.shiftDown) || simulationArea.lastSelected === this || simulationArea.multipleObjectSelections.contains(this)) ctx.fillStyle = 'rgba(255, 255, 32,0.8)';
+        ctx.fill();
+        ctx.stroke();
+
+        ctx.beginPath();
+        ctx.fillStyle = 'black';
+        ctx.textAlign = 'center';
+        for (let i = 0; i < this.inputSize; i++) {
+            fillText(ctx, String(i), xx, yy + this.inp1[i].y + 2, 10);
+        }
+        for (let i = 0; i < this.bitWidth; i++) {
+            fillText(ctx, String(i), xx + this.output1[0].x - 10, yy + this.output1[i].y + 2, 10);
+        }
+        fillText(ctx, 'EN', xx + this.enable.x, yy + this.enable.y - 5, 10);
+        ctx.fill();
+    }
+}
+
+/**
+ * @memberof PriorityEncoder
+ * Help Tip
+ * @type {string}
+ * @category modules
+ */
+PriorityEncoder.prototype.tooltipText = 'Priority Encoder ToolTip : Compresses binary inputs into a smaller number of outputs.';
+PriorityEncoder.prototype.helplink = 'https://docs.circuitverse.org/#/decodersandplexers?id=priority-encoder';
+PriorityEncoder.prototype.objectType = 'PriorityEncoder';
diff --git a/src/modules/RGBLed.js b/src/modules/RGBLed.js
new file mode 100755
index 0000000..e989dd9
--- /dev/null
+++ b/src/modules/RGBLed.js
@@ -0,0 +1,122 @@
+import CircuitElement from '../circuitElement';
+import Node, { findNode } from '../node';
+import simulationArea from '../simulationArea';
+import {
+    correctWidth, lineTo, moveTo, arc,
+} from '../canvasApi';
+import { changeInputSize } from '../modules';
+/**
+ * @class
+ * RGBLed
+ * @extends CircuitElement
+ * @param {number} x - x coordinate of element.
+ * @param {number} y - y coordinate of element.
+ * @param {Scope=} scope - Cirucit on which element is drawn
+ * @category modules
+ */
+export default class RGBLed extends CircuitElement {
+    constructor(x, y, scope = globalScope) {
+        // Calling base class constructor
+        super(x, y, scope, 'UP', 8);
+        /* this is done in this.baseSetup() now
+        this.scope['RGBLed'].push(this);
+        */
+        this.rectangleObject = false;
+        this.inp = [];
+        this.setDimensions(10, 10);
+        this.inp1 = new Node(-40, -10, 0, this, 8);
+        this.inp2 = new Node(-40, 0, 0, this, 8);
+        this.inp3 = new Node(-40, 10, 0, this, 8);
+        this.inp.push(this.inp1);
+        this.inp.push(this.inp2);
+        this.inp.push(this.inp3);
+        this.directionFixed = true;
+        this.fixedBitWidth = true;
+    }
+
+    /**
+     * @memberof RGBLed
+     * fn to create save Json Data of object
+     * @return {JSON}
+     */
+    customSave() {
+        const data = {
+            nodes: {
+                inp1: findNode(this.inp1),
+                inp2: findNode(this.inp2),
+                inp3: findNode(this.inp3),
+            },
+        };
+        return data;
+    }
+
+    /**
+     * @memberof RGBLed
+     * function to draw element
+     */
+    customDraw() {
+        const ctx = simulationArea.context;
+
+        const xx = this.x;
+        const yy = this.y;
+
+        ctx.strokeStyle = 'green';
+        ctx.lineWidth = correctWidth(3);
+        ctx.beginPath();
+        moveTo(ctx, -20, 0, xx, yy, this.direction);
+        lineTo(ctx, -40, 0, xx, yy, this.direction);
+        ctx.stroke();
+
+        ctx.strokeStyle = 'red';
+        ctx.lineWidth = correctWidth(3);
+        ctx.beginPath();
+        moveTo(ctx, -20, -10, xx, yy, this.direction);
+        lineTo(ctx, -40, -10, xx, yy, this.direction);
+        ctx.stroke();
+
+        ctx.strokeStyle = 'blue';
+        ctx.lineWidth = correctWidth(3);
+        ctx.beginPath();
+        moveTo(ctx, -20, 10, xx, yy, this.direction);
+        lineTo(ctx, -40, 10, xx, yy, this.direction);
+        ctx.stroke();
+
+        const a = this.inp1.value;
+        const b = this.inp2.value;
+        const c = this.inp3.value;
+        ctx.strokeStyle = '#d3d4d5';
+        ctx.fillStyle = [`rgba(${a}, ${b}, ${c}, 0.8)`, 'rgba(227, 228, 229, 0.8)'][((a === undefined || b === undefined || c === undefined)) + 0];
+        // ctx.fillStyle = ["rgba(200, 200, 200, 0.3)","rgba(227, 228, 229, 0.8)"][((a === undefined || b === undefined || c === undefined) || (a === 0 && b === 0 && c === 0)) + 0];
+        ctx.lineWidth = correctWidth(1);
+
+        ctx.beginPath();
+
+        moveTo(ctx, -18, -11, xx, yy, this.direction);
+        lineTo(ctx, 0, -11, xx, yy, this.direction);
+        arc(ctx, 0, 0, 11, (-Math.PI / 2), (Math.PI / 2), xx, yy, this.direction);
+        lineTo(ctx, -18, 11, xx, yy, this.direction);
+        lineTo(ctx, -21, 15, xx, yy, this.direction);
+        arc(ctx, 0, 0, Math.sqrt(666), ((Math.PI / 2) + Math.acos(15 / Math.sqrt(666))), ((-Math.PI / 2) - Math.asin(21 / Math.sqrt(666))), xx, yy, this.direction);
+        lineTo(ctx, -18, -11, xx, yy, this.direction);
+        ctx.stroke();
+        if ((this.hover && !simulationArea.shiftDown) || simulationArea.lastSelected === this || simulationArea.multipleObjectSelections.contains(this)) ctx.fillStyle = 'rgba(255, 255, 32,0.8)';
+        ctx.fill();
+    }
+}
+
+/**
+ * @memberof RGBLed
+ * Help Tip
+ * @type {string}
+ * @category modules
+ */
+RGBLed.prototype.tooltipText = 'RGB Led ToolTip: RGB Led inputs 8 bit values for the colors RED, GREEN and BLUE.';
+
+/**
+ * @memberof RGBLed
+ * Help URL
+ * @type {string}
+ * @category modules
+ */
+RGBLed.prototype.helplink = 'https://docs.circuitverse.org/#/outputs?id=rgb-led';
+RGBLed.prototype.objectType = 'RGBLed';
diff --git a/src/modules/RGBLedMatrix.js b/src/modules/RGBLedMatrix.js
new file mode 100644
index 0000000..d69b12e
--- /dev/null
+++ b/src/modules/RGBLedMatrix.js
@@ -0,0 +1,330 @@
+import CircuitElement from '../circuitElement';
+import Node, { findNode } from '../node';
+import simulationArea from '../simulationArea';
+import {
+    correctWidth, rect2, rotate, lineTo, moveTo,
+} from '../canvasApi';
+
+/**
+ * @class
+ * RGBLedMatrix
+ * @extends CircuitElement
+ * @param {number} x - x coordinate of element.
+ * @param {number} y - y coordinate of element.
+ * @param {Scope=} scope - Cirucit on which element is drawn
+ * @param {number=} rows - number of rows
+ * @param {number=} cols - number of columns.
+ * @category modules
+ */
+export default class RGBLedMatrix extends CircuitElement {
+    constructor(
+        x,
+        y,
+        scope = globalScope,
+        {
+            rows = 8,
+            columns = 8,
+            ledSize = 2,
+            showGrid = true,
+            colors = [],
+        } = {},
+    ) {
+        super(x, y, scope, 'RIGHT', 8);
+        /* this is done in this.baseSetup() now
+        this.scope['RGBLedMatrix'].push(this);
+        */
+        this.fixedBitWidth = true;
+        this.directionFixed = true;
+        this.rectangleObject = true;
+        this.alwaysResolve = true;
+        this.labelDirection = 'UP';
+        this.leftDimensionX = 0;
+        this.upDimensionY = 0;
+
+        // These pins provide bulk-editing of the colors
+        this.rowEnableNodes = []; // 1-bit pin for each row, on the left side.
+        this.columnEnableNodes = []; // 1-bit pin for each column, on the bottom.
+        this.columnColorNodes = []; // 24-bit pin for each column, on the top.
+
+        // These pins provide single-pixel editing; these are on the right side.
+        this.colorNode = new Node(0, -10, NODE_INPUT, this, 24, 'COLOR');
+        this.rowNode = new Node(0, 0, NODE_INPUT, this, 1, 'ROW');
+        this.columnNode = new Node(0, 10, NODE_INPUT, this, 1, 'COLUMN');
+
+        this.colors = colors;
+        this.showGrid = showGrid;
+        this.changeSize(rows, columns, ledSize, false);
+    }
+
+    toggleGrid() {
+        this.showGrid = !this.showGrid;
+    }
+
+    changeRows(rows) {
+        this.changeSize(rows, this.columns, this.ledSize, true);
+    }
+
+    changeColumns(columns) {
+        this.changeSize(this.rows, columns, this.ledSize, true);
+    }
+
+    changeLedSize(ledSize) {
+        this.changeSize(this.rows, this.columns, ledSize, true);
+    }
+
+    changeSize(rows, columns, ledSize, move) {
+        rows = parseInt(rows, 10);
+        if (isNaN(rows) || rows < 0 || rows > this.maxRows) return;
+
+        columns = parseInt(columns, 10);
+        if (isNaN(columns) || columns < 0 || columns > this.maxColumns) return;
+
+        ledSize = parseInt(ledSize, 10);
+        if (isNaN(ledSize) || ledSize < 0 || ledSize > this.maxLedSize) return;
+
+        // The size of an individual LED, in canvas units.
+        const ledWidth = 10 * ledSize;
+        const ledHeight = 10 * ledSize;
+
+        // The size of the LED matrix, in canvas units.
+        const gridWidth = ledWidth * columns;
+        const gridHeight = ledHeight * rows;
+
+        // We need to position the element in the 10x10 grid.
+        // Depending on the size of the leds we need to add different paddings so position correctly.
+        const padding = ledSize % 2 ? 5 : 10;
+
+        // The dimensions of the element, in canvas units.
+        const halfWidth = gridWidth / 2 + padding;
+        const halfHeight = gridHeight / 2 + padding;
+
+        // Move the element in order to keep the position of the nodes stable so wires don't break.
+        if (move) {
+            this.x -= this.leftDimensionX - halfWidth;
+            this.y -= this.upDimensionY - halfHeight;
+        }
+
+        // Update the dimensions of the element.
+        this.setDimensions(halfWidth, halfHeight);
+
+        // Offset of the nodes in relation to the element's center.
+        const nodePadding = [10, 20, 20][ledSize - 1];
+        const nodeOffsetX = nodePadding - halfWidth;
+        const nodeOffsetY = nodePadding - halfHeight;
+
+        // When the led size changes it is better to delete all nodes to break connected the wires.
+        // Otherwise, wires can end up connected in unexpected ways.
+        const resetAllNodes = ledSize != this.ledSize;
+
+        // Delete unused row-enable nodes, reposition remaining nodes and add new nodes.
+        this.rowEnableNodes.splice(resetAllNodes ? 0 : rows).forEach((node) => node.delete());
+        this.rowEnableNodes.forEach((node, i) => {
+            node.x = node.leftx = -halfWidth;
+            node.y = node.lefty = i * ledHeight + nodeOffsetY;
+        });
+        while (this.rowEnableNodes.length < rows) {
+            this.rowEnableNodes.push(new Node(-halfWidth, this.rowEnableNodes.length * ledHeight + nodeOffsetY, NODE_INPUT, this, 1, `R${this.rowEnableNodes.length}`));
+        }
+
+        // Delete unused column-enable nodes, reposition remaining nodes and add new nodes.
+        this.columnEnableNodes.splice(resetAllNodes ? 0 : columns).forEach((node) => node.delete());
+        this.columnEnableNodes.forEach((node, i) => {
+            node.x = node.leftx = i * ledWidth + nodeOffsetX;
+            node.y = node.lefty = halfHeight;
+        });
+        while (this.columnEnableNodes.length < columns) {
+            this.columnEnableNodes.push(new Node(this.columnEnableNodes.length * ledWidth + nodeOffsetX, halfHeight, NODE_INPUT, this, 1, `C${this.columnEnableNodes.length}`));
+        }
+
+        // Delete unused column color nodes, reposition remaining nodes and add new nodes.
+        this.columnColorNodes.splice(resetAllNodes ? 0 : columns).forEach((node) => node.delete());
+        this.columnColorNodes.forEach((node, i) => {
+            node.x = node.leftx = i * ledWidth + nodeOffsetX;
+            node.y = node.lefty = -halfHeight;
+        });
+        while (this.columnColorNodes.length < columns) {
+            this.columnColorNodes.push(new Node(this.columnColorNodes.length * ledWidth + nodeOffsetX, -halfHeight, NODE_INPUT, this, 24, `CLR${this.columnColorNodes.length}`));
+        }
+
+        // Delete unused color storage and add storage for new rows.
+        this.colors.splice(rows);
+        this.colors.forEach((c) => c.splice(columns));
+        while (this.colors.length < rows) {
+            this.colors.push([]);
+        }
+
+        // Reposition the single-pixel nodes
+        this.rowNode.bitWidth = Math.ceil(Math.log2(rows));
+        this.rowNode.label = `ROW (${this.rowNode.bitWidth} bits)`;
+        this.columnNode.bitWidth = Math.ceil(Math.log2(columns));
+        this.columnNode.label = `COLUMN (${this.columnNode.bitWidth} bits)`;
+        const singlePixelNodePadding = rows > 1 ? nodeOffsetY : nodeOffsetY - 10;
+        const singlePixelNodeDistance = (rows <= 2) ? 10 : ledHeight;
+        [this.colorNode, this.rowNode, this.columnNode].forEach((node, i) => {
+            node.x = node.leftx = halfWidth;
+            node.y = node.lefty = i * singlePixelNodeDistance + singlePixelNodePadding;
+        });
+
+        // Store the new values
+        this.rows = rows;
+        this.columns = columns;
+        this.ledSize = ledSize;
+
+        return this;
+    }
+
+    customSave() {
+        // Save the size of the LED matrix.
+        // Unlike a read LED matrix, we also persist the color of each pixel.
+        // This allows circuit preview to show the colors at the time the simulation was saved.
+        return {
+            constructorParamaters: [{
+                rows: this.rows,
+                columns: this.columns,
+                ledSize: this.ledSize,
+                showGrid: this.showGrid,
+                colors: this.colors,
+            }],
+            nodes: {
+                rowEnableNodes: this.rowEnableNodes.map(findNode),
+                columnEnableNodes: this.columnEnableNodes.map(findNode),
+                columnColorNodes: this.columnColorNodes.map(findNode),
+                colorNode: findNode(this.colorNode),
+                rowNode: findNode(this.rowNode),
+                columnNode: findNode(this.columnNode),
+            },
+        };
+    }
+
+    resolve() {
+        const colorValue = this.colorNode.value;
+        const hasColorValue = colorValue != undefined;
+
+        const { rows } = this;
+        const { columns } = this;
+        const { rowEnableNodes } = this;
+        const { columnEnableNodes } = this;
+        const { columnColorNodes } = this;
+        const { colors } = this;
+
+        for (let row = 0; row < rows; row++) {
+            if (rowEnableNodes[row].value === 1) {
+                for (let column = 0; column < columns; column++) {
+                    // Method 1: set pixel by rowEnable + columnColor pins
+                    const columnColor = columnColorNodes[column].value;
+                    if (columnColor !== undefined) {
+                        colors[row][column] = columnColor;
+                    }
+
+                    // Method 2: set pixel by rowEnable + columnEnable + color pins
+                    if (hasColorValue && columnEnableNodes[column].value === 1) {
+                        colors[row][column] = colorValue;
+                    }
+                }
+            }
+        }
+
+        // Method 3: set pixel by write + pixel index + color pins.
+        const hasRowNodeValue = this.rowNode.value != undefined || rows == 1;
+        const hasColumnNodeValue = this.columnNode.value != undefined || columns == 1;
+        if (hasColorValue && hasRowNodeValue && hasColumnNodeValue) {
+            const rowNodeValue = this.rowNode.value || 0;
+            const columnNodeValue = this.columnNode.value || 0;
+            if (rowNodeValue < rows && columnNodeValue < columns) {
+                colors[rowNodeValue][columnNodeValue] = colorValue;
+            }
+        }
+    }
+
+    customDraw() {
+        const ctx = simulationArea.context;
+        const { rows } = this;
+        const { columns } = this;
+        const { colors } = this;
+        const xx = this.x;
+        const yy = this.y;
+        const dir = this.direction;
+        const ledWidth = 10 * this.ledSize;
+        const ledHeight = 10 * this.ledSize;
+        const top = this.rowEnableNodes[0].y - ledHeight / 2;
+        const left = this.columnColorNodes[0].x - ledWidth / 2;
+        const width = this.columns * ledWidth;
+        const height = this.rows * ledHeight;
+        const bottom = top + height;
+        const right = left + width;
+
+        const [w, h] = rotate(ledWidth * globalScope.scale, ledHeight * globalScope.scale, dir);
+        const xoffset = Math.round(globalScope.ox + xx * globalScope.scale);
+        const yoffset = Math.round(globalScope.oy + yy * globalScope.scale);
+        for (let row = 0; row < rows; row++) {
+            for (let column = 0; column < columns; column++) {
+                const color = colors[row][column] || 0;
+                ctx.beginPath();
+                ctx.fillStyle = `rgb(${(color & 0xFF0000) >> 16},${(color & 0xFF00) >> 8},${color & 0xFF})`;
+                let x1; let
+                    y1;
+                [x1, y1] = rotate(left + column * ledWidth, top + row * ledHeight, dir);
+                x1 *= globalScope.scale;
+                y1 *= globalScope.scale;
+                ctx.rect(xoffset + x1, yoffset + y1, w, h);
+                ctx.fill();
+            }
+        }
+
+        if (this.showGrid) {
+            ctx.beginPath();
+            ctx.strokeStyle = '#323232';
+            ctx.lineWidth = correctWidth(1);
+            rect2(ctx, left, top, width, height, xx, yy, dir);
+            for (let x = left + ledWidth; x < right; x += ledWidth) {
+                moveTo(ctx, x, top, xx, yy, dir);
+                lineTo(ctx, x, bottom, xx, yy, dir);
+            }
+            for (let y = top + ledHeight; y < bottom; y += ledHeight) {
+                moveTo(ctx, left, y, xx, yy, dir);
+                lineTo(ctx, right, y, xx, yy, dir);
+            }
+            ctx.stroke();
+        }
+    }
+}
+
+RGBLedMatrix.prototype.tooltipText = 'RGB Led Matrix';
+
+// Limit the size of the matrix otherwise the simulation starts to lag.
+RGBLedMatrix.prototype.maxRows = 128;
+RGBLedMatrix.prototype.maxColumns = 128;
+
+// Let the user choose between 3 sizes of LEDs: small, medium and large.
+RGBLedMatrix.prototype.maxLedSize = 3;
+
+RGBLedMatrix.prototype.mutableProperties = {
+    rows: {
+        name: 'Rows',
+        type: 'number',
+        max: RGBLedMatrix.prototype.maxRows,
+        min: 1,
+        func: 'changeRows',
+    },
+    columns: {
+        name: 'Columns',
+        type: 'number',
+        max: RGBLedMatrix.prototype.maxColumns,
+        min: 1,
+        func: 'changeColumns',
+    },
+    ledSize: {
+        name: 'LED Size',
+        type: 'number',
+        max: RGBLedMatrix.prototype.maxLedSize,
+        min: 1,
+        func: 'changeLedSize',
+    },
+    showGrid: {
+        name: 'Toggle Grid',
+        type: 'button',
+        max: RGBLedMatrix.prototype.maxLedSize,
+        min: 1,
+        func: 'toggleGrid',
+    },
+}; RGBLedMatrix.prototype.objectType = 'RGBLedMatrix';
diff --git a/src/modules/Random.js b/src/modules/Random.js
new file mode 100644
index 0000000..31e253d
--- /dev/null
+++ b/src/modules/Random.js
@@ -0,0 +1,107 @@
+import CircuitElement from '../circuitElement';
+import Node, { findNode } from '../node';
+import simulationArea from '../simulationArea';
+import { fillText, lineTo, moveTo } from '../canvasApi';
+/**
+ * @class
+ * Random
+ * Random is used to generate random value.
+ * It has 2 input node:
+ * clock and max random output value
+ * @extends CircuitElement
+ * @param {number} x - x coord of element
+ * @param {number} y - y coord of element
+ * @param {Scope=} scope - the ciruit in which we want the Element
+ * @param {string=} dir - direcion in which element has to drawn
+ * @category modules
+ */
+export default class Random extends CircuitElement {
+    constructor(x, y, scope = globalScope, dir = 'RIGHT', bitWidth = 1) {
+        super(x, y, scope, dir, bitWidth);
+        /* this is done in this.baseSetup() now
+        this.scope['Random'].push(this);
+        */
+        this.directionFixed = true;
+        this.setDimensions(20, 20);
+        this.rectangleObject = true;
+        this.currentRandomNo = 0;
+        this.clockInp = new Node(-20, +10, 0, this, 1, 'Clock');
+        this.maxValue = new Node(-20, -10, 0, this, this.bitWidth, 'MaxValue');
+        this.output = new Node(20, -10, 1, this, this.bitWidth, 'RandomValue');
+        this.prevClockState = 0;
+        this.wasClicked = false;
+    }
+
+    /**
+     * @memberof Random
+     * return true if clock is connected and if maxValue is set or unconnected.
+     */
+    isResolvable() {
+        if (this.clockInp.value != undefined && (this.maxValue.value != undefined || this.maxValue.connections.length == 0)) { return true; }
+        return false;
+    }
+
+    newBitWidth(bitWidth) {
+        this.bitWidth = bitWidth;
+        this.maxValue.bitWidth = bitWidth;
+        this.output.bitWidth = bitWidth;
+    }
+
+    /**
+     * @memberof Random
+     * Edge triggered when the clock state changes a
+     * Random number is generated less then the maxValue.
+     */
+    resolve() {
+        // console.log("HIT")
+        const maxValue = this.maxValue.connections.length ? this.maxValue.value + 1 : (2 << (this.bitWidth - 1));
+        if (this.clockInp.value != undefined) {
+            if (this.clockInp.value != this.prevClockState) {
+                if (this.clockInp.value == 1) {
+                    this.currentRandomNo = Math.floor(Math.random() * maxValue);
+                }
+                this.prevClockState = this.clockInp.value;
+            }
+        }
+        if (this.output.value != this.currentRandomNo) {
+            this.output.value = this.currentRandomNo;
+            simulationArea.simulationQueue.add(this.output);
+        }
+    }
+
+    customSave() {
+        const data = {
+            nodes: {
+                clockInp: findNode(this.clockInp),
+                maxValue: findNode(this.maxValue),
+                output: findNode(this.output),
+            },
+            constructorParamaters: [this.direction, this.bitWidth],
+
+        };
+        return data;
+    }
+
+    customDraw() {
+        const ctx = simulationArea.context;
+        ctx.beginPath();
+        const xx = this.x;
+        const yy = this.y;
+        ctx.font = '20px Georgia';
+        ctx.fillStyle = 'green';
+        ctx.textAlign = 'center';
+        fillText(ctx, this.currentRandomNo.toString(10), this.x, this.y + 5);
+        ctx.fill();
+        ctx.beginPath();
+        moveTo(ctx, -20, 5, xx, yy, this.direction);
+        lineTo(ctx, -15, 10, xx, yy, this.direction);
+        lineTo(ctx, -20, 15, xx, yy, this.direction);
+        ctx.stroke();
+    }
+}
+
+Random.prototype.tooltipText = 'Random ToolTip : Random Selected.';
+
+Random.prototype.helplink = 'https://docs.circuitverse.org/#/inputElements?id=random';
+
+Random.prototype.objectType = 'Random';
diff --git a/src/modules/Rectangle.js b/src/modules/Rectangle.js
new file mode 100755
index 0000000..ec191ff
--- /dev/null
+++ b/src/modules/Rectangle.js
@@ -0,0 +1,146 @@
+import CircuitElement from '../circuitElement';
+import Node, { findNode } from '../node';
+import simulationArea from '../simulationArea';
+import { correctWidth, rect } from '../canvasApi';
+/**
+ * @class
+ * Rectangle
+ * @extends CircuitElement
+ * @param {number} x - x coordinate of element.
+ * @param {number} y - y coordinate of element.
+ * @param {Scope=} scope - Cirucit on which element is drawn
+ * @param {number=} rows - number of rows
+ * @param {number=} cols - number of columns.
+ * @category modules
+ */
+export default class Rectangle extends CircuitElement {
+    constructor(x, y, scope = globalScope, rows = 15, cols = 20) {
+        super(x, y, scope, 'RIGHT', 1);
+        /* this is done in this.baseSetup() now
+        this.scope['Rectangle'].push(this);
+        */
+        this.directionFixed = true;
+        this.fixedBitWidth = true;
+        this.rectangleObject = false;
+        this.cols = cols || parseInt(prompt('Enter cols:'), 10);
+        this.rows = rows || parseInt(prompt('Enter rows:'), 10);
+        this.setSize();
+    }
+
+    /**
+     * @memberof Rectangle
+     * @param {number} size - new size of rows
+     */
+    changeRowSize(size) {
+        if (size === undefined || size < 5 || size > 1000) return;
+        if (this.rows === size) return;
+        this.rows = parseInt(size, 10);
+        this.setSize();
+        return this;
+    }
+
+    /**
+     * @memberof Rectangle
+     * @param {number} size - new size of columns
+     */
+    changeColSize(size) {
+        if (size === undefined || size < 5 || size > 1000) return;
+        if (this.cols === size) return;
+        this.cols = parseInt(size, 10);
+        this.setSize();
+        return this;
+    }
+
+    /**
+     * @memberof Rectangle
+     * listener function to change direction of rectangle
+     * @param {string} dir - new direction
+     */
+    keyDown3(dir) {
+        if (dir === 'ArrowRight') { this.changeColSize(this.cols + 2); }
+        if (dir === 'ArrowLeft') { this.changeColSize(this.cols - 2); }
+        if (dir === 'ArrowDown') { this.changeRowSize(this.rows + 2); }
+        if (dir === 'ArrowUp') { this.changeRowSize(this.rows - 2); }
+    }
+
+    /**
+     * @memberof Rectangle
+     * fn to create save Json Data of object
+     * @return {JSON}
+     */
+    customSave() {
+        const data = {
+            constructorParamaters: [this.rows, this.cols],
+        };
+        return data;
+    }
+
+    /**
+     * @memberof Rectangle
+     * function to draw element
+     */
+    customDraw() {
+        const ctx = simulationArea.context;
+        ctx.beginPath();
+        ctx.strokeStyle = 'rgba(0,0,0,1)';
+        ctx.setLineDash([5 * globalScope.scale, 5 * globalScope.scale]);
+        ctx.lineWidth = correctWidth(1.5);
+        const xx = this.x;
+        const yy = this.y;
+        rect(ctx, xx, yy, this.elementWidth, this.elementHeight);
+        ctx.stroke();
+
+        if (simulationArea.lastSelected === this || simulationArea.multipleObjectSelections.contains(this)) {
+            ctx.fillStyle = 'rgba(255, 255, 32,0.1)';
+            ctx.fill();
+        }
+        ctx.setLineDash([]);
+    }
+
+    /**
+     * @memberof Rectangle
+     * function to reset or (internally) set size
+     */
+    setSize() {
+        this.elementWidth = this.cols * 10;
+        this.elementHeight = this.rows * 10;
+        this.upDimensionY = 0;
+        this.leftDimensionX = 0;
+        this.rightDimensionX = this.elementWidth;
+        this.downDimensionY = this.elementHeight;
+    }
+}
+
+/**
+ * @memberof Rectangle
+ * Help Tip
+ * @type {string}
+ * @category modules
+ */
+Rectangle.prototype.tooltipText = 'Rectangle ToolTip : Used to Box the Circuit or area you want to highlight.';
+Rectangle.prototype.helplink = 'https://docs.circuitverse.org/#/annotation?id=rectangle';
+Rectangle.prototype.propagationDelayFixed = true;
+
+/**
+ * @memberof Rectangle
+ * Mutable properties of the element
+ * @type {JSON}
+ * @category modules
+ */
+Rectangle.prototype.mutableProperties = {
+    cols: {
+        name: 'Columns',
+        type: 'number',
+        max: '1000',
+        min: '5',
+        func: 'changeColSize',
+    },
+    rows: {
+        name: 'Rows',
+        type: 'number',
+        max: '1000',
+        min: '5',
+        func: 'changeRowSize',
+    },
+};
+Rectangle.prototype.objectType = 'Rectangle';
diff --git a/src/modules/Rom.js b/src/modules/Rom.js
new file mode 100755
index 0000000..485511d
--- /dev/null
+++ b/src/modules/Rom.js
@@ -0,0 +1,202 @@
+import CircuitElement from '../circuitElement';
+import Node, { findNode } from '../node';
+import simulationArea from '../simulationArea';
+import {
+    correctWidth, lineTo, moveTo, arc,
+} from '../canvasApi';
+import { changeInputSize } from '../modules';
+/**
+ * @class
+ * Rom
+ * @extends CircuitElement
+ * @param {number} x - x coordinate of element.
+ * @param {number} y - y coordinate of element.
+ * @param {Scope=} scope - Cirucit on which element is drawn
+ * @param {Array=} data - bit width per node.
+ * @category modules
+ */
+export default class Rom extends CircuitElement {
+    constructor(
+        x,
+        y,
+        scope = globalScope,
+        data = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+    ) {
+        super(x, y, scope, 'RIGHT', 1);
+        /* this is done in this.baseSetup() now
+        this.scope['Rom'].push(this);
+        */
+        this.fixedBitWidth = true;
+        this.directionFixed = true;
+        this.rectangleObject = false;
+        this.setDimensions(80, 50);
+        this.memAddr = new Node(-80, 0, 0, this, 4, 'Address');
+        this.en = new Node(0, 50, 0, this, 1, 'Enable');
+        this.dataOut = new Node(80, 0, 1, this, 8, 'DataOut');
+        this.data = data || prompt('Enter data').split(' ').map((lambda) => parseInt(lambda, 16));
+        // console.log(this.data);
+    }
+
+    /**
+     * @memberof Rom
+     * Checks if the element is resolvable
+     * @return {boolean}
+     */
+    isResolvable() {
+        if ((this.en.value === 1 || this.en.connections.length === 0) && this.memAddr.value !== undefined) return true;
+        return false;
+    }
+
+    /**
+     * @memberof Rom
+     * fn to create save Json Data of object
+     * @return {JSON}
+     */
+    customSave() {
+        const data = {
+            constructorParamaters: [this.data],
+            nodes: {
+                memAddr: findNode(this.memAddr),
+                dataOut: findNode(this.dataOut),
+                en: findNode(this.en),
+            },
+
+        };
+        return data;
+    }
+
+    /**
+     * @memberof Rom
+     * function to find position of the index of part of rom selected.
+     * @return {number}
+     */
+    findPos() {
+        const i = Math.floor((simulationArea.mouseX - this.x + 35) / 20);
+        const j = Math.floor((simulationArea.mouseY - this.y + 35) / 16);
+        if (i < 0 || j < 0 || i > 3 || j > 3) return undefined;
+        return j * 4 + i;
+    }
+
+    /**
+     * @memberof Rom
+     * listener function to set selected index
+     * @return {number}
+     */
+    click() { // toggle
+        this.selectedIndex = this.findPos();
+    }
+
+    /**
+     * @memberof Rom
+     * to take input in rom
+     * @return {number}
+     */
+    keyDown(key) {
+        if (key === 'Backspace') this.delete();
+        if (this.selectedIndex === undefined) return;
+        key = key.toLowerCase();
+        if (!~'1234567890abcdef'.indexOf(key)) return;
+
+        this.data[this.selectedIndex] = (this.data[this.selectedIndex] * 16 + parseInt(key, 16)) % 256;
+    }
+
+    /**
+     * @memberof Rom
+     * function to draw element
+     */
+    customDraw() {
+        const ctx = simulationArea.context;
+        const xx = this.x;
+        const yy = this.y;
+        const hoverIndex = this.findPos();
+        ctx.strokeStyle = 'black';
+        ctx.fillStyle = 'white';
+        ctx.lineWidth = correctWidth(3);
+        ctx.beginPath();
+        rect2(ctx, -this.leftDimensionX, -this.upDimensionY, this.leftDimensionX + this.rightDimensionX, this.upDimensionY + this.downDimensionY, this.x, this.y, [this.direction, 'RIGHT'][+this.directionFixed]);
+        if (hoverIndex === undefined && ((!simulationArea.shiftDown && this.hover) || simulationArea.lastSelected === this || simulationArea.multipleObjectSelections.contains(this))) ctx.fillStyle = 'rgba(255, 255, 32,0.8)';
+        ctx.fill();
+        ctx.stroke();
+        ctx.strokeStyle = 'black';
+        ctx.fillStyle = '#fafafa';
+        ctx.lineWidth = correctWidth(1);
+        ctx.beginPath();
+        for (let i = 0; i < 16; i += 4) {
+            for (let j = i; j < i + 4; j++) {
+                rect2(ctx, (j % 4) * 20, i * 4, 20, 16, xx - 35, yy - 35);
+            }
+        }
+        ctx.fill();
+        ctx.stroke();
+        if (hoverIndex !== undefined) {
+            ctx.beginPath();
+            ctx.fillStyle = 'yellow';
+            rect2(ctx, (hoverIndex % 4) * 20, Math.floor(hoverIndex / 4) * 16, 20, 16, xx - 35, yy - 35);
+            ctx.fill();
+            ctx.stroke();
+        }
+        if (this.selectedIndex !== undefined) {
+            ctx.beginPath();
+            ctx.fillStyle = 'lightgreen';
+            rect2(ctx, (this.selectedIndex % 4) * 20, Math.floor(this.selectedIndex / 4) * 16, 20, 16, xx - 35, yy - 35);
+            ctx.fill();
+            ctx.stroke();
+        }
+        if (this.memAddr.value !== undefined) {
+            ctx.beginPath();
+            ctx.fillStyle = 'green';
+            rect2(ctx, (this.memAddr.value % 4) * 20, Math.floor(this.memAddr.value / 4) * 16, 20, 16, xx - 35, yy - 35);
+            ctx.fill();
+            ctx.stroke();
+        }
+
+        ctx.beginPath();
+        ctx.fillStyle = 'Black';
+        fillText3(ctx, 'A', -65, 5, xx, yy, fontSize = 16, font = 'Georgia', textAlign = 'right');
+        fillText3(ctx, 'D', 75, 5, xx, yy, fontSize = 16, font = 'Georgia', textAlign = 'right');
+        fillText3(ctx, 'En', 5, 47, xx, yy, fontSize = 16, font = 'Georgia', textAlign = 'right');
+        ctx.fill();
+
+        ctx.beginPath();
+        ctx.fillStyle = 'Black';
+        for (let i = 0; i < 16; i += 4) {
+            for (let j = i; j < i + 4; j++) {
+                let s = this.data[j].toString(16);
+                if (s.length < 2) s = `0${s}`;
+                fillText3(ctx, s, (j % 4) * 20, i * 4, xx - 35 + 10, yy - 35 + 12, fontSize = 14, font = 'Georgia', textAlign = 'center');
+            }
+        }
+        ctx.fill();
+
+        ctx.beginPath();
+        ctx.fillStyle = 'Black';
+        for (let i = 0; i < 16; i += 4) {
+            let s = i.toString(16);
+            if (s.length < 2) s = `0${s}`;
+            fillText3(ctx, s, 0, i * 4, xx - 40, yy - 35 + 12, fontSize = 14, font = 'Georgia', textAlign = 'right');
+        }
+        ctx.fill();
+    }
+
+    /**
+     * @memberof Rom
+     * resolve output values based on inputData
+     */
+    resolve() {
+        if (this.isResolvable() === false) {
+            return;
+        }
+        this.dataOut.value = this.data[this.memAddr.value];
+        simulationArea.simulationQueue.add(this.dataOut);
+    }
+}
+
+/**
+ * @memberof Rom
+ * Help Tip
+ * @type {string}
+ * @category modules
+ */
+Rom.prototype.tooltipText = 'Read-only memory';
+Rom.prototype.helplink = 'https://docs.circuitverse.org/#/memoryElements?id=rom';
+Rom.prototype.objectType = 'Rom';
diff --git a/src/modules/SevenSegDisplay.js b/src/modules/SevenSegDisplay.js
new file mode 100755
index 0000000..b5f00b2
--- /dev/null
+++ b/src/modules/SevenSegDisplay.js
@@ -0,0 +1,116 @@
+import CircuitElement from '../circuitElement';
+import Node, { findNode } from '../node';
+import simulationArea from '../simulationArea';
+import {
+    correctWidth, lineTo, moveTo, rect,
+} from '../canvasApi';
+
+/**
+ * @class
+ * SevenSegDisplay
+ * @extends CircuitElement
+ * @param {number} x - x coordinate of element.
+ * @param {number} y - y coordinate of element.
+ * @param {Scope=} scope - Cirucit on which element is drawn
+ * @category modules
+ */
+export default class SevenSegDisplay extends CircuitElement {
+    constructor(x, y, scope = globalScope) {
+        super(x, y, scope, 'RIGHT', 1);
+        /* this is done in this.baseSetup() now
+        this.scope['SevenSegDisplay'].push(this);
+        */
+        this.fixedBitWidth = true;
+        this.directionFixed = true;
+        this.setDimensions(30, 50);
+
+        this.g = new Node(-20, -50, 0, this);
+        this.f = new Node(-10, -50, 0, this);
+        this.a = new Node(+10, -50, 0, this);
+        this.b = new Node(+20, -50, 0, this);
+        this.e = new Node(-20, +50, 0, this);
+        this.d = new Node(-10, +50, 0, this);
+        this.c = new Node(+10, +50, 0, this);
+        this.dot = new Node(+20, +50, 0, this);
+        this.direction = 'RIGHT';
+    }
+
+    /**
+     * @memberof SevenSegDisplay
+     * fn to create save Json Data of object
+     * @return {JSON}
+     */
+    customSave() {
+        const data = {
+
+            nodes: {
+                g: findNode(this.g),
+                f: findNode(this.f),
+                a: findNode(this.a),
+                b: findNode(this.b),
+                d: findNode(this.d),
+                e: findNode(this.e),
+                c: findNode(this.c),
+                dot: findNode(this.dot),
+            },
+        };
+        return data;
+    }
+
+    /**
+     * @memberof SevenSegDisplay
+     * helper function to create save Json Data of object
+     */
+    customDrawSegment(x1, y1, x2, y2, color) {
+        if (color === undefined) color = 'lightgrey';
+        const ctx = simulationArea.context;
+        ctx.beginPath();
+        ctx.strokeStyle = color;
+        ctx.lineWidth = correctWidth(5);
+        const xx = this.x;
+        const yy = this.y;
+        moveTo(ctx, x1, y1, xx, yy, this.direction);
+        lineTo(ctx, x2, y2, xx, yy, this.direction);
+        ctx.closePath();
+        ctx.stroke();
+    }
+
+    /**
+     * @memberof SevenSegDisplay
+     * function to draw element
+     */
+    customDraw() {
+        const ctx = simulationArea.context;
+        const xx = this.x;
+        const yy = this.y;
+        this.customDrawSegment(18, -3, 18, -38, ['lightgrey', 'red'][this.b.value]);
+        this.customDrawSegment(18, 3, 18, 38, ['lightgrey', 'red'][this.c.value]);
+        this.customDrawSegment(-18, -3, -18, -38, ['lightgrey', 'red'][this.f.value]);
+        this.customDrawSegment(-18, 3, -18, 38, ['lightgrey', 'red'][this.e.value]);
+        this.customDrawSegment(-17, -38, 17, -38, ['lightgrey', 'red'][this.a.value]);
+        this.customDrawSegment(-17, 0, 17, 0, ['lightgrey', 'red'][this.g.value]);
+        this.customDrawSegment(-15, 38, 17, 38, ['lightgrey', 'red'][this.d.value]);
+        ctx.beginPath();
+        const dotColor = ['lightgrey', 'red'][this.dot.value] || 'lightgrey';
+        ctx.strokeStyle = dotColor;
+        rect(ctx, xx + 22, yy + 42, 2, 2);
+        ctx.stroke();
+    }
+}
+
+/**
+ * @memberof SevenSegDisplay
+ * Help Tip
+ * @type {string}
+ * @category modules
+ */
+SevenSegDisplay.prototype.tooltipText = 'Seven Display ToolTip: Consists of 7+1 single bit inputs.';
+
+/**
+ * @memberof SevenSegDisplay
+ * Help URL
+ * @type {string}
+ * @category modules
+ */
+SevenSegDisplay.prototype.helplink = 'https://docs.circuitverse.org/#/outputs?id=seven-segment-display';
+SevenSegDisplay.prototype.objectType = 'SevenSegDisplay';
diff --git a/src/modules/SixteenSegDisplay.js b/src/modules/SixteenSegDisplay.js
new file mode 100755
index 0000000..da313aa
--- /dev/null
+++ b/src/modules/SixteenSegDisplay.js
@@ -0,0 +1,131 @@
+import CircuitElement from '../circuitElement';
+import Node, { findNode } from '../node';
+import simulationArea from '../simulationArea';
+import {
+    correctWidth, lineTo, moveTo, rect,
+} from '../canvasApi';
+import { changeInputSize } from '../modules';
+/**
+ * @class
+ * SixteenSegDisplay
+ * @extends CircuitElement
+ * @param {number} x - x coordinate of element.
+ * @param {number} y - y coordinate of element.
+ * @param {Scope=} scope - Cirucit on which element is drawn
+ * @category modules
+ */
+export default class SixteenSegDisplay extends CircuitElement {
+    constructor(x, y, scope = globalScope) {
+        super(x, y, scope, 'RIGHT', 16);
+        /* this is done in this.baseSetup() now
+        this.scope['SixteenSegDisplay'].push(this);
+        */
+        this.fixedBitWidth = true;
+        this.directionFixed = true;
+        this.setDimensions(30, 50);
+        this.input1 = new Node(0, -50, 0, this, 16);
+        this.dot = new Node(0, 50, 0, this, 1);
+        this.direction = 'RIGHT';
+    }
+
+    /**
+     * @memberof SixteenSegDisplay
+     * fn to create save Json Data of object
+     * @return {JSON}
+     */
+    customSave() {
+        const data = {
+            nodes: {
+                input1: findNode(this.input1),
+                dot: findNode(this.dot),
+            },
+        };
+        return data;
+    }
+
+    /**
+     * @memberof SixteenSegDisplay
+     * function to draw element
+     */
+    customDrawSegment(x1, y1, x2, y2, color) {
+        if (color === undefined) color = 'lightgrey';
+        const ctx = simulationArea.context;
+        ctx.beginPath();
+        ctx.strokeStyle = color;
+        ctx.lineWidth = correctWidth(4);
+        const xx = this.x;
+        const yy = this.y;
+        moveTo(ctx, x1, y1, xx, yy, this.direction);
+        lineTo(ctx, x2, y2, xx, yy, this.direction);
+        ctx.closePath();
+        ctx.stroke();
+    }
+
+    /**
+     * @memberof SixteenSegDisplay
+     * function to draw element
+     */
+    customDrawSegmentSlant(x1, y1, x2, y2, color) {
+        if (color === undefined) color = 'lightgrey';
+        const ctx = simulationArea.context;
+        ctx.beginPath();
+        ctx.strokeStyle = color;
+        ctx.lineWidth = correctWidth(3);
+        const xx = this.x;
+        const yy = this.y;
+        moveTo(ctx, x1, y1, xx, yy, this.direction);
+        lineTo(ctx, x2, y2, xx, yy, this.direction);
+        ctx.closePath();
+        ctx.stroke();
+    }
+
+    /**
+     * @memberof SixteenSegDisplay
+     * function to draw element
+     */
+    customDraw() {
+        const ctx = simulationArea.context;
+        const xx = this.x;
+        const yy = this.y;
+        const color = ['lightgrey', 'red'];
+        const { value } = this.input1;
+        this.customDrawSegment(-20, -38, 0, -38, ['lightgrey', 'red'][(value >> 15) & 1]);// a1
+        this.customDrawSegment(20, -38, 0, -38, ['lightgrey', 'red'][(value >> 14) & 1]);// a2
+        this.customDrawSegment(21.5, -2, 21.5, -36, ['lightgrey', 'red'][(value >> 13) & 1]);// b
+        this.customDrawSegment(21.5, 2, 21.5, 36, ['lightgrey', 'red'][(value >> 12) & 1]);// c
+        this.customDrawSegment(-20, 38, 0, 38, ['lightgrey', 'red'][(value >> 11) & 1]);// d1
+        this.customDrawSegment(20, 38, 0, 38, ['lightgrey', 'red'][(value >> 10) & 1]);// d2
+        this.customDrawSegment(-21.5, 2, -21.5, 36, ['lightgrey', 'red'][(value >> 9) & 1]);// e
+        this.customDrawSegment(-21.5, -36, -21.5, -2, ['lightgrey', 'red'][(value >> 8) & 1]);// f
+        this.customDrawSegment(-20, 0, 0, 0, ['lightgrey', 'red'][(value >> 7) & 1]);// g1
+        this.customDrawSegment(20, 0, 0, 0, ['lightgrey', 'red'][(value >> 6) & 1]);// g2
+        this.customDrawSegmentSlant(0, 0, -21, -37, ['lightgrey', 'red'][(value >> 5) & 1]);// h
+        this.customDrawSegment(0, -2, 0, -36, ['lightgrey', 'red'][(value >> 4) & 1]);// i
+        this.customDrawSegmentSlant(0, 0, 21, -37, ['lightgrey', 'red'][(value >> 3) & 1]);// j
+        this.customDrawSegmentSlant(0, 0, 21, 37, ['lightgrey', 'red'][(value >> 2) & 1]);// k
+        this.customDrawSegment(0, 2, 0, 36, ['lightgrey', 'red'][(value >> 1) & 1]);// l
+        this.customDrawSegmentSlant(0, 0, -21, 37, ['lightgrey', 'red'][(value >> 0) & 1]);// m
+        ctx.beginPath();
+        const dotColor = ['lightgrey', 'red'][this.dot.value] || 'lightgrey';
+        ctx.strokeStyle = dotColor;
+        rect(ctx, xx + 22, yy + 42, 2, 2);
+        ctx.stroke();
+    }
+}
+
+/**
+ * @memberof SixteenSegDisplay
+ * Help Tip
+ * @type {string}
+ * @category modules
+ */
+SixteenSegDisplay.prototype.tooltipText = 'Sixteen Display ToolTip: Consists of 16+1 bit inputs.';
+
+/**
+ * @memberof SixteenSegDisplay
+ * Help URL
+ * @type {string}
+ * @category modules
+ */
+SixteenSegDisplay.prototype.helplink = 'https://docs.circuitverse.org/#/outputs?id=sixteen-segment-display';
+SixteenSegDisplay.prototype.objectType = 'SixteenSegDisplay';
diff --git a/src/modules/Splitter.js b/src/modules/Splitter.js
new file mode 100755
index 0000000..f7e5595
--- /dev/null
+++ b/src/modules/Splitter.js
@@ -0,0 +1,230 @@
+import CircuitElement from '../circuitElement';
+import Node, { findNode } from '../node';
+import simulationArea from '../simulationArea';
+import {
+    correctWidth, lineTo, moveTo, fillText2,
+} from '../canvasApi';
+
+function extractBits(num, start, end) {
+    return (num << (32 - end)) >>> (32 - (end - start + 1));
+}
+
+/**
+ * @class
+ * Splitter
+ * @extends CircuitElement
+ * @param {number} x - x coordinate of element.
+ * @param {number} y - y coordinate of element.
+ * @param {Scope=} scope - Cirucit on which element is drawn
+ * @param {string=} dir - direction of element
+ * @param {number=} bitWidth - bit width per node.
+ * @param {number=} bitWidthSplit - number of input nodes
+ * @category modules
+ */
+export default class Splitter extends CircuitElement {
+    constructor(
+        x,
+        y,
+        scope = globalScope,
+        dir = 'RIGHT',
+        bitWidth = undefined,
+        bitWidthSplit = undefined,
+    ) {
+        super(x, y, scope, dir, bitWidth);
+        /* this is done in this.baseSetup() now
+        this.scope['Splitter'].push(this);
+        */
+        this.rectangleObject = false;
+
+        this.bitWidthSplit = bitWidthSplit || prompt('Enter bitWidth Split').split(' ').filter((lambda) => lambda !== '').map((lambda) => parseInt(lambda, 10) || 1);
+        this.splitCount = this.bitWidthSplit.length;
+
+        this.setDimensions(10, (this.splitCount - 1) * 10 + 10);
+        this.yOffset = (this.splitCount / 2 - 1) * 20;
+
+        this.inp1 = new Node(-10, 10 + this.yOffset, 0, this, this.bitWidth);
+
+        this.outputs = [];
+        // this.prevOutValues=new Array(this.splitCount)
+        for (let i = 0; i < this.splitCount; i++) { this.outputs.push(new Node(20, i * 20 - this.yOffset - 20, 0, this, this.bitWidthSplit[i])); }
+
+        this.prevInpValue = undefined;
+    }
+
+    /**
+     * @memberof Splitter
+     * fn to create save Json Data of object
+     * @return {JSON}
+     */
+    customSave() {
+        const data = {
+
+            constructorParamaters: [this.direction, this.bitWidth, this.bitWidthSplit],
+            nodes: {
+                outputs: this.outputs.map(findNode),
+                inp1: findNode(this.inp1),
+            },
+        };
+        return data;
+    }
+
+    /**
+     * @memberof Splitter
+     * fn to remove proporgation delay.
+     * @return {JSON}
+     */
+    removePropagation() {
+        if (this.inp1.value === undefined) {
+            let i = 0;
+            for (i = 0; i < this.outputs.length; i++) { // False Hit
+                if (this.outputs[i].value === undefined) return;
+            }
+            for (i = 0; i < this.outputs.length; i++) {
+                if (this.outputs[i].value !== undefined) {
+                    this.outputs[i].value = undefined;
+                    simulationArea.simulationQueue.add(this.outputs[i]);
+                }
+            }
+        } else if (this.inp1.value !== undefined) {
+            this.inp1.value = undefined;
+            simulationArea.simulationQueue.add(this.inp1);
+        }
+        this.prevInpValue = undefined;
+    }
+
+    /**
+     * @memberof Splitter
+     * Checks if the element is resolvable
+     * @return {boolean}
+     */
+    isResolvable() {
+        let resolvable = false;
+        if (this.inp1.value !== this.prevInpValue) {
+            if (this.inp1.value !== undefined) return true;
+            return false;
+        }
+        let i;
+        for (i = 0; i < this.splitCount; i++) { if (this.outputs[i].value === undefined) break; }
+        if (i === this.splitCount) resolvable = true;
+        return resolvable;
+    }
+
+    /**
+     * @memberof Splitter
+     * resolve output values based on inputData
+     */
+    resolve() {
+        if (this.isResolvable() === false) {
+            return;
+        }
+        if (this.inp1.value !== undefined && this.inp1.value !== this.prevInpValue) {
+            let bitCount = 1;
+            for (let i = 0; i < this.splitCount; i++) {
+                const bitSplitValue = extractBits(this.inp1.value, bitCount, bitCount + this.bitWidthSplit[i] - 1);
+                if (this.outputs[i].value !== bitSplitValue) {
+                    if (this.outputs[i].value !== bitSplitValue) {
+                        this.outputs[i].value = bitSplitValue;
+                        simulationArea.simulationQueue.add(this.outputs[i]);
+                    }
+                }
+                bitCount += this.bitWidthSplit[i];
+            }
+        } else {
+            let n = 0;
+            for (let i = this.splitCount - 1; i >= 0; i--) {
+                n <<= this.bitWidthSplit[i];
+                n += this.outputs[i].value;
+            }
+            if (this.inp1.value !== n) {
+                this.inp1.value = n;
+                simulationArea.simulationQueue.add(this.inp1);
+            }
+            // else if (this.inp1.value !== n) {
+            //     console.log("CONTENTION");
+            // }
+        }
+        this.prevInpValue = this.inp1.value;
+    }
+
+    /**
+     * @memberof Splitter
+     * fn to reset values of splitter
+     */
+    reset() {
+        this.prevInpValue = undefined;
+    }
+
+    /**
+     * @memberof Splitter
+     * fn to process verilog of the element
+     * @return {JSON}
+     */
+    processVerilog() {
+        // console.log(this.inp1.verilogLabel +":"+ this.outputs[0].verilogLabel);
+        if (this.inp1.verilogLabel !== '' && this.outputs[0].verilogLabel === '') {
+            let bitCount = 0;
+            for (let i = 0; i < this.splitCount; i++) {
+                // let bitSplitValue = extractBits(this.inp1.value, bitCount, bitCount + this.bitWidthSplit[i] - 1);
+                if (this.bitWidthSplit[i] > 1) { const label = `${this.inp1.verilogLabel}[ ${bitCount + this.bitWidthSplit[i] - 1}:${bitCount}]`; } else { const label = `${this.inp1.verilogLabel}[${bitCount}]`; }
+                if (this.outputs[i].verilogLabel !== label) {
+                    this.outputs[i].verilogLabel = label;
+                    this.scope.stack.push(this.outputs[i]);
+                }
+                bitCount += this.bitWidthSplit[i];
+            }
+        } else if (this.inp1.verilogLabel === '' && this.outputs[0].verilogLabel !== '') {
+            const label = `{${this.outputs.map((x) => x.verilogLabel).join(',')}}`;
+            // console.log("HIT",label)
+            if (this.inp1.verilogLabel !== label) {
+                this.inp1.verilogLabel = label;
+                this.scope.stack.push(this.inp1);
+            }
+        }
+    }
+
+    /**
+     * @memberof Splitter
+     * function to draw element
+     */
+    customDraw() {
+        const ctx = simulationArea.context;
+        ctx.strokeStyle = ['black', 'brown'][((this.hover && !simulationArea.shiftDown) || simulationArea.lastSelected === this || simulationArea.multipleObjectSelections.contains(this)) + 0];
+        ctx.lineWidth = correctWidth(3);
+        const xx = this.x;
+        const yy = this.y;
+        ctx.beginPath();
+        moveTo(ctx, -10, 10 + this.yOffset, xx, yy, this.direction);
+        lineTo(ctx, 0, 0 + this.yOffset, xx, yy, this.direction);
+        lineTo(ctx, 0, -20 * (this.splitCount - 1) + this.yOffset, xx, yy, this.direction);
+        let bitCount = 0;
+        for (let i = this.splitCount - 1; i >= 0; i--) {
+            moveTo(ctx, 0, -20 * i + this.yOffset, xx, yy, this.direction);
+            lineTo(ctx, 20, -20 * i + this.yOffset, xx, yy, this.direction);
+        }
+        ctx.stroke();
+        ctx.beginPath();
+        ctx.fillStyle = 'black';
+        for (let i = this.splitCount - 1; i >= 0; i--) {
+            fillText2(ctx, `${bitCount}:${bitCount + this.bitWidthSplit[this.splitCount - i - 1]}`, 12, -20 * i + this.yOffset + 10, xx, yy, this.direction);
+            bitCount += this.bitWidthSplit[this.splitCount - i - 1];
+        }
+        ctx.fill();
+    }
+}
+
+/**
+ * @memberof Splitter
+ * Help Tip
+ * @type {string}
+ * @category modules
+ */
+Splitter.prototype.tooltipText = 'Splitter ToolTip: Split multiBit Input into smaller bitwidths or vice versa.';
+
+/**
+ * @memberof Splitter
+ * Help URL
+ * @type {string}
+ * @category modules
+ */
+Splitter.prototype.helplink = 'https://docs.circuitverse.org/#/splitter';
+Splitter.prototype.objectType = 'Splitter';
diff --git a/src/modules/SquareRGBLed.js b/src/modules/SquareRGBLed.js
new file mode 100755
index 0000000..1f12eb1
--- /dev/null
+++ b/src/modules/SquareRGBLed.js
@@ -0,0 +1,154 @@
+import CircuitElement from '../circuitElement';
+import Node, { findNode } from '../node';
+import simulationArea from '../simulationArea';
+import {
+    correctWidth, lineTo, moveTo, rect2,
+} from '../canvasApi';
+
+/**
+ * @class
+ * SquareRGBLed
+ * @extends CircuitElement
+ * @param {number} x - x coordinate of element.
+ * @param {number} y - y coordinate of element.
+ * @param {Scope=} scope - Cirucit on which element is drawn
+ * @param {string=} dir - direction of element
+ * @param {number=} pinLength - pins per node.
+ * @category modules
+ */
+export default class SquareRGBLed extends CircuitElement {
+    constructor(x, y, scope = globalScope, dir = 'UP', pinLength = 1) {
+        super(x, y, scope, dir, 8);
+        /* this is done in this.baseSetup() now
+        this.scope['SquareRGBLed'].push(this);
+        */
+        this.rectangleObject = false;
+        this.setDimensions(15, 15);
+        this.pinLength = pinLength === undefined ? 1 : pinLength;
+        const nodeX = -10 - 10 * pinLength;
+        this.inp1 = new Node(nodeX, -10, 0, this, 8, 'R');
+        this.inp2 = new Node(nodeX, 0, 0, this, 8, 'G');
+        this.inp3 = new Node(nodeX, 10, 0, this, 8, 'B');
+        this.inp = [this.inp1, this.inp2, this.inp3];
+        this.labelDirection = 'UP';
+        this.fixedBitWidth = true;
+
+        // eslint-disable-next-line no-shadow
+        this.changePinLength = function (pinLength) {
+            if (pinLength === undefined) return;
+            pinLength = parseInt(pinLength, 10);
+            if (pinLength < 0 || pinLength > 1000) return;
+
+            // Calculate the new position of the LED, so the nodes will stay in the same place.
+            const diff = 10 * (pinLength - this.pinLength);
+            // eslint-disable-next-line no-nested-ternary
+            const diffX = this.direction === 'LEFT' ? -diff : this.direction === 'RIGHT' ? diff : 0;
+            // eslint-disable-next-line no-nested-ternary
+            const diffY = this.direction === 'UP' ? -diff : this.direction === 'DOWN' ? diff : 0;
+
+            // Build a new LED with the new values; preserve label properties too.
+            const obj = new SquareRGBLed(this.x + diffX, this.y + diffY, this.scope, this.direction, pinLength);
+            obj.label = this.label;
+            obj.labelDirection = this.labelDirection;
+
+            this.cleanDelete();
+            simulationArea.lastSelected = obj;
+            return obj;
+        };
+
+        this.mutableProperties = {
+            pinLength: {
+                name: 'Pin Length',
+                type: 'number',
+                max: '1000',
+                min: '0',
+                func: 'changePinLength',
+            },
+        };
+    }
+
+    /**
+     * @memberof SquareRGBLed
+     * fn to create save Json Data of object
+     * @return {JSON}
+     */
+    customSave() {
+        const data = {
+            constructorParamaters: [this.direction, this.pinLength],
+            nodes: {
+                inp1: findNode(this.inp1),
+                inp2: findNode(this.inp2),
+                inp3: findNode(this.inp3),
+            },
+        };
+        return data;
+    }
+
+    /**
+     * @memberof SquareRGBLed
+     * function to draw element
+     */
+    customDraw() {
+        const ctx = simulationArea.context;
+        const xx = this.x;
+        const yy = this.y;
+        const r = this.inp1.value;
+        const g = this.inp2.value;
+        const b = this.inp3.value;
+
+        const colors = ['rgb(174,20,20)', 'rgb(40,174,40)', 'rgb(0,100,255)'];
+        for (let i = 0; i < 3; i++) {
+            const x = -10 - 10 * this.pinLength;
+            const y = i * 10 - 10;
+            ctx.lineWidth = correctWidth(3);
+
+            // A gray line, which makes it easy on the eyes when the pin length is large
+            ctx.beginPath();
+            ctx.lineCap = 'butt';
+            ctx.strokeStyle = 'rgb(227, 228, 229)';
+            moveTo(ctx, -15, y, xx, yy, this.direction);
+            lineTo(ctx, x + 10, y, xx, yy, this.direction);
+            ctx.stroke();
+
+            // A colored line, so people know which pin does what.
+            ctx.lineCap = 'round';
+            ctx.beginPath();
+            ctx.strokeStyle = colors[i];
+            moveTo(ctx, x + 10, y, xx, yy, this.direction);
+            lineTo(ctx, x, y, xx, yy, this.direction);
+            ctx.stroke();
+        }
+
+        ctx.strokeStyle = '#d3d4d5';
+        ctx.fillStyle = (r === undefined && g === undefined && b === undefined) ? 'rgb(227, 228, 229)' : `rgb(${r || 0}, ${g || 0}, ${b || 0})`;
+        ctx.lineWidth = correctWidth(1);
+        ctx.beginPath();
+        rect2(ctx, -15, -15, 30, 30, xx, yy, this.direction);
+        ctx.stroke();
+
+        if ((this.hover && !simulationArea.shiftDown)
+            || simulationArea.lastSelected === this
+            || simulationArea.multipleObjectSelections.contains(this)) {
+            ctx.fillStyle = 'rgba(255, 255, 32)';
+        }
+
+        ctx.fill();
+    }
+}
+
+/**
+ * @memberof SquareRGBLed
+ * Help Tip
+ * @type {string}
+ * @category modules
+ */
+SquareRGBLed.prototype.tooltipText = 'Square RGB Led ToolTip: RGB Led inputs 8 bit values for the colors RED, GREEN and BLUE.';
+
+/**
+ * @memberof SquareRGBLed
+ * Help URL
+ * @type {string}
+ * @category modules
+ */
+SquareRGBLed.prototype.helplink = 'https://docs.circuitverse.org/#/outputs?id=square-rgb-led';
+SquareRGBLed.prototype.objectType = 'SquareRGBLed';
diff --git a/src/modules/Stepper.js b/src/modules/Stepper.js
new file mode 100755
index 0000000..ffd758d
--- /dev/null
+++ b/src/modules/Stepper.js
@@ -0,0 +1,99 @@
+import CircuitElement from '../circuitElement';
+import Node, { findNode } from '../node';
+import simulationArea from '../simulationArea';
+import { fillText } from '../canvasApi';
+import { changeInputSize } from '../modules';
+/**
+ * @class
+ * Stepper
+ * @extends CircuitElement
+ * @param {number} x - x coordinate of element.
+ * @param {number} y - y coordinate of element.
+ * @param {Scope=} scope - Cirucit on which element is drawn
+ * @param {string=} dir - direction of element
+ * @param {number=} bitWidth - bitwidth of element
+ * @category modules
+ */
+export default class Stepper extends CircuitElement {
+    constructor(x, y, scope = globalScope, dir = 'RIGHT', bitWidth = 8) {
+        super(x, y, scope, dir, bitWidth);
+        /* this is done in this.baseSetup() now
+        this.scope['Stepper'].push(this);
+        */
+        this.setDimensions(20, 20);
+
+        this.output1 = new Node(20, 0, 1, this, bitWidth);
+        this.state = 0;
+    }
+
+    /**
+     * @memberof Stepper
+     * fn to create save Json Data of object
+     * @return {JSON}
+     */
+    customSave() {
+        const data = {
+            constructorParamaters: [this.direction, this.bitWidth],
+            nodes: {
+                output1: findNode(this.output1),
+            },
+            values: {
+                state: this.state,
+            },
+        };
+        return data;
+    }
+
+    /**
+     * @memberof Stepper
+     * function to draw element
+     */
+    customDraw() {
+        const ctx = simulationArea.context;
+
+        ctx.beginPath();
+        ctx.font = '20px Georgia';
+        ctx.fillStyle = 'green';
+        ctx.textAlign = 'center';
+        fillText(ctx, this.state.toString(16), this.x, this.y + 5);
+        ctx.fill();
+    }
+
+    /**
+     * @memberof Stepper
+     * resolve output values based on inputData
+     */
+    resolve() {
+        this.state = Math.min(this.state, (1 << this.bitWidth) - 1);
+        this.output1.value = this.state;
+        simulationArea.simulationQueue.add(this.output1);
+    }
+
+    /**
+     * Listener function for increasing value of state
+     * @memberof Stepper
+     * @param {string} key - the key pressed
+     */
+    keyDown2(key) {
+        // console.log(key);
+        if (this.state < (1 << this.bitWidth) && (key === '+' || key === '=')) this.state++;
+        if (this.state > 0 && (key === '_' || key === '-')) this.state--;
+    }
+}
+
+/**
+ * @memberof Stepper
+ * Help Tip
+ * @type {string}
+ * @category modules
+ */
+Stepper.prototype.tooltipText = 'Stepper ToolTip: Increase/Decrease value by selecting the stepper and using +/- keys.';
+
+/**
+ * @memberof Stepper
+ * Help URL
+ * @type {string}
+ * @category modules
+ */
+Stepper.prototype.helplink = 'https://docs.circuitverse.org/#/inputElements?id=stepper';
+Stepper.prototype.objectType = 'Stepper';
diff --git a/src/modules/Text.js b/src/modules/Text.js
new file mode 100755
index 0000000..d00b412
--- /dev/null
+++ b/src/modules/Text.js
@@ -0,0 +1,144 @@
+import CircuitElement from '../circuitElement';
+import Node, { findNode } from '../node';
+import simulationArea from '../simulationArea';
+import { rect2, fillText } from '../canvasApi';
+/**
+ * @class
+ * Text
+ * @extends CircuitElement
+ * @param {number} x - x coordinate of element.
+ * @param {number} y - y coordinate of element.
+ * @param {Scope=} scope - Cirucit on which element is drawn
+ * @param {string=} label - label of element
+ * @param {number=} fontSize - font size
+ * @category modules
+ */
+export default class Text extends CircuitElement {
+    constructor(x, y, scope = globalScope, label = '', fontSize = 14) {
+        super(x, y, scope, 'RIGHT', 1);
+        /* this is done in this.baseSetup() now
+        this.scope['Text'].push(this);
+        */
+        // this.setDimensions(15, 15);
+        this.fixedBitWidth = true;
+        this.directionFixed = true;
+        this.labelDirectionFixed = true;
+        this.setHeight(10);
+        this.setLabel(label);
+        this.setFontSize(fontSize);
+    }
+
+    /**
+     * @memberof Text
+     * function for setting text inside the element
+     * @param {string=} str - the label
+     */
+    setLabel(str = '') {
+        this.label = str;
+        const ctx = simulationArea.context;
+        ctx.font = `${this.fontSize}px Georgia`;
+        this.leftDimensionX = 10;
+        this.rightDimensionX = ctx.measureText(this.label).width + 10;
+        // console.log(this.leftDimensionX,this.rightDimensionX,ctx.measureText(this.label))
+    }
+
+    /**
+     * @memberof Text
+     * function for setting font size inside the element
+     * @param {number=} str - the font size
+     */
+    setFontSize(fontSize = 14) {
+        this.fontSize = fontSize;
+        const ctx = simulationArea.context;
+        ctx.font = `${this.fontSize}px Georgia`;
+        this.leftDimensionX = 10;
+        this.rightDimensionX = ctx.measureText(this.label).width + 10;
+    }
+
+    /**
+     * @memberof Text
+     * fn to create save Json Data of object
+     * @return {JSON}
+     */
+    customSave() {
+        const data = {
+            constructorParamaters: [this.label, this.fontSize],
+        };
+        return data;
+    }
+
+    /**
+     * @memberof Text
+     * Listener function for Text Box
+     * @param {string} key - the label
+     */
+    keyDown(key) {
+        if (key.length === 1) {
+            if (this.label === 'Enter Text Here') { this.setLabel(key); } else { this.setLabel(this.label + key); }
+        } else if (key === 'Backspace') {
+            if (this.label === 'Enter Text Here') { this.setLabel(''); } else { this.setLabel(this.label.slice(0, -1)); }
+        }
+    }
+
+    /**
+     * @memberof Text
+     * Function for drawing text box
+     */
+    draw() {
+        if (this.label.length === 0 && simulationArea.lastSelected !== this) this.delete();
+        const ctx = simulationArea.context;
+        ctx.strokeStyle = 'black';
+        ctx.lineWidth = 1;
+        const xx = this.x;
+        const yy = this.y;
+        if ((this.hover && !simulationArea.shiftDown) || simulationArea.lastSelected === this || simulationArea.multipleObjectSelections.contains(this)) {
+            ctx.beginPath();
+            ctx.fillStyle = 'white';
+            const magicDimenstion = this.fontSize - 14;
+            rect2(ctx, -this.leftDimensionX, -this.upDimensionY - magicDimenstion,
+                this.leftDimensionX + this.rightDimensionX,
+                this.upDimensionY + this.downDimensionY + magicDimenstion, this.x, this.y, 'RIGHT');
+            ctx.fillStyle = 'rgba(255, 255, 32,0.1)';
+            ctx.fill();
+            ctx.stroke();
+        }
+        ctx.beginPath();
+        ctx.textAlign = 'left';
+        ctx.fillStyle = 'black';
+        fillText(ctx, this.label, xx, yy + 5, this.fontSize);
+        ctx.fill();
+    }
+}
+
+/**
+ * @memberof Text
+ * Help Tip
+ * @type {string}
+ * @category modules
+ */
+Text.prototype.tooltipText = 'Text ToolTip: Use this to document your circuit.';
+
+/**
+ * @memberof Text
+ * Help URL
+ * @type {string}
+ * @category modules
+ */
+Text.prototype.helplink = 'https://docs.circuitverse.org/#/annotation?id=adding-labels';
+
+/**
+ * @memberof Text
+ * Mutable properties of the element
+ * @type {JSON}
+ * @category modules
+ */
+Text.prototype.mutableProperties = {
+    fontSize: {
+        name: 'Font size: ',
+        type: 'number',
+        max: '84',
+        min: '14',
+        func: 'setFontSize',
+    },
+};
+Text.prototype.objectType = 'Text';
diff --git a/src/modules/TriState.js b/src/modules/TriState.js
new file mode 100755
index 0000000..d732c74
--- /dev/null
+++ b/src/modules/TriState.js
@@ -0,0 +1,116 @@
+import CircuitElement from '../circuitElement';
+import Node, { findNode } from '../node';
+import simulationArea from '../simulationArea';
+import {
+    correctWidth, lineTo, moveTo, arc,
+} from '../canvasApi';
+import { changeInputSize } from '../modules';
+/**
+ * @class
+ * TriState
+ * @extends CircuitElement
+ * @param {number} x - x coordinate of element.
+ * @param {number} y - y coordinate of element.
+ * @param {Scope=} scope - Cirucit on which element is drawn
+ * @param {string=} dir - direction of element
+ * @param {number=} bitWidth - bit width per node.
+ * @category modules
+ */
+export default class TriState extends CircuitElement {
+    constructor(x, y, scope = globalScope, dir = 'RIGHT', bitWidth = 1) {
+        super(x, y, scope, dir, bitWidth);
+        /* this is done in this.baseSetup() now
+        this.scope['TriState'].push(this);
+        */
+        this.rectangleObject = false;
+        this.setDimensions(15, 15);
+
+        this.inp1 = new Node(-10, 0, 0, this);
+        this.output1 = new Node(20, 0, 1, this);
+        this.state = new Node(0, 0, 0, this, 1, 'Enable');
+    }
+
+    // TriState.prototype.propagationDelay=10000;
+
+    /**
+     * @memberof TriState
+     * fn to create save Json Data of object
+     * @return {JSON}
+     */
+    customSave() {
+        const data = {
+            constructorParamaters: [this.direction, this.bitWidth],
+            nodes: {
+                output1: findNode(this.output1),
+                inp1: findNode(this.inp1),
+                state: findNode(this.state),
+            },
+        };
+        return data;
+    }
+
+    /**
+     * @memberof TriState
+     * function to change bitwidth of the element
+     * @param {number} bitWidth - new bitwidth
+     */
+    newBitWidth(bitWidth) {
+        this.inp1.bitWidth = bitWidth;
+        this.output1.bitWidth = bitWidth;
+        this.bitWidth = bitWidth;
+    }
+
+    /**
+     * @memberof TriState
+     * resolve output values based on inputData
+     */
+    resolve() {
+        if (this.isResolvable() === false) {
+            return;
+        }
+
+        if (this.state.value === 1) {
+            if (this.output1.value !== this.inp1.value) {
+                this.output1.value = this.inp1.value; // >>>0)<<(32-this.bitWidth))>>>(32-this.bitWidth);
+                simulationArea.simulationQueue.add(this.output1);
+            }
+            simulationArea.contentionPending.clean(this);
+        } else if (this.output1.value !== undefined && !simulationArea.contentionPending.contains(this)) {
+            this.output1.value = undefined;
+            simulationArea.simulationQueue.add(this.output1);
+        }
+        simulationArea.contentionPending.clean(this);
+    }
+
+    /**
+     * @memberof TriState
+     * function to draw element
+     */
+    customDraw() {
+        const ctx = simulationArea.context;
+        ctx.strokeStyle = ('rgba(0,0,0,1)');
+        ctx.lineWidth = correctWidth(3);
+
+        const xx = this.x;
+        const yy = this.y;
+        ctx.beginPath();
+        ctx.fillStyle = 'white';
+        moveTo(ctx, -10, -15, xx, yy, this.direction);
+        lineTo(ctx, 20, 0, xx, yy, this.direction);
+        lineTo(ctx, -10, 15, xx, yy, this.direction);
+        ctx.closePath();
+        if ((this.hover && !simulationArea.shiftDown) || simulationArea.lastSelected === this || simulationArea.multipleObjectSelections.contains(this)) ctx.fillStyle = 'rgba(255, 255, 32,0.8)';
+        ctx.fill();
+        ctx.stroke();
+    }
+}
+
+/**
+ * @memberof TriState
+ * Help Tip
+ * @type {string}
+ * @category modules
+ */
+TriState.prototype.tooltipText = 'TriState ToolTip : Effectively removes the output from the circuit.';
+TriState.prototype.helplink = 'https://docs.circuitverse.org/#/miscellaneous?id=tri-state-buffer';
+TriState.prototype.objectType = 'TriState';
diff --git a/src/modules/Tunnel.js b/src/modules/Tunnel.js
new file mode 100755
index 0000000..5521ca7
--- /dev/null
+++ b/src/modules/Tunnel.js
@@ -0,0 +1,255 @@
+import CircuitElement from '../circuitElement';
+import Node, { findNode } from '../node';
+import simulationArea from '../simulationArea';
+import { correctWidth, rect2, fillText } from '../canvasApi';
+import plotArea from '../plotArea';
+/**
+ * @class
+ * Tunnel
+ * @extends CircuitElement
+ * @param {number} x - x coordinate of element.
+ * @param {number} y - y coordinate of element.
+ * @param {Scope=} scope - Cirucit on which element is drawn
+ * @param {string=} dir - direction of element
+ * @param {number=} bitWidth - bit width per node.
+ * @param {string=} identifier - number of input nodes
+ * @category modules
+ */
+export default class Tunnel extends CircuitElement {
+    constructor(x, y, scope = globalScope, dir = 'LEFT', bitWidth = 1, identifier) {
+        super(x, y, scope, dir, bitWidth);
+        /* this is done in this.baseSetup() now
+        this.scope['Tunnel'].push(this);
+        */
+        this.rectangleObject = false;
+        this.centerElement = true;
+        this.xSize = 10;
+        this.plotValues = [];
+        this.inp1 = new Node(0, 0, 0, this);
+        this.setIdentifier(identifier || 'T');
+        this.setBounds();
+    }
+
+    /**
+     * @memberof Tunnel
+     * function to change direction of Tunnel
+     * @param {string} dir - new direction
+     */
+    newDirection(dir) {
+        if (this.direction === dir) return;
+        this.direction = dir;
+        this.setBounds();
+    }
+
+    setBounds() {
+        let xRotate = 0;
+        let yRotate = 0;
+        if (this.direction === 'LEFT') {
+            xRotate = 0;
+            yRotate = 0;
+        } else if (this.direction === 'RIGHT') {
+            xRotate = 120 - this.xSize;
+            yRotate = 0;
+        } else if (this.direction === 'UP') {
+            xRotate = 60 - this.xSize / 2;
+            yRotate = -20;
+        } else {
+            xRotate = 60 - this.xSize / 2;
+            yRotate = 20;
+        }
+
+        this.leftDimensionX = Math.abs(-120 + xRotate + this.xSize);
+        this.upDimensionY = Math.abs(-20 + yRotate);
+        this.rightDimensionX = Math.abs(xRotate);
+        this.downDimensionY = Math.abs(20 + yRotate);
+
+        // rect2(ctx, -120 + xRotate + this.xSize, -20 + yRotate, 120 - this.xSize, 40, xx, yy, "RIGHT");
+    }
+
+    /**
+     * @memberof Tunnel
+     * function to set tunnel value
+     * @param {number} val - tunnel value
+     */
+    setTunnelValue(val) {
+        this.inp1.value = val;
+        for (let i = 0; i < this.inp1.connections.length; i++) {
+            if (this.inp1.connections[i].value !== val) {
+                this.inp1.connections[i].value = val;
+                simulationArea.simulationQueue.add(this.inp1.connections[i]);
+            }
+        }
+    }
+
+    /**
+     * @memberof Tunnel
+     * resolve output values based on inputData
+     */
+    resolve() {
+        for (let i = 0; i < this.scope.tunnelList[this.identifier].length; i++) {
+            if (this.scope.tunnelList[this.identifier][i].inp1.value !== this.inp1.value) {
+                this.scope.tunnelList[this.identifier][i].setTunnelValue(this.inp1.value);
+            }
+        }
+    }
+
+    /**
+     * @memberof Tunnel
+     * function to set tunnel value
+     * @param {Scope} scope - tunnel value
+     */
+    updateScope(scope) {
+        this.scope = scope;
+        this.inp1.updateScope(scope);
+        this.setIdentifier(this.identifier);
+        // console.log("ShouldWork!");
+    }
+
+    /**
+     * @memberof Tunnel
+     * function to set plot value
+     */
+    setPlotValue() {
+        const time = plotArea.stopWatch.ElapsedMilliseconds;
+        if (this.plotValues.length && this.plotValues[this.plotValues.length - 1][0] === time) { this.plotValues.pop(); }
+
+        if (this.plotValues.length === 0) {
+            this.plotValues.push([time, this.inp1.value]);
+            return;
+        }
+
+        if (this.plotValues[this.plotValues.length - 1][1] === this.inp1.value) { return; }
+        this.plotValues.push([time, this.inp1.value]);
+    }
+
+    /**
+     * @memberof Tunnel
+     * fn to create save Json Data of object
+     * @return {JSON}
+     */
+    customSave() {
+        const data = {
+            constructorParamaters: [this.direction, this.bitWidth, this.identifier],
+            nodes: {
+                inp1: findNode(this.inp1),
+            },
+            values: {
+                identifier: this.identifier,
+            },
+        };
+        return data;
+    }
+
+    /**
+     * @memberof Tunnel
+     * function to set tunnel value
+     * @param {string=} id - id so that every link is unique
+     */
+    setIdentifier(id = '') {
+        if (id.length === 0) return;
+        if (this.scope.tunnelList[this.identifier]) this.scope.tunnelList[this.identifier].clean(this);
+        this.identifier = id;
+        if (this.scope.tunnelList[this.identifier]) this.scope.tunnelList[this.identifier].push(this);
+        else this.scope.tunnelList[this.identifier] = [this];
+        const len = this.identifier.length;
+        if (len === 1) this.xSize = 40;
+        else if (len > 1 && len < 4) this.xSize = 20;
+        else this.xSize = 0;
+        this.setBounds();
+    }
+
+    /**
+     * @memberof Tunnel
+     * delete the tunnel element
+     */
+    delete() {
+        this.scope.Tunnel.clean(this);
+        this.scope.tunnelList[this.identifier].clean(this);
+        super.delete();
+        this.scope.Tunnel.push(this);
+    }
+
+    /**
+     * @memberof Tunnel
+     * function to draw element
+     */
+    customDraw() {
+        const ctx = simulationArea.context;
+        ctx.beginPath();
+        ctx.strokeStyle = 'grey';
+        ctx.fillStyle = '#fcfcfc';
+        ctx.lineWidth = correctWidth(1);
+        const xx = this.x;
+        const yy = this.y;
+
+        let xRotate = 0;
+        let yRotate = 0;
+        if (this.direction === 'LEFT') {
+            xRotate = 0;
+            yRotate = 0;
+        } else if (this.direction === 'RIGHT') {
+            xRotate = 120 - this.xSize;
+            yRotate = 0;
+        } else if (this.direction === 'UP') {
+            xRotate = 60 - this.xSize / 2;
+            yRotate = -20;
+        } else {
+            xRotate = 60 - this.xSize / 2;
+            yRotate = 20;
+        }
+
+        rect2(ctx, -120 + xRotate + this.xSize, -20 + yRotate, 120 - this.xSize, 40, xx, yy, 'RIGHT');
+        if ((this.hover && !simulationArea.shiftDown) || simulationArea.lastSelected === this || simulationArea.multipleObjectSelections.contains(this)) { ctx.fillStyle = 'rgba(255, 255, 32,0.8)'; }
+        ctx.fill();
+        ctx.stroke();
+
+        ctx.font = '14px Georgia';
+        this.xOff = ctx.measureText(this.identifier).width;
+        ctx.beginPath();
+        rect2(ctx, -105 + xRotate + this.xSize, -11 + yRotate, this.xOff + 10, 23, xx, yy, 'RIGHT');
+        ctx.fillStyle = '#eee';
+        ctx.strokeStyle = '#ccc';
+        ctx.fill();
+        ctx.stroke();
+
+        ctx.beginPath();
+        ctx.textAlign = 'center';
+        ctx.fillStyle = 'black';
+        fillText(ctx, this.identifier, xx - 100 + this.xOff / 2 + xRotate + this.xSize, yy + 6 + yRotate, 14);
+        ctx.fill();
+
+        ctx.beginPath();
+        ctx.font = '30px Georgia';
+        ctx.textAlign = 'center';
+        ctx.fillStyle = ['blue', 'red'][+(this.inp1.value === undefined)];
+        if (this.inp1.value !== undefined) { fillText(ctx, this.inp1.value.toString(16), xx - 23 + xRotate, yy + 8 + yRotate, 25); } else { fillText(ctx, 'x', xx - 23 + xRotate, yy + 8 + yRotate, 25); }
+        ctx.fill();
+    }
+}
+
+/**
+ * @memberof Tunnel
+ * Help Tip
+ * @type {string}
+ * @category modules
+ */
+Tunnel.prototype.tooltipText = 'Tunnel ToolTip : Tunnel Selected.';
+Tunnel.prototype.helplink = 'https://docs.circuitverse.org/#/miscellaneous?id=tunnel';
+
+Tunnel.prototype.overrideDirectionRotation = true;
+
+/**
+ * @memberof Tunnel
+ * Mutable properties of the element
+ * @type {JSON}
+ * @category modules
+ */
+Tunnel.prototype.mutableProperties = {
+    identifier: {
+        name: 'Debug Flag identifier',
+        type: 'text',
+        maxlength: '5',
+        func: 'setIdentifier',
+    },
+};
+Tunnel.prototype.objectType = 'Tunnel';
diff --git a/src/modules/TwoComplement.js b/src/modules/TwoComplement.js
new file mode 100755
index 0000000..8ccbf34
--- /dev/null
+++ b/src/modules/TwoComplement.js
@@ -0,0 +1,89 @@
+import CircuitElement from '../circuitElement';
+import Node, { findNode } from '../node';
+import simulationArea from '../simulationArea';
+import {
+    correctWidth, lineTo, moveTo, arc,
+} from '../canvasApi';
+import { changeInputSize } from '../modules';
+/**
+ * @class
+ * TwoComplement
+ * @extends CircuitElement
+ * @param {number} x - x coordinate of element.
+ * @param {number} y - y coordinate of element.
+ * @param {Scope=} scope - Cirucit on which element is drawn
+ * @param {string=} dir - direction of element
+ * @param {number=} bitWidth - bit width per node.
+ * @category modules
+ */
+export default class TwoComplement extends CircuitElement {
+    constructor(x, y, scope = globalScope, dir = 'RIGHT', bitWidth = 1) {
+        super(x, y, scope, dir, bitWidth);
+        /* this is done in this.baseSetup() now
+        this.scope['TwoComplement'].push(this);
+        */
+        this.rectangleObject = false;
+        this.setDimensions(15, 15);
+        this.inp1 = new Node(-10, 0, 0, this, this.bitWidth, 'input stream');
+        this.output1 = new Node(20, 0, 1, this, this.bitWidth, "2's complement");
+    }
+
+    /**
+     * @memberof TwoComplement
+     * fn to create save Json Data of object
+     * @return {JSON}
+     */
+    customSave() {
+        const data = {
+            constructorParamaters: [this.direction, this.bitWidth],
+            nodes: {
+                output1: findNode(this.output1),
+                inp1: findNode(this.inp1),
+            },
+        };
+        return data;
+    }
+
+    /**
+     * @memberof TwoComplement
+     * resolve output values based on inputData
+     */
+    resolve() {
+        if (this.isResolvable() === false) {
+            return;
+        }
+        let output = ((~this.inp1.value >>> 0) << (32 - this.bitWidth)) >>> (32 - this.bitWidth);
+        output += 1;
+        this.output1.value = ((output) << (32 - this.bitWidth)) >>> (32 - this.bitWidth);
+        simulationArea.simulationQueue.add(this.output1);
+    }
+
+    /**
+     * @memberof TwoComplement
+     * function to draw element
+     */
+    customDraw() {
+        const ctx = simulationArea.context;
+        ctx.strokeStyle = 'black';
+        ctx.lineWidth = correctWidth(3);
+        const xx = this.x;
+        const yy = this.y;
+        ctx.beginPath();
+        ctx.fillStyle = 'black';
+        fillText(ctx, "2'", xx, yy, 10);
+        if ((this.hover && !simulationArea.shiftDown) || simulationArea.lastSelected === this || simulationArea.multipleObjectSelections.contains(this)) ctx.fillStyle = 'rgba(255, 255, 32,0.8)';
+        ctx.fill();
+        ctx.beginPath();
+        drawCircle2(ctx, 5, 0, 15, xx, yy, this.direction);
+        ctx.stroke();
+    }
+}
+
+/**
+ * @memberof TwoComplement
+ * Help Tip
+ * @type {string}
+ * @category modules
+ */
+TwoComplement.prototype.tooltipText = "Two's Complement Tooltip : Calculates the two's complement";
+TwoComplement.prototype.objectType = 'TwoComplement';
diff --git a/src/modules/VariableLed.js b/src/modules/VariableLed.js
new file mode 100755
index 0000000..197a27d
--- /dev/null
+++ b/src/modules/VariableLed.js
@@ -0,0 +1,100 @@
+import CircuitElement from '../circuitElement';
+import Node, { findNode } from '../node';
+import simulationArea from '../simulationArea';
+import {
+    correctWidth, lineTo, moveTo, arc,
+} from '../canvasApi';
+import { changeInputSize } from '../modules';
+/**
+ * @class
+ * VariableLed
+ * @extends CircuitElement
+ * @param {number} x - x coordinate of element.
+ * @param {number} y - y coordinate of element.
+ * @param {Scope=} scope - Cirucit on which element is drawn
+ * @category modules
+ */
+export default class VariableLed extends CircuitElement {
+    constructor(x, y, scope = globalScope) {
+        // Calling base class constructor
+
+        super(x, y, scope, 'UP', 8);
+        /* this is done in this.baseSetup() now
+        this.scope['VariableLed'].push(this);
+        */
+        this.rectangleObject = false;
+        this.setDimensions(10, 20);
+        this.inp1 = new Node(-40, 0, 0, this, 8);
+        this.directionFixed = true;
+        this.fixedBitWidth = true;
+    }
+
+    /**
+     * @memberof VariableLed
+     * fn to create save Json Data of object
+     * @return {JSON}
+     */
+    customSave() {
+        const data = {
+            nodes: {
+                inp1: findNode(this.inp1),
+            },
+        };
+        return data;
+    }
+
+    /**
+     * @memberof VariableLed
+     * function to draw element
+     */
+    customDraw() {
+        const ctx = simulationArea.context;
+
+        const xx = this.x;
+        const yy = this.y;
+
+        ctx.strokeStyle = '#353535';
+        ctx.lineWidth = correctWidth(3);
+        ctx.beginPath();
+        moveTo(ctx, -20, 0, xx, yy, this.direction);
+        lineTo(ctx, -40, 0, xx, yy, this.direction);
+        ctx.stroke();
+        const c = this.inp1.value;
+        const alpha = c / 255;
+        ctx.strokeStyle = '#090a0a';
+        ctx.fillStyle = [`rgba(255,29,43,${alpha})`, 'rgba(227, 228, 229, 0.8)'][(c === undefined || c === 0) + 0];
+        ctx.lineWidth = correctWidth(1);
+
+        ctx.beginPath();
+
+        moveTo(ctx, -20, -9, xx, yy, this.direction);
+        lineTo(ctx, 0, -9, xx, yy, this.direction);
+        arc(ctx, 0, 0, 9, (-Math.PI / 2), (Math.PI / 2), xx, yy, this.direction);
+        lineTo(ctx, -20, 9, xx, yy, this.direction);
+        /* lineTo(ctx,-18,12,xx,yy,this.direction);
+        arc(ctx,0,0,Math.sqrt(468),((Math.PI/2) + Math.acos(12/Math.sqrt(468))),((-Math.PI/2) - Math.asin(18/Math.sqrt(468))),xx,yy,this.direction);
+
+        */
+        lineTo(ctx, -20, -9, xx, yy, this.direction);
+        ctx.stroke();
+        if ((this.hover && !simulationArea.shiftDown) || simulationArea.lastSelected === this || simulationArea.multipleObjectSelections.contains(this)) ctx.fillStyle = 'rgba(255, 255, 32,0.8)';
+        ctx.fill();
+    }
+}
+
+/**
+ * @memberof VariableLed
+ * Help Tip
+ * @type {string}
+ * @category modules
+ */
+VariableLed.prototype.tooltipText = 'Variable Led ToolTip: Variable LED inputs an 8 bit value and glows with a proportional intensity.';
+
+/**
+ * @memberof VariableLed
+ * Help URL
+ * @type {string}
+ * @category modules
+ */
+VariableLed.prototype.helplink = 'https://docs.circuitverse.org/#/outputs?id=variable-led';
+VariableLed.prototype.objectType = 'VariableLed';
diff --git a/src/modules/XnorGate.js b/src/modules/XnorGate.js
new file mode 100755
index 0000000..5344bc4
--- /dev/null
+++ b/src/modules/XnorGate.js
@@ -0,0 +1,147 @@
+import CircuitElement from '../circuitElement';
+import Node, { findNode } from '../node';
+import simulationArea from '../simulationArea';
+import {
+    correctWidth, bezierCurveTo, moveTo, arc2, drawCircle2,
+} from '../canvasApi';
+import { changeInputSize } from '../modules';
+/**
+ * @class
+ * XnorGate
+ * @extends CircuitElement
+ * @param {number} x - x coordinate of element.
+ * @param {number} y - y coordinate of element.
+ * @param {Scope=} scope - Cirucit on which element is drawn
+ * @param {string=} dir - direction of element
+ * @param {number=} inputLength - number of input nodes
+ * @param {number=} bitWidth - bit width per node.
+ * @category modules
+ */
+export default class XnorGate extends CircuitElement {
+    constructor(x, y, scope = globalScope, dir = 'RIGHT', inputs = 2, bitWidth = 1) {
+        super(x, y, scope, dir, bitWidth);
+        /* this is done in this.baseSetup() now
+        this.scope['XnorGate'].push(this);
+        */
+        this.rectangleObject = false;
+        this.setDimensions(15, 20);
+
+        this.inp = [];
+        this.inputSize = inputs;
+
+        if (inputs % 2 === 1) {
+            for (let i = 0; i < inputs / 2 - 1; i++) {
+                const a = new Node(-20, -10 * (i + 1), 0, this);
+                this.inp.push(a);
+            }
+            let a = new Node(-20, 0, 0, this);
+            this.inp.push(a);
+            for (let i = inputs / 2 + 1; i < inputs; i++) {
+                a = new Node(-20, 10 * (i + 1 - inputs / 2 - 1), 0, this);
+                this.inp.push(a);
+            }
+        } else {
+            for (let i = 0; i < inputs / 2; i++) {
+                const a = new Node(-20, -10 * (i + 1), 0, this);
+                this.inp.push(a);
+            }
+            for (let i = inputs / 2; i < inputs; i++) {
+                const a = new Node(-20, 10 * (i + 1 - inputs / 2), 0, this);
+                this.inp.push(a);
+            }
+        }
+        this.output1 = new Node(30, 0, 1, this);
+    }
+
+    /**
+     * @memberof XnorGate
+     * fn to create save Json Data of object
+     * @return {JSON}
+     */
+    customSave() {
+        const data = {
+            constructorParamaters: [this.direction, this.inputSize, this.bitWidth],
+            nodes: {
+                inp: this.inp.map(findNode),
+                output1: findNode(this.output1),
+            },
+        };
+        return data;
+    }
+
+    /**
+     * @memberof XnorGate
+     * resolve output values based on inputData
+     */
+    resolve() {
+        let result = this.inp[0].value || 0;
+        if (this.isResolvable() === false) {
+            return;
+        }
+        for (let i = 1; i < this.inputSize; i++) result ^= (this.inp[i].value || 0);
+        result = ((~result >>> 0) << (32 - this.bitWidth)) >>> (32 - this.bitWidth);
+        this.output1.value = result;
+        simulationArea.simulationQueue.add(this.output1);
+    }
+
+    /**
+     * @memberof XnorGate
+     * function to draw element
+     */
+    customDraw() {
+        const ctx = simulationArea.context;
+        ctx.strokeStyle = ('rgba(0,0,0,1)');
+        ctx.lineWidth = correctWidth(3);
+
+        const xx = this.x;
+        const yy = this.y;
+        ctx.beginPath();
+        ctx.fillStyle = 'white';
+        moveTo(ctx, -10, -20, xx, yy, this.direction, true);
+        bezierCurveTo(0, -20, +15, -10, 20, 0, xx, yy, this.direction);
+        bezierCurveTo(0 + 15, 0 + 10, 0, 0 + 20, -10, +20, xx, yy, this.direction);
+        bezierCurveTo(0, 0, 0, 0, -10, -20, xx, yy, this.direction);
+        // arc(ctx, 0, 0, -20, (-Math.PI / 2), (Math.PI / 2), xx, yy, this.direction);
+        ctx.closePath();
+        if ((this.hover && !simulationArea.shiftDown) || simulationArea.lastSelected === this || simulationArea.multipleObjectSelections.contains(this)) ctx.fillStyle = 'rgba(255, 255, 32,0.8)';
+        ctx.fill();
+        ctx.stroke();
+        ctx.beginPath();
+        arc2(ctx, -35, 0, 25, 1.70 * (Math.PI), 0.30 * (Math.PI), xx, yy, this.direction);
+        ctx.stroke();
+        ctx.beginPath();
+        drawCircle2(ctx, 25, 0, 5, xx, yy, this.direction);
+        ctx.stroke();
+    }
+}
+
+/**
+ * @memberof XnorGate
+ * @type {boolean}
+ * @category modules
+ */
+XnorGate.prototype.alwaysResolve = true;
+
+/**
+ * @memberof XnorGate
+ * Help Tip
+ * @type {string}
+ * @category modules
+ */
+XnorGate.prototype.tooltipText = 'Xnor Gate ToolTip : Logical complement of the XOR gate';
+
+/**
+ * @memberof XnorGate
+ * function to change input nodes of the element
+ * @category modules
+ */
+XnorGate.prototype.changeInputSize = changeInputSize;
+
+/**
+ * @memberof XnorGate
+ * @type {string}
+ * @category modules
+ */
+XnorGate.prototype.verilogType = 'xnor';
+XnorGate.prototype.helplink = 'https://docs.circuitverse.org/#/gates?id=xnor-gate';
+XnorGate.prototype.objectType = 'XnorGate';
diff --git a/src/modules/XorGate.js b/src/modules/XorGate.js
new file mode 100755
index 0000000..8566614
--- /dev/null
+++ b/src/modules/XorGate.js
@@ -0,0 +1,145 @@
+import CircuitElement from '../circuitElement';
+import Node, { findNode } from '../node';
+import simulationArea from '../simulationArea';
+import {
+    correctWidth, bezierCurveTo, moveTo, arc2,
+} from '../canvasApi';
+import { changeInputSize } from '../modules';
+/**
+ * @class
+ * XorGate
+ * @extends CircuitElement
+ * @param {number} x - x coordinate of element.
+ * @param {number} y - y coordinate of element.
+ * @param {Scope=} scope - Cirucit on which element is drawn
+ * @param {string=} dir - direction of element
+ * @param {number=} inputs - number of input nodes
+ * @param {number=} bitWidth - bit width per node.
+ * @category modules
+ */
+export default class XorGate extends CircuitElement {
+    constructor(x, y, scope = globalScope, dir = 'RIGHT', inputs = 2, bitWidth = 1) {
+        super(x, y, scope, dir, bitWidth);
+        /* this is done in this.baseSetup() now
+        this.scope['XorGate'].push(this);
+        */
+        this.rectangleObject = false;
+        this.setDimensions(15, 20);
+
+        this.inp = [];
+        this.inputSize = inputs;
+
+        if (inputs % 2 === 1) {
+            for (let i = 0; i < inputs / 2 - 1; i++) {
+                const a = new Node(-20, -10 * (i + 1), 0, this);
+                this.inp.push(a);
+            }
+            let a = new Node(-20, 0, 0, this);
+            this.inp.push(a);
+            for (let i = inputs / 2 + 1; i < inputs; i++) {
+                a = new Node(-20, 10 * (i + 1 - inputs / 2 - 1), 0, this);
+                this.inp.push(a);
+            }
+        } else {
+            for (let i = 0; i < inputs / 2; i++) {
+                const a = new Node(-20, -10 * (i + 1), 0, this);
+                this.inp.push(a);
+            }
+            for (let i = inputs / 2; i < inputs; i++) {
+                const a = new Node(-20, 10 * (i + 1 - inputs / 2), 0, this);
+                this.inp.push(a);
+            }
+        }
+        this.output1 = new Node(20, 0, 1, this);
+    }
+
+    /**
+     * @memberof XorGate
+     * fn to create save Json Data of object
+     * @return {JSON}
+     */
+    customSave() {
+        // //console.log(this.scope.allNodes);
+        const data = {
+            constructorParamaters: [this.direction, this.inputSize, this.bitWidth],
+            nodes: {
+                inp: this.inp.map(findNode),
+                output1: findNode(this.output1),
+            },
+        };
+        return data;
+    }
+
+    /**
+     * @memberof XorGate
+     * resolve output values based on inputData
+     */
+    resolve() {
+        let result = this.inp[0].value || 0;
+        if (this.isResolvable() === false) {
+            return;
+        }
+        for (let i = 1; i < this.inputSize; i++) result ^= (this.inp[i].value || 0);
+
+        this.output1.value = result;
+        simulationArea.simulationQueue.add(this.output1);
+    }
+
+    /**
+     * @memberof XorGate
+     * function to draw element
+     */
+    customDraw() {
+        const ctx = simulationArea.context;
+        ctx.strokeStyle = ('rgba(0,0,0,1)');
+        ctx.lineWidth = correctWidth(3);
+
+        const xx = this.x;
+        const yy = this.y;
+        ctx.beginPath();
+        ctx.fillStyle = 'white';
+        moveTo(ctx, -10, -20, xx, yy, this.direction, true);
+        bezierCurveTo(0, -20, +15, -10, 20, 0, xx, yy, this.direction);
+        bezierCurveTo(0 + 15, 0 + 10, 0, 0 + 20, -10, +20, xx, yy, this.direction);
+        bezierCurveTo(0, 0, 0, 0, -10, -20, xx, yy, this.direction);
+        // arc(ctx, 0, 0, -20, (-Math.PI / 2), (Math.PI / 2), xx, yy, this.direction);
+        ctx.closePath();
+        if ((this.hover && !simulationArea.shiftDown) || simulationArea.lastSelected === this || simulationArea.multipleObjectSelections.contains(this)) ctx.fillStyle = 'rgba(255, 255, 32,0.8)';
+        ctx.fill();
+        ctx.stroke();
+        ctx.beginPath();
+        arc2(ctx, -35, 0, 25, 1.70 * (Math.PI), 0.30 * (Math.PI), xx, yy, this.direction);
+        ctx.stroke();
+    }
+}
+
+/**
+ * @memberof XorGate
+ * Help Tip
+ * @type {string}
+ * @category modules
+ */
+XorGate.prototype.tooltipText = 'Xor Gate Tooltip : Implements an exclusive OR.';
+
+/**
+ * @memberof XorGate
+ * @type {boolean}
+ * @category modules
+ */
+XorGate.prototype.alwaysResolve = true;
+
+/**
+ * @memberof XorGate
+ * function to change input nodes of the element
+ * @category modules
+ */
+XorGate.prototype.changeInputSize = changeInputSize;
+
+/**
+ * @memberof XorGate
+ * @type {string}
+ * @category modules
+ */
+XorGate.prototype.verilogType = 'xor';
+XorGate.prototype.helplink = 'https://docs.circuitverse.org/#/gates?id=xor-gate';
+XorGate.prototype.objectType = 'XorGate';
diff --git a/src/node.js b/src/node.js
index df06616..b33db8e 100644
--- a/src/node.js
+++ b/src/node.js
@@ -1,21 +1,37 @@
-import { drawCircle, drawLine } from "./canvasApi";
-import { simulationArea } from "./simulationArea";
-import { distance } from "./utils";
-import { renderCanvas,scheduleUpdate } from "./engine";
-import Wire from "./wire"
-
-function constructNodeConnections(node, data) {
-    for (var i = 0; i < data["connections"].length; i++)
-        if (!node.connections.contains(node.scope.allNodes[data["connections"][i]])) node.connect(node.scope.allNodes[data["connections"][i]]);
+/* eslint-disable import/no-cycle */
+import { drawCircle, drawLine, arc } from './canvasApi';
+import simulationArea from './simulationArea';
+import { distance, showError } from './utils';
+import {
+    renderCanvas, scheduleUpdate, wireToBeCheckedSet,
+    updateSimulationSet, updateCanvasSet, forceResetNodesSet,
+    canvasMessageData,
+} from './engine';
+import Wire from './wire';
+import { createNodeGet, createNodeSet, stopWireSet } from './listeners';
+
+/**
+* Constructs all the connections of Node node
+ * @param {Node} node - node to be constructed
+ * @param {JSON} data - the saved data which is used to load
+ * @category node
+ */
+export function constructNodeConnections(node, data) {
+    for (let i = 0; i < data.connections.length; i++) { if (!node.connections.contains(node.scope.allNodes[data.connections[i]])) node.connect(node.scope.allNodes[data.connections[i]]); }
 }
 
-//Fn to replace node by node @ index in global Node List - used when loading
-function replace(node, index) {
+/**
+ * Fn to replace node by node @ index in global Node List - used when loading
+ * @param {Node} node - node to be replaced
+ * @param {number} index - index of node to be replaced
+ * @category node
+ */
+export function replace(node, index) {
     if (index == -1) {
         return node;
     }
-    var scope = node.scope;
-    var parent = node.parent;
+    const { scope } = node;
+    const { parent } = node;
     parent.nodeList.clean(node);
     node.delete();
     node = scope.allNodes[index];
@@ -24,71 +40,103 @@ function replace(node, index) {
     node.updateRotation();
     return node;
 }
-function rotate(x1, y1, dir){
-    if (dir == "LEFT")
-        return [-x1, y1]; else if (dir == "DOWN")
-        return [y1, x1]; else if (dir == "UP")
-        return [y1, -x1]; else
-        return [x1, y1];
+function rotate(x1, y1, dir) {
+    if (dir == 'LEFT') { return [-x1, y1]; } if (dir == 'DOWN') { return [y1, x1]; } if (dir == 'UP') { return [y1, -x1]; } return [x1, y1];
 }
 
-function extractBits(num, start, end) {
+export function extractBits(num, start, end) {
     return (num << (32 - end)) >>> (32 - (end - start + 1));
 }
 
-function bin2dec(binString) {
+export function bin2dec(binString) {
     return parseInt(binString, 2);
 }
 
-function dec2bin(dec, bitWidth = undefined) {
+export function dec2bin(dec, bitWidth = undefined) {
     // only for positive nos
-    var bin = (dec).toString(2);
+    const bin = (dec).toString(2);
     if (bitWidth == undefined) return bin;
     return '0'.repeat(bitWidth - bin.length) + bin;
 }
 
-//find Index of a node
+/**
+ * find Index of a node
+ * @param {Node} x - Node to be dound
+ * @category node
+ */
 export function findNode(x) {
     return x.scope.allNodes.indexOf(x);
 }
 
-function loadNode(data, scope) {
-    var n = new Node(data["x"], data["y"], data["type"], scope.root, data["bitWidth"], data["label"]);
+/**
+ * function makes a node according to data providede
+ * @param {JSON} data - the data used to load a Project
+ * @param {Scope} scope - scope to which node has to be loaded
+ * @category node
+ */
+export function loadNode(data, scope) {
+    const n = new Node(data.x, data.y, data.type, scope.root, data.bitWidth, data.label);
 }
 
-//get Node in index x in scope and set parent
+/**
+ * get Node in index x in scope and set parent
+ * @param {Node} x - the desired node
+ * @param {Scope} scope - the scope
+ * @param {CircuitElement} parent - The parent of node
+ * @category node
+ */
 function extractNode(x, scope, parent) {
-    var n = scope.allNodes[x];
+    const n = scope.allNodes[x];
     n.parent = parent;
     return n;
 }
 
-//output node=1
-//input node=0
-//intermediate node =2
-
-const NODE_OUTPUT = 1;
-const NODE_INPUT = 0;
-const NODE_INTERMEDIATE = 2;
-
-export class Node {
-    constructor(x, y, type, parent, bitWidth = undefined, label = "") {
-
+// output node=1
+// input node=0
+// intermediate node =2
+
+window.NODE_INPUT = 0;
+window.NODE_OUTPUT = 1;
+window.NODE_INTERMEDIATE = 2;
+/**
+ * used to give id to a node.
+ * @type {number}
+ * @category node
+ */
+let uniqueIdCounter = 10;
+
+/**
+ * This class is responsible for all the Nodes.Nodes are connected using Wires
+ * Nodes are of 3 types;
+ * NODE_INPUT = 0;
+ * NODE_OUTPUT = 1;
+ * NODE_INTERMEDIATE = 2;
+ * Input and output nodes belong to some CircuitElement(it's parent)
+ * @param {number} x - x coord of Node
+ * @param {number} y - y coord of Node
+ * @param {number} type - type of node
+ * @param {CircuitElement} parent - parent element
+ * @param {?number} bitWidth - the bits of node in input and output nodes
+ * @param {string=} label - label for a node
+ * @category node
+ */
+export default class Node {
+    constructor(x, y, type, parent, bitWidth = undefined, label = '') {
         // Should never raise, but just in case
-        if(isNaN(x) || isNaN(y)){
+        if (isNaN(x) || isNaN(y)) {
             this.delete();
-            showError("Fatal error occurred");
+            showError('Fatal error occurred');
             return;
         }
 
-        forceResetNodes = true;
+        forceResetNodesSet(true);
 
-        this.objectType = "Node";
-        this.id = 'node' + uniqueIdCounter;
+        this.objectType = 'Node';
+        this.subcircuitOverride = false;
+        this.id = `node${uniqueIdCounter}`;
         uniqueIdCounter++;
         this.parent = parent;
-        if (type != 2 && this.parent.nodeList !== undefined)
-            this.parent.nodeList.push(this);
+        if (type != 2 && this.parent.nodeList !== undefined) { this.parent.nodeList.push(this); }
 
         if (bitWidth == undefined) {
             this.bitWidth = parent.bitWidth;
@@ -111,15 +159,21 @@ export class Node {
         this.hover = false;
         this.wasClicked = false;
         this.scope = this.parent.scope;
+        /**
+        * @type {string}
+        * value of this.prev is
+        * 'a' : whenever a node is not being dragged this.prev is 'a'
+        * 'x' : when node is being dragged horizontally
+        * 'y' : when node is being dragged vertically
+        */
         this.prev = 'a';
         this.count = 0;
         this.highlighted = false;
 
-        //This fn is called during rotations and setup
+        // This fn is called during rotations and setup
         this.refresh();
 
-        if (this.type == 2)
-            this.parent.scope.nodes.push(this);
+        if (this.type == 2) { this.parent.scope.nodes.push(this); }
 
         this.parent.scope.allNodes.push(this);
 
@@ -127,14 +181,20 @@ export class Node {
             inQueue: false,
             time: undefined,
             index: undefined,
-        }
-
+        };
     }
 
+    /**
+     * @param {string} - new label
+     * Function to set label
+     */
     setLabel(label) {
-        this.label = label; //|| "";
+        this.label = label; // || "";
     }
 
+    /**
+     * function to convert a node to intermediate node
+     */
     converToIntermediate() {
         this.type = 2;
         this.x = this.absX();
@@ -143,173 +203,189 @@ export class Node {
         this.scope.nodes.push(this);
     }
 
+    /**
+    * Helper fuction to move a node. Sets up some variable which help in changing node.
+    */
     startDragging() {
         this.oldx = this.x;
         this.oldy = this.y;
     }
 
+    /**
+    * Helper fuction to move a node.
+    */
     drag() {
         this.x = this.oldx + simulationArea.mouseX - simulationArea.mouseDownX;
         this.y = this.oldy + simulationArea.mouseY - simulationArea.mouseDownY;
     }
 
+    /**
+    * Funciton for saving a node
+    */
     saveObject() {
-
         if (this.type == 2) {
             this.leftx = this.x;
             this.lefty = this.y;
         }
-        var data = {
+        const data = {
             x: this.leftx,
             y: this.lefty,
             type: this.type,
             bitWidth: this.bitWidth,
             label: this.label,
             connections: [],
-        }
-        for (var i = 0; i < this.connections.length; i++) {
-            data["connections"].push(findNode(this.connections[i]));
+        };
+        for (let i = 0; i < this.connections.length; i++) {
+            data.connections.push(findNode(this.connections[i]));
         }
         return data;
     }
 
+    /**
+     * helper function to help rotating parent
+     */
     updateRotation() {
-        var x, y;
+        let x; var
+            y;
         [x, y] = rotate(this.leftx, this.lefty, this.parent.direction);
         this.x = x;
         this.y = y;
     }
 
+    /**
+    * Refreshes a node after roation of parent
+    */
     refresh() {
-
         this.updateRotation();
-        for (var i = 0; i < this.connections.length; i++) {
+        for (let i = 0; i < this.connections.length; i++) {
             this.connections[i].connections.clean(this);
         }
         this.connections = [];
-
     }
 
+    /**
+    * gives absolute x position of the node
+    */
     absX() {
         return this.x + this.parent.x;
     }
 
+    /**
+    * gives absolute y position of the node
+    */
     absY() {
         return this.y + this.parent.y;
     }
 
+    /**
+     * update the scope of a node
+     */
     updateScope(scope) {
         this.scope = scope;
         if (this.type == 2) this.parent = scope.root;
-
     }
 
+    /**
+     * return true if node is connected or not connected but false if undefined.
+     */
     isResolvable() {
         return this.value != undefined;
     }
 
+    /**
+     * function used to reset the nodes
+     */
     reset() {
         this.value = undefined;
         this.highlighted = false;
     }
 
+    /**
+    * function to connect two nodes.
+    */
     connect(n) {
-
         if (n == this) return;
         if (n.connections.contains(this)) return;
-        var w = new Wire(this, n, this.parent.scope);
+        const w = new Wire(this, n, this.parent.scope);
         this.connections.push(n);
         n.connections.push(this);
 
-        updateCanvas = true;
-        updateSimulation = true;
+        updateCanvasSet(true);
+        updateSimulationSet(true);
         scheduleUpdate();
     }
 
+    /**
+     * connects but doesnt draw the wire between nodes
+     */
     connectWireLess(n) {
-
         if (n == this) return;
         if (n.connections.contains(this)) return;
         this.connections.push(n);
         n.connections.push(this);
 
-        updateCanvas = true;
-        updateSimulation = true;
+        updateCanvasSet(true);
+        updateSimulationSet(true);
         scheduleUpdate();
     }
 
+    /**
+    * disconnecting two nodes connected wirelessly
+    */
     disconnectWireLess(n) {
-
         this.connections.clean(n);
         n.connections.clean(this);
     }
 
+    /**
+     * function to resolve a node
+     */
     resolve() {
-
         // Remove Propogation of values (TriState)
         if (this.value == undefined) {
-
-
-            for (var i = 0; i < this.connections.length; i++) {
+            for (let i = 0; i < this.connections.length; i++) {
                 if (this.connections[i].value !== undefined) {
                     this.connections[i].value = undefined;
                     simulationArea.simulationQueue.add(this.connections[i]);
-
                 }
             }
 
             if (this.type == NODE_INPUT) {
-                if (this.parent.objectType == "Splitter") {
+                if (this.parent.objectType == 'Splitter') {
                     this.parent.removePropagation();
                 } else
-                if (this.parent.isResolvable())
-                    simulationArea.simulationQueue.add(this.parent);
-                else
-                    this.parent.removePropagation();
-
-
+                if (this.parent.isResolvable()) { simulationArea.simulationQueue.add(this.parent); } else { this.parent.removePropagation(); }
             }
 
             if (this.type == NODE_OUTPUT && !this.subcircuitOverride) {
                 if (this.parent.isResolvable() && !this.parent.queueProperties.inQueue) {
-                    if (this.parent.objectType == "TriState") {
-                        if (this.parent.state.value)
-                            simulationArea.simulationQueue.add(this.parent);
+                    if (this.parent.objectType == 'TriState') {
+                        if (this.parent.state.value) { simulationArea.simulationQueue.add(this.parent); }
                     } else {
                         simulationArea.simulationQueue.add(this.parent);
                     }
-
                 }
-
             }
 
             return;
         }
 
         if (this.type == 0) {
-
-            if (this.parent.isResolvable())
-                simulationArea.simulationQueue.add(this.parent);
-
+            if (this.parent.isResolvable()) { simulationArea.simulationQueue.add(this.parent); }
         }
 
-        for (var i = 0; i < this.connections.length; i++) {
-
-            let node = this.connections[i];
+        for (let i = 0; i < this.connections.length; i++) {
+            const node = this.connections[i];
 
             if (node.value != this.value) {
-
-                if (node.type == 1 && node.value != undefined && node.parent.objectType != "TriState" && !(node.subcircuitOverride && node.scope != this.scope)) {
-
+                if (node.type == 1 && node.value != undefined && node.parent.objectType != 'TriState' && !(node.subcircuitOverride && node.scope != this.scope)) {
                     this.highlighted = true;
                     node.highlighted = true;
 
-                    showError("Contention Error: " + this.value + " and " + node.value);
+                    showError(`Contention Error: ${this.value} and ${node.value}`);
                 } else if (node.bitWidth == this.bitWidth || node.type == 2) {
-
-                    if (node.parent.objectType == "TriState" && node.value != undefined && node.type == 1) {
-                        if (node.parent.state.value)
-                            simulationArea.contentionPending.push(node.parent);
+                    if (node.parent.objectType == 'TriState' && node.value != undefined && node.type == 1) {
+                        if (node.parent.state.value) { simulationArea.contentionPending.push(node.parent); }
                     }
 
                     node.bitWidth = this.bitWidth;
@@ -318,13 +394,15 @@ export class Node {
                 } else {
                     this.highlighted = true;
                     node.highlighted = true;
-                    showError("BitWidth Error: " + this.bitWidth + " and " + node.bitWidth);
+                    showError(`BitWidth Error: ${this.bitWidth} and ${node.bitWidth}`);
                 }
             }
         }
-
     }
 
+    /**
+     * this function checks if hover over the node
+     */
     checkHover() {
         if (!simulationArea.mouseDown) {
             if (simulationArea.hover == this) {
@@ -336,12 +414,10 @@ export class Node {
             } else if (!simulationArea.hover) {
                 this.hover = this.isHover();
                 if (this.hover) {
-
                     simulationArea.hover = this;
                 } else {
                     this.showHover = false;
                 }
-
             } else {
                 this.hover = false;
                 this.showHover = false;
@@ -349,57 +425,49 @@ export class Node {
         }
     }
 
+    /**
+     * this function draw a node
+     */
     draw() {
-
-        if (this.type == 2) this.checkHover();
-
-        let ctx = simulationArea.context;
-
+        // console.log(this.id)
+        const ctx = simulationArea.context;
         if (this.clicked) {
             if (this.prev == 'x') {
-                drawLine(ctx, this.absX(), this.absY(), simulationArea.mouseX, this.absY(), "black", 3);
-                drawLine(ctx, simulationArea.mouseX, this.absY(), simulationArea.mouseX, simulationArea.mouseY, "black", 3);
+                drawLine(ctx, this.absX(), this.absY(), simulationArea.mouseX, this.absY(), 'black', 3);
+                drawLine(ctx, simulationArea.mouseX, this.absY(), simulationArea.mouseX, simulationArea.mouseY, 'black', 3);
             } else if (this.prev == 'y') {
-                drawLine(ctx, this.absX(), this.absY(), this.absX(), simulationArea.mouseY, "black", 3);
-                drawLine(ctx, this.absX(), simulationArea.mouseY, simulationArea.mouseX, simulationArea.mouseY, "black", 3);
+                drawLine(ctx, this.absX(), this.absY(), this.absX(), simulationArea.mouseY, 'black', 3);
+                drawLine(ctx, this.absX(), simulationArea.mouseY, simulationArea.mouseX, simulationArea.mouseY, 'black', 3);
+            } else if (Math.abs(this.x + this.parent.x - simulationArea.mouseX) > Math.abs(this.y + this.parent.y - simulationArea.mouseY)) {
+                drawLine(ctx, this.absX(), this.absY(), simulationArea.mouseX, this.absY(), 'black', 3);
             } else {
-                if (Math.abs(this.x + this.parent.x - simulationArea.mouseX) > Math.abs(this.y + this.parent.y - simulationArea.mouseY)) {
-                    drawLine(ctx, this.absX(), this.absY(), simulationArea.mouseX, this.absY(), "black", 3);
-                } else {
-                    drawLine(ctx, this.absX(), this.absY(), this.absX(), simulationArea.mouseY, "black", 3);
-                }
+                drawLine(ctx, this.absX(), this.absY(), this.absX(), simulationArea.mouseY, 'black', 3);
             }
         }
-
-        var color = "black";
-        if (this.bitWidth == 1) color = ["green", "lightgreen"][this.value];
-        if (this.value == undefined) color = "red";
-        if (this.type == 2)
-            drawCircle(ctx, this.absX(), this.absY(), 3, color);
-        else drawCircle(ctx, this.absX(), this.absY(), 3, "green");
-
-        // if (this.highlighted || simulationArea.lastSelected == this || (this.isHover() && !simulationArea.selected && !simulationArea.shiftDown) || simulationArea.multipleObjectSelections.contains(this)) {
-        //     ctx.strokeStyle = "green";
-        //     ctx.beginPath();
-        //     ctx.lineWidth = 3;
-        //     arc(ctx, this.x, this.y, 8, 0, Math.PI * 2, this.parent.x, this.parent.y, "RIGHT");
-        //     ctx.closePath();
-        //     ctx.stroke();
-        // }
+        let color = 'black';
+        if (this.bitWidth == 1) color = ['green', 'lightgreen'][this.value];
+        if (this.value == undefined) color = 'red';
+        if (this.type == 2) this.checkHover();
+        if (this.type == 2) { drawCircle(ctx, this.absX(), this.absY(), 3, color); } else { drawCircle(ctx, this.absX(), this.absY(), 3, 'green'); }
+
+        if (this.highlighted || simulationArea.lastSelected == this || (this.isHover() && !simulationArea.selected && !simulationArea.shiftDown) || simulationArea.multipleObjectSelections.contains(this)) {
+            ctx.strokeStyle = 'green';
+            ctx.beginPath();
+            ctx.lineWidth = 3;
+            arc(ctx, this.x, this.y, 8, 0, Math.PI * 2, this.parent.x, this.parent.y, 'RIGHT');
+            ctx.closePath();
+            ctx.stroke();
+        }
 
         if (this.hover || (simulationArea.lastSelected == this)) {
-
             if (this.showHover || simulationArea.lastSelected == this) {
-                canvasMessageData = {
-                    x: this.absX(),
-                    y: this.absY() - 15
-                }
+                canvasMessageData.x = this.absX();
+                canvasMessageData.y = this.absY() - 15;
                 if (this.type == 2) {
-                    var v = "X";
-                    if (this.value !== undefined)
-                        v = this.value.toString(16);
+                    let v = 'X';
+                    if (this.value !== undefined) { v = this.value.toString(16); }
                     if (this.label.length) {
-                        canvasMessageData.string = this.label + " : " + v;
+                        canvasMessageData.string = `${this.label} : ${v}`;
                     } else {
                         canvasMessageData.string = v;
                     }
@@ -407,29 +475,34 @@ export class Node {
                     canvasMessageData.string = this.label;
                 }
             } else {
-                setTimeout(function() {
+                setTimeout(() => {
                     if (simulationArea.hover) simulationArea.hover.showHover = true;
-                    let canvasUpdate = true;
-                    renderCanvas(globalScope)
+                    updateCanvasSet(true);
+                    renderCanvas(globalScope);
                 }, 400);
             }
         }
-
     }
 
+    /**
+     * checks if a node has been deleted
+     */
     checkDeleted() {
         if (this.deleted) this.delete();
         if (this.connections.length == 0 && this.type == 2) this.delete();
     }
 
+    /**
+    * used to update nodes if there is a event like click or hover on the node.
+    * many booleans are used to check if certain properties are to be updated.
+    */
     update() {
-
         if (embed) return;
 
         if (this == simulationArea.hover) simulationArea.hover = undefined;
         this.hover = this.isHover();
 
-        if (!simulationArea.mouseDown) {
+        if (createNodeGet()) {
             if (this.absX() != this.prevx || this.absY() != this.prevy) { // Connect to any node
                 this.prevx = this.absX();
                 this.prevy = this.absY();
@@ -441,7 +514,7 @@ export class Node {
             simulationArea.hover = this;
         }
 
-        if (simulationArea.mouseDown && ((this.hover && !simulationArea.selected) || simulationArea.lastSelected == this)) {
+        if (createNodeGet() && ((this.hover && !simulationArea.selected) || simulationArea.lastSelected == this)) {
             simulationArea.selected = true;
             simulationArea.lastSelected = this;
             this.clicked = true;
@@ -450,12 +523,11 @@ export class Node {
         }
 
         if (!this.wasClicked && this.clicked) {
-
             this.wasClicked = true;
             this.prev = 'a';
             if (this.type == 2) {
                 if (!simulationArea.shiftDown && simulationArea.multipleObjectSelections.contains(this)) {
-                    for (var i = 0; i < simulationArea.multipleObjectSelections.length; i++) {
+                    for (let i = 0; i < simulationArea.multipleObjectSelections.length; i++) {
                         simulationArea.multipleObjectSelections[i].startDragging();
                     }
                 }
@@ -471,11 +543,9 @@ export class Node {
                     simulationArea.lastSelected = this;
                 }
             }
-
         } else if (this.wasClicked && this.clicked) {
-
             if (!simulationArea.shiftDown && simulationArea.multipleObjectSelections.contains(this)) {
-                for (var i = 0; i < simulationArea.multipleObjectSelections.length; i++) {
+                for (let i = 0; i < simulationArea.multipleObjectSelections.length; i++) {
                     simulationArea.multipleObjectSelections[i].drag();
                 }
             }
@@ -484,7 +554,7 @@ export class Node {
                     this.y = simulationArea.mouseY - this.parent.y;
                     this.prev = 'a';
                     return;
-                } else if (this.connections.length == 1 && this.connections[0].absY() == simulationArea.mouseY && this.absY() == simulationArea.mouseY) {
+                } if (this.connections.length == 1 && this.connections[0].absY() == simulationArea.mouseY && this.absY() == simulationArea.mouseY) {
                     this.x = simulationArea.mouseX - this.parent.x;
                     this.prev = 'a';
                     return;
@@ -509,7 +579,6 @@ export class Node {
             } else if (this.prev == 'y' && this.absX() == simulationArea.mouseX) {
                 this.prev = 'a';
             }
-
         } else if (this.wasClicked && !this.clicked) {
             this.wasClicked = false;
 
@@ -517,8 +586,10 @@ export class Node {
                 return; // no new node situation
             }
 
-            var x1, y1, x2, y2, flag = 0;
-            var n1, n2;
+            let x1; let y1; let x2; let y2; var
+                flag = 0;
+            let n1; var
+                n2;
 
             // (x,y) present node, (x1,y1) node 1 , (x2,y2) node 2
             // n1 - node 1, n2 - node 2
@@ -527,11 +598,10 @@ export class Node {
             // flag = 1  - node 1 and node 2
             x2 = simulationArea.mouseX;
             y2 = simulationArea.mouseY;
-            let x = this.absX();
-            let y = this.absY();
+            const x = this.absX();
+            const y = this.absY();
 
             if (x != x2 && y != y2) {
-
                 // Rare Exception Cases
                 if (this.prev == 'a' && distance(simulationArea.mouseX, simulationArea.mouseY, this.absX(), this.absY()) >= 10) {
                     if (Math.abs(this.x + this.parent.x - simulationArea.mouseX) > Math.abs(this.y + this.parent.y - simulationArea.mouseY)) {
@@ -547,22 +617,22 @@ export class Node {
                     y1 = y;
                 } else if (this.prev == 'y') {
                     y1 = y2;
-                    x1 = x
+                    x1 = x;
                 }
             }
 
             if (flag == 1) {
-                for (var i = 0; i < this.parent.scope.allNodes.length; i++) {
+                for (let i = 0; i < this.parent.scope.allNodes.length; i++) {
                     if (x1 == this.parent.scope.allNodes[i].absX() && y1 == this.parent.scope.allNodes[i].absY()) {
                         n1 = this.parent.scope.allNodes[i];
-
+                        stopWireSet(true);
                         break;
                     }
                 }
 
                 if (n1 == undefined) {
                     n1 = new Node(x1, y1, 2, this.scope.root);
-                    for (var i = 0; i < this.parent.scope.wires.length; i++) {
+                    for (let i = 0; i < this.parent.scope.wires.length; i++) {
                         if (this.parent.scope.wires[i].checkConvergence(n1)) {
                             this.parent.scope.wires[i].converge(n1);
                             break;
@@ -572,16 +642,18 @@ export class Node {
                 this.connect(n1);
             }
 
-            for (var i = 0; i < this.parent.scope.allNodes.length; i++) {
+            for (let i = 0; i < this.parent.scope.allNodes.length; i++) {
                 if (x2 == this.parent.scope.allNodes[i].absX() && y2 == this.parent.scope.allNodes[i].absY()) {
                     n2 = this.parent.scope.allNodes[i];
+                    stopWireSet(true);
+                    createNodeSet(false);
                     break;
                 }
             }
 
             if (n2 == undefined) {
                 n2 = new Node(x2, y2, 2, this.scope.root);
-                for (var i = 0; i < this.parent.scope.wires.length; i++) {
+                for (let i = 0; i < this.parent.scope.wires.length; i++) {
                     if (this.parent.scope.wires[i].checkConvergence(n2)) {
                         this.parent.scope.wires[i].converge(n2);
                         break;
@@ -591,10 +663,9 @@ export class Node {
             if (flag == 0) this.connect(n2);
             else n1.connect(n2);
             if (simulationArea.lastSelected == this) simulationArea.lastSelected = n2;
-
         }
 
-        if (this.type == 2 && simulationArea.mouseDown == false) {
+        if (this.type == 2 && !createNodeGet()) {
             if (this.connections.length == 2) {
                 if ((this.connections[0].absX() == this.connections[1].absX()) || (this.connections[0].absY() == this.connections[1].absY())) {
                     this.connections[0].connect(this.connections[1]);
@@ -602,11 +673,13 @@ export class Node {
                 }
             } else if (this.connections.length == 0) this.delete();
         }
-
     }
 
+    /**
+     * function delete a node
+     */
     delete() {
-        updateSimulation = true;
+        updateSimulationSet(true);
         this.deleted = true;
         this.parent.scope.allNodes.clean(this);
         this.parent.scope.nodes.clean(this);
@@ -614,12 +687,12 @@ export class Node {
         this.parent.scope.root.nodeList.clean(this); // Hope this works! - Can cause bugs
 
         if (simulationArea.lastSelected == this) simulationArea.lastSelected = undefined;
-        for (var i = 0; i < this.connections.length; i++) {
+        for (let i = 0; i < this.connections.length; i++) {
             this.connections[i].connections.clean(this);
             this.connections[i].checkDeleted();
         }
-        wireToBeChecked = true;
-        forceResetNodes = true;
+        wireToBeCheckedSet(1);
+        forceResetNodesSet(true);
         scheduleUpdate();
     }
 
@@ -631,17 +704,21 @@ export class Node {
         return this.absX() == simulationArea.mouseX && this.absY() == simulationArea.mouseY;
     }
 
+    /**
+     * if input nodde: it resolves the parent
+     * else: it adds all the nodes onto the stack
+     * and they are processed to generate verilog
+     */
     nodeConnect() {
+        const x = this.absX();
+        const y = this.absY();
+        let n;
 
-        var x = this.absX();
-        var y = this.absY();
-        var n;
-
-        for (var i = 0; i < this.parent.scope.allNodes.length; i++) {
+        for (let i = 0; i < this.parent.scope.allNodes.length; i++) {
             if (this != this.parent.scope.allNodes[i] && x == this.parent.scope.allNodes[i].absX() && y == this.parent.scope.allNodes[i].absY()) {
                 n = this.parent.scope.allNodes[i];
                 if (this.type == 2) {
-                    for (var j = 0; j < this.connections.length; j++) {
+                    for (let j = 0; j < this.connections.length; j++) {
                         n.connect(this.connections[j]);
                     }
                     this.delete();
@@ -654,9 +731,9 @@ export class Node {
         }
 
         if (n == undefined) {
-            for (var i = 0; i < this.parent.scope.wires.length; i++) {
+            for (let i = 0; i < this.parent.scope.wires.length; i++) {
                 if (this.parent.scope.wires[i].checkConvergence(this)) {
-                    var n = this;
+                    let n = this;
                     if (this.type != 2) {
                         n = new Node(this.absX(), this.absY(), 2, this.scope.root);
                         this.connect(n);
@@ -666,208 +743,30 @@ export class Node {
                 }
             }
         }
-
     }
 
     processVerilog() {
-
         if (this.type == NODE_INPUT) {
-            if (this.parent.isVerilogResolvable())
-                this.scope.stack.push(this.parent);
+            if (this.parent.isVerilogResolvable()) { this.scope.stack.push(this.parent); }
         }
 
-        for (var i = 0; i < this.connections.length; i++) {
+        for (let i = 0; i < this.connections.length; i++) {
             if (this.connections[i].verilogLabel != this.verilogLabel) {
                 this.connections[i].verilogLabel = this.verilogLabel;
                 this.scope.stack.push(this.connections[i]);
             }
         }
     }
-
-
-
-    // Kept for archival purposes
-    // function oldNodeUpdate() {
-    //
-    //     if (!this.clicked && !simulationArea.mouseDown) {
-    //         var px = this.prevx;
-    //         var py = this.prevy;
-    //         this.prevx = this.absX();
-    //         this.prevy = this.absY();
-    //         if (this.absX() != px || this.absY() != py) {
-    //             updated = true;
-    //             this.nodeConnect();
-    //             return updated;
-    //         }
-    //     }
-    //
-    //     var updated = false;
-    //     if (!simulationArea.mouseDown) this.hover = false;
-    //     if ((this.clicked || !simulationArea.hover) && this.isHover()) {
-    //         this.hover = true;
-    //         simulationArea.hover = this;
-    //     } else if (!simulationArea.mouseDown && this.hover && this.isHover() == false) {
-    //         if (this.hover) simulationArea.hover = undefined;
-    //         this.hover = false;
-    //     }
-    //
-    //     if (simulationArea.mouseDown && (this.clicked)) {
-    //
-    //         if (!simulationArea.shiftDown && simulationArea.multipleObjectSelections.contains(this)) {
-    //             for (var i = 0; i < simulationArea.multipleObjectSelections.length; i++) {
-    //                 simulationArea.multipleObjectSelections[i].drag();
-    //             }
-    //         }
-    //
-    //         if (this.type == 2) {
-    //             if (this.absX() == simulationArea.mouseX && this.absY() == simulationArea.mouseY) {
-    //                 updated = false;
-    //                 this.prev = 'a';
-    //             } else if (this.connections.length == 1 && this.connections[0].absX() == simulationArea.mouseX && this.absX() == simulationArea.mouseX) {
-    //                 this.y = simulationArea.mouseY - this.parent.y;
-    //                 this.prev = 'a';
-    //                 updated = true;
-    //             } else if (this.connections.length == 1 && this.connections[0].absY() == simulationArea.mouseY && this.absY() == simulationArea.mouseY) {
-    //                 this.x = simulationArea.mouseX - this.parent.x;
-    //                 this.prev = 'a';
-    //                 updated = true;
-    //             }
-    //             if (this.connections.length == 1 && this.connections[0].absX() == this.absX() && this.connections[0].absY() == this.absY()) {
-    //                 this.connections[0].clicked = true;
-    //                 this.connections[0].wasClicked = true;
-    //                 this.delete();
-    //                 updated = true;
-    //             }
-    //         }
-    //         if (this.prev == 'a' && distance(simulationArea.mouseX, simulationArea.mouseY, this.absX(), this.absY()) >= 10) {
-    //             if (Math.abs(this.x + this.parent.x - simulationArea.mouseX) > Math.abs(this.y + this.parent.y - simulationArea.mouseY)) {
-    //                 this.prev = 'x';
-    //             } else {
-    //                 this.prev = 'y';
-    //             }
-    //         }
-    //     } else if (simulationArea.mouseDown && !simulationArea.selected) {
-    //         simulationArea.selected = this.clicked = this.hover;
-    //         updated |= this.clicked;
-    //         this.prev = 'a';
-    //     } else if (!simulationArea.mouseDown) {
-    //         if (this.clicked) simulationArea.selected = false;
-    //         this.clicked = false;
-    //         this.count = 0;
-    //     }
-    //
-    //     if (this.clicked && !this.wasClicked) {
-    //         this.wasClicked = true;
-    //         if (!simulationArea.shiftDown && simulationArea.multipleObjectSelections.contains(this)) {
-    //             for (var i = 0; i < simulationArea.multipleObjectSelections.length; i++) {
-    //                 simulationArea.multipleObjectSelections[i].startDragging();
-    //             }
-    //         }
-    //
-    //         if (this.type == 2) {
-    //             if (simulationArea.shiftDown) {
-    //                 simulationArea.lastSelected = undefined;
-    //                 if (simulationArea.multipleObjectSelections.contains(this)) {
-    //                     simulationArea.multipleObjectSelections.clean(this);
-    //                 } else {
-    //                     simulationArea.multipleObjectSelections.push(this);
-    //                 }
-    //             } else {
-    //                 simulationArea.lastSelected = this;
-    //             }
-    //         }
-    //     }
-    //
-    //     if (this.wasClicked && !this.clicked) {
-    //         this.wasClicked = false;
-    //
-    //         if (simulationArea.mouseX == this.absX() && simulationArea.mouseY == this.absY()) {
-    //             this.nodeConnect();
-    //             return updated;
-    //         }
-    //
-    //         var n, n1;
-    //         var x, y, x1, y1, flag = -1;
-    //         x1 = simulationArea.mouseX;
-    //         y1 = simulationArea.mouseY;
-    //         if (this.prev == 'x') {
-    //             x = x1;
-    //             y = this.absY();
-    //             flag = 0;
-    //         } else if (this.prev == 'y') {
-    //             y = y1;
-    //             x = this.absX();
-    //             flag = 1;
-    //         }
-    //         if (this.type == 'a') return; // this should never happen!!
-    //
-    //         for (var i = 0; i < this.parent.scope.allNodes.length; i++) {
-    //             if (x == this.parent.scope.allNodes[i].absX() && y == this.parent.scope.allNodes[i].absY()) {
-    //                 n = this.parent.scope.allNodes[i];
-    //                 this.connect(n);
-    //                 break;
-    //             }
-    //         }
-    //
-    //         if (n == undefined) {
-    //             n = new Node(x, y, 2, this.scope.root);
-    //             this.connect(n);
-    //             for (var i = 0; i < this.parent.scope.wires.length; i++) {
-    //                 if (this.parent.scope.wires[i].checkConvergence(n)) {
-    //                     this.parent.scope.wires[i].converge(n);
-    //                 }
-    //             }
-    //         }
-    //         this.prev = 'a';
-    //
-    //         if (flag == 0 && (this.y + this.parent.y - simulationArea.mouseY) != 0) {
-    //             y = y1;
-    //             flag = 2;
-    //         } else if ((this.x + this.parent.x - simulationArea.mouseX) != 0 && flag == 1) {
-    //             x = x1;
-    //             flag = 2;
-    //         }
-    //         if (flag == 2) {
-    //             for (var i = 0; i < this.parent.scope.allNodes.length; i++) {
-    //                 if (x == this.parent.scope.allNodes[i].absX() && y == this.parent.scope.allNodes[i].absY()) {
-    //                     n1 = this.parent.scope.allNodes[i];
-    //                     n.connect(n1);
-    //                     break;
-    //                 }
-    //             }
-    //             if (n1 == undefined) {
-    //                 n1 = new Node(x, y, 2, this.scope.root);
-    //                 n.connect(n1);
-    //                 for (var i = 0; i < this.parent.scope.wires.length; i++) {
-    //                     if (this.parent.scope.wires[i].checkConvergence(n1)) {
-    //                         this.parent.scope.wires[i].converge(n1);
-    //                     }
-    //                 }
-    //             }
-    //
-    //         }
-    //         updated = true;
-    //
-    //         if (simulationArea.lastSelected == this) simulationArea.lastSelected = undefined;
-    //     }
-    //
-    //     if (this.type == 2) {
-    //         if (this.connections.length == 2 && simulationArea.mouseDown == false) {
-    //             if ((this.connections[0].absX() == this.connections[1].absX()) || (this.connections[0].absY() == this.connections[1].absY())) {
-    //                 this.connections[0].connect(this.connections[1]);
-    //                 this.delete();
-    //             }
-    //         } else if (this.connections.length == 0) this.delete();
-    //     }
-    //
-    //     // if (this.clicked && this.type == 2 && simulationArea.lastSelected == undefined) simulationArea.lastSelected = this;
-    //     return updated;
-    //
-    //
-    //
-    // }
 }
 
+/**
+ * delay in simulation of the node.
+ * @category node
+ */
 Node.prototype.propagationDelay = 0;
-Node.prototype.subcircuitOverride = false;
+
+/**
+ * backward comaptibilty?
+ * @category node
+ */
 Node.prototype.cleanDelete = Node.prototype.delete;
diff --git a/src/plotArea.js b/src/plotArea.js
index 304c574..75ce61b 100644
--- a/src/plotArea.js
+++ b/src/plotArea.js
@@ -1,43 +1,58 @@
+/**
+ * @module plotArea
+ * @category plotArea
+ */
+/**
+ * function to add the plotting div
+ * @memberof module:plotArea
+ * @category plotArea
+ */
 function addPlot() {
     plotArea.ox = 0;
     plotArea.oy = 0;
     plotArea.count = 0;
-    plotArea.unit = 1000;//parseInt(prompt("Enter unit of time(in milli seconds)"));
+    plotArea.unit = 1000;// parseInt(prompt("Enter unit of time(in milli seconds)"));
     plotArea.specificTimeX = 0;
-
 }
 
-
+/**
+ * Used as a stopwatch to
+ * record time side of the plot
+ * @category plotArea
+ */
 class StopWatch {
     constructor() {
         this.StartMilliseconds = 0;
         this.ElapsedMilliseconds = 0;
     }
 
+    /**
+     * @memberof StopWatch
+     * used to start the stopwatch
+     */
     Start() {
         this.StartMilliseconds = new Date().getTime();
     }
 
+    /**
+    * @memberof StopWatch
+    * used to get time elapsed.
+    */
     Stop() {
         this.ElapsedMilliseconds = new Date().getTime() - this.StartMilliseconds;
     }
 }
-function startPlot() {
-    plotArea.stopWatch.Start();
-    for (var i = 0; i < globalScope.Flag.length; i++) {
-        globalScope.Flag[i].plotValues = [[0, globalScope.Flag[i].inp1.value]];
-        globalScope.Flag[i].cachedIndex = 0;
-    }
-    // play();
-    plotArea.scroll = 1;
-    addPlot();
-}
-export var plotArea = {
+
+/**
+ * @type {Object} plotArea
+ * @category plotArea
+ */
+const plotArea = {
     ox: 0,
     oy: 0,
     unit: 0,
-    c: document.getElementById("plotArea"),
-    
+    c: document.getElementById('plotArea'),
+
     count: 0,
     specificTimeX: 0,
     scale: 1,
@@ -45,30 +60,30 @@ export var plotArea = {
     startTime: new Date(),
     endTime: new Date(),
     scroll: 1,
-    setup: function () {
-        this.c = document.getElementById("plotArea")
-        this.stopWatch = new StopWatch()
+    setup() {
+        this.c = document.getElementById('plotArea');
+        this.stopWatch = new StopWatch();
         this.stopWatch.Start();
-        this.ctx = this.c.getContext("2d");
+        this.ctx = this.c.getContext('2d');
         startPlot();
-        this.timeOutPlot = setInterval(function () {
+        this.timeOutPlot = setInterval(() => {
             plotArea.plot();
         }, 100);
     },
-    plot: function () {
+    plot() {
         if (globalScope.Flag.length == 0) {
             this.c.width = this.c.height = 0;
             return;
         }
         this.stopWatch.Stop();
-        var time = this.stopWatch.ElapsedMilliseconds;
-        this.c.width = document.getElementById("simulationArea").clientWidth; //innerWidth;
+        const time = this.stopWatch.ElapsedMilliseconds;
+        this.c.width = document.getElementById('simulationArea').clientWidth; // innerWidth;
 
         this.c.height = globalScope.Flag.length * 30 + 40;
 
         // if(document.getElementById("plot").style.height!=this.c.height+"px"){
-        document.getElementById("plot").style.height = Math.min(this.c.height, 400);
-        document.getElementById("plot").style.width = this.c.width;
+        document.getElementById('plot').style.height = Math.min(this.c.height, 400);
+        document.getElementById('plot').style.width = this.c.width;
         // }
         // else if(document.getElementById("plot").style.width!=this.c.width+"px"){
         // document.getElementById("plot").style.height = this.c.height ;
@@ -77,28 +92,25 @@ export var plotArea = {
 
         if (this.scroll) {
             this.ox = Math.max(0, (time / this.unit) * this.pixel - this.c.width + 70);
-        }
-        else if (!plotArea.mouseDown) {
+        } else if (!plotArea.mouseDown) {
             this.ox -= plotArea.scrollAcc;
             plotArea.scrollAcc *= 0.95;
             if (this.ox < 0) plotArea.scrollAcc = -0.2 + 0.2 * this.ox;
             if (Math.abs(this.ox) < 0.5) this.ox = 0;
         }
-        var ctx = this.ctx;
+        const { ctx } = this;
         this.clear(ctx);
         ctx.fillStyle = 'black';
         ctx.fillRect(0, 0, this.c.width, this.c.height);
-        var unit = (this.pixel / (plotArea.unit * plotArea.scale))
+        const unit = (this.pixel / (plotArea.unit * plotArea.scale));
         ctx.strokeStyle = 'cyan';
         ctx.lineWidth = 2;
-        for (var i = 0; i < globalScope.Flag.length; i++) {
-
-            var arr = globalScope.Flag[i].plotValues;
+        for (let i = 0; i < globalScope.Flag.length; i++) {
+            const arr = globalScope.Flag[i].plotValues;
 
-            var j = 0;
-            // var start=arr[j][0];
-            if (globalScope.Flag[i].cachedIndex)
-                j = globalScope.Flag[i].cachedIndex;
+            let j = 0;
+            // let start=arr[j][0];
+            if (globalScope.Flag[i].cachedIndex) { j = globalScope.Flag[i].cachedIndex; }
 
 
             while (j < arr.length && 80 + (arr[j][0] * unit) - plotArea.ox < 0) {
@@ -115,31 +127,22 @@ export var plotArea = {
             globalScope.Flag[i].cachedIndex = j;
 
             for (; j < arr.length; j++) {
-                var start = arr[j][0];
-
-                if (j + 1 == arr.length)
-                    var end = time;
-                else
-                    var end = arr[j + 1][0];
-
+                const start = arr[j][0];
+                let end;
+                if (j + 1 == arr.length) { end = time; } else { end = arr[j + 1][0]; }
+                let yOff;
                 if (start <= time) {
-
-
-
                     if (globalScope.Flag[i].bitWidth == 1) {
-
                         if (arr[j][1] !== undefined) {
-
-                            if (ctx.strokeStyle == "#000000") {
-                                ctx.stroke()
+                            if (ctx.strokeStyle == '#000000') {
+                                ctx.stroke();
                                 ctx.beginPath();
                                 ctx.lineWidth = 2;
                                 //   ctx.moveTo(80+(start*unit)-plotArea.ox,2*(30+i*15-yOff)-plotArea.oy)
-                                ctx.strokeStyle = "cyan";
+                                ctx.strokeStyle = 'cyan';
                             }
-                            var yOff = 5 * arr[j][1];
-                        }
-                        else {
+                            yOff = 5 * arr[j][1];
+                        } else {
                             ctx.stroke();
                             ctx.beginPath();
                             // ctx.moveTo(80+(start*unit)-plotArea.ox,2*(30+i*15-yOff)-plotArea.oy);
@@ -149,8 +152,7 @@ export var plotArea = {
                         }
                         ctx.lineTo(80 + (start * unit) - plotArea.ox, 2 * (30 + i * 15 - yOff) - plotArea.oy);
                         ctx.lineTo(80 + (end * unit) - plotArea.ox, 2 * (30 + i * 15 - yOff) - plotArea.oy);
-                    }
-                    else {
+                    } else {
                         ctx.beginPath();
                         ctx.moveTo(80 + (end * unit) - plotArea.ox, 55 + 30 * i - plotArea.oy);
                         ctx.lineTo(80 + (end * unit) - 5 - plotArea.ox, 2 * (25 + i * 15) - plotArea.oy);
@@ -160,18 +162,17 @@ export var plotArea = {
                         ctx.lineTo(80 + (end * unit) - 5 - plotArea.ox, 2 * (30 + i * 15) - plotArea.oy);
                         ctx.lineTo(80 + (end * unit) - plotArea.ox, 55 + 30 * i - plotArea.oy);
                         mid = 80 + ((end + start) / Math.round(plotArea.unit * plotArea.scale)) * this.pixel / 2;
-                        ctx.font = "12px Georgia";
+                        ctx.font = '12px Georgia';
                         ctx.fillStyle = 'white';
                         if ((start * unit) + 10 - plotArea.ox <= 0 && (end * unit) + 10 - plotArea.ox >= 0) {
                             mid = 80 + ((end - 3000) / Math.round(plotArea.unit * plotArea.scale)) * this.pixel;
                         }
 
 
-                        ctx.fillText(arr[j][1].toString() || "x", mid - plotArea.ox, 57 + 30 * i - plotArea.oy);
+                        ctx.fillText(arr[j][1].toString() || 'x', mid - plotArea.ox, 57 + 30 * i - plotArea.oy);
                         ctx.stroke();
                     }
-                }
-                else {
+                } else {
                     break;
                 }
 
@@ -180,36 +181,35 @@ export var plotArea = {
 
             ctx.stroke();
             ctx.beginPath();
-
         }
         // 2 rectangles showing the time and labels
 
         ctx.fillStyle = '#eee';
         ctx.fillRect(0, 0, this.c.width, 30);
-        ctx.font = "14px Georgia";
+        ctx.font = '14px Georgia';
         ctx.fillStyle = 'black';
-        for (var i = 1; i * Math.round(plotArea.unit * plotArea.scale) <= time + Math.round(plotArea.unit * plotArea.scale); i++) {
-            ctx.fillText(Math.round(plotArea.unit * plotArea.scale) * i / 1000 + "s", 48 + this.pixel * i - plotArea.ox, 20);
+        for (let i = 1; i * Math.round(plotArea.unit * plotArea.scale) <= time + Math.round(plotArea.unit * plotArea.scale); i++) {
+            ctx.fillText(`${Math.round(plotArea.unit * plotArea.scale) * i / 1000}s`, 48 + this.pixel * i - plotArea.ox, 20);
         }
 
         ctx.fillStyle = '#eee';
         ctx.fillRect(0, 0, 75, this.c.height);
-        ctx.font = "15px Georgia";
+        ctx.font = '15px Georgia';
         ctx.fillStyle = 'black';
-        for (var i = 0; i < globalScope.Flag.length; i++) {
+        for (let i = 0; i < globalScope.Flag.length; i++) {
             ctx.fillText(globalScope.Flag[i].identifier, 5, 2 * (25 + i * 15) - plotArea.oy);
             ctx.fillRect(0, 2 * (13 + i * 15) + 4 - plotArea.oy, 75, 3);
         }
         ctx.fillStyle = '#eee';
         ctx.fillRect(0, 0, 75, 30);
         ctx.fillStyle = 'black';
-        ctx.font = "16px Georgia";
-        ctx.fillText("Time", 10, 20);
+        ctx.font = '16px Georgia';
+        ctx.fillText('Time', 10, 20);
         ctx.strokeStyle = 'black';
         ctx.moveTo(0, 25);
         ctx.lineTo(75, 25);
         // for yellow line to show specific time
-        var specificTime = (plotArea.specificTimeX + plotArea.ox - 80) * Math.round(plotArea.unit * plotArea.scale) / (this.pixel);;
+        const specificTime = (plotArea.specificTimeX + plotArea.ox - 80) * Math.round(plotArea.unit * plotArea.scale) / (this.pixel);
         // ctx.strokeStyle = 'white';
         // ctx.moveTo(plotArea.specificTimeX,0);
         // ctx.lineTo(plotArea.specificTimeX,plotArea.c.height);
@@ -219,9 +219,9 @@ export var plotArea = {
             ctx.fillRect(plotArea.specificTimeX - 35, 0, 70, 30);
             ctx.fillStyle = 'red';
             ctx.fillRect(plotArea.specificTimeX - 30, 2, 60, 26);
-            ctx.font = "12px Georgia";
+            ctx.font = '12px Georgia';
             ctx.fillStyle = 'black';
-            ctx.fillText(Math.round(specificTime) + "ms", plotArea.specificTimeX - 25, 20);
+            ctx.fillText(`${Math.round(specificTime)}ms`, plotArea.specificTimeX - 25, 20);
         }
         // borders
         ctx.strokeStyle = 'black';
@@ -244,48 +244,59 @@ export var plotArea = {
         //   ctx.fillRect(0, 27, this.c.width, 3);
         ctx.stroke();
     },
-    clear: function (ctx) {
+    clear(ctx) {
         ctx.clearRect(0, 0, plotArea.c.width, plotArea.c.height);
         // clearInterval(timeOutPlot);
-    }
+    },
 
+};
+export default plotArea;
+if (document.getElementById('plotArea') !== null) {
+    /**
+     * Event listeners for the Plot
+     */
+    document.getElementById('plotArea').addEventListener('mousedown', (e) => {
+        const rect = plotArea.c.getBoundingClientRect();
+        const x = e.clientX - rect.left;
+        plotArea.scrollAcc = 0;
+        if (e.shiftKey) {
+            plotArea.specificTimeX = x;
+        } else {
+            plotArea.scroll = 0;
+            plotArea.mouseDown = true;
+
+            plotArea.prevX = x;
+            console.log('HIT');
+        }
+    });
+    document.getElementById('plotArea').addEventListener('mouseup', (e) => {
+        plotArea.mouseDown = false;
+    });
+
+    document.getElementById('plotArea').addEventListener('mousemove', (e) => {
+        const rect = plotArea.c.getBoundingClientRect();
+        const x = e.clientX - rect.left;
+        if (!e.shiftKey && plotArea.mouseDown) {
+            plotArea.ox -= x - plotArea.prevX;
+            plotArea.scrollAcc = x - plotArea.prevX;
+            plotArea.prevX = x;
+            // plotArea.ox=Math.max(0,plotArea.ox)
+        } else {
+            plotArea.mouseDown = false;
+        }
+    });
+}
+/**
+ * sets plot values of all flags and it add(s)Plot().
+ * @category plotArea
+ */
+function startPlot() {
+    plotArea.stopWatch.Start();
+    for (let i = 0; i < globalScope.Flag.length; i++) {
+        globalScope.Flag[i].plotValues = [[0, globalScope.Flag[i].inp1.value]];
+        globalScope.Flag[i].cachedIndex = 0;
+    }
+    // play();
+    plotArea.scroll = 1;
+    addPlot();
 }
-
-// document.getElementById("plotArea").addEventListener('mousedown', function (e) {
-
-//     var rect = plotArea.c.getBoundingClientRect();
-//     var x = e.clientX - rect.left;
-//     plotArea.scrollAcc = 0;
-//     if (e.shiftKey) {
-//         plotArea.specificTimeX = x;
-//     }
-//     else {
-//         plotArea.scroll = 0;
-//         plotArea.mouseDown = true;
-
-//         plotArea.prevX = x;
-//         console.log("HIT");
-//     }
-// });
-// document.getElementById("plotArea").addEventListener('mouseup', function (e) {
-
-//     plotArea.mouseDown = false;
-// });
-
-// document.getElementById("plotArea").addEventListener('mousemove', function (e) {
-
-//     var rect = plotArea.c.getBoundingClientRect();
-//     var x = e.clientX - rect.left;
-//     if (!e.shiftKey && plotArea.mouseDown) {
-//         plotArea.ox -= x - plotArea.prevX;
-//         plotArea.scrollAcc = x - plotArea.prevX;
-//         plotArea.prevX = x;
-//         // plotArea.ox=Math.max(0,plotArea.ox)
-//     }
-//     else {
-//         plotArea.mouseDown = false;
-
-
-
-//     }
-// });
diff --git a/src/quinMcCluskey.js b/src/quinMcCluskey.js
new file mode 100644
index 0000000..c364463
--- /dev/null
+++ b/src/quinMcCluskey.js
@@ -0,0 +1,218 @@
+// Algorithm used for Combinational Analysis
+
+export default function BooleanMinimize(numVarsArg, minTermsArg, dontCaresArg = []) {
+    let __result;
+
+    Object.defineProperties(
+        this, {
+            minTerms: {
+                value: minTermsArg,
+                enumerable: false,
+                writable: false,
+                configurable: true,
+            },
+
+            dontCares: {
+                value: dontCaresArg,
+                enumerable: false,
+                writable: false,
+                configurable: true,
+            },
+
+            numVars: {
+                value: numVarsArg,
+                enumerable: false,
+                writable: false,
+                configurable: true,
+            },
+
+            result: {
+                enumerable: true,
+                configurable: true,
+                get() {
+                    if (__result === undefined) {
+                        __result = BooleanMinimize.prototype.solve.call(this);
+                    }
+
+                    return __result;
+                },
+                set() {
+                    throw new Error('result cannot be assigned a value');
+                },
+            },
+        },
+    );
+}
+
+BooleanMinimize.prototype.solve = function () {
+    function dec_to_binary_string(n) {
+        let str = n.toString(2);
+
+        while (str.length != this.numVars) {
+            str = `0${str}`;
+        }
+
+        return str;
+    }
+
+    function num_set_bits(s) {
+        let ans = 0;
+        for (let i = 0; i < s.length; ++i) { if (s[i] === '1') ans++; }
+        return ans;
+    }
+
+    function get_prime_implicants(allTerms) {
+        const table = [];
+        const primeImplicants = new Set();
+        let reduced;
+
+        while (1) {
+            for (let i = 0; i <= this.numVars; ++i) table[i] = new Set();
+            for (let i = 0; i < allTerms.length; ++i) table[num_set_bits(allTerms[i])].add(allTerms[i]);
+
+            allTerms = [];
+            reduced = new Set();
+
+            for (let i = 0; i < table.length - 1; ++i) {
+                for (const str1 of table[i]) {
+                    for (const str2 of table[i + 1]) {
+                        let diff = -1;
+
+                        for (let j = 0; j < this.numVars; ++j) {
+                            if (str1[j] != str2[j]) {
+                                if (diff === -1) {
+                                    diff = j;
+                                } else {
+                                    diff = -1;
+                                    break;
+                                }
+                            }
+                        }
+
+                        if (diff !== -1) {
+                            allTerms.push(`${str1.slice(0, diff)}-${str1.slice(diff + 1)}`);
+                            reduced.add(str1);
+                            reduced.add(str2);
+                        }
+                    }
+                }
+            }
+
+            for (const t of table) {
+                for (const str of t) {
+                    if (!(reduced.has(str))) primeImplicants.add(str);
+                }
+            }
+
+            if (!reduced.size) break;
+        }
+
+        return primeImplicants;
+    }
+
+    function get_essential_prime_implicants(primeImplicants, minTerms) {
+        const table = [];
+        let column;
+
+        function check_if_similar(minTerm, primeImplicant) {
+            for (let i = 0; i < primeImplicant.length; ++i) {
+                if (primeImplicant[i] !== '-' && (minTerm[i] !== primeImplicant[i])) return false;
+            }
+
+            return true;
+        }
+
+        function get_complexity(terms) {
+            let complexity = terms.length;
+
+            for (const t of terms) {
+                for (let i = 0; i < t.length; ++i) {
+                    if (t[i] !== '-') {
+                        complexity++;
+                        if (t[i] === '0') complexity++;
+                    }
+                }
+            }
+
+            return complexity;
+        }
+
+        function isSubset(sub, sup) {
+            for (const i of sub) {
+                if (!(sup.has(i))) return false;
+            }
+
+            return true;
+        }
+
+        for (const m of minTerms) {
+            column = [];
+
+            for (let i = 0; i < primeImplicants.length; ++i) {
+                if (check_if_similar(m, primeImplicants[i])) {
+                    column.push(i);
+                }
+            }
+
+            table.push(column);
+        }
+
+        let possibleSets = [];
+        let tempSets;
+
+        for (const i of table[0]) {
+            possibleSets.push(new Set([i]));
+        }
+
+        for (let i = 1; i < table.length; ++i) {
+            tempSets = [];
+            for (const s of possibleSets) {
+                for (const p of table[i]) {
+                    const x = new Set(s);
+                    x.add(p);
+                    let append = true;
+
+                    for (let j = tempSets.length - 1; j >= 0; --j) {
+                        if (isSubset(x, tempSets[j])) {
+                            tempSets.splice(j, 1);
+                        } else {
+                            append = false;
+                        }
+                    }
+
+                    if (append) {
+                        tempSets.push(x);
+                    }
+                }
+
+                possibleSets = tempSets;
+            }
+        }
+
+        let essentialImplicants; let
+            minComplexity = 1e9;
+
+        for (const s of possibleSets) {
+            const p = [];
+            for (const i of s) {
+                p.push(primeImplicants[i]);
+            }
+            const comp = get_complexity(p);
+            if (comp < minComplexity) {
+                essentialImplicants = p;
+                minComplexity = comp;
+            }
+        }
+
+        return essentialImplicants;
+    }
+
+    const minTerms = this.minTerms.map(dec_to_binary_string.bind(this));
+    const dontCares = this.dontCares.map(dec_to_binary_string.bind(this));
+
+    return get_essential_prime_implicants.call(
+        this,
+        Array.from(get_prime_implicants.call(this, minTerms.concat(dontCares))),
+        minTerms,
+    );
+};
diff --git a/src/restrictedElementDiv.js b/src/restrictedElementDiv.js
index 4995e56..6858e3c 100644
--- a/src/restrictedElementDiv.js
+++ b/src/restrictedElementDiv.js
@@ -1,21 +1,21 @@
 
-function updateRestrictedElementsList() {
+export function updateRestrictedElementsList() {
     if (restrictedElements.length === 0) return;
 
-    const restrictedCircuitElementsUsed = globalScope.restrictedCircuitElementsUsed;
-    let restrictedStr = "";
+    const { restrictedCircuitElementsUsed } = globalScope;
+    let restrictedStr = '';
 
     restrictedCircuitElementsUsed.forEach((element) => {
         restrictedStr += `${element}, `;
     });
 
-    if (restrictedStr === "") {
-        restrictedStr = "None";
+    if (restrictedStr === '') {
+        restrictedStr = 'None';
     } else {
         restrictedStr = restrictedStr.slice(0, -2);
     }
 
-    $("#restrictedElementsDiv--list").html(restrictedStr);
+    $('#restrictedElementsDiv--list').html(restrictedStr);
 }
 
 
@@ -23,7 +23,7 @@ export function updateRestrictedElementsInScope(scope = globalScope) {
     // Do nothing if no restricted elements
     if (restrictedElements.length === 0) return;
 
-    let restrictedElementsUsed = [];
+    const restrictedElementsUsed = [];
     restrictedElements.forEach((element) => {
         if (scope[element].length > 0) {
             restrictedElementsUsed.push(element);
@@ -34,3 +34,13 @@ export function updateRestrictedElementsInScope(scope = globalScope) {
     updateRestrictedElementsList();
 }
 
+export function showRestricted() {
+    $('#restrictedDiv').removeClass('display--none');
+    // Show no help text for restricted elements
+    $('#Help').removeClass('show');
+    $('#restrictedDiv').html('The element has been restricted by mentor. Usage might lead to deduction in marks');
+}
+
+export function hideRestricted() {
+    $('#restrictedDiv').addClass('display--none');
+}
diff --git a/src/sequential.js b/src/sequential.js
new file mode 100644
index 0000000..fa59d29
--- /dev/null
+++ b/src/sequential.js
@@ -0,0 +1,24 @@
+import { scheduleUpdate, play, updateCanvasSet } from './engine';
+import simulationArea from './simulationArea';
+
+/**
+ * a global function as a helper for simulationArea.changeClockEnable
+ * @category sequential
+ */
+export function changeClockEnable(val) {
+    simulationArea.clockEnabled = val;
+}
+
+/**
+ * WIP function defined and used
+ * @param {number} n
+ * @category sequential
+ */
+export function runTest(n = 10) {
+    const t = new Date().getTime();
+    for (let i = 0; i < n; i++) { clockTick(); }
+    // console.log((new Date().getTime()-t)/n);
+    updateCanvasSet(true);
+    play();
+    scheduleUpdate();
+}
diff --git a/src/sequential/Clock.js b/src/sequential/Clock.js
new file mode 100644
index 0000000..d75edf0
--- /dev/null
+++ b/src/sequential/Clock.js
@@ -0,0 +1,83 @@
+import CircuitElement from '../circuitElement';
+import Node, { findNode } from '../node';
+import simulationArea from '../simulationArea';
+import { correctWidth, lineTo, moveTo } from '../canvasApi';
+/**
+ * @class
+ * Clock
+ * Clock
+ * @extends CircuitElement
+ * @param {number} x - x coord of element
+ * @param {number} y - y coord of element
+ * @param {Scope=} scope - the ciruit in which we want the Element
+ * @param {string=} dir - direcion in which element has to drawn
+ * @category sequential
+ */
+export default class Clock extends CircuitElement {
+    constructor(x, y, scope = globalScope, dir = 'RIGHT') {
+        super(x, y, scope, dir, 1);
+        /*
+        this.scope['Clock'].push(this);
+        */
+        this.fixedBitWidth = true;
+        this.output1 = new Node(10, 0, 1, this, 1);
+        this.state = 0;
+        this.output1.value = this.state;
+        this.wasClicked = false;
+        this.interval = null;
+    }
+
+    customSave() {
+        const data = {
+            nodes: {
+                output1: findNode(this.output1),
+            },
+            constructorParamaters: [this.direction],
+        };
+        return data;
+    }
+
+    resolve() {
+        this.output1.value = this.state;
+        simulationArea.simulationQueue.add(this.output1);
+    }
+
+    toggleState() { // toggleState
+        this.state = (this.state + 1) % 2;
+        this.output1.value = this.state;
+    }
+
+    customDraw() {
+        const ctx = simulationArea.context;
+        ctx.strokeStyle = ('rgba(0,0,0,1)');
+        ctx.fillStyle = 'white';
+        ctx.lineWidth = correctWidth(3);
+        const xx = this.x;
+        const yy = this.y;
+
+        ctx.beginPath();
+        ctx.strokeStyle = ['DarkGreen', 'Lime'][this.state];
+        ctx.lineWidth = correctWidth(2);
+        if (this.state == 0) {
+            moveTo(ctx, -6, 0, xx, yy, 'RIGHT');
+            lineTo(ctx, -6, 5, xx, yy, 'RIGHT');
+            lineTo(ctx, 0, 5, xx, yy, 'RIGHT');
+            lineTo(ctx, 0, -5, xx, yy, 'RIGHT');
+            lineTo(ctx, 6, -5, xx, yy, 'RIGHT');
+            lineTo(ctx, 6, 0, xx, yy, 'RIGHT');
+        } else {
+            moveTo(ctx, -6, 0, xx, yy, 'RIGHT');
+            lineTo(ctx, -6, -5, xx, yy, 'RIGHT');
+            lineTo(ctx, 0, -5, xx, yy, 'RIGHT');
+            lineTo(ctx, 0, 5, xx, yy, 'RIGHT');
+            lineTo(ctx, 6, 5, xx, yy, 'RIGHT');
+            lineTo(ctx, 6, 0, xx, yy, 'RIGHT');
+        }
+        ctx.stroke();
+    }
+}
+
+Clock.prototype.tooltipText = 'Clock';
+
+Clock.prototype.click = Clock.prototype.toggleState;
+Clock.prototype.objectType = 'Clock';
diff --git a/src/sequential/DflipFlop.js b/src/sequential/DflipFlop.js
new file mode 100644
index 0000000..0123998
--- /dev/null
+++ b/src/sequential/DflipFlop.js
@@ -0,0 +1,142 @@
+import CircuitElement from '../circuitElement';
+import Node, { findNode } from '../node';
+import simulationArea from '../simulationArea';
+import {
+    correctWidth, lineTo, moveTo, fillText,
+} from '../canvasApi';
+/**
+ * @class
+ * DflipFlop
+ * D flip flop has 5 input nodes:
+ * clock, data input, preset, reset ,enable.
+ * @extends CircuitElement
+ * @param {number} x - x coord of element
+ * @param {number} y - y coord of element
+ * @param {Scope=} scope - the ciruit in which we want the Element
+ * @param {string=} dir - direcion in which element has to drawn
+ * @category sequential
+ */
+export default class DflipFlop extends CircuitElement {
+    constructor(x, y, scope = globalScope, dir = 'RIGHT', bitWidth = 1) {
+        super(x, y, scope, dir, bitWidth);
+        /*
+        this.scope['DflipFlop'].push(this);
+        */
+        this.directionFixed = true;
+        this.setDimensions(20, 20);
+        this.rectangleObject = true;
+        this.clockInp = new Node(-20, +10, 0, this, 1, 'Clock');
+        this.dInp = new Node(-20, -10, 0, this, this.bitWidth, 'D');
+        this.qOutput = new Node(20, -10, 1, this, this.bitWidth, 'Q');
+        this.qInvOutput = new Node(20, 10, 1, this, this.bitWidth, 'Q Inverse');
+        this.reset = new Node(10, 20, 0, this, 1, 'Asynchronous Reset');
+        this.preset = new Node(0, 20, 0, this, this.bitWidth, 'Preset');
+        this.en = new Node(-10, 20, 0, this, 1, 'Enable');
+        this.masterState = 0;
+        this.slaveState = 0;
+        this.prevClockState = 0;
+
+        this.wasClicked = false;
+    }
+
+    /**
+     * WIP always resolvable?
+     */
+    isResolvable() {
+        return true;
+        // if (this.reset.value == 1) return true;
+        // if (this.clockInp.value != undefined && this.dInp.value != undefined) return true;
+        // return false;
+    }
+
+    newBitWidth(bitWidth) {
+        this.bitWidth = bitWidth;
+        this.dInp.bitWidth = bitWidth;
+        this.qOutput.bitWidth = bitWidth;
+        this.qInvOutput.bitWidth = bitWidth;
+        this.preset.bitWidth = bitWidth;
+    }
+
+    /**
+     * @memberof DflipFlop
+     * On the leading edge of the clock signal (LOW-to-HIGH) the first stage,
+     * the “master” latches the input condition at D, while the output stage is deactivated.
+     * On the trailing edge of the clock signal (HIGH-to-LOW) the second “slave” stage is
+     * now activated, latching on to the output from the first master circuit.
+     * Then the output stage appears to be triggered on the negative edge of the clock pulse.
+     * This fuction sets the value for the node qOutput based on the previous state
+     * and input of the clock. We flip the bits to find qInvOutput
+     */
+    resolve() {
+        if (this.reset.value == 1) {
+            this.masterState = this.slaveState = (this.preset.value || 0);
+        } else if (this.en.value == 0) {
+            this.prevClockState = this.clockInp.value;
+        } else if (this.en.value == 1 || this.en.connections.length == 0) { // if(this.en.value==1) // Creating Infinite Loop, WHY ??
+            if (this.clockInp.value == this.prevClockState) {
+                if (this.clockInp.value == 0 && this.dInp.value != undefined) {
+                    this.masterState = this.dInp.value;
+                }
+            } else if (this.clockInp.value != undefined) {
+                if (this.clockInp.value == 1) {
+                    this.slaveState = this.masterState;
+                } else if (this.clockInp.value == 0 && this.dInp.value != undefined) {
+                    this.masterState = this.dInp.value;
+                }
+                this.prevClockState = this.clockInp.value;
+            }
+        }
+
+        if (this.qOutput.value != this.slaveState) {
+            this.qOutput.value = this.slaveState;
+            this.qInvOutput.value = this.flipBits(this.slaveState);
+            simulationArea.simulationQueue.add(this.qOutput);
+            simulationArea.simulationQueue.add(this.qInvOutput);
+        }
+    }
+
+    customSave() {
+        const data = {
+            nodes: {
+                clockInp: findNode(this.clockInp),
+                dInp: findNode(this.dInp),
+                qOutput: findNode(this.qOutput),
+                qInvOutput: findNode(this.qInvOutput),
+                reset: findNode(this.reset),
+                preset: findNode(this.preset),
+                en: findNode(this.en),
+            },
+            constructorParamaters: [this.direction, this.bitWidth],
+
+        };
+        return data;
+    }
+
+    customDraw() {
+        const ctx = simulationArea.context;
+        ctx.beginPath();
+        ctx.strokeStyle = ('rgba(0,0,0,1)');
+        ctx.fillStyle = 'white';
+        ctx.lineWidth = correctWidth(3);
+        const xx = this.x;
+        const yy = this.y;
+        // rect(ctx, xx - 20, yy - 20, 40, 40);
+        moveTo(ctx, -20, 5, xx, yy, this.direction);
+        lineTo(ctx, -15, 10, xx, yy, this.direction);
+        lineTo(ctx, -20, 15, xx, yy, this.direction);
+        // if ((this.b.hover&&!simulationArea.shiftDown)|| simulationArea.lastSelected == this || simulationArea.multipleObjectSelections.contains(this)) ctx.fillStyle = "rgba(255, 255, 32,0.8)";ctx.fill();
+        ctx.stroke();
+
+        ctx.beginPath();
+        ctx.font = '20px Georgia';
+        ctx.fillStyle = 'green';
+        ctx.textAlign = 'center';
+        fillText(ctx, this.slaveState.toString(16), xx, yy + 5);
+        ctx.fill();
+    }
+}
+
+DflipFlop.prototype.tooltipText = 'D FlipFlop ToolTip : Introduces delay in timing circuit.';
+DflipFlop.prototype.helplink = 'https://docs.circuitverse.org/#/Sequential?id=d-flip-flop';
+
+DflipFlop.prototype.objectType = 'DflipFlop';
diff --git a/src/sequential/Dlatch.js b/src/sequential/Dlatch.js
new file mode 100644
index 0000000..f23ed3d
--- /dev/null
+++ b/src/sequential/Dlatch.js
@@ -0,0 +1,119 @@
+import CircuitElement from '../circuitElement';
+import Node, { findNode } from '../node';
+import simulationArea from '../simulationArea';
+import {
+    correctWidth, lineTo, moveTo, fillText,
+} from '../canvasApi';
+/**
+ * @class
+ * Dlatch
+ * D latch has 2 input nodes:
+ * clock, data input.
+ * Difference between this and D - FlipFlop is
+ * that Flip flop must have a clock.
+ * @extends CircuitElement
+ * @param {number} x - x coord of element
+ * @param {number} y - y coord of element
+ * @param {Scope=} scope - the ciruit in which we want the Element
+ * @param {string=} dir - direcion in which element has to drawn
+ * @category sequential
+ */
+export default class Dlatch extends CircuitElement {
+    constructor(x, y, scope = globalScope, dir = 'RIGHT', bitWidth = 1) {
+        super(x, y, scope, dir, bitWidth);
+        /*
+        this.scope['Dlatch'].push(this);
+        */
+        this.directionFixed = true;
+        this.setDimensions(20, 20);
+        this.rectangleObject = true;
+        this.clockInp = new Node(-20, +10, 0, this, 1, 'Clock');
+        this.dInp = new Node(-20, -10, 0, this, this.bitWidth, 'D');
+        this.qOutput = new Node(20, -10, 1, this, this.bitWidth, 'Q');
+        this.qInvOutput = new Node(20, 10, 1, this, this.bitWidth, 'Q Inverse');
+        // this.reset = new Node(10, 20, 0, this, 1, "Asynchronous Reset");
+        // this.preset = new Node(0, 20, 0, this, this.bitWidth, "Preset");
+        // this.en = new Node(-10, 20, 0, this, 1, "Enable");
+        this.state = 0;
+        this.prevClockState = 0;
+        this.wasClicked = false;
+    }
+
+    /**
+     * Idea: shoould be D FF?
+     */
+    isResolvable() {
+        if (this.clockInp.value != undefined && this.dInp.value != undefined) return true;
+        return false;
+    }
+
+    newBitWidth(bitWidth) {
+        this.bitWidth = bitWidth;
+        this.dInp.bitWidth = bitWidth;
+        this.qOutput.bitWidth = bitWidth;
+        this.qInvOutput.bitWidth = bitWidth;
+        // this.preset.bitWidth = bitWidth;
+    }
+
+    /**
+     * @memberof Dlatch
+     * when the clock input is high we update the state
+     * qOutput is set to the state
+     */
+    resolve() {
+        if (this.clockInp.value == 1 && this.dInp.value != undefined) {
+            this.state = this.dInp.value;
+        }
+
+        if (this.qOutput.value != this.state) {
+            this.qOutput.value = this.state;
+            this.qInvOutput.value = this.flipBits(this.state);
+            simulationArea.simulationQueue.add(this.qOutput);
+            simulationArea.simulationQueue.add(this.qInvOutput);
+        }
+    }
+
+    customSave() {
+        const data = {
+            nodes: {
+                clockInp: findNode(this.clockInp),
+                dInp: findNode(this.dInp),
+                qOutput: findNode(this.qOutput),
+                qInvOutput: findNode(this.qInvOutput),
+                // reset: findNode(this.reset),
+                // preset: findNode(this.preset),
+                // en: findNode(this.en),
+            },
+            constructorParamaters: [this.direction, this.bitWidth],
+
+        };
+        return data;
+    }
+
+    customDraw() {
+        const ctx = simulationArea.context;
+        ctx.beginPath();
+        ctx.strokeStyle = ('rgba(0,0,0,1)');
+        ctx.fillStyle = 'white';
+        ctx.lineWidth = correctWidth(3);
+        const xx = this.x;
+        const yy = this.y;
+        // rect(ctx, xx - 20, yy - 20, 40, 40);
+        moveTo(ctx, -20, 5, xx, yy, this.direction);
+        lineTo(ctx, -15, 10, xx, yy, this.direction);
+        lineTo(ctx, -20, 15, xx, yy, this.direction);
+        // if ((this.b.hover&&!simulationArea.shiftDown)|| simulationArea.lastSelected == this || simulationArea.multipleObjectSelections.contains(this)) ctx.fillStyle = "rgba(255, 255, 32,0.8)";ctx.fill();
+        ctx.stroke();
+        ctx.beginPath();
+        ctx.font = '20px Georgia';
+        ctx.fillStyle = 'green';
+        ctx.textAlign = 'center';
+        fillText(ctx, this.state.toString(16), xx, yy + 5);
+        ctx.fill();
+    }
+}
+
+Dlatch.prototype.tooltipText = 'D Latch : Single input Flip flop or D FlipFlop';
+Dlatch.prototype.helplink = 'https://docs.circuitverse.org/#/Sequential?id=d-latch';
+
+Dlatch.prototype.objectType = 'Dlatch';
diff --git a/src/sequential/EEPROM.js b/src/sequential/EEPROM.js
new file mode 100644
index 0000000..a6519af
--- /dev/null
+++ b/src/sequential/EEPROM.js
@@ -0,0 +1,68 @@
+import RAM from './RAM';
+/**
+ * @class
+ * EEPROM Component.
+ * @extends CircuitElement
+ * @param {number} x - x coord of element
+ * @param {number} y - y coord of element
+ * @param {Scope=} scope - the ciruit in which we want the Element
+ * @param {string=} dir - direcion in which element has to drawn
+
+ *
+ * This is basically a RAM component that persists its contents.
+ *
+ * We consider EEPROMs more 'expensive' than RAMs, so we arbitrarily limit
+ * the addressWith to a maximum of 10 bits (1024 addresses) with a default of 8-bit (256).
+ *
+ * In the EEPROM all addresses are initialized to zero.
+ * This way we serialize unused values as "0" instead of "null".
+ *
+ * These two techniques help keep reduce the size of saved projects.
+ * @category sequential
+ */
+export default class EEPROM extends RAM {
+    constructor(
+        x,
+        y,
+        scope = globalScope,
+        dir = 'RIGHT',
+        bitWidth = 8,
+        addressWidth = 8,
+        data = null,
+    ) {
+        super(x, y, scope, dir, bitWidth, addressWidth);
+        /*
+        this.scope['EEPROM'].push(this);
+        */
+        this.data = data || this.data;
+    }
+
+    customSave() {
+        const saveInfo = RAM.prototype.customSave.call(this);
+
+        // Normalize this.data to use zeroes instead of null when serialized.
+        const { data } = this;
+        for (let i = 0; i < data.length; i++) {
+            data[i] = data[i] || 0;
+        }
+
+        saveInfo.constructorParamaters.push(data);
+        return saveInfo;
+    }
+}
+
+EEPROM.prototype.tooltipText = 'Electrically Erasable Programmable Read-Only Memory';
+EEPROM.prototype.shortName = 'EEPROM';
+EEPROM.prototype.maxAddressWidth = 10;
+EEPROM.prototype.mutableProperties = {
+    addressWidth: {
+        name: 'Address Width',
+        type: 'number',
+        max: '10',
+        min: '1',
+        func: 'changeAddressWidth',
+    },
+    dump: RAM.prototype.mutableProperties.dump,
+    reset: RAM.prototype.mutableProperties.reset,
+};
+EEPROM.prototype.objectType = 'EEPROM';
diff --git a/src/sequential/JKflipFlop.js b/src/sequential/JKflipFlop.js
new file mode 100644
index 0000000..8711ac4
--- /dev/null
+++ b/src/sequential/JKflipFlop.js
@@ -0,0 +1,146 @@
+import CircuitElement from '../circuitElement';
+import Node, { findNode } from '../node';
+import simulationArea from '../simulationArea';
+import {
+    correctWidth, lineTo, moveTo, fillText,
+} from '../canvasApi';
+/**
+ * @class
+ * JKflipFlop
+ * JK flip flop has 6 input nodes:
+ * clock, J input, K input, preset, reset ,enable.
+ * @extends CircuitElement
+ * @param {number} x - x coord of element
+ * @param {number} y - y coord of element
+ * @param {Scope=} scope - the ciruit in which we want the Element
+ * @param {string=} dir - direcion in which element has to drawn
+ * @category sequential
+ */
+export default class JKflipFlop extends CircuitElement {
+    constructor(x, y, scope = globalScope, dir = 'RIGHT') {
+        super(x, y, scope, dir, 1);
+        /*
+        this.scope['JKflipFlop'].push(this);
+        */
+        this.directionFixed = true;
+        this.fixedBitWidth = true;
+        this.setDimensions(20, 20);
+        this.rectangleObject = true;
+        this.J = new Node(-20, -10, 0, this, 1, 'J');
+        this.K = new Node(-20, 0, 0, this, 1, 'K');
+        this.clockInp = new Node(-20, 10, 0, this, 1, 'Clock');
+        this.qOutput = new Node(20, -10, 1, this, 1, 'Q');
+        this.qInvOutput = new Node(20, 10, 1, this, 1, 'Q Inverse');
+        this.reset = new Node(10, 20, 0, this, 1, 'Asynchronous Reset');
+        this.preset = new Node(0, 20, 0, this, 1, 'Preset');
+        this.en = new Node(-10, 20, 0, this, 1, 'Enable');
+        this.state = 0;
+        this.slaveState = 0;
+        this.masterState = 0;
+        this.prevClockState = 0;
+
+        // this.wasClicked = false;
+    }
+
+    /**
+     * @memberof JKflipFlop
+     * if none of the predefined nodes have been deleted it isresolvable
+     */
+    isResolvable() {
+        if (this.reset.value == 1) return true;
+        if (this.clockInp.value != undefined && this.J.value != undefined && this.K.value != undefined) return true;
+        return false;
+    }
+
+    newBitWidth(bitWidth) {
+        this.bitWidth = bitWidth;
+        this.dInp.bitWidth = bitWidth;
+        this.qOutput.bitWidth = bitWidth;
+        this.qInvOutput.bitWidth = bitWidth;
+        this.preset.bitWidth = bitWidth;
+    }
+
+    /**
+     * @memberof JKflipFlop
+     * Edge triggered master slave JK flip flop is resolved by
+     * setting the slaveState = masterState when there is an edge
+     * in the clock. masterState = this.J when no change in clock.
+     */
+    resolve() {
+        if (this.reset.value == 1) {
+            this.masterState = this.slaveState = this.preset.value || 0;
+        } else if (this.en.value == 0) {
+            this.prevClockState = this.clockInp.value;
+        } else if (this.en.value == 1 || this.en.connections.length == 0) {
+            if (this.clockInp.value == this.prevClockState) {
+                if (this.clockInp.value == 0 && this.J.value != undefined && this.K.value != undefined) {
+                    if (this.J.value && this.K.value) { this.masterState = 1 ^ this.slaveState; } else if (this.J.value ^ this.K.value) { this.masterState = this.J.value; }
+                }
+            } else if (this.clockInp.value != undefined) {
+                if (this.clockInp.value == 1) {
+                    this.slaveState = this.masterState;
+                } else if (this.clockInp.value == 0 && this.J.value != undefined && this.K.value != undefined) {
+                    if (this.J.value && this.K.value) { this.masterState = 1 ^ this.slaveState; } else if (this.J.value ^ this.K.value) { this.masterState = this.J.value; }
+                }
+                this.prevClockState = this.clockInp.value;
+            }
+        }
+
+        if (this.qOutput.value != this.slaveState) {
+            this.qOutput.value = this.slaveState;
+            this.qInvOutput.value = this.flipBits(this.slaveState);
+            simulationArea.simulationQueue.add(this.qOutput);
+            simulationArea.simulationQueue.add(this.qInvOutput);
+        }
+    }
+
+    customSave() {
+        const data = {
+            nodes: {
+                J: findNode(this.J),
+                K: findNode(this.K),
+                clockInp: findNode(this.clockInp),
+                qOutput: findNode(this.qOutput),
+                qInvOutput: findNode(this.qInvOutput),
+                reset: findNode(this.reset),
+                preset: findNode(this.preset),
+                en: findNode(this.en),
+            },
+            constructorParamaters: [this.direction],
+
+        };
+        return data;
+    }
+
+    customDraw() {
+        const ctx = simulationArea.context;
+        ctx.beginPath();
+        ctx.strokeStyle = ('rgba(0,0,0,1)');
+        ctx.fillStyle = 'white';
+        ctx.lineWidth = correctWidth(3);
+        const xx = this.x;
+        const yy = this.y;
+
+        // rect(ctx, xx - 20, yy - 20, 40, 40);
+        moveTo(ctx, -20, 5, xx, yy, this.direction);
+        lineTo(ctx, -15, 10, xx, yy, this.direction);
+        lineTo(ctx, -20, 15, xx, yy, this.direction);
+
+
+        // if ((this.b.hover&&!simulationArea.shiftDown)|| simulationArea.lastSelected == this || simulationArea.multipleObjectSelections.contains(this)) ctx.fillStyle = "rgba(255, 255, 32,0.8)";ctx.fill();
+        ctx.stroke();
+
+        ctx.beginPath();
+        ctx.font = '20px Georgia';
+        ctx.fillStyle = 'green';
+        ctx.textAlign = 'center';
+        fillText(ctx, this.slaveState.toString(16), xx, yy + 5);
+        ctx.fill();
+    }
+}
+
+JKflipFlop.prototype.tooltipText = 'JK FlipFlop ToolTip : gated SR flip-flop with the addition of a clock input.';
+
+JKflipFlop.prototype.helplink = 'https://docs.circuitverse.org/#/Sequential?id=jk-flip-flop';
+
+JKflipFlop.prototype.objectType = 'JKflipFlop';
diff --git a/src/sequential/Keyboard.js b/src/sequential/Keyboard.js
new file mode 100644
index 0000000..fdb169c
--- /dev/null
+++ b/src/sequential/Keyboard.js
@@ -0,0 +1,182 @@
+import CircuitElement from '../circuitElement';
+import Node, { findNode } from '../node';
+import simulationArea from '../simulationArea';
+import {
+    correctWidth, lineTo, moveTo, fillText3, fontSize,
+} from '../canvasApi';
+/**
+ * @class
+ * Keyboard
+ * KeyBoard - We can give 3 inputs: clock, enable and available.
+ * An output of 7 bits is given out when clockInp = 1.
+ * @extends CircuitElement
+ * @param {number} x - x coord of element
+ * @param {number} y - y coord of element
+ * @param {Scope=} scope - the ciruit in which we want the Element
+ * @param {string=} dir - direcion in which element has to drawn
+ * @category sequential
+ */
+export default class Keyboard extends CircuitElement {
+    constructor(x, y, scope = globalScope, bufferSize = 32) {
+        super(x, y, scope, 'RIGHT', 1);
+        /*
+        this.scope['Keyboard'].push(this);
+        */
+        this.directionFixed = true;
+        this.fixedBitWidth = true;
+
+        this.bufferSize = bufferSize || parseInt(prompt('Enter buffer size:'));
+        this.elementWidth = Math.max(80, Math.ceil(this.bufferSize / 2) * 20);
+        this.elementHeight = 40; // Math.max(40,Math.ceil(this.rows*15/20)*20);
+        this.setWidth(this.elementWidth / 2);
+        this.setHeight(this.elementHeight / 2);
+
+        this.clockInp = new Node(-this.elementWidth / 2, this.elementHeight / 2 - 10, 0, this, 1, 'Clock');
+        this.asciiOutput = new Node(30, this.elementHeight / 2, 1, this, 7, 'Ascii Output');
+        this.available = new Node(10, this.elementHeight / 2, 1, this, 1, 'Available');
+        this.reset = new Node(-10, this.elementHeight / 2, 0, this, 1, 'Reset');
+        this.en = new Node(-30, this.elementHeight / 2, 0, this, 1, 'Enable');
+        this.prevClockState = 0;
+        this.buffer = '';
+        this.bufferOutValue = undefined;
+    }
+
+    /**
+     * @memberof Keyboard
+     * this funcion sets the size of maximum input that can
+     * be given to the keyboard at once before it starts sending data.
+     */
+    changeBufferSize(size) {
+        if (size == undefined || size < 20 || size > 100) return;
+        if (this.bufferSize == size) return;
+        const obj = new Keyboard(this.x, this.y, this.scope, size);
+        this.delete();
+        simulationArea.lastSelected = obj;
+        return obj;
+    }
+
+    /**
+     * @memberof Keyboard
+     * Adds the keyy pressed to the buffer
+     */
+    keyDown(key) {
+        if (key.length != 1) return;
+        this.buffer += key;
+        if (this.buffer.length > this.bufferSize) { this.buffer = this.buffer.slice(1); }
+        // console.log(key)
+    }
+
+    /**
+     * @memberof Keyboard
+     * not resolvable if enable = 0 or clock is undefined
+     */
+    isResolvable() {
+        if (this.reset.value == 1) return true;
+        if (this.en.value == 0 || (this.en.connections.length && this.en.value == undefined)) return false;
+        if (this.clockInp.value == undefined) return false;
+        return true;
+    }
+
+    /**
+     * @memberof Keyboard
+     * Whenever clock is enabled (1) then one charecter
+     * from the buffer is converted to ascii and transmitted
+     * through the output nodes.
+     */
+    resolve() {
+        if (this.reset.value == 1) {
+            this.buffer = '';
+            return;
+        }
+        if (this.en.value == 0) {
+            return;
+        }
+
+        if (this.available.value != 0) {
+            this.available.value = 0; // this.bufferOutValue;
+            simulationArea.simulationQueue.add(this.available);
+        }
+
+        if (this.clockInp.value == this.prevClockState) {
+            if (this.clockInp.value == 0) {
+                if (this.buffer.length) {
+                    this.bufferOutValue = this.buffer[0].charCodeAt(0);
+                } else {
+                    this.bufferOutValue = undefined;
+                }
+            }
+        } else if (this.clockInp.value != undefined) {
+            if (this.clockInp.value == 1 && this.buffer.length) {
+                if (this.bufferOutValue == this.buffer[0].charCodeAt(0)) { // WHY IS THIS REQUIRED ??
+                    this.buffer = this.buffer.slice(1);
+                }
+            } else if (this.buffer.length) {
+                this.bufferOutValue = this.buffer[0].charCodeAt(0);
+            } else {
+                this.bufferOutValue = undefined;
+            }
+            this.prevClockState = this.clockInp.value;
+        }
+
+        if (this.asciiOutput.value != this.bufferOutValue) {
+            this.asciiOutput.value = this.bufferOutValue;
+            simulationArea.simulationQueue.add(this.asciiOutput);
+        }
+
+        if (this.bufferOutValue !== undefined && this.available.value != 1) {
+            this.available.value = 1; // this.bufferOutValue;
+            simulationArea.simulationQueue.add(this.available);
+        }
+    }
+
+    customSave() {
+        const data = {
+            nodes: {
+                clockInp: findNode(this.clockInp),
+                asciiOutput: findNode(this.asciiOutput),
+                available: findNode(this.available),
+                reset: findNode(this.reset),
+                en: findNode(this.en),
+            },
+            constructorParamaters: [this.bufferSize],
+        };
+        return data;
+    }
+
+    customDraw() {
+        const ctx = simulationArea.context;
+        ctx.beginPath();
+        ctx.strokeStyle = ('rgba(0,0,0,1)');
+        ctx.fillStyle = 'white';
+        ctx.lineWidth = correctWidth(3);
+        const xx = this.x;
+        const yy = this.y;
+        moveTo(ctx, -this.elementWidth / 2, this.elementHeight / 2 - 15, xx, yy, this.direction);
+        lineTo(ctx, 5 - this.elementWidth / 2, this.elementHeight / 2 - 10, xx, yy, this.direction);
+        lineTo(ctx, -this.elementWidth / 2, this.elementHeight / 2 - 5, xx, yy, this.direction);
+
+        ctx.stroke();
+
+        ctx.beginPath();
+        ctx.fillStyle = 'green';
+        ctx.textAlign = 'center';
+        const lineData = this.buffer + ' '.repeat(this.bufferSize - this.buffer.length);
+        fillText3(ctx, lineData, 0, +5, xx, yy, 15, 'Courier New', 'center');
+        ctx.fill();
+    }
+}
+
+Keyboard.prototype.tooltipText = 'Keyboard';
+Keyboard.prototype.helplink = 'https://docs.circuitverse.org/#/Sequential?id=keyboard';
+
+Keyboard.prototype.mutableProperties = {
+    bufferSize: {
+        name: 'Buffer Size',
+        type: 'number',
+        max: '100',
+        min: '20',
+        func: 'changeBufferSize',
+    },
+};
+
+Keyboard.prototype.objectType = 'Keyboard';
diff --git a/src/sequential/RAM.js b/src/sequential/RAM.js
new file mode 100644
index 0000000..47bb214
--- /dev/null
+++ b/src/sequential/RAM.js
@@ -0,0 +1,204 @@
+import CircuitElement from '../circuitElement';
+import Node, { findNode } from '../node';
+import simulationArea from '../simulationArea';
+import {
+    correctWidth, fillText2, fillText4, drawCircle2,
+} from '../canvasApi';
+/**
+ * @class
+ * RAM Component.
+ * @extends CircuitElement
+ * @param {number} x - x coord of element
+ * @param {number} y - y coord of element
+ * @param {Scope=} scope - the ciruit in which we want the Element
+ * @param {string=} dir - direcion in which element has to drawn
+ *
+ * Two settings are available:
+ * - addressWidth: 1 to 20, default=10. Controls the width of the address input.
+ * - bitWidth: 1 to 32, default=8. Controls the width of data pins.
+ *
+ * Amount of memory in the element is 2^addressWidth x bitWidth bits.
+ * Minimum RAM size is: 2^1  x  1 = 2 bits.
+ * Maximum RAM size is: 2^20 x 32 = 1M x 32 bits => 32 Mbits => 4MB.
+ * Maximum 8-bits size: 2^20 x  8 = 1M x 8 bits => 1MB.
+ * Default RAM size is: 2^10 x  8 = 1024 bytes => 1KB.
+ *
+ * RAMs are volatile therefore this component does not persist the memory contents.
+ *
+ * Changes to addressWidth and bitWidth also cause data to be lost.
+ * Think of these operations as being equivalent to taking a piece of RAM out of a
+ * circuit board and replacing it with another RAM of different size.
+ *
+ * The contents of the RAM can be reset to zero by setting the RESET pin 1 or
+ * or by selecting the component and pressing the "Reset" button in the properties window.
+ *
+ * The contents of the RAM can be dumped to the console by transitioning CORE DUMP pin to 1
+ * or by selecting the component and pressing the "Core Dump" button in the properties window.
+ * Address spaces that have not been written will show up as `undefined` in the core dump.
+ *
+ * NOTE: The maximum address width of 20 is arbitrary.
+ * Larger values are possible, but in practice circuits won't need this much
+ * memory and keeping the value small helps avoid allocating too much memory on the browser.
+ * Internally we use a sparse array, so only the addresses that are written are actually
+ * allocated. Nevertheless, it is better to prevent large allocations from happening
+ * by keeping the max addressWidth small. If needed, we can increase the max.
+ * @category sequential
+ */
+export default class RAM extends CircuitElement {
+    constructor(x, y, scope = globalScope, dir = 'RIGHT', bitWidth = 8, addressWidth = 10) {
+        super(x, y, scope, dir, Math.min(Math.max(1, bitWidth), 32));
+        /*
+        this.scope['RAM'].push(this);
+        */
+        this.setDimensions(60, 40);
+
+        this.directionFixed = true;
+        this.labelDirection = 'UP';
+
+        this.addressWidth = Math.min(Math.max(1, addressWidth), this.maxAddressWidth);
+        this.address = new Node(-this.leftDimensionX, -20, 0, this, this.addressWidth, 'ADDRESS');
+        this.dataIn = new Node(-this.leftDimensionX, 0, 0, this, this.bitWidth, 'DATA IN');
+        this.write = new Node(-this.leftDimensionX, 20, 0, this, 1, 'WRITE');
+        this.reset = new Node(0, this.downDimensionY, 0, this, 1, 'RESET');
+        this.coreDump = new Node(-20, this.downDimensionY, 0, this, 1, 'CORE DUMP');
+        this.dataOut = new Node(this.rightDimensionX, 0, 1, this, this.bitWidth, 'DATA OUT');
+        this.prevCoreDumpValue = undefined;
+
+        this.clearData();
+    }
+
+    customSave() {
+        return {
+            // NOTE: data is not persisted since RAMs are volatile.
+            constructorParamaters: [this.direction, this.bitWidth, this.addressWidth],
+            nodes: {
+                address: findNode(this.address),
+                dataIn: findNode(this.dataIn),
+                write: findNode(this.write),
+                reset: findNode(this.reset),
+                coreDump: findNode(this.coreDump),
+                dataOut: findNode(this.dataOut),
+            },
+        };
+    }
+
+    newBitWidth(value) {
+        value = parseInt(value);
+        if (!isNaN(value) && this.bitWidth != value && value >= 1 && value <= 32) {
+            this.bitWidth = value;
+            this.dataIn.bitWidth = value;
+            this.dataOut.bitWidth = value;
+            this.clearData();
+        }
+    }
+
+    changeAddressWidth(value) {
+        value = parseInt(value);
+        if (!isNaN(value) && this.addressWidth != value && value >= 1 && value <= this.maxAddressWidth) {
+            this.addressWidth = value;
+            this.address.bitWidth = value;
+            this.clearData();
+        }
+    }
+
+    clearData() {
+        this.data = new Array(Math.pow(2, this.addressWidth));
+        this.tooltipText = `${this.memSizeString()} ${this.shortName}`;
+    }
+
+    isResolvable() {
+        return this.address.value !== undefined || this.reset.value !== undefined || this.coreDump.value !== undefined;
+    }
+
+    resolve() {
+        if (this.write.value == 1) {
+            this.data[this.address.value] = this.dataIn.value;
+        }
+
+        if (this.reset.value == 1) {
+            this.clearData();
+        }
+
+        if (this.coreDump.value && this.prevCoreDumpValue != this.coreDump.value) {
+            this.dump();
+        }
+        this.prevCoreDumpValue = this.coreDump.value;
+
+        this.dataOut.value = this.data[this.address.value] || 0;
+        simulationArea.simulationQueue.add(this.dataOut);
+    }
+
+    customDraw() {
+        const ctx = simulationArea.context;
+        const xx = this.x;
+        const yy = this.y;
+
+        ctx.beginPath();
+        ctx.strokeStyle = 'gray';
+        ctx.fillStyle = this.write.value ? 'red' : 'lightgreen';
+        ctx.lineWidth = correctWidth(1);
+        drawCircle2(ctx, 50, -30, 3, xx, yy, this.direction);
+        ctx.fill();
+        ctx.stroke();
+
+        ctx.beginPath();
+        ctx.textAlign = 'center';
+        ctx.fillStyle = 'black';
+        fillText4(ctx, this.memSizeString(), 0, -10, xx, yy, this.direction, 12);
+        fillText4(ctx, this.shortName, 0, 10, xx, yy, this.direction, 12);
+        fillText2(ctx, 'A', this.address.x + 12, this.address.y, xx, yy, this.direction);
+        fillText2(ctx, 'DI', this.dataIn.x + 12, this.dataIn.y, xx, yy, this.direction);
+        fillText2(ctx, 'W', this.write.x + 12, this.write.y, xx, yy, this.direction);
+        fillText2(ctx, 'DO', this.dataOut.x - 15, this.dataOut.y, xx, yy, this.direction);
+        ctx.fill();
+    }
+
+    memSizeString() {
+        const mag = ['', 'K', 'M'];
+        const unit = this.bitWidth == 8 ? 'B' : this.bitWidth == 1 ? 'b' : ` x ${this.bitWidth}b`;
+        let v = Math.pow(2, this.addressWidth);
+        let m = 0;
+        while (v >= 1024 && m < mag.length - 1) {
+            v /= 1024;
+            m++;
+        }
+        return v + mag[m] + unit;
+    }
+
+    dump() {
+        const logLabel = console.group && this.label;
+        if (logLabel) {
+            console.group(this.label);
+        }
+
+        console.log(this.data);
+
+        if (logLabel) {
+            console.groupEnd();
+        }
+    }
+}
+
+RAM.prototype.tooltipText = 'Random Access Memory';
+RAM.prototype.shortName = 'RAM';
+RAM.prototype.maxAddressWidth = 20;
+RAM.prototype.mutableProperties = {
+    addressWidth: {
+        name: 'Address Width',
+        type: 'number',
+        max: '20',
+        min: '1',
+        func: 'changeAddressWidth',
+    },
+    dump: {
+        name: 'Core Dump',
+        type: 'button',
+        func: 'dump',
+    },
+    reset: {
+        name: 'Reset',
+        type: 'button',
+        func: 'clearData',
+    },
+};
+RAM.prototype.objectType = 'RAM';
diff --git a/src/sequential/Rom.js b/src/sequential/Rom.js
new file mode 100755
index 0000000..037bc90
--- /dev/null
+++ b/src/sequential/Rom.js
@@ -0,0 +1,201 @@
+import CircuitElement from '../circuitElement';
+import Node, { findNode } from '../node';
+import simulationArea from '../simulationArea';
+import {
+    correctWidth, rect2, fillText3,
+} from '../canvasApi';
+/**
+ * @class
+ * Rom
+ * @extends CircuitElement
+ * @param {number} x - x coordinate of element.
+ * @param {number} y - y coordinate of element.
+ * @param {Scope=} scope - Cirucit on which element is drawn
+ * @param {Array=} data - bit width per node.
+ * @category sequential
+ */
+export default class Rom extends CircuitElement {
+    constructor(
+        x,
+        y,
+        scope = globalScope,
+        data = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+    ) {
+        super(x, y, scope, 'RIGHT', 1);
+        /*
+        this.scope['Rom'].push(this);
+        */
+        this.fixedBitWidth = true;
+        this.directionFixed = true;
+        this.rectangleObject = false;
+        this.setDimensions(80, 50);
+        this.memAddr = new Node(-80, 0, 0, this, 4, 'Address');
+        this.en = new Node(0, 50, 0, this, 1, 'Enable');
+        this.dataOut = new Node(80, 0, 1, this, 8, 'DataOut');
+        this.data = data || prompt('Enter data').split(' ').map((lambda) => parseInt(lambda, 16));
+        // console.log(this.data);
+    }
+
+    /**
+     * @memberof Rom
+     * Checks if the element is resolvable
+     * @return {boolean}
+     */
+    isResolvable() {
+        if ((this.en.value === 1 || this.en.connections.length === 0) && this.memAddr.value !== undefined) return true;
+        return false;
+    }
+
+    /**
+     * @memberof Rom
+     * fn to create save Json Data of object
+     * @return {JSON}
+     */
+    customSave() {
+        const data = {
+            constructorParamaters: [this.data],
+            nodes: {
+                memAddr: findNode(this.memAddr),
+                dataOut: findNode(this.dataOut),
+                en: findNode(this.en),
+            },
+
+        };
+        return data;
+    }
+
+    /**
+     * @memberof Rom
+     * function to find position of the index of part of rom selected.
+     * @return {number}
+     */
+    findPos() {
+        const i = Math.floor((simulationArea.mouseX - this.x + 35) / 20);
+        const j = Math.floor((simulationArea.mouseY - this.y + 35) / 16);
+        if (i < 0 || j < 0 || i > 3 || j > 3) return undefined;
+        return j * 4 + i;
+    }
+
+    /**
+     * @memberof Rom
+     * listener function to set selected index
+     * @return {number}
+     */
+    click() { // toggle
+        this.selectedIndex = this.findPos();
+    }
+
+    /**
+     * @memberof Rom
+     * to take input in rom
+     * @return {number}
+     */
+    keyDown(key) {
+        if (key === 'Backspace') this.delete();
+        if (this.selectedIndex === undefined) return;
+        key = key.toLowerCase();
+        if (!~'1234567890abcdef'.indexOf(key)) return;
+
+        this.data[this.selectedIndex] = (this.data[this.selectedIndex] * 16 + parseInt(key, 16)) % 256;
+    }
+
+    /**
+     * @memberof Rom
+     * function to draw element
+     */
+    customDraw() {
+        const ctx = simulationArea.context;
+        const xx = this.x;
+        const yy = this.y;
+        const hoverIndex = this.findPos();
+        ctx.strokeStyle = 'black';
+        ctx.fillStyle = 'white';
+        ctx.lineWidth = correctWidth(3);
+        ctx.beginPath();
+        rect2(ctx, -this.leftDimensionX, -this.upDimensionY, this.leftDimensionX + this.rightDimensionX, this.upDimensionY + this.downDimensionY, this.x, this.y, [this.direction, 'RIGHT'][+this.directionFixed]);
+        if (hoverIndex === undefined && ((!simulationArea.shiftDown && this.hover) || simulationArea.lastSelected === this || simulationArea.multipleObjectSelections.contains(this))) ctx.fillStyle = 'rgba(255, 255, 32,0.8)';
+        ctx.fill();
+        ctx.stroke();
+        ctx.strokeStyle = 'black';
+        ctx.fillStyle = '#fafafa';
+        ctx.lineWidth = correctWidth(1);
+        ctx.beginPath();
+        for (let i = 0; i < 16; i += 4) {
+            for (let j = i; j < i + 4; j++) {
+                rect2(ctx, (j % 4) * 20, i * 4, 20, 16, xx - 35, yy - 35);
+            }
+        }
+        ctx.fill();
+        ctx.stroke();
+        if (hoverIndex !== undefined) {
+            ctx.beginPath();
+            ctx.fillStyle = 'yellow';
+            rect2(ctx, (hoverIndex % 4) * 20, Math.floor(hoverIndex / 4) * 16, 20, 16, xx - 35, yy - 35);
+            ctx.fill();
+            ctx.stroke();
+        }
+        if (this.selectedIndex !== undefined) {
+            ctx.beginPath();
+            ctx.fillStyle = 'lightgreen';
+            rect2(ctx, (this.selectedIndex % 4) * 20, Math.floor(this.selectedIndex / 4) * 16, 20, 16, xx - 35, yy - 35);
+            ctx.fill();
+            ctx.stroke();
+        }
+        if (this.memAddr.value !== undefined) {
+            ctx.beginPath();
+            ctx.fillStyle = 'green';
+            rect2(ctx, (this.memAddr.value % 4) * 20, Math.floor(this.memAddr.value / 4) * 16, 20, 16, xx - 35, yy - 35);
+            ctx.fill();
+            ctx.stroke();
+        }
+
+        ctx.beginPath();
+        ctx.fillStyle = 'Black';
+        fillText3(ctx, 'A', -65, 5, xx, yy, 16, 'Georgia', 'right');
+        fillText3(ctx, 'D', 75, 5, xx, yy, 16, 'Georgia', 'right');
+        fillText3(ctx, 'En', 5, 47, xx, yy, 16, 'Georgia', 'right');
+        ctx.fill();
+
+        ctx.beginPath();
+        ctx.fillStyle = 'Black';
+        for (let i = 0; i < 16; i += 4) {
+            for (let j = i; j < i + 4; j++) {
+                let s = this.data[j].toString(16);
+                if (s.length < 2) s = `0${s}`;
+                fillText3(ctx, s, (j % 4) * 20, i * 4, xx - 35 + 10, yy - 35 + 12, 14, 'Georgia', 'center');
+            }
+        }
+        ctx.fill();
+
+        ctx.beginPath();
+        ctx.fillStyle = 'Black';
+        for (let i = 0; i < 16; i += 4) {
+            let s = i.toString(16);
+            if (s.length < 2) s = `0${s}`;
+            fillText3(ctx, s, 0, i * 4, xx - 40, yy - 35 + 12, 14, 'Georgia', 'right');
+        }
+        ctx.fill();
+    }
+
+    /**
+     * @memberof Rom
+     * resolve output values based on inputData
+     */
+    resolve() {
+        if (this.isResolvable() === false) {
+            return;
+        }
+        this.dataOut.value = this.data[this.memAddr.value];
+        simulationArea.simulationQueue.add(this.dataOut);
+    }
+}
+
+/**
+ * @memberof Rom
+ * Help Tip
+ * @type {string}
+ * @category sequential
+ */
+Rom.prototype.tooltipText = 'Read-only memory';
+Rom.prototype.helplink = 'https://docs.circuitverse.org/#/memoryElements?id=rom';
+Rom.prototype.objectType = 'Rom';
diff --git a/src/sequential/SRflipFlop.js b/src/sequential/SRflipFlop.js
new file mode 100644
index 0000000..75d0610
--- /dev/null
+++ b/src/sequential/SRflipFlop.js
@@ -0,0 +1,128 @@
+import CircuitElement from '../circuitElement';
+import Node, { findNode } from '../node';
+import simulationArea from '../simulationArea';
+import { correctWidth, fillText } from '../canvasApi';
+/**
+ * @class
+ * SRflipFlop
+ * SR flip flop has 6 input nodes:
+ * clock, S input, R input, preset, reset ,enable.
+ * @extends CircuitElement
+ * @param {number} x - x coord of element
+ * @param {number} y - y coord of element
+ * @param {Scope=} scope - the ciruit in which we want the Element
+ * @param {string=} dir - direcion in which element has to drawn
+ * @category sequential
+ */
+export default class SRflipFlop extends CircuitElement {
+    constructor(x, y, scope = globalScope, dir = 'RIGHT') {
+        super(x, y, scope, dir, 1);
+        /*
+        this.scope['SRflipFlop'].push(this);
+        */
+        this.directionFixed = true;
+        this.fixedBitWidth = true;
+        this.setDimensions(20, 20);
+        this.rectangleObject = true;
+        this.R = new Node(-20, +10, 0, this, 1, 'R');
+        this.S = new Node(-20, -10, 0, this, 1, 'S');
+        this.qOutput = new Node(20, -10, 1, this, 1, 'Q');
+        this.qInvOutput = new Node(20, 10, 1, this, 1, 'Q Inverse');
+        this.reset = new Node(10, 20, 0, this, 1, 'Asynchronous Reset');
+        this.preset = new Node(0, 20, 0, this, 1, 'Preset');
+        this.en = new Node(-10, 20, 0, this, 1, 'Enable');
+        this.state = 0;
+        // this.slaveState = 0;
+        // this.prevClockState = 0;
+        // this.wasClicked = false;
+    }
+
+    newBitWidth(bitWidth) {
+        this.bitWidth = bitWidth;
+        this.dInp.bitWidth = bitWidth;
+        this.qOutput.bitWidth = bitWidth;
+        this.qInvOutput.bitWidth = bitWidth;
+        this.preset.bitWidth = bitWidth;
+    }
+
+    /**
+     * @memberof SRflipFlop
+     * always resolvable
+     */
+    isResolvable() {
+        return true;
+        if (this.reset.value == 1) return true;
+        if (this.S.value != undefined && this.R.value != undefined) return true;
+        return false;
+    }
+
+    /**
+     * @memberof SRflipFlop
+     * function to resolve SR flip flop if S != R we can
+     * set this.state to value S.
+     */
+    resolve() {
+        if (this.reset.value == 1) {
+            this.state = this.preset.value || 0;
+        } else if ((this.en.value == 1 || this.en.connections == 0) && this.S.value ^ this.R.value) {
+            this.state = this.S.value;
+        }
+
+        // console.log(this.reset.value != 1 && this.en.value && this.S.value && this.R.value && this.S.value ^ this.R.value);
+        if (this.qOutput.value != this.state) {
+            this.qOutput.value = this.state;
+            this.qInvOutput.value = this.flipBits(this.state);
+            simulationArea.simulationQueue.add(this.qOutput);
+            simulationArea.simulationQueue.add(this.qInvOutput);
+        }
+    }
+
+    customSave() {
+        const data = {
+            nodes: {
+                S: findNode(this.S),
+                R: findNode(this.R),
+                qOutput: findNode(this.qOutput),
+                qInvOutput: findNode(this.qInvOutput),
+                reset: findNode(this.reset),
+                preset: findNode(this.preset),
+                en: findNode(this.en),
+            },
+            constructorParamaters: [this.direction],
+
+        };
+        return data;
+    }
+
+    customDraw() {
+        const ctx = simulationArea.context;
+        ctx.beginPath();
+        ctx.strokeStyle = ('rgba(0,0,0,1)');
+        ctx.fillStyle = 'white';
+        ctx.lineWidth = correctWidth(3);
+        const xx = this.x;
+        const yy = this.y;
+
+        // rect(ctx, xx - 20, yy - 20, 40, 40);
+        // moveTo(ctx, -20, 5, xx, yy, this.direction);
+        // lineTo(ctx, -15, 10, xx, yy, this.direction);
+        // lineTo(ctx, -20, 15, xx, yy, this.direction);
+
+
+        // if ((this.b.hover&&!simulationArea.shiftDown)|| simulationArea.lastSelected == this || simulationArea.multipleObjectSelections.contains(this)) ctx.fillStyle = "rgba(255, 255, 32,0.8)";ctx.fill();
+        ctx.stroke();
+
+        ctx.beginPath();
+        ctx.font = '20px Georgia';
+        ctx.fillStyle = 'green';
+        ctx.textAlign = 'center';
+        fillText(ctx, this.state.toString(16), xx, yy + 5);
+        ctx.fill();
+    }
+}
+
+SRflipFlop.prototype.tooltipText = 'SR FlipFlop ToolTip : SR FlipFlop Selected.';
+
+SRflipFlop.prototype.helplink = 'https://docs.circuitverse.org/#/Sequential?id=sr-flip-flop';
+
+SRflipFlop.prototype.objectType = 'SRflipFlop';
diff --git a/src/sequential/TTY.js b/src/sequential/TTY.js
new file mode 100644
index 0000000..cc96419
--- /dev/null
+++ b/src/sequential/TTY.js
@@ -0,0 +1,187 @@
+import CircuitElement from '../circuitElement';
+import Node, { findNode } from '../node';
+import simulationArea from '../simulationArea';
+import {
+    correctWidth, lineTo, moveTo, fillText3,
+} from '../canvasApi';
+
+/**
+ * @class
+ * TTY
+ * TypeWriter - We can give 4 inputs:
+ * clock and input of 7 bits are main input required
+ * on the edge change the data is added onto the display
+ * screen of the typewriter
+ * @extends CircuitElement
+ * @param {number} x - x coord of element
+ * @param {number} y - y coord of element
+ * @param {Scope=} scope - the ciruit in which we want the Element
+ * @param {string=} dir - direcion in which element has to drawn
+ * @category sequential
+ */
+export default class TTY extends CircuitElement {
+    constructor(x, y, scope = globalScope, rows = 3, cols = 32) {
+        super(x, y, scope, 'RIGHT', 1);
+        /*
+        this.scope['TTY'].push(this);
+        */
+        this.directionFixed = true;
+        this.fixedBitWidth = true;
+        this.cols = cols || parseInt(prompt('Enter cols:'));
+        this.rows = rows || parseInt(prompt('Enter rows:'));
+
+        this.elementWidth = Math.max(40, Math.ceil(this.cols / 2) * 20);
+        this.elementHeight = Math.max(40, Math.ceil(this.rows * 15 / 20) * 20);
+        this.setWidth(this.elementWidth / 2);
+        this.setHeight(this.elementHeight / 2);
+        // this.element = new Element(x, y, "TTY",this.elementWidth/2, this,this.elementHeight/2);
+
+        this.clockInp = new Node(-this.elementWidth / 2, this.elementHeight / 2 - 10, 0, this, 1, 'Clock');
+        this.asciiInp = new Node(-this.elementWidth / 2, this.elementHeight / 2 - 30, 0, this, 7, 'Ascii Input');
+        // this.qOutput = new Node(20, -10, 1, this);
+        this.reset = new Node(30 - this.elementWidth / 2, this.elementHeight / 2, 0, this, 1, 'Reset');
+        this.en = new Node(10 - this.elementWidth / 2, this.elementHeight / 2, 0, this, 1, 'Enable');
+        // this.masterState = 0;
+        // this.slaveState = 0;
+        this.prevClockState = 0;
+
+        this.data = '';
+        this.buffer = '';
+    }
+
+    /**
+     * @memberof TTY
+     * this funciton is used to change the size of the screen
+     */
+    changeRowSize(size) {
+        if (size == undefined || size < 1 || size > 10) return;
+        if (this.rows == size) return;
+        const obj = new TTY(this.x, this.y, this.scope, size, this.cols);
+        this.delete();
+        simulationArea.lastSelected = obj;
+        return obj;
+    }
+
+    /**
+     * @memberof TTY
+     * this funciton is used to change the size of the screen
+     */
+    changeColSize(size) {
+        if (size == undefined || size < 20 || size > 100) return;
+        if (this.cols == size) return;
+        const obj = new TTY(this.x, this.y, this.scope, this.rows, size);
+        this.delete();
+        simulationArea.lastSelected = obj;
+        return obj;
+    }
+
+    /**
+     * @memberof TTY
+     * if no input or enable key is set to 0 returns false
+     */
+    isResolvable() {
+        if (this.reset.value == 1) return true;
+        if (this.en.value == 0 || (this.en.connections.length && this.en.value == undefined)) return false;
+        if (this.clockInp.value == undefined) return false;
+        if (this.asciiInp.value == undefined) return false;
+        return true;
+    }
+
+    /**
+     * @memberof TTY
+     * To resolve the Typewriter clock and input of 7 bits are
+     * used to get the ascii and then on the edge change the
+     * data is added onto the display screen of the typewriter.
+     */
+    resolve() {
+        if (this.reset.value == 1) {
+            this.data = '';
+            return;
+        }
+        if (this.en.value == 0) {
+            this.buffer = '';
+            return;
+        }
+
+        if (this.clockInp.value == this.prevClockState) {
+            if (this.clockInp.value == 0) {
+                this.buffer = String.fromCharCode(this.asciiInp.value);
+            }
+        } else if (this.clockInp.value != undefined) {
+            if (this.clockInp.value == 1) {
+                this.data += this.buffer;
+                if (this.data.length > this.cols * this.rows) { this.data = this.data.slice(1); }
+            } else if (this.clockInp.value == 0) {
+                this.buffer = String.fromCharCode(this.asciiInp.value);
+            }
+            this.prevClockState = this.clockInp.value;
+        }
+    }
+
+    customSave() {
+        const data = {
+            nodes: {
+                clockInp: findNode(this.clockInp),
+                asciiInp: findNode(this.asciiInp),
+                reset: findNode(this.reset),
+                en: findNode(this.en),
+            },
+            constructorParamaters: [this.rows, this.cols],
+        };
+        return data;
+    }
+
+    customDraw() {
+        const ctx = simulationArea.context;
+        ctx.beginPath();
+        ctx.strokeStyle = ('rgba(0,0,0,1)');
+        ctx.fillStyle = 'white';
+        ctx.lineWidth = correctWidth(3);
+        const xx = this.x;
+        const yy = this.y;
+        // rect(ctx, xx - this.elementWidth/2, yy - this.elementHeight/2, this.elementWidth, this.elementHeight);
+
+        moveTo(ctx, -this.elementWidth / 2, this.elementHeight / 2 - 15, xx, yy, this.direction);
+        lineTo(ctx, 5 - this.elementWidth / 2, this.elementHeight / 2 - 10, xx, yy, this.direction);
+        lineTo(ctx, -this.elementWidth / 2, this.elementHeight / 2 - 5, xx, yy, this.direction);
+
+
+        // if ((this.b.hover&&!simulationArea.shiftDown)|| simulationArea.lastSelected == this || simulationArea.multipleObjectSelections.contains(this))
+        //     ctx.fillStyle = "rgba(255, 255, 32,0.8)";
+        // ctx.fill();
+        ctx.stroke();
+
+        ctx.beginPath();
+        ctx.fillStyle = 'green';
+        ctx.textAlign = 'center';
+        const startY = -7.5 * this.rows + 3;
+        for (let i = 0; i < this.data.length; i += this.cols) {
+            let lineData = this.data.slice(i, i + this.cols);
+            lineData += ' '.repeat(this.cols - lineData.length);
+            fillText3(ctx, lineData, 0, startY + (i / this.cols) * 15 + 9, xx, yy, 15, 'Courier New', 'center');
+        }
+        ctx.fill();
+    }
+}
+
+TTY.prototype.tooltipText = 'TTY ToolTip : Tele typewriter selected.';
+TTY.prototype.helplink = 'https://docs.circuitverse.org/#/Sequential?id=tty';
+
+TTY.prototype.mutableProperties = {
+    cols: {
+        name: 'Columns',
+        type: 'number',
+        max: '100',
+        min: '20',
+        func: 'changeColSize',
+    },
+    rows: {
+        name: 'Rows',
+        type: 'number',
+        max: '10',
+        min: '1',
+        func: 'changeRowSize',
+    },
+};
+
+TTY.prototype.objectType = 'TTY';
diff --git a/src/sequential/TflipFlop.js b/src/sequential/TflipFlop.js
new file mode 100644
index 0000000..37fe620
--- /dev/null
+++ b/src/sequential/TflipFlop.js
@@ -0,0 +1,153 @@
+import CircuitElement from '../circuitElement';
+import Node, { findNode } from '../node';
+import simulationArea from '../simulationArea';
+import {
+    correctWidth, lineTo, moveTo, fillText,
+} from '../canvasApi';
+
+/**
+ * @class
+ * TflipFlop
+ * T flip flop has 5 input nodes:
+ * clock, data input, preset, reset ,enable.
+ * @extends CircuitElement
+ * @param {number} x - x coord of element
+ * @param {number} y - y coord of element
+ * @param {Scope=} scope - the ciruit in which we want the Element
+ * @param {string=} dir - direcion in which element has to drawn
+ * @category sequential
+ */
+export default class TflipFlop extends CircuitElement {
+    constructor(x, y, scope = globalScope, dir = 'RIGHT') {
+        super(x, y, scope, dir, 1);
+        /*
+        this.scope['TflipFlop'].push(this);
+        */
+        this.directionFixed = true;
+        this.fixedBitWidth = true;
+        this.setDimensions(20, 20);
+        this.rectangleObject = true;
+        this.clockInp = new Node(-20, +10, 0, this, 1, 'Clock');
+        this.dInp = new Node(-20, -10, 0, this, this.bitWidth, 'T');
+        this.qOutput = new Node(20, -10, 1, this, this.bitWidth, 'Q');
+        this.qInvOutput = new Node(20, 10, 1, this, this.bitWidth, 'Q Inverse');
+        this.reset = new Node(10, 20, 0, this, 1, 'Asynchronous Reset');
+        this.preset = new Node(0, 20, 0, this, this.bitWidth, 'Preset');
+        this.en = new Node(-10, 20, 0, this, 1, 'Enable');
+        this.masterState = 0;
+        this.slaveState = 0;
+        this.prevClockState = 0;
+
+        // this.wasClicked = false;
+    }
+
+    /**
+     * @memberof TflipFlop
+     * returns true if clock is defined
+     */
+    isResolvable() {
+        if (this.reset.value == 1) return true;
+        if (this.clockInp.value != undefined && this.dInp.value != undefined) return true;
+        return false;
+    }
+
+    /**
+     * @memberof TflipFlop
+     * @param {number} bitWidth - the new bitwidth
+     */
+    newBitWidth(bitWidth) {
+        this.bitWidth = bitWidth;
+        this.dInp.bitWidth = bitWidth;
+        this.qOutput.bitWidth = bitWidth;
+        this.qInvOutput.bitWidth = bitWidth;
+        this.preset.bitWidth = bitWidth;
+    }
+
+    /**
+     * @memberof TflipFlop
+     * On the leading edge of the clock signal (LOW-to-HIGH) the first stage,
+     * the “master” latches the input condition at D, while the output stage is deactivated.
+     * On the trailing edge of the clock signal (HIGH-to-LOW) the second “slave” stage is
+     * now activated, latching on to the output from the first master circuit.
+     * This fuction sets the value for the node qOutput based on
+     * the previous state and input of the clock by taking xor.
+     * We flip the bits to find qInvOutput
+     */
+    resolve() {
+        if (this.reset.value == 1) {
+            // if reset bit is set
+            this.masterState = this.slaveState = this.preset.value || 0;
+        } else if (this.en.value == 0) {
+            // if enabled bit is 0
+            this.prevClockState = this.clockInp.value;
+        } else if (this.en.value == 1 || this.en.connections.length == 0) {
+            // if enabled bit is 1 or not connected to anything.
+            if (this.clockInp.value == this.prevClockState) {
+                if (this.clockInp.value == 0 && this.dInp.value != undefined) {
+                    // value is xor of
+                    this.masterState = this.dInp.value ^ this.slaveState;
+                }
+            } else if (this.clockInp.value != undefined) {
+                if (this.clockInp.value == 1) {
+                    this.slaveState = this.masterState;
+                } else if (this.clockInp.value == 0 && this.dInp.value != undefined) {
+                    this.masterState = this.dInp.value ^ this.slaveState;
+                }
+                this.prevClockState = this.clockInp.value;
+            }
+        }
+
+        if (this.qOutput.value != this.slaveState) {
+            this.qOutput.value = this.slaveState;
+            this.qInvOutput.value = this.flipBits(this.slaveState);
+            simulationArea.simulationQueue.add(this.qOutput);
+            simulationArea.simulationQueue.add(this.qInvOutput);
+        }
+    }
+
+    customSave() {
+        const data = {
+            nodes: {
+                clockInp: findNode(this.clockInp),
+                dInp: findNode(this.dInp),
+                qOutput: findNode(this.qOutput),
+                qInvOutput: findNode(this.qInvOutput),
+                reset: findNode(this.reset),
+                preset: findNode(this.preset),
+                en: findNode(this.en),
+            },
+            constructorParamaters: [this.direction, this.bitWidth],
+
+        };
+        return data;
+    }
+
+    customDraw() {
+        const ctx = simulationArea.context;
+        ctx.beginPath();
+        ctx.strokeStyle = ('rgba(0,0,0,1)');
+        ctx.fillStyle = 'white';
+        ctx.lineWidth = correctWidth(3);
+        const xx = this.x;
+        const yy = this.y;
+        // rect(ctx, xx - 20, yy - 20, 40, 40);
+        moveTo(ctx, -20, 5, xx, yy, this.direction);
+        lineTo(ctx, -15, 10, xx, yy, this.direction);
+        lineTo(ctx, -20, 15, xx, yy, this.direction);
+
+        // if ((this.b.hover&&!simulationArea.shiftDown)|| simulationArea.lastSelected == this || simulationArea.multipleObjectSelections.contains(this)) ctx.fillStyle = "rgba(255, 255, 32,0.8)";ctx.fill();
+        ctx.stroke();
+        ctx.beginPath();
+        ctx.font = '20px Georgia';
+        ctx.fillStyle = 'green';
+        ctx.textAlign = 'center';
+        fillText(ctx, this.slaveState.toString(16), xx, yy + 5);
+        ctx.fill();
+    }
+}
+
+TflipFlop.prototype.tooltipText = 'T FlipFlop ToolTip :  Changes state / Toggles whenever the clock input is strobed.';
+
+TflipFlop.prototype.helplink = 'https://docs.circuitverse.org/#/Sequential?id=t-flip-flop';
+
+TflipFlop.prototype.objectType = 'TflipFlop';
diff --git a/src/setup.js b/src/setup.js
new file mode 100755
index 0000000..3317069
--- /dev/null
+++ b/src/setup.js
@@ -0,0 +1,174 @@
+/* eslint-disable import/no-cycle */
+/* eslint-disable no-restricted-syntax */
+/* eslint-disable guard-for-in */
+import * as metadata from './metadata.json';
+import { generateId, showMessage } from './utils';
+import backgroundArea from './backgroundArea';
+import plotArea from './plotArea';
+import simulationArea from './simulationArea';
+import { dots } from './canvasApi';
+import { update, updateSimulationSet, updateCanvasSet } from './engine';
+import { setupUI } from './ux';
+import startMainListeners from './listeners';
+import startEmbedListeners from './embedListeners';
+import './embed';
+import { newCircuit } from './circuit';
+import load from './data/load';
+import save from './data/save';
+
+window.width = undefined;
+window.height = undefined;
+window.DPR = 1; // devicePixelRatio, 2 for retina displays, 1 for low resolution displays
+
+/**
+ * to resize window and setup things it
+ * sets up new width for the canvas variables.
+ * Also redraws the grid.
+ * @category setup
+ */
+export function resetup() {
+    DPR = window.devicePixelRatio || 1;
+    if (lightMode) { DPR = 1; }
+    width = document.getElementById('simulationArea').clientWidth * DPR;
+    if (!embed) {
+        height = (document.getElementById('simulation').clientHeight - document.getElementById('toolbar').clientHeight) * DPR;
+    } else {
+        height = (document.getElementById('simulation').clientHeight) * DPR;
+    }
+    // setup simulationArea and backgroundArea variables used to make changes to canvas.
+    backgroundArea.setup();
+    if (!embed) plotArea.setup();
+    simulationArea.setup();
+    // redraw grid
+    dots();
+    document.getElementById('backgroundArea').style.height = height / DPR + 100;
+    document.getElementById('backgroundArea').style.width = width / DPR + 100;
+    document.getElementById('canvasArea').style.height = height / DPR;
+    simulationArea.canvas.width = width;
+    simulationArea.canvas.height = height;
+    backgroundArea.canvas.width = width + 100 * DPR;
+    backgroundArea.canvas.height = height + 100 * DPR;
+    if (!embed) {
+        plotArea.c.width = document.getElementById('plot').clientWidth;
+        plotArea.c.height = document.getElementById('plot').clientHeight;
+    }
+    updateCanvasSet(true);
+    update(); // INEFFICIENT, needs to be deprecated
+    simulationArea.prevScale = 0;
+    dots();
+}
+
+window.onresize = resetup; // listener
+window.onorientationchange = resetup; // listener
+
+// for mobiles
+window.addEventListener('orientationchange', resetup); // listener
+
+/**
+ * function to setup environment variables like projectId and DPR
+ * @category setup
+ */
+function setupEnvironment() {
+    const projectId = generateId();
+    updateSimulationSet(true);
+    const DPR = window.devicePixelRatio || 1;
+    newCircuit('Main');
+    window.data = {};
+    resetup();
+}
+
+/**
+ * It initializes some useful array which are helpful
+ * while simulating, saving and loading project.
+ * It also draws icons in the sidebar
+ * @category setup
+ */
+function setupElementLists() {
+    $('#menu').empty();
+
+    window.circuitElementList = metadata.circuitElementList;
+    window.annotationList = metadata.annotationList;
+    window.inputList = metadata.inputList;
+    window.subCircuitInputList = metadata.subCircuitInputList;
+    window.moduleList = [...circuitElementList, ...annotationList];
+    window.updateOrder = ['wires', ...circuitElementList, 'nodes', ...annotationList]; // Order of update
+    window.renderOrder = [...(moduleList.slice().reverse()), 'wires', 'allNodes']; // Order of render
+
+
+    function createIcon(element) {
+        return `<div class="icon logixModules" id="${element}" >
+            <img src= "./img/${element}.svg" >
+            <p class="img__description">${element}</p>
+        </div>`;
+    }
+
+    window.elementHierarchy = metadata.elementHierarchy;
+    for (const category in elementHierarchy) {
+        let htmlIcons = '';
+
+        const categoryData = elementHierarchy[category];
+
+        for (let i = 0; i < categoryData.length; i++) {
+            const element = categoryData[i];
+            htmlIcons += createIcon(element);
+        }
+
+        const accordionData = `<div class="panelHeader">${category}</div>
+            <div class="panel" style="overflow-y:hidden">
+              ${htmlIcons}
+            </div>`;
+
+        $('#menu').append(accordionData);
+    }
+}
+
+/**
+ * The first function to be called to setup the whole simulator
+ * @category setup
+ */
+export function setup() {
+    const startListeners = embed ? startEmbedListeners : startMainListeners;
+    setupElementLists();
+    setupEnvironment();
+    if (!embed) { setupUI(); }
+    startListeners();
+
+    // Load project data after 1 second - needs to be improved, delay needs to be eliminated
+    setTimeout(() => {
+        if (logix_project_id !== 0) {
+            $('.loadingIcon').fadeIn();
+            $.ajax({
+                url: '/simulator/get_data',
+                type: 'POST',
+                beforeSend(xhr) {
+                    xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content'));
+                },
+                data: {
+                    id: logix_project_id,
+                },
+                success(response) {
+                    const data = (response);
+                    if (data) {
+                        load(data);
+                        simulationArea.changeClockTime(data.timePeriod || 500);
+                    }
+                    $('.loadingIcon').fadeOut();
+                },
+                failure() {
+                    alert('Error: could not load ');
+                    $('.loadingIcon').fadeOut();
+                },
+            });
+        } else if (localStorage.getItem('recover_login') && userSignedIn) {
+            // Restore unsaved data and save
+            const data = JSON.parse(localStorage.getItem('recover_login'));
+            load(data);
+            localStorage.removeItem('recover');
+            localStorage.removeItem('recover_login');
+            save();
+        } else if (localStorage.getItem('recover')) {
+            // Restore unsaved data which didn't get saved due to error
+            showMessage("We have detected that you did not save your last work. Don't worry we have recovered them. Access them using Project->Recover");
+        }
+    }, 1000);
+}
diff --git a/src/simulationArea.js b/src/simulationArea.js
index d4b8d31..b439aa4 100644
--- a/src/simulationArea.js
+++ b/src/simulationArea.js
@@ -1,8 +1,45 @@
-import { width, height } from "./circuit";
-import EventQueue from "./eventQueue"
-import { clockTick } from "./utils";
-export var simulationArea = {
-    canvas: document.getElementById("simulationArea"),
+/* eslint-disable import/no-cycle */
+import EventQueue from './eventQueue';
+import { clockTick } from './utils';
+
+/**
+ * simulation environment object - holds simulation canvas
+ * @type {Object} simulationArea
+ * @property {HTMLCanvasElement} canvas
+ * @property {boolean} selected
+ * @property {boolean} hover
+ * @property {number} clockState
+ * @property {boolean} clockEnabled
+ * @property {undefined} lastSelected
+ * @property {Array} stack
+ * @property {number} prevScale
+ * @property {number} oldx
+ * @property {number} oldy
+ * @property {Array} objectList
+ * @property {number} maxHeight
+ * @property {number} maxWidth
+ * @property {number} minHeight
+ * @property {number} minWidth
+ * @property {Array} multipleObjectSelections
+ * @property {Array} copyList - List of selected elements
+ * @property {boolean} shiftDown - shift down or not
+ * @property {boolean} controlDown - contol down or not
+ * @property {number} timePeriod - time period
+ * @property {number} mouseX - mouse x
+ * @property {number} mouseY - mouse y
+ * @property {number} mouseDownX - mouse click x
+ * @property {number} mouseDownY - mouse click y
+ * @property {Array} simulationQueue - simulation queue
+ * @property {number} clickCount - number of clicks
+ * @property {string} lock - locked or unlocked
+ * @property {function} timer - timer
+ * @property {function} setup - to setup the simulaton area
+ * @property {function} changeClockTime - change clock time
+ * @property {function} clear - clear the simulation area
+ * @category simulationArea
+ */
+const simulationArea = {
+    canvas: document.getElementById('simulationArea'),
     selected: false,
     hover: false,
     clockState: 0,
@@ -28,34 +65,34 @@ export var simulationArea = {
     mouseDownY: 0,
     simulationQueue: undefined,
 
-    clickCount: 0, //double click
-    lock: "unlocked",
-    timer: function () {
-        ckickTimer = setTimeout(function () {
+    clickCount: 0, // double click
+    lock: 'unlocked',
+    timer() {
+        ckickTimer = setTimeout(() => {
             simulationArea.clickCount = 0;
         }, 600);
     },
 
-    setup: function () {
-        this.canvas = document.getElementById("simulationArea"),
+    setup() {
+        this.canvas = document.getElementById('simulationArea');
         this.canvas.width = width;
         this.canvas.height = height;
         this.simulationQueue = new EventQueue(10000);
-        this.context = this.canvas.getContext("2d");
-        simulationArea.changeClockTime(simulationArea.timePeriod)
+        this.context = this.canvas.getContext('2d');
+        simulationArea.changeClockTime(simulationArea.timePeriod);
         this.mouseDown = false;
     },
-    changeClockTime: function (t) {
+    changeClockTime(t) {
         if (t < 50) return;
         clearInterval(simulationArea.ClockInterval);
-        t = t || prompt("Enter Time Period:");
+        t = t || prompt('Enter Time Period:');
         simulationArea.timePeriod = t;
         simulationArea.ClockInterval = setInterval(clockTick, t);
     },
-    clear: function () {
+    clear() {
         if (!this.context) return;
         this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
-    }
-}
-
-const changeClockTime = simulationArea.changeClockTime
+    },
+};
+export const { changeClockTime } = simulationArea;
+export default simulationArea;
diff --git a/src/subcircuit.js b/src/subcircuit.js
new file mode 100755
index 0000000..7a855c1
--- /dev/null
+++ b/src/subcircuit.js
@@ -0,0 +1,458 @@
+/* eslint-disable import/no-cycle */
+import Scope, { scopeList, switchCircuit } from './circuit';
+import CircuitElement from './circuitElement';
+import simulationArea from './simulationArea';
+import { scheduleBackup, checkIfBackup } from './data/backupCircuit';
+import {
+    scheduleUpdate, updateSimulationSet, updateCanvasSet, updateSubcircuitSet,
+} from './engine';
+import { loadScope } from './data/load';
+import { showError } from './utils';
+
+import Node, { findNode } from './node';
+import { fillText } from './canvasApi';
+
+
+/**
+ * Function to load a subcicuit
+ * @category subcircuit
+ */
+export function loadSubCircuit(savedData, scope) {
+    new SubCircuit(savedData.x, savedData.y, scope, savedData.id, savedData);
+}
+
+/**
+ * Prompt to create subcircuit, shows list of circuits which dont depend on the current circuit
+ * @param {Scope=} scope
+ * @category subcircuit
+ */
+export function createSubCircuitPrompt(scope = globalScope) {
+    $('#insertSubcircuitDialog').empty();
+    let flag = true;
+    for (id in scopeList) {
+        if (!scopeList[id].checkDependency(scope.id)) {
+            flag = false;
+            $('#insertSubcircuitDialog').append(`<label class="option"><input type="radio" name="subCircuitId" value="${id}" />${scopeList[id].name}</label>`);
+        }
+    }
+    if (flag) $('#insertSubcircuitDialog').append('<p>Looks like there are no other circuits which doesn\'t have this circuit as a dependency. Create a new one!</p>');
+    $('#insertSubcircuitDialog').dialog({
+        maxHeight: 350,
+        width: 250,
+        maxWidth: 250,
+        minWidth: 250,
+        buttons: !flag ? [{
+            text: 'Insert SubCircuit',
+            click() {
+                if (!$('input[name=subCircuitId]:checked').val()) return;
+                simulationArea.lastSelected = new SubCircuit(undefined, undefined, globalScope, $('input[name=subCircuitId]:checked').val());
+                $(this).dialog('close');
+            },
+        }] : [],
+
+    });
+}
+
+
+/**
+ * @class
+ * @extends CircuitElement
+ * @param {number} x - x coord of subcircuit
+ * @param {number} y - y coord of subcircuit
+ * @param {Scope=} scope - the circuit in which subcircuit has been added
+ * @param {string} id - the id of the subcircuit scope
+ * @param {JSON} savedData - the saved data
+ * @category subcircuit
+ */
+export default class SubCircuit extends CircuitElement {
+    constructor(x, y, scope = globalScope, id = undefined, savedData = undefined) {
+        super(x, y, scope, 'RIGHT', 1); // super call
+        this.objectType = 'SubCircuit';
+        this.scope.SubCircuit.push(this);
+        this.id = id || prompt('Enter Id: ');
+        this.directionFixed = true;
+        this.fixedBitWidth = true;
+        this.savedData = savedData;
+        this.inputNodes = [];
+        this.outputNodes = [];
+        this.localScope = new Scope();
+        const subcircuitScope = scopeList[this.id]; // Scope of the subcircuit
+        // Error handing
+        if (subcircuitScope == undefined) {
+            // if no such scope for subcircuit exists
+            showError(`SubCircuit : ${(savedData && savedData.title) || this.id} Not found`);
+        } else if (!checkIfBackup(subcircuitScope)) {
+            // if there is no input/output nodes there will be no backup
+            showError(`SubCircuit : ${(savedData && savedData.title) || subcircuitScope.name} is an empty circuit`);
+        } else if (subcircuitScope.checkDependency(scope.id)) {
+            // check for cyclic dependency
+            showError('Cyclic Circuit Error');
+        }
+        // Error handling, cleanup
+        if (subcircuitScope == undefined || subcircuitScope.checkDependency(scope.id) || !checkIfBackup(subcircuitScope)) {
+            if (savedData) {
+                for (let i = 0; i < savedData.inputNodes.length; i++) {
+                    scope.allNodes[savedData.inputNodes[i]].deleted = true;
+                }
+                for (let i = 0; i < savedData.outputNodes.length; i++) {
+                    scope.allNodes[savedData.outputNodes[i]].deleted = true;
+                }
+            }
+            return;
+        }
+
+
+        if (this.savedData != undefined) {
+            updateSubcircuitSet(true);
+            scheduleUpdate();
+            this.version = this.savedData.version || '1.0';
+
+            this.id = this.savedData.id;
+            for (let i = 0; i < this.savedData.inputNodes.length; i++) {
+                this.inputNodes.push(this.scope.allNodes[this.savedData.inputNodes[i]]);
+                this.inputNodes[i].parent = this;
+                this.inputNodes[i].layout_id = subcircuitScope.Input[i].layoutProperties.id;
+            }
+            for (let i = 0; i < this.savedData.outputNodes.length; i++) {
+                this.outputNodes.push(this.scope.allNodes[this.savedData.outputNodes[i]]);
+                this.outputNodes[i].parent = this;
+                this.outputNodes[i].layout_id = subcircuitScope.Output[i].layoutProperties.id;
+            }
+            if (this.version == '1.0') { // For backward compatibility
+                this.version = '2.0';
+                this.x -= subcircuitScope.layout.width / 2;
+                this.y -= subcircuitScope.layout.height / 2;
+                for (let i = 0; i < this.inputNodes.length; i++) {
+                    this.inputNodes[i].x = subcircuitScope.Input[i].layoutProperties.x;
+                    this.inputNodes[i].y = subcircuitScope.Input[i].layoutProperties.y;
+                    this.inputNodes[i].leftx = this.inputNodes[i].x;
+                    this.inputNodes[i].lefty = this.inputNodes[i].y;
+                }
+                for (let i = 0; i < this.outputNodes.length; i++) {
+                    this.outputNodes[i].x = subcircuitScope.Output[i].layoutProperties.x;
+                    this.outputNodes[i].y = subcircuitScope.Output[i].layoutProperties.y;
+                    this.outputNodes[i].leftx = this.outputNodes[i].x;
+                    this.outputNodes[i].lefty = this.outputNodes[i].y;
+                }
+            }
+
+            if (this.version == '2.0') {
+                this.leftDimensionX = 0;
+                this.upDimensionY = 0;
+                this.rightDimensionX = subcircuitScope.layout.width;
+                this.downDimensionY = subcircuitScope.layout.height;
+            }
+
+            this.nodeList.extend(this.inputNodes);
+            this.nodeList.extend(this.outputNodes);
+        } else {
+            this.version = '2.0';
+        }
+
+        this.data = JSON.parse(scheduleBackup(subcircuitScope));
+        this.buildCircuit(); // load the localScope for the subcircuit
+        this.makeConnections(); // which will be wireless
+    }
+
+    /**
+     * actually make all connection but are invisible so
+     * it seems like the simulation is happening in other
+     * Scope but it actually is not.
+     */
+    makeConnections() {
+        for (let i = 0; i < this.inputNodes.length; i++) {
+            this.localScope.Input[i].output1.connectWireLess(this.inputNodes[i]);
+            this.localScope.Input[i].output1.subcircuitOverride = true;
+        }
+
+        for (let i = 0; i < this.outputNodes.length; i++) {
+            this.localScope.Output[i].inp1.connectWireLess(this.outputNodes[i]);
+            this.outputNodes[i].subcircuitOverride = true;
+        }
+    }
+
+    /**
+     * Function to remove wireless connections
+     */
+    removeConnections() {
+        for (let i = 0; i < this.inputNodes.length; i++) {
+            this.localScope.Input[i].output1.disconnectWireLess(this.inputNodes[i]);
+        }
+
+        for (let i = 0; i < this.outputNodes.length; i++) { this.localScope.Output[i].inp1.disconnectWireLess(this.outputNodes[i]); }
+    }
+
+    /**
+     * loads the subcircuit and draws all the nodes
+     */
+    buildCircuit() {
+        const subcircuitScope = scopeList[this.id];
+        loadScope(this.localScope, this.data);
+        this.lastUpdated = this.localScope.timeStamp;
+        updateSimulationSet(true);
+        updateCanvasSet(true);
+
+        if (this.savedData == undefined) {
+            this.leftDimensionX = 0;
+            this.upDimensionY = 0;
+            this.rightDimensionX = subcircuitScope.layout.width;
+            this.downDimensionY = subcircuitScope.layout.height;
+            for (let i = 0; i < subcircuitScope.Output.length; i++) {
+                const a = new Node(subcircuitScope.Output[i].layoutProperties.x, subcircuitScope.Output[i].layoutProperties.y, 1, this, subcircuitScope.Output[i].bitWidth);
+                a.layout_id = subcircuitScope.Output[i].layoutProperties.id;
+                this.outputNodes.push(a);
+            }
+            for (let i = 0; i < subcircuitScope.Input.length; i++) {
+                const a = new Node(subcircuitScope.Input[i].layoutProperties.x, subcircuitScope.Input[i].layoutProperties.y, 0, this, subcircuitScope.Input[i].bitWidth);
+                a.layout_id = subcircuitScope.Input[i].layoutProperties.id;
+                this.inputNodes.push(a);
+            }
+        }
+    }
+
+    // Needs to be deprecated, removed
+    reBuild() {
+
+        // new SubCircuit(x = this.x, y = this.y, scope = this.scope, this.id);
+        // this.scope.backups = []; // Because all previous states are invalid now
+        // this.delete();
+        // showMessage('Subcircuit: ' + subcircuitScope.name + ' has been reloaded.');
+    }
+
+    /**
+     * rebuilds the subcircuit if any change to localscope is made
+     */
+    reBuildCircuit() {
+        this.data = JSON.parse(scheduleBackup(scopeList[this.id]));
+        this.localScope = new Scope();
+        loadScope(this.localScope, this.data);
+        this.lastUpdated = this.localScope.timeStamp;
+        this.scope.timeStamp = this.localScope.timeStamp;
+    }
+
+    reset() {
+        this.removeConnections();
+
+        const subcircuitScope = scopeList[this.id];
+
+        for (let i = 0; i < subcircuitScope.SubCircuit.length; i++) {
+            subcircuitScope.SubCircuit[i].reset();
+        }
+
+        if (subcircuitScope.Input.length == 0 && subcircuitScope.Output.length == 0) {
+            showError(`SubCircuit : ${subcircuitScope.name} is an empty circuit`);
+            this.delete();
+            this.scope.backups = [];
+            return;
+        }
+
+        subcircuitScope.layout.height = subcircuitScope.layout.height;
+        subcircuitScope.layout.width = subcircuitScope.layout.width;
+        this.leftDimensionX = 0;
+        this.upDimensionY = 0;
+        this.rightDimensionX = subcircuitScope.layout.width;
+        this.downDimensionY = subcircuitScope.layout.height;
+
+
+        const temp_map_inp = {};
+        for (let i = 0; i < subcircuitScope.Input.length; i++) {
+            temp_map_inp[subcircuitScope.Input[i].layoutProperties.id] = [subcircuitScope.Input[i], undefined];
+        }
+        for (let i = 0; i < this.inputNodes.length; i++) {
+            if (temp_map_inp.hasOwnProperty(this.inputNodes[i].layout_id)) {
+                temp_map_inp[this.inputNodes[i].layout_id][1] = this.inputNodes[i];
+            } else {
+                this.scope.backups = [];
+                this.inputNodes[i].delete();
+                this.nodeList.clean(this.inputNodes[i]);
+            }
+        }
+
+        for (id in temp_map_inp) {
+            if (temp_map_inp[id][1]) {
+                if (temp_map_inp[id][0].layoutProperties.x == temp_map_inp[id][1].x && temp_map_inp[id][0].layoutProperties.y == temp_map_inp[id][1].y) { temp_map_inp[id][1].bitWidth = temp_map_inp[id][0].bitWidth; } else {
+                    this.scope.backups = [];
+                    temp_map_inp[id][1].delete();
+                    this.nodeList.clean(temp_map_inp[id][1]);
+                    temp_map_inp[id][1] = new Node(temp_map_inp[id][0].layoutProperties.x, temp_map_inp[id][0].layoutProperties.y, 0, this, temp_map_inp[id][0].bitWidth);
+                    temp_map_inp[id][1].layout_id = id;
+                }
+            }
+        }
+
+        this.inputNodes = [];
+        for (let i = 0; i < subcircuitScope.Input.length; i++) {
+            const input = temp_map_inp[subcircuitScope.Input[i].layoutProperties.id][0];
+            if (temp_map_inp[input.layoutProperties.id][1]) { this.inputNodes.push(temp_map_inp[input.layoutProperties.id][1]); } else {
+                const a = new Node(input.layoutProperties.x, input.layoutProperties.y, 0, this, input.bitWidth);
+                a.layout_id = input.layoutProperties.id;
+                this.inputNodes.push(a);
+            }
+        }
+
+        const temp_map_out = {};
+        for (let i = 0; i < subcircuitScope.Output.length; i++) {
+            temp_map_out[subcircuitScope.Output[i].layoutProperties.id] = [subcircuitScope.Output[i], undefined];
+        }
+        for (let i = 0; i < this.outputNodes.length; i++) {
+            if (temp_map_out.hasOwnProperty(this.outputNodes[i].layout_id)) {
+                temp_map_out[this.outputNodes[i].layout_id][1] = this.outputNodes[i];
+            } else {
+                this.outputNodes[i].delete();
+                this.nodeList.clean(this.outputNodes[i]);
+            }
+        }
+
+        for (id in temp_map_out) {
+            if (temp_map_out[id][1]) {
+                if (temp_map_out[id][0].layoutProperties.x == temp_map_out[id][1].x && temp_map_out[id][0].layoutProperties.y == temp_map_out[id][1].y) { temp_map_out[id][1].bitWidth = temp_map_out[id][0].bitWidth; } else {
+                    temp_map_out[id][1].delete();
+                    this.nodeList.clean(temp_map_out[id][1]);
+                    temp_map_out[id][1] = new Node(temp_map_out[id][0].layoutProperties.x, temp_map_out[id][0].layoutProperties.y, 1, this, temp_map_out[id][0].bitWidth);
+                    temp_map_out[id][1].layout_id = id;
+                }
+            }
+        }
+
+        this.outputNodes = [];
+        for (let i = 0; i < subcircuitScope.Output.length; i++) {
+            const output = temp_map_out[subcircuitScope.Output[i].layoutProperties.id][0];
+            if (temp_map_out[output.layoutProperties.id][1]) { this.outputNodes.push(temp_map_out[output.layoutProperties.id][1]); } else {
+                const a = new Node(output.layoutProperties.x, output.layoutProperties.y, 1, this, output.bitWidth);
+                a.layout_id = output.layoutProperties.id;
+                this.outputNodes.push(a);
+            }
+        }
+
+        if (subcircuitScope.timeStamp > this.lastUpdated) {
+            this.reBuildCircuit();
+        }
+
+        this.localScope.reset();
+
+        this.makeConnections();
+    }
+
+    click() {
+        // this.id=prompt();
+    }
+
+    /**
+     * adds all local scope inputs to the global scope simulation queue
+     */
+    addInputs() {
+        for (let i = 0; i < subCircuitInputList.length; i++) {
+            for (let j = 0; j < this.localScope[subCircuitInputList[i]].length; j++) { simulationArea.simulationQueue.add(this.localScope[subCircuitInputList[i]][j], 0); }
+        }
+        for (let j = 0; j < this.localScope.SubCircuit.length; j++) { this.localScope.SubCircuit[j].addInputs(); }
+    }
+
+    isResolvable() {
+        if (CircuitElement.prototype.isResolvable.call(this)) { return true; }
+        return false;
+    }
+
+    dblclick() {
+        switchCircuit(this.id);
+    }
+
+    saveObject() {
+        const data = {
+            x: this.x,
+            y: this.y,
+            id: this.id,
+            inputNodes: this.inputNodes.map(findNode),
+            outputNodes: this.outputNodes.map(findNode),
+            version: this.version,
+        };
+        return data;
+    }
+
+    /**
+     * not used because for now everythiing is added onto the globalscope
+     */
+    resolve() {
+        // deprecated
+        // let subcircuitScope = this.localScope;//scopeList[this.id];
+        // // this.scope.pending.clean(this); // To remove any pending instances
+        // // return;
+        //
+        // for (i = 0; i < subcircuitScope.Input.length; i++) {
+        //     subcircuitScope.Input[i].state = this.inputNodes[i].value;
+        // }
+        //
+        // for (i = 0; i < subcircuitScope.Input.length; i++) {
+        //     simulationArea.simulationQueue.add(subcircuitScope.Input[i]);
+        // }
+        // play(subcircuitScope);
+        //
+        // for (i = 0; i < subcircuitScope.Output.length; i++) {
+        //     this.outputNodes[i].value = subcircuitScope.Output[i].inp1.value;
+        // }
+        // for (i = 0; i < subcircuitScope.Output.length; i++) {
+        //     this.scope.stack.push(this.outputNodes[i]);
+        // }
+
+    }
+
+    isResolvable() {
+        return false;
+    }
+
+    verilogName() {
+        return verilog.fixName(scopeList[this.id].name);
+    }
+
+    /**
+     * determines where to show label
+     */
+    determine_label(x, y) {
+        if (x == 0) return ['left', 5, 5];
+        if (x == scopeList[this.id].layout.width) return ['right', -5, 5];
+        if (y == 0) return ['center', 0, 13];
+        return ['center', 0, -6];
+    }
+
+    customDraw() {
+        const subcircuitScope = scopeList[this.id];
+
+        const ctx = simulationArea.context;
+
+        ctx.lineWidth = globalScope.scale * 3;
+        ctx.strokeStyle = 'black'; // ("rgba(0,0,0,1)");
+        ctx.fillStyle = 'white';
+        const xx = this.x;
+        const yy = this.y;
+
+        ctx.beginPath();
+
+        ctx.textAlign = 'center';
+        ctx.fillStyle = 'black';
+        if (this.version == '1.0') { fillText(ctx, subcircuitScope.name, xx, yy - subcircuitScope.layout.height / 2 + 13, 11); } else if (this.version == '2.0') {
+            if (subcircuitScope.layout.titleEnabled) {
+                fillText(ctx, subcircuitScope.name, subcircuitScope.layout.title_x + xx, yy + subcircuitScope.layout.title_y, 11);
+            }
+        } else { console.log(this.version); }
+
+        for (let i = 0; i < subcircuitScope.Input.length; i++) {
+            if (!subcircuitScope.Input[i].label) continue;
+            const info = this.determine_label(this.inputNodes[i].x, this.inputNodes[i].y);
+            ctx.textAlign = info[0];
+            fillText(ctx, subcircuitScope.Input[i].label, this.inputNodes[i].x + info[1] + xx, yy + this.inputNodes[i].y + info[2], 12);
+        }
+
+        for (let i = 0; i < subcircuitScope.Output.length; i++) {
+            if (!subcircuitScope.Output[i].label) continue;
+            const info = this.determine_label(this.outputNodes[i].x, this.outputNodes[i].y);
+            ctx.textAlign = info[0];
+            fillText(ctx, subcircuitScope.Output[i].label, this.outputNodes[i].x + info[1] + xx, yy + this.outputNodes[i].y + info[2], 12);
+        }
+        ctx.fill();
+        // console.log("input",this.inputNodes)
+        // console.log("oput",this.outputNodes)
+        for (let i = 0; i < this.outputNodes.length; i++) { this.outputNodes[i].draw(); }
+        for (let i = 0; i < this.inputNodes.length; i++) { this.inputNodes[i].draw(); }
+    }
+}
+
+SubCircuit.prototype.centerElement = true; // To center subcircuit when new
diff --git a/src/testbench.js b/src/testbench.js
new file mode 100644
index 0000000..eb8f4b8
--- /dev/null
+++ b/src/testbench.js
@@ -0,0 +1,3 @@
+/**
+ * this file can contain any specific function for testbench modules
+ */
diff --git a/src/testbench/ForceGate.js b/src/testbench/ForceGate.js
new file mode 100755
index 0000000..c16702e
--- /dev/null
+++ b/src/testbench/ForceGate.js
@@ -0,0 +1,88 @@
+import CircuitElement from '../circuitElement';
+import Node, { findNode } from '../node';
+import simulationArea from '../simulationArea';
+import { fillText4 } from '../canvasApi';
+/**
+ * @class
+ * ForceGate
+ * @extends CircuitElement
+ * @param {number} x - x coordinate of element.
+ * @param {number} y - y coordinate of element.
+ * @param {Scope=} scope - Cirucit on which element is drawn
+ * @param {string=} dir - direction of element
+ * @param {number=} bitWidth - bit width per node.
+ * @category testbench
+ */
+export default class ForceGate extends CircuitElement {
+    constructor(x, y, scope = globalScope, dir = 'RIGHT', bitWidth = 1) {
+        super(x, y, scope, dir, bitWidth);
+        this.setDimensions(20, 10);
+        this.objectType = 'ForceGate';
+        this.scope.ForceGate.push(this);
+        this.inp1 = new Node(-20, 0, 0, this);
+        this.inp2 = new Node(0, 0, 0, this);
+        this.output1 = new Node(20, 0, 1, this);
+    }
+
+    /**
+     * @memberof ForceGate
+     * Checks if the element is resolvable
+     * @return {boolean}
+     */
+    isResolvable() {
+        return (this.inp1.value !== undefined || this.inp2.value !== undefined);
+    }
+
+    /**
+     * @memberof ForceGate
+     * fn to create save Json Data of object
+     * @return {JSON}
+     */
+    customSave() {
+        const data = {
+            constructorParamaters: [this.direction, this.bitWidth],
+            nodes: {
+                output1: findNode(this.output1),
+                inp1: findNode(this.inp1),
+                inp2: findNode(this.inp2),
+            },
+        };
+        return data;
+    }
+
+    /**
+     * @memberof ForceGate
+     * resolve output values based on inputData
+     */
+    resolve() {
+        if (this.inp2.value !== undefined) { this.output1.value = this.inp2.value; } else { this.output1.value = this.inp1.value; }
+        simulationArea.simulationQueue.add(this.output1);
+    }
+
+    /**
+     * @memberof ForceGate
+     * function to draw element
+     */
+    customDraw() {
+        const ctx = simulationArea.context;
+        const xx = this.x;
+        const yy = this.y;
+
+        ctx.beginPath();
+        ctx.fillStyle = 'Black';
+        ctx.textAlign = 'center';
+
+        fillText4(ctx, 'I', -10, 0, xx, yy, this.direction, 10);
+        fillText4(ctx, 'O', 10, 0, xx, yy, this.direction, 10);
+        ctx.fill();
+    }
+}
+
+/**
+ * @memberof ForceGate
+ * Help Tip
+ * @type {string}
+ * @category testbench
+ */
+ForceGate.prototype.tooltipText = 'Force Gate ToolTip : ForceGate Selected.';
+ForceGate.prototype.objectType = 'ForceGate';
diff --git a/src/testbench/testbenchInput.js b/src/testbench/testbenchInput.js
new file mode 100644
index 0000000..77d3830
--- /dev/null
+++ b/src/testbench/testbenchInput.js
@@ -0,0 +1,291 @@
+import CircuitElement from '../circuitElement';
+import simulationArea from '../simulationArea';
+import {
+    correctWidth, lineTo, moveTo, fillText,
+} from '../canvasApi';
+import Node, { findNode } from '../node';
+import plotArea from '../plotArea';
+
+
+/**
+ * TestBench Input has a node for it's clock input.
+ * this.testData - the data of all test cases.
+ * Every testbench has a uniq identifier.
+ * @class
+ * @extends CircuitElement
+ * @param {number} x - the x coord of TB
+ * @param {number} y - the y coord of TB
+ * @param {Scope=} scope - the circuit on which TB is drawn
+ * @param {string} dir - direction
+ * @param {string} identifier - id to identify tests
+ * @param {JSON=} testData - input, output and number of tests
+ * @category testbench
+ */
+export default class TB_Input extends CircuitElement {
+    constructor(x, y, scope = globalScope, dir = 'RIGHT', identifier, testData) {
+        super(x, y, scope, dir, 1);
+        this.objectType = 'TB_Input';
+        this.scope.TB_Input.push(this);
+        this.setIdentifier(identifier || 'Test1');
+        this.testData = testData || { inputs: [], outputs: [], n: 0 };
+        this.clockInp = new Node(0, 20, 0, this, 1);
+        this.outputs = [];
+        this.running = false; // if tests are undergo
+        this.iteration = 0;
+        this.setup();
+    }
+
+    /**
+     * @memberof TB_Input
+     * Takes iput when double clicked. For help on generation of input refer to TB_Input.helplink
+     */
+    dblclick() {
+        this.testData = JSON.parse(prompt('Enter TestBench Json'));
+        this.setup();
+    }
+
+    setDimensions() {
+        this.leftDimensionX = 0;
+        this.rightDimensionX = 120;
+
+        this.upDimensionY = 0;
+        this.downDimensionY = 40 + this.testData.inputs.length * 20;
+    }
+
+    /**
+     * @memberof TB_Input
+     * setups the Test by parsing through the testbench data.
+     */
+    setup() {
+        this.iteration = 0;
+        this.running = false;
+        this.nodeList.clean(this.clockInp);
+        this.deleteNodes();
+        this.nodeList = [];
+        this.nodeList.push(this.clockInp);
+        this.testData = this.testData || { inputs: [], outputs: [], n: 0 };
+        // this.clockInp = new Node(0,20, 0,this,1);
+
+        this.setDimensions();
+
+        this.prevClockState = 0;
+        this.outputs = [];
+
+        for (let i = 0; i < this.testData.inputs.length; i++) {
+            this.outputs.push(new Node(this.rightDimensionX, 30 + i * 20, 1, this, this.testData.inputs[i].bitWidth, this.testData.inputs[i].label));
+        }
+
+        for (let i = 0; i < this.scope.TB_Output.length; i++) {
+            if (this.scope.TB_Output[i].identifier == this.identifier) { this.scope.TB_Output[i].setup(); }
+        }
+    }
+
+    /**
+     * @memberof TB_Input
+     * toggles state by simply negating this.running so that test cases stop
+     */
+    toggleState() {
+        this.running = !this.running;
+        this.prevClockState = 0;
+    }
+
+    /**
+     * @memberof TB_Input
+     * function to run from test case 0 again
+     */
+    resetIterations() {
+        this.iteration = 0;
+        this.prevClockState = 0;
+    }
+
+    /**
+     * @memberof TB_Input
+     * function to resolve the testbench input adds
+     */
+    resolve() {
+        if (this.clockInp.value != this.prevClockState) {
+            this.prevClockState = this.clockInp.value;
+            if (this.clockInp.value == 1 && this.running) {
+                if (this.iteration < this.testData.n) {
+                    this.iteration++;
+                } else {
+                    this.running = false;
+                }
+            }
+        }
+        if (this.running && this.iteration) {
+            for (let i = 0; i < this.testData.inputs.length; i++) {
+                console.log(this.testData.inputs[i].values[this.iteration - 1]);
+                this.outputs[i].value = parseInt(this.testData.inputs[i].values[this.iteration - 1], 2);
+                simulationArea.simulationQueue.add(this.outputs[i]);
+            }
+        }
+    }
+
+    /**
+     * @memberof TB_Input
+     * was a function to plot values incase any flag used as output to this element
+     */
+    setPlotValue() {
+        const time = plotArea.stopWatch.ElapsedMilliseconds;
+        if (this.plotValues.length && this.plotValues[this.plotValues.length - 1][0] == time) { this.plotValues.pop(); }
+
+        if (this.plotValues.length == 0) {
+            this.plotValues.push([time, this.inp1.value]);
+            return;
+        }
+
+        if (this.plotValues[this.plotValues.length - 1][1] == this.inp1.value) { return; }
+        this.plotValues.push([time, this.inp1.value]);
+    }
+
+    customSave() {
+        const data = {
+            constructorParamaters: [this.direction, this.identifier, this.testData],
+            nodes: {
+                outputs: this.outputs.map(findNode),
+                clockInp: findNode(this.clockInp),
+            },
+        };
+        return data;
+    }
+
+    /**
+     * This function is used to set a uniq identifier to every testbench
+     * @memberof TB_Input
+     */
+    setIdentifier(id = '') {
+        if (id.length == 0 || id == this.identifier) return;
+
+
+        for (let i = 0; i < this.scope.TB_Output.length; i++) {
+            this.scope.TB_Output[i].checkPairing();
+        }
+
+
+        for (let i = 0; i < this.scope.TB_Output.length; i++) {
+            if (this.scope.TB_Output[i].identifier == this.identifier) { this.scope.TB_Output[i].identifier = id; }
+        }
+
+        this.identifier = id;
+
+        this.checkPaired();
+    }
+
+    /**
+     * Check if there is a output tester paired with input TB.
+     * @memberof TB_Input
+     */
+    checkPaired() {
+        for (let i = 0; i < this.scope.TB_Output.length; i++) {
+            if (this.scope.TB_Output[i].identifier == this.identifier) { this.scope.TB_Output[i].checkPairing(); }
+        }
+    }
+
+    delete() {
+        super.delete();
+        this.checkPaired();
+    }
+
+    customDraw() {
+        const ctx = simulationArea.context;
+        ctx.beginPath();
+        ctx.strokeStyle = 'grey';
+        ctx.fillStyle = '#fcfcfc';
+        ctx.lineWidth = correctWidth(1);
+        let xx = this.x;
+        let yy = this.y;
+
+        let xRotate = 0;
+        let yRotate = 0;
+        if (this.direction == 'LEFT') {
+            xRotate = 0;
+            yRotate = 0;
+        } else if (this.direction == 'RIGHT') {
+            xRotate = 120 - this.xSize;
+            yRotate = 0;
+        } else if (this.direction == 'UP') {
+            xRotate = 60 - this.xSize / 2;
+            yRotate = -20;
+        } else {
+            xRotate = 60 - this.xSize / 2;
+            yRotate = 20;
+        }
+
+        ctx.beginPath();
+        ctx.textAlign = 'center';
+        ctx.fillStyle = 'black';
+        fillText(ctx, `${this.identifier} [INPUT]`, xx + this.rightDimensionX / 2, yy + 14, 10);
+
+        fillText(ctx, ['Not Running', 'Running'][+this.running], xx + this.rightDimensionX / 2, yy + 14 + 10 + 20 * this.testData.inputs.length, 10);
+        fillText(ctx, `Case: ${this.iteration}`, xx + this.rightDimensionX / 2, yy + 14 + 20 + 20 * this.testData.inputs.length, 10);
+        // fillText(ctx, "Case: "+this.iteration, xx  , yy + 20+14, 10);
+        ctx.fill();
+
+
+        ctx.font = '30px Georgia';
+        ctx.textAlign = 'right';
+        ctx.fillStyle = 'blue';
+        ctx.beginPath();
+        for (let i = 0; i < this.testData.inputs.length; i++) {
+            // ctx.beginPath();
+            fillText(ctx, this.testData.inputs[i].label, this.rightDimensionX - 5 + xx, 30 + i * 20 + yy + 4, 10);
+        }
+
+        ctx.fill();
+        if (this.running && this.iteration) {
+            ctx.font = '30px Georgia';
+            ctx.textAlign = 'left';
+            ctx.fillStyle = 'blue';
+            ctx.beginPath();
+            for (let i = 0; i < this.testData.inputs.length; i++) {
+                fillText(ctx, this.testData.inputs[i].values[this.iteration - 1], 5 + xx, 30 + i * 20 + yy + 4, 10);
+            }
+
+            ctx.fill();
+        }
+
+        ctx.beginPath();
+        ctx.strokeStyle = ('rgba(0,0,0,1)');
+        ctx.lineWidth = correctWidth(3);
+        xx = this.x;
+        yy = this.y;
+        // rect(ctx, xx - 20, yy - 20, 40, 40);
+        moveTo(ctx, 0, 15, xx, yy, this.direction);
+        lineTo(ctx, 5, 20, xx, yy, this.direction);
+        lineTo(ctx, 0, 25, xx, yy, this.direction);
+
+        ctx.stroke();
+    }
+}
+
+TB_Input.prototype.tooltipText = 'Test Bench Input Selected';
+
+/**
+ * @memberof TB_Input
+ * different algo for drawing center elements
+ * @category testbench
+ */
+TB_Input.prototype.centerElement = true;
+
+TB_Input.prototype.helplink = 'https://docs.circuitverse.org/#/testbench';
+
+TB_Input.prototype.mutableProperties = {
+    identifier: {
+        name: 'TestBench Name:',
+        type: 'text',
+        maxlength: '10',
+        func: 'setIdentifier',
+    },
+    iteration: {
+        name: 'Reset Iterations',
+        type: 'button',
+        func: 'resetIterations',
+    },
+    toggleState: {
+        name: 'Toggle State',
+        type: 'button',
+        func: 'toggleState',
+    },
+};
+TB_Input.prototype.objectType = 'TB_Input';
diff --git a/src/testbench/testbenchOutput.js b/src/testbench/testbenchOutput.js
new file mode 100644
index 0000000..408d74b
--- /dev/null
+++ b/src/testbench/testbenchOutput.js
@@ -0,0 +1,232 @@
+import CircuitElement from '../circuitElement';
+import simulationArea from '../simulationArea';
+import { correctWidth, fillText } from '../canvasApi';
+import Node, { findNode } from '../node';
+
+// helper function to convert decimal to binary
+function dec2bin(dec, bitWidth = undefined) {
+    // only for positive nos
+    const bin = (dec).toString(2);
+    if (bitWidth == undefined) return bin;
+    return '0'.repeat(bitWidth - bin.length) + bin;
+}
+
+/**
+ * TestBench Output has a node for it's  input which is
+ * compared to desired output according tp testData of
+ * input TB Every TB_output has a uniq identifier matching
+ * it's TB_Input
+ * @class
+ * @extends CircuitElement
+ * @param {number} x - the x coord of TB
+ * @param {number} y - the y coord of TB
+ * @param {Scope=} scope - the circuit on which TB is drawn
+ * @param {string} dir - direction
+ * @param {string} identifier - id to identify tests
+ * @category testbench
+ */
+
+export default class TB_Output extends CircuitElement {
+    constructor(x, y, scope = globalScope, dir = 'RIGHT', identifier) {
+        super(x, y, scope, dir, 1);
+        // this.setDimensions(60,20);
+        this.objectType = 'TB_Output';
+        this.scope.TB_Output.push(this);
+
+        // this.xSize=10;
+
+        // this.plotValues = [];
+        // this.inp1 = new Node(0, 0, 0, this);
+        // this.inp1 = new Node(100, 100, 0, this);
+        this.setIdentifier(identifier || 'Test1');
+        this.inputs = [];
+        this.testBenchInput = undefined;
+
+        this.setup();
+    }
+
+    // TB_Output.prototype.dblclick=function(){
+    //     this.testData=JSON.parse(prompt("Enter TestBench Json"));
+    //     this.setup();
+    // }
+    setDimensions() {
+        this.leftDimensionX = 0;
+        this.rightDimensionX = 160;
+        this.upDimensionY = 0;
+        this.downDimensionY = 40;
+        if (this.testBenchInput) { this.downDimensionY = 40 + this.testBenchInput.testData.outputs.length * 20; }
+    }
+
+    setup() {
+        // this.iteration = 0;
+        // this.running = false;
+        // this.nodeList.clean(this.clockInp);
+        this.deleteNodes(); // deletes all nodes whenever setup is called.
+        this.nodeList = [];
+
+        this.inputs = [];
+        this.testBenchInput = undefined;
+        // find it's pair input
+        for (let i = 0; i < this.scope.TB_Input.length; i++) {
+            if (this.scope.TB_Input[i].identifier == this.identifier) {
+                this.testBenchInput = this.scope.TB_Input[i];
+                break;
+            }
+        }
+
+        this.setDimensions();
+
+        if (this.testBenchInput) {
+            for (let i = 0; i < this.testBenchInput.testData.outputs.length; i++) {
+                this.inputs.push(new Node(0, 30 + i * 20, NODE_INPUT, this, this.testBenchInput.testData.outputs[i].bitWidth, this.testBenchInput.testData.outputs[i].label));
+            }
+        }
+    }
+
+    customSave() {
+        const data = {
+            constructorParamaters: [this.direction, this.identifier],
+            nodes: {
+                inputs: this.inputs.map(findNode),
+            },
+        };
+        return data;
+    }
+
+    /**
+     * @memberof TB_output
+     * set identifier for this testbench
+     */
+    setIdentifier(id = '') {
+        if (id.length == 0 || id == this.identifier) return;
+        this.identifier = id;
+        this.setup();
+    }
+
+    /**
+     * @memberof TB_output
+     * Function to check if the input for this TB exist
+     */
+    checkPairing(id = '') {
+        if (this.testBenchInput) {
+            if (this.testBenchInput.deleted || this.testBenchInput.identifier != this.identifier) {
+                this.setup();
+            }
+        } else {
+            this.setup();
+        }
+    }
+
+    customDraw() {
+        const ctx = simulationArea.context;
+        ctx.beginPath();
+        ctx.strokeStyle = 'grey';
+        ctx.fillStyle = '#fcfcfc';
+        ctx.lineWidth = correctWidth(1);
+        const xx = this.x;
+        const yy = this.y;
+
+        let xRotate = 0;
+        let yRotate = 0;
+        if (this.direction == 'LEFT') {
+            xRotate = 0;
+            yRotate = 0;
+        } else if (this.direction == 'RIGHT') {
+            xRotate = 120 - this.xSize;
+            yRotate = 0;
+        } else if (this.direction == 'UP') {
+            xRotate = 60 - this.xSize / 2;
+            yRotate = -20;
+        } else {
+            xRotate = 60 - this.xSize / 2;
+            yRotate = 20;
+        }
+
+        // rect2(ctx, -120+xRotate+this.xSize, -20+yRotate, 120-this.xSize, 40, xx, yy, "RIGHT");
+        // if ((this.hover && !simulationArea.shiftDown) || simulationArea.lastSelected == this || simulationArea.multipleObjectSelections.contains(this))
+        //     ctx.fillStyle = "rgba(255, 255, 32,0.8)";
+        // ctx.fill();
+        // ctx.stroke();
+        //
+        // ctx.font = "14px Georgia";
+        // this.xOff = ctx.measureText(this.identifier).width;
+        // ctx.beginPath();
+        // rect2(ctx, -105+xRotate+this.xSize, -11+yRotate,this.xOff + 10, 23, xx, yy, "RIGHT");
+        // ctx.fillStyle = "#eee"
+        // ctx.strokeStyle = "#ccc";
+        // ctx.fill();
+        // ctx.stroke();
+        //
+
+
+        ctx.beginPath();
+        ctx.textAlign = 'center';
+        ctx.fillStyle = 'black';
+        fillText(ctx, `${this.identifier} [OUTPUT]`, xx + this.rightDimensionX / 2, yy + 14, 10);
+
+        // fillText(ctx, ["Not Running","Running"][+this.running], xx + this.rightDimensionX/ 2 , yy + 14 + 10 + 20*this.testData.inputs.length, 10);
+        // fillText(ctx, "Case: "+(this.iteration), xx + this.rightDimensionX/ 2 , yy + 14 + 20 + 20*this.testData.inputs.length, 10);
+        fillText(ctx, ['Unpaired', 'Paired'][+(this.testBenchInput != undefined)], xx + this.rightDimensionX / 2, yy + this.downDimensionY - 5, 10);
+        ctx.fill();
+
+
+        if (this.testBenchInput) {
+            ctx.beginPath();
+            ctx.font = '30px Georgia';
+            ctx.textAlign = 'left';
+            ctx.fillStyle = 'blue';
+            for (let i = 0; i < this.testBenchInput.testData.outputs.length; i++) {
+                // ctx.beginPath();
+                fillText(ctx, this.testBenchInput.testData.outputs[i].label, 5 + xx, 30 + i * 20 + yy + 4, 10);
+            }
+            ctx.fill();
+
+            if (this.testBenchInput.running && this.testBenchInput.iteration) {
+                ctx.beginPath();
+                ctx.font = '30px Georgia';
+                ctx.textAlign = 'right';
+                ctx.fillStyle = 'blue';
+                ctx.beginPath();
+                for (let i = 0; i < this.testBenchInput.testData.outputs.length; i++) {
+                    fillText(ctx, this.testBenchInput.testData.outputs[i].values[this.testBenchInput.iteration - 1], xx + this.rightDimensionX - 5, 30 + i * 20 + yy + 4, 10);
+                }
+
+                ctx.fill();
+            }
+
+            if (this.testBenchInput.running && this.testBenchInput.iteration) {
+                ctx.beginPath();
+                ctx.font = '30px Georgia';
+                ctx.textAlign = 'center';
+                ctx.fillStyle = 'blue';
+
+                for (let i = 0; i < this.testBenchInput.testData.outputs.length; i++) {
+                    if (this.inputs[i].value != undefined) {
+                        ctx.beginPath();
+                        if (this.testBenchInput.testData.outputs[i].values[this.testBenchInput.iteration - 1] == 'x' || parseInt(this.testBenchInput.testData.outputs[i].values[this.testBenchInput.iteration - 1], 2) == this.inputs[i].value) { ctx.fillStyle = 'green'; } else { ctx.fillStyle = 'red'; }
+                        fillText(ctx, dec2bin(this.inputs[i].value, this.inputs[i].bitWidth), xx + this.rightDimensionX / 2, 30 + i * 20 + yy + 4, 10);
+                        ctx.fill();
+                    } else {
+                        ctx.beginPath();
+                        if (this.testBenchInput.testData.outputs[i].values[this.testBenchInput.iteration - 1] == 'x') { ctx.fillStyle = 'green'; } else { ctx.fillStyle = 'red'; }
+                        fillText(ctx, 'X', xx + this.rightDimensionX / 2, 30 + i * 20 + yy + 4, 10);
+                        ctx.fill();
+                    }
+                }
+            }
+        }
+    }
+}
+
+TB_Output.prototype.tooltipText = 'Test Bench Output Selected';
+TB_Output.prototype.helplink = 'https://docs.circuitverse.org/#/testbench';
+TB_Output.prototype.centerElement = true;
+TB_Output.prototype.mutableProperties = {
+    identifier: {
+        name: 'TestBench Name:',
+        type: 'text',
+        maxlength: '10',
+        func: 'setIdentifier',
+    },
+};
+TB_Output.prototype.objectType = 'TB_Output';
diff --git a/src/utils.js b/src/utils.js
index 138da3d..76054e7 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -1,103 +1,82 @@
-import { Scope } from "./circuit";
-import { dots } from "./canvasApi";
-import { showProperties } from "./ux";
-
-window.scopeList = {}
-window.globalScope = undefined
-window.unit = 10; // size of each division/ not used everywhere, to be deprecated
-window.uniqueIdCounter = 10; // size of each division/ not used everywhere, to be deprecated
-window.embed = false
-window.wireToBeChecked = 0; // when node disconnects from another node
-window.willBeUpdated = false; // scheduleUpdate() will be called if true
-window.objectSelection = false; // Flag for object selection
-window.errorDetected = false; // Flag for error detection
-
-window.prevErrorMessage = undefined; // Global variable for error messages
-window.prevShowMessage = undefined; // Global variable for error messages
-
-window.updatePosition = true; // Flag for updating position
-window.updateSimulation = true; // Flag for updating simulation
-window.updateCanvas = true; // Flag for rendering
-
-window.gridUpdate = true; // Flag for updating grid
-window.updateSubcircuit = true; // Flag for updating subCircuits
-
-window.loading = false; // Flag - all assets are loaded
-
-window.DPR = 1; // devicePixelRatio, 2 for retina displays, 1 for low resolution displays
-
-window.projectSaved = true; // Flag for project saved or not
-window.canvasMessageData = undefined; //  Globally set in draw fn ()
+import simulationArea from './simulationArea';
+import {
+    scheduleUpdate, play, updateCanvasSet, errorDetectedSet, errorDetectedGet,
+} from './engine';
 
+window.globalScope = undefined;
 window.lightMode = false; // To be deprecated
+window.projectId = undefined;
+window.id = undefined;
+window.loading = false; // Flag - all assets are loaded
 
-window.layoutMode = false; // Flag for mode
-
-window.forceResetNodes = true; // FLag to reset all Nodes
-
-
+let prevErrorMessage; // Global variable for error messages
+let prevShowMessage; // Global variable for error messages
 export function generateId() {
-    var id = "";
-    var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+    let id = '';
+    const possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
 
-    for (var i = 0; i < 20; i++)
-        id += possible.charAt(Math.floor(Math.random() * possible.length));
+    for (let i = 0; i < 20; i++) { id += possible.charAt(Math.floor(Math.random() * possible.length)); }
 
     return id;
 }
 
-export function newCircuit(name, id) {
-    name = name || prompt("Enter circuit name:");
-    name = stripTags(name);
-    if (!name) return;
-    const scope = new Scope(name);
-    if (id) scope.id = id;
-    scopeList[scope.id] = scope;
-    window.globalScope = scope;
-
-    $('.circuits').removeClass("current");
-    $('#tabsBar').append("<div class='circuits toolbarButton current' id='" + scope.id + "'>" + name + "</div>");
-    $('.circuits').click(function () {
-        switchCircuit(this.id)
-    });
-    if (!embed) {
-        showProperties(scope.root);
-    }
-
-    dots(true, false);
-
-    return scope;
-}
-
 // To strip tags from input
-export function stripTags(string = "") {
-    return string.replace(/(<([^>]+)>)/ig, '').trim();
+export function stripTags(string = '') {
+    console.log(string)
+    return string.toString().replace(/(<([^>]+)>)/ig, '').trim();
 }
 
 
 export function clockTick() {
     if (!simulationArea.clockEnabled) return;
-    if (errorDetected) return;
-    updateCanvas = true;
+    if (errorDetectedGet()) return;
+    updateCanvasSet(true);
     globalScope.clockTick();
     play();
     scheduleUpdate(0, 20);
+}
 
+/**
+ * Helper function to show error
+ * @param {string} error -The error to be shown
+ * @category utils
+ */
+export function showError(error) {
+    errorDetectedSet(true);
+    // if error ha been shown return
+    if (error === prevErrorMessage) return;
+    prevErrorMessage = error;
+    const id = Math.floor(Math.random() * 10000);
+    $('#MessageDiv').append(`<div class='alert alert-danger' role='alert' id='${id}'> ${error}</div>`);
+    setTimeout(() => {
+        prevErrorMessage = undefined;
+        $(`#${id}`).fadeOut();
+    }, 1500);
 }
+
 // Helper function to show message
 export function showMessage(mes) {
-    if (mes == prevShowMessage) return;
-    prevShowMessage = mes
-    var id = Math.floor(Math.random() * 10000);
-    $('#MessageDiv').append("<div class='alert alert-success' role='alert' id='" + id + "'> " + mes + "</div>");
-    setTimeout(function () {
+    if (mes === prevShowMessage) return;
+    prevShowMessage = mes;
+    const id = Math.floor(Math.random() * 10000);
+    $('#MessageDiv').append(`<div class='alert alert-success' role='alert' id='${id}'> ${mes}</div>`);
+    setTimeout(() => {
         prevShowMessage = undefined;
-        $('#' + id).fadeOut()
+        $(`#${id}`).fadeOut();
     }, 2500);
 }
 
 export function distance(x1, y1, x2, y2) {
-    return Math.sqrt(Math.pow((x2 - x1), 2) + Math.pow((y2 - y1), 2));
+    return Math.sqrt((x2 - x1) ** 2) + ((y2 - y1) ** 2);
 }
 
-
+/**
+ * Helper function to return unique list
+ * @param {Array} a - any array
+ * @category utils
+ */
+export function uniq(a) {
+    const seen = {};
+    const tmp = a.filter((item) => (seen.hasOwnProperty(item) ? false : (seen[item] = true)));
+    return tmp;
+}
diff --git a/src/ux.js b/src/ux.js
index c186305..13ea0ca 100644
--- a/src/ux.js
+++ b/src/ux.js
@@ -1,23 +1,51 @@
-// import { AndGate } from "./module";
-// var Turbolinks = require("turbolinks");
-// Turbolinks.start();
-import { width } from "./circuit"
-import { scheduleUpdate } from "./engine"
-import { simulationArea } from "./simulationArea";
-// import { moduleProperty } from "./module"
-window.smartDropXX = 50;
-window.smartDropYY = 80;
-
-// Object stores the position of context menu
-var ctxPos = {
+/* eslint-disable import/no-cycle */
+/* eslint-disable guard-for-in */
+/* eslint-disable no-restricted-syntax */
+/* eslint-disable no-restricted-syntax */
+/* eslint-disable guard-for-in */
+import { layoutModeGet } from './layoutMode';
+import {
+    scheduleUpdate, wireToBeCheckedSet, updateCanvasSet, update, updateSimulationSet,
+} from './engine';
+import simulationArea from './simulationArea';
+import logixFunction from './data';
+import { newCircuit, circuitProperty } from './circuit';
+import modules from './modules';
+import { updateRestrictedElementsInScope } from './restrictedElementDiv';
+import { paste } from './events';
+
+export const uxvar = {
+    smartDropXX: 50,
+    smartDropYY: 80,
+};
+/**
+ * @type {number} - Is used to calculate the position where an element from sidebar is dropped
+ * @category ux
+ */
+uxvar.smartDropXX = 50;
+
+/**
+ * @type {number} - Is used to calculate the position where an element from sidebar is dropped
+ * @category ux
+ */
+uxvar.smartDropYY = 80;
+
+/**
+ * @type {Object} - Object stores the position of context menu;
+ * @category ux
+ */
+const ctxPos = {
     x: 0,
     y: 0,
     visible: false,
 };
 
-// Function hides the context menu
+/**
+ * Function hides the context menu
+ * @category ux
+ */
 function hideContextMenu() {
-    var el = document.getElementById('contextMenu');
+    const el = document.getElementById('contextMenu');
     el.style = 'opacity:0;';
     setTimeout(() => {
         el.style = 'visibility:hidden;';
@@ -25,9 +53,12 @@ function hideContextMenu() {
     }, 200); // Hide after 2 sec
 }
 
-// Function displays context menu
+/**
+ * Function displays context menu
+ * @category ux
+ */
 function showContextMenu() {
-    if (layoutMode) return false; // Hide context menu when it is in Layout Mode
+    if (layoutModeGet()) return false; // Hide context menu when it is in Layout Mode
     $('#contextMenu').css({
         visibility: 'visible',
         opacity: 1,
@@ -38,11 +69,13 @@ function showContextMenu() {
     return false;
 }
 
-// Function is called when context item is clicked
-// eslint-disable-next-line no-unused-vars
+/**
+ * Function is called when context item is clicked
+ * @param {number} id - id of the optoin selected
+ * @category ux
+ */
 function menuItemClicked(id) {
     hideContextMenu();
-
     if (id === 0) {
         document.execCommand('copy');
     } else if (id === 1) {
@@ -51,21 +84,27 @@ function menuItemClicked(id) {
         // document.execCommand('paste'); it is restricted to sove this problem we use dataPasted variable
         paste(localStorage.getItem('clipboardData'));
     } else if (id === 3) {
-        delete_selected();
+        deleteSelected();
     } else if (id === 4) {
         undo();
         undo();
     } else if (id === 5) {
         newCircuit();
     } else if (id === 6) {
-        createSubCircuitPrompt();
+        logixFunction.createSubCircuitPrompt();
     } else if (id === 7) {
         globalScope.centerFocus(false);
     }
 }
+window.menuItemClicked = menuItemClicked;
 
+/**
+ * adds some UI elements to side bar and
+ * menu also attaches listeners to sidebar
+ * @category ux
+ */
 export function setupUI() {
-    var ctxEl = document.getElementById('contextMenu');
+    const ctxEl = document.getElementById('contextMenu');
     document.addEventListener('mousedown', (e) => {
         // Check if mouse is not inside the context menu and menu is visible
         if (!((e.clientX >= ctxPos.x && e.clientX <= ctxPos.x + ctxEl.offsetWidth)
@@ -80,14 +119,14 @@ export function setupUI() {
     });
     document.getElementById('canvasArea').oncontextmenu = showContextMenu;
 
-    $("#sideBar").resizable({
+    $('#sideBar').resizable({
         handles: 'e',
         // minWidth:270,
     });
-    $("#menu").accordion({
+    $('#menu').accordion({
         collapsible: true,
         active: false,
-        heightStyle: "content"
+        heightStyle: 'content',
     });
     // $( "#plot" ).resizable({
     // handles: 'n',
@@ -95,37 +134,36 @@ export function setupUI() {
     // });
 
     $('.logixModules').mousedown(function () {
-        //////console.log(smartDropXX,smartDropYY);
+        // ////console.log(uxvar.smartDropXX,uxvar.smartDropYY);
         if (simulationArea.lastSelected && simulationArea.lastSelected.newElement) simulationArea.lastSelected.delete();
-        console.log(this.id)
-        var obj = new window[this.id](); //(simulationArea.mouseX,simulationArea.mouseY);
+        const obj = new modules[this.id](); // (simulationArea.mouseX,simulationArea.mouseY);
+        // obj = new modules[this.id](); // (simulationArea.mouseX,simulationArea.mouseY);
         simulationArea.lastSelected = obj;
         // simulationArea.lastSelected=obj;
         // simulationArea.mouseDown=true;
-        smartDropXX += 70;
-        if (smartDropXX / globalScope.scale > width) {
-            smartDropXX = 50;
-            smartDropYY += 80;
+        uxvar.smartDropXX += 70;
+        if (uxvar.smartDropXX / globalScope.scale > width) {
+            uxvar.smartDropXX = 50;
+            uxvar.smartDropYY += 80;
         }
     });
     $('.logixButton').click(function () {
-        logixFundtion[this.id]();
+        logixFunction[this.id]();
     });
-    // var dummyCounter=0;
-
+    // let dummyCounter=0;
 
-    // $('.logixModules').hover(function () {
-    //     // Tooltip can be statically defined in the prototype.
-    //     var tooltipText = window[this.id].prototype.tooltipText;
-    //     if (!tooltipText) return;
-    //     $("#Help").addClass("show");
-    //     $("#Help").empty();
-    //     ////console.log("SHOWING")
-    //     $("#Help").append(tooltipText);
-    // }); // code goes in document ready fn only
-    $('.logixModules').mouseleave(function () {
-        $("#Help").removeClass("show");
 
+    $('.logixModules').hover(function () {
+        // Tooltip can be statically defined in the prototype.
+        const { tooltipText } = modules[this.id].prototype;
+        if (!tooltipText) return;
+        $('#Help').addClass('show');
+        $('#Help').empty();
+        // //console.log("SHOWING")
+        $('#Help').append(tooltipText);
+    }); // code goes in document ready fn only
+    $('.logixModules').mouseleave(() => {
+        $('#Help').removeClass('show');
     }); // code goes in document ready fn only
 
 
@@ -136,152 +174,233 @@ export function setupUI() {
     //     Save();
     // });
     // $('#moduleProperty').draggable();
-
 }
 
+/**
+ * Keeps in check which property is being displayed
+ * @category ux
+ */
+let prevPropertyObj;
 
-window.prevPropertyObj = undefined;
+export function prevPropertyObjSet(param) {
+    prevPropertyObj = param;
+}
+
+export function prevPropertyObjGet() {
+    return prevPropertyObj;
+}
 
+/**
+ * show properties of an object.
+ * @param {CircuiElement} obj - the object whose properties we want to be shown in sidebar
+ * @category ux
+ */
 export function showProperties(obj) {
-    if (obj == prevPropertyObj) return;
+    // console.log(obj)
+    if (obj === prevPropertyObjGet()) return;
     hideProperties();
-
-    prevPropertyObj = obj;
-    if (simulationArea.lastSelected === undefined || simulationArea.lastSelected.objectType == "Wire" || simulationArea.lastSelected.objectType == "CircuitElement" || simulationArea.lastSelected.objectType == "Node") {
+    prevPropertyObjSet(obj);
+    if (simulationArea.lastSelected === undefined || ['Wire', 'CircuitElement', 'Node'].indexOf(simulationArea.lastSelected.objectType) !== -1) {
         $('#moduleProperty').show();
-        $('#moduleProperty-inner').append("<div id='moduleProperty-header'>" + "Project Properties" + "</div>");
-        $('#moduleProperty-inner').append("<p>Project : <input class='objectPropertyAttribute' type='text'  name='setProjectName'  value='" + (projectName || "Untitled") + "'></p>");
-        $('#moduleProperty-inner').append("<p>Circuit : <input class='objectPropertyAttribute' type='text'  name='changeCircuitName'  value='" + (globalScope.name || "Untitled") + "'></p>");
-        $('#moduleProperty-inner').append("<p>Clock Time : <input class='objectPropertyAttribute' min='50' type='number' style='width:100px' step='10' name='changeClockTime'  value='" + (simulationArea.timePeriod) + "'>ms</p>");
-        $('#moduleProperty-inner').append("<p>Clock Enabled : <label class='switch'> <input type='checkbox' " + ["", "checked"][simulationArea.clockEnabled + 0] + " class='objectPropertyAttributeChecked' name='changeClockEnable' > <span class='slider'></span> </label></p>");
-        $('#moduleProperty-inner').append("<p>Lite Mode : <label class='switch'> <input type='checkbox' " + ["", "checked"][lightMode + 0] + " class='objectPropertyAttributeChecked' name='changeLightMode' > <span class='slider'></span> </label></p>");
+        $('#moduleProperty-inner').append("<div id='moduleProperty-header'>" + 'Project Properties' + '</div>');
+        $('#moduleProperty-inner').append(`<p>Project : <input class='objectPropertyAttribute' type='text'  name='setProjectName'  value='${projectName || 'Untitled'}'></p>`);
+        $('#moduleProperty-inner').append(`<p>Circuit : <input class='objectPropertyAttribute' type='text'  name='changeCircuitName'  value='${globalScope.name || 'Untitled'}'></p>`);
+        $('#moduleProperty-inner').append(`<p>Clock Time : <input class='objectPropertyAttribute' min='50' type='number' style='width:100px' step='10' name='changeClockTime'  value='${simulationArea.timePeriod}'>ms</p>`);
+        $('#moduleProperty-inner').append(`<p>Clock Enabled : <label class='switch'> <input type='checkbox' ${['', 'checked'][simulationArea.clockEnabled + 0]} class='objectPropertyAttributeChecked' name='changeClockEnable' > <span class='slider'></span> </label></p>`);
+        $('#moduleProperty-inner').append(`<p>Lite Mode : <label class='switch'> <input type='checkbox' ${['', 'checked'][lightMode + 0]} class='objectPropertyAttributeChecked' name='changeLightMode' > <span class='slider'></span> </label></p>`);
         // $('#moduleProperty-inner').append("<p>  ");
-        $('#moduleProperty-inner').append("<p><button type='button' class='objectPropertyAttributeChecked btn btn-danger btn-xs' name='deleteCurrentCircuit' >Delete Circuit</button>  <button type='button' class='objectPropertyAttributeChecked btn btn-primary btn-xs' name='toggleLayoutMode' >Edit layout</button> </p>");
+        $('#moduleProperty-inner').append("<p><button type='button' class='objectPropertyAttributeChecked btn btn-danger btn-xs' name='deleteCurrentCircuit' >Delete Circuit</button>  <button type='button' class='objectPropertyAttributeChecked btn btn-primary btn-xs' name='toggleLayoutMode' >Edit Layout</button> </p>");
     } else {
-        console.log("ls:",simulationArea.lastSelected)
         $('#moduleProperty').show();
 
-        $('#moduleProperty-inner').append("<div id='moduleProperty-header'>" + obj.objectType + "</div>");
+        $('#moduleProperty-inner').append(`<div id='moduleProperty-header'>${obj.objectType}</div>`);
         // $('#moduleProperty').append("<input type='range' name='points' min='1' max='32' value="+obj.bitWidth+">");
-        if (!obj.fixedBitWidth)
-            $('#moduleProperty-inner').append("<p>BitWidth: <input class='objectPropertyAttribute' type='number'  name='newBitWidth' min='1' max='32' value=" + obj.bitWidth + "></p>");
-
-        if (obj.changeInputSize)
-            $('#moduleProperty-inner').append("<p>Input Size: <input class='objectPropertyAttribute' type='number'  name='changeInputSize' min='2' max='10' value=" + obj.inputSize + "></p>");
+        if (!obj.fixedBitWidth) { $('#moduleProperty-inner').append(`<p>BitWidth: <input class='objectPropertyAttribute' type='number'  name='newBitWidth' min='1' max='32' value=${obj.bitWidth}></p>`); }
 
-        if (!obj.propagationDelayFixed)
-            $('#moduleProperty-inner').append("<p>Delay: <input class='objectPropertyAttribute' type='number'  name='changePropagationDelay' min='0' max='100000' value=" + obj.propagationDelay + "></p>");
+        if (obj.changeInputSize) { $('#moduleProperty-inner').append(`<p>Input Size: <input class='objectPropertyAttribute' type='number'  name='changeInputSize' min='2' max='10' value=${obj.inputSize}></p>`); }
 
+        if (!obj.propagationDelayFixed) { $('#moduleProperty-inner').append(`<p>Delay: <input class='objectPropertyAttribute' type='number'  name='changePropagationDelay' min='0' max='100000' value=${obj.propagationDelay}></p>`); }
 
-        $('#moduleProperty-inner').append("<p>Label: <input class='objectPropertyAttribute' type='text'  name='setLabel'  value='" + escapeHtml(obj.label) + "'></p>");
 
+        $('#moduleProperty-inner').append(`<p>Label: <input class='objectPropertyAttribute' type='text'  name='setLabel'  value='${escapeHtml(obj.label)}'></p>`);
 
+        let s;
         if (!obj.labelDirectionFixed) {
-            var s = $("<select class='objectPropertyAttribute' name='newLabelDirection'>" + "<option value='RIGHT' " + ["", "selected"][+(obj.labelDirection == "RIGHT")] + " >RIGHT</option><option value='DOWN' " + ["", "selected"][+(obj.labelDirection == "DOWN")] + " >DOWN</option><option value='LEFT' " + "<option value='RIGHT'" + ["", "selected"][+(obj.labelDirection == "LEFT")] + " >LEFT</option><option value='UP' " + "<option value='RIGHT'" + ["", "selected"][+(obj.labelDirection == "UP")] + " >UP</option>" + "</select>");
+            s = $(`${"<select class='objectPropertyAttribute' name='newLabelDirection'>" + "<option value='RIGHT' "}${['', 'selected'][+(obj.labelDirection === 'RIGHT')]} >RIGHT</option><option value='DOWN' ${['', 'selected'][+(obj.labelDirection === 'DOWN')]} >DOWN</option><option value='LEFT' ` + `<option value='RIGHT'${['', 'selected'][+(obj.labelDirection === 'LEFT')]} >LEFT</option><option value='UP' ` + `<option value='RIGHT'${['', 'selected'][+(obj.labelDirection === 'UP')]} >UP</option>` + '</select>');
             s.val(obj.labelDirection);
-            $('#moduleProperty-inner').append("<p>Label Direction: " + $(s).prop('outerHTML') + "</p>");
+            $('#moduleProperty-inner').append(`<p>Label Direction: ${$(s).prop('outerHTML')}</p>`);
         }
 
 
         if (!obj.directionFixed) {
-            var s = $("<select class='objectPropertyAttribute' name='newDirection'>" + "<option value='RIGHT' " + ["", "selected"][+(obj.direction == "RIGHT")] + " >RIGHT</option><option value='DOWN' " + ["", "selected"][+(obj.direction == "DOWN")] + " >DOWN</option><option value='LEFT' " + "<option value='RIGHT'" + ["", "selected"][+(obj.direction == "LEFT")] + " >LEFT</option><option value='UP' " + "<option value='RIGHT'" + ["", "selected"][+(obj.direction == "UP")] + " >UP</option>" + "</select>");
-            $('#moduleProperty-inner').append("<p>Direction: " + $(s).prop('outerHTML') + "</p>");
-
+            s = $(`${"<select class='objectPropertyAttribute' name='newDirection'>" + "<option value='RIGHT' "}${['', 'selected'][+(obj.direction === 'RIGHT')]} >RIGHT</option><option value='DOWN' ${['', 'selected'][+(obj.direction === 'DOWN')]} >DOWN</option><option value='LEFT' ` + `<option value='RIGHT'${['', 'selected'][+(obj.direction === 'LEFT')]} >LEFT</option><option value='UP' ` + `<option value='RIGHT'${['', 'selected'][+(obj.direction === 'UP')]} >UP</option>` + '</select>');
+            $('#moduleProperty-inner').append(`<p>Direction: ${$(s).prop('outerHTML')}</p>`);
         } else if (!obj.orientationFixed) {
-            var s = $("<select class='objectPropertyAttribute' name='newDirection'>" + "<option value='RIGHT' " + ["", "selected"][+(obj.direction == "RIGHT")] + " >RIGHT</option><option value='DOWN' " + ["", "selected"][+(obj.direction == "DOWN")] + " >DOWN</option><option value='LEFT' " + "<option value='RIGHT'" + ["", "selected"][+(obj.direction == "LEFT")] + " >LEFT</option><option value='UP' " + "<option value='RIGHT'" + ["", "selected"][+(obj.direction == "UP")] + " >UP</option>" + "</select>");
-            $('#moduleProperty-inner').append("<p>Orientation: " + $(s).prop('outerHTML') + "</p>");
+            s = $(`${"<select class='objectPropertyAttribute' name='newDirection'>" + "<option value='RIGHT' "}${['', 'selected'][+(obj.direction === 'RIGHT')]} >RIGHT</option><option value='DOWN' ${['', 'selected'][+(obj.direction === 'DOWN')]} >DOWN</option><option value='LEFT' ` + `<option value='RIGHT'${['', 'selected'][+(obj.direction === 'LEFT')]} >LEFT</option><option value='UP' ` + `<option value='RIGHT'${['', 'selected'][+(obj.direction === 'UP')]} >UP</option>` + '</select>');
+            $('#moduleProperty-inner').append(`<p>Orientation: ${$(s).prop('outerHTML')}</p>`);
         }
 
         if (obj.mutableProperties) {
-            for (attr in obj.mutableProperties) {
-                var prop = obj.mutableProperties[attr];
-                if (obj.mutableProperties[attr].type == "number") {
-                    var s = "<p>" + prop.name + "<input class='objectPropertyAttribute' type='number'  name='" + prop.func + "' min='" + (prop.min || 0) + "' max='" + (prop.max || 200) + "' value=" + obj[attr] + "></p>";
+            for (const attr in obj.mutableProperties) {
+                const prop = obj.mutableProperties[attr];
+                if (obj.mutableProperties[attr].type === 'number') {
+                    s = `<p>${prop.name}<input class='objectPropertyAttribute' type='number'  name='${prop.func}' min='${prop.min || 0}' max='${prop.max || 200}' value=${obj[attr]}></p>`;
                     $('#moduleProperty-inner').append(s);
-                }
-                else if (obj.mutableProperties[attr].type == "text") {
-                    var s = "<p>" + prop.name + "<input class='objectPropertyAttribute' type='text'  name='" + prop.func + "' maxlength='" + (prop.maxlength || 200) + "' value=" + obj[attr] + "></p>";
+                } else if (obj.mutableProperties[attr].type === 'text') {
+                    s = `<p>${prop.name}<input class='objectPropertyAttribute' type='text'  name='${prop.func}' maxlength='${prop.maxlength || 200}' value=${obj[attr]}></p>`;
                     $('#moduleProperty-inner').append(s);
-                }
-                else if (obj.mutableProperties[attr].type == "button") {
-                    var s = "<p><button class='objectPropertyAttribute btn btn-primary btn-xs' type='button'  name='" + prop.func + "'>" + prop.name + "</button></p>";
+                } else if (obj.mutableProperties[attr].type === 'button') {
+                    s = `<p><button class='objectPropertyAttribute btn btn-primary btn-xs' type='button'  name='${prop.func}'>${prop.name}</button></p>`;
                     $('#moduleProperty-inner').append(s);
                 }
-
             }
         }
     }
 
-    // Tooltip can be defined in the prototype or the object itself, in addition to help map.
-    var tooltipText = obj && (obj.tooltipText);
-    if (tooltipText) {
-        $('#moduleProperty-inner').append('<p><button id="toolTipButton" class="btn btn-primary btn-xs" type="button" >CircuitVerse Tip</button></p>');
-        $('#toolTipButton').hover(function () {
-            $("#Help").addClass("show");
-            $("#Help").empty();
-            ////console.log("SHOWING")
-            $("#Help").append(tooltipText);
-        }); // code goes in document ready fn only
-        $('#toolTipButton').mouseleave(function () {
-            $("#Help").removeClass("show");
+    const helplink = obj && (obj.helplink);
+    if (helplink) {
+        $('#moduleProperty-inner').append('<p><button id="HelpButton" class="btn btn-primary btn-xs" type="button" >Help &#9432</button></p>');
+        $('#HelpButton').click(() => {
+            window.open(helplink);
         });
     }
 
+    function checkValidBitWidth() {
+        const selector = $("[name='newBitWidth']");
+        if (selector === undefined
+            || selector.val() > 32
+            || selector.val() < 1
+            || !$.isNumeric(selector.val())) {
+            // fallback to previously saves state
+            selector.val(selector.attr('old-val'));
+        } else {
+            selector.attr('old-val', selector.val());
+        }
+    }
 
-
-
-
-
-
-    $(".objectPropertyAttribute").on("change keyup paste click", function () {
+    $('.objectPropertyAttribute').on('change keyup paste click', function () {
         // return;
-        //////console.log(this.name+":"+this.value);
-
-
+        // ////console.log(this.name+":"+this.value);
+        checkValidBitWidth();
         scheduleUpdate();
-        updateCanvas = true;
-        wireToBeChecked = 1;
-        console.log("module prop",simulationArea.lastSelected)
-        if (simulationArea.lastSelected && simulationArea.lastSelected[this.name]){
-            prevPropertyObj = simulationArea.lastSelected[this.name](this.value) || prevPropertyObj;
-            simulationArea.lastSelected = prevPropertyObj
+        updateCanvasSet(true);
+        wireToBeCheckedSet(1);
+        if (simulationArea.lastSelected && simulationArea.lastSelected[this.name]) {
+            prevPropertyObjSet(simulationArea.lastSelected[this.name](this.value) || prevPropertyObjGet());
+        } else {
+            circuitProperty[this.name](this.value);
         }
-        // else{
-        //     simulationArea.lastSelected = moduleProperty[this.name](this.value);
-        // }
-    })
-    $(".objectPropertyAttributeChecked").on("change keyup paste click", function () {
+    });
+    $('.objectPropertyAttributeChecked').on('change keyup paste click', function () {
         // return;
-        //////console.log(this.name+":"+this.value);
-        
-        
-        
+        // console.log(this.name+":"+this.value);
         scheduleUpdate();
-        updateCanvas = true;
-        wireToBeChecked = 1;
-        if (simulationArea.lastSelected && simulationArea.lastSelected[this.name]){
-            prevPropertyObj = simulationArea.lastSelected[this.name](this.value) || prevPropertyObj;
-            simulationArea.lastSelected = prevPropertyObj
+        updateCanvasSet(true);
+        wireToBeCheckedSet(1);
+        if (simulationArea.lastSelected && simulationArea.lastSelected[this.name]) {
+            prevPropertyObjSet(simulationArea.lastSelected[this.name](this.value) || prevPropertyObjGet());
+        } else {
+            circuitProperty[this.name](this.checked);
         }
-        // else{
-        //     moduleProperty[this.name](this.checked);
-        // }
-    })
+    });
 }
 
-
+/**
+ * Hides the properties in sidebar.
+ * @category ux
+ */
 export function hideProperties() {
     $('#moduleProperty-inner').empty();
     $('#moduleProperty').hide();
-    prevPropertyObj = undefined;
-    $(".objectPropertyAttribute").unbind("change keyup paste click");
+    prevPropertyObjSet(undefined);
+    $('.objectPropertyAttribute').unbind('change keyup paste click');
 }
-
+/**
+ * checkss the input is safe or not
+ * @param {HTML} unsafe - the html which we wants to escape
+ * @category ux
+ */
 function escapeHtml(unsafe) {
     return unsafe
-        .replace(/&/g, "&amp;")
-        .replace(/</g, "&lt;")
-        .replace(/>/g, "&gt;")
-        .replace(/"/g, "&quot;")
-        .replace(/'/g, "&#039;");
-}
\ No newline at end of file
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#039;');
+}
+
+export function deleteSelected() {
+    $('input').blur();
+    if (simulationArea.lastSelected && !(simulationArea.lastSelected.objectType === 'Node' && simulationArea.lastSelected.type !== 2)) simulationArea.lastSelected.delete();
+    for (let i = 0; i < simulationArea.multipleObjectSelections.length; i++) {
+        if (!(simulationArea.multipleObjectSelections[i].objectType === 'Node' && simulationArea.multipleObjectSelections[i].type !== 2)) simulationArea.multipleObjectSelections[i].cleanDelete();
+    }
+    hideProperties();
+    simulationArea.multipleObjectSelections = [];
+
+    // Updated restricted elements
+    updateCanvasSet(true);
+    scheduleUpdate();
+    updateRestrictedElementsInScope();
+}
+
+$('#bitconverterprompt').append(`
+<label style='color:grey'>Decimal value</label><br><input  type='text' id='decimalInput' label="Decimal" name='text1'><br><br>
+<label  style='color:grey'>Binary value</label><br><input  type='text' id='binaryInput' label="Binary" name='text1'><br><br>
+<label  style='color:grey'>Octal value</label><br><input  type='text' id='octalInput' label="Octal" name='text1'><br><br>
+<label  style='color:grey'>Hexadecimal value</label><br><input  type='text' id='hexInput' label="Hex" name='text1'><br><br>
+`);
+/**
+ * listener for opening the prompt for bin conversion
+ * @category ux
+ */
+$('#bitconverter').click(() => {
+    $('#bitconverterprompt').dialog({
+        buttons: [
+            {
+                text: 'Reset',
+                click() {
+                    $('#decimalInput').val('0');
+                    $('#binaryInput').val('0');
+                    $('#octalInput').val('0');
+                    $('#hexInput').val('0');
+                },
+            },
+        ],
+    });
+});
+
+// convertors
+const convertors = {
+    dec2bin: (x) => `0b${x.toString(2)}`,
+    dec2hex: (x) => `0x${x.toString(16)}`,
+    dec2octal: (x) => `0${x.toString(8)}`,
+};
+
+function setBaseValues(x) {
+    if (isNaN(x)) return;
+    $('#binaryInput').val(convertors.dec2bin(x));
+    $('#octalInput').val(convertors.dec2octal(x));
+    $('#hexInput').val(convertors.dec2hex(x));
+    $('#decimalInput').val(x);
+}
+
+$('#decimalInput').on('keyup', () => {
+    const x = parseInt($('#decimalInput').val(), 10);
+    setBaseValues(x);
+});
+
+$('#binaryInput').on('keyup', () => {
+    const x = parseInt($('#binaryInput').val(), 2);
+    setBaseValues(x);
+});
+
+$('#hexInput').on('keyup', () => {
+    const x = parseInt($('#hexInput').val(), 16);
+    setBaseValues(x);
+});
+
+$('#octalInput').on('keyup', () => {
+    const x = parseInt($('#octalInput').val(), 8);
+    setBaseValues(x);
+});
diff --git a/src/wire.js b/src/wire.js
index ebccf14..fdc4028 100644
--- a/src/wire.js
+++ b/src/wire.js
@@ -1,35 +1,40 @@
-//wire object
-import { drawCircle, drawLine } from "./canvasApi";
-import { simulationArea } from "./simulationArea";
-import { distance } from "./utils";
-import { renderCanvas, scheduleUpdate } from "./engine";
-
+/* eslint-disable no-multi-assign */
+// wire object
+import { drawLine } from './canvasApi';
+import simulationArea from './simulationArea';
+import Node from './node';
+import { updateSimulationSet, forceResetNodesSet } from './engine';
+
+/**
+ * Wire - To connect two nodes.
+ * @class
+ * @memberof module:wire
+ * @param {Node} node1
+ * @param {Node} node2
+ * @param {Scope} scope - The circuit in which wire has to be drawn
+ * @category wire
+ */
 export default class Wire {
     constructor(node1, node2, scope) {
-
-        this.objectType = "Wire";
+        this.objectType = 'Wire';
         this.node1 = node1;
         this.scope = scope;
         this.node2 = node2;
-        this.type = "horizontal";
-
+        this.type = 'horizontal';
 
 
         this.updateData();
         this.scope.wires.push(this);
-        forceResetNodes = true;
-
-
+        forceResetNodesSet(true);
     }
 
-    //if data changes
+    // if data changes
     updateData() {
-
         this.x1 = this.node1.absX();
         this.y1 = this.node1.absY();
         this.x2 = this.node2.absX();
         this.y2 = this.node2.absY();
-        if (this.x1 == this.x2) this.type = "vertical";
+        if (this.x1 === this.x2) this.type = 'vertical';
     }
 
     updateScope(scope) {
@@ -37,77 +42,75 @@ export default class Wire {
         this.checkConnections();
     }
 
-    //to check if nodes are disconnected
+    // to check if nodes are disconnected
     checkConnections() {
-        var check = this.node1.deleted || this.node2.deleted || !this.node1.connections.contains(this.node2) || !this.node2.connections.contains(this.node1);
+        const check = this.node1.deleted || this.node2.deleted || !this.node1.connections.contains(this.node2) || !this.node2.connections.contains(this.node1);
         if (check) this.delete();
         return check;
     }
 
     update() {
+        let updated = false;
+        if (embed) return updated;
 
-        if (embed) return;
-
-        if (this.node1.absX() == this.node2.absX()) {
+        if (this.node1.absX() === this.node2.absX()) {
             this.x1 = this.x2 = this.node1.absX();
-            this.type = "vertical";
-        }
-        else if (this.node1.absY() == this.node2.absY()) {
+            this.type = 'vertical';
+        } else if (this.node1.absY() === this.node2.absY()) {
             this.y1 = this.y2 = this.node1.absY();
-            this.type = "horizontal";
+            this.type = 'horizontal';
         }
 
-        var updated = false;
-        if (wireToBeChecked && this.checkConnections()) {
-            this.delete();
-            return;
-        } // SLOW , REMOVE
-        if (simulationArea.shiftDown == false && simulationArea.mouseDown == true && simulationArea.selected == false && this.checkWithin(simulationArea.mouseDownX, simulationArea.mouseDownY)) {
+        // if (wireToBeChecked && this.checkConnections()) {
+        //     this.delete();
+        //     return updated;
+        // } // SLOW , REMOVE
+        if (simulationArea.shiftDown === false && simulationArea.mouseDown === true && simulationArea.selected === false && this.checkWithin(simulationArea.mouseDownX, simulationArea.mouseDownY)) {
             simulationArea.selected = true;
 
 
             simulationArea.lastSelected = this;
 
             updated = true;
-        }
-        else if (simulationArea.mouseDown && simulationArea.lastSelected == this && !this.checkWithin(simulationArea.mouseX, simulationArea.mouseY)) {
-            var n = new Node(simulationArea.mouseDownX, simulationArea.mouseDownY, 2, this.scope.root);
+        } else if (simulationArea.mouseDown && simulationArea.lastSelected === this && !this.checkWithin(simulationArea.mouseX, simulationArea.mouseY)) {
+            const n = new Node(simulationArea.mouseDownX, simulationArea.mouseDownY, 2, this.scope.root);
             n.clicked = true;
             n.wasClicked = true;
             simulationArea.lastSelected = n;
             this.converge(n);
         }
-        if (simulationArea.lastSelected == this) {
+        // eslint-disable-next-line no-empty
+        if (simulationArea.lastSelected === this) {
 
         }
 
         if (this.node1.deleted || this.node2.deleted) {
             this.delete();
-            return;
-        } //if either of the nodes are deleted
-
-        if (simulationArea.mouseDown == false) {
-            if (this.type == "horizontal") {
-                if (this.node1.absY() != this.y1) {
+            return updated;
+        } // if either of the nodes are deleted
+        let n;
+        if (simulationArea.mouseDown === false) {
+            if (this.type === 'horizontal') {
+                if (this.node1.absY() !== this.y1) {
                     // if(this.checkConnections()){this.delete();return;}
-                    var n = new Node(this.node1.absX(), this.y1, 2, this.scope.root);
+                    n = new Node(this.node1.absX(), this.y1, 2, this.scope.root);
                     this.converge(n);
                     updated = true;
-                } else if (this.node2.absY() != this.y2) {
+                } else if (this.node2.absY() !== this.y2) {
                     // if(this.checkConnections()){this.delete();return;}
-                    var n = new Node(this.node2.absX(), this.y2, 2, this.scope.root);
+                    n = new Node(this.node2.absX(), this.y2, 2, this.scope.root);
                     this.converge(n);
                     updated = true;
                 }
-            } else if (this.type == "vertical") {
-                if (this.node1.absX() != this.x1) {
+            } else if (this.type === 'vertical') {
+                if (this.node1.absX() !== this.x1) {
                     // if(this.checkConnections()){this.delete();return;}
-                    var n = new Node(this.x1, this.node1.absY(), 2, this.scope.root);
+                    n = new Node(this.x1, this.node1.absY(), 2, this.scope.root);
                     this.converge(n);
                     updated = true;
-                } else if (this.node2.absX() != this.x2) {
+                } else if (this.node2.absX() !== this.x2) {
                     // if(this.checkConnections()){this.delete();return;}
-                    var n = new Node(this.x2, this.node2.absY(), 2, this.scope.root);
+                    n = new Node(this.x2, this.node2.absY(), 2, this.scope.root);
                     this.converge(n);
                     updated = true;
                 }
@@ -117,22 +120,13 @@ export default class Wire {
     }
 
     draw() {
-
         // for calculating min-max Width,min-max Height
 
-        let ctx = simulationArea.context;
-
-        var color;
-        if (simulationArea.lastSelected == this)
-            color = "blue";
-        else if (this.node1.value == undefined || this.node2.value == undefined)
-            color = "red";
-        else if (this.node1.bitWidth == 1)
-            color = ["red", "DarkGreen", "Lime"][this.node1.value + 1];
-        else
-            color = "black";
-        drawLine(ctx, this.node1.absX(), this.node1.absY(), this.node2.absX(), this.node2.absY(), color, 3);
+        const ctx = simulationArea.context;
 
+        let color;
+        if (simulationArea.lastSelected === this) { color = 'blue'; } else if (this.node1.value === undefined || this.node2.value === undefined) { color = 'red'; } else if (this.node1.bitWidth === 1) { color = ['red', 'DarkGreen', 'Lime'][this.node1.value + 1]; } else { color = 'black'; }
+        drawLine(ctx, this.node1.absX(), this.node1.absY(), this.node2.absX(), this.node2.absY(), color, 3);
     }
 
     // checks if node lies on wire
@@ -142,19 +136,14 @@ export default class Wire {
 
     // fn checks if coordinate lies on wire
     checkWithin(x, y) {
-        if ((this.type == "horizontal") && (this.node1.absX() < this.node2.absX()) && (x > this.node1.absX()) && (x < this.node2.absX()) && (y === this.node2.absY()))
-            return true;
-        else if ((this.type == "horizontal") && (this.node1.absX() > this.node2.absX()) && (x < this.node1.absX()) && (x > this.node2.absX()) && (y === this.node2.absY()))
-            return true;
-        else if ((this.type == 'vertical') && (this.node1.absY() < this.node2.absY()) && (y > this.node1.absY()) && (y < this.node2.absY()) && (x === this.node2.absX()))
-            return true;
-        else if ((this.type == 'vertical') && (this.node1.absY() > this.node2.absY()) && (y < this.node1.absY()) && (y > this.node2.absY()) && (x === this.node2.absX()))
-            return true
+        if ((this.type === 'horizontal') && (this.node1.absX() < this.node2.absX()) && (x > this.node1.absX()) && (x < this.node2.absX()) && (y === this.node2.absY())) return true;
+        if ((this.type === 'horizontal') && (this.node1.absX() > this.node2.absX()) && (x < this.node1.absX()) && (x > this.node2.absX()) && (y === this.node2.absY())) return true;
+        if ((this.type === 'vertical') && (this.node1.absY() < this.node2.absY()) && (y > this.node1.absY()) && (y < this.node2.absY()) && (x === this.node2.absX())) return true;
+        if ((this.type === 'vertical') && (this.node1.absY() > this.node2.absY()) && (y < this.node1.absY()) && (y > this.node2.absY()) && (x === this.node2.absX())) return true;
         return false;
-
     }
 
-    //add intermediate node between these 2 nodes
+    // add intermediate node between these 2 nodes
     converge(n) {
         this.node1.connect(n);
         this.node2.connect(n);
@@ -162,8 +151,8 @@ export default class Wire {
     }
 
     delete() {
-        forceResetNodes = true;
-        updateSimulation = true;
+        forceResetNodesSet(true);
+        updateSimulationSet(true);
         this.node1.connections.clean(this.node2);
         this.node2.connections.clean(this.node1);
         this.scope.wires.clean(this);
diff --git a/test/examples/fulladder.json b/test/examples/fulladder.json
new file mode 100644
index 0000000..b73995d
--- /dev/null
+++ b/test/examples/fulladder.json
@@ -0,0 +1,788 @@
+{
+    "name": "Full Adder",
+    "timePeriod": 500,
+    "clockEnabled": true,
+    "projectId": "SinXcY4JI3fbD8TmQOoV",
+    "focussedCircuit": 24569722303,
+    "scopes": [
+        {
+            "layout": {
+                "width": 100,
+                "height": 50,
+                "title_x": 50,
+                "title_y": 13,
+                "titleEnabled": true
+            },
+            "allNodes": [
+                {
+                    "x": 10,
+                    "y": 0,
+                    "type": 1,
+                    "bitWidth": 1,
+                    "label": "",
+                    "connections": [
+                        9
+                    ]
+                },
+                {
+                    "x": -10,
+                    "y": -10,
+                    "type": 0,
+                    "bitWidth": 1,
+                    "label": "",
+                    "connections": [
+                        9
+                    ]
+                },
+                {
+                    "x": -10,
+                    "y": 10,
+                    "type": 0,
+                    "bitWidth": 1,
+                    "label": "",
+                    "connections": [
+                        5
+                    ]
+                },
+                {
+                    "x": 20,
+                    "y": 0,
+                    "type": 1,
+                    "bitWidth": 1,
+                    "label": "",
+                    "connections": [
+                        12
+                    ]
+                },
+                {
+                    "x": 10,
+                    "y": 0,
+                    "type": 1,
+                    "bitWidth": 1,
+                    "label": "",
+                    "connections": [
+                        11
+                    ]
+                },
+                {
+                    "x": 220,
+                    "y": 270,
+                    "type": 2,
+                    "bitWidth": 1,
+                    "label": "",
+                    "connections": [
+                        2,
+                        11
+                    ]
+                },
+                {
+                    "x": -20,
+                    "y": -10,
+                    "type": 0,
+                    "bitWidth": 1,
+                    "label": "",
+                    "connections": [
+                        10
+                    ]
+                },
+                {
+                    "x": -20,
+                    "y": 10,
+                    "type": 0,
+                    "bitWidth": 1,
+                    "label": "",
+                    "connections": [
+                        11
+                    ]
+                },
+                {
+                    "x": 20,
+                    "y": 0,
+                    "type": 1,
+                    "bitWidth": 1,
+                    "label": "",
+                    "connections": [
+                        13
+                    ]
+                },
+                {
+                    "x": 230,
+                    "y": 250,
+                    "type": 2,
+                    "bitWidth": 1,
+                    "label": "",
+                    "connections": [
+                        0,
+                        1,
+                        10
+                    ]
+                },
+                {
+                    "x": 230,
+                    "y": 310,
+                    "type": 2,
+                    "bitWidth": 1,
+                    "label": "",
+                    "connections": [
+                        6,
+                        9
+                    ]
+                },
+                {
+                    "x": 220,
+                    "y": 330,
+                    "type": 2,
+                    "bitWidth": 1,
+                    "label": "",
+                    "connections": [
+                        4,
+                        5,
+                        7
+                    ]
+                },
+                {
+                    "x": 10,
+                    "y": 0,
+                    "type": 0,
+                    "bitWidth": 1,
+                    "label": "",
+                    "connections": [
+                        3
+                    ]
+                },
+                {
+                    "x": 10,
+                    "y": 0,
+                    "type": 0,
+                    "bitWidth": 1,
+                    "label": "",
+                    "connections": [
+                        8
+                    ]
+                }
+            ],
+            "id": 49772494194,
+            "name": "Half Adder",
+            "Input": [
+                {
+                    "x": 190,
+                    "y": 250,
+                    "objectType": "Input",
+                    "label": "A",
+                    "direction": "RIGHT",
+                    "labelDirection": "LEFT",
+                    "propagationDelay": 0,
+                    "customData": {
+                        "nodes": {
+                            "output1": 0
+                        },
+                        "values": {
+                            "state": 1
+                        },
+                        "constructorParamaters": [
+                            "RIGHT",
+                            1,
+                            {
+                                "x": 0,
+                                "y": 20,
+                                "id": "9eMxrP4dCBQLPARd3R0D"
+                            }
+                        ]
+                    }
+                },
+                {
+                    "x": 190,
+                    "y": 330,
+                    "objectType": "Input",
+                    "label": "B",
+                    "direction": "RIGHT",
+                    "labelDirection": "LEFT",
+                    "propagationDelay": 0,
+                    "customData": {
+                        "nodes": {
+                            "output1": 4
+                        },
+                        "values": {
+                            "state": 1
+                        },
+                        "constructorParamaters": [
+                            "RIGHT",
+                            1,
+                            {
+                                "x": 0,
+                                "y": 40,
+                                "id": "6LVvN0D4yuQqTjUHn475"
+                            }
+                        ]
+                    }
+                }
+            ],
+            "Output": [
+                {
+                    "x": 300,
+                    "y": 260,
+                    "objectType": "Output",
+                    "label": "Cout",
+                    "direction": "LEFT",
+                    "labelDirection": "RIGHT",
+                    "propagationDelay": 0,
+                    "customData": {
+                        "nodes": {
+                            "inp1": 12
+                        },
+                        "constructorParamaters": [
+                            "LEFT",
+                            1,
+                            {
+                                "x": 100,
+                                "y": 20,
+                                "id": "UyKOpoVFJXl3n5mmohI2"
+                            }
+                        ]
+                    }
+                },
+                {
+                    "x": 300,
+                    "y": 320,
+                    "objectType": "Output",
+                    "label": "Sum",
+                    "direction": "LEFT",
+                    "labelDirection": "RIGHT",
+                    "propagationDelay": 0,
+                    "customData": {
+                        "nodes": {
+                            "inp1": 13
+                        },
+                        "constructorParamaters": [
+                            "LEFT",
+                            1,
+                            {
+                                "x": 100,
+                                "y": 40,
+                                "id": "ptMKN0apfc0rr6Z68c2Z"
+                            }
+                        ]
+                    }
+                }
+            ],
+            "AndGate": [
+                {
+                    "x": 250,
+                    "y": 260,
+                    "objectType": "AndGate",
+                    "label": "",
+                    "direction": "RIGHT",
+                    "labelDirection": "RIGHT",
+                    "propagationDelay": 100,
+                    "customData": {
+                        "constructorParamaters": [
+                            "RIGHT",
+                            2,
+                            1
+                        ],
+                        "nodes": {
+                            "inp": [
+                                1,
+                                2
+                            ],
+                            "output1": 3
+                        }
+                    }
+                }
+            ],
+            "XorGate": [
+                {
+                    "x": 260,
+                    "y": 320,
+                    "objectType": "XorGate",
+                    "label": "",
+                    "direction": "RIGHT",
+                    "labelDirection": "RIGHT",
+                    "propagationDelay": 100,
+                    "customData": {
+                        "constructorParamaters": [
+                            "RIGHT",
+                            2,
+                            1
+                        ],
+                        "nodes": {
+                            "inp": [
+                                6,
+                                7
+                            ],
+                            "output1": 8
+                        }
+                    }
+                }
+            ],
+            "Text": [
+                {
+                    "x": 220,
+                    "y": 220,
+                    "objectType": "Text",
+                    "label": "Half Adder",
+                    "direction": "RIGHT",
+                    "labelDirection": "RIGHT",
+                    "propagationDelay": 100,
+                    "customData": {
+                        "constructorParamaters": [
+                            "Half Adder"
+                        ]
+                    }
+                }
+            ],
+            "nodes": [
+                5,
+                9,
+                10,
+                11
+            ]
+        },
+        {
+            "layout": {
+                "width": 100,
+                "height": 100,
+                "title_x": 50,
+                "title_y": 13,
+                "titleEnabled": true
+            },
+            "allNodes": [
+                {
+                    "x": 0,
+                    "y": 20,
+                    "type": 0,
+                    "bitWidth": 1,
+                    "label": "",
+                    "connections": [
+                        8
+                    ]
+                },
+                {
+                    "x": 0,
+                    "y": 40,
+                    "type": 0,
+                    "bitWidth": 1,
+                    "label": "",
+                    "connections": [
+                        9
+                    ]
+                },
+                {
+                    "x": 100,
+                    "y": 20,
+                    "type": 1,
+                    "bitWidth": 1,
+                    "label": "",
+                    "connections": [
+                        14
+                    ]
+                },
+                {
+                    "x": 100,
+                    "y": 40,
+                    "type": 1,
+                    "bitWidth": 1,
+                    "label": "",
+                    "connections": [
+                        4
+                    ]
+                },
+                {
+                    "x": 0,
+                    "y": 20,
+                    "type": 0,
+                    "bitWidth": 1,
+                    "label": "",
+                    "connections": [
+                        3
+                    ]
+                },
+                {
+                    "x": 0,
+                    "y": 40,
+                    "type": 0,
+                    "bitWidth": 1,
+                    "label": "",
+                    "connections": [
+                        12
+                    ]
+                },
+                {
+                    "x": 100,
+                    "y": 20,
+                    "type": 1,
+                    "bitWidth": 1,
+                    "label": "",
+                    "connections": [
+                        20
+                    ]
+                },
+                {
+                    "x": 100,
+                    "y": 40,
+                    "type": 1,
+                    "bitWidth": 1,
+                    "label": "",
+                    "connections": [
+                        13
+                    ]
+                },
+                {
+                    "x": 10,
+                    "y": 0,
+                    "type": 1,
+                    "bitWidth": 1,
+                    "label": "",
+                    "connections": [
+                        0
+                    ]
+                },
+                {
+                    "x": 10,
+                    "y": 0,
+                    "type": 1,
+                    "bitWidth": 1,
+                    "label": "",
+                    "connections": [
+                        1
+                    ]
+                },
+                {
+                    "x": 10,
+                    "y": 0,
+                    "type": 1,
+                    "bitWidth": 1,
+                    "label": "",
+                    "connections": [
+                        11
+                    ]
+                },
+                {
+                    "x": 520,
+                    "y": 410,
+                    "type": 2,
+                    "bitWidth": 1,
+                    "label": "",
+                    "connections": [
+                        10,
+                        12
+                    ]
+                },
+                {
+                    "x": 520,
+                    "y": 380,
+                    "type": 2,
+                    "bitWidth": 1,
+                    "label": "",
+                    "connections": [
+                        5,
+                        11
+                    ]
+                },
+                {
+                    "x": 10,
+                    "y": 0,
+                    "type": 0,
+                    "bitWidth": 1,
+                    "label": "",
+                    "connections": [
+                        7
+                    ]
+                },
+                {
+                    "x": 540,
+                    "y": 340,
+                    "type": 2,
+                    "bitWidth": 1,
+                    "label": "",
+                    "connections": [
+                        2,
+                        15
+                    ]
+                },
+                {
+                    "x": 540,
+                    "y": 320,
+                    "type": 2,
+                    "bitWidth": 1,
+                    "label": "",
+                    "connections": [
+                        14,
+                        16
+                    ]
+                },
+                {
+                    "x": -10,
+                    "y": -10,
+                    "type": 0,
+                    "bitWidth": 1,
+                    "label": "",
+                    "connections": [
+                        15
+                    ]
+                },
+                {
+                    "x": -10,
+                    "y": 10,
+                    "type": 0,
+                    "bitWidth": 1,
+                    "label": "",
+                    "connections": [
+                        19
+                    ]
+                },
+                {
+                    "x": 20,
+                    "y": 0,
+                    "type": 1,
+                    "bitWidth": 1,
+                    "label": "",
+                    "connections": [
+                        21
+                    ]
+                },
+                {
+                    "x": 670,
+                    "y": 340,
+                    "type": 2,
+                    "bitWidth": 1,
+                    "label": "",
+                    "connections": [
+                        17,
+                        20
+                    ]
+                },
+                {
+                    "x": 670,
+                    "y": 360,
+                    "type": 2,
+                    "bitWidth": 1,
+                    "label": "",
+                    "connections": [
+                        6,
+                        19
+                    ]
+                },
+                {
+                    "x": 10,
+                    "y": 0,
+                    "type": 0,
+                    "bitWidth": 1,
+                    "label": "",
+                    "connections": [
+                        18
+                    ]
+                }
+            ],
+            "id": 24569722303,
+            "name": "Main",
+            "Input": [
+                {
+                    "x": 350,
+                    "y": 340,
+                    "objectType": "Input",
+                    "label": "A",
+                    "direction": "RIGHT",
+                    "labelDirection": "LEFT",
+                    "propagationDelay": 0,
+                    "customData": {
+                        "nodes": {
+                            "output1": 8
+                        },
+                        "values": {
+                            "state": 1
+                        },
+                        "constructorParamaters": [
+                            "RIGHT",
+                            1,
+                            {
+                                "x": 0,
+                                "y": 80,
+                                "id": "isjsN5wAVrXtKScjhtqr"
+                            }
+                        ]
+                    }
+                },
+                {
+                    "x": 350,
+                    "y": 360,
+                    "objectType": "Input",
+                    "label": "B",
+                    "direction": "RIGHT",
+                    "labelDirection": "LEFT",
+                    "propagationDelay": 0,
+                    "customData": {
+                        "nodes": {
+                            "output1": 9
+                        },
+                        "values": {
+                            "state": 0
+                        },
+                        "constructorParamaters": [
+                            "RIGHT",
+                            1,
+                            {
+                                "x": 0,
+                                "y": 20,
+                                "id": "qQg2ym9cziVhmtHPftI4"
+                            }
+                        ]
+                    }
+                },
+                {
+                    "x": 350,
+                    "y": 410,
+                    "objectType": "Input",
+                    "label": "Cin",
+                    "direction": "RIGHT",
+                    "labelDirection": "LEFT",
+                    "propagationDelay": 0,
+                    "customData": {
+                        "nodes": {
+                            "output1": 10
+                        },
+                        "values": {
+                            "state": 0
+                        },
+                        "constructorParamaters": [
+                            "RIGHT",
+                            1,
+                            {
+                                "x": 0,
+                                "y": 40,
+                                "id": "LIhLyRLobNSqDIf8Elr3"
+                            }
+                        ]
+                    }
+                }
+            ],
+            "Output": [
+                {
+                    "x": 740,
+                    "y": 380,
+                    "objectType": "Output",
+                    "label": "Sum",
+                    "direction": "LEFT",
+                    "labelDirection": "RIGHT",
+                    "propagationDelay": 0,
+                    "customData": {
+                        "nodes": {
+                            "inp1": 13
+                        },
+                        "constructorParamaters": [
+                            "LEFT",
+                            1,
+                            {
+                                "x": 100,
+                                "y": 70,
+                                "id": "bFUf8oF3Vbn3hDtbg83g"
+                            }
+                        ]
+                    }
+                },
+                {
+                    "x": 740,
+                    "y": 330,
+                    "objectType": "Output",
+                    "label": "Cout",
+                    "direction": "LEFT",
+                    "labelDirection": "RIGHT",
+                    "propagationDelay": 0,
+                    "customData": {
+                        "nodes": {
+                            "inp1": 21
+                        },
+                        "constructorParamaters": [
+                            "LEFT",
+                            1,
+                            {
+                                "x": 100,
+                                "y": 20,
+                                "id": "TwOPZvWoDzQLvSRM7M7n"
+                            }
+                        ]
+                    }
+                }
+            ],
+            "OrGate": [
+                {
+                    "x": 700,
+                    "y": 330,
+                    "objectType": "OrGate",
+                    "label": "",
+                    "direction": "RIGHT",
+                    "labelDirection": "RIGHT",
+                    "propagationDelay": 100,
+                    "customData": {
+                        "constructorParamaters": [
+                            "RIGHT",
+                            2,
+                            1
+                        ],
+                        "nodes": {
+                            "inp": [
+                                16,
+                                17
+                            ],
+                            "output1": 18
+                        }
+                    }
+                }
+            ],
+            "SubCircuit": [
+                {
+                    "x": 390,
+                    "y": 320,
+                    "id": "49772494194",
+                    "inputNodes": [
+                        0,
+                        1
+                    ],
+                    "outputNodes": [
+                        2,
+                        3
+                    ],
+                    "version": "2.0"
+                },
+                {
+                    "x": 550,
+                    "y": 340,
+                    "id": "49772494194",
+                    "inputNodes": [
+                        4,
+                        5
+                    ],
+                    "outputNodes": [
+                        6,
+                        7
+                    ],
+                    "version": "2.0"
+                }
+            ],
+            "Text": [
+                {
+                    "x": 510,
+                    "y": 280,
+                    "objectType": "Text",
+                    "label": "Full adder from 2 half Adders",
+                    "direction": "RIGHT",
+                    "labelDirection": "RIGHT",
+                    "propagationDelay": 100,
+                    "customData": {
+                        "constructorParamaters": [
+                            "Full adder from 2 half Adders"
+                        ]
+                    }
+                }
+            ],
+            "nodes": [
+                11,
+                12,
+                14,
+                15,
+                19,
+                20
+            ]
+        }
+    ]
+}
\ No newline at end of file
diff --git a/test/gates/gates.test.js b/test/gates/gates.test.js
new file mode 100644
index 0000000..bcbf0a4
--- /dev/null
+++ b/test/gates/gates.test.js
@@ -0,0 +1,39 @@
+/**
+ * @jest-environment jsdom
+ */
+import { setup } from '../../src/setup'
+setup()
+import AndGate from '../../src/modules/AndGate'
+import Input from '../../src/modules/Input'
+import { update, updateSimulationSet } from '../../src/engine'
+
+describe('and gate works', () => {
+    /*
+     * basic setup
+     */
+    const a = new AndGate(40,40);
+    const n1 = a.nodeList[0]
+    const n2 = a.nodeList[1]
+    const n3 = a.nodeList[2]
+    const i1 = new Input(10,30);
+    const i2 = new Input(10,50);
+    i1.output1.connect(n1);
+    n1.connect(i1.output1);
+    i2.output1.connect(n2);
+    n2.connect(i2.output1);
+    /*
+     * test cases
+     */
+    it("draws correctly", () => {
+        
+    })
+    var bools = [[0,0],[0,1],[1,0],[1,1]];
+    it.each(bools)("logic works", (val1,val2) => {
+        console.log(val1,val2)
+        i1.state = val1
+        i2.state = val2
+        updateSimulationSet(true);
+        update();
+        expect(n3.value).toBe(val1&val2);
+    })
+});
diff --git a/test/listenertest.test.js b/test/listenertest.test.js
new file mode 100644
index 0000000..87795f9
--- /dev/null
+++ b/test/listenertest.test.js
@@ -0,0 +1,39 @@
+/**
+ * @jest-environment jsdom
+ */
+
+const puppeteer = require('puppeteer')
+let browser
+let page
+
+beforeAll(async () => {
+    browser = await puppeteer.launch()
+    page = await browser.newPage()
+    await page.goto('file:///home/deku/2sim/index.html')
+})
+
+describe('button', function () {
+    it("zooms on clicking button", async () => {
+        const prevScale = await page.evaluate(() => globalScope.scale);
+        await page.click('#zoomIn')
+        const newScale = await page.evaluate(() => globalScope.scale);
+        expect(newScale).toBeGreaterThan(prevScale);
+    },100000)
+
+    it("zooms on scrlling", async () => {
+        const prevScale = await page.evaluate(() => globalScope.scale);
+        await page.waitForSelector('#simulationArea');
+        await page.hover('#simulationArea');
+        await page.evaluate(() => {
+            var cEvent = new Event('mousewheel');
+            cEvent.detail = -53;
+            document.querySelector('#simulationArea').dispatchEvent(cEvent)
+        });
+        const newScale = await page.evaluate(() => globalScope.scale);
+        expect(newScale).toBeGreaterThan(prevScale);
+    });
+
+    afterAll(async () => {
+        await browser.close()
+    })
+});
diff --git a/test/load.test.js b/test/load.test.js
new file mode 100644
index 0000000..9c8d3cc
--- /dev/null
+++ b/test/load.test.js
@@ -0,0 +1,16 @@
+/**
+ * @jest-environment jsdom
+ */
+import { setup } from '../src/setup'
+setup()
+import load from '../src/data/load'
+import * as data from './examples/fulladder.json'
+
+jest
+    .dontMock('fs');
+describe('button', () => {
+    it("loads without error", () => {
+        load(data)
+        // expect().not.toThrow()
+    });
+});
\ No newline at end of file
diff --git a/test/sample.test.js b/test/sample.test.js
index e4df856..c9b75d3 100644
--- a/test/sample.test.js
+++ b/test/sample.test.js
@@ -1,34 +1,20 @@
 /**
  * @jest-environment jsdom
  */
-
-const fs = require('fs');
-const path = require('path');
-const html = fs.readFileSync(path.resolve(__dirname, '../index.html'), 'utf8');
-
-const $ = global.jQuery = global.$ = require('jquery');
-
-document.documentElement.innerHTML = html.toString();
-
-require('jquery-ui-bundle');
-
-import { setup } from '../src/circuit'
-import { AndGate } from '../src/module'
-import { Array } from '../src/arrayHelpers'
+import { setup } from '../src/setup'
+setup()
+import AndGate from '../src/modules/AndGate'
 import { updateRestrictedElementsInScope } from '../src/restrictedElementDiv'
-window["Array"] = Array
+
 
 jest
     .dontMock('fs');
-describe('button', function () {    
-    it("validates that an restricted element is normal at first", function () {
-        window.restrictedElements = []
-        setup()
+describe('button', () => {
+    it("validates that an restricted element is normal at first", () => {
         expect(($('#restrictedElementsDiv--list').text())).toEqual(" ")
     });
-    it("validates that an restricted element is shown in restricted items div when it is used", function () {
+    it("validates that an restricted element is shown in restricted items div when it is used", () => {
         window.restrictedElements = ["AndGate"]
-        setup()
         new AndGate(40, 40)
         updateRestrictedElementsInScope()
         expect(($('#restrictedElementsDiv--list').text())).toEqual("AndGate")
diff --git a/test/save.test.js b/test/save.test.js
new file mode 100644
index 0000000..b685ab4
--- /dev/null
+++ b/test/save.test.js
@@ -0,0 +1,20 @@
+/**
+ * @jest-environment jsdom
+ */
+import { setup } from '../src/setup'
+setup()
+import load from '../src/data/load'
+import * as data from './examples/fulladder.json'
+import Input from '../src/modules/Input'
+import save from '../src/data/save';
+
+jest
+    .dontMock('fs');
+describe('button', () => {
+    it("Draw right without error", () => {
+        load(data)
+        window.logix_project_id = data.projectId
+        new Input(10,20);
+        expect(save).not.toThrow()
+    });
+});
\ No newline at end of file
diff --git a/test/subcircuit.test.js b/test/subcircuit.test.js
new file mode 100644
index 0000000..d089944
--- /dev/null
+++ b/test/subcircuit.test.js
@@ -0,0 +1,31 @@
+/**
+ * @jest-environment jsdom
+ */
+import { setup } from '../src/setup'
+setup()
+import load from '../src/data/load'
+import * as data from './examples/fulladder.json'
+import { updateSimulationSet, update } from '../src/engine';
+
+jest
+    .dontMock('fs');
+describe('button', () => {
+    it("Draw right without error", () => {
+        load(data)
+        // expect().not.toThrow()
+    });
+    const bools = [[0, 0, 0], [0, 0, 1], [0, 1, 0], [0, 1, 1], [1, 0, 0], [1, 0, 1], [1, 1, 0], [1, 1, 1]]
+    it.each(bools)("logic works", (val1,val2,val3) => {
+        const i1 = globalScope.Input[0];
+        const i2 = globalScope.Input[1];
+        const i3 = globalScope.Input[2];
+        const cout = globalScope.Output[1];
+        const sum = globalScope.Output[0];
+        i1.state = val1
+        i2.state = val2
+        i3.state = val3
+        updateSimulationSet(true);
+        update();
+        expect([cout.inp1.value, sum.inp1.value]).toEqual([(val1 & val2) | (val3 & val2) | (val1 & val3),val1^val2^val3])
+    });
+});
diff --git a/webpack.config.js b/webpack.config.js
index 087cd3f..cf17e4e 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,4 +1,5 @@
 const path = require('path');
+var webpack = require('webpack');
 
 module.exports = {
   entry: './src/app.js',
@@ -9,6 +10,12 @@ module.exports = {
   devServer: {
     contentBase: './dist'
   },
+  plugins: [
+    new webpack.ProvidePlugin({
+      $: "jquery",
+      jQuery: "jquery"
+    })
+  ],
   module: {
     rules: [
       {

From 12260cfcb1e3a25b482e9dbbcb372165614f8f1c Mon Sep 17 00:00:00 2001
From: shubhankarsharma00 <shubhankarsharma78@gmail.com>
Date: Mon, 29 Jun 2020 14:35:25 +0530
Subject: [PATCH 2/3] testing improved

---
 index.html                                    | 823 ++++++++++++------
 src/circuitElement.js                         |   1 -
 test/gates/decoders.test.js                   |  96 ++
 test/gates/gates.test.js                      | 270 +++++-
 test/gates/sequential.test.js                 | 234 +++++
 test/listenertest.test.js                     |   6 +-
 ...ple.test.js => restrictedElements.test.js} |   0
 7 files changed, 1167 insertions(+), 263 deletions(-)
 create mode 100644 test/gates/decoders.test.js
 create mode 100644 test/gates/sequential.test.js
 rename test/{sample.test.js => restrictedElements.test.js} (100%)

diff --git a/index.html b/index.html
index 8d6facd..32e5c2e 100644
--- a/index.html
+++ b/index.html
@@ -1,295 +1,604 @@
 <html>
-    <script src="dist/bundle.js"></script>    
-    <link rel="stylesheet" type="text/css" href="./node_modules/jquery-ui-dist/jquery-ui.css">
+  <script src="dist/bundle.js"></script>
+  <link
+    rel="stylesheet"
+    type="text/css"
+    href="./node_modules/jquery-ui-dist/jquery-ui.css"
+  />
 
-    <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  -->
-<!-- <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> -->
-<script>
+  <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  -->
+  <!-- <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> -->
+  <script>
     var userSignedIn = 1;
     var logix_project_id = 0;
-    var projectName = "Shuy"
-</script>
-<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+    var projectName = "Shubhankar's Test";
+  </script>
+  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
     <a class="navbar-brand" href="/">CircuitVerse</a>
-    <button class="navbar-toggler collapsed" type="button" data-toggle="collapse"
-        data-target="#bs-example-navbar-collapse-1" aria-controls="collapsedNavbar" aria-expanded="false"
-        aria-label="Toggle navigation">
-        <span class="navbar-toggler-icon"></span>
+    <button
+      class="navbar-toggler collapsed"
+      type="button"
+      data-toggle="collapse"
+      data-target="#bs-example-navbar-collapse-1"
+      aria-controls="collapsedNavbar"
+      aria-expanded="false"
+      aria-label="Toggle navigation"
+    >
+      <span class="navbar-toggler-icon"></span>
     </button>
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
-        <ul class="navbar-nav mr-auto noSelect pointerCursor" id="toolbar">
-            <li class="dropdown">
-                <a href="#" class="dropdown-toggle text-light" data-toggle="dropdown" role="button" aria-haspopup="true"
-                    aria-expanded="false">Project<span class="caret"></span></a>
-                <ul class="dropdown-menu">
-                    <li><a class="dropdown-item logixButton" id="newProject">New Project</a></li>
-                    <li><a class="dropdown-item logixButton" id="clearProject">Clear Project</a></li>
-                    <li><a class="dropdown-item logixButton" id="save">Save Online</a></li>
-                    <li><a class="dropdown-item logixButton" id="saveOffline">Save Offline</a></li>
-                    <li><a class="dropdown-item logixButton" id="createOpenLocalPrompt">Open Offline</a></li>
-                    <li><a class="dropdown-item logixButton" id="recoverProject">Recover project</a></li>
-                </ul>
+      <ul class="navbar-nav mr-auto noSelect pointerCursor" id="toolbar">
+        <li class="dropdown">
+          <a
+            href="#"
+            class="dropdown-toggle text-light"
+            data-toggle="dropdown"
+            role="button"
+            aria-haspopup="true"
+            aria-expanded="false"
+            >Project<span class="caret"></span
+          ></a>
+          <ul class="dropdown-menu">
+            <li>
+              <a class="dropdown-item logixButton" id="newProject"
+                >New Project</a
+              >
             </li>
-            <li class="dropdown">
-                <a href="#" class="dropdown-toggle text-light" data-toggle="dropdown" role="button" aria-haspopup="true"
-                    aria-expanded="false">Circuit<span class="caret"></span></a>
-                <ul class="dropdown-menu">
-                    <li><a class="dropdown-item logixButton" id="newCircuit">New Circuit +</a></li>
-                    <li><a class="dropdown-item logixButton" id="createSubCircuitPrompt">Insert SubCircuit</a></li>
-                </ul>
+            <li>
+              <a class="dropdown-item logixButton" id="clearProject"
+                >Clear Project</a
+              >
             </li>
-            <li class="dropdown">
-                <a href="#" class="dropdown-toggle text-light" data-toggle="dropdown" role="button" aria-haspopup="true"
-                    aria-expanded="false">Tools<span class="caret"></span></a>
-                <ul class="dropdown-menu">
-                    <li><a class="dropdown-item logixButton" id="createCombinationalAnalysisPrompt">Combinational
-                            Analysis</a></li>
-                    <li><a class="dropdown-item logixButton" id="startPlot">Start Plot</a></li>
-                    <li><a class="dropdown-item logixButton" id="createSaveAsImgPrompt">Download Image</a>
-                </ul>
+            <li>
+              <a class="dropdown-item logixButton" id="save">Save Online</a>
             </li>
-            <li class="">
-                <a href="https://docs.circuitverse.org" class="text-light" target="_blank" role="button"
-                    aria-haspopup="true" aria-expanded="false">Help</a>
+            <li>
+              <a class="dropdown-item logixButton" id="saveOffline"
+                >Save Offline</a
+              >
             </li>
-        </ul>
-        <span class="projectName noSelect defaultCursor font-weight-bold" id="projectName">
-            Untitled
-        </span>
-        <ul class="nav navbar-nav noSelect pointerCursor pull-right">
-            <li class="dropdown pull-right">
+            <li>
+              <a class="dropdown-item logixButton" id="createOpenLocalPrompt"
+                >Open Offline</a
+              >
             </li>
-        </ul>
+            <li>
+              <a class="dropdown-item logixButton" id="recoverProject"
+                >Recover Project</a
+              >
+            </li>
+          </ul>
+        </li>
+        <li class="dropdown">
+          <a
+            href="#"
+            class="dropdown-toggle text-light"
+            data-toggle="dropdown"
+            role="button"
+            aria-haspopup="true"
+            aria-expanded="false"
+            >Circuit<span class="caret"></span
+          ></a>
+          <ul class="dropdown-menu">
+            <li>
+              <a class="dropdown-item logixButton" id="newCircuit"
+                >New Circuit +</a
+              >
+            </li>
+            <li>
+              <a class="dropdown-item logixButton" id="createSubCircuitPrompt"
+                >Insert SubCircuit</a
+              >
+            </li>
+          </ul>
+        </li>
+        <li class="dropdown">
+          <a
+            href="#"
+            class="dropdown-toggle text-light"
+            data-toggle="dropdown"
+            role="button"
+            aria-haspopup="true"
+            aria-expanded="false"
+            >Tools<span class="caret"></span
+          ></a>
+          <ul class="dropdown-menu">
+            <li>
+              <a
+                class="dropdown-item logixButton"
+                id="createCombinationalAnalysisPrompt"
+                >Combinational Analysis</a
+              >
+            </li>
+            <li>
+              <a class="dropdown-item logixButton" id="bitconverter"
+                >Hex-Bin-Dec-Converter</a
+              >
+            </li>
+            <li>
+              <a class="dropdown-item logixButton" id="startPlot">Start Plot</a>
+            </li>
+            <li>
+              <a class="dropdown-item logixButton" id="createSaveAsImgPrompt"
+                >Download Image</a
+              >
+            </li>
+          </ul>
+        </li>
+        <li class="">
+          <a
+            href="https://docs.circuitverse.org"
+            class="text-light"
+            target="_blank"
+            role="button"
+            aria-haspopup="true"
+            aria-expanded="false"
+            >Help</a
+          >
+        </li>
+      </ul>
+      <span
+        class="projectName noSelect defaultCursor font-weight-bold"
+        id="projectName"
+      >
+        Untitled
+      </span>
+      <ul class="nav navbar-nav noSelect pointerCursor pull-right">
+        <li class="dropdown pull-right">
+          <a class="navbar-nav nav-link"> Sign In </a>
+        </li>
+      </ul>
     </div>
     <!-- /.navbar-collapse -->
-</nav>
-<div>
-    <div class="side left" id="sideBar" style="overflow-y: scroll;overflow-x: hidden">
-        <div class="modules noSelect defaultCursor">
-            <div id="modules-header">Circuit Elements</div>
-            <div class="accordion" id="menu">
-            </div>
-        </div>
-        <div class="moduleProperty effect1" id="moduleProperty">
-            <div id="moduleProperty-title" class="noSelect pointerCursor">Properties</div>
-            <div id="moduleProperty-inner"></div>
-            <!-- <div id="moduleProperty-toolTip"></div> -->
-        </div>
+  </nav>
+  <div>
+    <div class="side left" id="sideBar">
+      <div class="modules noSelect defaultCursor">
+        <div id="modules-header">Circuit Elements</div>
+        <div class="accordion" id="menu"></div>
+      </div>
+      <div class="moduleProperty effect1" id="moduleProperty">
+        <div id="moduleProperty-title" class="noSelect">Properties</div>
+        <div id="moduleProperty-inner"></div>
+        <!-- <div id="moduleProperty-toolTip"></div> -->
+      </div>
     </div>
     <div class="rightPanel">
-        <div id="tabsBar" class="noSelect pointerCursor">
-            <!-- <div> Circuits: </div> -->
+      <div id="tabsBar" class="noSelect pointerCursor">
+        <!-- <div> Circuits: </div> -->
+      </div>
+      <div class="simulation" id="simulation">
+        <div id="restrictedDiv" class="alert alert-danger display--none"></div>
+        <div id="restrictedElementsDiv" class="alert alert-danger">
+          <div>
+            Restricted elements used:
+            <span id="restrictedElementsDiv--list"> </span>
+          </div>
         </div>
-        <div class="simulation" id="simulation">
-            <div id="restrictedDiv" class="alert alert-danger display--none">
-            </div>
-            <div id="restrictedElementsDiv" class="alert alert-danger">
-                <div> Restricted elements used: <span id="restrictedElementsDiv--list"> </span></div>
-            </div>
-            <div id="MessageDiv">
-            </div>
-            <div class="canvasArea" id="canvasArea">
-                <canvas id="backgroundArea"
-                    style="position: absolute; left: 0; top: 0; z-index: 0; width:100%;height:100%"></canvas>
-                <canvas id="simulationArea"
-                    style="position: absolute; left: 0; top: 0; z-index: 1; width:100%;height:100%"></canvas>
-                <div id="plot">
-                    <canvas id="plotArea" style="position: absolute; left: 0; top: 0; z-index: 2"></canvas>
-                </div>
-                <div id="miniMap">
-                    <canvas id="miniMapArea" style="position: absolute; left:0; top: 0; z-index: 3;"></canvas>
-                </div>
-                <div id="contextMenu" oncontextmenu="return false;">
-                    <ul>
-                        <li onclick="menuItemClicked(2)"><a>Paste</a></li>
-                        <li onclick="menuItemClicked(0)"><a>Copy</a></li>
-                        <li onclick="menuItemClicked(1)"><a>Cut</a></li>
-                        <li onclick="menuItemClicked(3)"><a>Delete</a></li>
-                        <li onclick="menuItemClicked(4)"><a>Undo</a></li>
-                        <li onclick="menuItemClicked(5)"><a>New Circuit</a></li>
-                        <li onclick="menuItemClicked(6)"><a>Insert SubCircuit</a></li>
-                        <li onclick="menuItemClicked(7)"><a>Center Focus</a></li>
-                    </ul>
-                </div>
-                <div id="Help">
-                    <!-- <canvas id="miniMapArea" style="position: absolute; left:0; top: 0; z-index: 2;"></canvas> -->
-                </div>
-                <div style="position:absolute; right:30px; top:30px; z-index:100">
-                    <button type="button" class="btn zoomButton btn-lg"
-                        id="zoomIn">
-                        <span class="glyphicon glyphicon-zoom-in" aria-hidden="true"></span>
-                    </button>
-                </div>
-                <div class="sk-folding-cube loadingIcon"
-                    style="display:none;position:absolute; right:50%; bottom:50%; z-index:100">
-                    <div class="sk-cube1 sk-cube"></div>
-                    <div class="sk-cube2 sk-cube"></div>
-                    <div class="sk-cube4 sk-cube"></div>
-                    <div class="sk-cube3 sk-cube"></div>
-                </div>
-                <div style="position:absolute; right:60px; top:30px; z-index:100">
-                    <button type="button" class="btn zoomButton btn-lg" onclick="globalScope.centerFocus(false)">
-                        <span class="glyphicon glyphicon-screenshot" aria-hidden="true"></span>
-                    </button>
-                </div>
-                <div style="position:absolute; right:90px; top:30px; z-index:100">
-                    <button type="button" class="btn zoomButton btn-lg"
-                        onclick="changeScale(-0.2,'zoomButton','zoomButton',2)">
-                        <span class="glyphicon glyphicon-zoom-out" aria-hidden="true"></span>
-                    </button>
-                </div>
-                <div style="position:absolute; right:120px; top:30px; z-index:100">
-                    <button type="button" class="btn zoomButton btn-lg" onclick="undo()">
-                        <span class="glyphicon glyphicon-repeat" aria-hidden="true"></span>
-                    </button>
-                </div>
-                <div style="position:absolute; right:150px; top:30px; z-index:100">
-                    <button type="button" class="btn zoomButton btn-lg" onclick="delete_selected()">
-                        <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
-                    </button>
-                </div>
-                <div id="layoutDialog" style="display:none" class="" title="Layout Options">
-                    <div class="container">
-                        <div class="panel-heading">Layout options</div>
-                        <div class="">
-                            Width:
-                            <button type="button" class="btn zoomButton btn-lg" onclick="decreaseLayoutWidth()">
-                                <span class="glyphicon glyphicon-minus" aria-hidden="true"></span>
-                            </button>
-                            <button type="button" class="btn zoomButton btn-lg" onclick="increaseLayoutWidth()">
-                                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
-                            </button>
-                        </div>
-                        <div class="">
-                            Height:
-                            <button type="button" class="btn zoomButton btn-lg" onclick="decreaseLayoutHeight()">
-                                <span class="glyphicon glyphicon-minus" aria-hidden="true"></span>
-                            </button>
-                            <button type="button" class="btn zoomButton btn-lg" onclick="increaseLayoutHeight()">
-                                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
-                            </button>
-                        </div>
-                        <div class="">
-                            Reset all nodes:
-                            <button type="button" class="btn zoomButton btn-lg" onclick="layoutResetNodes()">
-                                <span class="glyphicon glyphicon-refresh" aria-hidden="true"></span>
-                            </button>
-                        </div>
-                        <div class="">
-                            Title:
-                            <button type="button" class="btn zoomButton btn-lg" onclick="layoutTitleUp()">
-                                <span class="glyphicon glyphicon-arrow-up" aria-hidden="true"></span>
-                            </button>
-                            <button type="button" class="btn zoomButton btn-lg" onclick="layoutTitleDown()">
-                                <span class="glyphicon glyphicon-arrow-down" aria-hidden="true"></span>
-                            </button>
-                            <button type="button" class="btn zoomButton btn-lg" onclick="layoutTitleLeft()">
-                                <span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span>
-                            </button>
-                            <button type="button" class="btn zoomButton btn-lg" onclick="layoutTitleRight()">
-                                <span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span>
-                            </button>
-                        </div>
-                        <div class="">
-                            <p>Title Enabled : <label class='switch'>
-                                    <input type='checkbox' checked id="toggleLayoutTitle" onclick="toggleLayoutTitle()">
-                                    <span class='slider2'></span> </label></p>
-                        </div>
-                        <div class="">
-                            Save:
-                            <button type="button" class="btn zoomButton btn-lg" onclick="saveLayout()">
-                                <span class="glyphicon glyphicon glyphicon-ok" aria-hidden="true"></span>
-                            </button>
-                            Cancel:
-                            <button type="button" class="btn zoomButton btn-lg" onclick="cancelLayout()">
-                                <span class="glyphicon glyphicon glyphicon-remove" aria-hidden="true"></span>
-                            </button>
-                        </div>
-                    </div>
-                </div>
+        <div id="MessageDiv"></div>
+        <div class="canvasArea" id="canvasArea">
+          <canvas
+            id="backgroundArea"
+            style="position: absolute; left: 0; top: 0; z-index: 0; width:100%;height:100%"
+          ></canvas>
+          <canvas
+            id="simulationArea"
+            style="position: absolute; left: 0; top: 0; z-index: 1; width:100%;height:100%"
+          ></canvas>
+          <div id="plot">
+            <canvas
+              id="plotArea"
+              style="position: absolute; left: 0; top: 0; z-index: 2"
+            ></canvas>
+          </div>
+          <div id="miniMap">
+            <canvas
+              id="miniMapArea"
+              style="position: absolute; left:0; top: 0; z-index: 3;"
+            ></canvas>
+          </div>
+          <div id="contextMenu" oncontextmenu="return false;">
+            <ul>
+              <li onclick="menuItemClicked(2)"><a>Paste</a></li>
+              <li onclick="menuItemClicked(0)"><a>Copy</a></li>
+              <li onclick="menuItemClicked(1)"><a>Cut</a></li>
+              <li onclick="menuItemClicked(3)"><a>Delete</a></li>
+              <li onclick="menuItemClicked(4)"><a>Undo</a></li>
+              <li onclick="menuItemClicked(5)"><a>New Circuit</a></li>
+              <li onclick="menuItemClicked(6)"><a>Insert SubCircuit</a></li>
+              <li onclick="menuItemClicked(7)"><a>Center Focus</a></li>
+            </ul>
+          </div>
+          <div id="Help">
+            <!-- <canvas id="miniMapArea" style="position: absolute; left:0; top: 0; z-index: 2;"></canvas> -->
+          </div>
+          <div style="position:absolute; right:30px; top:30px; z-index:100">
+            <button type="button" class="btn zoomButton btn-lg" id="zoomIn">
+              <span
+                class="fa fa-search-plus"
+                aria-hidden="true"
+                title="Zoom In"
+              ></span>
+            </button>
+          </div>
+          <div
+            class="sk-folding-cube loadingIcon"
+            style="display:none;position:absolute; right:50%; bottom:50%; z-index:100"
+          >
+            <div class="sk-cube1 sk-cube"></div>
+            <div class="sk-cube2 sk-cube"></div>
+            <div class="sk-cube4 sk-cube"></div>
+            <div class="sk-cube3 sk-cube"></div>
+          </div>
+          <div style="position:absolute; right:60px; top:30px; z-index:100">
+            <button
+              type="button"
+              class="btn zoomButton btn-lg"
+              onclick="globalScope.centerFocus(false)"
+            >
+              <span
+                class="fa fa-crosshairs"
+                aria-hidden="true"
+                title="Zoom To Fit"
+              ></span>
+            </button>
+          </div>
+          <div style="position:absolute; right:90px; top:30px; z-index:100">
+            <button type="button" class="btn zoomButton btn-lg" id="zoomOut">
+              <span
+                class="fa fa-search-minus"
+                aria-hidden="true"
+                title="Zoom Out"
+              ></span>
+            </button>
+          </div>
+          <div style="position:absolute; right:120px; top:30px; z-index:100">
+            <button type="button" class="btn zoomButton btn-lg" id="undoButton">
+              <span
+                class="fas fa-undo-alt"
+                aria-hidden="true"
+                title="Undo"
+              ></span>
+            </button>
+          </div>
+          <div style="position:absolute; right:150px; top:30px; z-index:100">
+            <button
+              type="button"
+              class="btn zoomButton btn-lg"
+              id="deleteSelected"
+            >
+              <span
+                class="fas fa-trash-alt"
+                aria-hidden="true"
+                title="Delete"
+              ></span>
+            </button>
+          </div>
+          <div
+            id="layoutDialog"
+            style="display:none;Width:210px;"
+            class=""
+            title="Layout Options"
+          >
+            <div class="container">
+              <div class="panel-heading">Layout options</div>
+              <div class="">
+                Width:
+                <button
+                  type="button"
+                  class="btn zoomButton btn-lg"
+                  id="decreaseLayoutWidth"
+                >
+                  <span
+                    class="fa fa-minus"
+                    aria-hidden="true"
+                    title="Decrease Width"
+                  ></span>
+                </button>
+                <button
+                  type="button"
+                  class="btn zoomButton btn-lg"
+                  id="increaseLayoutWidth"
+                >
+                  <span
+                    class="fa fa-plus"
+                    aria-hidden="true"
+                    title="Increase Width"
+                  ></span>
+                </button>
+              </div>
+              <div class="">
+                Height:
+                <button
+                  type="button"
+                  class="btn zoomButton btn-lg"
+                  id="decreaseLayoutHeight"
+                >
+                  <span
+                    class="fa fa-minus"
+                    aria-hidden="true"
+                    title="Decrease Height"
+                  ></span>
+                </button>
+                <button
+                  type="button"
+                  class="btn zoomButton btn-lg"
+                  id="increaseLayoutHeight"
+                >
+                  <span
+                    class="fa fa-plus"
+                    aria-hidden="true"
+                    title="Increase Height"
+                  ></span>
+                </button>
+              </div>
+              <div class="">
+                Reset all nodes:
+                <button
+                  type="button"
+                  class="btn zoomButton btn-lg"
+                  id="layoutResetNodes"
+                >
+                  <span
+                    class="fa fa-sync"
+                    aria-hidden="true"
+                    title="Reset"
+                  ></span>
+                </button>
+              </div>
+              <div class="">
+                Title:
+                <button
+                  type="button"
+                  class="btn zoomButton btn-lg"
+                  id="layoutTitleUp"
+                >
+                  <span
+                    class="fa fa-arrow-up"
+                    aria-hidden="true"
+                    title="Up"
+                  ></span>
+                </button>
+                <button
+                  type="button"
+                  class="btn zoomButton btn-lg"
+                  id="layoutTitleDown"
+                >
+                  <span
+                    class="fa fa-arrow-down"
+                    aria-hidden="true"
+                    title="Down"
+                  ></span>
+                </button>
+                <button
+                  type="button"
+                  class="btn zoomButton btn-lg"
+                  id="layoutTitleLeft"
+                >
+                  <span
+                    class="fa fa-arrow-left"
+                    aria-hidden="true"
+                    title="Left"
+                  ></span>
+                </button>
+                <button
+                  type="button"
+                  class="btn zoomButton btn-lg"
+                  id="layoutTitleRight"
+                >
+                  <span
+                    class="fa fa-arrow-right"
+                    aria-hidden="true"
+                    title="Right"
+                  ></span>
+                </button>
+              </div>
+              <div class="">
+                <p>
+                  Title Enabled :
+                  <label class="switch">
+                    <input
+                      type="checkbox"
+                      checked
+                      id="toggleLayoutTitle"
+                      id="toggleLayoutTitle"
+                    />
+                    <span class="slider2" title="Title"></span>
+                  </label>
+                </p>
+              </div>
+              <div class="">
+                Save:
+                <button
+                  type="button"
+                  class="btn zoomButton btn-lg"
+                  id="saveLayout"
+                >
+                  <span
+                    class="fa fa-check"
+                    aria-hidden="true"
+                    title="Save Layout"
+                  ></span>
+                </button>
+                Cancel:
+                <button
+                  type="button"
+                  class="btn zoomButton btn-lg"
+                  id="cancelLayout"
+                >
+                  <span
+                    class="fa fa-times"
+                    aria-hidden="true"
+                    title="Cancel"
+                  ></span>
+                </button>
+              </div>
             </div>
+          </div>
         </div>
-        <div id="combinationalAnalysis" style="display:none;" title="BooleanLogicTable"></div>
-        <div id="insertSubcircuitDialog" style="display:none;" title="Insert SubCircuit"></div>
-        <div id="openProjectDialog" style="display:none;" title="Open Project"></div>
+      </div>
+      <div
+        id="combinationalAnalysis"
+        style="display:none;"
+        title="BooleanLogicTable"
+      ></div>
+      <div id="bitconverterprompt" title="Dec-Bin-Hex-Converter"></div>
+      <div
+        id="insertSubcircuitDialog"
+        class="subcircuitdialog"
+        title="Insert SubCircuit"
+      ></div>
+      <div
+        id="openProjectDialog"
+        style="display:none;"
+        title="Open Project"
+      ></div>
     </div>
     <!-- Right panel -->
     <div id="saveImageDialog" style="display:none;" title="Render Image">
-        <p>
-            <label class="option inline"><input type="radio" name="imgType" value="png" checked="checked">PNG</label>
-            <label class="option inline"><input type="radio" name="imgType" value="jpeg">JPEG</label>
-            <label class="option inline"> <input type="radio" name="imgType" value="svg">SVG</label>
-            <label class="option inline"> <input type="radio" name="imgType" value="bmp">BMP</label>
-            <label class="option inline"> <input type="radio" name="imgType" value="gif">GIF</label>
-            <label class="option inline"> <input type="radio" name="imgType" value="tiff">TIFF</label>
-        </p>
-        <p>
-            <label class="option inline"><input type="radio" name="view" value="full"> Full Circuit View</label>
-            <label class="option inline"> <input type="radio" name="view" value="current" checked="checked">Current
-                View</label>
-        </p>
-        <p>
-            <label class="option inline"><input type="checkbox" name="transparent" value="transparent"> Transparent
-                Background</label>
-        </p>
-        <p>
-            Resolution:
-            <label class="option inline"> <input type="radio" name="resolution" value="1" checked="checked">1x</label>
-            <label class="option inline"><input type="radio" name="resolution" value="2"> 2x</label>
-            <label class="option inline"> <input type="radio" name="resolution" value="4">4x</label>
-        </p>
+      <p>
+        <label class="option inline"
+          ><input
+            type="radio"
+            name="imgType"
+            value="png"
+            checked="checked"
+          />PNG</label
+        >
+        <label class="option inline"
+          ><input type="radio" name="imgType" value="jpeg" />JPEG</label
+        >
+        <label class="option inline">
+          <input type="radio" name="imgType" value="svg" />SVG</label
+        >
+        <label class="option inline">
+          <input type="radio" name="imgType" value="bmp" />BMP</label
+        >
+        <label class="option inline">
+          <input type="radio" name="imgType" value="gif" />GIF</label
+        >
+        <label class="option inline">
+          <input type="radio" name="imgType" value="tiff" />TIFF</label
+        >
+      </p>
+      <p>
+        <label class="option inline"
+          ><input type="radio" name="view" value="full" /> Full Circuit
+          View</label
+        >
+        <label class="option inline">
+          <input
+            type="radio"
+            name="view"
+            value="current"
+            checked="checked"
+          />Current View</label
+        >
+      </p>
+      <p>
+        <label class="option inline"
+          ><input type="checkbox" name="transparent" value="transparent" />
+          Transparent Background</label
+        >
+      </p>
+      <p>
+        Resolution:
+        <label class="option inline">
+          <input
+            type="radio"
+            name="resolution"
+            value="1"
+            checked="checked"
+          />1x</label
+        >
+        <label class="option inline"
+          ><input type="radio" name="resolution" value="2" /> 2x</label
+        >
+        <label class="option inline">
+          <input type="radio" name="resolution" value="4" />4x</label
+        >
+      </p>
     </div>
     <script>
       var embed = false;
       var listenToSimulator = true;
       var userSignedIn = true;
-      var restrictedElements = []
+      var restrictedElements = [];
     </script>
-    <!--<script src="/js/UX.js"></script>-
-    ->
     <!-- on hover for dropdowns -->
     <script>
-            $('.dropdown-toggle').hover(function () {
-
-                $('.dropdown.open').removeClass('open');
-                $(this).parent('.dropdown').addClass('open');
-            });
+      $(".dropdown-toggle").hover(function() {
+        $(".dropdown.open").removeClass("open");
+        $(this)
+          .parent(".dropdown")
+          .addClass("open");
+      });
       //    $('.dropdown-toggle').onClick( function() {
       //
       //      $(this).parent('.dropdown').addClass('open');
       //    });
     </script>
     <link rel="stylesheet" type="text/css" href="./css/UX.css">
-    <!-- <link rel="stylesheet" type="text/css" href="./node_modules/jquery-ui-dist/jquery-ui.theme.css"> -->
     <link rel="stylesheet" type="text/css" href="./css/restrictedElements.css">
     <link rel="stylesheet" type="text/css" href="./css/simulator.css">
-    <!-- 
-    <script src="/js/modules.js"></script>
-    <script src="/js/listeners.js"></script>
-    <script src="/js/logix.js"></script>
-    <script src="./SAP_DATA.js"></script> 
-    <script src="/js/utils.js"></script>  
-    <script src="/js/engine.js"></script>
-    <script src="/js/Plot.js"></script>
-    <script src="/js/Node.js"></script>
-    <script src="/js/wire.js"></script>
-    <script src="/js/subcircuit.js"></script>
-    <script src="/js/RGBLedMatrix.js"></script>
-    <script src="/js/sequential.js"></script>
-    <script src="/js/ram.js"></script>
-    <script src="/js/eeprom.js"></script>
-    <script src="/js/Counter.js"></script>
-    <script src="/js/canvasApi.js"></script>
-    <script src="/js/data.js"></script>
-    <script src="/js/eventQueue.js"></script>
-    <script src="/js/miniMap.js"></script>
-    <script src="/js/layout.js"></script>
-    <script src="/js/testBench.js"></script>
-    <script src="/js/verilog.js"></script>
-    <script type="text/javascript" src="/js/metadata.json"></script>
-    <% if @project.nil? or @project.assignment_id.nil? %>
-      <script src="/js/combinationalAnalysis.js"></script>
-      <script src="/js/Quin_McCluskey.js"></script>
-    <% end %>
-    -->
-    <div>
\ No newline at end of file
+    <!-- <script src="./SAP_DATA.js"></script> -->
+
+    <!---issue reporting-system----->
+    <div class="report-sidebar">
+      <a
+        type="button"
+        id="reportIssue"
+        class="btn btn-primary text-light"
+        data-toggle="modal"
+        data-target=".issue"
+      >
+        <span class="fa fa-bug"></span>&nbsp;&nbsp;Report an issue</a
+      >
+    </div>
+    <!---issue reporting system-modal---->
+    <div
+      class="modal fade issue"
+      tabindex="-1"
+      role="dialog"
+      aria-labelledby="mySmallModalLabel"
+      aria-hidden="true"
+    >
+      <div class="modal-dialog modal-sm">
+        <div class="modal-content">
+          <div class="container my-2">
+            <button
+              type="button"
+              class="close"
+              data-dismiss="modal"
+              aria-label="Close"
+            >
+              <span aria-hidden="true">&times;</span>
+            </button>
+            <div class="container  text-center">
+              <h4>Report an issue</h4>
+            </div>
+            <hr />
+            <div class="container my-2 text-center" id="result"></div>
+            <label id="report-label" style="font-weight: lighter"
+              ><b>Describe your issue:</b></label
+            >
+            <div class="form-group">
+              <textarea
+                class="form-control border-primary"
+                id="issuetext"
+                rows="3"
+              ></textarea>
+            </div>
+            <div class="container">
+              <center>
+                <button type="submit" id="report" class="btn btn-primary">
+                  Report
+                </button>
+              </center>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</html>
diff --git a/src/circuitElement.js b/src/circuitElement.js
index c6c3a98..8c6ac50 100644
--- a/src/circuitElement.js
+++ b/src/circuitElement.js
@@ -95,7 +95,6 @@ export default class CircuitElement {
      * adds the element to scopeList
      */
     baseSetup() {
-        console.log(this.objectType);
         this.scope[this.objectType].push(this);
     }
 
diff --git a/test/gates/decoders.test.js b/test/gates/decoders.test.js
new file mode 100644
index 0000000..4a0e558
--- /dev/null
+++ b/test/gates/decoders.test.js
@@ -0,0 +1,96 @@
+/**
+ * @jest-environment jsdom
+ */
+import { setup } from '../../src/setup'
+setup()
+import Multiplexer from '../../src/modules/Multiplexer'
+import Demultiplexer from '../../src/modules/Demultiplexer'
+import Input from '../../src/modules/Input'
+import { update, updateSimulationSet } from '../../src/engine'
+
+/*
+ * Multiplexer test
+ */
+describe('Multiplexer works', () => {
+    /*
+     * basic setup
+     */
+    const a = new Multiplexer(40, 40);
+    const n1 = a.nodeList[0]
+    const n2 = a.nodeList[1]
+    const n3 = a.nodeList[2]
+    const n4 = a.nodeList[3]
+    const i1 = new Input(10, 30);
+    const i2 = new Input(10, 50);
+    const i3 = new Input(10, 50);
+    i1.output1.connect(n1);
+    n1.connect(i1.output1);
+    i2.output1.connect(n2);
+    n2.connect(i2.output1);
+    i3.output1.connect(n4);
+    n4.connect(i3.output1);
+    /*
+     * test cases
+     */
+    it("draws correctly", () => {
+
+    })
+    var bools = [[0, 0], [0, 1], [1, 0], [1, 1]];
+    it.each(bools)("logic works for control signal 1", (val1, val2) => {
+        i1.state = val1
+        i2.state = val2
+        i3.state = 1
+        updateSimulationSet(true);
+        update();
+        expect(n3.value).toBe(val2);
+    })
+    it.each(bools)("logic works for control signal 0", (val1, val2) => {
+        i1.state = val1
+        i2.state = val2
+        i3.state = 0
+        updateSimulationSet(true);
+        update();
+        expect(n3.value).toBe(val1);
+    })
+})
+
+/*
+ * Demultiplexer test
+ */
+describe('Demultiplexer works', () => {
+    /*
+     * basic setup
+     */
+    const a = new Demultiplexer(40, 40);
+    const n1 = a.nodeList[0]
+    const n2 = a.nodeList[1]
+    const n3 = a.nodeList[2]
+    const n4 = a.nodeList[3]
+    const i1 = new Input(10, 30);
+    const i3 = new Input(10, 50);
+    i1.output1.connect(n1);
+    n1.connect(i1.output1);
+    i3.output1.connect(n4);
+    n4.connect(i3.output1);
+    /*
+     * test cases
+     */
+    it("draws correctly", () => {
+
+    })
+    var bools = [0,1];
+    it.each(bools)("logic works for control signal 1", (val1) => {
+        i1.state = val1
+        i3.state = 1
+        updateSimulationSet(true);
+        update();
+        expect([n2.value,n3.value]).toEqual([0,val1]);
+    })
+    it.each(bools)("logic works for control signal 0", (val1) => {
+        i1.state = val1
+        i3.state = 0
+        updateSimulationSet(true);
+        update();
+        expect([n2.value, n3.value]).toEqual([val1,0]);
+    })
+})
\ No newline at end of file
diff --git a/test/gates/gates.test.js b/test/gates/gates.test.js
index bcbf0a4..c3a7ce2 100644
--- a/test/gates/gates.test.js
+++ b/test/gates/gates.test.js
@@ -4,10 +4,19 @@
 import { setup } from '../../src/setup'
 setup()
 import AndGate from '../../src/modules/AndGate'
+import OrGate from '../../src/modules/OrGate';
+import XnorGate from '../../src/modules/XnorGate';
+import XorGate from '../../src/modules/XorGate';
+import NandGate from '../../src/modules/NandGate';
+import NorGate from '../../src/modules/NorGate';
+import NotGate from '../../src/modules/NotGate';
 import Input from '../../src/modules/Input'
 import { update, updateSimulationSet } from '../../src/engine'
 
-describe('and gate works', () => {
+/*
+ * AndGate test
+ */
+describe('AndGate works', () => {
     /*
      * basic setup
      */
@@ -29,11 +38,268 @@ describe('and gate works', () => {
     })
     var bools = [[0,0],[0,1],[1,0],[1,1]];
     it.each(bools)("logic works", (val1,val2) => {
-        console.log(val1,val2)
         i1.state = val1
         i2.state = val2
         updateSimulationSet(true);
         update();
         expect(n3.value).toBe(val1&val2);
     })
+    it('can change input node', () => {
+        const x = a.changeInputSize(3)
+        expect(x.inp.length).toBe(3)
+    });
+});
+
+/*
+ * OrGate test
+ */
+describe('OrGate works', () => {
+    /*
+     * basic setup
+     */
+    const a = new OrGate(40, 40);
+    const n1 = a.nodeList[0]
+    const n2 = a.nodeList[1]
+    const n3 = a.nodeList[2]
+    const i1 = new Input(10, 30);
+    const i2 = new Input(10, 50);
+    i1.output1.connect(n1);
+    n1.connect(i1.output1);
+    i2.output1.connect(n2);
+    n2.connect(i2.output1);
+    /*
+     * test cases
+     */
+    it("draws correctly", () => {
+
+    })
+    var bools = [[0, 0], [0, 1], [1, 0], [1, 1]];
+    it.each(bools)("logic works", (val1, val2) => {
+        i1.state = val1
+        i2.state = val2
+        updateSimulationSet(true);
+        update();
+        expect(n3.value).toBe(val1 | val2);
+    })
+    it('can change input node', () => {
+        const x = a.changeInputSize(3)
+        expect(x.inp.length).toBe(3)
+    });
+});
+
+/*
+ * XorGate test
+ */
+describe('XorGate works', () => {
+    /*
+     * basic setup
+     */
+    const a = new XorGate(40, 40);
+    const n1 = a.nodeList[0]
+    const n2 = a.nodeList[1]
+    const n3 = a.nodeList[2]
+    const i1 = new Input(10, 30);
+    const i2 = new Input(10, 50);
+    i1.output1.connect(n1);
+    n1.connect(i1.output1);
+    i2.output1.connect(n2);
+    n2.connect(i2.output1);
+    /*
+     * test cases
+     */
+    it("draws correctly", () => {
+
+    })
+    var bools = [[0, 0], [0, 1], [1, 0], [1, 1]];
+    it.each(bools)("logic works", (val1, val2) => {
+        i1.state = val1
+        i2.state = val2
+        updateSimulationSet(true);
+        update();
+        expect(n3.value).toBe(val1 ^ val2);
+    })
+    it('can change input node', () => {
+        const x = a.changeInputSize(3)
+        expect(x.inp.length).toBe(3)
+    });
+});
+
+
+/*
+ * XorGate test
+ */
+describe('XorGate works', () => {
+    /*
+     * basic setup
+     */
+    const a = new XorGate(40, 40);
+    const n1 = a.nodeList[0]
+    const n2 = a.nodeList[1]
+    const n3 = a.nodeList[2]
+    const i1 = new Input(10, 30);
+    const i2 = new Input(10, 50);
+    i1.output1.connect(n1);
+    n1.connect(i1.output1);
+    i2.output1.connect(n2);
+    n2.connect(i2.output1);
+    /*
+     * test cases
+     */
+    it("draws correctly", () => {
+
+    })
+    var bools = [[0, 0], [0, 1], [1, 0], [1, 1]];
+    it.each(bools)("logic works", (val1, val2) => {
+        i1.state = val1
+        i2.state = val2
+        updateSimulationSet(true);
+        update();
+        expect(n3.value).toBe(val1 ^ val2);
+    })
+    it('can change input node', () => {
+        const x = a.changeInputSize(3)
+        expect(x.inp.length).toBe(3)
+    });
+});
+
+/*
+ * XnorGate test
+ */
+describe('XnorGate works', () => {
+    /*
+     * basic setup
+     */
+    const a = new XnorGate(40, 40);
+    const n1 = a.nodeList[0]
+    const n2 = a.nodeList[1]
+    const n3 = a.nodeList[2]
+    const i1 = new Input(10, 30);
+    const i2 = new Input(10, 50);
+    i1.output1.connect(n1);
+    n1.connect(i1.output1);
+    i2.output1.connect(n2);
+    n2.connect(i2.output1);
+    /*
+     * test cases
+     */
+    it("draws correctly", () => {
+
+    })
+    var bools = [[0, 0], [0, 1], [1, 0], [1, 1]];
+    it.each(bools)("logic works", (val1, val2) => {
+        i1.state = val1
+        i2.state = val2
+        updateSimulationSet(true);
+        update();
+        expect(n3.value).toEqual(+!(val1 ^ val2));
+    })
+    it('can change input node', () => {
+        const x = a.changeInputSize(3)
+        expect(x.inp.length).toBe(3)
+    });
+});
+
+
+/*
+ * NorGate test
+ */
+describe('NorGate works', () => {
+    /*
+     * basic setup
+     */
+    const a = new NorGate(40, 40);
+    const n1 = a.nodeList[0]
+    const n2 = a.nodeList[1]
+    const n3 = a.nodeList[2]
+    const i1 = new Input(10, 30);
+    const i2 = new Input(10, 50);
+    i1.output1.connect(n1);
+    n1.connect(i1.output1);
+    i2.output1.connect(n2);
+    n2.connect(i2.output1);
+    /*
+     * test cases
+     */
+    it("draws correctly", () => {
+
+    })
+    var bools = [[0, 0], [0, 1], [1, 0], [1, 1]];
+    it.each(bools)("logic works", (val1, val2) => {
+        i1.state = val1
+        i2.state = val2
+        updateSimulationSet(true);
+        update();
+        expect(n3.value).toEqual(+!(val1 | val2));
+    })
+    it('can change input node', () => {
+        const x = a.changeInputSize(3)
+        expect(x.inp.length).toBe(3)
+    });
+});
+
+
+/*
+ * NandGate test
+ */
+describe('NandGate works', () => {
+    /*
+     * basic setup
+     */
+    const a = new NandGate(40, 40);
+    const n1 = a.nodeList[0]
+    const n2 = a.nodeList[1]
+    const n3 = a.nodeList[2]
+    const i1 = new Input(10, 30);
+    const i2 = new Input(10, 50);
+    i1.output1.connect(n1);
+    n1.connect(i1.output1);
+    i2.output1.connect(n2);
+    n2.connect(i2.output1);
+    /*
+     * test cases
+     */
+    it("draws correctly", () => {
+
+    })
+    var bools = [[0, 0], [0, 1], [1, 0], [1, 1]];
+    it.each(bools)("logic works", (val1, val2) => {
+        i1.state = val1
+        i2.state = val2
+        updateSimulationSet(true);
+        update();
+        expect(n3.value).toEqual(+!(val1 & val2));
+    })
+    it('can change input node', () => {
+        const x = a.changeInputSize(3)
+        expect(x.inp.length).toBe(3)
+    });
+});
+
+
+/*
+ * NotGate test
+ */
+describe('NotGate works', () => {
+    /*
+     * basic setup
+     */
+    const a = new NotGate(40, 40);
+    const n1 = a.nodeList[0]
+    const n2 = a.nodeList[1]
+    const i1 = new Input(10, 30);
+    i1.output1.connect(n1);
+    n1.connect(i1.output1);
+    /*
+     * test cases
+     */
+    it("draws correctly", () => {
+
+    })
+    var bools = [0,1];
+    it.each(bools)("logic works", (val1) => {
+        i1.state = val1
+        updateSimulationSet(true);
+        update();
+        expect(n2.value).toEqual(+!(val1));
+    })
 });
diff --git a/test/gates/sequential.test.js b/test/gates/sequential.test.js
new file mode 100644
index 0000000..84c630c
--- /dev/null
+++ b/test/gates/sequential.test.js
@@ -0,0 +1,234 @@
+/**
+ * @jest-environment jsdom
+ */
+import { setup } from '../../src/setup'
+setup()
+import Input from '../../src/modules/Input'
+import { update, updateSimulationSet } from '../../src/engine'
+import Dlatch from '../../src/sequential/Dlatch';
+import DflipFlop from '../../src/sequential/DflipFlop';
+import TflipFlop from '../../src/sequential/TflipFlop';
+import SRflipFlop from '../../src/sequential/SRflipFlop';
+import JKflipFlop from '../../src/sequential/JKflipFlop';
+
+/*
+ * Dlatch test
+ */
+describe('Dlatch works', () => {
+    /*
+    * basic setup
+    */
+    const a = new Dlatch(40, 40);
+    const c = a.nodeList[0]
+    const d = a.nodeList[1]
+    const q = a.nodeList[2]
+    const i1 = new Input(10, 30);
+    i1.output1.connect(d);
+    d.connect(i1.output1);
+    it('draws right', () => {
+        i1.state = 0
+        c.value = 0
+        updateSimulationSet(true)
+        update()
+        c.value = 1
+        updateSimulationSet(true)
+        update()
+        expect(q.value).toEqual(0)
+    });
+    it('value of q', () => {
+        i1.state = 1
+        c.value = 0
+        updateSimulationSet(true)
+        update()
+        c.value = 1
+        updateSimulationSet(true)
+        update()
+        expect(q.value).toEqual(1)
+    });
+})
+
+/*
+ * DflipFlop test
+ */
+describe('DflipFlop works', () => {
+    /*
+    * basic setup
+    */
+    const a = new DflipFlop(40, 40);
+    const c = a.nodeList[0]
+    const d = a.nodeList[1]
+    const q = a.nodeList[2]
+    const i1 = new Input(10, 30);
+    i1.output1.connect(d);
+    d.connect(i1.output1);
+    it('draws right', () => {
+        i1.state = 0
+        c.value = 0
+        updateSimulationSet(true)
+        update()
+        c.value = 1
+        updateSimulationSet(true)
+        update()
+        expect(q.value).toEqual(0)
+    });
+    it('value of q', () => {
+        i1.state = 1
+        c.value = 0
+        updateSimulationSet(true)
+        update()
+        c.value = 1
+        updateSimulationSet(true)
+        update()
+        expect(q.value).toEqual(1)
+    });
+})
+
+/*
+ * TflipFlop test
+ */
+describe('TflipFlop works', () => {
+    /*
+    * basic setup
+    */
+    const a = new TflipFlop(40, 40);
+    const c = a.nodeList[0]
+    const t = a.nodeList[1]
+    const q = a.nodeList[2]
+    const i1 = new Input(10, 30);
+    i1.output1.connect(t);
+    t.connect(i1.output1);
+    it('draws right', () => {
+        i1.state = 0
+        c.value = 0
+        updateSimulationSet(true)
+        update()
+        c.value = 1
+        expect(q.value).toEqual(0)
+        updateSimulationSet(true)
+        update()
+        expect(q.value).toEqual(0)
+    });
+    it('value of T', () => {
+        i1.state = 1
+        c.value = 0
+        updateSimulationSet(true)
+        update()
+        expect(q.value).toEqual(0)
+        c.value = 1
+        updateSimulationSet(true)
+        update()
+        expect(q.value).toEqual(1)
+        c.value = 0
+        updateSimulationSet(true)
+        update()
+        expect(q.value).toEqual(1)
+        c.value = 1
+        updateSimulationSet(true)
+        update()
+        expect(q.value).toEqual(0)
+    });
+})
+
+/*
+ * SRflipFlop test
+ */
+describe('SRflipFlop works', () => {
+    /*
+    * basic setup
+    */
+    const a = new SRflipFlop(40, 40);
+    const r = a.nodeList[0]
+    const s = a.nodeList[1]
+    const q = a.nodeList[2]
+    const i1 = new Input(10, 30);
+    const i2 = new Input(20, 40);
+    i1.output1.connect(s);
+    s.connect(i1.output1);
+    i2.output1.connect(r);
+    r.connect(i2.output1);
+    it('1 0 sr logic', () => {
+        i1.state = 1
+        i2.state = 0
+        updateSimulationSet(true)
+        update()
+        expect(q.value).toEqual(1)
+    });
+    it('0 1 sr logic', () => {
+        i1.state = 0
+        i2.state = 1
+        updateSimulationSet(true)
+        update()
+        expect(q.value).toEqual(0)
+    });
+    it('value of q with 0,0 sr logic', () => {
+        i1.state = 0
+        i2.state = 0
+        const state = q.value
+        updateSimulationSet(true)
+        update()
+        expect(q.value).toEqual(+state)
+    });
+})
+
+/*
+ * JKflipFlop test
+ */
+describe('JKflipFlop works', () => {
+    /*
+    * basic setup
+    */
+    const a = new JKflipFlop(40, 40);
+    const j = a.nodeList[0]
+    const k = a.nodeList[1]
+    const c = a.nodeList[2]
+    const q = a.nodeList[3]
+    const i1 = new Input(10, 30);
+    const i2 = new Input(10, 50);
+    i1.output1.connect(j);
+    j.connect(i1.output1);
+    i2.output1.connect(k);
+    k.connect(i2.output1);
+    it('0 1 jk logic', () => {
+        i1.state = 1
+        c.value = 0
+        updateSimulationSet(true)
+        update()
+        c.value = 1
+        expect(q.value).toEqual(0)
+        updateSimulationSet(true)
+        update()
+        expect(q.value).toEqual(1)
+    });
+    it('1 0 jk logic', () => {
+        i2.state = 1
+        c.value = 0
+        updateSimulationSet(true)
+        update()
+        c.value = 1
+        expect(q.value).toEqual(1)
+        updateSimulationSet(true)
+        update()
+        expect(q.value).toEqual(0)
+    });
+    it('value of q with 1,1 jk', () => {
+        i1.state = 1
+        i2.state = 1
+        c.value = 0
+        const state = q.value
+        updateSimulationSet(true)
+        update()
+        expect(q.value).toEqual(+state)
+        c.value = 1
+        updateSimulationSet(true)
+        update()
+        expect(q.value).toEqual(+!state)
+        c.value = 0
+        updateSimulationSet(true)
+        update()
+        expect(q.value).toEqual(+!state)
+        c.value = 1
+        updateSimulationSet(true)
+        update()
+        expect(q.value).toEqual(+state)
+    });
+})
diff --git a/test/listenertest.test.js b/test/listenertest.test.js
index 87795f9..b4194f0 100644
--- a/test/listenertest.test.js
+++ b/test/listenertest.test.js
@@ -18,9 +18,9 @@ describe('button', function () {
         await page.click('#zoomIn')
         const newScale = await page.evaluate(() => globalScope.scale);
         expect(newScale).toBeGreaterThan(prevScale);
-    },100000)
+    },1000000)
 
-    it("zooms on scrlling", async () => {
+    it("zooms on scrolling", async () => {
         const prevScale = await page.evaluate(() => globalScope.scale);
         await page.waitForSelector('#simulationArea');
         await page.hover('#simulationArea');
@@ -31,7 +31,7 @@ describe('button', function () {
         });
         const newScale = await page.evaluate(() => globalScope.scale);
         expect(newScale).toBeGreaterThan(prevScale);
-    });
+    },1000000);
 
     afterAll(async () => {
         await browser.close()
diff --git a/test/sample.test.js b/test/restrictedElements.test.js
similarity index 100%
rename from test/sample.test.js
rename to test/restrictedElements.test.js

From 653b166d0b02999a682f24a41d5a5c4cd6cc253e Mon Sep 17 00:00:00 2001
From: shubhankarsharma00 <shubhankarsharma78@gmail.com>
Date: Mon, 29 Jun 2020 15:25:29 +0530
Subject: [PATCH 3/3] fa icons

---
 .circleci/config.yml      | 26 --------------------------
 css/simulator.css         |  2 +-
 index.html                | 11 ++++++++---
 package-lock.json         |  6 ++++++
 package.json              |  1 +
 test/listenertest.test.js |  2 +-
 6 files changed, 17 insertions(+), 31 deletions(-)
 delete mode 100644 .circleci/config.yml

diff --git a/.circleci/config.yml b/.circleci/config.yml
deleted file mode 100644
index 9d312bc..0000000
--- a/.circleci/config.yml
+++ /dev/null
@@ -1,26 +0,0 @@
-version: 2.1
-orbs:
-  node: circleci/node@1.1.6
-jobs:
-  build-and-test:
-    executor:
-      name: node/default
-    steps:
-      - checkout
-      - run:
-          name: Install Chrome headless dependencies
-          working_directory: /
-          command: |
-            sudo apt-get install -yq gconf-service libasound2 libatk1.0-0 libc6 libcairo2 libcups2 libdbus-1-3 \
-            libexpat1 libfontconfig1 libgcc1 libgconf-2-4 libgdk-pixbuf2.0-0 libglib2.0-0 libgtk-3-0 libnspr4 \
-            libpango-1.0-0 libpangocairo-1.0-0 libstdc++6 libx11-6 libx11-xcb1 libxcb1 libxcomposite1 \
-            libxcursor1 libxdamage1 libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libxss1 libxtst6 \
-            ca-certificates fonts-liberation libappindicator1 libnss3 lsb-release xdg-utils wget --fix-missing      
-      - node/with-cache:
-          steps:
-            - run: npm install
-            - run: npm run test
-workflows:
-    build-and-test:
-      jobs:
-        - build-and-test
\ No newline at end of file
diff --git a/css/simulator.css b/css/simulator.css
index 2ac1dde..114336c 100644
--- a/css/simulator.css
+++ b/css/simulator.css
@@ -2,4 +2,4 @@
 * Copyright 2011-2019 The Bootstrap Authors
 * Copyright 2011-2019 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)*/:root{--blue: #007bff;--indigo: #6610f2;--purple: #6f42c1;--pink: #e83e8c;--red: #dc3545;--orange: #fd7e14;--yellow: #ffc107;--green: #28a745;--teal: #20c997;--cyan: #17a2b8;--white: #fff;--gray: #6c757d;--gray-dark: #343a40;--primary: #007bff;--secondary: #6c757d;--success: #28a745;--info: #17a2b8;--warning: #ffc107;--danger: #dc3545;--light: #f8f9fa;--dark: #343a40;--breakpoint-xs: 0;--breakpoint-sm: 576px;--breakpoint-md: 768px;--breakpoint-lg: 992px;--breakpoint-xl: 1200px;--font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}*,*::before,*::after{box-sizing:border-box}html{font-family:sans-serif;line-height:1.15;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}article,aside,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,segoe ui,Roboto,helvetica neue,Arial,noto sans,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol,noto color emoji;font-size:1rem;font-weight:400;line-height:1.5;color:#212529;text-align:left;background-color:#fff}[tabindex="-1"]:focus{outline:0!important}hr{box-sizing:content-box;height:0;overflow:visible}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem}p{margin-top:0;margin-bottom:1rem}abbr[title],abbr[data-original-title]{text-decoration:underline;text-decoration:underline dotted;cursor:help;border-bottom:0;text-decoration-skip-ink:none}address{margin-bottom:1rem;font-style:normal;line-height:inherit}ol,ul,dl{margin-top:0;margin-bottom:1rem}ol ol,ul ul,ol ul,ul ol{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-left:0}blockquote{margin:0 0 1rem}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a{color:#007bff;text-decoration:none;background-color:transparent}a:hover{color:#0056b3;text-decoration:underline}a:not([href]):not([tabindex]){color:inherit;text-decoration:none}a:not([href]):not([tabindex]):hover,a:not([href]):not([tabindex]):focus{color:inherit;text-decoration:none}a:not([href]):not([tabindex]):focus{outline:0}pre,code,kbd,samp{font-family:SFMono-Regular,Menlo,Monaco,Consolas,liberation mono,courier new,monospace;font-size:1em}pre{margin-top:0;margin-bottom:1rem;overflow:auto}figure{margin:0 0 1rem}img{vertical-align:middle;border-style:none}svg{overflow:hidden;vertical-align:middle}table{border-collapse:collapse}caption{padding-top:.75rem;padding-bottom:.75rem;color:#6c757d;text-align:left;caption-side:bottom}th{text-align:inherit}label{display:inline-block;margin-bottom:.5rem}button{border-radius:0}button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}input,button,select,optgroup,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,input{overflow:visible}button,select{text-transform:none}select{word-wrap:normal}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button:not(:disabled),[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled){cursor:pointer}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{padding:0;border-style:none}input[type=radio],input[type=checkbox]{box-sizing:border-box;padding:0}input[type=date],input[type=time],input[type=datetime-local],input[type=month]{-webkit-appearance:listbox}textarea{overflow:auto;resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{display:block;width:100%;max-width:100%;padding:0;margin-bottom:.5rem;font-size:1.5rem;line-height:inherit;color:inherit;white-space:normal}progress{vertical-align:baseline}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px;-webkit-appearance:none}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}output{display:inline-block}summary{display:list-item;cursor:pointer}template{display:none}[hidden]{display:none!important}h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{margin-bottom:.5rem;font-weight:500;line-height:1.2}h1,.h1{font-size:2.5rem}h2,.h2{font-size:2rem}h3,.h3{font-size:1.75rem}h4,.h4{font-size:1.5rem}h5,.h5{font-size:1.25rem}h6,.h6{font-size:1rem}.lead{font-size:1.25rem;font-weight:300}.display-1{font-size:6rem;font-weight:300;line-height:1.2}.display-2{font-size:5.5rem;font-weight:300;line-height:1.2}.display-3{font-size:4.5rem;font-weight:300;line-height:1.2}.display-4{font-size:3.5rem;font-weight:300;line-height:1.2}hr{margin-top:1rem;margin-bottom:1rem;border:0;border-top:1px solid rgba(0,0,0,.1)}small,.small{font-size:80%;font-weight:400}mark,.mark{padding:.2em;background-color:#fcf8e3}.list-unstyled{padding-left:0;list-style:none}.list-inline{padding-left:0;list-style:none}.list-inline-item{display:inline-block}.list-inline-item:not(:last-child){margin-right:.5rem}.initialism{font-size:90%;text-transform:uppercase}.blockquote{margin-bottom:1rem;font-size:1.25rem}.blockquote-footer{display:block;font-size:80%;color:#6c757d}.blockquote-footer::before{content:"\2014\00A0"}.img-fluid{max-width:100%;height:auto}.img-thumbnail{padding:.25rem;background-color:#fff;border:1px solid #dee2e6;border-radius:.25rem;max-width:100%;height:auto}.figure{display:inline-block}.figure-img{margin-bottom:.5rem;line-height:1}.figure-caption{font-size:90%;color:#6c757d}code{font-size:87.5%;color:#e83e8c;word-break:break-word}a>code{color:inherit}kbd{padding:.2rem .4rem;font-size:87.5%;color:#fff;background-color:#212529;border-radius:.2rem}kbd kbd{padding:0;font-size:100%;font-weight:700}pre{display:block;font-size:87.5%;color:#212529}pre code{font-size:inherit;color:inherit;word-break:normal}.pre-scrollable{max-height:340px;overflow-y:scroll}.container{width:100%;padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}@media(min-width:576px){.container{max-width:540px}}@media(min-width:768px){.container{max-width:720px}}@media(min-width:992px){.container{max-width:960px}}@media(min-width:1200px){.container{max-width:1140px}}.container-fluid{width:100%;padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}.row{display:flex;flex-wrap:wrap;margin-right:-15px;margin-left:-15px}.no-gutters{margin-right:0;margin-left:0}.no-gutters>.col,.no-gutters>[class*=col-]{padding-right:0;padding-left:0}.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11,.col-12,.col,.col-auto,.col-sm-1,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm,.col-sm-auto,.col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11,.col-md-12,.col-md,.col-md-auto,.col-lg-1,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg,.col-lg-auto,.col-xl-1,.col-xl-2,.col-xl-3,.col-xl-4,.col-xl-5,.col-xl-6,.col-xl-7,.col-xl-8,.col-xl-9,.col-xl-10,.col-xl-11,.col-xl-12,.col-xl,.col-xl-auto{position:relative;width:100%;padding-right:15px;padding-left:15px}.col{flex-basis:0;flex-grow:1;max-width:100%}.col-auto{flex:0 0 auto;width:auto;max-width:100%}.col-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.col-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.col-3{flex:0 0 25%;max-width:25%}.col-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.col-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.col-6{flex:0 0 50%;max-width:50%}.col-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.col-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.col-9{flex:0 0 75%;max-width:75%}.col-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.col-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.col-12{flex:0 0 100%;max-width:100%}.order-first{order:-1}.order-last{order:13}.order-0{order:0}.order-1{order:1}.order-2{order:2}.order-3{order:3}.order-4{order:4}.order-5{order:5}.order-6{order:6}.order-7{order:7}.order-8{order:8}.order-9{order:9}.order-10{order:10}.order-11{order:11}.order-12{order:12}.offset-1{margin-left:8.3333333333%}.offset-2{margin-left:16.6666666667%}.offset-3{margin-left:25%}.offset-4{margin-left:33.3333333333%}.offset-5{margin-left:41.6666666667%}.offset-6{margin-left:50%}.offset-7{margin-left:58.3333333333%}.offset-8{margin-left:66.6666666667%}.offset-9{margin-left:75%}.offset-10{margin-left:83.3333333333%}.offset-11{margin-left:91.6666666667%}@media(min-width:576px){.col-sm{flex-basis:0;flex-grow:1;max-width:100%}.col-sm-auto{flex:0 0 auto;width:auto;max-width:100%}.col-sm-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.col-sm-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.col-sm-3{flex:0 0 25%;max-width:25%}.col-sm-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.col-sm-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.col-sm-6{flex:0 0 50%;max-width:50%}.col-sm-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.col-sm-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.col-sm-9{flex:0 0 75%;max-width:75%}.col-sm-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.col-sm-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.col-sm-12{flex:0 0 100%;max-width:100%}.order-sm-first{order:-1}.order-sm-last{order:13}.order-sm-0{order:0}.order-sm-1{order:1}.order-sm-2{order:2}.order-sm-3{order:3}.order-sm-4{order:4}.order-sm-5{order:5}.order-sm-6{order:6}.order-sm-7{order:7}.order-sm-8{order:8}.order-sm-9{order:9}.order-sm-10{order:10}.order-sm-11{order:11}.order-sm-12{order:12}.offset-sm-0{margin-left:0}.offset-sm-1{margin-left:8.3333333333%}.offset-sm-2{margin-left:16.6666666667%}.offset-sm-3{margin-left:25%}.offset-sm-4{margin-left:33.3333333333%}.offset-sm-5{margin-left:41.6666666667%}.offset-sm-6{margin-left:50%}.offset-sm-7{margin-left:58.3333333333%}.offset-sm-8{margin-left:66.6666666667%}.offset-sm-9{margin-left:75%}.offset-sm-10{margin-left:83.3333333333%}.offset-sm-11{margin-left:91.6666666667%}}@media(min-width:768px){.col-md{flex-basis:0;flex-grow:1;max-width:100%}.col-md-auto{flex:0 0 auto;width:auto;max-width:100%}.col-md-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.col-md-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.col-md-3{flex:0 0 25%;max-width:25%}.col-md-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.col-md-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.col-md-6{flex:0 0 50%;max-width:50%}.col-md-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.col-md-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.col-md-9{flex:0 0 75%;max-width:75%}.col-md-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.col-md-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.col-md-12{flex:0 0 100%;max-width:100%}.order-md-first{order:-1}.order-md-last{order:13}.order-md-0{order:0}.order-md-1{order:1}.order-md-2{order:2}.order-md-3{order:3}.order-md-4{order:4}.order-md-5{order:5}.order-md-6{order:6}.order-md-7{order:7}.order-md-8{order:8}.order-md-9{order:9}.order-md-10{order:10}.order-md-11{order:11}.order-md-12{order:12}.offset-md-0{margin-left:0}.offset-md-1{margin-left:8.3333333333%}.offset-md-2{margin-left:16.6666666667%}.offset-md-3{margin-left:25%}.offset-md-4{margin-left:33.3333333333%}.offset-md-5{margin-left:41.6666666667%}.offset-md-6{margin-left:50%}.offset-md-7{margin-left:58.3333333333%}.offset-md-8{margin-left:66.6666666667%}.offset-md-9{margin-left:75%}.offset-md-10{margin-left:83.3333333333%}.offset-md-11{margin-left:91.6666666667%}}@media(min-width:992px){.col-lg{flex-basis:0;flex-grow:1;max-width:100%}.col-lg-auto{flex:0 0 auto;width:auto;max-width:100%}.col-lg-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.col-lg-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.col-lg-3{flex:0 0 25%;max-width:25%}.col-lg-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.col-lg-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.col-lg-6{flex:0 0 50%;max-width:50%}.col-lg-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.col-lg-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.col-lg-9{flex:0 0 75%;max-width:75%}.col-lg-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.col-lg-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.col-lg-12{flex:0 0 100%;max-width:100%}.order-lg-first{order:-1}.order-lg-last{order:13}.order-lg-0{order:0}.order-lg-1{order:1}.order-lg-2{order:2}.order-lg-3{order:3}.order-lg-4{order:4}.order-lg-5{order:5}.order-lg-6{order:6}.order-lg-7{order:7}.order-lg-8{order:8}.order-lg-9{order:9}.order-lg-10{order:10}.order-lg-11{order:11}.order-lg-12{order:12}.offset-lg-0{margin-left:0}.offset-lg-1{margin-left:8.3333333333%}.offset-lg-2{margin-left:16.6666666667%}.offset-lg-3{margin-left:25%}.offset-lg-4{margin-left:33.3333333333%}.offset-lg-5{margin-left:41.6666666667%}.offset-lg-6{margin-left:50%}.offset-lg-7{margin-left:58.3333333333%}.offset-lg-8{margin-left:66.6666666667%}.offset-lg-9{margin-left:75%}.offset-lg-10{margin-left:83.3333333333%}.offset-lg-11{margin-left:91.6666666667%}}@media(min-width:1200px){.col-xl{flex-basis:0;flex-grow:1;max-width:100%}.col-xl-auto{flex:0 0 auto;width:auto;max-width:100%}.col-xl-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.col-xl-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.col-xl-3{flex:0 0 25%;max-width:25%}.col-xl-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.col-xl-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.col-xl-6{flex:0 0 50%;max-width:50%}.col-xl-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.col-xl-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.col-xl-9{flex:0 0 75%;max-width:75%}.col-xl-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.col-xl-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.col-xl-12{flex:0 0 100%;max-width:100%}.order-xl-first{order:-1}.order-xl-last{order:13}.order-xl-0{order:0}.order-xl-1{order:1}.order-xl-2{order:2}.order-xl-3{order:3}.order-xl-4{order:4}.order-xl-5{order:5}.order-xl-6{order:6}.order-xl-7{order:7}.order-xl-8{order:8}.order-xl-9{order:9}.order-xl-10{order:10}.order-xl-11{order:11}.order-xl-12{order:12}.offset-xl-0{margin-left:0}.offset-xl-1{margin-left:8.3333333333%}.offset-xl-2{margin-left:16.6666666667%}.offset-xl-3{margin-left:25%}.offset-xl-4{margin-left:33.3333333333%}.offset-xl-5{margin-left:41.6666666667%}.offset-xl-6{margin-left:50%}.offset-xl-7{margin-left:58.3333333333%}.offset-xl-8{margin-left:66.6666666667%}.offset-xl-9{margin-left:75%}.offset-xl-10{margin-left:83.3333333333%}.offset-xl-11{margin-left:91.6666666667%}}.table{width:100%;margin-bottom:1rem;color:#212529}.table th,.table td{padding:.75rem;vertical-align:top;border-top:1px solid #dee2e6}.table thead th{vertical-align:bottom;border-bottom:2px solid #dee2e6}.table tbody+tbody{border-top:2px solid #dee2e6}.table-sm th,.table-sm td{padding:.3rem}.table-bordered{border:1px solid #dee2e6}.table-bordered th,.table-bordered td{border:1px solid #dee2e6}.table-bordered thead th,.table-bordered thead td{border-bottom-width:2px}.table-borderless th,.table-borderless td,.table-borderless thead th,.table-borderless tbody+tbody{border:0}.table-striped tbody tr:nth-of-type(odd){background-color:rgba(0,0,0,.05)}.table-hover tbody tr:hover{color:#212529;background-color:rgba(0,0,0,.075)}.table-primary,.table-primary>th,.table-primary>td{background-color:#b8daff}.table-primary th,.table-primary td,.table-primary thead th,.table-primary tbody+tbody{border-color:#7abaff}.table-hover .table-primary:hover{background-color:#9fcdff}.table-hover .table-primary:hover>td,.table-hover .table-primary:hover>th{background-color:#9fcdff}.table-secondary,.table-secondary>th,.table-secondary>td{background-color:#d6d8db}.table-secondary th,.table-secondary td,.table-secondary thead th,.table-secondary tbody+tbody{border-color:#b3b7bb}.table-hover .table-secondary:hover{background-color:#c8cbcf}.table-hover .table-secondary:hover>td,.table-hover .table-secondary:hover>th{background-color:#c8cbcf}.table-success,.table-success>th,.table-success>td{background-color:#c3e6cb}.table-success th,.table-success td,.table-success thead th,.table-success tbody+tbody{border-color:#8fd19e}.table-hover .table-success:hover{background-color:#b1dfbb}.table-hover .table-success:hover>td,.table-hover .table-success:hover>th{background-color:#b1dfbb}.table-info,.table-info>th,.table-info>td{background-color:#bee5eb}.table-info th,.table-info td,.table-info thead th,.table-info tbody+tbody{border-color:#86cfda}.table-hover .table-info:hover{background-color:#abdde5}.table-hover .table-info:hover>td,.table-hover .table-info:hover>th{background-color:#abdde5}.table-warning,.table-warning>th,.table-warning>td{background-color:#ffeeba}.table-warning th,.table-warning td,.table-warning thead th,.table-warning tbody+tbody{border-color:#ffdf7e}.table-hover .table-warning:hover{background-color:#ffe8a1}.table-hover .table-warning:hover>td,.table-hover .table-warning:hover>th{background-color:#ffe8a1}.table-danger,.table-danger>th,.table-danger>td{background-color:#f5c6cb}.table-danger th,.table-danger td,.table-danger thead th,.table-danger tbody+tbody{border-color:#ed969e}.table-hover .table-danger:hover{background-color:#f1b0b7}.table-hover .table-danger:hover>td,.table-hover .table-danger:hover>th{background-color:#f1b0b7}.table-light,.table-light>th,.table-light>td{background-color:#fdfdfe}.table-light th,.table-light td,.table-light thead th,.table-light tbody+tbody{border-color:#fbfcfc}.table-hover .table-light:hover{background-color:#ececf6}.table-hover .table-light:hover>td,.table-hover .table-light:hover>th{background-color:#ececf6}.table-dark,.table-dark>th,.table-dark>td{background-color:#c6c8ca}.table-dark th,.table-dark td,.table-dark thead th,.table-dark tbody+tbody{border-color:#95999c}.table-hover .table-dark:hover{background-color:#b9bbbe}.table-hover .table-dark:hover>td,.table-hover .table-dark:hover>th{background-color:#b9bbbe}.table-active,.table-active>th,.table-active>td{background-color:rgba(0,0,0,.075)}.table-hover .table-active:hover{background-color:rgba(0,0,0,.075)}.table-hover .table-active:hover>td,.table-hover .table-active:hover>th{background-color:rgba(0,0,0,.075)}.table .thead-dark th{color:#fff;background-color:#343a40;border-color:#454d55}.table .thead-light th{color:#495057;background-color:#e9ecef;border-color:#dee2e6}.table-dark{color:#fff;background-color:#343a40}.table-dark th,.table-dark td,.table-dark thead th{border-color:#454d55}.table-dark.table-bordered{border:0}.table-dark.table-striped tbody tr:nth-of-type(odd){background-color:rgba(255,255,255,.05)}.table-dark.table-hover tbody tr:hover{color:#fff;background-color:rgba(255,255,255,.075)}@media(max-width:575.98px){.table-responsive-sm{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.table-responsive-sm>.table-bordered{border:0}}@media(max-width:767.98px){.table-responsive-md{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.table-responsive-md>.table-bordered{border:0}}@media(max-width:991.98px){.table-responsive-lg{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.table-responsive-lg>.table-bordered{border:0}}@media(max-width:1199.98px){.table-responsive-xl{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.table-responsive-xl>.table-bordered{border:0}}.table-responsive{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.table-responsive>.table-bordered{border:0}.form-control{display:block;width:100%;height:calc(1.5em + 0.75rem + 2px);padding:.375rem .75rem;font-size:1rem;font-weight:400;line-height:1.5;color:#495057;background-color:#fff;background-clip:padding-box;border:1px solid #ced4da;border-radius:.25rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media(prefers-reduced-motion:reduce){.form-control{transition:none}}.form-control::-ms-expand{background-color:transparent;border:0}.form-control:focus{color:#495057;background-color:#fff;border-color:#80bdff;outline:0;box-shadow:0 0 0 .2rem rgba(0,123,255,.25)}.form-control::placeholder{color:#6c757d;opacity:1}.form-control:disabled,.form-control[readonly]{background-color:#e9ecef;opacity:1}select.form-control:focus::-ms-value{color:#495057;background-color:#fff}.form-control-file,.form-control-range{display:block;width:100%}.col-form-label{padding-top:calc(0.375rem + 1px);padding-bottom:calc(0.375rem + 1px);margin-bottom:0;font-size:inherit;line-height:1.5}.col-form-label-lg{padding-top:calc(0.5rem + 1px);padding-bottom:calc(0.5rem + 1px);font-size:1.25rem;line-height:1.5}.col-form-label-sm{padding-top:calc(0.25rem + 1px);padding-bottom:calc(0.25rem + 1px);font-size:.875rem;line-height:1.5}.form-control-plaintext{display:block;width:100%;padding-top:.375rem;padding-bottom:.375rem;margin-bottom:0;line-height:1.5;color:#212529;background-color:transparent;border:solid transparent;border-width:1px 0}.form-control-plaintext.form-control-sm,.form-control-plaintext.form-control-lg{padding-right:0;padding-left:0}.form-control-sm{height:calc(1.5em + 0.5rem + 2px);padding:.25rem .5rem;font-size:.875rem;line-height:1.5;border-radius:.2rem}.form-control-lg{height:calc(1.5em + 1rem + 2px);padding:.5rem 1rem;font-size:1.25rem;line-height:1.5;border-radius:.3rem}select.form-control[size],select.form-control[multiple]{height:auto}textarea.form-control{height:auto}.form-group{margin-bottom:1rem}.form-text{display:block;margin-top:.25rem}.form-row{display:flex;flex-wrap:wrap;margin-right:-5px;margin-left:-5px}.form-row>.col,.form-row>[class*=col-]{padding-right:5px;padding-left:5px}.form-check{position:relative;display:block;padding-left:1.25rem}.form-check-input{position:absolute;margin-top:.3rem;margin-left:-1.25rem}.form-check-input:disabled~.form-check-label{color:#6c757d}.form-check-label{margin-bottom:0}.form-check-inline{display:inline-flex;align-items:center;padding-left:0;margin-right:.75rem}.form-check-inline .form-check-input{position:static;margin-top:0;margin-right:.3125rem;margin-left:0}.valid-feedback{display:none;width:100%;margin-top:.25rem;font-size:80%;color:#28a745}.valid-tooltip{position:absolute;top:100%;z-index:5;display:none;max-width:100%;padding:.25rem .5rem;margin-top:.1rem;font-size:.875rem;line-height:1.5;color:#fff;background-color:rgba(40,167,69,.9);border-radius:.25rem}.was-validated .form-control:valid,.form-control.is-valid{border-color:#28a745;padding-right:calc(1.5em + 0.75rem);background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA4IDgnPjxwYXRoIGZpbGw9JyMyOGE3NDUnIGQ9J00yLjMgNi43M0wuNiA0LjUzYy0uNC0xLjA0LjQ2LTEuNCAxLjEtLjhsMS4xIDEuNCAzLjQtMy44Yy42LS42MyAxLjYtLjI3IDEuMi43bC00IDQuNmMtLjQzLjUtLjguNC0xLjEuMXonLz48L3N2Zz4=);background-repeat:no-repeat;background-position:center right calc(0.375em + 0.1875rem);background-size:calc(0.75em + 0.375rem) calc(0.75em + 0.375rem)}.was-validated .form-control:valid:focus,.form-control.is-valid:focus{border-color:#28a745;box-shadow:0 0 0 .2rem rgba(40,167,69,.25)}.was-validated .form-control:valid~.valid-feedback,.was-validated .form-control:valid~.valid-tooltip,.form-control.is-valid~.valid-feedback,.form-control.is-valid~.valid-tooltip{display:block}.was-validated textarea.form-control:valid,textarea.form-control.is-valid{padding-right:calc(1.5em + 0.75rem);background-position:top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem)}.was-validated .custom-select:valid,.custom-select.is-valid{border-color:#28a745;padding-right:calc((1em + 0.75rem) * 3/4 + 1.75rem);background:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px,url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") #fff no-repeat center right 1.75rem/calc(0.75em + 0.375rem) calc(0.75em + 0.375rem)}.was-validated .custom-select:valid:focus,.custom-select.is-valid:focus{border-color:#28a745;box-shadow:0 0 0 .2rem rgba(40,167,69,.25)}.was-validated .custom-select:valid~.valid-feedback,.was-validated .custom-select:valid~.valid-tooltip,.custom-select.is-valid~.valid-feedback,.custom-select.is-valid~.valid-tooltip{display:block}.was-validated .form-control-file:valid~.valid-feedback,.was-validated .form-control-file:valid~.valid-tooltip,.form-control-file.is-valid~.valid-feedback,.form-control-file.is-valid~.valid-tooltip{display:block}.was-validated .form-check-input:valid~.form-check-label,.form-check-input.is-valid~.form-check-label{color:#28a745}.was-validated .form-check-input:valid~.valid-feedback,.was-validated .form-check-input:valid~.valid-tooltip,.form-check-input.is-valid~.valid-feedback,.form-check-input.is-valid~.valid-tooltip{display:block}.was-validated .custom-control-input:valid~.custom-control-label,.custom-control-input.is-valid~.custom-control-label{color:#28a745}.was-validated .custom-control-input:valid~.custom-control-label::before,.custom-control-input.is-valid~.custom-control-label::before{border-color:#28a745}.was-validated .custom-control-input:valid~.valid-feedback,.was-validated .custom-control-input:valid~.valid-tooltip,.custom-control-input.is-valid~.valid-feedback,.custom-control-input.is-valid~.valid-tooltip{display:block}.was-validated .custom-control-input:valid:checked~.custom-control-label::before,.custom-control-input.is-valid:checked~.custom-control-label::before{border-color:#34ce57;background-color:#34ce57}.was-validated .custom-control-input:valid:focus~.custom-control-label::before,.custom-control-input.is-valid:focus~.custom-control-label::before{box-shadow:0 0 0 .2rem rgba(40,167,69,.25)}.was-validated .custom-control-input:valid:focus:not(:checked)~.custom-control-label::before,.custom-control-input.is-valid:focus:not(:checked)~.custom-control-label::before{border-color:#28a745}.was-validated .custom-file-input:valid~.custom-file-label,.custom-file-input.is-valid~.custom-file-label{border-color:#28a745}.was-validated .custom-file-input:valid~.valid-feedback,.was-validated .custom-file-input:valid~.valid-tooltip,.custom-file-input.is-valid~.valid-feedback,.custom-file-input.is-valid~.valid-tooltip{display:block}.was-validated .custom-file-input:valid:focus~.custom-file-label,.custom-file-input.is-valid:focus~.custom-file-label{border-color:#28a745;box-shadow:0 0 0 .2rem rgba(40,167,69,.25)}.invalid-feedback{display:none;width:100%;margin-top:.25rem;font-size:80%;color:#dc3545}.invalid-tooltip{position:absolute;top:100%;z-index:5;display:none;max-width:100%;padding:.25rem .5rem;margin-top:.1rem;font-size:.875rem;line-height:1.5;color:#fff;background-color:rgba(220,53,69,.9);border-radius:.25rem}.was-validated .form-control:invalid,.form-control.is-invalid{border-color:#dc3545;padding-right:calc(1.5em + 0.75rem);background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIGZpbGw9JyNkYzM1NDUnIHZpZXdCb3g9Jy0yIC0yIDcgNyc+PHBhdGggc3Ryb2tlPScjZGMzNTQ1JyBkPSdNMCAwbDMgM20wLTNMMCAzJy8+PGNpcmNsZSByPScuNScvPjxjaXJjbGUgY3g9JzMnIHI9Jy41Jy8+PGNpcmNsZSBjeT0nMycgcj0nLjUnLz48Y2lyY2xlIGN4PSczJyBjeT0nMycgcj0nLjUnLz48L3N2Zz4=);background-repeat:no-repeat;background-position:center right calc(0.375em + 0.1875rem);background-size:calc(0.75em + 0.375rem) calc(0.75em + 0.375rem)}.was-validated .form-control:invalid:focus,.form-control.is-invalid:focus{border-color:#dc3545;box-shadow:0 0 0 .2rem rgba(220,53,69,.25)}.was-validated .form-control:invalid~.invalid-feedback,.was-validated .form-control:invalid~.invalid-tooltip,.form-control.is-invalid~.invalid-feedback,.form-control.is-invalid~.invalid-tooltip{display:block}.was-validated textarea.form-control:invalid,textarea.form-control.is-invalid{padding-right:calc(1.5em + 0.75rem);background-position:top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem)}.was-validated .custom-select:invalid,.custom-select.is-invalid{border-color:#dc3545;padding-right:calc((1em + 0.75rem) * 3/4 + 1.75rem);background:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px,url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23dc3545' viewBox='-2 -2 7 7'%3e%3cpath stroke='%23dc3545' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E") #fff no-repeat center right 1.75rem/calc(0.75em + 0.375rem) calc(0.75em + 0.375rem)}.was-validated .custom-select:invalid:focus,.custom-select.is-invalid:focus{border-color:#dc3545;box-shadow:0 0 0 .2rem rgba(220,53,69,.25)}.was-validated .custom-select:invalid~.invalid-feedback,.was-validated .custom-select:invalid~.invalid-tooltip,.custom-select.is-invalid~.invalid-feedback,.custom-select.is-invalid~.invalid-tooltip{display:block}.was-validated .form-control-file:invalid~.invalid-feedback,.was-validated .form-control-file:invalid~.invalid-tooltip,.form-control-file.is-invalid~.invalid-feedback,.form-control-file.is-invalid~.invalid-tooltip{display:block}.was-validated .form-check-input:invalid~.form-check-label,.form-check-input.is-invalid~.form-check-label{color:#dc3545}.was-validated .form-check-input:invalid~.invalid-feedback,.was-validated .form-check-input:invalid~.invalid-tooltip,.form-check-input.is-invalid~.invalid-feedback,.form-check-input.is-invalid~.invalid-tooltip{display:block}.was-validated .custom-control-input:invalid~.custom-control-label,.custom-control-input.is-invalid~.custom-control-label{color:#dc3545}.was-validated .custom-control-input:invalid~.custom-control-label::before,.custom-control-input.is-invalid~.custom-control-label::before{border-color:#dc3545}.was-validated .custom-control-input:invalid~.invalid-feedback,.was-validated .custom-control-input:invalid~.invalid-tooltip,.custom-control-input.is-invalid~.invalid-feedback,.custom-control-input.is-invalid~.invalid-tooltip{display:block}.was-validated .custom-control-input:invalid:checked~.custom-control-label::before,.custom-control-input.is-invalid:checked~.custom-control-label::before{border-color:#e4606d;background-color:#e4606d}.was-validated .custom-control-input:invalid:focus~.custom-control-label::before,.custom-control-input.is-invalid:focus~.custom-control-label::before{box-shadow:0 0 0 .2rem rgba(220,53,69,.25)}.was-validated .custom-control-input:invalid:focus:not(:checked)~.custom-control-label::before,.custom-control-input.is-invalid:focus:not(:checked)~.custom-control-label::before{border-color:#dc3545}.was-validated .custom-file-input:invalid~.custom-file-label,.custom-file-input.is-invalid~.custom-file-label{border-color:#dc3545}.was-validated .custom-file-input:invalid~.invalid-feedback,.was-validated .custom-file-input:invalid~.invalid-tooltip,.custom-file-input.is-invalid~.invalid-feedback,.custom-file-input.is-invalid~.invalid-tooltip{display:block}.was-validated .custom-file-input:invalid:focus~.custom-file-label,.custom-file-input.is-invalid:focus~.custom-file-label{border-color:#dc3545;box-shadow:0 0 0 .2rem rgba(220,53,69,.25)}.form-inline{display:flex;flex-flow:row wrap;align-items:center}.form-inline .form-check{width:100%}@media(min-width:576px){.form-inline label{display:flex;align-items:center;justify-content:center;margin-bottom:0}.form-inline .form-group{display:flex;flex:0 0 auto;flex-flow:row wrap;align-items:center;margin-bottom:0}.form-inline .form-control{display:inline-block;width:auto;vertical-align:middle}.form-inline .form-control-plaintext{display:inline-block}.form-inline .input-group,.form-inline .custom-select{width:auto}.form-inline .form-check{display:flex;align-items:center;justify-content:center;width:auto;padding-left:0}.form-inline .form-check-input{position:relative;flex-shrink:0;margin-top:0;margin-right:.25rem;margin-left:0}.form-inline .custom-control{align-items:center;justify-content:center}.form-inline .custom-control-label{margin-bottom:0}}.btn{display:inline-block;font-weight:400;color:#212529;text-align:center;vertical-align:middle;user-select:none;background-color:transparent;border:1px solid transparent;padding:.375rem .75rem;font-size:1rem;line-height:1.5;border-radius:.25rem;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media(prefers-reduced-motion:reduce){.btn{transition:none}}.btn:hover{color:#212529;text-decoration:none}.btn:focus,.btn.focus{outline:0;box-shadow:0 0 0 .2rem rgba(0,123,255,.25)}.btn.disabled,.btn:disabled{opacity:.65}a.btn.disabled,fieldset:disabled a.btn{pointer-events:none}.btn-primary{color:#fff;background-color:#007bff;border-color:#007bff}.btn-primary:hover{color:#fff;background-color:#0069d9;border-color:#0062cc}.btn-primary:focus,.btn-primary.focus{box-shadow:0 0 0 .2rem rgba(38,143,255,.5)}.btn-primary.disabled,.btn-primary:disabled{color:#fff;background-color:#007bff;border-color:#007bff}.btn-primary:not(:disabled):not(.disabled):active,.btn-primary:not(:disabled):not(.disabled).active,.show>.btn-primary.dropdown-toggle{color:#fff;background-color:#0062cc;border-color:#005cbf}.btn-primary:not(:disabled):not(.disabled):active:focus,.btn-primary:not(:disabled):not(.disabled).active:focus,.show>.btn-primary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(38,143,255,.5)}.btn-secondary{color:#fff;background-color:#6c757d;border-color:#6c757d}.btn-secondary:hover{color:#fff;background-color:#5a6268;border-color:#545b62}.btn-secondary:focus,.btn-secondary.focus{box-shadow:0 0 0 .2rem rgba(130,138,145,.5)}.btn-secondary.disabled,.btn-secondary:disabled{color:#fff;background-color:#6c757d;border-color:#6c757d}.btn-secondary:not(:disabled):not(.disabled):active,.btn-secondary:not(:disabled):not(.disabled).active,.show>.btn-secondary.dropdown-toggle{color:#fff;background-color:#545b62;border-color:#4e555b}.btn-secondary:not(:disabled):not(.disabled):active:focus,.btn-secondary:not(:disabled):not(.disabled).active:focus,.show>.btn-secondary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(130,138,145,.5)}.btn-success{color:#fff;background-color:#28a745;border-color:#28a745}.btn-success:hover{color:#fff;background-color:#218838;border-color:#1e7e34}.btn-success:focus,.btn-success.focus{box-shadow:0 0 0 .2rem rgba(72,180,97,.5)}.btn-success.disabled,.btn-success:disabled{color:#fff;background-color:#28a745;border-color:#28a745}.btn-success:not(:disabled):not(.disabled):active,.btn-success:not(:disabled):not(.disabled).active,.show>.btn-success.dropdown-toggle{color:#fff;background-color:#1e7e34;border-color:#1c7430}.btn-success:not(:disabled):not(.disabled):active:focus,.btn-success:not(:disabled):not(.disabled).active:focus,.show>.btn-success.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(72,180,97,.5)}.btn-info{color:#fff;background-color:#17a2b8;border-color:#17a2b8}.btn-info:hover{color:#fff;background-color:#138496;border-color:#117a8b}.btn-info:focus,.btn-info.focus{box-shadow:0 0 0 .2rem rgba(58,176,195,.5)}.btn-info.disabled,.btn-info:disabled{color:#fff;background-color:#17a2b8;border-color:#17a2b8}.btn-info:not(:disabled):not(.disabled):active,.btn-info:not(:disabled):not(.disabled).active,.show>.btn-info.dropdown-toggle{color:#fff;background-color:#117a8b;border-color:#10707f}.btn-info:not(:disabled):not(.disabled):active:focus,.btn-info:not(:disabled):not(.disabled).active:focus,.show>.btn-info.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(58,176,195,.5)}.btn-warning{color:#212529;background-color:#ffc107;border-color:#ffc107}.btn-warning:hover{color:#212529;background-color:#e0a800;border-color:#d39e00}.btn-warning:focus,.btn-warning.focus{box-shadow:0 0 0 .2rem rgba(222,170,12,.5)}.btn-warning.disabled,.btn-warning:disabled{color:#212529;background-color:#ffc107;border-color:#ffc107}.btn-warning:not(:disabled):not(.disabled):active,.btn-warning:not(:disabled):not(.disabled).active,.show>.btn-warning.dropdown-toggle{color:#212529;background-color:#d39e00;border-color:#c69500}.btn-warning:not(:disabled):not(.disabled):active:focus,.btn-warning:not(:disabled):not(.disabled).active:focus,.show>.btn-warning.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(222,170,12,.5)}.btn-danger{color:#fff;background-color:#dc3545;border-color:#dc3545}.btn-danger:hover{color:#fff;background-color:#c82333;border-color:#bd2130}.btn-danger:focus,.btn-danger.focus{box-shadow:0 0 0 .2rem rgba(225,83,97,.5)}.btn-danger.disabled,.btn-danger:disabled{color:#fff;background-color:#dc3545;border-color:#dc3545}.btn-danger:not(:disabled):not(.disabled):active,.btn-danger:not(:disabled):not(.disabled).active,.show>.btn-danger.dropdown-toggle{color:#fff;background-color:#bd2130;border-color:#b21f2d}.btn-danger:not(:disabled):not(.disabled):active:focus,.btn-danger:not(:disabled):not(.disabled).active:focus,.show>.btn-danger.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(225,83,97,.5)}.btn-light{color:#212529;background-color:#f8f9fa;border-color:#f8f9fa}.btn-light:hover{color:#212529;background-color:#e2e6ea;border-color:#dae0e5}.btn-light:focus,.btn-light.focus{box-shadow:0 0 0 .2rem rgba(216,217,219,.5)}.btn-light.disabled,.btn-light:disabled{color:#212529;background-color:#f8f9fa;border-color:#f8f9fa}.btn-light:not(:disabled):not(.disabled):active,.btn-light:not(:disabled):not(.disabled).active,.show>.btn-light.dropdown-toggle{color:#212529;background-color:#dae0e5;border-color:#d3d9df}.btn-light:not(:disabled):not(.disabled):active:focus,.btn-light:not(:disabled):not(.disabled).active:focus,.show>.btn-light.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(216,217,219,.5)}.btn-dark{color:#fff;background-color:#343a40;border-color:#343a40}.btn-dark:hover{color:#fff;background-color:#23272b;border-color:#1d2124}.btn-dark:focus,.btn-dark.focus{box-shadow:0 0 0 .2rem rgba(82,88,93,.5)}.btn-dark.disabled,.btn-dark:disabled{color:#fff;background-color:#343a40;border-color:#343a40}.btn-dark:not(:disabled):not(.disabled):active,.btn-dark:not(:disabled):not(.disabled).active,.show>.btn-dark.dropdown-toggle{color:#fff;background-color:#1d2124;border-color:#171a1d}.btn-dark:not(:disabled):not(.disabled):active:focus,.btn-dark:not(:disabled):not(.disabled).active:focus,.show>.btn-dark.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(82,88,93,.5)}.btn-outline-primary{color:#007bff;border-color:#007bff}.btn-outline-primary:hover{color:#fff;background-color:#007bff;border-color:#007bff}.btn-outline-primary:focus,.btn-outline-primary.focus{box-shadow:0 0 0 .2rem rgba(0,123,255,.5)}.btn-outline-primary.disabled,.btn-outline-primary:disabled{color:#007bff;background-color:transparent}.btn-outline-primary:not(:disabled):not(.disabled):active,.btn-outline-primary:not(:disabled):not(.disabled).active,.show>.btn-outline-primary.dropdown-toggle{color:#fff;background-color:#007bff;border-color:#007bff}.btn-outline-primary:not(:disabled):not(.disabled):active:focus,.btn-outline-primary:not(:disabled):not(.disabled).active:focus,.show>.btn-outline-primary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(0,123,255,.5)}.btn-outline-secondary{color:#6c757d;border-color:#6c757d}.btn-outline-secondary:hover{color:#fff;background-color:#6c757d;border-color:#6c757d}.btn-outline-secondary:focus,.btn-outline-secondary.focus{box-shadow:0 0 0 .2rem rgba(108,117,125,.5)}.btn-outline-secondary.disabled,.btn-outline-secondary:disabled{color:#6c757d;background-color:transparent}.btn-outline-secondary:not(:disabled):not(.disabled):active,.btn-outline-secondary:not(:disabled):not(.disabled).active,.show>.btn-outline-secondary.dropdown-toggle{color:#fff;background-color:#6c757d;border-color:#6c757d}.btn-outline-secondary:not(:disabled):not(.disabled):active:focus,.btn-outline-secondary:not(:disabled):not(.disabled).active:focus,.show>.btn-outline-secondary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(108,117,125,.5)}.btn-outline-success{color:#28a745;border-color:#28a745}.btn-outline-success:hover{color:#fff;background-color:#28a745;border-color:#28a745}.btn-outline-success:focus,.btn-outline-success.focus{box-shadow:0 0 0 .2rem rgba(40,167,69,.5)}.btn-outline-success.disabled,.btn-outline-success:disabled{color:#28a745;background-color:transparent}.btn-outline-success:not(:disabled):not(.disabled):active,.btn-outline-success:not(:disabled):not(.disabled).active,.show>.btn-outline-success.dropdown-toggle{color:#fff;background-color:#28a745;border-color:#28a745}.btn-outline-success:not(:disabled):not(.disabled):active:focus,.btn-outline-success:not(:disabled):not(.disabled).active:focus,.show>.btn-outline-success.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(40,167,69,.5)}.btn-outline-info{color:#17a2b8;border-color:#17a2b8}.btn-outline-info:hover{color:#fff;background-color:#17a2b8;border-color:#17a2b8}.btn-outline-info:focus,.btn-outline-info.focus{box-shadow:0 0 0 .2rem rgba(23,162,184,.5)}.btn-outline-info.disabled,.btn-outline-info:disabled{color:#17a2b8;background-color:transparent}.btn-outline-info:not(:disabled):not(.disabled):active,.btn-outline-info:not(:disabled):not(.disabled).active,.show>.btn-outline-info.dropdown-toggle{color:#fff;background-color:#17a2b8;border-color:#17a2b8}.btn-outline-info:not(:disabled):not(.disabled):active:focus,.btn-outline-info:not(:disabled):not(.disabled).active:focus,.show>.btn-outline-info.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(23,162,184,.5)}.btn-outline-warning{color:#ffc107;border-color:#ffc107}.btn-outline-warning:hover{color:#212529;background-color:#ffc107;border-color:#ffc107}.btn-outline-warning:focus,.btn-outline-warning.focus{box-shadow:0 0 0 .2rem rgba(255,193,7,.5)}.btn-outline-warning.disabled,.btn-outline-warning:disabled{color:#ffc107;background-color:transparent}.btn-outline-warning:not(:disabled):not(.disabled):active,.btn-outline-warning:not(:disabled):not(.disabled).active,.show>.btn-outline-warning.dropdown-toggle{color:#212529;background-color:#ffc107;border-color:#ffc107}.btn-outline-warning:not(:disabled):not(.disabled):active:focus,.btn-outline-warning:not(:disabled):not(.disabled).active:focus,.show>.btn-outline-warning.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(255,193,7,.5)}.btn-outline-danger{color:#dc3545;border-color:#dc3545}.btn-outline-danger:hover{color:#fff;background-color:#dc3545;border-color:#dc3545}.btn-outline-danger:focus,.btn-outline-danger.focus{box-shadow:0 0 0 .2rem rgba(220,53,69,.5)}.btn-outline-danger.disabled,.btn-outline-danger:disabled{color:#dc3545;background-color:transparent}.btn-outline-danger:not(:disabled):not(.disabled):active,.btn-outline-danger:not(:disabled):not(.disabled).active,.show>.btn-outline-danger.dropdown-toggle{color:#fff;background-color:#dc3545;border-color:#dc3545}.btn-outline-danger:not(:disabled):not(.disabled):active:focus,.btn-outline-danger:not(:disabled):not(.disabled).active:focus,.show>.btn-outline-danger.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(220,53,69,.5)}.btn-outline-light{color:#f8f9fa;border-color:#f8f9fa}.btn-outline-light:hover{color:#212529;background-color:#f8f9fa;border-color:#f8f9fa}.btn-outline-light:focus,.btn-outline-light.focus{box-shadow:0 0 0 .2rem rgba(248,249,250,.5)}.btn-outline-light.disabled,.btn-outline-light:disabled{color:#f8f9fa;background-color:transparent}.btn-outline-light:not(:disabled):not(.disabled):active,.btn-outline-light:not(:disabled):not(.disabled).active,.show>.btn-outline-light.dropdown-toggle{color:#212529;background-color:#f8f9fa;border-color:#f8f9fa}.btn-outline-light:not(:disabled):not(.disabled):active:focus,.btn-outline-light:not(:disabled):not(.disabled).active:focus,.show>.btn-outline-light.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(248,249,250,.5)}.btn-outline-dark{color:#343a40;border-color:#343a40}.btn-outline-dark:hover{color:#fff;background-color:#343a40;border-color:#343a40}.btn-outline-dark:focus,.btn-outline-dark.focus{box-shadow:0 0 0 .2rem rgba(52,58,64,.5)}.btn-outline-dark.disabled,.btn-outline-dark:disabled{color:#343a40;background-color:transparent}.btn-outline-dark:not(:disabled):not(.disabled):active,.btn-outline-dark:not(:disabled):not(.disabled).active,.show>.btn-outline-dark.dropdown-toggle{color:#fff;background-color:#343a40;border-color:#343a40}.btn-outline-dark:not(:disabled):not(.disabled):active:focus,.btn-outline-dark:not(:disabled):not(.disabled).active:focus,.show>.btn-outline-dark.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(52,58,64,.5)}.btn-link{font-weight:400;color:#007bff;text-decoration:none}.btn-link:hover{color:#0056b3;text-decoration:underline}.btn-link:focus,.btn-link.focus{text-decoration:underline;box-shadow:none}.btn-link:disabled,.btn-link.disabled{color:#6c757d;pointer-events:none}.btn-lg,.btn-group-lg>.btn{padding:.5rem 1rem;font-size:1.25rem;line-height:1.5;border-radius:.3rem}.btn-sm,.btn-group-sm>.btn{padding:.25rem .5rem;font-size:.875rem;line-height:1.5;border-radius:.2rem}.btn-block{display:block;width:100%}.btn-block+.btn-block{margin-top:.5rem}input[type=submit].btn-block,input[type=reset].btn-block,input[type=button].btn-block{width:100%}.fade{transition:opacity .15s linear}@media(prefers-reduced-motion:reduce){.fade{transition:none}}.fade:not(.show){opacity:0}.collapse:not(.show){display:none}.collapsing{position:relative;height:0;overflow:hidden;transition:height .35s ease}@media(prefers-reduced-motion:reduce){.collapsing{transition:none}}.dropup,.dropright,.dropdown,.dropleft{position:relative}.dropdown-toggle{white-space:nowrap}.dropdown-toggle::after{display:inline-block;margin-left:.255em;vertical-align:.255em;content:"";border-top:.3em solid;border-right:.3em solid transparent;border-bottom:0;border-left:.3em solid transparent}.dropdown-toggle:empty::after{margin-left:0}.dropdown-menu{position:absolute;top:100%;left:0;z-index:1000;display:none;float:left;min-width:10rem;padding:.5rem 0;margin:.125rem 0 0;font-size:1rem;color:#212529;text-align:left;list-style:none;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.15);border-radius:.25rem}.dropdown-menu-left{right:auto;left:0}.dropdown-menu-right{right:0;left:auto}@media(min-width:576px){.dropdown-menu-sm-left{right:auto;left:0}.dropdown-menu-sm-right{right:0;left:auto}}@media(min-width:768px){.dropdown-menu-md-left{right:auto;left:0}.dropdown-menu-md-right{right:0;left:auto}}@media(min-width:992px){.dropdown-menu-lg-left{right:auto;left:0}.dropdown-menu-lg-right{right:0;left:auto}}@media(min-width:1200px){.dropdown-menu-xl-left{right:auto;left:0}.dropdown-menu-xl-right{right:0;left:auto}}.dropup .dropdown-menu{top:auto;bottom:100%;margin-top:0;margin-bottom:.125rem}.dropup .dropdown-toggle::after{display:inline-block;margin-left:.255em;vertical-align:.255em;content:"";border-top:0;border-right:.3em solid transparent;border-bottom:.3em solid;border-left:.3em solid transparent}.dropup .dropdown-toggle:empty::after{margin-left:0}.dropright .dropdown-menu{top:0;right:auto;left:100%;margin-top:0;margin-left:.125rem}.dropright .dropdown-toggle::after{display:inline-block;margin-left:.255em;vertical-align:.255em;content:"";border-top:.3em solid transparent;border-right:0;border-bottom:.3em solid transparent;border-left:.3em solid}.dropright .dropdown-toggle:empty::after{margin-left:0}.dropright .dropdown-toggle::after{vertical-align:0}.dropleft .dropdown-menu{top:0;right:100%;left:auto;margin-top:0;margin-right:.125rem}.dropleft .dropdown-toggle::after{display:inline-block;margin-left:.255em;vertical-align:.255em;content:""}.dropleft .dropdown-toggle::after{display:none}.dropleft .dropdown-toggle::before{display:inline-block;margin-right:.255em;vertical-align:.255em;content:"";border-top:.3em solid transparent;border-right:.3em solid;border-bottom:.3em solid transparent}.dropleft .dropdown-toggle:empty::after{margin-left:0}.dropleft .dropdown-toggle::before{vertical-align:0}.dropdown-menu[x-placement^=top],.dropdown-menu[x-placement^=right],.dropdown-menu[x-placement^=bottom],.dropdown-menu[x-placement^=left]{right:auto;bottom:auto}.dropdown-divider{height:0;margin:.5rem 0;overflow:hidden;border-top:1px solid #e9ecef}.dropdown-item{display:block;width:100%;padding:.25rem 1.5rem;clear:both;font-weight:400;color:#212529;text-align:inherit;white-space:nowrap;background-color:transparent;border:0}.dropdown-item:hover,.dropdown-item:focus{color:#16181b;text-decoration:none;background-color:#f8f9fa}.dropdown-item.active,.dropdown-item:active{color:#fff;text-decoration:none;background-color:#007bff}.dropdown-item.disabled,.dropdown-item:disabled{color:#6c757d;pointer-events:none;background-color:transparent}.dropdown-menu.show{display:block}.dropdown-header{display:block;padding:.5rem 1.5rem;margin-bottom:0;font-size:.875rem;color:#6c757d;white-space:nowrap}.dropdown-item-text{display:block;padding:.25rem 1.5rem;color:#212529}.btn-group,.btn-group-vertical{position:relative;display:inline-flex;vertical-align:middle}.btn-group>.btn,.btn-group-vertical>.btn{position:relative;flex:1 1 auto}.btn-group>.btn:hover,.btn-group-vertical>.btn:hover{z-index:1}.btn-group>.btn:focus,.btn-group>.btn:active,.btn-group>.btn.active,.btn-group-vertical>.btn:focus,.btn-group-vertical>.btn:active,.btn-group-vertical>.btn.active{z-index:1}.btn-toolbar{display:flex;flex-wrap:wrap;justify-content:flex-start}.btn-toolbar .input-group{width:auto}.btn-group>.btn:not(:first-child),.btn-group>.btn-group:not(:first-child){margin-left:-1px}.btn-group>.btn:not(:last-child):not(.dropdown-toggle),.btn-group>.btn-group:not(:last-child)>.btn{border-top-right-radius:0;border-bottom-right-radius:0}.btn-group>.btn:not(:first-child),.btn-group>.btn-group:not(:first-child)>.btn{border-top-left-radius:0;border-bottom-left-radius:0}.dropdown-toggle-split{padding-right:.5625rem;padding-left:.5625rem}.dropdown-toggle-split::after,.dropup .dropdown-toggle-split::after,.dropright .dropdown-toggle-split::after{margin-left:0}.dropleft .dropdown-toggle-split::before{margin-right:0}.btn-sm+.dropdown-toggle-split,.btn-group-sm>.btn+.dropdown-toggle-split{padding-right:.375rem;padding-left:.375rem}.btn-lg+.dropdown-toggle-split,.btn-group-lg>.btn+.dropdown-toggle-split{padding-right:.75rem;padding-left:.75rem}.btn-group-vertical{flex-direction:column;align-items:flex-start;justify-content:center}.btn-group-vertical>.btn,.btn-group-vertical>.btn-group{width:100%}.btn-group-vertical>.btn:not(:first-child),.btn-group-vertical>.btn-group:not(:first-child){margin-top:-1px}.btn-group-vertical>.btn:not(:last-child):not(.dropdown-toggle),.btn-group-vertical>.btn-group:not(:last-child)>.btn{border-bottom-right-radius:0;border-bottom-left-radius:0}.btn-group-vertical>.btn:not(:first-child),.btn-group-vertical>.btn-group:not(:first-child)>.btn{border-top-left-radius:0;border-top-right-radius:0}.btn-group-toggle>.btn,.btn-group-toggle>.btn-group>.btn{margin-bottom:0}.btn-group-toggle>.btn input[type=radio],.btn-group-toggle>.btn input[type=checkbox],.btn-group-toggle>.btn-group>.btn input[type=radio],.btn-group-toggle>.btn-group>.btn input[type=checkbox]{position:absolute;clip:rect(0,0,0,0);pointer-events:none}.input-group{position:relative;display:flex;flex-wrap:wrap;align-items:stretch;width:100%}.input-group>.form-control,.input-group>.form-control-plaintext,.input-group>.custom-select,.input-group>.custom-file{position:relative;flex:1 1 auto;width:1%;margin-bottom:0}.input-group>.form-control+.form-control,.input-group>.form-control+.custom-select,.input-group>.form-control+.custom-file,.input-group>.form-control-plaintext+.form-control,.input-group>.form-control-plaintext+.custom-select,.input-group>.form-control-plaintext+.custom-file,.input-group>.custom-select+.form-control,.input-group>.custom-select+.custom-select,.input-group>.custom-select+.custom-file,.input-group>.custom-file+.form-control,.input-group>.custom-file+.custom-select,.input-group>.custom-file+.custom-file{margin-left:-1px}.input-group>.form-control:focus,.input-group>.custom-select:focus,.input-group>.custom-file .custom-file-input:focus~.custom-file-label{z-index:3}.input-group>.custom-file .custom-file-input:focus{z-index:4}.input-group>.form-control:not(:last-child),.input-group>.custom-select:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.input-group>.form-control:not(:first-child),.input-group>.custom-select:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.input-group>.custom-file{display:flex;align-items:center}.input-group>.custom-file:not(:last-child) .custom-file-label,.input-group>.custom-file:not(:last-child) .custom-file-label::after{border-top-right-radius:0;border-bottom-right-radius:0}.input-group>.custom-file:not(:first-child) .custom-file-label{border-top-left-radius:0;border-bottom-left-radius:0}.input-group-prepend,.input-group-append{display:flex}.input-group-prepend .btn,.input-group-append .btn{position:relative;z-index:2}.input-group-prepend .btn:focus,.input-group-append .btn:focus{z-index:3}.input-group-prepend .btn+.btn,.input-group-prepend .btn+.input-group-text,.input-group-prepend .input-group-text+.input-group-text,.input-group-prepend .input-group-text+.btn,.input-group-append .btn+.btn,.input-group-append .btn+.input-group-text,.input-group-append .input-group-text+.input-group-text,.input-group-append .input-group-text+.btn{margin-left:-1px}.input-group-prepend{margin-right:-1px}.input-group-append{margin-left:-1px}.input-group-text{display:flex;align-items:center;padding:.375rem .75rem;margin-bottom:0;font-size:1rem;font-weight:400;line-height:1.5;color:#495057;text-align:center;white-space:nowrap;background-color:#e9ecef;border:1px solid #ced4da;border-radius:.25rem}.input-group-text input[type=radio],.input-group-text input[type=checkbox]{margin-top:0}.input-group-lg>.form-control:not(textarea),.input-group-lg>.custom-select{height:calc(1.5em + 1rem + 2px)}.input-group-lg>.form-control,.input-group-lg>.custom-select,.input-group-lg>.input-group-prepend>.input-group-text,.input-group-lg>.input-group-append>.input-group-text,.input-group-lg>.input-group-prepend>.btn,.input-group-lg>.input-group-append>.btn{padding:.5rem 1rem;font-size:1.25rem;line-height:1.5;border-radius:.3rem}.input-group-sm>.form-control:not(textarea),.input-group-sm>.custom-select{height:calc(1.5em + 0.5rem + 2px)}.input-group-sm>.form-control,.input-group-sm>.custom-select,.input-group-sm>.input-group-prepend>.input-group-text,.input-group-sm>.input-group-append>.input-group-text,.input-group-sm>.input-group-prepend>.btn,.input-group-sm>.input-group-append>.btn{padding:.25rem .5rem;font-size:.875rem;line-height:1.5;border-radius:.2rem}.input-group-lg>.custom-select,.input-group-sm>.custom-select{padding-right:1.75rem}.input-group>.input-group-prepend>.btn,.input-group>.input-group-prepend>.input-group-text,.input-group>.input-group-append:not(:last-child)>.btn,.input-group>.input-group-append:not(:last-child)>.input-group-text,.input-group>.input-group-append:last-child>.btn:not(:last-child):not(.dropdown-toggle),.input-group>.input-group-append:last-child>.input-group-text:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.input-group>.input-group-append>.btn,.input-group>.input-group-append>.input-group-text,.input-group>.input-group-prepend:not(:first-child)>.btn,.input-group>.input-group-prepend:not(:first-child)>.input-group-text,.input-group>.input-group-prepend:first-child>.btn:not(:first-child),.input-group>.input-group-prepend:first-child>.input-group-text:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.custom-control{position:relative;display:block;min-height:1.5rem;padding-left:1.5rem}.custom-control-inline{display:inline-flex;margin-right:1rem}.custom-control-input{position:absolute;z-index:-1;opacity:0}.custom-control-input:checked~.custom-control-label::before{color:#fff;border-color:#007bff;background-color:#007bff}.custom-control-input:focus~.custom-control-label::before{box-shadow:0 0 0 .2rem rgba(0,123,255,.25)}.custom-control-input:focus:not(:checked)~.custom-control-label::before{border-color:#80bdff}.custom-control-input:not(:disabled):active~.custom-control-label::before{color:#fff;background-color:#b3d7ff;border-color:#b3d7ff}.custom-control-input:disabled~.custom-control-label{color:#6c757d}.custom-control-input:disabled~.custom-control-label::before{background-color:#e9ecef}.custom-control-label{position:relative;margin-bottom:0;vertical-align:top}.custom-control-label::before{position:absolute;top:.25rem;left:-1.5rem;display:block;width:1rem;height:1rem;pointer-events:none;content:"";background-color:#fff;border:#adb5bd solid 1px}.custom-control-label::after{position:absolute;top:.25rem;left:-1.5rem;display:block;width:1rem;height:1rem;content:"";background:no-repeat 50%/50% 50%}.custom-checkbox .custom-control-label::before{border-radius:.25rem}.custom-checkbox .custom-control-input:checked~.custom-control-label::after{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA4IDgnPjxwYXRoIGZpbGw9JyNmZmYnIGQ9J002LjU2NC43NWwtMy41OSAzLjYxMi0xLjUzOC0xLjU1TDAgNC4yNiAyLjk3NCA3LjI1IDggMi4xOTN6Jy8+PC9zdmc+)}.custom-checkbox .custom-control-input:indeterminate~.custom-control-label::before{border-color:#007bff;background-color:#007bff}.custom-checkbox .custom-control-input:indeterminate~.custom-control-label::after{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA0IDQnPjxwYXRoIHN0cm9rZT0nI2ZmZicgZD0nTTAgMmg0Jy8+PC9zdmc+)}.custom-checkbox .custom-control-input:disabled:checked~.custom-control-label::before{background-color:rgba(0,123,255,.5)}.custom-checkbox .custom-control-input:disabled:indeterminate~.custom-control-label::before{background-color:rgba(0,123,255,.5)}.custom-radio .custom-control-label::before{border-radius:50%}.custom-radio .custom-control-input:checked~.custom-control-label::after{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9Jy00IC00IDggOCc+PGNpcmNsZSByPSczJyBmaWxsPScjZmZmJy8+PC9zdmc+)}.custom-radio .custom-control-input:disabled:checked~.custom-control-label::before{background-color:rgba(0,123,255,.5)}.custom-switch{padding-left:2.25rem}.custom-switch .custom-control-label::before{left:-2.25rem;width:1.75rem;pointer-events:all;border-radius:.5rem}.custom-switch .custom-control-label::after{top:calc(0.25rem + 2px);left:calc(-2.25rem + 2px);width:calc(1rem - 4px);height:calc(1rem - 4px);background-color:#adb5bd;border-radius:.5rem;transition:transform .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media(prefers-reduced-motion:reduce){.custom-switch .custom-control-label::after{transition:none}}.custom-switch .custom-control-input:checked~.custom-control-label::after{background-color:#fff;transform:translateX(0.75rem)}.custom-switch .custom-control-input:disabled:checked~.custom-control-label::before{background-color:rgba(0,123,255,.5)}.custom-select{display:inline-block;width:100%;height:calc(1.5em + 0.75rem + 2px);padding:.375rem 1.75rem .375rem .75rem;font-size:1rem;font-weight:400;line-height:1.5;color:#495057;vertical-align:middle;background:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px;background-color:#fff;border:1px solid #ced4da;border-radius:.25rem;appearance:none}.custom-select:focus{border-color:#80bdff;outline:0;box-shadow:0 0 0 .2rem rgba(0,123,255,.25)}.custom-select:focus::-ms-value{color:#495057;background-color:#fff}.custom-select[multiple],.custom-select[size]:not([size="1"]){height:auto;padding-right:.75rem;background-image:none}.custom-select:disabled{color:#6c757d;background-color:#e9ecef}.custom-select::-ms-expand{display:none}.custom-select-sm{height:calc(1.5em + 0.5rem + 2px);padding-top:.25rem;padding-bottom:.25rem;padding-left:.5rem;font-size:.875rem}.custom-select-lg{height:calc(1.5em + 1rem + 2px);padding-top:.5rem;padding-bottom:.5rem;padding-left:1rem;font-size:1.25rem}.custom-file{position:relative;display:inline-block;width:100%;height:calc(1.5em + 0.75rem + 2px);margin-bottom:0}.custom-file-input{position:relative;z-index:2;width:100%;height:calc(1.5em + 0.75rem + 2px);margin:0;opacity:0}.custom-file-input:focus~.custom-file-label{border-color:#80bdff;box-shadow:0 0 0 .2rem rgba(0,123,255,.25)}.custom-file-input:disabled~.custom-file-label{background-color:#e9ecef}.custom-file-input:lang(en)~.custom-file-label::after{content:"Browse"}.custom-file-input~.custom-file-label[data-browse]::after{content:attr(data-browse)}.custom-file-label{position:absolute;top:0;right:0;left:0;z-index:1;height:calc(1.5em + 0.75rem + 2px);padding:.375rem .75rem;font-weight:400;line-height:1.5;color:#495057;background-color:#fff;border:1px solid #ced4da;border-radius:.25rem}.custom-file-label::after{position:absolute;top:0;right:0;bottom:0;z-index:3;display:block;height:calc(1.5em + 0.75rem);padding:.375rem .75rem;line-height:1.5;color:#495057;content:"Browse";background-color:#e9ecef;border-left:inherit;border-radius:0 .25rem .25rem 0}.custom-range{width:100%;height:calc(1rem + 0.4rem);padding:0;background-color:transparent;appearance:none}.custom-range:focus{outline:none}.custom-range:focus::-webkit-slider-thumb{box-shadow:0 0 0 1px #fff,0 0 0 .2rem rgba(0,123,255,.25)}.custom-range:focus::-moz-range-thumb{box-shadow:0 0 0 1px #fff,0 0 0 .2rem rgba(0,123,255,.25)}.custom-range:focus::-ms-thumb{box-shadow:0 0 0 1px #fff,0 0 0 .2rem rgba(0,123,255,.25)}.custom-range::-moz-focus-outer{border:0}.custom-range::-webkit-slider-thumb{width:1rem;height:1rem;margin-top:-.25rem;background-color:#007bff;border:0;border-radius:1rem;transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;appearance:none}@media(prefers-reduced-motion:reduce){.custom-range::-webkit-slider-thumb{transition:none}}.custom-range::-webkit-slider-thumb:active{background-color:#b3d7ff}.custom-range::-webkit-slider-runnable-track{width:100%;height:.5rem;color:transparent;cursor:pointer;background-color:#dee2e6;border-color:transparent;border-radius:1rem}.custom-range::-moz-range-thumb{width:1rem;height:1rem;background-color:#007bff;border:0;border-radius:1rem;transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;appearance:none}@media(prefers-reduced-motion:reduce){.custom-range::-moz-range-thumb{transition:none}}.custom-range::-moz-range-thumb:active{background-color:#b3d7ff}.custom-range::-moz-range-track{width:100%;height:.5rem;color:transparent;cursor:pointer;background-color:#dee2e6;border-color:transparent;border-radius:1rem}.custom-range::-ms-thumb{width:1rem;height:1rem;margin-top:0;margin-right:.2rem;margin-left:.2rem;background-color:#007bff;border:0;border-radius:1rem;transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;appearance:none}@media(prefers-reduced-motion:reduce){.custom-range::-ms-thumb{transition:none}}.custom-range::-ms-thumb:active{background-color:#b3d7ff}.custom-range::-ms-track{width:100%;height:.5rem;color:transparent;cursor:pointer;background-color:transparent;border-color:transparent;border-width:.5rem}.custom-range::-ms-fill-lower{background-color:#dee2e6;border-radius:1rem}.custom-range::-ms-fill-upper{margin-right:15px;background-color:#dee2e6;border-radius:1rem}.custom-range:disabled::-webkit-slider-thumb{background-color:#adb5bd}.custom-range:disabled::-webkit-slider-runnable-track{cursor:default}.custom-range:disabled::-moz-range-thumb{background-color:#adb5bd}.custom-range:disabled::-moz-range-track{cursor:default}.custom-range:disabled::-ms-thumb{background-color:#adb5bd}.custom-control-label::before,.custom-file-label,.custom-select{transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media(prefers-reduced-motion:reduce){.custom-control-label::before,.custom-file-label,.custom-select{transition:none}}.nav{display:flex;flex-wrap:wrap;padding-left:0;margin-bottom:0;list-style:none}.nav-link{display:block;padding:.5rem 1rem}.nav-link:hover,.nav-link:focus{text-decoration:none}.nav-link.disabled{color:#6c757d;pointer-events:none;cursor:default}.nav-tabs{border-bottom:1px solid #dee2e6}.nav-tabs .nav-item{margin-bottom:-1px}.nav-tabs .nav-link{border:1px solid transparent;border-top-left-radius:.25rem;border-top-right-radius:.25rem}.nav-tabs .nav-link:hover,.nav-tabs .nav-link:focus{border-color:#e9ecef #e9ecef #dee2e6}.nav-tabs .nav-link.disabled{color:#6c757d;background-color:transparent;border-color:transparent}.nav-tabs .nav-link.active,.nav-tabs .nav-item.show .nav-link{color:#495057;background-color:#fff;border-color:#dee2e6 #dee2e6 #fff}.nav-tabs .dropdown-menu{margin-top:-1px;border-top-left-radius:0;border-top-right-radius:0}.nav-pills .nav-link{border-radius:.25rem}.nav-pills .nav-link.active,.nav-pills .show>.nav-link{color:#fff;background-color:#007bff}.nav-fill .nav-item{flex:1 1 auto;text-align:center}.nav-justified .nav-item{flex-basis:0;flex-grow:1;text-align:center}.tab-content>.tab-pane{display:none}.tab-content>.active{display:block}.navbar{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;padding:.5rem 1rem}.navbar>.container,.navbar>.container-fluid{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between}.navbar-brand{display:inline-block;padding-top:.3125rem;padding-bottom:.3125rem;margin-right:1rem;font-size:1.25rem;line-height:inherit;white-space:nowrap}.navbar-brand:hover,.navbar-brand:focus{text-decoration:none}.navbar-nav{display:flex;flex-direction:column;padding-left:0;margin-bottom:0;list-style:none}.navbar-nav .nav-link{padding-right:0;padding-left:0}.navbar-nav .dropdown-menu{position:static;float:none}.navbar-text{display:inline-block;padding-top:.5rem;padding-bottom:.5rem}.navbar-collapse{flex-basis:100%;flex-grow:1;align-items:center}.navbar-toggler{padding:.25rem .75rem;font-size:1.25rem;line-height:1;background-color:transparent;border:1px solid transparent;border-radius:.25rem}.navbar-toggler:hover,.navbar-toggler:focus{text-decoration:none}.navbar-toggler-icon{display:inline-block;width:1.5em;height:1.5em;vertical-align:middle;content:"";background:no-repeat center center;background-size:100% 100%}@media(max-width:575.98px){.navbar-expand-sm>.container,.navbar-expand-sm>.container-fluid{padding-right:0;padding-left:0}}@media(min-width:576px){.navbar-expand-sm{flex-flow:row nowrap;justify-content:flex-start}.navbar-expand-sm .navbar-nav{flex-direction:row}.navbar-expand-sm .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-sm .navbar-nav .nav-link{padding-right:.5rem;padding-left:.5rem}.navbar-expand-sm>.container,.navbar-expand-sm>.container-fluid{flex-wrap:nowrap}.navbar-expand-sm .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-sm .navbar-toggler{display:none}}@media(max-width:767.98px){.navbar-expand-md>.container,.navbar-expand-md>.container-fluid{padding-right:0;padding-left:0}}@media(min-width:768px){.navbar-expand-md{flex-flow:row nowrap;justify-content:flex-start}.navbar-expand-md .navbar-nav{flex-direction:row}.navbar-expand-md .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-md .navbar-nav .nav-link{padding-right:.5rem;padding-left:.5rem}.navbar-expand-md>.container,.navbar-expand-md>.container-fluid{flex-wrap:nowrap}.navbar-expand-md .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-md .navbar-toggler{display:none}}@media(max-width:991.98px){.navbar-expand-lg>.container,.navbar-expand-lg>.container-fluid{padding-right:0;padding-left:0}}@media(min-width:992px){.navbar-expand-lg{flex-flow:row nowrap;justify-content:flex-start}.navbar-expand-lg .navbar-nav{flex-direction:row}.navbar-expand-lg .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-lg .navbar-nav .nav-link{padding-right:.5rem;padding-left:.5rem}.navbar-expand-lg>.container,.navbar-expand-lg>.container-fluid{flex-wrap:nowrap}.navbar-expand-lg .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-lg .navbar-toggler{display:none}}@media(max-width:1199.98px){.navbar-expand-xl>.container,.navbar-expand-xl>.container-fluid{padding-right:0;padding-left:0}}@media(min-width:1200px){.navbar-expand-xl{flex-flow:row nowrap;justify-content:flex-start}.navbar-expand-xl .navbar-nav{flex-direction:row}.navbar-expand-xl .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-xl .navbar-nav .nav-link{padding-right:.5rem;padding-left:.5rem}.navbar-expand-xl>.container,.navbar-expand-xl>.container-fluid{flex-wrap:nowrap}.navbar-expand-xl .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-xl .navbar-toggler{display:none}}.navbar-expand{flex-flow:row nowrap;justify-content:flex-start}.navbar-expand>.container,.navbar-expand>.container-fluid{padding-right:0;padding-left:0}.navbar-expand .navbar-nav{flex-direction:row}.navbar-expand .navbar-nav .dropdown-menu{position:absolute}.navbar-expand .navbar-nav .nav-link{padding-right:.5rem;padding-left:.5rem}.navbar-expand>.container,.navbar-expand>.container-fluid{flex-wrap:nowrap}.navbar-expand .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand .navbar-toggler{display:none}.navbar-light .navbar-brand{color:rgba(0,0,0,.9)}.navbar-light .navbar-brand:hover,.navbar-light .navbar-brand:focus{color:rgba(0,0,0,.9)}.navbar-light .navbar-nav .nav-link{color:rgba(0,0,0,.5)}.navbar-light .navbar-nav .nav-link:hover,.navbar-light .navbar-nav .nav-link:focus{color:rgba(0,0,0,.7)}.navbar-light .navbar-nav .nav-link.disabled{color:rgba(0,0,0,.3)}.navbar-light .navbar-nav .show>.nav-link,.navbar-light .navbar-nav .active>.nav-link,.navbar-light .navbar-nav .nav-link.show,.navbar-light .navbar-nav .nav-link.active{color:rgba(0,0,0,.9)}.navbar-light .navbar-toggler{color:rgba(0,0,0,.5);border-color:rgba(0,0,0,.1)}.navbar-light .navbar-toggler-icon{background-image:url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PScwIDAgMzAgMzAnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHBhdGggc3Ryb2tlPSdyZ2JhKDAsIDAsIDAsIDAuNSknIHN0cm9rZS13aWR0aD0nMicgc3Ryb2tlLWxpbmVjYXA9J3JvdW5kJyBzdHJva2UtbWl0ZXJsaW1pdD0nMTAnIGQ9J000IDdoMjJNNCAxNWgyMk00IDIzaDIyJy8+PC9zdmc+)}.navbar-light .navbar-text{color:rgba(0,0,0,.5)}.navbar-light .navbar-text a{color:rgba(0,0,0,.9)}.navbar-light .navbar-text a:hover,.navbar-light .navbar-text a:focus{color:rgba(0,0,0,.9)}.navbar-dark .navbar-brand{color:#fff}.navbar-dark .navbar-brand:hover,.navbar-dark .navbar-brand:focus{color:#fff}.navbar-dark .navbar-nav .nav-link{color:rgba(255,255,255,.5)}.navbar-dark .navbar-nav .nav-link:hover,.navbar-dark .navbar-nav .nav-link:focus{color:rgba(255,255,255,.75)}.navbar-dark .navbar-nav .nav-link.disabled{color:rgba(255,255,255,.25)}.navbar-dark .navbar-nav .show>.nav-link,.navbar-dark .navbar-nav .active>.nav-link,.navbar-dark .navbar-nav .nav-link.show,.navbar-dark .navbar-nav .nav-link.active{color:#fff}.navbar-dark .navbar-toggler{color:rgba(255,255,255,.5);border-color:rgba(255,255,255,.1)}.navbar-dark .navbar-toggler-icon{background-image:url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PScwIDAgMzAgMzAnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHBhdGggc3Ryb2tlPSdyZ2JhKDI1NSwgMjU1LCAyNTUsIDAuNSknIHN0cm9rZS13aWR0aD0nMicgc3Ryb2tlLWxpbmVjYXA9J3JvdW5kJyBzdHJva2UtbWl0ZXJsaW1pdD0nMTAnIGQ9J000IDdoMjJNNCAxNWgyMk00IDIzaDIyJy8+PC9zdmc+)}.navbar-dark .navbar-text{color:rgba(255,255,255,.5)}.navbar-dark .navbar-text a{color:#fff}.navbar-dark .navbar-text a:hover,.navbar-dark .navbar-text a:focus{color:#fff}.card{position:relative;display:flex;flex-direction:column;min-width:0;word-wrap:break-word;background-color:#fff;background-clip:border-box;border:1px solid rgba(0,0,0,.125);border-radius:.25rem}.card>hr{margin-right:0;margin-left:0}.card>.list-group:first-child .list-group-item:first-child{border-top-left-radius:.25rem;border-top-right-radius:.25rem}.card>.list-group:last-child .list-group-item:last-child{border-bottom-right-radius:.25rem;border-bottom-left-radius:.25rem}.card-body{flex:1 1 auto;padding:1.25rem}.card-title{margin-bottom:.75rem}.card-subtitle{margin-top:-.375rem;margin-bottom:0}.card-text:last-child{margin-bottom:0}.card-link:hover{text-decoration:none}.card-link+.card-link{margin-left:1.25rem}.card-header{padding:.75rem 1.25rem;margin-bottom:0;background-color:rgba(0,0,0,.03);border-bottom:1px solid rgba(0,0,0,.125)}.card-header:first-child{border-radius:calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0}.card-header+.list-group .list-group-item:first-child{border-top:0}.card-footer{padding:.75rem 1.25rem;background-color:rgba(0,0,0,.03);border-top:1px solid rgba(0,0,0,.125)}.card-footer:last-child{border-radius:0 0 calc(0.25rem - 1px) calc(0.25rem - 1px)}.card-header-tabs{margin-right:-.625rem;margin-bottom:-.75rem;margin-left:-.625rem;border-bottom:0}.card-header-pills{margin-right:-.625rem;margin-left:-.625rem}.card-img-overlay{position:absolute;top:0;right:0;bottom:0;left:0;padding:1.25rem}.card-img{width:100%;border-radius:calc(0.25rem - 1px)}.card-img-top{width:100%;border-top-left-radius:calc(0.25rem - 1px);border-top-right-radius:calc(0.25rem - 1px)}.card-img-bottom{width:100%;border-bottom-right-radius:calc(0.25rem - 1px);border-bottom-left-radius:calc(0.25rem - 1px)}.card-deck{display:flex;flex-direction:column}.card-deck .card{margin-bottom:15px}@media(min-width:576px){.card-deck{flex-flow:row wrap;margin-right:-15px;margin-left:-15px}.card-deck .card{display:flex;flex:1 0 0%;flex-direction:column;margin-right:15px;margin-bottom:0;margin-left:15px}}.card-group{display:flex;flex-direction:column}.card-group>.card{margin-bottom:15px}@media(min-width:576px){.card-group{flex-flow:row wrap}.card-group>.card{flex:1 0 0%;margin-bottom:0}.card-group>.card+.card{margin-left:0;border-left:0}.card-group>.card:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.card-group>.card:not(:last-child) .card-img-top,.card-group>.card:not(:last-child) .card-header{border-top-right-radius:0}.card-group>.card:not(:last-child) .card-img-bottom,.card-group>.card:not(:last-child) .card-footer{border-bottom-right-radius:0}.card-group>.card:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.card-group>.card:not(:first-child) .card-img-top,.card-group>.card:not(:first-child) .card-header{border-top-left-radius:0}.card-group>.card:not(:first-child) .card-img-bottom,.card-group>.card:not(:first-child) .card-footer{border-bottom-left-radius:0}}.card-columns .card{margin-bottom:.75rem}@media(min-width:576px){.card-columns{column-count:3;column-gap:1.25rem;orphans:1;widows:1}.card-columns .card{display:inline-block;width:100%}}.accordion>.card{overflow:hidden}.accordion>.card:not(:first-of-type) .card-header:first-child{border-radius:0}.accordion>.card:not(:first-of-type):not(:last-of-type){border-bottom:0;border-radius:0}.accordion>.card:first-of-type{border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.accordion>.card:last-of-type{border-top-left-radius:0;border-top-right-radius:0}.accordion>.card .card-header{margin-bottom:-1px}.breadcrumb{display:flex;flex-wrap:wrap;padding:.75rem 1rem;margin-bottom:1rem;list-style:none;background-color:#e9ecef;border-radius:.25rem}.breadcrumb-item+.breadcrumb-item{padding-left:.5rem}.breadcrumb-item+.breadcrumb-item::before{display:inline-block;padding-right:.5rem;color:#6c757d;content:"/"}.breadcrumb-item+.breadcrumb-item:hover::before{text-decoration:underline}.breadcrumb-item+.breadcrumb-item:hover::before{text-decoration:none}.breadcrumb-item.active{color:#6c757d}.pagination{display:flex;padding-left:0;list-style:none;border-radius:.25rem}.page-link{position:relative;display:block;padding:.5rem .75rem;margin-left:-1px;line-height:1.25;color:#007bff;background-color:#fff;border:1px solid #dee2e6}.page-link:hover{z-index:2;color:#0056b3;text-decoration:none;background-color:#e9ecef;border-color:#dee2e6}.page-link:focus{z-index:2;outline:0;box-shadow:0 0 0 .2rem rgba(0,123,255,.25)}.page-item:first-child .page-link{margin-left:0;border-top-left-radius:.25rem;border-bottom-left-radius:.25rem}.page-item:last-child .page-link{border-top-right-radius:.25rem;border-bottom-right-radius:.25rem}.page-item.active .page-link{z-index:1;color:#fff;background-color:#007bff;border-color:#007bff}.page-item.disabled .page-link{color:#6c757d;pointer-events:none;cursor:auto;background-color:#fff;border-color:#dee2e6}.pagination-lg .page-link{padding:.75rem 1.5rem;font-size:1.25rem;line-height:1.5}.pagination-lg .page-item:first-child .page-link{border-top-left-radius:.3rem;border-bottom-left-radius:.3rem}.pagination-lg .page-item:last-child .page-link{border-top-right-radius:.3rem;border-bottom-right-radius:.3rem}.pagination-sm .page-link{padding:.25rem .5rem;font-size:.875rem;line-height:1.5}.pagination-sm .page-item:first-child .page-link{border-top-left-radius:.2rem;border-bottom-left-radius:.2rem}.pagination-sm .page-item:last-child .page-link{border-top-right-radius:.2rem;border-bottom-right-radius:.2rem}.badge{display:inline-block;padding:.25em .4em;font-size:75%;font-weight:700;line-height:1;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25rem;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media(prefers-reduced-motion:reduce){.badge{transition:none}}a.badge:hover,a.badge:focus{text-decoration:none}.badge:empty{display:none}.btn .badge{position:relative;top:-1px}.badge-pill{padding-right:.6em;padding-left:.6em;border-radius:10rem}.badge-primary{color:#fff;background-color:#007bff}a.badge-primary:hover,a.badge-primary:focus{color:#fff;background-color:#0062cc}a.badge-primary:focus,a.badge-primary.focus{outline:0;box-shadow:0 0 0 .2rem rgba(0,123,255,.5)}.badge-secondary{color:#fff;background-color:#6c757d}a.badge-secondary:hover,a.badge-secondary:focus{color:#fff;background-color:#545b62}a.badge-secondary:focus,a.badge-secondary.focus{outline:0;box-shadow:0 0 0 .2rem rgba(108,117,125,.5)}.badge-success{color:#fff;background-color:#28a745}a.badge-success:hover,a.badge-success:focus{color:#fff;background-color:#1e7e34}a.badge-success:focus,a.badge-success.focus{outline:0;box-shadow:0 0 0 .2rem rgba(40,167,69,.5)}.badge-info{color:#fff;background-color:#17a2b8}a.badge-info:hover,a.badge-info:focus{color:#fff;background-color:#117a8b}a.badge-info:focus,a.badge-info.focus{outline:0;box-shadow:0 0 0 .2rem rgba(23,162,184,.5)}.badge-warning{color:#212529;background-color:#ffc107}a.badge-warning:hover,a.badge-warning:focus{color:#212529;background-color:#d39e00}a.badge-warning:focus,a.badge-warning.focus{outline:0;box-shadow:0 0 0 .2rem rgba(255,193,7,.5)}.badge-danger{color:#fff;background-color:#dc3545}a.badge-danger:hover,a.badge-danger:focus{color:#fff;background-color:#bd2130}a.badge-danger:focus,a.badge-danger.focus{outline:0;box-shadow:0 0 0 .2rem rgba(220,53,69,.5)}.badge-light{color:#212529;background-color:#f8f9fa}a.badge-light:hover,a.badge-light:focus{color:#212529;background-color:#dae0e5}a.badge-light:focus,a.badge-light.focus{outline:0;box-shadow:0 0 0 .2rem rgba(248,249,250,.5)}.badge-dark{color:#fff;background-color:#343a40}a.badge-dark:hover,a.badge-dark:focus{color:#fff;background-color:#1d2124}a.badge-dark:focus,a.badge-dark.focus{outline:0;box-shadow:0 0 0 .2rem rgba(52,58,64,.5)}.jumbotron{padding:2rem 1rem;margin-bottom:2rem;background-color:#e9ecef;border-radius:.3rem}@media(min-width:576px){.jumbotron{padding:4rem 2rem}}.jumbotron-fluid{padding-right:0;padding-left:0;border-radius:0}.alert{position:relative;padding:.75rem 1.25rem;margin-bottom:1rem;border:1px solid transparent;border-radius:.25rem}.alert-heading{color:inherit}.alert-link{font-weight:700}.alert-dismissible{padding-right:4rem}.alert-dismissible .close{position:absolute;top:0;right:0;padding:.75rem 1.25rem;color:inherit}.alert-primary{color:#004085;background-color:#cce5ff;border-color:#b8daff}.alert-primary hr{border-top-color:#9fcdff}.alert-primary .alert-link{color:#002752}.alert-secondary{color:#383d41;background-color:#e2e3e5;border-color:#d6d8db}.alert-secondary hr{border-top-color:#c8cbcf}.alert-secondary .alert-link{color:#202326}.alert-success{color:#155724;background-color:#d4edda;border-color:#c3e6cb}.alert-success hr{border-top-color:#b1dfbb}.alert-success .alert-link{color:#0b2e13}.alert-info{color:#0c5460;background-color:#d1ecf1;border-color:#bee5eb}.alert-info hr{border-top-color:#abdde5}.alert-info .alert-link{color:#062c33}.alert-warning{color:#856404;background-color:#fff3cd;border-color:#ffeeba}.alert-warning hr{border-top-color:#ffe8a1}.alert-warning .alert-link{color:#533f03}.alert-danger{color:#721c24;background-color:#f8d7da;border-color:#f5c6cb}.alert-danger hr{border-top-color:#f1b0b7}.alert-danger .alert-link{color:#491217}.alert-light{color:#818182;background-color:#fefefe;border-color:#fdfdfe}.alert-light hr{border-top-color:#ececf6}.alert-light .alert-link{color:#686868}.alert-dark{color:#1b1e21;background-color:#d6d8d9;border-color:#c6c8ca}.alert-dark hr{border-top-color:#b9bbbe}.alert-dark .alert-link{color:#040505}@keyframes progress-bar-stripes{from{background-position:1rem 0}to{background-position:0 0}}.progress{display:flex;height:1rem;overflow:hidden;font-size:.75rem;background-color:#e9ecef;border-radius:.25rem}.progress-bar{display:flex;flex-direction:column;justify-content:center;color:#fff;text-align:center;white-space:nowrap;background-color:#007bff;transition:width .6s ease}@media(prefers-reduced-motion:reduce){.progress-bar{transition:none}}.progress-bar-striped{background-image:linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);background-size:1rem 1rem}.progress-bar-animated{animation:progress-bar-stripes 1s linear infinite}@media(prefers-reduced-motion:reduce){.progress-bar-animated{animation:none}}.media{display:flex;align-items:flex-start}.media-body{flex:1}.list-group{display:flex;flex-direction:column;padding-left:0;margin-bottom:0}.list-group-item-action{width:100%;color:#495057;text-align:inherit}.list-group-item-action:hover,.list-group-item-action:focus{z-index:1;color:#495057;text-decoration:none;background-color:#f8f9fa}.list-group-item-action:active{color:#212529;background-color:#e9ecef}.list-group-item{position:relative;display:block;padding:.75rem 1.25rem;margin-bottom:-1px;background-color:#fff;border:1px solid rgba(0,0,0,.125)}.list-group-item:first-child{border-top-left-radius:.25rem;border-top-right-radius:.25rem}.list-group-item:last-child{margin-bottom:0;border-bottom-right-radius:.25rem;border-bottom-left-radius:.25rem}.list-group-item.disabled,.list-group-item:disabled{color:#6c757d;pointer-events:none;background-color:#fff}.list-group-item.active{z-index:2;color:#fff;background-color:#007bff;border-color:#007bff}.list-group-horizontal{flex-direction:row}.list-group-horizontal .list-group-item{margin-right:-1px;margin-bottom:0}.list-group-horizontal .list-group-item:first-child{border-top-left-radius:.25rem;border-bottom-left-radius:.25rem;border-top-right-radius:0}.list-group-horizontal .list-group-item:last-child{margin-right:0;border-top-right-radius:.25rem;border-bottom-right-radius:.25rem;border-bottom-left-radius:0}@media(min-width:576px){.list-group-horizontal-sm{flex-direction:row}.list-group-horizontal-sm .list-group-item{margin-right:-1px;margin-bottom:0}.list-group-horizontal-sm .list-group-item:first-child{border-top-left-radius:.25rem;border-bottom-left-radius:.25rem;border-top-right-radius:0}.list-group-horizontal-sm .list-group-item:last-child{margin-right:0;border-top-right-radius:.25rem;border-bottom-right-radius:.25rem;border-bottom-left-radius:0}}@media(min-width:768px){.list-group-horizontal-md{flex-direction:row}.list-group-horizontal-md .list-group-item{margin-right:-1px;margin-bottom:0}.list-group-horizontal-md .list-group-item:first-child{border-top-left-radius:.25rem;border-bottom-left-radius:.25rem;border-top-right-radius:0}.list-group-horizontal-md .list-group-item:last-child{margin-right:0;border-top-right-radius:.25rem;border-bottom-right-radius:.25rem;border-bottom-left-radius:0}}@media(min-width:992px){.list-group-horizontal-lg{flex-direction:row}.list-group-horizontal-lg .list-group-item{margin-right:-1px;margin-bottom:0}.list-group-horizontal-lg .list-group-item:first-child{border-top-left-radius:.25rem;border-bottom-left-radius:.25rem;border-top-right-radius:0}.list-group-horizontal-lg .list-group-item:last-child{margin-right:0;border-top-right-radius:.25rem;border-bottom-right-radius:.25rem;border-bottom-left-radius:0}}@media(min-width:1200px){.list-group-horizontal-xl{flex-direction:row}.list-group-horizontal-xl .list-group-item{margin-right:-1px;margin-bottom:0}.list-group-horizontal-xl .list-group-item:first-child{border-top-left-radius:.25rem;border-bottom-left-radius:.25rem;border-top-right-radius:0}.list-group-horizontal-xl .list-group-item:last-child{margin-right:0;border-top-right-radius:.25rem;border-bottom-right-radius:.25rem;border-bottom-left-radius:0}}.list-group-flush .list-group-item{border-right:0;border-left:0;border-radius:0}.list-group-flush .list-group-item:last-child{margin-bottom:-1px}.list-group-flush:first-child .list-group-item:first-child{border-top:0}.list-group-flush:last-child .list-group-item:last-child{margin-bottom:0;border-bottom:0}.list-group-item-primary{color:#004085;background-color:#b8daff}.list-group-item-primary.list-group-item-action:hover,.list-group-item-primary.list-group-item-action:focus{color:#004085;background-color:#9fcdff}.list-group-item-primary.list-group-item-action.active{color:#fff;background-color:#004085;border-color:#004085}.list-group-item-secondary{color:#383d41;background-color:#d6d8db}.list-group-item-secondary.list-group-item-action:hover,.list-group-item-secondary.list-group-item-action:focus{color:#383d41;background-color:#c8cbcf}.list-group-item-secondary.list-group-item-action.active{color:#fff;background-color:#383d41;border-color:#383d41}.list-group-item-success{color:#155724;background-color:#c3e6cb}.list-group-item-success.list-group-item-action:hover,.list-group-item-success.list-group-item-action:focus{color:#155724;background-color:#b1dfbb}.list-group-item-success.list-group-item-action.active{color:#fff;background-color:#155724;border-color:#155724}.list-group-item-info{color:#0c5460;background-color:#bee5eb}.list-group-item-info.list-group-item-action:hover,.list-group-item-info.list-group-item-action:focus{color:#0c5460;background-color:#abdde5}.list-group-item-info.list-group-item-action.active{color:#fff;background-color:#0c5460;border-color:#0c5460}.list-group-item-warning{color:#856404;background-color:#ffeeba}.list-group-item-warning.list-group-item-action:hover,.list-group-item-warning.list-group-item-action:focus{color:#856404;background-color:#ffe8a1}.list-group-item-warning.list-group-item-action.active{color:#fff;background-color:#856404;border-color:#856404}.list-group-item-danger{color:#721c24;background-color:#f5c6cb}.list-group-item-danger.list-group-item-action:hover,.list-group-item-danger.list-group-item-action:focus{color:#721c24;background-color:#f1b0b7}.list-group-item-danger.list-group-item-action.active{color:#fff;background-color:#721c24;border-color:#721c24}.list-group-item-light{color:#818182;background-color:#fdfdfe}.list-group-item-light.list-group-item-action:hover,.list-group-item-light.list-group-item-action:focus{color:#818182;background-color:#ececf6}.list-group-item-light.list-group-item-action.active{color:#fff;background-color:#818182;border-color:#818182}.list-group-item-dark{color:#1b1e21;background-color:#c6c8ca}.list-group-item-dark.list-group-item-action:hover,.list-group-item-dark.list-group-item-action:focus{color:#1b1e21;background-color:#b9bbbe}.list-group-item-dark.list-group-item-action.active{color:#fff;background-color:#1b1e21;border-color:#1b1e21}.close{float:right;font-size:1.5rem;font-weight:700;line-height:1;color:#000;text-shadow:0 1px 0 #fff;opacity:.5}.close:hover{color:#000;text-decoration:none}.close:not(:disabled):not(.disabled):hover,.close:not(:disabled):not(.disabled):focus{opacity:.75}button.close{padding:0;background-color:transparent;border:0;appearance:none}a.close.disabled{pointer-events:none}.toast{max-width:350px;overflow:hidden;font-size:.875rem;background-color:rgba(255,255,255,.85);background-clip:padding-box;border:1px solid rgba(0,0,0,.1);box-shadow:0 .25rem .75rem rgba(0,0,0,.1);backdrop-filter:blur(10px);opacity:0;border-radius:.25rem}.toast:not(:last-child){margin-bottom:.75rem}.toast.showing{opacity:1}.toast.show{display:block;opacity:1}.toast.hide{display:none}.toast-header{display:flex;align-items:center;padding:.25rem .75rem;color:#6c757d;background-color:rgba(255,255,255,.85);background-clip:padding-box;border-bottom:1px solid rgba(0,0,0,.05)}.toast-body{padding:.75rem}.modal-open{overflow:hidden}.modal-open .modal{overflow-x:hidden;overflow-y:auto}.modal{position:fixed;top:0;left:0;z-index:1050;display:none;width:100%;height:100%;overflow:hidden;outline:0}.modal-dialog{position:relative;width:auto;margin:.5rem;pointer-events:none}.modal.fade .modal-dialog{transition:transform .3s ease-out;transform:translate(0,-50px)}@media(prefers-reduced-motion:reduce){.modal.fade .modal-dialog{transition:none}}.modal.show .modal-dialog{transform:none}.modal-dialog-scrollable{display:flex;max-height:calc(100% - 1rem)}.modal-dialog-scrollable .modal-content{max-height:calc(100vh - 1rem);overflow:hidden}.modal-dialog-scrollable .modal-header,.modal-dialog-scrollable .modal-footer{flex-shrink:0}.modal-dialog-scrollable .modal-body{overflow-y:auto}.modal-dialog-centered{display:flex;align-items:center;min-height:calc(100% - 1rem)}.modal-dialog-centered::before{display:block;height:calc(100vh - 1rem);content:""}.modal-dialog-centered.modal-dialog-scrollable{flex-direction:column;justify-content:center;height:100%}.modal-dialog-centered.modal-dialog-scrollable .modal-content{max-height:none}.modal-dialog-centered.modal-dialog-scrollable::before{content:none}.modal-content{position:relative;display:flex;flex-direction:column;width:100%;pointer-events:auto;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.2);border-radius:.3rem;outline:0}.modal-backdrop{position:fixed;top:0;left:0;z-index:1040;width:100vw;height:100vh;background-color:#000}.modal-backdrop.fade{opacity:0}.modal-backdrop.show{opacity:.5}.modal-header{display:flex;align-items:flex-start;justify-content:space-between;padding:1rem;border-bottom:1px solid #dee2e6;border-top-left-radius:.3rem;border-top-right-radius:.3rem}.modal-header .close{padding:1rem;margin:-1rem -1rem -1rem auto}.modal-title{margin-bottom:0;line-height:1.5}.modal-body{position:relative;flex:1 1 auto;padding:1rem}.modal-footer{display:flex;align-items:center;justify-content:flex-end;padding:1rem;border-top:1px solid #dee2e6;border-bottom-right-radius:.3rem;border-bottom-left-radius:.3rem}.modal-footer>:not(:first-child){margin-left:.25rem}.modal-footer>:not(:last-child){margin-right:.25rem}.modal-scrollbar-measure{position:absolute;top:-9999px;width:50px;height:50px;overflow:scroll}@media(min-width:576px){.modal-dialog{max-width:500px;margin:1.75rem auto}.modal-dialog-scrollable{max-height:calc(100% - 3.5rem)}.modal-dialog-scrollable .modal-content{max-height:calc(100vh - 3.5rem)}.modal-dialog-centered{min-height:calc(100% - 3.5rem)}.modal-dialog-centered::before{height:calc(100vh - 3.5rem)}.modal-sm{max-width:300px}}@media(min-width:992px){.modal-lg,.modal-xl{max-width:800px}}@media(min-width:1200px){.modal-xl{max-width:1140px}}.tooltip{position:absolute;z-index:1070;display:block;margin:0;font-family:-apple-system,BlinkMacSystemFont,segoe ui,Roboto,helvetica neue,Arial,noto sans,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol,noto color emoji;font-style:normal;font-weight:400;line-height:1.5;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;word-spacing:normal;white-space:normal;line-break:auto;font-size:.875rem;word-wrap:break-word;opacity:0}.tooltip.show{opacity:.9}.tooltip .arrow{position:absolute;display:block;width:.8rem;height:.4rem}.tooltip .arrow::before{position:absolute;content:"";border-color:transparent;border-style:solid}.bs-tooltip-top,.bs-tooltip-auto[x-placement^=top]{padding:.4rem 0}.bs-tooltip-top .arrow,.bs-tooltip-auto[x-placement^=top] .arrow{bottom:0}.bs-tooltip-top .arrow::before,.bs-tooltip-auto[x-placement^=top] .arrow::before{top:0;border-width:.4rem .4rem 0;border-top-color:#000}.bs-tooltip-right,.bs-tooltip-auto[x-placement^=right]{padding:0 .4rem}.bs-tooltip-right .arrow,.bs-tooltip-auto[x-placement^=right] .arrow{left:0;width:.4rem;height:.8rem}.bs-tooltip-right .arrow::before,.bs-tooltip-auto[x-placement^=right] .arrow::before{right:0;border-width:.4rem .4rem .4rem 0;border-right-color:#000}.bs-tooltip-bottom,.bs-tooltip-auto[x-placement^=bottom]{padding:.4rem 0}.bs-tooltip-bottom .arrow,.bs-tooltip-auto[x-placement^=bottom] .arrow{top:0}.bs-tooltip-bottom .arrow::before,.bs-tooltip-auto[x-placement^=bottom] .arrow::before{bottom:0;border-width:0 .4rem .4rem;border-bottom-color:#000}.bs-tooltip-left,.bs-tooltip-auto[x-placement^=left]{padding:0 .4rem}.bs-tooltip-left .arrow,.bs-tooltip-auto[x-placement^=left] .arrow{right:0;width:.4rem;height:.8rem}.bs-tooltip-left .arrow::before,.bs-tooltip-auto[x-placement^=left] .arrow::before{left:0;border-width:.4rem 0 .4rem .4rem;border-left-color:#000}.tooltip-inner{max-width:200px;padding:.25rem .5rem;color:#fff;text-align:center;background-color:#000;border-radius:.25rem}.popover{position:absolute;top:0;left:0;z-index:1060;display:block;max-width:276px;font-family:-apple-system,BlinkMacSystemFont,segoe ui,Roboto,helvetica neue,Arial,noto sans,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol,noto color emoji;font-style:normal;font-weight:400;line-height:1.5;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;word-spacing:normal;white-space:normal;line-break:auto;font-size:.875rem;word-wrap:break-word;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.2);border-radius:.3rem}.popover .arrow{position:absolute;display:block;width:1rem;height:.5rem;margin:0 .3rem}.popover .arrow::before,.popover .arrow::after{position:absolute;display:block;content:"";border-color:transparent;border-style:solid}.bs-popover-top,.bs-popover-auto[x-placement^=top]{margin-bottom:.5rem}.bs-popover-top>.arrow,.bs-popover-auto[x-placement^=top]>.arrow{bottom:calc((0.5rem + 1px) * -1)}.bs-popover-top>.arrow::before,.bs-popover-auto[x-placement^=top]>.arrow::before{bottom:0;border-width:.5rem .5rem 0;border-top-color:rgba(0,0,0,.25)}.bs-popover-top>.arrow::after,.bs-popover-auto[x-placement^=top]>.arrow::after{bottom:1px;border-width:.5rem .5rem 0;border-top-color:#fff}.bs-popover-right,.bs-popover-auto[x-placement^=right]{margin-left:.5rem}.bs-popover-right>.arrow,.bs-popover-auto[x-placement^=right]>.arrow{left:calc((0.5rem + 1px) * -1);width:.5rem;height:1rem;margin:.3rem 0}.bs-popover-right>.arrow::before,.bs-popover-auto[x-placement^=right]>.arrow::before{left:0;border-width:.5rem .5rem .5rem 0;border-right-color:rgba(0,0,0,.25)}.bs-popover-right>.arrow::after,.bs-popover-auto[x-placement^=right]>.arrow::after{left:1px;border-width:.5rem .5rem .5rem 0;border-right-color:#fff}.bs-popover-bottom,.bs-popover-auto[x-placement^=bottom]{margin-top:.5rem}.bs-popover-bottom>.arrow,.bs-popover-auto[x-placement^=bottom]>.arrow{top:calc((0.5rem + 1px) * -1)}.bs-popover-bottom>.arrow::before,.bs-popover-auto[x-placement^=bottom]>.arrow::before{top:0;border-width:0 .5rem .5rem;border-bottom-color:rgba(0,0,0,.25)}.bs-popover-bottom>.arrow::after,.bs-popover-auto[x-placement^=bottom]>.arrow::after{top:1px;border-width:0 .5rem .5rem;border-bottom-color:#fff}.bs-popover-bottom .popover-header::before,.bs-popover-auto[x-placement^=bottom] .popover-header::before{position:absolute;top:0;left:50%;display:block;width:1rem;margin-left:-.5rem;content:"";border-bottom:1px solid #f7f7f7}.bs-popover-left,.bs-popover-auto[x-placement^=left]{margin-right:.5rem}.bs-popover-left>.arrow,.bs-popover-auto[x-placement^=left]>.arrow{right:calc((0.5rem + 1px) * -1);width:.5rem;height:1rem;margin:.3rem 0}.bs-popover-left>.arrow::before,.bs-popover-auto[x-placement^=left]>.arrow::before{right:0;border-width:.5rem 0 .5rem .5rem;border-left-color:rgba(0,0,0,.25)}.bs-popover-left>.arrow::after,.bs-popover-auto[x-placement^=left]>.arrow::after{right:1px;border-width:.5rem 0 .5rem .5rem;border-left-color:#fff}.popover-header{padding:.5rem .75rem;margin-bottom:0;font-size:1rem;background-color:#f7f7f7;border-bottom:1px solid #ebebeb;border-top-left-radius:calc(0.3rem - 1px);border-top-right-radius:calc(0.3rem - 1px)}.popover-header:empty{display:none}.popover-body{padding:.5rem .75rem;color:#212529}.carousel{position:relative}.carousel.pointer-event{touch-action:pan-y}.carousel-inner{position:relative;width:100%;overflow:hidden}.carousel-inner::after{display:block;clear:both;content:""}.carousel-item{position:relative;display:none;float:left;width:100%;margin-right:-100%;backface-visibility:hidden;transition:transform .6s ease-in-out}@media(prefers-reduced-motion:reduce){.carousel-item{transition:none}}.carousel-item.active,.carousel-item-next,.carousel-item-prev{display:block}.carousel-item-next:not(.carousel-item-left),.active.carousel-item-right{transform:translateX(100%)}.carousel-item-prev:not(.carousel-item-right),.active.carousel-item-left{transform:translateX(-100%)}.carousel-fade .carousel-item{opacity:0;transition-property:opacity;transform:none}.carousel-fade .carousel-item.active,.carousel-fade .carousel-item-next.carousel-item-left,.carousel-fade .carousel-item-prev.carousel-item-right{z-index:1;opacity:1}.carousel-fade .active.carousel-item-left,.carousel-fade .active.carousel-item-right{z-index:0;opacity:0;transition:0s .6s opacity}@media(prefers-reduced-motion:reduce){.carousel-fade .active.carousel-item-left,.carousel-fade .active.carousel-item-right{transition:none}}.carousel-control-prev,.carousel-control-next{position:absolute;top:0;bottom:0;z-index:1;display:flex;align-items:center;justify-content:center;width:15%;color:#fff;text-align:center;opacity:.5;transition:opacity .15s ease}@media(prefers-reduced-motion:reduce){.carousel-control-prev,.carousel-control-next{transition:none}}.carousel-control-prev:hover,.carousel-control-prev:focus,.carousel-control-next:hover,.carousel-control-next:focus{color:#fff;text-decoration:none;outline:0;opacity:.9}.carousel-control-prev{left:0}.carousel-control-next{right:0}.carousel-control-prev-icon,.carousel-control-next-icon{display:inline-block;width:20px;height:20px;background:no-repeat 50%/100% 100%}.carousel-control-prev-icon{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIGZpbGw9JyNmZmYnIHZpZXdCb3g9JzAgMCA4IDgnPjxwYXRoIGQ9J001LjI1IDBsLTQgNCA0IDQgMS41LTEuNS0yLjUtMi41IDIuNS0yLjUtMS41LTEuNXonLz48L3N2Zz4=)}.carousel-control-next-icon{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIGZpbGw9JyNmZmYnIHZpZXdCb3g9JzAgMCA4IDgnPjxwYXRoIGQ9J00yLjc1IDBsLTEuNSAxLjUgMi41IDIuNS0yLjUgMi41IDEuNSAxLjUgNC00LTQtNHonLz48L3N2Zz4=)}.carousel-indicators{position:absolute;right:0;bottom:0;left:0;z-index:15;display:flex;justify-content:center;padding-left:0;margin-right:15%;margin-left:15%;list-style:none}.carousel-indicators li{box-sizing:content-box;flex:0 1 auto;width:30px;height:3px;margin-right:3px;margin-left:3px;text-indent:-999px;cursor:pointer;background-color:#fff;background-clip:padding-box;border-top:10px solid transparent;border-bottom:10px solid transparent;opacity:.5;transition:opacity .6s ease}@media(prefers-reduced-motion:reduce){.carousel-indicators li{transition:none}}.carousel-indicators .active{opacity:1}.carousel-caption{position:absolute;right:15%;bottom:20px;left:15%;z-index:10;padding-top:20px;padding-bottom:20px;color:#fff;text-align:center}@keyframes spinner-border{to{transform:rotate(360deg)}}.spinner-border{display:inline-block;width:2rem;height:2rem;vertical-align:text-bottom;border:.25em solid currentColor;border-right-color:transparent;border-radius:50%;animation:spinner-border .75s linear infinite}.spinner-border-sm{width:1rem;height:1rem;border-width:.2em}@keyframes spinner-grow{0%{transform:scale(0)}50%{opacity:1}}.spinner-grow{display:inline-block;width:2rem;height:2rem;vertical-align:text-bottom;background-color:currentColor;border-radius:50%;opacity:0;animation:spinner-grow .75s linear infinite}.spinner-grow-sm{width:1rem;height:1rem}.align-baseline{vertical-align:baseline!important}.align-top{vertical-align:top!important}.align-middle{vertical-align:middle!important}.align-bottom{vertical-align:bottom!important}.align-text-bottom{vertical-align:text-bottom!important}.align-text-top{vertical-align:text-top!important}.bg-primary{background-color:#007bff!important}a.bg-primary:hover,a.bg-primary:focus,button.bg-primary:hover,button.bg-primary:focus{background-color:#0062cc!important}.bg-secondary{background-color:#6c757d!important}a.bg-secondary:hover,a.bg-secondary:focus,button.bg-secondary:hover,button.bg-secondary:focus{background-color:#545b62!important}.bg-success{background-color:#28a745!important}a.bg-success:hover,a.bg-success:focus,button.bg-success:hover,button.bg-success:focus{background-color:#1e7e34!important}.bg-info{background-color:#17a2b8!important}a.bg-info:hover,a.bg-info:focus,button.bg-info:hover,button.bg-info:focus{background-color:#117a8b!important}.bg-warning{background-color:#ffc107!important}a.bg-warning:hover,a.bg-warning:focus,button.bg-warning:hover,button.bg-warning:focus{background-color:#d39e00!important}.bg-danger{background-color:#dc3545!important}a.bg-danger:hover,a.bg-danger:focus,button.bg-danger:hover,button.bg-danger:focus{background-color:#bd2130!important}.bg-light{background-color:#f8f9fa!important}a.bg-light:hover,a.bg-light:focus,button.bg-light:hover,button.bg-light:focus{background-color:#dae0e5!important}.bg-dark{background-color:#343a40!important}a.bg-dark:hover,a.bg-dark:focus,button.bg-dark:hover,button.bg-dark:focus{background-color:#1d2124!important}.bg-white{background-color:#fff!important}.bg-transparent{background-color:transparent!important}.border{border:1px solid #dee2e6!important}.border-top{border-top:1px solid #dee2e6!important}.border-right{border-right:1px solid #dee2e6!important}.border-bottom{border-bottom:1px solid #dee2e6!important}.border-left{border-left:1px solid #dee2e6!important}.border-0{border:0!important}.border-top-0{border-top:0!important}.border-right-0{border-right:0!important}.border-bottom-0{border-bottom:0!important}.border-left-0{border-left:0!important}.border-primary{border-color:#007bff!important}.border-secondary{border-color:#6c757d!important}.border-success{border-color:#28a745!important}.border-info{border-color:#17a2b8!important}.border-warning{border-color:#ffc107!important}.border-danger{border-color:#dc3545!important}.border-light{border-color:#f8f9fa!important}.border-dark{border-color:#343a40!important}.border-white{border-color:#fff!important}.rounded-sm{border-radius:.2rem!important}.rounded{border-radius:.25rem!important}.rounded-top{border-top-left-radius:.25rem!important;border-top-right-radius:.25rem!important}.rounded-right{border-top-right-radius:.25rem!important;border-bottom-right-radius:.25rem!important}.rounded-bottom{border-bottom-right-radius:.25rem!important;border-bottom-left-radius:.25rem!important}.rounded-left{border-top-left-radius:.25rem!important;border-bottom-left-radius:.25rem!important}.rounded-lg{border-radius:.3rem!important}.rounded-circle{border-radius:50%!important}.rounded-pill{border-radius:50rem!important}.rounded-0{border-radius:0!important}.clearfix::after{display:block;clear:both;content:""}.d-none{display:none!important}.d-inline{display:inline!important}.d-inline-block{display:inline-block!important}.d-block{display:block!important}.d-table{display:table!important}.d-table-row{display:table-row!important}.d-table-cell{display:table-cell!important}.d-flex{display:flex!important}.d-inline-flex{display:inline-flex!important}@media(min-width:576px){.d-sm-none{display:none!important}.d-sm-inline{display:inline!important}.d-sm-inline-block{display:inline-block!important}.d-sm-block{display:block!important}.d-sm-table{display:table!important}.d-sm-table-row{display:table-row!important}.d-sm-table-cell{display:table-cell!important}.d-sm-flex{display:flex!important}.d-sm-inline-flex{display:inline-flex!important}}@media(min-width:768px){.d-md-none{display:none!important}.d-md-inline{display:inline!important}.d-md-inline-block{display:inline-block!important}.d-md-block{display:block!important}.d-md-table{display:table!important}.d-md-table-row{display:table-row!important}.d-md-table-cell{display:table-cell!important}.d-md-flex{display:flex!important}.d-md-inline-flex{display:inline-flex!important}}@media(min-width:992px){.d-lg-none{display:none!important}.d-lg-inline{display:inline!important}.d-lg-inline-block{display:inline-block!important}.d-lg-block{display:block!important}.d-lg-table{display:table!important}.d-lg-table-row{display:table-row!important}.d-lg-table-cell{display:table-cell!important}.d-lg-flex{display:flex!important}.d-lg-inline-flex{display:inline-flex!important}}@media(min-width:1200px){.d-xl-none{display:none!important}.d-xl-inline{display:inline!important}.d-xl-inline-block{display:inline-block!important}.d-xl-block{display:block!important}.d-xl-table{display:table!important}.d-xl-table-row{display:table-row!important}.d-xl-table-cell{display:table-cell!important}.d-xl-flex{display:flex!important}.d-xl-inline-flex{display:inline-flex!important}}@media print{.d-print-none{display:none!important}.d-print-inline{display:inline!important}.d-print-inline-block{display:inline-block!important}.d-print-block{display:block!important}.d-print-table{display:table!important}.d-print-table-row{display:table-row!important}.d-print-table-cell{display:table-cell!important}.d-print-flex{display:flex!important}.d-print-inline-flex{display:inline-flex!important}}.embed-responsive{position:relative;display:block;width:100%;padding:0;overflow:hidden}.embed-responsive::before{display:block;content:""}.embed-responsive .embed-responsive-item,.embed-responsive iframe,.embed-responsive embed,.embed-responsive object,.embed-responsive video{position:absolute;top:0;bottom:0;left:0;width:100%;height:100%;border:0}.embed-responsive-21by9::before{padding-top:42.8571428571%}.embed-responsive-16by9::before{padding-top:56.25%}.embed-responsive-4by3::before{padding-top:75%}.embed-responsive-1by1::before{padding-top:100%}.flex-row{flex-direction:row!important}.flex-column{flex-direction:column!important}.flex-row-reverse{flex-direction:row-reverse!important}.flex-column-reverse{flex-direction:column-reverse!important}.flex-wrap{flex-wrap:wrap!important}.flex-nowrap{flex-wrap:nowrap!important}.flex-wrap-reverse{flex-wrap:wrap-reverse!important}.flex-fill{flex:1 1 auto!important}.flex-grow-0{flex-grow:0!important}.flex-grow-1{flex-grow:1!important}.flex-shrink-0{flex-shrink:0!important}.flex-shrink-1{flex-shrink:1!important}.justify-content-start{justify-content:flex-start!important}.justify-content-end{justify-content:flex-end!important}.justify-content-center{justify-content:center!important}.justify-content-between{justify-content:space-between!important}.justify-content-around{justify-content:space-around!important}.align-items-start{align-items:flex-start!important}.align-items-end{align-items:flex-end!important}.align-items-center{align-items:center!important}.align-items-baseline{align-items:baseline!important}.align-items-stretch{align-items:stretch!important}.align-content-start{align-content:flex-start!important}.align-content-end{align-content:flex-end!important}.align-content-center{align-content:center!important}.align-content-between{align-content:space-between!important}.align-content-around{align-content:space-around!important}.align-content-stretch{align-content:stretch!important}.align-self-auto{align-self:auto!important}.align-self-start{align-self:flex-start!important}.align-self-end{align-self:flex-end!important}.align-self-center{align-self:center!important}.align-self-baseline{align-self:baseline!important}.align-self-stretch{align-self:stretch!important}@media(min-width:576px){.flex-sm-row{flex-direction:row!important}.flex-sm-column{flex-direction:column!important}.flex-sm-row-reverse{flex-direction:row-reverse!important}.flex-sm-column-reverse{flex-direction:column-reverse!important}.flex-sm-wrap{flex-wrap:wrap!important}.flex-sm-nowrap{flex-wrap:nowrap!important}.flex-sm-wrap-reverse{flex-wrap:wrap-reverse!important}.flex-sm-fill{flex:1 1 auto!important}.flex-sm-grow-0{flex-grow:0!important}.flex-sm-grow-1{flex-grow:1!important}.flex-sm-shrink-0{flex-shrink:0!important}.flex-sm-shrink-1{flex-shrink:1!important}.justify-content-sm-start{justify-content:flex-start!important}.justify-content-sm-end{justify-content:flex-end!important}.justify-content-sm-center{justify-content:center!important}.justify-content-sm-between{justify-content:space-between!important}.justify-content-sm-around{justify-content:space-around!important}.align-items-sm-start{align-items:flex-start!important}.align-items-sm-end{align-items:flex-end!important}.align-items-sm-center{align-items:center!important}.align-items-sm-baseline{align-items:baseline!important}.align-items-sm-stretch{align-items:stretch!important}.align-content-sm-start{align-content:flex-start!important}.align-content-sm-end{align-content:flex-end!important}.align-content-sm-center{align-content:center!important}.align-content-sm-between{align-content:space-between!important}.align-content-sm-around{align-content:space-around!important}.align-content-sm-stretch{align-content:stretch!important}.align-self-sm-auto{align-self:auto!important}.align-self-sm-start{align-self:flex-start!important}.align-self-sm-end{align-self:flex-end!important}.align-self-sm-center{align-self:center!important}.align-self-sm-baseline{align-self:baseline!important}.align-self-sm-stretch{align-self:stretch!important}}@media(min-width:768px){.flex-md-row{flex-direction:row!important}.flex-md-column{flex-direction:column!important}.flex-md-row-reverse{flex-direction:row-reverse!important}.flex-md-column-reverse{flex-direction:column-reverse!important}.flex-md-wrap{flex-wrap:wrap!important}.flex-md-nowrap{flex-wrap:nowrap!important}.flex-md-wrap-reverse{flex-wrap:wrap-reverse!important}.flex-md-fill{flex:1 1 auto!important}.flex-md-grow-0{flex-grow:0!important}.flex-md-grow-1{flex-grow:1!important}.flex-md-shrink-0{flex-shrink:0!important}.flex-md-shrink-1{flex-shrink:1!important}.justify-content-md-start{justify-content:flex-start!important}.justify-content-md-end{justify-content:flex-end!important}.justify-content-md-center{justify-content:center!important}.justify-content-md-between{justify-content:space-between!important}.justify-content-md-around{justify-content:space-around!important}.align-items-md-start{align-items:flex-start!important}.align-items-md-end{align-items:flex-end!important}.align-items-md-center{align-items:center!important}.align-items-md-baseline{align-items:baseline!important}.align-items-md-stretch{align-items:stretch!important}.align-content-md-start{align-content:flex-start!important}.align-content-md-end{align-content:flex-end!important}.align-content-md-center{align-content:center!important}.align-content-md-between{align-content:space-between!important}.align-content-md-around{align-content:space-around!important}.align-content-md-stretch{align-content:stretch!important}.align-self-md-auto{align-self:auto!important}.align-self-md-start{align-self:flex-start!important}.align-self-md-end{align-self:flex-end!important}.align-self-md-center{align-self:center!important}.align-self-md-baseline{align-self:baseline!important}.align-self-md-stretch{align-self:stretch!important}}@media(min-width:992px){.flex-lg-row{flex-direction:row!important}.flex-lg-column{flex-direction:column!important}.flex-lg-row-reverse{flex-direction:row-reverse!important}.flex-lg-column-reverse{flex-direction:column-reverse!important}.flex-lg-wrap{flex-wrap:wrap!important}.flex-lg-nowrap{flex-wrap:nowrap!important}.flex-lg-wrap-reverse{flex-wrap:wrap-reverse!important}.flex-lg-fill{flex:1 1 auto!important}.flex-lg-grow-0{flex-grow:0!important}.flex-lg-grow-1{flex-grow:1!important}.flex-lg-shrink-0{flex-shrink:0!important}.flex-lg-shrink-1{flex-shrink:1!important}.justify-content-lg-start{justify-content:flex-start!important}.justify-content-lg-end{justify-content:flex-end!important}.justify-content-lg-center{justify-content:center!important}.justify-content-lg-between{justify-content:space-between!important}.justify-content-lg-around{justify-content:space-around!important}.align-items-lg-start{align-items:flex-start!important}.align-items-lg-end{align-items:flex-end!important}.align-items-lg-center{align-items:center!important}.align-items-lg-baseline{align-items:baseline!important}.align-items-lg-stretch{align-items:stretch!important}.align-content-lg-start{align-content:flex-start!important}.align-content-lg-end{align-content:flex-end!important}.align-content-lg-center{align-content:center!important}.align-content-lg-between{align-content:space-between!important}.align-content-lg-around{align-content:space-around!important}.align-content-lg-stretch{align-content:stretch!important}.align-self-lg-auto{align-self:auto!important}.align-self-lg-start{align-self:flex-start!important}.align-self-lg-end{align-self:flex-end!important}.align-self-lg-center{align-self:center!important}.align-self-lg-baseline{align-self:baseline!important}.align-self-lg-stretch{align-self:stretch!important}}@media(min-width:1200px){.flex-xl-row{flex-direction:row!important}.flex-xl-column{flex-direction:column!important}.flex-xl-row-reverse{flex-direction:row-reverse!important}.flex-xl-column-reverse{flex-direction:column-reverse!important}.flex-xl-wrap{flex-wrap:wrap!important}.flex-xl-nowrap{flex-wrap:nowrap!important}.flex-xl-wrap-reverse{flex-wrap:wrap-reverse!important}.flex-xl-fill{flex:1 1 auto!important}.flex-xl-grow-0{flex-grow:0!important}.flex-xl-grow-1{flex-grow:1!important}.flex-xl-shrink-0{flex-shrink:0!important}.flex-xl-shrink-1{flex-shrink:1!important}.justify-content-xl-start{justify-content:flex-start!important}.justify-content-xl-end{justify-content:flex-end!important}.justify-content-xl-center{justify-content:center!important}.justify-content-xl-between{justify-content:space-between!important}.justify-content-xl-around{justify-content:space-around!important}.align-items-xl-start{align-items:flex-start!important}.align-items-xl-end{align-items:flex-end!important}.align-items-xl-center{align-items:center!important}.align-items-xl-baseline{align-items:baseline!important}.align-items-xl-stretch{align-items:stretch!important}.align-content-xl-start{align-content:flex-start!important}.align-content-xl-end{align-content:flex-end!important}.align-content-xl-center{align-content:center!important}.align-content-xl-between{align-content:space-between!important}.align-content-xl-around{align-content:space-around!important}.align-content-xl-stretch{align-content:stretch!important}.align-self-xl-auto{align-self:auto!important}.align-self-xl-start{align-self:flex-start!important}.align-self-xl-end{align-self:flex-end!important}.align-self-xl-center{align-self:center!important}.align-self-xl-baseline{align-self:baseline!important}.align-self-xl-stretch{align-self:stretch!important}}.float-left{float:left!important}.float-right{float:right!important}.float-none{float:none!important}@media(min-width:576px){.float-sm-left{float:left!important}.float-sm-right{float:right!important}.float-sm-none{float:none!important}}@media(min-width:768px){.float-md-left{float:left!important}.float-md-right{float:right!important}.float-md-none{float:none!important}}@media(min-width:992px){.float-lg-left{float:left!important}.float-lg-right{float:right!important}.float-lg-none{float:none!important}}@media(min-width:1200px){.float-xl-left{float:left!important}.float-xl-right{float:right!important}.float-xl-none{float:none!important}}.overflow-auto{overflow:auto!important}.overflow-hidden{overflow:hidden!important}.position-static{position:static!important}.position-relative{position:relative!important}.position-absolute{position:absolute!important}.position-fixed{position:fixed!important}.position-sticky{position:sticky!important}.fixed-top{position:fixed;top:0;right:0;left:0;z-index:1030}.fixed-bottom{position:fixed;right:0;bottom:0;left:0;z-index:1030}@supports(position:sticky){.sticky-top{position:sticky;top:0;z-index:1020}}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.sr-only-focusable:active,.sr-only-focusable:focus{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal}.shadow-sm{box-shadow:0 .125rem .25rem rgba(0,0,0,.075)!important}.shadow{box-shadow:0 .5rem 1rem rgba(0,0,0,.15)!important}.shadow-lg{box-shadow:0 1rem 3rem rgba(0,0,0,.175)!important}.shadow-none{box-shadow:none!important}.w-25{width:25%!important}.w-50{width:50%!important}.w-75{width:75%!important}.w-100{width:100%!important}.w-auto{width:auto!important}.h-25{height:25%!important}.h-50{height:50%!important}.h-75{height:75%!important}.h-100{height:100%!important}.h-auto{height:auto!important}.mw-100{max-width:100%!important}.mh-100{max-height:100%!important}.min-vw-100{min-width:100vw!important}.min-vh-100{min-height:100vh!important}.vw-100{width:100vw!important}.vh-100{height:100vh!important}.stretched-link::after{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:auto;content:"";background-color:transparent}.m-0{margin:0!important}.mt-0,.my-0{margin-top:0!important}.mr-0,.mx-0{margin-right:0!important}.mb-0,.my-0{margin-bottom:0!important}.ml-0,.mx-0{margin-left:0!important}.m-1{margin:.25rem!important}.mt-1,.my-1{margin-top:.25rem!important}.mr-1,.mx-1{margin-right:.25rem!important}.mb-1,.my-1{margin-bottom:.25rem!important}.ml-1,.mx-1{margin-left:.25rem!important}.m-2{margin:.5rem!important}.mt-2,.my-2{margin-top:.5rem!important}.mr-2,.mx-2{margin-right:.5rem!important}.mb-2,.my-2{margin-bottom:.5rem!important}.ml-2,.mx-2{margin-left:.5rem!important}.m-3{margin:1rem!important}.mt-3,.my-3{margin-top:1rem!important}.mr-3,.mx-3{margin-right:1rem!important}.mb-3,.my-3{margin-bottom:1rem!important}.ml-3,.mx-3{margin-left:1rem!important}.m-4{margin:1.5rem!important}.mt-4,.my-4{margin-top:1.5rem!important}.mr-4,.mx-4{margin-right:1.5rem!important}.mb-4,.my-4{margin-bottom:1.5rem!important}.ml-4,.mx-4{margin-left:1.5rem!important}.m-5{margin:3rem!important}.mt-5,.my-5{margin-top:3rem!important}.mr-5,.mx-5{margin-right:3rem!important}.mb-5,.my-5{margin-bottom:3rem!important}.ml-5,.mx-5{margin-left:3rem!important}.p-0{padding:0!important}.pt-0,.py-0{padding-top:0!important}.pr-0,.px-0{padding-right:0!important}.pb-0,.py-0{padding-bottom:0!important}.pl-0,.px-0{padding-left:0!important}.p-1{padding:.25rem!important}.pt-1,.py-1{padding-top:.25rem!important}.pr-1,.px-1{padding-right:.25rem!important}.pb-1,.py-1{padding-bottom:.25rem!important}.pl-1,.px-1{padding-left:.25rem!important}.p-2{padding:.5rem!important}.pt-2,.py-2{padding-top:.5rem!important}.pr-2,.px-2{padding-right:.5rem!important}.pb-2,.py-2{padding-bottom:.5rem!important}.pl-2,.px-2{padding-left:.5rem!important}.p-3{padding:1rem!important}.pt-3,.py-3{padding-top:1rem!important}.pr-3,.px-3{padding-right:1rem!important}.pb-3,.py-3{padding-bottom:1rem!important}.pl-3,.px-3{padding-left:1rem!important}.p-4{padding:1.5rem!important}.pt-4,.py-4{padding-top:1.5rem!important}.pr-4,.px-4{padding-right:1.5rem!important}.pb-4,.py-4{padding-bottom:1.5rem!important}.pl-4,.px-4{padding-left:1.5rem!important}.p-5{padding:3rem!important}.pt-5,.py-5{padding-top:3rem!important}.pr-5,.px-5{padding-right:3rem!important}.pb-5,.py-5{padding-bottom:3rem!important}.pl-5,.px-5{padding-left:3rem!important}.m-n1{margin:-.25rem!important}.mt-n1,.my-n1{margin-top:-.25rem!important}.mr-n1,.mx-n1{margin-right:-.25rem!important}.mb-n1,.my-n1{margin-bottom:-.25rem!important}.ml-n1,.mx-n1{margin-left:-.25rem!important}.m-n2{margin:-.5rem!important}.mt-n2,.my-n2{margin-top:-.5rem!important}.mr-n2,.mx-n2{margin-right:-.5rem!important}.mb-n2,.my-n2{margin-bottom:-.5rem!important}.ml-n2,.mx-n2{margin-left:-.5rem!important}.m-n3{margin:-1rem!important}.mt-n3,.my-n3{margin-top:-1rem!important}.mr-n3,.mx-n3{margin-right:-1rem!important}.mb-n3,.my-n3{margin-bottom:-1rem!important}.ml-n3,.mx-n3{margin-left:-1rem!important}.m-n4{margin:-1.5rem!important}.mt-n4,.my-n4{margin-top:-1.5rem!important}.mr-n4,.mx-n4{margin-right:-1.5rem!important}.mb-n4,.my-n4{margin-bottom:-1.5rem!important}.ml-n4,.mx-n4{margin-left:-1.5rem!important}.m-n5{margin:-3rem!important}.mt-n5,.my-n5{margin-top:-3rem!important}.mr-n5,.mx-n5{margin-right:-3rem!important}.mb-n5,.my-n5{margin-bottom:-3rem!important}.ml-n5,.mx-n5{margin-left:-3rem!important}.m-auto{margin:auto!important}.mt-auto,.my-auto{margin-top:auto!important}.mr-auto,.mx-auto{margin-right:auto!important}.mb-auto,.my-auto{margin-bottom:auto!important}.ml-auto,.mx-auto{margin-left:auto!important}@media(min-width:576px){.m-sm-0{margin:0!important}.mt-sm-0,.my-sm-0{margin-top:0!important}.mr-sm-0,.mx-sm-0{margin-right:0!important}.mb-sm-0,.my-sm-0{margin-bottom:0!important}.ml-sm-0,.mx-sm-0{margin-left:0!important}.m-sm-1{margin:.25rem!important}.mt-sm-1,.my-sm-1{margin-top:.25rem!important}.mr-sm-1,.mx-sm-1{margin-right:.25rem!important}.mb-sm-1,.my-sm-1{margin-bottom:.25rem!important}.ml-sm-1,.mx-sm-1{margin-left:.25rem!important}.m-sm-2{margin:.5rem!important}.mt-sm-2,.my-sm-2{margin-top:.5rem!important}.mr-sm-2,.mx-sm-2{margin-right:.5rem!important}.mb-sm-2,.my-sm-2{margin-bottom:.5rem!important}.ml-sm-2,.mx-sm-2{margin-left:.5rem!important}.m-sm-3{margin:1rem!important}.mt-sm-3,.my-sm-3{margin-top:1rem!important}.mr-sm-3,.mx-sm-3{margin-right:1rem!important}.mb-sm-3,.my-sm-3{margin-bottom:1rem!important}.ml-sm-3,.mx-sm-3{margin-left:1rem!important}.m-sm-4{margin:1.5rem!important}.mt-sm-4,.my-sm-4{margin-top:1.5rem!important}.mr-sm-4,.mx-sm-4{margin-right:1.5rem!important}.mb-sm-4,.my-sm-4{margin-bottom:1.5rem!important}.ml-sm-4,.mx-sm-4{margin-left:1.5rem!important}.m-sm-5{margin:3rem!important}.mt-sm-5,.my-sm-5{margin-top:3rem!important}.mr-sm-5,.mx-sm-5{margin-right:3rem!important}.mb-sm-5,.my-sm-5{margin-bottom:3rem!important}.ml-sm-5,.mx-sm-5{margin-left:3rem!important}.p-sm-0{padding:0!important}.pt-sm-0,.py-sm-0{padding-top:0!important}.pr-sm-0,.px-sm-0{padding-right:0!important}.pb-sm-0,.py-sm-0{padding-bottom:0!important}.pl-sm-0,.px-sm-0{padding-left:0!important}.p-sm-1{padding:.25rem!important}.pt-sm-1,.py-sm-1{padding-top:.25rem!important}.pr-sm-1,.px-sm-1{padding-right:.25rem!important}.pb-sm-1,.py-sm-1{padding-bottom:.25rem!important}.pl-sm-1,.px-sm-1{padding-left:.25rem!important}.p-sm-2{padding:.5rem!important}.pt-sm-2,.py-sm-2{padding-top:.5rem!important}.pr-sm-2,.px-sm-2{padding-right:.5rem!important}.pb-sm-2,.py-sm-2{padding-bottom:.5rem!important}.pl-sm-2,.px-sm-2{padding-left:.5rem!important}.p-sm-3{padding:1rem!important}.pt-sm-3,.py-sm-3{padding-top:1rem!important}.pr-sm-3,.px-sm-3{padding-right:1rem!important}.pb-sm-3,.py-sm-3{padding-bottom:1rem!important}.pl-sm-3,.px-sm-3{padding-left:1rem!important}.p-sm-4{padding:1.5rem!important}.pt-sm-4,.py-sm-4{padding-top:1.5rem!important}.pr-sm-4,.px-sm-4{padding-right:1.5rem!important}.pb-sm-4,.py-sm-4{padding-bottom:1.5rem!important}.pl-sm-4,.px-sm-4{padding-left:1.5rem!important}.p-sm-5{padding:3rem!important}.pt-sm-5,.py-sm-5{padding-top:3rem!important}.pr-sm-5,.px-sm-5{padding-right:3rem!important}.pb-sm-5,.py-sm-5{padding-bottom:3rem!important}.pl-sm-5,.px-sm-5{padding-left:3rem!important}.m-sm-n1{margin:-.25rem!important}.mt-sm-n1,.my-sm-n1{margin-top:-.25rem!important}.mr-sm-n1,.mx-sm-n1{margin-right:-.25rem!important}.mb-sm-n1,.my-sm-n1{margin-bottom:-.25rem!important}.ml-sm-n1,.mx-sm-n1{margin-left:-.25rem!important}.m-sm-n2{margin:-.5rem!important}.mt-sm-n2,.my-sm-n2{margin-top:-.5rem!important}.mr-sm-n2,.mx-sm-n2{margin-right:-.5rem!important}.mb-sm-n2,.my-sm-n2{margin-bottom:-.5rem!important}.ml-sm-n2,.mx-sm-n2{margin-left:-.5rem!important}.m-sm-n3{margin:-1rem!important}.mt-sm-n3,.my-sm-n3{margin-top:-1rem!important}.mr-sm-n3,.mx-sm-n3{margin-right:-1rem!important}.mb-sm-n3,.my-sm-n3{margin-bottom:-1rem!important}.ml-sm-n3,.mx-sm-n3{margin-left:-1rem!important}.m-sm-n4{margin:-1.5rem!important}.mt-sm-n4,.my-sm-n4{margin-top:-1.5rem!important}.mr-sm-n4,.mx-sm-n4{margin-right:-1.5rem!important}.mb-sm-n4,.my-sm-n4{margin-bottom:-1.5rem!important}.ml-sm-n4,.mx-sm-n4{margin-left:-1.5rem!important}.m-sm-n5{margin:-3rem!important}.mt-sm-n5,.my-sm-n5{margin-top:-3rem!important}.mr-sm-n5,.mx-sm-n5{margin-right:-3rem!important}.mb-sm-n5,.my-sm-n5{margin-bottom:-3rem!important}.ml-sm-n5,.mx-sm-n5{margin-left:-3rem!important}.m-sm-auto{margin:auto!important}.mt-sm-auto,.my-sm-auto{margin-top:auto!important}.mr-sm-auto,.mx-sm-auto{margin-right:auto!important}.mb-sm-auto,.my-sm-auto{margin-bottom:auto!important}.ml-sm-auto,.mx-sm-auto{margin-left:auto!important}}@media(min-width:768px){.m-md-0{margin:0!important}.mt-md-0,.my-md-0{margin-top:0!important}.mr-md-0,.mx-md-0{margin-right:0!important}.mb-md-0,.my-md-0{margin-bottom:0!important}.ml-md-0,.mx-md-0{margin-left:0!important}.m-md-1{margin:.25rem!important}.mt-md-1,.my-md-1{margin-top:.25rem!important}.mr-md-1,.mx-md-1{margin-right:.25rem!important}.mb-md-1,.my-md-1{margin-bottom:.25rem!important}.ml-md-1,.mx-md-1{margin-left:.25rem!important}.m-md-2{margin:.5rem!important}.mt-md-2,.my-md-2{margin-top:.5rem!important}.mr-md-2,.mx-md-2{margin-right:.5rem!important}.mb-md-2,.my-md-2{margin-bottom:.5rem!important}.ml-md-2,.mx-md-2{margin-left:.5rem!important}.m-md-3{margin:1rem!important}.mt-md-3,.my-md-3{margin-top:1rem!important}.mr-md-3,.mx-md-3{margin-right:1rem!important}.mb-md-3,.my-md-3{margin-bottom:1rem!important}.ml-md-3,.mx-md-3{margin-left:1rem!important}.m-md-4{margin:1.5rem!important}.mt-md-4,.my-md-4{margin-top:1.5rem!important}.mr-md-4,.mx-md-4{margin-right:1.5rem!important}.mb-md-4,.my-md-4{margin-bottom:1.5rem!important}.ml-md-4,.mx-md-4{margin-left:1.5rem!important}.m-md-5{margin:3rem!important}.mt-md-5,.my-md-5{margin-top:3rem!important}.mr-md-5,.mx-md-5{margin-right:3rem!important}.mb-md-5,.my-md-5{margin-bottom:3rem!important}.ml-md-5,.mx-md-5{margin-left:3rem!important}.p-md-0{padding:0!important}.pt-md-0,.py-md-0{padding-top:0!important}.pr-md-0,.px-md-0{padding-right:0!important}.pb-md-0,.py-md-0{padding-bottom:0!important}.pl-md-0,.px-md-0{padding-left:0!important}.p-md-1{padding:.25rem!important}.pt-md-1,.py-md-1{padding-top:.25rem!important}.pr-md-1,.px-md-1{padding-right:.25rem!important}.pb-md-1,.py-md-1{padding-bottom:.25rem!important}.pl-md-1,.px-md-1{padding-left:.25rem!important}.p-md-2{padding:.5rem!important}.pt-md-2,.py-md-2{padding-top:.5rem!important}.pr-md-2,.px-md-2{padding-right:.5rem!important}.pb-md-2,.py-md-2{padding-bottom:.5rem!important}.pl-md-2,.px-md-2{padding-left:.5rem!important}.p-md-3{padding:1rem!important}.pt-md-3,.py-md-3{padding-top:1rem!important}.pr-md-3,.px-md-3{padding-right:1rem!important}.pb-md-3,.py-md-3{padding-bottom:1rem!important}.pl-md-3,.px-md-3{padding-left:1rem!important}.p-md-4{padding:1.5rem!important}.pt-md-4,.py-md-4{padding-top:1.5rem!important}.pr-md-4,.px-md-4{padding-right:1.5rem!important}.pb-md-4,.py-md-4{padding-bottom:1.5rem!important}.pl-md-4,.px-md-4{padding-left:1.5rem!important}.p-md-5{padding:3rem!important}.pt-md-5,.py-md-5{padding-top:3rem!important}.pr-md-5,.px-md-5{padding-right:3rem!important}.pb-md-5,.py-md-5{padding-bottom:3rem!important}.pl-md-5,.px-md-5{padding-left:3rem!important}.m-md-n1{margin:-.25rem!important}.mt-md-n1,.my-md-n1{margin-top:-.25rem!important}.mr-md-n1,.mx-md-n1{margin-right:-.25rem!important}.mb-md-n1,.my-md-n1{margin-bottom:-.25rem!important}.ml-md-n1,.mx-md-n1{margin-left:-.25rem!important}.m-md-n2{margin:-.5rem!important}.mt-md-n2,.my-md-n2{margin-top:-.5rem!important}.mr-md-n2,.mx-md-n2{margin-right:-.5rem!important}.mb-md-n2,.my-md-n2{margin-bottom:-.5rem!important}.ml-md-n2,.mx-md-n2{margin-left:-.5rem!important}.m-md-n3{margin:-1rem!important}.mt-md-n3,.my-md-n3{margin-top:-1rem!important}.mr-md-n3,.mx-md-n3{margin-right:-1rem!important}.mb-md-n3,.my-md-n3{margin-bottom:-1rem!important}.ml-md-n3,.mx-md-n3{margin-left:-1rem!important}.m-md-n4{margin:-1.5rem!important}.mt-md-n4,.my-md-n4{margin-top:-1.5rem!important}.mr-md-n4,.mx-md-n4{margin-right:-1.5rem!important}.mb-md-n4,.my-md-n4{margin-bottom:-1.5rem!important}.ml-md-n4,.mx-md-n4{margin-left:-1.5rem!important}.m-md-n5{margin:-3rem!important}.mt-md-n5,.my-md-n5{margin-top:-3rem!important}.mr-md-n5,.mx-md-n5{margin-right:-3rem!important}.mb-md-n5,.my-md-n5{margin-bottom:-3rem!important}.ml-md-n5,.mx-md-n5{margin-left:-3rem!important}.m-md-auto{margin:auto!important}.mt-md-auto,.my-md-auto{margin-top:auto!important}.mr-md-auto,.mx-md-auto{margin-right:auto!important}.mb-md-auto,.my-md-auto{margin-bottom:auto!important}.ml-md-auto,.mx-md-auto{margin-left:auto!important}}@media(min-width:992px){.m-lg-0{margin:0!important}.mt-lg-0,.my-lg-0{margin-top:0!important}.mr-lg-0,.mx-lg-0{margin-right:0!important}.mb-lg-0,.my-lg-0{margin-bottom:0!important}.ml-lg-0,.mx-lg-0{margin-left:0!important}.m-lg-1{margin:.25rem!important}.mt-lg-1,.my-lg-1{margin-top:.25rem!important}.mr-lg-1,.mx-lg-1{margin-right:.25rem!important}.mb-lg-1,.my-lg-1{margin-bottom:.25rem!important}.ml-lg-1,.mx-lg-1{margin-left:.25rem!important}.m-lg-2{margin:.5rem!important}.mt-lg-2,.my-lg-2{margin-top:.5rem!important}.mr-lg-2,.mx-lg-2{margin-right:.5rem!important}.mb-lg-2,.my-lg-2{margin-bottom:.5rem!important}.ml-lg-2,.mx-lg-2{margin-left:.5rem!important}.m-lg-3{margin:1rem!important}.mt-lg-3,.my-lg-3{margin-top:1rem!important}.mr-lg-3,.mx-lg-3{margin-right:1rem!important}.mb-lg-3,.my-lg-3{margin-bottom:1rem!important}.ml-lg-3,.mx-lg-3{margin-left:1rem!important}.m-lg-4{margin:1.5rem!important}.mt-lg-4,.my-lg-4{margin-top:1.5rem!important}.mr-lg-4,.mx-lg-4{margin-right:1.5rem!important}.mb-lg-4,.my-lg-4{margin-bottom:1.5rem!important}.ml-lg-4,.mx-lg-4{margin-left:1.5rem!important}.m-lg-5{margin:3rem!important}.mt-lg-5,.my-lg-5{margin-top:3rem!important}.mr-lg-5,.mx-lg-5{margin-right:3rem!important}.mb-lg-5,.my-lg-5{margin-bottom:3rem!important}.ml-lg-5,.mx-lg-5{margin-left:3rem!important}.p-lg-0{padding:0!important}.pt-lg-0,.py-lg-0{padding-top:0!important}.pr-lg-0,.px-lg-0{padding-right:0!important}.pb-lg-0,.py-lg-0{padding-bottom:0!important}.pl-lg-0,.px-lg-0{padding-left:0!important}.p-lg-1{padding:.25rem!important}.pt-lg-1,.py-lg-1{padding-top:.25rem!important}.pr-lg-1,.px-lg-1{padding-right:.25rem!important}.pb-lg-1,.py-lg-1{padding-bottom:.25rem!important}.pl-lg-1,.px-lg-1{padding-left:.25rem!important}.p-lg-2{padding:.5rem!important}.pt-lg-2,.py-lg-2{padding-top:.5rem!important}.pr-lg-2,.px-lg-2{padding-right:.5rem!important}.pb-lg-2,.py-lg-2{padding-bottom:.5rem!important}.pl-lg-2,.px-lg-2{padding-left:.5rem!important}.p-lg-3{padding:1rem!important}.pt-lg-3,.py-lg-3{padding-top:1rem!important}.pr-lg-3,.px-lg-3{padding-right:1rem!important}.pb-lg-3,.py-lg-3{padding-bottom:1rem!important}.pl-lg-3,.px-lg-3{padding-left:1rem!important}.p-lg-4{padding:1.5rem!important}.pt-lg-4,.py-lg-4{padding-top:1.5rem!important}.pr-lg-4,.px-lg-4{padding-right:1.5rem!important}.pb-lg-4,.py-lg-4{padding-bottom:1.5rem!important}.pl-lg-4,.px-lg-4{padding-left:1.5rem!important}.p-lg-5{padding:3rem!important}.pt-lg-5,.py-lg-5{padding-top:3rem!important}.pr-lg-5,.px-lg-5{padding-right:3rem!important}.pb-lg-5,.py-lg-5{padding-bottom:3rem!important}.pl-lg-5,.px-lg-5{padding-left:3rem!important}.m-lg-n1{margin:-.25rem!important}.mt-lg-n1,.my-lg-n1{margin-top:-.25rem!important}.mr-lg-n1,.mx-lg-n1{margin-right:-.25rem!important}.mb-lg-n1,.my-lg-n1{margin-bottom:-.25rem!important}.ml-lg-n1,.mx-lg-n1{margin-left:-.25rem!important}.m-lg-n2{margin:-.5rem!important}.mt-lg-n2,.my-lg-n2{margin-top:-.5rem!important}.mr-lg-n2,.mx-lg-n2{margin-right:-.5rem!important}.mb-lg-n2,.my-lg-n2{margin-bottom:-.5rem!important}.ml-lg-n2,.mx-lg-n2{margin-left:-.5rem!important}.m-lg-n3{margin:-1rem!important}.mt-lg-n3,.my-lg-n3{margin-top:-1rem!important}.mr-lg-n3,.mx-lg-n3{margin-right:-1rem!important}.mb-lg-n3,.my-lg-n3{margin-bottom:-1rem!important}.ml-lg-n3,.mx-lg-n3{margin-left:-1rem!important}.m-lg-n4{margin:-1.5rem!important}.mt-lg-n4,.my-lg-n4{margin-top:-1.5rem!important}.mr-lg-n4,.mx-lg-n4{margin-right:-1.5rem!important}.mb-lg-n4,.my-lg-n4{margin-bottom:-1.5rem!important}.ml-lg-n4,.mx-lg-n4{margin-left:-1.5rem!important}.m-lg-n5{margin:-3rem!important}.mt-lg-n5,.my-lg-n5{margin-top:-3rem!important}.mr-lg-n5,.mx-lg-n5{margin-right:-3rem!important}.mb-lg-n5,.my-lg-n5{margin-bottom:-3rem!important}.ml-lg-n5,.mx-lg-n5{margin-left:-3rem!important}.m-lg-auto{margin:auto!important}.mt-lg-auto,.my-lg-auto{margin-top:auto!important}.mr-lg-auto,.mx-lg-auto{margin-right:auto!important}.mb-lg-auto,.my-lg-auto{margin-bottom:auto!important}.ml-lg-auto,.mx-lg-auto{margin-left:auto!important}}@media(min-width:1200px){.m-xl-0{margin:0!important}.mt-xl-0,.my-xl-0{margin-top:0!important}.mr-xl-0,.mx-xl-0{margin-right:0!important}.mb-xl-0,.my-xl-0{margin-bottom:0!important}.ml-xl-0,.mx-xl-0{margin-left:0!important}.m-xl-1{margin:.25rem!important}.mt-xl-1,.my-xl-1{margin-top:.25rem!important}.mr-xl-1,.mx-xl-1{margin-right:.25rem!important}.mb-xl-1,.my-xl-1{margin-bottom:.25rem!important}.ml-xl-1,.mx-xl-1{margin-left:.25rem!important}.m-xl-2{margin:.5rem!important}.mt-xl-2,.my-xl-2{margin-top:.5rem!important}.mr-xl-2,.mx-xl-2{margin-right:.5rem!important}.mb-xl-2,.my-xl-2{margin-bottom:.5rem!important}.ml-xl-2,.mx-xl-2{margin-left:.5rem!important}.m-xl-3{margin:1rem!important}.mt-xl-3,.my-xl-3{margin-top:1rem!important}.mr-xl-3,.mx-xl-3{margin-right:1rem!important}.mb-xl-3,.my-xl-3{margin-bottom:1rem!important}.ml-xl-3,.mx-xl-3{margin-left:1rem!important}.m-xl-4{margin:1.5rem!important}.mt-xl-4,.my-xl-4{margin-top:1.5rem!important}.mr-xl-4,.mx-xl-4{margin-right:1.5rem!important}.mb-xl-4,.my-xl-4{margin-bottom:1.5rem!important}.ml-xl-4,.mx-xl-4{margin-left:1.5rem!important}.m-xl-5{margin:3rem!important}.mt-xl-5,.my-xl-5{margin-top:3rem!important}.mr-xl-5,.mx-xl-5{margin-right:3rem!important}.mb-xl-5,.my-xl-5{margin-bottom:3rem!important}.ml-xl-5,.mx-xl-5{margin-left:3rem!important}.p-xl-0{padding:0!important}.pt-xl-0,.py-xl-0{padding-top:0!important}.pr-xl-0,.px-xl-0{padding-right:0!important}.pb-xl-0,.py-xl-0{padding-bottom:0!important}.pl-xl-0,.px-xl-0{padding-left:0!important}.p-xl-1{padding:.25rem!important}.pt-xl-1,.py-xl-1{padding-top:.25rem!important}.pr-xl-1,.px-xl-1{padding-right:.25rem!important}.pb-xl-1,.py-xl-1{padding-bottom:.25rem!important}.pl-xl-1,.px-xl-1{padding-left:.25rem!important}.p-xl-2{padding:.5rem!important}.pt-xl-2,.py-xl-2{padding-top:.5rem!important}.pr-xl-2,.px-xl-2{padding-right:.5rem!important}.pb-xl-2,.py-xl-2{padding-bottom:.5rem!important}.pl-xl-2,.px-xl-2{padding-left:.5rem!important}.p-xl-3{padding:1rem!important}.pt-xl-3,.py-xl-3{padding-top:1rem!important}.pr-xl-3,.px-xl-3{padding-right:1rem!important}.pb-xl-3,.py-xl-3{padding-bottom:1rem!important}.pl-xl-3,.px-xl-3{padding-left:1rem!important}.p-xl-4{padding:1.5rem!important}.pt-xl-4,.py-xl-4{padding-top:1.5rem!important}.pr-xl-4,.px-xl-4{padding-right:1.5rem!important}.pb-xl-4,.py-xl-4{padding-bottom:1.5rem!important}.pl-xl-4,.px-xl-4{padding-left:1.5rem!important}.p-xl-5{padding:3rem!important}.pt-xl-5,.py-xl-5{padding-top:3rem!important}.pr-xl-5,.px-xl-5{padding-right:3rem!important}.pb-xl-5,.py-xl-5{padding-bottom:3rem!important}.pl-xl-5,.px-xl-5{padding-left:3rem!important}.m-xl-n1{margin:-.25rem!important}.mt-xl-n1,.my-xl-n1{margin-top:-.25rem!important}.mr-xl-n1,.mx-xl-n1{margin-right:-.25rem!important}.mb-xl-n1,.my-xl-n1{margin-bottom:-.25rem!important}.ml-xl-n1,.mx-xl-n1{margin-left:-.25rem!important}.m-xl-n2{margin:-.5rem!important}.mt-xl-n2,.my-xl-n2{margin-top:-.5rem!important}.mr-xl-n2,.mx-xl-n2{margin-right:-.5rem!important}.mb-xl-n2,.my-xl-n2{margin-bottom:-.5rem!important}.ml-xl-n2,.mx-xl-n2{margin-left:-.5rem!important}.m-xl-n3{margin:-1rem!important}.mt-xl-n3,.my-xl-n3{margin-top:-1rem!important}.mr-xl-n3,.mx-xl-n3{margin-right:-1rem!important}.mb-xl-n3,.my-xl-n3{margin-bottom:-1rem!important}.ml-xl-n3,.mx-xl-n3{margin-left:-1rem!important}.m-xl-n4{margin:-1.5rem!important}.mt-xl-n4,.my-xl-n4{margin-top:-1.5rem!important}.mr-xl-n4,.mx-xl-n4{margin-right:-1.5rem!important}.mb-xl-n4,.my-xl-n4{margin-bottom:-1.5rem!important}.ml-xl-n4,.mx-xl-n4{margin-left:-1.5rem!important}.m-xl-n5{margin:-3rem!important}.mt-xl-n5,.my-xl-n5{margin-top:-3rem!important}.mr-xl-n5,.mx-xl-n5{margin-right:-3rem!important}.mb-xl-n5,.my-xl-n5{margin-bottom:-3rem!important}.ml-xl-n5,.mx-xl-n5{margin-left:-3rem!important}.m-xl-auto{margin:auto!important}.mt-xl-auto,.my-xl-auto{margin-top:auto!important}.mr-xl-auto,.mx-xl-auto{margin-right:auto!important}.mb-xl-auto,.my-xl-auto{margin-bottom:auto!important}.ml-xl-auto,.mx-xl-auto{margin-left:auto!important}}.text-monospace{font-family:SFMono-Regular,Menlo,Monaco,Consolas,liberation mono,courier new,monospace!important}.text-justify{text-align:justify!important}.text-wrap{white-space:normal!important}.text-nowrap{white-space:nowrap!important}.text-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text-left{text-align:left!important}.text-right{text-align:right!important}.text-center{text-align:center!important}@media(min-width:576px){.text-sm-left{text-align:left!important}.text-sm-right{text-align:right!important}.text-sm-center{text-align:center!important}}@media(min-width:768px){.text-md-left{text-align:left!important}.text-md-right{text-align:right!important}.text-md-center{text-align:center!important}}@media(min-width:992px){.text-lg-left{text-align:left!important}.text-lg-right{text-align:right!important}.text-lg-center{text-align:center!important}}@media(min-width:1200px){.text-xl-left{text-align:left!important}.text-xl-right{text-align:right!important}.text-xl-center{text-align:center!important}}.text-lowercase{text-transform:lowercase!important}.text-uppercase{text-transform:uppercase!important}.text-capitalize{text-transform:capitalize!important}.font-weight-light{font-weight:300!important}.font-weight-lighter{font-weight:lighter!important}.font-weight-normal{font-weight:400!important}.font-weight-bold{font-weight:700!important}.font-weight-bolder{font-weight:bolder!important}.font-italic{font-style:italic!important}.text-white{color:#fff!important}.text-primary{color:#007bff!important}a.text-primary:hover,a.text-primary:focus{color:#0056b3!important}.text-secondary{color:#6c757d!important}a.text-secondary:hover,a.text-secondary:focus{color:#494f54!important}.text-success{color:#28a745!important}a.text-success:hover,a.text-success:focus{color:#19692c!important}.text-info{color:#17a2b8!important}a.text-info:hover,a.text-info:focus{color:#0f6674!important}.text-warning{color:#ffc107!important}a.text-warning:hover,a.text-warning:focus{color:#ba8b00!important}.text-danger{color:#dc3545!important}a.text-danger:hover,a.text-danger:focus{color:#a71d2a!important}.text-light{color:#f8f9fa!important}a.text-light:hover,a.text-light:focus{color:#cbd3da!important}.text-dark{color:#343a40!important}a.text-dark:hover,a.text-dark:focus{color:#121416!important}.text-body{color:#212529!important}.text-muted{color:#6c757d!important}.text-black-50{color:rgba(0,0,0,.5)!important}.text-white-50{color:rgba(255,255,255,.5)!important}.text-hide{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0}.text-decoration-none{text-decoration:none!important}.text-break{word-break:break-word!important;overflow-wrap:break-word!important}.text-reset{color:inherit!important}.visible{visibility:visible!important}.invisible{visibility:hidden!important}@media print{*,*::before,*::after{text-shadow:none!important;box-shadow:none!important}a:not(.btn){text-decoration:underline}abbr[title]::after{content:" (" attr(title) ")"}pre{white-space:pre-wrap!important}pre,blockquote{border:1px solid #adb5bd;page-break-inside:avoid}thead{display:table-header-group}tr,img{page-break-inside:avoid}p,h2,h3{orphans:3;widows:3}h2,h3{page-break-after:avoid}@page{size:a3}body{min-width:992px!important}.container{min-width:992px!important}.navbar{display:none}.badge{border:1px solid #000}.table{border-collapse:collapse!important}.table td,.table th{background-color:#fff!important}.table-bordered th,.table-bordered td{border:1px solid #dee2e6!important}.table-dark{color:inherit}.table-dark th,.table-dark td,.table-dark thead th,.table-dark tbody+tbody{border-color:#dee2e6}.table .thead-dark th{color:inherit;border-color:#dee2e6}}/*!* Font Awesome Free 5.12.0 by @fontawesome - https://fontawesome.com
-* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)*/@font-face{font-family:'font awesome 5 free';font-style:normal;font-weight:900;font-display:auto;src:url(/assets/font-awesome/fa-solid-900-f29eef66eb3ad0e3574d8edb4b9e72a04692a0b2b92d99eb7c4b977611ddd4fe.eot);src:url(/assets/font-awesome/fa-solid-900-f29eef66eb3ad0e3574d8edb4b9e72a04692a0b2b92d99eb7c4b977611ddd4fe.eot#iefix) format("embedded-opentype"),url(/assets/font-awesome/fa-solid-900-787d76ad6deab67ccf8bac1b584260205e114f508fc5542b612e3f75d49a34e4.woff2) format("woff2"),url(/assets/font-awesome/fa-solid-900-3b60c77e0c81c1c9cdc9adb96ade6dbac7ef2b9402a316185855de7122e517db.woff) format("woff"),url(/assets/font-awesome/fa-solid-900-0389b061db08d406704c9bb8819e09c3558ac956287b3e9da8e6645a79d528ea.ttf) format("truetype"),url(/assets/font-awesome/fa-solid-900-eaf0f3d0cadad17eed1045cf68c30db7abffb4c8ef4ee9cb5f4026fdefc99a59.svg#fontawesome) format("svg")}@font-face{font-family:'font awesome 5 free';font-style:normal;font-weight:400;font-display:auto;src:url(/assets/font-awesome/fa-regular-400-c1465a6b8743622f759b08a6d5336e57eb6eabdba1b6393fba6d30d45382f3d2.eot);src:url(/assets/font-awesome/fa-regular-400-c1465a6b8743622f759b08a6d5336e57eb6eabdba1b6393fba6d30d45382f3d2.eot#iefix) format("embedded-opentype"),url(/assets/font-awesome/fa-regular-400-86e496b536b26ba60cdb68df9dd9143b19a63b65e30e373b0321833aab1295d6.woff2) format("woff2"),url(/assets/font-awesome/fa-regular-400-864c8f702a5e63198bb76ef0240b599cc065d4904c2afc5da6c8a29bbf0d6c64.woff) format("woff"),url(/assets/font-awesome/fa-regular-400-6a335d1ce152f2b5b02bf82cc445b02d1abccd7f408a87113424b5f8fcbbfade.ttf) format("truetype"),url(/assets/font-awesome/fa-regular-400-7ab8a39f4c48b743bd6acbbf5ea4c7547efcb62ad966e9bef3e41996afc44fd4.svg#fontawesome) format("svg")}@font-face{font-family:'font awesome 5 brands';font-style:normal;font-weight:400;font-display:auto;src:url(/assets/font-awesome/fa-brands-400-e9fdf947c39f06f1b5e63c58eea2f2f74850421b4e32047dacb9c7b75dd42a16.eot);src:url(/assets/font-awesome/fa-brands-400-e9fdf947c39f06f1b5e63c58eea2f2f74850421b4e32047dacb9c7b75dd42a16.eot#iefix) format("embedded-opentype"),url(/assets/font-awesome/fa-brands-400-8e4560c16c7970efa47680450b2cf239d4a482c056d308acea12bb9022906c8b.woff2) format("woff2"),url(/assets/font-awesome/fa-brands-400-1af816db9a686faa76bfbda779df959e6213de714a94b87aa7374a151f6f4900.woff) format("woff"),url(/assets/font-awesome/fa-brands-400-6b347ff01e588a2a6909ccd7f7f5866b27484391547e9df451ab9b4c27920c71.ttf) format("truetype"),url(/assets/font-awesome/fa-brands-400-36b51fbe6b87587541b9173cd79c16c6b359ad22a172b922204f9aa87411acd9.svg#fontawesome) format("svg")}.fa,.fas{font-family:'font awesome 5 free';font-weight:900}.far{font-family:'font awesome 5 free';font-weight:400}.fab{font-family:'font awesome 5 brands'}.fa,.fas,.far,.fal,.fad,.fab{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-style:normal;font-variant:normal;text-rendering:auto;line-height:1}.fa-lg{font-size:1.3333333333em;line-height:.75em;vertical-align:-.0667em}.fa-xs{font-size:.75em}.fa-sm{font-size:.875em}.fa-1x{font-size:1em}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-6x{font-size:6em}.fa-7x{font-size:7em}.fa-8x{font-size:8em}.fa-9x{font-size:9em}.fa-10x{font-size:10em}.fa-fw{text-align:center;width:1.25em}.fa-ul{list-style-type:none;margin-left:2.5em;padding-left:0}.fa-ul>li{position:relative}.fa-li{left:-2em;position:absolute;text-align:center;width:2em;line-height:inherit}.fa-border{border:solid .08em #eee;border-radius:.1em;padding:.2em .25em .15em}.fa-pull-left{float:left}.fa-pull-right{float:right}.fa.fa-pull-left,.fas.fa-pull-left,.far.fa-pull-left,.fal.fa-pull-left,.fab.fa-pull-left{margin-right:.3em}.fa.fa-pull-right,.fas.fa-pull-right,.far.fa-pull-right,.fal.fa-pull-right,.fab.fa-pull-right{margin-left:.3em}.fa-spin{animation:fa-spin 2s infinite linear}.fa-pulse{animation:fa-spin 1s infinite steps(8)}@keyframes fa-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.fa-rotate-90{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";transform:rotate(90deg)}.fa-rotate-180{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";transform:rotate(180deg)}.fa-rotate-270{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";transform:rotate(270deg)}.fa-flip-horizontal{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";transform:scale(-1,1)}.fa-flip-vertical{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";transform:scale(1,-1)}.fa-flip-both,.fa-flip-horizontal.fa-flip-vertical{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";transform:scale(-1,-1)}:root .fa-rotate-90,:root .fa-rotate-180,:root .fa-rotate-270,:root .fa-flip-horizontal,:root .fa-flip-vertical,:root .fa-flip-both{filter:none}.fa-stack{display:inline-block;height:2em;line-height:2em;position:relative;vertical-align:middle;width:2.5em}.fa-stack-1x,.fa-stack-2x{left:0;position:absolute;text-align:center;width:100%}.fa-stack-1x{line-height:inherit}.fa-stack-2x{font-size:2em}.fa-inverse{color:#fff}.fa-500px:before{content:"\f26e"}.fa-accessible-icon:before{content:"\f368"}.fa-accusoft:before{content:"\f369"}.fa-acquisitions-incorporated:before{content:"\f6af"}.fa-ad:before{content:"\f641"}.fa-address-book:before{content:"\f2b9"}.fa-address-card:before{content:"\f2bb"}.fa-adjust:before{content:"\f042"}.fa-adn:before{content:"\f170"}.fa-adobe:before{content:"\f778"}.fa-adversal:before{content:"\f36a"}.fa-affiliatetheme:before{content:"\f36b"}.fa-air-freshener:before{content:"\f5d0"}.fa-airbnb:before{content:"\f834"}.fa-algolia:before{content:"\f36c"}.fa-align-center:before{content:"\f037"}.fa-align-justify:before{content:"\f039"}.fa-align-left:before{content:"\f036"}.fa-align-right:before{content:"\f038"}.fa-alipay:before{content:"\f642"}.fa-allergies:before{content:"\f461"}.fa-amazon:before{content:"\f270"}.fa-amazon-pay:before{content:"\f42c"}.fa-ambulance:before{content:"\f0f9"}.fa-american-sign-language-interpreting:before{content:"\f2a3"}.fa-amilia:before{content:"\f36d"}.fa-anchor:before{content:"\f13d"}.fa-android:before{content:"\f17b"}.fa-angellist:before{content:"\f209"}.fa-angle-double-down:before{content:"\f103"}.fa-angle-double-left:before{content:"\f100"}.fa-angle-double-right:before{content:"\f101"}.fa-angle-double-up:before{content:"\f102"}.fa-angle-down:before{content:"\f107"}.fa-angle-left:before{content:"\f104"}.fa-angle-right:before{content:"\f105"}.fa-angle-up:before{content:"\f106"}.fa-angry:before{content:"\f556"}.fa-angrycreative:before{content:"\f36e"}.fa-angular:before{content:"\f420"}.fa-ankh:before{content:"\f644"}.fa-app-store:before{content:"\f36f"}.fa-app-store-ios:before{content:"\f370"}.fa-apper:before{content:"\f371"}.fa-apple:before{content:"\f179"}.fa-apple-alt:before{content:"\f5d1"}.fa-apple-pay:before{content:"\f415"}.fa-archive:before{content:"\f187"}.fa-archway:before{content:"\f557"}.fa-arrow-alt-circle-down:before{content:"\f358"}.fa-arrow-alt-circle-left:before{content:"\f359"}.fa-arrow-alt-circle-right:before{content:"\f35a"}.fa-arrow-alt-circle-up:before{content:"\f35b"}.fa-arrow-circle-down:before{content:"\f0ab"}.fa-arrow-circle-left:before{content:"\f0a8"}.fa-arrow-circle-right:before{content:"\f0a9"}.fa-arrow-circle-up:before{content:"\f0aa"}.fa-arrow-down:before{content:"\f063"}.fa-arrow-left:before{content:"\f060"}.fa-arrow-right:before{content:"\f061"}.fa-arrow-up:before{content:"\f062"}.fa-arrows-alt:before{content:"\f0b2"}.fa-arrows-alt-h:before{content:"\f337"}.fa-arrows-alt-v:before{content:"\f338"}.fa-artstation:before{content:"\f77a"}.fa-assistive-listening-systems:before{content:"\f2a2"}.fa-asterisk:before{content:"\f069"}.fa-asymmetrik:before{content:"\f372"}.fa-at:before{content:"\f1fa"}.fa-atlas:before{content:"\f558"}.fa-atlassian:before{content:"\f77b"}.fa-atom:before{content:"\f5d2"}.fa-audible:before{content:"\f373"}.fa-audio-description:before{content:"\f29e"}.fa-autoprefixer:before{content:"\f41c"}.fa-avianex:before{content:"\f374"}.fa-aviato:before{content:"\f421"}.fa-award:before{content:"\f559"}.fa-aws:before{content:"\f375"}.fa-baby:before{content:"\f77c"}.fa-baby-carriage:before{content:"\f77d"}.fa-backspace:before{content:"\f55a"}.fa-backward:before{content:"\f04a"}.fa-bacon:before{content:"\f7e5"}.fa-bahai:before{content:"\f666"}.fa-balance-scale:before{content:"\f24e"}.fa-balance-scale-left:before{content:"\f515"}.fa-balance-scale-right:before{content:"\f516"}.fa-ban:before{content:"\f05e"}.fa-band-aid:before{content:"\f462"}.fa-bandcamp:before{content:"\f2d5"}.fa-barcode:before{content:"\f02a"}.fa-bars:before{content:"\f0c9"}.fa-baseball-ball:before{content:"\f433"}.fa-basketball-ball:before{content:"\f434"}.fa-bath:before{content:"\f2cd"}.fa-battery-empty:before{content:"\f244"}.fa-battery-full:before{content:"\f240"}.fa-battery-half:before{content:"\f242"}.fa-battery-quarter:before{content:"\f243"}.fa-battery-three-quarters:before{content:"\f241"}.fa-battle-net:before{content:"\f835"}.fa-bed:before{content:"\f236"}.fa-beer:before{content:"\f0fc"}.fa-behance:before{content:"\f1b4"}.fa-behance-square:before{content:"\f1b5"}.fa-bell:before{content:"\f0f3"}.fa-bell-slash:before{content:"\f1f6"}.fa-bezier-curve:before{content:"\f55b"}.fa-bible:before{content:"\f647"}.fa-bicycle:before{content:"\f206"}.fa-biking:before{content:"\f84a"}.fa-bimobject:before{content:"\f378"}.fa-binoculars:before{content:"\f1e5"}.fa-biohazard:before{content:"\f780"}.fa-birthday-cake:before{content:"\f1fd"}.fa-bitbucket:before{content:"\f171"}.fa-bitcoin:before{content:"\f379"}.fa-bity:before{content:"\f37a"}.fa-black-tie:before{content:"\f27e"}.fa-blackberry:before{content:"\f37b"}.fa-blender:before{content:"\f517"}.fa-blender-phone:before{content:"\f6b6"}.fa-blind:before{content:"\f29d"}.fa-blog:before{content:"\f781"}.fa-blogger:before{content:"\f37c"}.fa-blogger-b:before{content:"\f37d"}.fa-bluetooth:before{content:"\f293"}.fa-bluetooth-b:before{content:"\f294"}.fa-bold:before{content:"\f032"}.fa-bolt:before{content:"\f0e7"}.fa-bomb:before{content:"\f1e2"}.fa-bone:before{content:"\f5d7"}.fa-bong:before{content:"\f55c"}.fa-book:before{content:"\f02d"}.fa-book-dead:before{content:"\f6b7"}.fa-book-medical:before{content:"\f7e6"}.fa-book-open:before{content:"\f518"}.fa-book-reader:before{content:"\f5da"}.fa-bookmark:before{content:"\f02e"}.fa-bootstrap:before{content:"\f836"}.fa-border-all:before{content:"\f84c"}.fa-border-none:before{content:"\f850"}.fa-border-style:before{content:"\f853"}.fa-bowling-ball:before{content:"\f436"}.fa-box:before{content:"\f466"}.fa-box-open:before{content:"\f49e"}.fa-boxes:before{content:"\f468"}.fa-braille:before{content:"\f2a1"}.fa-brain:before{content:"\f5dc"}.fa-bread-slice:before{content:"\f7ec"}.fa-briefcase:before{content:"\f0b1"}.fa-briefcase-medical:before{content:"\f469"}.fa-broadcast-tower:before{content:"\f519"}.fa-broom:before{content:"\f51a"}.fa-brush:before{content:"\f55d"}.fa-btc:before{content:"\f15a"}.fa-buffer:before{content:"\f837"}.fa-bug:before{content:"\f188"}.fa-building:before{content:"\f1ad"}.fa-bullhorn:before{content:"\f0a1"}.fa-bullseye:before{content:"\f140"}.fa-burn:before{content:"\f46a"}.fa-buromobelexperte:before{content:"\f37f"}.fa-bus:before{content:"\f207"}.fa-bus-alt:before{content:"\f55e"}.fa-business-time:before{content:"\f64a"}.fa-buy-n-large:before{content:"\f8a6"}.fa-buysellads:before{content:"\f20d"}.fa-calculator:before{content:"\f1ec"}.fa-calendar:before{content:"\f133"}.fa-calendar-alt:before{content:"\f073"}.fa-calendar-check:before{content:"\f274"}.fa-calendar-day:before{content:"\f783"}.fa-calendar-minus:before{content:"\f272"}.fa-calendar-plus:before{content:"\f271"}.fa-calendar-times:before{content:"\f273"}.fa-calendar-week:before{content:"\f784"}.fa-camera:before{content:"\f030"}.fa-camera-retro:before{content:"\f083"}.fa-campground:before{content:"\f6bb"}.fa-canadian-maple-leaf:before{content:"\f785"}.fa-candy-cane:before{content:"\f786"}.fa-cannabis:before{content:"\f55f"}.fa-capsules:before{content:"\f46b"}.fa-car:before{content:"\f1b9"}.fa-car-alt:before{content:"\f5de"}.fa-car-battery:before{content:"\f5df"}.fa-car-crash:before{content:"\f5e1"}.fa-car-side:before{content:"\f5e4"}.fa-caravan:before{content:"\f8ff"}.fa-caret-down:before{content:"\f0d7"}.fa-caret-left:before{content:"\f0d9"}.fa-caret-right:before{content:"\f0da"}.fa-caret-square-down:before{content:"\f150"}.fa-caret-square-left:before{content:"\f191"}.fa-caret-square-right:before{content:"\f152"}.fa-caret-square-up:before{content:"\f151"}.fa-caret-up:before{content:"\f0d8"}.fa-carrot:before{content:"\f787"}.fa-cart-arrow-down:before{content:"\f218"}.fa-cart-plus:before{content:"\f217"}.fa-cash-register:before{content:"\f788"}.fa-cat:before{content:"\f6be"}.fa-cc-amazon-pay:before{content:"\f42d"}.fa-cc-amex:before{content:"\f1f3"}.fa-cc-apple-pay:before{content:"\f416"}.fa-cc-diners-club:before{content:"\f24c"}.fa-cc-discover:before{content:"\f1f2"}.fa-cc-jcb:before{content:"\f24b"}.fa-cc-mastercard:before{content:"\f1f1"}.fa-cc-paypal:before{content:"\f1f4"}.fa-cc-stripe:before{content:"\f1f5"}.fa-cc-visa:before{content:"\f1f0"}.fa-centercode:before{content:"\f380"}.fa-centos:before{content:"\f789"}.fa-certificate:before{content:"\f0a3"}.fa-chair:before{content:"\f6c0"}.fa-chalkboard:before{content:"\f51b"}.fa-chalkboard-teacher:before{content:"\f51c"}.fa-charging-station:before{content:"\f5e7"}.fa-chart-area:before{content:"\f1fe"}.fa-chart-bar:before{content:"\f080"}.fa-chart-line:before{content:"\f201"}.fa-chart-pie:before{content:"\f200"}.fa-check:before{content:"\f00c"}.fa-check-circle:before{content:"\f058"}.fa-check-double:before{content:"\f560"}.fa-check-square:before{content:"\f14a"}.fa-cheese:before{content:"\f7ef"}.fa-chess:before{content:"\f439"}.fa-chess-bishop:before{content:"\f43a"}.fa-chess-board:before{content:"\f43c"}.fa-chess-king:before{content:"\f43f"}.fa-chess-knight:before{content:"\f441"}.fa-chess-pawn:before{content:"\f443"}.fa-chess-queen:before{content:"\f445"}.fa-chess-rook:before{content:"\f447"}.fa-chevron-circle-down:before{content:"\f13a"}.fa-chevron-circle-left:before{content:"\f137"}.fa-chevron-circle-right:before{content:"\f138"}.fa-chevron-circle-up:before{content:"\f139"}.fa-chevron-down:before{content:"\f078"}.fa-chevron-left:before{content:"\f053"}.fa-chevron-right:before{content:"\f054"}.fa-chevron-up:before{content:"\f077"}.fa-child:before{content:"\f1ae"}.fa-chrome:before{content:"\f268"}.fa-chromecast:before{content:"\f838"}.fa-church:before{content:"\f51d"}.fa-circle:before{content:"\f111"}.fa-circle-notch:before{content:"\f1ce"}.fa-city:before{content:"\f64f"}.fa-clinic-medical:before{content:"\f7f2"}.fa-clipboard:before{content:"\f328"}.fa-clipboard-check:before{content:"\f46c"}.fa-clipboard-list:before{content:"\f46d"}.fa-clock:before{content:"\f017"}.fa-clone:before{content:"\f24d"}.fa-closed-captioning:before{content:"\f20a"}.fa-cloud:before{content:"\f0c2"}.fa-cloud-download-alt:before{content:"\f381"}.fa-cloud-meatball:before{content:"\f73b"}.fa-cloud-moon:before{content:"\f6c3"}.fa-cloud-moon-rain:before{content:"\f73c"}.fa-cloud-rain:before{content:"\f73d"}.fa-cloud-showers-heavy:before{content:"\f740"}.fa-cloud-sun:before{content:"\f6c4"}.fa-cloud-sun-rain:before{content:"\f743"}.fa-cloud-upload-alt:before{content:"\f382"}.fa-cloudscale:before{content:"\f383"}.fa-cloudsmith:before{content:"\f384"}.fa-cloudversify:before{content:"\f385"}.fa-cocktail:before{content:"\f561"}.fa-code:before{content:"\f121"}.fa-code-branch:before{content:"\f126"}.fa-codepen:before{content:"\f1cb"}.fa-codiepie:before{content:"\f284"}.fa-coffee:before{content:"\f0f4"}.fa-cog:before{content:"\f013"}.fa-cogs:before{content:"\f085"}.fa-coins:before{content:"\f51e"}.fa-columns:before{content:"\f0db"}.fa-comment:before{content:"\f075"}.fa-comment-alt:before{content:"\f27a"}.fa-comment-dollar:before{content:"\f651"}.fa-comment-dots:before{content:"\f4ad"}.fa-comment-medical:before{content:"\f7f5"}.fa-comment-slash:before{content:"\f4b3"}.fa-comments:before{content:"\f086"}.fa-comments-dollar:before{content:"\f653"}.fa-compact-disc:before{content:"\f51f"}.fa-compass:before{content:"\f14e"}.fa-compress:before{content:"\f066"}.fa-compress-alt:before{content:"\f422"}.fa-compress-arrows-alt:before{content:"\f78c"}.fa-concierge-bell:before{content:"\f562"}.fa-confluence:before{content:"\f78d"}.fa-connectdevelop:before{content:"\f20e"}.fa-contao:before{content:"\f26d"}.fa-cookie:before{content:"\f563"}.fa-cookie-bite:before{content:"\f564"}.fa-copy:before{content:"\f0c5"}.fa-copyright:before{content:"\f1f9"}.fa-cotton-bureau:before{content:"\f89e"}.fa-couch:before{content:"\f4b8"}.fa-cpanel:before{content:"\f388"}.fa-creative-commons:before{content:"\f25e"}.fa-creative-commons-by:before{content:"\f4e7"}.fa-creative-commons-nc:before{content:"\f4e8"}.fa-creative-commons-nc-eu:before{content:"\f4e9"}.fa-creative-commons-nc-jp:before{content:"\f4ea"}.fa-creative-commons-nd:before{content:"\f4eb"}.fa-creative-commons-pd:before{content:"\f4ec"}.fa-creative-commons-pd-alt:before{content:"\f4ed"}.fa-creative-commons-remix:before{content:"\f4ee"}.fa-creative-commons-sa:before{content:"\f4ef"}.fa-creative-commons-sampling:before{content:"\f4f0"}.fa-creative-commons-sampling-plus:before{content:"\f4f1"}.fa-creative-commons-share:before{content:"\f4f2"}.fa-creative-commons-zero:before{content:"\f4f3"}.fa-credit-card:before{content:"\f09d"}.fa-critical-role:before{content:"\f6c9"}.fa-crop:before{content:"\f125"}.fa-crop-alt:before{content:"\f565"}.fa-cross:before{content:"\f654"}.fa-crosshairs:before{content:"\f05b"}.fa-crow:before{content:"\f520"}.fa-crown:before{content:"\f521"}.fa-crutch:before{content:"\f7f7"}.fa-css3:before{content:"\f13c"}.fa-css3-alt:before{content:"\f38b"}.fa-cube:before{content:"\f1b2"}.fa-cubes:before{content:"\f1b3"}.fa-cut:before{content:"\f0c4"}.fa-cuttlefish:before{content:"\f38c"}.fa-d-and-d:before{content:"\f38d"}.fa-d-and-d-beyond:before{content:"\f6ca"}.fa-dashcube:before{content:"\f210"}.fa-database:before{content:"\f1c0"}.fa-deaf:before{content:"\f2a4"}.fa-delicious:before{content:"\f1a5"}.fa-democrat:before{content:"\f747"}.fa-deploydog:before{content:"\f38e"}.fa-deskpro:before{content:"\f38f"}.fa-desktop:before{content:"\f108"}.fa-dev:before{content:"\f6cc"}.fa-deviantart:before{content:"\f1bd"}.fa-dharmachakra:before{content:"\f655"}.fa-dhl:before{content:"\f790"}.fa-diagnoses:before{content:"\f470"}.fa-diaspora:before{content:"\f791"}.fa-dice:before{content:"\f522"}.fa-dice-d20:before{content:"\f6cf"}.fa-dice-d6:before{content:"\f6d1"}.fa-dice-five:before{content:"\f523"}.fa-dice-four:before{content:"\f524"}.fa-dice-one:before{content:"\f525"}.fa-dice-six:before{content:"\f526"}.fa-dice-three:before{content:"\f527"}.fa-dice-two:before{content:"\f528"}.fa-digg:before{content:"\f1a6"}.fa-digital-ocean:before{content:"\f391"}.fa-digital-tachograph:before{content:"\f566"}.fa-directions:before{content:"\f5eb"}.fa-discord:before{content:"\f392"}.fa-discourse:before{content:"\f393"}.fa-divide:before{content:"\f529"}.fa-dizzy:before{content:"\f567"}.fa-dna:before{content:"\f471"}.fa-dochub:before{content:"\f394"}.fa-docker:before{content:"\f395"}.fa-dog:before{content:"\f6d3"}.fa-dollar-sign:before{content:"\f155"}.fa-dolly:before{content:"\f472"}.fa-dolly-flatbed:before{content:"\f474"}.fa-donate:before{content:"\f4b9"}.fa-door-closed:before{content:"\f52a"}.fa-door-open:before{content:"\f52b"}.fa-dot-circle:before{content:"\f192"}.fa-dove:before{content:"\f4ba"}.fa-download:before{content:"\f019"}.fa-draft2digital:before{content:"\f396"}.fa-drafting-compass:before{content:"\f568"}.fa-dragon:before{content:"\f6d5"}.fa-draw-polygon:before{content:"\f5ee"}.fa-dribbble:before{content:"\f17d"}.fa-dribbble-square:before{content:"\f397"}.fa-dropbox:before{content:"\f16b"}.fa-drum:before{content:"\f569"}.fa-drum-steelpan:before{content:"\f56a"}.fa-drumstick-bite:before{content:"\f6d7"}.fa-drupal:before{content:"\f1a9"}.fa-dumbbell:before{content:"\f44b"}.fa-dumpster:before{content:"\f793"}.fa-dumpster-fire:before{content:"\f794"}.fa-dungeon:before{content:"\f6d9"}.fa-dyalog:before{content:"\f399"}.fa-earlybirds:before{content:"\f39a"}.fa-ebay:before{content:"\f4f4"}.fa-edge:before{content:"\f282"}.fa-edit:before{content:"\f044"}.fa-egg:before{content:"\f7fb"}.fa-eject:before{content:"\f052"}.fa-elementor:before{content:"\f430"}.fa-ellipsis-h:before{content:"\f141"}.fa-ellipsis-v:before{content:"\f142"}.fa-ello:before{content:"\f5f1"}.fa-ember:before{content:"\f423"}.fa-empire:before{content:"\f1d1"}.fa-envelope:before{content:"\f0e0"}.fa-envelope-open:before{content:"\f2b6"}.fa-envelope-open-text:before{content:"\f658"}.fa-envelope-square:before{content:"\f199"}.fa-envira:before{content:"\f299"}.fa-equals:before{content:"\f52c"}.fa-eraser:before{content:"\f12d"}.fa-erlang:before{content:"\f39d"}.fa-ethereum:before{content:"\f42e"}.fa-ethernet:before{content:"\f796"}.fa-etsy:before{content:"\f2d7"}.fa-euro-sign:before{content:"\f153"}.fa-evernote:before{content:"\f839"}.fa-exchange-alt:before{content:"\f362"}.fa-exclamation:before{content:"\f12a"}.fa-exclamation-circle:before{content:"\f06a"}.fa-exclamation-triangle:before{content:"\f071"}.fa-expand:before{content:"\f065"}.fa-expand-alt:before{content:"\f424"}.fa-expand-arrows-alt:before{content:"\f31e"}.fa-expeditedssl:before{content:"\f23e"}.fa-external-link-alt:before{content:"\f35d"}.fa-external-link-square-alt:before{content:"\f360"}.fa-eye:before{content:"\f06e"}.fa-eye-dropper:before{content:"\f1fb"}.fa-eye-slash:before{content:"\f070"}.fa-facebook:before{content:"\f09a"}.fa-facebook-f:before{content:"\f39e"}.fa-facebook-messenger:before{content:"\f39f"}.fa-facebook-square:before{content:"\f082"}.fa-fan:before{content:"\f863"}.fa-fantasy-flight-games:before{content:"\f6dc"}.fa-fast-backward:before{content:"\f049"}.fa-fast-forward:before{content:"\f050"}.fa-fax:before{content:"\f1ac"}.fa-feather:before{content:"\f52d"}.fa-feather-alt:before{content:"\f56b"}.fa-fedex:before{content:"\f797"}.fa-fedora:before{content:"\f798"}.fa-female:before{content:"\f182"}.fa-fighter-jet:before{content:"\f0fb"}.fa-figma:before{content:"\f799"}.fa-file:before{content:"\f15b"}.fa-file-alt:before{content:"\f15c"}.fa-file-archive:before{content:"\f1c6"}.fa-file-audio:before{content:"\f1c7"}.fa-file-code:before{content:"\f1c9"}.fa-file-contract:before{content:"\f56c"}.fa-file-csv:before{content:"\f6dd"}.fa-file-download:before{content:"\f56d"}.fa-file-excel:before{content:"\f1c3"}.fa-file-export:before{content:"\f56e"}.fa-file-image:before{content:"\f1c5"}.fa-file-import:before{content:"\f56f"}.fa-file-invoice:before{content:"\f570"}.fa-file-invoice-dollar:before{content:"\f571"}.fa-file-medical:before{content:"\f477"}.fa-file-medical-alt:before{content:"\f478"}.fa-file-pdf:before{content:"\f1c1"}.fa-file-powerpoint:before{content:"\f1c4"}.fa-file-prescription:before{content:"\f572"}.fa-file-signature:before{content:"\f573"}.fa-file-upload:before{content:"\f574"}.fa-file-video:before{content:"\f1c8"}.fa-file-word:before{content:"\f1c2"}.fa-fill:before{content:"\f575"}.fa-fill-drip:before{content:"\f576"}.fa-film:before{content:"\f008"}.fa-filter:before{content:"\f0b0"}.fa-fingerprint:before{content:"\f577"}.fa-fire:before{content:"\f06d"}.fa-fire-alt:before{content:"\f7e4"}.fa-fire-extinguisher:before{content:"\f134"}.fa-firefox:before{content:"\f269"}.fa-firefox-browser:before{content:"\f907"}.fa-first-aid:before{content:"\f479"}.fa-first-order:before{content:"\f2b0"}.fa-first-order-alt:before{content:"\f50a"}.fa-firstdraft:before{content:"\f3a1"}.fa-fish:before{content:"\f578"}.fa-fist-raised:before{content:"\f6de"}.fa-flag:before{content:"\f024"}.fa-flag-checkered:before{content:"\f11e"}.fa-flag-usa:before{content:"\f74d"}.fa-flask:before{content:"\f0c3"}.fa-flickr:before{content:"\f16e"}.fa-flipboard:before{content:"\f44d"}.fa-flushed:before{content:"\f579"}.fa-fly:before{content:"\f417"}.fa-folder:before{content:"\f07b"}.fa-folder-minus:before{content:"\f65d"}.fa-folder-open:before{content:"\f07c"}.fa-folder-plus:before{content:"\f65e"}.fa-font:before{content:"\f031"}.fa-font-awesome:before{content:"\f2b4"}.fa-font-awesome-alt:before{content:"\f35c"}.fa-font-awesome-flag:before{content:"\f425"}.fa-font-awesome-logo-full:before{content:"\f4e6"}.fa-fonticons:before{content:"\f280"}.fa-fonticons-fi:before{content:"\f3a2"}.fa-football-ball:before{content:"\f44e"}.fa-fort-awesome:before{content:"\f286"}.fa-fort-awesome-alt:before{content:"\f3a3"}.fa-forumbee:before{content:"\f211"}.fa-forward:before{content:"\f04e"}.fa-foursquare:before{content:"\f180"}.fa-free-code-camp:before{content:"\f2c5"}.fa-freebsd:before{content:"\f3a4"}.fa-frog:before{content:"\f52e"}.fa-frown:before{content:"\f119"}.fa-frown-open:before{content:"\f57a"}.fa-fulcrum:before{content:"\f50b"}.fa-funnel-dollar:before{content:"\f662"}.fa-futbol:before{content:"\f1e3"}.fa-galactic-republic:before{content:"\f50c"}.fa-galactic-senate:before{content:"\f50d"}.fa-gamepad:before{content:"\f11b"}.fa-gas-pump:before{content:"\f52f"}.fa-gavel:before{content:"\f0e3"}.fa-gem:before{content:"\f3a5"}.fa-genderless:before{content:"\f22d"}.fa-get-pocket:before{content:"\f265"}.fa-gg:before{content:"\f260"}.fa-gg-circle:before{content:"\f261"}.fa-ghost:before{content:"\f6e2"}.fa-gift:before{content:"\f06b"}.fa-gifts:before{content:"\f79c"}.fa-git:before{content:"\f1d3"}.fa-git-alt:before{content:"\f841"}.fa-git-square:before{content:"\f1d2"}.fa-github:before{content:"\f09b"}.fa-github-alt:before{content:"\f113"}.fa-github-square:before{content:"\f092"}.fa-gitkraken:before{content:"\f3a6"}.fa-gitlab:before{content:"\f296"}.fa-gitter:before{content:"\f426"}.fa-glass-cheers:before{content:"\f79f"}.fa-glass-martini:before{content:"\f000"}.fa-glass-martini-alt:before{content:"\f57b"}.fa-glass-whiskey:before{content:"\f7a0"}.fa-glasses:before{content:"\f530"}.fa-glide:before{content:"\f2a5"}.fa-glide-g:before{content:"\f2a6"}.fa-globe:before{content:"\f0ac"}.fa-globe-africa:before{content:"\f57c"}.fa-globe-americas:before{content:"\f57d"}.fa-globe-asia:before{content:"\f57e"}.fa-globe-europe:before{content:"\f7a2"}.fa-gofore:before{content:"\f3a7"}.fa-golf-ball:before{content:"\f450"}.fa-goodreads:before{content:"\f3a8"}.fa-goodreads-g:before{content:"\f3a9"}.fa-google:before{content:"\f1a0"}.fa-google-drive:before{content:"\f3aa"}.fa-google-play:before{content:"\f3ab"}.fa-google-plus:before{content:"\f2b3"}.fa-google-plus-g:before{content:"\f0d5"}.fa-google-plus-square:before{content:"\f0d4"}.fa-google-wallet:before{content:"\f1ee"}.fa-gopuram:before{content:"\f664"}.fa-graduation-cap:before{content:"\f19d"}.fa-gratipay:before{content:"\f184"}.fa-grav:before{content:"\f2d6"}.fa-greater-than:before{content:"\f531"}.fa-greater-than-equal:before{content:"\f532"}.fa-grimace:before{content:"\f57f"}.fa-grin:before{content:"\f580"}.fa-grin-alt:before{content:"\f581"}.fa-grin-beam:before{content:"\f582"}.fa-grin-beam-sweat:before{content:"\f583"}.fa-grin-hearts:before{content:"\f584"}.fa-grin-squint:before{content:"\f585"}.fa-grin-squint-tears:before{content:"\f586"}.fa-grin-stars:before{content:"\f587"}.fa-grin-tears:before{content:"\f588"}.fa-grin-tongue:before{content:"\f589"}.fa-grin-tongue-squint:before{content:"\f58a"}.fa-grin-tongue-wink:before{content:"\f58b"}.fa-grin-wink:before{content:"\f58c"}.fa-grip-horizontal:before{content:"\f58d"}.fa-grip-lines:before{content:"\f7a4"}.fa-grip-lines-vertical:before{content:"\f7a5"}.fa-grip-vertical:before{content:"\f58e"}.fa-gripfire:before{content:"\f3ac"}.fa-grunt:before{content:"\f3ad"}.fa-guitar:before{content:"\f7a6"}.fa-gulp:before{content:"\f3ae"}.fa-h-square:before{content:"\f0fd"}.fa-hacker-news:before{content:"\f1d4"}.fa-hacker-news-square:before{content:"\f3af"}.fa-hackerrank:before{content:"\f5f7"}.fa-hamburger:before{content:"\f805"}.fa-hammer:before{content:"\f6e3"}.fa-hamsa:before{content:"\f665"}.fa-hand-holding:before{content:"\f4bd"}.fa-hand-holding-heart:before{content:"\f4be"}.fa-hand-holding-usd:before{content:"\f4c0"}.fa-hand-lizard:before{content:"\f258"}.fa-hand-middle-finger:before{content:"\f806"}.fa-hand-paper:before{content:"\f256"}.fa-hand-peace:before{content:"\f25b"}.fa-hand-point-down:before{content:"\f0a7"}.fa-hand-point-left:before{content:"\f0a5"}.fa-hand-point-right:before{content:"\f0a4"}.fa-hand-point-up:before{content:"\f0a6"}.fa-hand-pointer:before{content:"\f25a"}.fa-hand-rock:before{content:"\f255"}.fa-hand-scissors:before{content:"\f257"}.fa-hand-spock:before{content:"\f259"}.fa-hands:before{content:"\f4c2"}.fa-hands-helping:before{content:"\f4c4"}.fa-handshake:before{content:"\f2b5"}.fa-hanukiah:before{content:"\f6e6"}.fa-hard-hat:before{content:"\f807"}.fa-hashtag:before{content:"\f292"}.fa-hat-cowboy:before{content:"\f8c0"}.fa-hat-cowboy-side:before{content:"\f8c1"}.fa-hat-wizard:before{content:"\f6e8"}.fa-hdd:before{content:"\f0a0"}.fa-heading:before{content:"\f1dc"}.fa-headphones:before{content:"\f025"}.fa-headphones-alt:before{content:"\f58f"}.fa-headset:before{content:"\f590"}.fa-heart:before{content:"\f004"}.fa-heart-broken:before{content:"\f7a9"}.fa-heartbeat:before{content:"\f21e"}.fa-helicopter:before{content:"\f533"}.fa-highlighter:before{content:"\f591"}.fa-hiking:before{content:"\f6ec"}.fa-hippo:before{content:"\f6ed"}.fa-hips:before{content:"\f452"}.fa-hire-a-helper:before{content:"\f3b0"}.fa-history:before{content:"\f1da"}.fa-hockey-puck:before{content:"\f453"}.fa-holly-berry:before{content:"\f7aa"}.fa-home:before{content:"\f015"}.fa-hooli:before{content:"\f427"}.fa-hornbill:before{content:"\f592"}.fa-horse:before{content:"\f6f0"}.fa-horse-head:before{content:"\f7ab"}.fa-hospital:before{content:"\f0f8"}.fa-hospital-alt:before{content:"\f47d"}.fa-hospital-symbol:before{content:"\f47e"}.fa-hot-tub:before{content:"\f593"}.fa-hotdog:before{content:"\f80f"}.fa-hotel:before{content:"\f594"}.fa-hotjar:before{content:"\f3b1"}.fa-hourglass:before{content:"\f254"}.fa-hourglass-end:before{content:"\f253"}.fa-hourglass-half:before{content:"\f252"}.fa-hourglass-start:before{content:"\f251"}.fa-house-damage:before{content:"\f6f1"}.fa-houzz:before{content:"\f27c"}.fa-hryvnia:before{content:"\f6f2"}.fa-html5:before{content:"\f13b"}.fa-hubspot:before{content:"\f3b2"}.fa-i-cursor:before{content:"\f246"}.fa-ice-cream:before{content:"\f810"}.fa-icicles:before{content:"\f7ad"}.fa-icons:before{content:"\f86d"}.fa-id-badge:before{content:"\f2c1"}.fa-id-card:before{content:"\f2c2"}.fa-id-card-alt:before{content:"\f47f"}.fa-ideal:before{content:"\f913"}.fa-igloo:before{content:"\f7ae"}.fa-image:before{content:"\f03e"}.fa-images:before{content:"\f302"}.fa-imdb:before{content:"\f2d8"}.fa-inbox:before{content:"\f01c"}.fa-indent:before{content:"\f03c"}.fa-industry:before{content:"\f275"}.fa-infinity:before{content:"\f534"}.fa-info:before{content:"\f129"}.fa-info-circle:before{content:"\f05a"}.fa-instagram:before{content:"\f16d"}.fa-intercom:before{content:"\f7af"}.fa-internet-explorer:before{content:"\f26b"}.fa-invision:before{content:"\f7b0"}.fa-ioxhost:before{content:"\f208"}.fa-italic:before{content:"\f033"}.fa-itch-io:before{content:"\f83a"}.fa-itunes:before{content:"\f3b4"}.fa-itunes-note:before{content:"\f3b5"}.fa-java:before{content:"\f4e4"}.fa-jedi:before{content:"\f669"}.fa-jedi-order:before{content:"\f50e"}.fa-jenkins:before{content:"\f3b6"}.fa-jira:before{content:"\f7b1"}.fa-joget:before{content:"\f3b7"}.fa-joint:before{content:"\f595"}.fa-joomla:before{content:"\f1aa"}.fa-journal-whills:before{content:"\f66a"}.fa-js:before{content:"\f3b8"}.fa-js-square:before{content:"\f3b9"}.fa-jsfiddle:before{content:"\f1cc"}.fa-kaaba:before{content:"\f66b"}.fa-kaggle:before{content:"\f5fa"}.fa-key:before{content:"\f084"}.fa-keybase:before{content:"\f4f5"}.fa-keyboard:before{content:"\f11c"}.fa-keycdn:before{content:"\f3ba"}.fa-khanda:before{content:"\f66d"}.fa-kickstarter:before{content:"\f3bb"}.fa-kickstarter-k:before{content:"\f3bc"}.fa-kiss:before{content:"\f596"}.fa-kiss-beam:before{content:"\f597"}.fa-kiss-wink-heart:before{content:"\f598"}.fa-kiwi-bird:before{content:"\f535"}.fa-korvue:before{content:"\f42f"}.fa-landmark:before{content:"\f66f"}.fa-language:before{content:"\f1ab"}.fa-laptop:before{content:"\f109"}.fa-laptop-code:before{content:"\f5fc"}.fa-laptop-medical:before{content:"\f812"}.fa-laravel:before{content:"\f3bd"}.fa-lastfm:before{content:"\f202"}.fa-lastfm-square:before{content:"\f203"}.fa-laugh:before{content:"\f599"}.fa-laugh-beam:before{content:"\f59a"}.fa-laugh-squint:before{content:"\f59b"}.fa-laugh-wink:before{content:"\f59c"}.fa-layer-group:before{content:"\f5fd"}.fa-leaf:before{content:"\f06c"}.fa-leanpub:before{content:"\f212"}.fa-lemon:before{content:"\f094"}.fa-less:before{content:"\f41d"}.fa-less-than:before{content:"\f536"}.fa-less-than-equal:before{content:"\f537"}.fa-level-down-alt:before{content:"\f3be"}.fa-level-up-alt:before{content:"\f3bf"}.fa-life-ring:before{content:"\f1cd"}.fa-lightbulb:before{content:"\f0eb"}.fa-line:before{content:"\f3c0"}.fa-link:before{content:"\f0c1"}.fa-linkedin:before{content:"\f08c"}.fa-linkedin-in:before{content:"\f0e1"}.fa-linode:before{content:"\f2b8"}.fa-linux:before{content:"\f17c"}.fa-lira-sign:before{content:"\f195"}.fa-list:before{content:"\f03a"}.fa-list-alt:before{content:"\f022"}.fa-list-ol:before{content:"\f0cb"}.fa-list-ul:before{content:"\f0ca"}.fa-location-arrow:before{content:"\f124"}.fa-lock:before{content:"\f023"}.fa-lock-open:before{content:"\f3c1"}.fa-long-arrow-alt-down:before{content:"\f309"}.fa-long-arrow-alt-left:before{content:"\f30a"}.fa-long-arrow-alt-right:before{content:"\f30b"}.fa-long-arrow-alt-up:before{content:"\f30c"}.fa-low-vision:before{content:"\f2a8"}.fa-luggage-cart:before{content:"\f59d"}.fa-lyft:before{content:"\f3c3"}.fa-magento:before{content:"\f3c4"}.fa-magic:before{content:"\f0d0"}.fa-magnet:before{content:"\f076"}.fa-mail-bulk:before{content:"\f674"}.fa-mailchimp:before{content:"\f59e"}.fa-male:before{content:"\f183"}.fa-mandalorian:before{content:"\f50f"}.fa-map:before{content:"\f279"}.fa-map-marked:before{content:"\f59f"}.fa-map-marked-alt:before{content:"\f5a0"}.fa-map-marker:before{content:"\f041"}.fa-map-marker-alt:before{content:"\f3c5"}.fa-map-pin:before{content:"\f276"}.fa-map-signs:before{content:"\f277"}.fa-markdown:before{content:"\f60f"}.fa-marker:before{content:"\f5a1"}.fa-mars:before{content:"\f222"}.fa-mars-double:before{content:"\f227"}.fa-mars-stroke:before{content:"\f229"}.fa-mars-stroke-h:before{content:"\f22b"}.fa-mars-stroke-v:before{content:"\f22a"}.fa-mask:before{content:"\f6fa"}.fa-mastodon:before{content:"\f4f6"}.fa-maxcdn:before{content:"\f136"}.fa-mdb:before{content:"\f8ca"}.fa-medal:before{content:"\f5a2"}.fa-medapps:before{content:"\f3c6"}.fa-medium:before{content:"\f23a"}.fa-medium-m:before{content:"\f3c7"}.fa-medkit:before{content:"\f0fa"}.fa-medrt:before{content:"\f3c8"}.fa-meetup:before{content:"\f2e0"}.fa-megaport:before{content:"\f5a3"}.fa-meh:before{content:"\f11a"}.fa-meh-blank:before{content:"\f5a4"}.fa-meh-rolling-eyes:before{content:"\f5a5"}.fa-memory:before{content:"\f538"}.fa-mendeley:before{content:"\f7b3"}.fa-menorah:before{content:"\f676"}.fa-mercury:before{content:"\f223"}.fa-meteor:before{content:"\f753"}.fa-microblog:before{content:"\f91a"}.fa-microchip:before{content:"\f2db"}.fa-microphone:before{content:"\f130"}.fa-microphone-alt:before{content:"\f3c9"}.fa-microphone-alt-slash:before{content:"\f539"}.fa-microphone-slash:before{content:"\f131"}.fa-microscope:before{content:"\f610"}.fa-microsoft:before{content:"\f3ca"}.fa-minus:before{content:"\f068"}.fa-minus-circle:before{content:"\f056"}.fa-minus-square:before{content:"\f146"}.fa-mitten:before{content:"\f7b5"}.fa-mix:before{content:"\f3cb"}.fa-mixcloud:before{content:"\f289"}.fa-mizuni:before{content:"\f3cc"}.fa-mobile:before{content:"\f10b"}.fa-mobile-alt:before{content:"\f3cd"}.fa-modx:before{content:"\f285"}.fa-monero:before{content:"\f3d0"}.fa-money-bill:before{content:"\f0d6"}.fa-money-bill-alt:before{content:"\f3d1"}.fa-money-bill-wave:before{content:"\f53a"}.fa-money-bill-wave-alt:before{content:"\f53b"}.fa-money-check:before{content:"\f53c"}.fa-money-check-alt:before{content:"\f53d"}.fa-monument:before{content:"\f5a6"}.fa-moon:before{content:"\f186"}.fa-mortar-pestle:before{content:"\f5a7"}.fa-mosque:before{content:"\f678"}.fa-motorcycle:before{content:"\f21c"}.fa-mountain:before{content:"\f6fc"}.fa-mouse:before{content:"\f8cc"}.fa-mouse-pointer:before{content:"\f245"}.fa-mug-hot:before{content:"\f7b6"}.fa-music:before{content:"\f001"}.fa-napster:before{content:"\f3d2"}.fa-neos:before{content:"\f612"}.fa-network-wired:before{content:"\f6ff"}.fa-neuter:before{content:"\f22c"}.fa-newspaper:before{content:"\f1ea"}.fa-nimblr:before{content:"\f5a8"}.fa-node:before{content:"\f419"}.fa-node-js:before{content:"\f3d3"}.fa-not-equal:before{content:"\f53e"}.fa-notes-medical:before{content:"\f481"}.fa-npm:before{content:"\f3d4"}.fa-ns8:before{content:"\f3d5"}.fa-nutritionix:before{content:"\f3d6"}.fa-object-group:before{content:"\f247"}.fa-object-ungroup:before{content:"\f248"}.fa-odnoklassniki:before{content:"\f263"}.fa-odnoklassniki-square:before{content:"\f264"}.fa-oil-can:before{content:"\f613"}.fa-old-republic:before{content:"\f510"}.fa-om:before{content:"\f679"}.fa-opencart:before{content:"\f23d"}.fa-openid:before{content:"\f19b"}.fa-opera:before{content:"\f26a"}.fa-optin-monster:before{content:"\f23c"}.fa-orcid:before{content:"\f8d2"}.fa-osi:before{content:"\f41a"}.fa-otter:before{content:"\f700"}.fa-outdent:before{content:"\f03b"}.fa-page4:before{content:"\f3d7"}.fa-pagelines:before{content:"\f18c"}.fa-pager:before{content:"\f815"}.fa-paint-brush:before{content:"\f1fc"}.fa-paint-roller:before{content:"\f5aa"}.fa-palette:before{content:"\f53f"}.fa-palfed:before{content:"\f3d8"}.fa-pallet:before{content:"\f482"}.fa-paper-plane:before{content:"\f1d8"}.fa-paperclip:before{content:"\f0c6"}.fa-parachute-box:before{content:"\f4cd"}.fa-paragraph:before{content:"\f1dd"}.fa-parking:before{content:"\f540"}.fa-passport:before{content:"\f5ab"}.fa-pastafarianism:before{content:"\f67b"}.fa-paste:before{content:"\f0ea"}.fa-patreon:before{content:"\f3d9"}.fa-pause:before{content:"\f04c"}.fa-pause-circle:before{content:"\f28b"}.fa-paw:before{content:"\f1b0"}.fa-paypal:before{content:"\f1ed"}.fa-peace:before{content:"\f67c"}.fa-pen:before{content:"\f304"}.fa-pen-alt:before{content:"\f305"}.fa-pen-fancy:before{content:"\f5ac"}.fa-pen-nib:before{content:"\f5ad"}.fa-pen-square:before{content:"\f14b"}.fa-pencil-alt:before{content:"\f303"}.fa-pencil-ruler:before{content:"\f5ae"}.fa-penny-arcade:before{content:"\f704"}.fa-people-carry:before{content:"\f4ce"}.fa-pepper-hot:before{content:"\f816"}.fa-percent:before{content:"\f295"}.fa-percentage:before{content:"\f541"}.fa-periscope:before{content:"\f3da"}.fa-person-booth:before{content:"\f756"}.fa-phabricator:before{content:"\f3db"}.fa-phoenix-framework:before{content:"\f3dc"}.fa-phoenix-squadron:before{content:"\f511"}.fa-phone:before{content:"\f095"}.fa-phone-alt:before{content:"\f879"}.fa-phone-slash:before{content:"\f3dd"}.fa-phone-square:before{content:"\f098"}.fa-phone-square-alt:before{content:"\f87b"}.fa-phone-volume:before{content:"\f2a0"}.fa-photo-video:before{content:"\f87c"}.fa-php:before{content:"\f457"}.fa-pied-piper:before{content:"\f2ae"}.fa-pied-piper-alt:before{content:"\f1a8"}.fa-pied-piper-hat:before{content:"\f4e5"}.fa-pied-piper-pp:before{content:"\f1a7"}.fa-pied-piper-square:before{content:"\f91e"}.fa-piggy-bank:before{content:"\f4d3"}.fa-pills:before{content:"\f484"}.fa-pinterest:before{content:"\f0d2"}.fa-pinterest-p:before{content:"\f231"}.fa-pinterest-square:before{content:"\f0d3"}.fa-pizza-slice:before{content:"\f818"}.fa-place-of-worship:before{content:"\f67f"}.fa-plane:before{content:"\f072"}.fa-plane-arrival:before{content:"\f5af"}.fa-plane-departure:before{content:"\f5b0"}.fa-play:before{content:"\f04b"}.fa-play-circle:before{content:"\f144"}.fa-playstation:before{content:"\f3df"}.fa-plug:before{content:"\f1e6"}.fa-plus:before{content:"\f067"}.fa-plus-circle:before{content:"\f055"}.fa-plus-square:before{content:"\f0fe"}.fa-podcast:before{content:"\f2ce"}.fa-poll:before{content:"\f681"}.fa-poll-h:before{content:"\f682"}.fa-poo:before{content:"\f2fe"}.fa-poo-storm:before{content:"\f75a"}.fa-poop:before{content:"\f619"}.fa-portrait:before{content:"\f3e0"}.fa-pound-sign:before{content:"\f154"}.fa-power-off:before{content:"\f011"}.fa-pray:before{content:"\f683"}.fa-praying-hands:before{content:"\f684"}.fa-prescription:before{content:"\f5b1"}.fa-prescription-bottle:before{content:"\f485"}.fa-prescription-bottle-alt:before{content:"\f486"}.fa-print:before{content:"\f02f"}.fa-procedures:before{content:"\f487"}.fa-product-hunt:before{content:"\f288"}.fa-project-diagram:before{content:"\f542"}.fa-pushed:before{content:"\f3e1"}.fa-puzzle-piece:before{content:"\f12e"}.fa-python:before{content:"\f3e2"}.fa-qq:before{content:"\f1d6"}.fa-qrcode:before{content:"\f029"}.fa-question:before{content:"\f128"}.fa-question-circle:before{content:"\f059"}.fa-quidditch:before{content:"\f458"}.fa-quinscape:before{content:"\f459"}.fa-quora:before{content:"\f2c4"}.fa-quote-left:before{content:"\f10d"}.fa-quote-right:before{content:"\f10e"}.fa-quran:before{content:"\f687"}.fa-r-project:before{content:"\f4f7"}.fa-radiation:before{content:"\f7b9"}.fa-radiation-alt:before{content:"\f7ba"}.fa-rainbow:before{content:"\f75b"}.fa-random:before{content:"\f074"}.fa-raspberry-pi:before{content:"\f7bb"}.fa-ravelry:before{content:"\f2d9"}.fa-react:before{content:"\f41b"}.fa-reacteurope:before{content:"\f75d"}.fa-readme:before{content:"\f4d5"}.fa-rebel:before{content:"\f1d0"}.fa-receipt:before{content:"\f543"}.fa-record-vinyl:before{content:"\f8d9"}.fa-recycle:before{content:"\f1b8"}.fa-red-river:before{content:"\f3e3"}.fa-reddit:before{content:"\f1a1"}.fa-reddit-alien:before{content:"\f281"}.fa-reddit-square:before{content:"\f1a2"}.fa-redhat:before{content:"\f7bc"}.fa-redo:before{content:"\f01e"}.fa-redo-alt:before{content:"\f2f9"}.fa-registered:before{content:"\f25d"}.fa-remove-format:before{content:"\f87d"}.fa-renren:before{content:"\f18b"}.fa-reply:before{content:"\f3e5"}.fa-reply-all:before{content:"\f122"}.fa-replyd:before{content:"\f3e6"}.fa-republican:before{content:"\f75e"}.fa-researchgate:before{content:"\f4f8"}.fa-resolving:before{content:"\f3e7"}.fa-restroom:before{content:"\f7bd"}.fa-retweet:before{content:"\f079"}.fa-rev:before{content:"\f5b2"}.fa-ribbon:before{content:"\f4d6"}.fa-ring:before{content:"\f70b"}.fa-road:before{content:"\f018"}.fa-robot:before{content:"\f544"}.fa-rocket:before{content:"\f135"}.fa-rocketchat:before{content:"\f3e8"}.fa-rockrms:before{content:"\f3e9"}.fa-route:before{content:"\f4d7"}.fa-rss:before{content:"\f09e"}.fa-rss-square:before{content:"\f143"}.fa-ruble-sign:before{content:"\f158"}.fa-ruler:before{content:"\f545"}.fa-ruler-combined:before{content:"\f546"}.fa-ruler-horizontal:before{content:"\f547"}.fa-ruler-vertical:before{content:"\f548"}.fa-running:before{content:"\f70c"}.fa-rupee-sign:before{content:"\f156"}.fa-sad-cry:before{content:"\f5b3"}.fa-sad-tear:before{content:"\f5b4"}.fa-safari:before{content:"\f267"}.fa-salesforce:before{content:"\f83b"}.fa-sass:before{content:"\f41e"}.fa-satellite:before{content:"\f7bf"}.fa-satellite-dish:before{content:"\f7c0"}.fa-save:before{content:"\f0c7"}.fa-schlix:before{content:"\f3ea"}.fa-school:before{content:"\f549"}.fa-screwdriver:before{content:"\f54a"}.fa-scribd:before{content:"\f28a"}.fa-scroll:before{content:"\f70e"}.fa-sd-card:before{content:"\f7c2"}.fa-search:before{content:"\f002"}.fa-search-dollar:before{content:"\f688"}.fa-search-location:before{content:"\f689"}.fa-search-minus:before{content:"\f010"}.fa-search-plus:before{content:"\f00e"}.fa-searchengin:before{content:"\f3eb"}.fa-seedling:before{content:"\f4d8"}.fa-sellcast:before{content:"\f2da"}.fa-sellsy:before{content:"\f213"}.fa-server:before{content:"\f233"}.fa-servicestack:before{content:"\f3ec"}.fa-shapes:before{content:"\f61f"}.fa-share:before{content:"\f064"}.fa-share-alt:before{content:"\f1e0"}.fa-share-alt-square:before{content:"\f1e1"}.fa-share-square:before{content:"\f14d"}.fa-shekel-sign:before{content:"\f20b"}.fa-shield-alt:before{content:"\f3ed"}.fa-ship:before{content:"\f21a"}.fa-shipping-fast:before{content:"\f48b"}.fa-shirtsinbulk:before{content:"\f214"}.fa-shoe-prints:before{content:"\f54b"}.fa-shopping-bag:before{content:"\f290"}.fa-shopping-basket:before{content:"\f291"}.fa-shopping-cart:before{content:"\f07a"}.fa-shopware:before{content:"\f5b5"}.fa-shower:before{content:"\f2cc"}.fa-shuttle-van:before{content:"\f5b6"}.fa-sign:before{content:"\f4d9"}.fa-sign-in-alt:before{content:"\f2f6"}.fa-sign-language:before{content:"\f2a7"}.fa-sign-out-alt:before{content:"\f2f5"}.fa-signal:before{content:"\f012"}.fa-signature:before{content:"\f5b7"}.fa-sim-card:before{content:"\f7c4"}.fa-simplybuilt:before{content:"\f215"}.fa-sistrix:before{content:"\f3ee"}.fa-sitemap:before{content:"\f0e8"}.fa-sith:before{content:"\f512"}.fa-skating:before{content:"\f7c5"}.fa-sketch:before{content:"\f7c6"}.fa-skiing:before{content:"\f7c9"}.fa-skiing-nordic:before{content:"\f7ca"}.fa-skull:before{content:"\f54c"}.fa-skull-crossbones:before{content:"\f714"}.fa-skyatlas:before{content:"\f216"}.fa-skype:before{content:"\f17e"}.fa-slack:before{content:"\f198"}.fa-slack-hash:before{content:"\f3ef"}.fa-slash:before{content:"\f715"}.fa-sleigh:before{content:"\f7cc"}.fa-sliders-h:before{content:"\f1de"}.fa-slideshare:before{content:"\f1e7"}.fa-smile:before{content:"\f118"}.fa-smile-beam:before{content:"\f5b8"}.fa-smile-wink:before{content:"\f4da"}.fa-smog:before{content:"\f75f"}.fa-smoking:before{content:"\f48d"}.fa-smoking-ban:before{content:"\f54d"}.fa-sms:before{content:"\f7cd"}.fa-snapchat:before{content:"\f2ab"}.fa-snapchat-ghost:before{content:"\f2ac"}.fa-snapchat-square:before{content:"\f2ad"}.fa-snowboarding:before{content:"\f7ce"}.fa-snowflake:before{content:"\f2dc"}.fa-snowman:before{content:"\f7d0"}.fa-snowplow:before{content:"\f7d2"}.fa-socks:before{content:"\f696"}.fa-solar-panel:before{content:"\f5ba"}.fa-sort:before{content:"\f0dc"}.fa-sort-alpha-down:before{content:"\f15d"}.fa-sort-alpha-down-alt:before{content:"\f881"}.fa-sort-alpha-up:before{content:"\f15e"}.fa-sort-alpha-up-alt:before{content:"\f882"}.fa-sort-amount-down:before{content:"\f160"}.fa-sort-amount-down-alt:before{content:"\f884"}.fa-sort-amount-up:before{content:"\f161"}.fa-sort-amount-up-alt:before{content:"\f885"}.fa-sort-down:before{content:"\f0dd"}.fa-sort-numeric-down:before{content:"\f162"}.fa-sort-numeric-down-alt:before{content:"\f886"}.fa-sort-numeric-up:before{content:"\f163"}.fa-sort-numeric-up-alt:before{content:"\f887"}.fa-sort-up:before{content:"\f0de"}.fa-soundcloud:before{content:"\f1be"}.fa-sourcetree:before{content:"\f7d3"}.fa-spa:before{content:"\f5bb"}.fa-space-shuttle:before{content:"\f197"}.fa-speakap:before{content:"\f3f3"}.fa-speaker-deck:before{content:"\f83c"}.fa-spell-check:before{content:"\f891"}.fa-spider:before{content:"\f717"}.fa-spinner:before{content:"\f110"}.fa-splotch:before{content:"\f5bc"}.fa-spotify:before{content:"\f1bc"}.fa-spray-can:before{content:"\f5bd"}.fa-square:before{content:"\f0c8"}.fa-square-full:before{content:"\f45c"}.fa-square-root-alt:before{content:"\f698"}.fa-squarespace:before{content:"\f5be"}.fa-stack-exchange:before{content:"\f18d"}.fa-stack-overflow:before{content:"\f16c"}.fa-stackpath:before{content:"\f842"}.fa-stamp:before{content:"\f5bf"}.fa-star:before{content:"\f005"}.fa-star-and-crescent:before{content:"\f699"}.fa-star-half:before{content:"\f089"}.fa-star-half-alt:before{content:"\f5c0"}.fa-star-of-david:before{content:"\f69a"}.fa-star-of-life:before{content:"\f621"}.fa-staylinked:before{content:"\f3f5"}.fa-steam:before{content:"\f1b6"}.fa-steam-square:before{content:"\f1b7"}.fa-steam-symbol:before{content:"\f3f6"}.fa-step-backward:before{content:"\f048"}.fa-step-forward:before{content:"\f051"}.fa-stethoscope:before{content:"\f0f1"}.fa-sticker-mule:before{content:"\f3f7"}.fa-sticky-note:before{content:"\f249"}.fa-stop:before{content:"\f04d"}.fa-stop-circle:before{content:"\f28d"}.fa-stopwatch:before{content:"\f2f2"}.fa-store:before{content:"\f54e"}.fa-store-alt:before{content:"\f54f"}.fa-strava:before{content:"\f428"}.fa-stream:before{content:"\f550"}.fa-street-view:before{content:"\f21d"}.fa-strikethrough:before{content:"\f0cc"}.fa-stripe:before{content:"\f429"}.fa-stripe-s:before{content:"\f42a"}.fa-stroopwafel:before{content:"\f551"}.fa-studiovinari:before{content:"\f3f8"}.fa-stumbleupon:before{content:"\f1a4"}.fa-stumbleupon-circle:before{content:"\f1a3"}.fa-subscript:before{content:"\f12c"}.fa-subway:before{content:"\f239"}.fa-suitcase:before{content:"\f0f2"}.fa-suitcase-rolling:before{content:"\f5c1"}.fa-sun:before{content:"\f185"}.fa-superpowers:before{content:"\f2dd"}.fa-superscript:before{content:"\f12b"}.fa-supple:before{content:"\f3f9"}.fa-surprise:before{content:"\f5c2"}.fa-suse:before{content:"\f7d6"}.fa-swatchbook:before{content:"\f5c3"}.fa-swift:before{content:"\f8e1"}.fa-swimmer:before{content:"\f5c4"}.fa-swimming-pool:before{content:"\f5c5"}.fa-symfony:before{content:"\f83d"}.fa-synagogue:before{content:"\f69b"}.fa-sync:before{content:"\f021"}.fa-sync-alt:before{content:"\f2f1"}.fa-syringe:before{content:"\f48e"}.fa-table:before{content:"\f0ce"}.fa-table-tennis:before{content:"\f45d"}.fa-tablet:before{content:"\f10a"}.fa-tablet-alt:before{content:"\f3fa"}.fa-tablets:before{content:"\f490"}.fa-tachometer-alt:before{content:"\f3fd"}.fa-tag:before{content:"\f02b"}.fa-tags:before{content:"\f02c"}.fa-tape:before{content:"\f4db"}.fa-tasks:before{content:"\f0ae"}.fa-taxi:before{content:"\f1ba"}.fa-teamspeak:before{content:"\f4f9"}.fa-teeth:before{content:"\f62e"}.fa-teeth-open:before{content:"\f62f"}.fa-telegram:before{content:"\f2c6"}.fa-telegram-plane:before{content:"\f3fe"}.fa-temperature-high:before{content:"\f769"}.fa-temperature-low:before{content:"\f76b"}.fa-tencent-weibo:before{content:"\f1d5"}.fa-tenge:before{content:"\f7d7"}.fa-terminal:before{content:"\f120"}.fa-text-height:before{content:"\f034"}.fa-text-width:before{content:"\f035"}.fa-th:before{content:"\f00a"}.fa-th-large:before{content:"\f009"}.fa-th-list:before{content:"\f00b"}.fa-the-red-yeti:before{content:"\f69d"}.fa-theater-masks:before{content:"\f630"}.fa-themeco:before{content:"\f5c6"}.fa-themeisle:before{content:"\f2b2"}.fa-thermometer:before{content:"\f491"}.fa-thermometer-empty:before{content:"\f2cb"}.fa-thermometer-full:before{content:"\f2c7"}.fa-thermometer-half:before{content:"\f2c9"}.fa-thermometer-quarter:before{content:"\f2ca"}.fa-thermometer-three-quarters:before{content:"\f2c8"}.fa-think-peaks:before{content:"\f731"}.fa-thumbs-down:before{content:"\f165"}.fa-thumbs-up:before{content:"\f164"}.fa-thumbtack:before{content:"\f08d"}.fa-ticket-alt:before{content:"\f3ff"}.fa-times:before{content:"\f00d"}.fa-times-circle:before{content:"\f057"}.fa-tint:before{content:"\f043"}.fa-tint-slash:before{content:"\f5c7"}.fa-tired:before{content:"\f5c8"}.fa-toggle-off:before{content:"\f204"}.fa-toggle-on:before{content:"\f205"}.fa-toilet:before{content:"\f7d8"}.fa-toilet-paper:before{content:"\f71e"}.fa-toolbox:before{content:"\f552"}.fa-tools:before{content:"\f7d9"}.fa-tooth:before{content:"\f5c9"}.fa-torah:before{content:"\f6a0"}.fa-torii-gate:before{content:"\f6a1"}.fa-tractor:before{content:"\f722"}.fa-trade-federation:before{content:"\f513"}.fa-trademark:before{content:"\f25c"}.fa-traffic-light:before{content:"\f637"}.fa-trailer:before{content:"\f941"}.fa-train:before{content:"\f238"}.fa-tram:before{content:"\f7da"}.fa-transgender:before{content:"\f224"}.fa-transgender-alt:before{content:"\f225"}.fa-trash:before{content:"\f1f8"}.fa-trash-alt:before{content:"\f2ed"}.fa-trash-restore:before{content:"\f829"}.fa-trash-restore-alt:before{content:"\f82a"}.fa-tree:before{content:"\f1bb"}.fa-trello:before{content:"\f181"}.fa-tripadvisor:before{content:"\f262"}.fa-trophy:before{content:"\f091"}.fa-truck:before{content:"\f0d1"}.fa-truck-loading:before{content:"\f4de"}.fa-truck-monster:before{content:"\f63b"}.fa-truck-moving:before{content:"\f4df"}.fa-truck-pickup:before{content:"\f63c"}.fa-tshirt:before{content:"\f553"}.fa-tty:before{content:"\f1e4"}.fa-tumblr:before{content:"\f173"}.fa-tumblr-square:before{content:"\f174"}.fa-tv:before{content:"\f26c"}.fa-twitch:before{content:"\f1e8"}.fa-twitter:before{content:"\f099"}.fa-twitter-square:before{content:"\f081"}.fa-typo3:before{content:"\f42b"}.fa-uber:before{content:"\f402"}.fa-ubuntu:before{content:"\f7df"}.fa-uikit:before{content:"\f403"}.fa-umbraco:before{content:"\f8e8"}.fa-umbrella:before{content:"\f0e9"}.fa-umbrella-beach:before{content:"\f5ca"}.fa-underline:before{content:"\f0cd"}.fa-undo:before{content:"\f0e2"}.fa-undo-alt:before{content:"\f2ea"}.fa-uniregistry:before{content:"\f404"}.fa-unity:before{content:"\f949"}.fa-universal-access:before{content:"\f29a"}.fa-university:before{content:"\f19c"}.fa-unlink:before{content:"\f127"}.fa-unlock:before{content:"\f09c"}.fa-unlock-alt:before{content:"\f13e"}.fa-untappd:before{content:"\f405"}.fa-upload:before{content:"\f093"}.fa-ups:before{content:"\f7e0"}.fa-usb:before{content:"\f287"}.fa-user:before{content:"\f007"}.fa-user-alt:before{content:"\f406"}.fa-user-alt-slash:before{content:"\f4fa"}.fa-user-astronaut:before{content:"\f4fb"}.fa-user-check:before{content:"\f4fc"}.fa-user-circle:before{content:"\f2bd"}.fa-user-clock:before{content:"\f4fd"}.fa-user-cog:before{content:"\f4fe"}.fa-user-edit:before{content:"\f4ff"}.fa-user-friends:before{content:"\f500"}.fa-user-graduate:before{content:"\f501"}.fa-user-injured:before{content:"\f728"}.fa-user-lock:before{content:"\f502"}.fa-user-md:before{content:"\f0f0"}.fa-user-minus:before{content:"\f503"}.fa-user-ninja:before{content:"\f504"}.fa-user-nurse:before{content:"\f82f"}.fa-user-plus:before{content:"\f234"}.fa-user-secret:before{content:"\f21b"}.fa-user-shield:before{content:"\f505"}.fa-user-slash:before{content:"\f506"}.fa-user-tag:before{content:"\f507"}.fa-user-tie:before{content:"\f508"}.fa-user-times:before{content:"\f235"}.fa-users:before{content:"\f0c0"}.fa-users-cog:before{content:"\f509"}.fa-usps:before{content:"\f7e1"}.fa-ussunnah:before{content:"\f407"}.fa-utensil-spoon:before{content:"\f2e5"}.fa-utensils:before{content:"\f2e7"}.fa-vaadin:before{content:"\f408"}.fa-vector-square:before{content:"\f5cb"}.fa-venus:before{content:"\f221"}.fa-venus-double:before{content:"\f226"}.fa-venus-mars:before{content:"\f228"}.fa-viacoin:before{content:"\f237"}.fa-viadeo:before{content:"\f2a9"}.fa-viadeo-square:before{content:"\f2aa"}.fa-vial:before{content:"\f492"}.fa-vials:before{content:"\f493"}.fa-viber:before{content:"\f409"}.fa-video:before{content:"\f03d"}.fa-video-slash:before{content:"\f4e2"}.fa-vihara:before{content:"\f6a7"}.fa-vimeo:before{content:"\f40a"}.fa-vimeo-square:before{content:"\f194"}.fa-vimeo-v:before{content:"\f27d"}.fa-vine:before{content:"\f1ca"}.fa-vk:before{content:"\f189"}.fa-vnv:before{content:"\f40b"}.fa-voicemail:before{content:"\f897"}.fa-volleyball-ball:before{content:"\f45f"}.fa-volume-down:before{content:"\f027"}.fa-volume-mute:before{content:"\f6a9"}.fa-volume-off:before{content:"\f026"}.fa-volume-up:before{content:"\f028"}.fa-vote-yea:before{content:"\f772"}.fa-vr-cardboard:before{content:"\f729"}.fa-vuejs:before{content:"\f41f"}.fa-walking:before{content:"\f554"}.fa-wallet:before{content:"\f555"}.fa-warehouse:before{content:"\f494"}.fa-water:before{content:"\f773"}.fa-wave-square:before{content:"\f83e"}.fa-waze:before{content:"\f83f"}.fa-weebly:before{content:"\f5cc"}.fa-weibo:before{content:"\f18a"}.fa-weight:before{content:"\f496"}.fa-weight-hanging:before{content:"\f5cd"}.fa-weixin:before{content:"\f1d7"}.fa-whatsapp:before{content:"\f232"}.fa-whatsapp-square:before{content:"\f40c"}.fa-wheelchair:before{content:"\f193"}.fa-whmcs:before{content:"\f40d"}.fa-wifi:before{content:"\f1eb"}.fa-wikipedia-w:before{content:"\f266"}.fa-wind:before{content:"\f72e"}.fa-window-close:before{content:"\f410"}.fa-window-maximize:before{content:"\f2d0"}.fa-window-minimize:before{content:"\f2d1"}.fa-window-restore:before{content:"\f2d2"}.fa-windows:before{content:"\f17a"}.fa-wine-bottle:before{content:"\f72f"}.fa-wine-glass:before{content:"\f4e3"}.fa-wine-glass-alt:before{content:"\f5ce"}.fa-wix:before{content:"\f5cf"}.fa-wizards-of-the-coast:before{content:"\f730"}.fa-wolf-pack-battalion:before{content:"\f514"}.fa-won-sign:before{content:"\f159"}.fa-wordpress:before{content:"\f19a"}.fa-wordpress-simple:before{content:"\f411"}.fa-wpbeginner:before{content:"\f297"}.fa-wpexplorer:before{content:"\f2de"}.fa-wpforms:before{content:"\f298"}.fa-wpressr:before{content:"\f3e4"}.fa-wrench:before{content:"\f0ad"}.fa-x-ray:before{content:"\f497"}.fa-xbox:before{content:"\f412"}.fa-xing:before{content:"\f168"}.fa-xing-square:before{content:"\f169"}.fa-y-combinator:before{content:"\f23b"}.fa-yahoo:before{content:"\f19e"}.fa-yammer:before{content:"\f840"}.fa-yandex:before{content:"\f413"}.fa-yandex-international:before{content:"\f414"}.fa-yarn:before{content:"\f7e3"}.fa-yelp:before{content:"\f1e9"}.fa-yen-sign:before{content:"\f157"}.fa-yin-yang:before{content:"\f6ad"}.fa-yoast:before{content:"\f2b1"}.fa-youtube:before{content:"\f167"}.fa-youtube-square:before{content:"\f431"}.fa-zhihu:before{content:"\f63f"}.sr-only{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.sr-only-focusable:active,.sr-only-focusable:focus{clip:auto;height:auto;margin:0;overflow:visible;position:static;width:auto}.moduleProperty input{color:#fff}.side{width:330px;max-width:500px;min-width:200px;overflow-x:hidden;overflow-y:scroll}.report-sidebar a{border-radius:30px 5px 5px 30px;color:#fff;font-size:13px;padding:15px;position:absolute;right:-111px;text-decoration:none;top:90%;transition:.3s;width:150px;z-index:999}.report-sidebar a:hover{right:0}
\ No newline at end of file
+* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)*/@font-face{font-family:'font awesome 5 free';font-style:normal;font-weight:900;font-display:auto;src:url(/assets/font-awesome/fa-solid-900-f29eef66eb3ad0e3574d8edb4b9e72a04692a0b2b92d99eb7c4b977611ddd4fe.eot);src:url(/assets/font-awesome/fa-solid-900-f29eef66eb3ad0e3574d8edb4b9e72a04692a0b2b92d99eb7c4b977611ddd4fe.eot#iefix) format("embedded-opentype"),url(/assets/font-awesome/fa-solid-900-787d76ad6deab67ccf8bac1b584260205e114f508fc5542b612e3f75d49a34e4.woff2) format("woff2"),url(/assets/font-awesome/fa-solid-900-3b60c77e0c81c1c9cdc9adb96ade6dbac7ef2b9402a316185855de7122e517db.woff) format("woff"),url(/assets/font-awesome/fa-solid-900-0389b061db08d406704c9bb8819e09c3558ac956287b3e9da8e6645a79d528ea.ttf) format("truetype"),url(/assets/font-awesome/fa-solid-900-eaf0f3d0cadad17eed1045cf68c30db7abffb4c8ef4ee9cb5f4026fdefc99a59.svg#fontawesome) format("svg")}@font-face{font-family:'font awesome 5 free';font-style:normal;font-weight:400;font-display:auto;src:url(/assets/font-awesome/fa-regular-400-c1465a6b8743622f759b08a6d5336e57eb6eabdba1b6393fba6d30d45382f3d2.eot);src:url(/assets/font-awesome/fa-regular-400-c1465a6b8743622f759b08a6d5336e57eb6eabdba1b6393fba6d30d45382f3d2.eot#iefix) format("embedded-opentype"),url(/assets/font-awesome/fa-regular-400-86e496b536b26ba60cdb68df9dd9143b19a63b65e30e373b0321833aab1295d6.woff2) format("woff2"),url(/assets/font-awesome/fa-regular-400-864c8f702a5e63198bb76ef0240b599cc065d4904c2afc5da6c8a29bbf0d6c64.woff) format("woff"),url(/assets/font-awesome/fa-regular-400-6a335d1ce152f2b5b02bf82cc445b02d1abccd7f408a87113424b5f8fcbbfade.ttf) format("truetype"),url(/assets/font-awesome/fa-regular-400-7ab8a39f4c48b743bd6acbbf5ea4c7547efcb62ad966e9bef3e41996afc44fd4.svg#fontawesome) format("svg")}@font-face{font-family:'font awesome 5 brands';font-style:normal;font-weight:400;font-display:auto;src:url(/assets/font-awesome/fa-brands-400-e9fdf947c39f06f1b5e63c58eea2f2f74850421b4e32047dacb9c7b75dd42a16.eot);src:url(/assets/font-awesome/fa-brands-400-e9fdf947c39f06f1b5e63c58eea2f2f74850421b4e32047dacb9c7b75dd42a16.eot#iefix) format("embedded-opentype"),url(/assets/font-awesome/fa-brands-400-8e4560c16c7970efa47680450b2cf239d4a482c056d308acea12bb9022906c8b.woff2) format("woff2"),url(/assets/font-awesome/fa-brands-400-1af816db9a686faa76bfbda779df959e6213de714a94b87aa7374a151f6f4900.woff) format("woff"),url(/assets/font-awesome/fa-brands-400-6b347ff01e588a2a6909ccd7f7f5866b27484391547e9df451ab9b4c27920c71.ttf) format("truetype"),url(/assets/font-awesome/fa-brands-400-36b51fbe6b87587541b9173cd79c16c6b359ad22a172b922204f9aa87411acd9.svg#fontawesome) format("svg")}.fa,.fas{font-family:'font awesome 5 free';font-weight:900}.far{font-family:'font awesome 5 free';font-weight:400}.fab{font-family:'font awesome 5 brands'}.fa,.fas,.far,.fal,.fad,.fab{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-style:normal;font-variant:normal;text-rendering:auto;line-height:1}.fa-lg{font-size:1.3333333333em;line-height:.75em;vertical-align:-.0667em}.fa-xs{font-size:.75em}.fa-sm{font-size:.875em}.fa-1x{font-size:1em}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-6x{font-size:6em}.fa-7x{font-size:7em}.fa-8x{font-size:8em}.fa-9x{font-size:9em}.fa-10x{font-size:10em}.fa-fw{text-align:center;width:1.25em}.fa-ul{list-style-type:none;margin-left:2.5em;padding-left:0}.fa-ul>li{position:relative}.fa-li{left:-2em;position:absolute;text-align:center;width:2em;line-height:inherit}.fa-border{border:solid .08em #eee;border-radius:.1em;padding:.2em .25em .15em}.fa-pull-left{float:left}.fa-pull-right{float:right}.fa.fa-pull-left,.fas.fa-pull-left,.far.fa-pull-left,.fal.fa-pull-left,.fab.fa-pull-left{margin-right:.3em}.fa.fa-pull-right,.fas.fa-pull-right,.far.fa-pull-right,.fal.fa-pull-right,.fab.fa-pull-right{margin-left:.3em}.fa-spin{animation:fa-spin 2s infinite linear}.fa-pulse{animation:fa-spin 1s infinite steps(8)}@keyframes fa-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.fa-rotate-90{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";transform:rotate(90deg)}.fa-rotate-180{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";transform:rotate(180deg)}.fa-rotate-270{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";transform:rotate(270deg)}.fa-flip-horizontal{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";transform:scale(-1,1)}.fa-flip-vertical{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";transform:scale(1,-1)}.fa-flip-both,.fa-flip-horizontal.fa-flip-vertical{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";transform:scale(-1,-1)}:root .fa-rotate-90,:root .fa-rotate-180,:root .fa-rotate-270,:root .fa-flip-horizontal,:root .fa-flip-vertical,:root .fa-flip-both{filter:none}.fa-stack{display:inline-block;height:2em;line-height:2em;position:relative;vertical-align:middle;width:2.5em}.fa-stack-1x,.fa-stack-2x{left:0;position:absolute;text-align:center;width:100%}.fa-stack-1x{line-height:inherit}.fa-stack-2x{font-size:2em}.fa-inverse{color:#fff}.fa-500px:before{content:"\f26e"}.fa-accessible-icon:before{content:"\f368"}.fa-accusoft:before{content:"\f369"}.fa-acquisitions-incorporated:before{content:"\f6af"}.fa-ad:before{content:"\f641"}.fa-address-book:before{content:"\f2b9"}.fa-address-card:before{content:"\f2bb"}.fa-adjust:before{content:"\f042"}.fa-adn:before{content:"\f170"}.fa-adobe:before{content:"\f778"}.fa-adversal:before{content:"\f36a"}.fa-affiliatetheme:before{content:"\f36b"}.fa-air-freshener:before{content:"\f5d0"}.fa-airbnb:before{content:"\f834"}.fa-algolia:before{content:"\f36c"}.fa-align-center:before{content:"\f037"}.fa-align-justify:before{content:"\f039"}.fa-align-left:before{content:"\f036"}.fa-align-right:before{content:"\f038"}.fa-alipay:before{content:"\f642"}.fa-allergies:before{content:"\f461"}.fa-amazon:before{content:"\f270"}.fa-amazon-pay:before{content:"\f42c"}.fa-ambulance:before{content:"\f0f9"}.fa-american-sign-language-interpreting:before{content:"\f2a3"}.fa-amilia:before{content:"\f36d"}.fa-anchor:before{content:"\f13d"}.fa-android:before{content:"\f17b"}.fa-angellist:before{content:"\f209"}.fa-angle-double-down:before{content:"\f103"}.fa-angle-double-left:before{content:"\f100"}.fa-angle-double-right:before{content:"\f101"}.fa-angle-double-up:before{content:"\f102"}.fa-angle-down:before{content:"\f107"}.fa-angle-left:before{content:"\f104"}.fa-angle-right:before{content:"\f105"}.fa-angle-up:before{content:"\f106"}.fa-angry:before{content:"\f556"}.fa-angrycreative:before{content:"\f36e"}.fa-angular:before{content:"\f420"}.fa-ankh:before{content:"\f644"}.fa-app-store:before{content:"\f36f"}.fa-app-store-ios:before{content:"\f370"}.fa-apper:before{content:"\f371"}.fa-apple:before{content:"\f179"}.fa-apple-alt:before{content:"\f5d1"}.fa-apple-pay:before{content:"\f415"}.fa-archive:before{content:"\f187"}.fa-archway:before{content:"\f557"}.fa-arrow-alt-circle-down:before{content:"\f358"}.fa-arrow-alt-circle-left:before{content:"\f359"}.fa-arrow-alt-circle-right:before{content:"\f35a"}.fa-arrow-alt-circle-up:before{content:"\f35b"}.fa-arrow-circle-down:before{content:"\f0ab"}.fa-arrow-circle-left:before{content:"\f0a8"}.fa-arrow-circle-right:before{content:"\f0a9"}.fa-arrow-circle-up:before{content:"\f0aa"}.fa-arrow-down:before{content:"\f063"}.fa-arrow-left:before{content:"\f060"}.fa-arrow-right:before{content:"\f061"}.fa-arrow-up:before{content:"\f062"}.fa-arrows-alt:before{content:"\f0b2"}.fa-arrows-alt-h:before{content:"\f337"}.fa-arrows-alt-v:before{content:"\f338"}.fa-artstation:before{content:"\f77a"}.fa-assistive-listening-systems:before{content:"\f2a2"}.fa-asterisk:before{content:"\f069"}.fa-asymmetrik:before{content:"\f372"}.fa-at:before{content:"\f1fa"}.fa-atlas:before{content:"\f558"}.fa-atlassian:before{content:"\f77b"}.fa-atom:before{content:"\f5d2"}.fa-audible:before{content:"\f373"}.fa-audio-description:before{content:"\f29e"}.fa-autoprefixer:before{content:"\f41c"}.fa-avianex:before{content:"\f374"}.fa-aviato:before{content:"\f421"}.fa-award:before{content:"\f559"}.fa-aws:before{content:"\f375"}.fa-baby:before{content:"\f77c"}.fa-baby-carriage:before{content:"\f77d"}.fa-backspace:before{content:"\f55a"}.fa-backward:before{content:"\f04a"}.fa-bacon:before{content:"\f7e5"}.fa-bahai:before{content:"\f666"}.fa-balance-scale:before{content:"\f24e"}.fa-balance-scale-left:before{content:"\f515"}.fa-balance-scale-right:before{content:"\f516"}.fa-ban:before{content:"\f05e"}.fa-band-aid:before{content:"\f462"}.fa-bandcamp:before{content:"\f2d5"}.fa-barcode:before{content:"\f02a"}.fa-bars:before{content:"\f0c9"}.fa-baseball-ball:before{content:"\f433"}.fa-basketball-ball:before{content:"\f434"}.fa-bath:before{content:"\f2cd"}.fa-battery-empty:before{content:"\f244"}.fa-battery-full:before{content:"\f240"}.fa-battery-half:before{content:"\f242"}.fa-battery-quarter:before{content:"\f243"}.fa-battery-three-quarters:before{content:"\f241"}.fa-battle-net:before{content:"\f835"}.fa-bed:before{content:"\f236"}.fa-beer:before{content:"\f0fc"}.fa-behance:before{content:"\f1b4"}.fa-behance-square:before{content:"\f1b5"}.fa-bell:before{content:"\f0f3"}.fa-bell-slash:before{content:"\f1f6"}.fa-bezier-curve:before{content:"\f55b"}.fa-bible:before{content:"\f647"}.fa-bicycle:before{content:"\f206"}.fa-biking:before{content:"\f84a"}.fa-bimobject:before{content:"\f378"}.fa-binoculars:before{content:"\f1e5"}.fa-biohazard:before{content:"\f780"}.fa-birthday-cake:before{content:"\f1fd"}.fa-bitbucket:before{content:"\f171"}.fa-bitcoin:before{content:"\f379"}.fa-bity:before{content:"\f37a"}.fa-black-tie:before{content:"\f27e"}.fa-blackberry:before{content:"\f37b"}.fa-blender:before{content:"\f517"}.fa-blender-phone:before{content:"\f6b6"}.fa-blind:before{content:"\f29d"}.fa-blog:before{content:"\f781"}.fa-blogger:before{content:"\f37c"}.fa-blogger-b:before{content:"\f37d"}.fa-bluetooth:before{content:"\f293"}.fa-bluetooth-b:before{content:"\f294"}.fa-bold:before{content:"\f032"}.fa-bolt:before{content:"\f0e7"}.fa-bomb:before{content:"\f1e2"}.fa-bone:before{content:"\f5d7"}.fa-bong:before{content:"\f55c"}.fa-book:before{content:"\f02d"}.fa-book-dead:before{content:"\f6b7"}.fa-book-medical:before{content:"\f7e6"}.fa-book-open:before{content:"\f518"}.fa-book-reader:before{content:"\f5da"}.fa-bookmark:before{content:"\f02e"}.fa-bootstrap:before{content:"\f836"}.fa-border-all:before{content:"\f84c"}.fa-border-none:before{content:"\f850"}.fa-border-style:before{content:"\f853"}.fa-bowling-ball:before{content:"\f436"}.fa-box:before{content:"\f466"}.fa-box-open:before{content:"\f49e"}.fa-boxes:before{content:"\f468"}.fa-braille:before{content:"\f2a1"}.fa-brain:before{content:"\f5dc"}.fa-bread-slice:before{content:"\f7ec"}.fa-briefcase:before{content:"\f0b1"}.fa-briefcase-medical:before{content:"\f469"}.fa-broadcast-tower:before{content:"\f519"}.fa-broom:before{content:"\f51a"}.fa-brush:before{content:"\f55d"}.fa-btc:before{content:"\f15a"}.fa-buffer:before{content:"\f837"}.fa-bug:before{content:"\f188"}.fa-building:before{content:"\f1ad"}.fa-bullhorn:before{content:"\f0a1"}.fa-bullseye:before{content:"\f140"}.fa-burn:before{content:"\f46a"}.fa-buromobelexperte:before{content:"\f37f"}.fa-bus:before{content:"\f207"}.fa-bus-alt:before{content:"\f55e"}.fa-business-time:before{content:"\f64a"}.fa-buy-n-large:before{content:"\f8a6"}.fa-buysellads:before{content:"\f20d"}.fa-calculator:before{content:"\f1ec"}.fa-calendar:before{content:"\f133"}.fa-calendar-alt:before{content:"\f073"}.fa-calendar-check:before{content:"\f274"}.fa-calendar-day:before{content:"\f783"}.fa-calendar-minus:before{content:"\f272"}.fa-calendar-plus:before{content:"\f271"}.fa-calendar-times:before{content:"\f273"}.fa-calendar-week:before{content:"\f784"}.fa-camera:before{content:"\f030"}.fa-camera-retro:before{content:"\f083"}.fa-campground:before{content:"\f6bb"}.fa-canadian-maple-leaf:before{content:"\f785"}.fa-candy-cane:before{content:"\f786"}.fa-cannabis:before{content:"\f55f"}.fa-capsules:before{content:"\f46b"}.fa-car:before{content:"\f1b9"}.fa-car-alt:before{content:"\f5de"}.fa-car-battery:before{content:"\f5df"}.fa-car-crash:before{content:"\f5e1"}.fa-car-side:before{content:"\f5e4"}.fa-caravan:before{content:"\f8ff"}.fa-caret-down:before{content:"\f0d7"}.fa-caret-left:before{content:"\f0d9"}.fa-caret-right:before{content:"\f0da"}.fa-caret-square-down:before{content:"\f150"}.fa-caret-square-left:before{content:"\f191"}.fa-caret-square-right:before{content:"\f152"}.fa-caret-square-up:before{content:"\f151"}.fa-caret-up:before{content:"\f0d8"}.fa-carrot:before{content:"\f787"}.fa-cart-arrow-down:before{content:"\f218"}.fa-cart-plus:before{content:"\f217"}.fa-cash-register:before{content:"\f788"}.fa-cat:before{content:"\f6be"}.fa-cc-amazon-pay:before{content:"\f42d"}.fa-cc-amex:before{content:"\f1f3"}.fa-cc-apple-pay:before{content:"\f416"}.fa-cc-diners-club:before{content:"\f24c"}.fa-cc-discover:before{content:"\f1f2"}.fa-cc-jcb:before{content:"\f24b"}.fa-cc-mastercard:before{content:"\f1f1"}.fa-cc-paypal:before{content:"\f1f4"}.fa-cc-stripe:before{content:"\f1f5"}.fa-cc-visa:before{content:"\f1f0"}.fa-centercode:before{content:"\f380"}.fa-centos:before{content:"\f789"}.fa-certificate:before{content:"\f0a3"}.fa-chair:before{content:"\f6c0"}.fa-chalkboard:before{content:"\f51b"}.fa-chalkboard-teacher:before{content:"\f51c"}.fa-charging-station:before{content:"\f5e7"}.fa-chart-area:before{content:"\f1fe"}.fa-chart-bar:before{content:"\f080"}.fa-chart-line:before{content:"\f201"}.fa-chart-pie:before{content:"\f200"}.fa-check:before{content:"\f00c"}.fa-check-circle:before{content:"\f058"}.fa-check-double:before{content:"\f560"}.fa-check-square:before{content:"\f14a"}.fa-cheese:before{content:"\f7ef"}.fa-chess:before{content:"\f439"}.fa-chess-bishop:before{content:"\f43a"}.fa-chess-board:before{content:"\f43c"}.fa-chess-king:before{content:"\f43f"}.fa-chess-knight:before{content:"\f441"}.fa-chess-pawn:before{content:"\f443"}.fa-chess-queen:before{content:"\f445"}.fa-chess-rook:before{content:"\f447"}.fa-chevron-circle-down:before{content:"\f13a"}.fa-chevron-circle-left:before{content:"\f137"}.fa-chevron-circle-right:before{content:"\f138"}.fa-chevron-circle-up:before{content:"\f139"}.fa-chevron-down:before{content:"\f078"}.fa-chevron-left:before{content:"\f053"}.fa-chevron-right:before{content:"\f054"}.fa-chevron-up:before{content:"\f077"}.fa-child:before{content:"\f1ae"}.fa-chrome:before{content:"\f268"}.fa-chromecast:before{content:"\f838"}.fa-church:before{content:"\f51d"}.fa-circle:before{content:"\f111"}.fa-circle-notch:before{content:"\f1ce"}.fa-city:before{content:"\f64f"}.fa-clinic-medical:before{content:"\f7f2"}.fa-clipboard:before{content:"\f328"}.fa-clipboard-check:before{content:"\f46c"}.fa-clipboard-list:before{content:"\f46d"}.fa-clock:before{content:"\f017"}.fa-clone:before{content:"\f24d"}.fa-closed-captioning:before{content:"\f20a"}.fa-cloud:before{content:"\f0c2"}.fa-cloud-download-alt:before{content:"\f381"}.fa-cloud-meatball:before{content:"\f73b"}.fa-cloud-moon:before{content:"\f6c3"}.fa-cloud-moon-rain:before{content:"\f73c"}.fa-cloud-rain:before{content:"\f73d"}.fa-cloud-showers-heavy:before{content:"\f740"}.fa-cloud-sun:before{content:"\f6c4"}.fa-cloud-sun-rain:before{content:"\f743"}.fa-cloud-upload-alt:before{content:"\f382"}.fa-cloudscale:before{content:"\f383"}.fa-cloudsmith:before{content:"\f384"}.fa-cloudversify:before{content:"\f385"}.fa-cocktail:before{content:"\f561"}.fa-code:before{content:"\f121"}.fa-code-branch:before{content:"\f126"}.fa-codepen:before{content:"\f1cb"}.fa-codiepie:before{content:"\f284"}.fa-coffee:before{content:"\f0f4"}.fa-cog:before{content:"\f013"}.fa-cogs:before{content:"\f085"}.fa-coins:before{content:"\f51e"}.fa-columns:before{content:"\f0db"}.fa-comment:before{content:"\f075"}.fa-comment-alt:before{content:"\f27a"}.fa-comment-dollar:before{content:"\f651"}.fa-comment-dots:before{content:"\f4ad"}.fa-comment-medical:before{content:"\f7f5"}.fa-comment-slash:before{content:"\f4b3"}.fa-comments:before{content:"\f086"}.fa-comments-dollar:before{content:"\f653"}.fa-compact-disc:before{content:"\f51f"}.fa-compass:before{content:"\f14e"}.fa-compress:before{content:"\f066"}.fa-compress-alt:before{content:"\f422"}.fa-compress-arrows-alt:before{content:"\f78c"}.fa-concierge-bell:before{content:"\f562"}.fa-confluence:before{content:"\f78d"}.fa-connectdevelop:before{content:"\f20e"}.fa-contao:before{content:"\f26d"}.fa-cookie:before{content:"\f563"}.fa-cookie-bite:before{content:"\f564"}.fa-copy:before{content:"\f0c5"}.fa-copyright:before{content:"\f1f9"}.fa-cotton-bureau:before{content:"\f89e"}.fa-couch:before{content:"\f4b8"}.fa-cpanel:before{content:"\f388"}.fa-creative-commons:before{content:"\f25e"}.fa-creative-commons-by:before{content:"\f4e7"}.fa-creative-commons-nc:before{content:"\f4e8"}.fa-creative-commons-nc-eu:before{content:"\f4e9"}.fa-creative-commons-nc-jp:before{content:"\f4ea"}.fa-creative-commons-nd:before{content:"\f4eb"}.fa-creative-commons-pd:before{content:"\f4ec"}.fa-creative-commons-pd-alt:before{content:"\f4ed"}.fa-creative-commons-remix:before{content:"\f4ee"}.fa-creative-commons-sa:before{content:"\f4ef"}.fa-creative-commons-sampling:before{content:"\f4f0"}.fa-creative-commons-sampling-plus:before{content:"\f4f1"}.fa-creative-commons-share:before{content:"\f4f2"}.fa-creative-commons-zero:before{content:"\f4f3"}.fa-credit-card:before{content:"\f09d"}.fa-critical-role:before{content:"\f6c9"}.fa-crop:before{content:"\f125"}.fa-crop-alt:before{content:"\f565"}.fa-cross:before{content:"\f654"}.fa-crosshairs:before{content:"\f05b"}.fa-crow:before{content:"\f520"}.fa-crown:before{content:"\f521"}.fa-crutch:before{content:"\f7f7"}.fa-css3:before{content:"\f13c"}.fa-css3-alt:before{content:"\f38b"}.fa-cube:before{content:"\f1b2"}.fa-cubes:before{content:"\f1b3"}.fa-cut:before{content:"\f0c4"}.fa-cuttlefish:before{content:"\f38c"}.fa-d-and-d:before{content:"\f38d"}.fa-d-and-d-beyond:before{content:"\f6ca"}.fa-dashcube:before{content:"\f210"}.fa-database:before{content:"\f1c0"}.fa-deaf:before{content:"\f2a4"}.fa-delicious:before{content:"\f1a5"}.fa-democrat:before{content:"\f747"}.fa-deploydog:before{content:"\f38e"}.fa-deskpro:before{content:"\f38f"}.fa-desktop:before{content:"\f108"}.fa-dev:before{content:"\f6cc"}.fa-deviantart:before{content:"\f1bd"}.fa-dharmachakra:before{content:"\f655"}.fa-dhl:before{content:"\f790"}.fa-diagnoses:before{content:"\f470"}.fa-diaspora:before{content:"\f791"}.fa-dice:before{content:"\f522"}.fa-dice-d20:before{content:"\f6cf"}.fa-dice-d6:before{content:"\f6d1"}.fa-dice-five:before{content:"\f523"}.fa-dice-four:before{content:"\f524"}.fa-dice-one:before{content:"\f525"}.fa-dice-six:before{content:"\f526"}.fa-dice-three:before{content:"\f527"}.fa-dice-two:before{content:"\f528"}.fa-digg:before{content:"\f1a6"}.fa-digital-ocean:before{content:"\f391"}.fa-digital-tachograph:before{content:"\f566"}.fa-directions:before{content:"\f5eb"}.fa-discord:before{content:"\f392"}.fa-discourse:before{content:"\f393"}.fa-divide:before{content:"\f529"}.fa-dizzy:before{content:"\f567"}.fa-dna:before{content:"\f471"}.fa-dochub:before{content:"\f394"}.fa-docker:before{content:"\f395"}.fa-dog:before{content:"\f6d3"}.fa-dollar-sign:before{content:"\f155"}.fa-dolly:before{content:"\f472"}.fa-dolly-flatbed:before{content:"\f474"}.fa-donate:before{content:"\f4b9"}.fa-door-closed:before{content:"\f52a"}.fa-door-open:before{content:"\f52b"}.fa-dot-circle:before{content:"\f192"}.fa-dove:before{content:"\f4ba"}.fa-download:before{content:"\f019"}.fa-draft2digital:before{content:"\f396"}.fa-drafting-compass:before{content:"\f568"}.fa-dragon:before{content:"\f6d5"}.fa-draw-polygon:before{content:"\f5ee"}.fa-dribbble:before{content:"\f17d"}.fa-dribbble-square:before{content:"\f397"}.fa-dropbox:before{content:"\f16b"}.fa-drum:before{content:"\f569"}.fa-drum-steelpan:before{content:"\f56a"}.fa-drumstick-bite:before{content:"\f6d7"}.fa-drupal:before{content:"\f1a9"}.fa-dumbbell:before{content:"\f44b"}.fa-dumpster:before{content:"\f793"}.fa-dumpster-fire:before{content:"\f794"}.fa-dungeon:before{content:"\f6d9"}.fa-dyalog:before{content:"\f399"}.fa-earlybirds:before{content:"\f39a"}.fa-ebay:before{content:"\f4f4"}.fa-edge:before{content:"\f282"}.fa-edit:before{content:"\f044"}.fa-egg:before{content:"\f7fb"}.fa-eject:before{content:"\f052"}.fa-elementor:before{content:"\f430"}.fa-ellipsis-h:before{content:"\f141"}.fa-ellipsis-v:before{content:"\f142"}.fa-ello:before{content:"\f5f1"}.fa-ember:before{content:"\f423"}.fa-empire:before{content:"\f1d1"}.fa-envelope:before{content:"\f0e0"}.fa-envelope-open:before{content:"\f2b6"}.fa-envelope-open-text:before{content:"\f658"}.fa-envelope-square:before{content:"\f199"}.fa-envira:before{content:"\f299"}.fa-equals:before{content:"\f52c"}.fa-eraser:before{content:"\f12d"}.fa-erlang:before{content:"\f39d"}.fa-ethereum:before{content:"\f42e"}.fa-ethernet:before{content:"\f796"}.fa-etsy:before{content:"\f2d7"}.fa-euro-sign:before{content:"\f153"}.fa-evernote:before{content:"\f839"}.fa-exchange-alt:before{content:"\f362"}.fa-exclamation:before{content:"\f12a"}.fa-exclamation-circle:before{content:"\f06a"}.fa-exclamation-triangle:before{content:"\f071"}.fa-expand:before{content:"\f065"}.fa-expand-alt:before{content:"\f424"}.fa-expand-arrows-alt:before{content:"\f31e"}.fa-expeditedssl:before{content:"\f23e"}.fa-external-link-alt:before{content:"\f35d"}.fa-external-link-square-alt:before{content:"\f360"}.fa-eye:before{content:"\f06e"}.fa-eye-dropper:before{content:"\f1fb"}.fa-eye-slash:before{content:"\f070"}.fa-facebook:before{content:"\f09a"}.fa-facebook-f:before{content:"\f39e"}.fa-facebook-messenger:before{content:"\f39f"}.fa-facebook-square:before{content:"\f082"}.fa-fan:before{content:"\f863"}.fa-fantasy-flight-games:before{content:"\f6dc"}.fa-fast-backward:before{content:"\f049"}.fa-fast-forward:before{content:"\f050"}.fa-fax:before{content:"\f1ac"}.fa-feather:before{content:"\f52d"}.fa-feather-alt:before{content:"\f56b"}.fa-fedex:before{content:"\f797"}.fa-fedora:before{content:"\f798"}.fa-female:before{content:"\f182"}.fa-fighter-jet:before{content:"\f0fb"}.fa-figma:before{content:"\f799"}.fa-file:before{content:"\f15b"}.fa-file-alt:before{content:"\f15c"}.fa-file-archive:before{content:"\f1c6"}.fa-file-audio:before{content:"\f1c7"}.fa-file-code:before{content:"\f1c9"}.fa-file-contract:before{content:"\f56c"}.fa-file-csv:before{content:"\f6dd"}.fa-file-download:before{content:"\f56d"}.fa-file-excel:before{content:"\f1c3"}.fa-file-export:before{content:"\f56e"}.fa-file-image:before{content:"\f1c5"}.fa-file-import:before{content:"\f56f"}.fa-file-invoice:before{content:"\f570"}.fa-file-invoice-dollar:before{content:"\f571"}.fa-file-medical:before{content:"\f477"}.fa-file-medical-alt:before{content:"\f478"}.fa-file-pdf:before{content:"\f1c1"}.fa-file-powerpoint:before{content:"\f1c4"}.fa-file-prescription:before{content:"\f572"}.fa-file-signature:before{content:"\f573"}.fa-file-upload:before{content:"\f574"}.fa-file-video:before{content:"\f1c8"}.fa-file-word:before{content:"\f1c2"}.fa-fill:before{content:"\f575"}.fa-fill-drip:before{content:"\f576"}.fa-film:before{content:"\f008"}.fa-filter:before{content:"\f0b0"}.fa-fingerprint:before{content:"\f577"}.fa-fire:before{content:"\f06d"}.fa-fire-alt:before{content:"\f7e4"}.fa-fire-extinguisher:before{content:"\f134"}.fa-firefox:before{content:"\f269"}.fa-firefox-browser:before{content:"\f907"}.fa-first-aid:before{content:"\f479"}.fa-first-order:before{content:"\f2b0"}.fa-first-order-alt:before{content:"\f50a"}.fa-firstdraft:before{content:"\f3a1"}.fa-fish:before{content:"\f578"}.fa-fist-raised:before{content:"\f6de"}.fa-flag:before{content:"\f024"}.fa-flag-checkered:before{content:"\f11e"}.fa-flag-usa:before{content:"\f74d"}.fa-flask:before{content:"\f0c3"}.fa-flickr:before{content:"\f16e"}.fa-flipboard:before{content:"\f44d"}.fa-flushed:before{content:"\f579"}.fa-fly:before{content:"\f417"}.fa-folder:before{content:"\f07b"}.fa-folder-minus:before{content:"\f65d"}.fa-folder-open:before{content:"\f07c"}.fa-folder-plus:before{content:"\f65e"}.fa-font:before{content:"\f031"}.fa-font-awesome:before{content:"\f2b4"}.fa-font-awesome-alt:before{content:"\f35c"}.fa-font-awesome-flag:before{content:"\f425"}.fa-font-awesome-logo-full:before{content:"\f4e6"}.fa-fonticons:before{content:"\f280"}.fa-fonticons-fi:before{content:"\f3a2"}.fa-football-ball:before{content:"\f44e"}.fa-fort-awesome:before{content:"\f286"}.fa-fort-awesome-alt:before{content:"\f3a3"}.fa-forumbee:before{content:"\f211"}.fa-forward:before{content:"\f04e"}.fa-foursquare:before{content:"\f180"}.fa-free-code-camp:before{content:"\f2c5"}.fa-freebsd:before{content:"\f3a4"}.fa-frog:before{content:"\f52e"}.fa-frown:before{content:"\f119"}.fa-frown-open:before{content:"\f57a"}.fa-fulcrum:before{content:"\f50b"}.fa-funnel-dollar:before{content:"\f662"}.fa-futbol:before{content:"\f1e3"}.fa-galactic-republic:before{content:"\f50c"}.fa-galactic-senate:before{content:"\f50d"}.fa-gamepad:before{content:"\f11b"}.fa-gas-pump:before{content:"\f52f"}.fa-gavel:before{content:"\f0e3"}.fa-gem:before{content:"\f3a5"}.fa-genderless:before{content:"\f22d"}.fa-get-pocket:before{content:"\f265"}.fa-gg:before{content:"\f260"}.fa-gg-circle:before{content:"\f261"}.fa-ghost:before{content:"\f6e2"}.fa-gift:before{content:"\f06b"}.fa-gifts:before{content:"\f79c"}.fa-git:before{content:"\f1d3"}.fa-git-alt:before{content:"\f841"}.fa-git-square:before{content:"\f1d2"}.fa-github:before{content:"\f09b"}.fa-github-alt:before{content:"\f113"}.fa-github-square:before{content:"\f092"}.fa-gitkraken:before{content:"\f3a6"}.fa-gitlab:before{content:"\f296"}.fa-gitter:before{content:"\f426"}.fa-glass-cheers:before{content:"\f79f"}.fa-glass-martini:before{content:"\f000"}.fa-glass-martini-alt:before{content:"\f57b"}.fa-glass-whiskey:before{content:"\f7a0"}.fa-glasses:before{content:"\f530"}.fa-glide:before{content:"\f2a5"}.fa-glide-g:before{content:"\f2a6"}.fa-globe:before{content:"\f0ac"}.fa-globe-africa:before{content:"\f57c"}.fa-globe-americas:before{content:"\f57d"}.fa-globe-asia:before{content:"\f57e"}.fa-globe-europe:before{content:"\f7a2"}.fa-gofore:before{content:"\f3a7"}.fa-golf-ball:before{content:"\f450"}.fa-goodreads:before{content:"\f3a8"}.fa-goodreads-g:before{content:"\f3a9"}.fa-google:before{content:"\f1a0"}.fa-google-drive:before{content:"\f3aa"}.fa-google-play:before{content:"\f3ab"}.fa-google-plus:before{content:"\f2b3"}.fa-google-plus-g:before{content:"\f0d5"}.fa-google-plus-square:before{content:"\f0d4"}.fa-google-wallet:before{content:"\f1ee"}.fa-gopuram:before{content:"\f664"}.fa-graduation-cap:before{content:"\f19d"}.fa-gratipay:before{content:"\f184"}.fa-grav:before{content:"\f2d6"}.fa-greater-than:before{content:"\f531"}.fa-greater-than-equal:before{content:"\f532"}.fa-grimace:before{content:"\f57f"}.fa-grin:before{content:"\f580"}.fa-grin-alt:before{content:"\f581"}.fa-grin-beam:before{content:"\f582"}.fa-grin-beam-sweat:before{content:"\f583"}.fa-grin-hearts:before{content:"\f584"}.fa-grin-squint:before{content:"\f585"}.fa-grin-squint-tears:before{content:"\f586"}.fa-grin-stars:before{content:"\f587"}.fa-grin-tears:before{content:"\f588"}.fa-grin-tongue:before{content:"\f589"}.fa-grin-tongue-squint:before{content:"\f58a"}.fa-grin-tongue-wink:before{content:"\f58b"}.fa-grin-wink:before{content:"\f58c"}.fa-grip-horizontal:before{content:"\f58d"}.fa-grip-lines:before{content:"\f7a4"}.fa-grip-lines-vertical:before{content:"\f7a5"}.fa-grip-vertical:before{content:"\f58e"}.fa-gripfire:before{content:"\f3ac"}.fa-grunt:before{content:"\f3ad"}.fa-guitar:before{content:"\f7a6"}.fa-gulp:before{content:"\f3ae"}.fa-h-square:before{content:"\f0fd"}.fa-hacker-news:before{content:"\f1d4"}.fa-hacker-news-square:before{content:"\f3af"}.fa-hackerrank:before{content:"\f5f7"}.fa-hamburger:before{content:"\f805"}.fa-hammer:before{content:"\f6e3"}.fa-hamsa:before{content:"\f665"}.fa-hand-holding:before{content:"\f4bd"}.fa-hand-holding-heart:before{content:"\f4be"}.fa-hand-holding-usd:before{content:"\f4c0"}.fa-hand-lizard:before{content:"\f258"}.fa-hand-middle-finger:before{content:"\f806"}.fa-hand-paper:before{content:"\f256"}.fa-hand-peace:before{content:"\f25b"}.fa-hand-point-down:before{content:"\f0a7"}.fa-hand-point-left:before{content:"\f0a5"}.fa-hand-point-right:before{content:"\f0a4"}.fa-hand-point-up:before{content:"\f0a6"}.fa-hand-pointer:before{content:"\f25a"}.fa-hand-rock:before{content:"\f255"}.fa-hand-scissors:before{content:"\f257"}.fa-hand-spock:before{content:"\f259"}.fa-hands:before{content:"\f4c2"}.fa-hands-helping:before{content:"\f4c4"}.fa-handshake:before{content:"\f2b5"}.fa-hanukiah:before{content:"\f6e6"}.fa-hard-hat:before{content:"\f807"}.fa-hashtag:before{content:"\f292"}.fa-hat-cowboy:before{content:"\f8c0"}.fa-hat-cowboy-side:before{content:"\f8c1"}.fa-hat-wizard:before{content:"\f6e8"}.fa-hdd:before{content:"\f0a0"}.fa-heading:before{content:"\f1dc"}.fa-headphones:before{content:"\f025"}.fa-headphones-alt:before{content:"\f58f"}.fa-headset:before{content:"\f590"}.fa-heart:before{content:"\f004"}.fa-heart-broken:before{content:"\f7a9"}.fa-heartbeat:before{content:"\f21e"}.fa-helicopter:before{content:"\f533"}.fa-highlighter:before{content:"\f591"}.fa-hiking:before{content:"\f6ec"}.fa-hippo:before{content:"\f6ed"}.fa-hips:before{content:"\f452"}.fa-hire-a-helper:before{content:"\f3b0"}.fa-history:before{content:"\f1da"}.fa-hockey-puck:before{content:"\f453"}.fa-holly-berry:before{content:"\f7aa"}.fa-home:before{content:"\f015"}.fa-hooli:before{content:"\f427"}.fa-hornbill:before{content:"\f592"}.fa-horse:before{content:"\f6f0"}.fa-horse-head:before{content:"\f7ab"}.fa-hospital:before{content:"\f0f8"}.fa-hospital-alt:before{content:"\f47d"}.fa-hospital-symbol:before{content:"\f47e"}.fa-hot-tub:before{content:"\f593"}.fa-hotdog:before{content:"\f80f"}.fa-hotel:before{content:"\f594"}.fa-hotjar:before{content:"\f3b1"}.fa-hourglass:before{content:"\f254"}.fa-hourglass-end:before{content:"\f253"}.fa-hourglass-half:before{content:"\f252"}.fa-hourglass-start:before{content:"\f251"}.fa-house-damage:before{content:"\f6f1"}.fa-houzz:before{content:"\f27c"}.fa-hryvnia:before{content:"\f6f2"}.fa-html5:before{content:"\f13b"}.fa-hubspot:before{content:"\f3b2"}.fa-i-cursor:before{content:"\f246"}.fa-ice-cream:before{content:"\f810"}.fa-icicles:before{content:"\f7ad"}.fa-icons:before{content:"\f86d"}.fa-id-badge:before{content:"\f2c1"}.fa-id-card:before{content:"\f2c2"}.fa-id-card-alt:before{content:"\f47f"}.fa-ideal:before{content:"\f913"}.fa-igloo:before{content:"\f7ae"}.fa-image:before{content:"\f03e"}.fa-images:before{content:"\f302"}.fa-imdb:before{content:"\f2d8"}.fa-inbox:before{content:"\f01c"}.fa-indent:before{content:"\f03c"}.fa-industry:before{content:"\f275"}.fa-infinity:before{content:"\f534"}.fa-info:before{content:"\f129"}.fa-info-circle:before{content:"\f05a"}.fa-instagram:before{content:"\f16d"}.fa-intercom:before{content:"\f7af"}.fa-internet-explorer:before{content:"\f26b"}.fa-invision:before{content:"\f7b0"}.fa-ioxhost:before{content:"\f208"}.fa-italic:before{content:"\f033"}.fa-itch-io:before{content:"\f83a"}.fa-itunes:before{content:"\f3b4"}.fa-itunes-note:before{content:"\f3b5"}.fa-java:before{content:"\f4e4"}.fa-jedi:before{content:"\f669"}.fa-jedi-order:before{content:"\f50e"}.fa-jenkins:before{content:"\f3b6"}.fa-jira:before{content:"\f7b1"}.fa-joget:before{content:"\f3b7"}.fa-joint:before{content:"\f595"}.fa-joomla:before{content:"\f1aa"}.fa-journal-whills:before{content:"\f66a"}.fa-js:before{content:"\f3b8"}.fa-js-square:before{content:"\f3b9"}.fa-jsfiddle:before{content:"\f1cc"}.fa-kaaba:before{content:"\f66b"}.fa-kaggle:before{content:"\f5fa"}.fa-key:before{content:"\f084"}.fa-keybase:before{content:"\f4f5"}.fa-keyboard:before{content:"\f11c"}.fa-keycdn:before{content:"\f3ba"}.fa-khanda:before{content:"\f66d"}.fa-kickstarter:before{content:"\f3bb"}.fa-kickstarter-k:before{content:"\f3bc"}.fa-kiss:before{content:"\f596"}.fa-kiss-beam:before{content:"\f597"}.fa-kiss-wink-heart:before{content:"\f598"}.fa-kiwi-bird:before{content:"\f535"}.fa-korvue:before{content:"\f42f"}.fa-landmark:before{content:"\f66f"}.fa-language:before{content:"\f1ab"}.fa-laptop:before{content:"\f109"}.fa-laptop-code:before{content:"\f5fc"}.fa-laptop-medical:before{content:"\f812"}.fa-laravel:before{content:"\f3bd"}.fa-lastfm:before{content:"\f202"}.fa-lastfm-square:before{content:"\f203"}.fa-laugh:before{content:"\f599"}.fa-laugh-beam:before{content:"\f59a"}.fa-laugh-squint:before{content:"\f59b"}.fa-laugh-wink:before{content:"\f59c"}.fa-layer-group:before{content:"\f5fd"}.fa-leaf:before{content:"\f06c"}.fa-leanpub:before{content:"\f212"}.fa-lemon:before{content:"\f094"}.fa-less:before{content:"\f41d"}.fa-less-than:before{content:"\f536"}.fa-less-than-equal:before{content:"\f537"}.fa-level-down-alt:before{content:"\f3be"}.fa-level-up-alt:before{content:"\f3bf"}.fa-life-ring:before{content:"\f1cd"}.fa-lightbulb:before{content:"\f0eb"}.fa-line:before{content:"\f3c0"}.fa-link:before{content:"\f0c1"}.fa-linkedin:before{content:"\f08c"}.fa-linkedin-in:before{content:"\f0e1"}.fa-linode:before{content:"\f2b8"}.fa-linux:before{content:"\f17c"}.fa-lira-sign:before{content:"\f195"}.fa-list:before{content:"\f03a"}.fa-list-alt:before{content:"\f022"}.fa-list-ol:before{content:"\f0cb"}.fa-list-ul:before{content:"\f0ca"}.fa-location-arrow:before{content:"\f124"}.fa-lock:before{content:"\f023"}.fa-lock-open:before{content:"\f3c1"}.fa-long-arrow-alt-down:before{content:"\f309"}.fa-long-arrow-alt-left:before{content:"\f30a"}.fa-long-arrow-alt-right:before{content:"\f30b"}.fa-long-arrow-alt-up:before{content:"\f30c"}.fa-low-vision:before{content:"\f2a8"}.fa-luggage-cart:before{content:"\f59d"}.fa-lyft:before{content:"\f3c3"}.fa-magento:before{content:"\f3c4"}.fa-magic:before{content:"\f0d0"}.fa-magnet:before{content:"\f076"}.fa-mail-bulk:before{content:"\f674"}.fa-mailchimp:before{content:"\f59e"}.fa-male:before{content:"\f183"}.fa-mandalorian:before{content:"\f50f"}.fa-map:before{content:"\f279"}.fa-map-marked:before{content:"\f59f"}.fa-map-marked-alt:before{content:"\f5a0"}.fa-map-marker:before{content:"\f041"}.fa-map-marker-alt:before{content:"\f3c5"}.fa-map-pin:before{content:"\f276"}.fa-map-signs:before{content:"\f277"}.fa-markdown:before{content:"\f60f"}.fa-marker:before{content:"\f5a1"}.fa-mars:before{content:"\f222"}.fa-mars-double:before{content:"\f227"}.fa-mars-stroke:before{content:"\f229"}.fa-mars-stroke-h:before{content:"\f22b"}.fa-mars-stroke-v:before{content:"\f22a"}.fa-mask:before{content:"\f6fa"}.fa-mastodon:before{content:"\f4f6"}.fa-maxcdn:before{content:"\f136"}.fa-mdb:before{content:"\f8ca"}.fa-medal:before{content:"\f5a2"}.fa-medapps:before{content:"\f3c6"}.fa-medium:before{content:"\f23a"}.fa-medium-m:before{content:"\f3c7"}.fa-medkit:before{content:"\f0fa"}.fa-medrt:before{content:"\f3c8"}.fa-meetup:before{content:"\f2e0"}.fa-megaport:before{content:"\f5a3"}.fa-meh:before{content:"\f11a"}.fa-meh-blank:before{content:"\f5a4"}.fa-meh-rolling-eyes:before{content:"\f5a5"}.fa-memory:before{content:"\f538"}.fa-mendeley:before{content:"\f7b3"}.fa-menorah:before{content:"\f676"}.fa-mercury:before{content:"\f223"}.fa-meteor:before{content:"\f753"}.fa-microblog:before{content:"\f91a"}.fa-microchip:before{content:"\f2db"}.fa-microphone:before{content:"\f130"}.fa-microphone-alt:before{content:"\f3c9"}.fa-microphone-alt-slash:before{content:"\f539"}.fa-microphone-slash:before{content:"\f131"}.fa-microscope:before{content:"\f610"}.fa-microsoft:before{content:"\f3ca"}.fa-minus:before{content:"\f068"}.fa-minus-circle:before{content:"\f056"}.fa-minus-square:before{content:"\f146"}.fa-mitten:before{content:"\f7b5"}.fa-mix:before{content:"\f3cb"}.fa-mixcloud:before{content:"\f289"}.fa-mizuni:before{content:"\f3cc"}.fa-mobile:before{content:"\f10b"}.fa-mobile-alt:before{content:"\f3cd"}.fa-modx:before{content:"\f285"}.fa-monero:before{content:"\f3d0"}.fa-money-bill:before{content:"\f0d6"}.fa-money-bill-alt:before{content:"\f3d1"}.fa-money-bill-wave:before{content:"\f53a"}.fa-money-bill-wave-alt:before{content:"\f53b"}.fa-money-check:before{content:"\f53c"}.fa-money-check-alt:before{content:"\f53d"}.fa-monument:before{content:"\f5a6"}.fa-moon:before{content:"\f186"}.fa-mortar-pestle:before{content:"\f5a7"}.fa-mosque:before{content:"\f678"}.fa-motorcycle:before{content:"\f21c"}.fa-mountain:before{content:"\f6fc"}.fa-mouse:before{content:"\f8cc"}.fa-mouse-pointer:before{content:"\f245"}.fa-mug-hot:before{content:"\f7b6"}.fa-music:before{content:"\f001"}.fa-napster:before{content:"\f3d2"}.fa-neos:before{content:"\f612"}.fa-network-wired:before{content:"\f6ff"}.fa-neuter:before{content:"\f22c"}.fa-newspaper:before{content:"\f1ea"}.fa-nimblr:before{content:"\f5a8"}.fa-node:before{content:"\f419"}.fa-node-js:before{content:"\f3d3"}.fa-not-equal:before{content:"\f53e"}.fa-notes-medical:before{content:"\f481"}.fa-npm:before{content:"\f3d4"}.fa-ns8:before{content:"\f3d5"}.fa-nutritionix:before{content:"\f3d6"}.fa-object-group:before{content:"\f247"}.fa-object-ungroup:before{content:"\f248"}.fa-odnoklassniki:before{content:"\f263"}.fa-odnoklassniki-square:before{content:"\f264"}.fa-oil-can:before{content:"\f613"}.fa-old-republic:before{content:"\f510"}.fa-om:before{content:"\f679"}.fa-opencart:before{content:"\f23d"}.fa-openid:before{content:"\f19b"}.fa-opera:before{content:"\f26a"}.fa-optin-monster:before{content:"\f23c"}.fa-orcid:before{content:"\f8d2"}.fa-osi:before{content:"\f41a"}.fa-otter:before{content:"\f700"}.fa-outdent:before{content:"\f03b"}.fa-page4:before{content:"\f3d7"}.fa-pagelines:before{content:"\f18c"}.fa-pager:before{content:"\f815"}.fa-paint-brush:before{content:"\f1fc"}.fa-paint-roller:before{content:"\f5aa"}.fa-palette:before{content:"\f53f"}.fa-palfed:before{content:"\f3d8"}.fa-pallet:before{content:"\f482"}.fa-paper-plane:before{content:"\f1d8"}.fa-paperclip:before{content:"\f0c6"}.fa-parachute-box:before{content:"\f4cd"}.fa-paragraph:before{content:"\f1dd"}.fa-parking:before{content:"\f540"}.fa-passport:before{content:"\f5ab"}.fa-pastafarianism:before{content:"\f67b"}.fa-paste:before{content:"\f0ea"}.fa-patreon:before{content:"\f3d9"}.fa-pause:before{content:"\f04c"}.fa-pause-circle:before{content:"\f28b"}.fa-paw:before{content:"\f1b0"}.fa-paypal:before{content:"\f1ed"}.fa-peace:before{content:"\f67c"}.fa-pen:before{content:"\f304"}.fa-pen-alt:before{content:"\f305"}.fa-pen-fancy:before{content:"\f5ac"}.fa-pen-nib:before{content:"\f5ad"}.fa-pen-square:before{content:"\f14b"}.fa-pencil-alt:before{content:"\f303"}.fa-pencil-ruler:before{content:"\f5ae"}.fa-penny-arcade:before{content:"\f704"}.fa-people-carry:before{content:"\f4ce"}.fa-pepper-hot:before{content:"\f816"}.fa-percent:before{content:"\f295"}.fa-percentage:before{content:"\f541"}.fa-periscope:before{content:"\f3da"}.fa-person-booth:before{content:"\f756"}.fa-phabricator:before{content:"\f3db"}.fa-phoenix-framework:before{content:"\f3dc"}.fa-phoenix-squadron:before{content:"\f511"}.fa-phone:before{content:"\f095"}.fa-phone-alt:before{content:"\f879"}.fa-phone-slash:before{content:"\f3dd"}.fa-phone-square:before{content:"\f098"}.fa-phone-square-alt:before{content:"\f87b"}.fa-phone-volume:before{content:"\f2a0"}.fa-photo-video:before{content:"\f87c"}.fa-php:before{content:"\f457"}.fa-pied-piper:before{content:"\f2ae"}.fa-pied-piper-alt:before{content:"\f1a8"}.fa-pied-piper-hat:before{content:"\f4e5"}.fa-pied-piper-pp:before{content:"\f1a7"}.fa-pied-piper-square:before{content:"\f91e"}.fa-piggy-bank:before{content:"\f4d3"}.fa-pills:before{content:"\f484"}.fa-pinterest:before{content:"\f0d2"}.fa-pinterest-p:before{content:"\f231"}.fa-pinterest-square:before{content:"\f0d3"}.fa-pizza-slice:before{content:"\f818"}.fa-place-of-worship:before{content:"\f67f"}.fa-plane:before{content:"\f072"}.fa-plane-arrival:before{content:"\f5af"}.fa-plane-departure:before{content:"\f5b0"}.fa-play:before{content:"\f04b"}.fa-play-circle:before{content:"\f144"}.fa-playstation:before{content:"\f3df"}.fa-plug:before{content:"\f1e6"}.fa-plus:before{content:"\f067"}.fa-plus-circle:before{content:"\f055"}.fa-plus-square:before{content:"\f0fe"}.fa-podcast:before{content:"\f2ce"}.fa-poll:before{content:"\f681"}.fa-poll-h:before{content:"\f682"}.fa-poo:before{content:"\f2fe"}.fa-poo-storm:before{content:"\f75a"}.fa-poop:before{content:"\f619"}.fa-portrait:before{content:"\f3e0"}.fa-pound-sign:before{content:"\f154"}.fa-power-off:before{content:"\f011"}.fa-pray:before{content:"\f683"}.fa-praying-hands:before{content:"\f684"}.fa-prescription:before{content:"\f5b1"}.fa-prescription-bottle:before{content:"\f485"}.fa-prescription-bottle-alt:before{content:"\f486"}.fa-print:before{content:"\f02f"}.fa-procedures:before{content:"\f487"}.fa-product-hunt:before{content:"\f288"}.fa-project-diagram:before{content:"\f542"}.fa-pushed:before{content:"\f3e1"}.fa-puzzle-piece:before{content:"\f12e"}.fa-python:before{content:"\f3e2"}.fa-qq:before{content:"\f1d6"}.fa-qrcode:before{content:"\f029"}.fa-question:before{content:"\f128"}.fa-question-circle:before{content:"\f059"}.fa-quidditch:before{content:"\f458"}.fa-quinscape:before{content:"\f459"}.fa-quora:before{content:"\f2c4"}.fa-quote-left:before{content:"\f10d"}.fa-quote-right:before{content:"\f10e"}.fa-quran:before{content:"\f687"}.fa-r-project:before{content:"\f4f7"}.fa-radiation:before{content:"\f7b9"}.fa-radiation-alt:before{content:"\f7ba"}.fa-rainbow:before{content:"\f75b"}.fa-random:before{content:"\f074"}.fa-raspberry-pi:before{content:"\f7bb"}.fa-ravelry:before{content:"\f2d9"}.fa-react:before{content:"\f41b"}.fa-reacteurope:before{content:"\f75d"}.fa-readme:before{content:"\f4d5"}.fa-rebel:before{content:"\f1d0"}.fa-receipt:before{content:"\f543"}.fa-record-vinyl:before{content:"\f8d9"}.fa-recycle:before{content:"\f1b8"}.fa-red-river:before{content:"\f3e3"}.fa-reddit:before{content:"\f1a1"}.fa-reddit-alien:before{content:"\f281"}.fa-reddit-square:before{content:"\f1a2"}.fa-redhat:before{content:"\f7bc"}.fa-redo:before{content:"\f01e"}.fa-redo-alt:before{content:"\f2f9"}.fa-registered:before{content:"\f25d"}.fa-remove-format:before{content:"\f87d"}.fa-renren:before{content:"\f18b"}.fa-reply:before{content:"\f3e5"}.fa-reply-all:before{content:"\f122"}.fa-replyd:before{content:"\f3e6"}.fa-republican:before{content:"\f75e"}.fa-researchgate:before{content:"\f4f8"}.fa-resolving:before{content:"\f3e7"}.fa-restroom:before{content:"\f7bd"}.fa-retweet:before{content:"\f079"}.fa-rev:before{content:"\f5b2"}.fa-ribbon:before{content:"\f4d6"}.fa-ring:before{content:"\f70b"}.fa-road:before{content:"\f018"}.fa-robot:before{content:"\f544"}.fa-rocket:before{content:"\f135"}.fa-rocketchat:before{content:"\f3e8"}.fa-rockrms:before{content:"\f3e9"}.fa-route:before{content:"\f4d7"}.fa-rss:before{content:"\f09e"}.fa-rss-square:before{content:"\f143"}.fa-ruble-sign:before{content:"\f158"}.fa-ruler:before{content:"\f545"}.fa-ruler-combined:before{content:"\f546"}.fa-ruler-horizontal:before{content:"\f547"}.fa-ruler-vertical:before{content:"\f548"}.fa-running:before{content:"\f70c"}.fa-rupee-sign:before{content:"\f156"}.fa-sad-cry:before{content:"\f5b3"}.fa-sad-tear:before{content:"\f5b4"}.fa-safari:before{content:"\f267"}.fa-salesforce:before{content:"\f83b"}.fa-sass:before{content:"\f41e"}.fa-satellite:before{content:"\f7bf"}.fa-satellite-dish:before{content:"\f7c0"}.fa-save:before{content:"\f0c7"}.fa-schlix:before{content:"\f3ea"}.fa-school:before{content:"\f549"}.fa-screwdriver:before{content:"\f54a"}.fa-scribd:before{content:"\f28a"}.fa-scroll:before{content:"\f70e"}.fa-sd-card:before{content:"\f7c2"}.fa-search:before{content:"\f002"}.fa-search-dollar:before{content:"\f688"}.fa-search-location:before{content:"\f689"}.fa-search-minus:before{content:"\f010"}.fa-search-plus:before{content:"\f00e"}.fa-searchengin:before{content:"\f3eb"}.fa-seedling:before{content:"\f4d8"}.fa-sellcast:before{content:"\f2da"}.fa-sellsy:before{content:"\f213"}.fa-server:before{content:"\f233"}.fa-servicestack:before{content:"\f3ec"}.fa-shapes:before{content:"\f61f"}.fa-share:before{content:"\f064"}.fa-share-alt:before{content:"\f1e0"}.fa-share-alt-square:before{content:"\f1e1"}.fa-share-square:before{content:"\f14d"}.fa-shekel-sign:before{content:"\f20b"}.fa-shield-alt:before{content:"\f3ed"}.fa-ship:before{content:"\f21a"}.fa-shipping-fast:before{content:"\f48b"}.fa-shirtsinbulk:before{content:"\f214"}.fa-shoe-prints:before{content:"\f54b"}.fa-shopping-bag:before{content:"\f290"}.fa-shopping-basket:before{content:"\f291"}.fa-shopping-cart:before{content:"\f07a"}.fa-shopware:before{content:"\f5b5"}.fa-shower:before{content:"\f2cc"}.fa-shuttle-van:before{content:"\f5b6"}.fa-sign:before{content:"\f4d9"}.fa-sign-in-alt:before{content:"\f2f6"}.fa-sign-language:before{content:"\f2a7"}.fa-sign-out-alt:before{content:"\f2f5"}.fa-signal:before{content:"\f012"}.fa-signature:before{content:"\f5b7"}.fa-sim-card:before{content:"\f7c4"}.fa-simplybuilt:before{content:"\f215"}.fa-sistrix:before{content:"\f3ee"}.fa-sitemap:before{content:"\f0e8"}.fa-sith:before{content:"\f512"}.fa-skating:before{content:"\f7c5"}.fa-sketch:before{content:"\f7c6"}.fa-skiing:before{content:"\f7c9"}.fa-skiing-nordic:before{content:"\f7ca"}.fa-skull:before{content:"\f54c"}.fa-skull-crossbones:before{content:"\f714"}.fa-skyatlas:before{content:"\f216"}.fa-skype:before{content:"\f17e"}.fa-slack:before{content:"\f198"}.fa-slack-hash:before{content:"\f3ef"}.fa-slash:before{content:"\f715"}.fa-sleigh:before{content:"\f7cc"}.fa-sliders-h:before{content:"\f1de"}.fa-slideshare:before{content:"\f1e7"}.fa-smile:before{content:"\f118"}.fa-smile-beam:before{content:"\f5b8"}.fa-smile-wink:before{content:"\f4da"}.fa-smog:before{content:"\f75f"}.fa-smoking:before{content:"\f48d"}.fa-smoking-ban:before{content:"\f54d"}.fa-sms:before{content:"\f7cd"}.fa-snapchat:before{content:"\f2ab"}.fa-snapchat-ghost:before{content:"\f2ac"}.fa-snapchat-square:before{content:"\f2ad"}.fa-snowboarding:before{content:"\f7ce"}.fa-snowflake:before{content:"\f2dc"}.fa-snowman:before{content:"\f7d0"}.fa-snowplow:before{content:"\f7d2"}.fa-socks:before{content:"\f696"}.fa-solar-panel:before{content:"\f5ba"}.fa-sort:before{content:"\f0dc"}.fa-sort-alpha-down:before{content:"\f15d"}.fa-sort-alpha-down-alt:before{content:"\f881"}.fa-sort-alpha-up:before{content:"\f15e"}.fa-sort-alpha-up-alt:before{content:"\f882"}.fa-sort-amount-down:before{content:"\f160"}.fa-sort-amount-down-alt:before{content:"\f884"}.fa-sort-amount-up:before{content:"\f161"}.fa-sort-amount-up-alt:before{content:"\f885"}.fa-sort-down:before{content:"\f0dd"}.fa-sort-numeric-down:before{content:"\f162"}.fa-sort-numeric-down-alt:before{content:"\f886"}.fa-sort-numeric-up:before{content:"\f163"}.fa-sort-numeric-up-alt:before{content:"\f887"}.fa-sort-up:before{content:"\f0de"}.fa-soundcloud:before{content:"\f1be"}.fa-sourcetree:before{content:"\f7d3"}.fa-spa:before{content:"\f5bb"}.fa-space-shuttle:before{content:"\f197"}.fa-speakap:before{content:"\f3f3"}.fa-speaker-deck:before{content:"\f83c"}.fa-spell-check:before{content:"\f891"}.fa-spider:before{content:"\f717"}.fa-spinner:before{content:"\f110"}.fa-splotch:before{content:"\f5bc"}.fa-spotify:before{content:"\f1bc"}.fa-spray-can:before{content:"\f5bd"}.fa-square:before{content:"\f0c8"}.fa-square-full:before{content:"\f45c"}.fa-square-root-alt:before{content:"\f698"}.fa-squarespace:before{content:"\f5be"}.fa-stack-exchange:before{content:"\f18d"}.fa-stack-overflow:before{content:"\f16c"}.fa-stackpath:before{content:"\f842"}.fa-stamp:before{content:"\f5bf"}.fa-star:before{content:"\f005"}.fa-star-and-crescent:before{content:"\f699"}.fa-star-half:before{content:"\f089"}.fa-star-half-alt:before{content:"\f5c0"}.fa-star-of-david:before{content:"\f69a"}.fa-star-of-life:before{content:"\f621"}.fa-staylinked:before{content:"\f3f5"}.fa-steam:before{content:"\f1b6"}.fa-steam-square:before{content:"\f1b7"}.fa-steam-symbol:before{content:"\f3f6"}.fa-step-backward:before{content:"\f048"}.fa-step-forward:before{content:"\f051"}.fa-stethoscope:before{content:"\f0f1"}.fa-sticker-mule:before{content:"\f3f7"}.fa-sticky-note:before{content:"\f249"}.fa-stop:before{content:"\f04d"}.fa-stop-circle:before{content:"\f28d"}.fa-stopwatch:before{content:"\f2f2"}.fa-store:before{content:"\f54e"}.fa-store-alt:before{content:"\f54f"}.fa-strava:before{content:"\f428"}.fa-stream:before{content:"\f550"}.fa-street-view:before{content:"\f21d"}.fa-strikethrough:before{content:"\f0cc"}.fa-stripe:before{content:"\f429"}.fa-stripe-s:before{content:"\f42a"}.fa-stroopwafel:before{content:"\f551"}.fa-studiovinari:before{content:"\f3f8"}.fa-stumbleupon:before{content:"\f1a4"}.fa-stumbleupon-circle:before{content:"\f1a3"}.fa-subscript:before{content:"\f12c"}.fa-subway:before{content:"\f239"}.fa-suitcase:before{content:"\f0f2"}.fa-suitcase-rolling:before{content:"\f5c1"}.fa-sun:before{content:"\f185"}.fa-superpowers:before{content:"\f2dd"}.fa-superscript:before{content:"\f12b"}.fa-supple:before{content:"\f3f9"}.fa-surprise:before{content:"\f5c2"}.fa-suse:before{content:"\f7d6"}.fa-swatchbook:before{content:"\f5c3"}.fa-swift:before{content:"\f8e1"}.fa-swimmer:before{content:"\f5c4"}.fa-swimming-pool:before{content:"\f5c5"}.fa-symfony:before{content:"\f83d"}.fa-synagogue:before{content:"\f69b"}.fa-sync:before{content:"\f021"}.fa-sync-alt:before{content:"\f2f1"}.fa-syringe:before{content:"\f48e"}.fa-table:before{content:"\f0ce"}.fa-table-tennis:before{content:"\f45d"}.fa-tablet:before{content:"\f10a"}.fa-tablet-alt:before{content:"\f3fa"}.fa-tablets:before{content:"\f490"}.fa-tachometer-alt:before{content:"\f3fd"}.fa-tag:before{content:"\f02b"}.fa-tags:before{content:"\f02c"}.fa-tape:before{content:"\f4db"}.fa-tasks:before{content:"\f0ae"}.fa-taxi:before{content:"\f1ba"}.fa-teamspeak:before{content:"\f4f9"}.fa-teeth:before{content:"\f62e"}.fa-teeth-open:before{content:"\f62f"}.fa-telegram:before{content:"\f2c6"}.fa-telegram-plane:before{content:"\f3fe"}.fa-temperature-high:before{content:"\f769"}.fa-temperature-low:before{content:"\f76b"}.fa-tencent-weibo:before{content:"\f1d5"}.fa-tenge:before{content:"\f7d7"}.fa-terminal:before{content:"\f120"}.fa-text-height:before{content:"\f034"}.fa-text-width:before{content:"\f035"}.fa-th:before{content:"\f00a"}.fa-th-large:before{content:"\f009"}.fa-th-list:before{content:"\f00b"}.fa-the-red-yeti:before{content:"\f69d"}.fa-theater-masks:before{content:"\f630"}.fa-themeco:before{content:"\f5c6"}.fa-themeisle:before{content:"\f2b2"}.fa-thermometer:before{content:"\f491"}.fa-thermometer-empty:before{content:"\f2cb"}.fa-thermometer-full:before{content:"\f2c7"}.fa-thermometer-half:before{content:"\f2c9"}.fa-thermometer-quarter:before{content:"\f2ca"}.fa-thermometer-three-quarters:before{content:"\f2c8"}.fa-think-peaks:before{content:"\f731"}.fa-thumbs-down:before{content:"\f165"}.fa-thumbs-up:before{content:"\f164"}.fa-thumbtack:before{content:"\f08d"}.fa-ticket-alt:before{content:"\f3ff"}.fa-times:before{content:"\f00d"}.fa-times-circle:before{content:"\f057"}.fa-tint:before{content:"\f043"}.fa-tint-slash:before{content:"\f5c7"}.fa-tired:before{content:"\f5c8"}.fa-toggle-off:before{content:"\f204"}.fa-toggle-on:before{content:"\f205"}.fa-toilet:before{content:"\f7d8"}.fa-toilet-paper:before{content:"\f71e"}.fa-toolbox:before{content:"\f552"}.fa-tools:before{content:"\f7d9"}.fa-tooth:before{content:"\f5c9"}.fa-torah:before{content:"\f6a0"}.fa-torii-gate:before{content:"\f6a1"}.fa-tractor:before{content:"\f722"}.fa-trade-federation:before{content:"\f513"}.fa-trademark:before{content:"\f25c"}.fa-traffic-light:before{content:"\f637"}.fa-trailer:before{content:"\f941"}.fa-train:before{content:"\f238"}.fa-tram:before{content:"\f7da"}.fa-transgender:before{content:"\f224"}.fa-transgender-alt:before{content:"\f225"}.fa-trash:before{content:"\f1f8"}.fa-trash-alt:before{content:"\f2ed"}.fa-trash-restore:before{content:"\f829"}.fa-trash-restore-alt:before{content:"\f82a"}.fa-tree:before{content:"\f1bb"}.fa-trello:before{content:"\f181"}.fa-tripadvisor:before{content:"\f262"}.fa-trophy:before{content:"\f091"}.fa-truck:before{content:"\f0d1"}.fa-truck-loading:before{content:"\f4de"}.fa-truck-monster:before{content:"\f63b"}.fa-truck-moving:before{content:"\f4df"}.fa-truck-pickup:before{content:"\f63c"}.fa-tshirt:before{content:"\f553"}.fa-tty:before{content:"\f1e4"}.fa-tumblr:before{content:"\f173"}.fa-tumblr-square:before{content:"\f174"}.fa-tv:before{content:"\f26c"}.fa-twitch:before{content:"\f1e8"}.fa-twitter:before{content:"\f099"}.fa-twitter-square:before{content:"\f081"}.fa-typo3:before{content:"\f42b"}.fa-uber:before{content:"\f402"}.fa-ubuntu:before{content:"\f7df"}.fa-uikit:before{content:"\f403"}.fa-umbraco:before{content:"\f8e8"}.fa-umbrella:before{content:"\f0e9"}.fa-umbrella-beach:before{content:"\f5ca"}.fa-underline:before{content:"\f0cd"}.fa-undo:before{content:"\f0e2"}.fa-undo-alt:before{content:"\f2ea"}.fa-uniregistry:before{content:"\f404"}.fa-unity:before{content:"\f949"}.fa-universal-access:before{content:"\f29a"}.fa-university:before{content:"\f19c"}.fa-unlink:before{content:"\f127"}.fa-unlock:before{content:"\f09c"}.fa-unlock-alt:before{content:"\f13e"}.fa-untappd:before{content:"\f405"}.fa-upload:before{content:"\f093"}.fa-ups:before{content:"\f7e0"}.fa-usb:before{content:"\f287"}.fa-user:before{content:"\f007"}.fa-user-alt:before{content:"\f406"}.fa-user-alt-slash:before{content:"\f4fa"}.fa-user-astronaut:before{content:"\f4fb"}.fa-user-check:before{content:"\f4fc"}.fa-user-circle:before{content:"\f2bd"}.fa-user-clock:before{content:"\f4fd"}.fa-user-cog:before{content:"\f4fe"}.fa-user-edit:before{content:"\f4ff"}.fa-user-friends:before{content:"\f500"}.fa-user-graduate:before{content:"\f501"}.fa-user-injured:before{content:"\f728"}.fa-user-lock:before{content:"\f502"}.fa-user-md:before{content:"\f0f0"}.fa-user-minus:before{content:"\f503"}.fa-user-ninja:before{content:"\f504"}.fa-user-nurse:before{content:"\f82f"}.fa-user-plus:before{content:"\f234"}.fa-user-secret:before{content:"\f21b"}.fa-user-shield:before{content:"\f505"}.fa-user-slash:before{content:"\f506"}.fa-user-tag:before{content:"\f507"}.fa-user-tie:before{content:"\f508"}.fa-user-times:before{content:"\f235"}.fa-users:before{content:"\f0c0"}.fa-users-cog:before{content:"\f509"}.fa-usps:before{content:"\f7e1"}.fa-ussunnah:before{content:"\f407"}.fa-utensil-spoon:before{content:"\f2e5"}.fa-utensils:before{content:"\f2e7"}.fa-vaadin:before{content:"\f408"}.fa-vector-square:before{content:"\f5cb"}.fa-venus:before{content:"\f221"}.fa-venus-double:before{content:"\f226"}.fa-venus-mars:before{content:"\f228"}.fa-viacoin:before{content:"\f237"}.fa-viadeo:before{content:"\f2a9"}.fa-viadeo-square:before{content:"\f2aa"}.fa-vial:before{content:"\f492"}.fa-vials:before{content:"\f493"}.fa-viber:before{content:"\f409"}.fa-video:before{content:"\f03d"}.fa-video-slash:before{content:"\f4e2"}.fa-vihara:before{content:"\f6a7"}.fa-vimeo:before{content:"\f40a"}.fa-vimeo-square:before{content:"\f194"}.fa-vimeo-v:before{content:"\f27d"}.fa-vine:before{content:"\f1ca"}.fa-vk:before{content:"\f189"}.fa-vnv:before{content:"\f40b"}.fa-voicemail:before{content:"\f897"}.fa-volleyball-ball:before{content:"\f45f"}.fa-volume-down:before{content:"\f027"}.fa-volume-mute:before{content:"\f6a9"}.fa-volume-off:before{content:"\f026"}.fa-volume-up:before{content:"\f028"}.fa-vote-yea:before{content:"\f772"}.fa-vr-cardboard:before{content:"\f729"}.fa-vuejs:before{content:"\f41f"}.fa-walking:before{content:"\f554"}.fa-wallet:before{content:"\f555"}.fa-warehouse:before{content:"\f494"}.fa-water:before{content:"\f773"}.fa-wave-square:before{content:"\f83e"}.fa-waze:before{content:"\f83f"}.fa-weebly:before{content:"\f5cc"}.fa-weibo:before{content:"\f18a"}.fa-weight:before{content:"\f496"}.fa-weight-hanging:before{content:"\f5cd"}.fa-weixin:before{content:"\f1d7"}.fa-whatsapp:before{content:"\f232"}.fa-whatsapp-square:before{content:"\f40c"}.fa-wheelchair:before{content:"\f193"}.fa-whmcs:before{content:"\f40d"}.fa-wifi:before{content:"\f1eb"}.fa-wikipedia-w:before{content:"\f266"}.fa-wind:before{content:"\f72e"}.fa-window-close:before{content:"\f410"}.fa-window-maximize:before{content:"\f2d0"}.fa-window-minimize:before{content:"\f2d1"}.fa-window-restore:before{content:"\f2d2"}.fa-windows:before{content:"\f17a"}.fa-wine-bottle:before{content:"\f72f"}.fa-wine-glass:before{content:"\f4e3"}.fa-wine-glass-alt:before{content:"\f5ce"}.fa-wix:before{content:"\f5cf"}.fa-wizards-of-the-coast:before{content:"\f730"}.fa-wolf-pack-battalion:before{content:"\f514"}.fa-won-sign:before{content:"\f159"}.fa-wordpress:before{content:"\f19a"}.fa-wordpress-simple:before{content:"\f411"}.fa-wpbeginner:before{content:"\f297"}.fa-wpexplorer:before{content:"\f2de"}.fa-wpforms:before{content:"\f298"}.fa-wpressr:before{content:"\f3e4"}.fa-wrench:before{content:"\f0ad"}.fa-x-ray:before{content:"\f497"}.fa-xbox:before{content:"\f412"}.fa-xing:before{content:"\f168"}.fa-xing-square:before{content:"\f169"}.fa-y-combinator:before{content:"\f23b"}.fa-yahoo:before{content:"\f19e"}.fa-yammer:before{content:"\f840"}.fa-yandex:before{content:"\f413"}.fa-yandex-international:before{content:"\f414"}.fa-yarn:before{content:"\f7e3"}.fa-yelp:before{content:"\f1e9"}.fa-yen-sign:before{content:"\f157"}.fa-yin-yang:before{content:"\f6ad"}.fa-yoast:before{content:"\f2b1"}.fa-youtube:before{content:"\f167"}.fa-youtube-square:before{content:"\f431"}.fa-zhihu:before{content:"\f63f"}.sr-only{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.sr-only-focusable:active,.sr-only-focusable:focus{clip:auto;height:auto;margin:0;overflow:visible;position:static;width:auto}.subcircuitdialog{display:none;overflow-x:hidden;overflow-y:auto}.moduleProperty input{color:#fff}.side{width:330px;max-width:500px;min-width:200px;overflow-x:hidden;overflow-y:scroll}.report-sidebar a{border-radius:30px 5px 5px 30px;color:#fff;font-size:13px;padding:15px;position:absolute;right:-111px;text-decoration:none;top:90%;transition:.3s;width:150px;z-index:999}.report-sidebar a:hover{right:0}
\ No newline at end of file
diff --git a/index.html b/index.html
index 32e5c2e..d8b7e5f 100644
--- a/index.html
+++ b/index.html
@@ -5,6 +5,7 @@
     type="text/css"
     href="./node_modules/jquery-ui-dist/jquery-ui.css"
   />
+<script src="https://kit.fontawesome.com/a076d05399.js"></script>
 
   <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  -->
   <!-- <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> -->
@@ -538,9 +539,13 @@
       //      $(this).parent('.dropdown').addClass('open');
       //    });
     </script>
-    <link rel="stylesheet" type="text/css" href="./css/UX.css">
-    <link rel="stylesheet" type="text/css" href="./css/restrictedElements.css">
-    <link rel="stylesheet" type="text/css" href="./css/simulator.css">
+    <link rel="stylesheet" type="text/css" href="./css/UX.css" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="./css/restrictedElements.css"
+    />
+    <link rel="stylesheet" type="text/css" href="./css/simulator.css" />
     <!-- <script src="./SAP_DATA.js"></script> -->
 
     <!---issue reporting-system----->
diff --git a/package-lock.json b/package-lock.json
index 82671b1..a2ff8a5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5222,6 +5222,12 @@
         }
       }
     },
+    "font-awesome": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/font-awesome/-/font-awesome-4.7.0.tgz",
+      "integrity": "sha1-j6jPBBGhoxr9B7BtKQK7n8gVoTM=",
+      "dev": true
+    },
     "for-in": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
diff --git a/package.json b/package.json
index 4f42eaf..69e2990 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
     "babel-polyfill": "^6.26.0",
     "eslint": "^7.2.0",
     "file-loader": "^6.0.0",
+    "font-awesome": "^4.7.0",
     "jasmine": "^3.5.0",
     "jest": "^25.2.3",
     "jest-puppeteer": "^4.4.0",
diff --git a/test/listenertest.test.js b/test/listenertest.test.js
index b4194f0..554b660 100644
--- a/test/listenertest.test.js
+++ b/test/listenertest.test.js
@@ -9,7 +9,7 @@ let page
 beforeAll(async () => {
     browser = await puppeteer.launch()
     page = await browser.newPage()
-    await page.goto('file:///home/deku/2sim/index.html')
+    await page.goto('file://' + process.cwd() +'/index.html')
 })
 
 describe('button', function () {