From edd881555be93a9d578cc3bd1eeb574b5889361a Mon Sep 17 00:00:00 2001
From: sayalilunkad <slunkad@suse.com>
Date: Thu, 22 Oct 2020 17:13:43 +0200
Subject: [PATCH 1/1] Adding SUSE theme

---
 src/portal/angular.json                       |  13 +-
 .../harbor-shell/harbor-shell.component.html  |  14 +-
 src/portal/src/app/services/theme.ts          |  17 +-
 src/portal/src/css/common.scss                | 109 +++
 src/portal/src/css/suse-theme.scss            |  54 ++
 src/portal/src/images/sign-in-bg.svg          | 648 ++++++++++++++++++
 src/portal/src/index.html                     |   5 +-
 src/portal/src/setting.json                   |   4 +-
 8 files changed, 827 insertions(+), 37 deletions(-)
 create mode 100644 src/portal/src/css/suse-theme.scss
 create mode 100644 src/portal/src/images/sign-in-bg.svg

diff --git a/src/portal/angular.json b/src/portal/angular.json
index 4a7aabfd2..8627c8c03 100644
--- a/src/portal/angular.json
+++ b/src/portal/angular.json
@@ -28,14 +28,9 @@
               "node_modules/swagger-ui/dist/swagger-ui.css",
               "node_modules/prismjs/themes/prism-solarizedlight.css",
               "src/global.scss",
-              {
-                "input": "src/css/dark-theme.scss",
-                "bundleName": "dark-theme",
-                "lazy": true
-              },
-              {
-                "input": "src/css/light-theme.scss",
-                "bundleName": "light-theme",
+               {
+                "input": "src/css/suse-theme.scss",
+                "bundleName": "suse-theme",
                 "lazy": true
               }
             ],
@@ -151,4 +146,4 @@
       "prefix": "app"
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/portal/src/app/base/harbor-shell/harbor-shell.component.html b/src/portal/src/app/base/harbor-shell/harbor-shell.component.html
index 66ed45dc0..0bc65185e 100644
--- a/src/portal/src/app/base/harbor-shell/harbor-shell.component.html
+++ b/src/portal/src/app/base/harbor-shell/harbor-shell.component.html
@@ -85,21 +85,13 @@
                 </clr-vertical-nav-group>
             </div>
             <div class="mb-1">
-                <ng-container *ngFor="let theme of themeArray;let i=index">
-                    <ng-container *ngIf="theme.showStyle === styleMode">
-                        <a clrVerticalNavLink (click)="themeChanged(theme)">
-                            <clr-icon clrVerticalNavIcon size="20" *ngIf="styleMode ==='DARK'" shape="sun"
-                                      class="is-solid"></clr-icon>
-                            <clr-icon clrVerticalNavIcon size="20" *ngIf="styleMode ==='LIGHT'" shape="moon"
-                                      class="is-solid"></clr-icon>
-                            {{ theme.text | translate }}
-                        </a>
-                    </ng-container>
-                </ng-container>
                 <a clrVerticalNavLink routerLinkActive="active" target="_blank" routerLink="/devcenter-api-2.0">
                     <clr-icon shape="network-globe" clrVerticalNavIcon></clr-icon>
                     {{'SIDE_NAV.HARBOR_API_MANAGEMENT' | translate}}
                 </a>
+		<a clrVerticalNavLink routerLinkActive="active" target="_blank" href="https://goharbor.io/">
+                    {{'Powered by Harbor' | translate}}
+                </a>
             </div>
         </clr-vertical-nav>
         <hbr-operation-model *ngIf="isUserExisting"></hbr-operation-model>
