<div class="pullLeft" style="width: 100%; height: 100%; display: flex; flex-direction: column;">
    <div class="sheet-boxcontainer">
        <div style="width: 225px; margin: 0 auto;">
            <div class="sheet-headline sheet-banner-small splatFont">
                <span class="sheet-banner-text">
                    <i class="fa fa-arrow-circle-up quintessenceBtn pointer" aria-hidden="true" data-itemid="{{actor.system.advantages.quintessence._id}}" data-field="temporary" data-value="1" data-action="quintessenceHandling"></i>
                    {{localize 'wod.advantages.quintessence'}}
                    <i class="fa fa-arrow-circle-down quintessenceBtn pointer" aria-hidden="true" data-itemid="{{actor.system.advantages.quintessence._id}}" data-field="temporary" data-value="-1" data-action="quintessenceHandling"></i>
                </span>
            </div>

            <div class="quintessence" data-name="data.system.quintessence" style="height: 150px; display: flex; flex-wrap: wrap; flex-direction: row; display: -webkit-flex; -webkit-flex-wrap: wrap; -webkit-flex-direction: row;">
                <div class="resource-counter" style="flex: 0 0 50%; -webkit-flex: 0 0 50%; position: relative;">
                    <span class="resource-value-step quintessence wheel-0" data-type="{{config.sheettype.mage}}" data-index="0" data-state="{{quintessenceWheel_v2 actor.system.advantages.quintessence actor.system.advantages.paradox 0}}" data-action="quintessenceWheelClick" data-quintessenceid="{{actor.system.advantages.quintessence._id}}" data-paradoxid="{{actor.system.advantages.paradox._id}}"></span>
                    <span class="resource-value-step quintessence wheel-1" data-type="{{config.sheettype.mage}}" data-index="1" data-state="{{quintessenceWheel_v2 actor.system.advantages.quintessence actor.system.advantages.paradox 1}}" data-action="quintessenceWheelClick" data-quintessenceid="{{actor.system.advantages.quintessence._id}}" data-paradoxid="{{actor.system.advantages.paradox._id}}"></span>
                    <span class="resource-value-step quintessence wheel-2" data-type="{{config.sheettype.mage}}" data-index="2" data-state="{{quintessenceWheel_v2 actor.system.advantages.quintessence actor.system.advantages.paradox 2}}" data-action="quintessenceWheelClick" data-quintessenceid="{{actor.system.advantages.quintessence._id}}" data-paradoxid="{{actor.system.advantages.paradox._id}}"></span>
                    <span class="resource-value-step quintessence wheel-3" data-type="{{config.sheettype.mage}}" data-index="3" data-state="{{quintessenceWheel_v2 actor.system.advantages.quintessence actor.system.advantages.paradox 3}}" data-action="quintessenceWheelClick" data-quintessenceid="{{actor.system.advantages.quintessence._id}}" data-paradoxid="{{actor.system.advantages.paradox._id}}"></span>
                    <span class="resource-value-step quintessence wheel-4" data-type="{{config.sheettype.mage}}" data-index="4" data-state="{{quintessenceWheel_v2 actor.system.advantages.quintessence actor.system.advantages.paradox 4}}" data-action="quintessenceWheelClick" data-quintessenceid="{{actor.system.advantages.quintessence._id}}" data-paradoxid="{{actor.system.advantages.paradox._id}}"></span>
                </div>
                <div class="resource-counter" style="flex: 0 0 50%; -webkit-flex: 0 0 50%; position: relative;">
                    <span class="resource-value-step quintessence wheel-5" data-type="{{config.sheettype.mage}}" data-index="5" data-state="{{quintessenceWheel_v2 actor.system.advantages.quintessence actor.system.advantages.paradox 5}}" data-action="quintessenceWheelClick" data-quintessenceid="{{actor.system.advantages.quintessence._id}}" data-paradoxid="{{actor.system.advantages.paradox._id}}"></span>
                    <span class="resource-value-step quintessence wheel-6" data-type="{{config.sheettype.mage}}" data-index="6" data-state="{{quintessenceWheel_v2 actor.system.advantages.quintessence actor.system.advantages.paradox 6}}" data-action="quintessenceWheelClick" data-quintessenceid="{{actor.system.advantages.quintessence._id}}" data-paradoxid="{{actor.system.advantages.paradox._id}}"></span>
                    <span class="resource-value-step quintessence wheel-7" data-type="{{config.sheettype.mage}}" data-index="7" data-state="{{quintessenceWheel_v2 actor.system.advantages.quintessence actor.system.advantages.paradox 7}}" data-action="quintessenceWheelClick" data-quintessenceid="{{actor.system.advantages.quintessence._id}}" data-paradoxid="{{actor.system.advantages.paradox._id}}"></span>
                    <span class="resource-value-step quintessence wheel-8" data-type="{{config.sheettype.mage}}" data-index="8" data-state="{{quintessenceWheel_v2 actor.system.advantages.quintessence actor.system.advantages.paradox 8}}" data-action="quintessenceWheelClick" data-quintessenceid="{{actor.system.advantages.quintessence._id}}" data-paradoxid="{{actor.system.advantages.paradox._id}}"></span>
                    <span class="resource-value-step quintessence wheel-9" data-type="{{config.sheettype.mage}}" data-index="9" data-state="{{quintessenceWheel_v2 actor.system.advantages.quintessence actor.system.advantages.paradox 9}}" data-action="quintessenceWheelClick" data-quintessenceid="{{actor.system.advantages.quintessence._id}}" data-paradoxid="{{actor.system.advantages.paradox._id}}"></span>                
                </div>
                <div class="resource-counter" style="flex: 0 0 50%; -webkit-flex: 0 0 50%; position: relative;">
                    <span class="resource-value-step quintessence wheel-19" data-type="{{config.sheettype.mage}}" data-index="19" data-state="{{quintessenceWheel_v2 actor.system.advantages.quintessence actor.system.advantages.paradox 19}}" data-action="quintessenceWheelClick" data-quintessenceid="{{actor.system.advantages.quintessence._id}}" data-paradoxid="{{actor.system.advantages.paradox._id}}"></span>
                    <span class="resource-value-step quintessence wheel-18" data-type="{{config.sheettype.mage}}" data-index="18" data-state="{{quintessenceWheel_v2 actor.system.advantages.quintessence actor.system.advantages.paradox 18}}" data-action="quintessenceWheelClick" data-quintessenceid="{{actor.system.advantages.quintessence._id}}" data-paradoxid="{{actor.system.advantages.paradox._id}}"></span>
                    <span class="resource-value-step quintessence wheel-17" data-type="{{config.sheettype.mage}}" data-index="17" data-state="{{quintessenceWheel_v2 actor.system.advantages.quintessence actor.system.advantages.paradox 17}}" data-action="quintessenceWheelClick" data-quintessenceid="{{actor.system.advantages.quintessence._id}}" data-paradoxid="{{actor.system.advantages.paradox._id}}"></span>
                    <span class="resource-value-step quintessence wheel-16" data-type="{{config.sheettype.mage}}" data-index="16" data-state="{{quintessenceWheel_v2 actor.system.advantages.quintessence actor.system.advantages.paradox 16}}" data-action="quintessenceWheelClick" data-quintessenceid="{{actor.system.advantages.quintessence._id}}" data-paradoxid="{{actor.system.advantages.paradox._id}}"></span>
                    <span class="resource-value-step quintessence wheel-15" data-type="{{config.sheettype.mage}}" data-index="15" data-state="{{quintessenceWheel_v2 actor.system.advantages.quintessence actor.system.advantages.paradox 15}}" data-action="quintessenceWheelClick" data-quintessenceid="{{actor.system.advantages.quintessence._id}}" data-paradoxid="{{actor.system.advantages.paradox._id}}"></span>                
                </div>
                <div class="resource-counter" style="flex: 0 0 50%; -webkit-flex: 0 0 50%; position: relative;">
                    <span class="resource-value-step quintessence wheel-14" data-type="{{config.sheettype.mage}}" data-index="14" data-state="{{quintessenceWheel_v2 actor.system.advantages.quintessence actor.system.advantages.paradox 14}}" data-action="quintessenceWheelClick" data-quintessenceid="{{actor.system.advantages.quintessence._id}}" data-paradoxid="{{actor.system.advantages.paradox._id}}"></span>
                    <span class="resource-value-step quintessence wheel-13" data-type="{{config.sheettype.mage}}" data-index="13" data-state="{{quintessenceWheel_v2 actor.system.advantages.quintessence actor.system.advantages.paradox 13}}" data-action="quintessenceWheelClick" data-quintessenceid="{{actor.system.advantages.quintessence._id}}" data-paradoxid="{{actor.system.advantages.paradox._id}}"></span>
                    <span class="resource-value-step quintessence wheel-12" data-type="{{config.sheettype.mage}}" data-index="12" data-state="{{quintessenceWheel_v2 actor.system.advantages.quintessence actor.system.advantages.paradox 12}}" data-action="quintessenceWheelClick" data-quintessenceid="{{actor.system.advantages.quintessence._id}}" data-paradoxid="{{actor.system.advantages.paradox._id}}"></span>
                    <span class="resource-value-step quintessence wheel-11" data-type="{{config.sheettype.mage}}" data-index="11" data-state="{{quintessenceWheel_v2 actor.system.advantages.quintessence actor.system.advantages.paradox 11}}" data-action="quintessenceWheelClick" data-quintessenceid="{{actor.system.advantages.quintessence._id}}" data-paradoxid="{{actor.system.advantages.paradox._id}}"></span>
                    <span class="resource-value-step quintessence wheel-10" data-type="{{config.sheettype.mage}}" data-index="10" data-state="{{quintessenceWheel_v2 actor.system.advantages.quintessence actor.system.advantages.paradox 10}}" data-action="quintessenceWheelClick" data-quintessenceid="{{actor.system.advantages.quintessence._id}}" data-paradoxid="{{actor.system.advantages.paradox._id}}"></span>
                </div>
            </div>

            <div class="sheet-headline sheet-banner-small splatFont" style="margin-top: 10px;">
                <span class="sheet-banner-text">
                    <i class="fa fa-arrow-circle-up paradoxBtn pointer" aria-hidden="true" data-itemid="{{actor.system.advantages.paradox._id}}" data-field="temporary" data-value="1" data-action="quintessenceHandling"></i>
                    <span class="vrollable" data-type="{{config.sheettype.mage}}" data-key="paradox" data-noability="true" data-action="rollDice">
                        {{localize 'wod.advantages.paradox'}}
                    </span>
                    <i class="fa fa-arrow-circle-down paradoxBtn pointer" aria-hidden="true" data-itemid="{{actor.system.advantages.paradox._id}}" data-field="temporary" data-value="-1" data-action="quintessenceHandling"></i>
                </span>
            </div>
        </div>
    </div>
</div>
