From f17226769ec0a3803be55598a369a2cf1be8f51b Mon Sep 17 00:00:00 2001
From: Restia Ashdoll <hyperdeka@gmail.com>
Date: Mon, 18 Jan 2021 17:27:29 -0700
Subject: [PATCH] update to dev lol

---
 index.html | 693 ++++++++++++++++++++++++++++++-----------------------
 styles.css |   6 +-
 2 files changed, 395 insertions(+), 304 deletions(-)

diff --git a/index.html b/index.html
index 623258e..a051a11 100644
--- a/index.html
+++ b/index.html
@@ -194,7 +194,7 @@
                         
                     </div>
                     <br><br>
-                    <div class="externalBuffs hide-container-block" id="buff-box" style="display: none;">
+                    <div class="externalBuffs" id="buff-box">
                         <table class="externalBuffs">
                             <tr>
                                 <p class = "buffs-title itemp title">
@@ -229,7 +229,7 @@
                                 </td>
                             </tr>
                         </table>
-                        <div class = "powder-specials" style="display: none;">
+                        <div class = "powder-specials">
                             <div class = "powder-special-stats" style = "grid-column:1;grid-row:1">
                                 <div class = "center" id = "powder-special-stats">
                                     <p class = "itemp">Powder Specials</p>
@@ -512,305 +512,396 @@
         </div>
         <div class="id-box fade-in" id="id-edit" style="display: none">
             <div class="id-edit1">
