diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3ea2f7e2ec96dfa8d3144d37e6084a6425b70829..c89095e3d9fe7b2d2119f1c81841578d9692296e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,7 @@
 - Fix annoucements not showing after `4.4.10` ([Merge Request](https://gitlab.com/crafty-controller/crafty-4/-/merge_requests/872))
 - Fix use of 'Enter' Key on Username Form ([Merge Request](https://gitlab.com/crafty-controller/crafty-4/-/merge_requests/876))
 - Disable player stats collection when servers are offline ([Merge Request](https://gitlab.com/crafty-controller/crafty-4/-/merge_requests/875))
+- Fix display issues of local zip import modal following CSS refactor ([Merge Request](https://gitlab.com/crafty-controller/crafty-4/-/merge_requests/874))
 ### Tweaks
 TBD
 ### Lang
diff --git a/app/frontend/static/assets/js/shared/root-dir.js b/app/frontend/static/assets/js/shared/root-dir.js
index aa5ce6f15ed1d6ec20c870e86787c6c5ec1aeb20..ad69ebce611022dc5aa3ede7670c3552ac69871c 100644
--- a/app/frontend/static/assets/js/shared/root-dir.js
+++ b/app/frontend/static/assets/js/shared/root-dir.js
@@ -40,7 +40,6 @@ async function getTreeView(path, unzip = false, upload = false) {
     });
     let responseData = await res.json();
     if (responseData.status === "ok") {
-        console.log(responseData);
         process_tree_response(responseData, unzip);
         let x = document.querySelector('.bootbox');
         if (x) {
@@ -62,9 +61,10 @@ async function getTreeView(path, unzip = false, upload = false) {
 }
 
 function process_tree_response(response, unzip) {
-    const styles = window.getComputedStyle(document.getElementById("lower_half"));
     //If this value is still hidden we know the user is executing a zip import and not an upload
-    if (styles.visibility === "hidden") {
+    console.log(`LOWER HALF: ${$("#lower_half").classList}`)
+    if ($("#lower_half").hasClass("d-none")) {
+        console.log("In IF")
         document.getElementById('zip_submit').disabled = false;
     } else {
         document.getElementById('upload_submit').disabled = false;
diff --git a/app/frontend/templates/server/wizard.html b/app/frontend/templates/server/wizard.html
index c8e2c241031c0332712697d17d7ad4d5cab92ebb..ad6da88ee8a36f78d50af27854de35df9b27da6e 100644
--- a/app/frontend/templates/server/wizard.html
+++ b/app/frontend/templates/server/wizard.html
@@ -39,7 +39,8 @@
                     <div class="form-group">
                       <label for="server_jar">{{ translate('serverWizard', 'serverType', data['lang']) }}</label>
                       <div class="input-group">
-                        <select required class="form-control form-control-lg select-css" id="server_jar" name="type" onchange="serverJarChange(this)">
+                        <select required class="form-control form-control-lg select-css" id="server_jar" name="type"
+                          onchange="serverJarChange(this)">
                           <option value="">{{ translate('serverWizard', 'selectServer', data['lang']) }}</option>
                           {% for s in data['server_types'] %}
                           {% if data['server_types'][s].get("enabled", False) %}
@@ -50,7 +51,8 @@
                         </select>
                         {% if data['super_user'] %}
                         <div class="input-group-append">
-                          <button class="btn custom-picker" type="button" onclick="refreshCache()"><i id="refresh-cache" class="refresh-class fas fa-sync"></i></button>
+                          <button class="btn custom-picker" type="button" onclick="refreshCache()"><i id="refresh-cache"
+                              class="refresh-class fas fa-sync"></i></button>
                         </div>
                         {% end %}
                       </div>
@@ -60,7 +62,8 @@
                   <div class="col-sm-12">
                     <div class="form-group">
                       <label for="server_type">{{ translate('serverWizard', 'serverSelect', data['lang']) }}</label>
-                      <select required class="form-control form-control-lg select-css" id="server_type" name="type" onchange="serverTypeChange(this)">
+                      <select required class="form-control form-control-lg select-css" id="server_type" name="type"
+                        onchange="serverTypeChange(this)">
                         <option value="">{{ translate('serverWizard', 'selectServer', data['lang']) }}</option>
                       </select>
                     </div>
@@ -74,17 +77,22 @@
                       </select>
                     </div>
                   </div>
-                  <span data-html="true" class="version-hint text-center" data-content="⚠️ {{ translate('serverWizard', 'unsupported', data['lang']) }} ⚠️" , data-placement="right"></span>
+                  <span data-html="true" class="version-hint text-center"
+                    data-content="⚠️ {{ translate('serverWizard', 'unsupported', data['lang']) }} ⚠️" ,
+                    data-placement="right"></span>
                   <div class="col-sm-12">
                     <div class="form-group">
                       <label for="server_name">{{ translate('serverWizard', 'serverName', data['lang']) }}</label>
-                      <input type="text" class="form-control" id="server_name" name="name" placeholder="{{ translate('serverWizard', 'myNewServer', data['lang']) }}" required>
+                      <input type="text" class="form-control" id="server_name" name="name"
+                        placeholder="{{ translate('serverWizard', 'myNewServer', data['lang']) }}" required>
                     </div>
                   </div>
 
                 </div>
                 <br />
-                <h4 class="card-title">{{ translate('serverWizard', 'quickSettings', data['lang']) }} <small class="text-none"> - {{ translate('serverWizard', 'quickSettingsDescription', data['lang']) }}</small></h4>
+                <h4 class="card-title">{{ translate('serverWizard', 'quickSettings', data['lang']) }} <small
+                    class="text-none"> - {{ translate('serverWizard', 'quickSettingsDescription', data['lang'])
+                    }}</small></h4>
                 <hr>
                 <div class="row">
 
@@ -92,7 +100,8 @@
                     <div class="form-group">
                       <label for="min_memory1">{{ translate('serverWizard', 'minMem', data['lang']) }} <small> - {{
                           translate('serverWizard', 'sizeInGB', data['lang']) }}</small></label>
-                      <input type="number" class="form-control" id="min_memory1" name="mem_min" value="1" step="0.5" min="0.5" required>
+                      <input type="number" class="form-control" id="min_memory1" name="mem_min" value="1" step="0.5"
+                        min="0.5" required>
                     </div>
                   </div>
 
@@ -100,7 +109,8 @@
                     <div class="form-group">
                       <label for="max_memory1">{{ translate('serverWizard', 'maxMem', data['lang']) }} <small> - {{
                           translate('serverWizard', 'sizeInGB', data['lang']) }}</small></label>
-                      <input type="number" class="form-control" id="max_memory1" name="mem_max" value="2" step="0.5" min="0.5" required>
+                      <input type="number" class="form-control" id="max_memory1" name="mem_max" value="2" step="0.5"
+                        min="0.5" required>
                     </div>
                   </div>
 
@@ -108,7 +118,8 @@
                     <div class="form-group">
                       <label for="port1">{{ translate('serverWizard', 'serverPort', data['lang']) }} <small> - {{
                           translate('serverWizard', 'defaultPort', data['lang']) }}</small></label>
-                      <input type="number" class="form-control" id="port1" name="port" value="25565" step="1" min="1" max="65535 " required>
+                      <input type="number" class="form-control" id="port1" name="port" value="25565" step="1" min="1"
+                        max="65535 " required>
                     </div>
                   </div>
                   <div class="col-sm-12">
@@ -117,7 +128,12 @@
                         }}
                         <small class="text-none"> - {{ translate('serverWizard', 'autoCreate',
                           data['lang']) }}</small></label>
-                      <select data-container="body" data-none-selected-text="{{ translate('serverWizard', 'noneRoles', data['lang']) }}" data-none-results-text="{{ translate('serverWizard', 'noRole', data['lang']) }} {0}" class="selectpicker form-control form-control-lg select-css roles_select" data-styleBase="form-control" data-style="form-control" data-live-search="true" name="server_roles" multiple>
+                      <select data-container="body"
+                        data-none-selected-text="{{ translate('serverWizard', 'noneRoles', data['lang']) }}"
+                        data-none-results-text="{{ translate('serverWizard', 'noRole', data['lang']) }} {0}"
+                        class="selectpicker form-control form-control-lg select-css roles_select"
+                        data-styleBase="form-control" data-style="form-control" data-live-search="true"
+                        name="server_roles" multiple>
                         {% for r in data['roles'] %}
                         <option class="roles" type="checkbox" value="{{ r['role_id'] }}">
                           &nbsp; {{ r['role_name'].capitalize()
@@ -138,7 +154,8 @@
         {% if not data["server_api"] and data["online"] %}
         <div class="api-alert">
           <p><i class="fas fa-exclamation-triangle"></i>&nbsp;{{
-            translate('error', 'bigBucket1', data['lang']) }}<a href="https://status.craftycontrol.com/status/craftycontrol" target="_blank" rel="noopener">&nbsp;{{
+            translate('error', 'bigBucket1', data['lang']) }}<a
+              href="https://status.craftycontrol.com/status/craftycontrol" target="_blank" rel="noopener">&nbsp;{{
               translate('error',
               'craftyStatus', data['lang']) }}</a>
             &nbsp;{{ translate('error', 'bigBucket2', data['lang']) }}</br></br><small>{{ translate('error', 'selfHost',
@@ -171,7 +188,8 @@
               <div class="col-sm-12">
                 <div class="form-group">
                   <label for="server_name">{{ translate('serverWizard', 'serverName', data['lang']) }}</label>
-                  <input type="text" class="form-control" id="server_name" name="name" value="" placeholder="{{ translate('serverWizard', 'myNewServer', data['lang']) }}" required>
+                  <input type="text" class="form-control" id="server_name" name="name" value=""
+                    placeholder="{{ translate('serverWizard', 'myNewServer', data['lang']) }}" required>
                 </div>
               </div>
 
@@ -179,14 +197,16 @@
                 <div class="form-group">
                   <label for="server">{{ translate('serverWizard', 'serverPath', data['lang']) }} <small>{{
                       translate('serverWizard', 'absoluteServerPath', data['lang']) }}</small></label>
-                  <input type="text" class="form-control" id="server_path" name="server_path" placeholder="/var/opt/server" required>
+                  <input type="text" class="form-control" id="server_path" name="server_path"
+                    placeholder="/var/opt/server" required>
                 </div>
               </div>
 
               <div class="col-sm-12">
                 <div class="form-group">
                   <label for="server_jar">{{ translate('serverWizard', 'serverJar', data['lang']) }}</label>
-                  <input type="text" class="form-control" id="server_jar" name="server_jar" value="" placeholder="paper.jar" required>
+                  <input type="text" class="form-control" id="server_jar" name="server_jar" value=""
+                    placeholder="paper.jar" required>
                 </div>
               </div>
 
@@ -194,7 +214,8 @@
 
             </div>
             <br />
-            <h4 class="card-title">{{ translate('serverWizard', 'quickSettings', data['lang']) }} <small class="text-none"> - {{ translate('serverWizard', 'quickSettingsDescription',
+            <h4 class="card-title">{{ translate('serverWizard', 'quickSettings', data['lang']) }} <small
+                class="text-none"> - {{ translate('serverWizard', 'quickSettingsDescription',
                 data['lang']) }}</small></h4>
             <hr>
             <div class="row">
@@ -203,7 +224,8 @@
                 <div class="form-group">
                   <label for="min_memory2">{{ translate('serverWizard', 'minMem', data['lang']) }} <small> - {{
                       translate('serverWizard', 'sizeInGB', data['lang']) }}</small></label>
-                  <input type="number" class="form-control" id="min_memory2" name="mem_min" value="1" step="0.5" min="0.5" required>
+                  <input type="number" class="form-control" id="min_memory2" name="mem_min" value="1" step="0.5"
+                    min="0.5" required>
                 </div>
               </div>
 
@@ -211,7 +233,8 @@
                 <div class="form-group">
                   <label for="max_memory2">{{ translate('serverWizard', 'maxMem', data['lang']) }} <small> - {{
                       translate('serverWizard', 'sizeInGB', data['lang']) }}</small></label>
-                  <input type="number" class="form-control" id="max_memory2" name="mem_max" value="2" step="0.5" min="0.5" required>
+                  <input type="number" class="form-control" id="max_memory2" name="mem_max" value="2" step="0.5"
+                    min="0.5" required>
                 </div>
               </div>
 
@@ -219,7 +242,8 @@
                 <div class="form-group">
                   <label for="port2">{{ translate('serverWizard', 'serverPort', data['lang']) }} <small> - {{
                       translate('serverWizard', 'defaultPort', data['lang']) }}</small></label>
-                  <input type="number" class="form-control" id="port2" name="port" value="25565" step="1" min="1" max="65535" required>
+                  <input type="number" class="form-control" id="port2" name="port" value="25565" step="1" min="1"
+                    max="65535" required>
                 </div>
               </div>
               <div class="col-sm-12">
@@ -228,7 +252,12 @@
                     }}
                     <small class="text-none"> - {{ translate('serverWizard', 'autoCreate',
                       data['lang']) }}</small></label>
-                  <select data-container="body" data-none-selected-text="{{ translate('serverWizard', 'noneRoles', data['lang']) }}" data-none-results-text="{{ translate('serverWizard', 'noRole', data['lang']) }} {0}" class="selectpicker form-control form-control-lg select-css roles_select" data-styleBase="form-control" data-style="form-control" data-live-search="true" name="server_roles" multiple>
+                  <select data-container="body"
+                    data-none-selected-text="{{ translate('serverWizard', 'noneRoles', data['lang']) }}"
+                    data-none-results-text="{{ translate('serverWizard', 'noRole', data['lang']) }} {0}"
+                    class="selectpicker form-control form-control-lg select-css roles_select"
+                    data-styleBase="form-control" data-style="form-control" data-live-search="true" name="server_roles"
+                    multiple>
                     {% for r in data['roles'] %}
                     <option class="roles" type="checkbox" value="{{ r['role_id'] }}">
                       &nbsp; {{ r['role_name'].capitalize()
@@ -268,7 +297,8 @@
                 <div class="col-sm-12">
                   <div class="form-group">
                     <label for="server_name">{{ translate('serverWizard', 'serverName', data['lang']) }}</label>
-                    <input type="text" class="form-control" id="server_name" name="name" value="" placeholder="{{ translate('serverWizard', 'myNewServer', data['lang']) }}" required>
+                    <input type="text" class="form-control" id="server_name" name="name" value=""
+                      placeholder="{{ translate('serverWizard', 'myNewServer', data['lang']) }}" required>
                   </div>
                 </div>
 
@@ -276,7 +306,8 @@
                   <div class="form-group">
                     <label for="server">{{ translate('serverWizard', 'zipPath', data['lang']) }} <small>{{
                         translate('serverWizard', 'absoluteZipPath', data['lang']) }}</small></label>
-                    <input type="text" class="form-control" id="zip_server_path" name="server_path" placeholder="/var/opt/server.zip" required>
+                    <input type="text" class="form-control" id="zip_server_path" name="server_path"
+                      placeholder="/var/opt/server.zip" required>
                   </div>
                 </div>
 
@@ -294,7 +325,8 @@
                 <div class="col-sm-12">
                   <div class="form-group">
                     <label for="server_jar">{{ translate('serverWizard', 'serverJar', data['lang']) }}</label>
-                    <input type="text" class="form-control" id="server_jar" name="server_jar" value="" placeholder="paper.jar" required>
+                    <input type="text" class="form-control" id="server_jar" name="server_jar" value=""
+                      placeholder="paper.jar" required>
                   </div>
                 </div>
               </div>
@@ -303,7 +335,8 @@
 
 
             <div class="col-sm-12">
-              <h4 class="card-title">{{ translate('serverWizard', 'quickSettings', data['lang']) }} <small class="text-none"> - {{ translate('serverWizard', 'quickSettingsDescription',
+              <h4 class="card-title">{{ translate('serverWizard', 'quickSettings', data['lang']) }} <small
+                  class="text-none"> - {{ translate('serverWizard', 'quickSettingsDescription',
                   data['lang']) }}</small></h4>
               <hr>
               <div class="row">
@@ -311,7 +344,8 @@
                   <div class="form-group">
                     <label for="min_memory3">{{ translate('serverWizard', 'minMem', data['lang']) }} <small> - {{
                         translate('serverWizard', 'sizeInGB', data['lang']) }}</small></label>
-                    <input type="number" class="form-control" id="min_memory3" name="mem_min" value="1" step="0.5" min="0.5" required>
+                    <input type="number" class="form-control" id="min_memory3" name="mem_min" value="1" step="0.5"
+                      min="0.5" required>
                   </div>
                 </div>
 
@@ -319,7 +353,8 @@
                   <div class="form-group">
                     <label for="max_memory3">{{ translate('serverWizard', 'maxMem', data['lang']) }} <small> - {{
                         translate('serverWizard', 'sizeInGB', data['lang']) }}</small></label>
-                    <input type="number" class="form-control" id="max_memory3" name="mem_max" value="2" step="0.5" min="0.5" required>
+                    <input type="number" class="form-control" id="max_memory3" name="mem_max" value="2" step="0.5"
+                      min="0.5" required>
                   </div>
                 </div>
 
@@ -327,7 +362,8 @@
                   <div class="form-group">
                     <label for="port3">{{ translate('serverWizard', 'serverPort', data['lang']) }} <small> - {{
                         translate('serverWizard', 'defaultPort', data['lang']) }}</small></label>
-                    <input type="number" class="form-control" id="port3" name="port" value="25565" step="1" min="1" max="65535" required>
+                    <input type="number" class="form-control" id="port3" name="port" value="25565" step="1" min="1"
+                      max="65535" required>
                   </div>
                 </div>
 
@@ -337,7 +373,12 @@
                       }}
                       <small class="text-none"> - {{ translate('serverWizard', 'autoCreate',
                         data['lang']) }}</small></label>
-                    <select data-container="body" data-none-selected-text="{{ translate('serverWizard', 'noneRoles', data['lang']) }}" data-none-results-text="{{ translate('serverWizard', 'noRole', data['lang']) }} {0}" class="selectpicker form-control form-control-lg select-css roles_select" data-styleBase="form-control" data-style="form-control" data-live-search="true" name="server_roles" multiple>
+                    <select data-container="body"
+                      data-none-selected-text="{{ translate('serverWizard', 'noneRoles', data['lang']) }}"
+                      data-none-results-text="{{ translate('serverWizard', 'noRole', data['lang']) }} {0}"
+                      class="selectpicker form-control form-control-lg select-css roles_select"
+                      data-styleBase="form-control" data-style="form-control" data-live-search="true"
+                      name="server_roles" multiple>
                       {% for r in data['roles'] %}
                       <option class="roles" type="checkbox" value="{{ r['role_id'] }}">
                         &nbsp; {{ r['role_name'].capitalize()
@@ -347,7 +388,8 @@
                     </select>
                   </div>
                 </div>
-                <div class="modal fade" id="dir_select" tabindex="-1" role="dialog" aria-labelledby="dir_select" aria-hidden="true">
+                <div class="modal fade" id="dir_select" tabindex="-1" role="dialog" aria-labelledby="dir_select"
+                  aria-hidden="true">
                   <div class="modal-dialog" role="document">
                     <div class="modal-content">
                       <div class="modal-header">
@@ -378,7 +420,8 @@
                   </div>
                 </div>
               </div>
-              <button id="zip_submit" type="submit" title="You must select server root dir first" disabled class="btn btn-primary mr-2">{{ translate('serverWizard', 'importServerButton', data['lang'])
+              <button id="zip_submit" type="submit" title="You must select server root dir first" disabled
+                class="btn btn-primary mr-2">{{ translate('serverWizard', 'importServerButton', data['lang'])
                 }}</button>
               <button type="button" class="btn btn-danger mr-2 tree-reset">{{ translate('serverWizard', 'resetForm',
                 data['lang'])
@@ -404,7 +447,8 @@
 
             <div class="form-group">
               <label for="server_name">{{ translate('serverWizard', 'serverName', data['lang']) }}</label>
-              <input type="text" class="form-control" id="server_name" name="name" value="" placeholder="{{ translate('serverWizard', 'myNewServer', data['lang']) }}" required>
+              <input type="text" class="form-control" id="server_name" name="name" value=""
+                placeholder="{{ translate('serverWizard', 'myNewServer', data['lang']) }}" required>
             </div>
             <div class="form-group">
               <label for="server">{{ translate('serverWizard', 'serverUpload', data['lang']) }}</label>
@@ -415,13 +459,14 @@
                     'labelZipFile', data['lang']) }}</label>
                 </div>
                 <div class="input-group-append">
-                  <button type="button" class="btn btn-info upload-button" id="upload-button" onclick="uploadFile('import')" disabled>{{ translate('serverWizard',
+                  <button type="button" class="btn btn-info upload-button" id="upload-button"
+                    onclick="uploadFile('import')" disabled>{{ translate('serverWizard',
                     'uploadButton', data['lang']) }}</button>
                 </div>
               </div>
             </div>
 
-            <div id="lower_half" class="d-none" hidden>
+            <div id="lower_half" class="d-none">
               <div class="form-group">
                 <label for="server">{{ translate('serverWizard', 'selectRoot', data['lang']) }} <small>{{
                     translate('serverWizard', 'explainRoot', data['lang']) }}</small></label>
@@ -432,29 +477,34 @@
 
               <div class="form-group">
                 <label for="server_jar">{{ translate('serverWizard', 'serverJar', data['lang']) }}</label>
-                <input type="text" class="form-control" id="server_jar" name="server_jar" value="" placeholder="paper.jar" required>
+                <input type="text" class="form-control" id="server_jar" name="server_jar" value=""
+                  placeholder="paper.jar" required>
               </div>
 
-              <h4 class="card-title">{{ translate('serverWizard', 'quickSettings', data['lang']) }} <small class="text-none"> - {{ translate('serverWizard', 'quickSettingsDescription',
+              <h4 class="card-title">{{ translate('serverWizard', 'quickSettings', data['lang']) }} <small
+                  class="text-none"> - {{ translate('serverWizard', 'quickSettingsDescription',
                   data['lang']) }}</small></h4>
               <hr>
 
               <div class="form-group">
                 <label for="min_memory3">{{ translate('serverWizard', 'minMem', data['lang']) }} <small> - {{
                     translate('serverWizard', 'sizeInGB', data['lang']) }}</small></label>
-                <input type="number" class="form-control" id="min_memory3" name="mem_min" value="1" step="0.5" min="0.5" required>
+                <input type="number" class="form-control" id="min_memory3" name="mem_min" value="1" step="0.5" min="0.5"
+                  required>
               </div>
 
               <div class="form-group">
                 <label for="max_memory3">{{ translate('serverWizard', 'maxMem', data['lang']) }} <small> - {{
                     translate('serverWizard', 'sizeInGB', data['lang']) }}</small></label>
-                <input type="number" class="form-control" id="max_memory3" name="mem_max" value="2" step="0.5" min="0.5" required>
+                <input type="number" class="form-control" id="max_memory3" name="mem_max" value="2" step="0.5" min="0.5"
+                  required>
               </div>
 
               <div class="form-group">
                 <label for="port3">{{ translate('serverWizard', 'serverPort', data['lang']) }} <small> - {{
                     translate('serverWizard', 'defaultPort', data['lang']) }}</small></label>
-                <input type="number" class="form-control" id="port3" name="port" value="25565" step="1" min="1" max="65535" required>
+                <input type="number" class="form-control" id="port3" name="port" value="25565" step="1" min="1"
+                  max="65535" required>
               </div>
 
               <div class="form-group">
@@ -462,7 +512,12 @@
                   }}
                   <small class="text-none"> - {{ translate('serverWizard', 'autoCreate',
                     data['lang']) }}</small></label>
-                <select data-container="body" data-none-selected-text="{{ translate('serverWizard', 'noneRoles', data['lang']) }}" data-none-results-text="{{ translate('serverWizard', 'noRole', data['lang']) }} {0}" class="selectpicker form-control form-control-lg select-css roles_select" data-styleBase="form-control" data-style="form-control" data-live-search="true" name="server_roles" multiple>
+                <select data-container="body"
+                  data-none-selected-text="{{ translate('serverWizard', 'noneRoles', data['lang']) }}"
+                  data-none-results-text="{{ translate('serverWizard', 'noRole', data['lang']) }} {0}"
+                  class="selectpicker form-control form-control-lg select-css roles_select"
+                  data-styleBase="form-control" data-style="form-control" data-live-search="true" name="server_roles"
+                  multiple>
                   {% for r in data['roles'] %}
                   <option class="roles" type="checkbox" value="{{ r['role_id'] }}">
                     &nbsp; {{ r['role_name'].capitalize()
@@ -471,7 +526,8 @@
                   {% end %}
                 </select>
               </div>
-              <div class="modal fade" id="dir_upload_select" tabindex="-1" role="dialog" aria-labelledby="dir_select" aria-hidden="true">
+              <div class="modal fade" id="dir_upload_select" tabindex="-1" role="dialog" aria-labelledby="dir_select"
+                aria-hidden="true">
                 <div class="modal-dialog" role="document">
                   <div class="modal-content">
                     <div class="modal-header">
@@ -483,7 +539,8 @@
                     </div>
                     <div class="modal-body">
                       <div class="tree-ctx-item overflow-scroll mh-75" id="main-tree-div-upload" data-path="">
-                        <input type="radio" class="root-input" id="main-tree-input-upload" name="root_path" value="" checked>
+                        <input type="radio" class="root-input" id="main-tree-input-upload" name="root_path" value=""
+                          checked>
                         <span id="main-tree" class="files-tree-title tree-caret-down root-dir" data-path="">
                           <i class="far fa-folder"></i>
                           <i class="far fa-folder-open"></i>
@@ -502,7 +559,8 @@
                 </div>
               </div>
             </div>
-            <button id="upload_submit" type="submit" title="You must select server root dir first" disabled class="btn btn-primary mr-2">{{ translate('serverWizard', 'importServerButton', data['lang'])
+            <button id="upload_submit" type="submit" title="You must select server root dir first" disabled
+              class="btn btn-primary mr-2">{{ translate('serverWizard', 'importServerButton', data['lang'])
               }}</button>
             <button type="button" class="btn btn-danger mr-2 tree-reset">{{ translate('serverWizard', 'resetForm',
               data['lang'])
@@ -603,8 +661,8 @@
       var classList = $('.waitMsg').first().attr('class').split(/\s+/);
 
       // Loop through classes and remove all elements with any of them
-      classList.forEach(function(cls) {
-          $('.' + cls).remove();
+      classList.forEach(function (cls) {
+        $('.' + cls).remove();
       });
       bootbox.alert({
         title: responseData.error,