From 95d84faf176abef885c40acb631e78bb0a7f4c9a Mon Sep 17 00:00:00 2001
From: sepehr <sepehr.ha@gmail.com>
Date: Thu, 2 Jan 2025 20:20:59 +0300
Subject: [PATCH 01/15] Bugs: Fixed Firmware download from the Mikrotik website
 when there are multiple npk available Fixed Mikrowizard system permission
 error when it is set to None Fixed user device group permissions Some minor
 UI improvements Fix IP scan for one IP scan / Fix not scanning the last IP in
 the range Fix manual snippet execution not working when device groups are
 selected Some minor bug fixes and improvements

New:
Show background tasks and be able to stop them while running in the background (like an IP scanner)
Add support for manual MikroWizard update dashboard/settings page
update to version 1.0.5

Enhancement:
Show permission error in some pages when the  user doesn't have permission for that page/action
show better charts/graphs in the dashboard and device interface details
show more info on the dashboard about update and version information and license
---
 src/app/app.module.ts                         |   4 +-
 .../default-header.component.html             |  43 +++++++
 .../default-header.component.ts               |  30 ++++-
 .../default-layout.component.html             |  32 +++++-
 .../default-layout.component.ts               |  68 ++++++++++--
 src/app/providers/mikrowizard/data.ts         |  21 +++-
 .../views/dashboard/dashboard.component.html  | 105 +++++++++++++++---
 .../views/dashboard/dashboard.component.ts    |  48 ++++++--
 src/app/views/dashboard/dashboard.module.ts   |   2 +
 .../views/device_detail/device.component.ts   |  27 ++++-
 src/app/views/devices/devices.component.html  |   7 +-
 src/app/views/devices/devices.component.ts    |  93 +++++++++++++++-
 .../permissions/permissions.component.ts      |  19 +++-
 .../views/settings/settings.component.html    |  42 ++++---
 .../views/settings/settings.component.scss    |   3 +
 src/app/views/settings/settings.component.ts  |  65 ++++++++++-
 .../views/snippets/snippets.component.html    |   3 +-
 .../user_manager/user_manager.component.ts    |  84 +++++++++++++-
 src/app/views/vault/vault.component.ts        |  27 +++++
 19 files changed, 647 insertions(+), 76 deletions(-)

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 3160f40..bb74798 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -40,6 +40,7 @@ import {
   SidebarModule,
   TabsModule,
   UtilitiesModule,
+  TableModule,
   ModalModule
 } from '@coreui/angular';
 
@@ -85,7 +86,8 @@ export function loginStatusProviderFactory(provider: loginChecker) {
     CardModule,
     NgScrollbarModule,
     ModalModule,
-    FontAwesomeModule
+    FontAwesomeModule,
+    TableModule
   ],
   providers: [
     {
diff --git a/src/app/containers/default-layout/default-header/default-header.component.html b/src/app/containers/default-layout/default-header/default-header.component.html
index adefb87..b83982a 100644
--- a/src/app/containers/default-layout/default-header/default-header.component.html
+++ b/src/app/containers/default-layout/default-header/default-header.component.html
@@ -49,6 +49,7 @@
       </c-nav-item>
     </c-header-nav> -->
     <c-header-nav class="ms-3">
+      <ng-container *ngTemplateOutlet="taskDropdown"></ng-container> | 
       <ng-container *ngTemplateOutlet="userDropdown"></ng-container>
     </c-header-nav>
 
@@ -97,3 +98,45 @@
     </ul>
   </c-dropdown>
 </ng-template>
+
+<ng-template #taskDropdown>
+  <c-dropdown alignment="end" variant="nav-item">
+    <button
+      cButton
+      color=""
+      [caret]="false"
+      cDropdownToggle
+      class="py-0"
+      style="margin-right: 20px;"
+    >
+    <i class="fa-solid fa-gear"></i><c-badge color="danger" style="left: unset !important;" position="bottom-end" shape="rounded-pill">{{tasks.length}}</c-badge>
+    </button>
+    <ul cDropdownMenu class="pt-0 pr-5 w-auto">
+      <li>
+        <h6 cDropdownHeader class="bg-light fw-semibold py-2">Runnig Background Tasks</h6>
+      </li>
+      <li>
+        <table cTable small style="min-width: 250px;">
+          <thead style="font-size: 0.9rem;">
+          <tr>
+            <th scope="col"></th>
+            <th scope="col" style="color: darkgrey;">Task name</th>
+            <th scope="col" style="width: 60px;"></th>
+          </tr>
+          </thead>
+          <tbody>
+          <tr *ngFor="let task of tasks; let i = index">
+            <th scope="row">{{i+1}}</th>
+            <td>{{task.name}}</td>
+            <td>
+              <!-- <button (click)="stop_task(task['signal'])" cButton  variant="ghost" color="danger" size="sm" ><i class="fa-solid fa-stop"></i></button> -->
+              <button (click)="callParentConfirm('CancelTask',task)"  cButton  variant="ghost" color="danger" size="sm" ><i class="fa-solid fa-stop"></i></button>
+            </td>
+          </tbody>
+        </table>
+      </li>
+    </ul>
+  </c-dropdown>
+</ng-template>
+
+
diff --git a/src/app/containers/default-layout/default-header/default-header.component.ts b/src/app/containers/default-layout/default-header/default-header.component.ts
index e957c15..cd6c204 100644
--- a/src/app/containers/default-layout/default-header/default-header.component.ts
+++ b/src/app/containers/default-layout/default-header/default-header.component.ts
@@ -15,6 +15,7 @@ export class DefaultHeaderComponent extends HeaderComponent {
 
   @Input() sidebarId: string = "sidebar";
   @Output() UserModalEvent = new EventEmitter<any>();
+  @Output() ConfirmModalEvent = new EventEmitter<any>();
 
   public newMessages = new Array(4)
   public newTasks = new Array(5)
@@ -25,7 +26,9 @@ export class DefaultHeaderComponent extends HeaderComponent {
   public uname: string;
   public fname: string;
   public lname: string;
-  public UserProfileModalVisible : boolean = false;
+  public ConfirmModalVisible : boolean = false;
+  public tasks : any = [];
+  public timer : any;
 
   constructor(
     private classToggler: ClassToggleService,
@@ -53,7 +56,9 @@ export class DefaultHeaderComponent extends HeaderComponent {
   callParent(action:string): void {
     this.UserModalEvent.next(action);
   }
-
+  callParentConfirm(action:string,data:any): void {
+    this.ConfirmModalEvent.next({action:action,data:data});
+  }
   logout() {
     this.data_provider.logout().then(res => {
       this.router.navigate(['login']);
@@ -62,6 +67,27 @@ export class DefaultHeaderComponent extends HeaderComponent {
 
   ngOnInit(): void {
     var _self = this;
+    console.log('DefaultHeaderComponent');
     this.get_user_info();
+    this.data_provider.get_running_tasks().then(res => {
+      _self.tasks = res['tasks'].filter((x:any) => x.status);
+    })
+    // get running tasks every 5 seconds
+    this.timer=setInterval(function(){
+      _self.get_running_tasks();
+    }, 5000);
   }
+  
+  get_running_tasks(){
+    var _self = this;
+    this.data_provider.get_running_tasks().then(res => {
+      _self.tasks = res['tasks'].filter((x:any) => x.status);
+    })
+  }
+  ngOnDestroy(): void {
+    clearInterval(this.timer);
+  }
+
+
+
 }
diff --git a/src/app/containers/default-layout/default-layout.component.html b/src/app/containers/default-layout/default-layout.component.html
index ea53bfd..83af2f0 100644
--- a/src/app/containers/default-layout/default-layout.component.html
+++ b/src/app/containers/default-layout/default-layout.component.html
@@ -21,7 +21,7 @@
 <!--main-->
 <div class="wrapper d-flex flex-column min-vh-100 bg-light dark:bg-transparent">
   <!--app-header-->
-  <app-default-header (UserModalEvent)="show_user_modal($event)" class="mb-2 d-print-none header header-sticky"
+  <app-default-header (UserModalEvent)="show_user_modal($event)" (ConfirmModalEvent)="show_confirm_modal($event)" class="mb-2 d-print-none header header-sticky"
     position="sticky" sidebarId="sidebar" />
   <!--app-body-->
   <div class="main-container body flex-grow-1 px-3" style="display: flex;">
@@ -105,4 +105,34 @@
       Close
     </button>
   </c-modal-footer>
+</c-modal>
+
+
+<c-modal #ConfirmModal backdrop="static" size="lg" [(visible)]="ConfirmModalVisible" id="ConfirmModal">
+  <c-modal-header>
+    <h5 cModalTitle *ngIf="action=='CancelTask'">Please Confirm Stopping Background Task</h5>
+    <h5 cModalTitle *ngIf="action=='update'">Please Confirm Stopping Background Task</h5>
+    <button [cModalToggle]="ConfirmModal.id" cButtonClose></button>
+  </c-modal-header>
+  <c-modal-body >
+    <div *ngIf="action=='CancelTask'">
+      <p>Are you sure you want to stop the task <code style="padding: 0 !important;"><b>{{ data['name'] }}</b></code>?</p>
+    </div>
+    <div *ngIf="action=='CancelTask' && data['signal']!='130' && data['signal']!='140'">
+      <code>Stopping this task will cause reload of other background tasks</code>
+    </div>
+    <div *ngIf="action=='update'">
+      <code >Clear browser cache and Reload the page or hit Ctrl+F5 to load latest Mikrofront version</code>
+    </div>
+  </c-modal-body>
+  <c-modal-footer>
+    <button *ngIf="action!='update'" cButton (click)="ConfirmAction()" color="primary" [disabled]="data['SubmitDisable']"><i *ngIf="data['SubmitDisable']" class="fa-solid fa-spinner fa-spin"></i> submit</button>
+    <button *ngIf="action!='update'" [cModalToggle]="ConfirmModal.id" cButton color="secondary">
+    </button>
+
+    <button *ngIf="action=='update'" cButton (click)="ConfirmAction()" color="primary" ><i *ngIf="data['SubmitDisable']" class="fa-solid fa-spinner fa-spin"></i> Reload</button>
+    <button *ngIf="action=='update'" (click)="clearTimer()" cButton color="secondary">
+      Close
+    </button>
+  </c-modal-footer>
 </c-modal>
\ No newline at end of file
diff --git a/src/app/containers/default-layout/default-layout.component.ts b/src/app/containers/default-layout/default-layout.component.ts
index 67c1d09..8830ab9 100644
--- a/src/app/containers/default-layout/default-layout.component.ts
+++ b/src/app/containers/default-layout/default-layout.component.ts
@@ -6,6 +6,7 @@ import { navItems } from './_nav';
 import { dataProvider } from '../../providers/mikrowizard/data';
 import { arch } from 'os';
 import { DomSanitizer } from '@angular/platform-browser';
+import { disconnect } from 'process';
 
 @Component({
   selector: 'app-dashboard',
@@ -23,11 +24,14 @@ export class DefaultLayoutComponent implements OnInit {
   public ispro: boolean=false;
   public action: string="password";
   public UserProfileModalVisible:boolean;
+  public ConfirmModalVisible:boolean;
   public error:any=false;
   public currentStep:number=1;
   public qrCode:any=false;
   public totpCode:string='';
   public errorMessage:any=false;
+  public data:any={};
+  public timer:any;
   public password:any={
     'cupass':'',
     'pass1':'',
@@ -130,7 +134,41 @@ export class DefaultLayoutComponent implements OnInit {
     else
       this.UserProfileModalVisible = true;
   }
-
+  show_confirm_modal(data:any){
+    this.data={};
+    if (data.action=='CancelTask'){
+      this.action=data.action;
+      this.data=data.data;
+      console.dir(this.data);
+      console.dir(this.action);
+      //disable submit button
+      this.data['SubmitDisable']=false;
+      this.ConfirmModalVisible = true;
+    }
+    if (data.action=='update'){
+      this.action='update';
+      this.data={};
+      this.ConfirmModalVisible = true;
+    }
+  }
+  ConfirmAction(){
+    var _self=this;
+    if(this.action=='CancelTask'){
+      this.data_provider.stop_task(this.data['signal']).then(res => {
+        //disable submit button
+        if(res['status']=='success'){
+          setTimeout(function () {
+            _self.ConfirmModalVisible = false;
+          }, 5000);
+        }
+        this.data['SubmitDisable']=true;
+        //wait 5 seconds before hiding the modal
+      })
+    }
+    if(this.action=='update'){
+       window.location.href = window.location.href.replace(/#.*$/, '')
+    }
+  }
   submit(){
     var _self=this;
     if(!_self.passvalid['pass2']){
@@ -190,12 +228,28 @@ export class DefaultLayoutComponent implements OnInit {
       }
       });
     });
-    _self.data_provider.get_front_version().then((res:any) => {
-      if(res['version']!=this.version){
-        console.dir("New version is available. Please refresh the page.");
-        window.location.href = window.location.href.replace(/#.*$/, '');
-      }
-		});
+    // check first time after 10 seconds
+    setTimeout(function(){
+      _self.data_provider.get_front_version().then((res:any) => {
+        if(res['version']!=_self.version){
+          console.log("New version is available. Please refresh the page.");
+          _self.show_confirm_modal({action:'update'});
+          // window.location.href = window.location.href.replace(/#.*$/, '');
+        }
+      });
+    }, 10000);
+    // check for new version every 5 seconds
+    this.timer=setInterval(function(){
+        _self.data_provider.get_front_version().then((res:any) => {
+          if(res['version']!=_self.version){
+            console.log("New version is available. Please refresh the page.");
+            _self.show_confirm_modal({action:'update'});
+            // window.location.href = window.location.href.replace(/#.*$/, '');
+          }
+        });
+    }, 60000);
+    
   }
+  clearTimer() { clearInterval(this.timer); }
   
 }
diff --git a/src/app/providers/mikrowizard/data.ts b/src/app/providers/mikrowizard/data.ts
index 8553378..b80fbb0 100644
--- a/src/app/providers/mikrowizard/data.ts
+++ b/src/app/providers/mikrowizard/data.ts
@@ -70,9 +70,10 @@ export class dataProvider {
         }
         return this.MikroWizardRPC.sendJsonRequest("/api/user/change_password", data);
     }
-    dashboard_stats(versioncheck:boolean){
+    dashboard_stats(versioncheck:boolean,front_version:string){
         var data={
-            'versioncheck':versioncheck
+            'versioncheck':versioncheck,
+            'front_version':front_version
         }
         return this.MikroWizardRPC.sendJsonRequest("/api/dashboard/stats", data);
     }
@@ -537,7 +538,21 @@ export class dataProvider {
         return this.MikroWizardRPC.sendJsonRequest("/api/sysconfig/save_all", data);
     }
  
-
+    get_running_tasks(){
+        return this.MikroWizardRPC.sendJsonRequest("/api/tasks/list", {});
+    }
+    stop_task(signal:number){
+        var data={
+            'signal':signal
+        }
+        return this.MikroWizardRPC.sendJsonRequest("/api/tasks/stop", data);
+    }
+    apply_update(action:string){
+        var data={
+            'action':action
+        }
+        return this.MikroWizardRPC.sendJsonRequest("/api/sysconfig/apply_update", data);
+    }
     ////
     //// End api funcs
     ////
diff --git a/src/app/views/dashboard/dashboard.component.html b/src/app/views/dashboard/dashboard.component.html
index 2dcc8a7..fb8a721 100644
--- a/src/app/views/dashboard/dashboard.component.html
+++ b/src/app/views/dashboard/dashboard.component.html
@@ -125,29 +125,72 @@
   </c-card-body>
 </c-card>
 <c-row>
-  <c-col xl="6" *ngIf="stats" lg="12" class="h-100" style="height: 160px!important;">
-    <c-widget-stat-b [title]="stats['version']" class="mb-1 h-100" value="Version">
+  <c-col xl="6" *ngIf="stats" lg="12" class="h-100" style="min-height: 160px!important;display: grid">
+    <c-card class="mb-1 p-1 h-100" style="padding-left: 5px!important;">
       <div class="my-1">
-        <code style="padding: 0!important;">Serial:</code> <small
-          style="background-color: #ccc;padding: 5px;border-radius: 5px;cursor: pointer;" (click)="copy_this()"
-          [cdkCopyToClipboard]="stats['serial']">{{ stats['serial'] }}</small>
-        <span *ngIf="copy_msg" style="color: #fff!important;" class="badge text-bg-success mx-1"><i
-            class="fa-solid fa-check"></i>Copy</span>
+        <h4 style="display: inline-block;">Version and Serial information</h4>
+
       </div>
       <div *ngIf="!stats['license']" class="my-1">
-        <c-badge color="danger">Not Registred OR Not internet access</c-badge>
+        <div style="display: inline-block;margin-right: 5px;">
+          <code style="padding: 0!important;">Serial:</code> <small
+            style="background-color: #ccc;padding: 5px;border-radius: 5px;cursor: pointer;" (click)="copy_this()"
+            [cdkCopyToClipboard]="stats['serial']">{{ stats['serial'] }}</small>
+          <span *ngIf="copy_msg" style="color: #fff!important;" class="badge text-bg-success"><i
+              class="fa-solid fa-check"></i>Copy</span>
+        </div>
+        <c-badge color="danger">Not Registred</c-badge>
         <a class="mx-1" target="_blank" href="http://MikroWizard.com">Learn how to register and get automatic
           updates!</a>
       </div>
-      <div *ngIf="stats['license']" class="my-1">
+      <div *ngIf="stats['license']=='connection_error'" class="my-1">
+        <c-badge class="mx-1" color="danger">Unable connect to server/Check server internet connection</c-badge>
+      </div>
+      <div *ngIf="stats['license']!='connection_error'" class="my-1">
+        <div style="display: inline-block;margin-right: 5px;">
+          <code style="padding: 0!important;">Serial:</code> <small
+            style="background-color: #ccc;padding: 5px;border-radius: 5px;cursor: pointer;" (click)="copy_this()"
+            [cdkCopyToClipboard]="stats['serial']">{{ stats['serial'] }}</small>
+          <span *ngIf="copy_msg" style="color: #fff!important;" class="badge text-bg-success mx-1"><i
+              class="fa-solid fa-check"></i>Copy</span>
+        </div>
         <c-badge color="success">Registred</c-badge>
         <c-badge class="mx-1" color="info">License Type : {{stats['license']}}</c-badge>
+        <c-badge *ngIf="stats['update_mode']!='auto'" color="info">Manual update</c-badge>
+        <c-badge *ngIf="stats['update_mode']=='auto'" color="info">Auto update</c-badge>
       </div>
-    </c-widget-stat-b>
+      <div *ngIf="stats['license']!='connection_error'" class="my-1">
+        <span style="font-size: 0.9rem; display: inline-block;margin-right: 5px"><c-badge
+            [color]="stats['update_available'] ? 'success' : 'secondary'"
+            style="margin: 0!important;padding: 8px;height: 27px;">Your Mikroman version : {{stats['version']}}
+          </c-badge>
+          <i class="fa-solid fa-spinner fa-spin" *ngIf="stats['update_inprogress']"></i>
+          <button cButton color="warning"
+            *ngIf="stats['update_mode']!='auto' && stats['update_available'] && !stats['update_inprogress']" size="sm"
+            (click)="showConfirmModal('update_mikroman')"
+            style="font-size: 0.75em;position: relative;left: -4px;top: 1px;border-top-left-radius: 0;border-bottom-left-radius: 0;height: 27px;"><i
+              class="fa-regular fa-hand-pointer fa-beat-fade"></i> Update availble </button>
+        </span>
+        <span style="font-size: 0.9rem; display: inline-block;"><c-badge
+            [color]="stats['front_update_available'] ? 'success' : 'secondary'" style="padding: 8px;height: 27px;"
+            color="secondary">Your Mikrofront version : {{front_version}}
+          </c-badge>
+          <i class="fa-solid fa-spinner fa-spin" *ngIf="stats['front_update_inprogress']"></i>
+          <button cButton color="warning"
+            *ngIf="stats['update_mode']!='auto' && stats['front_update_available'] && !stats['front_update_inprogress']"
+            size="sm" (click)="showConfirmModal('update_mikrofront')"
+            style="font-size: 0.75em;position: relative;left: -4px;top: 1px;border-top-left-radius: 0;border-bottom-left-radius: 0;height: 27px;"><i
+              class="fa-regular fa-hand-pointer fa-beat-fade"></i> Update availble </button>
+        </span>
+      </div>
+      <!-- <div *ngIf="stats['update_mode']!='auto'" class="my-1">
+        <button cButton color="warning" *ngIf="stats['update_available']" size="sm" style="font-size: 1em;"><i class="fa-regular fa-hand-pointer fa-beat-fade"></i> Update <strong>Mikroman</strong> and reload server</button>
+        <button cButton color="warning" *ngIf="stats['front_update_available']" size="sm" style="font-size: 1em;margin-left: 5px;"><i class="fa-regular fa-hand-pointer fa-beat-fade"></i> Update <strong>MikroFront</strong> and reload Page</button>
+      </div> -->
+    </c-card>
   </c-col>
-
-  <c-col xl="6" lg="12" class="h-100" style="height: 160px!important;">
-    <c-card class="mb-1 p-1 h-100" *ngIf="stats">
+  <c-col xl="6" lg="12" class="h-100" style="min-height: 160px!important;display: grid;">
+    <c-card class="h-100" *ngIf="stats" style="padding: 0!important;margin: 0!important;">
       <c-carousel [dark]="true" [animate]="false" [wrap]="false" [interval]="1000000">
         <c-carousel-indicators></c-carousel-indicators>
         <c-carousel-inner>
@@ -165,4 +208,38 @@
       </c-carousel>
     </c-card>
   </c-col>
-</c-row>
\ No newline at end of file
+</c-row>
+
+<c-modal #ConfirmModal backdrop="static" size="lg" [(visible)]="ConfirmModalVisible" id="ConfirmModal">
+  <c-modal-header>
+    <h5 cModalTitle *ngIf="action=='update_mikroman'">Please Confirm Mikroman Update</h5>
+    <h5 cModalTitle *ngIf="action=='update_mikrofront'">Please Confirm MikroFront Update</h5>
+    <button [cModalToggle]="ConfirmModal.id" cButtonClose></button>
+  </c-modal-header>
+  <c-modal-body>
+    <div *ngIf="action=='update_mikroman'">
+      <p>Are you sure you want to apply latest Mikroman Update <code
+          style="padding: 0 !important;"><b> ver {{ stats['latest_version'] }}</b></code>?</p>
+      <p>By updating Mikroman the MikroFront update is also get checked and applyed</p>
+      <p>If you made any special changes to configuration files or python files it will be removed automaticlaly</p>
+    </div>
+    <div *ngIf="action=='update_mikroman'">
+      <code style="padding: 0!important;">Applying the update will cause reload of the server couple of times</code>
+    </div>
+    <div *ngIf="action=='update_mikrofront'">
+      <p>Are you sure you want to apply latest MikroFront Update <code
+          style="padding: 0 !important;"><b> ver {{ stats['front_latest_version'] }}</b></code>?</p>
+    </div>
+    <div *ngIf="action=='update_mikrofront'">
+      <code style="padding: 0!important;">Applying the update will cause reload of the page,<br>
+        Also please make sure you have the latest Mikroman before updating MikroFront. 
+        Updating to latest MikroFront without getting latest Mikroman can cause problems</code>
+    </div>
+  </c-modal-body>
+  <c-modal-footer>
+    <button cButton (click)="ConfirmAction()" color="primary"> submit</button>
+    <button [cModalToggle]="ConfirmModal.id" cButton color="secondary">
+      Close
+    </button>
+  </c-modal-footer>
+</c-modal>
\ No newline at end of file
diff --git a/src/app/views/dashboard/dashboard.component.ts b/src/app/views/dashboard/dashboard.component.ts
index 3d2099c..f5cc1a7 100644
--- a/src/app/views/dashboard/dashboard.component.ts
+++ b/src/app/views/dashboard/dashboard.component.ts
@@ -14,6 +14,9 @@ export class DashboardComponent implements OnInit {
   public uname: string;
   public tz: string;
   public copy_msg: any = false;
+  public ConfirmModalVisible: boolean = false;
+  public action: string = "";
+  front_version=require('../../../../package.json').version;
   constructor(
     private data_provider: dataProvider,
     private router: Router,
@@ -41,7 +44,9 @@ export class DashboardComponent implements OnInit {
     trafficRadio: new UntypedFormControl("5m"),
   });
   public chart_data: any = {};
-  Chartoptions = {
+
+  public Chartoptions = {
+    responsive: true,
     plugins: {
       tooltip: {
         callbacks: {
@@ -87,17 +92,17 @@ export class DashboardComponent implements OnInit {
         stacked: true,
         position: "left",
         type: "linear",
-        color: "#17522f",
+        color: "#4caf50",
         grid: {
-          color: "rgba(23, 82, 47, 0.3)",
+          color: "rgba(76, 175, 79, 0.3)",
           backgroundColor: "transparent",
-          borderColor: "#f86c6b",
-          pointHoverBackgroundColor: "#f86c6b",
+          borderColor: "#4caf50",
+          pointHoverBackgroundColor: "#4caf50",
           borderWidth: 1,
           borderDash: [8, 5],
         },
         ticks: {
-          color: "#17522f",
+          color: "#000000",
           callback: function (value: any, index: any, ticks: any) {
             const units = ["bit", "Kib", "Mib", "Gib", "Tib"];
             var res = value;
@@ -119,10 +124,10 @@ export class DashboardComponent implements OnInit {
         position: "right",
         type: "linear",
         grid: {
-          color: "rgba(23, 82, 47, 0.3)",
+          color: "rgba(255, 152, 0, 0.4)",
           backgroundColor: "transparent",
-          borderColor: "#f86c6b",
-          pointHoverBackgroundColor: "#f86c6b",
+          borderColor: "#ff9800",
+          pointHoverBackgroundColor: "#ff9800",
           borderWidth: 1,
           borderDash: [8, 5],
         },
@@ -130,7 +135,7 @@ export class DashboardComponent implements OnInit {
           width: 2,
         },
         ticks: {
-          color: "#171951",
+          color: "#000000",
           callback: function (value: any, index: any, ticks: any) {
             const units = ["bit", "Kib", "Mib", "Gib", "Tib"];
             var res = value;
@@ -147,7 +152,7 @@ export class DashboardComponent implements OnInit {
     elements: {
       line: {
         borderWidth: 1,
-        tension: 0.4,
+        tension: 0.1,
       },
       point: {
         radius: 2,
@@ -181,7 +186,7 @@ export class DashboardComponent implements OnInit {
   }
   initStats() {
     var _self = this;
-    this.data_provider.dashboard_stats(true).then((res) => {
+    this.data_provider.dashboard_stats(true,this.front_version).then((res) => {
       _self.stats = res;
     });
   }
@@ -200,4 +205,23 @@ export class DashboardComponent implements OnInit {
     this.delta = value;
     this.initTrafficChart();
   }
+  showConfirmModal(action: string) {
+    this.action = action;
+    this.ConfirmModalVisible = true
+  }
+  ConfirmAction() {
+    var _self = this;
+      this.data_provider.apply_update(this.action).then((res) => {
+        if (res["status"]=='success') {
+          if (_self.action=='update_mikroman') {
+            _self.stats['update_inprogress']=true;
+          }
+          if (_self.action=='update_mikrofront') {
+            _self.stats['front_update_inprogress']=true;
+          }
+          _self.action="";
+          _self.ConfirmModalVisible = false;
+        }
+      });
+  }
 }
diff --git a/src/app/views/dashboard/dashboard.module.ts b/src/app/views/dashboard/dashboard.module.ts
index c605424..20a6600 100644
--- a/src/app/views/dashboard/dashboard.module.ts
+++ b/src/app/views/dashboard/dashboard.module.ts
@@ -11,6 +11,7 @@ import {
   ProgressModule,
   TemplateIdDirective,
   BadgeModule,
+  ModalModule,
   CarouselModule,
 } from "@coreui/angular";
 
@@ -37,6 +38,7 @@ import { ClipboardModule } from "@angular/cdk/clipboard";
     CarouselModule,
     BadgeModule,
     ClipboardModule,
+    ModalModule,
   ],
   declarations: [DashboardComponent],
 })
diff --git a/src/app/views/device_detail/device.component.ts b/src/app/views/device_detail/device.component.ts
index d77c1e4..64ab631 100644
--- a/src/app/views/device_detail/device.component.ts
+++ b/src/app/views/device_detail/device.component.ts
@@ -123,8 +123,9 @@ export class DeviceComponent implements OnInit, OnDestroy {
     type: GuiRowSelectionType.CHECKBOX,
     mode: GuiRowSelectionMode.MULTIPLE,
   };
-
   Chartoptions = {
+    responsive: true,
+    _self :this,
     plugins: {
       tooltip: {
         callbacks: {
@@ -164,7 +165,19 @@ export class DeviceComponent implements OnInit, OnDestroy {
     },
     maintainAspectRatio: true,
     scales: {
-      x: { display: false },
+      x: {
+        
+        title: {
+          display: true,
+          text: 'Time',
+          color: '#333',
+      },
+      ticks: {
+        autoSkip: true,
+        maxTicksLimit: 30,
+          color: '#333',
+      }
+      },
       yA: {
         display: true,
         stacked: true,
@@ -177,7 +190,9 @@ export class DeviceComponent implements OnInit, OnDestroy {
         },
         ticks: {
           color: "#17522f",
-          callback: function (value: any, index: any, ticks: any) {
+          callback: (value: any) => {
+            if(this.total_type=="pps")
+              return value + " pps";
             const units = ["bit", "Kib", "Mib", "Gib", "Tib"];
             var res = value;
             let unitIndex = 0;
@@ -206,7 +221,9 @@ export class DeviceComponent implements OnInit, OnDestroy {
         },
         ticks: {
           color: "#171951",
-          callback: function (value: any, index: any, ticks: any) {
+          callback: (value: any) =>{
+            if(this.total_type=="pps")
+              return value + " pps";
             const units = ["bit", "Kib", "Mib", "Gib", "Tib"];
             var res = value;
             let unitIndex = 0;
@@ -222,7 +239,7 @@ export class DeviceComponent implements OnInit, OnDestroy {
     elements: {
       line: {
         borderWidth: 1,
-        tension: 0.4,
+        tension: 0.1,
       },
       point: {
         radius: 4,
diff --git a/src/app/views/devices/devices.component.html b/src/app/views/devices/devices.component.html
index 5a8cf61..cfc5f75 100644
--- a/src/app/views/devices/devices.component.html
+++ b/src/app/views/devices/devices.component.html
@@ -265,12 +265,11 @@
 
 <c-modal #ExecutedDataModal backdrop="static" size="xl" [(visible)]="ExecutedDataModalVisible" id="ExecutedDataModal">
   <c-modal-header>
-    <h5 cModalTitle>Editing Group </h5>
+    <h5 cModalTitle>Scan History : </h5>
     <button (click)="ExecutedDataModalVisible=!ExecutedDataModalVisible" cButtonClose></button>
   </c-modal-header>
   <c-modal-body>
     <c-input-group class="mb-3">
-      <h5>Group Members :</h5>
       <gui-grid [autoResizeWidth]="true" *ngIf="ExecutedDataModalVisible" [searching]="searching"
         [source]="ExecutedData" [columnMenu]="columnMenu" [sorting]="sorting" [infoPanel]="infoPanel"
        [autoResizeWidth]=true
@@ -283,8 +282,8 @@
           <ng-template let-value="item['start_ip']" let-item="item" let-index="index">
             &nbsp; {{value}} </ng-template>
         </gui-grid-column>
-        <gui-grid-column header="End ip" field="start_ip">
-          <ng-template let-value="item['start_ip']" let-item="item" let-index="index">
+        <gui-grid-column header="End ip" field="end_ip">
+          <ng-template let-value="item['end_ip']" let-item="item" let-index="index">
             &nbsp; {{value}} </ng-template>
         </gui-grid-column>
         <gui-grid-column   header="End time" field="end">
diff --git a/src/app/views/devices/devices.component.ts b/src/app/views/devices/devices.component.ts
index 8ce0f7f..edb012b 100644
--- a/src/app/views/devices/devices.component.ts
+++ b/src/app/views/devices/devices.component.ts
@@ -194,7 +194,7 @@ export class DevicesComponent implements OnInit, OnDestroy {
     this.selected_device = dev;
     this.data_provider.get_editform(dev.id).then((res) => {
       if ("error" in res) {
-        if (res.error.indexOf("Unauthorized")) {
+        if ("error" in res && res.error.indexOf("Unauthorized")) {
           _self.show_toast(
             "Error",
             "You are not authorized to perform this action",
@@ -230,8 +230,17 @@ export class DevicesComponent implements OnInit, OnDestroy {
     var _self = this;
     this.ConfirmModalVisible = false;
     this.data_provider.delete_devices(this.Selectedrows).then((res) => {
+      if ("error" in res && res.error.indexOf("Unauthorized")) {
+        _self.show_toast(
+          "Error",
+          "You are not authorized to perform this action",
+          "danger"
+        );
+      }
+      else{
       _self.show_toast("Success", "Device Deleted", "success");
       this.initGridTable();
+      }
     });
   }
 
@@ -314,6 +323,14 @@ export class DevicesComponent implements OnInit, OnDestroy {
             });
         }
       }
+      if ("error" in res && res.error.indexOf("Unauthorized")) {
+        _self.show_toast(
+          "Error",
+          "You are not authorized to perform this action",
+          "danger"
+        );
+      }
+      else
       _self.scanwizard_step = step;
     });
   }
@@ -357,11 +374,20 @@ export class DevicesComponent implements OnInit, OnDestroy {
     this.data_provider
       .check_firmware(this.Selectedrows.toString())
       .then((res) => {
+        if ("error" in res && res.error.indexOf("Unauthorized")) {
+          _self.show_toast(
+            "Error",
+            "You are not authorized to perform this action",
+            "danger"
+          );
+        }
+        else{
         _self.show_toast("info", "Checking Firmwares", "light");
         _self.ConfirmModalVisible = false;
         setTimeout(function () {
           if (_self.Selectedrows.length < 1) _self.initGridTable();
         }, 1);
+      }
       });
   }
 
@@ -370,8 +396,16 @@ export class DevicesComponent implements OnInit, OnDestroy {
     this.data_provider
       .update_firmware(this.Selectedrows.toString())
       .then((res) => {
+        if ("error" in res && res.error.indexOf("Unauthorized")) {
+          _self.show_toast(
+            "Error",
+            "You are not authorized to perform this action",
+            "danger"
+          );
+        }
+        else{
         _self.show_toast("info", "Updating Firmwares Sent", "light");
-        _self.initGridTable();
+        _self.initGridTable();}
       });
   }
 
@@ -380,8 +414,17 @@ export class DevicesComponent implements OnInit, OnDestroy {
     this.data_provider
       .upgrade_firmware(this.Selectedrows.toString())
       .then((res) => {
+        if ("error" in res && res.error.indexOf("Unauthorized")) {
+          _self.show_toast(
+            "Error",
+            "You are not authorized to perform this action",
+            "danger"
+          );
+        }
+        else{
         _self.show_toast("info", "Upgrading Firmwares", "light");
         _self.initGridTable();
+        }
       });
   }
 
@@ -390,19 +433,37 @@ export class DevicesComponent implements OnInit, OnDestroy {
     this.data_provider
       .reboot_devices(this.Selectedrows.toString())
       .then((res) => {
+        if ("error" in res && res.error.indexOf("Unauthorized")) {
+          _self.show_toast(
+            "Error",
+            "You are not authorized to perform this action",
+            "danger"
+          );
+        }
+        else{
         _self.show_toast("info", "Reboot sent", "light");
         _self.ConfirmModalVisible = !_self.ConfirmModalVisible;
         _self.initGridTable();
+        }
       });
   }
 
   get_groups() {
     var _self = this;
     this.data_provider.get_devgroup_list().then((res) => {
+      if ("error" in res && res.error.indexOf("Unauthorized")) {
+        _self.show_toast(
+          "Error",
+          "You are not authorized to perform this action",
+          "danger"
+        );
+      }
+      else{
       if( "status" in res && res.status == 'failed' )
         _self.groups = false
       else
         _self.groups = res;
+  }
     });
   }
 
@@ -417,6 +478,14 @@ export class DevicesComponent implements OnInit, OnDestroy {
     };
 
     _self.data_provider.get_dev_list(data).then((res) => {
+      if ("error" in res && res.error.indexOf("Unauthorized")) {
+        _self.show_toast(
+          "Error",
+          "You are not authorized to perform this action",
+          "danger"
+        );
+      }
+      else{
       _self.source = res.map((x: any) => {
         if (x.upgrade_availble) _self.upgrades.push(x);
         if (x.update_availble) _self.updates.push(x);
@@ -424,6 +493,7 @@ export class DevicesComponent implements OnInit, OnDestroy {
       });
       _self.device_interval();
       _self.loading = false;
+    }
     });
   }
 
@@ -516,8 +586,17 @@ export class DevicesComponent implements OnInit, OnDestroy {
     _self.selected_device['editform']['password']="Loading ...";
     if (_self.ispro && !this.show_pass){
       _self.data_provider.get_device_pass(this.selected_device['id']).then((res) => {
+        if ("error" in res && "error" in res && res.error.indexOf("Unauthorized")) {
+          _self.show_toast(
+            "Error",
+            "You are not authorized to perform this action",
+            "danger"
+          );
+        }
+        else{
         _self.selected_device['editform']['password']=res['password'];
         this.show_pass=!this.show_pass;
+      }
       });
     }
     else{
@@ -530,7 +609,14 @@ export class DevicesComponent implements OnInit, OnDestroy {
     this.data_provider
     .scan_results()
     .then((res) => {
-      console.dir(res);
+      if ("error" in res && res.error.indexOf("Unauthorized")) {
+        _self.show_toast(
+          "Error",
+          "You are not authorized to perform this action",
+          "danger"
+        );
+      }
+      else{
       let index = 1;
       _self.ExecutedData= res.data.map((d: any) => {
         d.index = index;
@@ -551,6 +637,7 @@ export class DevicesComponent implements OnInit, OnDestroy {
         index += 1;
         return d;
         });
+      }
     });
     }
 
diff --git a/src/app/views/permissions/permissions.component.ts b/src/app/views/permissions/permissions.component.ts
index d8fac73..1ce6ac0 100644
--- a/src/app/views/permissions/permissions.component.ts
+++ b/src/app/views/permissions/permissions.component.ts
@@ -225,17 +225,26 @@ export class PermissionsComponent implements OnInit {
     } else {
       var _self = this;
       this.data_provider.delete_perm(_self.SelectedPerm["id"]).then((res) => {
-        if (res["status"] == "failed") {
+        if ("error" in res && res.error.indexOf("Unauthorized")) {
           _self.show_toast(
             "Error",
-            res.err,
+            "You are not authorized to perform this action",
             "danger"
           );
-          return;
         }
         else{
-          _self.initGridTable();
-          _self.DeleteConfirmModalVisible = false;
+            if (res["status"] == "failed") {
+              _self.show_toast(
+                "Error",
+                res.err,
+                "danger"
+              );
+              return;
+            }
+            else{
+              _self.initGridTable();
+              _self.DeleteConfirmModalVisible = false;
+            }
         }
       });
     }
diff --git a/src/app/views/settings/settings.component.html b/src/app/views/settings/settings.component.html
index b0cc3a5..d3fe44e 100644
--- a/src/app/views/settings/settings.component.html
+++ b/src/app/views/settings/settings.component.html
@@ -72,7 +72,7 @@
             <option value="keep">Keep v6 and don't update to v7</option>
             <option value="update">install latest</option>
           </select>
-          <c-form-feedback style="display: block;color: #979797;margin-top: 0;" [valid]="true">
+          <c-form-feedback style="display: block;color: #5c5c5c;margin-top: 0;" [valid]="true">
             * Choose how Mikrowizard should update old v6 firmwares</c-form-feedback>
         </c-input-group>
 
@@ -85,7 +85,7 @@
             <option *ngFor="let f of available_firmwares" [value]="f">{{f}}</option>
 
           </select>
-          <c-form-feedback style="display: block;color: #979797;margin-top: 0;" [valid]="true">
+          <c-form-feedback style="display: block;color: #5c5c5c;margin-top: 0;" [valid]="true">
             * The version of firmware to install routers</c-form-feedback>
         </c-input-group>
 
@@ -97,7 +97,7 @@
             <option>Choose...</option>
             <option *ngFor="let f of available_firmwaresv6" [value]="f">{{f}}</option>
           </select>
-          <c-form-feedback style="display: block;color: #979797;margin-top: 0;" [valid]="true">
+          <c-form-feedback style="display: block;color: #5c5c5c;margin-top: 0;" [valid]="true">
             * The version of firmware to install on V6 routers</c-form-feedback>
         </c-input-group>
         <button cButton color="primary" (click)="saveFirmwareSetting()">Save</button>
@@ -112,7 +112,7 @@
           <span cInputGroupText>Rad Secret</span>
           <input cFormControl id="floatingInput" placeholder="rad_secret"
             [(ngModel)]="sysconfigs['rad_secret']['value']" />
-            <c-form-feedback style="display: block;color: #979797;margin-top: 0;" [valid]="true">
+            <c-form-feedback style="display: block;color: #5c5c5c;margin-top: 0;" [valid]="true">
               * Radius Secret of Mikrowizard Radius Server</c-form-feedback>
         </c-input-group>
 
@@ -121,7 +121,7 @@
           <span cInputGroupText>System URL</span>
           <input cFormControl id="floatingInput" placeholder="System URL"
             [(ngModel)]="sysconfigs['system_url']['value']" />
-            <c-form-feedback style="display: block;color: #979797;margin-top: 0;" [valid]="true">
+            <c-form-feedback style="display: block;color: #5c5c5c;margin-top: 0;" [valid]="true">
               * Default system access URl</c-form-feedback>
         </c-input-group>
 
@@ -129,7 +129,7 @@
           <span cInputGroupText>Default IP</span>
           <input cFormControl id="floatingInput" placeholder="System URL"
             [(ngModel)]="sysconfigs['default_ip']['value']" />
-            <c-form-feedback style="display: block;color: #979797;margin-top: 0;" [valid]="true">
+            <c-form-feedback style="display: block;color: #5c5c5c;margin-top: 0;" [valid]="true">
               * Default Mikrowizard Access IP</c-form-feedback>
         </c-input-group>
         <c-input-group class="mt-3">
@@ -146,7 +146,7 @@
               </mat-option>
             </mat-select>
           </mat-form-field>
-          <c-form-feedback style="display: block;color: #979797;margin-top: 0;" [valid]="true">
+          <c-form-feedback style="display: block;color: #5c5c5c;margin-top: 0;" [valid]="true">
             * Default TimeZone for the system</c-form-feedback>
         </c-input-group>
 
@@ -157,20 +157,34 @@
           <span cInputGroupText>Default password</span>
           <input aria-label="Password" type="password" [(ngModel)]="sysconfigs['default_password']['value']"
             cFormControl />
-            <c-form-feedback style="display: block;color: #979797;margin-top: 0;" [valid]="true">
+            <c-form-feedback style="display: block;color: #5c5c5c;margin-top: 0;" [valid]="true">
               * Default username and Password for searching new devices</c-form-feedback>
         </c-input-group>
+
+        <c-input-group class="mb-3">
+          <label cInputGroupText for="inputGroupSelect01">
+            Mikrowizard Update Mode
+          </label>
+          <select cSelect [(ngModel)]="sysconfigs['update_mode']['value']['mode']" id="inputGroupSelect01">
+            <option>Choose...</option>
+            <option value="auto">Automatic Update</option>
+            <option value="manual">Show update only/Update manually</option>
+          </select>
+          <c-form-feedback style="display: block;color: #5c5c5c;margin-top: 0;" [valid]="true">
+            * Choose if Mikrowizard should download updates automaticaly when availble or wait for user to download/apply updates</c-form-feedback>
+        </c-input-group>
+        
         <c-input-group class="mt-3 mb-3">
           <span cInputGroupText>License Username</span>
           <input aria-label="Username" type="text" [(ngModel)]="sysconfigs['username']['value']" cFormControl />
-          <c-form-feedback style="display: block;color: #979797;margin-top: 0;" [valid]="true">
+          <c-form-feedback style="display: block;color: #5c5c5c;margin-top: 0;" [valid]="true">
             * The username that you registred in Mikrowizard.com,Required for License Activation</c-form-feedback>
         </c-input-group>
           
         <c-form-check [switch]="true" sizing="xl">
           <input cFormCheckInput [(ngModel)]="sysconfigs['force_perms']['value']" type="checkbox" />
           <label cFormCheckLabel>Force Perms</label>
-          <c-form-feedback style="display: block;color: #979797;margin-top: 0;" [valid]="true">
+          <c-form-feedback style="display: block;color: #5c5c5c;margin-top: 0;" [valid]="true">
             * Force User Groups under user>groups configuration of each router to match Mikrowizard Permissions and
             monitor for any change to prevent/fix the configuration.</c-form-feedback>
         </c-form-check>
@@ -178,7 +192,7 @@
         <c-form-check [switch]="true" sizing="xl">
           <input cFormCheckInput [(ngModel)]="sysconfigs['force_radius']['value']" type="checkbox" />
           <label cFormCheckLabel>Force Radius</label>
-          <c-form-feedback style="display: block;color: #979797;margin-top: 0;" [valid]="true">
+          <c-form-feedback style="display: block;color: #5c5c5c;margin-top: 0;" [valid]="true">
             * Force Radius config under radius>client and user>aaa setting of each router that added to Mikrowizard and
             monitor for any change to prevent/fix the configuration.</c-form-feedback>
         </c-form-check>
@@ -186,7 +200,7 @@
         <c-form-check [switch]="true" sizing="xl">
           <input cFormCheckInput [(ngModel)]="sysconfigs['force_syslog']['value']" type="checkbox" />
           <label cFormCheckLabel>Force Syslog</label>
-          <c-form-feedback style="display: block;color: #979797;margin-top: 0;" [valid]="true">
+          <c-form-feedback style="display: block;color: #5c5c5c;margin-top: 0;" [valid]="true">
             * Force Syslog config under system>logs setting of each router that added to Mikrowizard and monitor syslog
             setting for any change to prevent/fix the configuration.</c-form-feedback>
         </c-form-check>
@@ -194,7 +208,7 @@
         <c-form-check *ngIf="ispro" [switch]="true" sizing="xl">
           <input cFormCheckInput [(ngModel)]="sysconfigs['safe_install']['value']" type="checkbox" />
           <label cFormCheckLabel>Safe Update</label>
-          <c-form-feedback style="display: block;color: #979797;margin-top: 0;" [valid]="true"><code style="padding: 0!important;">PRO</code>
+          <c-form-feedback style="display: block;color: #5c5c5c;margin-top: 0;" [valid]="true"><code style="padding: 0!important;">PRO</code>
             * Download and install reqired firmware before installing the target firmware . for example it will install
             latest 7.12 then upgrade to newer version >7.13 or install Required packages before update</c-form-feedback>
         </c-form-check>
@@ -202,7 +216,7 @@
         <c-form-check *ngIf="ispro" [switch]="true" sizing="xl">
           <input cFormCheckInput [(ngModel)]="sysconfigs['otp_force']['value']" type="checkbox" />
           <label cFormCheckLabel>Force device otp</label>
-          <c-form-feedback style="display: block;color: #979797;margin-top: 0;" [valid]="true"><code style="padding: 0!important;">PRO</code>
+          <c-form-feedback style="display: block;color: #5c5c5c;margin-top: 0;" [valid]="true"><code style="padding: 0!important;">PRO</code>
             * Force login to devices using otp for all users.(you can make exceptions for each user)</c-form-feedback>
         </c-form-check>
         <button cButton color="primary" (click)="saveSysSetting()">Save</button>
diff --git a/src/app/views/settings/settings.component.scss b/src/app/views/settings/settings.component.scss
index 0185fbf..897c549 100644
--- a/src/app/views/settings/settings.component.scss
+++ b/src/app/views/settings/settings.component.scss
@@ -7,4 +7,7 @@
 }
 .mdc-line-ripple.mdc-line-ripple--deactivating.ng-star-inserted {
   display: none!important;
+}
+.form-check-label{
+  font-weight: bold;
 }
\ No newline at end of file
diff --git a/src/app/views/settings/settings.component.ts b/src/app/views/settings/settings.component.ts
index 394a771..5501013 100644
--- a/src/app/views/settings/settings.component.ts
+++ b/src/app/views/settings/settings.component.ts
@@ -22,7 +22,6 @@ import {
 import { ToasterComponent } from "@coreui/angular";
 import { AppToastComponent } from "../toast-simple/toast.component";
 import { TimeZones } from "./timezones-data";
-import { error } from "console";
 
 @Component({
   templateUrl: "settings.component.html",
@@ -137,6 +136,14 @@ export class SettingsComponent implements OnInit {
     _self.currentFirm=firm;
     if(del){
       this.data_provider.delete_firm(this.currentFirm.id).then((res) => {
+        if ("error" in res && res.error.indexOf("Unauthorized")) {
+          _self.show_toast(
+            "Error",
+            "You are not authorized to perform this action",
+            "danger"
+          );
+        }
+        else{
         if (res.status == true){
           _self.DeleteConfirmModalVisible=false;
           _self.initFirmsTable();
@@ -148,6 +155,7 @@ export class SettingsComponent implements OnInit {
             "danger"
           );
         }
+      }
       });
     }
     else
@@ -160,6 +168,14 @@ export class SettingsComponent implements OnInit {
     this.data_provider
       .download_firmware_to_repository(this.firmtodownload)
       .then((res) => {
+        if ("error" in res && res.error.indexOf("Unauthorized")) {
+          _self.show_toast(
+            "Error",
+            "You are not authorized to perform this action",
+            "danger"
+          );
+        }
+        else{
         if (res.status == true) {
           // show toast that we are already downloading
           _self.show_toast(
@@ -177,6 +193,7 @@ export class SettingsComponent implements OnInit {
         }
         _self.ConfirmModalVisible = !_self.ConfirmModalVisible;
         _self.loading = false;
+      }
       });
   }
 
@@ -204,14 +221,34 @@ export class SettingsComponent implements OnInit {
         this.firmwaretoinstallv6
       )
       .then((res) => {
+        if ("error" in res && res.error.indexOf("Unauthorized")) {
+          _self.show_toast(
+            "Error",
+            "You are not authorized to perform this action",
+            "danger"
+          );
+        }
+        else{
         _self.initFirmsTable();
+        }
       });
   }
 
   saveSysSetting() {
     var _self = this;
     this.data_provider.save_sys_setting(this.sysconfigs).then((res) => {
-      _self.initsettings();
+      if ("error" in res && res.error.indexOf("Unauthorized")) {
+        _self.show_toast(
+          "Error",
+          "You are not authorized to perform this action",
+          "danger"
+        );
+      }
+      else{
+        _self.show_toast("Settings", "Settings saved", "success");
+        _self.initsettings();
+
+      }
     });
   }
 
@@ -244,6 +281,14 @@ export class SettingsComponent implements OnInit {
   initsettings(): void {
     var _self = this;
     this.data_provider.get_settings().then((res) => {
+      if ("error" in res && res.error.indexOf("Unauthorized")) {
+        _self.show_toast(
+          "Error",
+          "You are not authorized to perform this action",
+          "danger"
+        );
+      }
+      else{
       _self.sysconfigs = res.sysconfigs;
       _self.sysconfigs["default_user"]["value"] = "";
       _self.sysconfigs["default_password"]["value"] = "";
@@ -265,7 +310,23 @@ export class SettingsComponent implements OnInit {
           _self.sysconfigs["otp_force"]["value"]
         );
       }
+      //check if update_mode is in the sysconfigs
+      if ("update_mode" in _self.sysconfigs){
+        //convert string to json
+        _self.sysconfigs["update_mode"]["value"] = JSON.parse(_self.sysconfigs["update_mode"]["value"]);
+      }
+      else{
+        //create default update_mode and set mode to auto
+        _self.sysconfigs["update_mode"] = {
+          "value": {
+            "mode": "auto",
+            "update_back" : false,
+            "update_front" : false
+          }
+        }
+      }
       _self.SysConfigloading = false;
+    }
     });
   }
 
diff --git a/src/app/views/snippets/snippets.component.html b/src/app/views/snippets/snippets.component.html
index 2b68c32..4b3d199 100644
--- a/src/app/views/snippets/snippets.component.html
+++ b/src/app/views/snippets/snippets.component.html
@@ -159,12 +159,11 @@
 
 <c-modal #ExecutedDataModal backdrop="static" size="lg" [(visible)]="ExecutedDataModalVisible" id="ExecutedDataModal">
   <c-modal-header>
-    <h5 cModalTitle>Editing Group </h5>
+    <h5 cModalTitle>Exec history </h5>
     <button (click)="ExecutedDataModalVisible=!ExecutedDataModalVisible" cButtonClose></button>
   </c-modal-header>
   <c-modal-body>
     <c-input-group class="mb-3">
-      <h5>Group Members :</h5>
       <gui-grid [autoResizeWidth]="true" *ngIf="ExecutedDataModalVisible" [searching]="searching"
         [source]="ExecutedData" [columnMenu]="columnMenu" [sorting]="sorting" [infoPanel]="infoPanel"
        [autoResizeWidth]=true
diff --git a/src/app/views/user_manager/user_manager.component.ts b/src/app/views/user_manager/user_manager.component.ts
index 6bdc57f..d41859e 100644
--- a/src/app/views/user_manager/user_manager.component.ts
+++ b/src/app/views/user_manager/user_manager.component.ts
@@ -171,6 +171,14 @@ export class UserManagerComponent implements OnInit {
       }
       _self.SelectedUser["adminperms"] = _self.adminperms;
       this.data_provider.create_user(_self.SelectedUser).then((res) => {
+        if ("error" in res && res.error.indexOf("Unauthorized")) {
+          _self.show_toast(
+            "Error",
+            "You are not authorized to perform this action",
+            "danger"
+          );
+        }
+        else{
         if ("id" in res && !("status" in res)) {
           _self.initGridTable();
           this.EditTaskModalVisible = false;
@@ -178,6 +186,7 @@ export class UserManagerComponent implements OnInit {
           //show error
           _self.show_toast("Error", res.err, "danger");
         }
+      }
       });
     } else {
       if (_self.userperms.length > 0) {
@@ -187,8 +196,17 @@ export class UserManagerComponent implements OnInit {
       }
       _self.SelectedUser["adminperms"] = _self.adminperms;
       this.data_provider.edit_user(_self.SelectedUser).then((res) => {
+        if ("error" in res && res.error.indexOf("Unauthorized")) {
+          _self.show_toast(
+            "Error",
+            "You are not authorized to perform this action",
+            "danger"
+          );
+        }
+        else{
         _self.initGridTable();
         _self.EditTaskModalVisible = false;
+        }
       });
     }
     //
@@ -197,14 +215,32 @@ export class UserManagerComponent implements OnInit {
   editAddUser(item: any, action: string) {
     var _self = this;
     this.data_provider.get_perms(1, 1000, "").then((res) => {
+      if ("error" in res && res.error.indexOf("Unauthorized")) {
+        _self.show_toast(
+          "Error",
+          "You are not authorized to perform this action",
+          "danger"
+        );
+      }
+      else{
       _self.allPerms = res.map((x: any) => {
         return { id: x["id"], name: x.name };
       });
       _self.data_provider.get_devgroup_list().then((res) => {
+        if ("error" in res && res.error.indexOf("Unauthorized")) {
+          _self.show_toast(
+            "Error",
+            "You are not authorized to perform this action",
+            "danger"
+          );
+        }
+        else{
         _self.allDevGroups = res.map((x: any) => {
           return { id: x["id"], name: x.name };
         });
+      }
       });
+    }
     });
     if (action == "showadd") {
       this.userperms = [];
@@ -241,7 +277,6 @@ export class UserManagerComponent implements OnInit {
 
     this.data_provider.get_user_restrictions(this.SelectedUser["id"]).then((res) => {
       _self.userresttrictions = res;
-      console.log(_self.userresttrictions);
       _self.RestrictionsTaskModalVisible = true;
     });
   }
@@ -270,13 +305,23 @@ export class UserManagerComponent implements OnInit {
   }
   
   save_sec(){
+    var _self=this;
     this.data_provider.save_user_restrictions(this.SelectedUser.id,this.userresttrictions).then((res) => {
+      if ("error" in res && res.error.indexOf("Unauthorized")) {
+        _self.show_toast(
+          "Error",
+          "You are not authorized to perform this action",
+          "danger"
+        );
+      }
+      else{
       if('status' in res && res['status']=='success')
           this.RestrictionsTaskModalVisible = false;
       else if('status' in res && res['status']=='failed')
           this.show_toast("Error", res.err, "danger");
       else
           this.show_toast("Error", "Somthing went wrong", "danger");
+      }
     });
   }
   
@@ -289,9 +334,18 @@ export class UserManagerComponent implements OnInit {
         this.devgroup["id"]
       )
       .then((res) => {
+        if ("error" in res && res.error.indexOf("Unauthorized")) {
+          _self.show_toast(
+            "Error",
+            "You are not authorized to perform this action",
+            "danger"
+          );
+        }
+        else{
         _self.get_user_perms(_self.SelectedUser["id"]);
         _self.permission = 0;
         _self.devgroup = 0;
+        }
       });
   }
 
@@ -314,8 +368,17 @@ export class UserManagerComponent implements OnInit {
     } else {
       var _self = this;
       this.data_provider.delete_user(_self.SelectedUser["id"]).then((res) => {
+        if ("error" in res && res.error.indexOf("Unauthorized")) {
+          _self.show_toast(
+            "Error",
+            "You are not authorized to perform this action",
+            "danger"
+          );
+        }
+        else{
         _self.initGridTable();
         _self.DeleteConfirmModalVisible = false;
+        }
       });
     }
   }
@@ -329,8 +392,18 @@ export class UserManagerComponent implements OnInit {
   }
 
   confirm_delete_perm(item: any) {
+    var _self = this;
     this.data_provider.Delete_user_perm(item.id).then((res) => {
+      if ("error" in res && res.error.indexOf("Unauthorized")) {
+        _self.show_toast(
+          "Error",
+          "You are not authorized to perform this action",
+          "danger"
+        );
+      }
+      else{
       this.get_user_perms(this.SelectedUser["id"]);
+      }
     });
   }
   
@@ -344,11 +417,20 @@ export class UserManagerComponent implements OnInit {
     var pageSize = 10;
     var searchstr = "";
     this.data_provider.get_users(page, pageSize, searchstr).then((res) => {
+      if ("error" in res && res.error.indexOf("Unauthorized")) {
+        _self.show_toast(
+          "Error",
+          "You are not authorized to perform this action",
+          "danger"
+        );
+      }
+      else{
       _self.source = res.map((x: any) => {
         return x;
       });
       _self.SelectedUser = {};
       _self.loading = false;
+    }
     });
   }
 }
diff --git a/src/app/views/vault/vault.component.ts b/src/app/views/vault/vault.component.ts
index acf81ee..861e550 100644
--- a/src/app/views/vault/vault.component.ts
+++ b/src/app/views/vault/vault.component.ts
@@ -201,6 +201,14 @@ export class VaultComponent implements OnInit {
   get_passwords(){
     var _self=this;
     this.data_provider.get_passwords(this.filters).then((res) => {
+      if ("error" in res && res.error.indexOf("Unauthorized")) {
+        _self.show_toast(
+          "Error",
+          "You are not authorized to perform this action",
+          "danger"
+        );
+      }
+      else{
       _self.passwords=res.data.map((d: any) => {
         d.changed = formatInTimeZone(
           d.changed.split(".")[0] + ".000Z",
@@ -209,6 +217,7 @@ export class VaultComponent implements OnInit {
         );
         return d;
       });
+    }
     });
   }
 
@@ -216,8 +225,17 @@ export class VaultComponent implements OnInit {
     var _self=this;
     _self.password="";
     this.data_provider.reveal_password(devid,username).then((res) => {
+      if ("error" in res && res.error.indexOf("Unauthorized")) {
+        _self.show_toast(
+          "Error",
+          "You are not authorized to perform this action",
+          "danger"
+        );
+      }
+      else{
       _self.password=res.password;
       _self.PasswordModalVisible=true;
+      }
     });
   }
 
@@ -255,6 +273,14 @@ export class VaultComponent implements OnInit {
   get_vault_history(){
     var _self=this;
     this.data_provider.vault_history().then((res) => {
+      if ("error" in res && res.error.indexOf("Unauthorized")) {
+        _self.show_toast(
+          "Error",
+          "You are not authorized to perform this action",
+          "danger"
+        );
+      }
+      else{
       let index = 1;
       _self.vault_history=res.data.map((d: any) => {
         d.index = index;
@@ -275,6 +301,7 @@ export class VaultComponent implements OnInit {
         index += 1;
         return d;
         });
+      }
     });
   }
   

From 982406aa216c5f0ea61b96e7cca411cf13db5c2f Mon Sep 17 00:00:00 2001
From: sepehr <sepehr.ha@gmail.com>
Date: Thu, 2 Jan 2025 23:58:20 +0300
Subject: [PATCH 02/15] close modal with update cancel

---
 .../containers/default-layout/default-layout.component.ts    | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/app/containers/default-layout/default-layout.component.ts b/src/app/containers/default-layout/default-layout.component.ts
index 8830ab9..e59f4bd 100644
--- a/src/app/containers/default-layout/default-layout.component.ts
+++ b/src/app/containers/default-layout/default-layout.component.ts
@@ -250,6 +250,9 @@ export class DefaultLayoutComponent implements OnInit {
     }, 60000);
     
   }
-  clearTimer() { clearInterval(this.timer); }
+  clearTimer() {
+     clearInterval(this.timer); 
+     this.ConfirmModalVisible = false;
+    }
   
 }

From d8aa93f7ec326bd033ec94eb49b3a0561677a89e Mon Sep 17 00:00:00 2001
From: sepehr <sepehr.ha@gmail.com>
Date: Sat, 4 Jan 2025 21:13:48 +0300
Subject: [PATCH 03/15] show serial number if internet connection not availble

---
 src/app/views/dashboard/dashboard.component.html | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/app/views/dashboard/dashboard.component.html b/src/app/views/dashboard/dashboard.component.html
index fb8a721..e454cf9 100644
--- a/src/app/views/dashboard/dashboard.component.html
+++ b/src/app/views/dashboard/dashboard.component.html
@@ -144,6 +144,13 @@
           updates!</a>
       </div>
       <div *ngIf="stats['license']=='connection_error'" class="my-1">
+        <div style="display: inline-block;margin-right: 5px;">
+          <code style="padding: 0!important;">Serial:</code> <small
+            style="background-color: #ccc;padding: 5px;border-radius: 5px;cursor: pointer;" (click)="copy_this()"
+            [cdkCopyToClipboard]="stats['serial']">{{ stats['serial'] }}</small>
+          <span *ngIf="copy_msg" style="color: #fff!important;" class="badge text-bg-success mx-1"><i
+              class="fa-solid fa-check"></i>Copy</span>
+        </div>
         <c-badge class="mx-1" color="danger">Unable connect to server/Check server internet connection</c-badge>
       </div>
       <div *ngIf="stats['license']!='connection_error'" class="my-1">

From 10d4cff4a46eec2a8cfff1406c9870bf431ef723 Mon Sep 17 00:00:00 2001
From: sepehr <sepehr.ha@gmail.com>
Date: Mon, 3 Feb 2025 12:35:12 +0300
Subject: [PATCH 04/15] New menu/page for configuration sync and cloning (pro
 feature). Now displays DHCP server details along with historical lease
 information(pro feature)). Added a  ping status component for monitoring
 device connectivity. Device pages now include logs, accounting, and
 authorization data for improved tracking. New component in the device page to
 display active sessions with the ability to terminate them. Redesigned Device
 Detail Page Reload Buttons for device details page Tabs Device detail pages
 now refresh every 30 seconds. Restored the missing device logs action menu on
 the devices list page. Improved handling of duplicate serial numbers when the
 license serial is not set, with better registration status details on the
 dashboard. Various minor stability and performance improvements.

---
 src/app/app-routing.module.ts                 |   5 +
 src/app/containers/default-layout/_nav.ts     |   9 +-
 src/app/providers/mikrowizard/data.ts         |  48 ++
 src/app/views/acc_log/acc.component.html      |  18 +-
 src/app/views/acc_log/acc.component.scss      |   4 +
 src/app/views/acc_log/acc.component.ts        |  14 +-
 src/app/views/acc_log/acc.module.ts           |   5 +
 src/app/views/auth_log/auth.component.html    |  24 +-
 src/app/views/auth_log/auth.component.scss    |   4 +
 src/app/views/auth_log/auth.component.ts      |  14 +-
 src/app/views/auth_log/auth.module.ts         |   7 +-
 src/app/views/cloner/cloner-routing.module.ts |  21 +
 src/app/views/cloner/cloner.component.html    | 239 ++++++++
 src/app/views/cloner/cloner.component.ts      | 458 ++++++++++++++++
 src/app/views/cloner/cloner.module.ts         |  44 ++
 src/app/views/cloner/cloner.scss              | 133 +++++
 .../views/dashboard/dashboard.component.html  |  10 +-
 .../active-users-routing.module.ts            |  21 +
 .../active-users/active-users.component.html  |  38 ++
 .../active-users/active-users.component.scss  |   0
 .../active-users/active-users.component.ts    |  27 +
 .../active-users/active-users.module.ts       |  46 ++
 .../device-info/device-info-routing.module.ts |  21 +
 .../device-info/device-info.component.html    |  40 ++
 .../device-info/device-info.component.scss    |   0
 .../device-info/device-info.component.ts      |  25 +
 .../device-info/device-info.module.ts         |  56 ++
 .../views/device_detail/device.component.html | 517 ++++++++++--------
 .../views/device_detail/device.component.scss |  32 ++
 .../views/device_detail/device.component.ts   |  83 ++-
 src/app/views/device_detail/device.module.ts  |  25 +-
 .../dhcp-info/dhcp-info.component.html        | 168 ++++++
 .../dhcp-info/dhcp-info.component.scss        |   0
 .../dhcp-info/dhcp-info.component.ts          |  47 ++
 .../dhcp-info/dhcp-info.module.ts             |  57 ++
 .../dhcp-info/dhcp-inforouting.module.ts      |  21 +
 .../ping-status/ping-status-routing.module.ts |  21 +
 .../ping-status/ping-status.component.html    |  42 ++
 .../ping-status/ping-status.component.scss    |   0
 .../ping-status/ping-status.component.ts      |  19 +
 .../ping-status/ping-status.module.ts         |  46 ++
 .../radio-data/interface-bw.component.html    |  77 +++
 .../radio-data/radio-data-routing.module.ts   |  21 +
 .../radio-data/radio-data.component.scss      |   0
 .../radio-data/radio-data.component.ts        |  24 +
 .../radio-data/radio-data.module.ts           |  56 ++
 .../views/device_logs/devlogs.component.html  |  30 +-
 .../views/device_logs/devlogs.component.scss  |   4 +
 .../views/device_logs/devlogs.component.ts    |  15 +-
 src/app/views/device_logs/devlogs.module.ts   |   3 +
 src/app/views/devices/devices.component.html  |  25 +-
 src/app/views/devices/devices.component.ts    |   6 +
 src/app/views/syslog/syslog.component.html    |   7 +-
 src/app/views/syslog/syslog.component.scss    |   4 +
 src/app/views/syslog/syslog.module.ts         |   2 +
 55 files changed, 2412 insertions(+), 271 deletions(-)
 create mode 100644 src/app/views/cloner/cloner-routing.module.ts
 create mode 100644 src/app/views/cloner/cloner.component.html
 create mode 100644 src/app/views/cloner/cloner.component.ts
 create mode 100644 src/app/views/cloner/cloner.module.ts
 create mode 100644 src/app/views/cloner/cloner.scss
 create mode 100644 src/app/views/device_detail/active-users/active-users-routing.module.ts
 create mode 100644 src/app/views/device_detail/active-users/active-users.component.html
 create mode 100644 src/app/views/device_detail/active-users/active-users.component.scss
 create mode 100644 src/app/views/device_detail/active-users/active-users.component.ts
 create mode 100644 src/app/views/device_detail/active-users/active-users.module.ts
 create mode 100644 src/app/views/device_detail/device-info/device-info-routing.module.ts
 create mode 100644 src/app/views/device_detail/device-info/device-info.component.html
 create mode 100644 src/app/views/device_detail/device-info/device-info.component.scss
 create mode 100644 src/app/views/device_detail/device-info/device-info.component.ts
 create mode 100644 src/app/views/device_detail/device-info/device-info.module.ts
 create mode 100644 src/app/views/device_detail/dhcp-info/dhcp-info.component.html
 create mode 100644 src/app/views/device_detail/dhcp-info/dhcp-info.component.scss
 create mode 100644 src/app/views/device_detail/dhcp-info/dhcp-info.component.ts
 create mode 100644 src/app/views/device_detail/dhcp-info/dhcp-info.module.ts
 create mode 100644 src/app/views/device_detail/dhcp-info/dhcp-inforouting.module.ts
 create mode 100644 src/app/views/device_detail/ping-status/ping-status-routing.module.ts
 create mode 100644 src/app/views/device_detail/ping-status/ping-status.component.html
 create mode 100644 src/app/views/device_detail/ping-status/ping-status.component.scss
 create mode 100644 src/app/views/device_detail/ping-status/ping-status.component.ts
 create mode 100644 src/app/views/device_detail/ping-status/ping-status.module.ts
 create mode 100644 src/app/views/device_detail/radio-data/interface-bw.component.html
 create mode 100644 src/app/views/device_detail/radio-data/radio-data-routing.module.ts
 create mode 100644 src/app/views/device_detail/radio-data/radio-data.component.scss
 create mode 100644 src/app/views/device_detail/radio-data/radio-data.component.ts
 create mode 100644 src/app/views/device_detail/radio-data/radio-data.module.ts

diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 806ed24..3c4186a 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -84,6 +84,11 @@ const routes: Routes = [
         loadChildren: () =>
           import('./views/user_tasks/user_tasks.module').then((m) => m.UserTasksModule)
       },
+      {
+        path: 'cloner',
+        loadChildren: () =>
+          import('./views/cloner/cloner.module').then((m) => m.ClonerModule)
+      },
       {
         path: 'snippets',
         loadChildren: () =>
diff --git a/src/app/containers/default-layout/_nav.ts b/src/app/containers/default-layout/_nav.ts
index 6339791..d313617 100644
--- a/src/app/containers/default-layout/_nav.ts
+++ b/src/app/containers/default-layout/_nav.ts
@@ -60,10 +60,17 @@ export const navItems: INavData[] = [
     icon: 'fa-solid fa-database'
   },
   {
-    name: 'snippets',
+    name: 'Snippets',
     url: '/snippets',
     icon: 'fa-solid fa-code'
   },
+  {
+    name: 'Sync and Cloner',
+    url: '/cloner',
+    icon: 'fa-solid fa-rotate',
+    attributes: { 'pro':true }
+
+  },
   {
     name: 'Password Vault',
     url: '/vault',
diff --git a/src/app/providers/mikrowizard/data.ts b/src/app/providers/mikrowizard/data.ts
index b80fbb0..ba6c8a4 100644
--- a/src/app/providers/mikrowizard/data.ts
+++ b/src/app/providers/mikrowizard/data.ts
@@ -172,6 +172,12 @@ export class dataProvider {
         }
         return this.MikroWizardRPC.sendJsonRequest("/api/dev/radio/sensors", data);
     }
+    get_dev_dhcp_info(id: number){
+        var data={
+            'devid':id,
+        }
+        return this.MikroWizardRPC.sendJsonRequest("/api/dev/dhcp-server/get", data);
+    }
     get_dev_ifstat(id: number,delta:string="5m",iface:string="ether1",type:string="bps") {
         var data={
             'devid':id,
@@ -553,6 +559,48 @@ export class dataProvider {
         }
         return this.MikroWizardRPC.sendJsonRequest("/api/sysconfig/apply_update", data);
     }
+
+
+    get_cloner_list() {
+        return this.MikroWizardRPC.sendJsonRequest("/api/cloner/list", {});
+    }
+
+    Add_cloner(data:any,members:any) {
+        data['members']=members;
+        return this.MikroWizardRPC.sendJsonRequest("/api/cloner/create", data);
+    }
+
+    Delete_cloner(clonerid:number) {
+        var data={
+            'clonerid':clonerid,
+        }
+        return this.MikroWizardRPC.sendJsonRequest("/api/cloner/delete", data);
+    }
+
+    Edit_cloner(data:any,members:any) {
+        data['members']=members;
+        return this.MikroWizardRPC.sendJsonRequest("/api/cloner/edit", data);
+    }
+
+    get_cloner_members(clonerid:number) {
+        var data={
+            'clonerid':clonerid,
+        }
+        return this.MikroWizardRPC.sendJsonRequest("/api/cloner/memberdetails", data);
+    }
+    killSession(devid:number,item:any){
+        var data={
+            'devid':devid,
+            'item':item
+        }
+        return this.MikroWizardRPC.sendJsonRequest("/api/dev/kill_session", data);
+    }
+    getDhcpHistory(item:any){
+        var data={
+            'item':item
+        }
+        return this.MikroWizardRPC.sendJsonRequest("/api/dhcp-history/get", data);
+    }
     ////
     //// End api funcs
     ////
diff --git a/src/app/views/acc_log/acc.component.html b/src/app/views/acc_log/acc.component.html
index 159b290..3b1b9b8 100644
--- a/src/app/views/acc_log/acc.component.html
+++ b/src/app/views/acc_log/acc.component.html
@@ -1,10 +1,22 @@
 <c-row>
   <c-col xs>
-    <c-card class="mb-4">
+    <c-card class="mb-4"  [ngStyle]="component_devid && {'border-top': 'none'}">
       <c-card-header>
         <c-row>
-          <c-col xs [lg]="11">
-            Accunting Logs
+          <c-col xs [lg]="11" style="display: flex;flex-direction: column;align-items: flex-start;">
+            <h5>Accunting Logs
+              <a style="cursor: pointer;" (click)="reinitgrid('none','none')"><i
+                  *ngIf="devid!=0 && component_devid && !reloading" class="fa-solid fa-arrows-rotate"
+                  style="color: #74C0FC;"></i>
+                <i *ngIf="devid!=0 && component_devid && reloading" class="fa-solid fa-arrows-rotate fa-spin"
+                  style="color: #74C0FC;"></i>
+              </a>
+            </h5>
+            <c-badge color="warning" *ngIf="devid!=0 && !component_devid">Filtered Result For Device ID
+              {{devid}}</c-badge>
+            <c-alert color="warning" style="padding-top: 5px!important;font-size: 0.8rem;display: inline-block;" *ngIf="!filters['start_time'] && !filters['end_time']">
+              <i class="fa-solid fa-triangle-exclamation mx-1"></i>Showing <strong>last 24 hours logs</strong> by default. Use filters to modify the date and time.
+            </c-alert>
           </c-col>
           <c-col xs [lg]="1">
             <button (click)="toggleCollapse()" cButton class="me-1" color="primary"><i
diff --git a/src/app/views/acc_log/acc.component.scss b/src/app/views/acc_log/acc.component.scss
index b4a0b40..2b48719 100644
--- a/src/app/views/acc_log/acc.component.scss
+++ b/src/app/views/acc_log/acc.component.scss
@@ -94,4 +94,8 @@ padding: 1rem!important;
   .mat-mdc-form-field-infix{
       width:150px;
   }
+}
+.alert{
+  padding: 5px!important;
+  color:#644808!important;
 }
\ No newline at end of file
diff --git a/src/app/views/acc_log/acc.component.ts b/src/app/views/acc_log/acc.component.ts
index 8ad7abf..2fbf5b7 100644
--- a/src/app/views/acc_log/acc.component.ts
+++ b/src/app/views/acc_log/acc.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit,  ViewEncapsulation } from "@angular/core";
+import { Component, OnInit,  ViewEncapsulation,Input } from "@angular/core";
 import { dataProvider } from "../../providers/mikrowizard/data";
 import { Router, ActivatedRoute } from "@angular/router";
 import { loginChecker } from "../../providers/login_checker";
@@ -19,15 +19,18 @@ import { formatInTimeZone } from "date-fns-tz";
 
 
 @Component({
+  selector: 'app-acclogs',
   templateUrl: "acc.component.html",
   styleUrls: ["acc.component.scss"],
   encapsulation: ViewEncapsulation.None,
 })
 export class AccComponent implements OnInit {
+  @Input() component_devid: any=false;
   public uid: number;
   public uname: string;
   public tz: string;
   public filterText: string;
+  public reloading: boolean = false;
   public filters: any = {
     devid: false,
     ip: "",
@@ -156,7 +159,11 @@ export class AccComponent implements OnInit {
   }
 
   ngOnInit(): void {
-    this.devid = Number(this.route.snapshot.paramMap.get("devid"));
+    if (this.component_devid) {
+      this.devid = this.component_devid;
+    } else{
+      this.devid = Number(this.route.snapshot.paramMap.get("devid"));
+    }
     if (this.devid > 0) {
       this.filters["devid"] = this.devid;
     }
@@ -181,6 +188,8 @@ export class AccComponent implements OnInit {
 
   initGridTable(): void {
     var _self = this;
+    if(this.reloading) return;
+    this.reloading = true;
     this.data_provider.get_account_logs(this.filters).then((res) => {
       let index = 1;
       this.source = res.map((d: any) => {
@@ -199,6 +208,7 @@ export class AccComponent implements OnInit {
         return d;
       });
       this.loading = false;
+      this.reloading = false;
     });
   }
 }
diff --git a/src/app/views/acc_log/acc.module.ts b/src/app/views/acc_log/acc.module.ts
index 8dfbca2..1b24182 100644
--- a/src/app/views/acc_log/acc.module.ts
+++ b/src/app/views/acc_log/acc.module.ts
@@ -7,6 +7,8 @@ import {
   FormModule,
   GridModule,
   CollapseModule,
+  BadgeModule,
+  AlertModule
 } from "@coreui/angular";
 
 import { AccRoutingModule } from "./acc-routing.module";
@@ -36,7 +38,10 @@ import { FormsModule } from "@angular/forms";
     MatInputModule,
     MatDatepickerModule,
     MatSelectModule,
+    BadgeModule,
+    AlertModule
   ],
   declarations: [AccComponent],
+  exports: [AccComponent],
 })
 export class AccModule {}
diff --git a/src/app/views/auth_log/auth.component.html b/src/app/views/auth_log/auth.component.html
index d7108e6..0cee1ea 100644
--- a/src/app/views/auth_log/auth.component.html
+++ b/src/app/views/auth_log/auth.component.html
@@ -1,10 +1,22 @@
 <c-row>
   <c-col xs>
-    <c-card class="mb-4">
+    <c-card class="mb-4"  [ngStyle]="component_devid && {'border-top': 'none'}">
       <c-card-header>
         <c-row>
-          <c-col xs [lg]="11">
-            Authentication Logs
+          <c-col xs [lg]="11" style="display: flex;flex-direction: column;align-items: flex-start;">
+            <h5>Authentication Logs
+              <a style="cursor: pointer;" (click)="reinitgrid('none','none')"><i
+                  *ngIf="devid!=0 && component_devid && !reloading" class="fa-solid fa-arrows-rotate"
+                  style="color: #74C0FC;"></i>
+                <i *ngIf="devid!=0 && component_devid && reloading" class="fa-solid fa-arrows-rotate fa-spin"
+                  style="color: #74C0FC;"></i>
+              </a>
+            </h5>
+            <c-badge color="warning" *ngIf="devid!=0 && !component_devid">Filtered Result For Device ID
+              {{devid}}</c-badge>
+            <c-alert color="warning" style="padding-top: 5px!important;font-size: 0.8rem;display: inline-block;" *ngIf="!filters['start_time'] && !filters['end_time']">
+              <i class="fa-solid fa-triangle-exclamation mx-1"></i>Showing <strong>last 24 hours logs</strong> by default. Use filters to modify the date and time.
+            </c-alert>
           </c-col>
           <c-col xs [lg]="1">
             <button (click)="toggleCollapse()" cButton class="me-1" color="primary"><i
@@ -14,7 +26,7 @@
       </c-card-header>
       <c-card-body>
         <c-row>
-          <div  [visible]="filters_visible" cCollapse>
+          <div [visible]="filters_visible" cCollapse>
             <c-col xs [lg]="12" class="example-form">
               <mat-form-field>
                 <mat-label>Start date</mat-label>
@@ -55,7 +67,7 @@
                     Failed
                   </mat-option>
                 </mat-select>
-              </mat-form-field >
+              </mat-form-field>
               <mat-form-field>
                 <mat-label>Server</mat-label>
                 <mat-select placeholder="Server" (ngModelChange)="reinitgrid('server',$event)"
@@ -65,7 +77,7 @@
                     {{ac}}
                   </mat-option>
                 </mat-select>
-              </mat-form-field >
+              </mat-form-field>
               <mat-form-field>
                 <mat-label>Device IP</mat-label>
                 <input (ngModelChange)="reinitgrid('devip',$event)" [(ngModel)]="filters['devip']" matInput>
diff --git a/src/app/views/auth_log/auth.component.scss b/src/app/views/auth_log/auth.component.scss
index 302345a..466b6c4 100644
--- a/src/app/views/auth_log/auth.component.scss
+++ b/src/app/views/auth_log/auth.component.scss
@@ -34,3 +34,7 @@
     }
   }
 }
+.alert{
+  padding: 5px!important;
+  color:#644808!important;
+}
\ No newline at end of file
diff --git a/src/app/views/auth_log/auth.component.ts b/src/app/views/auth_log/auth.component.ts
index b85a7da..63f06a4 100644
--- a/src/app/views/auth_log/auth.component.ts
+++ b/src/app/views/auth_log/auth.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, ViewEncapsulation } from "@angular/core";
+import { Component, OnInit, ViewEncapsulation,Input } from "@angular/core";
 import { dataProvider } from "../../providers/mikrowizard/data";
 import { Router, ActivatedRoute } from "@angular/router";
 import { loginChecker } from "../../providers/login_checker";
@@ -30,16 +30,19 @@ interface IUser {
 }
 
 @Component({
+  selector: 'app-authlogs',
   templateUrl: "auth.component.html",
   styleUrls: ["auth.component.scss"],
   encapsulation: ViewEncapsulation.None,
 })
 export class AuthComponent implements OnInit {
+  @Input() component_devid: any=false;
   public uid: number;
   public uname: string;
   public tz: string = "UTC";
   public filterText: string;
   public devid: number = 0;
+  public reloading: boolean = false;
   public filters: any = {
     devid: false,
     ip: "",
@@ -166,7 +169,11 @@ export class AuthComponent implements OnInit {
     return str;
   }
   ngOnInit(): void {
-    this.devid = Number(this.route.snapshot.paramMap.get("devid"));
+    if (this.component_devid) {
+      this.devid = this.component_devid;
+    } else{
+      this.devid = Number(this.route.snapshot.paramMap.get("devid"));
+    }
     if (this.devid > 0) {
       this.filters["devid"] = this.devid;
     }
@@ -190,6 +197,8 @@ export class AuthComponent implements OnInit {
 
   initGridTable(): void {
     var _self = this;
+    if(this.reloading) return;
+    this.reloading = true;
     this.data_provider.get_auth_logs(this.filters).then((res) => {
       let index = 1;
       this.source = res.map((d: any) => {
@@ -217,6 +226,7 @@ export class AuthComponent implements OnInit {
         return d;
       });
       this.loading = false;
+      this.reloading = false;
     });
   }
 }
diff --git a/src/app/views/auth_log/auth.module.ts b/src/app/views/auth_log/auth.module.ts
index cc248dd..163612e 100644
--- a/src/app/views/auth_log/auth.module.ts
+++ b/src/app/views/auth_log/auth.module.ts
@@ -7,6 +7,7 @@ import {
   GridModule,
   CollapseModule,
   BadgeModule,
+  AlertModule,
 } from '@coreui/angular';
 import { AuthRoutingModule } from './auth-routing.module';
 import { AuthComponent } from './auth.component';
@@ -32,9 +33,11 @@ import {MatSelectModule} from '@angular/material/select';
     MatInputModule,
     MatDatepickerModule,
     MatSelectModule,
-    BadgeModule
+    BadgeModule,
+    AlertModule
   ],
-  declarations: [AuthComponent]
+  declarations: [AuthComponent],
+  exports: [AuthComponent],
 })
 export class AuthModule {
 }
diff --git a/src/app/views/cloner/cloner-routing.module.ts b/src/app/views/cloner/cloner-routing.module.ts
new file mode 100644
index 0000000..b9fb90c
--- /dev/null
+++ b/src/app/views/cloner/cloner-routing.module.ts
@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+import { ClonerComponent } from './cloner.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: ClonerComponent,
+    data: {
+      title: $localize`synchronization and cloner` 
+    }
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class ClonerRoutingModule {
+}
diff --git a/src/app/views/cloner/cloner.component.html b/src/app/views/cloner/cloner.component.html
new file mode 100644
index 0000000..b622ec7
--- /dev/null
+++ b/src/app/views/cloner/cloner.component.html
@@ -0,0 +1,239 @@
+<c-row>
+  <c-col xs>
+    <c-card class="mb-4">
+      <c-card-header>
+        <c-row>
+          <c-col xs [lg]="10">
+            Config synchronization and cloners
+          </c-col>
+          <c-col xs [lg]="2" style="text-align: right;">
+            <button cButton color="primary" (click)="editAddCloner({},'showadd')"><i
+                class="fa-solid fa-plus"></i></button>
+          </c-col>
+        </c-row>
+      </c-card-header>
+      <c-card-body>
+        <gui-grid [autoResizeWidth]="true" [source]="source" [columnMenu]="columnMenu" [sorting]="sorting"
+          [infoPanel]="infoPanel" [autoResizeWidth]=true>
+          <gui-grid-column header="Description" field="description">
+            <ng-template let-value="item.description" let-item="item" let-index="index">
+              {{value}}
+            </ng-template>
+          </gui-grid-column>
+          <gui-grid-column header="Members type" field="pair_type">
+            <ng-template let-value="item.pair_type" let-item="item" let-index="index">
+              {{value}}
+            </ng-template>
+          </gui-grid-column>
+          <gui-grid-column header="Runtime" field="desc_cron">
+            <ng-template let-value="item.desc_cron" let-item="item" let-index="index">
+              {{value}}
+            </ng-template>
+          </gui-grid-column>
+          <gui-grid-column header="Actions" width="120" field="action">
+            <ng-template let-value="item.id" let-item="item" let-index="index">
+              <button cButton color="warning" size="sm" (click)="editAddCloner(item,'edit');"><i
+                  class="fa-regular fa-pen-to-square"></i></button>
+              <!-- <button cButton color="info" size="sm" (click)="confirm_run(item);" class="mx-1"><i
+                  class="fa-solid fa-bolt"></i></button> -->
+              <button class=" mx-1" cButton color="danger" size="sm" (click)="confirm_delete(item);"><i
+                  class="fa-regular fa-trash-can"></i></button>
+            </ng-template>
+          </gui-grid-column>
+        </gui-grid>
+      </c-card-body>
+    </c-card>
+  </c-col>
+</c-row>
+
+  <c-modal #EditClonerModal backdrop="static" size="xl" [(visible)]="EditClonerModalVisible" id="EditClonerModal">
+    <c-modal-header>
+      <h5 *ngIf="SelectedCloner['action']=='edit'" cModalTitle>Editing Cloner {{SelectedCloner['name']}}</h5>
+      <h5 *ngIf="SelectedCloner['action']=='add'" cModalTitle>Adding new task</h5>
+      <button [cModalToggle]="EditClonerModal.id" cButtonClose></button>
+    </c-modal-header>
+    <c-modal-body>
+      <label cLabel >General data:</label>
+      <c-input-group class="mb-3">
+        <label cInputGroupText for="floatingInput">Name</label>
+        <input cFormControl id="floatingInput" placeholder="SelectedCloner['name']" [(ngModel)]="SelectedCloner['name']" />
+        <label cInputGroupText for="floatingInput">Description</label>
+        <input cFormControl id="floatingInput" placeholder="SelectedCloner['description']"
+          [(ngModel)]="SelectedCloner['description']" />
+      </c-input-group>
+      <label cLabel >Sync config and Oprating Modes:</label>
+      <c-input-group class="mb-3">
+        <label cInputGroupText for="Direction">
+          Direction
+        </label>
+        <select cSelect id="Direction" [(ngModel)]="SelectedCloner['direction']">
+          <option value="twoway">Two way</option>
+          <option value="oneway">Master mode</option>
+        </select>
+        <label cInputGroupText for="inputGroupSelect01">
+          Live Mode
+        </label>
+        <select cSelect id="inputGroupSelect01" [(ngModel)]="SelectedCloner['live_mode']">
+          <option [ngValue]="false">Deactive</option>
+          <option [ngValue]="true">Active</option>
+        </select>
+        <label *ngIf="SelectedCloner['direction']=='oneway'" cInputGroupText for="inputGroupSelect02">
+          Schedule
+        </label>
+        <select *ngIf="SelectedCloner['direction']=='oneway'" cSelect id="inputGroupSelect02"  [(ngModel)]="SelectedCloner['schedule']">
+          <option [ngValue]="false">Deactive</option>
+          <option [ngValue]="true">Active</option>
+        </select>
+        <label cInputGroupText  *ngIf="SelectedCloner['schedule'] && SelectedCloner['direction']=='oneway'"  for="cron">cron</label>
+          <input cFormControl  *ngIf="SelectedCloner['schedule'] && SelectedCloner['direction']=='oneway'"  id="cron" placeholder="Cron" [(ngModel)]="SelectedCloner['cron']" />
+      </c-input-group>
+      <label cLabel >Peers Setting:</label>
+      <c-input-group class="mb-3">
+        <label cInputGroupText for="inputGroupSelect03">
+          Peers type
+        </label>
+        <select cSelect id="inputGroupSelect03"  (change)="form_changed()" [(ngModel)]="SelectedCloner['pair_type']">
+          <option value="devices">Devices</option>
+          <option value="groups" *ngIf="SelectedCloner['direction']=='oneway'">Groups</option>
+        </select>
+      </c-input-group>
+
+      <c-col xs style="border: 1px solid #ddd; border-radius: 4px; padding: 0;">
+        <div class="nav nav-underline" style="background: #fff; border-bottom: 2px solid #2c3e50;">
+          <div class="nav-item" *ngFor="let tab of tabs; let i = index">
+            <a class="nav-link" [active]="i==0" [cTabContent]="tabContent" [tabPaneIdx]="i">{{ tab.name }}</a>
+          </div>
+        </div>
+        <c-tab-content class="command-sections"  style="padding: 10px!important;min-height: 150px;"  #tabContent="cTabContent">
+          <c-tab-pane *ngFor="let tab of tabs; let i = index">
+            <div class="section" *ngFor="let section of tab.sections">
+              <h5 class="cloner-sections">{{ section.title }}</h5>
+              <div class="row">
+                <div class="col-4" *ngFor="let command of section.commands">
+                  <c-card style="margin-bottom: 5px;">
+                    <c-card-body class="p-2">
+                      <h6 class="card-title mb-1">{{ command }}</h6>
+                      <div class="custom-switch">
+                        <input type="checkbox" class="custom-control-input" [checked]="in_active_commands(command)" (click)="activate_command(command)" [id]="command.replace('/', '')">
+                        <label class="custom-control-label" [for]="command.replace('/', '')"></label>
+                      </div>
+                    </c-card-body>
+                  </c-card>
+                </div>
+              </div>
+            </div>
+          </c-tab-pane>
+        </c-tab-content>
+      </c-col>
+
+      <h5>Peers :</h5>
+      <gui-grid [autoResizeWidth]="true" [source]="SelectedMembers" [columnMenu]="columnMenu" [sorting]="sorting"
+         [rowSelection]="rowSelection" [autoResizeWidth]=true [paging]="paging">
+        <gui-grid-column header="Name" field="name">
+          <ng-template let-value="item.name" let-item="item" let-index="index">
+            <i class="fa-solid fa-m" style="color: #ff3300;" *ngIf="SelectedCloner['direction']=='oneway' && item.id==master"></i>
+            &nbsp; {{value}} </ng-template>
+        </gui-grid-column>
+        <gui-grid-column *ngIf="SelectedCloner['pair_type']=='devices'" header="MAC" field="mac">
+          <ng-template let-value="item.mac" let-item="item" let-index="index">
+            {{value}}
+          </ng-template>
+        </gui-grid-column>
+        <gui-grid-column header="Actions" width="120" field="action">
+          <ng-template let-value="item.id" let-item="item" let-index="index">
+            <button cButton color="danger" size="sm" [cTooltip]="'Delete Member'" (click)="remove_member(item)"><i
+                class="fa-regular fa-trash-can"></i></button>
+            <button  *ngIf="SelectedCloner['direction']=='oneway'" cButton color="success" size="sm" style="margin-left: 5px;" [cTooltip]="'Set as Master'" (click)="set_master(item.id)"><i class="fa-regular fa-star"></i></button>
+          </ng-template>
+        </gui-grid-column>
+      </gui-grid>
+      <hr />
+      <button cButton color="primary" (click)="show_new_member_form()">+ Add new Members</button>
+    </c-modal-body>
+    <c-modal-footer>
+      <button *ngIf="SelectedCloner['action']=='add'" (click)="submit('add')" cButton color="primary">Add</button>
+      <button *ngIf="SelectedCloner['action']=='edit'" (click)="submit('edit')" cButton color="primary">save</button>
+      <button [cModalToggle]="EditClonerModal.id" cButton color="secondary">
+        Close
+      </button>
+    </c-modal-footer>
+  </c-modal>
+
+
+  <c-modal #NewMemberModal backdrop="static" size="lg" [(visible)]="NewMemberModalVisible" id="NewMemberModal">
+    <c-modal-header>
+      <h5 cModalTitle>Editing Group </h5>
+      <button (click)="NewMemberModalVisible=!NewMemberModalVisible" cButtonClose></button>
+    </c-modal-header>
+    <c-modal-body>
+      <c-input-group class="mb-3">
+        <h5>Group Members :</h5>
+        <gui-grid [autoResizeWidth]="true" *ngIf="NewMemberModalVisible" [searching]="searching"
+          [source]="availbleMembers" [columnMenu]="columnMenu" [sorting]="sorting" [infoPanel]="infoPanel"
+          [rowSelection]="rowSelection" (selectedRows)="onSelectedRowsNewMembers($event)" [autoResizeWidth]=true
+          [paging]="paging">
+          <gui-grid-column header="Member Name" field="name">
+            <ng-template let-value="item.name" let-item="item" let-index="index">
+              &nbsp; {{value}} </ng-template>
+          </gui-grid-column>
+          <gui-grid-column *ngIf="SelectedCloner['pair_type']=='devices'" header="IP Address" field="ip">
+            <ng-template let-value="item.ip" let-item="item" let-index="index">
+              {{value}}
+            </ng-template>
+          </gui-grid-column>
+          <gui-grid-column *ngIf="SelectedCloner['pair_type']=='devices'" header="MAC Address" field="mac">
+            <ng-template let-value="item.mac" let-item="item" let-index="index">
+              {{value}}
+            </ng-template>
+          </gui-grid-column>
+        </gui-grid>
+        <br />
+      </c-input-group>
+      <hr />
+    </c-modal-body>
+
+    <c-modal-footer>
+      <button *ngIf="NewMemberRows.length!= 0" (click)="add_new_members()" cButton color="primary">Add {{
+        NewMemberRows.length }}</button>
+      <button (click)="NewMemberModalVisible=!NewMemberModalVisible" cButton color="secondary">
+        Close
+      </button>
+    </c-modal-footer>
+  </c-modal>
+
+
+  <c-modal #DeleteConfirmModal backdrop="static" [(visible)]="DeleteConfirmModalVisible" id="DeleteConfirmModal">
+    <c-modal-header>
+      <h5 cModalTitle>Confirm delete {{ SelectedCloner['name'] }}</h5>
+      <button [cModalToggle]="DeleteConfirmModal.id" cButtonClose></button>
+    </c-modal-header>
+    <c-modal-body>
+      Are you sure that You want to delete following task ?
+      <br />
+      <br />
+      <table style="width: 100%;">
+        <tr>
+          <td><b>Taks name : </b></td>
+          <td>{{ SelectedCloner['name'] }}</td>
+        </tr>
+        <tr>
+          <td><b>Description : </b></td>
+          <td>{{ SelectedCloner['description'] }}</td>
+        </tr>
+        <tr>
+          <td><b>Cron exec : </b></td>
+          <td>{{ SelectedCloner['desc_cron'] }}</td>
+        </tr>
+      </table>
+    </c-modal-body>
+    <c-modal-footer>
+      <button (click)="confirm_delete('',true)" cButton color="danger">
+        Yes,Delete!
+      </button>
+      <button [cModalToggle]="DeleteConfirmModal.id" cButton color="info">
+        Close
+      </button>
+    </c-modal-footer>
+  </c-modal>
+
+  <c-toaster position="fixed" placement="top-end"></c-toaster>
\ No newline at end of file
diff --git a/src/app/views/cloner/cloner.component.ts b/src/app/views/cloner/cloner.component.ts
new file mode 100644
index 0000000..70a8a90
--- /dev/null
+++ b/src/app/views/cloner/cloner.component.ts
@@ -0,0 +1,458 @@
+import { Component, OnInit, OnDestroy, ViewChildren ,QueryList } from "@angular/core";
+import { dataProvider } from "../../providers/mikrowizard/data";
+import { Router } from "@angular/router";
+import { loginChecker } from "../../providers/login_checker";
+import {
+  GuiSelectedRow,
+  GuiSearching,
+  GuiInfoPanel,
+  GuiColumn,
+  GuiColumnMenu,
+  GuiPaging,
+  GuiPagingDisplay,
+  GuiRowSelectionMode,
+  GuiRowSelection,
+  GuiRowSelectionType,
+} from "@generic-ui/ngx-grid";
+import { NgxSuperSelectOptions } from "ngx-super-select";
+import { _getFocusedElementPierceShadowDom } from "@angular/cdk/platform";
+
+
+import { ToasterComponent } from "@coreui/angular";
+import { AppToastComponent } from "../toast-simple/toast.component";
+
+@Component({
+  templateUrl: "cloner.component.html",
+  styleUrls: ["cloner.scss"],
+
+})
+export class ClonerComponent implements OnInit {
+  public uid: number;
+  public uname: string;
+  public ispro: boolean = false;
+
+  constructor(
+    private data_provider: dataProvider,
+    private router: Router,
+    private login_checker: loginChecker
+  ) {
+    var _self = this;
+    if (!this.login_checker.isLoggedIn()) {
+      setTimeout(function () {
+        _self.router.navigate(["login"]);
+      }, 100);
+    }
+    this.data_provider.getSessionInfo().then((res) => {
+      _self.uid = res.uid;
+      _self.uname = res.name;
+      _self.ispro = res['ISPRO']
+      const userId = _self.uid;
+
+      if (res.role != "admin") {
+        setTimeout(function () {
+          _self.router.navigate(["/user/dashboard"]);
+        }, 100);
+      }
+    });
+    //get datagrid data
+    function isNotEmpty(value: any): boolean {
+      return value !== undefined && value !== null && value !== "";
+    }
+  }
+  @ViewChildren(ToasterComponent) viewChildren!: QueryList<ToasterComponent>;
+  
+  public source: Array<any> = [];
+  public columns: Array<GuiColumn> = [];
+  public loading: boolean = true;
+  public rows: any = [];
+  public SelectedCloner: any = {};
+  public SelectedClonerItems: any = "";
+  public EditClonerModalVisible: boolean = false;
+  public DeleteConfirmModalVisible: boolean = false;
+  public Members: any = "";
+  public SelectedMembers: any = [];
+  public NewMemberModalVisible: boolean = false;
+  public availbleMembers: any = [];
+  public NewMemberRows: any = [];
+  public SelectedNewMemberRows: any;
+  public master: number = 0;
+  public active_commands:any=[];
+  public tabs:any=[
+      {
+        "name": "Network",
+        "sections": [
+          {
+            "title": "IP Management",
+            "commands": [
+              "/ip address",
+              "/ip cloud",
+              "/ip dhcp-server",
+              "/ip dns",
+              "/ip pool",
+              "/ip route",
+              "/ip vrf"
+            ]
+          },
+          {
+            "title": "IP Services",
+            "commands": [
+              "/ip service"
+            ]
+          }
+        ]
+      },
+      {
+        "name": "Security",
+        "sections": [
+          {
+            "title": "Firewall",
+            "commands": [
+              "/ip firewall address-list",
+              "/ip firewall connection",
+              "/ip firewall layer7-protocol",
+              "/ip firewall nat",
+              "/ip firewall service-port",
+              "/ip firewall calea",
+              "/ip firewall filter",
+              "/ip firewall mangle",
+              "/ip firewall raw"
+            ]
+          },
+          {
+            "title": "IPSec",
+            "commands": [
+              "/ip ipsec identity",
+              "/ip ipsec key",
+              "/ip ipsec peer",
+              "/ip ipsec profile",
+              "/ip ipsec settings",
+              "/ip ipsec statistics",
+              "/ip ipsec proposal",
+              "/ip ipsec policy",
+              "/ip ipsec mode-config",
+              "/ip ipsec active-peers",
+              "/ip ipsec installed-sa"
+            ]
+          }
+        ]
+      },
+      {
+        "name": "System",
+        "sections": [
+          {
+            "title": "Scripts & Scheduling",
+            "commands": [
+              "/system script",
+              "/system scheduler"
+            ]
+          },
+          {
+            "title": "Time Management",
+            "commands": [
+              "/system ntp client servers",
+              "/system ntp client",
+              "/system ntp server",
+              "/system clock"
+            ]
+          },
+          {
+            "title": "RADIUS",
+            "commands": [
+              "/radius"
+            ]
+          }
+        ]
+      },
+      {
+        "name": "MPLS",
+        "sections": [
+          {
+            "title": "MPLS Configuration",
+            "commands": [
+              "/mpls forwarding-table",
+              "/mpls interface",
+              "/mpls ldp",
+              "/mpls settings",
+              "/mpls traffic-eng"
+            ]
+          },
+          {
+            "title": "VPLS",
+            "commands": [
+              "/interface vpls"
+            ]
+          }
+        ]
+      }
+    ];
+  
+  public sorting = {
+    enabled: true,
+    multiSorting: true,
+  };
+  searching: GuiSearching = {
+    enabled: true,
+    placeholder: "Search Devices",
+  };
+
+  options: Partial<NgxSuperSelectOptions> = {
+    selectionMode: "single",
+    actionsEnabled: false,
+    displayExpr: "name",
+    valueExpr: "id",
+    placeholder: "Snippet",
+    searchEnabled: true,
+    enableDarkMode: false,
+  };
+
+  public paging: GuiPaging = {
+    enabled: true,
+    page: 1,
+    pageSize: 10,
+    pageSizes: [5, 10, 25, 50],
+    display: GuiPagingDisplay.ADVANCED,
+  };
+
+  public columnMenu: GuiColumnMenu = {
+    enabled: true,
+    sort: true,
+    columnsManager: true,
+  };
+
+  toasterForm = {
+    autohide: true,
+    delay: 3000,
+    position: "fixed",
+    fade: true,
+    closeButton: true,
+  };
+
+  public infoPanel: GuiInfoPanel = {
+    enabled: true,
+    infoDialog: false,
+    columnsManager: true,
+    schemaManager: true,
+  };
+
+  public rowSelection: boolean | GuiRowSelection = {
+    enabled: true,
+    type: GuiRowSelectionType.CHECKBOX,
+    mode: GuiRowSelectionMode.MULTIPLE,
+  };
+  activate_command(command:string){
+    // add to active_commands if it not added before
+    if(!this.active_commands.includes(command)){
+      this.active_commands.push(command);
+    }
+    else{
+      this.active_commands=this.active_commands.filter((x:any)=>x!=command);
+    }
+  }
+  show_toast(title: string, body: string, color: string) {
+    const { ...props } = { ...this.toasterForm, color, title, body };
+    const componentRef = this.viewChildren.first.addToast(
+      AppToastComponent,
+      props,
+      {}
+    );
+    componentRef.instance["closeButton"] = props.closeButton;
+  }
+  show_new_member_form() {
+    this.NewMemberModalVisible = true;
+    var _self = this;
+    _self.availbleMembers = [];
+    this.SelectedNewMemberRows = [];
+    this.NewMemberRows = [];
+
+    var data = {
+      group_id: false,
+      search: false,
+      page: false,
+      size: 10000,
+    };
+
+    if (this.SelectedCloner["pair_type"] == "devices")
+      _self.data_provider.get_dev_list(data).then((res) => {
+        _self.availbleMembers = res.filter(
+          (x: any) => !_self.SelectedClonerItems.includes(x.id)
+        );
+        _self.NewMemberModalVisible = true;
+      });
+    else
+      _self.data_provider.get_devgroup_list().then((res) => {
+        _self.availbleMembers = res.filter(
+          (x: any) => !_self.SelectedClonerItems.includes(x.id)
+        );
+        _self.NewMemberModalVisible = true;
+      });
+  }
+
+  ngOnInit(): void {
+    this.initGridTable();
+  }
+
+  submit(action: string) {
+    var _self = this;
+    if(_self.master==0 && _self.SelectedCloner['direction']=='oneway'){
+      _self.show_toast(
+        "Error",
+        "Master device is not selected",
+        "danger"
+      );
+      return;
+    }
+    if(_self.SelectedCloner['direction']=='twoway' && _self.SelectedCloner['pair_type']=='groups'){
+      _self.show_toast(
+        "Error",
+        "Using Groups is only allowed with Master Mode",
+        "danger"
+      );
+      return;  
+    }
+    if (_self.master!=0 && _self.SelectedCloner['direction']=='oneway'){
+      _self.SelectedCloner["masterid"]=_self.master;
+    }
+    _self.SelectedCloner["active_commands"]=_self.active_commands;
+    if (action == "add") {
+      this.data_provider
+        .Add_cloner(_self.SelectedCloner, _self.SelectedClonerItems)
+        .then((res) => {
+          _self.initGridTable();
+        });
+    } else {
+      this.data_provider
+        .Edit_cloner(_self.SelectedCloner, _self.SelectedClonerItems)
+        .then((res) => {
+          _self.initGridTable();
+        });
+    }
+    this.EditClonerModalVisible = false;
+  }
+
+  onSelectedRowsNewMembers(rows: Array<GuiSelectedRow>): void {
+    this.NewMemberRows = rows;
+    this.SelectedNewMemberRows = rows.map((m: GuiSelectedRow) => m.source);
+  }
+
+  add_new_members() {
+    var _self = this;
+    _self.SelectedMembers = [
+      ...new Set(_self.SelectedMembers.concat(_self.SelectedNewMemberRows)),
+    ];
+
+    _self.SelectedClonerItems = _self.SelectedMembers.map((x: any) => {
+      return x.id;
+    });
+
+    this.NewMemberModalVisible = false;
+  }
+
+  set_master(id:number){
+    var _self=this;
+    this.master=id;
+    // sort SelectedMembers and put master on top
+    this.SelectedMembers=
+    [
+      ...new Set(
+        this.SelectedMembers.sort((a:any,b:any)=>{
+          if(a.id==_self.master) return -1;
+          if(b.id==_self.master) return 1;
+          return 0;
+        })
+
+      ),
+    ];
+  }
+
+
+  editAddCloner(item: any, action: string) {
+    if (action == "showadd") {
+      this.SelectedCloner = {
+        id: 0,
+        name: "",
+        description: "",
+        pair_type: "devices",
+        live_mode: false,
+        schedule: false,
+        cron: "",
+        desc_cron: "",
+        direction: "oneway",
+        members: "",
+        action: "add",
+      };
+      this.SelectedMembers = [];
+      this.SelectedClonerItems = [];
+      this.EditClonerModalVisible = true;
+      return;
+    }
+
+    var _self = this;
+    this.SelectedCloner = { ...item };
+    this.active_commands=item['active_commands']?JSON.parse(item['active_commands']):[];
+    if (action != "select_change" ) {
+      this.SelectedCloner["action"] = "edit";
+      this.data_provider.get_cloner_members(_self.SelectedCloner.id).then((res) => {
+        _self.SelectedMembers = res;
+        if(_self.SelectedCloner["master"] && _self.SelectedCloner['direction']=='oneway'){
+          _self.set_master(_self.SelectedCloner["master"]);
+        }
+        _self.EditClonerModalVisible = true;
+        _self.SelectedClonerItems = res.map((x: any) => {
+          return x.id;
+        });
+      });
+    } else {
+      _self.SelectedMembers = [];
+      this.SelectedClonerItems = [];
+    }
+  }
+
+
+  in_active_commands(command:string){
+    return this.active_commands.includes(command);
+  }
+  remove_member(item: any) {
+    var _self = this;
+    _self.SelectedMembers = _self.SelectedMembers.filter(
+      (x: any) => x.id != item.id
+    );
+    _self.SelectedClonerItems = _self.SelectedMembers.map((x: any) => {
+      return x.id;
+    });
+  }
+
+  get_member_by_id(id: string) {
+    return this.Members.find((x: any) => x.id == id);
+  }
+
+  confirm_delete(item: any = "", del: boolean = false) {
+    if (!del) {
+      this.SelectedCloner = { ...item };
+      this.DeleteConfirmModalVisible = true;
+    } else {
+      var _self = this;
+      this.data_provider.Delete_cloner(_self.SelectedCloner["id"]).then((res) => {
+        _self.initGridTable();
+        _self.DeleteConfirmModalVisible = false;
+      });
+    }
+  }
+
+  form_changed() {
+    this.editAddCloner(this.SelectedCloner, "select_change");
+  }
+
+  logger(item: any) {
+    console.dir(item);
+  }
+
+  initGridTable(): void {
+    var _self = this;
+    this.data_provider.get_cloner_list().then((res) => {
+      _self.source = res.map((x: any) => {
+        return x;
+      });
+      _self.loading = false;
+    });
+  }
+}
diff --git a/src/app/views/cloner/cloner.module.ts b/src/app/views/cloner/cloner.module.ts
new file mode 100644
index 0000000..d42f20e
--- /dev/null
+++ b/src/app/views/cloner/cloner.module.ts
@@ -0,0 +1,44 @@
+import { NgModule } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { FormsModule,ReactiveFormsModule } from "@angular/forms";
+
+import {
+  ButtonModule,
+  CardModule,
+  FormModule,
+  GridModule,
+  ModalModule,
+  ButtonGroupModule,
+  ToastModule,
+  TooltipModule,
+  NavModule, 
+  TabsModule,
+} from "@coreui/angular";
+import { ClonerRoutingModule } from "./cloner-routing.module";
+import { ClonerComponent } from "./cloner.component";
+import { GuiGridModule } from "@generic-ui/ngx-grid";
+
+import { NgxSuperSelectModule} from "ngx-super-select";
+
+@NgModule({
+  imports: [
+    ClonerRoutingModule,
+    CardModule,
+    CommonModule,
+    GridModule,
+    FormModule,
+    ButtonModule,
+    ButtonGroupModule,
+    GuiGridModule,
+    ModalModule,
+    ReactiveFormsModule,
+    FormsModule,
+    NgxSuperSelectModule,
+    ToastModule,
+    TooltipModule,
+    NavModule, 
+    TabsModule,
+  ],
+  declarations: [ClonerComponent],
+})
+export class ClonerModule {}
diff --git a/src/app/views/cloner/cloner.scss b/src/app/views/cloner/cloner.scss
new file mode 100644
index 0000000..a502ea6
--- /dev/null
+++ b/src/app/views/cloner/cloner.scss
@@ -0,0 +1,133 @@
+
+.nav-underline {
+    border-bottom: 2px solid var(--cui-nav-underline-border-color, #c4c9d0)
+}
+
+.nav-underline .nav-item {
+    margin-bottom: -2px;
+    cursor: pointer;
+}
+
+.nav-underline .nav-link {
+    color: var(--cui-nav-underline-link-color, #768192);
+    border-style: none none solid!important;
+    border-width:2px;
+    position:relative;
+    bottom:-1px;
+    cursor: pointer;
+
+}
+
+.nav-underline .nav-link:hover,.nav-underline .nav-link:focus {
+    border-color: var(--cui-nav-underline-link-active-border-color, #321fdb)
+}
+
+.nav-underline .nav-link.active,.nav-underline .show>.nav-link {
+    color: var(--cui-nav-underline-link-active-color, #321fdb);
+    background: transparent;
+    border-color: var(--cui-nav-underline-link-active-border-color, #321fdb)
+}
+
+
+
+
+
+
+.custom-control-label::before, .custom-control-label::after {
+    top: 0.1rem;
+    width: 2rem;
+    height: 1rem;
+  }
+  
+  .custom-control-input:checked ~ .custom-control-label::before {
+    color: #fff;
+    border-color: #3498db;
+    background-color: #3498db;
+  }
+  
+  .custom-control-input:focus ~ .custom-control-label::before {
+    box-shadow: 0 0 0 0.2rem rgba(52, 152, 219, 0.25);
+  }
+  
+  h5.cloner-sections {
+    color: #3498db;
+    margin-bottom: 5px;
+    font-size: 15px;
+    font-weight: 600;  }
+  
+  .nav-link {
+    color: #333;
+  }
+  
+  .nav-link.active {
+    color: #3498db;
+    border-bottom: 2px solid #3498db;
+  }
+
+  .command-sections  c-card-body{
+    display: flex!important;
+    justify-content: space-between!important;
+    padding:5px!important;
+    align-items: center!important;
+    justify-content: space-between!important;
+    border-radius: 4px;
+}
+
+.command-sections  c-card-body h6{
+    margin: 0!important;
+    font-size: 12px!important;
+    color: var(--primary-color);
+    white-space: nowrap!important;
+    overflow: hidden!important;
+    text-overflow: ellipsis!important;
+    width: 80%!important;
+        font-weight: bold;
+
+}
+.command-sections  c-card{
+    border: 1px solid #e0e0e0!important;;
+    border-radius: 4px!important;;
+}
+
+    /* Checkbox Styling */
+    .custom-switch {
+        position: relative;
+        width: 40px;
+        height: 20px;
+      }
+      
+      .custom-switch input {
+        display: none;
+      }
+      
+      .custom-control-label {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        border-radius: 20px;
+        background: #ccc;
+        cursor: pointer;
+        transition: all 0.3s ease;
+      }
+      
+      .custom-control-label::after {
+        content: '';
+        position: absolute;
+        left: 2px;
+        top: 2px;
+        width: 16px;
+        height: 16px;
+        background: #fff;
+        border-radius: 50%;
+        transition: all 0.3s ease;
+      }
+      
+      .custom-switch input:checked + .custom-control-label {
+        background: #3498db;
+      }
+      
+      .custom-switch input:checked + .custom-control-label::after {
+        left: calc(100% - 18px);
+      }
\ No newline at end of file
diff --git a/src/app/views/dashboard/dashboard.component.html b/src/app/views/dashboard/dashboard.component.html
index e454cf9..af6b2e9 100644
--- a/src/app/views/dashboard/dashboard.component.html
+++ b/src/app/views/dashboard/dashboard.component.html
@@ -139,9 +139,8 @@
           <span *ngIf="copy_msg" style="color: #fff!important;" class="badge text-bg-success"><i
               class="fa-solid fa-check"></i>Copy</span>
         </div>
-        <c-badge color="danger">Not Registred</c-badge>
-        <a class="mx-1" target="_blank" href="http://MikroWizard.com">Learn how to register and get automatic
-          updates!</a>
+        <c-badge *ngIf="stats['username']" color="danger">Not Registred</c-badge>
+        <c-badge *ngIf="!stats['username']" color="danger">License Validation failed</c-badge>
       </div>
       <div *ngIf="stats['license']=='connection_error'" class="my-1">
         <div style="display: inline-block;margin-right: 5px;">
@@ -153,7 +152,7 @@
         </div>
         <c-badge class="mx-1" color="danger">Unable connect to server/Check server internet connection</c-badge>
       </div>
-      <div *ngIf="stats['license']!='connection_error'" class="my-1">
+      <div *ngIf="stats['license']!='connection_error' && stats['license']" class="my-1">
         <div style="display: inline-block;margin-right: 5px;">
           <code style="padding: 0!important;">Serial:</code> <small
             style="background-color: #ccc;padding: 5px;border-radius: 5px;cursor: pointer;" (click)="copy_this()"
@@ -190,6 +189,9 @@
               class="fa-regular fa-hand-pointer fa-beat-fade"></i> Update availble </button>
         </span>
       </div>
+      <p  *ngIf="!stats['license'] && !stats['username']" style="color: rgb(0, 119, 255);"><strong>License User name is not set in settings <a style="color: rgb(0, 119, 255);" target="_blank" href="https://mikrowizard.com/docs/register-serial-number/" >read more!</a></strong></p>
+      <p  *ngIf="!stats['license'] &&  stats['username']" style="color: rgb(0, 119, 255);"><strong>Serial number not submited<a style="color: rgb(0, 119, 255);" target="_blank" href="https://mikrowizard.com/docs/register-serial-number/" >read more!</a></strong> </p>
+
       <!-- <div *ngIf="stats['update_mode']!='auto'" class="my-1">
         <button cButton color="warning" *ngIf="stats['update_available']" size="sm" style="font-size: 1em;"><i class="fa-regular fa-hand-pointer fa-beat-fade"></i> Update <strong>Mikroman</strong> and reload server</button>
         <button cButton color="warning" *ngIf="stats['front_update_available']" size="sm" style="font-size: 1em;margin-left: 5px;"><i class="fa-regular fa-hand-pointer fa-beat-fade"></i> Update <strong>MikroFront</strong> and reload Page</button>
diff --git a/src/app/views/device_detail/active-users/active-users-routing.module.ts b/src/app/views/device_detail/active-users/active-users-routing.module.ts
new file mode 100644
index 0000000..ab5a4a4
--- /dev/null
+++ b/src/app/views/device_detail/active-users/active-users-routing.module.ts
@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { ActiveUsersComponent } from './active-users.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: ActiveUsersComponent,
+    data: {
+      title: 'Widgets'
+    }
+  }
+];
+
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class ActiveUsersRoutingModule {
+}
diff --git a/src/app/views/device_detail/active-users/active-users.component.html b/src/app/views/device_detail/active-users/active-users.component.html
new file mode 100644
index 0000000..5dca6d7
--- /dev/null
+++ b/src/app/views/device_detail/active-users/active-users.component.html
@@ -0,0 +1,38 @@
+<c-row>
+  <c-col xs>
+    <c-card class="mb-1" style="border: none">
+      <c-card-header>
+        <h6>Active Users</h6>
+      </c-card-header>
+      <c-card-body style="height: 275px;overflow: auto;">
+        <h5 style="display: inline-block;">Current active users : <c-badge color="success">
+            {{active_users.length}}</c-badge></h5>
+        <table cTable small [responsive]="true">
+          <thead>
+            <tr>
+              <th scope="col">#</th>
+              <th scope="col">Address</th>
+              <th scope="col">Att</th>
+              <th scope="col">Group</th>
+              <th scope="col">Name</th>
+              <th scope="col">Via</th>
+              <th scope="col">kill</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr *ngFor="let item of active_users; index as i">
+              <td>{{i+1}}</td>
+              <td>{{item['address']}}</td>
+              <td>{{item['when']}}</td>
+              <td>{{item['group']}}</td>
+              <td>{{item['name']}}</td>
+              <td>{{item['via']}}</td>
+              <td><button cButton (click)="killsession(item)" style="padding: 0;" size="sm" color="danger" variant="ghost"><i class="fa-solid fa-skull-crossbones"></i>
+                    kill</button></td>
+            </tr>
+          </tbody>
+        </table>
+      </c-card-body>
+    </c-card>
+  </c-col>
+</c-row>
\ No newline at end of file
diff --git a/src/app/views/device_detail/active-users/active-users.component.scss b/src/app/views/device_detail/active-users/active-users.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/views/device_detail/active-users/active-users.component.ts b/src/app/views/device_detail/active-users/active-users.component.ts
new file mode 100644
index 0000000..215c1d7
--- /dev/null
+++ b/src/app/views/device_detail/active-users/active-users.component.ts
@@ -0,0 +1,27 @@
+import { AfterContentInit, ChangeDetectionStrategy, ChangeDetectorRef, Component,Input } from '@angular/core';
+import { dataProvider } from "../../../providers/mikrowizard/data";
+@Component({
+  selector: 'app-active-users',
+  templateUrl: './active-users.component.html',
+  styleUrls: ['./active-users.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Default
+})
+export class ActiveUsersComponent implements AfterContentInit {
+  @Input() active_users: any;
+  @Input() devid: number;
+
+  constructor(
+    private changeDetectorRef: ChangeDetectorRef,
+    private data_provider: dataProvider,
+  ) {}
+  killsession(item:any){
+    console.log(item);
+    this.data_provider.killSession(this.devid,item).then((res) => {
+      this.active_users = res;
+    });
+  }
+  ngAfterContentInit(): void {
+
+    this.changeDetectorRef.detectChanges();
+  }
+}
diff --git a/src/app/views/device_detail/active-users/active-users.module.ts b/src/app/views/device_detail/active-users/active-users.module.ts
new file mode 100644
index 0000000..65adf0b
--- /dev/null
+++ b/src/app/views/device_detail/active-users/active-users.module.ts
@@ -0,0 +1,46 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import {
+  ButtonGroupModule,
+  ButtonModule,
+  CardModule,
+  FormModule,
+  GridModule,
+  ProgressModule,
+  NavbarModule,
+  ModalModule,
+  TableModule, 
+  UtilitiesModule,
+  BadgeModule,
+  TooltipModule,
+} from '@coreui/angular';
+
+// import { WidgetsRoutingModule } from './widgets-routing.module';
+import { ActiveUsersComponent } from './active-users.component';
+
+@NgModule({
+  declarations: [
+    ActiveUsersComponent,
+  ],
+  imports: [  
+      CardModule,
+      CommonModule,
+      GridModule,
+      ProgressModule,
+      FormModule,
+      ButtonModule,
+      ButtonGroupModule,
+      NavbarModule,
+      ModalModule,
+      TableModule, 
+      UtilitiesModule,
+      BadgeModule,
+      TooltipModule,
+  ],
+  exports: [
+    ActiveUsersComponent,
+  ]
+})
+export class ActiveUsersModule {
+}
diff --git a/src/app/views/device_detail/device-info/device-info-routing.module.ts b/src/app/views/device_detail/device-info/device-info-routing.module.ts
new file mode 100644
index 0000000..4d141ab
--- /dev/null
+++ b/src/app/views/device_detail/device-info/device-info-routing.module.ts
@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { DeviceInfoComponent } from './device-info.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: DeviceInfoComponent,
+    data: {
+      title: 'Widgets'
+    }
+  }
+];
+
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class DeviceInfoRoutingModule {
+}
diff --git a/src/app/views/device_detail/device-info/device-info.component.html b/src/app/views/device_detail/device-info/device-info.component.html
new file mode 100644
index 0000000..a20b979
--- /dev/null
+++ b/src/app/views/device_detail/device-info/device-info.component.html
@@ -0,0 +1,40 @@
+
+<c-row>
+  <c-col xs>
+    <c-card class="mb-1" style="border: none;">
+      <c-card-body style="padding: 0;">
+        <c-row style="flex-direction:row">
+        <c-input-group class="mr-0 ml-0 mb-1" *ngIf="!devdata['online']"
+          style="padding-right:unset;width: auto;flex: 1 1 auto;flex-flow:  nowrap;flex: unset;">
+          <span
+            style="padding: 0.175rem 0.35rem;background-color:#ed4646;text-transform: capitalize;color:#fff;font-size:0.75rem;border: none;font-weight: bold;"
+            cInputGroupText>Device offline or not accessible for MikroWizard</span>
+        </c-input-group>
+        <c-input-group class="mr-0 ml-0 mb-1" *ngIf="devdata['update_availble']"
+          style="padding-right:unset;width: auto;flex: 1 1 auto;flex-flow:  nowrap;flex: unset;">
+          <span
+            style="padding: 0.175rem 0.35rem;background-color:#ed4646;text-transform: capitalize;color:#fff;font-size:0.75rem;border: none;"
+            cInputGroupText>Firmware Upgrade Detected</span>
+        </c-input-group>
+        <c-input-group class="mr-0 ml-0 mb-1" *ngIf="devdata['upgrade_availble']"
+        style="padding-right:unset;width: auto;flex: 1 1 auto;flex-flow:  nowrap;flex: unset;">
+        <span
+          style="padding: 0.175rem 0.35rem;background-color:#edd446;text-transform: capitalize;color:#fff;font-size:0.75rem;border: none;"
+          cInputGroupText>Firmware Upgrade Detected</span>
+        </c-input-group>
+          <ng-container *ngFor="let item of devdata | keyvalue; index as i">
+            <c-input-group *ngIf="checkitem(item)" class="mr-0 ml-0 mb-1"
+              style="padding-right:unset;width: auto;flex: 1 1 auto;flex-flow:  nowrap;flex: unset;">
+              <span
+                style="padding: 0.175rem 0.35rem;background-color:#4f5d73;text-transform: capitalize;color:#fff;font-size:0.7rem"
+                cInputGroupText>{{item.key}}</span>
+              <span _ngcontent-ng-c666080582="" cinputgrouptext=""
+                style="padding: 0.175rem 0.35rem;color: rgba(44, 56, 74, 0.95);font-size: 0.7rem;background-color: #d8dbe0;border-color: #b1b7c1;"
+                class="input-group-text">{{ item.value }}</span>
+            </c-input-group>
+          </ng-container>
+        </c-row>
+      </c-card-body>
+    </c-card>
+  </c-col>
+</c-row>
\ No newline at end of file
diff --git a/src/app/views/device_detail/device-info/device-info.component.scss b/src/app/views/device_detail/device-info/device-info.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/views/device_detail/device-info/device-info.component.ts b/src/app/views/device_detail/device-info/device-info.component.ts
new file mode 100644
index 0000000..a2d8521
--- /dev/null
+++ b/src/app/views/device_detail/device-info/device-info.component.ts
@@ -0,0 +1,25 @@
+import { AfterContentInit, ChangeDetectionStrategy, ChangeDetectorRef, Component,Input } from '@angular/core';
+
+@Component({
+  selector: 'app-device-info',
+  templateUrl: './device-info.component.html',
+  styleUrls: ['./device-info.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Default
+})
+export class DeviceInfoComponent implements AfterContentInit {
+  @Input() devdata: any;
+  constructor(
+    private changeDetectorRef: ChangeDetectorRef
+  ) {}
+
+  checkitem(item: any) {
+    if (item.value && !item.key.match("sensors|id|_availble|interfaces|active_users|ping|status|created|online|syslog_configured|port")) {
+      return true;
+    } else {
+      return false;
+    }
+  }
+  ngAfterContentInit(): void {
+    this.changeDetectorRef.detectChanges();
+  }
+}
diff --git a/src/app/views/device_detail/device-info/device-info.module.ts b/src/app/views/device_detail/device-info/device-info.module.ts
new file mode 100644
index 0000000..3b05bf7
--- /dev/null
+++ b/src/app/views/device_detail/device-info/device-info.module.ts
@@ -0,0 +1,56 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import {
+  ButtonGroupModule,
+  ButtonModule,
+  CardModule,
+  FormModule,
+  GridModule,
+  ProgressModule,
+  NavbarModule,
+  AlertModule,
+  ModalModule,
+  TableModule, 
+  UtilitiesModule,
+  BadgeModule,
+  NavModule, 
+  TabsModule,
+} from '@coreui/angular';
+import { IconModule } from '@coreui/icons-angular';
+import { ChartjsModule } from '@coreui/angular-chartjs';
+
+import { WidgetsModule } from "../../widgets/widgets.module";
+
+// import { WidgetsRoutingModule } from './widgets-routing.module';
+import { DeviceInfoComponent } from './device-info.component';
+
+@NgModule({
+  declarations: [
+    DeviceInfoComponent,
+  ],
+  imports: [  
+      CardModule,
+      AlertModule,
+      CommonModule,
+      GridModule,
+      ProgressModule,
+      FormModule,
+      ButtonModule,
+      ButtonGroupModule,
+      ChartjsModule,
+      WidgetsModule,
+      NavbarModule,
+      ModalModule,
+      TableModule, 
+      UtilitiesModule,
+      BadgeModule,
+      NavModule, 
+      TabsModule,
+  ],
+  exports: [
+    DeviceInfoComponent,
+  ]
+})
+export class DeviceInfoModule {
+}
diff --git a/src/app/views/device_detail/device.component.html b/src/app/views/device_detail/device.component.html
index 2da3363..140e6d0 100644
--- a/src/app/views/device_detail/device.component.html
+++ b/src/app/views/device_detail/device.component.html
@@ -1,234 +1,321 @@
-<c-alert style="margin-bottom: 5px;margin-top: 5px;" *ngIf="!loading && devdata['update_availble']"
-  (click)="logger(devdata['sensors'])" color="warning">Firmware
-  Update availble For This Device!</c-alert>
-<c-alert style="margin-bottom: 5px;margin-top: 5px;" *ngIf="!loading && devdata['upgrade_availble']"
-  (click)="logger(devdata['upgrade_availble'])" color="info">Device is updated but needs to upgrade firmware!</c-alert>
-
-<c-row *ngIf="!loading">
-  <c-col xs>
-    <c-card class="mb-1">
-      <c-card-header>
-        <c-row>
-          <c-col md="6" sm="12" style="display: flex;flex-direction: row;align-items: center;">
-            <h4 style="height: 100%;line-height: 170%;margin: 0;">{{devdata['name'] }}<small style="font-size: 50%;"> ( {{devdata['ip'] }} )</small></h4>
-          </c-col>
-          <c-col md="6" sm="12" class="justify-content-end" style="display: flex;flex-direction: row;align-items: center;">
-            <c-button-group size="sm" aria-label="Upate interval" role="group">
-              <button cButton color="primary" size="sm" (click)="delta='5m';updateData()" [active]="delta=='5m'">5 minute</button>
-              <button cButton color="primary" size="sm" (click)="delta='1h';updateData()" [active]="delta=='1h'">Hourly</button>
-              <button cButton color="primary" size="sm" (click)="delta='daily';updateData()"
-                [active]="delta=='daily'">Daily</button>
-              <button cButton color="primary" (click)="delta='live';updateData()" [active]="delta=='live'">Live</button>
-            </c-button-group>
-            <c-form-check (click)="switch_total()" sizing="xl" class="mx-2" switch>
-              <input cFormCheckInput [checked]="total_type=='bps'" type="checkbox" />
-              <label cFormCheckLabel>
-                <span *ngIf="total_type=='bps'">Total bbs</span>
-                <span *ngIf="total_type!='bps'">Total pps</span>
-              </label>
-            </c-form-check>
-          </c-col>
-        </c-row>
-
-      </c-card-header>
-
-      <c-card-body>
-        <app-widgets-dropdown *ngIf="!loading" [devicedata]=devsensors></app-widgets-dropdown>
-      </c-card-body>
-    </c-card>
-  </c-col>
-</c-row>
-
 <c-row>
-  <c-col xs>
-    <c-card class="mb-1">
-      <c-card-body>
-        <c-row style="flex-direction:row">
-          <ng-container *ngFor="let item of devdata | keyvalue; index as i">
-            <c-input-group *ngIf="checkitem(item)" class="mr-0 ml-0 mb-1"
-              style="padding-right:unset;width: auto;flex: 1 1 auto;flex-flow:  nowrap;flex: unset;">
-              <span
-                style="padding: 0.175rem 0.35rem;background-color:#4f5d73;text-transform: capitalize;color:#fff;font-size:0.7rem"
-                cInputGroupText>{{item.key}}</span>
-              <span _ngcontent-ng-c666080582="" cinputgrouptext=""
-                style="padding: 0.175rem 0.35rem;color: rgba(44, 56, 74, 0.95);font-size: 0.7rem;background-color: #d8dbe0;border-color: #b1b7c1;"
-                class="input-group-text">{{ item.value }}</span>
-            </c-input-group>
-          </ng-container>
-        </c-row>
-      </c-card-body>
-    </c-card>
-  </c-col>
-</c-row>
-<!-- Mikrotik interfaces table -->
-<c-row>
-  <c-col xs>
-    <c-card class="mb-1">
-      <c-card-body>
-        <c-row style="flex-direction:row">
-          <gui-grid [source]="interfaces" [columnMenu]="columnMenu" [sorting]="sorting" [infoPanel]="infoPanel"
-            [autoResizeWidth]=true>
-            <gui-grid-column header="Name" field="name">
-              <ng-template let-value="item.name" let-item="item" let-index="index">
+  <c-card class="mb-1">
+    <c-card-header>
+      <c-row *ngIf="!loading">
+        <c-col md="6" sm="12" style="display: flex; flex-direction: row; align-items: center">
+          <h4 style="height: 100%; line-height: 170%; margin: 0">
+            {{ devdata["name"] }}<small style="font-size: 50%"> ( {{ devdata["ip"] }} )</small>
+          </h4>
+        </c-col>
+        <app-device-info [devdata]="devdata"> </app-device-info>
+      </c-row>
+    </c-card-header>
+  </c-card>
 
-                {{value}} - {{item['default-name']}}
-              </ng-template>
-            </gui-grid-column>
+  <c-col xs style="border: 1px solid #ddd; border-radius: 4px; padding: 0;width: 100%;">
+    <div class="nav nav-underline" style="background: #fff; border-bottom: 2px solid #2c3e50;width: 100%;">
+      <div class="nav-item" (click)="actice_tab_index = 0">
+        <a class="nav-link" [active]="true" [cTabContent]="tabContent" [tabPaneIdx]="0" style="display: inline-block;padding-right: 0;">Device Details</a>
+        <a class="nav-link" style="display: inline-block;" *ngIf="actice_tab_index==0" (click)="reload_device()">
+          <i class="fa-solid fa-arrows-rotate" style="color: #74C0FC;" *ngIf="!reloading"></i>
+          <i class="fa-solid fa-arrows-rotate fa-spin" *ngIf="reloading" style="color: #74C0FC;"></i>
+        </a>
+      </div>
+      <div class="nav-item" [ngStyle]="{ display: !is_radio ? 'none' : 'block' }" (click)="actice_tab_index = 1">
+        <a class="nav-link" [active]="false" [cTabContent]="tabContent" [tabPaneIdx]="1">Radio Info</a>
+      </div>
+      <div class="nav-item" [ngStyle]="{ display: !dhcp_server_available ? 'none' : 'block' }" (click)="actice_tab_index = 2">
+        <a class="nav-link" [active]="false" [cTabContent]="tabContent" [tabPaneIdx]="2" style="display: inline-block;padding-right: 0;">DHCP server</a>
+        <a class="nav-link" style="display: inline-block;" *ngIf="actice_tab_index==2" (click)="reload_dhcp_server()">
+          <i class="fa-solid fa-arrows-rotate" style="color: #74C0FC;" *ngIf="!reloading"></i>
+          <i class="fa-solid fa-arrows-rotate fa-spin"  *ngIf="reloading" style="color: #74C0FC;"></i>
+        </a>
+      </div>
+      <div class="nav-item" (click)="actice_tab_index = 3">
+        <a class="nav-link" [active]="false" (click)="show_dev_logs = true" [cTabContent]="tabContent"
+          [tabPaneIdx]="3">Device Events</a>
+      </div>
+      <div class="nav-item" (click)="actice_tab_index = 4">
+        <a class="nav-link" [active]="false" (click)="show_auth_logs = true" [cTabContent]="tabContent"
+          [tabPaneIdx]="4">Authentication</a>
+      </div>
+      <div class="nav-item" (click)="actice_tab_index = 5">
+        <a class="nav-link" [active]="false" (click)="show_acc_logs = true" [cTabContent]="tabContent"
+          [tabPaneIdx]="5">Accounting</a>
+      </div>
+    </div>
 
-            <gui-grid-column header="MAC" field="mac-address">
-              <ng-template let-value="item['mac-address']" let-item="item" let-index="index">
-
-                {{value}}
-              </ng-template>
-            </gui-grid-column>
-            <gui-grid-column header="rx" field="rx-byte">
-              <ng-template let-value="item['rx-byte']" let-item="item" let-index="index">
-
-                <div>{{convert_bw_human(value,'rx')}}</div>
-              </ng-template>
-            </gui-grid-column>
-            <gui-grid-column header="tx" field="tx-byte">
-              <ng-template let-value="item['tx-byte']" let-item="item" let-index="index">
-
-                {{convert_bw_human(value,'tx')}}
-              </ng-template>
-            </gui-grid-column>
-            <gui-grid-column header="l2mtu" field="l2mtu">
-              <ng-template let-value="item.l2mtu" let-item="item" let-index="index">
-
-                curr:{{value}}<br />
-                max : {{item['max-l2mtu']}}
-              </ng-template>
-            </gui-grid-column>
-            <gui-grid-column header="rx/s" field="rx-bits-per-second" [enabled]="false">
-              <ng-template let-value="item['rx-bits-per-second']" let-item="item" let-index="index">
-
-                {{convert_bw_human(value,'rx')}}
-
-              </ng-template>
-            </gui-grid-column>
-            <gui-grid-column header="tx/s" field="tx-bits-per-second" [enabled]="false">
-              <ng-template let-value="item['tx-bits-per-second']" let-item="item" let-index="index">
-
-                {{convert_bw_human(value,'tx')}}
-              </ng-template>
-            </gui-grid-column>
-            <gui-grid-column header="Created" field="created" [enabled]="false">
-              <ng-template let-value="item.created" let-item="item.id" let-index="index">
-
-                {{value}}
-              </ng-template>
-            </gui-grid-column>
-            <gui-grid-column header="Last Up" field="last-link-up-time">
-              <ng-template let-value="item['last-link-up-time']" let-item="item" let-index="index">
-
-                {{value}}
-              </ng-template>
-            </gui-grid-column>
-            <gui-grid-column header="Created" field="created" [enabled]="false">
-              <ng-template let-value="item.created" let-item="item.id" let-index="index">
-                {{value}}
-              </ng-template>
-            </gui-grid-column>
-            <gui-grid-column header="Actions" field="action" width="60" align="center">
-              <ng-template let-value="item.id" let-item="item" let-index="index">
-                <button cButton color="info" size="sm" (click)="show_interface_rate(item['default-name'])"
-                  class="mx-1"><i class="fa-solid fa-chart-line"></i></button>
-              </ng-template>
-            </gui-grid-column>
-          </gui-grid>
-        </c-row>
-      </c-card-body>
-    </c-card>
-  </c-col>
-</c-row>
-
-<c-row *ngIf="is_radio && !radio_loading">
-  <c-col xs md="12" *ngFor="let raddata of radio_devsensors | keyvalue">
-    <c-card class="mb-1">
-      <c-card-header><h6>Radio data</h6></c-card-header>
-      <c-card-body>
-        <h6>{{raddata.key}}</h6>
-        <app-widgets-dropdown [devicedata]=raddata.value></app-widgets-dropdown>
+    <c-tab-content class="command-sections" style="width: 100%;" #tabContent="cTabContent">
+      <h5 *ngIf="loading" style="text-align: center;height: 100vh;line-height: 33vh;"><c-spinner color="info" variant="grow"></c-spinner>Loading...</h5>
+      <c-tab-pane *ngIf="!loading">
+        <c-card class="mb-1">
+          <c-card-body>
+            <c-row>
+              <c-col md="12" sm="12" class="justify-content-end"
+                style="display: flex; flex-direction: row; align-items: center;padding-bottom: 5px;">
+                <c-button-group size="sm" aria-label="Upate interval" role="group">
+                  <button cButton color="primary" size="sm" (click)="delta = '5m'; updateData()"
+                    [active]="delta == '5m'">
+                    5 minute
+                  </button>
+                  <button cButton color="primary" size="sm" (click)="delta = '1h'; updateData()"
+                    [active]="delta == '1h'">
+                    Hourly
+                  </button>
+                  <button cButton color="primary" size="sm" (click)="delta = 'daily'; updateData()"
+                    [active]="delta == 'daily'">
+                    Daily
+                  </button>
+                  <button cButton color="primary" (click)="delta = 'live'; updateData()" [active]="delta == 'live'">
+                    Live
+                  </button>
+                </c-button-group>
+                <c-form-check (click)="switch_total()" sizing="xl" class="mx-2" switch>
+                  <input cFormCheckInput [checked]="total_type == 'bps'" type="checkbox" />
+                  <label cFormCheckLabel>
+                    <span *ngIf="total_type == 'bps'">Total bbs</span>
+                    <span *ngIf="total_type != 'bps'">Total pps</span>
+                  </label>
+                </c-form-check>
+              </c-col>
+            </c-row>
+            <app-widgets-dropdown *ngIf="!loading" [devicedata]="devsensors"></app-widgets-dropdown>
+          </c-card-body>
+        </c-card>
         <c-row>
-          <c-col md="3">
-            <table style="word-break:  break-word" small stripedColumns cTable>
-              <tbody>
-            <ng-container *ngFor="let d of raddata.value['data'] | keyvalue ; let i=index">
-              <tr *ngIf="i<objectlen(raddata.value['data'])/4">
-                <th style="width: 20%;text-wrap: nowrap;">{{d.key}}</th>
-                <td scope="row">{{d.value}}</td>
-              </tr>
-            </ng-container>
-              </tbody>
-            </table>
+          <c-col sm="12" lg="6">
+            <c-card class="mb-1">
+              <c-card-body style="padding: 0;">
+                <app-ping-stats [ping]="devdata['ping']"></app-ping-stats>
+              </c-card-body>
+            </c-card>
           </c-col>
-          <c-col md="3">
+          <c-col sm="12" lg="6">
+            <c-card class="mb-1">
+              <c-card-body style="padding: 0;">
+                <app-active-users [active_users]="devdata['active_users']" [devid]="devid"></app-active-users>
+              </c-card-body>
+            </c-card>
+          </c-col>
+        </c-row>
+        <!-- Mikrotik interfaces table -->
+        <c-row class="interfaces">
+          <c-col xs>
+            <c-card class="mb-1">
+              <c-card-body>
+                <c-row style="flex-direction: row">
+                  <gui-grid [source]="interfaces" [columnMenu]="columnMenu" [sorting]="sorting" [infoPanel]="infoPanel"
+                    [autoResizeWidth]="true">
+                    <gui-grid-column header="Name" field="name">
+                      <ng-template let-value="item.name" let-item="item" let-index="index">
+                        {{ value }} - {{ item["default-name"] }}
+                      </ng-template>
+                    </gui-grid-column>
 
-          <table style="word-break:  break-word" small stripedColumns cTable>
-            <tbody>
-          <ng-container *ngFor="let d of raddata.value['data'] | keyvalue ; let i=index">
-            <tr *ngIf="i>=objectlen(raddata.value['data'])/4 && i<(objectlen(raddata.value['data'])/4)*2">
-              <th style="width: 20%;text-wrap: nowrap;">{{d.key}}</th>
-              <td scope="row">{{d.value}}</td>
-            </tr>
-          </ng-container>
-            </tbody>
-          </table>
-        </c-col>
-        <c-col md="3">
-          <table style="word-break:  break-word" small stripedColumns cTable>
-            <tbody>
-          <ng-container *ngFor="let d of raddata.value['data'] | keyvalue ; let i=index">
-            <tr *ngIf="i>=(objectlen(raddata.value['data'])/4)*2 && i<(objectlen(raddata.value['data'])/4)*3">
-              <th style="width: 20%;text-wrap: nowrap;">{{d.key}}</th>
-              <td scope="row">{{d.value}}</td>
-            </tr>
-          </ng-container>
-            </tbody>
-          </table>
-        </c-col>
-        <c-col md="3">
-          <table small stripedColumns cTable>
-            <tbody>
-          <ng-container *ngFor="let d of raddata.value['data'] | keyvalue ; let i=index">
-            <tr *ngIf="i>=(objectlen(raddata.value['data'])/4)*3">
-              <th>{{d.key}}</th>
-              <td scope="row">{{d.value}}</td>
-            </tr>
-          </ng-container>
-            </tbody>
-          </table>
-        </c-col>
+                    <gui-grid-column header="MAC" field="mac-address">
+                      <ng-template let-value="item['mac-address']" let-item="item" let-index="index">
+                        {{ value }}
+                      </ng-template>
+                    </gui-grid-column>
+                    <gui-grid-column header="rx" field="rx-byte">
+                      <ng-template let-value="item['rx-byte']" let-item="item" let-index="index">
+                        <div>{{ convert_bw_human(value, "rx") }}</div>
+                      </ng-template>
+                    </gui-grid-column>
+                    <gui-grid-column header="tx" field="tx-byte">
+                      <ng-template let-value="item['tx-byte']" let-item="item" let-index="index">
+                        {{ convert_bw_human(value, "tx") }}
+                      </ng-template>
+                    </gui-grid-column>
+                    <gui-grid-column header="l2mtu" field="l2mtu">
+                      <ng-template let-value="item.l2mtu" let-item="item" let-index="index">
+                        curr:{{ value }}<br />
+                        max : {{ item["max-l2mtu"] }}
+                      </ng-template>
+                    </gui-grid-column>
+                    <gui-grid-column header="rx/s" field="rx-bits-per-second" [enabled]="false">
+                      <ng-template let-value="item['rx-bits-per-second']" let-item="item" let-index="index">
+                        {{ convert_bw_human(value, "rx") }}
+                      </ng-template>
+                    </gui-grid-column>
+                    <gui-grid-column header="tx/s" field="tx-bits-per-second" [enabled]="false">
+                      <ng-template let-value="item['tx-bits-per-second']" let-item="item" let-index="index">
+                        {{ convert_bw_human(value, "tx") }}
+                      </ng-template>
+                    </gui-grid-column>
+                    <gui-grid-column header="Created" field="created" [enabled]="false">
+                      <ng-template let-value="item.created" let-item="item.id" let-index="index">
+                        {{ value }}
+                      </ng-template>
+                    </gui-grid-column>
+                    <gui-grid-column header="Last Up" field="last-link-up-time">
+                      <ng-template let-value="item['last-link-up-time']" let-item="item" let-index="index">
+                        {{ value }}
+                      </ng-template>
+                    </gui-grid-column>
+                    <gui-grid-column header="Created" field="created" [enabled]="false">
+                      <ng-template let-value="item.created" let-item="item.id" let-index="index">
+                        {{ value }}
+                      </ng-template>
+                    </gui-grid-column>
+                    <gui-grid-column header="Actions" field="action" width="60" align="center">
+                      <ng-template let-value="item.id" let-item="item" let-index="index">
+                        <button cButton color="info" size="sm" (click)="show_interface_rate(item['default-name'])"
+                          class="mx-1">
+                          <i class="fa-solid fa-chart-line"></i>
+                        </button>
+                      </ng-template>
+                    </gui-grid-column>
+                  </gui-grid>
+                </c-row>
+              </c-card-body>
+            </c-card>
+          </c-col>
         </c-row>
-        <c-row *ngIf="raddata.value['strength-at-rates']">
-        <c-col>
-          <table style="word-break:  break-word" small borderless cTable>
-            <tbody>
-                <tr>
-                  <th style="text-wrap: nowrap;vertical-align: middle;padding: 5px;border-radius: 5px;background-color: #3399ff36;">Strength at rates</th>
-                  <td scope="row">
-                    <c-badge color="info" style="font-size: 0.85em;" class="mx-1" *ngFor="let st of strangth_at_rate_extract(raddata.value['strength-at-rates'])">{{st}}</c-badge>
-                  </td>
-                </tr>
-             </tbody>
-          </table>
-        </c-col>
+      </c-tab-pane>
+      <c-tab-pane *ngIf="!loading">
+        <c-row *ngIf="is_radio && !radio_loading">
+          <c-col xs md="12" *ngFor="let raddata of radio_devsensors | keyvalue">
+            <c-card class="mb-1">
+              <c-card-header>
+                <h6>Radio data</h6>
+              </c-card-header>
+              <c-card-body>
+                <h6>{{ raddata.key }}</h6>
+                <app-widgets-dropdown [devicedata]="raddata.value"></app-widgets-dropdown>
+                <c-row>
+                  <c-col md="3">
+                    <table style="word-break: break-word" small stripedColumns cTable>
+                      <tbody>
+                        <ng-container *ngFor="
+                          let d of raddata.value['data'] | keyvalue;
+                          let i = index
+                        ">
+                          <tr *ngIf="i < objectlen(raddata.value['data']) / 4">
+                            <th style="width: 20%; text-wrap: nowrap">
+                              {{ d.key }}
+                            </th>
+                            <td scope="row">{{ d.value }}</td>
+                          </tr>
+                        </ng-container>
+                      </tbody>
+                    </table>
+                  </c-col>
+                  <c-col md="3">
+                    <table style="word-break: break-word" small stripedColumns cTable>
+                      <tbody>
+                        <ng-container *ngFor="
+                          let d of raddata.value['data'] | keyvalue;
+                          let i = index
+                        ">
+                          <tr *ngIf="
+                            i >= objectlen(raddata.value['data']) / 4 &&
+                            i < (objectlen(raddata.value['data']) / 4) * 2
+                          ">
+                            <th style="width: 20%; text-wrap: nowrap">
+                              {{ d.key }}
+                            </th>
+                            <td scope="row">{{ d.value }}</td>
+                          </tr>
+                        </ng-container>
+                      </tbody>
+                    </table>
+                  </c-col>
+                  <c-col md="3">
+                    <table style="word-break: break-word" small stripedColumns cTable>
+                      <tbody>
+                        <ng-container *ngFor="
+                          let d of raddata.value['data'] | keyvalue;
+                          let i = index
+                        ">
+                          <tr *ngIf="
+                            i >= (objectlen(raddata.value['data']) / 4) * 2 &&
+                            i < (objectlen(raddata.value['data']) / 4) * 3
+                          ">
+                            <th style="width: 20%; text-wrap: nowrap">
+                              {{ d.key }}
+                            </th>
+                            <td scope="row">{{ d.value }}</td>
+                          </tr>
+                        </ng-container>
+                      </tbody>
+                    </table>
+                  </c-col>
+                  <c-col md="3">
+                    <table small stripedColumns cTable>
+                      <tbody>
+                        <ng-container *ngFor="
+                          let d of raddata.value['data'] | keyvalue;
+                          let i = index
+                        ">
+                          <tr *ngIf="
+                            i >= (objectlen(raddata.value['data']) / 4) * 3
+                          ">
+                            <th>{{ d.key }}</th>
+                            <td scope="row">{{ d.value }}</td>
+                          </tr>
+                        </ng-container>
+                      </tbody>
+                    </table>
+                  </c-col>
+                </c-row>
+                <c-row *ngIf="raddata.value['strength-at-rates']">
+                  <c-col>
+                    <table style="word-break: break-word" small borderless cTable>
+                      <tbody>
+                        <tr>
+                          <th style="
+                            text-wrap: nowrap;
+                            vertical-align: middle;
+                            padding: 5px;
+                            border-radius: 5px;
+                            background-color: #3399ff36;
+                          ">
+                            Strength at rates
+                          </th>
+                          <td scope="row">
+                            <c-badge color="info" style="font-size: 0.85em" class="mx-1" *ngFor="
+                              let st of strangth_at_rate_extract(
+                                raddata.value['strength-at-rates']
+                              )
+                            ">{{ st }}</c-badge>
+                          </td>
+                        </tr>
+                      </tbody>
+                    </table>
+                  </c-col>
+                </c-row>
+              </c-card-body>
+            </c-card>
+          </c-col>
         </c-row>
-      </c-card-body>
-    </c-card>
+      </c-tab-pane>
+      <c-tab-pane>
+        <ng-container *ngIf="dhcp_server_available">
+          <app-dhcp-info [tz]="tz" [dhcp_server_data]="dhcp_server_data" [small_screen]="small_screen" [columnMenu]="columnMenu"
+            [sorting]="sorting" [searching]="searching" [infoPanel]="infoPanel" [paging]="paging"></app-dhcp-info>
+        </ng-container>
+      </c-tab-pane>
+      <c-tab-pane style="width: 100%;padding-top: 10px;background-color: #fff;">
+        <app-devlogs style="width: 100%;" [component_devid]="devid"></app-devlogs>
+      </c-tab-pane>
+      <c-tab-pane style="width: 100%;padding-top: 10px;background-color: #fff;">
+        <app-authlogs style="width: 100%;" [component_devid]="devid"></app-authlogs>
+      </c-tab-pane>
+      <c-tab-pane style="width: 100%;padding-top: 10px;background-color: #fff;">
+        <app-acclogs style="width: 100%" [component_devid]="devid"></app-acclogs>
+      </c-tab-pane>
+    </c-tab-content>
   </c-col>
 </c-row>
-
 <c-modal #staticBackdropModal backdrop="static" size="xl" [visible]="InterfaceChartModalVisible"
   id="InterfaceChartModal">
   <c-modal-header>
-    <h5 cModalTitle>{{interface_rate['name']}}</h5>
+    <h5 cModalTitle>{{ interface_rate["name"] }}</h5>
     <button [cModalToggle]="staticBackdropModal.id" cButtonClose></button>
   </c-modal-header>
   <c-modal-body>
-    <c-chart [data]="interface_rate" [options]="options" type="line">
-    </c-chart>
+    <c-chart [data]="interface_rate" [options]="options" type="line"> </c-chart>
   </c-modal-body>
   <c-modal-footer>
     <button [cModalToggle]="staticBackdropModal.id" cButton color="secondary">
diff --git a/src/app/views/device_detail/device.component.scss b/src/app/views/device_detail/device.component.scss
index 3e08d93..0131677 100644
--- a/src/app/views/device_detail/device.component.scss
+++ b/src/app/views/device_detail/device.component.scss
@@ -5,3 +5,35 @@
     }
   }
 }
+
+.nav-underline {
+  border-bottom: 2px solid var(--cui-nav-underline-border-color, #c4c9d0)
+}
+
+.nav-underline .nav-item {
+  margin-bottom: -2px;
+  cursor: pointer;
+}
+
+.nav-underline .nav-link {
+  color: var(--cui-nav-underline-link-color, #768192);
+  border-style: none none solid!important;
+  border-width:2px;
+  position:relative;
+  bottom:-1px;
+  cursor: pointer;
+
+}
+.interfaces gui-grid gui-structure{
+  min-height: unset!important;
+}
+.nav-underline .nav-link:hover,.nav-underline .nav-link:focus {
+  border-color: var(--cui-nav-underline-link-active-border-color, #321fdb)
+}
+
+.nav-underline .nav-link.active,.nav-underline .show>.nav-link {
+  color: var(--cui-nav-underline-link-active-color, #321fdb);
+  background: transparent;
+  border-color: var(--cui-nav-underline-link-active-border-color, #321fdb);
+  font-weight: bold;
+}
diff --git a/src/app/views/device_detail/device.component.ts b/src/app/views/device_detail/device.component.ts
index 64ab631..c3aa787 100644
--- a/src/app/views/device_detail/device.component.ts
+++ b/src/app/views/device_detail/device.component.ts
@@ -1,8 +1,9 @@
-import { Component, OnDestroy, OnInit } from "@angular/core";
+import { Component, OnDestroy, OnInit ,ViewEncapsulation} from "@angular/core";
 import { Router, ActivatedRoute } from "@angular/router";
 import { dataProvider } from "../../providers/mikrowizard/data";
 import { loginChecker } from "../../providers/login_checker";
 import {
+  GuiSearching,
   GuiInfoPanel,
   GuiColumn,
   GuiColumnMenu,
@@ -34,13 +35,20 @@ type radiodata = {
 @Component({
   templateUrl: "device.component.html",
   styleUrls: ["device.component.scss"],
+  encapsulation: ViewEncapsulation.None,
 })
 export class DeviceComponent implements OnInit, OnDestroy {
   public uid: number;
+  public sessionloaded: boolean = false;
   public uname: string;
   public tz: string;
   public ispro: boolean = false;
-
+  public small_screen=false;
+  public show_dev_logs: boolean = false; 
+  public show_auth_logs: boolean = false;
+  public show_acc_logs: boolean = false;
+  public actice_tab_index: number = 0;
+  public reloading: boolean = false;
   constructor(
     private data_provider: dataProvider,
     private route: ActivatedRoute,
@@ -58,8 +66,8 @@ export class DeviceComponent implements OnInit, OnDestroy {
       _self.uname = res.name;
       _self.tz = res.tz;
       _self.ispro = res.ISPRO;
+      _self.sessionloaded = true;
       const userId = _self.uid;
-
       if (res.role != "admin") {
         setTimeout(function () {
           _self.router.navigate(["/user/dashboard"]);
@@ -87,6 +95,9 @@ export class DeviceComponent implements OnInit, OnDestroy {
   public interface_rate: any = {};
   public options: any;
   public is_radio: boolean = false;
+  public dhcp_server_available: boolean = false;
+  public dhcp_server_data: any = {};
+  
   public sorting = {
     enabled: true,
     multiSorting: true,
@@ -95,8 +106,8 @@ export class DeviceComponent implements OnInit, OnDestroy {
   public paging: GuiPaging = {
     enabled: true,
     page: 1,
-    pageSize: 10,
-    pageSizes: [5, 10, 25, 50],
+    pageSize: 20,
+    pageSizes: [20],
     display: GuiPagingDisplay.ADVANCED,
   };
 
@@ -117,12 +128,18 @@ export class DeviceComponent implements OnInit, OnDestroy {
     columnsManager: true,
     schemaManager: true,
   };
-
+  searching: GuiSearching = {
+    enabled: true,
+    placeholder: "Search In table",
+  };
   public rowSelection: boolean | GuiRowSelection = {
     enabled: true,
     type: GuiRowSelectionType.CHECKBOX,
     mode: GuiRowSelectionMode.MULTIPLE,
   };
+  reload_dhcp_server(){
+    this.get_DHCP_data();
+  }
   Chartoptions = {
     responsive: true,
     _self :this,
@@ -250,9 +267,20 @@ export class DeviceComponent implements OnInit, OnDestroy {
   };
 
   ngOnInit(): void {
+
+    if (window.innerWidth <= 1200) {
+      this.small_screen = true;
+    }
+    window.onresize = () => (this.small_screen = window.innerWidth <= 1200);
     this.devid = Number(this.route.snapshot.paramMap.get("id"));
     this.options = this.Chartoptions;
-    this.initDeviceInfo();
+    // wait untill sessionloaded is set
+    let interval = setInterval(() => {
+      if (this.sessionloaded) {
+        clearInterval(interval);
+        this.initDeviceInfo();
+      }
+    }, 100);
   }
 
   optionsDefault = {
@@ -466,11 +494,43 @@ export class DeviceComponent implements OnInit, OnDestroy {
     });
   }
 
+  get_DHCP_data() {
+    if(!this.ispro)
+      return;
+    var _self = this;
+    if(_self.reloading)
+      return;
+    _self.reloading = true;
+    _self.data_provider
+    .get_dev_dhcp_info(_self.devid)
+    .then((res) => {
+      _self.dhcp_server_available = Boolean(res.length);
+      _self.dhcp_server_data = res;
+      // loop in dhcp_server_data and create a new object with the data for chart for each dhcp server
+      _self.reloading = false;
+      _self.dhcp_server_data.forEach((element:any) => {
+        var pooldata=element.pools[0];
+        element.chartpools = {
+          labels: ['Used', 'Free'],
+          datasets: [{
+            backgroundColor: [ '#E46651','#41B883'],
+            data: [pooldata.used_ips, pooldata.available_ips]
+          }]
+        };
+      });
+    });
+  }
+  reload_device(): void {
+    this.initDeviceInfo();
+  }
   initDeviceInfo(): void {
     var _self = this;
+    if (this.reloading) return;
     clearInterval(this.data_interval);
+    if(_self.ispro) _self.get_DHCP_data();
     this.updateData();
     this.data_interval = setInterval(() => {
+      this.reloading = true;
       this.data_provider.get_dev_info(this.devid).then((res) => {
         _self.devdata = res;
         if ("is_radio" in res) _self.is_radio = res.is_radio;
@@ -480,12 +540,17 @@ export class DeviceComponent implements OnInit, OnDestroy {
           .then((res) => {
             _self.devsensors = res;
             _self.loading = false;
+            _self.reloading = false;
+
             if (_self.is_radio) _self.get_radio_data();
+
           });
       });
-    }, 60000);
+    }, 30000);
+  }
+  show_history(itme:any) {
+    return
   }
-
   ngOnDestroy() {
     clearInterval(this.data_interval);
   }
diff --git a/src/app/views/device_detail/device.module.ts b/src/app/views/device_detail/device.module.ts
index a405dea..e8948d6 100644
--- a/src/app/views/device_detail/device.module.ts
+++ b/src/app/views/device_detail/device.module.ts
@@ -13,7 +13,10 @@ import {
   ModalModule,
   TableModule, 
   UtilitiesModule,
-  BadgeModule
+  BadgeModule,
+  NavModule, 
+  TabsModule,
+  SpinnerModule,
 } from "@coreui/angular";
 import { ChartjsModule } from "@coreui/angular-chartjs";
 
@@ -22,7 +25,13 @@ import { DeviceComponent } from "./device.component";
 import { GuiGridModule } from "@generic-ui/ngx-grid";
 
 import { WidgetsModule } from "../widgets/widgets.module";
-
+import { DeviceInfoModule } from "./device-info/device-info.module";
+import { DhcpInfoModule } from "./dhcp-info/dhcp-info.module";
+import { DevLogsModule } from "../device_logs/devlogs.module";
+import { PingStatsModule } from "./ping-status/ping-status.module";
+import { ActiveUsersModule } from "./active-users/active-users.module";
+import { AuthModule } from "../auth_log/auth.module";
+import { AccModule } from "../acc_log/acc.module";
 @NgModule({
   imports: [
     DeviceRoutingModule,
@@ -36,12 +45,22 @@ import { WidgetsModule } from "../widgets/widgets.module";
     ButtonGroupModule,
     ChartjsModule,
     WidgetsModule,
+    DeviceInfoModule,
+    DhcpInfoModule,
+    DevLogsModule,
+    PingStatsModule,
+    ActiveUsersModule,
+    AuthModule,
+    AccModule,
+    SpinnerModule,
     GuiGridModule,
     NavbarModule,
     ModalModule,
     TableModule, 
     UtilitiesModule,
-    BadgeModule
+    BadgeModule,
+    NavModule, 
+    TabsModule,
   ],
   declarations: [DeviceComponent],
 })
diff --git a/src/app/views/device_detail/dhcp-info/dhcp-info.component.html b/src/app/views/device_detail/dhcp-info/dhcp-info.component.html
new file mode 100644
index 0000000..c077317
--- /dev/null
+++ b/src/app/views/device_detail/dhcp-info/dhcp-info.component.html
@@ -0,0 +1,168 @@
+<ng-container *ngFor="let item of dhcp_server_data ">
+  <c-row style="padding: 10px 0;" >
+    <c-col xl="3" sm="12">
+      <c-row *ngIf="small_screen">
+        <c-col sm="6" style="padding-right: 0;">
+          <c-card class="h-100">
+            <c-card-header>
+              <h6>Statics</h6>
+            </c-card-header>
+            <c-card-body>
+              <c-chart [data]="item['chartpools']" width="100%" type="doughnut"
+                [options]="{aspectRatio:2,responsive:true,'plugins': { legend : {position: 'left',fullSize: true}}}">
+              </c-chart>
+            </c-card-body>
+          </c-card>
+        </c-col>
+        <c-col sm="6" style="padding-left: 0;">
+          <c-card class="h-100">
+            <c-card-header>
+              <h6>DHCP server {{item['dhcp_server']}}</h6>
+            </c-card-header>
+            <c-card-body>
+              Pool name: {{item['address_pool']}}<br />
+              Static Ip: {{item['static_ips']}}<br />
+              Dynamic Ip: {{item['dynamic_ips']}}<br />
+              interface : {{item['interface']}}<br />
+            </c-card-body>
+          </c-card>
+        </c-col>
+
+      </c-row>
+      <c-card class="h-100" *ngIf="!small_screen">
+        <c-card style="border: none;">
+          <c-card-header>
+            <h6>Statics</h6>
+          </c-card-header>
+          <c-card-body>
+            <c-chart [data]="item['chartpools']" width="100%" type="doughnut">
+            </c-chart>
+          </c-card-body>
+        </c-card>
+        <c-card style="border: none;">
+          <c-card-body>
+
+            <table cTable small>
+              <tbody>
+                <tr>
+                  <th scope="row">Server name</th>
+                  <td>{{item['dhcp_server']}}</td>
+                </tr>
+                <tr>
+                  <th scope="row">Pool name</th>
+                  <td>{{item['address_pool']}}</td>
+                </tr>
+                <tr>
+                  <th scope="row">Static Ip</th>
+                  <td>{{item['static_ips']}}</td>
+                </tr>
+                <tr>
+                  <th scope="row">Dynamic Ip</th>
+                  <td>{{item['dynamic_ips']}}</td>
+                </tr>
+                <tr>
+                  <th scope="row">Interface</th>
+                  <td>{{item['interface']}}</td>
+                </tr>
+                <tr>
+                  <th scope="row">Duplicate AC-ID</th>
+                  <td>{{item['duplicate_agent_circuit_ids'].length}}</td>
+                </tr>
+              </tbody>
+            </table>
+          </c-card-body>
+        </c-card>
+      </c-card>
+    </c-col>
+    <c-col xl="9" sm="12">
+      <c-card class="mb-1 h-100">
+        <c-card-body>
+          <gui-grid [source]="item['lease_table']" [columnMenu]="columnMenu" [sorting]="sorting"
+            [searching]="searching" [infoPanel]="infoPanel" [rowHeight]="28" [autoResizeWidth]=true [paging]="paging">
+            <gui-grid-column header="address" field="address">
+              <ng-template let-value="item.address" let-item="item" let-index="index">
+                {{value}}
+              </ng-template>
+            </gui-grid-column>
+            <gui-grid-column header="Type" field="dynamic">
+              <ng-template let-value="item" let-item="item" let-index="index">
+                <span *ngIf="item['dynamic']">Dynamic</span>
+                <span *ngIf="item['static']">Static</span>
+              </ng-template>
+            </gui-grid-column>
+            <gui-grid-column header="expire" field="expires-after">
+              <ng-template let-value="item['expires-after']" let-item="item" let-index="index">
+                {{value}}
+              </ng-template>
+            </gui-grid-column>
+            <gui-grid-column header="host-name" field="host-name">
+              <ng-template let-value="item['host-name']" let-item="item" let-index="index">
+                {{value}}
+              </ng-template>
+            </gui-grid-column>
+            <gui-grid-column header="last-seen" field="last-seen">
+              <ng-template let-value="item['last-seen']" let-item="item" let-index="index">
+                {{value}}
+              </ng-template>
+            </gui-grid-column>
+            <gui-grid-column header="status" field="status">
+              <ng-template let-value="item['status']" let-item="item" let-index="index">
+                {{value}}
+              </ng-template>
+            </gui-grid-column>
+            <gui-grid-column header="MAC" field="mac-address">
+              <ng-template let-value="item['mac-address']" let-item="item" let-index="index">
+                {{value}}
+              </ng-template>
+            </gui-grid-column>
+            <gui-grid-column header="Actions" width="60" field="">
+              <ng-template let-value="item" let-item="item" let-index="index">
+                <button cButton color="info" size="sm" (click)="show_history(item)" class="mx-1"><i
+                    class="fa-solid fa-clock-rotate-left"></i></button>
+              </ng-template>
+            </gui-grid-column>
+          </gui-grid>
+        </c-card-body>
+      </c-card>
+    </c-col>
+  </c-row>
+</ng-container>
+
+
+<c-modal #DhcpHistoryModal backdrop="static" size="xl" [visible]="dhcp_history_modal"
+  id="DhcpHistoryModal" *ngIf="dhcp_history_modal">
+  <c-modal-header>
+    <h5 cModalTitle>History for {{current_dhcp['mac-address']}}</h5>
+    <button [cModalToggle]="DhcpHistoryModal.id" cButtonClose></button>
+  </c-modal-header>
+  <c-modal-body style="overflow-x: auto;">
+    <gui-grid style="min-width: 900px;" [source]="dhcp_history" [columnMenu]="columnMenu" [sorting]="sorting"
+    [searching]="searching" [infoPanel]="infoPanel" [rowHeight]="35" [autoResizeWidth]=true [paging]="paging">
+    <gui-grid-column header="comment" field="comment" >
+      <ng-template let-value="item.comment" let-item="item" let-index="index">
+        <div style="text-wrap: auto;font-weight: bold;line-height: normal;">{{value}}</div>
+      </ng-template>
+    </gui-grid-column>
+    <gui-grid-column header="type" field="detail" width="150">
+      <ng-template let-value="item['detail']" let-item="item" let-index="index">
+        {{value}}
+      </ng-template>
+    </gui-grid-column>
+    <gui-grid-column header="eventtime" field="eventtime" width="200">
+      <ng-template let-value="item['eventtime']" let-item="item" let-index="index">
+        {{value}}
+      </ng-template>
+    </gui-grid-column>
+    <gui-grid-column header="Router" field="ip"  width="250">
+      <ng-template let-value="item['ip']" let-item="item" let-index="index">
+        {{item.name}} ({{value}})
+      </ng-template>
+    </gui-grid-column>
+  </gui-grid>
+  </c-modal-body>
+  <c-modal-footer>
+    <button [cModalToggle]="DhcpHistoryModal.id" cButton color="secondary">
+      Close
+    </button>
+  </c-modal-footer>
+</c-modal>
\ No newline at end of file
diff --git a/src/app/views/device_detail/dhcp-info/dhcp-info.component.scss b/src/app/views/device_detail/dhcp-info/dhcp-info.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/views/device_detail/dhcp-info/dhcp-info.component.ts b/src/app/views/device_detail/dhcp-info/dhcp-info.component.ts
new file mode 100644
index 0000000..31d21c9
--- /dev/null
+++ b/src/app/views/device_detail/dhcp-info/dhcp-info.component.ts
@@ -0,0 +1,47 @@
+import { AfterContentInit, ChangeDetectionStrategy, ChangeDetectorRef, Component,Input } from '@angular/core';
+import { dataProvider } from "../../../providers/mikrowizard/data";
+import { formatInTimeZone } from "date-fns-tz";
+
+@Component({
+  selector: 'app-dhcp-info',
+  templateUrl: './dhcp-info.component.html',
+  styleUrls: ['./dhcp-info.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Default
+})
+export class DhcpInfoComponent implements AfterContentInit {
+  @Input() dhcp_server_data: any;
+  @Input() small_screen: boolean=false;
+  @Input() columnMenu: any;
+  @Input() sorting: any;
+  @Input() searching: any;
+  @Input() infoPanel: any;
+  @Input() paging: any;
+  @Input() rowSelectionMode: any;
+  @Input() tz: any;
+  dhcp_history:any;
+  dhcp_history_modal: boolean = false;
+  current_dhcp:any;
+  constructor(
+    private changeDetectorRef: ChangeDetectorRef,
+    private data_provider: dataProvider,
+  ) {}
+
+  show_history(item:any) {
+    var _self = this;
+    this.data_provider.getDhcpHistory(item).then((res) => {
+      _self.current_dhcp = item;
+      this.dhcp_history = res.map((d: any) => {
+        d.eventtime = formatInTimeZone(
+          d.eventtime.split(".")[0] + ".000Z",
+          _self.tz,
+          "yyyy-MM-dd HH:mm:ss XXX"
+        );
+        return d;
+      });
+      this.dhcp_history_modal=!this.dhcp_history_modal;
+    });
+  }
+  ngAfterContentInit(): void {
+    this.changeDetectorRef.detectChanges();
+  }
+}
diff --git a/src/app/views/device_detail/dhcp-info/dhcp-info.module.ts b/src/app/views/device_detail/dhcp-info/dhcp-info.module.ts
new file mode 100644
index 0000000..d493f2a
--- /dev/null
+++ b/src/app/views/device_detail/dhcp-info/dhcp-info.module.ts
@@ -0,0 +1,57 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import {
+  ButtonGroupModule,
+  ButtonModule,
+  CardModule,
+  FormModule,
+  GridModule,
+  ProgressModule,
+  NavbarModule,
+  AlertModule,
+  ModalModule,
+  TableModule, 
+  UtilitiesModule,
+  BadgeModule,
+  NavModule, 
+  TabsModule,
+} from '@coreui/angular';
+import { ChartjsModule } from '@coreui/angular-chartjs';
+
+import { WidgetsModule } from "../../widgets/widgets.module";
+
+// import { WidgetsRoutingModule } from './widgets-routing.module';
+import { DhcpInfoComponent } from './dhcp-info.component';
+import { GuiGridModule } from "@generic-ui/ngx-grid";
+
+@NgModule({
+  declarations: [
+    DhcpInfoComponent,
+  ],
+  imports: [  
+      CardModule,
+      AlertModule,
+      CommonModule,
+      GridModule,
+      ProgressModule,
+      FormModule,
+      ButtonModule,
+      ButtonGroupModule,
+      ChartjsModule,
+      WidgetsModule,
+      NavbarModule,
+      ModalModule,
+      GuiGridModule,
+      TableModule, 
+      UtilitiesModule,
+      BadgeModule,
+      NavModule, 
+      TabsModule,
+  ],
+  exports: [
+    DhcpInfoComponent,
+  ]
+})
+export class DhcpInfoModule {
+}
diff --git a/src/app/views/device_detail/dhcp-info/dhcp-inforouting.module.ts b/src/app/views/device_detail/dhcp-info/dhcp-inforouting.module.ts
new file mode 100644
index 0000000..7216364
--- /dev/null
+++ b/src/app/views/device_detail/dhcp-info/dhcp-inforouting.module.ts
@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { DhcpInfoComponent } from './dhcp-info.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: DhcpInfoComponent,
+    data: {
+      title: 'Widgets'
+    }
+  }
+];
+
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class DhcpInfoRoutingModule {
+}
diff --git a/src/app/views/device_detail/ping-status/ping-status-routing.module.ts b/src/app/views/device_detail/ping-status/ping-status-routing.module.ts
new file mode 100644
index 0000000..2aa3361
--- /dev/null
+++ b/src/app/views/device_detail/ping-status/ping-status-routing.module.ts
@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { PingStatsComponent } from './ping-status.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: PingStatsComponent,
+    data: {
+      title: 'Widgets'
+    }
+  }
+];
+
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class PingStatsRoutingModule {
+}
diff --git a/src/app/views/device_detail/ping-status/ping-status.component.html b/src/app/views/device_detail/ping-status/ping-status.component.html
new file mode 100644
index 0000000..10a201c
--- /dev/null
+++ b/src/app/views/device_detail/ping-status/ping-status.component.html
@@ -0,0 +1,42 @@
+<c-row>
+  <c-col xs>
+    <c-card class="mb-1" style="border: none;">
+      <c-card-header>
+        <h6>Ping status</h6>
+      </c-card-header>
+      <c-card-body style="height: 275px;overflow: auto;">
+        <h6 style="display: inline-block;">Successful pings : <c-badge color="success" style="font-size: 90%;">
+            {{ping['successful_pings']}}</c-badge></h6>
+        <h6 style="display: inline-block;margin-left: 0.5rem;"> | Failed pings : <c-badge color="danger"
+            style="font-size: 90%;"> {{ping['failed_pings']}}</c-badge></h6>
+        <h6 style="display: inline-block;margin-left: 0.5rem;">| Avrage : <c-badge color="dark" style="font-size: 90%;">
+            {{ping['average_ping_time']}} ms</c-badge></h6>
+        <table cTable small>
+          <thead>
+            <tr>
+              <th scope="col">#</th>
+              <th scope="col">Host</th>
+              <th scope="col">Time</th>
+              <th scope="col">Status</th>
+              <th scope="col">Quality</th>
+              <th scope="col">details</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr *ngFor="let item of ping['results']; index as i">
+              <td>{{i+1}}</td>
+              <td>{{item['host']}}</td>
+              <td>{{item['time']}} ms</td>
+              <td>{{item['status']}}</td>
+              <td><i style="color: {{item['color']}};margin-right:2px;"
+                  class="{{item['icon']}}"></i>{{item['ping_quality']}}</td>
+              <td><button cButton [cTooltip]="item['raw_response']" size="sm" style="padding: 0;" color="info"
+                  variant="ghost"><i class="fa-solid fa-info"></i>
+                  Details</button></td>
+            </tr>
+          </tbody>
+        </table>
+      </c-card-body>
+    </c-card>
+  </c-col>
+</c-row>
\ No newline at end of file
diff --git a/src/app/views/device_detail/ping-status/ping-status.component.scss b/src/app/views/device_detail/ping-status/ping-status.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/views/device_detail/ping-status/ping-status.component.ts b/src/app/views/device_detail/ping-status/ping-status.component.ts
new file mode 100644
index 0000000..ec2a2b8
--- /dev/null
+++ b/src/app/views/device_detail/ping-status/ping-status.component.ts
@@ -0,0 +1,19 @@
+import { AfterContentInit, ChangeDetectionStrategy, ChangeDetectorRef, Component,Input } from '@angular/core';
+
+@Component({
+  selector: 'app-ping-stats',
+  templateUrl: './ping-status.component.html',
+  styleUrls: ['./ping-status.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Default
+})
+export class PingStatsComponent implements AfterContentInit {
+  @Input() ping: any;
+  constructor(
+    private changeDetectorRef: ChangeDetectorRef
+  ) {}
+
+  ngAfterContentInit(): void {
+
+    this.changeDetectorRef.detectChanges();
+  }
+}
diff --git a/src/app/views/device_detail/ping-status/ping-status.module.ts b/src/app/views/device_detail/ping-status/ping-status.module.ts
new file mode 100644
index 0000000..cc3b3a0
--- /dev/null
+++ b/src/app/views/device_detail/ping-status/ping-status.module.ts
@@ -0,0 +1,46 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import {
+  ButtonGroupModule,
+  ButtonModule,
+  CardModule,
+  FormModule,
+  GridModule,
+  ProgressModule,
+  NavbarModule,
+  ModalModule,
+  TableModule, 
+  UtilitiesModule,
+  BadgeModule,
+  TooltipModule,
+} from '@coreui/angular';
+
+// import { WidgetsRoutingModule } from './widgets-routing.module';
+import { PingStatsComponent } from './ping-status.component';
+
+@NgModule({
+  declarations: [
+    PingStatsComponent,
+  ],
+  imports: [  
+      CardModule,
+      CommonModule,
+      GridModule,
+      ProgressModule,
+      FormModule,
+      ButtonModule,
+      ButtonGroupModule,
+      NavbarModule,
+      ModalModule,
+      TableModule, 
+      UtilitiesModule,
+      BadgeModule,
+      TooltipModule,
+  ],
+  exports: [
+    PingStatsComponent,
+  ]
+})
+export class PingStatsModule {
+}
diff --git a/src/app/views/device_detail/radio-data/interface-bw.component.html b/src/app/views/device_detail/radio-data/interface-bw.component.html
new file mode 100644
index 0000000..250b2e4
--- /dev/null
+++ b/src/app/views/device_detail/radio-data/interface-bw.component.html
@@ -0,0 +1,77 @@
+<c-card class="mb-1">
+  <c-card-header>
+    <h6>Radio data</h6>
+  </c-card-header>
+  <c-card-body>
+    <h6>{{raddata.key}}</h6>
+    <app-widgets-dropdown [devicedata]=raddata.value></app-widgets-dropdown>
+    <c-row>
+      <c-col md="3">
+        <table style="word-break:  break-word" small stripedColumns cTable>
+          <tbody>
+            <ng-container *ngFor="let d of raddata.value['data'] | keyvalue ; let i=index">
+              <tr *ngIf="i<objectlen(raddata.value['data'])/4">
+                <th style="width: 20%;text-wrap: nowrap;">{{d.key}}</th>
+                <td scope="row">{{d.value}}</td>
+              </tr>
+            </ng-container>
+          </tbody>
+        </table>
+      </c-col>
+      <c-col md="3">
+
+        <table style="word-break:  break-word" small stripedColumns cTable>
+          <tbody>
+            <ng-container *ngFor="let d of raddata.value['data'] | keyvalue ; let i=index">
+              <tr *ngIf="i>=objectlen(raddata.value['data'])/4 && i<(objectlen(raddata.value['data'])/4)*2">
+                <th style="width: 20%;text-wrap: nowrap;">{{d.key}}</th>
+                <td scope="row">{{d.value}}</td>
+              </tr>
+            </ng-container>
+          </tbody>
+        </table>
+      </c-col>
+      <c-col md="3">
+        <table style="word-break:  break-word" small stripedColumns cTable>
+          <tbody>
+            <ng-container *ngFor="let d of raddata.value['data'] | keyvalue ; let i=index">
+              <tr *ngIf="i>=(objectlen(raddata.value['data'])/4)*2 && i<(objectlen(raddata.value['data'])/4)*3">
+                <th style="width: 20%;text-wrap: nowrap;">{{d.key}}</th>
+                <td scope="row">{{d.value}}</td>
+              </tr>
+            </ng-container>
+          </tbody>
+        </table>
+      </c-col>
+      <c-col md="3">
+        <table small stripedColumns cTable>
+          <tbody>
+            <ng-container *ngFor="let d of raddata.value['data'] | keyvalue ; let i=index">
+              <tr *ngIf="i>=(objectlen(raddata.value['data'])/4)*3">
+                <th>{{d.key}}</th>
+                <td scope="row">{{d.value}}</td>
+              </tr>
+            </ng-container>
+          </tbody>
+        </table>
+      </c-col>
+    </c-row>
+    <c-row *ngIf="raddata.value['strength-at-rates']">
+      <c-col>
+        <table style="word-break:  break-word" small borderless cTable>
+          <tbody>
+            <tr>
+              <th
+                style="text-wrap: nowrap;vertical-align: middle;padding: 5px;border-radius: 5px;background-color: #3399ff36;">
+                Strength at rates</th>
+              <td scope="row">
+                <c-badge color="info" style="font-size: 0.85em;" class="mx-1"
+                  *ngFor="let st of strangth_at_rate_extract(raddata.value['strength-at-rates'])">{{st}}</c-badge>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </c-col>
+    </c-row>
+  </c-card-body>
+</c-card>
\ No newline at end of file
diff --git a/src/app/views/device_detail/radio-data/radio-data-routing.module.ts b/src/app/views/device_detail/radio-data/radio-data-routing.module.ts
new file mode 100644
index 0000000..53b7f99
--- /dev/null
+++ b/src/app/views/device_detail/radio-data/radio-data-routing.module.ts
@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { RadioDataComponent } from './radio-data.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: RadioDataComponent,
+    data: {
+      title: 'Widgets'
+    }
+  }
+];
+
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class RadioDataRoutingModule {
+}
diff --git a/src/app/views/device_detail/radio-data/radio-data.component.scss b/src/app/views/device_detail/radio-data/radio-data.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/views/device_detail/radio-data/radio-data.component.ts b/src/app/views/device_detail/radio-data/radio-data.component.ts
new file mode 100644
index 0000000..ace8e53
--- /dev/null
+++ b/src/app/views/device_detail/radio-data/radio-data.component.ts
@@ -0,0 +1,24 @@
+import { AfterContentInit, ChangeDetectionStrategy, ChangeDetectorRef, Component,Input } from '@angular/core';
+
+@Component({
+  selector: 'app-iradio-data',
+  templateUrl: './radio-data.component.html',
+  styleUrls: ['./radio-data.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Default
+})
+export class RadioDataComponent implements AfterContentInit {
+  @Input() raddata: any;
+  constructor(
+    private changeDetectorRef: ChangeDetectorRef
+  ) {}
+
+  objectlen(object:any){
+    return Object.keys(object).length;
+  }
+  strangth_at_rate_extract(data:string){
+    return data.split(',');
+  }
+  ngAfterContentInit(): void {
+    this.changeDetectorRef.detectChanges();
+  }
+}
diff --git a/src/app/views/device_detail/radio-data/radio-data.module.ts b/src/app/views/device_detail/radio-data/radio-data.module.ts
new file mode 100644
index 0000000..0b286bb
--- /dev/null
+++ b/src/app/views/device_detail/radio-data/radio-data.module.ts
@@ -0,0 +1,56 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import {
+  ButtonGroupModule,
+  ButtonModule,
+  CardModule,
+  FormModule,
+  GridModule,
+  ProgressModule,
+  NavbarModule,
+  AlertModule,
+  ModalModule,
+  TableModule, 
+  UtilitiesModule,
+  BadgeModule,
+  NavModule, 
+  TabsModule,
+} from '@coreui/angular';
+import { IconModule } from '@coreui/icons-angular';
+import { ChartjsModule } from '@coreui/angular-chartjs';
+
+import { WidgetsModule } from "../../widgets/widgets.module";
+
+// import { WidgetsRoutingModule } from './widgets-routing.module';
+import { RadioDataComponent } from './radio-data.component';
+
+@NgModule({
+  declarations: [
+    RadioDataComponent,
+  ],
+  imports: [  
+      CardModule,
+      AlertModule,
+      CommonModule,
+      GridModule,
+      ProgressModule,
+      FormModule,
+      ButtonModule,
+      ButtonGroupModule,
+      ChartjsModule,
+      WidgetsModule,
+      NavbarModule,
+      ModalModule,
+      TableModule, 
+      UtilitiesModule,
+      BadgeModule,
+      NavModule, 
+      TabsModule,
+  ],
+  exports: [
+    RadioDataComponent,
+  ]
+})
+export class RadioDataModule {
+}
diff --git a/src/app/views/device_logs/devlogs.component.html b/src/app/views/device_logs/devlogs.component.html
index 89ffbf0..5d06c01 100644
--- a/src/app/views/device_logs/devlogs.component.html
+++ b/src/app/views/device_logs/devlogs.component.html
@@ -1,10 +1,22 @@
 <c-row>
   <c-col xs>
-    <c-card class="mb-4">
+    <c-card class="mb-4" [ngStyle]="component_devid && {'border-top': 'none'}">
       <c-card-header>
         <c-row>
-          <c-col xs [lg]="11">
-            Device LOGS
+          <c-col xs [lg]="11" style="display: flex;flex-direction: column;align-items: flex-start;">
+            <h5>Device LOGS
+              <a style="cursor: pointer;" (click)="reinitgrid('none','none')"><i
+                  *ngIf="devid!=0 && component_devid && !reloading" class="fa-solid fa-arrows-rotate"
+                  style="color: #74C0FC;"></i>
+                <i *ngIf="devid!=0 && component_devid && reloading" class="fa-solid fa-arrows-rotate fa-spin"
+                  style="color: #74C0FC;"></i>
+              </a>
+            </h5>
+            <c-badge color="warning" *ngIf="devid!=0 && !component_devid">Filtered Result For Device ID
+              {{devid}}</c-badge>
+            <c-alert color="warning" style="padding-top: 5px!important;font-size: 0.8rem;display: inline-block;" *ngIf="!filters['start_time'] && !filters['end_time']">
+              <i class="fa-solid fa-triangle-exclamation mx-1"></i>Showing <strong>last 24 hours logs</strong> by default. Use filters to modify the date and time.
+            </c-alert>
           </c-col>
           <c-col xs [lg]="1">
             <button (click)="toggleCollapse()" cButton class="me-1" color="primary"><i
@@ -121,12 +133,14 @@
           </gui-grid-column>
           <gui-grid-column header="eventtime" width='220' field="eventtime">
             <ng-template let-value="item.eventtime" let-item="item" let-index="index">
-              <div *ngIf="item.fixtime" class="fixed_time"><span><c-badge *ngIf="item.status==true" color="danger" style="font-size: 0.65em!important;padding: 3px 5px;" size="sm"
-                shape="rounded-pill">Event</c-badge> {{value}}</span><span>
-                <c-badge *ngIf="item.status==true" color="success" style="font-size: 0.65em!important;padding: 3px 5px;" size="sm"
-                  shape="rounded-pill">Fixed</c-badge> {{item.fixtime}}</span>
+              <div *ngIf="item.fixtime" class="fixed_time"><span><c-badge *ngIf="item.status==true" color="danger"
+                    style="font-size: 0.65em!important;padding: 3px 5px;" size="sm" shape="rounded-pill">Event</c-badge>
+                  {{value}}</span><span>
+                  <c-badge *ngIf="item.status==true" color="success"
+                    style="font-size: 0.65em!important;padding: 3px 5px;" size="sm" shape="rounded-pill">Fixed</c-badge>
+                  {{item.fixtime}}</span>
               </div>
-              <div *ngIf="!item.fixtime">  {{ value }}</div>
+              <div *ngIf="!item.fixtime"> {{ value }}</div>
             </ng-template>
           </gui-grid-column>
           <gui-grid-column header="Device" width='200' field="name">
diff --git a/src/app/views/device_logs/devlogs.component.scss b/src/app/views/device_logs/devlogs.component.scss
index fdc3a4a..0470013 100644
--- a/src/app/views/device_logs/devlogs.component.scss
+++ b/src/app/views/device_logs/devlogs.component.scss
@@ -128,4 +128,8 @@ padding: 0.5rem!important;
   .mat-mdc-form-field-infix{
       width:150px;
   }
+}
+.alert{
+  padding: 5px!important;
+  color:#644808!important;
 }
\ No newline at end of file
diff --git a/src/app/views/device_logs/devlogs.component.ts b/src/app/views/device_logs/devlogs.component.ts
index 3e798b9..85b22db 100644
--- a/src/app/views/device_logs/devlogs.component.ts
+++ b/src/app/views/device_logs/devlogs.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, ViewEncapsulation } from "@angular/core";
+import { Component, OnInit, ViewEncapsulation,Input } from "@angular/core";
 import { FormControl } from "@angular/forms";
 import { dataProvider } from "../../providers/mikrowizard/data";
 import { Router, ActivatedRoute } from "@angular/router";
@@ -20,11 +20,13 @@ import { Subject } from "rxjs";
 
 
 @Component({
+  selector: 'app-devlogs',
   templateUrl: "devlogs.component.html",
   styleUrls: ["devlogs.component.scss"],
   encapsulation: ViewEncapsulation.None,
 })
 export class DevLogsComponent implements OnInit {
+  @Input() component_devid: any=false;
   public uid: number;
   public uname: string;
   public tz: string = "UTC"
@@ -40,6 +42,7 @@ export class DevLogsComponent implements OnInit {
   public event_types: any = [];
   public event_types_filtered: any = [];
   public filters_visible: boolean = false;
+  public reloading: boolean = false;
   constructor(
     private data_provider: dataProvider,
     private router: Router,
@@ -174,7 +177,11 @@ export class DevLogsComponent implements OnInit {
   };
   ngOnInit(): void {
     var _self = this;
-    this.devid = Number(this.route.snapshot.paramMap.get("devid"));
+    if (this.component_devid) {
+      this.devid = this.component_devid;
+    } else{
+      this.devid = Number(this.route.snapshot.paramMap.get("devid"));
+    }
     if (this.devid > 0) {
       this.filters["devid"] = this.devid;
     }
@@ -210,6 +217,8 @@ export class DevLogsComponent implements OnInit {
   }
   initGridTable(): void {
     var _self = this;
+    if(this.reloading) return;
+    this.reloading = true;
     this.data_provider.get_dev_logs(this.filters).then((res) => {
       let index = 1;
       this.source = res.map((d: any) => {
@@ -233,8 +242,8 @@ export class DevLogsComponent implements OnInit {
         return d;
       });
       _self.event_types_filtered = _self.event_types;
-      console.dir(this.source);
       this.loading = false;
+      this.reloading = false;
     });
   }
 }
diff --git a/src/app/views/device_logs/devlogs.module.ts b/src/app/views/device_logs/devlogs.module.ts
index d6a9a65..5b8c49f 100644
--- a/src/app/views/device_logs/devlogs.module.ts
+++ b/src/app/views/device_logs/devlogs.module.ts
@@ -10,6 +10,7 @@ import {
   GridModule,
   CollapseModule,
   BadgeModule,
+  AlertModule,
 } from "@coreui/angular";
 import { NgxMatSelectSearchModule } from "ngx-mat-select-search";
 import { DevLogsRoutingModule } from "./devlogs-routing.module";
@@ -41,7 +42,9 @@ import { MatSelectModule } from "@angular/material/select";
     MatSelectModule,
     NgxMatSelectSearchModule,
     MatDatepickerModule,
+    AlertModule,
   ],
   declarations: [DevLogsComponent],
+  exports: [DevLogsComponent],
 })
 export class DevLogsModule {}
diff --git a/src/app/views/devices/devices.component.html b/src/app/views/devices/devices.component.html
index cfc5f75..a27a48a 100644
--- a/src/app/views/devices/devices.component.html
+++ b/src/app/views/devices/devices.component.html
@@ -118,6 +118,9 @@
                   <!-- <button size="sm" (click)="single_device_action(item,'upgrade')" style="padding: 4px 7px;"
                     cListGroupItem><i class="text-primary fa-solid fa-microchip"></i><small>
                       Upgrade Firmware</small></button> -->
+                  <button size="sm" (click)="single_device_action(item,'devlogs')" style="padding: 4px 7px;"
+                    cListGroupItem><i class="fa-regular fa-rectangle-list"></i><small>
+                      Device Logs</small></button>
                   <button size="sm" (click)="single_device_action(item,'logauth')" style="padding: 4px 7px;"
                     cListGroupItem><i class="text-primary fa-regular fa-clock"></i><small>
                       Show Auth Logs</small></button>
@@ -176,8 +179,8 @@
   <c-modal-body>
     <div *ngIf="scanwizard_step==1" class="mb-5" style="text-align: center;">
       <h5 class="mb-5">Please select searching method</h5>
-      <button cButton color="info" (click)="scanwizard(2,'chip')" [disabled]="true" class="mx-1" size="lg"><img width="100px"
-          src="assets/img/chip.png" /><br />Layer2 Scan</button>
+      <button cButton color="info" (click)="scanwizard(2,'chip')" [disabled]="true" class="mx-1" size="lg"><img
+          width="100px" src="assets/img/chip.png" /><br />Layer2 Scan</button>
       <button cButton color="info" (click)="scanwizard(2,'ip')" class="mx-1" size="lg"><img width="100px"
           src="assets/img/tcpip.png" /><br />TCP/IP Scan</button>
     </div>
@@ -256,8 +259,9 @@
     </div>
   </c-modal-body>
   <c-modal-footer>
-    <h6 style="margin: 0 auto;" *ngIf="scanwizard_step==1" ><button cButton color="primary" (click)="show_exec()" style="margin: 0 auto;"  variant="outline">Device scan logs</button></h6>
-    <small *ngIf="scan_type=='ip'" >Empty username and password means system default
+    <h6 style="margin: 0 auto;" *ngIf="scanwizard_step==1"><button cButton color="primary" (click)="show_exec()"
+        style="margin: 0 auto;" variant="outline">Device scan logs</button></h6>
+    <small *ngIf="scan_type=='ip'">Empty username and password means system default
       configuration</small>
   </c-modal-footer>
 </c-modal>
@@ -271,9 +275,7 @@
   <c-modal-body>
     <c-input-group class="mb-3">
       <gui-grid [autoResizeWidth]="true" *ngIf="ExecutedDataModalVisible" [searching]="searching"
-        [source]="ExecutedData" [columnMenu]="columnMenu" [sorting]="sorting" [infoPanel]="infoPanel"
-       [autoResizeWidth]=true
-        [paging]="paging">
+        [source]="ExecutedData" [columnMenu]="columnMenu" [sorting]="sorting" [infoPanel]="infoPanel" [paging]="paging">
         <gui-grid-column header="Start time" field="start">
           <ng-template let-value="item['started']" let-item="item" let-index="index">
             &nbsp; {{value}} </ng-template>
@@ -286,18 +288,18 @@
           <ng-template let-value="item['end_ip']" let-item="item" let-index="index">
             &nbsp; {{value}} </ng-template>
         </gui-grid-column>
-        <gui-grid-column   header="End time" field="end">
+        <gui-grid-column header="End time" field="end">
           <ng-template let-value="item['ended']" let-item="item" let-index="index">
             {{value}}
           </ng-template>
         </gui-grid-column>
         <gui-grid-column header="Logs" field="mac" align="center">
           <ng-template let-value="item['result']" let-item="item" let-index="index">
-            <button (click)="exportToCsv(value)"  color="primary" cButton>download</button>
+            <button (click)="exportToCsv(value)" color="primary" cButton>download</button>
           </ng-template>
         </gui-grid-column>
       </gui-grid>
-      <br/>
+      <br />
     </c-input-group>
     <hr />
   </c-modal-body>
@@ -377,7 +379,8 @@
     </c-input-group>
     <c-input-group class="mb-3">
       <span cInputGroupText>peer ip</span>
-      <select aria-label="Default select example" cFormControl [(ngModel)]="selected_device['editform']['peer_ip']" cSelect>
+      <select aria-label="Default select example" cFormControl [(ngModel)]="selected_device['editform']['peer_ip']"
+        cSelect>
         <option *ngFor="let o of selected_device['editform']['ips']" [value]="o">{{o}}</option>
       </select>
     </c-input-group>
diff --git a/src/app/views/devices/devices.component.ts b/src/app/views/devices/devices.component.ts
index edb012b..ef56bf8 100644
--- a/src/app/views/devices/devices.component.ts
+++ b/src/app/views/devices/devices.component.ts
@@ -173,6 +173,9 @@ export class DevicesComponent implements OnInit, OnDestroy {
       case "logauth":
         this.router.navigate(["/authlog", { devid: dev.id }]);
         break;
+      case "devlogs":
+        this.router.navigate(["/devlogs", { devid: dev.id }]);
+        break;
       case "logacc":
         this.router.navigate(["/accountlog", { devid: dev.id }]);
         break;
@@ -403,6 +406,9 @@ export class DevicesComponent implements OnInit, OnDestroy {
             "danger"
           );
         }
+        else if ("error" in res) {
+          _self.show_toast("Error", res.error, "danger");
+        }
         else{
         _self.show_toast("info", "Updating Firmwares Sent", "light");
         _self.initGridTable();}
diff --git a/src/app/views/syslog/syslog.component.html b/src/app/views/syslog/syslog.component.html
index 6be0bf3..0f804b1 100644
--- a/src/app/views/syslog/syslog.component.html
+++ b/src/app/views/syslog/syslog.component.html
@@ -3,8 +3,11 @@
     <c-card class="mb-4">
       <c-card-header>
         <c-row>
-          <c-col xs [lg]="11">
-            Devices
+          <c-col xs [lg]="11" style="display: flex;flex-direction: column;align-items: flex-start;">
+            <h5>Devices</h5>
+            <c-alert color="warning" style="padding-top: 5px!important;font-size: 0.8rem;display: inline-block;" *ngIf="!filters['start_time'] && !filters['end_time']">
+              <i class="fa-solid fa-triangle-exclamation mx-1"></i>Showing <strong>last 24 hours logs</strong> by default. Use filters to modify the date and time.
+            </c-alert>
           </c-col>
           <c-col xs [lg]="1">
             <button (click)="toggleCollapse()" cButton class="me-1" color="primary"><i
diff --git a/src/app/views/syslog/syslog.component.scss b/src/app/views/syslog/syslog.component.scss
index 6d6d0be..09bdfcd 100644
--- a/src/app/views/syslog/syslog.component.scss
+++ b/src/app/views/syslog/syslog.component.scss
@@ -125,4 +125,8 @@ padding: 0.3rem!important;
   .mat-mdc-form-field-infix{
       width:150px;
   }
+}
+.alert{
+  padding: 5px!important;
+  color:#644808!important;
 }
\ No newline at end of file
diff --git a/src/app/views/syslog/syslog.module.ts b/src/app/views/syslog/syslog.module.ts
index 36be911..af58657 100644
--- a/src/app/views/syslog/syslog.module.ts
+++ b/src/app/views/syslog/syslog.module.ts
@@ -7,6 +7,7 @@ import {
   GridModule,
   CollapseModule,
   DropdownModule,
+  AlertModule,
 } from "@coreui/angular";
 import { NgxMatSelectSearchModule } from "ngx-mat-select-search";
 import { SyslogRoutingModule } from "./syslog-routing.module";
@@ -35,6 +36,7 @@ import { MatSelectModule } from "@angular/material/select";
     MatSelectModule,
     NgxMatSelectSearchModule,
     MatDatepickerModule,
+    AlertModule,
   ],
   declarations: [SyslogComponent],
 })

From 5822fb5d1d383642386af5a9b6a1f66821832467 Mon Sep 17 00:00:00 2001
From: sepehr <sepehr.ha@gmail.com>
Date: Thu, 16 Oct 2025 17:33:07 +0300
Subject: [PATCH 05/15] feat: major device management enhancements

- Add direct web access button for device WebFig
- Add web proxy-based access with auto-login via MikroWizard
- Fix updatable/upgradable filters and add more filter options
- Redesign devices table UI with improved UX
- Add bulk scan feature with CSV import capability
- Add parallel scanning functionality
- Add upgrade firmware feature
- Add scan history button with enhanced report viewing
---
 src/app/views/devices/devices.component.html | 347 ++++++++++++++++---
 src/app/views/devices/devices.component.ts   | 292 +++++++++++++++-
 src/app/views/devices/devices.module.ts      |   2 +
 3 files changed, 589 insertions(+), 52 deletions(-)

diff --git a/src/app/views/devices/devices.component.html b/src/app/views/devices/devices.component.html
index a27a48a..fc93cd8 100644
--- a/src/app/views/devices/devices.component.html
+++ b/src/app/views/devices/devices.component.html
@@ -8,19 +8,25 @@
           </c-col>
           <c-col xs [lg]="9">
             <h6 style="text-align: right;">
-              <button cButton color="danger" class="mx-1" size="sm" style="color: #fff;">{{updates.length}} Updatable
-              </button>
-              <button cButton color="warning" class="mx-1" size="sm" style="color: #fff;">{{upgrades.length}}
-                Upgradable</button>
-              |
+              <button cButton color="success" (click)="openAddDeviceModal()" class="mx-1"
+                size="sm" style="color: #fff;"><i class="fa-solid fa-plus"></i> Bulk Add </button>
               <button cButton color="dark" (click)="scanwizard(1,'')" [cModalToggle]="ScannerModal.id" class="mx-1"
-                size="sm" style="color: #fff;"><i class="fa-solid fa-magnifying-glass"></i> Scanner</button>
+                size="sm" style="color: #fff;"><i class="fa-solid fa-magnifying-glass"></i> Scan</button>
+              <button cButton color="primary" (click)="show_exec()" class="mx-1"
+                size="sm" style="color: #fff;"><i class="fa-solid fa-history"></i> History</button>
             </h6>
           </c-col>
         </c-row>
       </c-card-header>
       <c-card-body>
-        <c-row>
+        <c-row> 
+          <c-col [lg]="9">
+            <button cButton color="danger" class="mx-1" size="sm" style="color: #fff;" (click)="filterUpdatable()">{{updates.length}} Updatable
+            </button>
+            <button cButton color="warning" class="mx-1" size="sm" style="color: #fff;" (click)="filterUpgradable()">{{upgrades.length}}
+              Upgradable</button>
+            <button cButton color="secondary" class="mx-1" size="sm" (click)="clearFilter()">Clear Filter</button>
+          </c-col>
           <c-col [lg]="3">
             <c-input-group *ngIf="groups.length>0">
               <span cInputGroupText>Group</span>
@@ -37,6 +43,10 @@
           (selectedRows)="onSelectedRows($event)" [autoResizeWidth]=true>
           <gui-grid-column header="Name" field="name">
             <ng-template let-value="item.name" let-item="item" let-index="index">
+              <button cButton size="sm" variant="ghost" color="primary" (click)="webAccess(item)" 
+                style="padding: 2px 4px; margin-right: 5px; border: none;" cTooltip="Web Access">
+                <i class="fas fa-globe" style="font-size: 12px;"></i>
+              </button>
               <img *ngIf="item.status=='updating'" width="20px" src="assets/img/loading.svg" />
               <i *ngIf="item.status=='updated'" cTooltip="Tooltip text"
                 style="color: green; margin-right: 3px;font-size: .7em;" class="fa-solid fa-check"></i>
@@ -55,7 +65,7 @@
               <div>{{value}}</div>
               <i *ngIf="item.update_availble" cTooltip="Firmware Update availble"
                 class="fa-solid fa-up-long text-primary mx-1"></i>
-              <i *ngIf="item.update_availble" cTooltip="Device Firmware not Upgraded"
+              <i *ngIf="item.upgrade_availble" cTooltip="Device Firmware not Upgraded"
                 class="fa-solid fa-microchip text-danger mx-1"></i>
             </ng-template>
           </gui-grid-column>
@@ -115,9 +125,9 @@
                   <button size="sm" (click)="single_device_action(item,'update')" style="padding: 4px 7px;"
                     cListGroupItem><i class="text-primary fa-solid fa-upload"></i><small>
                       Update Firmware</small></button>
-                  <!-- <button size="sm" (click)="single_device_action(item,'upgrade')" style="padding: 4px 7px;"
+                  <button size="sm" (click)="single_device_action(item,'upgrade')" style="padding: 4px 7px;"
                     cListGroupItem><i class="text-primary fa-solid fa-microchip"></i><small>
-                      Upgrade Firmware</small></button> -->
+                      Upgrade Firmware</small></button>
                   <button size="sm" (click)="single_device_action(item,'devlogs')" style="padding: 4px 7px;"
                     cListGroupItem><i class="fa-regular fa-rectangle-list"></i><small>
                       Device Logs</small></button>
@@ -154,8 +164,9 @@
                           Firmware</button></li>
                       <li><button cDropdownItem
                           (click)="ConfirmAction='update';ConfirmModalVisible=true">Update</button></li>
-                      <!-- <li><button cDropdownItem>Upgrade</button></li>
-                      <li><button cDropdownItem>Update and Upgrade</button></li> -->
+                      <li><button cDropdownItem
+                          (click)="ConfirmAction='upgrade';ConfirmModalVisible=true">Upgrade</button></li>
+                      <!-- <li><button cDropdownItem>Update and Upgrade</button></li> -->
                     </ul>
                   </c-dropdown>
                 </c-nav-item>
@@ -259,8 +270,6 @@
     </div>
   </c-modal-body>
   <c-modal-footer>
-    <h6 style="margin: 0 auto;" *ngIf="scanwizard_step==1"><button cButton color="primary" (click)="show_exec()"
-        style="margin: 0 auto;" variant="outline">Device scan logs</button></h6>
     <small *ngIf="scan_type=='ip'">Empty username and password means system default
       configuration</small>
   </c-modal-footer>
@@ -269,39 +278,68 @@
 
 <c-modal #ExecutedDataModal backdrop="static" size="xl" [(visible)]="ExecutedDataModalVisible" id="ExecutedDataModal">
   <c-modal-header>
-    <h5 cModalTitle>Scan History : </h5>
+    <h5 cModalTitle>Task History</h5>
     <button (click)="ExecutedDataModalVisible=!ExecutedDataModalVisible" cButtonClose></button>
   </c-modal-header>
-  <c-modal-body>
-    <c-input-group class="mb-3">
-      <gui-grid [autoResizeWidth]="true" *ngIf="ExecutedDataModalVisible" [searching]="searching"
-        [source]="ExecutedData" [columnMenu]="columnMenu" [sorting]="sorting" [infoPanel]="infoPanel" [paging]="paging">
-        <gui-grid-column header="Start time" field="start">
-          <ng-template let-value="item['started']" let-item="item" let-index="index">
-            &nbsp; {{value}} </ng-template>
-        </gui-grid-column>
-        <gui-grid-column header="Start ip" field="start_ip">
-          <ng-template let-value="item['start_ip']" let-item="item" let-index="index">
-            &nbsp; {{value}} </ng-template>
-        </gui-grid-column>
-        <gui-grid-column header="End ip" field="end_ip">
-          <ng-template let-value="item['end_ip']" let-item="item" let-index="index">
-            &nbsp; {{value}} </ng-template>
-        </gui-grid-column>
-        <gui-grid-column header="End time" field="end">
-          <ng-template let-value="item['ended']" let-item="item" let-index="index">
-            {{value}}
-          </ng-template>
-        </gui-grid-column>
-        <gui-grid-column header="Logs" field="mac" align="center">
-          <ng-template let-value="item['result']" let-item="item" let-index="index">
-            <button (click)="exportToCsv(value)" color="primary" cButton>download</button>
-          </ng-template>
-        </gui-grid-column>
-      </gui-grid>
-      <br />
-    </c-input-group>
-    <hr />
+  <c-modal-body style="min-height: 400px; max-height: 70vh; overflow-y: auto;">
+    <div class="mb-3">
+      <c-input-group>
+        <span cInputGroupText>Filter by Type</span>
+        <select [(ngModel)]="selectedTaskType" (change)="filterByTaskType()" cSelect>
+          <option value="all">All Tasks</option>
+          <option value="ip-scan">IP Scan</option>
+          <option value="bulk-add">Bulk Add</option>
+        </select>
+      </c-input-group>
+    </div>
+    <gui-grid [autoResizeWidth]="true" *ngIf="ExecutedDataModalVisible" [searching]="searching"
+      [source]="filteredExecutedData" [columnMenu]="columnMenu" [sorting]="sorting" [infoPanel]="infoPanel" [paging]="paging">
+      <gui-grid-column header="Type" field="task_type" [width]="100">
+        <ng-template let-value="item['task_type']" let-item="item" let-index="index">
+          <i *ngIf="item.task_type === 'ip-scan'" class="fas fa-search" style="margin-right: 3px; color: #0d6efd;"></i>
+          <i *ngIf="item.task_type === 'bulk-add'" class="fas fa-plus-circle" style="margin-right: 3px; color: #198754;"></i>
+          <span style="font-size: 11px;">{{getTaskTypeLabel(value)}}</span>
+        </ng-template>
+      </gui-grid-column>
+      <gui-grid-column header="Time" field="time" [width]="220">
+        <ng-template let-value="value" let-item="item" let-index="index">
+          <div style="font-size: 10px; line-height: 1.3;">
+            <div><strong>Start:</strong> {{item.started}}</div>
+            <div><strong>End:</strong> {{item.ended}}</div>
+          </div>
+        </ng-template>
+      </gui-grid-column>
+      <gui-grid-column header="Details" field="details">
+        <ng-template let-value="value" let-item="item" let-index="index">
+          <div *ngIf="item.task_type === 'ip-scan'" style="font-size: 12px; line-height: 1.3;">
+            <div>{{item.start_ip}} - {{item.end_ip}}</div>
+            <div>User: {{item.username}}</div>
+          </div>
+          <div *ngIf="item.task_type === 'bulk-add'" style="font-size: 12px; line-height: 1.3;">
+            <div>{{item.device_count}} devices</div>
+            <div style="word-break: break-all;">{{item.task_id}}</div>
+          </div>
+        </ng-template>
+      </gui-grid-column>
+      <gui-grid-column header="Results" field="results" align="center" [width]="70">
+        <ng-template let-value="value" let-item="item" let-index="index">
+          <div style="font-size: 11px;">
+            <span style="color: green;">✓ {{item.success_count}}</span>
+            <span *ngIf="item.failed_count > 0" style="color: red; margin-left: 5px;">✗ {{item.failed_count}}</span>
+          </div>
+        </ng-template>
+      </gui-grid-column>
+      <gui-grid-column header="Actions" field="actions" align="center" [width]="160">
+        <ng-template let-value="value" let-item="item" let-index="index">
+          <button (click)="showTaskDetails(item)" color="info" size="sm" cButton class="me-1">
+            <i class="fas fa-eye"></i> Details
+          </button>
+          <button (click)="exportToCsv(item.result)" color="primary" size="sm" cButton>
+            <i class="fas fa-download"></i> CSV
+          </button>
+        </ng-template>
+      </gui-grid-column>
+    </gui-grid>
   </c-modal-body>
   <c-modal-footer>
     <button (click)="ExecutedDataModalVisible=!ExecutedDataModalVisible" cButton color="secondary">
@@ -320,6 +358,10 @@
       update?</span>
     <span *ngIf="ConfirmAction=='update'">Are you sure that You want to <code>update firmware</code> of selected
       devices?</span>
+    <span *ngIf="ConfirmAction=='upgrade'">Are you sure that You want to <code>upgrade firmware</code> of selected
+      devices?</span>
+    <span *ngIf="ConfirmAction=='reboot'">Are you sure that You want to <code>reboot</code> the selected
+      devices?</span>
     <ng-container *ngIf="ConfirmAction=='delete'">
       Are you sure that You want to<code>Delete Device {{selected_device.name}} ?</code><br />
       <hr>
@@ -338,6 +380,12 @@
     <button *ngIf="ConfirmAction=='update'" (click)="update_firmware()" cButton color="danger">
       Yes
     </button>
+    <button *ngIf="ConfirmAction=='upgrade'" (click)="upgrade_firmware()" cButton color="danger">
+      Yes
+    </button>
+    <button *ngIf="ConfirmAction=='reboot'" (click)="upgrade_firmware()" cButton color="danger">
+      Yes
+    </button>
     <button *ngIf="ConfirmAction=='delete'" (click)="delete_device()" cButton color="danger">
       Yes,Delete Device
     </button>
@@ -396,4 +444,213 @@
   </c-modal-footer>
 </c-modal>
 
+<!-- Add Device Modal -->
+<c-modal #AddDeviceModal backdrop="static" size="lg" [(visible)]="addDeviceModalVisible" id="AddDeviceModal">
+  <c-modal-header>
+    <h5 cModalTitle>Add Devices from CSV</h5>
+    <button cButtonClose (click)="closeAddDeviceModal()"></button>
+  </c-modal-header>
+  <c-modal-body>
+    <div *ngIf="addDeviceStep === 1">
+      <h6>Upload CSV File</h6>
+      <p>Please upload a CSV file containing device information with columns: IP Address, Username, Password, API Port</p>
+      <input type="file" accept=".csv" (change)="onFileSelected($event)" class="form-control mb-3">
+      <div *ngIf="csvPreview.length > 0">
+        <h6>Preview (First 3 rows):</h6>
+        <table class="table table-sm table-bordered">
+          <thead>
+            <tr>
+              <th *ngFor="let header of csvHeaders">{{header}}</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr *ngFor="let row of csvPreview">
+              <td *ngFor="let cell of row">{{cell}}</td>
+            </tr>
+          </tbody>
+        </table>
+        <h6>Column Mapping:</h6>
+        <div class="row">
+          <div class="col-md-6">
+            <label>IP Address Column:</label>
+            <select [(ngModel)]="columnMapping.ip" class="form-select">
+              <option value="">Select Column</option>
+              <option *ngFor="let header of csvHeaders; let i = index" [value]="i">{{header}}</option>
+            </select>
+          </div>
+          <div class="col-md-6">
+            <label>Username Column:</label>
+            <select [(ngModel)]="columnMapping.username" class="form-select">
+              <option value="">Select Column</option>
+              <option *ngFor="let header of csvHeaders; let i = index" [value]="i">{{header}}</option>
+            </select>
+          </div>
+        </div>
+        <div class="row mt-2">
+          <div class="col-md-6">
+            <label>Password Column:</label>
+            <select [(ngModel)]="columnMapping.password" class="form-select">
+              <option value="">Select Column</option>
+              <option *ngFor="let header of csvHeaders; let i = index" [value]="i">{{header}}</option>
+            </select>
+          </div>
+          <div class="col-md-6">
+            <label>API Port Column:</label>
+            <select [(ngModel)]="columnMapping.port" class="form-select">
+              <option value="">Select Column</option>
+              <option *ngFor="let header of csvHeaders; let i = index" [value]="i">{{header}}</option>
+            </select>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div *ngIf="addDeviceStep === 2" class="text-center">
+      <div class="spinner-border text-primary" role="status">
+        <span class="visually-hidden">Loading...</span>
+      </div>
+      <h5 class="mt-3">{{uploadStatus}}</h5>
+    </div>
+    <div *ngIf="addDeviceStep === 3">
+      <h5>Upload Complete</h5>
+      <div class="alert alert-success">
+        <strong>Success:</strong> {{uploadResult.success}} devices added successfully<br>
+        <strong>Failed:</strong> {{uploadResult.failed}} devices failed to add
+      </div>
+      <button cButton color="primary" (click)="downloadResults()" *ngIf="uploadResult.resultFile">
+        <i class="fas fa-download"></i> Download Results
+      </button>
+    </div>
+  </c-modal-body>
+  <c-modal-footer>
+    <button *ngIf="addDeviceStep === 1" cButton color="primary" (click)="uploadDevices()" [disabled]="!isValidMapping()">
+      Add Devices
+    </button>
+    <button *ngIf="addDeviceStep === 3" cButton color="success" (click)="closeAddDeviceModal()">
+      Close
+    </button>
+    <button *ngIf="addDeviceStep !== 2" cButton color="secondary" (click)="closeAddDeviceModal()">
+      Cancel
+    </button>
+  </c-modal-footer>
+</c-modal>
+
+<!-- Web Access Modal -->
+<c-modal #WebAccessModal backdrop="static" [(visible)]="showWebAccessModal" id="WebAccessModal">
+  <c-modal-header>
+    <h6 cModalTitle>Web Access Options</h6>
+    <button cButtonClose (click)="closeWebAccessModal()"></button>
+  </c-modal-header>
+  <c-modal-body>
+    <p>Choose how to access the device:</p>
+    <div class="d-grid gap-2">
+      <button *ngIf="ispro" cButton color="primary" (click)="openProxyAccess()">
+        <i class="fas fa-shield-alt"></i> Proxy Access, through Mikrowizard server
+      </button>
+      <button cButton color="secondary" (click)="openDirectAccess()">
+        <i class="fas fa-external-link-alt"></i> Direct Access
+      </button>
+    </div>
+  </c-modal-body>
+  <c-modal-footer>
+    <button cButton color="secondary" (click)="closeWebAccessModal()">Cancel</button>
+  </c-modal-footer>
+</c-modal>
+
+<!-- Task Details Modal -->
+<c-modal #TaskDetailsModal backdrop="static" size="xl" [(visible)]="detailsModalVisible" id="TaskDetailsModal" 
+         style="z-index: 1060; backdrop-filter: blur(2px);">
+  <c-modal-header style="background: rgba(255,255,255,0.95); backdrop-filter: blur(10px);">
+    <h5 cModalTitle>{{getTaskTypeLabel(selectedTaskDetails?.task_type)}} Results</h5>
+    <button (click)="closeDetailsModal()" cButtonClose></button>
+  </c-modal-header>
+  <c-modal-body *ngIf="selectedTaskDetails" style="background: rgba(255,255,255,0.98); backdrop-filter: blur(10px); max-height: 70vh; overflow-y: auto;">
+    <div class="mb-3">
+      <c-row>
+        <c-col md="6">
+          <strong>Task Type:</strong> {{getTaskTypeLabel(selectedTaskDetails.task_type)}}<br>
+          <strong>Started:</strong> {{selectedTaskDetails.started}}<br>
+          <strong>Completed:</strong> {{selectedTaskDetails.ended}}
+        </c-col>
+        <c-col md="6">
+          <div *ngIf="selectedTaskDetails.task_type === 'ip-scan'">
+            <strong>IP Range:</strong> {{selectedTaskDetails.start_ip}} - {{selectedTaskDetails.end_ip}}<br>
+            <strong>Username:</strong> {{selectedTaskDetails.username}}
+          </div>
+          <div *ngIf="selectedTaskDetails.task_type === 'bulk-add'">
+            <strong>Task ID:</strong> {{selectedTaskDetails.task_id}}<br>
+            <strong>Total Devices:</strong> {{selectedTaskDetails.device_count}}
+          </div>
+        </c-col>
+      </c-row>
+    </div>
+    <hr>
+    <div class="d-flex justify-content-between align-items-center mb-3">
+      <h6 class="mb-0">Detailed Results:</h6>
+      <div class="col-md-4">
+        <input type="text" class="form-control form-control-sm" placeholder="Search IP or error..." 
+               [(ngModel)]="detailsSearchTerm" (input)="onDetailsSearch()">
+      </div>
+    </div>
+    <table class="table table-striped table-hover table-responsive">
+      <thead>
+        <tr>
+          <th>IP Address</th>
+          <th>Status</th>
+          <th *ngIf="selectedTaskDetails.task_type === 'bulk-add'">Error Details</th>
+          <th *ngIf="selectedTaskDetails.task_type === 'ip-scan'">Error Details</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr *ngFor="let result of detailsPaginatedResults">
+          <td>{{result.ip}}</td>
+          <td>
+            <c-badge [color]="result.added ? 'success' : 'danger'">
+              {{result.added ? 'Success' : 'Failed'}}
+            </c-badge>
+          </td>
+          <td *ngIf="selectedTaskDetails.task_type === 'bulk-add'">
+            {{result.failures || 'N/A'}}
+          </td>
+          <td *ngIf="selectedTaskDetails.task_type === 'ip-scan'">
+            {{result.faileres || 'N/A'}}
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <nav *ngIf="getTotalDetailsPages() > 1" class="mt-3">
+      <ul class="pagination pagination-sm justify-content-center">
+        <li class="page-item" [class.disabled]="detailsCurrentPage === 1">
+          <button class="page-link" (click)="onDetailsPageChange(detailsCurrentPage - 1)" [disabled]="detailsCurrentPage === 1">
+            Previous
+          </button>
+        </li>
+        <li class="page-item" *ngFor="let page of [].constructor(getTotalDetailsPages()); let i = index" 
+            [class.active]="detailsCurrentPage === i + 1">
+          <button class="page-link" (click)="onDetailsPageChange(i + 1)">
+            {{i + 1}}
+          </button>
+        </li>
+        <li class="page-item" [class.disabled]="detailsCurrentPage === getTotalDetailsPages()">
+          <button class="page-link" (click)="onDetailsPageChange(detailsCurrentPage + 1)" 
+                  [disabled]="detailsCurrentPage === getTotalDetailsPages()">
+            Next
+          </button>
+        </li>
+      </ul>
+    </nav>
+    <div class="mt-3">
+      <c-badge color="success" class="me-2">Success: {{selectedTaskDetails.success_count}}</c-badge>
+      <c-badge color="danger">Failed: {{selectedTaskDetails.failed_count}}</c-badge>
+    </div>
+  </c-modal-body>
+  <c-modal-footer>
+    <button (click)="exportToCsv(selectedTaskDetails.result)" color="primary" cButton class="me-2">
+      <i class="fas fa-download"></i> Download CSV
+    </button>
+    <button (click)="closeDetailsModal()" cButton color="secondary">
+      Close
+    </button>
+  </c-modal-footer>
+</c-modal>
+
 <c-toaster position="fixed" placement="top-end"></c-toaster>
\ No newline at end of file
diff --git a/src/app/views/devices/devices.component.ts b/src/app/views/devices/devices.component.ts
index ef56bf8..832760d 100644
--- a/src/app/views/devices/devices.component.ts
+++ b/src/app/views/devices/devices.component.ts
@@ -39,7 +39,7 @@ export class DevicesComponent implements OnInit, OnDestroy {
   public tz: string;
   public ispro:boolean=false;
 
-  constructor(
+  constructor( 
     private data_provider: dataProvider,
     private route: ActivatedRoute,
     private router: Router,
@@ -72,6 +72,7 @@ export class DevicesComponent implements OnInit, OnDestroy {
   @ViewChild("grid", { static: true }) gridComponent: GuiGridComponent;
   @ViewChildren(ToasterComponent) viewChildren!: QueryList<ToasterComponent>;
   public source: Array<any> = [];
+  public originalSource: Array<any> = [];
   public columns: Array<GuiColumn> = [];
   public loading: boolean = true;
   public rows: any = [];
@@ -94,6 +95,28 @@ export class DevicesComponent implements OnInit, OnDestroy {
   public show_pass: boolean = false;
   public ExecutedDataModalVisible: boolean = false;
   public ExecutedData: any = [];
+  public filteredExecutedData: any = [];
+  public selectedTaskType: string = 'all';
+  public detailsModalVisible: boolean = false;
+  public selectedTaskDetails: any = null;
+  public detailsCurrentPage: number = 1;
+  public detailsPageSize: number = 10;
+  public detailsPaginatedResults: any[] = [];
+  public detailsSearchTerm: string = '';
+  public filteredDetailsResults: any[] = [];
+  public showWebAccessModal: boolean = false;
+  public currentDeviceInfo: any = null;
+  public addDeviceModalVisible: boolean = false;
+  public addDeviceStep: number = 1;
+  public csvFile: File | null = null;
+  public csvData: any[] = [];
+  public csvHeaders: string[] = [];
+  public csvPreview: any[] = [];
+  public columnMapping = { ip: '', username: '', password: '', port: '' };
+  public uploadStatus: string = 'Processing devices...';
+  public uploadResult = { success: 0, failed: 0, resultFile: null };
+  public currentTaskId: string = '';
+  public statusCheckTimer: any;
   
   toasterForm = {
     autohide: true,
@@ -165,10 +188,12 @@ export class DevicesComponent implements OnInit, OnDestroy {
         this.check_firmware();
         break;
       case "update":
-        this.update_firmware();
+        this.ConfirmAction = "update";
+        this.ConfirmModalVisible = true;
         break;
       case "upgrade":
-        this.upgrade_firmware();
+        this.ConfirmAction = "upgrade";
+        this.ConfirmModalVisible = true;
         break;
       case "logauth":
         this.router.navigate(["/authlog", { devid: dev.id }]);
@@ -183,7 +208,8 @@ export class DevicesComponent implements OnInit, OnDestroy {
         this.router.navigate(["/backups", { devid: dev.id }]);
         break;
       case "reboot":
-        this.reboot_devices();
+        this.ConfirmAction = "reboot";
+        this.ConfirmModalVisible = true;
         break;
       case "delete":
         this.ConfirmAction = "delete";
@@ -374,6 +400,7 @@ export class DevicesComponent implements OnInit, OnDestroy {
   }
   check_firmware() {
     var _self = this;
+    this.ConfirmModalVisible = false;
     this.data_provider
       .check_firmware(this.Selectedrows.toString())
       .then((res) => {
@@ -396,6 +423,7 @@ export class DevicesComponent implements OnInit, OnDestroy {
 
   update_firmware() {
     var _self = this;
+    this.ConfirmModalVisible = false;
     this.data_provider
       .update_firmware(this.Selectedrows.toString())
       .then((res) => {
@@ -417,6 +445,7 @@ export class DevicesComponent implements OnInit, OnDestroy {
 
   upgrade_firmware() {
     var _self = this;
+    this.ConfirmModalVisible = false;
     this.data_provider
       .upgrade_firmware(this.Selectedrows.toString())
       .then((res) => {
@@ -436,6 +465,7 @@ export class DevicesComponent implements OnInit, OnDestroy {
 
   reboot_devices() {
     var _self = this;
+    this.ConfirmModalVisible = false;
     this.data_provider
       .reboot_devices(this.Selectedrows.toString())
       .then((res) => {
@@ -492,11 +522,12 @@ export class DevicesComponent implements OnInit, OnDestroy {
         );
       }
       else{
-      _self.source = res.map((x: any) => {
+      _self.originalSource = res.map((x: any) => {
         if (x.upgrade_availble) _self.upgrades.push(x);
         if (x.update_availble) _self.updates.push(x);
         return x;
       });
+      _self.source = [..._self.originalSource];
       _self.device_interval();
       _self.loading = false;
     }
@@ -637,26 +668,273 @@ export class DevicesComponent implements OnInit, OnDestroy {
           _self.tz,
           "yyyy-MM-dd HH:mm:ss XXX"
         );
-        d.start_ip=d.info.start_ip;
-        d.end_ip=d.info.end_ip;
+        d.start_ip=d.info.start_ip || 'N/A';
+        d.end_ip=d.info.end_ip || 'N/A';
+        d.task_id=d.info.task_id || 'N/A';
+        d.device_count=d.info.device_count || 0;
+        d.username=d.info.username || 'N/A';
         d.result=JSON.parse(d.result);
+        d.success_count = d.result.filter((r: any) => r.added === true).length;
+        d.failed_count = d.result.filter((r: any) => r.added === false).length;
         index += 1;
         return d;
         });
+      _self.filteredExecutedData = [..._self.ExecutedData];
       }
     });
     }
 
+  filterByTaskType() {
+    if (this.selectedTaskType === 'all') {
+      this.filteredExecutedData = [...this.ExecutedData];
+    } else {
+      this.filteredExecutedData = this.ExecutedData.filter((d: any) => d.task_type === this.selectedTaskType);
+    }
+  }
 
+  showTaskDetails(task: any) {
+    this.selectedTaskDetails = task;
+    this.detailsCurrentPage = 1;
+    this.updateDetailsPagination();
+    this.detailsModalVisible = true;
+  }
 
+  updateDetailsPagination() {
+    if (!this.selectedTaskDetails?.result) return;
+    
+    // Filter results based on search term
+    this.filteredDetailsResults = this.selectedTaskDetails.result.filter((result: any) => 
+      result.ip.toLowerCase().includes(this.detailsSearchTerm.toLowerCase()) ||
+      (result.failures && result.failures.toLowerCase().includes(this.detailsSearchTerm.toLowerCase())) ||
+      (result.faileres && result.faileres.toLowerCase().includes(this.detailsSearchTerm.toLowerCase()))
+    );
+    
+    const startIndex = (this.detailsCurrentPage - 1) * this.detailsPageSize;
+    const endIndex = startIndex + this.detailsPageSize;
+    this.detailsPaginatedResults = this.filteredDetailsResults.slice(startIndex, endIndex);
+  }
 
+  onDetailsPageChange(page: number) {
+    this.detailsCurrentPage = page;
+    this.updateDetailsPagination();
+  }
 
+  getTotalDetailsPages(): number {
+    if (!this.filteredDetailsResults) return 0;
+    return Math.ceil(this.filteredDetailsResults.length / this.detailsPageSize);
+  }
 
+  onDetailsSearch() {
+    this.detailsCurrentPage = 1;
+    this.updateDetailsPagination();
+  }
 
+  closeDetailsModal() {
+    this.detailsModalVisible = false;
+    this.selectedTaskDetails = null;
+    this.detailsPaginatedResults = [];
+    this.filteredDetailsResults = [];
+    this.detailsCurrentPage = 1;
+    this.detailsSearchTerm = '';
+  }
 
+  filterUpdatable() {
+    this.source = this.originalSource.filter(device => device.update_availble);
+  }
 
+  filterUpgradable() {
+    this.source = this.originalSource.filter(device => device.upgrade_availble);
+  }
+
+  clearFilter() {
+    this.source = [...this.originalSource];
+  }
+
+  webAccess(device: any) {
+    this.currentDeviceInfo = device;
+    if (this.ispro) {
+      this.showWebAccessModal = true;
+    } else {
+      this.openDirectAccess();
+    }
+  }
+
+  openProxyAccess() {
+    if (this.currentDeviceInfo?.id) {
+      window.open(`/api/proxy/init?devid=${this.currentDeviceInfo.id}`, '_blank');
+    } else {
+      const ip = this.currentDeviceInfo?.ip;
+      if (ip) {
+        window.open(`/api/proxy/init?dev_ip=${ip}`, '_blank');
+      }
+    }
+    this.showWebAccessModal = false;
+  }
+
+  openDirectAccess() {
+    const ip = this.currentDeviceInfo?.ip;
+    if (ip) {
+      window.open(`http://${ip}`, '_blank');
+    }
+    this.showWebAccessModal = false;
+  }
+
+  closeWebAccessModal() {
+    this.showWebAccessModal = false;
+  }
+
+  openAddDeviceModal() {
+    this.addDeviceModalVisible = true;
+    this.resetAddDeviceForm();
+  }
+
+  closeAddDeviceModal() {
+    this.addDeviceModalVisible = false;
+    this.resetAddDeviceForm();
+  }
+
+  resetAddDeviceForm() {
+    this.addDeviceStep = 1;
+    this.csvFile = null;
+    this.csvData = [];
+    this.csvHeaders = [];
+    this.csvPreview = [];
+    this.columnMapping = { ip: '', username: '', password: '', port: '' };
+    this.uploadStatus = 'Processing devices...';
+    this.uploadResult = { success: 0, failed: 0, resultFile: null };
+    this.currentTaskId = '';
+    clearTimeout(this.statusCheckTimer);
+  }
+
+  onFileSelected(event: any) {
+    const file = event.target.files[0];
+    if (file && file.type === 'text/csv') {
+      this.csvFile = file;
+      this.parseCSV(file);
+    }
+  }
+
+  parseCSV(file: File) {
+    const reader = new FileReader();
+    reader.onload = (e: any) => {
+      const csv = e.target.result;
+      const lines = csv.split('\n').filter((line: string) => line.trim());
+      
+      if (lines.length > 0) {
+        this.csvHeaders = lines[0].split(',').map((header: string) => header.trim());
+        this.csvData = lines.slice(1).map((line: string) => 
+          line.split(',').map((cell: string) => cell.trim())
+        );
+        this.csvPreview = this.csvData.slice(0, 3);
+      }
+    };
+    reader.readAsText(file);
+  }
+
+  isValidMapping(): boolean {
+    return this.columnMapping.ip !== '' && 
+           this.columnMapping.username !== '' && 
+           this.columnMapping.password !== '' && 
+           this.columnMapping.port !== '' &&
+           this.csvData.length > 0;
+  }
+
+  uploadDevices() {
+    if (!this.isValidMapping()) return;
+    
+    this.addDeviceStep = 2;
+    
+    const devices = this.csvData.map(row => ({
+      ip: row[parseInt(this.columnMapping.ip)],
+      username: row[parseInt(this.columnMapping.username)],
+      password: row[parseInt(this.columnMapping.password)],
+      port: row[parseInt(this.columnMapping.port)]
+    }));
+
+    this.data_provider.bulk_add_devices(devices).then((res) => {
+      if ('error' in res) {
+        this.addDeviceStep = 3;
+        this.show_toast('Error', 'Failed to start device upload', 'danger');
+        this.uploadResult = { success: 0, failed: devices.length, resultFile: null };
+      } else if ('taskId' in res) {
+        this.currentTaskId = res.taskId;
+        this.uploadStatus = 'Processing devices...';
+        this.checkUploadStatus();
+      } else {
+        this.addDeviceStep = 3;
+        this.show_toast('Error', 'Invalid response from server', 'danger');
+        this.uploadResult = { success: 0, failed: devices.length, resultFile: null };
+      }
+    }).catch(() => {
+      this.addDeviceStep = 3;
+      this.uploadResult = { success: 0, failed: devices.length, resultFile: null };
+      this.show_toast('Error', 'Failed to upload devices', 'danger');
+    });
+  }
+
+  checkUploadStatus() {
+    clearTimeout(this.statusCheckTimer);
+    
+    this.data_provider.bulk_add_status(this.currentTaskId).then((res) => {
+      if ('error' in res) {
+        this.addDeviceStep = 3;
+        this.show_toast('Error', 'Failed to check upload status', 'danger');
+        this.uploadResult = { success: 0, failed: 0, resultFile: null };
+        return;
+      }
+      
+      if (res.status === 'completed') {
+        this.addDeviceStep = 3;
+        this.uploadResult = {
+          success: res.success || 0,
+          failed: res.failed || 0,
+          resultFile: res.resultFile || null
+        };
+        this.show_toast('Success', `${res.success} devices added successfully`, 'success');
+        this.initGridTable();
+      } else if (res.status === 'failed') {
+        this.addDeviceStep = 3;
+        this.show_toast('Error', res.message || 'Upload failed', 'danger');
+        this.uploadResult = { success: 0, failed: 0, resultFile: null };
+      } else {
+        // Still processing
+        this.uploadStatus = res.message || 'Processing devices...';
+        this.statusCheckTimer = setTimeout(() => {
+          this.checkUploadStatus();
+        }, 3000);
+      }
+    }).catch(() => {
+      this.addDeviceStep = 3;
+      this.show_toast('Error', 'Failed to check upload status', 'danger');
+      this.uploadResult = { success: 0, failed: 0, resultFile: null };
+    });
+  }
+
+  downloadResults() {
+    if (this.uploadResult.resultFile) {
+      const link = document.createElement('a');
+      link.href = this.uploadResult.resultFile;
+      link.download = 'device_upload_results.csv';
+      link.click();
+    }
+  }
+
+  getTaskTypeLabel(taskType: string): string {
+    switch(taskType) {
+      case 'ip-scan': return 'IP Scan';
+      case 'bulk-add': return 'Bulk Add';
+      default: return taskType;
+    }
+  }
+
+  getStatusColor(success: number, failed: number): string {
+    if (failed === 0) return 'success';
+    if (success === 0) return 'danger';
+    return 'warning';
+  }
 
   ngOnDestroy(): void {
     clearTimeout(this.scan_timer);
+    clearTimeout(this.statusCheckTimer);
   }
 }
diff --git a/src/app/views/devices/devices.module.ts b/src/app/views/devices/devices.module.ts
index f16b801..53cd568 100644
--- a/src/app/views/devices/devices.module.ts
+++ b/src/app/views/devices/devices.module.ts
@@ -17,6 +17,7 @@ import {
   ModalModule,
   ListGroupModule,
   TooltipModule,
+  TableModule,
 } from "@coreui/angular";
 import { MatMenuModule } from "@angular/material/menu";
 import { DevicesRoutingModule } from "./devices-routing.module";
@@ -44,6 +45,7 @@ import { GuiGridModule } from "@generic-ui/ngx-grid";
     ListGroupModule,
     MatMenuModule,
     TooltipModule,
+    TableModule,
   ],
   declarations: [DevicesComponent],
 })

From 996c189076d58b892e42e7027f222f6987f25737 Mon Sep 17 00:00:00 2001
From: sepehr <sepehr.ha@gmail.com>
Date: Thu, 16 Oct 2025 17:33:19 +0300
Subject: [PATCH 06/15] feat: redesign device group management interface

- Complete UI/UX redesign of device groups table
- Enhanced member addition interface
- Add user management directly from device groups
- Add firmware group actions (update and upgrade)
- Improved bulk operations for device groups
---
 .../devices_group/devgroup.component.html     | 460 ++++++++++++++----
 .../devices_group/devgroup.component.scss     | 108 ++++
 .../views/devices_group/devgroup.component.ts | 252 ++++++++++
 .../views/devices_group/devgroup.module.ts    |   8 +
 4 files changed, 742 insertions(+), 86 deletions(-)
 create mode 100644 src/app/views/devices_group/devgroup.component.scss

diff --git a/src/app/views/devices_group/devgroup.component.html b/src/app/views/devices_group/devgroup.component.html
index fb48f5f..57f80a0 100644
--- a/src/app/views/devices_group/devgroup.component.html
+++ b/src/app/views/devices_group/devgroup.component.html
@@ -25,29 +25,67 @@
               <ng-container *ngIf="item.id==1 ; then Default;else NotDefault">
               </ng-container>
               <ng-template #Default>
-                <c-badge color="info">All Devices</c-badge>
+                <c-badge color="info"><i class="fa-solid fa-network-wired me-1"></i>All Devices</c-badge>
               </ng-template>
               <ng-template #NotDefault>
-                <c-badge color="info" *ngIf="value[0]==null && item.id!=1">0 Members</c-badge>
-                <c-badge color="info" *ngIf="value[0]!=null">{{value.length}} Members</c-badge>
+                <c-badge color="info" *ngIf="value[0]==null && item.id!=1"
+                  [cTooltip]="'No devices assigned'" style="cursor: help">
+                  <i class="fa-solid fa-server me-1"></i>0
+                </c-badge>
+                <c-badge color="info" *ngIf="value[0]!=null"
+                  [cTooltip]="getDevicesTooltip(item)" 
+                  [cTooltipPlacement]="'top'" style="cursor: help">
+                  <i class="fa-solid fa-server me-1"></i>{{value.length}}
+                </c-badge>
               </ng-template>
             </ng-template>
           </gui-grid-column>
           <gui-grid-column header="Create Time" field="created">
             <ng-template let-value="item.created" let-item="item" let-index="index">
-
-              {{value}}
+              {{formatCreateTime(value)}}
             </ng-template>
           </gui-grid-column>
 
-          <gui-grid-column header="Actions" field="action">
-            <ng-template let-value="item.id" let-item="item" let-index="index">
-              <button [disabled]="value==1" cButton color="warning" size="sm" (click)="editAddGroup(item,'showedit');"
-                class="mx-1"><i class="fa-regular fa-pen-to-square"></i></button>
-              <button [disabled]="value==1" cButton color="info" size="sm" (click)="show_members(item.id);"
-                class="mx-1"><i class="fa-regular fa-eye"></i></button>
-              <button [disabled]="value==1" cButton color="danger" size="sm" (click)="show_delete_group(item);"
-                class="mx-1"><i class="fa-regular fa-trash-can"></i></button>
+          <gui-grid-column header="Users" field="assigned_users" width="80" align="CENTER">
+            <ng-template let-value="item.assigned_users" let-item="item" let-index="index">
+              <c-badge color="info" 
+                [cTooltip]="getUsersTooltip(value)" 
+                [cTooltipPlacement]="'top'"
+                style="cursor: help">
+                <i class="fa-solid fa-users me-1"></i>{{value.length}}
+              </c-badge>
+            </ng-template>
+          </gui-grid-column>
+
+          <gui-grid-column align="center" [cellEditing]="false" [sorting]="false" header="Action">
+            <ng-template let-value="value" let-item="item">
+              <button size="sm" shape="rounded-0" variant="outline" cButton color="primary" (click)="show_members(item.id)"
+                style="border: none;padding: 4px 7px;"><i class="fa-regular fa-eye"></i><small> View devices</small>
+              </button>
+              <button color="primary" shape="rounded-0" variant="ghost" style="padding: 4px 7px;"
+                [matMenuTriggerFor]="menu" cButton>
+                <i class="fa-solid fa-bars"></i>
+              </button>
+              <mat-menu #menu="matMenu">
+                <div cListGroup>
+                  <li cListGroupItem [active]="false" color="dark">Actions Menu</li>
+                  <button size="sm" (click)="editAddGroup(item,'showedit')" style="padding: 4px 7px;"
+                    [disabled]="item.id==1" cListGroupItem><i class="fa-solid fa-pencil"></i><small>
+                      Edit Group</small></button>
+                  <button size="sm" (click)="manageUsers(item)" style="padding: 4px 7px;"
+                    cListGroupItem><i class="fa-solid fa-users-gear"></i><small>
+                      Manage Users</small></button>
+                  <button size="sm" (click)="groupFirmwareAction(item, 'update')" style="padding: 4px 7px;"
+                    cListGroupItem><i class="text-success fa-solid fa-upload"></i><small>
+                      Update Firmware</small></button>
+                  <button size="sm" (click)="groupFirmwareAction(item, 'upgrade')" style="padding: 4px 7px;"
+                    cListGroupItem><i class="text-secondary fa-solid fa-microchip"></i><small>
+                      Upgrade Firmware</small></button>
+                  <button size="sm" (click)="show_delete_group(item)" style="padding: 4px 7px;"
+                    [disabled]="item.id==1" cListGroupItem><i class="text-danger fa-solid fa-trash"></i><small>
+                      Delete Group</small></button>
+                </div>
+              </mat-menu>
             </ng-template>
           </gui-grid-column>
         </gui-grid>
@@ -59,92 +97,146 @@
 
 
 
-<c-modal #EditGroupModal backdrop="static" size="lg" [(visible)]="EditGroupModalVisible" id="EditGroupModal">
-  <c-modal-header>
-    <h5 cModalTitle> Group Edit</h5>
+<c-modal #EditGroupModal backdrop="static" size="xl" [(visible)]="EditGroupModalVisible" id="EditGroupModal">
+  <c-modal-header class="bg-light">
+    <h5 cModalTitle><i class="fa-solid fa-edit me-2"></i>Edit Device Group</h5>
     <button [cModalToggle]="EditGroupModal.id" cButtonClose></button>
   </c-modal-header>
-  <c-modal-body>
-    <c-input-group class="mb-3">
-      <div [cFormFloating]="true" class="mb-3">
-        <input cFormControl id="floatingInput" placeholder="Group Name" [(ngModel)]="currentGroup['name']" />
-        <label cLabel for="floatingInput">Group Name</label>
+  <c-modal-body class="p-4">
+    <!-- Group Basic Info -->
+    <div class="bg-light p-3 rounded mb-3 d-flex align-items-center justify-content-between">
+      <div class="d-flex align-items-center flex-grow-1 me-3">
+        <label class="form-label me-2 mb-0 fw-semibold">Group Name:</label>
+        <input cFormControl [(ngModel)]="currentGroup['name']" class="form-control-sm" style="max-width: 300px;" />
       </div>
-    </c-input-group>
-    <c-input-group class="mb-3">
-      <h5>Group Members :</h5>
-      <gui-grid [autoResizeWidth]="true" [searching]="searching" [source]="groupMembers" [columnMenu]="columnMenu"
-        [sorting]="sorting" [infoPanel]="infoPanel" [rowSelection]="rowSelection"
-        (selectedRows)="onSelectedRowsMembers($event)" [autoResizeWidth]=true [paging]="paging">
-        <gui-grid-column header="Member Name" field="name">
-          <ng-template let-value="item.name" let-item="item" let-index="index">
-            &nbsp; {{value}} </ng-template>
-        </gui-grid-column>
-        <gui-grid-column header="perm Name" field="ip">
-          <ng-template let-value="item.ip" let-item="item" let-index="index">
-            {{value}}
-          </ng-template>
-        </gui-grid-column>
-        <gui-grid-column header="Actions" width="120" field="action">
-          <ng-template let-value="item.id" let-item="item" let-index="index">
-            <button cButton color="danger" size="sm" (click)="remove_from_group(item.id)"><i
-                class="fa-regular fa-trash-can"></i></button>
-          </ng-template>
-        </gui-grid-column>
-      </gui-grid>
-      <br />
-      <button *ngIf="MemberRows.length!= 0" style="margin: 10px 0;" cButton color="danger" size="sm"><i
-          class="fa-regular fa-trash-can"></i>Delete {{MemberRows.length}} Selected</button>
-    </c-input-group>
-    <hr />
-    <button cButton color="primary" (click)="show_new_member_form()">+ Add new Members</button>
+      <c-badge color="info" class="fs-6 p-2">
+        <i class="fa-solid fa-server me-1"></i>{{groupMembers.length}} Devices
+      </c-badge>
+    </div>
+
+    <!-- Current Members -->
+    <c-card class="mb-3">
+      <c-card-header class="d-flex justify-content-between align-items-center">
+        <h6 class="mb-0"><i class="fa-solid fa-list me-2"></i>Current Group Members</h6>
+        <div>
+          <button *ngIf="MemberRows.length > 0" cButton color="danger" size="sm" variant="outline" class="me-2">
+            <i class="fa-solid fa-trash me-1"></i>Remove {{MemberRows.length}} Selected
+          </button>
+          <button cButton color="success" size="sm" (click)="show_new_member_form()">
+            <i class="fa-solid fa-plus me-1"></i>Add Devices
+          </button>
+        </div>
+      </c-card-header>
+      <c-card-body class="p-0">
+        <div *ngIf="groupMembers.length === 0" class="text-center p-4 text-muted">
+          <i class="fa-solid fa-server fa-3x mb-3 opacity-50"></i>
+          <h6>No devices in this group</h6>
+          <p class="mb-0">Click "Add Devices" to start adding devices to this group</p>
+        </div>
+        <div *ngIf="groupMembers.length > 0">
+          <gui-grid [autoResizeWidth]="true" [searching]="searching" [source]="groupMembers" [columnMenu]="columnMenu"
+            [sorting]="sorting" [infoPanel]="infoPanel" [rowSelection]="rowSelection"
+            (selectedRows)="onSelectedRowsMembers($event)" [paging]="paging">
+            <gui-grid-column header="Device Name" field="name">
+              <ng-template let-value="item.name" let-item="item" let-index="index">
+                <div class="d-flex align-items-center">
+                  <i class="fa-solid fa-server me-2 text-primary"></i>
+                  <strong>{{value}}</strong>
+                </div>
+              </ng-template>
+            </gui-grid-column>
+            <gui-grid-column header="IP Address" field="ip">
+              <ng-template let-value="item.ip" let-item="item" let-index="index">
+                <c-badge color="secondary">{{value}}</c-badge>
+              </ng-template>
+            </gui-grid-column>
+            <gui-grid-column header="Actions" width="100" field="action" align="CENTER">
+              <ng-template let-value="item.id" let-item="item" let-index="index">
+                <button cButton color="danger" size="sm" variant="outline" (click)="remove_from_group(item.id)" title="Remove from group">
+                  <i class="fa-solid fa-times"></i>
+                </button>
+              </ng-template>
+            </gui-grid-column>
+          </gui-grid>
+        </div>
+      </c-card-body>
+    </c-card>
   </c-modal-body>
-  <c-modal-footer>
-    <button cButton color="primary" (click)="save_group()">save</button>
+  <c-modal-footer class="bg-light">
+    <button cButton color="primary" (click)="save_group()">
+      <i class="fa-solid fa-save me-1"></i>Save Changes
+    </button>
     <button [cModalToggle]="EditGroupModal.id" cButton color="secondary">
-      Close
+      <i class="fa-solid fa-times me-1"></i>Cancel
     </button>
   </c-modal-footer>
 </c-modal>
 
-<c-modal #NewMemberModal backdrop="static" size="lg" [(visible)]="NewMemberModalVisible" id="NewMemberModal">
-  <c-modal-header>
-    <h5 cModalTitle>Members not in Group</h5>
+<c-modal #NewMemberModal [backdrop]="true" size="xl" [(visible)]="NewMemberModalVisible" id="NewMemberModal" style="z-index: 1060; backdrop-filter: blur(2px);">
+  <c-modal-header class="bg-success text-white">
+    <h5 cModalTitle><i class="fa-solid fa-plus-circle me-2"></i>Add Devices to Group</h5>
     <button (click)="NewMemberModalVisible=!NewMemberModalVisible" cButtonClose></button>
   </c-modal-header>
-  <c-modal-body>
-    <c-input-group class="mb-3">
-      <h5>Members Availble to add:</h5>
-      <gui-grid [autoResizeWidth]="true" *ngIf="NewMemberModalVisible" [searching]="searching"
-        [source]="availbleMembers" [columnMenu]="columnMenu" [sorting]="sorting" [infoPanel]="infoPanel"
-        [rowSelection]="rowSelection" (selectedRows)="onSelectedRowsNewMembers($event)" [autoResizeWidth]=true
-        [paging]="paging">
-        <gui-grid-column header="Group Name" field="name">
-          <ng-template let-value="item.name" let-item="item" let-index="index">
-            &nbsp; {{value}} </ng-template>
-        </gui-grid-column>
-        <gui-grid-column header="perm Name" field="ip">
-          <ng-template let-value="item.ip" let-item="item" let-index="index">
-            {{value}}
-          </ng-template>
-        </gui-grid-column>
-        <gui-grid-column header="perm Name" field="mac">
-          <ng-template let-value="item.mac" let-item="item" let-index="index">
-            {{value}}
-          </ng-template>
-        </gui-grid-column>
-      </gui-grid>
-      <br />
-    </c-input-group>
-    <hr />
+  <c-modal-body class="p-4">
+    <!-- Selection Summary -->
+    <div class="mb-3" style="min-height: 58px;">
+      <c-alert *ngIf="NewMemberRows.length > 0" color="info" class="d-flex align-items-center mb-0">
+        <i class="fa-solid fa-info-circle me-2"></i>
+        <span><strong>{{NewMemberRows.length}}</strong> device(s) selected for addition</span>
+      </c-alert>
+    </div>
+
+    <!-- Available Devices -->
+    <c-card>
+      <c-card-header>
+        <h6 class="mb-0"><i class="fa-solid fa-server me-2"></i>Available Devices ({{availbleMembers.length}} total)</h6>
+      </c-card-header>
+      <c-card-body class="p-0">
+        <div *ngIf="availbleMembers.length === 0" class="text-center p-4 text-muted">
+          <i class="fa-solid fa-check-circle fa-3x mb-3 text-success opacity-50"></i>
+          <h6>All devices are already in groups</h6>
+          <p class="mb-0">No available devices to add to this group</p>
+        </div>
+        <div *ngIf="availbleMembers.length > 0">
+          <gui-grid [autoResizeWidth]="true" *ngIf="NewMemberModalVisible" [searching]="searching"
+            [source]="availbleMembers" [columnMenu]="columnMenu" [sorting]="sorting" [infoPanel]="infoPanel"
+            [rowSelection]="rowSelection" (selectedRows)="onSelectedRowsNewMembers($event)" [paging]="paging">
+            <gui-grid-column header="Device Name" field="name">
+              <ng-template let-value="item.name" let-item="item" let-index="index">
+                <div class="d-flex align-items-center">
+                  <i class="fa-solid fa-server me-2 text-primary"></i>
+                  <strong>{{value}}</strong>
+                </div>
+              </ng-template>
+            </gui-grid-column>
+            <gui-grid-column header="IP Address" field="ip">
+              <ng-template let-value="item.ip" let-item="item" let-index="index">
+                <c-badge color="secondary">{{value}}</c-badge>
+              </ng-template>
+            </gui-grid-column>
+            <gui-grid-column header="MAC Address" field="mac">
+              <ng-template let-value="item.mac" let-item="item" let-index="index">
+                <small class="text-muted">{{value}}</small>
+              </ng-template>
+            </gui-grid-column>
+          </gui-grid>
+        </div>
+      </c-card-body>
+    </c-card>
   </c-modal-body>
 
-  <c-modal-footer>
-    <button *ngIf="NewMemberRows.length!= 0" (click)="add_new_members()" cButton color="primary">Add {{
-      NewMemberRows.length }}</button>
-    <button (click)="NewMemberModalVisible=!NewMemberModalVisible" cButton color="secondary">
-      Close
-    </button>
+  <c-modal-footer class="bg-light d-flex justify-content-between">
+    <div>
+      <small class="text-muted">Select devices from the list above to add them to the group</small>
+    </div>
+    <div>
+      <button *ngIf="NewMemberRows.length > 0" (click)="add_new_members()" cButton color="success">
+        <i class="fa-solid fa-plus me-1"></i>Add {{NewMemberRows.length}} Device(s)
+      </button>
+      <button (click)="NewMemberModalVisible=!NewMemberModalVisible" cButton color="secondary" class="ms-2">
+        <i class="fa-solid fa-times me-1"></i>Cancel
+      </button>
+    </div>
   </c-modal-footer>
 </c-modal>
 
@@ -175,4 +267,200 @@
       Close
     </button>
   </c-modal-footer>
+</c-modal>
+<c-modal #UserManagementModal backdrop="static" size="xl" [(visible)]="UserManagementModalVisible" id="UserManagementModal">
+  <c-modal-header>
+    <h5 cModalTitle><i class="fa-solid fa-users-gear me-2"></i>User Permissions - {{selectedGroup?.name}}</h5>
+    <button [cModalToggle]="UserManagementModal.id" cButtonClose></button>
+  </c-modal-header>
+  <c-modal-body>
+    <c-card class="mb-3">
+      <c-card-header class="bg-light">
+        <h6 class="mb-0"><i class="fa-solid fa-user-plus me-2"></i>Add User Permission</h6>
+      </c-card-header>
+      <c-card-body>
+        <c-row class="g-3">
+          <c-col md="4">
+            <div class="search-select-wrapper">
+              <label class="search-label">User</label>
+              <input cFormControl 
+                [(ngModel)]="userSearch" 
+                (input)="filterUsers($event)"
+                (focus)="showUserDropdown = true"
+                (blur)="hideUserDropdown()"
+                placeholder="Search and select user..."
+                class="search-input compact-select"
+                autocomplete="off" />
+              <div *ngIf="showUserDropdown && filteredUsers.length > 0" class="search-dropdown">
+                <div *ngFor="let user of filteredUsers" 
+                  class="search-option" 
+                  (mousedown)="selectUser(user)">
+                  {{user.username}} ({{user.first_name}} {{user.last_name}})
+                </div>
+              </div>
+              <div *ngIf="showUserDropdown && filteredUsers.length === 0 && userSearch" class="search-no-results">
+                No users found
+              </div>
+            </div>
+          </c-col>
+          <c-col md="4">
+            <div class="search-select-wrapper">
+              <label class="search-label">Permission</label>
+              <input cFormControl 
+                [(ngModel)]="permissionSearch" 
+                (input)="filterPermissions($event)"
+                (focus)="showPermissionDropdown = true"
+                (blur)="hidePermissionDropdown()"
+                placeholder="Search and select permission..."
+                class="search-input compact-select"
+                autocomplete="off" />
+              <div *ngIf="showPermissionDropdown && filteredPermissions.length > 0" class="search-dropdown">
+                <div *ngFor="let perm of filteredPermissions" 
+                  class="search-option" 
+                  (mousedown)="selectPermission(perm)">
+                  {{perm.name}}
+                </div>
+              </div>
+              <div *ngIf="showPermissionDropdown && filteredPermissions.length === 0 && permissionSearch" class="search-no-results">
+                No permissions found
+              </div>
+            </div>
+          </c-col>
+          <c-col md="4" class="d-flex align-items-end">
+            <button cButton color="success" (click)="addUserPermission()" [disabled]="!selectedUser || !selectedPermission">
+              <i class="fa-solid fa-plus me-1"></i>Add Permission
+            </button>
+          </c-col>
+        </c-row>
+      </c-card-body>
+    </c-card>
+    <c-card>
+      <c-card-header class="bg-light">
+        <h6 class="mb-0"><i class="fa-solid fa-list-check me-2"></i>Current Permissions ({{selectedGroup?.assigned_users?.length || 0}} users)</h6>
+      </c-card-header>
+      <c-card-body class="p-0">
+        <div *ngIf="selectedGroup?.assigned_users?.length === 0" class="text-center p-4 text-muted">
+          <i class="fa-solid fa-users-slash fa-2x mb-2"></i>
+          <p class="mb-0">No users have permissions for this group</p>
+        </div>
+        <div *ngIf="selectedGroup?.assigned_users?.length > 0" class="table-responsive">
+          <table class="table table-hover mb-0">
+            <thead class="table-light">
+              <tr>
+                <th width="40">#</th>
+                <th>User</th>
+                <th>Name</th>
+                <th>Permission</th>
+                <th width="200">Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr *ngFor="let user of selectedGroup.assigned_users; let i = index">
+                <td class="text-muted">{{i + 1}}</td>
+                <td>
+                  <div class="d-flex align-items-center">
+                    <i class="fa-solid fa-user me-2 text-primary"></i>
+                    <strong>{{user.username}}</strong>
+                  </div>
+                </td>
+                <td>{{user.first_name}} {{user.last_name}}</td>
+                <td>
+                  <c-badge [color]="getPermissionColor(user.perm_name)">{{user.perm_name}}</c-badge>
+                </td>
+                <td>
+                  <div class="btn-group" role="group">
+                    <button cButton color="warning" size="sm" variant="outline" 
+                      (click)="editUserPermission(user)" title="Change Permission"
+                      [disabled]="selectedGroup.id === 1 && user.username === 'mikrowizard'">
+                      <i class="fa-solid fa-edit"></i>
+                    </button>
+                    <button cButton color="danger" size="sm" variant="outline" 
+                      (click)="removeUserPermission(user)" title="Remove Permission"
+                      [disabled]="selectedGroup.id === 1 && user.username === 'mikrowizard'">
+                      <i class="fa-solid fa-trash"></i>
+                    </button>
+                  </div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </c-card-body>
+    </c-card>
+  </c-modal-body>
+  <c-modal-footer>
+    <button [cModalToggle]="UserManagementModal.id" cButton color="secondary">
+      <i class="fa-solid fa-times me-1"></i>Close
+    </button>
+  </c-modal-footer>
+</c-modal>
+
+<c-modal #EditPermissionModal backdrop="static" [(visible)]="EditPermissionModalVisible" id="EditPermissionModal">
+  <c-modal-header>
+    <h5 cModalTitle>Change Permission for {{editingUser?.username}}</h5>
+    <button [cModalToggle]="EditPermissionModal.id" cButtonClose></button>
+  </c-modal-header>
+  <c-modal-body>
+    <div class="mb-3">
+      <label class="form-label">Current Permission: <c-badge [color]="getPermissionColor(editingUser?.perm_name)">{{editingUser?.perm_name}}</c-badge></label>
+    </div>
+    <div class="mb-3">
+      <label class="form-label">New Permission</label>
+      <select cSelect [(ngModel)]="newPermissionId" class="form-select">
+        <option value="">Select Permission...</option>
+        <option *ngFor="let perm of availablePermissions" [value]="perm.id">{{perm.name}}</option>
+      </select>
+    </div>
+  </c-modal-body>
+  <c-modal-footer>
+    <button cButton color="primary" (click)="updateUserPermission()" [disabled]="!newPermissionId">
+      <i class="fa-solid fa-save me-1"></i>Update
+    </button>
+    <button [cModalToggle]="EditPermissionModal.id" cButton color="secondary">
+      Cancel
+    </button>
+  </c-modal-footer>
+</c-modal>
+
+<c-modal #RemovePermissionModal backdrop="static" [(visible)]="RemovePermissionModalVisible" id="RemovePermissionModal">
+  <c-modal-header>
+    <h5 cModalTitle>Remove Permission</h5>
+    <button [cModalToggle]="RemovePermissionModal.id" cButtonClose></button>
+  </c-modal-header>
+  <c-modal-body>
+    <div class="text-center">
+      <i class="fa-solid fa-exclamation-triangle fa-3x text-warning mb-3"></i>
+      <p>Are you sure you want to remove <strong>{{removingUser?.username}}</strong>'s permission from group <strong>{{selectedGroup?.name}}</strong>?</p>
+      <p class="text-muted small">This action cannot be undone.</p>
+    </div>
+  </c-modal-body>
+  <c-modal-footer>
+    <button cButton color="danger" (click)="confirmRemovePermission()">
+      <i class="fa-solid fa-trash me-1"></i>Remove
+    </button>
+    <button [cModalToggle]="RemovePermissionModal.id" cButton color="secondary">
+      Cancel
+    </button>
+  </c-modal-footer>
+</c-modal>
+<c-modal #FirmwareConfirmModal backdrop="static" [(visible)]="FirmwareConfirmModalVisible" id="FirmwareConfirmModal">
+  <c-modal-header>
+    <h5 cModalTitle>Confirm Firmware {{firmwareAction | titlecase}}</h5>
+    <button [cModalToggle]="FirmwareConfirmModal.id" cButtonClose></button>
+  </c-modal-header>
+  <c-modal-body>
+    <div class="text-center">
+      <i class="fa-solid fa-exclamation-triangle fa-3x text-warning mb-3"></i>
+      <p>Are you sure you want to <strong>{{firmwareAction}}</strong> firmware for all devices in group <strong>{{selectedGroupForFirmware?.name}}</strong>?</p>
+      <p class="text-muted small">This action will affect all devices in this group and may take some time to complete.</p>
+    </div>
+  </c-modal-body>
+  <c-modal-footer>
+    <button cButton color="primary" (click)="confirmGroupFirmwareAction()">
+      <i class="fa-solid fa-{{firmwareAction === 'update' ? 'upload' : 'microchip'}} me-1"></i>{{firmwareAction | titlecase}} Firmware
+    </button>
+    <button [cModalToggle]="FirmwareConfirmModal.id" cButton color="secondary">
+      Cancel
+    </button>
+  </c-modal-footer>
 </c-modal>
\ No newline at end of file
diff --git a/src/app/views/devices_group/devgroup.component.scss b/src/app/views/devices_group/devgroup.component.scss
new file mode 100644
index 0000000..c845baa
--- /dev/null
+++ b/src/app/views/devices_group/devgroup.component.scss
@@ -0,0 +1,108 @@
+.users-summary {
+  min-height: 60px;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.user-badges {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+}
+
+.user-badges c-badge {
+  font-size: 0.7rem;
+  max-width: 80px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+@media (max-width: 768px) {
+  .users-summary {
+    min-height: auto;
+  }
+  
+  .user-badges c-badge {
+    max-width: 60px;
+    font-size: 0.65rem;
+  }
+}
+
+/* Search Select Components */
+.search-select-wrapper {
+  position: relative;
+}
+
+.search-label {
+  display: block;
+  font-size: 0.8rem;
+  color: #6c757d;
+  margin-bottom: 0.25rem;
+  font-weight: 500;
+}
+
+.search-input {
+  width: 100%;
+}
+
+.search-dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  background: white;
+  border: 1px solid #ced4da;
+  border-top: none;
+  border-radius: 0 0 0.375rem 0.375rem;
+  max-height: 200px;
+  overflow-y: auto;
+  z-index: 1000;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+.search-option {
+  padding: 0.5rem 0.75rem;
+  cursor: pointer;
+  border-bottom: 1px solid #f1f3f4;
+  font-size: 0.85rem;
+  transition: background-color 0.2s ease;
+}
+
+.search-option:hover {
+  background-color: #f8f9fa;
+}
+
+.search-option:last-child {
+  border-bottom: none;
+}
+
+.search-no-results {
+  padding: 0.75rem;
+  text-align: center;
+  color: #6c757d;
+  font-size: 0.8rem;
+  font-style: italic;
+  background: white;
+  border: 1px solid #ced4da;
+  border-top: none;
+  border-radius: 0 0 0.375rem 0.375rem;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+}
+
+.compact-select {
+  font-size: 0.85rem;
+  height: calc(1.8em + 0.75rem + 2px);
+  padding: 0.375rem 0.75rem;
+  border-radius: 0.375rem;
+}
+
+.compact-select:focus {
+  border-color: #0d6efd;
+  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
+}
\ No newline at end of file
diff --git a/src/app/views/devices_group/devgroup.component.ts b/src/app/views/devices_group/devgroup.component.ts
index 5ee1248..5614bfa 100644
--- a/src/app/views/devices_group/devgroup.component.ts
+++ b/src/app/views/devices_group/devgroup.component.ts
@@ -2,6 +2,7 @@ import { Component, OnInit } from "@angular/core";
 import { dataProvider } from "../../providers/mikrowizard/data";
 import { Router } from "@angular/router";
 import { loginChecker } from "../../providers/login_checker";
+import { formatInTimeZone } from "date-fns-tz";
 import {
   GuiSearching,
   GuiSelectedRow,
@@ -31,10 +32,12 @@ interface IUser {
 
 @Component({
   templateUrl: "devgroup.component.html",
+  styleUrls: ["devgroup.component.scss"]
 })
 export class DevicesGroupComponent implements OnInit {
   public uid: number;
   public uname: string;
+  public tz: string;
 
   constructor(
     private data_provider: dataProvider,
@@ -50,6 +53,7 @@ export class DevicesGroupComponent implements OnInit {
     this.data_provider.getSessionInfo().then((res) => {
       _self.uid = res.uid;
       _self.uname = res.name;
+      _self.tz = res.tz;
       const userId = _self.uid;
 
       if (res.role != "admin") {
@@ -83,6 +87,30 @@ export class DevicesGroupComponent implements OnInit {
     id: 0,
     name: "",
   };
+  public selectedGroup: any = null;
+  public UserManagementModalVisible: boolean = false;
+  public EditPermissionModalVisible: boolean = false;
+  public RemovePermissionModalVisible: boolean = false;
+  public availableUsers: any[] = [];
+  public availablePermissions: any[] = [];
+  public selectedUserId: string = "";
+  public selectedPermId: string = "";
+  public selectedUser: any = null;
+  public selectedPermission: any = null;
+  public userSearch: string = '';
+  public permissionSearch: string = '';
+  public filteredUsers: any[] = [];
+  public filteredPermissions: any[] = [];
+  public showUserDropdown: boolean = false;
+  public showPermissionDropdown: boolean = false;
+  public editingUser: any = null;
+  public removingUser: any = null;
+  public newPermissionId: string = "";
+  private deviceCache: { [key: number]: any[] } = {};
+  private loadingDevices: { [key: number]: boolean } = {};
+  public FirmwareConfirmModalVisible: boolean = false;
+  public firmwareAction: string = "";
+  public selectedGroupForFirmware: any = null;
   public DefaultCurrentGroup: any = {
     array_agg: [],
     created: "",
@@ -182,6 +210,9 @@ export class DevicesGroupComponent implements OnInit {
   save_group() {
     var _self = this;
     this.data_provider.update_save_group(this.currentGroup).then((res) => {
+      // Clear device cache for this group
+      delete this.deviceCache[this.currentGroup.id];
+      delete this.loadingDevices[this.currentGroup.id];
       _self.initGridTable();
       _self.EditGroupModalVisible = false;
     });
@@ -237,4 +268,225 @@ export class DevicesGroupComponent implements OnInit {
       this.loading = false;
     });
   }
+
+  manageUsers(group: any): void {
+    this.selectedGroup = { ...group };
+    this.loadAvailableUsers();
+    this.loadAvailablePermissions();
+    this.UserManagementModalVisible = true;
+  }
+
+  loadAvailableUsers(): void {
+    this.data_provider.get_users(1, 1000, "").then((res) => {
+      this.availableUsers = res.filter((user: any) => 
+        !this.selectedGroup.assigned_users.some((assignedUser: any) => assignedUser.user_id === user.id)
+      );
+      this.filteredUsers = [...this.availableUsers];
+    });
+  }
+
+  loadAvailablePermissions(): void {
+    this.data_provider.get_perms(1, 1000, "").then((res) => {
+      this.availablePermissions = res;
+      this.filteredPermissions = [...this.availablePermissions];
+    });
+  }
+
+  filterUsers(event: any): void {
+    const query = event.target.value.toLowerCase();
+    this.filteredUsers = this.availableUsers.filter((user: any) => 
+      user.username.toLowerCase().includes(query) || 
+      (user.first_name + ' ' + user.last_name).toLowerCase().includes(query)
+    );
+  }
+
+  filterPermissions(event: any): void {
+    const query = event.target.value.toLowerCase();
+    this.filteredPermissions = this.availablePermissions.filter((perm: any) => 
+      perm.name.toLowerCase().includes(query)
+    );
+  }
+
+  selectUser(user: any): void {
+    this.selectedUser = user;
+    this.selectedUserId = user.id;
+    this.userSearch = user.username + ' (' + user.first_name + ' ' + user.last_name + ')';
+    this.showUserDropdown = false;
+  }
+
+  selectPermission(perm: any): void {
+    this.selectedPermission = perm;
+    this.selectedPermId = perm.id;
+    this.permissionSearch = perm.name;
+    this.showPermissionDropdown = false;
+  }
+
+  hideUserDropdown(): void {
+    setTimeout(() => this.showUserDropdown = false, 200);
+  }
+
+  hidePermissionDropdown(): void {
+    setTimeout(() => this.showPermissionDropdown = false, 200);
+  }
+
+  addUserPermission(): void {
+    if (!this.selectedUser || !this.selectedPermission) return;
+    
+    console.log('Adding user permission:', {
+      userId: this.selectedUser.id,
+      permissionId: this.selectedPermission.id,
+      groupId: this.selectedGroup.id,
+      selectedUser: this.selectedUser,
+      selectedPermission: this.selectedPermission
+    });
+    
+    this.data_provider.Add_user_perm(this.selectedUser.id, +this.selectedPermission.id, this.selectedGroup.id)
+      .then((res) => {
+        console.log('Add user permission response:', res);
+        this.initGridTable();
+        this.selectedUserId = "";
+        this.selectedPermId = "";
+        this.selectedUser = null;
+        this.selectedPermission = null;
+        this.userSearch = "";
+        this.permissionSearch = "";
+        // Refresh the selected group data
+        this.data_provider.get_devgroup_list().then((groups) => {
+          this.selectedGroup = groups.find((g: any) => g.id === this.selectedGroup.id);
+          this.loadAvailableUsers();
+        });
+      });
+  }
+
+  editUserPermission(user: any): void {
+    this.editingUser = { ...user };
+    this.newPermissionId = user.perm_id.toString();
+    this.EditPermissionModalVisible = true;
+  }
+
+  updateUserPermission(): void {
+    if (!this.newPermissionId) return;
+    
+    // Remove old permission and add new one
+    this.data_provider.Delete_user_perm(this.editingUser.id).then(() => {
+      this.data_provider.Add_user_perm(this.editingUser.user_id, +this.newPermissionId, this.selectedGroup.id)
+        .then(() => {
+          this.EditPermissionModalVisible = false;
+          this.initGridTable();
+          // Refresh the selected group data
+          this.data_provider.get_devgroup_list().then((groups) => {
+            this.selectedGroup = groups.find((g: any) => g.id === this.selectedGroup.id);
+          });
+        });
+    });
+  }
+
+  removeUserPermission(user: any): void {
+    this.removingUser = { ...user };
+    this.RemovePermissionModalVisible = true;
+  }
+
+  confirmRemovePermission(): void {
+    this.data_provider.Delete_user_perm(this.removingUser.id).then(() => {
+      this.RemovePermissionModalVisible = false;
+      this.initGridTable();
+      // Refresh the selected group data
+      this.data_provider.get_devgroup_list().then((groups) => {
+        this.selectedGroup = groups.find((g: any) => g.id === this.selectedGroup.id);
+        this.loadAvailableUsers();
+      });
+    });
+  }
+
+  getPermissionColor(permName: string): string {
+    const colorMap: { [key: string]: string } = {
+      'full': 'success',
+      'read': 'info',
+      'write': 'warning',
+      'admin': 'danger',
+      'test': 'secondary'
+    };
+    return colorMap[permName] || 'primary';
+  }
+
+  getUsersTooltip(users: any[]): string {
+    if (users.length === 0) return 'No users assigned';
+    
+    const maxShow = 10;
+    const userList = users.slice(0, maxShow).map((user, index) => 
+      `• ${user.username} (${user.perm_name})`
+    ).join('\n');
+    
+    return users.length > maxShow 
+      ? `${userList}\n━━━━━━━━━━━━━━━━\n+${users.length - maxShow} more users`
+      : userList;
+  }
+
+  getDevicesTooltip(group: any): string {
+    if (group.id === 1) return 'All devices in the system';
+    if (!group.array_agg || group.array_agg[0] === null) return 'No devices assigned';
+    
+    // Check if data is cached
+    if (this.deviceCache[group.id]) {
+      const devices = this.deviceCache[group.id];
+      const maxShow = 10;
+      const deviceList = devices.slice(0, maxShow).map(device => 
+        `• ${device.name} (${device.ip})`
+      ).join('\n');
+      
+      return devices.length > maxShow 
+        ? `${deviceList}\n━━━━━━━━━━━━━━━━\n+${devices.length - maxShow} more devices`
+        : deviceList;
+    }
+    
+    // Check if already loading
+    if (this.loadingDevices[group.id]) {
+      return 'Loading devices...';
+    }
+    
+    // Start loading
+    this.loadingDevices[group.id] = true;
+    this.data_provider.get_devgroup_members(group.id).then((devices) => {
+      this.deviceCache[group.id] = devices;
+      this.loadingDevices[group.id] = false;
+    }).catch(() => {
+      this.loadingDevices[group.id] = false;
+    });
+    
+    return 'Loading devices...';
+  }
+
+  formatCreateTime(dateString: string): string {
+    if (!dateString || !this.tz) return dateString;
+    return formatInTimeZone(
+      dateString.split(".")[0] + ".000Z",
+      this.tz,
+      "yyyy-MM-dd HH:mm:ss XXX"
+    );
+  }
+
+  groupFirmwareAction(group: any, action: string): void {
+    this.selectedGroupForFirmware = group;
+    this.firmwareAction = action;
+    this.FirmwareConfirmModalVisible = true;
+  }
+
+  confirmGroupFirmwareAction(): void {
+    if (!this.selectedGroupForFirmware) return;
+    
+    this.data_provider.group_firmware_action(this.selectedGroupForFirmware.id, this.firmwareAction)
+      .then((res) => {
+        if ("error" in res) {
+          console.error('Firmware action failed:', res.error);
+        } else {
+          const actionText = this.firmwareAction === 'update' ? 'Update' : 'Upgrade';
+          console.log(`${actionText} firmware initiated for group: ${this.selectedGroupForFirmware.name}`);
+        }
+        this.FirmwareConfirmModalVisible = false;
+      })
+      .catch((error) => {
+        console.error('Firmware action error:', error);
+        this.FirmwareConfirmModalVisible = false;
+      });
+  }
 }
diff --git a/src/app/views/devices_group/devgroup.module.ts b/src/app/views/devices_group/devgroup.module.ts
index 0fe8c12..1dc3e06 100644
--- a/src/app/views/devices_group/devgroup.module.ts
+++ b/src/app/views/devices_group/devgroup.module.ts
@@ -2,6 +2,7 @@ import { NgModule } from "@angular/core";
 import { CommonModule } from "@angular/common";
 
 import {
+  AlertModule,
   ButtonGroupModule,
   ButtonModule,
   CardModule,
@@ -9,15 +10,19 @@ import {
   GridModule,
   CollapseModule,
   ModalModule,
+  TooltipModule,
+  ListGroupModule,
 } from "@coreui/angular";
 import { DevicesGroupRoutingModule } from "./devgroup-routing.module";
 import { DevicesGroupComponent } from "./devgroup.component";
 import { GuiGridModule } from "@generic-ui/ngx-grid";
 import { BadgeModule } from "@coreui/angular";
 import { FormsModule } from "@angular/forms";
+import { MatMenuModule } from "@angular/material/menu";
 @NgModule({
   imports: [
     DevicesGroupRoutingModule,
+    AlertModule,
     CardModule,
     CommonModule,
     GridModule,
@@ -29,6 +34,9 @@ import { FormsModule } from "@angular/forms";
     CollapseModule,
     ModalModule,
     BadgeModule,
+    TooltipModule,
+    MatMenuModule,
+    ListGroupModule,
   ],
   declarations: [DevicesGroupComponent],
 })

From b20a3d78261f8605c0a06dde12e0dbc8d5fa8583 Mon Sep 17 00:00:00 2001
From: sepehr <sepehr.ha@gmail.com>
Date: Thu, 16 Oct 2025 17:33:27 +0300
Subject: [PATCH 07/15] feat: add network topology maps for pro users

- Add comprehensive network visualization module
- Pro feature with advanced topology mapping
- Interactive network device mapping
- Integration with navigation and routing
---
 src/app/app-routing.module.ts             |   5 +
 src/app/containers/default-layout/_nav.ts |   6 +
 src/app/views/maps/code-typescript.txt    | 377 +++++++++++++++++
 src/app/views/maps/maps-routing.module.ts |  21 +
 src/app/views/maps/maps.component.html    |  82 ++++
 src/app/views/maps/maps.component.scss    | 256 ++++++++++++
 src/app/views/maps/maps.component.ts      | 479 ++++++++++++++++++++++
 src/app/views/maps/maps.module.ts         |  60 +++
 8 files changed, 1286 insertions(+)
 create mode 100644 src/app/views/maps/code-typescript.txt
 create mode 100644 src/app/views/maps/maps-routing.module.ts
 create mode 100644 src/app/views/maps/maps.component.html
 create mode 100644 src/app/views/maps/maps.component.scss
 create mode 100644 src/app/views/maps/maps.component.ts
 create mode 100644 src/app/views/maps/maps.module.ts

diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 3c4186a..2b30133 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -49,6 +49,11 @@ const routes: Routes = [
         loadChildren: () =>
           import('./views/devices_group/devgroup.module').then((m) => m.DevicesGroupModule)
       },
+      {
+        path: 'maps',
+        loadChildren: () =>
+          import('./views/maps/maps.module').then((m) => m.MapsModule)
+      },
       {
         path: 'authlog',
         loadChildren: () =>
diff --git a/src/app/containers/default-layout/_nav.ts b/src/app/containers/default-layout/_nav.ts
index d313617..00c76ce 100644
--- a/src/app/containers/default-layout/_nav.ts
+++ b/src/app/containers/default-layout/_nav.ts
@@ -28,6 +28,12 @@ export const navItems: INavData[] = [
     // linkProps: { fragment: 'someAnchor' },
     icon: 'fa-solid fa-layer-group'
   },
+  {
+    name: 'Network Maps',
+    url: '/maps',
+    icon:'fa-solid fa-map',
+    attributes: { 'pro':true }
+  },
   // {
   //   name: 'Tools',
   //   url: '/login',
diff --git a/src/app/views/maps/code-typescript.txt b/src/app/views/maps/code-typescript.txt
new file mode 100644
index 0000000..64f7093
--- /dev/null
+++ b/src/app/views/maps/code-typescript.txt
@@ -0,0 +1,377 @@
+import { Component, OnInit, OnDestroy, ViewChild, ElementRef } from "@angular/core";
+import { dataProvider } from "../../providers/mikrowizard/data";
+import { loginChecker } from "../../providers/login_checker";
+import { Router } from "@angular/router";
+import { formatInTimeZone } from "date-fns-tz";
+import { Network } from 'vis-network/peer';
+import { DataSet } from 'vis-data';
+
+@Component({
+  templateUrl: "maps.component.html",
+  styleUrls: ["maps.component.scss"],
+})
+export class MapsComponent implements OnInit {
+  public uid: number;
+  public uname: string;
+  public ispro: boolean = false;
+  public tz: string;
+  public savedPositions: any = {};
+  public savedPositionsKey = "network-layout";
+  public selectedDevice: any = null;
+  constructor(
+    private data_provider: dataProvider,
+    private router: Router,
+    private login_checker: loginChecker
+  ) {
+    var _self = this;
+    if (!this.login_checker.isLoggedIn()) {
+      setTimeout(function () {
+        _self.router.navigate(["login"]);
+      }, 100);
+    }
+    this.data_provider.getSessionInfo().then((res) => {
+      _self.uid = res.uid;
+      _self.uname = res.name;
+      _self.ispro = res.ISPRO;
+      if (!_self.ispro)
+        setTimeout(function () {
+          _self.router.navigate(["dashboard"]);
+        }, 100);
+      _self.tz = res.tz;
+    });
+  }
+
+  @ViewChild('network', { static: true }) networkContainer: ElementRef | undefined;
+
+  mikrotikData: any[] = [];
+
+
+
+
+  ngOnInit(): void {
+    this.loadFontAwesome();
+    this.savedPositions = JSON.parse(localStorage.getItem(this.savedPositionsKey) || "{}");
+    this.loadNetworkData();
+  }
+
+  loadNetworkData(): void {
+    this.data_provider.getNetworkMap().then((res) => {
+      this.mikrotikData = res;
+      console.dir(res);
+      setTimeout(() => {
+        this.createNetworkMap();
+      }, 100);
+    });
+  }
+
+  loadFontAwesome() {
+    if (!document.querySelector('link[href*="font-awesome"]')) {
+      const link = document.createElement('link');
+      link.rel = 'stylesheet';
+      link.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css';
+      document.head.appendChild(link);
+    }
+  }
+
+createNetworkMap() {
+  const container = this.networkContainer?.nativeElement;
+  if (!container) return;
+
+  let nodes = new DataSet<any>([]);
+  let edges = new DataSet<any>([]);
+  let deviceMap: { [key: string]: string } = {}; // uniqueId to nodeId mapping
+  let allDevices: { [key: string]: any } = {};   // uniqueId to device info mapping
+  let macToDevice: { [key: string]: string } = {}; // MAC -> uniqueId mapping
+  const hasSavedPositions = Object.keys(this.savedPositions).length > 0;
+  let nodeIdCounter = 1;
+  const getUniqueId = (obj: any): string => {
+    if (obj.device_id) return `dev_${obj.device_id}`;
+    if (obj.mac) return `mac_${obj.mac}`;
+    if (obj.software_id) return `sw_${obj.software_id}`;
+    if (obj.hostname) return `host_${obj.hostname}`;
+    return `unknown_${obj.address || Math.random().toString(36).slice(2)}`;
+  };
+  // Collect all devices
+  this.mikrotikData.forEach((device) => {
+    const deviceId = device.device_id || `${device.name}_${Date.now()}`;
+
+    if (!allDevices[deviceId]) {
+      allDevices[deviceId] = {
+        name: device.name,
+        type: 'Router',
+        brand: 'MikroTik'
+      };
+    }
+
+    Object.entries(device.interfaces).forEach(([_, iface]: [string, any]) => {
+      if (iface.mac) {
+        macToDevice[iface.mac] = deviceId;
+      }
+
+      iface.neighbors.forEach((neighbor: any) => {
+        const neighborId =
+          neighbor.device_id ||
+          neighbor.software_id ||
+          `${neighbor.hostname}_${neighbor.mac}_${neighbor.address || 'unknown'}`;
+
+        if (!allDevices[neighborId]) {
+          allDevices[neighborId] = {
+            name: neighbor.hostname || neighbor.mac || 'Unknown',
+            type: neighbor.type || 'Router',
+            brand: neighbor.brand || 'MikroTik'
+          };
+        }
+
+        if (neighbor.mac) {
+          macToDevice[neighbor.mac] = neighborId;
+        }
+      });
+    });
+  });
+
+  // Create nodes
+  Object.entries(allDevices).forEach(([uniqueId, device]: [string, any]) => {
+    const nodeId = `node_${nodeIdCounter++}`;
+    deviceMap[uniqueId] = nodeId;
+
+    nodes.add({
+      id: nodeId,
+      label: device.name,
+      shape: 'image',
+      image: this.getDeviceIcon(device.type || 'Unknown', device.brand || 'Unknown'),
+      size: 15,
+      font: { size: 11, color: '#333', face: 'Arial, sans-serif' },
+      ...(hasSavedPositions && this.savedPositions[nodeId]
+        ? { x: this.savedPositions[nodeId].x, y: this.savedPositions[nodeId].y }
+        : {})
+    } as any);
+  });
+
+  // Create edges
+  this.mikrotikData.forEach((device) => {
+    Object.entries(device.interfaces).forEach(([ifaceName, iface]: [string, any]) => {
+      const sourceDeviceId = macToDevice[iface.mac];
+      iface.neighbors.forEach((neighbor: any) => {
+        const targetDeviceId = macToDevice[neighbor.mac];
+
+        if (deviceMap[sourceDeviceId] && deviceMap[targetDeviceId]) {
+          const edgeId = `${sourceDeviceId}_${targetDeviceId}`;
+          const reverseId = `${targetDeviceId}_${sourceDeviceId}`;
+
+          if (!edges.get().find(e => e.id === edgeId || e.id === reverseId)) {
+            edges.add({
+              id: edgeId,
+              from: deviceMap[sourceDeviceId],
+              to: deviceMap[targetDeviceId],
+              label: ifaceName,
+              color: { color: '#34495e', highlight: '#3498db' },
+              width: 3,
+              smooth: { type: 'continuous', roundness: 0.1 },
+              font: {
+                size: 12,
+                color: '#2c3e50',
+                face: 'Arial, sans-serif',
+                strokeWidth: 1,
+                strokeColor: '#ffffff',
+                align: 'horizontal'
+              }
+            } as any);
+          }
+        }
+      });
+    });
+  });
+
+  const data = { nodes, edges };
+  const options = { physics: { enabled: true, stabilization: { iterations: 100 }, barnesHut: { gravitationalConstant: -8000, centralGravity: 0.3, springLength: 200, springConstant: 0.04, damping: 0.09 } }, interaction: { hover: true, dragNodes: true, dragView: true, zoomView: true, hoverConnectedEdges: false, selectConnectedEdges: false, navigationButtons: false, keyboard: false }, nodes: { borderWidth: 3, shadow: true }, edges: { shadow: true, smooth: true, length: 150 }, manipulation: { enabled: false } };
+  const network = new Network(container, data, options);
+
+  // Keep your existing events (dragEnd, click, stabilization, etc.)
+  // No changes needed below
+  network.on('dragEnd', () => {
+    const positions = network.getPositions();
+    this.savedPositions = positions;
+    localStorage.setItem(this.savedPositionsKey, JSON.stringify(positions));
+  });
+
+  network.on('click', (event: any) => {
+    if (event.nodes[0]) {
+      const clickedNode = nodes.get(event.nodes[0]);
+      const canvasPosition = network.canvasToDOM(event.pointer.canvas);
+      const containerRect = container.getBoundingClientRect();
+      const mainContainer = document.querySelector('.main-container') as HTMLElement;
+      const mainRect = mainContainer?.getBoundingClientRect() || containerRect;
+
+      let adjustedX = canvasPosition.x + containerRect.left - mainRect.left + 20;
+      let adjustedY = canvasPosition.y + containerRect.top - mainRect.top - 50;
+
+      const popupWidth = 280;
+      const popupHeight = 200;
+      const viewportWidth = window.innerWidth;
+      const viewportHeight = window.innerHeight;
+
+      if (adjustedX + popupWidth > viewportWidth) adjustedX -= popupWidth + 40;
+      if (adjustedY + popupHeight > viewportHeight) adjustedY -= popupHeight + 40;
+      if (adjustedX < 20) adjustedX = 20;
+      if (adjustedY < 20) adjustedY = 20;
+
+      this.handleNodeClick(clickedNode, { x: adjustedX, y: adjustedY });
+    }
+  });
+
+  network.on('stabilizationIterationsDone', () => {
+    network.fit();
+    if (!hasSavedPositions) {
+      const positions = network.getPositions();
+      this.savedPositions = positions;
+      localStorage.setItem(this.savedPositionsKey, JSON.stringify(positions));
+    }
+  });
+
+  if (hasSavedPositions) {
+    setTimeout(() => network.fit(), 500);
+  }
+}
+
+  handleNodeClick(node: any, position?: { x: number, y: number }) {
+    this.selectedDevice = node;
+    if (position) {
+      this.selectedDevice.popupPosition = position;
+    }
+  }
+
+  closeDeviceDetails() {
+    this.selectedDevice = null;
+  }
+
+  getDeviceInterfaces() {
+    if (!this.selectedDevice) return [];
+    
+    const device = this.mikrotikData.find(d => d.name === this.selectedDevice.label);
+    if (!device) return [];
+    
+    return Object.entries(device.interfaces).map(([name, data]: [string, any]) => ({
+      name,
+      address: data.address,
+      mac: data.mac
+    }));
+  }
+
+  getNodeColor(deviceType: string): string {
+    const colors = {
+      'gateway': '#dc3545',
+      'router': '#fd7e14',
+      'switch': '#6f42c1',
+      'ap': '#20c997',
+      'cpe': '#0dcaf0'
+    };
+    return (colors as any)[deviceType] || '#6c757d';
+  }
+
+  getNodeBorderColor(deviceType: string): string {
+    const borderColors = {
+      'gateway': '#b02a37',
+      'router': '#e8681a',
+      'switch': '#59359a',
+      'ap': '#1aa179',
+      'cpe': '#0baccc'
+    };
+    return (borderColors as any)[deviceType] || '#495057';
+  }
+
+  getDeviceIcon(deviceType: string, brand: string): string {
+    const basePath = './assets/Network-Icons-SVG/';
+    const type = deviceType.toLowerCase();
+    const brandName = brand.toLowerCase();
+    
+    // MikroTik devices
+    if (brandName === 'mikrotik') {
+      if (type === 'switch') {
+        return `${basePath}cumulus-switch-v2.svg`;
+      }
+      return `${basePath}cumulus-router-v2.svg`;
+    }
+    
+    // Cisco devices
+    if (brandName === 'cisco') {
+      if (type === 'switch') {
+        return `${basePath}cisco-switch-l2.svg`;
+      }
+      return `${basePath}cisco-router.svg`;
+    }
+    
+    // Juniper devices
+    if (brandName === 'juniper') {
+      if (type === 'switch') {
+        return `${basePath}juniper-switch-l2.svg`;
+      }
+      return `${basePath}juniper-router.svg`;
+    }
+    
+    // HPE/Aruba devices
+    if (brandName === 'hpe/aruba' || brandName === 'aruba' || brandName === 'hpe') {
+      if (type === 'server') {
+        return `${basePath}generic-server-1.svg`;
+      }
+      return `${basePath}arista-switch.svg`;
+    }
+    
+    // Ubiquiti devices
+    if (brandName === 'ubiquiti' || brandName === 'ubnt') {
+      if (type === 'switch') {
+        return `${basePath}generic-switch-l2-v1-colour.svg`;
+      }
+      return `${basePath}generic-router-colour.svg`;
+    }
+    
+    // Default icons by type
+    const defaultIcons = {
+      'switch': `${basePath}generic-switch-l2-v1-colour.svg`,
+      'router': `${basePath}generic-router-colour.svg`,
+      'router/switch': `${basePath}generic-router-colour.svg`,
+      'server': `${basePath}generic-server-1.svg`,
+      'unknown': `${basePath}generic-router-colour.svg`
+    };
+    
+    return (defaultIcons as any)[type] || `${basePath}generic-router-colour.svg`;
+  }
+
+  getDefaultPosition(deviceName: string, index: number): { x: number, y: number } {
+    const positions = {
+      'Core Router': { x: 0, y: 0 },
+      'Edge Router': { x: -200, y: -100 },
+      'Distribution Switch': { x: 200, y: -100 },
+      'Access Point 1': { x: 100, y: 100 },
+      'Access Point 2': { x: 300, y: 100 },
+      'Customer Router 1': { x: 0, y: 200 },
+      'Customer Router 2': { x: 200, y: 200 }
+    };
+    return (positions as any)[deviceName] || { x: index * 100, y: index * 50 };
+  }
+
+  webAccess() {
+    if (!this.selectedDevice) return;
+    const device = this.mikrotikData.find(d => d.name === this.selectedDevice.label);
+    if (device) {
+      const firstInterface = Object.values(device.interfaces)[0] as any;
+      const ip = firstInterface.address.split('/')[0];
+      window.open(`http://${ip}`, '_blank');
+    }
+  }
+
+  showMoreInfo() {
+    console.log('More info for:', this.selectedDevice);
+    // Implement modal or detailed view
+  }
+
+  pingDevice() {
+    console.log('Ping device:', this.selectedDevice);
+    // Implement ping functionality
+  }
+
+  configureDevice() {
+    console.log('Configure device:', this.selectedDevice);
+    // Implement configuration interface
+  }
+
+}
diff --git a/src/app/views/maps/maps-routing.module.ts b/src/app/views/maps/maps-routing.module.ts
new file mode 100644
index 0000000..db9975a
--- /dev/null
+++ b/src/app/views/maps/maps-routing.module.ts
@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+import { MapsComponent } from './maps.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: MapsComponent,
+    data: {
+      title: $localize`Maps Wall`
+    }
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class MapsRoutingModule {
+}
diff --git a/src/app/views/maps/maps.component.html b/src/app/views/maps/maps.component.html
new file mode 100644
index 0000000..3319749
--- /dev/null
+++ b/src/app/views/maps/maps.component.html
@@ -0,0 +1,82 @@
+<c-row class="network-container">
+  <c-col [xs]="12" class="network-col">
+    <c-card class="network-card">
+      <button cButton color="primary" size="sm" (click)="refreshData()" class="refresh-btn">
+        <i class="fas fa-sync-alt"></i> Refresh
+      </button>
+      <div #network class="network-canvas"></div>
+    </c-card>
+  </c-col>
+</c-row>
+
+<div *ngIf="selectedDevice" class="floating-sidebar" [ngStyle]="{
+  'left.px': selectedDevice.popupPosition?.x || 20,
+  'top.px': selectedDevice.popupPosition?.y || 20
+}">
+  <div class="device-panel">
+    <div class="panel-header">
+      <span class="device-name">{{ selectedDevice.label }}</span>
+      <button cButton variant="ghost" size="sm" (click)="closeDeviceDetails()" class="close-btn">
+        <i class="fas fa-times"></i>
+      </button>
+    </div>
+    
+    <div class="panel-content">
+      <div class="device-info">
+        <div><small><strong>Type:</strong> {{getDeviceInfo()?.type}} ({{getDeviceInfo()?.brand}})</small></div>
+        <div><small><strong>Board:</strong> {{getDeviceInfo()?.board}}</small></div>
+        <div><small><strong>Version:</strong> {{getDeviceInfo()?.version}}</small></div>
+        <div *ngIf="getDeviceInfo()?.systemDescription"><small><strong>System:</strong> {{getDeviceInfo()?.systemDescription}}</small></div>
+        <div><small><strong>IP:</strong> {{getPrimaryIP()}}</small></div>
+        <div><small><strong>Neighbors:</strong> {{getNeighborCount()}}</small></div>
+      </div>
+      
+      <div class="interfaces-section">
+        <div *ngFor="let interface of getDeviceInterfaces()" class="interface-row">
+          <div class="if-header">
+            <span class="if-name">{{ interface.name }}</span>
+            <span class="if-neighbors">({{ interface.neighbors }} neighbors)</span>
+          </div>
+          <span class="if-ip">{{ interface.address }}</span>
+        </div>
+      </div>
+      
+      <div class="actions-section">
+        <button cButton color="primary" size="sm" (click)="webAccess()" class="compact-btn">
+          <i class="fas fa-globe"></i> Web
+        </button>
+        <button *ngIf="getDeviceInfo()?.deviceId" cButton color="info" size="sm" (click)="showMoreInfo()" class="compact-btn">
+          <i class="fas fa-info-circle"></i> Info
+        </button>
+        <!-- <button cButton color="success" size="sm" (click)="pingDevice(getDeviceInfo()?.deviceId)" class="compact-btn">
+          <i class="fas fa-play"></i> Ping
+        </button>
+        <button cButton color="warning" size="sm" (click)="configureDevice(getDeviceInfo()?.deviceId)" class="compact-btn">
+          <i class="fas fa-cog"></i> Config
+        </button> -->
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- Web Access Modal -->
+<c-modal #WebAccessModal backdrop="static" [(visible)]="showWebAccessModal" id="WebAccessModal">
+  <c-modal-header>
+    <h6 cModalTitle>Web Access Options</h6>
+    <button cButtonClose (click)="closeWebAccessModal()"></button>
+  </c-modal-header>
+  <c-modal-body>
+    <p>Choose how to access the device:</p>
+    <div class="d-grid gap-2">
+      <button *ngIf="ispro" cButton color="primary" (click)="openProxyAccess()">
+        <i class="fas fa-shield-alt"></i> Proxy Access , through Mikrowizard server
+      </button>
+      <button cButton color="secondary" (click)="openDirectAccess()">
+        <i class="fas fa-external-link-alt"></i> Direct Access 
+      </button>
+    </div>
+  </c-modal-body>
+  <c-modal-footer>
+    <button cButton color="secondary" (click)="closeWebAccessModal()">Cancel</button>
+  </c-modal-footer>
+</c-modal>
diff --git a/src/app/views/maps/maps.component.scss b/src/app/views/maps/maps.component.scss
new file mode 100644
index 0000000..26682f1
--- /dev/null
+++ b/src/app/views/maps/maps.component.scss
@@ -0,0 +1,256 @@
+:host {
+  .network-container {
+    height: calc(100vh - 165px);
+    margin: 0;
+    position: relative;
+  }
+
+  .network-col {
+    padding: 0;
+  }
+
+  .network-card {
+    height: 100%;
+    border: none;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+    border-radius: 12px;
+    overflow: hidden;
+    position: relative;
+  }
+
+  .refresh-btn {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    z-index: 1000;
+    padding: 6px 12px;
+    font-size: 12px;
+  }
+
+  .network-canvas {
+    width: 100%;
+    height: calc(100vh - 200px);
+    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
+    border-radius: 8px;
+    border: 1px solid #dee2e6;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+    
+    ::ng-deep .vis-network {
+      cursor: default;
+      
+      .vis-item {
+        cursor: pointer;
+        
+        &:hover {
+          cursor: pointer;
+        }
+        
+        &:active {
+          cursor: grabbing;
+        }
+      }
+    }
+  }
+
+  .floating-sidebar {
+    position: fixed;
+    z-index: 10000;
+    animation: slideIn 0.3s ease;
+  }
+
+  .device-panel {
+    background: rgba(44, 62, 80, 0.95);
+    backdrop-filter: blur(10px);
+    border-radius: 8px;
+    border: 1px solid rgba(52, 73, 94, 0.8);
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+    width: 280px;
+    max-height: calc(100vh - 40px);
+    color: white;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .panel-header {
+    padding: 12px 16px;
+    border-bottom: 1px solid rgba(52, 73, 94, 0.5);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .device-name {
+    font-weight: 600;
+    font-size: 14px;
+    color: #ecf0f1;
+  }
+
+  .close-btn {
+    color: #bdc3c7;
+    border: none;
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 4px;
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    
+    &:hover {
+      background: rgba(255, 255, 255, 0.2);
+      color: white;
+    }
+  }
+
+  .panel-content {
+    padding: 16px;
+    overflow-y: auto;
+    flex: 1;
+    
+    /* Override global scrollbar styles */
+    scrollbar-width: thin !important;
+    scrollbar-color: #bdc3c7 rgba(52, 73, 94, 0.3) !important;
+    
+    /* Custom scrollbar styling for webkit */
+    &::-webkit-scrollbar {
+      width: 8px !important;
+    }
+    
+    &::-webkit-scrollbar-track {
+      background: rgba(52, 73, 94, 0.3) !important;
+      border-radius: 4px;
+    }
+    
+    &::-webkit-scrollbar-thumb {
+      background: #bdc3c7 !important;
+      border-radius: 4px;
+      
+      &:hover {
+        background: #ecf0f1 !important;
+      }
+    }
+  }
+
+  .interfaces-section {
+    margin-bottom: 16px;
+    margin-top: 3px;
+
+    .interface-row {
+      max-height: none;
+    }
+  }
+
+  .section-title {
+    font-size: 12px;
+    font-weight: 600;
+    color: #95a5a6;
+    margin-bottom: 8px;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+  }
+
+  .interface-row {
+    display: flex;
+    flex-direction: column;
+    padding: 1px 0;
+    border-bottom: 1px solid rgba(52, 73, 94, 0.3);
+    font-size: 12px;
+    gap: 2px;
+    
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+  
+  .if-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .if-name {
+    color: #3498db;
+    font-weight: 500;
+  }
+
+  .if-ip {
+    color: #ecf0f1;
+    font-family: monospace;
+    word-break: break-all;
+  }
+  
+  .if-neighbors {
+    color: #95a5a6;
+    font-size: 11px;
+  }
+
+  .actions-section {
+    display: flex;
+    gap: 8px;
+    
+    &:has(button:only-child) {
+      button {
+        flex: 1;
+      }
+    }
+    
+    &:not(:has(button:only-child)) {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+    }
+  }
+
+  .compact-btn {
+    padding: 6px 8px;
+    font-size: 11px;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    justify-content: center;
+    transition: all 0.2s ease;
+    
+    &:hover {
+      transform: translateY(-1px);
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+    }
+  }
+
+  @keyframes slideIn {
+    from {
+      opacity: 0;
+      transform: translateX(20px);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+}
+
+.mdc-line-ripple.mdc-line-ripple--deactivating.ng-star-inserted {
+  display: none!important;
+}
+
+::ng-deep .main-container{
+  padding:0!important;
+  margin-top:-10px;
+}
+
+::ng-deep .header{
+  margin-bottom: 0.9rem!important;
+}
+
+@media only screen and (max-width: 768px) {
+  :host .floating-sidebar {
+    position: fixed;
+    top: 10px;
+    right: 10px;
+    left: 10px;
+    width: auto;
+  }
+  
+  :host .device-panel {
+    width: 100%;
+  }
+}
\ No newline at end of file
diff --git a/src/app/views/maps/maps.component.ts b/src/app/views/maps/maps.component.ts
new file mode 100644
index 0000000..d545e8a
--- /dev/null
+++ b/src/app/views/maps/maps.component.ts
@@ -0,0 +1,479 @@
+import { Component, OnInit, OnDestroy, ViewChild, ElementRef } from "@angular/core";
+import { dataProvider } from "../../providers/mikrowizard/data";
+import { loginChecker } from "../../providers/login_checker";
+import { Router } from "@angular/router";
+import { formatInTimeZone } from "date-fns-tz";
+import { Network } from 'vis-network/peer';
+import { DataSet } from 'vis-data';
+
+@Component({
+  templateUrl: "maps.component.html",
+  styleUrls: ["maps.component.scss"],
+})
+export class MapsComponent implements OnInit {
+  public uid: number;
+  public uname: string;
+  public ispro: boolean = false;
+  public tz: string;
+  public savedPositions: any = {};
+  public savedPositionsKey = "network-layout";
+  public selectedDevice: any = null;
+  public showWebAccessModal: boolean = false;
+  public showMoreInfoModal: boolean = false;
+  public currentDeviceInfo: any = null;
+  constructor(
+    private data_provider: dataProvider,
+    private router: Router,
+    private login_checker: loginChecker
+  ) {
+    var _self = this;
+    if (!this.login_checker.isLoggedIn()) {
+      setTimeout(function () {
+        _self.router.navigate(["login"]);
+      }, 100);
+    }
+    this.data_provider.getSessionInfo().then((res) => {
+      _self.uid = res.uid;
+      _self.uname = res.name;
+      _self.ispro = res.ISPRO;
+      if (!_self.ispro)
+        setTimeout(function () {
+          _self.router.navigate(["dashboard"]);
+        }, 100);
+      _self.tz = res.tz;
+    });
+  }
+
+  @ViewChild('network', { static: true }) networkContainer: ElementRef | undefined;
+
+  mikrotikData: any[] = [];
+
+  ngOnInit(): void {
+    this.loadFontAwesome();
+    this.savedPositions = JSON.parse(localStorage.getItem(this.savedPositionsKey) || "{}");
+    this.loadNetworkData();
+  }
+
+  loadNetworkData(): void {
+    this.data_provider.getNetworkMap().then((res) => {
+      this.mikrotikData = res;
+      console.dir(res);
+      setTimeout(() => {
+        this.createNetworkMap();
+      }, 100);
+    });
+  }
+
+  refreshData(): void {
+    this.selectedDevice = null;
+    this.loadNetworkData();
+  }
+
+
+
+  loadFontAwesome() {
+    if (!document.querySelector('link[href*="font-awesome"]')) {
+      const link = document.createElement('link');
+      link.rel = 'stylesheet';
+      link.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css';
+      document.head.appendChild(link);
+    }
+  }
+
+  createNetworkMap() {
+    const container = this.networkContainer?.nativeElement;
+    if (!container) return;
+
+    let nodes = new DataSet<any>([]);
+    let edges = new DataSet<any>([]);
+    let deviceMap: { [key: string]: string } = {}; // uniqueId (hostname) to nodeId mapping
+    let allDevices: { [key: string]: any } = {};   // uniqueId to device info mapping
+    let macToDevice: { [key: string]: string } = {}; // MAC -> uniqueId (hostname) mapping
+    const hasSavedPositions = Object.keys(this.savedPositions).length > 0;
+    let nodeIdCounter = 1;
+
+    // Collect all devices using hostname as consistent unique ID
+    this.mikrotikData.forEach((device) => {
+      const deviceId = device.name; // Use name (hostname) as unique ID
+
+      if (!allDevices[deviceId]) {
+        allDevices[deviceId] = {
+          name: device.name,
+          type: 'Router',
+          brand: 'MikroTik'
+        };
+      }
+
+      Object.entries(device.interfaces).forEach(([_, iface]: [string, any]) => {
+        if (iface.mac) {
+          macToDevice[iface.mac] = deviceId; // Map to hostname
+        }
+
+        if (iface.neighbors && Array.isArray(iface.neighbors)) {
+          iface.neighbors.forEach((neighbor: any) => {
+            const neighborId = neighbor.hostname || 'Unknown'; // Use hostname
+
+            if (!allDevices[neighborId]) {
+              allDevices[neighborId] = {
+                name: neighbor.hostname || neighbor.mac || 'Unknown',
+                type: neighbor.type || 'Router',
+                brand: neighbor.brand || 'MikroTik'
+              };
+            }
+
+            if (neighbor.mac) {
+              macToDevice[neighbor.mac] = neighborId; // Map to hostname
+            }
+          });
+        }
+      });
+    });
+
+    // Create nodes
+    Object.entries(allDevices).forEach(([uniqueId, device]: [string, any]) => {
+      const nodeId = `node_${nodeIdCounter++}`;
+      deviceMap[uniqueId] = nodeId;
+
+      nodes.add({
+        id: nodeId,
+        label: device.name,
+        shape: 'image',
+        image: this.getDeviceIcon(device.type || 'Unknown', device.brand || 'Unknown'),
+        size: 15,
+        font: { size: 11, color: '#333', face: 'Arial, sans-serif' },
+        ...(hasSavedPositions && this.savedPositions[nodeId]
+          ? { x: this.savedPositions[nodeId].x, y: this.savedPositions[nodeId].y }
+          : {})
+      } as any);
+    });
+
+// Create edges - collect all connections first
+let connectionMap: { [key: string]: string[] } = {};
+
+this.mikrotikData.forEach((device) => {
+  const deviceName = device.name;
+  Object.entries(device.interfaces).forEach(([ifaceName, iface]: [string, any]) => {
+    const sourceDeviceId = iface.mac ? macToDevice[iface.mac] : deviceName;
+
+    if (iface.neighbors && Array.isArray(iface.neighbors)) {
+      iface.neighbors.forEach((neighbor: any) => {
+        const targetDeviceId = neighbor.mac ? macToDevice[neighbor.mac] : null;
+
+        if (deviceMap[sourceDeviceId] && targetDeviceId && deviceMap[targetDeviceId]) {
+          const connectionKey = [sourceDeviceId, targetDeviceId].sort().join('_');
+          const interfacePair = neighbor.interface ? `${ifaceName}↔${neighbor.interface}` : ifaceName;
+          
+          if (!connectionMap[connectionKey]) {
+            connectionMap[connectionKey] = [];
+          }
+          
+          if (!connectionMap[connectionKey].includes(interfacePair)) {
+            connectionMap[connectionKey].push(interfacePair);
+          }
+        }
+      });
+    }
+  });
+});
+
+// Create edges with combined labels
+Object.entries(connectionMap).forEach(([connectionKey, interfacePairs]) => {
+  const [sourceDeviceId, targetDeviceId] = connectionKey.split('_');
+  let edgeLabel = interfacePairs.join('\n');
+  
+  // Limit to max 2 interface pairs to avoid overcrowding
+  if (interfacePairs.length > 2) {
+    edgeLabel = interfacePairs.slice(0, 2).join('\n') + '\n+' + (interfacePairs.length - 2);
+  }
+  
+  edges.add({
+    id: connectionKey,
+    from: deviceMap[sourceDeviceId],
+    to: deviceMap[targetDeviceId],
+    label: edgeLabel,
+    color: { color: '#34495e', highlight: '#3498db' },
+    width: 3,
+    smooth: { type: 'continuous', roundness: 0.1 },
+    font: {
+      size: 9,
+      color: '#2c3e50',
+      face: 'Arial, sans-serif',
+      strokeWidth: 2,
+      strokeColor: '#ffffff',
+      align: 'horizontal'
+    }
+  } as any);
+});
+    const data = { nodes, edges };
+    const options = { physics: { enabled: true, stabilization: { iterations: 100 }, barnesHut: { gravitationalConstant: -8000, centralGravity: 0.3, springLength: 200, springConstant: 0.04, damping: 0.09 } }, interaction: { hover: true, dragNodes: true, dragView: true, zoomView: true, hoverConnectedEdges: false, selectConnectedEdges: false, navigationButtons: false, keyboard: false }, nodes: { borderWidth: 3, shadow: true }, edges: { shadow: true, smooth: true, length: 150 }, manipulation: { enabled: false } };
+    const network = new Network(container, data, options);
+
+    // Keep your existing events (dragEnd, click, stabilization, etc.)
+    // No changes needed below
+    network.on('dragEnd', () => {
+      const positions = network.getPositions();
+      this.savedPositions = positions;
+      localStorage.setItem(this.savedPositionsKey, JSON.stringify(positions));
+    });
+
+    network.on('click', (event: any) => {
+      if (event.nodes[0]) {
+        const clickedNode = nodes.get(event.nodes[0]);
+        const canvasPosition = network.canvasToDOM(event.pointer.canvas);
+        const containerRect = container.getBoundingClientRect();
+        const mainContainer = document.querySelector('.main-container') as HTMLElement;
+        const mainRect = mainContainer?.getBoundingClientRect() || containerRect;
+
+        let adjustedX = canvasPosition.x + containerRect.left - mainRect.left + 20;
+        let adjustedY = canvasPosition.y + containerRect.top - mainRect.top - 50;
+
+        const popupWidth = 280;
+        const maxPopupHeight = window.innerHeight - 40;
+        const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;
+
+        if (adjustedX + popupWidth > viewportWidth) adjustedX -= popupWidth + 40;
+        if (adjustedY + maxPopupHeight > viewportHeight) adjustedY = viewportHeight - maxPopupHeight - 20;
+        if (adjustedX < 20) adjustedX = 20;
+        if (adjustedY < 20) adjustedY = 20;
+
+        this.handleNodeClick(clickedNode, { x: adjustedX, y: adjustedY });
+      }
+    });
+
+    network.on('stabilizationIterationsDone', () => {
+      network.fit();
+      if (!hasSavedPositions) {
+        const positions = network.getPositions();
+        this.savedPositions = positions;
+        localStorage.setItem(this.savedPositionsKey, JSON.stringify(positions));
+      }
+    });
+
+    if (hasSavedPositions) {
+      setTimeout(() => network.fit(), 500);
+    }
+  }
+
+  handleNodeClick(node: any, position?: { x: number, y: number }) {
+    this.selectedDevice = node;
+    if (position) {
+      this.selectedDevice.popupPosition = position;
+    }
+  }
+
+  closeDeviceDetails() {
+    this.selectedDevice = null;
+  }
+
+  getDeviceInfo() {
+    if (!this.selectedDevice) return null;
+    
+    const device = this.mikrotikData.find(d => d.name === this.selectedDevice.label);
+    
+    if (device) {
+      // Main device found
+      const interfaces = Object.entries(device.interfaces).map(([name, data]: [string, any]) => ({
+        name,
+        address: data.address || 'N/A',
+        mac: data.mac || 'N/A',
+        neighbors: data.neighbors?.length || 0
+      }));
+      
+      const interfaceWithNeighbors = Object.values(device.interfaces)
+        .find((iface: any) => iface.neighbors?.length > 0) as any;
+      const firstNeighbor = interfaceWithNeighbors?.neighbors?.[0];
+      
+      return {
+        name: device.name,
+        deviceId: device.device_id,
+        type: firstNeighbor?.type || 'Router',
+        brand: firstNeighbor?.brand || 'MikroTik',
+        board: firstNeighbor?.board || 'Unknown',
+        version: firstNeighbor?.version || 'Unknown',
+        systemDescription: firstNeighbor?.['system-description'] || null,
+        softwareId: firstNeighbor?.['software-id'] || 'N/A',
+        interfaces
+      };
+    } else {
+      // Search in neighbor data
+      for (const mainDevice of this.mikrotikData) {
+        for (const iface of Object.values(mainDevice.interfaces)) {
+          const neighbor = (iface as any).neighbors?.find((n: any) => n.hostname === this.selectedDevice.label);
+          if (neighbor) {
+            return {
+              name: neighbor.hostname,
+              deviceId: null,
+              type: neighbor.type || 'Router',
+              brand: neighbor.brand || 'MikroTik',
+              board: neighbor.board || 'Unknown',
+              version: neighbor.version || 'Unknown',
+              systemDescription: neighbor['system-description'] || null,
+              softwareId: neighbor['software-id'] || 'N/A',
+              interfaces: [{ name: neighbor.interface || 'Unknown', address: neighbor.address || 'N/A', mac: neighbor.mac || 'N/A', neighbors: 0 }]
+            };
+          }
+        }
+      }
+    }
+    
+    return null;
+  }
+
+  getNodeColor(deviceType: string): string {
+    const colors = {
+      'gateway': '#dc3545',
+      'router': '#fd7e14',
+      'switch': '#6f42c1',
+      'ap': '#20c997',
+      'cpe': '#0dcaf0'
+    };
+    return (colors as any)[deviceType] || '#6c757d';
+  }
+
+  getNodeBorderColor(deviceType: string): string {
+    const borderColors = {
+      'gateway': '#b02a37',
+      'router': '#e8681a',
+      'switch': '#59359a',
+      'ap': '#1aa179',
+      'cpe': '#0baccc'
+    };
+    return (borderColors as any)[deviceType] || '#495057';
+  }
+
+  getDeviceIcon(deviceType: string, brand: string): string {
+    const basePath = './assets/Network-Icons-SVG/';
+    const type = deviceType.toLowerCase();
+    const brandName = brand.toLowerCase();
+    
+    // MikroTik devices
+    if (brandName === 'mikrotik') {
+      if (type === 'switch') {
+        return `${basePath}cumulus-switch-v2.svg`;
+      }
+      return `${basePath}cumulus-router-v2.svg`;
+    }
+    
+    // Cisco devices
+    if (brandName === 'cisco') {
+      if (type === 'switch') {
+        return `${basePath}cisco-switch-l2.svg`;
+      }
+      return `${basePath}cisco-router.svg`;
+    }
+    
+    // Juniper devices
+    if (brandName === 'juniper') {
+      if (type === 'switch') {
+        return `${basePath}juniper-switch-l2.svg`;
+      }
+      return `${basePath}juniper-router.svg`;
+    }
+    
+    // HPE/Aruba devices
+    if (brandName === 'hpe/aruba' || brandName === 'aruba' || brandName === 'hpe') {
+      if (type === 'server') {
+        return `${basePath}generic-server-1.svg`;
+      }
+      return `${basePath}arista-switch.svg`;
+    }
+    
+    // Ubiquiti devices
+    if (brandName === 'ubiquiti' || brandName === 'ubnt') {
+      if (type === 'switch') {
+        return `${basePath}generic-switch-l2-v1-colour.svg`;
+      }
+      return `${basePath}generic-router-colour.svg`;
+    }
+    
+    // Default icons by type
+    const defaultIcons = {
+      'switch': `${basePath}generic-switch-l2-v1-colour.svg`,
+      'router': `${basePath}generic-router-colour.svg`,
+      'router/switch': `${basePath}generic-router-colour.svg`,
+      'server': `${basePath}generic-server-1.svg`,
+      'unknown': `${basePath}generic-router-colour.svg`
+    };
+    
+    return (defaultIcons as any)[type] || `${basePath}generic-router-colour.svg`;
+  }
+
+  getDefaultPosition(deviceName: string, index: number): { x: number, y: number } {
+    const positions = {
+      'Core Router': { x: 0, y: 0 },
+      'Edge Router': { x: -200, y: -100 },
+      'Distribution Switch': { x: 200, y: -100 },
+      'Access Point 1': { x: 100, y: 100 },
+      'Access Point 2': { x: 300, y: 100 },
+      'Customer Router 1': { x: 0, y: 200 },
+      'Customer Router 2': { x: 200, y: 200 }
+    };
+    return (positions as any)[deviceName] || { x: index * 100, y: index * 50 };
+  }
+
+  webAccess() {
+    if (!this.selectedDevice) return;
+    this.currentDeviceInfo = this.getDeviceInfo();
+    this.showWebAccessModal = true;
+    this.closeDeviceDetails();
+  }
+
+  openProxyAccess() {
+    if (this.currentDeviceInfo?.deviceId) {
+      window.open(`/api/proxy/init?devid=${this.currentDeviceInfo.deviceId}`, '_blank');
+    } else {
+      const ip = this.currentDeviceInfo?.interfaces.find((iface: any) => iface.address !== 'N/A')?.address?.split('/')[0];
+      if (ip) {
+        window.open(`/api/proxy/init?dev_ip=${ip}`, '_blank');
+      }
+    }
+    this.showWebAccessModal = false;
+  }
+
+  openDirectAccess() {
+    const ip = this.currentDeviceInfo?.interfaces.find((iface: any) => iface.address !== 'N/A')?.address?.split('/')[0];
+    if (ip) {
+      window.open(`http://${ip}`, '_blank');
+    }
+    this.showWebAccessModal = false;
+  }
+
+  closeWebAccessModal() {
+    this.showWebAccessModal = false;
+  }
+
+  getNeighborCount() {
+    const deviceInfo = this.getDeviceInfo();
+    return deviceInfo?.interfaces.reduce((total, iface) => total + iface.neighbors, 0) || 0;
+  }
+
+  getPrimaryIP() {
+    const deviceInfo = this.getDeviceInfo();
+    const primaryInterface = deviceInfo?.interfaces.find(iface => iface.address !== 'N/A');
+    return primaryInterface?.address?.split('/')[0] || 'N/A';
+  }
+
+  getDeviceInterfaces() {
+    const deviceInfo = this.getDeviceInfo();
+    return deviceInfo?.interfaces || [];
+  }
+
+  showMoreInfo() {
+    const deviceInfo = this.getDeviceInfo();
+    if (deviceInfo?.deviceId) {
+      window.open(`/#/device-stats;id=${deviceInfo.deviceId}`, '_blank');
+    }
+  }
+
+  pingDevice(devid: number) {
+    console.log('Ping device:', this.selectedDevice);
+    // Implement ping functionality
+  }
+
+  configureDevice(devid: number) {
+    console.log('Configure device:', this.selectedDevice);
+    // Implement configuration interface
+  }
+
+}
\ No newline at end of file
diff --git a/src/app/views/maps/maps.module.ts b/src/app/views/maps/maps.module.ts
new file mode 100644
index 0000000..beb35e3
--- /dev/null
+++ b/src/app/views/maps/maps.module.ts
@@ -0,0 +1,60 @@
+import { NgModule } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { ReactiveFormsModule } from "@angular/forms";
+import { FormsModule } from "@angular/forms";
+
+import {
+  ButtonGroupModule,
+  ButtonModule,
+  CardModule,
+  GridModule,
+  WidgetModule,
+  ProgressModule,
+  TemplateIdDirective,
+  TooltipModule,
+  BadgeModule,
+  CarouselModule,
+  ListGroupModule,
+  ModalModule,
+  TableModule, 
+  UtilitiesModule
+} from "@coreui/angular";
+import { IconModule } from "@coreui/icons-angular";
+
+import { ChartjsModule } from "@coreui/angular-chartjs";
+import { NgScrollbarModule } from 'ngx-scrollbar';
+import { MapsRoutingModule } from "./maps-routing.module";
+import { MapsComponent } from "./maps.component";
+import { ClipboardModule } from "@angular/cdk/clipboard";
+import { InfiniteScrollModule } from 'ngx-infinite-scroll';
+
+@NgModule({
+  imports: [
+    MapsRoutingModule,
+    CardModule,
+    WidgetModule,
+    CommonModule,
+    GridModule,
+    ProgressModule,
+    ReactiveFormsModule,
+    ButtonModule,
+    ModalModule,
+    FormsModule,
+    TemplateIdDirective,
+    ButtonModule,
+    ButtonGroupModule,
+    ChartjsModule,
+    CarouselModule,
+    BadgeModule,
+    ClipboardModule,
+    ListGroupModule,
+    NgScrollbarModule,
+    TableModule,
+    TooltipModule,
+    UtilitiesModule,
+    InfiniteScrollModule,
+    IconModule
+  ],
+  declarations: [MapsComponent],
+})
+export class MapsModule {}

From 2f68c499365d8fdd7e5d36181a998d6bbc3738e9 Mon Sep 17 00:00:00 2001
From: sepehr <sepehr.ha@gmail.com>
Date: Thu, 16 Oct 2025 17:33:47 +0300
Subject: [PATCH 08/15] feat: redesign user tasks with advanced scheduling

- Complete UI/UX redesign of user tasks interface
- Add cron selector with examples
- Improved task scheduling interface
- Enhanced task management and monitoring
---
 .../user_tasks/user_tasks.component.html      | 503 ++++++++++++------
 .../user_tasks/user_tasks.component.scss      | 371 +++++++++++++
 .../views/user_tasks/user_tasks.component.ts  | 188 ++++++-
 src/app/views/user_tasks/user_tasks.module.ts |   6 +
 4 files changed, 884 insertions(+), 184 deletions(-)
 create mode 100644 src/app/views/user_tasks/user_tasks.component.scss

diff --git a/src/app/views/user_tasks/user_tasks.component.html b/src/app/views/user_tasks/user_tasks.component.html
index f7da0bc..f37fd7c 100644
--- a/src/app/views/user_tasks/user_tasks.component.html
+++ b/src/app/views/user_tasks/user_tasks.component.html
@@ -57,146 +57,255 @@
 </c-row>
 
   <c-modal #EditTaskModal backdrop="static" size="xl" [(visible)]="EditTaskModalVisible" id="EditTaskModal">
-    <c-modal-header>
-      <h5 *ngIf="SelectedTask['action']=='edit'" cModalTitle>Editing device {{SelectedTask['name']}}</h5>
-      <h5 *ngIf="SelectedTask['action']=='add'" cModalTitle>Adding new task</h5>
+    <c-modal-header class="bg-light">
+      <h5 *ngIf="SelectedTask['action']=='edit'" cModalTitle>
+        <i class="fa-solid fa-edit me-2"></i>Edit Task: {{SelectedTask['name']}}
+      </h5>
+      <h5 *ngIf="SelectedTask['action']=='add'" cModalTitle>
+        <i class="fa-solid fa-plus me-2"></i>Create New Task
+      </h5>
       <button [cModalToggle]="EditTaskModal.id" cButtonClose></button>
     </c-modal-header>
-    <c-modal-body>
-      <div [cFormFloating]="true" class="mb-3">
-        <input cFormControl id="floatingInput" placeholder="SelectedTask['name']" [(ngModel)]="SelectedTask['name']" />
-        <label cLabel for="floatingInput">Name</label>
+    <c-modal-body class="p-4">
+      <!-- Basic Information Section -->
+      <div class="task-form-section mb-4">
+        <div class="section-header mb-3">
+          <h6 class="section-title mb-1"><i class="fa-solid fa-info-circle me-2"></i>Basic Information</h6>
+          <small class="text-muted">Define the task name, description and type</small>
+        </div>
+        <c-row class="g-3">
+          <c-col xs="12" md="6">
+            <input cFormControl placeholder="Task Name (required)" [(ngModel)]="SelectedTask['name']" 
+              class="form-input" title="Unique name for this task" />
+          </c-col>
+          <c-col xs="12" md="6">
+            <select cSelect [(ngModel)]="SelectedTask['task_type']" (change)="onTaskTypeChange()" class="form-select" title="Select task type">
+              <option value="">Choose Task Type...</option>
+              <option value="backup">📁 Backup Configuration</option>
+              <option value="snippet">📝 Execute Script/Snippet</option>
+              <option value="firmware" *ngIf="ispro">🔄 Firmware Update</option>
+            </select>
+          </c-col>
+          <c-col xs="12">
+            <textarea cFormControl placeholder="Task Description (optional)" [(ngModel)]="SelectedTask['description']" 
+              class="form-input" rows="2" title="Brief description of what this task does"></textarea>
+          </c-col>
+        </c-row>
       </div>
-
-      <div [cFormFloating]="true" class="mb-3">
-        <input cFormControl id="floatingInput" placeholder="SelectedTask['description']"
-          [(ngModel)]="SelectedTask['description']" />
-        <label cLabel for="floatingInput">Description</label>
+      <!-- Task Configuration Section -->
+      <div class="task-config-section mb-4" *ngIf="SelectedTask['task_type']">
+        <div class="section-header mb-3">
+          <h6 class="section-title mb-1"><i class="fa-solid fa-cog me-2"></i>Task Configuration</h6>
+          <small class="text-muted">Configure task-specific settings and parameters</small>
+        </div>
+        
+        <!-- Backup Configuration -->
+        <div *ngIf="SelectedTask['task_type']=='backup'" class="backup-config mb-3">
+          <c-card class="mb-3">
+            <c-card-header class="bg-success text-white">
+              <h6 class="mb-0"><i class="fa-solid fa-database me-2"></i>Backup Configuration</h6>
+            </c-card-header>
+            <c-card-body>
+              <div class="alert alert-info">
+                <i class="fa-solid fa-info-circle me-2"></i>
+                This task will create configuration backups of selected devices. Backups are stored securely and can be restored later.
+              </div>
+            </c-card-body>
+          </c-card>
+        </div>
+        
+        <!-- Firmware Configuration -->
+        <c-card *ngIf="SelectedTask['task_type']=='firmware'" class="mb-3">
+          <c-card-header class="bg-warning text-dark">
+            <h6 class="mb-0"><i class="fa-solid fa-microchip me-2"></i>Firmware Update Strategy</h6>
+          </c-card-header>
+          <c-card-body>
+            <div class="strategy-buttons mb-3">
+              <c-button-group role="group" class="w-100">
+                <button cButton [active]="SelectedTask['data']['strategy']=='system'" 
+                  (click)="firmware_type_changed('system')" color="info" variant="outline" class="flex-fill">
+                  <i class="fa-solid fa-cogs me-1"></i>System Default
+                </button>
+                <button cButton [active]="SelectedTask['data']['strategy']=='defined'" 
+                  (click)="firmware_type_changed('defined')" color="warning" variant="outline" class="flex-fill">
+                  <i class="fa-solid fa-list me-1"></i>Custom Version
+                </button>
+                <button cButton [active]="SelectedTask['data']['strategy']=='latest'" 
+                  (click)="firmware_type_changed('latest')" color="success" variant="outline" class="flex-fill">
+                  <i class="fa-solid fa-download me-1"></i>Latest Available
+                </button>
+              </c-button-group>
+            </div>
+            
+            <div *ngIf=" SelectedTask['data']['strategy']=='system'" class="alert alert-info">
+              <i class="fa-solid fa-info-circle me-2"></i>
+              Uses global MikroWizard update strategy settings. Check Settings page for configuration.
+            </div>
+            
+            <div *ngIf="firms_loaded && SelectedTask['data']['strategy']=='latest'" class="alert alert-success">
+              <i class="fa-solid fa-cloud-download-alt me-2"></i>
+              Downloads latest firmware from mikrotik.com. Server needs internet access.
+            </div>
+            
+            <div *ngIf="firms_loaded && SelectedTask['data']['strategy']=='defined'">
+              <c-row class="g-3">
+                <c-col xs="12" md="6">
+                  <label class="form-label">RouterOS v7+ Version</label>
+                  <select cSelect [(ngModel)]="SelectedTask['data']['version_to_install']" class="form-select">
+                    <option value="">Choose version...</option>
+                    <option *ngFor="let f of available_firmwares" [value]="f">{{f}}</option>
+                  </select>
+                </c-col>
+                <c-col xs="12" md="6" *ngIf="updateBehavior=='keep'">
+                  <label class="form-label">RouterOS v6 Version</label>
+                  <select cSelect [(ngModel)]="SelectedTask['data']['version_to_install_6']" class="form-select">
+                    <option value="">Choose version...</option>
+                    <option *ngFor="let f of available_firmwaresv6" [value]="f">{{f}}</option>
+                  </select>
+                </c-col>
+              </c-row>
+            </div>
+          </c-card-body>
+        </c-card>
+        
+        <!-- Snippet Configuration -->
+        <div *ngIf="SelectedTask['task_type']=='snippet'" class="snippet-config mb-3">
+          <c-card class="mb-3">
+            <c-card-header class="bg-primary text-white">
+              <h6 class="mb-0"><i class="fa-solid fa-code me-2"></i>Script/Snippet Configuration</h6>
+            </c-card-header>
+            <c-card-body>
+              <label class="form-label">Select Script/Snippet to Execute</label>
+              <ngx-super-select [dataSource]="Snippets" [options]="options"
+                (selectionChanged)="onSelectValueChanged($event)" [selectedItemValues]="[SelectedTask['snippetid']]"
+                (searchChanged)="onSnippetsValueChanged($event)" class="styled"></ngx-super-select>
+              <small class="text-muted mt-2 d-block">
+                <i class="fa-solid fa-info-circle me-1"></i>
+                The selected script will be executed on all target devices when this task runs.
+              </small>
+            </c-card-body>
+          </c-card>
+        </div>
       </div>
-
-      <c-input-group class="mb-3">
-        <label cInputGroupText for="inputGroupSelect01">
-          Options
-        </label>
-        <select cSelect id="inputGroupSelect01" [(ngModel)]="SelectedTask['task_type']">
-          <option>Choose...</option>
-          <option value="backup">Backup</option>
-          <option value="snippet">Snippet</option>
-          <option value="firmware" *ngIf="ispro">Firmware</option>
-        </select>
-      </c-input-group>
-      <h6 *ngIf="SelectedTask['task_type']=='firmware'" >Update Version Strategy</h6>
-      <c-card *ngIf="SelectedTask['task_type']=='firmware'">
-        <c-card-header style="padding: 0;">
-          <c-input-group>
-            <c-button-group aria-label="Basic radio toggle button group"
-              role="group">
-              <input class="btn-check" type="radio" value="Radio2" />
-              <label (click)="firmware_type_changed('system')" [active]="SelectedTask['data']['strategy']=='system'"
-                cButton cFormCheckLabel color="dark" variant="ghost">System setting
-                defined</label>
-              <input class="btn-check" type="radio" value="Radio1" />
-              <label (click)="firmware_type_changed('defined')" [active]="SelectedTask['data']['strategy']=='defined'"
-                cButton cFormCheckLabel color="dark" variant="ghost">Custom
-                Version</label>
-              <input class="btn-check" type="radio" value="Radio3" />
-              <label (click)="firmware_type_changed('latest')" [active]="SelectedTask['data']['strategy']=='latest'"
-                cButton cFormCheckLabel color="dark" variant="ghost">Latest
-                availble</label>
-            </c-button-group>
-          </c-input-group>
-        </c-card-header>
-        <c-card-body>
-
-          <c-input-group
-            *ngIf="firms_loaded && SelectedTask['task_type']=='firmware' && SelectedTask['data']['strategy']=='system'">
-            <c-form-feedback style="display: block;color: #48515a;margin-top: 0;" [valid]="true">
-              The version of firmware will be selected based on global settings of Mikrowizard Update strategy.
-              <br/>
-              Please check settings page for more info and configuration
-            </c-form-feedback>
-          </c-input-group>
-          <c-input-group
-          *ngIf="firms_loaded && SelectedTask['task_type']=='firmware' && SelectedTask['data']['strategy']=='latest'">
-
-          <c-form-feedback style="display: block;color: #48515a;margin-top: 0;" [valid]="true">
-            The version of firmware will be selected based on latest availble version from Mikrotik website!.
-              <br/>
-              <b>V6 Firmware update Behavior</b> and <b>safe install</b> is based on global Mikrowizard setting.(check settings page)
-              <br/>
-              <code style="padding: 0!important;">**with this option MikroWizard will download latest availble firmware from mikrotik.com. Please keep in mind that server needs internet access to mikrotik.com</code></c-form-feedback>
-          </c-input-group>
-          <c-input-group
-            *ngIf="firms_loaded && SelectedTask['task_type']=='firmware' && SelectedTask['data']['strategy']=='defined'">
-            <c-input-group class="mb-3">
-              <label cInputGroupText for="inputGroupSelect01">
-                Firmware version to install
-              </label>
-              <select cSelect [(ngModel)]="SelectedTask['data']['version_to_install']" id="inputGroupSelect01">
-                <option>Choose...</option>
-                <option *ngFor="let f of available_firmwares" [value]="f">{{f}}</option>
-
-              </select>
-              <c-form-feedback style="display: block;color: #979797;margin-top: 0;" [valid]="true">
-                * The version of firmware to install routers</c-form-feedback>
-            </c-input-group>
-
-            <c-input-group *ngIf="updateBehavior=='keep'" >
-              <label cInputGroupText for="inputGroupSelect01">
-                Firmware version v6 to install
-              </label>
-              <select cSelect [(ngModel)]="SelectedTask['data']['version_to_install_6']" id="inputGroupSelect01">
-                <option>Choose...</option>
-                <option *ngFor="let f of available_firmwaresv6" [value]="f">{{f}}</option>
-              </select>
-              <c-form-feedback style="display: block;color: #979797;margin-top: 0;" [valid]="true">
-                * The version of firmware to install on V6 routers</c-form-feedback>
-            </c-input-group>
-          </c-input-group>
-        </c-card-body>
-      </c-card>
-      <c-input-group class="mb-3">
-        <ngx-super-select *ngIf="SelectedTask['task_type']=='snippet'" [dataSource]="Snippets" [options]="options"
-          (selectionChanged)="onSelectValueChanged($event)" [selectedItemValues]="[SelectedTask['snippetid']]"
-          (searchChanged)="onSnippetsValueChanged($event)" class="styled"></ngx-super-select>
-      </c-input-group>
-
-      <div [cFormFloating]="true" class="mb-3">
-        <input cFormControl id="floatingInput" placeholder="SelectedTask['name']" [(ngModel)]="SelectedTask['cron']" />
-        <label cLabel for="floatingInput">cron</label>
+      
+      <!-- Schedule Configuration -->
+      <div class="schedule-section mb-4">
+        <div class="section-header mb-3">
+          <h6 class="section-title mb-1"><i class="fa-solid fa-clock me-2"></i>Schedule Configuration</h6>
+          <small class="text-muted">Set when this task should run automatically</small>
+        </div>
+        <div class="cron-input-wrapper">
+          <label class="form-label">Execution Schedule (Cron Expression)</label>
+          <div class="search-select-wrapper">
+            <div class="input-group">
+              <input cFormControl 
+                [(ngModel)]="SelectedTask['cron']" 
+                (input)="onCronInputChange($event)"
+                (focus)="onCronInputFocus()"
+                (blur)="hideCronDropdown()"
+                placeholder="Enter cron expression or search presets..."
+                class="search-input"
+                autocomplete="off" />
+              <button class="btn btn-outline-secondary" type="button" (click)="onCronInputFocus()" title="Show presets">
+                <i class="fa-solid fa-clock"></i>
+              </button>
+            </div>
+            <div *ngIf="showCronDropdown && filteredCrons.length > 0" class="search-dropdown cron-dropdown">
+              <div *ngFor="let cron of filteredCrons" 
+                class="search-option cron-option" 
+                [class.selected]="selectedCronPreset?.value === cron.value"
+                (mousedown)="selectCron(cron)">
+                <div class="cron-label">{{cron.label}}</div>
+                <div class="cron-value">{{cron.value}}</div>
+                <div class="cron-description">{{cron.description}}</div>
+              </div>
+            </div>
+            <div *ngIf="showCronDropdown && filteredCrons.length === 0 && cronSearch" class="search-no-results">
+              No matching cron presets found
+            </div>
+          </div>
+          <small class="text-muted mt-1 d-block">
+            <i class="fa-solid fa-info-circle me-1"></i>{{getCronDescription()}}
+          </small>
+          <div class="mt-2">
+            <small class="text-muted">
+              <strong>Quick Examples:</strong> 
+              <code class="me-2">* * * * *</code> = every minute | 
+              <code class="me-2">0 2 * * *</code> = daily at 2 AM | 
+              <code class="me-2">0 */6 * * *</code> = every 6 hours
+            </small>
+          </div>
+        </div>
       </div>
+      
+      <!-- Target Selection -->
+      <div class="target-section mb-4">
+        <div class="section-header mb-3">
+          <h6 class="section-title mb-1"><i class="fa-solid fa-bullseye me-2"></i>Target Selection</h6>
+          <small class="text-muted">Choose which devices or groups this task will affect</small>
+        </div>
+        <div class="target-type-selector mb-3">
+          <c-button-group role="group" class="w-100">
+            <button cButton [active]="SelectedTask['selection_type']=='devices'" 
+              (click)="SelectedTask['selection_type']='devices'; form_changed()" 
+              color="primary" variant="outline" class="flex-fill">
+              <i class="fa-solid fa-server me-1"></i>Individual Devices
+            </button>
+            <button cButton [active]="SelectedTask['selection_type']=='groups'" 
+              (click)="SelectedTask['selection_type']='groups'; form_changed()" 
+              color="info" variant="outline" class="flex-fill">
+              <i class="fa-solid fa-layer-group me-1"></i>Device Groups
+            </button>
+          </c-button-group>
+        </div>
 
-      <c-input-group class="mb-3">
-        <label cInputGroupText for="inputGroupSelect01">
-          Member type
-        </label>
-        <select cSelect id="inputGroupSelect01" (change)="form_changed()" [(ngModel)]="SelectedTask['selection_type']">
-          <option value="devices">Devices</option>
-          <option value="groups">Groups</option>
-        </select>
-      </c-input-group>
-
-      <h5>Members :</h5>
-      <gui-grid [autoResizeWidth]="true" [source]="SelectedMembers" [columnMenu]="columnMenu" [sorting]="sorting"
-        [infoPanel]="infoPanel" [rowSelection]="rowSelection" [autoResizeWidth]=true [paging]="paging">
-        <gui-grid-column header="Name" field="name">
-          <ng-template let-value="item.name" let-item="item" let-index="index">
-            &nbsp; {{value}} </ng-template>
-        </gui-grid-column>
-        <gui-grid-column *ngIf="SelectedTask['selection_type']=='devices'" header="MAC" field="mac">
-          <ng-template let-value="item.mac" let-item="item" let-index="index">
-            {{value}}
-          </ng-template>
-        </gui-grid-column>
-        <gui-grid-column header="Actions" width="120" field="action">
-          <ng-template let-value="item.id" let-item="item" let-index="index">
-            <button cButton color="danger" size="sm" (click)="remove_member(item)"><i
-                class="fa-regular fa-trash-can"></i></button>
-          </ng-template>
-        </gui-grid-column>
-      </gui-grid>
-      <hr />
-      <button cButton color="primary" (click)="show_new_member_form()">+ Add new Members</button>
+        <!-- Selected Targets -->
+        <c-card>
+          <c-card-header class="d-flex justify-content-between align-items-center">
+            <h6 class="mb-0">
+              <i class="fa-solid fa-list me-2"></i>Selected {{SelectedTask['selection_type'] === 'devices' ? 'Devices' : 'Groups'}}
+            </h6>
+            <div>
+              <c-badge color="info" class="me-2">{{SelectedMembers.length}} selected</c-badge>
+              <button cButton color="success" size="sm" (click)="show_new_member_form()">
+                <i class="fa-solid fa-plus me-1"></i>Add {{SelectedTask['selection_type'] === 'devices' ? 'Devices' : 'Groups'}}
+              </button>
+            </div>
+          </c-card-header>
+          <c-card-body class="p-0">
+            <div *ngIf="SelectedMembers.length === 0" class="text-center p-4 text-muted">
+              <i class="fa-solid fa-{{SelectedTask['selection_type'] === 'devices' ? 'server' : 'layer-group'}} fa-3x mb-3 opacity-50"></i>
+              <h6>No {{SelectedTask['selection_type']}} selected</h6>
+              <p class="mb-0">Click "Add {{SelectedTask['selection_type'] === 'devices' ? 'Devices' : 'Groups'}}" to select targets for this task</p>
+            </div>
+            <div *ngIf="SelectedMembers.length > 0">
+              <gui-grid [autoResizeWidth]="true" [source]="SelectedMembers" [columnMenu]="columnMenu" [sorting]="sorting"
+                [infoPanel]="infoPanel" [autoResizeWidth]=true [paging]="paging">
+                <gui-grid-column header="Name" field="name">
+                  <ng-template let-value="item.name" let-item="item" let-index="index">
+                    <div class="d-flex align-items-center">
+                      <i class="fa-solid fa-{{SelectedTask['selection_type'] === 'devices' ? 'server' : 'layer-group'}} me-2 text-primary"></i>
+                      <strong>{{value}}</strong>
+                    </div>
+                  </ng-template>
+                </gui-grid-column>
+                <gui-grid-column *ngIf="SelectedTask['selection_type']=='devices'" header="MAC Address" field="mac">
+                  <ng-template let-value="item.mac" let-item="item" let-index="index">
+                    <small class="text-muted">{{value}}</small>
+                  </ng-template>
+                </gui-grid-column>
+                <gui-grid-column header="Actions" width="100" field="action" align="CENTER">
+                  <ng-template let-value="item.id" let-item="item" let-index="index">
+                    <button cButton color="danger" size="sm" variant="outline" (click)="remove_member(item)" title="Remove from task">
+                      <i class="fa-solid fa-times"></i>
+                    </button>
+                  </ng-template>
+                </gui-grid-column>
+              </gui-grid>
+            </div>
+          </c-card-body>
+        </c-card>
+      </div>
       <!--
   <c-input-group class="mb-3">
     <ngx-super-select
@@ -220,54 +329,96 @@
   -->
 
     </c-modal-body>
-    <c-modal-footer>
-      <button *ngIf="SelectedTask['action']=='add'" (click)="submit('add')" cButton color="primary">Add</button>
-      <button *ngIf="SelectedTask['action']=='edit'" (click)="submit('edit')" cButton color="primary">save</button>
-      <button [cModalToggle]="EditTaskModal.id" cButton color="secondary">
-        Close
-      </button>
+    <c-modal-footer class="bg-light d-flex justify-content-between">
+      <div>
+        <small class="text-muted">All fields marked with * are required</small>
+      </div>
+      <div>
+        <button *ngIf="SelectedTask['action']=='add'" (click)="submit('add')" cButton color="primary">
+          <i class="fa-solid fa-plus me-1"></i>Create Task
+        </button>
+        <button *ngIf="SelectedTask['action']=='edit'" (click)="submit('edit')" cButton color="primary">
+          <i class="fa-solid fa-save me-1"></i>Save Changes
+        </button>
+        <button [cModalToggle]="EditTaskModal.id" cButton color="secondary" class="ms-2">
+          <i class="fa-solid fa-times me-1"></i>Cancel
+        </button>
+      </div>
     </c-modal-footer>
   </c-modal>
 
 
-  <c-modal #NewMemberModal backdrop="static" size="lg" [(visible)]="NewMemberModalVisible" id="NewMemberModal">
-    <c-modal-header>
-      <h5 cModalTitle>Editing Group </h5>
+  <c-modal #NewMemberModal backdrop="static" size="xl" [(visible)]="NewMemberModalVisible" id="NewMemberModal">
+    <c-modal-header class="bg-success text-white">
+      <h5 cModalTitle>
+        <i class="fa-solid fa-plus-circle me-2"></i>Add {{SelectedTask['selection_type'] === 'devices' ? 'Devices' : 'Groups'}} to Task
+      </h5>
       <button (click)="NewMemberModalVisible=!NewMemberModalVisible" cButtonClose></button>
     </c-modal-header>
-    <c-modal-body>
-      <c-input-group class="mb-3">
-        <h5>Group Members :</h5>
-        <gui-grid [autoResizeWidth]="true" *ngIf="NewMemberModalVisible" [searching]="searching"
-          [source]="availbleMembers" [columnMenu]="columnMenu" [sorting]="sorting" [infoPanel]="infoPanel"
-          [rowSelection]="rowSelection" (selectedRows)="onSelectedRowsNewMembers($event)" [autoResizeWidth]=true
-          [paging]="paging">
-          <gui-grid-column header="Member Name" field="name">
-            <ng-template let-value="item.name" let-item="item" let-index="index">
-              &nbsp; {{value}} </ng-template>
-          </gui-grid-column>
-          <gui-grid-column *ngIf="SelectedTask['selection_type']=='devices'" header="IP Address" field="ip">
-            <ng-template let-value="item.ip" let-item="item" let-index="index">
-              {{value}}
-            </ng-template>
-          </gui-grid-column>
-          <gui-grid-column *ngIf="SelectedTask['selection_type']=='devices'" header="MAC Address" field="mac">
-            <ng-template let-value="item.mac" let-item="item" let-index="index">
-              {{value}}
-            </ng-template>
-          </gui-grid-column>
-        </gui-grid>
-        <br />
-      </c-input-group>
-      <hr />
+    <c-modal-body class="p-4">
+      <!-- Selection Summary -->
+      <div class="mb-3" style="min-height: 58px;">
+        <c-alert *ngIf="NewMemberRows.length > 0" color="info" class="d-flex align-items-center mb-0">
+          <i class="fa-solid fa-info-circle me-2"></i>
+          <span><strong>{{NewMemberRows.length}}</strong> {{SelectedTask['selection_type']}}(s) selected for addition to this task</span>
+        </c-alert>
+      </div>
+
+      <!-- Available Items -->
+      <c-card>
+        <c-card-header>
+          <h6 class="mb-0">
+            <i class="fa-solid fa-{{SelectedTask['selection_type'] === 'devices' ? 'server' : 'layer-group'}} me-2"></i>
+            Available {{SelectedTask['selection_type'] === 'devices' ? 'Devices' : 'Groups'}} ({{availbleMembers.length}} total)
+          </h6>
+        </c-card-header>
+        <c-card-body class="p-0">
+          <div *ngIf="availbleMembers.length === 0" class="text-center p-4 text-muted">
+            <i class="fa-solid fa-check-circle fa-3x mb-3 text-success opacity-50"></i>
+            <h6>All {{SelectedTask['selection_type']}} are already assigned</h6>
+            <p class="mb-0">No available {{SelectedTask['selection_type']}} to add to this task</p>
+          </div>
+          <div *ngIf="availbleMembers.length > 0">
+            <gui-grid [autoResizeWidth]="true" *ngIf="NewMemberModalVisible" [searching]="searching"
+              [source]="availbleMembers" [columnMenu]="columnMenu" [sorting]="sorting" [infoPanel]="infoPanel"
+              [rowSelection]="rowSelection" (selectedRows)="onSelectedRowsNewMembers($event)" [autoResizeWidth]=true
+              [paging]="paging">
+              <gui-grid-column header="Name" field="name">
+                <ng-template let-value="item.name" let-item="item" let-index="index">
+                  <div class="d-flex align-items-center">
+                    <i class="fa-solid fa-{{SelectedTask['selection_type'] === 'devices' ? 'server' : 'layer-group'}} me-2 text-primary"></i>
+                    <strong>{{value}}</strong>
+                  </div>
+                </ng-template>
+              </gui-grid-column>
+              <gui-grid-column *ngIf="SelectedTask['selection_type']=='devices'" header="IP Address" field="ip">
+                <ng-template let-value="item.ip" let-item="item" let-index="index">
+                  <c-badge color="secondary">{{value}}</c-badge>
+                </ng-template>
+              </gui-grid-column>
+              <gui-grid-column *ngIf="SelectedTask['selection_type']=='devices'" header="MAC Address" field="mac">
+                <ng-template let-value="item.mac" let-item="item" let-index="index">
+                  <small class="text-muted">{{value}}</small>
+                </ng-template>
+              </gui-grid-column>
+            </gui-grid>
+          </div>
+        </c-card-body>
+      </c-card>
     </c-modal-body>
 
-    <c-modal-footer>
-      <button *ngIf="NewMemberRows.length!= 0" (click)="add_new_members()" cButton color="primary">Add {{
-        NewMemberRows.length }}</button>
-      <button (click)="NewMemberModalVisible=!NewMemberModalVisible" cButton color="secondary">
-        Close
-      </button>
+    <c-modal-footer class="bg-light d-flex justify-content-between">
+      <div>
+        <small class="text-muted">Select {{SelectedTask['selection_type']}} from the list above to add them to this task</small>
+      </div>
+      <div>
+        <button *ngIf="NewMemberRows.length > 0" (click)="add_new_members()" cButton color="success">
+          <i class="fa-solid fa-plus me-1"></i>Add {{NewMemberRows.length}} {{SelectedTask['selection_type']}}(s)
+        </button>
+        <button (click)="NewMemberModalVisible=!NewMemberModalVisible" cButton color="secondary" class="ms-2">
+          <i class="fa-solid fa-times me-1"></i>Cancel
+        </button>
+      </div>
     </c-modal-footer>
   </c-modal>
 
@@ -340,4 +491,6 @@
         Close
       </button>
     </c-modal-footer>
-  </c-modal>
\ No newline at end of file
+  </c-modal>
+ 
+<c-toaster position="fixed" placement="top-end"></c-toaster>
\ No newline at end of file
diff --git a/src/app/views/user_tasks/user_tasks.component.scss b/src/app/views/user_tasks/user_tasks.component.scss
new file mode 100644
index 0000000..ccea1e6
--- /dev/null
+++ b/src/app/views/user_tasks/user_tasks.component.scss
@@ -0,0 +1,371 @@
+/* Task Form Sections */
+.task-form-section, .task-config-section, .schedule-section, .target-section {
+  border: 1px solid #e9ecef;
+  border-radius: 6px;
+  padding: 0.75rem;
+  background: #f8f9fa;
+}
+
+.section-header {
+  border-bottom: 1px solid #dee2e6;
+  padding-bottom: 0.375rem;
+  margin-bottom: 0.75rem;
+}
+
+.section-title {
+  color: #495057;
+  font-weight: 600;
+  font-size: 0.875rem;
+}
+
+/* Form Inputs */
+.form-input {
+  border: 1px solid #ced4da;
+  border-radius: 4px;
+  padding: 0.375rem 0.75rem;
+  font-size: 0.875rem;
+  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+}
+
+.form-input:focus {
+  border-color: #80bdff;
+  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+}
+
+/* Strategy Buttons */
+.strategy-buttons .btn-group {
+  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+}
+
+.strategy-buttons button {
+  font-size: 0.8rem;
+  padding: 0.375rem 0.75rem;
+}
+
+/* Cron Dropdown Styles */
+.cron-input-wrapper {
+  position: relative;
+}
+
+.input-group {
+  position: relative;
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: stretch;
+  width: 100%;
+}
+
+.input-group .search-input {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  border-right: none;
+  flex: 1;
+}
+
+.input-group .btn {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  border-left: 1px solid #ced4da;
+  flex-shrink: 0;
+}
+
+.search-select-wrapper {
+  position: relative;
+  width: 100%;
+}
+
+.search-input {
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid #ced4da;
+  border-radius: 6px;
+  font-size: 0.9rem;
+  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+}
+
+.search-input:focus {
+  border-color: #80bdff;
+  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+  outline: 0;
+}
+
+.search-dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  background: white;
+  border: 1px solid #ced4da;
+  border-top: none;
+  border-radius: 0 0 6px 6px;
+  max-height: 300px;
+  overflow-y: auto;
+  z-index: 1000;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.search-option {
+  padding: 0.5rem 0.75rem;
+  cursor: pointer;
+  border-bottom: 1px solid #f8f9fa;
+  transition: background-color 0.15s ease-in-out;
+}
+
+.search-option:hover {
+  background-color: #f8f9fa;
+}
+
+.search-option:last-child {
+  border-bottom: none;
+}
+
+.search-no-results {
+  padding: 0.75rem;
+  text-align: center;
+  color: #6c757d;
+  font-style: italic;
+}
+
+/* Cron-specific dropdown styles */
+.cron-dropdown {
+  max-height: 400px;
+}
+
+.cron-option {
+  padding: 0.75rem;
+  border-bottom: 1px solid #e9ecef;
+}
+
+.cron-option:hover {
+  background-color: #e3f2fd;
+}
+
+.cron-option.selected {
+  background-color: #bbdefb;
+  border-left: 4px solid #2196f3;
+}
+
+.cron-option.selected:hover {
+  background-color: #90caf9;
+}
+
+.cron-label {
+  font-weight: 600;
+  color: #495057;
+  font-size: 0.9rem;
+}
+
+.cron-value {
+  font-family: 'Courier New', monospace;
+  color: #007bff;
+  font-size: 0.85rem;
+  margin: 0.25rem 0;
+  background: #f8f9fa;
+  padding: 0.25rem 0.5rem;
+  border-radius: 4px;
+  display: inline-block;
+}
+
+.cron-description {
+  color: #6c757d;
+  font-size: 0.8rem;
+  font-style: italic;
+}
+
+/* Target Type Selector */
+.target-type-selector .btn-group {
+  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+}
+
+.target-type-selector button {
+  font-size: 0.8rem;
+  padding: 0.375rem 0.75rem;
+}
+
+/* Card Enhancements */
+.c-card {
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+  border: 1px solid #e9ecef;
+}
+
+.c-card-header {
+  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
+  border-bottom: 1px solid #dee2e6;
+  font-weight: 600;
+}
+
+/* Alert Enhancements */
+.alert {
+  border-radius: 8px;
+  border: none;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+.alert-info {
+  background: linear-gradient(135deg, #d1ecf1 0%, #bee5eb 100%);
+  color: #0c5460;
+}
+
+.alert-success {
+  background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
+  color: #155724;
+}
+
+.alert-warning {
+  background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
+  color: #856404;
+}
+
+/* Badge Enhancements */
+.badge {
+  font-size: 0.7rem;
+  padding: 0.25em 0.5em;
+  border-radius: 4px;
+}
+
+/* Button Enhancements */
+.btn {
+  border-radius: 4px;
+  font-weight: 500;
+  transition: all 0.15s ease-in-out;
+}
+
+.btn-sm {
+  padding: 0.25rem 0.5rem;
+  font-size: 0.8rem;
+}
+
+.btn:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
+}
+
+/* Modal Enhancements */
+.modal-header {
+  border-bottom: 1px solid #dee2e6;
+  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
+}
+
+.modal-footer {
+  border-top: 1px solid #dee2e6;
+  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
+}
+
+/* Grid Enhancements */
+.gui-grid {
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .task-form-section, .task-config-section, .schedule-section, .target-section {
+    padding: 0.5rem;
+  }
+  
+  .section-title {
+    font-size: 0.8rem;
+  }
+  
+  .strategy-buttons button,
+  .target-type-selector button {
+    font-size: 0.75rem;
+    padding: 0.25rem 0.5rem;
+  }
+  
+  .form-input {
+    padding: 0.25rem 0.5rem;
+    font-size: 0.8rem;
+  }
+  
+  .cron-label {
+    font-size: 0.8rem;
+  }
+  
+  .cron-value {
+    font-size: 0.75rem;
+  }
+  
+  .cron-description {
+    font-size: 0.7rem;
+  }
+  
+  .c-modal-body {
+    padding: 0.75rem !important;
+  }
+}
+
+@media (max-width: 576px) {
+  .task-form-section, .task-config-section, .schedule-section, .target-section {
+    padding: 0.375rem;
+    margin-bottom: 0.75rem;
+  }
+  
+  .section-header {
+    margin-bottom: 0.5rem;
+  }
+  
+  .strategy-buttons button,
+  .target-type-selector button {
+    font-size: 0.7rem;
+    padding: 0.25rem 0.375rem;
+  }
+  
+  .input-group .btn {
+    padding: 0.25rem 0.5rem;
+    font-size: 0.8rem;
+  }
+}
+
+/* Animation for smooth transitions */
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(-10px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.search-dropdown {
+  animation: fadeIn 0.2s ease-out;
+}
+
+/* Focus states for accessibility */
+.search-option:focus,
+.cron-option:focus {
+  outline: 2px solid #007bff;
+  outline-offset: -2px;
+  background-color: #e3f2fd;
+}
+
+/* Loading states */
+.loading-spinner {
+  display: inline-block;
+  width: 1rem;
+  height: 1rem;
+  border: 2px solid #f3f3f3;
+  border-top: 2px solid #007bff;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+/* Code examples */
+code {
+  background-color: #f8f9fa;
+  color: #e83e8c;
+  padding: 0.2em 0.4em;
+  border-radius: 3px;
+  font-size: 0.875em;
+  font-family: 'Courier New', monospace;
+}
+
+/* Improved spacing */
+.mt-1 { margin-top: 0.25rem !important; }
+.mt-2 { margin-top: 0.5rem !important; }
+.me-1 { margin-right: 0.25rem !important; }
+.me-2 { margin-right: 0.5rem !important; }
+.ms-2 { margin-left: 0.5rem !important; }
+.d-block { display: block !important; }
\ No newline at end of file
diff --git a/src/app/views/user_tasks/user_tasks.component.ts b/src/app/views/user_tasks/user_tasks.component.ts
index 63d6163..b19e2e6 100644
--- a/src/app/views/user_tasks/user_tasks.component.ts
+++ b/src/app/views/user_tasks/user_tasks.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy } from "@angular/core";
+import { Component, OnInit, OnDestroy, QueryList, ViewChildren } from "@angular/core";
 import { dataProvider } from "../../providers/mikrowizard/data";
 import { Router } from "@angular/router";
 import { loginChecker } from "../../providers/login_checker";
@@ -16,16 +16,28 @@ import {
 } from "@generic-ui/ngx-grid";
 import { NgxSuperSelectOptions } from "ngx-super-select";
 import { _getFocusedElementPierceShadowDom } from "@angular/cdk/platform";
+import { AppToastComponent } from "../toast-simple/toast.component";
+import { ToasterComponent } from "@coreui/angular";
 
 
 @Component({
   templateUrl: "user_tasks.component.html",
+  styleUrls: ["user_tasks.component.scss"]
 })
 export class UserTasksComponent implements OnInit {
   public uid: number;
   public uname: string;
   public ispro: boolean = false;
 
+  @ViewChildren(ToasterComponent) viewChildren!: QueryList<ToasterComponent>;
+  toasterForm = {
+    autohide: true,
+    delay: 10000,
+    position: "fixed",
+    fade: true,
+    closeButton: true,
+  };
+
   constructor(
     private data_provider: dataProvider,
     private router: Router,
@@ -76,6 +88,55 @@ export class UserTasksComponent implements OnInit {
   public firmwaretoinstallv6: string = "none";
   public updateBehavior: string = "keep";
   public firms_loaded: boolean = false;
+  public predefinedCrons: any[] = [
+    // High Frequency Monitoring
+    { label: 'Every minute', value: '* * * * *', description: 'Critical monitoring - runs every minute' },
+    { label: 'Every 2 minutes', value: '*/2 * * * *', description: 'High frequency monitoring' },
+    { label: 'Every 5 minutes', value: '*/5 * * * *', description: 'Standard monitoring interval' },
+    { label: 'Every 10 minutes', value: '*/10 * * * *', description: 'Regular monitoring checks' },
+    { label: 'Every 15 minutes', value: '*/15 * * * *', description: 'Moderate monitoring frequency' },
+    { label: 'Every 30 minutes', value: '*/30 * * * *', description: 'Low frequency monitoring' },
+    
+    // Hourly Operations
+    { label: 'Every hour', value: '0 * * * *', description: 'Hourly network checks' },
+    { label: 'Every 2 hours', value: '0 */2 * * *', description: 'Bi-hourly operations' },
+    { label: 'Every 4 hours', value: '0 */4 * * *', description: 'Quarterly daily checks' },
+    { label: 'Every 6 hours', value: '0 */6 * * *', description: 'Four times daily' },
+    { label: 'Every 8 hours', value: '0 */8 * * *', description: 'Three times daily' },
+    { label: 'Every 12 hours', value: '0 */12 * * *', description: 'Twice daily operations' },
+    
+    // Daily Maintenance
+    { label: 'Daily at midnight', value: '0 0 * * *', description: 'Daily maintenance at 00:00' },
+    { label: 'Daily at 1 AM', value: '0 1 * * *', description: 'Daily backup at 01:00' },
+    { label: 'Daily at 2 AM', value: '0 2 * * *', description: 'Daily maintenance at 02:00' },
+    { label: 'Daily at 3 AM', value: '0 3 * * *', description: 'Low traffic maintenance at 03:00' },
+    { label: 'Daily at 6 AM', value: '0 6 * * *', description: 'Pre-business hours check' },
+    { label: 'Daily at 6 PM', value: '0 18 * * *', description: 'End of business day backup' },
+    { label: 'Daily at 10 PM', value: '0 22 * * *', description: 'Evening maintenance at 22:00' },
+    
+    // Business Hours
+    { label: 'Workdays at 8 AM', value: '0 8 * * 1-5', description: 'Start of business day - Mon to Fri' },
+    { label: 'Workdays at 9 AM', value: '0 9 * * 1-5', description: 'Business hours start check' },
+    { label: 'Workdays at 12 PM', value: '0 12 * * 1-5', description: 'Midday check - Mon to Fri' },
+    { label: 'Workdays at 5 PM', value: '0 17 * * 1-5', description: 'End of business day - Mon to Fri' },
+    { label: 'Workdays at 6 PM', value: '0 18 * * 1-5', description: 'After hours backup - Mon to Fri' },
+    
+    // Weekly Operations
+    { label: 'Weekly (Sunday midnight)', value: '0 0 * * 0', description: 'Weekly maintenance - Sunday 00:00' },
+    { label: 'Weekly (Monday midnight)', value: '0 0 * * 1', description: 'Weekly start - Monday 00:00' },
+    { label: 'Weekly (Friday 6 PM)', value: '0 18 * * 5', description: 'End of week backup - Friday 18:00' },
+    { label: 'Weekly (Saturday 2 AM)', value: '0 2 * * 6', description: 'Weekend maintenance - Saturday 02:00' },
+    
+    // Monthly Operations
+    { label: 'Monthly (1st at midnight)', value: '0 0 1 * *', description: 'Monthly maintenance - 1st of month' },
+    { label: 'Monthly (1st at 2 AM)', value: '0 2 1 * *', description: 'Monthly backup - 1st at 02:00' },
+    { label: 'Monthly (15th at midnight)', value: '0 0 15 * *', description: 'Mid-month maintenance - 15th' },
+    { label: 'Monthly (last day)', value: '0 0 28-31 * *', description: 'End of month operations' }
+  ];
+  public showCronDropdown: boolean = false;
+  public cronSearch: string = '';
+  public selectedCronPreset: any = null;
+  public filteredCrons: any[] = [];
   public sorting = {
     enabled: true,
     multiSorting: true,
@@ -156,22 +217,43 @@ export class UserTasksComponent implements OnInit {
     this.initGridTable();
   }
 
+  show_toast(title: string, body: string, color: string) {
+    const { ...props } = { ...this.toasterForm, color, title, body };
+    const componentRef = this.viewChildren.first.addToast(
+      AppToastComponent,
+      props,
+      {}
+    );
+    componentRef.instance["closeButton"] = props.closeButton;
+  }
+
   submit(action: string) {
     var _self = this;
     if (action == "add") {
       this.data_provider
         .Add_task(_self.SelectedTask, _self.SelectedTaskItems)
         .then((res) => {
-          _self.initGridTable();
+          if (res && res.status === 'failed') {
+            _self.show_toast("Error", res.err, "danger");
+          } else {
+            _self.show_toast("Success", "Task created successfully", "success");
+            _self.initGridTable();
+            _self.EditTaskModalVisible = false;
+          }
         });
     } else {
       this.data_provider
         .Edit_task(_self.SelectedTask, _self.SelectedTaskItems)
         .then((res) => {
-          _self.initGridTable();
+          if (res && res.status === 'failed') {
+            _self.show_toast("Error", res.err, "danger");
+          } else {
+            _self.show_toast("Success", "Task updated successfully", "success");
+            _self.initGridTable();
+            _self.EditTaskModalVisible = false;
+          }
         });
     }
-    this.EditTaskModalVisible = false;
   }
 
   onSelectedRowsNewMembers(rows: Array<GuiSelectedRow>): void {
@@ -197,7 +279,7 @@ export class UserTasksComponent implements OnInit {
       this.SelectedTask = {
         id: 0,
         action: "add",
-        taskcron: "* * * * *",
+        cron: "0 2 * * *",
         desc_cron: "",
         description: "",
         members: "",
@@ -206,7 +288,9 @@ export class UserTasksComponent implements OnInit {
         snippetid: "",
         task_type: "backup",
       };
-      this.SelectedTask['data'] = { 'strategy': 'system', 'version_to_install': '', 'version_to_install_6': '' }
+      this.SelectedTask['data'] = { 'strategy': 'system', 'version_to_install': '', 'version_to_install_6': '' };
+      this.cronSearch = '';
+      this.selectedCronPreset = null;
       this.SelectedMembers = [];
       this.SelectedTaskItems = [];
       this.EditTaskModalVisible = true;
@@ -215,6 +299,12 @@ export class UserTasksComponent implements OnInit {
 
     var _self = this;
     this.SelectedTask = { ...item };
+    
+    // Initialize cron search and preset tracking
+    this.cronSearch = '';
+    const currentCron = this.SelectedTask['cron'];
+    this.selectedCronPreset = this.predefinedCrons.find(cron => cron.value === currentCron) || null;
+    
     if (this.SelectedTask['task_type'] == 'firmware' && 'data' in this.SelectedTask && this.SelectedTask['data']) {
       this.SelectedTask['data'] = JSON.parse(this.SelectedTask['data']);
       if (this.SelectedTask['data']['strategy'] == 'defined') {
@@ -243,7 +333,7 @@ export class UserTasksComponent implements OnInit {
       }
 
     }
-    _self.data_provider.get_snippets("", "", "", 0, 1000).then((res) => {
+    _self.data_provider.get_snippets("", "", "", 0, 1000,false).then((res) => {
       _self.Snippets = res.map((x: any) => {
         return { id: x.id, name: x.name };
       });
@@ -315,7 +405,7 @@ export class UserTasksComponent implements OnInit {
   onSnippetsValueChanged(v: any) {
     var _self = this;
     if (v == "" || v.length < 3) return;
-    _self.data_provider.get_snippets(v, "", "", 0, 1000).then((res) => {
+    _self.data_provider.get_snippets(v, "", "", 0, 1000,false).then((res) => {
       _self.Snippets = res.map((x: any) => {
         return { id: String(x.id), name: x.name };
       });
@@ -333,7 +423,12 @@ export class UserTasksComponent implements OnInit {
     } else {
       var _self = this;
       this.data_provider.Delete_task(_self.SelectedTask["id"]).then((res) => {
-        _self.initGridTable();
+        if (res && res.status === 'failed') {
+          _self.show_toast("Error", res.err, "danger");
+        } else {
+          _self.show_toast("Success", "Task deleted successfully", "success");
+          _self.initGridTable();
+        }
         _self.DeleteConfirmModalVisible = false;
       });
     }
@@ -363,4 +458,79 @@ export class UserTasksComponent implements OnInit {
       _self.loading = false;
     });
   }
+
+  selectCron(cron: any): void {
+    this.SelectedTask['cron'] = cron.value;
+    this.selectedCronPreset = cron;
+    this.cronSearch = '';
+    this.showCronDropdown = false;
+  }
+
+  filterCrons(event: any): void {
+    const searchTerm = event.target.value.toLowerCase();
+    this.cronSearch = searchTerm;
+    this.selectedCronPreset = null;
+    
+    if (searchTerm.length > 0) {
+      this.filteredCrons = this.predefinedCrons.filter(cron => 
+        cron.label.toLowerCase().includes(searchTerm) || 
+        cron.description.toLowerCase().includes(searchTerm) ||
+        cron.value.includes(searchTerm)
+      );
+    } else {
+      this.filteredCrons = this.predefinedCrons;
+    }
+  }
+
+  hideCronDropdown(): void {
+    setTimeout(() => {
+      this.showCronDropdown = false;
+    }, 200);
+  }
+
+  onCronInputFocus(): void {
+    this.filteredCrons = this.predefinedCrons;
+    this.showCronDropdown = true;
+    
+    // If current cron matches a preset, highlight it
+    const currentCron = this.SelectedTask['cron'];
+    this.selectedCronPreset = this.predefinedCrons.find(cron => cron.value === currentCron) || null;
+  }
+
+  onCronInputChange(event: any): void {
+    this.SelectedTask['cron'] = event.target.value;
+    this.selectedCronPreset = null;
+    
+    // Check if the entered value matches any preset
+    const enteredValue = event.target.value;
+    const matchingPreset = this.predefinedCrons.find(cron => cron.value === enteredValue);
+    if (matchingPreset) {
+      this.selectedCronPreset = matchingPreset;
+    }
+  }
+
+  getCronDescription(): string {
+    if (this.selectedCronPreset) {
+      return this.selectedCronPreset.description;
+    }
+    
+    const currentCron = this.SelectedTask['cron'];
+    const matchingPreset = this.predefinedCrons.find(cron => cron.value === currentCron);
+    return matchingPreset ? matchingPreset.description : 'Custom cron expression';
+  }
+
+  onTaskTypeChange(): void {
+    if (this.SelectedTask['task_type'] === 'snippet') {
+      this.loadSnippets();
+    }
+  }
+
+  loadSnippets(): void {
+    var _self = this;
+    _self.data_provider.get_snippets("", "", "", 0, 10).then((res) => {
+      _self.Snippets = res.map((x: any) => {
+        return { id: x.id, name: x.name };
+      });
+    });
+  }
 }
diff --git a/src/app/views/user_tasks/user_tasks.module.ts b/src/app/views/user_tasks/user_tasks.module.ts
index fdc3f47..e59ef63 100644
--- a/src/app/views/user_tasks/user_tasks.module.ts
+++ b/src/app/views/user_tasks/user_tasks.module.ts
@@ -9,6 +9,9 @@ import {
   GridModule,
   ModalModule,
   ButtonGroupModule,
+  BadgeModule,
+  AlertModule,
+  ToastModule,
 } from "@coreui/angular";
 import { UserTasksRoutingModule } from "./user_tasks-routing.module";
 import { UserTasksComponent } from "./user_tasks.component";
@@ -25,6 +28,9 @@ import { NgxSuperSelectModule} from "ngx-super-select";
     FormModule,
     ButtonModule,
     ButtonGroupModule,
+    BadgeModule,
+    AlertModule,
+    ToastModule,
     GuiGridModule,
     ModalModule,
     ReactiveFormsModule,

From cdc2e0cabf22c59ebd97138ab464032445e38eaf Mon Sep 17 00:00:00 2001
From: sepehr <sepehr.ha@gmail.com>
Date: Thu, 16 Oct 2025 17:33:57 +0300
Subject: [PATCH 09/15] feat: redesign sync and cloner interface for pro users

- Complete UI/UX overhaul of cloner module
- Enhanced configuration synchronization
- Pro feature improvements
- Better cloning workflow and interface
---
 src/app/views/cloner/cloner-styles.scss    | 494 +++++++++++++++++++++
 src/app/views/cloner/cloner.component.html | 386 ++++++++++------
 src/app/views/cloner/cloner.component.ts   |  31 +-
 src/app/views/cloner/cloner.module.ts      |   7 +-
 src/app/views/cloner/cloner.scss           |   1 +
 5 files changed, 783 insertions(+), 136 deletions(-)
 create mode 100644 src/app/views/cloner/cloner-styles.scss

diff --git a/src/app/views/cloner/cloner-styles.scss b/src/app/views/cloner/cloner-styles.scss
new file mode 100644
index 0000000..dd8953e
--- /dev/null
+++ b/src/app/views/cloner/cloner-styles.scss
@@ -0,0 +1,494 @@
+/* Modern Cloner Component Styles */
+
+/* Form Sections */
+.cloner-form-section {
+  border-radius: 6px;
+  background: #f8f9fa;
+  padding: 0.75rem;
+  border: 1px solid #e9ecef;
+}
+
+.section-header {
+  border-bottom: 1px solid #e9ecef;
+  padding-bottom: 0.5rem;
+}
+
+.section-title {
+  color: #495057;
+  font-weight: 600;
+  font-size: 0.95rem;
+}
+
+.form-input {
+  border-radius: 6px;
+  border: 1px solid #ced4da;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.9rem;
+  transition: all 0.2s ease;
+}
+
+.form-input-sm {
+  border-radius: 4px;
+  border: 1px solid #ced4da;
+  padding: 0.375rem 0.5rem;
+  font-size: 0.85rem;
+  height: calc(1.5em + 0.75rem + 2px);
+}
+
+.form-input:focus {
+  border-color: #0d6efd;
+  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
+}
+
+.form-label-sm {
+  display: block;
+  font-size: 0.8rem;
+  color: #6c757d;
+  margin-bottom: 0.25rem;
+  font-weight: 500;
+}
+
+.form-label-xs {
+  display: block;
+  font-size: 0.75rem;
+  color: #6c757d;
+  margin-bottom: 0.125rem;
+  font-weight: 500;
+}
+
+.form-select-sm {
+  font-size: 0.85rem;
+  height: calc(1.8em + 0.75rem + 2px);
+  padding: 0.375rem 0.75rem;
+  border-radius: 0.375rem;
+}
+
+.form-select-xs {
+  font-size: 0.8rem;
+  height: calc(1.5em + 0.75rem + 2px);
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.25rem;
+}
+
+/* Commands Configuration */
+.commands-container {
+  background: white;
+  border-radius: 8px;
+  border: 1px solid #dee2e6;
+  overflow: hidden;
+}
+
+.commands-container-compact {
+  background: white;
+  border-radius: 6px;
+  border: 1px solid #dee2e6;
+  overflow: hidden;
+}
+
+.commands-nav {
+  background: #f8f9fa;
+  border-bottom: 2px solid #e9ecef;
+  padding: 0.5rem 1rem;
+}
+
+.commands-nav-compact {
+  background: #f8f9fa;
+  border-bottom: 1px solid #e9ecef;
+  padding: 0.25rem 0.5rem;
+}
+
+.commands-nav .nav-item {
+  margin-bottom: -2px;
+  cursor: pointer;
+}
+
+.commands-nav .nav-link {
+  color: #6c757d;
+  border-style: none none solid;
+  border-width: 2px;
+  position: relative;
+  bottom: -1px;
+  cursor: pointer;
+  padding: 0.5rem 1rem;
+  font-size: 0.9rem;
+  font-weight: 500;
+}
+
+.commands-nav .nav-link:hover,
+.commands-nav .nav-link:focus {
+  border-color: #0d6efd;
+  color: #0d6efd;
+}
+
+.commands-nav .nav-link.active {
+  color: #0d6efd;
+  background: transparent;
+  border-color: #0d6efd;
+}
+
+.command-sections {
+  padding: 1rem;
+  min-height: 200px;
+}
+
+.command-sections-compact {
+  padding: 0.5rem;
+  min-height: 120px;
+}
+
+.command-category {
+  margin-bottom: 1.5rem;
+}
+
+.command-category-compact {
+  margin-bottom: 0.75rem;
+}
+
+.category-title {
+  color: #0d6efd;
+  margin-bottom: 0.75rem;
+  font-size: 0.9rem;
+  font-weight: 600;
+  border-bottom: 1px solid #e9ecef;
+  padding-bottom: 0.25rem;
+}
+
+.category-title-compact {
+  color: #0d6efd;
+  margin-bottom: 0.375rem;
+  font-size: 0.8rem;
+  font-weight: 600;
+  border-bottom: 1px solid #e9ecef;
+  padding-bottom: 0.125rem;
+}
+
+.commands-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 0.5rem;
+}
+
+.commands-grid-compact {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 0.25rem;
+}
+
+.command-item {
+  background: white;
+  border: 1px solid #e0e0e0;
+  border-radius: 6px;
+  transition: all 0.2s ease;
+}
+
+.command-item-compact {
+  background: white;
+  border: 1px solid #e0e0e0;
+  border-radius: 4px;
+  transition: all 0.2s ease;
+}
+
+.command-item:hover {
+  border-color: #0d6efd;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+.command-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.5rem 0.75rem;
+}
+
+.command-content-compact {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.25rem 0.5rem;
+}
+
+.command-name {
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: #495057;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex: 1;
+  margin-right: 0.5rem;
+}
+
+.command-name-compact {
+  font-size: 0.7rem;
+  font-weight: 600;
+  color: #495057;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex: 1;
+  margin-right: 0.25rem;
+}
+
+/* Custom Switch Styling */
+.custom-switch {
+  position: relative;
+  width: 40px;
+  height: 20px;
+  flex-shrink: 0;
+}
+
+.custom-switch-compact {
+  position: relative;
+  width: 32px;
+  height: 16px;
+  flex-shrink: 0;
+}
+
+.custom-switch-compact input {
+  display: none;
+}
+
+.custom-switch-compact .custom-control-label {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 16px;
+  background: #ccc;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.custom-switch-compact .custom-control-label::after {
+  content: '';
+  position: absolute;
+  left: 2px;
+  top: 2px;
+  width: 12px;
+  height: 12px;
+  background: #fff;
+  border-radius: 50%;
+  transition: all 0.3s ease;
+}
+
+.custom-switch-compact input:checked + .custom-control-label {
+  background: #0d6efd;
+}
+
+.custom-switch-compact input:checked + .custom-control-label::after {
+  left: calc(100% - 14px);
+}
+
+.custom-switch input {
+  display: none;
+}
+
+.custom-control-label {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 20px;
+  background: #ccc;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.custom-control-label::after {
+  content: '';
+  position: absolute;
+  left: 2px;
+  top: 2px;
+  width: 16px;
+  height: 16px;
+  background: #fff;
+  border-radius: 50%;
+  transition: all 0.3s ease;
+}
+
+.custom-switch input:checked + .custom-control-label {
+  background: #0d6efd;
+}
+
+.custom-switch input:checked + .custom-control-label::after {
+  left: calc(100% - 18px);
+}
+
+/* Master Device Selection */
+.master-selection {
+  background: white;
+  border-radius: 6px;
+  border: 1px solid #dee2e6;
+  padding: 0.75rem;
+}
+
+.master-selection-compact {
+  background: white;
+  border-radius: 4px;
+  border: 1px solid #dee2e6;
+  padding: 0.5rem;
+}
+
+.master-device {
+  display: flex;
+  align-items: center;
+  padding: 0.5rem;
+  background: #fff3cd;
+  border: 1px solid #ffeaa7;
+  border-radius: 6px;
+}
+
+.master-device-compact {
+  display: flex;
+  align-items: center;
+  padding: 0.375rem;
+  background: #fff3cd;
+  border: 1px solid #ffeaa7;
+  border-radius: 4px;
+}
+
+.master-info {
+  display: flex;
+  align-items: center;
+}
+
+.no-master {
+  display: flex;
+  align-items: center;
+  padding: 0.5rem;
+  background: #f8d7da;
+  border: 1px solid #f5c6cb;
+  border-radius: 6px;
+}
+
+.no-master-compact {
+  display: flex;
+  align-items: center;
+  padding: 0.375rem;
+  background: #f8d7da;
+  border: 1px solid #f5c6cb;
+  border-radius: 4px;
+}
+
+/* Peers Container */
+.peers-container {
+  background: white;
+  border-radius: 8px;
+  border: 1px solid #dee2e6;
+  overflow: hidden;
+}
+
+.empty-peers {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 2rem;
+  text-align: center;
+}
+
+.empty-icon {
+  margin-bottom: 1rem;
+}
+
+.empty-text strong {
+  display: block;
+  margin-bottom: 0.5rem;
+  color: #495057;
+}
+
+.add-members-section {
+  padding: 1rem;
+  background: #f8f9fa;
+  border-top: 1px solid #dee2e6;
+}
+
+/* Modal Enhancements */
+.c-modal-header.bg-light {
+  background: #f8f9fa !important;
+  border-bottom: 1px solid #dee2e6;
+}
+
+.c-modal-header.bg-success {
+  background: #198754 !important;
+  border-bottom: 1px solid #146c43;
+}
+
+.c-modal-footer.bg-light {
+  background: #f8f9fa !important;
+  border-top: 1px solid #dee2e6;
+}
+
+.c-modal-body {
+  max-height: 80vh;
+  overflow-y: auto;
+}
+
+/* Button Groups */
+.btn-group .btn {
+  font-size: 0.75rem;
+  padding: 0.25rem 0.5rem;
+}
+
+.btn-group .btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .cloner-form-section {
+    padding: 0.75rem;
+    margin-bottom: 0.75rem;
+  }
+  
+  .commands-grid {
+    grid-template-columns: 1fr;
+  }
+  
+  .command-content {
+    padding: 0.5rem;
+  }
+  
+  .command-name {
+    font-size: 0.75rem;
+  }
+  
+  .c-modal-dialog {
+    margin: 0.25rem;
+  }
+  
+  .section-title {
+    font-size: 0.9rem;
+  }
+  
+  .commands-nav .nav-link {
+    padding: 0.375rem 0.75rem;
+    font-size: 0.8rem;
+  }
+  
+  .master-device,
+  .no-master {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.25rem;
+  }
+}
+
+@media (max-width: 576px) {
+  .c-modal-footer {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  
+  .c-modal-footer > div {
+    width: 100%;
+    text-align: center;
+    margin-bottom: 0.5rem;
+  }
+  
+  .c-modal-footer > div:last-child {
+    margin-bottom: 0;
+  }
+}
\ No newline at end of file
diff --git a/src/app/views/cloner/cloner.component.html b/src/app/views/cloner/cloner.component.html
index b622ec7..67fd369 100644
--- a/src/app/views/cloner/cloner.component.html
+++ b/src/app/views/cloner/cloner.component.html
@@ -15,17 +15,27 @@
       <c-card-body>
         <gui-grid [autoResizeWidth]="true" [source]="source" [columnMenu]="columnMenu" [sorting]="sorting"
           [infoPanel]="infoPanel" [autoResizeWidth]=true>
+          <gui-grid-column header="Name" field="name">
+            <ng-template let-value="item.name" let-item="item" let-index="index">
+              <strong>{{value}}</strong>
+            </ng-template>
+          </gui-grid-column>
           <gui-grid-column header="Description" field="description">
             <ng-template let-value="item.description" let-item="item" let-index="index">
               {{value}}
             </ng-template>
           </gui-grid-column>
-          <gui-grid-column header="Members type" field="pair_type">
-            <ng-template let-value="item.pair_type" let-item="item" let-index="index">
-              {{value}}
+          <gui-grid-column header="Direction" field="direction">
+            <ng-template let-value="item.direction" let-item="item" let-index="index">
+              <c-badge [color]="value == 'twoway' ? 'success' : 'warning'">{{value == 'twoway' ? 'Two Way' : 'Master Mode'}}</c-badge>
             </ng-template>
           </gui-grid-column>
-          <gui-grid-column header="Runtime" field="desc_cron">
+          <gui-grid-column header="Live Mode" field="live_mode">
+            <ng-template let-value="item.live_mode" let-item="item" let-index="index">
+              <c-badge [color]="value ? 'success' : 'secondary'">{{value ? 'Active' : 'Inactive'}}</c-badge>
+            </ng-template>
+          </gui-grid-column>
+          <gui-grid-column header="Schedule" field="desc_cron">
             <ng-template let-value="item.desc_cron" let-item="item" let-index="index">
               {{value}}
             </ng-template>
@@ -46,109 +56,190 @@
   </c-col>
 </c-row>
 
-  <c-modal #EditClonerModal backdrop="static" size="xl" [(visible)]="EditClonerModalVisible" id="EditClonerModal">
-    <c-modal-header>
-      <h5 *ngIf="SelectedCloner['action']=='edit'" cModalTitle>Editing Cloner {{SelectedCloner['name']}}</h5>
-      <h5 *ngIf="SelectedCloner['action']=='add'" cModalTitle>Adding new task</h5>
+  <c-modal #EditClonerModal backdrop="static" size="lg" [(visible)]="EditClonerModalVisible" id="EditClonerModal">
+    <c-modal-header class="bg-light">
+      <h5 *ngIf="SelectedCloner['action']=='edit'" cModalTitle><i class="fa-solid fa-edit me-2"></i>Edit Cloner: {{SelectedCloner['name']}}</h5>
+      <h5 *ngIf="SelectedCloner['action']=='add'" cModalTitle><i class="fa-solid fa-plus me-2"></i>Add New Cloner</h5>
       <button [cModalToggle]="EditClonerModal.id" cButtonClose></button>
     </c-modal-header>
-    <c-modal-body>
-      <label cLabel >General data:</label>
-      <c-input-group class="mb-3">
-        <label cInputGroupText for="floatingInput">Name</label>
-        <input cFormControl id="floatingInput" placeholder="SelectedCloner['name']" [(ngModel)]="SelectedCloner['name']" />
-        <label cInputGroupText for="floatingInput">Description</label>
-        <input cFormControl id="floatingInput" placeholder="SelectedCloner['description']"
-          [(ngModel)]="SelectedCloner['description']" />
-      </c-input-group>
-      <label cLabel >Sync config and Oprating Modes:</label>
-      <c-input-group class="mb-3">
-        <label cInputGroupText for="Direction">
-          Direction
-        </label>
-        <select cSelect id="Direction" [(ngModel)]="SelectedCloner['direction']">
-          <option value="twoway">Two way</option>
-          <option value="oneway">Master mode</option>
-        </select>
-        <label cInputGroupText for="inputGroupSelect01">
-          Live Mode
-        </label>
-        <select cSelect id="inputGroupSelect01" [(ngModel)]="SelectedCloner['live_mode']">
-          <option [ngValue]="false">Deactive</option>
-          <option [ngValue]="true">Active</option>
-        </select>
-        <label *ngIf="SelectedCloner['direction']=='oneway'" cInputGroupText for="inputGroupSelect02">
-          Schedule
-        </label>
-        <select *ngIf="SelectedCloner['direction']=='oneway'" cSelect id="inputGroupSelect02"  [(ngModel)]="SelectedCloner['schedule']">
-          <option [ngValue]="false">Deactive</option>
-          <option [ngValue]="true">Active</option>
-        </select>
-        <label cInputGroupText  *ngIf="SelectedCloner['schedule'] && SelectedCloner['direction']=='oneway'"  for="cron">cron</label>
-          <input cFormControl  *ngIf="SelectedCloner['schedule'] && SelectedCloner['direction']=='oneway'"  id="cron" placeholder="Cron" [(ngModel)]="SelectedCloner['cron']" />
-      </c-input-group>
-      <label cLabel >Peers Setting:</label>
-      <c-input-group class="mb-3">
-        <label cInputGroupText for="inputGroupSelect03">
-          Peers type
-        </label>
-        <select cSelect id="inputGroupSelect03"  (change)="form_changed()" [(ngModel)]="SelectedCloner['pair_type']">
-          <option value="devices">Devices</option>
-          <option value="groups" *ngIf="SelectedCloner['direction']=='oneway'">Groups</option>
-        </select>
-      </c-input-group>
-
-      <c-col xs style="border: 1px solid #ddd; border-radius: 4px; padding: 0;">
-        <div class="nav nav-underline" style="background: #fff; border-bottom: 2px solid #2c3e50;">
-          <div class="nav-item" *ngFor="let tab of tabs; let i = index">
-            <a class="nav-link" [active]="i==0" [cTabContent]="tabContent" [tabPaneIdx]="i">{{ tab.name }}</a>
-          </div>
+    <c-modal-body class="p-3">
+      <!-- Basic Information -->
+      <div class="cloner-form-section mb-3">
+        <div class="section-header mb-2">
+          <h6 class="section-title mb-0"><i class="fa-solid fa-info-circle me-2"></i>Basic Information</h6>
         </div>
-        <c-tab-content class="command-sections"  style="padding: 10px!important;min-height: 150px;"  #tabContent="cTabContent">
-          <c-tab-pane *ngFor="let tab of tabs; let i = index">
-            <div class="section" *ngFor="let section of tab.sections">
-              <h5 class="cloner-sections">{{ section.title }}</h5>
-              <div class="row">
-                <div class="col-4" *ngFor="let command of section.commands">
-                  <c-card style="margin-bottom: 5px;">
-                    <c-card-body class="p-2">
-                      <h6 class="card-title mb-1">{{ command }}</h6>
-                      <div class="custom-switch">
+        <c-row class="g-2">
+          <c-col xs="12" md="6">
+            <input cFormControl placeholder="Cloner Name" [(ngModel)]="SelectedCloner['name']" class="form-input-sm" />
+          </c-col>
+          <c-col xs="12" md="6">
+            <input cFormControl placeholder="Description" [(ngModel)]="SelectedCloner['description']" class="form-input-sm" />
+          </c-col>
+        </c-row>
+      </div>
+
+      <!-- Sync Configuration -->
+      <div class="cloner-form-section mb-3">
+        <div class="section-header mb-2">
+          <h6 class="section-title mb-0"><i class="fa-solid fa-sync me-2"></i>Synchronization Settings</h6>
+        </div>
+        <c-row class="g-2">
+          <c-col xs="12" md="4">
+            <label class="form-label-xs">Direction</label>
+            <select cSelect [(ngModel)]="SelectedCloner['direction']" (change)="onDirectionChange()" class="form-select-xs">
+              <option value="twoway">Two Way Sync</option>
+              <option value="oneway">Master Mode</option>
+            </select>
+          </c-col>
+          <c-col xs="12" md="4" *ngIf="SelectedCloner['direction']=='oneway'">
+            <label class="form-label-xs">Live Mode</label>
+            <select cSelect [(ngModel)]="SelectedCloner['live_mode']" class="form-select-xs">
+              <option [ngValue]="false">Inactive</option>
+              <option [ngValue]="true">Active</option>
+            </select>
+          </c-col>
+          <c-col xs="12" md="4" *ngIf="SelectedCloner['direction']=='oneway'">
+            <label class="form-label-xs">Schedule</label>
+            <select cSelect [(ngModel)]="SelectedCloner['schedule']" class="form-select-xs">
+              <option [ngValue]="false">Inactive</option>
+              <option [ngValue]="true">Active</option>
+            </select>
+          </c-col>
+          <c-col xs="12" *ngIf="SelectedCloner['schedule'] && SelectedCloner['direction']=='oneway'">
+            <label class="form-label-xs">Cron Expression</label>
+            <input cFormControl placeholder="0 0 * * *" [(ngModel)]="SelectedCloner['cron']" class="form-input-sm" />
+          </c-col>
+        </c-row>
+      </div>
+
+      <!-- Peers Configuration (Currently disabled - only devices supported) -->
+      <!-- <div class="cloner-form-section mb-3">
+        <div class="section-header mb-2">
+          <h6 class="section-title mb-0"><i class="fa-solid fa-network-wired me-2"></i>Peers Configuration</h6>
+          <small class="text-muted">Select the type of peers to synchronize</small>
+        </div>
+        <c-row class="g-2">
+          <c-col xs="12" md="6">
+            <label class="form-label-xs">Peers Type</label>
+            <select cSelect (change)="form_changed()" [(ngModel)]="SelectedCloner['pair_type']" class="form-select-xs">
+              <option value="devices">Devices</option>
+              <option value="groups" *ngIf="SelectedCloner['direction']=='oneway'">Groups</option>
+            </select>
+          </c-col>
+        </c-row>
+      </div> -->
+
+      <!-- Commands Configuration -->
+      <div class="cloner-form-section mb-3">
+        <div class="section-header mb-2">
+          <h6 class="section-title mb-0"><i class="fa-solid fa-terminal me-2"></i>Commands Configuration</h6>
+        </div>
+        <div class="commands-container-compact">
+          <div class="nav nav-underline commands-nav-compact">
+            <div class="nav-item" *ngFor="let tab of tabs; let i = index">
+              <a class="nav-link" [active]="i==0" [cTabContent]="tabContent" [tabPaneIdx]="i">{{ tab.name }}</a>
+            </div>
+          </div>
+          <c-tab-content class="command-sections-compact" #tabContent="cTabContent">
+            <c-tab-pane *ngFor="let tab of tabs; let i = index">
+              <div class="command-category-compact" *ngFor="let section of tab.sections">
+                <h6 class="category-title-compact">{{ section.title }}</h6>
+                <div class="commands-grid-compact">
+                  <div class="command-item-compact" *ngFor="let command of section.commands">
+                    <div class="command-content-compact">
+                      <span class="command-name-compact">{{ command }}</span>
+                      <div class="custom-switch-compact">
                         <input type="checkbox" class="custom-control-input" [checked]="in_active_commands(command)" (click)="activate_command(command)" [id]="command.replace('/', '')">
                         <label class="custom-control-label" [for]="command.replace('/', '')"></label>
                       </div>
-                    </c-card-body>
-                  </c-card>
+                    </div>
+                  </div>
                 </div>
               </div>
-            </div>
-          </c-tab-pane>
-        </c-tab-content>
-      </c-col>
+            </c-tab-pane>
+          </c-tab-content>
+        </div>
+      </div>
 
-      <h5>Peers :</h5>
-      <gui-grid [autoResizeWidth]="true" [source]="SelectedMembers" [columnMenu]="columnMenu" [sorting]="sorting"
-         [rowSelection]="rowSelection" [autoResizeWidth]=true [paging]="paging">
-        <gui-grid-column header="Name" field="name">
-          <ng-template let-value="item.name" let-item="item" let-index="index">
-            <i class="fa-solid fa-m" style="color: #ff3300;" *ngIf="SelectedCloner['direction']=='oneway' && item.id==master"></i>
-            &nbsp; {{value}} </ng-template>
-        </gui-grid-column>
-        <gui-grid-column *ngIf="SelectedCloner['pair_type']=='devices'" header="MAC" field="mac">
-          <ng-template let-value="item.mac" let-item="item" let-index="index">
-            {{value}}
-          </ng-template>
-        </gui-grid-column>
-        <gui-grid-column header="Actions" width="120" field="action">
-          <ng-template let-value="item.id" let-item="item" let-index="index">
-            <button cButton color="danger" size="sm" [cTooltip]="'Delete Member'" (click)="remove_member(item)"><i
-                class="fa-regular fa-trash-can"></i></button>
-            <button  *ngIf="SelectedCloner['direction']=='oneway'" cButton color="success" size="sm" style="margin-left: 5px;" [cTooltip]="'Set as Master'" (click)="set_master(item.id)"><i class="fa-regular fa-star"></i></button>
-          </ng-template>
-        </gui-grid-column>
-      </gui-grid>
-      <hr />
-      <button cButton color="primary" (click)="show_new_member_form()">+ Add new Members</button>
+      <!-- Master Device Selection (for Master Mode) -->
+      <div class="cloner-form-section mb-2" *ngIf="SelectedCloner['direction']=='oneway' && SelectedMembers.length > 0">
+        <div class="section-header mb-2">
+          <h6 class="section-title mb-0"><i class="fa-solid fa-crown me-2 text-warning"></i>Master Device</h6>
+        </div>
+        <div class="master-selection-compact">
+          <div class="master-device-compact" *ngIf="master > 0">
+            <i class="fa-solid fa-server me-2 text-primary"></i>
+            <strong>{{getMasterDeviceName()}}</strong>
+            <c-badge color="warning" class="ms-2">Master</c-badge>
+          </div>
+          <div class="no-master-compact" *ngIf="master == 0">
+            <i class="fa-solid fa-exclamation-triangle me-2 text-warning"></i>
+            <span class="text-muted">No master device selected</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Device Management -->
+      <div class="cloner-form-section">
+        <div class="section-header mb-2">
+          <h6 class="section-title mb-0"><i class="fa-solid fa-server me-2"></i>Device Management</h6>
+          <div class="d-flex justify-content-between align-items-center">
+            <c-badge color="info">{{SelectedMembers.length}} device(s)</c-badge>
+          </div>
+        </div>
+        
+        <div class="peers-container">
+          <div *ngIf="SelectedMembers.length == 0" class="empty-peers">
+            <div class="empty-icon">
+              <i class="fa-solid fa-users-slash fa-2x text-muted opacity-50"></i>
+            </div>
+            <div class="empty-text">
+              <strong>No peers added</strong>
+              <p class="mb-0 text-muted">Click "Add Members" to start adding peers</p>
+            </div>
+          </div>
+          
+          <div *ngIf="SelectedMembers.length > 0">
+            <gui-grid [autoResizeWidth]="true" [source]="SelectedMembers" [columnMenu]="columnMenu" [sorting]="sorting"
+               [rowSelection]="rowSelection" [autoResizeWidth]=true [paging]="paging">
+              <gui-grid-column header="Name" field="name">
+                <ng-template let-value="item.name" let-item="item" let-index="index">
+                  <div class="d-flex align-items-center">
+                    <i class="fa-solid fa-crown me-2 text-warning" *ngIf="SelectedCloner['direction']=='oneway' && item.id==master" title="Master Device"></i>
+                    <i class="fa-solid fa-server me-2 text-primary" *ngIf="!(SelectedCloner['direction']=='oneway' && item.id==master)"></i>
+                    <strong>{{value}}</strong>
+                  </div>
+                </ng-template>
+              </gui-grid-column>
+              <gui-grid-column *ngIf="SelectedCloner['pair_type']=='devices'" header="MAC" field="mac">
+                <ng-template let-value="item.mac" let-item="item" let-index="index">
+                  <c-badge color="secondary">{{value}}</c-badge>
+                </ng-template>
+              </gui-grid-column>
+              <gui-grid-column header="Actions" width="120" field="action" align="center">
+                <ng-template let-value="item.id" let-item="item" let-index="index">
+                  <div class="btn-group" role="group">
+                    <button *ngIf="SelectedCloner['direction']=='oneway'" cButton color="warning" size="sm" variant="outline" 
+                      [cTooltip]="'Set as Master'" (click)="set_master(item.id)" [disabled]="item.id==master">
+                      <i class="fa-solid fa-crown"></i>
+                    </button>
+                    <button cButton color="danger" size="sm" variant="outline" 
+                      [cTooltip]="'Remove Member'" (click)="remove_member(item)">
+                      <i class="fa-solid fa-times"></i>
+                    </button>
+                  </div>
+                </ng-template>
+              </gui-grid-column>
+            </gui-grid>
+          </div>
+          
+          <div class="add-members-section mt-3">
+            <button cButton color="success" (click)="show_new_member_form()">
+              <i class="fa-solid fa-plus me-1"></i>Add Members
+            </button>
+          </div>
+        </div>
+      </div>
     </c-modal-body>
     <c-modal-footer>
       <button *ngIf="SelectedCloner['action']=='add'" (click)="submit('add')" cButton color="primary">Add</button>
@@ -160,44 +251,75 @@
   </c-modal>
 
 
-  <c-modal #NewMemberModal backdrop="static" size="lg" [(visible)]="NewMemberModalVisible" id="NewMemberModal">
-    <c-modal-header>
-      <h5 cModalTitle>Editing Group </h5>
+  <c-modal #NewMemberModal backdrop="static" size="xl" [(visible)]="NewMemberModalVisible" id="NewMemberModal">
+    <c-modal-header class="bg-success text-white">
+      <h5 cModalTitle><i class="fa-solid fa-user-plus me-2"></i>Add Members to Cloner</h5>
       <button (click)="NewMemberModalVisible=!NewMemberModalVisible" cButtonClose></button>
     </c-modal-header>
-    <c-modal-body>
-      <c-input-group class="mb-3">
-        <h5>Group Members :</h5>
-        <gui-grid [autoResizeWidth]="true" *ngIf="NewMemberModalVisible" [searching]="searching"
-          [source]="availbleMembers" [columnMenu]="columnMenu" [sorting]="sorting" [infoPanel]="infoPanel"
-          [rowSelection]="rowSelection" (selectedRows)="onSelectedRowsNewMembers($event)" [autoResizeWidth]=true
-          [paging]="paging">
-          <gui-grid-column header="Member Name" field="name">
-            <ng-template let-value="item.name" let-item="item" let-index="index">
-              &nbsp; {{value}} </ng-template>
-          </gui-grid-column>
-          <gui-grid-column *ngIf="SelectedCloner['pair_type']=='devices'" header="IP Address" field="ip">
-            <ng-template let-value="item.ip" let-item="item" let-index="index">
-              {{value}}
-            </ng-template>
-          </gui-grid-column>
-          <gui-grid-column *ngIf="SelectedCloner['pair_type']=='devices'" header="MAC Address" field="mac">
-            <ng-template let-value="item.mac" let-item="item" let-index="index">
-              {{value}}
-            </ng-template>
-          </gui-grid-column>
-        </gui-grid>
-        <br />
-      </c-input-group>
-      <hr />
+    <c-modal-body class="p-4">
+      <!-- Selection Summary -->
+      <div class="mb-3" style="min-height: 58px;">
+        <c-alert *ngIf="NewMemberRows.length > 0" color="info" class="d-flex align-items-center mb-0">
+          <i class="fa-solid fa-info-circle me-2"></i>
+          <span><strong>{{NewMemberRows.length}}</strong> {{SelectedCloner['pair_type']}} selected for addition</span>
+        </c-alert>
+      </div>
+
+      <!-- Available Members -->
+      <c-card>
+        <c-card-header class="bg-light">
+          <h6 class="mb-0">
+            <i class="fa-solid me-2" [class.fa-server]="SelectedCloner['pair_type'] == 'devices'" [class.fa-layer-group]="SelectedCloner['pair_type'] != 'devices'"></i>
+            Available {{SelectedCloner['pair_type'] | titlecase}} ({{availbleMembers.length}} total)
+          </h6>
+        </c-card-header>
+        <c-card-body class="p-0">
+          <div *ngIf="availbleMembers.length == 0" class="text-center p-4 text-muted">
+            <i class="fa-solid fa-check-circle fa-3x mb-3 text-success opacity-50"></i>
+            <h6>All {{SelectedCloner['pair_type']}} are already added</h6>
+            <p class="mb-0">No available {{SelectedCloner['pair_type']}} to add to this cloner</p>
+          </div>
+          <div *ngIf="availbleMembers.length > 0">
+            <gui-grid [autoResizeWidth]="true" *ngIf="NewMemberModalVisible" [searching]="searching"
+              [source]="availbleMembers" [columnMenu]="columnMenu" [sorting]="sorting" [infoPanel]="infoPanel"
+              [rowSelection]="rowSelection" (selectedRows)="onSelectedRowsNewMembers($event)" [autoResizeWidth]=true
+              [paging]="paging">
+              <gui-grid-column header="Name" field="name">
+                <ng-template let-value="item.name" let-item="item" let-index="index">
+                  <div class="d-flex align-items-center">
+                    <i class="fa-solid me-2 text-primary" [class.fa-server]="SelectedCloner['pair_type'] == 'devices'" [class.fa-layer-group]="SelectedCloner['pair_type'] != 'devices'"></i>
+                    <strong>{{value}}</strong>
+                  </div>
+                </ng-template>
+              </gui-grid-column>
+              <gui-grid-column *ngIf="SelectedCloner['pair_type']=='devices'" header="IP Address" field="ip">
+                <ng-template let-value="item.ip" let-item="item" let-index="index">
+                  <c-badge color="secondary">{{value}}</c-badge>
+                </ng-template>
+              </gui-grid-column>
+              <gui-grid-column *ngIf="SelectedCloner['pair_type']=='devices'" header="MAC Address" field="mac">
+                <ng-template let-value="item.mac" let-item="item" let-index="index">
+                  <small class="text-muted">{{value}}</small>
+                </ng-template>
+              </gui-grid-column>
+            </gui-grid>
+          </div>
+        </c-card-body>
+      </c-card>
     </c-modal-body>
 
-    <c-modal-footer>
-      <button *ngIf="NewMemberRows.length!= 0" (click)="add_new_members()" cButton color="primary">Add {{
-        NewMemberRows.length }}</button>
-      <button (click)="NewMemberModalVisible=!NewMemberModalVisible" cButton color="secondary">
-        Close
-      </button>
+    <c-modal-footer class="bg-light d-flex justify-content-between">
+      <div>
+        <small class="text-muted">Select {{SelectedCloner['pair_type']}} from the list above to add them to the cloner</small>
+      </div>
+      <div>
+        <button *ngIf="NewMemberRows.length > 0" (click)="add_new_members()" cButton color="success">
+          <i class="fa-solid fa-plus me-1"></i>Add {{NewMemberRows.length}} {{SelectedCloner['pair_type'] | titlecase}}
+        </button>
+        <button (click)="NewMemberModalVisible=!NewMemberModalVisible" cButton color="secondary" class="ms-2">
+          <i class="fa-solid fa-times me-1"></i>Cancel
+        </button>
+      </div>
     </c-modal-footer>
   </c-modal>
 
diff --git a/src/app/views/cloner/cloner.component.ts b/src/app/views/cloner/cloner.component.ts
index 70a8a90..7921d85 100644
--- a/src/app/views/cloner/cloner.component.ts
+++ b/src/app/views/cloner/cloner.component.ts
@@ -317,16 +317,27 @@ export class ClonerComponent implements OnInit {
       this.data_provider
         .Add_cloner(_self.SelectedCloner, _self.SelectedClonerItems)
         .then((res) => {
-          _self.initGridTable();
+          if (res.status === 'failed') {
+            _self.show_toast("Error", res.err, "danger");
+          } else {
+            _self.show_toast("Success", "Cloner added successfully", "success");
+            _self.initGridTable();
+            _self.EditClonerModalVisible = false;
+          }
         });
     } else {
       this.data_provider
         .Edit_cloner(_self.SelectedCloner, _self.SelectedClonerItems)
         .then((res) => {
-          _self.initGridTable();
+          if (res.status === 'failed') {
+            _self.show_toast("Error", res.err, "danger");
+          } else {
+            _self.show_toast("Success", "Cloner updated successfully", "success");
+            _self.initGridTable();
+            _self.EditClonerModalVisible = false;
+          }
         });
     }
-    this.EditClonerModalVisible = false;
   }
 
   onSelectedRowsNewMembers(rows: Array<GuiSelectedRow>): void {
@@ -380,6 +391,7 @@ export class ClonerComponent implements OnInit {
         members: "",
         action: "add",
       };
+      this.master=0;
       this.SelectedMembers = [];
       this.SelectedClonerItems = [];
       this.EditClonerModalVisible = true;
@@ -411,6 +423,19 @@ export class ClonerComponent implements OnInit {
   in_active_commands(command:string){
     return this.active_commands.includes(command);
   }
+  
+  getMasterDeviceName(): string {
+    const masterDevice = this.SelectedMembers.find((m: any) => m.id == this.master);
+    return masterDevice ? masterDevice.name : '';
+  }
+
+  onDirectionChange() {
+    if (this.SelectedCloner['direction'] == 'twoway') {
+      this.SelectedCloner['live_mode'] = true;
+      this.SelectedCloner['schedule'] = false;
+    }
+    this.form_changed();
+  }
   remove_member(item: any) {
     var _self = this;
     _self.SelectedMembers = _self.SelectedMembers.filter(
diff --git a/src/app/views/cloner/cloner.module.ts b/src/app/views/cloner/cloner.module.ts
index d42f20e..6e78441 100644
--- a/src/app/views/cloner/cloner.module.ts
+++ b/src/app/views/cloner/cloner.module.ts
@@ -1,5 +1,5 @@
 import { NgModule } from "@angular/core";
-import { CommonModule } from "@angular/common";
+import { CommonModule, TitleCasePipe } from "@angular/common";
 import { FormsModule,ReactiveFormsModule } from "@angular/forms";
 
 import {
@@ -13,6 +13,8 @@ import {
   TooltipModule,
   NavModule, 
   TabsModule,
+  BadgeModule,
+  AlertModule,
 } from "@coreui/angular";
 import { ClonerRoutingModule } from "./cloner-routing.module";
 import { ClonerComponent } from "./cloner.component";
@@ -38,7 +40,10 @@ import { NgxSuperSelectModule} from "ngx-super-select";
     TooltipModule,
     NavModule, 
     TabsModule,
+    BadgeModule,
+    AlertModule,
   ],
   declarations: [ClonerComponent],
+  providers: [TitleCasePipe],
 })
 export class ClonerModule {}
diff --git a/src/app/views/cloner/cloner.scss b/src/app/views/cloner/cloner.scss
index a502ea6..1daee8c 100644
--- a/src/app/views/cloner/cloner.scss
+++ b/src/app/views/cloner/cloner.scss
@@ -1,3 +1,4 @@
+@import 'cloner-styles';
 
 .nav-underline {
     border-bottom: 2px solid var(--cui-nav-underline-border-color, #c4c9d0)

From 746711fa247955f7c8d37876e72af13c2d9425f7 Mon Sep 17 00:00:00 2001
From: sepehr <sepehr.ha@gmail.com>
Date: Thu, 16 Oct 2025 17:34:05 +0300
Subject: [PATCH 10/15] feat: redesign password vault interface for pro users

- Complete UI/UX redesign of vault module
- Enhanced security interface
- Pro feature improvements
- Better password management workflow
---
 src/app/views/vault/vault.component.html | 668 ++++++++++++-----------
 src/app/views/vault/vault.component.ts   |   8 +
 src/app/views/vault/vault.module.ts      |   4 +-
 src/app/views/vault/vault.scss           | 287 +++++++++-
 4 files changed, 632 insertions(+), 335 deletions(-)

diff --git a/src/app/views/vault/vault.component.html b/src/app/views/vault/vault.component.html
index 762126c..41661a3 100644
--- a/src/app/views/vault/vault.component.html
+++ b/src/app/views/vault/vault.component.html
@@ -1,360 +1,398 @@
-<c-row>
-  <c-col xs style="padding-right: 0;">
-    <div class="nav nav-underline" style="background: #fff;">
-      <div calss="nav-item">
-        <a [active]="true" class="nav-link" [cTabContent]="tabContent" (click)="activetab=0" [tabPaneIdx]="0">Settings</a>
-      </div>
-      <div calss="nav-item">
-        <a [cTabContent]="tabContent" (click)="get_passwords();activetab=1" class="nav-link" [routerLink] [tabPaneIdx]="1">Passwords</a>
-      </div>
-    </div>
-  </c-col>
-  <c-col style="padding-left: 0;">
-    <div class="nav nav-underline" style="background: #fff;padding: 3px;flex-direction: row-reverse;">
-      <button *ngIf="activetab==0" cButton size="sm" shape="rounded-0" class="mx-2" (click)="runConfirmModalVisible=!runConfirmModalVisible" color="danger">Execute Now</button>
-      <button *ngIf="activetab==1" cButton size="sm" shape="rounded-0" class="mx-2" (click)="toggleCollapse()" color="info">filters</button>
-    </div>
-  </c-col>
-</c-row>
-<c-tab-content style="padding: 0!important;" #tabContent="cTabContent">
+<c-card class="mb-4" style="margin-bottom: 0 !important;">
+  <c-card-header style="padding: 0;">
+    <c-row class="align-items-center">
+      <c-col xs="12" md="6">
+        <div class="nav nav-underline bg-transparent">
+          <div class="nav-item">
+            <a [active]="activetab==0" class="nav-link" [cTabContent]="tabContent" (click)="activetab=0" [tabPaneIdx]="0">
+              <i class="fas fa-cog me-1"></i>Settings
+            </a>
+          </div>
+          <div class="nav-item">
+            <a [active]="activetab==1" class="nav-link" [cTabContent]="tabContent" (click)="get_passwords();activetab=1" [tabPaneIdx]="1">
+              <i class="fas fa-key me-1"></i>Passwords
+            </a>
+          </div>
+        </div>
+      </c-col>
+      <c-col xs="12" md="6" class="text-end mt-2 mt-md-0">
+        <button *ngIf="activetab==0" cButton size="sm" class="me-2" (click)="runConfirmModalVisible=!runConfirmModalVisible" color="danger">
+          <i class="fas fa-play me-1"></i>Execute Now
+        </button>
+        <button *ngIf="activetab==1" cButton size="sm" (click)="toggleCollapse()" color="info">
+          <i class="fas fa-filter me-1"></i>Filters
+        </button>
+      </c-col>
+    </c-row>
+  </c-card-header>
+</c-card>
+<c-tab-content #tabContent="cTabContent">
   <c-tab-pane>
-    <c-row>
-      <c-col xs>
-        <c-card class="mb-4" style="border-radius: 0;" *ngIf="settings">
-          <c-card-body>
-            <c-row>
-              <c-col md="6">
-                <c-input-group class="mb-3">
-                  <label cInputGroupText for="inputGroupSelect01">
-                    Status
-                  </label>
-                  <select cSelect id="inputGroupSelect01" [(ngModel)]="settings['enable']">
-                    <option>Choose...</option>
-                    <option value="enable">Enable</option>
-                    <option value="disable">Disable</option>
-                  </select>
-                </c-input-group>
-              </c-col>
-              <c-col md="6">
-                <c-input-group class="mb-3">
-                  <label cInputGroupText for="inputGroupSelect01">
-                    Strategy
-                  </label>
-                  <select cSelect id="inputGroupSelect01" [(ngModel)]="settings['strategy']">
-                    <option>Choose...</option>
-                    <option value="all">All local</option>
-                    <option value="mikrowizard">Defined in MikroWizard</option>
-                  </select>
-                </c-input-group>
-              </c-col>
-              <c-col md="6">
-                <c-input-group class="mb-3">
-                  <label cInputGroupText for="inputGroupSelect01">
-                    Interval
-                  </label>
-                  <select cSelect id="inputGroupSelect01" [(ngModel)]="settings['interval']">
-                    <option>Choose...</option>
-                    <option value="daily">Daily</option>
-                    <option value="weekly">Weekly</option>
-                    <option value="monthly">Monthly</option>
-                    <option value="yearly">Yearly</option>
-                    <option value="manual">Manual</option>
-                    <option value="custom">Custom</option>
-                  </select>
-                </c-input-group>
-                <c-input-group *ngIf="settings['interval']=='custom'" class="mb-3">
-                  <label cInputGroupText for="inputGroupSelect01">
-                    Custom Cron
-                  </label>
-                  <input cFormControl id="floatingInput" style="border-radius: 0;" placeholder="Cron" [(ngModel)]="settings['cron']" />
-                </c-input-group>
-              </c-col>
-              <c-col md="6">
-                <c-input-group class="mb-3">
-                  <label cInputGroupText for="inputGroupSelect01">
-                    Password
-                  </label>
-                  <select cSelect id="inputGroupSelect01" [(ngModel)]="settings['password_type']">
-                    <option>Choose...</option>
-                    <option value="random">Random</option>
-                    <option value="defined">Pre-defined</option>
-                  </select>
-                </c-input-group>
-              </c-col>
-              <c-col md="12"  *ngIf="settings['strategy']=='all'">
-                <hr width="70%" style="margin: 10px auto;border-color: #304193;border-width: 2px;" />
-                <c-row class="gui-header" style="background: #f9fafb;padding: 10px 0px;margin: 0 auto;height: unset;border: 1px solid #e8e8e8;border-bottom: unset;">
-                  <c-col md="2" style="display: flex;align-items: center;">
-                    <h6>User Exceptions</h6>
-                  </c-col>
-                  <c-col style="display: flex;flex-direction: row-reverse;" md="10">
-                    <table>
-                      <td>
-                        <div>
-                          <input cFormControl style="border-radius: 0;" id="floatingInput" placeholder="Username Exception"
-                            [(ngModel)]="new_exception" />
-                        </div>
-                      </td>
-                      <td style="vertical-align: top;">
-                        <button cButton color="dark" shape="rounded-0" (click)="add_exception()">Add Username</button>
-                      </td>
-                    </table>
-                  </c-col>
-                </c-row>
-                <c-input-group class="mb-3">
-                  <gui-grid [autoResizeWidth]="true" [source]="settings['exceptions']" [columnMenu]="columnMenu" [paging]="paging"
-                    [sorting]="sorting" [autoResizeWidth]=true>
-                    <gui-grid-column header="UserName" field="name">
-                      <ng-template let-value="item" let-item="item" let-index="index">
-                        &nbsp; {{value}} </ng-template>
-                    </gui-grid-column>
-                    <gui-grid-column header="Actions" width="70" field="action">
-                      <ng-template let-value="item.id" let-item="item" let-index="index">
-                        <button (click)="remove_exception(item)" class=" mx-1" cButton color="danger" size="sm"><i
-                            class="fa-regular fa-trash-can"></i></button>
-                      </ng-template>
-                    </gui-grid-column>
-                  </gui-grid>
-                </c-input-group>
-              </c-col>
-              <c-col md="12" *ngIf="settings['password_type']=='defined'">
-                <hr width="70%" style="margin: 10px auto;border-color: #304193;border-width: 2px;"/>
-                <c-row class="gui-header" style="background: #f9fafb;padding: 10px 0px;margin: 0 auto;height: unset;border: 1px solid #e8e8e8;border-bottom: unset;">
-                  <c-col md="2" style="display: flex;align-items: center;">
-                    <h6>Password list</h6>
-                  </c-col>
-                  <c-col style="display: flex;flex-direction: row-reverse;" md="10">
-                    <table>
-                      <td>
-                        <div>
-                          <input cFormControl id="floatingInput" style="border-radius: 0;" placeholder="Password" [(ngModel)]="new_password" />
-                        </div>
-                      </td>
-                      <td style="vertical-align: top;">
-                        <button cButton color="dark" shape="rounded-0" (click)="add_password()">Add Password</button>
-                      </td>
-                    </table>
-                  </c-col>
-                </c-row>
-                <gui-grid [autoResizeWidth]="true" [source]="settings['passwords']" [columnMenu]="columnMenu" [sorting]="sorting"
-                  [paging]="paging" [autoResizeWidth]=true>
-                  <gui-grid-column header="Password" field="name">
-                    <ng-template let-value="item" let-item="item" let-index="index">
-                      &nbsp; {{value}} </ng-template>
-                  </gui-grid-column>
-                  <gui-grid-column header="Actions" width="70" field="action">
-                    <ng-template let-value="item.id" let-item="item" let-index="index">
-                      <button class=" mx-1" cButton color="danger" size="sm"><i
-                          class="fa-regular fa-trash-can"></i></button>
-                    </ng-template>
-                  </gui-grid-column>
-                </gui-grid>
-              </c-col>
-            </c-row>
-          </c-card-body>
-          <c-card-footer style="display: flex;flex-direction: row-reverse;">
-            <button cButton color="info"  shape="rounded-0" (click)="save_settings()" style="color: #fff;">Save Settings</button>
-          </c-card-footer>
-        </c-card>
-      </c-col>
-    </c-row>
-    <c-row>
-      <c-col xs>
-        <c-card class="mb-4" style="border-radius: 0;" *ngIf="settings">
-          <c-card-body>
-            <h6>Efected Groups</h6>
-            <gui-grid [autoResizeWidth]="true" [source]="Members" [columnMenu]="columnMenu" [sorting]="sorting"
-            [paging]="paging" [autoResizeWidth]=true>
-            <gui-grid-column header="Name" field="name">
-              <ng-template let-value="item.name" let-item="item" let-index="index">
-                &nbsp; {{value}} </ng-template>
-            </gui-grid-column>
-            <gui-grid-column header="Actions" width="70" field="action">
-              <ng-template let-value="item.id" let-item="item" let-index="index">
-                <button (click)="delete_group(item.id)"  class=" mx-1" cButton color="danger" size="sm"><i
-                    class="fa-regular fa-trash-can"></i></button>
-              </ng-template>
-            </gui-grid-column>
-          </gui-grid>
-          </c-card-body>
-          <c-card-footer  style="display: flex;flex-direction: row-reverse;">
-            <button cButton color="info"  shape="rounded-0" (click)="save_settings()" style="color: #fff;">Save Settings</button>
-            <button cButton color="primary" class="mx-1" (click)="show_new_member_form()">+ Add new Members</button>
-          </c-card-footer>
-        </c-card>
-      </c-col>
-    </c-row>
-    <c-row>
-      <c-col xs>
-        <c-card class="mb-4" style="border-radius: 0;" *ngIf="settings">
-          <c-card-body *ngIf="vault_history">
-            <h6>Reports</h6>
-            <gui-grid [autoResizeWidth]="true" [source]="vault_history" [columnMenu]="columnMenu" [sorting]="sorting"
-            [paging]="paging" [autoResizeWidth]=true>
-            <gui-grid-column header="Start Time" field="name">
-              <ng-template let-value="item.started" let-item="item" let-index="index">
-                &nbsp; {{value}} </ng-template>
-            </gui-grid-column>
-            <gui-grid-column header="End Time" field="name">
-              <ng-template let-value="item.ended" let-item="item" let-index="index">
-                &nbsp; {{value}} </ng-template>
-            </gui-grid-column>
-            <gui-grid-column header="Logs" field="mac" align="center">
-              <ng-template let-value="item['result']" let-item="item" let-index="index">
-                <button (click)="exportToCsv(value)"  color="primary" cButton>download</button>
-              </ng-template>
-            </gui-grid-column>
-          </gui-grid>
-          </c-card-body>
-        </c-card>
-      </c-col>
-    </c-row>
-  </c-tab-pane>
-  <c-tab-pane>
-    <c-row>
-      <div [visible]="filters_visible" cCollapse>
-        <c-col xs [lg]="12" class="example-form" style="background: #fff;padding: 0 10px;">
-          <mat-form-field *ngIf="ispro">
-            <mat-label>Username</mat-label>
-            <input (ngModelChange)="reinitgrid('username',$event)" [(ngModel)]="filters['username']" matInput>
-          </mat-form-field>
-          <mat-form-field *ngIf="ispro">
-            <mat-label>Device IP</mat-label>
-            <input (ngModelChange)="reinitgrid('dev_ip',$event)" [(ngModel)]="filters['dev_ip']" matInput>
-          </mat-form-field>
-          <mat-form-field *ngIf="ispro">
-            <mat-label>Device Name</mat-label>
-            <input (ngModelChange)="reinitgrid('dev_name',$event)" [(ngModel)]="filters['dev_name']" matInput>
-          </mat-form-field>
-        </c-col>
-      </div>
-    </c-row>
-    <c-row>
-      <c-col xs>
-        <c-card class="mb-4">
-          <c-card-body *ngIf="passwords">
-            <gui-grid [autoResizeWidth]="true" [source]="passwords" [columnMenu]="columnMenu" [sorting]="sorting"
-              [infoPanel]="infoPanel" [autoResizeWidth]=true>
-              <gui-grid-column header="Device Name" field="name">
-                <ng-template let-value="item.name" let-item="item" let-index="index">
-                  &nbsp; {{value}} </ng-template>
-              </gui-grid-column>
-              <gui-grid-column header="Device IP" field="devip">
-                <ng-template let-value="item.devip" let-item="item" let-index="index">
-                  {{value}}
+    <c-card class="mb-4" *ngIf="settings" style="border: none;">
+      <c-card-body>
+        <!-- Settings Tab Header -->
+        <div class="tab-info-header mb-4">
+          <div class="d-flex align-items-center">
+            <i class="fas fa-cog text-primary me-2 fs-4"></i>
+            <div>
+              <h5 class="mb-1">Password Vault Settings</h5>
+              <p class="text-muted mb-0 small">Configure automated password management for your device groups. Set schedules, define password policies, and manage affected devices.</p>
+            </div>
+          </div>
+        </div>
+        
+        <!-- Password Vault Configuration -->
+        <div class="mb-4 pb-4 border-bottom">
+          <h6 class="mb-3"><i class="fas fa-shield-alt me-2"></i>Password Vault Configuration</h6>
+          <c-row class="g-3">
+            <c-col xs="12" md="6" lg="3">
+              <label class="form-label small">Status</label>
+              <select cSelect size="sm" [(ngModel)]="settings['enable']" class="form-select-sm">
+                <option>Choose...</option>
+                <option value="enable">Enable</option>
+                <option value="disable">Disable</option>
+              </select>
+            </c-col>
+            <c-col xs="12" md="6" lg="3">
+              <label class="form-label small">Strategy <i class="fas fa-info-circle text-info ms-1" [cTooltip]="strategyTooltipTemplate" cTooltipPlacement="top"></i></label>
+              <select cSelect size="sm" [(ngModel)]="settings['strategy']" class="form-select-sm">
+                <option>Choose...</option>
+                <option value="all">All Local Users</option>
+                <option value="mikrowizard">MikroWizard Users Only</option>
+              </select>
+            </c-col>
+            <c-col xs="12" md="6" lg="3">
+              <label class="form-label small">Interval <i class="fas fa-info-circle text-info ms-1" [cTooltip]="intervalTooltipTemplate" cTooltipPlacement="top"></i></label>
+              <select cSelect size="sm" [(ngModel)]="settings['interval']" class="form-select-sm">
+                <option>Choose...</option>
+                <option value="daily">Daily</option>
+                <option value="weekly">Weekly</option>
+                <option value="monthly">Monthly</option>
+                <option value="yearly">Yearly</option>
+                <option value="manual">Manual</option>
+                <option value="custom">Custom</option>
+              </select>
+            </c-col>
+            <c-col xs="12" md="6" lg="3">
+              <label class="form-label small">Password Type <i class="fas fa-info-circle text-info ms-1" [cTooltip]="passwordTypeTooltipTemplate" cTooltipPlacement="top"></i></label>
+              <select cSelect size="sm" [(ngModel)]="settings['password_type']" class="form-select-sm">
+                <option>Choose...</option>
+                <option value="random">Random</option>
+                <option value="defined">Pre-defined</option>
+              </select>
+            </c-col>
+            <c-col xs="12" *ngIf="settings['interval']=='custom'">
+              <label class="form-label small">Custom Cron Expression</label>
+              <input cFormControl size="sm" placeholder="0 0 * * *" [(ngModel)]="settings['cron']" />
+            </c-col>
+          </c-row>
+        </div>
+        <!-- User Exceptions -->
+        <div class="mb-4 pb-4 border-bottom" *ngIf="settings && settings['strategy']=='all'">
+          <c-row class="align-items-center mb-3">
+            <c-col>
+              <h6 class="mb-0"><i class="fas fa-user-shield me-2"></i>User Exceptions</h6>
+              <small class="text-muted">Users excluded from password changes</small>
+            </c-col>
+            <c-col xs="auto">
+              <div class="input-group input-group-sm">
+                <input cFormControl size="sm" placeholder="Username" [(ngModel)]="new_exception" />
+                <button cButton color="primary" size="sm" (click)="add_exception()">
+                  <i class="fas fa-plus"></i>
+                </button>
+              </div>
+            </c-col>
+          </c-row>
+          <div *ngIf="settings['exceptions']?.length > 0">
+            <gui-grid [autoResizeWidth]="true" [source]="settings['exceptions']" [columnMenu]="columnMenu" [paging]="paging" [sorting]="sorting">
+              <gui-grid-column header="Username" field="name">
+                <ng-template let-value="item" let-item="item" let-index="index">
+                  <i class="fas fa-user me-2 text-muted"></i>{{value}}
                 </ng-template>
               </gui-grid-column>
-              <gui-grid-column header="UserName" field="username">
-                <ng-template let-value="item.username" let-item="item" let-index="index">
-                  {{value}}
-                </ng-template>
-              </gui-grid-column>
-              <gui-grid-column header="Last Changed" field="desc_cron">
-                <ng-template let-value="item.changed" let-item="item" let-index="index">
-                  {{value}}
-                </ng-template>
-              </gui-grid-column>
-              <gui-grid-column header="Actions" width="120" field="action">
+              <gui-grid-column header="Actions" width="80" field="action" align="center">
                 <ng-template let-value="item.id" let-item="item" let-index="index">
-                  <button cButton *ngIf="ispro" (click)="reveal_password(item.devid,item.username)" color="info" variant="outline">
-                    <i  class="fa-solid fa-eye"></i>
+                  <button (click)="remove_exception(item)" cButton color="danger" size="sm" variant="outline">
+                    <i class="fas fa-trash"></i>
                   </button>
                 </ng-template>
               </gui-grid-column>
             </gui-grid>
-          </c-card-body>
-        </c-card>
-      </c-col>
-    </c-row>
+          </div>
+        </div>
+        <!-- Pre-defined Passwords -->
+        <div class="mb-4 pb-4 border-bottom" *ngIf="settings && settings['password_type']=='defined'">
+          <c-row class="align-items-center mb-3">
+            <c-col>
+              <h6 class="mb-0"><i class="fas fa-key me-2"></i>Password List</h6>
+              <small class="text-muted">Pre-defined passwords for rotation</small>
+            </c-col>
+            <c-col xs="auto">
+              <div class="input-group input-group-sm">
+                <input cFormControl size="sm" type="password" placeholder="Password" [(ngModel)]="new_password" />
+                <button cButton color="primary" size="sm" (click)="add_password()">
+                  <i class="fas fa-plus"></i>
+                </button>
+              </div>
+            </c-col>
+          </c-row>
+          <div *ngIf="settings['passwords']?.length > 0">
+            <gui-grid [autoResizeWidth]="true" [source]="settings['passwords']" [columnMenu]="columnMenu" [sorting]="sorting" [paging]="paging">
+              <gui-grid-column header="Password" field="name">
+                <ng-template let-value="item" let-item="item" let-index="index">
+                  <i class="fas fa-lock me-2 text-muted"></i>••••••••
+                </ng-template>
+              </gui-grid-column>
+              <gui-grid-column header="Actions" width="80" field="action" align="center">
+                <ng-template let-value="item.id" let-item="item" let-index="index">
+                  <button cButton color="danger" size="sm" variant="outline" (click)="remove_password(item)">
+                    <i class="fas fa-trash"></i>
+                  </button>
+                </ng-template>
+              </gui-grid-column>
+            </gui-grid>
+          </div>
+        </div>
+        <!-- Affected Groups -->
+        <div class="mb-4 pb-4 border-bottom">
+          <c-row class="align-items-center mb-3">
+            <c-col>
+              <h6 class="mb-0"><i class="fas fa-network-wired me-2"></i>Affected Device Groups</h6>
+              <small class="text-muted">Device groups where password changes will be applied</small>
+            </c-col>
+            <c-col xs="auto">
+              <button cButton color="primary" size="sm" (click)="show_new_member_form()">
+                <i class="fas fa-plus me-1"></i>Add Groups
+              </button>
+            </c-col>
+          </c-row>
+          <div *ngIf="Members?.length > 0" class="mb-3">
+            <gui-grid [autoResizeWidth]="true" [source]="Members" [columnMenu]="columnMenu" [sorting]="sorting" [paging]="paging">
+              <gui-grid-column header="Group Name" field="name">
+                <ng-template let-value="item.name" let-item="item" let-index="index">
+                  <i class="fas fa-server me-2 text-primary"></i>{{value}}
+                </ng-template>
+              </gui-grid-column>
+              <gui-grid-column header="Actions" width="80" field="action" align="center">
+                <ng-template let-value="item.id" let-item="item" let-index="index">
+                  <button (click)="delete_group(item.id)" cButton color="danger" size="sm" variant="outline">
+                    <i class="fas fa-trash"></i>
+                  </button>
+                </ng-template>
+              </gui-grid-column>
+            </gui-grid>
+          </div>
+          <div class="text-end">
+            <button cButton color="success" (click)="save_settings()">
+              <i class="fas fa-save me-1"></i>Save Configuration
+            </button>
+          </div>
+        </div>
+
+        <!-- Execution History -->
+        <div *ngIf="vault_history">
+          <h6 class="mb-3"><i class="fas fa-history me-2"></i>Execution Reports</h6>
+          <gui-grid [autoResizeWidth]="true" [source]="vault_history" [columnMenu]="columnMenu" [sorting]="sorting" [paging]="paging">
+            <gui-grid-column header="Start Time" field="started">
+              <ng-template let-value="item.started" let-item="item" let-index="index">
+                <small>{{value}}</small>
+              </ng-template>
+            </gui-grid-column>
+            <gui-grid-column header="End Time" field="ended">
+              <ng-template let-value="item.ended" let-item="item" let-index="index">
+                <small>{{value}}</small>
+              </ng-template>
+            </gui-grid-column>
+            <gui-grid-column header="Results" field="result" align="center" width="100">
+              <ng-template let-value="item['result']" let-item="item" let-index="index">
+                <button (click)="exportToCsv(value)" color="primary" size="sm" cButton variant="outline">
+                  <i class="fas fa-download"></i>
+                </button>
+              </ng-template>
+            </gui-grid-column>
+          </gui-grid>
+        </div>
+      </c-card-body>
+    </c-card>
+  </c-tab-pane>
+  <c-tab-pane>
+    <c-card class="mb-4">
+      <c-card-body>
+        <!-- Passwords Tab Header -->
+        <div class="tab-info-header mb-4">
+          <div class="d-flex align-items-center">
+            <i class="fas fa-key text-warning me-2 fs-4"></i>
+            <div>
+              <h5 class="mb-1">Stored Passwords</h5>
+              <p class="text-muted mb-0 small">View and manage passwords stored by the vault system. Use filters to find specific devices or users.</p>
+            </div>
+          </div>
+        </div>
+        
+        <!-- Filters -->
+        <div class="mb-4 pb-4 border-bottom" [visible]="filters_visible" cCollapse>
+          <h6 class="mb-3"><i class="fas fa-filter me-2"></i>Filters</h6>
+          <c-row class="g-3">
+            <c-col xs="12" md="4" *ngIf="ispro">
+              <mat-form-field appearance="outline" class="w-100">
+                <mat-label>Username</mat-label>
+                <input (ngModelChange)="reinitgrid('username',$event)" [(ngModel)]="filters['username']" matInput>
+              </mat-form-field>
+            </c-col>
+            <c-col xs="12" md="4" *ngIf="ispro">
+              <mat-form-field appearance="outline" class="w-100">
+                <mat-label>Device IP</mat-label>
+                <input (ngModelChange)="reinitgrid('dev_ip',$event)" [(ngModel)]="filters['dev_ip']" matInput>
+              </mat-form-field>
+            </c-col>
+            <c-col xs="12" md="4" *ngIf="ispro">
+              <mat-form-field appearance="outline" class="w-100">
+                <mat-label>Device Name</mat-label>
+                <input (ngModelChange)="reinitgrid('dev_name',$event)" [(ngModel)]="filters['dev_name']" matInput>
+              </mat-form-field>
+            </c-col>
+          </c-row>
+        </div>
+
+        <!-- Stored Passwords -->
+        <div *ngIf="passwords">
+          <h6 class="mb-3"><i class="fas fa-database me-2"></i>Stored Passwords</h6>
+          <gui-grid [autoResizeWidth]="true" [source]="passwords" [columnMenu]="columnMenu" [sorting]="sorting" [infoPanel]="infoPanel">
+            <gui-grid-column header="Device" field="name">
+              <ng-template let-value="item.name" let-item="item" let-index="index">
+                <div class="d-flex align-items-center">
+                  <i class="fas fa-router me-2 text-primary"></i>
+                  <div>
+                    <div class="fw-semibold">{{value}}</div>
+                    <small class="text-muted">{{item.devip}}</small>
+                  </div>
+                </div>
+              </ng-template>
+            </gui-grid-column>
+            <gui-grid-column header="Username" field="username">
+              <ng-template let-value="item.username" let-item="item" let-index="index">
+                <i class="fas fa-user me-2 text-muted"></i>{{value}}
+              </ng-template>
+            </gui-grid-column>
+            <gui-grid-column header="Last Changed" field="changed">
+              <ng-template let-value="item.changed" let-item="item" let-index="index">
+                <small>{{value}}</small>
+              </ng-template>
+            </gui-grid-column>
+            <gui-grid-column header="Actions" width="100" field="action" align="center">
+              <ng-template let-value="item.id" let-item="item" let-index="index">
+                <button cButton *ngIf="ispro" (click)="reveal_password(item.devid,item.username)" color="info" size="sm" variant="outline">
+                  <i class="fas fa-eye"></i>
+                </button>
+              </ng-template>
+            </gui-grid-column>
+          </gui-grid>
+        </div>
+      </c-card-body>
+    </c-card>
   </c-tab-pane>
 </c-tab-content>
 
+<!-- Password Reveal Modal -->
 <c-modal #PasswordModal backdrop="static" [(visible)]="PasswordModalVisible" id="PasswordModal">
   <c-modal-header>
-    <h6 cModalTitle>Password</h6>
+    <h6 cModalTitle><i class="fas fa-eye me-2"></i>Password Reveal</h6>
     <button [cModalToggle]="PasswordModal.id" cButtonClose></button>
   </c-modal-header>
   <c-modal-body>
-    <p>
-      <c-input-group class="mb-3">
-        <label cInputGroupText for="inputGroupSelect01">
-          Password
-        </label>
-        <input [value]="password" cFormControl disabled="true"/>
-      </c-input-group>
-    </p>
-    <code>
-      Your attempt to reveal password is logged in system!
-    </code>
+    <div class="alert alert-warning">
+      <i class="fas fa-exclamation-triangle me-2"></i>
+      <strong>Security Notice:</strong> Your attempt to reveal this password is logged in the system.
+    </div>
+    <div class="input-group">
+      <span class="input-group-text"><i class="fas fa-key"></i></span>
+      <input [value]="password" cFormControl disabled="true" class="form-control"/>
+      <button cButton color="secondary" variant="outline" (click)="copyToClipboard(password)">
+        <i class="fas fa-copy"></i>
+      </button>
+    </div>
   </c-modal-body>
   <c-modal-footer>
-    <button [cModalToggle]="PasswordModal.id" cButton color="info">
-      Close
-    </button>
+    <button [cModalToggle]="PasswordModal.id" cButton color="secondary">Close</button>
   </c-modal-footer>
 </c-modal>
 
-
-
+<!-- Execute Confirmation Modal -->
 <c-modal #runConfirmModal backdrop="static" [(visible)]="runConfirmModalVisible" id="runConfirmModal">
   <c-modal-header>
-    <h6 cModalTitle>Confirm RUN {{ SelectedTask['name'] }}</h6>
+    <h6 cModalTitle><i class="fas fa-exclamation-triangle me-2 text-warning"></i>Confirm Execution</h6>
     <button [cModalToggle]="runConfirmModal.id" cButtonClose></button>
   </c-modal-header>
   <c-modal-body>
-    Are you sure that You want to run Vault Password Job ?
-    <br />
+    <div class="alert alert-warning">
+      <strong>Warning:</strong> This will execute the password vault job and change passwords on all configured device groups.
+    </div>
+    <p>Are you sure you want to proceed with the password vault execution?</p>
   </c-modal-body>
   <c-modal-footer>
     <button cButton color="danger" (click)="exec_vault()">
-      Yes,Run!
-    </button>
-    <button [cModalToggle]="runConfirmModal.id" cButton color="info">
-      Close
+      <i class="fas fa-play me-1"></i>Yes, Execute
     </button>
+    <button [cModalToggle]="runConfirmModal.id" cButton color="secondary">Cancel</button>
   </c-modal-footer>
 </c-modal>
 
-
+<!-- Add Device Groups Modal -->
 <c-modal #NewMemberModal backdrop="static" size="lg" [(visible)]="NewMemberModalVisible" id="NewMemberModal">
   <c-modal-header>
-    <h5 cModalTitle>Editing Group </h5>
+    <h6 cModalTitle><i class="fas fa-plus me-2"></i>Add Device Groups</h6>
     <button (click)="NewMemberModalVisible=!NewMemberModalVisible" cButtonClose></button>
   </c-modal-header>
   <c-modal-body>
-    <c-input-group class="mb-3">
-      <h5>Group Members :</h5>
-      <gui-grid [autoResizeWidth]="true" *ngIf="NewMemberModalVisible" [searching]="searching"
-        [source]="availbleMembers" [columnMenu]="columnMenu" [sorting]="sorting" [infoPanel]="infoPanel"
-        [rowSelection]="rowSelection" (selectedRows)="onSelectedRowsNewMembers($event)" [autoResizeWidth]=true
-        [paging]="paging">
-        <gui-grid-column header="Member Name" field="name">
-          <ng-template let-value="item.name" let-item="item" let-index="index">
-            &nbsp; {{value}} </ng-template>
-        </gui-grid-column>
-        <gui-grid-column *ngIf="SelectedTask['selection_type']=='devices'" header="IP Address" field="ip">
-          <ng-template let-value="item.ip" let-item="item" let-index="index">
-            {{value}}
-          </ng-template>
-        </gui-grid-column>
-        <gui-grid-column *ngIf="SelectedTask['selection_type']=='devices'" header="MAC Address" field="mac">
-          <ng-template let-value="item.mac" let-item="item" let-index="index">
-            {{value}}
-          </ng-template>
-        </gui-grid-column>
-      </gui-grid>
-      <br />
-    </c-input-group>
-    <hr />
+    <p class="text-muted mb-3">Select device groups to include in the password vault task:</p>
+    <gui-grid [autoResizeWidth]="true" *ngIf="NewMemberModalVisible" [searching]="searching"
+      [source]="availbleMembers" [columnMenu]="columnMenu" [sorting]="sorting" [infoPanel]="infoPanel"
+      [rowSelection]="rowSelection" (selectedRows)="onSelectedRowsNewMembers($event)" [paging]="paging">
+      <gui-grid-column header="Group Name" field="name">
+        <ng-template let-value="item.name" let-item="item" let-index="index">
+          <i class="fas fa-server me-2 text-primary"></i>{{value}}
+        </ng-template>
+      </gui-grid-column>
+      <gui-grid-column *ngIf="SelectedTask['selection_type']=='devices'" header="IP Address" field="ip">
+        <ng-template let-value="item.ip" let-item="item" let-index="index">
+          {{value}}
+        </ng-template>
+      </gui-grid-column>
+      <gui-grid-column *ngIf="SelectedTask['selection_type']=='devices'" header="MAC Address" field="mac">
+        <ng-template let-value="item.mac" let-item="item" let-index="index">
+          {{value}}
+        </ng-template>
+      </gui-grid-column>
+    </gui-grid>
   </c-modal-body>
-
   <c-modal-footer>
-    <button *ngIf="NewMemberRows.length!= 0" (click)="add_new_members()" cButton color="primary">Add {{
-      NewMemberRows.length }}</button>
-    <button (click)="NewMemberModalVisible=!NewMemberModalVisible" cButton color="secondary">
-      Close
+    <button *ngIf="NewMemberRows.length != 0" (click)="add_new_members()" cButton color="primary">
+      <i class="fas fa-plus me-1"></i>Add {{NewMemberRows.length}} Group(s)
     </button>
+    <button (click)="NewMemberModalVisible=!NewMemberModalVisible" cButton color="secondary">Cancel</button>
   </c-modal-footer>
 </c-modal>
 
+<!-- Tooltip Templates -->
+<ng-template #strategyTooltipTemplate>
+  <strong>All Local Users:</strong><br>
+  Changes passwords for all router users except exceptions.<br><br>
+  <strong>MikroWizard Users Only:</strong><br>
+  Changes only passwords for users defined in MikroWizard system.
+</ng-template>
+
+<ng-template #intervalTooltipTemplate>
+  <strong>Frequency:</strong><br>
+  How often passwords should be changed automatically.<br><br>
+  <strong>Manual:</strong><br>
+  Only when executed manually.
+</ng-template>
+
+<ng-template #passwordTypeTooltipTemplate>
+  <strong>Random:</strong><br>
+  System generates random passwords.<br><br>
+  <strong>Pre-defined:</strong><br>
+  Use passwords from your custom list.
+</ng-template>
+
 <c-toaster position="fixed" placement="top-end"></c-toaster>
\ No newline at end of file
diff --git a/src/app/views/vault/vault.component.ts b/src/app/views/vault/vault.component.ts
index 861e550..9fbe59a 100644
--- a/src/app/views/vault/vault.component.ts
+++ b/src/app/views/vault/vault.component.ts
@@ -435,6 +435,14 @@ export class VaultComponent implements OnInit {
 
 
 
+  copyToClipboard(text: string) {
+    navigator.clipboard.writeText(text).then(() => {
+      this.show_toast('Success', 'Password copied to clipboard', 'success');
+    }).catch(() => {
+      this.show_toast('Error', 'Failed to copy password', 'danger');
+    });
+  }
+
   logger(item: any) {
     console.dir(item);
   }
diff --git a/src/app/views/vault/vault.module.ts b/src/app/views/vault/vault.module.ts
index e98d364..d52b8c2 100644
--- a/src/app/views/vault/vault.module.ts
+++ b/src/app/views/vault/vault.module.ts
@@ -12,6 +12,7 @@ import {
   TabsModule,
   ToastModule,
   CollapseModule,
+  TooltipModule,
 } from "@coreui/angular";
 import { VaultRoutingModule } from "./vault-routing.module";
 import { VaultComponent } from "./vault.component";
@@ -36,7 +37,8 @@ import { MatFormFieldModule } from "@angular/material/form-field";
     ToastModule,
     MatInputModule,
     MatFormFieldModule,
-    CollapseModule
+    CollapseModule,
+    TooltipModule
   ],
   declarations: [VaultComponent],
 })
diff --git a/src/app/views/vault/vault.scss b/src/app/views/vault/vault.scss
index 6acb3bb..da87598 100644
--- a/src/app/views/vault/vault.scss
+++ b/src/app/views/vault/vault.scss
@@ -1,29 +1,278 @@
-
+// Compact Navigation Styles
 .nav-underline {
-    border-bottom: 2px solid var(--cui-nav-underline-border-color, #c4c9d0)
+    border-bottom: 2px solid var(--cui-nav-underline-border-color, #c4c9d0);
+    
+    .nav-item {
+        margin-bottom: -2px;
+        cursor: pointer;
+    }
+    
+    .nav-link {
+        color: var(--cui-nav-underline-link-color, #768192);
+        border-style: none none solid!important;
+        border-width: 2px;
+        position: relative;
+        bottom: -1px;
+        cursor: pointer;
+        font-size: 0.9rem;
+        padding: 0.5rem 1rem;
+        
+        &:hover, &:focus {
+            border-color: var(--cui-nav-underline-link-active-border-color, #321fdb);
+        }
+        
+        &.active, .show > & {
+            color: var(--cui-nav-underline-link-active-color, #321fdb);
+            background: transparent;
+            border-color: var(--cui-nav-underline-link-active-border-color, #321fdb);
+        }
+    }
 }
 
-.nav-underline .nav-item {
-    margin-bottom: -2px;
-    cursor: pointer;
+// Compact Form Styles
+.form-label.small {
+    font-size: 0.8rem;
+    font-weight: 600;
+    color: #495057;
+    margin-bottom: 0.25rem;
 }
 
-.nav-underline .nav-link {
-    color: var(--cui-nav-underline-link-color, #768192);
-    border-style: none none solid!important;
-    border-width:2px;
-    position:relative;
-    bottom:-1px;
-    cursor: pointer;
-
+.form-select-sm {
+    font-size: 0.85rem;
+    padding: 0.25rem 0.5rem;
 }
 
-.nav-underline .nav-link:hover,.nav-underline .nav-link:focus {
-    border-color: var(--cui-nav-underline-link-active-border-color, #321fdb)
+// Card Header Improvements
+.c-card-header {
+    background: #f8f9fa;
+    border-bottom: 1px solid #dee2e6;
+    padding: 0.75rem 1rem;
+    
+    h6 {
+        font-size: 0.9rem;
+        font-weight: 600;
+        color: #495057;
+        
+        i {
+            color: #6c757d;
+        }
+    }
+    
+    .text-muted {
+        font-size: 0.75rem;
+    }
 }
 
-.nav-underline .nav-link.active,.nav-underline .show>.nav-link {
-    color: var(--cui-nav-underline-link-active-color, #321fdb);
-    background: transparent;
-    border-color: var(--cui-nav-underline-link-active-border-color, #321fdb)
+// Grid Improvements
+gui-grid {
+    .gui-grid {
+        font-size: 0.85rem;
+    }
 }
+
+// Input Group Compact
+.input-group-sm {
+    .form-control, .input-group-text {
+        font-size: 0.8rem;
+        padding: 0.25rem 0.5rem;
+    }
+}
+
+// Alert Improvements
+.alert {
+    font-size: 0.85rem;
+    padding: 0.5rem 0.75rem;
+    
+    i {
+        margin-right: 0.5rem;
+    }
+}
+
+// Button Improvements
+.btn {
+    font-size: 0.85rem;
+    
+    &.btn-sm {
+        font-size: 0.8rem;
+        padding: 0.25rem 0.5rem;
+    }
+    
+    i {
+        font-size: 0.8rem;
+    }
+}
+
+// Modal Improvements
+.c-modal-header {
+    padding: 0.75rem 1rem;
+    
+    h6 {
+        font-size: 0.95rem;
+        font-weight: 600;
+    }
+}
+
+.c-modal-body {
+    padding: 1rem;
+    font-size: 0.9rem;
+}
+
+.c-modal-footer {
+    padding: 0.75rem 1rem;
+}
+
+// Responsive Design
+@media (max-width: 768px) {
+    .c-card-header {
+        .nav-underline {
+            margin-bottom: 0.5rem;
+        }
+        
+        .text-end {
+            text-align: left !important;
+        }
+    }
+    
+    .input-group-sm {
+        flex-direction: column;
+        
+        .form-control {
+            margin-bottom: 0.25rem;
+        }
+        
+        .btn {
+            width: 100%;
+        }
+    }
+    
+    .c-modal-dialog {
+        margin: 0.5rem;
+    }
+    
+    .c-card-footer {
+        .btn {
+            width: 100%;
+            margin-bottom: 0.5rem;
+            
+            &:last-child {
+                margin-bottom: 0;
+            }
+        }
+    }
+}
+
+@media (max-width: 576px) {
+    .nav-underline .nav-link {
+        font-size: 0.8rem;
+        padding: 0.4rem 0.8rem;
+    }
+    
+    .c-card-header h6 {
+        font-size: 0.85rem;
+    }
+    
+    .form-label.small {
+        font-size: 0.75rem;
+    }
+    
+    .btn {
+        font-size: 0.8rem;
+        
+        &.btn-sm {
+            font-size: 0.75rem;
+            padding: 0.2rem 0.4rem;
+        }
+    }
+}
+
+// Material Form Field Compact
+::ng-deep .mat-form-field {
+    .mat-form-field-wrapper {
+        padding-bottom: 0.5em;
+    }
+    
+    .mat-form-field-infix {
+        padding: 0.5em 0;
+    }
+    
+    .mat-form-field-label {
+        font-size: 0.85rem;
+    }
+    
+    input {
+        font-size: 0.85rem;
+    }
+}
+
+// Grid Cell Improvements
+::ng-deep gui-grid {
+    .gui-grid-cell {
+        padding: 0.5rem;
+        font-size: 0.85rem;
+    }
+    
+    .gui-grid-header-cell {
+        font-size: 0.8rem;
+        font-weight: 600;
+        padding: 0.5rem;
+    }
+}
+
+// Tab Info Headers
+.tab-info-header {
+    padding: 1rem 0;
+    
+    h5 {
+        color: #495057;
+        font-weight: 600;
+        font-size: 1.1rem;
+    }
+    
+    .fs-4 {
+        font-size: 1.5rem !important;
+    }
+}
+
+// Utility Classes
+.fw-semibold {
+    font-weight: 600;
+}
+
+.text-xs {
+    font-size: 0.75rem;
+}
+
+.compact-spacing {
+    .c-row {
+        margin-bottom: 0.5rem;
+    }
+    
+    .c-col {
+        padding: 0.25rem;
+    }
+}
+
+// Responsive tab headers
+@media (max-width: 576px) {
+    .tab-info-header {
+        padding: 0.75rem 0;
+        
+        h5 {
+            font-size: 1rem;
+        }
+        
+        .fs-4 {
+            font-size: 1.25rem !important;
+        }
+        
+        .d-flex {
+            flex-direction: column;
+            text-align: center;
+        }
+        
+        .me-2 {
+            margin-right: 0 !important;
+            margin-bottom: 0.5rem;
+        }
+    }
+}
\ No newline at end of file

From 069e53cec6e27957fc1c36dbad6ba94025c41b87 Mon Sep 17 00:00:00 2001
From: sepehr <sepehr.ha@gmail.com>
Date: Thu, 16 Oct 2025 17:34:13 +0300
Subject: [PATCH 11/15] feat: redesign user management interface

- Complete UI/UX overhaul of user manager
- Improved user permissions handling
- Enhanced user role management
- Better user filtering and search capabilities
---
 .../user_manager/user_manager.component.html  | 300 +++++++-----
 .../user_manager/user_manager.component.ts    |  50 ++
 src/app/views/user_manager/user_manager.scss  | 458 ++++++++++++++++++
 3 files changed, 696 insertions(+), 112 deletions(-)

diff --git a/src/app/views/user_manager/user_manager.component.html b/src/app/views/user_manager/user_manager.component.html
index 0637be2..1365cef 100644
--- a/src/app/views/user_manager/user_manager.component.html
+++ b/src/app/views/user_manager/user_manager.component.html
@@ -56,124 +56,200 @@
 
 <c-modal #EditTaskModal backdrop="static" size="lg" [(visible)]="EditTaskModalVisible" id="EditTaskModal">
   <c-modal-header>
-    <h5 *ngIf="SelectedUser['action']=='edit'" cModalTitle>Editing User {{SelectedUser['name']}}</h5>
-    <h5 *ngIf="SelectedUser['action']=='add'" cModalTitle>Adding new User</h5>
+    <h5 *ngIf="SelectedUser['action']=='edit'" cModalTitle><i class="fa-solid fa-user-pen me-1"></i>Edit: {{SelectedUser['username']}}</h5>
+    <h5 *ngIf="SelectedUser['action']=='add'" cModalTitle><i class="fa-solid fa-user-plus me-1"></i>Add User</h5>
     <button [cModalToggle]="EditTaskModal.id" cButtonClose></button>
   </c-modal-header>
-  <c-modal-body>
-    <div [cFormFloating]="true" class="mb-3">
-      <input cFormControl id="floatingInput" placeholder="User Name" [(ngModel)]="SelectedUser['username']" />
-      <label cLabel for="floatingInput">User Name</label>
-    </div>
-
-    <c-input-group class="mb-3">
-      <span cInputGroupText>First Name</span>
-      <input cFormControl id="floatingInput" placeholder="First Name" [(ngModel)]="SelectedUser['first_name']" />
-
-      <span cInputGroupText>Last Name</span>
-      <input cFormControl id="floatingInput" placeholder="Last Name" [(ngModel)]="SelectedUser['last_name']" />
-    </c-input-group>
-
-    <div [cFormFloating]="true" class="mb-3">
-      <input cFormControl id="floatingInput" placeholder="Email Address" [(ngModel)]="SelectedUser['email']" />
-      <label cLabel for="floatingInput">Email Address</label>
-    </div>
-
-    <div [cFormFloating]="true" class="mb-3">
-      <input type="password" cFormControl id="floatingInput" placeholder="Password" [(ngModel)]="SelectedUser['password']" />
-      <label cLabel for="floatingInput">Password</label>
-    </div>
-    <c-input-group>
-    <h5>MikroWizard permisssions :</h5>
-    <c-container>
-      <c-row>
-        <c-col *ngFor='let perm of adminperms | keyvalue' [md]="6" class="mb-1">
-          <label cFormCheckLabel style="text-transform: capitalize">{{ perm.key}} :</label>
-          <c-form-check class="md-6" [switch]="true" style="float: right;">
-            <c-button-group>
-              <c-button-group aria-label="Basic  example" role="group">
-                <button cButton color="info"  variant="outline" size="sm" [active]="adminperms[perm.key]=='read'"
-                  (click)="setRadioValue(perm.key,'read')">Read</button>
-                <button cButton color="danger"  variant="outline" size="sm" [active]="adminperms[perm.key]=='write'"
-                  (click)="setRadioValue(perm.key,'write')">Write</button>
-                  <button cButton color="success"  variant="outline" size="sm" [active]="adminperms[perm.key]=='full'"
-                    (click)="setRadioValue(perm.key,'full')">Full</button>
-                <button cButton color="dark"  variant="outline" size="sm" [active]="adminperms[perm.key]=='none'"
-                  (click)="setRadioValue(perm.key,'none')">None</button>
-              </c-button-group>
-            </c-button-group>
-          </c-form-check>
+  <c-modal-body class="p-3">
+    <!-- User Details -->
+    <div class="user-form-section mb-4">
+      <div class="section-header mb-3">
+        <h6 class="section-title mb-1"><i class="fa-solid fa-user me-2"></i>Basic Information</h6>
+        <small class="text-muted">Enter the user's personal details and login credentials</small>
+      </div>
+      <c-row class="g-3">
+        <c-col xs="12" md="6">
+          <input cFormControl placeholder="Username (required for login)" [(ngModel)]="SelectedUser['username']" 
+            class="form-input" title="Unique username for system login" />
+        </c-col>
+        <c-col xs="12" md="6">
+          <input cFormControl placeholder="Email Address (for notifications)" [(ngModel)]="SelectedUser['email']" 
+            class="form-input" type="email" title="Valid email address for system notifications" />
+        </c-col>
+        <c-col xs="12" md="4">
+          <input cFormControl placeholder="First Name (optional)" [(ngModel)]="SelectedUser['first_name']" 
+            class="form-input" title="User's first name" />
+        </c-col>
+        <c-col xs="12" md="4">
+          <input cFormControl placeholder="Last Name (optional)" [(ngModel)]="SelectedUser['last_name']" 
+            class="form-input" title="User's last name" />
+        </c-col>
+        <c-col xs="12" md="4">
+          <input type="password" cFormControl placeholder="Password (min 6 characters)" [(ngModel)]="SelectedUser['password']" 
+            class="form-input" title="Secure password for user login" />
         </c-col>
       </c-row>
-    </c-container>
-    </c-input-group>
-    <c-input-group *ngIf="userperms.length>0" class="mb-3">
-      <h5>Mikrotik permisssions :</h5>
-      <gui-grid  [autoResizeWidth]="true" [source]="userperms" [columnMenu]="columnMenu" [sorting]="sorting"
-        [autoResizeWidth]=true [paging]="paging" >
-        <gui-grid-column header="Group Name" field="group_name">
-          <ng-template let-value="item.group_name" let-item="item" let-index="index">
-            &nbsp; {{value}} </ng-template>
-        </gui-grid-column>
-        <gui-grid-column header="perm Name" field="perm_name">
-          <ng-template let-value="item.perm_name" let-item="item" let-index="index">
-            {{value}}
-          </ng-template>
-        </gui-grid-column>
-        <gui-grid-column header="Actions" width="120" field="action">
-          <ng-template let-value="item.id" let-item="item" let-index="index">
-            <button cButton color="danger" size="sm" (click)="confirm_delete_perm(item);"><i
-                class="fa-regular fa-trash-can"></i></button>
-          </ng-template>
-        </gui-grid-column>
-      </gui-grid>
-    </c-input-group>
-    <hr />
-    <table >
-      <td style="width: 30%;">
-        <span>Add new Permission</span>
-      </td>
-      <td>
-        <mat-form-field>
-          <mat-select cFormControl [(ngModel)]="devgroup"  placeholder="Device Group" #singleSelect>
-            <mat-option>
-              <ngx-mat-select-search></ngx-mat-select-search>
-            </mat-option>
-            <mat-option *ngFor="let group of allDevGroups" [value]="group">
-              {{group.name}}
-            </mat-option>
-          </mat-select>
-        </mat-form-field>
-      </td>
-      <td>
-        <mat-form-field>
-          <mat-select cFormControl placeholder="Permission" [(ngModel)]="permission" #singleSelect>
-            <mat-option>
-              <ngx-mat-select-search></ngx-mat-select-search>
-            </mat-option>
-            <mat-option *ngFor="let perm of allPerms" [value]="perm">
-              {{perm.name}}
-            </mat-option>
-          </mat-select>
-        </mat-form-field>
-      </td>
-      <td>
-        <button *ngIf="SelectedUser['action']=='edit'" cButton color="primary" (click)="add_user_perm()">Add+</button>
-        <button *ngIf="SelectedUser['action']=='add'" cButton color="primary" (click)="add_new_user_perm()">Add+</button>
-        <!-- <button *ngIf="SelectedUser['action']=='add'" cButton color="primary" (click)="loading=!loading">++</button> -->
-      </td>
-    </table>
-  </c-modal-body>
-  <c-modal-footer  style="justify-content: space-between;">
-    <div>
-      <button *ngIf="SelectedUser['role']!='disabled'" (click)="SelectedUser['role']='disabled'" cButton color="danger">Deactive</button>
-      <button *ngIf="SelectedUser['role']=='disabled'" (click)="SelectedUser['role']='admin'" cButton color="success">Activate</button>
     </div>
+
+    <!-- System Permissions -->
+    <div class="permissions-section mb-4">
+      <div class="section-header mb-3">
+        <h6 class="section-title mb-1"><i class="fa-solid fa-shield-halved me-2"></i>System Access Levels</h6>
+        <small class="text-muted">Control what system features this user can access and modify</small>
+      </div>
+      <div class="permission-legend mb-2">
+        <span class="legend-item"><span class="legend-color bg-info"></span>R = Read Only</span>
+        <span class="legend-item"><span class="legend-color bg-warning"></span>W = Read & Write</span>
+        <span class="legend-item"><span class="legend-color bg-success"></span>F = Full Control</span>
+        <span class="legend-item"><span class="legend-color bg-secondary"></span>× = No Access</span>
+      </div>
+      <div class="permissions-compact">
+        <div *ngFor='let perm of adminperms | keyvalue' class="perm-row">
+          <span class="perm-label">{{ perm.key.replace('_', ' ') }}</span>
+          <div class="perm-controls">
+            <button cButton size="sm" variant="outline" color="info" [active]="adminperms[perm.key]=='read'"
+              (click)="setRadioValue(perm.key,'read')" title="Read Only Access">R</button>
+            <button cButton size="sm" variant="outline" color="warning" [active]="adminperms[perm.key]=='write'"
+              (click)="setRadioValue(perm.key,'write')" title="Read & Write Access">W</button>
+            <button cButton size="sm" variant="outline" color="success" [active]="adminperms[perm.key]=='full'"
+              (click)="setRadioValue(perm.key,'full')" title="Full Control Access">F</button>
+            <button cButton size="sm" variant="outline" color="secondary" [active]="adminperms[perm.key]=='none'"
+              (click)="setRadioValue(perm.key,'none')" title="No Access">×</button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Device Permissions -->
+    <div class="device-permissions-section">
+      <div class="section-header mb-3">
+        <h6 class="section-title mb-1"><i class="fa-solid fa-network-wired me-2"></i>Device Access Control</h6>
+        <small class="text-muted">Grant access to specific device groups with defined permission levels</small>
+      </div>
+      
+      <!-- Add New Permission -->
+      <div class="add-permission-card mb-3">
+        <div class="add-header">
+          <i class="fa-solid fa-plus-circle text-primary me-2"></i>
+          <span class="fw-semibold">Add Device Permission</span>
+        </div>
+        <c-row class="g-2 mt-2">
+          <c-col xs="12" md="5">
+            <div class="search-select-wrapper">
+              <label class="search-label">Device Group</label>
+              <input cFormControl 
+                [(ngModel)]="devgroupSearch" 
+                (input)="filterDevGroups($event)"
+                (focus)="showDevGroupDropdown = true"
+                (blur)="hideDevGroupDropdown()"
+                placeholder="Search and select device group..."
+                class="search-input compact-select"
+                autocomplete="off" />
+              <div *ngIf="showDevGroupDropdown && filteredDevGroups.length > 0" class="search-dropdown">
+                <div *ngFor="let group of filteredDevGroups" 
+                  class="search-option" 
+                  (mousedown)="selectDevGroup(group)">
+                  {{group.name}}
+                </div>
+              </div>
+              <div *ngIf="showDevGroupDropdown && filteredDevGroups.length === 0 && devgroupSearch" class="search-no-results">
+                No groups found
+              </div>
+            </div>
+          </c-col>
+          <c-col xs="12" md="5">
+            <div class="search-select-wrapper">
+              <label class="search-label">Permission Level</label>
+              <input cFormControl 
+                [(ngModel)]="permissionSearch" 
+                (input)="filterPermissions($event)"
+                (focus)="showPermissionDropdown = true"
+                (blur)="hidePermissionDropdown()"
+                placeholder="Search and select permission..."
+                class="search-input compact-select"
+                autocomplete="off" />
+              <div *ngIf="showPermissionDropdown && filteredPermissions.length > 0" class="search-dropdown">
+                <div *ngFor="let perm of filteredPermissions" 
+                  class="search-option" 
+                  (mousedown)="selectPermission(perm)">
+                  {{perm.name}}
+                </div>
+              </div>
+              <div *ngIf="showPermissionDropdown && filteredPermissions.length === 0 && permissionSearch" class="search-no-results">
+                No permissions found
+              </div>
+            </div>
+          </c-col>
+          <c-col xs="12" md="2" class="d-flex align-items-end">
+            <button *ngIf="SelectedUser['action']=='edit'" cButton color="success" size="sm" class="w-100 add-btn" 
+              (click)="add_user_perm()" [disabled]="!devgroup || !permission">
+              <i class="fa-solid fa-plus me-1"></i>Add Access
+            </button>
+            <button *ngIf="SelectedUser['action']=='add'" cButton color="success" size="sm" class="w-100 add-btn" 
+              (click)="add_new_user_perm()" [disabled]="!devgroup || !permission">
+              <i class="fa-solid fa-plus me-1"></i>Add Access
+            </button>
+          </c-col>
+        </c-row>
+      </div>
+
+      <!-- Current Permissions -->
+      <div class="current-permissions">
+        <div class="permissions-header">
+          <h6 class="mb-1"><i class="fa-solid fa-list-check me-2 text-success"></i>Current Device Access</h6>
+          <span class="badge bg-info">{{userperms.length}} permission(s)</span>
+        </div>
+        
+        <div *ngIf="userperms.length>0" class="permissions-list mt-2">
+          <div *ngFor="let perm of userperms; let i = index" class="permission-item">
+            <div class="perm-number">{{i + 1}}</div>
+            <div class="perm-info">
+              <div class="perm-main">
+                <i class="fa-solid fa-server me-1 text-primary"></i>
+                <span class="group-name">{{perm.group_name}}</span>
+              </div>
+              <div class="perm-detail">
+                <i class="fa-solid fa-key me-1 text-warning"></i>
+                <span class="perm-name">{{perm.perm_name}}</span>
+              </div>
+            </div>
+            <button cButton color="danger" size="sm" variant="outline" (click)="confirm_delete_perm(perm)" 
+              title="Remove this permission" class="remove-btn">
+              <i class="fa-solid fa-trash-can"></i>
+            </button>
+          </div>
+        </div>
+        
+        <div *ngIf="userperms.length==0" class="empty-permissions">
+          <div class="empty-icon">
+            <i class="fa-solid fa-shield-xmark text-muted"></i>
+          </div>
+          <div class="empty-text">
+            <strong>No device access granted</strong>
+            <p class="mb-0 text-muted">Add permissions above to grant access to device groups</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </c-modal-body>
+  <c-modal-footer class="d-flex justify-content-between flex-wrap gap-2 p-2">
     <div>
-      <button *ngIf="SelectedUser['action']=='add'" (click)="submit('add')" cButton color="primary">Add</button>
-      <button *ngIf="SelectedUser['action']=='edit'" (click)="submit('edit')" cButton color="primary">save</button>
-      <button [cModalToggle]="EditTaskModal.id" cButton color="secondary">
-        Close
+      <button *ngIf="SelectedUser['role']!='disabled'" (click)="SelectedUser['role']='disabled'" cButton color="danger" size="sm">
+        <i class="fa-solid fa-user-slash me-1"></i><span class="d-none d-sm-inline">Deactivate</span>
+      </button>
+      <button *ngIf="SelectedUser['role']=='disabled'" (click)="SelectedUser['role']='admin'" cButton color="success" size="sm">
+        <i class="fa-solid fa-user-check me-1"></i><span class="d-none d-sm-inline">Activate</span>
+      </button>
+    </div>
+    <div class="d-flex gap-2">
+      <button *ngIf="SelectedUser['action']=='add'" (click)="submit('add')" cButton color="primary" size="sm">
+        <i class="fa-solid fa-plus me-1"></i>Add
+      </button>
+      <button *ngIf="SelectedUser['action']=='edit'" (click)="submit('edit')" cButton color="primary" size="sm">
+        <i class="fa-solid fa-save me-1"></i>Save
+      </button>
+      <button [cModalToggle]="EditTaskModal.id" cButton color="secondary" size="sm">
+        <i class="fa-solid fa-times me-1"></i>Close
       </button>
     </div>
   </c-modal-footer>
diff --git a/src/app/views/user_manager/user_manager.component.ts b/src/app/views/user_manager/user_manager.component.ts
index d41859e..60b6595 100644
--- a/src/app/views/user_manager/user_manager.component.ts
+++ b/src/app/views/user_manager/user_manager.component.ts
@@ -78,6 +78,12 @@ export class UserManagerComponent implements OnInit {
   public permission: any = {};
   public allDevGroups: any = [];
   public allPerms: any = [];
+  public devgroupSearch: string = '';
+  public permissionSearch: string = '';
+  public filteredDevGroups: any = [];
+  public filteredPermissions: any = [];
+  public showDevGroupDropdown: boolean = false;
+  public showPermissionDropdown: boolean = false;
   public DeletePermConfirmModalVisible: boolean = false;
   public userperms: any = {};
   public userresttrictions: any = false;
@@ -129,6 +135,40 @@ export class UserManagerComponent implements OnInit {
     this.adminperms[key] = value;
   }
 
+  filterDevGroups(event: any): void {
+    const query = event.target.value.toLowerCase();
+    this.filteredDevGroups = this.allDevGroups.filter((group: any) => 
+      group.name.toLowerCase().includes(query)
+    );
+  }
+
+  filterPermissions(event: any): void {
+    const query = event.target.value.toLowerCase();
+    this.filteredPermissions = this.allPerms.filter((perm: any) => 
+      perm.name.toLowerCase().includes(query)
+    );
+  }
+
+  selectDevGroup(group: any): void {
+    this.devgroup = group;
+    this.devgroupSearch = group.name;
+    this.showDevGroupDropdown = false;
+  }
+
+  selectPermission(perm: any): void {
+    this.permission = perm;
+    this.permissionSearch = perm.name;
+    this.showPermissionDropdown = false;
+  }
+
+  hideDevGroupDropdown(): void {
+    setTimeout(() => this.showDevGroupDropdown = false, 200);
+  }
+
+  hidePermissionDropdown(): void {
+    setTimeout(() => this.showPermissionDropdown = false, 200);
+  }
+
   public rowSelection: boolean | GuiRowSelection = {
     enabled: true,
     type: GuiRowSelectionType.CHECKBOX,
@@ -226,6 +266,7 @@ export class UserManagerComponent implements OnInit {
       _self.allPerms = res.map((x: any) => {
         return { id: x["id"], name: x.name };
       });
+      _self.filteredPermissions = [..._self.allPerms];
       _self.data_provider.get_devgroup_list().then((res) => {
         if ("error" in res && res.error.indexOf("Unauthorized")) {
           _self.show_toast(
@@ -238,6 +279,7 @@ export class UserManagerComponent implements OnInit {
         _self.allDevGroups = res.map((x: any) => {
           return { id: x["id"], name: x.name };
         });
+        _self.filteredDevGroups = [..._self.allDevGroups];
       }
       });
     }
@@ -254,6 +296,10 @@ export class UserManagerComponent implements OnInit {
         action: "add",
       };
       this.adminperms = { ...this.defadminperms };
+      this.devgroup = {};
+      this.permission = {};
+      this.devgroupSearch = '';
+      this.permissionSearch = '';
       this.EditTaskModalVisible = true;
       return;
     }
@@ -263,6 +309,10 @@ export class UserManagerComponent implements OnInit {
     } else this.adminperms = { ...this.defadminperms };
     _self.SelectedUser["action"] = "edit";
     _self.get_user_perms(_self.SelectedUser["id"]);
+    _self.devgroup = {};
+    _self.permission = {};
+    _self.devgroupSearch = '';
+    _self.permissionSearch = '';
     _self.EditTaskModalVisible = true;
   }
 
diff --git a/src/app/views/user_manager/user_manager.scss b/src/app/views/user_manager/user_manager.scss
index 37a3dcd..e08d0da 100644
--- a/src/app/views/user_manager/user_manager.scss
+++ b/src/app/views/user_manager/user_manager.scss
@@ -1,4 +1,462 @@
 table tr td{
     padding-bottom:20px;
     vertical-align:top
+}
+
+/* Enhanced Modal Styles */
+.permission-item {
+    transition: all 0.2s ease;
+    background: #fafafa;
+    min-height: 60px;
+}
+
+.permission-item:hover {
+    background: #f0f0f0;
+    transform: translateY(-1px);
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+/* Modern Form Sections */
+.user-form-section, .permissions-section, .device-permissions-section {
+    border-radius: 8px;
+    background: #f8f9fa;
+    padding: 1rem;
+    border: 1px solid #e9ecef;
+}
+
+.section-title {
+    color: #495057;
+    font-weight: 600;
+    margin-bottom: 0.75rem;
+    font-size: 0.95rem;
+}
+
+.form-input {
+    border-radius: 6px;
+    border: 1px solid #ced4da;
+    padding: 0.5rem 0.75rem;
+    font-size: 0.9rem;
+    transition: all 0.2s ease;
+}
+
+.form-input:focus {
+    border-color: #0d6efd;
+    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
+}
+
+/* Compact Permissions */
+.permissions-compact {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 0.5rem;
+}
+
+.perm-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.4rem 0.6rem;
+    background: white;
+    border: 1px solid #dee2e6;
+    border-radius: 6px;
+    transition: all 0.2s ease;
+}
+
+.perm-row:hover {
+    background: #f1f3f4;
+    border-color: #adb5bd;
+}
+
+.perm-label {
+    font-size: 0.85rem;
+    font-weight: 500;
+    color: #495057;
+    text-transform: capitalize;
+    flex: 1;
+}
+
+.perm-controls {
+    display: flex;
+    gap: 2px;
+}
+
+.perm-controls .btn {
+    padding: 0.2rem 0.4rem;
+    font-size: 0.7rem;
+    font-weight: 600;
+    min-width: 24px;
+    border-radius: 4px;
+}
+
+/* Section Headers */
+.section-header {
+    border-bottom: 1px solid #e9ecef;
+    padding-bottom: 0.5rem;
+}
+
+/* Permission Legend */
+.permission-legend {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+    padding: 0.5rem;
+    background: #f8f9fa;
+    border-radius: 4px;
+    border: 1px solid #e9ecef;
+}
+
+.legend-item {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    font-size: 0.75rem;
+    color: #6c757d;
+}
+
+.legend-color {
+    width: 12px;
+    height: 12px;
+    border-radius: 2px;
+    display: inline-block;
+}
+
+/* Add Permission Card */
+.add-permission-card {
+    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
+    border: 2px dashed #0d6efd;
+    border-radius: 8px;
+    padding: 1rem;
+    transition: all 0.2s ease;
+}
+
+.add-permission-card:hover {
+    border-color: #0a58ca;
+    background: linear-gradient(135deg, #e7f3ff 0%, #cfe2ff 100%);
+}
+
+.add-header {
+    display: flex;
+    align-items: center;
+    font-size: 0.9rem;
+    color: #495057;
+    margin-bottom: 0.5rem;
+}
+
+.add-btn {
+    font-weight: 600;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+.add-btn:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+
+/* Current Permissions */
+.current-permissions {
+    background: white;
+    border-radius: 8px;
+    border: 1px solid #dee2e6;
+    overflow: hidden;
+}
+
+.permissions-header {
+    background: #f8f9fa;
+    padding: 0.75rem 1rem;
+    border-bottom: 1px solid #dee2e6;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.permissions-list {
+    max-height: 250px;
+    overflow-y: auto;
+}
+
+.permission-item {
+    display: flex;
+    align-items: center;
+    padding: 0.75rem 1rem;
+    border-bottom: 1px solid #f1f3f4;
+    transition: all 0.2s ease;
+}
+
+.permission-item:last-child {
+    border-bottom: none;
+}
+
+.permission-item:hover {
+    background: #f8f9fa;
+}
+
+.perm-number {
+    background: #0d6efd;
+    color: white;
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.75rem;
+    font-weight: 600;
+    margin-right: 0.75rem;
+    flex-shrink: 0;
+}
+
+.perm-info {
+    flex: 1;
+}
+
+.perm-main {
+    display: flex;
+    align-items: center;
+    margin-bottom: 0.25rem;
+}
+
+.perm-detail {
+    display: flex;
+    align-items: center;
+}
+
+.group-name {
+    font-size: 0.85rem;
+    font-weight: 600;
+    color: #495057;
+}
+
+.perm-name {
+    font-size: 0.75rem;
+    color: #6c757d;
+}
+
+.remove-btn {
+    margin-left: 0.5rem;
+    flex-shrink: 0;
+}
+
+/* Empty State */
+.empty-permissions {
+    display: flex;
+    align-items: center;
+    padding: 2rem 1rem;
+    text-align: center;
+}
+
+.empty-icon {
+    font-size: 2rem;
+    margin-right: 1rem;
+    opacity: 0.5;
+}
+
+.empty-text strong {
+    display: block;
+    margin-bottom: 0.25rem;
+    color: #495057;
+}
+
+.compact-select {
+    font-size: 0.85rem;
+    height: calc(1.8em + 0.75rem + 2px);
+    padding: 0.375rem 0.75rem;
+    border-radius: 0.375rem;
+}
+
+.compact-select:focus {
+    border-color: #0d6efd;
+    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
+}
+
+/* Search Select Components */
+.search-select-wrapper {
+    position: relative;
+}
+
+.search-label {
+    display: block;
+    font-size: 0.8rem;
+    color: #6c757d;
+    margin-bottom: 0.25rem;
+    font-weight: 500;
+}
+
+.search-input {
+    width: 100%;
+}
+
+.search-dropdown {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    background: white;
+    border: 1px solid #ced4da;
+    border-top: none;
+    border-radius: 0 0 0.375rem 0.375rem;
+    max-height: 200px;
+    overflow-y: auto;
+    z-index: 1000;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+.search-option {
+    padding: 0.5rem 0.75rem;
+    cursor: pointer;
+    border-bottom: 1px solid #f1f3f4;
+    font-size: 0.85rem;
+    transition: background-color 0.2s ease;
+}
+
+.search-option:hover {
+    background-color: #f8f9fa;
+}
+
+.search-option:last-child {
+    border-bottom: none;
+}
+
+.search-no-results {
+    padding: 0.75rem;
+    text-align: center;
+    color: #6c757d;
+    font-size: 0.8rem;
+    font-style: italic;
+    background: white;
+    border: 1px solid #ced4da;
+    border-top: none;
+    border-radius: 0 0 0.375rem 0.375rem;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    z-index: 1000;
+}
+
+.badge {
+    font-size: 0.7rem;
+}
+
+.add-permission-form {
+    border: 1px dashed #dee2e6;
+}
+
+.c-modal-body {
+    max-height: 85vh;
+    overflow-y: auto;
+}
+
+.c-card-header {
+    border-bottom: 1px solid #e9ecef;
+}
+
+.permission-item small {
+    color: #6c757d;
+    font-weight: 500;
+}
+
+.c-button-group .btn {
+    font-size: 0.75rem;
+    font-weight: 500;
+    min-width: 28px;
+}
+
+.compact-field {
+    font-size: 0.85rem;
+}
+
+.compact-field .mat-form-field-wrapper {
+    padding-bottom: 0.5em;
+}
+
+/* Mobile Responsive */
+@media (max-width: 576px) {
+    .c-modal-dialog {
+        margin: 0.25rem;
+    }
+    
+    .user-form-section, .permissions-section, .device-permissions-section {
+        padding: 0.75rem;
+        margin-bottom: 0.75rem;
+    }
+    
+    .permissions-compact {
+        grid-template-columns: 1fr;
+    }
+    
+    .perm-row {
+        flex-direction: column;
+        align-items: stretch;
+        gap: 0.5rem;
+        padding: 0.5rem;
+    }
+    
+    .perm-label {
+        text-align: center;
+        margin-bottom: 0.25rem;
+    }
+    
+    .perm-controls {
+        justify-content: center;
+    }
+    
+    .add-permission-card {
+        padding: 0.75rem;
+    }
+    
+    .permission-legend {
+        gap: 0.5rem;
+        justify-content: center;
+    }
+    
+    .permissions-header {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 0.5rem;
+    }
+    
+    .empty-permissions {
+        flex-direction: column;
+        text-align: center;
+    }
+    
+    .empty-icon {
+        margin-right: 0;
+        margin-bottom: 0.5rem;
+    }
+    
+    .section-title {
+        font-size: 0.9rem;
+    }
+    
+    .c-button-group .btn {
+        font-size: 0.7rem;
+        padding: 0.25rem 0.3rem;
+        min-width: 24px;
+    }
+    
+    .c-modal-body {
+        max-height: 90vh;
+        padding: 0.5rem !important;
+    }
+    
+    .c-card-body {
+        padding: 0.75rem !important;
+    }
+    
+    .add-permission-form {
+        padding: 0.75rem !important;
+    }
+}
+
+@media (max-width: 768px) {
+    .c-modal-footer {
+        flex-direction: column;
+        align-items: stretch;
+    }
+    
+    .c-modal-footer > div {
+        width: 100%;
+        text-align: center;
+    }
 }
\ No newline at end of file

From 07808822f76a611a891f366cc5b7aec8502dce24 Mon Sep 17 00:00:00 2001
From: sepehr <sepehr.ha@gmail.com>
Date: Thu, 16 Oct 2025 17:34:19 +0300
Subject: [PATCH 12/15] feat: redesign backups management interface

- Complete UI/UX redesign of backups module
- Improved backup viewing and management
- Enhanced backup operations interface
- Better backup history and restoration
---
 src/app/views/backups/backups.component.html | 248 +++++++++++++------
 src/app/views/backups/backups.component.scss |  65 +++++
 src/app/views/backups/backups.component.ts   |  74 ++++--
 src/app/views/backups/backups.module.ts      |   3 +-
 4 files changed, 298 insertions(+), 92 deletions(-)

diff --git a/src/app/views/backups/backups.component.html b/src/app/views/backups/backups.component.html
index 2ccdd5e..cd82daa 100644
--- a/src/app/views/backups/backups.component.html
+++ b/src/app/views/backups/backups.component.html
@@ -2,58 +2,97 @@
   <c-col xs>
     <c-card class="mb-4">
       <c-card-header>
-        <c-row>
-          <c-col xs [lg]="8">
-            Backups <c-badge color="warning" *ngIf="devid!=0">Filtered Result For Device ID {{devid}}</c-badge>
+        <c-row class="align-items-center">
+          <c-col xs [lg]="6">
+            <div class="d-flex align-items-center">
+              <h5 class="mb-0 me-3"><i class="fa-solid fa-database me-2"></i>Backups</h5>
+              <c-badge color="warning" *ngIf="devid!=0" class="fs-6">
+                <i class="fa-solid fa-filter me-1"></i>Device ID {{devid}}
+              </c-badge>
+            </div>
           </c-col>
-          <c-col xs [lg]="3">
-            <c-row>
-              <c-col>
-                <ng-container *ngIf="compareitems.length>0">
-                  <div>
-                    <c-badge color="dark" style="font-size: 0.7rem;"
-                      *ngFor="let item of compareitems;index as i">{{item.id}}:{{item.devname}} {{item.createdC}} <span
-                        style="cursor: pointer;" (click)="delete_compare(i)">X</span></c-badge>
+          <c-col xs [lg]="6">
+            <div class="d-flex justify-content-end align-items-center gap-2">
+              <!-- Compare Selection Panel -->
+              <div *ngIf="compareitems.length > 0" class="compare-panel me-2">
+                <div class="d-flex align-items-center gap-2">
+                  <c-badge color="info" class="fs-6">
+                    <i class="fa-solid fa-code-compare me-1"></i>{{compareitems.length}} Selected
+                  </c-badge>
+                  <div class="selected-items d-flex gap-1">
+                    <c-badge color="secondary" *ngFor="let item of compareitems; index as i" 
+                      class="selected-item d-flex align-items-center">
+                      <span class="me-1">{{item.devname}}</span>
+                      <i class="fa-solid fa-times cursor-pointer" (click)="delete_compare(i)" 
+                        title="Remove from comparison"></i>
+                    </c-badge>
                   </div>
-                </ng-container>
-              </c-col>
-              <c-col style="padding: 0;">
-                <button *ngIf="compareitems.length>1" (click)="start_compare()" cButton class="me-1"
-                  color="primary">Compare</button>
-              </c-col>
-            </c-row>
-          </c-col>
-          <c-col styyle="border-left: 1px solid #ccc;" xs [lg]="1">
-            <button (click)="toggleCollapse()" cButton class="me-1" color="primary"><i
-                class="fa-solid fa-filter mr-1"></i>Filter</button>
+                  <button *ngIf="compareitems.length > 1" (click)="start_compare()" 
+                    cButton color="success" size="sm">
+                    <i class="fa-solid fa-code-compare me-1"></i>Compare
+                  </button>
+                  <button (click)="clearAllCompare()" cButton color="secondary" size="sm" variant="outline">
+                    <i class="fa-solid fa-trash me-1"></i>Clear
+                  </button>
+                </div>
+              </div>
+              <!-- Filter Toggle -->
+              <button (click)="toggleCollapse()" cButton color="primary" variant="outline">
+                <i class="fa-solid fa-filter me-1"></i>Filters
+                <i class="fa-solid" [class]="filters_visible ? 'fa-chevron-up' : 'fa-chevron-down'" 
+                  style="margin-left: 0.5rem; font-size: 0.8rem;"></i>
+              </button>
+            </div>
           </c-col>
         </c-row>
       </c-card-header>
       <c-card-body>
-        <c-row>
-          <div [visible]="filters_visible" cCollapse>
-            <c-col xs [lg]="12" class="example-form">
-              <mat-form-field>
-                <mat-label>Start date</mat-label>
-                <input matInput [matDatepicker]="picker1" (dateChange)="reinitgrid('start',$event)"
-                  [(ngModel)]="filters['start_time']" />
-                <mat-datepicker-toggle matIconSuffix [for]="picker1"></mat-datepicker-toggle>
-                <mat-datepicker #picker1></mat-datepicker>
-              </mat-form-field>
-              <mat-form-field>
-                <mat-label>End date</mat-label>
-                <input matInput [matDatepicker]="picker2" (dateChange)="reinitgrid('end',$event)"
-                  [(ngModel)]="filters['end_time']" />
-                <mat-datepicker-toggle matIconSuffix [for]="picker2"></mat-datepicker-toggle>
-                <mat-datepicker #picker2></mat-datepicker>
-              </mat-form-field>
-              <mat-form-field *ngIf="ispro">
-                <mat-label>Config search</mat-label>
-                <input (ngModelChange)="reinitgrid('search',$event)" [(ngModel)]="filters['search']" matInput>
-              </mat-form-field>
-            </c-col>
-          </div>
-        </c-row>
+        <!-- Enhanced Filter Panel -->
+        <div [visible]="filters_visible" cCollapse class="mb-3">
+          <c-card class="border-0 bg-light">
+            <c-card-body class="py-3">
+              <c-row class="g-3 align-items-end">
+                <c-col xs="12" md="4">
+                  <div class="filter-group">
+                    <label class="form-label fw-semibold mb-2">
+                      <i class="fa-solid fa-calendar-days me-1 text-primary"></i>Start Date
+                    </label>
+                    <mat-form-field appearance="outline" class="w-100">
+                      <input matInput [matDatepicker]="picker1" (dateChange)="reinitgrid('start',$event)"
+                        [(ngModel)]="filters['start_time']" placeholder="Select start date" />
+                      <mat-datepicker-toggle matIconSuffix [for]="picker1"></mat-datepicker-toggle>
+                      <mat-datepicker #picker1></mat-datepicker>
+                    </mat-form-field>
+                  </div>
+                </c-col>
+                <c-col xs="12" md="4">
+                  <div class="filter-group">
+                    <label class="form-label fw-semibold mb-2">
+                      <i class="fa-solid fa-calendar-days me-1 text-primary"></i>End Date
+                    </label>
+                    <mat-form-field appearance="outline" class="w-100">
+                      <input matInput [matDatepicker]="picker2" (dateChange)="reinitgrid('end',$event)"
+                        [(ngModel)]="filters['end_time']" placeholder="Select end date" />
+                      <mat-datepicker-toggle matIconSuffix [for]="picker2"></mat-datepicker-toggle>
+                      <mat-datepicker #picker2></mat-datepicker>
+                    </mat-form-field>
+                  </div>
+                </c-col>
+                <c-col xs="12" md="4" *ngIf="ispro">
+                  <div class="filter-group">
+                    <label class="form-label fw-semibold mb-2">
+                      <i class="fa-solid fa-magnifying-glass me-1 text-primary"></i>Config Search
+                    </label>
+                    <mat-form-field appearance="outline" class="w-100">
+                      <input (ngModelChange)="reinitgrid('search',$event)" [(ngModel)]="filters['search']" 
+                        matInput placeholder="Search in configurations...">
+                    </mat-form-field>
+                  </div>
+                </c-col>
+              </c-row>
+            </c-card-body>
+          </c-card>
+        </div>
         <gui-grid [source]="source" [paging]="paging" [columnMenu]="columnMenu" [sorting]="sorting"
           [infoPanel]="infoPanel" [columnMenu]="columnMenu" [sorting]="sorting" [infoPanel]="infoPanel"
           [autoResizeWidth]=true>
@@ -87,13 +126,29 @@
               {{value}}
             </ng-template>
           </gui-grid-column>
-          <gui-grid-column header="Action" field="id">
+          <gui-grid-column header="Actions" field="id" width="280">
             <ng-template let-value="item.id" let-item="item" let-index="index">
-              <button cButton [disabled]="backuploading" color="info" size="sm" (click)="ShowBackup(item)" class="mx-1">
-                <i *ngIf="backuploading" style="margin: 1px 5px;color:#ffffff;" class="fa-solid fa-spinner fa-spin"></i>
-                <i *ngIf="!backuploading" style="margin: 1px 5px;color:#ffffff;" class="fa-solid fa-eye"></i>Show backup</button>
-              <button *ngIf="ispro" cButton color="info" size="sm" (click)="add_for_compare(item)" class="mx-1"><i
-                  style="margin: 1px 5px;color:#ffffff;" class="fa-solid fa-eye"></i>Compare</button>
+              <div class="d-flex gap-1">
+                <button cButton [disabled]="backuploading" color="primary" size="sm" 
+                  (click)="ShowBackup(item)" variant="outline" title="View backup content">
+                  <i *ngIf="backuploading && currentBackup?.id === item.id" 
+                    class="fa-solid fa-spinner fa-spin me-1"></i>
+                  <i *ngIf="!backuploading || currentBackup?.id !== item.id" 
+                    class="fa-solid fa-eye me-1"></i>
+                  View
+                </button>
+                <button *ngIf="ispro" cButton color="info" size="sm" variant="outline"
+                  (click)="add_for_compare(item)" title="Add to comparison"
+                  [disabled]="isInCompareList(item)">
+                  <i class="fa-solid fa-code-compare me-1"></i>
+                  {{isInCompareList(item) ? 'Added' : 'Compare'}}
+                </button>
+                <button *ngIf="ispro" cButton color="warning" size="sm" variant="outline"
+                  (click)="restore_backup(false, false, item)" title="Restore this backup">
+                  <i class="fa-solid fa-rotate-left me-1"></i>
+                  Restore
+                </button>
+              </div>
             </ng-template>
           </gui-grid-column>
         </gui-grid>
@@ -164,31 +219,80 @@
   </c-modal-footer>
 </c-modal>
 
+<!-- Initial Restore Confirmation -->
 <c-modal #ConfirmModal backdrop="static" [(visible)]="ConfirmModalVisible" id="runConfirmModal">
-  <c-modal-header>
-    <h6 cModalTitle>Please Confirm Action </h6>
+  <c-modal-header class="bg-warning text-dark">
+    <h5 cModalTitle><i class="fa-solid fa-exclamation-triangle me-2"></i>Confirm Backup Restore</h5>
     <button [cModalToggle]="ConfirmModal.id" cButtonClose></button>
   </c-modal-header>
-  <c-modal-body>
-    <span>restore backup ?</span>
-    <ng-container>
-      Are you sure that You want to <code style="padding: 0!important;">Restore this configuration</code> on
-      device?<br />
-      <hr>
-      <p class="text-danger">
-        All Current device configuration will be reset:<br /><br />
-        * All state data/history on router will be reset<br />
-        * All other local users on router will be deleted<br />
-        * After restore the password of the local user will be same as configured in MikroWizard<br />
-      </p>
-    </ng-container>
+  <c-modal-body class="p-4">
+    <div class="text-center mb-3">
+      <i class="fa-solid fa-rotate-left fa-3x text-warning mb-3"></i>
+      <h6>Restore Configuration Backup</h6>
+    </div>
+    
+    <div class="backup-info bg-light p-3 rounded mb-3">
+      <h6 class="mb-2"><i class="fa-solid fa-info-circle me-2 text-primary"></i>Backup Details</h6>
+      <div class="row">
+        <div class="col-6"><strong>Device:</strong> {{currentBackup?.devname}}</div>
+        <div class="col-6"><strong>IP:</strong> {{currentBackup?.devip}}</div>
+        <div class="col-6"><strong>Date:</strong> {{currentBackup?.createdC}}</div>
+        <div class="col-6"><strong>Size:</strong> {{currentBackup?.filesize}}</div>
+      </div>
+    </div>
+
+    <c-alert color="danger" class="mb-0">
+      <h6 class="alert-heading"><i class="fa-solid fa-warning me-2"></i>Critical Warning</h6>
+      <p class="mb-2">This action will completely reset the device configuration:</p>
+      <ul class="mb-0">
+        <li>All current device configuration will be overwritten</li>
+        <li>All state data and history on router will be reset</li>
+        <li>All other local users on router will be deleted</li>
+        <li>Device will reboot and apply the restored configuration</li>
+      </ul>
+    </c-alert>
   </c-modal-body>
-  <c-modal-footer>
-    <button *ngIf="ispro" (click)="restore_backup(true)" cButton color="info">
-      Restore this
+  <c-modal-footer class="d-flex justify-content-between">
+    <button cButton [cModalToggle]="ConfirmModal.id" color="secondary">
+      <i class="fa-solid fa-times me-1"></i>Cancel
     </button>
-    <button cButton [cModalToggle]="ConfirmModal.id" color="info">
-      Cancel
+    <button *ngIf="ispro" (click)="restore_backup(true, false)" cButton color="warning">
+      <i class="fa-solid fa-arrow-right me-1"></i>Continue to Final Confirmation
+    </button>
+  </c-modal-footer>
+</c-modal>
+
+<!-- Critical Double Confirmation -->
+<c-modal #CriticalConfirmModal backdrop="static" [(visible)]="CriticalConfirmModalVisible" id="CriticalConfirmModal">
+  <c-modal-header class="bg-danger text-white">
+    <h5 cModalTitle><i class="fa-solid fa-skull-crossbones me-2"></i>CRITICAL: Final Confirmation Required</h5>
+  </c-modal-header>
+  <c-modal-body class="p-4">
+    <div class="text-center mb-4">
+      <i class="fa-solid fa-exclamation-triangle fa-4x text-danger mb-3"></i>
+      <h5 class="text-danger">DESTRUCTIVE ACTION</h5>
+      <p class="mb-0">You are about to permanently overwrite device configuration</p>
+    </div>
+
+    <div class="confirmation-box bg-light border border-danger p-3 rounded">
+      <p class="mb-3 fw-bold">To proceed with this critical action, type <code>CONFIRM</code> in the box below:</p>
+      <input cFormControl [(ngModel)]="confirmationText" placeholder="Type CONFIRM to proceed" 
+        class="form-control text-center fw-bold" style="letter-spacing: 2px;" />
+    </div>
+
+    <c-alert color="info" class="mt-3 mb-0">
+      <small><i class="fa-solid fa-info-circle me-1"></i>
+        This confirmation ensures you understand the critical nature of this operation.
+      </small>
+    </c-alert>
+  </c-modal-body>
+  <c-modal-footer class="d-flex justify-content-between">
+    <button (click)="cancelCriticalRestore()" cButton color="secondary">
+      <i class="fa-solid fa-times me-1"></i>Cancel
+    </button>
+    <button (click)="restore_backup(true, true)" cButton color="danger" 
+      [disabled]="confirmationText !== 'CONFIRM'">
+      <i class="fa-solid fa-rotate-left me-1"></i>RESTORE BACKUP
     </button>
   </c-modal-footer>
 </c-modal>
diff --git a/src/app/views/backups/backups.component.scss b/src/app/views/backups/backups.component.scss
index ef17e02..16b7298 100644
--- a/src/app/views/backups/backups.component.scss
+++ b/src/app/views/backups/backups.component.scss
@@ -1,7 +1,72 @@
 @import 'ngx-diff/styles/default-theme';
+
 ::ng-deep .modal-xl {
     --cui-modal-width: 90vw!important;
 }
+
 ::ng-deep pre {
     display: block!important;
+}
+
+// Enhanced UI Styles
+.compare-panel {
+    background: rgba(13, 110, 253, 0.1);
+    border: 1px solid rgba(13, 110, 253, 0.2);
+    border-radius: 0.375rem;
+    padding: 0.5rem;
+}
+
+.selected-item {
+    font-size: 0.75rem;
+    
+    .fa-times {
+        font-size: 0.7rem;
+        opacity: 0.7;
+        transition: opacity 0.2s;
+        
+        &:hover {
+            opacity: 1;
+        }
+    }
+}
+
+.cursor-pointer {
+    cursor: pointer;
+}
+
+.filter-group {
+    .form-label {
+        font-size: 0.875rem;
+        color: #495057;
+    }
+    
+    ::ng-deep .mat-mdc-form-field {
+        .mat-mdc-text-field-wrapper {
+            background-color: white;
+        }
+    }
+}
+
+.confirmation-box {
+    input {
+        font-size: 1.1rem;
+        
+        &:focus {
+            border-color: #dc3545;
+            box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
+        }
+    }
+}
+
+// Action buttons spacing
+.d-flex.gap-1 {
+    gap: 0.25rem !important;
+}
+
+// Backup info styling
+.backup-info {
+    .row > div {
+        margin-bottom: 0.5rem;
+        font-size: 0.9rem;
+    }
 }
\ No newline at end of file
diff --git a/src/app/views/backups/backups.component.ts b/src/app/views/backups/backups.component.ts
index 24409fc..68a0b62 100644
--- a/src/app/views/backups/backups.component.ts
+++ b/src/app/views/backups/backups.component.ts
@@ -30,11 +30,13 @@ export class BackupsComponent implements OnInit {
 	public codeForHighlightAuto: string = "";
 	public ispro: boolean = false;
 	public ConfirmModalVisible: boolean = false;
+	public CriticalConfirmModalVisible: boolean = false;
 	public CompareModalVisible: boolean = false;
 	public compareitems:any=[];
 	public comparecontents:any=[];
 	public compare_type="unified";
 	public copy_msg:boolean=false;
+	public confirmationText: string = '';
 	
 	constructor(
 		private data_provider: dataProvider,
@@ -186,31 +188,55 @@ export class BackupsComponent implements OnInit {
 		this.filters_visible = !this.filters_visible;
 	}
 
-	restore_backup(apply:boolean=false){
-		var _slef=this;
-		if (!apply){
+	restore_backup(apply: boolean = false, doubleConfirmed: boolean = false, backup?: any) {
+		var _self = this;
+		
+		// Set current backup if provided
+		if (backup) {
+			this.currentBackup = backup;
+		}
+		
+		if (!apply) {
+			// Step 1: Show initial confirmation
 			this.ConfirmModalVisible = true;
 			return;
 		}
-		if (!this.currentBackup)
+		
+		if (!this.currentBackup) {
 			return;
-		if(apply){
-			_slef.ConfirmModalVisible = false;
-			_slef.BakcupModalVisible = true;
-			this.show_toast('Success', 'Backup restored successfully', 'success')
-			this.show_toast('Info', 'Wait for the router to reboot and apply config', 'info')
+		}
+		
+		if (apply && !doubleConfirmed) {
+			// Step 2: Show critical confirmation
+			this.ConfirmModalVisible = false;
+			this.CriticalConfirmModalVisible = true;
+			this.confirmationText = '';
+			return;
+		}
+		
+		if (apply && doubleConfirmed) {
+			// Step 3: Execute restore
+			_self.CriticalConfirmModalVisible = false;
+			_self.BakcupModalVisible = false;
+			
 			this.data_provider.restore_backup(this.currentBackup.id).then((res) => {
-				if ('status' in res){
-					if(res['status']=='success'){
-						this.show_toast('Success', 'Backup restored successfully', 'success')
-						this.show_toast('Info', 'Wait for the router to reboot and apply config', 'info')
+				if ('status' in res) {
+					if (res['status'] == 'success') {
+						this.show_toast('Success', 'Backup restored successfully', 'success');
+						this.show_toast('Info', 'Wait for the router to reboot and apply config', 'info');
+					} else {
+						this.show_toast('Error', 'Error restoring backup', 'danger');
 					}
-					else
-						this.show_toast('Error', 'Error restoring backup', 'danger')
 				}
 			});
 		}
 	}
+	
+	cancelCriticalRestore() {
+		this.CriticalConfirmModalVisible = false;
+		this.confirmationText = '';
+		this.currentBackup = null;
+	}
 
 	start_compare(){
 		var _self=this;
@@ -243,10 +269,20 @@ export class BackupsComponent implements OnInit {
 			this.compareitems.push(item);
 		}
 	}
-	delete_compare(i:number){
-		//delete item index i from compareitems
-		this.compareitems.splice(i,1);
-
+	delete_compare(i: number) {
+		// Delete item index i from compareitems
+		this.compareitems.splice(i, 1);
+	}
+	
+	clearAllCompare() {
+		// Clear all compare items
+		this.compareitems = [];
+		this.comparecontents = [];
+	}
+	
+	isInCompareList(item: any): boolean {
+		// Check if item is already in compare list
+		return this.compareitems.some((compareItem: any) => compareItem.id === item.id);
 	}
 	reinitgrid(field: string, $event: any) {
 		if (field == "start") this.filters["start_time"] = $event.target.value;
diff --git a/src/app/views/backups/backups.module.ts b/src/app/views/backups/backups.module.ts
index 9d6d18c..b24187a 100644
--- a/src/app/views/backups/backups.module.ts
+++ b/src/app/views/backups/backups.module.ts
@@ -12,6 +12,7 @@ import {
   ModalModule,
   FormModule,
   ToastModule,
+  AlertModule,
 } from "@coreui/angular";
 
 import { BackupsRoutingModule } from "./backups-routing.module";
@@ -34,10 +35,10 @@ import { ClipboardModule } from "@angular/cdk/clipboard";
     FormModule,
     FormsModule,
     ButtonModule,
-    ButtonModule,
     GuiGridModule,
     CollapseModule,
     BadgeModule,
+    AlertModule,
     Highlight,
     HighlightAuto,
     HighlightLineNumbers,

From 433dcff5db91211e91ea239c4530fba26377aaad Mon Sep 17 00:00:00 2001
From: sepehr <sepehr.ha@gmail.com>
Date: Thu, 16 Oct 2025 17:34:28 +0300
Subject: [PATCH 13/15] feat: settings redesign and core improvements

- Redesign settings interface with improved UX
- Enhanced dashboard functionality
- Improved device detail views
- Updated core data providers
- Minor snippet management improvements
---
 src/app/providers/mikrowizard/data.ts         |  33 +-
 .../views/dashboard/dashboard.component.html  |  62 +-
 src/app/views/dashboard/dashboard.module.ts   |   1 -
 .../views/device_detail/device.component.ts   |  18 +-
 .../views/settings/settings.component.html    | 718 ++++++++++++------
 .../views/settings/settings.component.scss    | 624 ++++++++++++++-
 src/app/views/settings/settings.component.ts  |  70 ++
 src/app/views/settings/settings.module.ts     |   8 +-
 src/app/views/snippets/snippets.component.ts  |   2 +-
 9 files changed, 1290 insertions(+), 246 deletions(-)

diff --git a/src/app/providers/mikrowizard/data.ts b/src/app/providers/mikrowizard/data.ts
index ba6c8a4..6bc40f6 100644
--- a/src/app/providers/mikrowizard/data.ts
+++ b/src/app/providers/mikrowizard/data.ts
@@ -278,13 +278,14 @@ export class dataProvider {
         return this.MikroWizardRPC.sendJsonRequest("/api/devgroup/update_save_group", data);
     }
 
-    get_snippets(name:string,desc:string,content:string,page:number=0,size:number=1000){
+    get_snippets(name:string,desc:string,content:string,page:number=0,size:number=1000,limit:any=false){
         var data={
             'name':name,
             'description':desc,
             'content':content, 
             'page':page,
-            'size':size
+            'size':size,
+            'limit':limit
         }
         return this.MikroWizardRPC.sendJsonRequest("/api/snippet/list", data);
     }
@@ -601,6 +602,34 @@ export class dataProvider {
         }
         return this.MikroWizardRPC.sendJsonRequest("/api/dhcp-history/get", data);
     }
+
+    getNetworkMap(){
+        return this.MikroWizardRPC.sendJsonRequest("/api/networkmap/get", {});
+    }
+
+    bulk_add_devices(devices: any[]){
+        var data = {
+            'devices': devices
+        }
+        return this.MikroWizardRPC.sendJsonRequest("/api/dev/bulk_add", data);
+    }
+
+    bulk_add_status(taskId: string){
+        var data = {
+            'taskId': taskId
+        }
+        return this.MikroWizardRPC.sendJsonRequest("/api/dev/bulk_add_status", data);
+    }
+
+    group_firmware_action(groupId: number, action: string){
+        var data = {
+            'groupId': groupId,
+            'action': action
+        }
+        return this.MikroWizardRPC.sendJsonRequest("/api/devgroup/firmware_action", data);
+    }
+
+
     ////
     //// End api funcs
     ////
diff --git a/src/app/views/dashboard/dashboard.component.html b/src/app/views/dashboard/dashboard.component.html
index af6b2e9..1fa301a 100644
--- a/src/app/views/dashboard/dashboard.component.html
+++ b/src/app/views/dashboard/dashboard.component.html
@@ -1,11 +1,23 @@
-<c-row *ngIf="stats">
+<c-row>
   <c-col xs>
-    <c-card *ngIf="stats" class="mb-1">
+    <c-card class="mb-1">
       <c-card-header>Past 24 Hour Statics</c-card-header>
       <c-card-body>
         <c-row>
           <c-col md="12" xl="12" xs="12">
-            <c-row>
+            <c-row *ngIf="!stats">
+              <c-col class="mb-sm-1 mb-0" *ngFor="let item of [1,2,3,4,5]">
+                <c-card class="mb-1">
+                  <c-card-body>
+                    <div class="placeholder-glow">
+                      <div class="placeholder col-3 mb-2" style="height: 40px;"></div>
+                      <div class="placeholder col-6"></div>
+                    </div>
+                  </c-card-body>
+                </c-card>
+              </c-col>
+            </c-row>
+            <c-row *ngIf="stats">
               <c-col class="mb-sm-1 mb-0">
                 <c-widget-stat-f [title]="'Failed Logins'" class="mb-1" color="danger" padding
                   value="{{stats['FailedLogins']}}">
@@ -53,7 +65,17 @@
         <c-col xs>
           <c-row>
             <c-col md="12" xl="12" xs="12">
-              <c-row>
+              <c-row *ngIf="!stats">
+                <c-col class="mb-0 pb-0" *ngFor="let item of [1,2,3,4,5]">
+                  <div class="border-start border-start-4 border-start-info pt-1 px-3 mb-1">
+                    <div class="placeholder-glow">
+                      <div class="placeholder col-8"></div>
+                      <div class="placeholder col-6"></div>
+                    </div>
+                  </div>
+                </c-col>
+              </c-row>
+              <c-row *ngIf="stats">
                 <c-col class="mb-0 pb-0">
                   <div class="border-start border-start-4 border-start-info pt-1 px-3 mb-1">
                     <div class="text-medium-emphasis small">Total users</div>
@@ -120,16 +142,28 @@
         </form>
       </c-col>
     </c-row>
-    <c-chart [data]="chart_data" [options]="options" [height]="250" type="line">
+    <div *ngIf="!chart_data.datasets" style="height: 250px;">
+      <div class="placeholder-glow" style="height: 100%;">
+        <div class="placeholder col-12" style="height: 250px;"></div>
+      </div>
+    </div>
+    <c-chart *ngIf="chart_data.datasets" [data]="chart_data" [options]="options" [height]="250" type="line">
     </c-chart>
   </c-card-body>
 </c-card>
 <c-row>
-  <c-col xl="6" *ngIf="stats" lg="12" class="h-100" style="min-height: 160px!important;display: grid">
+  <c-col xl="6" lg="12" class="h-100" style="min-height: 160px!important;display: grid">
     <c-card class="mb-1 p-1 h-100" style="padding-left: 5px!important;">
       <div class="my-1">
         <h4 style="display: inline-block;">Version and Serial information</h4>
-
+      </div>
+      <div *ngIf="!stats">
+        <div class="placeholder-glow">
+          <div class="placeholder col-8"></div>
+          <div class="placeholder col-6"></div>
+          <div class="placeholder col-10"></div>
+          <div class="placeholder col-7"></div>
+        </div>
       </div>
       <div *ngIf="!stats['license']" class="my-1">
         <div style="display: inline-block;margin-right: 5px;">
@@ -199,8 +233,18 @@
     </c-card>
   </c-col>
   <c-col xl="6" lg="12" class="h-100" style="min-height: 160px!important;display: grid;">
-    <c-card class="h-100" *ngIf="stats" style="padding: 0!important;margin: 0!important;">
-      <c-carousel [dark]="true" [animate]="false" [wrap]="false" [interval]="1000000">
+    <c-card class="h-100" style="padding: 0!important;margin: 0!important;">
+      <div *ngIf="!stats" style="padding: 20px;">
+        <div class="placeholder-glow">
+          <div class="placeholder col-4" style="height: 150px; float: left; margin-right: 20px;"></div>
+          <div class="placeholder col-7">
+            <div class="placeholder col-12"></div>
+            <div class="placeholder col-10"></div>
+            <div class="placeholder col-8"></div>
+          </div>
+        </div>
+      </div>
+      <c-carousel *ngIf="stats" [dark]="true" [animate]="false" [wrap]="false" [interval]="1000000">
         <c-carousel-indicators></c-carousel-indicators>
         <c-carousel-inner>
           <c-carousel-item style="display: flex;" *ngFor="let slide of stats['blog']; index as i;">
diff --git a/src/app/views/dashboard/dashboard.module.ts b/src/app/views/dashboard/dashboard.module.ts
index 20a6600..f1ff857 100644
--- a/src/app/views/dashboard/dashboard.module.ts
+++ b/src/app/views/dashboard/dashboard.module.ts
@@ -32,7 +32,6 @@ import { ClipboardModule } from "@angular/cdk/clipboard";
     ReactiveFormsModule,
     ButtonModule,
     TemplateIdDirective,
-    ButtonModule,
     ButtonGroupModule,
     ChartjsModule,
     CarouselModule,
diff --git a/src/app/views/device_detail/device.component.ts b/src/app/views/device_detail/device.component.ts
index c3aa787..116970e 100644
--- a/src/app/views/device_detail/device.component.ts
+++ b/src/app/views/device_detail/device.component.ts
@@ -509,14 +509,16 @@ export class DeviceComponent implements OnInit, OnDestroy {
       // loop in dhcp_server_data and create a new object with the data for chart for each dhcp server
       _self.reloading = false;
       _self.dhcp_server_data.forEach((element:any) => {
-        var pooldata=element.pools[0];
-        element.chartpools = {
-          labels: ['Used', 'Free'],
-          datasets: [{
-            backgroundColor: [ '#E46651','#41B883'],
-            data: [pooldata.used_ips, pooldata.available_ips]
-          }]
-        };
+        if(element.pools.length>0){
+          var pooldata=element.pools[0];
+          element.chartpools = {
+            labels: ['Used', 'Free'],
+            datasets: [{
+              backgroundColor: [ '#E46651','#41B883'],
+              data: [pooldata.used_ips, pooldata.available_ips]
+            }]
+          };
+        }
       });
     });
   }
diff --git a/src/app/views/settings/settings.component.html b/src/app/views/settings/settings.component.html
index d3fe44e..8b66fb9 100644
--- a/src/app/views/settings/settings.component.html
+++ b/src/app/views/settings/settings.component.html
@@ -1,230 +1,510 @@
-<c-row>
-  <c-col xs>
-    <c-card class="mb-4">
-      <c-card-header>Firmware Manager</c-card-header>
-      <c-card-body>
-        <c-input-group class="mb-3">
-          <h5>Firmware in repository:</h5>
-          <gui-grid [autoResizeWidth]="true" [source]="source" [columnMenu]="columnMenu" [sorting]="sorting"
-            [infoPanel]="infoPanel" [autoResizeWidth]=true [paging]="paging">
-            <gui-grid-column header="Version" field="version">
-              <ng-template let-value="item.version" let-item="item" let-index="index">
-                &nbsp; {{value}} </ng-template>
-            </gui-grid-column>
-            <gui-grid-column header="arch" field="architecture">
-              <ng-template let-value="item.architecture" let-item="item" let-index="index">
-                {{value}}
-              </ng-template>
-            </gui-grid-column>
-            <gui-grid-column header="sha256" field="sha256">
-              <ng-template let-value="item.sha256" let-item="item" let-index="index">
-                {{value}}
-              </ng-template>
-            </gui-grid-column>
-            <gui-grid-column header="Actions" width="120" field="action">
-              <ng-template let-value="item.id" let-item="item" let-index="index">
-                <button cButton color="danger" size="sm" (click)="delete_fimrware(item);"><i
-                    class="fa-regular fa-trash-can"></i></button>
-              </ng-template>
-            </gui-grid-column>
-          </gui-grid>
-        </c-input-group>
+<div class="settings-container">
+  <c-card class="settings-card">
+    <c-card-header class="settings-header">
+      <div class="d-flex align-items-center justify-content-between">
+        <div class="d-flex align-items-center">
+          <i class="fa-solid fa-cog me-2 text-primary"></i>
+          <h4 class="mb-0">System Settings</h4>
+        </div>
+        <c-badge color="info" class="fs-6">Admin Panel</c-badge>
+      </div>
+    </c-card-header>
+    
+    <div class="settings-tabs">
+      <button class="tab-link" [class.active]="activeTab === 'firmware'" (click)="activeTab = 'firmware'">
+        <i class="fa-solid fa-microchip me-2"></i>Firmware Manager
+      </button>
+      <button class="tab-link" [class.active]="activeTab === 'system'" (click)="activeTab = 'system'">
+        <i class="fa-solid fa-server me-2"></i>System Configuration
+      </button>
+    </div>
 
-        <hr />
-        <table>
-          <td>
-            <span>Add new Permission</span>
-          </td>
-          <td *ngIf="loading">
-            <button cButton class="m-1" disabled>
-              <c-spinner aria-hidden="true" size="sm"></c-spinner>
-              Fetching Information from mikrotik website...
-            </button>
-          </td>
-          <td *ngIf="!loading">
-            <mat-form-field>
-              <mat-select cFormControl [(ngModel)]="firmtodownload" placeholder="Select Version For Download Group"
-                #singleSelect>
-                <mat-option>
-                  <ngx-mat-select-search placeholderLabel="Search"
-                    [hideClearSearchButton]="true"></ngx-mat-select-search>
-                </mat-option>
-                <mat-option *ngFor="let firm of firms" [value]="firm">
-                  {{firm}}
-                </mat-option>
-              </mat-select>
-            </mat-form-field>
-          </td>
-          <td>
-            <button *ngIf="!loading" cButton color="primary" (click)="ConfirmModalVisible=true">Download to
-              repository</button>
-            <!-- <button *ngIf="SelectedUser['action']=='add'" cButton color="primary" (click)="loading=!loading">++</button> -->
-          </td>
-        </table>
-
-        <hr />
-        <c-input-group class="mb-3">
-          <label cInputGroupText for="inputGroupSelect01">
-            V6 Firmware update Behavior
-          </label>
-          <select cSelect [(ngModel)]="updateBehavior" id="inputGroupSelect01">
-            <option>Choose...</option>
-            <option value="keep">Keep v6 and don't update to v7</option>
-            <option value="update">install latest</option>
-          </select>
-          <c-form-feedback style="display: block;color: #5c5c5c;margin-top: 0;" [valid]="true">
-            * Choose how Mikrowizard should update old v6 firmwares</c-form-feedback>
-        </c-input-group>
-
-        <c-input-group class="mb-3">
-          <label cInputGroupText for="inputGroupSelect01">
-            Firmware version to install
-          </label>
-          <select cSelect [(ngModel)]="firmwaretoinstall" id="inputGroupSelect01">
-            <option>Choose...</option>
-            <option *ngFor="let f of available_firmwares" [value]="f">{{f}}</option>
-
-          </select>
-          <c-form-feedback style="display: block;color: #5c5c5c;margin-top: 0;" [valid]="true">
-            * The version of firmware to install routers</c-form-feedback>
-        </c-input-group>
-
-        <c-input-group *ngIf="updateBehavior=='keep'" class="mb-3">
-          <label cInputGroupText for="inputGroupSelect01">
-            Firmware version v6 to install
-          </label>
-          <select cSelect [(ngModel)]="firmwaretoinstallv6" id="inputGroupSelect01">
-            <option>Choose...</option>
-            <option *ngFor="let f of available_firmwaresv6" [value]="f">{{f}}</option>
-          </select>
-          <c-form-feedback style="display: block;color: #5c5c5c;margin-top: 0;" [valid]="true">
-            * The version of firmware to install on V6 routers</c-form-feedback>
-        </c-input-group>
-        <button cButton color="primary" (click)="saveFirmwareSetting()">Save</button>
-      </c-card-body>
-
-    </c-card>
-    <c-card class="mb-4">
-      <c-card-header>System Settings</c-card-header>
-      <c-card-body *ngIf="!SysConfigloading">
-
-        <c-input-group class="mt-3">
-          <span cInputGroupText>Rad Secret</span>
-          <input cFormControl id="floatingInput" placeholder="rad_secret"
-            [(ngModel)]="sysconfigs['rad_secret']['value']" />
-            <c-form-feedback style="display: block;color: #5c5c5c;margin-top: 0;" [valid]="true">
-              * Radius Secret of Mikrowizard Radius Server</c-form-feedback>
-        </c-input-group>
-
-
-        <c-input-group class="mt-3">
-          <span cInputGroupText>System URL</span>
-          <input cFormControl id="floatingInput" placeholder="System URL"
-            [(ngModel)]="sysconfigs['system_url']['value']" />
-            <c-form-feedback style="display: block;color: #5c5c5c;margin-top: 0;" [valid]="true">
-              * Default system access URl</c-form-feedback>
-        </c-input-group>
-
-        <c-input-group class="mt-3">
-          <span cInputGroupText>Default IP</span>
-          <input cFormControl id="floatingInput" placeholder="System URL"
-            [(ngModel)]="sysconfigs['default_ip']['value']" />
-            <c-form-feedback style="display: block;color: #5c5c5c;margin-top: 0;" [valid]="true">
-              * Default Mikrowizard Access IP</c-form-feedback>
-        </c-input-group>
-        <c-input-group class="mt-3">
-          <span cInputGroupText>System Time Zone</span>
-          <mat-form-field class="form-control" subscriptSizing="dynamic">
-            <mat-label>Select event type</mat-label>
-            <mat-select cFormControl [(ngModel)]="sysconfigs['timezone']['value']"
-              placeholder="Select Version For Download Group" #singleSelect>
-              <mat-option>
-                <ngx-mat-select-search placeholderLabel="Search" [hideClearSearchButton]="true"></ngx-mat-select-search>
-              </mat-option>
-              <mat-option *ngFor="let tz of timezones" [value]="tz.utc[0]">
-                {{tz.text}}
-              </mat-option>
-            </mat-select>
-          </mat-form-field>
-          <c-form-feedback style="display: block;color: #5c5c5c;margin-top: 0;" [valid]="true">
-            * Default TimeZone for the system</c-form-feedback>
-        </c-input-group>
-
-
-        <c-input-group class="mt-3">
-          <span cInputGroupText>Default User</span>
-          <input aria-label="Username" type="password" [(ngModel)]="sysconfigs['default_user']['value']" cFormControl />
-          <span cInputGroupText>Default password</span>
-          <input aria-label="Password" type="password" [(ngModel)]="sysconfigs['default_password']['value']"
-            cFormControl />
-            <c-form-feedback style="display: block;color: #5c5c5c;margin-top: 0;" [valid]="true">
-              * Default username and Password for searching new devices</c-form-feedback>
-        </c-input-group>
-
-        <c-input-group class="mb-3">
-          <label cInputGroupText for="inputGroupSelect01">
-            Mikrowizard Update Mode
-          </label>
-          <select cSelect [(ngModel)]="sysconfigs['update_mode']['value']['mode']" id="inputGroupSelect01">
-            <option>Choose...</option>
-            <option value="auto">Automatic Update</option>
-            <option value="manual">Show update only/Update manually</option>
-          </select>
-          <c-form-feedback style="display: block;color: #5c5c5c;margin-top: 0;" [valid]="true">
-            * Choose if Mikrowizard should download updates automaticaly when availble or wait for user to download/apply updates</c-form-feedback>
-        </c-input-group>
+    <!-- Firmware Tab -->
+    <c-card-body *ngIf="activeTab === 'firmware'" class="tab-content">
+      <!-- Repository Status -->
+      <div class="status-section mb-4">
+        <div class="d-flex align-items-center justify-content-between mb-3">
+          <h5 class="section-title mb-0">
+            <i class="fa-solid fa-database me-2 text-success"></i>Firmware Repository
+            <i class="fa-solid fa-info-circle ms-2 text-info help-icon" 
+              [cTooltip]="'Local firmware repository stores RouterOS versions for offline installation. Devices can be updated without internet access.'" 
+              cTooltipPlacement="top"></i>
+          </h5>
+          <c-badge color="success" class="fs-6">
+            <i class="fa-solid fa-check-circle me-1"></i>{{source.length}} Versions Available
+          </c-badge>
+        </div>
+        <div class="info-banner mb-3">
+          <i class="fa-solid fa-lightbulb me-2"></i>
+          <span><strong>Tip:</strong> Keep multiple firmware versions for compatibility. Always test updates on non-critical devices first.</span>
+        </div>
         
-        <c-input-group class="mt-3 mb-3">
-          <span cInputGroupText>License Username</span>
-          <input aria-label="Username" type="text" [(ngModel)]="sysconfigs['username']['value']" cFormControl />
-          <c-form-feedback style="display: block;color: #5c5c5c;margin-top: 0;" [valid]="true">
-            * The username that you registred in Mikrowizard.com,Required for License Activation</c-form-feedback>
-        </c-input-group>
+        <gui-grid [autoResizeWidth]="true" [source]="source" [columnMenu]="columnMenu" [sorting]="sorting"
+          [infoPanel]="infoPanel" [paging]="paging" class="compact-grid">
+          <gui-grid-column header="Version" field="version">
+            <ng-template let-value="item.version" let-item="item" let-index="index">
+              <c-badge color="primary" class="version-badge">{{value}}</c-badge>
+            </ng-template>
+          </gui-grid-column>
+          <gui-grid-column header="Architecture" field="architecture">
+            <ng-template let-value="item.architecture" let-item="item" let-index="index">
+              <c-badge color="secondary">{{value}}</c-badge>
+            </ng-template>
+          </gui-grid-column>
+          <gui-grid-column header="SHA256" field="sha256">
+            <ng-template let-value="item.sha256" let-item="item" let-index="index">
+              <small class="text-muted font-monospace">{{value.substring(0, 16)}}...</small>
+            </ng-template>
+          </gui-grid-column>
+          <gui-grid-column header="Actions" width="100" field="action" align="CENTER">
+            <ng-template let-value="item.id" let-item="item" let-index="index">
+              <button cButton color="danger" size="sm" variant="outline" (click)="delete_fimrware(item)" title="Delete firmware">
+                <i class="fa-solid fa-trash"></i>
+              </button>
+            </ng-template>
+          </gui-grid-column>
+        </gui-grid>
+      </div>
+
+      <!-- Download Section -->
+      <div class="download-section mb-4">
+        <div class="section-card">
+          <div class="section-header">
+            <i class="fa-solid fa-download me-2 text-primary"></i>
+            <span class="fw-semibold">Download New Firmware</span>
+            <i class="fa-solid fa-question-circle ms-2 text-info help-icon" 
+              [cTooltip]="'Downloads firmware from MikroTik servers. Requires internet access. Downloaded files are verified for integrity.'" 
+              cTooltipPlacement="top"></i>
+          </div>
+          <div class="warning-banner mb-2" *ngIf="!loading">
+            <i class="fa-solid fa-wifi me-2"></i>
+            <span><strong>Internet Required:</strong> Downloads from mikrotik.com. Ensure stable connection and access to mikrotik.com domain.</span>
+          </div>
+          <c-row class="g-3 mt-2" *ngIf="!loading">
+            <c-col md="8">
+              <div class="search-select-wrapper">
+                <label class="form-label">Select RouterOS Version</label>
+                <input cFormControl 
+                  [(ngModel)]="firmwareSearch" 
+                  (input)="filterFirmwares($event)"
+                  (focus)="showFirmwareDropdown = true"
+                  (blur)="hideFirmwareDropdown()"
+                  placeholder="Search and select version..."
+                  class="search-input"
+                  autocomplete="off" />
+                <div *ngIf="showFirmwareDropdown && filteredFirmwares.length > 0" class="search-dropdown">
+                  <div *ngFor="let firm of filteredFirmwares" 
+                    class="search-option" 
+                    (mousedown)="selectFirmware(firm)">
+                    {{firm}}
+                  </div>
+                </div>
+                <div *ngIf="showFirmwareDropdown && filteredFirmwares.length === 0 && firmwareSearch" class="search-no-results">
+                  No versions found
+                </div>
+              </div>
+            </c-col>
+            <c-col md="4" class="d-flex align-items-end">
+              <button cButton color="primary" class="w-100" (click)="ConfirmModalVisible=true" [disabled]="!firmtodownload">
+                <i class="fa-solid fa-download me-1"></i>Download
+              </button>
+            </c-col>
+          </c-row>
+          <div *ngIf="loading" class="text-center py-3">
+            <c-spinner size="sm" class="me-2"></c-spinner>
+            <span class="text-muted">Fetching available versions from MikroTik...</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Firmware Settings -->
+      <div class="firmware-settings">
+        <h5 class="section-title mb-3">
+          <i class="fa-solid fa-cogs me-2 text-warning"></i>Update Configuration
+          <i class="fa-solid fa-info-circle ms-2 text-info help-icon" 
+            [cTooltip]="'These settings control how MikroWizard handles firmware updates across your network. Changes affect all future update operations.'" 
+            cTooltipPlacement="top"></i>
+        </h5>
+        <div class="info-banner mb-3">
+          <i class="fa-solid fa-shield-alt me-2"></i>
+          <span><strong>Best Practice:</strong> Use "Keep v6" for legacy devices. Test new firmware versions in lab environment first.</span>
+        </div>
+        
+        <c-row class="g-3">
+          <c-col md="6">
+            <div class="setting-group">
+              <label class="setting-label">V6 Firmware Behavior
+                <i class="fa-solid fa-question-circle ms-1 text-info help-icon" 
+                  [cTooltip]="'Choose how to handle RouterOS v6 devices: keep them on v6 with selected v6 firmware, or upgrade them to v7 with selected v7 firmware.'" 
+                  cTooltipPlacement="top"></i>
+              </label>
+              <select cSelect [(ngModel)]="updateBehavior" class="form-select">
+                <option value="">Choose behavior...</option>
+                <option value="keep">🛡️ Keep v6 (v6 devices get V6 Firmware Version, v7 devices get Default Firmware Version)</option>
+                <option value="update">⬆️ Upgrade to v7 (all v6 routers will be upgraded to v7)</option>
+              </select>
+              <small class="setting-help">📋 <strong>Keep v6:</strong> v6 devices use V6 Firmware Version, v7 devices use Default Firmware Version</small>
+            </div>
+          </c-col>
           
-        <c-form-check [switch]="true" sizing="xl">
-          <input cFormCheckInput [(ngModel)]="sysconfigs['force_perms']['value']" type="checkbox" />
-          <label cFormCheckLabel>Force Perms</label>
-          <c-form-feedback style="display: block;color: #5c5c5c;margin-top: 0;" [valid]="true">
-            * Force User Groups under user>groups configuration of each router to match Mikrowizard Permissions and
-            monitor for any change to prevent/fix the configuration.</c-form-feedback>
-        </c-form-check>
+          <c-col md="6">
+            <div class="setting-group">
+              <label class="setting-label">Default Firmware Version
+                <i class="fa-solid fa-question-circle ms-1 text-info help-icon" 
+                  [cTooltip]="'This version will be installed on new devices added to MikroWizard. Choose stable LTS versions for production.'" 
+                  cTooltipPlacement="top"></i>
+              </label>
+              <select cSelect [(ngModel)]="firmwaretoinstall" class="form-select">
+                <option value="">Choose version...</option>
+                <option *ngFor="let f of available_firmwares" [value]="f">{{f}}</option>
+              </select>
+              <small class="setting-help">💡 <strong>Tip:</strong> Choose stable releases for production. LTS versions are only available for v6 firmware</small>
+            </div>
+          </c-col>
+          
+          <c-col md="6" *ngIf="updateBehavior === 'keep'">
+            <div class="setting-group">
+              <label class="setting-label">V6 Firmware Version</label>
+              <select cSelect [(ngModel)]="firmwaretoinstallv6" class="form-select">
+                <option value="">Choose v6 version...</option>
+                <option *ngFor="let f of available_firmwaresv6" [value]="f">{{f}}</option>
+              </select>
+              <small class="setting-help">Firmware version for RouterOS v6 devices</small>
+            </div>
+          </c-col>
+        </c-row>
+        
+        <div class="mt-3">
+          <button cButton color="primary" (click)="saveFirmwareSetting()">
+            <i class="fa-solid fa-save me-1"></i>Save Firmware Settings
+          </button>
+        </div>
+      </div>
+    </c-card-body>
 
-        <c-form-check [switch]="true" sizing="xl">
-          <input cFormCheckInput [(ngModel)]="sysconfigs['force_radius']['value']" type="checkbox" />
-          <label cFormCheckLabel>Force Radius</label>
-          <c-form-feedback style="display: block;color: #5c5c5c;margin-top: 0;" [valid]="true">
-            * Force Radius config under radius>client and user>aaa setting of each router that added to Mikrowizard and
-            monitor for any change to prevent/fix the configuration.</c-form-feedback>
-        </c-form-check>
+    <!-- System Tab -->
+    <c-card-body *ngIf="activeTab === 'system' && !SysConfigloading" class="tab-content">
+      <!-- Network Configuration -->
+      <div class="config-section mb-4">
+        <h5 class="section-title mb-3">
+          <i class="fa-solid fa-network-wired me-2 text-primary"></i>Network Configuration
+          <i class="fa-solid fa-info-circle ms-2 text-info help-icon" 
+            [cTooltip]="'Basic network settings for MikroWizard system access and device communication. Ensure these match your network setup.'" 
+            cTooltipPlacement="top"></i>
+        </h5>
+        <div class="info-banner mb-3">
+          <i class="fa-solid fa-network-wired me-2"></i>
+          <span><strong>Network Setup:</strong> Configure these settings to match your network infrastructure for proper device communication.</span>
+        </div>
+        
+        <c-row class="g-3">
+          <c-col md="6">
+            <div class="setting-group">
+              <label class="setting-label">System URL
+                <i class="fa-solid fa-question-circle ms-1 text-info help-icon" 
+                  [cTooltip]="'URL or IP address where MikroWizard is accessible. Used for email notifications and API callbacks. Must be reachable by managed devices.'" 
+                  cTooltipPlacement="top"></i>
+              </label>
+              <input cFormControl [(ngModel)]="sysconfigs['system_url']['value']" 
+                placeholder="https://mikrowizard.yourdomain.com or 192.168.1.100" class="form-control" />
+              <small class="setting-help">🌐 <strong>Examples:</strong> https://mikrowizard.company.com or 192.168.1.100</small>
+            </div>
+          </c-col>
+          
+          <c-col md="6">
+            <div class="setting-group">
+              <label class="setting-label">Default IP Address
+                <i class="fa-solid fa-question-circle ms-1 text-info help-icon" 
+                  [cTooltip]="'IP address where MikroWizard web interface is accessible. Used as fallback when domain is not available.'" 
+                  cTooltipPlacement="top"></i>
+              </label>
+              <input cFormControl [(ngModel)]="sysconfigs['default_ip']['value']" 
+                placeholder="192.168.1.100" class="form-control" />
+              <small class="setting-help">🔧 <strong>Tip:</strong> Use static IP outside DHCP range (e.g., 192.168.1.100-200)</small>
+            </div>
+          </c-col>
+          
+          <c-col md="6">
+            <div class="setting-group">
+              <label class="setting-label">RADIUS Secret
+                <i class="fa-solid fa-question-circle ms-1 text-info help-icon" 
+                  [cTooltip]="'Secret used by MikroWizard internal RADIUS server for authenticating MikroTik system users. This is for device admin authentication, not end users.'" 
+                  cTooltipPlacement="top"></i>
+              </label>
+              <input cFormControl [(ngModel)]="sysconfigs['rad_secret']['value']" 
+                placeholder="Enter MikroWizard RADIUS secret" class="form-control" type="password" />
+              <small class="setting-help">🔐 <strong>Internal RADIUS:</strong> Secret for MikroWizard's built-in RADIUS server (for MikroTik admin authentication)</small>
+            </div>
+          </c-col>
+          
+          <c-col md="6">
+            <div class="setting-group">
+              <label class="setting-label">System Timezone</label>
+              <div class="search-select-wrapper">
+                <input cFormControl 
+                  [(ngModel)]="timezoneSearch" 
+                  (input)="filterTimezones($event)"
+                  (focus)="showTimezoneDropdown = true"
+                  (blur)="hideTimezoneDropdown()"
+                  placeholder="Search and select timezone..."
+                  class="search-input"
+                  autocomplete="off" />
+                <div *ngIf="showTimezoneDropdown && filteredTimezones.length > 0" class="search-dropdown">
+                  <div *ngFor="let tz of filteredTimezones" 
+                    class="search-option" 
+                    (mousedown)="selectTimezone(tz)">
+                    {{tz.text}}
+                  </div>
+                </div>
+                <div *ngIf="showTimezoneDropdown && filteredTimezones.length === 0 && timezoneSearch" class="search-no-results">
+                  No timezones found
+                </div>
+              </div>
+              <small class="setting-help">Default system timezone</small>
+            </div>
+          </c-col>
+        </c-row>
+      </div>
 
-        <c-form-check [switch]="true" sizing="xl">
-          <input cFormCheckInput [(ngModel)]="sysconfigs['force_syslog']['value']" type="checkbox" />
-          <label cFormCheckLabel>Force Syslog</label>
-          <c-form-feedback style="display: block;color: #5c5c5c;margin-top: 0;" [valid]="true">
-            * Force Syslog config under system>logs setting of each router that added to Mikrowizard and monitor syslog
-            setting for any change to prevent/fix the configuration.</c-form-feedback>
-        </c-form-check>
+      <!-- Authentication -->
+      <div class="config-section mb-4">
+        <h5 class="section-title mb-3">
+          <i class="fa-solid fa-key me-2 text-warning"></i>Device Discovery Credentials
+          <i class="fa-solid fa-info-circle ms-2 text-info help-icon" 
+            [cTooltip]="'Default credentials for discovering and connecting to new MikroTik devices. Keep these secure and change default passwords immediately.'" 
+            cTooltipPlacement="top"></i>
+        </h5>
+        <div class="warning-banner mb-3">
+          <i class="fa-solid fa-shield-exclamation me-2"></i>
+          <span><strong>Security Warning:</strong> Change default passwords immediately after device setup. Use strong, unique credentials.</span>
+        </div>
+        
+        <c-row class="g-3">
+          <c-col md="6">
+            <div class="setting-group">
+              <label class="setting-label">Default Username
+                <i class="fa-solid fa-question-circle ms-1 text-info help-icon" 
+                  [cTooltip]="'Username for discovering and connecting to MikroTik devices in your network. This is used to find devices with default/common credentials.'" 
+                  cTooltipPlacement="top"></i>
+              </label>
+              <input cFormControl [(ngModel)]="sysconfigs['default_user']['value']" 
+                placeholder="admin" class="form-control" type="password" />
+              <small class="setting-help">🔍 <strong>Device Discovery:</strong> Username for finding MikroTik devices with default credentials in your network</small>
+            </div>
+          </c-col>
+          
+          <c-col md="6">
+            <div class="setting-group">
+              <label class="setting-label">Default Password
+                <i class="fa-solid fa-question-circle ms-1 text-info help-icon" 
+                  [cTooltip]="'Password for discovering and connecting to MikroTik devices. Many new devices have empty password. Used to find devices with default/common credentials.'" 
+                  cTooltipPlacement="top"></i>
+              </label>
+              <input cFormControl [(ngModel)]="sysconfigs['default_password']['value']" 
+                placeholder="(often empty on new devices)" class="form-control" type="password" />
+              <small class="setting-help">🔍 <strong>Device Discovery:</strong> Password for finding MikroTik devices with default credentials (often empty on new devices)</small>
+            </div>
+          </c-col>
+        </c-row>
+      </div>
 
-        <c-form-check *ngIf="ispro" [switch]="true" sizing="xl">
-          <input cFormCheckInput [(ngModel)]="sysconfigs['safe_install']['value']" type="checkbox" />
-          <label cFormCheckLabel>Safe Update</label>
-          <c-form-feedback style="display: block;color: #5c5c5c;margin-top: 0;" [valid]="true"><code style="padding: 0!important;">PRO</code>
-            * Download and install reqired firmware before installing the target firmware . for example it will install
-            latest 7.12 then upgrade to newer version >7.13 or install Required packages before update</c-form-feedback>
-        </c-form-check>
+      <!-- License Configuration -->
+      <div class="config-section mb-4">
+        <h5 class="section-title mb-3">
+          <i class="fa-solid fa-certificate me-2 text-primary"></i>License Configuration
+          <i class="fa-solid fa-info-circle ms-2 text-info help-icon" 
+            [cTooltip]="'MikroWizard license activation and registration settings. Required for system activation and PRO features.'" 
+            cTooltipPlacement="top"></i>
+        </h5>
+        
+        <c-row class="g-3">
+          <c-col md="6">
+            <div class="setting-group">
+              <label class="setting-label">License Username
+                <i class="fa-solid fa-exclamation-triangle ms-1 text-warning help-icon" 
+                  [cTooltip]="'Your username from MikroWizard.com account. Same username you use to login to mikrowizard.com website. Required for license activation.'" 
+                  cTooltipPlacement="top"></i>
+              </label>
+              <input cFormControl [(ngModel)]="sysconfigs['username']['value']" 
+                placeholder="Same as your mikrowizard.com login" class="form-control" />
+              <small class="setting-help text-warning">🔑 <strong>Same username</strong> you use to login to mikrowizard.com website</small>
+            </div>
+          </c-col>
+        </c-row>
+      </div>
 
-        <c-form-check *ngIf="ispro" [switch]="true" sizing="xl">
-          <input cFormCheckInput [(ngModel)]="sysconfigs['otp_force']['value']" type="checkbox" />
-          <label cFormCheckLabel>Force device otp</label>
-          <c-form-feedback style="display: block;color: #5c5c5c;margin-top: 0;" [valid]="true"><code style="padding: 0!important;">PRO</code>
-            * Force login to devices using otp for all users.(you can make exceptions for each user)</c-form-feedback>
-        </c-form-check>
-        <button cButton color="primary" (click)="saveSysSetting()">Save</button>
+      <!-- System Behavior -->
+      <div class="config-section mb-4">
+        <h5 class="section-title mb-3">
+          <i class="fa-solid fa-cogs me-2 text-success"></i>System Behavior
+          <i class="fa-solid fa-info-circle ms-2 text-info help-icon" 
+            [cTooltip]="'Controls how MikroWizard handles automatic updates and system maintenance. Choose based on your change management policy.'" 
+            cTooltipPlacement="top"></i>
+        </h5>
+        
+        <c-row class="g-3">
+          <c-col md="6">
+            <div class="setting-group">
+              <label class="setting-label">Update Mode
+                <i class="fa-solid fa-question-circle ms-1 text-info help-icon" 
+                  [cTooltip]="'Automatic updates install immediately when available. Manual mode shows notifications in dashboard and waits for user confirmation.'" 
+                  cTooltipPlacement="top"></i>
+              </label>
+              <select cSelect [(ngModel)]="sysconfigs['update_mode']['value']['mode']" class="form-select">
+                <option value="">Choose mode...</option>
+                <option value="auto">🔄 Automatic Updates (Install immediately)</option>
+                <option value="manual">✋ Manual Updates (Confirm actions in dashboard view)</option>
+              </select>
+              <small class="setting-help">📊 <strong>Manual Mode:</strong> Updates require confirmation and actions in dashboard view</small>
+            </div>
+          </c-col>
+        </c-row>
+      </div>
 
-      </c-card-body>
-    </c-card>
-  </c-col>
-</c-row>
+      <!-- Security Features -->
+      <div class="config-section mb-4">
+        <h5 class="section-title mb-3">
+          <i class="fa-solid fa-shield-alt me-2 text-danger"></i>Security & Enforcement
+          <i class="fa-solid fa-info-circle ms-2 text-info help-icon" 
+            [cTooltip]="'Security policies automatically enforced on all managed devices. These settings override local device configurations for consistency.'" 
+            cTooltipPlacement="top"></i>
+        </h5>
+        <div class="warning-banner mb-3">
+          <i class="fa-solid fa-exclamation-triangle me-2"></i>
+          <span><strong>Important:</strong> These settings will override device configurations. Test in lab environment before enabling in production.</span>
+        </div>
+        
+        <div class="security-switches">
+          <div class="switch-item">
+            <div class="switch-content">
+              <div class="switch-info">
+                <h6 class="switch-title">Force Permissions
+                  <i class="fa-solid fa-question-circle ms-1 text-info help-icon" 
+                    [cTooltip]="'Synchronizes MikroTik user groups with MikroWizard permissions. Ensures consistent access control across all managed devices.'" 
+                    cTooltipPlacement="top"></i>
+                </h6>
+                <p class="switch-description">🔄 Sync MikroTik user groups with MikroWizard permissions
+                  <br><small class="text-info">💡 Ensures consistent user access control across all devices</small>
+                </p>
+              </div>
+              <c-form-check [switch]="true" sizing="lg">
+                <input cFormCheckInput [(ngModel)]="sysconfigs['force_perms']['value']" type="checkbox" />
+                <label cFormCheckLabel></label>
+              </c-form-check>
+            </div>
+          </div>
+          
+          <div class="switch-item">
+            <div class="switch-content">
+              <div class="switch-info">
+                <h6 class="switch-title">Force RADIUS
+                  <i class="fa-solid fa-question-circle ms-1 text-info help-icon" 
+                    [cTooltip]="'Configures MikroTik devices to use MikroWizard RADIUS for admin user authentication. This is for MikroTik system users, not end users.'" 
+                    cTooltipPlacement="top"></i>
+                </h6>
+                <p class="switch-description">🔐 Configure RADIUS on MikroTik devices for admin user authentication
+                  <br><small class="text-info">👥 For MikroTik system users authentication (not end users)</small>
+                </p>
+              </div>
+              <c-form-check [switch]="true" sizing="lg">
+                <input cFormCheckInput [(ngModel)]="sysconfigs['force_radius']['value']" type="checkbox" />
+                <label cFormCheckLabel></label>
+              </c-form-check>
+            </div>
+          </div>
+          
+          <div class="switch-item">
+            <div class="switch-content">
+              <div class="switch-info">
+                <h6 class="switch-title">Force Syslog
+                  <i class="fa-solid fa-exclamation-triangle ms-1 text-warning help-icon" 
+                    [cTooltip]="'CRITICAL: Will overwrite syslog configuration on all devices. If MikroWizard server is unreachable, devices may stop logging or experience performance issues.'" 
+                    cTooltipPlacement="top"></i>
+                </h6>
+                <p class="switch-description">📊 Automatically configure syslog settings on managed devices
+                  <br><small class="text-warning">⚠️ Will OVERWRITE existing syslog configurations on devices</small>
+                </p>
+              </div>
+              <c-form-check [switch]="true" sizing="lg">
+                <input cFormCheckInput [(ngModel)]="sysconfigs['force_syslog']['value']" type="checkbox" />
+                <label cFormCheckLabel></label>
+              </c-form-check>
+            </div>
+          </div>
+          
+          <div class="switch-item" *ngIf="ispro">
+            <div class="switch-content">
+              <div class="switch-info">
+                <h6 class="switch-title">Safe Updates <c-badge color="warning" class="ms-2">PRO</c-badge>
+                  <i class="fa-solid fa-question-circle ms-1 text-info help-icon" 
+                    [cTooltip]="'Prevents firmware update failures by installing intermediate versions first. Reduces risk of device brick but takes longer.'" 
+                    cTooltipPlacement="top"></i>
+                </h6>
+                <p class="switch-description">🛡️ Install required intermediate firmware versions before target version
+                  <br><small class="text-success">✅ Highly recommended for production environments</small>
+                </p>
+              </div>
+              <c-form-check [switch]="true" sizing="lg">
+                <input cFormCheckInput [(ngModel)]="sysconfigs['safe_install']['value']" type="checkbox" />
+                <label cFormCheckLabel></label>
+              </c-form-check>
+            </div>
+          </div>
+          
+          <div class="switch-item" *ngIf="ispro">
+            <div class="switch-content">
+              <div class="switch-info">
+                <h6 class="switch-title">Force Device OTP <c-badge color="warning" class="ms-2">PRO</c-badge>
+                  <i class="fa-solid fa-question-circle ms-1 text-info help-icon" 
+                    [cTooltip]="'Requires two-factor authentication for device access. Users must have OTP configured. Significantly improves security.'" 
+                    cTooltipPlacement="top"></i>
+                </h6>
+                <p class="switch-description">🔐 Require OTP authentication for all device access
+                  <br><small class="text-warning">⚠️ Ensure users have OTP configured before enabling</small>
+                </p>
+              </div>
+              <c-form-check [switch]="true" sizing="lg">
+                <input cFormCheckInput [(ngModel)]="sysconfigs['otp_force']['value']" type="checkbox" />
+                <label cFormCheckLabel></label>
+              </c-form-check>
+            </div>
+          </div>
+          
+          <div class="switch-item" *ngIf="ispro">
+            <div class="switch-content">
+              <div class="switch-info">
+                <h6 class="switch-title">WebFig Auto Login <c-badge color="warning" class="ms-2">PRO</c-badge>
+                  <i class="fa-solid fa-question-circle ms-1 text-info help-icon" 
+                    [cTooltip]="'Creates temporary OTP password for automatic WebFig login. Users don\'t need to enter credentials when accessing device WebFig through MikroWizard.'" 
+                    cTooltipPlacement="top"></i>
+                </h6>
+                <p class="switch-description">🌐 Create temporary OTP for automatic WebFig login
+                  <br><small class="text-success">🔑 Users don't need to input passwords to access WebFig admin interface</small>
+                </p>
+              </div>
+              <c-form-check [switch]="true" sizing="lg">
+                <input cFormCheckInput [(ngModel)]="sysconfigs['proxy_auto_login']['value']" type="checkbox" />
+                <label cFormCheckLabel></label>
+              </c-form-check>
+            </div>
+          </div>
+        </div>
+      </div>
+      
+      <div class="save-section">
+        <button cButton color="primary" size="lg" (click)="saveSysSetting()">
+          <i class="fa-solid fa-save me-2"></i>Save System Settings
+        </button>
+      </div>
+    </c-card-body>
+    
+    <!-- Loading State -->
+    <c-card-body *ngIf="activeTab === 'system' && SysConfigloading" class="text-center py-5">
+      <c-spinner size="sm" class="mb-3"></c-spinner>
+      <h5 class="text-muted">Loading system configuration...</h5>
+    </c-card-body>
+  </c-card>
+</div>
 
 <c-modal #ConfirmModal backdrop="static" [(visible)]="ConfirmModalVisible" id="runConfirmModal">
   <c-modal-header>
diff --git a/src/app/views/settings/settings.component.scss b/src/app/views/settings/settings.component.scss
index 897c549..364f8c3 100644
--- a/src/app/views/settings/settings.component.scss
+++ b/src/app/views/settings/settings.component.scss
@@ -5,9 +5,629 @@
     }
   }
 }
+
 .mdc-line-ripple.mdc-line-ripple--deactivating.ng-star-inserted {
   display: none!important;
 }
-.form-check-label{
-  font-weight: bold;
+
+/* Settings Container */
+.settings-container {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.settings-card {
+  border: none;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+.settings-header {
+  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
+  border-bottom: 1px solid #dee2e6;
+  padding: 1.25rem 1.5rem;
+}
+
+/* Tabs */
+.settings-tabs {
+  background: #f8f9fa;
+  border-bottom: 1px solid #dee2e6;
+  padding: 0 1.5rem;
+  display: flex;
+}
+
+.tab-link {
+  border: none;
+  background: transparent;
+  border-radius: 0;
+  padding: 1rem 1.5rem;
+  font-weight: 500;
+  color: #6c757d;
+  transition: all 0.2s ease;
+  border-bottom: 3px solid transparent;
+  cursor: pointer;
+}
+
+.tab-link:hover {
+  color: #495057;
+  background: rgba(13, 110, 253, 0.05);
+}
+
+.tab-link.active {
+  color: #0d6efd;
+  background: white;
+  border-bottom-color: #0d6efd;
+}
+
+/* Tab Content */
+.tab-content {
+  padding: 2rem;
+}
+
+/* Section Titles */
+.section-title {
+  color: #495057;
+  font-weight: 600;
+  font-size: 1.1rem;
+  margin-bottom: 1rem;
+  display: flex;
+  align-items: center;
+}
+
+/* Status Section */
+.status-section {
+  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
+  border: 1px solid #e9ecef;
+  border-radius: 8px;
+  padding: 1.5rem;
+}
+
+/* Download Section */
+.download-section {
+  .section-card {
+    background: linear-gradient(135deg, #e7f3ff 0%, #f8f9fa 100%);
+    border: 2px dashed #0d6efd;
+    border-radius: 8px;
+    padding: 1.5rem;
+    transition: all 0.2s ease;
+  }
+  
+  .section-card:hover {
+    border-color: #0a58ca;
+    background: linear-gradient(135deg, #cfe2ff 0%, #e7f3ff 100%);
+  }
+  
+  .section-header {
+    display: flex;
+    align-items: center;
+    font-size: 1rem;
+    font-weight: 600;
+    color: #495057;
+  }
+}
+
+/* Firmware Settings */
+.firmware-settings {
+  background: #f8f9fa;
+  border-radius: 8px;
+  padding: 1.5rem;
+  border: 1px solid #e9ecef;
+}
+
+/* Config Sections */
+.config-section {
+  background: #f8f9fa;
+  border-radius: 8px;
+  padding: 1.5rem;
+  border: 1px solid #e9ecef;
+}
+
+/* Setting Groups */
+.setting-group {
+  margin-bottom: 1rem;
+}
+
+.setting-label {
+  display: block;
+  font-weight: 600;
+  color: #495057;
+  margin-bottom: 0.5rem;
+  font-size: 0.9rem;
+}
+
+.setting-help {
+  color: #6c757d;
+  font-size: 0.8rem;
+  margin-top: 0.25rem;
+  display: block;
+}
+
+/* Security Switches */
+.security-switches {
+  display: grid;
+  gap: 1rem;
+}
+
+.switch-item {
+  background: white;
+  border: 1px solid #e9ecef;
+  border-radius: 8px;
+  padding: 1.25rem;
+  transition: all 0.2s ease;
+}
+
+.switch-item:hover {
+  border-color: #0d6efd;
+  box-shadow: 0 2px 4px rgba(13, 110, 253, 0.1);
+}
+
+.switch-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.switch-info {
+  flex: 1;
+  margin-right: 1rem;
+}
+
+.switch-title {
+  font-size: 1rem;
+  font-weight: 600;
+  color: #495057;
+  margin-bottom: 0.25rem;
+  display: flex;
+  align-items: center;
+}
+
+.switch-description {
+  color: #6c757d;
+  font-size: 0.85rem;
+  margin: 0;
+  line-height: 1.4;
+}
+
+/* Compact Grid */
+.compact-grid {
+  border-radius: 6px;
+  overflow: hidden;
+  border: 1px solid #e9ecef;
+}
+
+/* Version Badge */
+.version-badge {
+  font-family: 'Courier New', monospace;
+  font-weight: 600;
+}
+
+
+
+/* Form Controls */
+.form-control, .form-select {
+  border-radius: 6px;
+  border: 1px solid #ced4da;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.9rem;
+  transition: all 0.2s ease;
+}
+
+.form-control:focus, .form-select:focus {
+  border-color: #0d6efd;
+  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
+}
+
+/* Save Section */
+.save-section {
+  text-align: center;
+  padding-top: 1rem;
+  border-top: 1px solid #e9ecef;
+}
+
+/* Form Check Labels */
+.form-check-label {
+  font-weight: 500;
+}
+
+/* Button Enhancements */
+.btn {
+  border-radius: 6px;
+  font-weight: 500;
+  transition: all 0.2s ease;
+}
+
+.btn:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+/* Badge Enhancements */
+.badge {
+  font-weight: 500;
+  padding: 0.4em 0.6em;
+}
+
+/* Mobile Responsive for Informative Elements */
+@media (max-width: 768px) {
+  .info-banner,
+  .warning-banner,
+  .success-banner {
+    padding: 0.5rem 0.75rem;
+    font-size: 0.8rem;
+  }
+  
+  .help-icon {
+    font-size: 0.75rem;
+  }
+  
+  .setting-help {
+    font-size: 0.75rem;
+  }
+  
+  .switch-description {
+    font-size: 0.8rem;
+  }
+  
+  .switch-description small {
+    font-size: 0.7rem;
+  }
+  
+  ::ng-deep .tooltip-inner {
+    max-width: 250px;
+    font-size: 0.75rem;
+  }
+}
+
+@media (max-width: 576px) {
+  .info-banner,
+  .warning-banner,
+  .success-banner {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.25rem;
+  }
+  
+  .setting-label {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.25rem;
+  }
+}
+
+/* Original Responsive Design */
+@media (max-width: 768px) {
+  .settings-header {
+    padding: 1rem;
+  }
+  
+  .settings-tabs {
+    padding: 0 1rem;
+  }
+  
+  .tab-content {
+    padding: 1rem;
+  }
+  
+  .tab-link {
+    padding: 0.75rem 1rem;
+    font-size: 0.9rem;
+  }
+  
+  .status-section,
+  .config-section,
+  .firmware-settings {
+    padding: 1rem;
+  }
+  
+  .download-section .section-card {
+    padding: 1rem;
+  }
+  
+  .switch-content {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 1rem;
+  }
+  
+  .switch-info {
+    margin-right: 0;
+  }
+  
+  .section-title {
+    font-size: 1rem;
+  }
+}
+
+@media (max-width: 576px) {
+  .settings-container {
+    margin: 0 0.5rem;
+  }
+  
+  .settings-card {
+    border-radius: 8px;
+  }
+  
+  .tab-content {
+    padding: 0.75rem;
+  }
+  
+  .status-section,
+  .config-section,
+  .firmware-settings {
+    padding: 0.75rem;
+  }
+}
+
+/* Search Select Components */
+.search-select-wrapper {
+  position: relative;
+  width: 100%;
+}
+
+.search-input {
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid #ced4da;
+  border-radius: 6px;
+  font-size: 0.9rem;
+  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+}
+
+.search-input:focus {
+  border-color: #0d6efd;
+  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
+  outline: 0;
+}
+
+.search-dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  background: white;
+  border: 1px solid #ced4da;
+  border-top: none;
+  border-radius: 0 0 6px 6px;
+  max-height: 300px;
+  overflow-y: auto;
+  z-index: 1000;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.search-option {
+  padding: 0.5rem 0.75rem;
+  cursor: pointer;
+  border-bottom: 1px solid #f8f9fa;
+  transition: background-color 0.15s ease-in-out;
+  font-size: 0.85rem;
+}
+
+.search-option:hover {
+  background-color: #f8f9fa;
+}
+
+.search-option:last-child {
+  border-bottom: none;
+}
+
+.search-no-results {
+  padding: 0.75rem;
+  text-align: center;
+  color: #6c757d;
+  font-style: italic;
+  font-size: 0.8rem;
+}
+
+/* Animation for dropdown */
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(-10px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.search-dropdown {
+  animation: fadeIn 0.2s ease-out;
+}
+
+/* Informative Design Elements */
+.help-icon {
+  font-size: 0.8rem;
+  cursor: help;
+  opacity: 0.7;
+  transition: opacity 0.2s ease;
+}
+
+.help-icon:hover {
+  opacity: 1;
+}
+
+.help-icon.text-danger {
+  color: #dc3545 !important;
+  opacity: 1;
+}
+
+.help-icon.text-warning {
+  color: #fd7e14 !important;
+  opacity: 0.9;
+}
+
+.info-banner {
+  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
+  border: 1px solid #2196f3;
+  border-radius: 6px;
+  padding: 0.75rem 1rem;
+  color: #0d47a1;
+  font-size: 0.85rem;
+  display: flex;
+  align-items: center;
+}
+
+.warning-banner {
+  background: linear-gradient(135deg, #fff3e0 0%, #ffcc80 100%);
+  border: 1px solid #ff9800;
+  border-radius: 6px;
+  padding: 0.75rem 1rem;
+  color: #e65100;
+  font-size: 0.85rem;
+  display: flex;
+  align-items: center;
+}
+
+.success-banner {
+  background: linear-gradient(135deg, #e8f5e8 0%, #c8e6c9 100%);
+  border: 1px solid #4caf50;
+  border-radius: 6px;
+  padding: 0.75rem 1rem;
+  color: #2e7d32;
+  font-size: 0.85rem;
+  display: flex;
+  align-items: center;
+}
+
+/* Enhanced Setting Help */
+.setting-help {
+  color: #6c757d;
+  font-size: 0.8rem;
+  margin-top: 0.25rem;
+  display: block;
+  line-height: 1.4;
+}
+
+.setting-help strong {
+  color: #495057;
+}
+
+/* Enhanced Form Labels */
+.setting-label {
+  display: flex;
+  align-items: center;
+  font-weight: 600;
+  color: #495057;
+  margin-bottom: 0.5rem;
+  font-size: 0.9rem;
+}
+
+/* Enhanced Switch Descriptions */
+.switch-description {
+  color: #6c757d;
+  font-size: 0.85rem;
+  margin: 0;
+  line-height: 1.4;
+}
+
+.switch-description small {
+  display: block;
+  margin-top: 0.25rem;
+  font-size: 0.75rem;
+}
+
+.switch-description .text-warning {
+  color: #856404 !important;
+}
+
+.switch-description .text-info {
+  color: #0c5460 !important;
+}
+
+.switch-description .text-success {
+  color: #155724 !important;
+}
+
+.switch-description .text-danger {
+  color: #721c24 !important;
+}
+
+.setting-help.text-danger {
+  color: #721c24 !important;
+  font-weight: 600;
+}
+
+.setting-help.text-warning {
+  color: #856404 !important;
+  font-weight: 600;
+}
+
+/* Enhanced Section Titles */
+.section-title {
+  color: #495057;
+  font-weight: 600;
+  font-size: 1.1rem;
+  margin-bottom: 1rem;
+  display: flex;
+  align-items: center;
+}
+
+/* Tooltip Enhancements */
+::ng-deep .tooltip {
+  font-size: 0.8rem;
+}
+
+::ng-deep .tooltip-inner {
+  max-width: 300px;
+  text-align: left;
+  background-color: #2c3e50;
+  border-radius: 6px;
+  padding: 0.5rem 0.75rem;
+}
+
+/* Enhanced Form Controls with Status */
+.form-control.has-warning {
+  border-color: #ffc107;
+  box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.25);
+}
+
+.form-control.has-success {
+  border-color: #28a745;
+  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
+}
+
+.form-control.has-error {
+  border-color: #dc3545;
+  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
+}
+
+/* Enhanced Select Options */
+.form-select option {
+  padding: 0.5rem;
+}
+
+/* Status Indicators */
+.status-indicator {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.25rem 0.5rem;
+  border-radius: 4px;
+  font-size: 0.75rem;
+  font-weight: 500;
+  margin-left: 0.5rem;
+}
+
+.status-indicator.recommended {
+  background: #d4edda;
+  color: #155724;
+  border: 1px solid #c3e6cb;
+}
+
+.status-indicator.warning {
+  background: #fff3cd;
+  color: #856404;
+  border: 1px solid #ffeaa7;
+}
+
+.status-indicator.critical {
+  background: #f8d7da;
+  color: #721c24;
+  border: 1px solid #f5c6cb;
+}
+
+/* Grid Enhancements */
+::ng-deep .gui-grid {
+  .gui-grid-header {
+    background: #f8f9fa;
+    font-weight: 600;
+  }
+  
+  .gui-grid-cell {
+    padding: 0.75rem 0.5rem;
+  }
 }
\ No newline at end of file
diff --git a/src/app/views/settings/settings.component.ts b/src/app/views/settings/settings.component.ts
index 5501013..53a387a 100644
--- a/src/app/views/settings/settings.component.ts
+++ b/src/app/views/settings/settings.component.ts
@@ -37,6 +37,17 @@ export class SettingsComponent implements OnInit {
   public filters: any = {};
   public firms: any = {};
   public firmtodownload: any = {};
+  public activeTab: string = 'firmware';
+  
+  // Search functionality properties
+  public firmwareSearch: string = '';
+  public showFirmwareDropdown: boolean = false;
+  public filteredFirmwares: any[] = [];
+  
+  public timezoneSearch: string = '';
+  public showTimezoneDropdown: boolean = false;
+  public filteredTimezones: any[] = [];
+  
   constructor(
     private data_provider: dataProvider,
     private router: Router,
@@ -293,6 +304,12 @@ export class SettingsComponent implements OnInit {
       _self.sysconfigs["default_user"]["value"] = "";
       _self.sysconfigs["default_password"]["value"] = "";
       _self.timezones = _self.TimeZones.timezones;
+      _self.filteredTimezones = _self.TimeZones.timezones;
+      // Set initial timezone search display
+      const currentTz = _self.timezones.find((tz: any) => tz.utc[0] === _self.sysconfigs['timezone']['value']);
+      if (currentTz) {
+        _self.timezoneSearch = currentTz.text;
+      }
       _self.sysconfigs["force_syslog"]["value"] = /true/i.test(
         _self.sysconfigs["force_syslog"]["value"]
       );
@@ -310,6 +327,16 @@ export class SettingsComponent implements OnInit {
           _self.sysconfigs["otp_force"]["value"]
         );
       }
+      if(_self.ispro && "proxy_auto_login" in _self.sysconfigs){
+        _self.sysconfigs["proxy_auto_login"]["value"] = /true/i.test(
+          _self.sysconfigs["proxy_auto_login"]["value"]
+        );
+      }
+      else if(_self.ispro){
+        _self.sysconfigs["proxy_auto_login"] = {
+          "value": true
+        }
+      }
       //check if update_mode is in the sysconfigs
       if ("update_mode" in _self.sysconfigs){
         //convert string to json
@@ -335,7 +362,50 @@ export class SettingsComponent implements OnInit {
     this.data_provider.get_downloadable_firms().then((res) => {
       let index = 1;
       _self.firms = res.versions;
+      _self.filteredFirmwares = res.versions;
       _self.loading = false;
     });
   }
+
+  // Firmware search methods
+  filterFirmwares(event: any): void {
+    const searchTerm = event.target.value.toLowerCase();
+    this.firmwareSearch = searchTerm;
+    this.filteredFirmwares = this.firms.filter((firm: string) => 
+      firm.toLowerCase().includes(searchTerm)
+    );
+  }
+
+  selectFirmware(firmware: string): void {
+    this.firmtodownload = firmware;
+    this.firmwareSearch = firmware;
+    this.showFirmwareDropdown = false;
+  }
+
+  hideFirmwareDropdown(): void {
+    setTimeout(() => {
+      this.showFirmwareDropdown = false;
+    }, 200);
+  }
+
+  // Timezone search methods
+  filterTimezones(event: any): void {
+    const searchTerm = event.target.value.toLowerCase();
+    this.timezoneSearch = searchTerm;
+    this.filteredTimezones = this.timezones.filter((tz: any) => 
+      tz.text.toLowerCase().includes(searchTerm)
+    );
+  }
+
+  selectTimezone(timezone: any): void {
+    this.sysconfigs['timezone']['value'] = timezone.utc[0];
+    this.timezoneSearch = timezone.text;
+    this.showTimezoneDropdown = false;
+  }
+
+  hideTimezoneDropdown(): void {
+    setTimeout(() => {
+      this.showTimezoneDropdown = false;
+    }, 200);
+  }
 }
diff --git a/src/app/views/settings/settings.module.ts b/src/app/views/settings/settings.module.ts
index 116d06d..b482be7 100644
--- a/src/app/views/settings/settings.module.ts
+++ b/src/app/views/settings/settings.module.ts
@@ -10,14 +10,14 @@ import {
   SpinnerModule,
   ToastModule,
   ModalModule,
+  BadgeModule,
+  TooltipModule,
 } from "@coreui/angular";
 import { SettingsRoutingModule } from "./settings-routing.module";
 import { SettingsComponent } from "./settings.component";
 import { GuiGridModule } from "@generic-ui/ngx-grid";
 
 import { FormsModule } from "@angular/forms";
-import { MatSelectModule } from "@angular/material/select";
-import { NgxMatSelectSearchModule } from "ngx-mat-select-search";
 
 @NgModule({
   imports: [
@@ -30,11 +30,11 @@ import { NgxMatSelectSearchModule } from "ngx-mat-select-search";
     ButtonModule,
     ButtonGroupModule,
     GuiGridModule,
-    MatSelectModule,
-    NgxMatSelectSearchModule,
     SpinnerModule,
     ToastModule,
     ModalModule,
+    BadgeModule,
+    TooltipModule,
   ],
   declarations: [SettingsComponent],
 })
diff --git a/src/app/views/snippets/snippets.component.ts b/src/app/views/snippets/snippets.component.ts
index bcb2e4d..174a3e9 100644
--- a/src/app/views/snippets/snippets.component.ts
+++ b/src/app/views/snippets/snippets.component.ts
@@ -318,7 +318,7 @@ export class SnippetsComponent implements OnInit, OnDestroy {
 
   initGridTable(): void {
     var _self = this;
-    _self.data_provider.get_snippets("", "", "", 0, 1000).then((res) => {
+    _self.data_provider.get_snippets("", "", "", 0, 1000,false).then((res) => {
       _self.source = res.map((x: any) => {
         x.created = [
           x.created.split("T")[0],

From e2b412f8f1cc5bb1ba6303bd7dbbfe3e0f0c806b Mon Sep 17 00:00:00 2001
From: sepehr <sepehr.ha@gmail.com>
Date: Thu, 16 Oct 2025 17:34:36 +0300
Subject: [PATCH 14/15] assets: add comprehensive network device icon library

- Add SVG icons for network topology visualization
- Support for various network device types
- Icons for routers, switches, firewalls, servers
---
 src/assets/Network-Icons-SVG/README.md        |   6 +
 .../Network-Icons-SVG/arista-switch.svg       |  46 +++++
 src/assets/Network-Icons-SVG/cisco-asa.svg    | 117 ++++++++++++
 src/assets/Network-Icons-SVG/cisco-nexus.svg  |  74 ++++++++
 .../cisco-router-firewall.svg                 | 127 +++++++++++++
 src/assets/Network-Icons-SVG/cisco-router.svg |  58 ++++++
 .../Network-Icons-SVG/cisco-switch-l2.svg     |  58 ++++++
 .../cisco-switch-l3-with-rp.svg               |  65 +++++++
 .../Network-Icons-SVG/cisco-switch-l3.svg     |  51 +++++
 .../Network-Icons-SVG/cisco-switch-vss.svg    |  83 +++++++++
 src/assets/Network-Icons-SVG/cloud-v1.svg     |  43 +++++
 src/assets/Network-Icons-SVG/cloud-v2.svg     |  39 ++++
 .../Network-Icons-SVG/cumulus-router-v2.svg   |  49 +++++
 .../Network-Icons-SVG/cumulus-router-v3.svg   |  62 +++++++
 .../Network-Icons-SVG/cumulus-switch-v2.svg   |  53 ++++++
 src/assets/Network-Icons-SVG/f5-gtm.svg       |  43 +++++
 src/assets/Network-Icons-SVG/f5-ltm.svg       |  47 +++++
 .../generic-adc-colour-3d.svg                 |  63 +++++++
 .../Network-Icons-SVG/generic-adc-colour.svg  |  42 +++++
 .../Network-Icons-SVG/generic-adc-mono.svg    |  42 +++++
 ...c-firewall-flat-colour-label-v1-colour.svg | 147 +++++++++++++++
 ...ric-firewall-flat-colour-label-v1-mono.svg | 150 +++++++++++++++
 ...c-firewall-flat-colour-label-v2-colour.svg | 142 ++++++++++++++
 ...ric-firewall-flat-colour-label-v2-mono.svg | 151 +++++++++++++++
 .../generic-firewall-v1-colour-3d.svg         | 175 ++++++++++++++++++
 .../generic-firewall-v1-colour.svg            | 130 +++++++++++++
 .../generic-firewall-v1-mono.svg              | 130 +++++++++++++
 .../generic-firewall-v2-colour-3d.svg         | 152 +++++++++++++++
 .../generic-firewall-v2-colour.svg            | 135 ++++++++++++++
 .../generic-gtm-colour-3d.svg                 |  60 ++++++
 .../Network-Icons-SVG/generic-gtm-colour.svg  |  42 +++++
 .../Network-Icons-SVG/generic-gtm-mono.svg    |  39 ++++
 .../generic-router-colour.svg                 |  61 ++++++
 .../generic-router-flat-label-colour.svg      |  47 +++++
 .../generic-router-flat-label-mono.svg        |  50 +++++
 .../Network-Icons-SVG/generic-router-mono.svg |  61 ++++++
 .../generic-router-square-colour-3d.svg       |  93 ++++++++++
 .../generic-router-square-colour.svg          |  39 ++++
 .../generic-router-square-mono.svg            |  42 +++++
 .../Network-Icons-SVG/generic-server-1.svg    | 103 +++++++++++
 .../Network-Icons-SVG/generic-server-2.svg    | 101 ++++++++++
 .../Network-Icons-SVG/generic-server-3.svg    |  96 ++++++++++
 ...generic-switch-flat-l2-label-v1-colour.svg |  55 ++++++
 .../generic-switch-flat-l2-label-v1-mono.svg  |  54 ++++++
 ...generic-switch-flat-l2-label-v2-colour.svg |  54 ++++++
 .../generic-switch-flat-l2-label-v2-mono.svg  |  54 ++++++
 .../generic-switch-flat-l3-label-colour.svg   |  47 +++++
 .../generic-switch-flat-l3-label-mono.svg     |  50 +++++
 .../generic-switch-l2-v1-colour-3d.svg        |  98 ++++++++++
 .../generic-switch-l2-v1-colour.svg           |  50 +++++
 .../generic-switch-l2-v1-mono.svg             |  46 +++++
 .../generic-switch-l2-v2-colour-3d.svg        |  98 ++++++++++
 .../generic-switch-l2-v2-colour.svg           |  47 +++++
 .../generic-switch-l2-v2-mono.svg             |  46 +++++
 .../generic-switch-l3-colour-3d.svg           |  90 +++++++++
 .../generic-switch-l3-colour.svg              |  40 ++++
 .../generic-switch-l3-mono.svg                |  44 +++++
 .../juniper-firewall-router.svg               | 147 +++++++++++++++
 .../Network-Icons-SVG/juniper-router.svg      |  54 ++++++
 .../Network-Icons-SVG/juniper-switch-l2.svg   |  61 ++++++
 .../Network-Icons-SVG/juniper-switch-l3.svg   |  54 ++++++
 .../Network-Icons-SVG/network-icons.svg       |   2 +
 .../Network-Icons-SVG/viptela-vbond.svg       |  46 +++++
 .../viptela-vedge-square.svg                  |  60 ++++++
 .../Network-Icons-SVG/viptela-vedge.svg       |  61 ++++++
 .../Network-Icons-SVG/viptela-vmanage.svg     |  45 +++++
 .../Network-Icons-SVG/viptela-vsmart.svg      |  46 +++++
 .../Network-Icons-SVG/vmware-compute.svg      |  63 +++++++
 68 files changed, 4826 insertions(+)
 create mode 100644 src/assets/Network-Icons-SVG/README.md
 create mode 100644 src/assets/Network-Icons-SVG/arista-switch.svg
 create mode 100644 src/assets/Network-Icons-SVG/cisco-asa.svg
 create mode 100644 src/assets/Network-Icons-SVG/cisco-nexus.svg
 create mode 100644 src/assets/Network-Icons-SVG/cisco-router-firewall.svg
 create mode 100644 src/assets/Network-Icons-SVG/cisco-router.svg
 create mode 100644 src/assets/Network-Icons-SVG/cisco-switch-l2.svg
 create mode 100644 src/assets/Network-Icons-SVG/cisco-switch-l3-with-rp.svg
 create mode 100644 src/assets/Network-Icons-SVG/cisco-switch-l3.svg
 create mode 100644 src/assets/Network-Icons-SVG/cisco-switch-vss.svg
 create mode 100644 src/assets/Network-Icons-SVG/cloud-v1.svg
 create mode 100644 src/assets/Network-Icons-SVG/cloud-v2.svg
 create mode 100644 src/assets/Network-Icons-SVG/cumulus-router-v2.svg
 create mode 100644 src/assets/Network-Icons-SVG/cumulus-router-v3.svg
 create mode 100644 src/assets/Network-Icons-SVG/cumulus-switch-v2.svg
 create mode 100644 src/assets/Network-Icons-SVG/f5-gtm.svg
 create mode 100644 src/assets/Network-Icons-SVG/f5-ltm.svg
 create mode 100644 src/assets/Network-Icons-SVG/generic-adc-colour-3d.svg
 create mode 100644 src/assets/Network-Icons-SVG/generic-adc-colour.svg
 create mode 100644 src/assets/Network-Icons-SVG/generic-adc-mono.svg
 create mode 100644 src/assets/Network-Icons-SVG/generic-firewall-flat-colour-label-v1-colour.svg
 create mode 100644 src/assets/Network-Icons-SVG/generic-firewall-flat-colour-label-v1-mono.svg
 create mode 100644 src/assets/Network-Icons-SVG/generic-firewall-flat-colour-label-v2-colour.svg
 create mode 100644 src/assets/Network-Icons-SVG/generic-firewall-flat-colour-label-v2-mono.svg
 create mode 100644 src/assets/Network-Icons-SVG/generic-firewall-v1-colour-3d.svg
 create mode 100644 src/assets/Network-Icons-SVG/generic-firewall-v1-colour.svg
 create mode 100644 src/assets/Network-Icons-SVG/generic-firewall-v1-mono.svg
 create mode 100644 src/assets/Network-Icons-SVG/generic-firewall-v2-colour-3d.svg
 create mode 100644 src/assets/Network-Icons-SVG/generic-firewall-v2-colour.svg
 create mode 100644 src/assets/Network-Icons-SVG/generic-gtm-colour-3d.svg
 create mode 100644 src/assets/Network-Icons-SVG/generic-gtm-colour.svg
 create mode 100644 src/assets/Network-Icons-SVG/generic-gtm-mono.svg
 create mode 100644 src/assets/Network-Icons-SVG/generic-router-colour.svg
 create mode 100644 src/assets/Network-Icons-SVG/generic-router-flat-label-colour.svg
 create mode 100644 src/assets/Network-Icons-SVG/generic-router-flat-label-mono.svg
 create mode 100644 src/assets/Network-Icons-SVG/generic-router-mono.svg
 create mode 100644 src/assets/Network-Icons-SVG/generic-router-square-colour-3d.svg
 create mode 100644 src/assets/Network-Icons-SVG/generic-router-square-colour.svg
 create mode 100644 src/assets/Network-Icons-SVG/generic-router-square-mono.svg
 create mode 100644 src/assets/Network-Icons-SVG/generic-server-1.svg
 create mode 100644 src/assets/Network-Icons-SVG/generic-server-2.svg
 create mode 100644 src/assets/Network-Icons-SVG/generic-server-3.svg
 create mode 100644 src/assets/Network-Icons-SVG/generic-switch-flat-l2-label-v1-colour.svg
 create mode 100644 src/assets/Network-Icons-SVG/generic-switch-flat-l2-label-v1-mono.svg
 create mode 100644 src/assets/Network-Icons-SVG/generic-switch-flat-l2-label-v2-colour.svg
 create mode 100644 src/assets/Network-Icons-SVG/generic-switch-flat-l2-label-v2-mono.svg
 create mode 100644 src/assets/Network-Icons-SVG/generic-switch-flat-l3-label-colour.svg
 create mode 100644 src/assets/Network-Icons-SVG/generic-switch-flat-l3-label-mono.svg
 create mode 100644 src/assets/Network-Icons-SVG/generic-switch-l2-v1-colour-3d.svg
 create mode 100644 src/assets/Network-Icons-SVG/generic-switch-l2-v1-colour.svg
 create mode 100644 src/assets/Network-Icons-SVG/generic-switch-l2-v1-mono.svg
 create mode 100644 src/assets/Network-Icons-SVG/generic-switch-l2-v2-colour-3d.svg
 create mode 100644 src/assets/Network-Icons-SVG/generic-switch-l2-v2-colour.svg
 create mode 100644 src/assets/Network-Icons-SVG/generic-switch-l2-v2-mono.svg
 create mode 100644 src/assets/Network-Icons-SVG/generic-switch-l3-colour-3d.svg
 create mode 100644 src/assets/Network-Icons-SVG/generic-switch-l3-colour.svg
 create mode 100644 src/assets/Network-Icons-SVG/generic-switch-l3-mono.svg
 create mode 100644 src/assets/Network-Icons-SVG/juniper-firewall-router.svg
 create mode 100644 src/assets/Network-Icons-SVG/juniper-router.svg
 create mode 100644 src/assets/Network-Icons-SVG/juniper-switch-l2.svg
 create mode 100644 src/assets/Network-Icons-SVG/juniper-switch-l3.svg
 create mode 100644 src/assets/Network-Icons-SVG/network-icons.svg
 create mode 100644 src/assets/Network-Icons-SVG/viptela-vbond.svg
 create mode 100644 src/assets/Network-Icons-SVG/viptela-vedge-square.svg
 create mode 100644 src/assets/Network-Icons-SVG/viptela-vedge.svg
 create mode 100644 src/assets/Network-Icons-SVG/viptela-vmanage.svg
 create mode 100644 src/assets/Network-Icons-SVG/viptela-vsmart.svg
 create mode 100644 src/assets/Network-Icons-SVG/vmware-compute.svg

diff --git a/src/assets/Network-Icons-SVG/README.md b/src/assets/Network-Icons-SVG/README.md
new file mode 100644
index 0000000..5f99005
--- /dev/null
+++ b/src/assets/Network-Icons-SVG/README.md
@@ -0,0 +1,6 @@
+# Network Icons SVG
+
+A collection of SVG format network icons. These can be used freely and don't adhere to any vendor at all, meaning so that you can use the router icon to represent any brand router in your diagram.
+Being SVG a vectorial graphics format, no resizing, format change or conversion operation will degrade icon quality.
+
+This icons were originally shared by BobTheButcher.
\ No newline at end of file
diff --git a/src/assets/Network-Icons-SVG/arista-switch.svg b/src/assets/Network-Icons-SVG/arista-switch.svg
new file mode 100644
index 0000000..9b7010b
--- /dev/null
+++ b/src/assets/Network-Icons-SVG/arista-switch.svg
@@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   version="1.1"
+   id="svg4965"
+   viewBox="0 0 195.74482 196.75038"
+   height="55.527328mm"
+   width="55.243538mm">
+  <defs
+     id="defs4967" />
+  <metadata
+     id="metadata4970">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     transform="translate(-250.69902,-416.84416)"
+     id="layer1">
+    <g
+       transform="translate(-562.33748,292.79637)"
+       id="g4683">
+      <rect
+         style="fill:#a1a2a3;fill-opacity:1;stroke:#616161;stroke-width:5.52306032;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         id="rect4349-8-9"
+         width="190.22176"
+         height="191.22731"
+         x="815.79803"
+         y="126.80932" />
+      <path
+         style="display:inline;fill:#5400ff;fill-opacity:1;fill-rule:evenodd;stroke:#4000c3;stroke-width:2.0192306;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         d="m 879.38505,148.3746 -24.11204,21.32513 17.05428,0.45539 -0.0826,32.96459 -0.0113,0.01 0.0113,0.008 0,0.10279 0.14752,0 27.756,19.15098 -27.91827,19.19262 0.0325,0.0221 -0.0177,0 0.0826,33.08455 -17.05428,0.4554 24.11204,21.32512 25.29227,-22.63254 -18.06042,0.47987 -0.0738,-28.59672 23.75208,-16.32805 23.82877,16.44068 0.0708,28.85624 -17.05724,0.4554 24.11499,21.32512 25.29227,-22.63254 -18.06043,0.47987 -0.0856,-32.74178 -0.0944,0 -27.81204,-19.19262 27.80615,-19.11671 0.10028,0 0.0856,-32.73932 18.06043,0.47987 -25.29227,-22.63255 -24.11499,21.32513 17.05724,0.45539 -0.0708,28.88319 -23.77862,16.34518 -23.80223,-16.42599 0.0738,-28.43022 18.06042,0.47987 -25.29227,-22.63255 z"
+         id="path5466-3-8-1-7-7-4" />
+    </g>
+  </g>
+</svg>
diff --git a/src/assets/Network-Icons-SVG/cisco-asa.svg b/src/assets/Network-Icons-SVG/cisco-asa.svg
new file mode 100644
index 0000000..62863b0
--- /dev/null
+++ b/src/assets/Network-Icons-SVG/cisco-asa.svg
@@ -0,0 +1,117 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   version="1.1"
+   id="svg4347"
+   viewBox="0 0 149.65765 157.94562"
+   height="44.575764mm"
+   width="42.236713mm">
+  <defs
+     id="defs4349" />
+  <metadata
+     id="metadata4352">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     transform="translate(-333.74263,-396.24655)"
+     id="layer1">
+    <g
+       id="g4220">
+      <g
+         id="g8200-3"
+         transform="matrix(1.0076627,0,0,1.0076627,-230.71888,-285.33301)">
+        <rect
+           ry="0.26629567"
+           y="794.66962"
+           x="563.3208"
+           height="37.427334"
+           width="143.88431"
+           id="rect6782-4-6-6"
+           style="opacity:1;fill:none;fill-opacity:1;stroke:#888888;stroke-width:4.45221663;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+        <g
+           id="g8191-7">
+          <path
+             style="display:inline;opacity:1;fill:#d3453a;fill-opacity:1;stroke:#cdc9ca;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+             d="m 613.64003,795.05129 42.72239,0 0,18.70732 -42.72239,0 z"
+             id="path7877-5" />
+          <path
+             style="display:inline;opacity:1;fill:#d3453a;fill-opacity:1;stroke:#cdc9ca;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+             d="m 682.77868,814.19081 22.9485,0 0,17.17924 -22.9485,0 z"
+             id="path7875-3" />
+          <path
+             style="display:inline;opacity:1;fill:#d3453a;fill-opacity:1;stroke:#cdc9ca;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+             d="m 635.12988,814.38281 46.94048,0 0,16.98724 -46.94048,0 z"
+             id="path7873-5" />
+          <path
+             style="display:inline;opacity:1;fill:#d3453a;fill-opacity:1;stroke:#cdc9ca;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+             d="m 565.46659,814.19081 22.94851,0 0,17.17924 -22.94851,0 z"
+             id="path7871-6" />
+          <path
+             style="display:inline;opacity:1;fill:#d3453a;fill-opacity:1;stroke:#cdc9ca;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+             d="m 588.17173,814.38281 46.94047,0 0,16.98724 -46.94047,0 z"
+             id="path7869-2" />
+          <path
+             style="display:inline;opacity:1;fill:#d3453a;fill-opacity:1;stroke:#cdc9ca;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+             d="m 656.97146,795.05129 48.75572,0 0,18.65165 -48.75572,0 z"
+             id="path7867-9" />
+          <path
+             style="display:inline;opacity:1;fill:#d3453a;fill-opacity:1;stroke:#cdc9ca;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+             d="m 565.42858,795.05129 48.75572,0 0,18.65165 -48.75572,0 z"
+             id="path7857-1" />
+        </g>
+      </g>
+      <rect
+         style="opacity:1;fill:#396c85;fill-opacity:1;stroke:#314b58;stroke-width:4.08422089;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         id="rect5784-1-2"
+         width="145.57339"
+         height="112.29983"
+         x="336.71738"
+         y="399.47974" />
+      <g
+         id="g4213">
+        <path
+           id="path5466-3-6-7-2-7-0-7-7"
+           d="m 360.85819,439.82588 -5e-5,-5.5737 41.5993,0 -0.56273,-7.04627 28.69171,9.88937 -27.1577,9.3851 -0.53396,-6.65422 -42.03775,-4e-5 z"
+           style="display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#606f79;stroke-width:1.18764484;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+        <path
+           id="path5466-3-6-7-2-7-0-9-1-0"
+           d="m 445.58853,455.88888 1.4e-4,5.37015 -46.31732,-10e-6 0.62659,6.78898 -31.94578,-9.52825 30.2377,-9.04239 0.59458,6.41122 46.80546,5e-5 z"
+           style="display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#606f79;stroke-width:1.23009062;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+        <rect
+           rx="0"
+           ry="1.550243"
+           y="454.27634"
+           x="445.30862"
+           height="3.100486"
+           width="15.995984"
+           id="rect7798-9"
+           style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:#606f79;stroke-width:0.48253697;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+        <rect
+           rx="0"
+           ry="1.4011024"
+           y="430.98013"
+           x="351.3764"
+           height="2.8022048"
+           width="13.644124"
+           id="rect7798-7-3"
+           style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:#606f79;stroke-width:0.42367512;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+        <path
+           id="path7682-6"
+           d="m 439.06189,495.30104 -7.9454,-8.04607 -1.14837,0.7862 c -3.61149,2.47256 -4.63104,3.08084 -7.53184,4.49366 -10.65499,5.18946 -22.33918,5.9091 -33.61831,2.07059 -11.23485,-3.82344 -20.50509,-12.05763 -25.81527,-22.93017 -7.48449,-15.32438 -5.84894,-33.76502 4.20465,-47.40682 6.69395,-9.08307 16.12,-15.13706 27.36262,-17.57399 2.28836,-0.49602 2.71792,-0.91593 8.05743,-0.91593 5.3395,0 6.84049,0.41994 9.12885,0.91593 11.18467,2.42435 20.70757,8.54068 27.36208,17.57399 8.75302,11.88196 11.20004,27.6104 6.49581,41.75225 -1.76747,5.3134 -4.92777,11.01056 -8.30774,14.97664 -0.68691,0.80601 -1.2194,1.55408 -1.18332,1.66234 10.96632,12.96854 5.2213,6.32193 18.27193,20.11924 -1.01475,2.31585 -1.54375,2.12461 -3.2045,4.39283 -8.30501,-8.55895 -3.74741,-3.3866 -12.12861,-11.87069 z m -19.94646,-9.59137 c 0,0 8.40425,-2.78374 17.00538,-16.56642 7.53877,-12.08034 6.15416,-22.68992 -0.16305,-35.73085 -5.05482,-10.43489 -9.86145,-16.00849 -20.69065,-19.60304 -9.77324,-3.24407 -15.96974,-3.20276 -25.58063,0.67681 -11.35948,4.58541 -18.83585,11.86307 -22.77744,23.65204 -3.80228,11.37227 -4.14101,19.47128 1.19876,30.12717 2.02954,4.05009 3.07474,6.28077 6.33549,9.66934 7.40718,7.69756 13.90163,11.20411 25.07199,12.29671 1.85125,0.18109 11.62881,-1.16482 11.62881,-1.16482 z"
+           style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:#606f79;stroke-width:0.73655474;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/src/assets/Network-Icons-SVG/cisco-nexus.svg b/src/assets/Network-Icons-SVG/cisco-nexus.svg
new file mode 100644
index 0000000..44b3907
--- /dev/null
+++ b/src/assets/Network-Icons-SVG/cisco-nexus.svg
@@ -0,0 +1,74 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   width="41.322506mm"
+   height="59.977161mm"
+   viewBox="0 0 41.322506 59.977161"
+   version="1.1"
+   id="svg8">
+  <defs
+     id="defs2" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     transform="translate(-128.06112,-87.622466)"
+     id="layer1">
+    <g
+       id="g1091">
+      <g
+         transform="translate(0.1580529,-1.1244792)"
+         id="g1081">
+        <rect
+           style="opacity:1;fill:#559cd0;fill-opacity:1;stroke:#2c79b2;stroke-width:1.25999999;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+           id="rect6083-0"
+           width="40.062508"
+           height="16.86587"
+           x="128.53307"
+           y="89.376945" />
+        <path
+           style="display:inline;opacity:1;fill:#ffffff;fill-opacity:1;stroke:#a1a1a1;stroke-width:0.2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+           d="m 132.20646,91.611743 v 4.759742 h 7.20052 v -1.388511 l 6.66089,2.895535 -6.66089,2.841511 v -1.471189 h -7.20052 v 4.759189 h 7.20052 v -1.0848 l 0.33349,-0.14221 h 17.60526 l 0.37648,0.16371 v 1.0633 h 7.19997 v -4.759189 h -7.19997 v 1.632139 l -6.70057,-2.912613 6.70057,-2.859153 v 1.262281 h 7.19997 v -4.759742 h -7.19997 v 1.294254 l -0.22986,0.09811 h -17.88969 l -0.19568,-0.08489 v -1.307481 z m 10.17819,2.601735 H 154.658 l -6.19455,2.642526 z m 6.24085,4.776831 5.93825,2.581331 h -11.98838 z"
+           id="rect6085-7-9-8-2" />
+      </g>
+      <g
+         transform="translate(0.07783935)"
+         id="g1075">
+        <rect
+           style="opacity:1;fill:#559cd0;fill-opacity:1;stroke:#2c79b2;stroke-width:1.0057646;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+           id="rect826"
+           width="40.222935"
+           height="40.853931"
+           x="128.53307"
+           y="106.24281" />
+        <g
+           id="g1069"
+           transform="translate(-0.32418185,0.57016383)">
+          <path
+             id="rect867"
+             d="m 149.18297,108.25016 -1.84082,1.73031 -1.6558,1.66717 2.36749,0.0315 -0.155,7.01515 -4.15056,-3.26593 c -0.007,-0.006 -0.0139,-0.011 -0.0216,-0.017 -0.002,-0.002 -0.005,-0.003 -0.007,-0.005 -1.17013,-0.81489 -2.31893,-1.68636 -3.6646,-2.43001 -0.81342,-0.45793 -1.49221,-0.67756 -2.45084,-1.00724 -0.0215,-0.008 -0.0438,-0.0126 -0.0664,-0.0152 -0.33202,-0.10327 -0.57681,-0.18672 -0.83926,-0.21534 -0.28125,-0.0306 -0.5527,0.008 -0.89232,0.0966 -0.003,6.2e-4 -0.006,10e-4 -0.009,0.002 -0.005,0.001 -0.009,0.003 -0.0139,0.005 -0.36695,0.11658 -0.61765,0.39655 -0.78054,0.67886 -0.16041,0.27806 -0.25666,0.58865 -0.24059,0.90243 -0.0145,0.85198 0.0931,1.08233 0.16798,1.46886 l 0.002,0.007 c 0.001,0.009 0.002,0.0188 0.005,0.0284 0.002,0.005 0.003,0.01 0.005,0.0145 0.27259,0.98803 0.9835,2.28792 1.27185,2.79377 0.01,0.0179 0.0215,0.0349 0.0347,0.0505 6.6e-4,6.7e-4 0.001,0.001 0.002,0.002 l 1.12028,1.73347 c 0.006,0.008 0.0118,0.0162 0.0183,0.0239 6.6e-4,6.7e-4 0.001,10e-4 0.002,0.002 l 1.67409,2.55 0.002,0.005 0.0163,0.0239 c 0.001,0.002 5.7e-4,0.005 0.002,0.007 0.006,0.009 0.0122,0.018 0.019,0.0265 l 1.55979,1.98731 c 0.002,0.003 0.005,0.006 0.007,0.009 l 0.74831,0.89925 -6.96416,0.0126 -0.0183,-2.32706 -1.7164,1.70757 -1.7019,1.6419 1.76946,1.80419 1.70126,1.61979 -0.0177,-2.36748 7.36708,-0.0134 -3.65953,4.56007 c -0.006,0.007 -0.0111,0.0138 -0.0171,0.0215 -0.002,0.002 -0.003,0.005 -0.005,0.007 -0.80126,1.17954 -1.6591,2.33817 -2.38707,3.69237 -0.44845,0.81872 -0.66031,1.49982 -0.97883,2.46222 -0.007,0.0217 -0.0122,0.0442 -0.0145,0.067 -0.0994,0.33318 -0.17966,0.57838 -0.20524,0.84115 -0.0274,0.28159 0.0146,0.55249 0.10664,0.89104 9.5e-4,0.003 0.002,0.006 0.003,0.009 8.1e-4,0.005 0.003,0.009 0.005,0.0145 0.12086,0.36557 0.40351,0.61274 0.6877,0.77233 0.27991,0.15722 0.59202,0.2495 0.90558,0.22987 0.85211,0.005 1.08072,-0.10495 1.46634,-0.18441 l 0.007,-0.003 c 0.009,-8.7e-4 0.0189,-0.001 0.0285,-0.003 0.005,-0.002 0.01,-0.003 0.0145,-0.005 0.98481,-0.28402 2.27615,-1.00923 2.77861,-1.30341 0.018,-0.0101 0.0349,-0.0219 0.0505,-0.0354 6.7e-4,-6.6e-4 0.001,-10e-4 0.002,-0.002 l 1.7202,-1.14048 c 0.008,-0.006 0.0162,-0.0119 0.0239,-0.0184 6.7e-4,-6.6e-4 10e-4,-0.001 0.002,-0.002 l 2.53042,-1.70378 0.005,-0.003 0.0239,-0.0163 c 0.002,-0.001 0.005,-0.001 0.007,-0.003 0.009,-0.006 0.0179,-0.0121 0.0264,-0.0188 l 1.96902,-1.58318 c 0.003,-0.002 0.006,-0.005 0.009,-0.007 l 1.00094,-0.85316 v 6.69452 l -2.32708,0.0139 1.70442,1.71956 1.63874,1.70443 1.80735,-1.76567 1.62296,-1.69873 -2.36751,0.0139 -0.14174,-6.771 4.68349,3.31797 c 0.007,0.006 0.0145,0.011 0.0221,0.0171 0.002,0.002 0.005,0.003 0.007,0.005 1.18419,0.79433 2.34846,1.64494 3.70691,2.36498 0.82131,0.44363 1.50367,0.65141 2.4679,0.96429 0.0215,0.007 0.0438,0.0122 0.0664,0.0145 0.33377,0.0974 0.58014,0.17616 0.84305,0.20017 0.28174,0.0259 0.55177,-0.0175 0.88978,-0.11182 0.003,-6.2e-4 0.006,-0.001 0.009,-0.002 0.005,-0.001 0.009,-0.003 0.0145,-0.005 0.36484,-0.12303 0.6106,-0.407 0.76853,-0.69213 0.15555,-0.28082 0.24574,-0.59339 0.22419,-0.90685 -3.9e-4,-0.8521 -0.11169,-1.08055 -0.19324,-1.4657 l -0.002,-0.007 c -0.001,-0.009 -0.002,-0.019 -0.005,-0.0284 -0.002,-0.005 -0.003,-0.009 -0.005,-0.0139 -0.2898,-0.98311 -1.0227,-2.27028 -1.31983,-2.77101 -0.0101,-0.018 -0.0219,-0.0349 -0.0354,-0.0505 -6.6e-4,-6.7e-4 -0.001,-10e-4 -0.002,-0.002 l -1.15059,-1.71326 c -0.006,-0.008 -0.0121,-0.0162 -0.0188,-0.0239 -6.6e-4,-6.7e-4 -0.001,-10e-4 -0.002,-0.002 l -1.71831,-2.52031 -0.002,-0.005 -0.0171,-0.0239 c -10e-4,-0.002 -10e-4,-0.005 -0.002,-0.007 -0.006,-0.009 -0.0121,-0.0179 -0.0189,-0.0264 l -1.59454,-1.95955 c -0.002,-0.003 -0.005,-0.006 -0.007,-0.009 l -1.03946,-1.20555 7.01344,0.10864 -0.0221,2.32707 1.74547,-1.67726 1.72968,-1.61221 -1.73726,-1.83451 -1.67348,-1.64948 -0.0227,2.36749 -7.02986,-0.10926 3.26233,-4.25946 c 0.006,-0.008 0.011,-0.0138 0.0163,-0.0216 0.002,-0.002 0.003,-0.005 0.005,-0.007 0.77443,-1.19733 1.60586,-2.37514 2.30307,-3.74543 0.42985,-0.82861 0.62591,-1.51434 0.92262,-2.48367 0.007,-0.0218 0.0114,-0.0442 0.0134,-0.067 0.0919,-0.33534 0.16668,-0.58228 0.1863,-0.84557 0.0211,-0.28215 -0.0273,-0.55212 -0.12693,-0.88852 -9.5e-4,-0.003 -0.002,-0.006 -0.003,-0.009 -0.001,-0.005 -0.003,-0.008 -0.005,-0.014 -0.12906,-0.36273 -0.41705,-0.60337 -0.70476,-0.75652 -0.28338,-0.15087 -0.5976,-0.23639 -0.91061,-0.20966 -0.852,0.0146 -1.07882,0.12986 -1.46257,0.21787 l -0.007,0.003 c -0.009,10e-4 -0.0191,0.002 -0.0285,0.005 -0.005,0.002 -0.01,0.004 -0.0145,0.006 -0.97812,0.3062 -2.25259,1.06046 -2.74828,1.36592 -0.0178,0.0105 -0.0345,0.0228 -0.0499,0.0367 -6.7e-4,6.6e-4 -10e-4,0.001 -0.002,0.002 l -1.69431,1.179 c -0.008,0.006 -0.0159,0.0127 -0.0234,0.0196 -6.7e-4,6.6e-4 -0.001,10e-4 -0.002,0.002 l -2.49128,1.75999 -0.005,0.003 -0.0234,0.017 c -0.002,9e-4 -0.005,7e-4 -0.007,0.003 -0.009,0.006 -0.0176,0.0126 -0.0259,0.0196 l -1.93239,1.62674 c -0.003,0.002 -0.006,0.005 -0.009,0.007 l -0.88916,0.79316 0.13577,-7.03176 2.32645,0.0309 -1.67096,-1.75241 z m 12.30035,4.34789 c 0.003,4e-5 0.006,4e-5 0.009,0 0.0458,-0.003 0.24957,0.0289 0.39342,0.10547 0.14217,0.0757 0.24203,0.19661 0.25955,0.24187 0.0793,0.27059 0.0977,0.39325 0.0872,0.53297 -0.009,0.13803 -0.0643,0.34856 -0.1623,0.70918 v 0.002 c -0.29768,0.97269 -0.47281,1.57663 -0.85883,2.32076 -6.8e-4,0.002 -0.001,0.003 -0.002,0.005 -0.65423,1.2866 -1.45268,2.42858 -2.23551,3.63743 -0.002,0.002 -0.003,0.005 -0.005,0.007 l -0.005,0.007 c -2.4e-4,3.7e-4 -0.002,-3.3e-4 -0.002,0 v 0.002 c -0.001,0.001 -0.005,0.007 -0.005,0.007 l -3.66269,4.78174 c -0.13567,0.13564 -0.13922,0.18277 -0.33164,0.43374 -0.0881,0.10211 -0.13235,0.25304 -0.11048,0.38141 -0.11554,0.3159 -0.022,0.80691 0.14204,1.0236 l 0.13515,0.15661 -0.001,0.0816 0.0726,0.001 1.58127,1.8345 1.57496,1.93808 1.74231,2.55379 1.16449,1.7303 c 0.27548,0.46472 0.98346,1.76016 1.215,2.5279 0.10305,0.48579 0.18306,0.47208 0.17935,1.29585 -1.8e-4,0.009 -4.3e-4,0.0187 0,0.0284 -4e-5,0.003 -4e-5,0.006 0,0.009 0.003,0.0459 -0.0336,0.24896 -0.11242,0.39154 -0.078,0.14086 -0.20012,0.23834 -0.24566,0.25513 -0.27189,0.0746 -0.39534,0.0918 -0.53488,0.0788 -0.13782,-0.0126 -0.34774,-0.0702 -0.70665,-0.17429 h -0.002 c -0.96758,-0.31391 -1.56804,-0.49894 -2.30561,-0.89735 -0.002,-6.8e-4 -0.003,-0.001 -0.005,-0.002 -1.27551,-0.67565 -2.40396,-1.49321 -3.59954,-2.29613 -0.002,-0.002 -0.005,-0.003 -0.007,-0.005 l -0.007,-0.005 c -3.6e-4,-2.3e-4 3.6e-4,-0.002 0,-0.002 h -0.002 c -0.001,-0.001 -0.007,-0.005 -0.007,-0.005 l -5.09556,-4.0397 c -0.64783,-0.45566 -1.4497,-0.40159 -2.07896,-0.0827 v 0 l -1.63079,1.64288 -1.94754,1.5636 -2.54027,1.86952 -1.73727,1.15438 c -0.46632,0.27276 -1.76574,0.97282 -2.53484,1.19985 -0.48641,0.0999 -0.47338,0.18032 -1.29709,0.17176 -0.008,-4.2e-4 -0.0188,-5.4e-4 -0.0284,0.001 -0.003,-2.6e-4 -0.006,-4.7e-4 -0.009,-6.4e-4 -0.0458,0.002 -0.24881,-0.0346 -0.3909,-0.11426 -0.14038,-0.0786 -0.23731,-0.20196 -0.25385,-0.24756 -0.0732,-0.27232 -0.0888,-0.39541 -0.0752,-0.53488 0.0134,-0.13773 0.072,-0.34709 0.17809,-0.70537 l 6.4e-4,-0.002 c 0.31956,-0.96572 0.50791,-1.56533 0.91062,-2.30056 6.7e-4,-0.001 0.001,-0.002 0.002,-0.003 0.68312,-1.27151 1.50769,-2.39541 2.31761,-3.5863 0.002,-0.002 0.003,-0.005 0.005,-0.007 l 0.005,-0.007 c 2.4e-4,-3.4e-4 0.002,2e-4 0.002,0 l 6.3e-4,-0.002 c 9.5e-4,-8.3e-4 0.005,-0.007 0.005,-0.007 l 4.11107,-5.12462 c 0.37943,-0.42779 0.41459,-1.02992 0.10422,-1.46321 -0.16191,-0.1999 -0.46478,-0.55897 -0.50835,-0.61129 l -1.2428,-1.4935 -1.54086,-1.96523 -1.69746,-2.5841 -1.13482,-1.75052 c -0.26731,-0.46946 -0.95207,-1.77706 -1.17016,-2.54873 -0.0945,-0.48752 -0.17473,-0.47543 -0.15662,-1.299 3.5e-4,-0.009 8.8e-4,-0.0187 6.3e-4,-0.0285 4e-5,-0.003 4e-5,-0.006 0,-0.009 -0.002,-0.0459 0.0379,-0.24846 0.1194,-0.38963 0.0805,-0.13948 0.20425,-0.23535 0.25008,-0.25132 0.27315,-0.0699 0.39686,-0.0841 0.53614,-0.0688 0.13758,0.0151 0.34645,0.0761 0.70349,0.18628 h 0.002 c 0.96197,0.33077 1.55932,0.52656 2.28983,0.93779 0.002,6.8e-4 0.003,0.001 0.005,0.002 1.26349,0.69783 2.37714,1.53494 3.55851,2.35865 0.002,0.002 0.005,0.003 0.007,0.005 l 0.007,0.005 c 3.5e-4,2.5e-4 -3.4e-4,0.002 0,0.002 h 0.002 c 0.001,10e-4 0.007,0.005 0.007,0.005 l 5.07663,4.17043 c 0.26008,0.29063 0.87297,0.40652 1.20617,0.12497 l 0.47362,-0.42182 0.0341,6.2e-4 6.1e-4,-0.0315 1.53582,-1.36908 1.91155,-1.6078 2.52411,-1.78462 1.71073,-1.19354 c 0.46005,-0.28321 1.7433,-1.01233 2.50705,-1.25667 0.48401,-0.11109 0.46899,-0.19075 1.29268,-0.20084 0.009,1e-4 0.0194,2.5e-4 0.0292,-0.002 z"
+             style="opacity:1;fill:#f2f7f9;fill-opacity:1;stroke:#a1a1a1;stroke-width:0.2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal" />
+          <circle
+             r="6.1201358"
+             cy="126.09962"
+             cx="148.96872"
+             id="path865"
+             style="opacity:1;fill:#b4b4b4;fill-opacity:1;stroke:#a1a1a1;stroke-width:0.36660805;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal" />
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/src/assets/Network-Icons-SVG/cisco-router-firewall.svg b/src/assets/Network-Icons-SVG/cisco-router-firewall.svg
new file mode 100644
index 0000000..25ec316
--- /dev/null
+++ b/src/assets/Network-Icons-SVG/cisco-router-firewall.svg
@@ -0,0 +1,127 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   version="1.1"
+   id="svg9306"
+   viewBox="0 0 164.51003 164.51003"
+   height="46.428387mm"
+   width="46.428387mm">
+  <defs
+     id="defs9308" />
+  <metadata
+     id="metadata9311">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     transform="translate(-309.17356,-461.53576)"
+     id="layer1">
+    <g
+       transform="translate(-167.69087,455.61918)"
+       id="g8332">
+      <circle
+         style="opacity:1;fill:#396c85;fill-opacity:1;stroke:#314b58;stroke-width:6.09184361;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         id="path4136-6-5-5"
+         cx="559.11945"
+         cy="88.171593"
+         r="79.209091" />
+      <g
+         transform="matrix(0.823168,0,0,0.823168,253.51017,-732.24499)"
+         id="g8143-3">
+        <rect
+           ry="2.1805694"
+           y="957.65753"
+           x="300.04675"
+           height="79.028679"
+           width="141.36179"
+           id="rect6782-4-65"
+           style="opacity:1;fill:none;fill-opacity:1;stroke:#cdc9ca;stroke-width:6.4125905;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+        <g
+           id="g8128-6">
+          <path
+             style="display:inline;opacity:1;fill:#d3453a;fill-opacity:1;stroke:#cdc9ca;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+             d="m 349.45615,989.24954 42.64882,0 0,16.18666 -42.64882,0 z"
+             id="path8126-3" />
+          <path
+             style="display:inline;opacity:1;fill:#d3453a;fill-opacity:1;stroke:#cdc9ca;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+             d="m 417.88037,1005.7241 22.90899,0 0,14.8645 -22.90899,0 z"
+             id="path8124-9" />
+          <path
+             style="display:inline;opacity:1;fill:#d3453a;fill-opacity:1;stroke:#cdc9ca;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+             d="m 370.31363,1005.8091 46.85964,0 0,14.6983 -46.85964,0 z"
+             id="path8122-4" />
+          <path
+             style="display:inline;opacity:1;fill:#d3453a;fill-opacity:1;stroke:#cdc9ca;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+             d="m 300.7703,1005.7241 22.90898,0 0,14.8645 -22.90898,0 z"
+             id="path8120-8" />
+          <path
+             style="display:inline;opacity:1;fill:#d3453a;fill-opacity:1;stroke:#cdc9ca;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+             d="m 323.43633,1005.8091 46.85964,0 0,14.6983 -46.85964,0 z"
+             id="path8118-1" />
+          <path
+             style="display:inline;opacity:1;fill:#d3453a;fill-opacity:1;stroke:#cdc9ca;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+             d="m 392.15692,989.1021 48.67176,0 0,16.1385 -48.67176,0 z"
+             id="path8116-2" />
+          <path
+             style="display:inline;opacity:1;fill:#d3453a;fill-opacity:1;stroke:#cdc9ca;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+             d="m 417.91007,974.01083 22.91856,0 0,14.59619 -22.91856,0 z"
+             id="path8114-9" />
+          <path
+             style="display:inline;opacity:1;fill:#d3453a;fill-opacity:1;stroke:#cdc9ca;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+             d="m 370.28045,974.20771 46.85966,0 0,14.69832 -46.85966,0 z"
+             id="path8112-3" />
+          <path
+             style="display:inline;opacity:1;fill:#d3453a;fill-opacity:1;stroke:#cdc9ca;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+             d="m 300.73236,974.12281 22.91856,0 0,14.59618 -22.91856,0 z"
+             id="path8110-9" />
+          <path
+             style="display:inline;opacity:1;fill:#d3453a;fill-opacity:1;stroke:#cdc9ca;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+             d="m 323.40317,974.20771 46.85964,0 0,14.69832 -46.85964,0 z"
+             id="path8108-0" />
+          <path
+             style="display:inline;opacity:1;fill:#d3453a;fill-opacity:1;stroke:#cdc9ca;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+             d="m 300.73236,989.16516 48.67175,0 0,16.13844 -48.67175,0 z"
+             id="path8106-8" />
+          <path
+             style="display:inline;opacity:1;fill:#d3453a;fill-opacity:1;stroke:#cdc9ca;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+             d="m 300.73236,1020.2383 140.09627,0 0,16.2336 -140.09627,0 z"
+             id="path8104-8" />
+          <path
+             style="display:inline;opacity:1;fill:#d3453a;fill-opacity:1;stroke:#cdc9ca;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+             d="m 300.73236,957.75687 140.09627,0 0,16.23354 -140.09627,0 z"
+             id="rect5963-6-2-1-6-4-5" />
+        </g>
+      </g>
+      <g
+         id="g6823">
+        <path
+           id="path5466-5"
+           d="m 514.49217,32.215744 -9.37091,9.370913 24.16949,24.169555 -12.17336,11.519886 33.29679,0.04349 0,-31.55773 -11.49769,10.877368 -24.42432,-24.424288 z"
+           style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#606f79;stroke-width:1.61080325;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+        <path
+           id="path5466-3-4"
+           d="m 605.16029,141.71329 9.37091,-9.37091 -24.16949,-24.16956 12.17352,-11.519725 -33.29682,-0.04349 0,31.557695 11.49766,-10.8774 24.42442,24.42429 z"
+           style="display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#606f79;stroke-width:1.61080325;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+        <path
+           id="path5466-3-6-76"
+           d="m 564.73554,72.005775 9.37088,9.370913 24.16959,-24.169524 11.51976,12.173485 0.0435,-33.296754 -31.55777,0 10.87744,11.497656 -24.42429,24.424385 z"
+           style="display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#606f79;stroke-width:1.61080325;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+        <path
+           id="path5466-3-6-7-5"
+           d="m 551.65408,103.23429 -9.37088,-9.370945 -24.16959,24.169625 -11.51976,-12.17359 -0.0435,33.29679 31.55773,0 -10.87743,-11.49766 24.42429,-24.42438 z"
+           style="display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#606f79;stroke-width:1.61080325;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/src/assets/Network-Icons-SVG/cisco-router.svg b/src/assets/Network-Icons-SVG/cisco-router.svg
new file mode 100644
index 0000000..0947707
--- /dev/null
+++ b/src/assets/Network-Icons-SVG/cisco-router.svg
@@ -0,0 +1,58 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   version="1.1"
+   id="svg8669"
+   viewBox="0 0 164.51002 164.51002"
+   height="46.428383mm"
+   width="46.428383mm">
+  <defs
+     id="defs8671" />
+  <metadata
+     id="metadata8674">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     transform="translate(-277.74501,-401.53577)"
+     id="layer1">
+    <g
+       transform="matrix(3.2216066,0,0,3.2216066,-1037.1702,-358.97986)"
+       id="g6069"
+       style="display:inline">
+      <circle
+         style="opacity:1;fill:#396c85;fill-opacity:1;stroke:#314b58;stroke-width:1.89093339;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         id="path4136-6-5"
+         cx="433.68741"
+         cy="261.59949"
+         r="24.586828" />
+      <path
+         style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#606f79;stroke-width:0.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         d="m 419.83492,244.23056 -2.90877,2.90877 7.50231,7.50233 -3.77866,3.57582 10.33546,0.0135 0,-9.79565 -3.56893,3.37638 -7.58141,-7.5814 z"
+         id="path5466" />
+      <path
+         style="display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#606f79;stroke-width:0.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         d="m 447.97868,278.21905 2.90877,-2.90877 -7.50231,-7.50233 3.77871,-3.57577 -10.33547,-0.0135 0,9.79564 3.56892,-3.37639 7.58144,7.5814 z"
+         id="path5466-3" />
+      <path
+         style="display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#606f79;stroke-width:0.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         d="m 435.43067,256.58155 2.90876,2.90877 7.50234,-7.50232 3.57578,3.7787 0.0135,-10.33545 -9.79566,0 3.3764,3.56892 -7.5814,7.58143 z"
+         id="path5466-3-6" />
+      <path
+         style="display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#606f79;stroke-width:0.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         d="m 431.37013,266.27501 -2.90876,-2.90878 -7.50234,7.50235 -3.57578,-3.77873 -0.0135,10.33546 9.79565,0 -3.3764,-3.56892 7.5814,-7.58143 z"
+         id="path5466-3-6-7" />
+    </g>
+  </g>
+</svg>
diff --git a/src/assets/Network-Icons-SVG/cisco-switch-l2.svg b/src/assets/Network-Icons-SVG/cisco-switch-l2.svg
new file mode 100644
index 0000000..93b76f4
--- /dev/null
+++ b/src/assets/Network-Icons-SVG/cisco-switch-l2.svg
@@ -0,0 +1,58 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   version="1.1"
+   id="svg6164"
+   viewBox="0 0 148.51957 141.32653"
+   height="39.885487mm"
+   width="41.915524mm">
+  <defs
+     id="defs6166" />
+  <metadata
+     id="metadata6169">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     transform="translate(-411.4545,-467.41322)"
+     id="layer1">
+    <g
+       id="g4144"
+       transform="translate(0.5118018,-0.0474185)">
+      <rect
+         style="opacity:1;fill:#396c85;fill-opacity:1;stroke:#314b58;stroke-width:4.48458481;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         id="rect5784-3"
+         width="144.03497"
+         height="136.84193"
+         x="413.69681"
+         y="469.65552" />
+      <path
+         style="display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#606f79;stroke-width:1.61080325;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         d="m 479.88752,583.90055 3e-5,-12.60789 -33.82967,0 0.45763,-15.93893 -23.33284,22.37013 22.08534,21.22945 0.43424,-15.05209 34.18624,-9e-5 z"
+         id="path5466-3-6-7-2-7-67" />
+      <path
+         style="display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#606f79;stroke-width:1.61080325;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         d="m 494.75491,530.88618 4e-5,-12.60792 -33.82968,0 0.45763,-15.93893 -23.33287,22.37012 22.08537,21.22946 0.43424,-15.05209 34.18624,-10e-5 z"
+         id="path5466-3-6-7-2-7-0-5" />
+      <path
+         style="display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#606f79;stroke-width:1.61080325;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         d="m 488.40487,491.6943 -1e-4,12.60788 33.82974,-3e-5 -0.45766,15.93896 23.3329,-22.37013 -22.08534,-21.22945 -0.43427,15.05209 -34.18627,10e-5 z"
+         id="path5466-3-6-7-2-7-0-9-35" />
+      <path
+         style="display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#606f79;stroke-width:1.61080325;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         d="m 476.3934,547.17088 -10e-5,12.60788 33.82974,-3e-5 -0.45766,15.93896 23.3329,-22.37012 -22.08534,-21.22946 -0.43427,15.05212 -34.18627,7e-5 z"
+         id="path5466-3-6-7-2-7-0-9-3-6" />
+    </g>
+  </g>
+</svg>
diff --git a/src/assets/Network-Icons-SVG/cisco-switch-l3-with-rp.svg b/src/assets/Network-Icons-SVG/cisco-switch-l3-with-rp.svg
new file mode 100644
index 0000000..b8d84df
--- /dev/null
+++ b/src/assets/Network-Icons-SVG/cisco-switch-l3-with-rp.svg
@@ -0,0 +1,65 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   version="1.1"
+   id="svg7418"
+   viewBox="0 0 146.52122 203.53003"
+   height="57.440697mm"
+   width="41.351543mm">
+  <defs
+     id="defs7420" />
+  <metadata
+     id="metadata7423">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     transform="translate(-292.45367,-367.74006)"
+     id="layer1">
+    <g
+       transform="translate(-10.876593,-253.63388)"
+       id="g7285">
+      <g
+         style="display:inline"
+         id="g6050-3"
+         transform="matrix(4.3512606,0,0,4.3512606,-1517.2224,-830.04365)">
+        <rect
+           y="348.80347"
+           x="418.905"
+           height="31.025654"
+           width="32.656502"
+           id="rect5784-0-6"
+           style="opacity:1;fill:#396c85;fill-opacity:1;stroke:#314b58;stroke-width:1.01677299;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+        <path
+           id="path5466-3-6-7-2-7-0-9-6-1"
+           d="m 435.28711,350.91797 -4.35938,4.53711 3.0918,0.0879 0,2.97461 a 6.0267854,6.0267854 0 0 0 -1.54297,0.71094 l -4.07031,-4.06836 2.38281,-2.24805 -6.63867,-0.14063 0.125,6.29102 2.24805,-2.12305 4.13867,4.13867 a 6.0267854,6.0267854 0 0 0 -0.74805,1.76172 l -4.05468,0 0.0957,-3.27343 -4.79297,4.59375 4.53516,4.36132 0.0898,-3.09179 4.06055,0 a 6.0267854,6.0267854 0 0 0 0.6914,1.84765 l -3.9707,3.97071 -2.24805,-2.38086 -0.14062,6.63672 6.29101,-0.125 -2.12304,-2.24805 3.93164,-3.93359 a 6.0267854,6.0267854 0 0 0 1.92187,0.89843 l 0,3.68555 -3.27344,-0.0937 4.59375,4.79297 4.35938,-4.53711 -3.08984,-0.0879 0,-3.63672 a 6.0267854,6.0267854 0 0 0 2.23828,-0.875 l 3.77148,3.77148 -2.38086,2.24805 6.63672,0.14063 -0.12305,-6.29102 -2.25,2.12305 L 440.8457,367.5 a 6.0267854,6.0267854 0 0 0 0.85547,-2.25195 l 3.63086,0 -0.0937,3.27343 4.79297,-4.5957 -4.53711,-4.35937 -0.0879,3.09179 -3.84375,0 a 6.0267854,6.0267854 0 0 0 -0.85938,-1.81054 l 3.82032,-3.82032 2.24804,2.38282 0.14063,-6.63868 -6.29102,0.125 2.12305,2.25 -3.94141,3.93946 a 6.0267854,6.0267854 0 0 0 -2.19531,-0.76367 l 0,-2.70508 3.27344,0.0937 -4.59375,-4.79297 z"
+           style="display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#606f79;stroke-width:0.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+      </g>
+      <g
+         id="g7281">
+        <rect
+           y="623.60687"
+           x="305.5632"
+           height="59.76096"
+           width="141.95378"
+           id="rect6083-0"
+           style="opacity:1;fill:#e83d1c;fill-opacity:1;stroke:#c5282e;stroke-width:4.46587038;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.84313725" />
+        <path
+           id="rect6085-7-9-8-2"
+           d="m 318.07372,632.68112 0,16.86523 25.51367,0 0,-4.91992 23.60156,10.25977 -23.60156,10.06836 0,-5.21289 -25.51367,0 0,16.86328 25.51367,0 0,-3.84375 1.18164,-0.50391 62.38086,0 1.33398,0.58008 0,3.76758 25.51172,0 0,-16.86328 -25.51172,0 0,5.7832 -23.74219,-10.32031 23.74219,-10.13086 0,4.47265 25.51172,0 0,-16.86523 -25.51172,0 0,4.58594 -0.81445,0.34765 -63.38867,0 -0.69336,-0.30078 0,-4.63281 -25.51367,0 z m 36.06445,9.21875 43.48828,0 -21.94922,9.36328 -21.53906,-9.36328 z m 22.11328,16.92578 21.04102,9.14649 -42.47852,0 21.4375,-9.14649 z"
+           style="display:inline;opacity:1;fill:#ffffff;fill-opacity:1;stroke:#844043;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/src/assets/Network-Icons-SVG/cisco-switch-l3.svg b/src/assets/Network-Icons-SVG/cisco-switch-l3.svg
new file mode 100644
index 0000000..cc5f984
--- /dev/null
+++ b/src/assets/Network-Icons-SVG/cisco-switch-l3.svg
@@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   version="1.1"
+   id="svg6813"
+   viewBox="0 0 147.46868 140.32655"
+   height="39.603271mm"
+   width="41.618938mm">
+  <defs
+     id="defs6815" />
+  <metadata
+     id="metadata6818">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     transform="translate(-117.69423,-287.9132)"
+     id="layer1">
+    <g
+       transform="matrix(3.8195597,0,0,3.8195597,-1481.6868,-1084.6941)"
+       id="g6050"
+       style="display:inline">
+      <g
+         transform="matrix(1.1465715,0,0,1.1465715,-60.987233,-39.98251)"
+         id="g6265">
+        <rect
+           y="348.80347"
+           x="418.905"
+           height="31.025654"
+           width="32.656502"
+           id="rect5784-0"
+           style="opacity:1;fill:#396c85;fill-opacity:1;stroke:#314b58;stroke-width:1.01677299;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+        <path
+           id="path5466-3-6-7-2-7-0-9-6"
+           d="m 435.28711,350.91797 -4.35938,4.53711 3.0918,0.0879 0,2.97461 a 6.0267854,6.0267854 0 0 0 -1.54297,0.71094 l -4.07031,-4.06836 2.38281,-2.24805 -6.63867,-0.14063 0.125,6.29102 2.24805,-2.12305 4.13867,4.13867 a 6.0267854,6.0267854 0 0 0 -0.74805,1.76172 l -4.05468,0 0.0957,-3.27343 -4.79297,4.59375 4.53516,4.36132 0.0898,-3.09179 4.06055,0 a 6.0267854,6.0267854 0 0 0 0.6914,1.84765 l -3.9707,3.97071 -2.24805,-2.38086 -0.14062,6.63672 6.29101,-0.125 -2.12304,-2.24805 3.93164,-3.93359 a 6.0267854,6.0267854 0 0 0 1.92187,0.89843 l 0,3.68555 -3.27344,-0.0937 4.59375,4.79297 4.35938,-4.53711 -3.08984,-0.0879 0,-3.63672 a 6.0267854,6.0267854 0 0 0 2.23828,-0.875 l 3.77148,3.77148 -2.38086,2.24805 6.63672,0.14063 -0.12305,-6.29102 -2.25,2.12305 L 440.8457,367.5 a 6.0267854,6.0267854 0 0 0 0.85547,-2.25195 l 3.63086,0 -0.0937,3.27343 4.79297,-4.5957 -4.53711,-4.35937 -0.0879,3.09179 -3.84375,0 a 6.0267854,6.0267854 0 0 0 -0.85938,-1.81054 l 3.82032,-3.82032 2.24804,2.38282 0.14063,-6.63868 -6.29102,0.125 2.12305,2.25 -3.94141,3.93946 a 6.0267854,6.0267854 0 0 0 -2.19531,-0.76367 l 0,-2.70508 3.27344,0.0937 -4.59375,-4.79297 z"
+           style="display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#606f79;stroke-width:0.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/src/assets/Network-Icons-SVG/cisco-switch-vss.svg b/src/assets/Network-Icons-SVG/cisco-switch-vss.svg
new file mode 100644
index 0000000..c9f29a9
--- /dev/null
+++ b/src/assets/Network-Icons-SVG/cisco-switch-vss.svg
@@ -0,0 +1,83 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   version="1.1"
+   id="svg8031"
+   viewBox="0 0 147.56303 204.26426"
+   height="57.647915mm"
+   width="41.645565mm">
+  <defs
+     id="defs8033" />
+  <metadata
+     id="metadata8036">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     transform="translate(-306.21848,-398.8015)"
+     id="layer1">
+    <g
+       transform="translate(-179.04191,5.5403099)"
+       id="g7520">
+      <g
+         id="g7512">
+        <rect
+           y="459.42532"
+           x="487.57816"
+           height="135.8737"
+           width="143.01582"
+           id="rect5784-0-2"
+           style="opacity:1;fill:#396c85;fill-opacity:1;stroke:#314b58;stroke-width:4.45285368;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+        <g
+           id="g7506">
+          <path
+             style="display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#606f79;stroke-width:0.87532747;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+             d="m 540.34211,524.56253 c -0.32107,-1.13312 -0.8296,-2.20446 -1.50448,-3.16964 l 6.68807,-6.68805 3.93554,4.17149 0.24619,-11.62205 -11.01339,0.21885 3.71672,3.93897 -6.90005,6.89664 c -1.1822,-0.6908 -2.48754,-1.14487 -3.84323,-1.33693 l 0,-4.73565 5.73066,0.16403 -8.04207,-8.39084 -6e-5,8e-5 -7.63178,7.94293 5.41268,0.15387 0,5.20752 c -0.95466,0.28525 -1.86409,0.70428 -2.70122,1.24461 l -7.12569,-7.1223 4.17148,-3.93556 -11.62203,-0.24618 0.21884,11.0134 3.93556,-3.71674 7.24537,7.24539 c -0.59803,0.95173 -1.04012,1.99292 -1.30957,3.08416 l -7.09836,0 0.16755,-5.73063 -8.39084,8.04206 7.93951,7.63517 0.1572,-5.41265 7.10863,0 c 0.22307,1.13736 0.63202,2.23019 1.2104,3.23459 l -6.95132,6.95133 -3.93558,-4.16805 -0.24616,11.6186 11.01338,-0.21883 -3.71671,-3.93555 6.88295,-6.88637 c 1.01968,0.7191 2.15884,1.25164 3.36453,1.57284 l 0,6.45213 -5.73066,-0.16405 8.04207,8.39084 7.63176,-7.9429 -5.40924,-0.15389 0,-6.36665 c 1.39575,-0.24236 2.72839,-0.76333 3.91845,-1.5318 l 6.60258,6.60256 -4.16807,3.93554 11.6186,0.2462 -0.21541,-11.0134 -3.93898,3.71672 -6.71876,-6.71549 c 0.75944,-1.19995 1.26882,-2.54086 1.49764,-3.94238"
+             id="path5466-3-6-7-2-7-0-9-6-7-2" />
+          <path
+             style="display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#606f79;stroke-width:0.87532747;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+             d="m 540.50615,529.2229 36.92157,0.19158 c 0.22306,1.13736 0.63202,2.23019 1.21041,3.23459 l -6.95133,6.95133 -3.93557,-4.16805 -0.24618,11.6186 11.01339,-0.21883 -3.7167,-3.93555 6.88294,-6.88637 c 1.01969,0.7191 2.15885,1.25164 3.36452,1.57284 l 0,6.45213 -5.73066,-0.16405 8.04207,8.39084 7.63178,-7.9429 -5.40924,-0.15389 0,-6.36665 c 1.39573,-0.24236 2.72838,-0.76333 3.91844,-1.5318 l 6.60258,6.60256 -4.16807,3.93554 11.6186,0.2462 -0.21541,-11.0134 -3.93897,3.71672 -6.71877,-6.71549 c 0.75944,-1.19995 1.26882,-2.54086 1.49764,-3.94238 l 6.35638,0 -0.16403,5.73064 8.39084,-8.04548 -7.94292,-7.63177 -0.15388,5.41267 -6.72908,0 c -0.32108,-1.13312 -0.8296,-2.20446 -1.50448,-3.16964 l 6.68807,-6.68805 3.93553,4.17149 0.24619,-11.62205 -11.0134,0.21885 3.71673,3.93897 -6.90005,6.89664 c -1.18219,-0.6908 -2.48754,-1.14487 -3.84322,-1.33693 l 0,-4.73565 5.73065,0.16403 -8.04206,-8.39084 -6e-5,8e-5 -7.63178,7.94293 5.41267,0.15387 0,5.20752 c -0.95466,0.28525 -1.86409,0.70428 -2.70121,1.24461 l -7.1257,-7.1223 4.17148,-3.93556 -11.62203,-0.24618 0.21885,11.0134 3.93554,-3.71674 7.24539,7.24539 c -0.59803,0.95173 -1.04013,1.99292 -1.30958,3.08416 l -37.19687,-0.12081"
+             id="path5466-3-6-7-2-7-0-9-6-7-2-2" />
+          <path
+             style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:#606f79;stroke-width:0.18944347;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.96078431"
+             d="m 558.51732,543.71683 c -1.09964,-1.37716 -1.98976,-4.3033 -2.64706,-8.70175 -0.47048,-3.14831 -0.47048,-12.74399 0,-15.8923 0.6573,-4.39844 1.54742,-7.32459 2.64706,-8.70174 1.03458,-1.29568 1.95332,-0.82845 2.97767,1.5143 1.46911,3.35998 2.16131,8.20677 2.16131,15.13359 0,6.92682 -0.6922,11.77362 -2.16131,15.13359 -1.02435,2.34275 -1.94309,2.80998 -2.97767,1.51431 z m 2.24065,-2.41603 c 2.99004,-3.43175 3.00208,-25.27566 0.0158,-28.75734 -0.79344,-0.92508 -1.38739,-0.8975 -2.25441,0.1047 -1.72734,1.99666 -3.08218,9.52792 -2.80864,15.6127 0.42439,9.44057 2.81098,15.60655 5.04722,13.03994 z"
+             id="path7451" />
+          <rect
+             style="opacity:1;fill:none;fill-opacity:1;stroke:#ffffff;stroke-width:1.60000002;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:6.4000001, 1.60000002;stroke-dashoffset:0;stroke-opacity:1"
+             id="rect7477"
+             width="119.14749"
+             height="92.630989"
+             x="499.21738"
+             y="479.95926"
+             ry="13.081475" />
+        </g>
+      </g>
+      <g
+         transform="matrix(1.0078089,0,0,0.99971949,366.11848,-428.18566)"
+         id="g7293-6">
+        <rect
+           y="823.91028"
+           x="120.45169"
+           height="59.76096"
+           width="141.95378"
+           id="rect6083-0-8-1"
+           style="opacity:1;fill:#e83d1c;fill-opacity:1;stroke:#c5282e;stroke-width:4.46587038;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.84313725" />
+        <path
+           id="rect6085-7-9-8-2-7-5"
+           d="m 132.96222,832.98451 0,16.86523 25.51367,0 0,-4.91992 23.60156,10.25977 -23.60156,10.06836 0,-5.21289 -25.51367,0 0,16.86328 25.51367,0 0,-3.84375 1.18164,-0.50391 62.38086,0 1.33398,0.58008 0,3.76758 25.51172,0 0,-16.86328 -25.51172,0 0,5.7832 -23.74219,-10.32031 23.74219,-10.13086 0,4.47265 25.51172,0 0,-16.86523 -25.51172,0 0,4.58594 -0.81445,0.34765 -63.38867,0 -0.69336,-0.30078 0,-4.63281 -25.51367,0 z m 36.06445,9.21875 43.48828,0 -21.94922,9.36328 -21.53906,-9.36328 z m 22.11328,16.92578 21.04102,9.14649 -42.47852,0 21.4375,-9.14649 z"
+           style="display:inline;opacity:1;fill:#ffffff;fill-opacity:1;stroke:#844043;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/src/assets/Network-Icons-SVG/cloud-v1.svg b/src/assets/Network-Icons-SVG/cloud-v1.svg
new file mode 100644
index 0000000..7b89ce8
--- /dev/null
+++ b/src/assets/Network-Icons-SVG/cloud-v1.svg
@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   version="1.1"
+   id="svg4367"
+   viewBox="0 0 204.31426 120.75318"
+   height="34.079231mm"
+   width="57.662025mm">
+  <defs
+     id="defs4369" />
+  <metadata
+     id="metadata4372">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     transform="translate(-214.98573,-183.41419)"
+     id="layer1">
+    <g
+       transform="matrix(0.86352245,0,0,0.86352245,-190.39364,-408.4426)"
+       id="g8402">
+      <path
+         style="display:inline;opacity:1;fill:#ffffff;fill-opacity:1;stroke:#b0b0b1;stroke-width:6.44321299;stroke-linecap:round;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         d="m 573.51527,688.61987 a 74.01992,66.697717 0 0 0 -73.05874,56.51654 32.498662,30.057924 0 0 0 -27.78637,29.70547 32.498662,30.057924 0 0 0 32.49923,30.0578 32.498662,30.057924 0 0 0 14.97544,-3.3914 74.01992,66.697717 0 0 0 53.37044,20.5063 74.01992,66.697717 0 0 0 50.11109,-17.7 42.624461,45.471982 0 0 0 17.0078,3.8005 42.624461,45.471982 0 0 0 24.1998,-8.0981 30.470047,25.588576 0 0 0 7.52549,0.8243 30.470047,25.588576 0 0 0 30.47312,-25.59039 30.470047,25.588576 0 0 0 -21.03482,-24.31307 42.624461,45.471982 0 0 0 -41.16359,-33.77023 42.624461,45.471982 0 0 0 -6.10972,0.51598 74.01992,66.697717 0 0 0 -61.00917,-29.0637 z"
+         id="path6269" />
+      <path
+         style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:3.18078947;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+         d="m 561.96976,817.14207 c -11.4574,-1.4376 -25.37914,-7.30672 -34.34845,-14.48059 -6.05961,-4.84663 -6.32523,-4.90246 -13.9836,-2.93968 -18.98899,4.86673 -36.56354,-6.85969 -36.56354,-24.3966 0,-11.96224 4.89303,-18.62229 18.4202,-25.07229 6.97273,-3.32473 8.12025,-4.62355 10.61835,-12.0184 9.38325,-27.77617 35.18642,-44.98739 67.4454,-44.98739 21.23462,0 35.73245,5.50591 50.82947,19.30374 8.33727,7.61979 9.83738,8.36467 17.80969,8.8434 15.02973,0.90251 27.37844,9.89079 33.91226,24.68375 2.38726,5.40493 4.86257,8.23915 8.84711,10.12994 13.54778,6.42885 17.76979,20.72045 9.14813,30.96669 -5.56656,6.61549 -12.57843,9.44814 -23.38763,9.44814 -4.78742,0 -9.14091,0.70628 -9.6744,1.5695 -0.5335,0.86323 -5.0343,2.75102 -10.00176,4.1951 -7.76785,2.25818 -10.42356,2.34896 -18.97738,0.64873 -9.91613,-1.97101 -9.96806,-1.96202 -17.50477,3.03009 -13.59407,9.00434 -34.31615,13.36865 -52.58908,11.07587 z"
+         id="path8400" />
+    </g>
+  </g>
+</svg>
diff --git a/src/assets/Network-Icons-SVG/cloud-v2.svg b/src/assets/Network-Icons-SVG/cloud-v2.svg
new file mode 100644
index 0000000..b004c42
--- /dev/null
+++ b/src/assets/Network-Icons-SVG/cloud-v2.svg
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   version="1.1"
+   id="svg4367"
+   viewBox="0 0 198.45323 142.30469"
+   height="40.161549mm"
+   width="56.007912mm">
+  <defs
+     id="defs4369" />
+  <metadata
+     id="metadata4372">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     transform="translate(2.984375,-3.1992184)"
+     id="g833">
+    <path
+       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:5.87959719;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:2;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+       d="M 96.115873,6.1383778 C 67.04368,6.1386378 42.859826,25.402508 41.041419,50.228338 c -22.57151,0.2689 -41.08562249,17.19958 -41.08520249,38.34412 7.28e-4,21.313322 18.79784549,38.391562 41.61437649,38.391722 h 0.01282 0.01282 c 1.193604,-0.01 2.379096,-0.14116 3.566894,-0.24537 5.979661,9.46057 16.363344,15.31689 27.643431,15.33143 h 0.0037 0.0018 c 8.671185,-0.004 16.819685,-3.59129 22.928465,-9.62586 6.148587,6.34487 14.508777,10.13929 23.433817,10.14038 11.38276,-0.002 21.85323,-5.95327 27.81372,-15.54383 1.2983,0.12298 2.59448,0.27384 3.90015,0.28382 h 0.011 0.011 c 22.81653,-1.6e-4 41.61733,-17.07839 41.61805,-38.391722 1.7e-4,-21.2174 -18.63701,-38.2138 -41.31427,-38.36792 -1.629,-24.89951 -25.74953,-44.2728502 -54.821627,-44.3957402 l -0.10071,-0.011 z"
+       id="path947-3" />
+    <path
+       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#2c2c2c;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:5.87959719;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:2;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+       d="M 96.115234,3.1992188 C 66.693539,3.1994839 41.737088,22.181724 38.429688,47.558594 15.594742,49.077727 -2.9848126,66.549428 -2.984375,88.572266 -2.9835884,111.61403 17.286827,129.90413 41.570312,129.9043 h 0.01367 0.02344 0.01367 c 0.777578,-0.007 1.422564,-0.0841 2.121094,-0.14258 6.631016,9.40311 17.381132,15.21346 29.060546,15.22851 h 0.002 0.0059 0.002 c 8.552267,-0.004 16.529767,-3.32323 22.890625,-8.75195 6.439523,5.74065 14.644393,9.26455 23.470703,9.26563 11.7839,-0.002 22.61984,-5.9042 29.24219,-15.43555 0.80227,0.073 1.55469,0.16894 2.44921,0.17578 h 0.0117 0.0215 0.0117 c 24.28348,-1.7e-4 44.55782,-18.28797 44.55859,-41.330078 3.2e-4,-22.091637 -18.68964,-39.624807 -41.625,-41.048828 C 150.71103,22.423159 125.81665,3.3333166 96.404297,3.2089844 l 0.306641,0.017578 -0.259766,-0.027344 z m 0,5.8789062 h 0.01563 l 0.0957,0.00977 0.152344,0.00195 C 124.15189,9.207246 146.76905,27.6241 148.28125,50.736328 l -4.79696,4.237951 7.70907,-1.489902 c 21.21941,0.144206 38.39482,15.933832 38.39453,35.429687 -0.002,19.583646 -17.32888,35.451016 -38.67773,35.451166 h -0.0117 c -1.09136,-0.009 -2.29697,-0.14494 -3.63282,-0.27148 l -5.73195,-1.98085 2.95656,3.35585 c -5.43355,8.74271 -14.95799,14.15443 -25.3164,14.15625 -8.09205,-9.9e-4 -15.69284,-3.43695 -21.322268,-9.24609 l -1.915658,-3.33684 -2.262076,3.29191 c -5.593326,5.52538 -13.002041,8.77372 -20.863281,8.77735 h -0.0039 c -10.263407,-0.0146 -19.70774,-5.33954 -25.158229,-13.96289 l 2.96242,-3.32265 -5.704608,1.96523 c -1.227778,0.10771 -2.330381,0.22531 -3.322266,0.23437 -0.0035,3e-5 -0.0082,-3e-5 -0.01172,0 h -0.002 C 20.220734,124.02524 2.897153,108.15716 2.8964844,88.572266 2.8960984,69.143811 19.955279,53.419583 41.076172,53.167969 l 6.920168,1.325484 -4.023684,-4.050094 C 45.660435,27.400945 68.341672,9.0783753 96.115234,9.078125 Z"
+       id="path947" />
+  </g>
+</svg>
diff --git a/src/assets/Network-Icons-SVG/cumulus-router-v2.svg b/src/assets/Network-Icons-SVG/cumulus-router-v2.svg
new file mode 100644
index 0000000..9b6f33c
--- /dev/null
+++ b/src/assets/Network-Icons-SVG/cumulus-router-v2.svg
@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   width="49.483669mm"
+   height="49.483669mm"
+   viewBox="0 0 175.33583 175.33583"
+   id="svg9976"
+   version="1.1">
+  <defs
+     id="defs9978" />
+  <metadata
+     id="metadata9981">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <circle
+     r="86.282326"
+     cy="87.667915"
+     cx="87.667915"
+     id="path3338-7"
+     style="fill:#00ad69;fill-opacity:1;fill-rule:evenodd;stroke:#149965;stroke-width:2.77117658;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+  <g
+     transform="matrix(0.96622991,0,0,0.96622991,-177.4313,-263.75284)"
+     id="g4662-2-3">
+    <path
+       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#149965;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+       d="m 224.07227,308.66406 a 4.0004,4.0004 0 0 0 -3.71485,5.06836 l 8.73438,31.44531 a 4.0004,4.0004 0 0 0 0.0605,0.18165 4.0004,4.0004 0 0 0 0.0488,0.14453 4.0004,4.0004 0 0 0 0.0801,0.1914 4.0004,4.0004 0 0 0 0.084,0.18555 4.0004,4.0004 0 0 0 0.0859,0.16016 4.0004,4.0004 0 0 0 0.10938,0.1914 4.0004,4.0004 0 0 0 0.10351,0.15039 4.0004,4.0004 0 0 0 0.1211,0.16992 4.0004,4.0004 0 0 0 0.13281,0.15821 4.0004,4.0004 0 0 0 0.12695,0.14453 4.0004,4.0004 0 0 0 0.15625,0.1543 4.0004,4.0004 0 0 0 0.13281,0.12109 4.0004,4.0004 0 0 0 0.15625,0.12695 4.0004,4.0004 0 0 0 0.16211,0.12305 4.0004,4.0004 0 0 0 0.17774,0.11328 4.0004,4.0004 0 0 0 0.15234,0.0937 4.0004,4.0004 0 0 0 0.21289,0.10938 4.0004,4.0004 0 0 0 0.14453,0.0684 4.0004,4.0004 0 0 0 0.21289,0.084 4.0004,4.0004 0 0 0 0.16407,0.0606 4.0004,4.0004 0 0 0 0.24414,0.0684 4.0004,4.0004 0 0 0 0.12695,0.0332 4.0004,4.0004 0 0 0 0.22461,0.0391 4.0004,4.0004 0 0 0 0.19922,0.0293 4.0004,4.0004 0 0 0 0.15234,0.0117 4.0004,4.0004 0 0 0 0.28321,0.0137 4.0004,4.0004 0 0 0 2.57617,-0.93945 4.0004,4.0004 0 0 0 0.29297,-0.27344 4.0004,4.0004 0 0 0 0.0488,-0.0508 l 3.77344,-4.02539 17.63281,17.02343 -19.01953,6.23243 a 4.0004,4.0004 0 0 0 -1.40039,6.80078 l 4.20117,3.70703 -20.95312,20.57226 a 4.0004,4.0004 0 0 0 2.80273,6.85547 4.0004,4.0004 0 0 0 3.20899,-1.54492 l 23.61328,-23.18555 a 4.0004,4.0004 0 0 0 -0.15625,-5.85351 l -2.18359,-1.92578 18.6875,-6.1211 a 4.0004,4.0004 0 0 0 1.5332,-6.67968 L 242.2753,334.24036 a 4.0004,4.0004 0 0 0 -5.69531,0.14258 l -1.6836,1.79688 -4.94921,-17.81446 17.38281,4.7168 -1.58594,1.69922 a 4.0004,4.0004 0 0 0 0.15625,5.61719 l 20.96289,20.08984 a 4.0004,4.0004 0 1 0 5.53516,-5.77539 l -18.11133,-17.35937 3.41992,-3.66407 a 4.0004,4.0004 0 0 0 -1.87695,-6.58984 l -30.57031,-8.29688 a 4.0004,4.0004 0 0 0 -1.1875,-0.13867 z"
+       id="path4226-8-2-6" />
+    <path
+       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#149965;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+       d="m 312.22266,311.83398 -22.74414,22.74219 -3.29883,-3.76953 c -2.0761,-2.37117 -5.95134,-1.52204 -6.84571,1.5 l -16.43359,55.56641 -0.92187,-0.92188 c -1.55242,-1.55298 -4.06646,-1.56431 -5.63282,-0.0254 l -25.33008,24.89258 c -3.80403,3.73829 1.80275,9.44466 5.60743,5.70703 l 22.50195,-22.11523 2.875,2.875 c 2.14565,2.14432 5.80396,1.21366 6.66406,-1.69532 l 16.28125,-55.04492 1.32813,1.51758 c 1.52361,1.74215 4.20323,1.83177 5.83984,0.19531 l 24.59375,-24.5957 c 2.6028,-7.0172 -4.48437,-6.82812 -4.48437,-6.82812 z"
+       id="path4228-56-5-7" />
+    <path
+       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#149965;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+       d="m 325.74414,325.9082 a 4.0004,4.0004 0 0 0 -2.76172,1.1836 l -23.58203,23.14648 a 4.0004,4.0004 0 0 0 0.40234,6.05469 l 1.00977,0.75781 -15.22656,5.37305 a 4.0004,4.0004 0 0 0 -1.47071,6.62695 l 22.71094,22.27344 a 4.0004,4.0004 0 0 0 5.4336,0.1543 l 2.20117,-1.92579 5.13086,18.46875 L 301.75977,403 l 2.05078,-2.1875 a 4.0004,4.0004 0 0 0 -0.15039,-5.62305 l -20.55274,-19.69726 a 4.0004,4.0004 0 0 0 -3.17773,-1.50586 4.0004,4.0004 0 0 0 -2.76758,6.88867 l 18.10547,17.35156 -3.84375,4.10156 a 4.0004,4.0004 0 0 0 1.83203,6.58594 l 31.00781,8.73438 a 4.0004,4.0004 0 0 0 4.93945,-4.91992 l -8.73437,-31.44532 a 4.0004,4.0004 0 0 0 -6.48828,-1.93945 l -4.19922,3.67383 -15.48437,-15.18555 16.2246,-5.72461 a 4.0004,4.0004 0 0 0 1.06836,-6.97265 l -3.26367,-2.44727 20.26172,-19.88477 a 4.0004,4.0004 0 0 0 -2.84375,-6.89453 z"
+       id="path4230-2-7-5" />
+  </g>
+</svg>
diff --git a/src/assets/Network-Icons-SVG/cumulus-router-v3.svg b/src/assets/Network-Icons-SVG/cumulus-router-v3.svg
new file mode 100644
index 0000000..6839245
--- /dev/null
+++ b/src/assets/Network-Icons-SVG/cumulus-router-v3.svg
@@ -0,0 +1,62 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   width="48.730789mm"
+   height="48.730789mm"
+   viewBox="0 0 172.66815 172.66815"
+   id="svg9976"
+   version="1.1">
+  <defs
+     id="defs9978">
+    <filter
+       style="color-interpolation-filters:sRGB"
+       id="filter4183">
+      <feBlend
+         mode="lighten"
+         in2="BackgroundImage"
+         id="feBlend4185" />
+    </filter>
+    <filter
+       style="color-interpolation-filters:sRGB"
+       id="filter3710">
+      <feBlend
+         mode="lighten"
+         in2="BackgroundImage"
+         id="feBlend3708" />
+    </filter>
+  </defs>
+  <metadata
+     id="metadata9981">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <circle
+     r="84.969566"
+     cy="86.334076"
+     cx="86.334076"
+     id="path3338-7"
+     style="fill:#00ad69;fill-opacity:1;fill-rule:evenodd;stroke:#149965;stroke-width:2.72901416;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+  <g
+     id="g853"
+     transform="matrix(1.374736,0,0,1.374736,-476.83104,1.2854058)">
+    <path
+       style="opacity:1;fill:#f0faf6;fill-opacity:1;stroke:#139a65;stroke-width:0.9375;stroke-opacity:1"
+       d="m 374.56807,42.41031 c 1.53749,-1.49427 2.83189,-3.04338 4.63315,-4.4088 1.27987,-0.97019 3.02078,-1.84764 4.36586,-2.54678 4.26668,-2.21771 8.78035,-3.00725 13.18472,-2.90662 3.50142,0.08 7.20739,1.00413 10.04696,2.12718 3.65543,1.44573 6.0929,3.22108 7.10483,3.94958 1.07362,0.81759 3.01599,2.51896 4.44626,4.18633 1.32716,1.54717 2.39484,3.22378 3.00134,3.99169 0.44313,0.56106 1.37044,2.20241 2.12434,4.04447 0.46098,1.12633 0.82043,2.42859 1.07202,3.30975 0.31968,1.11965 0.54815,3.06672 0.59103,4.28806 0.0326,0.92933 -0.0673,4.08468 -0.13887,4.66747 -0.0645,0.52471 -0.0294,1.27777 -0.15931,2.04041 -0.0835,0.49013 -0.22804,1.03167 -0.39866,1.53126 -0.17348,0.50794 -0.3821,1.11126 -0.59338,1.55133 -0.5053,1.05251 -1.02573,1.72429 -1.11656,1.91768 -0.5013,-3.31294 -0.61243,-6.33366 -1.22289,-9.05418 -0.36326,-1.61884 -0.89411,-3.13139 -1.4201,-4.53596 -0.86289,-2.30421 -1.83879,-4.31784 -2.97375,-6.03346 -1.59873,-2.41667 -3.85755,-4.28478 -5.773,-5.93448 -2.30028,-1.98115 -4.888,-3.17286 -7.67095,-3.98559 -2.72426,-0.79558 -5.6356,-1.23313 -8.64751,-1.22086 -2.53493,0.0103 -5.05115,0.57002 -7.44659,1.53997 -1.36352,0.7782 -2.97103,1.61867 -4.36724,2.77401 -1.86936,1.54685 -3.41901,3.42179 -4.06316,4.20315 -0.73543,0.89209 -1.97569,2.53311 -2.7967,4.13623 -0.70513,1.37686 -1.02928,2.72577 -1.28014,3.54826 -0.81285,2.66499 -0.81637,8.36304 -0.6803,9.26724 0.32268,2.14412 1.13704,4.97393 2.38828,7.45609 1.7882,3.54733 4.19035,6.07524 5.39189,7.00329 1.20639,0.9318 2.80515,2.31055 4.76776,3.06648 2.74705,1.05806 5.75781,1.25035 7.40204,1.1814 1.75309,2.65706 3.7453,4.83586 5.89564,6.69842 -3.38358,1.41078 -6.16598,0.81764 -9.007,0.41993 -8.46249,-2.31358 -14.38403,-5.52917 -19.033,-13.38909 -2.09264,-3.71059 -4.73504,-9.2745 -4.8037,-15.08277 -0.0927,-7.84141 3.25232,-16.0318 7.17669,-19.80109 z"
+       id="rect833" />
+    <path
+       style="opacity:1;fill:#f0faf6;fill-opacity:1;stroke:#139a65;stroke-width:0.93749994;stroke-opacity:1"
+       d="m 444.74345,81.31528 c -1.53713,1.49466 -2.83114,3.04409 -4.63205,4.40996 -1.27964,0.9705 -3.02033,1.84838 -4.36523,2.54785 -4.26614,2.21877 -8.77961,3.00943 -13.184,2.90989 -3.50144,-0.0791 -7.20763,-1.00235 -10.04749,-2.1247 -3.65579,-1.44482 -6.09369,-3.21957 -7.10581,-3.94782 -1.07383,-0.81732 -3.01662,-2.51821 -4.4473,-4.18523 -1.32754,-1.54684 -2.39564,-3.22318 -3.00232,-3.99094 -0.44327,-0.56095 -1.37098,-2.20208 -2.12534,-4.04394 -0.46126,-1.12622 -0.82103,-2.42839 -1.07284,-3.30949 -0.31996,-1.11957 -0.5489,-3.06659 -0.59209,-4.28792 -0.0328,-0.92932 0.0662,-4.08469 0.1376,-4.6675 0.0644,-0.52472 0.0291,-1.27778 0.15877,-2.04045 0.0833,-0.49016 0.22779,-1.03172 0.39829,-1.53136 0.17335,-0.50798 0.38181,-1.11136 0.59299,-1.55148 0.50504,-1.05264 1.0253,-1.72454 1.11608,-1.91796 0.50212,3.31282 0.614,6.33351 1.22514,9.05388 0.36366,1.61875 0.89488,3.13117 1.42122,4.53561 0.86345,2.304 1.83985,4.31738 2.97524,6.03273 1.59933,2.41626 3.85862,4.28382 5.77446,5.93305 2.30078,1.98057 4.8888,3.17165 7.67194,3.98368 2.72447,0.79491 5.63592,1.23174 8.64782,1.21872 2.53492,-0.011 5.05101,-0.57126 7.44621,-1.54181 1.36331,-0.77854 2.97063,-1.6194 4.36655,-2.77509 1.86897,-1.54732 3.41816,-3.42263 4.06212,-4.20415 0.73521,-0.89227 1.97507,-2.5336 2.79567,-4.13693 0.70479,-1.37703 1.02861,-2.72602 1.27927,-3.54857 0.81218,-2.6652 0.8143,-8.36324 0.678,-9.26741 -0.3232,-2.14404 -1.13827,-4.97365 -2.39012,-7.45549 -1.78908,-3.5469 -4.19185,-6.07421 -5.39363,-7.00197 -1.20662,-0.9315 -2.80572,-2.30985 -4.76851,-3.06529 -2.74731,-1.05738 -5.75812,-1.24893 -7.40234,-1.17957 -1.75374,-2.65663 -3.7465,-4.83493 -5.8973,-6.69697 3.38323,-1.41161 6.16579,-0.81916 9.0069,-0.42215 8.46307,2.31148 14.3854,5.5256 19.03632,13.38438 2.09355,3.71007 4.73733,9.27333 4.80743,15.08158 0.0946,7.84139 -3.24835,16.0326 -7.1718,19.80286 z"
+       id="rect833-3" />
+  </g>
+</svg>
diff --git a/src/assets/Network-Icons-SVG/cumulus-switch-v2.svg b/src/assets/Network-Icons-SVG/cumulus-switch-v2.svg
new file mode 100644
index 0000000..fb5fe39
--- /dev/null
+++ b/src/assets/Network-Icons-SVG/cumulus-switch-v2.svg
@@ -0,0 +1,53 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   version="1.1"
+   id="svg9976"
+   viewBox="0 0 174.679 175.57633"
+   height="49.551544mm"
+   width="49.298298mm">
+  <defs
+     id="defs9978" />
+  <metadata
+     id="metadata9981">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     id="g951">
+    <rect
+       style="fill:#00ad69;fill-opacity:1;stroke:#616161;stroke-width:4.92867565;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="rect4349-8-9"
+       width="169.75032"
+       height="170.64766"
+       x="2.4643335"
+       y="2.4643373" />
+    <g
+       id="g887"
+       transform="translate(2.2378468e-6,-2.8634556e-5)">
+      <path
+         style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#616161;stroke-width:1.19049227;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+         d="m 27.465947,22.263606 a 4.7625255,4.7625255 0 0 0 -4.42257,6.033945 L 33.44176,65.73358 a 4.7625255,4.7625255 0 0 0 0.07202,0.216257 4.7625255,4.7625255 0 0 0 0.05809,0.172065 4.7625255,4.7625255 0 0 0 0.09536,0.227864 4.7625255,4.7625255 0 0 0 0.1,0.2209 4.7625255,4.7625255 0 0 0 0.102267,0.190672 4.7625255,4.7625255 0 0 0 0.130216,0.227863 4.7625255,4.7625255 0 0 0 0.123229,0.179042 4.7625255,4.7625255 0 0 0 0.144173,0.202292 4.7625255,4.7625255 0 0 0 0.158112,0.188351 4.7625255,4.7625255 0 0 0 0.151134,0.172065 4.7625255,4.7625255 0 0 0 0.186017,0.183695 4.7625255,4.7625255 0 0 0 0.158112,0.14416 4.7625255,4.7625255 0 0 0 0.186017,0.151136 4.7625255,4.7625255 0 0 0 0.192995,0.146492 4.7625255,4.7625255 0 0 0 0.211602,0.134861 4.7625255,4.7625255 0 0 0 0.181367,0.111551 4.7625255,4.7625255 0 0 0 0.253445,0.130218 4.7625255,4.7625255 0 0 0 0.17206,0.08143 4.7625255,4.7625255 0 0 0 0.253455,0.100004 4.7625255,4.7625255 0 0 0 0.195324,0.07214 4.7625255,4.7625255 0 0 0 0.290649,0.08143 4.7625255,4.7625255 0 0 0 0.151142,0.03952 4.7625255,4.7625255 0 0 0 0.267393,0.04655 4.7625255,4.7625255 0 0 0 0.237177,0.03488 4.7625255,4.7625255 0 0 0 0.181368,0.01393 4.7625255,4.7625255 0 0 0 0.337159,0.01631 4.7625255,4.7625255 0 0 0 3.066963,-1.118427 4.7625255,4.7625255 0 0 0 0.348787,-0.325533 4.7625255,4.7625255 0 0 0 0.05809,-0.06048 l 4.492328,-4.792276 20.992082,20.266603 -22.642988,7.419785 a 4.7625255,4.7625255 0 0 0 -1.667182,8.096413 l 5.001547,4.413267 -24.944947,24.49153 a 4.7625255,4.7625255 0 0 0 3.336685,8.16152 4.7625255,4.7625255 0 0 0 3.820338,-1.83924 l 28.1119,-27.60268 A 4.7625255,4.7625255 0 0 0 57.81923,99.361053 l -2.599587,-2.292665 22.247698,-7.287245 a 4.7625255,4.7625255 0 0 0 1.825294,-7.952241 L 49.136863,52.712503 a 4.7625255,4.7625255 0 0 0 -6.78034,0.169743 l -2.004341,2.139208 -5.892099,-21.208335 20.694446,5.615409 -1.888074,2.022943 a 4.7625255,4.7625255 0 0 0 0.186017,6.687333 l 24.956575,23.917203 a 4.7625255,4.7625255 0 1 0 6.589682,-6.875673 L 63.43696,44.513789 67.508423,40.151669 A 4.7625255,4.7625255 0 0 0 65.273891,32.306383 L 28.879577,22.428849 A 4.7625255,4.7625255 0 0 0 27.46584,22.263761 Z"
+         id="path4226-8-2-6-6" />
+      <path
+         style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#616161;stroke-width:1.19049227;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+         d="M 132.41008,26.037435 105.3329,53.112292 101.4056,48.62462 c -2.471624,-2.822907 -7.085146,-1.812007 -8.149908,1.785769 l -19.564388,66.152501 -1.097495,-1.09752 c -1.848175,-1.84883 -4.841177,-1.86232 -6.705942,-0.0302 l -30.155775,29.63492 c -4.528746,4.45048 2.146195,11.24399 6.675717,6.79429 l 26.788847,-26.32845 3.422719,3.42272 c 2.554424,2.55284 6.909691,1.44488 7.933653,-2.0183 l 19.38303,-65.531655 1.581152,1.806699 c 1.81388,2.074051 5.004,2.180744 6.9524,0.232518 l 29.27916,-29.281484 c 3.09867,-8.354063 -5.33869,-8.128961 -5.33869,-8.128961 z"
+         id="path4228-56-5-7-7" />
+      <path
+         style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#616161;stroke-width:1.19049227;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+         d="m 148.50756,42.792967 a 4.7625255,4.7625255 0 0 0 -3.28786,1.40909 L 117.145,71.758228 a 4.7625255,4.7625255 0 0 0 0.479,7.208183 l 1.20214,0.902182 -18.12741,6.396682 a 4.7625255,4.7625255 0 0 0 -1.750895,7.889466 l 27.037655,26.516799 a 4.7625255,4.7625255 0 0 0 6.46877,0.1837 l 2.62052,-2.29268 6.10835,21.98728 -21.22925,-5.97814 2.44147,-2.60424 a 4.7625255,4.7625255 0 0 0 -0.17904,-6.69431 L 97.748019,101.82332 a 4.7625255,4.7625255 0 0 0 -3.783125,-1.79275 4.7625255,4.7625255 0 0 0 -3.294832,8.20105 l 21.554778,20.65725 -4.57603,4.88296 a 4.7625255,4.7625255 0 0 0 2.18106,7.84064 l 36.91518,10.39839 a 4.7625255,4.7625255 0 0 0 5.88047,-5.85723 l -10.39837,-37.43604 a 4.7625255,4.7625255 0 0 0 -7.72438,-2.30894 l -4.99922,4.37374 -18.43434,-18.078586 19.31559,-6.815219 a 4.7625255,4.7625255 0 0 0 1.2719,-8.301026 l -3.88544,-2.913505 24.12182,-23.673064 a 4.7625255,4.7625255 0 0 0 -3.38552,-8.208023 z"
+         id="path4230-2-7-5-5" />
+    </g>
+  </g>
+</svg>
diff --git a/src/assets/Network-Icons-SVG/f5-gtm.svg b/src/assets/Network-Icons-SVG/f5-gtm.svg
new file mode 100644
index 0000000..e907799
--- /dev/null
+++ b/src/assets/Network-Icons-SVG/f5-gtm.svg
@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   version="1.1"
+   id="svg4787"
+   viewBox="0 0 134.45085 132.89714"
+   height="37.506527mm"
+   width="37.945019mm">
+  <defs
+     id="defs4789" />
+  <metadata
+     id="metadata4792">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     transform="translate(-209.57079,-310.09781)"
+     id="layer1">
+    <rect
+       ry="23.230007"
+       y="311.09781"
+       x="210.57079"
+       height="130.89714"
+       width="132.45085"
+       id="rect4148"
+       style="opacity:1;fill:#e21d38;fill-opacity:1;stroke:#aa1604;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+    <path
+       id="path4153-1"
+       d="m 277.13853,322.42496 a 11.194822,11.194822 0 0 0 -11.19647,11.19273 11.194822,11.194822 0 0 0 8.28772,10.79915 l 0,16.79285 a 19.191829,19.191829 0 0 0 -13.89534,10.21441 l -15.70583,-4.77173 a 11.194822,11.194822 0 0 0 0.0826,-1.28943 11.194822,11.194822 0 0 0 -11.19274,-11.19273 11.194822,11.194822 0 0 0 -11.19646,11.19273 11.194822,11.194822 0 0 0 11.19646,11.19648 11.194822,11.194822 0 0 0 8.94372,-4.48309 l 16.04691,4.87667 a 19.191829,19.191829 0 0 0 -0.28486,3.1824 19.191829,19.191829 0 0 0 5.97869,13.88784 l -10.51802,12.15983 a 11.194822,11.194822 0 0 0 -3.68845,-0.63723 11.194822,11.194822 0 0 0 -11.19646,11.19275 11.194822,11.194822 0 0 0 11.19646,11.19647 11.194822,11.194822 0 0 0 11.19276,-11.19647 11.194822,11.194822 0 0 0 -2.67637,-7.24193 l 10.49926,-12.13358 a 19.191829,19.191829 0 0 0 8.40394,1.96416 19.191829,19.191829 0 0 0 7.75172,-1.66055 l 10.61547,13.69292 a 11.194822,11.194822 0 0 0 -1.97166,6.34982 11.194822,11.194822 0 0 0 11.19275,11.19273 11.194822,11.194822 0 0 0 11.19646,-11.19273 11.194822,11.194822 0 0 0 -11.19646,-11.1965 11.194822,11.194822 0 0 0 -4.50559,0.96335 L 290.3031,394.32686 a 19.191829,19.191829 0 0 0 6.30107,-14.19146 19.191829,19.191829 0 0 0 -0.34857,-3.57224 l 15.07983,-5.33397 a 11.194822,11.194822 0 0 0 9.66338,5.57386 11.194822,11.194822 0 0 0 11.1965,-11.19647 11.194822,11.194822 0 0 0 -11.1965,-11.19273 11.194822,11.194822 0 0 0 -11.19276,11.19273 11.194822,11.194822 0 0 0 0.004,0.10495 l -15.43969,5.46143 a 19.191829,19.191829 0 0 0 -14.08245,-9.98951 l 0,-16.83034 a 11.194822,11.194822 0 0 0 8.04407,-10.73543 11.194822,11.194822 0 0 0 -11.19273,-11.19273 z"
+       style="opacity:1;fill:#f9fbfa;fill-opacity:1;stroke:#4f4f4f;stroke-width:2.00758219;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+  </g>
+</svg>
diff --git a/src/assets/Network-Icons-SVG/f5-ltm.svg b/src/assets/Network-Icons-SVG/f5-ltm.svg
new file mode 100644
index 0000000..646e981
--- /dev/null
+++ b/src/assets/Network-Icons-SVG/f5-ltm.svg
@@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   version="1.1"
+   id="svg4137"
+   viewBox="0 0 134.45085 132.89714"
+   height="37.506527mm"
+   width="37.945019mm">
+  <defs
+     id="defs4139" />
+  <metadata
+     id="metadata4142">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     transform="translate(-215.63172,-131.62792)"
+     id="layer1">
+    <g
+       id="layer2"
+       transform="translate(-95.716733,26.567293)">
+      <rect
+         style="opacity:1;fill:#e21d38;fill-opacity:1;stroke:#aa1604;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         id="rect4148"
+         width="132.45085"
+         height="130.89714"
+         x="312.34845"
+         y="106.06062"
+         ry="23.230007" />
+      <path
+         style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:#aa1604;stroke-width:2.36471558;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         d="m 377.08683,115.67351 c -1.36466,0.0335 -2.7184,0.60584 -3.62707,1.65638 l -15.74601,18.20449 c -1.5508,1.79293 -1.20076,4.27909 0.78482,5.57411 l 0.28577,0.18625 c 1.98558,1.29502 4.83254,0.89434 6.38334,-0.8986 l 7.11447,-8.22561 0,21.32275 c 0,0.20988 0.01,0.41684 0.0274,0.62072 a 21.493014,21.261909 0 0 0 -14.33219,10.79411 l -20.08768,-7.00293 11.4599,-4.54634 c 2.20351,-0.87416 3.51887,-3.43061 2.94965,-5.73182 l -0.0819,-0.33121 c -0.56922,-2.30121 -2.8017,-3.45017 -5.00521,-2.57601 l -22.37305,8.87599 c -1.38479,0.54937 -2.41787,1.76343 -2.8539,3.16069 -0.003,0.007 -0.007,0.0144 -0.009,0.0218 -0.51786,1.3605 -0.45931,2.94379 0.27976,4.2279 l 12.00665,20.86086 c 1.1825,2.05458 3.64545,2.54248 5.52191,1.09387 l 0.27,-0.20841 c 1.87646,-1.44861 2.43521,-4.26868 1.2527,-6.32326 l -5.4254,-9.42574 19.61716,6.83883 a 21.493014,21.261909 0 0 0 -0.036,1.01464 21.493014,21.261909 0 0 0 16.93337,20.75159 l 0,10.1779 a 13.00356,12.863737 0 0 0 -8.19256,11.94581 13.00356,12.863737 0 0 0 13.00325,12.86356 13.00356,12.863737 0 0 0 13.00364,-12.86356 13.00356,12.863737 0 0 0 -8.75058,-12.14108 l 0,-9.95485 a 21.493014,21.261909 0 0 0 16.98895,-20.77937 21.493014,21.261909 0 0 0 -0.0867,-1.71046 l 21.10982,-7.46106 -6.10358,10.7115 c -1.17368,2.05963 -0.60292,4.87745 1.27974,6.318 l 0.27075,0.20728 c 1.88266,1.44055 4.34373,0.94211 5.51741,-1.11752 l 11.91652,-20.91231 c 0.7376,-1.29438 0.78532,-2.88794 0.25235,-4.25118 -0.002,-0.008 -0.004,-0.015 -0.006,-0.0225 -0.44611,-1.38568 -1.48151,-2.58496 -2.86103,-3.12539 l -22.41139,-8.77992 c -2.20723,-0.86469 -4.43461,0.29379 -4.99394,2.59742 l -0.0804,0.33158 c -0.55934,2.30364 0.7672,4.85436 2.97444,5.71906 l 10.12607,3.96692 -19.75422,6.98191 a 21.493014,21.261909 0 0 0 -14.09037,-10.20606 c 0.0172,-0.20071 0.0263,-0.40446 0.0263,-0.61096 l 0,-22.4215 8.06526,9.32436 c 1.5508,1.79294 4.39776,2.19362 6.38334,0.8986 l 0.28577,-0.18625 c 1.98558,-1.29502 2.33562,-3.78118 0.78482,-5.57411 l -15.746,-18.20449 c -0.9746,-1.12677 -2.46119,-1.70274 -3.92411,-1.65451 -0.008,-1.9e-4 -0.0157,-0.001 -0.0237,-0.001 -0.0909,-0.003 -0.18202,-0.003 -0.273,-3.7e-4 z m -0.13105,46.3195 a 13.00356,12.863737 0 0 1 13.00326,12.86394 13.00356,12.863737 0 0 1 -13.00326,12.86356 13.00356,12.863737 0 0 1 -13.00363,-12.86356 13.00356,12.863737 0 0 1 13.00363,-12.86394 z"
+         id="path4150" />
+    </g>
+  </g>
+</svg>
diff --git a/src/assets/Network-Icons-SVG/generic-adc-colour-3d.svg b/src/assets/Network-Icons-SVG/generic-adc-colour-3d.svg
new file mode 100644
index 0000000..71c4c9b
--- /dev/null
+++ b/src/assets/Network-Icons-SVG/generic-adc-colour-3d.svg
@@ -0,0 +1,63 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   version="1.1"
+   id="svg7778"
+   viewBox="0 0 257.79912 103.53112"
+   height="29.218782mm"
+   width="72.756638mm">
+  <defs
+     id="defs7780" />
+  <metadata
+     id="metadata7783">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <rect
+     ry="1.058059"
+     y="144.38962"
+     x="178.69905"
+     height="44.737236"
+     width="114.87411"
+     id="rect4136-2-3-3-1-5"
+     style="opacity:1;fill:#dddddd;fill-opacity:1;stroke:#0c3c86;stroke-width:2.87683558;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:2;stroke-dasharray:none;stroke-opacity:1"
+     transform="matrix(0.873861,-0.48617585,5.1650651e-8,1,0,0)" />
+  <rect
+     ry="0.92879671"
+     y="57.148861"
+     x="1.663313"
+     height="44.718945"
+     width="153.66602"
+     id="rect4136-2-3-3-1"
+     style="opacity:1;fill:#dddddd;fill-opacity:1;stroke:#0c3c86;stroke-width:3.32662606;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:2;stroke-dasharray:none;stroke-opacity:1" />
+  <g
+     transform="matrix(1.0767436,0,-0.69071933,0.38775698,100.42788,0)"
+     id="g840">
+    <g
+       transform="translate(-310.19216,-103.4594)"
+       id="layer1" />
+    <rect
+       ry="0"
+       y="2.8232944"
+       x="2.8232944"
+       height="140.58922"
+       width="140.82561"
+       id="rect4136-2-3-3"
+       style="opacity:1;fill:#dddddd;fill-opacity:1;stroke:#0c3c86;stroke-width:5.6465888;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:2;stroke-dasharray:none;stroke-opacity:1" />
+    <path
+       style="opacity:1;fill:#104ead;fill-opacity:1;stroke:#0c3c86;stroke-width:1.91520715;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 73.032665,18.093584 c -1.306805,0.03208 -2.603151,0.580155 -3.473297,1.586156 L 54.480932,37.112425 c -1.485051,1.716916 -1.149852,4.097672 0.751548,5.337788 l 0.273654,0.178353 c 1.901399,1.240116 4.627658,0.856423 6.112709,-0.860502 l 6.812842,-7.876874 v 20.418742 c 0,0.200982 0.0096,0.399167 0.02624,0.594404 A 20.581788,20.360481 0 0 0 54.733366,65.240814 L 35.497332,58.534783 46.471373,54.181192 c 2.110089,-0.837099 3.369683,-3.285165 2.824596,-5.488812 l -0.07843,-0.317168 c -0.545085,-2.203647 -2.682915,-3.303895 -4.793004,-2.466796 l -21.424514,8.49968 c -1.326079,0.526079 -2.315361,1.688667 -2.732904,3.026688 -0.0029,0.0067 -0.0067,0.01379 -0.0086,0.02088 -0.495904,1.30282 -0.439837,2.818984 0.267899,4.048652 l 11.497612,19.97644 c 1.132366,1.967474 3.490895,2.434689 5.2878,1.047494 l 0.258553,-0.199574 c 1.796905,-1.387194 2.331966,-4.087703 1.19959,-6.055176 l -5.195382,-9.026129 18.785463,6.548885 a 20.581788,20.360481 0 0 0 -0.03447,0.971632 20.581788,20.360481 0 0 0 16.215455,19.871798 v 9.746384 a 12.452256,12.318361 0 0 0 -7.845225,11.43935 12.452256,12.318361 0 0 0 12.45196,12.31819 12.452256,12.318361 0 0 0 12.452332,-12.31819 12.452256,12.318361 0 0 0 -8.379587,-11.62634 v -9.532792 a 20.581788,20.360481 0 0 0 16.26868,-19.8984 20.581788,20.360481 0 0 0 -0.08302,-1.637952 l 20.214833,-7.144734 -5.84481,10.257377 c -1.12392,1.972309 -0.57736,4.670663 1.22548,6.050139 l 0.25928,0.198492 c 1.80284,1.379476 4.15957,0.902168 5.28349,-1.070141 l 11.4113,-20.025709 c 0.70633,-1.239503 0.75203,-2.765502 0.24165,-4.070945 -0.002,-0.0077 -0.004,-0.01436 -0.006,-0.02155 -0.4272,-1.326933 -1.4187,-2.475367 -2.73974,-2.992885 l -21.46099,-8.407683 c -2.113652,-0.82803 -4.246594,0.281334 -4.782211,2.487299 l -0.07699,0.317522 c -0.535626,2.205974 0.734673,4.648552 2.848329,5.476592 l 9.696752,3.798737 -18.916698,6.685902 A 20.581788,20.360481 0 0 0 77.266862,54.89499 c 0.01647,-0.192201 0.02519,-0.387313 0.02519,-0.585058 V 32.839023 l 7.723322,8.929041 c 1.485051,1.716925 4.211311,2.100618 6.112709,0.860502 l 0.27365,-0.178353 c 1.901398,-1.240116 2.236598,-3.620872 0.751546,-5.337788 L 77.074853,19.67974 c -0.93328,-1.078999 -2.356844,-1.63055 -3.757742,-1.584365 -0.0077,-1.82e-4 -0.01503,-9.58e-4 -0.02269,-9.58e-4 -0.08705,-0.0029 -0.174303,-0.0029 -0.261426,-3.54e-4 z M 72.90717,62.449304 A 12.452256,12.318361 0 0 1 85.359138,74.767865 12.452256,12.318361 0 0 1 72.90717,87.086056 12.452256,12.318361 0 0 1 60.454847,74.767865 12.452256,12.318361 0 0 1 72.90717,62.449304 Z"
+       id="path4150" />
+  </g>
+</svg>
diff --git a/src/assets/Network-Icons-SVG/generic-adc-colour.svg b/src/assets/Network-Icons-SVG/generic-adc-colour.svg
new file mode 100644
index 0000000..c6a159a
--- /dev/null
+++ b/src/assets/Network-Icons-SVG/generic-adc-colour.svg
@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   version="1.1"
+   id="svg2"
+   viewBox="0 0 146.47219 146.23581"
+   height="41.270996mm"
+   width="41.337708mm">
+  <defs
+     id="defs4" />
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     transform="translate(-310.19216,-103.4594)"
+     id="layer1" />
+  <rect
+     ry="8.9952965"
+     y="2.8232944"
+     x="2.8232944"
+     height="140.58922"
+     width="140.82561"
+     id="rect4136-2-3-3"
+     style="opacity:1;fill:#dddddd;fill-opacity:1;stroke:#0c3c86;stroke-width:5.6465888;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:2;stroke-dasharray:none;stroke-opacity:1" />
+  <path
+     style="opacity:1;fill:#104ead;fill-opacity:1;stroke:#0c3c86;stroke-width:1.91520715;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="m 73.032665,18.093584 c -1.306805,0.03208 -2.603151,0.580155 -3.473297,1.586156 L 54.480932,37.112425 c -1.485051,1.716916 -1.149852,4.097672 0.751548,5.337788 l 0.273654,0.178353 c 1.901399,1.240116 4.627658,0.856423 6.112709,-0.860502 l 6.812842,-7.876874 v 20.418742 c 0,0.200982 0.0096,0.399167 0.02624,0.594404 A 20.581788,20.360481 0 0 0 54.733366,65.240814 L 35.497332,58.534783 46.471373,54.181192 c 2.110089,-0.837099 3.369683,-3.285165 2.824596,-5.488812 l -0.07843,-0.317168 c -0.545085,-2.203647 -2.682915,-3.303895 -4.793004,-2.466796 l -21.424514,8.49968 c -1.326079,0.526079 -2.315361,1.688667 -2.732904,3.026688 -0.0029,0.0067 -0.0067,0.01379 -0.0086,0.02088 -0.495904,1.30282 -0.439837,2.818984 0.267899,4.048652 l 11.497612,19.97644 c 1.132366,1.967474 3.490895,2.434689 5.2878,1.047494 l 0.258553,-0.199574 c 1.796905,-1.387194 2.331966,-4.087703 1.19959,-6.055176 l -5.195382,-9.026129 18.785463,6.548885 a 20.581788,20.360481 0 0 0 -0.03447,0.971632 20.581788,20.360481 0 0 0 16.215455,19.871798 v 9.746384 a 12.452256,12.318361 0 0 0 -7.845225,11.43935 12.452256,12.318361 0 0 0 12.45196,12.31819 12.452256,12.318361 0 0 0 12.452332,-12.31819 12.452256,12.318361 0 0 0 -8.379587,-11.62634 v -9.532792 a 20.581788,20.360481 0 0 0 16.26868,-19.8984 20.581788,20.360481 0 0 0 -0.08302,-1.637952 l 20.214833,-7.144734 -5.84481,10.257377 c -1.12392,1.972309 -0.57736,4.670663 1.22548,6.050139 l 0.25928,0.198492 c 1.80284,1.379476 4.15957,0.902168 5.28349,-1.070141 l 11.4113,-20.025709 c 0.70633,-1.239503 0.75203,-2.765502 0.24165,-4.070945 -0.002,-0.0077 -0.004,-0.01436 -0.006,-0.02155 -0.4272,-1.326933 -1.4187,-2.475367 -2.73974,-2.992885 l -21.46099,-8.407683 c -2.113652,-0.82803 -4.246594,0.281334 -4.782211,2.487299 l -0.07699,0.317522 c -0.535626,2.205974 0.734673,4.648552 2.848329,5.476592 l 9.696752,3.798737 -18.916698,6.685902 A 20.581788,20.360481 0 0 0 77.266862,54.89499 c 0.01647,-0.192201 0.02519,-0.387313 0.02519,-0.585058 V 32.839023 l 7.723322,8.929041 c 1.485051,1.716925 4.211311,2.100618 6.112709,0.860502 l 0.27365,-0.178353 c 1.901398,-1.240116 2.236598,-3.620872 0.751546,-5.337788 L 77.074853,19.67974 c -0.93328,-1.078999 -2.356844,-1.63055 -3.757742,-1.584365 -0.0077,-1.82e-4 -0.01503,-9.58e-4 -0.02269,-9.58e-4 -0.08705,-0.0029 -0.174303,-0.0029 -0.261426,-3.54e-4 z M 72.90717,62.449304 A 12.452256,12.318361 0 0 1 85.359138,74.767865 12.452256,12.318361 0 0 1 72.90717,87.086056 12.452256,12.318361 0 0 1 60.454847,74.767865 12.452256,12.318361 0 0 1 72.90717,62.449304 Z"
+     id="path4150" />
+</svg>
diff --git a/src/assets/Network-Icons-SVG/generic-adc-mono.svg b/src/assets/Network-Icons-SVG/generic-adc-mono.svg
new file mode 100644
index 0000000..1b6e916
--- /dev/null
+++ b/src/assets/Network-Icons-SVG/generic-adc-mono.svg
@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   version="1.1"
+   id="svg2"
+   viewBox="0 0 146.47219 146.23581"
+   height="41.270996mm"
+   width="41.337708mm">
+  <defs
+     id="defs4" />
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     transform="translate(-310.19216,-103.4594)"
+     id="layer1" />
+  <rect
+     ry="8.9952965"
+     y="2.8232944"
+     x="2.8232944"
+     height="140.58922"
+     width="140.82561"
+     id="rect4136-2-3-3"
+     style="opacity:1;fill:#fdfdfd;fill-opacity:1;stroke:#2c2c2c;stroke-width:5.6465888;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:2;stroke-dasharray:none;stroke-opacity:1" />
+  <path
+     style="opacity:1;fill:#3a3a3a;fill-opacity:1;stroke:#2c2c2c;stroke-width:1.91520727;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="m 73.03267,18.093578 c -1.306804,0.03207 -2.603151,0.580155 -3.473297,1.586156 L 54.480938,37.112419 c -1.485052,1.716916 -1.149852,4.097672 0.751547,5.337787 l 0.273654,0.178354 c 1.901399,1.240116 4.627658,0.856424 6.112709,-0.860503 l 6.812842,-7.876874 v 20.418744 c 0,0.200981 0.0096,0.399166 0.02624,0.594402 A 20.581787,20.360481 0 0 0 54.733372,65.240809 L 35.497337,58.534777 46.471378,54.181185 c 2.110089,-0.837098 3.369683,-3.285164 2.824596,-5.48881 l -0.07843,-0.317169 C 48.672457,46.17156 46.534627,45.071311 44.424538,45.90841 l -21.424513,8.49968 c -1.326081,0.526078 -2.315361,1.688667 -2.732905,3.026689 -0.0029,0.0067 -0.0067,0.01379 -0.0086,0.02088 -0.495904,1.30282 -0.439837,2.818985 0.2679,4.048654 l 11.497611,19.976439 c 1.132365,1.967473 3.490894,2.434688 5.2878,1.047494 l 0.258554,-0.199574 c 1.796904,-1.387194 2.331965,-4.087703 1.199588,-6.055176 l -5.195381,-9.026129 18.785463,6.548885 a 20.581787,20.360481 0 0 0 -0.03448,0.971633 20.581787,20.360481 0 0 0 16.215456,19.871796 v 9.746389 a 12.452256,12.318361 0 0 0 -7.845226,11.43935 12.452256,12.318361 0 0 0 12.451961,12.3182 12.452256,12.318361 0 0 0 12.452331,-12.3182 12.452256,12.318361 0 0 0 -8.379587,-11.62634 v -9.532796 a 20.581787,20.360481 0 0 0 16.268679,-19.898399 20.581787,20.360481 0 0 0 -0.08302,-1.637953 l 20.214851,-7.144735 -5.84482,10.257377 c -1.12392,1.97231 -0.57736,4.670665 1.22548,6.05014 l 0.25927,0.198492 c 1.80285,1.379477 4.15957,0.902169 5.28349,-1.070141 l 11.41131,-20.02571 c 0.70633,-1.239502 0.75203,-2.765501 0.24166,-4.070944 -0.002,-0.0076 -0.004,-0.01436 -0.006,-0.02155 -0.4272,-1.326932 -1.41871,-2.475367 -2.73973,-2.992885 l -21.46123,-8.407683 c -2.113653,-0.828031 -4.246602,0.281334 -4.782219,2.487299 l -0.07699,0.317522 c -0.535626,2.205974 0.734674,4.648553 2.848326,5.476593 l 9.696763,3.798736 -18.916705,6.685902 A 20.581787,20.360481 0 0 0 77.266867,54.894984 c 0.01647,-0.192201 0.02518,-0.387313 0.02518,-0.585057 v -21.47091 l 7.723323,8.92904 c 1.48505,1.716927 4.21131,2.100619 6.112709,0.860503 l 0.273654,-0.178354 c 1.901399,-1.240115 2.236598,-3.620871 0.751547,-5.337787 L 77.074858,19.679734 c -0.93328,-1.078999 -2.356844,-1.630551 -3.757742,-1.584365 -0.0076,-1.82e-4 -0.01503,-9.58e-4 -0.0227,-9.58e-4 -0.08705,-0.0029 -0.174303,-0.0029 -0.261426,-3.54e-4 z m -0.125495,44.35572 A 12.452256,12.318361 0 0 1 85.359144,74.767859 12.452256,12.318361 0 0 1 72.907175,87.086051 12.452256,12.318361 0 0 1 60.454852,74.767859 12.452256,12.318361 0 0 1 72.907175,62.449298 Z"
+     id="path4150" />
+</svg>
diff --git a/src/assets/Network-Icons-SVG/generic-firewall-flat-colour-label-v1-colour.svg b/src/assets/Network-Icons-SVG/generic-firewall-flat-colour-label-v1-colour.svg
new file mode 100644
index 0000000..ea0a1b3
--- /dev/null
+++ b/src/assets/Network-Icons-SVG/generic-firewall-flat-colour-label-v1-colour.svg
@@ -0,0 +1,147 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   version="1.1"
+   id="svg4294"
+   viewBox="0 0 477.15656 123.40902"
+   height="34.828766mm"
+   width="134.66418mm">
+  <defs
+     id="defs4296" />
+  <metadata
+     id="metadata4299">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <rect
+     ry="7.544374"
+     y="2.7482815"
+     x="2.7482815"
+     height="117.91245"
+     width="471.66003"
+     id="rect4136-2-3-9"
+     style="opacity:1;fill:#dddddd;fill-opacity:1;stroke:#0c3c86;stroke-width:4.83579502;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1" />
+  <rect
+     ry="6.2240515"
+     style="fill:#ffffff;stroke:#0c3c86;stroke-width:3.29919542;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1"
+     y="22.093039"
+     x="24.019857"
+     height="79.222946"
+     width="325.79764"
+     id="rect3729-3-6-3" />
+  <rect
+     ry="2.1987813"
+     y="21.959221"
+     x="367.10852"
+     height="79.688713"
+     width="86.592178"
+     id="rect6782-4-65-3-0-6"
+     style="opacity:1;fill:#d3453a;fill-opacity:1;stroke:#2c2c2c;stroke-width:4.6875;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1" />
+  <g
+     style="stroke:#2c2c2c;stroke-opacity:1"
+     transform="translate(-118.88555,-54.925258)"
+     id="g931">
+    <rect
+       y="77.126175"
+       x="486.69263"
+       height="16.334656"
+       width="85.19503"
+       id="rect5963-5"
+       style="opacity:1;fill:#d3453a;fill-opacity:1;stroke:#2c2c2c;stroke-width:3.75000024;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1" />
+    <rect
+       y="139.99684"
+       x="486.69263"
+       height="16.334656"
+       width="85.19503"
+       id="rect5963-6-3"
+       style="display:inline;opacity:1;fill:#d3453a;fill-opacity:1;stroke:#2c2c2c;stroke-width:3.75000024;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1" />
+    <rect
+       y="108.76521"
+       x="486.69263"
+       height="16.238991"
+       width="29.59816"
+       id="rect5963-6-2-5"
+       style="display:inline;opacity:1;fill:#d3453a;fill-opacity:1;stroke:#2c2c2c;stroke-width:3.75000024;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1" />
+    <rect
+       y="93.580429"
+       x="500.47913"
+       height="14.78988"
+       width="28.496183"
+       id="rect5963-6-2-9-6"
+       style="display:inline;opacity:1;fill:#d3453a;fill-opacity:1;stroke:#2c2c2c;stroke-width:3.75000024;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1" />
+    <rect
+       y="93.631813"
+       x="486.69263"
+       height="14.687106"
+       width="13.937183"
+       id="rect5963-6-2-9-2-2"
+       style="display:inline;opacity:1;fill:#d3453a;fill-opacity:1;stroke:#2c2c2c;stroke-width:3.75000024;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1" />
+    <rect
+       y="93.580429"
+       x="528.98602"
+       height="14.78988"
+       width="28.496183"
+       id="rect5963-6-2-9-3-9"
+       style="display:inline;opacity:1;fill:#d3453a;fill-opacity:1;stroke:#2c2c2c;stroke-width:3.75000024;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1" />
+    <rect
+       y="93.631813"
+       x="557.95044"
+       height="14.687106"
+       width="13.937183"
+       id="rect5963-6-2-9-2-9-1"
+       style="display:inline;opacity:1;fill:#d3453a;fill-opacity:1;stroke:#2c2c2c;stroke-width:3.75000024;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1" />
+    <rect
+       y="108.76521"
+       x="542.28949"
+       height="16.238991"
+       width="29.59816"
+       id="rect5963-6-2-2-2"
+       style="display:inline;opacity:1;fill:#d3453a;fill-opacity:1;stroke:#2c2c2c;stroke-width:3.75000024;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1" />
+    <rect
+       y="125.47609"
+       x="500.4993"
+       height="14.78988"
+       width="28.496183"
+       id="rect5963-6-2-9-8-7"
+       style="display:inline;opacity:1;fill:#d3453a;fill-opacity:1;stroke:#2c2c2c;stroke-width:3.75000024;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1" />
+    <rect
+       y="125.39251"
+       x="486.7157"
+       height="14.957036"
+       width="13.931359"
+       id="rect5963-6-2-9-2-97-0"
+       style="display:inline;opacity:1;fill:#d3453a;fill-opacity:1;stroke:#2c2c2c;stroke-width:3.75000024;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1" />
+    <rect
+       y="125.47609"
+       x="529.00616"
+       height="14.78988"
+       width="28.496183"
+       id="rect5963-6-2-9-3-3-9"
+       style="display:inline;opacity:1;fill:#d3453a;fill-opacity:1;stroke:#2c2c2c;stroke-width:3.75000024;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1" />
+    <rect
+       y="125.39251"
+       x="557.93237"
+       height="14.957036"
+       width="13.931359"
+       id="rect5963-6-2-9-2-9-6-3"
+       style="display:inline;opacity:1;fill:#d3453a;fill-opacity:1;stroke:#2c2c2c;stroke-width:3.75000024;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1" />
+    <rect
+       y="108.74097"
+       x="516.32239"
+       height="16.287457"
+       width="25.935509"
+       id="rect5963-6-2-1-6"
+       style="display:inline;opacity:1;fill:#d3453a;fill-opacity:1;stroke:#2c2c2c;stroke-width:3.75000024;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1" />
+  </g>
+</svg>
diff --git a/src/assets/Network-Icons-SVG/generic-firewall-flat-colour-label-v1-mono.svg b/src/assets/Network-Icons-SVG/generic-firewall-flat-colour-label-v1-mono.svg
new file mode 100644
index 0000000..c8ac0f1
--- /dev/null
+++ b/src/assets/Network-Icons-SVG/generic-firewall-flat-colour-label-v1-mono.svg
@@ -0,0 +1,150 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   version="1.1"
+   id="svg4294"
+   viewBox="0 0 476.49581 122.74825"
+   height="34.642281mm"
+   width="134.47771mm">
+  <defs
+     id="defs4296" />
+  <metadata
+     id="metadata4299">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     transform="translate(-0.33038402,-0.33038402)"
+     id="g898">
+    <rect
+       style="opacity:1;fill:#fdfdfd;fill-opacity:1;stroke:#2c2c2c;stroke-width:4.83579493;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1"
+       id="rect4136-2-3-9"
+       width="471.66003"
+       height="117.91245"
+       x="2.7482815"
+       y="2.7482815"
+       ry="7.544374" />
+    <rect
+       id="rect3729-3-6-3"
+       width="325.79764"
+       height="79.222946"
+       x="24.019857"
+       y="22.093035"
+       style="fill:#fdfdfd;fill-opacity:1;stroke:#2c2c2c;stroke-width:3.29919553;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1"
+       ry="6.2240515" />
+    <g
+       transform="matrix(0.57098342,0,0,0.57802428,365.48396,19.372268)"
+       id="g869">
+      <rect
+         ry="3.816956"
+         y="4.0686131"
+         x="4.0686092"
+         height="138.33496"
+         width="150.31897"
+         id="rect6782-4-65-3-0-6-3"
+         style="opacity:1;fill:#fdfdfd;fill-opacity:1;stroke:#2c2c2c;stroke-width:8.13722706;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1" />
+      <rect
+         style="opacity:1;fill:#fdfdfd;fill-opacity:1;stroke:#2c2c2c;stroke-width:6.50978184;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1"
+         id="rect5963-5-6"
+         width="147.8936"
+         height="28.35601"
+         x="5.2812467"
+         y="4.4881825" />
+      <rect
+         style="display:inline;opacity:1;fill:#fdfdfd;fill-opacity:1;stroke:#2c2c2c;stroke-width:6.50978184;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1"
+         id="rect5963-6-3-7"
+         width="147.8936"
+         height="28.35601"
+         x="5.2812467"
+         y="113.628" />
+      <rect
+         style="display:inline;opacity:1;fill:#fdfdfd;fill-opacity:1;stroke:#2c2c2c;stroke-width:6.50978184;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1"
+         id="rect5963-6-2-5-5"
+         width="51.38068"
+         height="28.189941"
+         x="5.2812467"
+         y="59.411709" />
+      <rect
+         style="display:inline;opacity:1;fill:#fdfdfd;fill-opacity:1;stroke:#2c2c2c;stroke-width:6.50978184;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1"
+         id="rect5963-6-2-9-6-3"
+         width="49.467712"
+         height="25.67437"
+         x="29.213806"
+         y="33.051807" />
+      <rect
+         style="display:inline;opacity:1;fill:#fdfdfd;fill-opacity:1;stroke:#2c2c2c;stroke-width:6.50978184;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1"
+         id="rect5963-6-2-9-2-2-5"
+         width="24.194138"
+         height="25.49596"
+         x="5.2812467"
+         y="33.141006" />
+      <rect
+         style="display:inline;opacity:1;fill:#fdfdfd;fill-opacity:1;stroke:#2c2c2c;stroke-width:6.50978184;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1"
+         id="rect5963-6-2-9-3-9-6"
+         width="49.467712"
+         height="25.67437"
+         x="78.700119"
+         y="33.051807" />
+      <rect
+         style="display:inline;opacity:1;fill:#fdfdfd;fill-opacity:1;stroke:#2c2c2c;stroke-width:6.50978184;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1"
+         id="rect5963-6-2-9-2-9-1-2"
+         width="24.194138"
+         height="25.49596"
+         x="128.98065"
+         y="33.141006" />
+      <rect
+         style="display:inline;opacity:1;fill:#fdfdfd;fill-opacity:1;stroke:#2c2c2c;stroke-width:6.50978184;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1"
+         id="rect5963-6-2-2-2-9"
+         width="51.38068"
+         height="28.189941"
+         x="101.79416"
+         y="59.411709" />
+      <rect
+         style="display:inline;opacity:1;fill:#fdfdfd;fill-opacity:1;stroke:#2c2c2c;stroke-width:6.50978184;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1"
+         id="rect5963-6-2-9-8-7-1"
+         width="49.467712"
+         height="25.67437"
+         x="29.248823"
+         y="88.420822" />
+      <rect
+         style="display:inline;opacity:1;fill:#fdfdfd;fill-opacity:1;stroke:#2c2c2c;stroke-width:6.50978184;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1"
+         id="rect5963-6-2-9-2-97-0-2"
+         width="24.184027"
+         height="25.964542"
+         x="5.3212972"
+         y="88.275734" />
+      <rect
+         style="display:inline;opacity:1;fill:#fdfdfd;fill-opacity:1;stroke:#2c2c2c;stroke-width:6.50978184;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1"
+         id="rect5963-6-2-9-3-3-9-7"
+         width="49.467712"
+         height="25.67437"
+         x="78.735085"
+         y="88.420822" />
+      <rect
+         style="display:inline;opacity:1;fill:#fdfdfd;fill-opacity:1;stroke:#2c2c2c;stroke-width:6.50978184;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1"
+         id="rect5963-6-2-9-2-9-6-3-0"
+         width="24.184027"
+         height="25.964542"
+         x="128.9493"
+         y="88.275734" />
+      <rect
+         style="display:inline;opacity:1;fill:#fdfdfd;fill-opacity:1;stroke:#2c2c2c;stroke-width:6.50978184;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1"
+         id="rect5963-6-2-1-6-9"
+         width="45.02253"
+         height="28.274075"
+         x="56.716785"
+         y="59.369617" />
+    </g>
+  </g>
+</svg>
diff --git a/src/assets/Network-Icons-SVG/generic-firewall-flat-colour-label-v2-colour.svg b/src/assets/Network-Icons-SVG/generic-firewall-flat-colour-label-v2-colour.svg
new file mode 100644
index 0000000..427c19f
--- /dev/null
+++ b/src/assets/Network-Icons-SVG/generic-firewall-flat-colour-label-v2-colour.svg
@@ -0,0 +1,142 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   width="134.66418mm"
+   height="34.828766mm"
+   viewBox="0 0 477.15656 123.40902"
+   id="svg4294"
+   version="1.1">
+  <defs
+     id="defs4296" />
+  <metadata
+     id="metadata4299">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <rect
+     style="opacity:1;fill:#dddddd;fill-opacity:1;stroke:#0c3c86;stroke-width:4.83579502;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1"
+     id="rect4136-2-3-9"
+     width="471.66003"
+     height="117.91245"
+     x="2.7482815"
+     y="2.7482815"
+     ry="7.544374" />
+  <rect
+     id="rect3729-3-6-3"
+     width="325.79764"
+     height="79.222946"
+     x="24.019857"
+     y="22.093039"
+     style="fill:#ffffff;stroke:#0c3c86;stroke-width:3.29919542;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1"
+     ry="6.2240515" />
+  <rect
+     style="opacity:1;fill:#d3453a;fill-opacity:1;stroke:#0c3c86;stroke-width:4.6875;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1"
+     id="rect6782-4-65-3-0-6"
+     width="86.592178"
+     height="79.688713"
+     x="367.10852"
+     y="21.959221"
+     ry="2.1987813" />
+  <rect
+     y="22.200916"
+     x="367.80707"
+     height="16.334656"
+     width="85.19503"
+     id="rect5963-5"
+     style="opacity:1;fill:#828282;fill-opacity:1;stroke:#0c3c86;stroke-width:3.75000024;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1" />
+  <rect
+     y="85.071587"
+     x="367.80707"
+     height="16.334656"
+     width="85.19503"
+     id="rect5963-6-3"
+     style="display:inline;opacity:1;fill:#828282;fill-opacity:1;stroke:#0c3c86;stroke-width:3.75000024;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1" />
+  <rect
+     y="53.839954"
+     x="367.80707"
+     height="16.238991"
+     width="29.59816"
+     id="rect5963-6-2-5"
+     style="display:inline;opacity:1;fill:#828282;fill-opacity:1;stroke:#0c3c86;stroke-width:3.75000024;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1" />
+  <rect
+     y="38.65517"
+     x="381.59357"
+     height="14.78988"
+     width="28.496183"
+     id="rect5963-6-2-9-6"
+     style="display:inline;opacity:1;fill:#828282;fill-opacity:1;stroke:#0c3c86;stroke-width:3.75000024;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1" />
+  <rect
+     y="38.706554"
+     x="367.80707"
+     height="14.687106"
+     width="13.937183"
+     id="rect5963-6-2-9-2-2"
+     style="display:inline;opacity:1;fill:#828282;fill-opacity:1;stroke:#0c3c86;stroke-width:3.75000024;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1" />
+  <rect
+     y="38.65517"
+     x="410.10046"
+     height="14.78988"
+     width="28.496183"
+     id="rect5963-6-2-9-3-9"
+     style="display:inline;opacity:1;fill:#828282;fill-opacity:1;stroke:#0c3c86;stroke-width:3.75000024;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1" />
+  <rect
+     y="38.706554"
+     x="439.06488"
+     height="14.687106"
+     width="13.937183"
+     id="rect5963-6-2-9-2-9-1"
+     style="display:inline;opacity:1;fill:#828282;fill-opacity:1;stroke:#0c3c86;stroke-width:3.75000024;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1" />
+  <rect
+     y="53.839954"
+     x="423.40393"
+     height="16.238991"
+     width="29.59816"
+     id="rect5963-6-2-2-2"
+     style="display:inline;opacity:1;fill:#828282;fill-opacity:1;stroke:#0c3c86;stroke-width:3.75000024;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1" />
+  <rect
+     y="70.550835"
+     x="381.61374"
+     height="14.78988"
+     width="28.496183"
+     id="rect5963-6-2-9-8-7"
+     style="display:inline;opacity:1;fill:#828282;fill-opacity:1;stroke:#0c3c86;stroke-width:3.75000024;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1" />
+  <rect
+     y="70.467255"
+     x="367.83014"
+     height="14.957036"
+     width="13.931359"
+     id="rect5963-6-2-9-2-97-0"
+     style="display:inline;opacity:1;fill:#828282;fill-opacity:1;stroke:#0c3c86;stroke-width:3.75000024;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1" />
+  <rect
+     y="70.550835"
+     x="410.12061"
+     height="14.78988"
+     width="28.496183"
+     id="rect5963-6-2-9-3-3-9"
+     style="display:inline;opacity:1;fill:#828282;fill-opacity:1;stroke:#0c3c86;stroke-width:3.75000024;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1" />
+  <rect
+     y="70.467255"
+     x="439.04681"
+     height="14.957036"
+     width="13.931359"
+     id="rect5963-6-2-9-2-9-6-3"
+     style="display:inline;opacity:1;fill:#828282;fill-opacity:1;stroke:#0c3c86;stroke-width:3.75000024;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1" />
+  <rect
+     y="53.815708"
+     x="397.43683"
+     height="16.287457"
+     width="25.935509"
+     id="rect5963-6-2-1-6"
+     style="display:inline;opacity:1;fill:#828282;fill-opacity:1;stroke:#0c3c86;stroke-width:3.75000024;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1" />
+</svg>
diff --git a/src/assets/Network-Icons-SVG/generic-firewall-flat-colour-label-v2-mono.svg b/src/assets/Network-Icons-SVG/generic-firewall-flat-colour-label-v2-mono.svg
new file mode 100644
index 0000000..d9808a8
--- /dev/null
+++ b/src/assets/Network-Icons-SVG/generic-firewall-flat-colour-label-v2-mono.svg
@@ -0,0 +1,151 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   width="134.47771mm"
+   height="34.642281mm"
+   viewBox="0 0 476.49581 122.74825"
+   id="svg4294"
+   version="1.1">
+  <defs
+     id="defs4296" />
+  <metadata
+     id="metadata4299">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <rect
+     style="opacity:1;fill:#fdfdfd;fill-opacity:1;stroke:#2c2c2c;stroke-width:4.83579493;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1"
+     id="rect4136-2-3-9"
+     width="471.66003"
+     height="117.91245"
+     x="2.4178975"
+     y="2.4178975"
+     ry="7.544374" />
+  <rect
+     id="rect3729-3-6-3"
+     width="325.79764"
+     height="79.222946"
+     x="23.689474"
+     y="21.762651"
+     style="fill:#fdfdfd;fill-opacity:1;stroke:#2c2c2c;stroke-width:3.29919553;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1"
+     ry="6.2240515" />
+  <g
+     transform="translate(-31.124585,128.44941)"
+     id="g938">
+    <rect
+       ry="2.198781"
+       y="-106.91965"
+       x="398.3342"
+       height="79.688713"
+       width="86.592171"
+       id="rect6782-4-65-3-0-6"
+       style="opacity:1;fill:#d3453a;fill-opacity:1;stroke:#2c2c2c;stroke-width:4.68749952;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1" />
+    <g
+       style="stroke:#2c2c2c;stroke-opacity:1"
+       transform="translate(-87.659869,-183.80413)"
+       id="g931">
+      <rect
+         y="77.126175"
+         x="486.69263"
+         height="16.334656"
+         width="85.19503"
+         id="rect5963-5"
+         style="opacity:1;fill:#d3453a;fill-opacity:1;stroke:#2c2c2c;stroke-width:3.75000024;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1" />
+      <rect
+         y="139.99684"
+         x="486.69263"
+         height="16.334656"
+         width="85.19503"
+         id="rect5963-6-3"
+         style="display:inline;opacity:1;fill:#d3453a;fill-opacity:1;stroke:#2c2c2c;stroke-width:3.75000024;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1" />
+      <rect
+         y="108.76521"
+         x="486.69263"
+         height="16.238991"
+         width="29.59816"
+         id="rect5963-6-2-5"
+         style="display:inline;opacity:1;fill:#d3453a;fill-opacity:1;stroke:#2c2c2c;stroke-width:3.75000024;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1" />
+      <rect
+         y="93.580429"
+         x="500.47913"
+         height="14.78988"
+         width="28.496183"
+         id="rect5963-6-2-9-6"
+         style="display:inline;opacity:1;fill:#d3453a;fill-opacity:1;stroke:#2c2c2c;stroke-width:3.75000024;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1" />
+      <rect
+         y="93.631813"
+         x="486.69263"
+         height="14.687106"
+         width="13.937183"
+         id="rect5963-6-2-9-2-2"
+         style="display:inline;opacity:1;fill:#d3453a;fill-opacity:1;stroke:#2c2c2c;stroke-width:3.75000024;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1" />
+      <rect
+         y="93.580429"
+         x="528.98602"
+         height="14.78988"
+         width="28.496183"
+         id="rect5963-6-2-9-3-9"
+         style="display:inline;opacity:1;fill:#d3453a;fill-opacity:1;stroke:#2c2c2c;stroke-width:3.75000024;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1" />
+      <rect
+         y="93.631813"
+         x="557.95044"
+         height="14.687106"
+         width="13.937183"
+         id="rect5963-6-2-9-2-9-1"
+         style="display:inline;opacity:1;fill:#d3453a;fill-opacity:1;stroke:#2c2c2c;stroke-width:3.75000024;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1" />
+      <rect
+         y="108.76521"
+         x="542.28949"
+         height="16.238991"
+         width="29.59816"
+         id="rect5963-6-2-2-2"
+         style="display:inline;opacity:1;fill:#d3453a;fill-opacity:1;stroke:#2c2c2c;stroke-width:3.75000024;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1" />
+      <rect
+         y="125.47609"
+         x="500.4993"
+         height="14.78988"
+         width="28.496183"
+         id="rect5963-6-2-9-8-7"
+         style="display:inline;opacity:1;fill:#d3453a;fill-opacity:1;stroke:#2c2c2c;stroke-width:3.75000024;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1" />
+      <rect
+         y="125.39251"
+         x="486.7157"
+         height="14.957036"
+         width="13.931359"
+         id="rect5963-6-2-9-2-97-0"
+         style="display:inline;opacity:1;fill:#d3453a;fill-opacity:1;stroke:#2c2c2c;stroke-width:3.75000024;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1" />
+      <rect
+         y="125.47609"
+         x="529.00616"
+         height="14.78988"
+         width="28.496183"
+         id="rect5963-6-2-9-3-3-9"
+         style="display:inline;opacity:1;fill:#d3453a;fill-opacity:1;stroke:#2c2c2c;stroke-width:3.75000024;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1" />
+      <rect
+         y="125.39251"
+         x="557.93237"
+         height="14.957036"
+         width="13.931359"
+         id="rect5963-6-2-9-2-9-6-3"
+         style="display:inline;opacity:1;fill:#d3453a;fill-opacity:1;stroke:#2c2c2c;stroke-width:3.75000024;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1" />
+      <rect
+         y="108.74097"
+         x="516.32239"
+         height="16.287457"
+         width="25.935509"
+         id="rect5963-6-2-1-6"
+         style="display:inline;opacity:1;fill:#d3453a;fill-opacity:1;stroke:#2c2c2c;stroke-width:3.75000024;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1" />
+    </g>
+  </g>
+</svg>
diff --git a/src/assets/Network-Icons-SVG/generic-firewall-v1-colour-3d.svg b/src/assets/Network-Icons-SVG/generic-firewall-v1-colour-3d.svg
new file mode 100644
index 0000000..d82cca3
--- /dev/null
+++ b/src/assets/Network-Icons-SVG/generic-firewall-v1-colour-3d.svg
@@ -0,0 +1,175 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="72.756638mm"
+   height="29.378555mm"
+   viewBox="0 0 257.79912 104.09725"
+   id="svg7778"
+   version="1.1"
+   sodipodi:docname="generic-firewall-v2-colour-3d.svg"
+   inkscape:version="0.92.4 (5da689c313, 2019-01-14)">
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="2017"
+     inkscape:window-height="1713"
+     id="namedview10"
+     showgrid="false"
+     inkscape:zoom="3.0259348"
+     inkscape:cx="65.911355"
+     inkscape:cy="27.710951"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg7778"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0" />
+  <defs
+     id="defs7780" />
+  <metadata
+     id="metadata7783">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <rect
+     transform="matrix(0.873861,-0.48617585,5.1650651e-8,1,0,0)"
+     style="opacity:1;fill:#828282;fill-opacity:1;stroke:#0c3c86;stroke-width:2.87683558;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:2;stroke-dasharray:none;stroke-opacity:1"
+     id="rect4136-2-3-3-1-5"
+     width="114.87411"
+     height="44.737236"
+     x="178.69905"
+     y="144.95575"
+     ry="1.058059" />
+  <rect
+     style="opacity:1;fill:#828282;fill-opacity:1;stroke:#0c3c86;stroke-width:3.32662606;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:2;stroke-dasharray:none;stroke-opacity:1"
+     id="rect4136-2-3-3-1"
+     width="153.66602"
+     height="44.718945"
+     x="1.663313"
+     y="57.714989"
+     ry="0.92879671" />
+  <g
+     id="g845"
+     transform="matrix(1.7930508,0,-1.1914402,0.68483634,-533.33826,-13.433387)">
+    <rect
+       ry="2.1987813"
+       y="21.959221"
+       x="367.10852"
+       height="79.688713"
+       width="86.592178"
+       id="rect6782-4-65-3-0-6"
+       style="opacity:1;fill:#d3453a;fill-opacity:1;stroke:#0c3c86;stroke-width:4.6875;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1" />
+    <rect
+       style="opacity:1;fill:#828282;fill-opacity:1;stroke:#0c3c86;stroke-width:3.75000024;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1"
+       id="rect5963-5"
+       width="85.19503"
+       height="16.334656"
+       x="367.80707"
+       y="22.200916" />
+    <rect
+       style="display:inline;opacity:1;fill:#828282;fill-opacity:1;stroke:#0c3c86;stroke-width:3.75000024;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1"
+       id="rect5963-6-3"
+       width="85.19503"
+       height="16.334656"
+       x="367.80707"
+       y="85.071587" />
+    <rect
+       style="display:inline;opacity:1;fill:#828282;fill-opacity:1;stroke:#0c3c86;stroke-width:3.75000024;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1"
+       id="rect5963-6-2-5"
+       width="29.59816"
+       height="16.238991"
+       x="367.80707"
+       y="53.839954" />
+    <rect
+       style="display:inline;opacity:1;fill:#828282;fill-opacity:1;stroke:#0c3c86;stroke-width:3.75000024;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1"
+       id="rect5963-6-2-9-6"
+       width="28.496183"
+       height="14.78988"
+       x="381.59357"
+       y="38.65517" />
+    <rect
+       style="display:inline;opacity:1;fill:#828282;fill-opacity:1;stroke:#0c3c86;stroke-width:3.75000024;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1"
+       id="rect5963-6-2-9-2-2"
+       width="13.937183"
+       height="14.687106"
+       x="367.80707"
+       y="38.706554" />
+    <rect
+       style="display:inline;opacity:1;fill:#828282;fill-opacity:1;stroke:#0c3c86;stroke-width:3.75000024;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1"
+       id="rect5963-6-2-9-3-9"
+       width="28.496183"
+       height="14.78988"
+       x="410.10046"
+       y="38.65517" />
+    <rect
+       style="display:inline;opacity:1;fill:#828282;fill-opacity:1;stroke:#0c3c86;stroke-width:3.75000024;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1"
+       id="rect5963-6-2-9-2-9-1"
+       width="13.937183"
+       height="14.687106"
+       x="439.06488"
+       y="38.706554" />
+    <rect
+       style="display:inline;opacity:1;fill:#828282;fill-opacity:1;stroke:#0c3c86;stroke-width:3.75000024;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1"
+       id="rect5963-6-2-2-2"
+       width="29.59816"
+       height="16.238991"
+       x="423.40393"
+       y="53.839954" />
+    <rect
+       style="display:inline;opacity:1;fill:#828282;fill-opacity:1;stroke:#0c3c86;stroke-width:3.75000024;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1"
+       id="rect5963-6-2-9-8-7"
+       width="28.496183"
+       height="14.78988"
+       x="381.61374"
+       y="70.550835" />
+    <rect
+       style="display:inline;opacity:1;fill:#828282;fill-opacity:1;stroke:#0c3c86;stroke-width:3.75000024;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1"
+       id="rect5963-6-2-9-2-97-0"
+       width="13.931359"
+       height="14.957036"
+       x="367.83014"
+       y="70.467255" />
+    <rect
+       style="display:inline;opacity:1;fill:#828282;fill-opacity:1;stroke:#0c3c86;stroke-width:3.75000024;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1"
+       id="rect5963-6-2-9-3-3-9"
+       width="28.496183"
+       height="14.78988"
+       x="410.12061"
+       y="70.550835" />
+    <rect
+       style="display:inline;opacity:1;fill:#828282;fill-opacity:1;stroke:#0c3c86;stroke-width:3.75000024;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1"
+       id="rect5963-6-2-9-2-9-6-3"
+       width="13.931359"
+       height="14.957036"
+       x="439.04681"
+       y="70.467255" />
+    <rect
+       style="display:inline;opacity:1;fill:#828282;fill-opacity:1;stroke:#0c3c86;stroke-width:3.75000024;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1"
+       id="rect5963-6-2-1-6"
+       width="25.935509"
+       height="16.287457"
+       x="397.43683"
+       y="53.815708" />
+  </g>
+</svg>
diff --git a/src/assets/Network-Icons-SVG/generic-firewall-v1-colour.svg b/src/assets/Network-Icons-SVG/generic-firewall-v1-colour.svg
new file mode 100644
index 0000000..642f031
--- /dev/null
+++ b/src/assets/Network-Icons-SVG/generic-firewall-v1-colour.svg
@@ -0,0 +1,130 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   version="1.1"
+   id="svg4294"
+   viewBox="0 0 158.4562 146.47219"
+   height="41.337704mm"
+   width="44.71986mm">
+  <defs
+     id="defs4296" />
+  <metadata
+     id="metadata4299">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     transform="matrix(1.7359417,0,0,1.7359417,-633.21038,-34.051314)"
+     id="g845">
+    <rect
+       style="opacity:1;fill:#d3453a;fill-opacity:1;stroke:#0c3c86;stroke-width:4.6875;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1"
+       id="rect6782-4-65-3-0-6"
+       width="86.592178"
+       height="79.688713"
+       x="367.10852"
+       y="21.959221"
+       ry="2.1987813" />
+    <rect
+       y="22.200916"
+       x="367.80707"
+       height="16.334656"
+       width="85.19503"
+       id="rect5963-5"
+       style="opacity:1;fill:#828282;fill-opacity:1;stroke:#0c3c86;stroke-width:3.75000024;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1" />
+    <rect
+       y="85.071587"
+       x="367.80707"
+       height="16.334656"
+       width="85.19503"
+       id="rect5963-6-3"
+       style="display:inline;opacity:1;fill:#828282;fill-opacity:1;stroke:#0c3c86;stroke-width:3.75000024;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1" />
+    <rect
+       y="53.839954"
+       x="367.80707"
+       height="16.238991"
+       width="29.59816"
+       id="rect5963-6-2-5"
+       style="display:inline;opacity:1;fill:#828282;fill-opacity:1;stroke:#0c3c86;stroke-width:3.75000024;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1" />
+    <rect
+       y="38.65517"
+       x="381.59357"
+       height="14.78988"
+       width="28.496183"
+       id="rect5963-6-2-9-6"
+       style="display:inline;opacity:1;fill:#828282;fill-opacity:1;stroke:#0c3c86;stroke-width:3.75000024;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1" />
+    <rect
+       y="38.706554"
+       x="367.80707"
+       height="14.687106"
+       width="13.937183"
+       id="rect5963-6-2-9-2-2"
+       style="display:inline;opacity:1;fill:#828282;fill-opacity:1;stroke:#0c3c86;stroke-width:3.75000024;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1" />
+    <rect
+       y="38.65517"
+       x="410.10046"
+       height="14.78988"
+       width="28.496183"
+       id="rect5963-6-2-9-3-9"
+       style="display:inline;opacity:1;fill:#828282;fill-opacity:1;stroke:#0c3c86;stroke-width:3.75000024;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1" />
+    <rect
+       y="38.706554"
+       x="439.06488"
+       height="14.687106"
+       width="13.937183"
+       id="rect5963-6-2-9-2-9-1"
+       style="display:inline;opacity:1;fill:#828282;fill-opacity:1;stroke:#0c3c86;stroke-width:3.75000024;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1" />
+    <rect
+       y="53.839954"
+       x="423.40393"
+       height="16.238991"
+       width="29.59816"
+       id="rect5963-6-2-2-2"
+       style="display:inline;opacity:1;fill:#828282;fill-opacity:1;stroke:#0c3c86;stroke-width:3.75000024;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1" />
+    <rect
+       y="70.550835"
+       x="381.61374"
+       height="14.78988"
+       width="28.496183"
+       id="rect5963-6-2-9-8-7"
+       style="display:inline;opacity:1;fill:#828282;fill-opacity:1;stroke:#0c3c86;stroke-width:3.75000024;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1" />
+    <rect
+       y="70.467255"
+       x="367.83014"
+       height="14.957036"
+       width="13.931359"
+       id="rect5963-6-2-9-2-97-0"
+       style="display:inline;opacity:1;fill:#828282;fill-opacity:1;stroke:#0c3c86;stroke-width:3.75000024;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1" />
+    <rect
+       y="70.550835"
+       x="410.12061"
+       height="14.78988"
+       width="28.496183"
+       id="rect5963-6-2-9-3-3-9"
+       style="display:inline;opacity:1;fill:#828282;fill-opacity:1;stroke:#0c3c86;stroke-width:3.75000024;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1" />
+    <rect
+       y="70.467255"
+       x="439.04681"
+       height="14.957036"
+       width="13.931359"
+       id="rect5963-6-2-9-2-9-6-3"
+       style="display:inline;opacity:1;fill:#828282;fill-opacity:1;stroke:#0c3c86;stroke-width:3.75000024;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1" />
+    <rect
+       y="53.815708"
+       x="397.43683"
+       height="16.287457"
+       width="25.935509"
+       id="rect5963-6-2-1-6"
+       style="display:inline;opacity:1;fill:#828282;fill-opacity:1;stroke:#0c3c86;stroke-width:3.75000024;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1" />
+  </g>
+</svg>
diff --git a/src/assets/Network-Icons-SVG/generic-firewall-v1-mono.svg b/src/assets/Network-Icons-SVG/generic-firewall-v1-mono.svg
new file mode 100644
index 0000000..b28ae04
--- /dev/null
+++ b/src/assets/Network-Icons-SVG/generic-firewall-v1-mono.svg
@@ -0,0 +1,130 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   width="44.719856mm"
+   height="41.337704mm"
+   viewBox="0 0 158.45619 146.47219"
+   id="svg4294"
+   version="1.1">
+  <defs
+     id="defs4296" />
+  <metadata
+     id="metadata4299">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     transform="translate(4.2915344e-6)"
+     id="g869">
+    <rect
+       ry="3.816956"
+       y="4.0686131"
+       x="4.0686092"
+       height="138.33496"
+       width="150.31897"
+       id="rect6782-4-65-3-0-6"
+       style="opacity:1;fill:#fdfdfd;fill-opacity:1;stroke:#2c2c2c;stroke-width:8.13722706;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1" />
+    <rect
+       style="opacity:1;fill:#fdfdfd;fill-opacity:1;stroke:#2c2c2c;stroke-width:6.50978184;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1"
+       id="rect5963-5"
+       width="147.8936"
+       height="28.35601"
+       x="5.2812467"
+       y="4.4881825" />
+    <rect
+       style="display:inline;opacity:1;fill:#fdfdfd;fill-opacity:1;stroke:#2c2c2c;stroke-width:6.50978184;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1"
+       id="rect5963-6-3"
+       width="147.8936"
+       height="28.35601"
+       x="5.2812467"
+       y="113.628" />
+    <rect
+       style="display:inline;opacity:1;fill:#fdfdfd;fill-opacity:1;stroke:#2c2c2c;stroke-width:6.50978184;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1"
+       id="rect5963-6-2-5"
+       width="51.38068"
+       height="28.189941"
+       x="5.2812467"
+       y="59.411709" />
+    <rect
+       style="display:inline;opacity:1;fill:#fdfdfd;fill-opacity:1;stroke:#2c2c2c;stroke-width:6.50978184;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1"
+       id="rect5963-6-2-9-6"
+       width="49.467712"
+       height="25.67437"
+       x="29.213806"
+       y="33.051807" />
+    <rect
+       style="display:inline;opacity:1;fill:#fdfdfd;fill-opacity:1;stroke:#2c2c2c;stroke-width:6.50978184;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1"
+       id="rect5963-6-2-9-2-2"
+       width="24.194138"
+       height="25.49596"
+       x="5.2812467"
+       y="33.141006" />
+    <rect
+       style="display:inline;opacity:1;fill:#fdfdfd;fill-opacity:1;stroke:#2c2c2c;stroke-width:6.50978184;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1"
+       id="rect5963-6-2-9-3-9"
+       width="49.467712"
+       height="25.67437"
+       x="78.700119"
+       y="33.051807" />
+    <rect
+       style="display:inline;opacity:1;fill:#fdfdfd;fill-opacity:1;stroke:#2c2c2c;stroke-width:6.50978184;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1"
+       id="rect5963-6-2-9-2-9-1"
+       width="24.194138"
+       height="25.49596"
+       x="128.98065"
+       y="33.141006" />
+    <rect
+       style="display:inline;opacity:1;fill:#fdfdfd;fill-opacity:1;stroke:#2c2c2c;stroke-width:6.50978184;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1"
+       id="rect5963-6-2-2-2"
+       width="51.38068"
+       height="28.189941"
+       x="101.79416"
+       y="59.411709" />
+    <rect
+       style="display:inline;opacity:1;fill:#fdfdfd;fill-opacity:1;stroke:#2c2c2c;stroke-width:6.50978184;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1"
+       id="rect5963-6-2-9-8-7"
+       width="49.467712"
+       height="25.67437"
+       x="29.248823"
+       y="88.420822" />
+    <rect
+       style="display:inline;opacity:1;fill:#fdfdfd;fill-opacity:1;stroke:#2c2c2c;stroke-width:6.50978184;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1"
+       id="rect5963-6-2-9-2-97-0"
+       width="24.184027"
+       height="25.964542"
+       x="5.3212972"
+       y="88.275734" />
+    <rect
+       style="display:inline;opacity:1;fill:#fdfdfd;fill-opacity:1;stroke:#2c2c2c;stroke-width:6.50978184;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1"
+       id="rect5963-6-2-9-3-3-9"
+       width="49.467712"
+       height="25.67437"
+       x="78.735085"
+       y="88.420822" />
+    <rect
+       style="display:inline;opacity:1;fill:#fdfdfd;fill-opacity:1;stroke:#2c2c2c;stroke-width:6.50978184;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1"
+       id="rect5963-6-2-9-2-9-6-3"
+       width="24.184027"
+       height="25.964542"
+       x="128.9493"
+       y="88.275734" />
+    <rect
+       style="display:inline;opacity:1;fill:#fdfdfd;fill-opacity:1;stroke:#2c2c2c;stroke-width:6.50978184;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1"
+       id="rect5963-6-2-1-6"
+       width="45.02253"
+       height="28.274075"
+       x="56.716785"
+       y="59.369617" />
+  </g>
+</svg>
diff --git a/src/assets/Network-Icons-SVG/generic-firewall-v2-colour-3d.svg b/src/assets/Network-Icons-SVG/generic-firewall-v2-colour-3d.svg
new file mode 100644
index 0000000..70c7d7b
--- /dev/null
+++ b/src/assets/Network-Icons-SVG/generic-firewall-v2-colour-3d.svg
@@ -0,0 +1,152 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   version="1.1"
+   id="svg7778"
+   viewBox="0 0 257.79912 103.13295"
+   height="29.106411mm"
+   width="72.756638mm">
+  <defs
+     id="defs7780" />
+  <metadata
+     id="metadata7783">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <rect
+     ry="1.058059"
+     y="143.99146"
+     x="178.69905"
+     height="44.737236"
+     width="114.87411"
+     id="rect4136-2-3-3-1-5"
+     style="opacity:1;fill:#d3453a;fill-opacity:1;stroke:#2c2c2c;stroke-width:2.87683558;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:2;stroke-dasharray:none;stroke-opacity:1"
+     transform="matrix(0.873861,-0.48617585,5.1650651e-8,1,0,0)" />
+  <rect
+     ry="0.92879671"
+     y="56.750698"
+     x="1.663313"
+     height="44.718945"
+     width="153.66602"
+     id="rect4136-2-3-3-1"
+     style="opacity:1;fill:#d3453a;fill-opacity:1;stroke:#2c2c2c;stroke-width:3.32662606;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:2;stroke-dasharray:none;stroke-opacity:1" />
+  <g
+     id="g70"
+     transform="matrix(1.7449076,0,-1.1901581,0.66860356,-209.97425,-76.364166)">
+    <rect
+       style="opacity:1;fill:#d3453a;fill-opacity:1;stroke:#2c2c2c;stroke-width:4.68749952;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1"
+       id="rect6782-4-65-3-0-6"
+       width="86.592171"
+       height="79.688713"
+       x="257.57465"
+       y="116.55817"
+       ry="0.23402384" />
+    <g
+       id="g931-3"
+       transform="translate(-228.41943,39.673689)"
+       style="stroke:#2c2c2c;stroke-opacity:1">
+      <rect
+         style="opacity:1;fill:#d3453a;fill-opacity:1;stroke:#2c2c2c;stroke-width:3.75000024;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1"
+         id="rect5963-5"
+         width="85.19503"
+         height="16.334656"
+         x="486.69263"
+         y="77.126175" />
+      <rect
+         style="display:inline;opacity:1;fill:#d3453a;fill-opacity:1;stroke:#2c2c2c;stroke-width:3.75000024;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1"
+         id="rect5963-6-3"
+         width="85.19503"
+         height="16.334656"
+         x="486.69263"
+         y="139.99684" />
+      <rect
+         style="display:inline;opacity:1;fill:#d3453a;fill-opacity:1;stroke:#2c2c2c;stroke-width:3.75000024;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1"
+         id="rect5963-6-2-5"
+         width="29.59816"
+         height="16.238991"
+         x="486.69263"
+         y="108.76521" />
+      <rect
+         style="display:inline;opacity:1;fill:#d3453a;fill-opacity:1;stroke:#2c2c2c;stroke-width:3.75000024;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1"
+         id="rect5963-6-2-9-6"
+         width="28.496183"
+         height="14.78988"
+         x="500.47913"
+         y="93.580429" />
+      <rect
+         style="display:inline;opacity:1;fill:#d3453a;fill-opacity:1;stroke:#2c2c2c;stroke-width:3.75000024;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1"
+         id="rect5963-6-2-9-2-2"
+         width="13.937183"
+         height="14.687106"
+         x="486.69263"
+         y="93.631813" />
+      <rect
+         style="display:inline;opacity:1;fill:#d3453a;fill-opacity:1;stroke:#2c2c2c;stroke-width:3.75000024;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1"
+         id="rect5963-6-2-9-3-9"
+         width="28.496183"
+         height="14.78988"
+         x="528.98602"
+         y="93.580429" />
+      <rect
+         style="display:inline;opacity:1;fill:#d3453a;fill-opacity:1;stroke:#2c2c2c;stroke-width:3.75000024;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1"
+         id="rect5963-6-2-9-2-9-1"
+         width="13.937183"
+         height="14.687106"
+         x="557.95044"
+         y="93.631813" />
+      <rect
+         style="display:inline;opacity:1;fill:#d3453a;fill-opacity:1;stroke:#2c2c2c;stroke-width:3.75000024;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1"
+         id="rect5963-6-2-2-2"
+         width="29.59816"
+         height="16.238991"
+         x="542.28949"
+         y="108.76521" />
+      <rect
+         style="display:inline;opacity:1;fill:#d3453a;fill-opacity:1;stroke:#2c2c2c;stroke-width:3.75000024;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1"
+         id="rect5963-6-2-9-8-7"
+         width="28.496183"
+         height="14.78988"
+         x="500.4993"
+         y="125.47609" />
+      <rect
+         style="display:inline;opacity:1;fill:#d3453a;fill-opacity:1;stroke:#2c2c2c;stroke-width:3.75000024;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1"
+         id="rect5963-6-2-9-2-97-0"
+         width="13.931359"
+         height="14.957036"
+         x="486.7157"
+         y="125.39251" />
+      <rect
+         style="display:inline;opacity:1;fill:#d3453a;fill-opacity:1;stroke:#2c2c2c;stroke-width:3.75000024;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1"
+         id="rect5963-6-2-9-3-3-9"
+         width="28.496183"
+         height="14.78988"
+         x="529.00616"
+         y="125.47609" />
+      <rect
+         style="display:inline;opacity:1;fill:#d3453a;fill-opacity:1;stroke:#2c2c2c;stroke-width:3.75000024;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1"
+         id="rect5963-6-2-9-2-9-6-3"
+         width="13.931359"
+         height="14.957036"
+         x="557.93237"
+         y="125.39251" />
+      <rect
+         style="display:inline;opacity:1;fill:#d3453a;fill-opacity:1;stroke:#2c2c2c;stroke-width:3.75000024;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1"
+         id="rect5963-6-2-1-6"
+         width="25.935509"
+         height="16.287457"
+         x="516.32239"
+         y="108.74097" />
+    </g>
+  </g>
+</svg>
diff --git a/src/assets/Network-Icons-SVG/generic-firewall-v2-colour.svg b/src/assets/Network-Icons-SVG/generic-firewall-v2-colour.svg
new file mode 100644
index 0000000..575b40e
--- /dev/null
+++ b/src/assets/Network-Icons-SVG/generic-firewall-v2-colour.svg
@@ -0,0 +1,135 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   width="44.763035mm"
+   height="41.305332mm"
+   viewBox="0 0 158.60918 146.35749"
+   id="svg4294"
+   version="1.1">
+  <defs
+     id="defs4296" />
+  <metadata
+     id="metadata4299">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     id="g70"
+     transform="matrix(1.7376179,0,0,1.7345823,-443.49377,-198.11431)">
+    <rect
+       style="opacity:1;fill:#d3453a;fill-opacity:1;stroke:#2c2c2c;stroke-width:4.68749952;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1"
+       id="rect6782-4-65-3-0-6"
+       width="86.592171"
+       height="79.688713"
+       x="257.57465"
+       y="116.55817"
+       ry="2.1987813" />
+    <g
+       id="g931-3"
+       transform="translate(-228.41943,39.673689)"
+       style="stroke:#2c2c2c;stroke-opacity:1">
+      <rect
+         style="opacity:1;fill:#d3453a;fill-opacity:1;stroke:#2c2c2c;stroke-width:3.75000024;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1"
+         id="rect5963-5"
+         width="85.19503"
+         height="16.334656"
+         x="486.69263"
+         y="77.126175" />
+      <rect
+         style="display:inline;opacity:1;fill:#d3453a;fill-opacity:1;stroke:#2c2c2c;stroke-width:3.75000024;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1"
+         id="rect5963-6-3"
+         width="85.19503"
+         height="16.334656"
+         x="486.69263"
+         y="139.99684" />
+      <rect
+         style="display:inline;opacity:1;fill:#d3453a;fill-opacity:1;stroke:#2c2c2c;stroke-width:3.75000024;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1"
+         id="rect5963-6-2-5"
+         width="29.59816"
+         height="16.238991"
+         x="486.69263"
+         y="108.76521" />
+      <rect
+         style="display:inline;opacity:1;fill:#d3453a;fill-opacity:1;stroke:#2c2c2c;stroke-width:3.75000024;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1"
+         id="rect5963-6-2-9-6"
+         width="28.496183"
+         height="14.78988"
+         x="500.47913"
+         y="93.580429" />
+      <rect
+         style="display:inline;opacity:1;fill:#d3453a;fill-opacity:1;stroke:#2c2c2c;stroke-width:3.75000024;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1"
+         id="rect5963-6-2-9-2-2"
+         width="13.937183"
+         height="14.687106"
+         x="486.69263"
+         y="93.631813" />
+      <rect
+         style="display:inline;opacity:1;fill:#d3453a;fill-opacity:1;stroke:#2c2c2c;stroke-width:3.75000024;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1"
+         id="rect5963-6-2-9-3-9"
+         width="28.496183"
+         height="14.78988"
+         x="528.98602"
+         y="93.580429" />
+      <rect
+         style="display:inline;opacity:1;fill:#d3453a;fill-opacity:1;stroke:#2c2c2c;stroke-width:3.75000024;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1"
+         id="rect5963-6-2-9-2-9-1"
+         width="13.937183"
+         height="14.687106"
+         x="557.95044"
+         y="93.631813" />
+      <rect
+         style="display:inline;opacity:1;fill:#d3453a;fill-opacity:1;stroke:#2c2c2c;stroke-width:3.75000024;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1"
+         id="rect5963-6-2-2-2"
+         width="29.59816"
+         height="16.238991"
+         x="542.28949"
+         y="108.76521" />
+      <rect
+         style="display:inline;opacity:1;fill:#d3453a;fill-opacity:1;stroke:#2c2c2c;stroke-width:3.75000024;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1"
+         id="rect5963-6-2-9-8-7"
+         width="28.496183"
+         height="14.78988"
+         x="500.4993"
+         y="125.47609" />
+      <rect
+         style="display:inline;opacity:1;fill:#d3453a;fill-opacity:1;stroke:#2c2c2c;stroke-width:3.75000024;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1"
+         id="rect5963-6-2-9-2-97-0"
+         width="13.931359"
+         height="14.957036"
+         x="486.7157"
+         y="125.39251" />
+      <rect
+         style="display:inline;opacity:1;fill:#d3453a;fill-opacity:1;stroke:#2c2c2c;stroke-width:3.75000024;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1"
+         id="rect5963-6-2-9-3-3-9"
+         width="28.496183"
+         height="14.78988"
+         x="529.00616"
+         y="125.47609" />
+      <rect
+         style="display:inline;opacity:1;fill:#d3453a;fill-opacity:1;stroke:#2c2c2c;stroke-width:3.75000024;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1"
+         id="rect5963-6-2-9-2-9-6-3"
+         width="13.931359"
+         height="14.957036"
+         x="557.93237"
+         y="125.39251" />
+      <rect
+         style="display:inline;opacity:1;fill:#d3453a;fill-opacity:1;stroke:#2c2c2c;stroke-width:3.75000024;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1"
+         id="rect5963-6-2-1-6"
+         width="25.935509"
+         height="16.287457"
+         x="516.32239"
+         y="108.74097" />
+    </g>
+  </g>
+</svg>
diff --git a/src/assets/Network-Icons-SVG/generic-gtm-colour-3d.svg b/src/assets/Network-Icons-SVG/generic-gtm-colour-3d.svg
new file mode 100644
index 0000000..2f7d9a6
--- /dev/null
+++ b/src/assets/Network-Icons-SVG/generic-gtm-colour-3d.svg
@@ -0,0 +1,60 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   version="1.1"
+   id="svg7778"
+   viewBox="0 0 257.79912 103.25225"
+   height="29.140079mm"
+   width="72.756638mm">
+  <defs
+     id="defs7780" />
+  <metadata
+     id="metadata7783">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <rect
+     ry="1.058059"
+     y="144.11075"
+     x="178.69905"
+     height="44.737236"
+     width="114.87411"
+     id="rect4136-2-3-3-1-5"
+     style="opacity:1;fill:#dddddd;fill-opacity:1;stroke:#0c3c86;stroke-width:2.87683558;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:2;stroke-dasharray:none;stroke-opacity:1"
+     transform="matrix(0.873861,-0.48617585,5.1650651e-8,1,0,0)" />
+  <rect
+     ry="0.92879671"
+     y="56.869995"
+     x="1.663313"
+     height="44.718945"
+     width="153.66602"
+     id="rect4136-2-3-3-1"
+     style="opacity:1;fill:#dddddd;fill-opacity:1;stroke:#0c3c86;stroke-width:3.32662606;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:2;stroke-dasharray:none;stroke-opacity:1" />
+  <g
+     transform="matrix(1.0692696,0,-0.69788904,0.38537514,101.97779,0)"
+     id="g844">
+    <rect
+       ry="0"
+       y="2.8232937"
+       x="2.8232937"
+       height="140.58919"
+       width="140.82558"
+       id="rect4136-2-3-3-9"
+       style="opacity:1;fill:#dddddd;fill-opacity:1;stroke:#0c3c86;stroke-width:5.64658737;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:2;stroke-dasharray:none;stroke-opacity:1" />
+    <path
+       style="opacity:1;fill:#104ead;fill-opacity:1;stroke:#0c3c86;stroke-width:2.29441714;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="M 73.218317,21.079846 A 11.143052,11.143052 0 0 0 62.075163,32.223004 11.143052,11.143052 0 0 0 69.723288,42.794367 V 58.241171 A 18.905098,18.905098 0 0 0 56.786943,67.486253 L 41.357049,63.07264 A 11.143052,11.143052 0 0 0 30.227428,52.328722 11.143052,11.143052 0 0 0 19.084273,63.47188 11.143052,11.143052 0 0 0 30.227428,74.615031 11.143052,11.143052 0 0 0 39.408223,69.78526 l 15.120315,4.325648 a 18.905098,18.905098 0 0 0 -0.214844,2.69824 18.905098,18.905098 0 0 0 5.066608,12.856845 l -9.02516,13.888767 a 11.143052,11.143052 0 0 0 -3.807992,-0.68514 11.143052,11.143052 0 0 0 -11.143155,11.14316 11.143052,11.143052 0 0 0 11.143155,11.14315 11.143052,11.143052 0 0 0 11.143155,-11.14315 11.143052,11.143052 0 0 0 -1.827024,-6.107 L 65.0187,93.817389 a 18.905098,18.905098 0 0 0 8.199617,1.89639 18.905098,18.905098 0 0 0 8.537954,-2.040178 l 8.974409,13.810949 a 11.143052,11.143052 0 0 0 -2.126453,6.52823 11.143052,11.143052 0 0 0 11.143155,11.14315 11.143052,11.143052 0 0 0 11.143168,-11.14315 11.143052,11.143052 0 0 0 -11.143168,-11.14316 11.143052,11.143052 0 0 0 -3.337699,0.52442 L 87.30501,89.386861 A 18.905098,18.905098 0 0 0 92.12294,76.809148 18.905098,18.905098 0 0 0 91.892871,73.960347 L 106.97767,69.64485 a 11.143052,11.143052 0 0 0 9.26707,4.970181 A 11.143052,11.143052 0 0 0 127.38789,63.47188 11.143052,11.143052 0 0 0 116.24474,52.328722 11.143052,11.143052 0 0 0 105.13035,62.903473 L 89.563415,67.355994 A 18.905098,18.905098 0 0 0 76.713346,58.241171 V 42.789286 A 11.143052,11.143052 0 0 0 84.361472,32.223004 11.143052,11.143052 0 0 0 73.218317,21.079846 Z"
+       id="path829" />
+  </g>
+</svg>
diff --git a/src/assets/Network-Icons-SVG/generic-gtm-colour.svg b/src/assets/Network-Icons-SVG/generic-gtm-colour.svg
new file mode 100644
index 0000000..6c07ad6
--- /dev/null
+++ b/src/assets/Network-Icons-SVG/generic-gtm-colour.svg
@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   width="41.3377mm"
+   height="41.270985mm"
+   viewBox="0 0 146.47216 146.23577"
+   id="svg4787"
+   version="1.1">
+  <defs
+     id="defs4789" />
+  <metadata
+     id="metadata4792">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     id="g844">
+    <rect
+       ry="8.9952946"
+       y="2.8232937"
+       x="2.8232937"
+       height="140.58919"
+       width="140.82558"
+       id="rect4136-2-3-3"
+       style="opacity:1;fill:#dddddd;fill-opacity:1;stroke:#0c3c86;stroke-width:5.64658737;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:2;stroke-dasharray:none;stroke-opacity:1" />
+    <path
+       style="opacity:1;fill:#104ead;fill-opacity:1;stroke:#0c3c86;stroke-width:2.29441714;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="M 73.218317,21.079846 A 11.143052,11.143052 0 0 0 62.075163,32.223004 11.143052,11.143052 0 0 0 69.723288,42.794367 V 58.241171 A 18.905098,18.905098 0 0 0 56.786943,67.486253 L 41.357049,63.07264 A 11.143052,11.143052 0 0 0 30.227428,52.328722 11.143052,11.143052 0 0 0 19.084273,63.47188 11.143052,11.143052 0 0 0 30.227428,74.615031 11.143052,11.143052 0 0 0 39.408223,69.78526 l 15.120315,4.325648 a 18.905098,18.905098 0 0 0 -0.214844,2.69824 18.905098,18.905098 0 0 0 5.066608,12.856845 l -9.02516,13.888767 a 11.143052,11.143052 0 0 0 -3.807992,-0.68514 11.143052,11.143052 0 0 0 -11.143155,11.14316 11.143052,11.143052 0 0 0 11.143155,11.14315 11.143052,11.143052 0 0 0 11.143155,-11.14315 11.143052,11.143052 0 0 0 -1.827024,-6.107 L 65.0187,93.817389 a 18.905098,18.905098 0 0 0 8.199617,1.89639 18.905098,18.905098 0 0 0 8.537954,-2.040178 l 8.974409,13.810949 a 11.143052,11.143052 0 0 0 -2.126453,6.52823 11.143052,11.143052 0 0 0 11.143155,11.14315 11.143052,11.143052 0 0 0 11.143168,-11.14315 11.143052,11.143052 0 0 0 -11.143168,-11.14316 11.143052,11.143052 0 0 0 -3.337699,0.52442 L 87.30501,89.386861 A 18.905098,18.905098 0 0 0 92.12294,76.809148 18.905098,18.905098 0 0 0 91.892871,73.960347 L 106.97767,69.64485 a 11.143052,11.143052 0 0 0 9.26707,4.970181 A 11.143052,11.143052 0 0 0 127.38789,63.47188 11.143052,11.143052 0 0 0 116.24474,52.328722 11.143052,11.143052 0 0 0 105.13035,62.903473 L 89.563415,67.355994 A 18.905098,18.905098 0 0 0 76.713346,58.241171 V 42.789286 A 11.143052,11.143052 0 0 0 84.361472,32.223004 11.143052,11.143052 0 0 0 73.218317,21.079846 Z"
+       id="path829" />
+  </g>
+</svg>
diff --git a/src/assets/Network-Icons-SVG/generic-gtm-mono.svg b/src/assets/Network-Icons-SVG/generic-gtm-mono.svg
new file mode 100644
index 0000000..ee2b6ee
--- /dev/null
+++ b/src/assets/Network-Icons-SVG/generic-gtm-mono.svg
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   width="41.3377mm"
+   height="41.270985mm"
+   viewBox="0 0 146.47216 146.23577"
+   id="svg4787"
+   version="1.1">
+  <defs
+     id="defs4789" />
+  <metadata
+     id="metadata4792">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <rect
+     style="opacity:1;fill:#fdfdfd;fill-opacity:1;stroke:#2c2c2c;stroke-width:5.64658737;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:2;stroke-dasharray:none;stroke-opacity:1"
+     id="rect4136-2-3-3"
+     width="140.82558"
+     height="140.58919"
+     x="2.8232937"
+     y="2.8232937"
+     ry="8.9952946" />
+  <path
+     id="path829"
+     d="m 73.218247,20.874536 a 11.187016,11.187016 0 0 0 -11.187118,11.187122 11.187016,11.187016 0 0 0 7.6783,10.613071 V 58.182476 A 18.979685,18.979685 0 0 0 56.722045,67.464033 L 41.231274,63.033006 A 11.187016,11.187016 0 0 0 30.057743,52.246701 11.187016,11.187016 0 0 0 18.870624,63.433822 11.187016,11.187016 0 0 0 30.057743,74.620937 11.187016,11.187016 0 0 0 39.27476,69.772111 l 15.17997,4.342714 a 18.979685,18.979685 0 0 0 -0.215692,2.708886 18.979685,18.979685 0 0 0 5.086598,12.907569 l -9.060767,13.94357 a 11.187016,11.187016 0 0 0 -3.823016,-0.68784 11.187016,11.187016 0 0 0 -11.187119,11.18712 11.187016,11.187016 0 0 0 11.187119,11.18711 11.187016,11.187016 0 0 0 11.187118,-11.18711 11.187016,11.187016 0 0 0 -1.834232,-6.1311 L 64.98628,93.899055 a 18.979685,18.979685 0 0 0 8.231967,1.903872 18.979685,18.979685 0 0 0 8.571639,-2.048227 l 9.009816,13.86543 a 11.187016,11.187016 0 0 0 -2.134842,6.554 11.187016,11.187016 0 0 0 11.187118,11.18711 11.187016,11.187016 0 0 0 11.187132,-11.18711 11.187016,11.187016 0 0 0 -11.187132,-11.18712 11.187016,11.187016 0 0 0 -3.350867,0.52648 L 87.360517,89.451047 A 18.979685,18.979685 0 0 0 92.197455,76.823711 18.979685,18.979685 0 0 0 91.966478,73.96367 l 15.144312,-4.332523 a 11.187016,11.187016 0 0 0 9.30363,4.98979 11.187016,11.187016 0 0 0 11.18712,-11.187115 11.187016,11.187016 0 0 0 -11.18712,-11.187121 11.187016,11.187016 0 0 0 -11.15824,10.616471 L 89.627832,67.33326 A 18.979685,18.979685 0 0 0 76.727065,58.182476 V 42.669628 a 11.187016,11.187016 0 0 0 7.6783,-10.60797 11.187016,11.187016 0 0 0 -11.187118,-11.187122 z"
+     style="opacity:1;fill:#3a3a3a;fill-opacity:1;stroke:#2c2c2c;stroke-width:2.30346966;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+</svg>
diff --git a/src/assets/Network-Icons-SVG/generic-router-colour.svg b/src/assets/Network-Icons-SVG/generic-router-colour.svg
new file mode 100644
index 0000000..2a10047
--- /dev/null
+++ b/src/assets/Network-Icons-SVG/generic-router-colour.svg
@@ -0,0 +1,61 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   width="41.337784mm"
+   height="41.333061mm"
+   viewBox="0 0 146.47246 146.45574"
+   id="svg6315"
+   version="1.1">
+  <defs
+     id="defs6317">
+    <linearGradient
+       id="linearGradient819"
+       osb:paint="solid">
+      <stop
+         style="stop-color:#dddddd;stop-opacity:1;"
+         offset="0"
+         id="stop817" />
+    </linearGradient>
+    <linearGradient
+       gradientTransform="matrix(0.99449835,0,0,0.99438474,0.4032344,0.40318833)"
+       xlink:href="#linearGradient819"
+       id="linearGradient821"
+       x1="3.5762787e-06"
+       y1="73.235916"
+       x2="146.47183"
+       y2="73.235916"
+       gradientUnits="userSpaceOnUse" />
+  </defs>
+  <metadata
+     id="metadata6320">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     id="g836">
+    <ellipse
+       cy="73.227867"
+       cx="73.236229"
+       id="path815"
+       style="fill:url(#linearGradient821);fill-opacity:1;stroke:#0c3c86;stroke-width:5.6151762;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1;paint-order:normal;opacity:0.94"
+       rx="70.428482"
+       ry="70.420441" />
+    <path
+       style="opacity:0.93999999;fill:#104ead;fill-opacity:1;stroke:#0c3c86;stroke-width:1.82743692;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+       d="M 33.08893,33.085407 V 66.30168 L 45.089123,54.302878 65.699612,73.227871 45.094895,92.158627 33.08893,80.15406 v 33.21629 h 33.220052 l -12.005955,-12.00464 18.9331,-20.602204 18.92699,20.607914 -12.000209,11.99889 33.218622,-0.002 0.002,-33.214768 L 101.37168,92.163963 80.772686,73.227807 101.37737,54.296763 113.38335,66.301337 V 33.085425 L 80.163271,33.085389 92.169217,45.090009 73.236135,65.692181 54.297616,45.095782 66.309345,33.085425 Z"
+       id="rect827-0-3" />
+  </g>
+</svg>
diff --git a/src/assets/Network-Icons-SVG/generic-router-flat-label-colour.svg b/src/assets/Network-Icons-SVG/generic-router-flat-label-colour.svg
new file mode 100644
index 0000000..70ba721
--- /dev/null
+++ b/src/assets/Network-Icons-SVG/generic-router-flat-label-colour.svg
@@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   version="1.1"
+   id="svg6315"
+   viewBox="0 0 477.15662 123.40902"
+   height="34.828766mm"
+   width="134.6642mm">
+  <defs
+     id="defs6317" />
+  <metadata
+     id="metadata6320">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <rect
+     ry="7.544374"
+     y="2.7482817"
+     x="2.7482817"
+     height="117.91245"
+     width="471.66006"
+     id="rect4136-2-3-9"
+     style="opacity:1;fill:#dddddd;fill-opacity:1;stroke:#0c3c86;stroke-width:5.49656343;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:2;stroke-dasharray:none;stroke-opacity:1" />
+  <rect
+     ry="6.2240515"
+     style="fill:#ffffff;stroke:#0c3c86;stroke-width:3.75000095;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     y="22.093035"
+     x="24.019859"
+     height="79.222946"
+     width="325.79767"
+     id="rect3729-3-6-3" />
+  <path
+     style="fill:#104ead;fill-opacity:1;stroke:#0c3c86;stroke-width:2.01963258;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+     d="m 368.13424,17.337658 v 36.7118 l 13.26153,-13.2615 22.77684,20.91657 -22.77046,20.92294 -13.26791,-13.26787 v 36.711782 h 36.71179 l -13.26789,-13.267922 20.92314,-22.77028 20.91639,22.77659 -13.26154,13.261572 36.71019,-0.002 0.002,-36.710122 -13.27426,13.27419 -22.76408,-20.92894 22.77042,-20.92326 13.26792,13.26788 v -36.71141 l -36.71179,-4e-5 13.26788,13.26793 -20.92312,22.77025 -20.92913,-22.76387 13.27427,-13.27427 z"
+     id="rect827-0-3" />
+</svg>
diff --git a/src/assets/Network-Icons-SVG/generic-router-flat-label-mono.svg b/src/assets/Network-Icons-SVG/generic-router-flat-label-mono.svg
new file mode 100644
index 0000000..daa3868
--- /dev/null
+++ b/src/assets/Network-Icons-SVG/generic-router-flat-label-mono.svg
@@ -0,0 +1,50 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   version="1.1"
+   id="svg6315"
+   viewBox="0 0 477.15662 123.40902"
+   height="34.828766mm"
+   width="134.6642mm">
+  <defs
+     id="defs6317" />
+  <metadata
+     id="metadata6320">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     id="g856">
+    <rect
+       style="opacity:1;fill:#fdfdfd;fill-opacity:1;stroke:#2c2c2c;stroke-width:5.49656343;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:2;stroke-dasharray:none;stroke-opacity:1"
+       id="rect4136-2-3-9"
+       width="471.66006"
+       height="117.91245"
+       x="2.7482817"
+       y="2.7482817"
+       ry="7.544374" />
+    <rect
+       id="rect3729-3-6-3"
+       width="325.79767"
+       height="79.222946"
+       x="24.019859"
+       y="22.093035"
+       style="fill:#fdfdfd;stroke:#2c2c2c;stroke-width:3.75000095;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.98431373;fill-opacity:1"
+       ry="6.2240515" />
+    <path
+       id="rect827-0-3"
+       d="m 368.13424,17.337658 v 36.7118 l 13.26153,-13.2615 22.77684,20.91657 -22.77046,20.92294 -13.26791,-13.26787 v 36.711782 h 36.71179 l -13.26789,-13.267922 20.92314,-22.77028 20.91639,22.77659 -13.26154,13.261572 36.71019,-0.002 0.002,-36.710122 -13.27426,13.27419 -22.76408,-20.92894 22.77042,-20.92326 13.26792,13.26788 v -36.71141 l -36.71179,-4e-5 13.26788,13.26793 -20.92312,22.77025 -20.92913,-22.76387 13.27427,-13.27427 z"
+       style="fill:#3a3a3a;fill-opacity:1;stroke:#2c2c2c;stroke-width:2.01963258;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal" />
+  </g>
+</svg>
diff --git a/src/assets/Network-Icons-SVG/generic-router-mono.svg b/src/assets/Network-Icons-SVG/generic-router-mono.svg
new file mode 100644
index 0000000..4a487e4
--- /dev/null
+++ b/src/assets/Network-Icons-SVG/generic-router-mono.svg
@@ -0,0 +1,61 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   version="1.1"
+   id="svg6315"
+   viewBox="0 0 146.47212 146.45606"
+   height="41.333153mm"
+   width="41.337688mm">
+  <defs
+     id="defs6317">
+    <linearGradient
+       osb:paint="solid"
+       id="linearGradient819">
+      <stop
+         id="stop817"
+         offset="0"
+         style="stop-color:#dddddd;stop-opacity:1;" />
+    </linearGradient>
+    <linearGradient
+       gradientUnits="userSpaceOnUse"
+       y2="73.235916"
+       x2="146.47183"
+       y1="73.235916"
+       x1="3.5762787e-06"
+       id="linearGradient821"
+       xlink:href="#linearGradient819"
+       gradientTransform="matrix(0.99449835,0,0,0.99438474,0.4032344,0.40318833)" />
+  </defs>
+  <metadata
+     id="metadata6320">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     id="g857">
+    <ellipse
+       ry="70.420441"
+       rx="70.428482"
+       style="opacity:1;fill:#fdfdfd;fill-opacity:1;stroke:#2c2c2c;stroke-width:5.6151762;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:3.875;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+       id="path815"
+       cx="73.236069"
+       cy="73.228027" />
+    <path
+       id="rect827-0-3"
+       d="M 33.088769,33.085566 V 66.301839 L 45.088962,54.303037 65.699451,73.22803 45.094734,92.158786 33.088769,80.154219 v 33.216291 h 33.220052 l -12.005955,-12.00464 18.9331,-20.602205 18.92699,20.607915 -12.000209,11.99889 33.218623,-0.002 0.002,-33.214769 L 101.37152,92.164122 80.772525,73.227966 101.37721,54.296922 113.38319,66.301496 V 33.085584 L 80.16311,33.085548 92.169056,45.090168 73.235974,65.69234 54.297455,45.095941 66.309184,33.085584 Z"
+       style="opacity:1;fill:#3a3a3a;fill-opacity:1;stroke:#2c2c2c;stroke-width:1.82743692;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal" />
+  </g>
+</svg>
diff --git a/src/assets/Network-Icons-SVG/generic-router-square-colour-3d.svg b/src/assets/Network-Icons-SVG/generic-router-square-colour-3d.svg
new file mode 100644
index 0000000..624ab70
--- /dev/null
+++ b/src/assets/Network-Icons-SVG/generic-router-square-colour-3d.svg
@@ -0,0 +1,93 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="72.886703mm"
+   height="29.504496mm"
+   viewBox="0 0 258.25999 104.5435"
+   id="svg7778"
+   version="1.1"
+   sodipodi:docname="generic-router-square-colour-3d.svg"
+   inkscape:version="0.92.4 (5da689c313, 2019-01-14)">
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="2971"
+     inkscape:window-height="1654"
+     id="namedview7"
+     showgrid="false"
+     inkscape:zoom="1.5129674"
+     inkscape:cx="190.51907"
+     inkscape:cy="-51.859844"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg7778"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0" />
+  <defs
+     id="defs7780" />
+  <metadata
+     id="metadata7783">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     id="g4743"
+     transform="translate(55.715086,-85.177241)">
+    <g
+       transform="matrix(1.1026301,0,-0.75205069,0.40555211,48.097005,85.177241)"
+       id="g856">
+      <rect
+         ry="10.720011"
+         y="2.8232942"
+         x="2.8232944"
+         height="140.58922"
+         width="140.82561"
+         id="rect4136-2-3-3"
+         style="opacity:1;fill:#dddddd;fill-opacity:1;stroke:#0c3c86;stroke-width:5.6465888;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:2;stroke-dasharray:none;stroke-opacity:1" />
+      <path
+         inkscape:connector-curvature="0"
+         id="rect827-0-3"
+         d="M 18.688663,18.570687 V 63.706329 L 34.993156,47.401867 62.996336,73.117919 35.001,98.841804 18.688663,82.529508 V 127.66515 H 63.824278 L 47.511957,111.35277 73.23609,83.357647 98.951932,111.36053 82.647411,127.6651 l 45.133669,-0.002 0.002,-45.133594 -16.3197,16.319603 L 83.475881,73.117845 111.47117,47.393568 127.78353,63.705874 V 18.570712 l -45.135628,-4.9e-5 16.31231,16.31238 L 73.236102,62.878116 47.504606,34.890887 63.82477,18.570712 Z"
+         style="fill:#104ead;fill-opacity:1;stroke:#0c3c86;stroke-width:2.48305464;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal" />
+    </g>
+    <rect
+       transform="matrix(0.873861,-0.48617585,5.1650651e-8,1,0,0)"
+       style="opacity:1;fill:#dddddd;fill-opacity:1;stroke:#0c3c86;stroke-width:2.87683558;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:2;stroke-dasharray:none;stroke-opacity:1"
+       id="rect4136-2-3-3-1-5"
+       width="114.87411"
+       height="44.737236"
+       x="114.94167"
+       y="199.58194"
+       ry="1.058059" />
+    <rect
+       style="opacity:1;fill:#dddddd;fill-opacity:1;stroke:#0c3c86;stroke-width:3.32662606;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:2;stroke-dasharray:none;stroke-opacity:1"
+       id="rect4136-2-3-3-1"
+       width="153.66602"
+       height="44.718945"
+       x="-54.051773"
+       y="143.33849"
+       ry="0.92879671" />
+  </g>
+</svg>
diff --git a/src/assets/Network-Icons-SVG/generic-router-square-colour.svg b/src/assets/Network-Icons-SVG/generic-router-square-colour.svg
new file mode 100644
index 0000000..e524305
--- /dev/null
+++ b/src/assets/Network-Icons-SVG/generic-router-square-colour.svg
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   width="41.337704mm"
+   height="41.270992mm"
+   viewBox="0 0 146.47219 146.23581"
+   id="svg7778"
+   version="1.1">
+  <defs
+     id="defs7780" />
+  <metadata
+     id="metadata7783">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <rect
+     ry="8.9952965"
+     y="2.8232942"
+     x="2.8232944"
+     height="140.58922"
+     width="140.82561"
+     id="rect4136-2-3-3"
+     style="opacity:1;fill:#dddddd;fill-opacity:1;stroke:#0c3c86;stroke-width:5.6465888;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:2;stroke-dasharray:none;stroke-opacity:1" />
+  <path
+     id="rect827-0-3"
+     d="M 18.688663,18.570687 V 63.706329 L 34.993156,47.401867 62.996336,73.117919 35.001,98.841804 18.688663,82.529508 V 127.66515 H 63.824278 L 47.511957,111.35277 73.23609,83.357647 98.951932,111.36053 82.647411,127.6651 l 45.133669,-0.002 0.002,-45.133594 -16.3197,16.319603 L 83.475881,73.117845 111.47117,47.393568 127.78353,63.705874 V 18.570712 l -45.135628,-4.9e-5 16.31231,16.31238 L 73.236102,62.878116 47.504606,34.890887 63.82477,18.570712 Z"
+     style="fill:#104ead;fill-opacity:1;stroke:#0c3c86;stroke-width:2.48305464;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal" />
+</svg>
diff --git a/src/assets/Network-Icons-SVG/generic-router-square-mono.svg b/src/assets/Network-Icons-SVG/generic-router-square-mono.svg
new file mode 100644
index 0000000..cb9e6ee
--- /dev/null
+++ b/src/assets/Network-Icons-SVG/generic-router-square-mono.svg
@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   width="41.337704mm"
+   height="41.270988mm"
+   viewBox="0 0 146.47219 146.2358"
+   id="svg7778"
+   version="1.1">
+  <defs
+     id="defs7780" />
+  <metadata
+     id="metadata7783">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     id="g865">
+    <rect
+       style="opacity:1;fill:#fdfdfd;fill-opacity:1;stroke:#2c2c2c;stroke-width:5.6465888;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:2;stroke-dasharray:none;stroke-opacity:1"
+       id="rect4136-2-3-3"
+       width="140.82561"
+       height="140.58922"
+       x="2.8232944"
+       y="2.8232942"
+       ry="8.9952965" />
+    <path
+       style="fill:#3a3a3a;fill-opacity:1;stroke:#2c2c2c;stroke-width:2.48305464;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+       d="M 18.688665,18.570684 V 63.706326 L 34.993158,47.401864 62.996338,73.117916 35.001002,98.841801 18.688665,82.529505 V 127.66515 H 63.82428 L 47.511959,111.35277 73.236092,83.357644 98.951934,111.36053 82.647413,127.6651 l 45.133667,-0.002 0.002,-45.133597 -16.3197,16.319603 L 83.475883,73.117842 111.47117,47.393565 127.78353,63.705871 V 18.570709 L 82.647904,18.57066 98.960214,34.88304 73.236104,62.878113 47.504608,34.890884 63.824772,18.570709 Z"
+       id="rect827-0-3" />
+  </g>
+</svg>
diff --git a/src/assets/Network-Icons-SVG/generic-server-1.svg b/src/assets/Network-Icons-SVG/generic-server-1.svg
new file mode 100644
index 0000000..3eb614e
--- /dev/null
+++ b/src/assets/Network-Icons-SVG/generic-server-1.svg
@@ -0,0 +1,103 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   id="svg8"
+   version="1.1"
+   viewBox="0 0 135.22932 37.519578"
+   height="37.519577mm"
+   width="135.22932mm">
+  <defs
+     id="defs2">
+    <filter
+       id="filter4183"
+       style="color-interpolation-filters:sRGB">
+      <feBlend
+         id="feBlend4185"
+         in2="BackgroundImage"
+         mode="lighten" />
+    </filter>
+    <filter
+       id="filter4183-4"
+       style="color-interpolation-filters:sRGB">
+      <feBlend
+         id="feBlend4185-6"
+         in2="BackgroundImage"
+         mode="lighten" />
+    </filter>
+    <filter
+       id="filter4326"
+       style="color-interpolation-filters:sRGB">
+      <feBlend
+         id="feBlend4328"
+         in2="BackgroundImage"
+         mode="lighten" />
+    </filter>
+  </defs>
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     transform="translate(-19.178164,-127.42057)"
+     id="layer1">
+    <g
+       id="g1188">
+      <g
+         id="g1136">
+        <rect
+           y="130.76498"
+           x="22.522587"
+           height="30.830734"
+           width="128.54048"
+           id="rect826"
+           style="opacity:1;fill:#b9b9b9;fill-opacity:1;stroke:#7e7e7e;stroke-width:6.6888442;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke markers fill" />
+        <rect
+           y="130.76498"
+           x="22.522587"
+           height="30.830734"
+           width="128.54047"
+           id="rect1124"
+           style="opacity:1;fill:none;fill-opacity:1;stroke:#4b4b4b;stroke-width:0.79374999;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke markers fill" />
+      </g>
+      <g
+         id="g1179">
+        <rect
+           ry="0.5021199"
+           y="137.78133"
+           x="139.47626"
+           height="16.798052"
+           width="3.3196149"
+           id="rect828"
+           style="opacity:1;fill:#7e7e7e;fill-opacity:1;stroke:#4b4b4b;stroke-width:1.05833328;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers" />
+        <rect
+           ry="0.5021199"
+           y="137.78133"
+           x="33.307011"
+           height="16.798052"
+           width="3.3196149"
+           id="rect828-7"
+           style="opacity:1;fill:#7e7e7e;fill-opacity:1;stroke:#4b4b4b;stroke-width:1.05833328;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers" />
+        <rect
+           ry="0.50909281"
+           y="140.55286"
+           x="101.06827"
+           height="11.254977"
+           width="29.225002"
+           id="rect828-3-6"
+           style="opacity:1;fill:#7e7e7e;fill-opacity:1;stroke:#4b4b4b;stroke-width:1.05833328;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers" />
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/src/assets/Network-Icons-SVG/generic-server-2.svg b/src/assets/Network-Icons-SVG/generic-server-2.svg
new file mode 100644
index 0000000..f3919fe
--- /dev/null
+++ b/src/assets/Network-Icons-SVG/generic-server-2.svg
@@ -0,0 +1,101 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   width="135.22932mm"
+   height="37.519577mm"
+   viewBox="0 0 135.22932 37.519578"
+   version="1.1"
+   id="svg8">
+  <defs
+     id="defs2">
+    <filter
+       style="color-interpolation-filters:sRGB"
+       id="filter4183">
+      <feBlend
+         mode="lighten"
+         in2="BackgroundImage"
+         id="feBlend4185" />
+    </filter>
+    <filter
+       style="color-interpolation-filters:sRGB"
+       id="filter4183-4">
+      <feBlend
+         mode="lighten"
+         in2="BackgroundImage"
+         id="feBlend4185-6" />
+    </filter>
+    <filter
+       style="color-interpolation-filters:sRGB"
+       id="filter4326">
+      <feBlend
+         mode="lighten"
+         in2="BackgroundImage"
+         id="feBlend4328" />
+    </filter>
+  </defs>
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     transform="translate(-19.178165,-127.42056)"
+     id="g1136">
+    <rect
+       style="opacity:1;fill:#b9b9b9;fill-opacity:1;stroke:#7e7e7e;stroke-width:6.6888442;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke markers fill"
+       id="rect826"
+       width="128.54048"
+       height="30.830734"
+       x="22.522587"
+       y="130.76498" />
+    <rect
+       style="opacity:1;fill:none;fill-opacity:1;stroke:#4b4b4b;stroke-width:0.79374999;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke markers fill"
+       id="rect1124"
+       width="128.54047"
+       height="30.830734"
+       x="22.522587"
+       y="130.76498" />
+  </g>
+  <g
+     transform="translate(-7.2053528e-7,7.9711151e-6)"
+     id="g895">
+    <g
+       id="g889">
+      <rect
+         transform="matrix(-0.00585336,0.99998287,-0.99999753,-0.00222174,0,0)"
+         ry="0.81501383"
+         y="-38.33847"
+         x="11.609586"
+         height="27.265688"
+         width="3.3196502"
+         id="rect828-7"
+         style="opacity:1;fill:#7e7e7e;fill-opacity:1;stroke:#4b4b4b;stroke-width:1.34835279;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers" />
+      <rect
+         transform="matrix(-0.00585336,0.99998287,-0.99999753,-0.00222174,0,0)"
+         ry="0.81501383"
+         y="-38.402103"
+         x="22.481047"
+         height="27.265688"
+         width="3.3196502"
+         id="rect828-7-3"
+         style="opacity:1;fill:#7e7e7e;fill-opacity:1;stroke:#4b4b4b;stroke-width:1.34835279;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers" />
+    </g>
+    <circle
+       style="opacity:1;fill:#7e7e7e;fill-opacity:1;stroke:#4b4b4b;stroke-width:1.34831667;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke markers fill"
+       id="path883"
+       cx="108.63422"
+       cy="18.759781"
+       r="9.0152884" />
+  </g>
+</svg>
diff --git a/src/assets/Network-Icons-SVG/generic-server-3.svg b/src/assets/Network-Icons-SVG/generic-server-3.svg
new file mode 100644
index 0000000..ad4bb5b
--- /dev/null
+++ b/src/assets/Network-Icons-SVG/generic-server-3.svg
@@ -0,0 +1,96 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   id="svg8"
+   version="1.1"
+   viewBox="0 0 135.22932 37.519578"
+   height="37.519577mm"
+   width="135.22932mm">
+  <defs
+     id="defs2">
+    <filter
+       id="filter4183"
+       style="color-interpolation-filters:sRGB">
+      <feBlend
+         id="feBlend4185"
+         in2="BackgroundImage"
+         mode="lighten" />
+    </filter>
+    <filter
+       id="filter4183-4"
+       style="color-interpolation-filters:sRGB">
+      <feBlend
+         id="feBlend4185-6"
+         in2="BackgroundImage"
+         mode="lighten" />
+    </filter>
+    <filter
+       id="filter4326"
+       style="color-interpolation-filters:sRGB">
+      <feBlend
+         id="feBlend4328"
+         in2="BackgroundImage"
+         mode="lighten" />
+    </filter>
+  </defs>
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <rect
+     style="opacity:1;fill:#b9b9b9;fill-opacity:1;stroke:#7e7e7e;stroke-width:6.6888442;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke markers fill"
+     id="rect826"
+     width="128.54048"
+     height="30.830734"
+     x="3.3444219"
+     y="3.3444242" />
+  <rect
+     style="opacity:1;fill:none;fill-opacity:1;stroke:#4b4b4b;stroke-width:0.79374999;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke markers fill"
+     id="rect1124"
+     width="128.54047"
+     height="30.830734"
+     x="3.3444219"
+     y="3.3444242" />
+  <circle
+     style="opacity:1;fill:#7e7e7e;fill-opacity:1;stroke:#4b4b4b;stroke-width:1.05833328;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke markers fill"
+     id="path883"
+     cx="18.259447"
+     cy="18.75979"
+     r="5.3082652" />
+  <rect
+     ry="0.5021199"
+     y="10.360765"
+     x="121.69202"
+     height="16.798052"
+     width="3.3196146"
+     id="rect828-3"
+     style="opacity:1;fill:#7e7e7e;fill-opacity:1;stroke:#4b4b4b;stroke-width:1.05833328;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers" />
+  <rect
+     ry="0.5021199"
+     y="10.360765"
+     x="112.44859"
+     height="16.798052"
+     width="3.3196146"
+     id="rect828-3-5"
+     style="opacity:1;fill:#7e7e7e;fill-opacity:1;stroke:#4b4b4b;stroke-width:1.05833328;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers" />
+  <rect
+     ry="0.5021199"
+     y="10.360765"
+     x="103.20518"
+     height="16.798052"
+     width="3.3196146"
+     id="rect828-3-5-6"
+     style="opacity:1;fill:#7e7e7e;fill-opacity:1;stroke:#4b4b4b;stroke-width:1.05833333;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers" />
+</svg>
diff --git a/src/assets/Network-Icons-SVG/generic-switch-flat-l2-label-v1-colour.svg b/src/assets/Network-Icons-SVG/generic-switch-flat-l2-label-v1-colour.svg
new file mode 100644
index 0000000..9d3c1cb
--- /dev/null
+++ b/src/assets/Network-Icons-SVG/generic-switch-flat-l2-label-v1-colour.svg
@@ -0,0 +1,55 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   version="1.1"
+   id="svg7778"
+   viewBox="0 0 477.15661 123.40902"
+   height="34.828766mm"
+   width="134.6642mm">
+  <defs
+     id="defs7780" />
+  <metadata
+     id="metadata7783">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <rect
+     style="opacity:1;fill:#dddddd;fill-opacity:1;stroke:#0c3c86;stroke-width:5.49656296;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:2;stroke-dasharray:none;stroke-opacity:1"
+     id="rect4136-2-3-3"
+     width="471.66006"
+     height="117.91245"
+     x="2.7482815"
+     y="2.7482815"
+     ry="7.5443735" />
+  <rect
+     id="rect3729-3-6"
+     width="325.79764"
+     height="79.222939"
+     x="24.019842"
+     y="22.093039"
+     style="fill:#ffffff;stroke:#0c3c86;stroke-width:3.75000048;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     ry="6.2240515" />
+  <g
+     transform="matrix(0.94393867,0,0,1.0236306,-115.55316,-88.777415)"
+     id="g884">
+    <path
+       style="fill:#104ead;fill-opacity:1;stroke:#0c3c86;stroke-width:1.65750003;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+       d="m 567.41048,109.59324 38.10242,16.66714 -38.10242,16.66714 -0.22522,-0.0981 10e-6,-12.87097 -55.58533,0.89664 v -9.18932 l 55.58533,0.89654 -10e-6,-12.87087 z"
+       id="rect854" />
+    <path
+       style="fill:#104ead;fill-opacity:1;stroke:#0c3c86;stroke-width:1.65749991;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+       d="m 549.70223,151.08855 -38.10242,16.66714 38.10242,16.66714 0.22522,-0.0981 -10e-6,-12.87097 55.58533,0.89664 v -9.18932 l -55.58533,0.89654 10e-6,-12.87087 z"
+       id="rect854-6" />
+  </g>
+</svg>
diff --git a/src/assets/Network-Icons-SVG/generic-switch-flat-l2-label-v1-mono.svg b/src/assets/Network-Icons-SVG/generic-switch-flat-l2-label-v1-mono.svg
new file mode 100644
index 0000000..3a93303
--- /dev/null
+++ b/src/assets/Network-Icons-SVG/generic-switch-flat-l2-label-v1-mono.svg
@@ -0,0 +1,54 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   width="134.6642mm"
+   height="34.828766mm"
+   viewBox="0 0 477.15661 123.40902"
+   id="svg7778"
+   version="1.1">
+  <defs
+     id="defs7780" />
+  <metadata
+     id="metadata7783">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     id="g888">
+    <rect
+       style="opacity:1;fill:#fdfdfd;fill-opacity:1;stroke:#2c2c2c;stroke-width:5.49656296;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:2;stroke-dasharray:none;stroke-opacity:1"
+       id="rect4136-2-3-3"
+       width="471.66006"
+       height="117.91245"
+       x="2.7482815"
+       y="2.7482815"
+       ry="7.5443735" />
+    <rect
+       id="rect3729-3-6"
+       width="325.79764"
+       height="79.222939"
+       x="24.019842"
+       y="22.093039"
+       style="fill:#fdfdfd;stroke:#2c2c2c;stroke-width:3.75000048;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;fill-opacity:1"
+       ry="6.2240515" />
+    <path
+       id="rect854"
+       d="m 420.04753,23.405579 35.96635,17.060995 -35.96635,17.060994 -0.21259,-0.100418 10e-6,-13.175119 -52.46914,0.917828 V 35.76339 l 52.46914,0.917726 -10e-6,-13.175016 z"
+       style="fill:#2c2c2c;fill-opacity:1;stroke:#3a3a3a;stroke-width:1.62928498;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal" />
+    <path
+       id="rect854-6"
+       d="m 403.33203,65.881448 -35.96635,17.060995 35.96635,17.060997 0.2126,-0.100421 -10e-6,-13.175119 52.46914,0.917828 v -9.406469 l -52.46914,0.917726 10e-6,-13.175016 z"
+       style="fill:#2c2c2c;fill-opacity:1;stroke:#3a3a3a;stroke-width:1.62928486;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal" />
+  </g>
+</svg>
diff --git a/src/assets/Network-Icons-SVG/generic-switch-flat-l2-label-v2-colour.svg b/src/assets/Network-Icons-SVG/generic-switch-flat-l2-label-v2-colour.svg
new file mode 100644
index 0000000..03f7ef9
--- /dev/null
+++ b/src/assets/Network-Icons-SVG/generic-switch-flat-l2-label-v2-colour.svg
@@ -0,0 +1,54 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   width="134.6642mm"
+   height="34.828766mm"
+   viewBox="0 0 477.15661 123.40902"
+   id="svg7778"
+   version="1.1">
+  <defs
+     id="defs7780" />
+  <metadata
+     id="metadata7783">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     id="g844">
+    <rect
+       style="opacity:1;fill:#dddddd;fill-opacity:1;stroke:#0c3c86;stroke-width:5.49656296;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:2;stroke-dasharray:none;stroke-opacity:1"
+       id="rect4136-2-3-3"
+       width="471.66006"
+       height="117.91245"
+       x="2.7482815"
+       y="2.7482815"
+       ry="7.5443735" />
+    <rect
+       id="rect3729-3-6"
+       width="325.79764"
+       height="79.222939"
+       x="24.019842"
+       y="22.093039"
+       style="fill:#fdfdfd;fill-opacity:1;stroke:#0c3c86;stroke-width:3.75000048;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       ry="6.2240515" />
+    <path
+       style="fill:#104ead;fill-opacity:1;stroke:#0c3c86;stroke-width:1.91971529;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:2;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+       d="m 435.4315,16.179916 c -2.89757,1.181198 -4.70595,3.158544 -5.80688,5.652746 l 12.36279,14.579769 -74.60561,-0.470416 c -1.07179,2.989684 -1.23701,6.076513 0,9.313602 L 442.00481,44.785201 429.50292,59.3215 c 1.02042,2.912039 3.03455,4.708568 5.76921,5.696216 l 20.93112,-24.340497 z"
+       id="rect864" />
+    <path
+       style="fill:#104ead;fill-opacity:1;stroke:#0c3c86;stroke-width:1.91971529;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:2;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+       d="m 388.15382,107.2291 c 2.89757,-1.1812 4.70595,-3.15855 5.80688,-5.65275 l -12.36279,-14.579768 74.60561,0.470416 c 1.07179,-2.989683 1.23701,-6.076512 0,-9.313604 l -74.623,0.470415 12.50188,-14.536292 c -1.02041,-2.912047 -3.03454,-4.708573 -5.76921,-5.696216 l -20.93111,24.340495 z"
+       id="rect864-2" />
+  </g>
+</svg>
diff --git a/src/assets/Network-Icons-SVG/generic-switch-flat-l2-label-v2-mono.svg b/src/assets/Network-Icons-SVG/generic-switch-flat-l2-label-v2-mono.svg
new file mode 100644
index 0000000..01e8233
--- /dev/null
+++ b/src/assets/Network-Icons-SVG/generic-switch-flat-l2-label-v2-mono.svg
@@ -0,0 +1,54 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   width="134.6642mm"
+   height="34.828766mm"
+   viewBox="0 0 477.15661 123.40902"
+   id="svg7778"
+   version="1.1">
+  <defs
+     id="defs7780" />
+  <metadata
+     id="metadata7783">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     id="g831">
+    <rect
+       style="opacity:1;fill:#fdfdfd;fill-opacity:1;stroke:#2c2c2c;stroke-width:5.49656296;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:2;stroke-dasharray:none;stroke-opacity:1"
+       id="rect4136-2-3-3"
+       width="471.66006"
+       height="117.91245"
+       x="2.7482815"
+       y="2.7482815"
+       ry="7.5443735" />
+    <rect
+       id="rect3729-3-6"
+       width="325.79764"
+       height="79.222939"
+       x="24.019842"
+       y="22.093039"
+       style="fill:#fdfdfd;stroke:#2c2c2c;stroke-width:3.75000048;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;fill-opacity:1"
+       ry="6.2240515" />
+    <path
+       style="fill:#3a3a3a;fill-opacity:1;stroke:#2c2c2c;stroke-width:1.91971529;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:2;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+       d="m 435.4315,16.179916 c -2.89757,1.181198 -4.70595,3.158544 -5.80688,5.652746 l 12.36279,14.579769 -74.60561,-0.470416 c -1.07179,2.989684 -1.23701,6.076513 0,9.313602 L 442.00481,44.785201 429.50292,59.3215 c 1.02042,2.912039 3.03455,4.708568 5.76921,5.696216 l 20.93112,-24.340497 z"
+       id="rect864" />
+    <path
+       style="fill:#3a3a3a;fill-opacity:1;stroke:#2c2c2c;stroke-width:1.91971529;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:2;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+       d="m 388.15382,107.2291 c 2.89757,-1.1812 4.70595,-3.15855 5.80688,-5.65275 l -12.36279,-14.579768 74.60561,0.470416 c 1.07179,-2.989683 1.23701,-6.076512 0,-9.313604 l -74.623,0.470415 12.50188,-14.536292 c -1.02041,-2.912047 -3.03454,-4.708573 -5.76921,-5.696216 l -20.93111,24.340495 z"
+       id="rect864-2" />
+  </g>
+</svg>
diff --git a/src/assets/Network-Icons-SVG/generic-switch-flat-l3-label-colour.svg b/src/assets/Network-Icons-SVG/generic-switch-flat-l3-label-colour.svg
new file mode 100644
index 0000000..a8552fd
--- /dev/null
+++ b/src/assets/Network-Icons-SVG/generic-switch-flat-l3-label-colour.svg
@@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   width="134.6642mm"
+   height="34.828766mm"
+   viewBox="0 0 477.15661 123.40901"
+   id="svg7778"
+   version="1.1">
+  <defs
+     id="defs7780" />
+  <metadata
+     id="metadata7783">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <rect
+     style="opacity:1;fill:#dddddd;fill-opacity:1;stroke:#0c3c86;stroke-width:5.49656296;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:2;stroke-dasharray:none;stroke-opacity:1"
+     id="rect4136-2-3"
+     width="471.66006"
+     height="117.91245"
+     x="2.7482815"
+     y="2.7482815"
+     ry="7.5443735" />
+  <rect
+     id="rect3729-3-6"
+     width="325.79764"
+     height="79.222939"
+     x="24.019842"
+     y="22.093039"
+     style="fill:#ffffff;stroke:#0c3c86;stroke-width:3.75000048;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     ry="6.2240515" />
+  <path
+     style="fill:#104ead;fill-opacity:1;stroke:#0c3c86;stroke-width:1.45191705;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:2;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+     d="m 385.71018,17.076762 -19.26531,19.174073 h 12.53002 v 12.82604 l 22.30187,12.308744 -22.30187,12.307431 v 12.782713 h -12.53002 l 19.26531,19.174057 19.26529,-19.174057 h -12.07889 v -9.60016 l 18.22455,-10.058382 18.22456,10.058382 v 9.60016 h -12.0789 l 19.2653,19.174057 19.26532,-19.174057 H 443.26606 V 73.69305 L 420.96419,61.384307 443.26606,49.076875 v -12.82604 h 12.53135 l -19.26532,-19.174073 -19.2653,19.174073 h 12.0789 v 9.643491 L 411.12113,55.952703 392.89658,45.894326 v -9.643491 h 12.07889 z"
+     id="rect817-9" />
+</svg>
diff --git a/src/assets/Network-Icons-SVG/generic-switch-flat-l3-label-mono.svg b/src/assets/Network-Icons-SVG/generic-switch-flat-l3-label-mono.svg
new file mode 100644
index 0000000..bddd9ee
--- /dev/null
+++ b/src/assets/Network-Icons-SVG/generic-switch-flat-l3-label-mono.svg
@@ -0,0 +1,50 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   version="1.1"
+   id="svg7778"
+   viewBox="0 0 477.15661 123.40901"
+   height="34.828766mm"
+   width="134.6642mm">
+  <defs
+     id="defs7780" />
+  <metadata
+     id="metadata7783">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     id="g841">
+    <rect
+       style="opacity:1;fill:#fdfdfd;fill-opacity:1;stroke:#2c2c2c;stroke-width:5.49656296;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:2;stroke-dasharray:none;stroke-opacity:1"
+       id="rect4136-2-3"
+       width="471.66006"
+       height="117.91245"
+       x="2.7482815"
+       y="2.7482815"
+       ry="7.5443735" />
+    <rect
+       id="rect3729-3-6"
+       width="325.79764"
+       height="79.222939"
+       x="24.019842"
+       y="22.093039"
+       style="fill:#fdfdfd;stroke:#2c2c2c;stroke-width:3.75000048;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;fill-opacity:1"
+       ry="6.2240515" />
+    <path
+       style="fill:#3a3a3a;fill-opacity:1;stroke:#2c2c2c;stroke-width:1.45191705;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:2;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+       d="m 385.71018,17.076762 -19.26531,19.174073 h 12.53002 v 12.82604 l 22.30187,12.308744 -22.30187,12.307431 v 12.782713 h -12.53002 l 19.26531,19.174057 19.26529,-19.174057 h -12.07889 v -9.60016 l 18.22455,-10.058382 18.22456,10.058382 v 9.60016 h -12.0789 l 19.2653,19.174057 19.26532,-19.174057 H 443.26606 V 73.69305 L 420.96419,61.384307 443.26606,49.076875 v -12.82604 h 12.53135 l -19.26532,-19.174073 -19.2653,19.174073 h 12.0789 v 9.643491 L 411.12113,55.952703 392.89658,45.894326 v -9.643491 h 12.07889 z"
+       id="rect817-9" />
+  </g>
+</svg>
diff --git a/src/assets/Network-Icons-SVG/generic-switch-l2-v1-colour-3d.svg b/src/assets/Network-Icons-SVG/generic-switch-l2-v1-colour-3d.svg
new file mode 100644
index 0000000..b193882
--- /dev/null
+++ b/src/assets/Network-Icons-SVG/generic-switch-l2-v1-colour-3d.svg
@@ -0,0 +1,98 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="72.771095mm"
+   height="29.475048mm"
+   viewBox="0 0 257.85035 104.43915"
+   id="svg7778"
+   version="1.1"
+   sodipodi:docname="generic-switch-l2-v1-colour-3d.svg"
+   inkscape:version="0.92.4 (5da689c313, 2019-01-14)">
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="2017"
+     inkscape:window-height="1713"
+     id="namedview10"
+     showgrid="false"
+     inkscape:zoom="4.279318"
+     inkscape:cx="129.71378"
+     inkscape:cy="38.306915"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg7778"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0" />
+  <defs
+     id="defs7780" />
+  <metadata
+     id="metadata7783">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <rect
+     transform="matrix(0.873861,-0.48617585,5.1650651e-8,1,0,0)"
+     style="opacity:1;fill:#dddddd;fill-opacity:1;stroke:#0c3c86;stroke-width:2.87683558;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:2;stroke-dasharray:none;stroke-opacity:1"
+     id="rect4136-2-3-3-1-5"
+     width="114.87411"
+     height="44.737236"
+     x="178.75769"
+     y="145.32616"
+     ry="1.058059" />
+  <rect
+     style="opacity:1;fill:#dddddd;fill-opacity:1;stroke:#0c3c86;stroke-width:3.32662606;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:2;stroke-dasharray:none;stroke-opacity:1"
+     id="rect4136-2-3-3-1"
+     width="153.66602"
+     height="44.718945"
+     x="1.7145537"
+     y="58.0569"
+     ry="0.92879671" />
+  <g
+     id="g4539"
+     transform="matrix(1.075021,0,-0.72736773,0.40484182,102.99422,9.6521802e-8)">
+    <rect
+       style="opacity:1;fill:#dddddd;fill-opacity:1;stroke:#0c3c86;stroke-width:5.6465888;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:2;stroke-dasharray:none;stroke-opacity:1"
+       id="rect4136-2-3-3"
+       width="140.82561"
+       height="140.58922"
+       x="2.8232944"
+       y="2.8232942"
+       ry="3.8205848" />
+    <g
+       id="g4533"
+       transform="matrix(0.97263932,0,0,1,1.696654,0)">
+      <path
+         style="fill:#104ead;fill-opacity:1;stroke:#0c3c86;stroke-width:1.98120928;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+         d="M 83.819427,28.396005 129.36324,48.318232 83.819427,68.24046 83.550221,68.123201 83.550233,52.738534 17.109105,53.810288 V 42.826296 l 66.441128,1.071634 -1.2e-5,-15.384547 z"
+         id="rect854"
+         inkscape:connector-curvature="0" />
+      <path
+         style="fill:#104ead;fill-opacity:1;stroke:#0c3c86;stroke-width:1.98120916;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+         d="m 62.652761,77.995336 -45.543812,19.922228 45.543812,19.922226 0.269205,-0.11726 -1.2e-5,-15.38466 66.441126,1.07175 V 92.425628 l -66.441126,1.071634 1.2e-5,-15.384547 z"
+         id="rect854-6"
+         inkscape:connector-curvature="0" />
+    </g>
+  </g>
+</svg>
diff --git a/src/assets/Network-Icons-SVG/generic-switch-l2-v1-colour.svg b/src/assets/Network-Icons-SVG/generic-switch-l2-v1-colour.svg
new file mode 100644
index 0000000..96da516
--- /dev/null
+++ b/src/assets/Network-Icons-SVG/generic-switch-l2-v1-colour.svg
@@ -0,0 +1,50 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   width="41.337708mm"
+   height="41.270992mm"
+   viewBox="0 0 146.4722 146.23581"
+   id="svg7778"
+   version="1.1">
+  <defs
+     id="defs7780" />
+  <metadata
+     id="metadata7783">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     id="g4539">
+    <rect
+       style="opacity:1;fill:#dddddd;fill-opacity:1;stroke:#0c3c86;stroke-width:5.6465888;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:2;stroke-dasharray:none;stroke-opacity:1"
+       id="rect4136-2-3-3"
+       width="140.82561"
+       height="140.58922"
+       x="2.8232944"
+       y="2.8232942"
+       ry="8.9952965" />
+    <g
+       id="g4533"
+       transform="matrix(0.97263932,0,0,1,1.696654,0)">
+      <path
+         style="fill:#104ead;fill-opacity:1;stroke:#0c3c86;stroke-width:1.98120928;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+         d="M 83.819427,28.396005 129.36324,48.318232 83.819427,68.24046 83.550221,68.123201 83.550233,52.738534 17.109105,53.810288 V 42.826296 l 66.441128,1.071634 -1.2e-5,-15.384547 z"
+         id="rect854" />
+      <path
+         style="fill:#104ead;fill-opacity:1;stroke:#0c3c86;stroke-width:1.98120916;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+         d="m 62.652761,77.995336 -45.543812,19.922228 45.543812,19.922226 0.269205,-0.11726 -1.2e-5,-15.38466 66.441126,1.07175 V 92.425628 l -66.441126,1.071634 1.2e-5,-15.384547 z"
+         id="rect854-6" />
+    </g>
+  </g>
+</svg>
diff --git a/src/assets/Network-Icons-SVG/generic-switch-l2-v1-mono.svg b/src/assets/Network-Icons-SVG/generic-switch-l2-v1-mono.svg
new file mode 100644
index 0000000..b7d7204
--- /dev/null
+++ b/src/assets/Network-Icons-SVG/generic-switch-l2-v1-mono.svg
@@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   width="41.337708mm"
+   height="41.270992mm"
+   viewBox="0 0 146.4722 146.23581"
+   id="svg7778"
+   version="1.1">
+  <defs
+     id="defs7780" />
+  <metadata
+     id="metadata7783">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     id="g818">
+    <rect
+       style="opacity:1;fill:#fdfdfd;fill-opacity:1;stroke:#2c2c2c;stroke-width:5.6465888;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:2;stroke-dasharray:none;stroke-opacity:1"
+       id="rect4136-2-3-3"
+       width="140.82561"
+       height="140.58922"
+       x="2.8232944"
+       y="2.8232942"
+       ry="8.9952965" />
+    <path
+       id="rect854"
+       d="m 83.222724,28.396005 44.297706,19.922227 -44.297706,19.922228 -0.26184,-0.117259 1.2e-5,-15.384667 -64.623254,1.071754 V 42.826296 l 64.623254,1.071634 -1.2e-5,-15.384547 z"
+       style="fill:#3a3a3a;fill-opacity:1;stroke:#2c2c2c;stroke-width:1.95391774;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal" />
+    <path
+       id="rect854-6"
+       d="m 62.635193,77.995336 -44.297702,19.922228 44.297702,19.922226 0.261839,-0.11726 -1.1e-5,-15.38466 64.623249,1.07175 V 92.425628 l -64.623249,1.071634 1.1e-5,-15.384547 z"
+       style="fill:#3a3a3a;fill-opacity:1;stroke:#2c2c2c;stroke-width:1.95391762;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal" />
+  </g>
+</svg>
diff --git a/src/assets/Network-Icons-SVG/generic-switch-l2-v2-colour-3d.svg b/src/assets/Network-Icons-SVG/generic-switch-l2-v2-colour-3d.svg
new file mode 100644
index 0000000..de6ebb7
--- /dev/null
+++ b/src/assets/Network-Icons-SVG/generic-switch-l2-v2-colour-3d.svg
@@ -0,0 +1,98 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="72.756638mm"
+   height="29.311676mm"
+   viewBox="0 0 257.79912 103.86028"
+   id="svg7778"
+   version="1.1"
+   sodipodi:docname="generic-switch-l2-v2-colour-3d.svg"
+   inkscape:version="0.92.4 (5da689c313, 2019-01-14)">
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="2017"
+     inkscape:window-height="1713"
+     id="namedview10"
+     showgrid="false"
+     inkscape:zoom="2.139659"
+     inkscape:cx="-25.807606"
+     inkscape:cy="63.537409"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg7778"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0" />
+  <defs
+     id="defs7780" />
+  <metadata
+     id="metadata7783">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <rect
+     transform="matrix(0.873861,-0.48617585,5.1650651e-8,1,0,0)"
+     style="opacity:1;fill:#dddddd;fill-opacity:1;stroke:#0c3c86;stroke-width:2.87683558;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:2;stroke-dasharray:none;stroke-opacity:1"
+     id="rect4136-2-3-3-1-5"
+     width="114.87411"
+     height="44.737236"
+     x="178.69905"
+     y="144.71878"
+     ry="1.058059" />
+  <rect
+     style="opacity:1;fill:#dddddd;fill-opacity:1;stroke:#0c3c86;stroke-width:3.32662606;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:2;stroke-dasharray:none;stroke-opacity:1"
+     id="rect4136-2-3-3-1"
+     width="153.66602"
+     height="44.718945"
+     x="1.663313"
+     y="57.478024"
+     ry="0.92879671" />
+  <g
+     id="g4569"
+     transform="matrix(1.083679,0,-0.71270708,0.39467767,101.25302,9.4098496e-8)">
+    <rect
+       ry="3.6705956"
+       y="2.8232942"
+       x="2.8232944"
+       height="140.58922"
+       width="140.82561"
+       id="rect4136-2-3-3-6"
+       style="opacity:1;fill:#dddddd;fill-opacity:1;stroke:#0c3c86;stroke-width:5.6465888;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:2;stroke-dasharray:none;stroke-opacity:1" />
+    <g
+       transform="matrix(0.94639625,0,0,1,3.3122542,4.7325938e-6)"
+       id="g1014">
+      <path
+         style="fill:#104ead;fill-opacity:1;stroke:#0c3c86;stroke-width:2.34375024;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:2;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+         d="m 103.11141,19.426017 c -3.662013,1.393109 -5.947484,3.725199 -7.338869,6.66687 l 15.624389,17.195437 -94.288336,-0.55481 c -1.354551,3.526045 -1.563357,7.166663 0,10.984498 L 111.41891,53.163202 95.618732,70.30737 c 1.289629,3.43447 3.835131,5.553303 7.291268,6.718139 l 26.45324,-28.707277 z"
+         id="rect864"
+         inkscape:connector-curvature="0" />
+      <path
+         style="fill:#104ead;fill-opacity:1;stroke:#0c3c86;stroke-width:2.34375024;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:2;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+         d="m 43.360769,126.80978 c 3.66201,-1.39311 5.94749,-3.7252 7.33887,-6.66687 l -15.62439,-17.19544 94.288331,0.55481 c 1.35455,-3.526043 1.56336,-7.166662 0,-10.984501 l -94.310311,0.55481 15.80018,-17.14416 c -1.28963,-3.43448 -3.83513,-5.55331 -7.29127,-6.71814 l -26.45323,28.707275 z"
+         id="rect864-2"
+         inkscape:connector-curvature="0" />
+    </g>
+  </g>
+</svg>
diff --git a/src/assets/Network-Icons-SVG/generic-switch-l2-v2-colour.svg b/src/assets/Network-Icons-SVG/generic-switch-l2-v2-colour.svg
new file mode 100644
index 0000000..4e2dbfa
--- /dev/null
+++ b/src/assets/Network-Icons-SVG/generic-switch-l2-v2-colour.svg
@@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   version="1.1"
+   id="svg7778"
+   viewBox="0 0 146.4722 146.23581"
+   height="41.270992mm"
+   width="41.337708mm">
+  <defs
+     id="defs7780" />
+  <metadata
+     id="metadata7783">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <rect
+     style="opacity:1;fill:#dddddd;fill-opacity:1;stroke:#0c3c86;stroke-width:5.6465888;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:2;stroke-dasharray:none;stroke-opacity:1"
+     id="rect4136-2-3-3"
+     width="140.82561"
+     height="140.58922"
+     x="2.8232944"
+     y="2.8232942"
+     ry="8.9952965" />
+  <g
+     id="g1014"
+     transform="matrix(0.94639625,0,0,1,3.3122542,4.7325938e-6)">
+    <path
+       id="rect864"
+       d="m 103.11141,19.426017 c -3.662013,1.393109 -5.947484,3.725199 -7.338869,6.66687 l 15.624389,17.195437 -94.288336,-0.55481 c -1.354551,3.526045 -1.563357,7.166663 0,10.984498 L 111.41891,53.163202 95.618732,70.30737 c 1.289629,3.43447 3.835131,5.553303 7.291268,6.718139 l 26.45324,-28.707277 z"
+       style="fill:#104ead;fill-opacity:1;stroke:#0c3c86;stroke-width:2.34375024;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:2;stroke-dasharray:none;stroke-opacity:1;paint-order:normal" />
+    <path
+       id="rect864-2"
+       d="m 43.360769,126.80978 c 3.66201,-1.39311 5.94749,-3.7252 7.33887,-6.66687 l -15.62439,-17.19544 94.288331,0.55481 c 1.35455,-3.526043 1.56336,-7.166662 0,-10.984501 l -94.310311,0.55481 15.80018,-17.14416 c -1.28963,-3.43448 -3.83513,-5.55331 -7.29127,-6.71814 l -26.45323,28.707275 z"
+       style="fill:#104ead;fill-opacity:1;stroke:#0c3c86;stroke-width:2.34375024;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:2;stroke-dasharray:none;stroke-opacity:1;paint-order:normal" />
+  </g>
+</svg>
diff --git a/src/assets/Network-Icons-SVG/generic-switch-l2-v2-mono.svg b/src/assets/Network-Icons-SVG/generic-switch-l2-v2-mono.svg
new file mode 100644
index 0000000..0920f85
--- /dev/null
+++ b/src/assets/Network-Icons-SVG/generic-switch-l2-v2-mono.svg
@@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   version="1.1"
+   id="svg7778"
+   viewBox="0 0 146.47219 146.23581"
+   height="41.270992mm"
+   width="41.337704mm">
+  <defs
+     id="defs7780" />
+  <metadata
+     id="metadata7783">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     id="g818">
+    <rect
+       ry="8.9952965"
+       y="2.8232942"
+       x="2.8232944"
+       height="140.58922"
+       width="140.82561"
+       id="rect4136-2-3-3"
+       style="opacity:1;fill:#fdfdfd;fill-opacity:1;stroke:#2c2c2c;stroke-width:5.6465888;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:2;stroke-dasharray:none;stroke-opacity:1" />
+    <path
+       id="rect864"
+       d="m 100.89651,19.426022 c -3.465719,1.393109 -5.628681,3.725199 -6.945482,6.66687 l 14.786862,17.195437 -89.234127,-0.55481 c -1.281942,3.526045 -1.479555,7.166663 0,10.984498 l 89.254927,-0.55481 -14.953226,17.144168 c 1.2205,3.43447 3.629553,5.553303 6.900426,6.718139 l 25.03525,-28.707277 z"
+       style="fill:#3a3a3a;fill-opacity:1;stroke:#2c2c2c;stroke-width:2.28006816;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:2;stroke-dasharray:none;stroke-opacity:1;paint-order:normal" />
+    <path
+       id="rect864-2"
+       d="m 44.348723,126.80978 c 3.465713,-1.39311 5.628683,-3.7252 6.945479,-6.66687 l -14.786864,-17.19544 89.234122,0.55481 c 1.28194,-3.526038 1.47956,-7.166657 0,-10.984496 l -89.254923,0.55481 14.953231,-17.14416 c -1.220501,-3.43448 -3.629553,-5.55331 -6.900431,-6.71814 L 19.504099,97.917569 Z"
+       style="fill:#3a3a3a;fill-opacity:1;stroke:#2c2c2c;stroke-width:2.28006816;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:2;stroke-dasharray:none;stroke-opacity:1;paint-order:normal" />
+  </g>
+</svg>
diff --git a/src/assets/Network-Icons-SVG/generic-switch-l3-colour-3d.svg b/src/assets/Network-Icons-SVG/generic-switch-l3-colour-3d.svg
new file mode 100644
index 0000000..c4c49bb
--- /dev/null
+++ b/src/assets/Network-Icons-SVG/generic-switch-l3-colour-3d.svg
@@ -0,0 +1,90 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="72.756638mm"
+   height="29.640133mm"
+   viewBox="0 0 257.79912 105.0241"
+   id="svg7778"
+   version="1.1"
+   sodipodi:docname="generic-switch-l3-colour-3d.svg"
+   inkscape:version="0.92.4 (5da689c313, 2019-01-14)">
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="2017"
+     inkscape:window-height="1713"
+     id="namedview10"
+     showgrid="false"
+     inkscape:zoom="3.0259348"
+     inkscape:cx="59.550509"
+     inkscape:cy="46.66651"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg7778"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0" />
+  <defs
+     id="defs7780" />
+  <metadata
+     id="metadata7783">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <rect
+     transform="matrix(0.873861,-0.48617585,5.1650651e-8,1,0,0)"
+     style="opacity:1;fill:#dddddd;fill-opacity:1;stroke:#0c3c86;stroke-width:2.87683558;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:2;stroke-dasharray:none;stroke-opacity:1"
+     id="rect4136-2-3-3-1-5"
+     width="114.87411"
+     height="44.737236"
+     x="178.69905"
+     y="145.8826"
+     ry="1.058059" />
+  <rect
+     style="opacity:1;fill:#dddddd;fill-opacity:1;stroke:#0c3c86;stroke-width:3.32662606;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:2;stroke-dasharray:none;stroke-opacity:1"
+     id="rect4136-2-3-3-1"
+     width="153.66602"
+     height="44.718945"
+     x="1.663313"
+     y="58.641846"
+     ry="0.92879671" />
+  <g
+     id="g4604"
+     transform="matrix(1.0029241,0,0,1.0137029,-0.72937315,0.29811495)">
+    <rect
+       transform="matrix(-1,0,0.87589979,-0.48249307,0,0)"
+       style="opacity:1;fill:#dddddd;fill-opacity:1;stroke:#0c3c86;stroke-width:6.17729044;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:2;stroke-dasharray:none;stroke-opacity:1"
+       id="rect4136-2-3-9-6"
+       width="154.34441"
+       height="115.0015"
+       x="-258.79556"
+       y="-117.48064"
+       ry="6.7772713" />
+    <path
+       style="fill:#104ead;fill-opacity:1;stroke:#0c3c86;stroke-width:1.17734396;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:2;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+       d="M 133.17198,7.3224502 90.163662,16.614411 h 17.001318 l -11.283629,6.215637 19.431619,5.96495 -41.087557,5.964314 -11.245512,6.194637 H 45.978579 l 9.271759,9.291964 43.008318,-9.291964 H 81.869464 l 8.445679,-4.652338 33.576687,-4.8744 15.87909,4.8744 -8.44568,4.652338 h -16.38921 l 9.27176,9.291964 43.00833,-9.291964 h -17.00311 l 11.24552,-6.194637 -19.43163,-5.964949 41.08756,-5.964315 11.28364,-6.215637 h 17.0031 l -9.27177,-9.2919608 -43.00832,9.2919608 h 16.38921 l -8.4838,4.67334 -33.57669,4.874397 -15.87909,-4.874397 8.48381,-4.67334 h 16.38919 z"
+       id="rect817-9"
+       inkscape:connector-curvature="0" />
+  </g>
+</svg>
diff --git a/src/assets/Network-Icons-SVG/generic-switch-l3-colour.svg b/src/assets/Network-Icons-SVG/generic-switch-l3-colour.svg
new file mode 100644
index 0000000..c13ddce
--- /dev/null
+++ b/src/assets/Network-Icons-SVG/generic-switch-l3-colour.svg
@@ -0,0 +1,40 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   version="1.1"
+   id="svg6315"
+   viewBox="0 0 146.47219 146.4722"
+   height="41.337708mm"
+   width="41.337708mm">
+  <defs
+     id="defs6317" />
+  <metadata
+     id="metadata6320">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <rect
+     ry="8.9564304"
+     y="-143.22699"
+     x="-143.22699"
+     height="139.98178"
+     width="139.98178"
+     id="rect4136-2-3-9-6"
+     style="opacity:0.95999995;fill:#dddddd;fill-opacity:1;stroke:#0c3c86;stroke-width:6.49041319;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:2;stroke-dasharray:none;stroke-opacity:1"
+     transform="scale(-1)" />
+  <path
+     id="rect817-9"
+     d="M 41.349312,18.700379 17.641749,42.141822 H 33.061002 V 57.822419 L 60.50529,72.870592 33.061002,87.91716 v 15.62762 H 17.641749 l 23.707563,23.44145 23.707557,-23.44145 H 50.192784 V 91.80802 l 22.426814,-12.29697 22.42682,12.29697 v 11.73676 H 80.182316 l 23.707564,23.44145 23.70757,-23.44145 H 112.17658 V 87.91716 L 84.732289,72.868989 112.17658,57.822419 V 42.141822 h 15.42087 L 103.88988,18.700379 80.182316,42.141822 H 95.046418 V 53.931564 L 72.619598,66.228528 50.192784,53.931564 V 42.141822 h 14.864085 z"
+     style="fill:#104ead;fill-opacity:1;stroke:#0c3c86;stroke-width:1.78086972;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:2;stroke-dasharray:none;stroke-opacity:1;paint-order:normal" />
+</svg>
diff --git a/src/assets/Network-Icons-SVG/generic-switch-l3-mono.svg b/src/assets/Network-Icons-SVG/generic-switch-l3-mono.svg
new file mode 100644
index 0000000..dd8c096
--- /dev/null
+++ b/src/assets/Network-Icons-SVG/generic-switch-l3-mono.svg
@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   width="41.337708mm"
+   height="41.337708mm"
+   viewBox="0 0 146.47219 146.4722"
+   id="svg6315"
+   version="1.1">
+  <defs
+     id="defs6317" />
+  <metadata
+     id="metadata6320">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     transform="translate(-2.1457672e-6,-2.1457672e-6)"
+     id="g873">
+    <rect
+       ry="8.9564304"
+       y="-143.22699"
+       x="-143.22699"
+       height="139.98178"
+       width="139.98178"
+       id="rect4136-2-3-9-6"
+       style="opacity:1;fill:#fdfdfd;fill-opacity:1;stroke:#2c2c2c;stroke-width:6.49041319;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:2;stroke-dasharray:none;stroke-opacity:1"
+       transform="scale(-1)" />
+    <path
+       id="rect817-9"
+       d="M 41.349312,18.700379 17.641749,42.141822 H 33.061002 V 57.822419 L 60.50529,72.870592 33.061002,87.91716 v 15.62762 H 17.641749 l 23.707563,23.44145 23.707557,-23.44145 H 50.192784 V 91.80802 l 22.426814,-12.29697 22.42682,12.29697 v 11.73676 H 80.182316 l 23.707564,23.44145 23.70757,-23.44145 H 112.17658 V 87.91716 L 84.732289,72.868989 112.17658,57.822419 V 42.141822 h 15.42087 L 103.88988,18.700379 80.182316,42.141822 H 95.046418 V 53.931564 L 72.619598,66.228528 50.192784,53.931564 V 42.141822 h 14.864085 z"
+       style="fill:#3a3a3a;fill-opacity:1;stroke:#2c2c2c;stroke-width:1.78086972;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:2;stroke-dasharray:none;stroke-opacity:1;paint-order:normal" />
+  </g>
+</svg>
diff --git a/src/assets/Network-Icons-SVG/juniper-firewall-router.svg b/src/assets/Network-Icons-SVG/juniper-firewall-router.svg
new file mode 100644
index 0000000..f465936
--- /dev/null
+++ b/src/assets/Network-Icons-SVG/juniper-firewall-router.svg
@@ -0,0 +1,147 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   width="57.48357mm"
+   height="57.48357mm"
+   viewBox="0 0 203.68194 203.68194"
+   id="svg4324"
+   version="1.1">
+  <defs
+     id="defs4326" />
+  <metadata
+     id="metadata4329">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     transform="translate(-49.036087,-306.26495)"
+     id="g8453">
+    <circle
+       style="opacity:1;fill:#14517c;fill-opacity:1;stroke:#b2bbc4;stroke-width:7.54238939;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="path4136-6-9"
+       cx="150.87706"
+       cy="408.10593"
+       r="98.069778" />
+    <g
+       id="g8438">
+      <rect
+         y="355.24878"
+         x="85.375725"
+         height="21.071428"
+         width="130.71428"
+         id="rect5963"
+         style="opacity:1;fill:#636468;fill-opacity:1;stroke:#cdc9ca;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+      <rect
+         y="436.35086"
+         x="85.375725"
+         height="21.071428"
+         width="130.71428"
+         id="rect5963-6"
+         style="display:inline;opacity:1;fill:#636468;fill-opacity:1;stroke:#cdc9ca;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+      <rect
+         y="396.0173"
+         x="85.375725"
+         height="20.948023"
+         width="45.4123"
+         id="rect5963-6-2"
+         style="display:inline;opacity:1;fill:#636468;fill-opacity:1;stroke:#cdc9ca;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+      <rect
+         y="376.60226"
+         x="106.52831"
+         height="19.078693"
+         width="43.721542"
+         id="rect5963-6-2-9"
+         style="display:inline;opacity:1;fill:#636468;fill-opacity:1;stroke:#cdc9ca;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+      <rect
+         y="376.4921"
+         x="85.375725"
+         height="18.946117"
+         width="21.383747"
+         id="rect5963-6-2-9-2"
+         style="display:inline;opacity:1;fill:#636468;fill-opacity:1;stroke:#cdc9ca;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+      <rect
+         y="376.60226"
+         x="150.26628"
+         height="19.078693"
+         width="43.721542"
+         id="rect5963-6-2-9-3"
+         style="display:inline;opacity:1;fill:#636468;fill-opacity:1;stroke:#cdc9ca;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+      <rect
+         y="376.34671"
+         x="194.70622"
+         height="18.946117"
+         width="21.383747"
+         id="rect5963-6-2-9-2-9"
+         style="display:inline;opacity:1;fill:#636468;fill-opacity:1;stroke:#cdc9ca;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+      <rect
+         y="395.93546"
+         x="170.67772"
+         height="20.948023"
+         width="45.4123"
+         id="rect5963-6-2-2"
+         style="display:inline;opacity:1;fill:#636468;fill-opacity:1;stroke:#cdc9ca;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+      <rect
+         y="417.62143"
+         x="106.55926"
+         height="19.078693"
+         width="43.721542"
+         id="rect5963-6-2-9-8"
+         style="display:inline;opacity:1;fill:#636468;fill-opacity:1;stroke:#cdc9ca;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+      <rect
+         y="417.51154"
+         x="85.411125"
+         height="19.294323"
+         width="21.374811"
+         id="rect5963-6-2-9-2-97"
+         style="display:inline;opacity:1;fill:#636468;fill-opacity:1;stroke:#cdc9ca;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+      <rect
+         y="417.62143"
+         x="150.29723"
+         height="19.078693"
+         width="43.721542"
+         id="rect5963-6-2-9-3-3"
+         style="display:inline;opacity:1;fill:#636468;fill-opacity:1;stroke:#cdc9ca;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+      <rect
+         y="417.51154"
+         x="194.67851"
+         height="19.294323"
+         width="21.374811"
+         id="rect5963-6-2-9-2-9-6"
+         style="display:inline;opacity:1;fill:#636468;fill-opacity:1;stroke:#cdc9ca;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+      <rect
+         y="396.12723"
+         x="130.83653"
+         height="21.010542"
+         width="39.792713"
+         id="rect5963-6-2-1"
+         style="display:inline;opacity:1;fill:#636468;fill-opacity:1;stroke:#cdc9ca;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+    </g>
+    <path
+       style="opacity:1;fill:#fefefe;fill-opacity:1;stroke:#cdc9ca;stroke-width:0.89999998;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 136.08855,329.56521 -17.11328,26.53906 8.89844,0 0,29.11328 -53.30665,0 0,15.65821 68.83985,0 0,-0.25391 0.125,0 0,-44.51758 8.60156,0 -16.04492,-26.53906 z"
+       id="rect5728-2-3" />
+    <path
+       style="display:inline;opacity:1;fill:#fefefe;fill-opacity:1;stroke:#cdc9ca;stroke-width:0.89999998;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 228.684,393.28831 -26.53906,-17.11328 0,8.89844 -29.11328,0 0,-53.30665 -15.65821,0 0,68.83985 0.25391,0 0,0.125 44.51758,0 0,8.60156 26.53906,-16.04492 z"
+       id="rect5728-7-9-1" />
+    <path
+       style="display:inline;opacity:1;fill:#fefefe;fill-opacity:1;stroke:#cdc9ca;stroke-width:0.89999998;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 164.73461,486.28024 17.11328,-26.53906 -8.89844,0 0,-29.11328 53.30665,0 0,-15.65821 -68.83985,0 0,0.25391 -0.125,0 0,44.51758 -8.60156,0 16.04492,26.53906 z"
+       id="rect5728-7-5-1-9" />
+    <path
+       style="display:inline;opacity:1;fill:#fefefe;fill-opacity:1;stroke:#cdc9ca;stroke-width:0.89999998;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 72.26806,422.83592 26.53906,17.11328 0,-8.89844 29.11328,0 0,53.30665 15.65821,0 0,-68.83985 -0.25391,0 0,-0.125 -44.51758,0 0,-8.60156 -26.53906,16.04492 z"
+       id="rect5728-7-5-3-2-4" />
+  </g>
+</svg>
diff --git a/src/assets/Network-Icons-SVG/juniper-router.svg b/src/assets/Network-Icons-SVG/juniper-router.svg
new file mode 100644
index 0000000..2462287
--- /dev/null
+++ b/src/assets/Network-Icons-SVG/juniper-router.svg
@@ -0,0 +1,54 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   width="57.483578mm"
+   height="57.483578mm"
+   viewBox="0 0 203.68197 203.68197"
+   id="svg4324"
+   version="1.1">
+  <defs
+     id="defs4326" />
+  <metadata
+     id="metadata4329">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     id="g5848-5"
+     style="display:inline"
+     transform="translate(-249.20929,-356.71146)">
+    <circle
+       style="opacity:1;fill:#14517c;fill-opacity:1;stroke:#b2bbc4;stroke-width:7.54238939;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="path4136-6"
+       cx="351.05026"
+       cy="458.55243"
+       r="98.069778" />
+    <path
+       style="opacity:1;fill:#fefefe;fill-opacity:1;stroke:#cdc9ca;stroke-width:0.89999998;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 336.26172,380.01172 -17.11328,26.53906 8.89844,0 0,29.11328 -53.30665,0 0,15.65821 68.83985,0 0,-0.25391 0.125,0 0,-44.51758 8.60156,0 -16.04492,-26.53906 z"
+       id="rect5728-2" />
+    <path
+       style="display:inline;opacity:1;fill:#fefefe;fill-opacity:1;stroke:#cdc9ca;stroke-width:0.89999998;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 428.85717,443.73482 -26.53906,-17.11328 0,8.89844 -29.11328,0 0,-53.30665 -15.65821,0 0,68.83985 0.25391,0 0,0.125 44.51758,0 0,8.60156 26.53906,-16.04492 z"
+       id="rect5728-7-9" />
+    <path
+       style="display:inline;opacity:1;fill:#fefefe;fill-opacity:1;stroke:#cdc9ca;stroke-width:0.89999998;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 364.90778,536.72675 17.11328,-26.53906 -8.89844,0 0,-29.11328 53.30665,0 0,-15.65821 -68.83985,0 0,0.25391 -0.125,0 0,44.51758 -8.60156,0 16.04492,26.53906 z"
+       id="rect5728-7-5-1" />
+    <path
+       style="display:inline;opacity:1;fill:#fefefe;fill-opacity:1;stroke:#cdc9ca;stroke-width:0.89999998;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 272.44123,473.28243 26.53906,17.11328 0,-8.89844 29.11328,0 0,53.30665 15.65821,0 0,-68.83985 -0.25391,0 0,-0.125 -44.51758,0 0,-8.60156 -26.53906,16.04492 z"
+       id="rect5728-7-5-3-2" />
+  </g>
+</svg>
diff --git a/src/assets/Network-Icons-SVG/juniper-switch-l2.svg b/src/assets/Network-Icons-SVG/juniper-switch-l2.svg
new file mode 100644
index 0000000..5ce44d8
--- /dev/null
+++ b/src/assets/Network-Icons-SVG/juniper-switch-l2.svg
@@ -0,0 +1,61 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   version="1.1"
+   id="svg4324"
+   viewBox="0 0 198.4173 198.4173"
+   height="55.997772mm"
+   width="55.997772mm">
+  <defs
+     id="defs4326" />
+  <metadata
+     id="metadata4329">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     transform="translate(1215.6372,-433.15358)"
+     id="layer1">
+    <g
+       transform="translate(-1265.9976,-352.43773)"
+       id="g8879">
+      <rect
+         style="opacity:1;fill:#14517c;fill-opacity:1;stroke:#cdc9ca;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         id="rect5885-1"
+         width="192.4173"
+         height="192.4173"
+         x="53.360394"
+         y="788.59131" />
+      <g
+         id="g8873">
+        <path
+           id="path5466-3-6-7-2-7-6"
+           d="m 143.10147,944.29978 5e-5,-13.2514 -44.213553,0 0.598095,-16.75245 -30.494763,23.51191 28.864338,22.31301 0.567534,-15.82035 44.679569,-1.1e-4 z"
+           style="display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#cdc9ca;stroke-width:1.88790882;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+        <path
+           id="path5466-3-6-7-2-7-0-3"
+           d="m 162.53235,876.57954 5e-5,-13.25143 -44.21357,0 0.59811,-16.75246 -30.494809,23.51191 28.864379,22.31301 0.56754,-15.82035 44.67956,-1e-4 z"
+           style="display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#cdc9ca;stroke-width:1.88790882;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+        <path
+           id="path5466-3-6-7-2-7-0-9-8"
+           d="m 154.23319,829.28522 -1.3e-4,13.25139 44.21365,-3e-5 -0.59815,16.75249 30.49486,-23.5119 -28.86435,-22.31301 -0.56757,15.82035 -44.67962,9e-5 z"
+           style="display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#cdc9ca;stroke-width:1.88790882;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+        <path
+           id="path5466-3-6-7-2-7-0-9-3-5"
+           d="m 138.53484,899.59334 -1.2e-4,13.2514 44.21364,-4e-5 -0.59814,16.75249 30.49485,-23.5119 -28.86434,-22.31302 -0.56757,15.82039 -44.67962,7e-5 z"
+           style="display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#cdc9ca;stroke-width:1.88790882;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/src/assets/Network-Icons-SVG/juniper-switch-l3.svg b/src/assets/Network-Icons-SVG/juniper-switch-l3.svg
new file mode 100644
index 0000000..3303efd
--- /dev/null
+++ b/src/assets/Network-Icons-SVG/juniper-switch-l3.svg
@@ -0,0 +1,54 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   width="55.997772mm"
+   height="55.997772mm"
+   viewBox="0 0 198.4173 198.4173"
+   id="svg4324"
+   version="1.1">
+  <defs
+     id="defs4326" />
+  <metadata
+     id="metadata4329">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <rect
+     y="3.0000002"
+     x="2.9999931"
+     height="192.4173"
+     width="192.4173"
+     id="rect5885"
+     style="opacity:1;fill:#14517c;fill-opacity:1;stroke:#cdc9ca;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+  <g
+     transform="translate(-0.03013873,-1.0166661)"
+     id="g864">
+    <path
+       id="rect5728-2"
+       d="m 84.851301,21.8678 -17.11328,26.53906 h 8.898441 V 77.52014 H 23.329811 v 15.65821 h 68.839848 v -0.25391 h 0.125 V 48.40686 h 8.601561 z"
+       style="opacity:1;fill:#fefefe;fill-opacity:1;stroke:#cdc9ca;stroke-width:0.89999998;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+    <path
+       id="rect5728-7-9"
+       d="M 177.44675,85.5909 150.90769,68.47762 v 8.89844 H 121.79441 V 24.06941 H 106.1362 v 68.83985 h 0.25391 v 0.125 h 44.51758 v 8.60156 z"
+       style="display:inline;opacity:1;fill:#fefefe;fill-opacity:1;stroke:#cdc9ca;stroke-width:0.89999998;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+    <path
+       id="rect5728-7-5-1"
+       d="m 113.49736,178.58283 17.11328,-26.53906 h -8.89844 v -29.11328 h 53.30665 V 107.27228 H 106.179 v 0.25391 h -0.125 v 44.51758 h -8.601561 z"
+       style="display:inline;opacity:1;fill:#fefefe;fill-opacity:1;stroke:#cdc9ca;stroke-width:0.89999998;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+    <path
+       id="rect5728-7-5-3-2"
+       d="m 21.030811,115.13851 26.53906,17.11328 v -8.89844 h 29.11328 V 176.66 h 15.658208 v -68.83985 h -0.25391 v -0.125 H 47.569871 v -8.60156 z"
+       style="display:inline;opacity:1;fill:#fefefe;fill-opacity:1;stroke:#cdc9ca;stroke-width:0.89999998;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+  </g>
+</svg>
diff --git a/src/assets/Network-Icons-SVG/network-icons.svg b/src/assets/Network-Icons-SVG/network-icons.svg
new file mode 100644
index 0000000..4a4274b
--- /dev/null
+++ b/src/assets/Network-Icons-SVG/network-icons.svg
@@ -0,0 +1,2 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="499px" height="735px" viewBox="-0.5 -0.5 499 735" style="background-color: rgb(255, 255, 255);"><defs/><image x="385.5" y="-0.5" width="55" height="56" xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIGlkPSJzdmc0OTY1IiB2aWV3Qm94PSIwIDAgMTk1Ljc0NDgyIDE5Ni43NTAzOCIgaGVpZ2h0PSI1NS41MjczMjhtbSIgd2lkdGg9IjU1LjI0MzUzOG1tIj4mI3hhOyAgPGRlZnMgaWQ9ImRlZnM0OTY3Ii8+JiN4YTsgIDxtZXRhZGF0YSBpZD0ibWV0YWRhdGE0OTcwIj4mI3hhOyAgICA8cmRmOlJERj4mI3hhOyAgICAgIDxjYzpXb3JrIHJkZjphYm91dD0iIj4mI3hhOyAgICAgICAgPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+JiN4YTsgICAgICAgIDxkYzp0eXBlIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiLz4mI3hhOyAgICAgICAgPGRjOnRpdGxlLz4mI3hhOyAgICAgIDwvY2M6V29yaz4mI3hhOyAgICA8L3JkZjpSREY+JiN4YTsgIDwvbWV0YWRhdGE+JiN4YTsgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yNTAuNjk5MDIsLTQxNi44NDQxNikiIGlkPSJsYXllcjEiPiYjeGE7ICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC01NjIuMzM3NDgsMjkyLjc5NjM3KSIgaWQ9Imc0NjgzIj4mI3hhOyAgICAgIDxyZWN0IHN0eWxlPSJmaWxsOiNhMWEyYTM7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiM2MTYxNjE7c3Ryb2tlLXdpZHRoOjUuNTIzMDYwMzI7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiIGlkPSJyZWN0NDM0OS04LTkiIHdpZHRoPSIxOTAuMjIxNzYiIGhlaWdodD0iMTkxLjIyNzMxIiB4PSI4MTUuNzk4MDMiIHk9IjEyNi44MDkzMiIvPiYjeGE7ICAgICAgPHBhdGggc3R5bGU9ImRpc3BsYXk6aW5saW5lO2ZpbGw6IzU0MDBmZjtmaWxsLW9wYWNpdHk6MTtmaWxsLXJ1bGU6ZXZlbm9kZDtzdHJva2U6IzQwMDBjMztzdHJva2Utd2lkdGg6Mi4wMTkyMzA2O3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxIiBkPSJtIDg3OS4zODUwNSwxNDguMzc0NiAtMjQuMTEyMDQsMjEuMzI1MTMgMTcuMDU0MjgsMC40NTUzOSAtMC4wODI2LDMyLjk2NDU5IC0wLjAxMTMsMC4wMSAwLjAxMTMsMC4wMDggMCwwLjEwMjc5IDAuMTQ3NTIsMCAyNy43NTYsMTkuMTUwOTggLTI3LjkxODI3LDE5LjE5MjYyIDAuMDMyNSwwLjAyMjEgLTAuMDE3NywwIDAuMDgyNiwzMy4wODQ1NSAtMTcuMDU0MjgsMC40NTU0IDI0LjExMjA0LDIxLjMyNTEyIDI1LjI5MjI3LC0yMi42MzI1NCAtMTguMDYwNDIsMC40Nzk4NyAtMC4wNzM4LC0yOC41OTY3MiAyMy43NTIwOCwtMTYuMzI4MDUgMjMuODI4NzcsMTYuNDQwNjggMC4wNzA4LDI4Ljg1NjI0IC0xNy4wNTcyNCwwLjQ1NTQgMjQuMTE0OTksMjEuMzI1MTIgMjUuMjkyMjcsLTIyLjYzMjU0IC0xOC4wNjA0MywwLjQ3OTg3IC0wLjA4NTYsLTMyLjc0MTc4IC0wLjA5NDQsMCAtMjcuODEyMDQsLTE5LjE5MjYyIDI3LjgwNjE1LC0xOS4xMTY3MSAwLjEwMDI4LDAgMC4wODU2LC0zMi43MzkzMiAxOC4wNjA0MywwLjQ3OTg3IC0yNS4yOTIyNywtMjIuNjMyNTUgLTI0LjExNDk5LDIxLjMyNTEzIDE3LjA1NzI0LDAuNDU1MzkgLTAuMDcwOCwyOC44ODMxOSAtMjMuNzc4NjIsMTYuMzQ1MTggLTIzLjgwMjIzLC0xNi40MjU5OSAwLjA3MzgsLTI4LjQzMDIyIDE4LjA2MDQyLDAuNDc5ODcgLTI1LjI5MjI3LC0yMi42MzI1NSB6IiBpZD0icGF0aDU0NjYtMy04LTEtNy03LTQiLz4mI3hhOyAgICA8L2c+JiN4YTsgIDwvZz4mI3hhOzwvc3ZnPg==" preserveAspectRatio="none" pointer-events="none"/><image x="271" y="-0.5" width="42" height="45" xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIGlkPSJzdmc0MzQ3IiB2aWV3Qm94PSIwIDAgMTQ5LjY1NzY1IDE1Ny45NDU2MiIgaGVpZ2h0PSI0NC41NzU3NjRtbSIgd2lkdGg9IjQyLjIzNjcxM21tIj4mI3hhOyAgPGRlZnMgaWQ9ImRlZnM0MzQ5Ii8+JiN4YTsgIDxtZXRhZGF0YSBpZD0ibWV0YWRhdGE0MzUyIj4mI3hhOyAgICA8cmRmOlJERj4mI3hhOyAgICAgIDxjYzpXb3JrIHJkZjphYm91dD0iIj4mI3hhOyAgICAgICAgPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+JiN4YTsgICAgICAgIDxkYzp0eXBlIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiLz4mI3hhOyAgICAgICAgPGRjOnRpdGxlLz4mI3hhOyAgICAgIDwvY2M6V29yaz4mI3hhOyAgICA8L3JkZjpSREY+JiN4YTsgIDwvbWV0YWRhdGE+JiN4YTsgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zMzMuNzQyNjMsLTM5Ni4yNDY1NSkiIGlkPSJsYXllcjEiPiYjeGE7ICAgIDxnIGlkPSJnNDIyMCI+JiN4YTsgICAgICA8ZyBpZD0iZzgyMDAtMyIgdHJhbnNmb3JtPSJtYXRyaXgoMS4wMDc2NjI3LDAsMCwxLjAwNzY2MjcsLTIzMC43MTg4OCwtMjg1LjMzMzAxKSI+JiN4YTsgICAgICAgIDxyZWN0IHJ5PSIwLjI2NjI5NTY3IiB5PSI3OTQuNjY5NjIiIHg9IjU2My4zMjA4IiBoZWlnaHQ9IjM3LjQyNzMzNCIgd2lkdGg9IjE0My44ODQzMSIgaWQ9InJlY3Q2NzgyLTQtNi02IiBzdHlsZT0ib3BhY2l0eToxO2ZpbGw6bm9uZTtmaWxsLW9wYWNpdHk6MTtzdHJva2U6Izg4ODg4ODtzdHJva2Utd2lkdGg6NC40NTIyMTY2MztzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46bWl0ZXI7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIvPiYjeGE7ICAgICAgICA8ZyBpZD0iZzgxOTEtNyI+JiN4YTsgICAgICAgICAgPHBhdGggc3R5bGU9ImRpc3BsYXk6aW5saW5lO29wYWNpdHk6MTtmaWxsOiNkMzQ1M2E7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiNjZGM5Y2E7c3Ryb2tlLXdpZHRoOjI7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiIGQ9Im0gNjEzLjY0MDAzLDc5NS4wNTEyOSA0Mi43MjIzOSwwIDAsMTguNzA3MzIgLTQyLjcyMjM5LDAgeiIgaWQ9InBhdGg3ODc3LTUiLz4mI3hhOyAgICAgICAgICA8cGF0aCBzdHlsZT0iZGlzcGxheTppbmxpbmU7b3BhY2l0eToxO2ZpbGw6I2QzNDUzYTtmaWxsLW9wYWNpdHk6MTtzdHJva2U6I2NkYzljYTtzdHJva2Utd2lkdGg6MjtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIgZD0ibSA2ODIuNzc4NjgsODE0LjE5MDgxIDIyLjk0ODUsMCAwLDE3LjE3OTI0IC0yMi45NDg1LDAgeiIgaWQ9InBhdGg3ODc1LTMiLz4mI3hhOyAgICAgICAgICA8cGF0aCBzdHlsZT0iZGlzcGxheTppbmxpbmU7b3BhY2l0eToxO2ZpbGw6I2QzNDUzYTtmaWxsLW9wYWNpdHk6MTtzdHJva2U6I2NkYzljYTtzdHJva2Utd2lkdGg6MjtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIgZD0ibSA2MzUuMTI5ODgsODE0LjM4MjgxIDQ2Ljk0MDQ4LDAgMCwxNi45ODcyNCAtNDYuOTQwNDgsMCB6IiBpZD0icGF0aDc4NzMtNSIvPiYjeGE7ICAgICAgICAgIDxwYXRoIHN0eWxlPSJkaXNwbGF5OmlubGluZTtvcGFjaXR5OjE7ZmlsbDojZDM0NTNhO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojY2RjOWNhO3N0cm9rZS13aWR0aDoyO3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxIiBkPSJtIDU2NS40NjY1OSw4MTQuMTkwODEgMjIuOTQ4NTEsMCAwLDE3LjE3OTI0IC0yMi45NDg1MSwwIHoiIGlkPSJwYXRoNzg3MS02Ii8+JiN4YTsgICAgICAgICAgPHBhdGggc3R5bGU9ImRpc3BsYXk6aW5saW5lO29wYWNpdHk6MTtmaWxsOiNkMzQ1M2E7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiNjZGM5Y2E7c3Ryb2tlLXdpZHRoOjI7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiIGQ9Im0gNTg4LjE3MTczLDgxNC4zODI4MSA0Ni45NDA0NywwIDAsMTYuOTg3MjQgLTQ2Ljk0MDQ3LDAgeiIgaWQ9InBhdGg3ODY5LTIiLz4mI3hhOyAgICAgICAgICA8cGF0aCBzdHlsZT0iZGlzcGxheTppbmxpbmU7b3BhY2l0eToxO2ZpbGw6I2QzNDUzYTtmaWxsLW9wYWNpdHk6MTtzdHJva2U6I2NkYzljYTtzdHJva2Utd2lkdGg6MjtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIgZD0ibSA2NTYuOTcxNDYsNzk1LjA1MTI5IDQ4Ljc1NTcyLDAgMCwxOC42NTE2NSAtNDguNzU1NzIsMCB6IiBpZD0icGF0aDc4NjctOSIvPiYjeGE7ICAgICAgICAgIDxwYXRoIHN0eWxlPSJkaXNwbGF5OmlubGluZTtvcGFjaXR5OjE7ZmlsbDojZDM0NTNhO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojY2RjOWNhO3N0cm9rZS13aWR0aDoyO3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxIiBkPSJtIDU2NS40Mjg1OCw3OTUuMDUxMjkgNDguNzU1NzIsMCAwLDE4LjY1MTY1IC00OC43NTU3MiwwIHoiIGlkPSJwYXRoNzg1Ny0xIi8+JiN4YTsgICAgICAgIDwvZz4mI3hhOyAgICAgIDwvZz4mI3hhOyAgICAgIDxyZWN0IHN0eWxlPSJvcGFjaXR5OjE7ZmlsbDojMzk2Yzg1O2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojMzE0YjU4O3N0cm9rZS13aWR0aDo0LjA4NDIyMDg5O3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxIiBpZD0icmVjdDU3ODQtMS0yIiB3aWR0aD0iMTQ1LjU3MzM5IiBoZWlnaHQ9IjExMi4yOTk4MyIgeD0iMzM2LjcxNzM4IiB5PSIzOTkuNDc5NzQiLz4mI3hhOyAgICAgIDxnIGlkPSJnNDIxMyI+JiN4YTsgICAgICAgIDxwYXRoIGlkPSJwYXRoNTQ2Ni0zLTYtNy0yLTctMC03LTciIGQ9Im0gMzYwLjg1ODE5LDQzOS44MjU4OCAtNWUtNSwtNS41NzM3IDQxLjU5OTMsMCAtMC41NjI3MywtNy4wNDYyNyAyOC42OTE3MSw5Ljg4OTM3IC0yNy4xNTc3LDkuMzg1MSAtMC41MzM5NiwtNi42NTQyMiAtNDIuMDM3NzUsLTRlLTUgeiIgc3R5bGU9ImRpc3BsYXk6aW5saW5lO2ZpbGw6I2ZmZmZmZjtmaWxsLW9wYWNpdHk6MTtmaWxsLXJ1bGU6ZXZlbm9kZDtzdHJva2U6IzYwNmY3OTtzdHJva2Utd2lkdGg6MS4xODc2NDQ4NDtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIvPiYjeGE7ICAgICAgICA8cGF0aCBpZD0icGF0aDU0NjYtMy02LTctMi03LTAtOS0xLTAiIGQ9Im0gNDQ1LjU4ODUzLDQ1NS44ODg4OCAxLjRlLTQsNS4zNzAxNSAtNDYuMzE3MzIsLTEwZS02IDAuNjI2NTksNi43ODg5OCAtMzEuOTQ1NzgsLTkuNTI4MjUgMzAuMjM3NywtOS4wNDIzOSAwLjU5NDU4LDYuNDExMjIgNDYuODA1NDYsNWUtNSB6IiBzdHlsZT0iZGlzcGxheTppbmxpbmU7ZmlsbDojZmZmZmZmO2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpldmVub2RkO3N0cm9rZTojNjA2Zjc5O3N0cm9rZS13aWR0aDoxLjIzMDA5MDYyO3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxIi8+JiN4YTsgICAgICAgIDxyZWN0IHJ4PSIwIiByeT0iMS41NTAyNDMiIHk9IjQ1NC4yNzYzNCIgeD0iNDQ1LjMwODYyIiBoZWlnaHQ9IjMuMTAwNDg2IiB3aWR0aD0iMTUuOTk1OTg0IiBpZD0icmVjdDc3OTgtOSIgc3R5bGU9Im9wYWNpdHk6MTtmaWxsOiNmZmZmZmY7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiM2MDZmNzk7c3Ryb2tlLXdpZHRoOjAuNDgyNTM2OTc7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1kYXNob2Zmc2V0OjA7c3Ryb2tlLW9wYWNpdHk6MSIvPiYjeGE7ICAgICAgICA8cmVjdCByeD0iMCIgcnk9IjEuNDAxMTAyNCIgeT0iNDMwLjk4MDEzIiB4PSIzNTEuMzc2NCIgaGVpZ2h0PSIyLjgwMjIwNDgiIHdpZHRoPSIxMy42NDQxMjQiIGlkPSJyZWN0Nzc5OC03LTMiIHN0eWxlPSJvcGFjaXR5OjE7ZmlsbDojZmZmZmZmO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojNjA2Zjc5O3N0cm9rZS13aWR0aDowLjQyMzY3NTEyO3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2UtZGFzaG9mZnNldDowO3N0cm9rZS1vcGFjaXR5OjEiLz4mI3hhOyAgICAgICAgPHBhdGggaWQ9InBhdGg3NjgyLTYiIGQ9Im0gNDM5LjA2MTg5LDQ5NS4zMDEwNCAtNy45NDU0LC04LjA0NjA3IC0xLjE0ODM3LDAuNzg2MiBjIC0zLjYxMTQ5LDIuNDcyNTYgLTQuNjMxMDQsMy4wODA4NCAtNy41MzE4NCw0LjQ5MzY2IC0xMC42NTQ5OSw1LjE4OTQ2IC0yMi4zMzkxOCw1LjkwOTEgLTMzLjYxODMxLDIuMDcwNTkgLTExLjIzNDg1LC0zLjgyMzQ0IC0yMC41MDUwOSwtMTIuMDU3NjMgLTI1LjgxNTI3LC0yMi45MzAxNyAtNy40ODQ0OSwtMTUuMzI0MzggLTUuODQ4OTQsLTMzLjc2NTAyIDQuMjA0NjUsLTQ3LjQwNjgyIDYuNjkzOTUsLTkuMDgzMDcgMTYuMTIsLTE1LjEzNzA2IDI3LjM2MjYyLC0xNy41NzM5OSAyLjI4ODM2LC0wLjQ5NjAyIDIuNzE3OTIsLTAuOTE1OTMgOC4wNTc0MywtMC45MTU5MyA1LjMzOTUsMCA2Ljg0MDQ5LDAuNDE5OTQgOS4xMjg4NSwwLjkxNTkzIDExLjE4NDY3LDIuNDI0MzUgMjAuNzA3NTcsOC41NDA2OCAyNy4zNjIwOCwxNy41NzM5OSA4Ljc1MzAyLDExLjg4MTk2IDExLjIwMDA0LDI3LjYxMDQgNi40OTU4MSw0MS43NTIyNSAtMS43Njc0Nyw1LjMxMzQgLTQuOTI3NzcsMTEuMDEwNTYgLTguMzA3NzQsMTQuOTc2NjQgLTAuNjg2OTEsMC44MDYwMSAtMS4yMTk0LDEuNTU0MDggLTEuMTgzMzIsMS42NjIzNCAxMC45NjYzMiwxMi45Njg1NCA1LjIyMTMsNi4zMjE5MyAxOC4yNzE5MywyMC4xMTkyNCAtMS4wMTQ3NSwyLjMxNTg1IC0xLjU0Mzc1LDIuMTI0NjEgLTMuMjA0NSw0LjM5MjgzIC04LjMwNTAxLC04LjU1ODk1IC0zLjc0NzQxLC0zLjM4NjYgLTEyLjEyODYxLC0xMS44NzA2OSB6IG0gLTE5Ljk0NjQ2LC05LjU5MTM3IGMgMCwwIDguNDA0MjUsLTIuNzgzNzQgMTcuMDA1MzgsLTE2LjU2NjQyIDcuNTM4NzcsLTEyLjA4MDM0IDYuMTU0MTYsLTIyLjY4OTkyIC0wLjE2MzA1LC0zNS43MzA4NSAtNS4wNTQ4MiwtMTAuNDM0ODkgLTkuODYxNDUsLTE2LjAwODQ5IC0yMC42OTA2NSwtMTkuNjAzMDQgLTkuNzczMjQsLTMuMjQ0MDcgLTE1Ljk2OTc0LC0zLjIwMjc2IC0yNS41ODA2MywwLjY3NjgxIC0xMS4zNTk0OCw0LjU4NTQxIC0xOC44MzU4NSwxMS44NjMwNyAtMjIuNzc3NDQsMjMuNjUyMDQgLTMuODAyMjgsMTEuMzcyMjcgLTQuMTQxMDEsMTkuNDcxMjggMS4xOTg3NiwzMC4xMjcxNyAyLjAyOTU0LDQuMDUwMDkgMy4wNzQ3NCw2LjI4MDc3IDYuMzM1NDksOS42NjkzNCA3LjQwNzE4LDcuNjk3NTYgMTMuOTAxNjMsMTEuMjA0MTEgMjUuMDcxOTksMTIuMjk2NzEgMS44NTEyNSwwLjE4MTA5IDExLjYyODgxLC0xLjE2NDgyIDExLjYyODgxLC0xLjE2NDgyIHoiIHN0eWxlPSJvcGFjaXR5OjE7ZmlsbDojZmZmZmZmO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojNjA2Zjc5O3N0cm9rZS13aWR0aDowLjczNjU1NDc0O3N0cm9rZS1saW5lY2FwOmJ1dHQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1kYXNob2Zmc2V0OjA7c3Ryb2tlLW9wYWNpdHk6MSIvPiYjeGE7ICAgICAgPC9nPiYjeGE7ICAgIDwvZz4mI3hhOyAgPC9nPiYjeGE7PC9zdmc+" preserveAspectRatio="none" pointer-events="none"/><image x="271.5" y="54.5" width="41" height="60" xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNDEuMzIyNTA2bW0iIGhlaWdodD0iNTkuOTc3MTYxbW0iIHZpZXdCb3g9IjAgMCA0MS4zMjI1MDYgNTkuOTc3MTYxIiB2ZXJzaW9uPSIxLjEiIGlkPSJzdmc4Ij4mI3hhOyAgPGRlZnMgaWQ9ImRlZnMyIi8+JiN4YTsgIDxtZXRhZGF0YSBpZD0ibWV0YWRhdGE1Ij4mI3hhOyAgICA8cmRmOlJERj4mI3hhOyAgICAgIDxjYzpXb3JrIHJkZjphYm91dD0iIj4mI3hhOyAgICAgICAgPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+JiN4YTsgICAgICAgIDxkYzp0eXBlIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiLz4mI3hhOyAgICAgICAgPGRjOnRpdGxlLz4mI3hhOyAgICAgIDwvY2M6V29yaz4mI3hhOyAgICA8L3JkZjpSREY+JiN4YTsgIDwvbWV0YWRhdGE+JiN4YTsgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMjguMDYxMTIsLTg3LjYyMjQ2NikiIGlkPSJsYXllcjEiPiYjeGE7ICAgIDxnIGlkPSJnMTA5MSI+JiN4YTsgICAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjE1ODA1MjksLTEuMTI0NDc5MikiIGlkPSJnMTA4MSI+JiN4YTsgICAgICAgIDxyZWN0IHN0eWxlPSJvcGFjaXR5OjE7ZmlsbDojNTU5Y2QwO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojMmM3OWIyO3N0cm9rZS13aWR0aDoxLjI1OTk5OTk5O3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxO3BhaW50LW9yZGVyOm5vcm1hbCIgaWQ9InJlY3Q2MDgzLTAiIHdpZHRoPSI0MC4wNjI1MDgiIGhlaWdodD0iMTYuODY1ODciIHg9IjEyOC41MzMwNyIgeT0iODkuMzc2OTQ1Ii8+JiN4YTsgICAgICAgIDxwYXRoIHN0eWxlPSJkaXNwbGF5OmlubGluZTtvcGFjaXR5OjE7ZmlsbDojZmZmZmZmO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojYTFhMWExO3N0cm9rZS13aWR0aDowLjI7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiIGQ9Im0gMTMyLjIwNjQ2LDkxLjYxMTc0MyB2IDQuNzU5NzQyIGggNy4yMDA1MiB2IC0xLjM4ODUxMSBsIDYuNjYwODksMi44OTU1MzUgLTYuNjYwODksMi44NDE1MTEgdiAtMS40NzExODkgaCAtNy4yMDA1MiB2IDQuNzU5MTg5IGggNy4yMDA1MiB2IC0xLjA4NDggbCAwLjMzMzQ5LC0wLjE0MjIxIGggMTcuNjA1MjYgbCAwLjM3NjQ4LDAuMTYzNzEgdiAxLjA2MzMgaCA3LjE5OTk3IHYgLTQuNzU5MTg5IGggLTcuMTk5OTcgdiAxLjYzMjEzOSBsIC02LjcwMDU3LC0yLjkxMjYxMyA2LjcwMDU3LC0yLjg1OTE1MyB2IDEuMjYyMjgxIGggNy4xOTk5NyB2IC00Ljc1OTc0MiBoIC03LjE5OTk3IHYgMS4yOTQyNTQgbCAtMC4yMjk4NiwwLjA5ODExIGggLTE3Ljg4OTY5IGwgLTAuMTk1NjgsLTAuMDg0ODkgdiAtMS4zMDc0ODEgeiBtIDEwLjE3ODE5LDIuNjAxNzM1IEggMTU0LjY1OCBsIC02LjE5NDU1LDIuNjQyNTI2IHogbSA2LjI0MDg1LDQuNzc2ODMxIDUuOTM4MjUsMi41ODEzMzEgaCAtMTEuOTg4MzggeiIgaWQ9InJlY3Q2MDg1LTctOS04LTIiLz4mI3hhOyAgICAgIDwvZz4mI3hhOyAgICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAuMDc3ODM5MzUpIiBpZD0iZzEwNzUiPiYjeGE7ICAgICAgICA8cmVjdCBzdHlsZT0ib3BhY2l0eToxO2ZpbGw6IzU1OWNkMDtmaWxsLW9wYWNpdHk6MTtzdHJva2U6IzJjNzliMjtzdHJva2Utd2lkdGg6MS4wMDU3NjQ2O3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxIiBpZD0icmVjdDgyNiIgd2lkdGg9IjQwLjIyMjkzNSIgaGVpZ2h0PSI0MC44NTM5MzEiIHg9IjEyOC41MzMwNyIgeT0iMTA2LjI0MjgxIi8+JiN4YTsgICAgICAgIDxnIGlkPSJnMTA2OSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTAuMzI0MTgxODUsMC41NzAxNjM4MykiPiYjeGE7ICAgICAgICAgIDxwYXRoIGlkPSJyZWN0ODY3IiBkPSJtIDE0OS4xODI5NywxMDguMjUwMTYgLTEuODQwODIsMS43MzAzMSAtMS42NTU4LDEuNjY3MTcgMi4zNjc0OSwwLjAzMTUgLTAuMTU1LDcuMDE1MTUgLTQuMTUwNTYsLTMuMjY1OTMgYyAtMC4wMDcsLTAuMDA2IC0wLjAxMzksLTAuMDExIC0wLjAyMTYsLTAuMDE3IC0wLjAwMiwtMC4wMDIgLTAuMDA1LC0wLjAwMyAtMC4wMDcsLTAuMDA1IC0xLjE3MDEzLC0wLjgxNDg5IC0yLjMxODkzLC0xLjY4NjM2IC0zLjY2NDYsLTIuNDMwMDEgLTAuODEzNDIsLTAuNDU3OTMgLTEuNDkyMjEsLTAuNjc3NTYgLTIuNDUwODQsLTEuMDA3MjQgLTAuMDIxNSwtMC4wMDggLTAuMDQzOCwtMC4wMTI2IC0wLjA2NjQsLTAuMDE1MiAtMC4zMzIwMiwtMC4xMDMyNyAtMC41NzY4MSwtMC4xODY3MiAtMC44MzkyNiwtMC4yMTUzNCAtMC4yODEyNSwtMC4wMzA2IC0wLjU1MjcsMC4wMDggLTAuODkyMzIsMC4wOTY2IC0wLjAwMyw2LjJlLTQgLTAuMDA2LDEwZS00IC0wLjAwOSwwLjAwMiAtMC4wMDUsMC4wMDEgLTAuMDA5LDAuMDAzIC0wLjAxMzksMC4wMDUgLTAuMzY2OTUsMC4xMTY1OCAtMC42MTc2NSwwLjM5NjU1IC0wLjc4MDU0LDAuNjc4ODYgLTAuMTYwNDEsMC4yNzgwNiAtMC4yNTY2NiwwLjU4ODY1IC0wLjI0MDU5LDAuOTAyNDMgLTAuMDE0NSwwLjg1MTk4IDAuMDkzMSwxLjA4MjMzIDAuMTY3OTgsMS40Njg4NiBsIDAuMDAyLDAuMDA3IGMgMC4wMDEsMC4wMDkgMC4wMDIsMC4wMTg4IDAuMDA1LDAuMDI4NCAwLjAwMiwwLjAwNSAwLjAwMywwLjAxIDAuMDA1LDAuMDE0NSAwLjI3MjU5LDAuOTg4MDMgMC45ODM1LDIuMjg3OTIgMS4yNzE4NSwyLjc5Mzc3IDAuMDEsMC4wMTc5IDAuMDIxNSwwLjAzNDkgMC4wMzQ3LDAuMDUwNSA2LjZlLTQsNi43ZS00IDAuMDAxLDAuMDAxIDAuMDAyLDAuMDAyIGwgMS4xMjAyOCwxLjczMzQ3IGMgMC4wMDYsMC4wMDggMC4wMTE4LDAuMDE2MiAwLjAxODMsMC4wMjM5IDYuNmUtNCw2LjdlLTQgMC4wMDEsMTBlLTQgMC4wMDIsMC4wMDIgbCAxLjY3NDA5LDIuNTUgMC4wMDIsMC4wMDUgMC4wMTYzLDAuMDIzOSBjIDAuMDAxLDAuMDAyIDUuN2UtNCwwLjAwNSAwLjAwMiwwLjAwNyAwLjAwNiwwLjAwOSAwLjAxMjIsMC4wMTggMC4wMTksMC4wMjY1IGwgMS41NTk3OSwxLjk4NzMxIGMgMC4wMDIsMC4wMDMgMC4wMDUsMC4wMDYgMC4wMDcsMC4wMDkgbCAwLjc0ODMxLDAuODk5MjUgLTYuOTY0MTYsMC4wMTI2IC0wLjAxODMsLTIuMzI3MDYgLTEuNzE2NCwxLjcwNzU3IC0xLjcwMTksMS42NDE5IDEuNzY5NDYsMS44MDQxOSAxLjcwMTI2LDEuNjE5NzkgLTAuMDE3NywtMi4zNjc0OCA3LjM2NzA4LC0wLjAxMzQgLTMuNjU5NTMsNC41NjAwNyBjIC0wLjAwNiwwLjAwNyAtMC4wMTExLDAuMDEzOCAtMC4wMTcxLDAuMDIxNSAtMC4wMDIsMC4wMDIgLTAuMDAzLDAuMDA1IC0wLjAwNSwwLjAwNyAtMC44MDEyNiwxLjE3OTU0IC0xLjY1OTEsMi4zMzgxNyAtMi4zODcwNywzLjY5MjM3IC0wLjQ0ODQ1LDAuODE4NzIgLTAuNjYwMzEsMS40OTk4MiAtMC45Nzg4MywyLjQ2MjIyIC0wLjAwNywwLjAyMTcgLTAuMDEyMiwwLjA0NDIgLTAuMDE0NSwwLjA2NyAtMC4wOTk0LDAuMzMzMTggLTAuMTc5NjYsMC41NzgzOCAtMC4yMDUyNCwwLjg0MTE1IC0wLjAyNzQsMC4yODE1OSAwLjAxNDYsMC41NTI0OSAwLjEwNjY0LDAuODkxMDQgOS41ZS00LDAuMDAzIDAuMDAyLDAuMDA2IDAuMDAzLDAuMDA5IDguMWUtNCwwLjAwNSAwLjAwMywwLjAwOSAwLjAwNSwwLjAxNDUgMC4xMjA4NiwwLjM2NTU3IDAuNDAzNTEsMC42MTI3NCAwLjY4NzcsMC43NzIzMyAwLjI3OTkxLDAuMTU3MjIgMC41OTIwMiwwLjI0OTUgMC45MDU1OCwwLjIyOTg3IDAuODUyMTEsMC4wMDUgMS4wODA3MiwtMC4xMDQ5NSAxLjQ2NjM0LC0wLjE4NDQxIGwgMC4wMDcsLTAuMDAzIGMgMC4wMDksLTguN2UtNCAwLjAxODksLTAuMDAxIDAuMDI4NSwtMC4wMDMgMC4wMDUsLTAuMDAyIDAuMDEsLTAuMDAzIDAuMDE0NSwtMC4wMDUgMC45ODQ4MSwtMC4yODQwMiAyLjI3NjE1LC0xLjAwOTIzIDIuNzc4NjEsLTEuMzAzNDEgMC4wMTgsLTAuMDEwMSAwLjAzNDksLTAuMDIxOSAwLjA1MDUsLTAuMDM1NCA2LjdlLTQsLTYuNmUtNCAwLjAwMSwtMTBlLTQgMC4wMDIsLTAuMDAyIGwgMS43MjAyLC0xLjE0MDQ4IGMgMC4wMDgsLTAuMDA2IDAuMDE2MiwtMC4wMTE5IDAuMDIzOSwtMC4wMTg0IDYuN2UtNCwtNi42ZS00IDEwZS00LC0wLjAwMSAwLjAwMiwtMC4wMDIgbCAyLjUzMDQyLC0xLjcwMzc4IDAuMDA1LC0wLjAwMyAwLjAyMzksLTAuMDE2MyBjIDAuMDAyLC0wLjAwMSAwLjAwNSwtMC4wMDEgMC4wMDcsLTAuMDAzIDAuMDA5LC0wLjAwNiAwLjAxNzksLTAuMDEyMSAwLjAyNjQsLTAuMDE4OCBsIDEuOTY5MDIsLTEuNTgzMTggYyAwLjAwMywtMC4wMDIgMC4wMDYsLTAuMDA1IDAuMDA5LC0wLjAwNyBsIDEuMDAwOTQsLTAuODUzMTYgdiA2LjY5NDUyIGwgLTIuMzI3MDgsMC4wMTM5IDEuNzA0NDIsMS43MTk1NiAxLjYzODc0LDEuNzA0NDMgMS44MDczNSwtMS43NjU2NyAxLjYyMjk2LC0xLjY5ODczIC0yLjM2NzUxLDAuMDEzOSAtMC4xNDE3NCwtNi43NzEgNC42ODM0OSwzLjMxNzk3IGMgMC4wMDcsMC4wMDYgMC4wMTQ1LDAuMDExIDAuMDIyMSwwLjAxNzEgMC4wMDIsMC4wMDIgMC4wMDUsMC4wMDMgMC4wMDcsMC4wMDUgMS4xODQxOSwwLjc5NDMzIDIuMzQ4NDYsMS42NDQ5NCAzLjcwNjkxLDIuMzY0OTggMC44MjEzMSwwLjQ0MzYzIDEuNTAzNjcsMC42NTE0MSAyLjQ2NzksMC45NjQyOSAwLjAyMTUsMC4wMDcgMC4wNDM4LDAuMDEyMiAwLjA2NjQsMC4wMTQ1IDAuMzMzNzcsMC4wOTc0IDAuNTgwMTQsMC4xNzYxNiAwLjg0MzA1LDAuMjAwMTcgMC4yODE3NCwwLjAyNTkgMC41NTE3NywtMC4wMTc1IDAuODg5NzgsLTAuMTExODIgMC4wMDMsLTYuMmUtNCAwLjAwNiwtMC4wMDEgMC4wMDksLTAuMDAyIDAuMDA1LC0wLjAwMSAwLjAwOSwtMC4wMDMgMC4wMTQ1LC0wLjAwNSAwLjM2NDg0LC0wLjEyMzAzIDAuNjEwNiwtMC40MDcgMC43Njg1MywtMC42OTIxMyAwLjE1NTU1LC0wLjI4MDgyIDAuMjQ1NzQsLTAuNTkzMzkgMC4yMjQxOSwtMC45MDY4NSAtMy45ZS00LC0wLjg1MjEgLTAuMTExNjksLTEuMDgwNTUgLTAuMTkzMjQsLTEuNDY1NyBsIC0wLjAwMiwtMC4wMDcgYyAtMC4wMDEsLTAuMDA5IC0wLjAwMiwtMC4wMTkgLTAuMDA1LC0wLjAyODQgLTAuMDAyLC0wLjAwNSAtMC4wMDMsLTAuMDA5IC0wLjAwNSwtMC4wMTM5IC0wLjI4OTgsLTAuOTgzMTEgLTEuMDIyNywtMi4yNzAyOCAtMS4zMTk4MywtMi43NzEwMSAtMC4wMTAxLC0wLjAxOCAtMC4wMjE5LC0wLjAzNDkgLTAuMDM1NCwtMC4wNTA1IC02LjZlLTQsLTYuN2UtNCAtMC4wMDEsLTEwZS00IC0wLjAwMiwtMC4wMDIgbCAtMS4xNTA1OSwtMS43MTMyNiBjIC0wLjAwNiwtMC4wMDggLTAuMDEyMSwtMC4wMTYyIC0wLjAxODgsLTAuMDIzOSAtNi42ZS00LC02LjdlLTQgLTAuMDAxLC0xMGUtNCAtMC4wMDIsLTAuMDAyIGwgLTEuNzE4MzEsLTIuNTIwMzEgLTAuMDAyLC0wLjAwNSAtMC4wMTcxLC0wLjAyMzkgYyAtMTBlLTQsLTAuMDAyIC0xMGUtNCwtMC4wMDUgLTAuMDAyLC0wLjAwNyAtMC4wMDYsLTAuMDA5IC0wLjAxMjEsLTAuMDE3OSAtMC4wMTg5LC0wLjAyNjQgbCAtMS41OTQ1NCwtMS45NTk1NSBjIC0wLjAwMiwtMC4wMDMgLTAuMDA1LC0wLjAwNiAtMC4wMDcsLTAuMDA5IGwgLTEuMDM5NDYsLTEuMjA1NTUgNy4wMTM0NCwwLjEwODY0IC0wLjAyMjEsMi4zMjcwNyAxLjc0NTQ3LC0xLjY3NzI2IDEuNzI5NjgsLTEuNjEyMjEgLTEuNzM3MjYsLTEuODM0NTEgLTEuNjczNDgsLTEuNjQ5NDggLTAuMDIyNywyLjM2NzQ5IC03LjAyOTg2LC0wLjEwOTI2IDMuMjYyMzMsLTQuMjU5NDYgYyAwLjAwNiwtMC4wMDggMC4wMTEsLTAuMDEzOCAwLjAxNjMsLTAuMDIxNiAwLjAwMiwtMC4wMDIgMC4wMDMsLTAuMDA1IDAuMDA1LC0wLjAwNyAwLjc3NDQzLC0xLjE5NzMzIDEuNjA1ODYsLTIuMzc1MTQgMi4zMDMwNywtMy43NDU0MyAwLjQyOTg1LC0wLjgyODYxIDAuNjI1OTEsLTEuNTE0MzQgMC45MjI2MiwtMi40ODM2NyAwLjAwNywtMC4wMjE4IDAuMDExNCwtMC4wNDQyIDAuMDEzNCwtMC4wNjcgMC4wOTE5LC0wLjMzNTM0IDAuMTY2NjgsLTAuNTgyMjggMC4xODYzLC0wLjg0NTU3IDAuMDIxMSwtMC4yODIxNSAtMC4wMjczLC0wLjU1MjEyIC0wLjEyNjkzLC0wLjg4ODUyIC05LjVlLTQsLTAuMDAzIC0wLjAwMiwtMC4wMDYgLTAuMDAzLC0wLjAwOSAtMC4wMDEsLTAuMDA1IC0wLjAwMywtMC4wMDggLTAuMDA1LC0wLjAxNCAtMC4xMjkwNiwtMC4zNjI3MyAtMC40MTcwNSwtMC42MDMzNyAtMC43MDQ3NiwtMC43NTY1MiAtMC4yODMzOCwtMC4xNTA4NyAtMC41OTc2LC0wLjIzNjM5IC0wLjkxMDYxLC0wLjIwOTY2IC0wLjg1MiwwLjAxNDYgLTEuMDc4ODIsMC4xMjk4NiAtMS40NjI1NywwLjIxNzg3IGwgLTAuMDA3LDAuMDAzIGMgLTAuMDA5LDEwZS00IC0wLjAxOTEsMC4wMDIgLTAuMDI4NSwwLjAwNSAtMC4wMDUsMC4wMDIgLTAuMDEsMC4wMDQgLTAuMDE0NSwwLjAwNiAtMC45NzgxMiwwLjMwNjIgLTIuMjUyNTksMS4wNjA0NiAtMi43NDgyOCwxLjM2NTkyIC0wLjAxNzgsMC4wMTA1IC0wLjAzNDUsMC4wMjI4IC0wLjA0OTksMC4wMzY3IC02LjdlLTQsNi42ZS00IC0xMGUtNCwwLjAwMSAtMC4wMDIsMC4wMDIgbCAtMS42OTQzMSwxLjE3OSBjIC0wLjAwOCwwLjAwNiAtMC4wMTU5LDAuMDEyNyAtMC4wMjM0LDAuMDE5NiAtNi43ZS00LDYuNmUtNCAtMC4wMDEsMTBlLTQgLTAuMDAyLDAuMDAyIGwgLTIuNDkxMjgsMS43NTk5OSAtMC4wMDUsMC4wMDMgLTAuMDIzNCwwLjAxNyBjIC0wLjAwMiw5ZS00IC0wLjAwNSw3ZS00IC0wLjAwNywwLjAwMyAtMC4wMDksMC4wMDYgLTAuMDE3NiwwLjAxMjYgLTAuMDI1OSwwLjAxOTYgbCAtMS45MzIzOSwxLjYyNjc0IGMgLTAuMDAzLDAuMDAyIC0wLjAwNiwwLjAwNSAtMC4wMDksMC4wMDcgbCAtMC44ODkxNiwwLjc5MzE2IDAuMTM1NzcsLTcuMDMxNzYgMi4zMjY0NSwwLjAzMDkgLTEuNjcwOTYsLTEuNzUyNDEgeiBtIDEyLjMwMDM1LDQuMzQ3ODkgYyAwLjAwMyw0ZS01IDAuMDA2LDRlLTUgMC4wMDksMCAwLjA0NTgsLTAuMDAzIDAuMjQ5NTcsMC4wMjg5IDAuMzkzNDIsMC4xMDU0NyAwLjE0MjE3LDAuMDc1NyAwLjI0MjAzLDAuMTk2NjEgMC4yNTk1NSwwLjI0MTg3IDAuMDc5MywwLjI3MDU5IDAuMDk3NywwLjM5MzI1IDAuMDg3MiwwLjUzMjk3IC0wLjAwOSwwLjEzODAzIC0wLjA2NDMsMC4zNDg1NiAtMC4xNjIzLDAuNzA5MTggdiAwLjAwMiBjIC0wLjI5NzY4LDAuOTcyNjkgLTAuNDcyODEsMS41NzY2MyAtMC44NTg4MywyLjMyMDc2IC02LjhlLTQsMC4wMDIgLTAuMDAxLDAuMDAzIC0wLjAwMiwwLjAwNSAtMC42NTQyMywxLjI4NjYgLTEuNDUyNjgsMi40Mjg1OCAtMi4yMzU1MSwzLjYzNzQzIC0wLjAwMiwwLjAwMiAtMC4wMDMsMC4wMDUgLTAuMDA1LDAuMDA3IGwgLTAuMDA1LDAuMDA3IGMgLTIuNGUtNCwzLjdlLTQgLTAuMDAyLC0zLjNlLTQgLTAuMDAyLDAgdiAwLjAwMiBjIC0wLjAwMSwwLjAwMSAtMC4wMDUsMC4wMDcgLTAuMDA1LDAuMDA3IGwgLTMuNjYyNjksNC43ODE3NCBjIC0wLjEzNTY3LDAuMTM1NjQgLTAuMTM5MjIsMC4xODI3NyAtMC4zMzE2NCwwLjQzMzc0IC0wLjA4ODEsMC4xMDIxMSAtMC4xMzIzNSwwLjI1MzA0IC0wLjExMDQ4LDAuMzgxNDEgLTAuMTE1NTQsMC4zMTU5IC0wLjAyMiwwLjgwNjkxIDAuMTQyMDQsMS4wMjM2IGwgMC4xMzUxNSwwLjE1NjYxIC0wLjAwMSwwLjA4MTYgMC4wNzI2LDAuMDAxIDEuNTgxMjcsMS44MzQ1IDEuNTc0OTYsMS45MzgwOCAxLjc0MjMxLDIuNTUzNzkgMS4xNjQ0OSwxLjczMDMgYyAwLjI3NTQ4LDAuNDY0NzIgMC45ODM0NiwxLjc2MDE2IDEuMjE1LDIuNTI3OSAwLjEwMzA1LDAuNDg1NzkgMC4xODMwNiwwLjQ3MjA4IDAuMTc5MzUsMS4yOTU4NSAtMS44ZS00LDAuMDA5IC00LjNlLTQsMC4wMTg3IDAsMC4wMjg0IC00ZS01LDAuMDAzIC00ZS01LDAuMDA2IDAsMC4wMDkgMC4wMDMsMC4wNDU5IC0wLjAzMzYsMC4yNDg5NiAtMC4xMTI0MiwwLjM5MTU0IC0wLjA3OCwwLjE0MDg2IC0wLjIwMDEyLDAuMjM4MzQgLTAuMjQ1NjYsMC4yNTUxMyAtMC4yNzE4OSwwLjA3NDYgLTAuMzk1MzQsMC4wOTE4IC0wLjUzNDg4LDAuMDc4OCAtMC4xMzc4MiwtMC4wMTI2IC0wLjM0Nzc0LC0wLjA3MDIgLTAuNzA2NjUsLTAuMTc0MjkgaCAtMC4wMDIgYyAtMC45Njc1OCwtMC4zMTM5MSAtMS41NjgwNCwtMC40OTg5NCAtMi4zMDU2MSwtMC44OTczNSAtMC4wMDIsLTYuOGUtNCAtMC4wMDMsLTAuMDAxIC0wLjAwNSwtMC4wMDIgLTEuMjc1NTEsLTAuNjc1NjUgLTIuNDAzOTYsLTEuNDkzMjEgLTMuNTk5NTQsLTIuMjk2MTMgLTAuMDAyLC0wLjAwMiAtMC4wMDUsLTAuMDAzIC0wLjAwNywtMC4wMDUgbCAtMC4wMDcsLTAuMDA1IGMgLTMuNmUtNCwtMi4zZS00IDMuNmUtNCwtMC4wMDIgMCwtMC4wMDIgaCAtMC4wMDIgYyAtMC4wMDEsLTAuMDAxIC0wLjAwNywtMC4wMDUgLTAuMDA3LC0wLjAwNSBsIC01LjA5NTU2LC00LjAzOTcgYyAtMC42NDc4MywtMC40NTU2NiAtMS40NDk3LC0wLjQwMTU5IC0yLjA3ODk2LC0wLjA4MjcgdiAwIGwgLTEuNjMwNzksMS42NDI4OCAtMS45NDc1NCwxLjU2MzYgLTIuNTQwMjcsMS44Njk1MiAtMS43MzcyNywxLjE1NDM4IGMgLTAuNDY2MzIsMC4yNzI3NiAtMS43NjU3NCwwLjk3MjgyIC0yLjUzNDg0LDEuMTk5ODUgLTAuNDg2NDEsMC4wOTk5IC0wLjQ3MzM4LDAuMTgwMzIgLTEuMjk3MDksMC4xNzE3NiAtMC4wMDgsLTQuMmUtNCAtMC4wMTg4LC01LjRlLTQgLTAuMDI4NCwwLjAwMSAtMC4wMDMsLTIuNmUtNCAtMC4wMDYsLTQuN2UtNCAtMC4wMDksLTYuNGUtNCAtMC4wNDU4LDAuMDAyIC0wLjI0ODgxLC0wLjAzNDYgLTAuMzkwOSwtMC4xMTQyNiAtMC4xNDAzOCwtMC4wNzg2IC0wLjIzNzMxLC0wLjIwMTk2IC0wLjI1Mzg1LC0wLjI0NzU2IC0wLjA3MzIsLTAuMjcyMzIgLTAuMDg4OCwtMC4zOTU0MSAtMC4wNzUyLC0wLjUzNDg4IDAuMDEzNCwtMC4xMzc3MyAwLjA3MiwtMC4zNDcwOSAwLjE3ODA5LC0wLjcwNTM3IGwgNi40ZS00LC0wLjAwMiBjIDAuMzE5NTYsLTAuOTY1NzIgMC41MDc5MSwtMS41NjUzMyAwLjkxMDYyLC0yLjMwMDU2IDYuN2UtNCwtMC4wMDEgMC4wMDEsLTAuMDAyIDAuMDAyLC0wLjAwMyAwLjY4MzEyLC0xLjI3MTUxIDEuNTA3NjksLTIuMzk1NDEgMi4zMTc2MSwtMy41ODYzIDAuMDAyLC0wLjAwMiAwLjAwMywtMC4wMDUgMC4wMDUsLTAuMDA3IGwgMC4wMDUsLTAuMDA3IGMgMi40ZS00LC0zLjRlLTQgMC4wMDIsMmUtNCAwLjAwMiwwIGwgNi4zZS00LC0wLjAwMiBjIDkuNWUtNCwtOC4zZS00IDAuMDA1LC0wLjAwNyAwLjAwNSwtMC4wMDcgbCA0LjExMTA3LC01LjEyNDYyIGMgMC4zNzk0MywtMC40Mjc3OSAwLjQxNDU5LC0xLjAyOTkyIDAuMTA0MjIsLTEuNDYzMjEgLTAuMTYxOTEsLTAuMTk5OSAtMC40NjQ3OCwtMC41NTg5NyAtMC41MDgzNSwtMC42MTEyOSBsIC0xLjI0MjgsLTEuNDkzNSAtMS41NDA4NiwtMS45NjUyMyAtMS42OTc0NiwtMi41ODQxIC0xLjEzNDgyLC0xLjc1MDUyIGMgLTAuMjY3MzEsLTAuNDY5NDYgLTAuOTUyMDcsLTEuNzc3MDYgLTEuMTcwMTYsLTIuNTQ4NzMgLTAuMDk0NSwtMC40ODc1MiAtMC4xNzQ3MywtMC40NzU0MyAtMC4xNTY2MiwtMS4yOTkgMy41ZS00LC0wLjAwOSA4LjhlLTQsLTAuMDE4NyA2LjNlLTQsLTAuMDI4NSA0ZS01LC0wLjAwMyA0ZS01LC0wLjAwNiAwLC0wLjAwOSAtMC4wMDIsLTAuMDQ1OSAwLjAzNzksLTAuMjQ4NDYgMC4xMTk0LC0wLjM4OTYzIDAuMDgwNSwtMC4xMzk0OCAwLjIwNDI1LC0wLjIzNTM1IDAuMjUwMDgsLTAuMjUxMzIgMC4yNzMxNSwtMC4wNjk5IDAuMzk2ODYsLTAuMDg0MSAwLjUzNjE0LC0wLjA2ODggMC4xMzc1OCwwLjAxNTEgMC4zNDY0NSwwLjA3NjEgMC43MDM0OSwwLjE4NjI4IGggMC4wMDIgYyAwLjk2MTk3LDAuMzMwNzcgMS41NTkzMiwwLjUyNjU2IDIuMjg5ODMsMC45Mzc3OSAwLjAwMiw2LjhlLTQgMC4wMDMsMC4wMDEgMC4wMDUsMC4wMDIgMS4yNjM0OSwwLjY5NzgzIDIuMzc3MTQsMS41MzQ5NCAzLjU1ODUxLDIuMzU4NjUgMC4wMDIsMC4wMDIgMC4wMDUsMC4wMDMgMC4wMDcsMC4wMDUgbCAwLjAwNywwLjAwNSBjIDMuNWUtNCwyLjVlLTQgLTMuNGUtNCwwLjAwMiAwLDAuMDAyIGggMC4wMDIgYyAwLjAwMSwxMGUtNCAwLjAwNywwLjAwNSAwLjAwNywwLjAwNSBsIDUuMDc2NjMsNC4xNzA0MyBjIDAuMjYwMDgsMC4yOTA2MyAwLjg3Mjk3LDAuNDA2NTIgMS4yMDYxNywwLjEyNDk3IGwgMC40NzM2MiwtMC40MjE4MiAwLjAzNDEsNi4yZS00IDYuMWUtNCwtMC4wMzE1IDEuNTM1ODIsLTEuMzY5MDggMS45MTE1NSwtMS42MDc4IDIuNTI0MTEsLTEuNzg0NjIgMS43MTA3MywtMS4xOTM1NCBjIDAuNDYwMDUsLTAuMjgzMjEgMS43NDMzLC0xLjAxMjMzIDIuNTA3MDUsLTEuMjU2NjcgMC40ODQwMSwtMC4xMTEwOSAwLjQ2ODk5LC0wLjE5MDc1IDEuMjkyNjgsLTAuMjAwODQgMC4wMDksMWUtNCAwLjAxOTQsMi41ZS00IDAuMDI5MiwtMC4wMDIgeiIgc3R5bGU9Im9wYWNpdHk6MTtmaWxsOiNmMmY3Zjk7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiNhMWExYTE7c3Ryb2tlLXdpZHRoOjAuMjtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MTtwYWludC1vcmRlcjpub3JtYWwiLz4mI3hhOyAgICAgICAgICA8Y2lyY2xlIHI9IjYuMTIwMTM1OCIgY3k9IjEyNi4wOTk2MiIgY3g9IjE0OC45Njg3MiIgaWQ9InBhdGg4NjUiIHN0eWxlPSJvcGFjaXR5OjE7ZmlsbDojYjRiNGI0O2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojYTFhMWExO3N0cm9rZS13aWR0aDowLjM2NjYwODA1O3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxO3BhaW50LW9yZGVyOm5vcm1hbCIvPiYjeGE7ICAgICAgICA8L2c+JiN4YTsgICAgICA8L2c+JiN4YTsgICAgPC9nPiYjeGE7ICA8L2c+JiN4YTs8L3N2Zz4=" preserveAspectRatio="none" pointer-events="none"/><image x="212.5" y="-0.5" width="46" height="46" xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIGlkPSJzdmc4NjY5IiB2aWV3Qm94PSIwIDAgMTY0LjUxMDAyIDE2NC41MTAwMiIgaGVpZ2h0PSI0Ni40MjgzODNtbSIgd2lkdGg9IjQ2LjQyODM4M21tIj4mI3hhOyAgPGRlZnMgaWQ9ImRlZnM4NjcxIi8+JiN4YTsgIDxtZXRhZGF0YSBpZD0ibWV0YWRhdGE4Njc0Ij4mI3hhOyAgICA8cmRmOlJERj4mI3hhOyAgICAgIDxjYzpXb3JrIHJkZjphYm91dD0iIj4mI3hhOyAgICAgICAgPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+JiN4YTsgICAgICAgIDxkYzp0eXBlIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiLz4mI3hhOyAgICAgICAgPGRjOnRpdGxlLz4mI3hhOyAgICAgIDwvY2M6V29yaz4mI3hhOyAgICA8L3JkZjpSREY+JiN4YTsgIDwvbWV0YWRhdGE+JiN4YTsgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yNzcuNzQ1MDEsLTQwMS41MzU3NykiIGlkPSJsYXllcjEiPiYjeGE7ICAgIDxnIHRyYW5zZm9ybT0ibWF0cml4KDMuMjIxNjA2NiwwLDAsMy4yMjE2MDY2LC0xMDM3LjE3MDIsLTM1OC45Nzk4NikiIGlkPSJnNjA2OSIgc3R5bGU9ImRpc3BsYXk6aW5saW5lIj4mI3hhOyAgICAgIDxjaXJjbGUgc3R5bGU9Im9wYWNpdHk6MTtmaWxsOiMzOTZjODU7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiMzMTRiNTg7c3Ryb2tlLXdpZHRoOjEuODkwOTMzMzk7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIgaWQ9InBhdGg0MTM2LTYtNSIgY3g9IjQzMy42ODc0MSIgY3k9IjI2MS41OTk0OSIgcj0iMjQuNTg2ODI4Ii8+JiN4YTsgICAgICA8cGF0aCBzdHlsZT0iZmlsbDojZmZmZmZmO2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpldmVub2RkO3N0cm9rZTojNjA2Zjc5O3N0cm9rZS13aWR0aDowLjU7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiIGQ9Im0gNDE5LjgzNDkyLDI0NC4yMzA1NiAtMi45MDg3NywyLjkwODc3IDcuNTAyMzEsNy41MDIzMyAtMy43Nzg2NiwzLjU3NTgyIDEwLjMzNTQ2LDAuMDEzNSAwLC05Ljc5NTY1IC0zLjU2ODkzLDMuMzc2MzggLTcuNTgxNDEsLTcuNTgxNCB6IiBpZD0icGF0aDU0NjYiLz4mI3hhOyAgICAgIDxwYXRoIHN0eWxlPSJkaXNwbGF5OmlubGluZTtmaWxsOiNmZmZmZmY7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlOiM2MDZmNzk7c3Ryb2tlLXdpZHRoOjAuNTtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIgZD0ibSA0NDcuOTc4NjgsMjc4LjIxOTA1IDIuOTA4NzcsLTIuOTA4NzcgLTcuNTAyMzEsLTcuNTAyMzMgMy43Nzg3MSwtMy41NzU3NyAtMTAuMzM1NDcsLTAuMDEzNSAwLDkuNzk1NjQgMy41Njg5MiwtMy4zNzYzOSA3LjU4MTQ0LDcuNTgxNCB6IiBpZD0icGF0aDU0NjYtMyIvPiYjeGE7ICAgICAgPHBhdGggc3R5bGU9ImRpc3BsYXk6aW5saW5lO2ZpbGw6I2ZmZmZmZjtmaWxsLW9wYWNpdHk6MTtmaWxsLXJ1bGU6ZXZlbm9kZDtzdHJva2U6IzYwNmY3OTtzdHJva2Utd2lkdGg6MC41O3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxIiBkPSJtIDQzNS40MzA2NywyNTYuNTgxNTUgMi45MDg3NiwyLjkwODc3IDcuNTAyMzQsLTcuNTAyMzIgMy41NzU3OCwzLjc3ODcgMC4wMTM1LC0xMC4zMzU0NSAtOS43OTU2NiwwIDMuMzc2NCwzLjU2ODkyIC03LjU4MTQsNy41ODE0MyB6IiBpZD0icGF0aDU0NjYtMy02Ii8+JiN4YTsgICAgICA8cGF0aCBzdHlsZT0iZGlzcGxheTppbmxpbmU7ZmlsbDojZmZmZmZmO2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpldmVub2RkO3N0cm9rZTojNjA2Zjc5O3N0cm9rZS13aWR0aDowLjU7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiIGQ9Im0gNDMxLjM3MDEzLDI2Ni4yNzUwMSAtMi45MDg3NiwtMi45MDg3OCAtNy41MDIzNCw3LjUwMjM1IC0zLjU3NTc4LC0zLjc3ODczIC0wLjAxMzUsMTAuMzM1NDYgOS43OTU2NSwwIC0zLjM3NjQsLTMuNTY4OTIgNy41ODE0LC03LjU4MTQzIHoiIGlkPSJwYXRoNTQ2Ni0zLTYtNyIvPiYjeGE7ICAgIDwvZz4mI3hhOyAgPC9nPiYjeGE7PC9zdmc+" preserveAspectRatio="none" pointer-events="none"/><image x="212.5" y="59.5" width="46" height="46" xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIGlkPSJzdmc5MzA2IiB2aWV3Qm94PSIwIDAgMTY0LjUxMDAzIDE2NC41MTAwMyIgaGVpZ2h0PSI0Ni40MjgzODdtbSIgd2lkdGg9IjQ2LjQyODM4N21tIj4mI3hhOyAgPGRlZnMgaWQ9ImRlZnM5MzA4Ii8+JiN4YTsgIDxtZXRhZGF0YSBpZD0ibWV0YWRhdGE5MzExIj4mI3hhOyAgICA8cmRmOlJERj4mI3hhOyAgICAgIDxjYzpXb3JrIHJkZjphYm91dD0iIj4mI3hhOyAgICAgICAgPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+JiN4YTsgICAgICAgIDxkYzp0eXBlIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiLz4mI3hhOyAgICAgICAgPGRjOnRpdGxlLz4mI3hhOyAgICAgIDwvY2M6V29yaz4mI3hhOyAgICA8L3JkZjpSREY+JiN4YTsgIDwvbWV0YWRhdGE+JiN4YTsgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zMDkuMTczNTYsLTQ2MS41MzU3NikiIGlkPSJsYXllcjEiPiYjeGE7ICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xNjcuNjkwODcsNDU1LjYxOTE4KSIgaWQ9Imc4MzMyIj4mI3hhOyAgICAgIDxjaXJjbGUgc3R5bGU9Im9wYWNpdHk6MTtmaWxsOiMzOTZjODU7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiMzMTRiNTg7c3Ryb2tlLXdpZHRoOjYuMDkxODQzNjE7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIgaWQ9InBhdGg0MTM2LTYtNS01IiBjeD0iNTU5LjExOTQ1IiBjeT0iODguMTcxNTkzIiByPSI3OS4yMDkwOTEiLz4mI3hhOyAgICAgIDxnIHRyYW5zZm9ybT0ibWF0cml4KDAuODIzMTY4LDAsMCwwLjgyMzE2OCwyNTMuNTEwMTcsLTczMi4yNDQ5OSkiIGlkPSJnODE0My0zIj4mI3hhOyAgICAgICAgPHJlY3Qgcnk9IjIuMTgwNTY5NCIgeT0iOTU3LjY1NzUzIiB4PSIzMDAuMDQ2NzUiIGhlaWdodD0iNzkuMDI4Njc5IiB3aWR0aD0iMTQxLjM2MTc5IiBpZD0icmVjdDY3ODItNC02NSIgc3R5bGU9Im9wYWNpdHk6MTtmaWxsOm5vbmU7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiNjZGM5Y2E7c3Ryb2tlLXdpZHRoOjYuNDEyNTkwNTtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46bWl0ZXI7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIvPiYjeGE7ICAgICAgICA8ZyBpZD0iZzgxMjgtNiI+JiN4YTsgICAgICAgICAgPHBhdGggc3R5bGU9ImRpc3BsYXk6aW5saW5lO29wYWNpdHk6MTtmaWxsOiNkMzQ1M2E7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiNjZGM5Y2E7c3Ryb2tlLXdpZHRoOjI7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiIGQ9Im0gMzQ5LjQ1NjE1LDk4OS4yNDk1NCA0Mi42NDg4MiwwIDAsMTYuMTg2NjYgLTQyLjY0ODgyLDAgeiIgaWQ9InBhdGg4MTI2LTMiLz4mI3hhOyAgICAgICAgICA8cGF0aCBzdHlsZT0iZGlzcGxheTppbmxpbmU7b3BhY2l0eToxO2ZpbGw6I2QzNDUzYTtmaWxsLW9wYWNpdHk6MTtzdHJva2U6I2NkYzljYTtzdHJva2Utd2lkdGg6MjtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIgZD0ibSA0MTcuODgwMzcsMTAwNS43MjQxIDIyLjkwODk5LDAgMCwxNC44NjQ1IC0yMi45MDg5OSwwIHoiIGlkPSJwYXRoODEyNC05Ii8+JiN4YTsgICAgICAgICAgPHBhdGggc3R5bGU9ImRpc3BsYXk6aW5saW5lO29wYWNpdHk6MTtmaWxsOiNkMzQ1M2E7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiNjZGM5Y2E7c3Ryb2tlLXdpZHRoOjI7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiIGQ9Im0gMzcwLjMxMzYzLDEwMDUuODA5MSA0Ni44NTk2NCwwIDAsMTQuNjk4MyAtNDYuODU5NjQsMCB6IiBpZD0icGF0aDgxMjItNCIvPiYjeGE7ICAgICAgICAgIDxwYXRoIHN0eWxlPSJkaXNwbGF5OmlubGluZTtvcGFjaXR5OjE7ZmlsbDojZDM0NTNhO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojY2RjOWNhO3N0cm9rZS13aWR0aDoyO3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxIiBkPSJtIDMwMC43NzAzLDEwMDUuNzI0MSAyMi45MDg5OCwwIDAsMTQuODY0NSAtMjIuOTA4OTgsMCB6IiBpZD0icGF0aDgxMjAtOCIvPiYjeGE7ICAgICAgICAgIDxwYXRoIHN0eWxlPSJkaXNwbGF5OmlubGluZTtvcGFjaXR5OjE7ZmlsbDojZDM0NTNhO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojY2RjOWNhO3N0cm9rZS13aWR0aDoyO3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxIiBkPSJtIDMyMy40MzYzMywxMDA1LjgwOTEgNDYuODU5NjQsMCAwLDE0LjY5ODMgLTQ2Ljg1OTY0LDAgeiIgaWQ9InBhdGg4MTE4LTEiLz4mI3hhOyAgICAgICAgICA8cGF0aCBzdHlsZT0iZGlzcGxheTppbmxpbmU7b3BhY2l0eToxO2ZpbGw6I2QzNDUzYTtmaWxsLW9wYWNpdHk6MTtzdHJva2U6I2NkYzljYTtzdHJva2Utd2lkdGg6MjtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIgZD0ibSAzOTIuMTU2OTIsOTg5LjEwMjEgNDguNjcxNzYsMCAwLDE2LjEzODUgLTQ4LjY3MTc2LDAgeiIgaWQ9InBhdGg4MTE2LTIiLz4mI3hhOyAgICAgICAgICA8cGF0aCBzdHlsZT0iZGlzcGxheTppbmxpbmU7b3BhY2l0eToxO2ZpbGw6I2QzNDUzYTtmaWxsLW9wYWNpdHk6MTtzdHJva2U6I2NkYzljYTtzdHJva2Utd2lkdGg6MjtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIgZD0ibSA0MTcuOTEwMDcsOTc0LjAxMDgzIDIyLjkxODU2LDAgMCwxNC41OTYxOSAtMjIuOTE4NTYsMCB6IiBpZD0icGF0aDgxMTQtOSIvPiYjeGE7ICAgICAgICAgIDxwYXRoIHN0eWxlPSJkaXNwbGF5OmlubGluZTtvcGFjaXR5OjE7ZmlsbDojZDM0NTNhO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojY2RjOWNhO3N0cm9rZS13aWR0aDoyO3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxIiBkPSJtIDM3MC4yODA0NSw5NzQuMjA3NzEgNDYuODU5NjYsMCAwLDE0LjY5ODMyIC00Ni44NTk2NiwwIHoiIGlkPSJwYXRoODExMi0zIi8+JiN4YTsgICAgICAgICAgPHBhdGggc3R5bGU9ImRpc3BsYXk6aW5saW5lO29wYWNpdHk6MTtmaWxsOiNkMzQ1M2E7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiNjZGM5Y2E7c3Ryb2tlLXdpZHRoOjI7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiIGQ9Im0gMzAwLjczMjM2LDk3NC4xMjI4MSAyMi45MTg1NiwwIDAsMTQuNTk2MTggLTIyLjkxODU2LDAgeiIgaWQ9InBhdGg4MTEwLTkiLz4mI3hhOyAgICAgICAgICA8cGF0aCBzdHlsZT0iZGlzcGxheTppbmxpbmU7b3BhY2l0eToxO2ZpbGw6I2QzNDUzYTtmaWxsLW9wYWNpdHk6MTtzdHJva2U6I2NkYzljYTtzdHJva2Utd2lkdGg6MjtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIgZD0ibSAzMjMuNDAzMTcsOTc0LjIwNzcxIDQ2Ljg1OTY0LDAgMCwxNC42OTgzMiAtNDYuODU5NjQsMCB6IiBpZD0icGF0aDgxMDgtMCIvPiYjeGE7ICAgICAgICAgIDxwYXRoIHN0eWxlPSJkaXNwbGF5OmlubGluZTtvcGFjaXR5OjE7ZmlsbDojZDM0NTNhO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojY2RjOWNhO3N0cm9rZS13aWR0aDoyO3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxIiBkPSJtIDMwMC43MzIzNiw5ODkuMTY1MTYgNDguNjcxNzUsMCAwLDE2LjEzODQ0IC00OC42NzE3NSwwIHoiIGlkPSJwYXRoODEwNi04Ii8+JiN4YTsgICAgICAgICAgPHBhdGggc3R5bGU9ImRpc3BsYXk6aW5saW5lO29wYWNpdHk6MTtmaWxsOiNkMzQ1M2E7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiNjZGM5Y2E7c3Ryb2tlLXdpZHRoOjI7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiIGQ9Im0gMzAwLjczMjM2LDEwMjAuMjM4MyAxNDAuMDk2MjcsMCAwLDE2LjIzMzYgLTE0MC4wOTYyNywwIHoiIGlkPSJwYXRoODEwNC04Ii8+JiN4YTsgICAgICAgICAgPHBhdGggc3R5bGU9ImRpc3BsYXk6aW5saW5lO29wYWNpdHk6MTtmaWxsOiNkMzQ1M2E7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiNjZGM5Y2E7c3Ryb2tlLXdpZHRoOjI7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiIGQ9Im0gMzAwLjczMjM2LDk1Ny43NTY4NyAxNDAuMDk2MjcsMCAwLDE2LjIzMzU0IC0xNDAuMDk2MjcsMCB6IiBpZD0icmVjdDU5NjMtNi0yLTEtNi00LTUiLz4mI3hhOyAgICAgICAgPC9nPiYjeGE7ICAgICAgPC9nPiYjeGE7ICAgICAgPGcgaWQ9Imc2ODIzIj4mI3hhOyAgICAgICAgPHBhdGggaWQ9InBhdGg1NDY2LTUiIGQ9Im0gNTE0LjQ5MjE3LDMyLjIxNTc0NCAtOS4zNzA5MSw5LjM3MDkxMyAyNC4xNjk0OSwyNC4xNjk1NTUgLTEyLjE3MzM2LDExLjUxOTg4NiAzMy4yOTY3OSwwLjA0MzQ5IDAsLTMxLjU1NzczIC0xMS40OTc2OSwxMC44NzczNjggLTI0LjQyNDMyLC0yNC40MjQyODggeiIgc3R5bGU9ImZpbGw6I2ZmZmZmZjtmaWxsLW9wYWNpdHk6MTtmaWxsLXJ1bGU6ZXZlbm9kZDtzdHJva2U6IzYwNmY3OTtzdHJva2Utd2lkdGg6MS42MTA4MDMyNTtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIvPiYjeGE7ICAgICAgICA8cGF0aCBpZD0icGF0aDU0NjYtMy00IiBkPSJtIDYwNS4xNjAyOSwxNDEuNzEzMjkgOS4zNzA5MSwtOS4zNzA5MSAtMjQuMTY5NDksLTI0LjE2OTU2IDEyLjE3MzUyLC0xMS41MTk3MjUgLTMzLjI5NjgyLC0wLjA0MzQ5IDAsMzEuNTU3Njk1IDExLjQ5NzY2LC0xMC44Nzc0IDI0LjQyNDQyLDI0LjQyNDI5IHoiIHN0eWxlPSJkaXNwbGF5OmlubGluZTtmaWxsOiNmZmZmZmY7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlOiM2MDZmNzk7c3Ryb2tlLXdpZHRoOjEuNjEwODAzMjU7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiLz4mI3hhOyAgICAgICAgPHBhdGggaWQ9InBhdGg1NDY2LTMtNi03NiIgZD0ibSA1NjQuNzM1NTQsNzIuMDA1Nzc1IDkuMzcwODgsOS4zNzA5MTMgMjQuMTY5NTksLTI0LjE2OTUyNCAxMS41MTk3NiwxMi4xNzM0ODUgMC4wNDM1LC0zMy4yOTY3NTQgLTMxLjU1Nzc3LDAgMTAuODc3NDQsMTEuNDk3NjU2IC0yNC40MjQyOSwyNC40MjQzODUgeiIgc3R5bGU9ImRpc3BsYXk6aW5saW5lO2ZpbGw6I2ZmZmZmZjtmaWxsLW9wYWNpdHk6MTtmaWxsLXJ1bGU6ZXZlbm9kZDtzdHJva2U6IzYwNmY3OTtzdHJva2Utd2lkdGg6MS42MTA4MDMyNTtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIvPiYjeGE7ICAgICAgICA8cGF0aCBpZD0icGF0aDU0NjYtMy02LTctNSIgZD0ibSA1NTEuNjU0MDgsMTAzLjIzNDI5IC05LjM3MDg4LC05LjM3MDk0NSAtMjQuMTY5NTksMjQuMTY5NjI1IC0xMS41MTk3NiwtMTIuMTczNTkgLTAuMDQzNSwzMy4yOTY3OSAzMS41NTc3MywwIC0xMC44Nzc0MywtMTEuNDk3NjYgMjQuNDI0MjksLTI0LjQyNDM4IHoiIHN0eWxlPSJkaXNwbGF5OmlubGluZTtmaWxsOiNmZmZmZmY7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlOiM2MDZmNzk7c3Ryb2tlLXdpZHRoOjEuNjEwODAzMjU7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiLz4mI3hhOyAgICAgIDwvZz4mI3hhOyAgICA8L2c+JiN4YTsgIDwvZz4mI3hhOzwvc3ZnPg==" preserveAspectRatio="none" pointer-events="none"/><image x="271" y="189.5" width="42" height="40" xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIGlkPSJzdmc2MTY0IiB2aWV3Qm94PSIwIDAgMTQ4LjUxOTU3IDE0MS4zMjY1MyIgaGVpZ2h0PSIzOS44ODU0ODdtbSIgd2lkdGg9IjQxLjkxNTUyNG1tIj4mI3hhOyAgPGRlZnMgaWQ9ImRlZnM2MTY2Ii8+JiN4YTsgIDxtZXRhZGF0YSBpZD0ibWV0YWRhdGE2MTY5Ij4mI3hhOyAgICA8cmRmOlJERj4mI3hhOyAgICAgIDxjYzpXb3JrIHJkZjphYm91dD0iIj4mI3hhOyAgICAgICAgPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+JiN4YTsgICAgICAgIDxkYzp0eXBlIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiLz4mI3hhOyAgICAgICAgPGRjOnRpdGxlLz4mI3hhOyAgICAgIDwvY2M6V29yaz4mI3hhOyAgICA8L3JkZjpSREY+JiN4YTsgIDwvbWV0YWRhdGE+JiN4YTsgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC00MTEuNDU0NSwtNDY3LjQxMzIyKSIgaWQ9ImxheWVyMSI+JiN4YTsgICAgPGcgaWQ9Imc0MTQ0IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjUxMTgwMTgsLTAuMDQ3NDE4NSkiPiYjeGE7ICAgICAgPHJlY3Qgc3R5bGU9Im9wYWNpdHk6MTtmaWxsOiMzOTZjODU7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiMzMTRiNTg7c3Ryb2tlLXdpZHRoOjQuNDg0NTg0ODE7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiIGlkPSJyZWN0NTc4NC0zIiB3aWR0aD0iMTQ0LjAzNDk3IiBoZWlnaHQ9IjEzNi44NDE5MyIgeD0iNDEzLjY5NjgxIiB5PSI0NjkuNjU1NTIiLz4mI3hhOyAgICAgIDxwYXRoIHN0eWxlPSJkaXNwbGF5OmlubGluZTtmaWxsOiNmZmZmZmY7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlOiM2MDZmNzk7c3Ryb2tlLXdpZHRoOjEuNjEwODAzMjU7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiIGQ9Im0gNDc5Ljg4NzUyLDU4My45MDA1NSAzZS01LC0xMi42MDc4OSAtMzMuODI5NjcsMCAwLjQ1NzYzLC0xNS45Mzg5MyAtMjMuMzMyODQsMjIuMzcwMTMgMjIuMDg1MzQsMjEuMjI5NDUgMC40MzQyNCwtMTUuMDUyMDkgMzQuMTg2MjQsLTllLTUgeiIgaWQ9InBhdGg1NDY2LTMtNi03LTItNy02NyIvPiYjeGE7ICAgICAgPHBhdGggc3R5bGU9ImRpc3BsYXk6aW5saW5lO2ZpbGw6I2ZmZmZmZjtmaWxsLW9wYWNpdHk6MTtmaWxsLXJ1bGU6ZXZlbm9kZDtzdHJva2U6IzYwNmY3OTtzdHJva2Utd2lkdGg6MS42MTA4MDMyNTtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIgZD0ibSA0OTQuNzU0OTEsNTMwLjg4NjE4IDRlLTUsLTEyLjYwNzkyIC0zMy44Mjk2OCwwIDAuNDU3NjMsLTE1LjkzODkzIC0yMy4zMzI4NywyMi4zNzAxMiAyMi4wODUzNywyMS4yMjk0NiAwLjQzNDI0LC0xNS4wNTIwOSAzNC4xODYyNCwtMTBlLTUgeiIgaWQ9InBhdGg1NDY2LTMtNi03LTItNy0wLTUiLz4mI3hhOyAgICAgIDxwYXRoIHN0eWxlPSJkaXNwbGF5OmlubGluZTtmaWxsOiNmZmZmZmY7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlOiM2MDZmNzk7c3Ryb2tlLXdpZHRoOjEuNjEwODAzMjU7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiIGQ9Im0gNDg4LjQwNDg3LDQ5MS42OTQzIC0xZS00LDEyLjYwNzg4IDMzLjgyOTc0LC0zZS01IC0wLjQ1NzY2LDE1LjkzODk2IDIzLjMzMjksLTIyLjM3MDEzIC0yMi4wODUzNCwtMjEuMjI5NDUgLTAuNDM0MjcsMTUuMDUyMDkgLTM0LjE4NjI3LDEwZS01IHoiIGlkPSJwYXRoNTQ2Ni0zLTYtNy0yLTctMC05LTM1Ii8+JiN4YTsgICAgICA8cGF0aCBzdHlsZT0iZGlzcGxheTppbmxpbmU7ZmlsbDojZmZmZmZmO2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpldmVub2RkO3N0cm9rZTojNjA2Zjc5O3N0cm9rZS13aWR0aDoxLjYxMDgwMzI1O3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxIiBkPSJtIDQ3Ni4zOTM0LDU0Ny4xNzA4OCAtMTBlLTUsMTIuNjA3ODggMzMuODI5NzQsLTNlLTUgLTAuNDU3NjYsMTUuOTM4OTYgMjMuMzMyOSwtMjIuMzcwMTIgLTIyLjA4NTM0LC0yMS4yMjk0NiAtMC40MzQyNywxNS4wNTIxMiAtMzQuMTg2MjcsN2UtNSB6IiBpZD0icGF0aDU0NjYtMy02LTctMi03LTAtOS0zLTYiLz4mI3hhOyAgICA8L2c+JiN4YTsgIDwvZz4mI3hhOzwvc3ZnPg==" preserveAspectRatio="none" pointer-events="none"/><image x="271" y="127.5" width="42" height="40" xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIGlkPSJzdmc2ODEzIiB2aWV3Qm94PSIwIDAgMTQ3LjQ2ODY4IDE0MC4zMjY1NSIgaGVpZ2h0PSIzOS42MDMyNzFtbSIgd2lkdGg9IjQxLjYxODkzOG1tIj4mI3hhOyAgPGRlZnMgaWQ9ImRlZnM2ODE1Ii8+JiN4YTsgIDxtZXRhZGF0YSBpZD0ibWV0YWRhdGE2ODE4Ij4mI3hhOyAgICA8cmRmOlJERj4mI3hhOyAgICAgIDxjYzpXb3JrIHJkZjphYm91dD0iIj4mI3hhOyAgICAgICAgPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+JiN4YTsgICAgICAgIDxkYzp0eXBlIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiLz4mI3hhOyAgICAgICAgPGRjOnRpdGxlLz4mI3hhOyAgICAgIDwvY2M6V29yaz4mI3hhOyAgICA8L3JkZjpSREY+JiN4YTsgIDwvbWV0YWRhdGE+JiN4YTsgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMTcuNjk0MjMsLTI4Ny45MTMyKSIgaWQ9ImxheWVyMSI+JiN4YTsgICAgPGcgdHJhbnNmb3JtPSJtYXRyaXgoMy44MTk1NTk3LDAsMCwzLjgxOTU1OTcsLTE0ODEuNjg2OCwtMTA4NC42OTQxKSIgaWQ9Imc2MDUwIiBzdHlsZT0iZGlzcGxheTppbmxpbmUiPiYjeGE7ICAgICAgPGcgdHJhbnNmb3JtPSJtYXRyaXgoMS4xNDY1NzE1LDAsMCwxLjE0NjU3MTUsLTYwLjk4NzIzMywtMzkuOTgyNTEpIiBpZD0iZzYyNjUiPiYjeGE7ICAgICAgICA8cmVjdCB5PSIzNDguODAzNDciIHg9IjQxOC45MDUiIGhlaWdodD0iMzEuMDI1NjU0IiB3aWR0aD0iMzIuNjU2NTAyIiBpZD0icmVjdDU3ODQtMCIgc3R5bGU9Im9wYWNpdHk6MTtmaWxsOiMzOTZjODU7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiMzMTRiNTg7c3Ryb2tlLXdpZHRoOjEuMDE2NzcyOTk7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiLz4mI3hhOyAgICAgICAgPHBhdGggaWQ9InBhdGg1NDY2LTMtNi03LTItNy0wLTktNiIgZD0ibSA0MzUuMjg3MTEsMzUwLjkxNzk3IC00LjM1OTM4LDQuNTM3MTEgMy4wOTE4LDAuMDg3OSAwLDIuOTc0NjEgYSA2LjAyNjc4NTQsNi4wMjY3ODU0IDAgMCAwIC0xLjU0Mjk3LDAuNzEwOTQgbCAtNC4wNzAzMSwtNC4wNjgzNiAyLjM4MjgxLC0yLjI0ODA1IC02LjYzODY3LC0wLjE0MDYzIDAuMTI1LDYuMjkxMDIgMi4yNDgwNSwtMi4xMjMwNSA0LjEzODY3LDQuMTM4NjcgYSA2LjAyNjc4NTQsNi4wMjY3ODU0IDAgMCAwIC0wLjc0ODA1LDEuNzYxNzIgbCAtNC4wNTQ2OCwwIDAuMDk1NywtMy4yNzM0MyAtNC43OTI5Nyw0LjU5Mzc1IDQuNTM1MTYsNC4zNjEzMiAwLjA4OTgsLTMuMDkxNzkgNC4wNjA1NSwwIGEgNi4wMjY3ODU0LDYuMDI2Nzg1NCAwIDAgMCAwLjY5MTQsMS44NDc2NSBsIC0zLjk3MDcsMy45NzA3MSAtMi4yNDgwNSwtMi4zODA4NiAtMC4xNDA2Miw2LjYzNjcyIDYuMjkxMDEsLTAuMTI1IC0yLjEyMzA0LC0yLjI0ODA1IDMuOTMxNjQsLTMuOTMzNTkgYSA2LjAyNjc4NTQsNi4wMjY3ODU0IDAgMCAwIDEuOTIxODcsMC44OTg0MyBsIDAsMy42ODU1NSAtMy4yNzM0NCwtMC4wOTM3IDQuNTkzNzUsNC43OTI5NyA0LjM1OTM4LC00LjUzNzExIC0zLjA4OTg0LC0wLjA4NzkgMCwtMy42MzY3MiBhIDYuMDI2Nzg1NCw2LjAyNjc4NTQgMCAwIDAgMi4yMzgyOCwtMC44NzUgbCAzLjc3MTQ4LDMuNzcxNDggLTIuMzgwODYsMi4yNDgwNSA2LjYzNjcyLDAuMTQwNjMgLTAuMTIzMDUsLTYuMjkxMDIgLTIuMjUsMi4xMjMwNSBMIDQ0MC44NDU3LDM2Ny41IGEgNi4wMjY3ODU0LDYuMDI2Nzg1NCAwIDAgMCAwLjg1NTQ3LC0yLjI1MTk1IGwgMy42MzA4NiwwIC0wLjA5MzcsMy4yNzM0MyA0Ljc5Mjk3LC00LjU5NTcgLTQuNTM3MTEsLTQuMzU5MzcgLTAuMDg3OSwzLjA5MTc5IC0zLjg0Mzc1LDAgYSA2LjAyNjc4NTQsNi4wMjY3ODU0IDAgMCAwIC0wLjg1OTM4LC0xLjgxMDU0IGwgMy44MjAzMiwtMy44MjAzMiAyLjI0ODA0LDIuMzgyODIgMC4xNDA2MywtNi42Mzg2OCAtNi4yOTEwMiwwLjEyNSAyLjEyMzA1LDIuMjUgLTMuOTQxNDEsMy45Mzk0NiBhIDYuMDI2Nzg1NCw2LjAyNjc4NTQgMCAwIDAgLTIuMTk1MzEsLTAuNzYzNjcgbCAwLC0yLjcwNTA4IDMuMjczNDQsMC4wOTM3IC00LjU5Mzc1LC00Ljc5Mjk3IHoiIHN0eWxlPSJkaXNwbGF5OmlubGluZTtmaWxsOiNmZmZmZmY7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlOiM2MDZmNzk7c3Ryb2tlLXdpZHRoOjAuNTtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIvPiYjeGE7ICAgICAgPC9nPiYjeGE7ICAgIDwvZz4mI3hhOyAgPC9nPiYjeGE7PC9zdmc+" preserveAspectRatio="none" pointer-events="none"/><image x="215" y="176.5" width="41" height="57" xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIGlkPSJzdmc3NDE4IiB2aWV3Qm94PSIwIDAgMTQ2LjUyMTIyIDIwMy41MzAwMyIgaGVpZ2h0PSI1Ny40NDA2OTdtbSIgd2lkdGg9IjQxLjM1MTU0M21tIj4mI3hhOyAgPGRlZnMgaWQ9ImRlZnM3NDIwIi8+JiN4YTsgIDxtZXRhZGF0YSBpZD0ibWV0YWRhdGE3NDIzIj4mI3hhOyAgICA8cmRmOlJERj4mI3hhOyAgICAgIDxjYzpXb3JrIHJkZjphYm91dD0iIj4mI3hhOyAgICAgICAgPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+JiN4YTsgICAgICAgIDxkYzp0eXBlIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiLz4mI3hhOyAgICAgICAgPGRjOnRpdGxlLz4mI3hhOyAgICAgIDwvY2M6V29yaz4mI3hhOyAgICA8L3JkZjpSREY+JiN4YTsgIDwvbWV0YWRhdGE+JiN4YTsgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yOTIuNDUzNjcsLTM2Ny43NDAwNikiIGlkPSJsYXllcjEiPiYjeGE7ICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMC44NzY1OTMsLTI1My42MzM4OCkiIGlkPSJnNzI4NSI+JiN4YTsgICAgICA8ZyBzdHlsZT0iZGlzcGxheTppbmxpbmUiIGlkPSJnNjA1MC0zIiB0cmFuc2Zvcm09Im1hdHJpeCg0LjM1MTI2MDYsMCwwLDQuMzUxMjYwNiwtMTUxNy4yMjI0LC04MzAuMDQzNjUpIj4mI3hhOyAgICAgICAgPHJlY3QgeT0iMzQ4LjgwMzQ3IiB4PSI0MTguOTA1IiBoZWlnaHQ9IjMxLjAyNTY1NCIgd2lkdGg9IjMyLjY1NjUwMiIgaWQ9InJlY3Q1Nzg0LTAtNiIgc3R5bGU9Im9wYWNpdHk6MTtmaWxsOiMzOTZjODU7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiMzMTRiNTg7c3Ryb2tlLXdpZHRoOjEuMDE2NzcyOTk7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiLz4mI3hhOyAgICAgICAgPHBhdGggaWQ9InBhdGg1NDY2LTMtNi03LTItNy0wLTktNi0xIiBkPSJtIDQzNS4yODcxMSwzNTAuOTE3OTcgLTQuMzU5MzgsNC41MzcxMSAzLjA5MTgsMC4wODc5IDAsMi45NzQ2MSBhIDYuMDI2Nzg1NCw2LjAyNjc4NTQgMCAwIDAgLTEuNTQyOTcsMC43MTA5NCBsIC00LjA3MDMxLC00LjA2ODM2IDIuMzgyODEsLTIuMjQ4MDUgLTYuNjM4NjcsLTAuMTQwNjMgMC4xMjUsNi4yOTEwMiAyLjI0ODA1LC0yLjEyMzA1IDQuMTM4NjcsNC4xMzg2NyBhIDYuMDI2Nzg1NCw2LjAyNjc4NTQgMCAwIDAgLTAuNzQ4MDUsMS43NjE3MiBsIC00LjA1NDY4LDAgMC4wOTU3LC0zLjI3MzQzIC00Ljc5Mjk3LDQuNTkzNzUgNC41MzUxNiw0LjM2MTMyIDAuMDg5OCwtMy4wOTE3OSA0LjA2MDU1LDAgYSA2LjAyNjc4NTQsNi4wMjY3ODU0IDAgMCAwIDAuNjkxNCwxLjg0NzY1IGwgLTMuOTcwNywzLjk3MDcxIC0yLjI0ODA1LC0yLjM4MDg2IC0wLjE0MDYyLDYuNjM2NzIgNi4yOTEwMSwtMC4xMjUgLTIuMTIzMDQsLTIuMjQ4MDUgMy45MzE2NCwtMy45MzM1OSBhIDYuMDI2Nzg1NCw2LjAyNjc4NTQgMCAwIDAgMS45MjE4NywwLjg5ODQzIGwgMCwzLjY4NTU1IC0zLjI3MzQ0LC0wLjA5MzcgNC41OTM3NSw0Ljc5Mjk3IDQuMzU5MzgsLTQuNTM3MTEgLTMuMDg5ODQsLTAuMDg3OSAwLC0zLjYzNjcyIGEgNi4wMjY3ODU0LDYuMDI2Nzg1NCAwIDAgMCAyLjIzODI4LC0wLjg3NSBsIDMuNzcxNDgsMy43NzE0OCAtMi4zODA4NiwyLjI0ODA1IDYuNjM2NzIsMC4xNDA2MyAtMC4xMjMwNSwtNi4yOTEwMiAtMi4yNSwyLjEyMzA1IEwgNDQwLjg0NTcsMzY3LjUgYSA2LjAyNjc4NTQsNi4wMjY3ODU0IDAgMCAwIDAuODU1NDcsLTIuMjUxOTUgbCAzLjYzMDg2LDAgLTAuMDkzNywzLjI3MzQzIDQuNzkyOTcsLTQuNTk1NyAtNC41MzcxMSwtNC4zNTkzNyAtMC4wODc5LDMuMDkxNzkgLTMuODQzNzUsMCBhIDYuMDI2Nzg1NCw2LjAyNjc4NTQgMCAwIDAgLTAuODU5MzgsLTEuODEwNTQgbCAzLjgyMDMyLC0zLjgyMDMyIDIuMjQ4MDQsMi4zODI4MiAwLjE0MDYzLC02LjYzODY4IC02LjI5MTAyLDAuMTI1IDIuMTIzMDUsMi4yNSAtMy45NDE0MSwzLjkzOTQ2IGEgNi4wMjY3ODU0LDYuMDI2Nzg1NCAwIDAgMCAtMi4xOTUzMSwtMC43NjM2NyBsIDAsLTIuNzA1MDggMy4yNzM0NCwwLjA5MzcgLTQuNTkzNzUsLTQuNzkyOTcgeiIgc3R5bGU9ImRpc3BsYXk6aW5saW5lO2ZpbGw6I2ZmZmZmZjtmaWxsLW9wYWNpdHk6MTtmaWxsLXJ1bGU6ZXZlbm9kZDtzdHJva2U6IzYwNmY3OTtzdHJva2Utd2lkdGg6MC41O3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxIi8+JiN4YTsgICAgICA8L2c+JiN4YTsgICAgICA8ZyBpZD0iZzcyODEiPiYjeGE7ICAgICAgICA8cmVjdCB5PSI2MjMuNjA2ODciIHg9IjMwNS41NjMyIiBoZWlnaHQ9IjU5Ljc2MDk2IiB3aWR0aD0iMTQxLjk1Mzc4IiBpZD0icmVjdDYwODMtMCIgc3R5bGU9Im9wYWNpdHk6MTtmaWxsOiNlODNkMWM7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiNjNTI4MmU7c3Ryb2tlLXdpZHRoOjQuNDY1ODcwMzg7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjAuODQzMTM3MjUiLz4mI3hhOyAgICAgICAgPHBhdGggaWQ9InJlY3Q2MDg1LTctOS04LTIiIGQ9Im0gMzE4LjA3MzcyLDYzMi42ODExMiAwLDE2Ljg2NTIzIDI1LjUxMzY3LDAgMCwtNC45MTk5MiAyMy42MDE1NiwxMC4yNTk3NyAtMjMuNjAxNTYsMTAuMDY4MzYgMCwtNS4yMTI4OSAtMjUuNTEzNjcsMCAwLDE2Ljg2MzI4IDI1LjUxMzY3LDAgMCwtMy44NDM3NSAxLjE4MTY0LC0wLjUwMzkxIDYyLjM4MDg2LDAgMS4zMzM5OCwwLjU4MDA4IDAsMy43Njc1OCAyNS41MTE3MiwwIDAsLTE2Ljg2MzI4IC0yNS41MTE3MiwwIDAsNS43ODMyIC0yMy43NDIxOSwtMTAuMzIwMzEgMjMuNzQyMTksLTEwLjEzMDg2IDAsNC40NzI2NSAyNS41MTE3MiwwIDAsLTE2Ljg2NTIzIC0yNS41MTE3MiwwIDAsNC41ODU5NCAtMC44MTQ0NSwwLjM0NzY1IC02My4zODg2NywwIC0wLjY5MzM2LC0wLjMwMDc4IDAsLTQuNjMyODEgLTI1LjUxMzY3LDAgeiBtIDM2LjA2NDQ1LDkuMjE4NzUgNDMuNDg4MjgsMCAtMjEuOTQ5MjIsOS4zNjMyOCAtMjEuNTM5MDYsLTkuMzYzMjggeiBtIDIyLjExMzI4LDE2LjkyNTc4IDIxLjA0MTAyLDkuMTQ2NDkgLTQyLjQ3ODUyLDAgMjEuNDM3NSwtOS4xNDY0OSB6IiBzdHlsZT0iZGlzcGxheTppbmxpbmU7b3BhY2l0eToxO2ZpbGw6I2ZmZmZmZjtmaWxsLW9wYWNpdHk6MTtzdHJva2U6Izg0NDA0MztzdHJva2Utd2lkdGg6MTtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIvPiYjeGE7ICAgICAgPC9nPiYjeGE7ICAgIDwvZz4mI3hhOyAgPC9nPiYjeGE7PC9zdmc+" preserveAspectRatio="none" pointer-events="none"/><image x="214.5" y="112.5" width="42" height="58" xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIGlkPSJzdmc4MDMxIiB2aWV3Qm94PSIwIDAgMTQ3LjU2MzAzIDIwNC4yNjQyNiIgaGVpZ2h0PSI1Ny42NDc5MTVtbSIgd2lkdGg9IjQxLjY0NTU2NW1tIj4mI3hhOyAgPGRlZnMgaWQ9ImRlZnM4MDMzIi8+JiN4YTsgIDxtZXRhZGF0YSBpZD0ibWV0YWRhdGE4MDM2Ij4mI3hhOyAgICA8cmRmOlJERj4mI3hhOyAgICAgIDxjYzpXb3JrIHJkZjphYm91dD0iIj4mI3hhOyAgICAgICAgPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+JiN4YTsgICAgICAgIDxkYzp0eXBlIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiLz4mI3hhOyAgICAgICAgPGRjOnRpdGxlLz4mI3hhOyAgICAgIDwvY2M6V29yaz4mI3hhOyAgICA8L3JkZjpSREY+JiN4YTsgIDwvbWV0YWRhdGE+JiN4YTsgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zMDYuMjE4NDgsLTM5OC44MDE1KSIgaWQ9ImxheWVyMSI+JiN4YTsgICAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTE3OS4wNDE5MSw1LjU0MDMwOTkpIiBpZD0iZzc1MjAiPiYjeGE7ICAgICAgPGcgaWQ9Imc3NTEyIj4mI3hhOyAgICAgICAgPHJlY3QgeT0iNDU5LjQyNTMyIiB4PSI0ODcuNTc4MTYiIGhlaWdodD0iMTM1Ljg3MzciIHdpZHRoPSIxNDMuMDE1ODIiIGlkPSJyZWN0NTc4NC0wLTIiIHN0eWxlPSJvcGFjaXR5OjE7ZmlsbDojMzk2Yzg1O2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojMzE0YjU4O3N0cm9rZS13aWR0aDo0LjQ1Mjg1MzY4O3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxIi8+JiN4YTsgICAgICAgIDxnIGlkPSJnNzUwNiI+JiN4YTsgICAgICAgICAgPHBhdGggc3R5bGU9ImRpc3BsYXk6aW5saW5lO2ZpbGw6I2ZmZmZmZjtmaWxsLW9wYWNpdHk6MTtmaWxsLXJ1bGU6ZXZlbm9kZDtzdHJva2U6IzYwNmY3OTtzdHJva2Utd2lkdGg6MC44NzUzMjc0NztzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIgZD0ibSA1NDAuMzQyMTEsNTI0LjU2MjUzIGMgLTAuMzIxMDcsLTEuMTMzMTIgLTAuODI5NiwtMi4yMDQ0NiAtMS41MDQ0OCwtMy4xNjk2NCBsIDYuNjg4MDcsLTYuNjg4MDUgMy45MzU1NCw0LjE3MTQ5IDAuMjQ2MTksLTExLjYyMjA1IC0xMS4wMTMzOSwwLjIxODg1IDMuNzE2NzIsMy45Mzg5NyAtNi45MDAwNSw2Ljg5NjY0IGMgLTEuMTgyMiwtMC42OTA4IC0yLjQ4NzU0LC0xLjE0NDg3IC0zLjg0MzIzLC0xLjMzNjkzIGwgMCwtNC43MzU2NSA1LjczMDY2LDAuMTY0MDMgLTguMDQyMDcsLTguMzkwODQgLTZlLTUsOGUtNSAtNy42MzE3OCw3Ljk0MjkzIDUuNDEyNjgsMC4xNTM4NyAwLDUuMjA3NTIgYyAtMC45NTQ2NiwwLjI4NTI1IC0xLjg2NDA5LDAuNzA0MjggLTIuNzAxMjIsMS4yNDQ2MSBsIC03LjEyNTY5LC03LjEyMjMgNC4xNzE0OCwtMy45MzU1NiAtMTEuNjIyMDMsLTAuMjQ2MTggMC4yMTg4NCwxMS4wMTM0IDMuOTM1NTYsLTMuNzE2NzQgNy4yNDUzNyw3LjI0NTM5IGMgLTAuNTk4MDMsMC45NTE3MyAtMS4wNDAxMiwxLjk5MjkyIC0xLjMwOTU3LDMuMDg0MTYgbCAtNy4wOTgzNiwwIDAuMTY3NTUsLTUuNzMwNjMgLTguMzkwODQsOC4wNDIwNiA3LjkzOTUxLDcuNjM1MTcgMC4xNTcyLC01LjQxMjY1IDcuMTA4NjMsMCBjIDAuMjIzMDcsMS4xMzczNiAwLjYzMjAyLDIuMjMwMTkgMS4yMTA0LDMuMjM0NTkgbCAtNi45NTEzMiw2Ljk1MTMzIC0zLjkzNTU4LC00LjE2ODA1IC0wLjI0NjE2LDExLjYxODYgMTEuMDEzMzgsLTAuMjE4ODMgLTMuNzE2NzEsLTMuOTM1NTUgNi44ODI5NSwtNi44ODYzNyBjIDEuMDE5NjgsMC43MTkxIDIuMTU4ODQsMS4yNTE2NCAzLjM2NDUzLDEuNTcyODQgbCAwLDYuNDUyMTMgLTUuNzMwNjYsLTAuMTY0MDUgOC4wNDIwNyw4LjM5MDg0IDcuNjMxNzYsLTcuOTQyOSAtNS40MDkyNCwtMC4xNTM4OSAwLC02LjM2NjY1IGMgMS4zOTU3NSwtMC4yNDIzNiAyLjcyODM5LC0wLjc2MzMzIDMuOTE4NDUsLTEuNTMxOCBsIDYuNjAyNTgsNi42MDI1NiAtNC4xNjgwNywzLjkzNTU0IDExLjYxODYsMC4yNDYyIC0wLjIxNTQxLC0xMS4wMTM0IC0zLjkzODk4LDMuNzE2NzIgLTYuNzE4NzYsLTYuNzE1NDkgYyAwLjc1OTQ0LC0xLjE5OTk1IDEuMjY4ODIsLTIuNTQwODYgMS40OTc2NCwtMy45NDIzOCIgaWQ9InBhdGg1NDY2LTMtNi03LTItNy0wLTktNi03LTIiLz4mI3hhOyAgICAgICAgICA8cGF0aCBzdHlsZT0iZGlzcGxheTppbmxpbmU7ZmlsbDojZmZmZmZmO2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpldmVub2RkO3N0cm9rZTojNjA2Zjc5O3N0cm9rZS13aWR0aDowLjg3NTMyNzQ3O3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxIiBkPSJtIDU0MC41MDYxNSw1MjkuMjIyOSAzNi45MjE1NywwLjE5MTU4IGMgMC4yMjMwNiwxLjEzNzM2IDAuNjMyMDIsMi4yMzAxOSAxLjIxMDQxLDMuMjM0NTkgbCAtNi45NTEzMyw2Ljk1MTMzIC0zLjkzNTU3LC00LjE2ODA1IC0wLjI0NjE4LDExLjYxODYgMTEuMDEzMzksLTAuMjE4ODMgLTMuNzE2NywtMy45MzU1NSA2Ljg4Mjk0LC02Ljg4NjM3IGMgMS4wMTk2OSwwLjcxOTEgMi4xNTg4NSwxLjI1MTY0IDMuMzY0NTIsMS41NzI4NCBsIDAsNi40NTIxMyAtNS43MzA2NiwtMC4xNjQwNSA4LjA0MjA3LDguMzkwODQgNy42MzE3OCwtNy45NDI5IC01LjQwOTI0LC0wLjE1Mzg5IDAsLTYuMzY2NjUgYyAxLjM5NTczLC0wLjI0MjM2IDIuNzI4MzgsLTAuNzYzMzMgMy45MTg0NCwtMS41MzE4IGwgNi42MDI1OCw2LjYwMjU2IC00LjE2ODA3LDMuOTM1NTQgMTEuNjE4NiwwLjI0NjIgLTAuMjE1NDEsLTExLjAxMzQgLTMuOTM4OTcsMy43MTY3MiAtNi43MTg3NywtNi43MTU0OSBjIDAuNzU5NDQsLTEuMTk5OTUgMS4yNjg4MiwtMi41NDA4NiAxLjQ5NzY0LC0zLjk0MjM4IGwgNi4zNTYzOCwwIC0wLjE2NDAzLDUuNzMwNjQgOC4zOTA4NCwtOC4wNDU0OCAtNy45NDI5MiwtNy42MzE3NyAtMC4xNTM4OCw1LjQxMjY3IC02LjcyOTA4LDAgYyAtMC4zMjEwOCwtMS4xMzMxMiAtMC44Mjk2LC0yLjIwNDQ2IC0xLjUwNDQ4LC0zLjE2OTY0IGwgNi42ODgwNywtNi42ODgwNSAzLjkzNTUzLDQuMTcxNDkgMC4yNDYxOSwtMTEuNjIyMDUgLTExLjAxMzQsMC4yMTg4NSAzLjcxNjczLDMuOTM4OTcgLTYuOTAwMDUsNi44OTY2NCBjIC0xLjE4MjE5LC0wLjY5MDggLTIuNDg3NTQsLTEuMTQ0ODcgLTMuODQzMjIsLTEuMzM2OTMgbCAwLC00LjczNTY1IDUuNzMwNjUsMC4xNjQwMyAtOC4wNDIwNiwtOC4zOTA4NCAtNmUtNSw4ZS01IC03LjYzMTc4LDcuOTQyOTMgNS40MTI2NywwLjE1Mzg3IDAsNS4yMDc1MiBjIC0wLjk1NDY2LDAuMjg1MjUgLTEuODY0MDksMC43MDQyOCAtMi43MDEyMSwxLjI0NDYxIGwgLTcuMTI1NywtNy4xMjIzIDQuMTcxNDgsLTMuOTM1NTYgLTExLjYyMjAzLC0wLjI0NjE4IDAuMjE4ODUsMTEuMDEzNCAzLjkzNTU0LC0zLjcxNjc0IDcuMjQ1MzksNy4yNDUzOSBjIC0wLjU5ODAzLDAuOTUxNzMgLTEuMDQwMTMsMS45OTI5MiAtMS4zMDk1OCwzLjA4NDE2IGwgLTM3LjE5Njg3LC0wLjEyMDgxIiBpZD0icGF0aDU0NjYtMy02LTctMi03LTAtOS02LTctMi0yIi8+JiN4YTsgICAgICAgICAgPHBhdGggc3R5bGU9Im9wYWNpdHk6MTtmaWxsOiNmZmZmZmY7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiM2MDZmNzk7c3Ryb2tlLXdpZHRoOjAuMTg5NDQzNDc7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOm1pdGVyO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjAuOTYwNzg0MzEiIGQ9Im0gNTU4LjUxNzMyLDU0My43MTY4MyBjIC0xLjA5OTY0LC0xLjM3NzE2IC0xLjk4OTc2LC00LjMwMzMgLTIuNjQ3MDYsLTguNzAxNzUgLTAuNDcwNDgsLTMuMTQ4MzEgLTAuNDcwNDgsLTEyLjc0Mzk5IDAsLTE1Ljg5MjMgMC42NTczLC00LjM5ODQ0IDEuNTQ3NDIsLTcuMzI0NTkgMi42NDcwNiwtOC43MDE3NCAxLjAzNDU4LC0xLjI5NTY4IDEuOTUzMzIsLTAuODI4NDUgMi45Nzc2NywxLjUxNDMgMS40NjkxMSwzLjM1OTk4IDIuMTYxMzEsOC4yMDY3NyAyLjE2MTMxLDE1LjEzMzU5IDAsNi45MjY4MiAtMC42OTIyLDExLjc3MzYyIC0yLjE2MTMxLDE1LjEzMzU5IC0xLjAyNDM1LDIuMzQyNzUgLTEuOTQzMDksMi44MDk5OCAtMi45Nzc2NywxLjUxNDMxIHogbSAyLjI0MDY1LC0yLjQxNjAzIGMgMi45OTAwNCwtMy40MzE3NSAzLjAwMjA4LC0yNS4yNzU2NiAwLjAxNTgsLTI4Ljc1NzM0IC0wLjc5MzQ0LC0wLjkyNTA4IC0xLjM4NzM5LC0wLjg5NzUgLTIuMjU0NDEsMC4xMDQ3IC0xLjcyNzM0LDEuOTk2NjYgLTMuMDgyMTgsOS41Mjc5MiAtMi44MDg2NCwxNS42MTI3IDAuNDI0MzksOS40NDA1NyAyLjgxMDk4LDE1LjYwNjU1IDUuMDQ3MjIsMTMuMDM5OTQgeiIgaWQ9InBhdGg3NDUxIi8+JiN4YTsgICAgICAgICAgPHJlY3Qgc3R5bGU9Im9wYWNpdHk6MTtmaWxsOm5vbmU7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiNmZmZmZmY7c3Ryb2tlLXdpZHRoOjEuNjAwMDAwMDI7c3Ryb2tlLWxpbmVjYXA6YnV0dDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5OjYuNDAwMDAwMSwgMS42MDAwMDAwMjtzdHJva2UtZGFzaG9mZnNldDowO3N0cm9rZS1vcGFjaXR5OjEiIGlkPSJyZWN0NzQ3NyIgd2lkdGg9IjExOS4xNDc0OSIgaGVpZ2h0PSI5Mi42MzA5ODkiIHg9IjQ5OS4yMTczOCIgeT0iNDc5Ljk1OTI2IiByeT0iMTMuMDgxNDc1Ii8+JiN4YTsgICAgICAgIDwvZz4mI3hhOyAgICAgIDwvZz4mI3hhOyAgICAgIDxnIHRyYW5zZm9ybT0ibWF0cml4KDEuMDA3ODA4OSwwLDAsMC45OTk3MTk0OSwzNjYuMTE4NDgsLTQyOC4xODU2NikiIGlkPSJnNzI5My02Ij4mI3hhOyAgICAgICAgPHJlY3QgeT0iODIzLjkxMDI4IiB4PSIxMjAuNDUxNjkiIGhlaWdodD0iNTkuNzYwOTYiIHdpZHRoPSIxNDEuOTUzNzgiIGlkPSJyZWN0NjA4My0wLTgtMSIgc3R5bGU9Im9wYWNpdHk6MTtmaWxsOiNlODNkMWM7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiNjNTI4MmU7c3Ryb2tlLXdpZHRoOjQuNDY1ODcwMzg7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjAuODQzMTM3MjUiLz4mI3hhOyAgICAgICAgPHBhdGggaWQ9InJlY3Q2MDg1LTctOS04LTItNy01IiBkPSJtIDEzMi45NjIyMiw4MzIuOTg0NTEgMCwxNi44NjUyMyAyNS41MTM2NywwIDAsLTQuOTE5OTIgMjMuNjAxNTYsMTAuMjU5NzcgLTIzLjYwMTU2LDEwLjA2ODM2IDAsLTUuMjEyODkgLTI1LjUxMzY3LDAgMCwxNi44NjMyOCAyNS41MTM2NywwIDAsLTMuODQzNzUgMS4xODE2NCwtMC41MDM5MSA2Mi4zODA4NiwwIDEuMzMzOTgsMC41ODAwOCAwLDMuNzY3NTggMjUuNTExNzIsMCAwLC0xNi44NjMyOCAtMjUuNTExNzIsMCAwLDUuNzgzMiAtMjMuNzQyMTksLTEwLjMyMDMxIDIzLjc0MjE5LC0xMC4xMzA4NiAwLDQuNDcyNjUgMjUuNTExNzIsMCAwLC0xNi44NjUyMyAtMjUuNTExNzIsMCAwLDQuNTg1OTQgLTAuODE0NDUsMC4zNDc2NSAtNjMuMzg4NjcsMCAtMC42OTMzNiwtMC4zMDA3OCAwLC00LjYzMjgxIC0yNS41MTM2NywwIHogbSAzNi4wNjQ0NSw5LjIxODc1IDQzLjQ4ODI4LDAgLTIxLjk0OTIyLDkuMzYzMjggLTIxLjUzOTA2LC05LjM2MzI4IHogbSAyMi4xMTMyOCwxNi45MjU3OCAyMS4wNDEwMiw5LjE0NjQ5IC00Mi40Nzg1MiwwIDIxLjQzNzUsLTkuMTQ2NDkgeiIgc3R5bGU9ImRpc3BsYXk6aW5saW5lO29wYWNpdHk6MTtmaWxsOiNmZmZmZmY7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiM4NDQwNDM7c3Ryb2tlLXdpZHRoOjE7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiLz4mI3hhOyAgICAgIDwvZz4mI3hhOyAgICA8L2c+JiN4YTsgIDwvZz4mI3hhOzwvc3ZnPg==" preserveAspectRatio="none" pointer-events="none"/><image x="129.5" y="358" width="58" height="34" xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIGlkPSJzdmc0MzY3IiB2aWV3Qm94PSIwIDAgMjA0LjMxNDI2IDEyMC43NTMxOCIgaGVpZ2h0PSIzNC4wNzkyMzFtbSIgd2lkdGg9IjU3LjY2MjAyNW1tIj4mI3hhOyAgPGRlZnMgaWQ9ImRlZnM0MzY5Ii8+JiN4YTsgIDxtZXRhZGF0YSBpZD0ibWV0YWRhdGE0MzcyIj4mI3hhOyAgICA8cmRmOlJERj4mI3hhOyAgICAgIDxjYzpXb3JrIHJkZjphYm91dD0iIj4mI3hhOyAgICAgICAgPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+JiN4YTsgICAgICAgIDxkYzp0eXBlIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiLz4mI3hhOyAgICAgICAgPGRjOnRpdGxlLz4mI3hhOyAgICAgIDwvY2M6V29yaz4mI3hhOyAgICA8L3JkZjpSREY+JiN4YTsgIDwvbWV0YWRhdGE+JiN4YTsgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMTQuOTg1NzMsLTE4My40MTQxOSkiIGlkPSJsYXllcjEiPiYjeGE7ICAgIDxnIHRyYW5zZm9ybT0ibWF0cml4KDAuODYzNTIyNDUsMCwwLDAuODYzNTIyNDUsLTE5MC4zOTM2NCwtNDA4LjQ0MjYpIiBpZD0iZzg0MDIiPiYjeGE7ICAgICAgPHBhdGggc3R5bGU9ImRpc3BsYXk6aW5saW5lO29wYWNpdHk6MTtmaWxsOiNmZmZmZmY7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiNiMGIwYjE7c3Ryb2tlLXdpZHRoOjYuNDQzMjEyOTk7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOmJldmVsO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiIGQ9Im0gNTczLjUxNTI3LDY4OC42MTk4NyBhIDc0LjAxOTkyLDY2LjY5NzcxNyAwIDAgMCAtNzMuMDU4NzQsNTYuNTE2NTQgMzIuNDk4NjYyLDMwLjA1NzkyNCAwIDAgMCAtMjcuNzg2MzcsMjkuNzA1NDcgMzIuNDk4NjYyLDMwLjA1NzkyNCAwIDAgMCAzMi40OTkyMywzMC4wNTc4IDMyLjQ5ODY2MiwzMC4wNTc5MjQgMCAwIDAgMTQuOTc1NDQsLTMuMzkxNCA3NC4wMTk5Miw2Ni42OTc3MTcgMCAwIDAgNTMuMzcwNDQsMjAuNTA2MyA3NC4wMTk5Miw2Ni42OTc3MTcgMCAwIDAgNTAuMTExMDksLTE3LjcgNDIuNjI0NDYxLDQ1LjQ3MTk4MiAwIDAgMCAxNy4wMDc4LDMuODAwNSA0Mi42MjQ0NjEsNDUuNDcxOTgyIDAgMCAwIDI0LjE5OTgsLTguMDk4MSAzMC40NzAwNDcsMjUuNTg4NTc2IDAgMCAwIDcuNTI1NDksMC44MjQzIDMwLjQ3MDA0NywyNS41ODg1NzYgMCAwIDAgMzAuNDczMTIsLTI1LjU5MDM5IDMwLjQ3MDA0NywyNS41ODg1NzYgMCAwIDAgLTIxLjAzNDgyLC0yNC4zMTMwNyA0Mi42MjQ0NjEsNDUuNDcxOTgyIDAgMCAwIC00MS4xNjM1OSwtMzMuNzcwMjMgNDIuNjI0NDYxLDQ1LjQ3MTk4MiAwIDAgMCAtNi4xMDk3MiwwLjUxNTk4IDc0LjAxOTkyLDY2LjY5NzcxNyAwIDAgMCAtNjEuMDA5MTcsLTI5LjA2MzcgeiIgaWQ9InBhdGg2MjY5Ii8+JiN4YTsgICAgICA8cGF0aCBzdHlsZT0ib3BhY2l0eToxO2ZpbGw6I2ZmZmZmZjtmaWxsLW9wYWNpdHk6MTtzdHJva2U6bm9uZTtzdHJva2Utd2lkdGg6My4xODA3ODk0NztzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLWRhc2hvZmZzZXQ6MDtzdHJva2Utb3BhY2l0eToxIiBkPSJtIDU2MS45Njk3Niw4MTcuMTQyMDcgYyAtMTEuNDU3NCwtMS40Mzc2IC0yNS4zNzkxNCwtNy4zMDY3MiAtMzQuMzQ4NDUsLTE0LjQ4MDU5IC02LjA1OTYxLC00Ljg0NjYzIC02LjMyNTIzLC00LjkwMjQ2IC0xMy45ODM2LC0yLjkzOTY4IC0xOC45ODg5OSw0Ljg2NjczIC0zNi41NjM1NCwtNi44NTk2OSAtMzYuNTYzNTQsLTI0LjM5NjYgMCwtMTEuOTYyMjQgNC44OTMwMywtMTguNjIyMjkgMTguNDIwMiwtMjUuMDcyMjkgNi45NzI3MywtMy4zMjQ3MyA4LjEyMDI1LC00LjYyMzU1IDEwLjYxODM1LC0xMi4wMTg0IDkuMzgzMjUsLTI3Ljc3NjE3IDM1LjE4NjQyLC00NC45ODczOSA2Ny40NDU0LC00NC45ODczOSAyMS4yMzQ2MiwwIDM1LjczMjQ1LDUuNTA1OTEgNTAuODI5NDcsMTkuMzAzNzQgOC4zMzcyNyw3LjYxOTc5IDkuODM3MzgsOC4zNjQ2NyAxNy44MDk2OSw4Ljg0MzQgMTUuMDI5NzMsMC45MDI1MSAyNy4zNzg0NCw5Ljg5MDc5IDMzLjkxMjI2LDI0LjY4Mzc1IDIuMzg3MjYsNS40MDQ5MyA0Ljg2MjU3LDguMjM5MTUgOC44NDcxMSwxMC4xMjk5NCAxMy41NDc3OCw2LjQyODg1IDE3Ljc2OTc5LDIwLjcyMDQ1IDkuMTQ4MTMsMzAuOTY2NjkgLTUuNTY2NTYsNi42MTU0OSAtMTIuNTc4NDMsOS40NDgxNCAtMjMuMzg3NjMsOS40NDgxNCAtNC43ODc0MiwwIC05LjE0MDkxLDAuNzA2MjggLTkuNjc0NCwxLjU2OTUgLTAuNTMzNSwwLjg2MzIzIC01LjAzNDMsMi43NTEwMiAtMTAuMDAxNzYsNC4xOTUxIC03Ljc2Nzg1LDIuMjU4MTggLTEwLjQyMzU2LDIuMzQ4OTYgLTE4Ljk3NzM4LDAuNjQ4NzMgLTkuOTE2MTMsLTEuOTcxMDEgLTkuOTY4MDYsLTEuOTYyMDIgLTE3LjUwNDc3LDMuMDMwMDkgLTEzLjU5NDA3LDkuMDA0MzQgLTM0LjMxNjE1LDEzLjM2ODY1IC01Mi41ODkwOCwxMS4wNzU4NyB6IiBpZD0icGF0aDg0MDAiLz4mI3hhOyAgICA8L2c+JiN4YTsgIDwvZz4mI3hhOzwvc3ZnPg==" preserveAspectRatio="none" pointer-events="none"/><image x="130.5" y="285.5" width="56" height="40" xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIGlkPSJzdmc0MzY3IiB2aWV3Qm94PSIwIDAgMTk4LjQ1MzIzIDE0Mi4zMDQ2OSIgaGVpZ2h0PSI0MC4xNjE1NDltbSIgd2lkdGg9IjU2LjAwNzkxMm1tIj4mI3hhOyAgPGRlZnMgaWQ9ImRlZnM0MzY5Ii8+JiN4YTsgIDxtZXRhZGF0YSBpZD0ibWV0YWRhdGE0MzcyIj4mI3hhOyAgICA8cmRmOlJERj4mI3hhOyAgICAgIDxjYzpXb3JrIHJkZjphYm91dD0iIj4mI3hhOyAgICAgICAgPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+JiN4YTsgICAgICAgIDxkYzp0eXBlIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiLz4mI3hhOyAgICAgICAgPGRjOnRpdGxlLz4mI3hhOyAgICAgIDwvY2M6V29yaz4mI3hhOyAgICA8L3JkZjpSREY+JiN4YTsgIDwvbWV0YWRhdGE+JiN4YTsgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIuOTg0Mzc1LC0zLjE5OTIxODQpIiBpZD0iZzgzMyI+JiN4YTsgICAgPHBhdGggc3R5bGU9ImNvbG9yOiMwMDAwMDA7Zm9udC1zdHlsZTpub3JtYWw7Zm9udC12YXJpYW50Om5vcm1hbDtmb250LXdlaWdodDpub3JtYWw7Zm9udC1zdHJldGNoOm5vcm1hbDtmb250LXNpemU6bWVkaXVtO2xpbmUtaGVpZ2h0Om5vcm1hbDtmb250LWZhbWlseTpzYW5zLXNlcmlmO2ZvbnQtdmFyaWFudC1saWdhdHVyZXM6bm9ybWFsO2ZvbnQtdmFyaWFudC1wb3NpdGlvbjpub3JtYWw7Zm9udC12YXJpYW50LWNhcHM6bm9ybWFsO2ZvbnQtdmFyaWFudC1udW1lcmljOm5vcm1hbDtmb250LXZhcmlhbnQtYWx0ZXJuYXRlczpub3JtYWw7Zm9udC1mZWF0dXJlLXNldHRpbmdzOm5vcm1hbDt0ZXh0LWluZGVudDowO3RleHQtYWxpZ246c3RhcnQ7dGV4dC1kZWNvcmF0aW9uOm5vbmU7dGV4dC1kZWNvcmF0aW9uLWxpbmU6bm9uZTt0ZXh0LWRlY29yYXRpb24tc3R5bGU6c29saWQ7dGV4dC1kZWNvcmF0aW9uLWNvbG9yOiMwMDAwMDA7bGV0dGVyLXNwYWNpbmc6bm9ybWFsO3dvcmQtc3BhY2luZzpub3JtYWw7dGV4dC10cmFuc2Zvcm06bm9uZTt3cml0aW5nLW1vZGU6bHItdGI7ZGlyZWN0aW9uOmx0cjt0ZXh0LW9yaWVudGF0aW9uOm1peGVkO2RvbWluYW50LWJhc2VsaW5lOmF1dG87YmFzZWxpbmUtc2hpZnQ6YmFzZWxpbmU7dGV4dC1hbmNob3I6c3RhcnQ7d2hpdGUtc3BhY2U6bm9ybWFsO3NoYXBlLXBhZGRpbmc6MDtjbGlwLXJ1bGU6bm9uemVybztkaXNwbGF5OmlubGluZTtvdmVyZmxvdzp2aXNpYmxlO3Zpc2liaWxpdHk6dmlzaWJsZTtvcGFjaXR5OjE7aXNvbGF0aW9uOmF1dG87bWl4LWJsZW5kLW1vZGU6bm9ybWFsO2NvbG9yLWludGVycG9sYXRpb246c1JHQjtjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM6bGluZWFyUkdCO3NvbGlkLWNvbG9yOiMwMDAwMDA7c29saWQtb3BhY2l0eToxO3ZlY3Rvci1lZmZlY3Q6bm9uZTtmaWxsOiNmZmZmZmY7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmU7c3Ryb2tlLXdpZHRoOjUuODc5NTk3MTk7c3Ryb2tlLWxpbmVjYXA6YnV0dDtzdHJva2UtbGluZWpvaW46bWl0ZXI7c3Ryb2tlLW1pdGVybGltaXQ6MjtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLWRhc2hvZmZzZXQ6MDtzdHJva2Utb3BhY2l0eToxO2NvbG9yLXJlbmRlcmluZzphdXRvO2ltYWdlLXJlbmRlcmluZzphdXRvO3NoYXBlLXJlbmRlcmluZzphdXRvO3RleHQtcmVuZGVyaW5nOmF1dG87ZW5hYmxlLWJhY2tncm91bmQ6YWNjdW11bGF0ZSIgZD0iTSA5Ni4xMTU4NzMsNi4xMzgzNzc4IEMgNjcuMDQzNjgsNi4xMzg2Mzc4IDQyLjg1OTgyNiwyNS40MDI1MDggNDEuMDQxNDE5LDUwLjIyODMzOCBjIC0yMi41NzE1MSwwLjI2ODkgLTQxLjA4NTYyMjQ5LDE3LjE5OTU4IC00MS4wODUyMDI0OSwzOC4zNDQxMiA3LjI4ZS00LDIxLjMxMzMyMiAxOC43OTc4NDU0OSwzOC4zOTE1NjIgNDEuNjE0Mzc2NDksMzguMzkxNzIyIGggMC4wMTI4MiAwLjAxMjgyIGMgMS4xOTM2MDQsLTAuMDEgMi4zNzkwOTYsLTAuMTQxMTYgMy41NjY4OTQsLTAuMjQ1MzcgNS45Nzk2NjEsOS40NjA1NyAxNi4zNjMzNDQsMTUuMzE2ODkgMjcuNjQzNDMxLDE1LjMzMTQzIGggMC4wMDM3IDAuMDAxOCBjIDguNjcxMTg1LC0wLjAwNCAxNi44MTk2ODUsLTMuNTkxMjkgMjIuOTI4NDY1LC05LjYyNTg2IDYuMTQ4NTg3LDYuMzQ0ODcgMTQuNTA4Nzc3LDEwLjEzOTI5IDIzLjQzMzgxNywxMC4xNDAzOCAxMS4zODI3NiwtMC4wMDIgMjEuODUzMjMsLTUuOTUzMjcgMjcuODEzNzIsLTE1LjU0MzgzIDEuMjk4MywwLjEyMjk4IDIuNTk0NDgsMC4yNzM4NCAzLjkwMDE1LDAuMjgzODIgaCAwLjAxMSAwLjAxMSBjIDIyLjgxNjUzLC0xLjZlLTQgNDEuNjE3MzMsLTE3LjA3ODM5IDQxLjYxODA1LC0zOC4zOTE3MjIgMS43ZS00LC0yMS4yMTc0IC0xOC42MzcwMSwtMzguMjEzOCAtNDEuMzE0MjcsLTM4LjM2NzkyIC0xLjYyOSwtMjQuODk5NTEgLTI1Ljc0OTUzLC00NC4yNzI4NTAyIC01NC44MjE2MjcsLTQ0LjM5NTc0MDIgbCAtMC4xMDA3MSwtMC4wMTEgeiIgaWQ9InBhdGg5NDctMyIvPiYjeGE7ICAgIDxwYXRoIHN0eWxlPSJjb2xvcjojMDAwMDAwO2ZvbnQtc3R5bGU6bm9ybWFsO2ZvbnQtdmFyaWFudDpub3JtYWw7Zm9udC13ZWlnaHQ6bm9ybWFsO2ZvbnQtc3RyZXRjaDpub3JtYWw7Zm9udC1zaXplOm1lZGl1bTtsaW5lLWhlaWdodDpub3JtYWw7Zm9udC1mYW1pbHk6c2Fucy1zZXJpZjtmb250LXZhcmlhbnQtbGlnYXR1cmVzOm5vcm1hbDtmb250LXZhcmlhbnQtcG9zaXRpb246bm9ybWFsO2ZvbnQtdmFyaWFudC1jYXBzOm5vcm1hbDtmb250LXZhcmlhbnQtbnVtZXJpYzpub3JtYWw7Zm9udC12YXJpYW50LWFsdGVybmF0ZXM6bm9ybWFsO2ZvbnQtZmVhdHVyZS1zZXR0aW5nczpub3JtYWw7dGV4dC1pbmRlbnQ6MDt0ZXh0LWFsaWduOnN0YXJ0O3RleHQtZGVjb3JhdGlvbjpub25lO3RleHQtZGVjb3JhdGlvbi1saW5lOm5vbmU7dGV4dC1kZWNvcmF0aW9uLXN0eWxlOnNvbGlkO3RleHQtZGVjb3JhdGlvbi1jb2xvcjojMDAwMDAwO2xldHRlci1zcGFjaW5nOm5vcm1hbDt3b3JkLXNwYWNpbmc6bm9ybWFsO3RleHQtdHJhbnNmb3JtOm5vbmU7d3JpdGluZy1tb2RlOmxyLXRiO2RpcmVjdGlvbjpsdHI7dGV4dC1vcmllbnRhdGlvbjptaXhlZDtkb21pbmFudC1iYXNlbGluZTphdXRvO2Jhc2VsaW5lLXNoaWZ0OmJhc2VsaW5lO3RleHQtYW5jaG9yOnN0YXJ0O3doaXRlLXNwYWNlOm5vcm1hbDtzaGFwZS1wYWRkaW5nOjA7Y2xpcC1ydWxlOm5vbnplcm87ZGlzcGxheTppbmxpbmU7b3ZlcmZsb3c6dmlzaWJsZTt2aXNpYmlsaXR5OnZpc2libGU7b3BhY2l0eToxO2lzb2xhdGlvbjphdXRvO21peC1ibGVuZC1tb2RlOm5vcm1hbDtjb2xvci1pbnRlcnBvbGF0aW9uOnNSR0I7Y29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzOmxpbmVhclJHQjtzb2xpZC1jb2xvcjojMDAwMDAwO3NvbGlkLW9wYWNpdHk6MTt2ZWN0b3ItZWZmZWN0Om5vbmU7ZmlsbDojMmMyYzJjO2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lO3N0cm9rZS13aWR0aDo1Ljg3OTU5NzE5O3N0cm9rZS1saW5lY2FwOmJ1dHQ7c3Ryb2tlLWxpbmVqb2luOm1pdGVyO3N0cm9rZS1taXRlcmxpbWl0OjI7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1kYXNob2Zmc2V0OjA7c3Ryb2tlLW9wYWNpdHk6MTtjb2xvci1yZW5kZXJpbmc6YXV0bztpbWFnZS1yZW5kZXJpbmc6YXV0bztzaGFwZS1yZW5kZXJpbmc6YXV0bzt0ZXh0LXJlbmRlcmluZzphdXRvO2VuYWJsZS1iYWNrZ3JvdW5kOmFjY3VtdWxhdGUiIGQ9Ik0gOTYuMTE1MjM0LDMuMTk5MjE4OCBDIDY2LjY5MzUzOSwzLjE5OTQ4MzkgNDEuNzM3MDg4LDIyLjE4MTcyNCAzOC40Mjk2ODgsNDcuNTU4NTk0IDE1LjU5NDc0Miw0OS4wNzc3MjcgLTIuOTg0ODEyNiw2Ni41NDk0MjggLTIuOTg0Mzc1LDg4LjU3MjI2NiAtMi45ODM1ODg0LDExMS42MTQwMyAxNy4yODY4MjcsMTI5LjkwNDEzIDQxLjU3MDMxMiwxMjkuOTA0MyBoIDAuMDEzNjcgMC4wMjM0NCAwLjAxMzY3IGMgMC43Nzc1NzgsLTAuMDA3IDEuNDIyNTY0LC0wLjA4NDEgMi4xMjEwOTQsLTAuMTQyNTggNi42MzEwMTYsOS40MDMxMSAxNy4zODExMzIsMTUuMjEzNDYgMjkuMDYwNTQ2LDE1LjIyODUxIGggMC4wMDIgMC4wMDU5IDAuMDAyIGMgOC41NTIyNjcsLTAuMDA0IDE2LjUyOTc2NywtMy4zMjMyMyAyMi44OTA2MjUsLTguNzUxOTUgNi40Mzk1MjMsNS43NDA2NSAxNC42NDQzOTMsOS4yNjQ1NSAyMy40NzA3MDMsOS4yNjU2MyAxMS43ODM5LC0wLjAwMiAyMi42MTk4NCwtNS45MDQyIDI5LjI0MjE5LC0xNS40MzU1NSAwLjgwMjI3LDAuMDczIDEuNTU0NjksMC4xNjg5NCAyLjQ0OTIxLDAuMTc1NzggaCAwLjAxMTcgMC4wMjE1IDAuMDExNyBjIDI0LjI4MzQ4LC0xLjdlLTQgNDQuNTU3ODIsLTE4LjI4Nzk3IDQ0LjU1ODU5LC00MS4zMzAwNzggMy4yZS00LC0yMi4wOTE2MzcgLTE4LjY4OTY0LC0zOS42MjQ4MDcgLTQxLjYyNSwtNDEuMDQ4ODI4IEMgMTUwLjcxMTAzLDIyLjQyMzE1OSAxMjUuODE2NjUsMy4zMzMzMTY2IDk2LjQwNDI5NywzLjIwODk4NDQgbCAwLjMwNjY0MSwwLjAxNzU3OCAtMC4yNTk3NjYsLTAuMDI3MzQ0IHogbSAwLDUuODc4OTA2MiBoIDAuMDE1NjMgbCAwLjA5NTcsMC4wMDk3NyAwLjE1MjM0NCwwLjAwMTk1IEMgMTI0LjE1MTg5LDkuMjA3MjQ2IDE0Ni43NjkwNSwyNy42MjQxIDE0OC4yODEyNSw1MC43MzYzMjggbCAtNC43OTY5Niw0LjIzNzk1MSA3LjcwOTA3LC0xLjQ4OTkwMiBjIDIxLjIxOTQxLDAuMTQ0MjA2IDM4LjM5NDgyLDE1LjkzMzgzMiAzOC4zOTQ1MywzNS40Mjk2ODcgLTAuMDAyLDE5LjU4MzY0NiAtMTcuMzI4ODgsMzUuNDUxMDE2IC0zOC42Nzc3MywzNS40NTExNjYgaCAtMC4wMTE3IGMgLTEuMDkxMzYsLTAuMDA5IC0yLjI5Njk3LC0wLjE0NDk0IC0zLjYzMjgyLC0wLjI3MTQ4IGwgLTUuNzMxOTUsLTEuOTgwODUgMi45NTY1NiwzLjM1NTg1IGMgLTUuNDMzNTUsOC43NDI3MSAtMTQuOTU3OTksMTQuMTU0NDMgLTI1LjMxNjQsMTQuMTU2MjUgLTguMDkyMDUsLTkuOWUtNCAtMTUuNjkyODQsLTMuNDM2OTUgLTIxLjMyMjI2OCwtOS4yNDYwOSBsIC0xLjkxNTY1OCwtMy4zMzY4NCAtMi4yNjIwNzYsMy4yOTE5MSBjIC01LjU5MzMyNiw1LjUyNTM4IC0xMy4wMDIwNDEsOC43NzM3MiAtMjAuODYzMjgxLDguNzc3MzUgaCAtMC4wMDM5IGMgLTEwLjI2MzQwNywtMC4wMTQ2IC0xOS43MDc3NCwtNS4zMzk1NCAtMjUuMTU4MjI5LC0xMy45NjI4OSBsIDIuOTYyNDIsLTMuMzIyNjUgLTUuNzA0NjA4LDEuOTY1MjMgYyAtMS4yMjc3NzgsMC4xMDc3MSAtMi4zMzAzODEsMC4yMjUzMSAtMy4zMjIyNjYsMC4yMzQzNyAtMC4wMDM1LDNlLTUgLTAuMDA4MiwtM2UtNSAtMC4wMTE3MiwwIGggLTAuMDAyIEMgMjAuMjIwNzM0LDEyNC4wMjUyNCAyLjg5NzE1MywxMDguMTU3MTYgMi44OTY0ODQ0LDg4LjU3MjI2NiAyLjg5NjA5ODQsNjkuMTQzODExIDE5Ljk1NTI3OSw1My40MTk1ODMgNDEuMDc2MTcyLDUzLjE2Nzk2OSBsIDYuOTIwMTY4LDEuMzI1NDg0IC00LjAyMzY4NCwtNC4wNTAwOTQgQyA0NS42NjA0MzUsMjcuNDAwOTQ1IDY4LjM0MTY3Miw5LjA3ODM3NTMgOTYuMTE1MjM0LDkuMDc4MTI1IFoiIGlkPSJwYXRoOTQ3Ii8+JiN4YTsgIDwvZz4mI3hhOzwvc3ZnPg==" preserveAspectRatio="none" pointer-events="none"/><image x="388.5" y="200" width="49" height="49" xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNDkuNDgzNjY5bW0iIGhlaWdodD0iNDkuNDgzNjY5bW0iIHZpZXdCb3g9IjAgMCAxNzUuMzM1ODMgMTc1LjMzNTgzIiBpZD0ic3ZnOTk3NiIgdmVyc2lvbj0iMS4xIj4mI3hhOyAgPGRlZnMgaWQ9ImRlZnM5OTc4Ii8+JiN4YTsgIDxtZXRhZGF0YSBpZD0ibWV0YWRhdGE5OTgxIj4mI3hhOyAgICA8cmRmOlJERj4mI3hhOyAgICAgIDxjYzpXb3JrIHJkZjphYm91dD0iIj4mI3hhOyAgICAgICAgPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+JiN4YTsgICAgICAgIDxkYzp0eXBlIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiLz4mI3hhOyAgICAgICAgPGRjOnRpdGxlLz4mI3hhOyAgICAgIDwvY2M6V29yaz4mI3hhOyAgICA8L3JkZjpSREY+JiN4YTsgIDwvbWV0YWRhdGE+JiN4YTsgIDxjaXJjbGUgcj0iODYuMjgyMzI2IiBjeT0iODcuNjY3OTE1IiBjeD0iODcuNjY3OTE1IiBpZD0icGF0aDMzMzgtNyIgc3R5bGU9ImZpbGw6IzAwYWQ2OTtmaWxsLW9wYWNpdHk6MTtmaWxsLXJ1bGU6ZXZlbm9kZDtzdHJva2U6IzE0OTk2NTtzdHJva2Utd2lkdGg6Mi43NzExNzY1ODtzdHJva2UtbGluZWNhcDpidXR0O3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxIi8+JiN4YTsgIDxnIHRyYW5zZm9ybT0ibWF0cml4KDAuOTY2MjI5OTEsMCwwLDAuOTY2MjI5OTEsLTE3Ny40MzEzLC0yNjMuNzUyODQpIiBpZD0iZzQ2NjItMi0zIj4mI3hhOyAgICA8cGF0aCBzdHlsZT0iY29sb3I6IzAwMDAwMDtmb250LXN0eWxlOm5vcm1hbDtmb250LXZhcmlhbnQ6bm9ybWFsO2ZvbnQtd2VpZ2h0Om5vcm1hbDtmb250LXN0cmV0Y2g6bm9ybWFsO2ZvbnQtc2l6ZTptZWRpdW07bGluZS1oZWlnaHQ6bm9ybWFsO2ZvbnQtZmFtaWx5OnNhbnMtc2VyaWY7dGV4dC1pbmRlbnQ6MDt0ZXh0LWFsaWduOnN0YXJ0O3RleHQtZGVjb3JhdGlvbjpub25lO3RleHQtZGVjb3JhdGlvbi1saW5lOm5vbmU7dGV4dC1kZWNvcmF0aW9uLXN0eWxlOnNvbGlkO3RleHQtZGVjb3JhdGlvbi1jb2xvcjojMDAwMDAwO2xldHRlci1zcGFjaW5nOm5vcm1hbDt3b3JkLXNwYWNpbmc6bm9ybWFsO3RleHQtdHJhbnNmb3JtOm5vbmU7d3JpdGluZy1tb2RlOmxyLXRiO2RpcmVjdGlvbjpsdHI7YmFzZWxpbmUtc2hpZnQ6YmFzZWxpbmU7dGV4dC1hbmNob3I6c3RhcnQ7d2hpdGUtc3BhY2U6bm9ybWFsO2NsaXAtcnVsZTpub256ZXJvO2Rpc3BsYXk6aW5saW5lO292ZXJmbG93OnZpc2libGU7dmlzaWJpbGl0eTp2aXNpYmxlO29wYWNpdHk6MTtpc29sYXRpb246YXV0bzttaXgtYmxlbmQtbW9kZTpub3JtYWw7Y29sb3ItaW50ZXJwb2xhdGlvbjpzUkdCO2NvbG9yLWludGVycG9sYXRpb24tZmlsdGVyczpsaW5lYXJSR0I7c29saWQtY29sb3I6IzAwMDAwMDtzb2xpZC1vcGFjaXR5OjE7ZmlsbDojZmZmZmZmO2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpldmVub2RkO3N0cm9rZTojMTQ5OTY1O3N0cm9rZS13aWR0aDoxO3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2UtZGFzaG9mZnNldDowO3N0cm9rZS1vcGFjaXR5OjE7Y29sb3ItcmVuZGVyaW5nOmF1dG87aW1hZ2UtcmVuZGVyaW5nOmF1dG87c2hhcGUtcmVuZGVyaW5nOmF1dG87dGV4dC1yZW5kZXJpbmc6YXV0bztlbmFibGUtYmFja2dyb3VuZDphY2N1bXVsYXRlIiBkPSJtIDIyNC4wNzIyNywzMDguNjY0MDYgYSA0LjAwMDQsNC4wMDA0IDAgMCAwIC0zLjcxNDg1LDUuMDY4MzYgbCA4LjczNDM4LDMxLjQ0NTMxIGEgNC4wMDA0LDQuMDAwNCAwIDAgMCAwLjA2MDUsMC4xODE2NSA0LjAwMDQsNC4wMDA0IDAgMCAwIDAuMDQ4OCwwLjE0NDUzIDQuMDAwNCw0LjAwMDQgMCAwIDAgMC4wODAxLDAuMTkxNCA0LjAwMDQsNC4wMDA0IDAgMCAwIDAuMDg0LDAuMTg1NTUgNC4wMDA0LDQuMDAwNCAwIDAgMCAwLjA4NTksMC4xNjAxNiA0LjAwMDQsNC4wMDA0IDAgMCAwIDAuMTA5MzgsMC4xOTE0IDQuMDAwNCw0LjAwMDQgMCAwIDAgMC4xMDM1MSwwLjE1MDM5IDQuMDAwNCw0LjAwMDQgMCAwIDAgMC4xMjExLDAuMTY5OTIgNC4wMDA0LDQuMDAwNCAwIDAgMCAwLjEzMjgxLDAuMTU4MjEgNC4wMDA0LDQuMDAwNCAwIDAgMCAwLjEyNjk1LDAuMTQ0NTMgNC4wMDA0LDQuMDAwNCAwIDAgMCAwLjE1NjI1LDAuMTU0MyA0LjAwMDQsNC4wMDA0IDAgMCAwIDAuMTMyODEsMC4xMjEwOSA0LjAwMDQsNC4wMDA0IDAgMCAwIDAuMTU2MjUsMC4xMjY5NSA0LjAwMDQsNC4wMDA0IDAgMCAwIDAuMTYyMTEsMC4xMjMwNSA0LjAwMDQsNC4wMDA0IDAgMCAwIDAuMTc3NzQsMC4xMTMyOCA0LjAwMDQsNC4wMDA0IDAgMCAwIDAuMTUyMzQsMC4wOTM3IDQuMDAwNCw0LjAwMDQgMCAwIDAgMC4yMTI4OSwwLjEwOTM4IDQuMDAwNCw0LjAwMDQgMCAwIDAgMC4xNDQ1MywwLjA2ODQgNC4wMDA0LDQuMDAwNCAwIDAgMCAwLjIxMjg5LDAuMDg0IDQuMDAwNCw0LjAwMDQgMCAwIDAgMC4xNjQwNywwLjA2MDYgNC4wMDA0LDQuMDAwNCAwIDAgMCAwLjI0NDE0LDAuMDY4NCA0LjAwMDQsNC4wMDA0IDAgMCAwIDAuMTI2OTUsMC4wMzMyIDQuMDAwNCw0LjAwMDQgMCAwIDAgMC4yMjQ2MSwwLjAzOTEgNC4wMDA0LDQuMDAwNCAwIDAgMCAwLjE5OTIyLDAuMDI5MyA0LjAwMDQsNC4wMDA0IDAgMCAwIDAuMTUyMzQsMC4wMTE3IDQuMDAwNCw0LjAwMDQgMCAwIDAgMC4yODMyMSwwLjAxMzcgNC4wMDA0LDQuMDAwNCAwIDAgMCAyLjU3NjE3LC0wLjkzOTQ1IDQuMDAwNCw0LjAwMDQgMCAwIDAgMC4yOTI5NywtMC4yNzM0NCA0LjAwMDQsNC4wMDA0IDAgMCAwIDAuMDQ4OCwtMC4wNTA4IGwgMy43NzM0NCwtNC4wMjUzOSAxNy42MzI4MSwxNy4wMjM0MyAtMTkuMDE5NTMsNi4yMzI0MyBhIDQuMDAwNCw0LjAwMDQgMCAwIDAgLTEuNDAwMzksNi44MDA3OCBsIDQuMjAxMTcsMy43MDcwMyAtMjAuOTUzMTIsMjAuNTcyMjYgYSA0LjAwMDQsNC4wMDA0IDAgMCAwIDIuODAyNzMsNi44NTU0NyA0LjAwMDQsNC4wMDA0IDAgMCAwIDMuMjA4OTksLTEuNTQ0OTIgbCAyMy42MTMyOCwtMjMuMTg1NTUgYSA0LjAwMDQsNC4wMDA0IDAgMCAwIC0wLjE1NjI1LC01Ljg1MzUxIGwgLTIuMTgzNTksLTEuOTI1NzggMTguNjg3NSwtNi4xMjExIGEgNC4wMDA0LDQuMDAwNCAwIDAgMCAxLjUzMzIsLTYuNjc5NjggTCAyNDIuMjc1MywzMzQuMjQwMzYgYSA0LjAwMDQsNC4wMDA0IDAgMCAwIC01LjY5NTMxLDAuMTQyNTggbCAtMS42ODM2LDEuNzk2ODggLTQuOTQ5MjEsLTE3LjgxNDQ2IDE3LjM4MjgxLDQuNzE2OCAtMS41ODU5NCwxLjY5OTIyIGEgNC4wMDA0LDQuMDAwNCAwIDAgMCAwLjE1NjI1LDUuNjE3MTkgbCAyMC45NjI4OSwyMC4wODk4NCBhIDQuMDAwNCw0LjAwMDQgMCAxIDAgNS41MzUxNiwtNS43NzUzOSBsIC0xOC4xMTEzMywtMTcuMzU5MzcgMy40MTk5MiwtMy42NjQwNyBhIDQuMDAwNCw0LjAwMDQgMCAwIDAgLTEuODc2OTUsLTYuNTg5ODQgbCAtMzAuNTcwMzEsLTguMjk2ODggYSA0LjAwMDQsNC4wMDA0IDAgMCAwIC0xLjE4NzUsLTAuMTM4NjcgeiIgaWQ9InBhdGg0MjI2LTgtMi02Ii8+JiN4YTsgICAgPHBhdGggc3R5bGU9ImNvbG9yOiMwMDAwMDA7Zm9udC1zdHlsZTpub3JtYWw7Zm9udC12YXJpYW50Om5vcm1hbDtmb250LXdlaWdodDpub3JtYWw7Zm9udC1zdHJldGNoOm5vcm1hbDtmb250LXNpemU6bWVkaXVtO2xpbmUtaGVpZ2h0Om5vcm1hbDtmb250LWZhbWlseTpzYW5zLXNlcmlmO3RleHQtaW5kZW50OjA7dGV4dC1hbGlnbjpzdGFydDt0ZXh0LWRlY29yYXRpb246bm9uZTt0ZXh0LWRlY29yYXRpb24tbGluZTpub25lO3RleHQtZGVjb3JhdGlvbi1zdHlsZTpzb2xpZDt0ZXh0LWRlY29yYXRpb24tY29sb3I6IzAwMDAwMDtsZXR0ZXItc3BhY2luZzpub3JtYWw7d29yZC1zcGFjaW5nOm5vcm1hbDt0ZXh0LXRyYW5zZm9ybTpub25lO3dyaXRpbmctbW9kZTpsci10YjtkaXJlY3Rpb246bHRyO2Jhc2VsaW5lLXNoaWZ0OmJhc2VsaW5lO3RleHQtYW5jaG9yOnN0YXJ0O3doaXRlLXNwYWNlOm5vcm1hbDtjbGlwLXJ1bGU6bm9uemVybztkaXNwbGF5OmlubGluZTtvdmVyZmxvdzp2aXNpYmxlO3Zpc2liaWxpdHk6dmlzaWJsZTtvcGFjaXR5OjE7aXNvbGF0aW9uOmF1dG87bWl4LWJsZW5kLW1vZGU6bm9ybWFsO2NvbG9yLWludGVycG9sYXRpb246c1JHQjtjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM6bGluZWFyUkdCO3NvbGlkLWNvbG9yOiMwMDAwMDA7c29saWQtb3BhY2l0eToxO2ZpbGw6I2ZmZmZmZjtmaWxsLW9wYWNpdHk6MTtmaWxsLXJ1bGU6ZXZlbm9kZDtzdHJva2U6IzE0OTk2NTtzdHJva2Utd2lkdGg6MTtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLWRhc2hvZmZzZXQ6MDtzdHJva2Utb3BhY2l0eToxO2NvbG9yLXJlbmRlcmluZzphdXRvO2ltYWdlLXJlbmRlcmluZzphdXRvO3NoYXBlLXJlbmRlcmluZzphdXRvO3RleHQtcmVuZGVyaW5nOmF1dG87ZW5hYmxlLWJhY2tncm91bmQ6YWNjdW11bGF0ZSIgZD0ibSAzMTIuMjIyNjYsMzExLjgzMzk4IC0yMi43NDQxNCwyMi43NDIxOSAtMy4yOTg4MywtMy43Njk1MyBjIC0yLjA3NjEsLTIuMzcxMTcgLTUuOTUxMzQsLTEuNTIyMDQgLTYuODQ1NzEsMS41IGwgLTE2LjQzMzU5LDU1LjU2NjQxIC0wLjkyMTg3LC0wLjkyMTg4IGMgLTEuNTUyNDIsLTEuNTUyOTggLTQuMDY2NDYsLTEuNTY0MzEgLTUuNjMyODIsLTAuMDI1NCBsIC0yNS4zMzAwOCwyNC44OTI1OCBjIC0zLjgwNDAzLDMuNzM4MjkgMS44MDI3NSw5LjQ0NDY2IDUuNjA3NDMsNS43MDcwMyBsIDIyLjUwMTk1LC0yMi4xMTUyMyAyLjg3NSwyLjg3NSBjIDIuMTQ1NjUsMi4xNDQzMiA1LjgwMzk2LDEuMjEzNjYgNi42NjQwNiwtMS42OTUzMiBsIDE2LjI4MTI1LC01NS4wNDQ5MiAxLjMyODEzLDEuNTE3NTggYyAxLjUyMzYxLDEuNzQyMTUgNC4yMDMyMywxLjgzMTc3IDUuODM5ODQsMC4xOTUzMSBsIDI0LjU5Mzc1LC0yNC41OTU3IGMgMi42MDI4LC03LjAxNzIgLTQuNDg0MzcsLTYuODI4MTIgLTQuNDg0MzcsLTYuODI4MTIgeiIgaWQ9InBhdGg0MjI4LTU2LTUtNyIvPiYjeGE7ICAgIDxwYXRoIHN0eWxlPSJjb2xvcjojMDAwMDAwO2ZvbnQtc3R5bGU6bm9ybWFsO2ZvbnQtdmFyaWFudDpub3JtYWw7Zm9udC13ZWlnaHQ6bm9ybWFsO2ZvbnQtc3RyZXRjaDpub3JtYWw7Zm9udC1zaXplOm1lZGl1bTtsaW5lLWhlaWdodDpub3JtYWw7Zm9udC1mYW1pbHk6c2Fucy1zZXJpZjt0ZXh0LWluZGVudDowO3RleHQtYWxpZ246c3RhcnQ7dGV4dC1kZWNvcmF0aW9uOm5vbmU7dGV4dC1kZWNvcmF0aW9uLWxpbmU6bm9uZTt0ZXh0LWRlY29yYXRpb24tc3R5bGU6c29saWQ7dGV4dC1kZWNvcmF0aW9uLWNvbG9yOiMwMDAwMDA7bGV0dGVyLXNwYWNpbmc6bm9ybWFsO3dvcmQtc3BhY2luZzpub3JtYWw7dGV4dC10cmFuc2Zvcm06bm9uZTt3cml0aW5nLW1vZGU6bHItdGI7ZGlyZWN0aW9uOmx0cjtiYXNlbGluZS1zaGlmdDpiYXNlbGluZTt0ZXh0LWFuY2hvcjpzdGFydDt3aGl0ZS1zcGFjZTpub3JtYWw7Y2xpcC1ydWxlOm5vbnplcm87ZGlzcGxheTppbmxpbmU7b3ZlcmZsb3c6dmlzaWJsZTt2aXNpYmlsaXR5OnZpc2libGU7b3BhY2l0eToxO2lzb2xhdGlvbjphdXRvO21peC1ibGVuZC1tb2RlOm5vcm1hbDtjb2xvci1pbnRlcnBvbGF0aW9uOnNSR0I7Y29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzOmxpbmVhclJHQjtzb2xpZC1jb2xvcjojMDAwMDAwO3NvbGlkLW9wYWNpdHk6MTtmaWxsOiNmZmZmZmY7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlOiMxNDk5NjU7c3Ryb2tlLXdpZHRoOjE7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1kYXNob2Zmc2V0OjA7c3Ryb2tlLW9wYWNpdHk6MTtjb2xvci1yZW5kZXJpbmc6YXV0bztpbWFnZS1yZW5kZXJpbmc6YXV0bztzaGFwZS1yZW5kZXJpbmc6YXV0bzt0ZXh0LXJlbmRlcmluZzphdXRvO2VuYWJsZS1iYWNrZ3JvdW5kOmFjY3VtdWxhdGUiIGQ9Im0gMzI1Ljc0NDE0LDMyNS45MDgyIGEgNC4wMDA0LDQuMDAwNCAwIDAgMCAtMi43NjE3MiwxLjE4MzYgbCAtMjMuNTgyMDMsMjMuMTQ2NDggYSA0LjAwMDQsNC4wMDA0IDAgMCAwIDAuNDAyMzQsNi4wNTQ2OSBsIDEuMDA5NzcsMC43NTc4MSAtMTUuMjI2NTYsNS4zNzMwNSBhIDQuMDAwNCw0LjAwMDQgMCAwIDAgLTEuNDcwNzEsNi42MjY5NSBsIDIyLjcxMDk0LDIyLjI3MzQ0IGEgNC4wMDA0LDQuMDAwNCAwIDAgMCA1LjQzMzYsMC4xNTQzIGwgMi4yMDExNywtMS45MjU3OSA1LjEzMDg2LDE4LjQ2ODc1IEwgMzAxLjc1OTc3LDQwMyBsIDIuMDUwNzgsLTIuMTg3NSBhIDQuMDAwNCw0LjAwMDQgMCAwIDAgLTAuMTUwMzksLTUuNjIzMDUgbCAtMjAuNTUyNzQsLTE5LjY5NzI2IGEgNC4wMDA0LDQuMDAwNCAwIDAgMCAtMy4xNzc3MywtMS41MDU4NiA0LjAwMDQsNC4wMDA0IDAgMCAwIC0yLjc2NzU4LDYuODg4NjcgbCAxOC4xMDU0NywxNy4zNTE1NiAtMy44NDM3NSw0LjEwMTU2IGEgNC4wMDA0LDQuMDAwNCAwIDAgMCAxLjgzMjAzLDYuNTg1OTQgbCAzMS4wMDc4MSw4LjczNDM4IGEgNC4wMDA0LDQuMDAwNCAwIDAgMCA0LjkzOTQ1LC00LjkxOTkyIGwgLTguNzM0MzcsLTMxLjQ0NTMyIGEgNC4wMDA0LDQuMDAwNCAwIDAgMCAtNi40ODgyOCwtMS45Mzk0NSBsIC00LjE5OTIyLDMuNjczODMgLTE1LjQ4NDM3LC0xNS4xODU1NSAxNi4yMjQ2LC01LjcyNDYxIGEgNC4wMDA0LDQuMDAwNCAwIDAgMCAxLjA2ODM2LC02Ljk3MjY1IGwgLTMuMjYzNjcsLTIuNDQ3MjcgMjAuMjYxNzIsLTE5Ljg4NDc3IGEgNC4wMDA0LDQuMDAwNCAwIDAgMCAtMi44NDM3NSwtNi44OTQ1MyB6IiBpZD0icGF0aDQyMzAtMi03LTUiLz4mI3hhOyAgPC9nPiYjeGE7PC9zdmc+" preserveAspectRatio="none" pointer-events="none"/><image x="388.5" y="134.5" width="49" height="49" xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNDguNzMwNzg5bW0iIGhlaWdodD0iNDguNzMwNzg5bW0iIHZpZXdCb3g9IjAgMCAxNzIuNjY4MTUgMTcyLjY2ODE1IiBpZD0ic3ZnOTk3NiIgdmVyc2lvbj0iMS4xIj4mI3hhOyAgPGRlZnMgaWQ9ImRlZnM5OTc4Ij4mI3hhOyAgICA8ZmlsdGVyIHN0eWxlPSJjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM6c1JHQiIgaWQ9ImZpbHRlcjQxODMiPiYjeGE7ICAgICAgPGZlQmxlbmQgbW9kZT0ibGlnaHRlbiIgaW4yPSJCYWNrZ3JvdW5kSW1hZ2UiIGlkPSJmZUJsZW5kNDE4NSIvPiYjeGE7ICAgIDwvZmlsdGVyPiYjeGE7ICAgIDxmaWx0ZXIgc3R5bGU9ImNvbG9yLWludGVycG9sYXRpb24tZmlsdGVyczpzUkdCIiBpZD0iZmlsdGVyMzcxMCI+JiN4YTsgICAgICA8ZmVCbGVuZCBtb2RlPSJsaWdodGVuIiBpbjI9IkJhY2tncm91bmRJbWFnZSIgaWQ9ImZlQmxlbmQzNzA4Ii8+JiN4YTsgICAgPC9maWx0ZXI+JiN4YTsgIDwvZGVmcz4mI3hhOyAgPG1ldGFkYXRhIGlkPSJtZXRhZGF0YTk5ODEiPiYjeGE7ICAgIDxyZGY6UkRGPiYjeGE7ICAgICAgPGNjOldvcmsgcmRmOmFib3V0PSIiPiYjeGE7ICAgICAgICA8ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD4mI3hhOyAgICAgICAgPGRjOnR5cGUgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIvPiYjeGE7ICAgICAgICA8ZGM6dGl0bGUvPiYjeGE7ICAgICAgPC9jYzpXb3JrPiYjeGE7ICAgIDwvcmRmOlJERj4mI3hhOyAgPC9tZXRhZGF0YT4mI3hhOyAgPGNpcmNsZSByPSI4NC45Njk1NjYiIGN5PSI4Ni4zMzQwNzYiIGN4PSI4Ni4zMzQwNzYiIGlkPSJwYXRoMzMzOC03IiBzdHlsZT0iZmlsbDojMDBhZDY5O2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpldmVub2RkO3N0cm9rZTojMTQ5OTY1O3N0cm9rZS13aWR0aDoyLjcyOTAxNDE2O3N0cm9rZS1saW5lY2FwOmJ1dHQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiLz4mI3hhOyAgPGcgaWQ9Imc4NTMiIHRyYW5zZm9ybT0ibWF0cml4KDEuMzc0NzM2LDAsMCwxLjM3NDczNiwtNDc2LjgzMTA0LDEuMjg1NDA1OCkiPiYjeGE7ICAgIDxwYXRoIHN0eWxlPSJvcGFjaXR5OjE7ZmlsbDojZjBmYWY2O2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojMTM5YTY1O3N0cm9rZS13aWR0aDowLjkzNzU7c3Ryb2tlLW9wYWNpdHk6MSIgZD0ibSAzNzQuNTY4MDcsNDIuNDEwMzEgYyAxLjUzNzQ5LC0xLjQ5NDI3IDIuODMxODksLTMuMDQzMzggNC42MzMxNSwtNC40MDg4IDEuMjc5ODcsLTAuOTcwMTkgMy4wMjA3OCwtMS44NDc2NCA0LjM2NTg2LC0yLjU0Njc4IDQuMjY2NjgsLTIuMjE3NzEgOC43ODAzNSwtMy4wMDcyNSAxMy4xODQ3MiwtMi45MDY2MiAzLjUwMTQyLDAuMDggNy4yMDczOSwxLjAwNDEzIDEwLjA0Njk2LDIuMTI3MTggMy42NTU0MywxLjQ0NTczIDYuMDkyOSwzLjIyMTA4IDcuMTA0ODMsMy45NDk1OCAxLjA3MzYyLDAuODE3NTkgMy4wMTU5OSwyLjUxODk2IDQuNDQ2MjYsNC4xODYzMyAxLjMyNzE2LDEuNTQ3MTcgMi4zOTQ4NCwzLjIyMzc4IDMuMDAxMzQsMy45OTE2OSAwLjQ0MzEzLDAuNTYxMDYgMS4zNzA0NCwyLjIwMjQxIDIuMTI0MzQsNC4wNDQ0NyAwLjQ2MDk4LDEuMTI2MzMgMC44MjA0MywyLjQyODU5IDEuMDcyMDIsMy4zMDk3NSAwLjMxOTY4LDEuMTE5NjUgMC41NDgxNSwzLjA2NjcyIDAuNTkxMDMsNC4yODgwNiAwLjAzMjYsMC45MjkzMyAtMC4wNjczLDQuMDg0NjggLTAuMTM4ODcsNC42Njc0NyAtMC4wNjQ1LDAuNTI0NzEgLTAuMDI5NCwxLjI3Nzc3IC0wLjE1OTMxLDIuMDQwNDEgLTAuMDgzNSwwLjQ5MDEzIC0wLjIyODA0LDEuMDMxNjcgLTAuMzk4NjYsMS41MzEyNiAtMC4xNzM0OCwwLjUwNzk0IC0wLjM4MjEsMS4xMTEyNiAtMC41OTMzOCwxLjU1MTMzIC0wLjUwNTMsMS4wNTI1MSAtMS4wMjU3MywxLjcyNDI5IC0xLjExNjU2LDEuOTE3NjggLTAuNTAxMywtMy4zMTI5NCAtMC42MTI0MywtNi4zMzM2NiAtMS4yMjI4OSwtOS4wNTQxOCAtMC4zNjMyNiwtMS42MTg4NCAtMC44OTQxMSwtMy4xMzEzOSAtMS40MjAxLC00LjUzNTk2IC0wLjg2Mjg5LC0yLjMwNDIxIC0xLjgzODc5LC00LjMxNzg0IC0yLjk3Mzc1LC02LjAzMzQ2IC0xLjU5ODczLC0yLjQxNjY3IC0zLjg1NzU1LC00LjI4NDc4IC01Ljc3MywtNS45MzQ0OCAtMi4zMDAyOCwtMS45ODExNSAtNC44ODgsLTMuMTcyODYgLTcuNjcwOTUsLTMuOTg1NTkgLTIuNzI0MjYsLTAuNzk1NTggLTUuNjM1NiwtMS4yMzMxMyAtOC42NDc1MSwtMS4yMjA4NiAtMi41MzQ5MywwLjAxMDMgLTUuMDUxMTUsMC41NzAwMiAtNy40NDY1OSwxLjUzOTk3IC0xLjM2MzUyLDAuNzc4MiAtMi45NzEwMywxLjYxODY3IC00LjM2NzI0LDIuNzc0MDEgLTEuODY5MzYsMS41NDY4NSAtMy40MTkwMSwzLjQyMTc5IC00LjA2MzE2LDQuMjAzMTUgLTAuNzM1NDMsMC44OTIwOSAtMS45NzU2OSwyLjUzMzExIC0yLjc5NjcsNC4xMzYyMyAtMC43MDUxMywxLjM3Njg2IC0xLjAyOTI4LDIuNzI1NzcgLTEuMjgwMTQsMy41NDgyNiAtMC44MTI4NSwyLjY2NDk5IC0wLjgxNjM3LDguMzYzMDQgLTAuNjgwMyw5LjI2NzI0IDAuMzIyNjgsMi4xNDQxMiAxLjEzNzA0LDQuOTczOTMgMi4zODgyOCw3LjQ1NjA5IDEuNzg4MiwzLjU0NzMzIDQuMTkwMzUsNi4wNzUyNCA1LjM5MTg5LDcuMDAzMjkgMS4yMDYzOSwwLjkzMTggMi44MDUxNSwyLjMxMDU1IDQuNzY3NzYsMy4wNjY0OCAyLjc0NzA1LDEuMDU4MDYgNS43NTc4MSwxLjI1MDM1IDcuNDAyMDQsMS4xODE0IDEuNzUzMDksMi42NTcwNiAzLjc0NTMsNC44MzU4NiA1Ljg5NTY0LDYuNjk4NDIgLTMuMzgzNTgsMS40MTA3OCAtNi4xNjU5OCwwLjgxNzY0IC05LjAwNywwLjQxOTkzIC04LjQ2MjQ5LC0yLjMxMzU4IC0xNC4zODQwMywtNS41MjkxNyAtMTkuMDMzLC0xMy4zODkwOSAtMi4wOTI2NCwtMy43MTA1OSAtNC43MzUwNCwtOS4yNzQ1IC00LjgwMzcsLTE1LjA4Mjc3IC0wLjA5MjcsLTcuODQxNDEgMy4yNTIzMiwtMTYuMDMxOCA3LjE3NjY5LC0xOS44MDEwOSB6IiBpZD0icmVjdDgzMyIvPiYjeGE7ICAgIDxwYXRoIHN0eWxlPSJvcGFjaXR5OjE7ZmlsbDojZjBmYWY2O2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojMTM5YTY1O3N0cm9rZS13aWR0aDowLjkzNzQ5OTk0O3N0cm9rZS1vcGFjaXR5OjEiIGQ9Im0gNDQ0Ljc0MzQ1LDgxLjMxNTI4IGMgLTEuNTM3MTMsMS40OTQ2NiAtMi44MzExNCwzLjA0NDA5IC00LjYzMjA1LDQuNDA5OTYgLTEuMjc5NjQsMC45NzA1IC0zLjAyMDMzLDEuODQ4MzggLTQuMzY1MjMsMi41NDc4NSAtNC4yNjYxNCwyLjIxODc3IC04Ljc3OTYxLDMuMDA5NDMgLTEzLjE4NCwyLjkwOTg5IC0zLjUwMTQ0LC0wLjA3OTEgLTcuMjA3NjMsLTEuMDAyMzUgLTEwLjA0NzQ5LC0yLjEyNDcgLTMuNjU1NzksLTEuNDQ0ODIgLTYuMDkzNjksLTMuMjE5NTcgLTcuMTA1ODEsLTMuOTQ3ODIgLTEuMDczODMsLTAuODE3MzIgLTMuMDE2NjIsLTIuNTE4MjEgLTQuNDQ3MywtNC4xODUyMyAtMS4zMjc1NCwtMS41NDY4NCAtMi4zOTU2NCwtMy4yMjMxOCAtMy4wMDIzMiwtMy45OTA5NCAtMC40NDMyNywtMC41NjA5NSAtMS4zNzA5OCwtMi4yMDIwOCAtMi4xMjUzNCwtNC4wNDM5NCAtMC40NjEyNiwtMS4xMjYyMiAtMC44MjEwMywtMi40MjgzOSAtMS4wNzI4NCwtMy4zMDk0OSAtMC4zMTk5NiwtMS4xMTk1NyAtMC41NDg5LC0zLjA2NjU5IC0wLjU5MjA5LC00LjI4NzkyIC0wLjAzMjgsLTAuOTI5MzIgMC4wNjYyLC00LjA4NDY5IDAuMTM3NiwtNC42Njc1IDAuMDY0NCwtMC41MjQ3MiAwLjAyOTEsLTEuMjc3NzggMC4xNTg3NywtMi4wNDA0NSAwLjA4MzMsLTAuNDkwMTYgMC4yMjc3OSwtMS4wMzE3MiAwLjM5ODI5LC0xLjUzMTM2IDAuMTczMzUsLTAuNTA3OTggMC4zODE4MSwtMS4xMTEzNiAwLjU5Mjk5LC0xLjU1MTQ4IDAuNTA1MDQsLTEuMDUyNjQgMS4wMjUzLC0xLjcyNDU0IDEuMTE2MDgsLTEuOTE3OTYgMC41MDIxMiwzLjMxMjgyIDAuNjE0LDYuMzMzNTEgMS4yMjUxNCw5LjA1Mzg4IDAuMzYzNjYsMS42MTg3NSAwLjg5NDg4LDMuMTMxMTcgMS40MjEyMiw0LjUzNTYxIDAuODYzNDUsMi4zMDQgMS44Mzk4NSw0LjMxNzM4IDIuOTc1MjQsNi4wMzI3MyAxLjU5OTMzLDIuNDE2MjYgMy44NTg2Miw0LjI4MzgyIDUuNzc0NDYsNS45MzMwNSAyLjMwMDc4LDEuOTgwNTcgNC44ODg4LDMuMTcxNjUgNy42NzE5NCwzLjk4MzY4IDIuNzI0NDcsMC43OTQ5MSA1LjYzNTkyLDEuMjMxNzQgOC42NDc4MiwxLjIxODcyIDIuNTM0OTIsLTAuMDExIDUuMDUxMDEsLTAuNTcxMjYgNy40NDYyMSwtMS41NDE4MSAxLjM2MzMxLC0wLjc3ODU0IDIuOTcwNjMsLTEuNjE5NCA0LjM2NjU1LC0yLjc3NTA5IDEuODY4OTcsLTEuNTQ3MzIgMy40MTgxNiwtMy40MjI2MyA0LjA2MjEyLC00LjIwNDE1IDAuNzM1MjEsLTAuODkyMjcgMS45NzUwNywtMi41MzM2IDIuNzk1NjcsLTQuMTM2OTMgMC43MDQ3OSwtMS4zNzcwMyAxLjAyODYxLC0yLjcyNjAyIDEuMjc5MjcsLTMuNTQ4NTcgMC44MTIxOCwtMi42NjUyIDAuODE0MywtOC4zNjMyNCAwLjY3OCwtOS4yNjc0MSAtMC4zMjMyLC0yLjE0NDA0IC0xLjEzODI3LC00Ljk3MzY1IC0yLjM5MDEyLC03LjQ1NTQ5IC0xLjc4OTA4LC0zLjU0NjkgLTQuMTkxODUsLTYuMDc0MjEgLTUuMzkzNjMsLTcuMDAxOTcgLTEuMjA2NjIsLTAuOTMxNSAtMi44MDU3MiwtMi4zMDk4NSAtNC43Njg1MSwtMy4wNjUyOSAtMi43NDczMSwtMS4wNTczOCAtNS43NTgxMiwtMS4yNDg5MyAtNy40MDIzNCwtMS4xNzk1NyAtMS43NTM3NCwtMi42NTY2MyAtMy43NDY1LC00LjgzNDkzIC01Ljg5NzMsLTYuNjk2OTcgMy4zODMyMywtMS40MTE2MSA2LjE2NTc5LC0wLjgxOTE2IDkuMDA2OSwtMC40MjIxNSA4LjQ2MzA3LDIuMzExNDggMTQuMzg1NCw1LjUyNTYgMTkuMDM2MzIsMTMuMzg0MzggMi4wOTM1NSwzLjcxMDA3IDQuNzM3MzMsOS4yNzMzMyA0LjgwNzQzLDE1LjA4MTU4IDAuMDk0Niw3Ljg0MTM5IC0zLjI0ODM1LDE2LjAzMjYgLTcuMTcxOCwxOS44MDI4NiB6IiBpZD0icmVjdDgzMy0zIi8+JiN4YTsgIDwvZz4mI3hhOzwvc3ZnPg==" preserveAspectRatio="none" pointer-events="none"/><image x="388.5" y="68.5" width="49" height="50" xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIGlkPSJzdmc5OTc2IiB2aWV3Qm94PSIwIDAgMTc0LjY3OSAxNzUuNTc2MzMiIGhlaWdodD0iNDkuNTUxNTQ0bW0iIHdpZHRoPSI0OS4yOTgyOThtbSI+JiN4YTsgIDxkZWZzIGlkPSJkZWZzOTk3OCIvPiYjeGE7ICA8bWV0YWRhdGEgaWQ9Im1ldGFkYXRhOTk4MSI+JiN4YTsgICAgPHJkZjpSREY+JiN4YTsgICAgICA8Y2M6V29yayByZGY6YWJvdXQ9IiI+JiN4YTsgICAgICAgIDxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PiYjeGE7ICAgICAgICA8ZGM6dHlwZSByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIi8+JiN4YTsgICAgICAgIDxkYzp0aXRsZS8+JiN4YTsgICAgICA8L2NjOldvcms+JiN4YTsgICAgPC9yZGY6UkRGPiYjeGE7ICA8L21ldGFkYXRhPiYjeGE7ICA8ZyBpZD0iZzk1MSI+JiN4YTsgICAgPHJlY3Qgc3R5bGU9ImZpbGw6IzAwYWQ2OTtmaWxsLW9wYWNpdHk6MTtzdHJva2U6IzYxNjE2MTtzdHJva2Utd2lkdGg6NC45Mjg2NzU2NTtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIgaWQ9InJlY3Q0MzQ5LTgtOSIgd2lkdGg9IjE2OS43NTAzMiIgaGVpZ2h0PSIxNzAuNjQ3NjYiIHg9IjIuNDY0MzMzNSIgeT0iMi40NjQzMzczIi8+JiN4YTsgICAgPGcgaWQ9Imc4ODciIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIuMjM3ODQ2OGUtNiwtMi44NjM0NTU2ZS01KSI+JiN4YTsgICAgICA8cGF0aCBzdHlsZT0iY29sb3I6IzAwMDAwMDtmb250LXN0eWxlOm5vcm1hbDtmb250LXZhcmlhbnQ6bm9ybWFsO2ZvbnQtd2VpZ2h0Om5vcm1hbDtmb250LXN0cmV0Y2g6bm9ybWFsO2ZvbnQtc2l6ZTptZWRpdW07bGluZS1oZWlnaHQ6bm9ybWFsO2ZvbnQtZmFtaWx5OnNhbnMtc2VyaWY7dGV4dC1pbmRlbnQ6MDt0ZXh0LWFsaWduOnN0YXJ0O3RleHQtZGVjb3JhdGlvbjpub25lO3RleHQtZGVjb3JhdGlvbi1saW5lOm5vbmU7dGV4dC1kZWNvcmF0aW9uLXN0eWxlOnNvbGlkO3RleHQtZGVjb3JhdGlvbi1jb2xvcjojMDAwMDAwO2xldHRlci1zcGFjaW5nOm5vcm1hbDt3b3JkLXNwYWNpbmc6bm9ybWFsO3RleHQtdHJhbnNmb3JtOm5vbmU7d3JpdGluZy1tb2RlOmxyLXRiO2RpcmVjdGlvbjpsdHI7YmFzZWxpbmUtc2hpZnQ6YmFzZWxpbmU7dGV4dC1hbmNob3I6c3RhcnQ7d2hpdGUtc3BhY2U6bm9ybWFsO2NsaXAtcnVsZTpub256ZXJvO2Rpc3BsYXk6aW5saW5lO292ZXJmbG93OnZpc2libGU7dmlzaWJpbGl0eTp2aXNpYmxlO29wYWNpdHk6MTtpc29sYXRpb246YXV0bzttaXgtYmxlbmQtbW9kZTpub3JtYWw7Y29sb3ItaW50ZXJwb2xhdGlvbjpzUkdCO2NvbG9yLWludGVycG9sYXRpb24tZmlsdGVyczpsaW5lYXJSR0I7c29saWQtY29sb3I6IzAwMDAwMDtzb2xpZC1vcGFjaXR5OjE7ZmlsbDojZmZmZmZmO2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpldmVub2RkO3N0cm9rZTojNjE2MTYxO3N0cm9rZS13aWR0aDoxLjE5MDQ5MjI3O3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2UtZGFzaG9mZnNldDowO3N0cm9rZS1vcGFjaXR5OjE7Y29sb3ItcmVuZGVyaW5nOmF1dG87aW1hZ2UtcmVuZGVyaW5nOmF1dG87c2hhcGUtcmVuZGVyaW5nOmF1dG87dGV4dC1yZW5kZXJpbmc6YXV0bztlbmFibGUtYmFja2dyb3VuZDphY2N1bXVsYXRlIiBkPSJtIDI3LjQ2NTk0NywyMi4yNjM2MDYgYSA0Ljc2MjUyNTUsNC43NjI1MjU1IDAgMCAwIC00LjQyMjU3LDYuMDMzOTQ1IEwgMzMuNDQxNzYsNjUuNzMzNTggYSA0Ljc2MjUyNTUsNC43NjI1MjU1IDAgMCAwIDAuMDcyMDIsMC4yMTYyNTcgNC43NjI1MjU1LDQuNzYyNTI1NSAwIDAgMCAwLjA1ODA5LDAuMTcyMDY1IDQuNzYyNTI1NSw0Ljc2MjUyNTUgMCAwIDAgMC4wOTUzNiwwLjIyNzg2NCA0Ljc2MjUyNTUsNC43NjI1MjU1IDAgMCAwIDAuMSwwLjIyMDkgNC43NjI1MjU1LDQuNzYyNTI1NSAwIDAgMCAwLjEwMjI2NywwLjE5MDY3MiA0Ljc2MjUyNTUsNC43NjI1MjU1IDAgMCAwIDAuMTMwMjE2LDAuMjI3ODYzIDQuNzYyNTI1NSw0Ljc2MjUyNTUgMCAwIDAgMC4xMjMyMjksMC4xNzkwNDIgNC43NjI1MjU1LDQuNzYyNTI1NSAwIDAgMCAwLjE0NDE3MywwLjIwMjI5MiA0Ljc2MjUyNTUsNC43NjI1MjU1IDAgMCAwIDAuMTU4MTEyLDAuMTg4MzUxIDQuNzYyNTI1NSw0Ljc2MjUyNTUgMCAwIDAgMC4xNTExMzQsMC4xNzIwNjUgNC43NjI1MjU1LDQuNzYyNTI1NSAwIDAgMCAwLjE4NjAxNywwLjE4MzY5NSA0Ljc2MjUyNTUsNC43NjI1MjU1IDAgMCAwIDAuMTU4MTEyLDAuMTQ0MTYgNC43NjI1MjU1LDQuNzYyNTI1NSAwIDAgMCAwLjE4NjAxNywwLjE1MTEzNiA0Ljc2MjUyNTUsNC43NjI1MjU1IDAgMCAwIDAuMTkyOTk1LDAuMTQ2NDkyIDQuNzYyNTI1NSw0Ljc2MjUyNTUgMCAwIDAgMC4yMTE2MDIsMC4xMzQ4NjEgNC43NjI1MjU1LDQuNzYyNTI1NSAwIDAgMCAwLjE4MTM2NywwLjExMTU1MSA0Ljc2MjUyNTUsNC43NjI1MjU1IDAgMCAwIDAuMjUzNDQ1LDAuMTMwMjE4IDQuNzYyNTI1NSw0Ljc2MjUyNTUgMCAwIDAgMC4xNzIwNiwwLjA4MTQzIDQuNzYyNTI1NSw0Ljc2MjUyNTUgMCAwIDAgMC4yNTM0NTUsMC4xMDAwMDQgNC43NjI1MjU1LDQuNzYyNTI1NSAwIDAgMCAwLjE5NTMyNCwwLjA3MjE0IDQuNzYyNTI1NSw0Ljc2MjUyNTUgMCAwIDAgMC4yOTA2NDksMC4wODE0MyA0Ljc2MjUyNTUsNC43NjI1MjU1IDAgMCAwIDAuMTUxMTQyLDAuMDM5NTIgNC43NjI1MjU1LDQuNzYyNTI1NSAwIDAgMCAwLjI2NzM5MywwLjA0NjU1IDQuNzYyNTI1NSw0Ljc2MjUyNTUgMCAwIDAgMC4yMzcxNzcsMC4wMzQ4OCA0Ljc2MjUyNTUsNC43NjI1MjU1IDAgMCAwIDAuMTgxMzY4LDAuMDEzOTMgNC43NjI1MjU1LDQuNzYyNTI1NSAwIDAgMCAwLjMzNzE1OSwwLjAxNjMxIDQuNzYyNTI1NSw0Ljc2MjUyNTUgMCAwIDAgMy4wNjY5NjMsLTEuMTE4NDI3IDQuNzYyNTI1NSw0Ljc2MjUyNTUgMCAwIDAgMC4zNDg3ODcsLTAuMzI1NTMzIDQuNzYyNTI1NSw0Ljc2MjUyNTUgMCAwIDAgMC4wNTgwOSwtMC4wNjA0OCBsIDQuNDkyMzI4LC00Ljc5MjI3NiAyMC45OTIwODIsMjAuMjY2NjAzIC0yMi42NDI5ODgsNy40MTk3ODUgYSA0Ljc2MjUyNTUsNC43NjI1MjU1IDAgMCAwIC0xLjY2NzE4Miw4LjA5NjQxMyBsIDUuMDAxNTQ3LDQuNDEzMjY3IC0yNC45NDQ5NDcsMjQuNDkxNTMgYSA0Ljc2MjUyNTUsNC43NjI1MjU1IDAgMCAwIDMuMzM2Njg1LDguMTYxNTIgNC43NjI1MjU1LDQuNzYyNTI1NSAwIDAgMCAzLjgyMDMzOCwtMS44MzkyNCBsIDI4LjExMTksLTI3LjYwMjY4IEEgNC43NjI1MjU1LDQuNzYyNTI1NSAwIDAgMCA1Ny44MTkyMyw5OS4zNjEwNTMgbCAtMi41OTk1ODcsLTIuMjkyNjY1IDIyLjI0NzY5OCwtNy4yODcyNDUgYSA0Ljc2MjUyNTUsNC43NjI1MjU1IDAgMCAwIDEuODI1Mjk0LC03Ljk1MjI0MSBMIDQ5LjEzNjg2Myw1Mi43MTI1MDMgYSA0Ljc2MjUyNTUsNC43NjI1MjU1IDAgMCAwIC02Ljc4MDM0LDAuMTY5NzQzIGwgLTIuMDA0MzQxLDIuMTM5MjA4IC01Ljg5MjA5OSwtMjEuMjA4MzM1IDIwLjY5NDQ0Niw1LjYxNTQwOSAtMS44ODgwNzQsMi4wMjI5NDMgYSA0Ljc2MjUyNTUsNC43NjI1MjU1IDAgMCAwIDAuMTg2MDE3LDYuNjg3MzMzIGwgMjQuOTU2NTc1LDIzLjkxNzIwMyBhIDQuNzYyNTI1NSw0Ljc2MjUyNTUgMCAxIDAgNi41ODk2ODIsLTYuODc1NjczIEwgNjMuNDM2OTYsNDQuNTEzNzg5IDY3LjUwODQyMyw0MC4xNTE2NjkgQSA0Ljc2MjUyNTUsNC43NjI1MjU1IDAgMCAwIDY1LjI3Mzg5MSwzMi4zMDYzODMgTCAyOC44Nzk1NzcsMjIuNDI4ODQ5IEEgNC43NjI1MjU1LDQuNzYyNTI1NSAwIDAgMCAyNy40NjU4NCwyMi4yNjM3NjEgWiIgaWQ9InBhdGg0MjI2LTgtMi02LTYiLz4mI3hhOyAgICAgIDxwYXRoIHN0eWxlPSJjb2xvcjojMDAwMDAwO2ZvbnQtc3R5bGU6bm9ybWFsO2ZvbnQtdmFyaWFudDpub3JtYWw7Zm9udC13ZWlnaHQ6bm9ybWFsO2ZvbnQtc3RyZXRjaDpub3JtYWw7Zm9udC1zaXplOm1lZGl1bTtsaW5lLWhlaWdodDpub3JtYWw7Zm9udC1mYW1pbHk6c2Fucy1zZXJpZjt0ZXh0LWluZGVudDowO3RleHQtYWxpZ246c3RhcnQ7dGV4dC1kZWNvcmF0aW9uOm5vbmU7dGV4dC1kZWNvcmF0aW9uLWxpbmU6bm9uZTt0ZXh0LWRlY29yYXRpb24tc3R5bGU6c29saWQ7dGV4dC1kZWNvcmF0aW9uLWNvbG9yOiMwMDAwMDA7bGV0dGVyLXNwYWNpbmc6bm9ybWFsO3dvcmQtc3BhY2luZzpub3JtYWw7dGV4dC10cmFuc2Zvcm06bm9uZTt3cml0aW5nLW1vZGU6bHItdGI7ZGlyZWN0aW9uOmx0cjtiYXNlbGluZS1zaGlmdDpiYXNlbGluZTt0ZXh0LWFuY2hvcjpzdGFydDt3aGl0ZS1zcGFjZTpub3JtYWw7Y2xpcC1ydWxlOm5vbnplcm87ZGlzcGxheTppbmxpbmU7b3ZlcmZsb3c6dmlzaWJsZTt2aXNpYmlsaXR5OnZpc2libGU7b3BhY2l0eToxO2lzb2xhdGlvbjphdXRvO21peC1ibGVuZC1tb2RlOm5vcm1hbDtjb2xvci1pbnRlcnBvbGF0aW9uOnNSR0I7Y29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzOmxpbmVhclJHQjtzb2xpZC1jb2xvcjojMDAwMDAwO3NvbGlkLW9wYWNpdHk6MTtmaWxsOiNmZmZmZmY7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlOiM2MTYxNjE7c3Ryb2tlLXdpZHRoOjEuMTkwNDkyMjc7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1kYXNob2Zmc2V0OjA7c3Ryb2tlLW9wYWNpdHk6MTtjb2xvci1yZW5kZXJpbmc6YXV0bztpbWFnZS1yZW5kZXJpbmc6YXV0bztzaGFwZS1yZW5kZXJpbmc6YXV0bzt0ZXh0LXJlbmRlcmluZzphdXRvO2VuYWJsZS1iYWNrZ3JvdW5kOmFjY3VtdWxhdGUiIGQ9Ik0gMTMyLjQxMDA4LDI2LjAzNzQzNSAxMDUuMzMyOSw1My4xMTIyOTIgMTAxLjQwNTYsNDguNjI0NjIgYyAtMi40NzE2MjQsLTIuODIyOTA3IC03LjA4NTE0NiwtMS44MTIwMDcgLTguMTQ5OTA4LDEuNzg1NzY5IGwgLTE5LjU2NDM4OCw2Ni4xNTI1MDEgLTEuMDk3NDk1LC0xLjA5NzUyIGMgLTEuODQ4MTc1LC0xLjg0ODgzIC00Ljg0MTE3NywtMS44NjIzMiAtNi43MDU5NDIsLTAuMDMwMiBsIC0zMC4xNTU3NzUsMjkuNjM0OTIgYyAtNC41Mjg3NDYsNC40NTA0OCAyLjE0NjE5NSwxMS4yNDM5OSA2LjY3NTcxNyw2Ljc5NDI5IGwgMjYuNzg4ODQ3LC0yNi4zMjg0NSAzLjQyMjcxOSwzLjQyMjcyIGMgMi41NTQ0MjQsMi41NTI4NCA2LjkwOTY5MSwxLjQ0NDg4IDcuOTMzNjUzLC0yLjAxODMgbCAxOS4zODMwMywtNjUuNTMxNjU1IDEuNTgxMTUyLDEuODA2Njk5IGMgMS44MTM4OCwyLjA3NDA1MSA1LjAwNCwyLjE4MDc0NCA2Ljk1MjQsMC4yMzI1MTggbCAyOS4yNzkxNiwtMjkuMjgxNDg0IGMgMy4wOTg2NywtOC4zNTQwNjMgLTUuMzM4NjksLTguMTI4OTYxIC01LjMzODY5LC04LjEyODk2MSB6IiBpZD0icGF0aDQyMjgtNTYtNS03LTciLz4mI3hhOyAgICAgIDxwYXRoIHN0eWxlPSJjb2xvcjojMDAwMDAwO2ZvbnQtc3R5bGU6bm9ybWFsO2ZvbnQtdmFyaWFudDpub3JtYWw7Zm9udC13ZWlnaHQ6bm9ybWFsO2ZvbnQtc3RyZXRjaDpub3JtYWw7Zm9udC1zaXplOm1lZGl1bTtsaW5lLWhlaWdodDpub3JtYWw7Zm9udC1mYW1pbHk6c2Fucy1zZXJpZjt0ZXh0LWluZGVudDowO3RleHQtYWxpZ246c3RhcnQ7dGV4dC1kZWNvcmF0aW9uOm5vbmU7dGV4dC1kZWNvcmF0aW9uLWxpbmU6bm9uZTt0ZXh0LWRlY29yYXRpb24tc3R5bGU6c29saWQ7dGV4dC1kZWNvcmF0aW9uLWNvbG9yOiMwMDAwMDA7bGV0dGVyLXNwYWNpbmc6bm9ybWFsO3dvcmQtc3BhY2luZzpub3JtYWw7dGV4dC10cmFuc2Zvcm06bm9uZTt3cml0aW5nLW1vZGU6bHItdGI7ZGlyZWN0aW9uOmx0cjtiYXNlbGluZS1zaGlmdDpiYXNlbGluZTt0ZXh0LWFuY2hvcjpzdGFydDt3aGl0ZS1zcGFjZTpub3JtYWw7Y2xpcC1ydWxlOm5vbnplcm87ZGlzcGxheTppbmxpbmU7b3ZlcmZsb3c6dmlzaWJsZTt2aXNpYmlsaXR5OnZpc2libGU7b3BhY2l0eToxO2lzb2xhdGlvbjphdXRvO21peC1ibGVuZC1tb2RlOm5vcm1hbDtjb2xvci1pbnRlcnBvbGF0aW9uOnNSR0I7Y29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzOmxpbmVhclJHQjtzb2xpZC1jb2xvcjojMDAwMDAwO3NvbGlkLW9wYWNpdHk6MTtmaWxsOiNmZmZmZmY7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlOiM2MTYxNjE7c3Ryb2tlLXdpZHRoOjEuMTkwNDkyMjc7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1kYXNob2Zmc2V0OjA7c3Ryb2tlLW9wYWNpdHk6MTtjb2xvci1yZW5kZXJpbmc6YXV0bztpbWFnZS1yZW5kZXJpbmc6YXV0bztzaGFwZS1yZW5kZXJpbmc6YXV0bzt0ZXh0LXJlbmRlcmluZzphdXRvO2VuYWJsZS1iYWNrZ3JvdW5kOmFjY3VtdWxhdGUiIGQ9Im0gMTQ4LjUwNzU2LDQyLjc5Mjk2NyBhIDQuNzYyNTI1NSw0Ljc2MjUyNTUgMCAwIDAgLTMuMjg3ODYsMS40MDkwOSBMIDExNy4xNDUsNzEuNzU4MjI4IGEgNC43NjI1MjU1LDQuNzYyNTI1NSAwIDAgMCAwLjQ3OSw3LjIwODE4MyBsIDEuMjAyMTQsMC45MDIxODIgLTE4LjEyNzQxLDYuMzk2NjgyIGEgNC43NjI1MjU1LDQuNzYyNTI1NSAwIDAgMCAtMS43NTA4OTUsNy44ODk0NjYgbCAyNy4wMzc2NTUsMjYuNTE2Nzk5IGEgNC43NjI1MjU1LDQuNzYyNTI1NSAwIDAgMCA2LjQ2ODc3LDAuMTgzNyBsIDIuNjIwNTIsLTIuMjkyNjggNi4xMDgzNSwyMS45ODcyOCAtMjEuMjI5MjUsLTUuOTc4MTQgMi40NDE0NywtMi42MDQyNCBhIDQuNzYyNTI1NSw0Ljc2MjUyNTUgMCAwIDAgLTAuMTc5MDQsLTYuNjk0MzEgTCA5Ny43NDgwMTksMTAxLjgyMzMyIGEgNC43NjI1MjU1LDQuNzYyNTI1NSAwIDAgMCAtMy43ODMxMjUsLTEuNzkyNzUgNC43NjI1MjU1LDQuNzYyNTI1NSAwIDAgMCAtMy4yOTQ4MzIsOC4yMDEwNSBsIDIxLjU1NDc3OCwyMC42NTcyNSAtNC41NzYwMyw0Ljg4Mjk2IGEgNC43NjI1MjU1LDQuNzYyNTI1NSAwIDAgMCAyLjE4MTA2LDcuODQwNjQgbCAzNi45MTUxOCwxMC4zOTgzOSBhIDQuNzYyNTI1NSw0Ljc2MjUyNTUgMCAwIDAgNS44ODA0NywtNS44NTcyMyBsIC0xMC4zOTgzNywtMzcuNDM2MDQgYSA0Ljc2MjUyNTUsNC43NjI1MjU1IDAgMCAwIC03LjcyNDM4LC0yLjMwODk0IGwgLTQuOTk5MjIsNC4zNzM3NCAtMTguNDM0MzQsLTE4LjA3ODU4NiAxOS4zMTU1OSwtNi44MTUyMTkgYSA0Ljc2MjUyNTUsNC43NjI1MjU1IDAgMCAwIDEuMjcxOSwtOC4zMDEwMjYgbCAtMy44ODU0NCwtMi45MTM1MDUgMjQuMTIxODIsLTIzLjY3MzA2NCBhIDQuNzYyNTI1NSw0Ljc2MjUyNTUgMCAwIDAgLTMuMzg1NTIsLTguMjA4MDIzIHoiIGlkPSJwYXRoNDIzMC0yLTctNS01Ii8+JiN4YTsgICAgPC9nPiYjeGE7ICA8L2c+JiN4YTs8L3N2Zz4=" preserveAspectRatio="none" pointer-events="none"/><image x="459.5" y="65" width="38" height="38" xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIGlkPSJzdmc0Nzg3IiB2aWV3Qm94PSIwIDAgMTM0LjQ1MDg1IDEzMi44OTcxNCIgaGVpZ2h0PSIzNy41MDY1MjdtbSIgd2lkdGg9IjM3Ljk0NTAxOW1tIj4mI3hhOyAgPGRlZnMgaWQ9ImRlZnM0Nzg5Ii8+JiN4YTsgIDxtZXRhZGF0YSBpZD0ibWV0YWRhdGE0NzkyIj4mI3hhOyAgICA8cmRmOlJERj4mI3hhOyAgICAgIDxjYzpXb3JrIHJkZjphYm91dD0iIj4mI3hhOyAgICAgICAgPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+JiN4YTsgICAgICAgIDxkYzp0eXBlIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiLz4mI3hhOyAgICAgICAgPGRjOnRpdGxlLz4mI3hhOyAgICAgIDwvY2M6V29yaz4mI3hhOyAgICA8L3JkZjpSREY+JiN4YTsgIDwvbWV0YWRhdGE+JiN4YTsgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMDkuNTcwNzksLTMxMC4wOTc4MSkiIGlkPSJsYXllcjEiPiYjeGE7ICAgIDxyZWN0IHJ5PSIyMy4yMzAwMDciIHk9IjMxMS4wOTc4MSIgeD0iMjEwLjU3MDc5IiBoZWlnaHQ9IjEzMC44OTcxNCIgd2lkdGg9IjEzMi40NTA4NSIgaWQ9InJlY3Q0MTQ4IiBzdHlsZT0ib3BhY2l0eToxO2ZpbGw6I2UyMWQzODtmaWxsLW9wYWNpdHk6MTtzdHJva2U6I2FhMTYwNDtzdHJva2Utd2lkdGg6MjtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIvPiYjeGE7ICAgIDxwYXRoIGlkPSJwYXRoNDE1My0xIiBkPSJtIDI3Ny4xMzg1MywzMjIuNDI0OTYgYSAxMS4xOTQ4MjIsMTEuMTk0ODIyIDAgMCAwIC0xMS4xOTY0NywxMS4xOTI3MyAxMS4xOTQ4MjIsMTEuMTk0ODIyIDAgMCAwIDguMjg3NzIsMTAuNzk5MTUgbCAwLDE2Ljc5Mjg1IGEgMTkuMTkxODI5LDE5LjE5MTgyOSAwIDAgMCAtMTMuODk1MzQsMTAuMjE0NDEgbCAtMTUuNzA1ODMsLTQuNzcxNzMgYSAxMS4xOTQ4MjIsMTEuMTk0ODIyIDAgMCAwIDAuMDgyNiwtMS4yODk0MyAxMS4xOTQ4MjIsMTEuMTk0ODIyIDAgMCAwIC0xMS4xOTI3NCwtMTEuMTkyNzMgMTEuMTk0ODIyLDExLjE5NDgyMiAwIDAgMCAtMTEuMTk2NDYsMTEuMTkyNzMgMTEuMTk0ODIyLDExLjE5NDgyMiAwIDAgMCAxMS4xOTY0NiwxMS4xOTY0OCAxMS4xOTQ4MjIsMTEuMTk0ODIyIDAgMCAwIDguOTQzNzIsLTQuNDgzMDkgbCAxNi4wNDY5MSw0Ljg3NjY3IGEgMTkuMTkxODI5LDE5LjE5MTgyOSAwIDAgMCAtMC4yODQ4NiwzLjE4MjQgMTkuMTkxODI5LDE5LjE5MTgyOSAwIDAgMCA1Ljk3ODY5LDEzLjg4Nzg0IGwgLTEwLjUxODAyLDEyLjE1OTgzIGEgMTEuMTk0ODIyLDExLjE5NDgyMiAwIDAgMCAtMy42ODg0NSwtMC42MzcyMyAxMS4xOTQ4MjIsMTEuMTk0ODIyIDAgMCAwIC0xMS4xOTY0NiwxMS4xOTI3NSAxMS4xOTQ4MjIsMTEuMTk0ODIyIDAgMCAwIDExLjE5NjQ2LDExLjE5NjQ3IDExLjE5NDgyMiwxMS4xOTQ4MjIgMCAwIDAgMTEuMTkyNzYsLTExLjE5NjQ3IDExLjE5NDgyMiwxMS4xOTQ4MjIgMCAwIDAgLTIuNjc2MzcsLTcuMjQxOTMgbCAxMC40OTkyNiwtMTIuMTMzNTggYSAxOS4xOTE4MjksMTkuMTkxODI5IDAgMCAwIDguNDAzOTQsMS45NjQxNiAxOS4xOTE4MjksMTkuMTkxODI5IDAgMCAwIDcuNzUxNzIsLTEuNjYwNTUgbCAxMC42MTU0NywxMy42OTI5MiBhIDExLjE5NDgyMiwxMS4xOTQ4MjIgMCAwIDAgLTEuOTcxNjYsNi4zNDk4MiAxMS4xOTQ4MjIsMTEuMTk0ODIyIDAgMCAwIDExLjE5Mjc1LDExLjE5MjczIDExLjE5NDgyMiwxMS4xOTQ4MjIgMCAwIDAgMTEuMTk2NDYsLTExLjE5MjczIDExLjE5NDgyMiwxMS4xOTQ4MjIgMCAwIDAgLTExLjE5NjQ2LC0xMS4xOTY1IDExLjE5NDgyMiwxMS4xOTQ4MjIgMCAwIDAgLTQuNTA1NTksMC45NjMzNSBMIDI5MC4zMDMxLDM5NC4zMjY4NiBhIDE5LjE5MTgyOSwxOS4xOTE4MjkgMCAwIDAgNi4zMDEwNywtMTQuMTkxNDYgMTkuMTkxODI5LDE5LjE5MTgyOSAwIDAgMCAtMC4zNDg1NywtMy41NzIyNCBsIDE1LjA3OTgzLC01LjMzMzk3IGEgMTEuMTk0ODIyLDExLjE5NDgyMiAwIDAgMCA5LjY2MzM4LDUuNTczODYgMTEuMTk0ODIyLDExLjE5NDgyMiAwIDAgMCAxMS4xOTY1LC0xMS4xOTY0NyAxMS4xOTQ4MjIsMTEuMTk0ODIyIDAgMCAwIC0xMS4xOTY1LC0xMS4xOTI3MyAxMS4xOTQ4MjIsMTEuMTk0ODIyIDAgMCAwIC0xMS4xOTI3NiwxMS4xOTI3MyAxMS4xOTQ4MjIsMTEuMTk0ODIyIDAgMCAwIDAuMDA0LDAuMTA0OTUgbCAtMTUuNDM5NjksNS40NjE0MyBhIDE5LjE5MTgyOSwxOS4xOTE4MjkgMCAwIDAgLTE0LjA4MjQ1LC05Ljk4OTUxIGwgMCwtMTYuODMwMzQgYSAxMS4xOTQ4MjIsMTEuMTk0ODIyIDAgMCAwIDguMDQ0MDcsLTEwLjczNTQzIDExLjE5NDgyMiwxMS4xOTQ4MjIgMCAwIDAgLTExLjE5MjczLC0xMS4xOTI3MyB6IiBzdHlsZT0ib3BhY2l0eToxO2ZpbGw6I2Y5ZmJmYTtmaWxsLW9wYWNpdHk6MTtzdHJva2U6IzRmNGY0ZjtzdHJva2Utd2lkdGg6Mi4wMDc1ODIxOTtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIvPiYjeGE7ICA8L2c+JiN4YTs8L3N2Zz4=" preserveAspectRatio="none" pointer-events="none"/><image x="459.5" y="-0.5" width="38" height="38" xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIGlkPSJzdmc0MTM3IiB2aWV3Qm94PSIwIDAgMTM0LjQ1MDg1IDEzMi44OTcxNCIgaGVpZ2h0PSIzNy41MDY1MjdtbSIgd2lkdGg9IjM3Ljk0NTAxOW1tIj4mI3hhOyAgPGRlZnMgaWQ9ImRlZnM0MTM5Ii8+JiN4YTsgIDxtZXRhZGF0YSBpZD0ibWV0YWRhdGE0MTQyIj4mI3hhOyAgICA8cmRmOlJERj4mI3hhOyAgICAgIDxjYzpXb3JrIHJkZjphYm91dD0iIj4mI3hhOyAgICAgICAgPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+JiN4YTsgICAgICAgIDxkYzp0eXBlIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiLz4mI3hhOyAgICAgICAgPGRjOnRpdGxlLz4mI3hhOyAgICAgIDwvY2M6V29yaz4mI3hhOyAgICA8L3JkZjpSREY+JiN4YTsgIDwvbWV0YWRhdGE+JiN4YTsgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMTUuNjMxNzIsLTEzMS42Mjc5MikiIGlkPSJsYXllcjEiPiYjeGE7ICAgIDxnIGlkPSJsYXllcjIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC05NS43MTY3MzMsMjYuNTY3MjkzKSI+JiN4YTsgICAgICA8cmVjdCBzdHlsZT0ib3BhY2l0eToxO2ZpbGw6I2UyMWQzODtmaWxsLW9wYWNpdHk6MTtzdHJva2U6I2FhMTYwNDtzdHJva2Utd2lkdGg6MjtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIgaWQ9InJlY3Q0MTQ4IiB3aWR0aD0iMTMyLjQ1MDg1IiBoZWlnaHQ9IjEzMC44OTcxNCIgeD0iMzEyLjM0ODQ1IiB5PSIxMDYuMDYwNjIiIHJ5PSIyMy4yMzAwMDciLz4mI3hhOyAgICAgIDxwYXRoIHN0eWxlPSJvcGFjaXR5OjE7ZmlsbDojZmZmZmZmO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojYWExNjA0O3N0cm9rZS13aWR0aDoyLjM2NDcxNTU4O3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxIiBkPSJtIDM3Ny4wODY4MywxMTUuNjczNTEgYyAtMS4zNjQ2NiwwLjAzMzUgLTIuNzE4NCwwLjYwNTg0IC0zLjYyNzA3LDEuNjU2MzggbCAtMTUuNzQ2MDEsMTguMjA0NDkgYyAtMS41NTA4LDEuNzkyOTMgLTEuMjAwNzYsNC4yNzkwOSAwLjc4NDgyLDUuNTc0MTEgbCAwLjI4NTc3LDAuMTg2MjUgYyAxLjk4NTU4LDEuMjk1MDIgNC44MzI1NCwwLjg5NDM0IDYuMzgzMzQsLTAuODk4NiBsIDcuMTE0NDcsLTguMjI1NjEgMCwyMS4zMjI3NSBjIDAsMC4yMDk4OCAwLjAxLDAuNDE2ODQgMC4wMjc0LDAuNjIwNzIgYSAyMS40OTMwMTQsMjEuMjYxOTA5IDAgMCAwIC0xNC4zMzIxOSwxMC43OTQxMSBsIC0yMC4wODc2OCwtNy4wMDI5MyAxMS40NTk5LC00LjU0NjM0IGMgMi4yMDM1MSwtMC44NzQxNiAzLjUxODg3LC0zLjQzMDYxIDIuOTQ5NjUsLTUuNzMxODIgbCAtMC4wODE5LC0wLjMzMTIxIGMgLTAuNTY5MjIsLTIuMzAxMjEgLTIuODAxNywtMy40NTAxNyAtNS4wMDUyMSwtMi41NzYwMSBsIC0yMi4zNzMwNSw4Ljg3NTk5IGMgLTEuMzg0NzksMC41NDkzNyAtMi40MTc4NywxLjc2MzQzIC0yLjg1MzksMy4xNjA2OSAtMC4wMDMsMC4wMDcgLTAuMDA3LDAuMDE0NCAtMC4wMDksMC4wMjE4IC0wLjUxNzg2LDEuMzYwNSAtMC40NTkzMSwyLjk0Mzc5IDAuMjc5NzYsNC4yMjc5IGwgMTIuMDA2NjUsMjAuODYwODYgYyAxLjE4MjUsMi4wNTQ1OCAzLjY0NTQ1LDIuNTQyNDggNS41MjE5MSwxLjA5Mzg3IGwgMC4yNywtMC4yMDg0MSBjIDEuODc2NDYsLTEuNDQ4NjEgMi40MzUyMSwtNC4yNjg2OCAxLjI1MjcsLTYuMzIzMjYgbCAtNS40MjU0LC05LjQyNTc0IDE5LjYxNzE2LDYuODM4ODMgYSAyMS40OTMwMTQsMjEuMjYxOTA5IDAgMCAwIC0wLjAzNiwxLjAxNDY0IDIxLjQ5MzAxNCwyMS4yNjE5MDkgMCAwIDAgMTYuOTMzMzcsMjAuNzUxNTkgbCAwLDEwLjE3NzkgYSAxMy4wMDM1NiwxMi44NjM3MzcgMCAwIDAgLTguMTkyNTYsMTEuOTQ1ODEgMTMuMDAzNTYsMTIuODYzNzM3IDAgMCAwIDEzLjAwMzI1LDEyLjg2MzU2IDEzLjAwMzU2LDEyLjg2MzczNyAwIDAgMCAxMy4wMDM2NCwtMTIuODYzNTYgMTMuMDAzNTYsMTIuODYzNzM3IDAgMCAwIC04Ljc1MDU4LC0xMi4xNDEwOCBsIDAsLTkuOTU0ODUgYSAyMS40OTMwMTQsMjEuMjYxOTA5IDAgMCAwIDE2Ljk4ODk1LC0yMC43NzkzNyAyMS40OTMwMTQsMjEuMjYxOTA5IDAgMCAwIC0wLjA4NjcsLTEuNzEwNDYgbCAyMS4xMDk4MiwtNy40NjEwNiAtNi4xMDM1OCwxMC43MTE1IGMgLTEuMTczNjgsMi4wNTk2MyAtMC42MDI5Miw0Ljg3NzQ1IDEuMjc5NzQsNi4zMTggbCAwLjI3MDc1LDAuMjA3MjggYyAxLjg4MjY2LDEuNDQwNTUgNC4zNDM3MywwLjk0MjExIDUuNTE3NDEsLTEuMTE3NTIgbCAxMS45MTY1MiwtMjAuOTEyMzEgYyAwLjczNzYsLTEuMjk0MzggMC43ODUzMiwtMi44ODc5NCAwLjI1MjM1LC00LjI1MTE4IC0wLjAwMiwtMC4wMDggLTAuMDA0LC0wLjAxNSAtMC4wMDYsLTAuMDIyNSAtMC40NDYxMSwtMS4zODU2OCAtMS40ODE1MSwtMi41ODQ5NiAtMi44NjEwMywtMy4xMjUzOSBsIC0yMi40MTEzOSwtOC43Nzk5MiBjIC0yLjIwNzIzLC0wLjg2NDY5IC00LjQzNDYxLDAuMjkzNzkgLTQuOTkzOTQsMi41OTc0MiBsIC0wLjA4MDQsMC4zMzE1OCBjIC0wLjU1OTM0LDIuMzAzNjQgMC43NjcyLDQuODU0MzYgMi45NzQ0NCw1LjcxOTA2IGwgMTAuMTI2MDcsMy45NjY5MiAtMTkuNzU0MjIsNi45ODE5MSBhIDIxLjQ5MzAxNCwyMS4yNjE5MDkgMCAwIDAgLTE0LjA5MDM3LC0xMC4yMDYwNiBjIDAuMDE3MiwtMC4yMDA3MSAwLjAyNjMsLTAuNDA0NDYgMC4wMjYzLC0wLjYxMDk2IGwgMCwtMjIuNDIxNSA4LjA2NTI2LDkuMzI0MzYgYyAxLjU1MDgsMS43OTI5NCA0LjM5Nzc2LDIuMTkzNjIgNi4zODMzNCwwLjg5ODYgbCAwLjI4NTc3LC0wLjE4NjI1IGMgMS45ODU1OCwtMS4yOTUwMiAyLjMzNTYyLC0zLjc4MTE4IDAuNzg0ODIsLTUuNTc0MTEgbCAtMTUuNzQ2LC0xOC4yMDQ0OSBjIC0wLjk3NDYsLTEuMTI2NzcgLTIuNDYxMTksLTEuNzAyNzQgLTMuOTI0MTEsLTEuNjU0NTEgLTAuMDA4LC0xLjllLTQgLTAuMDE1NywtMC4wMDEgLTAuMDIzNywtMC4wMDEgLTAuMDkwOSwtMC4wMDMgLTAuMTgyMDIsLTAuMDAzIC0wLjI3MywtMy43ZS00IHogbSAtMC4xMzEwNSw0Ni4zMTk1IGEgMTMuMDAzNTYsMTIuODYzNzM3IDAgMCAxIDEzLjAwMzI2LDEyLjg2Mzk0IDEzLjAwMzU2LDEyLjg2MzczNyAwIDAgMSAtMTMuMDAzMjYsMTIuODYzNTYgMTMuMDAzNTYsMTIuODYzNzM3IDAgMCAxIC0xMy4wMDM2MywtMTIuODYzNTYgMTMuMDAzNTYsMTIuODYzNzM3IDAgMCAxIDEzLjAwMzYzLC0xMi44NjM5NCB6IiBpZD0icGF0aDQxNTAiLz4mI3hhOyAgICA8L2c+JiN4YTsgIDwvZz4mI3hhOzwvc3ZnPg==" preserveAspectRatio="none" pointer-events="none"/><image x="60.5" y="304.5" width="41" height="41" xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNDEuMzM3NzExbW0iIGhlaWdodD0iNDEuMjcwOTk2bW0iIHZpZXdCb3g9IjAgMCAxNDYuNDcyMiAxNDYuMjM1ODEiIGlkPSJzdmcyIiB2ZXJzaW9uPSIxLjEiPiYjeGE7ICA8ZGVmcyBpZD0iZGVmczQiLz4mI3hhOyAgPG1ldGFkYXRhIGlkPSJtZXRhZGF0YTciPiYjeGE7ICAgIDxyZGY6UkRGPiYjeGE7ICAgICAgPGNjOldvcmsgcmRmOmFib3V0PSIiPiYjeGE7ICAgICAgICA8ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD4mI3hhOyAgICAgICAgPGRjOnR5cGUgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIvPiYjeGE7ICAgICAgICA8ZGM6dGl0bGUvPiYjeGE7ICAgICAgPC9jYzpXb3JrPiYjeGE7ICAgIDwvcmRmOlJERj4mI3hhOyAgPC9tZXRhZGF0YT4mI3hhOyAgPGcgaWQ9ImxheWVyMSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTMxMC4xOTIxNiwtMTAzLjQ1OTQpIi8+JiN4YTsgIDxyZWN0IHN0eWxlPSJvcGFjaXR5OjE7ZmlsbDojZGRkZGRkO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojMGMzYzg2O3N0cm9rZS13aWR0aDo1LjY0NjU4ODg7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjI7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiIGlkPSJyZWN0NDEzNi0yLTMtMyIgd2lkdGg9IjE0MC44MjU2MSIgaGVpZ2h0PSIxNDAuNTg5MjIiIHg9IjIuODIzMjk0NCIgeT0iMi44MjMyOTQ0IiByeT0iOC45OTUyOTY1Ii8+JiN4YTsgIDxwYXRoIGlkPSJwYXRoNDE1MCIgZD0ibSA3My4wMjM2ODUsMTUuNjU3NDU0IGMgLTEuMzY0NjYxLDAuMDMzNSAtMi43MTg0MDEsMC42MDU4NCAtMy42MjcwNzEsMS42NTYzOCBsIC0xNS43NDYwMSwxOC4yMDQ0OSBjIC0xLjU1MDgsMS43OTI5MyAtMS4yMDA3Niw0LjI3OTA5IDAuNzg0ODIxLDUuNTc0MTEgbCAwLjI4NTc3LDAuMTg2MjUgYyAxLjk4NTU4LDEuMjk1MDIgNC44MzI1NCwwLjg5NDM0IDYuMzgzMzM5LC0wLjg5ODYgbCA3LjExNDQ3LC04LjIyNTYxIHYgMjEuMzIyNzUgYyAwLDAuMjA5ODggMC4wMSwwLjQxNjg0IDAuMDI3NCwwLjYyMDcyIGEgMjEuNDkzMDE0LDIxLjI2MTkwOSAwIDAgMCAtMTQuMzMyMTksMTAuNzk0MTEgbCAtMjAuMDg3NjgsLTcuMDAyOTMgMTEuNDU5OSwtNC41NDYzNCBjIDIuMjAzNTEsLTAuODc0MTYgMy41MTg4NywtMy40MzA2MSAyLjk0OTY1LC01LjczMTgyIGwgLTAuMDgxOSwtMC4zMzEyMSBjIC0wLjU2OTIyLC0yLjMwMTIxIC0yLjgwMTY5OSwtMy40NTAxNyAtNS4wMDUyMDksLTIuNTc2MDEgbCAtMjIuMzczMDUsOC44NzU5OSBjIC0xLjM4NDc5LDAuNTQ5MzcgLTIuNDE3ODcsMS43NjM0MyAtMi44NTM5LDMuMTYwNjkgLTAuMDAzLDAuMDA3IC0wLjAwNywwLjAxNDQgLTAuMDA5LDAuMDIxOCAtMC41MTc4NiwxLjM2MDUgLTAuNDU5MzEsMi45NDM3OSAwLjI3OTc2LDQuMjI3OSBsIDEyLjAwNjY1LDIwLjg2MDg2NiBjIDEuMTgyNSwyLjA1NDU4IDMuNjQ1NDQ5LDIuNTQyNDggNS41MjE5MDksMS4wOTM4NyBsIDAuMjcwMDAxLC0wLjIwODQxIGMgMS44NzY0NiwtMS40NDg2MSAyLjQzNTIxLC00LjI2ODY4IDEuMjUyNjk5LC02LjMyMzI2IGwgLTUuNDI1Mzk5LC05LjQyNTc0NiAxOS42MTcxNiw2LjgzODgyNiBhIDIxLjQ5MzAxNCwyMS4yNjE5MDkgMCAwIDAgLTAuMDM2LDEuMDE0NjUgMjEuNDkzMDE0LDIxLjI2MTkwOSAwIDAgMCAxNi45MzMzNjksMjAuNzUxNTkgdiAxMC4xNzc5IGEgMTMuMDAzNTYsMTIuODYzNzM3IDAgMCAwIC04LjE5MjU2LDExLjk0NTgxIDEzLjAwMzU2LDEyLjg2MzczNyAwIDAgMCAxMy4wMDMyNTEsMTIuODYzNTYgMTMuMDAzNTYsMTIuODYzNzM3IDAgMCAwIDEzLjAwMzYzOSwtMTIuODYzNTYgMTMuMDAzNTYsMTIuODYzNzM3IDAgMCAwIC04Ljc1MDU4LC0xMi4xNDEwOCB2IC05Ljk1NDg1IGEgMjEuNDkzMDE0LDIxLjI2MTkwOSAwIDAgMCAxNi45ODg5NSwtMjAuNzc5MzcgMjEuNDkzMDE0LDIxLjI2MTkwOSAwIDAgMCAtMC4wODY3LC0xLjcxMDQ3IEwgMTE1LjQwODk5LDY1LjY2OTM5NCAxMDkuMzA1NDEsNzYuMzgwOSBjIC0xLjE3MzY4LDIuMDU5NjMgLTAuNjAyOTIsNC44Nzc0NSAxLjI3OTc0LDYuMzE4IGwgMC4yNzA3NSwwLjIwNzI4IGMgMS44ODI2NiwxLjQ0MDU1IDQuMzQzNzMsMC45NDIxMSA1LjUxNzQxLC0xLjExNzUyIGwgMTEuOTE2NTIsLTIwLjkxMjMxNiBjIDAuNzM3NiwtMS4yOTQzOCAwLjc4NTMyLC0yLjg4Nzk0IDAuMjUyMzUsLTQuMjUxMTggLTAuMDAyLC0wLjAwOCAtMC4wMDQsLTAuMDE1IC0wLjAwNiwtMC4wMjI1IC0wLjQ0NjExLC0xLjM4NTY4IC0xLjQ4MTUxLC0yLjU4NDk2IC0yLjg2MTAzLC0zLjEyNTM5IGwgLTIyLjQxMTM5LC04Ljc3OTkyIGMgLTIuMjA3MjMsLTAuODY0NjkgLTQuNDM0NjA1LDAuMjkzNzkgLTQuOTkzOTM1LDIuNTk3NDIgbCAtMC4wODA0LDAuMzMxNTggYyAtMC41NTkzNCwyLjMwMzY0IDAuNzY3Miw0Ljg1NDM2IDIuOTc0NDM1LDUuNzE5MDYgbCAxMC4xMjYwNywzLjk2NjkyIC0xOS43NTQyMTUsNi45ODE5MSBhIDIxLjQ5MzAxNCwyMS4yNjE5MDkgMCAwIDAgLTE0LjA5MDM3LC0xMC4yMDYwNiBjIDAuMDE3MiwtMC4yMDA3MSAwLjAyNjMsLTAuNDA0NDYgMC4wMjYzLC0wLjYxMDk2IHYgLTIyLjQyMTUgbCA4LjA2NTI2LDkuMzI0MzYgYyAxLjU1MDc5OSwxLjc5Mjk0IDQuMzk3NzYsMi4xOTM2MiA2LjM4MzM0LDAuODk4NiBsIDAuMjg1NzcsLTAuMTg2MjUgYyAxLjk4NTU4LC0xLjI5NTAyIDIuMzM1NjIsLTMuNzgxMTggMC43ODQ4MiwtNS41NzQxMSBsIC0xNS43NDYsLTE4LjIwNDQ5IGMgLTAuOTc0NiwtMS4xMjY3NyAtMi40NjExOSwtMS43MDI3NCAtMy45MjQxMSwtMS42NTQ1MSAtMC4wMDgsLTEuOWUtNCAtMC4wMTU3LC0xMGUtNCAtMC4wMjM3LC0xMGUtNCAtMC4wOTA5LC0wLjAwMyAtMC4xODIwMiwtMC4wMDMgLTAuMjczLC0zLjdlLTQgeiBtIC0wLjEzMTA1MSw0Ni4zMTk1IEEgMTMuMDAzNTYsMTIuODYzNzM3IDAgMCAxIDg1Ljg5NTg5NCw3NC44NDA5IDEzLjAwMzU2LDEyLjg2MzczNyAwIDAgMSA3Mi44OTI2MzQsODcuNzA0NDYgMTMuMDAzNTYsMTIuODYzNzM3IDAgMCAxIDU5Ljg4OTAwNCw3NC44NDA5IDEzLjAwMzU2LDEyLjg2MzczNyAwIDAgMSA3Mi44OTI2MzQsNjEuOTc2OTU0IFoiIHN0eWxlPSJvcGFjaXR5OjE7ZmlsbDojMTA0ZWFkO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojMGMzYzg2O3N0cm9rZS13aWR0aDoyO3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxIi8+JiN4YTs8L3N2Zz4=" preserveAspectRatio="none" pointer-events="none"/><image x="1.5" y="305.5" width="41" height="41" xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNDEuMzM3NzExbW0iIGhlaWdodD0iNDEuMjcwOTk2bW0iIHZpZXdCb3g9IjAgMCAxNDYuNDcyMiAxNDYuMjM1ODEiIGlkPSJzdmcyIiB2ZXJzaW9uPSIxLjEiPiYjeGE7ICA8ZGVmcyBpZD0iZGVmczQiLz4mI3hhOyAgPG1ldGFkYXRhIGlkPSJtZXRhZGF0YTciPiYjeGE7ICAgIDxyZGY6UkRGPiYjeGE7ICAgICAgPGNjOldvcmsgcmRmOmFib3V0PSIiPiYjeGE7ICAgICAgICA8ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD4mI3hhOyAgICAgICAgPGRjOnR5cGUgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIvPiYjeGE7ICAgICAgICA8ZGM6dGl0bGUvPiYjeGE7ICAgICAgPC9jYzpXb3JrPiYjeGE7ICAgIDwvcmRmOlJERj4mI3hhOyAgPC9tZXRhZGF0YT4mI3hhOyAgPGcgaWQ9ImxheWVyMSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTMxMC4xOTIxNiwtMTAzLjQ1OTQpIi8+JiN4YTsgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEuMTU2Mjk0NSwxLjYwMTIyNDEpIiBpZD0iZzgyOSI+JiN4YTsgICAgPHJlY3Qgcnk9IjguOTk1Mjk2NSIgeT0iMS4yMjIwNzAzIiB4PSIxLjY2Njk5OTkiIGhlaWdodD0iMTQwLjU4OTIyIiB3aWR0aD0iMTQwLjgyNTYxIiBpZD0icmVjdDQxMzYtMi0zLTMiIHN0eWxlPSJvcGFjaXR5OjE7ZmlsbDojZmRmZGZkO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojMmMyYzJjO3N0cm9rZS13aWR0aDo1LjY0NjU4ODg7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjI7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiLz4mI3hhOyAgICA8cGF0aCBzdHlsZT0ib3BhY2l0eToxO2ZpbGw6IzNhM2EzYTtmaWxsLW9wYWNpdHk6MTtzdHJva2U6IzJjMmMyYztzdHJva2Utd2lkdGg6MjtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIgZD0ibSA3MS44NjczOSwxNC4wNTYyMyBjIC0xLjM2NDY2LDAuMDMzNSAtMi43MTg0LDAuNjA1ODQgLTMuNjI3MDcsMS42NTYzOCBMIDUyLjQ5NDMxLDMzLjkxNzEgYyAtMS41NTA4LDEuNzkyOTMgLTEuMjAwNzYsNC4yNzkwOSAwLjc4NDgyLDUuNTc0MTEgbCAwLjI4NTc3LDAuMTg2MjUgYyAxLjk4NTU4LDEuMjk1MDIgNC44MzI1NCwwLjg5NDM0IDYuMzgzMzQsLTAuODk4NiBsIDcuMTE0NDcsLTguMjI1NjEgViA1MS44NzYgYyAwLDAuMjA5ODggMC4wMSwwLjQxNjg0IDAuMDI3NCwwLjYyMDcyIEEgMjEuNDkzMDE0LDIxLjI2MTkwOSAwIDAgMCA1Mi43NTc5Miw2My4yOTA4MyBMIDMyLjY3MDI0LDU2LjI4NzkgNDQuMTMwMTQsNTEuNzQxNTYgYyAyLjIwMzUxLC0wLjg3NDE2IDMuNTE4ODcsLTMuNDMwNjEgMi45NDk2NSwtNS43MzE4MiBsIC0wLjA4MTksLTAuMzMxMjEgYyAtMC41NjkyMiwtMi4zMDEyMSAtMi44MDE3LC0zLjQ1MDE3IC01LjAwNTIxLC0yLjU3NjAxIGwgLTIyLjM3MzA1LDguODc1OTkgYyAtMS4zODQ3OSwwLjU0OTM3IC0yLjQxNzg3LDEuNzYzNDMgLTIuODUzOSwzLjE2MDY5IC0wLjAwMywwLjAwNyAtMC4wMDcsMC4wMTQ0IC0wLjAwOSwwLjAyMTggLTAuNTE3ODYsMS4zNjA1IC0wLjQ1OTMxLDIuOTQzNzkgMC4yNzk3Niw0LjIyNzkgbCAxMi4wMDY2NSwyMC44NjA4NjYgYyAxLjE4MjUsMi4wNTQ1OCAzLjY0NTQ1LDIuNTQyNDggNS41MjE5MSwxLjA5Mzg3IGwgMC4yNywtMC4yMDg0MSBjIDEuODc2NDYsLTEuNDQ4NjEgMi40MzUyMSwtNC4yNjg2OCAxLjI1MjcsLTYuMzIzMjYgbCAtNS40MjU0LC05LjQyNTc0NiAxOS42MTcxNiw2LjgzODgyNiBhIDIxLjQ5MzAxNCwyMS4yNjE5MDkgMCAwIDAgLTAuMDM2LDEuMDE0NjUgMjEuNDkzMDE0LDIxLjI2MTkwOSAwIDAgMCAxNi45MzMzNywyMC43NTE1OSBWIDEwNC4xNjkxOSBBIDEzLjAwMzU2LDEyLjg2MzczNyAwIDAgMCA1OC45ODQzMiwxMTYuMTE1IDEzLjAwMzU2LDEyLjg2MzczNyAwIDAgMCA3MS45ODc1NywxMjguOTc4NTYgMTMuMDAzNTYsMTIuODYzNzM3IDAgMCAwIDg0Ljk5MTIxLDExNi4xMTUgMTMuMDAzNTYsMTIuODYzNzM3IDAgMCAwIDc2LjI0MDYzLDEwMy45NzM5MiB2IC05Ljk1NDg1NCBhIDIxLjQ5MzAxNCwyMS4yNjE5MDkgMCAwIDAgMTYuOTg4OTUsLTIwLjc3OTM3IDIxLjQ5MzAxNCwyMS4yNjE5MDkgMCAwIDAgLTAuMDg2NywtMS43MTA0NyBsIDIxLjEwOTgyLC03LjQ2MTA1NiAtNi4xMDM1OCwxMC43MTE1MDYgYyAtMS4xNzM2OCwyLjA1OTYzIC0wLjYwMjkyLDQuODc3NDUgMS4yNzk3NCw2LjMxOCBsIDAuMjcwNzUsMC4yMDcyOCBjIDEuODgyNjYsMS40NDA1NSA0LjM0MzczLDAuOTQyMTEgNS41MTc0MSwtMS4xMTc1MiBMIDEyNy4xMzM1NCw1OS4yNzUxMiBjIDAuNzM3NiwtMS4yOTQzOCAwLjc4NTMyLC0yLjg4Nzk0IDAuMjUyMzUsLTQuMjUxMTggLTAuMDAyLC0wLjAwOCAtMC4wMDQsLTAuMDE1IC0wLjAwNiwtMC4wMjI1IC0wLjQ0NjExLC0xLjM4NTY4IC0xLjQ4MTUxLC0yLjU4NDk2IC0yLjg2MTAzLC0zLjEyNTM5IGwgLTIyLjQxMTM5LC04Ljc3OTkyIGMgLTIuMjA3MjMsLTAuODY0NjkgLTQuNDM0NjEsMC4yOTM3OSAtNC45OTM5NCwyLjU5NzQyIGwgLTAuMDgwNCwwLjMzMTU4IGMgLTAuNTU5MzQsMi4zMDM2NCAwLjc2NzIsNC44NTQzNiAyLjk3NDQ0LDUuNzE5MDYgbCAxMC4xMjYwNywzLjk2NjkyIC0xOS43NTQyMiw2Ljk4MTkxIEEgMjEuNDkzMDE0LDIxLjI2MTkwOSAwIDAgMCA3Ni4yODkwNSw1Mi40ODY5NiBjIDAuMDE3MiwtMC4yMDA3MSAwLjAyNjMsLTAuNDA0NDYgMC4wMjYzLC0wLjYxMDk2IFYgMjkuNDU0NSBsIDguMDY1MjYsOS4zMjQzNiBjIDEuNTUwOCwxLjc5Mjk0IDQuMzk3NzYsMi4xOTM2MiA2LjM4MzM0LDAuODk4NiBsIDAuMjg1NzcsLTAuMTg2MjUgYyAxLjk4NTU4LC0xLjI5NTAyIDIuMzM1NjIsLTMuNzgxMTggMC43ODQ4MiwtNS41NzQxMSBsIC0xNS43NDYsLTE4LjIwNDQ5IGMgLTAuOTc0NiwtMS4xMjY3NyAtMi40NjExOSwtMS43MDI3NCAtMy45MjQxMSwtMS42NTQ1MSAtMC4wMDgsLTEuOWUtNCAtMC4wMTU3LC0xMGUtNCAtMC4wMjM3LC0xMGUtNCAtMC4wOTA5LC0wLjAwMyAtMC4xODIwMiwtMC4wMDMgLTAuMjczLC0zLjdlLTQgeiBtIC0wLjEzMTA1LDQ2LjMxOTUgQSAxMy4wMDM1NiwxMi44NjM3MzcgMCAwIDEgODQuNzM5Niw3My4yMzk2NzYgMTMuMDAzNTYsMTIuODYzNzM3IDAgMCAxIDcxLjczNjM0LDg2LjEwMzIzNiAxMy4wMDM1NiwxMi44NjM3MzcgMCAwIDEgNTguNzMyNzEsNzMuMjM5Njc2IDEzLjAwMzU2LDEyLjg2MzczNyAwIDAgMSA3MS43MzYzNCw2MC4zNzU3MyBaIiBpZD0icGF0aDQxNTAiLz4mI3hhOyAgPC9nPiYjeGE7PC9zdmc+" preserveAspectRatio="none" pointer-events="none"/><image x="58.5" y="354.5" width="45" height="41" xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIGlkPSJzdmc0Mjk0IiB2aWV3Qm94PSIwIDAgMTU4LjQ1NjIgMTQ2LjQ3MjE5IiBoZWlnaHQ9IjQxLjMzNzcwNG1tIiB3aWR0aD0iNDQuNzE5ODZtbSI+JiN4YTsgIDxkZWZzIGlkPSJkZWZzNDI5NiIvPiYjeGE7ICA8bWV0YWRhdGEgaWQ9Im1ldGFkYXRhNDI5OSI+JiN4YTsgICAgPHJkZjpSREY+JiN4YTsgICAgICA8Y2M6V29yayByZGY6YWJvdXQ9IiI+JiN4YTsgICAgICAgIDxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PiYjeGE7ICAgICAgICA8ZGM6dHlwZSByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIi8+JiN4YTsgICAgICAgIDxkYzp0aXRsZS8+JiN4YTsgICAgICA8L2NjOldvcms+JiN4YTsgICAgPC9yZGY6UkRGPiYjeGE7ICA8L21ldGFkYXRhPiYjeGE7ICA8ZyB0cmFuc2Zvcm09Im1hdHJpeCgxLjczNTk0MTcsMCwwLDEuNzM1OTQxNywtNjMzLjIxMDM4LC0zNC4wNTEzMTQpIiBpZD0iZzg0NSI+JiN4YTsgICAgPHJlY3Qgc3R5bGU9Im9wYWNpdHk6MTtmaWxsOiNkMzQ1M2E7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiMwYzNjODY7c3Ryb2tlLXdpZHRoOjQuNjg3NTtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46bWl0ZXI7c3Ryb2tlLW1pdGVybGltaXQ6My44NzU7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiIGlkPSJyZWN0Njc4Mi00LTY1LTMtMC02IiB3aWR0aD0iODYuNTkyMTc4IiBoZWlnaHQ9Ijc5LjY4ODcxMyIgeD0iMzY3LjEwODUyIiB5PSIyMS45NTkyMjEiIHJ5PSIyLjE5ODc4MTMiLz4mI3hhOyAgICA8cmVjdCB5PSIyMi4yMDA5MTYiIHg9IjM2Ny44MDcwNyIgaGVpZ2h0PSIxNi4zMzQ2NTYiIHdpZHRoPSI4NS4xOTUwMyIgaWQ9InJlY3Q1OTYzLTUiIHN0eWxlPSJvcGFjaXR5OjE7ZmlsbDojODI4MjgyO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojMGMzYzg2O3N0cm9rZS13aWR0aDozLjc1MDAwMDI0O3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDozLjg3NTtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIvPiYjeGE7ICAgIDxyZWN0IHk9Ijg1LjA3MTU4NyIgeD0iMzY3LjgwNzA3IiBoZWlnaHQ9IjE2LjMzNDY1NiIgd2lkdGg9Ijg1LjE5NTAzIiBpZD0icmVjdDU5NjMtNi0zIiBzdHlsZT0iZGlzcGxheTppbmxpbmU7b3BhY2l0eToxO2ZpbGw6IzgyODI4MjtmaWxsLW9wYWNpdHk6MTtzdHJva2U6IzBjM2M4NjtzdHJva2Utd2lkdGg6My43NTAwMDAyNDtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6My44NzU7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiLz4mI3hhOyAgICA8cmVjdCB5PSI1My44Mzk5NTQiIHg9IjM2Ny44MDcwNyIgaGVpZ2h0PSIxNi4yMzg5OTEiIHdpZHRoPSIyOS41OTgxNiIgaWQ9InJlY3Q1OTYzLTYtMi01IiBzdHlsZT0iZGlzcGxheTppbmxpbmU7b3BhY2l0eToxO2ZpbGw6IzgyODI4MjtmaWxsLW9wYWNpdHk6MTtzdHJva2U6IzBjM2M4NjtzdHJva2Utd2lkdGg6My43NTAwMDAyNDtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6My44NzU7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiLz4mI3hhOyAgICA8cmVjdCB5PSIzOC42NTUxNyIgeD0iMzgxLjU5MzU3IiBoZWlnaHQ9IjE0Ljc4OTg4IiB3aWR0aD0iMjguNDk2MTgzIiBpZD0icmVjdDU5NjMtNi0yLTktNiIgc3R5bGU9ImRpc3BsYXk6aW5saW5lO29wYWNpdHk6MTtmaWxsOiM4MjgyODI7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiMwYzNjODY7c3Ryb2tlLXdpZHRoOjMuNzUwMDAwMjQ7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjMuODc1O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxIi8+JiN4YTsgICAgPHJlY3QgeT0iMzguNzA2NTU0IiB4PSIzNjcuODA3MDciIGhlaWdodD0iMTQuNjg3MTA2IiB3aWR0aD0iMTMuOTM3MTgzIiBpZD0icmVjdDU5NjMtNi0yLTktMi0yIiBzdHlsZT0iZGlzcGxheTppbmxpbmU7b3BhY2l0eToxO2ZpbGw6IzgyODI4MjtmaWxsLW9wYWNpdHk6MTtzdHJva2U6IzBjM2M4NjtzdHJva2Utd2lkdGg6My43NTAwMDAyNDtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6My44NzU7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiLz4mI3hhOyAgICA8cmVjdCB5PSIzOC42NTUxNyIgeD0iNDEwLjEwMDQ2IiBoZWlnaHQ9IjE0Ljc4OTg4IiB3aWR0aD0iMjguNDk2MTgzIiBpZD0icmVjdDU5NjMtNi0yLTktMy05IiBzdHlsZT0iZGlzcGxheTppbmxpbmU7b3BhY2l0eToxO2ZpbGw6IzgyODI4MjtmaWxsLW9wYWNpdHk6MTtzdHJva2U6IzBjM2M4NjtzdHJva2Utd2lkdGg6My43NTAwMDAyNDtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6My44NzU7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiLz4mI3hhOyAgICA8cmVjdCB5PSIzOC43MDY1NTQiIHg9IjQzOS4wNjQ4OCIgaGVpZ2h0PSIxNC42ODcxMDYiIHdpZHRoPSIxMy45MzcxODMiIGlkPSJyZWN0NTk2My02LTItOS0yLTktMSIgc3R5bGU9ImRpc3BsYXk6aW5saW5lO29wYWNpdHk6MTtmaWxsOiM4MjgyODI7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiMwYzNjODY7c3Ryb2tlLXdpZHRoOjMuNzUwMDAwMjQ7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjMuODc1O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxIi8+JiN4YTsgICAgPHJlY3QgeT0iNTMuODM5OTU0IiB4PSI0MjMuNDAzOTMiIGhlaWdodD0iMTYuMjM4OTkxIiB3aWR0aD0iMjkuNTk4MTYiIGlkPSJyZWN0NTk2My02LTItMi0yIiBzdHlsZT0iZGlzcGxheTppbmxpbmU7b3BhY2l0eToxO2ZpbGw6IzgyODI4MjtmaWxsLW9wYWNpdHk6MTtzdHJva2U6IzBjM2M4NjtzdHJva2Utd2lkdGg6My43NTAwMDAyNDtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6My44NzU7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiLz4mI3hhOyAgICA8cmVjdCB5PSI3MC41NTA4MzUiIHg9IjM4MS42MTM3NCIgaGVpZ2h0PSIxNC43ODk4OCIgd2lkdGg9IjI4LjQ5NjE4MyIgaWQ9InJlY3Q1OTYzLTYtMi05LTgtNyIgc3R5bGU9ImRpc3BsYXk6aW5saW5lO29wYWNpdHk6MTtmaWxsOiM4MjgyODI7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiMwYzNjODY7c3Ryb2tlLXdpZHRoOjMuNzUwMDAwMjQ7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjMuODc1O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxIi8+JiN4YTsgICAgPHJlY3QgeT0iNzAuNDY3MjU1IiB4PSIzNjcuODMwMTQiIGhlaWdodD0iMTQuOTU3MDM2IiB3aWR0aD0iMTMuOTMxMzU5IiBpZD0icmVjdDU5NjMtNi0yLTktMi05Ny0wIiBzdHlsZT0iZGlzcGxheTppbmxpbmU7b3BhY2l0eToxO2ZpbGw6IzgyODI4MjtmaWxsLW9wYWNpdHk6MTtzdHJva2U6IzBjM2M4NjtzdHJva2Utd2lkdGg6My43NTAwMDAyNDtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6My44NzU7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiLz4mI3hhOyAgICA8cmVjdCB5PSI3MC41NTA4MzUiIHg9IjQxMC4xMjA2MSIgaGVpZ2h0PSIxNC43ODk4OCIgd2lkdGg9IjI4LjQ5NjE4MyIgaWQ9InJlY3Q1OTYzLTYtMi05LTMtMy05IiBzdHlsZT0iZGlzcGxheTppbmxpbmU7b3BhY2l0eToxO2ZpbGw6IzgyODI4MjtmaWxsLW9wYWNpdHk6MTtzdHJva2U6IzBjM2M4NjtzdHJva2Utd2lkdGg6My43NTAwMDAyNDtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6My44NzU7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiLz4mI3hhOyAgICA8cmVjdCB5PSI3MC40NjcyNTUiIHg9IjQzOS4wNDY4MSIgaGVpZ2h0PSIxNC45NTcwMzYiIHdpZHRoPSIxMy45MzEzNTkiIGlkPSJyZWN0NTk2My02LTItOS0yLTktNi0zIiBzdHlsZT0iZGlzcGxheTppbmxpbmU7b3BhY2l0eToxO2ZpbGw6IzgyODI4MjtmaWxsLW9wYWNpdHk6MTtzdHJva2U6IzBjM2M4NjtzdHJva2Utd2lkdGg6My43NTAwMDAyNDtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6My44NzU7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiLz4mI3hhOyAgICA8cmVjdCB5PSI1My44MTU3MDgiIHg9IjM5Ny40MzY4MyIgaGVpZ2h0PSIxNi4yODc0NTciIHdpZHRoPSIyNS45MzU1MDkiIGlkPSJyZWN0NTk2My02LTItMS02IiBzdHlsZT0iZGlzcGxheTppbmxpbmU7b3BhY2l0eToxO2ZpbGw6IzgyODI4MjtmaWxsLW9wYWNpdHk6MTtzdHJva2U6IzBjM2M4NjtzdHJva2Utd2lkdGg6My43NTAwMDAyNDtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6My44NzU7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiLz4mI3hhOyAgPC9nPiYjeGE7PC9zdmc+" preserveAspectRatio="none" pointer-events="none"/><image x="-0.5" y="357" width="45" height="41" xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNDQuNzE5ODU2bW0iIGhlaWdodD0iNDEuMzM3NzA0bW0iIHZpZXdCb3g9IjAgMCAxNTguNDU2MTkgMTQ2LjQ3MjE5IiBpZD0ic3ZnNDI5NCIgdmVyc2lvbj0iMS4xIj4mI3hhOyAgPGRlZnMgaWQ9ImRlZnM0Mjk2Ii8+JiN4YTsgIDxtZXRhZGF0YSBpZD0ibWV0YWRhdGE0Mjk5Ij4mI3hhOyAgICA8cmRmOlJERj4mI3hhOyAgICAgIDxjYzpXb3JrIHJkZjphYm91dD0iIj4mI3hhOyAgICAgICAgPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+JiN4YTsgICAgICAgIDxkYzp0eXBlIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiLz4mI3hhOyAgICAgICAgPGRjOnRpdGxlLz4mI3hhOyAgICAgIDwvY2M6V29yaz4mI3hhOyAgICA8L3JkZjpSREY+JiN4YTsgIDwvbWV0YWRhdGE+JiN4YTsgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQuMjkxNTM0NGUtNikiIGlkPSJnODY5Ij4mI3hhOyAgICA8cmVjdCByeT0iMy44MTY5NTYiIHk9IjQuMDY4NjEzMSIgeD0iNC4wNjg2MDkyIiBoZWlnaHQ9IjEzOC4zMzQ5NiIgd2lkdGg9IjE1MC4zMTg5NyIgaWQ9InJlY3Q2NzgyLTQtNjUtMy0wLTYiIHN0eWxlPSJvcGFjaXR5OjE7ZmlsbDojZmRmZGZkO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojMmMyYzJjO3N0cm9rZS13aWR0aDo4LjEzNzIyNzA2O3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjptaXRlcjtzdHJva2UtbWl0ZXJsaW1pdDozLjg3NTtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIvPiYjeGE7ICAgIDxyZWN0IHN0eWxlPSJvcGFjaXR5OjE7ZmlsbDojZmRmZGZkO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojMmMyYzJjO3N0cm9rZS13aWR0aDo2LjUwOTc4MTg0O3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDozLjg3NTtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIgaWQ9InJlY3Q1OTYzLTUiIHdpZHRoPSIxNDcuODkzNiIgaGVpZ2h0PSIyOC4zNTYwMSIgeD0iNS4yODEyNDY3IiB5PSI0LjQ4ODE4MjUiLz4mI3hhOyAgICA8cmVjdCBzdHlsZT0iZGlzcGxheTppbmxpbmU7b3BhY2l0eToxO2ZpbGw6I2ZkZmRmZDtmaWxsLW9wYWNpdHk6MTtzdHJva2U6IzJjMmMyYztzdHJva2Utd2lkdGg6Ni41MDk3ODE4NDtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6My44NzU7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiIGlkPSJyZWN0NTk2My02LTMiIHdpZHRoPSIxNDcuODkzNiIgaGVpZ2h0PSIyOC4zNTYwMSIgeD0iNS4yODEyNDY3IiB5PSIxMTMuNjI4Ii8+JiN4YTsgICAgPHJlY3Qgc3R5bGU9ImRpc3BsYXk6aW5saW5lO29wYWNpdHk6MTtmaWxsOiNmZGZkZmQ7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiMyYzJjMmM7c3Ryb2tlLXdpZHRoOjYuNTA5NzgxODQ7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjMuODc1O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxIiBpZD0icmVjdDU5NjMtNi0yLTUiIHdpZHRoPSI1MS4zODA2OCIgaGVpZ2h0PSIyOC4xODk5NDEiIHg9IjUuMjgxMjQ2NyIgeT0iNTkuNDExNzA5Ii8+JiN4YTsgICAgPHJlY3Qgc3R5bGU9ImRpc3BsYXk6aW5saW5lO29wYWNpdHk6MTtmaWxsOiNmZGZkZmQ7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiMyYzJjMmM7c3Ryb2tlLXdpZHRoOjYuNTA5NzgxODQ7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjMuODc1O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxIiBpZD0icmVjdDU5NjMtNi0yLTktNiIgd2lkdGg9IjQ5LjQ2NzcxMiIgaGVpZ2h0PSIyNS42NzQzNyIgeD0iMjkuMjEzODA2IiB5PSIzMy4wNTE4MDciLz4mI3hhOyAgICA8cmVjdCBzdHlsZT0iZGlzcGxheTppbmxpbmU7b3BhY2l0eToxO2ZpbGw6I2ZkZmRmZDtmaWxsLW9wYWNpdHk6MTtzdHJva2U6IzJjMmMyYztzdHJva2Utd2lkdGg6Ni41MDk3ODE4NDtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6My44NzU7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiIGlkPSJyZWN0NTk2My02LTItOS0yLTIiIHdpZHRoPSIyNC4xOTQxMzgiIGhlaWdodD0iMjUuNDk1OTYiIHg9IjUuMjgxMjQ2NyIgeT0iMzMuMTQxMDA2Ii8+JiN4YTsgICAgPHJlY3Qgc3R5bGU9ImRpc3BsYXk6aW5saW5lO29wYWNpdHk6MTtmaWxsOiNmZGZkZmQ7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiMyYzJjMmM7c3Ryb2tlLXdpZHRoOjYuNTA5NzgxODQ7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjMuODc1O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxIiBpZD0icmVjdDU5NjMtNi0yLTktMy05IiB3aWR0aD0iNDkuNDY3NzEyIiBoZWlnaHQ9IjI1LjY3NDM3IiB4PSI3OC43MDAxMTkiIHk9IjMzLjA1MTgwNyIvPiYjeGE7ICAgIDxyZWN0IHN0eWxlPSJkaXNwbGF5OmlubGluZTtvcGFjaXR5OjE7ZmlsbDojZmRmZGZkO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojMmMyYzJjO3N0cm9rZS13aWR0aDo2LjUwOTc4MTg0O3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDozLjg3NTtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIgaWQ9InJlY3Q1OTYzLTYtMi05LTItOS0xIiB3aWR0aD0iMjQuMTk0MTM4IiBoZWlnaHQ9IjI1LjQ5NTk2IiB4PSIxMjguOTgwNjUiIHk9IjMzLjE0MTAwNiIvPiYjeGE7ICAgIDxyZWN0IHN0eWxlPSJkaXNwbGF5OmlubGluZTtvcGFjaXR5OjE7ZmlsbDojZmRmZGZkO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojMmMyYzJjO3N0cm9rZS13aWR0aDo2LjUwOTc4MTg0O3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDozLjg3NTtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIgaWQ9InJlY3Q1OTYzLTYtMi0yLTIiIHdpZHRoPSI1MS4zODA2OCIgaGVpZ2h0PSIyOC4xODk5NDEiIHg9IjEwMS43OTQxNiIgeT0iNTkuNDExNzA5Ii8+JiN4YTsgICAgPHJlY3Qgc3R5bGU9ImRpc3BsYXk6aW5saW5lO29wYWNpdHk6MTtmaWxsOiNmZGZkZmQ7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiMyYzJjMmM7c3Ryb2tlLXdpZHRoOjYuNTA5NzgxODQ7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjMuODc1O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxIiBpZD0icmVjdDU5NjMtNi0yLTktOC03IiB3aWR0aD0iNDkuNDY3NzEyIiBoZWlnaHQ9IjI1LjY3NDM3IiB4PSIyOS4yNDg4MjMiIHk9Ijg4LjQyMDgyMiIvPiYjeGE7ICAgIDxyZWN0IHN0eWxlPSJkaXNwbGF5OmlubGluZTtvcGFjaXR5OjE7ZmlsbDojZmRmZGZkO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojMmMyYzJjO3N0cm9rZS13aWR0aDo2LjUwOTc4MTg0O3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDozLjg3NTtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIgaWQ9InJlY3Q1OTYzLTYtMi05LTItOTctMCIgd2lkdGg9IjI0LjE4NDAyNyIgaGVpZ2h0PSIyNS45NjQ1NDIiIHg9IjUuMzIxMjk3MiIgeT0iODguMjc1NzM0Ii8+JiN4YTsgICAgPHJlY3Qgc3R5bGU9ImRpc3BsYXk6aW5saW5lO29wYWNpdHk6MTtmaWxsOiNmZGZkZmQ7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiMyYzJjMmM7c3Ryb2tlLXdpZHRoOjYuNTA5NzgxODQ7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjMuODc1O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxIiBpZD0icmVjdDU5NjMtNi0yLTktMy0zLTkiIHdpZHRoPSI0OS40Njc3MTIiIGhlaWdodD0iMjUuNjc0MzciIHg9Ijc4LjczNTA4NSIgeT0iODguNDIwODIyIi8+JiN4YTsgICAgPHJlY3Qgc3R5bGU9ImRpc3BsYXk6aW5saW5lO29wYWNpdHk6MTtmaWxsOiNmZGZkZmQ7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiMyYzJjMmM7c3Ryb2tlLXdpZHRoOjYuNTA5NzgxODQ7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjMuODc1O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxIiBpZD0icmVjdDU5NjMtNi0yLTktMi05LTYtMyIgd2lkdGg9IjI0LjE4NDAyNyIgaGVpZ2h0PSIyNS45NjQ1NDIiIHg9IjEyOC45NDkzIiB5PSI4OC4yNzU3MzQiLz4mI3hhOyAgICA8cmVjdCBzdHlsZT0iZGlzcGxheTppbmxpbmU7b3BhY2l0eToxO2ZpbGw6I2ZkZmRmZDtmaWxsLW9wYWNpdHk6MTtzdHJva2U6IzJjMmMyYztzdHJva2Utd2lkdGg6Ni41MDk3ODE4NDtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6My44NzU7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiIGlkPSJyZWN0NTk2My02LTItMS02IiB3aWR0aD0iNDUuMDIyNTMiIGhlaWdodD0iMjguMjc0MDc1IiB4PSI1Ni43MTY3ODUiIHk9IjU5LjM2OTYxNyIvPiYjeGE7ICA8L2c+JiN4YTs8L3N2Zz4=" preserveAspectRatio="none" pointer-events="none"/><image x="58.5" y="405.5" width="45" height="41" xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNDQuNzYzMDM1bW0iIGhlaWdodD0iNDEuMzA1MzMybW0iIHZpZXdCb3g9IjAgMCAxNTguNjA5MTggMTQ2LjM1NzQ5IiBpZD0ic3ZnNDI5NCIgdmVyc2lvbj0iMS4xIj4mI3hhOyAgPGRlZnMgaWQ9ImRlZnM0Mjk2Ii8+JiN4YTsgIDxtZXRhZGF0YSBpZD0ibWV0YWRhdGE0Mjk5Ij4mI3hhOyAgICA8cmRmOlJERj4mI3hhOyAgICAgIDxjYzpXb3JrIHJkZjphYm91dD0iIj4mI3hhOyAgICAgICAgPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+JiN4YTsgICAgICAgIDxkYzp0eXBlIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiLz4mI3hhOyAgICAgICAgPGRjOnRpdGxlLz4mI3hhOyAgICAgIDwvY2M6V29yaz4mI3hhOyAgICA8L3JkZjpSREY+JiN4YTsgIDwvbWV0YWRhdGE+JiN4YTsgIDxnIGlkPSJnNzAiIHRyYW5zZm9ybT0ibWF0cml4KDEuNzM3NjE3OSwwLDAsMS43MzQ1ODIzLC00NDMuNDkzNzcsLTE5OC4xMTQzMSkiPiYjeGE7ICAgIDxyZWN0IHN0eWxlPSJvcGFjaXR5OjE7ZmlsbDojZDM0NTNhO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojMmMyYzJjO3N0cm9rZS13aWR0aDo0LjY4NzQ5OTUyO3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjptaXRlcjtzdHJva2UtbWl0ZXJsaW1pdDozLjg3NTtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIgaWQ9InJlY3Q2NzgyLTQtNjUtMy0wLTYiIHdpZHRoPSI4Ni41OTIxNzEiIGhlaWdodD0iNzkuNjg4NzEzIiB4PSIyNTcuNTc0NjUiIHk9IjExNi41NTgxNyIgcnk9IjIuMTk4NzgxMyIvPiYjeGE7ICAgIDxnIGlkPSJnOTMxLTMiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMjguNDE5NDMsMzkuNjczNjg5KSIgc3R5bGU9InN0cm9rZTojMmMyYzJjO3N0cm9rZS1vcGFjaXR5OjEiPiYjeGE7ICAgICAgPHJlY3Qgc3R5bGU9Im9wYWNpdHk6MTtmaWxsOiNkMzQ1M2E7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiMyYzJjMmM7c3Ryb2tlLXdpZHRoOjMuNzUwMDAwMjQ7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjMuODc1O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxIiBpZD0icmVjdDU5NjMtNSIgd2lkdGg9Ijg1LjE5NTAzIiBoZWlnaHQ9IjE2LjMzNDY1NiIgeD0iNDg2LjY5MjYzIiB5PSI3Ny4xMjYxNzUiLz4mI3hhOyAgICAgIDxyZWN0IHN0eWxlPSJkaXNwbGF5OmlubGluZTtvcGFjaXR5OjE7ZmlsbDojZDM0NTNhO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojMmMyYzJjO3N0cm9rZS13aWR0aDozLjc1MDAwMDI0O3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDozLjg3NTtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIgaWQ9InJlY3Q1OTYzLTYtMyIgd2lkdGg9Ijg1LjE5NTAzIiBoZWlnaHQ9IjE2LjMzNDY1NiIgeD0iNDg2LjY5MjYzIiB5PSIxMzkuOTk2ODQiLz4mI3hhOyAgICAgIDxyZWN0IHN0eWxlPSJkaXNwbGF5OmlubGluZTtvcGFjaXR5OjE7ZmlsbDojZDM0NTNhO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojMmMyYzJjO3N0cm9rZS13aWR0aDozLjc1MDAwMDI0O3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDozLjg3NTtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIgaWQ9InJlY3Q1OTYzLTYtMi01IiB3aWR0aD0iMjkuNTk4MTYiIGhlaWdodD0iMTYuMjM4OTkxIiB4PSI0ODYuNjkyNjMiIHk9IjEwOC43NjUyMSIvPiYjeGE7ICAgICAgPHJlY3Qgc3R5bGU9ImRpc3BsYXk6aW5saW5lO29wYWNpdHk6MTtmaWxsOiNkMzQ1M2E7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiMyYzJjMmM7c3Ryb2tlLXdpZHRoOjMuNzUwMDAwMjQ7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjMuODc1O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxIiBpZD0icmVjdDU5NjMtNi0yLTktNiIgd2lkdGg9IjI4LjQ5NjE4MyIgaGVpZ2h0PSIxNC43ODk4OCIgeD0iNTAwLjQ3OTEzIiB5PSI5My41ODA0MjkiLz4mI3hhOyAgICAgIDxyZWN0IHN0eWxlPSJkaXNwbGF5OmlubGluZTtvcGFjaXR5OjE7ZmlsbDojZDM0NTNhO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojMmMyYzJjO3N0cm9rZS13aWR0aDozLjc1MDAwMDI0O3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDozLjg3NTtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIgaWQ9InJlY3Q1OTYzLTYtMi05LTItMiIgd2lkdGg9IjEzLjkzNzE4MyIgaGVpZ2h0PSIxNC42ODcxMDYiIHg9IjQ4Ni42OTI2MyIgeT0iOTMuNjMxODEzIi8+JiN4YTsgICAgICA8cmVjdCBzdHlsZT0iZGlzcGxheTppbmxpbmU7b3BhY2l0eToxO2ZpbGw6I2QzNDUzYTtmaWxsLW9wYWNpdHk6MTtzdHJva2U6IzJjMmMyYztzdHJva2Utd2lkdGg6My43NTAwMDAyNDtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6My44NzU7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiIGlkPSJyZWN0NTk2My02LTItOS0zLTkiIHdpZHRoPSIyOC40OTYxODMiIGhlaWdodD0iMTQuNzg5ODgiIHg9IjUyOC45ODYwMiIgeT0iOTMuNTgwNDI5Ii8+JiN4YTsgICAgICA8cmVjdCBzdHlsZT0iZGlzcGxheTppbmxpbmU7b3BhY2l0eToxO2ZpbGw6I2QzNDUzYTtmaWxsLW9wYWNpdHk6MTtzdHJva2U6IzJjMmMyYztzdHJva2Utd2lkdGg6My43NTAwMDAyNDtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6My44NzU7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiIGlkPSJyZWN0NTk2My02LTItOS0yLTktMSIgd2lkdGg9IjEzLjkzNzE4MyIgaGVpZ2h0PSIxNC42ODcxMDYiIHg9IjU1Ny45NTA0NCIgeT0iOTMuNjMxODEzIi8+JiN4YTsgICAgICA8cmVjdCBzdHlsZT0iZGlzcGxheTppbmxpbmU7b3BhY2l0eToxO2ZpbGw6I2QzNDUzYTtmaWxsLW9wYWNpdHk6MTtzdHJva2U6IzJjMmMyYztzdHJva2Utd2lkdGg6My43NTAwMDAyNDtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6My44NzU7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiIGlkPSJyZWN0NTk2My02LTItMi0yIiB3aWR0aD0iMjkuNTk4MTYiIGhlaWdodD0iMTYuMjM4OTkxIiB4PSI1NDIuMjg5NDkiIHk9IjEwOC43NjUyMSIvPiYjeGE7ICAgICAgPHJlY3Qgc3R5bGU9ImRpc3BsYXk6aW5saW5lO29wYWNpdHk6MTtmaWxsOiNkMzQ1M2E7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiMyYzJjMmM7c3Ryb2tlLXdpZHRoOjMuNzUwMDAwMjQ7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjMuODc1O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxIiBpZD0icmVjdDU5NjMtNi0yLTktOC03IiB3aWR0aD0iMjguNDk2MTgzIiBoZWlnaHQ9IjE0Ljc4OTg4IiB4PSI1MDAuNDk5MyIgeT0iMTI1LjQ3NjA5Ii8+JiN4YTsgICAgICA8cmVjdCBzdHlsZT0iZGlzcGxheTppbmxpbmU7b3BhY2l0eToxO2ZpbGw6I2QzNDUzYTtmaWxsLW9wYWNpdHk6MTtzdHJva2U6IzJjMmMyYztzdHJva2Utd2lkdGg6My43NTAwMDAyNDtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6My44NzU7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiIGlkPSJyZWN0NTk2My02LTItOS0yLTk3LTAiIHdpZHRoPSIxMy45MzEzNTkiIGhlaWdodD0iMTQuOTU3MDM2IiB4PSI0ODYuNzE1NyIgeT0iMTI1LjM5MjUxIi8+JiN4YTsgICAgICA8cmVjdCBzdHlsZT0iZGlzcGxheTppbmxpbmU7b3BhY2l0eToxO2ZpbGw6I2QzNDUzYTtmaWxsLW9wYWNpdHk6MTtzdHJva2U6IzJjMmMyYztzdHJva2Utd2lkdGg6My43NTAwMDAyNDtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6My44NzU7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiIGlkPSJyZWN0NTk2My02LTItOS0zLTMtOSIgd2lkdGg9IjI4LjQ5NjE4MyIgaGVpZ2h0PSIxNC43ODk4OCIgeD0iNTI5LjAwNjE2IiB5PSIxMjUuNDc2MDkiLz4mI3hhOyAgICAgIDxyZWN0IHN0eWxlPSJkaXNwbGF5OmlubGluZTtvcGFjaXR5OjE7ZmlsbDojZDM0NTNhO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojMmMyYzJjO3N0cm9rZS13aWR0aDozLjc1MDAwMDI0O3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDozLjg3NTtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIgaWQ9InJlY3Q1OTYzLTYtMi05LTItOS02LTMiIHdpZHRoPSIxMy45MzEzNTkiIGhlaWdodD0iMTQuOTU3MDM2IiB4PSI1NTcuOTMyMzciIHk9IjEyNS4zOTI1MSIvPiYjeGE7ICAgICAgPHJlY3Qgc3R5bGU9ImRpc3BsYXk6aW5saW5lO29wYWNpdHk6MTtmaWxsOiNkMzQ1M2E7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiMyYzJjMmM7c3Ryb2tlLXdpZHRoOjMuNzUwMDAwMjQ7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjMuODc1O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxIiBpZD0icmVjdDU5NjMtNi0yLTEtNiIgd2lkdGg9IjI1LjkzNTUwOSIgaGVpZ2h0PSIxNi4yODc0NTciIHg9IjUxNi4zMjIzOSIgeT0iMTA4Ljc0MDk3Ii8+JiN4YTsgICAgPC9nPiYjeGE7ICA8L2c+JiN4YTs8L3N2Zz4=" preserveAspectRatio="none" pointer-events="none"/><image x="60.5" y="253.5" width="41" height="41" xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNDEuMzM3N21tIiBoZWlnaHQ9IjQxLjI3MDk4OG1tIiB2aWV3Qm94PSIwIDAgMTQ2LjQ3MjE2IDE0Ni4yMzU3OCIgaWQ9InN2ZzQ3ODciIHZlcnNpb249IjEuMSI+JiN4YTsgIDxkZWZzIGlkPSJkZWZzNDc4OSIvPiYjeGE7ICA8bWV0YWRhdGEgaWQ9Im1ldGFkYXRhNDc5MiI+JiN4YTsgICAgPHJkZjpSREY+JiN4YTsgICAgICA8Y2M6V29yayByZGY6YWJvdXQ9IiI+JiN4YTsgICAgICAgIDxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PiYjeGE7ICAgICAgICA8ZGM6dHlwZSByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIi8+JiN4YTsgICAgICAgIDxkYzp0aXRsZS8+JiN4YTsgICAgICA8L2NjOldvcms+JiN4YTsgICAgPC9yZGY6UkRGPiYjeGE7ICA8L21ldGFkYXRhPiYjeGE7ICA8ZyBpZD0iZzEwNDYiPiYjeGE7ICAgIDxyZWN0IHJ5PSI4Ljk5NTI5NDYiIHk9IjIuODIzMjkzNyIgeD0iMi44MjMyOTM3IiBoZWlnaHQ9IjE0MC41ODkxOSIgd2lkdGg9IjE0MC44MjU1OCIgaWQ9InJlY3Q0MTM2LTItMy0zIiBzdHlsZT0ib3BhY2l0eToxO2ZpbGw6I2RkZGRkZDtmaWxsLW9wYWNpdHk6MTtzdHJva2U6IzBjM2M4NjtzdHJva2Utd2lkdGg6NS42NDY1ODczNztzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MjtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIvPiYjeGE7ICAgIDxwYXRoIHN0eWxlPSJvcGFjaXR5OjE7ZmlsbDojMTA0ZWFkO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojMGMzYzg2O3N0cm9rZS13aWR0aDoyLjQ4MzQzNzM7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiIGQ9Im0gNzMuMjE2ODUyLDE2Ljc5MjgxOCBhIDEyLjA2MTA0NiwxMi4wNjEwNDYgMCAwIDAgLTEyLjA2MTE1NiwxMi4wNjExNiAxMi4wNjEwNDYsMTIuMDYxMDQ2IDAgMCAwIDguMjc4MTk4LDExLjQ0MjI2IFYgNTcuMDE1NTkgQSAyMC40NjI1NDksMjAuNDYyNTQ5IDAgMCAwIDU1LjQzMTgxOSw2Ny4wMjIzMDUgTCAzOC43MzA3Nyw2Mi4yNDUwODcgYSAxMi4wNjEwNDYsMTIuMDYxMDQ2IDAgMCAwIC0xMi4wNDY1MDgsLTExLjYyOTAyOSAxMi4wNjEwNDYsMTIuMDYxMDQ2IDAgMCAwIC0xMi4wNjExNTcsMTIuMDYxMTYgMTIuMDYxMDQ2LDEyLjA2MTA0NiAwIDAgMCAxMi4wNjExNTcsMTIuMDYxMTUzIDEyLjA2MTA0NiwxMi4wNjEwNDYgMCAwIDAgOS45MzcxMzMsLTUuMjI3NjYgbCAxNi4zNjU5NjYsNC42ODIwMDYgYSAyMC40NjI1NDksMjAuNDYyNTQ5IDAgMCAwIC0wLjIzMjU0NCwyLjkyMDUyOCAyMC40NjI1NDksMjAuNDYyNTQ5IDAgMCAwIDUuNDg0MDA5LDEzLjkxNjAyNSBsIC05Ljc2ODY3NiwxNS4wMzI5NiBhIDEyLjA2MTA0NiwxMi4wNjEwNDYgMCAwIDAgLTQuMTIxNzA0LC0wLjc0MTU4IDEyLjA2MTA0NiwxMi4wNjEwNDYgMCAwIDAgLTEyLjA2MTE1NywxMi4wNjExNiAxMi4wNjEwNDYsMTIuMDYxMDQ2IDAgMCAwIDEyLjA2MTE1NywxMi4wNjExNSAxMi4wNjEwNDYsMTIuMDYxMDQ2IDAgMCAwIDEyLjA2MTE1NiwtMTIuMDYxMTUgMTIuMDYxMDQ2LDEyLjA2MTA0NiAwIDAgMCAtMS45Nzc1MzksLTYuNjEwMTEgTCA2NC4zNDE3Myw5NS41MjI2NjkgYSAyMC40NjI1NDksMjAuNDYyNTQ5IDAgMCAwIDguODc1MTIyLDIuMDUyNjE5IDIwLjQ2MjU0OSwyMC40NjI1NDkgMCAwIDAgOS4yNDEzMzMsLTIuMjA4MjUzIGwgOS43MTM3NDQsMTQuOTQ4NzI1IGEgMTIuMDYxMDQ2LDEyLjA2MTA0NiAwIDAgMCAtMi4zMDE2MzUsNy4wNjYwNSAxMi4wNjEwNDYsMTIuMDYxMDQ2IDAgMCAwIDEyLjA2MTE1NiwxMi4wNjExNSAxMi4wNjEwNDYsMTIuMDYxMDQ2IDAgMCAwIDEyLjA2MTE3LC0xMi4wNjExNSAxMi4wNjEwNDYsMTIuMDYxMDQ2IDAgMCAwIC0xMi4wNjExNywtMTIuMDYxMTYgMTIuMDYxMDQ2LDEyLjA2MTA0NiAwIDAgMCAtMy42MTI2NjcsMC41Njc2MiBMIDg4LjQ2NDA0NCw5MC43MjcxNDIgQSAyMC40NjI1NDksMjAuNDYyNTQ5IDAgMCAwIDkzLjY3ODg4Nyw3Ny4xMTMyNDUgMjAuNDYyNTQ5LDIwLjQ2MjU0OSAwIDAgMCA5My40Mjk4NjQsNzQuMDI5NzUyIEwgMTA5Ljc1NzM5LDY5LjM1ODczMyBBIDEyLjA2MTA0NiwxMi4wNjEwNDYgMCAwIDAgMTE5Ljc4NzksNzQuNzM4MzcxIDEyLjA2MTA0NiwxMi4wNjEwNDYgMCAwIDAgMTMxLjg0OTA2LDYyLjY3NzIxOCAxMi4wNjEwNDYsMTIuMDYxMDQ2IDAgMCAwIDExOS43ODc5LDUwLjYxNjA1OCAxMi4wNjEwNDYsMTIuMDYxMDQ2IDAgMCAwIDEwNy43NTc4OCw2Mi4wNjE5ODQgTCA5MC45MDg1MDIsNjYuODgxMzE1IEEgMjAuNDYyNTQ5LDIwLjQ2MjU0OSAwIDAgMCA3Ni45OTk4MTEsNTcuMDE1NTkgViA0MC4yOTA3MzggYSAxMi4wNjEwNDYsMTIuMDYxMDQ2IDAgMCAwIDguMjc4MTk4LC0xMS40MzY3NiAxMi4wNjEwNDYsMTIuMDYxMDQ2IDAgMCAwIC0xMi4wNjExNTcsLTEyLjA2MTE2IHoiIGlkPSJwYXRoODI5Ii8+JiN4YTsgIDwvZz4mI3hhOzwvc3ZnPg==" preserveAspectRatio="none" pointer-events="none"/><image x="1.5" y="254.5" width="41" height="41" xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNDEuMzM3N21tIiBoZWlnaHQ9IjQxLjI3MDk4OG1tIiB2aWV3Qm94PSIwIDAgMTQ2LjQ3MjE2IDE0Ni4yMzU3OCIgaWQ9InN2ZzQ3ODciIHZlcnNpb249IjEuMSI+JiN4YTsgIDxkZWZzIGlkPSJkZWZzNDc4OSIvPiYjeGE7ICA8bWV0YWRhdGEgaWQ9Im1ldGFkYXRhNDc5MiI+JiN4YTsgICAgPHJkZjpSREY+JiN4YTsgICAgICA8Y2M6V29yayByZGY6YWJvdXQ9IiI+JiN4YTsgICAgICAgIDxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PiYjeGE7ICAgICAgICA8ZGM6dHlwZSByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIi8+JiN4YTsgICAgICAgIDxkYzp0aXRsZS8+JiN4YTsgICAgICA8L2NjOldvcms+JiN4YTsgICAgPC9yZGY6UkRGPiYjeGE7ICA8L21ldGFkYXRhPiYjeGE7ICA8ZyBpZD0iZzEwODEiPiYjeGE7ICAgIDxyZWN0IHJ5PSI4Ljk5NTI5NDYiIHk9IjIuODIzMjkzNyIgeD0iMi44MjMyOTM3IiBoZWlnaHQ9IjE0MC41ODkxOSIgd2lkdGg9IjE0MC44MjU1OCIgaWQ9InJlY3Q0MTM2LTItMy0zIiBzdHlsZT0ib3BhY2l0eToxO2ZpbGw6I2ZkZmRmZDtmaWxsLW9wYWNpdHk6MTtzdHJva2U6IzJjMmMyYztzdHJva2Utd2lkdGg6NS42NDY1ODczNztzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MjtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIvPiYjeGE7ICAgIDxwYXRoIHN0eWxlPSJvcGFjaXR5OjE7ZmlsbDojM2EzYTNhO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojMmMyYzJjO3N0cm9rZS13aWR0aDoyLjQ4MzQzNzM7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiIGQ9Im0gNzMuMjE2ODUyLDE2Ljc5MjgxOCBhIDEyLjA2MTA0NiwxMi4wNjEwNDYgMCAwIDAgLTEyLjA2MTE1NiwxMi4wNjExNiAxMi4wNjEwNDYsMTIuMDYxMDQ2IDAgMCAwIDguMjc4MTk4LDExLjQ0MjI2IFYgNTcuMDE1NTkgQSAyMC40NjI1NDksMjAuNDYyNTQ5IDAgMCAwIDU1LjQzMTgxOSw2Ny4wMjIzMDUgTCAzOC43MzA3Nyw2Mi4yNDUwODcgYSAxMi4wNjEwNDYsMTIuMDYxMDQ2IDAgMCAwIC0xMi4wNDY1MDgsLTExLjYyOTAyOSAxMi4wNjEwNDYsMTIuMDYxMDQ2IDAgMCAwIC0xMi4wNjExNTcsMTIuMDYxMTYgMTIuMDYxMDQ2LDEyLjA2MTA0NiAwIDAgMCAxMi4wNjExNTcsMTIuMDYxMTUzIDEyLjA2MTA0NiwxMi4wNjEwNDYgMCAwIDAgOS45MzcxMzMsLTUuMjI3NjYgbCAxNi4zNjU5NjYsNC42ODIwMDYgYSAyMC40NjI1NDksMjAuNDYyNTQ5IDAgMCAwIC0wLjIzMjU0NCwyLjkyMDUyOCAyMC40NjI1NDksMjAuNDYyNTQ5IDAgMCAwIDUuNDg0MDA5LDEzLjkxNjAyNSBsIC05Ljc2ODY3NiwxNS4wMzI5NiBhIDEyLjA2MTA0NiwxMi4wNjEwNDYgMCAwIDAgLTQuMTIxNzA0LC0wLjc0MTU4IDEyLjA2MTA0NiwxMi4wNjEwNDYgMCAwIDAgLTEyLjA2MTE1NywxMi4wNjExNiAxMi4wNjEwNDYsMTIuMDYxMDQ2IDAgMCAwIDEyLjA2MTE1NywxMi4wNjExNSAxMi4wNjEwNDYsMTIuMDYxMDQ2IDAgMCAwIDEyLjA2MTE1NiwtMTIuMDYxMTUgMTIuMDYxMDQ2LDEyLjA2MTA0NiAwIDAgMCAtMS45Nzc1MzksLTYuNjEwMTEgTCA2NC4zNDE3Myw5NS41MjI2NjkgYSAyMC40NjI1NDksMjAuNDYyNTQ5IDAgMCAwIDguODc1MTIyLDIuMDUyNjE5IDIwLjQ2MjU0OSwyMC40NjI1NDkgMCAwIDAgOS4yNDEzMzMsLTIuMjA4MjUzIGwgOS43MTM3NDQsMTQuOTQ4NzI1IGEgMTIuMDYxMDQ2LDEyLjA2MTA0NiAwIDAgMCAtMi4zMDE2MzUsNy4wNjYwNSAxMi4wNjEwNDYsMTIuMDYxMDQ2IDAgMCAwIDEyLjA2MTE1NiwxMi4wNjExNSAxMi4wNjEwNDYsMTIuMDYxMDQ2IDAgMCAwIDEyLjA2MTE3LC0xMi4wNjExNSAxMi4wNjEwNDYsMTIuMDYxMDQ2IDAgMCAwIC0xMi4wNjExNywtMTIuMDYxMTYgMTIuMDYxMDQ2LDEyLjA2MTA0NiAwIDAgMCAtMy42MTI2NjcsMC41Njc2MiBMIDg4LjQ2NDA0NCw5MC43MjcxNDIgQSAyMC40NjI1NDksMjAuNDYyNTQ5IDAgMCAwIDkzLjY3ODg4Nyw3Ny4xMTMyNDUgMjAuNDYyNTQ5LDIwLjQ2MjU0OSAwIDAgMCA5My40Mjk4NjQsNzQuMDI5NzUyIEwgMTA5Ljc1NzM5LDY5LjM1ODczMyBBIDEyLjA2MTA0NiwxMi4wNjEwNDYgMCAwIDAgMTE5Ljc4NzksNzQuNzM4MzcxIDEyLjA2MTA0NiwxMi4wNjEwNDYgMCAwIDAgMTMxLjg0OTA2LDYyLjY3NzIxOCAxMi4wNjEwNDYsMTIuMDYxMDQ2IDAgMCAwIDExOS43ODc5LDUwLjYxNjA1OCAxMi4wNjEwNDYsMTIuMDYxMDQ2IDAgMCAwIDEwNy43NTc4OCw2Mi4wNjE5ODQgTCA5MC45MDg1MDIsNjYuODgxMzE1IEEgMjAuNDYyNTQ5LDIwLjQ2MjU0OSAwIDAgMCA3Ni45OTk4MTEsNTcuMDE1NTkgViA0MC4yOTA3MzggYSAxMi4wNjEwNDYsMTIuMDYxMDQ2IDAgMCAwIDguMjc4MTk4LC0xMS40MzY3NiAxMi4wNjEwNDYsMTIuMDYxMDQ2IDAgMCAwIC0xMi4wNjExNTcsLTEyLjA2MTE2IHoiIGlkPSJwYXRoODI5Ii8+JiN4YTsgIDwvZz4mI3hhOzwvc3ZnPg==" preserveAspectRatio="none" pointer-events="none"/><image x="60.5" y="-0.5" width="41" height="41" xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxuczpvc2I9Imh0dHA6Ly93d3cub3BlbnN3YXRjaGJvb2sub3JnL3VyaS8yMDA5L29zYiIgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIiB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSI0MS4zMzc3ODRtbSIgaGVpZ2h0PSI0MS4zMzMwNjFtbSIgdmlld0JveD0iMCAwIDE0Ni40NzI0NiAxNDYuNDU1NzQiIGlkPSJzdmc2MzE1IiB2ZXJzaW9uPSIxLjEiPiYjeGE7ICA8ZGVmcyBpZD0iZGVmczYzMTciPiYjeGE7ICAgIDxsaW5lYXJHcmFkaWVudCBpZD0ibGluZWFyR3JhZGllbnQ4MTkiIG9zYjpwYWludD0ic29saWQiPiYjeGE7ICAgICAgPHN0b3Agc3R5bGU9InN0b3AtY29sb3I6I2RkZGRkZDtzdG9wLW9wYWNpdHk6MTsiIG9mZnNldD0iMCIgaWQ9InN0b3A4MTciLz4mI3hhOyAgICA8L2xpbmVhckdyYWRpZW50PiYjeGE7ICAgIDxsaW5lYXJHcmFkaWVudCBncmFkaWVudFRyYW5zZm9ybT0ibWF0cml4KDAuOTk0NDk4MzUsMCwwLDAuOTk0Mzg0NzQsMC40MDMyMzQ0LDAuNDAzMTg4MzMpIiB4bGluazpocmVmPSIjbGluZWFyR3JhZGllbnQ4MTkiIGlkPSJsaW5lYXJHcmFkaWVudDgyMSIgeDE9IjMuNTc2Mjc4N2UtMDYiIHkxPSI3My4yMzU5MTYiIHgyPSIxNDYuNDcxODMiIHkyPSI3My4yMzU5MTYiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIi8+JiN4YTsgIDwvZGVmcz4mI3hhOyAgPG1ldGFkYXRhIGlkPSJtZXRhZGF0YTYzMjAiPiYjeGE7ICAgIDxyZGY6UkRGPiYjeGE7ICAgICAgPGNjOldvcmsgcmRmOmFib3V0PSIiPiYjeGE7ICAgICAgICA8ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD4mI3hhOyAgICAgICAgPGRjOnR5cGUgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIvPiYjeGE7ICAgICAgICA8ZGM6dGl0bGUvPiYjeGE7ICAgICAgPC9jYzpXb3JrPiYjeGE7ICAgIDwvcmRmOlJERj4mI3hhOyAgPC9tZXRhZGF0YT4mI3hhOyAgPGcgaWQ9Imc4MzYiPiYjeGE7ICAgIDxlbGxpcHNlIGN5PSI3My4yMjc4NjciIGN4PSI3My4yMzYyMjkiIGlkPSJwYXRoODE1IiBzdHlsZT0iZmlsbDp1cmwoI2xpbmVhckdyYWRpZW50ODIxKTtmaWxsLW9wYWNpdHk6MTtzdHJva2U6IzBjM2M4NjtzdHJva2Utd2lkdGg6NS42MTUxNzYyO3N0cm9rZS1saW5lY2FwOnNxdWFyZTtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6My44NzU7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjE7cGFpbnQtb3JkZXI6bm9ybWFsO29wYWNpdHk6MC45NCIgcng9IjcwLjQyODQ4MiIgcnk9IjcwLjQyMDQ0MSIvPiYjeGE7ICAgIDxwYXRoIHN0eWxlPSJvcGFjaXR5OjAuOTM5OTk5OTk7ZmlsbDojMTA0ZWFkO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojMGMzYzg2O3N0cm9rZS13aWR0aDoxLjgyNzQzNjkyO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxO3BhaW50LW9yZGVyOm5vcm1hbCIgZD0iTSAzMy4wODg5MywzMy4wODU0MDcgViA2Ni4zMDE2OCBMIDQ1LjA4OTEyMyw1NC4zMDI4NzggNjUuNjk5NjEyLDczLjIyNzg3MSA0NS4wOTQ4OTUsOTIuMTU4NjI3IDMzLjA4ODkzLDgwLjE1NDA2IHYgMzMuMjE2MjkgaCAzMy4yMjAwNTIgbCAtMTIuMDA1OTU1LC0xMi4wMDQ2NCAxOC45MzMxLC0yMC42MDIyMDQgMTguOTI2OTksMjAuNjA3OTE0IC0xMi4wMDAyMDksMTEuOTk4ODkgMzMuMjE4NjIyLC0wLjAwMiAwLjAwMiwtMzMuMjE0NzY4IEwgMTAxLjM3MTY4LDkyLjE2Mzk2MyA4MC43NzI2ODYsNzMuMjI3ODA3IDEwMS4zNzczNyw1NC4yOTY3NjMgMTEzLjM4MzM1LDY2LjMwMTMzNyBWIDMzLjA4NTQyNSBMIDgwLjE2MzI3MSwzMy4wODUzODkgOTIuMTY5MjE3LDQ1LjA5MDAwOSA3My4yMzYxMzUsNjUuNjkyMTgxIDU0LjI5NzYxNiw0NS4wOTU3ODIgNjYuMzA5MzQ1LDMzLjA4NTQyNSBaIiBpZD0icmVjdDgyNy0wLTMiLz4mI3hhOyAgPC9nPiYjeGE7PC9zdmc+" preserveAspectRatio="none" pointer-events="none"/><image x="-0.5" y="480" width="135" height="35" xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIGlkPSJzdmc2MzE1IiB2aWV3Qm94PSIwIDAgNDc3LjE1NjYyIDEyMy40MDkwMiIgaGVpZ2h0PSIzNC44Mjg3NjZtbSIgd2lkdGg9IjEzNC42NjQybW0iPiYjeGE7ICA8ZGVmcyBpZD0iZGVmczYzMTciLz4mI3hhOyAgPG1ldGFkYXRhIGlkPSJtZXRhZGF0YTYzMjAiPiYjeGE7ICAgIDxyZGY6UkRGPiYjeGE7ICAgICAgPGNjOldvcmsgcmRmOmFib3V0PSIiPiYjeGE7ICAgICAgICA8ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD4mI3hhOyAgICAgICAgPGRjOnR5cGUgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIvPiYjeGE7ICAgICAgICA8ZGM6dGl0bGUvPiYjeGE7ICAgICAgPC9jYzpXb3JrPiYjeGE7ICAgIDwvcmRmOlJERj4mI3hhOyAgPC9tZXRhZGF0YT4mI3hhOyAgPGcgaWQ9Imc4NTYiPiYjeGE7ICAgIDxyZWN0IHN0eWxlPSJvcGFjaXR5OjE7ZmlsbDojZmRmZGZkO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojMmMyYzJjO3N0cm9rZS13aWR0aDo1LjQ5NjU2MzQzO3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoyO3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxIiBpZD0icmVjdDQxMzYtMi0zLTkiIHdpZHRoPSI0NzEuNjYwMDYiIGhlaWdodD0iMTE3LjkxMjQ1IiB4PSIyLjc0ODI4MTciIHk9IjIuNzQ4MjgxNyIgcnk9IjcuNTQ0Mzc0Ii8+JiN4YTsgICAgPHJlY3QgaWQ9InJlY3QzNzI5LTMtNi0zIiB3aWR0aD0iMzI1Ljc5NzY3IiBoZWlnaHQ9Ijc5LjIyMjk0NiIgeD0iMjQuMDE5ODU5IiB5PSIyMi4wOTMwMzUiIHN0eWxlPSJmaWxsOiNmZGZkZmQ7c3Ryb2tlOiMyYzJjMmM7c3Ryb2tlLXdpZHRoOjMuNzUwMDAwOTU7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MC45ODQzMTM3MztmaWxsLW9wYWNpdHk6MSIgcnk9IjYuMjI0MDUxNSIvPiYjeGE7ICAgIDxwYXRoIGlkPSJyZWN0ODI3LTAtMyIgZD0ibSAzNjguMTM0MjQsMTcuMzM3NjU4IHYgMzYuNzExOCBsIDEzLjI2MTUzLC0xMy4yNjE1IDIyLjc3Njg0LDIwLjkxNjU3IC0yMi43NzA0NiwyMC45MjI5NCAtMTMuMjY3OTEsLTEzLjI2Nzg3IHYgMzYuNzExNzgyIGggMzYuNzExNzkgbCAtMTMuMjY3ODksLTEzLjI2NzkyMiAyMC45MjMxNCwtMjIuNzcwMjggMjAuOTE2MzksMjIuNzc2NTkgLTEzLjI2MTU0LDEzLjI2MTU3MiAzNi43MTAxOSwtMC4wMDIgMC4wMDIsLTM2LjcxMDEyMiAtMTMuMjc0MjYsMTMuMjc0MTkgLTIyLjc2NDA4LC0yMC45Mjg5NCAyMi43NzA0MiwtMjAuOTIzMjYgMTMuMjY3OTIsMTMuMjY3ODggdiAtMzYuNzExNDEgbCAtMzYuNzExNzksLTRlLTUgMTMuMjY3ODgsMTMuMjY3OTMgLTIwLjkyMzEyLDIyLjc3MDI1IC0yMC45MjkxMywtMjIuNzYzODcgMTMuMjc0MjcsLTEzLjI3NDI3IHoiIHN0eWxlPSJmaWxsOiMzYTNhM2E7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiMyYzJjMmM7c3Ryb2tlLXdpZHRoOjIuMDE5NjMyNTg7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjE7cGFpbnQtb3JkZXI6bm9ybWFsIi8+JiN4YTsgIDwvZz4mI3hhOzwvc3ZnPg==" preserveAspectRatio="none" pointer-events="none"/><image x="1.5" y="-0.5" width="41" height="41" xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxuczpvc2I9Imh0dHA6Ly93d3cub3BlbnN3YXRjaGJvb2sub3JnL3VyaS8yMDA5L29zYiIgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIiB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZlcnNpb249IjEuMSIgaWQ9InN2ZzYzMTUiIHZpZXdCb3g9IjAgMCAxNDYuNDcyMTIgMTQ2LjQ1NjA2IiBoZWlnaHQ9IjQxLjMzMzE1M21tIiB3aWR0aD0iNDEuMzM3Njg4bW0iPiYjeGE7ICA8ZGVmcyBpZD0iZGVmczYzMTciPiYjeGE7ICAgIDxsaW5lYXJHcmFkaWVudCBvc2I6cGFpbnQ9InNvbGlkIiBpZD0ibGluZWFyR3JhZGllbnQ4MTkiPiYjeGE7ICAgICAgPHN0b3AgaWQ9InN0b3A4MTciIG9mZnNldD0iMCIgc3R5bGU9InN0b3AtY29sb3I6I2RkZGRkZDtzdG9wLW9wYWNpdHk6MTsiLz4mI3hhOyAgICA8L2xpbmVhckdyYWRpZW50PiYjeGE7ICAgIDxsaW5lYXJHcmFkaWVudCBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeTI9IjczLjIzNTkxNiIgeDI9IjE0Ni40NzE4MyIgeTE9IjczLjIzNTkxNiIgeDE9IjMuNTc2Mjc4N2UtMDYiIGlkPSJsaW5lYXJHcmFkaWVudDgyMSIgeGxpbms6aHJlZj0iI2xpbmVhckdyYWRpZW50ODE5IiBncmFkaWVudFRyYW5zZm9ybT0ibWF0cml4KDAuOTk0NDk4MzUsMCwwLDAuOTk0Mzg0NzQsMC40MDMyMzQ0LDAuNDAzMTg4MzMpIi8+JiN4YTsgIDwvZGVmcz4mI3hhOyAgPG1ldGFkYXRhIGlkPSJtZXRhZGF0YTYzMjAiPiYjeGE7ICAgIDxyZGY6UkRGPiYjeGE7ICAgICAgPGNjOldvcmsgcmRmOmFib3V0PSIiPiYjeGE7ICAgICAgICA8ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD4mI3hhOyAgICAgICAgPGRjOnR5cGUgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIvPiYjeGE7ICAgICAgICA8ZGM6dGl0bGUvPiYjeGE7ICAgICAgPC9jYzpXb3JrPiYjeGE7ICAgIDwvcmRmOlJERj4mI3hhOyAgPC9tZXRhZGF0YT4mI3hhOyAgPGcgaWQ9Imc4NTciPiYjeGE7ICAgIDxlbGxpcHNlIHJ5PSI3MC40MjA0NDEiIHJ4PSI3MC40Mjg0ODIiIHN0eWxlPSJvcGFjaXR5OjE7ZmlsbDojZmRmZGZkO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojMmMyYzJjO3N0cm9rZS13aWR0aDo1LjYxNTE3NjI7c3Ryb2tlLWxpbmVjYXA6c3F1YXJlO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDozLjg3NTtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MTtwYWludC1vcmRlcjpub3JtYWwiIGlkPSJwYXRoODE1IiBjeD0iNzMuMjM2MDY5IiBjeT0iNzMuMjI4MDI3Ii8+JiN4YTsgICAgPHBhdGggaWQ9InJlY3Q4MjctMC0zIiBkPSJNIDMzLjA4ODc2OSwzMy4wODU1NjYgViA2Ni4zMDE4MzkgTCA0NS4wODg5NjIsNTQuMzAzMDM3IDY1LjY5OTQ1MSw3My4yMjgwMyA0NS4wOTQ3MzQsOTIuMTU4Nzg2IDMzLjA4ODc2OSw4MC4xNTQyMTkgdiAzMy4yMTYyOTEgaCAzMy4yMjAwNTIgbCAtMTIuMDA1OTU1LC0xMi4wMDQ2NCAxOC45MzMxLC0yMC42MDIyMDUgMTguOTI2OTksMjAuNjA3OTE1IC0xMi4wMDAyMDksMTEuOTk4ODkgMzMuMjE4NjIzLC0wLjAwMiAwLjAwMiwtMzMuMjE0NzY5IEwgMTAxLjM3MTUyLDkyLjE2NDEyMiA4MC43NzI1MjUsNzMuMjI3OTY2IDEwMS4zNzcyMSw1NC4yOTY5MjIgMTEzLjM4MzE5LDY2LjMwMTQ5NiBWIDMzLjA4NTU4NCBMIDgwLjE2MzExLDMzLjA4NTU0OCA5Mi4xNjkwNTYsNDUuMDkwMTY4IDczLjIzNTk3NCw2NS42OTIzNCA1NC4yOTc0NTUsNDUuMDk1OTQxIDY2LjMwOTE4NCwzMy4wODU1ODQgWiIgc3R5bGU9Im9wYWNpdHk6MTtmaWxsOiMzYTNhM2E7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiMyYzJjMmM7c3Ryb2tlLXdpZHRoOjEuODI3NDM2OTI7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjE7cGFpbnQtb3JkZXI6bm9ybWFsIi8+JiN4YTsgIDwvZz4mI3hhOzwvc3ZnPg==" preserveAspectRatio="none" pointer-events="none"/><image x="60.5" y="50.5" width="41" height="41" xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNDEuMzM3NzA0bW0iIGhlaWdodD0iNDEuMjcwOTkybW0iIHZpZXdCb3g9IjAgMCAxNDYuNDcyMTkgMTQ2LjIzNTgxIiBpZD0ic3ZnNzc3OCIgdmVyc2lvbj0iMS4xIj4mI3hhOyAgPGRlZnMgaWQ9ImRlZnM3NzgwIi8+JiN4YTsgIDxtZXRhZGF0YSBpZD0ibWV0YWRhdGE3NzgzIj4mI3hhOyAgICA8cmRmOlJERj4mI3hhOyAgICAgIDxjYzpXb3JrIHJkZjphYm91dD0iIj4mI3hhOyAgICAgICAgPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+JiN4YTsgICAgICAgIDxkYzp0eXBlIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiLz4mI3hhOyAgICAgICAgPGRjOnRpdGxlLz4mI3hhOyAgICAgIDwvY2M6V29yaz4mI3hhOyAgICA8L3JkZjpSREY+JiN4YTsgIDwvbWV0YWRhdGE+JiN4YTsgIDxyZWN0IHJ5PSI4Ljk5NTI5NjUiIHk9IjIuODIzMjk0MiIgeD0iMi44MjMyOTQ0IiBoZWlnaHQ9IjE0MC41ODkyMiIgd2lkdGg9IjE0MC44MjU2MSIgaWQ9InJlY3Q0MTM2LTItMy0zIiBzdHlsZT0ib3BhY2l0eToxO2ZpbGw6I2RkZGRkZDtmaWxsLW9wYWNpdHk6MTtzdHJva2U6IzBjM2M4NjtzdHJva2Utd2lkdGg6NS42NDY1ODg4O3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoyO3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxIi8+JiN4YTsgIDxwYXRoIGlkPSJyZWN0ODI3LTAtMyIgZD0iTSAxOC42ODg2NjMsMTguNTcwNjg3IFYgNjMuNzA2MzI5IEwgMzQuOTkzMTU2LDQ3LjQwMTg2NyA2Mi45OTYzMzYsNzMuMTE3OTE5IDM1LjAwMSw5OC44NDE4MDQgMTguNjg4NjYzLDgyLjUyOTUwOCBWIDEyNy42NjUxNSBIIDYzLjgyNDI3OCBMIDQ3LjUxMTk1NywxMTEuMzUyNzcgNzMuMjM2MDksODMuMzU3NjQ3IDk4Ljk1MTkzMiwxMTEuMzYwNTMgODIuNjQ3NDExLDEyNy42NjUxIGwgNDUuMTMzNjY5LC0wLjAwMiAwLjAwMiwtNDUuMTMzNTk0IC0xNi4zMTk3LDE2LjMxOTYwMyBMIDgzLjQ3NTg4MSw3My4xMTc4NDUgMTExLjQ3MTE3LDQ3LjM5MzU2OCAxMjcuNzgzNTMsNjMuNzA1ODc0IFYgMTguNTcwNzEyIGwgLTQ1LjEzNTYyOCwtNC45ZS01IDE2LjMxMjMxLDE2LjMxMjM4IEwgNzMuMjM2MTAyLDYyLjg3ODExNiA0Ny41MDQ2MDYsMzQuODkwODg3IDYzLjgyNDc3LDE4LjU3MDcxMiBaIiBzdHlsZT0iZmlsbDojMTA0ZWFkO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojMGMzYzg2O3N0cm9rZS13aWR0aDoyLjQ4MzA1NDY0O3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxO3BhaW50LW9yZGVyOm5vcm1hbCIvPiYjeGE7PC9zdmc+" preserveAspectRatio="none" pointer-events="none"/><image x="1.5" y="50.5" width="41" height="41" xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNDEuMzM3NzA0bW0iIGhlaWdodD0iNDEuMjcwOTg4bW0iIHZpZXdCb3g9IjAgMCAxNDYuNDcyMTkgMTQ2LjIzNTgiIGlkPSJzdmc3Nzc4IiB2ZXJzaW9uPSIxLjEiPiYjeGE7ICA8ZGVmcyBpZD0iZGVmczc3ODAiLz4mI3hhOyAgPG1ldGFkYXRhIGlkPSJtZXRhZGF0YTc3ODMiPiYjeGE7ICAgIDxyZGY6UkRGPiYjeGE7ICAgICAgPGNjOldvcmsgcmRmOmFib3V0PSIiPiYjeGE7ICAgICAgICA8ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD4mI3hhOyAgICAgICAgPGRjOnR5cGUgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIvPiYjeGE7ICAgICAgICA8ZGM6dGl0bGUvPiYjeGE7ICAgICAgPC9jYzpXb3JrPiYjeGE7ICAgIDwvcmRmOlJERj4mI3hhOyAgPC9tZXRhZGF0YT4mI3hhOyAgPGcgaWQ9Imc4NjUiPiYjeGE7ICAgIDxyZWN0IHN0eWxlPSJvcGFjaXR5OjE7ZmlsbDojZmRmZGZkO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojMmMyYzJjO3N0cm9rZS13aWR0aDo1LjY0NjU4ODg7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjI7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiIGlkPSJyZWN0NDEzNi0yLTMtMyIgd2lkdGg9IjE0MC44MjU2MSIgaGVpZ2h0PSIxNDAuNTg5MjIiIHg9IjIuODIzMjk0NCIgeT0iMi44MjMyOTQyIiByeT0iOC45OTUyOTY1Ii8+JiN4YTsgICAgPHBhdGggc3R5bGU9ImZpbGw6IzNhM2EzYTtmaWxsLW9wYWNpdHk6MTtzdHJva2U6IzJjMmMyYztzdHJva2Utd2lkdGg6Mi40ODMwNTQ2NDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MTtwYWludC1vcmRlcjpub3JtYWwiIGQ9Ik0gMTguNjg4NjY1LDE4LjU3MDY4NCBWIDYzLjcwNjMyNiBMIDM0Ljk5MzE1OCw0Ny40MDE4NjQgNjIuOTk2MzM4LDczLjExNzkxNiAzNS4wMDEwMDIsOTguODQxODAxIDE4LjY4ODY2NSw4Mi41Mjk1MDUgViAxMjcuNjY1MTUgSCA2My44MjQyOCBMIDQ3LjUxMTk1OSwxMTEuMzUyNzcgNzMuMjM2MDkyLDgzLjM1NzY0NCA5OC45NTE5MzQsMTExLjM2MDUzIDgyLjY0NzQxMywxMjcuNjY1MSBsIDQ1LjEzMzY2NywtMC4wMDIgMC4wMDIsLTQ1LjEzMzU5NyAtMTYuMzE5NywxNi4zMTk2MDMgTCA4My40NzU4ODMsNzMuMTE3ODQyIDExMS40NzExNyw0Ny4zOTM1NjUgMTI3Ljc4MzUzLDYzLjcwNTg3MSBWIDE4LjU3MDcwOSBMIDgyLjY0NzkwNCwxOC41NzA2NiA5OC45NjAyMTQsMzQuODgzMDQgNzMuMjM2MTA0LDYyLjg3ODExMyA0Ny41MDQ2MDgsMzQuODkwODg0IDYzLjgyNDc3MiwxOC41NzA3MDkgWiIgaWQ9InJlY3Q4MjctMC0zIi8+JiN4YTsgIDwvZz4mI3hhOzwvc3ZnPg==" preserveAspectRatio="none" pointer-events="none"/><image x="320" y="581.5" width="135" height="38" xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBpZD0ic3ZnOCIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMTM1LjIyOTMyIDM3LjUxOTU3OCIgaGVpZ2h0PSIzNy41MTk1NzdtbSIgd2lkdGg9IjEzNS4yMjkzMm1tIj4mI3hhOyAgPGRlZnMgaWQ9ImRlZnMyIj4mI3hhOyAgICA8ZmlsdGVyIGlkPSJmaWx0ZXI0MTgzIiBzdHlsZT0iY29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzOnNSR0IiPiYjeGE7ICAgICAgPGZlQmxlbmQgaWQ9ImZlQmxlbmQ0MTg1IiBpbjI9IkJhY2tncm91bmRJbWFnZSIgbW9kZT0ibGlnaHRlbiIvPiYjeGE7ICAgIDwvZmlsdGVyPiYjeGE7ICAgIDxmaWx0ZXIgaWQ9ImZpbHRlcjQxODMtNCIgc3R5bGU9ImNvbG9yLWludGVycG9sYXRpb24tZmlsdGVyczpzUkdCIj4mI3hhOyAgICAgIDxmZUJsZW5kIGlkPSJmZUJsZW5kNDE4NS02IiBpbjI9IkJhY2tncm91bmRJbWFnZSIgbW9kZT0ibGlnaHRlbiIvPiYjeGE7ICAgIDwvZmlsdGVyPiYjeGE7ICAgIDxmaWx0ZXIgaWQ9ImZpbHRlcjQzMjYiIHN0eWxlPSJjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM6c1JHQiI+JiN4YTsgICAgICA8ZmVCbGVuZCBpZD0iZmVCbGVuZDQzMjgiIGluMj0iQmFja2dyb3VuZEltYWdlIiBtb2RlPSJsaWdodGVuIi8+JiN4YTsgICAgPC9maWx0ZXI+JiN4YTsgIDwvZGVmcz4mI3hhOyAgPG1ldGFkYXRhIGlkPSJtZXRhZGF0YTUiPiYjeGE7ICAgIDxyZGY6UkRGPiYjeGE7ICAgICAgPGNjOldvcmsgcmRmOmFib3V0PSIiPiYjeGE7ICAgICAgICA8ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD4mI3hhOyAgICAgICAgPGRjOnR5cGUgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIvPiYjeGE7ICAgICAgICA8ZGM6dGl0bGUvPiYjeGE7ICAgICAgPC9jYzpXb3JrPiYjeGE7ICAgIDwvcmRmOlJERj4mI3hhOyAgPC9tZXRhZGF0YT4mI3hhOyAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTE5LjE3ODE2NCwtMTI3LjQyMDU3KSIgaWQ9ImxheWVyMSI+JiN4YTsgICAgPGcgaWQ9ImcxMTg4Ij4mI3hhOyAgICAgIDxnIGlkPSJnMTEzNiI+JiN4YTsgICAgICAgIDxyZWN0IHk9IjEzMC43NjQ5OCIgeD0iMjIuNTIyNTg3IiBoZWlnaHQ9IjMwLjgzMDczNCIgd2lkdGg9IjEyOC41NDA0OCIgaWQ9InJlY3Q4MjYiIHN0eWxlPSJvcGFjaXR5OjE7ZmlsbDojYjliOWI5O2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojN2U3ZTdlO3N0cm9rZS13aWR0aDo2LjY4ODg0NDI7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjE7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjE7cGFpbnQtb3JkZXI6c3Ryb2tlIG1hcmtlcnMgZmlsbCIvPiYjeGE7ICAgICAgICA8cmVjdCB5PSIxMzAuNzY0OTgiIHg9IjIyLjUyMjU4NyIgaGVpZ2h0PSIzMC44MzA3MzQiIHdpZHRoPSIxMjguNTQwNDciIGlkPSJyZWN0MTEyNCIgc3R5bGU9Im9wYWNpdHk6MTtmaWxsOm5vbmU7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiM0YjRiNGI7c3Ryb2tlLXdpZHRoOjAuNzkzNzQ5OTk7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjE7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjE7cGFpbnQtb3JkZXI6c3Ryb2tlIG1hcmtlcnMgZmlsbCIvPiYjeGE7ICAgICAgPC9nPiYjeGE7ICAgICAgPGcgaWQ9ImcxMTc5Ij4mI3hhOyAgICAgICAgPHJlY3Qgcnk9IjAuNTAyMTE5OSIgeT0iMTM3Ljc4MTMzIiB4PSIxMzkuNDc2MjYiIGhlaWdodD0iMTYuNzk4MDUyIiB3aWR0aD0iMy4zMTk2MTQ5IiBpZD0icmVjdDgyOCIgc3R5bGU9Im9wYWNpdHk6MTtmaWxsOiM3ZTdlN2U7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiM0YjRiNGI7c3Ryb2tlLXdpZHRoOjEuMDU4MzMzMjg7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjE7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjE7cGFpbnQtb3JkZXI6c3Ryb2tlIGZpbGwgbWFya2VycyIvPiYjeGE7ICAgICAgICA8cmVjdCByeT0iMC41MDIxMTk5IiB5PSIxMzcuNzgxMzMiIHg9IjMzLjMwNzAxMSIgaGVpZ2h0PSIxNi43OTgwNTIiIHdpZHRoPSIzLjMxOTYxNDkiIGlkPSJyZWN0ODI4LTciIHN0eWxlPSJvcGFjaXR5OjE7ZmlsbDojN2U3ZTdlO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojNGI0YjRiO3N0cm9rZS13aWR0aDoxLjA1ODMzMzI4O3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoxO3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxO3BhaW50LW9yZGVyOnN0cm9rZSBmaWxsIG1hcmtlcnMiLz4mI3hhOyAgICAgICAgPHJlY3Qgcnk9IjAuNTA5MDkyODEiIHk9IjE0MC41NTI4NiIgeD0iMTAxLjA2ODI3IiBoZWlnaHQ9IjExLjI1NDk3NyIgd2lkdGg9IjI5LjIyNTAwMiIgaWQ9InJlY3Q4MjgtMy02IiBzdHlsZT0ib3BhY2l0eToxO2ZpbGw6IzdlN2U3ZTtmaWxsLW9wYWNpdHk6MTtzdHJva2U6IzRiNGI0YjtzdHJva2Utd2lkdGg6MS4wNTgzMzMyODtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MTtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MTtwYWludC1vcmRlcjpzdHJva2UgZmlsbCBtYXJrZXJzIi8+JiN4YTsgICAgICA8L2c+JiN4YTsgICAgPC9nPiYjeGE7ICA8L2c+JiN4YTs8L3N2Zz4=" preserveAspectRatio="none" pointer-events="none"/><image x="320" y="530.5" width="135" height="38" xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTM1LjIyOTMybW0iIGhlaWdodD0iMzcuNTE5NTc3bW0iIHZpZXdCb3g9IjAgMCAxMzUuMjI5MzIgMzcuNTE5NTc4IiB2ZXJzaW9uPSIxLjEiIGlkPSJzdmc4Ij4mI3hhOyAgPGRlZnMgaWQ9ImRlZnMyIj4mI3hhOyAgICA8ZmlsdGVyIHN0eWxlPSJjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM6c1JHQiIgaWQ9ImZpbHRlcjQxODMiPiYjeGE7ICAgICAgPGZlQmxlbmQgbW9kZT0ibGlnaHRlbiIgaW4yPSJCYWNrZ3JvdW5kSW1hZ2UiIGlkPSJmZUJsZW5kNDE4NSIvPiYjeGE7ICAgIDwvZmlsdGVyPiYjeGE7ICAgIDxmaWx0ZXIgc3R5bGU9ImNvbG9yLWludGVycG9sYXRpb24tZmlsdGVyczpzUkdCIiBpZD0iZmlsdGVyNDE4My00Ij4mI3hhOyAgICAgIDxmZUJsZW5kIG1vZGU9ImxpZ2h0ZW4iIGluMj0iQmFja2dyb3VuZEltYWdlIiBpZD0iZmVCbGVuZDQxODUtNiIvPiYjeGE7ICAgIDwvZmlsdGVyPiYjeGE7ICAgIDxmaWx0ZXIgc3R5bGU9ImNvbG9yLWludGVycG9sYXRpb24tZmlsdGVyczpzUkdCIiBpZD0iZmlsdGVyNDMyNiI+JiN4YTsgICAgICA8ZmVCbGVuZCBtb2RlPSJsaWdodGVuIiBpbjI9IkJhY2tncm91bmRJbWFnZSIgaWQ9ImZlQmxlbmQ0MzI4Ii8+JiN4YTsgICAgPC9maWx0ZXI+JiN4YTsgIDwvZGVmcz4mI3hhOyAgPG1ldGFkYXRhIGlkPSJtZXRhZGF0YTUiPiYjeGE7ICAgIDxyZGY6UkRGPiYjeGE7ICAgICAgPGNjOldvcmsgcmRmOmFib3V0PSIiPiYjeGE7ICAgICAgICA8ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD4mI3hhOyAgICAgICAgPGRjOnR5cGUgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIvPiYjeGE7ICAgICAgICA8ZGM6dGl0bGUvPiYjeGE7ICAgICAgPC9jYzpXb3JrPiYjeGE7ICAgIDwvcmRmOlJERj4mI3hhOyAgPC9tZXRhZGF0YT4mI3hhOyAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTE5LjE3ODE2NSwtMTI3LjQyMDU2KSIgaWQ9ImcxMTM2Ij4mI3hhOyAgICA8cmVjdCBzdHlsZT0ib3BhY2l0eToxO2ZpbGw6I2I5YjliOTtmaWxsLW9wYWNpdHk6MTtzdHJva2U6IzdlN2U3ZTtzdHJva2Utd2lkdGg6Ni42ODg4NDQyO3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoxO3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxO3BhaW50LW9yZGVyOnN0cm9rZSBtYXJrZXJzIGZpbGwiIGlkPSJyZWN0ODI2IiB3aWR0aD0iMTI4LjU0MDQ4IiBoZWlnaHQ9IjMwLjgzMDczNCIgeD0iMjIuNTIyNTg3IiB5PSIxMzAuNzY0OTgiLz4mI3hhOyAgICA8cmVjdCBzdHlsZT0ib3BhY2l0eToxO2ZpbGw6bm9uZTtmaWxsLW9wYWNpdHk6MTtzdHJva2U6IzRiNGI0YjtzdHJva2Utd2lkdGg6MC43OTM3NDk5OTtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MTtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MTtwYWludC1vcmRlcjpzdHJva2UgbWFya2VycyBmaWxsIiBpZD0icmVjdDExMjQiIHdpZHRoPSIxMjguNTQwNDciIGhlaWdodD0iMzAuODMwNzM0IiB4PSIyMi41MjI1ODciIHk9IjEzMC43NjQ5OCIvPiYjeGE7ICA8L2c+JiN4YTsgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC03LjIwNTM1MjhlLTcsNy45NzExMTUxZS02KSIgaWQ9Imc4OTUiPiYjeGE7ICAgIDxnIGlkPSJnODg5Ij4mI3hhOyAgICAgIDxyZWN0IHRyYW5zZm9ybT0ibWF0cml4KC0wLjAwNTg1MzM2LDAuOTk5OTgyODcsLTAuOTk5OTk3NTMsLTAuMDAyMjIxNzQsMCwwKSIgcnk9IjAuODE1MDEzODMiIHk9Ii0zOC4zMzg0NyIgeD0iMTEuNjA5NTg2IiBoZWlnaHQ9IjI3LjI2NTY4OCIgd2lkdGg9IjMuMzE5NjUwMiIgaWQ9InJlY3Q4MjgtNyIgc3R5bGU9Im9wYWNpdHk6MTtmaWxsOiM3ZTdlN2U7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiM0YjRiNGI7c3Ryb2tlLXdpZHRoOjEuMzQ4MzUyNzk7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjE7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjE7cGFpbnQtb3JkZXI6c3Ryb2tlIGZpbGwgbWFya2VycyIvPiYjeGE7ICAgICAgPHJlY3QgdHJhbnNmb3JtPSJtYXRyaXgoLTAuMDA1ODUzMzYsMC45OTk5ODI4NywtMC45OTk5OTc1MywtMC4wMDIyMjE3NCwwLDApIiByeT0iMC44MTUwMTM4MyIgeT0iLTM4LjQwMjEwMyIgeD0iMjIuNDgxMDQ3IiBoZWlnaHQ9IjI3LjI2NTY4OCIgd2lkdGg9IjMuMzE5NjUwMiIgaWQ9InJlY3Q4MjgtNy0zIiBzdHlsZT0ib3BhY2l0eToxO2ZpbGw6IzdlN2U3ZTtmaWxsLW9wYWNpdHk6MTtzdHJva2U6IzRiNGI0YjtzdHJva2Utd2lkdGg6MS4zNDgzNTI3OTtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MTtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MTtwYWludC1vcmRlcjpzdHJva2UgZmlsbCBtYXJrZXJzIi8+JiN4YTsgICAgPC9nPiYjeGE7ICAgIDxjaXJjbGUgc3R5bGU9Im9wYWNpdHk6MTtmaWxsOiM3ZTdlN2U7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiM0YjRiNGI7c3Ryb2tlLXdpZHRoOjEuMzQ4MzE2Njc7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjE7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjE7cGFpbnQtb3JkZXI6c3Ryb2tlIG1hcmtlcnMgZmlsbCIgaWQ9InBhdGg4ODMiIGN4PSIxMDguNjM0MjIiIGN5PSIxOC43NTk3ODEiIHI9IjkuMDE1Mjg4NCIvPiYjeGE7ICA8L2c+JiN4YTs8L3N2Zz4=" preserveAspectRatio="none" pointer-events="none"/><image x="320" y="480" width="135" height="38" xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBpZD0ic3ZnOCIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMTM1LjIyOTMyIDM3LjUxOTU3OCIgaGVpZ2h0PSIzNy41MTk1NzdtbSIgd2lkdGg9IjEzNS4yMjkzMm1tIj4mI3hhOyAgPGRlZnMgaWQ9ImRlZnMyIj4mI3hhOyAgICA8ZmlsdGVyIGlkPSJmaWx0ZXI0MTgzIiBzdHlsZT0iY29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzOnNSR0IiPiYjeGE7ICAgICAgPGZlQmxlbmQgaWQ9ImZlQmxlbmQ0MTg1IiBpbjI9IkJhY2tncm91bmRJbWFnZSIgbW9kZT0ibGlnaHRlbiIvPiYjeGE7ICAgIDwvZmlsdGVyPiYjeGE7ICAgIDxmaWx0ZXIgaWQ9ImZpbHRlcjQxODMtNCIgc3R5bGU9ImNvbG9yLWludGVycG9sYXRpb24tZmlsdGVyczpzUkdCIj4mI3hhOyAgICAgIDxmZUJsZW5kIGlkPSJmZUJsZW5kNDE4NS02IiBpbjI9IkJhY2tncm91bmRJbWFnZSIgbW9kZT0ibGlnaHRlbiIvPiYjeGE7ICAgIDwvZmlsdGVyPiYjeGE7ICAgIDxmaWx0ZXIgaWQ9ImZpbHRlcjQzMjYiIHN0eWxlPSJjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM6c1JHQiI+JiN4YTsgICAgICA8ZmVCbGVuZCBpZD0iZmVCbGVuZDQzMjgiIGluMj0iQmFja2dyb3VuZEltYWdlIiBtb2RlPSJsaWdodGVuIi8+JiN4YTsgICAgPC9maWx0ZXI+JiN4YTsgIDwvZGVmcz4mI3hhOyAgPG1ldGFkYXRhIGlkPSJtZXRhZGF0YTUiPiYjeGE7ICAgIDxyZGY6UkRGPiYjeGE7ICAgICAgPGNjOldvcmsgcmRmOmFib3V0PSIiPiYjeGE7ICAgICAgICA8ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD4mI3hhOyAgICAgICAgPGRjOnR5cGUgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIvPiYjeGE7ICAgICAgICA8ZGM6dGl0bGUvPiYjeGE7ICAgICAgPC9jYzpXb3JrPiYjeGE7ICAgIDwvcmRmOlJERj4mI3hhOyAgPC9tZXRhZGF0YT4mI3hhOyAgPHJlY3Qgc3R5bGU9Im9wYWNpdHk6MTtmaWxsOiNiOWI5Yjk7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiM3ZTdlN2U7c3Ryb2tlLXdpZHRoOjYuNjg4ODQ0MjtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MTtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MTtwYWludC1vcmRlcjpzdHJva2UgbWFya2VycyBmaWxsIiBpZD0icmVjdDgyNiIgd2lkdGg9IjEyOC41NDA0OCIgaGVpZ2h0PSIzMC44MzA3MzQiIHg9IjMuMzQ0NDIxOSIgeT0iMy4zNDQ0MjQyIi8+JiN4YTsgIDxyZWN0IHN0eWxlPSJvcGFjaXR5OjE7ZmlsbDpub25lO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojNGI0YjRiO3N0cm9rZS13aWR0aDowLjc5Mzc0OTk5O3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoxO3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxO3BhaW50LW9yZGVyOnN0cm9rZSBtYXJrZXJzIGZpbGwiIGlkPSJyZWN0MTEyNCIgd2lkdGg9IjEyOC41NDA0NyIgaGVpZ2h0PSIzMC44MzA3MzQiIHg9IjMuMzQ0NDIxOSIgeT0iMy4zNDQ0MjQyIi8+JiN4YTsgIDxjaXJjbGUgc3R5bGU9Im9wYWNpdHk6MTtmaWxsOiM3ZTdlN2U7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiM0YjRiNGI7c3Ryb2tlLXdpZHRoOjEuMDU4MzMzMjg7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjE7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjE7cGFpbnQtb3JkZXI6c3Ryb2tlIG1hcmtlcnMgZmlsbCIgaWQ9InBhdGg4ODMiIGN4PSIxOC4yNTk0NDciIGN5PSIxOC43NTk3OSIgcj0iNS4zMDgyNjUyIi8+JiN4YTsgIDxyZWN0IHJ5PSIwLjUwMjExOTkiIHk9IjEwLjM2MDc2NSIgeD0iMTIxLjY5MjAyIiBoZWlnaHQ9IjE2Ljc5ODA1MiIgd2lkdGg9IjMuMzE5NjE0NiIgaWQ9InJlY3Q4MjgtMyIgc3R5bGU9Im9wYWNpdHk6MTtmaWxsOiM3ZTdlN2U7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiM0YjRiNGI7c3Ryb2tlLXdpZHRoOjEuMDU4MzMzMjg7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjE7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjE7cGFpbnQtb3JkZXI6c3Ryb2tlIGZpbGwgbWFya2VycyIvPiYjeGE7ICA8cmVjdCByeT0iMC41MDIxMTk5IiB5PSIxMC4zNjA3NjUiIHg9IjExMi40NDg1OSIgaGVpZ2h0PSIxNi43OTgwNTIiIHdpZHRoPSIzLjMxOTYxNDYiIGlkPSJyZWN0ODI4LTMtNSIgc3R5bGU9Im9wYWNpdHk6MTtmaWxsOiM3ZTdlN2U7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiM0YjRiNGI7c3Ryb2tlLXdpZHRoOjEuMDU4MzMzMjg7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjE7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjE7cGFpbnQtb3JkZXI6c3Ryb2tlIGZpbGwgbWFya2VycyIvPiYjeGE7ICA8cmVjdCByeT0iMC41MDIxMTk5IiB5PSIxMC4zNjA3NjUiIHg9IjEwMy4yMDUxOCIgaGVpZ2h0PSIxNi43OTgwNTIiIHdpZHRoPSIzLjMxOTYxNDYiIGlkPSJyZWN0ODI4LTMtNS02IiBzdHlsZT0ib3BhY2l0eToxO2ZpbGw6IzdlN2U3ZTtmaWxsLW9wYWNpdHk6MTtzdHJva2U6IzRiNGI0YjtzdHJva2Utd2lkdGg6MS4wNTgzMzMzMztzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MTtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MTtwYWludC1vcmRlcjpzdHJva2UgZmlsbCBtYXJrZXJzIi8+JiN4YTs8L3N2Zz4=" preserveAspectRatio="none" pointer-events="none"/><image x="-0.5" y="607.5" width="135" height="35" xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTM0LjY2NDJtbSIgaGVpZ2h0PSIzNC44Mjg3NjZtbSIgdmlld0JveD0iMCAwIDQ3Ny4xNTY2MSAxMjMuNDA5MDIiIGlkPSJzdmc3Nzc4IiB2ZXJzaW9uPSIxLjEiPiYjeGE7ICA8ZGVmcyBpZD0iZGVmczc3ODAiLz4mI3hhOyAgPG1ldGFkYXRhIGlkPSJtZXRhZGF0YTc3ODMiPiYjeGE7ICAgIDxyZGY6UkRGPiYjeGE7ICAgICAgPGNjOldvcmsgcmRmOmFib3V0PSIiPiYjeGE7ICAgICAgICA8ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD4mI3hhOyAgICAgICAgPGRjOnR5cGUgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIvPiYjeGE7ICAgICAgICA8ZGM6dGl0bGUvPiYjeGE7ICAgICAgPC9jYzpXb3JrPiYjeGE7ICAgIDwvcmRmOlJERj4mI3hhOyAgPC9tZXRhZGF0YT4mI3hhOyAgPGcgaWQ9Imc4ODgiPiYjeGE7ICAgIDxyZWN0IHN0eWxlPSJvcGFjaXR5OjE7ZmlsbDojZmRmZGZkO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojMmMyYzJjO3N0cm9rZS13aWR0aDo1LjQ5NjU2Mjk2O3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoyO3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxIiBpZD0icmVjdDQxMzYtMi0zLTMiIHdpZHRoPSI0NzEuNjYwMDYiIGhlaWdodD0iMTE3LjkxMjQ1IiB4PSIyLjc0ODI4MTUiIHk9IjIuNzQ4MjgxNSIgcnk9IjcuNTQ0MzczNSIvPiYjeGE7ICAgIDxyZWN0IGlkPSJyZWN0MzcyOS0zLTYiIHdpZHRoPSIzMjUuNzk3NjQiIGhlaWdodD0iNzkuMjIyOTM5IiB4PSIyNC4wMTk4NDIiIHk9IjIyLjA5MzAzOSIgc3R5bGU9ImZpbGw6I2ZkZmRmZDtzdHJva2U6IzJjMmMyYztzdHJva2Utd2lkdGg6My43NTAwMDA0ODtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxO2ZpbGwtb3BhY2l0eToxIiByeT0iNi4yMjQwNTE1Ii8+JiN4YTsgICAgPHBhdGggaWQ9InJlY3Q4NTQiIGQ9Im0gNDIwLjA0NzUzLDIzLjQwNTU3OSAzNS45NjYzNSwxNy4wNjA5OTUgLTM1Ljk2NjM1LDE3LjA2MDk5NCAtMC4yMTI1OSwtMC4xMDA0MTggMTBlLTYsLTEzLjE3NTExOSAtNTIuNDY5MTQsMC45MTc4MjggViAzNS43NjMzOSBsIDUyLjQ2OTE0LDAuOTE3NzI2IC0xMGUtNiwtMTMuMTc1MDE2IHoiIHN0eWxlPSJmaWxsOiMyYzJjMmM7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiMzYTNhM2E7c3Ryb2tlLXdpZHRoOjEuNjI5Mjg0OTg7c3Ryb2tlLWxpbmVjYXA6c3F1YXJlO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxO3BhaW50LW9yZGVyOm5vcm1hbCIvPiYjeGE7ICAgIDxwYXRoIGlkPSJyZWN0ODU0LTYiIGQ9Im0gNDAzLjMzMjAzLDY1Ljg4MTQ0OCAtMzUuOTY2MzUsMTcuMDYwOTk1IDM1Ljk2NjM1LDE3LjA2MDk5NyAwLjIxMjYsLTAuMTAwNDIxIC0xMGUtNiwtMTMuMTc1MTE5IDUyLjQ2OTE0LDAuOTE3ODI4IHYgLTkuNDA2NDY5IGwgLTUyLjQ2OTE0LDAuOTE3NzI2IDEwZS02LC0xMy4xNzUwMTYgeiIgc3R5bGU9ImZpbGw6IzJjMmMyYztmaWxsLW9wYWNpdHk6MTtzdHJva2U6IzNhM2EzYTtzdHJva2Utd2lkdGg6MS42MjkyODQ4NjtzdHJva2UtbGluZWNhcDpzcXVhcmU7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjE7cGFpbnQtb3JkZXI6bm9ybWFsIi8+JiN4YTsgIDwvZz4mI3hhOzwvc3ZnPg==" preserveAspectRatio="none" pointer-events="none"/><image x="-0.5" y="564.5" width="135" height="35" xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTM0LjY2NDJtbSIgaGVpZ2h0PSIzNC44Mjg3NjZtbSIgdmlld0JveD0iMCAwIDQ3Ny4xNTY2MSAxMjMuNDA5MDIiIGlkPSJzdmc3Nzc4IiB2ZXJzaW9uPSIxLjEiPiYjeGE7ICA8ZGVmcyBpZD0iZGVmczc3ODAiLz4mI3hhOyAgPG1ldGFkYXRhIGlkPSJtZXRhZGF0YTc3ODMiPiYjeGE7ICAgIDxyZGY6UkRGPiYjeGE7ICAgICAgPGNjOldvcmsgcmRmOmFib3V0PSIiPiYjeGE7ICAgICAgICA8ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD4mI3hhOyAgICAgICAgPGRjOnR5cGUgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIvPiYjeGE7ICAgICAgICA8ZGM6dGl0bGUvPiYjeGE7ICAgICAgPC9jYzpXb3JrPiYjeGE7ICAgIDwvcmRmOlJERj4mI3hhOyAgPC9tZXRhZGF0YT4mI3hhOyAgPGcgaWQ9Imc4MzEiPiYjeGE7ICAgIDxyZWN0IHN0eWxlPSJvcGFjaXR5OjE7ZmlsbDojZmRmZGZkO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojMmMyYzJjO3N0cm9rZS13aWR0aDo1LjQ5NjU2Mjk2O3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoyO3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxIiBpZD0icmVjdDQxMzYtMi0zLTMiIHdpZHRoPSI0NzEuNjYwMDYiIGhlaWdodD0iMTE3LjkxMjQ1IiB4PSIyLjc0ODI4MTUiIHk9IjIuNzQ4MjgxNSIgcnk9IjcuNTQ0MzczNSIvPiYjeGE7ICAgIDxyZWN0IGlkPSJyZWN0MzcyOS0zLTYiIHdpZHRoPSIzMjUuNzk3NjQiIGhlaWdodD0iNzkuMjIyOTM5IiB4PSIyNC4wMTk4NDIiIHk9IjIyLjA5MzAzOSIgc3R5bGU9ImZpbGw6I2ZkZmRmZDtzdHJva2U6IzJjMmMyYztzdHJva2Utd2lkdGg6My43NTAwMDA0ODtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxO2ZpbGwtb3BhY2l0eToxIiByeT0iNi4yMjQwNTE1Ii8+JiN4YTsgICAgPHBhdGggc3R5bGU9ImZpbGw6IzNhM2EzYTtmaWxsLW9wYWNpdHk6MTtzdHJva2U6IzJjMmMyYztzdHJva2Utd2lkdGg6MS45MTk3MTUyOTtzdHJva2UtbGluZWNhcDpidXR0O3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoyO3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxO3BhaW50LW9yZGVyOm5vcm1hbCIgZD0ibSA0MzUuNDMxNSwxNi4xNzk5MTYgYyAtMi44OTc1NywxLjE4MTE5OCAtNC43MDU5NSwzLjE1ODU0NCAtNS44MDY4OCw1LjY1Mjc0NiBsIDEyLjM2Mjc5LDE0LjU3OTc2OSAtNzQuNjA1NjEsLTAuNDcwNDE2IGMgLTEuMDcxNzksMi45ODk2ODQgLTEuMjM3MDEsNi4wNzY1MTMgMCw5LjMxMzYwMiBMIDQ0Mi4wMDQ4MSw0NC43ODUyMDEgNDI5LjUwMjkyLDU5LjMyMTUgYyAxLjAyMDQyLDIuOTEyMDM5IDMuMDM0NTUsNC43MDg1NjggNS43NjkyMSw1LjY5NjIxNiBsIDIwLjkzMTEyLC0yNC4zNDA0OTcgeiIgaWQ9InJlY3Q4NjQiLz4mI3hhOyAgICA8cGF0aCBzdHlsZT0iZmlsbDojM2EzYTNhO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojMmMyYzJjO3N0cm9rZS13aWR0aDoxLjkxOTcxNTI5O3N0cm9rZS1saW5lY2FwOmJ1dHQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjI7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjE7cGFpbnQtb3JkZXI6bm9ybWFsIiBkPSJtIDM4OC4xNTM4MiwxMDcuMjI5MSBjIDIuODk3NTcsLTEuMTgxMiA0LjcwNTk1LC0zLjE1ODU1IDUuODA2ODgsLTUuNjUyNzUgbCAtMTIuMzYyNzksLTE0LjU3OTc2OCA3NC42MDU2MSwwLjQ3MDQxNiBjIDEuMDcxNzksLTIuOTg5NjgzIDEuMjM3MDEsLTYuMDc2NTEyIDAsLTkuMzEzNjA0IGwgLTc0LjYyMywwLjQ3MDQxNSAxMi41MDE4OCwtMTQuNTM2MjkyIGMgLTEuMDIwNDEsLTIuOTEyMDQ3IC0zLjAzNDU0LC00LjcwODU3MyAtNS43NjkyMSwtNS42OTYyMTYgbCAtMjAuOTMxMTEsMjQuMzQwNDk1IHoiIGlkPSJyZWN0ODY0LTIiLz4mI3hhOyAgPC9nPiYjeGE7PC9zdmc+" preserveAspectRatio="none" pointer-events="none"/><image x="-0.5" y="522.5" width="135" height="35" xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIGlkPSJzdmc3Nzc4IiB2aWV3Qm94PSIwIDAgNDc3LjE1NjYxIDEyMy40MDkwMSIgaGVpZ2h0PSIzNC44Mjg3NjZtbSIgd2lkdGg9IjEzNC42NjQybW0iPiYjeGE7ICA8ZGVmcyBpZD0iZGVmczc3ODAiLz4mI3hhOyAgPG1ldGFkYXRhIGlkPSJtZXRhZGF0YTc3ODMiPiYjeGE7ICAgIDxyZGY6UkRGPiYjeGE7ICAgICAgPGNjOldvcmsgcmRmOmFib3V0PSIiPiYjeGE7ICAgICAgICA8ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD4mI3hhOyAgICAgICAgPGRjOnR5cGUgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIvPiYjeGE7ICAgICAgICA8ZGM6dGl0bGUvPiYjeGE7ICAgICAgPC9jYzpXb3JrPiYjeGE7ICAgIDwvcmRmOlJERj4mI3hhOyAgPC9tZXRhZGF0YT4mI3hhOyAgPGcgaWQ9Imc4NDEiPiYjeGE7ICAgIDxyZWN0IHN0eWxlPSJvcGFjaXR5OjE7ZmlsbDojZmRmZGZkO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojMmMyYzJjO3N0cm9rZS13aWR0aDo1LjQ5NjU2Mjk2O3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoyO3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxIiBpZD0icmVjdDQxMzYtMi0zIiB3aWR0aD0iNDcxLjY2MDA2IiBoZWlnaHQ9IjExNy45MTI0NSIgeD0iMi43NDgyODE1IiB5PSIyLjc0ODI4MTUiIHJ5PSI3LjU0NDM3MzUiLz4mI3hhOyAgICA8cmVjdCBpZD0icmVjdDM3MjktMy02IiB3aWR0aD0iMzI1Ljc5NzY0IiBoZWlnaHQ9Ijc5LjIyMjkzOSIgeD0iMjQuMDE5ODQyIiB5PSIyMi4wOTMwMzkiIHN0eWxlPSJmaWxsOiNmZGZkZmQ7c3Ryb2tlOiMyYzJjMmM7c3Ryb2tlLXdpZHRoOjMuNzUwMDAwNDg7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MTtmaWxsLW9wYWNpdHk6MSIgcnk9IjYuMjI0MDUxNSIvPiYjeGE7ICAgIDxwYXRoIHN0eWxlPSJmaWxsOiMzYTNhM2E7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiMyYzJjMmM7c3Ryb2tlLXdpZHRoOjEuNDUxOTE3MDU7c3Ryb2tlLWxpbmVjYXA6c3F1YXJlO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoyO3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxO3BhaW50LW9yZGVyOm5vcm1hbCIgZD0ibSAzODUuNzEwMTgsMTcuMDc2NzYyIC0xOS4yNjUzMSwxOS4xNzQwNzMgaCAxMi41MzAwMiB2IDEyLjgyNjA0IGwgMjIuMzAxODcsMTIuMzA4NzQ0IC0yMi4zMDE4NywxMi4zMDc0MzEgdiAxMi43ODI3MTMgaCAtMTIuNTMwMDIgbCAxOS4yNjUzMSwxOS4xNzQwNTcgMTkuMjY1MjksLTE5LjE3NDA1NyBoIC0xMi4wNzg4OSB2IC05LjYwMDE2IGwgMTguMjI0NTUsLTEwLjA1ODM4MiAxOC4yMjQ1NiwxMC4wNTgzODIgdiA5LjYwMDE2IGggLTEyLjA3ODkgbCAxOS4yNjUzLDE5LjE3NDA1NyAxOS4yNjUzMiwtMTkuMTc0MDU3IEggNDQzLjI2NjA2IFYgNzMuNjkzMDUgTCA0MjAuOTY0MTksNjEuMzg0MzA3IDQ0My4yNjYwNiw0OS4wNzY4NzUgdiAtMTIuODI2MDQgaCAxMi41MzEzNSBsIC0xOS4yNjUzMiwtMTkuMTc0MDczIC0xOS4yNjUzLDE5LjE3NDA3MyBoIDEyLjA3ODkgdiA5LjY0MzQ5MSBMIDQxMS4xMjExMyw1NS45NTI3MDMgMzkyLjg5NjU4LDQ1Ljg5NDMyNiB2IC05LjY0MzQ5MSBoIDEyLjA3ODg5IHoiIGlkPSJyZWN0ODE3LTkiLz4mI3hhOyAgPC9nPiYjeGE7PC9zdmc+" preserveAspectRatio="none" pointer-events="none"/><image x="60.5" y="202.5" width="41" height="41" xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNDEuMzM3NzA4bW0iIGhlaWdodD0iNDEuMjcwOTkybW0iIHZpZXdCb3g9IjAgMCAxNDYuNDcyMiAxNDYuMjM1ODEiIGlkPSJzdmc3Nzc4IiB2ZXJzaW9uPSIxLjEiPiYjeGE7ICA8ZGVmcyBpZD0iZGVmczc3ODAiLz4mI3hhOyAgPG1ldGFkYXRhIGlkPSJtZXRhZGF0YTc3ODMiPiYjeGE7ICAgIDxyZGY6UkRGPiYjeGE7ICAgICAgPGNjOldvcmsgcmRmOmFib3V0PSIiPiYjeGE7ICAgICAgICA8ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD4mI3hhOyAgICAgICAgPGRjOnR5cGUgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIvPiYjeGE7ICAgICAgICA8ZGM6dGl0bGUvPiYjeGE7ICAgICAgPC9jYzpXb3JrPiYjeGE7ICAgIDwvcmRmOlJERj4mI3hhOyAgPC9tZXRhZGF0YT4mI3hhOyAgPGcgaWQ9Imc0NTM5Ij4mI3hhOyAgICA8cmVjdCBzdHlsZT0ib3BhY2l0eToxO2ZpbGw6I2RkZGRkZDtmaWxsLW9wYWNpdHk6MTtzdHJva2U6IzBjM2M4NjtzdHJva2Utd2lkdGg6NS42NDY1ODg4O3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoyO3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxIiBpZD0icmVjdDQxMzYtMi0zLTMiIHdpZHRoPSIxNDAuODI1NjEiIGhlaWdodD0iMTQwLjU4OTIyIiB4PSIyLjgyMzI5NDQiIHk9IjIuODIzMjk0MiIgcnk9IjguOTk1Mjk2NSIvPiYjeGE7ICAgIDxnIGlkPSJnNDUzMyIgdHJhbnNmb3JtPSJtYXRyaXgoMC45NzI2MzkzMiwwLDAsMSwxLjY5NjY1NCwwKSI+JiN4YTsgICAgICA8cGF0aCBzdHlsZT0iZmlsbDojMTA0ZWFkO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojMGMzYzg2O3N0cm9rZS13aWR0aDoxLjk4MTIwOTI4O3N0cm9rZS1saW5lY2FwOnNxdWFyZTtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MTtwYWludC1vcmRlcjpub3JtYWwiIGQ9Ik0gODMuODE5NDI3LDI4LjM5NjAwNSAxMjkuMzYzMjQsNDguMzE4MjMyIDgzLjgxOTQyNyw2OC4yNDA0NiA4My41NTAyMjEsNjguMTIzMjAxIDgzLjU1MDIzMyw1Mi43Mzg1MzQgMTcuMTA5MTA1LDUzLjgxMDI4OCBWIDQyLjgyNjI5NiBsIDY2LjQ0MTEyOCwxLjA3MTYzNCAtMS4yZS01LC0xNS4zODQ1NDcgeiIgaWQ9InJlY3Q4NTQiLz4mI3hhOyAgICAgIDxwYXRoIHN0eWxlPSJmaWxsOiMxMDRlYWQ7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiMwYzNjODY7c3Ryb2tlLXdpZHRoOjEuOTgxMjA5MTY7c3Ryb2tlLWxpbmVjYXA6c3F1YXJlO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxO3BhaW50LW9yZGVyOm5vcm1hbCIgZD0ibSA2Mi42NTI3NjEsNzcuOTk1MzM2IC00NS41NDM4MTIsMTkuOTIyMjI4IDQ1LjU0MzgxMiwxOS45MjIyMjYgMC4yNjkyMDUsLTAuMTE3MjYgLTEuMmUtNSwtMTUuMzg0NjYgNjYuNDQxMTI2LDEuMDcxNzUgViA5Mi40MjU2MjggbCAtNjYuNDQxMTI2LDEuMDcxNjM0IDEuMmUtNSwtMTUuMzg0NTQ3IHoiIGlkPSJyZWN0ODU0LTYiLz4mI3hhOyAgICA8L2c+JiN4YTsgIDwvZz4mI3hhOzwvc3ZnPg==" preserveAspectRatio="none" pointer-events="none"/><image x="1.5" y="203.5" width="41" height="41" xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNDEuMzM3NzA4bW0iIGhlaWdodD0iNDEuMjcwOTkybW0iIHZpZXdCb3g9IjAgMCAxNDYuNDcyMiAxNDYuMjM1ODEiIGlkPSJzdmc3Nzc4IiB2ZXJzaW9uPSIxLjEiPiYjeGE7ICA8ZGVmcyBpZD0iZGVmczc3ODAiLz4mI3hhOyAgPG1ldGFkYXRhIGlkPSJtZXRhZGF0YTc3ODMiPiYjeGE7ICAgIDxyZGY6UkRGPiYjeGE7ICAgICAgPGNjOldvcmsgcmRmOmFib3V0PSIiPiYjeGE7ICAgICAgICA8ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD4mI3hhOyAgICAgICAgPGRjOnR5cGUgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIvPiYjeGE7ICAgICAgICA8ZGM6dGl0bGUvPiYjeGE7ICAgICAgPC9jYzpXb3JrPiYjeGE7ICAgIDwvcmRmOlJERj4mI3hhOyAgPC9tZXRhZGF0YT4mI3hhOyAgPGcgaWQ9Imc4MTgiPiYjeGE7ICAgIDxyZWN0IHN0eWxlPSJvcGFjaXR5OjE7ZmlsbDojZmRmZGZkO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojMmMyYzJjO3N0cm9rZS13aWR0aDo1LjY0NjU4ODg7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjI7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiIGlkPSJyZWN0NDEzNi0yLTMtMyIgd2lkdGg9IjE0MC44MjU2MSIgaGVpZ2h0PSIxNDAuNTg5MjIiIHg9IjIuODIzMjk0NCIgeT0iMi44MjMyOTQyIiByeT0iOC45OTUyOTY1Ii8+JiN4YTsgICAgPHBhdGggaWQ9InJlY3Q4NTQiIGQ9Im0gODMuMjIyNzI0LDI4LjM5NjAwNSA0NC4yOTc3MDYsMTkuOTIyMjI3IC00NC4yOTc3MDYsMTkuOTIyMjI4IC0wLjI2MTg0LC0wLjExNzI1OSAxLjJlLTUsLTE1LjM4NDY2NyAtNjQuNjIzMjU0LDEuMDcxNzU0IFYgNDIuODI2Mjk2IGwgNjQuNjIzMjU0LDEuMDcxNjM0IC0xLjJlLTUsLTE1LjM4NDU0NyB6IiBzdHlsZT0iZmlsbDojM2EzYTNhO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojMmMyYzJjO3N0cm9rZS13aWR0aDoxLjk1MzkxNzc0O3N0cm9rZS1saW5lY2FwOnNxdWFyZTtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MTtwYWludC1vcmRlcjpub3JtYWwiLz4mI3hhOyAgICA8cGF0aCBpZD0icmVjdDg1NC02IiBkPSJtIDYyLjYzNTE5Myw3Ny45OTUzMzYgLTQ0LjI5NzcwMiwxOS45MjIyMjggNDQuMjk3NzAyLDE5LjkyMjIyNiAwLjI2MTgzOSwtMC4xMTcyNiAtMS4xZS01LC0xNS4zODQ2NiA2NC42MjMyNDksMS4wNzE3NSBWIDkyLjQyNTYyOCBsIC02NC42MjMyNDksMS4wNzE2MzQgMS4xZS01LC0xNS4zODQ1NDcgeiIgc3R5bGU9ImZpbGw6IzNhM2EzYTtmaWxsLW9wYWNpdHk6MTtzdHJva2U6IzJjMmMyYztzdHJva2Utd2lkdGg6MS45NTM5MTc2MjtzdHJva2UtbGluZWNhcDpzcXVhcmU7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjE7cGFpbnQtb3JkZXI6bm9ybWFsIi8+JiN4YTsgIDwvZz4mI3hhOzwvc3ZnPg==" preserveAspectRatio="none" pointer-events="none"/><image x="60.5" y="151.5" width="41" height="41" xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIGlkPSJzdmc3Nzc4IiB2aWV3Qm94PSIwIDAgMTQ2LjQ3MjIgMTQ2LjIzNTgxIiBoZWlnaHQ9IjQxLjI3MDk5Mm1tIiB3aWR0aD0iNDEuMzM3NzA4bW0iPiYjeGE7ICA8ZGVmcyBpZD0iZGVmczc3ODAiLz4mI3hhOyAgPG1ldGFkYXRhIGlkPSJtZXRhZGF0YTc3ODMiPiYjeGE7ICAgIDxyZGY6UkRGPiYjeGE7ICAgICAgPGNjOldvcmsgcmRmOmFib3V0PSIiPiYjeGE7ICAgICAgICA8ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD4mI3hhOyAgICAgICAgPGRjOnR5cGUgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIvPiYjeGE7ICAgICAgICA8ZGM6dGl0bGUvPiYjeGE7ICAgICAgPC9jYzpXb3JrPiYjeGE7ICAgIDwvcmRmOlJERj4mI3hhOyAgPC9tZXRhZGF0YT4mI3hhOyAgPHJlY3Qgc3R5bGU9Im9wYWNpdHk6MTtmaWxsOiNkZGRkZGQ7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiMwYzNjODY7c3Ryb2tlLXdpZHRoOjUuNjQ2NTg4ODtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MjtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIgaWQ9InJlY3Q0MTM2LTItMy0zIiB3aWR0aD0iMTQwLjgyNTYxIiBoZWlnaHQ9IjE0MC41ODkyMiIgeD0iMi44MjMyOTQ0IiB5PSIyLjgyMzI5NDIiIHJ5PSI4Ljk5NTI5NjUiLz4mI3hhOyAgPGcgaWQ9ImcxMDE0IiB0cmFuc2Zvcm09Im1hdHJpeCgwLjk0NjM5NjI1LDAsMCwxLDMuMzEyMjU0Miw0LjczMjU5MzhlLTYpIj4mI3hhOyAgICA8cGF0aCBpZD0icmVjdDg2NCIgZD0ibSAxMDMuMTExNDEsMTkuNDI2MDE3IGMgLTMuNjYyMDEzLDEuMzkzMTA5IC01Ljk0NzQ4NCwzLjcyNTE5OSAtNy4zMzg4NjksNi42NjY4NyBsIDE1LjYyNDM4OSwxNy4xOTU0MzcgLTk0LjI4ODMzNiwtMC41NTQ4MSBjIC0xLjM1NDU1MSwzLjUyNjA0NSAtMS41NjMzNTcsNy4xNjY2NjMgMCwxMC45ODQ0OTggTCAxMTEuNDE4OTEsNTMuMTYzMjAyIDk1LjYxODczMiw3MC4zMDczNyBjIDEuMjg5NjI5LDMuNDM0NDcgMy44MzUxMzEsNS41NTMzMDMgNy4yOTEyNjgsNi43MTgxMzkgbCAyNi40NTMyNCwtMjguNzA3Mjc3IHoiIHN0eWxlPSJmaWxsOiMxMDRlYWQ7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiMwYzNjODY7c3Ryb2tlLXdpZHRoOjIuMzQzNzUwMjQ7c3Ryb2tlLWxpbmVjYXA6YnV0dDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MjtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MTtwYWludC1vcmRlcjpub3JtYWwiLz4mI3hhOyAgICA8cGF0aCBpZD0icmVjdDg2NC0yIiBkPSJtIDQzLjM2MDc2OSwxMjYuODA5NzggYyAzLjY2MjAxLC0xLjM5MzExIDUuOTQ3NDksLTMuNzI1MiA3LjMzODg3LC02LjY2Njg3IGwgLTE1LjYyNDM5LC0xNy4xOTU0NCA5NC4yODgzMzEsMC41NTQ4MSBjIDEuMzU0NTUsLTMuNTI2MDQzIDEuNTYzMzYsLTcuMTY2NjYyIDAsLTEwLjk4NDUwMSBsIC05NC4zMTAzMTEsMC41NTQ4MSAxNS44MDAxOCwtMTcuMTQ0MTYgYyAtMS4yODk2MywtMy40MzQ0OCAtMy44MzUxMywtNS41NTMzMSAtNy4yOTEyNywtNi43MTgxNCBsIC0yNi40NTMyMywyOC43MDcyNzUgeiIgc3R5bGU9ImZpbGw6IzEwNGVhZDtmaWxsLW9wYWNpdHk6MTtzdHJva2U6IzBjM2M4NjtzdHJva2Utd2lkdGg6Mi4zNDM3NTAyNDtzdHJva2UtbGluZWNhcDpidXR0O3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoyO3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxO3BhaW50LW9yZGVyOm5vcm1hbCIvPiYjeGE7ICA8L2c+JiN4YTs8L3N2Zz4=" preserveAspectRatio="none" pointer-events="none"/><image x="1.5" y="152.5" width="41" height="41" xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIGlkPSJzdmc3Nzc4IiB2aWV3Qm94PSIwIDAgMTQ2LjQ3MjE5IDE0Ni4yMzU4MSIgaGVpZ2h0PSI0MS4yNzA5OTJtbSIgd2lkdGg9IjQxLjMzNzcwNG1tIj4mI3hhOyAgPGRlZnMgaWQ9ImRlZnM3NzgwIi8+JiN4YTsgIDxtZXRhZGF0YSBpZD0ibWV0YWRhdGE3NzgzIj4mI3hhOyAgICA8cmRmOlJERj4mI3hhOyAgICAgIDxjYzpXb3JrIHJkZjphYm91dD0iIj4mI3hhOyAgICAgICAgPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+JiN4YTsgICAgICAgIDxkYzp0eXBlIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiLz4mI3hhOyAgICAgICAgPGRjOnRpdGxlLz4mI3hhOyAgICAgIDwvY2M6V29yaz4mI3hhOyAgICA8L3JkZjpSREY+JiN4YTsgIDwvbWV0YWRhdGE+JiN4YTsgIDxnIGlkPSJnODE4Ij4mI3hhOyAgICA8cmVjdCByeT0iOC45OTUyOTY1IiB5PSIyLjgyMzI5NDIiIHg9IjIuODIzMjk0NCIgaGVpZ2h0PSIxNDAuNTg5MjIiIHdpZHRoPSIxNDAuODI1NjEiIGlkPSJyZWN0NDEzNi0yLTMtMyIgc3R5bGU9Im9wYWNpdHk6MTtmaWxsOiNmZGZkZmQ7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiMyYzJjMmM7c3Ryb2tlLXdpZHRoOjUuNjQ2NTg4ODtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MjtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIvPiYjeGE7ICAgIDxwYXRoIGlkPSJyZWN0ODY0IiBkPSJtIDEwMC44OTY1MSwxOS40MjYwMjIgYyAtMy40NjU3MTksMS4zOTMxMDkgLTUuNjI4NjgxLDMuNzI1MTk5IC02Ljk0NTQ4Miw2LjY2Njg3IGwgMTQuNzg2ODYyLDE3LjE5NTQzNyAtODkuMjM0MTI3LC0wLjU1NDgxIGMgLTEuMjgxOTQyLDMuNTI2MDQ1IC0xLjQ3OTU1NSw3LjE2NjY2MyAwLDEwLjk4NDQ5OCBsIDg5LjI1NDkyNywtMC41NTQ4MSAtMTQuOTUzMjI2LDE3LjE0NDE2OCBjIDEuMjIwNSwzLjQzNDQ3IDMuNjI5NTUzLDUuNTUzMzAzIDYuOTAwNDI2LDYuNzE4MTM5IGwgMjUuMDM1MjUsLTI4LjcwNzI3NyB6IiBzdHlsZT0iZmlsbDojM2EzYTNhO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojMmMyYzJjO3N0cm9rZS13aWR0aDoyLjI4MDA2ODE2O3N0cm9rZS1saW5lY2FwOmJ1dHQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjI7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjE7cGFpbnQtb3JkZXI6bm9ybWFsIi8+JiN4YTsgICAgPHBhdGggaWQ9InJlY3Q4NjQtMiIgZD0ibSA0NC4zNDg3MjMsMTI2LjgwOTc4IGMgMy40NjU3MTMsLTEuMzkzMTEgNS42Mjg2ODMsLTMuNzI1MiA2Ljk0NTQ3OSwtNi42NjY4NyBsIC0xNC43ODY4NjQsLTE3LjE5NTQ0IDg5LjIzNDEyMiwwLjU1NDgxIGMgMS4yODE5NCwtMy41MjYwMzggMS40Nzk1NiwtNy4xNjY2NTcgMCwtMTAuOTg0NDk2IGwgLTg5LjI1NDkyMywwLjU1NDgxIDE0Ljk1MzIzMSwtMTcuMTQ0MTYgYyAtMS4yMjA1MDEsLTMuNDM0NDggLTMuNjI5NTUzLC01LjU1MzMxIC02LjkwMDQzMSwtNi43MTgxNCBMIDE5LjUwNDA5OSw5Ny45MTc1NjkgWiIgc3R5bGU9ImZpbGw6IzNhM2EzYTtmaWxsLW9wYWNpdHk6MTtzdHJva2U6IzJjMmMyYztzdHJva2Utd2lkdGg6Mi4yODAwNjgxNjtzdHJva2UtbGluZWNhcDpidXR0O3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoyO3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxO3BhaW50LW9yZGVyOm5vcm1hbCIvPiYjeGE7ICA8L2c+JiN4YTs8L3N2Zz4=" preserveAspectRatio="none" pointer-events="none"/><image x="60.5" y="101.5" width="41" height="41" xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIGlkPSJzdmc2MzE1IiB2aWV3Qm94PSIwIDAgMTQ2LjQ3MjE5IDE0Ni40NzIyIiBoZWlnaHQ9IjQxLjMzNzcwOG1tIiB3aWR0aD0iNDEuMzM3NzA4bW0iPiYjeGE7ICA8ZGVmcyBpZD0iZGVmczYzMTciLz4mI3hhOyAgPG1ldGFkYXRhIGlkPSJtZXRhZGF0YTYzMjAiPiYjeGE7ICAgIDxyZGY6UkRGPiYjeGE7ICAgICAgPGNjOldvcmsgcmRmOmFib3V0PSIiPiYjeGE7ICAgICAgICA8ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD4mI3hhOyAgICAgICAgPGRjOnR5cGUgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIvPiYjeGE7ICAgICAgICA8ZGM6dGl0bGUvPiYjeGE7ICAgICAgPC9jYzpXb3JrPiYjeGE7ICAgIDwvcmRmOlJERj4mI3hhOyAgPC9tZXRhZGF0YT4mI3hhOyAgPHJlY3Qgcnk9IjguOTU2NDMwNCIgeT0iLTE0My4yMjY5OSIgeD0iLTE0My4yMjY5OSIgaGVpZ2h0PSIxMzkuOTgxNzgiIHdpZHRoPSIxMzkuOTgxNzgiIGlkPSJyZWN0NDEzNi0yLTMtOS02IiBzdHlsZT0ib3BhY2l0eTowLjk1OTk5OTk1O2ZpbGw6I2RkZGRkZDtmaWxsLW9wYWNpdHk6MTtzdHJva2U6IzBjM2M4NjtzdHJva2Utd2lkdGg6Ni40OTA0MTMxOTtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MjtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIgdHJhbnNmb3JtPSJzY2FsZSgtMSkiLz4mI3hhOyAgPHBhdGggaWQ9InJlY3Q4MTctOSIgZD0iTSA0MS4zNDkzMTIsMTguNzAwMzc5IDE3LjY0MTc0OSw0Mi4xNDE4MjIgSCAzMy4wNjEwMDIgViA1Ny44MjI0MTkgTCA2MC41MDUyOSw3Mi44NzA1OTIgMzMuMDYxMDAyLDg3LjkxNzE2IHYgMTUuNjI3NjIgSCAxNy42NDE3NDkgbCAyMy43MDc1NjMsMjMuNDQxNDUgMjMuNzA3NTU3LC0yMy40NDE0NSBIIDUwLjE5Mjc4NCBWIDkxLjgwODAyIGwgMjIuNDI2ODE0LC0xMi4yOTY5NyAyMi40MjY4MiwxMi4yOTY5NyB2IDExLjczNjc2IEggODAuMTgyMzE2IGwgMjMuNzA3NTY0LDIzLjQ0MTQ1IDIzLjcwNzU3LC0yMy40NDE0NSBIIDExMi4xNzY1OCBWIDg3LjkxNzE2IEwgODQuNzMyMjg5LDcyLjg2ODk4OSAxMTIuMTc2NTgsNTcuODIyNDE5IFYgNDIuMTQxODIyIGggMTUuNDIwODcgTCAxMDMuODg5ODgsMTguNzAwMzc5IDgwLjE4MjMxNiw0Mi4xNDE4MjIgSCA5NS4wNDY0MTggViA1My45MzE1NjQgTCA3Mi42MTk1OTgsNjYuMjI4NTI4IDUwLjE5Mjc4NCw1My45MzE1NjQgViA0Mi4xNDE4MjIgaCAxNC44NjQwODUgeiIgc3R5bGU9ImZpbGw6IzEwNGVhZDtmaWxsLW9wYWNpdHk6MTtzdHJva2U6IzBjM2M4NjtzdHJva2Utd2lkdGg6MS43ODA4Njk3MjtzdHJva2UtbGluZWNhcDpzcXVhcmU7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjI7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjE7cGFpbnQtb3JkZXI6bm9ybWFsIi8+JiN4YTs8L3N2Zz4=" preserveAspectRatio="none" pointer-events="none"/><image x="1.5" y="101.5" width="41" height="41" xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNDEuMzM3NzA4bW0iIGhlaWdodD0iNDEuMzM3NzA4bW0iIHZpZXdCb3g9IjAgMCAxNDYuNDcyMTkgMTQ2LjQ3MjIiIGlkPSJzdmc2MzE1IiB2ZXJzaW9uPSIxLjEiPiYjeGE7ICA8ZGVmcyBpZD0iZGVmczYzMTciLz4mI3hhOyAgPG1ldGFkYXRhIGlkPSJtZXRhZGF0YTYzMjAiPiYjeGE7ICAgIDxyZGY6UkRGPiYjeGE7ICAgICAgPGNjOldvcmsgcmRmOmFib3V0PSIiPiYjeGE7ICAgICAgICA8ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD4mI3hhOyAgICAgICAgPGRjOnR5cGUgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIvPiYjeGE7ICAgICAgICA8ZGM6dGl0bGUvPiYjeGE7ICAgICAgPC9jYzpXb3JrPiYjeGE7ICAgIDwvcmRmOlJERj4mI3hhOyAgPC9tZXRhZGF0YT4mI3hhOyAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTIuMTQ1NzY3MmUtNiwtMi4xNDU3NjcyZS02KSIgaWQ9Imc4NzMiPiYjeGE7ICAgIDxyZWN0IHJ5PSI4Ljk1NjQzMDQiIHk9Ii0xNDMuMjI2OTkiIHg9Ii0xNDMuMjI2OTkiIGhlaWdodD0iMTM5Ljk4MTc4IiB3aWR0aD0iMTM5Ljk4MTc4IiBpZD0icmVjdDQxMzYtMi0zLTktNiIgc3R5bGU9Im9wYWNpdHk6MTtmaWxsOiNmZGZkZmQ7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiMyYzJjMmM7c3Ryb2tlLXdpZHRoOjYuNDkwNDEzMTk7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjI7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiIHRyYW5zZm9ybT0ic2NhbGUoLTEpIi8+JiN4YTsgICAgPHBhdGggaWQ9InJlY3Q4MTctOSIgZD0iTSA0MS4zNDkzMTIsMTguNzAwMzc5IDE3LjY0MTc0OSw0Mi4xNDE4MjIgSCAzMy4wNjEwMDIgViA1Ny44MjI0MTkgTCA2MC41MDUyOSw3Mi44NzA1OTIgMzMuMDYxMDAyLDg3LjkxNzE2IHYgMTUuNjI3NjIgSCAxNy42NDE3NDkgbCAyMy43MDc1NjMsMjMuNDQxNDUgMjMuNzA3NTU3LC0yMy40NDE0NSBIIDUwLjE5Mjc4NCBWIDkxLjgwODAyIGwgMjIuNDI2ODE0LC0xMi4yOTY5NyAyMi40MjY4MiwxMi4yOTY5NyB2IDExLjczNjc2IEggODAuMTgyMzE2IGwgMjMuNzA3NTY0LDIzLjQ0MTQ1IDIzLjcwNzU3LC0yMy40NDE0NSBIIDExMi4xNzY1OCBWIDg3LjkxNzE2IEwgODQuNzMyMjg5LDcyLjg2ODk4OSAxMTIuMTc2NTgsNTcuODIyNDE5IFYgNDIuMTQxODIyIGggMTUuNDIwODcgTCAxMDMuODg5ODgsMTguNzAwMzc5IDgwLjE4MjMxNiw0Mi4xNDE4MjIgSCA5NS4wNDY0MTggViA1My45MzE1NjQgTCA3Mi42MTk1OTgsNjYuMjI4NTI4IDUwLjE5Mjc4NCw1My45MzE1NjQgViA0Mi4xNDE4MjIgaCAxNC44NjQwODUgeiIgc3R5bGU9ImZpbGw6IzNhM2EzYTtmaWxsLW9wYWNpdHk6MTtzdHJva2U6IzJjMmMyYztzdHJva2Utd2lkdGg6MS43ODA4Njk3MjtzdHJva2UtbGluZWNhcDpzcXVhcmU7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjI7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjE7cGFpbnQtb3JkZXI6bm9ybWFsIi8+JiN4YTsgIDwvZz4mI3hhOzwvc3ZnPg==" preserveAspectRatio="none" pointer-events="none"/><image x="130" y="207.5" width="57" height="57" xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNTcuNDgzNTdtbSIgaGVpZ2h0PSI1Ny40ODM1N21tIiB2aWV3Qm94PSIwIDAgMjAzLjY4MTk0IDIwMy42ODE5NCIgaWQ9InN2ZzQzMjQiIHZlcnNpb249IjEuMSI+JiN4YTsgIDxkZWZzIGlkPSJkZWZzNDMyNiIvPiYjeGE7ICA8bWV0YWRhdGEgaWQ9Im1ldGFkYXRhNDMyOSI+JiN4YTsgICAgPHJkZjpSREY+JiN4YTsgICAgICA8Y2M6V29yayByZGY6YWJvdXQ9IiI+JiN4YTsgICAgICAgIDxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PiYjeGE7ICAgICAgICA8ZGM6dHlwZSByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIi8+JiN4YTsgICAgICAgIDxkYzp0aXRsZS8+JiN4YTsgICAgICA8L2NjOldvcms+JiN4YTsgICAgPC9yZGY6UkRGPiYjeGE7ICA8L21ldGFkYXRhPiYjeGE7ICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNDkuMDM2MDg3LC0zMDYuMjY0OTUpIiBpZD0iZzg0NTMiPiYjeGE7ICAgIDxjaXJjbGUgc3R5bGU9Im9wYWNpdHk6MTtmaWxsOiMxNDUxN2M7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiNiMmJiYzQ7c3Ryb2tlLXdpZHRoOjcuNTQyMzg5Mzk7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIgaWQ9InBhdGg0MTM2LTYtOSIgY3g9IjE1MC44NzcwNiIgY3k9IjQwOC4xMDU5MyIgcj0iOTguMDY5Nzc4Ii8+JiN4YTsgICAgPGcgaWQ9Imc4NDM4Ij4mI3hhOyAgICAgIDxyZWN0IHk9IjM1NS4yNDg3OCIgeD0iODUuMzc1NzI1IiBoZWlnaHQ9IjIxLjA3MTQyOCIgd2lkdGg9IjEzMC43MTQyOCIgaWQ9InJlY3Q1OTYzIiBzdHlsZT0ib3BhY2l0eToxO2ZpbGw6IzYzNjQ2ODtmaWxsLW9wYWNpdHk6MTtzdHJva2U6I2NkYzljYTtzdHJva2Utd2lkdGg6MjtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIvPiYjeGE7ICAgICAgPHJlY3QgeT0iNDM2LjM1MDg2IiB4PSI4NS4zNzU3MjUiIGhlaWdodD0iMjEuMDcxNDI4IiB3aWR0aD0iMTMwLjcxNDI4IiBpZD0icmVjdDU5NjMtNiIgc3R5bGU9ImRpc3BsYXk6aW5saW5lO29wYWNpdHk6MTtmaWxsOiM2MzY0Njg7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiNjZGM5Y2E7c3Ryb2tlLXdpZHRoOjI7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiLz4mI3hhOyAgICAgIDxyZWN0IHk9IjM5Ni4wMTczIiB4PSI4NS4zNzU3MjUiIGhlaWdodD0iMjAuOTQ4MDIzIiB3aWR0aD0iNDUuNDEyMyIgaWQ9InJlY3Q1OTYzLTYtMiIgc3R5bGU9ImRpc3BsYXk6aW5saW5lO29wYWNpdHk6MTtmaWxsOiM2MzY0Njg7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiNjZGM5Y2E7c3Ryb2tlLXdpZHRoOjI7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiLz4mI3hhOyAgICAgIDxyZWN0IHk9IjM3Ni42MDIyNiIgeD0iMTA2LjUyODMxIiBoZWlnaHQ9IjE5LjA3ODY5MyIgd2lkdGg9IjQzLjcyMTU0MiIgaWQ9InJlY3Q1OTYzLTYtMi05IiBzdHlsZT0iZGlzcGxheTppbmxpbmU7b3BhY2l0eToxO2ZpbGw6IzYzNjQ2ODtmaWxsLW9wYWNpdHk6MTtzdHJva2U6I2NkYzljYTtzdHJva2Utd2lkdGg6MjtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIvPiYjeGE7ICAgICAgPHJlY3QgeT0iMzc2LjQ5MjEiIHg9Ijg1LjM3NTcyNSIgaGVpZ2h0PSIxOC45NDYxMTciIHdpZHRoPSIyMS4zODM3NDciIGlkPSJyZWN0NTk2My02LTItOS0yIiBzdHlsZT0iZGlzcGxheTppbmxpbmU7b3BhY2l0eToxO2ZpbGw6IzYzNjQ2ODtmaWxsLW9wYWNpdHk6MTtzdHJva2U6I2NkYzljYTtzdHJva2Utd2lkdGg6MjtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIvPiYjeGE7ICAgICAgPHJlY3QgeT0iMzc2LjYwMjI2IiB4PSIxNTAuMjY2MjgiIGhlaWdodD0iMTkuMDc4NjkzIiB3aWR0aD0iNDMuNzIxNTQyIiBpZD0icmVjdDU5NjMtNi0yLTktMyIgc3R5bGU9ImRpc3BsYXk6aW5saW5lO29wYWNpdHk6MTtmaWxsOiM2MzY0Njg7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiNjZGM5Y2E7c3Ryb2tlLXdpZHRoOjI7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiLz4mI3hhOyAgICAgIDxyZWN0IHk9IjM3Ni4zNDY3MSIgeD0iMTk0LjcwNjIyIiBoZWlnaHQ9IjE4Ljk0NjExNyIgd2lkdGg9IjIxLjM4Mzc0NyIgaWQ9InJlY3Q1OTYzLTYtMi05LTItOSIgc3R5bGU9ImRpc3BsYXk6aW5saW5lO29wYWNpdHk6MTtmaWxsOiM2MzY0Njg7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiNjZGM5Y2E7c3Ryb2tlLXdpZHRoOjI7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiLz4mI3hhOyAgICAgIDxyZWN0IHk9IjM5NS45MzU0NiIgeD0iMTcwLjY3NzcyIiBoZWlnaHQ9IjIwLjk0ODAyMyIgd2lkdGg9IjQ1LjQxMjMiIGlkPSJyZWN0NTk2My02LTItMiIgc3R5bGU9ImRpc3BsYXk6aW5saW5lO29wYWNpdHk6MTtmaWxsOiM2MzY0Njg7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiNjZGM5Y2E7c3Ryb2tlLXdpZHRoOjI7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiLz4mI3hhOyAgICAgIDxyZWN0IHk9IjQxNy42MjE0MyIgeD0iMTA2LjU1OTI2IiBoZWlnaHQ9IjE5LjA3ODY5MyIgd2lkdGg9IjQzLjcyMTU0MiIgaWQ9InJlY3Q1OTYzLTYtMi05LTgiIHN0eWxlPSJkaXNwbGF5OmlubGluZTtvcGFjaXR5OjE7ZmlsbDojNjM2NDY4O2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojY2RjOWNhO3N0cm9rZS13aWR0aDoyO3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxIi8+JiN4YTsgICAgICA8cmVjdCB5PSI0MTcuNTExNTQiIHg9Ijg1LjQxMTEyNSIgaGVpZ2h0PSIxOS4yOTQzMjMiIHdpZHRoPSIyMS4zNzQ4MTEiIGlkPSJyZWN0NTk2My02LTItOS0yLTk3IiBzdHlsZT0iZGlzcGxheTppbmxpbmU7b3BhY2l0eToxO2ZpbGw6IzYzNjQ2ODtmaWxsLW9wYWNpdHk6MTtzdHJva2U6I2NkYzljYTtzdHJva2Utd2lkdGg6MjtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIvPiYjeGE7ICAgICAgPHJlY3QgeT0iNDE3LjYyMTQzIiB4PSIxNTAuMjk3MjMiIGhlaWdodD0iMTkuMDc4NjkzIiB3aWR0aD0iNDMuNzIxNTQyIiBpZD0icmVjdDU5NjMtNi0yLTktMy0zIiBzdHlsZT0iZGlzcGxheTppbmxpbmU7b3BhY2l0eToxO2ZpbGw6IzYzNjQ2ODtmaWxsLW9wYWNpdHk6MTtzdHJva2U6I2NkYzljYTtzdHJva2Utd2lkdGg6MjtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIvPiYjeGE7ICAgICAgPHJlY3QgeT0iNDE3LjUxMTU0IiB4PSIxOTQuNjc4NTEiIGhlaWdodD0iMTkuMjk0MzIzIiB3aWR0aD0iMjEuMzc0ODExIiBpZD0icmVjdDU5NjMtNi0yLTktMi05LTYiIHN0eWxlPSJkaXNwbGF5OmlubGluZTtvcGFjaXR5OjE7ZmlsbDojNjM2NDY4O2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojY2RjOWNhO3N0cm9rZS13aWR0aDoyO3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxIi8+JiN4YTsgICAgICA8cmVjdCB5PSIzOTYuMTI3MjMiIHg9IjEzMC44MzY1MyIgaGVpZ2h0PSIyMS4wMTA1NDIiIHdpZHRoPSIzOS43OTI3MTMiIGlkPSJyZWN0NTk2My02LTItMSIgc3R5bGU9ImRpc3BsYXk6aW5saW5lO29wYWNpdHk6MTtmaWxsOiM2MzY0Njg7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiNjZGM5Y2E7c3Ryb2tlLXdpZHRoOjI7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiLz4mI3hhOyAgICA8L2c+JiN4YTsgICAgPHBhdGggc3R5bGU9Im9wYWNpdHk6MTtmaWxsOiNmZWZlZmU7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiNjZGM5Y2E7c3Ryb2tlLXdpZHRoOjAuODk5OTk5OTg7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiIGQ9Im0gMTM2LjA4ODU1LDMyOS41NjUyMSAtMTcuMTEzMjgsMjYuNTM5MDYgOC44OTg0NCwwIDAsMjkuMTEzMjggLTUzLjMwNjY1LDAgMCwxNS42NTgyMSA2OC44Mzk4NSwwIDAsLTAuMjUzOTEgMC4xMjUsMCAwLC00NC41MTc1OCA4LjYwMTU2LDAgLTE2LjA0NDkyLC0yNi41MzkwNiB6IiBpZD0icmVjdDU3MjgtMi0zIi8+JiN4YTsgICAgPHBhdGggc3R5bGU9ImRpc3BsYXk6aW5saW5lO29wYWNpdHk6MTtmaWxsOiNmZWZlZmU7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiNjZGM5Y2E7c3Ryb2tlLXdpZHRoOjAuODk5OTk5OTg7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiIGQ9Im0gMjI4LjY4NCwzOTMuMjg4MzEgLTI2LjUzOTA2LC0xNy4xMTMyOCAwLDguODk4NDQgLTI5LjExMzI4LDAgMCwtNTMuMzA2NjUgLTE1LjY1ODIxLDAgMCw2OC44Mzk4NSAwLjI1MzkxLDAgMCwwLjEyNSA0NC41MTc1OCwwIDAsOC42MDE1NiAyNi41MzkwNiwtMTYuMDQ0OTIgeiIgaWQ9InJlY3Q1NzI4LTctOS0xIi8+JiN4YTsgICAgPHBhdGggc3R5bGU9ImRpc3BsYXk6aW5saW5lO29wYWNpdHk6MTtmaWxsOiNmZWZlZmU7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiNjZGM5Y2E7c3Ryb2tlLXdpZHRoOjAuODk5OTk5OTg7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiIGQ9Im0gMTY0LjczNDYxLDQ4Ni4yODAyNCAxNy4xMTMyOCwtMjYuNTM5MDYgLTguODk4NDQsMCAwLC0yOS4xMTMyOCA1My4zMDY2NSwwIDAsLTE1LjY1ODIxIC02OC44Mzk4NSwwIDAsMC4yNTM5MSAtMC4xMjUsMCAwLDQ0LjUxNzU4IC04LjYwMTU2LDAgMTYuMDQ0OTIsMjYuNTM5MDYgeiIgaWQ9InJlY3Q1NzI4LTctNS0xLTkiLz4mI3hhOyAgICA8cGF0aCBzdHlsZT0iZGlzcGxheTppbmxpbmU7b3BhY2l0eToxO2ZpbGw6I2ZlZmVmZTtmaWxsLW9wYWNpdHk6MTtzdHJva2U6I2NkYzljYTtzdHJva2Utd2lkdGg6MC44OTk5OTk5ODtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIgZD0ibSA3Mi4yNjgwNiw0MjIuODM1OTIgMjYuNTM5MDYsMTcuMTEzMjggMCwtOC44OTg0NCAyOS4xMTMyOCwwIDAsNTMuMzA2NjUgMTUuNjU4MjEsMCAwLC02OC44Mzk4NSAtMC4yNTM5MSwwIDAsLTAuMTI1IC00NC41MTc1OCwwIDAsLTguNjAxNTYgLTI2LjUzOTA2LDE2LjA0NDkyIHoiIGlkPSJyZWN0NTcyOC03LTUtMy0yLTQiLz4mI3hhOyAgPC9nPiYjeGE7PC9zdmc+" preserveAspectRatio="none" pointer-events="none"/><image x="130" y="138.5" width="57" height="57" xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNTcuNDgzNTc4bW0iIGhlaWdodD0iNTcuNDgzNTc4bW0iIHZpZXdCb3g9IjAgMCAyMDMuNjgxOTcgMjAzLjY4MTk3IiBpZD0ic3ZnNDMyNCIgdmVyc2lvbj0iMS4xIj4mI3hhOyAgPGRlZnMgaWQ9ImRlZnM0MzI2Ii8+JiN4YTsgIDxtZXRhZGF0YSBpZD0ibWV0YWRhdGE0MzI5Ij4mI3hhOyAgICA8cmRmOlJERj4mI3hhOyAgICAgIDxjYzpXb3JrIHJkZjphYm91dD0iIj4mI3hhOyAgICAgICAgPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+JiN4YTsgICAgICAgIDxkYzp0eXBlIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiLz4mI3hhOyAgICAgICAgPGRjOnRpdGxlLz4mI3hhOyAgICAgIDwvY2M6V29yaz4mI3hhOyAgICA8L3JkZjpSREY+JiN4YTsgIDwvbWV0YWRhdGE+JiN4YTsgIDxnIGlkPSJnNTg0OC01IiBzdHlsZT0iZGlzcGxheTppbmxpbmUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yNDkuMjA5MjksLTM1Ni43MTE0NikiPiYjeGE7ICAgIDxjaXJjbGUgc3R5bGU9Im9wYWNpdHk6MTtmaWxsOiMxNDUxN2M7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiNiMmJiYzQ7c3Ryb2tlLXdpZHRoOjcuNTQyMzg5Mzk7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIgaWQ9InBhdGg0MTM2LTYiIGN4PSIzNTEuMDUwMjYiIGN5PSI0NTguNTUyNDMiIHI9Ijk4LjA2OTc3OCIvPiYjeGE7ICAgIDxwYXRoIHN0eWxlPSJvcGFjaXR5OjE7ZmlsbDojZmVmZWZlO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojY2RjOWNhO3N0cm9rZS13aWR0aDowLjg5OTk5OTk4O3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxIiBkPSJtIDMzNi4yNjE3MiwzODAuMDExNzIgLTE3LjExMzI4LDI2LjUzOTA2IDguODk4NDQsMCAwLDI5LjExMzI4IC01My4zMDY2NSwwIDAsMTUuNjU4MjEgNjguODM5ODUsMCAwLC0wLjI1MzkxIDAuMTI1LDAgMCwtNDQuNTE3NTggOC42MDE1NiwwIC0xNi4wNDQ5MiwtMjYuNTM5MDYgeiIgaWQ9InJlY3Q1NzI4LTIiLz4mI3hhOyAgICA8cGF0aCBzdHlsZT0iZGlzcGxheTppbmxpbmU7b3BhY2l0eToxO2ZpbGw6I2ZlZmVmZTtmaWxsLW9wYWNpdHk6MTtzdHJva2U6I2NkYzljYTtzdHJva2Utd2lkdGg6MC44OTk5OTk5ODtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIgZD0ibSA0MjguODU3MTcsNDQzLjczNDgyIC0yNi41MzkwNiwtMTcuMTEzMjggMCw4Ljg5ODQ0IC0yOS4xMTMyOCwwIDAsLTUzLjMwNjY1IC0xNS42NTgyMSwwIDAsNjguODM5ODUgMC4yNTM5MSwwIDAsMC4xMjUgNDQuNTE3NTgsMCAwLDguNjAxNTYgMjYuNTM5MDYsLTE2LjA0NDkyIHoiIGlkPSJyZWN0NTcyOC03LTkiLz4mI3hhOyAgICA8cGF0aCBzdHlsZT0iZGlzcGxheTppbmxpbmU7b3BhY2l0eToxO2ZpbGw6I2ZlZmVmZTtmaWxsLW9wYWNpdHk6MTtzdHJva2U6I2NkYzljYTtzdHJva2Utd2lkdGg6MC44OTk5OTk5ODtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIgZD0ibSAzNjQuOTA3NzgsNTM2LjcyNjc1IDE3LjExMzI4LC0yNi41MzkwNiAtOC44OTg0NCwwIDAsLTI5LjExMzI4IDUzLjMwNjY1LDAgMCwtMTUuNjU4MjEgLTY4LjgzOTg1LDAgMCwwLjI1MzkxIC0wLjEyNSwwIDAsNDQuNTE3NTggLTguNjAxNTYsMCAxNi4wNDQ5MiwyNi41MzkwNiB6IiBpZD0icmVjdDU3MjgtNy01LTEiLz4mI3hhOyAgICA8cGF0aCBzdHlsZT0iZGlzcGxheTppbmxpbmU7b3BhY2l0eToxO2ZpbGw6I2ZlZmVmZTtmaWxsLW9wYWNpdHk6MTtzdHJva2U6I2NkYzljYTtzdHJva2Utd2lkdGg6MC44OTk5OTk5ODtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIgZD0ibSAyNzIuNDQxMjMsNDczLjI4MjQzIDI2LjUzOTA2LDE3LjExMzI4IDAsLTguODk4NDQgMjkuMTEzMjgsMCAwLDUzLjMwNjY1IDE1LjY1ODIxLDAgMCwtNjguODM5ODUgLTAuMjUzOTEsMCAwLC0wLjEyNSAtNDQuNTE3NTgsMCAwLC04LjYwMTU2IC0yNi41MzkwNiwxNi4wNDQ5MiB6IiBpZD0icmVjdDU3MjgtNy01LTMtMiIvPiYjeGE7ICA8L2c+JiN4YTs8L3N2Zz4=" preserveAspectRatio="none" pointer-events="none"/><image x="130.5" y="69.5" width="56" height="56" xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIGlkPSJzdmc0MzI0IiB2aWV3Qm94PSIwIDAgMTk4LjQxNzMgMTk4LjQxNzMiIGhlaWdodD0iNTUuOTk3NzcybW0iIHdpZHRoPSI1NS45OTc3NzJtbSI+JiN4YTsgIDxkZWZzIGlkPSJkZWZzNDMyNiIvPiYjeGE7ICA8bWV0YWRhdGEgaWQ9Im1ldGFkYXRhNDMyOSI+JiN4YTsgICAgPHJkZjpSREY+JiN4YTsgICAgICA8Y2M6V29yayByZGY6YWJvdXQ9IiI+JiN4YTsgICAgICAgIDxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PiYjeGE7ICAgICAgICA8ZGM6dHlwZSByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIi8+JiN4YTsgICAgICAgIDxkYzp0aXRsZS8+JiN4YTsgICAgICA8L2NjOldvcms+JiN4YTsgICAgPC9yZGY6UkRGPiYjeGE7ICA8L21ldGFkYXRhPiYjeGE7ICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMjE1LjYzNzIsLTQzMy4xNTM1OCkiIGlkPSJsYXllcjEiPiYjeGE7ICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMjY1Ljk5NzYsLTM1Mi40Mzc3MykiIGlkPSJnODg3OSI+JiN4YTsgICAgICA8cmVjdCBzdHlsZT0ib3BhY2l0eToxO2ZpbGw6IzE0NTE3YztmaWxsLW9wYWNpdHk6MTtzdHJva2U6I2NkYzljYTtzdHJva2Utd2lkdGg6NjtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIgaWQ9InJlY3Q1ODg1LTEiIHdpZHRoPSIxOTIuNDE3MyIgaGVpZ2h0PSIxOTIuNDE3MyIgeD0iNTMuMzYwMzk0IiB5PSI3ODguNTkxMzEiLz4mI3hhOyAgICAgIDxnIGlkPSJnODg3MyI+JiN4YTsgICAgICAgIDxwYXRoIGlkPSJwYXRoNTQ2Ni0zLTYtNy0yLTctNiIgZD0ibSAxNDMuMTAxNDcsOTQ0LjI5OTc4IDVlLTUsLTEzLjI1MTQgLTQ0LjIxMzU1MywwIDAuNTk4MDk1LC0xNi43NTI0NSAtMzAuNDk0NzYzLDIzLjUxMTkxIDI4Ljg2NDMzOCwyMi4zMTMwMSAwLjU2NzUzNCwtMTUuODIwMzUgNDQuNjc5NTY5LC0xLjFlLTQgeiIgc3R5bGU9ImRpc3BsYXk6aW5saW5lO2ZpbGw6I2ZmZmZmZjtmaWxsLW9wYWNpdHk6MTtmaWxsLXJ1bGU6ZXZlbm9kZDtzdHJva2U6I2NkYzljYTtzdHJva2Utd2lkdGg6MS44ODc5MDg4MjtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIvPiYjeGE7ICAgICAgICA8cGF0aCBpZD0icGF0aDU0NjYtMy02LTctMi03LTAtMyIgZD0ibSAxNjIuNTMyMzUsODc2LjU3OTU0IDVlLTUsLTEzLjI1MTQzIC00NC4yMTM1NywwIDAuNTk4MTEsLTE2Ljc1MjQ2IC0zMC40OTQ4MDksMjMuNTExOTEgMjguODY0Mzc5LDIyLjMxMzAxIDAuNTY3NTQsLTE1LjgyMDM1IDQ0LjY3OTU2LC0xZS00IHoiIHN0eWxlPSJkaXNwbGF5OmlubGluZTtmaWxsOiNmZmZmZmY7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlOiNjZGM5Y2E7c3Ryb2tlLXdpZHRoOjEuODg3OTA4ODI7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiLz4mI3hhOyAgICAgICAgPHBhdGggaWQ9InBhdGg1NDY2LTMtNi03LTItNy0wLTktOCIgZD0ibSAxNTQuMjMzMTksODI5LjI4NTIyIC0xLjNlLTQsMTMuMjUxMzkgNDQuMjEzNjUsLTNlLTUgLTAuNTk4MTUsMTYuNzUyNDkgMzAuNDk0ODYsLTIzLjUxMTkgLTI4Ljg2NDM1LC0yMi4zMTMwMSAtMC41Njc1NywxNS44MjAzNSAtNDQuNjc5NjIsOWUtNSB6IiBzdHlsZT0iZGlzcGxheTppbmxpbmU7ZmlsbDojZmZmZmZmO2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpldmVub2RkO3N0cm9rZTojY2RjOWNhO3N0cm9rZS13aWR0aDoxLjg4NzkwODgyO3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxIi8+JiN4YTsgICAgICAgIDxwYXRoIGlkPSJwYXRoNTQ2Ni0zLTYtNy0yLTctMC05LTMtNSIgZD0ibSAxMzguNTM0ODQsODk5LjU5MzM0IC0xLjJlLTQsMTMuMjUxNCA0NC4yMTM2NCwtNGUtNSAtMC41OTgxNCwxNi43NTI0OSAzMC40OTQ4NSwtMjMuNTExOSAtMjguODY0MzQsLTIyLjMxMzAyIC0wLjU2NzU3LDE1LjgyMDM5IC00NC42Nzk2Miw3ZS01IHoiIHN0eWxlPSJkaXNwbGF5OmlubGluZTtmaWxsOiNmZmZmZmY7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlOiNjZGM5Y2E7c3Ryb2tlLXdpZHRoOjEuODg3OTA4ODI7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiLz4mI3hhOyAgICAgIDwvZz4mI3hhOyAgICA8L2c+JiN4YTsgIDwvZz4mI3hhOzwvc3ZnPg==" preserveAspectRatio="none" pointer-events="none"/><image x="130.5" y="-0.5" width="56" height="56" xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNTUuOTk3NzcybW0iIGhlaWdodD0iNTUuOTk3NzcybW0iIHZpZXdCb3g9IjAgMCAxOTguNDE3MyAxOTguNDE3MyIgaWQ9InN2ZzQzMjQiIHZlcnNpb249IjEuMSI+JiN4YTsgIDxkZWZzIGlkPSJkZWZzNDMyNiIvPiYjeGE7ICA8bWV0YWRhdGEgaWQ9Im1ldGFkYXRhNDMyOSI+JiN4YTsgICAgPHJkZjpSREY+JiN4YTsgICAgICA8Y2M6V29yayByZGY6YWJvdXQ9IiI+JiN4YTsgICAgICAgIDxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PiYjeGE7ICAgICAgICA8ZGM6dHlwZSByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIi8+JiN4YTsgICAgICAgIDxkYzp0aXRsZS8+JiN4YTsgICAgICA8L2NjOldvcms+JiN4YTsgICAgPC9yZGY6UkRGPiYjeGE7ICA8L21ldGFkYXRhPiYjeGE7ICA8cmVjdCB5PSIzLjAwMDAwMDIiIHg9IjIuOTk5OTkzMSIgaGVpZ2h0PSIxOTIuNDE3MyIgd2lkdGg9IjE5Mi40MTczIiBpZD0icmVjdDU4ODUiIHN0eWxlPSJvcGFjaXR5OjE7ZmlsbDojMTQ1MTdjO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojY2RjOWNhO3N0cm9rZS13aWR0aDo2O3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxIi8+JiN4YTsgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0wLjAzMDEzODczLC0xLjAxNjY2NjEpIiBpZD0iZzg2NCI+JiN4YTsgICAgPHBhdGggaWQ9InJlY3Q1NzI4LTIiIGQ9Im0gODQuODUxMzAxLDIxLjg2NzggLTE3LjExMzI4LDI2LjUzOTA2IGggOC44OTg0NDEgViA3Ny41MjAxNCBIIDIzLjMyOTgxMSB2IDE1LjY1ODIxIGggNjguODM5ODQ4IHYgLTAuMjUzOTEgaCAwLjEyNSBWIDQ4LjQwNjg2IGggOC42MDE1NjEgeiIgc3R5bGU9Im9wYWNpdHk6MTtmaWxsOiNmZWZlZmU7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiNjZGM5Y2E7c3Ryb2tlLXdpZHRoOjAuODk5OTk5OTg7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiLz4mI3hhOyAgICA8cGF0aCBpZD0icmVjdDU3MjgtNy05IiBkPSJNIDE3Ny40NDY3NSw4NS41OTA5IDE1MC45MDc2OSw2OC40Nzc2MiB2IDguODk4NDQgSCAxMjEuNzk0NDEgViAyNC4wNjk0MSBIIDEwNi4xMzYyIHYgNjguODM5ODUgaCAwLjI1MzkxIHYgMC4xMjUgaCA0NC41MTc1OCB2IDguNjAxNTYgeiIgc3R5bGU9ImRpc3BsYXk6aW5saW5lO29wYWNpdHk6MTtmaWxsOiNmZWZlZmU7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiNjZGM5Y2E7c3Ryb2tlLXdpZHRoOjAuODk5OTk5OTg7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiLz4mI3hhOyAgICA8cGF0aCBpZD0icmVjdDU3MjgtNy01LTEiIGQ9Im0gMTEzLjQ5NzM2LDE3OC41ODI4MyAxNy4xMTMyOCwtMjYuNTM5MDYgaCAtOC44OTg0NCB2IC0yOS4xMTMyOCBoIDUzLjMwNjY1IFYgMTA3LjI3MjI4IEggMTA2LjE3OSB2IDAuMjUzOTEgaCAtMC4xMjUgdiA0NC41MTc1OCBoIC04LjYwMTU2MSB6IiBzdHlsZT0iZGlzcGxheTppbmxpbmU7b3BhY2l0eToxO2ZpbGw6I2ZlZmVmZTtmaWxsLW9wYWNpdHk6MTtzdHJva2U6I2NkYzljYTtzdHJva2Utd2lkdGg6MC44OTk5OTk5ODtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIvPiYjeGE7ICAgIDxwYXRoIGlkPSJyZWN0NTcyOC03LTUtMy0yIiBkPSJtIDIxLjAzMDgxMSwxMTUuMTM4NTEgMjYuNTM5MDYsMTcuMTEzMjggdiAtOC44OTg0NCBoIDI5LjExMzI4IFYgMTc2LjY2IGggMTUuNjU4MjA4IHYgLTY4LjgzOTg1IGggLTAuMjUzOTEgdiAtMC4xMjUgSCA0Ny41Njk4NzEgdiAtOC42MDE1NiB6IiBzdHlsZT0iZGlzcGxheTppbmxpbmU7b3BhY2l0eToxO2ZpbGw6I2ZlZmVmZTtmaWxsLW9wYWNpdHk6MTtzdHJva2U6I2NkYzljYTtzdHJva2Utd2lkdGg6MC44OTk5OTk5ODtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIvPiYjeGE7ICA8L2c+JiN4YTs8L3N2Zz4=" preserveAspectRatio="none" pointer-events="none"/><image x="320" y="633.5" width="135" height="35" xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTM0LjY2NDE4bW0iIGhlaWdodD0iMzQuODI4NzU4bW0iIHZpZXdCb3g9IjAgMCA0NzcuMTU2NTYgMTIzLjQwODk5IiBpZD0ic3ZnNzc3OCIgdmVyc2lvbj0iMS4xIj4mI3hhOyAgPGRlZnMgaWQ9ImRlZnM3NzgwIi8+JiN4YTsgIDxtZXRhZGF0YSBpZD0ibWV0YWRhdGE3NzgzIj4mI3hhOyAgICA8cmRmOlJERj4mI3hhOyAgICAgIDxjYzpXb3JrIHJkZjphYm91dD0iIj4mI3hhOyAgICAgICAgPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+JiN4YTsgICAgICAgIDxkYzp0eXBlIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiLz4mI3hhOyAgICAgICAgPGRjOnRpdGxlLz4mI3hhOyAgICAgIDwvY2M6V29yaz4mI3hhOyAgICA8L3JkZjpSREY+JiN4YTsgIDwvbWV0YWRhdGE+JiN4YTsgIDxyZWN0IHN0eWxlPSJvcGFjaXR5OjE7ZmlsbDojYTFhMmEzO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojNGY0ZjRmO3N0cm9rZS13aWR0aDo1LjQ5NztzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MjtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIgaWQ9InJlY3Q0MTM2LTIiIHdpZHRoPSI0NzEuNjYiIGhlaWdodD0iMTE3LjkxMjQ0IiB4PSIyLjc0ODI3NiIgeT0iMi43NDgyNzYiIHJ5PSI3LjU0NDM3MzUiLz4mI3hhOyAgPHJlY3Qgcnk9IjEwLjAxMzI1MiIgeT0iMTMuNzU5MzU2IiB4PSIxNS4wNzY4NTgiIGhlaWdodD0iOTQuNDA1ODc2IiB3aWR0aD0iNDQ3LjA5OTQiIGlkPSJyZWN0NDEzOC04LTYtNS02LTYtNy01LTctOCIgc3R5bGU9Im9wYWNpdHk6MTtmaWxsOiM1NzhlYmQ7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiMzODU4NzI7c3Ryb2tlLXdpZHRoOjUuMjUwMjc5OTtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MjtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIvPiYjeGE7ICA8ZyB0cmFuc2Zvcm09Im1hdHJpeCgwLjc0MTc3NjkxLDAsMCwwLjc0MTc3NjkxLDI5LjQ2MDg0OCwyMC4xMDE2NDEpIiBzdHlsZT0ib3BhY2l0eTowLjk3MDAwMDAyO2ZpbGw6I2Y0ZjdmOTtmaWxsLW9wYWNpdHk6MTtzdHJva2U6I2ZiZmRmZjtzdHJva2Utd2lkdGg6MS40ODQzNDQ0ODtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIgaWQ9Imc0MTY2Ij4mI3hhOyAgICA8cGF0aCBzdHlsZT0iY2xpcC1ydWxlOmV2ZW5vZGQ7ZmlsbDojZjRmN2Y5O2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpldmVub2RkO3N0cm9rZTojZmJmZGZmO3N0cm9rZS13aWR0aDoxLjQ4NDM0NDQ4O3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxIiBpZD0icGF0aDUiIGQ9Im0gNTAwLjg2ODcsOC44OTczNDExIGMgLTMuNDMxOTcsMCAtNi40NjAxNiwyLjgyNjMxNjkgLTYuNDYwMTYsNi40NjAxNTE5IGwgMCw0Ny40NDE3NDYgYyAwLDMuNjMzODM1IDIuODI2MzEsNi40NjAxNTEgNi40NjAxNiw2LjQ2MDE1MSBsIDQ3LjQ0MTczLDAgYyAzLjQzMTk3LDAgNi40NjAxNiwtMi44MjYzMTYgNi40NjAxNiwtNi40NjAxNTEgbCAwLC00Ny40NDE3NDYgYyAwLC0zLjQzMTk1NSAtMi44MjYzMiwtNi40NjAxNTE5IC02LjQ2MDE2LC02LjQ2MDE1MTkgbCAtNDcuNDQxNzMsMCAwLDAgeiBtIC0yLjgyNjMzLDUzLjkwMTg5NzkgMCwtNDcuNDQxNzQ2IGMgMCwtMS42MTUwMzggMS4yMTEyOSwtMi44MjYzMTYgMi44MjYzMywtMi44MjYzMTYgbCA0Ny40NDE3MywwIGMgMS42MTUwNCwwIDIuODI2MzEsMS4yMTEyNzggMi44MjYzMSwyLjgyNjMxNiBsIDAsNDcuNDQxNzQ2IGMgMCwxLjYxNTAzNiAtMS4yMTEyNywyLjgyNjMxNSAtMi44MjYzMSwyLjgyNjMxNSBsIC00Ny40NDE3MywwIGMgLTEuNDEzMTcsMCAtMi44MjYzMywtMS4yMTEyNzkgLTIuODI2MzMsLTIuODI2MzE1IGwgMCwwIHoiIGNsYXNzPSJzdDAiLz4mI3hhOyAgICA8cGF0aCBzdHlsZT0iY2xpcC1ydWxlOmV2ZW5vZGQ7ZmlsbDojZjRmN2Y5O2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpldmVub2RkO3N0cm9rZTojZmJmZGZmO3N0cm9rZS13aWR0aDoxLjQ4NDM0NDQ4O3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxIiBpZD0icGF0aDciIGQ9Im0gNTE1LjAwMDI3LDIzLjIzMDgwNCBjIC0zLjQzMTk1LDAgLTYuNDYwMTQsMi44MjYzMTYgLTYuNDYwMTQsNi40NjAxNTMgbCAwLDQ3LjQ0MTc0NCBjIDAsMy40MzE5NTYgMi44MjYzMSw2LjQ2MDE1MyA2LjQ2MDE0LDYuNDYwMTUzIGwgNDcuNDQxNzUsMCBjIDMuNjMzODQsMCA2LjQ2MDE1LC0yLjgyNjMxOCA2LjQ2MDE1LC02LjQ2MDE1MyBsIDAsLTQ3LjQ0MTc0NCBjIDAsLTMuNDMxOTU3IC0yLjgyNjMxLC02LjQ2MDE1MyAtNi40NjAxNSwtNi40NjAxNTMgbCAtNDcuNDQxNzUsMCAwLDAgeiBtIC0yLjgyNjMyLDUzLjcwMDAxOCAwLC00Ny40NDE3NDUgYyAwLC0xLjYxNTAzOCAxLjIxMTI4LC0yLjgyNjMxNyAyLjgyNjMyLC0yLjgyNjMxNyBsIDQ3LjQ0MTc1LDAgYyAxLjYxNTA0LDAgMi44MjYzMiwxLjIxMTI3OSAyLjgyNjMyLDIuODI2MzE3IGwgMCw0Ny40NDE3NDUgYyAwLDEuNjE1MDM2IC0xLjIxMTI4LDIuODI2MzE1IC0yLjgyNjMyLDIuODI2MzE1IGwgLTQ3LjQ0MTc1LDAgYyAtMS40MTMxNSwwIC0yLjgyNjMyLC0xLjIxMTI3OSAtMi44MjYzMiwtMi44MjYzMTUgbCAwLDAgeiIgY2xhc3M9InN0MCIvPiYjeGE7ICAgIDxwYXRoIHN0eWxlPSJjbGlwLXJ1bGU6ZXZlbm9kZDtmaWxsOiNmNGY3Zjk7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlOiNmYmZkZmY7c3Ryb2tlLXdpZHRoOjEuNDg0MzQ0NDg7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiIGlkPSJwYXRoOSIgZD0ibSA0ODYuNzM3MTEsMzcuMzYyMzg4IGMgLTMuNjMzODQsMCAtNi40NjAxNSwyLjgyNjMxNyAtNi40NjAxNSw2LjQ2MDE1MiBsIDAsNDcuNDQxNzQ0IGMgMCwzLjYzMzgzNiAyLjgyNjMxLDYuNDYwMTUzIDYuNDYwMTUsNi40NjAxNTMgbCA0Ny40NDE3NCwwIGMgMy40MzE5NiwwIDYuNDYwMTYsLTIuODI2MzE3IDYuNDYwMTYsLTYuNDYwMTUzIGwgMCwtNDcuNDQxNzQ0IGMgMCwtMy40MzE5NTYgLTIuODI2MzIsLTYuNDYwMTUyIC02LjQ2MDE2LC02LjQ2MDE1MiBsIC00Ny40NDE3NCwwIDAsMCB6IG0gLTIuODI2MzEsNTMuNzAwMDE3IDAsLTQ3LjQ0MTc0NSBjIDAsLTEuNjE1MDM4IDEuMjExMjcsLTIuODI2MzE3IDIuODI2MzEsLTIuODI2MzE3IGwgNDcuNDQxNzQsMCBjIDEuNjE1MDQsMCAyLjgyNjMyLDEuMjExMjc5IDIuODI2MzIsMi44MjYzMTcgbCAwLDQ3LjQ0MTc0NSBjIDAsMS42MTUwMzkgLTEuMjExMjgsMi44MjYzMTYgLTIuODI2MzIsMi44MjYzMTYgbCAtNDcuNDQxNzQsMCBjIC0xLjYxNTA0LDAgLTIuODI2MzEsLTEuMjExMjc3IC0yLjgyNjMxLC0yLjgyNjMxNiBsIDAsMCB6IiBjbGFzcz0ic3QwIi8+JiN4YTsgIDwvZz4mI3hhOzwvc3ZnPg==" preserveAspectRatio="none" pointer-events="none"/><image x="0" y="649.5" width="134" height="35" xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIGlkPSJzdmc0Mjk0IiB2aWV3Qm94PSIwIDAgNDc2LjQ5NTgxIDEyMi43NDgyNSIgaGVpZ2h0PSIzNC42NDIyODFtbSIgd2lkdGg9IjEzNC40Nzc3MW1tIj4mI3hhOyAgPGRlZnMgaWQ9ImRlZnM0Mjk2Ii8+JiN4YTsgIDxtZXRhZGF0YSBpZD0ibWV0YWRhdGE0Mjk5Ij4mI3hhOyAgICA8cmRmOlJERj4mI3hhOyAgICAgIDxjYzpXb3JrIHJkZjphYm91dD0iIj4mI3hhOyAgICAgICAgPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+JiN4YTsgICAgICAgIDxkYzp0eXBlIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiLz4mI3hhOyAgICAgICAgPGRjOnRpdGxlLz4mI3hhOyAgICAgIDwvY2M6V29yaz4mI3hhOyAgICA8L3JkZjpSREY+JiN4YTsgIDwvbWV0YWRhdGE+JiN4YTsgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0wLjMzMDM4NDAyLC0wLjMzMDM4NDAyKSIgaWQ9Imc4OTgiPiYjeGE7ICAgIDxyZWN0IHN0eWxlPSJvcGFjaXR5OjE7ZmlsbDojZmRmZGZkO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojMmMyYzJjO3N0cm9rZS13aWR0aDo0LjgzNTc5NDkzO3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDozLjg3NTtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIgaWQ9InJlY3Q0MTM2LTItMy05IiB3aWR0aD0iNDcxLjY2MDAzIiBoZWlnaHQ9IjExNy45MTI0NSIgeD0iMi43NDgyODE1IiB5PSIyLjc0ODI4MTUiIHJ5PSI3LjU0NDM3NCIvPiYjeGE7ICAgIDxyZWN0IGlkPSJyZWN0MzcyOS0zLTYtMyIgd2lkdGg9IjMyNS43OTc2NCIgaGVpZ2h0PSI3OS4yMjI5NDYiIHg9IjI0LjAxOTg1NyIgeT0iMjIuMDkzMDM1IiBzdHlsZT0iZmlsbDojZmRmZGZkO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojMmMyYzJjO3N0cm9rZS13aWR0aDozLjI5OTE5NTUzO3N0cm9rZS1taXRlcmxpbWl0OjMuODc1O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxIiByeT0iNi4yMjQwNTE1Ii8+JiN4YTsgICAgPGcgdHJhbnNmb3JtPSJtYXRyaXgoMC41NzA5ODM0MiwwLDAsMC41NzgwMjQyOCwzNjUuNDgzOTYsMTkuMzcyMjY4KSIgaWQ9Imc4NjkiPiYjeGE7ICAgICAgPHJlY3Qgcnk9IjMuODE2OTU2IiB5PSI0LjA2ODYxMzEiIHg9IjQuMDY4NjA5MiIgaGVpZ2h0PSIxMzguMzM0OTYiIHdpZHRoPSIxNTAuMzE4OTciIGlkPSJyZWN0Njc4Mi00LTY1LTMtMC02LTMiIHN0eWxlPSJvcGFjaXR5OjE7ZmlsbDojZmRmZGZkO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojMmMyYzJjO3N0cm9rZS13aWR0aDo4LjEzNzIyNzA2O3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjptaXRlcjtzdHJva2UtbWl0ZXJsaW1pdDozLjg3NTtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIvPiYjeGE7ICAgICAgPHJlY3Qgc3R5bGU9Im9wYWNpdHk6MTtmaWxsOiNmZGZkZmQ7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiMyYzJjMmM7c3Ryb2tlLXdpZHRoOjYuNTA5NzgxODQ7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjMuODc1O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxIiBpZD0icmVjdDU5NjMtNS02IiB3aWR0aD0iMTQ3Ljg5MzYiIGhlaWdodD0iMjguMzU2MDEiIHg9IjUuMjgxMjQ2NyIgeT0iNC40ODgxODI1Ii8+JiN4YTsgICAgICA8cmVjdCBzdHlsZT0iZGlzcGxheTppbmxpbmU7b3BhY2l0eToxO2ZpbGw6I2ZkZmRmZDtmaWxsLW9wYWNpdHk6MTtzdHJva2U6IzJjMmMyYztzdHJva2Utd2lkdGg6Ni41MDk3ODE4NDtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6My44NzU7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiIGlkPSJyZWN0NTk2My02LTMtNyIgd2lkdGg9IjE0Ny44OTM2IiBoZWlnaHQ9IjI4LjM1NjAxIiB4PSI1LjI4MTI0NjciIHk9IjExMy42MjgiLz4mI3hhOyAgICAgIDxyZWN0IHN0eWxlPSJkaXNwbGF5OmlubGluZTtvcGFjaXR5OjE7ZmlsbDojZmRmZGZkO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojMmMyYzJjO3N0cm9rZS13aWR0aDo2LjUwOTc4MTg0O3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDozLjg3NTtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIgaWQ9InJlY3Q1OTYzLTYtMi01LTUiIHdpZHRoPSI1MS4zODA2OCIgaGVpZ2h0PSIyOC4xODk5NDEiIHg9IjUuMjgxMjQ2NyIgeT0iNTkuNDExNzA5Ii8+JiN4YTsgICAgICA8cmVjdCBzdHlsZT0iZGlzcGxheTppbmxpbmU7b3BhY2l0eToxO2ZpbGw6I2ZkZmRmZDtmaWxsLW9wYWNpdHk6MTtzdHJva2U6IzJjMmMyYztzdHJva2Utd2lkdGg6Ni41MDk3ODE4NDtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6My44NzU7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiIGlkPSJyZWN0NTk2My02LTItOS02LTMiIHdpZHRoPSI0OS40Njc3MTIiIGhlaWdodD0iMjUuNjc0MzciIHg9IjI5LjIxMzgwNiIgeT0iMzMuMDUxODA3Ii8+JiN4YTsgICAgICA8cmVjdCBzdHlsZT0iZGlzcGxheTppbmxpbmU7b3BhY2l0eToxO2ZpbGw6I2ZkZmRmZDtmaWxsLW9wYWNpdHk6MTtzdHJva2U6IzJjMmMyYztzdHJva2Utd2lkdGg6Ni41MDk3ODE4NDtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6My44NzU7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiIGlkPSJyZWN0NTk2My02LTItOS0yLTItNSIgd2lkdGg9IjI0LjE5NDEzOCIgaGVpZ2h0PSIyNS40OTU5NiIgeD0iNS4yODEyNDY3IiB5PSIzMy4xNDEwMDYiLz4mI3hhOyAgICAgIDxyZWN0IHN0eWxlPSJkaXNwbGF5OmlubGluZTtvcGFjaXR5OjE7ZmlsbDojZmRmZGZkO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojMmMyYzJjO3N0cm9rZS13aWR0aDo2LjUwOTc4MTg0O3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDozLjg3NTtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIgaWQ9InJlY3Q1OTYzLTYtMi05LTMtOS02IiB3aWR0aD0iNDkuNDY3NzEyIiBoZWlnaHQ9IjI1LjY3NDM3IiB4PSI3OC43MDAxMTkiIHk9IjMzLjA1MTgwNyIvPiYjeGE7ICAgICAgPHJlY3Qgc3R5bGU9ImRpc3BsYXk6aW5saW5lO29wYWNpdHk6MTtmaWxsOiNmZGZkZmQ7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiMyYzJjMmM7c3Ryb2tlLXdpZHRoOjYuNTA5NzgxODQ7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjMuODc1O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxIiBpZD0icmVjdDU5NjMtNi0yLTktMi05LTEtMiIgd2lkdGg9IjI0LjE5NDEzOCIgaGVpZ2h0PSIyNS40OTU5NiIgeD0iMTI4Ljk4MDY1IiB5PSIzMy4xNDEwMDYiLz4mI3hhOyAgICAgIDxyZWN0IHN0eWxlPSJkaXNwbGF5OmlubGluZTtvcGFjaXR5OjE7ZmlsbDojZmRmZGZkO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojMmMyYzJjO3N0cm9rZS13aWR0aDo2LjUwOTc4MTg0O3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDozLjg3NTtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIgaWQ9InJlY3Q1OTYzLTYtMi0yLTItOSIgd2lkdGg9IjUxLjM4MDY4IiBoZWlnaHQ9IjI4LjE4OTk0MSIgeD0iMTAxLjc5NDE2IiB5PSI1OS40MTE3MDkiLz4mI3hhOyAgICAgIDxyZWN0IHN0eWxlPSJkaXNwbGF5OmlubGluZTtvcGFjaXR5OjE7ZmlsbDojZmRmZGZkO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojMmMyYzJjO3N0cm9rZS13aWR0aDo2LjUwOTc4MTg0O3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDozLjg3NTtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIgaWQ9InJlY3Q1OTYzLTYtMi05LTgtNy0xIiB3aWR0aD0iNDkuNDY3NzEyIiBoZWlnaHQ9IjI1LjY3NDM3IiB4PSIyOS4yNDg4MjMiIHk9Ijg4LjQyMDgyMiIvPiYjeGE7ICAgICAgPHJlY3Qgc3R5bGU9ImRpc3BsYXk6aW5saW5lO29wYWNpdHk6MTtmaWxsOiNmZGZkZmQ7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiMyYzJjMmM7c3Ryb2tlLXdpZHRoOjYuNTA5NzgxODQ7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjMuODc1O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxIiBpZD0icmVjdDU5NjMtNi0yLTktMi05Ny0wLTIiIHdpZHRoPSIyNC4xODQwMjciIGhlaWdodD0iMjUuOTY0NTQyIiB4PSI1LjMyMTI5NzIiIHk9Ijg4LjI3NTczNCIvPiYjeGE7ICAgICAgPHJlY3Qgc3R5bGU9ImRpc3BsYXk6aW5saW5lO29wYWNpdHk6MTtmaWxsOiNmZGZkZmQ7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiMyYzJjMmM7c3Ryb2tlLXdpZHRoOjYuNTA5NzgxODQ7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjMuODc1O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxIiBpZD0icmVjdDU5NjMtNi0yLTktMy0zLTktNyIgd2lkdGg9IjQ5LjQ2NzcxMiIgaGVpZ2h0PSIyNS42NzQzNyIgeD0iNzguNzM1MDg1IiB5PSI4OC40MjA4MjIiLz4mI3hhOyAgICAgIDxyZWN0IHN0eWxlPSJkaXNwbGF5OmlubGluZTtvcGFjaXR5OjE7ZmlsbDojZmRmZGZkO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojMmMyYzJjO3N0cm9rZS13aWR0aDo2LjUwOTc4MTg0O3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDozLjg3NTtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIgaWQ9InJlY3Q1OTYzLTYtMi05LTItOS02LTMtMCIgd2lkdGg9IjI0LjE4NDAyNyIgaGVpZ2h0PSIyNS45NjQ1NDIiIHg9IjEyOC45NDkzIiB5PSI4OC4yNzU3MzQiLz4mI3hhOyAgICAgIDxyZWN0IHN0eWxlPSJkaXNwbGF5OmlubGluZTtvcGFjaXR5OjE7ZmlsbDojZmRmZGZkO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojMmMyYzJjO3N0cm9rZS13aWR0aDo2LjUwOTc4MTg0O3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDozLjg3NTtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIgaWQ9InJlY3Q1OTYzLTYtMi0xLTYtOSIgd2lkdGg9IjQ1LjAyMjUzIiBoZWlnaHQ9IjI4LjI3NDA3NSIgeD0iNTYuNzE2Nzg1IiB5PSI1OS4zNjk2MTciLz4mI3hhOyAgICA8L2c+JiN4YTsgIDwvZz4mI3hhOzwvc3ZnPg==" preserveAspectRatio="none" pointer-events="none"/><image x="330" y="50.5" width="41" height="42" xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIGlkPSJzdmc2MjkxIiB2aWV3Qm94PSIwIDAgMTQ2LjQ3MjE4IDE0Ny42NTY5MSIgaGVpZ2h0PSI0MS42NzIwNjJtbSIgd2lkdGg9IjQxLjMzNzcwNG1tIj4mI3hhOyAgPGRlZnMgaWQ9ImRlZnM2MjkzIi8+JiN4YTsgIDxtZXRhZGF0YSBpZD0ibWV0YWRhdGE2Mjk2Ij4mI3hhOyAgICA8cmRmOlJERj4mI3hhOyAgICAgIDxjYzpXb3JrIHJkZjphYm91dD0iIj4mI3hhOyAgICAgICAgPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+JiN4YTsgICAgICAgIDxkYzp0eXBlIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiLz4mI3hhOyAgICAgICAgPGRjOnRpdGxlLz4mI3hhOyAgICAgIDwvY2M6V29yaz4mI3hhOyAgICA8L3JkZjpSREY+JiN4YTsgIDwvbWV0YWRhdGE+JiN4YTsgIDxnIHRyYW5zZm9ybT0ibWF0cml4KDEuNzkwNTY4NiwwLDAsMS44MDUwNTE1LC0yMzguODM0NDQsLTcxMS43NjQ4OCkiIGlkPSJsYXllcjEiPiYjeGE7ICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC00MzcuODY2NjksLTExMS44MTQwNCkiIGlkPSJnNDUzNyI+JiN4YTsgICAgICA8Y2lyY2xlIHN0eWxlPSJvcGFjaXR5OjE7ZmlsbDojYjE4Y2JmO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojN2I2NDk4O3N0cm9rZS13aWR0aDoxLjg4MzY5Mzc7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1kYXNob2Zmc2V0OjA7c3Ryb2tlLW9wYWNpdHk6MSIgaWQ9InBhdGg0NTA1IiBjeD0iNjEyLjE1MjQiIGN5PSI1NDcuMDMzMzkiIHI9IjM5Ljk1OTE3OSIvPiYjeGE7ICAgICAgPHBhdGggc3R5bGU9ImNvbG9yOiMwMDAwMDA7Zm9udC1zdHlsZTpub3JtYWw7Zm9udC12YXJpYW50Om5vcm1hbDtmb250LXdlaWdodDpub3JtYWw7Zm9udC1zdHJldGNoOm5vcm1hbDtmb250LXNpemU6bWVkaXVtO2xpbmUtaGVpZ2h0Om5vcm1hbDtmb250LWZhbWlseTpzYW5zLXNlcmlmO3RleHQtaW5kZW50OjA7dGV4dC1hbGlnbjpzdGFydDt0ZXh0LWRlY29yYXRpb246bm9uZTt0ZXh0LWRlY29yYXRpb24tbGluZTpub25lO3RleHQtZGVjb3JhdGlvbi1zdHlsZTpzb2xpZDt0ZXh0LWRlY29yYXRpb24tY29sb3I6IzAwMDAwMDtsZXR0ZXItc3BhY2luZzpub3JtYWw7d29yZC1zcGFjaW5nOm5vcm1hbDt0ZXh0LXRyYW5zZm9ybTpub25lO3dyaXRpbmctbW9kZTpsci10YjtkaXJlY3Rpb246bHRyO2Jhc2VsaW5lLXNoaWZ0OmJhc2VsaW5lO3RleHQtYW5jaG9yOnN0YXJ0O3doaXRlLXNwYWNlOm5vcm1hbDtjbGlwLXJ1bGU6bm9uemVybztkaXNwbGF5OmlubGluZTtvdmVyZmxvdzp2aXNpYmxlO3Zpc2liaWxpdHk6dmlzaWJsZTtvcGFjaXR5OjE7aXNvbGF0aW9uOmF1dG87bWl4LWJsZW5kLW1vZGU6bm9ybWFsO2NvbG9yLWludGVycG9sYXRpb246c1JHQjtjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM6bGluZWFyUkdCO3NvbGlkLWNvbG9yOiMwMDAwMDA7c29saWQtb3BhY2l0eToxO2ZpbGw6I2ZkZmJmZjtmaWxsLW9wYWNpdHk6MTtmaWxsLXJ1bGU6bm9uemVybztzdHJva2U6IzdiNjQ5ODtzdHJva2Utd2lkdGg6MC41O3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2UtZGFzaG9mZnNldDowO3N0cm9rZS1vcGFjaXR5OjE7Y29sb3ItcmVuZGVyaW5nOmF1dG87aW1hZ2UtcmVuZGVyaW5nOmF1dG87c2hhcGUtcmVuZGVyaW5nOmF1dG87dGV4dC1yZW5kZXJpbmc6YXV0bztlbmFibGUtYmFja2dyb3VuZDphY2N1bXVsYXRlIiBkPSJtIDYxMi4xNTIzNCwyMTEuNzU1ODYgYyAtMTIuOTUyMDYsMCAtMjMuODExMTcsOS4wNzU1MyAtMjYuNTc0MjIsMjEuMjAxMTcgaCAtOC4yNzUzOSB2IDExLjM5NjQ5IGggOC4xMTUyNCBjIDIuNDg3MDcsMTIuNDg3ODcgMTMuNTI0OTYsMjEuOTI1NzggMjYuNzM0MzcsMjEuOTI1NzggMTMuMjA5NDMsMCAyNC4yNDczMSwtOS40Mzc5MSAyNi43MzQzOCwtMjEuOTI1NzggaCA2Ljk4MDQ3IHYgLTExLjM5NjQ5IGggLTcuMTQwNjMgYyAtMi43NjMwNCwtMTIuMTI1NjQgLTEzLjYyMjE0LC0yMS4yMDExNyAtMjYuNTc0MjIsLTIxLjIwMTE3IHogbSAwLDMuNSBjIDExLjA0ODI0LDAgMjAuMzA5MzIsNy41MDI5NyAyMi45ODI0MywxNy43MDExNyBoIC0xMC43MzQzOCB2IDExLjM5NjQ5IGggMTAuOTA4MiBjIC0yLjQxNjE5LDEwLjU2NDg0IC0xMS44NDgzOCwxOC40MjU3OCAtMjMuMTU2MjUsMTguNDI1NzggLTExLjMwNzg3LDAgLTIwLjc0MDA2LC03Ljg2MDk0IC0yMy4xNTYyNSwtMTguNDI1NzggaCA5Ljc3MTQ5IHYgLTExLjM5NjQ5IGggLTkuNTk3NjYgYyAyLjY3MzExLC0xMC4xOTgyIDExLjkzNDE4LC0xNy43MDExNyAyMi45ODI0MiwtMTcuNzAxMTcgeiIgaWQ9InBhdGg0NTA3IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLDMwOC4yNjc3MikiLz4mI3hhOyAgICA8L2c+JiN4YTsgIDwvZz4mI3hhOzwvc3ZnPg==" preserveAspectRatio="none" pointer-events="none"/><image x="330" y="152.5" width="41" height="41" xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNDEuMzM3NzA4bW0iIGhlaWdodD0iNDEuMzM3NzA4bW0iIHZpZXdCb3g9IjAgMCAxNDYuNDcyMTkgMTQ2LjQ3MjE5IiBpZD0ic3ZnNTY2NSIgdmVyc2lvbj0iMS4xIj4mI3hhOyAgPGRlZnMgaWQ9ImRlZnM1NjY3Ii8+JiN4YTsgIDxtZXRhZGF0YSBpZD0ibWV0YWRhdGE1NjcwIj4mI3hhOyAgICA8cmRmOlJERj4mI3hhOyAgICAgIDxjYzpXb3JrIHJkZjphYm91dD0iIj4mI3hhOyAgICAgICAgPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+JiN4YTsgICAgICAgIDxkYzp0eXBlIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiLz4mI3hhOyAgICAgICAgPGRjOnRpdGxlLz4mI3hhOyAgICAgIDwvY2M6V29yaz4mI3hhOyAgICA8L3JkZjpSREY+JiN4YTsgIDwvbWV0YWRhdGE+JiN4YTsgIDxnIGlkPSJsYXllcjEiIHRyYW5zZm9ybT0ibWF0cml4KDEuNzc2Nzc0NywwLDAsMS43NzY3NzQ3LC00NzUuMDI1ODIsLTU2OC4wNjE2NikiPiYjeGE7ICAgIDxnIGlkPSJnNDQ5NyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTQ4NS41NjMyMSwtMTg2LjI2ODg4KSI+JiN4YTsgICAgICA8Y2lyY2xlIHI9IjQwLjM4NTY0NyIgY3k9IjU0Ny4yMDI1MSIgY3g9Ijc5NC4xMzQ2NCIgaWQ9InBhdGg0NDI5IiBzdHlsZT0ib3BhY2l0eToxO2ZpbGw6IzM0OGJjMztmaWxsLW9wYWNpdHk6MTtzdHJva2U6IzI1N2RiNjtzdHJva2Utd2lkdGg6MS42NjU4MjI4NjtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIvPiYjeGE7ICAgICAgPGcgaWQ9Imc0NDkxIj4mI3hhOyAgICAgICAgPHBhdGggc3R5bGU9Im9wYWNpdHk6MTtmaWxsOiNmYmZkZmY7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiMyNTdkYjY7c3Ryb2tlLXdpZHRoOjAuNTtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLWRhc2hvZmZzZXQ6MDtzdHJva2Utb3BhY2l0eToxIiBkPSJtIDc3Ni4xOTE0MSwyMTMuOTE0MDYgLTcuMTY5OTMsNy4zNTM1MiAxMi45NjY4LDEyLjgxMjUgLTMuMDk3NjYsMy4xMDc0MiBoIDEzLjI1NzgyIHYgLTEzLjM4NDc3IGwgLTIuOTMzNiwyLjk4MDQ3IHoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsMzA4LjI2NzcyKSIgaWQ9InJlY3Q0NDMxIi8+JiN4YTsgICAgICAgIDxwYXRoIHN0eWxlPSJvcGFjaXR5OjE7ZmlsbDojZmJmZGZmO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojMjU3ZGI2O3N0cm9rZS13aWR0aDowLjU7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1kYXNob2Zmc2V0OjA7c3Ryb2tlLW9wYWNpdHk6MSIgZD0ibSA4MTEuNzU3OTcsNTcxLjkyODM3IDcuMTY5OTMsLTcuMzUzNTIgLTEyLjk2NjgsLTEyLjgxMjUgMy4wOTc2NiwtMy4xMDc0MiBoIC0xMy4yNTc4MiB2IDEzLjM4NDc3IGwgMi45MzM2LC0yLjk4MDQ3IHoiIGlkPSJyZWN0NDQzMS04Ii8+JiN4YTsgICAgICAgIDxwYXRoIHN0eWxlPSJvcGFjaXR5OjE7ZmlsbDojZmJmZGZmO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojMjU3ZGI2O3N0cm9rZS13aWR0aDowLjU7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1kYXNob2Zmc2V0OjA7c3Ryb2tlLW9wYWNpdHk6MSIgZD0ibSA3OTAuNzQ4ODMsNTUwLjUxMzcyIC0wLjQ3NTAyLC0wLjUxNDY1IC02LjU5MDM5LDAuNDM3MzUgLTguMzMxNzEsOC40MzIwNSAtMy4xMDc0MiwtMy4wOTc2NiB2IDEzLjI1NzgyIGggMTMuMzg0NzcgbCAtMi45ODA0NywtMi45MzM2IDguNzk5NDIsLTguOTA0OTEgeiIgaWQ9InJlY3Q0NDMxLTgtOCIvPiYjeGE7ICAgICAgICA8cGF0aCBzdHlsZT0ib3BhY2l0eToxO2ZpbGw6I2ZiZmRmZjtmaWxsLW9wYWNpdHk6MTtzdHJva2U6IzI1N2RiNjtzdHJva2Utd2lkdGg6MC41O3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2UtZGFzaG9mZnNldDowO3N0cm9rZS1vcGFjaXR5OjEiIGQ9Im0gNzk3LjQ1MTU5LDU0My4xNTQwOSAwLjQ3NTAyLDAuNTE0NjUgNi41OTAzOSwtMC40MzczNSA4LjMzMTcxLC04LjQzMjA1IDMuMTA3NDIsMy4wOTc2NiB2IC0xMy4yNTc4MiBoIC0xMy4zODQ3NyBsIDIuOTgwNDcsMi45MzM2IC04Ljc5OTQyLDguOTA0OTEgeiIgaWQ9InJlY3Q0NDMxLTgtOC03Ii8+JiN4YTsgICAgICA8L2c+JiN4YTsgICAgPC9nPiYjeGE7ICA8L2c+JiN4YTs8L3N2Zz4=" preserveAspectRatio="none" pointer-events="none"/><image x="330" y="204.5" width="41" height="40" xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIGlkPSJzdmc1NjY1IiB2aWV3Qm94PSIwIDAgMTQ2LjQ3MjE4IDE0MC4wODcxNCIgaGVpZ2h0PSIzOS41MzU3MDZtbSIgd2lkdGg9IjQxLjMzNzcwNG1tIj4mI3hhOyAgPGRlZnMgaWQ9ImRlZnM1NjY3Ii8+JiN4YTsgIDxtZXRhZGF0YSBpZD0ibWV0YWRhdGE1NjcwIj4mI3hhOyAgICA8cmRmOlJERj4mI3hhOyAgICAgIDxjYzpXb3JrIHJkZjphYm91dD0iIj4mI3hhOyAgICAgICAgPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+JiN4YTsgICAgICAgIDxkYzp0eXBlIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiLz4mI3hhOyAgICAgICAgPGRjOnRpdGxlLz4mI3hhOyAgICAgIDwvY2M6V29yaz4mI3hhOyAgICA8L3JkZjpSREY+JiN4YTsgIDwvbWV0YWRhdGE+JiN4YTsgIDxnIGlkPSJnODk3IiB0cmFuc2Zvcm09Im1hdHJpeCgxLjQxNDkyMzYsMCwwLDEuNDE0OTIzNiwtMTIwLjUwODYxLC0zLjEwNDk0MDMpIj4mI3hhOyAgICA8cmVjdCBzdHlsZT0ib3BhY2l0eToxO2ZpbGw6IzM0OGJjMztmaWxsLW9wYWNpdHk6MTtzdHJva2U6IzI1N2RiNjtzdHJva2Utd2lkdGg6Mi4zMDU4NTAyNztzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MjtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIgaWQ9InJlY3Q0MTM2LTIiIHdpZHRoPSIxMDEuMjEzNjUiIGhlaWdodD0iOTYuNzAxMDEyIiB4PSI4Ni4zMjI2MTciIHk9IjMuMzQ3MzQ3NyIgcnk9IjYuMTg3MjA3MiIvPiYjeGE7ICAgIDxnIHRyYW5zZm9ybT0ibWF0cml4KDEuNTI4MzQ1NCwwLDAsMS41MjgzNDU0LC0xMDc2LjUzODEsLTc4NC4zOTEyNSkiIGlkPSJnNDQ5MS02Ij4mI3hhOyAgICAgIDxwYXRoIHN0eWxlPSJvcGFjaXR5OjE7ZmlsbDojZmJmZGZmO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojMjU3ZGI2O3N0cm9rZS13aWR0aDowLjU7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1kYXNob2Zmc2V0OjA7c3Ryb2tlLW9wYWNpdHk6MSIgZD0ibSA3NzYuMTkxNDEsMjEzLjkxNDA2IC03LjE2OTkzLDcuMzUzNTIgMTIuOTY2OCwxMi44MTI1IC0zLjA5NzY2LDMuMTA3NDIgaCAxMy4yNTc4MiB2IC0xMy4zODQ3NyBsIC0yLjkzMzYsMi45ODA0NyB6IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLDMwOC4yNjc3MikiIGlkPSJyZWN0NDQzMS03Ii8+JiN4YTsgICAgICA8cGF0aCBzdHlsZT0ib3BhY2l0eToxO2ZpbGw6I2ZiZmRmZjtmaWxsLW9wYWNpdHk6MTtzdHJva2U6IzI1N2RiNjtzdHJva2Utd2lkdGg6MC41O3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2UtZGFzaG9mZnNldDowO3N0cm9rZS1vcGFjaXR5OjEiIGQ9Im0gODExLjc1Nzk3LDU3MS45MjgzNyA3LjE2OTkzLC03LjM1MzUyIC0xMi45NjY4LC0xMi44MTI1IDMuMDk3NjYsLTMuMTA3NDIgaCAtMTMuMjU3ODIgdiAxMy4zODQ3NyBsIDIuOTMzNiwtMi45ODA0NyB6IiBpZD0icmVjdDQ0MzEtOC01Ii8+JiN4YTsgICAgICA8cGF0aCBzdHlsZT0ib3BhY2l0eToxO2ZpbGw6I2ZiZmRmZjtmaWxsLW9wYWNpdHk6MTtzdHJva2U6IzI1N2RiNjtzdHJva2Utd2lkdGg6MC41O3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2UtZGFzaG9mZnNldDowO3N0cm9rZS1vcGFjaXR5OjEiIGQ9Im0gNzkwLjc0ODgzLDU1MC41MTM3MiAtMC40NzUwMiwtMC41MTQ2NSAtNi41OTAzOSwwLjQzNzM1IC04LjMzMTcxLDguNDMyMDUgLTMuMTA3NDIsLTMuMDk3NjYgdiAxMy4yNTc4MiBoIDEzLjM4NDc3IGwgLTIuOTgwNDcsLTIuOTMzNiA4Ljc5OTQyLC04LjkwNDkxIHoiIGlkPSJyZWN0NDQzMS04LTgtMyIvPiYjeGE7ICAgICAgPHBhdGggc3R5bGU9Im9wYWNpdHk6MTtmaWxsOiNmYmZkZmY7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiMyNTdkYjY7c3Ryb2tlLXdpZHRoOjAuNTtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLWRhc2hvZmZzZXQ6MDtzdHJva2Utb3BhY2l0eToxIiBkPSJtIDc5Ny40NTE1OSw1NDMuMTU0MDkgMC40NzUwMiwwLjUxNDY1IDYuNTkwMzksLTAuNDM3MzUgOC4zMzE3MSwtOC40MzIwNSAzLjEwNzQyLDMuMDk3NjYgdiAtMTMuMjU3ODIgaCAtMTMuMzg0NzcgbCAyLjk4MDQ3LDIuOTMzNiAtOC43OTk0Miw4LjkwNDkxIHoiIGlkPSJyZWN0NDQzMS04LTgtNy01Ii8+JiN4YTsgICAgPC9nPiYjeGE7ICA8L2c+JiN4YTs8L3N2Zz4=" preserveAspectRatio="none" pointer-events="none"/><image x="330" y="-0.5" width="41" height="41" xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNDEuMzM3NzA4bW0iIGhlaWdodD0iNDEuMzM3NzA4bW0iIHZpZXdCb3g9IjAgMCAxNDYuNDcyMTkgMTQ2LjQ3MjE5IiBpZD0ic3ZnNjg3OSIgdmVyc2lvbj0iMS4xIj4mI3hhOyAgPGRlZnMgaWQ9ImRlZnM2ODgxIi8+JiN4YTsgIDxtZXRhZGF0YSBpZD0ibWV0YWRhdGE2ODg0Ij4mI3hhOyAgICA8cmRmOlJERj4mI3hhOyAgICAgIDxjYzpXb3JrIHJkZjphYm91dD0iIj4mI3hhOyAgICAgICAgPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+JiN4YTsgICAgICAgIDxkYzp0eXBlIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiLz4mI3hhOyAgICAgICAgPGRjOnRpdGxlLz4mI3hhOyAgICAgIDwvY2M6V29yaz4mI3hhOyAgICA8L3JkZjpSREY+JiN4YTsgIDwvbWV0YWRhdGE+JiN4YTsgIDxnIGlkPSJsYXllcjEiIHRyYW5zZm9ybT0ibWF0cml4KDEuNzQyMzE3MiwwLDAsMS43NDIzMTcyLC00NTQuNDM3MDksLTc2OS42ODA5KSI+JiN4YTsgICAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTI2My41MTE4MywtMjg3LjM2MTIpIiBpZD0iZzUwMzAiPiYjeGE7ICAgICAgPGNpcmNsZSByPSI0MC45ODAwMTUiIGN5PSI3NzEuMTUxOTgiIGN4PSI1NjYuMzY4OTYiIGlkPSJwYXRoNDU0MSIgc3R5bGU9Im9wYWNpdHk6MTtmaWxsOiM3MGNiZDY7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiMyNzk1YTI7c3Ryb2tlLXdpZHRoOjIuMTA3NDM2MTg7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1kYXNob2Zmc2V0OjA7c3Ryb2tlLW9wYWNpdHk6MSIvPiYjeGE7ICAgICAgPHBhdGggaWQ9InJlY3Q0NTQzIiBkPSJtIDU2MC40MzM0Myw3NDUuODcxNyB2IDExLjg5ODQ0IGggMy43NTM5MSB2IDguMzIwMzEgaCAtMjUuNDcwNyB2IDExLjg5ODQ0IGggNS4yMDMxMiB2IDcuOTcyNjYgaCAtMi4yMzYzMyB2IDYuNDcwNyBoIDcuNjQ2NDkgdiAtNi40NzA3IGggLTIuMDU0NjkgdiAtNy45NzI2NiBoIDEwLjM0NTcgdiA3Ljk3MjY2IGggLTIuMTIzMDQgdiA2LjQ3MDcgaCA3LjY0NjQ4IHYgLTYuNDcwNyBoIC0yLjE2OTkyIHYgLTcuOTcyNjYgaCAxMC4zNDc2NiB2IDcuOTcyNjYgaCAtMi4wMDk3NyB2IDYuNDcwNyBoIDcuNjQ2NDkgdiAtNi40NzA3IGggLTIuMjgzMjEgdiAtNy45NzI2NiBoIDEwLjM0NTcxIHYgNy45NzI2NiBoIC0xLjg5NDU0IHYgNi40NzA3IGggNy42NDg0NCB2IC02LjQ3MDcgaCAtMi40MDAzOSB2IC03Ljk3MjY2IGggNS42NDY0OSB2IC0xMS44OTg0NCBoIC0yNS41OTU3MSB2IC04LjMyMDMxIGggMy43NTE5NSBWIDc0NS44NzE3IFoiIHN0eWxlPSJvcGFjaXR5OjE7ZmlsbDojZmZmZmZmO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojMjc5NWEyO3N0cm9rZS13aWR0aDowLjU7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1kYXNob2Zmc2V0OjA7c3Ryb2tlLW9wYWNpdHk6MSIvPiYjeGE7ICAgIDwvZz4mI3hhOyAgPC9nPiYjeGE7PC9zdmc+" preserveAspectRatio="none" pointer-events="none"/><image x="330" y="101.5" width="41" height="41" xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNDEuMzM3NzA4bW0iIGhlaWdodD0iNDEuMzM3NzA4bW0iIHZpZXdCb3g9IjAgMCAxNDYuNDcyMTkgMTQ2LjQ3MjE5IiBpZD0ic3ZnNTAzNCIgdmVyc2lvbj0iMS4xIj4mI3hhOyAgPGRlZnMgaWQ9ImRlZnM1MDM2Ii8+JiN4YTsgIDxtZXRhZGF0YSBpZD0ibWV0YWRhdGE1MDM5Ij4mI3hhOyAgICA8cmRmOlJERj4mI3hhOyAgICAgIDxjYzpXb3JrIHJkZjphYm91dD0iIj4mI3hhOyAgICAgICAgPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+JiN4YTsgICAgICAgIDxkYzp0eXBlIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiLz4mI3hhOyAgICAgICAgPGRjOnRpdGxlLz4mI3hhOyAgICAgIDwvY2M6V29yaz4mI3hhOyAgICA8L3JkZjpSREY+JiN4YTsgIDwvbWV0YWRhdGE+JiN4YTsgIDxnIGlkPSJsYXllcjEiIHRyYW5zZm9ybT0ibWF0cml4KDEuODM0MTc3NywwLDAsMS44MzQxNzc3LC01NDUuMTQzODIsLTg2Ni41MjcyNCkiPiYjeGE7ICAgIDxnIGlkPSJnNDQyNSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNTUuMzk1MzksLTMzLjA3MTM4OSkiPiYjeGE7ICAgICAgPGNpcmNsZSByPSIzOC45Mjg1NyIgY3k9IjU0NS40MzM1OSIgY3g9IjI4MS43NDc0NyIgaWQ9InBhdGg0MTUzIiBzdHlsZT0ib3BhY2l0eToxO2ZpbGw6IzM3YjI5YjtmaWxsLW9wYWNpdHk6MTtzdHJva2U6IzI5YTU4ZDtzdHJva2Utd2lkdGg6MjtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIvPiYjeGE7ICAgICAgPHBhdGggaWQ9InBhdGg0MTUzLTEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsMzA4LjI2NzcyKSIgZD0ibSAyODIuMDg1OTQsMjA3LjkzMTY0IGEgNS44MzMxMTcsNS44MzMxMTcgMCAwIDAgLTUuODMzOTksNS44MzIwMyA1LjgzMzExNyw1LjgzMzExNyAwIDAgMCA0LjMxODM2LDUuNjI2OTUgdiA4Ljc1IGEgOS45OTk5OTYyLDkuOTk5OTk2MiAwIDAgMCAtNy4yNDAyMyw1LjMyMjI3IGwgLTguMTgzNiwtMi40ODYzMyBhIDUuODMzMTE3LDUuODMzMTE3IDAgMCAwIDAuMDQzLC0wLjY3MTg3IDUuODMzMTE3LDUuODMzMTE3IDAgMCAwIC01LjgzMjAzLC01LjgzMjAzIDUuODMzMTE3LDUuODMzMTE3IDAgMCAwIC01LjgzMzk4LDUuODMyMDMgNS44MzMxMTcsNS44MzMxMTcgMCAwIDAgNS44MzM5OCw1LjgzMzk4IDUuODMzMTE3LDUuODMzMTE3IDAgMCAwIDQuNjYwMTYsLTIuMzM1OTQgbCA4LjM2MTMzLDIuNTQxMDIgYSA5Ljk5OTk5NjIsOS45OTk5OTYyIDAgMCAwIC0wLjE0ODQ0LDEuNjU4MiA5Ljk5OTk5NjIsOS45OTk5OTYyIDAgMCAwIDMuMTE1MjMsNy4yMzYzMyBsIC01LjQ4MDQ3LDYuMzM1OTQgYSA1LjgzMzExNyw1LjgzMzExNyAwIDAgMCAtMS45MjE4NywtMC4zMzIwMyA1LjgzMzExNyw1LjgzMzExNyAwIDAgMCAtNS44MzM5OCw1LjgzMjAzIDUuODMzMTE3LDUuODMzMTE3IDAgMCAwIDUuODMzOTgsNS44MzM5OCA1LjgzMzExNyw1LjgzMzExNyAwIDAgMCA1LjgzMjAzLC01LjgzMzk4IDUuODMzMTE3LDUuODMzMTE3IDAgMCAwIC0xLjM5NDUzLC0zLjc3MzQ0IGwgNS40NzA3LC02LjMyMjI2IGEgOS45OTk5OTYyLDkuOTk5OTk2MiAwIDAgMCA0LjM3ODkxLDEuMDIzNDMgOS45OTk5OTYyLDkuOTk5OTk2MiAwIDAgMCA0LjAzOTA2LC0wLjg2NTIzIGwgNS41MzEyNSw3LjEzNDc2IGEgNS44MzMxMTcsNS44MzMxMTcgMCAwIDAgLTEuMDI3MzQsMy4zMDg2IDUuODMzMTE3LDUuODMzMTE3IDAgMCAwIDUuODMyMDMsNS44MzIwMyA1LjgzMzExNyw1LjgzMzExNyAwIDAgMCA1LjgzMzk4LC01LjgzMjAzIDUuODMzMTE3LDUuODMzMTE3IDAgMCAwIC01LjgzMzk4LC01LjgzMzk5IDUuODMzMTE3LDUuODMzMTE3IDAgMCAwIC0yLjM0NzY2LDAuNTAxOTYgbCAtNS4zMTI1LC02Ljg1MTU3IGEgOS45OTk5OTYyLDkuOTk5OTk2MiAwIDAgMCAzLjI4MzIxLC03LjM5NDUzIDkuOTk5OTk2Miw5Ljk5OTk5NjIgMCAwIDAgLTAuMTgxNjQsLTEuODYxMzMgbCA3Ljg1NzQyLC0yLjc3OTI5IGEgNS44MzMxMTcsNS44MzMxMTcgMCAwIDAgNS4wMzUxNSwyLjkwNDI5IDUuODMzMTE3LDUuODMzMTE3IDAgMCAwIDUuODMzOTksLTUuODMzOTggNS44MzMxMTcsNS44MzMxMTcgMCAwIDAgLTUuODMzOTksLTUuODMyMDMgNS44MzMxMTcsNS44MzMxMTcgMCAwIDAgLTUuODMyMDMsNS44MzIwMyA1LjgzMzExNyw1LjgzMzExNyAwIDAgMCAwLjAwMiwwLjA1NDcgbCAtOC4wNDQ5MywyLjg0NTcgYSA5Ljk5OTk5NjIsOS45OTk5OTYyIDAgMCAwIC03LjMzNzg5LC01LjIwNTA4IHYgLTguNzY5NTMgYSA1LjgzMzExNyw1LjgzMzExNyAwIDAgMCA0LjE5MTQxLC01LjU5Mzc1IDUuODMzMTE3LDUuODMzMTE3IDAgMCAwIC01LjgzMjAzLC01LjgzMjAzIHoiIHN0eWxlPSJvcGFjaXR5OjE7ZmlsbDojZjlmYmZhO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojMjlhNThkO3N0cm9rZS13aWR0aDowLjU7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiLz4mI3hhOyAgICA8L2c+JiN4YTsgIDwvZz4mI3hhOzwvc3ZnPg==" preserveAspectRatio="none" pointer-events="none"/><image x="158" y="698" width="135" height="35" xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIGlkPSJzdmc0Mjk0IiB2aWV3Qm94PSIwIDAgNDc3LjE1NjU2IDEyMy40MDkwMiIgaGVpZ2h0PSIzNC44Mjg3NjZtbSIgd2lkdGg9IjEzNC42NjQxOG1tIj4mI3hhOyAgPGRlZnMgaWQ9ImRlZnM0Mjk2Ii8+JiN4YTsgIDxtZXRhZGF0YSBpZD0ibWV0YWRhdGE0Mjk5Ij4mI3hhOyAgICA8cmRmOlJERj4mI3hhOyAgICAgIDxjYzpXb3JrIHJkZjphYm91dD0iIj4mI3hhOyAgICAgICAgPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+JiN4YTsgICAgICAgIDxkYzp0eXBlIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiLz4mI3hhOyAgICAgICAgPGRjOnRpdGxlLz4mI3hhOyAgICAgIDwvY2M6V29yaz4mI3hhOyAgICA8L3JkZjpSREY+JiN4YTsgIDwvbWV0YWRhdGE+JiN4YTsgIDxyZWN0IHJ5PSI3LjU0NDM3NCIgeT0iMi43NDgyODE1IiB4PSIyLjc0ODI4MTUiIGhlaWdodD0iMTE3LjkxMjQ1IiB3aWR0aD0iNDcxLjY2MDAzIiBpZD0icmVjdDQxMzYtMi0zLTkiIHN0eWxlPSJvcGFjaXR5OjE7ZmlsbDojZGRkZGRkO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojMGMzYzg2O3N0cm9rZS13aWR0aDo0LjgzNTc5NTAyO3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDozLjg3NTtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIvPiYjeGE7ICA8cmVjdCByeT0iNi4yMjQwNTE1IiBzdHlsZT0iZmlsbDojZmZmZmZmO3N0cm9rZTojMGMzYzg2O3N0cm9rZS13aWR0aDozLjI5OTE5NTQyO3N0cm9rZS1taXRlcmxpbWl0OjMuODc1O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxIiB5PSIyMi4wOTMwMzkiIHg9IjI0LjAxOTg1NyIgaGVpZ2h0PSI3OS4yMjI5NDYiIHdpZHRoPSIzMjUuNzk3NjQiIGlkPSJyZWN0MzcyOS0zLTYtMyIvPiYjeGE7ICA8cmVjdCByeT0iMi4xOTg3ODEzIiB5PSIyMS45NTkyMjEiIHg9IjM2Ny4xMDg1MiIgaGVpZ2h0PSI3OS42ODg3MTMiIHdpZHRoPSI4Ni41OTIxNzgiIGlkPSJyZWN0Njc4Mi00LTY1LTMtMC02IiBzdHlsZT0ib3BhY2l0eToxO2ZpbGw6I2QzNDUzYTtmaWxsLW9wYWNpdHk6MTtzdHJva2U6IzJjMmMyYztzdHJva2Utd2lkdGg6NC42ODc1O3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjptaXRlcjtzdHJva2UtbWl0ZXJsaW1pdDozLjg3NTtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIvPiYjeGE7ICA8ZyBzdHlsZT0ic3Ryb2tlOiMyYzJjMmM7c3Ryb2tlLW9wYWNpdHk6MSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTExOC44ODU1NSwtNTQuOTI1MjU4KSIgaWQ9Imc5MzEiPiYjeGE7ICAgIDxyZWN0IHk9Ijc3LjEyNjE3NSIgeD0iNDg2LjY5MjYzIiBoZWlnaHQ9IjE2LjMzNDY1NiIgd2lkdGg9Ijg1LjE5NTAzIiBpZD0icmVjdDU5NjMtNSIgc3R5bGU9Im9wYWNpdHk6MTtmaWxsOiNkMzQ1M2E7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiMyYzJjMmM7c3Ryb2tlLXdpZHRoOjMuNzUwMDAwMjQ7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjMuODc1O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxIi8+JiN4YTsgICAgPHJlY3QgeT0iMTM5Ljk5Njg0IiB4PSI0ODYuNjkyNjMiIGhlaWdodD0iMTYuMzM0NjU2IiB3aWR0aD0iODUuMTk1MDMiIGlkPSJyZWN0NTk2My02LTMiIHN0eWxlPSJkaXNwbGF5OmlubGluZTtvcGFjaXR5OjE7ZmlsbDojZDM0NTNhO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojMmMyYzJjO3N0cm9rZS13aWR0aDozLjc1MDAwMDI0O3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDozLjg3NTtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIvPiYjeGE7ICAgIDxyZWN0IHk9IjEwOC43NjUyMSIgeD0iNDg2LjY5MjYzIiBoZWlnaHQ9IjE2LjIzODk5MSIgd2lkdGg9IjI5LjU5ODE2IiBpZD0icmVjdDU5NjMtNi0yLTUiIHN0eWxlPSJkaXNwbGF5OmlubGluZTtvcGFjaXR5OjE7ZmlsbDojZDM0NTNhO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojMmMyYzJjO3N0cm9rZS13aWR0aDozLjc1MDAwMDI0O3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDozLjg3NTtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIvPiYjeGE7ICAgIDxyZWN0IHk9IjkzLjU4MDQyOSIgeD0iNTAwLjQ3OTEzIiBoZWlnaHQ9IjE0Ljc4OTg4IiB3aWR0aD0iMjguNDk2MTgzIiBpZD0icmVjdDU5NjMtNi0yLTktNiIgc3R5bGU9ImRpc3BsYXk6aW5saW5lO29wYWNpdHk6MTtmaWxsOiNkMzQ1M2E7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiMyYzJjMmM7c3Ryb2tlLXdpZHRoOjMuNzUwMDAwMjQ7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjMuODc1O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxIi8+JiN4YTsgICAgPHJlY3QgeT0iOTMuNjMxODEzIiB4PSI0ODYuNjkyNjMiIGhlaWdodD0iMTQuNjg3MTA2IiB3aWR0aD0iMTMuOTM3MTgzIiBpZD0icmVjdDU5NjMtNi0yLTktMi0yIiBzdHlsZT0iZGlzcGxheTppbmxpbmU7b3BhY2l0eToxO2ZpbGw6I2QzNDUzYTtmaWxsLW9wYWNpdHk6MTtzdHJva2U6IzJjMmMyYztzdHJva2Utd2lkdGg6My43NTAwMDAyNDtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6My44NzU7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiLz4mI3hhOyAgICA8cmVjdCB5PSI5My41ODA0MjkiIHg9IjUyOC45ODYwMiIgaGVpZ2h0PSIxNC43ODk4OCIgd2lkdGg9IjI4LjQ5NjE4MyIgaWQ9InJlY3Q1OTYzLTYtMi05LTMtOSIgc3R5bGU9ImRpc3BsYXk6aW5saW5lO29wYWNpdHk6MTtmaWxsOiNkMzQ1M2E7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiMyYzJjMmM7c3Ryb2tlLXdpZHRoOjMuNzUwMDAwMjQ7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjMuODc1O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxIi8+JiN4YTsgICAgPHJlY3QgeT0iOTMuNjMxODEzIiB4PSI1NTcuOTUwNDQiIGhlaWdodD0iMTQuNjg3MTA2IiB3aWR0aD0iMTMuOTM3MTgzIiBpZD0icmVjdDU5NjMtNi0yLTktMi05LTEiIHN0eWxlPSJkaXNwbGF5OmlubGluZTtvcGFjaXR5OjE7ZmlsbDojZDM0NTNhO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojMmMyYzJjO3N0cm9rZS13aWR0aDozLjc1MDAwMDI0O3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDozLjg3NTtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIvPiYjeGE7ICAgIDxyZWN0IHk9IjEwOC43NjUyMSIgeD0iNTQyLjI4OTQ5IiBoZWlnaHQ9IjE2LjIzODk5MSIgd2lkdGg9IjI5LjU5ODE2IiBpZD0icmVjdDU5NjMtNi0yLTItMiIgc3R5bGU9ImRpc3BsYXk6aW5saW5lO29wYWNpdHk6MTtmaWxsOiNkMzQ1M2E7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiMyYzJjMmM7c3Ryb2tlLXdpZHRoOjMuNzUwMDAwMjQ7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjMuODc1O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxIi8+JiN4YTsgICAgPHJlY3QgeT0iMTI1LjQ3NjA5IiB4PSI1MDAuNDk5MyIgaGVpZ2h0PSIxNC43ODk4OCIgd2lkdGg9IjI4LjQ5NjE4MyIgaWQ9InJlY3Q1OTYzLTYtMi05LTgtNyIgc3R5bGU9ImRpc3BsYXk6aW5saW5lO29wYWNpdHk6MTtmaWxsOiNkMzQ1M2E7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiMyYzJjMmM7c3Ryb2tlLXdpZHRoOjMuNzUwMDAwMjQ7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjMuODc1O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxIi8+JiN4YTsgICAgPHJlY3QgeT0iMTI1LjM5MjUxIiB4PSI0ODYuNzE1NyIgaGVpZ2h0PSIxNC45NTcwMzYiIHdpZHRoPSIxMy45MzEzNTkiIGlkPSJyZWN0NTk2My02LTItOS0yLTk3LTAiIHN0eWxlPSJkaXNwbGF5OmlubGluZTtvcGFjaXR5OjE7ZmlsbDojZDM0NTNhO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojMmMyYzJjO3N0cm9rZS13aWR0aDozLjc1MDAwMDI0O3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDozLjg3NTtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIvPiYjeGE7ICAgIDxyZWN0IHk9IjEyNS40NzYwOSIgeD0iNTI5LjAwNjE2IiBoZWlnaHQ9IjE0Ljc4OTg4IiB3aWR0aD0iMjguNDk2MTgzIiBpZD0icmVjdDU5NjMtNi0yLTktMy0zLTkiIHN0eWxlPSJkaXNwbGF5OmlubGluZTtvcGFjaXR5OjE7ZmlsbDojZDM0NTNhO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojMmMyYzJjO3N0cm9rZS13aWR0aDozLjc1MDAwMDI0O3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDozLjg3NTtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIvPiYjeGE7ICAgIDxyZWN0IHk9IjEyNS4zOTI1MSIgeD0iNTU3LjkzMjM3IiBoZWlnaHQ9IjE0Ljk1NzAzNiIgd2lkdGg9IjEzLjkzMTM1OSIgaWQ9InJlY3Q1OTYzLTYtMi05LTItOS02LTMiIHN0eWxlPSJkaXNwbGF5OmlubGluZTtvcGFjaXR5OjE7ZmlsbDojZDM0NTNhO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojMmMyYzJjO3N0cm9rZS13aWR0aDozLjc1MDAwMDI0O3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDozLjg3NTtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIvPiYjeGE7ICAgIDxyZWN0IHk9IjEwOC43NDA5NyIgeD0iNTE2LjMyMjM5IiBoZWlnaHQ9IjE2LjI4NzQ1NyIgd2lkdGg9IjI1LjkzNTUwOSIgaWQ9InJlY3Q1OTYzLTYtMi0xLTYiIHN0eWxlPSJkaXNwbGF5OmlubGluZTtvcGFjaXR5OjE7ZmlsbDojZDM0NTNhO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojMmMyYzJjO3N0cm9rZS13aWR0aDozLjc1MDAwMDI0O3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDozLjg3NTtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIvPiYjeGE7ICA8L2c+JiN4YTs8L3N2Zz4=" preserveAspectRatio="none" pointer-events="none"/><image x="158" y="654.5" width="135" height="35" xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTM0LjY2NDE4bW0iIGhlaWdodD0iMzQuODI4NzY2bW0iIHZpZXdCb3g9IjAgMCA0NzcuMTU2NTYgMTIzLjQwOTAyIiBpZD0ic3ZnNDI5NCIgdmVyc2lvbj0iMS4xIj4mI3hhOyAgPGRlZnMgaWQ9ImRlZnM0Mjk2Ii8+JiN4YTsgIDxtZXRhZGF0YSBpZD0ibWV0YWRhdGE0Mjk5Ij4mI3hhOyAgICA8cmRmOlJERj4mI3hhOyAgICAgIDxjYzpXb3JrIHJkZjphYm91dD0iIj4mI3hhOyAgICAgICAgPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+JiN4YTsgICAgICAgIDxkYzp0eXBlIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiLz4mI3hhOyAgICAgICAgPGRjOnRpdGxlLz4mI3hhOyAgICAgIDwvY2M6V29yaz4mI3hhOyAgICA8L3JkZjpSREY+JiN4YTsgIDwvbWV0YWRhdGE+JiN4YTsgIDxyZWN0IHN0eWxlPSJvcGFjaXR5OjE7ZmlsbDojZGRkZGRkO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojMGMzYzg2O3N0cm9rZS13aWR0aDo0LjgzNTc5NTAyO3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDozLjg3NTtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIgaWQ9InJlY3Q0MTM2LTItMy05IiB3aWR0aD0iNDcxLjY2MDAzIiBoZWlnaHQ9IjExNy45MTI0NSIgeD0iMi43NDgyODE1IiB5PSIyLjc0ODI4MTUiIHJ5PSI3LjU0NDM3NCIvPiYjeGE7ICA8cmVjdCBpZD0icmVjdDM3MjktMy02LTMiIHdpZHRoPSIzMjUuNzk3NjQiIGhlaWdodD0iNzkuMjIyOTQ2IiB4PSIyNC4wMTk4NTciIHk9IjIyLjA5MzAzOSIgc3R5bGU9ImZpbGw6I2ZmZmZmZjtzdHJva2U6IzBjM2M4NjtzdHJva2Utd2lkdGg6My4yOTkxOTU0MjtzdHJva2UtbWl0ZXJsaW1pdDozLjg3NTtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIgcnk9IjYuMjI0MDUxNSIvPiYjeGE7ICA8cmVjdCBzdHlsZT0ib3BhY2l0eToxO2ZpbGw6I2QzNDUzYTtmaWxsLW9wYWNpdHk6MTtzdHJva2U6IzBjM2M4NjtzdHJva2Utd2lkdGg6NC42ODc1O3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjptaXRlcjtzdHJva2UtbWl0ZXJsaW1pdDozLjg3NTtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIgaWQ9InJlY3Q2NzgyLTQtNjUtMy0wLTYiIHdpZHRoPSI4Ni41OTIxNzgiIGhlaWdodD0iNzkuNjg4NzEzIiB4PSIzNjcuMTA4NTIiIHk9IjIxLjk1OTIyMSIgcnk9IjIuMTk4NzgxMyIvPiYjeGE7ICA8cmVjdCB5PSIyMi4yMDA5MTYiIHg9IjM2Ny44MDcwNyIgaGVpZ2h0PSIxNi4zMzQ2NTYiIHdpZHRoPSI4NS4xOTUwMyIgaWQ9InJlY3Q1OTYzLTUiIHN0eWxlPSJvcGFjaXR5OjE7ZmlsbDojODI4MjgyO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojMGMzYzg2O3N0cm9rZS13aWR0aDozLjc1MDAwMDI0O3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDozLjg3NTtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIvPiYjeGE7ICA8cmVjdCB5PSI4NS4wNzE1ODciIHg9IjM2Ny44MDcwNyIgaGVpZ2h0PSIxNi4zMzQ2NTYiIHdpZHRoPSI4NS4xOTUwMyIgaWQ9InJlY3Q1OTYzLTYtMyIgc3R5bGU9ImRpc3BsYXk6aW5saW5lO29wYWNpdHk6MTtmaWxsOiM4MjgyODI7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiMwYzNjODY7c3Ryb2tlLXdpZHRoOjMuNzUwMDAwMjQ7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjMuODc1O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxIi8+JiN4YTsgIDxyZWN0IHk9IjUzLjgzOTk1NCIgeD0iMzY3LjgwNzA3IiBoZWlnaHQ9IjE2LjIzODk5MSIgd2lkdGg9IjI5LjU5ODE2IiBpZD0icmVjdDU5NjMtNi0yLTUiIHN0eWxlPSJkaXNwbGF5OmlubGluZTtvcGFjaXR5OjE7ZmlsbDojODI4MjgyO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojMGMzYzg2O3N0cm9rZS13aWR0aDozLjc1MDAwMDI0O3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDozLjg3NTtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIvPiYjeGE7ICA8cmVjdCB5PSIzOC42NTUxNyIgeD0iMzgxLjU5MzU3IiBoZWlnaHQ9IjE0Ljc4OTg4IiB3aWR0aD0iMjguNDk2MTgzIiBpZD0icmVjdDU5NjMtNi0yLTktNiIgc3R5bGU9ImRpc3BsYXk6aW5saW5lO29wYWNpdHk6MTtmaWxsOiM4MjgyODI7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiMwYzNjODY7c3Ryb2tlLXdpZHRoOjMuNzUwMDAwMjQ7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjMuODc1O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxIi8+JiN4YTsgIDxyZWN0IHk9IjM4LjcwNjU1NCIgeD0iMzY3LjgwNzA3IiBoZWlnaHQ9IjE0LjY4NzEwNiIgd2lkdGg9IjEzLjkzNzE4MyIgaWQ9InJlY3Q1OTYzLTYtMi05LTItMiIgc3R5bGU9ImRpc3BsYXk6aW5saW5lO29wYWNpdHk6MTtmaWxsOiM4MjgyODI7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiMwYzNjODY7c3Ryb2tlLXdpZHRoOjMuNzUwMDAwMjQ7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjMuODc1O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxIi8+JiN4YTsgIDxyZWN0IHk9IjM4LjY1NTE3IiB4PSI0MTAuMTAwNDYiIGhlaWdodD0iMTQuNzg5ODgiIHdpZHRoPSIyOC40OTYxODMiIGlkPSJyZWN0NTk2My02LTItOS0zLTkiIHN0eWxlPSJkaXNwbGF5OmlubGluZTtvcGFjaXR5OjE7ZmlsbDojODI4MjgyO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojMGMzYzg2O3N0cm9rZS13aWR0aDozLjc1MDAwMDI0O3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDozLjg3NTtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIvPiYjeGE7ICA8cmVjdCB5PSIzOC43MDY1NTQiIHg9IjQzOS4wNjQ4OCIgaGVpZ2h0PSIxNC42ODcxMDYiIHdpZHRoPSIxMy45MzcxODMiIGlkPSJyZWN0NTk2My02LTItOS0yLTktMSIgc3R5bGU9ImRpc3BsYXk6aW5saW5lO29wYWNpdHk6MTtmaWxsOiM4MjgyODI7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiMwYzNjODY7c3Ryb2tlLXdpZHRoOjMuNzUwMDAwMjQ7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjMuODc1O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxIi8+JiN4YTsgIDxyZWN0IHk9IjUzLjgzOTk1NCIgeD0iNDIzLjQwMzkzIiBoZWlnaHQ9IjE2LjIzODk5MSIgd2lkdGg9IjI5LjU5ODE2IiBpZD0icmVjdDU5NjMtNi0yLTItMiIgc3R5bGU9ImRpc3BsYXk6aW5saW5lO29wYWNpdHk6MTtmaWxsOiM4MjgyODI7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiMwYzNjODY7c3Ryb2tlLXdpZHRoOjMuNzUwMDAwMjQ7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjMuODc1O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxIi8+JiN4YTsgIDxyZWN0IHk9IjcwLjU1MDgzNSIgeD0iMzgxLjYxMzc0IiBoZWlnaHQ9IjE0Ljc4OTg4IiB3aWR0aD0iMjguNDk2MTgzIiBpZD0icmVjdDU5NjMtNi0yLTktOC03IiBzdHlsZT0iZGlzcGxheTppbmxpbmU7b3BhY2l0eToxO2ZpbGw6IzgyODI4MjtmaWxsLW9wYWNpdHk6MTtzdHJva2U6IzBjM2M4NjtzdHJva2Utd2lkdGg6My43NTAwMDAyNDtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6My44NzU7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiLz4mI3hhOyAgPHJlY3QgeT0iNzAuNDY3MjU1IiB4PSIzNjcuODMwMTQiIGhlaWdodD0iMTQuOTU3MDM2IiB3aWR0aD0iMTMuOTMxMzU5IiBpZD0icmVjdDU5NjMtNi0yLTktMi05Ny0wIiBzdHlsZT0iZGlzcGxheTppbmxpbmU7b3BhY2l0eToxO2ZpbGw6IzgyODI4MjtmaWxsLW9wYWNpdHk6MTtzdHJva2U6IzBjM2M4NjtzdHJva2Utd2lkdGg6My43NTAwMDAyNDtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6My44NzU7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiLz4mI3hhOyAgPHJlY3QgeT0iNzAuNTUwODM1IiB4PSI0MTAuMTIwNjEiIGhlaWdodD0iMTQuNzg5ODgiIHdpZHRoPSIyOC40OTYxODMiIGlkPSJyZWN0NTk2My02LTItOS0zLTMtOSIgc3R5bGU9ImRpc3BsYXk6aW5saW5lO29wYWNpdHk6MTtmaWxsOiM4MjgyODI7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiMwYzNjODY7c3Ryb2tlLXdpZHRoOjMuNzUwMDAwMjQ7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjMuODc1O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxIi8+JiN4YTsgIDxyZWN0IHk9IjcwLjQ2NzI1NSIgeD0iNDM5LjA0NjgxIiBoZWlnaHQ9IjE0Ljk1NzAzNiIgd2lkdGg9IjEzLjkzMTM1OSIgaWQ9InJlY3Q1OTYzLTYtMi05LTItOS02LTMiIHN0eWxlPSJkaXNwbGF5OmlubGluZTtvcGFjaXR5OjE7ZmlsbDojODI4MjgyO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojMGMzYzg2O3N0cm9rZS13aWR0aDozLjc1MDAwMDI0O3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDozLjg3NTtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIvPiYjeGE7ICA8cmVjdCB5PSI1My44MTU3MDgiIHg9IjM5Ny40MzY4MyIgaGVpZ2h0PSIxNi4yODc0NTciIHdpZHRoPSIyNS45MzU1MDkiIGlkPSJyZWN0NTk2My02LTItMS02IiBzdHlsZT0iZGlzcGxheTppbmxpbmU7b3BhY2l0eToxO2ZpbGw6IzgyODI4MjtmaWxsLW9wYWNpdHk6MTtzdHJva2U6IzBjM2M4NjtzdHJva2Utd2lkdGg6My43NTAwMDAyNDtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6My44NzU7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiLz4mI3hhOzwvc3ZnPg==" preserveAspectRatio="none" pointer-events="none"/><image x="158" y="480" width="135" height="35" xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIGlkPSJzdmc2MzE1IiB2aWV3Qm94PSIwIDAgNDc3LjE1NjYyIDEyMy40MDkwMiIgaGVpZ2h0PSIzNC44Mjg3NjZtbSIgd2lkdGg9IjEzNC42NjQybW0iPiYjeGE7ICA8ZGVmcyBpZD0iZGVmczYzMTciLz4mI3hhOyAgPG1ldGFkYXRhIGlkPSJtZXRhZGF0YTYzMjAiPiYjeGE7ICAgIDxyZGY6UkRGPiYjeGE7ICAgICAgPGNjOldvcmsgcmRmOmFib3V0PSIiPiYjeGE7ICAgICAgICA8ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD4mI3hhOyAgICAgICAgPGRjOnR5cGUgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIvPiYjeGE7ICAgICAgICA8ZGM6dGl0bGUvPiYjeGE7ICAgICAgPC9jYzpXb3JrPiYjeGE7ICAgIDwvcmRmOlJERj4mI3hhOyAgPC9tZXRhZGF0YT4mI3hhOyAgPHJlY3Qgcnk9IjcuNTQ0Mzc0IiB5PSIyLjc0ODI4MTciIHg9IjIuNzQ4MjgxNyIgaGVpZ2h0PSIxMTcuOTEyNDUiIHdpZHRoPSI0NzEuNjYwMDYiIGlkPSJyZWN0NDEzNi0yLTMtOSIgc3R5bGU9Im9wYWNpdHk6MTtmaWxsOiNkZGRkZGQ7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiMwYzNjODY7c3Ryb2tlLXdpZHRoOjUuNDk2NTYzNDM7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjI7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiLz4mI3hhOyAgPHJlY3Qgcnk9IjYuMjI0MDUxNSIgc3R5bGU9ImZpbGw6I2ZmZmZmZjtzdHJva2U6IzBjM2M4NjtzdHJva2Utd2lkdGg6My43NTAwMDA5NTtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxIiB5PSIyMi4wOTMwMzUiIHg9IjI0LjAxOTg1OSIgaGVpZ2h0PSI3OS4yMjI5NDYiIHdpZHRoPSIzMjUuNzk3NjciIGlkPSJyZWN0MzcyOS0zLTYtMyIvPiYjeGE7ICA8cGF0aCBzdHlsZT0iZmlsbDojMTA0ZWFkO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojMGMzYzg2O3N0cm9rZS13aWR0aDoyLjAxOTYzMjU4O3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxO3BhaW50LW9yZGVyOm5vcm1hbCIgZD0ibSAzNjguMTM0MjQsMTcuMzM3NjU4IHYgMzYuNzExOCBsIDEzLjI2MTUzLC0xMy4yNjE1IDIyLjc3Njg0LDIwLjkxNjU3IC0yMi43NzA0NiwyMC45MjI5NCAtMTMuMjY3OTEsLTEzLjI2Nzg3IHYgMzYuNzExNzgyIGggMzYuNzExNzkgbCAtMTMuMjY3ODksLTEzLjI2NzkyMiAyMC45MjMxNCwtMjIuNzcwMjggMjAuOTE2MzksMjIuNzc2NTkgLTEzLjI2MTU0LDEzLjI2MTU3MiAzNi43MTAxOSwtMC4wMDIgMC4wMDIsLTM2LjcxMDEyMiAtMTMuMjc0MjYsMTMuMjc0MTkgLTIyLjc2NDA4LC0yMC45Mjg5NCAyMi43NzA0MiwtMjAuOTIzMjYgMTMuMjY3OTIsMTMuMjY3ODggdiAtMzYuNzExNDEgbCAtMzYuNzExNzksLTRlLTUgMTMuMjY3ODgsMTMuMjY3OTMgLTIwLjkyMzEyLDIyLjc3MDI1IC0yMC45MjkxMywtMjIuNzYzODcgMTMuMjc0MjcsLTEzLjI3NDI3IHoiIGlkPSJyZWN0ODI3LTAtMyIvPiYjeGE7PC9zdmc+" preserveAspectRatio="none" pointer-events="none"/><image x="158" y="610.5" width="135" height="35" xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIGlkPSJzdmc3Nzc4IiB2aWV3Qm94PSIwIDAgNDc3LjE1NjYxIDEyMy40MDkwMiIgaGVpZ2h0PSIzNC44Mjg3NjZtbSIgd2lkdGg9IjEzNC42NjQybW0iPiYjeGE7ICA8ZGVmcyBpZD0iZGVmczc3ODAiLz4mI3hhOyAgPG1ldGFkYXRhIGlkPSJtZXRhZGF0YTc3ODMiPiYjeGE7ICAgIDxyZGY6UkRGPiYjeGE7ICAgICAgPGNjOldvcmsgcmRmOmFib3V0PSIiPiYjeGE7ICAgICAgICA8ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD4mI3hhOyAgICAgICAgPGRjOnR5cGUgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIvPiYjeGE7ICAgICAgICA8ZGM6dGl0bGUvPiYjeGE7ICAgICAgPC9jYzpXb3JrPiYjeGE7ICAgIDwvcmRmOlJERj4mI3hhOyAgPC9tZXRhZGF0YT4mI3hhOyAgPHJlY3Qgc3R5bGU9Im9wYWNpdHk6MTtmaWxsOiNkZGRkZGQ7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiMwYzNjODY7c3Ryb2tlLXdpZHRoOjUuNDk2NTYyOTY7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjI7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiIGlkPSJyZWN0NDEzNi0yLTMtMyIgd2lkdGg9IjQ3MS42NjAwNiIgaGVpZ2h0PSIxMTcuOTEyNDUiIHg9IjIuNzQ4MjgxNSIgeT0iMi43NDgyODE1IiByeT0iNy41NDQzNzM1Ii8+JiN4YTsgIDxyZWN0IGlkPSJyZWN0MzcyOS0zLTYiIHdpZHRoPSIzMjUuNzk3NjQiIGhlaWdodD0iNzkuMjIyOTM5IiB4PSIyNC4wMTk4NDIiIHk9IjIyLjA5MzAzOSIgc3R5bGU9ImZpbGw6I2ZmZmZmZjtzdHJva2U6IzBjM2M4NjtzdHJva2Utd2lkdGg6My43NTAwMDA0ODtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxIiByeT0iNi4yMjQwNTE1Ii8+JiN4YTsgIDxnIHRyYW5zZm9ybT0ibWF0cml4KDAuOTQzOTM4NjcsMCwwLDEuMDIzNjMwNiwtMTE1LjU1MzE2LC04OC43Nzc0MTUpIiBpZD0iZzg4NCI+JiN4YTsgICAgPHBhdGggc3R5bGU9ImZpbGw6IzEwNGVhZDtmaWxsLW9wYWNpdHk6MTtzdHJva2U6IzBjM2M4NjtzdHJva2Utd2lkdGg6MS42NTc1MDAwMztzdHJva2UtbGluZWNhcDpzcXVhcmU7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjE7cGFpbnQtb3JkZXI6bm9ybWFsIiBkPSJtIDU2Ny40MTA0OCwxMDkuNTkzMjQgMzguMTAyNDIsMTYuNjY3MTQgLTM4LjEwMjQyLDE2LjY2NzE0IC0wLjIyNTIyLC0wLjA5ODEgMTBlLTYsLTEyLjg3MDk3IC01NS41ODUzMywwLjg5NjY0IHYgLTkuMTg5MzIgbCA1NS41ODUzMywwLjg5NjU0IC0xMGUtNiwtMTIuODcwODcgeiIgaWQ9InJlY3Q4NTQiLz4mI3hhOyAgICA8cGF0aCBzdHlsZT0iZmlsbDojMTA0ZWFkO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojMGMzYzg2O3N0cm9rZS13aWR0aDoxLjY1NzQ5OTkxO3N0cm9rZS1saW5lY2FwOnNxdWFyZTtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MTtwYWludC1vcmRlcjpub3JtYWwiIGQ9Im0gNTQ5LjcwMjIzLDE1MS4wODg1NSAtMzguMTAyNDIsMTYuNjY3MTQgMzguMTAyNDIsMTYuNjY3MTQgMC4yMjUyMiwtMC4wOTgxIC0xMGUtNiwtMTIuODcwOTcgNTUuNTg1MzMsMC44OTY2NCB2IC05LjE4OTMyIGwgLTU1LjU4NTMzLDAuODk2NTQgMTBlLTYsLTEyLjg3MDg3IHoiIGlkPSJyZWN0ODU0LTYiLz4mI3hhOyAgPC9nPiYjeGE7PC9zdmc+" preserveAspectRatio="none" pointer-events="none"/><image x="158" y="567.5" width="135" height="35" xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTM0LjY2NDJtbSIgaGVpZ2h0PSIzNC44Mjg3NjZtbSIgdmlld0JveD0iMCAwIDQ3Ny4xNTY2MSAxMjMuNDA5MDIiIGlkPSJzdmc3Nzc4IiB2ZXJzaW9uPSIxLjEiPiYjeGE7ICA8ZGVmcyBpZD0iZGVmczc3ODAiLz4mI3hhOyAgPG1ldGFkYXRhIGlkPSJtZXRhZGF0YTc3ODMiPiYjeGE7ICAgIDxyZGY6UkRGPiYjeGE7ICAgICAgPGNjOldvcmsgcmRmOmFib3V0PSIiPiYjeGE7ICAgICAgICA8ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD4mI3hhOyAgICAgICAgPGRjOnR5cGUgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIvPiYjeGE7ICAgICAgICA8ZGM6dGl0bGUvPiYjeGE7ICAgICAgPC9jYzpXb3JrPiYjeGE7ICAgIDwvcmRmOlJERj4mI3hhOyAgPC9tZXRhZGF0YT4mI3hhOyAgPGcgaWQ9Imc4NDQiPiYjeGE7ICAgIDxyZWN0IHN0eWxlPSJvcGFjaXR5OjE7ZmlsbDojZGRkZGRkO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojMGMzYzg2O3N0cm9rZS13aWR0aDo1LjQ5NjU2Mjk2O3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoyO3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxIiBpZD0icmVjdDQxMzYtMi0zLTMiIHdpZHRoPSI0NzEuNjYwMDYiIGhlaWdodD0iMTE3LjkxMjQ1IiB4PSIyLjc0ODI4MTUiIHk9IjIuNzQ4MjgxNSIgcnk9IjcuNTQ0MzczNSIvPiYjeGE7ICAgIDxyZWN0IGlkPSJyZWN0MzcyOS0zLTYiIHdpZHRoPSIzMjUuNzk3NjQiIGhlaWdodD0iNzkuMjIyOTM5IiB4PSIyNC4wMTk4NDIiIHk9IjIyLjA5MzAzOSIgc3R5bGU9ImZpbGw6I2ZkZmRmZDtmaWxsLW9wYWNpdHk6MTtzdHJva2U6IzBjM2M4NjtzdHJva2Utd2lkdGg6My43NTAwMDA0ODtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxIiByeT0iNi4yMjQwNTE1Ii8+JiN4YTsgICAgPHBhdGggc3R5bGU9ImZpbGw6IzEwNGVhZDtmaWxsLW9wYWNpdHk6MTtzdHJva2U6IzBjM2M4NjtzdHJva2Utd2lkdGg6MS45MTk3MTUyOTtzdHJva2UtbGluZWNhcDpidXR0O3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoyO3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxO3BhaW50LW9yZGVyOm5vcm1hbCIgZD0ibSA0MzUuNDMxNSwxNi4xNzk5MTYgYyAtMi44OTc1NywxLjE4MTE5OCAtNC43MDU5NSwzLjE1ODU0NCAtNS44MDY4OCw1LjY1Mjc0NiBsIDEyLjM2Mjc5LDE0LjU3OTc2OSAtNzQuNjA1NjEsLTAuNDcwNDE2IGMgLTEuMDcxNzksMi45ODk2ODQgLTEuMjM3MDEsNi4wNzY1MTMgMCw5LjMxMzYwMiBMIDQ0Mi4wMDQ4MSw0NC43ODUyMDEgNDI5LjUwMjkyLDU5LjMyMTUgYyAxLjAyMDQyLDIuOTEyMDM5IDMuMDM0NTUsNC43MDg1NjggNS43NjkyMSw1LjY5NjIxNiBsIDIwLjkzMTEyLC0yNC4zNDA0OTcgeiIgaWQ9InJlY3Q4NjQiLz4mI3hhOyAgICA8cGF0aCBzdHlsZT0iZmlsbDojMTA0ZWFkO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojMGMzYzg2O3N0cm9rZS13aWR0aDoxLjkxOTcxNTI5O3N0cm9rZS1saW5lY2FwOmJ1dHQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjI7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjE7cGFpbnQtb3JkZXI6bm9ybWFsIiBkPSJtIDM4OC4xNTM4MiwxMDcuMjI5MSBjIDIuODk3NTcsLTEuMTgxMiA0LjcwNTk1LC0zLjE1ODU1IDUuODA2ODgsLTUuNjUyNzUgbCAtMTIuMzYyNzksLTE0LjU3OTc2OCA3NC42MDU2MSwwLjQ3MDQxNiBjIDEuMDcxNzksLTIuOTg5NjgzIDEuMjM3MDEsLTYuMDc2NTEyIDAsLTkuMzEzNjA0IGwgLTc0LjYyMywwLjQ3MDQxNSAxMi41MDE4OCwtMTQuNTM2MjkyIGMgLTEuMDIwNDEsLTIuOTEyMDQ3IC0zLjAzNDU0LC00LjcwODU3MyAtNS43NjkyMSwtNS42OTYyMTYgbCAtMjAuOTMxMTEsMjQuMzQwNDk1IHoiIGlkPSJyZWN0ODY0LTIiLz4mI3hhOyAgPC9nPiYjeGE7PC9zdmc+" preserveAspectRatio="none" pointer-events="none"/><image x="158" y="523.5" width="135" height="35" xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTM0LjY2NDJtbSIgaGVpZ2h0PSIzNC44Mjg3NjZtbSIgdmlld0JveD0iMCAwIDQ3Ny4xNTY2MSAxMjMuNDA5MDEiIGlkPSJzdmc3Nzc4IiB2ZXJzaW9uPSIxLjEiPiYjeGE7ICA8ZGVmcyBpZD0iZGVmczc3ODAiLz4mI3hhOyAgPG1ldGFkYXRhIGlkPSJtZXRhZGF0YTc3ODMiPiYjeGE7ICAgIDxyZGY6UkRGPiYjeGE7ICAgICAgPGNjOldvcmsgcmRmOmFib3V0PSIiPiYjeGE7ICAgICAgICA8ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD4mI3hhOyAgICAgICAgPGRjOnR5cGUgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIvPiYjeGE7ICAgICAgICA8ZGM6dGl0bGUvPiYjeGE7ICAgICAgPC9jYzpXb3JrPiYjeGE7ICAgIDwvcmRmOlJERj4mI3hhOyAgPC9tZXRhZGF0YT4mI3hhOyAgPHJlY3Qgc3R5bGU9Im9wYWNpdHk6MTtmaWxsOiNkZGRkZGQ7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiMwYzNjODY7c3Ryb2tlLXdpZHRoOjUuNDk2NTYyOTY7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjI7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiIGlkPSJyZWN0NDEzNi0yLTMiIHdpZHRoPSI0NzEuNjYwMDYiIGhlaWdodD0iMTE3LjkxMjQ1IiB4PSIyLjc0ODI4MTUiIHk9IjIuNzQ4MjgxNSIgcnk9IjcuNTQ0MzczNSIvPiYjeGE7ICA8cmVjdCBpZD0icmVjdDM3MjktMy02IiB3aWR0aD0iMzI1Ljc5NzY0IiBoZWlnaHQ9Ijc5LjIyMjkzOSIgeD0iMjQuMDE5ODQyIiB5PSIyMi4wOTMwMzkiIHN0eWxlPSJmaWxsOiNmZmZmZmY7c3Ryb2tlOiMwYzNjODY7c3Ryb2tlLXdpZHRoOjMuNzUwMDAwNDg7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIgcnk9IjYuMjI0MDUxNSIvPiYjeGE7ICA8cGF0aCBzdHlsZT0iZmlsbDojMTA0ZWFkO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojMGMzYzg2O3N0cm9rZS13aWR0aDoxLjQ1MTkxNzA1O3N0cm9rZS1saW5lY2FwOnNxdWFyZTtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MjtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MTtwYWludC1vcmRlcjpub3JtYWwiIGQ9Im0gMzg1LjcxMDE4LDE3LjA3Njc2MiAtMTkuMjY1MzEsMTkuMTc0MDczIGggMTIuNTMwMDIgdiAxMi44MjYwNCBsIDIyLjMwMTg3LDEyLjMwODc0NCAtMjIuMzAxODcsMTIuMzA3NDMxIHYgMTIuNzgyNzEzIGggLTEyLjUzMDAyIGwgMTkuMjY1MzEsMTkuMTc0MDU3IDE5LjI2NTI5LC0xOS4xNzQwNTcgaCAtMTIuMDc4ODkgdiAtOS42MDAxNiBsIDE4LjIyNDU1LC0xMC4wNTgzODIgMTguMjI0NTYsMTAuMDU4MzgyIHYgOS42MDAxNiBoIC0xMi4wNzg5IGwgMTkuMjY1MywxOS4xNzQwNTcgMTkuMjY1MzIsLTE5LjE3NDA1NyBIIDQ0My4yNjYwNiBWIDczLjY5MzA1IEwgNDIwLjk2NDE5LDYxLjM4NDMwNyA0NDMuMjY2MDYsNDkuMDc2ODc1IHYgLTEyLjgyNjA0IGggMTIuNTMxMzUgbCAtMTkuMjY1MzIsLTE5LjE3NDA3MyAtMTkuMjY1MywxOS4xNzQwNzMgaCAxMi4wNzg5IHYgOS42NDM0OTEgTCA0MTEuMTIxMTMsNTUuOTUyNzAzIDM5Mi44OTY1OCw0NS44OTQzMjYgdiAtOS42NDM0OTEgaCAxMi4wNzg4OSB6IiBpZD0icmVjdDgxNy05Ii8+JiN4YTs8L3N2Zz4=" preserveAspectRatio="none" pointer-events="none"/></svg>
\ No newline at end of file
diff --git a/src/assets/Network-Icons-SVG/viptela-vbond.svg b/src/assets/Network-Icons-SVG/viptela-vbond.svg
new file mode 100644
index 0000000..696fc25
--- /dev/null
+++ b/src/assets/Network-Icons-SVG/viptela-vbond.svg
@@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   version="1.1"
+   id="svg6291"
+   viewBox="0 0 146.47218 147.65691"
+   height="41.672062mm"
+   width="41.337704mm">
+  <defs
+     id="defs6293" />
+  <metadata
+     id="metadata6296">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     transform="matrix(1.7905686,0,0,1.8050515,-238.83444,-711.76488)"
+     id="layer1">
+    <g
+       transform="translate(-437.86669,-111.81404)"
+       id="g4537">
+      <circle
+         style="opacity:1;fill:#b18cbf;fill-opacity:1;stroke:#7b6498;stroke-width:1.8836937;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+         id="path4505"
+         cx="612.1524"
+         cy="547.03339"
+         r="39.959179" />
+      <path
+         style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#fdfbff;fill-opacity:1;fill-rule:nonzero;stroke:#7b6498;stroke-width:0.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+         d="m 612.15234,211.75586 c -12.95206,0 -23.81117,9.07553 -26.57422,21.20117 h -8.27539 v 11.39649 h 8.11524 c 2.48707,12.48787 13.52496,21.92578 26.73437,21.92578 13.20943,0 24.24731,-9.43791 26.73438,-21.92578 h 6.98047 v -11.39649 h -7.14063 c -2.76304,-12.12564 -13.62214,-21.20117 -26.57422,-21.20117 z m 0,3.5 c 11.04824,0 20.30932,7.50297 22.98243,17.70117 h -10.73438 v 11.39649 h 10.9082 c -2.41619,10.56484 -11.84838,18.42578 -23.15625,18.42578 -11.30787,0 -20.74006,-7.86094 -23.15625,-18.42578 h 9.77149 v -11.39649 h -9.59766 c 2.67311,-10.1982 11.93418,-17.70117 22.98242,-17.70117 z"
+         id="path4507"
+         transform="translate(0,308.26772)" />
+    </g>
+  </g>
+</svg>
diff --git a/src/assets/Network-Icons-SVG/viptela-vedge-square.svg b/src/assets/Network-Icons-SVG/viptela-vedge-square.svg
new file mode 100644
index 0000000..7edbda2
--- /dev/null
+++ b/src/assets/Network-Icons-SVG/viptela-vedge-square.svg
@@ -0,0 +1,60 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   version="1.1"
+   id="svg5665"
+   viewBox="0 0 146.47218 140.08714"
+   height="39.535706mm"
+   width="41.337704mm">
+  <defs
+     id="defs5667" />
+  <metadata
+     id="metadata5670">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     id="g897"
+     transform="matrix(1.4149236,0,0,1.4149236,-120.50861,-3.1049403)">
+    <rect
+       style="opacity:1;fill:#348bc3;fill-opacity:1;stroke:#257db6;stroke-width:2.30585027;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:2;stroke-dasharray:none;stroke-opacity:1"
+       id="rect4136-2"
+       width="101.21365"
+       height="96.701012"
+       x="86.322617"
+       y="3.3473477"
+       ry="6.1872072" />
+    <g
+       transform="matrix(1.5283454,0,0,1.5283454,-1076.5381,-784.39125)"
+       id="g4491-6">
+      <path
+         style="opacity:1;fill:#fbfdff;fill-opacity:1;stroke:#257db6;stroke-width:0.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+         d="m 776.19141,213.91406 -7.16993,7.35352 12.9668,12.8125 -3.09766,3.10742 h 13.25782 v -13.38477 l -2.9336,2.98047 z"
+         transform="translate(0,308.26772)"
+         id="rect4431-7" />
+      <path
+         style="opacity:1;fill:#fbfdff;fill-opacity:1;stroke:#257db6;stroke-width:0.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+         d="m 811.75797,571.92837 7.16993,-7.35352 -12.9668,-12.8125 3.09766,-3.10742 h -13.25782 v 13.38477 l 2.9336,-2.98047 z"
+         id="rect4431-8-5" />
+      <path
+         style="opacity:1;fill:#fbfdff;fill-opacity:1;stroke:#257db6;stroke-width:0.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+         d="m 790.74883,550.51372 -0.47502,-0.51465 -6.59039,0.43735 -8.33171,8.43205 -3.10742,-3.09766 v 13.25782 h 13.38477 l -2.98047,-2.9336 8.79942,-8.90491 z"
+         id="rect4431-8-8-3" />
+      <path
+         style="opacity:1;fill:#fbfdff;fill-opacity:1;stroke:#257db6;stroke-width:0.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+         d="m 797.45159,543.15409 0.47502,0.51465 6.59039,-0.43735 8.33171,-8.43205 3.10742,3.09766 v -13.25782 h -13.38477 l 2.98047,2.9336 -8.79942,8.90491 z"
+         id="rect4431-8-8-7-5" />
+    </g>
+  </g>
+</svg>
diff --git a/src/assets/Network-Icons-SVG/viptela-vedge.svg b/src/assets/Network-Icons-SVG/viptela-vedge.svg
new file mode 100644
index 0000000..27ad7e4
--- /dev/null
+++ b/src/assets/Network-Icons-SVG/viptela-vedge.svg
@@ -0,0 +1,61 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   width="41.337708mm"
+   height="41.337708mm"
+   viewBox="0 0 146.47219 146.47219"
+   id="svg5665"
+   version="1.1">
+  <defs
+     id="defs5667" />
+  <metadata
+     id="metadata5670">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     id="layer1"
+     transform="matrix(1.7767747,0,0,1.7767747,-475.02582,-568.06166)">
+    <g
+       id="g4497"
+       transform="translate(-485.56321,-186.26888)">
+      <circle
+         r="40.385647"
+         cy="547.20251"
+         cx="794.13464"
+         id="path4429"
+         style="opacity:1;fill:#348bc3;fill-opacity:1;stroke:#257db6;stroke-width:1.66582286;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+      <g
+         id="g4491">
+        <path
+           style="opacity:1;fill:#fbfdff;fill-opacity:1;stroke:#257db6;stroke-width:0.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+           d="m 776.19141,213.91406 -7.16993,7.35352 12.9668,12.8125 -3.09766,3.10742 h 13.25782 v -13.38477 l -2.9336,2.98047 z"
+           transform="translate(0,308.26772)"
+           id="rect4431" />
+        <path
+           style="opacity:1;fill:#fbfdff;fill-opacity:1;stroke:#257db6;stroke-width:0.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+           d="m 811.75797,571.92837 7.16993,-7.35352 -12.9668,-12.8125 3.09766,-3.10742 h -13.25782 v 13.38477 l 2.9336,-2.98047 z"
+           id="rect4431-8" />
+        <path
+           style="opacity:1;fill:#fbfdff;fill-opacity:1;stroke:#257db6;stroke-width:0.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+           d="m 790.74883,550.51372 -0.47502,-0.51465 -6.59039,0.43735 -8.33171,8.43205 -3.10742,-3.09766 v 13.25782 h 13.38477 l -2.98047,-2.9336 8.79942,-8.90491 z"
+           id="rect4431-8-8" />
+        <path
+           style="opacity:1;fill:#fbfdff;fill-opacity:1;stroke:#257db6;stroke-width:0.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+           d="m 797.45159,543.15409 0.47502,0.51465 6.59039,-0.43735 8.33171,-8.43205 3.10742,3.09766 v -13.25782 h -13.38477 l 2.98047,2.9336 -8.79942,8.90491 z"
+           id="rect4431-8-8-7" />
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/src/assets/Network-Icons-SVG/viptela-vmanage.svg b/src/assets/Network-Icons-SVG/viptela-vmanage.svg
new file mode 100644
index 0000000..cf24c84
--- /dev/null
+++ b/src/assets/Network-Icons-SVG/viptela-vmanage.svg
@@ -0,0 +1,45 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   width="41.337708mm"
+   height="41.337708mm"
+   viewBox="0 0 146.47219 146.47219"
+   id="svg6879"
+   version="1.1">
+  <defs
+     id="defs6881" />
+  <metadata
+     id="metadata6884">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     id="layer1"
+     transform="matrix(1.7423172,0,0,1.7423172,-454.43709,-769.6809)">
+    <g
+       transform="translate(-263.51183,-287.3612)"
+       id="g5030">
+      <circle
+         r="40.980015"
+         cy="771.15198"
+         cx="566.36896"
+         id="path4541"
+         style="opacity:1;fill:#70cbd6;fill-opacity:1;stroke:#2795a2;stroke-width:2.10743618;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+      <path
+         id="rect4543"
+         d="m 560.43343,745.8717 v 11.89844 h 3.75391 v 8.32031 h -25.4707 v 11.89844 h 5.20312 v 7.97266 h -2.23633 v 6.4707 h 7.64649 v -6.4707 h -2.05469 v -7.97266 h 10.3457 v 7.97266 h -2.12304 v 6.4707 h 7.64648 v -6.4707 h -2.16992 v -7.97266 h 10.34766 v 7.97266 h -2.00977 v 6.4707 h 7.64649 v -6.4707 h -2.28321 v -7.97266 h 10.34571 v 7.97266 h -1.89454 v 6.4707 h 7.64844 v -6.4707 h -2.40039 v -7.97266 h 5.64649 v -11.89844 h -25.59571 v -8.32031 h 3.75195 V 745.8717 Z"
+         style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:#2795a2;stroke-width:0.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+    </g>
+  </g>
+</svg>
diff --git a/src/assets/Network-Icons-SVG/viptela-vsmart.svg b/src/assets/Network-Icons-SVG/viptela-vsmart.svg
new file mode 100644
index 0000000..de760d0
--- /dev/null
+++ b/src/assets/Network-Icons-SVG/viptela-vsmart.svg
@@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   width="41.337708mm"
+   height="41.337708mm"
+   viewBox="0 0 146.47219 146.47219"
+   id="svg5034"
+   version="1.1">
+  <defs
+     id="defs5036" />
+  <metadata
+     id="metadata5039">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     id="layer1"
+     transform="matrix(1.8341777,0,0,1.8341777,-545.14382,-866.52724)">
+    <g
+       id="g4425"
+       transform="translate(55.39539,-33.071389)">
+      <circle
+         r="38.92857"
+         cy="545.43359"
+         cx="281.74747"
+         id="path4153"
+         style="opacity:1;fill:#37b29b;fill-opacity:1;stroke:#29a58d;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+      <path
+         id="path4153-1"
+         transform="translate(0,308.26772)"
+         d="m 282.08594,207.93164 a 5.833117,5.833117 0 0 0 -5.83399,5.83203 5.833117,5.833117 0 0 0 4.31836,5.62695 v 8.75 a 9.9999962,9.9999962 0 0 0 -7.24023,5.32227 l -8.1836,-2.48633 a 5.833117,5.833117 0 0 0 0.043,-0.67187 5.833117,5.833117 0 0 0 -5.83203,-5.83203 5.833117,5.833117 0 0 0 -5.83398,5.83203 5.833117,5.833117 0 0 0 5.83398,5.83398 5.833117,5.833117 0 0 0 4.66016,-2.33594 l 8.36133,2.54102 a 9.9999962,9.9999962 0 0 0 -0.14844,1.6582 9.9999962,9.9999962 0 0 0 3.11523,7.23633 l -5.48047,6.33594 a 5.833117,5.833117 0 0 0 -1.92187,-0.33203 5.833117,5.833117 0 0 0 -5.83398,5.83203 5.833117,5.833117 0 0 0 5.83398,5.83398 5.833117,5.833117 0 0 0 5.83203,-5.83398 5.833117,5.833117 0 0 0 -1.39453,-3.77344 l 5.4707,-6.32226 a 9.9999962,9.9999962 0 0 0 4.37891,1.02343 9.9999962,9.9999962 0 0 0 4.03906,-0.86523 l 5.53125,7.13476 a 5.833117,5.833117 0 0 0 -1.02734,3.3086 5.833117,5.833117 0 0 0 5.83203,5.83203 5.833117,5.833117 0 0 0 5.83398,-5.83203 5.833117,5.833117 0 0 0 -5.83398,-5.83399 5.833117,5.833117 0 0 0 -2.34766,0.50196 l -5.3125,-6.85157 a 9.9999962,9.9999962 0 0 0 3.28321,-7.39453 9.9999962,9.9999962 0 0 0 -0.18164,-1.86133 l 7.85742,-2.77929 a 5.833117,5.833117 0 0 0 5.03515,2.90429 5.833117,5.833117 0 0 0 5.83399,-5.83398 5.833117,5.833117 0 0 0 -5.83399,-5.83203 5.833117,5.833117 0 0 0 -5.83203,5.83203 5.833117,5.833117 0 0 0 0.002,0.0547 l -8.04493,2.8457 a 9.9999962,9.9999962 0 0 0 -7.33789,-5.20508 v -8.76953 a 5.833117,5.833117 0 0 0 4.19141,-5.59375 5.833117,5.833117 0 0 0 -5.83203,-5.83203 z"
+         style="opacity:1;fill:#f9fbfa;fill-opacity:1;stroke:#29a58d;stroke-width:0.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+    </g>
+  </g>
+</svg>
diff --git a/src/assets/Network-Icons-SVG/vmware-compute.svg b/src/assets/Network-Icons-SVG/vmware-compute.svg
new file mode 100644
index 0000000..5a67f76
--- /dev/null
+++ b/src/assets/Network-Icons-SVG/vmware-compute.svg
@@ -0,0 +1,63 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   width="134.66418mm"
+   height="34.828758mm"
+   viewBox="0 0 477.15656 123.40899"
+   id="svg7778"
+   version="1.1">
+  <defs
+     id="defs7780" />
+  <metadata
+     id="metadata7783">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <rect
+     style="opacity:1;fill:#a1a2a3;fill-opacity:1;stroke:#4f4f4f;stroke-width:5.497;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:2;stroke-dasharray:none;stroke-opacity:1"
+     id="rect4136-2"
+     width="471.66"
+     height="117.91244"
+     x="2.748276"
+     y="2.748276"
+     ry="7.5443735" />
+  <rect
+     ry="10.013252"
+     y="13.759356"
+     x="15.076858"
+     height="94.405876"
+     width="447.0994"
+     id="rect4138-8-6-5-6-6-7-5-7-8"
+     style="opacity:1;fill:#578ebd;fill-opacity:1;stroke:#385872;stroke-width:5.2502799;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:2;stroke-dasharray:none;stroke-opacity:1" />
+  <g
+     transform="matrix(0.74177691,0,0,0.74177691,29.460848,20.101641)"
+     style="opacity:0.97000002;fill:#f4f7f9;fill-opacity:1;stroke:#fbfdff;stroke-width:1.48434448;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     id="g4166">
+    <path
+       style="clip-rule:evenodd;fill:#f4f7f9;fill-opacity:1;fill-rule:evenodd;stroke:#fbfdff;stroke-width:1.48434448;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="path5"
+       d="m 500.8687,8.8973411 c -3.43197,0 -6.46016,2.8263169 -6.46016,6.4601519 l 0,47.441746 c 0,3.633835 2.82631,6.460151 6.46016,6.460151 l 47.44173,0 c 3.43197,0 6.46016,-2.826316 6.46016,-6.460151 l 0,-47.441746 c 0,-3.431955 -2.82632,-6.4601519 -6.46016,-6.4601519 l -47.44173,0 0,0 z m -2.82633,53.9018979 0,-47.441746 c 0,-1.615038 1.21129,-2.826316 2.82633,-2.826316 l 47.44173,0 c 1.61504,0 2.82631,1.211278 2.82631,2.826316 l 0,47.441746 c 0,1.615036 -1.21127,2.826315 -2.82631,2.826315 l -47.44173,0 c -1.41317,0 -2.82633,-1.211279 -2.82633,-2.826315 l 0,0 z"
+       class="st0" />
+    <path
+       style="clip-rule:evenodd;fill:#f4f7f9;fill-opacity:1;fill-rule:evenodd;stroke:#fbfdff;stroke-width:1.48434448;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="path7"
+       d="m 515.00027,23.230804 c -3.43195,0 -6.46014,2.826316 -6.46014,6.460153 l 0,47.441744 c 0,3.431956 2.82631,6.460153 6.46014,6.460153 l 47.44175,0 c 3.63384,0 6.46015,-2.826318 6.46015,-6.460153 l 0,-47.441744 c 0,-3.431957 -2.82631,-6.460153 -6.46015,-6.460153 l -47.44175,0 0,0 z m -2.82632,53.700018 0,-47.441745 c 0,-1.615038 1.21128,-2.826317 2.82632,-2.826317 l 47.44175,0 c 1.61504,0 2.82632,1.211279 2.82632,2.826317 l 0,47.441745 c 0,1.615036 -1.21128,2.826315 -2.82632,2.826315 l -47.44175,0 c -1.41315,0 -2.82632,-1.211279 -2.82632,-2.826315 l 0,0 z"
+       class="st0" />
+    <path
+       style="clip-rule:evenodd;fill:#f4f7f9;fill-opacity:1;fill-rule:evenodd;stroke:#fbfdff;stroke-width:1.48434448;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="path9"
+       d="m 486.73711,37.362388 c -3.63384,0 -6.46015,2.826317 -6.46015,6.460152 l 0,47.441744 c 0,3.633836 2.82631,6.460153 6.46015,6.460153 l 47.44174,0 c 3.43196,0 6.46016,-2.826317 6.46016,-6.460153 l 0,-47.441744 c 0,-3.431956 -2.82632,-6.460152 -6.46016,-6.460152 l -47.44174,0 0,0 z m -2.82631,53.700017 0,-47.441745 c 0,-1.615038 1.21127,-2.826317 2.82631,-2.826317 l 47.44174,0 c 1.61504,0 2.82632,1.211279 2.82632,2.826317 l 0,47.441745 c 0,1.615039 -1.21128,2.826316 -2.82632,2.826316 l -47.44174,0 c -1.61504,0 -2.82631,-1.211277 -2.82631,-2.826316 l 0,0 z"
+       class="st0" />
+  </g>
+</svg>

From 539e8e95feb324aa1c53957119c9af17bbd47c1c Mon Sep 17 00:00:00 2001
From: sepehr <sepehr.ha@gmail.com>
Date: Thu, 16 Oct 2025 17:36:18 +0300
Subject: [PATCH 15/15] deps: update dependencies for enhanced features

- Update to support new UI components
- Add dependencies for advanced features
- Update Angular and related packages
- Update version to 1.2.0
---
 package-lock.json | 332 ++++++++++++++++++++++++++++++++--------------
 package.json      |   4 +-
 2 files changed, 236 insertions(+), 100 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 2ad6060..09b13db 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,13 +1,13 @@
 {
-  "name": "coreui-free-angular-admin-template",
-  "version": "4.5.27",
+  "name": "MikroWizard",
+  "version": "1.0.7",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
-      "name": "coreui-free-angular-admin-template",
-      "version": "4.5.27",
-      "license": "MIT",
+      "name": "MikroWizard",
+      "version": "1.0.7",
+      "license": "AGPL",
       "dependencies": {
         "@angular/animations": "^17.3.5",
         "@angular/cdk": "^16.2.9",
@@ -28,11 +28,7 @@
         "@coreui/icons-angular": "~4.5.27",
         "@coreui/utils": "^2.0.2",
         "@easyfonts/font-awesome-v6": "^6.0.6",
-        "@fortawesome/angular-fontawesome": "^0.13.0",
-        "@fortawesome/fontawesome-svg-core": "^6.4.2",
-        "@fortawesome/free-brands-svg-icons": "^6.4.2",
-        "@fortawesome/free-regular-svg-icons": "^6.4.2",
-        "@fortawesome/free-solid-svg-icons": "^6.4.2",
+        "@fortawesome/angular-fontawesome": "^0.15.0",
         "@generic-ui/fabric": "^0.19.0",
         "@generic-ui/hermes": "^0.19.0",
         "@generic-ui/ngx-grid": "^0.19.0",
@@ -40,19 +36,25 @@
         "date-fns": "^3.6.0",
         "date-fns-jalali": "^3.6.0-0",
         "date-fns-tz": "^3.1.3",
+        "diff-match-patch-ts": "^0.6.0",
         "font-awesome": "^4.7.0",
         "install": "^0.13.0",
         "lodash-es": "^4.17.21",
         "mat-progress-buttons": "^9.3.1",
         "ngx-cron-editor": "^0.8.1",
         "ngx-date-fns": "^11.0.0",
+        "ngx-diff": "^9.0.0",
+        "ngx-highlight-js": "^18.0.0",
         "ngx-highlightjs": "^12.0.0",
+        "ngx-infinite-scroll": "^18.0.0",
         "ngx-mat-select-search": "^7.0.6",
         "ngx-material-date-fns-adapter": "^18.0.0",
         "ngx-scrollbar": "^13.0.3",
         "ngx-super-select": "^3.17.0",
         "rxjs": "~7.8.1",
         "tslib": "^2.3.0",
+        "vis-data": "^7.1.9",
+        "vis-network": "^9.1.9",
         "zone.js": "~0.14.4"
       },
       "devDependencies": {
@@ -2603,6 +2605,18 @@
       "resolved": "https://registry.npmjs.org/@easyfonts/font-awesome-v6/-/font-awesome-v6-6.0.6.tgz",
       "integrity": "sha512-I3mV9KQuD6jJgfX3bU3mdv/RtYSd+X/Y9Yo2RrAmIfQJeDVCQdTPXBgmodMtGxfAU8lVHKFwr/fh9zexavXdNQ=="
     },
+    "node_modules/@egjs/hammerjs": {
+      "version": "2.0.17",
+      "resolved": "https://registry.npmjs.org/@egjs/hammerjs/-/hammerjs-2.0.17.tgz",
+      "integrity": "sha512-XQsZgjm2EcVUiZQf11UBJQfmZeEmOW8DpI1gsFeln6w0ae0ii4dMQEQ0kjl6DspdWX1aGY1/loyXnP0JS06e/A==",
+      "peer": true,
+      "dependencies": {
+        "@types/hammerjs": "^2.0.36"
+      },
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.20.1",
       "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.20.1.tgz",
@@ -2972,69 +2986,31 @@
       }
     },
     "node_modules/@fortawesome/angular-fontawesome": {
-      "version": "0.13.0",
-      "resolved": "https://registry.npmjs.org/@fortawesome/angular-fontawesome/-/angular-fontawesome-0.13.0.tgz",
-      "integrity": "sha512-gzSPRdveOXNO7NIiMgTyB46aiHG0i98KinnAEqHXi8qzraM/kCcHn/0y3f4MhemX6kftwsFli0IU8RyHmtXlSQ==",
+      "version": "0.15.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/angular-fontawesome/-/angular-fontawesome-0.15.0.tgz",
+      "integrity": "sha512-oxmJDYGNSym5ycFR0LX4ZOPAU+wWmMAznYpkm5DNAtWWkhMLcrZl15eZQmVIEE+qruQ7JiVrg3tpo8bEkFlDgw==",
       "dependencies": {
-        "tslib": "^2.4.1"
+        "@fortawesome/fontawesome-svg-core": "^6.5.2",
+        "tslib": "^2.6.2"
       },
       "peerDependencies": {
-        "@angular/core": "^16.0.0",
-        "@fortawesome/fontawesome-svg-core": "~1.2.27 || ~1.3.0-beta2 || ^6.1.0"
+        "@angular/core": "^18.0.0"
       }
     },
     "node_modules/@fortawesome/fontawesome-common-types": {
-      "version": "6.5.2",
-      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.5.2.tgz",
-      "integrity": "sha512-gBxPg3aVO6J0kpfHNILc+NMhXnqHumFxOmjYCFfOiLZfwhnnfhtsdA2hfJlDnj+8PjAs6kKQPenOTKj3Rf7zHw==",
-      "hasInstallScript": true,
+      "version": "6.6.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.6.0.tgz",
+      "integrity": "sha512-xyX0X9mc0kyz9plIyryrRbl7ngsA9jz77mCZJsUkLl+ZKs0KWObgaEBoSgQiYWAsSmjz/yjl0F++Got0Mdp4Rw==",
       "engines": {
         "node": ">=6"
       }
     },
     "node_modules/@fortawesome/fontawesome-svg-core": {
-      "version": "6.5.2",
-      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.5.2.tgz",
-      "integrity": "sha512-5CdaCBGl8Rh9ohNdxeeTMxIj8oc3KNBgIeLMvJosBMdslK/UnEB8rzyDRrbKdL1kDweqBPo4GT9wvnakHWucZw==",
-      "hasInstallScript": true,
+      "version": "6.6.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.6.0.tgz",
+      "integrity": "sha512-KHwPkCk6oRT4HADE7smhfsKudt9N/9lm6EJ5BVg0tD1yPA5hht837fB87F8pn15D8JfTqQOjhKTktwmLMiD7Kg==",
       "dependencies": {
-        "@fortawesome/fontawesome-common-types": "6.5.2"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/@fortawesome/free-brands-svg-icons": {
-      "version": "6.5.2",
-      "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.5.2.tgz",
-      "integrity": "sha512-zi5FNYdmKLnEc0jc0uuHH17kz/hfYTg4Uei0wMGzcoCL/4d3WM3u1VMc0iGGa31HuhV5i7ZK8ZlTCQrHqRHSGQ==",
-      "hasInstallScript": true,
-      "dependencies": {
-        "@fortawesome/fontawesome-common-types": "6.5.2"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/@fortawesome/free-regular-svg-icons": {
-      "version": "6.5.2",
-      "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.5.2.tgz",
-      "integrity": "sha512-iabw/f5f8Uy2nTRtJ13XZTS1O5+t+anvlamJ3zJGLEVE2pKsAWhPv2lq01uQlfgCX7VaveT3EVs515cCN9jRbw==",
-      "hasInstallScript": true,
-      "dependencies": {
-        "@fortawesome/fontawesome-common-types": "6.5.2"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/@fortawesome/free-solid-svg-icons": {
-      "version": "6.5.2",
-      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.5.2.tgz",
-      "integrity": "sha512-QWFZYXFE7O1Gr1dTIp+D6UcFUF0qElOnZptpi7PBUMylJh+vFmIedVe1Ir6RM1t2tEQLLSV1k7bR4o92M+uqlw==",
-      "hasInstallScript": true,
-      "dependencies": {
-        "@fortawesome/fontawesome-common-types": "6.5.2"
+        "@fortawesome/fontawesome-common-types": "6.6.0"
       },
       "engines": {
         "node": ">=6"
@@ -4872,6 +4848,12 @@
         "@types/send": "*"
       }
     },
+    "node_modules/@types/hammerjs": {
+      "version": "2.0.46",
+      "resolved": "https://registry.npmjs.org/@types/hammerjs/-/hammerjs-2.0.46.tgz",
+      "integrity": "sha512-ynRvcq6wvqexJ9brDMS4BnBLzmr0e14d6ZJTEShTBWKymQiHwlAyGu0ZPEFI2Fh1U53F7tN9ufClWM5KvqkKOw==",
+      "peer": true
+    },
     "node_modules/@types/http-errors": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/@types/http-errors/-/http-errors-2.0.4.tgz",
@@ -6111,6 +6093,15 @@
       "integrity": "sha512-QE33hToZseCH3jS0qN96O/bSh3kaw/h+Tq7ngyY9eWDUnTlTNUyqfqvCXioLe5Na5jFsL78ra/wuBU4iuEgd4w==",
       "dev": true
     },
+    "node_modules/component-emitter": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.3.1.tgz",
+      "integrity": "sha512-T0+barUSQRTUQASh8bx02dl+DhF54GtIDY13Y3m9oWTklKbb3Wv974meRpeZ3lp1JpLVECWWNHC4vaG2XHXouQ==",
+      "peer": true,
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/compressible": {
       "version": "2.0.18",
       "resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.18.tgz",
@@ -6735,6 +6726,11 @@
       "integrity": "sha512-uJaamHkagcZtHPqCIHZxnFrXlunQXgBOsZSUOWwFw31QJCAbyTBoHMW75YOTur5ZNx8pIeAKgf6GWIgaqqiLhA==",
       "dev": true
     },
+    "node_modules/diff-match-patch-ts": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/diff-match-patch-ts/-/diff-match-patch-ts-0.6.0.tgz",
+      "integrity": "sha512-U0uPIJ+wJqgaBoVw2MFSFpGIk7q3mJJ+/sehbxDZFv4Gx6a1GOmrsSLmxVDDrGtRL4Q9de084aa5lVpCHn+eUw=="
+    },
     "node_modules/dir-glob": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
@@ -9021,6 +9017,12 @@
         "node": ">=10"
       }
     },
+    "node_modules/keycharm": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/keycharm/-/keycharm-0.4.0.tgz",
+      "integrity": "sha512-TyQTtsabOVv3MeOpR92sIKk/br9wxS+zGj4BG7CR8YbK4jM3tyIBaF0zhzeBUMx36/Q/iQLOKKOT+3jOQtemRQ==",
+      "peer": true
+    },
     "node_modules/kind-of": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
@@ -9846,6 +9848,28 @@
         "date-fns": ">=3"
       }
     },
+    "node_modules/ngx-diff": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/ngx-diff/-/ngx-diff-9.0.0.tgz",
+      "integrity": "sha512-eoF3D/9KjNqdnscIofkS81JWj87Ffq3eI3Gqim0SG/N/m0YWtOjximFxT1JI5bS8Gi1PVgoEQntJIZb/zaNULw==",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "@angular/common": ">=18.0.0",
+        "@angular/core": ">=18.0.0",
+        "diff-match-patch-ts": ">=0.5.0"
+      }
+    },
+    "node_modules/ngx-highlight-js": {
+      "version": "18.0.0",
+      "resolved": "https://registry.npmjs.org/ngx-highlight-js/-/ngx-highlight-js-18.0.0.tgz",
+      "integrity": "sha512-r/LSijb5Ju95ZGm89+4e905kFWkDt1XdGCg2prR1wleTE77uROscjZMht0D40WSRbxmOg+J2zw9OOZvsWSLeeg==",
+      "dependencies": {
+        "highlight.js": "^11.9.0",
+        "tslib": "^2.3.0"
+      }
+    },
     "node_modules/ngx-highlightjs": {
       "version": "12.0.0",
       "resolved": "https://registry.npmjs.org/ngx-highlightjs/-/ngx-highlightjs-12.0.0.tgz",
@@ -9859,6 +9883,18 @@
         "@angular/core": ">=17.0.0"
       }
     },
+    "node_modules/ngx-infinite-scroll": {
+      "version": "18.0.0",
+      "resolved": "https://registry.npmjs.org/ngx-infinite-scroll/-/ngx-infinite-scroll-18.0.0.tgz",
+      "integrity": "sha512-D183TDwpsd9Zl56UmItsl3RzHdN25srAISfg6lc3A8mEKkEgOq0s7ZzRAYcx8DHsAkMgtZqjIPEvMifD3DOB/g==",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "@angular/common": ">=18.0.0 <19.0.0",
+        "@angular/core": ">=18.0.0 <19.0.0"
+      }
+    },
     "node_modules/ngx-mat-select-search": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/ngx-mat-select-search/-/ngx-mat-select-search-7.0.6.tgz",
@@ -12746,7 +12782,6 @@
       "version": "8.3.2",
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
       "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
-      "dev": true,
       "bin": {
         "uuid": "dist/bin/uuid"
       }
@@ -12782,6 +12817,53 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/vis-data": {
+      "version": "7.1.9",
+      "resolved": "https://registry.npmjs.org/vis-data/-/vis-data-7.1.9.tgz",
+      "integrity": "sha512-COQsxlVrmcRIbZMMTYwD+C2bxYCFDNQ2EHESklPiInbD/Pk3JZ6qNL84Bp9wWjYjAzXfSlsNaFtRk+hO9yBPWA==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/visjs"
+      },
+      "peerDependencies": {
+        "uuid": "^3.4.0 || ^7.0.0 || ^8.0.0 || ^9.0.0",
+        "vis-util": "^5.0.1"
+      }
+    },
+    "node_modules/vis-network": {
+      "version": "9.1.9",
+      "resolved": "https://registry.npmjs.org/vis-network/-/vis-network-9.1.9.tgz",
+      "integrity": "sha512-Ft+hLBVyiLstVYSb69Q1OIQeh3FeUxHJn0WdFcq+BFPqs+Vq1ibMi2sb//cxgq1CP7PH4yOXnHxEH/B2VzpZYA==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/visjs"
+      },
+      "peerDependencies": {
+        "@egjs/hammerjs": "^2.0.0",
+        "component-emitter": "^1.3.0",
+        "keycharm": "^0.2.0 || ^0.3.0 || ^0.4.0",
+        "uuid": "^3.4.0 || ^7.0.0 || ^8.0.0 || ^9.0.0",
+        "vis-data": "^6.3.0 || ^7.0.0",
+        "vis-util": "^5.0.1"
+      }
+    },
+    "node_modules/vis-util": {
+      "version": "5.0.7",
+      "resolved": "https://registry.npmjs.org/vis-util/-/vis-util-5.0.7.tgz",
+      "integrity": "sha512-E3L03G3+trvc/X4LXvBfih3YIHcKS2WrP0XTdZefr6W6Qi/2nNCqZfe4JFfJU6DcQLm6Gxqj2Pfl+02859oL5A==",
+      "peer": true,
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/visjs"
+      },
+      "peerDependencies": {
+        "@egjs/hammerjs": "^2.0.0",
+        "component-emitter": "^1.3.0 || ^2.0.0"
+      }
+    },
     "node_modules/vite": {
       "version": "5.1.7",
       "resolved": "https://registry.npmjs.org/vite/-/vite-5.1.7.tgz",
@@ -15497,6 +15579,15 @@
       "resolved": "https://registry.npmjs.org/@easyfonts/font-awesome-v6/-/font-awesome-v6-6.0.6.tgz",
       "integrity": "sha512-I3mV9KQuD6jJgfX3bU3mdv/RtYSd+X/Y9Yo2RrAmIfQJeDVCQdTPXBgmodMtGxfAU8lVHKFwr/fh9zexavXdNQ=="
     },
+    "@egjs/hammerjs": {
+      "version": "2.0.17",
+      "resolved": "https://registry.npmjs.org/@egjs/hammerjs/-/hammerjs-2.0.17.tgz",
+      "integrity": "sha512-XQsZgjm2EcVUiZQf11UBJQfmZeEmOW8DpI1gsFeln6w0ae0ii4dMQEQ0kjl6DspdWX1aGY1/loyXnP0JS06e/A==",
+      "peer": true,
+      "requires": {
+        "@types/hammerjs": "^2.0.36"
+      }
+    },
     "@esbuild/aix-ppc64": {
       "version": "0.20.1",
       "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.20.1.tgz",
@@ -15659,48 +15750,25 @@
       "optional": true
     },
     "@fortawesome/angular-fontawesome": {
-      "version": "0.13.0",
-      "resolved": "https://registry.npmjs.org/@fortawesome/angular-fontawesome/-/angular-fontawesome-0.13.0.tgz",
-      "integrity": "sha512-gzSPRdveOXNO7NIiMgTyB46aiHG0i98KinnAEqHXi8qzraM/kCcHn/0y3f4MhemX6kftwsFli0IU8RyHmtXlSQ==",
+      "version": "0.15.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/angular-fontawesome/-/angular-fontawesome-0.15.0.tgz",
+      "integrity": "sha512-oxmJDYGNSym5ycFR0LX4ZOPAU+wWmMAznYpkm5DNAtWWkhMLcrZl15eZQmVIEE+qruQ7JiVrg3tpo8bEkFlDgw==",
       "requires": {
-        "tslib": "^2.4.1"
+        "@fortawesome/fontawesome-svg-core": "^6.5.2",
+        "tslib": "^2.6.2"
       }
     },
     "@fortawesome/fontawesome-common-types": {
-      "version": "6.5.2",
-      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.5.2.tgz",
-      "integrity": "sha512-gBxPg3aVO6J0kpfHNILc+NMhXnqHumFxOmjYCFfOiLZfwhnnfhtsdA2hfJlDnj+8PjAs6kKQPenOTKj3Rf7zHw=="
+      "version": "6.6.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.6.0.tgz",
+      "integrity": "sha512-xyX0X9mc0kyz9plIyryrRbl7ngsA9jz77mCZJsUkLl+ZKs0KWObgaEBoSgQiYWAsSmjz/yjl0F++Got0Mdp4Rw=="
     },
     "@fortawesome/fontawesome-svg-core": {
-      "version": "6.5.2",
-      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.5.2.tgz",
-      "integrity": "sha512-5CdaCBGl8Rh9ohNdxeeTMxIj8oc3KNBgIeLMvJosBMdslK/UnEB8rzyDRrbKdL1kDweqBPo4GT9wvnakHWucZw==",
+      "version": "6.6.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.6.0.tgz",
+      "integrity": "sha512-KHwPkCk6oRT4HADE7smhfsKudt9N/9lm6EJ5BVg0tD1yPA5hht837fB87F8pn15D8JfTqQOjhKTktwmLMiD7Kg==",
       "requires": {
-        "@fortawesome/fontawesome-common-types": "6.5.2"
-      }
-    },
-    "@fortawesome/free-brands-svg-icons": {
-      "version": "6.5.2",
-      "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.5.2.tgz",
-      "integrity": "sha512-zi5FNYdmKLnEc0jc0uuHH17kz/hfYTg4Uei0wMGzcoCL/4d3WM3u1VMc0iGGa31HuhV5i7ZK8ZlTCQrHqRHSGQ==",
-      "requires": {
-        "@fortawesome/fontawesome-common-types": "6.5.2"
-      }
-    },
-    "@fortawesome/free-regular-svg-icons": {
-      "version": "6.5.2",
-      "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.5.2.tgz",
-      "integrity": "sha512-iabw/f5f8Uy2nTRtJ13XZTS1O5+t+anvlamJ3zJGLEVE2pKsAWhPv2lq01uQlfgCX7VaveT3EVs515cCN9jRbw==",
-      "requires": {
-        "@fortawesome/fontawesome-common-types": "6.5.2"
-      }
-    },
-    "@fortawesome/free-solid-svg-icons": {
-      "version": "6.5.2",
-      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.5.2.tgz",
-      "integrity": "sha512-QWFZYXFE7O1Gr1dTIp+D6UcFUF0qElOnZptpi7PBUMylJh+vFmIedVe1Ir6RM1t2tEQLLSV1k7bR4o92M+uqlw==",
-      "requires": {
-        "@fortawesome/fontawesome-common-types": "6.5.2"
+        "@fortawesome/fontawesome-common-types": "6.6.0"
       }
     },
     "@generic-ui/fabric": {
@@ -17244,6 +17312,12 @@
         "@types/send": "*"
       }
     },
+    "@types/hammerjs": {
+      "version": "2.0.46",
+      "resolved": "https://registry.npmjs.org/@types/hammerjs/-/hammerjs-2.0.46.tgz",
+      "integrity": "sha512-ynRvcq6wvqexJ9brDMS4BnBLzmr0e14d6ZJTEShTBWKymQiHwlAyGu0ZPEFI2Fh1U53F7tN9ufClWM5KvqkKOw==",
+      "peer": true
+    },
     "@types/http-errors": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/@types/http-errors/-/http-errors-2.0.4.tgz",
@@ -18210,6 +18284,12 @@
       "integrity": "sha512-QE33hToZseCH3jS0qN96O/bSh3kaw/h+Tq7ngyY9eWDUnTlTNUyqfqvCXioLe5Na5jFsL78ra/wuBU4iuEgd4w==",
       "dev": true
     },
+    "component-emitter": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.3.1.tgz",
+      "integrity": "sha512-T0+barUSQRTUQASh8bx02dl+DhF54GtIDY13Y3m9oWTklKbb3Wv974meRpeZ3lp1JpLVECWWNHC4vaG2XHXouQ==",
+      "peer": true
+    },
     "compressible": {
       "version": "2.0.18",
       "resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.18.tgz",
@@ -18673,6 +18753,11 @@
       "integrity": "sha512-uJaamHkagcZtHPqCIHZxnFrXlunQXgBOsZSUOWwFw31QJCAbyTBoHMW75YOTur5ZNx8pIeAKgf6GWIgaqqiLhA==",
       "dev": true
     },
+    "diff-match-patch-ts": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/diff-match-patch-ts/-/diff-match-patch-ts-0.6.0.tgz",
+      "integrity": "sha512-U0uPIJ+wJqgaBoVw2MFSFpGIk7q3mJJ+/sehbxDZFv4Gx6a1GOmrsSLmxVDDrGtRL4Q9de084aa5lVpCHn+eUw=="
+    },
     "dir-glob": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
@@ -20386,6 +20471,12 @@
         "source-map-support": "^0.5.5"
       }
     },
+    "keycharm": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/keycharm/-/keycharm-0.4.0.tgz",
+      "integrity": "sha512-TyQTtsabOVv3MeOpR92sIKk/br9wxS+zGj4BG7CR8YbK4jM3tyIBaF0zhzeBUMx36/Q/iQLOKKOT+3jOQtemRQ==",
+      "peer": true
+    },
     "kind-of": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
@@ -20992,6 +21083,23 @@
         "tslib": "^2.3.0"
       }
     },
+    "ngx-diff": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/ngx-diff/-/ngx-diff-9.0.0.tgz",
+      "integrity": "sha512-eoF3D/9KjNqdnscIofkS81JWj87Ffq3eI3Gqim0SG/N/m0YWtOjximFxT1JI5bS8Gi1PVgoEQntJIZb/zaNULw==",
+      "requires": {
+        "tslib": "^2.0.0"
+      }
+    },
+    "ngx-highlight-js": {
+      "version": "18.0.0",
+      "resolved": "https://registry.npmjs.org/ngx-highlight-js/-/ngx-highlight-js-18.0.0.tgz",
+      "integrity": "sha512-r/LSijb5Ju95ZGm89+4e905kFWkDt1XdGCg2prR1wleTE77uROscjZMht0D40WSRbxmOg+J2zw9OOZvsWSLeeg==",
+      "requires": {
+        "highlight.js": "^11.9.0",
+        "tslib": "^2.3.0"
+      }
+    },
     "ngx-highlightjs": {
       "version": "12.0.0",
       "resolved": "https://registry.npmjs.org/ngx-highlightjs/-/ngx-highlightjs-12.0.0.tgz",
@@ -21001,6 +21109,14 @@
         "tslib": "^2.3.0"
       }
     },
+    "ngx-infinite-scroll": {
+      "version": "18.0.0",
+      "resolved": "https://registry.npmjs.org/ngx-infinite-scroll/-/ngx-infinite-scroll-18.0.0.tgz",
+      "integrity": "sha512-D183TDwpsd9Zl56UmItsl3RzHdN25srAISfg6lc3A8mEKkEgOq0s7ZzRAYcx8DHsAkMgtZqjIPEvMifD3DOB/g==",
+      "requires": {
+        "tslib": "^2.3.0"
+      }
+    },
     "ngx-mat-select-search": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/ngx-mat-select-search/-/ngx-mat-select-search-7.0.6.tgz",
@@ -23083,8 +23199,7 @@
     "uuid": {
       "version": "8.3.2",
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
-      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
-      "dev": true
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg=="
     },
     "validate-npm-package-license": {
       "version": "3.0.4",
@@ -23111,6 +23226,25 @@
       "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
       "dev": true
     },
+    "vis-data": {
+      "version": "7.1.9",
+      "resolved": "https://registry.npmjs.org/vis-data/-/vis-data-7.1.9.tgz",
+      "integrity": "sha512-COQsxlVrmcRIbZMMTYwD+C2bxYCFDNQ2EHESklPiInbD/Pk3JZ6qNL84Bp9wWjYjAzXfSlsNaFtRk+hO9yBPWA==",
+      "requires": {}
+    },
+    "vis-network": {
+      "version": "9.1.9",
+      "resolved": "https://registry.npmjs.org/vis-network/-/vis-network-9.1.9.tgz",
+      "integrity": "sha512-Ft+hLBVyiLstVYSb69Q1OIQeh3FeUxHJn0WdFcq+BFPqs+Vq1ibMi2sb//cxgq1CP7PH4yOXnHxEH/B2VzpZYA==",
+      "requires": {}
+    },
+    "vis-util": {
+      "version": "5.0.7",
+      "resolved": "https://registry.npmjs.org/vis-util/-/vis-util-5.0.7.tgz",
+      "integrity": "sha512-E3L03G3+trvc/X4LXvBfih3YIHcKS2WrP0XTdZefr6W6Qi/2nNCqZfe4JFfJU6DcQLm6Gxqj2Pfl+02859oL5A==",
+      "peer": true,
+      "requires": {}
+    },
     "vite": {
       "version": "5.1.7",
       "resolved": "https://registry.npmjs.org/vite/-/vite-5.1.7.tgz",
diff --git a/package.json b/package.json
index a390bf6..8c63917 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "MikroWizard",
-  "version": "1.0.1",
+  "version": "1.2.0",
   "copyright": "MikroWizard mikrowizard.com",
   "license": "AGPL",
   "author": "MikroWizard Team (https://github.com/MikroWizard)",
@@ -63,6 +63,8 @@
     "ngx-super-select": "^3.17.0",
     "rxjs": "~7.8.1",
     "tslib": "^2.3.0",
+    "vis-data": "^7.1.9",
+    "vis-network": "^9.1.9",
     "zone.js": "~0.14.4"
   },
   "devDependencies": {