<div class="pullLeft" style="display: flex; width: 320px; flex-direction: column;">
    <div class="area-box">
        <div class="bioInformationArea floating-label-group">
            {{#if locked}}
                <input class="sheet-infoValues" type="text" value="{{data.system.shade}}" autocomplete="off" autofocus required />
            {{else}}
                <input class="sheet-infoValues editable" name="system.variant.shade" type="text" value="{{data.system.variant.shade}}" data-name="data.system.variant.shade" data-dtype="String" autocomplete="off" autofocus required />
            {{/if}}
            <span class="floating-label">{{localize "wod.bio.orpheus.shade"}}</span>
        </div>

        <div class="bioInformationArea floating-label-group">
            {{#if locked}}
                <input class="sheet-infoValues" type="text" value="{{data.system.lament}}" autocomplete="off" autofocus required />
            {{else}}
                <input class="sheet-infoValues editable" name="system.variant.lament" type="text" value="{{data.system.variant.lament}}" data-name="data.system.variant.lament" data-dtype="String" autocomplete="off" autofocus required />
            {{/if}}
            <span class="floating-label">{{localize "wod.bio.orpheus.lament"}}</span>
        </div>

        <div class="bioInformationArea floating-label-group">
            {{#if locked}}
                <input class="sheet-infoValues" type="text" value="{{data.system.role}}" autocomplete="off" autofocus required />
            {{else}}
                <input class="sheet-infoValues editable" name="system.variant.role" type="text" value="{{data.system.variant.role}}" data-name="data.system.variant.role" data-dtype="String" autocomplete="off" autofocus required />
            {{/if}}
            <span class="floating-label">{{localize "wod.bio.orpheus.role"}}</span>
        </div>
    </div>
</div>