-                <div class="idCenter">
-                    <div class="idWrap">
-                        <div>
-                            <label for="sdPct" class="idLabel" id="sdPct-label">Spell Damage %:</label><br>
-                            <input type="number" id="sdPct" name="sdPct" value="0" class="idInput"/>
-                        </div>
-                        <div id="sdPct-base">
-                            Original Value: 0
-                        </div>
-                    </div>
-                </div>
-                <div class="idCenter">
-                    <div class="idWrap">
-                        <div>
-                            <label for="sdRaw" class="idLabel" id="sdRaw-label">Spell Damage Raw:</label><br>
-                            <input type="number" id="sdRaw" name="sdRaw" value="0" class="idInput"/>
-                        </div>
-                        <div id="sdRaw-base">
-                            Original Value: 0
-                        </div>
-                    </div>
-                </div>
-                <div class="idCenter">
-                    <div class="idWrap">
-                        <div>
-                            <label for="mdPct" class="idLabel" id="mdPct-label">Melee Damage %:</label><br>
-                            <input type="number" id="mdPct" name="mdPct" value="0" class="idInput"/>
-                        </div>
-                        <div id="mdPct-base">
-                            Original Value: 0
-                        </div>
-                    </div>
-                </div>
-                <div class="idCenter">
-                    <div class="idWrap">
-                        <div>
-                            <label for="mdRaw" class="idLabel" id="mdRaw-label">Melee Damage Raw:</label><br>
-                            <input type="number" id="mdRaw" name="mdRaw" value="0" class="idInput"/>
-                        </div>
-                        <div id="mdRaw-base">
-                            Original Value: 0
-                        </div>
-                    </div>
-                </div>
-                <div class="idCenter">
-                    <div class="idWrap">
-                        <div>
-                            <label for="poison" class="idLabel" id="poison-label">Poison:</label><br>
-                            <input type="number" id="poison" name="poison" value="0" class="idInput"/>
-                        </div>
-                        <div id="poison-base">
-                            Original Value: 0
-                        </div>
-                    </div>
-                </div>
-                <div class="idCenter">
-                    <div class="idWrap">
-                        <div>
-                            <label for="eDamPct" class="idLabel" id="eDamPct-label">Earth Damage %:</label><br>
-                            <input type="number" id="eDamPct" name="eDamPct" value="0" class="idInput"/>
-                        </div>
-                        <div id="eDamPct-base">
-                            Original Value: 0
-                        </div>
-                    </div>
-                </div>
-                <div class="idCenter">
-                    <div class="idWrap">
-                        <div>
-                            <label for="tDamPct" class="idLabel" id="tDamPct-label">Thunder Damage %:</label><br>
-                            <input type="number" id="tDamPct" name="tDamPct" value="0" class="idInput"/>
-                        </div>
-                        <div id="tDamPct-base">
-                            Original Value: 0
-                        </div>
-                    </div>
-                </div>
-                <div class="idCenter">
-                    <div class="idWrap">
-                        <div>
-                            <label for="wDamPct" class="idLabel" id="wDamPct-label">Water Damage %:</label><br>
-                            <input type="number" id="wDamPct" name="wDamPct" value="0" class="idInput"/>
-                        </div>
-                        <div id="wDamPct-base">
-                            Original Value: 0
-                        </div>
-                    </div>
-                </div>
-                <div class="idCenter">
-                    <div class="idWrap">
-                        <div>
-                            <label for="fDamPct" class="idLabel" id="fDamPct-label">Fire Damage %:</label><br>
-                            <input type="number" id="fDamPct" name="fDamPct" value="0" class="idInput"/>
-                        </div>
-                        <div id="fDamPct-base">
-                            Original Value: 0
-                        </div>
-                    </div>
-                </div>
-                <div class="idCenter">
-                    <div class="idWrap">
-                        <div>
-                            <label for="aDamPct" class="idLabel" id="aDamPct-label">Air Damage %:</label><br>
-                            <input type="number" id="aDamPct" name="aDamPct" value="0" class="idInput"/>
-                        </div>
-                        <div id="aDamPct-base">
-                            Original Value: 0
-                        </div>
-                    </div>
-                </div>
-                <div class="idCenter">
-                    <div class="idWrap">
-                        <div>
-                            <label for="eDefPct" class="idLabel" id="eDefPct-label">Earth Defense %:</label><br>
-                            <input type="number" id="eDefPct" name="eDefPct" value="0" class="idInput"/>
-                        </div>
-                        <div id="eDefPct-base">
-                            Original Value: 0
-                        </div>
-                    </div>
-                </div>
-                <div class="idCenter">
-                    <div class="idWrap">
-                        <div>
-                            <label for="tDefPct" class="idLabel" id="tDefPct-label">Thunder Defense %:</label><br>
-                            <input type="number" id="tDefPct" name="tDefPct" value="0" class="idInput"/>
-                        </div>
-                        <div id="tDefPct-base">
-                            Original Value: 0
-                        </div>
-                    </div>
-                </div>
-                <div class="idCenter">
-                    <div class="idWrap">
-                        <div>
-                            <label for="wDefPct" class="idLabel" id="wDefPct-label">Water Defense %:</label><br>
-                            <input type="number" id="wDefPct" name="wDefPct" value="0" class="idInput"/>
-                        </div>
-                        <div id="wDefPct-base">
-                            Original Value: 0
-                        </div>
-                    </div>
-                </div>
-                <div class="idCenter">
-                    <div class="idWrap">
-                        <div>
-                            <label for="fDefPct" class="idLabel" id="fDefPct-label">Fire Defense %:</label><br>
-                            <input type="number" id="fDefPct" name="fDefPct" value="0" class="idInput"/>
-                        </div>
-                        <div id="fDefPct-base">
-                            Original Value: 0
-                        </div>
-                    </div>
-                </div>
-                <div class="idCenter">
-                    <div class="idWrap">
-                        <div>
-                            <label for="aDefPct" class="idLabel" id="aDefPct-label">Air Defense %:</label><br>
-                            <input type="number" id="aDefPct" name="aDefPct" value="0" class="idInput"/>
-                        </div>
-                        <div id="aDefPct-base">
-                            Original Value: 0
-                        </div>
-                    </div>
-                </div>
+                <table class="white-space: nowrap">
+                    <tr>
+                        <th colspan="2">
+                            <h1>Damage values:</h1>
+                        </th>
+                    </tr>
+                    <tr>
+                        <td>
+                            <div class="idLeft">
+                                <div class="idWrap">
+                                    <div>
+                                        <label for="sdPct" class="idLabel" id="sdPct-label">Spell Damage %:</label><br>
+                                        <input type="number" id="sdPct" name="sdPct" value="0" class="idInput"/>
+                                    </div>
+                                    <div id="sdPct-base">
+                                        Original Value: 0
+                                    </div>
+                                </div>
+                            </div>
+                        </td>
+                        <td>
+                            <div class="idLeft">
+                                <div class="idWrap">
+                                    <div>
+                                        <label for="sdRaw" class="idLabel" id="sdRaw-label">Spell Damage Raw:</label><br>
+                                        <input type="number" id="sdRaw" name="sdRaw" value="0" class="idInput"/>
+                                    </div>
+                                    <div id="sdRaw-base">
+                                        Original Value: 0
+                                    </div>
+                                </div>
+                            </div>
+                        </td>
+                        <td>
+                            <div class="idLeft">
+                                <div class="idWrap">
+                                    <div>
+                                        <label for="mdPct" class="idLabel" id="mdPct-label">Melee Damage %:</label><br>
+                                        <input type="number" id="mdPct" name="mdPct" value="0" class="idInput"/>
+                                    </div>
+                                    <div id="mdPct-base">
+                                        Original Value: 0
+                                    </div>
+                                </div>
+                            </div>
+                        </td>
+                        <td>
+                            <div class="idLeft">
+                                <div class="idWrap">
+                                    <div>
+                                        <label for="mdRaw" class="idLabel" id="mdRaw-label">Melee Damage Raw:</label><br>
+                                        <input type="number" id="mdRaw" name="mdRaw" value="0" class="idInput"/>
+                                    </div>
+                                    <div id="mdRaw-base">
+                                        Original Value: 0
+                                    </div>
+                                </div>
+                            </div>
+                        </td>
+                        <td>
+                            <div class="idLeft">
+                                <div class="idWrap">
+                                    <div>
+                                        <label for="poison" class="idLabel" id="poison-label">Poison:</label><br>
+                                        <input type="number" id="poison" name="poison" value="0" class="idInput"/>
+                                    </div>
+                                    <div id="poison-base">
+                                        Original Value: 0
+                                    </div>
+                                </div>
+                            </div>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <div class="idLeft">
+                                <div class="idWrap">
+                                    <div>
+                                        <label for="eDamPct" class="idLabel" id="eDamPct-label">Earth Damage %:</label><br>
+                                        <input type="number" id="eDamPct" name="eDamPct" value="0" class="idInput"/>
+                                    </div>
+                                    <div id="eDamPct-base">
+                                        Original Value: 0
+                                    </div>
+                                </div>
+                            </div>
+                        </td>
+                        <td>
+                            <div class="idLeft">
+                                <div class="idWrap">
+                                    <div>
+                                        <label for="tDamPct" class="idLabel" id="tDamPct-label">Thunder Damage %:</label><br>
+                                        <input type="number" id="tDamPct" name="tDamPct" value="0" class="idInput"/>
+                                    </div>
+                                    <div id="tDamPct-base">
+                                        Original Value: 0
+                                    </div>
+                                </div>
+                            </div>
+                        </td>
+                        <td>
+                            <div class="idLeft">
+                                <div class="idWrap">
+                                    <div>
+                                        <label for="wDamPct" class="idLabel" id="wDamPct-label">Water Damage %:</label><br>
+                                        <input type="number" id="wDamPct" name="wDamPct" value="0" class="idInput"/>
+                                    </div>
+                                    <div id="wDamPct-base">
+                                        Original Value: 0
+                                    </div>
+                                </div>
+                            </div>
+                        </td>
+                        <td>
+                            <div class="idLeft">
+                                <div class="idWrap">
+                                    <div>
+                                        <label for="fDamPct" class="idLabel" id="fDamPct-label">Fire Damage %:</label><br>
+                                        <input type="number" id="fDamPct" name="fDamPct" value="0" class="idInput"/>
+                                    </div>
+                                    <div id="fDamPct-base">
+                                        Original Value: 0
+                                    </div>
+                                </div>
+                            </div>
+                        </td>
+                        <td>
+                            <div class="idLeft">
+                                <div class="idWrap">
+                                    <div>
+                                        <label for="aDamPct" class="idLabel" id="aDamPct-label">Air Damage %:</label><br>
+                                        <input type="number" id="aDamPct" name="aDamPct" value="0" class="idInput"/>
+                                    </div>
+                                    <div id="aDamPct-base">
+                                        Original Value: 0
+                                    </div>
+                                </div>
+                            </div>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <div class="idLeft">
+                                <div class="idWrap">
+                                    <div>
+                                        <label for="atkTier" class="idLabel" id="atkTier-label">Attack Speed Bonus:</label><br>
+                                        <input type="number" id="atkTier" name="atkTier" value="0" class="idInput"/>
+                                    </div>
+                                    <div id="atkTier-base">
+                                        Original Value: 0
+                                    </div>
+                                </div>
+                            </div>
+                        </td>
+                    </tr>
+                </table>
             </div>
