Change-Id: I8a52ca754262a32487d6c8330d0382635d9fedca

пре 7 година · aa5c44860b
--- a/documentation/application/application-environment.asciidoc
+++ b/documentation/application/application-environment.asciidoc
@@ -167,7 +167,8 @@ such as Servlet 3.0, you should use:
  id="WebApp_ID" version="**3.0**"
  xmlns="http://java.sun.com/xml/ns/j2ee"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="**http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd**"&gt;
  xsi:schemaLocation="**http://java.sun.com/xml/ns/javaee
      http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd**"&gt;
 ----
 Servlet 3.0 support is useful for at least server push.

--- a/documentation/application/application-lifecycle.asciidoc
+++ b/documentation/application/application-lifecycle.asciidoc
@@ -427,7 +427,7 @@ public class MyUI extends UI {
        setContent(new Button("Logout", event -> {// Java 8
            // Redirect this page immediately
            getPage().setLocation("/myapp/logout.html");
            

            // Close the session
            getSession().close();
        }));
@@ -442,27 +442,20 @@ See the http://demo.vaadin.com/book-examples-vaadin7/book#application.lifecycle.
 This is not enough. When a session is closed from one UI, any other UIs attached
 to it are left hanging. When the client-side engine notices that a UI and the
 session are gone on the server-side, it displays a "Session Expired" message
 and, by default, reloads the UI when the message is clicked. ((("session",
 "expiration")))
 and, by default, reloads the UI when the message is clicked.
 ((("session", "expiration")))
 ((("redirection")))
 ((("system
 messages")))
 You can customize the message and the redirect URL in the system messages
 ((("system messages")))
 You can customize the message and the redirect URL in the system messages.

 ifdef::web[]
 , as described in
 <<dummy/../../../framework/application/application-errors#application.errors.systemmessages,"Customizing
 System
 Messages">>
 It is described in <<dummy/../../../framework/application/application-errors#application.errors.systemmessages,"Customizing System Messages">>.
 endif::web[]
 .

 ((("heartbeat")))
 ((("UI",
 "heartbeat")))
 ((("UI", "heartbeat")))
 ((("push")))
 ((("server
 push")))
 ((("server push")))
 The client-side engine notices the expiration when user interaction causes a
 server request to be made or when the keep-alive heartbeat occurs. To make the
 UIs detect the situation faster, you need to make the heart beat faster, as was
@@ -471,7 +464,6 @@ immediately, as is done in the following example. Access to the UIs must be
 synchronized as described in
 <<dummy/../../../framework/advanced/advanced-push#advanced.push,"Server Push">>.


 [source, java]
 ----
@Push
@@ -496,7 +488,3 @@ In the above example, we assume that all UIs in the session have push enabled
 and that they should be redirected; popups you might want to close instead of
 redirecting. It is not necessary to call [methodname]#close()# for them
 individually, as we close the entire session afterwards.




--- a/documentation/application/application-resources.asciidoc
+++ b/documentation/application/application-resources.asciidoc
@@ -46,7 +46,7 @@ The resource classes in Vaadin are grouped under two interfaces: a generic

 [[figure.resource.classdiagram]]
 .Resource Interface and Class Diagram
 image::img/resource_classdiagram-hi.png[width=70%, scaledwidth=90%]
 image::img/resource_classdiagram-hi.png[width=80%, scaledwidth=100%]

 [[application.resources.file]]
 == File Resources
@@ -162,41 +162,46 @@ the [classname]#StreamResource.StreamSource# interface and its
 The following example demonstrates the creation of a simple image in PNG image
 format.


 [source, java]
 ----
 import java.awt.image.*;

 public class MyImageSource
             implements StreamResource.StreamSource {
 public class MyImageSource implements StreamSource {
    ByteArrayOutputStream imagebuffer = null;
    int reloads = 0;

    /* We need to implement this method that returns
     * the resource as a stream. */
    // This method generates the stream contents
    public InputStream getStream () {
        /* Create an image and draw something on it. */
        BufferedImage image = new BufferedImage (200, 200,
                               BufferedImage.TYPE_INT_RGB);
        Graphics drawable = image.getGraphics();
        drawable.setColor(Color.lightGray);
        drawable.fillRect(0,0,200,200);
        drawable.setColor(Color.yellow);
        drawable.fillOval(25,25,150,150);
        drawable.setColor(Color.blue);
        drawable.drawRect(0,0,199,199);
        drawable.setColor(Color.black);
        drawable.drawString("Reloads="+reloads, 75, 100);
        // Create an image
        BufferedImage image = new BufferedImage (400, 400,
                                  BufferedImage.TYPE_INT_RGB);
        Graphics2D drawable = image.createGraphics();

        // Draw something static
        drawable.setStroke(new BasicStroke(5));
        drawable.setColor(Color.WHITE);
        drawable.fillRect(0, 0, 400, 400);
        drawable.setColor(Color.BLACK);
        drawable.drawOval(50, 50, 300, 300);

        // Draw something dynamic
        drawable.setFont(new Font("Montserrat",
                                  Font.PLAIN, 48));
        drawable.drawString("Reloads=" + reloads, 75, 216);
        reloads++;
        drawable.setColor(new Color(0, 165, 235));
        int x= (int) (200-10 + 150*Math.sin(reloads * 0.3));
        int y= (int) (200-10 + 150*Math.cos(reloads * 0.3));
        drawable.fillOval(x, y, 20, 20);

        try {
            /* Write the image to a buffer. */
            // Write the image to a buffer
            imagebuffer = new ByteArrayOutputStream();
            ImageIO.write(image, "png", imagebuffer);

            /* Return a stream from the buffer. */
            // Return a stream from the buffer
            return new ByteArrayInputStream(
                         imagebuffer.toByteArray());
                imagebuffer.toByteArray());
        } catch (IOException e) {
            return null;
        }
@@ -215,11 +220,11 @@ Below we display the image with the [classname]#Image# component.
 [source, java]
 ----
 // Create an instance of our stream source.
 StreamResource.StreamSource imagesource = new MyImageSource ();
 StreamSource imagesource = new MyImageSource();

 // Create a resource that uses the stream source and give it a name.
 // The constructor will automatically register the resource in
 // the application.
 // Create a resource that uses the stream source and give it
 // a name. The constructor will automatically register the
 // resource in the application.
 StreamResource resource =
        new StreamResource(imagesource, "myimage.png");

@@ -231,8 +236,8 @@ layout.addComponent(new Image("Image title", resource));
 The resulting image is shown in <<figure.application.resource.stream>>.

 [[figure.application.resource.stream]]
 .A Stream Resource
 image::img/application_streamresource.png[]
 .A stream resource
 image::img/application_streamresource.png[width=25%, scaledwidth=35%]

 Another way to create dynamic content is a request handler, described in
 <<dummy/../../../framework/advanced/advanced-requesthandler#advanced.requesthandler,"Request
--- a/documentation/application/img/application_streamresource.png
+++ b/documentation/application/img/application_streamresource.png
--- a/documentation/application/img/resource_classdiagram-hi.png
+++ b/documentation/application/img/resource_classdiagram-hi.png
--- a/documentation/application/img/view-navigation-hi.png
+++ b/documentation/application/img/view-navigation-hi.png
--- a/documentation/application/original-drawings/Makefile
+++ b/documentation/application/original-drawings/Makefile
@@ -1,5 +1,6 @@
 SVG =
 RASTERIMAGES = application-architecture view-navigation ui-schematic
 RASTERIMAGES = application-architecture view-navigation ui-schematic \
 	resource_classdiagram

 RASTERSRCIMAGES := $(foreach file, $(RASTERIMAGES), $(file).svg)
 RASTERIMAGES_HI := $(foreach file, $(RASTERIMAGES), ../img/$(file)-hi.png)
--- a/documentation/application/original-drawings/resource_classdiagram.svg
+++ b/documentation/application/original-drawings/resource_classdiagram.svg
--- a/documentation/application/original-drawings/view-navigation.svg
+++ b/documentation/application/original-drawings/view-navigation.svg
@@ -1081,10 +1081,10 @@
     inkscape:pageopacity="1"
     inkscape:pageshadow="2"
     inkscape:zoom="1.8159691"
     inkscape:cx="89.180593"
     inkscape:cy="156.67691"
     inkscape:cx="136.79995"
     inkscape:cy="147.93516"
     inkscape:document-units="mm"
     inkscape:current-layer="layer1"
     inkscape:current-layer="g5458"
     gridtolerance="10000"
     inkscape:window-width="1920"
     inkscape:window-height="1060"
@@ -1144,7 +1144,7 @@
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
        <dc:title />
      </cc:Work>
    </rdf:RDF>
  </metadata>
@@ -1242,7 +1242,7 @@
           id="tspan7066-3-4-3-7"
           y="1016.0297"
           x="20.546753"
           sodipodi:role="line">Email</tspan></text>
           sodipodi:role="line">Password</tspan></text>
      <rect
         y="1020.4725"
         x="60.236221"
@@ -1260,7 +1260,7 @@
           id="tspan7066-3-4-3-5"
           y="1026.6595"
           x="20.546753"
           sodipodi:role="line">Planet</tspan></text>
           sodipodi:role="line">Email</tspan></text>
      <g
         id="g8337"
         transform="translate(17.716535,-1.4546875e-5)">
@@ -1320,7 +1320,7 @@
         height="53.149601"
         width="99.212601"
         id="rect4408-7-5-2-9-3"
         style="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:#ffc13f;fill-opacity:1;fill-rule:nonzero;stroke:#33383a;stroke-width:1.0629921;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" />
         style="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:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#33383a;stroke-width:1.0629921;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" />
      <text
         sodipodi:linespacing="100%"
         id="text4227-9-0-0-4-2-9-90-9"
--- a/documentation/components/img/field-diagram-hi.png
+++ b/documentation/components/img/field-diagram-hi.png
--- a/documentation/components/img/slider-example1-hi.png
+++ b/documentation/components/img/slider-example1-hi.png
--- a/documentation/components/original-drawings/field-diagram.svg
+++ b/documentation/components/original-drawings/field-diagram.svg
@@ -11,7 +11,7 @@
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="82mm"
   height="82mm"
   height="73mm"
   id="svg2475"
   sodipodi:version="0.32"
   inkscape:version="0.91 r"
@@ -31,9 +31,9 @@
     objecttolerance="10"
     inkscape:pageopacity="1"
     inkscape:pageshadow="2"
     inkscape:zoom="3.3941125"
     inkscape:cx="158.52687"
     inkscape:cy="140.02242"
     inkscape:zoom="2.4"
     inkscape:cx="225.58075"
     inkscape:cy="130.81707"
     inkscape:document-units="mm"
     inkscape:current-layer="layer1"
     showgrid="true"
@@ -61,7 +61,7 @@
       type="xygrid"
       dotted="false" />
    <sodipodi:guide
       position="166.53543,134.64567"
       position="166.53543,230.31496"
       orientation="1,0"
       id="guide25051" />
  </sodipodi:namedview>
@@ -1495,6 +1495,21 @@
         transform="matrix(0.4,0,0,0.4,-1.8,0)"
         inkscape:connector-curvature="0" />
    </marker>
    <marker
       inkscape:stockid="EmptyTriangleOutM"
       orient="auto"
       refY="0"
       refX="0"
       id="marker24201-3-2-4"
       style="overflow:visible"
       inkscape:isstock="true">
      <path
         id="path24203-8-6-8"
         d="m 5.77,0 -8.65,5 0,-10 8.65,5 z"
         style="fill:#ffffff;fill-rule:evenodd;stroke:#00b4f0;stroke-width:1pt;stroke-opacity:1"
         transform="matrix(0.4,0,0,0.4,-1.8,0)"
         inkscape:connector-curvature="0" />
    </marker>
  </defs>
  <metadata
     id="metadata2480">
@@ -1512,38 +1527,32 @@
     id="layer1"
     inkscape:groupmode="layer"
     inkscape:label="Layer 1"
     transform="translate(0,-761.81105)">
     transform="translate(0,-793.70084)">
    <path
       sodipodi:nodetypes="cc"
       style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#00b4f0;stroke-width:0.99460661;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-start:none;marker-mid:none"
       d="m 165.60285,889.3701 -23.87057,0"
       d="m 165.60285,896.45672 -23.87057,0"
       id="path49764"
       inkscape:connector-type="polyline"
       inkscape:connector-curvature="0" />
    <flowRoot
       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:13.3594541px;line-height:122%;font-family:Montserrat;-inkscape-font-specification:'Montserrat, Normal';text-align:center;writing-mode:lr;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;"
       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:13.35945415px;line-height:122.00000286%;font-family:Montserrat;-inkscape-font-specification:'Montserrat, Normal';text-align:center;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       id="flowRoot2485"
       xml:space="preserve"
       transform="matrix(0.56140019,0,0,0.56140019,-101.54462,557.11682)"><flowRegion
       transform="matrix(0.56140019,0,0,0.56140019,-101.54462,564.20344)"><flowRegion
         id="flowRegion2487"><rect
           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:13.3594541px;line-height:122%;font-family:Montserrat;-inkscape-font-specification:'Montserrat, Normal';text-align:center;writing-mode:lr;text-anchor:middle;fill:#000000;fill-opacity:1;"
           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:13.35945415px;line-height:122.00000286%;font-family:Montserrat;-inkscape-font-specification:'Montserrat, Normal';text-align:center;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1"
           y="238.07646"
           x="262.85715"
           height="120"
           width="184.28572"
           id="rect2489" /></flowRegion><flowPara
         id="flowPara2491" /></flowRoot>    <g
       transform="matrix(0.56140019,0,0,0.56140019,-103.54962,570.14931)"
       transform="matrix(0.56140019,0,0,0.56140019,-103.54962,577.23593)"
       id="g3178" />
    <path
       inkscape:connector-type="polyline"
       id="path28387"
       d="m -8.189821,873.56631 -0.7765624,0.0744"
       style="fill:none;fill-rule:evenodd;stroke:#00b4f0;stroke-width:0.99460661;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
       inkscape:connector-curvature="0" />
    <g
       id="g2492"
       transform="matrix(0.56140018,0,0,0.56140018,-77.431844,660.85865)">
       transform="matrix(0.56140018,0,0,0.56140018,-77.431844,667.94527)">
      <rect
         ry="0"
         y="230.31496"
@@ -1568,7 +1577,7 @@
           id="flowPara4670">Component</flowPara></flowRoot>    </g>
    <g
       id="g2475"
       transform="matrix(0.56140018,0,0,0.56140018,-76.025223,704.6837)">
       transform="matrix(0.56140018,0,0,0.56140018,-76.025223,711.77032)">
      <rect
         style="display:inline;overflow:visible;visibility:visible;opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#ff3a49;stroke-width:1.893466;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;marker-start:none;marker-mid:none;marker-end:none;enable-background:accumulate"
         id="rect4622"
@@ -1592,7 +1601,7 @@
           id="flowPara4642">AbstractComponent</flowPara></flowRoot>    </g>
    <g
       id="g2854"
       transform="matrix(0.56140018,0,0,0.56140018,10.924822,660.68217)">
       transform="matrix(0.56140018,0,0,0.56140018,10.924822,667.76879)">
      <rect
         ry="0"
         y="230.6293"
@@ -1616,7 +1625,7 @@
             height="1052.3622" /></flowRegion><flowPara
           id="flowPara2864">HasValue&lt;T&gt;</flowPara></flowRoot>    </g>
    <g
       transform="matrix(0.56140018,0,0,0.56140018,-2.8872178,704.96725)"
       transform="matrix(0.56140018,0,0,0.56140018,-2.8872179,712.05387)"
       id="g2802">
      <rect
         ry="0"
@@ -1625,7 +1634,7 @@
         height="37.86932"
         width="113.60796"
         id="rect2804"
         style="display:inline;overflow:visible;visibility:visible;opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#ff3a49;stroke-width:1.89346596;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;marker-start:none;marker-mid:none;marker-end:none;enable-background:accumulate" />
         style="display:inline;overflow:visible;visibility:visible;opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#ff3a49;stroke-width:1.893466;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;marker-start:none;marker-mid:none;marker-end:none;enable-background:accumulate" />
      <flowRoot
         transform="translate(18.635472,9.7695016)"
         id="flowRoot2806"
@@ -1640,28 +1649,10 @@
             x="0" /></flowRegion><flowPara
           id="flowPara2812">AbstractField</flowPara></flowRoot>    </g>
    <g
       transform="matrix(0.56140018,0,0,0.56140018,158.57858,688.76999)"
       id="g3808">
      <rect
         style="display:inline;overflow:visible;visibility:visible;opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#00b4f0;stroke-width:1.89346596;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;marker-start:none;marker-mid:none;marker-end:none;enable-background:accumulate"
         id="rect3810"
         width="82.050171"
         height="37.869328"
         x="14.173247"
         y="237.40155"
         ry="0" />
      <flowRoot
         xml:space="preserve"
         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:13.35945415px;line-height:122.00000286%;font-family:Montserrat;-inkscape-font-specification:'Montserrat, Normal';text-align:center;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
         id="flowRoot3812"
         transform="translate(55.03875,260.97862)"><flowRegion
           id="flowRegion3814" /><flowPara
           id="flowPara3818">Button</flowPara></flowRoot>    </g>
    <g
       transform="matrix(0.56140018,0,0,0.56140018,211.72818,688.76999)"
       transform="matrix(0.56140018,0,0,0.56140018,158.57857,695.85662)"
       id="g3820">
      <rect
         style="display:inline;overflow:visible;visibility:visible;opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#00b4f0;stroke-width:1.89346596;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;marker-start:none;marker-mid:none;marker-end:none;enable-background:accumulate"
         style="display:inline;overflow:visible;visibility:visible;opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#00b4f0;stroke-width:1.893466;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;marker-start:none;marker-mid:none;marker-end:none;enable-background:accumulate"
         id="rect3822"
         width="82.050186"
         height="37.869328"
@@ -1676,10 +1667,10 @@
           id="flowRegion3826" /><flowPara
           id="flowPara3830">CheckBox</flowPara></flowRoot>    </g>
    <g
       transform="matrix(0.56140018,0,0,0.56140018,158.79359,716.25388)"
       transform="matrix(0.56140018,0,0,0.56140018,158.79359,723.3405)"
       id="g3836">
      <rect
         style="display:inline;overflow:visible;visibility:visible;opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#00b4f0;stroke-width:1.89346596;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;marker-start:none;marker-mid:none;marker-end:none;enable-background:accumulate"
         style="display:inline;overflow:visible;visibility:visible;opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#00b4f0;stroke-width:1.893466;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;marker-start:none;marker-mid:none;marker-end:none;enable-background:accumulate"
         id="rect3838"
         width="82.050194"
         height="37.869312"
@@ -1694,11 +1685,11 @@
           id="flowRegion3842" /><flowPara
           id="flowPara3846">TextField</flowPara></flowRoot>    </g>
    <g
       transform="matrix(0.56140018,0,0,0.56140018,211.76685,723.59701)"
       transform="matrix(0.56140018,0,0,0.56140018,211.76685,730.68363)"
       id="g3848"
       style="stroke-width:1.77165353;stroke-miterlimit:4;stroke-dasharray:none">
      <rect
         style="display:inline;overflow:visible;visibility:visible;opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#00b4f0;stroke-width:1.89346596;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;marker-start:none;marker-mid:none;marker-end:none;enable-background:accumulate"
         style="display:inline;overflow:visible;visibility:visible;opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#00b4f0;stroke-width:1.893466;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;marker-start:none;marker-mid:none;marker-end:none;enable-background:accumulate"
         id="rect3850"
         width="100.98485"
         height="37.86932"
@@ -1718,10 +1709,10 @@
           y="249.79576">RichTextArea</tspan></text>
    </g>
    <g
       transform="matrix(0.56140018,0,0,0.56140018,158.79359,744.10287)"
       transform="matrix(0.56140018,0,0,0.56140018,158.79359,751.18949)"
       id="g3870">
      <rect
         style="display:inline;overflow:visible;visibility:visible;opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#00b4f0;stroke-width:1.89346596;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;marker-start:none;marker-mid:none;marker-end:none;enable-background:accumulate"
         style="display:inline;overflow:visible;visibility:visible;opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#00b4f0;stroke-width:1.893466;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;marker-start:none;marker-mid:none;marker-end:none;enable-background:accumulate"
         id="rect3872"
         width="82.050194"
         height="37.869324"
@@ -1736,10 +1727,10 @@
           id="flowRegion3876" /><flowPara
           id="flowPara3880">DateField</flowPara></flowRoot>    </g>
    <g
       transform="matrix(0.56140018,0,0,0.56140018,211.68145,751.39928)"
       transform="matrix(0.56140018,0,0,0.56140018,211.68145,758.4859)"
       id="g3894">
      <rect
         style="display:inline;overflow:visible;visibility:visible;opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#00b4f0;stroke-width:1.89346596;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;marker-start:none;marker-mid:none;marker-end:none;enable-background:accumulate"
         style="display:inline;overflow:visible;visibility:visible;opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#00b4f0;stroke-width:1.893466;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;marker-start:none;marker-mid:none;marker-end:none;enable-background:accumulate"
         id="rect3896"
         width="119.91951"
         height="37.869312"
@@ -1759,10 +1750,10 @@
           y="250.76511">InlineDateField</tspan></text>
    </g>
    <g
       transform="matrix(0.56140018,0,0,0.56140018,160.66912,778.9299)"
       transform="matrix(0.56140018,0,0,0.56140018,213.81873,786.01652)"
       id="g3902">
      <rect
         style="display:inline;overflow:visible;visibility:visible;opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#00b4f0;stroke-width:1.89346596;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;marker-start:none;marker-mid:none;marker-end:none;enable-background:accumulate"
         style="display:inline;overflow:visible;visibility:visible;opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#00b4f0;stroke-width:1.893466;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;marker-start:none;marker-mid:none;marker-end:none;enable-background:accumulate"
         id="rect3904"
         width="119.91951"
         height="37.869312"
@@ -1782,16 +1773,16 @@
           y="250.95586">PopupDateField</tspan></text>
    </g>
    <g
       transform="matrix(0.56140018,0,0,0.56140018,-1.4148363,818.31352)"
       transform="matrix(0.56140018,0,0,0.56140018,-1.4148364,825.40014)"
       id="g3796">
      <rect
         ry="0"
         y="208.62048"
         x="172.93213"
         height="35.867687"
         width="109.9191"
         height="37.86932"
         width="113.60796"
         id="rect3798"
         style="display:inline;overflow:visible;visibility:visible;opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#ff3a49;stroke-width:1.89346596;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;marker-start:none;marker-mid:none;marker-end:none;enable-background:accumulate" />
         style="display:inline;overflow:visible;visibility:visible;opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#ff3a49;stroke-width:1.893466;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;marker-start:none;marker-mid:none;marker-end:none;enable-background:accumulate" />
      <flowRoot
         transform="translate(15.719998,9.3213059)"
         id="flowRoot3800"
@@ -1806,14 +1797,14 @@
             x="0" /></flowRegion><flowPara
           id="flowPara3806">AbstractSelect</flowPara></flowRoot>    </g>
    <g
       transform="matrix(0.56140018,0,0,0.56140018,1.6457416,696.36175)"
       transform="matrix(0.56140018,0,0,0.56140018,1.6457354,731.79482)"
       id="g2643">
      <rect
         style="display:inline;overflow:visible;visibility:visible;opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#00b4f0;stroke-width:1.89346596;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;marker-start:none;marker-mid:none;marker-end:none;enable-background:accumulate"
         style="display:inline;overflow:visible;visibility:visible;opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#00b4f0;stroke-width:1.893466;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;marker-start:none;marker-mid:none;marker-end:none;enable-background:accumulate"
         id="rect2645"
         width="126.23106"
         height="37.869305"
         x="41.249378"
         width="100.98486"
         height="37.869293"
         x="53.872482"
         y="274.37109"
         ry="0" />
      <text
@@ -1826,10 +1817,10 @@
           sodipodi:role="line"
           id="tspan2687"
           x="103.82072"
           y="297.02637">ProgressIndicator</tspan></text>
           y="297.02637">ProgressBar</tspan></text>
    </g>
    <g
       transform="matrix(0.56140018,0,0,0.56140018,158.57857,830.50228)"
       transform="matrix(0.56140018,0,0,0.56140018,158.57857,837.5889)"
       id="g6708">
      <rect
         style="display:inline;overflow:visible;visibility:visible;opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#00b4f0;stroke-width:1.893466;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;marker-start:none;marker-mid:none;marker-end:none;enable-background:accumulate"
@@ -1847,7 +1838,7 @@
           id="flowRegion6714" /><flowPara
           id="flowPara6718">ListSelect</flowPara></flowRoot>    </g>
    <g
       transform="matrix(0.56140018,0,0,0.56140018,158.57857,858.84873)"
       transform="matrix(0.56140018,0,0,0.56140018,158.57857,865.93535)"
       id="g6732">
      <rect
         style="display:inline;overflow:visible;visibility:visible;opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#00b4f0;stroke-width:1.893466;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;marker-start:none;marker-mid:none;marker-end:none;enable-background:accumulate"
@@ -1865,7 +1856,7 @@
           id="flowRegion6738" /><flowPara
           id="flowPara6742">NativeSelect</flowPara></flowRoot>    </g>
    <g
       transform="matrix(0.56140018,0,0,0.56140018,158.57857,887.19519)"
       transform="matrix(0.56140018,0,0,0.56140018,158.57857,894.28181)"
       id="g6744">
      <rect
         style="display:inline;overflow:visible;visibility:visible;opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#00b4f0;stroke-width:1.893466;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;marker-start:none;marker-mid:none;marker-end:none;enable-background:accumulate"
@@ -1888,10 +1879,10 @@
           y="261.33932">TwinColSelect</tspan></text>
    </g>
    <g
       transform="matrix(0.56140018,0,0,0.56140018,30.895481,830.50228)"
       transform="matrix(0.56140018,0,0,0.56140018,30.895481,837.5889)"
       id="g6760">
      <rect
         style="display:inline;overflow:visible;visibility:visible;opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#00b4f0;stroke-width:1.89346596;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;marker-start:none;marker-mid:none;marker-end:none;enable-background:accumulate"
         style="display:inline;overflow:visible;visibility:visible;opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#00b4f0;stroke-width:1.893466;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;marker-start:none;marker-mid:none;marker-end:none;enable-background:accumulate"
         id="rect6762"
         width="100.98486"
         height="37.869328"
@@ -1911,10 +1902,10 @@
           y="260.07687">OptionGroup</tspan></text>
    </g>
    <g
       transform="matrix(0.56140018,0,0,0.56140018,30.895481,858.84873)"
       transform="matrix(0.56140018,0,0,0.56140018,30.895481,865.93535)"
       id="g6768">
      <rect
         style="display:inline;overflow:visible;visibility:visible;opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#00b4f0;stroke-width:1.89346596;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;marker-start:none;marker-mid:none;marker-end:none;enable-background:accumulate"
         style="display:inline;overflow:visible;visibility:visible;opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#00b4f0;stroke-width:1.893466;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;marker-start:none;marker-mid:none;marker-end:none;enable-background:accumulate"
         id="rect6770"
         width="88.58268"
         height="37.869328"
@@ -1934,10 +1925,10 @@
           y="261.25919">Table</tspan></text>
    </g>
    <g
       transform="matrix(0.56140018,0,0,0.56140018,30.895481,887.19519)"
       transform="matrix(0.56140018,0,0,0.56140018,30.895481,894.28181)"
       id="g6776">
      <rect
         style="display:inline;overflow:visible;visibility:visible;opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#00b4f0;stroke-width:1.89346596;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;marker-start:none;marker-mid:none;marker-end:none;enable-background:accumulate"
         style="display:inline;overflow:visible;visibility:visible;opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#00b4f0;stroke-width:1.893466;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;marker-start:none;marker-mid:none;marker-end:none;enable-background:accumulate"
         id="rect6778"
         width="88.361748"
         height="37.86932"
@@ -1958,32 +1949,13 @@
    </g>
    <path
       style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#00b4f0;stroke-width:0.99460661;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-start:none;marker-mid:none;marker-end:url(#marker20517)"
       d="m 127.25558,1023.9176 0.30348,-67.22466"
       d="m 127.25558,1031.0042 0.30348,-67.22464"
       id="path6792"
       inkscape:connector-type="polyline"
       sodipodi:nodetypes="cc"
       inkscape:connector-curvature="0" />
    <g
       transform="matrix(0.56140018,0,0,0.56140018,158.57857,802.15582)"
       id="g6696"
       style="stroke-width:1.77165353;stroke-miterlimit:4;stroke-dasharray:none">
      <rect
         style="display:inline;overflow:visible;visibility:visible;opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#00b4f0;stroke-width:1.893466;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;marker-start:none;marker-mid:none;marker-end:none;enable-background:accumulate"
         id="rect6698"
         width="88.36174"
         height="37.86932"
         x="14.173247"
         y="237.40155"
         ry="0" />
      <flowRoot
         xml:space="preserve"
         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:13.35945415px;line-height:122.00000286%;font-family:Montserrat;-inkscape-font-specification:'Montserrat, Normal';text-align:center;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1.77165353;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
         id="flowRoot6700"
         transform="translate(58.315709,261.25917)"><flowRegion
           id="flowRegion6702" /><flowPara
           id="flowPara6706">Select</flowPara></flowRoot>    </g>
    <g
       transform="matrix(0.56140018,0,0,0.56140018,215.27148,802.15582)"
       transform="matrix(0.56140018,0,0,0.56140018,158.57857,809.24244)"
       id="g6720">
      <rect
         style="display:inline;overflow:visible;visibility:visible;opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#00b4f0;stroke-width:1.893466;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;marker-start:none;marker-mid:none;marker-end:none;enable-background:accumulate"
@@ -2003,18 +1975,18 @@
    <path
       sodipodi:nodetypes="cc"
       style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#00b4f0;stroke-width:0.99460661;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-start:none;marker-mid:none"
       d="m 88.582677,998.79959 0.588446,-0.0774"
       d="m 88.582677,1005.9023 0.588446,-0.093"
       id="path7429"
       inkscape:connector-type="polyline"
       inkscape:connection-start="#g6768"
       inkscape:connector-curvature="0" />
    <flowRoot
       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:13.3594541px;line-height:122%;font-family:Montserrat;-inkscape-font-specification:'Montserrat, Normal';text-align:center;writing-mode:lr;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;"
       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:13.35945415px;line-height:122.00000286%;font-family:Montserrat;-inkscape-font-specification:'Montserrat, Normal';text-align:center;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       id="flowRoot8724"
       xml:space="preserve"
       transform="matrix(0.56140019,0,0,0.56140019,-101.54462,557.11682)"><flowRegion
       transform="matrix(0.56140019,0,0,0.56140019,-101.54462,564.20344)"><flowRegion
         id="flowRegion8726"><rect
           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:13.3594541px;line-height:122%;font-family:Montserrat;-inkscape-font-specification:'Montserrat, Normal';text-align:center;writing-mode:lr;text-anchor:middle;fill:#000000;fill-opacity:1;"
           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:13.35945415px;line-height:122.00000286%;font-family:Montserrat;-inkscape-font-specification:'Montserrat, Normal';text-align:center;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1"
           y="752.14441"
           x="39.286312"
           height="22.868153"
@@ -2023,131 +1995,124 @@
         id="flowPara8730" /></flowRoot>    <path
       sodipodi:nodetypes="cc"
       style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#00b4f0;stroke-width:0.99460661;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-start:none;marker-mid:none"
       d="m 165.60285,861.02365 -23.87057,0"
       d="m 165.60285,868.11027 -23.87057,0"
       id="path49768"
       inkscape:connector-type="polyline"
       inkscape:connector-curvature="0" />
    <g
       transform="matrix(0.28070009,0,0,0.28070009,-43.527845,557.56261)"
       transform="matrix(0.28070009,0,0,0.28070009,-43.527845,564.64923)"
       id="g18053" />
    <g
       transform="matrix(0.56140018,0,0,0.56140018,69.995892,749.00621)"
       transform="matrix(0.56140018,0,0,0.56140018,36.863129,725.57078)"
       id="g2655">
      <rect
         style="display:inline;overflow:visible;visibility:visible;opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#00b4f0;stroke-width:1.89346596;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;marker-start:none;marker-mid:none;marker-end:none;enable-background:accumulate"
         style="display:inline;overflow:visible;visibility:visible;opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#00b4f0;stroke-width:1.893466;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;marker-start:none;marker-mid:none;marker-end:none;enable-background:accumulate"
         id="rect2657"
         width="77.952736"
         height="35.433075"
         x="14.173247"
         y="237.40155"
         width="75.738647"
         height="37.869316"
         x="16.387346"
         y="234.96532"
         ry="0" />
      <flowRoot
         xml:space="preserve"
         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:13.35945415px;line-height:122.00000286%;font-family:Montserrat;-inkscape-font-specification:'Montserrat, Normal';text-align:center;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
         id="flowRoot2659"
         transform="translate(53.052936,259.79934)"><flowRegion
         transform="translate(54.153341,258.90309)"><flowRegion
           id="flowRegion2661" /><flowPara
           id="flowPara2665">Slider</flowPara></flowRoot>    </g>
    <path
       style="fill:none;fill-rule:evenodd;stroke:#00b4f0;stroke-width:0.99460661;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
       d="m 88.582677,970.86616 77.579323,0"
       d="m 88.582677,977.95278 77.579323,0"
       id="path22338"
       inkscape:connector-curvature="0"
       sodipodi:nodetypes="cc" />
    <path
       style="fill:none;fill-rule:evenodd;stroke:#00b4f0;stroke-width:0.99460661;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
       d="m 88.815642,998.60611 77.934798,0.11604"
       d="m 88.815642,1005.6927 77.934798,0.1161"
       id="path22338-5"
       inkscape:connector-curvature="0"
       sodipodi:nodetypes="cc" />
    <path
       style="fill:none;fill-rule:evenodd;stroke:#00b4f0;stroke-width:0.99460661;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
       d="m 89.171122,1024.582 77.579318,0"
       d="m 89.171122,1031.6686 77.579318,0"
       id="path22338-1"
       inkscape:connector-curvature="0"
       sodipodi:nodetypes="cc" />
    <path
       style="fill:none;fill-rule:evenodd;stroke:#00b4f0;stroke-width:0.99460661;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
       d="m 95.669291,861.02365 17.716539,0"
       d="m 88.582677,868.11027 24.803153,0"
       id="path22338-3"
       inkscape:connector-curvature="0"
       sodipodi:nodetypes="cc" />
    <path
       style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#ff3a49;stroke-width:0.99460661;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-start:none;marker-mid:none;marker-end:url(#marker20517-3)"
       d="m 127.55906,935.43309 0,-92.12598"
       d="m 127.55906,942.51971 0,-92.12598"
       id="path6792-3"
       inkscape:connector-type="polyline"
       sodipodi:nodetypes="cc"
       inkscape:connector-curvature="0"
       transform="translate(-4.8818897e-6,-1.3172053e-7)" />
       inkscape:connector-curvature="0" />
    <path
       style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#ff3a49;stroke-width:0.99460661;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-start:none;marker-mid:none;marker-end:url(#marker20517-3-0-9)"
       d="m 42.519685,822.04727 0,-10.62992"
       d="m 42.519685,829.13389 0,-10.62992"
       id="path6792-3-8-0"
       inkscape:connector-type="polyline"
       sodipodi:nodetypes="cc"
       inkscape:connector-curvature="0" />
    <path
       style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#ff3a49;stroke-width:0.99460661;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-start:none;marker-mid:none;marker-end:url(#marker20517-3-0-9-0)"
       d="m 127.55906,822.04727 0,-10.62992"
       d="m 127.55906,829.13389 0,-10.62992"
       id="path6792-3-8-0-3"
       inkscape:connector-type="polyline"
       sodipodi:nodetypes="cc"
       inkscape:connector-curvature="0" />
    <path
       style="fill:none;fill-rule:evenodd;stroke:#00b4f0;stroke-width:0.99566931;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-end:url(#marker24201)"
       d="m 113.38583,882.28349 0,-38.97638"
       d="m 88.582677,896.45673 24.803153,0 0,-46.063"
       id="path22338-0"
       inkscape:connector-curvature="0"
       sodipodi:nodetypes="cc" />
       sodipodi:nodetypes="ccc" />
    <path
       style="fill:none;fill-rule:evenodd;stroke:#00b4f0;stroke-width:0.99566931;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-end:url(#marker24201-0)"
       d="m 141.73228,917.71656 0,-74.40945"
       d="m 141.73228,896.45673 0,-46.063"
       id="path22338-0-6"
       inkscape:connector-curvature="0"
       sodipodi:nodetypes="cc" />
    <path
       style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#ff3a49;stroke-width:0.99460661;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-start:none;marker-mid:none;marker-end:url(#marker20517-3-0-9-0-5)"
       d="m 95.669291,832.67719 -10.629921,0"
       d="m 95.669291,839.76381 -10.629921,0"
       id="path6792-3-8-0-3-3"
       inkscape:connector-type="polyline"
       sodipodi:nodetypes="cc"
       inkscape:connector-curvature="0" />
    <path
       style="fill:none;fill-rule:evenodd;stroke:#00b4f0;stroke-width:0.99460661;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
       d="m 141.73228,917.71656 24.80315,0"
       id="path22338-37"
       inkscape:connector-curvature="0"
       sodipodi:nodetypes="cc" />
    <path
       style="fill:none;fill-rule:evenodd;stroke:#00b4f0;stroke-width:0.99566931;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-end:url(#marker24201-3)"
       d="m 219.68504,832.67719 -7.08661,0"
       d="m 166.53543,839.76382 -7.08661,0"
       id="path22338-0-8"
       inkscape:connector-curvature="0"
       sodipodi:nodetypes="cc" />
    <path
       style="fill:none;fill-rule:evenodd;stroke:#00b4f0;stroke-width:0.99566931;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-end:url(#marker24201-3-5)"
       d="m 219.68504,861.02365 -7.08661,0"
       d="m 219.68504,868.11027 -7.08661,0"
       id="path22338-0-8-4"
       inkscape:connector-curvature="0"
       sodipodi:nodetypes="cc" />
    <path
       style="fill:none;fill-rule:evenodd;stroke:#00b4f0;stroke-width:0.99566931;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-end:url(#marker24201-3-2)"
       d="m 219.68504,889.37011 -7.08661,0"
       d="m 219.68504,896.45673 -7.08661,0"
       id="path22338-0-8-46"
       inkscape:connector-curvature="0"
       sodipodi:nodetypes="cc" />
    <path
       style="fill:none;fill-rule:evenodd;stroke:#00b4f0;stroke-width:0.99566931;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-end:url(#marker24201-3-56)"
       d="m 223.22835,946.06302 -7.08661,0"
       d="m 166.53544,953.14964 -7.08661,0"
       id="path22338-0-8-6"
       inkscape:connector-curvature="0"
       sodipodi:nodetypes="cc" />
    <path
       style="fill:none;fill-rule:evenodd;stroke:#00b4f0;stroke-width:0.99566931;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-end:url(#marker24201-3-7)"
       d="m 166.53543,832.67719 -7.08661,0"
       id="path22338-0-8-62"
       style="fill:none;fill-rule:evenodd;stroke:#00b4f0;stroke-width:0.99566931;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-end:url(#marker24201-3-2-4)"
       d="m 219.68504,924.80318 -28.34646,0 0,-17.71653"
       id="path22338-0-8-46-8"
       inkscape:connector-curvature="0"
       sodipodi:nodetypes="cc" />
       sodipodi:nodetypes="ccc" />
  </g>
 </svg>
--- a/documentation/components/original-drawings/slider-example1.svg
+++ b/documentation/components/original-drawings/slider-example1.svg
@@ -10,8 +10,8 @@
   xmlns:xlink="http://www.w3.org/1999/xlink"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="210mm"
   height="297mm"
   width="70.273331mm"
   height="66.604446mm"
   id="svg1901"
   sodipodi:version="0.32"
   inkscape:version="0.91 r"
@@ -66,11 +66,11 @@
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageopacity="1"
     inkscape:pageshadow="2"
     inkscape:zoom="1.4"
     inkscape:cx="212.24603"
     inkscape:cy="847.82098"
     inkscape:zoom="0.98994949"
     inkscape:cx="184.27652"
     inkscape:cy="277.48621"
     inkscape:document-units="px"
     inkscape:current-layer="layer1"
     gridtolerance="10000"
@@ -79,7 +79,11 @@
     inkscape:window-x="800"
     inkscape:window-y="153"
     showgrid="false"
     inkscape:window-maximized="0" />
     inkscape:window-maximized="0"
     fit-margin-top="0"
     fit-margin-left="0"
     fit-margin-right="0"
     fit-margin-bottom="0" />
  <metadata
     id="metadata1906">
    <rdf:RDF>
@@ -88,6 +92,7 @@
        <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>
@@ -95,40 +100,41 @@
     inkscape:label="Taso 1"
     inkscape:groupmode="layer"
     id="layer1"
     style="opacity:1">
     style="opacity:1"
     transform="translate(-4.8759656,-811.59399)">
    <rect
       style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
       id="rect3344"
       width="249"
       height="236"
       x="67.505424"
       y="64.081154" />
       x="4.8759656"
       y="811.59399" />
    <image
       sodipodi:absref="/home/magi/itmill/vaadin/documentation/components/original-drawings/../img/slider-orig.png"
       xlink:href="../img/slider-orig.png"
       y="64.081154"
       x="67.505424"
       id="image2463"
       width="249"
       height="236"
       width="249" />
       id="image2463"
       x="4.8759656"
       y="811.59399" />
    <g
       transform="matrix(0.04895833,0,0,0.04895833,85.307423,133.89853)"
       transform="matrix(0.04895833,0,0,0.04895833,22.677965,881.41142)"
       id="g1317">
      <path
         id="path6080"
         style="fill:url(#linearGradient7607)"
         inkscape:connector-curvature="0"
         d="m 70.29,24.826 v 602.34 h 35.44 v -35.44 h 35.44 v -35.4 h 35.4 v -35.44 h 70.88 v 70.84 h 35.43 v 70.88 h 35.44 v 70.87 h 35.44 v 35.44 h 70.84 v -35.44 h 35.44 v -70.87 H 424.6 v -70.88 h -35.4 v -70.84 h -35.44 v -70.88 h 141.72 v -35.43 h -35.44 v -35.44 H 424.6 v -35.44 h -35.4 v -35.41 h -35.44 v -35.43 h -35.44 v -35.44 h -35.44 v -35.44 h -35.43 v -35.44 h -35.44 v -35.43 h -35.44 v -35.44 h -35.4 V 60.256 H 105.73 V 24.818 H 70.29 z" />
         d="m 70.29,24.826 0,602.34 35.44,0 0,-35.44 35.44,0 0,-35.4 35.4,0 0,-35.44 70.88,0 0,70.84 35.43,0 0,70.88 35.44,0 0,70.87 35.44,0 0,35.44 70.84,0 0,-35.44 35.44,0 0,-70.87 -35.44,0 0,-70.88 -35.4,0 0,-70.84 -35.44,0 0,-70.88 141.72,0 0,-35.43 -35.44,0 0,-35.44 -35.44,0 0,-35.44 -35.4,0 0,-35.41 -35.44,0 0,-35.43 -35.44,0 0,-35.44 -35.44,0 0,-35.44 -35.43,0 0,-35.44 -35.44,0 0,-35.43 -35.44,0 0,-35.44 -35.4,0 0,-35.41 -35.44,0 0,-35.438 -35.44,0 z" />
      <path
         id="rect1430"
         style="fill:#000000;fill-rule:evenodd"
         inkscape:connector-curvature="0"
         d="m 35.438,24.812 v 602.35 h 35.437 v -35.44 h 35.435 v -35.41 H 70.875 V 95.662 L 106.31,95.66 V 60.254 H 70.875 V 24.816 H 35.438 z m 70.872,70.844 v 35.434 h 35.41 V 95.656 h -35.41 z m 35.41,35.434 v 35.44 h 35.44 v -35.44 h -35.44 z m 35.44,35.44 v 35.44 h 35.43 v -35.44 h -35.43 z m 35.43,35.44 v 35.44 h 35.44 v -35.44 h -35.44 z m 35.44,35.44 v 35.43 h 35.44 v -35.43 h -35.44 z m 35.44,35.43 v 35.44 h 35.44 v -35.44 h -35.44 z m 35.44,35.44 v 35.41 h 35.43 v -35.41 h -35.43 z m 35.43,35.41 v 35.43 h 35.41 v -35.43 h -35.41 z m 35.41,35.43 v 35.44 H 283.47 v 106.32 h 35.44 V 450 h 141.71 v -35.44 h -35.43 v -35.44 h -35.44 z m -70.84,141.76 v 70.84 h 35.43 v -70.84 h -35.43 z m 35.43,70.84 v 70.87 h 35.41 v -70.87 h -35.41 z m 35.41,70.87 v 70.88 h 35.44 v -70.88 h -35.44 z m 0,70.88 h -70.84 v 35.44 h 70.84 v -35.44 z m -70.84,0 v -70.88 h -35.44 v 70.88 h 35.44 z m -35.44,-70.88 v -70.87 h -35.44 v 70.87 h 35.44 z m -35.44,-70.87 v -70.84 h -35.44 v 70.84 h 35.44 z M 212.59,520.88 V 450 h -35.43 v 35.44 h -35.44 v 35.44 h 70.87 z m -70.87,0 h -35.41 v 35.43 h 35.41 v -35.43 z" />
         d="m 35.438,24.812 0,602.35 35.437,0 0,-35.44 35.435,0 0,-35.41 -35.435,0 0,-460.65 35.435,-0.002 0,-35.406 -35.435,0 0,-35.438 -35.437,0 z m 70.872,70.844 0,35.434 35.41,0 0,-35.434 -35.41,0 z m 35.41,35.434 0,35.44 35.44,0 0,-35.44 -35.44,0 z m 35.44,35.44 0,35.44 35.43,0 0,-35.44 -35.43,0 z m 35.43,35.44 0,35.44 35.44,0 0,-35.44 -35.44,0 z m 35.44,35.44 0,35.43 35.44,0 0,-35.43 -35.44,0 z m 35.44,35.43 0,35.44 35.44,0 0,-35.44 -35.44,0 z m 35.44,35.44 0,35.41 35.43,0 0,-35.41 -35.43,0 z m 35.43,35.41 0,35.43 35.41,0 0,-35.43 -35.41,0 z m 35.41,35.43 0,35.44 -106.28,0 0,106.32 35.44,0 0,-70.88 141.71,0 0,-35.44 -35.43,0 0,-35.44 -35.44,0 z m -70.84,141.76 0,70.84 35.43,0 0,-70.84 -35.43,0 z m 35.43,70.84 0,70.87 35.41,0 0,-70.87 -35.41,0 z m 35.41,70.87 0,70.88 35.44,0 0,-70.88 -35.44,0 z m 0,70.88 -70.84,0 0,35.44 70.84,0 0,-35.44 z m -70.84,0 0,-70.88 -35.44,0 0,70.88 35.44,0 z m -35.44,-70.88 0,-70.87 -35.44,0 0,70.87 35.44,0 z m -35.44,-70.87 0,-70.84 -35.44,0 0,70.84 35.44,0 z m -35.44,-70.84 0,-70.88 -35.43,0 0,35.44 -35.44,0 0,35.44 70.87,0 z m -70.87,0 -35.41,0 0,35.43 35.41,0 0,-35.43 z" />
      <path
         id="rect3779"
         style="fill:#ffffff"
         inkscape:connector-curvature="0"
         d="m 70.875,95.656 v 460.65 h 35.435 v -35.43 h 35.41 v -35.44 h 35.44 v -35.44 h 35.43 v 70.88 h 35.44 v 70.84 h 35.44 v 70.87 h 35.44 v 70.88 h 70.84 v -70.88 h -35.41 v -70.87 h -35.43 v -70.84 h -35.44 v -106.32 h 106.28 v -35.44 h -35.41 v -35.43 h -35.43 v -35.41 h -35.44 v -35.44 h -35.44 v -35.43 h -35.44 v -35.44 h -35.43 v -35.44 h -35.44 v -35.44 H 106.31 V 95.648 H 70.875 z" />
         d="m 70.875,95.656 0,460.65 35.435,0 0,-35.43 35.41,0 0,-35.44 35.44,0 0,-35.44 35.43,0 0,70.88 35.44,0 0,70.84 35.44,0 0,70.87 35.44,0 0,70.88 70.84,0 0,-70.88 -35.41,0 0,-70.87 -35.43,0 0,-70.84 -35.44,0 0,-106.32 106.28,0 0,-35.44 -35.41,0 0,-35.43 -35.43,0 0,-35.41 -35.44,0 0,-35.44 -35.44,0 0,-35.43 -35.44,0 0,-35.44 -35.43,0 0,-35.44 -35.44,0 0,-35.44 -35.41,0 0,-35.438 -35.435,0 z" />
    </g>
  </g>
 </svg>
--- a/documentation/layout/img/layout-schematic-hi.png
+++ b/documentation/layout/img/layout-schematic-hi.png
--- a/documentation/layout/layout-orderedlayout.asciidoc
+++ b/documentation/layout/layout-orderedlayout.asciidoc
@@ -192,6 +192,7 @@ image::img/orderedlayout-sizing-undefined.png[width=50%, scaledwidth=75%]

 endif::web[]

 [[layout.orderedlayout.defined-size]]
 === Layout with Defined Size

 If you set a [classname]#HorizontalLayout# to a defined size horizontally or a
@@ -211,7 +212,7 @@ the question, "Percentage of what?" There is no sensible default answer for this
 question in the current implementation of the layouts, so in practice, you may
 not define "100%" size alone.


 [[layout.orderedlayout.expanding]]
 === Expanding Components

 Often, you want to have one component that takes all the available space left
@@ -253,7 +254,7 @@ Notice that you can not call [methodname]#setExpandRatio()# before you have
 added the component to the layout, because it can not operate on an component
 that it doesn't yet have.


 [[layout.orderedlayout.expandratio]]
 === Expand Ratios

 If you specify an expand ratio for multiple components, they will all try to use
@@ -318,16 +319,15 @@ It is not meaningful to combine expanding components with percentually defined
 size and components with fixed or undefined size. Such combination can lead to a
 very unexpected size for the percentually sized components.

 [[layout.orderedlayout.percentual]]
 === Percentual Sizing

 === Percentage of Cells

 A percentual size of a component defines the size of the component __within its
 cell__. Usually, you use "100%", but a smaller percentage or a fixed size
 A percentual size of a component defines the size of the component _within its cell_.
 Usually, you use "100%", but a smaller percentage or a fixed size
 (smaller than the cell size) will leave an empty space in the cell and align the
 component within the cell according to its alignment setting, top left by
 default.


 [source, java]
 ----
 HorizontalLayout layout50 = new HorizontalLayout();
--- a/documentation/layout/original-drawings/layout-schematic.svg
+++ b/documentation/layout/original-drawings/layout-schematic.svg
@@ -25,9 +25,9 @@
     borderopacity="1.0"
     inkscape:pageopacity="1"
     inkscape:pageshadow="2"
     inkscape:zoom="3.959798"
     inkscape:cx="148.02363"
     inkscape:cy="70.790343"
     inkscape:zoom="1.979899"
     inkscape:cx="196.99038"
     inkscape:cy="5.0040539"
     inkscape:document-units="mm"
     inkscape:current-layer="layer1"
     inkscape:window-width="1920"
@@ -180,13 +180,13 @@
    <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"
       style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ff3a49;fill-opacity:1;stroke:none;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;clip-rule:nonzero;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill-rule:nonzero;filter-blend-mode:normal;filter-gaussianBlur-deviation:0;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto"
       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"
       style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#00b4f0;fill-opacity:1;stroke:none;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;clip-rule:nonzero;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill-rule:nonzero;filter-blend-mode:normal;filter-gaussianBlur-deviation:0;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto"
       id="path2997-7-6-1"
       r="2.1259842" />
    <path
@@ -198,13 +198,13 @@
    <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"
       style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ff3a49;fill-opacity:1;stroke:none;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;clip-rule:nonzero;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill-rule:nonzero;filter-blend-mode:normal;filter-gaussianBlur-deviation:0;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto"
       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"
       style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#00b4f0;fill-opacity:1;stroke:none;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;clip-rule:nonzero;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill-rule:nonzero;filter-blend-mode:normal;filter-gaussianBlur-deviation:0;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto"
       id="path2997-7-6-1-4"
       r="2.1259842" />
    <path
@@ -216,13 +216,13 @@
    <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"
       style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ff3a49;fill-opacity:1;stroke:none;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;clip-rule:nonzero;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill-rule:nonzero;filter-blend-mode:normal;filter-gaussianBlur-deviation:0;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto"
       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"
       style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#00b4f0;fill-opacity:1;stroke:none;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;clip-rule:nonzero;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill-rule:nonzero;filter-blend-mode:normal;filter-gaussianBlur-deviation:0;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto"
       id="path2997-7-6-1-7"
       r="2.1259842" />
    <path
@@ -234,13 +234,13 @@
    <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"
       style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ff3a49;fill-opacity:1;stroke:none;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;clip-rule:nonzero;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill-rule:nonzero;filter-blend-mode:normal;filter-gaussianBlur-deviation:0;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto"
       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"
       style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#00b4f0;fill-opacity:1;stroke:none;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;clip-rule:nonzero;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill-rule:nonzero;filter-blend-mode:normal;filter-gaussianBlur-deviation:0;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto"
       id="path2997-7-6-1-7-8"
       r="2.1259842" />
    <path
@@ -252,13 +252,13 @@
    <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"
       style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ff3a49;fill-opacity:1;stroke:none;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;clip-rule:nonzero;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill-rule:nonzero;filter-blend-mode:normal;filter-gaussianBlur-deviation:0;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto"
       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"
       style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#00b4f0;fill-opacity:1;stroke:none;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;clip-rule:nonzero;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill-rule:nonzero;filter-blend-mode:normal;filter-gaussianBlur-deviation:0;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto"
       id="path2997-7-6-1-7-7"
       r="2.1259842" />
    <path
@@ -270,13 +270,13 @@
    <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"
       style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ff3a49;fill-opacity:1;stroke:none;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;clip-rule:nonzero;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill-rule:nonzero;filter-blend-mode:normal;filter-gaussianBlur-deviation:0;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto"
       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"
       style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#00b4f0;fill-opacity:1;stroke:none;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;clip-rule:nonzero;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill-rule:nonzero;filter-blend-mode:normal;filter-gaussianBlur-deviation:0;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto"
       id="path2997-7-6-1-7-0"
       r="2.1259842" />
    <path
@@ -288,13 +288,13 @@
    <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"
       style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ff3a49;fill-opacity:1;stroke:none;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;clip-rule:nonzero;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill-rule:nonzero;filter-blend-mode:normal;filter-gaussianBlur-deviation:0;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto"
       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"
       style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#00b4f0;fill-opacity:1;stroke:none;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;clip-rule:nonzero;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill-rule:nonzero;filter-blend-mode:normal;filter-gaussianBlur-deviation:0;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto"
       id="path2997-7-6-1-7-9"
       r="2.1259842" />
    <path
@@ -306,13 +306,13 @@
    <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"
       style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ff3a49;fill-opacity:1;stroke:none;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;clip-rule:nonzero;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill-rule:nonzero;filter-blend-mode:normal;filter-gaussianBlur-deviation:0;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto"
       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"
       style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#00b4f0;fill-opacity:1;stroke:none;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;clip-rule:nonzero;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill-rule:nonzero;filter-blend-mode:normal;filter-gaussianBlur-deviation:0;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto"
       id="path2997-7-6-1-7-7-4"
       r="2.1259842" />
    <path
@@ -324,13 +324,13 @@
    <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"
       style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ff3a49;fill-opacity:1;stroke:none;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;clip-rule:nonzero;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill-rule:nonzero;filter-blend-mode:normal;filter-gaussianBlur-deviation:0;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto"
       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"
       style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#00b4f0;fill-opacity:1;stroke:none;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;clip-rule:nonzero;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill-rule:nonzero;filter-blend-mode:normal;filter-gaussianBlur-deviation:0;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto"
       id="path2997-7-6-1-7-7-4-2"
       r="2.1259842" />
    <rect
@@ -363,13 +363,13 @@
    <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"
       style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ff3a49;fill-opacity:1;stroke:none;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;clip-rule:nonzero;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill-rule:nonzero;filter-blend-mode:normal;filter-gaussianBlur-deviation:0;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto"
       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"
       style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#00b4f0;fill-opacity:1;stroke:none;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;clip-rule:nonzero;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill-rule:nonzero;filter-blend-mode:normal;filter-gaussianBlur-deviation:0;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto"
       id="path2997-7-6-1-7-7-0"
       r="2.1259842" />
    <path
@@ -381,13 +381,13 @@
    <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"
       style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ff3a49;fill-opacity:1;stroke:none;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;clip-rule:nonzero;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill-rule:nonzero;filter-blend-mode:normal;filter-gaussianBlur-deviation:0;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto"
       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"
       style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#00b4f0;fill-opacity:1;stroke:none;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;clip-rule:nonzero;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill-rule:nonzero;filter-blend-mode:normal;filter-gaussianBlur-deviation:0;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto"
       id="path2997-7-6-1-7-7-0-3"
       r="2.1259842" />
    <path
@@ -399,13 +399,13 @@
    <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"
       style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ff3a49;fill-opacity:1;stroke:none;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;clip-rule:nonzero;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill-rule:nonzero;filter-blend-mode:normal;filter-gaussianBlur-deviation:0;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto"
       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"
       style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#00b4f0;fill-opacity:1;stroke:none;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;clip-rule:nonzero;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill-rule:nonzero;filter-blend-mode:normal;filter-gaussianBlur-deviation:0;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto"
       id="path2997-7-6-1-7-7-4-2-4"
       r="2.1259842" />
    <flowRoot
@@ -501,13 +501,13 @@
    <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"
       style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ff3a49;fill-opacity:1;stroke:none;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;clip-rule:nonzero;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill-rule:nonzero;filter-blend-mode:normal;filter-gaussianBlur-deviation:0;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto"
       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"
       style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#00b4f0;fill-opacity:1;stroke:none;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
@@ -526,13 +526,13 @@
    <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"
       style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ff3a49;fill-opacity:1;stroke:none;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;clip-rule:nonzero;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill-rule:nonzero;filter-blend-mode:normal;filter-gaussianBlur-deviation:0;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto"
       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"
       style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#00b4f0;fill-opacity:1;stroke:none;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;clip-rule:nonzero;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill-rule:nonzero;filter-blend-mode:normal;filter-gaussianBlur-deviation:0;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto"
       id="path2997-7-6-1-7-7-4-2-4-9"
       r="2.1259842" />
    <flowRoot