Start input type="text" migration (#2947)

* Update text inputs on Edit Server form

* Move text utility classes to utilities area

* Update some text inputs in Add DNS Zone form

* Update some text inputs in Add DNS Record form

* Update some text inputs in Add Firewall Rule form

* <input type="email">

* Remove "size" attribute from text inputs

* Use helper class in Setup Webapp form

* Remove unnecessary inline styles from Setup Webapp form

* Class first after input type

* Update text input in Add Access Key form

* Consistent formatting of Add Access Key form

* More <input type="email">

* Update text input in Add Web Domain form

* Update "hint" text inputs

* Update text inputs in Configure Server PHP form

* Update text inputs in Configure Server MySQL form

* Update text inputs in Configure Server NGINX form

* Fix remaining <br><br> case

* More consistent widths

* More consistent inputs

* More input consistency

* Update text input on New IP List form

* Update text input on Ban IP Address form

* Update formatting and text inputs on Access Key form

* Update text inputs on Edit Firewall Rule form

* Misc tidy

* Update text inputs on Edit DNS Zone form

* Include .form-control in "focus first field of form" JS

* Tidy some JS

web/css/src/themes/default.css

@@ -198,22 +198,6 @@ a {
   color: #7c7c7c;
 }
 
-.text-right {
-  text-align: right;
-}
-
-.text-center {
-  text-align: center;
-}
-
-.text-small {
-  font-size: 0.85em;
-}
-
-.text-italic {
-  font-style: italic;
-}
-
 .check-label {
   display: inline-block;
   cursor: pointer;
@@ -3891,10 +3875,30 @@ meter[value="4"]::-moz-meter-bar { background: green; }
   display: none;
 }
 
+.text-right {
+  text-align: right !important;
+}
+
+.text-center {
+  text-align: center !important;
+}
+
+.text-small {
+  font-size: 0.85em !important;
+}
+
+.text-italic {
+  font-style: italic !important;
+}
+
 .u-mt15 {
   margin-top: 15px !important;
 }
 
+.u-ml10 {
+  margin-left: 10px !important;
+}
+
 .u-mb20 {
   margin-bottom: 20px !important;
 }
@@ -3927,6 +3931,11 @@ meter[value="4"]::-moz-meter-bar { background: green; }
   min-height: 300px !important;
 }
 
+.u-sideBySide {
+  display: flex !important;
+  align-items: center !important;
+}
+
 .u-console {
   font-family: Inconsolata, "Lucida Console", Monaco, monospace !important;
   white-space: pre !important;

web/js/floating_layer.js

@@ -60,12 +60,12 @@
             jQuery(ref.container).bind('click.fl', function(evt)
             {
                 jQuery(evt.target).hasClass(config.closeClass) ? flayer_destroy() : -1;
-                if(!!config.outerClose)
+                if(config.outerClose)
                     jQuery(evt.target).hasClass('fl-cloud') ? flayer_destroy() : -1;
             });
 
             // todo:
-            !!config.outerClose ? jQuery(window).bind('keypress.fl', function(evt){evt.keyCode == 27 ? flayer_destroy() : -1;}) : -1;
+            config.outerClose ? jQuery(window).bind('keypress.fl', function(evt){evt.keyCode == 27 ? flayer_destroy() : -1;}) : -1;
 
         }
 
@@ -121,7 +121,7 @@
             jQuery(window).unbind('scroll.fl');
             jQuery(window).unbind('resize.fl');
             jQuery(ref.container).unbind('click.fl');
-            !!config.outerClose ? jQuery(window).unbind('keypress.fl') : -1;
+            config.outerClose ? jQuery(window).unbind('keypress.fl') : -1;
             jQuery(config.returnParent).append(jQuery(elm).addClass('hidden'));
             jQuery(ref.container).remove();
             jQuery.browser.msie && jQuery.browser.version.substr(0,1)<7 ? show_selects() : -1;

web/js/hotkeys.js

