Scaled images for print edition and fixed errors up to the beginning of layouts chapter (#19835). Also major revision of Tree, CustomField, and layouts overview.

Change-Id: I19f5e9511b83f953ce4707f324d81c2821ebb69d

7 files changed, 622 insertions, 120 deletions

diff --git a/documentation/layout/img/layout-intro-example-1.png b/documentation/layout/img/layout-intro-example-1.png
index e69ffb1ba1..1829a4feb7 100644
--- a/documentation/layout/img/layout-intro-example-1.png
+++ b/documentation/layout/img/layout-intro-example-1.png
diff --git a/documentation/layout/img/layout-schematic-hi.png b/documentation/layout/img/layout-schematic-hi.png
new file mode 100644
index 0000000000..89fe14362a
--- /dev/null
+++ b/documentation/layout/img/layout-schematic-hi.png
diff --git a/documentation/layout/layout-gridlayout.asciidoc b/documentation/layout/layout-gridlayout.asciidoc
index 4ffabfb318..e96aa8e2bd 100644
--- a/documentation/layout/layout-gridlayout.asciidoc
+++ b/documentation/layout/layout-gridlayout.asciidoc
@@ -54,12 +54,12 @@ date.setResolution(DateField.RESOLUTION_DAY);
 grid.addComponent(date, 2, 2, 3, 3);
 ----
 
-The resulting layout will look as follows. The borders have been made visible to
-illustrate the layout cells.
+The resulting layout is shown in <<figure.layout.gridlayout>>.
+The borders have been made visible to illustrate the layout cells.
 
-[[figure.ui.gridlayout]]
-.The Grid Layout Component
-image::img/gridlayout.png[]
+[[figure.layout.gridlayout]]
+.The [classname]#GridLayout# component
+image::img/gridlayout.png[width=50%, scaledwidth=75%]
 
 A component to be placed on the grid must not overlap with existing components.
 A conflict causes throwing a [classname]#GridLayout.OverlapsException#.
@@ -103,8 +103,6 @@ the Debug Mode">>.
 
 ====
 
-
-
 Often, you want to have one or more rows or columns that take all the available
 space left over from non-expanding rows or columns. You need to set the rows or
 columns as __expanding__ with [methodname]#setRowExpandRatio()# and
@@ -116,7 +114,6 @@ multiple expanding rows or columns, the ratio parameter sets the relative
 portion how much a specific row/column will take in relation with the other
 expanding rows/columns.
 
-
 [source, java]
 ----
 GridLayout grid = new GridLayout(3,2);
@@ -153,7 +150,7 @@ for (int col=0; col<grid.getColumns(); col++) {
     for (int row=0; row<grid.getRows(); row++) {
         Component c = grid.getComponent(col, row);
         grid.setComponentAlignment(c, Alignment.TOP_CENTER);
-        
+
         // Make the labels high to illustrate the empty
         // horizontal space.
         if (col != 0 || row != 0)
@@ -163,8 +160,8 @@ for (int col=0; col<grid.getColumns(); col++) {
 ----
 
 [[figure.ui.gridlayout.sizing.expanding]]
-.Expanding Rows and Columns in [classname]#GridLayout#
-image::img/gridlayout_sizing_expanding.png[]
+.Expanding rows and columns in [classname]#GridLayout#
+image::img/gridlayout_sizing_expanding.png[width=75%, scaledwidth=100%]
 
 If the size of the contained components is undefined or fixed, the expansion
 ratio is of the __excess__ space, as in
@@ -177,68 +174,18 @@ example, if we had a 100 pixels wide grid layout with two columns with 1.0 and
 [methodname]#setWidth("100%")#, the columns would have respective widths of 20
 and 80 pixels, regardless of the minimum size of their contained components.
 
-
+[[layout.gridlayout.css]]
 == CSS Style Rules
 
-
 [source, css]
 ----
 .v-gridlayout {}
 .v-gridlayout-margin {}
 ----
 
-The v-gridlayout is the root element of the [classname]#GridLayout# component.
-The v-gridlayout-margin is a simple element inside it that allows setting a
-padding between the outer element and the cells.
-
-For styling the individual grid cells, you should style the components inserted
-in the cells. The implementation structure of the grid can change, so depending
-on it, as is done in the example below, is not generally recommended. Normally,
-if you want to have, for example, a different color for a certain cell, just
-make set the component inside it [methodname]#setSizeFull()#, and add a style
-name for it. Sometimes you may need to use a layout component between a cell and
-its actual component just for styling.
-
-The following example shows how to make the grid borders visible, as in
-<<figure.ui.gridlayout.sizing.expanding>>.
-
-
-[source, java]
-----
-.v-gridlayout-gridexpandratio {
-    background: blue; /* Creates a "border" around the grid. */
-    margin:     10px; /* Empty space around the layout. */
-}
-
-/* Add padding through which the background color shows. */
-.v-gridlayout-gridexpandratio .v-gridlayout-margin {
-    padding: 2px;     
-}
-
-/* Add cell borders and make the cell backgrounds white.
- * Warning: This depends heavily on the HTML structure. */
-.v-gridlayout-gridexpandratio > div > div > div {
-    padding:    2px;   /* Layout background will show through. */
-    background: white; /* The cells will be colored white. */
-}
-
-/* Components inside the layout are a safe way to style cells. */
-.v-gridlayout-gridexpandratio .v-label {
-    text-align: left;
-    background: #ffffc0; /* Pale yellow */
-}
-----
-
-You should beware of [literal]#++margin++#, [literal]#++padding++#, and
-[literal]#++border++# settings in CSS as they can mess up the layout. The
-dimensions of layouts are calculated in the Client-Side Engine of Vaadin and
-some settings can interfere with these calculations. For more information, on
-margins and spacing, see
-<<dummy/../../../framework/layout/layout-settings#layout.settings.spacing,"Layout
-Cell Spacing">> and
-<<dummy/../../../framework/layout/layout-settings#layout.settings.margins,"Layout
-Margins">>
-
-
-
+The `v-gridlayout` is the root element of the [classname]#GridLayout# component.
+The `v-gridlayout-margin` is a simple element inside it that allows setting a padding between the outer element and the cells.
 
+For styling the individual grid cells, you should style the components inserted in the cells.
+Normally, if you want to have, for example, a different color for a certain cell, just make set the component inside it [methodname]#setSizeFull()#, and add a style name for it.
+Sometimes, you may need to wrap a component inside a layout component just for styling the cell.
diff --git a/documentation/layout/layout-orderedlayout.asciidoc b/documentation/layout/layout-orderedlayout.asciidoc
index 7cd2c7772d..4e0d53bbed 100644
--- a/documentation/layout/layout-orderedlayout.asciidoc
+++ b/documentation/layout/layout-orderedlayout.asciidoc
@@ -31,14 +31,13 @@ layout.addComponent(vertical);
 ----
 See the http://demo.vaadin.com/book-examples-vaadin7/book#layout.orderedlayout.basic[on-line example, window="_blank"].
 
-The component captions are placed above the component, so the layout will look
-as follows:
+In [classname]#VerticalLayout#, the captions of child components are placed above each component, so the layout would look as follows:
 
-image::img/orderedlayout_vertical.png[]
+image::img/orderedlayout_vertical.png[width=30%, scaledwidth=65%]
 
-Using [classname]#HorizontalLayout# gives the following layout:
+[classname]#HorizontalLayout# gives the following layout:
 
-image::img/orderedlayout_horizontal.png[]
+image::img/orderedlayout_horizontal.png[width=80%, scaledwidth=100%]
 
 [[layout.orderedlayout.properties]]
 == Properties or Attributes
@@ -48,18 +47,16 @@ Ordered layouts have the following properties:
 [[layout.orderedlayout.properties.table]]
 .Properties and Declarative Attributes
 
+[cols="1,2"]
 |===============
 |Property|Declarative Attribute
-|[parameter]#componentAlignment#|In child components:[literal]#++:left++#(default),[literal]#++:center++#,[literal]#++:right++#,[literal]#++:top++#(default),[literal]#++:middle++#,[literal]#++:bottom++#
-|[parameter]#spacing#|[parameter]#spacing#[replaceable]#[=&lt;boolean&gt;]#
-|[parameter]#margin#|[parameter]#margin#[replaceable]#[=&lt;boolean&gt;]#
-|[parameter]#expandRatio#|In child components:[parameter]#:expand#=[replaceable]#&lt;integer&gt;#or[parameter]#:expand#(implies ratio 1)
+|[parameter]#componentAlignment#|Alignment of a child component is specified in the child with: [literal]#++:left++# (default), [literal]#++:center++#, [literal]#++:right++#, [literal]#++:top++# (default), [literal]##++:middle++##, [literal]##++:bottom++##
+|[parameter]#spacing#|[parameter]##spacing##++[=++[replaceable]##&lt;boolean&gt;##++]++
+|[parameter]#margin#|[parameter]##margin##++[=++[replaceable]##&lt;boolean&gt;##++]++
+|[parameter]#expandRatio#|Expand ratio of a child component is specified in the child with: [parameter]#:expand#++[=++[replaceable]##&lt;integer&gt;##++]++ or [parameter]#:expand# (implies ratio 1)
 
 |===============
 
-
-
-
 [[layout.orderedlayout.spacing]]
 == Spacing in Ordered Layouts
 
@@ -76,9 +73,7 @@ element in a CSS selector, such as [literal]#++v-verticallayout++# for a
 [literal]#++v-horizontal++# for all vertically or horizontally ordered layouts,
 such as [classname]#FormLayout#.
 
-For example, the following sets the amount of spacing for all
-[classname]#VerticalLayout#s, as well as [classname]#FormLayout#, in the UI:
-
+For example, the following sets the amount of spacing for all [classname]##VerticalLayout##s (as well as [classname]##FormLayout##s) in the UI:
 
 [source, css]
 ----
@@ -89,7 +84,6 @@ For example, the following sets the amount of spacing for all
 
 Or for [classname]#HorizontalLayout#:
 
-
 [source, css]
 ----
 .v-horizontal > .v-spacing {
@@ -97,7 +91,6 @@ Or for [classname]#HorizontalLayout#:
 }
 ----
 
-
 [[layout.orderedlayout.sizing]]
 == Sizing Contained Components
 
@@ -106,8 +99,8 @@ different ways depending on how you specify their height or width in the primary
 direction of the layout component.
 
 [[figure.layout.orderedlayout.size.summary]]
-.Component Widths in [classname]#HorizontalLayout#
-image::img/horizontallayout_sizing.png[]
+.Component widths in [classname]#HorizontalLayout#
+image::img/horizontallayout_sizing.png[width=75%, scaledwidth=100%]
 
 <<figure.layout.orderedlayout.size.summary>> gives a summary of the sizing
 options for a [classname]#HorizontalLayout#. The figure is broken down in the
@@ -154,8 +147,6 @@ Component Hierarchy">>.
 
 ====
 
-
-
 An exception to the above rule is a case where you have a layout with undefined
 size that contains a component with a fixed or undefined size together with one
 or more components with relative size. In this case, the contained component
@@ -163,6 +154,7 @@ with fixed (or undefined) size in a sense defines the size of the containing
 layout, removing the paradox. That size is then used for the relatively sized
 components.
 
+ifdef::web[]
 The technique can be used to define the width of a [classname]#VerticalLayout#
 or the height of a [classname]#HorizontalLayout#.
 
@@ -171,10 +163,10 @@ or the height of a [classname]#HorizontalLayout#.
 ----
 // Vertical layout would normally have 100% width
 VerticalLayout vertical = new VerticalLayout();
-        
+
 // Shrink to fit the width of contained components
 vertical.setWidth(Sizeable.SIZE_UNDEFINED, 0);
-        
+
 // Label has normally 100% width, but we set it as
 // undefined so that it will take only the needed space
 Label label =
@@ -182,7 +174,7 @@ Label label =
               "the width of this Label \u2192");
 label.setWidth(Sizeable.SIZE_UNDEFINED, 0);
 vertical.addComponent(label);
-        
+
 // Button has undefined width by default
 Button butt = new Button("\u2190 This Button takes 100% "+
                          "of the width \u2192");
@@ -193,8 +185,9 @@ See the http://demo.vaadin.com/book-examples-vaadin7/book#layout.orderedlayout.s
 
 [[figure.layout.orderedlayout.sizing.undefined.defining]]
 .Defining the Size with a Component
-image::img/orderedlayout-sizing-undefined.png[]
+image::img/orderedlayout-sizing-undefined.png[width=50%, scaledwidth=75%]
 
+endif::web[]
 
 === Layout with Defined Size
 
@@ -310,7 +303,7 @@ excess space that expands, not the components.
 for (int i = 1; i <= 3; i++) {
     // Button with undefined size.
     Button button = new Button(captions[i - 1]);
-    
+
     layout4.addComponent(button);
 
     // Expand ratios are 1:2:3.
@@ -349,8 +342,3 @@ for (int i = 1; i <= 3; i++) {
 }
 parentLayout.addComponent(layout50);
 ----
-
-
-
-
-
diff --git a/documentation/layout/layout-overview.asciidoc b/documentation/layout/layout-overview.asciidoc
index 6481db6229..7a57e2a518 100644
--- a/documentation/layout/layout-overview.asciidoc
+++ b/documentation/layout/layout-overview.asciidoc
@@ -9,15 +9,23 @@ layout: page
 
 The user interface components in Vaadin can roughly be divided in two groups:
 components that the user can interact with and layout components for placing the
-other components to specific places in the user interface. The layout components
-are identical in their purpose to layout managers in regular desktop frameworks
-for Java and you can use plain Java to accomplish sophisticated component
-layouting.
+other components to specific places in the user interface.
+The layout components are identical in their purpose to layout managers in regular desktop frameworks for Java.
+You can use plain Java to accomplish sophisticated component layouts.
+
+[[figure.layout.intro.simple]]
+.Layout example
+image::img/layout-intro-example-1.png[width=75%, scaledwidth=100%]
 
 You start by creating a content layout for the UI and then add other layout
 components hierarchically, and finally the interaction components as the leaves
 of the component tree.
 
+[[figure.layout.intro.schematic]]
+.Layout schematic
+image::img/layout-schematic-hi.png[width=100%, scaledwidth=100%]
+
+Let us look at building a bit simplified version of the layout in <<figure.layout.intro.simple>>:
 
 [source, java]
 ----
@@ -25,20 +33,22 @@ of the component tree.
 VerticalLayout content = new VerticalLayout();
 setContent(content);
 
-// Add the topmost component.
-content.addComponent(new Label("The Ultimate Cat Finder"));
+HorizontalLayout titleBar = new HorizontalLayout();
+titleBar.setWidth("100%");
+root.addComponent(titleBar);
 
-// Add a horizontal layout for the bottom part.
-HorizontalLayout bottom = new HorizontalLayout();
-content.addComponent(bottom);
+Label title = new Label("The Ultimate Cat Finder");
+titleBar.addComponent(title);
+titleBar.setExpandRatio(title, 1.0f); // Expand
 
-bottom.addComponent(new Tree("Major Planets and Their Moons"));
-bottom.addComponent(new Panel());
-...
-----
+Label titleComment = new Label("for Vaadin");
+titleComment.setSizeUndefined(); // Take minimum space
+titleBar.addComponent(titleComment);
 
-Or in the declarative format:
+... build rest of the layout ...
+----
 
+Or in the declarative format (roughly):
 
 [source, html]
 ----
@@ -46,8 +56,9 @@ Or in the declarative format:
   <vaadin-label>The Ultimate Cat Finder</vaadin-label>
 
   <vaadin-horizontal-layout>
-    <vaadin-tree caption="Major Planets and Their Moons"/>
+    <vaadin-tree caption="Possible Places"/>
     <vaadin-panel/>
+    ...
   </vaadin-horizontal-layout>
 </vaadin-vertical-layout>
 ----
@@ -65,10 +76,3 @@ described in
 
 You can see a finished version of the above example in
 <<figure.layout.intro.simple>>.
-
-[[figure.layout.intro.simple]]
-.Layout Example
-image::img/layout-intro-example-1.png[]
-
-
-
diff --git a/documentation/layout/original-drawings/Makefile b/documentation/layout/original-drawings/Makefile
new file mode 100644
index 0000000000..7e9434de9c
--- /dev/null
+++ b/documentation/layout/original-drawings/Makefile
@@ -0,0 +1,17 @@
+SVG =
+RASTERIMAGES = layout-schematic
+
+RASTERSRCIMAGES := $(foreach file, $(RASTERIMAGES), $(file).svg)
+RASTERIMAGES_HI := $(foreach file, $(RASTERIMAGES), ../img/$(file)-hi.png)
+SVGTRGIMAGES := $(foreach file, $(SVG), ../img/$(file).svg)
+
+images: $(RASTERIMAGES_HI) $(SVGTRGIMAGES) FORCE
+# Just do low now $(TRGIMAGES_LO)
+
+$(RASTERIMAGES_HI): ../img/%-hi.png: %.svg
+	inkscape --export-png $@ --export-dpi=300 --export-area-drawing $<
+
+$(SVGTRGIMAGES): ../img/%.svg: %.svg FORCE
+	inkscape $< --export-text-to-path -l $@
+
+FORCE:
diff --git a/documentation/layout/original-drawings/layout-schematic.svg b/documentation/layout/original-drawings/layout-schematic.svg
new file mode 100644
index 0000000000..ec1b9240a5
--- /dev/null
+++ b/documentation/layout/original-drawings/layout-schematic.svg
@@ -0,0 +1,546 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<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="82mm"
+   height="41mm"
+   id="svg1901"
+   sodipodi:version="0.32"
+   inkscape:version="0.91 r"
+   sodipodi:docname="layout-schematic.svg"
+   version="1.1">
+  <defs
+     id="defs1903" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="1"
+     inkscape:pageshadow="2"
+     inkscape:zoom="3.959798"
+     inkscape:cx="148.02363"
+     inkscape:cy="70.790343"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     inkscape:window-width="1920"
+     inkscape:window-height="1060"
+     inkscape:window-x="-2"
+     inkscape:window-y="-3"
+     showgrid="true"
+     inkscape:window-maximized="1"
+     inkscape:snap-center="true"
+     inkscape:snap-grids="true"
+     inkscape:snap-bbox="true"
+     inkscape:object-paths="true"
+     inkscape:object-nodes="true"
+     inkscape:snap-object-midpoints="true"
+     showguides="true"
+     inkscape:guide-bbox="true"
+     units="mm"
+     fit-margin-top="2"
+     fit-margin-left="2"
+     fit-margin-right="2"
+     fit-margin-bottom="2">
+    <inkscape:grid
+       type="xygrid"
+       id="grid2982"
+       empspacing="10"
+       visible="true"
+       enabled="true"
+       snapvisiblegridlinesonly="true"
+       spacingx="3.5433071"
+       spacingy="3.5433071"
+       units="mm"
+       originx="18.581643"
+       originy="0.35428181" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata1906">
+    <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 />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Taso 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(18.581643,-907.44094)">
+    <rect
+       y="910.62994"
+       x="46.062992"
+       height="138.189"
+       width="162.99213"
+       id="rect4347-0-2-5-5-9-59"
+       style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#e61e6d;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate" />
+    <flowRoot
+       xml:space="preserve"
+       id="flowRoot4349"
+       style="font-style:normal;font-weight:normal;font-size:10px;line-height:125%;font-family:Sans;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       transform="translate(7.0866142,882.28351)"><flowRegion
+         id="flowRegion4351"><rect
+           id="rect4353"
+           width="67.322838"
+           height="42.519684"
+           x="49.6063"
+           y="56.692909"
+           style="font-size:10px" /></flowRegion><flowPara
+         id="flowPara4355" /></flowRoot>    <g
+       id="g4392-0-4-6-8"
+       transform="translate(216.14174,42.519773)" />
+    <rect
+       y="914.17328"
+       x="49.6063"
+       height="131.10236"
+       width="155.90552"
+       id="rect4347-0-2-5-5-9"
+       style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#e61e6d;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate" />
+    <rect
+       y="917.71655"
+       x="53.149605"
+       height="21.259869"
+       width="148.81889"
+       id="rect4347-0-2-5-5-9-5"
+       style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#e61e6d;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate" />
+    <rect
+       y="921.25989"
+       x="56.692913"
+       height="14.17316"
+       width="102.7559"
+       id="rect4347-0-2-5-5-9-5-8"
+       style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#ffc13f;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate" />
+    <rect
+       y="921.25983"
+       x="162.99213"
+       height="14.173287"
+       width="35.433075"
+       id="rect4347-0-2-5-5-9-5-8-5"
+       style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#ffc13f;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate" />
+    <rect
+       y="942.51971"
+       x="53.149605"
+       height="88.582695"
+       width="148.81889"
+       id="rect4347-0-2-5-5-9-5-84"
+       style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#e61e6d;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate" />
+    <rect
+       y="1034.6458"
+       x="53.149605"
+       height="7.0865755"
+       width="148.81889"
+       id="rect4347-0-2-5-5-9-5-9"
+       style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#ffc13f;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate" />
+    <rect
+       y="946.06305"
+       x="56.692913"
+       height="81.496048"
+       width="46.062984"
+       id="rect4347-0-2-5-5-9-5-8-0"
+       style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#e61e6d;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate" />
+    <rect
+       y="956.69293"
+       x="60.236221"
+       height="67.322792"
+       width="38.976372"
+       id="rect4347-0-2-5-5-9-5-8-0-5"
+       style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#ffc13f;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate" />
+    <rect
+       y="946.06293"
+       x="106.29922"
+       height="81.49617"
+       width="92.125977"
+       id="rect4347-0-2-5-5-9-5-8-0-8"
+       style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#e61e6d;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate" />
+    <rect
+       y="956.69287"
+       x="109.84253"
+       height="67.322922"
+       width="85.03936"
+       id="rect4347-0-2-5-5-9-5-8-0-5-4"
+       style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#e61e6d;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate" />
+    <path
+       style="fill:none;stroke:#33383a;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 49.606297,921.25994 -10.629919,-5e-5"
+       id="path3003-6-5-1"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cc" />
+    <circle
+       cy="921.25989"
+       cx="49.606293"
+       style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;stroke:#33383a;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+       id="path2997-7-6"
+       r="2.1259842" />
+    <circle
+       cy="921.25989"
+       cx="38.976379"
+       style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;stroke:#33383a;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+       id="path2997-7-6-1"
+       r="2.1259842" />
+    <path
+       style="fill:none;stroke:#33383a;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 53.149601,1038.1893 -14.17322,0"
+       id="path3003-6-5-1-8"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cc" />
+    <circle
+       cy="1038.1891"
+       cx="53.149601"
+       style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;stroke:#33383a;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+       id="path2997-7-6-7"
+       r="2.1259842" />
+    <circle
+       cy="1038.189"
+       cx="38.976379"
+       style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;stroke:#33383a;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+       id="path2997-7-6-1-4"
+       r="2.1259842" />
+    <path
+       style="fill:none;stroke:#33383a;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 56.69291,953.14967 -17.716532,-2e-5"
+       id="path3003-6-5-1-5"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cc" />
+    <circle
+       cy="953.14966"
+       cx="56.692902"
+       style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;stroke:#33383a;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+       id="path2997-7-6-13"
+       r="2.1259842" />
+    <circle
+       cy="953.14966"
+       cx="38.976376"
+       style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;stroke:#33383a;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+       id="path2997-7-6-1-7"
+       r="2.1259842" />
+    <path
+       style="fill:none;stroke:#33383a;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 53.1496,946.06308 -14.173222,-4e-5"
+       id="path3003-6-5-1-5-1"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cc" />
+    <circle
+       cy="946.06299"
+       cx="53.149601"
+       style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;stroke:#33383a;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+       id="path2997-7-6-13-9"
+       r="2.1259842" />
+    <circle
+       cy="946.06305"
+       cx="38.976379"
+       style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;stroke:#33383a;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+       id="path2997-7-6-1-7-8"
+       r="2.1259842" />
+    <path
+       style="fill:none;stroke:#33383a;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 216.14174,931.8898 -17.71654,0"
+       id="path3003-6-5-1-5-7"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cc" />
+    <circle
+       cy="931.88983"
+       cx="198.42522"
+       style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;stroke:#33383a;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+       id="path2997-7-6-13-3"
+       r="2.1259842" />
+    <circle
+       cy="931.88983"
+       cx="216.14174"
+       style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;stroke:#33383a;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+       id="path2997-7-6-1-7-7"
+       r="2.1259842" />
+    <path
+       style="fill:none;stroke:#33383a;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 56.692911,928.34655 -17.716533,-5e-5"
+       id="path3003-6-5-1-5-78"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cc" />
+    <circle
+       cy="928.3465"
+       cx="56.692902"
+       style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;stroke:#33383a;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+       id="path2997-7-6-13-7"
+       r="2.1259842" />
+    <circle
+       cy="928.3465"
+       cx="38.976379"
+       style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;stroke:#33383a;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+       id="path2997-7-6-1-7-0"
+       r="2.1259842" />
+    <path
+       style="fill:none;stroke:#33383a;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 60.236217,960.23629 -21.259839,-3e-5"
+       id="path3003-6-5-1-5-13"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cc" />
+    <circle
+       cy="960.23627"
+       cx="60.236206"
+       style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;stroke:#33383a;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+       id="path2997-7-6-13-39"
+       r="2.1259842" />
+    <circle
+       cy="960.23627"
+       cx="38.976376"
+       style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;stroke:#33383a;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+       id="path2997-7-6-1-7-9"
+       r="2.1259842" />
+    <path
+       style="fill:none;stroke:#33383a;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 216.14174,949.60637 -17.71653,0"
+       id="path3003-6-5-1-5-7-1"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cc" />
+    <circle
+       cy="949.60632"
+       cx="198.42522"
+       style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;stroke:#33383a;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+       id="path2997-7-6-13-3-2"
+       r="2.1259842" />
+    <circle
+       cy="949.60638"
+       cx="216.14175"
+       style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;stroke:#33383a;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+       id="path2997-7-6-1-7-7-4"
+       r="2.1259842" />
+    <path
+       style="fill:none;stroke:#33383a;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 216.14174,921.25991 -14.17323,0"
+       id="path3003-6-5-1-5-7-1-1"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cc" />
+    <circle
+       cy="921.25989"
+       cx="201.96854"
+       style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;stroke:#33383a;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+       id="path2997-7-6-13-3-2-6"
+       r="2.1259842" />
+    <circle
+       cy="921.26001"
+       cx="216.14175"
+       style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;stroke:#33383a;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+       id="path2997-7-6-1-7-7-4-2"
+       r="2.1259842" />
+    <rect
+       y="970.86621"
+       x="120.47243"
+       height="38.976353"
+       width="63.77953"
+       id="rect4347-0-2-5-5-9-5-8-0-5-4-1"
+       style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#e61e6d;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate" />
+    <rect
+       y="974.40948"
+       x="124.01573"
+       height="14.173236"
+       width="56.692928"
+       id="rect4347-0-2-5-5-9-5-8-0-5-4-1-7"
+       style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#ffc13f;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate" />
+    <rect
+       y="992.12604"
+       x="124.01573"
+       height="14.173219"
+       width="56.692928"
+       id="rect4347-0-2-5-5-9-5-8-0-5-4-1-7-8"
+       style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#ffc13f;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate" />
+    <path
+       style="fill:none;stroke:#33383a;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 216.14173,985.03941 -35.43307,2e-5"
+       id="path3003-6-5-1-5-7-7"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cc" />
+    <circle
+       cy="985.03943"
+       cx="180.70866"
+       style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;stroke:#33383a;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+       id="path2997-7-6-13-3-5"
+       r="2.1259842" />
+    <circle
+       cy="985.03943"
+       cx="216.14174"
+       style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;stroke:#33383a;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+       id="path2997-7-6-1-7-7-0"
+       r="2.1259842" />
+    <path
+       style="fill:none;stroke:#33383a;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 216.14173,1002.7559 -35.43307,0"
+       id="path3003-6-5-1-5-7-7-7"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cc" />
+    <circle
+       cy="1002.7559"
+       cx="180.70866"
+       style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;stroke:#33383a;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+       id="path2997-7-6-13-3-5-3"
+       r="2.1259842" />
+    <circle
+       cy="1002.7559"
+       cx="216.14174"
+       style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;stroke:#33383a;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+       id="path2997-7-6-1-7-7-0-3"
+       r="2.1259842" />
+    <path
+       style="fill:none;stroke:#33383a;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 216.14173,974.40949 -31.88976,2e-5"
+       id="path3003-6-5-1-5-7-1-1-7"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cc" />
+    <circle
+       cy="974.40948"
+       cx="184.25197"
+       style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;stroke:#33383a;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+       id="path2997-7-6-13-3-2-6-9"
+       r="2.1259842" />
+    <circle
+       cy="974.40955"
+       cx="216.14177"
+       style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;stroke:#33383a;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+       id="path2997-7-6-1-7-7-4-2-4"
+       r="2.1259842" />
+    <flowRoot
+       transform="translate(34.181781,923.10248)"
+       id="flowRoot4367-0-7-2-4-4-43-5-2"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.25px;line-height:121%;font-family:Montserrat;-inkscape-font-specification:'Montserrat, Normal';text-align:end;letter-spacing:0px;word-spacing:0px;writing-mode:lr;text-anchor:end;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;"
+       xml:space="preserve"><flowRegion
+         id="flowRegion4369-0-6-7-7-5-6-6-7" /><flowPara
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.25px;line-height:121%;font-family:Montserrat;-inkscape-font-specification:'Montserrat, Normal';text-align:end;writing-mode:lr;text-anchor:end;"
+         id="flowPara4783-7-2-8-1-0-0">VerticalLayout</flowPara></flowRoot>    <flowRoot
+       transform="translate(34.055515,1040.0315)"
+       id="flowRoot4367-0-7-2-4-4-4"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.25px;line-height:121%;font-family:Montserrat;-inkscape-font-specification:'Montserrat, Normal';text-align:end;letter-spacing:0px;word-spacing:0px;writing-mode:lr;text-anchor:end;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;"
+       xml:space="preserve"><flowRegion
+         id="flowRegion4369-0-6-7-7-5-8" /><flowPara
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.25px;line-height:121%;font-family:Montserrat;-inkscape-font-specification:'Montserrat, Normal';text-align:end;writing-mode:lr;text-anchor:end;"
+         id="flowPara4783-7-2-8-5">Label</flowPara></flowRoot>    <flowRoot
+       transform="translate(34.055511,955.26005)"
+       id="flowRoot4367-0-7-2-4-4-43"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.25px;line-height:121%;font-family:Montserrat;-inkscape-font-specification:'Montserrat, Normal';text-align:end;letter-spacing:0px;word-spacing:0px;writing-mode:lr;text-anchor:end;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;"
+       xml:space="preserve"><flowRegion
+         id="flowRegion4369-0-6-7-7-5-6" /><flowPara
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.25px;line-height:121%;font-family:Montserrat;-inkscape-font-specification:'Montserrat, Normal';text-align:end;writing-mode:lr;text-anchor:end;"
+         id="flowPara4783-7-2-8-1">Panel</flowPara></flowRoot>    <flowRoot
+       transform="translate(34.176406,947.90968)"
+       id="flowRoot4367-0-7-2-4-4-43-3"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.25px;line-height:121%;font-family:Montserrat;-inkscape-font-specification:'Montserrat, Normal';text-align:end;letter-spacing:0px;word-spacing:0px;writing-mode:lr;text-anchor:end;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;"
+       xml:space="preserve"><flowRegion
+         id="flowRegion4369-0-6-7-7-5-6-1" /><flowPara
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.25px;line-height:121%;font-family:Montserrat;-inkscape-font-specification:'Montserrat, Normal';text-align:end;letter-spacing:0px;writing-mode:lr;text-anchor:end;"
+         id="flowPara4684">HorizontalLayout</flowPara></flowRoot>    <flowRoot
+       transform="translate(220.06236,933.6273)"
+       id="flowRoot4367-0-7-2-4-4-8"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.25px;line-height:58%;font-family:Montserrat;-inkscape-font-specification:'Montserrat, Normal';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;color:#000000;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-rule:nonzero;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;filter-blend-mode:normal;filter-gaussianBlur-deviation:0;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate;"
+       xml:space="preserve"><flowRegion
+         id="flowRegion4369-0-6-7-7-5-7" /><flowPara
+         style="font-size:6.25px;text-align:start;text-anchor:start;color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;filter-blend-mode:normal;filter-gaussianBlur-deviation:0;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate;-inkscape-font-specification:'Montserrat, Normal';font-family:Montserrat;font-weight:normal;font-style:normal;font-stretch:normal;font-variant:normal;writing-mode:lr;line-height:58%;"
+         id="flowPara4783-7-2-8-7">Label</flowPara></flowRoot>    <flowRoot
+       transform="translate(34.055512,930.18906)"
+       id="flowRoot4367-0-7-2-4-4-43-5"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.25px;line-height:121%;font-family:Montserrat;-inkscape-font-specification:'Montserrat, Normal';text-align:end;letter-spacing:0px;word-spacing:0px;writing-mode:lr;text-anchor:end;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;"
+       xml:space="preserve"><flowRegion
+         id="flowRegion4369-0-6-7-7-5-6-6" /><flowPara
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.25px;line-height:121%;font-family:Montserrat;-inkscape-font-specification:'Montserrat, Normal';text-align:end;writing-mode:lr;text-anchor:end;"
+         id="flowPara4783-7-2-8-1-0">Label</flowPara></flowRoot>    <flowRoot
+       transform="translate(33.772237,962.0788)"
+       id="flowRoot4367-0-7-2-4-4-43-8"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.25px;line-height:121%;font-family:Montserrat;-inkscape-font-specification:'Montserrat, Normal';text-align:end;letter-spacing:0px;word-spacing:0px;writing-mode:lr;text-anchor:end;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;"
+       xml:space="preserve"><flowRegion
+         id="flowRegion4369-0-6-7-7-5-6-7" /><flowPara
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.25px;line-height:121%;font-family:Montserrat;-inkscape-font-specification:'Montserrat, Normal';text-align:end;writing-mode:lr;text-anchor:end;"
+         id="flowPara4783-7-2-8-1-1">Tree</flowPara></flowRoot>    <flowRoot
+       transform="translate(220.06237,951.34394)"
+       id="flowRoot4367-0-7-2-4-4-8-4"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.25px;line-height:58%;font-family:Montserrat;-inkscape-font-specification:'Montserrat, Normal';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;"
+       xml:space="preserve"><flowRegion
+         id="flowRegion4369-0-6-7-7-5-7-7" /><flowPara
+         style="font-size:6.25px;text-align:start;text-anchor:start;-inkscape-font-specification:'Montserrat, Normal';font-family:Montserrat;font-weight:normal;font-style:normal;font-stretch:normal;font-variant:normal;writing-mode:lr;line-height:58%;"
+         id="flowPara4783-7-2-8-7-1">Panel</flowPara></flowRoot>    <flowRoot
+       transform="translate(219.88965,923.13155)"
+       id="flowRoot4367-0-7-2-4-4-8-4-8"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.25px;line-height:58%;font-family:Montserrat;-inkscape-font-specification:'Montserrat, Normal';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;"
+       xml:space="preserve"><flowRegion
+         id="flowRegion4369-0-6-7-7-5-7-7-1" /><flowPara
+         style="font-size:6.25px;line-height:58%;text-align:start;text-anchor:start;-inkscape-font-specification:'Montserrat, Normal';font-family:Montserrat;font-weight:normal;font-style:normal;font-stretch:normal;font-variant:normal;writing-mode:lr;"
+         id="flowPara4865">HorizontalLayout</flowPara></flowRoot>    <flowRoot
+       transform="translate(220.25102,986.77706)"
+       id="flowRoot4367-0-7-2-4-4-8-9"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.25px;line-height:58%;font-family:Montserrat;-inkscape-font-specification:'Montserrat, Normal';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;"
+       xml:space="preserve"><flowRegion
+         id="flowRegion4369-0-6-7-7-5-7-6" /><flowPara
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.25px;line-height:58%;font-family:Montserrat;-inkscape-font-specification:'Montserrat, Normal';text-align:start;writing-mode:lr;text-anchor:start;"
+         id="flowPara4783-7-2-8-7-4">Label</flowPara></flowRoot>    <flowRoot
+       transform="translate(220.25102,1004.4936)"
+       id="flowRoot4367-0-7-2-4-4-8-9-7"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.25px;line-height:58%;font-family:Montserrat;-inkscape-font-specification:'Montserrat, Normal';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;"
+       xml:space="preserve"><flowRegion
+         id="flowRegion4369-0-6-7-7-5-7-6-6" /><flowPara
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.25px;line-height:58%;font-family:Montserrat;-inkscape-font-specification:'Montserrat, Normal';text-align:start;writing-mode:lr;text-anchor:start;"
+         id="flowPara4783-7-2-8-7-4-8">Label</flowPara></flowRoot>    <flowRoot
+       transform="translate(219.88712,976.25205)"
+       id="flowRoot4367-0-7-2-4-4-8-4-8-2"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.25px;line-height:58%;font-family:Montserrat;-inkscape-font-specification:'Montserrat, Normal';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;"
+       xml:space="preserve"><flowRegion
+         id="flowRegion4369-0-6-7-7-5-7-7-1-6" /><flowPara
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.25px;line-height:58%;font-family:Montserrat;-inkscape-font-specification:'Montserrat, Normal';text-align:start;writing-mode:lr;text-anchor:start;"
+         id="flowPara4865-9">VerticalLayout</flowPara></flowRoot>    <path
+       style="fill:none;stroke:#33383a;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 46.06299,914.17332 -7.086612,-5e-5"
+       id="path3003-6-5-1-86"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cc" />
+    <circle
+       cy="914.17328"
+       cx="46.062992"
+       style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;stroke:#33383a;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+       id="path2997-7-6-8"
+       r="2.1259842" />
+    <circle
+       cy="914.17328"
+       cx="38.976379"
+       style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;stroke:#33383a;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+       id="path2997-7-6-1-6"
+       r="2.1259842" />
+    <flowRoot
+       transform="translate(34.181782,916.01583)"
+       id="flowRoot4367-0-7-2-4-4-43-5-2-5"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.25px;line-height:121%;font-family:Montserrat;-inkscape-font-specification:'Montserrat, Normal';text-align:end;letter-spacing:0px;word-spacing:0px;writing-mode:lr;text-anchor:end;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;"
+       xml:space="preserve"><flowRegion
+         id="flowRegion4369-0-6-7-7-5-6-6-7-3" /><flowPara
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.25px;line-height:121%;font-family:Montserrat;-inkscape-font-specification:'Montserrat, Normal';text-align:end;writing-mode:lr;text-anchor:end;"
+         id="flowPara4783-7-2-8-1-0-0-9">UI</flowPara></flowRoot>    <path
+       style="fill:none;stroke:#33383a;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 216.1417,960.23626 -21.25981,0"
+       id="path3003-6-5-1-5-7-1-1-7-5"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cc" />
+    <circle
+       cy="960.23627"
+       cx="194.8819"
+       style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;stroke:#33383a;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+       id="path2997-7-6-13-3-2-6-9-1"
+       r="2.1259842" />
+    <circle
+       cy="960.23627"
+       cx="216.14174"
+       style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;stroke:#33383a;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+       id="path2997-7-6-1-7-7-4-2-4-9"
+       r="2.1259842" />
+    <flowRoot
+       transform="translate(219.88709,962.07882)"
+       id="flowRoot4367-0-7-2-4-4-8-4-8-2-0"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.25px;line-height:57.99999833%;font-family:Montserrat;-inkscape-font-specification:'Montserrat, Normal';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       xml:space="preserve"><flowRegion
+         id="flowRegion4369-0-6-7-7-5-7-7-1-6-7" /><flowPara
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.25px;line-height:57.99999833%;font-family:Montserrat;-inkscape-font-specification:'Montserrat, Normal';text-align:start;writing-mode:lr-tb;text-anchor:start"
+         id="flowPara4865-9-0">VerticalLayout</flowPara></flowRoot>  </g>
+</svg>