-            <div class="id-edit2">
-                <div class="idCenter">
-                    <div class="idWrap">
-                        <div>
-                            <label for="hprRaw" class="idLabel" id="hprRaw-label">Health Regen Raw:</label><br>
-                            <input type="number" id="hprRaw" name="hprRaw" value="0" class="idInput"/>
-                        </div>
-                        <div id="hprRaw-base">
-                            Original Value: 0
-                        </div>
-                    </div>
-                </div>
-                <div class="idCenter">
-                    <div class="idWrap">
-                        <div>
-                            <label for="hprPct" class="idLabel" id="hprPct-label">Health Regen %:</label><br>
-                            <input type="number" id="hprPct" name="hprPct" value="0" class="idInput"/>
-                        </div>
-                        <div id="hprPct-base">
-                            Original Value: 0
-                        </div>
-                    </div>
-                </div>
-                <div class="idCenter">
-                    <div class="idWrap">
-                        <div>
-                            <label for="hpBonus" class="idLabel" id="hpBonus-label">Health Bonus:</label><br>
-                            <input type="number" id="hpBonus" name="hpBonus" value="0" class="idInput"/>
-                        </div>
-                        <div id="hpBonus-base">
-                            Original Value: 0
-                        </div>
-                    </div>
-                </div>
-                <div class="idCenter">
-                    <div class="idWrap">
-                        <div>
-                            <label for="atkTier" class="idLabel" id="atkTier-label">Attack Speed Bonus:</label><br>
-                            <input type="number" id="atkTier" name="atkTier" value="0" class="idInput"/>
-                        </div>
-                        <div id="atkTier-base">
-                            Original Value: 0
-                        </div>
-                    </div>
-                </div>
-                <div class="idCenter">
-                    <div class="idWrap">
-                        <div>
-                            <label for="spPct1" class="idLabel" id="spPct1-label">1st Spell Cost %:</label><br>
-                            <input type="number" id="spPct1" name="spPct1" value="0" class="idInput"/>
-                        </div>
-                        <div id="spPct1-base">
-                            Original Value: 0
-                        </div>
-                    </div>
-                </div>
-                <div class="idCenter">
-                    <div class="idWrap">
-                        <div>
-                            <label for="spPct2" class="idLabel" id="spPct2-label">2nd Spell Cost %:</label><br>
-                            <input type="number" id="spPct2" name="spPct2" value="0" class="idInput"/>
-                        </div>
-                        <div id="spPct2-base">
-                            Original Value: 0
-                        </div>
-                    </div>
-                </div>
-                <div class="idCenter">
-                    <div class="idWrap">
-                        <div>
-                            <label for="spPct3" class="idLabel" id="spPct3-label">3rd Spell Cost %:</label><br>
-                            <input type="number" id="spPct3" name="spPct3" value="0" class="idInput"/>
-                        </div>
-                        <div id="spPct3-base">
-                            Original Value: 0
-                        </div>
-                    </div>
-                </div>
-                <div class="idCenter">
-                    <div class="idWrap">
-                        <div>
-                            <label for="spPct4" class="idLabel" id="spPct4-label">4th Spell Cost %:</label><br>
-                            <input type="number" id="spPct4" name="spPct4" value="0" class="idInput"/>
-                        </div>
-                        <div id="spPct4-base">
-                            Original Value: 0
-                        </div>
-                    </div>
-                </div>
-                <div class="idCenter">
-                    <div class="idWrap">
-                        <div>
-                            <label for="spRaw1" class="idLabel" id="spRaw1-label">1st Spell Cost Raw:</label><br>
-                            <input type="number" id="spRaw1" name="spRaw1" value="0" class="idInput"/>
-                        </div>
-                        <div id="spRaw1-base">
-                            Original Value: 0
-                        </div>
-                    </div>
-                </div>
-                <div class="idCenter">
-                    <div class="idWrap">
-                        <div>
-                            <label for="spRaw2" class="idLabel" id="spRaw2-label">2nd Spell Cost Raw:</label><br>
-                            <input type="number" id="spRaw2" name="spRaw2" value="0" class="idInput"/>
-                        </div>
-                        <div id="spRaw2-base">
-                            Original Value: 0
-                        </div>
-                    </div>
-                </div>
-                <div class="idCenter">
-                    <div class="idWrap">
-                        <div>
-                            <label for="spRaw3" class="idLabel" id="spRaw3-label">3rd Spell Cost Raw:</label><br>
-                            <input type="number" id="spRaw3" name="spRaw3" value="0" class="idInput"/>
-                        </div>
-                        <div id="spRaw3-base">
-                            Original Value: 0
-                        </div>
-                    </div>
-                </div>
-                <div class="idCenter">
-                    <div class="idWrap">
-                        <div>
-                            <label for="spRaw4" class="idLabel" id="spRaw4-label">4th Spell Cost Raw:</label><br>
-                            <input type="number" id="spRaw4" name="spRaw4" value="0" class="idInput"/>
-                        </div>
-                        <div id="spRaw4-base">
-                            Original Value: 0
-                        </div>
-                    </div>
-                </div>
+            <div class="id-edit1">
+                <table>
+                    <tr>
+                        <th colspan="2">
+                            <h1>Defense values:</h1>
+                        </th>
+                    </tr>
+                    <tr>
+                        <td>
+                            <div class="idLeft">
+                                <div class="idWrap">
+                                    <div>
+                                        <label for="eDefPct" class="idLabel" id="eDefPct-label">Earth Defense %:</label><br>
+                                        <input type="number" id="eDefPct" name="eDefPct" value="0" class="idInput"/>
+                                    </div>
+                                    <div id="eDefPct-base">
+                                        Original Value: 0
+                                    </div>
+                                </div>
+                            </div>
+                        </td>
+                        <td>
+                            <div class="idLeft">
+                                <div class="idWrap">
+                                    <div>
+                                        <label for="tDefPct" class="idLabel" id="tDefPct-label">Thunder Defense %:</label><br>
+                                        <input type="number" id="tDefPct" name="tDefPct" value="0" class="idInput"/>
+                                    </div>
+                                    <div id="tDefPct-base">
+                                        Original Value: 0
+                                    </div>
+                                </div>
+                            </div>
+                        </td>
+                        <td>
+                            <div class="idLeft">
+                                <div class="idWrap">
+                                    <div>
+                                        <label for="wDefPct" class="idLabel" id="wDefPct-label">Water Defense %:</label><br>
+                                        <input type="number" id="wDefPct" name="wDefPct" value="0" class="idInput"/>
+                                    </div>
+                                    <div id="wDefPct-base">
+                                        Original Value: 0
+                                    </div>
+                                </div>
+                            </div>
+                        </td>
+                        <td>
+                            <div class="idLeft">
+                                <div class="idWrap">
+                                    <div>
+                                        <label for="fDefPct" class="idLabel" id="fDefPct-label">Fire Defense %:</label><br>
+                                        <input type="number" id="fDefPct" name="fDefPct" value="0" class="idInput"/>
+                                    </div>
+                                    <div id="fDefPct-base">
+                                        Original Value: 0
+                                    </div>
+                                </div>
+                            </div>
+                        </td>
+                        <td>
+                            <div class="idLeft">
+                                <div class="idWrap">
+                                    <div>
+                                        <label for="aDefPct" class="idLabel" id="aDefPct-label">Air Defense %:</label><br>
+                                        <input type="number" id="aDefPct" name="aDefPct" value="0" class="idInput"/>
+                                    </div>
+                                    <div id="aDefPct-base">
+                                        Original Value: 0
+                                    </div>
+                                </div>
+                            </div>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <div class="idLeft">
+                                <div class="idWrap">
+                                    <div>
+                                        <label for="hprRaw" class="idLabel" id="hprRaw-label">Health Regen Raw:</label><br>
+                                        <input type="number" id="hprRaw" name="hprRaw" value="0" class="idInput"/>
+                                    </div>
+                                    <div id="hprRaw-base">
+                                        Original Value: 0
+                                    </div>
+                                </div>
+                            </div>
+                        </td>
+                        <td>
+                            <div class="idLeft">
+                                <div class="idWrap">
+                                    <div>
+                                        <label for="hprPct" class="idLabel" id="hprPct-label">Health Regen %:</label><br>
+                                        <input type="number" id="hprPct" name="hprPct" value="0" class="idInput"/>
+                                    </div>
+                                    <div id="hprPct-base">
+                                        Original Value: 0
+                                    </div>
+                                </div>
+                            </div>
+                        </td>
+                        <td>
+                            <div class="idLeft">
+                                <div class="idWrap">
+                                    <div>
+                                        <label for="hpBonus" class="idLabel" id="hpBonus-label">Health Bonus:</label><br>
+                                        <input type="number" id="hpBonus" name="hpBonus" value="0" class="idInput"/>
+                                    </div>
+                                    <div id="hpBonus-base">
+                                        Original Value: 0
+                                    </div>
+                                </div>
+                            </div>
+                        </td>
+                    </tr>
+                </table>
+            </div>
+            <div class="id-edit1">
+                <table>
+                    <tr>
+                        <th colspan="2">
+                            <h1>Utility values:</h1>
+                        </th>
+                    </tr>
+                    <tr>
+                        <td>
+                            <div class="idLeft">
+                                <div class="idWrap">
+                                    <div>
+                                        <label for="spPct1" class="idLabel" id="spPct1-label">1st Spell Cost %:</label><br>
+                                        <input type="number" id="spPct1" name="spPct1" value="0" class="idInput"/>
+                                    </div>
+                                    <div id="spPct1-base">
+                                        Original Value: 0
+                                    </div>
+                                </div>
+                            </div>
+                        </td>
+                        <td>
+                            <div class="idLeft">
+                                <div class="idWrap">
+                                    <div>
+                                        <label for="spPct2" class="idLabel" id="spPct2-label">2nd Spell Cost %:</label><br>
+                                        <input type="number" id="spPct2" name="spPct2" value="0" class="idInput"/>
+                                    </div>
+                                    <div id="spPct2-base">
+                                        Original Value: 0
+                                    </div>
+                                </div>
+                            </div>
+                        </td>
+                        <td>
+                            <div class="idLeft">
+                                <div class="idWrap">
+                                    <div>
+                                        <label for="spPct3" class="idLabel" id="spPct3-label">3rd Spell Cost %:</label><br>
+                                        <input type="number" id="spPct3" name="spPct3" value="0" class="idInput"/>
+                                    </div>
+                                    <div id="spPct3-base">
+                                        Original Value: 0
+                                    </div>
+                                </div>
+                            </div>
+                        </td>
+                        <td>
+                            <div class="idLeft">
+                                <div class="idWrap">
+                                    <div>
+                                        <label for="spPct4" class="idLabel" id="spPct4-label">4th Spell Cost %:</label><br>
+                                        <input type="number" id="spPct4" name="spPct4" value="0" class="idInput"/>
+                                    </div>
+                                    <div id="spPct4-base">
+                                        Original Value: 0
+                                    </div>
+                                </div>
+                            </div>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <div class="idLeft">
+                                <div class="idWrap">
+                                    <div>
+                                        <label for="spRaw1" class="idLabel" id="spRaw1-label">1st Spell Cost Raw:</label><br>
+                                        <input type="number" id="spRaw1" name="spRaw1" value="0" class="idInput"/>
+                                    </div>
+                                    <div id="spRaw1-base">
+                                        Original Value: 0
+                                    </div>
+                                </div>
+                            </div>
+                        </td>
+                        <td>
+                            <div class="idLeft">
+                                <div class="idWrap">
+                                    <div>
+                                        <label for="spRaw2" class="idLabel" id="spRaw2-label">2nd Spell Cost Raw:</label><br>
+                                        <input type="number" id="spRaw2" name="spRaw2" value="0" class="idInput"/>
+                                    </div>
+                                    <div id="spRaw2-base">
+                                        Original Value: 0
+                                    </div>
+                                </div>
+                            </div>
+                        </td>
+                        <td>
+                            <div class="idLeft">
+                                <div class="idWrap">
+                                    <div>
+                                        <label for="spRaw3" class="idLabel" id="spRaw3-label">3rd Spell Cost Raw:</label><br>
+                                        <input type="number" id="spRaw3" name="spRaw3" value="0" class="idInput"/>
+                                    </div>
+                                    <div id="spRaw3-base">
+                                        Original Value: 0
+                                    </div>
+                                </div>
+                            </div>
+                        </td>
+                        <td>
+                            <div class="idLeft">
+                                <div class="idWrap">
+                                    <div>
+                                        <label for="spRaw4" class="idLabel" id="spRaw4-label">4th Spell Cost Raw:</label><br>
+                                        <input type="number" id="spRaw4" name="spRaw4" value="0" class="idInput"/>
+                                    </div>
+                                    <div id="spRaw4-base">
+                                        Original Value: 0
+                                    </div>
+                                </div>
+                            </div>
+                        </td>
+                    </tr>
+                </table>
             </div>
         </div>
         <br>
