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

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&amp;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 -&gt; 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 -&gt; 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 -&gt; 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 -&gt; 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 -&gt; 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 -&gt; 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 -&gt; 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 -&gt; 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 -&gt; 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 -&gt; 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 -&gt; 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 -&gt; 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 -&gt; 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 -&gt; 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 -&gt; 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 -&gt; 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 -&gt; 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 -&gt; 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 -&gt; 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 -&gt; 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 -&gt; 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 -&gt; 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 -&gt; 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 -&gt; 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 -&gt; 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 -&gt; 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 -&gt; 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 -&gt; 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 -&gt; 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