@@ -24,13 +24,12 @@ shortcut = {
 
         var ele = opt.target;
         if(typeof opt.target == 'string') ele = document.getElementById(opt.target);
-        var ths = this;
         shortcut_combination = shortcut_combination.toLowerCase();
 
         //The function to be called at keypress
         var func = function(e) {
             e = e || window.event;
-            
+
             if(opt['disable_in_input']) { //Don't enable shortcut keys in Input, Textarea fields
                 var element;
                 if(e.target) element=e.target;
@@ -39,19 +38,19 @@ shortcut = {
 
                 if(element.tagName == 'INPUT' || element.tagName == 'TEXTAREA') return;
             }
-    
+
             //Find Which key is pressed
             if (e.keyCode) code = e.keyCode;
             else if (e.which) code = e.which;
             var character = String.fromCharCode(code).toLowerCase();
-            
+
             if(code == 188) character=","; //If the user presses , when the type is onkeydown
             if(code == 190) character="."; //If the user presses , when the type is onkeydown
 
             var keys = shortcut_combination.split("+");
             //Key Pressed - counts the number of valid keypresses - if it is same as the number of keys, the shortcut function is invoked
             var kp = 0;
-            
+
             //Work around for stupid Shift key bug created by using lowercase - as a result the shift+num combination was broken
             var shift_nums = {
                 "`":"~",
@@ -83,7 +82,7 @@ shortcut = {
                 'return':13,
                 'enter':13,
                 'backspace':8,
-    
+
                 'scrolllock':145,
                 'scroll_lock':145,
                 'scroll':145,
@@ -93,28 +92,28 @@ shortcut = {
                 'numlock':144,
                 'num_lock':144,
                 'num':144,
-                
+
                 'pause':19,
                 'break':19,
-                
+
                 'insert':45,
                 'home':36,
                 'delete':46,
                 'end':35,
-                
+
                 'pageup':33,
                 'page_up':33,
                 'pu':33,
-    
+
                 'pagedown':34,
                 'page_down':34,
                 'pd':34,
-    
+
                 'left':37,
                 'up':38,
                 'right':39,
                 'down':40,
-    
+
                 'f1':112,
                 'f2':113,
                 'f3':114,
@@ -128,19 +127,19 @@ shortcut = {
                 'f11':122,
                 'f12':123
             }
-    
-            var modifiers = { 
+
+            var modifiers = {
                 shift: { wanted:false, pressed:false},
                 ctrl : { wanted:false, pressed:false},
                 alt  : { wanted:false, pressed:false},
                 meta : { wanted:false, pressed:false}   //Meta is Mac specific
             };
-                        
+
             if(e.ctrlKey)   modifiers.ctrl.pressed = true;
             if(e.shiftKey)  modifiers.shift.pressed = true;
             if(e.altKey)    modifiers.alt.pressed = true;
             if(e.metaKey)   modifiers.meta.pressed = true;
-                        
+
             for(var i=0; k=keys[i],i<keys.length; i++) {
                 //Modifiers
                 if(k == 'ctrl' || k == 'control') {
@@ -159,7 +158,7 @@ shortcut = {
                     modifiers.meta.wanted = true;
                 } else if(k.length > 1) { //If it is a special key
                     if(special_keys[k] == code) kp++;
-                    
+
                 } else if(opt['keycode']) {
                     if(opt['keycode'] == code) kp++;
 
@@ -167,25 +166,25 @@ shortcut = {
                     if(character == k) kp++;
                     else {
                         if(shift_nums[character] && e.shiftKey) { //Stupid Shift key bug created by using lowercase
-                            character = shift_nums[character]; 
+                            character = shift_nums[character];
                             if(character == k) kp++;
                         }
                     }
                 }
             }
-            
-            if(kp == keys.length && 
+
+            if(kp == keys.length &&
                         modifiers.ctrl.pressed == modifiers.ctrl.wanted &&
                         modifiers.shift.pressed == modifiers.shift.wanted &&
                         modifiers.alt.pressed == modifiers.alt.wanted &&
                         modifiers.meta.pressed == modifiers.meta.wanted) {
                 callback(e);
-    
+
                 if(!opt['propagate']) { //Stop the event
                     //e.cancelBubble is supported by IE - this will kill the bubbling process.
                     e.cancelBubble = true;
                     e.returnValue = false;
-    
+
                     //e.stopPropagation works in Firefox.
                     if (e.stopPropagation) {
                         e.stopPropagation();
@@ -196,8 +195,8 @@ shortcut = {
             }
         }
         this.all_shortcuts[shortcut_combination] = {
-            'callback':func, 
-            'target':ele, 
+            'callback':func,
+            'target':ele,
             'event': opt['type']
         };
         //Attach the function with the event

web/js/init.js

@@ -557,7 +557,7 @@ $(document).ready(function(){
 
               // focusing on the first input at form
               if( location.href.indexOf('lead=') == -1 && !$('.ui-dialog').is(':visible') ){
-                $('#vstobjects .vst-input:not([disabled]), #vstobjects .form-select:not([disabled])').first().focus();
+                $('#vstobjects .vst-input:not([disabled]), #vstobjects .form-control:not([disabled]), #vstobjects .form-select:not([disabled])').first().focus();
               }
 
               $('.l-profile__notifications').click(function(){

web/js/pages/list_ssl.js

@@ -1,6 +1,6 @@
 function saveTextToBlob ( file, element ){
-    text = document.getElementById(element).value;
-    var textFileAsBlob = new Blob([text], {type:'text/plain'}); 
+    var text = document.getElementById(element).value;
+    var textFileAsBlob = new Blob([text], {type:'text/plain'});
     var downloadLink = document.createElement("a");
     downloadLink.download = file;
     downloadLink.innerHTML = "Download File";
@@ -27,4 +27,4 @@ function saveTextToBlob ( file, element ){
 function destroyClickedElement(event)
 {
     document.body.removeChild(event.target);
-}
+}

web/js/templates.js

@@ -14,7 +14,7 @@ App.Templates.html = {
         ],
         notification_empty: [
                     '<li class="empty"><span><i class="fas fa-bell-slash status-icon dim" style="font-size: 4rem;"></i><br><br>\
-                    '+App.Constants.NOTIFICATIONS_EMPTY+'\</span></li>'
+                    '+App.Constants.NOTIFICATIONS_EMPTY+'</span></li>'
         ]
     },
 };

web/locale/hestiacp.pot

@@ -1409,7 +1409,7 @@ msgid "Secret Key"
 msgstr ""
 
 #: ../../web/templates/pages/list_access_key.html:71
-msgid "Warning! Last chance to save secrect access key!"
+msgid "Warning! Last chance to save secret access key!"
 msgstr ""
 
 #: ../../web/templates/pages/list_stats.html:6

web/templates/pages/add_access_key.html

@@ -1,81 +1,78 @@
 <!-- Begin toolbar -->
 <div class="l-center edit">
-    <div class="l-sort clearfix">
-        <div class="l-unit-toolbar__buttonstrip">
-            <a class="ui-button cancel" dir="ltr" id="btn-back" href="/list/access-key/">
-                <i class="fas fa-arrow-left status-icon blue"></i><?= _('Back'); ?>
-            </a>
-        </div>
-        <div class="l-unit-toolbar__buttonstrip float-right">
-            <a href="#" class="ui-button" data-action="submit" data-id="vstobjects">
-                <i class="fas fa-save status-icon purple"></i><?= _('Save'); ?>
-            </a>
-        </div>
-    </div>
+	<div class="l-sort clearfix">
+		<div class="l-unit-toolbar__buttonstrip">
+			<a class="ui-button cancel" dir="ltr" id="btn-back" href="/list/access-key/">
+				<i class="fas fa-arrow-left status-icon blue"></i><?= _('Back'); ?>
+			</a>
+		</div>
+		<div class="l-unit-toolbar__buttonstrip float-right">
+			<a href="#" class="ui-button" data-action="submit" data-id="vstobjects">
+				<i class="fas fa-save status-icon purple"></i><?= _('Save'); ?>
+			</a>
+		</div>
+	</div>
 </div>
 <!-- End toolbar -->
 
 <div class="l-separator"></div>
 
 <div class="l-center animated fadeIn">
-    <form id="vstobjects" name="v_add_access_key" method="post">
-        <input type="hidden" name="token" value="<?= $_SESSION['token'] ?>" />
-        <input type="hidden" name="ok" value="Add" />
+	<form id="vstobjects" name="v_add_access_key" method="post">
+		<input type="hidden" name="token" value="<?= $_SESSION['token'] ?>" />
+		<input type="hidden" name="ok" value="Add" />
 
-        <table class="data mode-add">
-            <tr class="data-add">
-                <td class="data-dotted">
-                    <table class="data-col1">
-                        <tr>
-                            <td></td>
-                        </tr>
-                    </table>
-                </td>
-                <td class="data-dotted">
-                    <table class="data-col2">
-                        <tr>
-                            <td class="u-pt18">
-                                <span class="page-title"><?= _('Adding Access Key'); ?></span>
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>
-                                <?php show_error_panel($_SESSION); ?>
-                            </td>
-                        </tr>
+		<table class="data mode-add">
+			<tr class="data-add">
+				<td class="data-dotted">
+					<table class="data-col1">
+						<tr>
+							<td></td>
+						</tr>
+					</table>
+				</td>
+				<td class="data-dotted">
+					<table class="data-col2">
+						<tr>
+							<td class="u-pt18">
+								<span class="page-title"><?= _('Adding Access Key'); ?></span>
+							</td>
+						</tr>
+						<tr>
+							<td>
+								<?php show_error_panel($_SESSION); ?>
+							</td>
+						</tr>
 
-                        <tr>
-                            <td class="u-pt6">
-                                <?= _('Permissions'); ?>
-                            </td>
-                        </tr>
-                        <tr>
-                            <td class="u-pt6">
-                                <?php foreach ($apis as $api_name => $api_data) { ?>
-                                    <div class="form-check">
-                                        <input class="form-check-input" type="checkbox" value="<?= $api_name ?>" name="v_apis[]" id="v_apis_<?= $api_name ?>" tabindex="5">
-                                        <label for="v_apis_<?= $api_name ?>">
-                                            <?= _($api_name); ?>
-                                        </label>
-                                    </div>
-                                <?php } ?>
-                            </td>
-                        </tr>
-
-                        <tr>
-                            <td class="u-pt18">
-                                <?= _('Comment'); ?> <span class="optional">(<?= _('optional'); ?>)</span>
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>
-                                <input type="text" size="20" class="vst-input" name="v_comment" maxlength="255" />
-                            </td>
-                        </tr>
-                    </table>
-                    <table class="data-col2"></table>
-                </td>
-            </tr>
-        </table>
-    </form>
+						<tr>
+							<td class="u-pt6">
+								<?= _('Permissions'); ?>
+							</td>
+						</tr>
+						<tr>
+							<td class="u-pt6">
+								<?php foreach ($apis as $api_name => $api_data) { ?>
+									<div class="form-check">
+										<input class="form-check-input" type="checkbox" value="<?= $api_name ?>" name="v_apis[]" id="v_apis_<?= $api_name ?>" tabindex="5">
+										<label for="v_apis_<?= $api_name ?>">
+											<?= _($api_name); ?>
+										</label>
+									</div>
+								<?php } ?>
+							</td>
+						</tr>
+						<tr>
+							<td class="u-pt18">
+								<label for="v_comment" class="form-label">
+									<?= _('Comment'); ?> <span class="optional">(<?= _('optional'); ?>)</span>
+								</label>
+								<input type="text" class="form-control u-inputWidth" name="v_comment" id="v_comment" maxlength="255">
+							</td>
+						</tr>
+					</table>
+					<table class="data-col2 u-mb20"></table>
+				</td>
+			</tr>
+		</table>
+	</form>
 </div>

web/templates/pages/add_cron.html

@@ -360,7 +360,7 @@
 						</tr>
 						<tr>
 							<td>
-								<input type="text" size="30" class="vst-input long" name="v_cmd" value="<?=htmlentities(trim($v_cmd, "'"))?>">
+								<input type="text" class="vst-input long" name="v_cmd" value="<?=htmlentities(trim($v_cmd, "'"))?>">
 							</td>
 						</tr>
 						<tr>
@@ -370,7 +370,7 @@
 						</tr>
 						<tr>
 							<td>
-								<input type="text" size="20" class="vst-input short" name="v_min" value="<?=htmlentities(trim($v_min, "'"))?>">
+								<input type="text" class="vst-input short" name="v_min" value="<?=htmlentities(trim($v_min, "'"))?>">
 							</td>
 						</tr>
 						<tr>
@@ -380,7 +380,7 @@
 						</tr>
 						<tr>
 							<td>
-								<input type="text" size="20" class="vst-input short" name="v_hour" value="<?=htmlentities(trim($v_hour, "'"))?>">
+								<input type="text" class="vst-input short" name="v_hour" value="<?=htmlentities(trim($v_hour, "'"))?>">
 							</td>
 						</tr>
 						<tr>
@@ -390,7 +390,7 @@
 						</tr>
 						<tr>
 							<td>
-								<input type="text" size="20" class="vst-input short" name="v_day" value="<?=htmlentities(trim($v_day, "'"))?>">
+								<input type="text" class="vst-input short" name="v_day" value="<?=htmlentities(trim($v_day, "'"))?>">
 							</td>
 						</tr>
 						<tr>
@@ -400,7 +400,7 @@
 						</tr>
 						<tr>
 							<td>
-								<input type="text" size="20" class="vst-input short" name="v_month" value="<?=htmlentities(trim($v_month, "'"))?>">
+								<input type="text" class="vst-input short" name="v_month" value="<?=htmlentities(trim($v_month, "'"))?>">
 							</td>
 						</tr>
 						<tr>
@@ -410,7 +410,7 @@
 						</tr>
 						<tr>
 							<td>
-								<input type="text" size="20" class="vst-input short" name="v_wday" value="<?=htmlentities(trim($v_wday, "'"))?>">
+								<input type="text" class="vst-input short" name="v_wday" value="<?=htmlentities(trim($v_wday, "'"))?>">
 							</td>
 						</tr>
 					</table>

web/templates/pages/add_db.html

@@ -67,13 +67,11 @@
 							</tr>
 							<tr>
 								<td class="u-pt18">
-									<?=_('Database');?>
-								</td>
-							</tr>
-							<tr>
-								<td>
-									<input type="text" size="20" class="vst-input" name="v_database" value="<?=htmlentities(trim($v_database, "'"))?>">
-									<small class="hint"></small>
+									<label for="v_database" class="form-label"><?=_('Database');?></label>
+									<div class="u-sideBySide">
+										<input type="text" class="form-control u-inputWidth" name="v_database" id="v_database" value="<?=htmlentities(trim($v_database, "'"))?>">
+										<small class="hint u-ml10"></small>
+									</div>
 								</td>
 							</tr>
 							<tr>
@@ -92,16 +90,14 @@
 							</tr>
 							<tr>
 								<td class="u-pt6">
-									<?php
-										print _('Username');
-										echo "&nbsp;&nbsp;&nbsp;&nbsp;<em><small>(".sprintf(_('maximum characters length, including prefix'), 32).")</small></em>";
-									?>
-								</td>
-							</tr>
-							<tr>
-								<td>
-									<input type="text" size="20" class="vst-input" name="v_dbuser" value="<?=htmlentities(trim($v_dbuser, "'"))?>">
-									<small class="hint"></small>
+									<label for="v_dbuser" class="form-label">
+										<?=_('Username');?>
+										&nbsp;&nbsp;&nbsp;&nbsp;<em><small>(<?=sprintf(_('maximum characters length, including prefix'), 32);?>)</small></em>
+									</label>
+									<div class="u-sideBySide">
+										<input type="text" class="form-control u-inputWidth" name="v_dbuser" id="v_dbuser" value="<?=htmlentities(trim($v_dbuser, "'"))?>">
+										<small class="hint u-ml10"></small>
+									</div>
 								</td>
 							</tr>
 							<tr>
@@ -111,7 +107,7 @@
 							</tr>
 							<tr>
 								<td>
-									<input type="text" size="20" class="vst-input password" name="v_password"><br />
+									<input type="text" class="vst-input password" name="v_password"><br />
 									<meter max="4" id="meter"></meter>
 								</td>
 							</tr>
@@ -127,12 +123,10 @@
 							</tr>
 							<tr>
 								<td class="u-pt6">
-									<?=_('Send login credentials to email address') ?>
-								</td>
-							</tr>
-							<tr>
-								<td>
-									<input type="text" class="vst-input" name="v_db_email" value="<?=htmlentities(trim($v_db_email, "'"))?>">
+									<label for="v_db_email" class="form-label">
+										<?=_('Send login credentials to email address') ?>
+									</label>
+									<input type="email" class="form-control u-inputWidth" name="v_db_email" id="v_db_email" value="<?=htmlentities(trim($v_db_email, "'"))?>">
 								</td>
 							</tr>
 							<tr>
@@ -205,6 +199,6 @@
 </div>
 
 <script>
-GLOBAL.DB_USER_PREFIX = "<?=$user_plain;?>_";
-GLOBAL.DB_DBNAME_PREFIX = "<?=$user_plain;?>_";
+	GLOBAL.DB_USER_PREFIX = "<?=$user_plain;?>_";
+	GLOBAL.DB_DBNAME_PREFIX = "<?=$user_plain;?>_";
 </script>

web/templates/pages/add_dns.html

@@ -58,15 +58,11 @@
 								</td>
 							</tr>
 						<?php } ?>
-						<?php if (($user_plain == 'admin') && (($_GET['accept'] === "true")) || ($user_plain !== "admin"))  {?>
+						<?php if (($user_plain == 'admin') && (($_GET['accept'] === "true")) || ($user_plain !== "admin")) {?>
 							<tr>
 								<td class="u-pt18">
-									<?=_('Domain');?>
-								</td>
-							</tr>
-							<tr>
-								<td>
-									<input type="text" size="20" class="vst-input" name="v_domain" value="<?=htmlentities(trim($v_domain, "'"))?>">
+									<label for="v_domain" class="form-label"><?=_('Domain');?></label>
+									<input type="text" class="form-control u-inputWidth" name="v_domain" id="v_domain" value="<?=htmlentities(trim($v_domain, "'"))?>">
 								</td>
 							</tr>
 							<tr>
@@ -81,7 +77,7 @@
 											}
 										?>
 									</select>
-									<input type="text" size="20" class="vst-input vst-list-editor" name="v_ip" id="v_ip" value="<?=htmlentities(trim($v_ip, "'"))?>">
+									<input type="text" class="vst-input vst-list-editor" name="v_ip" id="v_ip" value="<?=htmlentities(trim($v_ip, "'"))?>">
 								</td>
 							</tr>
 							<?php if (($_SESSION['userContext'] === 'admin') || ($_SESSION['userContext'] === 'user') && ($_SESSION['POLICY_USER_EDIT_DNS_TEMPLATES'] === 'yes')) { ?>
@@ -115,22 +111,16 @@
 									<table style="display:<?php if (empty($v_adv)) echo 'none';?> ;" id="advtable">
 										<tr>
 											<td class="u-pt6">
-												<?=_('Expiration Date');?> <span class="optional">(<?=_('YYYY-MM-DD');?>)</span>
-											</td>
-										</tr>
-										<tr>
-											<td>
-												<input type="text" size="20" class="vst-input" name="v_exp" value="<?=htmlentities(trim($v_exp, "'"))?>">
+												<label for="v_exp" class="form-label">
+													<?=_('Expiration Date');?> <span class="optional">(<?=_('YYYY-MM-DD');?>)</span>
+												</label>
+												<input type="text" class="form-control u-inputWidth" name="v_exp" id="v_exp" value="<?=htmlentities(trim($v_exp, "'"))?>">
 											</td>
 										</tr>
 										<tr>
 											<td class="u-pt6">
-												<?=_('TTL');?>
-											</td>
-										</tr>
-										<tr>
-											<td>
-												<input type="text" size="20" class="vst-input" name="v_ttl" value="<?=htmlentities(trim($v_ttl, "'"))?>">
+												<label for="v_ttl" class="form-label"><?=_('TTL');?></label>
+												<input type="text" class="form-control" name="v_ttl" id="v_ttl" value="<?=htmlentities(trim($v_ttl, "'"))?>">
 											</td>
 										</tr>
 										<tr>
@@ -140,13 +130,13 @@
 										</tr>
 										<tr>
 											<td>
-												<input type="text" size="20" class="vst-input" name="v_ns1" value="<?=htmlentities(trim($v_ns1, "'"))?>">
+												<input type="text" class="vst-input" name="v_ns1" value="<?=htmlentities(trim($v_ns1, "'"))?>">
 												<span class="remove-ns additional-control delete"><?=_('delete');?></span>
 											</td>
 										</tr>
 										<tr>
 											<td>
-												<input type="text" size="20" class="vst-input" name="v_ns2" value="<?=htmlentities(trim($v_ns2, "'"))?>">
+												<input type="text" class="vst-input" name="v_ns2" value="<?=htmlentities(trim($v_ns2, "'"))?>">
 												<span class="remove-ns additional-control delete"><?=_('delete');?></span>
 											</td>
 										</tr>
@@ -154,7 +144,7 @@
 											if($v_ns3) {
 												echo '<tr>
 													<td>
-														<input type="text" size="20" class="vst-input" name="v_ns3" value="'.htmlentities(trim($v_ns3, "'")).'">
+														<input type="text" class="vst-input" name="v_ns3" value="'.htmlentities(trim($v_ns3, "'")).'">
 														<span class="remove-ns additional-control delete">'._('delete').'</span>
 													</td>
 												</tr>';
@@ -162,7 +152,7 @@
 											if($v_ns4) {
 												echo '<tr>
 													<td>
-														<input type="text" size="20" class="vst-input" name="v_ns4" value="'.htmlentities(trim($v_ns4, "'")).'">
+														<input type="text" class="vst-input" name="v_ns4" value="'.htmlentities(trim($v_ns4, "'")).'">
 														<span class="remove-ns additional-control delete">'._('delete').'</span>
 													</td>
 												</tr>';
@@ -170,7 +160,7 @@
 											if($v_ns5) {
 												echo '<tr>
 													<td>
-														<input type="text" size="20" class="vst-input" name="v_ns5" value="'.htmlentities(trim($v_ns5, "'")).'">
+														<input type="text" class="vst-input" name="v_ns5" value="'.htmlentities(trim($v_ns5, "'")).'">
 														<span class="remove-ns additional-control delete">'._('delete').'</span>
 													</td>
 												</tr>';
@@ -178,7 +168,7 @@
 											if($v_ns6) {
 												echo '<tr>
 													<td>
-														<input type="text" size="20" class="vst-input" name="v_ns6" value="'.htmlentities(trim($v_ns6, "'")).'">
+														<input type="text" class="vst-input" name="v_ns6" value="'.htmlentities(trim($v_ns6, "'")).'">
 														<span class="remove-ns additional-control delete">'._('delete').'</span>
 													</td>
 												</tr>';
@@ -186,7 +176,7 @@
 											if($v_ns7) {
 												echo '<tr>
 													<td>
-														<input type="text" size="20" class="vst-input" name="v_ns7" value="'.htmlentities(trim($v_ns7, "'")).'">
+														<input type="text" class="vst-input" name="v_ns7" value="'.htmlentities(trim($v_ns7, "'")).'">
 														<span class="remove-ns additional-control delete">'._('delete').'</span>
 													</td>
 												</tr>';
@@ -194,7 +184,7 @@
 											if($v_ns8) {
 												echo '<tr>
 													<td>
-														<input type="text" size="20" class="vst-input" name="v_ns8" value="'.htmlentities(trim($v_ns8, "'")).'">
+														<input type="text" class="vst-input" name="v_ns8" value="'.htmlentities(trim($v_ns8, "'")).'">
 														<span class="remove-ns additional-control delete">'._('delete').'</span>
 													</td>
 												</tr>';

web/templates/pages/add_dns_rec.html

@@ -42,24 +42,18 @@
 						</tr>
 						<tr>
 							<td class="u-pt18">
-								<?=_('Domain');?>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<input type="text" size="20" class="vst-input" name="v_domain" value="<?=htmlentities(trim($v_domain, "'"))?>" disabled>
+								<label for="v_domain" class="form-label"><?=_('Domain');?></label>
+								<input type="text" class="form-control u-inputWidth" name="v_domain" id="v_domain" value="<?=htmlentities(trim($v_domain, "'"))?>" disabled>
 								<input type="hidden" name="v_domain" value="<?=htmlentities(trim($v_domain, "'"))?>">
 							</td>
 						</tr>
 						<tr>
 							<td class="u-pt6">
-								<?=_('Record');?>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<input type="text" size="20" class="vst-input" name="v_rec" value="<?=htmlentities(trim($v_rec, "'"))?>">
-								<small class="hint"></small>
+								<label for="v_rec" class="form-label"><?=_('Record');?></label>
+								<div class="u-sideBySide">
+									<input type="text" class="form-control u-inputWidth" name="v_rec" id="v_rec" value="<?=htmlentities(trim($v_rec, "'"))?>">
+									<small class="hint u-ml10"></small>
+								</div>
 							</td>
 						</tr>
 						<tr>
@@ -95,31 +89,27 @@
 										}
 									?>
 								</select>
-								<input type="text" size="20" class="vst-input vst-list-editor" name="v_val" id="v_val" value="<?=htmlentities(trim($v_val, "'"))?>">
+								<input type="text" class="vst-input vst-list-editor" name="v_val" id="v_val" value="<?=htmlentities(trim($v_val, "'"))?>">
 							</td>
 						</tr>
 						<tr>
 							<td class="u-pt6">
-								<?=_('Priority');?> <span class="optional">(<?=_('optional');?>)</span>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<input type="text" size="20" class="vst-input" name="v_priority" value="<?=htmlentities(trim($v_priority, "'"))?>">
+								<label for="v_priority" class="form-label">
+									<?=_('Priority');?> <span class="optional">(<?=_('optional');?>)</span>
+								</label>
+								<input type="text" class="form-control u-inputWidth" name="v_priority" id="v_priority" value="<?=htmlentities(trim($v_priority, "'"))?>">
 							</td>
 						</tr>
 						<tr>
 							<td class="u-pt6">
-								<?=_('TTL');?> <span class="optional">(<?=_('optional');?>)</span>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<input type="text" size="20" class="vst-input" name="v_ttl" value="<?=htmlentities(trim($v_ttl, "'"))?>">
+								<label for="v_ttl" class="form-label">
+									<?=_('TTL');?> <span class="optional">(<?=_('optional');?>)</span>
+								</label>
+								<input type="text" class="form-control u-inputWidth" name="v_ttl" id="v_ttl" value="<?=htmlentities(trim($v_ttl, "'"))?>">
 							</td>
 						</tr>
 					</table>
-					<table class="data-col2">
+					<table class="data-col2 u-mb20">
 					</table>
 				</td>
 			</tr>

web/templates/pages/add_firewall.html

@@ -61,12 +61,10 @@
 						</tr>
 						<tr>
 							<td class="u-pt6">
-								<?=_('Port');?> <span class="optional">(<?=_('Ranges and Lists are acceptable');?>)</span>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<input type="text" size="20" class="vst-input" name="v_port" value="<?=htmlentities(trim($v_port, "'"))?>" placeholder="<?=_('All ports: 0, Range: 80-82, List: 80,443,8080,8443');?>">
+								<label for="v_port" class="form-label">
+									<?=_('Port');?> <span class="optional">(<?=_('Ranges and Lists are acceptable');?>)</span>
+								</label>
+								<input type="text" class="form-control u-inputWidth" name="v_port" id="v_port" value="<?=htmlentities(trim($v_port, "'"))?>" placeholder="<?=_('All ports: 0, Range: 80-82, List: 80,443,8080,8443');?>">
 							</td>
 						</tr>
 						<tr>
@@ -77,21 +75,19 @@
 								<select class="form-select u-inputWidth" tabindex="-1" id="quickips_list" onchange="this.nextElementSibling.value=this.value">
 									<option value="">&nbsp;</option>
 								</select>
-								<input type="text" size="20" class="vst-input vst-list-editor" name="v_ip" id="v_ip" value="<?=htmlentities(trim($v_ip, "'"))?>">
+								<input type="text" class="vst-input vst-list-editor" name="v_ip" id="v_ip" value="<?=htmlentities(trim($v_ip, "'"))?>">
 							</td>
 						</tr>
 						<tr>
 							<td class="u-pt6">
-								<?=_('Comment');?> <span class="optional">(<?=_('optional');?>)</span>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<input type="text" size="20" class="vst-input" name="v_comment" maxlength="255" value="<?=htmlentities(trim($v_comment, "'"))?>">
+								<label for="v_comment" class="form-label">
+									<?=_('Comment');?> <span class="optional">(<?=_('optional');?>)</span>
+								</label>
+								<input type="text" class="form-control u-inputWidth" name="v_comment" id="v_comment" maxlength="255" value="<?=htmlentities(trim($v_comment, "'"))?>">
 							</td>
 						</tr>
 					</table>
-					<table class="data-col2"></table>
+					<table class="data-col2 u-mb20"></table>
 				</td>
 			</tr>
 		</table>

web/templates/pages/add_firewall_banlist.html

@@ -42,12 +42,10 @@
 						</tr>
 						<tr>
 							<td class="u-pt6">
-								<?=_('IP address');?> <span class="optional">(<?=_('CIDR format is supported');?>)</span>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<input type="text" size="20" class="vst-input" name="v_ip" value="<?=htmlentities(trim($v_ip, "'"))?>">
+								<label for="v_ip" class="form-label">
+									<?=_('IP address');?> <span class="optional">(<?=_('CIDR format is supported');?>)</span>
+								</label>
+								<input type="text" class="form-control u-inputWidth" name="v_ip" id="v_ip" value="<?=htmlentities(trim($v_ip, "'"))?>">
 							</td>
 						</tr>
 						<tr>

web/templates/pages/add_firewall_ipset.html

@@ -42,12 +42,8 @@
 						</tr>
 						<tr>
 							<td class="u-pt18">
-								<?=_('Ip List Name') ?>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<input type="text" size="20" class="vst-input" name="v_ipname" maxlength="255" value="<?=htmlentities(trim($v_ipname, "'"))?>">
+								<label for="v_ipname" class="form-label"><?=_('Ip List Name') ?></label>
+								<input type="text" class="form-control u-inputWidth" name="v_ipname" id="v_ipname" maxlength="255" value="<?=htmlentities(trim($v_ipname, "'"))?>">
 							</td>
 						</tr>
 						<tr>
@@ -58,7 +54,7 @@
 								<select class="form-select u-inputWidth" tabindex="-1" id="datasource_list" onchange="this.nextElementSibling.value=this.value">
 									<option value="">clear</option>
 								</select>
-								<input type="text" size="20" class="vst-input vst-list-editor" name="v_datasource" id="v_datasource" maxlength="255" value="<?=htmlentities(trim($v_datasource, "'"))?>">
+								<input type="text" class="vst-input vst-list-editor" name="v_datasource" id="v_datasource" maxlength="255" value="<?=htmlentities(trim($v_datasource, "'"))?>">
 							</td>
 						</tr>
 						<tr>

web/templates/pages/add_ip.html

@@ -47,7 +47,7 @@
 						</tr>
 						<tr>
 							<td>
-								<input type="text" size="20" class="vst-input" name="v_ip" value="<?=htmlentities(trim($v_ip, "'"))?>">
+								<input type="text" class="vst-input" name="v_ip" value="<?=htmlentities(trim($v_ip, "'"))?>">
 							</td>
 						</tr>
 						<tr>
@@ -57,7 +57,7 @@
 						</tr>
 						<tr>
 							<td>
-								<input type="text" size="20" class="vst-input" name="v_netmask" value="<?=htmlentities(trim($v_netmask, "'"))?>">
+								<input type="text" class="vst-input" name="v_netmask" value="<?=htmlentities(trim($v_netmask, "'"))?>">
 							</td>
 						</tr>
 						<tr>
@@ -105,7 +105,7 @@
 						</tr>
 						<tr>
 							<td>
-								<input type="text" size="20" class="vst-input" name="v_name" value="<?=htmlentities(trim($v_name, "'"))?>">
+								<input type="text" class="vst-input" name="v_name" value="<?=htmlentities(trim($v_name, "'"))?>">
 							</td>
 						</tr>
 						<tr>
@@ -115,7 +115,7 @@
 						</tr>
 						<tr>
 							<td>
-								<input type="text" size="20" class="vst-input" name="v_nat" value="<?=htmlentities(trim($v_nat, "'"))?>">
+								<input type="text" class="vst-input" name="v_nat" value="<?=htmlentities(trim($v_nat, "'"))?>">
 							</td>
 						</tr>
 					</table>

web/templates/pages/add_mail.html

@@ -147,7 +147,7 @@
 										</tr>
 										<tr>
 											<td>
-												<input type="text" size="20" class="vst-input" name="v_smtp_relay_host" value="<?=htmlentities(trim($v_smtp_relay_host, "'"))?>">
+												<input type="text" class="vst-input" name="v_smtp_relay_host" value="<?=htmlentities(trim($v_smtp_relay_host, "'"))?>">
 											</td>
 										</tr>
 										<tr>
@@ -157,7 +157,7 @@
 										</tr>
 										<tr>
 											<td>
-												<input type="text" size="20" class="vst-input" name="v_smtp_relay_port" value="<?=htmlentities(trim($v_smtp_relay_port, "'"))?>">
+												<input type="text" class="vst-input" name="v_smtp_relay_port" value="<?=htmlentities(trim($v_smtp_relay_port, "'"))?>">
 											</td>
 										</tr>
 										<tr>
@@ -167,7 +167,7 @@
 										</tr>
 										<tr>
 											<td>
-												<input type="text" size="20" class="vst-input" name="v_smtp_relay_user" value="<?=htmlentities(trim($v_smtp_relay_user, "'"))?>">
+												<input type="text" class="vst-input" name="v_smtp_relay_user" value="<?=htmlentities(trim($v_smtp_relay_user, "'"))?>">
 											</td>
 										</tr>
 										<tr>
@@ -177,7 +177,7 @@
 										</tr>
 										<tr>
 											<td>
-												<input type="text" size="20" class="vst-input" name="v_smtp_relay_pass">
+												<input type="text" class="vst-input" name="v_smtp_relay_pass">
 											</td>
 										</tr>
 									</table>

web/templates/pages/add_mail_acc.html

@@ -42,12 +42,8 @@
 						</tr>
 						<tr>
 							<td class="u-pt18">
-								<?=_('Domain');?>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<input type="text" size="20" class="vst-input" name="v_domain" value="<?=htmlentities(trim($v_domain, "'"))?>" disabled>
+								<label for="v_domain" class="form-label"><?=_('Domain');?></label>
+								<input type="text" class="form-control u-inputWidth" name="v_domain" id="v_domain" value="<?=htmlentities(trim($v_domain, "'"))?>" disabled>
 								<input type="hidden" name="v_domain" value="<?=htmlentities(trim($v_domain, "'"))?>">
 							</td>
 						</tr>
@@ -58,7 +54,7 @@
 						</tr>
 						<tr>
 							<td>
-								<input type="text" size="20" class="vst-input" name="v_account" value="<?=htmlentities(trim($v_account, "'"))?>">
+								<input type="text" class="vst-input" name="v_account" value="<?=htmlentities(trim($v_account, "'"))?>">
 							</td>
 						</tr>
 						<tr>
@@ -68,7 +64,7 @@
 						</tr>
 						<tr>
 							<td>
-								<input type="text" size="20" class="vst-input password" name="v_password"><br />
+								<input type="text" class="vst-input password" name="v_password"><br />
 								<meter max="4" id="meter"></meter>
 							</td>
 						</tr>
@@ -97,7 +93,7 @@
 									</tr>
 									<tr>
 										<td>
-											<input type="text" size="20" class="vst-input" name="v_quota" value="<?=htmlentities(trim($v_quota, "'"))?>">
+											<input type="text" class="vst-input" name="v_quota" value="<?=htmlentities(trim($v_quota, "'"))?>">
 											<i class="unlim-trigger fas fa-infinity" title="<?=_('Unlimited');?>" id="unlim-quota" /</i>
 										</td>
 									</tr>
@@ -144,7 +140,7 @@
 									</tr>
 									<tr>
 										<td>
-											<input type="text" size="20" class="vst-input" name="v_rate" value="<?=htmlentities(trim($v_rate, "'"))?>" <?php if($_SESSION['userContext'] != "admin"){ echo "disabled";}?>>
+											<input type="text" class="vst-input" name="v_rate" value="<?=htmlentities(trim($v_rate, "'"))?>" <?php if($_SESSION['userContext'] != "admin"){ echo "disabled";}?>>
 										</td>
 									</tr>
 								</table>
@@ -157,7 +153,7 @@
 						</tr>
 						<tr>
 							<td>
-								<input type="text" class="vst-input" name="v_send_email" value="<?=htmlentities(trim($v_send_email, "'"))?>">
+								<input type="email" class="vst-input" name="v_send_email" value="<?=htmlentities(trim($v_send_email, "'"))?>">
 								<input type="hidden" name="v_credentials" id="v_credentials">
 							</td>
 						</tr>

web/templates/pages/add_package.html

@@ -47,7 +47,7 @@
 						</tr>
 						<tr>
 							<td>
-								<input type="text" size="20" class="vst-input" name="v_package" value="<?=htmlentities(trim($v_package, "'"))?>">
+								<input type="text" class="vst-input" name="v_package" value="<?=htmlentities(trim($v_package, "'"))?>">
 							</td>
 						</tr>
 						<tr>
@@ -57,7 +57,7 @@
 						</tr>
 						<tr>
 							<td>
-								<input type="text" size="20" class="vst-input" name="v_disk_quota" value="<?=htmlentities(trim($v_disk_quota, "'"))?>">
+								<input type="text" class="vst-input" name="v_disk_quota" value="<?=htmlentities(trim($v_disk_quota, "'"))?>">
 								<i class="unlim-trigger fas fa-infinity" title="<?=_('Unlimited');?>" id="unlim-disk-quota"></i>
 							</td>
 						</tr>
@@ -68,7 +68,7 @@
 						</tr>
 						<tr>
 							<td>
-								<input type="text" size="20" class="vst-input" name="v_bandwidth" value="<?=htmlentities(trim($v_bandwidth, "'"))?>">
+								<input type="text" class="vst-input" name="v_bandwidth" value="<?=htmlentities(trim($v_bandwidth, "'"))?>">
 								<i class="unlim-trigger fas fa-infinity" title="<?=_('Unlimited');?>" id="unlim-bandwidth"></i>
 							</td>
 						</tr>
@@ -79,7 +79,7 @@
 						</tr>
 						<tr>
 							<td>
-								<input type="text" size="20" class="vst-input" name="v_backups" value="<?=htmlentities(trim($v_backups, "'"))?>">
+								<input type="text" class="vst-input" name="v_backups" value="<?=htmlentities(trim($v_backups, "'"))?>">
 							</td>
 						</tr>
 						<tr>
@@ -98,7 +98,7 @@
 									</tr>
 									<tr>
 										<td>
-											<input type="text" size="20" class="vst-input" name="v_web_domains" value="<?=htmlentities(trim($v_web_domains, "'"))?>">
+											<input type="text" class="vst-input" name="v_web_domains" value="<?=htmlentities(trim($v_web_domains, "'"))?>">
 											<i class="unlim-trigger fas fa-infinity" title="<?=_('Unlimited');?>" id="unlim-web-domains"></i>
 										</td>
 									</tr>
@@ -109,7 +109,7 @@
 									</tr>
 									<tr>
 										<td>
-											<input type="text" size="20" class="vst-input" name="v_web_aliases" value="<?=htmlentities(trim($v_web_aliases, "'"))?>">
+											<input type="text" class="vst-input" name="v_web_aliases" value="<?=htmlentities(trim($v_web_aliases, "'"))?>">
 											<i class="unlim-trigger fas fa-infinity" title="<?=_('Unlimited');?>" id="unlim-web-aliases"></i>
 										</td>
 									</tr>
@@ -209,7 +209,7 @@
 									</tr>
 									<tr>
 										<td>
-											<input type="text" size="20" class="vst-input" name="v_dns_domains" value="<?=htmlentities(trim($v_dns_domains, "'"))?>">
+											<input type="text" class="vst-input" name="v_dns_domains" value="<?=htmlentities(trim($v_dns_domains, "'"))?>">
 											<i class="unlim-trigger fas fa-infinity" title="<?=_('Unlimited');?>" id="unlim-dns-domain"></i>
 										</td>
 									</tr>
@@ -220,7 +220,7 @@
 									</tr>
 									<tr>
 										<td>
-											<input type="text" size="20" class="vst-input" name="v_dns_records" value="<?=htmlentities(trim($v_dns_records, "'"))?>">
+											<input type="text" class="vst-input" name="v_dns_records" value="<?=htmlentities(trim($v_dns_records, "'"))?>">
 											<i class="unlim-trigger fas fa-infinity" title="<?=_('Unlimited');?>" id="unlim-dns-records"></i>
 										</td>
 									</tr>
@@ -232,13 +232,13 @@
 										</tr>
 										<tr>
 											<td>
-												<input type="text" size="20" class="vst-input" name="v_ns1" value="<?=htmlentities(trim($v_ns1, "'"))?>">
+												<input type="text" class="vst-input" name="v_ns1" value="<?=htmlentities(trim($v_ns1, "'"))?>">
 												<span class="remove-ns"><i class="fas fa-trash status-icon dim red"></i></span>
 											</td>
 										</tr>
 										<tr>
 											<td>
-												<input type="text" size="20" class="vst-input" name="v_ns2" value="<?=htmlentities(trim($v_ns2, "'"))?>">
+												<input type="text" class="vst-input" name="v_ns2" value="<?=htmlentities(trim($v_ns2, "'"))?>">
 												<span class="remove-ns"><i class="fas fa-trash status-icon dim red"></i></span>
 											</td>
 										</tr>
@@ -246,7 +246,7 @@
 											if($v_ns3) {
 												echo '<tr>
 													<td>
-														<input type="text" size="20" class="vst-input" name="v_ns3" value="'.htmlentities(trim($v_ns3, "'")).'">
+														<input type="text" class="vst-input" name="v_ns3" value="'.htmlentities(trim($v_ns3, "'")).'">
 														<span class="remove-ns"><i class="fas fa-trash status-icon dim red"></i></span>
 													</td>
 												</tr>';
@@ -254,7 +254,7 @@
 											if($v_ns4) {
 												echo '<tr>
 													<td>
-														<input type="text" size="20" class="vst-input" name="v_ns4" value="'.htmlentities(trim($v_ns4, "'")).'">
+														<input type="text" class="vst-input" name="v_ns4" value="'.htmlentities(trim($v_ns4, "'")).'">
 														<span class="remove-ns"><i class="fas fa-trash status-icon dim red"></i></span>
 													</td>
 												</tr>';
@@ -262,7 +262,7 @@
 											if($v_ns5) {
 												echo '<tr>
 													<td>
-														<input type="text" size="20" class="vst-input" name="v_ns5" value="'.htmlentities(trim($v_ns5, "'")).'">
+														<input type="text" class="vst-input" name="v_ns5" value="'.htmlentities(trim($v_ns5, "'")).'">
 														<span class="remove-ns"><i class="fas fa-trash status-icon dim red"></i></span>
 													</td>
 												</tr>';
@@ -270,7 +270,7 @@
 											if($v_ns6) {
 												echo '<tr>
 													<td>
-														<input type="text" size="20" class="vst-input" name="v_ns6" value="'.htmlentities(trim($v_ns6, "'")).'">
+														<input type="text" class="vst-input" name="v_ns6" value="'.htmlentities(trim($v_ns6, "'")).'">
 														<span class="remove-ns"><i class="fas fa-trash status-icon dim red"></i></span>
 													</td>
 												</tr>';
@@ -278,7 +278,7 @@
 											if($v_ns7) {
 												echo '<tr>
 													<td>
-														<input type="text" size="20" class="vst-input" name="v_ns7" value="'.htmlentities(trim($v_ns7, "'")).'">
+														<input type="text" class="vst-input" name="v_ns7" value="'.htmlentities(trim($v_ns7, "'")).'">
 														<span class="remove-ns"><i class="fas fa-trash status-icon dim red"></i></span>
 													</td>
 												</tr>';
@@ -286,7 +286,7 @@
 											if($v_ns8) {
 												echo '<tr>
 													<td>
-														<input type="text" size="20" class="vst-input" name="v_ns8" value="'.htmlentities(trim($v_ns8, "'")).'">
+														<input type="text" class="vst-input" name="v_ns8" value="'.htmlentities(trim($v_ns8, "'")).'">
 														<span class="remove-ns"><i class="fas fa-trash status-icon dim red"></i></span>
 													</td>
 												</tr>';
@@ -317,7 +317,7 @@
 									</tr>
 									<tr>
 										<td>
-											<input type="text" size="20" class="vst-input" name="v_mail_domains" value="<?=htmlentities(trim($v_mail_domains, "'"))?>">
+											<input type="text" class="vst-input" name="v_mail_domains" value="<?=htmlentities(trim($v_mail_domains, "'"))?>">
 											<i class="unlim-trigger fas fa-infinity" title="<?=_('Unlimited');?>" id="unlim-mail-domains"></i>
 										</td>
 									</tr>
@@ -328,7 +328,7 @@
 									</tr>
 									<tr>
 										<td>
-											<input type="text" size="20" class="vst-input" name="v_mail_accounts" value="<?=htmlentities(trim($v_mail_accounts, "'"))?>">
+											<input type="text" class="vst-input" name="v_mail_accounts" value="<?=htmlentities(trim($v_mail_accounts, "'"))?>">
 											<i class="unlim-trigger fas fa-infinity" title="<?=_('Unlimited');?>" id="unlim-mail-accounts"></i>
 										<td>
 									</tr>
@@ -339,7 +339,7 @@
 									</tr>
 									<tr>
 										<td>
-											<input type="text" size="20" class="vst-input" name="v_ratelimit" value="<?=htmlentities(trim($v_ratelimit, "'"))?>">
+											<input type="text" class="vst-input" name="v_ratelimit" value="<?=htmlentities(trim($v_ratelimit, "'"))?>">
 										<td>
 									</tr>
 								</table>
@@ -361,7 +361,7 @@
 									</tr>
 									<tr>
 										<td>
-											<input type="text" size="20" class="vst-input" name="v_databases" value="<?=htmlentities(trim($v_databases, "'"))?>">
+											<input type="text" class="vst-input" name="v_databases" value="<?=htmlentities(trim($v_databases, "'"))?>">
 											<i class="unlim-trigger fas fa-infinity" title="<?=_('Unlimited');?>" id="unlim-databases"></i>
 										</td>
 									</tr>
@@ -384,7 +384,7 @@
 									</tr>
 									<tr>
 										<td>
-											<input type="text" size="20" class="vst-input" name="v_cron_jobs" value="<?=htmlentities(trim($v_cron_jobs, "'"))?>">
+											<input type="text" class="vst-input" name="v_cron_jobs" value="<?=htmlentities(trim($v_cron_jobs, "'"))?>">
 											<i class="unlim-trigger fas fa-infinity" title="<?=_('Unlimited');?>" id="unlim-cron-jobs"></i>
 										</td>
 									</tr>

web/templates/pages/add_user.html

@@ -47,7 +47,7 @@
 						</tr>
 						<tr>
 							<td>
-								<input type="text" size="20" class="vst-input" name="v_username" value="<?=htmlentities(trim($v_username, "'"))?>" tabindex="1">
+								<input type="text" class="vst-input" name="v_username" value="<?=htmlentities(trim($v_username, "'"))?>" tabindex="1">
 							</td>
 						</tr>
 						<tr>
@@ -57,7 +57,7 @@
 						</tr>
 						<tr>
 							<td>
-								<input type="text" size="20" class="vst-input" name="v_name" value="<?=htmlentities(trim($v_name, "'"))?>" tabindex="2">
+								<input type="text" class="vst-input" name="v_name" value="<?=htmlentities(trim($v_name, "'"))?>" tabindex="2">
 							</td>
 						</tr>
 						<tr>
@@ -67,7 +67,7 @@
 						</tr>
 						<tr>
 							<td>
-								<input type="text" size="20" class="vst-input" name="v_email" id='v_email' value="<?=htmlentities(trim($v_email, "'"))?>" tabindex="3">
+								<input type="email" class="vst-input" name="v_email" id='v_email' value="<?=htmlentities(trim($v_email, "'"))?>" tabindex="3">
 							</td>
 						</tr>
 						<tr>
@@ -77,7 +77,7 @@
 						</tr>
 						<tr>
 							<td>
-								<input type="text" size="20" class="vst-input password" name="v_password" value="<?=htmlentities(trim($v_password, "'"))?>" tabindex="4" /><br />
+								<input type="text" class="vst-input password" name="v_password" value="<?=htmlentities(trim($v_password, "'"))?>" tabindex="4" /><br />
 								<meter max="4" id="meter"></meter>
 							</td>
 						</tr>
@@ -168,7 +168,7 @@
 						</tr>
 						<tr>
 							<td>
-								<input type="text" class="vst-input" name="v_notify" id="v_notify" value="<?=htmlentities(trim($v_notify, "'"))?>" tabindex="8">
+								<input type="email" class="vst-input" name="v_notify" id="v_notify" value="<?=htmlentities(trim($v_notify, "'"))?>" tabindex="8">
 							</td>
 						</tr>
 					</table>

web/templates/pages/add_web.html

@@ -64,12 +64,8 @@
 						<?php if (($user_plain == 'admin') && (($_GET['accept'] === "true")) || ($user_plain !== "admin")) {?>
 							<tr>
 								<td class="u-pt18">
-									<?=_('Domain');?>
-								</td>
-							</tr>
-							<tr>
-								<td>
-									<input type="text" size="20" class="vst-input" name="v_domain" id="v_domain" value="<?=htmlentities(trim($v_domain, "'"))?>">
+									<label for="v_domain" class="form-label"><?=_('Domain');?></label>
+									<input type="text" class="form-control u-inputWidth" name="v_domain" id="v_domain" value="<?=htmlentities(trim($v_domain, "'"))?>">
 								</td>
 							</tr>
 							<tr>
@@ -119,7 +115,7 @@
 							<?php } ?>
 						<?php } ?>
 					</table>
-					<table class="data-col2">
+					<table class="data-col2 u-mb20">
 					</table>
 				</td>
 			</tr>

web/templates/pages/edit_cron.html

@@ -360,7 +360,7 @@
 						</tr>
 						<tr>
 							<td>
-								<input type="text" size="20" class="vst-input long" name="v_cmd" value="<?=htmlentities(trim($v_cmd, "'"))?>">
+								<input type="text" class="vst-input long" name="v_cmd" value="<?=htmlentities(trim($v_cmd, "'"))?>">
 							</td>
 						</tr>
 
@@ -371,7 +371,7 @@
 						</tr>
 						<tr>
 							<td>
-								<input type="text" size="20" class="vst-input short" name="v_min" value="<?=htmlentities(trim($v_min, "'"))?>">
+								<input type="text" class="vst-input short" name="v_min" value="<?=htmlentities(trim($v_min, "'"))?>">
 							</td>
 						</tr>
 						<tr>
@@ -381,7 +381,7 @@
 						</tr>
 						<tr>
 							<td>
-								<input type="text" size="20" class="vst-input short" name="v_hour" value="<?=htmlentities(trim($v_hour, "'"))?>">
+								<input type="text" class="vst-input short" name="v_hour" value="<?=htmlentities(trim($v_hour, "'"))?>">
 							</td>
 						</tr>
 						<tr>
@@ -391,7 +391,7 @@
 						</tr>
 						<tr>
 							<td>
-								<input type="text" size="20" class="vst-input short" name="v_day" value="<?=htmlentities(trim($v_day, "'"))?>">
+								<input type="text" class="vst-input short" name="v_day" value="<?=htmlentities(trim($v_day, "'"))?>">
 							</td>
 						</tr>
 						<tr>
@@ -401,7 +401,7 @@
 						</tr>
 						<tr>
 							<td>
-								<input type="text" size="20" class="vst-input short" name="v_month" value="<?=htmlentities(trim($v_month, "'"))?>">
+								<input type="text" class="vst-input short" name="v_month" value="<?=htmlentities(trim($v_month, "'"))?>">
 							</td>
 						</tr>
 						<tr>
@@ -411,7 +411,7 @@
 						</tr>
 						<tr>
 							<td>
-								<input type="text" size="20" class="vst-input short" name="v_wday" value="<?=htmlentities(trim($v_wday, "'"))?>">
+								<input type="text" class="vst-input short" name="v_wday" value="<?=htmlentities(trim($v_wday, "'"))?>">
 							</td>
 						</tr>
 					</table>

web/templates/pages/edit_db.html

@@ -43,27 +43,23 @@
 						</tr>
 						<tr>
 							<td class="u-pt18">
-								<?=_('Database');?>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<input type="text" size="20" class="vst-input" name="v_database" value="<?=htmlentities(trim($v_database, "'"))?>" disabled>
-								<small class="hint"></small>
+								<label for="v_database" class="form-label"><?=_('Database');?></label>
+								<div class="u-sideBySide">
+									<input type="text" class="form-control u-inputWidth" name="v_database" id="v_database" value="<?=htmlentities(trim($v_database, "'"))?>" disabled>
+									<small class="hint u-ml10"></small>
+								</div>
 							</td>
 						</tr>
 						<tr>
 							<td class="u-pt6">
-								<?php
-									print _('Username');
-									echo "&nbsp;&nbsp;&nbsp;&nbsp;<em><small>(".sprintf(_('maximum characters length, including prefix'), 32).")</small></em>";
-								?>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<input type="text" size="20" class="vst-input" name="v_dbuser" value="<?=htmlentities(trim($v_dbuser, "'"))?>">
-								<small class="hint"></small>
+								<label for="v_dbuser" class="form-label">
+									<?=_('Username');?>
+									&nbsp;&nbsp;&nbsp;&nbsp;<em><small>(<?=sprintf(_('maximum characters length, including prefix'), 32);?>)</small></em>
+								</label>
+								<div class="u-sideBySide">
+									<input type="text" class="form-control u-inputWidth" name="v_dbuser" id="v_dbuser" value="<?=htmlentities(trim($v_dbuser, "'"))?>">
+									<small class="hint u-ml10"></small>
+								</div>
 							</td>
 						</tr>
 						<tr>
@@ -73,7 +69,7 @@
 						</tr>
 						<tr>
 							<td>
-								<input type="text" size="20" class="vst-input password" name="v_password" value="<?=htmlentities(trim($v_password, "'"))?>"><br />
+								<input type="text" class="vst-input password" name="v_password" value="<?=htmlentities(trim($v_password, "'"))?>"><br />
 								<meter max="4" id="meter"></meter>
 							</td>
 						</tr>
@@ -89,32 +85,20 @@
 						</tr>
 						<tr>
 							<td class="u-pt6">
-								<?=_('Type');?>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<input type="text" size="20" class="vst-input" name="v_type" value="<?=htmlentities(trim($v_type, "'"))?>" disabled>
+								<label for="v_type" class="form-label"><?=_('Type');?></label>
+								<input type="text" class="form-control u-inputWidth" name="v_type" id="v_type" value="<?=htmlentities(trim($v_type, "'"))?>" disabled>
 							</td>
 						</tr>
 						<tr>
 							<td class="u-pt6">
-								<?=_('Host');?>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<input type="text" size="20" class="vst-input" name="v_host" value="<?=htmlentities(trim($v_host, "'"))?>" disabled>
+								<label for="v_host" class="form-label"><?=_('Host');?></label>
+								<input type="text" class="form-control u-inputWidth" name="v_host" id="v_host" value="<?=htmlentities(trim($v_host, "'"))?>" disabled>
 							</td>
 						</tr>
 						<tr>
 							<td class="u-pt6">
-								<?=_('Charset');?>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<input type="text" size="20" class="vst-input" name="v_charset" value="<?=htmlentities(trim($v_charset, "'"))?>" disabled>
+								<label for="v_charset" class="form-label"><?=_('Charset');?></label>
+								<input type="text" class="form-control u-inputWidth" name="v_charset" id="v_charset" value="<?=htmlentities(trim($v_charset, "'"))?>" disabled>
 							</td>
 						</tr>
 					</table>
@@ -126,6 +110,6 @@
 </div>
 <?php if ($v_type == 'pgsql'){ $user_plain=strtolower($user_plain); } ?>
 <script>
-    GLOBAL.DB_USER_PREFIX = "<?=$user_plain;?>_";
-    GLOBAL.DB_DBNAME_PREFIX =  "<?=$user_plain;?>_";
+	GLOBAL.DB_USER_PREFIX = "<?=$user_plain;?>_";
+	GLOBAL.DB_DBNAME_PREFIX =  "<?=$user_plain;?>_";
 </script>

web/templates/pages/edit_dns.html

@@ -43,12 +43,8 @@
 						</tr>
 						<tr>
 							<td class="u-pt18">
-								<?=_('Domain');?>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<input type="text" size="20" class="vst-input" name="v_domain" value="<?=htmlentities(trim($v_domain, "'"))?>" disabled>
+								<label for="v_domain" class="form-label"><?=_('Domain');?></label>
+								<input type="text" class="form-control u-inputWidth" name="v_domain" id="v_domain" value="<?=htmlentities(trim($v_domain, "'"))?>" disabled>
 								<input type="hidden" name="v_domain" value="<?=htmlentities(trim($v_domain, "'"))?>">
 							</td>
 						</tr>
@@ -65,7 +61,7 @@
 										}
 									?>
 								</select>
-								<input type="text" size="20" class="vst-input vst-list-editor" name="v_ip" id="v_ip" value="<?=htmlentities(trim($v_ip, "'"))?>">
+								<input type="text" class="vst-input vst-list-editor" name="v_ip" id="v_ip" value="<?=htmlentities(trim($v_ip, "'"))?>">
 							</td>
 						</tr>
 						<?php if (($_SESSION['userContext'] === 'admin') || ($_SESSION['userContext'] === 'user') && ($_SESSION['POLICY_USER_EDIT_DNS_TEMPLATES'] === 'yes')) { ?>
@@ -91,32 +87,22 @@
 						<?php } ?>
 						<tr>
 							<td class="u-pt6">
-								<?=_('Expiration Date');?><span class="optional">(<?=_('YYYY-MM-DD');?>)</span>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<input type="text" size="20" class="vst-input" name="v_exp" value="<?=htmlentities(trim($v_exp, "'"))?>">
+								<label for="v_exp" class="form-label">
+									<?=_('Expiration Date');?><span class="optional">(<?=_('YYYY-MM-DD');?>)</span>
+								</label>
+								<input type="text" class="form-control u-inputWidth" name="v_exp" id="v_exp" value="<?=htmlentities(trim($v_exp, "'"))?>">
 							</td>
 						</tr>
 						<tr>
 							<td class="u-pt6">
-								<?=_('SOA');?>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<input type="text" size="20" class="vst-input" name="v_soa" value="<?=htmlentities(trim($v_soa, "'"))?>">
+								<label for="v_soa" class="form-label"><?=_('SOA');?></label>
+								<input type="text" class="form-control u-inputWidth" name="v_soa" id="v_soa" value="<?=htmlentities(trim($v_soa, "'"))?>">
 							</td>
 						</tr>
 						<tr>
 							<td class="u-pt6">
-								<?=_('TTL');?>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<input type="text" size="20" class="vst-input" name="v_ttl" value="<?=htmlentities(trim($v_ttl, "'"))?>">
+								<label for="v_ttl" class="form-label"><?=_('TTL');?></label>
+								<input type="text" class="form-control u-inputWidth" name="v_ttl" id="v_ttl" value="<?=htmlentities(trim($v_ttl, "'"))?>">
 							</td>
 						</tr>
 					</table>

web/templates/pages/edit_dns_rec.html

@@ -43,25 +43,19 @@
 						</tr>
 						<tr>
 							<td class="u-pt18">
-								<?=_('Domain');?>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<input type="text" size="20" class="vst-input" name="v_domain" value="<?=htmlentities(trim($v_domain, "'"))?>" disabled>
+								<label for="v_domain" class="form-label"><?=_('Domain');?></label>
+								<input type="text" class="form-control u-inputWidth" name="v_domain" id="v_domain" value="<?=htmlentities(trim($v_domain, "'"))?>" disabled>
 								<input type="hidden" name="v_domain" value="<?=htmlentities(trim($v_domain, "'"))?>">
 							</td>
 						</tr>
 						<tr>
 							<td class="u-pt6">
-								<?=_('Record');?>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<input type="text" size="20" class="vst-input" name="v_rec" value="<?=htmlentities(trim($v_rec, "'"))?>">
-								<input type="hidden" name="v_record_id" value="<?=htmlentities($v_record_id)?>">
-								<small class="hint"></small>
+								<label for="v_rec" class="form-label"><?=_('Record');?></label>
+								<div class="u-sideBySide">
+									<input type="text" class="form-control u-inputWidth" name="v_rec" id="v_rec" value="<?=htmlentities(trim($v_rec, "'"))?>">
+                  <input type="hidden" name="v_record_id" value="<?=htmlentities(trim($v_record_id, "'"))?>">
+									<small class="hint u-ml10"></small>
+								</div>
 							</td>
 						</tr>
 						<tr>
@@ -97,32 +91,23 @@
 										}
 									?>
 								</select>
-								<input type="text" size="20" class="vst-input vst-list-editor" name="v_val" id="v_val" value="<?=htmlentities(trim($v_val, "'"))?>">
+								<input type="text" class="vst-input vst-list-editor" name="v_val" id="v_val" value="<?=htmlentities(trim($v_val, "'"))?>">
 							</td>
 						</tr>
 						<tr>
 							<td class="u-pt6">
-								<?=_('Priority');?> <span class="optional">(<?=_('optional');?>)</span>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<input type="text" size="20" class="vst-input" name="v_priority" value="<?=htmlentities(trim($v_priority, "'"))?>">
+								<label for="v_priority" class="form-label">
+									<?=_('Priority');?> <span class="optional">(<?=_('optional');?>)</span>
+								</label>
+								<input type="text" class="form-control u-inputWidth" name="v_priority" id="v_priority" value="<?=htmlentities(trim($v_priority, "'"))?>">
 							</td>
 						</tr>
 						<tr>
 							<td class="u-pt6">
-								<?=_('TTL');?> <span class="optional">(<?=_('optional');?>)</span>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<input type="text" size="20" class="vst-input" name="v_ttl" value="<?=htmlentities(trim($v_ttl, "'"))?>">
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<input type="hidden" size="20" class="vst-input" name="v_record_id" value="<?=htmlentities(trim($v_record_id, "'"))?>">
+								<label for="v_ttl" class="form-label">
+									<?=_('TTL');?> <span class="optional">(<?=_('optional');?>)</span>
+								</label>
+								<input type="text" class="form-control u-inputWidth" name="v_ttl" id="v_ttl" value="<?=htmlentities(trim($v_ttl, "'"))?>">
 							</td>
 						</tr>
 					</table>
@@ -132,6 +117,7 @@
 		</table>
 	</form>
 </div>
+
 <script>
 	GLOBAL.DNS_REC_PREFIX = "<?=htmlentities($_GET['domain']); ?>";
 </script>

web/templates/pages/edit_firewall.html

@@ -62,12 +62,10 @@
 						</tr>
 						<tr>
 							<td class="u-pt6">
-								<?=_('Port');?> <span class="optional">(<?=_('Ranges and Lists are acceptable');?>)</span>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<input type="text" size="20" class="vst-input" name="v_port" value="<?=htmlentities(trim($v_port, "'"))?>" placeholder="<?=_('All ports: 0, Range: 80-82, List: 80,443,8080,8443');?>">
+								<label for="v_port" class="form-label">
+									<?=_('Port');?> <span class="optional">(<?=_('Ranges and Lists are acceptable');?>)</span>
+								</label>
+								<input type="text" class="form-control u-inputWidth" name="v_port" id="v_port" value="<?=htmlentities(trim($v_port, "'"))?>" placeholder="<?=_('All ports: 0, Range: 80-82, List: 80,443,8080,8443');?>">
 							</td>
 						</tr>
 						<tr>
@@ -78,17 +76,15 @@
 								<select class="form-select u-inputWidth" tabindex="-1" id="quickips_list" onchange="this.nextElementSibling.value=this.value">
 									<option value="">&nbsp;</option>
 								</select>
-								<input type="text" size="20" class="vst-input vst-list-editor" name="v_ip" id="v_ip" value="<?=htmlentities(trim($v_ip, "'"))?>">
+								<input type="text" class="vst-input vst-list-editor" name="v_ip" id="v_ip" value="<?=htmlentities(trim($v_ip, "'"))?>">
 							</td>
 						</tr>
 						<tr>
 							<td class="u-pt6">
-								<?=_('Comment');?> <span class="optional">(<?=_('optional');?>)</span>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<input type="text" size="20" class="vst-input" name="v_comment" maxlength="255" value="<?=htmlentities(trim($v_comment, "'"))?>">
+								<label for="v_comment" class="form-label">
+									<?=_('Comment');?> <span class="optional">(<?=_('optional');?>)</span>
+								</label>
+								<input type="text" class="form-control u-inputWidth" name="v_comment" id="v_comment" maxlength="255" value="<?=htmlentities(trim($v_comment, "'"))?>">
 							</td>
 						</tr>
 					</table>

web/templates/pages/edit_ip.html

@@ -48,7 +48,7 @@
 						</tr>
 						<tr>
 							<td>
-								<input type="text" size="20" class="vst-input" name="v_ip" value="<?=htmlentities(trim($v_ip, "'"))?>" disabled>
+								<input type="text" class="vst-input" name="v_ip" value="<?=htmlentities(trim($v_ip, "'"))?>" disabled>
 								<input type="hidden" name="v_ip" value="<?=htmlentities(trim($v_ip, "'"))?>">
 							</td>
 						</tr>
@@ -59,7 +59,7 @@
 						</tr>
 						<tr>
 							<td>
-								<input type="text" size="20" class="vst-input" name="v_netmask" value="<?=htmlentities(trim($v_netmask, "'"))?>" disabled>
+								<input type="text" class="vst-input" name="v_netmask" value="<?=htmlentities(trim($v_netmask, "'"))?>" disabled>
 							</td>
 						</tr>
 						<tr>
@@ -69,7 +69,7 @@
 						</tr>
 						<tr>
 							<td>
-								<input type="text" size="20" class="vst-input" name="v_netmask" value="<?=htmlentities(trim($v_interface, "'"))?>" disabled>
+								<input type="text" class="vst-input" name="v_netmask" value="<?=htmlentities(trim($v_interface, "'"))?>" disabled>
 							</td>
 						</tr>
 						<tr>
@@ -103,7 +103,7 @@
 						</tr>
 						<tr>
 							<td>
-								<input type="text" size="20" class="vst-input" name="v_name" value="<?=htmlentities(trim($v_name, "'"))?>">
+								<input type="text" class="vst-input" name="v_name" value="<?=htmlentities(trim($v_name, "'"))?>">
 							</td>
 						</tr>
 						<tr>
@@ -113,7 +113,7 @@
 						</tr>
 						<tr>
 							<td>
-								<input type="text" size="20" class="vst-input" name="v_nat" value="<?=htmlentities(trim($v_nat, "'"))?>">
+								<input type="text" class="vst-input" name="v_nat" value="<?=htmlentities(trim($v_nat, "'"))?>">
 							</td>
 						</tr>
 					</table>

web/templates/pages/edit_mail.html

@@ -43,12 +43,8 @@
 						</tr>
 						<tr>
 							<td class="u-pt18">
-								<?=_('Domain');?>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<input type="text" size="20" class="vst-input" name="v_domain" value="<?=htmlentities(trim($v_domain, "'"))?>" disabled>
+								<label for="v_domain" class="form-label"><?=_('Domain');?></label>
+								<input type="text" class="form-control u-inputWidth" name="v_domain" id="v_domain" value="<?=htmlentities(trim($v_domain, "'"))?>" disabled>
 								<input type="hidden" name="v_domain" value="<?=htmlentities(trim($v_domain, "'"))?>">
 							</td>
 						</tr>
@@ -77,7 +73,7 @@
 						</tr>
 						<tr>
 							<td>
-								<input type="text" size="20" class="vst-input" name="v_catchall" value="<?=htmlentities(trim($v_catchall, "'"))?>">
+								<input type="text" class="vst-input" name="v_catchall" value="<?=htmlentities(trim($v_catchall, "'"))?>">
 							</td>
 						</tr>
 						<tr>
@@ -87,7 +83,7 @@
 						</tr>
 						<tr>
 							<td>
-								<input type="text" size="20" class="vst-input" name="v_rate" value="<?=htmlentities(trim($v_rate, "'"))?>" <?php if($_SESSION['userContext'] != "admin"){ echo "disabled";}?>>
+								<input type="text" class="vst-input" name="v_rate" value="<?=htmlentities(trim($v_rate, "'"))?>" <?php if($_SESSION['userContext'] != "admin"){ echo "disabled";}?>>
 							</td>
 						</tr>
 						<?php if (!empty($_SESSION['ANTISPAM_SYSTEM'])) {?>
@@ -286,7 +282,7 @@
 									</tr>
 									<tr>
 										<td>
-											<input type="text" size="20" class="vst-input" name="v_smtp_relay_host" value="<?=htmlentities(trim($v_smtp_relay_host, "'"))?>">
+											<input type="text" class="vst-input" name="v_smtp_relay_host" value="<?=htmlentities(trim($v_smtp_relay_host, "'"))?>">
 										</td>
 									</tr>
 									<tr>
@@ -296,7 +292,7 @@
 									</tr>
 									<tr>
 										<td>
-											<input type="text" size="20" class="vst-input" name="v_smtp_relay_port" value="<?=htmlentities(trim($v_smtp_relay_port, "'"))?>">
+											<input type="text" class="vst-input" name="v_smtp_relay_port" value="<?=htmlentities(trim($v_smtp_relay_port, "'"))?>">
 										</td>
 									</tr>
 									<tr>
@@ -306,7 +302,7 @@
 									</tr>
 									<tr>
 										<td>
-											<input type="text" size="20" class="vst-input" name="v_smtp_relay_user" value="<?=htmlentities(trim($v_smtp_relay_user, "'"))?>">
+											<input type="text" class="vst-input" name="v_smtp_relay_user" value="<?=htmlentities(trim($v_smtp_relay_user, "'"))?>">
 										</td>
 									</tr>
 									<tr>
@@ -316,7 +312,7 @@
 									</tr>
 									<tr>
 										<td>
-											<input type="text" size="20" class="vst-input" name="v_smtp_relay_pass">
+											<input type="text" class="vst-input" name="v_smtp_relay_pass">
 										</td>
 									</tr>
 								</table>

web/templates/pages/edit_mail_acc.html

@@ -48,7 +48,7 @@
 						</tr>
 						<tr>
 							<td>
-								<input type="text" size="20" class="vst-input" name="v_email" value="<?=htmlentities($_GET['account'])."@".htmlentities($_GET['domain'])?>" disabled>
+								<input type="text" class="vst-input" name="v_email" value="<?=htmlentities($_GET['account'])."@".htmlentities($_GET['domain'])?>" disabled>
 								<input type="hidden" name="v_domain" value="<?=htmlentities(trim($v_domain, "'"))?>">
 								<input type="hidden" name="v_account" value="<?=htmlentities(trim($v_account, "'"))?>">
 							</td>
@@ -60,7 +60,7 @@
 						</tr>
 						<tr>
 							<td>
-								<input type="text" size="20" class="vst-input password" name="v_password" value="<?=htmlentities(trim($v_password, "'"))?>"><br />
+								<input type="text" class="vst-input password" name="v_password" value="<?=htmlentities(trim($v_password, "'"))?>"><br />
 								<meter max="4" id="meter"></meter>
 							</td>
 						</tr>
@@ -81,7 +81,7 @@
 						</tr>
 						<tr>
 							<td>
-								<input type="text" class="vst-input" name="v_send_email" value="<?=htmlentities(trim($v_send_email, "'"))?>">
+								<input type="email" class="vst-input" name="v_send_email" value="<?=htmlentities(trim($v_send_email, "'"))?>">
 								<input type="hidden" name="v_credentials" id="v_credentials">
 							</td>
 						</tr>
@@ -92,7 +92,7 @@
 						</tr>
 						<tr>
 							<td>
-								<input type="text" size="20" class="vst-input" name="v_quota" value="<?php if (!empty($v_quota)) {echo htmlentities(trim($v_quota, "'"));} else { echo "0"; } ?>">
+								<input type="text" class="vst-input" name="v_quota" value="<?php if (!empty($v_quota)) {echo htmlentities(trim($v_quota, "'"));} else { echo "0"; } ?>">
 								<i class="unlim-trigger fas fa-infinity" title="<?=_('Unlimited');?>" id="unlim-quota"></i>
 							</td>
 						</tr>
@@ -167,7 +167,7 @@
 						</tr>
 						<tr>
 							<td>
-								<input type="text" size="20" class="vst-input" name="v_rate" value="<?=htmlentities(trim($v_rate, "'"))?>" <?php if($_SESSION['userContext'] != "admin"){ echo "disabled";}?>>
+								<input type="text" class="vst-input" name="v_rate" value="<?=htmlentities(trim($v_rate, "'"))?>" <?php if($_SESSION['userContext'] != "admin"){ echo "disabled";}?>>
 							</td>
 						</tr>
 					</table>

web/templates/pages/edit_package.html

@@ -48,7 +48,7 @@
 						</tr>
 						<tr>
 							<td>
-								<input type="text" size="20" class="vst-input" name="v_package_new" value="<?=htmlentities(trim($v_package_new, "'"))?>">
+								<input type="text" class="vst-input" name="v_package_new" value="<?=htmlentities(trim($v_package_new, "'"))?>">
 								<input type="hidden" name="v_package" value="<?=htmlentities(trim($v_package, "'"))?>">
 							</td>
 						</tr>
@@ -59,7 +59,7 @@
 						</tr>
 						<tr>
 							<td>
-								<input type="text" size="20" class="vst-input" name="v_disk_quota" value="<?=htmlentities(trim($v_disk_quota, "'"))?>">
+								<input type="text" class="vst-input" name="v_disk_quota" value="<?=htmlentities(trim($v_disk_quota, "'"))?>">
 								<i class="unlim-trigger fas fa-infinity" title="<?=_('Unlimited');?>" id="unlim-disk-quota"></i>
 							</td>
 						</tr>
@@ -70,7 +70,7 @@
 						</tr>
 						<tr>
 							<td>
-								<input type="text" size="20" class="vst-input" name="v_bandwidth" value="<?=htmlentities(trim($v_bandwidth, "'"))?>">
+								<input type="text" class="vst-input" name="v_bandwidth" value="<?=htmlentities(trim($v_bandwidth, "'"))?>">
 								<i class="unlim-trigger fas fa-infinity" title="<?=_('Unlimited');?>" id="unlim-bandwidth"></i>
 							</td>
 						</tr>
@@ -81,7 +81,7 @@
 						</tr>
 						<tr>
 							<td>
-								<input type="text" size="20" class="vst-input" name="v_backups" value="<?=htmlentities(trim($v_backups, "'"))?>">
+								<input type="text" class="vst-input" name="v_backups" value="<?=htmlentities(trim($v_backups, "'"))?>">
 							</td>
 						</tr>
 						<tr>
@@ -100,7 +100,7 @@
 									</tr>
 									<tr>
 										<td>
-											<input type="text" size="20" class="vst-input" name="v_web_domains" value="<?=htmlentities(trim($v_web_domains, "'"))?>">
+											<input type="text" class="vst-input" name="v_web_domains" value="<?=htmlentities(trim($v_web_domains, "'"))?>">
 											<i class="unlim-trigger fas fa-infinity" title="<?=_('Unlimited');?>" id="unlim-web-domains"></i>
 										</td>
 									</tr>
@@ -111,7 +111,7 @@
 									</tr>
 									<tr>
 										<td>
-											<input type="text" size="20" class="vst-input" name="v_web_aliases" value="<?=htmlentities(trim($v_web_aliases, "'"))?>">
+											<input type="text" class="vst-input" name="v_web_aliases" value="<?=htmlentities(trim($v_web_aliases, "'"))?>">
 											<i class="unlim-trigger fas fa-infinity" title="<?=_('Unlimited');?>" id="unlim-web-aliases"></i>
 										</td>
 									</tr>
@@ -214,7 +214,7 @@
 									</tr>
 									<tr>
 										<td>
-											<input type="text" size="20" class="vst-input" name="v_dns_domains" value="<?=htmlentities(trim($v_dns_domains, "'"))?>">
+											<input type="text" class="vst-input" name="v_dns_domains" value="<?=htmlentities(trim($v_dns_domains, "'"))?>">
 											<i class="unlim-trigger fas fa-infinity" title="<?=_('Unlimited');?>" id="unlim-dns-domain"></i>
 										</td>
 									</tr>
@@ -225,7 +225,7 @@
 									</tr>
 									<tr>
 										<td>
-											<input type="text" size="20" class="vst-input" name="v_dns_records" value="<?=htmlentities(trim($v_dns_records, "'"))?>">
+											<input type="text" class="vst-input" name="v_dns_records" value="<?=htmlentities(trim($v_dns_records, "'"))?>">
 											<i class="unlim-trigger fas fa-infinity" title="<?=_('Unlimited');?>" id="unlim-dns-records"></i>
 										</td>
 									</tr>
@@ -237,13 +237,13 @@
 										</tr>
 										<tr>
 											<td>
-												<input type="text" size="20" class="vst-input" name="v_ns1" value="<?=htmlentities(trim($v_ns1, "'"))?>">
+												<input type="text" class="vst-input" name="v_ns1" value="<?=htmlentities(trim($v_ns1, "'"))?>">
 												<span class="remove-ns"><i class="fas fa-trash status-icon dim red"></i></span>
 											</td>
 										</tr>
 										<tr>
 											<td>
-												<input type="text" size="20" class="vst-input" name="v_ns2" value="<?=htmlentities(trim($v_ns2, "'"))?>">
+												<input type="text" class="vst-input" name="v_ns2" value="<?=htmlentities(trim($v_ns2, "'"))?>">
 												<span class="remove-ns"><i class="fas fa-trash status-icon dim red"></i></span>
 											</td>
 										</tr>
@@ -251,7 +251,7 @@
 											if($v_ns3) {
 												echo '<tr>
 													<td>
-														<input type="text" size="20" class="vst-input" name="v_ns3" value="'.htmlentities(trim($v_ns3, "'")).'">
+														<input type="text" class="vst-input" name="v_ns3" value="'.htmlentities(trim($v_ns3, "'")).'">
 														<span class="remove-ns"><i class="fas fa-trash status-icon dim red"></i></span>
 													</td>
 												</tr>';
@@ -259,7 +259,7 @@
 											if($v_ns4) {
 												echo '<tr>
 													<td>
-														<input type="text" size="20" class="vst-input" name="v_ns4" value="'.htmlentities(trim($v_ns4, "'")).'">
+														<input type="text" class="vst-input" name="v_ns4" value="'.htmlentities(trim($v_ns4, "'")).'">
 														<span class="remove-ns"><i class="fas fa-trash status-icon dim red"></i></span>
 													</td>
 												</tr>';
@@ -267,7 +267,7 @@
 											if($v_ns5) {
 												echo '<tr>
 													<td>
-														<input type="text" size="20" class="vst-input" name="v_ns5" value="'.htmlentities(trim($v_ns5, "'")).'">
+														<input type="text" class="vst-input" name="v_ns5" value="'.htmlentities(trim($v_ns5, "'")).'">
 														<span class="remove-ns"><i class="fas fa-trash status-icon dim red"></i></span>
 													</td>
 												</tr>';
@@ -275,7 +275,7 @@
 											if($v_ns6) {
 												echo '<tr>
 													<td>
-														<input type="text" size="20" class="vst-input" name="v_ns6" value="'.htmlentities(trim($v_ns6, "'")).'">
+														<input type="text" class="vst-input" name="v_ns6" value="'.htmlentities(trim($v_ns6, "'")).'">
 														<span class="remove-ns"><i class="fas fa-trash status-icon dim red"></i></span>
 													</td>
 												</tr>';
@@ -283,7 +283,7 @@
 											if($v_ns7) {
 												echo '<tr>
 													<td>
-														<input type="text" size="20" class="vst-input" name="v_ns7" value="'.htmlentities(trim($v_ns7, "'")).'">
+														<input type="text" class="vst-input" name="v_ns7" value="'.htmlentities(trim($v_ns7, "'")).'">
 														<span class="remove-ns"><i class="fas fa-trash status-icon dim red"></i></span>
 													</td>
 												</tr>';
@@ -291,7 +291,7 @@
 											if($v_ns8) {
 												echo '<tr>
 													<td>
-														<input type="text" size="20" class="vst-input" name="v_ns8" value="'.htmlentities(trim($v_ns8, "'")).'">
+														<input type="text" class="vst-input" name="v_ns8" value="'.htmlentities(trim($v_ns8, "'")).'">
 														<span class="remove-ns"><i class="fas fa-trash status-icon dim red"></i></span>
 													</td>
 												</tr>';
@@ -322,7 +322,7 @@
 									</tr>
 									<tr>
 										<td>
-											<input type="text" size="20" class="vst-input" name="v_mail_domains" value="<?=htmlentities(trim($v_mail_domains, "'"))?>">
+											<input type="text" class="vst-input" name="v_mail_domains" value="<?=htmlentities(trim($v_mail_domains, "'"))?>">
 											<i class="unlim-trigger fas fa-infinity" title="<?=_('Unlimited');?>" id="unlim-mail-domains"></i>
 										</td>
 									</tr>
@@ -333,7 +333,7 @@
 									</tr>
 									<tr>
 										<td>
-											<input type="text" size="20" class="vst-input" name="v_mail_accounts" value="<?=htmlentities(trim($v_mail_accounts, "'"))?>">
+											<input type="text" class="vst-input" name="v_mail_accounts" value="<?=htmlentities(trim($v_mail_accounts, "'"))?>">
 											<i class="unlim-trigger fas fa-infinity" title="<?=_('Unlimited');?>" id="unlim-mail-accounts"></i>
 										<td>
 									</tr>
@@ -344,7 +344,7 @@
 									</tr>
 									<tr>
 										<td>
-											<input type="text" size="20" class="vst-input" name="v_ratelimit" value="<?=htmlentities(trim($v_ratelimit, "'"))?>">
+											<input type="text" class="vst-input" name="v_ratelimit" value="<?=htmlentities(trim($v_ratelimit, "'"))?>">
 										<td>
 									</tr>
 								</table>
@@ -366,7 +366,7 @@
 									</tr>
 									<tr>
 										<td>
-											<input type="text" size="20" class="vst-input" name="v_databases" value="<?=htmlentities(trim($v_databases, "'"))?>">
+											<input type="text" class="vst-input" name="v_databases" value="<?=htmlentities(trim($v_databases, "'"))?>">
 											<i class="unlim-trigger fas fa-infinity" title="<?=_('Unlimited');?>" id="unlim-databases"></i>
 										</td>
 									</tr>
@@ -389,7 +389,7 @@
 									</tr>
 									<tr>
 										<td>
-											<input type="text" size="20" class="vst-input" name="v_cron_jobs" value="<?=htmlentities(trim($v_cron_jobs, "'"))?>">
+											<input type="text" class="vst-input" name="v_cron_jobs" value="<?=htmlentities(trim($v_cron_jobs, "'"))?>">
 											<i class="unlim-trigger fas fa-infinity" title="<?=_('Unlimited');?>" id="unlim-cron-jobs"></i>
 										</td>
 									</tr>

web/templates/pages/edit_server.html

@@ -335,7 +335,7 @@
 							</tr>
 							<tr>
 								<td class="u-pl50 u-pt6">
-									<table style="display:<?php if (empty($v_adv)) echo 'none';?> ;" id="dns">
+									<table style="display:<?php if (empty($v_adv)) echo 'none';?> ;" class="u-mb20" id="dns">
 										<tr>
 											<td class="u-pt18">
 												<?=_('DNS Server');?>: <span class="optional"><?=$_SESSION['DNS_SYSTEM']; ?> <a href="/edit/server/<? echo $_SESSION['DNS_SYSTEM'] ?>/"><i class="fas fa-pencil-alt status-icon orange icon-pad-right"></i></a></span>
@@ -353,18 +353,11 @@
 											?>
 											<tr>
 												<td>
-													<?=_('Host'). ' #'.$i  ?>
-												</td>
-											</tr>
-											<tr>
-												<td>
-													<input type="text" size="20" class="vst-input" name="v_dns_remote_host" value="<?=$key; ?>" disabled>
+													<label for="v_dns_remote_host" class="form-label"><?=_('Host'). ' #'.$i ?></label>
+													<input type="text" class="form-control" name="v_dns_remote_host" id="v_dns_remote_host" value="<?=$key; ?>" disabled>
 												</td>
 											</tr>
 										<?php } } ?>
-										<tr>
-											<td><br></td>
-										</tr>
 									</table>
 								</td>
 							</tr>
@@ -430,7 +423,7 @@
 														</td>
 													</tr>
 													<tr>
-														<td>
+														<td class="u-pt6">
 															<label for="v_smtp_relay_port" class="form-label"><?=_('Port');?></label>
 															<input type="text" class="form-control" name="v_smtp_relay_port" id="v_smtp_relay_port" value="<?=htmlentities(trim($v_smtp_relay_port, "'"))?>">
 														</td>
@@ -448,7 +441,7 @@
 													</tr>
 													<tr>
 														<td>
-															<input type="text" size="20" class="vst-input password" name="v_smtp_relay_pass">
+															<input type="text" class="vst-input password" name="v_smtp_relay_pass">
 														</td>
 													</tr>
 												</table>
@@ -490,14 +483,9 @@
 										<!-- MySQL / MariaDB Options-->
 										<?php if ($v_mysql == 'yes') { ?>
 											<tr>
-												<td>
-													<?=_('phpMyAdmin URL');?>
-												</td>
-											</tr>
-											<tr>
-												<td>
-													<input type="text" size="20" class="vst-input" name="v_mysql_url" value="<?=$_SESSION['DB_PMA_ALIAS']; ?>">
-													<br><br>
+												<td class="u-pt6">
+													<label for="v_mysql_url" class="form-label"><?=_('phpMyAdmin URL');?></label>
+													<input type="text" class="form-control u-mb20" name="v_mysql_url" id="v_mysql_url" value="<?=$_SESSION['DB_PMA_ALIAS']; ?>">
 												</td>
 											</tr>
 											<tr>
@@ -518,48 +506,35 @@
 												$i++;
 											?>
 											<tr>
-												<td class="u-pl50">
-													<?=_('Host'). ' #'.$i  ?>
+												<td class="u-pl50 u-pt6">
+													<label for="v_mysql_host" class="form-label"><?=_('Host'). ' #'.$i ?></label>
+													<input type="text" class="form-control" name="v_mysql_host" id="v_mysql_host" value="<?=$value['HOST']?>" disabled>
 												</td>
 											</tr>
 											<tr>
-												<td class="u-pl50">
-													<input type="text" size="20" class="vst-input" name="v_mysql_host" value="<?=$value['HOST']?>" disabled>
-													<br><br>
-												</td>
-											</tr>
-											<tr>
-												<td class="u-pl50">
+												<td class="u-pl50 u-pt6">
 													<?=_('Password');?>
 												</td>
 											</tr>
 											<tr>
 												<td class="u-pl50">
-													<input type="text" size="20" class="vst-input password" name="v_mysql_password" value="">
-													<br><br>
-												</td>
-											</tr>
-
-											<tr>
-												<td class="u-pl50">
-													<?=_('Maximum Number Of Databases');?>
+													<input type="text" class="vst-input password" name="v_mysql_password" value="">
 												</td>
 											</tr>
 											<tr>
-												<td class="u-pl50">
-													<input type="text" size="20" class="vst-input" name="v_mysql_max" value="<?=$value['MAX_DB']; ?>" disabled>
-													<br><br>
-												</td>
-											</tr>
-											<tr>
-												<td class="u-pl50">
-													<?=_('Current Number Of Databases');?>
+												<td class="u-pl50 u-pt6">
+													<label for="v_mysql_max" class="form-label">
+														<?=_('Maximum Number Of Databases');?>
+													</label>
+													<input type="text" class="form-control" name="v_mysql_max" id="v_mysql_max" value="<?=$value['MAX_DB']; ?>" disabled>
 												</td>
 											</tr>
 											<tr>
-												<td class="u-pl50">
-													<input type="text" size="20" class="vst-input" name="v_mysql_max" value="<?=$value['U_DB_BASES']; ?>" disabled>
-													<br><br>
+												<td class="u-pl50 u-pt6">
+													<label for="v_mysql_max" class="form-label">
+														<?=_('Current Number Of Databases');?>
+													</label>
+													<input type="text" class="form-control u-mb20" name="v_mysql_max" id="v_mysql_max" value="<?=$value['U_DB_BASES']; ?>" disabled>
 												</td>
 											</tr>
 										<?php }} ?>
@@ -579,13 +554,10 @@
 											</tr>
 											<tr>
 												<td>
-													<?=_('phpPgAdmin URL');?>
-												</td>
-											</tr>
-											<tr>
-												<td>
-													<input type="text" size="20" class="vst-input" name="v_pgsql_url" value="<?=$_SESSION['DB_PGA_ALIAS']; ?>">
-													<br><br>
+													<label for="v_pgsql_url" class="form-label">
+														<?=_('phpPgAdmin URL');?>
+													</label>
+													<input type="text" class="form-control u-mb20" name="v_pgsql_url" id="v_pgsql_url" value="<?=$_SESSION['DB_PGA_ALIAS']; ?>">
 												</td>
 											</tr>
 										<?php } ?>
@@ -595,36 +567,25 @@
 												$i++;
 											?>
 											<tr>
-												<td class="u-pl50">
-													<?=_('Host'). ' #'.$i  ?>
+												<td class="u-pl50 u-pt6">
+													<label for="v_pgsql_host" class="form-label"><?=_('Host'). ' #'.$i ?></label>
+													<input type="text" class="form-control" name="v_pgsql_host" id="v_pgsql_host" value="<?=$value['HOST']?>" disabled>
 												</td>
 											</tr>
 											<tr>
-												<td class="u-pl50">
-													<input type="text" size="20" class="vst-input" name="v_pgsql_host" value="<?=$value['HOST']?>" disabled>
-													<br><br>
-												</td>
-											</tr>
-											<tr>
-												<td class="u-pl50">
-													<?=_('Maximum Number Of Databases');?>
-												</td>
-											</tr>
-											<tr>
-												<td class="u-pl50">
-													<input type="text" size="20" class="vst-input" name="v_psql_max" value="<?=$value['MAX_DB']; ?>" disabled>
-													<br><br>
-												</td>
-											</tr>
-											<tr>
-												<td class="u-pl50">
-													<?=_('Current Number Of Databases');?>
+												<td class="u-pl50 u-pt6">
+													<label for="v_psql_max" class="form-label">
+														<?=_('Maximum Number Of Databases');?>
+													</label>
+													<input type="text" class="form-control" name="v_psql_max" id="v_psql_max" value="<?=$value['MAX_DB']; ?>" disabled>
 												</td>
 											</tr>
 											<tr>
-												<td class="u-pl50">
-													<input type="text" size="20" class="vst-input" name="v_pgsql_max" value="<?=$value['U_DB_BASES']; ?>" disabled>
-													<br><br><br><br>
+												<td class="u-pl50 u-pt6">
+													<label for="v_pgsql_max" class="form-label">
+														<?=_('Current Number Of Databases');?>
+													</label>
+													<input type="text" class="form-control u-mb20" name="v_pgsql_max" id="v_pgsql_max" value="<?=$value['U_DB_BASES']; ?>" disabled>
 												</td>
 											</tr>
 										<?php }} ?>
@@ -645,7 +606,7 @@
 									<tr>
 										<td class="u-pt18">
 											<label for="v_backup" class="form-label"><?=_('Local backup');?></label>
-											<select class="form-select" name="v_backup" id="v_backup">
+											<select class="form-select u-inputWidth" name="v_backup" id="v_backup">
 												<option value="no"><?=_('No'); ?></option>
 												<option value="yes" <?php if($v_backup == 'yes') echo 'selected' ?>><?=_('Yes'); ?></option>
 											</select>
@@ -656,7 +617,7 @@
 											<label for="v_backup_mode" class="form-label">
 												<?=_('Compression');?> <a target="_blank" href="http://docs.hestiacp.com/admin_docs/backups.html#what-is-the-difference-between-zstd-and-gzip"><i class="fas fa-question-circle"></i></a>
 											</label>
-											<select class="form-select" name="v_backup_mode" id="v_backup_mode">
+											<select class="form-select u-inputWidth" name="v_backup_mode" id="v_backup_mode">
 												<option value="gzip" <?php if($v_backup_mode != 'zstd') echo 'selected' ?>>gzip</option>
 												<option value="zstd" <?php if($v_backup_mode == 'zstd') echo 'selected' ?>>zstd</option>
 											</select>
@@ -667,7 +628,7 @@
 											<label for="v_backup_gzip" class="form-label">
 												<?=_('Compression level');?> <a target="_blank" href="http://docs.hestiacp.com/admin_docs/backups.html#what-is-the-optimal-compression-ratio"><i class="fas fa-question-circle"></i></a>
 											</label>
-											<select class="form-select" name="v_backup_gzip" id="v_backup_gzip">
+											<select class="form-select u-inputWidth" name="v_backup_gzip" id="v_backup_gzip">
 												<?php for ($level = 1; $level < 20; $level++) { ?>
 													<option value='<?=$level;?>' <?php if($v_backup_gzip == $level) echo 'selected' ?>><?=$level;?><?php if($level > 9){ echo sprintf(' (%s)', _('zstd only')); } ?></option>
 												<?php } ?>
@@ -675,14 +636,11 @@
 										</td>
 									</tr>
 									<tr>
-										<td>
-											<?=_('Directory');?> <a target="_blank" href="https://docs.hestiacp.com/admin_docs/backups.html#how-to-change-default-backup-folder"><i class="fas fa-question-circle"></i></a>
-										</td>
-									</tr>
-									<tr>
-										<td>
-											<input type="text" size="20" class="vst-input" name="v_backup_dir" value="<?=trim($v_backup_dir, "'")?>" disabled="disabled">
-											<br><br>
+										<td class="u-pt6">
+											<label for="v_backup_dir" class="form-label">
+												<?=_('Directory');?> <a target="_blank" href="https://docs.hestiacp.com/admin_docs/backups.html#how-to-change-default-backup-folder"><i class="fas fa-question-circle"></i></a>
+											</label>
+											<input type="text" class="form-control u-inputWidth u-mb20" name="v_backup_dir" id="v_backup_dir" value="<?=trim($v_backup_dir, "'")?>" disabled="disabled">
 										</td>
 									</tr>
 									<tr>
@@ -703,7 +661,7 @@
 														<label for="backup_type" class="form-label">
 															<?=_('Protocol');?> <a target="_blank" href="http://docs.hestiacp.com/admin_docs/backups.html#what-kind-of-protocols-are-currently-supported"><i class="fas fa-question-circle"></i></a>
 														</label>
-														<select class="form-select" name="v_backup_type" id="backup_type">
+														<select class="form-select u-inputWidth" name="v_backup_type" id="backup_type">
 															<option value='ftp'><?=_('ftp'); ?></option>
 															<option value='sftp' <?php if((!empty($v_backup_type)) && (trim($v_backup_type,"'")  == 'sftp' )) echo 'selected="selected"'; ?>><?=_('sftp'); ?></option>
 															<option value="b2" <?php if((!empty($v_backup_type)) && (trim($v_backup_type,"'")  == 'b2' )) echo 'selected="selected"'; ?>><?=_('Backblaze'); ?>
@@ -714,58 +672,37 @@
 													<td>
 														<table>
 															<tr>
-																<td>
-																	<?=_('Host');?>
-																</td>
-															</tr>
-															<tr>
-																<td>
-																	<input type="text" size="20" class="vst-input" name="v_backup_host" value="<?=trim($v_backup_host, "'")?>">
-																	<br><br>
-																</td>
-															</tr>
-															<tr>
-																<td>
-																	<?=_('Port');?>
-																</td>
-															</tr>
-															<tr>
-																<td>
-																	<input type="text" size="20" class="vst-input" name="v_backup_port" value="<?=trim($v_backup_port, "'")?>">
-																	<br><br>
+																<td class="u-pt6">
+																	<label for="v_backup_host" class="form-label"><?=_('Host');?></label>
+																	<input type="text" class="form-control u-inputWidth" name="v_backup_host" id="v_backup_host" value="<?=trim($v_backup_host, "'")?>">
 																</td>
 															</tr>
 															<tr>
-																<td>
-																	<?=_('Username');?>
+																<td class="u-pt6">
+																	<label for="v_backup_port" class="form-label"><?=_('Port');?></label>
+																	<input type="text" class="form-control u-mb20" name="v_backup_port" id="v_backup_port" value="<?=trim($v_backup_port, "'")?>">
 																</td>
 															</tr>
 															<tr>
-																<td>
-																	<input type="text" size="20" class="vst-input" name="v_backup_username" value="<?=trim($v_backup_username, "'")?>">
-																	<br><br>
+																<td class="u-pt6">
+																	<label for="v_backup_username" class="form-label"><?=_('Username');?></label>
+																	<input type="text" class="form-control" name="v_backup_username" id="v_backup_username" value="<?=trim($v_backup_username, "'")?>">
 																</td>
 															</tr>
 															<tr>
-																<td>
+																<td class="u-pt6">
 																	<?=_('Password');?>
 																</td>
 															</tr>
 															<tr>
 																<td>
-																	<input type="text" size="20" class="vst-input password" name="v_backup_password" value="<?=trim($v_backup_password, "'")?>">
-																	<br><br>
+																	<input type="text" class="vst-input password" name="v_backup_password" value="<?=trim($v_backup_password, "'")?>">
 																</td>
 															</tr>
 															<tr>
-																<td>
-																	<?=_('Directory');?>
-																</td>
-															</tr>
-															<tr>
-																<td>
-																	<input type="text" size="20" class="vst-input" name="v_backup_bpath" value="<?=trim($v_backup_bpath, "'")?>">
-																	<br><br>
+																<td class="u-pt18">
+																	<label for="v_backup_bpath" class="form-label"><?=_('Directory');?></label>
+																	<input type="text" class="form-control u-mb20" name="v_backup_bpath" id="v_backup_bpath" value="<?=trim($v_backup_bpath, "'")?>">
 																</td>
 															</tr>
 														</table>
@@ -775,36 +712,21 @@
 													<td>
 														<table>
 															<tr>
-																<td>
-																	<?=_('Bucket');?>
-																</td>
-															</tr>
-															<tr>
-																<td>
-																	<input type="text" size="20" class="vst-input" name="v_backup_bucket" value="<?=trim($v_backup_bucket, "'")?>">
-																	<br><br>
-																</td>
-															</tr>
-															<tr>
-																<td>
-																	<?=_('Key ID');?>
-																</td>
-															</tr>
-															<tr>
-																<td>
-																	<input type="text" size="20" class="vst-input" name="v_backup_application_id" value="<?=trim($v_backup_application_id, "'")?>">
-																	<br><br>
+																<td class="u-pt6">
+																	<label for="v_backup_bucket" class="form-label"><?=_('Bucket');?></label>
+																	<input type="text" class="form-control u-inputWidth" name="v_backup_bucket" id="v_backup_bucket" value="<?=trim($v_backup_bucket, "'")?>">
 																</td>
 															</tr>
 															<tr>
-																<td>
-																	<?=_('Application Key');?>
+																<td class="u-pt6">
+																	<label for="v_backup_application_id" class="form-label"><?=_('Key ID');?></label>
+																	<input type="text" class="form-control" name="v_backup_application_id" id="v_backup_application_id" value="<?=trim($v_backup_application_id, "'")?>">
 																</td>
 															</tr>
 															<tr>
-																<td>
-																	<input type="text" size="20" class="vst-input" name="v_backup_application_key" value="<?=trim($v_backup_application_key, "'")?>">
-																	<br><br>
+																<td class="u-pt6">
+																	<label for="v_backup_application_key" class="form-label"><?=_('Application Key');?></label>
+																	<input type="text" class="form-control u-mb20" name="v_backup_application_key" id="v_backup_application_key" value="<?=trim($v_backup_application_key, "'")?>">
 																</td>
 															</tr>
 														</table>
@@ -990,13 +912,10 @@
 												</tr>
 												<tr>
 													<td class="u-pt6">
-														<?=_('Inactive session timeout');?> (<?=_('Minutes');?>)
-													</td>
-												</tr>
-												<tr>
-													<td>
-														<input type="text" size="20" class="vst-input" name="v_inactive_session_timeout" value="<?=trim($_SESSION['INACTIVE_SESSION_TIMEOUT'], "'")?>">
-														<br><br>
+														<label for="v_inactive_session_timeout" class="form-label">
+															<?=_('Inactive session timeout');?> (<?=_('Minutes');?>)
+														</label>
+														<input type="text" class="form-control u-mb20" name="v_inactive_session_timeout" id="v_inactive_session_timeout" value="<?=trim($_SESSION['INACTIVE_SESSION_TIMEOUT'], "'")?>">
 													</td>
 												</tr>
 												<tr>

web/templates/pages/edit_server_mysql.html

@@ -42,58 +42,32 @@
 						</tr>
 						<tr>
 							<td class="u-pt18">
-								max_connections
+								<label for="v_max_connections" class="form-label">max_connections</label>
+								<input type="text" class="form-control u-inputWidth" regexp="max_connections" prev_value="<?=htmlentities($v_max_connections)?>" name="v_max_connections" id="v_max_connections" value="<?=htmlentities($v_max_connections)?>">
 							</td>
 						</tr>
 						<tr>
-							<td>
-								<input type="text" size="20" class="vst-input" regexp="max_connections" prev_value="<?=htmlentities($v_max_connections)?>" name="v_max_connections" value="<?=htmlentities($v_max_connections)?>">
-								<br><br>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								max_user_connections
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<input type="text" size="20" class="vst-input" regexp="max_user_connections" prev_value="<?=htmlentities($v_max_user_connections)?>" name="v_max_user_connections" value="<?=htmlentities($v_max_user_connections)?>">
-								<br><br>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								wait_timeout
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<input type="text" size="20" class="vst-input" regexp="wait_timeout" prev_value="<?=htmlentities($v_wait_timeout)?>" name="v_wait_timeout" value="<?=htmlentities($v_wait_timeout)?>">
-								<br><br>
-							</td>
-						</tr>
-
-						<tr>
-							<td>
-								interactive_timeout
+							<td class="u-pt18">
+								<label for="v_max_user_connections" class="form-label">max_user_connections</label>
+								<input type="text" class="form-control u-inputWidth" regexp="max_user_connections" prev_value="<?=htmlentities($v_max_user_connections)?>" name="v_max_user_connections" id="v_max_user_connections" value="<?=htmlentities($v_max_user_connections)?>">
 							</td>
 						</tr>
 						<tr>
-							<td>
-								<input type="text" size="20" class="vst-input" regexp="interactive_timeout" prev_value="<?=htmlentities($v_interactive_timeout)?>" name="v_interactive_timeout" value="<?=htmlentities($v_interactive_timeout)?>">
-								<br><br>
+							<td class="u-pt18">
+								<label for="v_wait_timeout" class="form-label">wait_timeout</label>
+								<input type="text" class="form-control u-inputWidth" regexp="wait_timeout" prev_value="<?=htmlentities($v_wait_timeout)?>" name="v_wait_timeout" id="v_wait_timeout" value="<?=htmlentities($v_wait_timeout)?>">
 							</td>
 						</tr>
 						<tr>
-							<td>
-								max_allowed_packet
+							<td class="u-pt18">
+								<label for="v_interactive_timeout" class="form-label">interactive_timeout</label>
+								<input type="text" class="form-control u-inputWidth" regexp="interactive_timeout" prev_value="<?=htmlentities($v_interactive_timeout)?>" name="v_interactive_timeout" id="v_interactive_timeout" value="<?=htmlentities($v_interactive_timeout)?>">
 							</td>
 						</tr>
 						<tr>
-							<td>
-								<input type="text" size="20" class="vst-input" regexp="max_allowed_packet" prev_value="<?=htmlentities($v_max_allowed_packet)?>" name="v_display_errors" value="<?=htmlentities($v_max_allowed_packet)?>">
-								<br><br>
+							<td class="u-pt18">
+								<label for="v_display_errors" class="form-label">max_allowed_packet</label>
+								<input type="text" class="form-control u-inputWidth u-mb20" regexp="max_allowed_packet" prev_value="<?=htmlentities($v_max_allowed_packet)?>" name="v_display_errors" id="v_display_errors" value="<?=htmlentities($v_max_allowed_packet)?>">
 							</td>
 						</tr>
 						<tr>

web/templates/pages/edit_server_nginx.html

@@ -43,113 +43,62 @@
 						</tr>
 						<tr>
 							<td class="u-pt18">
-								worker_processes
+								<label for="v_worker_processes" class="form-label">worker_processes</label>
+								<input type="text" class="form-control u-inputWidth" regexp="worker_processes" prev_value="<?=htmlentities($v_worker_processes)?>" name="v_worker_processes" id="v_worker_processes" value="<?=htmlentities($v_worker_processes)?>">
 							</td>
 						</tr>
 						<tr>
-							<td>
-								<input type="text" size="20" class="vst-input" regexp="worker_processes" prev_value="<?=htmlentities($v_worker_processes)?>" name="v_worker_processes" value="<?=htmlentities($v_worker_processes)?>">
-								<br><br>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								worker_connections
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<input type="text" size="20" class="vst-input" regexp="worker_connections" prev_value="<?=htmlentities($v_worker_connections)?>" name="v_worker_connections" value="<?=htmlentities($v_worker_connections)?>">
-								<br><br>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								client_max_body_size
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<input type="text" size="20" class="vst-input" regexp="client_max_body_size" prev_value="<?=htmlentities($v_client_max_body_size)?>" name="v_client_max_body_size" value="<?=htmlentities($v_client_max_body_size)?>">
-								<br><br>
-							</td>
-						</tr>
-
-						<tr>
-							<td>
-								send_timeout
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<input type="text" size="20" class="vst-input" regexp="send_timeout" prev_value="<?=htmlentities($v_send_timeout)?>" name="v_send_timeout" value="<?=htmlentities($v_send_timeout)?>">
-								<br><br>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								proxy_connect_timeout
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<input type="text" size="20" class="vst-input" regexp="proxy_connect_timeout" prev_value="<?=htmlentities($v_proxy_connect_timeout)?>" name="v_proxy_connect_timeout" value="<?=htmlentities($v_proxy_connect_timeout)?>">
-								<br><br>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								proxy_send_timeout
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<input type="text" size="20" class="vst-input" regexp="proxy_send_timeout" prev_value="<?=htmlentities($v_proxy_send_timeout)?>" name="v_proxy_send_timeout" value="<?=htmlentities($v_proxy_send_timeout)?>">
-								<br><br>
+							<td class="u-pt18">
+								<label for="v_worker_connections" class="form-label">worker_connections</label>
+								<input type="text" class="form-control u-inputWidth" regexp="worker_connections" prev_value="<?=htmlentities($v_worker_connections)?>" name="v_worker_connections" id="v_worker_connections" value="<?=htmlentities($v_worker_connections)?>">
 							</td>
 						</tr>
 						<tr>
-							<td>
-								proxy_read_timeout
+							<td class="u-pt18">
+								<label for="v_client_max_body_size" class="form-label">client_max_body_size</label>
+								<input type="text" class="form-control u-inputWidth" regexp="client_max_body_size" prev_value="<?=htmlentities($v_client_max_body_size)?>" name="v_client_max_body_size" id="v_client_max_body_size" value="<?=htmlentities($v_client_max_body_size)?>">
 							</td>
 						</tr>
 						<tr>
-							<td>
-								<input type="text" size="20" class="vst-input" regexp="proxy_read_timeout" prev_value="<?=htmlentities($v_proxy_read_timeout)?>" name="v_proxy_read_timeout" value="<?=htmlentities($v_proxy_read_timeout)?>">
-								<br><br>
+							<td class="u-pt18">
+								<label for="v_send_timeout" class="form-label">send_timeout</label>
+								<input type="text" class="form-control u-inputWidth" regexp="send_timeout" prev_value="<?=htmlentities($v_send_timeout)?>" name="v_send_timeout" id="v_send_timeout" value="<?=htmlentities($v_send_timeout)?>">
 							</td>
 						</tr>
 						<tr>
-							<td>
-								gzip
+							<td class="u-pt18">
+								<label for="v_proxy_connect_timeout" class="form-label">proxy_connect_timeout</label>
+								<input type="text" class="form-control u-inputWidth" regexp="proxy_connect_timeout" prev_value="<?=htmlentities($v_proxy_connect_timeout)?>" name="v_proxy_connect_timeout" id="v_proxy_connect_timeout" value="<?=htmlentities($v_proxy_connect_timeout)?>">
 							</td>
 						</tr>
 						<tr>
-							<td>
-								<input type="text" size="20" class="vst-input" regexp="gzip" prev_value="<?=htmlentities($v_gzip)?>" name="v_gzip" value="<?=htmlentities($v_gzip)?>">
-								<br><br>
+							<td class="u-pt18">
+								<label for="v_proxy_send_timeout" class="form-label">proxy_send_timeout</label>
+								<input type="text" class="form-control u-inputWidth" regexp="proxy_send_timeout" prev_value="<?=htmlentities($v_proxy_send_timeout)?>" name="v_proxy_send_timeout" id="v_proxy_send_timeout" value="<?=htmlentities($v_proxy_send_timeout)?>">
 							</td>
 						</tr>
 						<tr>
-							<td>
-								gzip_comp_level
+							<td class="u-pt18">
+								<label for="v_proxy_read_timeout" class="form-label">proxy_read_timeout</label>
+								<input type="text" class="form-control u-inputWidth" regexp="proxy_read_timeout" prev_value="<?=htmlentities($v_proxy_read_timeout)?>" name="v_proxy_read_timeout" id="v_proxy_read_timeout" value="<?=htmlentities($v_proxy_read_timeout)?>">
 							</td>
 						</tr>
 						<tr>
-							<td>
-								<input type="text" size="20" class="vst-input" regexp="gzip_comp_level" prev_value="<?=htmlentities($v_gzip_comp_level)?>" name="v_gzip_comp_level" value="<?=htmlentities($v_gzip_comp_level)?>">
-								<br><br>
+							<td class="u-pt18">
+								<label for="v_gzip" class="form-label">gzip</label>
+								<input type="text" class="form-control u-inputWidth" regexp="gzip" prev_value="<?=htmlentities($v_gzip)?>" name="v_gzip" id="v_gzip" value="<?=htmlentities($v_gzip)?>">
 							</td>
 						</tr>
 						<tr>
-							<td>
-								charset
+							<td class="u-pt18">
+								<label for="v_gzip_comp_level" class="form-label">gzip_comp_level</label>
+								<input type="text" class="form-control u-inputWidth" regexp="gzip_comp_level" prev_value="<?=htmlentities($v_gzip_comp_level)?>" name="v_gzip_comp_level" id="v_gzip_comp_level" value="<?=htmlentities($v_gzip_comp_level)?>">
 							</td>
 						</tr>
 						<tr>
-							<td>
-								<input type="text" size="20" class="vst-input" regexp="charset" prev_value="<?=htmlentities($v_charset)?>" name="v_charset" value="<?=htmlentities($v_charset)?>">
-								<br><br>
+							<td class="u-pt18">
+								<label for="v_charset" class="form-label">charset</label>
+								<input type="text" class="form-control u-inputWidth u-mb20" regexp="charset" prev_value="<?=htmlentities($v_charset)?>" name="v_charset" id="v_charset" value="<?=htmlentities($v_charset)?>">
 							</td>
 						</tr>
 						<tr>

web/templates/pages/edit_server_php.html

@@ -42,83 +42,46 @@
 						</tr>
 						<tr>
 							<td class="u-pt18">
-								max_execution_time
+								<label for="v_max_execution_time" class="form-label">max_execution_time</label>
+								<input type="text" class="form-control u-inputWidth" regexp="max_execution_time" prev_value="<?=htmlentities($v_max_execution_time)?>" name="v_max_execution_time" id="v_max_execution_time" value="<?=htmlentities($v_max_execution_time)?>">
 							</td>
 						</tr>
 						<tr>
-							<td>
-								<input type="text" size="20" class="vst-input" regexp="max_execution_time" prev_value="<?=htmlentities($v_max_execution_time)?>" name="v_max_execution_time" value="<?=htmlentities($v_max_execution_time)?>">
-								<br><br>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								max_input_time
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<input type="text" size="20" class="vst-input" regexp="max_input_time" prev_value="<?=htmlentities($v_max_input_time)?>" name="v_worker_connections" value="<?=htmlentities($v_max_input_time)?>">
-								<br><br>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								memory_limit
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<input type="text" size="20" class="vst-input" regexp="memory_limit" prev_value="<?=htmlentities($v_memory_limit)?>" name="v_memory_limit" value="<?=htmlentities($v_memory_limit)?>">
-								<br><br>
-							</td>
-						</tr>
-
-						<tr>
-							<td>
-								error_reporting
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<input type="text" size="20" class="vst-input" regexp="error_reporting" prev_value="<?=htmlentities($v_error_reporting)?>" name="v_error_reporting" value="<?=htmlentities($v_error_reporting)?>">
-								<br><br>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								display_errors
+							<td class="u-pt18">
+								<label for="v_worker_connections" class="form-label">max_input_time</label>
+								<input type="text" class="form-control u-inputWidth" regexp="max_input_time" prev_value="<?=htmlentities($v_max_input_time)?>" name="v_worker_connections" id="v_worker_connections" value="<?=htmlentities($v_max_input_time)?>">
 							</td>
 						</tr>
 						<tr>
-							<td>
-								<input type="text" size="20" class="vst-input" regexp="display_errors" prev_value="<?=htmlentities($v_display_errors)?>" name="v_display_errors" value="<?=htmlentities($v_display_errors)?>">
-								<br><br>
+							<td class="u-pt18">
+								<label for="v_memory_limit" class="form-label">memory_limit</label>
+								<input type="text" class="form-control u-inputWidth" regexp="memory_limit" prev_value="<?=htmlentities($v_memory_limit)?>" name="v_memory_limit" id="v_memory_limit" value="<?=htmlentities($v_memory_limit)?>">
 							</td>
 						</tr>
 						<tr>
-							<td>
-								post_max_size
+							<td class="u-pt18">
+								<label for="v_error_reporting" class="form-label">error_reporting</label>
+								<input type="text" class="form-control u-inputWidth" regexp="error_reporting" prev_value="<?=htmlentities($v_error_reporting)?>" name="v_error_reporting" id="v_error_reporting" value="<?=htmlentities($v_error_reporting)?>">
 							</td>
 						</tr>
 						<tr>
-							<td>
-								<input type="text" size="20" class="vst-input" regexp="post_max_size" prev_value="<?=htmlentities($v_post_max_size)?>" name="v_post_max_size" value="<?=htmlentities($v_post_max_size)?>">
-								<br><br>
+							<td class="u-pt18">
+								<label for="v_display_errors" class="form-label">display_errors</label>
+								<input type="text" class="form-control u-inputWidth" regexp="display_errors" prev_value="<?=htmlentities($v_display_errors)?>" name="v_display_errors" id="v_display_errors" value="<?=htmlentities($v_display_errors)?>">
 							</td>
 						</tr>
 						<tr>
-							<td>
-								upload_max_filesize
+							<td class="u-pt18">
+								<label for="v_post_max_size" class="form-label">post_max_size</label>
+								<input type="text" class="form-control u-inputWidth" regexp="post_max_size" prev_value="<?=htmlentities($v_post_max_size)?>" name="v_post_max_size" id="v_post_max_size" value="<?=htmlentities($v_post_max_size)?>">
 							</td>
 						</tr>
 						<tr>
-							<td>
-								<input type="text" size="20" class="vst-input" regexp="upload_max_filesize" prev_value="<?=htmlentities($v_upload_max_filesize)?>" name="v_upload_max_filesize" value="<?=htmlentities($v_upload_max_filesize)?>">
-								<br><br>
+							<td class="u-pt18">
+								<label for="v_upload_max_filesize" class="form-label">upload_max_filesize</label>
+								<input type="text" class="form-control u-inputWidth u-mb20" regexp="upload_max_filesize" prev_value="<?=htmlentities($v_upload_max_filesize)?>" name="v_upload_max_filesize" id="v_upload_max_filesize" value="<?=htmlentities($v_upload_max_filesize)?>">
 							</td>
 						</tr>
-
 						<tr>
 							<td class="u-pt6">
 								<a href="javascript:toggleOptions();" class="vst-advanced"><?=_('Advanced options');?></a>

web/templates/pages/edit_user.html

@@ -76,12 +76,8 @@
 						</tr>
 						<tr>
 							<td class="u-pt18">
-								<?=_('Username');?>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<input type="text" size="20" class="vst-input" name="v_user" value="<?=htmlentities(trim($v_username, "'"))?>" disabled>
+								<label for="v_user" class="form-label"><?=_('Username');?></label>
+								<input type="text" class="form-control" name="v_user" id="v_user" value="<?=htmlentities(trim($v_username, "'"))?>" disabled>
 								<input type="hidden" name="v_username" value="<?=htmlentities(trim($v_username, "'"))?>">
 							</td>
 						</tr>
@@ -92,7 +88,7 @@
 						</tr>
 						<tr>
 							<td>
-								<input type="text" size="20" class="vst-input" name="v_name" value="<?=htmlentities(trim($v_name, "'"))?>" <?php if (($_SESSION['userContext'] !=='admin' ) && ($_SESSION['POLICY_USER_EDIT_DETAILS'] !=='yes' )) { echo 'disabled' ; }?> >
+								<input type="text" class="vst-input" name="v_name" value="<?=htmlentities(trim($v_name, "'"))?>" <?php if (($_SESSION['userContext'] !=='admin' ) && ($_SESSION['POLICY_USER_EDIT_DETAILS'] !=='yes' )) { echo 'disabled' ; }?> >
 								<?php if (($_SESSION['userContext'] !== 'admin') && ($_SESSION['POLICY_USER_EDIT_DETAILS'] !== 'yes')) {?>
 									<input type="hidden" name="v_name" value="<?=htmlentities(trim($v_name, "'"))?>">
 								<?php } ?>
@@ -105,7 +101,7 @@
 						</tr>
 						<tr>
 							<td>
-								<input type="text" size="20" class="vst-input" name="v_email" value="<?=htmlentities(trim($v_email, "'"))?>" <?php if (($_SESSION['userContext'] !=='admin' ) && ($_SESSION['POLICY_USER_EDIT_DETAILS'] !=='yes' )) { echo 'disabled' ; }?>>
+								<input type="email" class="vst-input" name="v_email" value="<?=htmlentities(trim($v_email, "'"))?>" <?php if (($_SESSION['userContext'] !=='admin' ) && ($_SESSION['POLICY_USER_EDIT_DETAILS'] !=='yes' )) { echo 'disabled' ; }?>>
 								<?php if (($_SESSION['userContext'] !== 'admin') && ($_SESSION['POLICY_USER_EDIT_DETAILS'] !== 'yes')) {?>
 									<input type="hidden" name="v_email" value="<?=htmlentities(trim($v_email, "'"))?>">
 								<?php } ?>
@@ -118,7 +114,7 @@
 						</tr>
 						<tr>
 							<td>
-								<input type="text" size="20" class="vst-input password" name="v_password" value="<?=htmlentities(trim($v_password, "'"))?>"><br />
+								<input type="text" class="vst-input password" name="v_password" value="<?=htmlentities(trim($v_password, "'"))?>"><br />
 								<meter max="4" id="meter"></meter>
 							</td>
 						</tr>
@@ -177,7 +173,7 @@
 											<table id="ip-allowlist" style="<?php if ($v_login_use_iplist === 'yes') { echo 'display: table-cell;'; } else { echo 'display: none;'; } ?>">
 												<tr>
 													<td>
-														<input type="text" size="20" class="vst-input" placeholder="<?=_('Example: 127.0.0.1,192.168.1.100');?>" name="v_login_allowed_ips" value="<?=htmlentities(trim($v_login_allowed_ips, "'"))?>">
+														<input type="text" class="vst-input" name="v_login_allowed_ips" value="<?=htmlentities(trim($v_login_allowed_ips, "'"))?>" placeholder="<?=_('Example: 127.0.0.1,192.168.1.100');?>">
 													</td>
 												</tr>
 											</table>
@@ -323,13 +319,13 @@
 											</tr>
 											<tr>
 												<td>
-													<input type="text" size="20" class="vst-input" name="v_ns1" value="<?=htmlentities(trim($v_ns1, "'"))?>">
+													<input type="text" class="vst-input" name="v_ns1" value="<?=htmlentities(trim($v_ns1, "'"))?>">
 													<span class="remove-ns additional-control delete vst-advanced button danger"><?=_('delete');?></span>
 												</td>
 											</tr>
 											<tr>
 												<td>
-													<input type="text" size="20" class="vst-input" name="v_ns2" value="<?=htmlentities(trim($v_ns2, "'"))?>">
+													<input type="text" class="vst-input" name="v_ns2" value="<?=htmlentities(trim($v_ns2, "'"))?>">
 													<span class="remove-ns additional-control delete vst-advanced button danger"><?=_('delete');?></span>
 												</td>
 											</tr>
@@ -337,7 +333,7 @@
 												if($v_ns3) {
 													echo '<tr>
 														<td>
-															<input type="text" size="20" class="vst-input" name="v_ns3" value="'.htmlentities(trim($v_ns3, "'")).'">
+															<input type="text" class="vst-input" name="v_ns3" value="'.htmlentities(trim($v_ns3, "'")).'">
 															<span class="remove-ns additional-control delete vst-advanced button danger">'._('delete').'</span>
 														</td>
 													</tr>';
@@ -345,7 +341,7 @@
 												if($v_ns4) {
 													echo '<tr>
 														<td>
-															<input type="text" size="20" class="vst-input" name="v_ns4" value="'.htmlentities(trim($v_ns4, "'")).'">
+															<input type="text" class="vst-input" name="v_ns4" value="'.htmlentities(trim($v_ns4, "'")).'">
 															<span class="remove-ns additional-control delete vst-advanced button danger">'._('delete').'</span>
 														</td>
 													</tr>';
@@ -353,7 +349,7 @@
 												if($v_ns5) {
 													echo '<tr>
 														<td>
-															<input type="text" size="20" class="vst-input" name="v_ns5" value="'.htmlentities(trim($v_ns5, "'")).'">
+															<input type="text" class="vst-input" name="v_ns5" value="'.htmlentities(trim($v_ns5, "'")).'">
 															<span class="remove-ns additional-control delete vst-advanced button danger">'._('delete').'</span>
 														</td>
 													</tr>';
@@ -361,7 +357,7 @@
 												if($v_ns6) {
 													echo '<tr>
 														<td>
-															<input type="text" size="20" class="vst-input" name="v_ns6" value="'.htmlentities(trim($v_ns6, "'")).'">
+															<input type="text" class="vst-input" name="v_ns6" value="'.htmlentities(trim($v_ns6, "'")).'">
 															<span class="remove-ns additional-control delete vst-advanced button danger">'._('delete').'</span>
 														</td>
 													</tr>';
@@ -369,7 +365,7 @@
 												if($v_ns7) {
 													echo '<tr>
 														<td>
-															<input type="text" size="20" class="vst-input" name="v_ns7" value="'.htmlentities(trim($v_ns7, "'")).'">
+															<input type="text" class="vst-input" name="v_ns7" value="'.htmlentities(trim($v_ns7, "'")).'">
 															<span class="remove-ns additional-control delete vst-advanced button danger">'._('delete').'</span>
 														</td>
 													</tr>';
@@ -377,7 +373,7 @@
 												if($v_ns8) {
 													echo '<tr>
 														<td>
-															<input type="text" size="20" class="vst-input" name="v_ns8" value="'.htmlentities(trim($v_ns8, "'")).'">
+															<input type="text" class="vst-input" name="v_ns8" value="'.htmlentities(trim($v_ns8, "'")).'">
 															<span class="remove-ns additional-control delete vst-advanced button danger">'._('delete').'</span>
 														</td>
 													</tr>';

web/templates/pages/edit_web.html

@@ -51,19 +51,15 @@
 						</tr>
 						<tr>
 							<td class="u-pt18">
-								<?=_('Domain');?>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<input type="text" size="20" class="vst-input" name="v_domain" value="<?=htmlentities(trim($v_domain, "'"))?>" disabled>
+								<label for="v_domain" class="form-label"><?=_('Domain');?></label>
+								<input type="text" class="form-control u-inputWidth" name="v_domain" id="v_domain" value="<?=htmlentities(trim($v_domain, "'"))?>" disabled>
 								<input type="hidden" name="v_domain" value="<?=htmlentities(trim($v_domain, "'"))?>">
 							</td>
 						</tr>
 						<tr>
 							<td class="u-pt6">
 								<label for="v_aliases" class="form-label"><?=_('Aliases');?></label>
-								<textarea class="form-control" name="v_aliases" id="v_aliases"><?=htmlentities(trim($v_aliases, "'"))?></textarea>
+								<textarea class="form-control u-inputWidth" name="v_aliases" id="v_aliases"><?=htmlentities(trim($v_aliases, "'"))?></textarea>
 							</td>
 						</tr>
 						<?php if ($v_letsencrypt == 'yes' || $v_letsencrypt == 'on') {?>
@@ -79,7 +75,7 @@
 						<tr>
 							<td class="u-pt6">
 								<label for="v_ip" class="form-label"><?=_('IP Address');?></label>
-								<select class="form-select" name="v_ip" id="v_ip">
+								<select class="form-select u-inputWidth" name="v_ip" id="v_ip">
 									<?php
 										foreach ($ips as $ip => $value) {
 											$display_ip = htmlentities(empty($value['NAT']) ? $ip : "{$value['NAT']}");
@@ -93,7 +89,7 @@
 						<tr>
 							<td class="u-pt18">
 								<label for="v_stats" class="form-label"><?=_('Web Statistics');?></label>
-								<select class="form-select" name="v_stats" id="v_stats">
+								<select class="form-select u-inputWidth" name="v_stats" id="v_stats">
 									<?php
 										foreach ($stats as $key => $value) {
 											$svalue = "'".$value."'";
@@ -128,7 +124,7 @@
 									</tr>
 									<tr>
 										<td>
-											<input type="text" size="20" class="vst-input" name="v_stats_user" value="<?=htmlentities(trim($v_stats_user, "'"))?>">
+											<input type="text" class="vst-input" name="v_stats_user" value="<?=htmlentities(trim($v_stats_user, "'"))?>">
 										</td>
 									</tr>
 									<tr>
@@ -138,7 +134,7 @@
 									</tr>
 									<tr>
 										<td>
-											<input type="text" size="20" class="vst-input password" name="v_stats_password" value="<?=htmlentities(trim($v_stats_password, "'"))?>" id="v_password">
+											<input type="text" class="vst-input password" name="v_stats_password" value="<?=htmlentities(trim($v_stats_password, "'"))?>" id="v_password">
 										</td>
 									</tr>
 								</table>
@@ -183,7 +179,7 @@
 										</tr>
 										<tr>
 											<td class="u-pt6">
-												<input type="text" name="v-redirect-custom" class="vst-input" value="<?=$v_redirect_custom;?>" />
+												<input type="text" class="vst-input" name="v-redirect-custom" value="<?=$v_redirect_custom;?>">
 											</td>
 										</tr>
 										<tr>
@@ -363,7 +359,7 @@
 												<label for="v_template" class="form-label">
 													<?=_('Web Template') . "<span class='optional'>" . strtoupper($_SESSION['WEB_SYSTEM']) . "</span>";?>
 												</label>
-												<select class="form-select" name="v_template" id="v_template">
+												<select class="form-select u-inputWidth" name="v_template" id="v_template">
 													<?php
 														foreach ($templates as $key => $value) {
 															echo "\t\t\t\t<option value=\"".htmlentities($value)."\"";
@@ -398,7 +394,9 @@
 															<?=_('Cache Duration'); ?> <span class="optional"><?=_('For example: 30s, 10m or 1d');?>
 														</td>
 														<tr>
-															<td><input type="text" size="20" class="vst-input" name="v_nginx_cache_duration" value="<?=htmlentities(trim($v_nginx_cache_duration, "'"))?>"></td>
+															<td>
+																<input type="text" class="vst-input" name="v_nginx_cache_duration" value="<?=htmlentities(trim($v_nginx_cache_duration, "'"))?>">
+															</td>
 														</tr>
 													</table>
 												</td>
@@ -410,7 +408,7 @@
 													<label for="v_backend_template" class="form-label">
 														<?=_('Backend Template') . " <span class='optional'>" . strtoupper($_SESSION['WEB_BACKEND']) . "</span>";?>
 													</label>
-													<select class="form-select" name="v_backend_template" id="v_backend_template">
+													<select class="form-select u-inputWidth" name="v_backend_template" id="v_backend_template">
 														<?php
 															foreach ($backend_templates as $key => $value) {
 																echo "\t\t\t\t<option value=\"".$value."\"";
@@ -445,7 +443,7 @@
 														<tr>
 															<td class="u-pt6">
 																<label for="v_proxy_template" class="form-label"><?=_('Proxy Template');?></label>
-																<select class="form-select" name="v_proxy_template" id="v_proxy_template">
+																<select class="form-select u-inputWidth" name="v_proxy_template" id="v_proxy_template">
 																	<?php
 																		foreach ($proxy_templates as $key => $value) {
 																			echo "\t\t\t\t<option value=\"".htmlentities($value)."\"";
@@ -507,8 +505,7 @@
 												</tr>
 												<tr>
 													<td>
-														<input type="text" size="20" class="vst-input"
-															name="v-custom-doc-folder" value="<?=htmlentities(trim($v_custom_doc_folder, "'"))?>">
+														<input type="text" class="vst-input" name="v-custom-doc-folder" value="<?=htmlentities(trim($v_custom_doc_folder, "'"))?>">
 													</td>
 												</tr>
 												<tr>
@@ -550,15 +547,16 @@
 													</tr>
 													<tr>
 														<td class="u-pl50 u-pt6">
-															<?=_('Username');?><br>
-															<span style="font-size: 10pt; color:#777;"><?=sprintf(_('Prefix %s will be added to username automatically'),$user_plain."_");?></span>
-														</td>
-													</tr>
-													<tr>
-														<td class="u-pl50">
-															<input type="text" size="20" class="vst-input v-ftp-user" <?=$ftp_user['is_new'] != 1 ? 'disabled="disabled"' : '' ?>
-																name="v_ftp_user[<?=$i ?>][v_ftp_user]" value="<?=htmlentities(trim($v_ftp_user, "'"))?>">
-															<small class="hint"></small>
+															<label for="v_ftp_user[<?=$i ?>][v_ftp_user]" class="form-label">
+																<?=_('Username');?><br>
+																<span style="font-size: 10pt; color:#777;"><?=sprintf(_('Prefix %s will be added to username automatically'),$user_plain."_");?></span>
+															</label>
+															<div class="u-sideBySide">
+																<input type="text" class="form-control v-ftp-user u-inputWidth" <?=$ftp_user['is_new'] != 1 ? 'disabled="disabled"' : '' ?>
+																name="v_ftp_user[<?=$i ?>][v_ftp_user]" id="v_ftp_user[<?=$i ?>][v_ftp_user]" value="<?=htmlentities(trim($v_ftp_user, "'"))?>">
+																<input type="hidden" name="v_record_id" value="<?=htmlentities(trim($v_record_id, "'"))?>">
+																<small class="hint u-ml10"></small>
+															</div>
 														</td>
 													</tr>
 													<tr>
@@ -571,7 +569,6 @@
 															<input type="text" class="vst-input v-ftp-user-psw password" name="v_ftp_user[<?=$i ?>][v_ftp_password]" value="<?=htmlentities(trim($v_ftp_password, "'"))?>">
 														</td>
 													</tr>
-
 													<tr>
 														<td class="u-pl50 u-pt6">
 															<?=_('Path');?>
@@ -586,16 +583,12 @@
 														</td>
 													</tr>
 													<?php if ($ftp_user['is_new'] == 1): ?>
-													<tr>
-														<td class="u-pl50 u-pt6">
-															<?=_('Send FTP credentials to email');?>
-														</td>
-													</tr>
-													<tr>
-														<td class="u-pl50">
-															<input type="text" class="vst-input vst-email-alert-on-psw" name="v_ftp_user[<?=$i ?>][v_ftp_email]" value="<?=htmlentities(trim($v_ftp_email, "'"))?>">
-														</td>
-													</tr>
+														<tr>
+															<td class="u-pl50 u-pt6">
+																<label for="v_ftp_user[<?=$i ?>][v_ftp_email]" class="form-label"><?=_('Send FTP credentials to email');?></label>
+																<input type="text" class="form-control vst-email-alert-on-psw u-inputWidth" name="v_ftp_user[<?=$i ?>][v_ftp_email]" id="v_ftp_user[<?=$i ?>][v_ftp_email]" value="<?=htmlentities(trim($v_ftp_email, "'"))?>">
+															</td>
+														</tr>
 													<?php endif; ?>
 												</table>
 												<?php endforeach; ?>
@@ -612,7 +605,7 @@
 							</td>
 						</tr>
 					</table>
-					<table class="data-col2">
+					<table class="data-col2 u-mb20">
 					</table>
 				</td>
 			</tr>
@@ -630,14 +623,14 @@
 			</tr>
 			<tr>
 				<td class="u-pl50 u-pt6">
-					<?=_('Username');?><br>
-					<span style="font-size: 10pt; color:#777;"><?=sprintf(_('Prefix %s will be added to username automatically'),$user_plain."_");?></span>
-				</td>
-			</tr>
-			<tr>
-				<td class="u-pl50">
-					<input type="text" size="20" class="vst-input v-ftp-user" name="v_ftp_user[%INDEX%][v_ftp_user]" value="">
-					<small class="hint"></small>
+					<label for="v_ftp_user[%INDEX%][v_ftp_user]" class="form-label">
+						<?=_('Username');?><br>
+						<span style="font-size: 10pt; color:#777;"><?=sprintf(_('Prefix %s will be added to username automatically'),$user_plain."_");?></span>
+					</label>
+					<div class="u-sideBySide">
+						<input type="text" class="form-control v-ftp-user u-inputWidth" name="v_ftp_user[%INDEX%][v_ftp_user]" id="v_ftp_user[%INDEX%][v_ftp_user]" value="">
+						<small class="hint u-ml10"></small>
+					</div>
 				</td>
 			</tr>
 			<tr>
@@ -650,7 +643,6 @@
 					<input type="text" class="vst-input v-ftp-user-psw password" name="v_ftp_user[%INDEX%][v_ftp_password]" value="">
 				</td>
 			</tr>
-
 			<tr>
 				<td class="u-pl50 u-pt6">
 					<?=_('Path');?>
@@ -665,17 +657,14 @@
 			</tr>
 			<tr>
 				<td class="u-pl50 u-pt6">
-					<?=_('Send FTP credentials to email');?>
-				</td>
-			</tr>
-			<tr>
-				<td class="u-pl50">
-					<input type="text" class="vst-input vst-email-alert-on-psw" name="v_ftp_user[%INDEX%][v_ftp_email]" value="">
+					<label for="v_ftp_user[%INDEX%][v_ftp_email]" class="form-label"><?=_('Send FTP credentials to email');?></label>
+					<input type="text" class="form-control vst-email-alert-on-psw u-inputWidth" name="v_ftp_user[%INDEX%][v_ftp_email]" id="v_ftp_user[%INDEX%][v_ftp_email]" value="">
 				</td>
 			</tr>
 		</table>
 	</div>
 </div>
+
 <script>
 	GLOBAL.FTP_USER_PREFIX =  "<?=$user_plain.'_';?>";
 </script>

web/templates/pages/generate_ssl.html

@@ -48,7 +48,7 @@
 									<?=_('Email');?>
 									<span class="optional">(<?php print _('optional');?>)</span>
 								</label>
-								<input type="text" class="form-control" name="v_email" id="v_email" value="<?=htmlentities(trim($v_email, "'")) ?>">
+								<input type="email" class="form-control" name="v_email" id="v_email" value="<?=htmlentities(trim($v_email, "'")) ?>">
 							</td>
 						</tr>
 						<tr>

web/templates/pages/list_access_key.html

@@ -1,22 +1,23 @@
 <?php
 // Prevent resubmit form on page refresh
 if (!empty($_POST['ok'])) {
-    ?>
-    <script>
-        if (window.history.replaceState) {
-            window.history.replaceState(null, null, window.location.href);
-        }
-    </script>
+	?>
+	<script>
+		if (window.history.replaceState) {
+			window.history.replaceState(null, null, window.location.href);
+		}
+	</script>
 <?php } ?>
 
 <!-- Begin toolbar -->
 <div class="l-center edit">
-    <div class="l-sort clearfix">
-        <div class="l-unit-toolbar__buttonstrip">
-            <a class="ui-button cancel" dir="ltr" id="btn-back" href="/list/access-key/"><i
-                        class="fas fa-arrow-left status-icon blue"></i><?= _('Back'); ?></a>
-        </div>
-    </div>
+	<div class="l-sort clearfix">
+		<div class="l-unit-toolbar__buttonstrip">
+			<a class="ui-button cancel" dir="ltr" id="btn-back" href="/list/access-key/">
+				<i class="fas fa-arrow-left status-icon blue"></i><?= _('Back'); ?>
+			</a>
+		</div>
+	</div>
 </div>
 <!-- End toolbar -->
 
@@ -24,95 +25,81 @@ if (!empty($_POST['ok'])) {
 
 <div class="l-center animated fadeIn">
 
-    <form id="vstobjects">
-        <table class="data mode-add">
-            <tr class="data-add">
-                <td class="data-dotted">
-                    <table class="data-col1">
-                        <tr>
-                            <td></td>
-                        </tr>
-                    </table>
-                </td>
-                <td class="data-dotted">
-                    <table class="data-col2">
-                        <tr>
-                            <td class="u-pt18">
-                                <span class="page-title"><?= _("Access Key") ?></span>
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>
-                                <?php show_error_panel($_SESSION); ?>
-                            </td>
-                        </tr>
+	<form id="vstobjects">
+		<table class="data mode-add">
+			<tr class="data-add">
+				<td class="data-dotted">
+					<table class="data-col1">
+						<tr>
+							<td></td>
+						</tr>
+					</table>
+				</td>
+				<td class="data-dotted">
+					<table class="data-col2">
+						<tr>
+							<td class="u-pt18">
+								<span class="page-title"><?= _("Access Key") ?></span>
+							</td>
+						</tr>
+						<tr>
+							<td>
+								<?php show_error_panel($_SESSION); ?>
+							</td>
+						</tr>
 
-                        <?php if (!empty($key_data['ACCESS_KEY_ID'])) { ?>
-                            <tr>
-                                <td class="u-pt18">
-                                    <?= _('Access Key Id'); ?>
-                                </td>
-                            </tr>
-                            <tr>
-                                <td>
-                                    <input type="text" size="20" class="vst-input" maxlength="255" readonly
-                                           value="<?= htmlentities(trim($key_data['ACCESS_KEY_ID'], "'")) ?>">
-                                </td>
-                            </tr>
-                        <?php } ?>
+						<?php if (!empty($key_data['ACCESS_KEY_ID'])) { ?>
+							<tr>
+								<td class="u-pt18">
+									<label for="access_key_id" class="form-label"><?= _('Access Key Id'); ?></label>
+									<input type="text" class="form-control u-inputWidth" id="access_key_id" maxlength="255" readonly value="<?= htmlentities(trim($key_data['ACCESS_KEY_ID'], "'")) ?>">
+								</td>
+							</tr>
+						<?php } ?>
 
-                        <?php
-                        if (!empty($_SESSION['ok_msg'])) {
-                            ?>
-                            <?php if (!empty($key_data['ACCESS_KEY_ID']) && !empty($key_data['SECRET_ACCESS_KEY'])) { ?>
-                                <tr>
-                                    <td class="u-pt6">
-                                        <?= _('Secret Key'); ?><br>
-                                        <span style="font-size: 10pt; color:#ffd500;"><?= _('Warning! Last chance to save secrect access key!'); ?></span>
-                                    </td>
-                                </tr>
-                                <tr>
-                                    <td>
-                                        <input type="text" size="20" class="vst-input" maxlength="255" readonly
-                                               value="<?= htmlentities(trim($key_data['SECRET_ACCESS_KEY'], "'")) ?>">
-                                    </td>
-                                </tr>
-                            <?php } ?>
-                        <?php }
-                        ?>
+						<?php
+						if (!empty($_SESSION['ok_msg'])) {
+							?>
+							<?php if (!empty($key_data['ACCESS_KEY_ID']) && !empty($key_data['SECRET_ACCESS_KEY'])) { ?>
+								<tr>
+									<td class="u-pt6">
+										<label for="secret_key" class="form-label">
+											<?= _('Secret Key'); ?><br>
+											<span style="font-size: 10pt; color:#ffd500;"><?= _('Warning! Last chance to save secret access key!'); ?></span>
+										</label>
+										<input type="text" class="form-control u-inputWidth" id="secret_key" maxlength="255" readonly value="<?= htmlentities(trim($key_data['SECRET_ACCESS_KEY'], "'")) ?>">
+									</td>
+								</tr>
+							<?php } ?>
+						<?php }
+						?>
 
-                        <tr>
-                            <td class="u-pt18">
-                                <?= _('Permissions'); ?>
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>
-                                <ul>
-                                    <?php
-                                    foreach ($key_data['PERMISSIONS'] as $api_name) {
-                                        ?>
-                                        <li><?= _($api_name); ?></li>
-                                    <?php } ?>
-                                </ul>
-                            </td>
-                        </tr>
-
-                        <tr>
-                            <td class="u-pt6">
-                                <?= _('Comment'); ?>
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>
-                                <input type="text" size="20" class="vst-input" maxlength="255" readonly
-                                       value="<?= htmlentities(trim($key_data['COMMENT'], "'")) ?>">
-                            </td>
-                        </tr>
-                    </table>
-                    <table class="data-col2"></table>
-                </td>
-            </tr>
-        </table>
-    </form>
+						<tr>
+							<td class="u-pt18">
+								<?= _('Permissions'); ?>
+							</td>
+						</tr>
+						<tr>
+							<td>
+								<ul>
+									<?php
+									foreach ($key_data['PERMISSIONS'] as $api_name) {
+										?>
+										<li><?= _($api_name); ?></li>
+									<?php } ?>
+								</ul>
+							</td>
+						</tr>
+						<tr>
+							<td class="u-pt6">
+								<label for="service" class="form-label"><?= _('Comment'); ?></label>
+								<input type="text" class="form-control u-inputWidth" id="service" maxlength="255" readonly value="<?= htmlentities(trim($key_data['COMMENT'], "'")) ?>">
+							</td>
+						</tr>
+					</table>
+					<table class="data-col2"></table>
+				</td>
+			</tr>
+		</table>
+	</form>
 </div>

web/templates/pages/list_backup.html

@@ -13,7 +13,7 @@
 					<td class="l-sort-toolbar__search-box">
 						<form action="/search/" method="get">
 							<input type="hidden" name="token" value="<?=$_SESSION['token']?>" />
-							<input type="text" name="q" class="search-input" value="<? echo isset($_POST['q']) ? htmlspecialchars($_POST['q']) : '' ?>" title="<?=_('Search');?>" />
+							<input type="text" class="search-input" name="q" value="<? echo isset($_POST['q']) ? htmlspecialchars($_POST['q']) : '' ?>" title="<?=_('Search');?>">
 							<button type="submit" class="l-sort-toolbar__filter-apply" onclick="return doSearch('/search/')" value="" title="<?=_('Search');?>"><i class="fas fa-search"></i></button>
 						</form>
 					</td>

web/templates/pages/list_backup_detail.html

@@ -11,7 +11,7 @@
 					<td class="l-sort-toolbar__search-box">
 						<form action="/search/" method="get">
 							<input type="hidden" name="token" value="<?=$_SESSION['token']?>" />
-							<input type="text" name="q" class="search-input" value="<? echo isset($_POST['q']) ? htmlspecialchars($_POST['q']) : '' ?>" />
+							<input type="text" class="search-input" name="q" value="<? echo isset($_POST['q']) ? htmlspecialchars($_POST['q']) : '' ?>" />
 							<button type="submit" class="l-sort-toolbar__filter-apply" onclick="return doSearch('/search/')" value=""><i class="fas fa-search"></i></button>
 						</form>
 					</td>

web/templates/pages/list_backup_exclusions.html

@@ -11,7 +11,7 @@
 					<td class="l-sort-toolbar__search-box">
 						<form action="/search/" method="get">
 							<input type="hidden" name="token" value="<?=$_SESSION['token']?>" />
-							<input type="text" name="q" class="search-input" value="<? echo isset($_POST['q']) ? htmlspecialchars($_POST['q']) : '' ?>" title="<?=_('Search');?>" />
+							<input type="text" class="search-input" name="q" value="<? echo isset($_POST['q']) ? htmlspecialchars($_POST['q']) : '' ?>" title="<?=_('Search');?>">
 							<button type="submit" class="l-sort-toolbar__filter-apply" onclick="return doSearch('/search/')" value="" title="<?=_('Search');?>"><i class="fas fa-search"></i></button>
 						</form>
 					</td>

web/templates/pages/list_cron.html

@@ -29,7 +29,7 @@
 					<td class="l-sort-toolbar__search-box">
 						<form action="/search/" method="get">
 							<input type="hidden" name="token" value="<?=$_SESSION['token']?>" />
-							<input type="text" name="q" class="search-input" value="<? echo isset($_POST['q']) ? htmlspecialchars($_POST['q']) : '' ?>" title="<?=_('Search');?>" />
+							<input type="text" class="search-input" name="q" value="<? echo isset($_POST['q']) ? htmlspecialchars($_POST['q']) : '' ?>" title="<?=_('Search');?>">
 							<button type="submit" class="l-sort-toolbar__filter-apply" onclick="return doSearch('/search/')" value="" title="<?=_('Search');?>"><i class="fas fa-search"></i></button>
 						</form>
 					</td>

web/templates/pages/list_db.html

@@ -52,7 +52,7 @@
 					<td class="l-sort-toolbar__search-box">
 						<form action="/search/" method="get">
 							<input type="hidden" name="token" value="<?=$_SESSION['token']?>" />
-							<input type="text" name="q" class="search-input" value="<? echo isset($_POST['q']) ? htmlspecialchars($_POST['q']) : '' ?>" title="<?=_('Search');?>" />
+							<input type="text" class="search-input" name="q" value="<? echo isset($_POST['q']) ? htmlspecialchars($_POST['q']) : '' ?>" title="<?=_('Search');?>">
 							<button type="submit" class="l-sort-toolbar__filter-apply" onclick="return doSearch('/search/')" value="" title="<?=_('Search');?>"><i class="fas fa-search"></i></button>
 						</form>
 					</td>

web/templates/pages/list_dns.html

@@ -28,7 +28,7 @@
 						<td class="l-sort-toolbar__search-box">
 							<form action="/search/" method="get">
 								<input type="hidden" name="token" value="<?=$_SESSION['token']?>" />
-								<input type="text" name="q" class="search-input" value="<? echo isset($_POST['q']) ? htmlspecialchars($_POST['q']) : '' ?>" title="<?=_('Search');?>" />
+								<input type="text" class="search-input" name="q" value="<? echo isset($_POST['q']) ? htmlspecialchars($_POST['q']) : '' ?>" title="<?=_('Search');?>">
 								<button type="submit" class="l-sort-toolbar__filter-apply" onclick="return doSearch('/search/')" value="" title="<?=_('Search');?>"><i class="fas fa-search"></i></button>
 							</form>
 						</td>

web/templates/pages/list_dns_rec.html

@@ -29,7 +29,7 @@
 					<td class="l-sort-toolbar__search-box">
 						<form action="/search/" method="get">
 							<input type="hidden" name="token" value="<?=$_SESSION['token']?>" />
-							<input type="text" name="q" class="search-input" value="<? echo isset($_POST['q']) ? htmlspecialchars($_POST['q']) : '' ?>" title="<?=_('Search');?>" />
+							<input type="text" class="search-input" name="q" value="<? echo isset($_POST['q']) ? htmlspecialchars($_POST['q']) : '' ?>" title="<?=_('Search');?>">
 							<button type="submit" class="l-sort-toolbar__filter-apply" onclick="return doSearch('/search/')" value="" title="<?=_('Search');?>"><i class="fas fa-search"></i></button>
 						</form>
 					</td>

web/templates/pages/list_mail.html

@@ -26,7 +26,7 @@
 					<td class="l-sort-toolbar__search-box">
 						<form action="/search/" method="get">
 							<input type="hidden" name="token" value="<?=$_SESSION['token']?>" />
-							<input type="text" name="q" class="search-input" value="<? echo isset($_POST['q']) ? htmlspecialchars($_POST['q']) : '' ?>" title="<?=_('Search');?>" />
+							<input type="text" class="search-input" name="q" value="<? echo isset($_POST['q']) ? htmlspecialchars($_POST['q']) : '' ?>" title="<?=_('Search');?>">
 							<button type="submit" class="l-sort-toolbar__filter-apply" onclick="return doSearch('/search/')" value="" title="<?=_('Search');?>"><i class="fas fa-search"></i></button>
 						</form>
 					</td>

web/templates/pages/list_mail_acc.html

@@ -32,7 +32,7 @@
 					<td class="l-sort-toolbar__search-box">
 						<form action="/search/" method="get">
 							<input type="hidden" name="token" value="<?=$_SESSION['token']?>" />
-							<input type="text" name="q" class="search-input" value="<? echo isset($_POST['q']) ? htmlspecialchars($_POST['q']) : '' ?>" title="<?=_('Search');?>" />
+							<input type="text" class="search-input" name="q" value="<? echo isset($_POST['q']) ? htmlspecialchars($_POST['q']) : '' ?>" title="<?=_('Search');?>">
 							<button type="submit" class="l-sort-toolbar__filter-apply" onclick="return doSearch('/search/')" value="" title="<?=_('Search');?>"><i class="fas fa-search"></i></button>
 						</form>
 					</td>

web/templates/pages/list_mail_dns.html

@@ -34,27 +34,27 @@
 
 	<div class="l-unit animated fadeIn">
 		<div class="l-unit__col l-unit__col--right">
-			<div class="clearfix l-unit__stat-col--left wide-3"><b><input type="text" class="vst-input" style="width:200px !important;" value="mail.<?=htmlspecialchars($_GET['domain']);?>" /></b></div>
+			<div class="clearfix l-unit__stat-col--left wide-3"><b><input type="text" class="vst-input" style="width:200px !important;" value="mail.<?=htmlspecialchars($_GET['domain']);?>"></b></div>
 			<div class="clearfix l-unit__stat-col--left text-center u-pt18"><b>A</b></div>
 			<div class="clearfix l-unit__stat-col--left text-center u-pt18"><b>&nbsp;</b></div>
 			<div class="clearfix l-unit__stat-col--left text-center u-pt18"><b>14400</b></div>
-			<div class="clearfix l-unit__stat-col--left wide-3"><b><input type="text" class="vst-input" value="<?=(empty($ips[array_key_first($ips)]['NAT'])) ?  array_key_first($ips) : $ips[array_key_first($ips)]['NAT'];?>" /></b></div>
+			<div class="clearfix l-unit__stat-col--left wide-3"><b><input type="text" class="vst-input" value="<?=(empty($ips[array_key_first($ips)]['NAT'])) ?  array_key_first($ips) : $ips[array_key_first($ips)]['NAT'];?>"></b></div>
 		</div>
 	</div>
 	<?php if($_SESSION['WEBMAIL_SYSTEM']){?>
 	<div class="l-unit animated fadeIn">
 		<div class="l-unit__col l-unit__col--right">
-			<div class="clearfix l-unit__stat-col--left wide-3"><b><input type="text" class="vst-input" style="width:200px !important;" value="<?=$v_webmail_alias;?>.<?=htmlspecialchars($_GET['domain']);?>" /></b></div>
+			<div class="clearfix l-unit__stat-col--left wide-3"><b><input type="text" class="vst-input" style="width:200px !important;" value="<?=$v_webmail_alias;?>.<?=htmlspecialchars($_GET['domain']);?>"></b></div>
 			<div class="clearfix l-unit__stat-col--left text-center u-pt18"><b>A</b></div>
 			<div class="clearfix l-unit__stat-col--left text-center u-pt18"><b>&nbsp;</b></div>
 			<div class="clearfix l-unit__stat-col--left text-center u-pt18"><b>14400</b></div>
-			<div class="clearfix l-unit__stat-col--left wide-3"><b><input type="text" class="vst-input" value="<?=(empty($ips[array_key_first($ips)]['NAT'])) ?  array_key_first($ips) : $ips[array_key_first($ips)]['NAT'];?>" /></b></div>
+			<div class="clearfix l-unit__stat-col--left wide-3"><b><input type="text" class="vst-input" value="<?=(empty($ips[array_key_first($ips)]['NAT'])) ?  array_key_first($ips) : $ips[array_key_first($ips)]['NAT'];?>"></b></div>
 		</div>
 	</div>
 	<?php } ?>
 	<div class="l-unit animated fadeIn">
 		<div class="l-unit__col l-unit__col--right">
-			<div class="clearfix l-unit__stat-col--left wide-3"><b><input type="text" class="vst-input" style="width:200px !important;" value="<?=htmlspecialchars($_GET['domain']);?>" /></b></div>
+			<div class="clearfix l-unit__stat-col--left wide-3"><b><input type="text" class="vst-input" style="width:200px !important;" value="<?=htmlspecialchars($_GET['domain']);?>"></b></div>
 			<div class="clearfix l-unit__stat-col--left text-center u-pt18"><b>MX</b></div>
 			<div class="clearfix l-unit__stat-col--left text-center u-pt18"><b>10</b></div>
 			<div class="clearfix l-unit__stat-col--left text-center u-pt18"><b>14400</b></div>
@@ -63,12 +63,12 @@
 	</div>
 	<div class="l-unit animated fadeIn">
 		<div class="l-unit__col l-unit__col--right">
-			<div class="clearfix l-unit__stat-col--left wide-3"><b><input type="text" class="vst-input" style="width:200px !important;" value="<?=htmlspecialchars($_GET['domain']);?>" /></b></div>
+			<div class="clearfix l-unit__stat-col--left wide-3"><b><input type="text" class="vst-input" style="width:200px !important;" value="<?=htmlspecialchars($_GET['domain']);?>"></b></div>
 			<div class="clearfix l-unit__stat-col--left text-center u-pt18"><b>TXT</b></div>
 			<div class="clearfix l-unit__stat-col--left text-center u-pt18"><b>&nbsp;</b></div>
 			<div class="clearfix l-unit__stat-col--left text-center u-pt18"><b>14400</b></div>
 			<?php $ip = (empty($ips[array_key_first($ips)]['NAT'])) ?  array_key_first($ips) : $ips[array_key_first($ips)]['NAT'];?>
-			<div class="clearfix l-unit__stat-col--left wide-3"><b><input type="text" class="vst-input" value="<?=htmlspecialchars('v=spf1 a mx ip4:'.$ip.' -all');?>" /></b></div>
+			<div class="clearfix l-unit__stat-col--left wide-3"><b><input type="text" class="vst-input" value="<?=htmlspecialchars('v=spf1 a mx ip4:'.$ip.' -all');?>"></b></div>
 		</div>
 	</div>
 	<div class="l-unit animated fadeIn">
@@ -77,17 +77,17 @@
 			<div class="clearfix l-unit__stat-col--left text-center u-pt18"><b>TXT</b></div>
 			<div class="clearfix l-unit__stat-col--left text-center u-pt18"><b>&nbsp;</b></div>
 			<div class="clearfix l-unit__stat-col--left text-center u-pt18"><b>14400</b></div>
-			<div class="clearfix l-unit__stat-col--left wide-3"><b><input type="text" class="vst-input" value="<?=htmlspecialchars('v=DMARC1; p=quarantine; pct=100');?>" /></b></div>
+			<div class="clearfix l-unit__stat-col--left wide-3"><b><input type="text" class="vst-input" value="<?=htmlspecialchars('v=DMARC1; p=quarantine; pct=100');?>"></b></div>
 		</div>
 	</div>
 	<?php foreach($dkim as $key => $value){ ?>
 	<div class="l-unit animated fadeIn">
 		<div class="l-unit__col l-unit__col--right">
-			<div class="clearfix l-unit__stat-col--left wide-3"><b><input type="text" class="vst-input" style="width:200px !important;" value="<?=htmlspecialchars($key);?>" /></b></div>
+			<div class="clearfix l-unit__stat-col--left wide-3"><b><input type="text" class="vst-input" style="width:200px !important;" value="<?=htmlspecialchars($key);?>"></b></div>
 			<div class="clearfix l-unit__stat-col--left text-center u-pt18"><b>TXT</b></div>
 			<div class="clearfix l-unit__stat-col--left text-center u-pt18"><b>&nbsp;</b></div>
 			<div class="clearfix l-unit__stat-col--left text-center u-pt18"><b>3600</b></div>
-			<div class="clearfix l-unit__stat-col--left wide-3"><b><input type="text" class="vst-input" value="<?=htmlspecialchars(str_replace(array('"',"'"),'',$dkim[$key]['TXT']));?>" /></b></div>
+			<div class="clearfix l-unit__stat-col--left wide-3"><b><input type="text" class="vst-input" value="<?=htmlspecialchars(str_replace(array('"',"'"),'',$dkim[$key]['TXT']));?>"></b></div>
 		</div>
 	</div>
 	<?php } ?>

web/templates/pages/list_search.html

@@ -18,7 +18,7 @@
 					<td class="l-sort-toolbar__search-box">
 						<form action="/search/" method="get">
 							<input type="hidden" name="token" value="<?=$_SESSION['token']?>" />
-							<input type="text" name="q" class="search-input" value="<? echo isset($_GET['q']) ? htmlspecialchars($_GET['q']) : '' ?>" title="<?=_('Search');?>" />
+							<input type="text" class="search-input" name="q" value="<? echo isset($_GET['q']) ? htmlspecialchars($_GET['q']) : '' ?>" title="<?=_('Search');?>">
 							<button type="submit" class="l-sort-toolbar__filter-apply" onclick="return doSearch('/search/')" value="" title="<?=_('Search');?>"><i class="fas fa-search"></i></button>
 						</form>
 					</td>

web/templates/pages/list_stats.html

@@ -12,7 +12,7 @@
 					<td class="l-sort-toolbar__search-box">
 						<form action="/search/" method="get">
 							<input type="hidden" name="token" value="<?=$_SESSION['token']?>" />
-							<input type="text" name="q" class="search-input" value="<? echo isset($_POST['q']) ? htmlspecialchars($_POST['q']) : '' ?>" title="<?=_('Search');?>" />
+							<input type="text" class="search-input" name="q" value="<? echo isset($_POST['q']) ? htmlspecialchars($_POST['q']) : '' ?>" title="<?=_('Search');?>">
 							<button type="submit" class="l-sort-toolbar__filter-apply" onclick="return doSearch('/search/')" value="" title="<?=_('Search');?>"><i class="fas fa-search"></i></button>
 						</form>
 					</td>

web/templates/pages/list_user.html

@@ -25,7 +25,7 @@
 					<td class="l-sort-toolbar__search-box">
 						<form action="/search/" method="get">
 							<input type="hidden" name="token" value="<?=$_SESSION['token']?>" />
-							<input type="text" name="q" class="search-input" value="<? echo isset($_POST['q']) ? htmlspecialchars($_POST['q']) : '' ?>" title="<?=_('Search');?>" />
+							<input type="text" class="search-input" name="q" value="<? echo isset($_POST['q']) ? htmlspecialchars($_POST['q']) : '' ?>" title="<?=_('Search');?>">
 							<button type="submit" class="l-sort-toolbar__filter-apply" onclick="return doSearch('/search/')" value="" title="<?=_('Search');?>"><i class="fas fa-search"></i></button>
 						</form>
 					</td>

web/templates/pages/list_web.html

@@ -27,7 +27,7 @@
 					<td class="l-sort-toolbar__search-box">
 						<form action="/search/" method="get">
 							<input type="hidden" name="token" value="<?=$_SESSION['token']?>" />
-							<input type="text" name="q" class="search-input" value="<? echo isset($_POST['q']) ? htmlspecialchars($_POST['q']) : '' ?>" title="<?=_('Search');?>" />
+							<input type="text" class="search-input" name="q" value="<? echo isset($_POST['q']) ? htmlspecialchars($_POST['q']) : '' ?>" title="<?=_('Search');?>">
 							<button type="submit" class="l-sort-toolbar__filter-apply" onclick="return doSearch('/search/')" value="" title="<?=_('Search');?>"><i class="fas fa-search"></i></button>
 						</form>
 					</td>

web/templates/pages/login/login.html

@@ -24,7 +24,7 @@
 									</tr>
 									<tr>
 										<td>
-											<input tabindex="1" type="text" size="20px" style="width:240px;" name="user" class="vst-input" autofocus />
+											<input type="text" class="vst-input" tabindex="1" style="width:240px;" name="user" autofocus>
 										</td>
 									</tr>
 									<tr>

web/templates/pages/login/login_1.html

@@ -31,7 +31,7 @@
 									</tr>
 									<tr>
 										<td>
-											<input tabindex="2" type="password" size="20px" style="width:240px;" name="password" class="vst-input" autofocus />
+											<input type="password" class="vst-input" tabindex="2" style="width:240px;" name="password" autofocus>
 										</td>
 									</tr>
 									<tr>

web/templates/pages/login/login_2.html

@@ -29,7 +29,7 @@
 									</tr>
 									<tr>
 										<td>
-											<input tabindex="2" type="" size="20px" style="width:240px;" name="twofa" class="vst-input" autofocus />
+											<input type="text" class="vst-input" tabindex="2" style="width:240px;" name="twofa" autofocus>
 										</td>
 									</tr>
 									<tr>

web/templates/pages/login/login_a.html

@@ -24,7 +24,7 @@
 									</tr>
 									<tr>
 										<td>
-											<input tabindex="1" type="text" size="20px" style="width:240px;" name="user" class="vst-input" autofocus />
+											<input type="text" class="vst-input" tabindex="1" style="width:240px;" name="user" autofocus>
 										</td>
 									</tr>
 									<tr>
@@ -41,7 +41,7 @@
 									</tr>
 									<tr>
 										<td>
-											<input tabindex="2" type="password" size="20px" style="width:240px;" name="password" class="vst-input" />
+											<input type="password" class="vst-input" tabindex="2" style="width:240px;" name="password">
 										</td>
 									</tr>
 									<tr>

web/templates/pages/login/reset2fa.html

@@ -37,7 +37,7 @@
 										</tr>
 										<tr>
 											<td>
-												<input tabindex="1" type="text" size="20px" style="width:240px" name="user" class="vst-input">
+												<input type="text" class="vst-input" tabindex="1" style="width:240px" name="user">
 											</td>
 										</tr>
 										<tr>
@@ -47,7 +47,7 @@
 										</tr>
 										<tr>
 											<td>
-												<input tabindex="1" type="text" size="20px" style="width:240px" name="twofa" class="vst-input">
+												<input type="text" class="vst-input" tabindex="1" style="width:240px" name="twofa">
 											</td>
 										</tr>
 										<tr>

web/templates/pages/login/reset_1.html

@@ -23,7 +23,7 @@
 									</tr>
 									<tr>
 										<td>
-											<input tabindex="1" type="text" size="20px" style="width:240px" name="user" class="vst-input">
+											<input type="text" class="vst-input" tabindex="1" style="width:240px" name="user">
 										</td>
 									</tr>
 									<tr>
@@ -33,7 +33,7 @@
 									</tr>
 									<tr>
 										<td>
-											<input tabindex="1" type="text" size="20px" style="width:240px" name="email" class="vst-input">
+											<input type="text" class="vst-input" tabindex="1" style="width:240px" name="email">
 										</td>
 									</tr>
 									<tr>

web/templates/pages/login/reset_2.html

@@ -28,7 +28,7 @@
 											<input type="hidden" name="action" value="confirm">
 											<input type="hidden" name="token" value="<?=htmlentities($_SESSION['token']);?>"/>
 											<input type="hidden" name="user" value="<?=htmlentities($_GET['user'])?>">
-											<input tabindex="1" type="text" size="20px" style="width:240px" name="code" class="vst-input">
+											<input type="text" class="vst-input" tabindex="1" style="width:240px" name="code">
 										</td>
 									</tr>
 									<tr>

web/templates/pages/login/reset_3.html

@@ -26,7 +26,7 @@
 									</tr>
 									<tr>
 										<td>
-											<input tabindex="1" type="password" size="20px" style="width:200px;" name="password" class="vst-input">
+											<input type="password" class="vst-input" tabindex="1" style="width:200px;" name="password">
 										</td>
 									</tr>
 									<tr>
@@ -36,7 +36,7 @@
 									</tr>
 									<tr>
 										<td>
-											<input tabindex="2" type="password" size="20px" style="width:200px;" name="password_confirm" class="vst-input">
+											<input type="password" class="vst-input" tabindex="2" style="width:200px;" name="password_confirm">
 										</td>
 									</tr>
 									<tr>

web/templates/pages/setup_webapp.html

@@ -22,10 +22,10 @@
 
 <div class="l-separator"></div>
 
-<div class="l-center animated fadeIn" style="padding-top:240px;">
+<div class="l-center animated fadeIn">
 
 	<?php if( !empty($WebappInstaller->getOptions())): ?>
-		<form id="vstobjects" method="POST" name="v_setup_webapp" style="padding-top:0px;">
+		<form id="vstobjects" method="POST" name="v_setup_webapp">
 			<input type="hidden" name="token" value="<?=$_SESSION['token']?>" />
 			<input type="hidden" name="ok" value="true" />
 
@@ -61,7 +61,7 @@
 						$f_name = htmlentities($f_name);
 						$f_placeholder = htmlentities($f_placeholder);
 					?>
-					<div style="max-width: 360px" class="u-mb20">
+					<div class="u-mb20">
 						<?php if($f_type != 'boolean'): ?>
 							<label for="<?=$f_name?>" class="form-label">
 								<?=$f_label?>
@@ -69,7 +69,7 @@
 							</label>
 						<?php endif; ?>
 						<?php if (in_array($f_type, ['select']) && count($form_control['options']) ):?>
-							<select class="form-select" name="<?=$f_name?>" id="<?=$f_name?>">
+							<select class="form-select u-inputWidth" name="<?=$f_name?>" id="<?=$f_name?>">
 								<?php foreach ($form_control['options'] as $key => $option){
 									if(is_numeric($key)){
 										$key = $option;
@@ -86,7 +86,7 @@
 								<label for="<?=$f_name?>"><?=$f_label?></label>
 							</div>
 						<?php else:?>
-							<input type="text" class="form-control" name="<?=$f_name?>" id="<?=$f_name?>" placeholder="<?=$f_placeholder?>" value="<?=$f_value?>">
+							<input type="text" class="form-control u-inputWidth" name="<?=$f_name?>" id="<?=$f_name?>" placeholder="<?=$f_placeholder?>" value="<?=$f_value?>">
 						<?php endif; ?>
 					</div>
 				<?php endforeach; ?>