<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-state=""></i>
        {{localize 'wod.advantages.quintessence'}}
        <i class="fa fa-arrow-circle-down quintessenceBtn pointer" aria-hidden="true" data-state="Ψ"></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 data.system.quintessence data.system.paradox 0}}"></span>
        <span class="resource-value-step quintessence wheel-1" data-type="{{config.sheettype.mage}}" data-index="1" data-state="{{quintessenceWheel data.system.quintessence data.system.paradox 1}}"></span>
        <span class="resource-value-step quintessence wheel-2" data-type="{{config.sheettype.mage}}" data-index="2" data-state="{{quintessenceWheel data.system.quintessence data.system.paradox 2}}"></span>
        <span class="resource-value-step quintessence wheel-3" data-type="{{config.sheettype.mage}}" data-index="3" data-state="{{quintessenceWheel data.system.quintessence data.system.paradox 3}}"></span>
        <span class="resource-value-step quintessence wheel-4" data-type="{{config.sheettype.mage}}" data-index="4" data-state="{{quintessenceWheel data.system.quintessence data.system.paradox 4}}"></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 data.system.quintessence data.system.paradox 5}}"></span>
        <span class="resource-value-step quintessence wheel-6" data-type="{{config.sheettype.mage}}" data-index="6" data-state="{{quintessenceWheel data.system.quintessence data.system.paradox 6}}"></span>
        <span class="resource-value-step quintessence wheel-7" data-type="{{config.sheettype.mage}}" data-index="7" data-state="{{quintessenceWheel data.system.quintessence data.system.paradox 7}}"></span>
        <span class="resource-value-step quintessence wheel-8" data-type="{{config.sheettype.mage}}" data-index="8" data-state="{{quintessenceWheel data.system.quintessence data.system.paradox 8}}"></span>
        <span class="resource-value-step quintessence wheel-9" data-type="{{config.sheettype.mage}}" data-index="9" data-state="{{quintessenceWheel data.system.quintessence data.system.paradox 9}}"></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 data.system.quintessence data.system.paradox 19}}"></span>
        <span class="resource-value-step quintessence wheel-18" data-type="{{config.sheettype.mage}}" data-index="18" data-state="{{quintessenceWheel data.system.quintessence data.system.paradox 18}}"></span>
        <span class="resource-value-step quintessence wheel-17" data-type="{{config.sheettype.mage}}" data-index="17" data-state="{{quintessenceWheel data.system.quintessence data.system.paradox 17}}"></span>
        <span class="resource-value-step quintessence wheel-16" data-type="{{config.sheettype.mage}}" data-index="16" data-state="{{quintessenceWheel data.system.quintessence data.system.paradox 16}}"></span>
        <span class="resource-value-step quintessence wheel-15" data-type="{{config.sheettype.mage}}" data-index="15" data-state="{{quintessenceWheel data.system.quintessence data.system.paradox 15}}"></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 data.system.quintessence data.system.paradox 14}}"></span>
        <span class="resource-value-step quintessence wheel-13" data-type="{{config.sheettype.mage}}" data-index="13" data-state="{{quintessenceWheel data.system.quintessence data.system.paradox 13}}"></span>
        <span class="resource-value-step quintessence wheel-12" data-type="{{config.sheettype.mage}}" data-index="12" data-state="{{quintessenceWheel data.system.quintessence data.system.paradox 12}}"></span>
        <span class="resource-value-step quintessence wheel-11" data-type="{{config.sheettype.mage}}" data-index="11" data-state="{{quintessenceWheel data.system.quintessence data.system.paradox 11}}"></span>
        <span class="resource-value-step quintessence wheel-10" data-type="{{config.sheettype.mage}}" data-index="10" data-state="{{quintessenceWheel data.system.quintessence data.system.paradox 10}}"></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-state=""></i>
        <span class="vrollable" data-type="{{config.sheettype.mage}}" data-key="paradox" data-noability="true">
            {{localize 'wod.advantages.paradox'}}
        </span>
        <i class="fa fa-arrow-circle-down paradoxBtn pointer" aria-hidden="true" data-state="x"></i>
    </span>
</div>
