<!-- @import "/app/monitor/components/drilltable.kit" -->
<div class="drillcontainer" id="unitdetails">
    <div class="row tools detailtools">
        <div class="col-12 text-right">
            <ul>
                <li class="dropdown notifications hidden-sm-down">
                    <a href="javascript:void(0);" class="dropdown-toggle" role="button">
                        <i class="icon icon-export" data-toggle="tooltip" data-original-title="Export"></i>

                    </a>
                    <div class="dropdown-menu " aria-labelledby="gaergrdsdz">

                        <div>
                            <p>Export as:</p>

                            <a href="#"><i class="icon icon-file-excel"> CSV</i></a>
                            <a href="#"><i class="icon icon-file-image"> Image</i></a>

                        </div>
                    </div>
                </li>
                <li>
                    <i class="icon icon-max maximize" data-toggle="tooltip" data-original-title="Maximize"></i>
                </li>
                <li>
                    <a href="/app/monitor/pages/drilltable_detail.html" target="_blank">
                        <i class="icon icon-newwin" data-toggle="tooltip" data-original-title="Open in new window"></i>
                    </a>
                </li>
                <li>
                    <i class="icon icon-close closeDetail" data-toggle="tooltip" data-original-title="Close"></i>
                </li>
            </ul>
        </div>
    </div>
    <div class="row statusrow">
        <div class="col-8 unitdescription">
            <h3>HY01</h3>
            <p>Aquamatic V164, 9.5 MW | SN: 52134 | Unit time: 04.18.2017 - 22:30</p>
        </div>
        <div class="col-4 text-right  status unitdescription">
            <div class="text-left statusbox">
                <div class="statusgroup">
                    <div class="left">
                        <h4>Status:
                        </h4>
                    </div>
                    <div class="right statusboxtext">
                        <p>
                            <span class="icon-stack">
                                <i class="icon-tri_bg"></i>
                                <i class="icon-warning color-warning"></i>
                            </span>
                            <span>Warning</span></p>
                    </div>
                </div>
                <div class="statusgroup">

                    <div class="left">
                        <p>OEM Status:</p>
                    </div>
                    <div class="right">
                        <p data-toggle="tooltip" data-html="true" title="<strong>Stopped </strong><br>Lorem ipsum dolor sit ametum dol orem ipsum dolor sit
                            ametum dolor sit amet. Lorem ipsum dolor sit ametum dol orem ipsum dolor sit
                            ametum dolor sit amet.</p>">
                            <span>Stopped </span>- Lorem ipsum dolor sit ametum dol orem ipsum dolor sit
                            ametum dolor sit amet. Lorem ipsum dolor sit ametum dol orem ipsum dolor sit
                            ametum dolor sit amet.</p>
                    </div>
                </div>
                <div class="statusgroup">
                    <div class="left">
                        <p>Active alarm:</p>
                    </div>
                    <div class="right">
                        <p data-toggle="tooltip" data-html="true"
                            title="<strong>10.01.2018 10:22</strong><br>Generator temperature too hot"><span>10.01.2018
                                10:22 - Generator temperature too hot</span></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <ul class="nav nav-tabs" role="tablist">
        <li class="nav-item">
            <a class="nav-link active " href="#turbines" role="tab" data-toggle="tab">Turbines</a>
        </li>
        <li class="nav-item">
            <a class="nav-link " href="#lubrication" role="tab" data-toggle="tab" id="lubricationTab">Lubrication</a>
        </li>
        <li class="nav-item">
            <a class="nav-link " href="#electrical" role="tab" data-toggle="tab" id="counterTab">Electrical</a>
        </li>
        <li class="nav-item">
            <a class="nav-link " href="#events" role="tab" data-toggle="tab" id="eventsTab">Events</a>
        </li>
    </ul>
    <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="turbines">
            <div class="gridwrapper">


                <div class="frame twothirds doublerow nomax">
                    <h3>Turbine</h3>
                    <div class="row" style="height:100%;">
                        <div class="col-2">
                            <div class="unitgraphwrapper power">
                                <div class="min">
                                    <h6>0 kW</h6>
                                </div>
                                <div class="max">
                                    <h6>700 kW</h6>
                                </div>
                                <div class="base">
                                    <div class="valuebar power" style="height:40%;"></div>
                                    <div class="value" style="height:40%;">
                                        <h4>150
                                            <span>kW</span>
                                        </h4>
                                    </div>
                                </div>
                                <div class="valuelines"></div>
                                <div class="graphtop"></div>
                                <div class="graphbottom"></div>
                            </div>
                            <h6>Active power</h6>
                        </div>
                        <div class="col-3" style="padding-left:50px;">
                            <div class="unitgraphwrapper power">
                                <div class="min">
                                    <h6>0 m<sup>3</sup>/s</h6>
                                </div>
                                <div class="max">
                                    <h6>70 m<sup>3</sup>/s</h6>
                                </div>
                                <div class="base">
                                    <div class="valuebar wind" style="height:40%;"></div>
                                    <div class="value" style="height:40%;">
                                        <h4>32.2
                                            <span>m<sup>3</sup>/s</span>
                                        </h4>
                                    </div>
                                </div>
                                <div class="valuelines"></div>
                                <div class="graphtop"></div>
                                <div class="graphbottom"></div>
                            </div>
                            <h6>Water flow</h6>
                        </div>
                        <div class="col-7 text-center">
                            <svg id="Kaplan_geared" class="hydroturbinesvg" style="margin-top:-30px;" data-name="Lag 1"
                                xmlns="http://www.w3.org/2000/svg" viewBox="0 0 510.82 352.42">
                                <title>francis_rotated_geared</title>
                                <g id="Drawing" transform="translate(380 0)rotate(90)">
                                    <g id="Turbine">

                                        <polyline points="158.69 164.58 158.69 154.04 187.21 154.04 187.21 164.71" />
                                        <path d="M133.19,339.21V279.68c0-29.07-16.7-45.44-20.91-45.44H0" />
                                        <path d="M346.24,164.3s3.44.35-68.6.35h-209c-72,0-68.6-.35-68.6-.35" />
                                        <line x1="153.83" y1="268.35" x2="153.83" y2="295.62" />
                                        <polygon points="148.84 294.16 153.82 302.8 158.81 294.16 148.84 294.16" />
                                        <line x1="195.98" y1="268.35" x2="195.98" y2="295.62" />
                                        <polygon points="190.99 294.16 195.98 302.8 200.96 294.16 190.99 294.16" />
                                        <path d="M213.16,339.21V279.68c0-29.07,16.7-45.44,20.9-45.44H346.32" />

                                        <path
                                            d="M199.88,173.45c0,.68-.22,49-.22,49s-9.22,21.12-10.34,21.12-5.85.23-7.64-26.29.67-42.7.67-42.7Z" />
                                        <line x1="202.54" y1="224.38" x2="192.79" y2="243.89" />
                                        <path d="M168.19,221S166.56,243.3,172.3,244l6.93-.45s-8.69-.81-4.84-21.73" />
                                        <line class="dashed" x1="21.67" y1="197.21" x2="107.52" y2="197.21" />
                                        <line class="dashed" x1="241.17" y1="197.21" x2="327.02" y2="197.21" />
                                        <path
                                            d="M116.16,165.23l.33,61.77s7.76,16.17,13.26,16.17,10.67-9.38,12-19.08,3.56-59.18,3.56-59.18Z" />
                                        <path
                                            d="M144.38,180l-1.94,57.24s2.67,7,8,7,8.73-6.79,8.73-6.79l-.24-10.19,3.88-9.46v-24s-3.15-15.52-17.7-21.34Z" />
                                        <path d="M147.78,174.45l-1,61.6s-.18,7.86,5.64,8.11" />
                                        <path
                                            d="M229.77,176.6v48.54s-7.13,16.31-11.09,17.71l-6.66.05s-5.4-4.27-5.62-6.52,0-8.09,0-8.09-4.05-3.15-4.5-6.29,2.7-45.63,2.7-45.63Z" />
                                        <path class="filled"
                                            d="M116.16,165.23,116,176.09s24.65,2.31,28,10.49l.8-12.29s18,7,18,26.19v17.38a10.48,10.48,0,0,0,6.07,4.48l5.37-46.25,2.3.51-3.07,46.5s5.11-.25,8.69-2.81l2-27.34s8.94-13,14.56-15.32l5.11-1.54,1,7.67s3.67-6.51,25.64-6.26V164.08Z" />
                                        <g id="Water_steer_2" data-name="Water steer 2">
                                            <rect x="2.18" y="167.45" width="38.13" height="63.35" />
                                            <rect class="connector" x="17.29" y="164.3" width="9.07" height="2.81" />
                                            <rect class="connector" x="16.48" y="230.62" width="9.07" height="2.81" />
                                        </g>
                                        <g id="Water_steer_1" data-name="Water steer 1">
                                            <rect x="306.99" y="167.45" width="38.13" height="63.35" />
                                            <rect class="connector" x="322.11" y="164.3" width="9.07" height="2.81" />
                                            <rect class="connector" x="321.3" y="230.62" width="9.07" height="2.81" />
                                        </g>
                                        <rect class="connector" x="127.16" y="242.85" width="91.52" height="3.23" />
                                    </g>


                                    -->

                                    <g data-name="Generator" transform="translate(0 0) rotate(0)">
                                        <rect class="dashed" x="221.5" y="-153" width="33" height="19" id="Belt"
                                            transform="translate(100 -188.84) rotate(90)" />
                                        <g transform="translate(-50 0)">

                                            <rect class="gen" x="285.39" y="78.49" width="64.4" height="49.07"
                                                transform="translate(420.61 -214.56) rotate(90)" />
                                            <rect class="gen" x="333.66" y="116.21" width="24.87" height="7.5"
                                                transform="translate(466.06 -226.14) rotate(90)" />
                                            <rect class="gen" x="306.85" y="122.96" width="21.47" height="46"
                                                transform="translate(463.54 -171.63) rotate(90)" />
                                            <rect class="gen" x="315.2" y="56.18" width="4.77" height="23.85"
                                                transform="translate(385.69 -249.48) rotate(90)" />
                                            <rect class="gen" x="301.06" y="34.88" width="33.05" height="28.62"
                                                transform="translate(366.78 -268.39) rotate(90)" />
                                        </g>
                                        <rect class="gen" x="115.98" y="82.23" width="113.89" height="28.62"
                                            transform="translate(269.46 -76.38) rotate(90)" />
                                        <rect class="gen" x="156.4" y="-11.91" width="33.05" height="122.2"
                                            transform="translate(222.12 -123.73) rotate(90)" />
                                    </g>



                                </g>
                                <!--  <text class="value" transform="translate(391.64 27.2)">
                                    432
                                    <tspan class="unit">rpm</tspan>
                                </text>
                                <line class="infoline" x1="327.82" y1="50.21" x2="510.82" y2="50.21" />
                                <text class="description" transform="translate(389.64 43.2)">Generator speed</text>
                               
                                <g transform="translate(0 10)"> <text class="value" transform="translate(391.64 96.03)">216
                                    <tspan class="unit">rpm</tspan>
                                </text>
                                <line class="infoline" x1="174.32" y1="119.05" x2="510.82" y2="119.05" />
                                <text class="description" transform="translate(389.64 112.03)">Rotor speed</text>
                            </g>
                                <g transform="translate(0 20)">
                                <text class="value" transform="translate(391.64 164.87)">37
                                    <tspan class="unit">%</tspan>
                                </text>
                                <line class="infoline" x1="327.82" y1="187.88" x2="510.82" y2="187.88" />
                                <text class="description" transform="translate(389.64 180.87)">Water steering</text>
                                </g>  
                            -->



                                <g transform="translate(0 70)">
                                    <text class="value" transform="translate(391.64 96.03)">216
                                        <tspan class="unit"> rpm</tspan>
                                    </text>
                                    <line class="infoline" x1="330" y1="119.05" x2="510.82" y2="119.05" />
                                    <text class="description" transform="translate(389.64 112.03)">Rotor speed</text>
                                </g>

                                <g transform="translate(0 -135)">
                                    <text class="value" transform="translate(391.64 164.87)">37
                                        <tspan class="unit">%</tspan>
                                    </text>
                                    <line class="infoline" x1="200" y1="187.88" x2="510.82" y2="187.88" />
                                    <line class="infoline" x1="200" y1="187.88" x2="200" y2="155" />

                                    <text class="description" transform="translate(389.64 180.87)">Water steering</text>
                                </g>

                                <g transform="translate(0 0)">
                                    <text class="value" transform="translate(391.64 233.7)">432
                                        <tspan class="unit">rpm</tspan>
                                    </text>
                                    <line class="infoline" x1="330" y1="256.71" x2="510.82" y2="256.71" />
                                    <text class="description" transform="translate(389.64 249.7)">Generator speed</text>
                                </g>



                                <text class="description" transform="translate(389.64 285.7)">Operation mode:</text>
                                <text class="state" transform="translate(389.64 302.7)">Rotor pitch</text>
                                <text class="description" transform="translate(389.64 331.7)">Operation hours:</text>
                                <text class="state" transform="translate(389.64 348.7)">45h 22m 34s</text>
                            </svg>


                        </div>
                    </div>
                </div>
                <div class="frame third" style="height:100%; display:inline-block;">
                    <h3>Inlets</h3>
                    <div class="row">
                        <div class="col-6 no-padding">
                            <h6 class="state">Slide 1 state:</h6>
                            <p class="state"> <span class="icon-stack">
                                    <i class="icon-cirk_bg" style="left:-4px!important; top:0px!important;"></i>
                                    <i class="icon-ok-circle color-ok"></i>
                                </span>
                                <span>Ok</span></p>
                            <h6 class="state">Slide 2 operation mode:</h6>
                            <p class="state">Automatic</p>
                        </div>
                        <div class="col-6">
                            <h6 class="state">Slide 2 state:</h6>
                            <p class="state"><span class="icon-stack">
                                    <i class="icon-tri_bg"></i>
                                    <i class="icon-warning color-warning"></i>
                                </span><span>Warning</span></p>
                            <h6 class="state">Slide 2 operation mode:</h6>
                            <p class="state">Still open</p>
                        </div>

                    </div>
                </div>
                <div class="frame third" style="height:100%;  display:inline-block;">
                    <h3>States</h3>
                    <div class="flexwrapper">
                        <div>
                            <h6 class="state">Oil pressure:</h6>
                            <p class="state"><span class="icon-stack">
                                    <i class="icon-tri_bg"></i>
                                    <i class="icon-warning color-warning"></i>
                                </span><span>Warning</span></p>
                            <h6 class="state">Cleaner:</h6>
                            <p class="state">Still open</p>

                        </div>
                        <div>
                            <h6 class="state">Electric standby:</h6>
                            <p class="state"><span class="icon-stack">
                                    <i class="icon-cirk_bg" style="left:-3px!important; top:0px!important;"></i>
                                    <i class="icon-minus color-alert"></i>
                                </span><span>Not ready</span></p>
                            <h6 class="state">Emergency switch:</h6>
                            <p class="state">
                                <span class="icon-stack">
                                    <i class="icon-cirk_bg" style="left:-4px!important; top:0px!important;"></i>
                                    <i class="icon-ok-circle color-ok"></i>
                                </span>
                                <span>Ok</span></p>
                        </div>
                        <div>
                            <h6 class="state">Auxiliary generator:</h6>
                            <p class="state">
                            <p class="state"> <span class="icon-stack">
                                    <i class="icon-cirk_bg" style="left:-4px!important; top:0px!important;"></i>
                                    <i class="icon-ok-circle color-ok"></i>
                                </span>
                                <span>Operating</span></p>
                            <h6 class="state">Lubrication oil level:</h6>
                            <p class="state"> <span class="icon-stack">
                                    <i class="icon-cirk_bg" style="left:-4px!important; top:0px!important;"></i>
                                    <i class="icon-ok-circle color-ok"></i>
                                </span>
                                <span>Ok</span></p>

                        </div>
                    </div>

                </div>
                <div class="frame full">
                    <h3>Temperatures</h3>
                    <div class="row">
                        <div class="col-12">
                            <div class="flexwrapper">

                                <div class="unitgraphwrapper hydrotemp">
                                    <div class="min">
                                        <h6>0&deg;C</h6>
                                    </div>
                                    <div class="max">
                                        <h6>100&deg;C</h6>
                                    </div>
                                    <div class="base">
                                        <div class="valuebar" style="height:40%;"></div>
                                        <div class="value" style="height:40%;">
                                            <h4>40
                                                <span>&deg;C</span>
                                            </h4>
                                        </div>
                                    </div>
                                    <div class="valuelines"></div>
                                    <div class="graphtop"></div>
                                    <div class="graphbottom"></div>
                                    <h6 class="title">Turbine bearing</h6>
                                </div>
                                <div class="unitgraphwrapper hydrotemp">
                                    <div class="min">
                                        <h6>0&deg;C</h6>
                                    </div>
                                    <div class="max">
                                        <h6>100&deg;C</h6>
                                    </div>
                                    <div class="statvalues">
                                        <h4>15&deg;<span>C</span>
                                            <span class="type">L1</span>
                                        </h4>
                                        <h4 class="abovelimit">80&deg;<span>C</span>
                                            <span class="type">L2</span>
                                        </h4>
                                        <h4>40&deg;<span>C</span>
                                            <span class="type">L3</span>
                                        </h4>
                                    </div>
                                    <div class="base">
                                        <div class="warnlimit" style="height:30%;"></div>
                                        <div class="valuebar bg-online3 onethirdbar" style="height:15%;"></div>
                                        <div class="value onethirdbar" style="height:15%; "></div>
                                        <div class="valuebar  onethirdbar second" style="height:80%;">
                                            <div class="overLimit" style="height:12.5%"></div>
                                        
                                        </div>
                                        <div class="value onethirdbar second" style="height:80%; "></div>
                                        <div class="valuebar bg-online1 onethirdbar third" style="height:40%;"></div>
                                        <div class="value onethirdbar third" style="height:40%; "></div>
                                    </div>

                                    <div class="valuelines"></div>
                                    <div class="graphtop"></div>
                                    <div class="graphbottom"></div>
                                    <h6 class="title">Generator winding</h6>
                                </div>
                                <div class="unitgraphwrapper hydrotemp">
                                    <div class="min">
                                        <h6>0&deg;C</h6>
                                    </div>
                                    <div class="max">
                                        <h6>100&deg;C</h6>
                                    </div>
                                    <div class="statvalues">
                                        <h4>30<span>&deg;C</span>
                                            <span class="type">L1</span>
                                        </h4>
                                        <h4 class="abovelimit">80<span>&deg;C</span>
                                            <span class="type">L2</span>
                                        </h4>

                                    </div>
                                    <div class="base">
                                        <div class="warnlimit" style="height:30%;"></div>
                                        <div class="valuebar bg-online3 onehalfbar" style="height:30%;"></div>
                                        <div class="value onehalfbar" style="height:30%; "></div>
                                        <div class="valuebar  onehalfbar second" style="height:80%;"></div>
                                        <div class="value onehalfbar second" style="height:80%; ">
                                            <div class="overLimit" style="height:12.5%"></div>
                                        </div>

                                    </div>

                                    <div class="valuelines"></div>
                                    <div class="graphtop"></div>
                                    <div class="graphbottom"></div>
                                    <h6 class="title">Generator bearing</h6>
                                </div>
                                <div class="unitgraphwrapper hydrotemp">
                                    <div class="min">
                                        <h6>0&deg;C</h6>
                                    </div>
                                    <div class="max">
                                        <h6>100&deg;C</h6>
                                    </div>
                                    <div class="statvalues">
                                        <h4>15<span>&deg;C</span>
                                            <span class="type">L1</span>
                                        </h4>
                                        <h4 class="abovelimit">80<span>&deg;C</span>
                                            <span class="type">L2</span>
                                        </h4>

                                    </div>
                                    <div class="base">
                                        <div class="warnlimit" style="height:30%;"></div>
                                        <div class="valuebar bg-online3 onehalfbar" style="height:20%;"></div>
                                        <div class="value onehalfbar" style="height:20%; "></div>
                                        <div class="valuebar  onehalfbar second" style="height:80%;"></div>
                                        <div class="value onehalfbar second" style="height:80%; ">
                                            <div class="overLimit" style="height:12.5%"></div>
                                        </div>

                                    </div>

                                    <div class="valuelines"></div>
                                    <div class="graphtop"></div>
                                    <div class="graphbottom"></div>
                                    <h6 class="title">Pressure bearing</h6>
                                </div>
                                <div class="unitgraphwrapper hydrotemp">
                                    <div class="min">
                                        <h6>0&deg;C</h6>
                                    </div>
                                    <div class="max">
                                        <h6>100&deg;C</h6>
                                    </div>
                                    <div class="base">
                                        <div class="warnlimit" style="height:30%;"></div>
                                        <div class="valuebar" style="height:87%;">                                            <div class="overLimit" style="height:19.54%"></div>
                                    </div>
                                        <div class="value" style="height:87%;">
                                            <h4 class="abovelimit">87
                                                <span>&deg;C</span>
                                            </h4>
                                        </div>
                                    </div>

                                    <div class="valuelines"></div>
                                    <div class="graphtop"></div>
                                    <div class="graphbottom"></div>
                                    <h6 class="title">Transformer</h6>
                                </div>

                                <div class="unitgraphwrapper hydrotemp">
                                    <div class="min">
                                        <h6>0&deg;C</h6>
                                    </div>
                                    <div class="max">
                                        <h6>100&deg;C</h6>
                                    </div>
                                    <div class="base">
                                        <div class="warnlimit" style="height:30%;"></div>
                                        <div class="valuebar" style="height:62%;"></div>
                                        <div class="value" style="height:62%;">
                                            <h4 class="abovelimit">62
                                                <span>&deg;C</span>
                                            </h4>
                                        </div>
                                    </div>

                                    <div class="valuelines"></div>
                                    <div class="graphtop"></div>
                                    <div class="graphbottom"></div>
                                    <h6 class="title">Generator</h6>
                                </div>

                                <div class="unitgraphwrapper hydrotemp">
                                    <div class="min">
                                        <h6>0&deg;C</h6>
                                    </div>
                                    <div class="max">
                                        <h6>100&deg;C</h6>
                                    </div>
                                    <div class="statvalues">
                                        <h4>15<span>&deg;C</span>
                                            <span class="type">L1</span>
                                        </h4>
                                        <h4>15<span>&deg;C</span>
                                            <span class="type">L2</span>
                                        </h4>
                                        <h4>15<span>&deg;C</span>
                                            <span class="type">L3</span>
                                        </h4>
                                    </div>
                                    <div class="base">
                                        <div class="warnlimit" style="height:30%;"></div>
                                        <div class="valuebar onethirdbar" style="height:20%;"></div>
                                        <div class="value onethirdbar" style="height:20%; "></div>
                                        <div class="valuebar bg-online3 onethirdbar second" style="height:80%;"></div>
                                        <div class="value onethirdbar second" style="height:80%; ">                                            <div class="overLimit" style="height:12.5%"></div>
                                    </div>
                                        <div class="valuebar bg-online1 onethirdbar third" style="height:40%;"></div>
                                        <div class="value onethirdbar third" style="height:40%; "></div>
                                    </div>

                                    <div class="valuelines"></div>
                                    <div class="graphtop"></div>
                                    <div class="graphbottom"></div>
                                    <h6 class="title">Ambient temp.</h6>
                                </div>
                                <div class="unitgraphwrapper hydrotemp">
                                    <div class="min">
                                        <h6>0&deg;C</h6>
                                    </div>
                                    <div class="max">
                                        <h6>100&deg;C</h6>
                                    </div>
                                    <div class="statvalues">
                                        <h4>15<span>&deg;C</span>
                                            <span class="type">L1</span>
                                        </h4>
                                        <h4>15<span>&deg;C</span>
                                            <span class="type">L2</span>
                                        </h4>
                                        <h4>15<span>&deg;C</span>
                                            <span class="type">L3</span>
                                        </h4>
                                    </div>
                                    <div class="base">
                                        <div class="warnlimit" style="height:30%;"></div>
                                        <div class="valuebar onethirdbar" style="height:20%;"></div>
                                        <div class="value onethirdbar" style="height:20%; "></div>
                                        <div class="valuebar bg-online3 onethirdbar second" style="height:80%;"></div>
                                        <div class="value onethirdbar second" style="height:80%;">                                            <div class="overLimit" style="height:12.5%"></div>
                                    </div>
                                        <div class="valuebar bg-online1 onethirdbar third" style="height:40%;"></div>
                                        <div class="value onethirdbar third" style="height:40%; "></div>
                                    </div>

                                    <div class="valuelines"></div>
                                    <div class="graphtop"></div>
                                    <div class="graphbottom"></div>
                                    <h6 class="title">Ambient temp.</h6>
                                </div>
                                <div class="unitgraphwrapper hydrotemp">
                                    <div class="min">
                                        <h6>0&deg;C</h6>
                                    </div>
                                    <div class="max">
                                        <h6>100&deg;C</h6>
                                    </div>
                                    <div class="statvalues">
                                        <h4>15<span>&deg;C</span>
                                            <span class="type">L1</span>
                                        </h4>
                                        <h4>15<span>&deg;C</span>
                                            <span class="type">L2</span>
                                        </h4>
                                        <h4>15<span>&deg;C</span>
                                            <span class="type">L3</span>
                                        </h4>
                                    </div>
                                    <div class="base">
                                        <div class="warnlimit" style="height:30%;"></div>
                                        <div class="valuebar onethirdbar" style="height:20%;"></div>
                                        <div class="value onethirdbar" style="height:20%; "></div>
                                        <div class="valuebar bg-online3 onethirdbar second" style="height:80%;"></div>
                                        <div class="value onethirdbar second" style="height:80%;">                                            <div class="overLimit" style="height:12.5%"></div>
                                    </div>
                                        <div class="valuebar bg-online1 onethirdbar third" style="height:40%;"></div>
                                        <div class="value onethirdbar third" style="height:40%; "></div>
                                    </div>

                                    <div class="valuelines"></div>
                                    <div class="graphtop"></div>
                                    <div class="graphbottom"></div>
                                    <h6 class="title">Ambient temp.</h6>
                                </div>


                            </div>

                        </div>
                        <!-- <div class="col-6">
                            <div class="unitgraphwrapper met">
                                <div class="min">
                                    <h6>0 m/s</h6>
                                </div>
                                <div class="max">
                                    <h6>25 m/s</h6>
                                </div>
                                <div class="base">
                                    <div class="valuebar wind" style="height:40%;"></div>
                                    <div class="value" style="height:40%;">
                                        <h4>15
                                            <span>m/s</span>
                                        </h4>
                                    </div>
                                </div>
                                <div class="valuelines"></div>
                                <div class="graphtop"></div>
                                <div class="graphbottom"></div>
                            </div>
                        </div> -->

                    </div>
                    <div class="row">
                        <div class="col-12">
                            <h6>&nbsp;</h6>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <div role="tabpanel" class="tab-pane" id="lubrication">
            <div class="gridwrapper">
                <div class="frame  full notlr nomax">
                    <h3>Lubrication</h3>

                    <svg xmlns="http://www.w3.org/2000/svg" width="1236.202" height="597" viewBox="0 0 1236.202 597"
                        class="waterflowsvg">
                        <g transform="translate(-561 -467)">
                            <rect class="bgbox" width="119" height="184" rx="6" transform="translate(822 691)" />
                            <rect class="bgbox" width="267" height="71" rx="6" transform="translate(1279 620)" />
                            <rect class="bgbox" width="261" height="71" rx="6" transform="translate(561 620)" />
                            <rect class="bgbox" width="119" height="184" rx="6" transform="translate(822 880)" />
                            <rect class="bgbox" width="141" height="196" rx="6" transform="translate(1554 620)" />
                            <rect class="bgbox" width="141" height="184" rx="6" transform="translate(1138 691)" />
                            <rect class="bgbox" width="119" height="184" rx="6" transform="translate(967 691)" />
                            <rect class="bgbox" width="141" height="184" rx="6" transform="translate(1138 880)" />
                            <rect class="bgbox" width="119" height="184" rx="6" transform="translate(967 880)" />

                            <g data-name="dots">
                                <circle class="ok" data-name="Ellipse 1445" cx="11.994" cy="11.994" r="11.994"
                                    transform="translate(720.101 643.612)" />
                                <circle class="ok" data-name="Ellipse 1445" cx="11.994" cy="11.994" r="11.994"
                                    transform="translate(1351.789 643.612)" />
                                <circle class="alert" data-name="Ellipse 1452" cx="11.994" cy="11.994" r="11.994"
                                    transform="translate(1612.999 736.612)" />
                                <circle class="ok" data-name="Ellipse 1446" cx="11.994" cy="11.994" r="11.994"
                                    transform="translate(1195.999 799.769)" />
                                <circle class="alert" data-name="Ellipse 1450" cx="11.994" cy="11.994" r="11.994"
                                    transform="translate(867.001 799.769)" />
                                <circle class="alert" data-name="Ellipse 1451" cx="11.994" cy="11.994" r="11.994"
                                    transform="translate(1011.001 799.769)" />
                                <circle class="ok" data-name="Ellipse 1449" cx="11.994" cy="11.994" r="11.994"
                                    transform="translate(867 888.223)" />
                                <circle class="ok" data-name="Ellipse 1448" cx="11.994" cy="11.994" r="11.994"
                                    transform="translate(1011 888.223)" />
                                <circle class="alert" data-name="Ellipse 1447" cx="11.994" cy="11.994" r="11.994"
                                    transform="translate(1195.999 888.223)" />
                            </g>

                            <g data-name="texts">
                                <text class="description" transform="translate(707 650)">
                                    <tspan x="-114.59" y="0">Flow at bearing </tspan>
                                    <tspan x="-128.058" y="18">lubrication supply</tspan>
                                </text>
                                <text class="description" transform="translate(1387 650)">
                                    <tspan x="0" y="0">Flow at bearing </tspan>
                                    <tspan x="0" y="18">lubrication return</tspan>
                                </text>
                                <text class="description" transform="translate(1625 780)">
                                    <tspan x="-44.912" y="0">Fill reservoir </tspan>
                                    <tspan x="-52.283" y="18">pump running</tspan>
                                </text>
                                <text class="description" transform="translate(1208 844)">
                                    <tspan x="-38.738" y="0">Circulation</tspan>
                                    <tspan x="-56.756" y="18">pump 1 running</tspan>
                                </text>
                                <text class="description" transform="translate(879.001 844)">
                                    <tspan x="-50.19" y="0">Work through</tspan>
                                    <tspan x="-21.427" y="18">filter 1</tspan>
                                </text>
                                <text class="description" transform="translate(1023 844)">
                                    <tspan x="-50.19" y="0">Work through</tspan>
                                    <tspan x="-21.427" y="18">filter 1</tspan>
                                </text>
                                <text class="description" transform="translate(879 929)">
                                    <tspan x="-50.19" y="0">Work through</tspan>
                                    <tspan x="-22.855" y="18">filter 2</tspan>
                                </text>
                                <text class="description" transform="translate(1023.001 929)">
                                    <tspan x="-50.19" y="0">Work through</tspan>
                                    <tspan x="-22.855" y="18">filter 2</tspan>
                                </text>
                                <text class="description" transform="translate(1208 929)">
                                    <tspan x="-38.738" y="0">Circulation</tspan>
                                    <tspan x="-58.184" y="18">pump 2 running</tspan>
                                </text>
                                <text class="description" transform="translate(819 481)">
                                    <tspan x="-95.032" y="0">Water flow at</tspan>
                                    <tspan x="-107.198" y="18">Bearing supply</tspan>
                                </text>

                            </g>

                            <g data-name="lines">
                                <path id="Path_2270" d="M451.851,348.1V333.78H204.2V439.708"
                                    transform="translate(572.676 193.423)" />
                                <path id="Path_2271" d="M204.2,387.65v187.3h21.814V483.18H285"
                                    transform="translate(572.676 289.109)" />
                                <path id="Path_2272" d="M168.824,553.879H110.4v-113"
                                    transform="translate(688.291 423.621)" />
                                <path id="Path_2273" d="M111.013,348.1V333.78H378.136V439.708"
                                    transform="translate(940.594 193.423)" />
                                <path id="Path_2274" d="M286.926,387.864v78.23h74.69v45.133"
                                    transform="translate(1031.052 289.648)" />
                                <path id="Path_2275" d="M339.941,490.227V396.2H441.23"
                                    transform="translate(1164.584 310.647)" />
                                <rect width="174.512" height="183.539" transform="translate(1363.11 771.538)" />
                                <line id="Line_920" x2="173.463" transform="translate(1363.407 815.918)" />
                                <g id="Group_9989" data-name="Group 9989" transform="translate(1375.416 841.046)">
                                    <line id="Line_921" data-name="Line 921" x2="13.946" />
                                    <line id="Line_922" data-name="Line 922" x2="13.946"
                                        transform="translate(53.707 0.065)" />
                                    <line id="Line_923" data-name="Line 923" x2="13.946"
                                        transform="translate(80.561 0.452)" />
                                    <line id="Line_924" data-name="Line 924" x2="13.946"
                                        transform="translate(107.414 0.452)" />
                                    <line id="Line_925" data-name="Line 925" x2="13.946"
                                        transform="translate(134.268 0.065)" />
                                    <line id="Line_926" data-name="Line 926" x2="13.946"
                                        transform="translate(26.854 0.452)" />
                                </g>
                                <g id="Group_9990" data-name="Group 9990" transform="translate(1363.02 826.882)">
                                    <line id="Line_927" data-name="Line 927" x2="13.946" />
                                    <line id="Line_928" data-name="Line 928" x2="13.946"
                                        transform="translate(53.707 0.065)" />
                                    <line id="Line_929" data-name="Line 929" x2="13.946"
                                        transform="translate(161.121 0.065)" />
                                    <line id="Line_930" data-name="Line 930" x2="13.946"
                                        transform="translate(80.561 0.452)" />
                                    <line id="Line_931" data-name="Line 931" x2="13.946"
                                        transform="translate(107.414 0.452)" />
                                    <line id="Line_932" data-name="Line 932" x2="13.946"
                                        transform="translate(134.268 0.065)" />
                                    <line id="Line_933" data-name="Line 933" x2="13.946"
                                        transform="translate(26.854 0.452)" />
                                </g>
                                <g id="Group_9991" data-name="Group 9991" transform="translate(1363.505 855.21)">
                                    <line id="Line_934" data-name="Line 934" x2="13.946" />
                                    <line id="Line_935" data-name="Line 935" x2="13.946"
                                        transform="translate(53.707 0.065)" />
                                    <line id="Line_936" data-name="Line 936" x2="13.946"
                                        transform="translate(161.121 0.065)" />
                                    <line id="Line_937" data-name="Line 937" x2="13.946"
                                        transform="translate(80.561 0.452)" />
                                    <line id="Line_938" data-name="Line 938" x2="13.946"
                                        transform="translate(107.414 0.452)" />
                                    <line id="Line_939" data-name="Line 939" x2="13.946"
                                        transform="translate(134.268 0.065)" />
                                    <line id="Line_940" data-name="Line 940" x2="13.946"
                                        transform="translate(26.854 0.452)" />
                                </g>
                                <g id="Group_9992" data-name="Group 9992" transform="translate(1362.343 883.537)">
                                    <line id="Line_941" data-name="Line 941" x2="13.946" />
                                    <line id="Line_942" data-name="Line 942" x2="13.946"
                                        transform="translate(53.707 0.065)" />
                                    <line id="Line_943" data-name="Line 943" x2="13.946"
                                        transform="translate(161.121 0.065)" />
                                    <line id="Line_944" data-name="Line 944" x2="13.946"
                                        transform="translate(80.561 0.452)" />
                                    <line id="Line_945" data-name="Line 945" x2="13.946"
                                        transform="translate(107.414 0.452)" />
                                    <line id="Line_946" data-name="Line 946" x2="13.946"
                                        transform="translate(134.268 0.065)" />
                                    <line id="Line_947" data-name="Line 947" x2="13.946"
                                        transform="translate(26.854 0.452)" />
                                </g>
                                <g id="Group_9993" data-name="Group 9993" transform="translate(1363.118 911.865)">
                                    <line id="Line_948" data-name="Line 948" x2="13.946" />
                                    <line id="Line_949" data-name="Line 949" x2="13.946"
                                        transform="translate(53.707 0.065)" />
                                    <line id="Line_950" data-name="Line 950" x2="13.946"
                                        transform="translate(161.121 0.065)" />
                                    <line id="Line_951" data-name="Line 951" x2="13.946"
                                        transform="translate(80.561 0.452)" />
                                    <line id="Line_952" data-name="Line 952" x2="13.946"
                                        transform="translate(107.414 0.452)" />
                                    <line id="Line_953" data-name="Line 953" x2="13.946"
                                        transform="translate(134.268 0.065)" />
                                    <line id="Line_954" data-name="Line 954" x2="13.946"
                                        transform="translate(26.854 0.452)" />
                                </g>
                                <g id="Group_9994" data-name="Group 9994" transform="translate(1364.28 940.193)">
                                    <line id="Line_955" data-name="Line 955" x2="13.946" />
                                    <line id="Line_956" data-name="Line 956" x2="13.946"
                                        transform="translate(53.707 0.065)" />
                                    <line id="Line_957" data-name="Line 957" x2="13.946"
                                        transform="translate(161.121 0.065)" />
                                    <line id="Line_958" data-name="Line 958" x2="13.946"
                                        transform="translate(80.561 0.452)" />
                                    <line id="Line_959" data-name="Line 959" x2="13.946"
                                        transform="translate(107.414 0.452)" />
                                    <line id="Line_960" data-name="Line 960" x2="13.946"
                                        transform="translate(134.268 0.065)" />
                                    <line id="Line_961" data-name="Line 961" x2="13.946"
                                        transform="translate(26.854 0.452)" />
                                </g>
                                <g id="Group_9995" data-name="Group 9995" transform="translate(1375.416 869.373)">
                                    <line id="Line_962" data-name="Line 962" x2="13.946" />
                                    <line id="Line_963" data-name="Line 963" x2="13.946"
                                        transform="translate(53.707 0.065)" />
                                    <line id="Line_964" data-name="Line 964" x2="13.946"
                                        transform="translate(80.561 0.452)" />
                                    <line id="Line_965" data-name="Line 965" x2="13.946"
                                        transform="translate(107.414 0.452)" />
                                    <line id="Line_966" data-name="Line 966" x2="13.946"
                                        transform="translate(134.268 0.065)" />
                                    <line id="Line_967" data-name="Line 967" x2="13.946"
                                        transform="translate(26.854 0.452)" />
                                </g>
                                <g id="Group_9996" data-name="Group 9996" transform="translate(1375.416 897.701)">
                                    <line id="Line_968" data-name="Line 968" x2="13.946" />
                                    <line id="Line_969" data-name="Line 969" x2="13.946"
                                        transform="translate(53.707 0.065)" />
                                    <line id="Line_970" data-name="Line 970" x2="13.946"
                                        transform="translate(80.561 0.452)" />
                                    <line id="Line_971" data-name="Line 971" x2="13.946"
                                        transform="translate(107.414 0.452)" />
                                    <line id="Line_972" data-name="Line 972" x2="13.946"
                                        transform="translate(134.268 0.065)" />
                                    <line id="Line_973" data-name="Line 973" x2="13.946"
                                        transform="translate(26.854 0.452)" />
                                </g>
                                <g id="Group_9997" data-name="Group 9997" transform="translate(1375.416 926.029)">
                                    <line id="Line_974" data-name="Line 974" x2="13.946" />
                                    <line id="Line_975" data-name="Line 975" x2="13.946"
                                        transform="translate(53.707 0.065)" />
                                    <line id="Line_976" data-name="Line 976" x2="13.946"
                                        transform="translate(80.561 0.452)" />
                                    <line id="Line_977" data-name="Line 977" x2="13.946"
                                        transform="translate(107.414 0.452)" />
                                    <line id="Line_978" data-name="Line 978" x2="13.946"
                                        transform="translate(134.268 0.065)" />
                                    <line id="Line_979" data-name="Line 979" x2="13.946"
                                        transform="translate(26.854 0.452)" />
                                </g>
                                <g id="Group_9999" data-name="Group 9999" transform="translate(1294.729 632.669)">
                                    <g id="Group_9998" data-name="Group 9998">
                                        <path id="Path_2276" data-name="Path 2276"
                                            d="M313.958,377.777a22.945,22.945,0,1,0,1.527,39.66,64.225,64.225,0,0,1-1.527-39.66Z"
                                            transform="translate(-280.319 -375.12)" />
                                        <path id="Path_2277" data-name="Path 2277"
                                            d="M289.879,375.875a22.909,22.909,0,0,1,1.527,39.66"
                                            transform="translate(-256.24 -373.218)" />
                                    </g>
                                    <path id="Path_2278" data-name="Path 2278"
                                        d="M286.14,393.3a65.288,65.288,0,0,0-2.424-17.443"
                                        transform="translate(-271.763 -373.264)" />
                                    <path id="Path_2279" data-name="Path 2279"
                                        d="M283.282,403.031a65.142,65.142,0,0,0,3.952-22.217"
                                        transform="translate(-272.856 -360.778)" />
                                </g>
                                <g id="Group_10001" data-name="Group 10001" transform="translate(755.057 632.669)">
                                    <g id="Group_10000" data-name="Group 10000">
                                        <path id="Path_2280" data-name="Path 2280"
                                            d="M231.64,377.777a22.945,22.945,0,1,0,1.527,39.66,64.225,64.225,0,0,1-1.527-39.66Z"
                                            transform="translate(-197.997 -375.12)" />
                                        <path id="Path_2281" data-name="Path 2281"
                                            d="M207.558,375.875a22.909,22.909,0,0,1,1.527,39.66"
                                            transform="translate(-173.915 -373.218)" />
                                    </g>
                                    <path id="Path_2282" data-name="Path 2282"
                                        d="M203.819,393.3a65.291,65.291,0,0,0-2.424-17.443"
                                        transform="translate(-189.438 -373.264)" />
                                    <path id="Path_2283" data-name="Path 2283"
                                        d="M200.961,403.031a65.139,65.139,0,0,0,3.952-22.217"
                                        transform="translate(-190.531 -360.778)" />
                                </g>
                                <g id="Group_10020" data-name="Group 10020" transform="translate(-20 25)">
                                    <path id="Path_2284" data-name="Path 2284"
                                        d="M240.041,340.157H282l-7.866,36.335h-26.6Z"
                                        transform="translate(798.975 175.959)" />
                                    <g id="Group_10019" data-name="Group 10019" transform="translate(984.314 482.758)">
                                        <path id="Path_2299" data-name="Path 2299" d="M0,53.518V20"
                                            transform="translate(67.813 -20)" stroke-width="1" />
                                        <path id="Path_2300" data-name="Path 2300" d="M0,53.518V20"
                                            transform="translate(81.236 -20)" stroke-width="1" />
                                        <line id="Line_982" data-name="Line 982" y2="6.743"
                                            transform="translate(67.813 69.853)" />
                                        <line id="Line_983" data-name="Line 983" y2="7.492"
                                            transform="translate(81.236 69.478)" />
                                        <path id="Path_2285" data-name="Path 2285"
                                            d="M260.99,371.8l-34.464-7.493s-14.233,19.1,1.124,36.336l42.7-8.99s-9.363-1.5-9.363-8.99l.373-27.346h67.8V371.8l34.464-7.118s14.609,17.232.376,36.336l-34.464-7.866v15.732s0,19.852-25.846,35.96H289.832s-28.469-14.984-28.469-36.336V395.026"
                                            transform="translate(-220.521 -279.473)" />
                                        <line id="Line_984" data-name="Line 984" x2="68.175"
                                            transform="translate(40.843 129.038)" />
                                        <path id="Path_2286" data-name="Path 2286"
                                            d="M264.724,382.552l-.376-10.865s0-6.742-7.866-8.99l7.866-1.5"
                                            transform="translate(-155.706 -268.872)" />
                                        <path id="Path_2287" data-name="Path 2287"
                                            d="M302.173,393.392,235.5,358.928a44.867,44.867,0,0,0,35.587,17.607C282.346,376.535,297.678,380.655,302.173,393.392Z"
                                            transform="translate(-193.53 -272.968)" />
                                    </g>
                                </g>
                                <path id="Path_2297" data-name="Path 2297" d="M157.034,0H-126.921"
                                    transform="translate(1028.542 772.301)" stroke-width="1" />
                                <path id="Path_2288" data-name="Path 2288" d="M227.193,412.3h69.634V618.239H227.193"
                                    transform="translate(1003.864 359.698)" />
                                <path id="Path_2298" data-name="Path 2298" d="M151.564,0H0"
                                    transform="translate(1034.5 977.5)" stroke-width="1" />
                                <line id="Line_987" data-name="Line 987" x1="111" transform="translate(900.5 977.5)" />
                                <line id="Line_988" data-name="Line 988" y1="205" x2="2"
                                    transform="translate(1112.5 772.5)" />
                                <line id="Line_989" data-name="Line 989" x1="61.616"
                                    transform="translate(1300.993 864.059)" fill="#fff" stroke="#fff" />
                                <path id="Path_2301" data-name="Path 2301" d="M10,0H78.906"
                                    transform="translate(1637.008 705.838)" stroke-width="1" />
                                <path id="Path_2289" data-name="Path 2289"
                                    d="M376.806,396.048h19.718V617.113l-9.407,23.518"
                                    transform="translate(1383.462 310.261)" />
                                <line id="Line_994" data-name="Line 994" x1="10.348" y1="21.636"
                                    transform="translate(1779.985 927.373)" />
                                <g id="Group_10004" data-name="Group 10004" transform="translate(1715.915 683.279)">
                                    <rect id="Rectangle_17050" data-name="Rectangle 17050" width="31.909"
                                        height="31.909" transform="translate(22.563 0) rotate(45)" />
                                    <line id="Line_996" data-name="Line 996" y2="45.126" transform="translate(22.563)"
                                        stroke-dasharray="1.5 1" />
                                </g>
                                <g id="Group_10012" data-name="Group 10012" transform="translate(885.572 514.17)">
                                    <line id="Line_1004" data-name="Line 1004" x2="34.336"
                                        transform="translate(0 3.548)" fill="#fff" stroke="#fff" />
                                    <path id="Path_2293" data-name="Path 2293" d="M230.494,330.076v6.7l10.056-2.933Z"
                                        transform="translate(-196.659 -330.076)" stroke="#fff" stroke-width="1" />
                                </g>
                                <g id="Group_10013" data-name="Group 10013" transform="translate(1789.831 793.741)">
                                    <line id="Line_1005" data-name="Line 1005" y1="34.336"
                                        transform="translate(3.548 9.555)" fill="#fff" stroke="#fff" />
                                    <path id="Path_2294" data-name="Path 2294" d="M389.193,430.951h6.7L392.964,420.9Z"
                                        transform="translate(-389.193 -420.895)" stroke="#fff" stroke-width="1" />
                                </g>
                                <g id="Group_10014" data-name="Group 10014" transform="translate(1316.494 848.182)">
                                    <line id="Line_1006" data-name="Line 1006" x1="22.478"
                                        transform="translate(9.555 3.156)" fill="#fff" stroke="#fff" />
                                    <path id="Path_2295" data-name="Path 2295" d="M296.56,443.071v-6.7L286.5,439.3Z"
                                        transform="translate(-286.504 -436.367)" stroke="#fff" stroke-width="1" />
                                </g>
                                <g id="Group_10015" data-name="Group 10015" transform="translate(1170.646 514.17)">
                                    <line id="Line_1007" data-name="Line 1007" x2="34.336"
                                        transform="translate(0 3.548)" fill="#fff" stroke="#fff" />
                                    <path id="Path_2296" data-name="Path 2296" d="M274.849,330.076v6.7l10.056-2.933Z"
                                        transform="translate(-241.014 -330.076)" stroke="#fff" stroke-width="1" />
                                </g>
                                <g id="Group_10027" data-name="Group 10027" transform="translate(146.359 -15)">
                                    <g id="Group_10006" data-name="Group 10006" transform="translate(1455.641 699.499)">
                                        <circle class="bigcircle" id="Ellipse_1439" data-name="Ellipse 1439" cx="22.479"
                                            cy="22.479" r="22.479" />
                                        <path id="Path_2291" data-name="Path 2291"
                                            d="M345.942,401.056l8.937-6.731v11.288Z"
                                            transform="translate(-345.942 -378.577)" fill="#fff" />
                                    </g>
                                    <g id="Group_10008" data-name="Group 10008" transform="translate(1455.641 645.058)">
                                        <circle class="bigcircle" id="Ellipse_1441" data-name="Ellipse 1441" cx="22.479"
                                            cy="22.479" r="22.479" />
                                    </g>
                                    <line id="Line_997" data-name="Line 997" y2="9.483"
                                        transform="translate(1478.119 690.016)" />
                                    <text class="bigtext" id="M" transform="translate(1466.999 676)">
                                        <tspan x="0" y="0">M</tspan>
                                    </text>
                                </g>
                                <g id="Group_10028" data-name="Group 10028" transform="translate(50.139 -15)">
                                    <g id="Group_10005" data-name="Group 10005" transform="translate(1135.862 765.765)">
                                        <circle class="bigcircle" id="Ellipse_1438" data-name="Ellipse 1438" cx="22.479"
                                            cy="22.479" r="22.479" />
                                        <path id="Path_2290" data-name="Path 2290"
                                            d="M263.59,419.888l8.937-6.731v11.288Z"
                                            transform="translate(-263.59 -397.409)" fill="#fff" />
                                    </g>
                                    <g id="Group_10009" data-name="Group 10009" transform="translate(1135.862 711.6)">
                                        <circle class="bigcircle" id="Ellipse_1442" data-name="Ellipse 1442" cx="22.479"
                                            cy="22.479" r="22.479" />
                                    </g>
                                    <line id="Line_1001" data-name="Line 1001" y2="9.208"
                                        transform="translate(1158.341 756.557)" />
                                    <text class="bigtext" id="M-2" data-name="M" transform="translate(1146.999 743)">
                                        <tspan x="0" y="0">M</tspan>
                                    </text>
                                </g>
                                <g id="Group_10003" data-name="Group 10003" transform="translate(856.999 749.546)">
                                    <rect id="Rectangle_17049" data-name="Rectangle 17049" width="31.909"
                                        height="31.909" transform="translate(22.563 0) rotate(45)" />
                                    <line id="Line_995" data-name="Line 995" y2="45.126" transform="translate(22.563 0)"
                                        stroke-dasharray="1.5 1" />
                                </g>
                                <g id="Group_10002" data-name="Group 10002" transform="translate(1010.001 723.711)">
                                    <rect id="Rectangle_17047" data-name="Rectangle 17047" width="24.929" height="53.15"
                                        transform="translate(0 8.937)" />
                                    <line id="Line_990" data-name="Line 990" x2="24.458"
                                        transform="translate(0 34.336)" />
                                    <line id="Line_991" data-name="Line 991" x2="5.731"
                                        transform="translate(0.383 22.124)" />
                                    <line id="Line_992" data-name="Line 992" x2="5.731"
                                        transform="translate(19.319 22.106)" />
                                    <rect id="Rectangle_17048" data-name="Rectangle 17048" width="8.937" height="8.937"
                                        transform="translate(8.466)" fill="#fff" />
                                </g>
                                <g id="Group_10017" data-name="Group 10017" transform="translate(856 955)">
                                    <rect id="Rectangle_17049-2" data-name="Rectangle 17049" width="31.909"
                                        height="31.909" transform="translate(22.563 0) rotate(45)" />
                                    <line id="Line_995-2" data-name="Line 995" y2="45.126"
                                        transform="translate(22.563 0)" stroke-dasharray="1.5 1" />
                                </g>
                                <g id="Group_10023" data-name="Group 10023" transform="translate(-56.942 6)">
                                    <g id="Group_10011" data-name="Group 10011" transform="translate(1067.921 948.936)">
                                        <rect id="Rectangle_17051" data-name="Rectangle 17051" width="24.929"
                                            height="53.15" transform="translate(0 8.937)" />
                                        <line id="Line_998" data-name="Line 998" x2="24.458"
                                            transform="translate(0 34.336)" />
                                        <line id="Line_999" data-name="Line 999" x2="5.731"
                                            transform="translate(0.383 22.581)" />
                                        <line id="Line_1000" data-name="Line 1000" x2="5.731"
                                            transform="translate(19.319 22.564)" />
                                        <rect id="Rectangle_17052" data-name="Rectangle 17052" width="8.937"
                                            height="8.937" transform="translate(8.466)" fill="#fff" />
                                    </g>
                                    <line id="Line_1003" data-name="Line 1003" x2="24.929"
                                        transform="translate(1066.943 997.404)" />
                                </g>
                                <g id="Group_10024" data-name="Group 10024" transform="translate(50.136 -15)">
                                    <g id="Group_10007" data-name="Group 10007" transform="translate(1135.862 969.255)">
                                        <circle class="bigcircle" id="Ellipse_1440" data-name="Ellipse 1440" cx="22.479"
                                            cy="22.479" r="22.479" />
                                        <path id="Path_2292" data-name="Path 2292"
                                            d="M263.59,472.034l8.937-6.731v11.288Z"
                                            transform="translate(-263.59 -449.555)" fill="#fff" />
                                    </g>
                                    <g id="Group_10010" data-name="Group 10010"
                                        transform="translate(1135.862 1021.781)">
                                        <circle class="bigcircle" id="Ellipse_1443" data-name="Ellipse 1443" cx="22.479"
                                            cy="22.479" r="22.479" />
                                    </g>
                                    <line id="Line_1002" data-name="Line 1002" y2="7.568"
                                        transform="translate(1158.341 1014.213)" />
                                    <text class="bigtext" id="M-3" data-name="M" transform="translate(1146.999 1052)">
                                        <tspan x="0" y="0">M</tspan>
                                    </text>
                                </g>
                            </g>
                            <g id="Group_10032" data-name="Group 10032" transform="translate(-708 20)">
                                <rect class="barbg" width="150" height="24" transform="translate(1545 452)"
                                    fill="#4d4d4d">
                                    <rect class="bar" width="50" height="24" fill="#2d98da" />
                                </rect>
                                <g width="150">
                                    <rect class="barvalue" width="75" height="24" transform="translate(1545 452)"
                                        fill="#2d98da" />
                                    <!-- width needs to be calculated to match 100% = 150 width -->
                                </g>
                                <text class="description" transform="translate(1630 469)">
                                    <tspan x="-26.32" y="0">14.2 l/m</tspan>
                                </text>
                            </g>
                        </g>
                    </svg>




                </div>

            </div>
        </div>
        <div role="tabpanel" class="tab-pane" id="electrical">
            <div class="gridwrapper">
                <div class="frame half">
                    <h3>Power System</h3>
                    <div class="row">
                        <div class="col-4">
                            <div class="unitgraphwrapper power" style="min-height:180px;">
                                <div class="min">
                                    <h6>0 kW</h6>
                                </div>
                                <div class="max">
                                    <h6>3.000 kW</h6>
                                </div>
                                <div class="base">
                                    <div class="valuebar power" style="height:40%;"></div>
                                    <div class="value" style="height:40%;">
                                        <h4>150
                                            <span>kW</span>
                                        </h4>
                                    </div>
                                </div>
                                <div class="valuelines"></div>
                                <div class="graphtop"></div>
                                <div class="graphbottom"></div>
                            </div>
                            <h6>Power</h6>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            <h4>691
                                <span>v</span>
                            </h4>
                            <h6>Voltage L1</h6>
                            <h4>250
                                <span>A</span>
                            </h4>
                            <h6>Current L1</h6>
                            <h4>1.00</h4>
                            <h6>Power Factor</h6>
                        </div>
                        <div class="col">
                            <h4>691
                                <span>v</span>
                            </h4>
                            <h6>Voltage L2</h6>

                            <h4>250
                                <span>A</span>
                            </h4>
                            <h6>Current L2</h6>
                            <h4>50.63
                                <span>Hz</span>
                            </h4>
                            <h6>Frequency</h6>
                        </div>

                        <div class="col">
                            <h4>691
                                <span>v</span>
                            </h4>
                            <h6>Voltage L3</h6>
                            <h4>250
                                <span>A</span>
                            </h4>
                            <h6>Current L3</h6>
                            <h4>-12.1
                                <span>kVAr</span>
                            </h4>
                            <h6>Reactive Power</h6>
                        </div>
                    </div>
                </div>
                <div class="frame half">Single line diagram goes here</div>
            </div>
        </div>

        <div role="tabpanel" class="tab-pane" id="events">
            <div class="gridwrapper">
                <div class="frame  full notlr">
                    <h3>Events</h3>
                </div>

            </div>
        </div>
    </div>
</div>