Updated StreadResource example and screenshot, as well as various diagrams. #19897

Change-Id: I8a52ca754262a32487d6c8330d0382635d9fedca

documentation/application/application-environment.asciidoc

   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**">
+  xsi:schemaLocation="**http://java.sun.com/xml/ns/javaee
+      http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd**">
 ----
 Servlet 3.0 support is useful for at least server push.
 

documentation/application/application-lifecycle.asciidoc

         setContent(new Button("Logout", event -> {// Java 8
             // Redirect this page immediately
             getPage().setLocation("/myapp/logout.html");
-            
+
             // Close the session
             getSession().close();
         }));
 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
 synchronized as described in
 <<dummy/../../../framework/advanced/advanced-push#advanced.push,"Server Push">>.
 
-
 [source, java]
 ----
 @Push
 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.
-
-
-
-

documentation/application/application-resources.asciidoc

 
 [[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
 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;
         }
 [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");
 
 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

documentation/application/original-drawings/Makefile

 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)

documentation/application/original-drawings/view-navigation.svg

      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"
         <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>
            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"
            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)">
          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"

documentation/components/original-drawings/field-diagram.svg

    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"
      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"
        type="xygrid"
        dotted="false" />
     <sodipodi:guide
-       position="166.53543,134.64567"
+       position="166.53543,230.31496"
        orientation="1,0"
        id="guide25051" />
   </sodipodi:namedview>
          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">
      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"
            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"
            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"
              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"
          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"
              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"
            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"
            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"
            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"
            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"
            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"
            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"
              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
            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"
            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"
            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"
            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"
            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"
            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"
     </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"
     <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"
          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>

documentation/components/original-drawings/slider-example1.svg

    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"
      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"
      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>
         <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>
      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>

documentation/layout/layout-orderedlayout.asciidoc

 
 endif::web[]
 
+[[layout.orderedlayout.defined-size]]
 === Layout with Defined Size
 
 If you set a [classname]#HorizontalLayout# to a defined size horizontally or a
 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
 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
 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();

documentation/layout/original-drawings/layout-schematic.svg

      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"
     <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
     <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
     <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
     <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
     <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
     <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
     <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
     <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
     <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
     <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
     <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
     <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
     <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
     <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