<div class="powerQualityPowerFactorImpactWrapper">

    <div class="topSection">
        <table border="0" cellpadding="0" cellspacing="0" class="containerTable">
            <tr>
                <td align="center" style="display: inline-block; height: 100%; width: 100%;">
                    <div class="gaugeLabel" data-hide-if-compact><span><%loc PowerQualityGadgets.PowerQualityPowerFactor_EffectivePowerFactor_Label %></span></div>
                    <div class="linearGaugeContainer">
                        <div class="linearGauge">
                            <div data-hide-if-compact class="laggingLabel"><%loc PowerQualityGadgets.PowerQualityPowerFactor_Lagging_Label %></div>
                            <div class="leftTick"></div>
                            <div class="leftTickLabel">0</div>
                            <div class="leftCenterTick"></div>
                            <div class="leftCenterTickLabel">80%</div>
                            <div class="centerTick"></div>
                            <div class="centerTickLabel">100%</div>
                            <div class="rightCenterTick"></div>
                            <div data-hide-if-compact class="leadingLabel"><%loc PowerQualityGadgets.PowerQualityPowerFactor_Leading_Label %></div>
                            <div class="rightCenterTickLabel">80%</div>
                            <div class="rightTick"></div>
                            <div class="rightTickLabel">0</div>
                            <div class="gradient">
                                <div class="pointer-scale">
                                    <div class="pointer">
                                        <div class="pointerLabel">
                                            <span><%= formattedEffectivePowerFactor %></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </td>
            </tr>
        </table>
    </div>
    <div class="bottomSection">
        <div class="costSection">
            <table border="0" cellpadding="0" cellspacing="0" class="containerTable">
                <tr>
                    <td align="center" valign="bottom">
                        <div><%= formattedPowerFactorImpact %></div>
                    </td>
                </tr>
            </table>
        </div>
        <div class="costLabelSection">
            <span><%loc PowerQualityGadgets.PowerQualityPowerFactor_PowerFactorImpact_Label %></span>
        </div>
    </div>
</div>