diff --git a/src/portal/src/app/services/theme.ts b/src/portal/src/app/services/theme.ts
index 8fa426264..da1aae3d6 100644
--- a/src/portal/src/app/services/theme.ts
+++ b/src/portal/src/app/services/theme.ts
@@ -8,17 +8,10 @@ export interface ThemeInterface {
 
 export const THEME_ARRAY: ThemeInterface[] = [
     {
-        showStyle: "DARK",
-        mode: "LIGHT",
-        text: "APP_TITLE.THEME_LIGHT_TEXT",
-        currentFileName: "dark-theme.css",
-        toggleFileName: "light-theme.css",
-    },
-    {
-        showStyle: "LIGHT",
-        mode: "DARK", // show button icon
-        text: "APP_TITLE.THEME_DARK_TEXT", // show button text
-        currentFileName: "light-theme.css", // loaded current theme file name
-        toggleFileName: "dark-theme.css", // to toggle theme file name
+        showStyle: "SUSE",
+        mode: "SUSE",
+        text: "",
+        currentFileName: "suse-theme.css",
+        toggleFileName: "suse-theme.css",
     }
 ];
diff --git a/src/portal/src/css/common.scss b/src/portal/src/css/common.scss
index fd858d2cd..6bc4efde6 100644
--- a/src/portal/src/css/common.scss
+++ b/src/portal/src/css/common.scss
@@ -219,3 +219,112 @@ hbr-result-tip-histogram {
 clr-header {
   background-color: $header-color;
 }
+
+// SUSE theme specific
+body, html {
+  color: $suse-bc-gray-1000;
+  font-family: $suse-font-family1;
+}
+
+.header .branding .title,
+header .branding .title {
+  font-family: $suse-font-family2;
+  font-size: 14px;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: $suse-font-family2;
+}
+
+a {
+  color: $suse-bc-cerulean-900;
+  &:visited {
+    color: $suse-bc-cerulean-900;
+  }
+}
+
+.harbor-logo {
+  width: 24px !important;
+}
+
+.login-wrapper {
+ background: $suse-login-wrapper-bg !important;
+ .login .title,
+ .login-wrapper .login .trademark {
+    font-family: $suse-font-family2;
+  }
+}
+
+.btn-primary .btn,
+.btn.btn-primary {
+ border-color: $suse-bc-green-500;
+ border-radius: 20px;
+ background-color: $suse-bc-green-500;
+ &:hover {
+    background-color: $suse-bc-green-900;
+ }
+}
+
+.btn.btn-secondary, 
+.btn.btn-secondary-outline {
+  border-color: $suse-bc-green-500;
+  background-color: transparent;
+  color: $suse-bc-green-500;
+  border-radius: 20px;
+  &:hover {
+    border-color: $suse-bc-green-900;
+    background-color: transparent;
+    color: $suse-bc-green-900;
+  }
+  &:disabled {
+    border-color: $suse-bc-gray-500;
+    color: $suse-bc-gray-500;
+    opacity: 0.6;
+  }
+}
+
+.btn.btn-link {
+  color: $suse-bc-green-500;
+  &:active {
+    color: $suse-bc-green-900;
+  }
+  &:hover {
+    color: $suse-bc-green-900;
+  }
+
+}
+.btn.btn-outline,
+.btn.btn-outline .btn,
+.btn.btn-outline-info {
+  border-color: $suse-bc-green-500;
+  background-color: transparent;
+  color: $suse-bc-green-500;
+  border-radius: 20px;
+  &:hover {
+    color: $suse-bc-green-900;
+  }
+}
+
+.main-container {
+    background: $suse-bc-white;
+}
+
+.clr-vertical-nav {
+  background-color: $suse-bc-gray-50;
+  .nav-link.active {
+    color: $suse-bc-white;
+    background-color: $suse-bc-green-500;
+    .nav-icon {
+      fill: $suse-bc-white;
+    }
+  }
+}
+
+.scanner-info {
+  background-color: $suse-bc-cerulean-500;
+}
+
+.nav .nav-link.active, 
+.nav .nav-link:hover {
+  box-shadow: 0 -3px 0 $suse-bc-green-500 inset;
+}
diff --git a/src/portal/src/css/suse-theme.scss b/src/portal/src/css/suse-theme.scss
new file mode 100644
index 000000000..041811dd9
--- /dev/null
+++ b/src/portal/src/css/suse-theme.scss
@@ -0,0 +1,54 @@
+// Variables for SUSE theme should be defined here.
+@import url('https://fonts.googleapis.com/css?family=Lato:400,700');
+@import url('https://fonts.googleapis.com/css?family=Work+Sans:300,400,600');
+
+$suse-login-wrapper-bg: url(images/sign-in-bg.svg) 21rem 0/100% no-repeat;
+
+$suse-font-family1: 'Lato', arial, helvetica, sans-serif;
+$suse-font-family2: 'Work Sans', arial, helvetica, sans-serif;
+$suse-bc-gray-50: #f2f2f2;
+$suse-bc-gray-500: #969494;
+$suse-bc-gray-1000: #141823;
+$suse-bc-green-500: #30BA78;
+$suse-bc-green-900: #139448;
+$suse-bc-white: #ffffff;
+$suse-bc-cerulean-500: #00B2E2; 
+$suse-bc-cerulean-900: #008ACF;
+
+$mode-background-color: #fff;
+$mode-background-color1: $mode-background-color;
+$mode-background-color2: #fafafa;
+$mode-background-color3: #eee;
+$fill-color1: #000;
+
+$mode-font-color1: #313131;
+$mode-font-color3: $fill-color1;
+$mode-font-color4: unset;
+$mode-font-color5: #575757;
+$mode-font-color2: #565656;
+$mode-link-color1: blue;
+$mode-link-color2: #0077b8;
+$select-option-color: #1b2a32;
+$select-back-color: $mode-background-color;
+
+$label-form-color: $mode-background-color3;
+$right-status-fill-color: #1d5100;
+$light-color-green: $right-status-fill-color;
+
+$color-ddd: #ddd;
+$color-f2: #f2f2f2;
+$color-657b83: #657b83;
+$color-fdf6e3:  #fdf6e3;
+$header-color: #0C322C !important;
+$color-yaml:  none;
+$filter-divider-bg-color: #ccc;
+$selectBox-option-hover-bg-color-start: #f5f5f5;
+$selectBox-option-hover-bg-color-end: #e8e8e8;
+$btn-tag-integration-active-bg-color: #0077b8;
+$btn-tag-integration-active-color: #fff;
+$hbr-result-tip-histogram-inner-bg-color: #fff;
+
+$harbor-icon-translate-x: 100%;
+$harbor-icon-drop-shadow-x: -56px;
+
+@import "./common.scss";
diff --git a/src/portal/src/images/sign-in-bg.svg b/src/portal/src/images/sign-in-bg.svg
new file mode 100644
index 000000000..5c548ee9d
--- /dev/null
+++ b/src/portal/src/images/sign-in-bg.svg
@@ -0,0 +1,648 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="2560.13" height="1443.275" viewBox="0 0 2560.13 1443.275">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Rectangle_2019" data-name="Rectangle 2019" width="302.951" height="793" fill="none"/>
+    </clipPath>
+  </defs>
+  <g id="BG_1366" data-name="BG 1366" transform="translate(0.13 0.5)">
+    <rect id="Rectangle_1700" data-name="Rectangle 1700" width="2560" height="1440" transform="translate(0 2.58)" fill="#7ad4aa"/>
+    <g id="Group_323" data-name="Group 323" transform="translate(461.034 2.58)">
+      <path id="Path_364" data-name="Path 364" d="M692.929,700H901.165A28.835,28.835,0,0,0,930,671.165V208.42" transform="translate(182 -211)" fill="none" stroke="#000" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1"/>
+      <path id="Path_365" data-name="Path 365" d="M-495.664,517H414.165A28.835,28.835,0,0,1,443,545.835v125.33A28.835,28.835,0,0,0,471.835,700l361.691.3" transform="translate(36 -211)" fill="none" stroke="#0c322c" stroke-linecap="round" stroke-miterlimit="10" stroke-width="3" stroke-dasharray="0 8"/>
+      <circle id="Ellipse_5182" data-name="Ellipse 5182" cx="9" cy="9" r="9" transform="translate(860.853 480)" fill="#e4f6ee"/>
+    </g>
+    <g id="Group_325" data-name="Group 325" transform="translate(1150.886 307.58)">
+      <path id="Path_365-2" data-name="Path 365" d="M4869.984,1182.81H4622.732a28.835,28.835,0,0,1-28.835-28.835h0v-125.33a28.835,28.835,0,0,0-28.835-28.835h-421.33a28.835,28.835,0,0,0-28.835,28.835v798.861" transform="translate(-4116.783 -693.81)" fill="none" stroke="#0c322c" stroke-linecap="round" stroke-miterlimit="10" stroke-width="3" stroke-dasharray="0 8"/>
+      <path id="Path_364-2" data-name="Path 364" d="M719.719,700H901.165A28.835,28.835,0,0,0,930,671.165V239.835A28.835,28.835,0,0,1,958.835,211H1371.69" transform="translate(36 -211)" fill="none" stroke="#0c322c" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1"/>
+      <circle id="Ellipse_860" data-name="Ellipse 860" cx="9" cy="9" r="9" transform="translate(747 480)" fill="#ff6a52"/>
+    </g>
+    <g id="Group_805" data-name="Group 805" transform="translate(477.57 116.58)">
+      <g id="Group_804" data-name="Group 804">
+        <g id="Group_803" data-name="Group 803" transform="translate(-36)" clip-path="url(#clip-path)">
+          <g id="Group_767" data-name="Group 767" transform="translate(228.408 -80.541)">
+            <rect id="Rectangle_1983" data-name="Rectangle 1983" width="103.6" height="103.6" fill="none"/>
+            <circle id="Ellipse_4279" data-name="Ellipse 4279" cx="2.8" cy="2.8" r="2.8" transform="translate(10 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4280" data-name="Ellipse 4280" cx="2.8" cy="2.8" r="2.8" transform="translate(36 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4281" data-name="Ellipse 4281" cx="2.8" cy="2.8" r="2.8" transform="translate(62 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4282" data-name="Ellipse 4282" cx="2.8" cy="2.8" r="2.8" transform="translate(88 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4283" data-name="Ellipse 4283" cx="2.8" cy="2.8" r="2.8" transform="translate(10 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4284" data-name="Ellipse 4284" cx="2.8" cy="2.8" r="2.8" transform="translate(36 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4285" data-name="Ellipse 4285" cx="2.8" cy="2.8" r="2.8" transform="translate(62 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4286" data-name="Ellipse 4286" cx="2.8" cy="2.8" r="2.8" transform="translate(88 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4287" data-name="Ellipse 4287" cx="2.8" cy="2.8" r="2.8" transform="translate(10 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4288" data-name="Ellipse 4288" cx="2.8" cy="2.8" r="2.8" transform="translate(36 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4289" data-name="Ellipse 4289" cx="2.8" cy="2.8" r="2.8" transform="translate(62 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4290" data-name="Ellipse 4290" cx="2.8" cy="2.8" r="2.8" transform="translate(88 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4291" data-name="Ellipse 4291" cx="2.8" cy="2.8" r="2.8" transform="translate(10 88)" fill="#30ba78"/>
+            <circle id="Ellipse_4292" data-name="Ellipse 4292" cx="2.8" cy="2.8" r="2.8" transform="translate(36 88)" fill="#30ba78"/>
+            <circle id="Ellipse_4293" data-name="Ellipse 4293" cx="2.8" cy="2.8" r="2.8" transform="translate(62 88)" fill="#30ba78"/>
+            <circle id="Ellipse_4294" data-name="Ellipse 4294" cx="2.8" cy="2.8" r="2.8" transform="translate(88 88)" fill="#30ba78"/>
+          </g>
+          <g id="Group_768" data-name="Group 768" transform="translate(228.408 23.059)">
+            <rect id="Rectangle_1984" data-name="Rectangle 1984" width="103.6" height="103.6" fill="none"/>
+            <circle id="Ellipse_4295" data-name="Ellipse 4295" cx="2.8" cy="2.8" r="2.8" transform="translate(10 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4296" data-name="Ellipse 4296" cx="2.8" cy="2.8" r="2.8" transform="translate(36 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4297" data-name="Ellipse 4297" cx="2.8" cy="2.8" r="2.8" transform="translate(62 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4298" data-name="Ellipse 4298" cx="2.8" cy="2.8" r="2.8" transform="translate(88 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4299" data-name="Ellipse 4299" cx="2.8" cy="2.8" r="2.8" transform="translate(10 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4300" data-name="Ellipse 4300" cx="2.8" cy="2.8" r="2.8" transform="translate(36 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4301" data-name="Ellipse 4301" cx="2.8" cy="2.8" r="2.8" transform="translate(62 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4302" data-name="Ellipse 4302" cx="2.8" cy="2.8" r="2.8" transform="translate(88 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4303" data-name="Ellipse 4303" cx="2.8" cy="2.8" r="2.8" transform="translate(10 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4304" data-name="Ellipse 4304" cx="2.8" cy="2.8" r="2.8" transform="translate(36 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4305" data-name="Ellipse 4305" cx="2.8" cy="2.8" r="2.8" transform="translate(62 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4306" data-name="Ellipse 4306" cx="2.8" cy="2.8" r="2.8" transform="translate(88 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4307" data-name="Ellipse 4307" cx="2.8" cy="2.8" r="2.8" transform="translate(10 88)" fill="#30ba78"/>
+            <circle id="Ellipse_4308" data-name="Ellipse 4308" cx="2.8" cy="2.8" r="2.8" transform="translate(36 88)" fill="#30ba78"/>
+            <circle id="Ellipse_4309" data-name="Ellipse 4309" cx="2.8" cy="2.8" r="2.8" transform="translate(62 88)" fill="#30ba78"/>
+            <circle id="Ellipse_4310" data-name="Ellipse 4310" cx="2.8" cy="2.8" r="2.8" transform="translate(88 88)" fill="#30ba78"/>
+          </g>
+          <g id="Group_769" data-name="Group 769" transform="translate(228.408 126.659)">
+            <rect id="Rectangle_1985" data-name="Rectangle 1985" width="103.6" height="103.6" fill="none"/>
+            <circle id="Ellipse_4311" data-name="Ellipse 4311" cx="2.8" cy="2.8" r="2.8" transform="translate(10 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4312" data-name="Ellipse 4312" cx="2.8" cy="2.8" r="2.8" transform="translate(36 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4313" data-name="Ellipse 4313" cx="2.8" cy="2.8" r="2.8" transform="translate(62 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4314" data-name="Ellipse 4314" cx="2.8" cy="2.8" r="2.8" transform="translate(88 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4315" data-name="Ellipse 4315" cx="2.8" cy="2.8" r="2.8" transform="translate(10 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4316" data-name="Ellipse 4316" cx="2.8" cy="2.8" r="2.8" transform="translate(36 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4317" data-name="Ellipse 4317" cx="2.8" cy="2.8" r="2.8" transform="translate(62 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4318" data-name="Ellipse 4318" cx="2.8" cy="2.8" r="2.8" transform="translate(88 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4322" data-name="Ellipse 4322" cx="2.8" cy="2.8" r="2.8" transform="translate(88 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4323" data-name="Ellipse 4323" cx="2.8" cy="2.8" r="2.8" transform="translate(10 88)" fill="#30ba78"/>
+            <circle id="Ellipse_4324" data-name="Ellipse 4324" cx="2.8" cy="2.8" r="2.8" transform="translate(36 88)" fill="#30ba78"/>
+            <circle id="Ellipse_4325" data-name="Ellipse 4325" cx="2.8" cy="2.8" r="2.8" transform="translate(62 88)" fill="#30ba78"/>
+            <circle id="Ellipse_4326" data-name="Ellipse 4326" cx="2.8" cy="2.8" r="2.8" transform="translate(88 88)" fill="#30ba78"/>
+          </g>
+          <g id="Group_770" data-name="Group 770" transform="translate(228.408 230.259)">
+            <rect id="Rectangle_1986" data-name="Rectangle 1986" width="103.6" height="103.6" fill="none"/>
+            <circle id="Ellipse_4327" data-name="Ellipse 4327" cx="2.8" cy="2.8" r="2.8" transform="translate(10 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4328" data-name="Ellipse 4328" cx="2.8" cy="2.8" r="2.8" transform="translate(36 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4329" data-name="Ellipse 4329" cx="2.8" cy="2.8" r="2.8" transform="translate(62 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4330" data-name="Ellipse 4330" cx="2.8" cy="2.8" r="2.8" transform="translate(88 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4331" data-name="Ellipse 4331" cx="2.8" cy="2.8" r="2.8" transform="translate(10 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4332" data-name="Ellipse 4332" cx="2.8" cy="2.8" r="2.8" transform="translate(36 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4333" data-name="Ellipse 4333" cx="2.8" cy="2.8" r="2.8" transform="translate(62 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4334" data-name="Ellipse 4334" cx="2.8" cy="2.8" r="2.8" transform="translate(88 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4335" data-name="Ellipse 4335" cx="2.8" cy="2.8" r="2.8" transform="translate(10 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4336" data-name="Ellipse 4336" cx="2.8" cy="2.8" r="2.8" transform="translate(36 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4337" data-name="Ellipse 4337" cx="2.8" cy="2.8" r="2.8" transform="translate(62 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4338" data-name="Ellipse 4338" cx="2.8" cy="2.8" r="2.8" transform="translate(88 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4339" data-name="Ellipse 4339" cx="2.8" cy="2.8" r="2.8" transform="translate(10 88)" fill="#30ba78"/>
+            <circle id="Ellipse_4340" data-name="Ellipse 4340" cx="2.8" cy="2.8" r="2.8" transform="translate(36 88)" fill="#30ba78"/>
+            <circle id="Ellipse_4341" data-name="Ellipse 4341" cx="2.8" cy="2.8" r="2.8" transform="translate(62 88)" fill="#30ba78"/>
+            <circle id="Ellipse_4342" data-name="Ellipse 4342" cx="2.8" cy="2.8" r="2.8" transform="translate(88 88)" fill="#30ba78"/>
+          </g>
+          <g id="Group_771" data-name="Group 771" transform="translate(228.408 333.859)">
+            <rect id="Rectangle_1987" data-name="Rectangle 1987" width="103.6" height="103.6" fill="none"/>
+            <circle id="Ellipse_4343" data-name="Ellipse 4343" cx="2.8" cy="2.8" r="2.8" transform="translate(10 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4344" data-name="Ellipse 4344" cx="2.8" cy="2.8" r="2.8" transform="translate(36 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4345" data-name="Ellipse 4345" cx="2.8" cy="2.8" r="2.8" transform="translate(62 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4346" data-name="Ellipse 4346" cx="2.8" cy="2.8" r="2.8" transform="translate(88 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4347" data-name="Ellipse 4347" cx="2.8" cy="2.8" r="2.8" transform="translate(10 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4348" data-name="Ellipse 4348" cx="2.8" cy="2.8" r="2.8" transform="translate(36 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4349" data-name="Ellipse 4349" cx="2.8" cy="2.8" r="2.8" transform="translate(62 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4350" data-name="Ellipse 4350" cx="2.8" cy="2.8" r="2.8" transform="translate(88 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4351" data-name="Ellipse 4351" cx="2.8" cy="2.8" r="2.8" transform="translate(10 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4352" data-name="Ellipse 4352" cx="2.8" cy="2.8" r="2.8" transform="translate(36 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4353" data-name="Ellipse 4353" cx="2.8" cy="2.8" r="2.8" transform="translate(62 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4354" data-name="Ellipse 4354" cx="2.8" cy="2.8" r="2.8" transform="translate(88 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4355" data-name="Ellipse 4355" cx="2.8" cy="2.8" r="2.8" transform="translate(10 88)" fill="#30ba78"/>
+            <circle id="Ellipse_4356" data-name="Ellipse 4356" cx="2.8" cy="2.8" r="2.8" transform="translate(36 88)" fill="#30ba78"/>
+            <circle id="Ellipse_4357" data-name="Ellipse 4357" cx="2.8" cy="2.8" r="2.8" transform="translate(62 88)" fill="#30ba78"/>
+            <circle id="Ellipse_4358" data-name="Ellipse 4358" cx="2.8" cy="2.8" r="2.8" transform="translate(88 88)" fill="#30ba78"/>
+          </g>
+          <g id="Group_772" data-name="Group 772" transform="translate(228.408 437.459)">
+            <rect id="Rectangle_1988" data-name="Rectangle 1988" width="103.6" height="103.6" fill="none"/>
+            <circle id="Ellipse_4359" data-name="Ellipse 4359" cx="2.8" cy="2.8" r="2.8" transform="translate(10 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4360" data-name="Ellipse 4360" cx="2.8" cy="2.8" r="2.8" transform="translate(36 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4361" data-name="Ellipse 4361" cx="2.8" cy="2.8" r="2.8" transform="translate(62 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4362" data-name="Ellipse 4362" cx="2.8" cy="2.8" r="2.8" transform="translate(88 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4363" data-name="Ellipse 4363" cx="2.8" cy="2.8" r="2.8" transform="translate(10 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4364" data-name="Ellipse 4364" cx="2.8" cy="2.8" r="2.8" transform="translate(36 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4365" data-name="Ellipse 4365" cx="2.8" cy="2.8" r="2.8" transform="translate(62 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4366" data-name="Ellipse 4366" cx="2.8" cy="2.8" r="2.8" transform="translate(88 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4367" data-name="Ellipse 4367" cx="2.8" cy="2.8" r="2.8" transform="translate(10 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4368" data-name="Ellipse 4368" cx="2.8" cy="2.8" r="2.8" transform="translate(36 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4369" data-name="Ellipse 4369" cx="2.8" cy="2.8" r="2.8" transform="translate(62 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4370" data-name="Ellipse 4370" cx="2.8" cy="2.8" r="2.8" transform="translate(88 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4371" data-name="Ellipse 4371" cx="2.8" cy="2.8" r="2.8" transform="translate(10 88)" fill="#30ba78"/>
+            <circle id="Ellipse_4372" data-name="Ellipse 4372" cx="2.8" cy="2.8" r="2.8" transform="translate(36 88)" fill="#30ba78"/>
+            <circle id="Ellipse_4373" data-name="Ellipse 4373" cx="2.8" cy="2.8" r="2.8" transform="translate(62 88)" fill="#30ba78"/>
+            <circle id="Ellipse_4374" data-name="Ellipse 4374" cx="2.8" cy="2.8" r="2.8" transform="translate(88 88)" fill="#30ba78"/>
+          </g>
+          <g id="Group_773" data-name="Group 773" transform="translate(228.408 541.059)">
+            <rect id="Rectangle_1989" data-name="Rectangle 1989" width="103.6" height="103.6" fill="none"/>
+            <circle id="Ellipse_4375" data-name="Ellipse 4375" cx="2.8" cy="2.8" r="2.8" transform="translate(10 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4376" data-name="Ellipse 4376" cx="2.8" cy="2.8" r="2.8" transform="translate(36 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4377" data-name="Ellipse 4377" cx="2.8" cy="2.8" r="2.8" transform="translate(62 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4378" data-name="Ellipse 4378" cx="2.8" cy="2.8" r="2.8" transform="translate(88 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4379" data-name="Ellipse 4379" cx="2.8" cy="2.8" r="2.8" transform="translate(10 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4380" data-name="Ellipse 4380" cx="2.8" cy="2.8" r="2.8" transform="translate(36 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4381" data-name="Ellipse 4381" cx="2.8" cy="2.8" r="2.8" transform="translate(62 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4382" data-name="Ellipse 4382" cx="2.8" cy="2.8" r="2.8" transform="translate(88 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4383" data-name="Ellipse 4383" cx="2.8" cy="2.8" r="2.8" transform="translate(10 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4384" data-name="Ellipse 4384" cx="2.8" cy="2.8" r="2.8" transform="translate(36 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4385" data-name="Ellipse 4385" cx="2.8" cy="2.8" r="2.8" transform="translate(62 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4386" data-name="Ellipse 4386" cx="2.8" cy="2.8" r="2.8" transform="translate(88 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4387" data-name="Ellipse 4387" cx="2.8" cy="2.8" r="2.8" transform="translate(10 88)" fill="#30ba78"/>
+            <circle id="Ellipse_4388" data-name="Ellipse 4388" cx="2.8" cy="2.8" r="2.8" transform="translate(36 88)" fill="#30ba78"/>
+            <circle id="Ellipse_4389" data-name="Ellipse 4389" cx="2.8" cy="2.8" r="2.8" transform="translate(62 88)" fill="#30ba78"/>
+            <circle id="Ellipse_4390" data-name="Ellipse 4390" cx="2.8" cy="2.8" r="2.8" transform="translate(88 88)" fill="#30ba78"/>
+          </g>
+          <g id="Group_774" data-name="Group 774" transform="translate(228.408 644.659)">
+            <rect id="Rectangle_1990" data-name="Rectangle 1990" width="103.6" height="103.6" fill="none"/>
+            <circle id="Ellipse_4391" data-name="Ellipse 4391" cx="2.8" cy="2.8" r="2.8" transform="translate(10 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4392" data-name="Ellipse 4392" cx="2.8" cy="2.8" r="2.8" transform="translate(36 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4393" data-name="Ellipse 4393" cx="2.8" cy="2.8" r="2.8" transform="translate(62 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4394" data-name="Ellipse 4394" cx="2.8" cy="2.8" r="2.8" transform="translate(88 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4395" data-name="Ellipse 4395" cx="2.8" cy="2.8" r="2.8" transform="translate(10 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4396" data-name="Ellipse 4396" cx="2.8" cy="2.8" r="2.8" transform="translate(36 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4397" data-name="Ellipse 4397" cx="2.8" cy="2.8" r="2.8" transform="translate(62 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4398" data-name="Ellipse 4398" cx="2.8" cy="2.8" r="2.8" transform="translate(88 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4399" data-name="Ellipse 4399" cx="2.8" cy="2.8" r="2.8" transform="translate(10 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4400" data-name="Ellipse 4400" cx="2.8" cy="2.8" r="2.8" transform="translate(36 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4401" data-name="Ellipse 4401" cx="2.8" cy="2.8" r="2.8" transform="translate(62 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4402" data-name="Ellipse 4402" cx="2.8" cy="2.8" r="2.8" transform="translate(88 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4403" data-name="Ellipse 4403" cx="2.8" cy="2.8" r="2.8" transform="translate(10 88)" fill="#30ba78"/>
+            <circle id="Ellipse_4404" data-name="Ellipse 4404" cx="2.8" cy="2.8" r="2.8" transform="translate(36 88)" fill="#30ba78"/>
+            <circle id="Ellipse_4405" data-name="Ellipse 4405" cx="2.8" cy="2.8" r="2.8" transform="translate(62 88)" fill="#30ba78"/>
+            <circle id="Ellipse_4406" data-name="Ellipse 4406" cx="2.8" cy="2.8" r="2.8" transform="translate(88 88)" fill="#30ba78"/>
+          </g>
+          <g id="Group_775" data-name="Group 775" transform="translate(228.408 748.259)">
+            <rect id="Rectangle_1991" data-name="Rectangle 1991" width="103.6" height="103.6" fill="none"/>
+            <circle id="Ellipse_4407" data-name="Ellipse 4407" cx="2.8" cy="2.8" r="2.8" transform="translate(10 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4408" data-name="Ellipse 4408" cx="2.8" cy="2.8" r="2.8" transform="translate(36 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4409" data-name="Ellipse 4409" cx="2.8" cy="2.8" r="2.8" transform="translate(62 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4410" data-name="Ellipse 4410" cx="2.8" cy="2.8" r="2.8" transform="translate(88 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4411" data-name="Ellipse 4411" cx="2.8" cy="2.8" r="2.8" transform="translate(10 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4412" data-name="Ellipse 4412" cx="2.8" cy="2.8" r="2.8" transform="translate(36 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4413" data-name="Ellipse 4413" cx="2.8" cy="2.8" r="2.8" transform="translate(62 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4414" data-name="Ellipse 4414" cx="2.8" cy="2.8" r="2.8" transform="translate(88 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4415" data-name="Ellipse 4415" cx="2.8" cy="2.8" r="2.8" transform="translate(10 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4416" data-name="Ellipse 4416" cx="2.8" cy="2.8" r="2.8" transform="translate(36 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4417" data-name="Ellipse 4417" cx="2.8" cy="2.8" r="2.8" transform="translate(62 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4418" data-name="Ellipse 4418" cx="2.8" cy="2.8" r="2.8" transform="translate(88 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4419" data-name="Ellipse 4419" cx="2.8" cy="2.8" r="2.8" transform="translate(10 88)" fill="#30ba78"/>
+            <circle id="Ellipse_4420" data-name="Ellipse 4420" cx="2.8" cy="2.8" r="2.8" transform="translate(36 88)" fill="#30ba78"/>
+            <circle id="Ellipse_4421" data-name="Ellipse 4421" cx="2.8" cy="2.8" r="2.8" transform="translate(62 88)" fill="#30ba78"/>
+            <circle id="Ellipse_4422" data-name="Ellipse 4422" cx="2.8" cy="2.8" r="2.8" transform="translate(88 88)" fill="#30ba78"/>
+          </g>
+          <g id="Group_776" data-name="Group 776" transform="translate(124.808 -80.541)">
+            <rect id="Rectangle_1992" data-name="Rectangle 1992" width="103.6" height="103.6" fill="none"/>
+            <circle id="Ellipse_4423" data-name="Ellipse 4423" cx="2.8" cy="2.8" r="2.8" transform="translate(10 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4424" data-name="Ellipse 4424" cx="2.8" cy="2.8" r="2.8" transform="translate(36 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4425" data-name="Ellipse 4425" cx="2.8" cy="2.8" r="2.8" transform="translate(62 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4426" data-name="Ellipse 4426" cx="2.8" cy="2.8" r="2.8" transform="translate(88 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4427" data-name="Ellipse 4427" cx="2.8" cy="2.8" r="2.8" transform="translate(10 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4428" data-name="Ellipse 4428" cx="2.8" cy="2.8" r="2.8" transform="translate(36 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4429" data-name="Ellipse 4429" cx="2.8" cy="2.8" r="2.8" transform="translate(62 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4430" data-name="Ellipse 4430" cx="2.8" cy="2.8" r="2.8" transform="translate(88 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4431" data-name="Ellipse 4431" cx="2.8" cy="2.8" r="2.8" transform="translate(10 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4432" data-name="Ellipse 4432" cx="2.8" cy="2.8" r="2.8" transform="translate(36 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4433" data-name="Ellipse 4433" cx="2.8" cy="2.8" r="2.8" transform="translate(62 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4434" data-name="Ellipse 4434" cx="2.8" cy="2.8" r="2.8" transform="translate(88 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4435" data-name="Ellipse 4435" cx="2.8" cy="2.8" r="2.8" transform="translate(10 88)" fill="#30ba78"/>
+            <circle id="Ellipse_4436" data-name="Ellipse 4436" cx="2.8" cy="2.8" r="2.8" transform="translate(36 88)" fill="#30ba78"/>
+            <circle id="Ellipse_4437" data-name="Ellipse 4437" cx="2.8" cy="2.8" r="2.8" transform="translate(62 88)" fill="#30ba78"/>
+            <circle id="Ellipse_4438" data-name="Ellipse 4438" cx="2.8" cy="2.8" r="2.8" transform="translate(88 88)" fill="#30ba78"/>
+          </g>
+          <g id="Group_777" data-name="Group 777" transform="translate(124.808 23.059)">
+            <rect id="Rectangle_1993" data-name="Rectangle 1993" width="103.6" height="103.6" fill="none"/>
+            <circle id="Ellipse_4439" data-name="Ellipse 4439" cx="2.8" cy="2.8" r="2.8" transform="translate(10 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4440" data-name="Ellipse 4440" cx="2.8" cy="2.8" r="2.8" transform="translate(36 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4441" data-name="Ellipse 4441" cx="2.8" cy="2.8" r="2.8" transform="translate(62 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4442" data-name="Ellipse 4442" cx="2.8" cy="2.8" r="2.8" transform="translate(88 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4443" data-name="Ellipse 4443" cx="2.8" cy="2.8" r="2.8" transform="translate(10 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4444" data-name="Ellipse 4444" cx="2.8" cy="2.8" r="2.8" transform="translate(36 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4445" data-name="Ellipse 4445" cx="2.8" cy="2.8" r="2.8" transform="translate(62 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4446" data-name="Ellipse 4446" cx="2.8" cy="2.8" r="2.8" transform="translate(88 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4447" data-name="Ellipse 4447" cx="2.8" cy="2.8" r="2.8" transform="translate(10 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4448" data-name="Ellipse 4448" cx="2.8" cy="2.8" r="2.8" transform="translate(36 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4449" data-name="Ellipse 4449" cx="2.8" cy="2.8" r="2.8" transform="translate(62 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4450" data-name="Ellipse 4450" cx="2.8" cy="2.8" r="2.8" transform="translate(88 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4451" data-name="Ellipse 4451" cx="2.8" cy="2.8" r="2.8" transform="translate(10 88)" fill="#30ba78"/>
+            <circle id="Ellipse_4452" data-name="Ellipse 4452" cx="2.8" cy="2.8" r="2.8" transform="translate(36 88)" fill="#30ba78"/>
+            <circle id="Ellipse_4453" data-name="Ellipse 4453" cx="2.8" cy="2.8" r="2.8" transform="translate(62 88)" fill="#30ba78"/>
+            <circle id="Ellipse_4454" data-name="Ellipse 4454" cx="2.8" cy="2.8" r="2.8" transform="translate(88 88)" fill="#30ba78"/>
+          </g>
+          <g id="Group_778" data-name="Group 778" transform="translate(124.808 126.659)">
+            <rect id="Rectangle_1994" data-name="Rectangle 1994" width="103.6" height="103.6" fill="none"/>
+            <circle id="Ellipse_4455" data-name="Ellipse 4455" cx="2.8" cy="2.8" r="2.8" transform="translate(10 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4456" data-name="Ellipse 4456" cx="2.8" cy="2.8" r="2.8" transform="translate(36 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4457" data-name="Ellipse 4457" cx="2.8" cy="2.8" r="2.8" transform="translate(62 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4458" data-name="Ellipse 4458" cx="2.8" cy="2.8" r="2.8" transform="translate(88 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4459" data-name="Ellipse 4459" cx="2.8" cy="2.8" r="2.8" transform="translate(10 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4460" data-name="Ellipse 4460" cx="2.8" cy="2.8" r="2.8" transform="translate(36 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4461" data-name="Ellipse 4461" cx="2.8" cy="2.8" r="2.8" transform="translate(62 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4462" data-name="Ellipse 4462" cx="2.8" cy="2.8" r="2.8" transform="translate(88 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4467" data-name="Ellipse 4467" cx="2.8" cy="2.8" r="2.8" transform="translate(10 88)" fill="#30ba78"/>
+            <circle id="Ellipse_4468" data-name="Ellipse 4468" cx="2.8" cy="2.8" r="2.8" transform="translate(36 88)" fill="#30ba78"/>
+            <circle id="Ellipse_4469" data-name="Ellipse 4469" cx="2.8" cy="2.8" r="2.8" transform="translate(62 88)" fill="#30ba78"/>
+            <circle id="Ellipse_4470" data-name="Ellipse 4470" cx="2.8" cy="2.8" r="2.8" transform="translate(88 88)" fill="#30ba78"/>
+          </g>
+          <g id="Group_779" data-name="Group 779" transform="translate(124.808 230.259)">
+            <rect id="Rectangle_1995" data-name="Rectangle 1995" width="103.6" height="103.6" fill="none"/>
+            <circle id="Ellipse_4471" data-name="Ellipse 4471" cx="2.8" cy="2.8" r="2.8" transform="translate(10 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4472" data-name="Ellipse 4472" cx="2.8" cy="2.8" r="2.8" transform="translate(36 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4473" data-name="Ellipse 4473" cx="2.8" cy="2.8" r="2.8" transform="translate(62 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4474" data-name="Ellipse 4474" cx="2.8" cy="2.8" r="2.8" transform="translate(88 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4475" data-name="Ellipse 4475" cx="2.8" cy="2.8" r="2.8" transform="translate(10 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4476" data-name="Ellipse 4476" cx="2.8" cy="2.8" r="2.8" transform="translate(36 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4477" data-name="Ellipse 4477" cx="2.8" cy="2.8" r="2.8" transform="translate(62 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4478" data-name="Ellipse 4478" cx="2.8" cy="2.8" r="2.8" transform="translate(88 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4479" data-name="Ellipse 4479" cx="2.8" cy="2.8" r="2.8" transform="translate(10 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4480" data-name="Ellipse 4480" cx="2.8" cy="2.8" r="2.8" transform="translate(36 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4481" data-name="Ellipse 4481" cx="2.8" cy="2.8" r="2.8" transform="translate(62 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4482" data-name="Ellipse 4482" cx="2.8" cy="2.8" r="2.8" transform="translate(88 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4483" data-name="Ellipse 4483" cx="2.8" cy="2.8" r="2.8" transform="translate(10 88)" fill="#30ba78"/>
+            <circle id="Ellipse_4484" data-name="Ellipse 4484" cx="2.8" cy="2.8" r="2.8" transform="translate(36 88)" fill="#30ba78"/>
+            <circle id="Ellipse_4485" data-name="Ellipse 4485" cx="2.8" cy="2.8" r="2.8" transform="translate(62 88)" fill="#30ba78"/>
+            <circle id="Ellipse_4486" data-name="Ellipse 4486" cx="2.8" cy="2.8" r="2.8" transform="translate(88 88)" fill="#30ba78"/>
+          </g>
+          <g id="Group_780" data-name="Group 780" transform="translate(124.808 333.859)">
+            <rect id="Rectangle_1996" data-name="Rectangle 1996" width="103.6" height="103.6" fill="none"/>
+            <circle id="Ellipse_4487" data-name="Ellipse 4487" cx="2.8" cy="2.8" r="2.8" transform="translate(10 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4488" data-name="Ellipse 4488" cx="2.8" cy="2.8" r="2.8" transform="translate(36 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4489" data-name="Ellipse 4489" cx="2.8" cy="2.8" r="2.8" transform="translate(62 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4490" data-name="Ellipse 4490" cx="2.8" cy="2.8" r="2.8" transform="translate(88 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4491" data-name="Ellipse 4491" cx="2.8" cy="2.8" r="2.8" transform="translate(10 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4492" data-name="Ellipse 4492" cx="2.8" cy="2.8" r="2.8" transform="translate(36 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4493" data-name="Ellipse 4493" cx="2.8" cy="2.8" r="2.8" transform="translate(62 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4494" data-name="Ellipse 4494" cx="2.8" cy="2.8" r="2.8" transform="translate(88 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4495" data-name="Ellipse 4495" cx="2.8" cy="2.8" r="2.8" transform="translate(10 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4496" data-name="Ellipse 4496" cx="2.8" cy="2.8" r="2.8" transform="translate(36 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4497" data-name="Ellipse 4497" cx="2.8" cy="2.8" r="2.8" transform="translate(62 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4498" data-name="Ellipse 4498" cx="2.8" cy="2.8" r="2.8" transform="translate(88 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4499" data-name="Ellipse 4499" cx="2.8" cy="2.8" r="2.8" transform="translate(10 88)" fill="#30ba78"/>
+            <circle id="Ellipse_4500" data-name="Ellipse 4500" cx="2.8" cy="2.8" r="2.8" transform="translate(36 88)" fill="#30ba78"/>
+            <circle id="Ellipse_4501" data-name="Ellipse 4501" cx="2.8" cy="2.8" r="2.8" transform="translate(62 88)" fill="#30ba78"/>
+            <circle id="Ellipse_4502" data-name="Ellipse 4502" cx="2.8" cy="2.8" r="2.8" transform="translate(88 88)" fill="#30ba78"/>
+          </g>
+          <g id="Group_781" data-name="Group 781" transform="translate(124.808 437.459)">
+            <rect id="Rectangle_1997" data-name="Rectangle 1997" width="103.6" height="103.6" fill="none"/>
+            <circle id="Ellipse_4503" data-name="Ellipse 4503" cx="2.8" cy="2.8" r="2.8" transform="translate(10 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4504" data-name="Ellipse 4504" cx="2.8" cy="2.8" r="2.8" transform="translate(36 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4505" data-name="Ellipse 4505" cx="2.8" cy="2.8" r="2.8" transform="translate(62 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4506" data-name="Ellipse 4506" cx="2.8" cy="2.8" r="2.8" transform="translate(88 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4507" data-name="Ellipse 4507" cx="2.8" cy="2.8" r="2.8" transform="translate(10 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4508" data-name="Ellipse 4508" cx="2.8" cy="2.8" r="2.8" transform="translate(36 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4509" data-name="Ellipse 4509" cx="2.8" cy="2.8" r="2.8" transform="translate(62 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4510" data-name="Ellipse 4510" cx="2.8" cy="2.8" r="2.8" transform="translate(88 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4511" data-name="Ellipse 4511" cx="2.8" cy="2.8" r="2.8" transform="translate(10 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4512" data-name="Ellipse 4512" cx="2.8" cy="2.8" r="2.8" transform="translate(36 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4513" data-name="Ellipse 4513" cx="2.8" cy="2.8" r="2.8" transform="translate(62 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4514" data-name="Ellipse 4514" cx="2.8" cy="2.8" r="2.8" transform="translate(88 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4515" data-name="Ellipse 4515" cx="2.8" cy="2.8" r="2.8" transform="translate(10 88)" fill="#30ba78"/>
+            <circle id="Ellipse_4516" data-name="Ellipse 4516" cx="2.8" cy="2.8" r="2.8" transform="translate(36 88)" fill="#30ba78"/>
+            <circle id="Ellipse_4517" data-name="Ellipse 4517" cx="2.8" cy="2.8" r="2.8" transform="translate(62 88)" fill="#30ba78"/>
+            <circle id="Ellipse_4518" data-name="Ellipse 4518" cx="2.8" cy="2.8" r="2.8" transform="translate(88 88)" fill="#30ba78"/>
+          </g>
+          <g id="Group_782" data-name="Group 782" transform="translate(124.808 541.059)">
+            <rect id="Rectangle_1998" data-name="Rectangle 1998" width="103.6" height="103.6" fill="none"/>
+            <circle id="Ellipse_4519" data-name="Ellipse 4519" cx="2.8" cy="2.8" r="2.8" transform="translate(10 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4520" data-name="Ellipse 4520" cx="2.8" cy="2.8" r="2.8" transform="translate(36 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4521" data-name="Ellipse 4521" cx="2.8" cy="2.8" r="2.8" transform="translate(62 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4522" data-name="Ellipse 4522" cx="2.8" cy="2.8" r="2.8" transform="translate(88 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4523" data-name="Ellipse 4523" cx="2.8" cy="2.8" r="2.8" transform="translate(10 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4524" data-name="Ellipse 4524" cx="2.8" cy="2.8" r="2.8" transform="translate(36 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4525" data-name="Ellipse 4525" cx="2.8" cy="2.8" r="2.8" transform="translate(62 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4526" data-name="Ellipse 4526" cx="2.8" cy="2.8" r="2.8" transform="translate(88 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4527" data-name="Ellipse 4527" cx="2.8" cy="2.8" r="2.8" transform="translate(10 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4528" data-name="Ellipse 4528" cx="2.8" cy="2.8" r="2.8" transform="translate(36 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4529" data-name="Ellipse 4529" cx="2.8" cy="2.8" r="2.8" transform="translate(62 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4530" data-name="Ellipse 4530" cx="2.8" cy="2.8" r="2.8" transform="translate(88 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4531" data-name="Ellipse 4531" cx="2.8" cy="2.8" r="2.8" transform="translate(10 88)" fill="#30ba78"/>
+            <circle id="Ellipse_4532" data-name="Ellipse 4532" cx="2.8" cy="2.8" r="2.8" transform="translate(36 88)" fill="#30ba78"/>
+            <circle id="Ellipse_4533" data-name="Ellipse 4533" cx="2.8" cy="2.8" r="2.8" transform="translate(62 88)" fill="#30ba78"/>
+            <circle id="Ellipse_4534" data-name="Ellipse 4534" cx="2.8" cy="2.8" r="2.8" transform="translate(88 88)" fill="#30ba78"/>
+          </g>
+          <g id="Group_783" data-name="Group 783" transform="translate(124.808 644.659)">
+            <rect id="Rectangle_1999" data-name="Rectangle 1999" width="103.6" height="103.6" fill="none"/>
+            <circle id="Ellipse_4535" data-name="Ellipse 4535" cx="2.8" cy="2.8" r="2.8" transform="translate(10 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4536" data-name="Ellipse 4536" cx="2.8" cy="2.8" r="2.8" transform="translate(36 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4537" data-name="Ellipse 4537" cx="2.8" cy="2.8" r="2.8" transform="translate(62 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4538" data-name="Ellipse 4538" cx="2.8" cy="2.8" r="2.8" transform="translate(88 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4539" data-name="Ellipse 4539" cx="2.8" cy="2.8" r="2.8" transform="translate(10 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4540" data-name="Ellipse 4540" cx="2.8" cy="2.8" r="2.8" transform="translate(36 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4541" data-name="Ellipse 4541" cx="2.8" cy="2.8" r="2.8" transform="translate(62 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4542" data-name="Ellipse 4542" cx="2.8" cy="2.8" r="2.8" transform="translate(88 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4543" data-name="Ellipse 4543" cx="2.8" cy="2.8" r="2.8" transform="translate(10 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4544" data-name="Ellipse 4544" cx="2.8" cy="2.8" r="2.8" transform="translate(36 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4545" data-name="Ellipse 4545" cx="2.8" cy="2.8" r="2.8" transform="translate(62 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4546" data-name="Ellipse 4546" cx="2.8" cy="2.8" r="2.8" transform="translate(88 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4547" data-name="Ellipse 4547" cx="2.8" cy="2.8" r="2.8" transform="translate(10 88)" fill="#30ba78"/>
+            <circle id="Ellipse_4548" data-name="Ellipse 4548" cx="2.8" cy="2.8" r="2.8" transform="translate(36 88)" fill="#30ba78"/>
+            <circle id="Ellipse_4549" data-name="Ellipse 4549" cx="2.8" cy="2.8" r="2.8" transform="translate(62 88)" fill="#30ba78"/>
+            <circle id="Ellipse_4550" data-name="Ellipse 4550" cx="2.8" cy="2.8" r="2.8" transform="translate(88 88)" fill="#30ba78"/>
+          </g>
+          <g id="Group_784" data-name="Group 784" transform="translate(124.808 748.259)">
+            <rect id="Rectangle_2000" data-name="Rectangle 2000" width="103.6" height="103.6" fill="none"/>
+            <circle id="Ellipse_4551" data-name="Ellipse 4551" cx="2.8" cy="2.8" r="2.8" transform="translate(10 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4552" data-name="Ellipse 4552" cx="2.8" cy="2.8" r="2.8" transform="translate(36 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4553" data-name="Ellipse 4553" cx="2.8" cy="2.8" r="2.8" transform="translate(62 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4554" data-name="Ellipse 4554" cx="2.8" cy="2.8" r="2.8" transform="translate(88 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4555" data-name="Ellipse 4555" cx="2.8" cy="2.8" r="2.8" transform="translate(10 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4556" data-name="Ellipse 4556" cx="2.8" cy="2.8" r="2.8" transform="translate(36 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4557" data-name="Ellipse 4557" cx="2.8" cy="2.8" r="2.8" transform="translate(62 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4558" data-name="Ellipse 4558" cx="2.8" cy="2.8" r="2.8" transform="translate(88 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4559" data-name="Ellipse 4559" cx="2.8" cy="2.8" r="2.8" transform="translate(10 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4560" data-name="Ellipse 4560" cx="2.8" cy="2.8" r="2.8" transform="translate(36 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4561" data-name="Ellipse 4561" cx="2.8" cy="2.8" r="2.8" transform="translate(62 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4562" data-name="Ellipse 4562" cx="2.8" cy="2.8" r="2.8" transform="translate(88 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4563" data-name="Ellipse 4563" cx="2.8" cy="2.8" r="2.8" transform="translate(10 88)" fill="#30ba78"/>
+            <circle id="Ellipse_4564" data-name="Ellipse 4564" cx="2.8" cy="2.8" r="2.8" transform="translate(36 88)" fill="#30ba78"/>
+            <circle id="Ellipse_4565" data-name="Ellipse 4565" cx="2.8" cy="2.8" r="2.8" transform="translate(62 88)" fill="#30ba78"/>
+            <circle id="Ellipse_4566" data-name="Ellipse 4566" cx="2.8" cy="2.8" r="2.8" transform="translate(88 88)" fill="#30ba78"/>
+          </g>
+          <g id="Group_785" data-name="Group 785" transform="translate(21.208 -80.541)">
+            <rect id="Rectangle_2001" data-name="Rectangle 2001" width="103.6" height="103.6" fill="none"/>
+            <circle id="Ellipse_4567" data-name="Ellipse 4567" cx="2.8" cy="2.8" r="2.8" transform="translate(10 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4568" data-name="Ellipse 4568" cx="2.8" cy="2.8" r="2.8" transform="translate(36 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4569" data-name="Ellipse 4569" cx="2.8" cy="2.8" r="2.8" transform="translate(62 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4570" data-name="Ellipse 4570" cx="2.8" cy="2.8" r="2.8" transform="translate(88 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4571" data-name="Ellipse 4571" cx="2.8" cy="2.8" r="2.8" transform="translate(10 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4572" data-name="Ellipse 4572" cx="2.8" cy="2.8" r="2.8" transform="translate(36 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4573" data-name="Ellipse 4573" cx="2.8" cy="2.8" r="2.8" transform="translate(62 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4574" data-name="Ellipse 4574" cx="2.8" cy="2.8" r="2.8" transform="translate(88 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4575" data-name="Ellipse 4575" cx="2.8" cy="2.8" r="2.8" transform="translate(10 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4576" data-name="Ellipse 4576" cx="2.8" cy="2.8" r="2.8" transform="translate(36 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4577" data-name="Ellipse 4577" cx="2.8" cy="2.8" r="2.8" transform="translate(62 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4578" data-name="Ellipse 4578" cx="2.8" cy="2.8" r="2.8" transform="translate(88 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4579" data-name="Ellipse 4579" cx="2.8" cy="2.8" r="2.8" transform="translate(10 88)" fill="#30ba78"/>
+            <circle id="Ellipse_4580" data-name="Ellipse 4580" cx="2.8" cy="2.8" r="2.8" transform="translate(36 88)" fill="#30ba78"/>
+            <circle id="Ellipse_4581" data-name="Ellipse 4581" cx="2.8" cy="2.8" r="2.8" transform="translate(62 88)" fill="#30ba78"/>
+            <circle id="Ellipse_4582" data-name="Ellipse 4582" cx="2.8" cy="2.8" r="2.8" transform="translate(88 88)" fill="#30ba78"/>
+          </g>
+          <g id="Group_786" data-name="Group 786" transform="translate(21.208 23.059)">
+            <rect id="Rectangle_2002" data-name="Rectangle 2002" width="103.6" height="103.6" fill="none"/>
+            <circle id="Ellipse_4583" data-name="Ellipse 4583" cx="2.8" cy="2.8" r="2.8" transform="translate(10 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4584" data-name="Ellipse 4584" cx="2.8" cy="2.8" r="2.8" transform="translate(36 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4585" data-name="Ellipse 4585" cx="2.8" cy="2.8" r="2.8" transform="translate(62 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4586" data-name="Ellipse 4586" cx="2.8" cy="2.8" r="2.8" transform="translate(88 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4587" data-name="Ellipse 4587" cx="2.8" cy="2.8" r="2.8" transform="translate(10 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4588" data-name="Ellipse 4588" cx="2.8" cy="2.8" r="2.8" transform="translate(36 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4589" data-name="Ellipse 4589" cx="2.8" cy="2.8" r="2.8" transform="translate(62 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4590" data-name="Ellipse 4590" cx="2.8" cy="2.8" r="2.8" transform="translate(88 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4591" data-name="Ellipse 4591" cx="2.8" cy="2.8" r="2.8" transform="translate(10 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4592" data-name="Ellipse 4592" cx="2.8" cy="2.8" r="2.8" transform="translate(36 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4593" data-name="Ellipse 4593" cx="2.8" cy="2.8" r="2.8" transform="translate(62 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4594" data-name="Ellipse 4594" cx="2.8" cy="2.8" r="2.8" transform="translate(88 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4595" data-name="Ellipse 4595" cx="2.8" cy="2.8" r="2.8" transform="translate(10 88)" fill="#30ba78"/>
+            <circle id="Ellipse_4596" data-name="Ellipse 4596" cx="2.8" cy="2.8" r="2.8" transform="translate(36 88)" fill="#30ba78"/>
+            <circle id="Ellipse_4597" data-name="Ellipse 4597" cx="2.8" cy="2.8" r="2.8" transform="translate(62 88)" fill="#30ba78"/>
+            <circle id="Ellipse_4598" data-name="Ellipse 4598" cx="2.8" cy="2.8" r="2.8" transform="translate(88 88)" fill="#30ba78"/>
+          </g>
+          <g id="Group_787" data-name="Group 787" transform="translate(21.208 126.659)">
+            <rect id="Rectangle_2003" data-name="Rectangle 2003" width="103.6" height="103.6" fill="none"/>
+            <circle id="Ellipse_4599" data-name="Ellipse 4599" cx="2.8" cy="2.8" r="2.8" transform="translate(10 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4600" data-name="Ellipse 4600" cx="2.8" cy="2.8" r="2.8" transform="translate(36 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4601" data-name="Ellipse 4601" cx="2.8" cy="2.8" r="2.8" transform="translate(62 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4602" data-name="Ellipse 4602" cx="2.8" cy="2.8" r="2.8" transform="translate(88 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4603" data-name="Ellipse 4603" cx="2.8" cy="2.8" r="2.8" transform="translate(10 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4604" data-name="Ellipse 4604" cx="2.8" cy="2.8" r="2.8" transform="translate(36 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4605" data-name="Ellipse 4605" cx="2.8" cy="2.8" r="2.8" transform="translate(62 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4606" data-name="Ellipse 4606" cx="2.8" cy="2.8" r="2.8" transform="translate(88 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4611" data-name="Ellipse 4611" cx="2.8" cy="2.8" r="2.8" transform="translate(10 88)" fill="#30ba78"/>
+            <circle id="Ellipse_4612" data-name="Ellipse 4612" cx="2.8" cy="2.8" r="2.8" transform="translate(36 88)" fill="#30ba78"/>
+            <circle id="Ellipse_4613" data-name="Ellipse 4613" cx="2.8" cy="2.8" r="2.8" transform="translate(62 88)" fill="#30ba78"/>
+            <circle id="Ellipse_4614" data-name="Ellipse 4614" cx="2.8" cy="2.8" r="2.8" transform="translate(88 88)" fill="#30ba78"/>
+          </g>
+          <g id="Group_788" data-name="Group 788" transform="translate(21.208 230.259)">
+            <rect id="Rectangle_2004" data-name="Rectangle 2004" width="103.6" height="103.6" fill="none"/>
+            <circle id="Ellipse_4615" data-name="Ellipse 4615" cx="2.8" cy="2.8" r="2.8" transform="translate(10 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4616" data-name="Ellipse 4616" cx="2.8" cy="2.8" r="2.8" transform="translate(36 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4617" data-name="Ellipse 4617" cx="2.8" cy="2.8" r="2.8" transform="translate(62 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4618" data-name="Ellipse 4618" cx="2.8" cy="2.8" r="2.8" transform="translate(88 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4619" data-name="Ellipse 4619" cx="2.8" cy="2.8" r="2.8" transform="translate(10 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4620" data-name="Ellipse 4620" cx="2.8" cy="2.8" r="2.8" transform="translate(36 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4621" data-name="Ellipse 4621" cx="2.8" cy="2.8" r="2.8" transform="translate(62 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4622" data-name="Ellipse 4622" cx="2.8" cy="2.8" r="2.8" transform="translate(88 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4623" data-name="Ellipse 4623" cx="2.8" cy="2.8" r="2.8" transform="translate(10 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4624" data-name="Ellipse 4624" cx="2.8" cy="2.8" r="2.8" transform="translate(36 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4625" data-name="Ellipse 4625" cx="2.8" cy="2.8" r="2.8" transform="translate(62 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4626" data-name="Ellipse 4626" cx="2.8" cy="2.8" r="2.8" transform="translate(88 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4627" data-name="Ellipse 4627" cx="2.8" cy="2.8" r="2.8" transform="translate(10 88)" fill="#30ba78"/>
+            <circle id="Ellipse_4628" data-name="Ellipse 4628" cx="2.8" cy="2.8" r="2.8" transform="translate(36 88)" fill="#30ba78"/>
+            <circle id="Ellipse_4629" data-name="Ellipse 4629" cx="2.8" cy="2.8" r="2.8" transform="translate(62 88)" fill="#30ba78"/>
+            <circle id="Ellipse_4630" data-name="Ellipse 4630" cx="2.8" cy="2.8" r="2.8" transform="translate(88 88)" fill="#30ba78"/>
+          </g>
+          <g id="Group_789" data-name="Group 789" transform="translate(21.208 333.859)">
+            <rect id="Rectangle_2005" data-name="Rectangle 2005" width="103.6" height="103.6" fill="none"/>
+            <circle id="Ellipse_4631" data-name="Ellipse 4631" cx="2.8" cy="2.8" r="2.8" transform="translate(10 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4632" data-name="Ellipse 4632" cx="2.8" cy="2.8" r="2.8" transform="translate(36 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4633" data-name="Ellipse 4633" cx="2.8" cy="2.8" r="2.8" transform="translate(62 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4634" data-name="Ellipse 4634" cx="2.8" cy="2.8" r="2.8" transform="translate(88 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4635" data-name="Ellipse 4635" cx="2.8" cy="2.8" r="2.8" transform="translate(10 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4636" data-name="Ellipse 4636" cx="2.8" cy="2.8" r="2.8" transform="translate(36 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4637" data-name="Ellipse 4637" cx="2.8" cy="2.8" r="2.8" transform="translate(62 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4638" data-name="Ellipse 4638" cx="2.8" cy="2.8" r="2.8" transform="translate(88 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4639" data-name="Ellipse 4639" cx="2.8" cy="2.8" r="2.8" transform="translate(10 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4640" data-name="Ellipse 4640" cx="2.8" cy="2.8" r="2.8" transform="translate(36 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4641" data-name="Ellipse 4641" cx="2.8" cy="2.8" r="2.8" transform="translate(62 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4642" data-name="Ellipse 4642" cx="2.8" cy="2.8" r="2.8" transform="translate(88 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4643" data-name="Ellipse 4643" cx="2.8" cy="2.8" r="2.8" transform="translate(10 88)" fill="#30ba78"/>
+            <circle id="Ellipse_4644" data-name="Ellipse 4644" cx="2.8" cy="2.8" r="2.8" transform="translate(36 88)" fill="#30ba78"/>
+            <circle id="Ellipse_4645" data-name="Ellipse 4645" cx="2.8" cy="2.8" r="2.8" transform="translate(62 88)" fill="#30ba78"/>
+            <circle id="Ellipse_4646" data-name="Ellipse 4646" cx="2.8" cy="2.8" r="2.8" transform="translate(88 88)" fill="#30ba78"/>
+          </g>
+          <g id="Group_790" data-name="Group 790" transform="translate(21.208 437.459)">
+            <rect id="Rectangle_2006" data-name="Rectangle 2006" width="103.6" height="103.6" fill="none"/>
+            <circle id="Ellipse_4647" data-name="Ellipse 4647" cx="2.8" cy="2.8" r="2.8" transform="translate(10 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4648" data-name="Ellipse 4648" cx="2.8" cy="2.8" r="2.8" transform="translate(36 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4649" data-name="Ellipse 4649" cx="2.8" cy="2.8" r="2.8" transform="translate(62 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4650" data-name="Ellipse 4650" cx="2.8" cy="2.8" r="2.8" transform="translate(88 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4651" data-name="Ellipse 4651" cx="2.8" cy="2.8" r="2.8" transform="translate(10 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4652" data-name="Ellipse 4652" cx="2.8" cy="2.8" r="2.8" transform="translate(36 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4653" data-name="Ellipse 4653" cx="2.8" cy="2.8" r="2.8" transform="translate(62 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4654" data-name="Ellipse 4654" cx="2.8" cy="2.8" r="2.8" transform="translate(88 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4655" data-name="Ellipse 4655" cx="2.8" cy="2.8" r="2.8" transform="translate(10 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4656" data-name="Ellipse 4656" cx="2.8" cy="2.8" r="2.8" transform="translate(36 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4657" data-name="Ellipse 4657" cx="2.8" cy="2.8" r="2.8" transform="translate(62 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4658" data-name="Ellipse 4658" cx="2.8" cy="2.8" r="2.8" transform="translate(88 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4659" data-name="Ellipse 4659" cx="2.8" cy="2.8" r="2.8" transform="translate(10 88)" fill="#30ba78"/>
+            <circle id="Ellipse_4660" data-name="Ellipse 4660" cx="2.8" cy="2.8" r="2.8" transform="translate(36 88)" fill="#30ba78"/>
+            <circle id="Ellipse_4661" data-name="Ellipse 4661" cx="2.8" cy="2.8" r="2.8" transform="translate(62 88)" fill="#30ba78"/>
+            <circle id="Ellipse_4662" data-name="Ellipse 4662" cx="2.8" cy="2.8" r="2.8" transform="translate(88 88)" fill="#30ba78"/>
+          </g>
+          <g id="Group_791" data-name="Group 791" transform="translate(21.208 541.059)">
+            <rect id="Rectangle_2007" data-name="Rectangle 2007" width="103.6" height="103.6" fill="none"/>
+            <circle id="Ellipse_4663" data-name="Ellipse 4663" cx="2.8" cy="2.8" r="2.8" transform="translate(10 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4664" data-name="Ellipse 4664" cx="2.8" cy="2.8" r="2.8" transform="translate(36 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4665" data-name="Ellipse 4665" cx="2.8" cy="2.8" r="2.8" transform="translate(62 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4666" data-name="Ellipse 4666" cx="2.8" cy="2.8" r="2.8" transform="translate(88 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4667" data-name="Ellipse 4667" cx="2.8" cy="2.8" r="2.8" transform="translate(10 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4668" data-name="Ellipse 4668" cx="2.8" cy="2.8" r="2.8" transform="translate(36 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4669" data-name="Ellipse 4669" cx="2.8" cy="2.8" r="2.8" transform="translate(62 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4670" data-name="Ellipse 4670" cx="2.8" cy="2.8" r="2.8" transform="translate(88 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4671" data-name="Ellipse 4671" cx="2.8" cy="2.8" r="2.8" transform="translate(10 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4672" data-name="Ellipse 4672" cx="2.8" cy="2.8" r="2.8" transform="translate(36 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4673" data-name="Ellipse 4673" cx="2.8" cy="2.8" r="2.8" transform="translate(62 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4674" data-name="Ellipse 4674" cx="2.8" cy="2.8" r="2.8" transform="translate(88 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4675" data-name="Ellipse 4675" cx="2.8" cy="2.8" r="2.8" transform="translate(10 88)" fill="#30ba78"/>
+            <circle id="Ellipse_4676" data-name="Ellipse 4676" cx="2.8" cy="2.8" r="2.8" transform="translate(36 88)" fill="#30ba78"/>
+            <circle id="Ellipse_4677" data-name="Ellipse 4677" cx="2.8" cy="2.8" r="2.8" transform="translate(62 88)" fill="#30ba78"/>
+            <circle id="Ellipse_4678" data-name="Ellipse 4678" cx="2.8" cy="2.8" r="2.8" transform="translate(88 88)" fill="#30ba78"/>
+          </g>
+          <g id="Group_792" data-name="Group 792" transform="translate(21.208 644.659)">
+            <rect id="Rectangle_2008" data-name="Rectangle 2008" width="103.6" height="103.6" fill="none"/>
+            <circle id="Ellipse_4679" data-name="Ellipse 4679" cx="2.8" cy="2.8" r="2.8" transform="translate(10 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4680" data-name="Ellipse 4680" cx="2.8" cy="2.8" r="2.8" transform="translate(36 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4681" data-name="Ellipse 4681" cx="2.8" cy="2.8" r="2.8" transform="translate(62 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4682" data-name="Ellipse 4682" cx="2.8" cy="2.8" r="2.8" transform="translate(88 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4683" data-name="Ellipse 4683" cx="2.8" cy="2.8" r="2.8" transform="translate(10 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4684" data-name="Ellipse 4684" cx="2.8" cy="2.8" r="2.8" transform="translate(36 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4685" data-name="Ellipse 4685" cx="2.8" cy="2.8" r="2.8" transform="translate(62 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4686" data-name="Ellipse 4686" cx="2.8" cy="2.8" r="2.8" transform="translate(88 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4687" data-name="Ellipse 4687" cx="2.8" cy="2.8" r="2.8" transform="translate(10 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4688" data-name="Ellipse 4688" cx="2.8" cy="2.8" r="2.8" transform="translate(36 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4689" data-name="Ellipse 4689" cx="2.8" cy="2.8" r="2.8" transform="translate(62 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4690" data-name="Ellipse 4690" cx="2.8" cy="2.8" r="2.8" transform="translate(88 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4691" data-name="Ellipse 4691" cx="2.8" cy="2.8" r="2.8" transform="translate(10 88)" fill="#30ba78"/>
+            <circle id="Ellipse_4692" data-name="Ellipse 4692" cx="2.8" cy="2.8" r="2.8" transform="translate(36 88)" fill="#30ba78"/>
+            <circle id="Ellipse_4693" data-name="Ellipse 4693" cx="2.8" cy="2.8" r="2.8" transform="translate(62 88)" fill="#30ba78"/>
+            <circle id="Ellipse_4694" data-name="Ellipse 4694" cx="2.8" cy="2.8" r="2.8" transform="translate(88 88)" fill="#30ba78"/>
+          </g>
+          <g id="Group_793" data-name="Group 793" transform="translate(21.208 748.259)">
+            <rect id="Rectangle_2009" data-name="Rectangle 2009" width="103.6" height="103.6" fill="none"/>
+            <circle id="Ellipse_4695" data-name="Ellipse 4695" cx="2.8" cy="2.8" r="2.8" transform="translate(10 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4696" data-name="Ellipse 4696" cx="2.8" cy="2.8" r="2.8" transform="translate(36 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4697" data-name="Ellipse 4697" cx="2.8" cy="2.8" r="2.8" transform="translate(62 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4698" data-name="Ellipse 4698" cx="2.8" cy="2.8" r="2.8" transform="translate(88 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4699" data-name="Ellipse 4699" cx="2.8" cy="2.8" r="2.8" transform="translate(10 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4700" data-name="Ellipse 4700" cx="2.8" cy="2.8" r="2.8" transform="translate(36 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4701" data-name="Ellipse 4701" cx="2.8" cy="2.8" r="2.8" transform="translate(62 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4702" data-name="Ellipse 4702" cx="2.8" cy="2.8" r="2.8" transform="translate(88 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4703" data-name="Ellipse 4703" cx="2.8" cy="2.8" r="2.8" transform="translate(10 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4704" data-name="Ellipse 4704" cx="2.8" cy="2.8" r="2.8" transform="translate(36 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4705" data-name="Ellipse 4705" cx="2.8" cy="2.8" r="2.8" transform="translate(62 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4706" data-name="Ellipse 4706" cx="2.8" cy="2.8" r="2.8" transform="translate(88 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4707" data-name="Ellipse 4707" cx="2.8" cy="2.8" r="2.8" transform="translate(10 88)" fill="#30ba78"/>
+            <circle id="Ellipse_4708" data-name="Ellipse 4708" cx="2.8" cy="2.8" r="2.8" transform="translate(36 88)" fill="#30ba78"/>
+            <circle id="Ellipse_4709" data-name="Ellipse 4709" cx="2.8" cy="2.8" r="2.8" transform="translate(62 88)" fill="#30ba78"/>
+            <circle id="Ellipse_4710" data-name="Ellipse 4710" cx="2.8" cy="2.8" r="2.8" transform="translate(88 88)" fill="#30ba78"/>
+          </g>
+        </g>
+      </g>
+    </g>
+    <g id="Group_806" data-name="Group 806" transform="translate(1738.294 -351.42)">
+      <g id="Group_804-2" data-name="Group 804">
+        <g id="Group_900" data-name="Group 900">
+          <g id="Group_783-2" data-name="Group 783" transform="translate(124.808 644.659)">
+            <rect id="Rectangle_1999-2" data-name="Rectangle 1999" width="103.6" height="103.6" fill="none"/>
+            <circle id="Ellipse_4535-2" data-name="Ellipse 4535" cx="2.8" cy="2.8" r="2.8" transform="translate(10 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4536-2" data-name="Ellipse 4536" cx="2.8" cy="2.8" r="2.8" transform="translate(36 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4537-2" data-name="Ellipse 4537" cx="2.8" cy="2.8" r="2.8" transform="translate(62 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4538-2" data-name="Ellipse 4538" cx="2.8" cy="2.8" r="2.8" transform="translate(88 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4539-2" data-name="Ellipse 4539" cx="2.8" cy="2.8" r="2.8" transform="translate(10 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4540-2" data-name="Ellipse 4540" cx="2.8" cy="2.8" r="2.8" transform="translate(36 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4541-2" data-name="Ellipse 4541" cx="2.8" cy="2.8" r="2.8" transform="translate(62 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4542-2" data-name="Ellipse 4542" cx="2.8" cy="2.8" r="2.8" transform="translate(88 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4543-2" data-name="Ellipse 4543" cx="2.8" cy="2.8" r="2.8" transform="translate(10 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4544-2" data-name="Ellipse 4544" cx="2.8" cy="2.8" r="2.8" transform="translate(36 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4545-2" data-name="Ellipse 4545" cx="2.8" cy="2.8" r="2.8" transform="translate(62 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4546-2" data-name="Ellipse 4546" cx="2.8" cy="2.8" r="2.8" transform="translate(88 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4547-2" data-name="Ellipse 4547" cx="2.8" cy="2.8" r="2.8" transform="translate(10 88)" fill="#30ba78"/>
+            <circle id="Ellipse_4548-2" data-name="Ellipse 4548" cx="2.8" cy="2.8" r="2.8" transform="translate(36 88)" fill="#30ba78"/>
+            <circle id="Ellipse_4549-2" data-name="Ellipse 4549" cx="2.8" cy="2.8" r="2.8" transform="translate(62 88)" fill="#30ba78"/>
+            <circle id="Ellipse_4550-2" data-name="Ellipse 4550" cx="2.8" cy="2.8" r="2.8" transform="translate(88 88)" fill="#30ba78"/>
+          </g>
+          <g id="Group_784-2" data-name="Group 784" transform="translate(124.808 748.259)">
+            <rect id="Rectangle_2000-2" data-name="Rectangle 2000" width="103.6" height="103.6" fill="none"/>
+            <circle id="Ellipse_4551-2" data-name="Ellipse 4551" cx="2.8" cy="2.8" r="2.8" transform="translate(10 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4552-2" data-name="Ellipse 4552" cx="2.8" cy="2.8" r="2.8" transform="translate(36 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4553-2" data-name="Ellipse 4553" cx="2.8" cy="2.8" r="2.8" transform="translate(62 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4554-2" data-name="Ellipse 4554" cx="2.8" cy="2.8" r="2.8" transform="translate(88 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4555-2" data-name="Ellipse 4555" cx="2.8" cy="2.8" r="2.8" transform="translate(10 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4556-2" data-name="Ellipse 4556" cx="2.8" cy="2.8" r="2.8" transform="translate(36 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4557-2" data-name="Ellipse 4557" cx="2.8" cy="2.8" r="2.8" transform="translate(62 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4558-2" data-name="Ellipse 4558" cx="2.8" cy="2.8" r="2.8" transform="translate(88 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4559-2" data-name="Ellipse 4559" cx="2.8" cy="2.8" r="2.8" transform="translate(10 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4560-2" data-name="Ellipse 4560" cx="2.8" cy="2.8" r="2.8" transform="translate(36 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4561-2" data-name="Ellipse 4561" cx="2.8" cy="2.8" r="2.8" transform="translate(62 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4562-2" data-name="Ellipse 4562" cx="2.8" cy="2.8" r="2.8" transform="translate(88 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4563-2" data-name="Ellipse 4563" cx="2.8" cy="2.8" r="2.8" transform="translate(10 88)" fill="#30ba78"/>
+            <circle id="Ellipse_4564-2" data-name="Ellipse 4564" cx="2.8" cy="2.8" r="2.8" transform="translate(36 88)" fill="#30ba78"/>
+            <circle id="Ellipse_4565-2" data-name="Ellipse 4565" cx="2.8" cy="2.8" r="2.8" transform="translate(62 88)" fill="#30ba78"/>
+            <circle id="Ellipse_4566-2" data-name="Ellipse 4566" cx="2.8" cy="2.8" r="2.8" transform="translate(88 88)" fill="#30ba78"/>
+          </g>
+          <g id="Group_792-2" data-name="Group 792" transform="translate(21.208 644.659)">
+            <rect id="Rectangle_2008-2" data-name="Rectangle 2008" width="103.6" height="103.6" fill="none"/>
+            <circle id="Ellipse_4679-2" data-name="Ellipse 4679" cx="2.8" cy="2.8" r="2.8" transform="translate(10 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4680-2" data-name="Ellipse 4680" cx="2.8" cy="2.8" r="2.8" transform="translate(36 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4681-2" data-name="Ellipse 4681" cx="2.8" cy="2.8" r="2.8" transform="translate(62 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4682-2" data-name="Ellipse 4682" cx="2.8" cy="2.8" r="2.8" transform="translate(88 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4683-2" data-name="Ellipse 4683" cx="2.8" cy="2.8" r="2.8" transform="translate(10 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4684-2" data-name="Ellipse 4684" cx="2.8" cy="2.8" r="2.8" transform="translate(36 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4685-2" data-name="Ellipse 4685" cx="2.8" cy="2.8" r="2.8" transform="translate(62 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4686-2" data-name="Ellipse 4686" cx="2.8" cy="2.8" r="2.8" transform="translate(88 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4687-2" data-name="Ellipse 4687" cx="2.8" cy="2.8" r="2.8" transform="translate(10 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4688-2" data-name="Ellipse 4688" cx="2.8" cy="2.8" r="2.8" transform="translate(36 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4689-2" data-name="Ellipse 4689" cx="2.8" cy="2.8" r="2.8" transform="translate(62 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4690-2" data-name="Ellipse 4690" cx="2.8" cy="2.8" r="2.8" transform="translate(88 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4691-2" data-name="Ellipse 4691" cx="2.8" cy="2.8" r="2.8" transform="translate(10 88)" fill="#30ba78"/>
+            <circle id="Ellipse_4692-2" data-name="Ellipse 4692" cx="2.8" cy="2.8" r="2.8" transform="translate(36 88)" fill="#30ba78"/>
+            <circle id="Ellipse_4693-2" data-name="Ellipse 4693" cx="2.8" cy="2.8" r="2.8" transform="translate(62 88)" fill="#30ba78"/>
+            <circle id="Ellipse_4694-2" data-name="Ellipse 4694" cx="2.8" cy="2.8" r="2.8" transform="translate(88 88)" fill="#30ba78"/>
+          </g>
+          <g id="Group_793-2" data-name="Group 793" transform="translate(21.208 748.259)">
+            <rect id="Rectangle_2009-2" data-name="Rectangle 2009" width="103.6" height="103.6" fill="none"/>
+            <circle id="Ellipse_4695-2" data-name="Ellipse 4695" cx="2.8" cy="2.8" r="2.8" transform="translate(10 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4696-2" data-name="Ellipse 4696" cx="2.8" cy="2.8" r="2.8" transform="translate(36 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4697-2" data-name="Ellipse 4697" cx="2.8" cy="2.8" r="2.8" transform="translate(62 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4698-2" data-name="Ellipse 4698" cx="2.8" cy="2.8" r="2.8" transform="translate(88 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4699-2" data-name="Ellipse 4699" cx="2.8" cy="2.8" r="2.8" transform="translate(10 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4700-2" data-name="Ellipse 4700" cx="2.8" cy="2.8" r="2.8" transform="translate(36 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4701-2" data-name="Ellipse 4701" cx="2.8" cy="2.8" r="2.8" transform="translate(62 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4702-2" data-name="Ellipse 4702" cx="2.8" cy="2.8" r="2.8" transform="translate(88 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4703-2" data-name="Ellipse 4703" cx="2.8" cy="2.8" r="2.8" transform="translate(10 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4704-2" data-name="Ellipse 4704" cx="2.8" cy="2.8" r="2.8" transform="translate(36 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4705-2" data-name="Ellipse 4705" cx="2.8" cy="2.8" r="2.8" transform="translate(62 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4706-2" data-name="Ellipse 4706" cx="2.8" cy="2.8" r="2.8" transform="translate(88 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4707-2" data-name="Ellipse 4707" cx="2.8" cy="2.8" r="2.8" transform="translate(10 88)" fill="#30ba78"/>
+            <circle id="Ellipse_4708-2" data-name="Ellipse 4708" cx="2.8" cy="2.8" r="2.8" transform="translate(36 88)" fill="#30ba78"/>
+            <circle id="Ellipse_4709-2" data-name="Ellipse 4709" cx="2.8" cy="2.8" r="2.8" transform="translate(62 88)" fill="#30ba78"/>
+            <circle id="Ellipse_4710-2" data-name="Ellipse 4710" cx="2.8" cy="2.8" r="2.8" transform="translate(88 88)" fill="#30ba78"/>
+          </g>
+          <g id="Group_801" data-name="Group 801" transform="translate(-82.392 644.659)">
+            <rect id="Rectangle_2017" data-name="Rectangle 2017" width="103.6" height="103.6" fill="none"/>
+            <circle id="Ellipse_4823" data-name="Ellipse 4823" cx="2.8" cy="2.8" r="2.8" transform="translate(10 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4824" data-name="Ellipse 4824" cx="2.8" cy="2.8" r="2.8" transform="translate(36 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4825" data-name="Ellipse 4825" cx="2.8" cy="2.8" r="2.8" transform="translate(62 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4826" data-name="Ellipse 4826" cx="2.8" cy="2.8" r="2.8" transform="translate(88 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4827" data-name="Ellipse 4827" cx="2.8" cy="2.8" r="2.8" transform="translate(10 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4828" data-name="Ellipse 4828" cx="2.8" cy="2.8" r="2.8" transform="translate(36 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4829" data-name="Ellipse 4829" cx="2.8" cy="2.8" r="2.8" transform="translate(62 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4830" data-name="Ellipse 4830" cx="2.8" cy="2.8" r="2.8" transform="translate(88 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4831" data-name="Ellipse 4831" cx="2.8" cy="2.8" r="2.8" transform="translate(10 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4832" data-name="Ellipse 4832" cx="2.8" cy="2.8" r="2.8" transform="translate(36 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4833" data-name="Ellipse 4833" cx="2.8" cy="2.8" r="2.8" transform="translate(62 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4834" data-name="Ellipse 4834" cx="2.8" cy="2.8" r="2.8" transform="translate(88 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4835" data-name="Ellipse 4835" cx="2.8" cy="2.8" r="2.8" transform="translate(10 88)" fill="#30ba78"/>
+            <circle id="Ellipse_4836" data-name="Ellipse 4836" cx="2.8" cy="2.8" r="2.8" transform="translate(36 88)" fill="#30ba78"/>
+            <circle id="Ellipse_4837" data-name="Ellipse 4837" cx="2.8" cy="2.8" r="2.8" transform="translate(62 88)" fill="#30ba78"/>
+            <circle id="Ellipse_4838" data-name="Ellipse 4838" cx="2.8" cy="2.8" r="2.8" transform="translate(88 88)" fill="#30ba78"/>
+          </g>
+          <g id="Group_802" data-name="Group 802" transform="translate(-82.392 748.259)">
+            <rect id="Rectangle_2018" data-name="Rectangle 2018" width="103.6" height="103.6" fill="none"/>
+            <circle id="Ellipse_4839" data-name="Ellipse 4839" cx="2.8" cy="2.8" r="2.8" transform="translate(10 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4840" data-name="Ellipse 4840" cx="2.8" cy="2.8" r="2.8" transform="translate(36 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4841" data-name="Ellipse 4841" cx="2.8" cy="2.8" r="2.8" transform="translate(62 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4842" data-name="Ellipse 4842" cx="2.8" cy="2.8" r="2.8" transform="translate(88 10)" fill="#30ba78"/>
+            <circle id="Ellipse_4843" data-name="Ellipse 4843" cx="2.8" cy="2.8" r="2.8" transform="translate(10 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4844" data-name="Ellipse 4844" cx="2.8" cy="2.8" r="2.8" transform="translate(36 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4845" data-name="Ellipse 4845" cx="2.8" cy="2.8" r="2.8" transform="translate(62 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4846" data-name="Ellipse 4846" cx="2.8" cy="2.8" r="2.8" transform="translate(88 36)" fill="#30ba78"/>
+            <circle id="Ellipse_4847" data-name="Ellipse 4847" cx="2.8" cy="2.8" r="2.8" transform="translate(10 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4848" data-name="Ellipse 4848" cx="2.8" cy="2.8" r="2.8" transform="translate(36 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4849" data-name="Ellipse 4849" cx="2.8" cy="2.8" r="2.8" transform="translate(62 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4850" data-name="Ellipse 4850" cx="2.8" cy="2.8" r="2.8" transform="translate(88 62)" fill="#30ba78"/>
+            <circle id="Ellipse_4851" data-name="Ellipse 4851" cx="2.8" cy="2.8" r="2.8" transform="translate(10 88)" fill="#30ba78"/>
+            <circle id="Ellipse_4852" data-name="Ellipse 4852" cx="2.8" cy="2.8" r="2.8" transform="translate(36 88)" fill="#30ba78"/>
+            <circle id="Ellipse_4853" data-name="Ellipse 4853" cx="2.8" cy="2.8" r="2.8" transform="translate(62 88)" fill="#30ba78"/>
+            <circle id="Ellipse_4854" data-name="Ellipse 4854" cx="2.8" cy="2.8" r="2.8" transform="translate(88 88)" fill="#30ba78"/>
+          </g>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/src/portal/src/index.html b/src/portal/src/index.html
index 649df36f3..30b8da54f 100644
--- a/src/portal/src/index.html
+++ b/src/portal/src/index.html
@@ -7,8 +7,7 @@
     <base href="/">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="icon" type="image/x-icon" href="favicon.ico?v=2">
-    <link rel="preload" as="style" href="./light-theme.css">
-    <link rel="preload" as="style" href="./dark-theme.css">
+    <link rel="preload" as="style" href="./suse-theme.css">
 </head>
 <body>
     <harbor-app>
@@ -18,4 +17,4 @@
     </harbor-app>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/src/portal/src/setting.json b/src/portal/src/setting.json
index 5ed09efbb..7774941c7 100644
--- a/src/portal/src/setting.json
+++ b/src/portal/src/setting.json
@@ -4,11 +4,11 @@
   "loginBgImg": "",
   "appTitle": "",
   "product": {
-    "name": "",
+    "name": "SUSE Private Registry",
     "introduction": {
       "zh-cn": "",
       "es-es": "",
       "en-us": ""
     }
   }
-}
\ No newline at end of file
+}
-- 
2.26.2

