ff14.toolboxgaming.space
Open in
urlscan Pro
206.189.209.214
Public Scan
Submitted URL: http://ff14.toolboxgaming.space/
Effective URL: https://ff14.toolboxgaming.space/
Submission: On January 01 via api from US — Scanned from DE
Effective URL: https://ff14.toolboxgaming.space/
Submission: On January 01 via api from US — Scanned from DE
Form analysis
30 forms found in the DOM<form class="fields">
<div class="field-group label-info">
<label>label: </label>
<input type="text" name="label" value="Eden Playground" maxlength="300">
<a href="" class="update_all" data-field="label"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group group-info hide">
<label>layer group: </label>
<input type="text" name="group" value="Objects" maxlength="300">
<a href="" class="update_all" data-field="group"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group hide-label">
<label>
<input type="checkbox" name="hideLabel" maxlength="300">
<span>Hide Label?</span>
<a href="" class="update_all" data-field="hideLabel"><i class="material-icons">update_all</i></a>
</label>
</div>
<ul class="collapsible expandable">
<li class="style">
<div class="collapsible-header" tabindex="0">Styles</div>
<div class="collapsible-body">
<div class="field-group size-input hide">
<label>size (yawl*2): </label>
<input type="text" name="size" value="15" maxlength="300">
<a href="" class="update_all" data-field="size"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group width-input ">
<label>width (yawl*2): </label>
<input type="text" name="width" value="15" maxlength="300">
<a href="" class="update_all" data-field="width"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group height-input ">
<label>height (yawl*2): </label>
<input type="text" name="height" value="15" maxlength="300">
<a href="" class="update_all" data-field="height"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group background-image-input">
<label>background image (URL): </label>
<input type="text" name="backgroundImage" value="https://media.discordapp.net/attachments/600738460289990677/614360161422671873/Untitled.png?width=540&height=540" maxlength="300">
<a href="" class="update_all" data-field="backgroundImage"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group background-mode-input">
<label>Background Mode: </label>
<select name="backgroundMode" class="browser-default">
<option value="contained" selected="">Contained</option>
<option value="stretched">Stretched</option>
</select>
<a href="" class="update_all" data-field="backgroundMode"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group background-color-input">
<label>background color (hex/rgb(0,0,0)/rgba(0,0,0,1)): </label>
<input type="text" name="backgroundColor" value="#646d82" maxlength="300">
<a href="" class="update_all" data-field="backgroundColor"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group shape-input">
<label>Shape: </label>
<select name="shape" class="browser-default">
<option value="square" selected="">square</option>
<option value="circle">circle</option>
</select>
<a href="" class="update_all" data-field="shape"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group opacity-input">
<label>opacity (0-100): </label>
<input type="range" name="opacity" min="0" max="100" value="100" maxlength="300">
<input type="text" name="opacity" value="100" maxlength="300">
<a href="" class="update_all" data-field="opacity"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group animation-input">
<label>Animation: </label>
<select name="animation" class="browser-default">
</select>
<a href="" class="update_all" data-field="animation"><i class="material-icons">update_all</i></a>
</div>
</div>
</li>
<li class="position hide">
<div class="collapsible-header" tabindex="0">Position</div>
<div class="collapsible-body">
<div class="field-group posX-input">
<label>x: </label>
<input type="text" name="posX" value="0" maxlength="300">
<a href="" class="update_all" data-field="position"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group posY-input">
<label>y: </label>
<input type="text" name="posY" value="0" maxlength="300">
</div>
<div class="field-group layer-index">
<label class="tooltipped" data-tooltip="this decides the priority<br>which object appears on top of the other" data-position="right">Layer Index: </label>
<input type="text" name="layerIndex" value="0" maxlength="300">
<a href="" class="update_all" data-field="layerIndex"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group rotation-input hide">
<label>rotation (0 -> 360, 0 is South): </label>
<input type="range" name="rotation" min="0" max="360" value="0" maxlength="300">
<input type="text" name="rotation" value="0" maxlength="300">
<a href="" class="update_all" data-field="rotation"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group containable-input">
<label>
<input type="checkbox" name="isContainedWithinViewport" checked="" maxlength="300">
<span>Is contained within arena?</span>
</label>
</div>
<div class="field-group draggable-input">
<label>
<input type="checkbox" name="draggable" maxlength="300">
<span>Is draggable?</span>
</label>
</div>
</div>
</li>
<li class="outline">
<div class="collapsible-header" tabindex="0">Outline</div>
<div class="collapsible-body">
<div class="field-group">
<label>outline thickness (0 = none): </label>
<input type="text" name="outlineThickness" value="1" maxlength="300">
<a href="" class="update_all" data-field="outline"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group">
<label>outline color: </label>
<input type="text" name="outlineColor" value="#cc0000" maxlength="300">
</div>
<div class="field-group outline-style-input">
<label>outline style (solid/dashed/dotted/...): </label>
<input type="text" name="outlineStyle" value="solid" maxlength="300">
</div>
</div>
</li>
</ul>
</form>
<form class="fields">
<div class="field-group label-info">
<label>label: </label>
<input type="text" name="label" value="DRK" maxlength="300">
<a href="" class="update_all" data-field="label"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group group-info">
<label>layer group: </label>
<input type="text" name="group" value="Players" maxlength="300">
<a href="" class="update_all" data-field="group"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group hide-label">
<label>
<input type="checkbox" name="hideLabel" checked="" maxlength="300">
<span>Hide Label?</span>
<a href="" class="update_all" data-field="hideLabel"><i class="material-icons">update_all</i></a>
</label>
</div>
<ul class="collapsible expandable">
<li class="style">
<div class="collapsible-header" tabindex="0">Styles</div>
<div class="collapsible-body">
<div class="field-group class-selector">
<label>Class: </label>
<select name="player-class" class="browser-default">
<option value="">Custom</option>
<option value="Warrior">Warrior</option>
<option value="Dark Knight" selected="">Dark Knight</option>
<option value="Paladin">Paladin</option>
<option value="Gunbreaker">Gunbreaker</option>
<option value="White Mage">White Mage</option>
<option value="Scholar">Scholar</option>
<option value="Sage">Sage</option>
<option value="Astrologian">Astrologian</option>
<option value="Dragoon">Dragoon</option>
<option value="Reaper">Reaper</option>
<option value="Ninja">Ninja</option>
<option value="Samurai">Samurai</option>
<option value="Monk">Monk</option>
<option value="Bard">Bard</option>
<option value="Machinist">Machinist</option>
<option value="Dancer">Dancer</option>
<option value="Black Mage">Black Mage</option>
<option value="Red Mage">Red Mage</option>
<option value="Summoner">Summoner</option>
<option value="Blue Mage">Blue Mage</option>
</select>
<a href="" class="update_all" data-field="class"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group size-input">
<label>size (yawl*2): </label>
<input type="text" name="size" value="1" maxlength="300">
<a href="" class="update_all" data-field="size"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group width-input hide">
<label>width (yawl*2): </label>
<input type="text" name="width" value="1" maxlength="300">
<a href="" class="update_all" data-field="width"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group height-input hide">
<label>height (yawl*2): </label>
<input type="text" name="height" value="1" maxlength="300">
<a href="" class="update_all" data-field="height"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group background-image-input hide">
<label>background image (URL): </label>
<input type="text" name="backgroundImage" value="https://ff14.toolboxgaming.space/assets/images/darkknight.png" maxlength="300">
<a href="" class="update_all" data-field="backgroundImage"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group background-mode-input">
<label>Background Mode: </label>
<select name="backgroundMode" class="browser-default">
<option value="contained" selected="">Contained</option>
<option value="stretched">Stretched</option>
</select>
<a href="" class="update_all" data-field="backgroundMode"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group background-color-input">
<label>background color (hex/rgb(0,0,0)/rgba(0,0,0,1)): </label>
<input type="text" name="backgroundColor" value="transparent" maxlength="300">
<a href="" class="update_all" data-field="backgroundColor"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group shape-input">
<label>Shape: </label>
<select name="shape" class="browser-default">
<option value="square">square</option>
<option value="circle" selected="">circle</option>
</select>
<a href="" class="update_all" data-field="shape"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group opacity-input">
<label>opacity (0-100): </label>
<input type="range" name="opacity" min="0" max="100" value="100" maxlength="300">
<input type="text" name="opacity" value="100" maxlength="300">
<a href="" class="update_all" data-field="opacity"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group animation-input">
<label>Animation: </label>
<select name="animation" class="browser-default">
<option value="">--No animation--</option>
<option value="pulse">pulse</option>
<option value="blink">blink</option>
<option value="glow">glow</option>
</select>
<a href="" class="update_all" data-field="animation"><i class="material-icons">update_all</i></a>
</div>
</div>
</li>
<li class="position">
<div class="collapsible-header" tabindex="0">Position</div>
<div class="collapsible-body">
<div class="field-group posX-input">
<label>x: </label>
<input type="text" name="posX" value="7.45" maxlength="300">
<a href="" class="update_all" data-field="position"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group posY-input">
<label>y: </label>
<input type="text" name="posY" value="13.25" maxlength="300">
</div>
<div class="field-group layer-index">
<label class="tooltipped" data-tooltip="this decides the priority<br>which object appears on top of the other" data-position="right">Layer Index: </label>
<input type="text" name="layerIndex" value="30" maxlength="300">
<a href="" class="update_all" data-field="layerIndex"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group rotation-input hide">
<label>rotation (0 -> 360, 0 is South): </label>
<input type="range" name="rotation" min="0" max="360" value="0" maxlength="300">
<input type="text" name="rotation" value="0" maxlength="300">
<a href="" class="update_all" data-field="rotation"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group containable-input">
<label>
<input type="checkbox" name="isContainedWithinViewport" checked="" maxlength="300">
<span>Is contained within arena?</span>
</label>
</div>
<div class="field-group draggable-input">
<label>
<input type="checkbox" name="draggable" checked="" maxlength="300">
<span>Is draggable?</span>
</label>
</div>
</div>
</li>
<li class="outline">
<div class="collapsible-header" tabindex="0">Outline</div>
<div class="collapsible-body">
<div class="field-group">
<label>outline thickness (0 = none): </label>
<input type="text" name="outlineThickness" value="1" maxlength="300">
<a href="" class="update_all" data-field="outline"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group">
<label>outline color: </label>
<input type="text" name="outlineColor" value="rgba(0,0,0,0.3)" maxlength="300">
</div>
<div class="field-group outline-style-input">
<label>outline style (solid/dashed/dotted/...): </label>
<input type="text" name="outlineStyle" value="dashed" maxlength="300">
</div>
</div>
</li>
</ul>
<ul class="collapsible buff-icons">
<li>
<div class="collapsible-header" tabindex="0">Debuff Icons</div>
<div class="collapsible-body">
<div class="field-group browser-default">
<label>Icon 1 (URL): </label>
<a href="" class="search-icon" data-field="buffIcon1Url"><i class="material-icons">search</i></a>
<input type="text" name="buffIcon1Url" value="" maxlength="300">
<a href="" class="update_all" data-field="buffIcon1Url"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group browser-default">
<label>Icon 2 (URL): </label>
<a href="" class="search-icon" data-field="buffIcon2Url"><i class="material-icons">search</i></a>
<input type="text" name="buffIcon2Url" value="" maxlength="300">
<a href="" class="update_all" data-field="buffIcon2Url"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group browser-default">
<label>Icon 3 (URL): </label>
<a href="" class="search-icon" data-field="buffIcon3Url"><i class="material-icons">search</i></a>
<input type="text" name="buffIcon3Url" value="" maxlength="300">
<a href="" class="update_all" data-field="buffIcon3Url"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group browser-default">
<label>Icon 4 (URL): </label>
<a href="" class="search-icon" data-field="buffIcon4Url"><i class="material-icons">search</i></a>
<input type="text" name="buffIcon4Url" value="" maxlength="300">
<a href="" class="update_all" data-field="buffIcon4Url"><i class="material-icons">update_all</i></a>
</div>
</div>
</li>
</ul>
<ul class="collapsible marker-icon">
<li>
<div class="collapsible-header" tabindex="0">Marker</div>
<div class="collapsible-body">
<div class="field-group browser-default">
<label class="tooltipped" data-tooltip="Designed by Denmo">Marker: </label>
<select name="marker" class="browser-default">
<option value="" selected="">--NO MARKER--</option>
<option value="custom">--CUSTOM MARKER--</option>
<optgroup label="Common">
<option value="target">Basic Target</option>
<option value="sharpTarget">Sharp Target</option>
<option value="tankDanger">Tank Danger</option>
<option value="tankWarning">Tank Warning</option>
<option value="earthShaker">Earth Shaker</option>
<option value="gaze">Gaze</option>
<option value="minusMagnet">Minus Magnet</option>
<option value="plusMagnet">Plus Magnet</option>
<option value="accelerationBomb">Acceleration Bomb</option>
</optgroup>
<optgroup label="Limit Cut">
<option value="limitCut1Red">Limit Cut 1 Red</option>
<option value="limitCut1Blue">Limit Cut 1 Blue</option>
<option value="limitCut2Red">Limit Cut 2 Red</option>
<option value="limitCut2Blue">Limit Cut 2 Blue</option>
<option value="limitCut3Red">Limit Cut 3 Red</option>
<option value="limitCut3Blue">Limit Cut 3 Blue</option>
<option value="limitCut4Red">Limit Cut 4 Red</option>
<option value="limitCut4Blue">Limit Cut 4 Blue</option>
<option value="limitCut5Red">Limit Cut 5 Red</option>
<option value="limitCut5Blue">Limit Cut 5 Blue</option>
<option value="limitCut6Red">Limit Cut 6 Red</option>
<option value="limitCut6Blue">Limit Cut 6 Blue</option>
<option value="limitCut7Red">Limit Cut 7 Red</option>
<option value="limitCut7Blue">Limit Cut 7 Blue</option>
<option value="limitCut8Red">Limit Cut 8 Red</option>
<option value="limitCut8Blue">Limit Cut 8 Blue</option>
</optgroup>
<optgroup label="DSR">
<option value="dsrX">X icon</option>
<option value="dsrO">O icon</option>
<option value="dsrSquare">Square icon</option>
<option value="dsrTriangle">Triangle icon</option>
</optgroup>
</select>
<a href="" class="update_all" data-field="marker"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group browser-default customMarker-input hide">
<label>Custom Marker URL: </label>
<a href="" class="search-icon" data-field="customMarker"><i class="material-icons">search</i></a>
<input type="text" name="customMarker" value="" maxlength="300">
<a href="" class="update_all" data-field="customMarker"><i class="material-icons">update_all</i></a>
</div>
</div>
</li>
</ul>
</form>
<form class="fields">
<div class="field-group label-info" style="display: none;">
<label>label: </label>
<input type="text" name="label" value="" maxlength="300">
<a href="" class="update_all" data-field="label"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group group-info hide">
<label>layer group: </label>
<input type="text" name="group" value="Objects" maxlength="300">
<a href="" class="update_all" data-field="group"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group hide-label" style="display: none;">
<label>
<input type="checkbox" name="hideLabel" maxlength="300">
<span>Hide Label?</span>
<a href="" class="update_all" data-field="hideLabel"><i class="material-icons">update_all</i></a>
</label>
</div>
<ul class="collapsible expandable">
<li class="style">
<div class="collapsible-header" tabindex="0">Styles</div>
<div class="collapsible-body">
<div class="field-group size-input hide">
<label>size (yawl*2): </label>
<input type="text" name="size" value="2" maxlength="300">
<a href="" class="update_all" data-field="size"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group width-input ">
<label>width (yawl*2): </label>
<input type="text" name="width" value="2" maxlength="300">
<a href="" class="update_all" data-field="width"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group height-input ">
<label>height (yawl*2): </label>
<input type="text" name="height" value="2" maxlength="300">
<a href="" class="update_all" data-field="height"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group background-image-input">
<label>background image (URL): </label>
<input type="text" name="backgroundImage" value="" maxlength="300">
<a href="" class="update_all" data-field="backgroundImage"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group background-mode-input">
<label>Background Mode: </label>
<select name="backgroundMode" class="browser-default">
<option value="contained" selected="">Contained</option>
<option value="stretched">Stretched</option>
</select>
<a href="" class="update_all" data-field="backgroundMode"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group background-color-input">
<label>background color (hex/rgb(0,0,0)/rgba(0,0,0,1)): </label>
<input type="text" name="backgroundColor" value="#cc0000" maxlength="300">
<a href="" class="update_all" data-field="backgroundColor"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group shape-input">
<label>Shape: </label>
<select name="shape" class="browser-default">
<option value="square">square</option>
<option value="circle" selected="">circle</option>
</select>
<a href="" class="update_all" data-field="shape"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group opacity-input">
<label>opacity (0-100): </label>
<input type="range" name="opacity" min="0" max="100" value="0" maxlength="300">
<input type="text" name="opacity" value="0" maxlength="300">
<a href="" class="update_all" data-field="opacity"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group animation-input">
<label>Animation: </label>
<select name="animation" class="browser-default">
</select>
<a href="" class="update_all" data-field="animation"><i class="material-icons">update_all</i></a>
</div>
</div>
</li>
<li class="position">
<div class="collapsible-header" tabindex="0">Position</div>
<div class="collapsible-body">
<div class="field-group posX-input hide">
<label>x: </label>
<input type="text" name="posX" value="7" maxlength="300">
<a href="" class="update_all" data-field="position"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group posY-input hide">
<label>y: </label>
<input type="text" name="posY" value="13" maxlength="300">
</div>
<div class="field-group layer-index" style="display: none;">
<label class="tooltipped" data-tooltip="this decides the priority<br>which object appears on top of the other" data-position="right">Layer Index: </label>
<input type="text" name="layerIndex" value="-1" maxlength="300">
<a href="" class="update_all" data-field="layerIndex"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group rotation-input ">
<label>rotation (0 -> 360, 0 is South): </label>
<input type="range" name="rotation" min="0" max="360" value="180" maxlength="300">
<input type="text" name="rotation" value="180" maxlength="300">
<a href="" class="update_all" data-field="rotation"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group containable-input hide">
<label>
<input type="checkbox" name="isContainedWithinViewport" maxlength="300">
<span>Is contained within arena?</span>
</label>
</div>
<div class="field-group draggable-input hide">
<label>
<input type="checkbox" name="draggable" maxlength="300">
<span>Is draggable?</span>
</label>
</div>
</div>
</li>
<li class="outline">
<div class="collapsible-header" tabindex="0">Outline</div>
<div class="collapsible-body">
<div class="field-group">
<label>outline thickness (0 = none): </label>
<input type="text" name="outlineThickness" value="0" maxlength="300">
<a href="" class="update_all" data-field="outline"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group">
<label>outline color: </label>
<input type="text" name="outlineColor" value="rgba(0,0,0,0.3)" maxlength="300">
</div>
<div class="field-group outline-style-input">
<label>outline style (solid/dashed/dotted/...): </label>
<input type="text" name="outlineStyle" value="dashed" maxlength="300">
</div>
</div>
</li>
</ul>
</form>
<form class="fields">
<div class="field-group label-info">
<label>label: </label>
<input type="text" name="label" value="GNB" maxlength="300">
<a href="" class="update_all" data-field="label"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group group-info">
<label>layer group: </label>
<input type="text" name="group" value="Players" maxlength="300">
<a href="" class="update_all" data-field="group"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group hide-label">
<label>
<input type="checkbox" name="hideLabel" checked="" maxlength="300">
<span>Hide Label?</span>
<a href="" class="update_all" data-field="hideLabel"><i class="material-icons">update_all</i></a>
</label>
</div>
<ul class="collapsible expandable">
<li class="style">
<div class="collapsible-header" tabindex="0">Styles</div>
<div class="collapsible-body">
<div class="field-group class-selector">
<label>Class: </label>
<select name="player-class" class="browser-default">
<option value="">Custom</option>
<option value="Warrior">Warrior</option>
<option value="Dark Knight">Dark Knight</option>
<option value="Paladin">Paladin</option>
<option value="Gunbreaker" selected="">Gunbreaker</option>
<option value="White Mage">White Mage</option>
<option value="Scholar">Scholar</option>
<option value="Sage">Sage</option>
<option value="Astrologian">Astrologian</option>
<option value="Dragoon">Dragoon</option>
<option value="Reaper">Reaper</option>
<option value="Ninja">Ninja</option>
<option value="Samurai">Samurai</option>
<option value="Monk">Monk</option>
<option value="Bard">Bard</option>
<option value="Machinist">Machinist</option>
<option value="Dancer">Dancer</option>
<option value="Black Mage">Black Mage</option>
<option value="Red Mage">Red Mage</option>
<option value="Summoner">Summoner</option>
<option value="Blue Mage">Blue Mage</option>
</select>
<a href="" class="update_all" data-field="class"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group size-input">
<label>size (yawl*2): </label>
<input type="text" name="size" value="1" maxlength="300">
<a href="" class="update_all" data-field="size"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group width-input hide">
<label>width (yawl*2): </label>
<input type="text" name="width" value="1" maxlength="300">
<a href="" class="update_all" data-field="width"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group height-input hide">
<label>height (yawl*2): </label>
<input type="text" name="height" value="1" maxlength="300">
<a href="" class="update_all" data-field="height"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group background-image-input hide">
<label>background image (URL): </label>
<input type="text" name="backgroundImage" value="https://ff14.toolboxgaming.space/assets/images/gunbreaker.png" maxlength="300">
<a href="" class="update_all" data-field="backgroundImage"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group background-mode-input">
<label>Background Mode: </label>
<select name="backgroundMode" class="browser-default">
<option value="contained" selected="">Contained</option>
<option value="stretched">Stretched</option>
</select>
<a href="" class="update_all" data-field="backgroundMode"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group background-color-input">
<label>background color (hex/rgb(0,0,0)/rgba(0,0,0,1)): </label>
<input type="text" name="backgroundColor" value="transparent" maxlength="300">
<a href="" class="update_all" data-field="backgroundColor"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group shape-input">
<label>Shape: </label>
<select name="shape" class="browser-default">
<option value="square">square</option>
<option value="circle" selected="">circle</option>
</select>
<a href="" class="update_all" data-field="shape"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group opacity-input">
<label>opacity (0-100): </label>
<input type="range" name="opacity" min="0" max="100" value="100" maxlength="300">
<input type="text" name="opacity" value="100" maxlength="300">
<a href="" class="update_all" data-field="opacity"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group animation-input">
<label>Animation: </label>
<select name="animation" class="browser-default">
<option value="">--No animation--</option>
<option value="pulse">pulse</option>
<option value="blink">blink</option>
<option value="glow">glow</option>
</select>
<a href="" class="update_all" data-field="animation"><i class="material-icons">update_all</i></a>
</div>
</div>
</li>
<li class="position">
<div class="collapsible-header" tabindex="0">Position</div>
<div class="collapsible-body">
<div class="field-group posX-input">
<label>x: </label>
<input type="text" name="posX" value="6.7" maxlength="300">
<a href="" class="update_all" data-field="position"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group posY-input">
<label>y: </label>
<input type="text" name="posY" value="12.95" maxlength="300">
</div>
<div class="field-group layer-index">
<label class="tooltipped" data-tooltip="this decides the priority<br>which object appears on top of the other" data-position="right">Layer Index: </label>
<input type="text" name="layerIndex" value="30" maxlength="300">
<a href="" class="update_all" data-field="layerIndex"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group rotation-input hide">
<label>rotation (0 -> 360, 0 is South): </label>
<input type="range" name="rotation" min="0" max="360" value="0" maxlength="300">
<input type="text" name="rotation" value="0" maxlength="300">
<a href="" class="update_all" data-field="rotation"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group containable-input">
<label>
<input type="checkbox" name="isContainedWithinViewport" checked="" maxlength="300">
<span>Is contained within arena?</span>
</label>
</div>
<div class="field-group draggable-input">
<label>
<input type="checkbox" name="draggable" checked="" maxlength="300">
<span>Is draggable?</span>
</label>
</div>
</div>
</li>
<li class="outline">
<div class="collapsible-header" tabindex="0">Outline</div>
<div class="collapsible-body">
<div class="field-group">
<label>outline thickness (0 = none): </label>
<input type="text" name="outlineThickness" value="1" maxlength="300">
<a href="" class="update_all" data-field="outline"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group">
<label>outline color: </label>
<input type="text" name="outlineColor" value="rgba(0,0,0,0.3)" maxlength="300">
</div>
<div class="field-group outline-style-input">
<label>outline style (solid/dashed/dotted/...): </label>
<input type="text" name="outlineStyle" value="dashed" maxlength="300">
</div>
</div>
</li>
</ul>
<ul class="collapsible buff-icons">
<li>
<div class="collapsible-header" tabindex="0">Debuff Icons</div>
<div class="collapsible-body">
<div class="field-group browser-default">
<label>Icon 1 (URL): </label>
<a href="" class="search-icon" data-field="buffIcon1Url"><i class="material-icons">search</i></a>
<input type="text" name="buffIcon1Url" value="" maxlength="300">
<a href="" class="update_all" data-field="buffIcon1Url"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group browser-default">
<label>Icon 2 (URL): </label>
<a href="" class="search-icon" data-field="buffIcon2Url"><i class="material-icons">search</i></a>
<input type="text" name="buffIcon2Url" value="" maxlength="300">
<a href="" class="update_all" data-field="buffIcon2Url"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group browser-default">
<label>Icon 3 (URL): </label>
<a href="" class="search-icon" data-field="buffIcon3Url"><i class="material-icons">search</i></a>
<input type="text" name="buffIcon3Url" value="" maxlength="300">
<a href="" class="update_all" data-field="buffIcon3Url"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group browser-default">
<label>Icon 4 (URL): </label>
<a href="" class="search-icon" data-field="buffIcon4Url"><i class="material-icons">search</i></a>
<input type="text" name="buffIcon4Url" value="" maxlength="300">
<a href="" class="update_all" data-field="buffIcon4Url"><i class="material-icons">update_all</i></a>
</div>
</div>
</li>
</ul>
<ul class="collapsible marker-icon">
<li>
<div class="collapsible-header" tabindex="0">Marker</div>
<div class="collapsible-body">
<div class="field-group browser-default">
<label class="tooltipped" data-tooltip="Designed by Denmo">Marker: </label>
<select name="marker" class="browser-default">
<option value="" selected="">--NO MARKER--</option>
<option value="custom">--CUSTOM MARKER--</option>
<optgroup label="Common">
<option value="target">Basic Target</option>
<option value="sharpTarget">Sharp Target</option>
<option value="tankDanger">Tank Danger</option>
<option value="tankWarning">Tank Warning</option>
<option value="earthShaker">Earth Shaker</option>
<option value="gaze">Gaze</option>
<option value="minusMagnet">Minus Magnet</option>
<option value="plusMagnet">Plus Magnet</option>
<option value="accelerationBomb">Acceleration Bomb</option>
</optgroup>
<optgroup label="Limit Cut">
<option value="limitCut1Red">Limit Cut 1 Red</option>
<option value="limitCut1Blue">Limit Cut 1 Blue</option>
<option value="limitCut2Red">Limit Cut 2 Red</option>
<option value="limitCut2Blue">Limit Cut 2 Blue</option>
<option value="limitCut3Red">Limit Cut 3 Red</option>
<option value="limitCut3Blue">Limit Cut 3 Blue</option>
<option value="limitCut4Red">Limit Cut 4 Red</option>
<option value="limitCut4Blue">Limit Cut 4 Blue</option>
<option value="limitCut5Red">Limit Cut 5 Red</option>
<option value="limitCut5Blue">Limit Cut 5 Blue</option>
<option value="limitCut6Red">Limit Cut 6 Red</option>
<option value="limitCut6Blue">Limit Cut 6 Blue</option>
<option value="limitCut7Red">Limit Cut 7 Red</option>
<option value="limitCut7Blue">Limit Cut 7 Blue</option>
<option value="limitCut8Red">Limit Cut 8 Red</option>
<option value="limitCut8Blue">Limit Cut 8 Blue</option>
</optgroup>
<optgroup label="DSR">
<option value="dsrX">X icon</option>
<option value="dsrO">O icon</option>
<option value="dsrSquare">Square icon</option>
<option value="dsrTriangle">Triangle icon</option>
</optgroup>
</select>
<a href="" class="update_all" data-field="marker"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group browser-default customMarker-input hide">
<label>Custom Marker URL: </label>
<a href="" class="search-icon" data-field="customMarker"><i class="material-icons">search</i></a>
<input type="text" name="customMarker" value="" maxlength="300">
<a href="" class="update_all" data-field="customMarker"><i class="material-icons">update_all</i></a>
</div>
</div>
</li>
</ul>
</form>
<form class="fields">
<div class="field-group label-info" style="display: none;">
<label>label: </label>
<input type="text" name="label" value="" maxlength="300">
<a href="" class="update_all" data-field="label"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group group-info hide">
<label>layer group: </label>
<input type="text" name="group" value="Objects" maxlength="300">
<a href="" class="update_all" data-field="group"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group hide-label" style="display: none;">
<label>
<input type="checkbox" name="hideLabel" maxlength="300">
<span>Hide Label?</span>
<a href="" class="update_all" data-field="hideLabel"><i class="material-icons">update_all</i></a>
</label>
</div>
<ul class="collapsible expandable">
<li class="style">
<div class="collapsible-header" tabindex="0">Styles</div>
<div class="collapsible-body">
<div class="field-group size-input hide">
<label>size (yawl*2): </label>
<input type="text" name="size" value="2" maxlength="300">
<a href="" class="update_all" data-field="size"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group width-input ">
<label>width (yawl*2): </label>
<input type="text" name="width" value="2" maxlength="300">
<a href="" class="update_all" data-field="width"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group height-input ">
<label>height (yawl*2): </label>
<input type="text" name="height" value="2" maxlength="300">
<a href="" class="update_all" data-field="height"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group background-image-input">
<label>background image (URL): </label>
<input type="text" name="backgroundImage" value="" maxlength="300">
<a href="" class="update_all" data-field="backgroundImage"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group background-mode-input">
<label>Background Mode: </label>
<select name="backgroundMode" class="browser-default">
<option value="contained" selected="">Contained</option>
<option value="stretched">Stretched</option>
</select>
<a href="" class="update_all" data-field="backgroundMode"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group background-color-input">
<label>background color (hex/rgb(0,0,0)/rgba(0,0,0,1)): </label>
<input type="text" name="backgroundColor" value="#cc0000" maxlength="300">
<a href="" class="update_all" data-field="backgroundColor"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group shape-input">
<label>Shape: </label>
<select name="shape" class="browser-default">
<option value="square">square</option>
<option value="circle" selected="">circle</option>
</select>
<a href="" class="update_all" data-field="shape"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group opacity-input">
<label>opacity (0-100): </label>
<input type="range" name="opacity" min="0" max="100" value="0" maxlength="300">
<input type="text" name="opacity" value="0" maxlength="300">
<a href="" class="update_all" data-field="opacity"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group animation-input">
<label>Animation: </label>
<select name="animation" class="browser-default">
</select>
<a href="" class="update_all" data-field="animation"><i class="material-icons">update_all</i></a>
</div>
</div>
</li>
<li class="position">
<div class="collapsible-header" tabindex="0">Position</div>
<div class="collapsible-body">
<div class="field-group posX-input hide">
<label>x: </label>
<input type="text" name="posX" value="7" maxlength="300">
<a href="" class="update_all" data-field="position"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group posY-input hide">
<label>y: </label>
<input type="text" name="posY" value="13" maxlength="300">
</div>
<div class="field-group layer-index" style="display: none;">
<label class="tooltipped" data-tooltip="this decides the priority<br>which object appears on top of the other" data-position="right">Layer Index: </label>
<input type="text" name="layerIndex" value="-1" maxlength="300">
<a href="" class="update_all" data-field="layerIndex"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group rotation-input ">
<label>rotation (0 -> 360, 0 is South): </label>
<input type="range" name="rotation" min="0" max="360" value="180" maxlength="300">
<input type="text" name="rotation" value="180" maxlength="300">
<a href="" class="update_all" data-field="rotation"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group containable-input hide">
<label>
<input type="checkbox" name="isContainedWithinViewport" maxlength="300">
<span>Is contained within arena?</span>
</label>
</div>
<div class="field-group draggable-input hide">
<label>
<input type="checkbox" name="draggable" maxlength="300">
<span>Is draggable?</span>
</label>
</div>
</div>
</li>
<li class="outline">
<div class="collapsible-header" tabindex="0">Outline</div>
<div class="collapsible-body">
<div class="field-group">
<label>outline thickness (0 = none): </label>
<input type="text" name="outlineThickness" value="0" maxlength="300">
<a href="" class="update_all" data-field="outline"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group">
<label>outline color: </label>
<input type="text" name="outlineColor" value="rgba(0,0,0,0.3)" maxlength="300">
</div>
<div class="field-group outline-style-input">
<label>outline style (solid/dashed/dotted/...): </label>
<input type="text" name="outlineStyle" value="dashed" maxlength="300">
</div>
</div>
</li>
</ul>
</form>
<form class="fields">
<div class="field-group label-info">
<label>label: </label>
<input type="text" name="label" value="WHM" maxlength="300">
<a href="" class="update_all" data-field="label"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group group-info">
<label>layer group: </label>
<input type="text" name="group" value="Players" maxlength="300">
<a href="" class="update_all" data-field="group"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group hide-label">
<label>
<input type="checkbox" name="hideLabel" checked="" maxlength="300">
<span>Hide Label?</span>
<a href="" class="update_all" data-field="hideLabel"><i class="material-icons">update_all</i></a>
</label>
</div>
<ul class="collapsible expandable">
<li class="style">
<div class="collapsible-header" tabindex="0">Styles</div>
<div class="collapsible-body">
<div class="field-group class-selector">
<label>Class: </label>
<select name="player-class" class="browser-default">
<option value="">Custom</option>
<option value="Warrior">Warrior</option>
<option value="Dark Knight">Dark Knight</option>
<option value="Paladin">Paladin</option>
<option value="Gunbreaker">Gunbreaker</option>
<option value="White Mage" selected="">White Mage</option>
<option value="Scholar">Scholar</option>
<option value="Sage">Sage</option>
<option value="Astrologian">Astrologian</option>
<option value="Dragoon">Dragoon</option>
<option value="Reaper">Reaper</option>
<option value="Ninja">Ninja</option>
<option value="Samurai">Samurai</option>
<option value="Monk">Monk</option>
<option value="Bard">Bard</option>
<option value="Machinist">Machinist</option>
<option value="Dancer">Dancer</option>
<option value="Black Mage">Black Mage</option>
<option value="Red Mage">Red Mage</option>
<option value="Summoner">Summoner</option>
<option value="Blue Mage">Blue Mage</option>
</select>
<a href="" class="update_all" data-field="class"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group size-input">
<label>size (yawl*2): </label>
<input type="text" name="size" value="1" maxlength="300">
<a href="" class="update_all" data-field="size"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group width-input hide">
<label>width (yawl*2): </label>
<input type="text" name="width" value="1" maxlength="300">
<a href="" class="update_all" data-field="width"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group height-input hide">
<label>height (yawl*2): </label>
<input type="text" name="height" value="1" maxlength="300">
<a href="" class="update_all" data-field="height"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group background-image-input hide">
<label>background image (URL): </label>
<input type="text" name="backgroundImage" value="https://ff14.toolboxgaming.space/assets/images/whitemage.png" maxlength="300">
<a href="" class="update_all" data-field="backgroundImage"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group background-mode-input">
<label>Background Mode: </label>
<select name="backgroundMode" class="browser-default">
<option value="contained" selected="">Contained</option>
<option value="stretched">Stretched</option>
</select>
<a href="" class="update_all" data-field="backgroundMode"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group background-color-input">
<label>background color (hex/rgb(0,0,0)/rgba(0,0,0,1)): </label>
<input type="text" name="backgroundColor" value="transparent" maxlength="300">
<a href="" class="update_all" data-field="backgroundColor"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group shape-input">
<label>Shape: </label>
<select name="shape" class="browser-default">
<option value="square">square</option>
<option value="circle" selected="">circle</option>
</select>
<a href="" class="update_all" data-field="shape"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group opacity-input">
<label>opacity (0-100): </label>
<input type="range" name="opacity" min="0" max="100" value="100" maxlength="300">
<input type="text" name="opacity" value="100" maxlength="300">
<a href="" class="update_all" data-field="opacity"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group animation-input">
<label>Animation: </label>
<select name="animation" class="browser-default">
<option value="">--No animation--</option>
<option value="pulse">pulse</option>
<option value="blink">blink</option>
<option value="glow">glow</option>
</select>
<a href="" class="update_all" data-field="animation"><i class="material-icons">update_all</i></a>
</div>
</div>
</li>
<li class="position">
<div class="collapsible-header" tabindex="0">Position</div>
<div class="collapsible-body">
<div class="field-group posX-input">
<label>x: </label>
<input type="text" name="posX" value="7.2" maxlength="300">
<a href="" class="update_all" data-field="position"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group posY-input">
<label>y: </label>
<input type="text" name="posY" value="12.1" maxlength="300">
</div>
<div class="field-group layer-index">
<label class="tooltipped" data-tooltip="this decides the priority<br>which object appears on top of the other" data-position="right">Layer Index: </label>
<input type="text" name="layerIndex" value="30" maxlength="300">
<a href="" class="update_all" data-field="layerIndex"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group rotation-input hide">
<label>rotation (0 -> 360, 0 is South): </label>
<input type="range" name="rotation" min="0" max="360" value="0" maxlength="300">
<input type="text" name="rotation" value="0" maxlength="300">
<a href="" class="update_all" data-field="rotation"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group containable-input">
<label>
<input type="checkbox" name="isContainedWithinViewport" checked="" maxlength="300">
<span>Is contained within arena?</span>
</label>
</div>
<div class="field-group draggable-input">
<label>
<input type="checkbox" name="draggable" checked="" maxlength="300">
<span>Is draggable?</span>
</label>
</div>
</div>
</li>
<li class="outline">
<div class="collapsible-header" tabindex="0">Outline</div>
<div class="collapsible-body">
<div class="field-group">
<label>outline thickness (0 = none): </label>
<input type="text" name="outlineThickness" value="1" maxlength="300">
<a href="" class="update_all" data-field="outline"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group">
<label>outline color: </label>
<input type="text" name="outlineColor" value="rgba(0,0,0,0.3)" maxlength="300">
</div>
<div class="field-group outline-style-input">
<label>outline style (solid/dashed/dotted/...): </label>
<input type="text" name="outlineStyle" value="dashed" maxlength="300">
</div>
</div>
</li>
</ul>
<ul class="collapsible buff-icons">
<li>
<div class="collapsible-header" tabindex="0">Debuff Icons</div>
<div class="collapsible-body">
<div class="field-group browser-default">
<label>Icon 1 (URL): </label>
<a href="" class="search-icon" data-field="buffIcon1Url"><i class="material-icons">search</i></a>
<input type="text" name="buffIcon1Url" value="" maxlength="300">
<a href="" class="update_all" data-field="buffIcon1Url"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group browser-default">
<label>Icon 2 (URL): </label>
<a href="" class="search-icon" data-field="buffIcon2Url"><i class="material-icons">search</i></a>
<input type="text" name="buffIcon2Url" value="" maxlength="300">
<a href="" class="update_all" data-field="buffIcon2Url"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group browser-default">
<label>Icon 3 (URL): </label>
<a href="" class="search-icon" data-field="buffIcon3Url"><i class="material-icons">search</i></a>
<input type="text" name="buffIcon3Url" value="" maxlength="300">
<a href="" class="update_all" data-field="buffIcon3Url"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group browser-default">
<label>Icon 4 (URL): </label>
<a href="" class="search-icon" data-field="buffIcon4Url"><i class="material-icons">search</i></a>
<input type="text" name="buffIcon4Url" value="" maxlength="300">
<a href="" class="update_all" data-field="buffIcon4Url"><i class="material-icons">update_all</i></a>
</div>
</div>
</li>
</ul>
<ul class="collapsible marker-icon">
<li>
<div class="collapsible-header" tabindex="0">Marker</div>
<div class="collapsible-body">
<div class="field-group browser-default">
<label class="tooltipped" data-tooltip="Designed by Denmo">Marker: </label>
<select name="marker" class="browser-default">
<option value="" selected="">--NO MARKER--</option>
<option value="custom">--CUSTOM MARKER--</option>
<optgroup label="Common">
<option value="target">Basic Target</option>
<option value="sharpTarget">Sharp Target</option>
<option value="tankDanger">Tank Danger</option>
<option value="tankWarning">Tank Warning</option>
<option value="earthShaker">Earth Shaker</option>
<option value="gaze">Gaze</option>
<option value="minusMagnet">Minus Magnet</option>
<option value="plusMagnet">Plus Magnet</option>
<option value="accelerationBomb">Acceleration Bomb</option>
</optgroup>
<optgroup label="Limit Cut">
<option value="limitCut1Red">Limit Cut 1 Red</option>
<option value="limitCut1Blue">Limit Cut 1 Blue</option>
<option value="limitCut2Red">Limit Cut 2 Red</option>
<option value="limitCut2Blue">Limit Cut 2 Blue</option>
<option value="limitCut3Red">Limit Cut 3 Red</option>
<option value="limitCut3Blue">Limit Cut 3 Blue</option>
<option value="limitCut4Red">Limit Cut 4 Red</option>
<option value="limitCut4Blue">Limit Cut 4 Blue</option>
<option value="limitCut5Red">Limit Cut 5 Red</option>
<option value="limitCut5Blue">Limit Cut 5 Blue</option>
<option value="limitCut6Red">Limit Cut 6 Red</option>
<option value="limitCut6Blue">Limit Cut 6 Blue</option>
<option value="limitCut7Red">Limit Cut 7 Red</option>
<option value="limitCut7Blue">Limit Cut 7 Blue</option>
<option value="limitCut8Red">Limit Cut 8 Red</option>
<option value="limitCut8Blue">Limit Cut 8 Blue</option>
</optgroup>
<optgroup label="DSR">
<option value="dsrX">X icon</option>
<option value="dsrO">O icon</option>
<option value="dsrSquare">Square icon</option>
<option value="dsrTriangle">Triangle icon</option>
</optgroup>
</select>
<a href="" class="update_all" data-field="marker"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group browser-default customMarker-input hide">
<label>Custom Marker URL: </label>
<a href="" class="search-icon" data-field="customMarker"><i class="material-icons">search</i></a>
<input type="text" name="customMarker" value="" maxlength="300">
<a href="" class="update_all" data-field="customMarker"><i class="material-icons">update_all</i></a>
</div>
</div>
</li>
</ul>
</form>
<form class="fields">
<div class="field-group label-info" style="display: none;">
<label>label: </label>
<input type="text" name="label" value="" maxlength="300">
<a href="" class="update_all" data-field="label"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group group-info hide">
<label>layer group: </label>
<input type="text" name="group" value="Objects" maxlength="300">
<a href="" class="update_all" data-field="group"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group hide-label" style="display: none;">
<label>
<input type="checkbox" name="hideLabel" maxlength="300">
<span>Hide Label?</span>
<a href="" class="update_all" data-field="hideLabel"><i class="material-icons">update_all</i></a>
</label>
</div>
<ul class="collapsible expandable">
<li class="style">
<div class="collapsible-header" tabindex="0">Styles</div>
<div class="collapsible-body">
<div class="field-group size-input hide">
<label>size (yawl*2): </label>
<input type="text" name="size" value="2" maxlength="300">
<a href="" class="update_all" data-field="size"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group width-input ">
<label>width (yawl*2): </label>
<input type="text" name="width" value="2" maxlength="300">
<a href="" class="update_all" data-field="width"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group height-input ">
<label>height (yawl*2): </label>
<input type="text" name="height" value="2" maxlength="300">
<a href="" class="update_all" data-field="height"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group background-image-input">
<label>background image (URL): </label>
<input type="text" name="backgroundImage" value="" maxlength="300">
<a href="" class="update_all" data-field="backgroundImage"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group background-mode-input">
<label>Background Mode: </label>
<select name="backgroundMode" class="browser-default">
<option value="contained" selected="">Contained</option>
<option value="stretched">Stretched</option>
</select>
<a href="" class="update_all" data-field="backgroundMode"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group background-color-input">
<label>background color (hex/rgb(0,0,0)/rgba(0,0,0,1)): </label>
<input type="text" name="backgroundColor" value="#cc0000" maxlength="300">
<a href="" class="update_all" data-field="backgroundColor"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group shape-input">
<label>Shape: </label>
<select name="shape" class="browser-default">
<option value="square">square</option>
<option value="circle" selected="">circle</option>
</select>
<a href="" class="update_all" data-field="shape"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group opacity-input">
<label>opacity (0-100): </label>
<input type="range" name="opacity" min="0" max="100" value="0" maxlength="300">
<input type="text" name="opacity" value="0" maxlength="300">
<a href="" class="update_all" data-field="opacity"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group animation-input">
<label>Animation: </label>
<select name="animation" class="browser-default">
</select>
<a href="" class="update_all" data-field="animation"><i class="material-icons">update_all</i></a>
</div>
</div>
</li>
<li class="position">
<div class="collapsible-header" tabindex="0">Position</div>
<div class="collapsible-body">
<div class="field-group posX-input hide">
<label>x: </label>
<input type="text" name="posX" value="7" maxlength="300">
<a href="" class="update_all" data-field="position"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group posY-input hide">
<label>y: </label>
<input type="text" name="posY" value="13" maxlength="300">
</div>
<div class="field-group layer-index" style="display: none;">
<label class="tooltipped" data-tooltip="this decides the priority<br>which object appears on top of the other" data-position="right">Layer Index: </label>
<input type="text" name="layerIndex" value="-1" maxlength="300">
<a href="" class="update_all" data-field="layerIndex"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group rotation-input ">
<label>rotation (0 -> 360, 0 is South): </label>
<input type="range" name="rotation" min="0" max="360" value="180" maxlength="300">
<input type="text" name="rotation" value="180" maxlength="300">
<a href="" class="update_all" data-field="rotation"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group containable-input hide">
<label>
<input type="checkbox" name="isContainedWithinViewport" maxlength="300">
<span>Is contained within arena?</span>
</label>
</div>
<div class="field-group draggable-input hide">
<label>
<input type="checkbox" name="draggable" maxlength="300">
<span>Is draggable?</span>
</label>
</div>
</div>
</li>
<li class="outline">
<div class="collapsible-header" tabindex="0">Outline</div>
<div class="collapsible-body">
<div class="field-group">
<label>outline thickness (0 = none): </label>
<input type="text" name="outlineThickness" value="0" maxlength="300">
<a href="" class="update_all" data-field="outline"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group">
<label>outline color: </label>
<input type="text" name="outlineColor" value="rgba(0,0,0,0.3)" maxlength="300">
</div>
<div class="field-group outline-style-input">
<label>outline style (solid/dashed/dotted/...): </label>
<input type="text" name="outlineStyle" value="dashed" maxlength="300">
</div>
</div>
</li>
</ul>
</form>
<form class="fields">
<div class="field-group label-info">
<label>label: </label>
<input type="text" name="label" value="SCH" maxlength="300">
<a href="" class="update_all" data-field="label"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group group-info">
<label>layer group: </label>
<input type="text" name="group" value="Players" maxlength="300">
<a href="" class="update_all" data-field="group"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group hide-label">
<label>
<input type="checkbox" name="hideLabel" checked="" maxlength="300">
<span>Hide Label?</span>
<a href="" class="update_all" data-field="hideLabel"><i class="material-icons">update_all</i></a>
</label>
</div>
<ul class="collapsible expandable">
<li class="style">
<div class="collapsible-header" tabindex="0">Styles</div>
<div class="collapsible-body">
<div class="field-group class-selector">
<label>Class: </label>
<select name="player-class" class="browser-default">
<option value="">Custom</option>
<option value="Warrior">Warrior</option>
<option value="Dark Knight">Dark Knight</option>
<option value="Paladin">Paladin</option>
<option value="Gunbreaker">Gunbreaker</option>
<option value="White Mage">White Mage</option>
<option value="Scholar" selected="">Scholar</option>
<option value="Sage">Sage</option>
<option value="Astrologian">Astrologian</option>
<option value="Dragoon">Dragoon</option>
<option value="Reaper">Reaper</option>
<option value="Ninja">Ninja</option>
<option value="Samurai">Samurai</option>
<option value="Monk">Monk</option>
<option value="Bard">Bard</option>
<option value="Machinist">Machinist</option>
<option value="Dancer">Dancer</option>
<option value="Black Mage">Black Mage</option>
<option value="Red Mage">Red Mage</option>
<option value="Summoner">Summoner</option>
<option value="Blue Mage">Blue Mage</option>
</select>
<a href="" class="update_all" data-field="class"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group size-input">
<label>size (yawl*2): </label>
<input type="text" name="size" value="1" maxlength="300">
<a href="" class="update_all" data-field="size"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group width-input hide">
<label>width (yawl*2): </label>
<input type="text" name="width" value="1" maxlength="300">
<a href="" class="update_all" data-field="width"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group height-input hide">
<label>height (yawl*2): </label>
<input type="text" name="height" value="1" maxlength="300">
<a href="" class="update_all" data-field="height"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group background-image-input hide">
<label>background image (URL): </label>
<input type="text" name="backgroundImage" value="https://ff14.toolboxgaming.space/assets/images/scholar.png" maxlength="300">
<a href="" class="update_all" data-field="backgroundImage"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group background-mode-input">
<label>Background Mode: </label>
<select name="backgroundMode" class="browser-default">
<option value="contained" selected="">Contained</option>
<option value="stretched">Stretched</option>
</select>
<a href="" class="update_all" data-field="backgroundMode"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group background-color-input">
<label>background color (hex/rgb(0,0,0)/rgba(0,0,0,1)): </label>
<input type="text" name="backgroundColor" value="transparent" maxlength="300">
<a href="" class="update_all" data-field="backgroundColor"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group shape-input">
<label>Shape: </label>
<select name="shape" class="browser-default">
<option value="square">square</option>
<option value="circle" selected="">circle</option>
</select>
<a href="" class="update_all" data-field="shape"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group opacity-input">
<label>opacity (0-100): </label>
<input type="range" name="opacity" min="0" max="100" value="100" maxlength="300">
<input type="text" name="opacity" value="100" maxlength="300">
<a href="" class="update_all" data-field="opacity"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group animation-input">
<label>Animation: </label>
<select name="animation" class="browser-default">
<option value="">--No animation--</option>
<option value="pulse">pulse</option>
<option value="blink">blink</option>
<option value="glow">glow</option>
</select>
<a href="" class="update_all" data-field="animation"><i class="material-icons">update_all</i></a>
</div>
</div>
</li>
<li class="position">
<div class="collapsible-header" tabindex="0">Position</div>
<div class="collapsible-body">
<div class="field-group posX-input">
<label>x: </label>
<input type="text" name="posX" value="8" maxlength="300">
<a href="" class="update_all" data-field="position"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group posY-input">
<label>y: </label>
<input type="text" name="posY" value="13.5" maxlength="300">
</div>
<div class="field-group layer-index">
<label class="tooltipped" data-tooltip="this decides the priority<br>which object appears on top of the other" data-position="right">Layer Index: </label>
<input type="text" name="layerIndex" value="30" maxlength="300">
<a href="" class="update_all" data-field="layerIndex"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group rotation-input hide">
<label>rotation (0 -> 360, 0 is South): </label>
<input type="range" name="rotation" min="0" max="360" value="0" maxlength="300">
<input type="text" name="rotation" value="0" maxlength="300">
<a href="" class="update_all" data-field="rotation"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group containable-input">
<label>
<input type="checkbox" name="isContainedWithinViewport" checked="" maxlength="300">
<span>Is contained within arena?</span>
</label>
</div>
<div class="field-group draggable-input">
<label>
<input type="checkbox" name="draggable" checked="" maxlength="300">
<span>Is draggable?</span>
</label>
</div>
</div>
</li>
<li class="outline">
<div class="collapsible-header" tabindex="0">Outline</div>
<div class="collapsible-body">
<div class="field-group">
<label>outline thickness (0 = none): </label>
<input type="text" name="outlineThickness" value="1" maxlength="300">
<a href="" class="update_all" data-field="outline"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group">
<label>outline color: </label>
<input type="text" name="outlineColor" value="rgba(0,0,0,0.3)" maxlength="300">
</div>
<div class="field-group outline-style-input">
<label>outline style (solid/dashed/dotted/...): </label>
<input type="text" name="outlineStyle" value="dashed" maxlength="300">
</div>
</div>
</li>
</ul>
<ul class="collapsible buff-icons">
<li>
<div class="collapsible-header" tabindex="0">Debuff Icons</div>
<div class="collapsible-body">
<div class="field-group browser-default">
<label>Icon 1 (URL): </label>
<a href="" class="search-icon" data-field="buffIcon1Url"><i class="material-icons">search</i></a>
<input type="text" name="buffIcon1Url" value="" maxlength="300">
<a href="" class="update_all" data-field="buffIcon1Url"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group browser-default">
<label>Icon 2 (URL): </label>
<a href="" class="search-icon" data-field="buffIcon2Url"><i class="material-icons">search</i></a>
<input type="text" name="buffIcon2Url" value="" maxlength="300">
<a href="" class="update_all" data-field="buffIcon2Url"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group browser-default">
<label>Icon 3 (URL): </label>
<a href="" class="search-icon" data-field="buffIcon3Url"><i class="material-icons">search</i></a>
<input type="text" name="buffIcon3Url" value="" maxlength="300">
<a href="" class="update_all" data-field="buffIcon3Url"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group browser-default">
<label>Icon 4 (URL): </label>
<a href="" class="search-icon" data-field="buffIcon4Url"><i class="material-icons">search</i></a>
<input type="text" name="buffIcon4Url" value="" maxlength="300">
<a href="" class="update_all" data-field="buffIcon4Url"><i class="material-icons">update_all</i></a>
</div>
</div>
</li>
</ul>
<ul class="collapsible marker-icon">
<li>
<div class="collapsible-header" tabindex="0">Marker</div>
<div class="collapsible-body">
<div class="field-group browser-default">
<label class="tooltipped" data-tooltip="Designed by Denmo">Marker: </label>
<select name="marker" class="browser-default">
<option value="" selected="">--NO MARKER--</option>
<option value="custom">--CUSTOM MARKER--</option>
<optgroup label="Common">
<option value="target">Basic Target</option>
<option value="sharpTarget">Sharp Target</option>
<option value="tankDanger">Tank Danger</option>
<option value="tankWarning">Tank Warning</option>
<option value="earthShaker">Earth Shaker</option>
<option value="gaze">Gaze</option>
<option value="minusMagnet">Minus Magnet</option>
<option value="plusMagnet">Plus Magnet</option>
<option value="accelerationBomb">Acceleration Bomb</option>
</optgroup>
<optgroup label="Limit Cut">
<option value="limitCut1Red">Limit Cut 1 Red</option>
<option value="limitCut1Blue">Limit Cut 1 Blue</option>
<option value="limitCut2Red">Limit Cut 2 Red</option>
<option value="limitCut2Blue">Limit Cut 2 Blue</option>
<option value="limitCut3Red">Limit Cut 3 Red</option>
<option value="limitCut3Blue">Limit Cut 3 Blue</option>
<option value="limitCut4Red">Limit Cut 4 Red</option>
<option value="limitCut4Blue">Limit Cut 4 Blue</option>
<option value="limitCut5Red">Limit Cut 5 Red</option>
<option value="limitCut5Blue">Limit Cut 5 Blue</option>
<option value="limitCut6Red">Limit Cut 6 Red</option>
<option value="limitCut6Blue">Limit Cut 6 Blue</option>
<option value="limitCut7Red">Limit Cut 7 Red</option>
<option value="limitCut7Blue">Limit Cut 7 Blue</option>
<option value="limitCut8Red">Limit Cut 8 Red</option>
<option value="limitCut8Blue">Limit Cut 8 Blue</option>
</optgroup>
<optgroup label="DSR">
<option value="dsrX">X icon</option>
<option value="dsrO">O icon</option>
<option value="dsrSquare">Square icon</option>
<option value="dsrTriangle">Triangle icon</option>
</optgroup>
</select>
<a href="" class="update_all" data-field="marker"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group browser-default customMarker-input hide">
<label>Custom Marker URL: </label>
<a href="" class="search-icon" data-field="customMarker"><i class="material-icons">search</i></a>
<input type="text" name="customMarker" value="" maxlength="300">
<a href="" class="update_all" data-field="customMarker"><i class="material-icons">update_all</i></a>
</div>
</div>
</li>
</ul>
</form>
<form class="fields">
<div class="field-group label-info" style="display: none;">
<label>label: </label>
<input type="text" name="label" value="" maxlength="300">
<a href="" class="update_all" data-field="label"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group group-info hide">
<label>layer group: </label>
<input type="text" name="group" value="Objects" maxlength="300">
<a href="" class="update_all" data-field="group"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group hide-label" style="display: none;">
<label>
<input type="checkbox" name="hideLabel" maxlength="300">
<span>Hide Label?</span>
<a href="" class="update_all" data-field="hideLabel"><i class="material-icons">update_all</i></a>
</label>
</div>
<ul class="collapsible expandable">
<li class="style">
<div class="collapsible-header" tabindex="0">Styles</div>
<div class="collapsible-body">
<div class="field-group size-input hide">
<label>size (yawl*2): </label>
<input type="text" name="size" value="2" maxlength="300">
<a href="" class="update_all" data-field="size"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group width-input ">
<label>width (yawl*2): </label>
<input type="text" name="width" value="2" maxlength="300">
<a href="" class="update_all" data-field="width"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group height-input ">
<label>height (yawl*2): </label>
<input type="text" name="height" value="2" maxlength="300">
<a href="" class="update_all" data-field="height"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group background-image-input">
<label>background image (URL): </label>
<input type="text" name="backgroundImage" value="" maxlength="300">
<a href="" class="update_all" data-field="backgroundImage"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group background-mode-input">
<label>Background Mode: </label>
<select name="backgroundMode" class="browser-default">
<option value="contained" selected="">Contained</option>
<option value="stretched">Stretched</option>
</select>
<a href="" class="update_all" data-field="backgroundMode"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group background-color-input">
<label>background color (hex/rgb(0,0,0)/rgba(0,0,0,1)): </label>
<input type="text" name="backgroundColor" value="#cc0000" maxlength="300">
<a href="" class="update_all" data-field="backgroundColor"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group shape-input">
<label>Shape: </label>
<select name="shape" class="browser-default">
<option value="square">square</option>
<option value="circle" selected="">circle</option>
</select>
<a href="" class="update_all" data-field="shape"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group opacity-input">
<label>opacity (0-100): </label>
<input type="range" name="opacity" min="0" max="100" value="0" maxlength="300">
<input type="text" name="opacity" value="0" maxlength="300">
<a href="" class="update_all" data-field="opacity"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group animation-input">
<label>Animation: </label>
<select name="animation" class="browser-default">
</select>
<a href="" class="update_all" data-field="animation"><i class="material-icons">update_all</i></a>
</div>
</div>
</li>
<li class="position">
<div class="collapsible-header" tabindex="0">Position</div>
<div class="collapsible-body">
<div class="field-group posX-input hide">
<label>x: </label>
<input type="text" name="posX" value="7" maxlength="300">
<a href="" class="update_all" data-field="position"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group posY-input hide">
<label>y: </label>
<input type="text" name="posY" value="13" maxlength="300">
</div>
<div class="field-group layer-index" style="display: none;">
<label class="tooltipped" data-tooltip="this decides the priority<br>which object appears on top of the other" data-position="right">Layer Index: </label>
<input type="text" name="layerIndex" value="-1" maxlength="300">
<a href="" class="update_all" data-field="layerIndex"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group rotation-input ">
<label>rotation (0 -> 360, 0 is South): </label>
<input type="range" name="rotation" min="0" max="360" value="180" maxlength="300">
<input type="text" name="rotation" value="180" maxlength="300">
<a href="" class="update_all" data-field="rotation"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group containable-input hide">
<label>
<input type="checkbox" name="isContainedWithinViewport" maxlength="300">
<span>Is contained within arena?</span>
</label>
</div>
<div class="field-group draggable-input hide">
<label>
<input type="checkbox" name="draggable" maxlength="300">
<span>Is draggable?</span>
</label>
</div>
</div>
</li>
<li class="outline">
<div class="collapsible-header" tabindex="0">Outline</div>
<div class="collapsible-body">
<div class="field-group">
<label>outline thickness (0 = none): </label>
<input type="text" name="outlineThickness" value="0" maxlength="300">
<a href="" class="update_all" data-field="outline"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group">
<label>outline color: </label>
<input type="text" name="outlineColor" value="rgba(0,0,0,0.3)" maxlength="300">
</div>
<div class="field-group outline-style-input">
<label>outline style (solid/dashed/dotted/...): </label>
<input type="text" name="outlineStyle" value="dashed" maxlength="300">
</div>
</div>
</li>
</ul>
</form>
<form class="fields">
<div class="field-group label-info">
<label>label: </label>
<input type="text" name="label" value="DNC" maxlength="300">
<a href="" class="update_all" data-field="label"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group group-info">
<label>layer group: </label>
<input type="text" name="group" value="Players" maxlength="300">
<a href="" class="update_all" data-field="group"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group hide-label">
<label>
<input type="checkbox" name="hideLabel" checked="" maxlength="300">
<span>Hide Label?</span>
<a href="" class="update_all" data-field="hideLabel"><i class="material-icons">update_all</i></a>
</label>
</div>
<ul class="collapsible expandable">
<li class="style">
<div class="collapsible-header" tabindex="0">Styles</div>
<div class="collapsible-body">
<div class="field-group class-selector">
<label>Class: </label>
<select name="player-class" class="browser-default">
<option value="">Custom</option>
<option value="Warrior">Warrior</option>
<option value="Dark Knight">Dark Knight</option>
<option value="Paladin">Paladin</option>
<option value="Gunbreaker">Gunbreaker</option>
<option value="White Mage">White Mage</option>
<option value="Scholar">Scholar</option>
<option value="Sage">Sage</option>
<option value="Astrologian">Astrologian</option>
<option value="Dragoon">Dragoon</option>
<option value="Reaper">Reaper</option>
<option value="Ninja">Ninja</option>
<option value="Samurai">Samurai</option>
<option value="Monk">Monk</option>
<option value="Bard">Bard</option>
<option value="Machinist">Machinist</option>
<option value="Dancer" selected="">Dancer</option>
<option value="Black Mage">Black Mage</option>
<option value="Red Mage">Red Mage</option>
<option value="Summoner">Summoner</option>
<option value="Blue Mage">Blue Mage</option>
</select>
<a href="" class="update_all" data-field="class"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group size-input">
<label>size (yawl*2): </label>
<input type="text" name="size" value="1" maxlength="300">
<a href="" class="update_all" data-field="size"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group width-input hide">
<label>width (yawl*2): </label>
<input type="text" name="width" value="1" maxlength="300">
<a href="" class="update_all" data-field="width"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group height-input hide">
<label>height (yawl*2): </label>
<input type="text" name="height" value="1" maxlength="300">
<a href="" class="update_all" data-field="height"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group background-image-input hide">
<label>background image (URL): </label>
<input type="text" name="backgroundImage" value="https://ff14.toolboxgaming.space/assets/images/dancer.png" maxlength="300">
<a href="" class="update_all" data-field="backgroundImage"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group background-mode-input">
<label>Background Mode: </label>
<select name="backgroundMode" class="browser-default">
<option value="contained" selected="">Contained</option>
<option value="stretched">Stretched</option>
</select>
<a href="" class="update_all" data-field="backgroundMode"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group background-color-input">
<label>background color (hex/rgb(0,0,0)/rgba(0,0,0,1)): </label>
<input type="text" name="backgroundColor" value="transparent" maxlength="300">
<a href="" class="update_all" data-field="backgroundColor"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group shape-input">
<label>Shape: </label>
<select name="shape" class="browser-default">
<option value="square">square</option>
<option value="circle" selected="">circle</option>
</select>
<a href="" class="update_all" data-field="shape"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group opacity-input">
<label>opacity (0-100): </label>
<input type="range" name="opacity" min="0" max="100" value="100" maxlength="300">
<input type="text" name="opacity" value="100" maxlength="300">
<a href="" class="update_all" data-field="opacity"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group animation-input">
<label>Animation: </label>
<select name="animation" class="browser-default">
<option value="">--No animation--</option>
<option value="pulse">pulse</option>
<option value="blink">blink</option>
<option value="glow">glow</option>
</select>
<a href="" class="update_all" data-field="animation"><i class="material-icons">update_all</i></a>
</div>
</div>
</li>
<li class="position">
<div class="collapsible-header" tabindex="0">Position</div>
<div class="collapsible-body">
<div class="field-group posX-input">
<label>x: </label>
<input type="text" name="posX" value="5.8" maxlength="300">
<a href="" class="update_all" data-field="position"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group posY-input">
<label>y: </label>
<input type="text" name="posY" value="12.4" maxlength="300">
</div>
<div class="field-group layer-index">
<label class="tooltipped" data-tooltip="this decides the priority<br>which object appears on top of the other" data-position="right">Layer Index: </label>
<input type="text" name="layerIndex" value="30" maxlength="300">
<a href="" class="update_all" data-field="layerIndex"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group rotation-input hide">
<label>rotation (0 -> 360, 0 is South): </label>
<input type="range" name="rotation" min="0" max="360" value="0" maxlength="300">
<input type="text" name="rotation" value="0" maxlength="300">
<a href="" class="update_all" data-field="rotation"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group containable-input">
<label>
<input type="checkbox" name="isContainedWithinViewport" checked="" maxlength="300">
<span>Is contained within arena?</span>
</label>
</div>
<div class="field-group draggable-input">
<label>
<input type="checkbox" name="draggable" checked="" maxlength="300">
<span>Is draggable?</span>
</label>
</div>
</div>
</li>
<li class="outline">
<div class="collapsible-header" tabindex="0">Outline</div>
<div class="collapsible-body">
<div class="field-group">
<label>outline thickness (0 = none): </label>
<input type="text" name="outlineThickness" value="1" maxlength="300">
<a href="" class="update_all" data-field="outline"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group">
<label>outline color: </label>
<input type="text" name="outlineColor" value="rgba(0,0,0,0.3)" maxlength="300">
</div>
<div class="field-group outline-style-input">
<label>outline style (solid/dashed/dotted/...): </label>
<input type="text" name="outlineStyle" value="dashed" maxlength="300">
</div>
</div>
</li>
</ul>
<ul class="collapsible buff-icons">
<li>
<div class="collapsible-header" tabindex="0">Debuff Icons</div>
<div class="collapsible-body">
<div class="field-group browser-default">
<label>Icon 1 (URL): </label>
<a href="" class="search-icon" data-field="buffIcon1Url"><i class="material-icons">search</i></a>
<input type="text" name="buffIcon1Url" value="" maxlength="300">
<a href="" class="update_all" data-field="buffIcon1Url"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group browser-default">
<label>Icon 2 (URL): </label>
<a href="" class="search-icon" data-field="buffIcon2Url"><i class="material-icons">search</i></a>
<input type="text" name="buffIcon2Url" value="" maxlength="300">
<a href="" class="update_all" data-field="buffIcon2Url"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group browser-default">
<label>Icon 3 (URL): </label>
<a href="" class="search-icon" data-field="buffIcon3Url"><i class="material-icons">search</i></a>
<input type="text" name="buffIcon3Url" value="" maxlength="300">
<a href="" class="update_all" data-field="buffIcon3Url"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group browser-default">
<label>Icon 4 (URL): </label>
<a href="" class="search-icon" data-field="buffIcon4Url"><i class="material-icons">search</i></a>
<input type="text" name="buffIcon4Url" value="" maxlength="300">
<a href="" class="update_all" data-field="buffIcon4Url"><i class="material-icons">update_all</i></a>
</div>
</div>
</li>
</ul>
<ul class="collapsible marker-icon">
<li>
<div class="collapsible-header" tabindex="0">Marker</div>
<div class="collapsible-body">
<div class="field-group browser-default">
<label class="tooltipped" data-tooltip="Designed by Denmo">Marker: </label>
<select name="marker" class="browser-default">
<option value="" selected="">--NO MARKER--</option>
<option value="custom">--CUSTOM MARKER--</option>
<optgroup label="Common">
<option value="target">Basic Target</option>
<option value="sharpTarget">Sharp Target</option>
<option value="tankDanger">Tank Danger</option>
<option value="tankWarning">Tank Warning</option>
<option value="earthShaker">Earth Shaker</option>
<option value="gaze">Gaze</option>
<option value="minusMagnet">Minus Magnet</option>
<option value="plusMagnet">Plus Magnet</option>
<option value="accelerationBomb">Acceleration Bomb</option>
</optgroup>
<optgroup label="Limit Cut">
<option value="limitCut1Red">Limit Cut 1 Red</option>
<option value="limitCut1Blue">Limit Cut 1 Blue</option>
<option value="limitCut2Red">Limit Cut 2 Red</option>
<option value="limitCut2Blue">Limit Cut 2 Blue</option>
<option value="limitCut3Red">Limit Cut 3 Red</option>
<option value="limitCut3Blue">Limit Cut 3 Blue</option>
<option value="limitCut4Red">Limit Cut 4 Red</option>
<option value="limitCut4Blue">Limit Cut 4 Blue</option>
<option value="limitCut5Red">Limit Cut 5 Red</option>
<option value="limitCut5Blue">Limit Cut 5 Blue</option>
<option value="limitCut6Red">Limit Cut 6 Red</option>
<option value="limitCut6Blue">Limit Cut 6 Blue</option>
<option value="limitCut7Red">Limit Cut 7 Red</option>
<option value="limitCut7Blue">Limit Cut 7 Blue</option>
<option value="limitCut8Red">Limit Cut 8 Red</option>
<option value="limitCut8Blue">Limit Cut 8 Blue</option>
</optgroup>
<optgroup label="DSR">
<option value="dsrX">X icon</option>
<option value="dsrO">O icon</option>
<option value="dsrSquare">Square icon</option>
<option value="dsrTriangle">Triangle icon</option>
</optgroup>
</select>
<a href="" class="update_all" data-field="marker"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group browser-default customMarker-input hide">
<label>Custom Marker URL: </label>
<a href="" class="search-icon" data-field="customMarker"><i class="material-icons">search</i></a>
<input type="text" name="customMarker" value="" maxlength="300">
<a href="" class="update_all" data-field="customMarker"><i class="material-icons">update_all</i></a>
</div>
</div>
</li>
</ul>
</form>
<form class="fields">
<div class="field-group label-info" style="display: none;">
<label>label: </label>
<input type="text" name="label" value="" maxlength="300">
<a href="" class="update_all" data-field="label"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group group-info hide">
<label>layer group: </label>
<input type="text" name="group" value="Objects" maxlength="300">
<a href="" class="update_all" data-field="group"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group hide-label" style="display: none;">
<label>
<input type="checkbox" name="hideLabel" maxlength="300">
<span>Hide Label?</span>
<a href="" class="update_all" data-field="hideLabel"><i class="material-icons">update_all</i></a>
</label>
</div>
<ul class="collapsible expandable">
<li class="style">
<div class="collapsible-header" tabindex="0">Styles</div>
<div class="collapsible-body">
<div class="field-group size-input hide">
<label>size (yawl*2): </label>
<input type="text" name="size" value="2" maxlength="300">
<a href="" class="update_all" data-field="size"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group width-input ">
<label>width (yawl*2): </label>
<input type="text" name="width" value="2" maxlength="300">
<a href="" class="update_all" data-field="width"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group height-input ">
<label>height (yawl*2): </label>
<input type="text" name="height" value="2" maxlength="300">
<a href="" class="update_all" data-field="height"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group background-image-input">
<label>background image (URL): </label>
<input type="text" name="backgroundImage" value="" maxlength="300">
<a href="" class="update_all" data-field="backgroundImage"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group background-mode-input">
<label>Background Mode: </label>
<select name="backgroundMode" class="browser-default">
<option value="contained" selected="">Contained</option>
<option value="stretched">Stretched</option>
</select>
<a href="" class="update_all" data-field="backgroundMode"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group background-color-input">
<label>background color (hex/rgb(0,0,0)/rgba(0,0,0,1)): </label>
<input type="text" name="backgroundColor" value="#cc0000" maxlength="300">
<a href="" class="update_all" data-field="backgroundColor"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group shape-input">
<label>Shape: </label>
<select name="shape" class="browser-default">
<option value="square">square</option>
<option value="circle" selected="">circle</option>
</select>
<a href="" class="update_all" data-field="shape"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group opacity-input">
<label>opacity (0-100): </label>
<input type="range" name="opacity" min="0" max="100" value="0" maxlength="300">
<input type="text" name="opacity" value="0" maxlength="300">
<a href="" class="update_all" data-field="opacity"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group animation-input">
<label>Animation: </label>
<select name="animation" class="browser-default">
</select>
<a href="" class="update_all" data-field="animation"><i class="material-icons">update_all</i></a>
</div>
</div>
</li>
<li class="position">
<div class="collapsible-header" tabindex="0">Position</div>
<div class="collapsible-body">
<div class="field-group posX-input hide">
<label>x: </label>
<input type="text" name="posX" value="7" maxlength="300">
<a href="" class="update_all" data-field="position"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group posY-input hide">
<label>y: </label>
<input type="text" name="posY" value="13" maxlength="300">
</div>
<div class="field-group layer-index" style="display: none;">
<label class="tooltipped" data-tooltip="this decides the priority<br>which object appears on top of the other" data-position="right">Layer Index: </label>
<input type="text" name="layerIndex" value="-1" maxlength="300">
<a href="" class="update_all" data-field="layerIndex"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group rotation-input ">
<label>rotation (0 -> 360, 0 is South): </label>
<input type="range" name="rotation" min="0" max="360" value="180" maxlength="300">
<input type="text" name="rotation" value="180" maxlength="300">
<a href="" class="update_all" data-field="rotation"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group containable-input hide">
<label>
<input type="checkbox" name="isContainedWithinViewport" maxlength="300">
<span>Is contained within arena?</span>
</label>
</div>
<div class="field-group draggable-input hide">
<label>
<input type="checkbox" name="draggable" maxlength="300">
<span>Is draggable?</span>
</label>
</div>
</div>
</li>
<li class="outline">
<div class="collapsible-header" tabindex="0">Outline</div>
<div class="collapsible-body">
<div class="field-group">
<label>outline thickness (0 = none): </label>
<input type="text" name="outlineThickness" value="0" maxlength="300">
<a href="" class="update_all" data-field="outline"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group">
<label>outline color: </label>
<input type="text" name="outlineColor" value="rgba(0,0,0,0.3)" maxlength="300">
</div>
<div class="field-group outline-style-input">
<label>outline style (solid/dashed/dotted/...): </label>
<input type="text" name="outlineStyle" value="dashed" maxlength="300">
</div>
</div>
</li>
</ul>
</form>
<form class="fields">
<div class="field-group label-info">
<label>label: </label>
<input type="text" name="label" value="DRG" maxlength="300">
<a href="" class="update_all" data-field="label"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group group-info">
<label>layer group: </label>
<input type="text" name="group" value="Players" maxlength="300">
<a href="" class="update_all" data-field="group"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group hide-label">
<label>
<input type="checkbox" name="hideLabel" checked="" maxlength="300">
<span>Hide Label?</span>
<a href="" class="update_all" data-field="hideLabel"><i class="material-icons">update_all</i></a>
</label>
</div>
<ul class="collapsible expandable">
<li class="style">
<div class="collapsible-header" tabindex="0">Styles</div>
<div class="collapsible-body">
<div class="field-group class-selector">
<label>Class: </label>
<select name="player-class" class="browser-default">
<option value="">Custom</option>
<option value="Warrior">Warrior</option>
<option value="Dark Knight">Dark Knight</option>
<option value="Paladin">Paladin</option>
<option value="Gunbreaker">Gunbreaker</option>
<option value="White Mage">White Mage</option>
<option value="Scholar">Scholar</option>
<option value="Sage">Sage</option>
<option value="Astrologian">Astrologian</option>
<option value="Dragoon" selected="">Dragoon</option>
<option value="Reaper">Reaper</option>
<option value="Ninja">Ninja</option>
<option value="Samurai">Samurai</option>
<option value="Monk">Monk</option>
<option value="Bard">Bard</option>
<option value="Machinist">Machinist</option>
<option value="Dancer">Dancer</option>
<option value="Black Mage">Black Mage</option>
<option value="Red Mage">Red Mage</option>
<option value="Summoner">Summoner</option>
<option value="Blue Mage">Blue Mage</option>
</select>
<a href="" class="update_all" data-field="class"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group size-input">
<label>size (yawl*2): </label>
<input type="text" name="size" value="1" maxlength="300">
<a href="" class="update_all" data-field="size"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group width-input hide">
<label>width (yawl*2): </label>
<input type="text" name="width" value="1" maxlength="300">
<a href="" class="update_all" data-field="width"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group height-input hide">
<label>height (yawl*2): </label>
<input type="text" name="height" value="1" maxlength="300">
<a href="" class="update_all" data-field="height"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group background-image-input hide">
<label>background image (URL): </label>
<input type="text" name="backgroundImage" value="https://ff14.toolboxgaming.space/assets/images/dragoon.png" maxlength="300">
<a href="" class="update_all" data-field="backgroundImage"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group background-mode-input">
<label>Background Mode: </label>
<select name="backgroundMode" class="browser-default">
<option value="contained" selected="">Contained</option>
<option value="stretched">Stretched</option>
</select>
<a href="" class="update_all" data-field="backgroundMode"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group background-color-input">
<label>background color (hex/rgb(0,0,0)/rgba(0,0,0,1)): </label>
<input type="text" name="backgroundColor" value="transparent" maxlength="300">
<a href="" class="update_all" data-field="backgroundColor"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group shape-input">
<label>Shape: </label>
<select name="shape" class="browser-default">
<option value="square">square</option>
<option value="circle" selected="">circle</option>
</select>
<a href="" class="update_all" data-field="shape"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group opacity-input">
<label>opacity (0-100): </label>
<input type="range" name="opacity" min="0" max="100" value="100" maxlength="300">
<input type="text" name="opacity" value="100" maxlength="300">
<a href="" class="update_all" data-field="opacity"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group animation-input">
<label>Animation: </label>
<select name="animation" class="browser-default">
<option value="">--No animation--</option>
<option value="pulse">pulse</option>
<option value="blink">blink</option>
<option value="glow">glow</option>
</select>
<a href="" class="update_all" data-field="animation"><i class="material-icons">update_all</i></a>
</div>
</div>
</li>
<li class="position">
<div class="collapsible-header" tabindex="0">Position</div>
<div class="collapsible-body">
<div class="field-group posX-input">
<label>x: </label>
<input type="text" name="posX" value="5.6" maxlength="300">
<a href="" class="update_all" data-field="position"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group posY-input">
<label>y: </label>
<input type="text" name="posY" value="13.6" maxlength="300">
</div>
<div class="field-group layer-index">
<label class="tooltipped" data-tooltip="this decides the priority<br>which object appears on top of the other" data-position="right">Layer Index: </label>
<input type="text" name="layerIndex" value="30" maxlength="300">
<a href="" class="update_all" data-field="layerIndex"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group rotation-input hide">
<label>rotation (0 -> 360, 0 is South): </label>
<input type="range" name="rotation" min="0" max="360" value="0" maxlength="300">
<input type="text" name="rotation" value="0" maxlength="300">
<a href="" class="update_all" data-field="rotation"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group containable-input">
<label>
<input type="checkbox" name="isContainedWithinViewport" checked="" maxlength="300">
<span>Is contained within arena?</span>
</label>
</div>
<div class="field-group draggable-input">
<label>
<input type="checkbox" name="draggable" checked="" maxlength="300">
<span>Is draggable?</span>
</label>
</div>
</div>
</li>
<li class="outline">
<div class="collapsible-header" tabindex="0">Outline</div>
<div class="collapsible-body">
<div class="field-group">
<label>outline thickness (0 = none): </label>
<input type="text" name="outlineThickness" value="1" maxlength="300">
<a href="" class="update_all" data-field="outline"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group">
<label>outline color: </label>
<input type="text" name="outlineColor" value="rgba(0,0,0,0.3)" maxlength="300">
</div>
<div class="field-group outline-style-input">
<label>outline style (solid/dashed/dotted/...): </label>
<input type="text" name="outlineStyle" value="dashed" maxlength="300">
</div>
</div>
</li>
</ul>
<ul class="collapsible buff-icons">
<li>
<div class="collapsible-header" tabindex="0">Debuff Icons</div>
<div class="collapsible-body">
<div class="field-group browser-default">
<label>Icon 1 (URL): </label>
<a href="" class="search-icon" data-field="buffIcon1Url"><i class="material-icons">search</i></a>
<input type="text" name="buffIcon1Url" value="" maxlength="300">
<a href="" class="update_all" data-field="buffIcon1Url"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group browser-default">
<label>Icon 2 (URL): </label>
<a href="" class="search-icon" data-field="buffIcon2Url"><i class="material-icons">search</i></a>
<input type="text" name="buffIcon2Url" value="" maxlength="300">
<a href="" class="update_all" data-field="buffIcon2Url"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group browser-default">
<label>Icon 3 (URL): </label>
<a href="" class="search-icon" data-field="buffIcon3Url"><i class="material-icons">search</i></a>
<input type="text" name="buffIcon3Url" value="" maxlength="300">
<a href="" class="update_all" data-field="buffIcon3Url"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group browser-default">
<label>Icon 4 (URL): </label>
<a href="" class="search-icon" data-field="buffIcon4Url"><i class="material-icons">search</i></a>
<input type="text" name="buffIcon4Url" value="" maxlength="300">
<a href="" class="update_all" data-field="buffIcon4Url"><i class="material-icons">update_all</i></a>
</div>
</div>
</li>
</ul>
<ul class="collapsible marker-icon">
<li>
<div class="collapsible-header" tabindex="0">Marker</div>
<div class="collapsible-body">
<div class="field-group browser-default">
<label class="tooltipped" data-tooltip="Designed by Denmo">Marker: </label>
<select name="marker" class="browser-default">
<option value="" selected="">--NO MARKER--</option>
<option value="custom">--CUSTOM MARKER--</option>
<optgroup label="Common">
<option value="target">Basic Target</option>
<option value="sharpTarget">Sharp Target</option>
<option value="tankDanger">Tank Danger</option>
<option value="tankWarning">Tank Warning</option>
<option value="earthShaker">Earth Shaker</option>
<option value="gaze">Gaze</option>
<option value="minusMagnet">Minus Magnet</option>
<option value="plusMagnet">Plus Magnet</option>
<option value="accelerationBomb">Acceleration Bomb</option>
</optgroup>
<optgroup label="Limit Cut">
<option value="limitCut1Red">Limit Cut 1 Red</option>
<option value="limitCut1Blue">Limit Cut 1 Blue</option>
<option value="limitCut2Red">Limit Cut 2 Red</option>
<option value="limitCut2Blue">Limit Cut 2 Blue</option>
<option value="limitCut3Red">Limit Cut 3 Red</option>
<option value="limitCut3Blue">Limit Cut 3 Blue</option>
<option value="limitCut4Red">Limit Cut 4 Red</option>
<option value="limitCut4Blue">Limit Cut 4 Blue</option>
<option value="limitCut5Red">Limit Cut 5 Red</option>
<option value="limitCut5Blue">Limit Cut 5 Blue</option>
<option value="limitCut6Red">Limit Cut 6 Red</option>
<option value="limitCut6Blue">Limit Cut 6 Blue</option>
<option value="limitCut7Red">Limit Cut 7 Red</option>
<option value="limitCut7Blue">Limit Cut 7 Blue</option>
<option value="limitCut8Red">Limit Cut 8 Red</option>
<option value="limitCut8Blue">Limit Cut 8 Blue</option>
</optgroup>
<optgroup label="DSR">
<option value="dsrX">X icon</option>
<option value="dsrO">O icon</option>
<option value="dsrSquare">Square icon</option>
<option value="dsrTriangle">Triangle icon</option>
</optgroup>
</select>
<a href="" class="update_all" data-field="marker"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group browser-default customMarker-input hide">
<label>Custom Marker URL: </label>
<a href="" class="search-icon" data-field="customMarker"><i class="material-icons">search</i></a>
<input type="text" name="customMarker" value="" maxlength="300">
<a href="" class="update_all" data-field="customMarker"><i class="material-icons">update_all</i></a>
</div>
</div>
</li>
</ul>
</form>
<form class="fields">
<div class="field-group label-info" style="display: none;">
<label>label: </label>
<input type="text" name="label" value="" maxlength="300">
<a href="" class="update_all" data-field="label"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group group-info hide">
<label>layer group: </label>
<input type="text" name="group" value="Objects" maxlength="300">
<a href="" class="update_all" data-field="group"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group hide-label" style="display: none;">
<label>
<input type="checkbox" name="hideLabel" maxlength="300">
<span>Hide Label?</span>
<a href="" class="update_all" data-field="hideLabel"><i class="material-icons">update_all</i></a>
</label>
</div>
<ul class="collapsible expandable">
<li class="style">
<div class="collapsible-header" tabindex="0">Styles</div>
<div class="collapsible-body">
<div class="field-group size-input hide">
<label>size (yawl*2): </label>
<input type="text" name="size" value="2" maxlength="300">
<a href="" class="update_all" data-field="size"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group width-input ">
<label>width (yawl*2): </label>
<input type="text" name="width" value="2" maxlength="300">
<a href="" class="update_all" data-field="width"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group height-input ">
<label>height (yawl*2): </label>
<input type="text" name="height" value="2" maxlength="300">
<a href="" class="update_all" data-field="height"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group background-image-input">
<label>background image (URL): </label>
<input type="text" name="backgroundImage" value="" maxlength="300">
<a href="" class="update_all" data-field="backgroundImage"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group background-mode-input">
<label>Background Mode: </label>
<select name="backgroundMode" class="browser-default">
<option value="contained" selected="">Contained</option>
<option value="stretched">Stretched</option>
</select>
<a href="" class="update_all" data-field="backgroundMode"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group background-color-input">
<label>background color (hex/rgb(0,0,0)/rgba(0,0,0,1)): </label>
<input type="text" name="backgroundColor" value="#cc0000" maxlength="300">
<a href="" class="update_all" data-field="backgroundColor"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group shape-input">
<label>Shape: </label>
<select name="shape" class="browser-default">
<option value="square">square</option>
<option value="circle" selected="">circle</option>
</select>
<a href="" class="update_all" data-field="shape"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group opacity-input">
<label>opacity (0-100): </label>
<input type="range" name="opacity" min="0" max="100" value="0" maxlength="300">
<input type="text" name="opacity" value="0" maxlength="300">
<a href="" class="update_all" data-field="opacity"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group animation-input">
<label>Animation: </label>
<select name="animation" class="browser-default">
</select>
<a href="" class="update_all" data-field="animation"><i class="material-icons">update_all</i></a>
</div>
</div>
</li>
<li class="position">
<div class="collapsible-header" tabindex="0">Position</div>
<div class="collapsible-body">
<div class="field-group posX-input hide">
<label>x: </label>
<input type="text" name="posX" value="7" maxlength="300">
<a href="" class="update_all" data-field="position"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group posY-input hide">
<label>y: </label>
<input type="text" name="posY" value="13" maxlength="300">
</div>
<div class="field-group layer-index" style="display: none;">
<label class="tooltipped" data-tooltip="this decides the priority<br>which object appears on top of the other" data-position="right">Layer Index: </label>
<input type="text" name="layerIndex" value="-1" maxlength="300">
<a href="" class="update_all" data-field="layerIndex"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group rotation-input ">
<label>rotation (0 -> 360, 0 is South): </label>
<input type="range" name="rotation" min="0" max="360" value="180" maxlength="300">
<input type="text" name="rotation" value="180" maxlength="300">
<a href="" class="update_all" data-field="rotation"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group containable-input hide">
<label>
<input type="checkbox" name="isContainedWithinViewport" maxlength="300">
<span>Is contained within arena?</span>
</label>
</div>
<div class="field-group draggable-input hide">
<label>
<input type="checkbox" name="draggable" maxlength="300">
<span>Is draggable?</span>
</label>
</div>
</div>
</li>
<li class="outline">
<div class="collapsible-header" tabindex="0">Outline</div>
<div class="collapsible-body">
<div class="field-group">
<label>outline thickness (0 = none): </label>
<input type="text" name="outlineThickness" value="0" maxlength="300">
<a href="" class="update_all" data-field="outline"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group">
<label>outline color: </label>
<input type="text" name="outlineColor" value="rgba(0,0,0,0.3)" maxlength="300">
</div>
<div class="field-group outline-style-input">
<label>outline style (solid/dashed/dotted/...): </label>
<input type="text" name="outlineStyle" value="dashed" maxlength="300">
</div>
</div>
</li>
</ul>
</form>
<form class="fields">
<div class="field-group label-info">
<label>label: </label>
<input type="text" name="label" value="BRD" maxlength="300">
<a href="" class="update_all" data-field="label"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group group-info">
<label>layer group: </label>
<input type="text" name="group" value="Players" maxlength="300">
<a href="" class="update_all" data-field="group"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group hide-label">
<label>
<input type="checkbox" name="hideLabel" checked="" maxlength="300">
<span>Hide Label?</span>
<a href="" class="update_all" data-field="hideLabel"><i class="material-icons">update_all</i></a>
</label>
</div>
<ul class="collapsible expandable">
<li class="style">
<div class="collapsible-header" tabindex="0">Styles</div>
<div class="collapsible-body">
<div class="field-group class-selector">
<label>Class: </label>
<select name="player-class" class="browser-default">
<option value="">Custom</option>
<option value="Warrior">Warrior</option>
<option value="Dark Knight">Dark Knight</option>
<option value="Paladin">Paladin</option>
<option value="Gunbreaker">Gunbreaker</option>
<option value="White Mage">White Mage</option>
<option value="Scholar">Scholar</option>
<option value="Sage">Sage</option>
<option value="Astrologian">Astrologian</option>
<option value="Dragoon">Dragoon</option>
<option value="Reaper">Reaper</option>
<option value="Ninja">Ninja</option>
<option value="Samurai">Samurai</option>
<option value="Monk">Monk</option>
<option value="Bard" selected="">Bard</option>
<option value="Machinist">Machinist</option>
<option value="Dancer">Dancer</option>
<option value="Black Mage">Black Mage</option>
<option value="Red Mage">Red Mage</option>
<option value="Summoner">Summoner</option>
<option value="Blue Mage">Blue Mage</option>
</select>
<a href="" class="update_all" data-field="class"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group size-input">
<label>size (yawl*2): </label>
<input type="text" name="size" value="1" maxlength="300">
<a href="" class="update_all" data-field="size"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group width-input hide">
<label>width (yawl*2): </label>
<input type="text" name="width" value="1" maxlength="300">
<a href="" class="update_all" data-field="width"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group height-input hide">
<label>height (yawl*2): </label>
<input type="text" name="height" value="1" maxlength="300">
<a href="" class="update_all" data-field="height"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group background-image-input hide">
<label>background image (URL): </label>
<input type="text" name="backgroundImage" value="https://ff14.toolboxgaming.space/assets/images/bard.png" maxlength="300">
<a href="" class="update_all" data-field="backgroundImage"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group background-mode-input">
<label>Background Mode: </label>
<select name="backgroundMode" class="browser-default">
<option value="contained" selected="">Contained</option>
<option value="stretched">Stretched</option>
</select>
<a href="" class="update_all" data-field="backgroundMode"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group background-color-input">
<label>background color (hex/rgb(0,0,0)/rgba(0,0,0,1)): </label>
<input type="text" name="backgroundColor" value="transparent" maxlength="300">
<a href="" class="update_all" data-field="backgroundColor"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group shape-input">
<label>Shape: </label>
<select name="shape" class="browser-default">
<option value="square">square</option>
<option value="circle" selected="">circle</option>
</select>
<a href="" class="update_all" data-field="shape"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group opacity-input">
<label>opacity (0-100): </label>
<input type="range" name="opacity" min="0" max="100" value="100" maxlength="300">
<input type="text" name="opacity" value="100" maxlength="300">
<a href="" class="update_all" data-field="opacity"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group animation-input">
<label>Animation: </label>
<select name="animation" class="browser-default">
<option value="">--No animation--</option>
<option value="pulse">pulse</option>
<option value="blink">blink</option>
<option value="glow">glow</option>
</select>
<a href="" class="update_all" data-field="animation"><i class="material-icons">update_all</i></a>
</div>
</div>
</li>
<li class="position">
<div class="collapsible-header" tabindex="0">Position</div>
<div class="collapsible-body">
<div class="field-group posX-input">
<label>x: </label>
<input type="text" name="posX" value="9.1" maxlength="300">
<a href="" class="update_all" data-field="position"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group posY-input">
<label>y: </label>
<input type="text" name="posY" value="13.4" maxlength="300">
</div>
<div class="field-group layer-index">
<label class="tooltipped" data-tooltip="this decides the priority<br>which object appears on top of the other" data-position="right">Layer Index: </label>
<input type="text" name="layerIndex" value="30" maxlength="300">
<a href="" class="update_all" data-field="layerIndex"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group rotation-input hide">
<label>rotation (0 -> 360, 0 is South): </label>
<input type="range" name="rotation" min="0" max="360" value="0" maxlength="300">
<input type="text" name="rotation" value="0" maxlength="300">
<a href="" class="update_all" data-field="rotation"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group containable-input">
<label>
<input type="checkbox" name="isContainedWithinViewport" checked="" maxlength="300">
<span>Is contained within arena?</span>
</label>
</div>
<div class="field-group draggable-input">
<label>
<input type="checkbox" name="draggable" checked="" maxlength="300">
<span>Is draggable?</span>
</label>
</div>
</div>
</li>
<li class="outline">
<div class="collapsible-header" tabindex="0">Outline</div>
<div class="collapsible-body">
<div class="field-group">
<label>outline thickness (0 = none): </label>
<input type="text" name="outlineThickness" value="1" maxlength="300">
<a href="" class="update_all" data-field="outline"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group">
<label>outline color: </label>
<input type="text" name="outlineColor" value="rgba(0,0,0,0.3)" maxlength="300">
</div>
<div class="field-group outline-style-input">
<label>outline style (solid/dashed/dotted/...): </label>
<input type="text" name="outlineStyle" value="dashed" maxlength="300">
</div>
</div>
</li>
</ul>
<ul class="collapsible buff-icons">
<li>
<div class="collapsible-header" tabindex="0">Debuff Icons</div>
<div class="collapsible-body">
<div class="field-group browser-default">
<label>Icon 1 (URL): </label>
<a href="" class="search-icon" data-field="buffIcon1Url"><i class="material-icons">search</i></a>
<input type="text" name="buffIcon1Url" value="" maxlength="300">
<a href="" class="update_all" data-field="buffIcon1Url"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group browser-default">
<label>Icon 2 (URL): </label>
<a href="" class="search-icon" data-field="buffIcon2Url"><i class="material-icons">search</i></a>
<input type="text" name="buffIcon2Url" value="" maxlength="300">
<a href="" class="update_all" data-field="buffIcon2Url"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group browser-default">
<label>Icon 3 (URL): </label>
<a href="" class="search-icon" data-field="buffIcon3Url"><i class="material-icons">search</i></a>
<input type="text" name="buffIcon3Url" value="" maxlength="300">
<a href="" class="update_all" data-field="buffIcon3Url"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group browser-default">
<label>Icon 4 (URL): </label>
<a href="" class="search-icon" data-field="buffIcon4Url"><i class="material-icons">search</i></a>
<input type="text" name="buffIcon4Url" value="" maxlength="300">
<a href="" class="update_all" data-field="buffIcon4Url"><i class="material-icons">update_all</i></a>
</div>
</div>
</li>
</ul>
<ul class="collapsible marker-icon">
<li>
<div class="collapsible-header" tabindex="0">Marker</div>
<div class="collapsible-body">
<div class="field-group browser-default">
<label class="tooltipped" data-tooltip="Designed by Denmo">Marker: </label>
<select name="marker" class="browser-default">
<option value="" selected="">--NO MARKER--</option>
<option value="custom">--CUSTOM MARKER--</option>
<optgroup label="Common">
<option value="target">Basic Target</option>
<option value="sharpTarget">Sharp Target</option>
<option value="tankDanger">Tank Danger</option>
<option value="tankWarning">Tank Warning</option>
<option value="earthShaker">Earth Shaker</option>
<option value="gaze">Gaze</option>
<option value="minusMagnet">Minus Magnet</option>
<option value="plusMagnet">Plus Magnet</option>
<option value="accelerationBomb">Acceleration Bomb</option>
</optgroup>
<optgroup label="Limit Cut">
<option value="limitCut1Red">Limit Cut 1 Red</option>
<option value="limitCut1Blue">Limit Cut 1 Blue</option>
<option value="limitCut2Red">Limit Cut 2 Red</option>
<option value="limitCut2Blue">Limit Cut 2 Blue</option>
<option value="limitCut3Red">Limit Cut 3 Red</option>
<option value="limitCut3Blue">Limit Cut 3 Blue</option>
<option value="limitCut4Red">Limit Cut 4 Red</option>
<option value="limitCut4Blue">Limit Cut 4 Blue</option>
<option value="limitCut5Red">Limit Cut 5 Red</option>
<option value="limitCut5Blue">Limit Cut 5 Blue</option>
<option value="limitCut6Red">Limit Cut 6 Red</option>
<option value="limitCut6Blue">Limit Cut 6 Blue</option>
<option value="limitCut7Red">Limit Cut 7 Red</option>
<option value="limitCut7Blue">Limit Cut 7 Blue</option>
<option value="limitCut8Red">Limit Cut 8 Red</option>
<option value="limitCut8Blue">Limit Cut 8 Blue</option>
</optgroup>
<optgroup label="DSR">
<option value="dsrX">X icon</option>
<option value="dsrO">O icon</option>
<option value="dsrSquare">Square icon</option>
<option value="dsrTriangle">Triangle icon</option>
</optgroup>
</select>
<a href="" class="update_all" data-field="marker"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group browser-default customMarker-input hide">
<label>Custom Marker URL: </label>
<a href="" class="search-icon" data-field="customMarker"><i class="material-icons">search</i></a>
<input type="text" name="customMarker" value="" maxlength="300">
<a href="" class="update_all" data-field="customMarker"><i class="material-icons">update_all</i></a>
</div>
</div>
</li>
</ul>
</form>
<form class="fields">
<div class="field-group label-info" style="display: none;">
<label>label: </label>
<input type="text" name="label" value="" maxlength="300">
<a href="" class="update_all" data-field="label"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group group-info hide">
<label>layer group: </label>
<input type="text" name="group" value="Objects" maxlength="300">
<a href="" class="update_all" data-field="group"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group hide-label" style="display: none;">
<label>
<input type="checkbox" name="hideLabel" maxlength="300">
<span>Hide Label?</span>
<a href="" class="update_all" data-field="hideLabel"><i class="material-icons">update_all</i></a>
</label>
</div>
<ul class="collapsible expandable">
<li class="style">
<div class="collapsible-header" tabindex="0">Styles</div>
<div class="collapsible-body">
<div class="field-group size-input hide">
<label>size (yawl*2): </label>
<input type="text" name="size" value="2" maxlength="300">
<a href="" class="update_all" data-field="size"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group width-input ">
<label>width (yawl*2): </label>
<input type="text" name="width" value="2" maxlength="300">
<a href="" class="update_all" data-field="width"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group height-input ">
<label>height (yawl*2): </label>
<input type="text" name="height" value="2" maxlength="300">
<a href="" class="update_all" data-field="height"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group background-image-input">
<label>background image (URL): </label>
<input type="text" name="backgroundImage" value="" maxlength="300">
<a href="" class="update_all" data-field="backgroundImage"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group background-mode-input">
<label>Background Mode: </label>
<select name="backgroundMode" class="browser-default">
<option value="contained" selected="">Contained</option>
<option value="stretched">Stretched</option>
</select>
<a href="" class="update_all" data-field="backgroundMode"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group background-color-input">
<label>background color (hex/rgb(0,0,0)/rgba(0,0,0,1)): </label>
<input type="text" name="backgroundColor" value="#cc0000" maxlength="300">
<a href="" class="update_all" data-field="backgroundColor"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group shape-input">
<label>Shape: </label>
<select name="shape" class="browser-default">
<option value="square">square</option>
<option value="circle" selected="">circle</option>
</select>
<a href="" class="update_all" data-field="shape"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group opacity-input">
<label>opacity (0-100): </label>
<input type="range" name="opacity" min="0" max="100" value="0" maxlength="300">
<input type="text" name="opacity" value="0" maxlength="300">
<a href="" class="update_all" data-field="opacity"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group animation-input">
<label>Animation: </label>
<select name="animation" class="browser-default">
</select>
<a href="" class="update_all" data-field="animation"><i class="material-icons">update_all</i></a>
</div>
</div>
</li>
<li class="position">
<div class="collapsible-header" tabindex="0">Position</div>
<div class="collapsible-body">
<div class="field-group posX-input hide">
<label>x: </label>
<input type="text" name="posX" value="7" maxlength="300">
<a href="" class="update_all" data-field="position"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group posY-input hide">
<label>y: </label>
<input type="text" name="posY" value="13" maxlength="300">
</div>
<div class="field-group layer-index" style="display: none;">
<label class="tooltipped" data-tooltip="this decides the priority<br>which object appears on top of the other" data-position="right">Layer Index: </label>
<input type="text" name="layerIndex" value="-1" maxlength="300">
<a href="" class="update_all" data-field="layerIndex"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group rotation-input ">
<label>rotation (0 -> 360, 0 is South): </label>
<input type="range" name="rotation" min="0" max="360" value="180" maxlength="300">
<input type="text" name="rotation" value="180" maxlength="300">
<a href="" class="update_all" data-field="rotation"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group containable-input hide">
<label>
<input type="checkbox" name="isContainedWithinViewport" maxlength="300">
<span>Is contained within arena?</span>
</label>
</div>
<div class="field-group draggable-input hide">
<label>
<input type="checkbox" name="draggable" maxlength="300">
<span>Is draggable?</span>
</label>
</div>
</div>
</li>
<li class="outline">
<div class="collapsible-header" tabindex="0">Outline</div>
<div class="collapsible-body">
<div class="field-group">
<label>outline thickness (0 = none): </label>
<input type="text" name="outlineThickness" value="0" maxlength="300">
<a href="" class="update_all" data-field="outline"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group">
<label>outline color: </label>
<input type="text" name="outlineColor" value="rgba(0,0,0,0.3)" maxlength="300">
</div>
<div class="field-group outline-style-input">
<label>outline style (solid/dashed/dotted/...): </label>
<input type="text" name="outlineStyle" value="dashed" maxlength="300">
</div>
</div>
</li>
</ul>
</form>
<form class="fields">
<div class="field-group label-info">
<label>label: </label>
<input type="text" name="label" value="BLM" maxlength="300">
<a href="" class="update_all" data-field="label"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group group-info">
<label>layer group: </label>
<input type="text" name="group" value="Players" maxlength="300">
<a href="" class="update_all" data-field="group"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group hide-label">
<label>
<input type="checkbox" name="hideLabel" checked="" maxlength="300">
<span>Hide Label?</span>
<a href="" class="update_all" data-field="hideLabel"><i class="material-icons">update_all</i></a>
</label>
</div>
<ul class="collapsible expandable">
<li class="style">
<div class="collapsible-header" tabindex="0">Styles</div>
<div class="collapsible-body">
<div class="field-group class-selector">
<label>Class: </label>
<select name="player-class" class="browser-default">
<option value="">Custom</option>
<option value="Warrior">Warrior</option>
<option value="Dark Knight">Dark Knight</option>
<option value="Paladin">Paladin</option>
<option value="Gunbreaker">Gunbreaker</option>
<option value="White Mage">White Mage</option>
<option value="Scholar">Scholar</option>
<option value="Sage">Sage</option>
<option value="Astrologian">Astrologian</option>
<option value="Dragoon">Dragoon</option>
<option value="Reaper">Reaper</option>
<option value="Ninja">Ninja</option>
<option value="Samurai">Samurai</option>
<option value="Monk">Monk</option>
<option value="Bard">Bard</option>
<option value="Machinist">Machinist</option>
<option value="Dancer">Dancer</option>
<option value="Black Mage" selected="">Black Mage</option>
<option value="Red Mage">Red Mage</option>
<option value="Summoner">Summoner</option>
<option value="Blue Mage">Blue Mage</option>
</select>
<a href="" class="update_all" data-field="class"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group size-input">
<label>size (yawl*2): </label>
<input type="text" name="size" value="1" maxlength="300">
<a href="" class="update_all" data-field="size"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group width-input hide">
<label>width (yawl*2): </label>
<input type="text" name="width" value="1" maxlength="300">
<a href="" class="update_all" data-field="width"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group height-input hide">
<label>height (yawl*2): </label>
<input type="text" name="height" value="1" maxlength="300">
<a href="" class="update_all" data-field="height"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group background-image-input hide">
<label>background image (URL): </label>
<input type="text" name="backgroundImage" value="https://ff14.toolboxgaming.space/assets/images/blackmage.png" maxlength="300">
<a href="" class="update_all" data-field="backgroundImage"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group background-mode-input">
<label>Background Mode: </label>
<select name="backgroundMode" class="browser-default">
<option value="contained" selected="">Contained</option>
<option value="stretched">Stretched</option>
</select>
<a href="" class="update_all" data-field="backgroundMode"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group background-color-input">
<label>background color (hex/rgb(0,0,0)/rgba(0,0,0,1)): </label>
<input type="text" name="backgroundColor" value="transparent" maxlength="300">
<a href="" class="update_all" data-field="backgroundColor"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group shape-input">
<label>Shape: </label>
<select name="shape" class="browser-default">
<option value="square">square</option>
<option value="circle" selected="">circle</option>
</select>
<a href="" class="update_all" data-field="shape"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group opacity-input">
<label>opacity (0-100): </label>
<input type="range" name="opacity" min="0" max="100" value="100" maxlength="300">
<input type="text" name="opacity" value="100" maxlength="300">
<a href="" class="update_all" data-field="opacity"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group animation-input">
<label>Animation: </label>
<select name="animation" class="browser-default">
<option value="">--No animation--</option>
<option value="pulse">pulse</option>
<option value="blink">blink</option>
<option value="glow">glow</option>
</select>
<a href="" class="update_all" data-field="animation"><i class="material-icons">update_all</i></a>
</div>
</div>
</li>
<li class="position">
<div class="collapsible-header" tabindex="0">Position</div>
<div class="collapsible-body">
<div class="field-group posX-input">
<label>x: </label>
<input type="text" name="posX" value="8.3" maxlength="300">
<a href="" class="update_all" data-field="position"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group posY-input">
<label>y: </label>
<input type="text" name="posY" value="12.5" maxlength="300">
</div>
<div class="field-group layer-index">
<label class="tooltipped" data-tooltip="this decides the priority<br>which object appears on top of the other" data-position="right">Layer Index: </label>
<input type="text" name="layerIndex" value="30" maxlength="300">
<a href="" class="update_all" data-field="layerIndex"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group rotation-input hide">
<label>rotation (0 -> 360, 0 is South): </label>
<input type="range" name="rotation" min="0" max="360" value="0" maxlength="300">
<input type="text" name="rotation" value="0" maxlength="300">
<a href="" class="update_all" data-field="rotation"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group containable-input">
<label>
<input type="checkbox" name="isContainedWithinViewport" checked="" maxlength="300">
<span>Is contained within arena?</span>
</label>
</div>
<div class="field-group draggable-input">
<label>
<input type="checkbox" name="draggable" checked="" maxlength="300">
<span>Is draggable?</span>
</label>
</div>
</div>
</li>
<li class="outline">
<div class="collapsible-header" tabindex="0">Outline</div>
<div class="collapsible-body">
<div class="field-group">
<label>outline thickness (0 = none): </label>
<input type="text" name="outlineThickness" value="1" maxlength="300">
<a href="" class="update_all" data-field="outline"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group">
<label>outline color: </label>
<input type="text" name="outlineColor" value="rgba(0,0,0,0.3)" maxlength="300">
</div>
<div class="field-group outline-style-input">
<label>outline style (solid/dashed/dotted/...): </label>
<input type="text" name="outlineStyle" value="dashed" maxlength="300">
</div>
</div>
</li>
</ul>
<ul class="collapsible buff-icons">
<li>
<div class="collapsible-header" tabindex="0">Debuff Icons</div>
<div class="collapsible-body">
<div class="field-group browser-default">
<label>Icon 1 (URL): </label>
<a href="" class="search-icon" data-field="buffIcon1Url"><i class="material-icons">search</i></a>
<input type="text" name="buffIcon1Url" value="" maxlength="300">
<a href="" class="update_all" data-field="buffIcon1Url"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group browser-default">
<label>Icon 2 (URL): </label>
<a href="" class="search-icon" data-field="buffIcon2Url"><i class="material-icons">search</i></a>
<input type="text" name="buffIcon2Url" value="" maxlength="300">
<a href="" class="update_all" data-field="buffIcon2Url"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group browser-default">
<label>Icon 3 (URL): </label>
<a href="" class="search-icon" data-field="buffIcon3Url"><i class="material-icons">search</i></a>
<input type="text" name="buffIcon3Url" value="" maxlength="300">
<a href="" class="update_all" data-field="buffIcon3Url"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group browser-default">
<label>Icon 4 (URL): </label>
<a href="" class="search-icon" data-field="buffIcon4Url"><i class="material-icons">search</i></a>
<input type="text" name="buffIcon4Url" value="" maxlength="300">
<a href="" class="update_all" data-field="buffIcon4Url"><i class="material-icons">update_all</i></a>
</div>
</div>
</li>
</ul>
<ul class="collapsible marker-icon">
<li>
<div class="collapsible-header" tabindex="0">Marker</div>
<div class="collapsible-body">
<div class="field-group browser-default">
<label class="tooltipped" data-tooltip="Designed by Denmo">Marker: </label>
<select name="marker" class="browser-default">
<option value="" selected="">--NO MARKER--</option>
<option value="custom">--CUSTOM MARKER--</option>
<optgroup label="Common">
<option value="target">Basic Target</option>
<option value="sharpTarget">Sharp Target</option>
<option value="tankDanger">Tank Danger</option>
<option value="tankWarning">Tank Warning</option>
<option value="earthShaker">Earth Shaker</option>
<option value="gaze">Gaze</option>
<option value="minusMagnet">Minus Magnet</option>
<option value="plusMagnet">Plus Magnet</option>
<option value="accelerationBomb">Acceleration Bomb</option>
</optgroup>
<optgroup label="Limit Cut">
<option value="limitCut1Red">Limit Cut 1 Red</option>
<option value="limitCut1Blue">Limit Cut 1 Blue</option>
<option value="limitCut2Red">Limit Cut 2 Red</option>
<option value="limitCut2Blue">Limit Cut 2 Blue</option>
<option value="limitCut3Red">Limit Cut 3 Red</option>
<option value="limitCut3Blue">Limit Cut 3 Blue</option>
<option value="limitCut4Red">Limit Cut 4 Red</option>
<option value="limitCut4Blue">Limit Cut 4 Blue</option>
<option value="limitCut5Red">Limit Cut 5 Red</option>
<option value="limitCut5Blue">Limit Cut 5 Blue</option>
<option value="limitCut6Red">Limit Cut 6 Red</option>
<option value="limitCut6Blue">Limit Cut 6 Blue</option>
<option value="limitCut7Red">Limit Cut 7 Red</option>
<option value="limitCut7Blue">Limit Cut 7 Blue</option>
<option value="limitCut8Red">Limit Cut 8 Red</option>
<option value="limitCut8Blue">Limit Cut 8 Blue</option>
</optgroup>
<optgroup label="DSR">
<option value="dsrX">X icon</option>
<option value="dsrO">O icon</option>
<option value="dsrSquare">Square icon</option>
<option value="dsrTriangle">Triangle icon</option>
</optgroup>
</select>
<a href="" class="update_all" data-field="marker"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group browser-default customMarker-input hide">
<label>Custom Marker URL: </label>
<a href="" class="search-icon" data-field="customMarker"><i class="material-icons">search</i></a>
<input type="text" name="customMarker" value="" maxlength="300">
<a href="" class="update_all" data-field="customMarker"><i class="material-icons">update_all</i></a>
</div>
</div>
</li>
</ul>
</form>
<form class="fields">
<div class="field-group label-info" style="display: none;">
<label>label: </label>
<input type="text" name="label" value="" maxlength="300">
<a href="" class="update_all" data-field="label"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group group-info hide">
<label>layer group: </label>
<input type="text" name="group" value="Objects" maxlength="300">
<a href="" class="update_all" data-field="group"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group hide-label" style="display: none;">
<label>
<input type="checkbox" name="hideLabel" maxlength="300">
<span>Hide Label?</span>
<a href="" class="update_all" data-field="hideLabel"><i class="material-icons">update_all</i></a>
</label>
</div>
<ul class="collapsible expandable">
<li class="style">
<div class="collapsible-header" tabindex="0">Styles</div>
<div class="collapsible-body">
<div class="field-group size-input hide">
<label>size (yawl*2): </label>
<input type="text" name="size" value="2" maxlength="300">
<a href="" class="update_all" data-field="size"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group width-input ">
<label>width (yawl*2): </label>
<input type="text" name="width" value="2" maxlength="300">
<a href="" class="update_all" data-field="width"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group height-input ">
<label>height (yawl*2): </label>
<input type="text" name="height" value="2" maxlength="300">
<a href="" class="update_all" data-field="height"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group background-image-input">
<label>background image (URL): </label>
<input type="text" name="backgroundImage" value="" maxlength="300">
<a href="" class="update_all" data-field="backgroundImage"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group background-mode-input">
<label>Background Mode: </label>
<select name="backgroundMode" class="browser-default">
<option value="contained" selected="">Contained</option>
<option value="stretched">Stretched</option>
</select>
<a href="" class="update_all" data-field="backgroundMode"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group background-color-input">
<label>background color (hex/rgb(0,0,0)/rgba(0,0,0,1)): </label>
<input type="text" name="backgroundColor" value="#cc0000" maxlength="300">
<a href="" class="update_all" data-field="backgroundColor"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group shape-input">
<label>Shape: </label>
<select name="shape" class="browser-default">
<option value="square">square</option>
<option value="circle" selected="">circle</option>
</select>
<a href="" class="update_all" data-field="shape"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group opacity-input">
<label>opacity (0-100): </label>
<input type="range" name="opacity" min="0" max="100" value="0" maxlength="300">
<input type="text" name="opacity" value="0" maxlength="300">
<a href="" class="update_all" data-field="opacity"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group animation-input">
<label>Animation: </label>
<select name="animation" class="browser-default">
</select>
<a href="" class="update_all" data-field="animation"><i class="material-icons">update_all</i></a>
</div>
</div>
</li>
<li class="position">
<div class="collapsible-header" tabindex="0">Position</div>
<div class="collapsible-body">
<div class="field-group posX-input hide">
<label>x: </label>
<input type="text" name="posX" value="7" maxlength="300">
<a href="" class="update_all" data-field="position"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group posY-input hide">
<label>y: </label>
<input type="text" name="posY" value="13" maxlength="300">
</div>
<div class="field-group layer-index" style="display: none;">
<label class="tooltipped" data-tooltip="this decides the priority<br>which object appears on top of the other" data-position="right">Layer Index: </label>
<input type="text" name="layerIndex" value="-1" maxlength="300">
<a href="" class="update_all" data-field="layerIndex"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group rotation-input ">
<label>rotation (0 -> 360, 0 is South): </label>
<input type="range" name="rotation" min="0" max="360" value="180" maxlength="300">
<input type="text" name="rotation" value="180" maxlength="300">
<a href="" class="update_all" data-field="rotation"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group containable-input hide">
<label>
<input type="checkbox" name="isContainedWithinViewport" maxlength="300">
<span>Is contained within arena?</span>
</label>
</div>
<div class="field-group draggable-input hide">
<label>
<input type="checkbox" name="draggable" maxlength="300">
<span>Is draggable?</span>
</label>
</div>
</div>
</li>
<li class="outline">
<div class="collapsible-header" tabindex="0">Outline</div>
<div class="collapsible-body">
<div class="field-group">
<label>outline thickness (0 = none): </label>
<input type="text" name="outlineThickness" value="0" maxlength="300">
<a href="" class="update_all" data-field="outline"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group">
<label>outline color: </label>
<input type="text" name="outlineColor" value="rgba(0,0,0,0.3)" maxlength="300">
</div>
<div class="field-group outline-style-input">
<label>outline style (solid/dashed/dotted/...): </label>
<input type="text" name="outlineStyle" value="dashed" maxlength="300">
</div>
</div>
</li>
</ul>
</form>
<form class="fields">
<div class="field-group label-info">
<label>label: </label>
<input type="text" name="label" value="Waymark A" maxlength="300">
<a href="" class="update_all" data-field="label"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group group-info">
<label>layer group: </label>
<input type="text" name="group" value="Waymarks" maxlength="300">
<a href="" class="update_all" data-field="group"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group hide-label">
<label>
<input type="checkbox" name="hideLabel" checked="" maxlength="300">
<span>Hide Label?</span>
<a href="" class="update_all" data-field="hideLabel"><i class="material-icons">update_all</i></a>
</label>
</div>
<ul class="collapsible expandable">
<li class="style">
<div class="collapsible-header" tabindex="0">Styles</div>
<div class="collapsible-body">
<div class="field-group size-input ">
<label>size (yawl*2): </label>
<input type="text" name="size" value="1.5" maxlength="300">
<a href="" class="update_all" data-field="size"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group width-input hide">
<label>width (yawl*2): </label>
<input type="text" name="width" value="1" maxlength="300">
<a href="" class="update_all" data-field="width"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group height-input hide">
<label>height (yawl*2): </label>
<input type="text" name="height" value="1" maxlength="300">
<a href="" class="update_all" data-field="height"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group background-image-input">
<label>background image (URL): </label>
<input type="text" name="backgroundImage" value="https://ff14.toolboxgaming.space/assets/images/waymarkA.png" maxlength="300">
<a href="" class="update_all" data-field="backgroundImage"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group background-mode-input">
<label>Background Mode: </label>
<select name="backgroundMode" class="browser-default">
<option value="contained" selected="">Contained</option>
<option value="stretched">Stretched</option>
</select>
<a href="" class="update_all" data-field="backgroundMode"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group background-color-input">
<label>background color (hex/rgb(0,0,0)/rgba(0,0,0,1)): </label>
<input type="text" name="backgroundColor" value="transparent" maxlength="300">
<a href="" class="update_all" data-field="backgroundColor"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group shape-input hide">
<label>Shape: </label>
<select name="shape" class="browser-default">
<option value="square">square</option>
<option value="circle" selected="">circle</option>
</select>
<a href="" class="update_all" data-field="shape"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group opacity-input">
<label>opacity (0-100): </label>
<input type="range" name="opacity" min="0" max="100" value="100" maxlength="300">
<input type="text" name="opacity" value="100" maxlength="300">
<a href="" class="update_all" data-field="opacity"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group animation-input">
<label>Animation: </label>
<select name="animation" class="browser-default">
</select>
<a href="" class="update_all" data-field="animation"><i class="material-icons">update_all</i></a>
</div>
</div>
</li>
<li class="position">
<div class="collapsible-header" tabindex="0">Position</div>
<div class="collapsible-body">
<div class="field-group posX-input">
<label>x: </label>
<input type="text" name="posX" value="17" maxlength="300">
<a href="" class="update_all" data-field="position"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group posY-input">
<label>y: </label>
<input type="text" name="posY" value="1" maxlength="300">
</div>
<div class="field-group layer-index">
<label class="tooltipped" data-tooltip="this decides the priority<br>which object appears on top of the other" data-position="right">Layer Index: </label>
<input type="text" name="layerIndex" value="10" maxlength="300">
<a href="" class="update_all" data-field="layerIndex"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group rotation-input hide">
<label>rotation (0 -> 360, 0 is South): </label>
<input type="range" name="rotation" min="0" max="360" value="0" maxlength="300">
<input type="text" name="rotation" value="0" maxlength="300">
<a href="" class="update_all" data-field="rotation"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group containable-input">
<label>
<input type="checkbox" name="isContainedWithinViewport" maxlength="300">
<span>Is contained within arena?</span>
</label>
</div>
<div class="field-group draggable-input">
<label>
<input type="checkbox" name="draggable" checked="" maxlength="300">
<span>Is draggable?</span>
</label>
</div>
</div>
</li>
<li class="outline">
<div class="collapsible-header" tabindex="0">Outline</div>
<div class="collapsible-body">
<div class="field-group">
<label>outline thickness (0 = none): </label>
<input type="text" name="outlineThickness" value="2" maxlength="300">
<a href="" class="update_all" data-field="outline"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group">
<label>outline color: </label>
<input type="text" name="outlineColor" value="rgba(0,0,0,0.5)" maxlength="300">
</div>
<div class="field-group outline-style-input">
<label>outline style (solid/dashed/dotted/...): </label>
<input type="text" name="outlineStyle" value="dashed" maxlength="300">
</div>
</div>
</li>
</ul>
</form>
<form class="fields">
<div class="field-group label-info">
<label>label: </label>
<input type="text" name="label" value="Waymark B" maxlength="300">
<a href="" class="update_all" data-field="label"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group group-info">
<label>layer group: </label>
<input type="text" name="group" value="Waymarks" maxlength="300">
<a href="" class="update_all" data-field="group"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group hide-label">
<label>
<input type="checkbox" name="hideLabel" checked="" maxlength="300">
<span>Hide Label?</span>
<a href="" class="update_all" data-field="hideLabel"><i class="material-icons">update_all</i></a>
</label>
</div>
<ul class="collapsible expandable">
<li class="style">
<div class="collapsible-header" tabindex="0">Styles</div>
<div class="collapsible-body">
<div class="field-group size-input ">
<label>size (yawl*2): </label>
<input type="text" name="size" value="1.5" maxlength="300">
<a href="" class="update_all" data-field="size"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group width-input hide">
<label>width (yawl*2): </label>
<input type="text" name="width" value="1" maxlength="300">
<a href="" class="update_all" data-field="width"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group height-input hide">
<label>height (yawl*2): </label>
<input type="text" name="height" value="1" maxlength="300">
<a href="" class="update_all" data-field="height"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group background-image-input">
<label>background image (URL): </label>
<input type="text" name="backgroundImage" value="https://ff14.toolboxgaming.space/assets/images/waymarkB.png" maxlength="300">
<a href="" class="update_all" data-field="backgroundImage"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group background-mode-input">
<label>Background Mode: </label>
<select name="backgroundMode" class="browser-default">
<option value="contained" selected="">Contained</option>
<option value="stretched">Stretched</option>
</select>
<a href="" class="update_all" data-field="backgroundMode"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group background-color-input">
<label>background color (hex/rgb(0,0,0)/rgba(0,0,0,1)): </label>
<input type="text" name="backgroundColor" value="transparent" maxlength="300">
<a href="" class="update_all" data-field="backgroundColor"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group shape-input hide">
<label>Shape: </label>
<select name="shape" class="browser-default">
<option value="square">square</option>
<option value="circle" selected="">circle</option>
</select>
<a href="" class="update_all" data-field="shape"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group opacity-input">
<label>opacity (0-100): </label>
<input type="range" name="opacity" min="0" max="100" value="100" maxlength="300">
<input type="text" name="opacity" value="100" maxlength="300">
<a href="" class="update_all" data-field="opacity"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group animation-input">
<label>Animation: </label>
<select name="animation" class="browser-default">
</select>
<a href="" class="update_all" data-field="animation"><i class="material-icons">update_all</i></a>
</div>
</div>
</li>
<li class="position">
<div class="collapsible-header" tabindex="0">Position</div>
<div class="collapsible-body">
<div class="field-group posX-input">
<label>x: </label>
<input type="text" name="posX" value="17" maxlength="300">
<a href="" class="update_all" data-field="position"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group posY-input">
<label>y: </label>
<input type="text" name="posY" value="3" maxlength="300">
</div>
<div class="field-group layer-index">
<label class="tooltipped" data-tooltip="this decides the priority<br>which object appears on top of the other" data-position="right">Layer Index: </label>
<input type="text" name="layerIndex" value="10" maxlength="300">
<a href="" class="update_all" data-field="layerIndex"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group rotation-input hide">
<label>rotation (0 -> 360, 0 is South): </label>
<input type="range" name="rotation" min="0" max="360" value="0" maxlength="300">
<input type="text" name="rotation" value="0" maxlength="300">
<a href="" class="update_all" data-field="rotation"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group containable-input">
<label>
<input type="checkbox" name="isContainedWithinViewport" maxlength="300">
<span>Is contained within arena?</span>
</label>
</div>
<div class="field-group draggable-input">
<label>
<input type="checkbox" name="draggable" checked="" maxlength="300">
<span>Is draggable?</span>
</label>
</div>
</div>
</li>
<li class="outline">
<div class="collapsible-header" tabindex="0">Outline</div>
<div class="collapsible-body">
<div class="field-group">
<label>outline thickness (0 = none): </label>
<input type="text" name="outlineThickness" value="2" maxlength="300">
<a href="" class="update_all" data-field="outline"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group">
<label>outline color: </label>
<input type="text" name="outlineColor" value="rgba(0,0,0,0.5)" maxlength="300">
</div>
<div class="field-group outline-style-input">
<label>outline style (solid/dashed/dotted/...): </label>
<input type="text" name="outlineStyle" value="dashed" maxlength="300">
</div>
</div>
</li>
</ul>
</form>
<form class="fields">
<div class="field-group label-info">
<label>label: </label>
<input type="text" name="label" value="Waymark C" maxlength="300">
<a href="" class="update_all" data-field="label"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group group-info">
<label>layer group: </label>
<input type="text" name="group" value="Waymarks" maxlength="300">
<a href="" class="update_all" data-field="group"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group hide-label">
<label>
<input type="checkbox" name="hideLabel" checked="" maxlength="300">
<span>Hide Label?</span>
<a href="" class="update_all" data-field="hideLabel"><i class="material-icons">update_all</i></a>
</label>
</div>
<ul class="collapsible expandable">
<li class="style">
<div class="collapsible-header" tabindex="0">Styles</div>
<div class="collapsible-body">
<div class="field-group size-input ">
<label>size (yawl*2): </label>
<input type="text" name="size" value="1.5" maxlength="300">
<a href="" class="update_all" data-field="size"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group width-input hide">
<label>width (yawl*2): </label>
<input type="text" name="width" value="1" maxlength="300">
<a href="" class="update_all" data-field="width"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group height-input hide">
<label>height (yawl*2): </label>
<input type="text" name="height" value="1" maxlength="300">
<a href="" class="update_all" data-field="height"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group background-image-input">
<label>background image (URL): </label>
<input type="text" name="backgroundImage" value="https://ff14.toolboxgaming.space/assets/images/waymarkC.png" maxlength="300">
<a href="" class="update_all" data-field="backgroundImage"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group background-mode-input">
<label>Background Mode: </label>
<select name="backgroundMode" class="browser-default">
<option value="contained" selected="">Contained</option>
<option value="stretched">Stretched</option>
</select>
<a href="" class="update_all" data-field="backgroundMode"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group background-color-input">
<label>background color (hex/rgb(0,0,0)/rgba(0,0,0,1)): </label>
<input type="text" name="backgroundColor" value="transparent" maxlength="300">
<a href="" class="update_all" data-field="backgroundColor"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group shape-input hide">
<label>Shape: </label>
<select name="shape" class="browser-default">
<option value="square">square</option>
<option value="circle" selected="">circle</option>
</select>
<a href="" class="update_all" data-field="shape"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group opacity-input">
<label>opacity (0-100): </label>
<input type="range" name="opacity" min="0" max="100" value="100" maxlength="300">
<input type="text" name="opacity" value="100" maxlength="300">
<a href="" class="update_all" data-field="opacity"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group animation-input">
<label>Animation: </label>
<select name="animation" class="browser-default">
</select>
<a href="" class="update_all" data-field="animation"><i class="material-icons">update_all</i></a>
</div>
</div>
</li>
<li class="position">
<div class="collapsible-header" tabindex="0">Position</div>
<div class="collapsible-body">
<div class="field-group posX-input">
<label>x: </label>
<input type="text" name="posX" value="17" maxlength="300">
<a href="" class="update_all" data-field="position"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group posY-input">
<label>y: </label>
<input type="text" name="posY" value="5" maxlength="300">
</div>
<div class="field-group layer-index">
<label class="tooltipped" data-tooltip="this decides the priority<br>which object appears on top of the other" data-position="right">Layer Index: </label>
<input type="text" name="layerIndex" value="10" maxlength="300">
<a href="" class="update_all" data-field="layerIndex"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group rotation-input hide">
<label>rotation (0 -> 360, 0 is South): </label>
<input type="range" name="rotation" min="0" max="360" value="0" maxlength="300">
<input type="text" name="rotation" value="0" maxlength="300">
<a href="" class="update_all" data-field="rotation"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group containable-input">
<label>
<input type="checkbox" name="isContainedWithinViewport" maxlength="300">
<span>Is contained within arena?</span>
</label>
</div>
<div class="field-group draggable-input">
<label>
<input type="checkbox" name="draggable" checked="" maxlength="300">
<span>Is draggable?</span>
</label>
</div>
</div>
</li>
<li class="outline">
<div class="collapsible-header" tabindex="0">Outline</div>
<div class="collapsible-body">
<div class="field-group">
<label>outline thickness (0 = none): </label>
<input type="text" name="outlineThickness" value="2" maxlength="300">
<a href="" class="update_all" data-field="outline"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group">
<label>outline color: </label>
<input type="text" name="outlineColor" value="rgba(0,0,0,0.5)" maxlength="300">
</div>
<div class="field-group outline-style-input">
<label>outline style (solid/dashed/dotted/...): </label>
<input type="text" name="outlineStyle" value="dashed" maxlength="300">
</div>
</div>
</li>
</ul>
</form>
<form class="fields">
<div class="field-group label-info">
<label>label: </label>
<input type="text" name="label" value="Waymark D" maxlength="300">
<a href="" class="update_all" data-field="label"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group group-info">
<label>layer group: </label>
<input type="text" name="group" value="Waymarks" maxlength="300">
<a href="" class="update_all" data-field="group"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group hide-label">
<label>
<input type="checkbox" name="hideLabel" checked="" maxlength="300">
<span>Hide Label?</span>
<a href="" class="update_all" data-field="hideLabel"><i class="material-icons">update_all</i></a>
</label>
</div>
<ul class="collapsible expandable">
<li class="style">
<div class="collapsible-header" tabindex="0">Styles</div>
<div class="collapsible-body">
<div class="field-group size-input ">
<label>size (yawl*2): </label>
<input type="text" name="size" value="1.5" maxlength="300">
<a href="" class="update_all" data-field="size"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group width-input hide">
<label>width (yawl*2): </label>
<input type="text" name="width" value="1" maxlength="300">
<a href="" class="update_all" data-field="width"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group height-input hide">
<label>height (yawl*2): </label>
<input type="text" name="height" value="1" maxlength="300">
<a href="" class="update_all" data-field="height"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group background-image-input">
<label>background image (URL): </label>
<input type="text" name="backgroundImage" value="https://ff14.toolboxgaming.space/assets/images/waymarkD.png" maxlength="300">
<a href="" class="update_all" data-field="backgroundImage"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group background-mode-input">
<label>Background Mode: </label>
<select name="backgroundMode" class="browser-default">
<option value="contained" selected="">Contained</option>
<option value="stretched">Stretched</option>
</select>
<a href="" class="update_all" data-field="backgroundMode"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group background-color-input">
<label>background color (hex/rgb(0,0,0)/rgba(0,0,0,1)): </label>
<input type="text" name="backgroundColor" value="transparent" maxlength="300">
<a href="" class="update_all" data-field="backgroundColor"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group shape-input hide">
<label>Shape: </label>
<select name="shape" class="browser-default">
<option value="square">square</option>
<option value="circle" selected="">circle</option>
</select>
<a href="" class="update_all" data-field="shape"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group opacity-input">
<label>opacity (0-100): </label>
<input type="range" name="opacity" min="0" max="100" value="100" maxlength="300">
<input type="text" name="opacity" value="100" maxlength="300">
<a href="" class="update_all" data-field="opacity"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group animation-input">
<label>Animation: </label>
<select name="animation" class="browser-default">
</select>
<a href="" class="update_all" data-field="animation"><i class="material-icons">update_all</i></a>
</div>
</div>
</li>
<li class="position">
<div class="collapsible-header" tabindex="0">Position</div>
<div class="collapsible-body">
<div class="field-group posX-input">
<label>x: </label>
<input type="text" name="posX" value="17" maxlength="300">
<a href="" class="update_all" data-field="position"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group posY-input">
<label>y: </label>
<input type="text" name="posY" value="7" maxlength="300">
</div>
<div class="field-group layer-index">
<label class="tooltipped" data-tooltip="this decides the priority<br>which object appears on top of the other" data-position="right">Layer Index: </label>
<input type="text" name="layerIndex" value="10" maxlength="300">
<a href="" class="update_all" data-field="layerIndex"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group rotation-input hide">
<label>rotation (0 -> 360, 0 is South): </label>
<input type="range" name="rotation" min="0" max="360" value="0" maxlength="300">
<input type="text" name="rotation" value="0" maxlength="300">
<a href="" class="update_all" data-field="rotation"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group containable-input">
<label>
<input type="checkbox" name="isContainedWithinViewport" maxlength="300">
<span>Is contained within arena?</span>
</label>
</div>
<div class="field-group draggable-input">
<label>
<input type="checkbox" name="draggable" checked="" maxlength="300">
<span>Is draggable?</span>
</label>
</div>
</div>
</li>
<li class="outline">
<div class="collapsible-header" tabindex="0">Outline</div>
<div class="collapsible-body">
<div class="field-group">
<label>outline thickness (0 = none): </label>
<input type="text" name="outlineThickness" value="2" maxlength="300">
<a href="" class="update_all" data-field="outline"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group">
<label>outline color: </label>
<input type="text" name="outlineColor" value="rgba(0,0,0,0.5)" maxlength="300">
</div>
<div class="field-group outline-style-input">
<label>outline style (solid/dashed/dotted/...): </label>
<input type="text" name="outlineStyle" value="dashed" maxlength="300">
</div>
</div>
</li>
</ul>
</form>
<form class="fields">
<div class="field-group label-info">
<label>label: </label>
<input type="text" name="label" value="Waymark 1" maxlength="300">
<a href="" class="update_all" data-field="label"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group group-info">
<label>layer group: </label>
<input type="text" name="group" value="Waymarks" maxlength="300">
<a href="" class="update_all" data-field="group"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group hide-label">
<label>
<input type="checkbox" name="hideLabel" checked="" maxlength="300">
<span>Hide Label?</span>
<a href="" class="update_all" data-field="hideLabel"><i class="material-icons">update_all</i></a>
</label>
</div>
<ul class="collapsible expandable">
<li class="style">
<div class="collapsible-header" tabindex="0">Styles</div>
<div class="collapsible-body">
<div class="field-group size-input ">
<label>size (yawl*2): </label>
<input type="text" name="size" value="1.5" maxlength="300">
<a href="" class="update_all" data-field="size"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group width-input hide">
<label>width (yawl*2): </label>
<input type="text" name="width" value="1" maxlength="300">
<a href="" class="update_all" data-field="width"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group height-input hide">
<label>height (yawl*2): </label>
<input type="text" name="height" value="1" maxlength="300">
<a href="" class="update_all" data-field="height"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group background-image-input">
<label>background image (URL): </label>
<input type="text" name="backgroundImage" value="https://ff14.toolboxgaming.space/assets/images/waymark1.png" maxlength="300">
<a href="" class="update_all" data-field="backgroundImage"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group background-mode-input">
<label>Background Mode: </label>
<select name="backgroundMode" class="browser-default">
<option value="contained" selected="">Contained</option>
<option value="stretched">Stretched</option>
</select>
<a href="" class="update_all" data-field="backgroundMode"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group background-color-input">
<label>background color (hex/rgb(0,0,0)/rgba(0,0,0,1)): </label>
<input type="text" name="backgroundColor" value="transparent" maxlength="300">
<a href="" class="update_all" data-field="backgroundColor"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group shape-input hide">
<label>Shape: </label>
<select name="shape" class="browser-default">
<option value="square" selected="">square</option>
<option value="circle">circle</option>
</select>
<a href="" class="update_all" data-field="shape"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group opacity-input">
<label>opacity (0-100): </label>
<input type="range" name="opacity" min="0" max="100" value="100" maxlength="300">
<input type="text" name="opacity" value="100" maxlength="300">
<a href="" class="update_all" data-field="opacity"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group animation-input">
<label>Animation: </label>
<select name="animation" class="browser-default">
</select>
<a href="" class="update_all" data-field="animation"><i class="material-icons">update_all</i></a>
</div>
</div>
</li>
<li class="position">
<div class="collapsible-header" tabindex="0">Position</div>
<div class="collapsible-body">
<div class="field-group posX-input">
<label>x: </label>
<input type="text" name="posX" value="15.2" maxlength="300">
<a href="" class="update_all" data-field="position"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group posY-input">
<label>y: </label>
<input type="text" name="posY" value="1" maxlength="300">
</div>
<div class="field-group layer-index">
<label class="tooltipped" data-tooltip="this decides the priority<br>which object appears on top of the other" data-position="right">Layer Index: </label>
<input type="text" name="layerIndex" value="10" maxlength="300">
<a href="" class="update_all" data-field="layerIndex"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group rotation-input hide">
<label>rotation (0 -> 360, 0 is South): </label>
<input type="range" name="rotation" min="0" max="360" value="0" maxlength="300">
<input type="text" name="rotation" value="0" maxlength="300">
<a href="" class="update_all" data-field="rotation"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group containable-input">
<label>
<input type="checkbox" name="isContainedWithinViewport" maxlength="300">
<span>Is contained within arena?</span>
</label>
</div>
<div class="field-group draggable-input">
<label>
<input type="checkbox" name="draggable" checked="" maxlength="300">
<span>Is draggable?</span>
</label>
</div>
</div>
</li>
<li class="outline">
<div class="collapsible-header" tabindex="0">Outline</div>
<div class="collapsible-body">
<div class="field-group">
<label>outline thickness (0 = none): </label>
<input type="text" name="outlineThickness" value="2" maxlength="300">
<a href="" class="update_all" data-field="outline"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group">
<label>outline color: </label>
<input type="text" name="outlineColor" value="rgba(0,0,0,0.5)" maxlength="300">
</div>
<div class="field-group outline-style-input">
<label>outline style (solid/dashed/dotted/...): </label>
<input type="text" name="outlineStyle" value="dashed" maxlength="300">
</div>
</div>
</li>
</ul>
</form>
<form class="fields">
<div class="field-group label-info">
<label>label: </label>
<input type="text" name="label" value="Waymark 2" maxlength="300">
<a href="" class="update_all" data-field="label"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group group-info">
<label>layer group: </label>
<input type="text" name="group" value="Waymarks" maxlength="300">
<a href="" class="update_all" data-field="group"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group hide-label">
<label>
<input type="checkbox" name="hideLabel" checked="" maxlength="300">
<span>Hide Label?</span>
<a href="" class="update_all" data-field="hideLabel"><i class="material-icons">update_all</i></a>
</label>
</div>
<ul class="collapsible expandable">
<li class="style">
<div class="collapsible-header" tabindex="0">Styles</div>
<div class="collapsible-body">
<div class="field-group size-input ">
<label>size (yawl*2): </label>
<input type="text" name="size" value="1.5" maxlength="300">
<a href="" class="update_all" data-field="size"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group width-input hide">
<label>width (yawl*2): </label>
<input type="text" name="width" value="1" maxlength="300">
<a href="" class="update_all" data-field="width"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group height-input hide">
<label>height (yawl*2): </label>
<input type="text" name="height" value="1" maxlength="300">
<a href="" class="update_all" data-field="height"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group background-image-input">
<label>background image (URL): </label>
<input type="text" name="backgroundImage" value="https://ff14.toolboxgaming.space/assets/images/waymark2.png" maxlength="300">
<a href="" class="update_all" data-field="backgroundImage"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group background-mode-input">
<label>Background Mode: </label>
<select name="backgroundMode" class="browser-default">
<option value="contained" selected="">Contained</option>
<option value="stretched">Stretched</option>
</select>
<a href="" class="update_all" data-field="backgroundMode"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group background-color-input">
<label>background color (hex/rgb(0,0,0)/rgba(0,0,0,1)): </label>
<input type="text" name="backgroundColor" value="transparent" maxlength="300">
<a href="" class="update_all" data-field="backgroundColor"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group shape-input hide">
<label>Shape: </label>
<select name="shape" class="browser-default">
<option value="square" selected="">square</option>
<option value="circle">circle</option>
</select>
<a href="" class="update_all" data-field="shape"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group opacity-input">
<label>opacity (0-100): </label>
<input type="range" name="opacity" min="0" max="100" value="100" maxlength="300">
<input type="text" name="opacity" value="100" maxlength="300">
<a href="" class="update_all" data-field="opacity"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group animation-input">
<label>Animation: </label>
<select name="animation" class="browser-default">
</select>
<a href="" class="update_all" data-field="animation"><i class="material-icons">update_all</i></a>
</div>
</div>
</li>
<li class="position">
<div class="collapsible-header" tabindex="0">Position</div>
<div class="collapsible-body">
<div class="field-group posX-input">
<label>x: </label>
<input type="text" name="posX" value="15.2" maxlength="300">
<a href="" class="update_all" data-field="position"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group posY-input">
<label>y: </label>
<input type="text" name="posY" value="3" maxlength="300">
</div>
<div class="field-group layer-index">
<label class="tooltipped" data-tooltip="this decides the priority<br>which object appears on top of the other" data-position="right">Layer Index: </label>
<input type="text" name="layerIndex" value="10" maxlength="300">
<a href="" class="update_all" data-field="layerIndex"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group rotation-input hide">
<label>rotation (0 -> 360, 0 is South): </label>
<input type="range" name="rotation" min="0" max="360" value="0" maxlength="300">
<input type="text" name="rotation" value="0" maxlength="300">
<a href="" class="update_all" data-field="rotation"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group containable-input">
<label>
<input type="checkbox" name="isContainedWithinViewport" maxlength="300">
<span>Is contained within arena?</span>
</label>
</div>
<div class="field-group draggable-input">
<label>
<input type="checkbox" name="draggable" checked="" maxlength="300">
<span>Is draggable?</span>
</label>
</div>
</div>
</li>
<li class="outline">
<div class="collapsible-header" tabindex="0">Outline</div>
<div class="collapsible-body">
<div class="field-group">
<label>outline thickness (0 = none): </label>
<input type="text" name="outlineThickness" value="2" maxlength="300">
<a href="" class="update_all" data-field="outline"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group">
<label>outline color: </label>
<input type="text" name="outlineColor" value="rgba(0,0,0,0.5)" maxlength="300">
</div>
<div class="field-group outline-style-input">
<label>outline style (solid/dashed/dotted/...): </label>
<input type="text" name="outlineStyle" value="dashed" maxlength="300">
</div>
</div>
</li>
</ul>
</form>
<form class="fields">
<div class="field-group label-info">
<label>label: </label>
<input type="text" name="label" value="Waymark 3" maxlength="300">
<a href="" class="update_all" data-field="label"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group group-info">
<label>layer group: </label>
<input type="text" name="group" value="Waymarks" maxlength="300">
<a href="" class="update_all" data-field="group"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group hide-label">
<label>
<input type="checkbox" name="hideLabel" checked="" maxlength="300">
<span>Hide Label?</span>
<a href="" class="update_all" data-field="hideLabel"><i class="material-icons">update_all</i></a>
</label>
</div>
<ul class="collapsible expandable">
<li class="style">
<div class="collapsible-header" tabindex="0">Styles</div>
<div class="collapsible-body">
<div class="field-group size-input ">
<label>size (yawl*2): </label>
<input type="text" name="size" value="1.5" maxlength="300">
<a href="" class="update_all" data-field="size"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group width-input hide">
<label>width (yawl*2): </label>
<input type="text" name="width" value="1" maxlength="300">
<a href="" class="update_all" data-field="width"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group height-input hide">
<label>height (yawl*2): </label>
<input type="text" name="height" value="1" maxlength="300">
<a href="" class="update_all" data-field="height"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group background-image-input">
<label>background image (URL): </label>
<input type="text" name="backgroundImage" value="https://ff14.toolboxgaming.space/assets/images/waymark3.png" maxlength="300">
<a href="" class="update_all" data-field="backgroundImage"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group background-mode-input">
<label>Background Mode: </label>
<select name="backgroundMode" class="browser-default">
<option value="contained" selected="">Contained</option>
<option value="stretched">Stretched</option>
</select>
<a href="" class="update_all" data-field="backgroundMode"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group background-color-input">
<label>background color (hex/rgb(0,0,0)/rgba(0,0,0,1)): </label>
<input type="text" name="backgroundColor" value="transparent" maxlength="300">
<a href="" class="update_all" data-field="backgroundColor"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group shape-input hide">
<label>Shape: </label>
<select name="shape" class="browser-default">
<option value="square" selected="">square</option>
<option value="circle">circle</option>
</select>
<a href="" class="update_all" data-field="shape"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group opacity-input">
<label>opacity (0-100): </label>
<input type="range" name="opacity" min="0" max="100" value="100" maxlength="300">
<input type="text" name="opacity" value="100" maxlength="300">
<a href="" class="update_all" data-field="opacity"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group animation-input">
<label>Animation: </label>
<select name="animation" class="browser-default">
</select>
<a href="" class="update_all" data-field="animation"><i class="material-icons">update_all</i></a>
</div>
</div>
</li>
<li class="position">
<div class="collapsible-header" tabindex="0">Position</div>
<div class="collapsible-body">
<div class="field-group posX-input">
<label>x: </label>
<input type="text" name="posX" value="15.2" maxlength="300">
<a href="" class="update_all" data-field="position"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group posY-input">
<label>y: </label>
<input type="text" name="posY" value="5" maxlength="300">
</div>
<div class="field-group layer-index">
<label class="tooltipped" data-tooltip="this decides the priority<br>which object appears on top of the other" data-position="right">Layer Index: </label>
<input type="text" name="layerIndex" value="10" maxlength="300">
<a href="" class="update_all" data-field="layerIndex"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group rotation-input hide">
<label>rotation (0 -> 360, 0 is South): </label>
<input type="range" name="rotation" min="0" max="360" value="0" maxlength="300">
<input type="text" name="rotation" value="0" maxlength="300">
<a href="" class="update_all" data-field="rotation"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group containable-input">
<label>
<input type="checkbox" name="isContainedWithinViewport" maxlength="300">
<span>Is contained within arena?</span>
</label>
</div>
<div class="field-group draggable-input">
<label>
<input type="checkbox" name="draggable" checked="" maxlength="300">
<span>Is draggable?</span>
</label>
</div>
</div>
</li>
<li class="outline">
<div class="collapsible-header" tabindex="0">Outline</div>
<div class="collapsible-body">
<div class="field-group">
<label>outline thickness (0 = none): </label>
<input type="text" name="outlineThickness" value="2" maxlength="300">
<a href="" class="update_all" data-field="outline"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group">
<label>outline color: </label>
<input type="text" name="outlineColor" value="rgba(0,0,0,0.5)" maxlength="300">
</div>
<div class="field-group outline-style-input">
<label>outline style (solid/dashed/dotted/...): </label>
<input type="text" name="outlineStyle" value="dashed" maxlength="300">
</div>
</div>
</li>
</ul>
</form>
<form class="fields">
<div class="field-group label-info">
<label>label: </label>
<input type="text" name="label" value="Waymark 4" maxlength="300">
<a href="" class="update_all" data-field="label"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group group-info">
<label>layer group: </label>
<input type="text" name="group" value="Waymarks" maxlength="300">
<a href="" class="update_all" data-field="group"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group hide-label">
<label>
<input type="checkbox" name="hideLabel" checked="" maxlength="300">
<span>Hide Label?</span>
<a href="" class="update_all" data-field="hideLabel"><i class="material-icons">update_all</i></a>
</label>
</div>
<ul class="collapsible expandable">
<li class="style">
<div class="collapsible-header" tabindex="0">Styles</div>
<div class="collapsible-body">
<div class="field-group size-input ">
<label>size (yawl*2): </label>
<input type="text" name="size" value="1.5" maxlength="300">
<a href="" class="update_all" data-field="size"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group width-input hide">
<label>width (yawl*2): </label>
<input type="text" name="width" value="1" maxlength="300">
<a href="" class="update_all" data-field="width"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group height-input hide">
<label>height (yawl*2): </label>
<input type="text" name="height" value="1" maxlength="300">
<a href="" class="update_all" data-field="height"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group background-image-input">
<label>background image (URL): </label>
<input type="text" name="backgroundImage" value="https://ff14.toolboxgaming.space/assets/images/waymark4.png" maxlength="300">
<a href="" class="update_all" data-field="backgroundImage"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group background-mode-input">
<label>Background Mode: </label>
<select name="backgroundMode" class="browser-default">
<option value="contained" selected="">Contained</option>
<option value="stretched">Stretched</option>
</select>
<a href="" class="update_all" data-field="backgroundMode"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group background-color-input">
<label>background color (hex/rgb(0,0,0)/rgba(0,0,0,1)): </label>
<input type="text" name="backgroundColor" value="transparent" maxlength="300">
<a href="" class="update_all" data-field="backgroundColor"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group shape-input hide">
<label>Shape: </label>
<select name="shape" class="browser-default">
<option value="square" selected="">square</option>
<option value="circle">circle</option>
</select>
<a href="" class="update_all" data-field="shape"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group opacity-input">
<label>opacity (0-100): </label>
<input type="range" name="opacity" min="0" max="100" value="100" maxlength="300">
<input type="text" name="opacity" value="100" maxlength="300">
<a href="" class="update_all" data-field="opacity"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group animation-input">
<label>Animation: </label>
<select name="animation" class="browser-default">
</select>
<a href="" class="update_all" data-field="animation"><i class="material-icons">update_all</i></a>
</div>
</div>
</li>
<li class="position">
<div class="collapsible-header" tabindex="0">Position</div>
<div class="collapsible-body">
<div class="field-group posX-input">
<label>x: </label>
<input type="text" name="posX" value="15.2" maxlength="300">
<a href="" class="update_all" data-field="position"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group posY-input">
<label>y: </label>
<input type="text" name="posY" value="7" maxlength="300">
</div>
<div class="field-group layer-index">
<label class="tooltipped" data-tooltip="this decides the priority<br>which object appears on top of the other" data-position="right">Layer Index: </label>
<input type="text" name="layerIndex" value="10" maxlength="300">
<a href="" class="update_all" data-field="layerIndex"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group rotation-input hide">
<label>rotation (0 -> 360, 0 is South): </label>
<input type="range" name="rotation" min="0" max="360" value="0" maxlength="300">
<input type="text" name="rotation" value="0" maxlength="300">
<a href="" class="update_all" data-field="rotation"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group containable-input">
<label>
<input type="checkbox" name="isContainedWithinViewport" maxlength="300">
<span>Is contained within arena?</span>
</label>
</div>
<div class="field-group draggable-input">
<label>
<input type="checkbox" name="draggable" checked="" maxlength="300">
<span>Is draggable?</span>
</label>
</div>
</div>
</li>
<li class="outline">
<div class="collapsible-header" tabindex="0">Outline</div>
<div class="collapsible-body">
<div class="field-group">
<label>outline thickness (0 = none): </label>
<input type="text" name="outlineThickness" value="2" maxlength="300">
<a href="" class="update_all" data-field="outline"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group">
<label>outline color: </label>
<input type="text" name="outlineColor" value="rgba(0,0,0,0.5)" maxlength="300">
</div>
<div class="field-group outline-style-input">
<label>outline style (solid/dashed/dotted/...): </label>
<input type="text" name="outlineStyle" value="dashed" maxlength="300">
</div>
</div>
</li>
</ul>
</form>
<form class="fields">
<div class="field-group label-info">
<label>label: </label>
<input type="text" name="label" value="Main Boss" maxlength="300">
<a href="" class="update_all" data-field="label"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group group-info">
<label>layer group: </label>
<input type="text" name="group" value="Enemies" maxlength="300">
<a href="" class="update_all" data-field="group"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group hide-label">
<label>
<input type="checkbox" name="hideLabel" maxlength="300">
<span>Hide Label?</span>
<a href="" class="update_all" data-field="hideLabel"><i class="material-icons">update_all</i></a>
</label>
</div>
<ul class="collapsible expandable">
<li class="style">
<div class="collapsible-header" tabindex="0">Styles</div>
<div class="collapsible-body">
<div class="field-group size-input">
<label>size (yawl*2): </label>
<input type="text" name="size" value="4" maxlength="300">
<a href="" class="update_all" data-field="size"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group width-input hide">
<label>width (yawl*2): </label>
<input type="text" name="width" value="1" maxlength="300">
<a href="" class="update_all" data-field="width"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group height-input hide">
<label>height (yawl*2): </label>
<input type="text" name="height" value="1" maxlength="300">
<a href="" class="update_all" data-field="height"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group background-image-input">
<label>background image (URL): </label>
<input type="text" name="backgroundImage" value="https://media.discordapp.net/attachments/472751460132716568/740203091487621181/1BNpcName.png" maxlength="300">
<a href="" class="update_all" data-field="backgroundImage"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group background-mode-input">
<label>Background Mode: </label>
<select name="backgroundMode" class="browser-default">
<option value="contained" selected="">Contained</option>
<option value="stretched">Stretched</option>
</select>
<a href="" class="update_all" data-field="backgroundMode"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group background-color-input">
<label>background color (hex/rgb(0,0,0)/rgba(0,0,0,1)): </label>
<input type="text" name="backgroundColor" value="transparent" maxlength="300">
<a href="" class="update_all" data-field="backgroundColor"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group shape-input">
<label>Shape: </label>
<select name="shape" class="browser-default">
<option value="square">square</option>
<option value="circle" selected="">circle</option>
</select>
<a href="" class="update_all" data-field="shape"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group opacity-input">
<label>opacity (0-100): </label>
<input type="range" name="opacity" min="0" max="100" value="100" maxlength="300">
<input type="text" name="opacity" value="100" maxlength="300">
<a href="" class="update_all" data-field="opacity"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group animation-input">
<label>Animation: </label>
<select name="animation" class="browser-default">
<option value="">--No animation--</option>
<option value="pulse">pulse</option>
<option value="blink">blink</option>
<option value="glow">glow</option>
</select>
<a href="" class="update_all" data-field="animation"><i class="material-icons">update_all</i></a>
</div>
</div>
</li>
<li class="position">
<div class="collapsible-header" tabindex="0">Position</div>
<div class="collapsible-body">
<div class="field-group posX-input">
<label>x: </label>
<input type="text" name="posX" value="5.5" maxlength="300">
<a href="" class="update_all" data-field="position"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group posY-input">
<label>y: </label>
<input type="text" name="posY" value="0.5" maxlength="300">
</div>
<div class="field-group layer-index">
<label class="tooltipped" data-tooltip="this decides the priority<br>which object appears on top of the other" data-position="right">Layer Index: </label>
<input type="text" name="layerIndex" value="20" maxlength="300">
<a href="" class="update_all" data-field="layerIndex"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group rotation-input">
<label>rotation (0 -> 360, 0 is South): </label>
<input type="range" name="rotation" min="0" max="360" value="0" maxlength="300">
<input type="text" name="rotation" value="0" maxlength="300">
<a href="" class="update_all" data-field="rotation"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group containable-input">
<label>
<input type="checkbox" name="isContainedWithinViewport" checked="" maxlength="300">
<span>Is contained within arena?</span>
</label>
</div>
<div class="field-group draggable-input">
<label>
<input type="checkbox" name="draggable" checked="" maxlength="300">
<span>Is draggable?</span>
</label>
</div>
</div>
</li>
<li class="outline">
<div class="collapsible-header" tabindex="0">Outline</div>
<div class="collapsible-body">
<div class="field-group">
<label>outline thickness (0 = none): </label>
<input type="text" name="outlineThickness" value="1" maxlength="300">
<a href="" class="update_all" data-field="outline"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group">
<label>outline color: </label>
<input type="text" name="outlineColor" value="rgba(0,0,0,0.3)" maxlength="300">
</div>
<div class="field-group outline-style-input">
<label>outline style (solid/dashed/dotted/...): </label>
<input type="text" name="outlineStyle" value="dashed" maxlength="300">
</div>
</div>
</li>
</ul>
<ul class="collapsible buff-icons">
<li>
<div class="collapsible-header" tabindex="0">Debuff Icons</div>
<div class="collapsible-body">
<div class="field-group browser-default">
<label>Icon 1 (URL): </label>
<a href="" class="search-icon" data-field="buffIcon1Url"><i class="material-icons">search</i></a>
<input type="text" name="buffIcon1Url" value="" maxlength="300">
<a href="" class="update_all" data-field="buffIcon1Url"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group browser-default">
<label>Icon 2 (URL): </label>
<a href="" class="search-icon" data-field="buffIcon2Url"><i class="material-icons">search</i></a>
<input type="text" name="buffIcon2Url" value="" maxlength="300">
<a href="" class="update_all" data-field="buffIcon2Url"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group browser-default">
<label>Icon 3 (URL): </label>
<a href="" class="search-icon" data-field="buffIcon3Url"><i class="material-icons">search</i></a>
<input type="text" name="buffIcon3Url" value="" maxlength="300">
<a href="" class="update_all" data-field="buffIcon3Url"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group browser-default">
<label>Icon 4 (URL): </label>
<a href="" class="search-icon" data-field="buffIcon4Url"><i class="material-icons">search</i></a>
<input type="text" name="buffIcon4Url" value="" maxlength="300">
<a href="" class="update_all" data-field="buffIcon4Url"><i class="material-icons">update_all</i></a>
</div>
</div>
</li>
</ul>
<ul class="collapsible marker-icon">
<li>
<div class="collapsible-header" tabindex="0">Marker</div>
<div class="collapsible-body">
<div class="field-group browser-default">
<label class="tooltipped" data-tooltip="Designed by Denmo">Marker: </label>
<select name="marker" class="browser-default">
<option value="" selected="">--NO MARKER--</option>
<option value="custom">--CUSTOM MARKER--</option>
<optgroup label="Common">
<option value="target">Basic Target</option>
<option value="sharpTarget">Sharp Target</option>
<option value="tankDanger">Tank Danger</option>
<option value="tankWarning">Tank Warning</option>
<option value="earthShaker">Earth Shaker</option>
<option value="gaze">Gaze</option>
<option value="minusMagnet">Minus Magnet</option>
<option value="plusMagnet">Plus Magnet</option>
<option value="accelerationBomb">Acceleration Bomb</option>
</optgroup>
<optgroup label="Limit Cut">
<option value="limitCut1Red">Limit Cut 1 Red</option>
<option value="limitCut1Blue">Limit Cut 1 Blue</option>
<option value="limitCut2Red">Limit Cut 2 Red</option>
<option value="limitCut2Blue">Limit Cut 2 Blue</option>
<option value="limitCut3Red">Limit Cut 3 Red</option>
<option value="limitCut3Blue">Limit Cut 3 Blue</option>
<option value="limitCut4Red">Limit Cut 4 Red</option>
<option value="limitCut4Blue">Limit Cut 4 Blue</option>
<option value="limitCut5Red">Limit Cut 5 Red</option>
<option value="limitCut5Blue">Limit Cut 5 Blue</option>
<option value="limitCut6Red">Limit Cut 6 Red</option>
<option value="limitCut6Blue">Limit Cut 6 Blue</option>
<option value="limitCut7Red">Limit Cut 7 Red</option>
<option value="limitCut7Blue">Limit Cut 7 Blue</option>
<option value="limitCut8Red">Limit Cut 8 Red</option>
<option value="limitCut8Blue">Limit Cut 8 Blue</option>
</optgroup>
<optgroup label="DSR">
<option value="dsrX">X icon</option>
<option value="dsrO">O icon</option>
<option value="dsrSquare">Square icon</option>
<option value="dsrTriangle">Triangle icon</option>
</optgroup>
</select>
<a href="" class="update_all" data-field="marker"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group browser-default customMarker-input hide">
<label>Custom Marker URL: </label>
<a href="" class="search-icon" data-field="customMarker"><i class="material-icons">search</i></a>
<input type="text" name="customMarker" value="" maxlength="300">
<a href="" class="update_all" data-field="customMarker"><i class="material-icons">update_all</i></a>
</div>
</div>
</li>
</ul>
<ul class="collapsible enemy-agro">
<li>
<div class="collapsible-header" tabindex="0">Boss Agro</div>
<div class="collapsible-body">
<div class="field-group browser-default">
<label>Current Tank: </label>
<select name="currentTankID" class="browser-default">
<option value="">--select a tank--</option>
<option value="tank1" selected="">DRK</option>
<option value="tank2">GNB</option>
</select>
</div>
<div class="field-group">
<label>
<input type="checkbox" name="isFollowingTank" maxlength="300">
<span>Is following tank?</span>
</label>
</div>
</div>
</li>
</ul>
<ul class="collapsible enemy-cast-bar">
<li>
<div class="collapsible-header" tabindex="0">Boss Cast Bar</div>
<div class="collapsible-body">
<div class="field-group">
<label>Action: </label>
<input type="text" name="castBar_skill" value="Hello World" maxlength="300">
</div>
<div class="field-group">
<label>Cast Progress (0-100): </label>
<input type="range" name="castBar_progress" min="0" max="100" value="20" maxlength="300">
<input type="text" name="castBar_progress" value="20" maxlength="300">
</div>
<div class="field-group">
<label>
<input type="checkbox" name="castBar_show" maxlength="300">
<span>Is boss casting?</span>
</label>
</div>
</div>
</li>
</ul>
</form>
<form class="fields">
<div class="field-group label-info" style="display: none;">
<label>label: </label>
<input type="text" name="label" value="" maxlength="300">
<a href="" class="update_all" data-field="label"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group group-info hide">
<label>layer group: </label>
<input type="text" name="group" value="Objects" maxlength="300">
<a href="" class="update_all" data-field="group"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group hide-label" style="display: none;">
<label>
<input type="checkbox" name="hideLabel" maxlength="300">
<span>Hide Label?</span>
<a href="" class="update_all" data-field="hideLabel"><i class="material-icons">update_all</i></a>
</label>
</div>
<ul class="collapsible expandable">
<li class="style">
<div class="collapsible-header" tabindex="0">Styles</div>
<div class="collapsible-body">
<div class="field-group size-input hide">
<label>size (yawl*2): </label>
<input type="text" name="size" value="2" maxlength="300">
<a href="" class="update_all" data-field="size"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group width-input ">
<label>width (yawl*2): </label>
<input type="text" name="width" value="2" maxlength="300">
<a href="" class="update_all" data-field="width"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group height-input ">
<label>height (yawl*2): </label>
<input type="text" name="height" value="2" maxlength="300">
<a href="" class="update_all" data-field="height"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group background-image-input">
<label>background image (URL): </label>
<input type="text" name="backgroundImage" value="" maxlength="300">
<a href="" class="update_all" data-field="backgroundImage"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group background-mode-input">
<label>Background Mode: </label>
<select name="backgroundMode" class="browser-default">
<option value="contained" selected="">Contained</option>
<option value="stretched">Stretched</option>
</select>
<a href="" class="update_all" data-field="backgroundMode"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group background-color-input">
<label>background color (hex/rgb(0,0,0)/rgba(0,0,0,1)): </label>
<input type="text" name="backgroundColor" value="#cc0000" maxlength="300">
<a href="" class="update_all" data-field="backgroundColor"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group shape-input">
<label>Shape: </label>
<select name="shape" class="browser-default">
<option value="square">square</option>
<option value="circle" selected="">circle</option>
</select>
<a href="" class="update_all" data-field="shape"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group opacity-input">
<label>opacity (0-100): </label>
<input type="range" name="opacity" min="0" max="100" value="0" maxlength="300">
<input type="text" name="opacity" value="0" maxlength="300">
<a href="" class="update_all" data-field="opacity"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group animation-input">
<label>Animation: </label>
<select name="animation" class="browser-default">
</select>
<a href="" class="update_all" data-field="animation"><i class="material-icons">update_all</i></a>
</div>
</div>
</li>
<li class="position">
<div class="collapsible-header" tabindex="0">Position</div>
<div class="collapsible-body">
<div class="field-group posX-input hide">
<label>x: </label>
<input type="text" name="posX" value="7" maxlength="300">
<a href="" class="update_all" data-field="position"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group posY-input hide">
<label>y: </label>
<input type="text" name="posY" value="13" maxlength="300">
</div>
<div class="field-group layer-index" style="display: none;">
<label class="tooltipped" data-tooltip="this decides the priority<br>which object appears on top of the other" data-position="right">Layer Index: </label>
<input type="text" name="layerIndex" value="-1" maxlength="300">
<a href="" class="update_all" data-field="layerIndex"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group rotation-input ">
<label>rotation (0 -> 360, 0 is South): </label>
<input type="range" name="rotation" min="0" max="360" value="180" maxlength="300">
<input type="text" name="rotation" value="180" maxlength="300">
<a href="" class="update_all" data-field="rotation"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group containable-input hide">
<label>
<input type="checkbox" name="isContainedWithinViewport" maxlength="300">
<span>Is contained within arena?</span>
</label>
</div>
<div class="field-group draggable-input hide">
<label>
<input type="checkbox" name="draggable" maxlength="300">
<span>Is draggable?</span>
</label>
</div>
</div>
</li>
<li class="outline">
<div class="collapsible-header" tabindex="0">Outline</div>
<div class="collapsible-body">
<div class="field-group">
<label>outline thickness (0 = none): </label>
<input type="text" name="outlineThickness" value="0" maxlength="300">
<a href="" class="update_all" data-field="outline"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group">
<label>outline color: </label>
<input type="text" name="outlineColor" value="rgba(0,0,0,0.3)" maxlength="300">
</div>
<div class="field-group outline-style-input">
<label>outline style (solid/dashed/dotted/...): </label>
<input type="text" name="outlineStyle" value="dashed" maxlength="300">
</div>
</div>
</li>
</ul>
</form>
<form class="fields">
<div class="field-group label-info">
<label>label: </label>
<input type="text" name="label" value="Add 1" maxlength="300">
<a href="" class="update_all" data-field="label"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group group-info">
<label>layer group: </label>
<input type="text" name="group" value="Enemies" maxlength="300">
<a href="" class="update_all" data-field="group"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group hide-label">
<label>
<input type="checkbox" name="hideLabel" maxlength="300">
<span>Hide Label?</span>
<a href="" class="update_all" data-field="hideLabel"><i class="material-icons">update_all</i></a>
</label>
</div>
<ul class="collapsible expandable">
<li class="style">
<div class="collapsible-header" tabindex="0">Styles</div>
<div class="collapsible-body">
<div class="field-group size-input">
<label>size (yawl*2): </label>
<input type="text" name="size" value="2" maxlength="300">
<a href="" class="update_all" data-field="size"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group width-input hide">
<label>width (yawl*2): </label>
<input type="text" name="width" value="1" maxlength="300">
<a href="" class="update_all" data-field="width"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group height-input hide">
<label>height (yawl*2): </label>
<input type="text" name="height" value="1" maxlength="300">
<a href="" class="update_all" data-field="height"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group background-image-input">
<label>background image (URL): </label>
<input type="text" name="backgroundImage" value="https://xivapi.com/c/BNpcName.png" maxlength="300">
<a href="" class="update_all" data-field="backgroundImage"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group background-mode-input">
<label>Background Mode: </label>
<select name="backgroundMode" class="browser-default">
<option value="contained" selected="">Contained</option>
<option value="stretched">Stretched</option>
</select>
<a href="" class="update_all" data-field="backgroundMode"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group background-color-input">
<label>background color (hex/rgb(0,0,0)/rgba(0,0,0,1)): </label>
<input type="text" name="backgroundColor" value="transparent" maxlength="300">
<a href="" class="update_all" data-field="backgroundColor"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group shape-input">
<label>Shape: </label>
<select name="shape" class="browser-default">
<option value="square">square</option>
<option value="circle" selected="">circle</option>
</select>
<a href="" class="update_all" data-field="shape"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group opacity-input">
<label>opacity (0-100): </label>
<input type="range" name="opacity" min="0" max="100" value="100" maxlength="300">
<input type="text" name="opacity" value="100" maxlength="300">
<a href="" class="update_all" data-field="opacity"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group animation-input">
<label>Animation: </label>
<select name="animation" class="browser-default">
<option value="">--No animation--</option>
<option value="float">float</option>
<option value="glow">glow</option>
<option value="blink">blink</option>
<option value="pulse">pulse</option>
</select>
<a href="" class="update_all" data-field="animation"><i class="material-icons">update_all</i></a>
</div>
</div>
</li>
<li class="position">
<div class="collapsible-header" tabindex="0">Position</div>
<div class="collapsible-body">
<div class="field-group posX-input">
<label>x: </label>
<input type="text" name="posX" value="6" maxlength="300">
<a href="" class="update_all" data-field="position"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group posY-input">
<label>y: </label>
<input type="text" name="posY" value="1" maxlength="300">
</div>
<div class="field-group layer-index">
<label class="tooltipped" data-tooltip="this decides the priority<br>which object appears on top of the other" data-position="right">Layer Index: </label>
<input type="text" name="layerIndex" value="20" maxlength="300">
<a href="" class="update_all" data-field="layerIndex"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group rotation-input">
<label>rotation (0 -> 360, 0 is South): </label>
<input type="range" name="rotation" min="0" max="360" value="0" maxlength="300">
<input type="text" name="rotation" value="0" maxlength="300">
<a href="" class="update_all" data-field="rotation"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group containable-input">
<label>
<input type="checkbox" name="isContainedWithinViewport" checked="" maxlength="300">
<span>Is contained within arena?</span>
</label>
</div>
<div class="field-group draggable-input">
<label>
<input type="checkbox" name="draggable" checked="" maxlength="300">
<span>Is draggable?</span>
</label>
</div>
</div>
</li>
<li class="outline">
<div class="collapsible-header" tabindex="0">Outline</div>
<div class="collapsible-body">
<div class="field-group">
<label>outline thickness (0 = none): </label>
<input type="text" name="outlineThickness" value="1" maxlength="300">
<a href="" class="update_all" data-field="outline"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group">
<label>outline color: </label>
<input type="text" name="outlineColor" value="rgba(0,0,0,0.3)" maxlength="300">
</div>
<div class="field-group outline-style-input">
<label>outline style (solid/dashed/dotted/...): </label>
<input type="text" name="outlineStyle" value="dashed" maxlength="300">
</div>
</div>
</li>
</ul>
<ul class="collapsible buff-icons">
<li>
<div class="collapsible-header" tabindex="0">Debuff Icons</div>
<div class="collapsible-body">
<div class="field-group browser-default">
<label>Icon 1 (URL): </label>
<a href="" class="search-icon" data-field="buffIcon1Url"><i class="material-icons">search</i></a>
<input type="text" name="buffIcon1Url" value="" maxlength="300">
<a href="" class="update_all" data-field="buffIcon1Url"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group browser-default">
<label>Icon 2 (URL): </label>
<a href="" class="search-icon" data-field="buffIcon2Url"><i class="material-icons">search</i></a>
<input type="text" name="buffIcon2Url" value="" maxlength="300">
<a href="" class="update_all" data-field="buffIcon2Url"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group browser-default">
<label>Icon 3 (URL): </label>
<a href="" class="search-icon" data-field="buffIcon3Url"><i class="material-icons">search</i></a>
<input type="text" name="buffIcon3Url" value="" maxlength="300">
<a href="" class="update_all" data-field="buffIcon3Url"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group browser-default">
<label>Icon 4 (URL): </label>
<a href="" class="search-icon" data-field="buffIcon4Url"><i class="material-icons">search</i></a>
<input type="text" name="buffIcon4Url" value="" maxlength="300">
<a href="" class="update_all" data-field="buffIcon4Url"><i class="material-icons">update_all</i></a>
</div>
</div>
</li>
</ul>
<ul class="collapsible marker-icon">
<li>
<div class="collapsible-header" tabindex="0">Marker</div>
<div class="collapsible-body">
<div class="field-group browser-default">
<label class="tooltipped" data-tooltip="Designed by Denmo">Marker: </label>
<select name="marker" class="browser-default">
<option value="" selected="">--NO MARKER--</option>
<option value="custom">--CUSTOM MARKER--</option>
<optgroup label="Common">
<option value="target">Basic Target</option>
<option value="sharpTarget">Sharp Target</option>
<option value="tankDanger">Tank Danger</option>
<option value="tankWarning">Tank Warning</option>
<option value="earthShaker">Earth Shaker</option>
<option value="gaze">Gaze</option>
<option value="minusMagnet">Minus Magnet</option>
<option value="plusMagnet">Plus Magnet</option>
<option value="accelerationBomb">Acceleration Bomb</option>
</optgroup>
<optgroup label="Limit Cut">
<option value="limitCut1Red">Limit Cut 1 Red</option>
<option value="limitCut1Blue">Limit Cut 1 Blue</option>
<option value="limitCut2Red">Limit Cut 2 Red</option>
<option value="limitCut2Blue">Limit Cut 2 Blue</option>
<option value="limitCut3Red">Limit Cut 3 Red</option>
<option value="limitCut3Blue">Limit Cut 3 Blue</option>
<option value="limitCut4Red">Limit Cut 4 Red</option>
<option value="limitCut4Blue">Limit Cut 4 Blue</option>
<option value="limitCut5Red">Limit Cut 5 Red</option>
<option value="limitCut5Blue">Limit Cut 5 Blue</option>
<option value="limitCut6Red">Limit Cut 6 Red</option>
<option value="limitCut6Blue">Limit Cut 6 Blue</option>
<option value="limitCut7Red">Limit Cut 7 Red</option>
<option value="limitCut7Blue">Limit Cut 7 Blue</option>
<option value="limitCut8Red">Limit Cut 8 Red</option>
<option value="limitCut8Blue">Limit Cut 8 Blue</option>
</optgroup>
<optgroup label="DSR">
<option value="dsrX">X icon</option>
<option value="dsrO">O icon</option>
<option value="dsrSquare">Square icon</option>
<option value="dsrTriangle">Triangle icon</option>
</optgroup>
</select>
<a href="" class="update_all" data-field="marker"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group browser-default customMarker-input hide">
<label>Custom Marker URL: </label>
<a href="" class="search-icon" data-field="customMarker"><i class="material-icons">search</i></a>
<input type="text" name="customMarker" value="" maxlength="300">
<a href="" class="update_all" data-field="customMarker"><i class="material-icons">update_all</i></a>
</div>
</div>
</li>
</ul>
<ul class="collapsible enemy-agro">
<li>
<div class="collapsible-header" tabindex="0">Boss Agro</div>
<div class="collapsible-body">
<div class="field-group browser-default">
<label>Current Tank: </label>
<select name="currentTankID" class="browser-default">
<option value="">--select a tank--</option>
<option value="tank1">DRK</option>
<option value="tank2">GNB</option>
</select>
</div>
<div class="field-group">
<label>
<input type="checkbox" name="isFollowingTank" maxlength="300">
<span>Is following tank?</span>
</label>
</div>
</div>
</li>
</ul>
<ul class="collapsible enemy-cast-bar">
<li>
<div class="collapsible-header" tabindex="0">Boss Cast Bar</div>
<div class="collapsible-body">
<div class="field-group">
<label>Action: </label>
<input type="text" name="castBar_skill" value="Hello World" maxlength="300">
</div>
<div class="field-group">
<label>Cast Progress (0-100): </label>
<input type="range" name="castBar_progress" min="0" max="100" value="20" maxlength="300">
<input type="text" name="castBar_progress" value="20" maxlength="300">
</div>
<div class="field-group">
<label>
<input type="checkbox" name="castBar_show" maxlength="300">
<span>Is boss casting?</span>
</label>
</div>
</div>
</li>
</ul>
</form>
<form class="fields">
<div class="field-group label-info" style="display: none;">
<label>label: </label>
<input type="text" name="label" value="" maxlength="300">
<a href="" class="update_all" data-field="label"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group group-info hide">
<label>layer group: </label>
<input type="text" name="group" value="Objects" maxlength="300">
<a href="" class="update_all" data-field="group"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group hide-label" style="display: none;">
<label>
<input type="checkbox" name="hideLabel" maxlength="300">
<span>Hide Label?</span>
<a href="" class="update_all" data-field="hideLabel"><i class="material-icons">update_all</i></a>
</label>
</div>
<ul class="collapsible expandable">
<li class="style">
<div class="collapsible-header" tabindex="0">Styles</div>
<div class="collapsible-body">
<div class="field-group size-input hide">
<label>size (yawl*2): </label>
<input type="text" name="size" value="2" maxlength="300">
<a href="" class="update_all" data-field="size"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group width-input">
<label>width (yawl*2): </label>
<input type="text" name="width" value="2" maxlength="300">
<a href="" class="update_all" data-field="width"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group height-input">
<label>height (yawl*2): </label>
<input type="text" name="height" value="2" maxlength="300">
<a href="" class="update_all" data-field="height"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group background-image-input">
<label>background image (URL): </label>
<input type="text" name="backgroundImage" value="" maxlength="300">
<a href="" class="update_all" data-field="backgroundImage"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group background-mode-input">
<label>Background Mode: </label>
<select name="backgroundMode" class="browser-default">
<option value="contained" selected="">Contained</option>
<option value="stretched">Stretched</option>
</select>
<a href="" class="update_all" data-field="backgroundMode"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group background-color-input">
<label>background color (hex/rgb(0,0,0)/rgba(0,0,0,1)): </label>
<input type="text" name="backgroundColor" value="#cc0000" maxlength="300">
<a href="" class="update_all" data-field="backgroundColor"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group shape-input">
<label>Shape: </label>
<select name="shape" class="browser-default">
<option value="square">square</option>
<option value="circle" selected="">circle</option>
</select>
<a href="" class="update_all" data-field="shape"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group opacity-input">
<label>opacity (0-100): </label>
<input type="range" name="opacity" min="0" max="100" value="0" maxlength="300">
<input type="text" name="opacity" value="0" maxlength="300">
<a href="" class="update_all" data-field="opacity"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group animation-input hide">
<label>Animation: </label>
<select name="animation" class="browser-default">
<option value="">--No animation--</option>
</select>
<a href="" class="update_all" data-field="animation"><i class="material-icons">update_all</i></a>
</div>
</div>
</li>
<li class="position">
<div class="collapsible-header" tabindex="0">Position</div>
<div class="collapsible-body">
<div class="field-group posX-input hide">
<label>x: </label>
<input type="text" name="posX" value="7" maxlength="300">
<a href="" class="update_all" data-field="position"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group posY-input hide">
<label>y: </label>
<input type="text" name="posY" value="13" maxlength="300">
</div>
<div class="field-group layer-index" style="display: none;">
<label class="tooltipped" data-tooltip="this decides the priority<br>which object appears on top of the other" data-position="right">Layer Index: </label>
<input type="text" name="layerIndex" value="-1" maxlength="300">
<a href="" class="update_all" data-field="layerIndex"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group rotation-input">
<label>rotation (0 -> 360, 0 is South): </label>
<input type="range" name="rotation" min="0" max="360" value="180" maxlength="300">
<input type="text" name="rotation" value="180" maxlength="300">
<a href="" class="update_all" data-field="rotation"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group containable-input hide">
<label>
<input type="checkbox" name="isContainedWithinViewport" maxlength="300">
<span>Is contained within arena?</span>
</label>
</div>
<div class="field-group draggable-input hide">
<label>
<input type="checkbox" name="draggable" maxlength="300">
<span>Is draggable?</span>
</label>
</div>
</div>
</li>
<li class="outline">
<div class="collapsible-header" tabindex="0">Outline</div>
<div class="collapsible-body">
<div class="field-group">
<label>outline thickness (0 = none): </label>
<input type="text" name="outlineThickness" value="0" maxlength="300">
<a href="" class="update_all" data-field="outline"><i class="material-icons">update_all</i></a>
</div>
<div class="field-group">
<label>outline color: </label>
<input type="text" name="outlineColor" value="rgba(0,0,0,0.3)" maxlength="300">
</div>
<div class="field-group outline-style-input">
<label>outline style (solid/dashed/dotted/...): </label>
<input type="text" name="outlineStyle" value="dashed" maxlength="300">
</div>
</div>
</li>
</ul>
</form>
<form class="fields">
<div class="strat-info">
<ul class="collapsible expandable">
<li class="active">
<div class="collapsible-header" tabindex="0">Strat Information</div>
<div class="collapsible-body" style="display: block;">
<p class="lastSaved-info">Last saved: <span class="lastSaved"></span></p>
<p class="dataSize-info tooltipped" data-tooltip="Maximum size limit is 3.5mb" data-position="left">Data size: <span class="dataSize"></span></p>
<div class="field-group label-info">
<label>label: </label>
<input type="text" name="stratLabel" value="My genius strat" maxlength="300">
</div>
<div class="field-group label-info">
<label>author: </label>
<input type="text" name="author" value="" maxlength="300">
</div>
<div class="field-group browser-default">
<label>Encounter: </label>
<select name="encounter" class="browser-default">
<option value="">--Pick a fight--</option>
<optgroup label="NEW!!">
<option value="p9s">Anabaseios: The Ninth Circle (Savage)</option>
<option value="p10s">Anabaseios: The Tenth Circle (Savage)</option>
<option value="p11s">Anabaseios: The Eleventh Circle (Savage)</option>
<option value="p12s">Anabaseios: The Twelfth Circle (Savage)</option>
<option value="1-64-Ex">The Voidcast Dias (Extreme)</option>
<option value="1-64-Un">Containment Bay Z1T9 (Unreal)</option>
<option value="other">Other</option>
</optgroup>
<optgroup label="ULTIMATE">
<option value="uwu:">The Weapon's Refrain (UWU)</option>
<option value="ucob">The Unending Coil of Bahamut (UCOB)</option>
<option value="tea">The Epic of Alexander (TEA)</option>
<option value="drs">Dragonsong's Reprise (DSR)</option>
<option value="top">The Omega Protocol (TOP)</option>
</optgroup>
</select>
</div>
<div class="field-group">
<label>Privacy Setting: </label>
<select name="privacy" class="browser-default">
<option value="unlisted" selected="">Unlisted</option>
<option value="public">Public</option>
<option value="archived">Archived</option>
</select>
</div>
</div>
</li>
</ul>
</div>
<div class="steps">
<ul class="collapsible expandable">
<li id="strat-steps" class="active">
<div class="collapsible-header" tabindex="0">Steps</div>
<div class="collapsible-body" style="display: block;">
<ul class="step-list"></ul>
</div>
</li>
</ul>
</div>
<div class="field-group note-field">
<label>note: </label>
<textarea name="note"></textarea>
</div>
</form>
Text Content
WE VALUE YOUR PRIVACY We and our partners store and/or access information on a device, such as cookies and process personal data, such as unique identifiers and standard information sent by a device for personalised ads and content, ad and content measurement, and audience insights, as well as to develop and improve products. With your permission we and our partners may use precise geolocation data and identification through device scanning. You may click to consent to our and our partners’ processing as described above. Alternatively you may access more detailed information and change your preferences before consenting or to refuse consenting. Please note that some processing of your personal data may not require your consent, but you have a right to object to such processing. Your preferences will apply to this website only. You can change your preferences at any time by returning to this site or visit our privacy policy. MORE OPTIONSAGREE toolbox gg [_] * Strat Maker * Timeline Planner * searchExplore * About COME SAY HI! For news, updates, feedbacks and resources please join: https://discord.gg/F93Gaar Support me on my Patreon: https://www.patreon.com/toolbox_space For inquiries and feedback, please email me at https://toolbox.gg.space@gmail.com Close * Privacy Policy PRIVACY POLICY WHO WE ARE Our website address is: https://ff14.tollboxgaming.space. WHAT PERSONAL DATA WE COLLECT AND WHY WE COLLECT IT YOUR STRAT AND TIMELINE DATA Your data will be stored when you choose to save them. The data will be identified by an ID number and publicly accessible. As a result anyone can make a copy of your data. No one, however, can edit your data from your ID without your password (you are prompted to set a password when you save). This mechanic is to preserve the data corresponding to the unique ID when you choose to share it. ALL DATA IS PUBLIC and can be previewed, shared and copied by all users. Your Content has a "Privacy Setting", which allow you to choose if your strat will be listed in the Explorer section or not. COOKIES We do NOT use cookies, but we make use of HTML5 local storage which behave very similarly to cookies. The data saved to local storage is for your convenience so that you do not have to re-type your password multiple times while editing your content, and agree to your term and services multipke time, or log in using your discord multiple times when you re-visit the site. Local storage is also used for useful features of the tool such as "copy and paste", "duplicating objects", ...etc. These feature will temporarily save data into local storage and use it as clipboard until you make use of the data again. DISCORD SIGN IN We store your discord user ID (an unique string contains characters and numbers) in order to detect which Content has been created under your discord account. This will help use collect and list these later on for your convinience. we do NOT store any other information other than your discord user ID WHAT RIGHTS YOU HAVE OVER YOUR DATA You can request to receive the exported files of your data. You can also request that we erase any data you created. This does not include we are obligated to keep for administrative, legal, or security purposes PRIVACY POLICY We understand the importance of your privacy as a visitor to this website. We want you to understand how the information you may provide will be used. To better protect your privacy we provide this notice explaining our online information practices and the choices you can make about the way your information is collected and used. To make this notice easy to find, we make it available on our homepage and at every point where personally identifiable information may be requested. INFORMATION COLLECTED Toolboxgaming.space does not collect personal information about you except for the information that you voluntarily provide. We may collect usage information of our site to analyze interest in content and to provide advertisers information on an aggregate basis. No personally identifiable information will be shared with third-party advertising companies. LINKS TO THIRD PARTY WEBSITES We have included links on this site for your use and reference. We are not responsible for the privacy policies on these websites. You should be aware that the privacy policies of these sites may differ from our own. CHANGES TO THIS PRIVACY STATEMENT The contents of this statement may be altered at any time, at our discretion. If you have any questions regarding the privacy policy of Toolboxgaming.space then you may contact me through the contact @ toolbox.gg.space@gmail.com. Best Regards, The ToolboxSpace Team Close Log in with Discord Usernamearrow_drop_down * My Stuffs * Sign out New * addAdd Add * addAdd Zone * addAdd Tether * addAdd VideoPlayer * addAdd Text Edit * adjustModify AOE * content_copyCopy Object * content_pastePaste Object * file_copyDuplicate Object * undoUndo Last Save Action Steps * Open panel * addAdd Step * saveSave Strat * shareShare/Preview * control_point_duplicateSave as new * live_tvLive Share Theme * brightness_mediumDark * brightness_mediumLight compare_arrows ARENA label: update_all layer group: update_all Hide Label? update_all * Styles size (yawl*2): update_all width (yawl*2): update_all height (yawl*2): update_all background image (URL): update_all Background Mode: Contained Stretched update_all background color (hex/rgb(0,0,0)/rgba(0,0,0,1)): update_all Shape: square circle update_all opacity (0-100): update_all Animation: update_all * Position x: update_all y: Layer Index: update_all rotation (0 -> 360, 0 is South): update_all Is contained within arena? Is draggable? * Outline outline thickness (0 = none): update_all outline color: outline style (solid/dashed/dotted/...): save Update TANK label: update_all layer group: update_all Hide Label? update_all * Styles Class: Custom Warrior Dark Knight Paladin Gunbreaker White Mage Scholar Sage Astrologian Dragoon Reaper Ninja Samurai Monk Bard Machinist Dancer Black Mage Red Mage Summoner Blue Mage update_all size (yawl*2): update_all width (yawl*2): update_all height (yawl*2): update_all background image (URL): update_all Background Mode: Contained Stretched update_all background color (hex/rgb(0,0,0)/rgba(0,0,0,1)): update_all Shape: square circle update_all opacity (0-100): update_all Animation: --No animation-- pulse blink glow update_all * Position x: update_all y: Layer Index: update_all rotation (0 -> 360, 0 is South): update_all Is contained within arena? Is draggable? * Outline outline thickness (0 = none): update_all outline color: outline style (solid/dashed/dotted/...): * Debuff Icons Icon 1 (URL): search update_all Icon 2 (URL): search update_all Icon 3 (URL): search update_all Icon 4 (URL): search update_all * Marker Marker: --NO MARKER-- --CUSTOM MARKER-- Basic Target Sharp Target Tank Danger Tank Warning Earth Shaker Gaze Minus Magnet Plus Magnet Acceleration Bomb Limit Cut 1 Red Limit Cut 1 Blue Limit Cut 2 Red Limit Cut 2 Blue Limit Cut 3 Red Limit Cut 3 Blue Limit Cut 4 Red Limit Cut 4 Blue Limit Cut 5 Red Limit Cut 5 Blue Limit Cut 6 Red Limit Cut 6 Blue Limit Cut 7 Red Limit Cut 7 Blue Limit Cut 8 Red Limit Cut 8 Blue X icon O icon Square icon Triangle icon update_all Custom Marker URL: search update_all save Updateadjust Modify AOE DRK > AOE label: update_all layer group: update_all Hide Label? update_all * Styles size (yawl*2): update_all width (yawl*2): update_all height (yawl*2): update_all background image (URL): update_all Background Mode: Contained Stretched update_all background color (hex/rgb(0,0,0)/rgba(0,0,0,1)): update_all Shape: square circle update_all opacity (0-100): update_all Animation: update_all * Position x: update_all y: Layer Index: update_all rotation (0 -> 360, 0 is South): update_all Is contained within arena? Is draggable? * Outline outline thickness (0 = none): update_all outline color: outline style (solid/dashed/dotted/...): save Update TANK label: update_all layer group: update_all Hide Label? update_all * Styles Class: Custom Warrior Dark Knight Paladin Gunbreaker White Mage Scholar Sage Astrologian Dragoon Reaper Ninja Samurai Monk Bard Machinist Dancer Black Mage Red Mage Summoner Blue Mage update_all size (yawl*2): update_all width (yawl*2): update_all height (yawl*2): update_all background image (URL): update_all Background Mode: Contained Stretched update_all background color (hex/rgb(0,0,0)/rgba(0,0,0,1)): update_all Shape: square circle update_all opacity (0-100): update_all Animation: --No animation-- pulse blink glow update_all * Position x: update_all y: Layer Index: update_all rotation (0 -> 360, 0 is South): update_all Is contained within arena? Is draggable? * Outline outline thickness (0 = none): update_all outline color: outline style (solid/dashed/dotted/...): * Debuff Icons Icon 1 (URL): search update_all Icon 2 (URL): search update_all Icon 3 (URL): search update_all Icon 4 (URL): search update_all * Marker Marker: --NO MARKER-- --CUSTOM MARKER-- Basic Target Sharp Target Tank Danger Tank Warning Earth Shaker Gaze Minus Magnet Plus Magnet Acceleration Bomb Limit Cut 1 Red Limit Cut 1 Blue Limit Cut 2 Red Limit Cut 2 Blue Limit Cut 3 Red Limit Cut 3 Blue Limit Cut 4 Red Limit Cut 4 Blue Limit Cut 5 Red Limit Cut 5 Blue Limit Cut 6 Red Limit Cut 6 Blue Limit Cut 7 Red Limit Cut 7 Blue Limit Cut 8 Red Limit Cut 8 Blue X icon O icon Square icon Triangle icon update_all Custom Marker URL: search update_all save Updateadjust Modify AOE GNB > AOE label: update_all layer group: update_all Hide Label? update_all * Styles size (yawl*2): update_all width (yawl*2): update_all height (yawl*2): update_all background image (URL): update_all Background Mode: Contained Stretched update_all background color (hex/rgb(0,0,0)/rgba(0,0,0,1)): update_all Shape: square circle update_all opacity (0-100): update_all Animation: update_all * Position x: update_all y: Layer Index: update_all rotation (0 -> 360, 0 is South): update_all Is contained within arena? Is draggable? * Outline outline thickness (0 = none): update_all outline color: outline style (solid/dashed/dotted/...): save Update HEALER label: update_all layer group: update_all Hide Label? update_all * Styles Class: Custom Warrior Dark Knight Paladin Gunbreaker White Mage Scholar Sage Astrologian Dragoon Reaper Ninja Samurai Monk Bard Machinist Dancer Black Mage Red Mage Summoner Blue Mage update_all size (yawl*2): update_all width (yawl*2): update_all height (yawl*2): update_all background image (URL): update_all Background Mode: Contained Stretched update_all background color (hex/rgb(0,0,0)/rgba(0,0,0,1)): update_all Shape: square circle update_all opacity (0-100): update_all Animation: --No animation-- pulse blink glow update_all * Position x: update_all y: Layer Index: update_all rotation (0 -> 360, 0 is South): update_all Is contained within arena? Is draggable? * Outline outline thickness (0 = none): update_all outline color: outline style (solid/dashed/dotted/...): * Debuff Icons Icon 1 (URL): search update_all Icon 2 (URL): search update_all Icon 3 (URL): search update_all Icon 4 (URL): search update_all * Marker Marker: --NO MARKER-- --CUSTOM MARKER-- Basic Target Sharp Target Tank Danger Tank Warning Earth Shaker Gaze Minus Magnet Plus Magnet Acceleration Bomb Limit Cut 1 Red Limit Cut 1 Blue Limit Cut 2 Red Limit Cut 2 Blue Limit Cut 3 Red Limit Cut 3 Blue Limit Cut 4 Red Limit Cut 4 Blue Limit Cut 5 Red Limit Cut 5 Blue Limit Cut 6 Red Limit Cut 6 Blue Limit Cut 7 Red Limit Cut 7 Blue Limit Cut 8 Red Limit Cut 8 Blue X icon O icon Square icon Triangle icon update_all Custom Marker URL: search update_all save Updateadjust Modify AOE WHM > AOE label: update_all layer group: update_all Hide Label? update_all * Styles size (yawl*2): update_all width (yawl*2): update_all height (yawl*2): update_all background image (URL): update_all Background Mode: Contained Stretched update_all background color (hex/rgb(0,0,0)/rgba(0,0,0,1)): update_all Shape: square circle update_all opacity (0-100): update_all Animation: update_all * Position x: update_all y: Layer Index: update_all rotation (0 -> 360, 0 is South): update_all Is contained within arena? Is draggable? * Outline outline thickness (0 = none): update_all outline color: outline style (solid/dashed/dotted/...): save Update HEALER label: update_all layer group: update_all Hide Label? update_all * Styles Class: Custom Warrior Dark Knight Paladin Gunbreaker White Mage Scholar Sage Astrologian Dragoon Reaper Ninja Samurai Monk Bard Machinist Dancer Black Mage Red Mage Summoner Blue Mage update_all size (yawl*2): update_all width (yawl*2): update_all height (yawl*2): update_all background image (URL): update_all Background Mode: Contained Stretched update_all background color (hex/rgb(0,0,0)/rgba(0,0,0,1)): update_all Shape: square circle update_all opacity (0-100): update_all Animation: --No animation-- pulse blink glow update_all * Position x: update_all y: Layer Index: update_all rotation (0 -> 360, 0 is South): update_all Is contained within arena? Is draggable? * Outline outline thickness (0 = none): update_all outline color: outline style (solid/dashed/dotted/...): * Debuff Icons Icon 1 (URL): search update_all Icon 2 (URL): search update_all Icon 3 (URL): search update_all Icon 4 (URL): search update_all * Marker Marker: --NO MARKER-- --CUSTOM MARKER-- Basic Target Sharp Target Tank Danger Tank Warning Earth Shaker Gaze Minus Magnet Plus Magnet Acceleration Bomb Limit Cut 1 Red Limit Cut 1 Blue Limit Cut 2 Red Limit Cut 2 Blue Limit Cut 3 Red Limit Cut 3 Blue Limit Cut 4 Red Limit Cut 4 Blue Limit Cut 5 Red Limit Cut 5 Blue Limit Cut 6 Red Limit Cut 6 Blue Limit Cut 7 Red Limit Cut 7 Blue Limit Cut 8 Red Limit Cut 8 Blue X icon O icon Square icon Triangle icon update_all Custom Marker URL: search update_all save Updateadjust Modify AOE SCH > AOE label: update_all layer group: update_all Hide Label? update_all * Styles size (yawl*2): update_all width (yawl*2): update_all height (yawl*2): update_all background image (URL): update_all Background Mode: Contained Stretched update_all background color (hex/rgb(0,0,0)/rgba(0,0,0,1)): update_all Shape: square circle update_all opacity (0-100): update_all Animation: update_all * Position x: update_all y: Layer Index: update_all rotation (0 -> 360, 0 is South): update_all Is contained within arena? Is draggable? * Outline outline thickness (0 = none): update_all outline color: outline style (solid/dashed/dotted/...): save Update DPS label: update_all layer group: update_all Hide Label? update_all * Styles Class: Custom Warrior Dark Knight Paladin Gunbreaker White Mage Scholar Sage Astrologian Dragoon Reaper Ninja Samurai Monk Bard Machinist Dancer Black Mage Red Mage Summoner Blue Mage update_all size (yawl*2): update_all width (yawl*2): update_all height (yawl*2): update_all background image (URL): update_all Background Mode: Contained Stretched update_all background color (hex/rgb(0,0,0)/rgba(0,0,0,1)): update_all Shape: square circle update_all opacity (0-100): update_all Animation: --No animation-- pulse blink glow update_all * Position x: update_all y: Layer Index: update_all rotation (0 -> 360, 0 is South): update_all Is contained within arena? Is draggable? * Outline outline thickness (0 = none): update_all outline color: outline style (solid/dashed/dotted/...): * Debuff Icons Icon 1 (URL): search update_all Icon 2 (URL): search update_all Icon 3 (URL): search update_all Icon 4 (URL): search update_all * Marker Marker: --NO MARKER-- --CUSTOM MARKER-- Basic Target Sharp Target Tank Danger Tank Warning Earth Shaker Gaze Minus Magnet Plus Magnet Acceleration Bomb Limit Cut 1 Red Limit Cut 1 Blue Limit Cut 2 Red Limit Cut 2 Blue Limit Cut 3 Red Limit Cut 3 Blue Limit Cut 4 Red Limit Cut 4 Blue Limit Cut 5 Red Limit Cut 5 Blue Limit Cut 6 Red Limit Cut 6 Blue Limit Cut 7 Red Limit Cut 7 Blue Limit Cut 8 Red Limit Cut 8 Blue X icon O icon Square icon Triangle icon update_all Custom Marker URL: search update_all save Updateadjust Modify AOE DNC > AOE label: update_all layer group: update_all Hide Label? update_all * Styles size (yawl*2): update_all width (yawl*2): update_all height (yawl*2): update_all background image (URL): update_all Background Mode: Contained Stretched update_all background color (hex/rgb(0,0,0)/rgba(0,0,0,1)): update_all Shape: square circle update_all opacity (0-100): update_all Animation: update_all * Position x: update_all y: Layer Index: update_all rotation (0 -> 360, 0 is South): update_all Is contained within arena? Is draggable? * Outline outline thickness (0 = none): update_all outline color: outline style (solid/dashed/dotted/...): save Update DPS label: update_all layer group: update_all Hide Label? update_all * Styles Class: Custom Warrior Dark Knight Paladin Gunbreaker White Mage Scholar Sage Astrologian Dragoon Reaper Ninja Samurai Monk Bard Machinist Dancer Black Mage Red Mage Summoner Blue Mage update_all size (yawl*2): update_all width (yawl*2): update_all height (yawl*2): update_all background image (URL): update_all Background Mode: Contained Stretched update_all background color (hex/rgb(0,0,0)/rgba(0,0,0,1)): update_all Shape: square circle update_all opacity (0-100): update_all Animation: --No animation-- pulse blink glow update_all * Position x: update_all y: Layer Index: update_all rotation (0 -> 360, 0 is South): update_all Is contained within arena? Is draggable? * Outline outline thickness (0 = none): update_all outline color: outline style (solid/dashed/dotted/...): * Debuff Icons Icon 1 (URL): search update_all Icon 2 (URL): search update_all Icon 3 (URL): search update_all Icon 4 (URL): search update_all * Marker Marker: --NO MARKER-- --CUSTOM MARKER-- Basic Target Sharp Target Tank Danger Tank Warning Earth Shaker Gaze Minus Magnet Plus Magnet Acceleration Bomb Limit Cut 1 Red Limit Cut 1 Blue Limit Cut 2 Red Limit Cut 2 Blue Limit Cut 3 Red Limit Cut 3 Blue Limit Cut 4 Red Limit Cut 4 Blue Limit Cut 5 Red Limit Cut 5 Blue Limit Cut 6 Red Limit Cut 6 Blue Limit Cut 7 Red Limit Cut 7 Blue Limit Cut 8 Red Limit Cut 8 Blue X icon O icon Square icon Triangle icon update_all Custom Marker URL: search update_all save Updateadjust Modify AOE DRG > AOE label: update_all layer group: update_all Hide Label? update_all * Styles size (yawl*2): update_all width (yawl*2): update_all height (yawl*2): update_all background image (URL): update_all Background Mode: Contained Stretched update_all background color (hex/rgb(0,0,0)/rgba(0,0,0,1)): update_all Shape: square circle update_all opacity (0-100): update_all Animation: update_all * Position x: update_all y: Layer Index: update_all rotation (0 -> 360, 0 is South): update_all Is contained within arena? Is draggable? * Outline outline thickness (0 = none): update_all outline color: outline style (solid/dashed/dotted/...): save Update DPS label: update_all layer group: update_all Hide Label? update_all * Styles Class: Custom Warrior Dark Knight Paladin Gunbreaker White Mage Scholar Sage Astrologian Dragoon Reaper Ninja Samurai Monk Bard Machinist Dancer Black Mage Red Mage Summoner Blue Mage update_all size (yawl*2): update_all width (yawl*2): update_all height (yawl*2): update_all background image (URL): update_all Background Mode: Contained Stretched update_all background color (hex/rgb(0,0,0)/rgba(0,0,0,1)): update_all Shape: square circle update_all opacity (0-100): update_all Animation: --No animation-- pulse blink glow update_all * Position x: update_all y: Layer Index: update_all rotation (0 -> 360, 0 is South): update_all Is contained within arena? Is draggable? * Outline outline thickness (0 = none): update_all outline color: outline style (solid/dashed/dotted/...): * Debuff Icons Icon 1 (URL): search update_all Icon 2 (URL): search update_all Icon 3 (URL): search update_all Icon 4 (URL): search update_all * Marker Marker: --NO MARKER-- --CUSTOM MARKER-- Basic Target Sharp Target Tank Danger Tank Warning Earth Shaker Gaze Minus Magnet Plus Magnet Acceleration Bomb Limit Cut 1 Red Limit Cut 1 Blue Limit Cut 2 Red Limit Cut 2 Blue Limit Cut 3 Red Limit Cut 3 Blue Limit Cut 4 Red Limit Cut 4 Blue Limit Cut 5 Red Limit Cut 5 Blue Limit Cut 6 Red Limit Cut 6 Blue Limit Cut 7 Red Limit Cut 7 Blue Limit Cut 8 Red Limit Cut 8 Blue X icon O icon Square icon Triangle icon update_all Custom Marker URL: search update_all save Updateadjust Modify AOE BRD > AOE label: update_all layer group: update_all Hide Label? update_all * Styles size (yawl*2): update_all width (yawl*2): update_all height (yawl*2): update_all background image (URL): update_all Background Mode: Contained Stretched update_all background color (hex/rgb(0,0,0)/rgba(0,0,0,1)): update_all Shape: square circle update_all opacity (0-100): update_all Animation: update_all * Position x: update_all y: Layer Index: update_all rotation (0 -> 360, 0 is South): update_all Is contained within arena? Is draggable? * Outline outline thickness (0 = none): update_all outline color: outline style (solid/dashed/dotted/...): save Update DPS label: update_all layer group: update_all Hide Label? update_all * Styles Class: Custom Warrior Dark Knight Paladin Gunbreaker White Mage Scholar Sage Astrologian Dragoon Reaper Ninja Samurai Monk Bard Machinist Dancer Black Mage Red Mage Summoner Blue Mage update_all size (yawl*2): update_all width (yawl*2): update_all height (yawl*2): update_all background image (URL): update_all Background Mode: Contained Stretched update_all background color (hex/rgb(0,0,0)/rgba(0,0,0,1)): update_all Shape: square circle update_all opacity (0-100): update_all Animation: --No animation-- pulse blink glow update_all * Position x: update_all y: Layer Index: update_all rotation (0 -> 360, 0 is South): update_all Is contained within arena? Is draggable? * Outline outline thickness (0 = none): update_all outline color: outline style (solid/dashed/dotted/...): * Debuff Icons Icon 1 (URL): search update_all Icon 2 (URL): search update_all Icon 3 (URL): search update_all Icon 4 (URL): search update_all * Marker Marker: --NO MARKER-- --CUSTOM MARKER-- Basic Target Sharp Target Tank Danger Tank Warning Earth Shaker Gaze Minus Magnet Plus Magnet Acceleration Bomb Limit Cut 1 Red Limit Cut 1 Blue Limit Cut 2 Red Limit Cut 2 Blue Limit Cut 3 Red Limit Cut 3 Blue Limit Cut 4 Red Limit Cut 4 Blue Limit Cut 5 Red Limit Cut 5 Blue Limit Cut 6 Red Limit Cut 6 Blue Limit Cut 7 Red Limit Cut 7 Blue Limit Cut 8 Red Limit Cut 8 Blue X icon O icon Square icon Triangle icon update_all Custom Marker URL: search update_all save Updateadjust Modify AOE BLM > AOE label: update_all layer group: update_all Hide Label? update_all * Styles size (yawl*2): update_all width (yawl*2): update_all height (yawl*2): update_all background image (URL): update_all Background Mode: Contained Stretched update_all background color (hex/rgb(0,0,0)/rgba(0,0,0,1)): update_all Shape: square circle update_all opacity (0-100): update_all Animation: update_all * Position x: update_all y: Layer Index: update_all rotation (0 -> 360, 0 is South): update_all Is contained within arena? Is draggable? * Outline outline thickness (0 = none): update_all outline color: outline style (solid/dashed/dotted/...): save Update WAYMARK label: update_all layer group: update_all Hide Label? update_all * Styles size (yawl*2): update_all width (yawl*2): update_all height (yawl*2): update_all background image (URL): update_all Background Mode: Contained Stretched update_all background color (hex/rgb(0,0,0)/rgba(0,0,0,1)): update_all Shape: square circle update_all opacity (0-100): update_all Animation: update_all * Position x: update_all y: Layer Index: update_all rotation (0 -> 360, 0 is South): update_all Is contained within arena? Is draggable? * Outline outline thickness (0 = none): update_all outline color: outline style (solid/dashed/dotted/...): save Update WAYMARK label: update_all layer group: update_all Hide Label? update_all * Styles size (yawl*2): update_all width (yawl*2): update_all height (yawl*2): update_all background image (URL): update_all Background Mode: Contained Stretched update_all background color (hex/rgb(0,0,0)/rgba(0,0,0,1)): update_all Shape: square circle update_all opacity (0-100): update_all Animation: update_all * Position x: update_all y: Layer Index: update_all rotation (0 -> 360, 0 is South): update_all Is contained within arena? Is draggable? * Outline outline thickness (0 = none): update_all outline color: outline style (solid/dashed/dotted/...): save Update WAYMARK label: update_all layer group: update_all Hide Label? update_all * Styles size (yawl*2): update_all width (yawl*2): update_all height (yawl*2): update_all background image (URL): update_all Background Mode: Contained Stretched update_all background color (hex/rgb(0,0,0)/rgba(0,0,0,1)): update_all Shape: square circle update_all opacity (0-100): update_all Animation: update_all * Position x: update_all y: Layer Index: update_all rotation (0 -> 360, 0 is South): update_all Is contained within arena? Is draggable? * Outline outline thickness (0 = none): update_all outline color: outline style (solid/dashed/dotted/...): save Update WAYMARK label: update_all layer group: update_all Hide Label? update_all * Styles size (yawl*2): update_all width (yawl*2): update_all height (yawl*2): update_all background image (URL): update_all Background Mode: Contained Stretched update_all background color (hex/rgb(0,0,0)/rgba(0,0,0,1)): update_all Shape: square circle update_all opacity (0-100): update_all Animation: update_all * Position x: update_all y: Layer Index: update_all rotation (0 -> 360, 0 is South): update_all Is contained within arena? Is draggable? * Outline outline thickness (0 = none): update_all outline color: outline style (solid/dashed/dotted/...): save Update WAYMARK label: update_all layer group: update_all Hide Label? update_all * Styles size (yawl*2): update_all width (yawl*2): update_all height (yawl*2): update_all background image (URL): update_all Background Mode: Contained Stretched update_all background color (hex/rgb(0,0,0)/rgba(0,0,0,1)): update_all Shape: square circle update_all opacity (0-100): update_all Animation: update_all * Position x: update_all y: Layer Index: update_all rotation (0 -> 360, 0 is South): update_all Is contained within arena? Is draggable? * Outline outline thickness (0 = none): update_all outline color: outline style (solid/dashed/dotted/...): save Update WAYMARK label: update_all layer group: update_all Hide Label? update_all * Styles size (yawl*2): update_all width (yawl*2): update_all height (yawl*2): update_all background image (URL): update_all Background Mode: Contained Stretched update_all background color (hex/rgb(0,0,0)/rgba(0,0,0,1)): update_all Shape: square circle update_all opacity (0-100): update_all Animation: update_all * Position x: update_all y: Layer Index: update_all rotation (0 -> 360, 0 is South): update_all Is contained within arena? Is draggable? * Outline outline thickness (0 = none): update_all outline color: outline style (solid/dashed/dotted/...): save Update WAYMARK label: update_all layer group: update_all Hide Label? update_all * Styles size (yawl*2): update_all width (yawl*2): update_all height (yawl*2): update_all background image (URL): update_all Background Mode: Contained Stretched update_all background color (hex/rgb(0,0,0)/rgba(0,0,0,1)): update_all Shape: square circle update_all opacity (0-100): update_all Animation: update_all * Position x: update_all y: Layer Index: update_all rotation (0 -> 360, 0 is South): update_all Is contained within arena? Is draggable? * Outline outline thickness (0 = none): update_all outline color: outline style (solid/dashed/dotted/...): save Update WAYMARK label: update_all layer group: update_all Hide Label? update_all * Styles size (yawl*2): update_all width (yawl*2): update_all height (yawl*2): update_all background image (URL): update_all Background Mode: Contained Stretched update_all background color (hex/rgb(0,0,0)/rgba(0,0,0,1)): update_all Shape: square circle update_all opacity (0-100): update_all Animation: update_all * Position x: update_all y: Layer Index: update_all rotation (0 -> 360, 0 is South): update_all Is contained within arena? Is draggable? * Outline outline thickness (0 = none): update_all outline color: outline style (solid/dashed/dotted/...): save Update BOSS label: update_all layer group: update_all Hide Label? update_all * Styles size (yawl*2): update_all width (yawl*2): update_all height (yawl*2): update_all background image (URL): update_all Background Mode: Contained Stretched update_all background color (hex/rgb(0,0,0)/rgba(0,0,0,1)): update_all Shape: square circle update_all opacity (0-100): update_all Animation: --No animation-- pulse blink glow update_all * Position x: update_all y: Layer Index: update_all rotation (0 -> 360, 0 is South): update_all Is contained within arena? Is draggable? * Outline outline thickness (0 = none): update_all outline color: outline style (solid/dashed/dotted/...): * Debuff Icons Icon 1 (URL): search update_all Icon 2 (URL): search update_all Icon 3 (URL): search update_all Icon 4 (URL): search update_all * Marker Marker: --NO MARKER-- --CUSTOM MARKER-- Basic Target Sharp Target Tank Danger Tank Warning Earth Shaker Gaze Minus Magnet Plus Magnet Acceleration Bomb Limit Cut 1 Red Limit Cut 1 Blue Limit Cut 2 Red Limit Cut 2 Blue Limit Cut 3 Red Limit Cut 3 Blue Limit Cut 4 Red Limit Cut 4 Blue Limit Cut 5 Red Limit Cut 5 Blue Limit Cut 6 Red Limit Cut 6 Blue Limit Cut 7 Red Limit Cut 7 Blue Limit Cut 8 Red Limit Cut 8 Blue X icon O icon Square icon Triangle icon update_all Custom Marker URL: search update_all * Boss Agro Current Tank: --select a tank-- DRKGNB Is following tank? * Boss Cast Bar Action: Cast Progress (0-100): Is boss casting? save Updateadjust Modify AOE MAIN BOSS > AOE label: update_all layer group: update_all Hide Label? update_all * Styles size (yawl*2): update_all width (yawl*2): update_all height (yawl*2): update_all background image (URL): update_all Background Mode: Contained Stretched update_all background color (hex/rgb(0,0,0)/rgba(0,0,0,1)): update_all Shape: square circle update_all opacity (0-100): update_all Animation: update_all * Position x: update_all y: Layer Index: update_all rotation (0 -> 360, 0 is South): update_all Is contained within arena? Is draggable? * Outline outline thickness (0 = none): update_all outline color: outline style (solid/dashed/dotted/...): save Update ADD label: update_all layer group: update_all Hide Label? update_all * Styles size (yawl*2): update_all width (yawl*2): update_all height (yawl*2): update_all background image (URL): update_all Background Mode: Contained Stretched update_all background color (hex/rgb(0,0,0)/rgba(0,0,0,1)): update_all Shape: square circle update_all opacity (0-100): update_all Animation: --No animation-- float glow blink pulse update_all * Position x: update_all y: Layer Index: update_all rotation (0 -> 360, 0 is South): update_all Is contained within arena? Is draggable? * Outline outline thickness (0 = none): update_all outline color: outline style (solid/dashed/dotted/...): * Debuff Icons Icon 1 (URL): search update_all Icon 2 (URL): search update_all Icon 3 (URL): search update_all Icon 4 (URL): search update_all * Marker Marker: --NO MARKER-- --CUSTOM MARKER-- Basic Target Sharp Target Tank Danger Tank Warning Earth Shaker Gaze Minus Magnet Plus Magnet Acceleration Bomb Limit Cut 1 Red Limit Cut 1 Blue Limit Cut 2 Red Limit Cut 2 Blue Limit Cut 3 Red Limit Cut 3 Blue Limit Cut 4 Red Limit Cut 4 Blue Limit Cut 5 Red Limit Cut 5 Blue Limit Cut 6 Red Limit Cut 6 Blue Limit Cut 7 Red Limit Cut 7 Blue Limit Cut 8 Red Limit Cut 8 Blue X icon O icon Square icon Triangle icon update_all Custom Marker URL: search update_all * Boss Agro Current Tank: --select a tank-- DRKGNB Is following tank? * Boss Cast Bar Action: Cast Progress (0-100): Is boss casting? save Updatedelete_forever Deletedelete_sweep Delete Alladjust Modify AOEcontrol_point_duplicate Duplicate DEFAULT BOSS > AOE label: update_all layer group: update_all Hide Label? update_all * Styles size (yawl*2): update_all width (yawl*2): update_all height (yawl*2): update_all background image (URL): update_all Background Mode: Contained Stretched update_all background color (hex/rgb(0,0,0)/rgba(0,0,0,1)): update_all Shape: square circle update_all opacity (0-100): update_all Animation: --No animation-- update_all * Position x: update_all y: Layer Index: update_all rotation (0 -> 360, 0 is South): update_all Is contained within arena? Is draggable? * Outline outline thickness (0 = none): update_all outline color: outline style (solid/dashed/dotted/...): save Update compare_arrows layersplay_arrowmode_edit LAYERS * Players * DRK visibility lock_open * GNB visibility lock_open * WHM visibility lock_open * SCH visibility lock_open * DNC visibility lock_open * DRG visibility lock_open * BRD visibility lock_open * BLM visibility lock_open * Enemies * Main Boss visibility_off lock_open * Waymarks * Waymark A visibility lock_open * Waymark B visibility lock_open * Waymark C visibility lock_open * Waymark D visibility lock_open * Waymark 1 visibility lock_open * Waymark 2 visibility lock_open * Waymark 3 visibility lock_open * Waymark 4 visibility lock_open * Enemy * Default boss visibility lock_open STRAT * Strat Information Last saved: Data size: label: author: Encounter: --Pick a fight-- Anabaseios: The Ninth Circle (Savage)Anabaseios: The Tenth Circle (Savage)Anabaseios: The Eleventh Circle (Savage)Anabaseios: The Twelfth Circle (Savage)The Voidcast Dias (Extreme)Containment Bay Z1T9 (Unreal)OtherThe Weapon's Refrain (UWU)The Unending Coil of Bahamut (UCOB)The Epic of Alexander (TEA)Dragonsong's Reprise (DSR)The Omega Protocol (TOP) Privacy Setting: Unlisted Public Archived * Steps note: add Add Stepsave Save Stratshare Share/Previewcontrol_point_duplicate Save as newlive_tv Live Share Links PRESETS * Aoe * default circle * puddle/blackhole circle * donut circle * Expanding circle * Default triangle * Curved frontal aoe * stack circle * pushback circle * pushback line * proximity aoe * stack line * cw spinning arrows * ccw spinning arrows * Denmo * default circle * puddle circle * donut circle * Half Circle aoe * pacman circle * Expanding circle * Proximity circle * Stack circle * Default triangle * Curved frontal aoe * Circular Band * Default square * Flare * stack line * Tea * Living Liquid * Pepsi man hand * Brute Justice * Cruise Chaser * Alexander * Boss * Default boss * Arrow * Default Arrow * Curved Arrow * Circle Arrow * Old * E1S Boss * E1S White Circle * E2S Boss * E3S Boss * E4S Boss 1 * Ramuh * Ifrit * Shiva * Garuda * Idol of Darkness * Cinder Drift * Memoria Misera * Emerald Weapon * Cloud of Darkness * Diamond Weapon This feature is available to Patrons only. Please visit my Patreon for more details STEP 0 keyboard_arrow_left Previous Step keyboard_arrow_right Next Step SAVE SUCCESSFUL Please use the url below to share your strat Close STEP 1 Loading... Eden Playground DRK zoom_out_map GNB zoom_out_map WHM zoom_out_map SCH zoom_out_map DNC zoom_out_map DRG zoom_out_map BRD zoom_out_map BLM zoom_out_map Waymark A zoom_out_map A Waymark B zoom_out_map B Waymark C zoom_out_map C Waymark D zoom_out_map D Waymark 1 zoom_out_map 1 Waymark 2 zoom_out_map 2 Waymark 3 zoom_out_map 3 Waymark 4 zoom_out_map 4 Main Boss rotate_right zoom_out_map Hello World 20% Default boss rotate_right zoom_out_map Hello World 20% toolbox gg [_] toolbox.gg.space@gmail.com Toolbox Gaming Space 2020 All rights reserved Denmo presets and Markers was made by Denmo * * * * * close Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Search for icons Search for icons Search for icons Search for icons Search for icons Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Search for icons Search for icons Search for icons Search for icons Search for icons Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Search for icons Search for icons Search for icons Search for icons Search for icons Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Search for icons Search for icons Search for icons Search for icons Search for icons Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Search for icons Search for icons Search for icons Search for icons Search for icons Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Search for icons Search for icons Search for icons Search for icons Search for icons Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Search for icons Search for icons Search for icons Search for icons Search for icons Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Search for icons Search for icons Search for icons Search for icons Search for icons Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Search for icons Search for icons Search for icons Search for icons Search for icons Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps TERMS AND CONDITIONS The site allows users to create their own content by using available editing tools on the Site, and to share the content with other users. In this Agreement we refer to all of this Content provided by Users as "User Content" In order for us to make the User Content you contribute available on the Site for these purposes, and to operate, market and promote the Service, we need the right to make use of such User Content in accordance with and subject to this Agreement. Therefore, by contributing User Content to the Site or creating it on the Site you automatically grant to us an irrevocable and perpetual, non-exclusive, transferable, fully-paid, royalty-free,, worldwide license, by ourselves or with others, to use, copy, distribute, publicly perform, publicly display, print, publish, republish, except (in whole or in part), reformat, translate, modify, revise and incorporate into other works, that User Content and any works derived from that User Content, in any form of media or expression, in the manner in which the Service from time to time permits User Content to be used, and to license or permit others to do so. This license also grants us the right to sublicense that User Content to other Users to permit their use of that User Content in the manner in which the Service from time to time permits User Content to be used. You own all intellectual property in your own original Content you contribute. You must not upload or contribute any Content not originally created by your, or any Content which is not properly licensed to you by someone else for uploading or contributing. You shall not upload to, or distribute or otherwise publish on to the Services any libelous, defamatory, obscene, pornographic, abusive, or otherwise illegal material. Do you agree with the above term and conditions? I Agree I Disagree Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps Search for icons Search for icons Search for icons Search for icons Search for icons Update other steps Update other steps Update other steps Update other steps Update other steps Update other steps