<?xml version="1.0" encoding="UTF-8"?>
<!-- Do not edit this file with editors other than diagrams.net -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="746px" height="544px" viewBox="-0.5 -0.5 746 544" content="&lt;mxfile host=&quot;Electron&quot; modified=&quot;2022-06-15T03:54:49.957Z&quot; agent=&quot;5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/19.0.1 Chrome/100.0.4896.160 Electron/18.3.2 Safari/537.36&quot; etag=&quot;-OUDhD95I98WmPAUWMT7&quot; version=&quot;19.0.1&quot; type=&quot;device&quot; pages=&quot;2&quot;&gt;&lt;diagram id=&quot;h1AkSt0JVUOTTQjrnA9w&quot; name=&quot;Step 1&quot;&gt;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&lt;/diagram&gt;&lt;diagram id=&quot;TyQapywxvfEGJysNaIdD&quot; name=&quot;Step 2&quot;&gt;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&lt;/diagram&gt;&lt;/mxfile&gt;" style="background-color: rgb(255, 255, 255);"><defs/><g><rect x="0" y="0" width="290" height="420" rx="43.5" ry="43.5" fill="#f5f5f5" stroke="rgb(0, 0, 0)" pointer-events="all"/><rect x="125" y="172.87" width="620" height="370" fill="none" stroke="none" pointer-events="all"/><rect x="20" y="30" width="250" height="370" fill="none" stroke="#b266ff" stroke-dasharray="1 2" pointer-events="all"/><rect x="120.88" y="10.88" width="48.25" height="230" fill="none" stroke="rgb(0, 0, 0)" stroke-dasharray="1 2" transform="rotate(90,145,125.88)" pointer-events="all"/><rect x="120" y="-50" width="50" height="230" fill="none" stroke="rgb(0, 0, 0)" stroke-dasharray="1 2" transform="rotate(90,145,65)" pointer-events="all"/><rect x="210" y="50" width="30" height="30" fill="#dae8fc" stroke="#6c8ebf" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 28px; height: 1px; padding-top: 65px; margin-left: 212px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: left;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Text</div></div></div></foreignObject><text x="212" y="69" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px">Text</text></switch></g><rect x="300" y="420" width="220" height="39" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 218px; height: 1px; padding-top: 440px; margin-left: 302px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: left;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><b>Container</b><b style="font-size: 12px;"> </b><span style="font-size: 12px;">decorates the Column with rounded border, black background color and padding .</span></div></div></div></foreignObject><text x="302" y="443" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px">Container decorates the Column with...</text></switch></g><path d="M 300 439.5 L 261.01 418.38" fill="none" stroke="#4d4d4d" stroke-miterlimit="10" pointer-events="stroke"/><ellipse cx="260.13" cy="417.9" rx="1" ry="1" fill="#4d4d4d" stroke="#4d4d4d" pointer-events="all"/><rect x="330" y="71.75" width="210" height="30" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 208px; height: 1px; padding-top: 87px; margin-left: 332px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: left;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><b>Column</b> contains the row with the Text and 5 rows with buttons</div></div></div></foreignObject><text x="332" y="90" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px">Column contains the row with the Te...</text></switch></g><path d="M 330 86.75 L 270 90" fill="none" stroke="#4d4d4d" stroke-miterlimit="10" pointer-events="stroke"/><rect x="50.22" y="114.63" width="39.89" height="22.5" rx="3.38" ry="3.38" fill="#dae8fc" stroke="#6c8ebf" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 38px; height: 1px; padding-top: 126px; margin-left: 51px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">AC</div></div></div></foreignObject><text x="70" y="129" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">AC</text></switch></g><rect x="100" y="114.63" width="40" height="22.5" rx="3.38" ry="3.38" fill="#dae8fc" stroke="#6c8ebf" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 38px; height: 1px; padding-top: 126px; margin-left: 101px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">+/-</div></div></div></foreignObject><text x="120" y="129" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">+/-</text></switch></g><path d="M 260 65 L 330 25" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><rect x="330" y="10" width="210" height="30" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 208px; height: 1px; padding-top: 25px; margin-left: 332px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: left;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><b>Row</b> with Text control. Row aligment is set to "end" for its child controls (Text) to be aligned to the right</div></div></div></foreignObject><text x="332" y="29" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px">Row with Text control. Row aligment...</text></switch></g><rect x="150" y="114.63" width="40" height="22.5" rx="3.38" ry="3.38" fill="#dae8fc" stroke="#6c8ebf" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 38px; height: 1px; padding-top: 126px; margin-left: 151px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">%</div></div></div></foreignObject><text x="170" y="129" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">%</text></switch></g><rect x="200" y="114.62" width="40" height="22.5" rx="3.38" ry="3.38" fill="#dae8fc" stroke="#6c8ebf" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 38px; height: 1px; padding-top: 126px; margin-left: 201px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">/</div></div></div></foreignObject><text x="220" y="129" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">/</text></switch></g><rect x="120.88" y="69.13" width="48.25" height="230" fill="none" stroke="rgb(0, 0, 0)" stroke-dasharray="1 2" transform="rotate(90,145,184.13)" pointer-events="all"/><rect x="50.22" y="172.88" width="39.89" height="22.5" rx="3.38" ry="3.38" fill="#dae8fc" stroke="#6c8ebf" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 38px; height: 1px; padding-top: 184px; margin-left: 51px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">7</div></div></div></foreignObject><text x="70" y="188" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">7</text></switch></g><rect x="100" y="172.88" width="40" height="22.5" rx="3.38" ry="3.38" fill="#dae8fc" stroke="#6c8ebf" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 38px; height: 1px; padding-top: 184px; margin-left: 101px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">8</div></div></div></foreignObject><text x="120" y="188" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">8</text></switch></g><rect x="150" y="172.88" width="40" height="22.5" rx="3.38" ry="3.38" fill="#dae8fc" stroke="#6c8ebf" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 38px; height: 1px; padding-top: 184px; margin-left: 151px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">9</div></div></div></foreignObject><text x="170" y="188" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">9</text></switch></g><rect x="200" y="172.87" width="40" height="22.5" rx="3.38" ry="3.38" fill="#dae8fc" stroke="#6c8ebf" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 38px; height: 1px; padding-top: 184px; margin-left: 201px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">*</div></div></div></foreignObject><text x="220" y="188" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">*</text></switch></g><rect x="120.88" y="129.13" width="48.25" height="230" fill="none" stroke="rgb(0, 0, 0)" stroke-dasharray="1 2" transform="rotate(90,145,244.13)" pointer-events="all"/><rect x="50.22" y="232.88" width="39.89" height="22.5" rx="3.38" ry="3.38" fill="#dae8fc" stroke="#6c8ebf" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 38px; height: 1px; padding-top: 244px; margin-left: 51px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">4</div></div></div></foreignObject><text x="70" y="248" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">4</text></switch></g><rect x="100" y="232.88" width="40" height="22.5" rx="3.38" ry="3.38" fill="#dae8fc" stroke="#6c8ebf" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 38px; height: 1px; padding-top: 244px; margin-left: 101px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">5</div></div></div></foreignObject><text x="120" y="248" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">5</text></switch></g><rect x="150" y="232.88" width="40" height="22.5" rx="3.38" ry="3.38" fill="#dae8fc" stroke="#6c8ebf" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 38px; height: 1px; padding-top: 244px; margin-left: 151px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">6</div></div></div></foreignObject><text x="170" y="248" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">6</text></switch></g><rect x="200" y="232.87" width="40" height="22.5" rx="3.38" ry="3.38" fill="#dae8fc" stroke="#6c8ebf" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 38px; height: 1px; padding-top: 244px; margin-left: 201px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">-</div></div></div></foreignObject><text x="220" y="248" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">-</text></switch></g><rect x="120.88" y="189.13" width="48.25" height="230" fill="none" stroke="rgb(0, 0, 0)" stroke-dasharray="1 2" transform="rotate(90,145,304.13)" pointer-events="all"/><rect x="50.22" y="292.88" width="39.89" height="22.5" rx="3.38" ry="3.38" fill="#dae8fc" stroke="#6c8ebf" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 38px; height: 1px; padding-top: 304px; margin-left: 51px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">1</div></div></div></foreignObject><text x="70" y="308" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">1</text></switch></g><rect x="100" y="292.88" width="40" height="22.5" rx="3.38" ry="3.38" fill="#dae8fc" stroke="#6c8ebf" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 38px; height: 1px; padding-top: 304px; margin-left: 101px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">2</div></div></div></foreignObject><text x="120" y="308" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">2</text></switch></g><rect x="150" y="292.88" width="40" height="22.5" rx="3.38" ry="3.38" fill="#dae8fc" stroke="#6c8ebf" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 38px; height: 1px; padding-top: 304px; margin-left: 151px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">3</div></div></div></foreignObject><text x="170" y="308" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">3</text></switch></g><rect x="200" y="292.87" width="40" height="22.5" rx="3.38" ry="3.38" fill="#dae8fc" stroke="#6c8ebf" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 38px; height: 1px; padding-top: 304px; margin-left: 201px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">+</div></div></div></foreignObject><text x="220" y="308" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">+</text></switch></g><rect x="120.88" y="250.88" width="48.25" height="230" fill="none" stroke="rgb(0, 0, 0)" stroke-dasharray="1 2" transform="rotate(90,145,365.88)" pointer-events="all"/><rect x="50.22" y="354.63" width="89.78" height="22.5" rx="3.38" ry="3.38" fill="#dae8fc" stroke="#6c8ebf" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 88px; height: 1px; padding-top: 366px; margin-left: 51px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">0</div></div></div></foreignObject><text x="95" y="369" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">0</text></switch></g><rect x="150" y="354.63" width="40" height="22.5" rx="3.38" ry="3.38" fill="#dae8fc" stroke="#6c8ebf" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 38px; height: 1px; padding-top: 366px; margin-left: 151px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">.</div></div></div></foreignObject><text x="170" y="369" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">.</text></switch></g><rect x="200" y="354.62" width="40" height="22.5" rx="3.38" ry="3.38" fill="#dae8fc" stroke="#6c8ebf" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 38px; height: 1px; padding-top: 366px; margin-left: 201px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">=</div></div></div></foreignObject><text x="220" y="369" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">=</text></switch></g><rect x="330" y="169.12" width="210" height="30" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 208px; height: 1px; padding-top: 184px; margin-left: 332px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: left;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Expand = 1 is used for each button in the row to expand them within the row equally (in proportion 1:1:1:1)</div></div></div></foreignObject><text x="332" y="188" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px">Expand = 1 is used for each button...</text></switch></g><path d="M 330 184.12 L 261 184.12" fill="none" stroke="#4d4d4d" stroke-miterlimit="10" pointer-events="stroke"/><ellipse cx="260" cy="184.13" rx="1" ry="1" fill="#4d4d4d" stroke="#4d4d4d" pointer-events="all"/><rect x="330" y="350.87" width="210" height="30" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 208px; height: 1px; padding-top: 366px; margin-left: 332px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: left;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Expand = 2 is used for "0" button and expand = 1 for "." and "=" buttons to expand them in proportion 2:1:1 within the row</div></div></div></foreignObject><text x="332" y="369" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px">Expand = 2 is used for "0" button a...</text></switch></g><path d="M 330 365.87 L 261 365.87" fill="none" stroke="#4d4d4d" stroke-miterlimit="10" pointer-events="stroke"/><ellipse cx="260" cy="365.88" rx="1" ry="1" fill="#4d4d4d" stroke="#4d4d4d" pointer-events="all"/></g><switch><g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/><a transform="translate(0,-5)" xlink:href="https://www.diagrams.net/doc/faq/svg-export-text-problems" target="_blank"><text text-anchor="middle" font-size="10px" x="50%" y="100%">Text is not SVG - cannot display</text></a></switch></svg>