@@ -879,7 +970,7 @@
             <div class = "center set-info" id = "set-info-div" style = "grid-column:1;grid-row:1; display: none;">
                 <div class = "center" id = "set-info">Set info</div>
             </div>
-            <div class = "center int-info hide-container-block" id = "int-info-div" style = "grid-column:4;grid-row:1; display: none;">
+            <div class = "center int-info" id = "int-info-div" style = "grid-column:4;grid-row:1; display: none;">
                 <div class = "center" id = "int-info">Next Spell Costs</div> 
             </div>
         </div>
diff --git a/styles.css b/styles.css
index 16e8934..2cb09dc 100644
--- a/styles.css
+++ b/styles.css
@@ -191,8 +191,8 @@ table.center{
     margin: auto;
 }
 
-.idCenter {
-    text-align: center;
+.idLeft {
+    text-align: left;
     padding: 1em 0px 0px 0px;
     position: relative;
     display: flex;
@@ -321,7 +321,7 @@ button.toggleOn{
     width: 100%;
 }
 
-.hide-container-block, .hide-container-grid, .set-info-div, .fade-in, .misc {
+.hide-container-block, .hide-container-grid, .set-info-div, .fade-in {
     animation-duration: 0.5s;
     animation-name: fadeInFromNone;
     animation-fill-mode: forwards;