Import map svg in an object; add a dev server

author: Catalin Mititiuc <Catalin.Mititiuc@gmail.com> 2024-04-11 12:46:26 -0700
committer: Catalin Mititiuc <Catalin.Mititiuc@gmail.com> 2024-04-11 13:15:41 -0700
commit: b192fc0790a4815703afa6ccc782f2b573c64722 (patch)
tree: dcc0f3b3aca30447a1ad71a45d1193aadc92f59d
parent: 35a82e94e85c5b4f068e6e4d3d807dfc3c05379d (diff)
28 files changed, 4478 insertions, 0 deletions
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..44848b3
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,4 @@
+*.log
+*.tgz
+dist
+node_modules
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..aee7c62
--- /dev/null
+++ b/README.md
@@ -0,0 +1,22 @@
+## Install dev server packages
+
+    docker run --rm -w /app -v $PWD:/app -u $(id -u):$(id -u) node bash -c "npm install"
+
+## Start the dev server
+
+    docker run --rm --init -it -w /app -v $PWD:/app -p 8080:8080 node bash -c "node dev-server.js"
+
+Visit `localhost:8080` to view.
+
+## Rough way to save the SVG map generated by JavaScript client-side
+
+    const XMLS = new XMLSerializer();
+    const svg_xmls = XMLS.serializeToString(svg);
+    let bl = new Blob([svg_xmls], {type: "text/html" });
+    let a = document.createElement("a");
+    a.href = URL.createObjectURL(bl);
+    a.download = "map.svg";
+    a.hidden = true;
+    document.body.appendChild(a);
+    a.innerHTML = "something random - nobody will see this, it doesn't matter what you put here";
+    a.click()
diff --git a/dev-server.js b/dev-server.js
new file mode 100644
index 0000000..5d09c33
--- /dev/null
+++ b/dev-server.js
@@ -0,0 +1,11 @@
+require('esbuild-server')
+  .createServer(
+    {
+      bundle: true,
+      entryPoints: ['src/index.js'],
+    },
+    {
+      static: 'public',
+    }
+  )
+  .start();
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..d47231c
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,431 @@
+{
+  "name": "app",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "devDependencies": {
+        "esbuild": "^0.20.2",
+        "esbuild-server": "^0.3.0"
+      }
+    },
+    "node_modules/@esbuild/aix-ppc64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.20.2.tgz",
+      "integrity": "sha512-D+EBOJHXdNZcLJRBkhENNG8Wji2kgc9AZ9KiPr1JuZjsNtyHzrsfLRrY0tk2H2aoFu6RANO1y1iPPUCDYWkb5g==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-arm": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.20.2.tgz",
+      "integrity": "sha512-t98Ra6pw2VaDhqNWO2Oph2LXbz/EJcnLmKLGBJwEwXX/JAN83Fym1rU8l0JUWK6HkIbWONCSSatf4sf2NBRx/w==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-arm64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.20.2.tgz",
+      "integrity": "sha512-mRzjLacRtl/tWU0SvD8lUEwb61yP9cqQo6noDZP/O8VkwafSYwZ4yWy24kan8jE/IMERpYncRt2dw438LP3Xmg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-x64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.20.2.tgz",
+      "integrity": "sha512-btzExgV+/lMGDDa194CcUQm53ncxzeBrWJcncOBxuC6ndBkKxnHdFJn86mCIgTELsooUmwUm9FkhSp5HYu00Rg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/darwin-arm64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.20.2.tgz",
+      "integrity": "sha512-4J6IRT+10J3aJH3l1yzEg9y3wkTDgDk7TSDFX+wKFiWjqWp/iCfLIYzGyasx9l0SAFPT1HwSCR+0w/h1ES/MjA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/darwin-x64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.20.2.tgz",
+      "integrity": "sha512-tBcXp9KNphnNH0dfhv8KYkZhjc+H3XBkF5DKtswJblV7KlT9EI2+jeA8DgBjp908WEuYll6pF+UStUCfEpdysA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.20.2.tgz",
+      "integrity": "sha512-d3qI41G4SuLiCGCFGUrKsSeTXyWG6yem1KcGZVS+3FYlYhtNoNgYrWcvkOoaqMhwXSMrZRl69ArHsGJ9mYdbbw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/freebsd-x64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.20.2.tgz",
+      "integrity": "sha512-d+DipyvHRuqEeM5zDivKV1KuXn9WeRX6vqSqIDgwIfPQtwMP4jaDsQsDncjTDDsExT4lR/91OLjRo8bmC1e+Cw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-arm": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.20.2.tgz",
+      "integrity": "sha512-VhLPeR8HTMPccbuWWcEUD1Az68TqaTYyj6nfE4QByZIQEQVWBB8vup8PpR7y1QHL3CpcF6xd5WVBU/+SBEvGTg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-arm64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.20.2.tgz",
+      "integrity": "sha512-9pb6rBjGvTFNira2FLIWqDk/uaf42sSyLE8j1rnUpuzsODBq7FvpwHYZxQ/It/8b+QOS1RYfqgGFNLRI+qlq2A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-ia32": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.20.2.tgz",
+      "integrity": "sha512-o10utieEkNPFDZFQm9CoP7Tvb33UutoJqg3qKf1PWVeeJhJw0Q347PxMvBgVVFgouYLGIhFYG0UGdBumROyiig==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-loong64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.20.2.tgz",
+      "integrity": "sha512-PR7sp6R/UC4CFVomVINKJ80pMFlfDfMQMYynX7t1tNTeivQ6XdX5r2XovMmha/VjR1YN/HgHWsVcTRIMkymrgQ==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-mips64el": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.20.2.tgz",
+      "integrity": "sha512-4BlTqeutE/KnOiTG5Y6Sb/Hw6hsBOZapOVF6njAESHInhlQAghVVZL1ZpIctBOoTFbQyGW+LsVYZ8lSSB3wkjA==",
+      "cpu": [
+        "mips64el"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-ppc64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.20.2.tgz",
+      "integrity": "sha512-rD3KsaDprDcfajSKdn25ooz5J5/fWBylaaXkuotBDGnMnDP1Uv5DLAN/45qfnf3JDYyJv/ytGHQaziHUdyzaAg==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-riscv64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.20.2.tgz",
+      "integrity": "sha512-snwmBKacKmwTMmhLlz/3aH1Q9T8v45bKYGE3j26TsaOVtjIag4wLfWSiZykXzXuE1kbCE+zJRmwp+ZbIHinnVg==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-s390x": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.20.2.tgz",
+      "integrity": "sha512-wcWISOobRWNm3cezm5HOZcYz1sKoHLd8VL1dl309DiixxVFoFe/o8HnwuIwn6sXre88Nwj+VwZUvJf4AFxkyrQ==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-x64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.20.2.tgz",
+      "integrity": "sha512-1MdwI6OOTsfQfek8sLwgyjOXAu+wKhLEoaOLTjbijk6E2WONYpH9ZU2mNtR+lZ2B4uwr+usqGuVfFT9tMtGvGw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/netbsd-x64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.20.2.tgz",
+      "integrity": "sha512-K8/DhBxcVQkzYc43yJXDSyjlFeHQJBiowJ0uVL6Tor3jGQfSGHNNJcWxNbOI8v5k82prYqzPuwkzHt3J1T1iZQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/openbsd-x64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.20.2.tgz",
+      "integrity": "sha512-eMpKlV0SThJmmJgiVyN9jTPJ2VBPquf6Kt/nAoo6DgHAoN57K15ZghiHaMvqjCye/uU4X5u3YSMgVBI1h3vKrQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/sunos-x64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.20.2.tgz",
+      "integrity": "sha512-2UyFtRC6cXLyejf/YEld4Hajo7UHILetzE1vsRcGL3earZEW77JxrFjH4Ez2qaTiEfMgAXxfAZCm1fvM/G/o8w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-arm64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.20.2.tgz",
+      "integrity": "sha512-GRibxoawM9ZCnDxnP3usoUDO9vUkpAxIIZ6GQI+IlVmr5kP3zUq+l17xELTHMWTWzjxa2guPNyrpq1GWmPvcGQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-ia32": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.20.2.tgz",
+      "integrity": "sha512-HfLOfn9YWmkSKRQqovpnITazdtquEW8/SoHW7pWpuEeguaZI4QnCRW6b+oZTztdBnZOS2hqJ6im/D5cPzBTTlQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-x64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.20.2.tgz",
+      "integrity": "sha512-N49X4lJX27+l9jbLKSqZ6bKNjzQvHaT8IIFUy+YIqmXQdjYCToGWwOItDrfby14c78aDd5NHQl29xingXfCdLQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.20.2.tgz",
+      "integrity": "sha512-WdOOppmUNU+IbZ0PaDiTst80zjnrOkyJNHoKupIcVyU8Lvla3Ugx94VzkQ32Ijqd7UhHJy75gNWDMUekcrSJ6g==",
+      "dev": true,
+      "hasInstallScript": true,
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.20.2",
+        "@esbuild/android-arm": "0.20.2",
+        "@esbuild/android-arm64": "0.20.2",
+        "@esbuild/android-x64": "0.20.2",
+        "@esbuild/darwin-arm64": "0.20.2",
+        "@esbuild/darwin-x64": "0.20.2",
+        "@esbuild/freebsd-arm64": "0.20.2",
+        "@esbuild/freebsd-x64": "0.20.2",
+        "@esbuild/linux-arm": "0.20.2",
+        "@esbuild/linux-arm64": "0.20.2",
+        "@esbuild/linux-ia32": "0.20.2",
+        "@esbuild/linux-loong64": "0.20.2",
+        "@esbuild/linux-mips64el": "0.20.2",
+        "@esbuild/linux-ppc64": "0.20.2",
+        "@esbuild/linux-riscv64": "0.20.2",
+        "@esbuild/linux-s390x": "0.20.2",
+        "@esbuild/linux-x64": "0.20.2",
+        "@esbuild/netbsd-x64": "0.20.2",
+        "@esbuild/openbsd-x64": "0.20.2",
+        "@esbuild/sunos-x64": "0.20.2",
+        "@esbuild/win32-arm64": "0.20.2",
+        "@esbuild/win32-ia32": "0.20.2",
+        "@esbuild/win32-x64": "0.20.2"
+      }
+    },
+    "node_modules/esbuild-server": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/esbuild-server/-/esbuild-server-0.3.0.tgz",
+      "integrity": "sha512-8RuzIdM13gs7MyYwxn/c88nDdx086aREBvzWDk4G3cC7nudF8480OTrvAvanVmFZ9anDv9U4cRX/OKbladaRVA==",
+      "dev": true,
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "esbuild": ">=0.17.0"
+      }
+    }
+  }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..8493051
--- /dev/null
+++ b/package.json
@@ -0,0 +1,6 @@
+{
+  "devDependencies": {
+    "esbuild": "^0.20.2",
+    "esbuild-server": "^0.3.0"
+  }
+}
diff --git a/public/counter_prone.jpg b/public/counter_prone.jpg
new file mode 100644
index 0000000..a8e9b46
--- /dev/null
+++ b/public/counter_prone.jpg
diff --git a/public/damage_block.css b/public/damage_block.css
new file mode 100644
index 0000000..f050e36
--- /dev/null
+++ b/public/damage_block.css
@@ -0,0 +1,64 @@
+.damage-selector, .damage-effect-indicator, label {
+  width: 20px;
+}
+
+.damage-selector, .damage-effect-indicator {
+  height: 30px;
+}
+
+.damage-selector {
+  margin: 0;
+  padding: 0;
+  border: 1px solid black;
+  display: inline-block;
+}
+
+.damage-effect-indicator {
+  position: absolute;
+  margin: 0;
+  padding: 0;
+  display: block;
+  pointer-events: none;
+  font-family: monospace;
+}
+
+.damage-selector.clear {
+  background-color: white;
+}
+
+.damage-selector.bruise {
+  background-color: orange;
+}
+
+.damage-selector.lethal {
+  background-color: red;
+}
+
+label input[type="radio"] {
+  position: absolute;
+  opacity: 0;
+  margin: 0;
+  padding: 0;
+}
+
+label {
+  display: none;
+  margin: 0 auto;
+  padding: 0;
+}
+
+label:first-of-type {
+  display: block;
+}
+
+label:has(input:checked) {
+  display: none;
+}
+
+label:has(+ label input:checked) {
+  display: none;
+}
+
+label:has(input:checked) + label {
+  display: block;
+}
diff --git a/public/firing_arc_large.png b/public/firing_arc_large.png
new file mode 100644
index 0000000..c787537
--- /dev/null
+++ b/public/firing_arc_large.png
diff --git a/public/firing_arc_medium.png b/public/firing_arc_medium.png
new file mode 100644
index 0000000..6cc69ce
--- /dev/null
+++ b/public/firing_arc_medium.png
diff --git a/public/firing_arc_small.png b/public/firing_arc_small.png
new file mode 100644
index 0000000..80afcb0
--- /dev/null
+++ b/public/firing_arc_small.png
diff --git a/public/index.html b/public/index.html
new file mode 100644
index 0000000..063797f
--- /dev/null
+++ b/public/index.html
@@ -0,0 +1,390 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Infantry Combat Solo Basic</title>
+    <link rel="stylesheet" href="style.css">
+  </head>
+  <body>
+    <template id="damage-block">
+      <link rel="stylesheet" href="damage_block.css">
+
+      <slot name="block-number"></slot>
+      <span class="damage-effect-indicator">
+        <slot name="firing-modifier"></slot><br>
+        <slot name="movement-points"></slot>
+      </span>
+      <label>
+        <input type="radio" name="damage" checked>
+        <span class="damage-selector lethal"></span>
+      </label>
+      <label>
+        <input type="radio" name="damage">
+        <span class="damage-selector clear"></span>
+      </label>
+      <label>
+        <input type="radio" name="damage">
+        <span class="damage-selector bruise"></span>
+      </label>
+    </template>
+
+    <template id="soldier-record-block">
+      <link rel="stylesheet" href="soldier_record_block.css">
+
+      <p class="physical-status-track">
+        <span is="damage-block">
+          <span slot="block-number">10</span>
+          <span slot="movement-points">8</span>
+        </span>
+        <span is="damage-block">
+          <span slot="block-number">9</span>
+          <span slot="movement-points">8</span>
+        </span>
+        <span is="damage-block">
+          <span slot="block-number">8</span>
+          <span slot="movement-points">8</span>
+        </span>
+        <span is="damage-block">
+          <span slot="block-number">7</span>
+          <span slot="movement-points">8</span>
+          <span slot="firing-modifier">+1</span>
+        </span>
+        <span is="damage-block">
+          <span slot="block-number">6</span>
+          <span slot="movement-points">7</span>
+          <span slot="firing-modifier">+1</span>
+        </span>
+        <span is="damage-block">
+          <span slot="block-number">5</span>
+          <span slot="movement-points">7</span>
+          <span slot="firing-modifier">+2</span>
+        </span>
+        <span is="damage-block">
+          <span slot="block-number">4</span>
+          <span slot="movement-points">6</span>
+          <span slot="firing-modifier">+2</span>
+        </span>
+        <span is="damage-block">
+          <span slot="block-number">3</span>
+          <span slot="movement-points">6</span>
+          <span slot="firing-modifier">+2</span>
+        </span>
+        <span is="damage-block">
+          <span slot="block-number">2</span>
+          <span slot="movement-points">5</span>
+          <span slot="firing-modifier">+3</span>
+        </span>
+        <span is="damage-block">
+          <span slot="block-number">1</span>
+          <span slot="movement-points">4</span>
+          <span slot="firing-modifier">+3</span>
+        </span>
+        <span is="damage-block">
+          <span slot="block-number">0</span>
+          <span slot="movement-points">None</span>
+          <span slot="firing-modifier">0</span>
+        </span>
+        <span is="damage-block">
+          <span slot="block-number">DEAD</span>
+        </span>
+      </p>
+
+      <p><span>Troop Number</span> <slot name="troop-number">1</slot></p>
+      <p><span>Primary Weapon Type</span> <slot name="primary-weapon-type">Rifle</slot></p>
+      <ul>
+        <li><span>Damage</span> <slot name="primary-weapon-damage">4L</slot></li>
+        <li><span>Short</span> <slot name="primary-weapon-range-short">1-27</slot></li>
+        <li><span>Long</span> <slot name="primary-weapon-range-long">28-75</slot></li>
+      </ul>
+      <p>
+        <span>Hand Grenades</span>
+        <input type="number" min="0" max="4" value="4" />
+      </p>
+    </template>
+
+    <div id="map-container">
+      <div id="toggle-firing-arc-vis">
+        <div>davion</div>
+        <input type="checkbox" data-allegiance="davion" />
+        <div>liao</div>
+        <input type="checkbox" data-allegiance="liao" />
+      </div>
+
+      <div id="panel">
+        <fieldset name="point">
+          <legend>hex</legend>
+          <div>
+            <label>translateX <input name="translateX" type="number" step="0.1" value="0" /></label>
+            <label>translateY <input name="translateY" type="number" step="0.1" value="0" /></label>
+            <label>rotate <input name="rotate" type="number" step="0.1" value="0" /></label>
+            <label>scaleX <input name="scaleX" type="number" step="0.1" value="1" /></label>
+            <label>scaleY <input name="scaleY" type="number" step="0.1" value="1" /></label>
+          </div>
+        </fieldset>
+        <fieldset name="points">
+          <legend>grid</legend>
+          <div>
+            <label>translateX <input name="translateX" type="number" step="0.1" value="0" /></label>
+            <label>translateY <input name="translateY" type="number" step="0.1" value="0" /></label>
+            <label>rotate <input name="rotate" type="number" step="0.1" value="0" /></label>
+            <label>scaleX <input name="scaleX" type="number" step="0.1" value="1" /></label>
+            <label>scaleY <input name="scaleY" type="number" step="0.1" value="1" /></label>
+          </div>
+        </fieldset>
+        <fieldset name="map2">
+          <legend>map2</legend>
+          <div>
+            <label>translateX <input name="translateX" type="number" step="0.1" value="0" /></label>
+            <label>translateY <input name="translateY" type="number" step="0.1" value="0" /></label>
+            <label>rotate <input name="rotate" type="number" step="0.1" value="0" /></label>
+            <label>scaleX <input name="scaleX" type="number" step="0.001" value="1" /></label>
+            <label>scaleY <input name="scaleY" type="number" step="0.001" value="1" /></label>
+          </div>
+        </fieldset>
+        <fieldset name="map3">
+          <legend>map3</legend>
+          <div>
+            <label>translateX <input name="translateX" type="number" step="0.1" value="0" /></label>
+            <label>translateY <input name="translateY" type="number" step="0.1" value="0" /></label>
+            <label>rotate <input name="rotate" type="number" step="0.1" value="0" /></label>
+            <label>scaleX <input name="scaleX" type="number" step="0.001" value="1" /></label>
+            <label>scaleY <input name="scaleY" type="number" step="0.001" value="1" /></label>
+          </div>
+        </fieldset>
+      </div>
+
+      <object type="image/svg+xml" data="map.svg"></object>
+
+      <!-- <svg viewbox="-49 -40 2390 3163" xmlns="http://www.w3.org/2000/svg">
+        <defs>
+          <polygon id="point" points="0,10 8.66,5 8.66,-5 0,-10 -8.66,-5 -8.66,5" />
+
+          <circle id="counter-base" cx="0" cy="0" r="5" />
+
+          <g id="t-1" class="troop-counter-template"><use href="#counter-base" /><text>1</text></g>
+          <g id="t-2" class="troop-counter-template"><use href="#counter-base" /><text>2</text></g>
+          <g id="t-3" class="troop-counter-template"><use href="#counter-base" /><text>3</text></g>
+          <g id="t-4" class="troop-counter-template"><use href="#counter-base" /><text>4</text></g>
+          <g id="t-5" class="troop-counter-template"><use href="#counter-base" /><text>5</text></g>
+          <g id="t-6" class="troop-counter-template"><use href="#counter-base" /><text>6</text></g>
+          <g id="t-7" class="troop-counter-template"><use href="#counter-base" /><text>7</text></g>
+
+          <g id="davion-1" class="troop-counter"><use href="#t-1" /></g>
+          <g id="davion-2" class="troop-counter"><use href="#t-2" /></g>
+          <g id="davion-3" class="troop-counter"><use href="#t-3" /></g>
+          <g id="davion-4" class="troop-counter"><use href="#t-4" /></g>
+          <g id="davion-5" class="troop-counter"><use href="#t-5" /></g>
+          <g id="davion-6" class="troop-counter"><use href="#t-6" /></g>
+          <g id="davion-7" class="troop-counter"><use href="#t-7" /></g>
+
+          <g id="liao-1" class="troop-counter"><use href="#t-1" /></g>
+          <g id="liao-2" class="troop-counter"><use href="#t-2" /></g>
+          <g id="liao-3" class="troop-counter"><use href="#t-3" /></g>
+          <g id="liao-4" class="troop-counter"><use href="#t-4" /></g>
+          <g id="liao-5" class="troop-counter"><use href="#t-5" /></g>
+          <g id="liao-6" class="troop-counter"><use href="#t-6" /></g>
+          <g id="liao-7" class="troop-counter"><use href="#t-7" /></g>
+
+          <image id="counter-prone" href="counter_prone.jpg" width="10px" />
+          <image id="numbers" href="rendered_numbers.png" width="182" height="22" />
+
+          <symbol id="n1" viewBox="1 0 17 22" width="17" height="22"><use href="#numbers" /></symbol>
+          <symbol id="n2" viewBox="19 0 16 22" width="16" height="22"><use href="#numbers" /></symbol>
+          <symbol id="n3" viewBox="36 0 18 22" width="18" height="22"><use href="#numbers" /></symbol>
+          <symbol id="n4" viewBox="54 0 18 22" width="18" height="22"><use href="#numbers" /></symbol>
+          <symbol id="n5" viewBox="0 0 18 22" width="18" height="22"><use href="#numbers" /></symbol>
+          <symbol id="n6" viewBox="0 0 18 22" width="18" height="22"><use href="#numbers" /></symbol>
+          <symbol id="n7" viewBox="0 0 18 22" width="18" height="22"><use href="#numbers" /></symbol>
+          <symbol id="n8" viewBox="0 0 18 22" width="18" height="22"><use href="#numbers" /></symbol>
+          <symbol id="n9" viewBox="0 0 18 22" width="18" height="22"><use href="#numbers" /></symbol>
+          <symbol id="n0" viewBox="0 0 18 22" width="18" height="22"><use href="#numbers" /></symbol>
+        </defs>
+
+        <rect id="background" x="-1" y="-1" width="2287" height="3087" />
+
+        <g id="image-maps">
+          <image id="map2" class="map-scans" href="scans/map2.jpg" width="2284" height="1518" />
+          <image id="map3" class="map-scans" href="scans/map3.jpg" width="2284" height="1518" />
+        </g>
+
+        <g id="firing-arcs">
+          <g id="shapes"></g>
+          <g id="lines"></g>
+        </g>
+
+        <g id="grid">
+          <g id="points"></g>
+          <g id="counters"></g>
+        </g>
+
+        <image href="rendered_numbers.png" x="0" y="-46" width="182" height="22" opacity="0.5" />
+
+        <use href="#n1" x="1" y="-40" opacity="0.5" />
+        <use href="#n2" x="19" y="-40" opacity="0.5" />
+        <use href="#n3" x="36" y="-40" opacity="0.5" />
+        <use href="#n4" x="54" y="-40" opacity="0.5" />
+      </svg> -->
+
+      <div id="status">
+        <span id="hex-counter">Distance: <span id="hex-count">-</span></span>
+      </div>
+    </div>
+
+    <div id="content">
+      <input type="checkbox" class="visible" checked />
+      <div>
+        Set firing arc:
+        <button type="button" class="set-firing-arc" data-size="small">
+          <img src="firing_arc_small.png" height="12" /> 2 MP
+        </button>
+        <button type="button" class="set-firing-arc" data-size="medium">
+          <img src="firing_arc_medium.png" height="12" /> 4 MP
+        </button>
+        <button type="button" class="set-firing-arc" data-size="large">
+          <img src="firing_arc_large.png" height="12" /> 6 MP
+        </button>
+        <br>
+        Prone: <input type="checkbox" id="toggle-prone-counter" />
+        Turn:
+        <span id="turn-count" data-update="0">
+          <span name="count">0</span>
+          <span class="inning-top">◓</span>
+          <span class="inning-bottom">◒</span>
+        </span>
+      </div>
+
+      <div id="record-sheet">
+        <div>
+          <!-- <img class="logo" src="logo-davion.png" /> -->
+          <p>
+            <strong>Davion</strong>
+            <button type="button" class="end-move" data-allegiance="davion">
+              End Movement
+            </button>
+            <button type="button" class="end-turn" data-allegiance="liao">
+              End Turn
+            </button>
+            <br>
+            <!-- 1st Squad, 3rd Platoon, Bravo Company, 2nd Battalion<br>
+            17th Kestral Mechanized Infantry -->
+          </p>
+          <div is="soldier-record-block" class="soldier-record selected" data-troop-number="1" data-troop-allegiance="davion">
+            <span slot="troop-number">1</span>
+            <span slot="primary-weapon-type">Rifle</span>
+            <span slot="primary-weapon-damage">4L</span>
+            <span slot="primary-weapon-range-short">1-27</span>
+            <span slot="primary-weapon-range-long">28-75</span>
+          </div>
+          <div is="soldier-record-block" class="soldier-record" data-troop-number="2" data-troop-allegiance="davion">
+            <span slot="troop-number">2</span>
+            <span slot="primary-weapon-type">Rifle</span>
+            <span slot="primary-weapon-damage">4L</span>
+            <span slot="primary-weapon-range-short">1-27</span>
+            <span slot="primary-weapon-range-long">28-75</span>
+          </div>
+          <div is="soldier-record-block" class="soldier-record" data-troop-number="3" data-troop-allegiance="davion">
+            <span slot="troop-number">3</span>
+            <span slot="primary-weapon-type">SMG</span>
+            <span slot="primary-weapon-damage">3L</span>
+            <span slot="primary-weapon-range-short">1-15</span>
+            <span slot="primary-weapon-range-long">16-25</span>
+          </div>
+          <div is="soldier-record-block" class="soldier-record" data-troop-number="4" data-troop-allegiance="davion">
+            <span slot="troop-number">4</span>
+            <span slot="primary-weapon-type">SMG</span>
+            <span slot="primary-weapon-damage">3L</span>
+            <span slot="primary-weapon-range-short">1-15</span>
+            <span slot="primary-weapon-range-long">16-25</span>
+          </div>
+          <div is="soldier-record-block" class="soldier-record" data-troop-number="5" data-troop-allegiance="davion">
+            <span slot="troop-number">5</span>
+            <span slot="primary-weapon-type">SMG</span>
+            <span slot="primary-weapon-damage">3L</span>
+            <span slot="primary-weapon-range-short">1-15</span>
+            <span slot="primary-weapon-range-long">16-25</span>
+          </div>
+          <div is="soldier-record-block" class="soldier-record" data-troop-number="6" data-troop-allegiance="davion">
+            <span slot="troop-number">6</span>
+            <span slot="primary-weapon-type">SMG</span>
+            <span slot="primary-weapon-damage">3L</span>
+            <span slot="primary-weapon-range-short">1-15</span>
+            <span slot="primary-weapon-range-long">16-25</span>
+          </div>
+          <div is="soldier-record-block" class="soldier-record" data-troop-number="7" data-troop-allegiance="davion">
+            <span slot="troop-number">7</span>
+            <span slot="primary-weapon-type">Blazer</span>
+            <span slot="primary-weapon-damage">4L</span>
+            <span slot="primary-weapon-range-short">1-17</span>
+            <span slot="primary-weapon-range-long">18-105</span>
+          </div>
+        </div>
+        <div>
+          <!-- <img class="logo" src="logo-liao.png" /> -->
+          <p>
+            <strong>Liao</strong>
+            <button type="button" class="end-move" data-allegiance="liao">
+              End Movement
+            </button>
+            <button type="button" class="end-turn" data-allegiance="davion">
+              End Turn
+            </button>
+            <br>
+            <!-- 2nd Squad, 1st Platoon, 3rd Company, 2nd Battalion<br>
+            Aldebaran Home Guard -->
+          </p>
+          <div is="soldier-record-block" class="soldier-record" data-troop-number="1" data-troop-allegiance="liao">
+            <span slot="troop-number">1</span>
+            <span slot="primary-weapon-type">Rifle</span>
+            <span slot="primary-weapon-damage">4L</span>
+            <span slot="primary-weapon-range-short">1-27</span>
+            <span slot="primary-weapon-range-long">28-75</span>
+          </div>
+          <div is="soldier-record-block" class="soldier-record" data-troop-number="2" data-troop-allegiance="liao">
+            <span slot="troop-number">2</span>
+            <span slot="primary-weapon-type">Rifle</span>
+            <span slot="primary-weapon-damage">4L</span>
+            <span slot="primary-weapon-range-short">1-27</span>
+            <span slot="primary-weapon-range-long">28-75</span>
+          </div>
+          <div is="soldier-record-block" class="soldier-record" data-troop-number="3" data-troop-allegiance="liao">
+            <span slot="troop-number">3</span>
+            <span slot="primary-weapon-type">SMG</span>
+            <span slot="primary-weapon-damage">3L</span>
+            <span slot="primary-weapon-range-short">1-15</span>
+            <span slot="primary-weapon-range-long">16-25</span>
+          </div>
+          <div is="soldier-record-block" class="soldier-record" data-troop-number="4" data-troop-allegiance="liao">
+            <span slot="troop-number">4</span>
+            <span slot="primary-weapon-type">SMG</span>
+            <span slot="primary-weapon-damage">3L</span>
+            <span slot="primary-weapon-range-short">1-15</span>
+            <span slot="primary-weapon-range-long">16-25</span>
+          </div>
+          <div is="soldier-record-block" class="soldier-record" data-troop-number="5" data-troop-allegiance="liao">
+            <span slot="troop-number">5</span>
+            <span slot="primary-weapon-type">SMG</span>
+            <span slot="primary-weapon-damage">3L</span>
+            <span slot="primary-weapon-range-short">1-15</span>
+            <span slot="primary-weapon-range-long">16-25</span>
+          </div>
+          <div is="soldier-record-block" class="soldier-record" data-troop-number="6" data-troop-allegiance="liao">
+            <span slot="troop-number">6</span>
+            <span slot="primary-weapon-type">SMG</span>
+            <span slot="primary-weapon-damage">3L</span>
+            <span slot="primary-weapon-range-short">1-15</span>
+            <span slot="primary-weapon-range-long">16-25</span>
+          </div>
+          <div is="soldier-record-block" class="soldier-record" data-troop-number="7" data-troop-allegiance="liao">
+            <span slot="troop-number">7</span>
+            <span slot="primary-weapon-type">Blazer</span>
+            <span slot="primary-weapon-damage">4L</span>
+            <span slot="primary-weapon-range-short">1-17</span>
+            <span slot="primary-weapon-range-long">18-105</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script src="soldier_record_block.js"></script>
+    <script src="index.js"></script>
+  </body>
+</html>
+\ No newline at end of file
diff --git a/public/map.svg b/public/map.svg
new file mode 100644
index 0000000..d977609
--- /dev/null
+++ b/public/map.svg
@@ -0,0 +1,1920 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg viewBox="-1440 1499 2390 3163" xmlns="http://www.w3.org/2000/svg">
+  <style>
+    image {
+      image-rendering: pixelated;
+    }
+
+    image.map-scans {
+      image-rendering: auto;
+    }
+
+    text {
+      user-select: none;
+    }
+
+    defs > #point {
+      fill: inherit;
+      fill-opacity: inherit;
+      stroke: inherit;
+      stroke-width: inherit;
+      stroke-opacity: inherit;
+    }
+
+    use[href="#point"] {
+      opacity: 0;
+      fill: teal;
+      fill-opacity: 0.2;
+      stroke: black;
+      stroke-width: 0.5px;
+    }
+
+    use[href="#point"]:hover, use[href="#point"].hover {
+      opacity: 1;
+      fill: orange;
+    }
+
+    use[href="#point"].active {
+      opacity: 0.2;
+    }
+
+    use[href="#point"].sight-line-target {
+      opacity: 1;
+      stroke: orangered;
+      /* stroke-width: 1px; */
+      fill-opacity: 0.04;
+    }
+
+    polyline.move-trace {
+      stroke: gray;
+      stroke-dasharray: 2;
+      fill: none;
+    }
+
+    #background {
+      fill: #bacae3;
+    }
+
+    g#grid {
+      transform: translate(19px, 31px) scale(4);
+    }
+
+    #map2 {
+      transform-origin: 0px 0px;
+      transform: translate(-0.9px, -2.4px) scale(0.999, 1.007);
+    }
+
+    #map3 {
+      transform-origin: 0px 0px;
+      transform: translate(1.3px, 1564.1px) rotate(0.1deg) scale(0.999, 1.002);
+    }
+
+    #counter-base {
+      r: inherit;
+    }
+
+    g.troop-counter-template, g.troop-counter-template use {
+      r: inherit;
+    }
+
+    g.troop-counter, g.troop-counter use {
+      r: inherit;
+    }
+
+    g.troop-counter-template text {
+      fill: white;
+      font-size: 12px;
+      font-weight: bold;
+      font-family: monospace;
+      cursor: default;
+      text-anchor: middle;
+      pointer-events: none;
+      user-select: none;
+      transform: translateY(4px);
+      stroke: none;
+    }
+
+    g.troop-counter [href="#counter-prone"] {
+      transform: translate(-5px, 6px);
+    }
+
+    g#points g use.counter {
+      r: 5px;
+    }
+
+    g#points g.hover use[href="#point"] {
+      opacity: 1;
+      fill: orange;
+    }
+
+    g#points g.hover use.counter {
+      r: 7px;
+    }
+
+    g#points use.counter[data-troop-allegiance="davion"] {
+      fill: red;
+    }
+
+    g#points use.counter[data-troop-allegiance="liao"] {
+      fill: green;
+    }
+
+    g#points use.clone {
+      stroke: white;
+      stroke-width: 0.5px;
+      stroke-dasharray: 1;
+    }
+
+    g#points use[data-troop-allegiance="davion"].clone {
+      fill: rgb(255, 126, 126);
+    }
+
+    g#points use[data-troop-allegiance="liao"].clone {
+      fill: rgb(130, 190, 130);
+    }
+
+    text.counter, #troop-counter text {
+      font-size: 12px;
+      font-weight: bold;
+      fill: white;
+      font-family: sans-serif;
+      cursor: default;
+      text-anchor: middle;
+      transform: translateY(4px);
+      pointer-events: none;
+      user-select: none;
+    }
+
+    polygon.firing-arc[data-troop-allegiance="davion"] {
+      fill: red;
+    }
+
+    polygon.firing-arc[data-troop-allegiance="liao"] {
+      fill: green;
+    }
+
+    #shapes {
+      opacity: 0.1;
+    }
+
+    #shapes polygon {
+      stroke: none;
+    }
+
+    #lines polygon {
+      fill: none;
+      stroke: black;
+    }
+
+    .sight-line {
+      stroke: orangered;
+      stroke-width: 0.5px;
+      pointer-events: none;
+    }
+  </style>
+  <defs>
+    <polygon id="point" points="0,10 8.66,5 8.66,-5 0,-10 -8.66,-5 -8.66,5"/>
+
+    <circle id="counter-base" cx="0" cy="0" r="5"/>
+
+    <g id="t-1" class="troop-counter-template"><use href="#counter-base"/><text>1</text></g>
+    <g id="t-2" class="troop-counter-template"><use href="#counter-base"/><text>2</text></g>
+    <g id="t-3" class="troop-counter-template"><use href="#counter-base"/><text>3</text></g>
+    <g id="t-4" class="troop-counter-template"><use href="#counter-base"/><text>4</text></g>
+    <g id="t-5" class="troop-counter-template"><use href="#counter-base"/><text>5</text></g>
+    <g id="t-6" class="troop-counter-template"><use href="#counter-base"/><text>6</text></g>
+    <g id="t-7" class="troop-counter-template"><use href="#counter-base"/><text>7</text></g>
+
+    <g id="davion-1" class="troop-counter"><use href="#t-1"/></g>
+    <g id="davion-2" class="troop-counter"><use href="#t-2"/></g>
+    <g id="davion-3" class="troop-counter"><use href="#t-3"/></g>
+    <g id="davion-4" class="troop-counter"><use href="#t-4"/></g>
+    <g id="davion-5" class="troop-counter"><use href="#t-5"/></g>
+    <g id="davion-6" class="troop-counter"><use href="#t-6"/></g>
+    <g id="davion-7" class="troop-counter"><use href="#t-7"/></g>
+
+    <g id="liao-1" class="troop-counter"><use href="#t-1"/></g>
+    <g id="liao-2" class="troop-counter"><use href="#t-2"/></g>
+    <g id="liao-3" class="troop-counter"><use href="#t-3"/></g>
+    <g id="liao-4" class="troop-counter"><use href="#t-4"/></g>
+    <g id="liao-5" class="troop-counter"><use href="#t-5"/></g>
+    <g id="liao-6" class="troop-counter"><use href="#t-6"/></g>
+    <g id="liao-7" class="troop-counter"><use href="#t-7"/></g>
+
+    <image id="counter-prone" href="counter_prone.jpg" width="10px"/>
+    <image id="numbers" href="rendered_numbers.png" width="182" height="22"/>
+
+    <symbol id="n1" viewBox="1 0 17 22" width="17" height="22"><use href="#numbers"/></symbol>
+    <symbol id="n2" viewBox="19 0 16 22" width="16" height="22"><use href="#numbers"/></symbol>
+    <symbol id="n3" viewBox="36 0 18 22" width="18" height="22"><use href="#numbers"/></symbol>
+    <symbol id="n4" viewBox="54 0 18 22" width="18" height="22"><use href="#numbers"/></symbol>
+    <symbol id="n5" viewBox="0 0 18 22" width="18" height="22"><use href="#numbers"/></symbol>
+    <symbol id="n6" viewBox="0 0 18 22" width="18" height="22"><use href="#numbers"/></symbol>
+    <symbol id="n7" viewBox="0 0 18 22" width="18" height="22"><use href="#numbers"/></symbol>
+    <symbol id="n8" viewBox="0 0 18 22" width="18" height="22"><use href="#numbers"/></symbol>
+    <symbol id="n9" viewBox="0 0 18 22" width="18" height="22"><use href="#numbers"/></symbol>
+    <symbol id="n0" viewBox="0 0 18 22" width="18" height="22"><use href="#numbers"/></symbol>
+  </defs>
+
+  <rect id="background" x="-1" y="-1" width="2287" height="3087"/>
+
+  <g id="image-maps">
+    <image id="map2" class="map-scans" href="scans/map2.jpg" width="2284" height="1518"/>
+    <image id="map3" class="map-scans" href="scans/map3.jpg" width="2284" height="1518"/>
+  </g>
+
+  <g id="firing-arcs">
+    <g id="shapes"/>
+    <g id="lines"/>
+  </g>
+
+  <g id="grid">
+    <g id="points">
+      <g transform="translate(8.7 0)" data-x="0" data-y="0"><use href="#point" x="0" y="0" data-x="0" data-y="0"/></g>
+      <g transform="translate(26 0)" data-x="1" data-y="0"><use href="#point" x="0" y="0" data-x="1" data-y="0"/></g>
+      <g transform="translate(43.3 0)" data-x="2" data-y="0"><use href="#point" x="0" y="0" data-x="2" data-y="0"/></g>
+      <g transform="translate(60.6 0)" data-x="3" data-y="0"><use href="#point" x="0" y="0" data-x="3" data-y="0"/></g>
+      <g transform="translate(77.9 0)" data-x="4" data-y="0"><use href="#point" x="0" y="0" data-x="4" data-y="0"/></g>
+      <g transform="translate(95.3 0)" data-x="5" data-y="0"><use href="#point" x="0" y="0" data-x="5" data-y="0"/></g>
+      <g transform="translate(112.6 0)" data-x="6" data-y="0"><use href="#point" x="0" y="0" data-x="6" data-y="0"/></g>
+      <g transform="translate(129.9 0)" data-x="7" data-y="0"><use href="#point" x="0" y="0" data-x="7" data-y="0"/></g>
+      <g transform="translate(147.2 0)" data-x="8" data-y="0"><use href="#point" x="0" y="0" data-x="8" data-y="0"/></g>
+      <g transform="translate(164.5 0)" data-x="9" data-y="0"><use href="#point" x="0" y="0" data-x="9" data-y="0"/></g>
+      <g transform="translate(181.9 0)" data-x="10" data-y="0"><use href="#point" x="0" y="0" data-x="10" data-y="0"/></g>
+      <g transform="translate(199.2 0)" data-x="11" data-y="0"><use href="#point" x="0" y="0" data-x="11" data-y="0"/></g>
+      <g transform="translate(216.5 0)" data-x="12" data-y="0"><use href="#point" x="0" y="0" data-x="12" data-y="0"/></g>
+      <g transform="translate(233.8 0)" data-x="13" data-y="0"><use href="#point" x="0" y="0" data-x="13" data-y="0"/></g>
+      <g transform="translate(251.1 0)" data-x="14" data-y="0"><use href="#point" x="0" y="0" data-x="14" data-y="0"/></g>
+      <g transform="translate(268.5 0)" data-x="15" data-y="0"><use href="#point" x="0" y="0" data-x="15" data-y="0"/></g>
+      <g transform="translate(285.8 0)" data-x="16" data-y="0"><use href="#point" x="0" y="0" data-x="16" data-y="0"/></g>
+      <g transform="translate(303.1 0)" data-x="17" data-y="0"><use href="#point" x="0" y="0" data-x="17" data-y="0"/></g>
+      <g transform="translate(320.4 0)" data-x="18" data-y="0"><use href="#point" x="0" y="0" data-x="18" data-y="0"/></g>
+      <g transform="translate(337.7 0)" data-x="19" data-y="0"><use href="#point" x="0" y="0" data-x="19" data-y="0"/></g>
+      <g transform="translate(355.1 0)" data-x="20" data-y="0"><use href="#point" x="0" y="0" data-x="20" data-y="0"/></g>
+      <g transform="translate(372.4 0)" data-x="21" data-y="0"><use href="#point" x="0" y="0" data-x="21" data-y="0"/></g>
+      <g transform="translate(389.7 0)" data-x="22" data-y="0"><use href="#point" x="0" y="0" data-x="22" data-y="0"/></g>
+      <g transform="translate(407 0)" data-x="23" data-y="0"><use href="#point" x="0" y="0" data-x="23" data-y="0"/></g>
+      <g transform="translate(424.4 0)" data-x="24" data-y="0"><use href="#point" x="0" y="0" data-x="24" data-y="0"/></g>
+      <g transform="translate(441.7 0)" data-x="25" data-y="0"><use href="#point" x="0" y="0" data-x="25" data-y="0"/></g>
+      <g transform="translate(459 0)" data-x="26" data-y="0"><use href="#point" x="0" y="0" data-x="26" data-y="0"/></g>
+      <g transform="translate(476.3 0)" data-x="27" data-y="0"><use href="#point" x="0" y="0" data-x="27" data-y="0"/></g>
+      <g transform="translate(493.6 0)" data-x="28" data-y="0"><use href="#point" x="0" y="0" data-x="28" data-y="0"/></g>
+      <g transform="translate(511 0)" data-x="29" data-y="0"><use href="#point" x="0" y="0" data-x="29" data-y="0"/></g>
+      <g transform="translate(528.3 0)" data-x="30" data-y="0"><use href="#point" x="0" y="0" data-x="30" data-y="0"/></g>
+      <g transform="translate(545.6 0)" data-x="31" data-y="0"><use href="#point" x="0" y="0" data-x="31" data-y="0"/></g>
+      <g transform="translate(562.9 0)" data-x="32" data-y="0"><use href="#point" x="0" y="0" data-x="32" data-y="0"/></g>
+      <g transform="translate(0 15)" data-x="0" data-y="1"><use href="#point" x="0" y="0" data-x="0" data-y="1"/></g>
+      <g transform="translate(17.3 15)" data-x="1" data-y="1"><use href="#point" x="0" y="0" data-x="1" data-y="1"/></g>
+      <g transform="translate(34.6 15)" data-x="2" data-y="1"><use href="#point" x="0" y="0" data-x="2" data-y="1"/></g>
+      <g transform="translate(52 15)" data-x="3" data-y="1"><use href="#point" x="0" y="0" data-x="3" data-y="1"/></g>
+      <g transform="translate(69.3 15)" data-x="4" data-y="1"><use href="#point" x="0" y="0" data-x="4" data-y="1"/></g>
+      <g transform="translate(86.6 15)" data-x="5" data-y="1"><use href="#point" x="0" y="0" data-x="5" data-y="1"/></g>
+      <g transform="translate(103.9 15)" data-x="6" data-y="1"><use href="#point" x="0" y="0" data-x="6" data-y="1"/></g>
+      <g transform="translate(121.2 15)" data-x="7" data-y="1"><use href="#point" x="0" y="0" data-x="7" data-y="1"/></g>
+      <g transform="translate(138.6 15)" data-x="8" data-y="1"><use href="#point" x="0" y="0" data-x="8" data-y="1"/></g>
+      <g transform="translate(155.9 15)" data-x="9" data-y="1"><use href="#point" x="0" y="0" data-x="9" data-y="1"/></g>
+      <g transform="translate(173.2 15)" data-x="10" data-y="1"><use href="#point" x="0" y="0" data-x="10" data-y="1"/></g>
+      <g transform="translate(190.5 15)" data-x="11" data-y="1"><use href="#point" x="0" y="0" data-x="11" data-y="1"/></g>
+      <g transform="translate(207.8 15)" data-x="12" data-y="1"><use href="#point" x="0" y="0" data-x="12" data-y="1"/></g>
+      <g transform="translate(225.2 15)" data-x="13" data-y="1"><use href="#point" x="0" y="0" data-x="13" data-y="1"/></g>
+      <g transform="translate(242.5 15)" data-x="14" data-y="1"><use href="#point" x="0" y="0" data-x="14" data-y="1"/></g>
+      <g transform="translate(259.8 15)" data-x="15" data-y="1"><use href="#point" x="0" y="0" data-x="15" data-y="1"/></g>
+      <g transform="translate(277.1 15)" data-x="16" data-y="1"><use href="#point" x="0" y="0" data-x="16" data-y="1"/></g>
+      <g transform="translate(294.4 15)" data-x="17" data-y="1"><use href="#point" x="0" y="0" data-x="17" data-y="1"/></g>
+      <g transform="translate(311.8 15)" data-x="18" data-y="1"><use href="#point" x="0" y="0" data-x="18" data-y="1"/></g>
+      <g transform="translate(329.1 15)" data-x="19" data-y="1"><use href="#point" x="0" y="0" data-x="19" data-y="1"/></g>
+      <g transform="translate(346.4 15)" data-x="20" data-y="1"><use href="#point" x="0" y="0" data-x="20" data-y="1"/></g>
+      <g transform="translate(363.7 15)" data-x="21" data-y="1"><use href="#point" x="0" y="0" data-x="21" data-y="1"/></g>
+      <g transform="translate(381.1 15)" data-x="22" data-y="1"><use href="#point" x="0" y="0" data-x="22" data-y="1"/></g>
+      <g transform="translate(398.4 15)" data-x="23" data-y="1"><use href="#point" x="0" y="0" data-x="23" data-y="1"/></g>
+      <g transform="translate(415.7 15)" data-x="24" data-y="1"><use href="#point" x="0" y="0" data-x="24" data-y="1"/></g>
+      <g transform="translate(433 15)" data-x="25" data-y="1"><use href="#point" x="0" y="0" data-x="25" data-y="1"/></g>
+      <g transform="translate(450.3 15)" data-x="26" data-y="1"><use href="#point" x="0" y="0" data-x="26" data-y="1"/></g>
+      <g transform="translate(467.7 15)" data-x="27" data-y="1"><use href="#point" x="0" y="0" data-x="27" data-y="1"/></g>
+      <g transform="translate(485 15)" data-x="28" data-y="1"><use href="#point" x="0" y="0" data-x="28" data-y="1"/></g>
+      <g transform="translate(502.3 15)" data-x="29" data-y="1"><use href="#point" x="0" y="0" data-x="29" data-y="1"/></g>
+      <g transform="translate(519.6 15)" data-x="30" data-y="1"><use href="#point" x="0" y="0" data-x="30" data-y="1"/></g>
+      <g transform="translate(536.9 15)" data-x="31" data-y="1"><use href="#point" x="0" y="0" data-x="31" data-y="1"/></g>
+      <g transform="translate(554.3 15)" data-x="32" data-y="1"><use href="#point" x="0" y="0" data-x="32" data-y="1"/></g>
+      <g transform="translate(8.7 30)" data-x="0" data-y="2"><use href="#point" x="0" y="0" data-x="0" data-y="2"/></g>
+      <g transform="translate(26 30)" data-x="1" data-y="2"><use href="#point" x="0" y="0" data-x="1" data-y="2"/></g>
+      <g transform="translate(43.3 30)" data-x="2" data-y="2"><use href="#point" x="0" y="0" data-x="2" data-y="2"/></g>
+      <g transform="translate(60.6 30)" data-x="3" data-y="2"><use href="#point" x="0" y="0" data-x="3" data-y="2"/></g>
+      <g transform="translate(77.9 30)" data-x="4" data-y="2"><use href="#point" x="0" y="0" data-x="4" data-y="2"/></g>
+      <g transform="translate(95.3 30)" data-x="5" data-y="2"><use href="#point" x="0" y="0" data-x="5" data-y="2"/></g>
+      <g transform="translate(112.6 30)" data-x="6" data-y="2"><use href="#point" x="0" y="0" data-x="6" data-y="2"/></g>
+      <g transform="translate(129.9 30)" data-x="7" data-y="2"><use href="#point" x="0" y="0" data-x="7" data-y="2"/></g>
+      <g transform="translate(147.2 30)" data-x="8" data-y="2"><use href="#point" x="0" y="0" data-x="8" data-y="2"/></g>
+      <g transform="translate(164.5 30)" data-x="9" data-y="2"><use href="#point" x="0" y="0" data-x="9" data-y="2"/></g>
+      <g transform="translate(181.9 30)" data-x="10" data-y="2"><use href="#point" x="0" y="0" data-x="10" data-y="2"/></g>
+      <g transform="translate(199.2 30)" data-x="11" data-y="2"><use href="#point" x="0" y="0" data-x="11" data-y="2"/></g>
+      <g transform="translate(216.5 30)" data-x="12" data-y="2"><use href="#point" x="0" y="0" data-x="12" data-y="2"/></g>
+      <g transform="translate(233.8 30)" data-x="13" data-y="2"><use href="#point" x="0" y="0" data-x="13" data-y="2"/></g>
+      <g transform="translate(251.1 30)" data-x="14" data-y="2"><use href="#point" x="0" y="0" data-x="14" data-y="2"/></g>
+      <g transform="translate(268.5 30)" data-x="15" data-y="2"><use href="#point" x="0" y="0" data-x="15" data-y="2"/></g>
+      <g transform="translate(285.8 30)" data-x="16" data-y="2"><use href="#point" x="0" y="0" data-x="16" data-y="2"/></g>
+      <g transform="translate(303.1 30)" data-x="17" data-y="2"><use href="#point" x="0" y="0" data-x="17" data-y="2"/></g>
+      <g transform="translate(320.4 30)" data-x="18" data-y="2"><use href="#point" x="0" y="0" data-x="18" data-y="2"/></g>
+      <g transform="translate(337.7 30)" data-x="19" data-y="2"><use href="#point" x="0" y="0" data-x="19" data-y="2"/></g>
+      <g transform="translate(355.1 30)" data-x="20" data-y="2"><use href="#point" x="0" y="0" data-x="20" data-y="2"/></g>
+      <g transform="translate(372.4 30)" data-x="21" data-y="2"><use href="#point" x="0" y="0" data-x="21" data-y="2"/></g>
+      <g transform="translate(389.7 30)" data-x="22" data-y="2"><use href="#point" x="0" y="0" data-x="22" data-y="2"/></g>
+      <g transform="translate(407 30)" data-x="23" data-y="2"><use href="#point" x="0" y="0" data-x="23" data-y="2"/></g>
+      <g transform="translate(424.4 30)" data-x="24" data-y="2"><use href="#point" x="0" y="0" data-x="24" data-y="2"/></g>
+      <g transform="translate(441.7 30)" data-x="25" data-y="2"><use href="#point" x="0" y="0" data-x="25" data-y="2"/></g>
+      <g transform="translate(459 30)" data-x="26" data-y="2"><use href="#point" x="0" y="0" data-x="26" data-y="2"/></g>
+      <g transform="translate(476.3 30)" data-x="27" data-y="2"><use href="#point" x="0" y="0" data-x="27" data-y="2"/></g>
+      <g transform="translate(493.6 30)" data-x="28" data-y="2"><use href="#point" x="0" y="0" data-x="28" data-y="2"/></g>
+      <g transform="translate(511 30)" data-x="29" data-y="2"><use href="#point" x="0" y="0" data-x="29" data-y="2"/></g>
+      <g transform="translate(528.3 30)" data-x="30" data-y="2"><use href="#point" x="0" y="0" data-x="30" data-y="2"/></g>
+      <g transform="translate(545.6 30)" data-x="31" data-y="2"><use href="#point" x="0" y="0" data-x="31" data-y="2"/></g>
+      <g transform="translate(562.9 30)" data-x="32" data-y="2"><use href="#point" x="0" y="0" data-x="32" data-y="2"/></g>
+      <g transform="translate(0 45)" data-x="0" data-y="3"><use href="#point" x="0" y="0" data-x="0" data-y="3"/></g>
+      <g transform="translate(17.3 45)" data-x="1" data-y="3"><use href="#point" x="0" y="0" data-x="1" data-y="3"/></g>
+      <g transform="translate(34.6 45)" data-x="2" data-y="3"><use href="#point" x="0" y="0" data-x="2" data-y="3"/></g>
+      <g transform="translate(52 45)" data-x="3" data-y="3"><use href="#point" x="0" y="0" data-x="3" data-y="3"/></g>
+      <g transform="translate(69.3 45)" data-x="4" data-y="3"><use href="#point" x="0" y="0" data-x="4" data-y="3"/></g>
+      <g transform="translate(86.6 45)" data-x="5" data-y="3"><use href="#point" x="0" y="0" data-x="5" data-y="3"/></g>
+      <g transform="translate(103.9 45)" data-x="6" data-y="3"><use href="#point" x="0" y="0" data-x="6" data-y="3"/></g>
+      <g transform="translate(121.2 45)" data-x="7" data-y="3"><use href="#point" x="0" y="0" data-x="7" data-y="3"/></g>
+      <g transform="translate(138.6 45)" data-x="8" data-y="3"><use href="#point" x="0" y="0" data-x="8" data-y="3"/></g>
+      <g transform="translate(155.9 45)" data-x="9" data-y="3"><use href="#point" x="0" y="0" data-x="9" data-y="3"/></g>
+      <g transform="translate(173.2 45)" data-x="10" data-y="3"><use href="#point" x="0" y="0" data-x="10" data-y="3"/></g>
+      <g transform="translate(190.5 45)" data-x="11" data-y="3"><use href="#point" x="0" y="0" data-x="11" data-y="3"/></g>
+      <g transform="translate(207.8 45)" data-x="12" data-y="3"><use href="#point" x="0" y="0" data-x="12" data-y="3"/></g>
+      <g transform="translate(225.2 45)" data-x="13" data-y="3"><use href="#point" x="0" y="0" data-x="13" data-y="3"/></g>
+      <g transform="translate(242.5 45)" data-x="14" data-y="3"><use href="#point" x="0" y="0" data-x="14" data-y="3"/></g>
+      <g transform="translate(259.8 45)" data-x="15" data-y="3"><use href="#point" x="0" y="0" data-x="15" data-y="3"/></g>
+      <g transform="translate(277.1 45)" data-x="16" data-y="3"><use href="#point" x="0" y="0" data-x="16" data-y="3"/></g>
+      <g transform="translate(294.4 45)" data-x="17" data-y="3"><use href="#point" x="0" y="0" data-x="17" data-y="3"/></g>
+      <g transform="translate(311.8 45)" data-x="18" data-y="3"><use href="#point" x="0" y="0" data-x="18" data-y="3"/></g>
+      <g transform="translate(329.1 45)" data-x="19" data-y="3"><use href="#point" x="0" y="0" data-x="19" data-y="3"/></g>
+      <g transform="translate(346.4 45)" data-x="20" data-y="3"><use href="#point" x="0" y="0" data-x="20" data-y="3"/></g>
+      <g transform="translate(363.7 45)" data-x="21" data-y="3"><use href="#point" x="0" y="0" data-x="21" data-y="3"/></g>
+      <g transform="translate(381.1 45)" data-x="22" data-y="3"><use href="#point" x="0" y="0" data-x="22" data-y="3"/></g>
+      <g transform="translate(398.4 45)" data-x="23" data-y="3"><use href="#point" x="0" y="0" data-x="23" data-y="3"/></g>
+      <g transform="translate(415.7 45)" data-x="24" data-y="3"><use href="#point" x="0" y="0" data-x="24" data-y="3"/></g>
+      <g transform="translate(433 45)" data-x="25" data-y="3"><use href="#point" x="0" y="0" data-x="25" data-y="3"/></g>
+      <g transform="translate(450.3 45)" data-x="26" data-y="3"><use href="#point" x="0" y="0" data-x="26" data-y="3"/></g>
+      <g transform="translate(467.7 45)" data-x="27" data-y="3"><use href="#point" x="0" y="0" data-x="27" data-y="3"/></g>
+      <g transform="translate(485 45)" data-x="28" data-y="3"><use href="#point" x="0" y="0" data-x="28" data-y="3"/></g>
+      <g transform="translate(502.3 45)" data-x="29" data-y="3"><use href="#point" x="0" y="0" data-x="29" data-y="3"/></g>
+      <g transform="translate(519.6 45)" data-x="30" data-y="3"><use href="#point" x="0" y="0" data-x="30" data-y="3"/></g>
+      <g transform="translate(536.9 45)" data-x="31" data-y="3"><use href="#point" x="0" y="0" data-x="31" data-y="3"/></g>
+      <g transform="translate(554.3 45)" data-x="32" data-y="3"><use href="#point" x="0" y="0" data-x="32" data-y="3"/></g>
+      <g transform="translate(8.7 60)" data-x="0" data-y="4"><use href="#point" x="0" y="0" data-x="0" data-y="4"/></g>
+      <g transform="translate(26 60)" data-x="1" data-y="4"><use href="#point" x="0" y="0" data-x="1" data-y="4"/></g>
+      <g transform="translate(43.3 60)" data-x="2" data-y="4"><use href="#point" x="0" y="0" data-x="2" data-y="4"/></g>
+      <g transform="translate(60.6 60)" data-x="3" data-y="4"><use href="#point" x="0" y="0" data-x="3" data-y="4"/></g>
+      <g transform="translate(77.9 60)" data-x="4" data-y="4"><use href="#point" x="0" y="0" data-x="4" data-y="4"/></g>
+      <g transform="translate(95.3 60)" data-x="5" data-y="4"><use href="#point" x="0" y="0" data-x="5" data-y="4"/></g>
+      <g transform="translate(112.6 60)" data-x="6" data-y="4"><use href="#point" x="0" y="0" data-x="6" data-y="4"/></g>
+      <g transform="translate(129.9 60)" data-x="7" data-y="4"><use href="#point" x="0" y="0" data-x="7" data-y="4"/></g>
+      <g transform="translate(147.2 60)" data-x="8" data-y="4"><use href="#point" x="0" y="0" data-x="8" data-y="4"/></g>
+      <g transform="translate(164.5 60)" data-x="9" data-y="4"><use href="#point" x="0" y="0" data-x="9" data-y="4"/></g>
+      <g transform="translate(181.9 60)" data-x="10" data-y="4"><use href="#point" x="0" y="0" data-x="10" data-y="4"/></g>
+      <g transform="translate(199.2 60)" data-x="11" data-y="4"><use href="#point" x="0" y="0" data-x="11" data-y="4"/></g>
+      <g transform="translate(216.5 60)" data-x="12" data-y="4"><use href="#point" x="0" y="0" data-x="12" data-y="4"/></g>
+      <g transform="translate(233.8 60)" data-x="13" data-y="4"><use href="#point" x="0" y="0" data-x="13" data-y="4"/></g>
+      <g transform="translate(251.1 60)" data-x="14" data-y="4"><use href="#point" x="0" y="0" data-x="14" data-y="4"/></g>
+      <g transform="translate(268.5 60)" data-x="15" data-y="4"><use href="#point" x="0" y="0" data-x="15" data-y="4"/></g>
+      <g transform="translate(285.8 60)" data-x="16" data-y="4"><use href="#point" x="0" y="0" data-x="16" data-y="4"/></g>
+      <g transform="translate(303.1 60)" data-x="17" data-y="4"><use href="#point" x="0" y="0" data-x="17" data-y="4"/></g>
+      <g transform="translate(320.4 60)" data-x="18" data-y="4"><use href="#point" x="0" y="0" data-x="18" data-y="4"/></g>
+      <g transform="translate(337.7 60)" data-x="19" data-y="4"><use href="#point" x="0" y="0" data-x="19" data-y="4"/></g>
+      <g transform="translate(355.1 60)" data-x="20" data-y="4"><use href="#point" x="0" y="0" data-x="20" data-y="4"/></g>
+      <g transform="translate(372.4 60)" data-x="21" data-y="4"><use href="#point" x="0" y="0" data-x="21" data-y="4"/></g>
+      <g transform="translate(389.7 60)" data-x="22" data-y="4"><use href="#point" x="0" y="0" data-x="22" data-y="4"/></g>
+      <g transform="translate(407 60)" data-x="23" data-y="4"><use href="#point" x="0" y="0" data-x="23" data-y="4"/></g>
+      <g transform="translate(424.4 60)" data-x="24" data-y="4"><use href="#point" x="0" y="0" data-x="24" data-y="4"/></g>
+      <g transform="translate(441.7 60)" data-x="25" data-y="4"><use href="#point" x="0" y="0" data-x="25" data-y="4"/></g>
+      <g transform="translate(459 60)" data-x="26" data-y="4"><use href="#point" x="0" y="0" data-x="26" data-y="4"/></g>
+      <g transform="translate(476.3 60)" data-x="27" data-y="4"><use href="#point" x="0" y="0" data-x="27" data-y="4"/></g>
+      <g transform="translate(493.6 60)" data-x="28" data-y="4"><use href="#point" x="0" y="0" data-x="28" data-y="4"/></g>
+      <g transform="translate(511 60)" data-x="29" data-y="4"><use href="#point" x="0" y="0" data-x="29" data-y="4"/></g>
+      <g transform="translate(528.3 60)" data-x="30" data-y="4"><use href="#point" x="0" y="0" data-x="30" data-y="4"/></g>
+      <g transform="translate(545.6 60)" data-x="31" data-y="4"><use href="#point" x="0" y="0" data-x="31" data-y="4"/></g>
+      <g transform="translate(562.9 60)" data-x="32" data-y="4"><use href="#point" x="0" y="0" data-x="32" data-y="4"/></g>
+      <g transform="translate(0 75)" data-x="0" data-y="5"><use href="#point" x="0" y="0" data-x="0" data-y="5"/></g>
+      <g transform="translate(17.3 75)" data-x="1" data-y="5"><use href="#point" x="0" y="0" data-x="1" data-y="5"/></g>
+      <g transform="translate(34.6 75)" data-x="2" data-y="5"><use href="#point" x="0" y="0" data-x="2" data-y="5"/></g>
+      <g transform="translate(52 75)" data-x="3" data-y="5"><use href="#point" x="0" y="0" data-x="3" data-y="5"/></g>
+      <g transform="translate(69.3 75)" data-x="4" data-y="5"><use href="#point" x="0" y="0" data-x="4" data-y="5"/></g>
+      <g transform="translate(86.6 75)" data-x="5" data-y="5"><use href="#point" x="0" y="0" data-x="5" data-y="5"/></g>
+      <g transform="translate(103.9 75)" data-x="6" data-y="5"><use href="#point" x="0" y="0" data-x="6" data-y="5"/></g>
+      <g transform="translate(121.2 75)" data-x="7" data-y="5"><use href="#point" x="0" y="0" data-x="7" data-y="5"/></g>
+      <g transform="translate(138.6 75)" data-x="8" data-y="5"><use href="#point" x="0" y="0" data-x="8" data-y="5"/></g>
+      <g transform="translate(155.9 75)" data-x="9" data-y="5"><use href="#point" x="0" y="0" data-x="9" data-y="5"/></g>
+      <g transform="translate(173.2 75)" data-x="10" data-y="5"><use href="#point" x="0" y="0" data-x="10" data-y="5"/></g>
+      <g transform="translate(190.5 75)" data-x="11" data-y="5"><use href="#point" x="0" y="0" data-x="11" data-y="5"/></g>
+      <g transform="translate(207.8 75)" data-x="12" data-y="5"><use href="#point" x="0" y="0" data-x="12" data-y="5"/></g>
+      <g transform="translate(225.2 75)" data-x="13" data-y="5"><use href="#point" x="0" y="0" data-x="13" data-y="5"/></g>
+      <g transform="translate(242.5 75)" data-x="14" data-y="5"><use href="#point" x="0" y="0" data-x="14" data-y="5"/></g>
+      <g transform="translate(259.8 75)" data-x="15" data-y="5"><use href="#point" x="0" y="0" data-x="15" data-y="5"/></g>
+      <g transform="translate(277.1 75)" data-x="16" data-y="5"><use href="#point" x="0" y="0" data-x="16" data-y="5"/></g>
+      <g transform="translate(294.4 75)" data-x="17" data-y="5"><use href="#point" x="0" y="0" data-x="17" data-y="5"/></g>
+      <g transform="translate(311.8 75)" data-x="18" data-y="5"><use href="#point" x="0" y="0" data-x="18" data-y="5"/></g>
+      <g transform="translate(329.1 75)" data-x="19" data-y="5"><use href="#point" x="0" y="0" data-x="19" data-y="5"/></g>
+      <g transform="translate(346.4 75)" data-x="20" data-y="5"><use href="#point" x="0" y="0" data-x="20" data-y="5"/></g>
+      <g transform="translate(363.7 75)" data-x="21" data-y="5"><use href="#point" x="0" y="0" data-x="21" data-y="5"/></g>
+      <g transform="translate(381.1 75)" data-x="22" data-y="5"><use href="#point" x="0" y="0" data-x="22" data-y="5"/></g>
+      <g transform="translate(398.4 75)" data-x="23" data-y="5"><use href="#point" x="0" y="0" data-x="23" data-y="5"/></g>
+      <g transform="translate(415.7 75)" data-x="24" data-y="5"><use href="#point" x="0" y="0" data-x="24" data-y="5"/></g>
+      <g transform="translate(433 75)" data-x="25" data-y="5"><use href="#point" x="0" y="0" data-x="25" data-y="5"/></g>
+      <g transform="translate(450.3 75)" data-x="26" data-y="5"><use href="#point" x="0" y="0" data-x="26" data-y="5"/></g>
+      <g transform="translate(467.7 75)" data-x="27" data-y="5"><use href="#point" x="0" y="0" data-x="27" data-y="5"/></g>
+      <g transform="translate(485 75)" data-x="28" data-y="5"><use href="#point" x="0" y="0" data-x="28" data-y="5"/></g>
+      <g transform="translate(502.3 75)" data-x="29" data-y="5"><use href="#point" x="0" y="0" data-x="29" data-y="5"/></g>
+      <g transform="translate(519.6 75)" data-x="30" data-y="5"><use href="#point" x="0" y="0" data-x="30" data-y="5"/></g>
+      <g transform="translate(536.9 75)" data-x="31" data-y="5"><use href="#point" x="0" y="0" data-x="31" data-y="5"/></g>
+      <g transform="translate(554.3 75)" data-x="32" data-y="5"><use href="#point" x="0" y="0" data-x="32" data-y="5"/></g>
+      <g transform="translate(8.7 90)" data-x="0" data-y="6"><use href="#point" x="0" y="0" data-x="0" data-y="6"/></g>
+      <g transform="translate(26 90)" data-x="1" data-y="6"><use href="#point" x="0" y="0" data-x="1" data-y="6"/></g>
+      <g transform="translate(43.3 90)" data-x="2" data-y="6"><use href="#point" x="0" y="0" data-x="2" data-y="6"/></g>
+      <g transform="translate(60.6 90)" data-x="3" data-y="6"><use href="#point" x="0" y="0" data-x="3" data-y="6"/></g>
+      <g transform="translate(77.9 90)" data-x="4" data-y="6"><use href="#point" x="0" y="0" data-x="4" data-y="6"/></g>
+      <g transform="translate(95.3 90)" data-x="5" data-y="6"><use href="#point" x="0" y="0" data-x="5" data-y="6"/></g>
+      <g transform="translate(112.6 90)" data-x="6" data-y="6"><use href="#point" x="0" y="0" data-x="6" data-y="6"/></g>
+      <g transform="translate(129.9 90)" data-x="7" data-y="6"><use href="#point" x="0" y="0" data-x="7" data-y="6"/></g>
+      <g transform="translate(147.2 90)" data-x="8" data-y="6"><use href="#point" x="0" y="0" data-x="8" data-y="6"/></g>
+      <g transform="translate(164.5 90)" data-x="9" data-y="6"><use href="#point" x="0" y="0" data-x="9" data-y="6"/></g>
+      <g transform="translate(181.9 90)" data-x="10" data-y="6"><use href="#point" x="0" y="0" data-x="10" data-y="6"/></g>
+      <g transform="translate(199.2 90)" data-x="11" data-y="6"><use href="#point" x="0" y="0" data-x="11" data-y="6"/></g>
+      <g transform="translate(216.5 90)" data-x="12" data-y="6"><use href="#point" x="0" y="0" data-x="12" data-y="6"/></g>
+      <g transform="translate(233.8 90)" data-x="13" data-y="6"><use href="#point" x="0" y="0" data-x="13" data-y="6"/></g>
+      <g transform="translate(251.1 90)" data-x="14" data-y="6"><use href="#point" x="0" y="0" data-x="14" data-y="6"/></g>
+      <g transform="translate(268.5 90)" data-x="15" data-y="6"><use href="#point" x="0" y="0" data-x="15" data-y="6"/></g>
+      <g transform="translate(285.8 90)" data-x="16" data-y="6"><use href="#point" x="0" y="0" data-x="16" data-y="6"/></g>
+      <g transform="translate(303.1 90)" data-x="17" data-y="6"><use href="#point" x="0" y="0" data-x="17" data-y="6"/></g>
+      <g transform="translate(320.4 90)" data-x="18" data-y="6"><use href="#point" x="0" y="0" data-x="18" data-y="6"/></g>
+      <g transform="translate(337.7 90)" data-x="19" data-y="6"><use href="#point" x="0" y="0" data-x="19" data-y="6"/></g>
+      <g transform="translate(355.1 90)" data-x="20" data-y="6"><use href="#point" x="0" y="0" data-x="20" data-y="6"/></g>
+      <g transform="translate(372.4 90)" data-x="21" data-y="6"><use href="#point" x="0" y="0" data-x="21" data-y="6"/></g>
+      <g transform="translate(389.7 90)" data-x="22" data-y="6"><use href="#point" x="0" y="0" data-x="22" data-y="6"/></g>
+      <g transform="translate(407 90)" data-x="23" data-y="6"><use href="#point" x="0" y="0" data-x="23" data-y="6"/></g>
+      <g transform="translate(424.4 90)" data-x="24" data-y="6"><use href="#point" x="0" y="0" data-x="24" data-y="6"/></g>
+      <g transform="translate(441.7 90)" data-x="25" data-y="6"><use href="#point" x="0" y="0" data-x="25" data-y="6"/></g>
+      <g transform="translate(459 90)" data-x="26" data-y="6"><use href="#point" x="0" y="0" data-x="26" data-y="6"/></g>
+      <g transform="translate(476.3 90)" data-x="27" data-y="6"><use href="#point" x="0" y="0" data-x="27" data-y="6"/></g>
+      <g transform="translate(493.6 90)" data-x="28" data-y="6"><use href="#point" x="0" y="0" data-x="28" data-y="6"/></g>
+      <g transform="translate(511 90)" data-x="29" data-y="6"><use href="#point" x="0" y="0" data-x="29" data-y="6"/></g>
+      <g transform="translate(528.3 90)" data-x="30" data-y="6"><use href="#point" x="0" y="0" data-x="30" data-y="6"/></g>
+      <g transform="translate(545.6 90)" data-x="31" data-y="6"><use href="#point" x="0" y="0" data-x="31" data-y="6"/></g>
+      <g transform="translate(562.9 90)" data-x="32" data-y="6"><use href="#point" x="0" y="0" data-x="32" data-y="6"/></g>
+      <g transform="translate(0 105)" data-x="0" data-y="7"><use href="#point" x="0" y="0" data-x="0" data-y="7"/></g>
+      <g transform="translate(17.3 105)" data-x="1" data-y="7"><use href="#point" x="0" y="0" data-x="1" data-y="7"/></g>
+      <g transform="translate(34.6 105)" data-x="2" data-y="7"><use href="#point" x="0" y="0" data-x="2" data-y="7"/></g>
+      <g transform="translate(52 105)" data-x="3" data-y="7"><use href="#point" x="0" y="0" data-x="3" data-y="7"/></g>
+      <g transform="translate(69.3 105)" data-x="4" data-y="7"><use href="#point" x="0" y="0" data-x="4" data-y="7"/></g>
+      <g transform="translate(86.6 105)" data-x="5" data-y="7"><use href="#point" x="0" y="0" data-x="5" data-y="7"/></g>
+      <g transform="translate(103.9 105)" data-x="6" data-y="7"><use href="#point" x="0" y="0" data-x="6" data-y="7"/></g>
+      <g transform="translate(121.2 105)" data-x="7" data-y="7"><use href="#point" x="0" y="0" data-x="7" data-y="7"/></g>
+      <g transform="translate(138.6 105)" data-x="8" data-y="7"><use href="#point" x="0" y="0" data-x="8" data-y="7"/></g>
+      <g transform="translate(155.9 105)" data-x="9" data-y="7"><use href="#point" x="0" y="0" data-x="9" data-y="7"/></g>
+      <g transform="translate(173.2 105)" data-x="10" data-y="7"><use href="#point" x="0" y="0" data-x="10" data-y="7"/></g>
+      <g transform="translate(190.5 105)" data-x="11" data-y="7"><use href="#point" x="0" y="0" data-x="11" data-y="7"/></g>
+      <g transform="translate(207.8 105)" data-x="12" data-y="7"><use href="#point" x="0" y="0" data-x="12" data-y="7"/></g>
+      <g transform="translate(225.2 105)" data-x="13" data-y="7"><use href="#point" x="0" y="0" data-x="13" data-y="7"/></g>
+      <g transform="translate(242.5 105)" data-x="14" data-y="7"><use href="#point" x="0" y="0" data-x="14" data-y="7"/></g>
+      <g transform="translate(259.8 105)" data-x="15" data-y="7"><use href="#point" x="0" y="0" data-x="15" data-y="7"/></g>
+      <g transform="translate(277.1 105)" data-x="16" data-y="7"><use href="#point" x="0" y="0" data-x="16" data-y="7"/></g>
+      <g transform="translate(294.4 105)" data-x="17" data-y="7"><use href="#point" x="0" y="0" data-x="17" data-y="7"/></g>
+      <g transform="translate(311.8 105)" data-x="18" data-y="7"><use href="#point" x="0" y="0" data-x="18" data-y="7"/></g>
+      <g transform="translate(329.1 105)" data-x="19" data-y="7"><use href="#point" x="0" y="0" data-x="19" data-y="7"/></g>
+      <g transform="translate(346.4 105)" data-x="20" data-y="7"><use href="#point" x="0" y="0" data-x="20" data-y="7"/></g>
+      <g transform="translate(363.7 105)" data-x="21" data-y="7"><use href="#point" x="0" y="0" data-x="21" data-y="7"/></g>
+      <g transform="translate(381.1 105)" data-x="22" data-y="7"><use href="#point" x="0" y="0" data-x="22" data-y="7"/></g>
+      <g transform="translate(398.4 105)" data-x="23" data-y="7"><use href="#point" x="0" y="0" data-x="23" data-y="7"/></g>
+      <g transform="translate(415.7 105)" data-x="24" data-y="7"><use href="#point" x="0" y="0" data-x="24" data-y="7"/></g>
+      <g transform="translate(433 105)" data-x="25" data-y="7"><use href="#point" x="0" y="0" data-x="25" data-y="7"/></g>
+      <g transform="translate(450.3 105)" data-x="26" data-y="7"><use href="#point" x="0" y="0" data-x="26" data-y="7"/></g>
+      <g transform="translate(467.7 105)" data-x="27" data-y="7"><use href="#point" x="0" y="0" data-x="27" data-y="7"/></g>
+      <g transform="translate(485 105)" data-x="28" data-y="7"><use href="#point" x="0" y="0" data-x="28" data-y="7"/></g>
+      <g transform="translate(502.3 105)" data-x="29" data-y="7"><use href="#point" x="0" y="0" data-x="29" data-y="7"/></g>
+      <g transform="translate(519.6 105)" data-x="30" data-y="7"><use href="#point" x="0" y="0" data-x="30" data-y="7"/></g>
+      <g transform="translate(536.9 105)" data-x="31" data-y="7"><use href="#point" x="0" y="0" data-x="31" data-y="7"/></g>
+      <g transform="translate(554.3 105)" data-x="32" data-y="7"><use href="#point" x="0" y="0" data-x="32" data-y="7"/></g>
+      <g transform="translate(8.7 120)" data-x="0" data-y="8"><use href="#point" x="0" y="0" data-x="0" data-y="8"/></g>
+      <g transform="translate(26 120)" data-x="1" data-y="8"><use href="#point" x="0" y="0" data-x="1" data-y="8"/></g>
+      <g transform="translate(43.3 120)" data-x="2" data-y="8"><use href="#point" x="0" y="0" data-x="2" data-y="8"/></g>
+      <g transform="translate(60.6 120)" data-x="3" data-y="8"><use href="#point" x="0" y="0" data-x="3" data-y="8"/></g>
+      <g transform="translate(77.9 120)" data-x="4" data-y="8"><use href="#point" x="0" y="0" data-x="4" data-y="8"/></g>
+      <g transform="translate(95.3 120)" data-x="5" data-y="8"><use href="#point" x="0" y="0" data-x="5" data-y="8"/></g>
+      <g transform="translate(112.6 120)" data-x="6" data-y="8"><use href="#point" x="0" y="0" data-x="6" data-y="8"/></g>
+      <g transform="translate(129.9 120)" data-x="7" data-y="8"><use href="#point" x="0" y="0" data-x="7" data-y="8"/></g>
+      <g transform="translate(147.2 120)" data-x="8" data-y="8"><use href="#point" x="0" y="0" data-x="8" data-y="8"/></g>
+      <g transform="translate(164.5 120)" data-x="9" data-y="8"><use href="#point" x="0" y="0" data-x="9" data-y="8"/></g>
+      <g transform="translate(181.9 120)" data-x="10" data-y="8"><use href="#point" x="0" y="0" data-x="10" data-y="8"/></g>
+      <g transform="translate(199.2 120)" data-x="11" data-y="8"><use href="#point" x="0" y="0" data-x="11" data-y="8"/></g>
+      <g transform="translate(216.5 120)" data-x="12" data-y="8"><use href="#point" x="0" y="0" data-x="12" data-y="8"/></g>
+      <g transform="translate(233.8 120)" data-x="13" data-y="8"><use href="#point" x="0" y="0" data-x="13" data-y="8"/></g>
+      <g transform="translate(251.1 120)" data-x="14" data-y="8"><use href="#point" x="0" y="0" data-x="14" data-y="8"/></g>
+      <g transform="translate(268.5 120)" data-x="15" data-y="8"><use href="#point" x="0" y="0" data-x="15" data-y="8"/></g>
+      <g transform="translate(285.8 120)" data-x="16" data-y="8"><use href="#point" x="0" y="0" data-x="16" data-y="8"/></g>
+      <g transform="translate(303.1 120)" data-x="17" data-y="8"><use href="#point" x="0" y="0" data-x="17" data-y="8"/></g>
+      <g transform="translate(320.4 120)" data-x="18" data-y="8"><use href="#point" x="0" y="0" data-x="18" data-y="8"/></g>
+      <g transform="translate(337.7 120)" data-x="19" data-y="8"><use href="#point" x="0" y="0" data-x="19" data-y="8"/></g>
+      <g transform="translate(355.1 120)" data-x="20" data-y="8"><use href="#point" x="0" y="0" data-x="20" data-y="8"/></g>
+      <g transform="translate(372.4 120)" data-x="21" data-y="8"><use href="#point" x="0" y="0" data-x="21" data-y="8"/></g>
+      <g transform="translate(389.7 120)" data-x="22" data-y="8"><use href="#point" x="0" y="0" data-x="22" data-y="8"/></g>
+      <g transform="translate(407 120)" data-x="23" data-y="8"><use href="#point" x="0" y="0" data-x="23" data-y="8"/></g>
+      <g transform="translate(424.4 120)" data-x="24" data-y="8"><use href="#point" x="0" y="0" data-x="24" data-y="8"/></g>
+      <g transform="translate(441.7 120)" data-x="25" data-y="8"><use href="#point" x="0" y="0" data-x="25" data-y="8"/></g>
+      <g transform="translate(459 120)" data-x="26" data-y="8"><use href="#point" x="0" y="0" data-x="26" data-y="8"/></g>
+      <g transform="translate(476.3 120)" data-x="27" data-y="8"><use href="#point" x="0" y="0" data-x="27" data-y="8"/></g>
+      <g transform="translate(493.6 120)" data-x="28" data-y="8"><use href="#point" x="0" y="0" data-x="28" data-y="8"/></g>
+      <g transform="translate(511 120)" data-x="29" data-y="8"><use href="#point" x="0" y="0" data-x="29" data-y="8"/></g>
+      <g transform="translate(528.3 120)" data-x="30" data-y="8"><use href="#point" x="0" y="0" data-x="30" data-y="8"/></g>
+      <g transform="translate(545.6 120)" data-x="31" data-y="8"><use href="#point" x="0" y="0" data-x="31" data-y="8"/></g>
+      <g transform="translate(562.9 120)" data-x="32" data-y="8"><use href="#point" x="0" y="0" data-x="32" data-y="8"/></g>
+      <g transform="translate(0 135)" data-x="0" data-y="9"><use href="#point" x="0" y="0" data-x="0" data-y="9"/></g>
+      <g transform="translate(17.3 135)" data-x="1" data-y="9"><use href="#point" x="0" y="0" data-x="1" data-y="9"/></g>
+      <g transform="translate(34.6 135)" data-x="2" data-y="9"><use href="#point" x="0" y="0" data-x="2" data-y="9"/></g>
+      <g transform="translate(52 135)" data-x="3" data-y="9"><use href="#point" x="0" y="0" data-x="3" data-y="9"/></g>
+      <g transform="translate(69.3 135)" data-x="4" data-y="9"><use href="#point" x="0" y="0" data-x="4" data-y="9"/></g>
+      <g transform="translate(86.6 135)" data-x="5" data-y="9"><use href="#point" x="0" y="0" data-x="5" data-y="9"/></g>
+      <g transform="translate(103.9 135)" data-x="6" data-y="9"><use href="#point" x="0" y="0" data-x="6" data-y="9"/></g>
+      <g transform="translate(121.2 135)" data-x="7" data-y="9"><use href="#point" x="0" y="0" data-x="7" data-y="9"/></g>
+      <g transform="translate(138.6 135)" data-x="8" data-y="9"><use href="#point" x="0" y="0" data-x="8" data-y="9"/></g>
+      <g transform="translate(155.9 135)" data-x="9" data-y="9"><use href="#point" x="0" y="0" data-x="9" data-y="9"/></g>
+      <g transform="translate(173.2 135)" data-x="10" data-y="9"><use href="#point" x="0" y="0" data-x="10" data-y="9"/></g>
+      <g transform="translate(190.5 135)" data-x="11" data-y="9"><use href="#point" x="0" y="0" data-x="11" data-y="9"/></g>
+      <g transform="translate(207.8 135)" data-x="12" data-y="9"><use href="#point" x="0" y="0" data-x="12" data-y="9"/></g>
+      <g transform="translate(225.2 135)" data-x="13" data-y="9"><use href="#point" x="0" y="0" data-x="13" data-y="9"/></g>
+      <g transform="translate(242.5 135)" data-x="14" data-y="9"><use href="#point" x="0" y="0" data-x="14" data-y="9"/></g>
+      <g transform="translate(259.8 135)" data-x="15" data-y="9"><use href="#point" x="0" y="0" data-x="15" data-y="9"/></g>
+      <g transform="translate(277.1 135)" data-x="16" data-y="9"><use href="#point" x="0" y="0" data-x="16" data-y="9"/></g>
+      <g transform="translate(294.4 135)" data-x="17" data-y="9"><use href="#point" x="0" y="0" data-x="17" data-y="9"/></g>
+      <g transform="translate(311.8 135)" data-x="18" data-y="9"><use href="#point" x="0" y="0" data-x="18" data-y="9"/></g>
+      <g transform="translate(329.1 135)" data-x="19" data-y="9"><use href="#point" x="0" y="0" data-x="19" data-y="9"/></g>
+      <g transform="translate(346.4 135)" data-x="20" data-y="9"><use href="#point" x="0" y="0" data-x="20" data-y="9"/></g>
+      <g transform="translate(363.7 135)" data-x="21" data-y="9"><use href="#point" x="0" y="0" data-x="21" data-y="9"/></g>
+      <g transform="translate(381.1 135)" data-x="22" data-y="9"><use href="#point" x="0" y="0" data-x="22" data-y="9"/></g>
+      <g transform="translate(398.4 135)" data-x="23" data-y="9"><use href="#point" x="0" y="0" data-x="23" data-y="9"/></g>
+      <g transform="translate(415.7 135)" data-x="24" data-y="9"><use href="#point" x="0" y="0" data-x="24" data-y="9"/></g>
+      <g transform="translate(433 135)" data-x="25" data-y="9"><use href="#point" x="0" y="0" data-x="25" data-y="9"/></g>
+      <g transform="translate(450.3 135)" data-x="26" data-y="9"><use href="#point" x="0" y="0" data-x="26" data-y="9"/></g>
+      <g transform="translate(467.7 135)" data-x="27" data-y="9"><use href="#point" x="0" y="0" data-x="27" data-y="9"/></g>
+      <g transform="translate(485 135)" data-x="28" data-y="9"><use href="#point" x="0" y="0" data-x="28" data-y="9"/></g>
+      <g transform="translate(502.3 135)" data-x="29" data-y="9"><use href="#point" x="0" y="0" data-x="29" data-y="9"/></g>
+      <g transform="translate(519.6 135)" data-x="30" data-y="9"><use href="#point" x="0" y="0" data-x="30" data-y="9"/></g>
+      <g transform="translate(536.9 135)" data-x="31" data-y="9"><use href="#point" x="0" y="0" data-x="31" data-y="9"/></g>
+      <g transform="translate(554.3 135)" data-x="32" data-y="9"><use href="#point" x="0" y="0" data-x="32" data-y="9"/></g>
+      <g transform="translate(8.7 150)" data-x="0" data-y="10"><use href="#point" x="0" y="0" data-x="0" data-y="10"/></g>
+      <g transform="translate(26 150)" data-x="1" data-y="10"><use href="#point" x="0" y="0" data-x="1" data-y="10"/></g>
+      <g transform="translate(43.3 150)" data-x="2" data-y="10"><use href="#point" x="0" y="0" data-x="2" data-y="10"/></g>
+      <g transform="translate(60.6 150)" data-x="3" data-y="10"><use href="#point" x="0" y="0" data-x="3" data-y="10"/></g>
+      <g transform="translate(77.9 150)" data-x="4" data-y="10"><use href="#point" x="0" y="0" data-x="4" data-y="10"/></g>
+      <g transform="translate(95.3 150)" data-x="5" data-y="10"><use href="#point" x="0" y="0" data-x="5" data-y="10"/></g>
+      <g transform="translate(112.6 150)" data-x="6" data-y="10"><use href="#point" x="0" y="0" data-x="6" data-y="10"/></g>
+      <g transform="translate(129.9 150)" data-x="7" data-y="10"><use href="#point" x="0" y="0" data-x="7" data-y="10"/></g>
+      <g transform="translate(147.2 150)" data-x="8" data-y="10"><use href="#point" x="0" y="0" data-x="8" data-y="10"/></g>
+      <g transform="translate(164.5 150)" data-x="9" data-y="10"><use href="#point" x="0" y="0" data-x="9" data-y="10"/></g>
+      <g transform="translate(181.9 150)" data-x="10" data-y="10"><use href="#point" x="0" y="0" data-x="10" data-y="10"/></g>
+      <g transform="translate(199.2 150)" data-x="11" data-y="10"><use href="#point" x="0" y="0" data-x="11" data-y="10"/></g>
+      <g transform="translate(216.5 150)" data-x="12" data-y="10"><use href="#point" x="0" y="0" data-x="12" data-y="10"/></g>
+      <g transform="translate(233.8 150)" data-x="13" data-y="10"><use href="#point" x="0" y="0" data-x="13" data-y="10"/></g>
+      <g transform="translate(251.1 150)" data-x="14" data-y="10"><use href="#point" x="0" y="0" data-x="14" data-y="10"/></g>
+      <g transform="translate(268.5 150)" data-x="15" data-y="10"><use href="#point" x="0" y="0" data-x="15" data-y="10"/></g>
+      <g transform="translate(285.8 150)" data-x="16" data-y="10"><use href="#point" x="0" y="0" data-x="16" data-y="10"/></g>
+      <g transform="translate(303.1 150)" data-x="17" data-y="10"><use href="#point" x="0" y="0" data-x="17" data-y="10"/></g>
+      <g transform="translate(320.4 150)" data-x="18" data-y="10"><use href="#point" x="0" y="0" data-x="18" data-y="10"/></g>
+      <g transform="translate(337.7 150)" data-x="19" data-y="10"><use href="#point" x="0" y="0" data-x="19" data-y="10"/></g>
+      <g transform="translate(355.1 150)" data-x="20" data-y="10"><use href="#point" x="0" y="0" data-x="20" data-y="10"/></g>
+      <g transform="translate(372.4 150)" data-x="21" data-y="10"><use href="#point" x="0" y="0" data-x="21" data-y="10"/></g>
+      <g transform="translate(389.7 150)" data-x="22" data-y="10"><use href="#point" x="0" y="0" data-x="22" data-y="10"/></g>
+      <g transform="translate(407 150)" data-x="23" data-y="10"><use href="#point" x="0" y="0" data-x="23" data-y="10"/></g>
+      <g transform="translate(424.4 150)" data-x="24" data-y="10"><use href="#point" x="0" y="0" data-x="24" data-y="10"/></g>
+      <g transform="translate(441.7 150)" data-x="25" data-y="10"><use href="#point" x="0" y="0" data-x="25" data-y="10"/></g>
+      <g transform="translate(459 150)" data-x="26" data-y="10"><use href="#point" x="0" y="0" data-x="26" data-y="10"/></g>
+      <g transform="translate(476.3 150)" data-x="27" data-y="10"><use href="#point" x="0" y="0" data-x="27" data-y="10"/></g>
+      <g transform="translate(493.6 150)" data-x="28" data-y="10"><use href="#point" x="0" y="0" data-x="28" data-y="10"/></g>
+      <g transform="translate(511 150)" data-x="29" data-y="10"><use href="#point" x="0" y="0" data-x="29" data-y="10"/></g>
+      <g transform="translate(528.3 150)" data-x="30" data-y="10"><use href="#point" x="0" y="0" data-x="30" data-y="10"/></g>
+      <g transform="translate(545.6 150)" data-x="31" data-y="10"><use href="#point" x="0" y="0" data-x="31" data-y="10"/></g>
+      <g transform="translate(562.9 150)" data-x="32" data-y="10"><use href="#point" x="0" y="0" data-x="32" data-y="10"/></g>
+      <g transform="translate(0 165)" data-x="0" data-y="11"><use href="#point" x="0" y="0" data-x="0" data-y="11"/></g>
+      <g transform="translate(17.3 165)" data-x="1" data-y="11"><use href="#point" x="0" y="0" data-x="1" data-y="11"/></g>
+      <g transform="translate(34.6 165)" data-x="2" data-y="11"><use href="#point" x="0" y="0" data-x="2" data-y="11"/></g>
+      <g transform="translate(52 165)" data-x="3" data-y="11"><use href="#point" x="0" y="0" data-x="3" data-y="11"/></g>
+      <g transform="translate(69.3 165)" data-x="4" data-y="11"><use href="#point" x="0" y="0" data-x="4" data-y="11"/></g>
+      <g transform="translate(86.6 165)" data-x="5" data-y="11"><use href="#point" x="0" y="0" data-x="5" data-y="11"/></g>
+      <g transform="translate(103.9 165)" data-x="6" data-y="11"><use href="#point" x="0" y="0" data-x="6" data-y="11"/></g>
+      <g transform="translate(121.2 165)" data-x="7" data-y="11"><use href="#point" x="0" y="0" data-x="7" data-y="11"/></g>
+      <g transform="translate(138.6 165)" data-x="8" data-y="11"><use href="#point" x="0" y="0" data-x="8" data-y="11"/></g>
+      <g transform="translate(155.9 165)" data-x="9" data-y="11"><use href="#point" x="0" y="0" data-x="9" data-y="11"/></g>
+      <g transform="translate(173.2 165)" data-x="10" data-y="11"><use href="#point" x="0" y="0" data-x="10" data-y="11"/></g>
+      <g transform="translate(190.5 165)" data-x="11" data-y="11"><use href="#point" x="0" y="0" data-x="11" data-y="11"/></g>
+      <g transform="translate(207.8 165)" data-x="12" data-y="11"><use href="#point" x="0" y="0" data-x="12" data-y="11"/></g>
+      <g transform="translate(225.2 165)" data-x="13" data-y="11"><use href="#point" x="0" y="0" data-x="13" data-y="11"/></g>
+      <g transform="translate(242.5 165)" data-x="14" data-y="11"><use href="#point" x="0" y="0" data-x="14" data-y="11"/></g>
+      <g transform="translate(259.8 165)" data-x="15" data-y="11"><use href="#point" x="0" y="0" data-x="15" data-y="11"/></g>
+      <g transform="translate(277.1 165)" data-x="16" data-y="11"><use href="#point" x="0" y="0" data-x="16" data-y="11"/></g>
+      <g transform="translate(294.4 165)" data-x="17" data-y="11"><use href="#point" x="0" y="0" data-x="17" data-y="11"/></g>
+      <g transform="translate(311.8 165)" data-x="18" data-y="11"><use href="#point" x="0" y="0" data-x="18" data-y="11"/></g>
+      <g transform="translate(329.1 165)" data-x="19" data-y="11"><use href="#point" x="0" y="0" data-x="19" data-y="11"/></g>
+      <g transform="translate(346.4 165)" data-x="20" data-y="11"><use href="#point" x="0" y="0" data-x="20" data-y="11"/></g>
+      <g transform="translate(363.7 165)" data-x="21" data-y="11"><use href="#point" x="0" y="0" data-x="21" data-y="11"/></g>
+      <g transform="translate(381.1 165)" data-x="22" data-y="11"><use href="#point" x="0" y="0" data-x="22" data-y="11"/></g>
+      <g transform="translate(398.4 165)" data-x="23" data-y="11"><use href="#point" x="0" y="0" data-x="23" data-y="11"/></g>
+      <g transform="translate(415.7 165)" data-x="24" data-y="11"><use href="#point" x="0" y="0" data-x="24" data-y="11"/></g>
+      <g transform="translate(433 165)" data-x="25" data-y="11"><use href="#point" x="0" y="0" data-x="25" data-y="11"/></g>
+      <g transform="translate(450.3 165)" data-x="26" data-y="11"><use href="#point" x="0" y="0" data-x="26" data-y="11"/></g>
+      <g transform="translate(467.7 165)" data-x="27" data-y="11"><use href="#point" x="0" y="0" data-x="27" data-y="11"/></g>
+      <g transform="translate(485 165)" data-x="28" data-y="11"><use href="#point" x="0" y="0" data-x="28" data-y="11"/></g>
+      <g transform="translate(502.3 165)" data-x="29" data-y="11"><use href="#point" x="0" y="0" data-x="29" data-y="11"/></g>
+      <g transform="translate(519.6 165)" data-x="30" data-y="11"><use href="#point" x="0" y="0" data-x="30" data-y="11"/></g>
+      <g transform="translate(536.9 165)" data-x="31" data-y="11"><use href="#point" x="0" y="0" data-x="31" data-y="11"/></g>
+      <g transform="translate(554.3 165)" data-x="32" data-y="11"><use href="#point" x="0" y="0" data-x="32" data-y="11"/></g>
+      <g transform="translate(8.7 180)" data-x="0" data-y="12"><use href="#point" x="0" y="0" data-x="0" data-y="12"/></g>
+      <g transform="translate(26 180)" data-x="1" data-y="12"><use href="#point" x="0" y="0" data-x="1" data-y="12"/></g>
+      <g transform="translate(43.3 180)" data-x="2" data-y="12"><use href="#point" x="0" y="0" data-x="2" data-y="12"/></g>
+      <g transform="translate(60.6 180)" data-x="3" data-y="12"><use href="#point" x="0" y="0" data-x="3" data-y="12"/></g>
+      <g transform="translate(77.9 180)" data-x="4" data-y="12"><use href="#point" x="0" y="0" data-x="4" data-y="12"/></g>
+      <g transform="translate(95.3 180)" data-x="5" data-y="12"><use href="#point" x="0" y="0" data-x="5" data-y="12"/></g>
+      <g transform="translate(112.6 180)" data-x="6" data-y="12"><use href="#point" x="0" y="0" data-x="6" data-y="12"/></g>
+      <g transform="translate(129.9 180)" data-x="7" data-y="12"><use href="#point" x="0" y="0" data-x="7" data-y="12"/></g>
+      <g transform="translate(147.2 180)" data-x="8" data-y="12"><use href="#point" x="0" y="0" data-x="8" data-y="12"/></g>
+      <g transform="translate(164.5 180)" data-x="9" data-y="12"><use href="#point" x="0" y="0" data-x="9" data-y="12"/></g>
+      <g transform="translate(181.9 180)" data-x="10" data-y="12"><use href="#point" x="0" y="0" data-x="10" data-y="12"/></g>
+      <g transform="translate(199.2 180)" data-x="11" data-y="12"><use href="#point" x="0" y="0" data-x="11" data-y="12"/></g>
+      <g transform="translate(216.5 180)" data-x="12" data-y="12"><use href="#point" x="0" y="0" data-x="12" data-y="12"/></g>
+      <g transform="translate(233.8 180)" data-x="13" data-y="12"><use href="#point" x="0" y="0" data-x="13" data-y="12"/></g>
+      <g transform="translate(251.1 180)" data-x="14" data-y="12"><use href="#point" x="0" y="0" data-x="14" data-y="12"/></g>
+      <g transform="translate(268.5 180)" data-x="15" data-y="12"><use href="#point" x="0" y="0" data-x="15" data-y="12"/></g>
+      <g transform="translate(285.8 180)" data-x="16" data-y="12"><use href="#point" x="0" y="0" data-x="16" data-y="12"/></g>
+      <g transform="translate(303.1 180)" data-x="17" data-y="12"><use href="#point" x="0" y="0" data-x="17" data-y="12"/></g>
+      <g transform="translate(320.4 180)" data-x="18" data-y="12"><use href="#point" x="0" y="0" data-x="18" data-y="12"/></g>
+      <g transform="translate(337.7 180)" data-x="19" data-y="12"><use href="#point" x="0" y="0" data-x="19" data-y="12"/></g>
+      <g transform="translate(355.1 180)" data-x="20" data-y="12"><use href="#point" x="0" y="0" data-x="20" data-y="12"/></g>
+      <g transform="translate(372.4 180)" data-x="21" data-y="12"><use href="#point" x="0" y="0" data-x="21" data-y="12"/></g>
+      <g transform="translate(389.7 180)" data-x="22" data-y="12"><use href="#point" x="0" y="0" data-x="22" data-y="12"/></g>
+      <g transform="translate(407 180)" data-x="23" data-y="12"><use href="#point" x="0" y="0" data-x="23" data-y="12"/></g>
+      <g transform="translate(424.4 180)" data-x="24" data-y="12"><use href="#point" x="0" y="0" data-x="24" data-y="12"/></g>
+      <g transform="translate(441.7 180)" data-x="25" data-y="12"><use href="#point" x="0" y="0" data-x="25" data-y="12"/></g>
+      <g transform="translate(459 180)" data-x="26" data-y="12"><use href="#point" x="0" y="0" data-x="26" data-y="12"/></g>
+      <g transform="translate(476.3 180)" data-x="27" data-y="12"><use href="#point" x="0" y="0" data-x="27" data-y="12"/></g>
+      <g transform="translate(493.6 180)" data-x="28" data-y="12"><use href="#point" x="0" y="0" data-x="28" data-y="12"/></g>
+      <g transform="translate(511 180)" data-x="29" data-y="12"><use href="#point" x="0" y="0" data-x="29" data-y="12"/></g>
+      <g transform="translate(528.3 180)" data-x="30" data-y="12"><use href="#point" x="0" y="0" data-x="30" data-y="12"/></g>
+      <g transform="translate(545.6 180)" data-x="31" data-y="12"><use href="#point" x="0" y="0" data-x="31" data-y="12"/></g>
+      <g transform="translate(562.9 180)" data-x="32" data-y="12"><use href="#point" x="0" y="0" data-x="32" data-y="12"/></g>
+      <g transform="translate(0 195)" data-x="0" data-y="13"><use href="#point" x="0" y="0" data-x="0" data-y="13"/></g>
+      <g transform="translate(17.3 195)" data-x="1" data-y="13"><use href="#point" x="0" y="0" data-x="1" data-y="13"/></g>
+      <g transform="translate(34.6 195)" data-x="2" data-y="13"><use href="#point" x="0" y="0" data-x="2" data-y="13"/></g>
+      <g transform="translate(52 195)" data-x="3" data-y="13"><use href="#point" x="0" y="0" data-x="3" data-y="13"/></g>
+      <g transform="translate(69.3 195)" data-x="4" data-y="13"><use href="#point" x="0" y="0" data-x="4" data-y="13"/></g>
+      <g transform="translate(86.6 195)" data-x="5" data-y="13"><use href="#point" x="0" y="0" data-x="5" data-y="13"/></g>
+      <g transform="translate(103.9 195)" data-x="6" data-y="13"><use href="#point" x="0" y="0" data-x="6" data-y="13"/></g>
+      <g transform="translate(121.2 195)" data-x="7" data-y="13"><use href="#point" x="0" y="0" data-x="7" data-y="13"/></g>
+      <g transform="translate(138.6 195)" data-x="8" data-y="13"><use href="#point" x="0" y="0" data-x="8" data-y="13"/></g>
+      <g transform="translate(155.9 195)" data-x="9" data-y="13"><use href="#point" x="0" y="0" data-x="9" data-y="13"/></g>
+      <g transform="translate(173.2 195)" data-x="10" data-y="13"><use href="#point" x="0" y="0" data-x="10" data-y="13"/></g>
+      <g transform="translate(190.5 195)" data-x="11" data-y="13"><use href="#point" x="0" y="0" data-x="11" data-y="13"/></g>
+      <g transform="translate(207.8 195)" data-x="12" data-y="13"><use href="#point" x="0" y="0" data-x="12" data-y="13"/></g>
+      <g transform="translate(225.2 195)" data-x="13" data-y="13"><use href="#point" x="0" y="0" data-x="13" data-y="13"/></g>
+      <g transform="translate(242.5 195)" data-x="14" data-y="13"><use href="#point" x="0" y="0" data-x="14" data-y="13"/></g>
+      <g transform="translate(259.8 195)" data-x="15" data-y="13"><use href="#point" x="0" y="0" data-x="15" data-y="13"/></g>
+      <g transform="translate(277.1 195)" data-x="16" data-y="13"><use href="#point" x="0" y="0" data-x="16" data-y="13"/></g>
+      <g transform="translate(294.4 195)" data-x="17" data-y="13"><use href="#point" x="0" y="0" data-x="17" data-y="13"/></g>
+      <g transform="translate(311.8 195)" data-x="18" data-y="13"><use href="#point" x="0" y="0" data-x="18" data-y="13"/></g>
+      <g transform="translate(329.1 195)" data-x="19" data-y="13"><use href="#point" x="0" y="0" data-x="19" data-y="13"/></g>
+      <g transform="translate(346.4 195)" data-x="20" data-y="13"><use href="#point" x="0" y="0" data-x="20" data-y="13"/></g>
+      <g transform="translate(363.7 195)" data-x="21" data-y="13"><use href="#point" x="0" y="0" data-x="21" data-y="13"/></g>
+      <g transform="translate(381.1 195)" data-x="22" data-y="13"><use href="#point" x="0" y="0" data-x="22" data-y="13"/></g>
+      <g transform="translate(398.4 195)" data-x="23" data-y="13"><use href="#point" x="0" y="0" data-x="23" data-y="13"/></g>
+      <g transform="translate(415.7 195)" data-x="24" data-y="13"><use href="#point" x="0" y="0" data-x="24" data-y="13"/></g>
+      <g transform="translate(433 195)" data-x="25" data-y="13"><use href="#point" x="0" y="0" data-x="25" data-y="13"/></g>
+      <g transform="translate(450.3 195)" data-x="26" data-y="13"><use href="#point" x="0" y="0" data-x="26" data-y="13"/></g>
+      <g transform="translate(467.7 195)" data-x="27" data-y="13"><use href="#point" x="0" y="0" data-x="27" data-y="13"/></g>
+      <g transform="translate(485 195)" data-x="28" data-y="13"><use href="#point" x="0" y="0" data-x="28" data-y="13"/></g>
+      <g transform="translate(502.3 195)" data-x="29" data-y="13"><use href="#point" x="0" y="0" data-x="29" data-y="13"/></g>
+      <g transform="translate(519.6 195)" data-x="30" data-y="13"><use href="#point" x="0" y="0" data-x="30" data-y="13"/></g>
+      <g transform="translate(536.9 195)" data-x="31" data-y="13"><use href="#point" x="0" y="0" data-x="31" data-y="13"/></g>
+      <g transform="translate(554.3 195)" data-x="32" data-y="13"><use href="#point" x="0" y="0" data-x="32" data-y="13"/></g>
+      <g transform="translate(8.7 210)" data-x="0" data-y="14"><use href="#point" x="0" y="0" data-x="0" data-y="14"/></g>
+      <g transform="translate(26 210)" data-x="1" data-y="14"><use href="#point" x="0" y="0" data-x="1" data-y="14"/></g>
+      <g transform="translate(43.3 210)" data-x="2" data-y="14"><use href="#point" x="0" y="0" data-x="2" data-y="14"/></g>
+      <g transform="translate(60.6 210)" data-x="3" data-y="14"><use href="#point" x="0" y="0" data-x="3" data-y="14"/></g>
+      <g transform="translate(77.9 210)" data-x="4" data-y="14"><use href="#point" x="0" y="0" data-x="4" data-y="14"/></g>
+      <g transform="translate(95.3 210)" data-x="5" data-y="14"><use href="#point" x="0" y="0" data-x="5" data-y="14"/></g>
+      <g transform="translate(112.6 210)" data-x="6" data-y="14"><use href="#point" x="0" y="0" data-x="6" data-y="14"/></g>
+      <g transform="translate(129.9 210)" data-x="7" data-y="14"><use href="#point" x="0" y="0" data-x="7" data-y="14"/></g>
+      <g transform="translate(147.2 210)" data-x="8" data-y="14"><use href="#point" x="0" y="0" data-x="8" data-y="14"/></g>
+      <g transform="translate(164.5 210)" data-x="9" data-y="14"><use href="#point" x="0" y="0" data-x="9" data-y="14"/></g>
+      <g transform="translate(181.9 210)" data-x="10" data-y="14"><use href="#point" x="0" y="0" data-x="10" data-y="14"/></g>
+      <g transform="translate(199.2 210)" data-x="11" data-y="14"><use href="#point" x="0" y="0" data-x="11" data-y="14"/></g>
+      <g transform="translate(216.5 210)" data-x="12" data-y="14"><use href="#point" x="0" y="0" data-x="12" data-y="14"/></g>
+      <g transform="translate(233.8 210)" data-x="13" data-y="14"><use href="#point" x="0" y="0" data-x="13" data-y="14"/></g>
+      <g transform="translate(251.1 210)" data-x="14" data-y="14"><use href="#point" x="0" y="0" data-x="14" data-y="14"/></g>
+      <g transform="translate(268.5 210)" data-x="15" data-y="14"><use href="#point" x="0" y="0" data-x="15" data-y="14"/></g>
+      <g transform="translate(285.8 210)" data-x="16" data-y="14"><use href="#point" x="0" y="0" data-x="16" data-y="14"/></g>
+      <g transform="translate(303.1 210)" data-x="17" data-y="14"><use href="#point" x="0" y="0" data-x="17" data-y="14"/></g>
+      <g transform="translate(320.4 210)" data-x="18" data-y="14"><use href="#point" x="0" y="0" data-x="18" data-y="14"/></g>
+      <g transform="translate(337.7 210)" data-x="19" data-y="14"><use href="#point" x="0" y="0" data-x="19" data-y="14"/></g>
+      <g transform="translate(355.1 210)" data-x="20" data-y="14"><use href="#point" x="0" y="0" data-x="20" data-y="14"/></g>
+      <g transform="translate(372.4 210)" data-x="21" data-y="14"><use href="#point" x="0" y="0" data-x="21" data-y="14"/></g>
+      <g transform="translate(389.7 210)" data-x="22" data-y="14"><use href="#point" x="0" y="0" data-x="22" data-y="14"/></g>
+      <g transform="translate(407 210)" data-x="23" data-y="14"><use href="#point" x="0" y="0" data-x="23" data-y="14"/></g>
+      <g transform="translate(424.4 210)" data-x="24" data-y="14"><use href="#point" x="0" y="0" data-x="24" data-y="14"/></g>
+      <g transform="translate(441.7 210)" data-x="25" data-y="14"><use href="#point" x="0" y="0" data-x="25" data-y="14"/></g>
+      <g transform="translate(459 210)" data-x="26" data-y="14"><use href="#point" x="0" y="0" data-x="26" data-y="14"/></g>
+      <g transform="translate(476.3 210)" data-x="27" data-y="14"><use href="#point" x="0" y="0" data-x="27" data-y="14"/></g>
+      <g transform="translate(493.6 210)" data-x="28" data-y="14"><use href="#point" x="0" y="0" data-x="28" data-y="14"/></g>
+      <g transform="translate(511 210)" data-x="29" data-y="14"><use href="#point" x="0" y="0" data-x="29" data-y="14"/></g>
+      <g transform="translate(528.3 210)" data-x="30" data-y="14"><use href="#point" x="0" y="0" data-x="30" data-y="14"/></g>
+      <g transform="translate(545.6 210)" data-x="31" data-y="14"><use href="#point" x="0" y="0" data-x="31" data-y="14"/></g>
+      <g transform="translate(562.9 210)" data-x="32" data-y="14"><use href="#point" x="0" y="0" data-x="32" data-y="14"/></g>
+      <g transform="translate(0 225)" data-x="0" data-y="15"><use href="#point" x="0" y="0" data-x="0" data-y="15"/></g>
+      <g transform="translate(17.3 225)" data-x="1" data-y="15"><use href="#point" x="0" y="0" data-x="1" data-y="15"/></g>
+      <g transform="translate(34.6 225)" data-x="2" data-y="15"><use href="#point" x="0" y="0" data-x="2" data-y="15"/></g>
+      <g transform="translate(52 225)" data-x="3" data-y="15"><use href="#point" x="0" y="0" data-x="3" data-y="15"/></g>
+      <g transform="translate(69.3 225)" data-x="4" data-y="15"><use href="#point" x="0" y="0" data-x="4" data-y="15"/></g>
+      <g transform="translate(86.6 225)" data-x="5" data-y="15"><use href="#point" x="0" y="0" data-x="5" data-y="15"/></g>
+      <g transform="translate(103.9 225)" data-x="6" data-y="15"><use href="#point" x="0" y="0" data-x="6" data-y="15"/></g>
+      <g transform="translate(121.2 225)" data-x="7" data-y="15"><use href="#point" x="0" y="0" data-x="7" data-y="15"/></g>
+      <g transform="translate(138.6 225)" data-x="8" data-y="15"><use href="#point" x="0" y="0" data-x="8" data-y="15"/></g>
+      <g transform="translate(155.9 225)" data-x="9" data-y="15"><use href="#point" x="0" y="0" data-x="9" data-y="15"/></g>
+      <g transform="translate(173.2 225)" data-x="10" data-y="15"><use href="#point" x="0" y="0" data-x="10" data-y="15"/></g>
+      <g transform="translate(190.5 225)" data-x="11" data-y="15"><use href="#point" x="0" y="0" data-x="11" data-y="15"/></g>
+      <g transform="translate(207.8 225)" data-x="12" data-y="15"><use href="#point" x="0" y="0" data-x="12" data-y="15"/></g>
+      <g transform="translate(225.2 225)" data-x="13" data-y="15"><use href="#point" x="0" y="0" data-x="13" data-y="15"/></g>
+      <g transform="translate(242.5 225)" data-x="14" data-y="15"><use href="#point" x="0" y="0" data-x="14" data-y="15"/></g>
+      <g transform="translate(259.8 225)" data-x="15" data-y="15"><use href="#point" x="0" y="0" data-x="15" data-y="15"/></g>
+      <g transform="translate(277.1 225)" data-x="16" data-y="15"><use href="#point" x="0" y="0" data-x="16" data-y="15"/></g>
+      <g transform="translate(294.4 225)" data-x="17" data-y="15"><use href="#point" x="0" y="0" data-x="17" data-y="15"/></g>
+      <g transform="translate(311.8 225)" data-x="18" data-y="15"><use href="#point" x="0" y="0" data-x="18" data-y="15"/></g>
+      <g transform="translate(329.1 225)" data-x="19" data-y="15"><use href="#point" x="0" y="0" data-x="19" data-y="15"/></g>
+      <g transform="translate(346.4 225)" data-x="20" data-y="15"><use href="#point" x="0" y="0" data-x="20" data-y="15"/></g>
+      <g transform="translate(363.7 225)" data-x="21" data-y="15"><use href="#point" x="0" y="0" data-x="21" data-y="15"/></g>
+      <g transform="translate(381.1 225)" data-x="22" data-y="15"><use href="#point" x="0" y="0" data-x="22" data-y="15"/></g>
+      <g transform="translate(398.4 225)" data-x="23" data-y="15"><use href="#point" x="0" y="0" data-x="23" data-y="15"/></g>
+      <g transform="translate(415.7 225)" data-x="24" data-y="15"><use href="#point" x="0" y="0" data-x="24" data-y="15"/></g>
+      <g transform="translate(433 225)" data-x="25" data-y="15"><use href="#point" x="0" y="0" data-x="25" data-y="15"/></g>
+      <g transform="translate(450.3 225)" data-x="26" data-y="15"><use href="#point" x="0" y="0" data-x="26" data-y="15"/></g>
+      <g transform="translate(467.7 225)" data-x="27" data-y="15"><use href="#point" x="0" y="0" data-x="27" data-y="15"/></g>
+      <g transform="translate(485 225)" data-x="28" data-y="15"><use href="#point" x="0" y="0" data-x="28" data-y="15"/></g>
+      <g transform="translate(502.3 225)" data-x="29" data-y="15"><use href="#point" x="0" y="0" data-x="29" data-y="15"/></g>
+      <g transform="translate(519.6 225)" data-x="30" data-y="15"><use href="#point" x="0" y="0" data-x="30" data-y="15"/></g>
+      <g transform="translate(536.9 225)" data-x="31" data-y="15"><use href="#point" x="0" y="0" data-x="31" data-y="15"/></g>
+      <g transform="translate(554.3 225)" data-x="32" data-y="15"><use href="#point" x="0" y="0" data-x="32" data-y="15"/></g>
+      <g transform="translate(8.7 240)" data-x="0" data-y="16"><use href="#point" x="0" y="0" data-x="0" data-y="16"/></g>
+      <g transform="translate(26 240)" data-x="1" data-y="16"><use href="#point" x="0" y="0" data-x="1" data-y="16"/></g>
+      <g transform="translate(43.3 240)" data-x="2" data-y="16"><use href="#point" x="0" y="0" data-x="2" data-y="16"/></g>
+      <g transform="translate(60.6 240)" data-x="3" data-y="16"><use href="#point" x="0" y="0" data-x="3" data-y="16"/></g>
+      <g transform="translate(77.9 240)" data-x="4" data-y="16"><use href="#point" x="0" y="0" data-x="4" data-y="16"/></g>
+      <g transform="translate(95.3 240)" data-x="5" data-y="16"><use href="#point" x="0" y="0" data-x="5" data-y="16"/></g>
+      <g transform="translate(112.6 240)" data-x="6" data-y="16"><use href="#point" x="0" y="0" data-x="6" data-y="16"/></g>
+      <g transform="translate(129.9 240)" data-x="7" data-y="16"><use href="#point" x="0" y="0" data-x="7" data-y="16"/></g>
+      <g transform="translate(147.2 240)" data-x="8" data-y="16"><use href="#point" x="0" y="0" data-x="8" data-y="16"/></g>
+      <g transform="translate(164.5 240)" data-x="9" data-y="16"><use href="#point" x="0" y="0" data-x="9" data-y="16"/></g>
+      <g transform="translate(181.9 240)" data-x="10" data-y="16"><use href="#point" x="0" y="0" data-x="10" data-y="16"/></g>
+      <g transform="translate(199.2 240)" data-x="11" data-y="16"><use href="#point" x="0" y="0" data-x="11" data-y="16"/></g>
+      <g transform="translate(216.5 240)" data-x="12" data-y="16"><use href="#point" x="0" y="0" data-x="12" data-y="16"/></g>
+      <g transform="translate(233.8 240)" data-x="13" data-y="16"><use href="#point" x="0" y="0" data-x="13" data-y="16"/></g>
+      <g transform="translate(251.1 240)" data-x="14" data-y="16"><use href="#point" x="0" y="0" data-x="14" data-y="16"/></g>
+      <g transform="translate(268.5 240)" data-x="15" data-y="16"><use href="#point" x="0" y="0" data-x="15" data-y="16"/></g>
+      <g transform="translate(285.8 240)" data-x="16" data-y="16"><use href="#point" x="0" y="0" data-x="16" data-y="16"/></g>
+      <g transform="translate(303.1 240)" data-x="17" data-y="16"><use href="#point" x="0" y="0" data-x="17" data-y="16"/></g>
+      <g transform="translate(320.4 240)" data-x="18" data-y="16"><use href="#point" x="0" y="0" data-x="18" data-y="16"/></g>
+      <g transform="translate(337.7 240)" data-x="19" data-y="16"><use href="#point" x="0" y="0" data-x="19" data-y="16"/></g>
+      <g transform="translate(355.1 240)" data-x="20" data-y="16"><use href="#point" x="0" y="0" data-x="20" data-y="16"/></g>
+      <g transform="translate(372.4 240)" data-x="21" data-y="16"><use href="#point" x="0" y="0" data-x="21" data-y="16"/></g>
+      <g transform="translate(389.7 240)" data-x="22" data-y="16"><use href="#point" x="0" y="0" data-x="22" data-y="16"/></g>
+      <g transform="translate(407 240)" data-x="23" data-y="16"><use href="#point" x="0" y="0" data-x="23" data-y="16"/></g>
+      <g transform="translate(424.4 240)" data-x="24" data-y="16"><use href="#point" x="0" y="0" data-x="24" data-y="16"/></g>
+      <g transform="translate(441.7 240)" data-x="25" data-y="16"><use href="#point" x="0" y="0" data-x="25" data-y="16"/></g>
+      <g transform="translate(459 240)" data-x="26" data-y="16"><use href="#point" x="0" y="0" data-x="26" data-y="16"/></g>
+      <g transform="translate(476.3 240)" data-x="27" data-y="16"><use href="#point" x="0" y="0" data-x="27" data-y="16"/></g>
+      <g transform="translate(493.6 240)" data-x="28" data-y="16"><use href="#point" x="0" y="0" data-x="28" data-y="16"/></g>
+      <g transform="translate(511 240)" data-x="29" data-y="16"><use href="#point" x="0" y="0" data-x="29" data-y="16"/></g>
+      <g transform="translate(528.3 240)" data-x="30" data-y="16"><use href="#point" x="0" y="0" data-x="30" data-y="16"/></g>
+      <g transform="translate(545.6 240)" data-x="31" data-y="16"><use href="#point" x="0" y="0" data-x="31" data-y="16"/></g>
+      <g transform="translate(562.9 240)" data-x="32" data-y="16"><use href="#point" x="0" y="0" data-x="32" data-y="16"/></g>
+      <g transform="translate(0 255)" data-x="0" data-y="17"><use href="#point" x="0" y="0" data-x="0" data-y="17"/></g>
+      <g transform="translate(17.3 255)" data-x="1" data-y="17"><use href="#point" x="0" y="0" data-x="1" data-y="17"/></g>
+      <g transform="translate(34.6 255)" data-x="2" data-y="17"><use href="#point" x="0" y="0" data-x="2" data-y="17"/></g>
+      <g transform="translate(52 255)" data-x="3" data-y="17"><use href="#point" x="0" y="0" data-x="3" data-y="17"/></g>
+      <g transform="translate(69.3 255)" data-x="4" data-y="17"><use href="#point" x="0" y="0" data-x="4" data-y="17"/></g>
+      <g transform="translate(86.6 255)" data-x="5" data-y="17"><use href="#point" x="0" y="0" data-x="5" data-y="17"/></g>
+      <g transform="translate(103.9 255)" data-x="6" data-y="17"><use href="#point" x="0" y="0" data-x="6" data-y="17"/></g>
+      <g transform="translate(121.2 255)" data-x="7" data-y="17"><use href="#point" x="0" y="0" data-x="7" data-y="17"/></g>
+      <g transform="translate(138.6 255)" data-x="8" data-y="17"><use href="#point" x="0" y="0" data-x="8" data-y="17"/></g>
+      <g transform="translate(155.9 255)" data-x="9" data-y="17"><use href="#point" x="0" y="0" data-x="9" data-y="17"/></g>
+      <g transform="translate(173.2 255)" data-x="10" data-y="17"><use href="#point" x="0" y="0" data-x="10" data-y="17"/></g>
+      <g transform="translate(190.5 255)" data-x="11" data-y="17"><use href="#point" x="0" y="0" data-x="11" data-y="17"/></g>
+      <g transform="translate(207.8 255)" data-x="12" data-y="17"><use href="#point" x="0" y="0" data-x="12" data-y="17"/></g>
+      <g transform="translate(225.2 255)" data-x="13" data-y="17"><use href="#point" x="0" y="0" data-x="13" data-y="17"/></g>
+      <g transform="translate(242.5 255)" data-x="14" data-y="17"><use href="#point" x="0" y="0" data-x="14" data-y="17"/></g>
+      <g transform="translate(259.8 255)" data-x="15" data-y="17"><use href="#point" x="0" y="0" data-x="15" data-y="17"/></g>
+      <g transform="translate(277.1 255)" data-x="16" data-y="17"><use href="#point" x="0" y="0" data-x="16" data-y="17"/></g>
+      <g transform="translate(294.4 255)" data-x="17" data-y="17"><use href="#point" x="0" y="0" data-x="17" data-y="17"/></g>
+      <g transform="translate(311.8 255)" data-x="18" data-y="17"><use href="#point" x="0" y="0" data-x="18" data-y="17"/></g>
+      <g transform="translate(329.1 255)" data-x="19" data-y="17"><use href="#point" x="0" y="0" data-x="19" data-y="17"/></g>
+      <g transform="translate(346.4 255)" data-x="20" data-y="17"><use href="#point" x="0" y="0" data-x="20" data-y="17"/></g>
+      <g transform="translate(363.7 255)" data-x="21" data-y="17"><use href="#point" x="0" y="0" data-x="21" data-y="17"/></g>
+      <g transform="translate(381.1 255)" data-x="22" data-y="17"><use href="#point" x="0" y="0" data-x="22" data-y="17"/></g>
+      <g transform="translate(398.4 255)" data-x="23" data-y="17"><use href="#point" x="0" y="0" data-x="23" data-y="17"/></g>
+      <g transform="translate(415.7 255)" data-x="24" data-y="17"><use href="#point" x="0" y="0" data-x="24" data-y="17"/></g>
+      <g transform="translate(433 255)" data-x="25" data-y="17"><use href="#point" x="0" y="0" data-x="25" data-y="17"/></g>
+      <g transform="translate(450.3 255)" data-x="26" data-y="17"><use href="#point" x="0" y="0" data-x="26" data-y="17"/></g>
+      <g transform="translate(467.7 255)" data-x="27" data-y="17"><use href="#point" x="0" y="0" data-x="27" data-y="17"/></g>
+      <g transform="translate(485 255)" data-x="28" data-y="17"><use href="#point" x="0" y="0" data-x="28" data-y="17"/></g>
+      <g transform="translate(502.3 255)" data-x="29" data-y="17"><use href="#point" x="0" y="0" data-x="29" data-y="17"/></g>
+      <g transform="translate(519.6 255)" data-x="30" data-y="17"><use href="#point" x="0" y="0" data-x="30" data-y="17"/></g>
+      <g transform="translate(536.9 255)" data-x="31" data-y="17"><use href="#point" x="0" y="0" data-x="31" data-y="17"/></g>
+      <g transform="translate(554.3 255)" data-x="32" data-y="17"><use href="#point" x="0" y="0" data-x="32" data-y="17"/></g>
+      <g transform="translate(8.7 270)" data-x="0" data-y="18"><use href="#point" x="0" y="0" data-x="0" data-y="18"/></g>
+      <g transform="translate(26 270)" data-x="1" data-y="18"><use href="#point" x="0" y="0" data-x="1" data-y="18"/></g>
+      <g transform="translate(43.3 270)" data-x="2" data-y="18"><use href="#point" x="0" y="0" data-x="2" data-y="18"/></g>
+      <g transform="translate(60.6 270)" data-x="3" data-y="18"><use href="#point" x="0" y="0" data-x="3" data-y="18"/></g>
+      <g transform="translate(77.9 270)" data-x="4" data-y="18"><use href="#point" x="0" y="0" data-x="4" data-y="18"/></g>
+      <g transform="translate(95.3 270)" data-x="5" data-y="18"><use href="#point" x="0" y="0" data-x="5" data-y="18"/></g>
+      <g transform="translate(112.6 270)" data-x="6" data-y="18"><use href="#point" x="0" y="0" data-x="6" data-y="18"/></g>
+      <g transform="translate(129.9 270)" data-x="7" data-y="18"><use href="#point" x="0" y="0" data-x="7" data-y="18"/></g>
+      <g transform="translate(147.2 270)" data-x="8" data-y="18"><use href="#point" x="0" y="0" data-x="8" data-y="18"/></g>
+      <g transform="translate(164.5 270)" data-x="9" data-y="18"><use href="#point" x="0" y="0" data-x="9" data-y="18"/></g>
+      <g transform="translate(181.9 270)" data-x="10" data-y="18"><use href="#point" x="0" y="0" data-x="10" data-y="18"/></g>
+      <g transform="translate(199.2 270)" data-x="11" data-y="18"><use href="#point" x="0" y="0" data-x="11" data-y="18"/></g>
+      <g transform="translate(216.5 270)" data-x="12" data-y="18"><use href="#point" x="0" y="0" data-x="12" data-y="18"/></g>
+      <g transform="translate(233.8 270)" data-x="13" data-y="18"><use href="#point" x="0" y="0" data-x="13" data-y="18"/></g>
+      <g transform="translate(251.1 270)" data-x="14" data-y="18"><use href="#point" x="0" y="0" data-x="14" data-y="18"/></g>
+      <g transform="translate(268.5 270)" data-x="15" data-y="18"><use href="#point" x="0" y="0" data-x="15" data-y="18"/></g>
+      <g transform="translate(285.8 270)" data-x="16" data-y="18"><use href="#point" x="0" y="0" data-x="16" data-y="18"/></g>
+      <g transform="translate(303.1 270)" data-x="17" data-y="18"><use href="#point" x="0" y="0" data-x="17" data-y="18"/></g>
+      <g transform="translate(320.4 270)" data-x="18" data-y="18"><use href="#point" x="0" y="0" data-x="18" data-y="18"/></g>
+      <g transform="translate(337.7 270)" data-x="19" data-y="18"><use href="#point" x="0" y="0" data-x="19" data-y="18"/></g>
+      <g transform="translate(355.1 270)" data-x="20" data-y="18"><use href="#point" x="0" y="0" data-x="20" data-y="18"/></g>
+      <g transform="translate(372.4 270)" data-x="21" data-y="18"><use href="#point" x="0" y="0" data-x="21" data-y="18"/></g>
+      <g transform="translate(389.7 270)" data-x="22" data-y="18"><use href="#point" x="0" y="0" data-x="22" data-y="18"/></g>
+      <g transform="translate(407 270)" data-x="23" data-y="18"><use href="#point" x="0" y="0" data-x="23" data-y="18"/></g>
+      <g transform="translate(424.4 270)" data-x="24" data-y="18"><use href="#point" x="0" y="0" data-x="24" data-y="18"/></g>
+      <g transform="translate(441.7 270)" data-x="25" data-y="18"><use href="#point" x="0" y="0" data-x="25" data-y="18"/></g>
+      <g transform="translate(459 270)" data-x="26" data-y="18"><use href="#point" x="0" y="0" data-x="26" data-y="18"/></g>
+      <g transform="translate(476.3 270)" data-x="27" data-y="18"><use href="#point" x="0" y="0" data-x="27" data-y="18"/></g>
+      <g transform="translate(493.6 270)" data-x="28" data-y="18"><use href="#point" x="0" y="0" data-x="28" data-y="18"/></g>
+      <g transform="translate(511 270)" data-x="29" data-y="18"><use href="#point" x="0" y="0" data-x="29" data-y="18"/></g>
+      <g transform="translate(528.3 270)" data-x="30" data-y="18"><use href="#point" x="0" y="0" data-x="30" data-y="18"/></g>
+      <g transform="translate(545.6 270)" data-x="31" data-y="18"><use href="#point" x="0" y="0" data-x="31" data-y="18"/></g>
+      <g transform="translate(562.9 270)" data-x="32" data-y="18"><use href="#point" x="0" y="0" data-x="32" data-y="18"/></g>
+      <g transform="translate(0 285)" data-x="0" data-y="19"><use href="#point" x="0" y="0" data-x="0" data-y="19"/></g>
+      <g transform="translate(17.3 285)" data-x="1" data-y="19"><use href="#point" x="0" y="0" data-x="1" data-y="19"/></g>
+      <g transform="translate(34.6 285)" data-x="2" data-y="19"><use href="#point" x="0" y="0" data-x="2" data-y="19"/></g>
+      <g transform="translate(52 285)" data-x="3" data-y="19"><use href="#point" x="0" y="0" data-x="3" data-y="19"/></g>
+      <g transform="translate(69.3 285)" data-x="4" data-y="19"><use href="#point" x="0" y="0" data-x="4" data-y="19"/></g>
+      <g transform="translate(86.6 285)" data-x="5" data-y="19"><use href="#point" x="0" y="0" data-x="5" data-y="19"/></g>
+      <g transform="translate(103.9 285)" data-x="6" data-y="19"><use href="#point" x="0" y="0" data-x="6" data-y="19"/></g>
+      <g transform="translate(121.2 285)" data-x="7" data-y="19"><use href="#point" x="0" y="0" data-x="7" data-y="19"/></g>
+      <g transform="translate(138.6 285)" data-x="8" data-y="19"><use href="#point" x="0" y="0" data-x="8" data-y="19"/></g>
+      <g transform="translate(155.9 285)" data-x="9" data-y="19"><use href="#point" x="0" y="0" data-x="9" data-y="19"/></g>
+      <g transform="translate(173.2 285)" data-x="10" data-y="19"><use href="#point" x="0" y="0" data-x="10" data-y="19"/></g>
+      <g transform="translate(190.5 285)" data-x="11" data-y="19"><use href="#point" x="0" y="0" data-x="11" data-y="19"/></g>
+      <g transform="translate(207.8 285)" data-x="12" data-y="19"><use href="#point" x="0" y="0" data-x="12" data-y="19"/></g>
+      <g transform="translate(225.2 285)" data-x="13" data-y="19"><use href="#point" x="0" y="0" data-x="13" data-y="19"/></g>
+      <g transform="translate(242.5 285)" data-x="14" data-y="19"><use href="#point" x="0" y="0" data-x="14" data-y="19"/></g>
+      <g transform="translate(259.8 285)" data-x="15" data-y="19"><use href="#point" x="0" y="0" data-x="15" data-y="19"/></g>
+      <g transform="translate(277.1 285)" data-x="16" data-y="19"><use href="#point" x="0" y="0" data-x="16" data-y="19"/></g>
+      <g transform="translate(294.4 285)" data-x="17" data-y="19"><use href="#point" x="0" y="0" data-x="17" data-y="19"/></g>
+      <g transform="translate(311.8 285)" data-x="18" data-y="19"><use href="#point" x="0" y="0" data-x="18" data-y="19"/></g>
+      <g transform="translate(329.1 285)" data-x="19" data-y="19"><use href="#point" x="0" y="0" data-x="19" data-y="19"/></g>
+      <g transform="translate(346.4 285)" data-x="20" data-y="19"><use href="#point" x="0" y="0" data-x="20" data-y="19"/></g>
+      <g transform="translate(363.7 285)" data-x="21" data-y="19"><use href="#point" x="0" y="0" data-x="21" data-y="19"/></g>
+      <g transform="translate(381.1 285)" data-x="22" data-y="19"><use href="#point" x="0" y="0" data-x="22" data-y="19"/></g>
+      <g transform="translate(398.4 285)" data-x="23" data-y="19"><use href="#point" x="0" y="0" data-x="23" data-y="19"/></g>
+      <g transform="translate(415.7 285)" data-x="24" data-y="19"><use href="#point" x="0" y="0" data-x="24" data-y="19"/></g>
+      <g transform="translate(433 285)" data-x="25" data-y="19"><use href="#point" x="0" y="0" data-x="25" data-y="19"/></g>
+      <g transform="translate(450.3 285)" data-x="26" data-y="19"><use href="#point" x="0" y="0" data-x="26" data-y="19"/></g>
+      <g transform="translate(467.7 285)" data-x="27" data-y="19"><use href="#point" x="0" y="0" data-x="27" data-y="19"/></g>
+      <g transform="translate(485 285)" data-x="28" data-y="19"><use href="#point" x="0" y="0" data-x="28" data-y="19"/></g>
+      <g transform="translate(502.3 285)" data-x="29" data-y="19"><use href="#point" x="0" y="0" data-x="29" data-y="19"/></g>
+      <g transform="translate(519.6 285)" data-x="30" data-y="19"><use href="#point" x="0" y="0" data-x="30" data-y="19"/></g>
+      <g transform="translate(536.9 285)" data-x="31" data-y="19"><use href="#point" x="0" y="0" data-x="31" data-y="19"/></g>
+      <g transform="translate(554.3 285)" data-x="32" data-y="19"><use href="#point" x="0" y="0" data-x="32" data-y="19"/></g>
+      <g transform="translate(8.7 300)" data-x="0" data-y="20"><use href="#point" x="0" y="0" data-x="0" data-y="20"/></g>
+      <g transform="translate(26 300)" data-x="1" data-y="20"><use href="#point" x="0" y="0" data-x="1" data-y="20"/></g>
+      <g transform="translate(43.3 300)" data-x="2" data-y="20"><use href="#point" x="0" y="0" data-x="2" data-y="20"/></g>
+      <g transform="translate(60.6 300)" data-x="3" data-y="20"><use href="#point" x="0" y="0" data-x="3" data-y="20"/></g>
+      <g transform="translate(77.9 300)" data-x="4" data-y="20"><use href="#point" x="0" y="0" data-x="4" data-y="20"/></g>
+      <g transform="translate(95.3 300)" data-x="5" data-y="20"><use href="#point" x="0" y="0" data-x="5" data-y="20"/></g>
+      <g transform="translate(112.6 300)" data-x="6" data-y="20"><use href="#point" x="0" y="0" data-x="6" data-y="20"/></g>
+      <g transform="translate(129.9 300)" data-x="7" data-y="20"><use href="#point" x="0" y="0" data-x="7" data-y="20"/></g>
+      <g transform="translate(147.2 300)" data-x="8" data-y="20"><use href="#point" x="0" y="0" data-x="8" data-y="20"/></g>
+      <g transform="translate(164.5 300)" data-x="9" data-y="20"><use href="#point" x="0" y="0" data-x="9" data-y="20"/></g>
+      <g transform="translate(181.9 300)" data-x="10" data-y="20"><use href="#point" x="0" y="0" data-x="10" data-y="20"/></g>
+      <g transform="translate(199.2 300)" data-x="11" data-y="20"><use href="#point" x="0" y="0" data-x="11" data-y="20"/></g>
+      <g transform="translate(216.5 300)" data-x="12" data-y="20"><use href="#point" x="0" y="0" data-x="12" data-y="20"/></g>
+      <g transform="translate(233.8 300)" data-x="13" data-y="20"><use href="#point" x="0" y="0" data-x="13" data-y="20"/></g>
+      <g transform="translate(251.1 300)" data-x="14" data-y="20"><use href="#point" x="0" y="0" data-x="14" data-y="20"/></g>
+      <g transform="translate(268.5 300)" data-x="15" data-y="20"><use href="#point" x="0" y="0" data-x="15" data-y="20"/></g>
+      <g transform="translate(285.8 300)" data-x="16" data-y="20"><use href="#point" x="0" y="0" data-x="16" data-y="20"/></g>
+      <g transform="translate(303.1 300)" data-x="17" data-y="20"><use href="#point" x="0" y="0" data-x="17" data-y="20"/></g>
+      <g transform="translate(320.4 300)" data-x="18" data-y="20"><use href="#point" x="0" y="0" data-x="18" data-y="20"/></g>
+      <g transform="translate(337.7 300)" data-x="19" data-y="20"><use href="#point" x="0" y="0" data-x="19" data-y="20"/></g>
+      <g transform="translate(355.1 300)" data-x="20" data-y="20"><use href="#point" x="0" y="0" data-x="20" data-y="20"/></g>
+      <g transform="translate(372.4 300)" data-x="21" data-y="20"><use href="#point" x="0" y="0" data-x="21" data-y="20"/></g>
+      <g transform="translate(389.7 300)" data-x="22" data-y="20"><use href="#point" x="0" y="0" data-x="22" data-y="20"/></g>
+      <g transform="translate(407 300)" data-x="23" data-y="20"><use href="#point" x="0" y="0" data-x="23" data-y="20"/></g>
+      <g transform="translate(424.4 300)" data-x="24" data-y="20"><use href="#point" x="0" y="0" data-x="24" data-y="20"/></g>
+      <g transform="translate(441.7 300)" data-x="25" data-y="20"><use href="#point" x="0" y="0" data-x="25" data-y="20"/></g>
+      <g transform="translate(459 300)" data-x="26" data-y="20"><use href="#point" x="0" y="0" data-x="26" data-y="20"/></g>
+      <g transform="translate(476.3 300)" data-x="27" data-y="20"><use href="#point" x="0" y="0" data-x="27" data-y="20"/></g>
+      <g transform="translate(493.6 300)" data-x="28" data-y="20"><use href="#point" x="0" y="0" data-x="28" data-y="20"/></g>
+      <g transform="translate(511 300)" data-x="29" data-y="20"><use href="#point" x="0" y="0" data-x="29" data-y="20"/></g>
+      <g transform="translate(528.3 300)" data-x="30" data-y="20"><use href="#point" x="0" y="0" data-x="30" data-y="20"/></g>
+      <g transform="translate(545.6 300)" data-x="31" data-y="20"><use href="#point" x="0" y="0" data-x="31" data-y="20"/></g>
+      <g transform="translate(562.9 300)" data-x="32" data-y="20"><use href="#point" x="0" y="0" data-x="32" data-y="20"/></g>
+      <g transform="translate(0 315)" data-x="0" data-y="21"><use href="#point" x="0" y="0" data-x="0" data-y="21"/></g>
+      <g transform="translate(17.3 315)" data-x="1" data-y="21"><use href="#point" x="0" y="0" data-x="1" data-y="21"/></g>
+      <g transform="translate(34.6 315)" data-x="2" data-y="21"><use href="#point" x="0" y="0" data-x="2" data-y="21"/></g>
+      <g transform="translate(52 315)" data-x="3" data-y="21"><use href="#point" x="0" y="0" data-x="3" data-y="21"/></g>
+      <g transform="translate(69.3 315)" data-x="4" data-y="21"><use href="#point" x="0" y="0" data-x="4" data-y="21"/></g>
+      <g transform="translate(86.6 315)" data-x="5" data-y="21"><use href="#point" x="0" y="0" data-x="5" data-y="21"/></g>
+      <g transform="translate(103.9 315)" data-x="6" data-y="21"><use href="#point" x="0" y="0" data-x="6" data-y="21"/></g>
+      <g transform="translate(121.2 315)" data-x="7" data-y="21"><use href="#point" x="0" y="0" data-x="7" data-y="21"/></g>
+      <g transform="translate(138.6 315)" data-x="8" data-y="21"><use href="#point" x="0" y="0" data-x="8" data-y="21"/></g>
+      <g transform="translate(155.9 315)" data-x="9" data-y="21"><use href="#point" x="0" y="0" data-x="9" data-y="21"/></g>
+      <g transform="translate(173.2 315)" data-x="10" data-y="21"><use href="#point" x="0" y="0" data-x="10" data-y="21"/></g>
+      <g transform="translate(190.5 315)" data-x="11" data-y="21"><use href="#point" x="0" y="0" data-x="11" data-y="21"/></g>
+      <g transform="translate(207.8 315)" data-x="12" data-y="21"><use href="#point" x="0" y="0" data-x="12" data-y="21"/></g>
+      <g transform="translate(225.2 315)" data-x="13" data-y="21"><use href="#point" x="0" y="0" data-x="13" data-y="21"/></g>
+      <g transform="translate(242.5 315)" data-x="14" data-y="21"><use href="#point" x="0" y="0" data-x="14" data-y="21"/></g>
+      <g transform="translate(259.8 315)" data-x="15" data-y="21"><use href="#point" x="0" y="0" data-x="15" data-y="21"/></g>
+      <g transform="translate(277.1 315)" data-x="16" data-y="21"><use href="#point" x="0" y="0" data-x="16" data-y="21"/></g>
+      <g transform="translate(294.4 315)" data-x="17" data-y="21"><use href="#point" x="0" y="0" data-x="17" data-y="21"/></g>
+      <g transform="translate(311.8 315)" data-x="18" data-y="21"><use href="#point" x="0" y="0" data-x="18" data-y="21"/></g>
+      <g transform="translate(329.1 315)" data-x="19" data-y="21"><use href="#point" x="0" y="0" data-x="19" data-y="21"/></g>
+      <g transform="translate(346.4 315)" data-x="20" data-y="21"><use href="#point" x="0" y="0" data-x="20" data-y="21"/></g>
+      <g transform="translate(363.7 315)" data-x="21" data-y="21"><use href="#point" x="0" y="0" data-x="21" data-y="21"/></g>
+      <g transform="translate(381.1 315)" data-x="22" data-y="21"><use href="#point" x="0" y="0" data-x="22" data-y="21"/></g>
+      <g transform="translate(398.4 315)" data-x="23" data-y="21"><use href="#point" x="0" y="0" data-x="23" data-y="21"/></g>
+      <g transform="translate(415.7 315)" data-x="24" data-y="21"><use href="#point" x="0" y="0" data-x="24" data-y="21"/></g>
+      <g transform="translate(433 315)" data-x="25" data-y="21"><use href="#point" x="0" y="0" data-x="25" data-y="21"/></g>
+      <g transform="translate(450.3 315)" data-x="26" data-y="21"><use href="#point" x="0" y="0" data-x="26" data-y="21"/></g>
+      <g transform="translate(467.7 315)" data-x="27" data-y="21"><use href="#point" x="0" y="0" data-x="27" data-y="21"/></g>
+      <g transform="translate(485 315)" data-x="28" data-y="21"><use href="#point" x="0" y="0" data-x="28" data-y="21"/></g>
+      <g transform="translate(502.3 315)" data-x="29" data-y="21"><use href="#point" x="0" y="0" data-x="29" data-y="21"/></g>
+      <g transform="translate(519.6 315)" data-x="30" data-y="21"><use href="#point" x="0" y="0" data-x="30" data-y="21"/></g>
+      <g transform="translate(536.9 315)" data-x="31" data-y="21"><use href="#point" x="0" y="0" data-x="31" data-y="21"/></g>
+      <g transform="translate(554.3 315)" data-x="32" data-y="21"><use href="#point" x="0" y="0" data-x="32" data-y="21"/></g>
+      <g transform="translate(8.7 330)" data-x="0" data-y="22"><use href="#point" x="0" y="0" data-x="0" data-y="22"/></g>
+      <g transform="translate(26 330)" data-x="1" data-y="22"><use href="#point" x="0" y="0" data-x="1" data-y="22"/></g>
+      <g transform="translate(43.3 330)" data-x="2" data-y="22"><use href="#point" x="0" y="0" data-x="2" data-y="22"/></g>
+      <g transform="translate(60.6 330)" data-x="3" data-y="22"><use href="#point" x="0" y="0" data-x="3" data-y="22"/></g>
+      <g transform="translate(77.9 330)" data-x="4" data-y="22"><use href="#point" x="0" y="0" data-x="4" data-y="22"/></g>
+      <g transform="translate(95.3 330)" data-x="5" data-y="22"><use href="#point" x="0" y="0" data-x="5" data-y="22"/></g>
+      <g transform="translate(112.6 330)" data-x="6" data-y="22"><use href="#point" x="0" y="0" data-x="6" data-y="22"/></g>
+      <g transform="translate(129.9 330)" data-x="7" data-y="22"><use href="#point" x="0" y="0" data-x="7" data-y="22"/></g>
+      <g transform="translate(147.2 330)" data-x="8" data-y="22"><use href="#point" x="0" y="0" data-x="8" data-y="22"/></g>
+      <g transform="translate(164.5 330)" data-x="9" data-y="22"><use href="#point" x="0" y="0" data-x="9" data-y="22"/></g>
+      <g transform="translate(181.9 330)" data-x="10" data-y="22"><use href="#point" x="0" y="0" data-x="10" data-y="22"/></g>
+      <g transform="translate(199.2 330)" data-x="11" data-y="22"><use href="#point" x="0" y="0" data-x="11" data-y="22"/></g>
+      <g transform="translate(216.5 330)" data-x="12" data-y="22"><use href="#point" x="0" y="0" data-x="12" data-y="22"/></g>
+      <g transform="translate(233.8 330)" data-x="13" data-y="22"><use href="#point" x="0" y="0" data-x="13" data-y="22"/></g>
+      <g transform="translate(251.1 330)" data-x="14" data-y="22"><use href="#point" x="0" y="0" data-x="14" data-y="22"/></g>
+      <g transform="translate(268.5 330)" data-x="15" data-y="22"><use href="#point" x="0" y="0" data-x="15" data-y="22"/></g>
+      <g transform="translate(285.8 330)" data-x="16" data-y="22"><use href="#point" x="0" y="0" data-x="16" data-y="22"/></g>
+      <g transform="translate(303.1 330)" data-x="17" data-y="22"><use href="#point" x="0" y="0" data-x="17" data-y="22"/></g>
+      <g transform="translate(320.4 330)" data-x="18" data-y="22"><use href="#point" x="0" y="0" data-x="18" data-y="22"/></g>
+      <g transform="translate(337.7 330)" data-x="19" data-y="22"><use href="#point" x="0" y="0" data-x="19" data-y="22"/></g>
+      <g transform="translate(355.1 330)" data-x="20" data-y="22"><use href="#point" x="0" y="0" data-x="20" data-y="22"/></g>
+      <g transform="translate(372.4 330)" data-x="21" data-y="22"><use href="#point" x="0" y="0" data-x="21" data-y="22"/></g>
+      <g transform="translate(389.7 330)" data-x="22" data-y="22"><use href="#point" x="0" y="0" data-x="22" data-y="22"/></g>
+      <g transform="translate(407 330)" data-x="23" data-y="22"><use href="#point" x="0" y="0" data-x="23" data-y="22"/></g>
+      <g transform="translate(424.4 330)" data-x="24" data-y="22"><use href="#point" x="0" y="0" data-x="24" data-y="22"/></g>
+      <g transform="translate(441.7 330)" data-x="25" data-y="22"><use href="#point" x="0" y="0" data-x="25" data-y="22"/></g>
+      <g transform="translate(459 330)" data-x="26" data-y="22"><use href="#point" x="0" y="0" data-x="26" data-y="22"/></g>
+      <g transform="translate(476.3 330)" data-x="27" data-y="22"><use href="#point" x="0" y="0" data-x="27" data-y="22"/></g>
+      <g transform="translate(493.6 330)" data-x="28" data-y="22"><use href="#point" x="0" y="0" data-x="28" data-y="22"/></g>
+      <g transform="translate(511 330)" data-x="29" data-y="22"><use href="#point" x="0" y="0" data-x="29" data-y="22"/></g>
+      <g transform="translate(528.3 330)" data-x="30" data-y="22"><use href="#point" x="0" y="0" data-x="30" data-y="22"/></g>
+      <g transform="translate(545.6 330)" data-x="31" data-y="22"><use href="#point" x="0" y="0" data-x="31" data-y="22"/></g>
+      <g transform="translate(562.9 330)" data-x="32" data-y="22"><use href="#point" x="0" y="0" data-x="32" data-y="22"/></g>
+      <g transform="translate(0 345)" data-x="0" data-y="23"><use href="#point" x="0" y="0" data-x="0" data-y="23"/></g>
+      <g transform="translate(17.3 345)" data-x="1" data-y="23"><use href="#point" x="0" y="0" data-x="1" data-y="23"/></g>
+      <g transform="translate(34.6 345)" data-x="2" data-y="23"><use href="#point" x="0" y="0" data-x="2" data-y="23"/></g>
+      <g transform="translate(52 345)" data-x="3" data-y="23"><use href="#point" x="0" y="0" data-x="3" data-y="23"/></g>
+      <g transform="translate(69.3 345)" data-x="4" data-y="23"><use href="#point" x="0" y="0" data-x="4" data-y="23"/></g>
+      <g transform="translate(86.6 345)" data-x="5" data-y="23"><use href="#point" x="0" y="0" data-x="5" data-y="23"/></g>
+      <g transform="translate(103.9 345)" data-x="6" data-y="23"><use href="#point" x="0" y="0" data-x="6" data-y="23"/></g>
+      <g transform="translate(121.2 345)" data-x="7" data-y="23"><use href="#point" x="0" y="0" data-x="7" data-y="23"/></g>
+      <g transform="translate(138.6 345)" data-x="8" data-y="23"><use href="#point" x="0" y="0" data-x="8" data-y="23"/></g>
+      <g transform="translate(155.9 345)" data-x="9" data-y="23"><use href="#point" x="0" y="0" data-x="9" data-y="23"/></g>
+      <g transform="translate(173.2 345)" data-x="10" data-y="23"><use href="#point" x="0" y="0" data-x="10" data-y="23"/></g>
+      <g transform="translate(190.5 345)" data-x="11" data-y="23"><use href="#point" x="0" y="0" data-x="11" data-y="23"/></g>
+      <g transform="translate(207.8 345)" data-x="12" data-y="23"><use href="#point" x="0" y="0" data-x="12" data-y="23"/></g>
+      <g transform="translate(225.2 345)" data-x="13" data-y="23"><use href="#point" x="0" y="0" data-x="13" data-y="23"/></g>
+      <g transform="translate(242.5 345)" data-x="14" data-y="23"><use href="#point" x="0" y="0" data-x="14" data-y="23"/></g>
+      <g transform="translate(259.8 345)" data-x="15" data-y="23"><use href="#point" x="0" y="0" data-x="15" data-y="23"/></g>
+      <g transform="translate(277.1 345)" data-x="16" data-y="23"><use href="#point" x="0" y="0" data-x="16" data-y="23"/></g>
+      <g transform="translate(294.4 345)" data-x="17" data-y="23"><use href="#point" x="0" y="0" data-x="17" data-y="23"/></g>
+      <g transform="translate(311.8 345)" data-x="18" data-y="23"><use href="#point" x="0" y="0" data-x="18" data-y="23"/></g>
+      <g transform="translate(329.1 345)" data-x="19" data-y="23"><use href="#point" x="0" y="0" data-x="19" data-y="23"/></g>
+      <g transform="translate(346.4 345)" data-x="20" data-y="23"><use href="#point" x="0" y="0" data-x="20" data-y="23"/></g>
+      <g transform="translate(363.7 345)" data-x="21" data-y="23"><use href="#point" x="0" y="0" data-x="21" data-y="23"/></g>
+      <g transform="translate(381.1 345)" data-x="22" data-y="23"><use href="#point" x="0" y="0" data-x="22" data-y="23"/></g>
+      <g transform="translate(398.4 345)" data-x="23" data-y="23"><use href="#point" x="0" y="0" data-x="23" data-y="23"/></g>
+      <g transform="translate(415.7 345)" data-x="24" data-y="23"><use href="#point" x="0" y="0" data-x="24" data-y="23"/></g>
+      <g transform="translate(433 345)" data-x="25" data-y="23"><use href="#point" x="0" y="0" data-x="25" data-y="23"/></g>
+      <g transform="translate(450.3 345)" data-x="26" data-y="23"><use href="#point" x="0" y="0" data-x="26" data-y="23"/></g>
+      <g transform="translate(467.7 345)" data-x="27" data-y="23"><use href="#point" x="0" y="0" data-x="27" data-y="23"/></g>
+      <g transform="translate(485 345)" data-x="28" data-y="23"><use href="#point" x="0" y="0" data-x="28" data-y="23"/></g>
+      <g transform="translate(502.3 345)" data-x="29" data-y="23"><use href="#point" x="0" y="0" data-x="29" data-y="23"/></g>
+      <g transform="translate(519.6 345)" data-x="30" data-y="23"><use href="#point" x="0" y="0" data-x="30" data-y="23"/></g>
+      <g transform="translate(536.9 345)" data-x="31" data-y="23"><use href="#point" x="0" y="0" data-x="31" data-y="23"/></g>
+      <g transform="translate(554.3 345)" data-x="32" data-y="23"><use href="#point" x="0" y="0" data-x="32" data-y="23"/></g>
+      <g transform="translate(8.7 360)" data-x="0" data-y="24"><use href="#point" x="0" y="0" data-x="0" data-y="24"/></g>
+      <g transform="translate(26 360)" data-x="1" data-y="24"><use href="#point" x="0" y="0" data-x="1" data-y="24"/></g>
+      <g transform="translate(43.3 360)" data-x="2" data-y="24"><use href="#point" x="0" y="0" data-x="2" data-y="24"/></g>
+      <g transform="translate(60.6 360)" data-x="3" data-y="24"><use href="#point" x="0" y="0" data-x="3" data-y="24"/></g>
+      <g transform="translate(77.9 360)" data-x="4" data-y="24"><use href="#point" x="0" y="0" data-x="4" data-y="24"/></g>
+      <g transform="translate(95.3 360)" data-x="5" data-y="24"><use href="#point" x="0" y="0" data-x="5" data-y="24"/></g>
+      <g transform="translate(112.6 360)" data-x="6" data-y="24"><use href="#point" x="0" y="0" data-x="6" data-y="24"/></g>
+      <g transform="translate(129.9 360)" data-x="7" data-y="24"><use href="#point" x="0" y="0" data-x="7" data-y="24"/></g>
+      <g transform="translate(147.2 360)" data-x="8" data-y="24"><use href="#point" x="0" y="0" data-x="8" data-y="24"/></g>
+      <g transform="translate(164.5 360)" data-x="9" data-y="24"><use href="#point" x="0" y="0" data-x="9" data-y="24"/></g>
+      <g transform="translate(181.9 360)" data-x="10" data-y="24"><use href="#point" x="0" y="0" data-x="10" data-y="24"/></g>
+      <g transform="translate(199.2 360)" data-x="11" data-y="24"><use href="#point" x="0" y="0" data-x="11" data-y="24"/></g>
+      <g transform="translate(216.5 360)" data-x="12" data-y="24"><use href="#point" x="0" y="0" data-x="12" data-y="24"/></g>
+      <g transform="translate(233.8 360)" data-x="13" data-y="24"><use href="#point" x="0" y="0" data-x="13" data-y="24"/></g>
+      <g transform="translate(251.1 360)" data-x="14" data-y="24"><use href="#point" x="0" y="0" data-x="14" data-y="24"/></g>
+      <g transform="translate(268.5 360)" data-x="15" data-y="24"><use href="#point" x="0" y="0" data-x="15" data-y="24"/></g>
+      <g transform="translate(285.8 360)" data-x="16" data-y="24"><use href="#point" x="0" y="0" data-x="16" data-y="24"/></g>
+      <g transform="translate(303.1 360)" data-x="17" data-y="24"><use href="#point" x="0" y="0" data-x="17" data-y="24"/></g>
+      <g transform="translate(320.4 360)" data-x="18" data-y="24"><use href="#point" x="0" y="0" data-x="18" data-y="24"/></g>
+      <g transform="translate(337.7 360)" data-x="19" data-y="24"><use href="#point" x="0" y="0" data-x="19" data-y="24"/></g>
+      <g transform="translate(355.1 360)" data-x="20" data-y="24"><use href="#point" x="0" y="0" data-x="20" data-y="24"/></g>
+      <g transform="translate(372.4 360)" data-x="21" data-y="24"><use href="#point" x="0" y="0" data-x="21" data-y="24"/></g>
+      <g transform="translate(389.7 360)" data-x="22" data-y="24"><use href="#point" x="0" y="0" data-x="22" data-y="24"/></g>
+      <g transform="translate(407 360)" data-x="23" data-y="24"><use href="#point" x="0" y="0" data-x="23" data-y="24"/></g>
+      <g transform="translate(424.4 360)" data-x="24" data-y="24"><use href="#point" x="0" y="0" data-x="24" data-y="24"/></g>
+      <g transform="translate(441.7 360)" data-x="25" data-y="24"><use href="#point" x="0" y="0" data-x="25" data-y="24"/></g>
+      <g transform="translate(459 360)" data-x="26" data-y="24"><use href="#point" x="0" y="0" data-x="26" data-y="24"/></g>
+      <g transform="translate(476.3 360)" data-x="27" data-y="24"><use href="#point" x="0" y="0" data-x="27" data-y="24"/></g>
+      <g transform="translate(493.6 360)" data-x="28" data-y="24"><use href="#point" x="0" y="0" data-x="28" data-y="24"/></g>
+      <g transform="translate(511 360)" data-x="29" data-y="24"><use href="#point" x="0" y="0" data-x="29" data-y="24"/></g>
+      <g transform="translate(528.3 360)" data-x="30" data-y="24"><use href="#point" x="0" y="0" data-x="30" data-y="24"/></g>
+      <g transform="translate(545.6 360)" data-x="31" data-y="24"><use href="#point" x="0" y="0" data-x="31" data-y="24"/></g>
+      <g transform="translate(562.9 360)" data-x="32" data-y="24"><use href="#point" x="0" y="0" data-x="32" data-y="24"/></g>
+      <g transform="translate(0 375)" data-x="0" data-y="25"><use href="#point" x="0" y="0" data-x="0" data-y="25"/></g>
+      <g transform="translate(17.3 375)" data-x="1" data-y="25"><use href="#point" x="0" y="0" data-x="1" data-y="25"/></g>
+      <g transform="translate(34.6 375)" data-x="2" data-y="25"><use href="#point" x="0" y="0" data-x="2" data-y="25"/></g>
+      <g transform="translate(52 375)" data-x="3" data-y="25"><use href="#point" x="0" y="0" data-x="3" data-y="25"/></g>
+      <g transform="translate(69.3 375)" data-x="4" data-y="25"><use href="#point" x="0" y="0" data-x="4" data-y="25"/></g>
+      <g transform="translate(86.6 375)" data-x="5" data-y="25"><use href="#point" x="0" y="0" data-x="5" data-y="25"/></g>
+      <g transform="translate(103.9 375)" data-x="6" data-y="25"><use href="#point" x="0" y="0" data-x="6" data-y="25"/></g>
+      <g transform="translate(121.2 375)" data-x="7" data-y="25"><use href="#point" x="0" y="0" data-x="7" data-y="25"/></g>
+      <g transform="translate(138.6 375)" data-x="8" data-y="25"><use href="#point" x="0" y="0" data-x="8" data-y="25"/></g>
+      <g transform="translate(155.9 375)" data-x="9" data-y="25"><use href="#point" x="0" y="0" data-x="9" data-y="25"/></g>
+      <g transform="translate(173.2 375)" data-x="10" data-y="25"><use href="#point" x="0" y="0" data-x="10" data-y="25"/></g>
+      <g transform="translate(190.5 375)" data-x="11" data-y="25"><use href="#point" x="0" y="0" data-x="11" data-y="25"/></g>
+      <g transform="translate(207.8 375)" data-x="12" data-y="25"><use href="#point" x="0" y="0" data-x="12" data-y="25"/></g>
+      <g transform="translate(225.2 375)" data-x="13" data-y="25"><use href="#point" x="0" y="0" data-x="13" data-y="25"/></g>
+      <g transform="translate(242.5 375)" data-x="14" data-y="25"><use href="#point" x="0" y="0" data-x="14" data-y="25"/></g>
+      <g transform="translate(259.8 375)" data-x="15" data-y="25"><use href="#point" x="0" y="0" data-x="15" data-y="25"/></g>
+      <g transform="translate(277.1 375)" data-x="16" data-y="25"><use href="#point" x="0" y="0" data-x="16" data-y="25"/></g>
+      <g transform="translate(294.4 375)" data-x="17" data-y="25"><use href="#point" x="0" y="0" data-x="17" data-y="25"/></g>
+      <g transform="translate(311.8 375)" data-x="18" data-y="25"><use href="#point" x="0" y="0" data-x="18" data-y="25"/></g>
+      <g transform="translate(329.1 375)" data-x="19" data-y="25"><use href="#point" x="0" y="0" data-x="19" data-y="25"/></g>
+      <g transform="translate(346.4 375)" data-x="20" data-y="25"><use href="#point" x="0" y="0" data-x="20" data-y="25"/></g>
+      <g transform="translate(363.7 375)" data-x="21" data-y="25"><use href="#point" x="0" y="0" data-x="21" data-y="25"/></g>
+      <g transform="translate(381.1 375)" data-x="22" data-y="25"><use href="#point" x="0" y="0" data-x="22" data-y="25"/></g>
+      <g transform="translate(398.4 375)" data-x="23" data-y="25"><use href="#point" x="0" y="0" data-x="23" data-y="25"/></g>
+      <g transform="translate(415.7 375)" data-x="24" data-y="25"><use href="#point" x="0" y="0" data-x="24" data-y="25"/></g>
+      <g transform="translate(433 375)" data-x="25" data-y="25"><use href="#point" x="0" y="0" data-x="25" data-y="25"/></g>
+      <g transform="translate(450.3 375)" data-x="26" data-y="25"><use href="#point" x="0" y="0" data-x="26" data-y="25"/></g>
+      <g transform="translate(467.7 375)" data-x="27" data-y="25"><use href="#point" x="0" y="0" data-x="27" data-y="25"/></g>
+      <g transform="translate(485 375)" data-x="28" data-y="25"><use href="#point" x="0" y="0" data-x="28" data-y="25"/></g>
+      <g transform="translate(502.3 375)" data-x="29" data-y="25"><use href="#point" x="0" y="0" data-x="29" data-y="25"/></g>
+      <g transform="translate(519.6 375)" data-x="30" data-y="25"><use href="#point" x="0" y="0" data-x="30" data-y="25"/></g>
+      <g transform="translate(536.9 375)" data-x="31" data-y="25"><use href="#point" x="0" y="0" data-x="31" data-y="25"/></g>
+      <g transform="translate(554.3 375)" data-x="32" data-y="25"><use href="#point" x="0" y="0" data-x="32" data-y="25"/></g>
+      <g transform="translate(8.7 390)" data-x="0" data-y="26"><use href="#point" x="0" y="0" data-x="0" data-y="26"/></g>
+      <g transform="translate(26 390)" data-x="1" data-y="26"><use href="#point" x="0" y="0" data-x="1" data-y="26"/></g>
+      <g transform="translate(43.3 390)" data-x="2" data-y="26"><use href="#point" x="0" y="0" data-x="2" data-y="26"/></g>
+      <g transform="translate(60.6 390)" data-x="3" data-y="26"><use href="#point" x="0" y="0" data-x="3" data-y="26"/></g>
+      <g transform="translate(77.9 390)" data-x="4" data-y="26"><use href="#point" x="0" y="0" data-x="4" data-y="26"/></g>
+      <g transform="translate(95.3 390)" data-x="5" data-y="26"><use href="#point" x="0" y="0" data-x="5" data-y="26"/></g>
+      <g transform="translate(112.6 390)" data-x="6" data-y="26"><use href="#point" x="0" y="0" data-x="6" data-y="26"/></g>
+      <g transform="translate(129.9 390)" data-x="7" data-y="26"><use href="#point" x="0" y="0" data-x="7" data-y="26"/></g>
+      <g transform="translate(147.2 390)" data-x="8" data-y="26"><use href="#point" x="0" y="0" data-x="8" data-y="26"/></g>
+      <g transform="translate(164.5 390)" data-x="9" data-y="26"><use href="#point" x="0" y="0" data-x="9" data-y="26"/></g>
+      <g transform="translate(181.9 390)" data-x="10" data-y="26"><use href="#point" x="0" y="0" data-x="10" data-y="26"/></g>
+      <g transform="translate(199.2 390)" data-x="11" data-y="26"><use href="#point" x="0" y="0" data-x="11" data-y="26"/></g>
+      <g transform="translate(216.5 390)" data-x="12" data-y="26"><use href="#point" x="0" y="0" data-x="12" data-y="26"/></g>
+      <g transform="translate(233.8 390)" data-x="13" data-y="26"><use href="#point" x="0" y="0" data-x="13" data-y="26"/></g>
+      <g transform="translate(251.1 390)" data-x="14" data-y="26"><use href="#point" x="0" y="0" data-x="14" data-y="26"/></g>
+      <g transform="translate(268.5 390)" data-x="15" data-y="26"><use href="#point" x="0" y="0" data-x="15" data-y="26"/></g>
+      <g transform="translate(285.8 390)" data-x="16" data-y="26"><use href="#point" x="0" y="0" data-x="16" data-y="26"/></g>
+      <g transform="translate(303.1 390)" data-x="17" data-y="26"><use href="#point" x="0" y="0" data-x="17" data-y="26"/></g>
+      <g transform="translate(320.4 390)" data-x="18" data-y="26"><use href="#point" x="0" y="0" data-x="18" data-y="26"/></g>
+      <g transform="translate(337.7 390)" data-x="19" data-y="26"><use href="#point" x="0" y="0" data-x="19" data-y="26"/></g>
+      <g transform="translate(355.1 390)" data-x="20" data-y="26"><use href="#point" x="0" y="0" data-x="20" data-y="26"/></g>
+      <g transform="translate(372.4 390)" data-x="21" data-y="26"><use href="#point" x="0" y="0" data-x="21" data-y="26"/></g>
+      <g transform="translate(389.7 390)" data-x="22" data-y="26"><use href="#point" x="0" y="0" data-x="22" data-y="26"/></g>
+      <g transform="translate(407 390)" data-x="23" data-y="26"><use href="#point" x="0" y="0" data-x="23" data-y="26"/></g>
+      <g transform="translate(424.4 390)" data-x="24" data-y="26"><use href="#point" x="0" y="0" data-x="24" data-y="26"/></g>
+      <g transform="translate(441.7 390)" data-x="25" data-y="26"><use href="#point" x="0" y="0" data-x="25" data-y="26"/></g>
+      <g transform="translate(459 390)" data-x="26" data-y="26"><use href="#point" x="0" y="0" data-x="26" data-y="26"/></g>
+      <g transform="translate(476.3 390)" data-x="27" data-y="26"><use href="#point" x="0" y="0" data-x="27" data-y="26"/></g>
+      <g transform="translate(493.6 390)" data-x="28" data-y="26"><use href="#point" x="0" y="0" data-x="28" data-y="26"/></g>
+      <g transform="translate(511 390)" data-x="29" data-y="26"><use href="#point" x="0" y="0" data-x="29" data-y="26"/></g>
+      <g transform="translate(528.3 390)" data-x="30" data-y="26"><use href="#point" x="0" y="0" data-x="30" data-y="26"/></g>
+      <g transform="translate(545.6 390)" data-x="31" data-y="26"><use href="#point" x="0" y="0" data-x="31" data-y="26"/></g>
+      <g transform="translate(562.9 390)" data-x="32" data-y="26"><use href="#point" x="0" y="0" data-x="32" data-y="26"/></g>
+      <g transform="translate(0 405)" data-x="0" data-y="27"><use href="#point" x="0" y="0" data-x="0" data-y="27"/></g>
+      <g transform="translate(17.3 405)" data-x="1" data-y="27"><use href="#point" x="0" y="0" data-x="1" data-y="27"/></g>
+      <g transform="translate(34.6 405)" data-x="2" data-y="27"><use href="#point" x="0" y="0" data-x="2" data-y="27"/></g>
+      <g transform="translate(52 405)" data-x="3" data-y="27"><use href="#point" x="0" y="0" data-x="3" data-y="27"/></g>
+      <g transform="translate(69.3 405)" data-x="4" data-y="27"><use href="#point" x="0" y="0" data-x="4" data-y="27"/></g>
+      <g transform="translate(86.6 405)" data-x="5" data-y="27"><use href="#point" x="0" y="0" data-x="5" data-y="27"/></g>
+      <g transform="translate(103.9 405)" data-x="6" data-y="27"><use href="#point" x="0" y="0" data-x="6" data-y="27"/></g>
+      <g transform="translate(121.2 405)" data-x="7" data-y="27"><use href="#point" x="0" y="0" data-x="7" data-y="27"/></g>
+      <g transform="translate(138.6 405)" data-x="8" data-y="27"><use href="#point" x="0" y="0" data-x="8" data-y="27"/></g>
+      <g transform="translate(155.9 405)" data-x="9" data-y="27"><use href="#point" x="0" y="0" data-x="9" data-y="27"/></g>
+      <g transform="translate(173.2 405)" data-x="10" data-y="27"><use href="#point" x="0" y="0" data-x="10" data-y="27"/></g>
+      <g transform="translate(190.5 405)" data-x="11" data-y="27"><use href="#point" x="0" y="0" data-x="11" data-y="27"/></g>
+      <g transform="translate(207.8 405)" data-x="12" data-y="27"><use href="#point" x="0" y="0" data-x="12" data-y="27"/></g>
+      <g transform="translate(225.2 405)" data-x="13" data-y="27"><use href="#point" x="0" y="0" data-x="13" data-y="27"/></g>
+      <g transform="translate(242.5 405)" data-x="14" data-y="27"><use href="#point" x="0" y="0" data-x="14" data-y="27"/></g>
+      <g transform="translate(259.8 405)" data-x="15" data-y="27"><use href="#point" x="0" y="0" data-x="15" data-y="27"/></g>
+      <g transform="translate(277.1 405)" data-x="16" data-y="27"><use href="#point" x="0" y="0" data-x="16" data-y="27"/></g>
+      <g transform="translate(294.4 405)" data-x="17" data-y="27"><use href="#point" x="0" y="0" data-x="17" data-y="27"/></g>
+      <g transform="translate(311.8 405)" data-x="18" data-y="27"><use href="#point" x="0" y="0" data-x="18" data-y="27"/></g>
+      <g transform="translate(329.1 405)" data-x="19" data-y="27"><use href="#point" x="0" y="0" data-x="19" data-y="27"/></g>
+      <g transform="translate(346.4 405)" data-x="20" data-y="27"><use href="#point" x="0" y="0" data-x="20" data-y="27"/></g>
+      <g transform="translate(363.7 405)" data-x="21" data-y="27"><use href="#point" x="0" y="0" data-x="21" data-y="27"/></g>
+      <g transform="translate(381.1 405)" data-x="22" data-y="27"><use href="#point" x="0" y="0" data-x="22" data-y="27"/></g>
+      <g transform="translate(398.4 405)" data-x="23" data-y="27"><use href="#point" x="0" y="0" data-x="23" data-y="27"/></g>
+      <g transform="translate(415.7 405)" data-x="24" data-y="27"><use href="#point" x="0" y="0" data-x="24" data-y="27"/></g>
+      <g transform="translate(433 405)" data-x="25" data-y="27"><use href="#point" x="0" y="0" data-x="25" data-y="27"/></g>
+      <g transform="translate(450.3 405)" data-x="26" data-y="27"><use href="#point" x="0" y="0" data-x="26" data-y="27"/></g>
+      <g transform="translate(467.7 405)" data-x="27" data-y="27"><use href="#point" x="0" y="0" data-x="27" data-y="27"/></g>
+      <g transform="translate(485 405)" data-x="28" data-y="27"><use href="#point" x="0" y="0" data-x="28" data-y="27"/></g>
+      <g transform="translate(502.3 405)" data-x="29" data-y="27"><use href="#point" x="0" y="0" data-x="29" data-y="27"/></g>
+      <g transform="translate(519.6 405)" data-x="30" data-y="27"><use href="#point" x="0" y="0" data-x="30" data-y="27"/></g>
+      <g transform="translate(536.9 405)" data-x="31" data-y="27"><use href="#point" x="0" y="0" data-x="31" data-y="27"/></g>
+      <g transform="translate(554.3 405)" data-x="32" data-y="27"><use href="#point" x="0" y="0" data-x="32" data-y="27"/></g>
+      <g transform="translate(8.7 420)" data-x="0" data-y="28"><use href="#point" x="0" y="0" data-x="0" data-y="28"/></g>
+      <g transform="translate(26 420)" data-x="1" data-y="28"><use href="#point" x="0" y="0" data-x="1" data-y="28"/></g>
+      <g transform="translate(43.3 420)" data-x="2" data-y="28"><use href="#point" x="0" y="0" data-x="2" data-y="28"/></g>
+      <g transform="translate(60.6 420)" data-x="3" data-y="28"><use href="#point" x="0" y="0" data-x="3" data-y="28"/></g>
+      <g transform="translate(77.9 420)" data-x="4" data-y="28"><use href="#point" x="0" y="0" data-x="4" data-y="28"/></g>
+      <g transform="translate(95.3 420)" data-x="5" data-y="28"><use href="#point" x="0" y="0" data-x="5" data-y="28"/></g>
+      <g transform="translate(112.6 420)" data-x="6" data-y="28"><use href="#point" x="0" y="0" data-x="6" data-y="28"/></g>
+      <g transform="translate(129.9 420)" data-x="7" data-y="28"><use href="#point" x="0" y="0" data-x="7" data-y="28"/></g>
+      <g transform="translate(147.2 420)" data-x="8" data-y="28"><use href="#point" x="0" y="0" data-x="8" data-y="28"/></g>
+      <g transform="translate(164.5 420)" data-x="9" data-y="28"><use href="#point" x="0" y="0" data-x="9" data-y="28"/></g>
+      <g transform="translate(181.9 420)" data-x="10" data-y="28"><use href="#point" x="0" y="0" data-x="10" data-y="28"/></g>
+      <g transform="translate(199.2 420)" data-x="11" data-y="28"><use href="#point" x="0" y="0" data-x="11" data-y="28"/></g>
+      <g transform="translate(216.5 420)" data-x="12" data-y="28"><use href="#point" x="0" y="0" data-x="12" data-y="28"/></g>
+      <g transform="translate(233.8 420)" data-x="13" data-y="28"><use href="#point" x="0" y="0" data-x="13" data-y="28"/></g>
+      <g transform="translate(251.1 420)" data-x="14" data-y="28"><use href="#point" x="0" y="0" data-x="14" data-y="28"/></g>
+      <g transform="translate(268.5 420)" data-x="15" data-y="28"><use href="#point" x="0" y="0" data-x="15" data-y="28"/></g>
+      <g transform="translate(285.8 420)" data-x="16" data-y="28"><use href="#point" x="0" y="0" data-x="16" data-y="28"/></g>
+      <g transform="translate(303.1 420)" data-x="17" data-y="28"><use href="#point" x="0" y="0" data-x="17" data-y="28"/></g>
+      <g transform="translate(320.4 420)" data-x="18" data-y="28"><use href="#point" x="0" y="0" data-x="18" data-y="28"/></g>
+      <g transform="translate(337.7 420)" data-x="19" data-y="28"><use href="#point" x="0" y="0" data-x="19" data-y="28"/></g>
+      <g transform="translate(355.1 420)" data-x="20" data-y="28"><use href="#point" x="0" y="0" data-x="20" data-y="28"/></g>
+      <g transform="translate(372.4 420)" data-x="21" data-y="28"><use href="#point" x="0" y="0" data-x="21" data-y="28"/></g>
+      <g transform="translate(389.7 420)" data-x="22" data-y="28"><use href="#point" x="0" y="0" data-x="22" data-y="28"/></g>
+      <g transform="translate(407 420)" data-x="23" data-y="28"><use href="#point" x="0" y="0" data-x="23" data-y="28"/></g>
+      <g transform="translate(424.4 420)" data-x="24" data-y="28"><use href="#point" x="0" y="0" data-x="24" data-y="28"/></g>
+      <g transform="translate(441.7 420)" data-x="25" data-y="28"><use href="#point" x="0" y="0" data-x="25" data-y="28"/></g>
+      <g transform="translate(459 420)" data-x="26" data-y="28"><use href="#point" x="0" y="0" data-x="26" data-y="28"/></g>
+      <g transform="translate(476.3 420)" data-x="27" data-y="28"><use href="#point" x="0" y="0" data-x="27" data-y="28"/></g>
+      <g transform="translate(493.6 420)" data-x="28" data-y="28"><use href="#point" x="0" y="0" data-x="28" data-y="28"/></g>
+      <g transform="translate(511 420)" data-x="29" data-y="28"><use href="#point" x="0" y="0" data-x="29" data-y="28"/></g>
+      <g transform="translate(528.3 420)" data-x="30" data-y="28"><use href="#point" x="0" y="0" data-x="30" data-y="28"/></g>
+      <g transform="translate(545.6 420)" data-x="31" data-y="28"><use href="#point" x="0" y="0" data-x="31" data-y="28"/></g>
+      <g transform="translate(562.9 420)" data-x="32" data-y="28"><use href="#point" x="0" y="0" data-x="32" data-y="28"/></g>
+      <g transform="translate(0 435)" data-x="0" data-y="29"><use href="#point" x="0" y="0" data-x="0" data-y="29"/></g>
+      <g transform="translate(17.3 435)" data-x="1" data-y="29"><use href="#point" x="0" y="0" data-x="1" data-y="29"/></g>
+      <g transform="translate(34.6 435)" data-x="2" data-y="29"><use href="#point" x="0" y="0" data-x="2" data-y="29"/></g>
+      <g transform="translate(52 435)" data-x="3" data-y="29"><use href="#point" x="0" y="0" data-x="3" data-y="29"/></g>
+      <g transform="translate(69.3 435)" data-x="4" data-y="29"><use href="#point" x="0" y="0" data-x="4" data-y="29"/></g>
+      <g transform="translate(86.6 435)" data-x="5" data-y="29"><use href="#point" x="0" y="0" data-x="5" data-y="29"/></g>
+      <g transform="translate(103.9 435)" data-x="6" data-y="29"><use href="#point" x="0" y="0" data-x="6" data-y="29"/></g>
+      <g transform="translate(121.2 435)" data-x="7" data-y="29"><use href="#point" x="0" y="0" data-x="7" data-y="29"/></g>
+      <g transform="translate(138.6 435)" data-x="8" data-y="29"><use href="#point" x="0" y="0" data-x="8" data-y="29"/></g>
+      <g transform="translate(155.9 435)" data-x="9" data-y="29"><use href="#point" x="0" y="0" data-x="9" data-y="29"/></g>
+      <g transform="translate(173.2 435)" data-x="10" data-y="29"><use href="#point" x="0" y="0" data-x="10" data-y="29"/></g>
+      <g transform="translate(190.5 435)" data-x="11" data-y="29"><use href="#point" x="0" y="0" data-x="11" data-y="29"/></g>
+      <g transform="translate(207.8 435)" data-x="12" data-y="29"><use href="#point" x="0" y="0" data-x="12" data-y="29"/></g>
+      <g transform="translate(225.2 435)" data-x="13" data-y="29"><use href="#point" x="0" y="0" data-x="13" data-y="29"/></g>
+      <g transform="translate(242.5 435)" data-x="14" data-y="29"><use href="#point" x="0" y="0" data-x="14" data-y="29"/></g>
+      <g transform="translate(259.8 435)" data-x="15" data-y="29"><use href="#point" x="0" y="0" data-x="15" data-y="29"/></g>
+      <g transform="translate(277.1 435)" data-x="16" data-y="29"><use href="#point" x="0" y="0" data-x="16" data-y="29"/></g>
+      <g transform="translate(294.4 435)" data-x="17" data-y="29"><use href="#point" x="0" y="0" data-x="17" data-y="29"/></g>
+      <g transform="translate(311.8 435)" data-x="18" data-y="29"><use href="#point" x="0" y="0" data-x="18" data-y="29"/></g>
+      <g transform="translate(329.1 435)" data-x="19" data-y="29"><use href="#point" x="0" y="0" data-x="19" data-y="29"/></g>
+      <g transform="translate(346.4 435)" data-x="20" data-y="29"><use href="#point" x="0" y="0" data-x="20" data-y="29"/></g>
+      <g transform="translate(363.7 435)" data-x="21" data-y="29"><use href="#point" x="0" y="0" data-x="21" data-y="29"/></g>
+      <g transform="translate(381.1 435)" data-x="22" data-y="29"><use href="#point" x="0" y="0" data-x="22" data-y="29"/></g>
+      <g transform="translate(398.4 435)" data-x="23" data-y="29"><use href="#point" x="0" y="0" data-x="23" data-y="29"/></g>
+      <g transform="translate(415.7 435)" data-x="24" data-y="29"><use href="#point" x="0" y="0" data-x="24" data-y="29"/></g>
+      <g transform="translate(433 435)" data-x="25" data-y="29"><use href="#point" x="0" y="0" data-x="25" data-y="29"/></g>
+      <g transform="translate(450.3 435)" data-x="26" data-y="29"><use href="#point" x="0" y="0" data-x="26" data-y="29"/></g>
+      <g transform="translate(467.7 435)" data-x="27" data-y="29"><use href="#point" x="0" y="0" data-x="27" data-y="29"/></g>
+      <g transform="translate(485 435)" data-x="28" data-y="29"><use href="#point" x="0" y="0" data-x="28" data-y="29"/></g>
+      <g transform="translate(502.3 435)" data-x="29" data-y="29"><use href="#point" x="0" y="0" data-x="29" data-y="29"/></g>
+      <g transform="translate(519.6 435)" data-x="30" data-y="29"><use href="#point" x="0" y="0" data-x="30" data-y="29"/></g>
+      <g transform="translate(536.9 435)" data-x="31" data-y="29"><use href="#point" x="0" y="0" data-x="31" data-y="29"/></g>
+      <g transform="translate(554.3 435)" data-x="32" data-y="29"><use href="#point" x="0" y="0" data-x="32" data-y="29"/></g>
+      <g transform="translate(8.7 450)" data-x="0" data-y="30"><use href="#point" x="0" y="0" data-x="0" data-y="30"/></g>
+      <g transform="translate(26 450)" data-x="1" data-y="30"><use href="#point" x="0" y="0" data-x="1" data-y="30"/></g>
+      <g transform="translate(43.3 450)" data-x="2" data-y="30"><use href="#point" x="0" y="0" data-x="2" data-y="30"/></g>
+      <g transform="translate(60.6 450)" data-x="3" data-y="30"><use href="#point" x="0" y="0" data-x="3" data-y="30"/></g>
+      <g transform="translate(77.9 450)" data-x="4" data-y="30"><use href="#point" x="0" y="0" data-x="4" data-y="30"/></g>
+      <g transform="translate(95.3 450)" data-x="5" data-y="30"><use href="#point" x="0" y="0" data-x="5" data-y="30"/></g>
+      <g transform="translate(112.6 450)" data-x="6" data-y="30"><use href="#point" x="0" y="0" data-x="6" data-y="30"/></g>
+      <g transform="translate(129.9 450)" data-x="7" data-y="30"><use href="#point" x="0" y="0" data-x="7" data-y="30"/></g>
+      <g transform="translate(147.2 450)" data-x="8" data-y="30"><use href="#point" x="0" y="0" data-x="8" data-y="30"/></g>
+      <g transform="translate(164.5 450)" data-x="9" data-y="30"><use href="#point" x="0" y="0" data-x="9" data-y="30"/></g>
+      <g transform="translate(181.9 450)" data-x="10" data-y="30"><use href="#point" x="0" y="0" data-x="10" data-y="30"/></g>
+      <g transform="translate(199.2 450)" data-x="11" data-y="30"><use href="#point" x="0" y="0" data-x="11" data-y="30"/></g>
+      <g transform="translate(216.5 450)" data-x="12" data-y="30"><use href="#point" x="0" y="0" data-x="12" data-y="30"/></g>
+      <g transform="translate(233.8 450)" data-x="13" data-y="30"><use href="#point" x="0" y="0" data-x="13" data-y="30"/></g>
+      <g transform="translate(251.1 450)" data-x="14" data-y="30"><use href="#point" x="0" y="0" data-x="14" data-y="30"/></g>
+      <g transform="translate(268.5 450)" data-x="15" data-y="30"><use href="#point" x="0" y="0" data-x="15" data-y="30"/></g>
+      <g transform="translate(285.8 450)" data-x="16" data-y="30"><use href="#point" x="0" y="0" data-x="16" data-y="30"/></g>
+      <g transform="translate(303.1 450)" data-x="17" data-y="30"><use href="#point" x="0" y="0" data-x="17" data-y="30"/></g>
+      <g transform="translate(320.4 450)" data-x="18" data-y="30"><use href="#point" x="0" y="0" data-x="18" data-y="30"/></g>
+      <g transform="translate(337.7 450)" data-x="19" data-y="30"><use href="#point" x="0" y="0" data-x="19" data-y="30"/></g>
+      <g transform="translate(355.1 450)" data-x="20" data-y="30"><use href="#point" x="0" y="0" data-x="20" data-y="30"/></g>
+      <g transform="translate(372.4 450)" data-x="21" data-y="30"><use href="#point" x="0" y="0" data-x="21" data-y="30"/></g>
+      <g transform="translate(389.7 450)" data-x="22" data-y="30"><use href="#point" x="0" y="0" data-x="22" data-y="30"/></g>
+      <g transform="translate(407 450)" data-x="23" data-y="30"><use href="#point" x="0" y="0" data-x="23" data-y="30"/></g>
+      <g transform="translate(424.4 450)" data-x="24" data-y="30"><use href="#point" x="0" y="0" data-x="24" data-y="30"/></g>
+      <g transform="translate(441.7 450)" data-x="25" data-y="30"><use href="#point" x="0" y="0" data-x="25" data-y="30"/></g>
+      <g transform="translate(459 450)" data-x="26" data-y="30"><use href="#point" x="0" y="0" data-x="26" data-y="30"/></g>
+      <g transform="translate(476.3 450)" data-x="27" data-y="30"><use href="#point" x="0" y="0" data-x="27" data-y="30"/></g>
+      <g transform="translate(493.6 450)" data-x="28" data-y="30"><use href="#point" x="0" y="0" data-x="28" data-y="30"/></g>
+      <g transform="translate(511 450)" data-x="29" data-y="30"><use href="#point" x="0" y="0" data-x="29" data-y="30"/></g>
+      <g transform="translate(528.3 450)" data-x="30" data-y="30"><use href="#point" x="0" y="0" data-x="30" data-y="30"/></g>
+      <g transform="translate(545.6 450)" data-x="31" data-y="30"><use href="#point" x="0" y="0" data-x="31" data-y="30"/></g>
+      <g transform="translate(562.9 450)" data-x="32" data-y="30"><use href="#point" x="0" y="0" data-x="32" data-y="30"/></g>
+      <g transform="translate(0 465)" data-x="0" data-y="31"><use href="#point" x="0" y="0" data-x="0" data-y="31"/></g>
+      <g transform="translate(17.3 465)" data-x="1" data-y="31"><use href="#point" x="0" y="0" data-x="1" data-y="31"/></g>
+      <g transform="translate(34.6 465)" data-x="2" data-y="31"><use href="#point" x="0" y="0" data-x="2" data-y="31"/></g>
+      <g transform="translate(52 465)" data-x="3" data-y="31"><use href="#point" x="0" y="0" data-x="3" data-y="31"/></g>
+      <g transform="translate(69.3 465)" data-x="4" data-y="31"><use href="#point" x="0" y="0" data-x="4" data-y="31"/></g>
+      <g transform="translate(86.6 465)" data-x="5" data-y="31"><use href="#point" x="0" y="0" data-x="5" data-y="31"/></g>
+      <g transform="translate(103.9 465)" data-x="6" data-y="31"><use href="#point" x="0" y="0" data-x="6" data-y="31"/></g>
+      <g transform="translate(121.2 465)" data-x="7" data-y="31"><use href="#point" x="0" y="0" data-x="7" data-y="31"/></g>
+      <g transform="translate(138.6 465)" data-x="8" data-y="31"><use href="#point" x="0" y="0" data-x="8" data-y="31"/></g>
+      <g transform="translate(155.9 465)" data-x="9" data-y="31"><use href="#point" x="0" y="0" data-x="9" data-y="31"/></g>
+      <g transform="translate(173.2 465)" data-x="10" data-y="31"><use href="#point" x="0" y="0" data-x="10" data-y="31"/></g>
+      <g transform="translate(190.5 465)" data-x="11" data-y="31"><use href="#point" x="0" y="0" data-x="11" data-y="31"/></g>
+      <g transform="translate(207.8 465)" data-x="12" data-y="31"><use href="#point" x="0" y="0" data-x="12" data-y="31"/></g>
+      <g transform="translate(225.2 465)" data-x="13" data-y="31"><use href="#point" x="0" y="0" data-x="13" data-y="31"/></g>
+      <g transform="translate(242.5 465)" data-x="14" data-y="31"><use href="#point" x="0" y="0" data-x="14" data-y="31"/></g>
+      <g transform="translate(259.8 465)" data-x="15" data-y="31"><use href="#point" x="0" y="0" data-x="15" data-y="31"/></g>
+      <g transform="translate(277.1 465)" data-x="16" data-y="31"><use href="#point" x="0" y="0" data-x="16" data-y="31"/></g>
+      <g transform="translate(294.4 465)" data-x="17" data-y="31"><use href="#point" x="0" y="0" data-x="17" data-y="31"/></g>
+      <g transform="translate(311.8 465)" data-x="18" data-y="31"><use href="#point" x="0" y="0" data-x="18" data-y="31"/></g>
+      <g transform="translate(329.1 465)" data-x="19" data-y="31"><use href="#point" x="0" y="0" data-x="19" data-y="31"/></g>
+      <g transform="translate(346.4 465)" data-x="20" data-y="31"><use href="#point" x="0" y="0" data-x="20" data-y="31"/></g>
+      <g transform="translate(363.7 465)" data-x="21" data-y="31"><use href="#point" x="0" y="0" data-x="21" data-y="31"/></g>
+      <g transform="translate(381.1 465)" data-x="22" data-y="31"><use href="#point" x="0" y="0" data-x="22" data-y="31"/></g>
+      <g transform="translate(398.4 465)" data-x="23" data-y="31"><use href="#point" x="0" y="0" data-x="23" data-y="31"/></g>
+      <g transform="translate(415.7 465)" data-x="24" data-y="31"><use href="#point" x="0" y="0" data-x="24" data-y="31"/></g>
+      <g transform="translate(433 465)" data-x="25" data-y="31"><use href="#point" x="0" y="0" data-x="25" data-y="31"/></g>
+      <g transform="translate(450.3 465)" data-x="26" data-y="31"><use href="#point" x="0" y="0" data-x="26" data-y="31"/></g>
+      <g transform="translate(467.7 465)" data-x="27" data-y="31"><use href="#point" x="0" y="0" data-x="27" data-y="31"/></g>
+      <g transform="translate(485 465)" data-x="28" data-y="31"><use href="#point" x="0" y="0" data-x="28" data-y="31"/></g>
+      <g transform="translate(502.3 465)" data-x="29" data-y="31"><use href="#point" x="0" y="0" data-x="29" data-y="31"/></g>
+      <g transform="translate(519.6 465)" data-x="30" data-y="31"><use href="#point" x="0" y="0" data-x="30" data-y="31"/></g>
+      <g transform="translate(536.9 465)" data-x="31" data-y="31"><use href="#point" x="0" y="0" data-x="31" data-y="31"/></g>
+      <g transform="translate(554.3 465)" data-x="32" data-y="31"><use href="#point" x="0" y="0" data-x="32" data-y="31"/></g>
+      <g transform="translate(8.7 480)" data-x="0" data-y="32"><use href="#point" x="0" y="0" data-x="0" data-y="32"/></g>
+      <g transform="translate(26 480)" data-x="1" data-y="32"><use href="#point" x="0" y="0" data-x="1" data-y="32"/></g>
+      <g transform="translate(43.3 480)" data-x="2" data-y="32"><use href="#point" x="0" y="0" data-x="2" data-y="32"/></g>
+      <g transform="translate(60.6 480)" data-x="3" data-y="32"><use href="#point" x="0" y="0" data-x="3" data-y="32"/></g>
+      <g transform="translate(77.9 480)" data-x="4" data-y="32"><use href="#point" x="0" y="0" data-x="4" data-y="32"/></g>
+      <g transform="translate(95.3 480)" data-x="5" data-y="32"><use href="#point" x="0" y="0" data-x="5" data-y="32"/></g>
+      <g transform="translate(112.6 480)" data-x="6" data-y="32"><use href="#point" x="0" y="0" data-x="6" data-y="32"/></g>
+      <g transform="translate(129.9 480)" data-x="7" data-y="32"><use href="#point" x="0" y="0" data-x="7" data-y="32"/></g>
+      <g transform="translate(147.2 480)" data-x="8" data-y="32"><use href="#point" x="0" y="0" data-x="8" data-y="32"/></g>
+      <g transform="translate(164.5 480)" data-x="9" data-y="32"><use href="#point" x="0" y="0" data-x="9" data-y="32"/></g>
+      <g transform="translate(181.9 480)" data-x="10" data-y="32"><use href="#point" x="0" y="0" data-x="10" data-y="32"/></g>
+      <g transform="translate(199.2 480)" data-x="11" data-y="32"><use href="#point" x="0" y="0" data-x="11" data-y="32"/></g>
+      <g transform="translate(216.5 480)" data-x="12" data-y="32"><use href="#point" x="0" y="0" data-x="12" data-y="32"/></g>
+      <g transform="translate(233.8 480)" data-x="13" data-y="32"><use href="#point" x="0" y="0" data-x="13" data-y="32"/></g>
+      <g transform="translate(251.1 480)" data-x="14" data-y="32"><use href="#point" x="0" y="0" data-x="14" data-y="32"/></g>
+      <g transform="translate(268.5 480)" data-x="15" data-y="32"><use href="#point" x="0" y="0" data-x="15" data-y="32"/></g>
+      <g transform="translate(285.8 480)" data-x="16" data-y="32"><use href="#point" x="0" y="0" data-x="16" data-y="32"/></g>
+      <g transform="translate(303.1 480)" data-x="17" data-y="32"><use href="#point" x="0" y="0" data-x="17" data-y="32"/></g>
+      <g transform="translate(320.4 480)" data-x="18" data-y="32"><use href="#point" x="0" y="0" data-x="18" data-y="32"/></g>
+      <g transform="translate(337.7 480)" data-x="19" data-y="32"><use href="#point" x="0" y="0" data-x="19" data-y="32"/></g>
+      <g transform="translate(355.1 480)" data-x="20" data-y="32"><use href="#point" x="0" y="0" data-x="20" data-y="32"/></g>
+      <g transform="translate(372.4 480)" data-x="21" data-y="32"><use href="#point" x="0" y="0" data-x="21" data-y="32"/></g>
+      <g transform="translate(389.7 480)" data-x="22" data-y="32"><use href="#point" x="0" y="0" data-x="22" data-y="32"/></g>
+      <g transform="translate(407 480)" data-x="23" data-y="32"><use href="#point" x="0" y="0" data-x="23" data-y="32"/></g>
+      <g transform="translate(424.4 480)" data-x="24" data-y="32"><use href="#point" x="0" y="0" data-x="24" data-y="32"/></g>
+      <g transform="translate(441.7 480)" data-x="25" data-y="32"><use href="#point" x="0" y="0" data-x="25" data-y="32"/></g>
+      <g transform="translate(459 480)" data-x="26" data-y="32"><use href="#point" x="0" y="0" data-x="26" data-y="32"/></g>
+      <g transform="translate(476.3 480)" data-x="27" data-y="32"><use href="#point" x="0" y="0" data-x="27" data-y="32"/></g>
+      <g transform="translate(493.6 480)" data-x="28" data-y="32"><use href="#point" x="0" y="0" data-x="28" data-y="32"/></g>
+      <g transform="translate(511 480)" data-x="29" data-y="32"><use href="#point" x="0" y="0" data-x="29" data-y="32"/></g>
+      <g transform="translate(528.3 480)" data-x="30" data-y="32"><use href="#point" x="0" y="0" data-x="30" data-y="32"/></g>
+      <g transform="translate(545.6 480)" data-x="31" data-y="32"><use href="#point" x="0" y="0" data-x="31" data-y="32"/></g>
+      <g transform="translate(562.9 480)" data-x="32" data-y="32"><use href="#point" x="0" y="0" data-x="32" data-y="32"/></g>
+      <g transform="translate(0 495)" data-x="0" data-y="33"><use href="#point" x="0" y="0" data-x="0" data-y="33"/></g>
+      <g transform="translate(17.3 495)" data-x="1" data-y="33"><use href="#point" x="0" y="0" data-x="1" data-y="33"/></g>
+      <g transform="translate(34.6 495)" data-x="2" data-y="33"><use href="#point" x="0" y="0" data-x="2" data-y="33"/></g>
+      <g transform="translate(52 495)" data-x="3" data-y="33"><use href="#point" x="0" y="0" data-x="3" data-y="33"/></g>
+      <g transform="translate(69.3 495)" data-x="4" data-y="33"><use href="#point" x="0" y="0" data-x="4" data-y="33"/></g>
+      <g transform="translate(86.6 495)" data-x="5" data-y="33"><use href="#point" x="0" y="0" data-x="5" data-y="33"/></g>
+      <g transform="translate(103.9 495)" data-x="6" data-y="33"><use href="#point" x="0" y="0" data-x="6" data-y="33"/></g>
+      <g transform="translate(121.2 495)" data-x="7" data-y="33"><use href="#point" x="0" y="0" data-x="7" data-y="33"/></g>
+      <g transform="translate(138.6 495)" data-x="8" data-y="33"><use href="#point" x="0" y="0" data-x="8" data-y="33"/></g>
+      <g transform="translate(155.9 495)" data-x="9" data-y="33"><use href="#point" x="0" y="0" data-x="9" data-y="33"/></g>
+      <g transform="translate(173.2 495)" data-x="10" data-y="33"><use href="#point" x="0" y="0" data-x="10" data-y="33"/></g>
+      <g transform="translate(190.5 495)" data-x="11" data-y="33"><use href="#point" x="0" y="0" data-x="11" data-y="33"/></g>
+      <g transform="translate(207.8 495)" data-x="12" data-y="33"><use href="#point" x="0" y="0" data-x="12" data-y="33"/></g>
+      <g transform="translate(225.2 495)" data-x="13" data-y="33"><use href="#point" x="0" y="0" data-x="13" data-y="33"/></g>
+      <g transform="translate(242.5 495)" data-x="14" data-y="33"><use href="#point" x="0" y="0" data-x="14" data-y="33"/></g>
+      <g transform="translate(259.8 495)" data-x="15" data-y="33"><use href="#point" x="0" y="0" data-x="15" data-y="33"/></g>
+      <g transform="translate(277.1 495)" data-x="16" data-y="33"><use href="#point" x="0" y="0" data-x="16" data-y="33"/></g>
+      <g transform="translate(294.4 495)" data-x="17" data-y="33"><use href="#point" x="0" y="0" data-x="17" data-y="33"/></g>
+      <g transform="translate(311.8 495)" data-x="18" data-y="33"><use href="#point" x="0" y="0" data-x="18" data-y="33"/></g>
+      <g transform="translate(329.1 495)" data-x="19" data-y="33"><use href="#point" x="0" y="0" data-x="19" data-y="33"/></g>
+      <g transform="translate(346.4 495)" data-x="20" data-y="33"><use href="#point" x="0" y="0" data-x="20" data-y="33"/></g>
+      <g transform="translate(363.7 495)" data-x="21" data-y="33"><use href="#point" x="0" y="0" data-x="21" data-y="33"/></g>
+      <g transform="translate(381.1 495)" data-x="22" data-y="33"><use href="#point" x="0" y="0" data-x="22" data-y="33"/></g>
+      <g transform="translate(398.4 495)" data-x="23" data-y="33"><use href="#point" x="0" y="0" data-x="23" data-y="33"/></g>
+      <g transform="translate(415.7 495)" data-x="24" data-y="33"><use href="#point" x="0" y="0" data-x="24" data-y="33"/></g>
+      <g transform="translate(433 495)" data-x="25" data-y="33"><use href="#point" x="0" y="0" data-x="25" data-y="33"/></g>
+      <g transform="translate(450.3 495)" data-x="26" data-y="33"><use href="#point" x="0" y="0" data-x="26" data-y="33"/></g>
+      <g transform="translate(467.7 495)" data-x="27" data-y="33"><use href="#point" x="0" y="0" data-x="27" data-y="33"/></g>
+      <g transform="translate(485 495)" data-x="28" data-y="33"><use href="#point" x="0" y="0" data-x="28" data-y="33"/></g>
+      <g transform="translate(502.3 495)" data-x="29" data-y="33"><use href="#point" x="0" y="0" data-x="29" data-y="33"/></g>
+      <g transform="translate(519.6 495)" data-x="30" data-y="33"><use href="#point" x="0" y="0" data-x="30" data-y="33"/></g>
+      <g transform="translate(536.9 495)" data-x="31" data-y="33"><use href="#point" x="0" y="0" data-x="31" data-y="33"/></g>
+      <g transform="translate(554.3 495)" data-x="32" data-y="33"><use href="#point" x="0" y="0" data-x="32" data-y="33"/></g>
+      <g transform="translate(8.7 510)" data-x="0" data-y="34"><use href="#point" x="0" y="0" data-x="0" data-y="34"/></g>
+      <g transform="translate(26 510)" data-x="1" data-y="34"><use href="#point" x="0" y="0" data-x="1" data-y="34"/></g>
+      <g transform="translate(43.3 510)" data-x="2" data-y="34"><use href="#point" x="0" y="0" data-x="2" data-y="34"/></g>
+      <g transform="translate(60.6 510)" data-x="3" data-y="34"><use href="#point" x="0" y="0" data-x="3" data-y="34"/></g>
+      <g transform="translate(77.9 510)" data-x="4" data-y="34"><use href="#point" x="0" y="0" data-x="4" data-y="34"/></g>
+      <g transform="translate(95.3 510)" data-x="5" data-y="34"><use href="#point" x="0" y="0" data-x="5" data-y="34"/></g>
+      <g transform="translate(112.6 510)" data-x="6" data-y="34"><use href="#point" x="0" y="0" data-x="6" data-y="34"/></g>
+      <g transform="translate(129.9 510)" data-x="7" data-y="34"><use href="#point" x="0" y="0" data-x="7" data-y="34"/></g>
+      <g transform="translate(147.2 510)" data-x="8" data-y="34"><use href="#point" x="0" y="0" data-x="8" data-y="34"/></g>
+      <g transform="translate(164.5 510)" data-x="9" data-y="34"><use href="#point" x="0" y="0" data-x="9" data-y="34"/></g>
+      <g transform="translate(181.9 510)" data-x="10" data-y="34"><use href="#point" x="0" y="0" data-x="10" data-y="34"/></g>
+      <g transform="translate(199.2 510)" data-x="11" data-y="34"><use href="#point" x="0" y="0" data-x="11" data-y="34"/></g>
+      <g transform="translate(216.5 510)" data-x="12" data-y="34"><use href="#point" x="0" y="0" data-x="12" data-y="34"/></g>
+      <g transform="translate(233.8 510)" data-x="13" data-y="34"><use href="#point" x="0" y="0" data-x="13" data-y="34"/></g>
+      <g transform="translate(251.1 510)" data-x="14" data-y="34"><use href="#point" x="0" y="0" data-x="14" data-y="34"/></g>
+      <g transform="translate(268.5 510)" data-x="15" data-y="34"><use href="#point" x="0" y="0" data-x="15" data-y="34"/></g>
+      <g transform="translate(285.8 510)" data-x="16" data-y="34"><use href="#point" x="0" y="0" data-x="16" data-y="34"/></g>
+      <g transform="translate(303.1 510)" data-x="17" data-y="34"><use href="#point" x="0" y="0" data-x="17" data-y="34"/></g>
+      <g transform="translate(320.4 510)" data-x="18" data-y="34"><use href="#point" x="0" y="0" data-x="18" data-y="34"/></g>
+      <g transform="translate(337.7 510)" data-x="19" data-y="34"><use href="#point" x="0" y="0" data-x="19" data-y="34"/></g>
+      <g transform="translate(355.1 510)" data-x="20" data-y="34"><use href="#point" x="0" y="0" data-x="20" data-y="34"/></g>
+      <g transform="translate(372.4 510)" data-x="21" data-y="34"><use href="#point" x="0" y="0" data-x="21" data-y="34"/></g>
+      <g transform="translate(389.7 510)" data-x="22" data-y="34"><use href="#point" x="0" y="0" data-x="22" data-y="34"/></g>
+      <g transform="translate(407 510)" data-x="23" data-y="34"><use href="#point" x="0" y="0" data-x="23" data-y="34"/></g>
+      <g transform="translate(424.4 510)" data-x="24" data-y="34"><use href="#point" x="0" y="0" data-x="24" data-y="34"/></g>
+      <g transform="translate(441.7 510)" data-x="25" data-y="34"><use href="#point" x="0" y="0" data-x="25" data-y="34"/></g>
+      <g transform="translate(459 510)" data-x="26" data-y="34"><use href="#point" x="0" y="0" data-x="26" data-y="34"/></g>
+      <g transform="translate(476.3 510)" data-x="27" data-y="34"><use href="#point" x="0" y="0" data-x="27" data-y="34"/></g>
+      <g transform="translate(493.6 510)" data-x="28" data-y="34"><use href="#point" x="0" y="0" data-x="28" data-y="34"/></g>
+      <g transform="translate(511 510)" data-x="29" data-y="34"><use href="#point" x="0" y="0" data-x="29" data-y="34"/></g>
+      <g transform="translate(528.3 510)" data-x="30" data-y="34"><use href="#point" x="0" y="0" data-x="30" data-y="34"/></g>
+      <g transform="translate(545.6 510)" data-x="31" data-y="34"><use href="#point" x="0" y="0" data-x="31" data-y="34"/></g>
+      <g transform="translate(562.9 510)" data-x="32" data-y="34"><use href="#point" x="0" y="0" data-x="32" data-y="34"/></g>
+      <g transform="translate(0 525)" data-x="0" data-y="35"><use href="#point" x="0" y="0" data-x="0" data-y="35"/></g>
+      <g transform="translate(17.3 525)" data-x="1" data-y="35"><use href="#point" x="0" y="0" data-x="1" data-y="35"/></g>
+      <g transform="translate(34.6 525)" data-x="2" data-y="35"><use href="#point" x="0" y="0" data-x="2" data-y="35"/></g>
+      <g transform="translate(52 525)" data-x="3" data-y="35"><use href="#point" x="0" y="0" data-x="3" data-y="35"/></g>
+      <g transform="translate(69.3 525)" data-x="4" data-y="35"><use href="#point" x="0" y="0" data-x="4" data-y="35"/></g>
+      <g transform="translate(86.6 525)" data-x="5" data-y="35"><use href="#point" x="0" y="0" data-x="5" data-y="35"/></g>
+      <g transform="translate(103.9 525)" data-x="6" data-y="35"><use href="#point" x="0" y="0" data-x="6" data-y="35"/></g>
+      <g transform="translate(121.2 525)" data-x="7" data-y="35"><use href="#point" x="0" y="0" data-x="7" data-y="35"/></g>
+      <g transform="translate(138.6 525)" data-x="8" data-y="35"><use href="#point" x="0" y="0" data-x="8" data-y="35"/></g>
+      <g transform="translate(155.9 525)" data-x="9" data-y="35"><use href="#point" x="0" y="0" data-x="9" data-y="35"/></g>
+      <g transform="translate(173.2 525)" data-x="10" data-y="35"><use href="#point" x="0" y="0" data-x="10" data-y="35"/></g>
+      <g transform="translate(190.5 525)" data-x="11" data-y="35"><use href="#point" x="0" y="0" data-x="11" data-y="35"/></g>
+      <g transform="translate(207.8 525)" data-x="12" data-y="35"><use href="#point" x="0" y="0" data-x="12" data-y="35"/></g>
+      <g transform="translate(225.2 525)" data-x="13" data-y="35"><use href="#point" x="0" y="0" data-x="13" data-y="35"/></g>
+      <g transform="translate(242.5 525)" data-x="14" data-y="35"><use href="#point" x="0" y="0" data-x="14" data-y="35"/></g>
+      <g transform="translate(259.8 525)" data-x="15" data-y="35"><use href="#point" x="0" y="0" data-x="15" data-y="35"/></g>
+      <g transform="translate(277.1 525)" data-x="16" data-y="35"><use href="#point" x="0" y="0" data-x="16" data-y="35"/></g>
+      <g transform="translate(294.4 525)" data-x="17" data-y="35"><use href="#point" x="0" y="0" data-x="17" data-y="35"/></g>
+      <g transform="translate(311.8 525)" data-x="18" data-y="35"><use href="#point" x="0" y="0" data-x="18" data-y="35"/></g>
+      <g transform="translate(329.1 525)" data-x="19" data-y="35"><use href="#point" x="0" y="0" data-x="19" data-y="35"/></g>
+      <g transform="translate(346.4 525)" data-x="20" data-y="35"><use href="#point" x="0" y="0" data-x="20" data-y="35"/></g>
+      <g transform="translate(363.7 525)" data-x="21" data-y="35"><use href="#point" x="0" y="0" data-x="21" data-y="35"/></g>
+      <g transform="translate(381.1 525)" data-x="22" data-y="35"><use href="#point" x="0" y="0" data-x="22" data-y="35"/></g>
+      <g transform="translate(398.4 525)" data-x="23" data-y="35"><use href="#point" x="0" y="0" data-x="23" data-y="35"/></g>
+      <g transform="translate(415.7 525)" data-x="24" data-y="35"><use href="#point" x="0" y="0" data-x="24" data-y="35"/></g>
+      <g transform="translate(433 525)" data-x="25" data-y="35"><use href="#point" x="0" y="0" data-x="25" data-y="35"/></g>
+      <g transform="translate(450.3 525)" data-x="26" data-y="35"><use href="#point" x="0" y="0" data-x="26" data-y="35"/></g>
+      <g transform="translate(467.7 525)" data-x="27" data-y="35"><use href="#point" x="0" y="0" data-x="27" data-y="35"/></g>
+      <g transform="translate(485 525)" data-x="28" data-y="35"><use href="#point" x="0" y="0" data-x="28" data-y="35"/></g>
+      <g transform="translate(502.3 525)" data-x="29" data-y="35"><use href="#point" x="0" y="0" data-x="29" data-y="35"/></g>
+      <g transform="translate(519.6 525)" data-x="30" data-y="35"><use href="#point" x="0" y="0" data-x="30" data-y="35"/></g>
+      <g transform="translate(536.9 525)" data-x="31" data-y="35"><use href="#point" x="0" y="0" data-x="31" data-y="35"/></g>
+      <g transform="translate(554.3 525)" data-x="32" data-y="35"><use href="#point" x="0" y="0" data-x="32" data-y="35"/></g>
+      <g transform="translate(8.7 540)" data-x="0" data-y="36"><use href="#point" x="0" y="0" data-x="0" data-y="36"/></g>
+      <g transform="translate(26 540)" data-x="1" data-y="36"><use href="#point" x="0" y="0" data-x="1" data-y="36"/></g>
+      <g transform="translate(43.3 540)" data-x="2" data-y="36"><use href="#point" x="0" y="0" data-x="2" data-y="36"/></g>
+      <g transform="translate(60.6 540)" data-x="3" data-y="36"><use href="#point" x="0" y="0" data-x="3" data-y="36"/></g>
+      <g transform="translate(77.9 540)" data-x="4" data-y="36"><use href="#point" x="0" y="0" data-x="4" data-y="36"/></g>
+      <g transform="translate(95.3 540)" data-x="5" data-y="36"><use href="#point" x="0" y="0" data-x="5" data-y="36"/></g>
+      <g transform="translate(112.6 540)" data-x="6" data-y="36"><use href="#point" x="0" y="0" data-x="6" data-y="36"/></g>
+      <g transform="translate(129.9 540)" data-x="7" data-y="36"><use href="#point" x="0" y="0" data-x="7" data-y="36"/></g>
+      <g transform="translate(147.2 540)" data-x="8" data-y="36"><use href="#point" x="0" y="0" data-x="8" data-y="36"/></g>
+      <g transform="translate(164.5 540)" data-x="9" data-y="36"><use href="#point" x="0" y="0" data-x="9" data-y="36"/></g>
+      <g transform="translate(181.9 540)" data-x="10" data-y="36"><use href="#point" x="0" y="0" data-x="10" data-y="36"/></g>
+      <g transform="translate(199.2 540)" data-x="11" data-y="36"><use href="#point" x="0" y="0" data-x="11" data-y="36"/></g>
+      <g transform="translate(216.5 540)" data-x="12" data-y="36"><use href="#point" x="0" y="0" data-x="12" data-y="36"/></g>
+      <g transform="translate(233.8 540)" data-x="13" data-y="36"><use href="#point" x="0" y="0" data-x="13" data-y="36"/></g>
+      <g transform="translate(251.1 540)" data-x="14" data-y="36"><use href="#point" x="0" y="0" data-x="14" data-y="36"/></g>
+      <g transform="translate(268.5 540)" data-x="15" data-y="36"><use href="#point" x="0" y="0" data-x="15" data-y="36"/></g>
+      <g transform="translate(285.8 540)" data-x="16" data-y="36"><use href="#point" x="0" y="0" data-x="16" data-y="36"/></g>
+      <g transform="translate(303.1 540)" data-x="17" data-y="36"><use href="#point" x="0" y="0" data-x="17" data-y="36"/></g>
+      <g transform="translate(320.4 540)" data-x="18" data-y="36"><use href="#point" x="0" y="0" data-x="18" data-y="36"/></g>
+      <g transform="translate(337.7 540)" data-x="19" data-y="36"><use href="#point" x="0" y="0" data-x="19" data-y="36"/></g>
+      <g transform="translate(355.1 540)" data-x="20" data-y="36"><use href="#point" x="0" y="0" data-x="20" data-y="36"/></g>
+      <g transform="translate(372.4 540)" data-x="21" data-y="36"><use href="#point" x="0" y="0" data-x="21" data-y="36"/></g>
+      <g transform="translate(389.7 540)" data-x="22" data-y="36"><use href="#point" x="0" y="0" data-x="22" data-y="36"/></g>
+      <g transform="translate(407 540)" data-x="23" data-y="36"><use href="#point" x="0" y="0" data-x="23" data-y="36"/></g>
+      <g transform="translate(424.4 540)" data-x="24" data-y="36"><use href="#point" x="0" y="0" data-x="24" data-y="36"/></g>
+      <g transform="translate(441.7 540)" data-x="25" data-y="36"><use href="#point" x="0" y="0" data-x="25" data-y="36"/></g>
+      <g transform="translate(459 540)" data-x="26" data-y="36"><use href="#point" x="0" y="0" data-x="26" data-y="36"/></g>
+      <g transform="translate(476.3 540)" data-x="27" data-y="36"><use href="#point" x="0" y="0" data-x="27" data-y="36"/></g>
+      <g transform="translate(493.6 540)" data-x="28" data-y="36"><use href="#point" x="0" y="0" data-x="28" data-y="36"/></g>
+      <g transform="translate(511 540)" data-x="29" data-y="36"><use href="#point" x="0" y="0" data-x="29" data-y="36"/></g>
+      <g transform="translate(528.3 540)" data-x="30" data-y="36"><use href="#point" x="0" y="0" data-x="30" data-y="36"/></g>
+      <g transform="translate(545.6 540)" data-x="31" data-y="36"><use href="#point" x="0" y="0" data-x="31" data-y="36"/></g>
+      <g transform="translate(562.9 540)" data-x="32" data-y="36"><use href="#point" x="0" y="0" data-x="32" data-y="36"/></g>
+      <g transform="translate(0 555)" data-x="0" data-y="37"><use href="#point" x="0" y="0" data-x="0" data-y="37"/></g>
+      <g transform="translate(17.3 555)" data-x="1" data-y="37"><use href="#point" x="0" y="0" data-x="1" data-y="37"/></g>
+      <g transform="translate(34.6 555)" data-x="2" data-y="37"><use href="#point" x="0" y="0" data-x="2" data-y="37"/></g>
+      <g transform="translate(52 555)" data-x="3" data-y="37"><use href="#point" x="0" y="0" data-x="3" data-y="37"/></g>
+      <g transform="translate(69.3 555)" data-x="4" data-y="37"><use href="#point" x="0" y="0" data-x="4" data-y="37"/></g>
+      <g transform="translate(86.6 555)" data-x="5" data-y="37"><use href="#point" x="0" y="0" data-x="5" data-y="37"/></g>
+      <g transform="translate(103.9 555)" data-x="6" data-y="37"><use href="#point" x="0" y="0" data-x="6" data-y="37"/></g>
+      <g transform="translate(121.2 555)" data-x="7" data-y="37"><use href="#point" x="0" y="0" data-x="7" data-y="37"/></g>
+      <g transform="translate(138.6 555)" data-x="8" data-y="37"><use href="#point" x="0" y="0" data-x="8" data-y="37"/></g>
+      <g transform="translate(155.9 555)" data-x="9" data-y="37"><use href="#point" x="0" y="0" data-x="9" data-y="37"/></g>
+      <g transform="translate(173.2 555)" data-x="10" data-y="37"><use href="#point" x="0" y="0" data-x="10" data-y="37"/></g>
+      <g transform="translate(190.5 555)" data-x="11" data-y="37"><use href="#point" x="0" y="0" data-x="11" data-y="37"/></g>
+      <g transform="translate(207.8 555)" data-x="12" data-y="37"><use href="#point" x="0" y="0" data-x="12" data-y="37"/></g>
+      <g transform="translate(225.2 555)" data-x="13" data-y="37"><use href="#point" x="0" y="0" data-x="13" data-y="37"/></g>
+      <g transform="translate(242.5 555)" data-x="14" data-y="37"><use href="#point" x="0" y="0" data-x="14" data-y="37"/></g>
+      <g transform="translate(259.8 555)" data-x="15" data-y="37"><use href="#point" x="0" y="0" data-x="15" data-y="37"/></g>
+      <g transform="translate(277.1 555)" data-x="16" data-y="37"><use href="#point" x="0" y="0" data-x="16" data-y="37"/></g>
+      <g transform="translate(294.4 555)" data-x="17" data-y="37"><use href="#point" x="0" y="0" data-x="17" data-y="37"/></g>
+      <g transform="translate(311.8 555)" data-x="18" data-y="37"><use href="#point" x="0" y="0" data-x="18" data-y="37"/></g>
+      <g transform="translate(329.1 555)" data-x="19" data-y="37"><use href="#point" x="0" y="0" data-x="19" data-y="37"/></g>
+      <g transform="translate(346.4 555)" data-x="20" data-y="37"><use href="#point" x="0" y="0" data-x="20" data-y="37"/></g>
+      <g transform="translate(363.7 555)" data-x="21" data-y="37"><use href="#point" x="0" y="0" data-x="21" data-y="37"/></g>
+      <g transform="translate(381.1 555)" data-x="22" data-y="37"><use href="#point" x="0" y="0" data-x="22" data-y="37"/></g>
+      <g transform="translate(398.4 555)" data-x="23" data-y="37"><use href="#point" x="0" y="0" data-x="23" data-y="37"/></g>
+      <g transform="translate(415.7 555)" data-x="24" data-y="37"><use href="#point" x="0" y="0" data-x="24" data-y="37"/></g>
+      <g transform="translate(433 555)" data-x="25" data-y="37"><use href="#point" x="0" y="0" data-x="25" data-y="37"/></g>
+      <g transform="translate(450.3 555)" data-x="26" data-y="37"><use href="#point" x="0" y="0" data-x="26" data-y="37"/></g>
+      <g transform="translate(467.7 555)" data-x="27" data-y="37"><use href="#point" x="0" y="0" data-x="27" data-y="37"/></g>
+      <g transform="translate(485 555)" data-x="28" data-y="37"><use href="#point" x="0" y="0" data-x="28" data-y="37"/></g>
+      <g transform="translate(502.3 555)" data-x="29" data-y="37"><use href="#point" x="0" y="0" data-x="29" data-y="37"/></g>
+      <g transform="translate(519.6 555)" data-x="30" data-y="37"><use href="#point" x="0" y="0" data-x="30" data-y="37"/></g>
+      <g transform="translate(536.9 555)" data-x="31" data-y="37"><use href="#point" x="0" y="0" data-x="31" data-y="37"/></g>
+      <g transform="translate(554.3 555)" data-x="32" data-y="37"><use href="#point" x="0" y="0" data-x="32" data-y="37"/></g>
+      <g transform="translate(8.7 570)" data-x="0" data-y="38"><use href="#point" x="0" y="0" data-x="0" data-y="38"/></g>
+      <g transform="translate(26 570)" data-x="1" data-y="38"><use href="#point" x="0" y="0" data-x="1" data-y="38"/></g>
+      <g transform="translate(43.3 570)" data-x="2" data-y="38"><use href="#point" x="0" y="0" data-x="2" data-y="38"/></g>
+      <g transform="translate(60.6 570)" data-x="3" data-y="38"><use href="#point" x="0" y="0" data-x="3" data-y="38"/></g>
+      <g transform="translate(77.9 570)" data-x="4" data-y="38"><use href="#point" x="0" y="0" data-x="4" data-y="38"/></g>
+      <g transform="translate(95.3 570)" data-x="5" data-y="38"><use href="#point" x="0" y="0" data-x="5" data-y="38"/></g>
+      <g transform="translate(112.6 570)" data-x="6" data-y="38"><use href="#point" x="0" y="0" data-x="6" data-y="38"/></g>
+      <g transform="translate(129.9 570)" data-x="7" data-y="38"><use href="#point" x="0" y="0" data-x="7" data-y="38"/></g>
+      <g transform="translate(147.2 570)" data-x="8" data-y="38"><use href="#point" x="0" y="0" data-x="8" data-y="38"/></g>
+      <g transform="translate(164.5 570)" data-x="9" data-y="38"><use href="#point" x="0" y="0" data-x="9" data-y="38"/></g>
+      <g transform="translate(181.9 570)" data-x="10" data-y="38"><use href="#point" x="0" y="0" data-x="10" data-y="38"/></g>
+      <g transform="translate(199.2 570)" data-x="11" data-y="38"><use href="#point" x="0" y="0" data-x="11" data-y="38"/></g>
+      <g transform="translate(216.5 570)" data-x="12" data-y="38"><use href="#point" x="0" y="0" data-x="12" data-y="38"/></g>
+      <g transform="translate(233.8 570)" data-x="13" data-y="38"><use href="#point" x="0" y="0" data-x="13" data-y="38"/></g>
+      <g transform="translate(251.1 570)" data-x="14" data-y="38"><use href="#point" x="0" y="0" data-x="14" data-y="38"/></g>
+      <g transform="translate(268.5 570)" data-x="15" data-y="38"><use href="#point" x="0" y="0" data-x="15" data-y="38"/></g>
+      <g transform="translate(285.8 570)" data-x="16" data-y="38"><use href="#point" x="0" y="0" data-x="16" data-y="38"/></g>
+      <g transform="translate(303.1 570)" data-x="17" data-y="38"><use href="#point" x="0" y="0" data-x="17" data-y="38"/></g>
+      <g transform="translate(320.4 570)" data-x="18" data-y="38"><use href="#point" x="0" y="0" data-x="18" data-y="38"/></g>
+      <g transform="translate(337.7 570)" data-x="19" data-y="38"><use href="#point" x="0" y="0" data-x="19" data-y="38"/></g>
+      <g transform="translate(355.1 570)" data-x="20" data-y="38"><use href="#point" x="0" y="0" data-x="20" data-y="38"/></g>
+      <g transform="translate(372.4 570)" data-x="21" data-y="38"><use href="#point" x="0" y="0" data-x="21" data-y="38"/></g>
+      <g transform="translate(389.7 570)" data-x="22" data-y="38"><use href="#point" x="0" y="0" data-x="22" data-y="38"/></g>
+      <g transform="translate(407 570)" data-x="23" data-y="38"><use href="#point" x="0" y="0" data-x="23" data-y="38"/></g>
+      <g transform="translate(424.4 570)" data-x="24" data-y="38"><use href="#point" x="0" y="0" data-x="24" data-y="38"/></g>
+      <g transform="translate(441.7 570)" data-x="25" data-y="38"><use href="#point" x="0" y="0" data-x="25" data-y="38"/></g>
+      <g transform="translate(459 570)" data-x="26" data-y="38"><use href="#point" x="0" y="0" data-x="26" data-y="38"/></g>
+      <g transform="translate(476.3 570)" data-x="27" data-y="38"><use href="#point" x="0" y="0" data-x="27" data-y="38"/></g>
+      <g transform="translate(493.6 570)" data-x="28" data-y="38"><use href="#point" x="0" y="0" data-x="28" data-y="38"/></g>
+      <g transform="translate(511 570)" data-x="29" data-y="38"><use href="#point" x="0" y="0" data-x="29" data-y="38"/></g>
+      <g transform="translate(528.3 570)" data-x="30" data-y="38"><use href="#point" x="0" y="0" data-x="30" data-y="38"/></g>
+      <g transform="translate(545.6 570)" data-x="31" data-y="38"><use href="#point" x="0" y="0" data-x="31" data-y="38"/></g>
+      <g transform="translate(562.9 570)" data-x="32" data-y="38"><use href="#point" x="0" y="0" data-x="32" data-y="38"/></g>
+      <g transform="translate(0 585)" data-x="0" data-y="39"><use href="#point" x="0" y="0" data-x="0" data-y="39"/></g>
+      <g transform="translate(17.3 585)" data-x="1" data-y="39"><use href="#point" x="0" y="0" data-x="1" data-y="39"/></g>
+      <g transform="translate(34.6 585)" data-x="2" data-y="39"><use href="#point" x="0" y="0" data-x="2" data-y="39"/></g>
+      <g transform="translate(52 585)" data-x="3" data-y="39"><use href="#point" x="0" y="0" data-x="3" data-y="39"/></g>
+      <g transform="translate(69.3 585)" data-x="4" data-y="39"><use href="#point" x="0" y="0" data-x="4" data-y="39"/></g>
+      <g transform="translate(86.6 585)" data-x="5" data-y="39"><use href="#point" x="0" y="0" data-x="5" data-y="39"/></g>
+      <g transform="translate(103.9 585)" data-x="6" data-y="39"><use href="#point" x="0" y="0" data-x="6" data-y="39"/></g>
+      <g transform="translate(121.2 585)" data-x="7" data-y="39"><use href="#point" x="0" y="0" data-x="7" data-y="39"/></g>
+      <g transform="translate(138.6 585)" data-x="8" data-y="39"><use href="#point" x="0" y="0" data-x="8" data-y="39"/></g>
+      <g transform="translate(155.9 585)" data-x="9" data-y="39"><use href="#point" x="0" y="0" data-x="9" data-y="39"/></g>
+      <g transform="translate(173.2 585)" data-x="10" data-y="39"><use href="#point" x="0" y="0" data-x="10" data-y="39"/></g>
+      <g transform="translate(190.5 585)" data-x="11" data-y="39"><use href="#point" x="0" y="0" data-x="11" data-y="39"/></g>
+      <g transform="translate(207.8 585)" data-x="12" data-y="39"><use href="#point" x="0" y="0" data-x="12" data-y="39"/></g>
+      <g transform="translate(225.2 585)" data-x="13" data-y="39"><use href="#point" x="0" y="0" data-x="13" data-y="39"/></g>
+      <g transform="translate(242.5 585)" data-x="14" data-y="39"><use href="#point" x="0" y="0" data-x="14" data-y="39"/></g>
+      <g transform="translate(259.8 585)" data-x="15" data-y="39"><use href="#point" x="0" y="0" data-x="15" data-y="39"/></g>
+      <g transform="translate(277.1 585)" data-x="16" data-y="39"><use href="#point" x="0" y="0" data-x="16" data-y="39"/></g>
+      <g transform="translate(294.4 585)" data-x="17" data-y="39"><use href="#point" x="0" y="0" data-x="17" data-y="39"/></g>
+      <g transform="translate(311.8 585)" data-x="18" data-y="39"><use href="#point" x="0" y="0" data-x="18" data-y="39"/></g>
+      <g transform="translate(329.1 585)" data-x="19" data-y="39"><use href="#point" x="0" y="0" data-x="19" data-y="39"/></g>
+      <g transform="translate(346.4 585)" data-x="20" data-y="39"><use href="#point" x="0" y="0" data-x="20" data-y="39"/></g>
+      <g transform="translate(363.7 585)" data-x="21" data-y="39"><use href="#point" x="0" y="0" data-x="21" data-y="39"/></g>
+      <g transform="translate(381.1 585)" data-x="22" data-y="39"><use href="#point" x="0" y="0" data-x="22" data-y="39"/></g>
+      <g transform="translate(398.4 585)" data-x="23" data-y="39"><use href="#point" x="0" y="0" data-x="23" data-y="39"/></g>
+      <g transform="translate(415.7 585)" data-x="24" data-y="39"><use href="#point" x="0" y="0" data-x="24" data-y="39"/></g>
+      <g transform="translate(433 585)" data-x="25" data-y="39"><use href="#point" x="0" y="0" data-x="25" data-y="39"/></g>
+      <g transform="translate(450.3 585)" data-x="26" data-y="39"><use href="#point" x="0" y="0" data-x="26" data-y="39"/></g>
+      <g transform="translate(467.7 585)" data-x="27" data-y="39"><use href="#point" x="0" y="0" data-x="27" data-y="39"/></g>
+      <g transform="translate(485 585)" data-x="28" data-y="39"><use href="#point" x="0" y="0" data-x="28" data-y="39"/></g>
+      <g transform="translate(502.3 585)" data-x="29" data-y="39"><use href="#point" x="0" y="0" data-x="29" data-y="39"/></g>
+      <g transform="translate(519.6 585)" data-x="30" data-y="39"><use href="#point" x="0" y="0" data-x="30" data-y="39"/></g>
+      <g transform="translate(536.9 585)" data-x="31" data-y="39"><use href="#point" x="0" y="0" data-x="31" data-y="39"/></g>
+      <g transform="translate(554.3 585)" data-x="32" data-y="39"><use href="#point" x="0" y="0" data-x="32" data-y="39"/></g>
+      <g transform="translate(8.7 600)" data-x="0" data-y="40"><use href="#point" x="0" y="0" data-x="0" data-y="40"/></g>
+      <g transform="translate(26 600)" data-x="1" data-y="40"><use href="#point" x="0" y="0" data-x="1" data-y="40"/></g>
+      <g transform="translate(43.3 600)" data-x="2" data-y="40"><use href="#point" x="0" y="0" data-x="2" data-y="40"/></g>
+      <g transform="translate(60.6 600)" data-x="3" data-y="40"><use href="#point" x="0" y="0" data-x="3" data-y="40"/></g>
+      <g transform="translate(77.9 600)" data-x="4" data-y="40"><use href="#point" x="0" y="0" data-x="4" data-y="40"/></g>
+      <g transform="translate(95.3 600)" data-x="5" data-y="40"><use href="#point" x="0" y="0" data-x="5" data-y="40"/></g>
+      <g transform="translate(112.6 600)" data-x="6" data-y="40"><use href="#point" x="0" y="0" data-x="6" data-y="40"/></g>
+      <g transform="translate(129.9 600)" data-x="7" data-y="40"><use href="#point" x="0" y="0" data-x="7" data-y="40"/></g>
+      <g transform="translate(147.2 600)" data-x="8" data-y="40"><use href="#point" x="0" y="0" data-x="8" data-y="40"/></g>
+      <g transform="translate(164.5 600)" data-x="9" data-y="40"><use href="#point" x="0" y="0" data-x="9" data-y="40"/></g>
+      <g transform="translate(181.9 600)" data-x="10" data-y="40"><use href="#point" x="0" y="0" data-x="10" data-y="40"/></g>
+      <g transform="translate(199.2 600)" data-x="11" data-y="40"><use href="#point" x="0" y="0" data-x="11" data-y="40"/></g>
+      <g transform="translate(216.5 600)" data-x="12" data-y="40"><use href="#point" x="0" y="0" data-x="12" data-y="40"/></g>
+      <g transform="translate(233.8 600)" data-x="13" data-y="40"><use href="#point" x="0" y="0" data-x="13" data-y="40"/></g>
+      <g transform="translate(251.1 600)" data-x="14" data-y="40"><use href="#point" x="0" y="0" data-x="14" data-y="40"/></g>
+      <g transform="translate(268.5 600)" data-x="15" data-y="40"><use href="#point" x="0" y="0" data-x="15" data-y="40"/></g>
+      <g transform="translate(285.8 600)" data-x="16" data-y="40"><use href="#point" x="0" y="0" data-x="16" data-y="40"/></g>
+      <g transform="translate(303.1 600)" data-x="17" data-y="40"><use href="#point" x="0" y="0" data-x="17" data-y="40"/></g>
+      <g transform="translate(320.4 600)" data-x="18" data-y="40"><use href="#point" x="0" y="0" data-x="18" data-y="40"/></g>
+      <g transform="translate(337.7 600)" data-x="19" data-y="40"><use href="#point" x="0" y="0" data-x="19" data-y="40"/></g>
+      <g transform="translate(355.1 600)" data-x="20" data-y="40"><use href="#point" x="0" y="0" data-x="20" data-y="40"/></g>
+      <g transform="translate(372.4 600)" data-x="21" data-y="40"><use href="#point" x="0" y="0" data-x="21" data-y="40"/></g>
+      <g transform="translate(389.7 600)" data-x="22" data-y="40"><use href="#point" x="0" y="0" data-x="22" data-y="40"/></g>
+      <g transform="translate(407 600)" data-x="23" data-y="40"><use href="#point" x="0" y="0" data-x="23" data-y="40"/></g>
+      <g transform="translate(424.4 600)" data-x="24" data-y="40"><use href="#point" x="0" y="0" data-x="24" data-y="40"/></g>
+      <g transform="translate(441.7 600)" data-x="25" data-y="40"><use href="#point" x="0" y="0" data-x="25" data-y="40"/></g>
+      <g transform="translate(459 600)" data-x="26" data-y="40"><use href="#point" x="0" y="0" data-x="26" data-y="40"/></g>
+      <g transform="translate(476.3 600)" data-x="27" data-y="40"><use href="#point" x="0" y="0" data-x="27" data-y="40"/></g>
+      <g transform="translate(493.6 600)" data-x="28" data-y="40"><use href="#point" x="0" y="0" data-x="28" data-y="40"/></g>
+      <g transform="translate(511 600)" data-x="29" data-y="40"><use href="#point" x="0" y="0" data-x="29" data-y="40"/></g>
+      <g transform="translate(528.3 600)" data-x="30" data-y="40"><use href="#point" x="0" y="0" data-x="30" data-y="40"/></g>
+      <g transform="translate(545.6 600)" data-x="31" data-y="40"><use href="#point" x="0" y="0" data-x="31" data-y="40"/></g>
+      <g transform="translate(562.9 600)" data-x="32" data-y="40"><use href="#point" x="0" y="0" data-x="32" data-y="40"/></g>
+      <g transform="translate(0 615)" data-x="0" data-y="41"><use href="#point" x="0" y="0" data-x="0" data-y="41"/></g>
+      <g transform="translate(17.3 615)" data-x="1" data-y="41"><use href="#point" x="0" y="0" data-x="1" data-y="41"/></g>
+      <g transform="translate(34.6 615)" data-x="2" data-y="41"><use href="#point" x="0" y="0" data-x="2" data-y="41"/></g>
+      <g transform="translate(52 615)" data-x="3" data-y="41"><use href="#point" x="0" y="0" data-x="3" data-y="41"/></g>
+      <g transform="translate(69.3 615)" data-x="4" data-y="41"><use href="#point" x="0" y="0" data-x="4" data-y="41"/></g>
+      <g transform="translate(86.6 615)" data-x="5" data-y="41"><use href="#point" x="0" y="0" data-x="5" data-y="41"/></g>
+      <g transform="translate(103.9 615)" data-x="6" data-y="41"><use href="#point" x="0" y="0" data-x="6" data-y="41"/></g>
+      <g transform="translate(121.2 615)" data-x="7" data-y="41"><use href="#point" x="0" y="0" data-x="7" data-y="41"/></g>
+      <g transform="translate(138.6 615)" data-x="8" data-y="41"><use href="#point" x="0" y="0" data-x="8" data-y="41"/></g>
+      <g transform="translate(155.9 615)" data-x="9" data-y="41"><use href="#point" x="0" y="0" data-x="9" data-y="41"/></g>
+      <g transform="translate(173.2 615)" data-x="10" data-y="41"><use href="#point" x="0" y="0" data-x="10" data-y="41"/></g>
+      <g transform="translate(190.5 615)" data-x="11" data-y="41"><use href="#point" x="0" y="0" data-x="11" data-y="41"/></g>
+      <g transform="translate(207.8 615)" data-x="12" data-y="41"><use href="#point" x="0" y="0" data-x="12" data-y="41"/></g>
+      <g transform="translate(225.2 615)" data-x="13" data-y="41"><use href="#point" x="0" y="0" data-x="13" data-y="41"/></g>
+      <g transform="translate(242.5 615)" data-x="14" data-y="41"><use href="#point" x="0" y="0" data-x="14" data-y="41"/></g>
+      <g transform="translate(259.8 615)" data-x="15" data-y="41"><use href="#point" x="0" y="0" data-x="15" data-y="41"/></g>
+      <g transform="translate(277.1 615)" data-x="16" data-y="41"><use href="#point" x="0" y="0" data-x="16" data-y="41"/></g>
+      <g transform="translate(294.4 615)" data-x="17" data-y="41"><use href="#point" x="0" y="0" data-x="17" data-y="41"/></g>
+      <g transform="translate(311.8 615)" data-x="18" data-y="41"><use href="#point" x="0" y="0" data-x="18" data-y="41"/></g>
+      <g transform="translate(329.1 615)" data-x="19" data-y="41"><use href="#point" x="0" y="0" data-x="19" data-y="41"/></g>
+      <g transform="translate(346.4 615)" data-x="20" data-y="41"><use href="#point" x="0" y="0" data-x="20" data-y="41"/></g>
+      <g transform="translate(363.7 615)" data-x="21" data-y="41"><use href="#point" x="0" y="0" data-x="21" data-y="41"/></g>
+      <g transform="translate(381.1 615)" data-x="22" data-y="41"><use href="#point" x="0" y="0" data-x="22" data-y="41"/></g>
+      <g transform="translate(398.4 615)" data-x="23" data-y="41"><use href="#point" x="0" y="0" data-x="23" data-y="41"/></g>
+      <g transform="translate(415.7 615)" data-x="24" data-y="41"><use href="#point" x="0" y="0" data-x="24" data-y="41"/></g>
+      <g transform="translate(433 615)" data-x="25" data-y="41"><use href="#point" x="0" y="0" data-x="25" data-y="41"/></g>
+      <g transform="translate(450.3 615)" data-x="26" data-y="41"><use href="#point" x="0" y="0" data-x="26" data-y="41"/></g>
+      <g transform="translate(467.7 615)" data-x="27" data-y="41"><use href="#point" x="0" y="0" data-x="27" data-y="41"/></g>
+      <g transform="translate(485 615)" data-x="28" data-y="41"><use href="#point" x="0" y="0" data-x="28" data-y="41"/></g>
+      <g transform="translate(502.3 615)" data-x="29" data-y="41"><use href="#point" x="0" y="0" data-x="29" data-y="41"/></g>
+      <g transform="translate(519.6 615)" data-x="30" data-y="41"><use href="#point" x="0" y="0" data-x="30" data-y="41"/></g>
+      <g transform="translate(536.9 615)" data-x="31" data-y="41"><use href="#point" x="0" y="0" data-x="31" data-y="41"/></g>
+      <g transform="translate(554.3 615)" data-x="32" data-y="41"><use href="#point" x="0" y="0" data-x="32" data-y="41"/></g>
+      <g transform="translate(8.7 630)" data-x="0" data-y="42"><use href="#point" x="0" y="0" data-x="0" data-y="42"/></g>
+      <g transform="translate(26 630)" data-x="1" data-y="42"><use href="#point" x="0" y="0" data-x="1" data-y="42"/></g>
+      <g transform="translate(43.3 630)" data-x="2" data-y="42"><use href="#point" x="0" y="0" data-x="2" data-y="42"/></g>
+      <g transform="translate(60.6 630)" data-x="3" data-y="42"><use href="#point" x="0" y="0" data-x="3" data-y="42"/></g>
+      <g transform="translate(77.9 630)" data-x="4" data-y="42"><use href="#point" x="0" y="0" data-x="4" data-y="42"/></g>
+      <g transform="translate(95.3 630)" data-x="5" data-y="42"><use href="#point" x="0" y="0" data-x="5" data-y="42"/></g>
+      <g transform="translate(112.6 630)" data-x="6" data-y="42"><use href="#point" x="0" y="0" data-x="6" data-y="42"/></g>
+      <g transform="translate(129.9 630)" data-x="7" data-y="42"><use href="#point" x="0" y="0" data-x="7" data-y="42"/></g>
+      <g transform="translate(147.2 630)" data-x="8" data-y="42"><use href="#point" x="0" y="0" data-x="8" data-y="42"/></g>
+      <g transform="translate(164.5 630)" data-x="9" data-y="42"><use href="#point" x="0" y="0" data-x="9" data-y="42"/></g>
+      <g transform="translate(181.9 630)" data-x="10" data-y="42"><use href="#point" x="0" y="0" data-x="10" data-y="42"/></g>
+      <g transform="translate(199.2 630)" data-x="11" data-y="42"><use href="#point" x="0" y="0" data-x="11" data-y="42"/></g>
+      <g transform="translate(216.5 630)" data-x="12" data-y="42"><use href="#point" x="0" y="0" data-x="12" data-y="42"/></g>
+      <g transform="translate(233.8 630)" data-x="13" data-y="42"><use href="#point" x="0" y="0" data-x="13" data-y="42"/></g>
+      <g transform="translate(251.1 630)" data-x="14" data-y="42"><use href="#point" x="0" y="0" data-x="14" data-y="42"/></g>
+      <g transform="translate(268.5 630)" data-x="15" data-y="42"><use href="#point" x="0" y="0" data-x="15" data-y="42"/></g>
+      <g transform="translate(285.8 630)" data-x="16" data-y="42"><use href="#point" x="0" y="0" data-x="16" data-y="42"/></g>
+      <g transform="translate(303.1 630)" data-x="17" data-y="42"><use href="#point" x="0" y="0" data-x="17" data-y="42"/></g>
+      <g transform="translate(320.4 630)" data-x="18" data-y="42"><use href="#point" x="0" y="0" data-x="18" data-y="42"/></g>
+      <g transform="translate(337.7 630)" data-x="19" data-y="42"><use href="#point" x="0" y="0" data-x="19" data-y="42"/></g>
+      <g transform="translate(355.1 630)" data-x="20" data-y="42"><use href="#point" x="0" y="0" data-x="20" data-y="42"/></g>
+      <g transform="translate(372.4 630)" data-x="21" data-y="42"><use href="#point" x="0" y="0" data-x="21" data-y="42"/></g>
+      <g transform="translate(389.7 630)" data-x="22" data-y="42"><use href="#point" x="0" y="0" data-x="22" data-y="42"/></g>
+      <g transform="translate(407 630)" data-x="23" data-y="42"><use href="#point" x="0" y="0" data-x="23" data-y="42"/></g>
+      <g transform="translate(424.4 630)" data-x="24" data-y="42"><use href="#point" x="0" y="0" data-x="24" data-y="42"/></g>
+      <g transform="translate(441.7 630)" data-x="25" data-y="42"><use href="#point" x="0" y="0" data-x="25" data-y="42"/></g>
+      <g transform="translate(459 630)" data-x="26" data-y="42"><use href="#point" x="0" y="0" data-x="26" data-y="42"/></g>
+      <g transform="translate(476.3 630)" data-x="27" data-y="42"><use href="#point" x="0" y="0" data-x="27" data-y="42"/></g>
+      <g transform="translate(493.6 630)" data-x="28" data-y="42"><use href="#point" x="0" y="0" data-x="28" data-y="42"/></g>
+      <g transform="translate(511 630)" data-x="29" data-y="42"><use href="#point" x="0" y="0" data-x="29" data-y="42"/></g>
+      <g transform="translate(528.3 630)" data-x="30" data-y="42"><use href="#point" x="0" y="0" data-x="30" data-y="42"/></g>
+      <g transform="translate(545.6 630)" data-x="31" data-y="42"><use href="#point" x="0" y="0" data-x="31" data-y="42"/></g>
+      <g transform="translate(562.9 630)" data-x="32" data-y="42"><use href="#point" x="0" y="0" data-x="32" data-y="42"/></g>
+      <g transform="translate(0 645)" data-x="0" data-y="43"><use href="#point" x="0" y="0" data-x="0" data-y="43"/></g>
+      <g transform="translate(17.3 645)" data-x="1" data-y="43"><use href="#point" x="0" y="0" data-x="1" data-y="43"/></g>
+      <g transform="translate(34.6 645)" data-x="2" data-y="43"><use href="#point" x="0" y="0" data-x="2" data-y="43"/></g>
+      <g transform="translate(52 645)" data-x="3" data-y="43"><use href="#point" x="0" y="0" data-x="3" data-y="43"/></g>
+      <g transform="translate(69.3 645)" data-x="4" data-y="43"><use href="#point" x="0" y="0" data-x="4" data-y="43"/></g>
+      <g transform="translate(86.6 645)" data-x="5" data-y="43"><use href="#point" x="0" y="0" data-x="5" data-y="43"/></g>
+      <g transform="translate(103.9 645)" data-x="6" data-y="43"><use href="#point" x="0" y="0" data-x="6" data-y="43"/></g>
+      <g transform="translate(121.2 645)" data-x="7" data-y="43"><use href="#point" x="0" y="0" data-x="7" data-y="43"/></g>
+      <g transform="translate(138.6 645)" data-x="8" data-y="43"><use href="#point" x="0" y="0" data-x="8" data-y="43"/></g>
+      <g transform="translate(155.9 645)" data-x="9" data-y="43"><use href="#point" x="0" y="0" data-x="9" data-y="43"/></g>
+      <g transform="translate(173.2 645)" data-x="10" data-y="43"><use href="#point" x="0" y="0" data-x="10" data-y="43"/></g>
+      <g transform="translate(190.5 645)" data-x="11" data-y="43"><use href="#point" x="0" y="0" data-x="11" data-y="43"/></g>
+      <g transform="translate(207.8 645)" data-x="12" data-y="43"><use href="#point" x="0" y="0" data-x="12" data-y="43"/></g>
+      <g transform="translate(225.2 645)" data-x="13" data-y="43"><use href="#point" x="0" y="0" data-x="13" data-y="43"/></g>
+      <g transform="translate(242.5 645)" data-x="14" data-y="43"><use href="#point" x="0" y="0" data-x="14" data-y="43"/></g>
+      <g transform="translate(259.8 645)" data-x="15" data-y="43"><use href="#point" x="0" y="0" data-x="15" data-y="43"/></g>
+      <g transform="translate(277.1 645)" data-x="16" data-y="43"><use href="#point" x="0" y="0" data-x="16" data-y="43"/></g>
+      <g transform="translate(294.4 645)" data-x="17" data-y="43"><use href="#point" x="0" y="0" data-x="17" data-y="43"/></g>
+      <g transform="translate(311.8 645)" data-x="18" data-y="43"><use href="#point" x="0" y="0" data-x="18" data-y="43"/></g>
+      <g transform="translate(329.1 645)" data-x="19" data-y="43"><use href="#point" x="0" y="0" data-x="19" data-y="43"/></g>
+      <g transform="translate(346.4 645)" data-x="20" data-y="43"><use href="#point" x="0" y="0" data-x="20" data-y="43"/></g>
+      <g transform="translate(363.7 645)" data-x="21" data-y="43"><use href="#point" x="0" y="0" data-x="21" data-y="43"/></g>
+      <g transform="translate(381.1 645)" data-x="22" data-y="43"><use href="#point" x="0" y="0" data-x="22" data-y="43"/></g>
+      <g transform="translate(398.4 645)" data-x="23" data-y="43"><use href="#point" x="0" y="0" data-x="23" data-y="43"/></g>
+      <g transform="translate(415.7 645)" data-x="24" data-y="43"><use href="#point" x="0" y="0" data-x="24" data-y="43"/></g>
+      <g transform="translate(433 645)" data-x="25" data-y="43"><use href="#point" x="0" y="0" data-x="25" data-y="43"/></g>
+      <g transform="translate(450.3 645)" data-x="26" data-y="43"><use href="#point" x="0" y="0" data-x="26" data-y="43"/></g>
+      <g transform="translate(467.7 645)" data-x="27" data-y="43"><use href="#point" x="0" y="0" data-x="27" data-y="43"/></g>
+      <g transform="translate(485 645)" data-x="28" data-y="43"><use href="#point" x="0" y="0" data-x="28" data-y="43"/></g>
+      <g transform="translate(502.3 645)" data-x="29" data-y="43"><use href="#point" x="0" y="0" data-x="29" data-y="43"/></g>
+      <g transform="translate(519.6 645)" data-x="30" data-y="43"><use href="#point" x="0" y="0" data-x="30" data-y="43"/></g>
+      <g transform="translate(536.9 645)" data-x="31" data-y="43"><use href="#point" x="0" y="0" data-x="31" data-y="43"/></g>
+      <g transform="translate(554.3 645)" data-x="32" data-y="43"><use href="#point" x="0" y="0" data-x="32" data-y="43"/></g>
+      <g transform="translate(8.7 660)" data-x="0" data-y="44"><use href="#point" x="0" y="0" data-x="0" data-y="44"/></g>
+      <g transform="translate(26 660)" data-x="1" data-y="44"><use href="#point" x="0" y="0" data-x="1" data-y="44"/></g>
+      <g transform="translate(43.3 660)" data-x="2" data-y="44"><use href="#point" x="0" y="0" data-x="2" data-y="44"/></g>
+      <g transform="translate(60.6 660)" data-x="3" data-y="44"><use href="#point" x="0" y="0" data-x="3" data-y="44"/></g>
+      <g transform="translate(77.9 660)" data-x="4" data-y="44"><use href="#point" x="0" y="0" data-x="4" data-y="44"/></g>
+      <g transform="translate(95.3 660)" data-x="5" data-y="44"><use href="#point" x="0" y="0" data-x="5" data-y="44"/></g>
+      <g transform="translate(112.6 660)" data-x="6" data-y="44"><use href="#point" x="0" y="0" data-x="6" data-y="44"/></g>
+      <g transform="translate(129.9 660)" data-x="7" data-y="44"><use href="#point" x="0" y="0" data-x="7" data-y="44"/></g>
+      <g transform="translate(147.2 660)" data-x="8" data-y="44"><use href="#point" x="0" y="0" data-x="8" data-y="44"/></g>
+      <g transform="translate(164.5 660)" data-x="9" data-y="44"><use href="#point" x="0" y="0" data-x="9" data-y="44"/></g>
+      <g transform="translate(181.9 660)" data-x="10" data-y="44"><use href="#point" x="0" y="0" data-x="10" data-y="44"/></g>
+      <g transform="translate(199.2 660)" data-x="11" data-y="44"><use href="#point" x="0" y="0" data-x="11" data-y="44"/></g>
+      <g transform="translate(216.5 660)" data-x="12" data-y="44"><use href="#point" x="0" y="0" data-x="12" data-y="44"/></g>
+      <g transform="translate(233.8 660)" data-x="13" data-y="44"><use href="#point" x="0" y="0" data-x="13" data-y="44"/></g>
+      <g transform="translate(251.1 660)" data-x="14" data-y="44"><use href="#point" x="0" y="0" data-x="14" data-y="44"/></g>
+      <g transform="translate(268.5 660)" data-x="15" data-y="44"><use href="#point" x="0" y="0" data-x="15" data-y="44"/></g>
+      <g transform="translate(285.8 660)" data-x="16" data-y="44"><use href="#point" x="0" y="0" data-x="16" data-y="44"/></g>
+      <g transform="translate(303.1 660)" data-x="17" data-y="44"><use href="#point" x="0" y="0" data-x="17" data-y="44"/></g>
+      <g transform="translate(320.4 660)" data-x="18" data-y="44"><use href="#point" x="0" y="0" data-x="18" data-y="44"/></g>
+      <g transform="translate(337.7 660)" data-x="19" data-y="44"><use href="#point" x="0" y="0" data-x="19" data-y="44"/></g>
+      <g transform="translate(355.1 660)" data-x="20" data-y="44"><use href="#point" x="0" y="0" data-x="20" data-y="44"/></g>
+      <g transform="translate(372.4 660)" data-x="21" data-y="44"><use href="#point" x="0" y="0" data-x="21" data-y="44"/></g>
+      <g transform="translate(389.7 660)" data-x="22" data-y="44"><use href="#point" x="0" y="0" data-x="22" data-y="44"/></g>
+      <g transform="translate(407 660)" data-x="23" data-y="44"><use href="#point" x="0" y="0" data-x="23" data-y="44"/></g>
+      <g transform="translate(424.4 660)" data-x="24" data-y="44"><use href="#point" x="0" y="0" data-x="24" data-y="44"/></g>
+      <g transform="translate(441.7 660)" data-x="25" data-y="44"><use href="#point" x="0" y="0" data-x="25" data-y="44"/></g>
+      <g transform="translate(459 660)" data-x="26" data-y="44"><use href="#point" x="0" y="0" data-x="26" data-y="44"/></g>
+      <g transform="translate(476.3 660)" data-x="27" data-y="44"><use href="#point" x="0" y="0" data-x="27" data-y="44"/></g>
+      <g transform="translate(493.6 660)" data-x="28" data-y="44"><use href="#point" x="0" y="0" data-x="28" data-y="44"/></g>
+      <g transform="translate(511 660)" data-x="29" data-y="44"><use href="#point" x="0" y="0" data-x="29" data-y="44"/></g>
+      <g transform="translate(528.3 660)" data-x="30" data-y="44"><use href="#point" x="0" y="0" data-x="30" data-y="44"/></g>
+      <g transform="translate(545.6 660)" data-x="31" data-y="44"><use href="#point" x="0" y="0" data-x="31" data-y="44"/></g>
+      <g transform="translate(562.9 660)" data-x="32" data-y="44"><use href="#point" x="0" y="0" data-x="32" data-y="44"/></g>
+      <g transform="translate(0 675)" data-x="0" data-y="45"><use href="#point" x="0" y="0" data-x="0" data-y="45"/></g>
+      <g transform="translate(17.3 675)" data-x="1" data-y="45"><use href="#point" x="0" y="0" data-x="1" data-y="45"/></g>
+      <g transform="translate(34.6 675)" data-x="2" data-y="45"><use href="#point" x="0" y="0" data-x="2" data-y="45"/></g>
+      <g transform="translate(52 675)" data-x="3" data-y="45"><use href="#point" x="0" y="0" data-x="3" data-y="45"/></g>
+      <g transform="translate(69.3 675)" data-x="4" data-y="45"><use href="#point" x="0" y="0" data-x="4" data-y="45"/></g>
+      <g transform="translate(86.6 675)" data-x="5" data-y="45"><use href="#point" x="0" y="0" data-x="5" data-y="45"/></g>
+      <g transform="translate(103.9 675)" data-x="6" data-y="45"><use href="#point" x="0" y="0" data-x="6" data-y="45"/></g>
+      <g transform="translate(121.2 675)" data-x="7" data-y="45"><use href="#point" x="0" y="0" data-x="7" data-y="45"/></g>
+      <g transform="translate(138.6 675)" data-x="8" data-y="45"><use href="#point" x="0" y="0" data-x="8" data-y="45"/></g>
+      <g transform="translate(155.9 675)" data-x="9" data-y="45"><use href="#point" x="0" y="0" data-x="9" data-y="45"/></g>
+      <g transform="translate(173.2 675)" data-x="10" data-y="45"><use href="#point" x="0" y="0" data-x="10" data-y="45"/></g>
+      <g transform="translate(190.5 675)" data-x="11" data-y="45"><use href="#point" x="0" y="0" data-x="11" data-y="45"/></g>
+      <g transform="translate(207.8 675)" data-x="12" data-y="45"><use href="#point" x="0" y="0" data-x="12" data-y="45"/></g>
+      <g transform="translate(225.2 675)" data-x="13" data-y="45"><use href="#point" x="0" y="0" data-x="13" data-y="45"/></g>
+      <g transform="translate(242.5 675)" data-x="14" data-y="45"><use href="#point" x="0" y="0" data-x="14" data-y="45"/></g>
+      <g transform="translate(259.8 675)" data-x="15" data-y="45"><use href="#point" x="0" y="0" data-x="15" data-y="45"/></g>
+      <g transform="translate(277.1 675)" data-x="16" data-y="45"><use href="#point" x="0" y="0" data-x="16" data-y="45"/></g>
+      <g transform="translate(294.4 675)" data-x="17" data-y="45"><use href="#point" x="0" y="0" data-x="17" data-y="45"/></g>
+      <g transform="translate(311.8 675)" data-x="18" data-y="45"><use href="#point" x="0" y="0" data-x="18" data-y="45"/></g>
+      <g transform="translate(329.1 675)" data-x="19" data-y="45"><use href="#point" x="0" y="0" data-x="19" data-y="45"/></g>
+      <g transform="translate(346.4 675)" data-x="20" data-y="45"><use href="#point" x="0" y="0" data-x="20" data-y="45"/></g>
+      <g transform="translate(363.7 675)" data-x="21" data-y="45"><use href="#point" x="0" y="0" data-x="21" data-y="45"/></g>
+      <g transform="translate(381.1 675)" data-x="22" data-y="45"><use href="#point" x="0" y="0" data-x="22" data-y="45"/></g>
+      <g transform="translate(398.4 675)" data-x="23" data-y="45"><use href="#point" x="0" y="0" data-x="23" data-y="45"/></g>
+      <g transform="translate(415.7 675)" data-x="24" data-y="45"><use href="#point" x="0" y="0" data-x="24" data-y="45"/></g>
+      <g transform="translate(433 675)" data-x="25" data-y="45"><use href="#point" x="0" y="0" data-x="25" data-y="45"/></g>
+      <g transform="translate(450.3 675)" data-x="26" data-y="45"><use href="#point" x="0" y="0" data-x="26" data-y="45"/></g>
+      <g transform="translate(467.7 675)" data-x="27" data-y="45"><use href="#point" x="0" y="0" data-x="27" data-y="45"/></g>
+      <g transform="translate(485 675)" data-x="28" data-y="45"><use href="#point" x="0" y="0" data-x="28" data-y="45"/></g>
+      <g transform="translate(502.3 675)" data-x="29" data-y="45"><use href="#point" x="0" y="0" data-x="29" data-y="45"/></g>
+      <g transform="translate(519.6 675)" data-x="30" data-y="45"><use href="#point" x="0" y="0" data-x="30" data-y="45"/></g>
+      <g transform="translate(536.9 675)" data-x="31" data-y="45"><use href="#point" x="0" y="0" data-x="31" data-y="45"/></g>
+      <g transform="translate(554.3 675)" data-x="32" data-y="45"><use href="#point" x="0" y="0" data-x="32" data-y="45"/></g>
+      <g transform="translate(8.7 690)" data-x="0" data-y="46"><use href="#point" x="0" y="0" data-x="0" data-y="46"/></g>
+      <g transform="translate(26 690)" data-x="1" data-y="46"><use href="#point" x="0" y="0" data-x="1" data-y="46"/></g>
+      <g transform="translate(43.3 690)" data-x="2" data-y="46"><use href="#point" x="0" y="0" data-x="2" data-y="46"/></g>
+      <g transform="translate(60.6 690)" data-x="3" data-y="46"><use href="#point" x="0" y="0" data-x="3" data-y="46"/></g>
+      <g transform="translate(77.9 690)" data-x="4" data-y="46"><use href="#point" x="0" y="0" data-x="4" data-y="46"/></g>
+      <g transform="translate(95.3 690)" data-x="5" data-y="46"><use href="#point" x="0" y="0" data-x="5" data-y="46"/></g>
+      <g transform="translate(112.6 690)" data-x="6" data-y="46"><use href="#point" x="0" y="0" data-x="6" data-y="46"/></g>
+      <g transform="translate(129.9 690)" data-x="7" data-y="46"><use href="#point" x="0" y="0" data-x="7" data-y="46"/></g>
+      <g transform="translate(147.2 690)" data-x="8" data-y="46"><use href="#point" x="0" y="0" data-x="8" data-y="46"/></g>
+      <g transform="translate(164.5 690)" data-x="9" data-y="46"><use href="#point" x="0" y="0" data-x="9" data-y="46"/></g>
+      <g transform="translate(181.9 690)" data-x="10" data-y="46"><use href="#point" x="0" y="0" data-x="10" data-y="46"/></g>
+      <g transform="translate(199.2 690)" data-x="11" data-y="46"><use href="#point" x="0" y="0" data-x="11" data-y="46"/></g>
+      <g transform="translate(216.5 690)" data-x="12" data-y="46"><use href="#point" x="0" y="0" data-x="12" data-y="46"/></g>
+      <g transform="translate(233.8 690)" data-x="13" data-y="46"><use href="#point" x="0" y="0" data-x="13" data-y="46"/></g>
+      <g transform="translate(251.1 690)" data-x="14" data-y="46"><use href="#point" x="0" y="0" data-x="14" data-y="46"/></g>
+      <g transform="translate(268.5 690)" data-x="15" data-y="46"><use href="#point" x="0" y="0" data-x="15" data-y="46"/></g>
+      <g transform="translate(285.8 690)" data-x="16" data-y="46"><use href="#point" x="0" y="0" data-x="16" data-y="46"/></g>
+      <g transform="translate(303.1 690)" data-x="17" data-y="46"><use href="#point" x="0" y="0" data-x="17" data-y="46"/></g>
+      <g transform="translate(320.4 690)" data-x="18" data-y="46"><use href="#point" x="0" y="0" data-x="18" data-y="46"/></g>
+      <g transform="translate(337.7 690)" data-x="19" data-y="46"><use href="#point" x="0" y="0" data-x="19" data-y="46"/></g>
+      <g transform="translate(355.1 690)" data-x="20" data-y="46"><use href="#point" x="0" y="0" data-x="20" data-y="46"/></g>
+      <g transform="translate(372.4 690)" data-x="21" data-y="46"><use href="#point" x="0" y="0" data-x="21" data-y="46"/></g>
+      <g transform="translate(389.7 690)" data-x="22" data-y="46"><use href="#point" x="0" y="0" data-x="22" data-y="46"/></g>
+      <g transform="translate(407 690)" data-x="23" data-y="46"><use href="#point" x="0" y="0" data-x="23" data-y="46"/></g>
+      <g transform="translate(424.4 690)" data-x="24" data-y="46"><use href="#point" x="0" y="0" data-x="24" data-y="46"/></g>
+      <g transform="translate(441.7 690)" data-x="25" data-y="46"><use href="#point" x="0" y="0" data-x="25" data-y="46"/></g>
+      <g transform="translate(459 690)" data-x="26" data-y="46"><use href="#point" x="0" y="0" data-x="26" data-y="46"/></g>
+      <g transform="translate(476.3 690)" data-x="27" data-y="46"><use href="#point" x="0" y="0" data-x="27" data-y="46"/></g>
+      <g transform="translate(493.6 690)" data-x="28" data-y="46"><use href="#point" x="0" y="0" data-x="28" data-y="46"/></g>
+      <g transform="translate(511 690)" data-x="29" data-y="46"><use href="#point" x="0" y="0" data-x="29" data-y="46"/></g>
+      <g transform="translate(528.3 690)" data-x="30" data-y="46"><use href="#point" x="0" y="0" data-x="30" data-y="46"/></g>
+      <g transform="translate(545.6 690)" data-x="31" data-y="46"><use href="#point" x="0" y="0" data-x="31" data-y="46"/></g>
+      <g transform="translate(562.9 690)" data-x="32" data-y="46"><use href="#point" x="0" y="0" data-x="32" data-y="46"/></g>
+      <g transform="translate(0 705)" data-x="0" data-y="47"><use href="#point" x="0" y="0" data-x="0" data-y="47"/></g>
+      <g transform="translate(17.3 705)" data-x="1" data-y="47"><use href="#point" x="0" y="0" data-x="1" data-y="47"/></g>
+      <g transform="translate(34.6 705)" data-x="2" data-y="47"><use href="#point" x="0" y="0" data-x="2" data-y="47"/></g>
+      <g transform="translate(52 705)" data-x="3" data-y="47"><use href="#point" x="0" y="0" data-x="3" data-y="47"/></g>
+      <g transform="translate(69.3 705)" data-x="4" data-y="47"><use href="#point" x="0" y="0" data-x="4" data-y="47"/></g>
+      <g transform="translate(86.6 705)" data-x="5" data-y="47"><use href="#point" x="0" y="0" data-x="5" data-y="47"/></g>
+      <g transform="translate(103.9 705)" data-x="6" data-y="47"><use href="#point" x="0" y="0" data-x="6" data-y="47"/></g>
+      <g transform="translate(121.2 705)" data-x="7" data-y="47"><use href="#point" x="0" y="0" data-x="7" data-y="47"/></g>
+      <g transform="translate(138.6 705)" data-x="8" data-y="47"><use href="#point" x="0" y="0" data-x="8" data-y="47"/></g>
+      <g transform="translate(155.9 705)" data-x="9" data-y="47"><use href="#point" x="0" y="0" data-x="9" data-y="47"/></g>
+      <g transform="translate(173.2 705)" data-x="10" data-y="47"><use href="#point" x="0" y="0" data-x="10" data-y="47"/></g>
+      <g transform="translate(190.5 705)" data-x="11" data-y="47"><use href="#point" x="0" y="0" data-x="11" data-y="47"/></g>
+      <g transform="translate(207.8 705)" data-x="12" data-y="47"><use href="#point" x="0" y="0" data-x="12" data-y="47"/></g>
+      <g transform="translate(225.2 705)" data-x="13" data-y="47"><use href="#point" x="0" y="0" data-x="13" data-y="47"/></g>
+      <g transform="translate(242.5 705)" data-x="14" data-y="47"><use href="#point" x="0" y="0" data-x="14" data-y="47"/></g>
+      <g transform="translate(259.8 705)" data-x="15" data-y="47"><use href="#point" x="0" y="0" data-x="15" data-y="47"/></g>
+      <g transform="translate(277.1 705)" data-x="16" data-y="47"><use href="#point" x="0" y="0" data-x="16" data-y="47"/></g>
+      <g transform="translate(294.4 705)" data-x="17" data-y="47"><use href="#point" x="0" y="0" data-x="17" data-y="47"/></g>
+      <g transform="translate(311.8 705)" data-x="18" data-y="47"><use href="#point" x="0" y="0" data-x="18" data-y="47"/></g>
+      <g transform="translate(329.1 705)" data-x="19" data-y="47"><use href="#point" x="0" y="0" data-x="19" data-y="47"/></g>
+      <g transform="translate(346.4 705)" data-x="20" data-y="47"><use href="#point" x="0" y="0" data-x="20" data-y="47"/></g>
+      <g transform="translate(363.7 705)" data-x="21" data-y="47"><use href="#point" x="0" y="0" data-x="21" data-y="47"/></g>
+      <g transform="translate(381.1 705)" data-x="22" data-y="47"><use href="#point" x="0" y="0" data-x="22" data-y="47"/></g>
+      <g transform="translate(398.4 705)" data-x="23" data-y="47"><use href="#point" x="0" y="0" data-x="23" data-y="47"/></g>
+      <g transform="translate(415.7 705)" data-x="24" data-y="47"><use href="#point" x="0" y="0" data-x="24" data-y="47"/></g>
+      <g transform="translate(433 705)" data-x="25" data-y="47"><use href="#point" x="0" y="0" data-x="25" data-y="47"/></g>
+      <g transform="translate(450.3 705)" data-x="26" data-y="47"><use href="#point" x="0" y="0" data-x="26" data-y="47"/></g>
+      <g transform="translate(467.7 705)" data-x="27" data-y="47"><use href="#point" x="0" y="0" data-x="27" data-y="47"/></g>
+      <g transform="translate(485 705)" data-x="28" data-y="47"><use href="#point" x="0" y="0" data-x="28" data-y="47"/></g>
+      <g transform="translate(502.3 705)" data-x="29" data-y="47"><use href="#point" x="0" y="0" data-x="29" data-y="47"/></g>
+      <g transform="translate(519.6 705)" data-x="30" data-y="47"><use href="#point" x="0" y="0" data-x="30" data-y="47"/></g>
+      <g transform="translate(536.9 705)" data-x="31" data-y="47"><use href="#point" x="0" y="0" data-x="31" data-y="47"/></g>
+      <g transform="translate(554.3 705)" data-x="32" data-y="47"><use href="#point" x="0" y="0" data-x="32" data-y="47"/></g>
+      <g transform="translate(8.7 720)" data-x="0" data-y="48"><use href="#point" x="0" y="0" data-x="0" data-y="48"/></g>
+      <g transform="translate(26 720)" data-x="1" data-y="48"><use href="#point" x="0" y="0" data-x="1" data-y="48"/></g>
+      <g transform="translate(43.3 720)" data-x="2" data-y="48"><use href="#point" x="0" y="0" data-x="2" data-y="48"/></g>
+      <g transform="translate(60.6 720)" data-x="3" data-y="48"><use href="#point" x="0" y="0" data-x="3" data-y="48"/></g>
+      <g transform="translate(77.9 720)" data-x="4" data-y="48"><use href="#point" x="0" y="0" data-x="4" data-y="48"/></g>
+      <g transform="translate(95.3 720)" data-x="5" data-y="48"><use href="#point" x="0" y="0" data-x="5" data-y="48"/></g>
+      <g transform="translate(112.6 720)" data-x="6" data-y="48"><use href="#point" x="0" y="0" data-x="6" data-y="48"/></g>
+      <g transform="translate(129.9 720)" data-x="7" data-y="48"><use href="#point" x="0" y="0" data-x="7" data-y="48"/></g>
+      <g transform="translate(147.2 720)" data-x="8" data-y="48"><use href="#point" x="0" y="0" data-x="8" data-y="48"/></g>
+      <g transform="translate(164.5 720)" data-x="9" data-y="48"><use href="#point" x="0" y="0" data-x="9" data-y="48"/></g>
+      <g transform="translate(181.9 720)" data-x="10" data-y="48"><use href="#point" x="0" y="0" data-x="10" data-y="48"/></g>
+      <g transform="translate(199.2 720)" data-x="11" data-y="48"><use href="#point" x="0" y="0" data-x="11" data-y="48"/></g>
+      <g transform="translate(216.5 720)" data-x="12" data-y="48"><use href="#point" x="0" y="0" data-x="12" data-y="48"/></g>
+      <g transform="translate(233.8 720)" data-x="13" data-y="48"><use href="#point" x="0" y="0" data-x="13" data-y="48"/></g>
+      <g transform="translate(251.1 720)" data-x="14" data-y="48"><use href="#point" x="0" y="0" data-x="14" data-y="48"/></g>
+      <g transform="translate(268.5 720)" data-x="15" data-y="48"><use href="#point" x="0" y="0" data-x="15" data-y="48"/></g>
+      <g transform="translate(285.8 720)" data-x="16" data-y="48"><use href="#point" x="0" y="0" data-x="16" data-y="48"/></g>
+      <g transform="translate(303.1 720)" data-x="17" data-y="48"><use href="#point" x="0" y="0" data-x="17" data-y="48"/></g>
+      <g transform="translate(320.4 720)" data-x="18" data-y="48"><use href="#point" x="0" y="0" data-x="18" data-y="48"/></g>
+      <g transform="translate(337.7 720)" data-x="19" data-y="48"><use href="#point" x="0" y="0" data-x="19" data-y="48"/></g>
+      <g transform="translate(355.1 720)" data-x="20" data-y="48"><use href="#point" x="0" y="0" data-x="20" data-y="48"/></g>
+      <g transform="translate(372.4 720)" data-x="21" data-y="48"><use href="#point" x="0" y="0" data-x="21" data-y="48"/></g>
+      <g transform="translate(389.7 720)" data-x="22" data-y="48"><use href="#point" x="0" y="0" data-x="22" data-y="48"/></g>
+      <g transform="translate(407 720)" data-x="23" data-y="48"><use href="#point" x="0" y="0" data-x="23" data-y="48"/></g>
+      <g transform="translate(424.4 720)" data-x="24" data-y="48"><use href="#point" x="0" y="0" data-x="24" data-y="48"/></g>
+      <g transform="translate(441.7 720)" data-x="25" data-y="48"><use href="#point" x="0" y="0" data-x="25" data-y="48"/></g>
+      <g transform="translate(459 720)" data-x="26" data-y="48"><use href="#point" x="0" y="0" data-x="26" data-y="48"/></g>
+      <g transform="translate(476.3 720)" data-x="27" data-y="48"><use href="#point" x="0" y="0" data-x="27" data-y="48"/></g>
+      <g transform="translate(493.6 720)" data-x="28" data-y="48"><use href="#point" x="0" y="0" data-x="28" data-y="48"/></g>
+      <g transform="translate(511 720)" data-x="29" data-y="48"><use href="#point" x="0" y="0" data-x="29" data-y="48"/></g>
+      <g transform="translate(528.3 720)" data-x="30" data-y="48"><use href="#point" x="0" y="0" data-x="30" data-y="48"/></g>
+      <g transform="translate(545.6 720)" data-x="31" data-y="48"><use href="#point" x="0" y="0" data-x="31" data-y="48"/></g>
+      <g transform="translate(562.9 720)" data-x="32" data-y="48"><use href="#point" x="0" y="0" data-x="32" data-y="48"/></g>
+      <g transform="translate(0 735)" data-x="0" data-y="49"><use href="#point" x="0" y="0" data-x="0" data-y="49"/></g>
+      <g transform="translate(17.3 735)" data-x="1" data-y="49"><use href="#point" x="0" y="0" data-x="1" data-y="49"/></g>
+      <g transform="translate(34.6 735)" data-x="2" data-y="49"><use href="#point" x="0" y="0" data-x="2" data-y="49"/></g>
+      <g transform="translate(52 735)" data-x="3" data-y="49"><use href="#point" x="0" y="0" data-x="3" data-y="49"/></g>
+      <g transform="translate(69.3 735)" data-x="4" data-y="49"><use href="#point" x="0" y="0" data-x="4" data-y="49"/></g>
+      <g transform="translate(86.6 735)" data-x="5" data-y="49"><use href="#point" x="0" y="0" data-x="5" data-y="49"/></g>
+      <g transform="translate(103.9 735)" data-x="6" data-y="49"><use href="#point" x="0" y="0" data-x="6" data-y="49"/></g>
+      <g transform="translate(121.2 735)" data-x="7" data-y="49"><use href="#point" x="0" y="0" data-x="7" data-y="49"/></g>
+      <g transform="translate(138.6 735)" data-x="8" data-y="49"><use href="#point" x="0" y="0" data-x="8" data-y="49"/></g>
+      <g transform="translate(155.9 735)" data-x="9" data-y="49"><use href="#point" x="0" y="0" data-x="9" data-y="49"/></g>
+      <g transform="translate(173.2 735)" data-x="10" data-y="49"><use href="#point" x="0" y="0" data-x="10" data-y="49"/></g>
+      <g transform="translate(190.5 735)" data-x="11" data-y="49"><use href="#point" x="0" y="0" data-x="11" data-y="49"/></g>
+      <g transform="translate(207.8 735)" data-x="12" data-y="49"><use href="#point" x="0" y="0" data-x="12" data-y="49"/></g>
+      <g transform="translate(225.2 735)" data-x="13" data-y="49"><use href="#point" x="0" y="0" data-x="13" data-y="49"/></g>
+      <g transform="translate(242.5 735)" data-x="14" data-y="49"><use href="#point" x="0" y="0" data-x="14" data-y="49"/></g>
+      <g transform="translate(259.8 735)" data-x="15" data-y="49"><use href="#point" x="0" y="0" data-x="15" data-y="49"/></g>
+      <g transform="translate(277.1 735)" data-x="16" data-y="49"><use href="#point" x="0" y="0" data-x="16" data-y="49"/></g>
+      <g transform="translate(294.4 735)" data-x="17" data-y="49"><use href="#point" x="0" y="0" data-x="17" data-y="49"/></g>
+      <g transform="translate(311.8 735)" data-x="18" data-y="49"><use href="#point" x="0" y="0" data-x="18" data-y="49"/></g>
+      <g transform="translate(329.1 735)" data-x="19" data-y="49"><use href="#point" x="0" y="0" data-x="19" data-y="49"/></g>
+      <g transform="translate(346.4 735)" data-x="20" data-y="49"><use href="#point" x="0" y="0" data-x="20" data-y="49"/></g>
+      <g transform="translate(363.7 735)" data-x="21" data-y="49"><use href="#point" x="0" y="0" data-x="21" data-y="49"/></g>
+      <g transform="translate(381.1 735)" data-x="22" data-y="49"><use href="#point" x="0" y="0" data-x="22" data-y="49"/></g>
+      <g transform="translate(398.4 735)" data-x="23" data-y="49"><use href="#point" x="0" y="0" data-x="23" data-y="49"/></g>
+      <g transform="translate(415.7 735)" data-x="24" data-y="49"><use href="#point" x="0" y="0" data-x="24" data-y="49"/></g>
+      <g transform="translate(433 735)" data-x="25" data-y="49"><use href="#point" x="0" y="0" data-x="25" data-y="49"/></g>
+      <g transform="translate(450.3 735)" data-x="26" data-y="49"><use href="#point" x="0" y="0" data-x="26" data-y="49"/></g>
+      <g transform="translate(467.7 735)" data-x="27" data-y="49"><use href="#point" x="0" y="0" data-x="27" data-y="49"/></g>
+      <g transform="translate(485 735)" data-x="28" data-y="49"><use href="#point" x="0" y="0" data-x="28" data-y="49"/></g>
+      <g transform="translate(502.3 735)" data-x="29" data-y="49"><use href="#point" x="0" y="0" data-x="29" data-y="49"/></g>
+      <g transform="translate(519.6 735)" data-x="30" data-y="49"><use href="#point" x="0" y="0" data-x="30" data-y="49"/></g>
+      <g transform="translate(536.9 735)" data-x="31" data-y="49"><use href="#point" x="0" y="0" data-x="31" data-y="49"/></g>
+      <g transform="translate(554.3 735)" data-x="32" data-y="49"><use href="#point" x="0" y="0" data-x="32" data-y="49"/></g>
+      <g transform="translate(8.7 750)" data-x="0" data-y="50"><use href="#point" x="0" y="0" data-x="0" data-y="50"/></g>
+      <g transform="translate(26 750)" data-x="1" data-y="50"><use href="#point" x="0" y="0" data-x="1" data-y="50"/></g>
+      <g transform="translate(43.3 750)" data-x="2" data-y="50"><use href="#point" x="0" y="0" data-x="2" data-y="50"/></g>
+      <g transform="translate(60.6 750)" data-x="3" data-y="50"><use href="#point" x="0" y="0" data-x="3" data-y="50"/></g>
+      <g transform="translate(77.9 750)" data-x="4" data-y="50"><use href="#point" x="0" y="0" data-x="4" data-y="50"/></g>
+      <g transform="translate(95.3 750)" data-x="5" data-y="50"><use href="#point" x="0" y="0" data-x="5" data-y="50"/></g>
+      <g transform="translate(112.6 750)" data-x="6" data-y="50"><use href="#point" x="0" y="0" data-x="6" data-y="50"/></g>
+      <g transform="translate(129.9 750)" data-x="7" data-y="50"><use href="#point" x="0" y="0" data-x="7" data-y="50"/></g>
+      <g transform="translate(147.2 750)" data-x="8" data-y="50"><use href="#point" x="0" y="0" data-x="8" data-y="50"/></g>
+      <g transform="translate(164.5 750)" data-x="9" data-y="50"><use href="#point" x="0" y="0" data-x="9" data-y="50"/></g>
+      <g transform="translate(181.9 750)" data-x="10" data-y="50"><use href="#point" x="0" y="0" data-x="10" data-y="50"/></g>
+      <g transform="translate(199.2 750)" data-x="11" data-y="50"><use href="#point" x="0" y="0" data-x="11" data-y="50"/></g>
+      <g transform="translate(216.5 750)" data-x="12" data-y="50"><use href="#point" x="0" y="0" data-x="12" data-y="50"/></g>
+      <g transform="translate(233.8 750)" data-x="13" data-y="50"><use href="#point" x="0" y="0" data-x="13" data-y="50"/></g>
+      <g transform="translate(251.1 750)" data-x="14" data-y="50"><use href="#point" x="0" y="0" data-x="14" data-y="50"/></g>
+      <g transform="translate(268.5 750)" data-x="15" data-y="50"><use href="#point" x="0" y="0" data-x="15" data-y="50"/></g>
+      <g transform="translate(285.8 750)" data-x="16" data-y="50"><use href="#point" x="0" y="0" data-x="16" data-y="50"/></g>
+      <g transform="translate(303.1 750)" data-x="17" data-y="50"><use href="#point" x="0" y="0" data-x="17" data-y="50"/></g>
+      <g transform="translate(320.4 750)" data-x="18" data-y="50"><use href="#point" x="0" y="0" data-x="18" data-y="50"/></g>
+      <g transform="translate(337.7 750)" data-x="19" data-y="50"><use href="#point" x="0" y="0" data-x="19" data-y="50"/></g>
+      <g transform="translate(355.1 750)" data-x="20" data-y="50"><use href="#point" x="0" y="0" data-x="20" data-y="50"/></g>
+      <g transform="translate(372.4 750)" data-x="21" data-y="50"><use href="#point" x="0" y="0" data-x="21" data-y="50"/></g>
+      <g transform="translate(389.7 750)" data-x="22" data-y="50"><use href="#point" x="0" y="0" data-x="22" data-y="50"/></g>
+      <g transform="translate(407 750)" data-x="23" data-y="50"><use href="#point" x="0" y="0" data-x="23" data-y="50"/></g>
+      <g transform="translate(424.4 750)" data-x="24" data-y="50"><use href="#point" x="0" y="0" data-x="24" data-y="50"/></g>
+      <g transform="translate(441.7 750)" data-x="25" data-y="50"><use href="#point" x="0" y="0" data-x="25" data-y="50"/></g>
+      <g transform="translate(459 750)" data-x="26" data-y="50"><use href="#point" x="0" y="0" data-x="26" data-y="50"/></g>
+      <g transform="translate(476.3 750)" data-x="27" data-y="50"><use href="#point" x="0" y="0" data-x="27" data-y="50"/></g>
+      <g transform="translate(493.6 750)" data-x="28" data-y="50"><use href="#point" x="0" y="0" data-x="28" data-y="50"/></g>
+      <g transform="translate(511 750)" data-x="29" data-y="50"><use href="#point" x="0" y="0" data-x="29" data-y="50"/></g>
+      <g transform="translate(528.3 750)" data-x="30" data-y="50"><use href="#point" x="0" y="0" data-x="30" data-y="50"/></g>
+      <g transform="translate(545.6 750)" data-x="31" data-y="50"><use href="#point" x="0" y="0" data-x="31" data-y="50"/></g>
+      <g transform="translate(562.9 750)" data-x="32" data-y="50"><use href="#point" x="0" y="0" data-x="32" data-y="50"/></g>
+    </g>
+  </g>
+</svg>
+\ No newline at end of file
diff --git a/public/rendered_numbers.png b/public/rendered_numbers.png
new file mode 100644
index 0000000..8672434
--- /dev/null
+++ b/public/rendered_numbers.png
diff --git a/public/scans/countersheet1.jpg b/public/scans/countersheet1.jpg
new file mode 100644
index 0000000..659070e
--- /dev/null
+++ b/public/scans/countersheet1.jpg
diff --git a/public/scans/countersheet2.jpg b/public/scans/countersheet2.jpg
new file mode 100644
index 0000000..7a4d3ad
--- /dev/null
+++ b/public/scans/countersheet2.jpg
diff --git a/public/scans/countersheet3.jpg b/public/scans/countersheet3.jpg
new file mode 100644
index 0000000..dfe4696
--- /dev/null
+++ b/public/scans/countersheet3.jpg
diff --git a/public/scans/countersheet4.jpg b/public/scans/countersheet4.jpg
new file mode 100644
index 0000000..028b216
--- /dev/null
+++ b/public/scans/countersheet4.jpg
diff --git a/public/scans/map1-less-mem.jpg b/public/scans/map1-less-mem.jpg
new file mode 100644
index 0000000..322948b
--- /dev/null
+++ b/public/scans/map1-less-mem.jpg
diff --git a/public/scans/map1-photo.jpg b/public/scans/map1-photo.jpg
new file mode 100644
index 0000000..a13d14e
--- /dev/null
+++ b/public/scans/map1-photo.jpg
diff --git a/public/scans/map1.jpg b/public/scans/map1.jpg
new file mode 100644
index 0000000..8f6bc46
--- /dev/null
+++ b/public/scans/map1.jpg
diff --git a/public/scans/map1.png b/public/scans/map1.png
new file mode 100644
index 0000000..87232fc
--- /dev/null
+++ b/public/scans/map1.png
diff --git a/public/scans/map2.jpg b/public/scans/map2.jpg
new file mode 100644
index 0000000..82cd528
--- /dev/null
+++ b/public/scans/map2.jpg
diff --git a/public/scans/map3.jpg b/public/scans/map3.jpg
new file mode 100644
index 0000000..08232e4
--- /dev/null
+++ b/public/scans/map3.jpg
diff --git a/public/scans/map4.jpg b/public/scans/map4.jpg
new file mode 100644
index 0000000..8fa25dc
--- /dev/null
+++ b/public/scans/map4.jpg
diff --git a/public/soldier_record_block.css b/public/soldier_record_block.css
new file mode 100644
index 0000000..47bf583
--- /dev/null
+++ b/public/soldier_record_block.css
@@ -0,0 +1,35 @@
+span {
+  font-size: smaller;
+  font-family: monospace;
+  margin-right: 1em;
+}
+
+.physical-status-track {
+  text-align: center;
+}
+
+.physical-status-track span {
+  margin: 0;
+  padding: 0;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.physical-status-track span[slot="block-number"] {
+  font-family: serif;
+  font-size: unset;
+}
+
+ul {
+  margin: 0;
+  padding: 0;
+}
+
+ul li {
+  display: inline;
+  margin-left: 1em;
+}
+
+p {
+  margin: 0;
+}
diff --git a/public/soldier_record_block.js b/public/soldier_record_block.js
new file mode 100644
index 0000000..b2465ab
--- /dev/null
+++ b/public/soldier_record_block.js
@@ -0,0 +1,40 @@
+class SoldierRecordBlock extends HTMLDivElement {
+  constructor() {
+    super();
+
+    let template = document.getElementById('soldier-record-block');
+    let templateContent = template.content;
+
+    const shadowRoot = this.attachShadow({ mode: "open" });
+    shadowRoot.appendChild(templateContent.cloneNode(true));
+
+    // console.log(shadowRoot)
+
+    // this.shadowRoot
+    //   .querySelectorAll('p:has(input[type="number"]), .physical-status-track')
+    //   .forEach(el => el.addEventListener('click', e => e.stopPropagation()))
+    //   ;
+  }
+}
+
+customElements.define(
+  'damage-block',
+  class extends HTMLSpanElement {
+    constructor() {
+      super();
+
+      let template = document.getElementById('damage-block');
+      let templateContent = template.content;
+
+      const shadowRoot = this.attachShadow({ mode: "open" });
+      shadowRoot.appendChild(templateContent.cloneNode(true));
+    }
+  },
+  { extends: 'span' }
+);
+
+customElements.define(
+  'soldier-record-block',
+  SoldierRecordBlock,
+  { extends: 'div'}
+);
+\ No newline at end of file
diff --git a/public/style.css b/public/style.css
new file mode 100644
index 0000000..a1f8da5
--- /dev/null
+++ b/public/style.css
@@ -0,0 +1,437 @@
+body {
+  margin: 0;
+  display: flex;
+  overflow: hidden;
+}
+
+#map-container {
+  flex-basis: 100%;
+  position: relative;
+  max-height: 100vh;
+}
+
+svg, object {
+  background-color: darkgray;
+  width: 100%;
+  height: 100%;
+}
+
+svg image {
+  image-rendering: pixelated;
+}
+
+svg image.map-scans {
+  image-rendering: auto;
+}
+
+svg text {
+  user-select: none;
+}
+
+div#status {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  margin: 3px;
+  display: none;
+  user-select: none;
+}
+
+#hex-counter {
+  padding: 2px;
+  background-color: rgba(255, 255, 255, 0.5);
+  border-radius: 2px;
+}
+
+#hex-count {
+  font-family: monospace;
+}
+
+div#content {
+  display: flex;
+  /* display: none; */
+  border-left: 1px solid gray;
+  flex-basis: 0;
+  /* overflow: scroll; */
+  max-height: 100vh;
+  flex-direction: column;
+  /* padding: 2px; */
+  position: relative;
+}
+
+#content > div:first-of-type {
+  padding: 2px;
+  border-bottom: 1px solid gray;
+}
+
+#content #buttons {
+  line-height: 1.5em;
+}
+
+#content input[type="checkbox"].visible {
+  position: absolute;
+  right: 0;
+}
+
+#record-sheet {
+  /* max-height: 100%; */
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  /* display: none; */
+  background-color: gray;
+}
+
+#record-sheet > div {
+  /* padding: 0 2px; */
+  overflow-y: auto;
+  /* border: 1px solid black; */
+}
+
+#record-sheet > div > p {
+  margin: 0;
+  margin-top: 0px;
+  margin-bottom: 1px;
+  padding: 6px 2px;
+  background-color: lightgray;
+}
+
+#record-sheet > div > div {
+  /* border: 1px solid black; */
+  margin-bottom: 1px;
+  padding: 6px 4px;
+  /* border-radius: 4px; */
+}
+
+#record-sheet > div:last-of-type {
+  margin-top: 2px;
+}
+
+#record-sheet > div > div:last-of-type {
+  margin-bottom: 0;
+}
+
+svg > defs > #point {
+  fill: inherit;
+  fill-opacity: inherit;
+  stroke: inherit;
+  stroke-width: inherit;
+  stroke-opacity: inherit;
+}
+
+use[href="#point"] {
+  opacity: 0;
+  fill: teal;
+  fill-opacity: 0.2;
+  stroke: black;
+  stroke-width: 0.5px;
+}
+
+use[href="#point"]:hover, use[href="#point"].hover {
+  opacity: 1;
+  fill: orange;
+}
+
+use[href="#point"].active {
+  opacity: 0.2;
+}
+
+use[href="#point"].sight-line-target {
+  opacity: 1;
+  stroke: orangered;
+  /* stroke-width: 1px; */
+  fill-opacity: 0.04;
+}
+
+polyline.move-trace {
+  stroke: gray;
+  stroke-dasharray: 2;
+  fill: none;
+}
+
+g#grid {
+  transform: translate(19px, 31px) scale(4);
+}
+
+#background {
+  fill: #bacae3;
+}
+
+#map2 {
+  transform-origin: 0px 0px;
+  transform: translate(-0.9px, -2.4px) scale(0.999, 1.007);
+}
+
+#map3 {
+  transform-origin: 0px 0px;
+  /* transform: translateY(1518px); */
+  transform: translate(1.3px, 1564.1px) rotate(0.1deg) scale(0.999, 1.002);
+}
+
+#panel {
+  display: none;
+  position: absolute;
+  right: 0;
+  background-color: white;
+  border: 1px solid black;
+  padding: 2px;
+}
+
+#panel fieldset label {
+  display: block;
+  text-align: right;
+}
+
+#toggle-firing-arc-vis {
+  position: absolute;
+  right: 0;
+  padding-top: 20px;
+}
+
+#toggle-firing-arc-vis div {
+  margin-top: 10px;
+  writing-mode: vertical-lr;
+  transform: rotate(180deg);
+}
+
+#counter-base {
+  r: inherit;
+}
+
+g.troop-counter-template, g.troop-counter-template use {
+  r: inherit;
+}
+
+g.troop-counter, g.troop-counter use {
+  r: inherit;
+}
+
+g.troop-counter-template text {
+  fill: white;
+  font-size: 12px;
+  font-weight: bold;
+  font-family: monospace;
+  cursor: default;
+  text-anchor: middle;
+  pointer-events: none;
+  user-select: none;
+  transform: translateY(4px);
+  stroke: none;
+}
+
+g.troop-counter [href="#counter-prone"] {
+  transform: translate(-5px, 6px);
+}
+
+g#points g use.counter {
+  r: 5px;
+}
+
+g#points g.hover use[href="#point"] {
+  opacity: 1;
+  fill: orange;
+}
+
+g#points g.hover use.counter {
+  r: 7px;
+}
+
+g#points g.hover use.counter:not(.clone) {
+  /* stroke: orange; */
+  /* stroke-width: 2px; */
+}
+
+g#points use.counter[data-troop-allegiance="davion"] {
+  fill: red;
+}
+
+g#points use.counter[data-troop-allegiance="liao"] {
+  fill: green;
+}
+
+g#points use.clone {
+  stroke: white;
+  stroke-width: 0.5px;
+  stroke-dasharray: 1;
+}
+
+g#points use[data-troop-allegiance="davion"].clone {
+  fill: rgb(255, 126, 126);
+}
+
+g#points use[data-troop-allegiance="liao"].clone {
+  fill: rgb(130, 190, 130);
+}
+
+
+/* ======================================================= */
+
+/* g#counters {
+  pointer-events: none;
+} */
+
+/* g#counters use {
+  r: 5px;
+}
+
+g#counters use:hover {
+  stroke: orange;
+  stroke-width: 2px;
+  r: 8px;
+} */
+
+/* g#counters use[data-troop-allegiance="davion"] {
+  fill: red;
+}
+
+g#counters use[data-troop-allegiance="liao"] {
+  fill: green;
+} */
+
+/* g#counters use.clone {
+  stroke: white;
+  stroke-width: 0.5px;
+  stroke-dasharray: 1;
+}
+
+g#counters use[data-troop-allegiance="davion"].clone {
+  fill: rgb(255, 126, 126);
+}
+
+g#counters use[data-troop-allegiance="liao"].clone {
+  fill: rgb(130, 190, 130);
+} */
+
+text.counter, #troop-counter text {
+  font-size: 12px;
+  font-weight: bold;
+  /* stroke: black; */
+  fill: white;
+  /* stroke-width: 0.5px; */
+  font-family: sans-serif;
+  cursor: default;
+  text-anchor: middle;
+  /* transform: translateY(25%); */
+  transform: translateY(4px);
+  pointer-events: none;
+  user-select: none;
+}
+
+polygon.firing-arc[data-troop-allegiance="davion"] {
+  fill: red;
+}
+
+polygon.firing-arc[data-troop-allegiance="liao"] {
+  fill: green;
+}
+
+#shapes {
+  opacity: 0.1;
+}
+
+#shapes polygon {
+  stroke: none;
+}
+
+#lines polygon {
+  fill: none;
+  stroke: black;
+}
+
+button.set-firing-arc img {
+  vertical-align: middle;
+  pointer-events: none;
+}
+
+.sight-line {
+  stroke: orangered;
+  stroke-width: 0.5px;
+  pointer-events: none;
+}
+
+.soldier-record {
+  display: inline-block;
+  position: relative;
+  white-space: nowrap;
+  background-color: white;
+}
+
+.soldier-record [slot="troop-number"] {
+  color: white;
+  font-weight: bold;
+  border-radius: 10px;
+  padding: 0 4px;
+}
+
+.soldier-record[data-troop-allegiance="davion"] [slot="troop-number"] {
+  background-color: red;
+}
+
+.soldier-record[data-troop-allegiance="liao"] [slot="troop-number"] {
+  background-color: green;
+}
+
+.soldier-record.selected {
+  background-color: khaki;
+}
+
+.soldier-record.movement-ended {
+  background-color: none;
+  opacity: 0.5;
+}
+
+.wall {
+  fill: none;
+  stroke: red;
+  stroke-width: 7px;
+  opacity: 0.7;
+}
+
+#asterisk {
+  font-size: 30;
+}
+
+img.logo {
+  width: 100px;
+  margin: 0 auto;
+  display: block;
+}
+
+#turn-count[data-update="0"] span.inning-bottom {
+  display: none;
+}
+
+#turn-count[data-update="1"] span.inning-top {
+  display: none;
+}
+
+@media (width >= 1800px) {
+  #record-sheet {
+    flex-direction: row;
+    /* gap: 2px; */
+  }
+
+  #record-sheet > div > p {
+    margin-top: 0;
+  }
+
+  #record-sheet > div {
+    /* max-height: unset; */
+    overflow-y: unset;
+    height: min-content;
+  }
+
+  #record-sheet div:last-of-type {
+    margin-top: 0;
+  }
+
+  #record-sheet > div:first-of-type > div {
+    /* margin-left: 1px; */
+    margin-right: 1px;
+  }
+
+  #record-sheet > div:last-of-type > div {
+    margin-left: 1px;
+    /* margin-right: 1px; */
+  }
+}
+\ No newline at end of file
diff --git a/src/index.js b/src/index.js
new file mode 100644
index 0000000..66e554f
--- /dev/null
+++ b/src/index.js
@@ -0,0 +1,1118 @@
+function isEven(n) {
+  return n % 2 === 0;
+}
+
+function radToDeg(radians) {
+  return radians * 180 / Math.PI;
+}
+
+function calculateAngle(xDiff, yDiff) {
+  yDiff = -yDiff;
+  let angle = Math.abs(Math.atan(yDiff / xDiff));
+
+  if (xDiff < 0 && yDiff > 0) {
+    angle = Math.PI - angle;
+  } else if (xDiff < 0 && yDiff < 0) {
+    angle = Math.PI + angle;
+  } else if (xDiff > 0 && yDiff < 0) {
+    angle = 2 * Math.PI - angle;
+  }
+
+  return angle;
+}
+
+function edgePoint(x1, y1, x2, y2, maxX, maxY) {
+  let pointCoords,
+      xDiff = x2 - x1,
+      yDiff = y2 - y1,
+      xIntercept = y => (y - y1) * xDiff / yDiff + x1,
+      yIntercept = x => (x - x1) * yDiff / xDiff + y1;
+
+  if (xDiff > 0 && yDiff > 0) {
+    let x = xIntercept(maxY);
+
+    pointCoords = x <= maxX ? [x, maxY] : [maxX, yIntercept(maxX)];
+  } else if (xDiff > 0 && yDiff < 0) {
+    let y = yIntercept(maxX);
+
+    pointCoords = y >= 0 ? [maxX, y] : [xIntercept(0), 0];
+  } else if (xDiff < 0 && yDiff < 0) {
+    let x = xIntercept(0);
+
+    pointCoords = x >= 0 ? [x, 0] : [0, yIntercept(0)];
+  } else {
+    let y = yIntercept(0);
+
+    pointCoords = y <= maxY ? [0, y] : [xIntercept(maxY), maxY];
+  }
+
+  return pointCoords;
+}
+
+function evenr_to_axial(x, y) {
+  return {q: x - (y + (y & 1)) / 2, r: y};
+}
+
+function axial_to_evenr(q, r) {
+  return {x: q + (r + (r & 1)) / 2, y: r};
+}
+
+function axial_distance(q1, r1, q2, r2) {
+  return (Math.abs(q1 - q2) + Math.abs(q1 + r1 - q2 - r2) + Math.abs(r1 - r2)) / 2;
+}
+
+function offset_distance(x1, y1, x2, y2) {
+  let { q: q1, r: r1 } = evenr_to_axial(x1, y1),
+      { q: q2, r: r2 } = evenr_to_axial(x2, y2);
+
+  return axial_distance(q1, r1, q2, r2);
+}
+
+function cube_to_axial(q, r, s) {
+  return { q: q, r: r };
+}
+
+function axial_to_cube(q, r) {
+  return { q: q, r: r, s: -q - r};
+}
+
+function cube_round(q, r, s) {
+  rQ = Math.round(q);
+  rR = Math.round(r);
+  rS = Math.round(s);
+
+  let q_diff = Math.abs(rQ - q),
+      r_diff = Math.abs(rR - r),
+      s_diff = Math.abs(rS - s);
+
+  if (q_diff > r_diff && q_diff > s_diff) {
+    rQ = -rR - rS;
+  } else if (r_diff > s_diff) {
+    rR = -rQ - rS;
+  } else {
+    rS = -rQ - rR;
+  }
+
+  return {q: rQ, r: rR, s: rS};
+}
+
+function axial_round(q, r) {
+  let cube = axial_to_cube(q, r),
+      round = cube_round(cube.q, cube.r, cube.s),
+      axial = cube_to_axial(round.q, round.r, round.s);
+
+  return {q: axial.q, r: axial.r};
+}
+
+function lerp(a, b, t) {
+  return a + (b - a) * t;
+}
+
+function axial_lerp(q1, r1, q2, r2, t) {
+  return { q: lerp(q1, q2, t), r: lerp(r1, r2, t) };
+}
+
+function linedraw(x1, y1, x2, y2) {
+  let axial1 = evenr_to_axial(x1, y1),
+      axial2 = evenr_to_axial(x2, y2),
+      n = offset_distance(x1, y1, x2, y2),
+      results = [];
+
+  for (let i = 0; i <= n; i++) {
+    let lerp = axial_lerp(axial1.q, axial1.r, axial2.q, axial2.r, 1.0 / n * i),
+        round = axial_round(lerp.q, lerp.r),
+        { x, y } = axial_to_evenr(round.q, round.r);
+
+    results.push([x, y]);
+  }
+
+  return results;
+}
+
+window.addEventListener('load', () => {
+  const svgns = "http://www.w3.org/2000/svg",
+        // svg = document.querySelector('svg'),
+        svg = document.querySelector('object').contentDocument.querySelector('svg'),
+        hex = svg.querySelector('#point'),
+        ptGrp = svg.querySelector('#points'),
+        cntrGrp = svg.querySelector('#counters'),
+        settingsPanel = document.getElementById('panel'),
+        recordSheetVisibility = document.querySelector('#content input[type="checkbox"].visible');
+
+  const q = s => document.querySelector(s),
+        qA = s => document.querySelectorAll(s);
+
+  const { x: VIEWBOX_X, y: VIEWBOX_Y, width: VIEWBOX_WIDTH, height: VIEWBOX_HEIGHT } =
+    svg.viewBox.baseVal;
+
+  const COLUMN_COUNT = 33,
+        ROW_COUNT = 51,
+  // const COLUMN_COUNT = 20,
+  //       ROW_COUNT = 20,
+        HORZ_POINT_DISTANCE = 1.005,
+        VERT_POINT_DISTANCE = Math.sqrt(3) * HORZ_POINT_DISTANCE / 2,
+        ALTERNATING_OFFSET = HORZ_POINT_DISTANCE / 2,
+        CIRCUMRADIUS = Math.max(...[...new Set(Object.values(hex.points).flatMap(({x, y}) => [x, y]))]),
+        INRADIUS = CIRCUMRADIUS * Math.sqrt(3) / 2,
+        [COLUMNS, ROWS] = [COLUMN_COUNT, ROW_COUNT].map(n => [...Array(n).keys()]),
+        POINTS = ROWS.map(y => COLUMNS.map(x => [x, y]));
+
+  const FIRING_ARC_SIZE = {
+          'small': Math.atan(HORZ_POINT_DISTANCE / (6 * VERT_POINT_DISTANCE)),
+          'medium': Math.atan((HORZ_POINT_DISTANCE / 2) / VERT_POINT_DISTANCE),
+          'large': Math.atan((21 * HORZ_POINT_DISTANCE) / (6 * VERT_POINT_DISTANCE))
+        };
+
+  function positionFiringArc(e) {
+    let activeFiringArc = svg.querySelector('polygon.firing-arc.active');
+
+    // TODO: handle exactly horizontal and vertical lines
+
+    if (activeFiringArc) {
+      let activeFiringArcOutline = svg.querySelector(`#lines polygon[data-troop-number="${activeFiringArc.dataset.troopNumber}"][data-troop-allegiance="${activeFiringArc.dataset.troopAllegiance}"]`);
+          board = svg.querySelector('#image-maps'),
+          { width, height } = board.getBBox(),
+          pt = new DOMPoint(e.clientX, e.clientY),
+          { x: pointerX, y: pointerY }  = pt.matrixTransform(board.getScreenCTM().inverse()),
+          [maxXpx, maxYpx] = [width, height],
+          {x: x1px, y: y1px} = activeFiringArc.points[0];
+
+      let [x2px, y2px] = [
+        pointerX / width * maxXpx,
+        pointerY / height * maxYpx
+      ];
+
+      let xDiff = x2px - x1px;
+      let yDiff = y2px - y1px;
+      let angle = calculateAngle(xDiff, yDiff);
+
+      let arcAngle = FIRING_ARC_SIZE[activeFiringArc.dataset.size];
+      let distance = Math.sqrt((x2px - x1px)**2 + (y2px - y1px)**2);
+      let yDelta = distance * Math.cos(angle) * Math.tan(arcAngle);
+      let xDelta = distance * Math.sin(angle) * Math.tan(arcAngle);
+
+      let [newY1, newX1] = [y2px + yDelta, x2px + xDelta];
+      let [newY2, newX2] = [y2px - yDelta, x2px - xDelta];
+
+      [newX1, newY1] = edgePoint(x1px, y1px, newX1, newY1, maxXpx, maxYpx);
+      [newX2, newY2] = edgePoint(x1px, y1px, newX2, newY2, maxXpx, maxYpx);
+
+      let oppositeEdgeConditions = [
+        newX1 == 0 && newX2 == maxXpx,
+        newX2 == 0 && newX1 == maxXpx,
+        newY1 == 0 && newY2 == maxYpx,
+        newY2 == 0 && newY1 == maxYpx
+      ]
+
+      let orthogonalEdgeConditions = [
+        (newX1 == 0 || newX1 == maxXpx) && (newY2 == 0 || newY2 == maxYpx),
+        (newX2 == 0 || newX2 == maxXpx) && (newY1 == 0 || newY1 == maxYpx),
+      ]
+
+      let points;
+
+      if (oppositeEdgeConditions.some(e => e)) {
+        let cornerPoints;
+
+        if (xDiff > 0 && yDiff > 0) {
+          if ((newY1 == 0 && newY2 == maxYpx) || (newY1 == maxYpx && newY2 == 0)) {
+            cornerPoints = [[maxXpx, 0], [maxXpx, maxYpx]];
+          } else {
+            cornerPoints = [[maxXpx, maxYpx], [0, maxYpx]];
+          }
+        } else if (xDiff > 0 && yDiff < 0) {
+          if ((newY1 == 0 && newY2 == maxYpx) || (newY1 == maxYpx && newY2 == 0)) {
+            cornerPoints = [[maxXpx, 0], [maxXpx, maxYpx]];
+          } else {
+            cornerPoints = [[0, 0], [maxXpx, 0]];
+          }
+
+        } else if (xDiff < 0 && yDiff > 0) {
+          if ((newY1 == 0 && newY2 == maxYpx) || (newY1 == maxYpx && newY2 == 0)) {
+            cornerPoints = [[0, maxYpx], [0, 0]];
+          } else {
+            cornerPoints = [[maxXpx, maxYpx], [0, maxYpx]];
+          }
+
+        } else {
+          if ((newY1 == 0 && newY2 == maxYpx) || (newY1 == maxYpx && newY2 == 0)) {
+            cornerPoints = [[0, maxYpx], [0, 0]];
+          } else {
+            cornerPoints = [[0, 0], [maxXpx, 0]];
+          }
+
+        }
+        points = `${x1px},${y1px} ${newX1},${newY1} ${cornerPoints[1]} ${cornerPoints[0]} ${newX2},${newY2}`;
+      } else if (orthogonalEdgeConditions.some(e => e)) {
+        let cornerPoints = [];
+        let cp1, cp2;
+
+        if (newX1 == 0 || newX1 == maxXpx) {
+          cp1 = [newX1, yDiff > 0 ? maxYpx : 0];
+        } else {
+          cp1 = [xDiff > 0 ? maxXpx : 0, newY1];
+        }
+
+        if (newX2 == 0 || newX2 == maxXpx) {
+          cp2 = [newX2, yDiff > 0 ? maxYpx : 0];
+        } else {
+          cp2 = [xDiff > 0 ? maxXpx : 0, newY2];
+        }
+
+        if (cp1[0] == cp2[0] && cp1[1] == cp2[1]) {
+          cornerPoints.push(cp1);
+        } else {
+          cornerPoints.push(cp1);
+          cornerPoints.push([xDiff > 0 ? maxXpx : 0, yDiff > 0 ? maxYpx : 0])
+          cornerPoints.push(cp2);
+        }
+
+        points = `${x1px},${y1px} ${newX1},${newY1} ${cornerPoints.join(' ')} ${newX2},${newY2}`;
+      } else {
+        points = `${x1px},${y1px} ${newX1},${newY1} ${newX2},${newY2}`;
+      }
+
+      activeFiringArcOutline.setAttributeNS(null, 'points', points);
+      activeFiringArc.setAttributeNS(null, 'points', points);
+    }
+  }
+
+  let prevVb = localStorage.getItem('viewBox');
+
+  if (prevVb) {
+    svg.setAttributeNS(null, 'viewBox', prevVb);
+  }
+
+  let info = document.getElementById('status');
+
+  // Object.values(settingsPanel.querySelectorAll('fieldset')).forEach(fieldset => {
+  //   const identityMtx = [1, 0, 0, 1, 0, 0];
+  //   const target = document.getElementById(fieldset.name);
+  //   const transform = getComputedStyle(target).transform.match(/-?\d+\.?\d*/g) || identityMtx;
+  //   const inputs = fieldset.querySelectorAll('input');
+
+  //   if (transform) {
+  //     const [a, b, c, d, e, f] = transform.map(n => parseFloat(n));
+
+  //     // a c e
+  //     // b d f
+
+  //     const scaleX = Math.sqrt(a**2 + c**2);
+  //     const scaleY = Math.sqrt(b**2 + d**2);
+
+  //     let values = {
+  //       scaleX: Math.round(scaleX * 1000) / 1000,
+  //       scaleY: Math.round(scaleY * 1000) / 1000,
+  //       translateX: e,
+  //       translateY: f,
+  //       rotate: Math.round(radToDeg((Math.acos(a / scaleX) + Math.asin(b / scaleY)) / 2) * 10) / 10
+  //     }
+
+  //     inputs.forEach(input => input.value = values[input.name]);
+  //   }
+
+  //   inputs.forEach(input => {
+  //     input.addEventListener('pointerenter', e => e.target.focus());
+
+  //     input.addEventListener('input', e => {
+  //       let { translateX, translateY, rotate, scaleX, scaleY } =
+  //         Object.values(inputs).reduce((acc, input) => {
+  //           acc[input.name] = input.value;
+  //           return acc;
+  //         }, {});
+
+  //       let transform = `translate(${translateX}px, ${translateY}px) rotate(${rotate}deg) scale(${scaleX}, ${scaleY})`;
+  //       target.style.transform = transform;
+  //     });
+
+  //     input.addEventListener('pointerleave', () => document.activeElement.blur());
+  //   });
+  // });
+
+  const grid = svg.querySelector('#grid');
+
+  const Counter = new function() {
+    let container = ptGrp,
+        selectedClass = 'selected',
+
+        dataSelector = function(troopNumber, allegiance) {
+          return `[data-troop-number="${troopNumber}"][data-troop-allegiance="${allegiance}"]`;
+        },
+
+        selector = function(troopNumber, allegiance) {
+          return `use.counter${dataSelector(troopNumber, allegiance)}`;
+        },
+
+        position = function(x, y) {
+          return `g[data-x="${x}"][data-y="${y}"]`;
+        },
+
+        counterPosition = function(x, y) {
+          return `use.counter[data-x="${x}"][data-x="${y}"]`;
+        },
+
+        traceSelector = function(troopNumber, allegiance) {
+          return `polyline.move-trace${dataSelector(troopNumber, allegiance)}`;
+        },
+
+        clickClone = function() {
+          let { troopNumber, troopAllegiance, x, y } = this.dataset,
+              [xAttr, yAttr] = this.parentElement.getAttribute('transform').match(/-?\d+\.?\d*/g);
+
+          if (Counter.isSelected(troopNumber, troopAllegiance)) {
+            let trace = grid.querySelector(traceSelector(troopNumber, troopAllegiance)),
+                points = trace.getAttribute('points').split(' ');
+
+            if (`${xAttr},${yAttr}` == points.at(0)) {
+              let counter = Counter.get(troopNumber, troopAllegiance);
+              counter.setAttributeNS(null, 'x', 0);
+              counter.setAttributeNS(null, 'y', 0);
+              counter.dataset.x = x;
+              counter.dataset.y = y;
+              container.querySelector(`g[data-x="${x}"][data-y="${y}"]`).appendChild(counter);
+
+              Counter.removeClones(this);
+              trace.remove();
+            } else {
+              points = points.filter(p => p != `${xAttr},${yAttr}`).join(' ');
+
+              trace.setAttributeNS(null, 'points', points);
+            }
+
+            this.remove();
+          }
+        },
+
+        pointerOver = function() {
+          let { troopNumber, troopAllegiance } = this.dataset;
+              cp = svg.querySelector(`#clip-path-${troopAllegiance}-${troopNumber}`);
+
+          if (cp) {
+            cp.style.display = 'none';
+          }
+        },
+
+        pointerOut = function() {
+          let { troopNumber, troopAllegiance } = this.dataset;
+              cp = svg.querySelector(`#clip-path-${troopAllegiance}-${troopNumber}`);
+
+          if (cp) {
+            let isVisible =
+              document
+                .getElementById('toggle-firing-arc-vis')
+                .querySelector(`input[data-allegiance="${troopAllegiance}"]`)
+                .checked;
+
+            cp.style.display = isVisible ? 'none' : '';
+          }
+        },
+
+        click = function() {
+          if (this.classList.contains(selectedClass)) {
+            let { troopNumber, troopAllegiance } = this.dataset,
+                trace = grid.querySelector(traceSelector(troopNumber, troopAllegiance));
+
+            if (trace) {
+              let points = trace.getAttribute('points').split(' '),
+                  [xAttr, yAttr] = points.at(-2).split(','),
+                  clone = container.querySelector(`g[transform="translate(${xAttr} ${yAttr})"] ${dataSelector(troopNumber, troopAllegiance)}.clone`);
+
+              points.pop();
+
+              if (points.length >= 2) {
+                trace.setAttributeNS(null, 'points', points.join(' '));
+              } else {
+                trace.remove();
+              }
+
+              this.setAttributeNS(null, 'x', clone.getAttribute('x'));
+              this.setAttributeNS(null, 'y', clone.getAttribute('y'));
+              this.dataset.x = clone.dataset.x;
+              this.dataset.y = clone.dataset.y;
+
+              container.querySelector(`g[data-x="${this.dataset.x}"][data-y="${this.dataset.y}"]`).appendChild(this);
+
+              clone.remove();
+            }
+          }
+        },
+
+        dblClick = function() {
+          if (this.classList.contains(selectedClass)) {
+            let { troopNumber, troopAllegiance } = this.dataset,
+                trace = grid.querySelector(traceSelector(troopNumber, troopAllegiance));
+
+            if (!trace) {
+              Counter.remove(this);
+              svg.querySelectorAll(`#firing-arcs ${dataSelector(troopNumber, troopAllegiance)}`).forEach(el => el.remove());
+            }
+          }
+        };
+
+    this.get = function(troopNumber, allegiance) {
+      return container.querySelector(`${selector(troopNumber, allegiance)}:not(.clone)`);
+    };
+
+    this.getAt = function(x, y) {
+      return container.querySelector(`${counterPosition(x, y)}:not(.clone)`);
+    };
+
+    this.select = function({ dataset: { troopNumber, troopAllegiance }}) {
+      this.unSelect();
+
+      let counter = container.querySelector(`${selector(troopNumber, troopAllegiance)}:not(.clone)`);
+
+      if (counter) {
+        counter.classList.add(selectedClass);
+      }
+    };
+
+    this.unSelect = function() {
+      let selected = container.querySelector(`.${selectedClass}`);
+
+      if (selected) {
+        let { troopNumber, troopAllegiance } = selected.dataset;
+
+        selected.classList.remove(selectedClass);
+        selected.removeAttribute('style');
+
+        container
+          .querySelectorAll(`${selector(troopNumber, troopAllegiance)}.clone`)
+          .forEach(el => el.removeAttribute('style'));
+      }
+    };
+
+    this.isSelected = function(troopNumber, allegiance) {
+      return container.querySelector(`${selector(troopNumber, allegiance)}.${selectedClass}`) !== null;
+    };
+
+    this.place = function({ dataset: { troopNumber, troopAllegiance }}, point) {
+      let counter, points,
+          counterNodeList = container.querySelectorAll(selector(troopNumber, troopAllegiance));
+
+      if (counterNodeList.length > 0) {
+        let counters = Array.from(counterNodeList),
+            original = counters.find(el => !el.classList.contains('clone')),
+            trace = grid.querySelector(traceSelector(troopNumber, troopAllegiance));
+
+        // let ptContainers = counters.map(c => ptGrp.querySelector(position(c.dataset.x, c.dataset.y)));
+
+        let current = {
+              x: point.dataset.x,
+              y: point.dataset.y,
+              // xAttr: point.getAttribute('x'),
+              // yAttr: point.getAttribute('y'),
+              transform: container.querySelector(position(point.dataset.x, point.dataset.y)).getAttribute('transform')
+            },
+            previous = {
+              x: original.dataset.x,
+              y: original.dataset.y,
+              // xAttr: original.getAttribute('x'),
+              // yAttr: original.getAttribute('y'),
+              transform: container.querySelector(position(original.dataset.x, original.dataset.y)).getAttribute('transform')
+            };
+
+        [current.xAttr, current.yAttr] = current.transform.match(/-?\d+\.?\d*/g);
+        [previous.xAttr, previous.yAttr] = previous.transform.match(/-?\d+\.?\d*/g);
+
+        counter = original.cloneNode();
+        counter.setAttributeNS(null, 'x', 0);
+        counter.setAttributeNS(null, 'y', 0);
+        counter.dataset.x = previous.x;
+        counter.dataset.y = previous.y;
+        counter.classList.remove(selectedClass);
+        counter.classList.add('clone');
+
+        original.setAttributeNS(null, 'x', 0);
+        original.setAttributeNS(null, 'y', 0);
+        original.dataset.x = current.x;
+        original.dataset.y = current.y;
+
+        container.querySelector(`g[data-x="${current.x}"][data-y="${current.y}"]`).appendChild(original);
+
+        if (!trace) {
+          trace = document.createElementNS(svgns, 'polyline');
+          points = `${previous.xAttr},${previous.yAttr} ${current.xAttr},${current.yAttr}`;
+
+          trace.dataset.troopNumber = troopNumber;
+          trace.dataset.troopAllegiance = troopAllegiance;
+          trace.classList.add('move-trace');
+
+          grid.prepend(trace)
+          // container.prepend(trace);
+        } else {
+          points = `${trace.getAttribute('points')} ${current.xAttr},${current.yAttr}`;
+        }
+
+        trace.setAttributeNS(null, 'points', points);
+        counter.addEventListener('click', clickClone);
+      } else {
+        counter = document.createElementNS(svgns, 'use'),
+
+        counter.setAttributeNS(null, 'href', `#${troopAllegiance}-${troopNumber}`);
+        counter.classList.add('counter', 'selected');
+        counter.setAttributeNS(null, 'x', point.getAttribute('x'));
+        counter.setAttributeNS(null, 'y', point.getAttribute('y'));
+        counter.dataset.troopNumber = troopNumber;
+        counter.dataset.troopAllegiance = troopAllegiance;
+        counter.dataset.x = point.dataset.x;
+        counter.dataset.y = point.dataset.y;
+        counter.style.pointerEvents = 'auto';
+
+        counter.addEventListener('pointerover', pointerOver);
+        counter.addEventListener('pointerout', pointerOut);
+        counter.addEventListener('click', click);
+        counter.addEventListener('dblclick', dblClick);
+      }
+
+      container.querySelector(`g[data-x="${counter.dataset.x}"][data-y="${counter.dataset.y}"]`).appendChild(counter);
+
+      // container.appendChild(counter);
+    };
+
+    this.remove = function({ dataset: { troopNumber, troopAllegiance }}) {
+      container
+        .querySelectorAll(dataSelector(troopNumber, troopAllegiance))
+        .forEach(el => el.remove());
+    };
+
+    this.removeClones = function({ dataset: { troopNumber, troopAllegiance }}) {
+      container
+        .querySelectorAll(`${selector(troopNumber, troopAllegiance)}.clone`)
+        .forEach(el => el.remove());
+    };
+
+    this.endMove = function(el) {
+      let { troopNumber, troopAllegiance } = el.dataset;
+      let trace = grid.querySelector(traceSelector(troopNumber, troopAllegiance));
+
+      if (trace) {
+        trace.remove();
+      }
+
+      Counter.removeClones(el);
+    };
+
+    this.hasProne = function(troopNumber, troopAllegiance) {
+      let selector = `g#${troopAllegiance}-${troopNumber} use[href="#counter-prone"]`;
+
+      return !!svg.querySelector(selector);
+    };
+  };
+
+  const RecordSheet = new function() {
+    let clipUnclippedFiringArcs = function() {
+      let unclipped = svg.querySelectorAll('#firing-arcs polygon:not([clip-path])');
+
+      unclipped.forEach(el => {
+        let { troopNumber, troopAllegiance } = el.dataset,
+            clipPathId = `clip-path-${troopAllegiance}-${troopNumber}`;
+
+        let isVisible =
+          document
+            .getElementById('toggle-firing-arc-vis')
+            .querySelector(`input[data-allegiance="${troopAllegiance}"]`)
+            .checked;
+
+        if (isVisible) {
+          svg.querySelector(`#${clipPathId}`).style.display = 'none';
+        }
+
+        el.setAttributeNS(null, 'clip-path', `url(#${clipPathId})`);
+      });
+    };
+
+    this.unSelect = function() {
+      let selected = this.getSelected();
+
+      if (selected) {
+        selected.classList.remove('selected');
+        document.getElementById('toggle-prone-counter').checked = false;
+      }
+
+      clipUnclippedFiringArcs();
+      Counter.unSelect();
+    };
+
+    this.getSelected = function() {
+      return document.querySelector('.soldier-record.selected');
+    };
+
+    this.select = function(el) {
+      let { troopNumber, troopAllegiance } = el.dataset,
+          proneStatus = Counter.hasProne(troopNumber, troopAllegiance);
+
+      RecordSheet.unSelect();
+      document.querySelector(`#record-sheet .soldier-record[data-troop-number="${troopNumber}"][data-troop-allegiance="${troopAllegiance}"]`).classList.add('selected');
+      document.getElementById('toggle-prone-counter').checked = proneStatus;
+      existingArcs = svg.querySelectorAll(`#firing-arcs polygon[data-troop-number="${troopNumber}"][data-troop-allegiance="${troopAllegiance}"]`);
+      existingArcs.forEach(el => el.removeAttribute('clip-path'));
+    };
+  };
+
+  const SightLine = new function() {
+    this.clear = function() {
+      let sl = grid.querySelector('line.sight-line');
+      let target = grid.querySelector(`use[href="#point"].sight-line-target`);
+
+      if (sl) {
+        sl.remove();
+      }
+
+      if (target) {
+        target.classList.remove('sight-line-target');
+      }
+
+      this.clearHexes();
+    };
+
+    this.clearHexes = function() {
+      ptGrp.querySelectorAll('use[href="#point"].active').forEach(el => el.classList.remove('active'));
+    };
+
+    this.draw = function(x1, y1, x2, y2) {
+      let source = ptGrp.querySelector(`g[data-x="${x1}"][data-y="${y1}"]`),
+          target = ptGrp.querySelector(`g[data-x="${x2}"][data-y="${y2}"]`),
+
+          [slX1, slY1] = source.getAttribute('transform').match(/-?\d+\.?\d*/g),
+          [slX2, slY2] = target.getAttribute('transform').match(/-?\d+\.?\d*/g),
+
+          sightLine = document.createElementNS(svgns, 'line');
+
+      sightLine.classList.add('sight-line');
+      sightLine.classList.add('active');
+      sightLine.setAttributeNS(null, 'x1', slX1);
+      sightLine.setAttributeNS(null, 'y1', slY1);
+      sightLine.setAttributeNS(null, 'x2', slX2);
+      sightLine.setAttributeNS(null, 'y2', slY2);
+
+      grid.appendChild(sightLine);
+
+      let coords = [x1, y1, x2, y2];
+      this.drawHexes(...coords);
+    };
+
+    this.drawHexes = function(...coords) {
+      this.clearHexes()
+
+      info.querySelector('#hex-count').textContent = offset_distance(...coords);
+      info.style.display = 'block';
+
+      let lineCoords = linedraw(...coords);
+      lineCoords.shift();
+      let s = lineCoords.map(([x, y]) => `use[href="#point"][data-x="${x}"][data-y="${y}"]`).join(', ');
+
+      ptGrp.querySelectorAll(s).forEach(p => p.classList.add('active'));
+    };
+  }
+
+  POINTS.forEach((row, index) => row.forEach(([x, y]) => {
+    let group = svg.querySelector(`g[data-x="${x}"][data-y="${y}"]`);
+    let point = group.querySelector(`use[href="#point"]`);
+
+    group.addEventListener('pointerout', e => {
+      group.classList.remove('hover');
+    });
+
+    group.addEventListener('click', e => {
+      let cl = e.target.classList,
+          sl = grid.querySelector('line.sight-line'),
+          targetIsSomeOtherUnitCounter = cl.contains('counter') && !cl.contains('clone'),
+          selected = RecordSheet.getSelected();
+
+      // maybe we should start with, "are we clicking on a counter?"
+      if (sl) {
+        let { troopNumber: sTn, troopAllegiance: sTa} = selected.dataset,
+            { troopNumber: tTn, troopAllegiance: tTa} = e.target.dataset,
+            sightLineInLockedPosition = !sl.classList.contains('active'),
+            targetIsCounterOrCloneOfSelected = cl.contains('counter') && sTn == tTn && sTa == tTa;
+
+        if (sightLineInLockedPosition && targetIsCounterOrCloneOfSelected) {
+          let counterParent = Counter.get(tTn, tTa).parentElement,
+              [x, y] = counterParent.getAttribute('transform').match(/-?\d+\.?\d*/g),
+              target = ptGrp.querySelector(`g[transform="translate(${sl.getAttribute('x2')} ${sl.getAttribute('y2')})"]`),
+              { x: x1, y: y1 } = counterParent.dataset,
+              { x: x2, y: y2 } = target.dataset;
+
+          sl.setAttributeNS(null, 'x1', x);
+          sl.setAttributeNS(null, 'y1', y);
+
+          SightLine.drawHexes(...[x1, y1, x2, y2].map(n => parseInt(n)));
+        } else if (targetIsCounterOrCloneOfSelected || targetIsSomeOtherUnitCounter) {
+          if (targetIsSomeOtherUnitCounter) {
+            RecordSheet.select(e.target);
+            Counter.select(e.target);
+          }
+
+          SightLine.clear();
+        }
+      } else if (targetIsSomeOtherUnitCounter) {
+        RecordSheet.select(e.target);
+        Counter.select(e.target);
+      }
+    });
+
+    point.addEventListener('click', e => {
+      let selectedSoldier = document.querySelector('.soldier-record.selected');
+      let existingOccupant =
+        svg.querySelector(`.counter[data-x="${point.dataset.x}"][data-y="${point.dataset.y}"]`);
+
+      if (selectedSoldier && !existingOccupant) {
+        let sl = svg.querySelector('.sight-line');
+
+        Counter.place(selectedSoldier, point);
+
+        if (sl) {
+          if (sl.classList.contains('active')) {
+            SightLine.clear();
+          } else {
+            let [x, y] = point.parentElement.getAttribute('transform').match(/-?\d+\.?\d*/g),
+                target = ptGrp.querySelector(`g[transform="translate(${sl.getAttribute('x2')} ${sl.getAttribute('y2')})"]`),
+                { x: x1, y: y1 } = point.dataset,
+                { x: x2, y: y2 } = target.dataset;
+
+            sl.setAttributeNS(null, 'x1', x);
+            sl.setAttributeNS(null, 'y1', y);
+
+            SightLine.drawHexes(...[x1, y1, x2, y2].map(n => parseInt(n)));
+          }
+        }
+      }
+    });
+
+    group.addEventListener('contextmenu', e => {
+      e.preventDefault();
+
+      let sl = svg.querySelector('.sight-line');
+
+      if (sl) {
+        sl.classList.toggle('active');
+
+        if (sl.classList.contains('active')) {
+          SightLine.clear();
+        } else {
+          group.querySelector(`use[href="#point"]`).classList.add('sight-line-target');
+        }
+
+        group.dispatchEvent(new MouseEvent('pointerover'));
+      }
+    });
+
+    group.addEventListener('pointerover', e => {
+      group.classList.add('hover');
+
+      let selected = RecordSheet.getSelected();
+
+      if (selected) {
+        let { troopNumber: tn, troopAllegiance: ta } = selected.dataset,
+            counter = Counter.get(tn, ta),
+            sl = svg.querySelector('line.sight-line');
+
+        if (counter && (!sl || sl.classList.contains('active'))) {
+          if (counter.dataset.x !== e.target.dataset.x || counter.dataset.y !== e.target.dataset.y) {
+            let coords = [
+              counter.dataset.x,
+              counter.dataset.y,
+              e.target.dataset.x,
+              e.target.dataset.y
+            ].map(n => parseInt(n));
+
+            SightLine.draw(...coords);
+          }
+        }
+      }
+    });
+
+    group.addEventListener('pointerout', e => {
+      let sl = svg.querySelector('.sight-line.active');
+
+      if (sl && sl.classList.contains('active')) {
+        SightLine.clear();
+      }
+    });
+
+    // ptGrp.appendChild(document.createTextNode('\n            '));
+    // ptGrp.appendChild(group);
+  }));
+
+  document.querySelectorAll('.soldier-record').forEach(el =>
+    el.addEventListener('click', e => {
+      if (el.classList.contains('selected')) {
+        el.classList.remove('selected');
+        RecordSheet.unSelect();
+        Counter.unSelect();
+      } else {
+        RecordSheet.select(el);
+        Counter.select(el);
+      }
+
+      SightLine.clear();
+    })
+  );
+
+  // document.querySelector('#grid').addEventListener('click', e => {
+  //   let point = ptGrp.querySelector(`[data-x="${e.target.dataset.x}"][data-y="${e.target.dataset.y}"]`),
+  //       sl = svg.querySelector('.sight-line');
+
+  //   if (sl) {
+  //     sl.classList.add('active');
+  //     point.dispatchEvent(new MouseEvent('mouseout'));
+  //     point.dispatchEvent(new MouseEvent('pointerover'));
+  //   }
+  // });
+
+  document.querySelectorAll('.end-move').forEach(el => el.addEventListener('click', e => {
+    let selected = RecordSheet.getSelected();
+
+    if (selected) {
+      Counter.endMove(selected);
+      RecordSheet.unSelect();
+      selected.classList.toggle('movement-ended');
+    }
+  }));
+
+  document.querySelectorAll('.end-turn').forEach(el =>
+    el.addEventListener('click', ({ target: { dataset: { allegiance }}}) => {
+      let dataSelector = `[data-troop-allegiance="${allegiance}"]`,
+          records = Array.from(qA(`.soldier-record${dataSelector}`)),
+          turnCounter = document.getElementById('turn-count'),
+          { textContent: count, dataset: { update }} = turnCounter;
+
+      el.setAttribute('disabled', '');
+
+      document
+        .querySelector(`button.end-turn:not([data-allegiance="${allegiance}"])`)
+        .removeAttribute('disabled');
+
+      if (update == '1') {
+        turnCounter.children.namedItem('count').textContent++
+        turnCounter.dataset.update = '0';
+      } else {
+        turnCounter.dataset.update = '1';
+      }
+
+      qA(`#firing-arcs ${dataSelector}`).forEach(el => el.remove());
+
+      records
+        .sort((el1, el2) => el1.dataset.troopNumber > el2.dataset.troopNumber)
+        .forEach(el => el.classList.remove('movement-ended'));
+
+      RecordSheet.select(records.at(0));
+      Counter.select(records.at(0));
+    })
+  );
+
+  document.querySelectorAll('.set-firing-arc').forEach(el => el.addEventListener('click', e => {
+    let selectedSoldier = document.querySelector('.soldier-record.selected');
+
+    if (selectedSoldier) {
+      let {troopNumber, troopAllegiance} = selectedSoldier.dataset,
+          counter = Counter.get(troopNumber, troopAllegiance);
+
+      let existingArcs = svg.querySelectorAll(
+        `#firing-arcs [data-troop-number="${troopNumber}"][data-troop-allegiance="${troopAllegiance}"]`
+      );
+
+      existingArcs.forEach(el => el.remove());
+
+      if (counter) {
+        let arcLayer = svg.querySelector('#shapes');
+        let outlineLayer = svg.querySelector('#lines');
+        let arcContainer = svg.querySelector('#firing-arcs');
+
+        let [x, y] = counter.parentElement.getAttribute('transform').match(/-?\d+\.?\d*/g);
+
+        const transform = getComputedStyle(grid).transform.match(/-?\d+\.?\d*/g);
+        const pt = new DOMPoint(x, y);
+        const mtx = new DOMMatrix(transform);
+        let tPt = pt.matrixTransform(mtx);
+
+        let pivotPoint = [tPt.x, tPt.y];
+        let firingArc = document.createElementNS(svgns, 'polygon');
+        let firingArcOutline = document.createElementNS(svgns, 'polygon');
+
+        firingArc.classList.add('firing-arc', 'active');
+        firingArc.dataset.troopNumber = troopNumber;
+        firingArc.dataset.troopAllegiance = troopAllegiance;
+        firingArc.dataset.size = e.target.dataset.size;
+        firingArc.setAttributeNS(null, 'points', `${pivotPoint} ${pivotPoint} ${pivotPoint}`);
+
+        firingArcOutline.dataset.troopNumber = troopNumber;
+        firingArcOutline.dataset.troopAllegiance = troopAllegiance;
+        firingArcOutline.setAttributeNS(null, 'points', `${pivotPoint} ${pivotPoint} ${pivotPoint}`);
+
+        let clipShape = document.createElementNS(svgns, 'circle');
+        clipShape.setAttributeNS(null, 'cx', tPt.x);
+        clipShape.setAttributeNS(null, 'cy', tPt.y);
+        clipShape.setAttributeNS(null, 'r', 100);
+
+        let clipPath = document.createElementNS(svgns, 'clipPath');
+        clipPath.setAttributeNS(null, 'id', `clip-path-${troopAllegiance}-${troopNumber}`);
+        clipPath.dataset.troopNumber = troopNumber;
+        clipPath.dataset.troopAllegiance = troopAllegiance;
+        clipPath.appendChild(clipShape);
+
+        arcContainer.appendChild(clipPath);
+        arcLayer.appendChild(firingArc);
+        outlineLayer.appendChild(firingArcOutline);
+
+        let firingArcPlacementListener = e => {
+          svg.querySelectorAll('.firing-arc.active').forEach(el => el.classList.remove('active'));
+          ptGrp.removeAttribute('style');
+          svg.removeEventListener('mousemove', positionFiringArc);
+          firingArc.removeEventListener('click', firingArcPlacementListener);
+          firingArc.removeEventListener('contextmenu', cancelFiringArcPlacement);
+        };
+
+        let cancelFiringArcPlacement = e => {
+          e.preventDefault();
+
+          firingArc.removeEventListener('click', firingArcPlacementListener);
+          firingArc.removeEventListener('contextmenu', cancelFiringArcPlacement);
+
+          let existingArcs = svg.querySelectorAll(
+            `#firing-arcs [data-troop-number="${troopNumber}"][data-troop-allegiance="${troopAllegiance}"]`
+          );
+
+          existingArcs.forEach(el => el.remove());
+
+          ptGrp.removeAttribute('style');
+          svg.removeEventListener('mousemove', positionFiringArc);
+        };
+
+        ptGrp.style.pointerEvents = 'none';
+        svg.addEventListener('mousemove', positionFiringArc);
+        firingArc.addEventListener('click', firingArcPlacementListener);
+        firingArc.addEventListener('contextmenu', cancelFiringArcPlacement);
+      }
+    }
+  }));
+
+  svg.addEventListener('wheel', e => {
+    e.preventDefault();
+
+    const pt = new DOMPoint(e.clientX, e.clientY),
+          svgP = pt.matrixTransform(svg.getScreenCTM().inverse());
+
+    let { x, y, width, height } = svg.viewBox.baseVal,
+
+        widthDelta = width * 0.25,
+        heightDelta = height * 0.25,
+
+        xChange = (svgP.x - x) / width * widthDelta,
+        yChange = (svgP.y - y) / height * heightDelta,
+
+        widthChange = (1 - ((svgP.x - x) / width)) * widthDelta,
+        heightChange = (1 - ((svgP.y - y) / height)) * heightDelta,
+
+        newX = parseInt(e.deltaY < 0 ? x + xChange : x - xChange),
+        newWidth = parseInt(e.deltaY < 0 ? width - xChange - widthChange : width + xChange + widthChange),
+
+        newY = parseInt(e.deltaY < 0 ? y + yChange : y - yChange),
+        newHeight = parseInt(e.deltaY < 0 ? height - yChange - heightChange : height + yChange + heightChange);
+
+    let vb = `${newX} ${newY} ${newWidth} ${newHeight}`
+
+    // TODO attribute change event?
+    localStorage.setItem('viewBox', vb);
+    svg.setAttributeNS(null, 'viewBox', vb);
+  }, { passive: false });
+
+  svg.addEventListener('pointerdown', e => {
+    e.preventDefault();
+
+    const minPanDistanceThreshold = 5;
+
+    let dist, ctm,
+        pan = false,
+        { x, y, width, height } = svg.viewBox.baseVal,
+        startPt = new DOMPoint(e.clientX, e.clientY),
+        movePt = new DOMPoint();
+
+    function pointerMove(e) {
+      movePt.x = e.clientX;
+      movePt.y = e.clientY;
+
+      if (!pan) {
+        dist = Math.sqrt((movePt.x - startPt.x)**2 + (movePt.y - startPt.y)**2);
+
+        if (dist >= minPanDistanceThreshold) {
+          pan = true;
+          svg.setPointerCapture(e.pointerId);
+          startPt.x = e.clientX;
+          startPt.y = e.clientY;
+        }
+      }
+
+      if (pan) {
+        ctm = svg.getScreenCTM().inverse();
+
+        const [svgStartPt, svgMovePt] = [startPt, movePt].map(p => p.matrixTransform(ctm)),
+              moveX = parseInt(svgStartPt.x - svgMovePt.x + x),
+              moveY = parseInt(svgStartPt.y - svgMovePt.y + y);
+
+        let vb = `${moveX} ${moveY} ${width} ${height}`;
+
+        localStorage.setItem('viewBox', vb);
+        svg.setAttributeNS(null, 'viewBox', vb);
+      }
+    }
+
+    function pointerUp(e) {
+      svg.removeEventListener('pointermove', pointerMove);
+      svg.removeEventListener('pointerup', pointerUp);
+    }
+
+    svg.addEventListener('pointermove', pointerMove);
+    svg.addEventListener('pointerup', pointerUp);
+  }, { passive: false });
+
+  recordSheetVisibility.addEventListener('input', e => {
+    let divs = document.querySelectorAll('#content div');
+
+    divs.forEach(d => {
+      if (recordSheetVisibility.checked) {
+        d.style.display = d.id == 'record-sheet' ? 'flex' : 'block';
+      } else {
+        d.style.display = 'none';
+      }
+    });
+  });
+
+  document.querySelectorAll('#toggle-firing-arc-vis input').forEach(el => el.addEventListener('input', e => {
+    let clipPaths = svg.querySelectorAll(`clipPath[data-troop-allegiance="${el.dataset.allegiance}"]`);
+
+    clipPaths.forEach(cp => cp.style.display = el.checked ? 'none' : '');
+  }));
+
+  document.getElementById('toggle-prone-counter').addEventListener('input', function(e) {
+    let selected = RecordSheet.getSelected();
+
+    if (selected) {
+      let template = q(`g#${selected.dataset.troopAllegiance}-${selected.dataset.troopNumber}`);
+
+      if (this.checked) {
+        let counter = document.createElementNS(svgns, 'use');
+        counter.setAttributeNS(null, 'href', '#counter-prone');
+        template.appendChild(counter);
+      } else {
+        template.querySelector('[href="#counter-prone"]').remove();
+      }
+    }
+  });
+
+  function save(filename, data) {
+    const blob = new Blob([data], {type: 'text/csv'});
+    if(window.navigator.msSaveOrOpenBlob) {
+        window.navigator.msSaveBlob(blob, filename);
+    }
+    else{
+        const elem = window.document.createElement('a');
+        elem.href = window.URL.createObjectURL(blob);
+        elem.download = filename;
+        document.body.appendChild(elem);
+        elem.click();
+        document.body.removeChild(elem);
+    }
+  }
+});
+\ No newline at end of file
author	Catalin Mititiuc <Catalin.Mititiuc@gmail.com>	2024-04-11 12:46:26 -0700
committer	Catalin Mititiuc <Catalin.Mititiuc@gmail.com>	2024-04-11 13:15:41 -0700
commit	b192fc0790a4815703afa6ccc782f2b573c64722 (patch)
tree	dcc0f3b3aca30447a1ad71a45d1193aadc92f59d
parent	35a82e94e85c5b4f068e6e4d3d807dfc3c05379d (diff)